@novi-ui/tactile 0.4.0 → 0.5.0

package/dist/number-field/number-field.styles.mjs

@@ -0,0 +1,96 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/number-field/number-field.styles.ts
+/**
+* 増減ボタン。**指で押す面**なので、枠の高さいっぱいの正方形にする（40 / 48 / 56px）。
+* 入力欄の左右に置き、親指で届く位置に来る（Raster は右端に細く並べる）。
+* 押した手応えは Button と同じ縮み（scale は押下にだけ許される）。
+*/
+const stepper = [
+	"shrink-0 self-stretch aspect-square inline-flex items-center justify-center",
+	"text-[var(--novi-color-fg)]",
+	"bg-[var(--novi-color-subtle)]",
+	"outline-none",
+	"data-[pressed]:scale-[0.97]",
+	"motion-reduce:data-[pressed]:scale-100",
+	"data-[focus-visible]:bg-[var(--novi-color-border)]",
+	"data-[disabled]:opacity-40 data-[disabled]:cursor-default",
+	"transition-[background-color,transform]",
+	"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]"
+].join(" ");
+const slots = {
+	root: "flex flex-col gap-1.5",
+	label: "text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]",
+	inputWrapper: [
+		"text-[var(--novi-color-fg)]",
+		"flex items-center w-full overflow-hidden",
+		"bg-[var(--novi-color-surface)]",
+		"shadow-[var(--novi-shadow-sm)]",
+		"rounded-[var(--novi-radius-md)]",
+		"transition-[opacity,box-shadow]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		"data-[invalid]:ring-1 data-[invalid]:ring-[var(--novi-color-danger)]",
+		focusRing,
+		disabledState
+	].join(" "),
+	input: [
+		"w-full min-w-0 bg-transparent outline-none text-center",
+		"text-[var(--novi-color-fg)] tabular-nums",
+		"placeholder:text-[var(--novi-color-muted)]"
+	].join(" "),
+	decrement: stepper,
+	increment: stepper,
+	description: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]",
+	errorMessage: "text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]"
+};
+/**
+* NumberField のスタイル定義。
+*
+* @example
+* import { numberFieldStyles } from '@novi-ui/tactile'
+* import { tv } from 'tailwind-variants'
+*
+* const myField = tv({ extend: numberFieldStyles, slots: { input: 'text-left' } })
+*/
+const numberFieldStyles = tv({
+	slots,
+	variants: {
+		variant: {
+			solid: { inputWrapper: "bg-[var(--novi-color-surface)] shadow-[var(--novi-shadow-sm)]" },
+			outline: { inputWrapper: "bg-transparent shadow-[var(--novi-shadow-none)] ring-1 ring-[var(--novi-color-border-strong)]" },
+			soft: { inputWrapper: "bg-[var(--novi-color-subtle)] shadow-[var(--novi-shadow-none)]" },
+			ghost: { inputWrapper: "bg-transparent shadow-[var(--novi-shadow-none)]" },
+			plain: { inputWrapper: "bg-transparent shadow-[var(--novi-shadow-none)] rounded-[var(--novi-radius-none)] border-b border-[var(--novi-color-border-strong)]" }
+		},
+		size: {
+			sm: {
+				inputWrapper: "h-10",
+				input: "px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-base)]"
+			},
+			md: {
+				inputWrapper: "h-12",
+				input: "px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]"
+			},
+			lg: {
+				inputWrapper: "h-14",
+				input: "px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-lg)]"
+			}
+		},
+		radius: {
+			none: { inputWrapper: "rounded-[var(--novi-radius-none)]" },
+			sm: { inputWrapper: "rounded-[var(--novi-radius-sm)]" },
+			md: { inputWrapper: "rounded-[var(--novi-radius-md)]" },
+			lg: { inputWrapper: "rounded-[var(--novi-radius-lg)]" },
+			full: { inputWrapper: "rounded-[var(--novi-radius-full)]" }
+		}
+	},
+	defaultVariants: {
+		variant: "outline",
+		size: "md",
+		radius: "md"
+	}
+});
+//#endregion
+export { numberFieldStyles };
+
+//# sourceMappingURL=number-field.styles.mjs.map

