@psnext/design-system 1.0.0 → 1.2.0

package/dist/primitives/Empty/index.cjs

@@ -0,0 +1,84 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_cn = require("../../cn.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let class_variance_authority = require("class-variance-authority");
+//#region src/primitives/Empty/Empty.tsx
+const emptyVariants = (0, class_variance_authority.cva)("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg p-6 text-center text-balance md:p-12", {
+	variants: { variant: {
+		default: "",
+		outline: "border",
+		background: "bg-muted",
+		"outline-dashed": "border border-dashed"
+	} },
+	defaultVariants: { variant: "default" }
+});
+/** Centered empty-state container; compose Header/Media/Title/Description/Content inside it. */
+function Empty({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "empty",
+		"data-variant": variant,
+		className: require_cn.cn(emptyVariants({ variant }), className),
+		...props
+	});
+}
+/** Groups the media, title, and description with centered alignment. */
+function EmptyHeader({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "empty-header",
+		className: require_cn.cn("flex max-w-sm flex-col items-center gap-2 text-center", className),
+		...props
+	});
+}
+const emptyMediaVariants = (0, class_variance_authority.cva)("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6"
+	} },
+	defaultVariants: { variant: "default" }
+});
+/** Holds the leading illustration or icon above the title. */
+function EmptyMedia({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "empty-icon",
+		"data-variant": variant,
+		className: require_cn.cn(emptyMediaVariants({
+			variant,
+			className
+		})),
+		...props
+	});
+}
+/** The primary heading line of the empty state. */
+function EmptyTitle({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "empty-title",
+		className: require_cn.cn("text-lg font-medium tracking-tight", className),
+		...props
+	});
+}
+/** Muted supporting copy explaining the empty state. */
+function EmptyDescription({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "empty-description",
+		className: require_cn.cn("text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		...props
+	});
+}
+/** Slot for actions or follow-up content below the header. */
+function EmptyContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "empty-content",
+		className: require_cn.cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance", className),
+		...props
+	});
+}
+//#endregion
+exports.Empty = Empty;
+exports.EmptyContent = EmptyContent;
+exports.EmptyDescription = EmptyDescription;
+exports.EmptyHeader = EmptyHeader;
+exports.EmptyMedia = EmptyMedia;
+exports.EmptyTitle = EmptyTitle;
+exports.emptyVariants = emptyVariants;
+
+//# sourceMappingURL=index.cjs.map

package/dist/primitives/Empty/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Empty/Empty.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\nconst emptyVariants = cva(\n  \"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg p-6 text-center text-balance md:p-12\",\n  {\n    variants: {\n      // Container chrome — matches the Figma \"Empty\" variant axis.\n      variant: {\n        default: \"\",\n        outline: \"border\",\n        background: \"bg-muted\",\n        \"outline-dashed\": \"border border-dashed\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\n/** Centered empty-state container; compose Header/Media/Title/Description/Content inside it. */\nfunction Empty({\n  className,\n  /** Container chrome: plain, bordered, muted background, or dashed border. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyVariants>) {\n  return (\n    <div\n      data-slot=\"empty\"\n      data-variant={variant}\n      className={cn(emptyVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Groups the media, title, and description with centered alignment. */\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2 text-center\", className)}\n      {...props}\n    />\n  );\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\n/** Holds the leading illustration or icon above the title. */\nfunction EmptyMedia({\n  className,\n  /** Visual treatment: bare media or a rounded muted icon badge. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\n/** The primary heading line of the empty state. */\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-lg font-medium tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted supporting copy explaining the empty state. */\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Slot for actions or follow-up content below the header. */\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n  emptyVariants,\n};\n"],"mappings":";;;;;AAKA,MAAM,iBAAA,GAAA,yBAAA,KACJ,kHACA;CACE,UAAU,EAER,SAAS;EACP,SAAS;EACT,SAAS;EACT,YAAY;EACZ,kBAAkB;CACpB,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;;AAGA,SAAS,MAAM,EACb,WAEA,UAAU,WACV,GAAG,SACgE;CACnE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAWA,WAAAA,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,sBAAA,GAAA,yBAAA,KACJ,+FACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;;AAGA,SAAS,WAAW,EAClB,WAEA,UAAU,WACV,GAAG,SACqE;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAWA,WAAAA,GAAG,mBAAmB;GAAE;GAAS;EAAU,CAAC,CAAC;EACxD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAoC;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,2GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,WAAWA,WAAAA,GACT,iFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Empty/index.d.cts

