@novi-ui/raster 0.5.0 → 0.7.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.d.mts","names":[],"sources":["../../src/number-field/number-field.tsx"],"mappings":";;;;;;;;;;;iBAwCgB,cACd,SACA,MACA,QACA,OACA,aACA,aACA,cACA,MACA,OACA,cACA,UACA,UACA,UACA,MACA,eACA,WACA,YACA,YACA,YACA,WACA,WACA,YACA,MACC,mCAAgB,IAAA"}

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

@@ -0,0 +1,114 @@
+"use client";
+import { numberFieldStyles } from "./number-field.styles.mjs";
+import { Button, FieldError, Group, Input, Label, NumberField, Text } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useImeSafeKeys } from "@novi-ui/core/client";
+//#region src/number-field/number-field.tsx
+function MinusIcon() {
+	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: "M4 8h8",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		})
+	});
+}
+function PlusIcon() {
+	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: "M8 4v8M4 8h8",
+			stroke: "currentColor",
+			strokeWidth: "1.5"
+		})
+	});
+}
+/**
+* 数値の入力。矢印キーと増減ボタンで `step` ずつ刻む。
+*
+* 増減ボタンは入力欄の右に並ぶ（Tactile は左右、Flatlay は罫線のセル）。
+* 空欄は `NaN` ではなく `null` で `onChange` に渡す（ADR-B2）。
+*
+* @example
+* <NumberField label="数量" defaultValue={1} minValue={0} step={1} />
+*/
+function NumberField$1({ variant, size, radius, label, placeholder, description, errorMessage, name, value, defaultValue, onChange, minValue, maxValue, step, formatOptions, onKeyDown, isDisabled, isReadOnly, isRequired, isInvalid, className, classNames, id }) {
+	const s = numberFieldStyles({
+		variant,
+		size,
+		radius
+	});
+	const keyProps = useImeSafeKeys(onKeyDown);
+	return /* @__PURE__ */ jsxs(NumberField, {
+		id,
+		name,
+		value: value === null ? NaN : value,
+		defaultValue,
+		onChange: (next) => onChange?.(Number.isNaN(next) ? null : next),
+		minValue,
+		maxValue,
+		step,
+		formatOptions,
+		isDisabled,
+		isReadOnly,
+		isRequired,
+		isInvalid,
+		"data-slot": "root",
+		className: 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(Input, {
+						"data-slot": "input",
+						placeholder,
+						className: s.input({ class: classNames?.input }),
+						...keyProps
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						slot: "decrement",
+						"data-slot": "decrement",
+						className: s.decrement({ class: classNames?.decrement }),
+						children: /* @__PURE__ */ jsx(MinusIcon, {})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						slot: "increment",
+						"data-slot": "increment",
+						className: s.increment({ class: classNames?.increment }),
+						children: /* @__PURE__ */ jsx(PlusIcon, {})
+					})
+				]
+			}),
+			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
+			})
+		]
+	});
+}
+//#endregion
+export { NumberField$1 as NumberField };
+
+//# sourceMappingURL=number-field.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.mjs","names":["NumberField","RACNumberField"],"sources":["../../src/number-field/number-field.tsx"],"sourcesContent":["'use client'\n\nimport type { NumberFieldProps } from '@novi-ui/core'\nimport { useImeSafeKeys } from '@novi-ui/core/client'\nimport {\n  Button,\n  FieldError,\n  Group,\n  Input,\n  Label,\n  NumberField as RACNumberField,\n  Text,\n} from 'react-aria-components'\nimport { numberFieldStyles } from './number-field.styles'\n\nfunction MinusIcon() {\n  return (\n    <svg viewBox=\"0 0 16 16\" width=\"0.75em\" height=\"0.75em\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M4 8h8\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n    </svg>\n  )\n}\n\nfunction PlusIcon() {\n  return (\n    <svg viewBox=\"0 0 16 16\" width=\"0.75em\" height=\"0.75em\" fill=\"none\" aria-hidden=\"true\">\n      <path d=\"M8 4v8M4 8h8\" stroke=\"currentColor\" strokeWidth=\"1.5\" />\n    </svg>\n  )\n}\n\n/**\n * 数値の入力。矢印キーと増減ボタンで `step` ずつ刻む。\n *\n * 増減ボタンは入力欄の右に並ぶ（Tactile は左右、Flatlay は罫線のセル）。\n * 空欄は `NaN` ではなく `null` で `onChange` に渡す（ADR-B2）。\n *\n * @example\n * <NumberField label=\"数量\" defaultValue={1} minValue={0} step={1} />\n */\nexport function NumberField({\n  variant,\n  size,\n  radius,\n  label,\n  placeholder,\n  description,\n  errorMessage,\n  name,\n  value,\n  defaultValue,\n  onChange,\n  minValue,\n  maxValue,\n  step,\n  formatOptions,\n  onKeyDown,\n  isDisabled,\n  isReadOnly,\n  isRequired,\n  isInvalid,\n  className,\n  classNames,\n  id,\n}: NumberFieldProps) {\n  const s = numberFieldStyles({ variant, size, radius })\n  const keyProps = useImeSafeKeys<HTMLInputElement>(onKeyDown)\n\n  return (\n    <RACNumberField\n      id={id}\n      name={name}\n      // RAC は空欄を NaN で表す。外には出さない（ADR-B2）\n      value={value === null ? Number.NaN : value}\n      defaultValue={defaultValue}\n      onChange={(next) => onChange?.(Number.isNaN(next) ? null : next)}\n      minValue={minValue}\n      maxValue={maxValue}\n      step={step}\n      formatOptions={formatOptions}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isRequired={isRequired}\n      isInvalid={isInvalid}\n      data-slot=\"root\"\n      className={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        <Input\n          data-slot=\"input\"\n          placeholder={placeholder}\n          className={s.input({ class: classNames?.input })}\n          {...keyProps}\n        />\n        <Button\n          slot=\"decrement\"\n          data-slot=\"decrement\"\n          className={s.decrement({ class: classNames?.decrement })}\n        >\n          <MinusIcon />\n        </Button>\n        <Button\n          slot=\"increment\"\n          data-slot=\"increment\"\n          className={s.increment({ class: classNames?.increment })}\n        >\n          <PlusIcon />\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    </RACNumberField>\n  )\n}\n"],"mappings":";;;;;;AAeA,SAAS,YAAY;CACnB,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAY,OAAM;EAAS,QAAO;EAAS,MAAK;EAAO,eAAY;EAC9E,UAAA,oBAAC,QAAD;GAAM,GAAE;GAAS,QAAO;GAAe,aAAY;EAAO,CAAA;CACvD,CAAA;AAET;AAEA,SAAS,WAAW;CAClB,OACE,oBAAC,OAAD;EAAK,SAAQ;EAAY,OAAM;EAAS,QAAO;EAAS,MAAK;EAAO,eAAY;EAC9E,UAAA,oBAAC,QAAD;GAAM,GAAE;GAAe,QAAO;GAAe,aAAY;EAAO,CAAA;CAC7D,CAAA;AAET;;;;;;;;;;AAWA,SAAgBA,cAAY,EAC1B,SACA,MACA,QACA,OACA,aACA,aACA,cACA,MACA,OACA,cACA,UACA,UACA,UACA,MACA,eACA,WACA,YACA,YACA,YACA,WACA,WACA,YACA,MACmB;CACnB,MAAM,IAAI,kBAAkB;EAAE;EAAS;EAAM;CAAO,CAAC;CACrD,MAAM,WAAW,eAAiC,SAAS;CAE3D,OACE,qBAACC,aAAD;EACM;EACE;EAEN,OAAO,UAAU,OAAO,MAAa;EACvB;EACd,WAAW,SAAS,WAAW,OAAO,MAAM,IAAI,IAAI,OAAO,IAAI;EACrD;EACA;EACJ;EACS;EACH;EACA;EACA;EACD;EACX,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAhB5D,UAAA;GAkBG,UAAU,KAAA,KACT,oBAAC,OAAD;IAAO,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACrE,UAAA;GACI,CAAA;GAGT,qBAAC,OAAD;IACE,aAAU;IACV,WAAW,EAAE,aAAa,EAAE,OAAO,YAAY,aAAa,CAAC;IAF/D,UAAA;KAIE,oBAAC,OAAD;MACE,aAAU;MACG;MACb,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;MAC/C,GAAI;KACL,CAAA;KACD,oBAAC,QAAD;MACE,MAAK;MACL,aAAU;MACV,WAAW,EAAE,UAAU,EAAE,OAAO,YAAY,UAAU,CAAC;MAEvD,UAAA,oBAAC,WAAD,CAAY,CAAA;KACN,CAAA;KACR,oBAAC,QAAD;MACE,MAAK;MACL,aAAU;MACV,WAAW,EAAE,UAAU,EAAE,OAAO,YAAY,UAAU,CAAC;MAEvD,UAAA,oBAAC,UAAD,CAAW,CAAA;KACL,CAAA;IACH;;GAEN,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;EACE;;AAEpB"}

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

