@novi-ui/raster 0.5.0 → 0.7.0

package/dist/date-picker/date-picker.mjs

@@ -0,0 +1,161 @@
+"use client";
+import { datePickerStyles } from "./date-picker.styles.mjs";
+import { Button, Calendar, CalendarCell, CalendarGrid, DateInput, DatePicker, DateSegment, Dialog, FieldError, Group, Heading, Label, Popover, Text } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/date-picker/date-picker.tsx
+function CalendarIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 16 16",
+		width: "0.85em",
+		height: "0.85em",
+		fill: "none",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("rect", {
+			x: "2.5",
+			y: "3.5",
+			width: "11",
+			height: "10",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M2.5 6.5h11M5.5 2v3M10.5 2v3",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		})]
+	});
+}
+function ChevronIcon({ direction }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 16 16",
+		width: "0.75em",
+		height: "0.75em",
+		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.5"
+		})
+	});
+}
+/**
+* 日付を入力する。年 / 月 / 日のマスに直接打つか、カレンダーを開いて選ぶ。
+*
+* カレンダーは入力欄の隣に浮く（Tactile は画面下端のシート、Flatlay はフロー内に展開）。
+* 値は `@internationalized/date` の `CalendarDate`（ADR-B6）。
+*
+* @example
+* <DatePicker label="出荷日" value={date} onChange={setDate} minValue={today} />
+*/
+function DatePicker$1({ variant, size, radius, label, description, errorMessage, name, value, defaultValue, onChange, minValue, maxValue, isDateUnavailable, placeholderValue, isOpen, defaultOpen, onOpenChange, isDisabled, isReadOnly, isRequired, isInvalid, className, classNames, id }) {
+	const s = datePickerStyles({
+		variant,
+		size,
+		radius
+	});
+	return /* @__PURE__ */ jsxs(DatePicker, {
+		id,
+		name,
+		value,
+		defaultValue,
+		onChange,
+		minValue,
+		maxValue,
+		isDateUnavailable,
+		placeholderValue,
+		isOpen,
+		defaultOpen,
+		onOpenChange,
+		isDisabled,
+		isReadOnly,
+		isRequired,
+		isInvalid,
+		granularity: "day",
+		"data-slot": "root",
+		className: `group ${s.root({ class: [className, classNames?.root] })}`,
+		children: [
+			label !== void 0 && /* @__PURE__ */ jsx(Label, {
+				"data-slot": "label",
+				className: s.label({ class: classNames?.label }),
+				children: label
+			}),
+			/* @__PURE__ */ jsxs(Group, {
+				"data-slot": "inputWrapper",
+				className: s.inputWrapper({ class: classNames?.inputWrapper }),
+				children: [/* @__PURE__ */ jsx(DateInput, {
+					"data-slot": "dateInput",
+					className: s.dateInput({ class: classNames?.dateInput }),
+					children: (segment) => /* @__PURE__ */ jsx(DateSegment, {
+						segment,
+						"data-slot": "segment",
+						className: s.segment({ class: classNames?.segment })
+					})
+				}), /* @__PURE__ */ jsx(Button, {
+					"data-slot": "trigger",
+					className: s.trigger({ class: classNames?.trigger }),
+					children: /* @__PURE__ */ jsx("span", {
+						"data-slot": "icon",
+						className: s.icon({ class: classNames?.icon }),
+						children: /* @__PURE__ */ jsx(CalendarIcon, {})
+					})
+				})]
+			}),
+			description !== void 0 && /* @__PURE__ */ jsx(Text, {
+				slot: "description",
+				"data-slot": "description",
+				className: s.description({ class: classNames?.description }),
+				children: description
+			}),
+			/* @__PURE__ */ jsx(FieldError, {
+				"data-slot": "errorMessage",
+				className: s.errorMessage({ class: classNames?.errorMessage }),
+				children: errorMessage
+			}),
+			/* @__PURE__ */ jsx(Popover, {
+				"data-slot": "popover",
+				className: s.popover({ class: classNames?.popover }),
+				children: /* @__PURE__ */ jsx(Dialog, {
+					className: "outline-none",
+					children: /* @__PURE__ */ jsxs(Calendar, {
+						"data-slot": "calendar",
+						className: s.calendar({ class: classNames?.calendar }),
+						children: [/* @__PURE__ */ jsxs("header", {
+							"data-slot": "calendarHeader",
+							className: s.calendarHeader({ class: classNames?.calendarHeader }),
+							children: [
+								/* @__PURE__ */ jsx(Button, {
+									slot: "previous",
+									"data-slot": "prevButton",
+									className: s.prevButton({ class: classNames?.prevButton }),
+									children: /* @__PURE__ */ jsx(ChevronIcon, { direction: "prev" })
+								}),
+								/* @__PURE__ */ jsx(Heading, {
+									"data-slot": "calendarTitle",
+									className: s.calendarTitle({ class: classNames?.calendarTitle })
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									slot: "next",
+									"data-slot": "nextButton",
+									className: s.nextButton({ class: classNames?.nextButton }),
+									children: /* @__PURE__ */ jsx(ChevronIcon, { direction: "next" })
+								})
+							]
+						}), /* @__PURE__ */ jsx(CalendarGrid, {
+							"data-slot": "calendarGrid",
+							className: s.calendarGrid({ class: classNames?.calendarGrid }),
+							children: (date) => /* @__PURE__ */ jsx(CalendarCell, {
+								date,
+								"data-slot": "calendarCell",
+								className: s.calendarCell({ class: classNames?.calendarCell })
+							})
+						})]
+					})
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { DatePicker$1 as DatePicker };
+
+//# sourceMappingURL=date-picker.mjs.map

package/dist/date-picker/date-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.mjs","names":["DatePicker","RACDatePicker"],"sources":["../../src/date-picker/date-picker.tsx"],"sourcesContent":["'use client'\n\nimport type { DatePickerProps } from '@novi-ui/core'\nimport {\n  Button,\n  Calendar,\n  CalendarCell,\n  CalendarGrid,\n  DateInput,\n  DateSegment,\n  Dialog,\n  FieldError,\n  Group,\n  Heading,\n  Label,\n  Popover,\n  DatePicker as RACDatePicker,\n  Text,\n} from 'react-aria-components'\nimport { datePickerStyles } from './date-picker.styles'\n\nfunction CalendarIcon() {\n  return (\n    <svg viewBox=\"0 0 16 16\" width=\"0.85em\" height=\"0.85em\" fill=\"none\" aria-hidden=\"true\">\n      <rect x=\"2.5\" y=\"3.5\" width=\"11\" height=\"10\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n      <path d=\"M2.5 6.5h11M5.5 2v3M10.5 2v3\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n    </svg>\n  )\n}\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=\"0.75em\" height=\"0.75em\" fill=\"none\" aria-hidden=\"true\">\n      <path d={d} stroke=\"currentColor\" strokeWidth=\"1.5\" />\n    </svg>\n  )\n}\n\n/**\n * 日付を入力する。年 / 月 / 日のマスに直接打つか、カレンダーを開いて選ぶ。\n *\n * カレンダーは入力欄の隣に浮く（Tactile は画面下端のシート、Flatlay はフロー内に展開）。\n * 値は `@internationalized/date` の `CalendarDate`（ADR-B6）。\n *\n * @example\n * <DatePicker label=\"出荷日\" value={date} onChange={setDate} minValue={today} />\n */\nexport function DatePicker({\n  variant,\n  size,\n  radius,\n  label,\n  description,\n  errorMessage,\n  name,\n  value,\n  defaultValue,\n  onChange,\n  minValue,\n  maxValue,\n  isDateUnavailable,\n  placeholderValue,\n  isOpen,\n  defaultOpen,\n  onOpenChange,\n  isDisabled,\n  isReadOnly,\n  isRequired,\n  isInvalid,\n  className,\n  classNames,\n  id,\n}: DatePickerProps) {\n  const s = datePickerStyles({ variant, size, radius })\n\n  return (\n    <RACDatePicker\n      id={id}\n      name={name}\n      value={value}\n      defaultValue={defaultValue}\n      onChange={onChange}\n      minValue={minValue}\n      maxValue={maxValue}\n      isDateUnavailable={isDateUnavailable}\n      placeholderValue={placeholderValue}\n      isOpen={isOpen}\n      defaultOpen={defaultOpen}\n      onOpenChange={onOpenChange}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isRequired={isRequired}\n      isInvalid={isInvalid}\n      granularity=\"day\"\n      data-slot=\"root\"\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      <Group\n        data-slot=\"inputWrapper\"\n        className={s.inputWrapper({ class: classNames?.inputWrapper })}\n      >\n        <DateInput data-slot=\"dateInput\" className={s.dateInput({ class: classNames?.dateInput })}>\n          {(segment) => (\n            <DateSegment\n              segment={segment}\n              data-slot=\"segment\"\n              className={s.segment({ class: classNames?.segment })}\n            />\n          )}\n        </DateInput>\n        <Button data-slot=\"trigger\" className={s.trigger({ class: classNames?.trigger })}>\n          <span data-slot=\"icon\" className={s.icon({ class: classNames?.icon })}>\n            <CalendarIcon />\n          </span>\n        </Button>\n      </Group>\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        <Dialog className=\"outline-none\">\n          <Calendar data-slot=\"calendar\" className={s.calendar({ class: classNames?.calendar })}>\n            <header\n              data-slot=\"calendarHeader\"\n              className={s.calendarHeader({ class: classNames?.calendarHeader })}\n            >\n              <Button\n                slot=\"previous\"\n                data-slot=\"prevButton\"\n                className={s.prevButton({ class: classNames?.prevButton })}\n              >\n                <ChevronIcon direction=\"prev\" />\n              </Button>\n              <Heading\n                data-slot=\"calendarTitle\"\n                className={s.calendarTitle({ class: classNames?.calendarTitle })}\n              />\n              <Button\n                slot=\"next\"\n                data-slot=\"nextButton\"\n                className={s.nextButton({ class: classNames?.nextButton })}\n              >\n                <ChevronIcon direction=\"next\" />\n              </Button>\n            </header>\n            <CalendarGrid\n              data-slot=\"calendarGrid\"\n              className={s.calendarGrid({ class: classNames?.calendarGrid })}\n            >\n              {(date) => (\n                <CalendarCell\n                  date={date}\n                  data-slot=\"calendarCell\"\n                  className={s.calendarCell({ class: classNames?.calendarCell })}\n                />\n              )}\n            </CalendarGrid>\n          </Calendar>\n        </Dialog>\n      </Popover>\n    </RACDatePicker>\n  )\n}\n"],"mappings":"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"}

package/dist/date-picker/date-picker.styles.d.mts

@@ -0,0 +1,103 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/date-picker/date-picker.styles.d.ts
+/**
+ * DatePicker のスタイル定義。
+ *
+ * @example
+ * import { datePickerStyles } from '@novi-ui/raster'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myPicker = tv({ extend: datePickerStyles, slots: { calendarCell: 'size-9' } })
+ */
+declare const datePickerStyles: import("tailwind-variants").TVReturnType<{
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    inputWrapper: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    inputWrapper: string;
+    dateInput: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  inputWrapper: string;
+  dateInput: string;
+  segment: string;
+  trigger: string;
+  icon: string;
+  popover: string;
+  calendar: string;
+  calendarHeader: string;
+  calendarTitle: string;
+  prevButton: string;
+  nextButton: string;
+  calendarGrid: string;
+  calendarCell: string;
+  description: string;
+  errorMessage: string;
+}, undefined, {
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    inputWrapper: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    inputWrapper: string;
+    dateInput: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  inputWrapper: string;
+  dateInput: string;
+  segment: string;
+  trigger: string;
+  icon: string;
+  popover: string;
+  calendar: string;
+  calendarHeader: string;
+  calendarTitle: string;
+  prevButton: string;
+  nextButton: string;
+  calendarGrid: string;
+  calendarCell: string;
+  description: string;
+  errorMessage: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    inputWrapper: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    inputWrapper: string;
+    dateInput: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  inputWrapper: string;
+  dateInput: string;
+  segment: string;
+  trigger: string;
+  icon: string;
+  popover: string;
+  calendar: string;
+  calendarHeader: string;
+  calendarTitle: string;
+  prevButton: string;
+  nextButton: string;
+  calendarGrid: string;
+  calendarCell: string;
+  description: string;
+  errorMessage: string;
+}>>;
+type DatePickerStyleProps = Parameters<typeof datePickerStyles>[0];
+//#endregion
+export { DatePickerStyleProps, datePickerStyles };
+//# sourceMappingURL=date-picker.styles.d.mts.map

package/dist/date-picker/date-picker.styles.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.styles.d.mts","names":[],"sources":["../../src/date-picker/date-picker.styles.ts"],"mappings":";;;;;;;;;;;cA2Ia,8CAAgB;;IA7C0B;;;IAaN;IAAmB;;;IAef;;;;;;;;;;;;;;;;;;;;;;IA5BE;;;IAaN;IAAmB;;;IAef;;;;;;;;;;;;;;;;;;;;;;IA5BE;;;IAaN;IAAmB;;;IAef;;;;;;;;;;;;;;;;;;;;;KAuBzC,uBAAuB,kBAAkB"}

package/dist/date-picker/date-picker.styles.mjs

@@ -0,0 +1,126 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/date-picker/date-picker.styles.ts
+/** 月送りのボタン。線で区切らず、記号だけを置く */
+const monthButton = [
+	"inline-flex items-center justify-center size-8",
+	"text-[var(--novi-color-muted)] outline-none",
+	"rounded-[var(--novi-radius-sm)]",
+	"hover:text-[var(--novi-color-fg)] hover:bg-[var(--novi-color-subtle)]",
+	"data-[disabled]:opacity-40",
+	focusRing
+].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-bg)]",
+		"border border-[var(--novi-color-border-strong)]",
+		"transition-[border-color,opacity]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		"data-[invalid]:border-[var(--novi-color-danger)]",
+		focusRing,
+		disabledState
+	].join(" "),
+	dateInput: "flex items-center flex-1 min-w-0 whitespace-nowrap",
+	segment: [
+		"inline-flex items-center justify-center min-w-6 min-h-6 px-0.5 tabular-nums outline-none",
+		"rounded-[var(--novi-radius-sm)]",
+		"data-[placeholder]:text-[var(--novi-color-muted)]",
+		"data-[type=literal]:px-0 data-[type=literal]:text-[var(--novi-color-muted)]",
+		"data-[focused]:bg-[var(--novi-color-primary)] data-[focused]:text-[var(--novi-color-primary-fg)]",
+		"data-[invalid]:text-[var(--novi-color-danger)]"
+	].join(" "),
+	trigger: [
+		"shrink-0 self-stretch inline-flex items-center justify-center w-8",
+		"text-[var(--novi-color-muted)]",
+		"border-l border-[var(--novi-color-border)]",
+		"outline-none",
+		"hover:text-[var(--novi-color-fg)] hover:bg-[var(--novi-color-subtle)]",
+		"data-[focus-visible]:text-[var(--novi-color-fg)]",
+		"data-[disabled]:opacity-40 data-[disabled]:cursor-default",
+		"transition-[color,background-color]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]"
+	].join(" "),
+	icon: "shrink-0 inline-flex",
+	popover: [
+		"bg-[var(--novi-color-bg)]",
+		"text-[var(--novi-color-fg)]",
+		"border border-[var(--novi-color-border)]",
+		"rounded-[var(--novi-radius-lg)]",
+		"shadow-[var(--novi-shadow-md)]",
+		"p-[var(--novi-pad-surface-y)]"
+	].join(" "),
+	calendar: "flex flex-col gap-[var(--novi-gap-inline)] outline-none",
+	calendarHeader: "flex items-center justify-between gap-[var(--novi-gap-inline)]",
+	calendarTitle: "text-[length:var(--novi-text-sm)] font-medium tabular-nums",
+	prevButton: monthButton,
+	nextButton: monthButton,
+	calendarGrid: ["border-collapse", "[&_th]:size-8 [&_th]:font-normal [&_th]:text-[length:var(--novi-text-xs)] [&_th]:text-[var(--novi-color-muted)]"].join(" "),
+	calendarCell: [
+		"size-8 inline-flex items-center justify-center",
+		"text-[length:var(--novi-text-sm)] tabular-nums cursor-pointer outline-none",
+		"rounded-[var(--novi-radius-sm)]",
+		"data-[hovered]:bg-[var(--novi-color-subtle)]",
+		"data-[selected]:bg-[var(--novi-color-primary)] data-[selected]:text-[var(--novi-color-primary-fg)]",
+		"data-[focus-visible]:outline-2 data-[focus-visible]:-outline-offset-2 data-[focus-visible]:outline-[var(--novi-color-ring)]",
+		"data-[disabled]:opacity-40 data-[disabled]:cursor-default",
+		"data-[unavailable]:line-through data-[unavailable]:text-[var(--novi-color-muted)]",
+		"data-[outside-month]:invisible"
+	].join(" "),
+	description: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]",
+	errorMessage: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]"
+};
+/**
+* DatePicker のスタイル定義。
+*
+* @example
+* import { datePickerStyles } from '@novi-ui/raster'
+* import { tv } from 'tailwind-variants'
+*
+* const myPicker = tv({ extend: datePickerStyles, slots: { calendarCell: 'size-9' } })
+*/
+const datePickerStyles = tv({
+	slots,
+	variants: {
+		variant: {
+			solid: { inputWrapper: "bg-[var(--novi-color-subtle)] border-[var(--novi-color-border-strong)]" },
+			outline: { inputWrapper: "bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]" },
+			soft: { inputWrapper: "bg-[var(--novi-color-subtle)] border-transparent" },
+			ghost: { inputWrapper: "bg-transparent border-transparent border-b-[var(--novi-color-border-strong)]" },
+			plain: { inputWrapper: "bg-transparent border-transparent" }
+		},
+		size: {
+			sm: {
+				inputWrapper: "h-8",
+				dateInput: "px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]"
+			},
+			md: {
+				inputWrapper: "h-10",
+				dateInput: "px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]"
+			},
+			lg: {
+				inputWrapper: "h-12",
+				dateInput: "px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]"
+			}
+		},
+		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 { datePickerStyles };
+
+//# sourceMappingURL=date-picker.styles.mjs.map

package/dist/date-picker/date-picker.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.styles.mjs","names":[],"sources":["../../src/date-picker/date-picker.styles.ts"],"sourcesContent":["import type {\n  datePickerRequiredSlots,\n  datePickerSlots,\n  NoviRadius,\n  NoviSize,\n  NoviVariant,\n  SlotMap,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\n\n/** 月送りのボタン。線で区切らず、記号だけを置く */\nconst monthButton = [\n  'inline-flex items-center justify-center size-8',\n  'text-[var(--novi-color-muted)] outline-none',\n  'rounded-[var(--novi-radius-sm)]',\n  'hover:text-[var(--novi-color-fg)] hover:bg-[var(--novi-color-subtle)]',\n  'data-[disabled]:opacity-40',\n  focusRing,\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 と同じ枠。開くボタンを縁まで届かせるため、左右の余白は dateInput 側に置く\n  inputWrapper: [\n    'text-[var(--novi-color-fg)]',\n    'flex items-center w-full overflow-hidden',\n    'bg-[var(--novi-color-bg)]',\n    'border border-[var(--novi-color-border-strong)]',\n    'transition-[border-color,opacity]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    'data-[invalid]:border-[var(--novi-color-danger)]',\n    focusRing,\n    disabledState,\n  ].join(' '),\n  dateInput: 'flex items-center flex-1 min-w-0 whitespace-nowrap',\n  // 年 / 月 / 日の 1 マス。フォーカスは反転で示す（マス自体が小さく、リングでは潰れる）\n  segment: [\n    // 触れる対象として 24px 四方を確保する（WCAG 2.2 target-size）。文字幅 1〜2 桁のマスが小さくなりすぎる\n    'inline-flex items-center justify-center min-w-6 min-h-6 px-0.5 tabular-nums outline-none',\n    'rounded-[var(--novi-radius-sm)]',\n    'data-[placeholder]:text-[var(--novi-color-muted)]',\n    'data-[type=literal]:px-0 data-[type=literal]:text-[var(--novi-color-muted)]',\n    'data-[focused]:bg-[var(--novi-color-primary)] data-[focused]:text-[var(--novi-color-primary-fg)]',\n    'data-[invalid]:text-[var(--novi-color-danger)]',\n  ].join(' '),\n  trigger: [\n    'shrink-0 self-stretch inline-flex items-center justify-center w-8',\n    'text-[var(--novi-color-muted)]',\n    'border-l border-[var(--novi-color-border)]',\n    'outline-none',\n    'hover:text-[var(--novi-color-fg)] hover:bg-[var(--novi-color-subtle)]',\n    'data-[focus-visible]:text-[var(--novi-color-fg)]',\n    'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n    'transition-[color,background-color]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n  ].join(' '),\n  icon: 'shrink-0 inline-flex',\n  // 影を使わず、1px の境界線と背景の差だけで浮かせる（Select と同じ）\n  popover: [\n    'bg-[var(--novi-color-bg)]',\n    'text-[var(--novi-color-fg)]',\n    'border border-[var(--novi-color-border)]',\n    'rounded-[var(--novi-radius-lg)]',\n    'shadow-[var(--novi-shadow-md)]',\n    'p-[var(--novi-pad-surface-y)]',\n  ].join(' '),\n  calendar: 'flex flex-col gap-[var(--novi-gap-inline)] outline-none',\n  calendarHeader: 'flex items-center justify-between gap-[var(--novi-gap-inline)]',\n  calendarTitle: 'text-[length:var(--novi-text-sm)] font-medium tabular-nums',\n  prevButton: monthButton,\n  nextButton: monthButton,\n  // 曜日の見出しと日の升目。升目は 7 列の正方形\n  calendarGrid: [\n    'border-collapse',\n    '[&_th]:size-8 [&_th]:font-normal [&_th]:text-[length:var(--novi-text-xs)] [&_th]:text-[var(--novi-color-muted)]',\n  ].join(' '),\n  calendarCell: [\n    'size-8 inline-flex items-center justify-center',\n    'text-[length:var(--novi-text-sm)] tabular-nums cursor-pointer outline-none',\n    'rounded-[var(--novi-radius-sm)]',\n    'data-[hovered]:bg-[var(--novi-color-subtle)]',\n    'data-[selected]:bg-[var(--novi-color-primary)] data-[selected]:text-[var(--novi-color-primary-fg)]',\n    'data-[focus-visible]:outline-2 data-[focus-visible]:-outline-offset-2 data-[focus-visible]:outline-[var(--novi-color-ring)]',\n    'data-[disabled]:opacity-40 data-[disabled]:cursor-default',\n    'data-[unavailable]:line-through data-[unavailable]:text-[var(--novi-color-muted)]',\n    'data-[outside-month]:invisible',\n  ].join(' '),\n  description: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]',\n  errorMessage: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]',\n} satisfies SlotMap<typeof datePickerSlots, (typeof datePickerRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { inputWrapper: string }> = {\n  solid: {\n    inputWrapper: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border-strong)]',\n  },\n  outline: { inputWrapper: 'bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]' },\n  soft: { inputWrapper: 'bg-[var(--novi-color-subtle)] border-transparent' },\n  ghost: {\n    inputWrapper: 'bg-transparent border-transparent border-b-[var(--novi-color-border-strong)]',\n  },\n  plain: { inputWrapper: 'bg-transparent border-transparent' },\n}\n\n/** 高さは Button / Input と揃える。32 / 40 / 48px */\nconst size: VariantMap<NoviSize, { inputWrapper: string; dateInput: string }> = {\n  sm: {\n    inputWrapper: 'h-8',\n    dateInput: 'px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]',\n  },\n  md: {\n    inputWrapper: 'h-10',\n    dateInput: 'px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]',\n  },\n  lg: {\n    inputWrapper: 'h-12',\n    dateInput: 'px-[var(--novi-pad-control-x-lg)] text-[length:var(--novi-text-base)]',\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 * DatePicker のスタイル定義。\n *\n * @example\n * import { datePickerStyles } from '@novi-ui/raster'\n * import { tv } from 'tailwind-variants'\n *\n * const myPicker = tv({ extend: datePickerStyles, slots: { calendarCell: 'size-9' } })\n */\nexport const datePickerStyles = tv({\n  slots,\n  variants: { variant, size, radius },\n  defaultVariants: { variant: 'outline', size: 'md', radius: 'md' },\n})\n\nexport type DatePickerStyleProps = Parameters<typeof datePickerStyles>[0]\n"],"mappings":";;;;AAaA,MAAM,cAAc;CAClB;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;CACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;CAEX,SAAS;EAEP;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,MAAM;CAEN,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,UAAU;CACV,gBAAgB;CAChB,eAAe;CACf,YAAY;CACZ,YAAY;CAEZ,cAAc,CACZ,mBACA,iHACF,CAAC,CAAC,KAAK,GAAG;CACV,cAAc;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,aAAa;CACb,cAAc;AAChB;;;;;;;;;;AA+CA,MAAa,mBAAmB,GAAG;CACjC;CACA,UAAU;EAAE;GA9CZ,OAAO,EACL,cAAc,yEAChB;GACA,SAAS,EAAE,cAAc,qEAAqE;GAC9F,MAAM,EAAE,cAAc,mDAAmD;GACzE,OAAO,EACL,cAAc,+EAChB;GACA,OAAO,EAAE,cAAc,oCAAoC;EAsC/C;EAAS;GAjCrB,IAAI;IACF,cAAc;IACd,WAAW;GACb;GACA,IAAI;IACF,cAAc;IACd,WAAW;GACb;GACA,IAAI;IACF,cAAc;IACd,WAAW;GACb;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/date-picker/index.d.mts

@@ -0,0 +1,3 @@
+import { DatePicker } from "./date-picker.mjs";
+import { DatePickerStyleProps, datePickerStyles } from "./date-picker.styles.mjs";
+export { DatePicker, type DatePickerStyleProps, datePickerStyles };

package/dist/index.d.mts

@@ -22,6 +22,12 @@ import "./checkbox/index.mjs";
 import { COLOR_OPTIONS, ColorPicker } from "./color-picker/color-picker.mjs";
 import { ColorPickerStyleProps, colorPickerStyles } from "./color-picker/color-picker.styles.mjs";
 import "./color-picker/index.mjs";
+import { ComboBox, ComboBoxItem, ComboBoxItemProps } from "./combo-box/combo-box.mjs";
+import { ComboBoxStyleProps, comboBoxStyles } from "./combo-box/combo-box.styles.mjs";
+import "./combo-box/index.mjs";
+import { DatePicker } from "./date-picker/date-picker.mjs";
+import { DatePickerStyleProps, datePickerStyles } from "./date-picker/date-picker.styles.mjs";
+import "./date-picker/index.mjs";
 import { Input } from "./input/input.mjs";
 import { InputStyleProps, inputStyles } from "./input/input.styles.mjs";
 import "./input/index.mjs";
@@ -31,6 +37,12 @@ import "./menu/index.mjs";
 import { Modal, ModalBody, ModalFooter, ModalTitle } from "./modal/modal.mjs";
 import { ModalStyleProps, modalStyles } from "./modal/modal.styles.mjs";
 import "./modal/index.mjs";
+import { NumberField } from "./number-field/number-field.mjs";
+import { NumberFieldStyleProps, numberFieldStyles } from "./number-field/number-field.styles.mjs";
+import "./number-field/index.mjs";
+import { Pagination } from "./pagination/pagination.mjs";
+import { PaginationStyleProps, paginationStyles } from "./pagination/pagination.styles.mjs";
+import "./pagination/index.mjs";
 import { Popover, PopoverContent, Tooltip } from "./popover/popover.mjs";
 import { PopoverStyleProps, TooltipStyleProps, popoverStyles, tooltipStyles } from "./popover/popover.styles.mjs";
 import "./popover/index.mjs";
@@ -52,6 +64,9 @@ import "./spinner/index.mjs";
 import { Switch } from "./switch/switch.mjs";
 import { SwitchStyleProps, switchStyles } from "./switch/switch.styles.mjs";
 import "./switch/index.mjs";
+import { Table, TableBody, TableBodyProps, TableCell, TableCellProps, TableColumn, TableColumnProps, TableHeader, TableHeaderProps, TableRow, TableRowProps } from "./table/table.mjs";
+import { TableStyleProps, tableStyles } from "./table/table.styles.mjs";
+import "./table/index.mjs";
 import { TabContent, TabItem, TabItems, Tabs } from "./tabs/tabs.mjs";
 import { TabsStyleProps, tabsStyles } from "./tabs/tabs.styles.mjs";
 import "./tabs/index.mjs";
@@ -61,4 +76,4 @@ import "./textarea/index.mjs";
 import { NoviToast, NoviToastRegion, createToastQueue } from "./toast/toast.mjs";
 import { ToastStyleProps, toastStyles } from "./toast/toast.styles.mjs";
 import "./toast/index.mjs";
-export { Accordion, AccordionItem, type AccordionItemProps, type AccordionStyleProps, Avatar, type AvatarStyleProps, Badge, type BadgeStyleProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsStyleProps, Button, type ButtonStyleProps, COLOR_OPTIONS, Card, CardBody, CardFooter, CardHeader, CardImage, type CardStyleProps, Checkbox, CheckboxGroup, type CheckboxGroupStyleProps, type CheckboxStyleProps, ColorPicker, type ColorPickerStyleProps, Input, type InputStyleProps, Menu, MenuItemComponent as MenuItem, type MenuItemProps, MenuSection, MenuSeparator, type MenuStyleProps, Modal, ModalBody, ModalFooter, type ModalStyleProps, ModalTitle, type NoviToast, NoviToastRegion, Popover, PopoverContent, type PopoverStyleProps, Progress, type ProgressStyleProps, Radio, RadioGroup, type RadioGroupStyleProps, type RadioStyleProps, Select, SelectItem, type SelectItemProps, type SelectStyleProps, Skeleton, type SkeletonStyleProps, Spinner, type SpinnerStyleProps, Switch, type SwitchStyleProps, TabContent, TabItem, TabItems, Tabs, type TabsStyleProps, TextArea, type TextareaStyleProps, type ToastStyleProps, Tooltip, type TooltipStyleProps, accordionStyles, avatarStyles, badgeStyles, breadcrumbsStyles, buttonStyles, cardStyles, checkboxGroupStyles, checkboxStyles, colorPickerStyles, createToastQueue, initialsOf, inputStyles, menuStyles, modalStyles, popoverStyles, progressStyles, radioGroupStyles, radioStyles, selectStyles, skeletonStyles, spinnerStyles, switchStyles, tabsStyles, textareaStyles, toastStyles, tooltipStyles };
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionStyleProps, Avatar, type AvatarStyleProps, Badge, type BadgeStyleProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsStyleProps, Button, type ButtonStyleProps, COLOR_OPTIONS, Card, CardBody, CardFooter, CardHeader, CardImage, type CardStyleProps, Checkbox, CheckboxGroup, type CheckboxGroupStyleProps, type CheckboxStyleProps, ColorPicker, type ColorPickerStyleProps, ComboBox, ComboBoxItem, type ComboBoxItemProps, type ComboBoxStyleProps, DatePicker, type DatePickerStyleProps, Input, type InputStyleProps, Menu, MenuItemComponent as MenuItem, type MenuItemProps, MenuSection, MenuSeparator, type MenuStyleProps, Modal, ModalBody, ModalFooter, type ModalStyleProps, ModalTitle, type NoviToast, NoviToastRegion, NumberField, type NumberFieldStyleProps, Pagination, type PaginationStyleProps, Popover, PopoverContent, type PopoverStyleProps, Progress, type ProgressStyleProps, Radio, RadioGroup, type RadioGroupStyleProps, type RadioStyleProps, Select, SelectItem, type SelectItemProps, type SelectStyleProps, Skeleton, type SkeletonStyleProps, Spinner, type SpinnerStyleProps, Switch, type SwitchStyleProps, TabContent, TabItem, TabItems, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableColumn, type TableColumnProps, TableHeader, type TableHeaderProps, TableRow, type TableRowProps, type TableStyleProps, Tabs, type TabsStyleProps, TextArea, type TextareaStyleProps, type ToastStyleProps, Tooltip, type TooltipStyleProps, accordionStyles, avatarStyles, badgeStyles, breadcrumbsStyles, buttonStyles, cardStyles, checkboxGroupStyles, checkboxStyles, colorPickerStyles, comboBoxStyles, createToastQueue, datePickerStyles, initialsOf, inputStyles, menuStyles, modalStyles, numberFieldStyles, paginationStyles, popoverStyles, progressStyles, radioGroupStyles, radioStyles, selectStyles, skeletonStyles, spinnerStyles, switchStyles, tableStyles, tabsStyles, textareaStyles, toastStyles, tooltipStyles };

package/dist/index.mjs

@@ -15,12 +15,20 @@ import { checkboxGroupStyles, checkboxStyles } from "./checkbox/checkbox.styles.
 import { Checkbox, CheckboxGroup } from "./checkbox/checkbox.mjs";
 import { colorPickerStyles } from "./color-picker/color-picker.styles.mjs";
 import { COLOR_OPTIONS, ColorPicker } from "./color-picker/color-picker.mjs";
+import { comboBoxStyles } from "./combo-box/combo-box.styles.mjs";
+import { ComboBox, ComboBoxItem } from "./combo-box/combo-box.mjs";
+import { datePickerStyles } from "./date-picker/date-picker.styles.mjs";
+import { DatePicker } from "./date-picker/date-picker.mjs";
 import { inputStyles } from "./input/input.styles.mjs";
 import { Input } from "./input/input.mjs";
 import { menuStyles } from "./menu/menu.styles.mjs";
 import { Menu, MenuItemComponent, MenuSection, MenuSeparator } from "./menu/menu.mjs";
 import { modalStyles } from "./modal/modal.styles.mjs";
 import { Modal, ModalBody, ModalFooter, ModalTitle } from "./modal/modal.mjs";
+import { numberFieldStyles } from "./number-field/number-field.styles.mjs";
+import { NumberField } from "./number-field/number-field.mjs";
+import { paginationStyles } from "./pagination/pagination.styles.mjs";
+import { Pagination } from "./pagination/pagination.mjs";
 import { popoverStyles, tooltipStyles } from "./popover/popover.styles.mjs";
 import { Popover, PopoverContent, Tooltip } from "./popover/popover.mjs";
 import { progressStyles } from "./progress/progress.styles.mjs";
@@ -35,10 +43,12 @@ import { spinnerStyles } from "./spinner/spinner.styles.mjs";
 import { Spinner } from "./spinner/spinner.mjs";
 import { switchStyles } from "./switch/switch.styles.mjs";
 import { Switch } from "./switch/switch.mjs";
+import { tableStyles } from "./table/table.styles.mjs";
+import { Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from "./table/table.mjs";
 import { tabsStyles } from "./tabs/tabs.styles.mjs";
 import { TabContent, TabItem, TabItems, Tabs } from "./tabs/tabs.mjs";
 import { textareaStyles } from "./textarea/textarea.styles.mjs";
 import { TextArea } from "./textarea/textarea.mjs";
 import { toastStyles } from "./toast/toast.styles.mjs";
 import { NoviToastRegion, createToastQueue } from "./toast/toast.mjs";
-export { Accordion, AccordionItem, Avatar, Badge, Breadcrumb, Breadcrumbs, Button, COLOR_OPTIONS, Card, CardBody, CardFooter, CardHeader, CardImage, Checkbox, CheckboxGroup, ColorPicker, Input, Menu, MenuItemComponent as MenuItem, MenuSection, MenuSeparator, Modal, ModalBody, ModalFooter, ModalTitle, NoviToastRegion, Popover, PopoverContent, Progress, Radio, RadioGroup, Select, SelectItem, Skeleton, Spinner, Switch, TabContent, TabItem, TabItems, Tabs, TextArea, Tooltip, accordionStyles, avatarStyles, badgeStyles, breadcrumbsStyles, buttonStyles, cardStyles, checkboxGroupStyles, checkboxStyles, colorPickerStyles, createToastQueue, initialsOf, inputStyles, menuStyles, modalStyles, popoverStyles, progressStyles, radioGroupStyles, radioStyles, selectStyles, skeletonStyles, spinnerStyles, switchStyles, tabsStyles, textareaStyles, toastStyles, tooltipStyles };
+export { Accordion, AccordionItem, Avatar, Badge, Breadcrumb, Breadcrumbs, Button, COLOR_OPTIONS, Card, CardBody, CardFooter, CardHeader, CardImage, Checkbox, CheckboxGroup, ColorPicker, ComboBox, ComboBoxItem, DatePicker, Input, Menu, MenuItemComponent as MenuItem, MenuSection, MenuSeparator, Modal, ModalBody, ModalFooter, ModalTitle, NoviToastRegion, NumberField, Pagination, Popover, PopoverContent, Progress, Radio, RadioGroup, Select, SelectItem, Skeleton, Spinner, Switch, TabContent, TabItem, TabItems, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow, Tabs, TextArea, Tooltip, accordionStyles, avatarStyles, badgeStyles, breadcrumbsStyles, buttonStyles, cardStyles, checkboxGroupStyles, checkboxStyles, colorPickerStyles, comboBoxStyles, createToastQueue, datePickerStyles, initialsOf, inputStyles, menuStyles, modalStyles, numberFieldStyles, paginationStyles, popoverStyles, progressStyles, radioGroupStyles, radioStyles, selectStyles, skeletonStyles, spinnerStyles, switchStyles, tableStyles, tabsStyles, textareaStyles, toastStyles, tooltipStyles };

package/dist/input/input.styles.d.mts

@@ -22,7 +22,7 @@ declare const inputStyles: import("tailwind-variants").TVReturnType<{
     inputWrapper: string;
     input: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     inputWrapper: string;
   }>;
 }, {
@@ -42,7 +42,7 @@ declare const inputStyles: import("tailwind-variants").TVReturnType<{
     inputWrapper: string;
     input: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     inputWrapper: string;
   }>;
 }, {
@@ -62,7 +62,7 @@ declare const inputStyles: import("tailwind-variants").TVReturnType<{
     inputWrapper: string;
     input: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     inputWrapper: string;
   }>;
 }, {

package/dist/menu/menu.styles.d.mts

@@ -10,12 +10,12 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
     [key: string]: import("tailwind-variants").ClassValue | {
       item?: import("tailwind-variants").ClassValue;
       trigger?: import("tailwind-variants").ClassValue;
-      popover?: import("tailwind-variants").ClassValue;
       list?: import("tailwind-variants").ClassValue;
+      separator?: import("tailwind-variants").ClassValue;
       itemLabel?: import("tailwind-variants").ClassValue;
+      popover?: import("tailwind-variants").ClassValue;
       itemDescription?: import("tailwind-variants").ClassValue;
       itemShortcut?: import("tailwind-variants").ClassValue;
-      separator?: import("tailwind-variants").ClassValue;
       section?: import("tailwind-variants").ClassValue;
       sectionLabel?: import("tailwind-variants").ClassValue;
     };
@@ -25,12 +25,12 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
     [x: string]: import("tailwind-variants").ClassValue | {
       item?: import("tailwind-variants").ClassValue;
       trigger?: import("tailwind-variants").ClassValue;
-      popover?: import("tailwind-variants").ClassValue;
       list?: import("tailwind-variants").ClassValue;
+      separator?: import("tailwind-variants").ClassValue;
       itemLabel?: import("tailwind-variants").ClassValue;
+      popover?: import("tailwind-variants").ClassValue;
       itemDescription?: import("tailwind-variants").ClassValue;
       itemShortcut?: import("tailwind-variants").ClassValue;
-      separator?: import("tailwind-variants").ClassValue;
       section?: import("tailwind-variants").ClassValue;
       sectionLabel?: import("tailwind-variants").ClassValue;
     };
@@ -51,12 +51,12 @@ declare const menuStyles: import("tailwind-variants").TVReturnType<{
     [key: string]: import("tailwind-variants").ClassValue | {
       item?: import("tailwind-variants").ClassValue;
       trigger?: import("tailwind-variants").ClassValue;
-      popover?: import("tailwind-variants").ClassValue;
       list?: import("tailwind-variants").ClassValue;
+      separator?: import("tailwind-variants").ClassValue;
       itemLabel?: import("tailwind-variants").ClassValue;
+      popover?: import("tailwind-variants").ClassValue;
       itemDescription?: import("tailwind-variants").ClassValue;
       itemShortcut?: import("tailwind-variants").ClassValue;
-      separator?: import("tailwind-variants").ClassValue;
       section?: import("tailwind-variants").ClassValue;
       sectionLabel?: import("tailwind-variants").ClassValue;
     };

package/dist/modal/modal.styles.d.mts

@@ -10,7 +10,7 @@ declare const modalStyles: import("tailwind-variants").TVReturnType<{
   size: VariantMap<"sm" | "md" | "lg" | "full", {
     panel: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     panel: string;
   }>;
 }, {
@@ -25,7 +25,7 @@ declare const modalStyles: import("tailwind-variants").TVReturnType<{
   size: VariantMap<"sm" | "md" | "lg" | "full", {
     panel: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     panel: string;
   }>;
 }, {
@@ -40,7 +40,7 @@ declare const modalStyles: import("tailwind-variants").TVReturnType<{
   size: VariantMap<"sm" | "md" | "lg" | "full", {
     panel: string;
   }>;
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     panel: string;
   }>;
 }, {

package/dist/number-field/index.d.mts

@@ -0,0 +1,3 @@
+import { NumberField } from "./number-field.mjs";
+import { NumberFieldStyleProps, numberFieldStyles } from "./number-field.styles.mjs";
+export { NumberField, type NumberFieldStyleProps, numberFieldStyles };

package/dist/number-field/number-field.d.mts

@@ -0,0 +1,15 @@
+import { NumberFieldProps } from "@novi-ui/core";
+//#region src/number-field/number-field.d.ts
+/**
+ * 数値の入力。矢印キーと増減ボタンで `step` ずつ刻む。
+ *
+ * 増減ボタンは入力欄の右に並ぶ（Tactile は左右、Flatlay は罫線のセル）。
+ * 空欄は `NaN` ではなく `null` で `onChange` に渡す（ADR-B2）。
+ *
+ * @example
+ * <NumberField label="数量" defaultValue={1} minValue={0} step={1} />
+ */
+declare function NumberField({ variant, size, radius, label, placeholder, description, errorMessage, name, value, defaultValue, onChange, minValue, maxValue, step, formatOptions, onKeyDown, isDisabled, isReadOnly, isRequired, isInvalid, className, classNames, id }: NumberFieldProps): import("react").JSX.Element;
+//#endregion
+export { NumberField };
+//# sourceMappingURL=number-field.d.mts.map