package/dist/number-field/number-field.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.styles.mjs","names":[],"sources":["../../src/number-field/number-field.styles.ts"],"sourcesContent":["import type {\n  NoviRadius,\n  NoviSize,\n  NoviVariant,\n  numberFieldRequiredSlots,\n  numberFieldSlots,\n  SlotMap,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n/**\n * 増減ボタン。**指で押す面**なので、枠の高さいっぱいの正方形にする（40 / 48 / 56px）。\n * 入力欄の左右に置き、親指で届く位置に来る（Raster は右端に細く並べる）。\n * 押した手応えは Button と同じ縮み（scale は押下にだけ許される）。\n */\nconst stepper = [\n  'shrink-0 self-stretch aspect-square inline-flex items-center justify-center',\n  'text-[var(--novi-color-fg)]',\n  'bg-[var(--novi-color-subtle)]',\n  'outline-none',\n  'data-[pressed]:scale-[0.97]',\n  'motion-reduce:data-[pressed]:scale-100',\n  'data-[focus-visible]:bg-[var(--novi-color-border)]',\n  'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n  'transition-[background-color,transform]',\n  'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n].join(' ')\n\nconst slots = {\n  root: 'flex flex-col gap-1.5',\n  label: 'text-[length:var(--novi-text-sm)] font-medium text-[var(--novi-color-fg)]',\n  // Input と同じ持ち上がった面。増減ボタンが左右の縁に付くので、余白は input 側に置く\n  inputWrapper: [\n    'text-[var(--novi-color-fg)]',\n    'flex items-center w-full overflow-hidden',\n    'bg-[var(--novi-color-surface)]',\n    'shadow-[var(--novi-shadow-sm)]',\n    'rounded-[var(--novi-radius-md)]',\n    'transition-[opacity,box-shadow]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    'data-[invalid]:ring-1 data-[invalid]:ring-[var(--novi-color-danger)]',\n    focusRing,\n    disabledState,\n  ].join(' '),\n  input: [\n    'w-full min-w-0 bg-transparent outline-none text-center',\n    'text-[var(--novi-color-fg)] tabular-nums',\n    'placeholder:text-[var(--novi-color-muted)]',\n  ].join(' '),\n  decrement: stepper,\n  increment: stepper,\n  description: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)]',\n  // 色だけに頼らずテキストを必ず伴う（WCAG 1.4.1）\n  errorMessage: 'text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)]',\n} satisfies SlotMap<typeof numberFieldSlots, (typeof numberFieldRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { inputWrapper: string }> = {\n  solid: { inputWrapper: 'bg-[var(--novi-color-surface)] shadow-[var(--novi-shadow-sm)]' },\n  outline: {\n    inputWrapper:\n      'bg-transparent shadow-[var(--novi-shadow-none)] ring-1 ring-[var(--novi-color-border-strong)]',\n  },\n  soft: { inputWrapper: 'bg-[var(--novi-color-subtle)] shadow-[var(--novi-shadow-none)]' },\n  ghost: { inputWrapper: 'bg-transparent shadow-[var(--novi-shadow-none)]' },\n  plain: {\n    inputWrapper:\n      'bg-transparent shadow-[var(--novi-shadow-none)] rounded-[var(--novi-radius-none)] border-b border-[var(--novi-color-border-strong)]',\n  },\n}\n\n/** 高さは Button / Input と揃える。40 / 48 / 56px。 */\nconst size: VariantMap<NoviSize, { inputWrapper: string; input: string }> = {\n  sm: {\n    inputWrapper: 'h-10',\n    input: 'px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-base)]',\n  },\n  md: {\n    inputWrapper: 'h-12',\n    input: 'px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]',\n  },\n  lg: {\n    inputWrapper: 'h-14',\n    input: 'px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-lg)]',\n  },\n}\n\nconst radius: VariantMap<NoviRadius, { inputWrapper: string }> = {\n  none: { inputWrapper: 'rounded-[var(--novi-radius-none)]' },\n  sm: { inputWrapper: 'rounded-[var(--novi-radius-sm)]' },\n  md: { inputWrapper: 'rounded-[var(--novi-radius-md)]' },\n  lg: { inputWrapper: 'rounded-[var(--novi-radius-lg)]' },\n  full: { inputWrapper: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * NumberField のスタイル定義。\n *\n * @example\n * import { numberFieldStyles } from '@novi-ui/tactile'\n * import { tv } from 'tailwind-variants'\n *\n * const myField = tv({ extend: numberFieldStyles, slots: { input: 'text-left' } })\n */\nexport const numberFieldStyles = tv({\n  slots,\n  variants: { variant, size, radius },\n  defaultVariants: { variant: 'outline', size: 'md', radius: 'md' },\n})\n\nexport type NumberFieldStyleProps = Parameters<typeof numberFieldStyles>[0]\n"],"mappings":";;;;;;;;AAiBA,MAAM,UAAU;CACd;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;AAEV,MAAM,QAAQ;CACZ,MAAM;CACN,OAAO;CAEP,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;EACL;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;CACX,WAAW;CACX,aAAa;CAEb,cAAc;AAChB;;;;;;;;;;AAiDA,MAAa,oBAAoB,GAAG;CAClC;CACA,UAAU;EAAE;GAhDZ,OAAO,EAAE,cAAc,gEAAgE;GACvF,SAAS,EACP,cACE,gGACJ;GACA,MAAM,EAAE,cAAc,iEAAiE;GACvF,OAAO,EAAE,cAAc,kDAAkD;GACzE,OAAO,EACL,cACE,sIACJ;EAsCY;EAAS;GAjCrB,IAAI;IACF,cAAc;IACd,OAAO;GACT;GACA,IAAI;IACF,cAAc;IACd,OAAO;GACT;GACA,IAAI;IACF,cAAc;IACd,OAAO;GACT;EAsBqB;EAAM;GAlB3B,MAAM,EAAE,cAAc,oCAAoC;GAC1D,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,IAAI,EAAE,cAAc,kCAAkC;GACtD,MAAM,EAAE,cAAc,oCAAoC;EAc/B;CAAO;CAClC,iBAAiB;EAAE,SAAS;EAAW,MAAM;EAAM,QAAQ;CAAK;AAClE,CAAC"}

package/dist/pagination/index.d.mts

@@ -0,0 +1,3 @@
+import { Pagination } from "./pagination.mjs";
+import { PaginationStyleProps, paginationStyles } from "./pagination.styles.mjs";
+export { Pagination, type PaginationStyleProps, paginationStyles };

package/dist/pagination/pagination.d.mts

@@ -0,0 +1,14 @@
+import { PaginationProps } from "@novi-ui/core";
+//#region src/pagination/pagination.d.ts
+/**
+ * 一覧のページを移動する。**押す面を持ち、現在地は primary で塗る**
+ * （Raster は数字だけを並べ、Flatlay は罫線で区切った枠を反転させる）。
+ * どの size でも 40px 以上の面で、親指で押せる。
+ *
+ * @example
+ * <Pagination total={10} page={page} onChange={setPage} />
+ */
+declare function Pagination({ size, radius, total, page, defaultPage, onChange, siblingCount, boundaryCount, isDisabled, 'aria-label': ariaLabel, className, classNames, id }: PaginationProps): import("react").JSX.Element;
+//#endregion
+export { Pagination };
+//# sourceMappingURL=pagination.d.mts.map

package/dist/pagination/pagination.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.mts","names":[],"sources":["../../src/pagination/pagination.tsx"],"mappings":";;;;;;;;;;iBA+BgB,aACd,MACA,QACA,OACA,MACA,aACA,UACA,cACA,eACA,0BACc,WACd,WACA,YACA,MACC,kCAAe,IAAA"}

package/dist/pagination/pagination.mjs

@@ -0,0 +1,100 @@
+"use client";
+import { paginationStyles } from "./pagination.styles.mjs";
+import { Button } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { paginationRange } from "@novi-ui/core/client";
+//#region src/pagination/pagination.tsx
+function ChevronIcon({ direction }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		width: "1em",
+		height: "1em",
+		fill: "none",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: direction === "prev" ? "M10 4l-4 4 4 4" : "M6 4l4 4-4 4",
+			stroke: "currentColor",
+			strokeWidth: "1.75",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+/**
+* 一覧のページを移動する。**押す面を持ち、現在地は primary で塗る**
+* （Raster は数字だけを並べ、Flatlay は罫線で区切った枠を反転させる）。
+* どの size でも 40px 以上の面で、親指で押せる。
+*
+* @example
+* <Pagination total={10} page={page} onChange={setPage} />
+*/
+function Pagination({ size, radius, total, page, defaultPage = 1, onChange, siblingCount, boundaryCount, isDisabled, "aria-label": ariaLabel = "ページ送り", className, classNames, id }) {
+	const s = paginationStyles({
+		size,
+		radius
+	});
+	const [internal, setInternal] = useState(defaultPage);
+	const clamp = (n) => Math.min(Math.max(n, 1), Math.max(total, 1));
+	const current = clamp(page ?? internal);
+	const go = (n) => {
+		const next = clamp(n);
+		if (next === current) return;
+		if (page === void 0) setInternal(next);
+		onChange?.(next);
+	};
+	const slots = paginationRange(current, total, {
+		siblingCount,
+		boundaryCount
+	});
+	const entries = slots.map((slot, i) => ({
+		slot,
+		key: slot === "ellipsis" ? `ellipsis-after-${slots[i - 1]}` : `page-${slot}`
+	}));
+	return /* @__PURE__ */ jsx("nav", {
+		id,
+		"aria-label": ariaLabel,
+		"data-slot": "root",
+		className: s.root({ class: [className, classNames?.root] }),
+		children: /* @__PURE__ */ jsxs("ul", {
+			"data-slot": "list",
+			className: s.list({ class: classNames?.list }),
+			children: [
+				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Button, {
+					"data-slot": "prev",
+					"aria-label": "前のページ",
+					isDisabled: isDisabled || current <= 1,
+					onPress: () => go(current - 1),
+					className: s.prev({ class: classNames?.prev }),
+					children: /* @__PURE__ */ jsx(ChevronIcon, { direction: "prev" })
+				}) }),
+				entries.map(({ slot, key }) => slot === "ellipsis" ? /* @__PURE__ */ jsx("li", {
+					"data-slot": "ellipsis",
+					"aria-hidden": "true",
+					className: s.ellipsis({ class: classNames?.ellipsis }),
+					children: "…"
+				}, key) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Button, {
+					"data-slot": "item",
+					"aria-label": `${slot}ページ`,
+					"aria-current": slot === current ? "page" : void 0,
+					isDisabled,
+					onPress: () => go(slot),
+					className: s.item({ class: classNames?.item }),
+					children: slot
+				}) }, key)),
+				/* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Button, {
+					"data-slot": "next",
+					"aria-label": "次のページ",
+					isDisabled: isDisabled || current >= total,
+					onPress: () => go(current + 1),
+					className: s.next({ class: classNames?.next }),
+					children: /* @__PURE__ */ jsx(ChevronIcon, { direction: "next" })
+				}) })
+			]
+		})
+	});
+}
+//#endregion
+export { Pagination };
+
+//# sourceMappingURL=pagination.mjs.map