@@ -0,0 +1,76 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/number-field/number-field.styles.d.ts
+/**
+ * NumberField のスタイル定義。
+ *
+ * @example
+ * import { numberFieldStyles } from '@novi-ui/raster'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myField = tv({ extend: numberFieldStyles, slots: { input: 'text-right' } })
+ */
+declare const numberFieldStyles: import("tailwind-variants").TVReturnType<{
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    inputWrapper: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    inputWrapper: string;
+    input: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  inputWrapper: string;
+  input: string;
+  decrement: string;
+  increment: string;
+  description: string;
+  errorMessage: string;
+}, undefined, {
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    inputWrapper: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    inputWrapper: string;
+    input: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  inputWrapper: string;
+  input: string;
+  decrement: string;
+  increment: 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;
+    input: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    inputWrapper: string;
+  }>;
+}, {
+  root: string;
+  label: string;
+  inputWrapper: string;
+  input: string;
+  decrement: string;
+  increment: string;
+  description: string;
+  errorMessage: string;
+}>>;
+type NumberFieldStyleProps = Parameters<typeof numberFieldStyles>[0];
+//#endregion
+export { NumberFieldStyleProps, numberFieldStyles };
+//# sourceMappingURL=number-field.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.styles.d.mts","names":[],"sources":["../../src/number-field/number-field.styles.ts"],"mappings":";;;;;;;;;;;cAiGa,+CAAiB;;IA7CyB;;;IAaN;IAAe;;;IAeX;;;;;;;;;;;;;IA5BE;;;IAaN;IAAe;;;IAeX;;;;;;;;;;;;;IA5BE;;;IAaN;IAAe;;;IAeX;;;;;;;;;;;;KAuBzC,wBAAwB,kBAAkB"}

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

