@novi-ui/flatlay 0.2.0 → 0.4.0

package/dist/select/select.mjs

@@ -38,7 +38,7 @@ function SelectItem({ id, isDisabled, children, className }) {
 * 矢印キーで移動、Escape で閉じてトリガーへフォーカスが戻る。
 *
 * トリガーは `<button>` で編集可能要素ではないため IME の変換は発生しない。
-* テキスト入力を伴う選択が必要な場合は ComboBox を使う（MVP の対象外）。
+* テキスト入力を伴う選択が必要な場合は ComboBox を使う。
 *
 * @example
 * <Select label="都道府県" selectedKey={pref} onSelectionChange={setPref}>

package/dist/select/select.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"select.mjs","names":["Select","RACSelect"],"sources":["../../src/select/select.tsx"],"sourcesContent":["'use client'\n\nimport type { SelectProps } from '@novi-ui/core'\nimport type { ReactNode } from 'react'\nimport {\n  Button,\n  FieldError,\n  Label,\n  ListBox,\n  ListBoxItem,\n  Select as RACSelect,\n  SelectValue,\n  Text,\n} from 'react-aria-components'\nimport { InflowPopover } from '../styles/inflow'\nimport { optionMarkerClass, selectStyles } from './select.styles'\n\nexport interface SelectItemProps {\n  /** 選択値。`onSelectionChange` に渡る */\n  id: string\n  isDisabled?: boolean\n  children?: ReactNode\n  className?: string\n}\n\n/**\n * Select の選択肢。`Select` の子として置く。\n *\n * 選択済みの印は行頭の `▸`（両テーマはチェックマーク）。押下の反転と衝突しないよう、\n * 状態は記号で、押した瞬間は面の反転で示すという役割分担にしている。\n *\n * @example\n * <SelectItem id=\"tokyo\">東京都</SelectItem>\n */\nexport function SelectItem({ id, isDisabled, children, className }: SelectItemProps) {\n  return (\n    <ListBoxItem\n      id={id}\n      isDisabled={isDisabled}\n      textValue={typeof children === 'string' ? children : undefined}\n      data-slot=\"option\"\n      className={className ?? selectStyles().option()}\n    >\n      {({ isSelected }) => (\n        <>\n          <span aria-hidden=\"true\" className={optionMarkerClass}>\n            {isSelected ? '▸' : ''}\n          </span>\n          <span className=\"truncate\">{children}</span>\n        </>\n      )}\n    </ListBoxItem>\n  )\n}\n\n/**\n * 一覧から1つ選ぶ。**選択肢はトリガーの直後、フローの中に展開される**\n * （Raster は隣に浮き、Tactile は画面下端のシート）。\n *\n * 開くと後続が押し下げられるので、何かが隠れることが無い。\n * 矢印キーで移動、Escape で閉じてトリガーへフォーカスが戻る。\n *\n * トリガーは `<button>` で編集可能要素ではないため IME の変換は発生しない。\n * テキスト入力を伴う選択が必要な場合は ComboBox を使う（MVP の対象外）。\n *\n * @example\n * <Select label=\"都道府県\" selectedKey={pref} onSelectionChange={setPref}>\n *   <SelectItem id=\"tokyo\">東京都</SelectItem>\n *   <SelectItem id=\"osaka\">大阪府</SelectItem>\n * </Select>\n */\nexport function Select({\n  variant,\n  size,\n  radius,\n  label,\n  placeholder = '選択してください',\n  description,\n  errorMessage,\n  name,\n  selectedKey,\n  defaultSelectedKey,\n  onSelectionChange,\n  isOpen,\n  defaultOpen,\n  onOpenChange,\n  isDisabled,\n  isRequired,\n  isInvalid,\n  children,\n  className,\n  classNames,\n  id,\n}: SelectProps) {\n  const s = selectStyles({ variant, size, radius })\n\n  return (\n    <RACSelect\n      id={id}\n      name={name}\n      selectedKey={selectedKey}\n      defaultSelectedKey={defaultSelectedKey}\n      onSelectionChange={(key) => onSelectionChange?.(key === null ? null : String(key))}\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      isDisabled={isDisabled}\n      isRequired={isRequired}\n      isInvalid={isInvalid}\n      placeholder={placeholder}\n      data-slot=\"root\"\n      // trigger 側から invalid / open を参照するために group を付ける\n      className={`group ${s.root({ class: [className, classNames?.root] })}`}\n    >\n      {label !== undefined && (\n        <Label data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n          {label}\n        </Label>\n      )}\n\n      <Button data-slot=\"trigger\" className={s.trigger({ class: classNames?.trigger })}>\n        <SelectValue data-slot=\"value\" className={s.value({ class: classNames?.value })} />\n        <span aria-hidden=\"true\" data-slot=\"icon\" className={s.icon({ class: classNames?.icon })}>\n          {/* 回さずに差し替える。開いている間だけ字が反転する */}\n          <span className=\"group-data-[open]:hidden\">▾</span>\n          <span className=\"hidden group-data-[open]:inline\">▴</span>\n        </span>\n      </Button>\n\n      {/* 展開部はトリガーの直後。ここに面が生えることで、description 以降が押し下がる */}\n      <InflowPopover dataSlot=\"popover\" className={s.popover({ class: classNames?.popover })}>\n        <ListBox data-slot=\"listbox\" className={s.listbox({ class: classNames?.listbox })}>\n          {children}\n        </ListBox>\n      </InflowPopover>\n\n      {description !== undefined && (\n        <Text\n          slot=\"description\"\n          data-slot=\"description\"\n          className={s.description({ class: classNames?.description })}\n        >\n          {description}\n        </Text>\n      )}\n\n      <FieldError\n        data-slot=\"errorMessage\"\n        className={s.errorMessage({ class: classNames?.errorMessage })}\n      >\n        {errorMessage}\n      </FieldError>\n    </RACSelect>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkCA,SAAgB,WAAW,EAAE,IAAI,YAAY,UAAU,aAA8B;CACnF,OACE,oBAAC,aAAD;EACM;EACQ;EACZ,WAAW,OAAO,aAAa,WAAW,WAAW,KAAA;EACrD,aAAU;EACV,WAAW,aAAa,aAAa,CAAC,CAAC,OAAO;EAE5C,WAAA,EAAE,iBACF,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAW;GACjC,UAAA,aAAa,MAAM;EAChB,CAAA,GACN,oBAAC,QAAD;GAAM,WAAU;GAAY;EAAe,CAAA,CAC3C,EAAA,CAAA;CAEO,CAAA;AAEjB;;;;;;;;;;;;;;;;;AAkBA,SAAgBA,SAAO,EACrB,SACA,MACA,QACA,OACA,cAAc,YACd,aACA,cACA,MACA,aACA,oBACA,mBACA,QACA,aACA,cACA,YACA,YACA,WACA,UACA,WACA,YACA,MACc;CACd,MAAM,IAAI,aAAa;EAAE;EAAS;EAAM;CAAO,CAAC;CAEhD,OACE,qBAACC,QAAD;EACM;EACE;EACO;EACO;EACpB,oBAAoB,QAAQ,oBAAoB,QAAQ,OAAO,OAAO,OAAO,GAAG,CAAC;EACzE;EACK;EACC;EACF;EACA;EACD;EACE;EACb,aAAU;EAEV,WAAW,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAfrE,UAAA;GAiBG,UAAU,KAAA,KACT,oBAAC,OAAD;IAAO,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACrE,UAAA;GACI,CAAA;GAGT,qBAAC,QAAD;IAAQ,aAAU;IAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;IAA/E,UAAA,CACE,oBAAC,aAAD;KAAa,aAAU;KAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IAAI,CAAA,GAClF,qBAAC,QAAD;KAAM,eAAY;KAAO,aAAU;KAAO,WAAW,EAAE,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;KAAvF,UAAA,CAEE,oBAAC,QAAD;MAAM,WAAU;MAA2B,UAAA;KAAO,CAAA,GAClD,oBAAC,QAAD;MAAM,WAAU;MAAkC,UAAA;KAAO,CAAA,CACrD;IACA,CAAA,CAAA;;GAGR,oBAAC,eAAD;IAAe,UAAS;IAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;IACnF,UAAA,oBAAC,SAAD;KAAS,aAAU;KAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;KAC7E;IACM,CAAA;GACI,CAAA;GAEd,gBAAgB,KAAA,KACf,oBAAC,MAAD;IACE,MAAK;IACL,aAAU;IACV,WAAW,EAAE,YAAY,EAAE,OAAO,YAAY,YAAY,CAAC;IAE1D,UAAA;GACG,CAAA;GAGR,oBAAC,YAAD;IACE,aAAU;IACV,WAAW,EAAE,aAAa,EAAE,OAAO,YAAY,aAAa,CAAC;IAE5D,UAAA;GACS,CAAA;EACH;;AAEf"}
+{"version":3,"file":"select.mjs","names":["Select","RACSelect"],"sources":["../../src/select/select.tsx"],"sourcesContent":["'use client'\n\nimport type { SelectProps } from '@novi-ui/core'\nimport type { ReactNode } from 'react'\nimport {\n  Button,\n  FieldError,\n  Label,\n  ListBox,\n  ListBoxItem,\n  Select as RACSelect,\n  SelectValue,\n  Text,\n} from 'react-aria-components'\nimport { InflowPopover } from '../styles/inflow'\nimport { optionMarkerClass, selectStyles } from './select.styles'\n\nexport interface SelectItemProps {\n  /** 選択値。`onSelectionChange` に渡る */\n  id: string\n  isDisabled?: boolean\n  children?: ReactNode\n  className?: string\n}\n\n/**\n * Select の選択肢。`Select` の子として置く。\n *\n * 選択済みの印は行頭の `▸`（両テーマはチェックマーク）。押下の反転と衝突しないよう、\n * 状態は記号で、押した瞬間は面の反転で示すという役割分担にしている。\n *\n * @example\n * <SelectItem id=\"tokyo\">東京都</SelectItem>\n */\nexport function SelectItem({ id, isDisabled, children, className }: SelectItemProps) {\n  return (\n    <ListBoxItem\n      id={id}\n      isDisabled={isDisabled}\n      textValue={typeof children === 'string' ? children : undefined}\n      data-slot=\"option\"\n      className={className ?? selectStyles().option()}\n    >\n      {({ isSelected }) => (\n        <>\n          <span aria-hidden=\"true\" className={optionMarkerClass}>\n            {isSelected ? '▸' : ''}\n          </span>\n          <span className=\"truncate\">{children}</span>\n        </>\n      )}\n    </ListBoxItem>\n  )\n}\n\n/**\n * 一覧から1つ選ぶ。**選択肢はトリガーの直後、フローの中に展開される**\n * （Raster は隣に浮き、Tactile は画面下端のシート）。\n *\n * 開くと後続が押し下げられるので、何かが隠れることが無い。\n * 矢印キーで移動、Escape で閉じてトリガーへフォーカスが戻る。\n *\n * トリガーは `<button>` で編集可能要素ではないため IME の変換は発生しない。\n * テキスト入力を伴う選択が必要な場合は ComboBox を使う。\n *\n * @example\n * <Select label=\"都道府県\" selectedKey={pref} onSelectionChange={setPref}>\n *   <SelectItem id=\"tokyo\">東京都</SelectItem>\n *   <SelectItem id=\"osaka\">大阪府</SelectItem>\n * </Select>\n */\nexport function Select({\n  variant,\n  size,\n  radius,\n  label,\n  placeholder = '選択してください',\n  description,\n  errorMessage,\n  name,\n  selectedKey,\n  defaultSelectedKey,\n  onSelectionChange,\n  isOpen,\n  defaultOpen,\n  onOpenChange,\n  isDisabled,\n  isRequired,\n  isInvalid,\n  children,\n  className,\n  classNames,\n  id,\n}: SelectProps) {\n  const s = selectStyles({ variant, size, radius })\n\n  return (\n    <RACSelect\n      id={id}\n      name={name}\n      selectedKey={selectedKey}\n      defaultSelectedKey={defaultSelectedKey}\n      onSelectionChange={(key) => onSelectionChange?.(key === null ? null : String(key))}\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      isDisabled={isDisabled}\n      isRequired={isRequired}\n      isInvalid={isInvalid}\n      placeholder={placeholder}\n      data-slot=\"root\"\n      // trigger 側から invalid / open を参照するために group を付ける\n      className={`group ${s.root({ class: [className, classNames?.root] })}`}\n    >\n      {label !== undefined && (\n        <Label data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n          {label}\n        </Label>\n      )}\n\n      <Button data-slot=\"trigger\" className={s.trigger({ class: classNames?.trigger })}>\n        <SelectValue data-slot=\"value\" className={s.value({ class: classNames?.value })} />\n        <span aria-hidden=\"true\" data-slot=\"icon\" className={s.icon({ class: classNames?.icon })}>\n          {/* 回さずに差し替える。開いている間だけ字が反転する */}\n          <span className=\"group-data-[open]:hidden\">▾</span>\n          <span className=\"hidden group-data-[open]:inline\">▴</span>\n        </span>\n      </Button>\n\n      {/* 展開部はトリガーの直後。ここに面が生えることで、description 以降が押し下がる */}\n      <InflowPopover dataSlot=\"popover\" className={s.popover({ class: classNames?.popover })}>\n        <ListBox data-slot=\"listbox\" className={s.listbox({ class: classNames?.listbox })}>\n          {children}\n        </ListBox>\n      </InflowPopover>\n\n      {description !== undefined && (\n        <Text\n          slot=\"description\"\n          data-slot=\"description\"\n          className={s.description({ class: classNames?.description })}\n        >\n          {description}\n        </Text>\n      )}\n\n      <FieldError\n        data-slot=\"errorMessage\"\n        className={s.errorMessage({ class: classNames?.errorMessage })}\n      >\n        {errorMessage}\n      </FieldError>\n    </RACSelect>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkCA,SAAgB,WAAW,EAAE,IAAI,YAAY,UAAU,aAA8B;CACnF,OACE,oBAAC,aAAD;EACM;EACQ;EACZ,WAAW,OAAO,aAAa,WAAW,WAAW,KAAA;EACrD,aAAU;EACV,WAAW,aAAa,aAAa,CAAC,CAAC,OAAO;EAE5C,WAAA,EAAE,iBACF,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAW;GACjC,UAAA,aAAa,MAAM;EAChB,CAAA,GACN,oBAAC,QAAD;GAAM,WAAU;GAAY;EAAe,CAAA,CAC3C,EAAA,CAAA;CAEO,CAAA;AAEjB;;;;;;;;;;;;;;;;;AAkBA,SAAgBA,SAAO,EACrB,SACA,MACA,QACA,OACA,cAAc,YACd,aACA,cACA,MACA,aACA,oBACA,mBACA,QACA,aACA,cACA,YACA,YACA,WACA,UACA,WACA,YACA,MACc;CACd,MAAM,IAAI,aAAa;EAAE;EAAS;EAAM;CAAO,CAAC;CAEhD,OACE,qBAACC,QAAD;EACM;EACE;EACO;EACO;EACpB,oBAAoB,QAAQ,oBAAoB,QAAQ,OAAO,OAAO,OAAO,GAAG,CAAC;EACzE;EACK;EACC;EACF;EACA;EACD;EACE;EACb,aAAU;EAEV,WAAW,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAfrE,UAAA;GAiBG,UAAU,KAAA,KACT,oBAAC,OAAD;IAAO,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACrE,UAAA;GACI,CAAA;GAGT,qBAAC,QAAD;IAAQ,aAAU;IAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;IAA/E,UAAA,CACE,oBAAC,aAAD;KAAa,aAAU;KAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IAAI,CAAA,GAClF,qBAAC,QAAD;KAAM,eAAY;KAAO,aAAU;KAAO,WAAW,EAAE,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;KAAvF,UAAA,CAEE,oBAAC,QAAD;MAAM,WAAU;MAA2B,UAAA;KAAO,CAAA,GAClD,oBAAC,QAAD;MAAM,WAAU;MAAkC,UAAA;KAAO,CAAA,CACrD;IACA,CAAA,CAAA;;GAGR,oBAAC,eAAD;IAAe,UAAS;IAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;IACnF,UAAA,oBAAC,SAAD;KAAS,aAAU;KAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;KAC7E;IACM,CAAA;GACI,CAAA;GAEd,gBAAgB,KAAA,KACf,oBAAC,MAAD;IACE,MAAK;IACL,aAAU;IACV,WAAW,EAAE,YAAY,EAAE,OAAO,YAAY,YAAY,CAAC;IAE1D,UAAA;GACG,CAAA;GAGR,oBAAC,YAAD;IACE,aAAU;IACV,WAAW,EAAE,aAAa,EAAE,OAAO,YAAY,aAAa,CAAC;IAE5D,UAAA;GACS,CAAA;EACH;;AAEf"}

package/dist/select/select.styles.d.mts

@@ -17,7 +17,7 @@ declare const selectStyles: import("tailwind-variants").TVReturnType<{
     trigger: string;
     option: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     trigger: string;
   }>;
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
@@ -39,7 +39,7 @@ declare const selectStyles: import("tailwind-variants").TVReturnType<{
     trigger: string;
     option: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     trigger: string;
   }>;
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
@@ -61,7 +61,7 @@ declare const selectStyles: import("tailwind-variants").TVReturnType<{
     trigger: string;
     option: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     trigger: string;
   }>;
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {

package/dist/skeleton/skeleton.styles.d.mts

@@ -11,7 +11,7 @@ import { VariantMap } from "@novi-ui/core";
  * const mySkeleton = tv({ extend: skeletonStyles, slots: { root: 'opacity-50' } })
  */
 declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
 }, {
@@ -21,7 +21,7 @@ declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
    */
   root: string;
 }, undefined, {
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
 }, {
@@ -31,7 +31,7 @@ declare const skeletonStyles: import("tailwind-variants").TVReturnType<{
    */
   root: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
 }, {

package/dist/table/index.d.mts

@@ -0,0 +1,3 @@
+import { Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableColumn, TableColumnProps, TableHeader, TableHeaderProps, TableRow, TableRowProps } from "./table.mjs";
+import { TableStyleProps, tableStyles } from "./table.styles.mjs";
+export { Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, type TableHeaderProps, TableRow, type TableRowProps, type TableStyleProps, tableStyles };

package/dist/table/table.d.mts

@@ -0,0 +1,104 @@
+import { ReactNode } from "react";
+import { TableProps } from "@novi-ui/core";
+//#region src/table/table.d.ts
+interface TableHeaderProps {
+  children?: ReactNode;
+  className?: string;
+}
+/**
+ * 見出し行。`TableColumn` を並べる。
+ *
+ * @example
+ * <TableHeader>
+ *   <TableColumn id="name" isRowHeader>商品名</TableColumn>
+ * </TableHeader>
+ */
+declare function TableHeader({ children, className }: TableHeaderProps): import("react").JSX.Element;
+interface TableColumnProps {
+  /** 列の id。`sortDescriptor.column` に入る */
+  id: string;
+  /** この列で並べ替えられる。見出しが押せるようになり `aria-sort` が付く */
+  allowsSorting?: boolean;
+  /** 行の名前になる列。少なくとも 1 列に付ける */
+  isRowHeader?: boolean;
+  /** 金額や数量は `end`（右寄せ） */
+  align?: 'start' | 'end';
+  children?: ReactNode;
+  className?: string;
+}
+/**
+ * 見出しのセル。
+ *
+ * @example
+ * <TableColumn id="amount" allowsSorting align="end">金額</TableColumn>
+ */
+declare function TableColumn({ id, allowsSorting, isRowHeader, align, children, className }: TableColumnProps): import("react").JSX.Element;
+interface TableBodyProps {
+  children?: ReactNode;
+  /** 行が 0 件のときに本体へ出す内容 */
+  renderEmptyState?: () => ReactNode;
+  className?: string;
+}
+/**
+ * 本体。`TableRow` を並べる。行が無いときは `renderEmptyState` の内容が出る。
+ *
+ * @example
+ * <TableBody renderEmptyState={() => '該当する注文はありません'}>
+ *   {rows}
+ * </TableBody>
+ */
+declare function TableBody({ children, renderEmptyState, className }: TableBodyProps): import("react").JSX.Element;
+interface TableRowProps {
+  /** 行の id。選択と `onRowAction` に渡る */
+  id: string;
+  isDisabled?: boolean;
+  children?: ReactNode;
+  className?: string;
+}
+/**
+ * 行。`TableCell` を列の数だけ並べる。
+ *
+ * @example
+ * <TableRow id="1042">
+ *   <TableCell>#1042</TableCell>
+ * </TableRow>
+ */
+declare function TableRow({ id, isDisabled, children, className }: TableRowProps): import("react").JSX.Element;
+interface TableCellProps {
+  /** 金額や数量は `end`（右寄せ）。見出しと揃える */
+  align?: 'start' | 'end';
+  children?: ReactNode;
+  className?: string;
+}
+/**
+ * セル。
+ *
+ * @example
+ * <TableCell align="end">¥12,800</TableCell>
+ */
+declare function TableCell({ align, children, className }: TableCellProps): import("react").JSX.Element;
+/**
+ * 一覧を行と列で見せる。**縦横の罫線で升目を切った帳票**。見出しは等幅、数字は等幅の右詰め
+ * （Raster は横罫だけ、Tactile は行が面）。
+ *
+ * 行の選択は行そのものを押す（チェックボックスは出さない）。
+ * 狭い画面では表そのものが横にスクロールする。`overflow-x-auto` の枠で包むこと。
+ *
+ * @example
+ * <Table aria-label="注文一覧" sortDescriptor={sort} onSortChange={setSort}>
+ *   <TableHeader>
+ *     <TableColumn id="no" isRowHeader>注文番号</TableColumn>
+ *     <TableColumn id="amount" allowsSorting align="end">金額</TableColumn>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow id="1042">
+ *       <TableCell>#1042</TableCell>
+ *       <TableCell align="end">¥12,800</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ */
+declare function Table({ 'aria-label': ariaLabel, size, sortDescriptor, onSortChange, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, disabledKeys, onRowAction, children, className, classNames }: TableProps): import("react").JSX.Element;
+//#endregion
+export { Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableColumn, TableColumnProps, TableHeader, TableHeaderProps, TableRow, TableRowProps };
+//# sourceMappingURL=table.d.mts.map

package/dist/table/table.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.mts","names":[],"sources":["../../src/table/table.tsx"],"mappings":";;;UAkCiB;EACf,WAAW;EACX;;;;;;;;;;iBAWc,cAAc,UAAU,aAAa,mCAAgB,IAAA;UAYpD;;EAEf;;EAEA;;EAEA;;EAEA;EACA,WAAW;EACX;;;;;;;;iBASc,cACd,IACA,eACA,aACA,OACA,UACA,aACC,mCAAgB,IAAA;UAwBF;EACf,WAAW;;EAEX,yBAAyB;EACzB;;;;;;;;;;iBAWc,YAAY,UAAU,kBAAkB,aAAa,iCAAc,IAAA;UAqBlE;;EAEf;EACA;EACA,WAAW;EACX;;;;;;;;;;iBAWc,WAAW,IAAI,YAAY,UAAU,aAAa,gCAAa,IAAA;UAc9D;;EAEf;EACA,WAAW;EACX;;;;;;;;iBASc,YAAY,OAAiB,UAAU,aAAa,iCAAc,IAAA;;;;;;;;;;;;;;;;;;;;;;iBAmClE,sBACA,WACd,MACA,gBACA,cACA,eACA,cACA,qBACA,mBACA,cACA,aACA,UACA,WACA,cACC,6BAAU,IAAA"}

package/dist/table/table.mjs

@@ -0,0 +1,167 @@
+"use client";
+import { alignEndClass, tableStyles } from "./table.styles.mjs";
+import { Cell, Column, Row, Table, TableBody, TableHeader } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+//#region src/table/table.tsx
+/**
+* 表の中の部品が size と classNames を受け取るための経路。
+* 利用者向けの Provider ではなく、Table の内側だけで閉じる。
+*/
+const TableContext = createContext({ s: tableStyles() });
+function SortIcon({ direction }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		children: direction === "ascending" ? "▲" : direction === "descending" ? "▼" : "↕"
+	});
+}
+/**
+* 見出し行。`TableColumn` を並べる。
+*
+* @example
+* <TableHeader>
+*   <TableColumn id="name" isRowHeader>商品名</TableColumn>
+* </TableHeader>
+*/
+function TableHeader$1({ children, className }) {
+	const { s, classNames } = useContext(TableContext);
+	return /* @__PURE__ */ jsx(TableHeader, {
+		"data-slot": "header",
+		className: s.header({ class: [className, classNames?.header] }),
+		children
+	});
+}
+/**
+* 見出しのセル。
+*
+* @example
+* <TableColumn id="amount" allowsSorting align="end">金額</TableColumn>
+*/
+function TableColumn({ id, allowsSorting, isRowHeader, align = "start", children, className }) {
+	const { s, classNames } = useContext(TableContext);
+	return /* @__PURE__ */ jsx(Column, {
+		id,
+		allowsSorting,
+		isRowHeader,
+		"data-slot": "column",
+		className: `group ${s.column({ class: [
+			align === "end" ? alignEndClass : "",
+			className,
+			classNames?.column
+		] })}`,
+		children: ({ sortDirection }) => /* @__PURE__ */ jsxs(Fragment, { children: [children, allowsSorting && /* @__PURE__ */ jsx("span", {
+			"data-slot": "sortIcon",
+			className: s.sortIcon({ class: classNames?.sortIcon }),
+			children: /* @__PURE__ */ jsx(SortIcon, { direction: sortDirection })
+		})] })
+	});
+}
+/**
+* 本体。`TableRow` を並べる。行が無いときは `renderEmptyState` の内容が出る。
+*
+* @example
+* <TableBody renderEmptyState={() => '該当する注文はありません'}>
+*   {rows}
+* </TableBody>
+*/
+function TableBody$1({ children, renderEmptyState, className }) {
+	const { s, classNames } = useContext(TableContext);
+	return /* @__PURE__ */ jsx(TableBody, {
+		"data-slot": "body",
+		className: s.body({ class: [className, classNames?.body] }),
+		renderEmptyState: renderEmptyState === void 0 ? void 0 : () => /* @__PURE__ */ jsx("div", {
+			"data-slot": "empty",
+			className: s.empty({ class: classNames?.empty }),
+			children: renderEmptyState()
+		}),
+		children
+	});
+}
+/**
+* 行。`TableCell` を列の数だけ並べる。
+*
+* @example
+* <TableRow id="1042">
+*   <TableCell>#1042</TableCell>
+* </TableRow>
+*/
+function TableRow({ id, isDisabled, children, className }) {
+	const { s, classNames } = useContext(TableContext);
+	return /* @__PURE__ */ jsx(Row, {
+		id,
+		isDisabled,
+		"data-slot": "row",
+		className: s.row({ class: [className, classNames?.row] }),
+		children
+	});
+}
+/**
+* セル。
+*
+* @example
+* <TableCell align="end">¥12,800</TableCell>
+*/
+function TableCell({ align = "start", children, className }) {
+	const { s, classNames } = useContext(TableContext);
+	return /* @__PURE__ */ jsx(Cell, {
+		"data-slot": "cell",
+		className: s.cell({ class: [
+			align === "end" ? alignEndClass : "",
+			className,
+			classNames?.cell
+		] }),
+		children
+	});
+}
+/**
+* 一覧を行と列で見せる。**縦横の罫線で升目を切った帳票**。見出しは等幅、数字は等幅の右詰め
+* （Raster は横罫だけ、Tactile は行が面）。
+*
+* 行の選択は行そのものを押す（チェックボックスは出さない）。
+* 狭い画面では表そのものが横にスクロールする。`overflow-x-auto` の枠で包むこと。
+*
+* @example
+* <Table aria-label="注文一覧" sortDescriptor={sort} onSortChange={setSort}>
+*   <TableHeader>
+*     <TableColumn id="no" isRowHeader>注文番号</TableColumn>
+*     <TableColumn id="amount" allowsSorting align="end">金額</TableColumn>
+*   </TableHeader>
+*   <TableBody>
+*     <TableRow id="1042">
+*       <TableCell>#1042</TableCell>
+*       <TableCell align="end">¥12,800</TableCell>
+*     </TableRow>
+*   </TableBody>
+* </Table>
+*/
+function Table$1({ "aria-label": ariaLabel, size, sortDescriptor, onSortChange, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, disabledKeys, onRowAction, children, className, classNames }) {
+	const s = tableStyles({ size });
+	return /* @__PURE__ */ jsx(TableContext.Provider, {
+		value: {
+			s,
+			classNames
+		},
+		children: /* @__PURE__ */ jsx(Table, {
+			"aria-label": ariaLabel,
+			sortDescriptor,
+			onSortChange: (d) => onSortChange?.({
+				column: String(d.column),
+				direction: d.direction
+			}),
+			selectionMode,
+			selectionBehavior: "replace",
+			selectedKeys,
+			defaultSelectedKeys,
+			onSelectionChange: (keys) => onSelectionChange?.(keys === "all" ? "all" : new Set([...keys].map(String))),
+			disabledKeys,
+			onRowAction: onRowAction === void 0 ? void 0 : (key) => onRowAction(String(key)),
+			"data-slot": "root",
+			className: s.root({ class: [className, classNames?.root] }),
+			children
+		})
+	});
+}
+//#endregion
+export { Table$1 as Table, TableBody$1 as TableBody, TableCell, TableColumn, TableHeader$1 as TableHeader, TableRow };
+
+//# sourceMappingURL=table.mjs.map

package/dist/table/table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.mjs","names":["TableHeader","RACTableHeader","TableBody","RACTableBody","Table","RACTable"],"sources":["../../src/table/table.tsx"],"sourcesContent":["'use client'\n\nimport type { TableProps, TableSortDescriptor } from '@novi-ui/core'\nimport { createContext, type ReactNode, useContext } from 'react'\nimport {\n  Cell,\n  Column,\n  Table as RACTable,\n  TableBody as RACTableBody,\n  TableHeader as RACTableHeader,\n  Row,\n} from 'react-aria-components'\nimport { alignEndClass, tableStyles } from './table.styles'\n\ntype Styles = ReturnType<typeof tableStyles>\ntype SlotClassNames = NonNullable<TableProps['classNames']>\n\n/**\n * 表の中の部品が size と classNames を受け取るための経路。\n * 利用者向けの Provider ではなく、Table の内側だけで閉じる。\n */\nconst TableContext = createContext<{ s: Styles; classNames?: SlotClassNames }>({\n  s: tableStyles(),\n})\n\nfunction SortIcon({ direction }: { direction: 'ascending' | 'descending' | undefined }) {\n  // 図形ではなく活字。帳票の語彙は記号であって図形ではない（ADR-F7）\n  return (\n    <span aria-hidden=\"true\">\n      {direction === 'ascending' ? '▲' : direction === 'descending' ? '▼' : '↕'}\n    </span>\n  )\n}\n\nexport interface TableHeaderProps {\n  children?: ReactNode\n  className?: string\n}\n\n/**\n * 見出し行。`TableColumn` を並べる。\n *\n * @example\n * <TableHeader>\n *   <TableColumn id=\"name\" isRowHeader>商品名</TableColumn>\n * </TableHeader>\n */\nexport function TableHeader({ children, className }: TableHeaderProps) {\n  const { s, classNames } = useContext(TableContext)\n  return (\n    <RACTableHeader\n      data-slot=\"header\"\n      className={s.header({ class: [className, classNames?.header] })}\n    >\n      {children}\n    </RACTableHeader>\n  )\n}\n\nexport interface TableColumnProps {\n  /** 列の id。`sortDescriptor.column` に入る */\n  id: string\n  /** この列で並べ替えられる。見出しが押せるようになり `aria-sort` が付く */\n  allowsSorting?: boolean\n  /** 行の名前になる列。少なくとも 1 列に付ける */\n  isRowHeader?: boolean\n  /** 金額や数量は `end`（右寄せ） */\n  align?: 'start' | 'end'\n  children?: ReactNode\n  className?: string\n}\n\n/**\n * 見出しのセル。\n *\n * @example\n * <TableColumn id=\"amount\" allowsSorting align=\"end\">金額</TableColumn>\n */\nexport function TableColumn({\n  id,\n  allowsSorting,\n  isRowHeader,\n  align = 'start',\n  children,\n  className,\n}: TableColumnProps) {\n  const { s, classNames } = useContext(TableContext)\n  return (\n    <Column\n      id={id}\n      allowsSorting={allowsSorting}\n      isRowHeader={isRowHeader}\n      data-slot=\"column\"\n      className={`group ${s.column({ class: [align === 'end' ? alignEndClass : '', className, classNames?.column] })}`}\n    >\n      {({ sortDirection }) => (\n        <>\n          {children}\n          {allowsSorting && (\n            <span data-slot=\"sortIcon\" className={s.sortIcon({ class: classNames?.sortIcon })}>\n              <SortIcon direction={sortDirection} />\n            </span>\n          )}\n        </>\n      )}\n    </Column>\n  )\n}\n\nexport interface TableBodyProps {\n  children?: ReactNode\n  /** 行が 0 件のときに本体へ出す内容 */\n  renderEmptyState?: () => ReactNode\n  className?: string\n}\n\n/**\n * 本体。`TableRow` を並べる。行が無いときは `renderEmptyState` の内容が出る。\n *\n * @example\n * <TableBody renderEmptyState={() => '該当する注文はありません'}>\n *   {rows}\n * </TableBody>\n */\nexport function TableBody({ children, renderEmptyState, className }: TableBodyProps) {\n  const { s, classNames } = useContext(TableContext)\n  return (\n    <RACTableBody\n      data-slot=\"body\"\n      className={s.body({ class: [className, classNames?.body] })}\n      renderEmptyState={\n        renderEmptyState === undefined\n          ? undefined\n          : () => (\n              <div data-slot=\"empty\" className={s.empty({ class: classNames?.empty })}>\n                {renderEmptyState()}\n              </div>\n            )\n      }\n    >\n      {children}\n    </RACTableBody>\n  )\n}\n\nexport interface TableRowProps {\n  /** 行の id。選択と `onRowAction` に渡る */\n  id: string\n  isDisabled?: boolean\n  children?: ReactNode\n  className?: string\n}\n\n/**\n * 行。`TableCell` を列の数だけ並べる。\n *\n * @example\n * <TableRow id=\"1042\">\n *   <TableCell>#1042</TableCell>\n * </TableRow>\n */\nexport function TableRow({ id, isDisabled, children, className }: TableRowProps) {\n  const { s, classNames } = useContext(TableContext)\n  return (\n    <Row\n      id={id}\n      isDisabled={isDisabled}\n      data-slot=\"row\"\n      className={s.row({ class: [className, classNames?.row] })}\n    >\n      {children}\n    </Row>\n  )\n}\n\nexport interface TableCellProps {\n  /** 金額や数量は `end`（右寄せ）。見出しと揃える */\n  align?: 'start' | 'end'\n  children?: ReactNode\n  className?: string\n}\n\n/**\n * セル。\n *\n * @example\n * <TableCell align=\"end\">¥12,800</TableCell>\n */\nexport function TableCell({ align = 'start', children, className }: TableCellProps) {\n  const { s, classNames } = useContext(TableContext)\n  return (\n    <Cell\n      data-slot=\"cell\"\n      className={s.cell({\n        class: [align === 'end' ? alignEndClass : '', className, classNames?.cell],\n      })}\n    >\n      {children}\n    </Cell>\n  )\n}\n\n/**\n * 一覧を行と列で見せる。**縦横の罫線で升目を切った帳票**。見出しは等幅、数字は等幅の右詰め\n * （Raster は横罫だけ、Tactile は行が面）。\n *\n * 行の選択は行そのものを押す（チェックボックスは出さない）。\n * 狭い画面では表そのものが横にスクロールする。`overflow-x-auto` の枠で包むこと。\n *\n * @example\n * <Table aria-label=\"注文一覧\" sortDescriptor={sort} onSortChange={setSort}>\n *   <TableHeader>\n *     <TableColumn id=\"no\" isRowHeader>注文番号</TableColumn>\n *     <TableColumn id=\"amount\" allowsSorting align=\"end\">金額</TableColumn>\n *   </TableHeader>\n *   <TableBody>\n *     <TableRow id=\"1042\">\n *       <TableCell>#1042</TableCell>\n *       <TableCell align=\"end\">¥12,800</TableCell>\n *     </TableRow>\n *   </TableBody>\n * </Table>\n */\nexport function Table({\n  'aria-label': ariaLabel,\n  size,\n  sortDescriptor,\n  onSortChange,\n  selectionMode,\n  selectedKeys,\n  defaultSelectedKeys,\n  onSelectionChange,\n  disabledKeys,\n  onRowAction,\n  children,\n  className,\n  classNames,\n}: TableProps) {\n  const s = tableStyles({ size })\n\n  return (\n    <TableContext.Provider value={{ s, classNames }}>\n      {/* RAC の Table は id を受け取らない（DOM に出す口が無い）。NoviBaseProps の id は表では効かない */}\n      <RACTable\n        aria-label={ariaLabel}\n        sortDescriptor={sortDescriptor}\n        onSortChange={(d) =>\n          onSortChange?.({\n            column: String(d.column),\n            direction: d.direction,\n          } as TableSortDescriptor)\n        }\n        selectionMode={selectionMode}\n        // 行そのものを押して選ぶ。チェックボックスの列は出さない\n        selectionBehavior=\"replace\"\n        selectedKeys={selectedKeys}\n        defaultSelectedKeys={defaultSelectedKeys}\n        onSelectionChange={(keys) =>\n          onSelectionChange?.(keys === 'all' ? 'all' : new Set([...keys].map(String)))\n        }\n        disabledKeys={disabledKeys}\n        onRowAction={onRowAction === undefined ? undefined : (key) => onRowAction(String(key))}\n        data-slot=\"root\"\n        className={s.root({ class: [className, classNames?.root] })}\n      >\n        {children}\n      </RACTable>\n    </TableContext.Provider>\n  )\n}\n"],"mappings":"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"}

package/dist/table/table.styles.d.mts

@@ -0,0 +1,58 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/table/table.styles.d.ts
+/**
+ * Table のスタイル定義。
+ *
+ * @example
+ * import { tableStyles } from '@novi-ui/flatlay'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myTable = tv({ extend: tableStyles, slots: { header: 'bg-transparent' } })
+ */
+declare const tableStyles: import("tailwind-variants").TVReturnType<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    column: string;
+    cell: string;
+  }>;
+}, {
+  root: string;
+  header: string;
+  column: string;
+  sortIcon: string;
+  body: string;
+  row: string;
+  cell: string;
+  empty: string;
+}, undefined, {
+  size: VariantMap<"sm" | "md" | "lg", {
+    column: string;
+    cell: string;
+  }>;
+}, {
+  root: string;
+  header: string;
+  column: string;
+  sortIcon: string;
+  body: string;
+  row: string;
+  cell: string;
+  empty: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    column: string;
+    cell: string;
+  }>;
+}, {
+  root: string;
+  header: string;
+  column: string;
+  sortIcon: string;
+  body: string;
+  row: string;
+  cell: string;
+  empty: string;
+}>>;
+type TableStyleProps = Parameters<typeof tableStyles>[0];
+//#endregion
+export { TableStyleProps, tableStyles };
+//# sourceMappingURL=table.styles.d.mts.map

