@novi-ui/flatlay 0.1.0

package/dist/card/card.mjs

@@ -0,0 +1,96 @@
+"use client";
+import { cardStyles } from "./card.styles.mjs";
+import { Button } from "react-aria-components";
+import { jsx } from "react/jsx-runtime";
+//#region src/card/card.tsx
+/**
+* Card の見出し部分。下端が罫線で仕切られる。
+*
+* @example
+* <CardHeader>売上</CardHeader>
+*/
+function CardHeader({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "header",
+		className: cardStyles().header({ class: className }),
+		children
+	});
+}
+/**
+* Card の本体。
+*
+* @example
+* <CardBody>¥1,240,000</CardBody>
+*/
+function CardBody({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "body",
+		className: cardStyles().body({ class: className }),
+		children
+	});
+}
+/**
+* Card の脚部。上端が罫線で仕切られる。
+*
+* @example
+* <CardFooter>前月比 +12%</CardFooter>
+*/
+function CardFooter({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "footer",
+		className: cardStyles().footer({ class: className }),
+		children
+	});
+}
+/**
+* Card の上部に置く画像。
+*
+* @example
+* <CardImage src="/thumb.jpg" alt="" />
+*/
+function CardImage({ className, alt = "", ...props }) {
+	return /* @__PURE__ */ jsx("img", {
+		...props,
+		alt,
+		"data-slot": "image",
+		className: cardStyles().image({ class: className })
+	});
+}
+/**
+* 情報のまとまりを囲む器。
+*
+* Flatlay では**書類の枠**。影が存在しないので、枠の罫線と区切りの罫線だけで
+* まとまりを作る。`onPress` を渡すと押せるカードになり、押下で全面が反転する。
+*
+* @example
+* <Card>
+*   <CardHeader>売上</CardHeader>
+*   <CardBody>¥1,240,000</CardBody>
+* </Card>
+*/
+function Card({ variant, radius, onPress, isDisabled, children, className, classNames, id }) {
+	const isPressable = onPress !== void 0;
+	const rootClass = cardStyles({
+		variant,
+		radius,
+		isPressable
+	}).root({ class: [className, classNames?.root] });
+	if (isPressable) return /* @__PURE__ */ jsx(Button, {
+		id,
+		onPress,
+		isDisabled,
+		"data-slot": "root",
+		className: rootClass,
+		children
+	});
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		"data-slot": "root",
+		className: rootClass,
+		children
+	});
+}
+//#endregion
+export { Card, CardBody, CardFooter, CardHeader, CardImage };
+
+//# sourceMappingURL=card.mjs.map