@@ -0,0 +1,2 @@
+import { a as EmptyMedia, i as EmptyHeader, n as EmptyContent, o as EmptyTitle, r as EmptyDescription, s as emptyVariants, t as Empty } from "../../index24.cjs";
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, emptyVariants };

package/dist/primitives/Empty/index.d.ts

@@ -0,0 +1,2 @@
+import { a as EmptyMedia, i as EmptyHeader, n as EmptyContent, o as EmptyTitle, r as EmptyDescription, s as emptyVariants, t as Empty } from "../../index24.js";
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, emptyVariants };

package/dist/primitives/Empty/index.js

@@ -0,0 +1,77 @@
+import { t as cn } from "../../cn.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/primitives/Empty/Empty.tsx
+const emptyVariants = cva("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg p-6 text-center text-balance md:p-12", {
+	variants: { variant: {
+		default: "",
+		outline: "border",
+		background: "bg-muted",
+		"outline-dashed": "border border-dashed"
+	} },
+	defaultVariants: { variant: "default" }
+});
+/** Centered empty-state container; compose Header/Media/Title/Description/Content inside it. */
+function Empty({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty",
+		"data-variant": variant,
+		className: cn(emptyVariants({ variant }), className),
+		...props
+	});
+}
+/** Groups the media, title, and description with centered alignment. */
+function EmptyHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-header",
+		className: cn("flex max-w-sm flex-col items-center gap-2 text-center", className),
+		...props
+	});
+}
+const emptyMediaVariants = cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6"
+	} },
+	defaultVariants: { variant: "default" }
+});
+/** Holds the leading illustration or icon above the title. */
+function EmptyMedia({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-icon",
+		"data-variant": variant,
+		className: cn(emptyMediaVariants({
+			variant,
+			className
+		})),
+		...props
+	});
+}
+/** The primary heading line of the empty state. */
+function EmptyTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-title",
+		className: cn("text-lg font-medium tracking-tight", className),
+		...props
+	});
+}
+/** Muted supporting copy explaining the empty state. */
+function EmptyDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-description",
+		className: cn("text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		...props
+	});
+}
+/** Slot for actions or follow-up content below the header. */
+function EmptyContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-content",
+		className: cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance", className),
+		...props
+	});
+}
+//#endregion
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, emptyVariants };
+
+//# sourceMappingURL=index.js.map

package/dist/primitives/Empty/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Empty/Empty.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\nconst emptyVariants = cva(\n  \"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg p-6 text-center text-balance md:p-12\",\n  {\n    variants: {\n      // Container chrome — matches the Figma \"Empty\" variant axis.\n      variant: {\n        default: \"\",\n        outline: \"border\",\n        background: \"bg-muted\",\n        \"outline-dashed\": \"border border-dashed\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\n/** Centered empty-state container; compose Header/Media/Title/Description/Content inside it. */\nfunction Empty({\n  className,\n  /** Container chrome: plain, bordered, muted background, or dashed border. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyVariants>) {\n  return (\n    <div\n      data-slot=\"empty\"\n      data-variant={variant}\n      className={cn(emptyVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Groups the media, title, and description with centered alignment. */\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\"flex max-w-sm flex-col items-center gap-2 text-center\", className)}\n      {...props}\n    />\n  );\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\n/** Holds the leading illustration or icon above the title. */\nfunction EmptyMedia({\n  className,\n  /** Visual treatment: bare media or a rounded muted icon badge. */\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  );\n}\n\n/** The primary heading line of the empty state. */\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-lg font-medium tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Muted supporting copy explaining the empty state. */\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Slot for actions or follow-up content below the header. */\nfunction EmptyContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n  emptyVariants,\n};\n"],"mappings":";;;;AAKA,MAAM,gBAAgB,IACpB,kHACA;CACE,UAAU,EAER,SAAS;EACP,SAAS;EACT,SAAS;EACT,YAAY;EACZ,kBAAkB;CACpB,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;;AAGA,SAAS,MAAM,EACb,WAEA,UAAU,WACV,GAAG,SACgE;CACnE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,qBAAqB,IACzB,+FACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;;AAGA,SAAS,WAAW,EAClB,WAEA,UAAU,WACV,GAAG,SACqE;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,mBAAmB;GAAE;GAAS;EAAU,CAAC,CAAC;EACxD,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAoC;CAC5E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,2GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,iFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Field/index.cjs