package/dist/table/table.styles.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.styles.d.mts","names":[],"sources":["../../src/table/table.styles.ts"],"mappings":";;;;;;;;;;;cAmFa,yCAAW;;IAxBmB;IAAc;;;;;;;;;;;;;IAAd;IAAc;;;;;;;;;;;;;IAAd;IAAc;;;;;;;;;;;;KA8B7C,kBAAkB,kBAAkB"}

package/dist/table/table.styles.mjs

@@ -0,0 +1,84 @@
+import { focusRing } from "../styles/focus-ring.mjs";
+import { heading, monoNumeric } from "../styles/mono.mjs";
+import { tv } from "tailwind-variants";
+//#region src/table/table.styles.ts
+/**
+* Flatlay の表は**帳票**。縦横の罫線で升目を切り、見出しは等幅、数字は等幅の右詰め
+* （Raster は横罫だけ、Tactile は行が面）。選んだ行は反転しない — 行は押す面ではなく
+* 読む行なので、地色を変えるだけに留める。
+*/
+const slots = {
+	root: [
+		"w-full border-collapse text-left",
+		"border border-[var(--novi-color-border-strong)]",
+		"text-[var(--novi-color-fg)]",
+		"outline-none"
+	].join(" "),
+	header: "bg-[var(--novi-color-subtle)]",
+	column: [
+		`text-[length:var(--novi-text-sm)] ${heading}`,
+		"border border-[var(--novi-color-border)] border-b-[var(--novi-color-border-strong)]",
+		"whitespace-nowrap align-middle",
+		"outline-none",
+		"data-[allows-sorting]:cursor-pointer",
+		"data-[allows-sorting]:hover:bg-[var(--novi-color-border)]",
+		"data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]",
+		focusRing
+	].join(" "),
+	sortIcon: [`ml-1 inline-flex align-middle text-[var(--novi-color-muted)] ${monoNumeric}`, "group-aria-[sort=ascending]:text-[var(--novi-color-fg)] group-aria-[sort=descending]:text-[var(--novi-color-fg)]"].join(" "),
+	body: "",
+	row: [
+		"outline-none",
+		"text-[var(--novi-color-fg)]",
+		"data-[hovered]:bg-[var(--novi-color-subtle)]",
+		"data-[selected]:bg-[var(--novi-color-subtle)] data-[selected]:font-medium",
+		"data-[disabled]:opacity-40",
+		"data-[focus-visible]:outline-2 data-[focus-visible]:-outline-offset-2 data-[focus-visible]:outline-[var(--novi-color-ring)]",
+		"transition-[background-color]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]"
+	].join(" "),
+	cell: [
+		"align-middle",
+		"border border-[var(--novi-color-border)]",
+		"outline-none",
+		"data-[focus-visible]:outline-2 data-[focus-visible]:-outline-offset-2 data-[focus-visible]:outline-[var(--novi-color-ring)]"
+	].join(" "),
+	empty: [
+		"flex items-center justify-center",
+		"py-[var(--novi-pad-surface-y)] px-[var(--novi-pad-surface-x)]",
+		`text-[var(--novi-color-muted)] text-[length:var(--novi-text-sm)] ${heading}`
+	].join(" ")
+};
+/**
+* Table のスタイル定義。
+*
+* @example
+* import { tableStyles } from '@novi-ui/flatlay'
+* import { tv } from 'tailwind-variants'
+*
+* const myTable = tv({ extend: tableStyles, slots: { header: 'bg-transparent' } })
+*/
+const tableStyles = tv({
+	slots,
+	variants: { size: {
+		sm: {
+			column: "h-7 px-[var(--novi-pad-control-x-sm)]",
+			cell: "h-7 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]"
+		},
+		md: {
+			column: "h-8 px-[var(--novi-pad-control-x-sm)]",
+			cell: "h-8 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-base)]"
+		},
+		lg: {
+			column: "h-10 px-[var(--novi-pad-control-x-md)]",
+			cell: "h-10 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]"
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+/** 右寄せの列（金額・数量）。帳票の数字は等幅で右詰め */
+const alignEndClass = `text-right ${monoNumeric}`;
+//#endregion
+export { alignEndClass, tableStyles };
+
+//# sourceMappingURL=table.styles.mjs.map

package/dist/table/table.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.styles.mjs","names":[],"sources":["../../src/table/table.styles.ts"],"sourcesContent":["import type { NoviSize, SlotMap, tableRequiredSlots, tableSlots, VariantMap } from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { focusRing } from '../styles/focus-ring'\nimport { heading, monoNumeric } from '../styles/mono'\n\n/**\n * Flatlay の表は**帳票**。縦横の罫線で升目を切り、見出しは等幅、数字は等幅の右詰め\n * （Raster は横罫だけ、Tactile は行が面）。選んだ行は反転しない — 行は押す面ではなく\n * 読む行なので、地色を変えるだけに留める。\n */\nconst slots = {\n  root: [\n    'w-full border-collapse text-left',\n    'border border-[var(--novi-color-border-strong)]',\n    'text-[var(--novi-color-fg)]',\n    'outline-none',\n  ].join(' '),\n  header: 'bg-[var(--novi-color-subtle)]',\n  column: [\n    `text-[length:var(--novi-text-sm)] ${heading}`,\n    'border border-[var(--novi-color-border)] border-b-[var(--novi-color-border-strong)]',\n    'whitespace-nowrap align-middle',\n    'outline-none',\n    'data-[allows-sorting]:cursor-pointer',\n    'data-[allows-sorting]:hover:bg-[var(--novi-color-border)]',\n    'data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]',\n    focusRing,\n  ].join(' '),\n  // 並べ替えの印は活字。方向が決まっている間だけ濃くなる\n  sortIcon: [\n    `ml-1 inline-flex align-middle text-[var(--novi-color-muted)] ${monoNumeric}`,\n    'group-aria-[sort=ascending]:text-[var(--novi-color-fg)] group-aria-[sort=descending]:text-[var(--novi-color-fg)]',\n  ].join(' '),\n  body: '',\n  row: [\n    'outline-none',\n    // 面（hover / 選択）を持つので文字色も持つ。ダークで不可視にならない\n    'text-[var(--novi-color-fg)]',\n    'data-[hovered]:bg-[var(--novi-color-subtle)]',\n    'data-[selected]:bg-[var(--novi-color-subtle)] data-[selected]:font-medium',\n    'data-[disabled]:opacity-40',\n    'data-[focus-visible]:outline-2 data-[focus-visible]:-outline-offset-2 data-[focus-visible]:outline-[var(--novi-color-ring)]',\n    'transition-[background-color]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n  ].join(' '),\n  cell: [\n    'align-middle',\n    'border border-[var(--novi-color-border)]',\n    'outline-none',\n    'data-[focus-visible]:outline-2 data-[focus-visible]:-outline-offset-2 data-[focus-visible]:outline-[var(--novi-color-ring)]',\n  ].join(' '),\n  empty: [\n    'flex items-center justify-center',\n    'py-[var(--novi-pad-surface-y)] px-[var(--novi-pad-surface-x)]',\n    `text-[var(--novi-color-muted)] text-[length:var(--novi-text-sm)] ${heading}`,\n  ].join(' '),\n} satisfies SlotMap<typeof tableSlots, (typeof tableRequiredSlots)[number]>\n\n/** 行の高さは行の階級に載せる。28 / 32 / 40px */\nconst size: VariantMap<NoviSize, { column: string; cell: string }> = {\n  sm: {\n    column: 'h-7 px-[var(--novi-pad-control-x-sm)]',\n    cell: 'h-7 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]',\n  },\n  md: {\n    column: 'h-8 px-[var(--novi-pad-control-x-sm)]',\n    cell: 'h-8 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-base)]',\n  },\n  lg: {\n    column: 'h-10 px-[var(--novi-pad-control-x-md)]',\n    cell: 'h-10 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]',\n  },\n}\n\n/**\n * Table のスタイル定義。\n *\n * @example\n * import { tableStyles } from '@novi-ui/flatlay'\n * import { tv } from 'tailwind-variants'\n *\n * const myTable = tv({ extend: tableStyles, slots: { header: 'bg-transparent' } })\n */\nexport const tableStyles = tv({\n  slots,\n  variants: { size },\n  defaultVariants: { size: 'md' },\n})\n\nexport type TableStyleProps = Parameters<typeof tableStyles>[0]\n\n/** 右寄せの列（金額・数量）。帳票の数字は等幅で右詰め */\nexport const alignEndClass = `text-right ${monoNumeric}`\n"],"mappings":";;;;;;;;;AAUA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,QAAQ;CACR,QAAQ;EACN,qCAAqC;EACrC;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,UAAU,CACR,gEAAgE,eAChE,kHACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CACN,KAAK;EACH;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;EACJ;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;EACL;EACA;EACA,oEAAoE;CACtE,CAAC,CAAC,KAAK,GAAG;AACZ;;;;;;;;;;AA2BA,MAAa,cAAc,GAAG;CAC5B;CACA,UAAU,EAAE;EAzBZ,IAAI;GACF,QAAQ;GACR,MAAM;EACR;EACA,IAAI;GACF,QAAQ;GACR,MAAM;EACR;EACA,IAAI;GACF,QAAQ;GACR,MAAM;EACR;CAcY,EAAK;CACjB,iBAAiB,EAAE,MAAM,KAAK;AAChC,CAAC;;AAKD,MAAa,gBAAgB,cAAc"}

package/dist/textarea/textarea.styles.d.mts

@@ -14,7 +14,7 @@ declare const textareaStyles: import("tailwind-variants").TVReturnType<{
     inputWrapper: string;
     textarea: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     inputWrapper: string;
   }>;
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
@@ -32,7 +32,7 @@ declare const textareaStyles: import("tailwind-variants").TVReturnType<{
     inputWrapper: string;
     textarea: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     inputWrapper: string;
   }>;
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
@@ -50,7 +50,7 @@ declare const textareaStyles: import("tailwind-variants").TVReturnType<{
     inputWrapper: string;
     textarea: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     inputWrapper: string;
   }>;
   variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {

package/dist/toast/toast.styles.d.mts

@@ -10,7 +10,7 @@ declare const toastStyles: import("tailwind-variants").TVReturnType<{
   color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
     root: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
 }, {
@@ -26,7 +26,7 @@ declare const toastStyles: import("tailwind-variants").TVReturnType<{
   color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
     root: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
 }, {
@@ -42,7 +42,7 @@ declare const toastStyles: import("tailwind-variants").TVReturnType<{
   color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
     root: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
 }, {

package/dist/tooltip/tooltip.styles.d.mts

@@ -9,16 +9,16 @@ declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
   [key: string]: {
     [key: string]: import("tailwind-variants").ClassValue | {
       root?: import("tailwind-variants").ClassValue;
-      content?: import("tailwind-variants").ClassValue;
       arrow?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
     };
   };
 } | {
   [x: string]: {
     [x: string]: import("tailwind-variants").ClassValue | {
       root?: import("tailwind-variants").ClassValue;
-      content?: import("tailwind-variants").ClassValue;
       arrow?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
     };
   };
 } | {}, {
@@ -29,8 +29,8 @@ declare const tooltipStyles: import("tailwind-variants").TVReturnType<{
   [key: string]: {
     [key: string]: import("tailwind-variants").ClassValue | {
       root?: import("tailwind-variants").ClassValue;
-      content?: import("tailwind-variants").ClassValue;
       arrow?: import("tailwind-variants").ClassValue;
+      content?: import("tailwind-variants").ClassValue;
     };
   };
 } | {}, {