package/dist/pagination/pagination.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.mjs","names":[],"sources":["../../src/pagination/pagination.tsx"],"sourcesContent":["'use client'\n\nimport type { PaginationProps } from '@novi-ui/core'\nimport { paginationRange } from '@novi-ui/core/client'\nimport { useState } from 'react'\nimport { Button } from 'react-aria-components'\nimport { paginationStyles } from './pagination.styles'\n\nfunction ChevronIcon({ direction }: { direction: 'prev' | 'next' }) {\n  const d = direction === 'prev' ? 'M10 4l-4 4 4 4' : 'M6 4l4 4-4 4'\n  return (\n    <svg viewBox=\"0 0 16 16\" width=\"1em\" height=\"1em\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d={d}\n        stroke=\"currentColor\"\n        strokeWidth=\"1.75\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\n/**\n * 一覧のページを移動する。**押す面を持ち、現在地は primary で塗る**\n * （Raster は数字だけを並べ、Flatlay は罫線で区切った枠を反転させる）。\n * どの size でも 40px 以上の面で、親指で押せる。\n *\n * @example\n * <Pagination total={10} page={page} onChange={setPage} />\n */\nexport function Pagination({\n  size,\n  radius,\n  total,\n  page,\n  defaultPage = 1,\n  onChange,\n  siblingCount,\n  boundaryCount,\n  isDisabled,\n  'aria-label': ariaLabel = 'ページ送り',\n  className,\n  classNames,\n  id,\n}: PaginationProps) {\n  const s = paginationStyles({ size, radius })\n  const [internal, setInternal] = useState(defaultPage)\n  const clamp = (n: number) => Math.min(Math.max(n, 1), Math.max(total, 1))\n  const current = clamp(page ?? internal)\n\n  const go = (n: number) => {\n    const next = clamp(n)\n    if (next === current) return\n    if (page === undefined) setInternal(next)\n    onChange?.(next)\n  }\n\n  // 省略記号は最大 2 つ出る。配列の添字ではなく「どの数字の直後か」で区別する\n  const slots = paginationRange(current, total, { siblingCount, boundaryCount })\n  const entries = slots.map((slot, i) => ({\n    slot,\n    key: slot === 'ellipsis' ? `ellipsis-after-${slots[i - 1]}` : `page-${slot}`,\n  }))\n\n  return (\n    <nav\n      id={id}\n      aria-label={ariaLabel}\n      data-slot=\"root\"\n      className={s.root({ class: [className, classNames?.root] })}\n    >\n      <ul data-slot=\"list\" className={s.list({ class: classNames?.list })}>\n        <li>\n          <Button\n            data-slot=\"prev\"\n            aria-label=\"前のページ\"\n            isDisabled={isDisabled || current <= 1}\n            onPress={() => go(current - 1)}\n            className={s.prev({ class: classNames?.prev })}\n          >\n            <ChevronIcon direction=\"prev\" />\n          </Button>\n        </li>\n\n        {entries.map(({ slot, key }) =>\n          slot === 'ellipsis' ? (\n            <li\n              key={key}\n              data-slot=\"ellipsis\"\n              aria-hidden=\"true\"\n              className={s.ellipsis({ class: classNames?.ellipsis })}\n            >\n              …\n            </li>\n          ) : (\n            <li key={key}>\n              <Button\n                data-slot=\"item\"\n                aria-label={`${slot}ページ`}\n                aria-current={slot === current ? 'page' : undefined}\n                isDisabled={isDisabled}\n                onPress={() => go(slot)}\n                className={s.item({ class: classNames?.item })}\n              >\n                {slot}\n              </Button>\n            </li>\n          ),\n        )}\n\n        <li>\n          <Button\n            data-slot=\"next\"\n            aria-label=\"次のページ\"\n            isDisabled={isDisabled || current >= total}\n            onPress={() => go(current + 1)}\n            className={s.next({ class: classNames?.next })}\n          >\n            <ChevronIcon direction=\"next\" />\n          </Button>\n        </li>\n      </ul>\n    </nav>\n  )\n}\n"],"mappings":";;;;;;;AAQA,SAAS,YAAY,EAAE,aAA6C;CAElE,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAY,OAAM;EAAM,QAAO;EAAM,MAAK;EAAO,eAAY;EACxE,UAAA,oBAAC,QAAD;GACE,GAJI,cAAc,SAAS,mBAAmB;GAK9C,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;EAChB,CAAA;CACE,CAAA;AAET;;;;;;;;;AAUA,SAAgB,WAAW,EACzB,MACA,QACA,OACA,MACA,cAAc,GACd,UACA,cACA,eACA,YACA,cAAc,YAAY,SAC1B,WACA,YACA,MACkB;CAClB,MAAM,IAAI,iBAAiB;EAAE;EAAM;CAAO,CAAC;CAC3C,MAAM,CAAC,UAAU,eAAe,SAAS,WAAW;CACpD,MAAM,SAAS,MAAc,KAAK,IAAI,KAAK,IAAI,GAAG,CAAC,GAAG,KAAK,IAAI,OAAO,CAAC,CAAC;CACxE,MAAM,UAAU,MAAM,QAAQ,QAAQ;CAEtC,MAAM,MAAM,MAAc;EACxB,MAAM,OAAO,MAAM,CAAC;EACpB,IAAI,SAAS,SAAS;EACtB,IAAI,SAAS,KAAA,GAAW,YAAY,IAAI;EACxC,WAAW,IAAI;CACjB;CAGA,MAAM,QAAQ,gBAAgB,SAAS,OAAO;EAAE;EAAc;CAAc,CAAC;CAC7E,MAAM,UAAU,MAAM,KAAK,MAAM,OAAO;EACtC;EACA,KAAK,SAAS,aAAa,kBAAkB,MAAM,IAAI,OAAO,QAAQ;CACxE,EAAE;CAEF,OACE,oBAAC,OAAD;EACM;EACJ,cAAY;EACZ,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAE1D,UAAA,qBAAC,MAAD;GAAI,aAAU;GAAO,WAAW,EAAE,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;GAAlE,UAAA;IACE,oBAAC,MAAD,EAAA,UACE,oBAAC,QAAD;KACE,aAAU;KACV,cAAW;KACX,YAAY,cAAc,WAAW;KACrC,eAAe,GAAG,UAAU,CAAC;KAC7B,WAAW,EAAE,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;KAE7C,UAAA,oBAAC,aAAD,EAAa,WAAU,OAAQ,CAAA;IACzB,CAAA,EACN,CAAA;IAEH,QAAQ,KAAK,EAAE,MAAM,UACpB,SAAS,aACP,oBAAC,MAAD;KAEE,aAAU;KACV,eAAY;KACZ,WAAW,EAAE,SAAS,EAAE,OAAO,YAAY,SAAS,CAAC;KACtD,UAAA;IAEG,GANG,GAMH,IAEJ,oBAAC,MAAD,EAAA,UACE,oBAAC,QAAD;KACE,aAAU;KACV,cAAY,GAAG,KAAK;KACpB,gBAAc,SAAS,UAAU,SAAS,KAAA;KAC9B;KACZ,eAAe,GAAG,IAAI;KACtB,WAAW,EAAE,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;KAE5C,UAAA;IACK,CAAA,EACN,GAXK,GAWL,CAER;IAEA,oBAAC,MAAD,EAAA,UACE,oBAAC,QAAD;KACE,aAAU;KACV,cAAW;KACX,YAAY,cAAc,WAAW;KACrC,eAAe,GAAG,UAAU,CAAC;KAC7B,WAAW,EAAE,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;KAE7C,UAAA,oBAAC,aAAD,EAAa,WAAU,OAAQ,CAAA;IACzB,CAAA,EACN,CAAA;GACF;;CACD,CAAA;AAET"}

