@tabula-css/react

オプションの Tabula 舗装された道プリミティブ: <Text>、<Separator>、<Prose>。レジストリに基づくマージ。インポートグラフに Tailwind は含まれません。

インストール

npm install @tabula-css/react

ランタイム依存です — 開発時側のツールパッケージとは異なり、@tabula-css/react はあなたのアプリがレンダリングするコンポーネントを提供します。@tabula-css/merge のみに依存し(react はピア依存、^18.0.0 || ^19.0.0)、ランタイムの他の部分と同様に、そのインポートグラフに Tailwind が現れることは決してありません。

概要

これら 3 つのコンポーネントはすべてオプションです: プロファイル内で React を必須とするものは何もなく、それぞれは手書きできるマークアップに対する便宜にすぎません。それぞれが存在するのは、プロファイルが何かを禁止しており、その代替を提供する義務があるからです — <Separator> は、禁止された divide-* ファミリーを、子要素の間にある実際の要素で置き換えます。<Text> は、未登録の部分的な typography ユーティリティ(text-sm、font-medium)の代わりとなる、閉じた type-*/ink-* テキストリーフです。そして <Prose> は、プロファイルが明示的に管理を辞退する、作成されていない HTML(レンダリングされた markdown、CMS の出力)のための隔離境界です。すべてのプリミティブはその ref を転送し、呼び出し元の className を cn() を通じて最後にマージするため、呼び出し元によるオーバーライドは常に決定論的に勝ちます。

Text

正確に 1 つの type-* バンドルと 1 つの ink-* カラーを持つ、単一のテキストリーフをレンダリングします — これは、継承可能な typography プロパティを書き込むことが許可された唯一のクラスです。as は意図的に閉じたテキストリーフタグのリストです: 任意のコンテナを許すと、このコンポーネントが取り除くために存在する祖先継承の問題を再び持ち込んでしまいます。

Prop	Type	Default	Description
as	'p' | 'span' | 'label' | 'strong' | 'em' | 'small' | 'h1'..'h6' | 'legend' | 'figcaption'	'p'	レンダリングされるタグ。
variant	'body' | 'label' | 'small' | 'heading'	'body'	type-body / type-label / type-small / type-heading にマッピングされます。
tone	'text' | 'muted' | 'accent' | 'danger' | 'on-accent'	'text'	ink-text / ink-text-muted / ink-accent / ink-danger / ink-on-accent にマッピングされます。
htmlFor	string	—	as="label" の場合に for へ転送されます。
className	ClassName	—	素通りクラス。cn() を通じて最後にマージされます。

加えて、あらゆる React.HTMLAttributes<HTMLElement> のプロパティ。

あなたのプロジェクトに次のトークンが存在している必要があります: type.body、type.label、type.small、type.heading、color.text、color.text-muted、color.accent、color.danger、color.on-accent。

import { Text } from '@tabula-css/react';

<Text as="h2" variant="heading" tone="text">Section title</Text>
<Text variant="small" tone="muted">Last updated 3 days ago</Text>

Separator

divide-*(親から兄弟要素をスタイリングするもので、禁止された非局所的メカニズムです)の代わりに、子要素の間に実際の要素をレンダリングします。それぞれの子自身の間隔は、その子自身のマークアップの中に置かれます。

Prop	Type	Default	Description
orientation	'horizontal' | 'vertical'	'horizontal'	bg-border w-full h-hairline / bg-border w-hairline h-full にマッピングされます。aria-orientation も設定します。
decorative	boolean	false	グループ化が他の場所で伝えられる、純粋に視覚的なルールとして、aria-orientation なしで role="none" をレンダリングします。
className	ClassName	—	素通りクラス。cn() を通じて最後にマージされます。

加えて、あらゆる React.HTMLAttributes<HTMLDivElement> のプロパティ。

次のトークンが必要です: color.border、size.hairline(1px)、size.full(100%)。

import { Separator } from '@tabula-css/react';

<Separator />
<Separator orientation="vertical" decorative />

Prose

プロファイルが管理しないサブツリーをマークします — これはスタイルではなく、正直な「無主張」の宣言です。境界の内側では、局所性は明示的に停止されます: resolve_element(@tabula-css/mcp を参照)は、その内部にあるものすべてに対して { managed: false, reason: "prose-quarantine" } を返します。すべての要素の子は、登録済みの not-prose マーカーユーティリティで自動的にフェンスされ、生成されたリセットがその唯一の許可された祖先コンビネータを通じてサブツリーを除外できるようにします。コンポーネントの子は、フェンスが着地するために className を自身のルートへ転送しなければなりません。

Prop	Type	Default	Description
html	string	—	境界の内側にレンダリングする、作成されていない HTML(markdown/CMS のケース)。children とは互いに排他的。
children	ReactNode	—	作成された子要素。すべての要素の子は自動的にフェンスされます。html とは互いに排他的。
as	'article' | 'div' | 'section' | 'aside'	'div'	レンダリングされるタグ。
className	ClassName	—	レイアウト/ボックス系ユーティリティのみ(w-、max-w-、m*、p*)— 最後にマージされます。開発環境では、それ以外のユーティリティは例外を投げます。境界は、自身が管理を辞退するコンテンツへ継承されるものを何も設定してはならないためです。

import { Prose } from '@tabula-css/react';

<Prose html={renderedMarkdownHtml} className="max-w-prose" />

<Prose>
  <p>Authored paragraph, auto-fenced with <code>not-prose</code>.</p>
</Prose>

また、次もエクスポートされています: useInQuarantine() — 呼び出し元のコンポーネントが <Prose> 境界の内側でレンダリングされているかどうかを返すフック — と、その境界が設定する QUARANTINE_ATTRIBUTE/QUARANTINE_KIND 定数(@tabula-css/core から再エクスポートされており、コンポーネントとあらゆるツールが同じ値を読み取ります)。

開発環境では、<Prose> は、静かに誤ったマークアップをレンダリングするのではなく、例外を投げます: 別の <Prose> 境界の内側にネストされている場合(隔離を再びネストすることはできません)、html と children の両方が渡された場合、または className がボックス/レイアウトの許可リスト外の何かを持つ場合です。

関連パッケージ

• @tabula-css/merge — これらのコンポーネントが土台とする cn()/ClassName。
• Concepts — banned mechanisms — divide-* と部分的な typography ユーティリティが禁止されている理由。
• Agent surface — resolve_element の managed: false 隔離レポート。