@@ -0,0 +1,139 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_cn = require("../../cn.cjs");
+const require_primitives_Separator_index = require("../Separator/index.cjs");
+const require_primitives_Label_index = require("../Label/index.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let class_variance_authority = require("class-variance-authority");
+//#region src/primitives/Field/Field.tsx
+/** A `<fieldset>` wrapper that groups related fields with consistent spacing. */
+function FieldSet({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("fieldset", {
+		"data-slot": "field-set",
+		className: require_cn.cn("flex flex-col gap-6", "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className),
+		...props
+	});
+}
+/** The caption for a `FieldSet`, rendered as a `<legend>`. */
+function FieldLegend({ className, variant = "legend", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("legend", {
+		"data-slot": "field-legend",
+		"data-variant": variant,
+		className: require_cn.cn("mb-3 font-medium", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", className),
+		...props
+	});
+}
+/** A container that stacks multiple `Field`s with group-level spacing and a responsive container. */
+function FieldGroup({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "field-group",
+		className: require_cn.cn("group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4", className),
+		...props
+	});
+}
+const fieldVariants = (0, class_variance_authority.cva)("group/field flex w-full gap-3 data-[invalid=true]:text-destructive", {
+	variants: { orientation: {
+		vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+		horizontal: [
+			"flex-row items-center",
+			"[&>[data-slot=field-label]]:flex-auto",
+			"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+		],
+		responsive: [
+			"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+			"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+			"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+		]
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+/** A single labelled form field that lays out a control with its label, description, and error. */
+function Field({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "group",
+		"data-slot": "field",
+		"data-orientation": orientation,
+		className: require_cn.cn(fieldVariants({ orientation }), className),
+		...props
+	});
+}
+/** Stacks a label and description next to a control (used in horizontal checkbox/radio fields). */
+function FieldContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "field-content",
+		className: require_cn.cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className),
+		...props
+	});
+}
+/** The accessible label for a field's control; wraps the `Label` primitive. */
+function FieldLabel({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Label_index.Label, {
+		"data-slot": "field-label",
+		className: require_cn.cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4", "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10", className),
+		...props
+	});
+}
+/** A non-`<label>` title for a field group, styled like a label but not bound to a control. */
+function FieldTitle({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "field-label",
+		className: require_cn.cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50", className),
+		...props
+	});
+}
+/** Muted helper text shown beneath (or beside) a field's control. */
+function FieldDescription({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		"data-slot": "field-description",
+		className: require_cn.cn("text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance", "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		...props
+	});
+}
+/** A horizontal divider between groups of fields, optionally with centered label content. */
+function FieldSeparator({ children, className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "field-separator",
+		"data-content": !!children,
+		className: require_cn.cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
+		...props,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Separator_index.Separator, { className: "absolute inset-0 top-1/2" }), children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
+			"data-slot": "field-separator-content",
+			children
+		})]
+	});
+}
+/** A destructive `role="alert"` message for a field, rendered from `children` or a list of `errors`. */
+function FieldError({ className, children, errors, ...props }) {
+	const content = (0, react.useMemo)(() => {
+		if (children) return children;
+		if (!errors?.length) return null;
+		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+		if (uniqueErrors?.length === 1) return uniqueErrors[0]?.message;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			className: "ml-4 flex list-disc flex-col gap-1",
+			children: uniqueErrors.map((error, index) => error?.message && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", { children: error.message }, index))
+		});
+	}, [children, errors]);
+	if (!content) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		role: "alert",
+		"data-slot": "field-error",
+		className: require_cn.cn("text-sm font-normal text-destructive", className),
+		...props,
+		children: content
+	});
+}
+//#endregion
+exports.Field = Field;
+exports.FieldContent = FieldContent;
+exports.FieldDescription = FieldDescription;
+exports.FieldError = FieldError;
+exports.FieldGroup = FieldGroup;
+exports.FieldLabel = FieldLabel;
+exports.FieldLegend = FieldLegend;
+exports.FieldSeparator = FieldSeparator;
+exports.FieldSet = FieldSet;
+exports.FieldTitle = FieldTitle;
+
+//# sourceMappingURL=index.cjs.map