package/dist/pagination/pagination.styles.d.mts

@@ -0,0 +1,73 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/pagination/pagination.styles.d.ts
+/**
+ * Pagination のスタイル定義。
+ *
+ * @example
+ * import { paginationStyles } from '@novi-ui/tactile'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myPagination = tv({ extend: paginationStyles, slots: { list: 'gap-3' } })
+ */
+declare const paginationStyles: import("tailwind-variants").TVReturnType<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    item: string;
+    prev: string;
+    next: string;
+    ellipsis: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    item: string;
+    prev: string;
+    next: string;
+  }>;
+}, {
+  root: string;
+  list: string;
+  item: string;
+  prev: string;
+  next: string;
+  ellipsis: string;
+}, undefined, {
+  size: VariantMap<"sm" | "md" | "lg", {
+    item: string;
+    prev: string;
+    next: string;
+    ellipsis: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    item: string;
+    prev: string;
+    next: string;
+  }>;
+}, {
+  root: string;
+  list: string;
+  item: string;
+  prev: string;
+  next: string;
+  ellipsis: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  size: VariantMap<"sm" | "md" | "lg", {
+    item: string;
+    prev: string;
+    next: string;
+    ellipsis: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    item: string;
+    prev: string;
+    next: string;
+  }>;
+}, {
+  root: string;
+  list: string;
+  item: string;
+  prev: string;
+  next: string;
+  ellipsis: string;
+}>>;
+type PaginationStyleProps = Parameters<typeof paginationStyles>[0];
+//#endregion
+export { PaginationStyleProps, paginationStyles };
+//# sourceMappingURL=pagination.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.styles.d.mts","names":[],"sources":["../../src/pagination/pagination.styles.ts"],"mappings":";;;;;;;;;;;cAqGa,8CAAgB;;IA1DY;IAAc;IAAc;IAAkB;;;IAqB1C;IAAc;IAAc;;;;;;;;;;;IArBhC;IAAc;IAAc;IAAkB;;;IAqB1C;IAAc;IAAc;;;;;;;;;;;IArBhC;IAAc;IAAc;IAAkB;;;IAqB1C;IAAc;IAAc;;;;;;;;;;KA2C7D,uBAAuB,kBAAkB"}