@@ -0,0 +1,90 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/number-field/number-field.styles.ts
+/** 増減ボタン。1px の縦線で区切るだけで、面は持たない（Raster の規律）。 */
+const stepper = [
+	"shrink-0 self-stretch inline-flex items-center justify-center w-7",
+	"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(" ");
+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(" "),
+	input: [
+		"w-full min-w-0 bg-transparent outline-none",
+		"text-[var(--novi-color-fg)] tabular-nums",
+		"placeholder:text-[var(--novi-color-muted)]"
+	].join(" "),
+	decrement: stepper,
+	increment: stepper,
+	description: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-muted)]",
+	errorMessage: "text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]"
+};
+/**
+* NumberField のスタイル定義。
+*
+* @example
+* import { numberFieldStyles } from '@novi-ui/raster'
+* import { tv } from 'tailwind-variants'
+*
+* const myField = tv({ extend: numberFieldStyles, slots: { input: 'text-right' } })
+*/
+const numberFieldStyles = 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",
+				input: "px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]"
+			},
+			md: {
+				inputWrapper: "h-10",
+				input: "px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]"
+			},
+			lg: {
+				inputWrapper: "h-12",
+				input: "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 { 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/** 増減ボタン。1px の縦線で区切るだけで、面は持たない（Raster の規律）。 */\nconst stepper = [\n  'shrink-0 self-stretch inline-flex items-center justify-center w-7',\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\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-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  input: [\n    'w-full min-w-0 bg-transparent outline-none',\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-xs)] text-[var(--novi-color-muted)]',\n  // 色だけに頼らずテキストを必ず伴う（WCAG 1.4.1）\n  errorMessage: 'text-[length:var(--novi-text-xs)] text-[var(--novi-color-danger)]',\n} satisfies SlotMap<typeof numberFieldSlots, (typeof numberFieldRequiredSlots)[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; input: string }> = {\n  sm: {\n    inputWrapper: 'h-8',\n    input: 'px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-sm)]',\n  },\n  md: {\n    inputWrapper: 'h-10',\n    input: 'px-[var(--novi-pad-control-x-md)] text-[length:var(--novi-text-base)]',\n  },\n  lg: {\n    inputWrapper: 'h-12',\n    input: '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 * NumberField のスタイル定義。\n *\n * @example\n * import { numberFieldStyles } from '@novi-ui/raster'\n * import { tv } from 'tailwind-variants'\n *\n * const myField = tv({ extend: numberFieldStyles, slots: { input: 'text-right' } })\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":";;;;AAaA,MAAM,UAAU;CACd;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;CACF,CAAC,CAAC,KAAK,GAAG;CACV,OAAO;EACL;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CACV,WAAW;CACX,WAAW;CACX,aAAa;CAEb,cAAc;AAChB;;;;;;;;;;AA+CA,MAAa,oBAAoB,GAAG;CAClC;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,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,13 @@
+import { PaginationProps } from "@novi-ui/core";
+//#region src/pagination/pagination.d.ts
+/**
+ * 一覧のページを移動する。数字だけを並べ、現在地は下辺の線で示す
+ * （Tactile は面を塗り、Flatlay は罫線で区切った枠を反転させる）。
+ *
+ * @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":";;;;;;;;;iBAwBgB,aACd,MACA,QACA,OACA,MACA,aACA,UACA,cACA,eACA,0BACc,WACd,WACA,YACA,MACC,kCAAe,IAAA"}

package/dist/pagination/pagination.mjs

@@ -0,0 +1,97 @@
+"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: "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 は罫線で区切った枠を反転させる）。
+*
+* @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=\"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 * （Tactile は面を塗り、Flatlay は罫線で区切った枠を反転させる）。\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;EAAS,QAAO;EAAS,MAAK;EAAO,eAAY;EAC9E,UAAA,oBAAC,QAAD;GAAM,GAHA,cAAc,SAAS,mBAAmB;GAGpC,QAAO;GAAe,aAAY;EAAO,CAAA;CAClD,CAAA;AAET;;;;;;;;AASA,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/raster'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myPagination = tv({ extend: paginationStyles, slots: { list: 'gap-2' } })
+ */
+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":";;;;;;;;;;;cAgGa,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,95 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/pagination/pagination.styles.ts
+/**
+* ページ番号と前後のボタンに共通の面。**数字だけを並べ、面を持たない。**
+* 現在地は下辺の 1px の線で示す（塗らない。Raster は線と余白で階層を作る）。
+*/
+const cell = [
+	"inline-flex items-center justify-center",
+	"text-[var(--novi-color-fg)] tabular-nums",
+	"border-b border-transparent",
+	"outline-none",
+	"hover:bg-[var(--novi-color-subtle)]",
+	"aria-[current=page]:font-medium aria-[current=page]:border-[var(--novi-color-fg)]",
+	"transition-[background-color,border-color]",
+	"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+	focusRing,
+	disabledState
+].join(" ");
+/**
+* Pagination のスタイル定義。
+*
+* @example
+* import { paginationStyles } from '@novi-ui/raster'
+* import { tv } from 'tailwind-variants'
+*
+* const myPagination = tv({ extend: paginationStyles, slots: { list: 'gap-2' } })
+*/
+const paginationStyles = tv({
+	slots: {
+		root: "inline-flex",
+		list: "flex items-center gap-1 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-8 min-w-8 px-1.5 text-[length:var(--novi-text-sm)]",
+				prev: "h-8 min-w-8 px-1.5 text-[length:var(--novi-text-sm)]",
+				next: "h-8 min-w-8 px-1.5 text-[length:var(--novi-text-sm)]",
+				ellipsis: "h-8 min-w-8 text-[length:var(--novi-text-sm)]"
+			},
+			md: {
+				item: "h-10 min-w-10 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-base)]",
+				prev: "h-10 min-w-10 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-base)]",
+				next: "h-10 min-w-10 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-base)]",
+				ellipsis: "h-10 min-w-10 text-[length:var(--novi-text-base)]"
+			},
+			lg: {
+				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)]"
+			}
+		},
+		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 * 現在地は下辺の 1px の線で示す（塗らない。Raster は線と余白で階層を作る）。\n */\nconst cell = [\n  'inline-flex items-center justify-center',\n  'text-[var(--novi-color-fg)] tabular-nums',\n  'border-b border-transparent',\n  'outline-none',\n  'hover:bg-[var(--novi-color-subtle)]',\n  'aria-[current=page]:font-medium aria-[current=page]:border-[var(--novi-color-fg)]',\n  'transition-[background-color,border-color]',\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 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 と揃える。32 / 40 / 48px。幅は最小で正方形 */\nconst size: VariantMap<NoviSize, { item: string; prev: string; next: string; ellipsis: string }> = {\n  sm: {\n    item: 'h-8 min-w-8 px-1.5 text-[length:var(--novi-text-sm)]',\n    prev: 'h-8 min-w-8 px-1.5 text-[length:var(--novi-text-sm)]',\n    next: 'h-8 min-w-8 px-1.5 text-[length:var(--novi-text-sm)]',\n    ellipsis: 'h-8 min-w-8 text-[length:var(--novi-text-sm)]',\n  },\n  md: {\n    item: 'h-10 min-w-10 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-base)]',\n    prev: 'h-10 min-w-10 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-base)]',\n    next: 'h-10 min-w-10 px-[var(--novi-pad-control-x-sm)] text-[length:var(--novi-text-base)]',\n    ellipsis: 'h-10 min-w-10 text-[length:var(--novi-text-base)]',\n  },\n  lg: {\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}\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/raster'\n * import { tv } from 'tailwind-variants'\n *\n * const myPagination = tv({ extend: paginationStyles, slots: { list: 'gap-2' } })\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":";;;;;;;AAeA,MAAM,OAAO;CACX;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

@@ -7,7 +7,7 @@ import { VariantMap } from "@novi-ui/core";
  * const myPopover = tv({ extend: popoverStyles, slots: { content: 'p-6' } })
  */
 declare const popoverStyles: import("tailwind-variants").TVReturnType<{
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
 }, {
@@ -15,7 +15,7 @@ declare const popoverStyles: import("tailwind-variants").TVReturnType<{
   arrow: string;
   content: string;
 }, undefined, {
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
 }, {
@@ -23,7 +23,7 @@ declare const popoverStyles: import("tailwind-variants").TVReturnType<{
   arrow: string;
   content: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
-  radius: VariantMap<"none" | "sm" | "md" | "lg" | "full", {
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
     root: string;
   }>;
 }, {