package/dist/primitives/Field/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn","Label","Separator"],"sources":["../../../src/primitives/Field/Field.tsx"],"sourcesContent":["\"use client\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { useMemo } from \"react\";\nimport type * as React from \"react\";\n\nimport { Label } from \"@/primitives/Label\";\nimport { Separator } from \"@/primitives/Separator\";\nimport { cn } from \"@/utils\";\n\n/** A `<fieldset>` wrapper that groups related fields with consistent spacing. */\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6\",\n        \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The caption for a `FieldSet`, rendered as a `<legend>`. */\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & {\n  /** Visual scale of the legend: section header (`legend`) or smaller label-sized (`label`). */\n  variant?: \"legend\" | \"label\";\n}) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium\",\n        \"data-[variant=legend]:text-base\",\n        \"data-[variant=label]:text-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A container that stacks multiple `Field`s with group-level spacing and a responsive container. */\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst fieldVariants = cva(\"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\", {\n  variants: {\n    orientation: {\n      vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\n      horizontal: [\n        \"flex-row items-center\",\n        \"[&>[data-slot=field-label]]:flex-auto\",\n        \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n      responsive: [\n        \"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto\",\n        \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\n        \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n});\n\n/** A single labelled form field that lays out a control with its label, description, and error. */\nfunction Field({\n  className,\n  /** Layout direction of the label/control: stacked (`vertical`), side-by-side (`horizontal`), or `responsive`. */\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Stacks a label and description next to a control (used in horizontal checkbox/radio fields). */\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\"group/field-content flex flex-1 flex-col gap-1.5 leading-snug\", className)}\n      {...props}\n    />\n  );\n}\n\n/** The accessible label for a field's control; wraps the `Label` primitive. */\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4\",\n        \"has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A non-`<label>` title for a field group, styled like a label but not bound to a control. */\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Muted helper text shown beneath (or beside) a field's control. */\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A horizontal divider between groups of fields, optionally with centered label content. */\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Optional label rendered centered over the divider line. */\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className,\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\n/** A destructive `role=\"alert\"` message for a field, rendered from `children` or a list of `errors`. */\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Validation errors to render; deduped by message and listed when more than one. Ignored if `children` is provided. */\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n    if (uniqueErrors?.length === 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n};\n"],"mappings":"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"}

package/dist/primitives/Field/index.d.cts

@@ -0,0 +1,2 @@
+import { a as FieldGroup, c as FieldSeparator, i as FieldError, l as FieldSet, n as FieldContent, o as FieldLabel, r as FieldDescription, s as FieldLegend, t as Field, u as FieldTitle } from "../../index26.cjs";
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

package/dist/primitives/Field/index.d.ts

@@ -0,0 +1,2 @@
+import { a as FieldGroup, c as FieldSeparator, i as FieldError, l as FieldSet, n as FieldContent, o as FieldLabel, r as FieldDescription, s as FieldLegend, t as Field, u as FieldTitle } from "../../index26.js";
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };

package/dist/primitives/Field/index.js