package/dist/pagination/pagination.styles.mjs

@@ -0,0 +1,100 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/pagination/pagination.styles.ts
+/**
+* ページ番号と前後のボタンに共通の面。**指で押す面**なので正方形の面を持ち、
+* 現在地は primary で塗る（Raster は線、Flatlay は反転）。
+* 押した手応えは Button と同じ縮み（scale は押下にだけ許される）。
+*/
+const cell = [
+	"inline-flex items-center justify-center",
+	"text-[var(--novi-color-fg)] tabular-nums",
+	"bg-transparent",
+	"outline-none",
+	"hover:bg-[var(--novi-color-subtle)]",
+	"data-[pressed]:scale-[0.97]",
+	"motion-reduce:data-[pressed]:scale-100",
+	"aria-[current=page]:bg-[var(--novi-color-primary)]",
+	"aria-[current=page]:text-[var(--novi-color-primary-fg)]",
+	"aria-[current=page]:font-medium",
+	"transition-[background-color,transform]",
+	"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+	focusRing,
+	disabledState
+].join(" ");
+/**
+* Pagination のスタイル定義。
+*
+* @example
+* import { paginationStyles } from '@novi-ui/tactile'
+* import { tv } from 'tailwind-variants'
+*
+* const myPagination = tv({ extend: paginationStyles, slots: { list: 'gap-3' } })
+*/
+const paginationStyles = tv({
+	slots: {
+		root: "inline-flex",
+		list: "flex items-center gap-1.5 list-none m-0 p-0",
+		item: cell,
+		prev: cell,
+		next: cell,
+		ellipsis: "inline-flex items-center justify-center text-[var(--novi-color-muted)] select-none"
+	},
+	variants: {
+		size: {
+			sm: {
+				item: "h-10 min-w-10 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]",
+				prev: "h-10 min-w-10 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]",
+				next: "h-10 min-w-10 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]",
+				ellipsis: "h-10 min-w-10 text-[length:var(--novi-text-sm)]"
+			},
+			md: {
+				item: "h-12 min-w-12 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-base)]",
+				prev: "h-12 min-w-12 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-base)]",
+				next: "h-12 min-w-12 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-base)]",
+				ellipsis: "h-12 min-w-12 text-[length:var(--novi-text-base)]"
+			},
+			lg: {
+				item: "h-14 min-w-14 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-lg)]",
+				prev: "h-14 min-w-14 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-lg)]",
+				next: "h-14 min-w-14 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-lg)]",
+				ellipsis: "h-14 min-w-14 text-[length:var(--novi-text-lg)]"
+			}
+		},
+		radius: {
+			none: {
+				item: "rounded-[var(--novi-radius-none)]",
+				prev: "rounded-[var(--novi-radius-none)]",
+				next: "rounded-[var(--novi-radius-none)]"
+			},
+			sm: {
+				item: "rounded-[var(--novi-radius-sm)]",
+				prev: "rounded-[var(--novi-radius-sm)]",
+				next: "rounded-[var(--novi-radius-sm)]"
+			},
+			md: {
+				item: "rounded-[var(--novi-radius-md)]",
+				prev: "rounded-[var(--novi-radius-md)]",
+				next: "rounded-[var(--novi-radius-md)]"
+			},
+			lg: {
+				item: "rounded-[var(--novi-radius-lg)]",
+				prev: "rounded-[var(--novi-radius-lg)]",
+				next: "rounded-[var(--novi-radius-lg)]"
+			},
+			full: {
+				item: "rounded-[var(--novi-radius-full)]",
+				prev: "rounded-[var(--novi-radius-full)]",
+				next: "rounded-[var(--novi-radius-full)]"
+			}
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		radius: "md"
+	}
+});
+//#endregion
+export { paginationStyles };
+
+//# sourceMappingURL=pagination.styles.mjs.map

package/dist/pagination/pagination.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.styles.mjs","names":[],"sources":["../../src/pagination/pagination.styles.ts"],"sourcesContent":["import type {\n  NoviRadius,\n  NoviSize,\n  paginationRequiredSlots,\n  paginationSlots,\n  SlotMap,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n/**\n * ページ番号と前後のボタンに共通の面。**指で押す面**なので正方形の面を持ち、\n * 現在地は primary で塗る（Raster は線、Flatlay は反転）。\n * 押した手応えは Button と同じ縮み（scale は押下にだけ許される）。\n */\nconst cell = [\n  'inline-flex items-center justify-center',\n  'text-[var(--novi-color-fg)] tabular-nums',\n  'bg-transparent',\n  'outline-none',\n  'hover:bg-[var(--novi-color-subtle)]',\n  'data-[pressed]:scale-[0.97]',\n  'motion-reduce:data-[pressed]:scale-100',\n  'aria-[current=page]:bg-[var(--novi-color-primary)]',\n  'aria-[current=page]:text-[var(--novi-color-primary-fg)]',\n  'aria-[current=page]:font-medium',\n  'transition-[background-color,transform]',\n  'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n  focusRing,\n  disabledState,\n].join(' ')\n\nconst slots = {\n  root: 'inline-flex',\n  list: 'flex items-center gap-1.5 list-none m-0 p-0',\n  item: cell,\n  prev: cell,\n  next: cell,\n  ellipsis: 'inline-flex items-center justify-center text-[var(--novi-color-muted)] select-none',\n} satisfies SlotMap<typeof paginationSlots, (typeof paginationRequiredSlots)[number]>\n\n/** 高さは Button と揃える。40 / 48 / 56px。幅は最小で正方形 */\nconst size: VariantMap<NoviSize, { item: string; prev: string; next: string; ellipsis: string }> = {\n  sm: {\n    item: 'h-10 min-w-10 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]',\n    prev: 'h-10 min-w-10 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]',\n    next: 'h-10 min-w-10 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]',\n    ellipsis: 'h-10 min-w-10 text-[length:var(--novi-text-sm)]',\n  },\n  md: {\n    item: 'h-12 min-w-12 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-base)]',\n    prev: 'h-12 min-w-12 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-base)]',\n    next: 'h-12 min-w-12 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-base)]',\n    ellipsis: 'h-12 min-w-12 text-[length:var(--novi-text-base)]',\n  },\n  lg: {\n    item: 'h-14 min-w-14 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-lg)]',\n    prev: 'h-14 min-w-14 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-lg)]',\n    next: 'h-14 min-w-14 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-lg)]',\n    ellipsis: 'h-14 min-w-14 text-[length:var(--novi-text-lg)]',\n  },\n}\n\nconst radius: VariantMap<NoviRadius, { item: string; prev: string; next: string }> = {\n  none: {\n    item: 'rounded-[var(--novi-radius-none)]',\n    prev: 'rounded-[var(--novi-radius-none)]',\n    next: 'rounded-[var(--novi-radius-none)]',\n  },\n  sm: {\n    item: 'rounded-[var(--novi-radius-sm)]',\n    prev: 'rounded-[var(--novi-radius-sm)]',\n    next: 'rounded-[var(--novi-radius-sm)]',\n  },\n  md: {\n    item: 'rounded-[var(--novi-radius-md)]',\n    prev: 'rounded-[var(--novi-radius-md)]',\n    next: 'rounded-[var(--novi-radius-md)]',\n  },\n  lg: {\n    item: 'rounded-[var(--novi-radius-lg)]',\n    prev: 'rounded-[var(--novi-radius-lg)]',\n    next: 'rounded-[var(--novi-radius-lg)]',\n  },\n  full: {\n    item: 'rounded-[var(--novi-radius-full)]',\n    prev: 'rounded-[var(--novi-radius-full)]',\n    next: 'rounded-[var(--novi-radius-full)]',\n  },\n}\n\n/**\n * Pagination のスタイル定義。\n *\n * @example\n * import { paginationStyles } from '@novi-ui/tactile'\n * import { tv } from 'tailwind-variants'\n *\n * const myPagination = tv({ extend: paginationStyles, slots: { list: 'gap-3' } })\n */\nexport const paginationStyles = tv({\n  slots,\n  variants: { size, radius },\n  defaultVariants: { size: 'md', radius: 'md' },\n})\n\nexport type PaginationStyleProps = Parameters<typeof paginationStyles>[0]\n"],"mappings":";;;;;;;;AAgBA,MAAM,OAAO;CACX;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC,CAAC,KAAK,GAAG;;;;;;;;;;AAsEV,MAAa,mBAAmB,GAAG;CACjC;EApEA,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,MAAM;EACN,UAAU;CA+DV;CACA,UAAU;EAAE;GA3DZ,IAAI;IACF,MAAM;IACN,MAAM;IACN,MAAM;IACN,UAAU;GACZ;GACA,IAAI;IACF,MAAM;IACN,MAAM;IACN,MAAM;IACN,UAAU;GACZ;GACA,IAAI;IACF,MAAM;IACN,MAAM;IACN,MAAM;IACN,UAAU;GACZ;EA0CY;EAAM;GAtClB,MAAM;IACJ,MAAM;IACN,MAAM;IACN,MAAM;GACR;GACA,IAAI;IACF,MAAM;IACN,MAAM;IACN,MAAM;GACR;GACA,IAAI;IACF,MAAM;IACN,MAAM;IACN,MAAM;GACR;GACA,IAAI;IACF,MAAM;IACN,MAAM;IACN,MAAM;GACR;GACA,MAAM;IACJ,MAAM;IACN,MAAM;IACN,MAAM;GACR;EAckB;CAAO;CACzB,iBAAiB;EAAE,MAAM;EAAM,QAAQ;CAAK;AAC9C,CAAC"}

