@novi-ui/tactile 0.3.0 → 0.5.0

package/dist/table/table.mjs

@@ -0,0 +1,172 @@
+"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 }) {
+	const d = direction === "ascending" ? "M8 4l4 5H4z" : direction === "descending" ? "M8 12L4 7h8z" : "";
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		width: "1em",
+		height: "1em",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		children: d === "" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M8 3l3 3.5H5z" }), /* @__PURE__ */ jsx("path", { d: "M8 13l-3-3.5h6z" })] }) : /* @__PURE__ */ jsx("path", { d })
+	});
+}
+/**
+* 見出し行。`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
+	});
+}
+/**
+* 一覧を行と列で見せる。**行が指で押せる面**で、40px 以上の高さを持つ
+* （Raster は横罫だけ、Flatlay は縦横の罫線の帳票）。
+*
+* 行の選択は行そのものを押す（チェックボックスは出さない）。
+* 狭い画面では表そのものが横にスクロールする。`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  const d =\n    direction === 'ascending' ? 'M8 4l4 5H4z' : direction === 'descending' ? 'M8 12L4 7h8z' : ''\n  return (\n    <svg viewBox=\"0 0 16 16\" width=\"1em\" height=\"1em\" fill=\"currentColor\" aria-hidden=\"true\">\n      {d === '' ? (\n        <>\n          <path d=\"M8 3l3 3.5H5z\" />\n          <path d=\"M8 13l-3-3.5h6z\" />\n        </>\n      ) : (\n        <path d={d} />\n      )}\n    </svg>\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 * 一覧を行と列で見せる。**行が指で押せる面**で、40px 以上の高さを持つ\n * （Raster は横罫だけ、Flatlay は縦横の罫線の帳票）。\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/tactile'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myTable = tv({ extend: tableStyles, slots: { cell: 'h-16' } })
+ */
+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":";;;;;;;;;;;cAiFa,yCAAW;;IAxBmB;IAAc;;;;;;;;;;;;;IAAd;IAAc;;;;;;;;;;;;;IAAd;IAAc;;;;;;;;;;;;KA8B7C,kBAAkB,kBAAkB"}

package/dist/table/table.styles.mjs