@@ -0,0 +1,129 @@
+import { t as cn } from "../../cn.js";
+import { Separator } from "../Separator/index.js";
+import { Label } from "../Label/index.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/primitives/Field/Field.tsx
+/** A `<fieldset>` wrapper that groups related fields with consistent spacing. */
+function FieldSet({ className, ...props }) {
+	return /* @__PURE__ */ jsx("fieldset", {
+		"data-slot": "field-set",
+		className: cn("flex flex-col gap-6", "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className),
+		...props
+	});
+}
+/** The caption for a `FieldSet`, rendered as a `<legend>`. */
+function FieldLegend({ className, variant = "legend", ...props }) {
+	return /* @__PURE__ */ jsx("legend", {
+		"data-slot": "field-legend",
+		"data-variant": variant,
+		className: cn("mb-3 font-medium", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", className),
+		...props
+	});
+}
+/** A container that stacks multiple `Field`s with group-level spacing and a responsive container. */
+function FieldGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-group",
+		className: cn("group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4", className),
+		...props
+	});
+}
+const fieldVariants = cva("group/field flex w-full gap-3 data-[invalid=true]:text-destructive", {
+	variants: { orientation: {
+		vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+		horizontal: [
+			"flex-row items-center",
+			"[&>[data-slot=field-label]]:flex-auto",
+			"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+		],
+		responsive: [
+			"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
+			"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+			"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+		]
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+/** A single labelled form field that lays out a control with its label, description, and error. */
+function Field({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "field",
+		"data-orientation": orientation,
+		className: cn(fieldVariants({ orientation }), className),
+		...props
+	});
+}
+/** Stacks a label and description next to a control (used in horizontal checkbox/radio fields). */
+function FieldContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-content",
+		className: cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className),
+		...props
+	});
+}
+/** The accessible label for a field's control; wraps the `Label` primitive. */
+function FieldLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Label, {
+		"data-slot": "field-label",
+		className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4", "has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10", className),
+		...props
+	});
+}
+/** A non-`<label>` title for a field group, styled like a label but not bound to a control. */
+function FieldTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-label",
+		className: cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50", className),
+		...props
+	});
+}
+/** Muted helper text shown beneath (or beside) a field's control. */
+function FieldDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "field-description",
+		className: cn("text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance", "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		...props
+	});
+}
+/** A horizontal divider between groups of fields, optionally with centered label content. */
+function FieldSeparator({ children, className, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field-separator",
+		"data-content": !!children,
+		className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Separator, { className: "absolute inset-0 top-1/2" }), children && /* @__PURE__ */ jsx("span", {
+			className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground",
+			"data-slot": "field-separator-content",
+			children
+		})]
+	});
+}
+/** A destructive `role="alert"` message for a field, rendered from `children` or a list of `errors`. */
+function FieldError({ className, children, errors, ...props }) {
+	const content = useMemo(() => {
+		if (children) return children;
+		if (!errors?.length) return null;
+		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+		if (uniqueErrors?.length === 1) return uniqueErrors[0]?.message;
+		return /* @__PURE__ */ jsx("ul", {
+			className: "ml-4 flex list-disc flex-col gap-1",
+			children: uniqueErrors.map((error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index))
+		});
+	}, [children, errors]);
+	if (!content) return null;
+	return /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		"data-slot": "field-error",
+		className: cn("text-sm font-normal text-destructive", className),
+		...props,
+		children: content
+	});
+}
+//#endregion
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };
+
+//# sourceMappingURL=index.js.map

package/dist/primitives/Field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Field/Field.tsx"],"sourcesContent":["\"use client\";\n\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { useMemo } from \"react\";\nimport type * as React from \"react\";\n\nimport { Label } from \"@/primitives/Label\";\nimport { Separator } from \"@/primitives/Separator\";\nimport { cn } from \"@/utils\";\n\n/** A `<fieldset>` wrapper that groups related fields with consistent spacing. */\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6\",\n        \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The caption for a `FieldSet`, rendered as a `<legend>`. */\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & {\n  /** Visual scale of the legend: section header (`legend`) or smaller label-sized (`label`). */\n  variant?: \"legend\" | \"label\";\n}) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-medium\",\n        \"data-[variant=legend]:text-base\",\n        \"data-[variant=label]:text-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A container that stacks multiple `Field`s with group-level spacing and a responsive container. */\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst fieldVariants = cva(\"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\", {\n  variants: {\n    orientation: {\n      vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\n      horizontal: [\n        \"flex-row items-center\",\n        \"[&>[data-slot=field-label]]:flex-auto\",\n        \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n      responsive: [\n        \"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto\",\n        \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\n        \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      ],\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n});\n\n/** A single labelled form field that lays out a control with its label, description, and error. */\nfunction Field({\n  className,\n  /** Layout direction of the label/control: stacked (`vertical`), side-by-side (`horizontal`), or `responsive`. */\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\n\n/** Stacks a label and description next to a control (used in horizontal checkbox/radio fields). */\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\"group/field-content flex flex-1 flex-col gap-1.5 leading-snug\", className)}\n      {...props}\n    />\n  );\n}\n\n/** The accessible label for a field's control; wraps the `Label` primitive. */\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4\",\n        \"has-data-[state=checked]:border-primary has-data-[state=checked]:bg-primary/5 dark:has-data-[state=checked]:bg-primary/10\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A non-`<label>` title for a field group, styled like a label but not bound to a control. */\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Muted helper text shown beneath (or beside) a field's control. */\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-sm leading-normal font-normal text-muted-foreground group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A horizontal divider between groups of fields, optionally with centered label content. */\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Optional label rendered centered over the divider line. */\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className,\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\n/** A destructive `role=\"alert\"` message for a field, rendered from `children` or a list of `errors`. */\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  /** Validation errors to render; deduped by message and listed when more than one. Ignored if `children` is provided. */\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n    if (uniqueErrors?.length === 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n};\n"],"mappings":"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"}