package/dist/popover/popover.styles.d.mts

@@ -41,16 +41,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;
     };
   };
 } | {}, {
@@ -61,8 +61,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;
     };
   };
 } | {}, {

package/dist/select/select.d.mts

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

package/dist/select/select.mjs

@@ -60,7 +60,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  Popover,\n  Select as RACSelect,\n  SelectValue,\n  Text,\n} from 'react-aria-components'\nimport { selectStyles } from './select.styles'\n\n/** 開閉を示す記号。上下の山で「下から出る/しまう」方向を示す。 */\nfunction TriggerIcon() {\n  return (\n    <svg viewBox=\"0 0 16 16\" width=\"0.9em\" height=\"0.9em\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M5 6.5L8 3.5l3 3M5 9.5l3 3 3-3\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n    </svg>\n  )\n}\n\n/** 選択済みの印。シートでは行が大きいぶん、選択状態を明示しないと見失う。 */\nfunction SelectedIcon() {\n  return (\n    <svg viewBox=\"0 0 16 16\" width=\"1em\" height=\"1em\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M3.5 8.5l3 3 6-6\" stroke=\"currentColor\" strokeWidth=\"1.75\" />\n    </svg>\n  )\n}\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 * @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 className=\"truncate\">{children}</span>\n          {isSelected && (\n            <span className=\"shrink-0 text-[var(--novi-color-primary)]\">\n              <SelectedIcon />\n            </span>\n          )}\n        </>\n      )}\n    </ListBoxItem>\n  )\n}\n\n/**\n * 一覧から1つ選ぶ。**選択肢は画面下端から出るシート**で表示される（Raster はトリガーの隣）。\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 状態を参照するために 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 data-slot=\"icon\" className={s.icon({ class: classNames?.icon })}>\n          <TriggerIcon />\n        </span>\n      </Button>\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\n      <Popover data-slot=\"popover\" className={s.popover({ class: classNames?.popover })}>\n        <ListBox data-slot=\"listbox\" className={s.listbox({ class: classNames?.listbox })}>\n          {children}\n        </ListBox>\n      </Popover>\n    </RACSelect>\n  )\n}\n"],"mappings":";;;;;;AAkBA,SAAS,cAAc;CACrB,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAY,OAAM;EAAQ,QAAO;EAAQ,MAAK;EAAO,eAAY;EAC5E,UAAA,oBAAC,QAAD;GAAM,GAAE;GAAiC,QAAO;GAAe,aAAY;EAAO,CAAA;CAC/E,CAAA;AAET;;AAGA,SAAS,eAAe;CACtB,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAY,OAAM;EAAM,QAAO;EAAM,MAAK;EAAO,eAAY;EACxE,UAAA,oBAAC,QAAD;GAAM,GAAE;GAAmB,QAAO;GAAe,aAAY;EAAQ,CAAA;CAClE,CAAA;AAET;;;;;;;AAgBA,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,WAAU;GAAY;EAAe,CAAA,GAC1C,cACC,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAAC,cAAD,CAAe,CAAA;EACX,CAAA,CAER,EAAA,CAAA;CAEO,CAAA;AAEjB;;;;;;;;;;;;;;AAeA,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,oBAAC,QAAD;KAAM,aAAU;KAAO,WAAW,EAAE,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;KAClE,UAAA,oBAAC,aAAD,CAAc,CAAA;IACV,CAAA,CACA;;GAEP,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;GAEZ,oBAAC,SAAD;IAAS,aAAU;IAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;IAC9E,UAAA,oBAAC,SAAD;KAAS,aAAU;KAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;KAC7E;IACM,CAAA;GACF,CAAA;EACA;;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  Popover,\n  Select as RACSelect,\n  SelectValue,\n  Text,\n} from 'react-aria-components'\nimport { selectStyles } from './select.styles'\n\n/** 開閉を示す記号。上下の山で「下から出る/しまう」方向を示す。 */\nfunction TriggerIcon() {\n  return (\n    <svg viewBox=\"0 0 16 16\" width=\"0.9em\" height=\"0.9em\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M5 6.5L8 3.5l3 3M5 9.5l3 3 3-3\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n    </svg>\n  )\n}\n\n/** 選択済みの印。シートでは行が大きいぶん、選択状態を明示しないと見失う。 */\nfunction SelectedIcon() {\n  return (\n    <svg viewBox=\"0 0 16 16\" width=\"1em\" height=\"1em\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M3.5 8.5l3 3 6-6\" stroke=\"currentColor\" strokeWidth=\"1.75\" />\n    </svg>\n  )\n}\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 * @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 className=\"truncate\">{children}</span>\n          {isSelected && (\n            <span className=\"shrink-0 text-[var(--novi-color-primary)]\">\n              <SelectedIcon />\n            </span>\n          )}\n        </>\n      )}\n    </ListBoxItem>\n  )\n}\n\n/**\n * 一覧から1つ選ぶ。**選択肢は画面下端から出るシート**で表示される（Raster はトリガーの隣）。\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 状態を参照するために 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 data-slot=\"icon\" className={s.icon({ class: classNames?.icon })}>\n          <TriggerIcon />\n        </span>\n      </Button>\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\n      <Popover data-slot=\"popover\" className={s.popover({ class: classNames?.popover })}>\n        <ListBox data-slot=\"listbox\" className={s.listbox({ class: classNames?.listbox })}>\n          {children}\n        </ListBox>\n      </Popover>\n    </RACSelect>\n  )\n}\n"],"mappings":";;;;;;AAkBA,SAAS,cAAc;CACrB,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAY,OAAM;EAAQ,QAAO;EAAQ,MAAK;EAAO,eAAY;EAC5E,UAAA,oBAAC,QAAD;GAAM,GAAE;GAAiC,QAAO;GAAe,aAAY;EAAO,CAAA;CAC/E,CAAA;AAET;;AAGA,SAAS,eAAe;CACtB,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAY,OAAM;EAAM,QAAO;EAAM,MAAK;EAAO,eAAY;EACxE,UAAA,oBAAC,QAAD;GAAM,GAAE;GAAmB,QAAO;GAAe,aAAY;EAAQ,CAAA;CAClE,CAAA;AAET;;;;;;;AAgBA,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,WAAU;GAAY;EAAe,CAAA,GAC1C,cACC,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAAC,cAAD,CAAe,CAAA;EACX,CAAA,CAER,EAAA,CAAA;CAEO,CAAA;AAEjB;;;;;;;;;;;;;;AAeA,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,oBAAC,QAAD;KAAM,aAAU;KAAO,WAAW,EAAE,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;KAClE,UAAA,oBAAC,aAAD,CAAc,CAAA;IACV,CAAA,CACA;;GAEP,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;GAEZ,oBAAC,SAAD;IAAS,aAAU;IAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;IAC9E,UAAA,oBAAC,SAAD;KAAS,aAAU;KAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;KAC7E;IACM,CAAA;GACF,CAAA;EACA;;AAEf"}

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;
+/**
+ * 一覧を行と列で見せる。**行が指で押せる面**で、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>
+ */
+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":";;;UA0CiB;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"}