package/dist/card/card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.mjs","names":[],"sources":["../../src/card/card.tsx"],"sourcesContent":["'use client'\n\nimport type { CardProps } from '@novi-ui/core'\nimport type { ImgHTMLAttributes, ReactNode } from 'react'\nimport { Button } from 'react-aria-components'\nimport { cardStyles } from './card.styles'\n\ninterface PartProps {\n  children?: ReactNode\n  className?: string\n}\n\n/**\n * Card の見出し部分。下端が罫線で仕切られる。\n *\n * @example\n * <CardHeader>売上</CardHeader>\n */\nexport function CardHeader({ children, className }: PartProps) {\n  return (\n    <div data-slot=\"header\" className={cardStyles().header({ class: className })}>\n      {children}\n    </div>\n  )\n}\n\n/**\n * Card の本体。\n *\n * @example\n * <CardBody>¥1,240,000</CardBody>\n */\nexport function CardBody({ children, className }: PartProps) {\n  return (\n    <div data-slot=\"body\" className={cardStyles().body({ class: className })}>\n      {children}\n    </div>\n  )\n}\n\n/**\n * Card の脚部。上端が罫線で仕切られる。\n *\n * @example\n * <CardFooter>前月比 +12%</CardFooter>\n */\nexport function CardFooter({ children, className }: PartProps) {\n  return (\n    <div data-slot=\"footer\" className={cardStyles().footer({ class: className })}>\n      {children}\n    </div>\n  )\n}\n\n/**\n * Card の上部に置く画像。\n *\n * @example\n * <CardImage src=\"/thumb.jpg\" alt=\"\" />\n */\nexport function CardImage({ className, alt = '', ...props }: ImgHTMLAttributes<HTMLImageElement>) {\n  return (\n    <img\n      {...props}\n      alt={alt}\n      data-slot=\"image\"\n      className={cardStyles().image({ class: className })}\n    />\n  )\n}\n\n/**\n * 情報のまとまりを囲む器。\n *\n * Flatlay では**書類の枠**。影が存在しないので、枠の罫線と区切りの罫線だけで\n * まとまりを作る。`onPress` を渡すと押せるカードになり、押下で全面が反転する。\n *\n * @example\n * <Card>\n *   <CardHeader>売上</CardHeader>\n *   <CardBody>¥1,240,000</CardBody>\n * </Card>\n */\nexport function Card({\n  variant,\n  radius,\n  onPress,\n  isDisabled,\n  children,\n  className,\n  classNames,\n  id,\n}: CardProps) {\n  const isPressable = onPress !== undefined\n  const s = cardStyles({ variant, radius, isPressable })\n  const rootClass = s.root({ class: [className, classNames?.root] })\n\n  if (isPressable) {\n    return (\n      <Button\n        id={id}\n        onPress={onPress}\n        isDisabled={isDisabled}\n        data-slot=\"root\"\n        className={rootClass}\n      >\n        {children}\n      </Button>\n    )\n  }\n\n  return (\n    <div id={id} data-slot=\"root\" className={rootClass}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AAkBA,SAAgB,WAAW,EAAE,UAAU,aAAwB;CAC7D,OACE,oBAAC,OAAD;EAAK,aAAU;EAAS,WAAW,WAAW,CAAC,CAAC,OAAO,EAAE,OAAO,UAAU,CAAC;EACxE;CACE,CAAA;AAET;;;;;;;AAQA,SAAgB,SAAS,EAAE,UAAU,aAAwB;CAC3D,OACE,oBAAC,OAAD;EAAK,aAAU;EAAO,WAAW,WAAW,CAAC,CAAC,KAAK,EAAE,OAAO,UAAU,CAAC;EACpE;CACE,CAAA;AAET;;;;;;;AAQA,SAAgB,WAAW,EAAE,UAAU,aAAwB;CAC7D,OACE,oBAAC,OAAD;EAAK,aAAU;EAAS,WAAW,WAAW,CAAC,CAAC,OAAO,EAAE,OAAO,UAAU,CAAC;EACxE;CACE,CAAA;AAET;;;;;;;AAQA,SAAgB,UAAU,EAAE,WAAW,MAAM,IAAI,GAAG,SAA8C;CAChG,OACE,oBAAC,OAAD;EACE,GAAI;EACC;EACL,aAAU;EACV,WAAW,WAAW,CAAC,CAAC,MAAM,EAAE,OAAO,UAAU,CAAC;CACnD,CAAA;AAEL;;;;;;;;;;;;;AAcA,SAAgB,KAAK,EACnB,SACA,QACA,SACA,YACA,UACA,WACA,YACA,MACY;CACZ,MAAM,cAAc,YAAY,KAAA;CAEhC,MAAM,YADI,WAAW;EAAE;EAAS;EAAQ;CAAY,CAClC,CAAC,CAAC,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;CAEjE,IAAI,aACF,OACE,oBAAC,QAAD;EACM;EACK;EACG;EACZ,aAAU;EACV,WAAW;EAEV;CACK,CAAA;CAIZ,OACE,oBAAC,OAAD;EAAS;EAAI,aAAU;EAAO,WAAW;EACtC;CACE,CAAA;AAET"}

package/dist/card/card.styles.d.mts

@@ -0,0 +1,73 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/card/card.styles.d.ts
+/**
+ * Card のスタイル定義。
+ *
+ * 押せるカードも押下は反転する（ADR-F3）。面積が大きいぶん声も大きいが、
+ * 沈む・浮くが使えない以上ここだけ別の語彙にはできない。100ms で戻る。
+ *
+ * @example
+ * const myCard = tv({ extend: cardStyles, slots: { body: 'p-6' } })
+ */
+declare const cardStyles: import("tailwind-variants").TVReturnType<{
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    root: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+  isPressable: {
+    true: {
+      root: string;
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  header: string;
+  body: string;
+  footer: string;
+  image: string;
+}, undefined, {
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    root: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+  isPressable: {
+    true: {
+      root: string;
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  header: string;
+  body: string;
+  footer: string;
+  image: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  variant: VariantMap<"solid" | "outline" | "soft" | "ghost" | "plain", {
+    root: string;
+  }>;
+  radius: VariantMap<"sm" | "md" | "lg" | "none" | "full", {
+    root: string;
+  }>;
+  isPressable: {
+    true: {
+      root: string;
+    };
+    false: {};
+  };
+}, {
+  root: string;
+  header: string;
+  body: string;
+  footer: string;
+  image: string;
+}>>;
+type CardStyleProps = Parameters<typeof cardStyles>[0];
+//#endregion
+export { CardStyleProps, cardStyles };
+//# sourceMappingURL=card.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.styles.d.mts","names":[],"sources":["../../src/card/card.styles.ts"],"mappings":";;;;;;;;;;;cA0Da,wCAAU;;IAzBwB;;;IAQF;;;;;;;;;;;;;;;;IARE;;;IAQF;;;;;;;;;;;;;;;;IARE;;;IAQF;;;;;;;;;;;;;;;KAyCjC,iBAAiB,kBAAkB"}

package/dist/card/card.styles.mjs

@@ -0,0 +1,72 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { tv } from "tailwind-variants";
+//#region src/card/card.styles.ts
+/**
+* Flatlay の Card は**書類の枠**。両テーマも影は使わないが、こちらは
+* 「影を使わない」ではなく「影が存在しない」ので、枠と区切りが唯一の表現になる。
+*
+* `surface` が `bg` と同値（浮く面の概念が無い）ため、地の色で面を持ち上げることも
+* できない。header / footer を仕切るのも背景ではなく罫線1本。
+*/
+const slots = {
+	root: [
+		"text-[var(--novi-color-fg)]",
+		"flex flex-col",
+		"border",
+		"rounded-[var(--novi-radius-sm)]",
+		"overflow-hidden"
+	].join(" "),
+	header: "px-3 py-2 border-b border-[var(--novi-color-border)]",
+	body: "px-3 py-3 flex-1",
+	footer: "px-3 py-2 border-t border-[var(--novi-color-border)]",
+	image: "w-full object-cover"
+};
+/**
+* Card のスタイル定義。
+*
+* 押せるカードも押下は反転する（ADR-F3）。面積が大きいぶん声も大きいが、
+* 沈む・浮くが使えない以上ここだけ別の語彙にはできない。100ms で戻る。
+*
+* @example
+* const myCard = tv({ extend: cardStyles, slots: { body: 'p-6' } })
+*/
+const cardStyles = tv({
+	slots,
+	variants: {
+		variant: {
+			solid: { root: "bg-[var(--novi-color-subtle)] border-[var(--novi-color-border-strong)]" },
+			outline: { root: "bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]" },
+			soft: { root: "bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)]" },
+			ghost: { root: "bg-transparent border-transparent" },
+			plain: { root: "bg-transparent border-transparent" }
+		},
+		radius: {
+			none: { root: "rounded-[var(--novi-radius-none)]" },
+			sm: { root: "rounded-[var(--novi-radius-sm)]" },
+			md: { root: "rounded-[var(--novi-radius-md)]" },
+			lg: { root: "rounded-[var(--novi-radius-lg)]" },
+			full: { root: "rounded-[var(--novi-radius-full)]" }
+		},
+		isPressable: {
+			true: { root: [
+				"text-left cursor-pointer",
+				"hover:border-[var(--novi-color-border-strong)]",
+				"data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]",
+				"transition-[background-color,border-color,color]",
+				"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+				focusRing,
+				disabledState
+			].join(" ") },
+			false: {}
+		}
+	},
+	defaultVariants: {
+		variant: "outline",
+		radius: "sm",
+		isPressable: false
+	}
+});
+//#endregion
+export { cardStyles };
+
+//# sourceMappingURL=card.styles.mjs.map

package/dist/card/card.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.styles.mjs","names":[],"sources":["../../src/card/card.styles.ts"],"sourcesContent":["import type {\n  cardRequiredSlots,\n  cardSlots,\n  NoviRadius,\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/**\n * Flatlay の Card は**書類の枠**。両テーマも影は使わないが、こちらは\n * 「影を使わない」ではなく「影が存在しない」ので、枠と区切りが唯一の表現になる。\n *\n * `surface` が `bg` と同値（浮く面の概念が無い）ため、地の色で面を持ち上げることも\n * できない。header / footer を仕切るのも背景ではなく罫線1本。\n */\nconst slots = {\n  root: [\n    'text-[var(--novi-color-fg)]',\n    'flex flex-col',\n    'border',\n    'rounded-[var(--novi-radius-sm)]',\n    'overflow-hidden',\n  ].join(' '),\n  // header と footer は罫線で仕切る。地の色を変えて面を増やさない\n  header: 'px-3 py-2 border-b border-[var(--novi-color-border)]',\n  body: 'px-3 py-3 flex-1',\n  footer: 'px-3 py-2 border-t border-[var(--novi-color-border)]',\n  image: 'w-full object-cover',\n} satisfies SlotMap<typeof cardSlots, (typeof cardRequiredSlots)[number]>\n\nconst variant: VariantMap<NoviVariant, { root: string }> = {\n  solid: { root: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border-strong)]' },\n  outline: { root: 'bg-[var(--novi-color-bg)] border-[var(--novi-color-border-strong)]' },\n  soft: { root: 'bg-[var(--novi-color-subtle)] border-[var(--novi-color-border)]' },\n  ghost: { root: 'bg-transparent border-transparent' },\n  plain: { root: 'bg-transparent border-transparent' },\n}\n\nconst radius: VariantMap<NoviRadius, { root: string }> = {\n  none: { root: 'rounded-[var(--novi-radius-none)]' },\n  sm: { root: 'rounded-[var(--novi-radius-sm)]' },\n  md: { root: 'rounded-[var(--novi-radius-md)]' },\n  lg: { root: 'rounded-[var(--novi-radius-lg)]' },\n  full: { root: 'rounded-[var(--novi-radius-full)]' },\n}\n\n/**\n * Card のスタイル定義。\n *\n * 押せるカードも押下は反転する（ADR-F3）。面積が大きいぶん声も大きいが、\n * 沈む・浮くが使えない以上ここだけ別の語彙にはできない。100ms で戻る。\n *\n * @example\n * const myCard = tv({ extend: cardStyles, slots: { body: 'p-6' } })\n */\nexport const cardStyles = tv({\n  slots,\n  variants: {\n    variant,\n    radius,\n    isPressable: {\n      true: {\n        root: [\n          'text-left cursor-pointer',\n          'hover:border-[var(--novi-color-border-strong)]',\n          'data-[pressed]:bg-[var(--novi-color-fg)] data-[pressed]:text-[var(--novi-color-bg)]',\n          'transition-[background-color,border-color,color]',\n          'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n          focusRing,\n          disabledState,\n        ].join(' '),\n      },\n      false: {},\n    },\n  },\n  // 書類の角。Raster の lg（12px）に対して 2px\n  defaultVariants: { variant: 'outline', radius: 'sm', isPressable: false },\n})\n\nexport type CardStyleProps = Parameters<typeof cardStyles>[0]\n"],"mappings":";;;;;;;;;;AAkBA,MAAM,QAAQ;CACZ,MAAM;EACJ;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,OAAO;AACT;;;;;;;;;;AA2BA,MAAa,aAAa,GAAG;CAC3B;CACA,UAAU;EACR;GA3BF,OAAO,EAAE,MAAM,yEAAyE;GACxF,SAAS,EAAE,MAAM,qEAAqE;GACtF,MAAM,EAAE,MAAM,kEAAkE;GAChF,OAAO,EAAE,MAAM,oCAAoC;GACnD,OAAO,EAAE,MAAM,oCAAoC;EAuBjD;EACA;GApBF,MAAM,EAAE,MAAM,oCAAoC;GAClD,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,IAAI,EAAE,MAAM,kCAAkC;GAC9C,MAAM,EAAE,MAAM,oCAAoC;EAgBhD;EACA,aAAa;GACX,MAAM,EACJ,MAAM;IACJ;IACA;IACA;IACA;IACA;IACA;IACA;GACF,CAAC,CAAC,KAAK,GAAG,EACZ;GACA,OAAO,CAAC;EACV;CACF;CAEA,iBAAiB;EAAE,SAAS;EAAW,QAAQ;EAAM,aAAa;CAAM;AAC1E,CAAC"}

package/dist/card/index.d.mts

@@ -0,0 +1,3 @@
+import { Card, CardBody, CardFooter, CardHeader, CardImage } from "./card.mjs";
+import { CardStyleProps, cardStyles } from "./card.styles.mjs";
+export { Card, CardBody, CardFooter, CardHeader, CardImage, type CardStyleProps, cardStyles };

package/dist/checkbox/checkbox.d.mts

@@ -0,0 +1,27 @@
+import { CheckboxGroupProps, CheckboxProps } from "@novi-ui/core";
+//#region src/checkbox/checkbox.d.ts
+/**
+ * チェックボックス。**2px 角の箱に等幅の印を入れる**。
+ *
+ * 印が図形ではなく文字なのは、帳票の記号が書くものだから（ADR-F7）。
+ * 選ぶと箱が塗り潰され、印が地色で立つ。
+ *
+ * @example
+ * <Checkbox isSelected={agreed} onChange={setAgreed}>
+ *   利用規約に同意する
+ * </Checkbox>
+ */
+declare function Checkbox({ size, color, value, isSelected, defaultSelected, onChange, isIndeterminate, isDisabled, isReadOnly, isRequired, isInvalid, description, children, className, classNames, id }: CheckboxProps): import("react").JSX.Element;
+/**
+ * チェックボックスのグループ。ラベルとエラーをまとめて扱う。
+ *
+ * @example
+ * <CheckboxGroup label="通知方法" value={ways} onChange={setWays}>
+ *   <Checkbox value="email">メール</Checkbox>
+ *   <Checkbox value="sms">SMS</Checkbox>
+ * </CheckboxGroup>
+ */
+declare function CheckboxGroup({ label, description, errorMessage, name, value, defaultValue, onChange, orientation, isDisabled, isReadOnly, isRequired, isInvalid, children, className, classNames, id }: CheckboxGroupProps): import("react").JSX.Element;
+//#endregion
+export { Checkbox, CheckboxGroup };
+//# sourceMappingURL=checkbox.d.mts.map

package/dist/checkbox/checkbox.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.d.mts","names":[],"sources":["../../src/checkbox/checkbox.tsx"],"mappings":";;;;;;;;;;;;;iBAuBgB,WACd,MACA,OACA,OACA,YACA,iBACA,UACA,iBACA,YACA,YACA,YACA,WACA,aACA,UACA,WACA,YACA,MACC,gCAAa,IAAA;;;;;;;;;;iBAgEA,gBACd,OACA,aACA,cACA,MACA,OACA,cACA,UACA,aACA,YACA,YACA,YACA,WACA,UACA,WACA,YACA,MACC,qCAAkB,IAAA"}

package/dist/checkbox/checkbox.mjs

@@ -0,0 +1,109 @@
+"use client";
+import { checkboxGroupStyles, checkboxStyles } from "./checkbox.styles.mjs";
+import { Checkbox, CheckboxGroup, FieldError, Label, Text } from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/checkbox/checkbox.tsx
+/**
+* チェックボックス。**2px 角の箱に等幅の印を入れる**。
+*
+* 印が図形ではなく文字なのは、帳票の記号が書くものだから（ADR-F7）。
+* 選ぶと箱が塗り潰され、印が地色で立つ。
+*
+* @example
+* <Checkbox isSelected={agreed} onChange={setAgreed}>
+*   利用規約に同意する
+* </Checkbox>
+*/
+function Checkbox$1({ size, color, value, isSelected, defaultSelected, onChange, isIndeterminate, isDisabled, isReadOnly, isRequired, isInvalid, description, children, className, classNames, id }) {
+	const s = checkboxStyles({
+		size,
+		color
+	});
+	return /* @__PURE__ */ jsx(Checkbox, {
+		id,
+		value,
+		isSelected,
+		defaultSelected,
+		onChange,
+		isIndeterminate,
+		isDisabled,
+		isReadOnly,
+		isRequired,
+		isInvalid,
+		"data-slot": "root",
+		className: `group ${s.root({ class: [className, classNames?.root] })}`,
+		children: ({ isSelected: selected, isIndeterminate: indeterminate }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "control",
+			className: s.control({ class: classNames?.control }),
+			children: (selected || indeterminate) && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "indicator",
+				className: s.indicator({ class: classNames?.indicator }),
+				children: indeterminate ? "−" : "✓"
+			})
+		}), children !== void 0 && /* @__PURE__ */ jsxs("span", {
+			className: "flex flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				"data-slot": "label",
+				className: s.label({ class: classNames?.label }),
+				children
+			}), description !== void 0 && /* @__PURE__ */ jsx("span", {
+				"data-slot": "description",
+				className: s.description({ class: classNames?.description }),
+				children: description
+			})]
+		})] })
+	});
+}
+/**
+* チェックボックスのグループ。ラベルとエラーをまとめて扱う。
+*
+* @example
+* <CheckboxGroup label="通知方法" value={ways} onChange={setWays}>
+*   <Checkbox value="email">メール</Checkbox>
+*   <Checkbox value="sms">SMS</Checkbox>
+* </CheckboxGroup>
+*/
+function CheckboxGroup$1({ label, description, errorMessage, name, value, defaultValue, onChange, orientation, isDisabled, isReadOnly, isRequired, isInvalid, children, className, classNames, id }) {
+	const s = checkboxGroupStyles({ orientation });
+	return /* @__PURE__ */ jsxs(CheckboxGroup, {
+		id,
+		name,
+		value,
+		defaultValue,
+		onChange,
+		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__ */ jsx("div", {
+				"data-slot": "list",
+				className: s.list({ class: classNames?.list }),
+				children
+			}),
+			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 { Checkbox$1 as Checkbox, CheckboxGroup$1 as CheckboxGroup };
+
+//# sourceMappingURL=checkbox.mjs.map

package/dist/checkbox/checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.mjs","names":["Checkbox","RACCheckbox","CheckboxGroup","RACCheckboxGroup"],"sources":["../../src/checkbox/checkbox.tsx"],"sourcesContent":["'use client'\n\nimport type { CheckboxGroupProps, CheckboxProps } from '@novi-ui/core'\nimport {\n  FieldError,\n  Label,\n  Checkbox as RACCheckbox,\n  CheckboxGroup as RACCheckboxGroup,\n  Text,\n} from 'react-aria-components'\nimport { checkboxGroupStyles, checkboxStyles } from './checkbox.styles'\n\n/**\n * チェックボックス。**2px 角の箱に等幅の印を入れる**。\n *\n * 印が図形ではなく文字なのは、帳票の記号が書くものだから（ADR-F7）。\n * 選ぶと箱が塗り潰され、印が地色で立つ。\n *\n * @example\n * <Checkbox isSelected={agreed} onChange={setAgreed}>\n *   利用規約に同意する\n * </Checkbox>\n */\nexport function Checkbox({\n  size,\n  color,\n  value,\n  isSelected,\n  defaultSelected,\n  onChange,\n  isIndeterminate,\n  isDisabled,\n  isReadOnly,\n  isRequired,\n  isInvalid,\n  description,\n  children,\n  className,\n  classNames,\n  id,\n}: CheckboxProps) {\n  const s = checkboxStyles({ size, color })\n\n  return (\n    <RACCheckbox\n      id={id}\n      value={value}\n      isSelected={isSelected}\n      defaultSelected={defaultSelected}\n      onChange={onChange}\n      isIndeterminate={isIndeterminate}\n      isDisabled={isDisabled}\n      isReadOnly={isReadOnly}\n      isRequired={isRequired}\n      isInvalid={isInvalid}\n      data-slot=\"root\"\n      // control 側から選択状態を参照するために group を付ける\n      className={`group ${s.root({ class: [className, classNames?.root] })}`}\n    >\n      {({ isSelected: selected, isIndeterminate: indeterminate }) => (\n        <>\n          <span data-slot=\"control\" className={s.control({ class: classNames?.control })}>\n            {(selected || indeterminate) && (\n              <span\n                aria-hidden=\"true\"\n                data-slot=\"indicator\"\n                className={s.indicator({ class: classNames?.indicator })}\n              >\n                {/* 一部だけ選ばれている状態は「まだ書き切っていない」ので横線 */}\n                {indeterminate ? '−' : '✓'}\n              </span>\n            )}\n          </span>\n\n          {children !== undefined && (\n            <span className=\"flex flex-col gap-0.5\">\n              <span data-slot=\"label\" className={s.label({ class: classNames?.label })}>\n                {children}\n              </span>\n              {description !== undefined && (\n                <span\n                  data-slot=\"description\"\n                  className={s.description({ class: classNames?.description })}\n                >\n                  {description}\n                </span>\n              )}\n            </span>\n          )}\n        </>\n      )}\n    </RACCheckbox>\n  )\n}\n\n/**\n * チェックボックスのグループ。ラベルとエラーをまとめて扱う。\n *\n * @example\n * <CheckboxGroup label=\"通知方法\" value={ways} onChange={setWays}>\n *   <Checkbox value=\"email\">メール</Checkbox>\n *   <Checkbox value=\"sms\">SMS</Checkbox>\n * </CheckboxGroup>\n */\nexport function CheckboxGroup({\n  label,\n  description,\n  errorMessage,\n  name,\n  value,\n  defaultValue,\n  onChange,\n  orientation,\n  isDisabled,\n  isReadOnly,\n  isRequired,\n  isInvalid,\n  children,\n  className,\n  classNames,\n  id,\n}: CheckboxGroupProps) {\n  const s = checkboxGroupStyles({ orientation })\n\n  return (\n    <RACCheckboxGroup\n      id={id}\n      name={name}\n      value={value}\n      defaultValue={defaultValue}\n      onChange={onChange}\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      <div data-slot=\"list\" className={s.list({ class: classNames?.list })}>\n        {children}\n      </div>\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    </RACCheckboxGroup>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAuBA,SAAgBA,WAAS,EACvB,MACA,OACA,OACA,YACA,iBACA,UACA,iBACA,YACA,YACA,YACA,WACA,aACA,UACA,WACA,YACA,MACgB;CAChB,MAAM,IAAI,eAAe;EAAE;EAAM;CAAM,CAAC;CAExC,OACE,oBAACC,UAAD;EACM;EACG;EACK;EACK;EACP;EACO;EACL;EACA;EACA;EACD;EACX,aAAU;EAEV,WAAW,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAEjE,WAAA,EAAE,YAAY,UAAU,iBAAiB,oBACzC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;GAAM,aAAU;GAAU,WAAW,EAAE,QAAQ,EAAE,OAAO,YAAY,QAAQ,CAAC;GACzE,WAAA,YAAY,kBACZ,oBAAC,QAAD;IACE,eAAY;IACZ,aAAU;IACV,WAAW,EAAE,UAAU,EAAE,OAAO,YAAY,UAAU,CAAC;IAGtD,UAAA,gBAAgB,MAAM;GACnB,CAAA;EAEJ,CAAA,GAEL,aAAa,KAAA,KACZ,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CACE,oBAAC,QAAD;IAAM,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACpE;GACG,CAAA,GACL,gBAAgB,KAAA,KACf,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,EAAE,YAAY,EAAE,OAAO,YAAY,YAAY,CAAC;IAE1D,UAAA;GACG,CAAA,CAEJ;EAER,CAAA,CAAA,EAAA,CAAA;CAEO,CAAA;AAEjB;;;;;;;;;;AAWA,SAAgBC,gBAAc,EAC5B,OACA,aACA,cACA,MACA,OACA,cACA,UACA,aACA,YACA,YACA,YACA,WACA,UACA,WACA,YACA,MACqB;CACrB,MAAM,IAAI,oBAAoB,EAAE,YAAY,CAAC;CAE7C,OACE,qBAACC,eAAD;EACM;EACE;EACC;EACO;EACJ;EACE;EACA;EACA;EACD;EACX,aAAU;EACV,WAAW,EAAE,KAAK,EAAE,OAAO,CAAC,WAAW,YAAY,IAAI,EAAE,CAAC;EAX5D,UAAA;GAaG,UAAU,KAAA,KACT,oBAAC,OAAD;IAAO,aAAU;IAAQ,WAAW,EAAE,MAAM,EAAE,OAAO,YAAY,MAAM,CAAC;IACrE,UAAA;GACI,CAAA;GAGT,oBAAC,OAAD;IAAK,aAAU;IAAO,WAAW,EAAE,KAAK,EAAE,OAAO,YAAY,KAAK,CAAC;IAChE;GACE,CAAA;GAEJ,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;EACI;;AAEtB"}

package/dist/checkbox/checkbox.styles.d.mts

@@ -0,0 +1,114 @@
+import { VariantMap } from "@novi-ui/core";
+//#region src/checkbox/checkbox.styles.d.ts
+/**
+ * Checkbox のスタイル定義。
+ *
+ * @example
+ * import { checkboxStyles } from '@novi-ui/flatlay'
+ * import { tv } from 'tailwind-variants'
+ *
+ * const myCheckbox = tv({ extend: checkboxStyles, slots: { label: 'font-medium' } })
+ */
+declare const checkboxStyles: import("tailwind-variants").TVReturnType<{
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    control: string;
+    indicator: string;
+    label: string;
+  }>;
+}, {
+  root: string;
+  control: string;
+  indicator: string;
+  label: string;
+  description: string;
+}, undefined, {
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    control: string;
+    indicator: string;
+    label: string;
+  }>;
+}, {
+  root: string;
+  control: string;
+  indicator: string;
+  label: string;
+  description: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  color: VariantMap<"default" | "primary" | "secondary" | "success" | "warning" | "danger", {
+    root: string;
+  }>;
+  size: VariantMap<"sm" | "md" | "lg", {
+    control: string;
+    indicator: string;
+    label: string;
+  }>;
+}, {
+  root: string;
+  control: string;
+  indicator: string;
+  label: string;
+  description: string;
+}>>;
+/**
+ * CheckboxGroup のスタイル定義。
+ *
+ * @example
+ * const myGroup = tv({ extend: checkboxGroupStyles, slots: { list: 'gap-4' } })
+ */
+declare const checkboxGroupStyles: import("tailwind-variants").TVReturnType<{
+  orientation: {
+    vertical: {
+      list: string;
+    };
+    horizontal: {
+      list: string;
+    };
+  };
+}, {
+  root: string;
+  label: string;
+  list: string;
+  description: string;
+  errorMessage: string;
+}, undefined, {
+  orientation: {
+    vertical: {
+      list: string;
+    };
+    horizontal: {
+      list: string;
+    };
+  };
+}, {
+  root: string;
+  label: string;
+  list: string;
+  description: string;
+  errorMessage: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  orientation: {
+    vertical: {
+      list: string;
+    };
+    horizontal: {
+      list: string;
+    };
+  };
+}, {
+  root: string;
+  label: string;
+  list: string;
+  description: string;
+  errorMessage: string;
+}>>;
+type CheckboxStyleProps = Parameters<typeof checkboxStyles>[0];
+type CheckboxGroupStyleProps = Parameters<typeof checkboxGroupStyles>[0];
+//#endregion
+export { CheckboxGroupStyleProps, CheckboxStyleProps, checkboxGroupStyles, checkboxStyles };
+//# sourceMappingURL=checkbox.styles.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.styles.d.mts","names":[],"sources":["../../src/checkbox/checkbox.styles.ts"],"mappings":";;;;;;;;;;;cA0Fa,4CAAc;;IA1CgB;;;IAeC;IAAmB;IAAe;;;;;;;;;;IAfnC;;;IAeC;IAAmB;IAAe;;;;;;;;;;IAfnC;;;IAeC;IAAmB;IAAe;;;;;;;;;;;;;;;cAgDjE,iDAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAWpB,qBAAqB,kBAAkB;KACvC,0BAA0B,kBAAkB"}

package/dist/checkbox/checkbox.styles.mjs

@@ -0,0 +1,105 @@
+import { disabledState, focusRing } from "../styles/focus-ring.mjs";
+import { mono } from "../styles/mono.mjs";
+import { tv } from "tailwind-variants";
+//#region src/checkbox/checkbox.styles.ts
+/**
+* Flatlay の Checkbox は**用紙の記入欄**。2px 角の箱に印を入れる。
+*
+* 印が SVG ではなく文字（`✓` / `−`）なのは ADR-F7 の運用。帳票の記号は
+* 書くものであって描くものではないので、等幅の字として出す。線幅を持つ図形を
+* 足すと、罫線だけで階層を作っているこのテーマの中で唯一の「絵」になってしまう。
+*
+* 選ぶと箱が塗り潰されて印が地色で立つ。押下の反転（ADR-F3）と同じ形だが、
+* こちらは**状態として残る**。押した瞬間との差は持続するかどうかだけで、
+* 語彙をひとつに保つほうが手応えが読める。
+*/
+const slots = {
+	root: [
+		"inline-flex items-start gap-2",
+		"cursor-pointer",
+		disabledState
+	].join(" "),
+	control: [
+		"shrink-0 inline-grid place-items-center",
+		"border border-[var(--novi-color-border-strong)]",
+		"rounded-[var(--novi-radius-sm)]",
+		"bg-[var(--novi-color-bg)]",
+		"group-data-[selected]:bg-[var(--c)] group-data-[selected]:border-[var(--c)]",
+		"group-data-[indeterminate]:bg-[var(--c)] group-data-[indeterminate]:border-[var(--c)]",
+		"group-data-[invalid]:border-[var(--novi-color-danger)]",
+		"transition-[background-color,border-color]",
+		"duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]",
+		focusRing
+	].join(" "),
+	indicator: `text-[var(--c-fg)] leading-none pointer-events-none ${mono}`,
+	label: "text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]",
+	description: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`
+};
+/**
+* Checkbox のスタイル定義。
+*
+* @example
+* import { checkboxStyles } from '@novi-ui/flatlay'
+* import { tv } from 'tailwind-variants'
+*
+* const myCheckbox = tv({ extend: checkboxStyles, slots: { label: 'font-medium' } })
+*/
+const checkboxStyles = tv({
+	slots,
+	variants: {
+		color: {
+			default: { root: "[--c:var(--novi-color-fg)] [--c-fg:var(--novi-color-bg)]" },
+			primary: { root: "[--c:var(--novi-color-primary)] [--c-fg:var(--novi-color-primary-fg)]" },
+			secondary: { root: "[--c:var(--novi-color-secondary)] [--c-fg:var(--novi-color-secondary-fg)]" },
+			success: { root: "[--c:var(--novi-color-success)] [--c-fg:var(--novi-color-success-fg)]" },
+			warning: { root: "[--c:var(--novi-color-warning)] [--c-fg:var(--novi-color-warning-fg)]" },
+			danger: { root: "[--c:var(--novi-color-danger)] [--c-fg:var(--novi-color-danger-fg)]" }
+		},
+		size: {
+			sm: {
+				control: "size-3.5",
+				indicator: "text-[length:var(--novi-text-xs)]",
+				label: "text-[length:var(--novi-text-sm)]"
+			},
+			md: {
+				control: "size-4",
+				indicator: "text-[length:var(--novi-text-sm)]",
+				label: "text-[length:var(--novi-text-base)]"
+			},
+			lg: {
+				control: "size-5",
+				indicator: "text-[length:var(--novi-text-base)]",
+				label: "text-[length:var(--novi-text-base)]"
+			}
+		}
+	},
+	defaultVariants: {
+		color: "default",
+		size: "md"
+	}
+});
+const groupSlots = {
+	root: "flex flex-col gap-2",
+	label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,
+	list: "flex flex-col gap-2",
+	description: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`,
+	errorMessage: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)] ${mono}`
+};
+/**
+* CheckboxGroup のスタイル定義。
+*
+* @example
+* const myGroup = tv({ extend: checkboxGroupStyles, slots: { list: 'gap-4' } })
+*/
+const checkboxGroupStyles = tv({
+	slots: groupSlots,
+	variants: { orientation: {
+		vertical: { list: "flex-col gap-2" },
+		horizontal: { list: "flex-row gap-4 flex-wrap" }
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+//#endregion
+export { checkboxGroupStyles, checkboxStyles };
+
+//# sourceMappingURL=checkbox.styles.mjs.map

package/dist/checkbox/checkbox.styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.styles.mjs","names":[],"sources":["../../src/checkbox/checkbox.styles.ts"],"sourcesContent":["import type {\n  checkboxGroupRequiredSlots,\n  checkboxGroupSlots,\n  checkboxRequiredSlots,\n  checkboxSlots,\n  NoviColor,\n  NoviSize,\n  SlotMap,\n  VariantMap,\n} from '@novi-ui/core'\nimport { tv } from 'tailwind-variants'\nimport { disabledState, focusRing } from '../styles/focus-ring'\nimport { mono } from '../styles/mono'\n\n/**\n * Flatlay の Checkbox は**用紙の記入欄**。2px 角の箱に印を入れる。\n *\n * 印が SVG ではなく文字（`✓` / `−`）なのは ADR-F7 の運用。帳票の記号は\n * 書くものであって描くものではないので、等幅の字として出す。線幅を持つ図形を\n * 足すと、罫線だけで階層を作っているこのテーマの中で唯一の「絵」になってしまう。\n *\n * 選ぶと箱が塗り潰されて印が地色で立つ。押下の反転（ADR-F3）と同じ形だが、\n * こちらは**状態として残る**。押した瞬間との差は持続するかどうかだけで、\n * 語彙をひとつに保つほうが手応えが読める。\n */\nconst slots = {\n  root: ['inline-flex items-start gap-2', 'cursor-pointer', disabledState].join(' '),\n  // 円にしない。書類のチェック欄は必ず角のある箱で、丸は Radio の担当\n  control: [\n    'shrink-0 inline-grid place-items-center',\n    'border border-[var(--novi-color-border-strong)]',\n    'rounded-[var(--novi-radius-sm)]',\n    'bg-[var(--novi-color-bg)]',\n    'group-data-[selected]:bg-[var(--c)] group-data-[selected]:border-[var(--c)]',\n    'group-data-[indeterminate]:bg-[var(--c)] group-data-[indeterminate]:border-[var(--c)]',\n    'group-data-[invalid]:border-[var(--novi-color-danger)]',\n    'transition-[background-color,border-color]',\n    'duration-[var(--novi-duration-fast)] ease-[var(--novi-ease-standard)]',\n    focusRing,\n  ].join(' '),\n  // 印は箱いっぱいに置かない。`leading-none` で字の行送りを殺して中央に据える\n  indicator: `text-[var(--c-fg)] leading-none pointer-events-none ${mono}`,\n  // 選択肢の文言は読ませる文なので等幅にしない（項目名は group 側の label）\n  label: 'text-[var(--novi-color-fg)] leading-[var(--novi-leading-body)]',\n  description: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`,\n} satisfies SlotMap<typeof checkboxSlots, (typeof checkboxRequiredSlots)[number]>\n\n/** 塗り潰す色と、その上に立つ印の色。両テーマと同じローカル変数の型。 */\nconst color: VariantMap<NoviColor, { root: string }> = {\n  default: { root: '[--c:var(--novi-color-fg)] [--c-fg:var(--novi-color-bg)]' },\n  primary: { root: '[--c:var(--novi-color-primary)] [--c-fg:var(--novi-color-primary-fg)]' },\n  secondary: { root: '[--c:var(--novi-color-secondary)] [--c-fg:var(--novi-color-secondary-fg)]' },\n  success: { root: '[--c:var(--novi-color-success)] [--c-fg:var(--novi-color-success-fg)]' },\n  warning: { root: '[--c:var(--novi-color-warning)] [--c-fg:var(--novi-color-warning-fg)]' },\n  danger: { root: '[--c:var(--novi-color-danger)] [--c-fg:var(--novi-color-danger-fg)]' },\n}\n\n/**\n * 14 / 16 / 20px。両テーマ（16/20/24・20/24/28）より一段小さい。\n *\n * 帳票の行が 28 / 32 / 40px なので、箱が行の高さの半分ほどに収まる。\n * 指の下限には合わせない（Flatlay の前提はポインタとキーボード）。\n */\nconst size: VariantMap<NoviSize, { control: string; indicator: string; label: string }> = {\n  sm: {\n    control: 'size-3.5',\n    indicator: 'text-[length:var(--novi-text-xs)]',\n    label: 'text-[length:var(--novi-text-sm)]',\n  },\n  md: {\n    control: 'size-4',\n    indicator: 'text-[length:var(--novi-text-sm)]',\n    label: 'text-[length:var(--novi-text-base)]',\n  },\n  lg: {\n    control: 'size-5',\n    indicator: 'text-[length:var(--novi-text-base)]',\n    label: 'text-[length:var(--novi-text-base)]',\n  },\n}\n\n/**\n * Checkbox のスタイル定義。\n *\n * @example\n * import { checkboxStyles } from '@novi-ui/flatlay'\n * import { tv } from 'tailwind-variants'\n *\n * const myCheckbox = tv({ extend: checkboxStyles, slots: { label: 'font-medium' } })\n */\nexport const checkboxStyles = tv({\n  slots,\n  variants: { color, size },\n  defaultVariants: { color: 'default', size: 'md' },\n})\n\nconst groupSlots = {\n  root: 'flex flex-col gap-2',\n  // こちらは項目名なので等幅（Input の label と同じ扱い・ADR-F7）\n  label: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-fg)] ${mono}`,\n  list: 'flex flex-col gap-2',\n  description: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-muted)] ${mono}`,\n  errorMessage: `text-[length:var(--novi-text-sm)] text-[var(--novi-color-danger)] ${mono}`,\n} satisfies SlotMap<typeof checkboxGroupSlots, (typeof checkboxGroupRequiredSlots)[number]>\n\n/**\n * CheckboxGroup のスタイル定義。\n *\n * @example\n * const myGroup = tv({ extend: checkboxGroupStyles, slots: { list: 'gap-4' } })\n */\nexport const checkboxGroupStyles = tv({\n  slots: groupSlots,\n  variants: {\n    orientation: {\n      vertical: { list: 'flex-col gap-2' },\n      horizontal: { list: 'flex-row gap-4 flex-wrap' },\n    },\n  },\n  defaultVariants: { orientation: 'vertical' },\n})\n\nexport type CheckboxStyleProps = Parameters<typeof checkboxStyles>[0]\nexport type CheckboxGroupStyleProps = Parameters<typeof checkboxGroupStyles>[0]\n"],"mappings":";;;;;;;;;;;;;;;AAyBA,MAAM,QAAQ;CACZ,MAAM;EAAC;EAAiC;EAAkB;CAAa,CAAC,CAAC,KAAK,GAAG;CAEjF,SAAS;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,WAAW,uDAAuD;CAElE,OAAO;CACP,aAAa,oEAAoE;AACnF;;;;;;;;;;AA6CA,MAAa,iBAAiB,GAAG;CAC/B;CACA,UAAU;EAAE;GA3CZ,SAAS,EAAE,MAAM,2DAA2D;GAC5E,SAAS,EAAE,MAAM,wEAAwE;GACzF,WAAW,EAAE,MAAM,4EAA4E;GAC/F,SAAS,EAAE,MAAM,wEAAwE;GACzF,SAAS,EAAE,MAAM,wEAAwE;GACzF,QAAQ,EAAE,MAAM,sEAAsE;EAsC1E;EAAO;GA5BnB,IAAI;IACF,SAAS;IACT,WAAW;IACX,OAAO;GACT;GACA,IAAI;IACF,SAAS;IACT,WAAW;IACX,OAAO;GACT;GACA,IAAI;IACF,SAAS;IACT,WAAW;IACX,OAAO;GACT;EAcmB;CAAK;CACxB,iBAAiB;EAAE,OAAO;EAAW,MAAM;CAAK;AAClD,CAAC;AAED,MAAM,aAAa;CACjB,MAAM;CAEN,OAAO,iEAAiE;CACxE,MAAM;CACN,aAAa,oEAAoE;CACjF,cAAc,qEAAqE;AACrF;;;;;;;AAQA,MAAa,sBAAsB,GAAG;CACpC,OAAO;CACP,UAAU,EACR,aAAa;EACX,UAAU,EAAE,MAAM,iBAAiB;EACnC,YAAY,EAAE,MAAM,2BAA2B;CACjD,EACF;CACA,iBAAiB,EAAE,aAAa,WAAW;AAC7C,CAAC"}