package/dist/primitives/Form/index.cjs

@@ -0,0 +1,104 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../../chunk.cjs");
+const require_cn = require("../../cn.cjs");
+const require_primitives_Field_index = require("../Field/index.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let radix_ui = require("radix-ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react_hook_form = require("react-hook-form");
+//#region src/primitives/Form/Form.tsx
+/** Root provider that shares one react-hook-form instance with all nested form pieces. */
+const Form = react_hook_form.FormProvider;
+const FormFieldContext = react.createContext({});
+/** Connects a single input to the form via RHF's `Controller`, exposing `field` to its render prop. */
+const FormField = ({ ...props }) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormFieldContext.Provider, {
+		value: { name: props.name },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_hook_form.Controller, { ...props })
+	});
+};
+/** Hook for form pieces to read the current field's id, name, ARIA ids, and validation state. */
+const useFormField = () => {
+	const fieldContext = react.useContext(FormFieldContext);
+	const itemContext = react.useContext(FormItemContext);
+	const { getFieldState } = (0, react_hook_form.useFormContext)();
+	const formState = (0, react_hook_form.useFormState)({ name: fieldContext.name });
+	const fieldState = getFieldState(fieldContext.name, formState);
+	if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
+	const { id } = itemContext;
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState
+	};
+};
+const FormItemContext = react.createContext({});
+/** Wraps one field, generating an id so its label, control, and messages stay linked. */
+function FormItem({ ...props }) {
+	const id = react.useId();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormItemContext.Provider, {
+		value: { id },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Field_index.Field, {
+			"data-slot": "form-item",
+			...props
+		})
+	});
+}
+/** Field label wired to the control's id and tinted destructive when the field is invalid. */
+function FormLabel({ className, ...props }) {
+	const { error, formItemId } = useFormField();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Field_index.FieldLabel, {
+		"data-slot": "form-label",
+		"data-error": !!error,
+		className: require_cn.cn("data-[error=true]:text-destructive", className),
+		htmlFor: formItemId,
+		...props
+	});
+}
+/** Slots the actual input, applying the field's id, `aria-describedby`, and `aria-invalid`. */
+function FormControl({ ...props }) {
+	const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.Slot.Root, {
+		"data-slot": "form-control",
+		id: formItemId,
+		"aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+		"aria-invalid": !!error,
+		...props
+	});
+}
+/** Helper text for a field, linked to its control via `aria-describedby`. */
+function FormDescription({ ...props }) {
+	const { formDescriptionId } = useFormField();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Field_index.FieldDescription, {
+		"data-slot": "form-description",
+		id: formDescriptionId,
+		...props
+	});
+}
+/** Renders the field's validation error (or `children`), and nothing when there is no message. */
+function FormMessage({ children, ...props }) {
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message ?? "") : children;
+	if (!body) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives_Field_index.FieldError, {
+		"data-slot": "form-message",
+		id: formMessageId,
+		...props,
+		children: body
+	});
+}
+//#endregion
+exports.Form = Form;
+exports.FormControl = FormControl;
+exports.FormDescription = FormDescription;
+exports.FormField = FormField;
+exports.FormItem = FormItem;
+exports.FormLabel = FormLabel;
+exports.FormMessage = FormMessage;
+exports.useFormField = useFormField;
+
+//# sourceMappingURL=index.cjs.map