@@ -0,0 +1,83 @@
+import { focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/table/table.styles.ts
+/**
+* Tactile の表は**行が面**。1 行が指で押せる高さと余白を持ち、選んだ行は面が沈む
+* （Raster は横罫だけ、Flatlay は縦横の罫線）。罫線は行のあいだの細い線だけ。
+*/
+const slots = {
+	root: [
+		"w-full border-separate border-spacing-0 text-left",
+		"text-[var(--novi-color-fg)]",
+		"outline-none"
+	].join(" "),
+	header: "",
+	column: [
+		"font-medium text-[var(--novi-color-muted)] text-[length:var(--novi-text-sm)]",
+		"border-b border-[var(--novi-color-border)]",
+		"whitespace-nowrap align-middle",
+		"outline-none",
+		"data-[allows-sorting]:cursor-pointer",
+		"data-[allows-sorting]:hover:text-[var(--novi-color-fg)]",
+		"data-[focus-visible]:text-[var(--novi-color-fg)]",
+		"aria-[sort=ascending]:text-[var(--novi-color-fg)] aria-[sort=descending]:text-[var(--novi-color-fg)]",
+		focusRing
+	].join(" "),
+	sortIcon: ["ml-1.5 inline-flex align-middle text-[var(--novi-color-muted)]", "opacity-40 group-aria-[sort=ascending]:opacity-100 group-aria-[sort=descending]:opacity-100"].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-[pressed]:bg-[var(--novi-color-border)]",
+		"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 tabular-nums",
+		"border-b 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-base)]"
+	].join(" ")
+};
+/**
+* Table のスタイル定義。
+*
+* @example
+* import { tableStyles } from '@novi-ui/tactile'
+* import { tv } from 'tailwind-variants'
+*
+* const myTable = tv({ extend: tableStyles, slots: { cell: 'h-16' } })
+*/
+const tableStyles = tv({
+	slots,
+	variants: { size: {
+		sm: {
+			column: "h-10 px-[var(--novi-pad-control-x-sm)]",
+			cell: "h-10 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]"
+		},
+		md: {
+			column: "h-12 px-[var(--novi-pad-control-x-md)]",
+			cell: "h-12 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]"
+		},
+		lg: {
+			column: "h-14 px-[var(--novi-pad-control-x-lg)]",
+			cell: "h-14 px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-lg)]"
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+/** 右寄せの列（金額・数量）。見出しとセルの両方に付ける */
+const alignEndClass = "text-right";
+//#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'\n\n/**\n * Tactile の表は**行が面**。1 行が指で押せる高さと余白を持ち、選んだ行は面が沈む\n * （Raster は横罫だけ、Flatlay は縦横の罫線）。罫線は行のあいだの細い線だけ。\n */\nconst slots = {\n  root: [\n    'w-full border-separate border-spacing-0 text-left',\n    'text-[var(--novi-color-fg)]',\n    'outline-none',\n  ].join(' '),\n  header: '',\n  column: [\n    'font-medium text-[var(--novi-color-muted)] text-[length:var(--novi-text-sm)]',\n    'border-b border-[var(--novi-color-border)]',\n    'whitespace-nowrap align-middle',\n    'outline-none',\n    'data-[allows-sorting]:cursor-pointer',\n    'data-[allows-sorting]:hover:text-[var(--novi-color-fg)]',\n    'data-[focus-visible]:text-[var(--novi-color-fg)]',\n    'aria-[sort=ascending]:text-[var(--novi-color-fg)] aria-[sort=descending]:text-[var(--novi-color-fg)]',\n    focusRing,\n  ].join(' '),\n  sortIcon: [\n    'ml-1.5 inline-flex align-middle text-[var(--novi-color-muted)]',\n    'opacity-40 group-aria-[sort=ascending]:opacity-100 group-aria-[sort=descending]:opacity-100',\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-[pressed]:bg-[var(--novi-color-border)]',\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 tabular-nums',\n    'border-b 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-base)]',\n  ].join(' '),\n} satisfies SlotMap<typeof tableSlots, (typeof tableRequiredSlots)[number]>\n\n/** 行の高さは Button と揃える。40 / 48 / 56px。指で押せる行 */\nconst size: VariantMap<NoviSize, { column: string; cell: string }> = {\n  sm: {\n    column: 'h-10 px-[var(--novi-pad-control-x-sm)]',\n    cell: 'h-10 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]',\n  },\n  md: {\n    column: 'h-12 px-[var(--novi-pad-control-x-md)]',\n    cell: 'h-12 px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]',\n  },\n  lg: {\n    column: 'h-14 px-[var(--novi-pad-control-x-lg)]',\n    cell: 'h-14 px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-lg)]',\n  },\n}\n\n/**\n * Table のスタイル定義。\n *\n * @example\n * import { tableStyles } from '@novi-ui/tactile'\n * import { tv } from 'tailwind-variants'\n *\n * const myTable = tv({ extend: tableStyles, slots: { cell: 'h-16' } })\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'\n"],"mappings":";;;;;;;AAQA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,QAAQ;CACR,QAAQ;EACN;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,UAAU,CACR,kEACA,6FACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CACN,KAAK;EACH;EAEA;EACA;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;CACF,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@novi-ui/tactile",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Novi UI theme 2 — touch-first. Bottom sheets, generous tap targets, soft elevation.",
   "license": "MIT",
   "repository": {
@@ -28,13 +28,16 @@
   },
   "peerDependencies": {
     "react": "^19.0.0",
-    "react-aria-components": "^1.20.0"
+    "react-aria-components": "^1.20.0",
+    "tailwindcss": "^4.0.0"
   },
   "dependencies": {
-    "tailwind-variants": "^3.3.1",
-    "@novi-ui/core": "0.4.0"
+    "@novi-ui/core": "0.5.0",
+    "tailwind-variants": "^3.3.1"
   },
   "devDependencies": {
+    "@internationalized/date": "^3.12.3",
+    "@novi-ui/raster": "0.7.0",
     "@size-limit/preset-small-lib": "^13.0.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
@@ -51,8 +54,7 @@
     "size-limit": "^13.0.3",
     "tsdown": "0.22.14",
     "typescript": "6.0.3",
-    "vitest": "4.1.11",
-    "@novi-ui/raster": "0.5.0"
+    "vitest": "4.1.11"
   },
   "scripts": {
     "build": "tsdown && node scripts/generate-theme-css.mjs",