@karakuri-ui/react 0.3.4 → 0.3.6

package/dist/components/ui/accordion.mjs

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.mjs";
 const DefaultChevronIcon = ({ className }) => /* @__PURE__ */ jsx(
   "svg",
   {

package/dist/components/ui/alert.mjs

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.mjs";
 const InfoIcon = ({ className }) => /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
   /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
   /* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),

package/dist/components/ui/avatar.mjs

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.mjs";
 const avatarVariants = cva(
   "relative inline-flex items-center justify-center overflow-hidden bg-background-muted select-none",
   {

package/dist/components/ui/badge.mjs

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.mjs";
 const colorMap = {
   default: {
     solid: "bg-foreground text-background",

package/dist/components/ui/breadcrumb.mjs

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.mjs";
 const BreadcrumbContext = React.createContext({});
 const useBreadcrumbContext = () => React.useContext(BreadcrumbContext);
 function ChevronRightIcon({ className }) {

package/dist/components/ui/button-group.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.mjs";
 const ButtonGroupContext = React.createContext(null);
 function useButtonGroup() {
   return React.useContext(ButtonGroupContext);

package/dist/components/ui/button.mjs

@@ -3,8 +3,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-import { useButtonGroup } from "./button-group";
+import { cn } from "../../lib/utils.mjs";
+import { useButtonGroup } from "./button-group.mjs";
 const solidColorMap = {
   default: "bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80",
   primary: "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",

package/dist/components/ui/card.mjs

@@ -3,7 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.mjs";
 const CardContext = React.createContext({
   size: "default",
   direction: "vertical"

package/dist/components/ui/chart.mjs

@@ -2,7 +2,7 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.mjs";
 const THEMES = { light: "", dark: ".dark" };
 const ChartContext = React.createContext(null);
 function useChart() {

package/dist/components/ui/checkbox.js

@@ -109,7 +109,9 @@ const Checkbox = React.forwardRef(({ className, size, radius, weight, color = "d
   const resolvedSize = size || "default";
   const resolvedDisabled = disabled ?? fieldContext?.disabled;
   const generatedId = React.useId();
-  const checkboxId = id ?? fieldContext?.id ?? generatedId;
+  const hasOwnLabel = Boolean(label);
+  const checkboxId = id ?? (hasOwnLabel ? generatedId : fieldContext?.id ?? generatedId);
+  (0, import_field.useFieldControl)(hasOwnLabel ? "group" : "single", Boolean(fieldContext) && (hasOwnLabel || !id));
   const checkbox = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     CheckboxPrimitive.Root,
     {

package/dist/components/ui/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/checkbox.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext } from './field'\n\n// Color maps for checked/indeterminate state\nconst checkboxColorMap = {\n  default: 'data-[state=checked]:bg-foreground data-[state=checked]:border-foreground data-[state=checked]:text-background data-[state=indeterminate]:bg-foreground data-[state=indeterminate]:border-foreground data-[state=indeterminate]:text-background',\n  primary: 'data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-primary-foreground',\n} as const\n\nexport type CheckboxColor = keyof typeof checkboxColorMap\n\n// Checkbox box variants\nconst checkboxVariants = cva(\n  [\n    'peer relative shrink-0 border-border-form hover:border-border-form-strong transition-all duration-micro ease-out',\n    'focus-visible:focus-ring',\n    'disabled:cursor-not-allowed disabled:opacity-50',\n    // Transparent hit area expansion via ::after\n    \"after:absolute after:content-['']\",\n  ].join(' '),\n  {\n    variants: {\n      size: {\n        sm: 'w-3.5 h-3.5 after:-inset-[5px]',  // 14px box → 24px click\n        default: 'w-4 h-4 after:-inset-2',    // 16px box → 32px click\n        lg: 'w-5 h-5 after:-inset-2',         // 20px box → 36px click\n      },\n      radius: {\n        none: 'rounded-none',  // 0px — sharp square\n        sm: 'rounded-sm',      // 2px — default checkbox style\n        md: 'rounded',         // 4px — softer corners\n      },\n      weight: {\n        thin: 'border',   // 1px\n        bold: 'border-2', // 2px\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      radius: 'sm',\n      weight: 'bold',\n    },\n  }\n)\n\n// Check icon sizes per checkbox size\nconst checkIconSizes = {\n  sm: 'w-2.5 h-2.5',  // 10px in 14px box\n  default: 'w-3 h-3', // 12px in 16px box\n  lg: 'icon-xs',       // 14px in 20px box\n}\n\n// Label font sizes per checkbox size\nconst labelSizes = {\n  sm: 'text-xs',     // 12px\n  default: 'text-md', // 14px\n  lg: 'text-base',   // 16px\n}\n\n// Gap between checkbox and label\nconst gapSizes = {\n  sm: 'gap-1.5',\n  default: 'gap-2',\n  lg: 'gap-2.5',\n}\n\nexport interface CheckboxProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'children'>,\n    VariantProps<typeof checkboxVariants> {\n  /** Checked state color */\n  color?: CheckboxColor\n  label?: string\n  radius?: 'none' | 'sm' | 'md'\n}\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(({ className, size, radius, weight, color = 'default', label, disabled, id, ...props }, ref) => {\n  const fieldContext = useFieldContext()\n  const resolvedSize = size || 'default'\n  const resolvedDisabled = disabled ?? fieldContext?.disabled\n  const generatedId = React.useId()\n  const checkboxId = id ?? fieldContext?.id ?? generatedId\n\n  const checkbox = (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      id={checkboxId}\n      disabled={resolvedDisabled}\n      className={cn(\n        checkboxVariants({ size, radius, weight }),\n        checkboxColorMap[color],\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className=\"flex items-center justify-center animate-checkbox-enter\">\n        <CheckIcon className={checkIconSizes[resolvedSize]} />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n\n  if (!label) return checkbox\n\n  return (\n    <div className={cn('group flex items-center', gapSizes[resolvedSize])}>\n      <div className=\"flex items-center\">\n        {checkbox}\n      </div>\n      <label\n        htmlFor={checkboxId}\n        className={cn(\n          labelSizes[resolvedSize],\n          'text-text-muted cursor-pointer select-none transition-colors duration-micro',\n          'group-hover:text-foreground',\n          resolvedDisabled && 'opacity-50 cursor-not-allowed'\n        )}\n      >\n        {label}\n      </label>\n    </div>\n  )\n})\nCheckbox.displayName = 'Checkbox'\n\n// Check icon — renders ✓ for checked, — for indeterminate\nfunction CheckIcon({ className }: { className?: string }) {\n  return (\n    <>\n      {/* Check mark (shown when data-state=checked on parent Indicator) */}\n      <svg\n        className={cn(className, 'hidden [[data-state=checked]_&]:block')}\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n        strokeWidth={3}\n        aria-hidden=\"true\"\n      >\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n      </svg>\n      {/* Dash (shown when data-state=indeterminate on parent Indicator) */}\n      <svg\n        className={cn(className, 'hidden [[data-state=indeterminate]_&]:block')}\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n        strokeWidth={3}\n        aria-hidden=\"true\"\n      >\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 12h14\" />\n      </svg>\n    </>\n  )\n}\n\nexport { Checkbox, checkboxVariants }\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/ui/checkbox.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext, useFieldControl } from './field'\n\n// Color maps for checked/indeterminate state\nconst checkboxColorMap = {\n  default: 'data-[state=checked]:bg-foreground data-[state=checked]:border-foreground data-[state=checked]:text-background data-[state=indeterminate]:bg-foreground data-[state=indeterminate]:border-foreground data-[state=indeterminate]:text-background',\n  primary: 'data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-primary-foreground',\n} as const\n\nexport type CheckboxColor = keyof typeof checkboxColorMap\n\n// Checkbox box variants\nconst checkboxVariants = cva(\n  [\n    'peer relative shrink-0 border-border-form hover:border-border-form-strong transition-all duration-micro ease-out',\n    'focus-visible:focus-ring',\n    'disabled:cursor-not-allowed disabled:opacity-50',\n    // Transparent hit area expansion via ::after\n    \"after:absolute after:content-['']\",\n  ].join(' '),\n  {\n    variants: {\n      size: {\n        sm: 'w-3.5 h-3.5 after:-inset-[5px]',  // 14px box → 24px click\n        default: 'w-4 h-4 after:-inset-2',    // 16px box → 32px click\n        lg: 'w-5 h-5 after:-inset-2',         // 20px box → 36px click\n      },\n      radius: {\n        none: 'rounded-none',  // 0px — sharp square\n        sm: 'rounded-sm',      // 2px — default checkbox style\n        md: 'rounded',         // 4px — softer corners\n      },\n      weight: {\n        thin: 'border',   // 1px\n        bold: 'border-2', // 2px\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      radius: 'sm',\n      weight: 'bold',\n    },\n  }\n)\n\n// Check icon sizes per checkbox size\nconst checkIconSizes = {\n  sm: 'w-2.5 h-2.5',  // 10px in 14px box\n  default: 'w-3 h-3', // 12px in 16px box\n  lg: 'icon-xs',       // 14px in 20px box\n}\n\n// Label font sizes per checkbox size\nconst labelSizes = {\n  sm: 'text-xs',     // 12px\n  default: 'text-md', // 14px\n  lg: 'text-base',   // 16px\n}\n\n// Gap between checkbox and label\nconst gapSizes = {\n  sm: 'gap-1.5',\n  default: 'gap-2',\n  lg: 'gap-2.5',\n}\n\nexport interface CheckboxProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'children'>,\n    VariantProps<typeof checkboxVariants> {\n  /** Checked state color */\n  color?: CheckboxColor\n  label?: string\n  radius?: 'none' | 'sm' | 'md'\n}\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(({ className, size, radius, weight, color = 'default', label, disabled, id, ...props }, ref) => {\n  const fieldContext = useFieldContext()\n  const resolvedSize = size || 'default'\n  const resolvedDisabled = disabled ?? fieldContext?.disabled\n  const generatedId = React.useId()\n  // With its own label the checkbox is one item of a group: keep a unique id. Only a\n  // bare checkbox labelled by FieldLabel takes the Field id.\n  const hasOwnLabel = Boolean(label)\n  const checkboxId = id ?? (hasOwnLabel ? generatedId : fieldContext?.id ?? generatedId)\n  useFieldControl(hasOwnLabel ? 'group' : 'single', Boolean(fieldContext) && (hasOwnLabel || !id))\n\n  const checkbox = (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      id={checkboxId}\n      disabled={resolvedDisabled}\n      className={cn(\n        checkboxVariants({ size, radius, weight }),\n        checkboxColorMap[color],\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className=\"flex items-center justify-center animate-checkbox-enter\">\n        <CheckIcon className={checkIconSizes[resolvedSize]} />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n\n  if (!label) return checkbox\n\n  return (\n    <div className={cn('group flex items-center', gapSizes[resolvedSize])}>\n      <div className=\"flex items-center\">\n        {checkbox}\n      </div>\n      <label\n        htmlFor={checkboxId}\n        className={cn(\n          labelSizes[resolvedSize],\n          'text-text-muted cursor-pointer select-none transition-colors duration-micro',\n          'group-hover:text-foreground',\n          resolvedDisabled && 'opacity-50 cursor-not-allowed'\n        )}\n      >\n        {label}\n      </label>\n    </div>\n  )\n})\nCheckbox.displayName = 'Checkbox'\n\n// Check icon — renders ✓ for checked, — for indeterminate\nfunction CheckIcon({ className }: { className?: string }) {\n  return (\n    <>\n      {/* Check mark (shown when data-state=checked on parent Indicator) */}\n      <svg\n        className={cn(className, 'hidden [[data-state=checked]_&]:block')}\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n        strokeWidth={3}\n        aria-hidden=\"true\"\n      >\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n      </svg>\n      {/* Dash (shown when data-state=indeterminate on parent Indicator) */}\n      <svg\n        className={cn(className, 'hidden [[data-state=indeterminate]_&]:block')}\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n        strokeWidth={3}\n        aria-hidden=\"true\"\n      >\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 12h14\" />\n      </svg>\n    </>\n  )\n}\n\nexport { Checkbox, checkboxVariants }\n"],"mappings":"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","names":[]}

package/dist/components/ui/checkbox.mjs

@@ -3,8 +3,8 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-import { useFieldContext } from "./field";
+import { cn } from "../../lib/utils.mjs";
+import { useFieldContext, useFieldControl } from "./field.mjs";
 const checkboxColorMap = {
   default: "data-[state=checked]:bg-foreground data-[state=checked]:border-foreground data-[state=checked]:text-background data-[state=indeterminate]:bg-foreground data-[state=indeterminate]:border-foreground data-[state=indeterminate]:text-background",
   primary: "data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-primary-foreground"
@@ -75,7 +75,9 @@ const Checkbox = React.forwardRef(({ className, size, radius, weight, color = "d
   const resolvedSize = size || "default";
   const resolvedDisabled = disabled ?? fieldContext?.disabled;
   const generatedId = React.useId();
-  const checkboxId = id ?? fieldContext?.id ?? generatedId;
+  const hasOwnLabel = Boolean(label);
+  const checkboxId = id ?? (hasOwnLabel ? generatedId : fieldContext?.id ?? generatedId);
+  useFieldControl(hasOwnLabel ? "group" : "single", Boolean(fieldContext) && (hasOwnLabel || !id));
   const checkbox = /* @__PURE__ */ jsx(
     CheckboxPrimitive.Root,
     {

package/dist/components/ui/checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/checkbox.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext } from './field'\n\n// Color maps for checked/indeterminate state\nconst checkboxColorMap = {\n  default: 'data-[state=checked]:bg-foreground data-[state=checked]:border-foreground data-[state=checked]:text-background data-[state=indeterminate]:bg-foreground data-[state=indeterminate]:border-foreground data-[state=indeterminate]:text-background',\n  primary: 'data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-primary-foreground',\n} as const\n\nexport type CheckboxColor = keyof typeof checkboxColorMap\n\n// Checkbox box variants\nconst checkboxVariants = cva(\n  [\n    'peer relative shrink-0 border-border-form hover:border-border-form-strong transition-all duration-micro ease-out',\n    'focus-visible:focus-ring',\n    'disabled:cursor-not-allowed disabled:opacity-50',\n    // Transparent hit area expansion via ::after\n    \"after:absolute after:content-['']\",\n  ].join(' '),\n  {\n    variants: {\n      size: {\n        sm: 'w-3.5 h-3.5 after:-inset-[5px]',  // 14px box → 24px click\n        default: 'w-4 h-4 after:-inset-2',    // 16px box → 32px click\n        lg: 'w-5 h-5 after:-inset-2',         // 20px box → 36px click\n      },\n      radius: {\n        none: 'rounded-none',  // 0px — sharp square\n        sm: 'rounded-sm',      // 2px — default checkbox style\n        md: 'rounded',         // 4px — softer corners\n      },\n      weight: {\n        thin: 'border',   // 1px\n        bold: 'border-2', // 2px\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      radius: 'sm',\n      weight: 'bold',\n    },\n  }\n)\n\n// Check icon sizes per checkbox size\nconst checkIconSizes = {\n  sm: 'w-2.5 h-2.5',  // 10px in 14px box\n  default: 'w-3 h-3', // 12px in 16px box\n  lg: 'icon-xs',       // 14px in 20px box\n}\n\n// Label font sizes per checkbox size\nconst labelSizes = {\n  sm: 'text-xs',     // 12px\n  default: 'text-md', // 14px\n  lg: 'text-base',   // 16px\n}\n\n// Gap between checkbox and label\nconst gapSizes = {\n  sm: 'gap-1.5',\n  default: 'gap-2',\n  lg: 'gap-2.5',\n}\n\nexport interface CheckboxProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'children'>,\n    VariantProps<typeof checkboxVariants> {\n  /** Checked state color */\n  color?: CheckboxColor\n  label?: string\n  radius?: 'none' | 'sm' | 'md'\n}\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(({ className, size, radius, weight, color = 'default', label, disabled, id, ...props }, ref) => {\n  const fieldContext = useFieldContext()\n  const resolvedSize = size || 'default'\n  const resolvedDisabled = disabled ?? fieldContext?.disabled\n  const generatedId = React.useId()\n  const checkboxId = id ?? fieldContext?.id ?? generatedId\n\n  const checkbox = (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      id={checkboxId}\n      disabled={resolvedDisabled}\n      className={cn(\n        checkboxVariants({ size, radius, weight }),\n        checkboxColorMap[color],\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className=\"flex items-center justify-center animate-checkbox-enter\">\n        <CheckIcon className={checkIconSizes[resolvedSize]} />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n\n  if (!label) return checkbox\n\n  return (\n    <div className={cn('group flex items-center', gapSizes[resolvedSize])}>\n      <div className=\"flex items-center\">\n        {checkbox}\n      </div>\n      <label\n        htmlFor={checkboxId}\n        className={cn(\n          labelSizes[resolvedSize],\n          'text-text-muted cursor-pointer select-none transition-colors duration-micro',\n          'group-hover:text-foreground',\n          resolvedDisabled && 'opacity-50 cursor-not-allowed'\n        )}\n      >\n        {label}\n      </label>\n    </div>\n  )\n})\nCheckbox.displayName = 'Checkbox'\n\n// Check icon — renders ✓ for checked, — for indeterminate\nfunction CheckIcon({ className }: { className?: string }) {\n  return (\n    <>\n      {/* Check mark (shown when data-state=checked on parent Indicator) */}\n      <svg\n        className={cn(className, 'hidden [[data-state=checked]_&]:block')}\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n        strokeWidth={3}\n        aria-hidden=\"true\"\n      >\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n      </svg>\n      {/* Dash (shown when data-state=indeterminate on parent Indicator) */}\n      <svg\n        className={cn(className, 'hidden [[data-state=indeterminate]_&]:block')}\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n        strokeWidth={3}\n        aria-hidden=\"true\"\n      >\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 12h14\" />\n      </svg>\n    </>\n  )\n}\n\nexport { Checkbox, checkboxVariants }\n"],"mappings":";AAuGQ,SA+BJ,UA/BI,KAQJ,YARI;AArGR,YAAY,WAAW;AACvB,YAAY,uBAAuB;AACnC,SAAS,WAA8B;AACvC,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAGhC,MAAM,mBAAmB;AAAA,EACvB,SAAS;AAAA,EACT,SAAS;AACX;AAKA,MAAM,mBAAmB;AAAA,EACvB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,EACF,EAAE,KAAK,GAAG;AAAA,EACV;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA;AAAA,QACJ,SAAS;AAAA;AAAA,QACT,IAAI;AAAA;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA;AAAA,QACN,IAAI;AAAA;AAAA,QACJ,IAAI;AAAA;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA;AAAA,QACN,MAAM;AAAA;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AAGA,MAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA;AAAA,EACJ,SAAS;AAAA;AAAA,EACT,IAAI;AAAA;AACN;AAGA,MAAM,aAAa;AAAA,EACjB,IAAI;AAAA;AAAA,EACJ,SAAS;AAAA;AAAA,EACT,IAAI;AAAA;AACN;AAGA,MAAM,WAAW;AAAA,EACf,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAWA,MAAM,WAAW,MAAM,WAGrB,CAAC,EAAE,WAAW,MAAM,QAAQ,QAAQ,QAAQ,WAAW,OAAO,UAAU,IAAI,GAAG,MAAM,GAAG,QAAQ;AAChG,QAAM,eAAe,gBAAgB;AACrC,QAAM,eAAe,QAAQ;AAC7B,QAAM,mBAAmB,YAAY,cAAc;AACnD,QAAM,cAAc,MAAM,MAAM;AAChC,QAAM,aAAa,MAAM,cAAc,MAAM;AAE7C,QAAM,WACJ;AAAA,IAAC,kBAAkB;AAAA,IAAlB;AAAA,MACC;AAAA,MACA,IAAI;AAAA,MACJ,UAAU;AAAA,MACV,WAAW;AAAA,QACT,iBAAiB,EAAE,MAAM,QAAQ,OAAO,CAAC;AAAA,QACzC,iBAAiB,KAAK;AAAA,QACtB;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,8BAAC,kBAAkB,WAAlB,EAA4B,WAAU,2DACrC,8BAAC,aAAU,WAAW,eAAe,YAAY,GAAG,GACtD;AAAA;AAAA,EACF;AAGF,MAAI,CAAC,MAAO,QAAO;AAEnB,SACE,qBAAC,SAAI,WAAW,GAAG,2BAA2B,SAAS,YAAY,CAAC,GAClE;AAAA,wBAAC,SAAI,WAAU,qBACZ,oBACH;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,SAAS;AAAA,QACT,WAAW;AAAA,UACT,WAAW,YAAY;AAAA,UACvB;AAAA,UACA;AAAA,UACA,oBAAoB;AAAA,QACtB;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KACF;AAEJ,CAAC;AACD,SAAS,cAAc;AAGvB,SAAS,UAAU,EAAE,UAAU,GAA2B;AACxD,SACE,iCAEE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,WAAW,uCAAuC;AAAA,QAChE,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,QAAO;AAAA,QACP,aAAa;AAAA,QACb,eAAY;AAAA,QAEZ,8BAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,kBAAiB;AAAA;AAAA,IACxE;AAAA,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,WAAW,6CAA6C;AAAA,QACtE,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,QAAO;AAAA,QACP,aAAa;AAAA,QACb,eAAY;AAAA,QAEZ,8BAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,YAAW;AAAA;AAAA,IAClE;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/checkbox.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext, useFieldControl } from './field'\n\n// Color maps for checked/indeterminate state\nconst checkboxColorMap = {\n  default: 'data-[state=checked]:bg-foreground data-[state=checked]:border-foreground data-[state=checked]:text-background data-[state=indeterminate]:bg-foreground data-[state=indeterminate]:border-foreground data-[state=indeterminate]:text-background',\n  primary: 'data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:text-primary-foreground',\n} as const\n\nexport type CheckboxColor = keyof typeof checkboxColorMap\n\n// Checkbox box variants\nconst checkboxVariants = cva(\n  [\n    'peer relative shrink-0 border-border-form hover:border-border-form-strong transition-all duration-micro ease-out',\n    'focus-visible:focus-ring',\n    'disabled:cursor-not-allowed disabled:opacity-50',\n    // Transparent hit area expansion via ::after\n    \"after:absolute after:content-['']\",\n  ].join(' '),\n  {\n    variants: {\n      size: {\n        sm: 'w-3.5 h-3.5 after:-inset-[5px]',  // 14px box → 24px click\n        default: 'w-4 h-4 after:-inset-2',    // 16px box → 32px click\n        lg: 'w-5 h-5 after:-inset-2',         // 20px box → 36px click\n      },\n      radius: {\n        none: 'rounded-none',  // 0px — sharp square\n        sm: 'rounded-sm',      // 2px — default checkbox style\n        md: 'rounded',         // 4px — softer corners\n      },\n      weight: {\n        thin: 'border',   // 1px\n        bold: 'border-2', // 2px\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      radius: 'sm',\n      weight: 'bold',\n    },\n  }\n)\n\n// Check icon sizes per checkbox size\nconst checkIconSizes = {\n  sm: 'w-2.5 h-2.5',  // 10px in 14px box\n  default: 'w-3 h-3', // 12px in 16px box\n  lg: 'icon-xs',       // 14px in 20px box\n}\n\n// Label font sizes per checkbox size\nconst labelSizes = {\n  sm: 'text-xs',     // 12px\n  default: 'text-md', // 14px\n  lg: 'text-base',   // 16px\n}\n\n// Gap between checkbox and label\nconst gapSizes = {\n  sm: 'gap-1.5',\n  default: 'gap-2',\n  lg: 'gap-2.5',\n}\n\nexport interface CheckboxProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'children'>,\n    VariantProps<typeof checkboxVariants> {\n  /** Checked state color */\n  color?: CheckboxColor\n  label?: string\n  radius?: 'none' | 'sm' | 'md'\n}\n\nconst Checkbox = React.forwardRef<\n  React.ElementRef<typeof CheckboxPrimitive.Root>,\n  CheckboxProps\n>(({ className, size, radius, weight, color = 'default', label, disabled, id, ...props }, ref) => {\n  const fieldContext = useFieldContext()\n  const resolvedSize = size || 'default'\n  const resolvedDisabled = disabled ?? fieldContext?.disabled\n  const generatedId = React.useId()\n  // With its own label the checkbox is one item of a group: keep a unique id. Only a\n  // bare checkbox labelled by FieldLabel takes the Field id.\n  const hasOwnLabel = Boolean(label)\n  const checkboxId = id ?? (hasOwnLabel ? generatedId : fieldContext?.id ?? generatedId)\n  useFieldControl(hasOwnLabel ? 'group' : 'single', Boolean(fieldContext) && (hasOwnLabel || !id))\n\n  const checkbox = (\n    <CheckboxPrimitive.Root\n      ref={ref}\n      id={checkboxId}\n      disabled={resolvedDisabled}\n      className={cn(\n        checkboxVariants({ size, radius, weight }),\n        checkboxColorMap[color],\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator className=\"flex items-center justify-center animate-checkbox-enter\">\n        <CheckIcon className={checkIconSizes[resolvedSize]} />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n\n  if (!label) return checkbox\n\n  return (\n    <div className={cn('group flex items-center', gapSizes[resolvedSize])}>\n      <div className=\"flex items-center\">\n        {checkbox}\n      </div>\n      <label\n        htmlFor={checkboxId}\n        className={cn(\n          labelSizes[resolvedSize],\n          'text-text-muted cursor-pointer select-none transition-colors duration-micro',\n          'group-hover:text-foreground',\n          resolvedDisabled && 'opacity-50 cursor-not-allowed'\n        )}\n      >\n        {label}\n      </label>\n    </div>\n  )\n})\nCheckbox.displayName = 'Checkbox'\n\n// Check icon — renders ✓ for checked, — for indeterminate\nfunction CheckIcon({ className }: { className?: string }) {\n  return (\n    <>\n      {/* Check mark (shown when data-state=checked on parent Indicator) */}\n      <svg\n        className={cn(className, 'hidden [[data-state=checked]_&]:block')}\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n        strokeWidth={3}\n        aria-hidden=\"true\"\n      >\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 13l4 4L19 7\" />\n      </svg>\n      {/* Dash (shown when data-state=indeterminate on parent Indicator) */}\n      <svg\n        className={cn(className, 'hidden [[data-state=indeterminate]_&]:block')}\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n        strokeWidth={3}\n        aria-hidden=\"true\"\n      >\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 12h14\" />\n      </svg>\n    </>\n  )\n}\n\nexport { Checkbox, checkboxVariants }\n"],"mappings":"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","names":[]}

package/dist/components/ui/divider.mjs

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.mjs";
 const dividerVariants = cva("shrink-0", {
   variants: {
     orientation: {

package/dist/components/ui/drawer.mjs

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.mjs";
 const DefaultCloseIcon = ({ className }) => /* @__PURE__ */ jsx(
   "svg",
   {

package/dist/components/ui/dropdown.mjs

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.mjs";
 const contentRadiusMap = {
   md: "rounded-md",
   // 6px

package/dist/components/ui/field.d.mts

@@ -4,10 +4,20 @@ import { VariantProps } from 'class-variance-authority';
 
 interface FieldContextValue {
     id: string;
+    /** id of the FieldLabel, for aria-labelledby on grouped controls */
+    labelId: string;
     error?: boolean;
     disabled?: boolean;
+    /** A FieldLabel is rendered inside this Field */
+    hasLabel: boolean;
+    /** The Field holds labelled checkboxes / switches / a radio group and no single input */
+    isGroup: boolean;
+    registerLabel: () => () => void;
+    registerControl: (kind: FieldControlKind) => () => void;
 }
+type FieldControlKind = 'single' | 'group' | 'labelled';
 declare function useFieldContext(): FieldContextValue | null;
+declare function useFieldControl(kind: FieldControlKind, enabled: boolean): void;
 declare const fieldVariants: (props?: ({
     gap?: "default" | "sm" | "lg" | "none" | "xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -23,4 +33,4 @@ declare const FieldLabel: React.ForwardRefExoticComponent<FieldLabelProps & Reac
 declare const FieldError: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
 declare const FieldCharCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
 
-export { Field, FieldCharCount, FieldError, FieldLabel, type FieldLabelProps, type FieldProps, useFieldContext };
+export { Field, FieldCharCount, FieldError, FieldLabel, type FieldLabelProps, type FieldProps, useFieldContext, useFieldControl };

package/dist/components/ui/field.d.ts

@@ -4,10 +4,20 @@ import { VariantProps } from 'class-variance-authority';
 
 interface FieldContextValue {
     id: string;
+    /** id of the FieldLabel, for aria-labelledby on grouped controls */
+    labelId: string;
     error?: boolean;
     disabled?: boolean;
+    /** A FieldLabel is rendered inside this Field */
+    hasLabel: boolean;
+    /** The Field holds labelled checkboxes / switches / a radio group and no single input */
+    isGroup: boolean;
+    registerLabel: () => () => void;
+    registerControl: (kind: FieldControlKind) => () => void;
 }
+type FieldControlKind = 'single' | 'group' | 'labelled';
 declare function useFieldContext(): FieldContextValue | null;
+declare function useFieldControl(kind: FieldControlKind, enabled: boolean): void;
 declare const fieldVariants: (props?: ({
     gap?: "default" | "sm" | "lg" | "none" | "xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -23,4 +33,4 @@ declare const FieldLabel: React.ForwardRefExoticComponent<FieldLabelProps & Reac
 declare const FieldError: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
 declare const FieldCharCount: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
 
-export { Field, FieldCharCount, FieldError, FieldLabel, type FieldLabelProps, type FieldProps, useFieldContext };
+export { Field, FieldCharCount, FieldError, FieldLabel, type FieldLabelProps, type FieldProps, useFieldContext, useFieldControl };

package/dist/components/ui/field.js

@@ -33,7 +33,8 @@ __export(field_exports, {
   FieldCharCount: () => FieldCharCount,
   FieldError: () => FieldError,
   FieldLabel: () => FieldLabel,
-  useFieldContext: () => useFieldContext
+  useFieldContext: () => useFieldContext,
+  useFieldControl: () => useFieldControl
 });
 module.exports = __toCommonJS(field_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -44,6 +45,14 @@ const FieldContext = React.createContext(null);
 function useFieldContext() {
   return React.useContext(FieldContext);
 }
+function useFieldControl(kind, enabled) {
+  const context = useFieldContext();
+  const register = context?.registerControl;
+  React.useEffect(() => {
+    if (!enabled || !register) return;
+    return register(kind);
+  }, [enabled, register, kind]);
+}
 const fieldVariants = (0, import_class_variance_authority.cva)("flex flex-col", {
   variants: {
     gap: {
@@ -61,10 +70,30 @@ const fieldVariants = (0, import_class_variance_authority.cva)("flex flex-col",
 const Field = React.forwardRef(
   ({ className, gap, error, disabled, children, ...props }, ref) => {
     const id = React.useId();
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldContext.Provider, { value: { id, error, disabled }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    const labelId = `${id}-label`;
+    const [labelCount, setLabelCount] = React.useState(0);
+    const [counts, setCounts] = React.useState({ single: 0, group: 0, labelled: 0 });
+    const registerLabel = React.useCallback(() => {
+      setLabelCount((n) => n + 1);
+      return () => setLabelCount((n) => n - 1);
+    }, []);
+    const registerControl = React.useCallback((kind) => {
+      setCounts((c) => ({ ...c, [kind]: c[kind] + 1 }));
+      return () => setCounts((c) => ({ ...c, [kind]: c[kind] - 1 }));
+    }, []);
+    const hasLabel = labelCount > 0;
+    const isGroup = counts.single === 0 && (counts.group > 0 || counts.labelled > 0);
+    const asGroup = counts.single === 0 && counts.group > 0;
+    const contextValue = React.useMemo(
+      () => ({ id, labelId, error, disabled, hasLabel, isGroup, registerLabel, registerControl }),
+      [id, labelId, error, disabled, hasLabel, isGroup, registerLabel, registerControl]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ref,
+        role: asGroup ? "group" : void 0,
+        "aria-labelledby": asGroup && hasLabel ? labelId : void 0,
         className: (0, import_utils.cn)(fieldVariants({ gap }), className),
         "data-error": error || void 0,
         "data-disabled": disabled || void 0,
@@ -78,11 +107,14 @@ Field.displayName = "Field";
 const FieldLabel = React.forwardRef(
   ({ className, required, children, ...props }, ref) => {
     const context = useFieldContext();
+    const registerLabel = context?.registerLabel;
+    React.useEffect(() => registerLabel?.(), [registerLabel]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "label",
       {
         ref,
-        htmlFor: context?.id,
+        id: context?.labelId,
+        htmlFor: context && !context.isGroup ? context.id : void 0,
         className: (0, import_utils.cn)(
           "text-md font-semibold text-foreground",
           // 14px - primary field identifier
@@ -139,6 +171,7 @@ FieldCharCount.displayName = "FieldCharCount";
   FieldCharCount,
   FieldError,
   FieldLabel,
-  useFieldContext
+  useFieldContext,
+  useFieldControl
 });
 //# sourceMappingURL=field.js.map

package/dist/components/ui/field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/field.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Field Context for sharing state between components\ninterface FieldContextValue {\n  id: string\n  error?: boolean\n  disabled?: boolean\n}\n\nconst FieldContext = React.createContext<FieldContextValue | null>(null)\n\nfunction useFieldContext() {\n  return React.useContext(FieldContext)\n}\n\n// Field wrapper\nconst fieldVariants = cva('flex flex-col', {\n  variants: {\n    gap: {\n      none: 'gap-0',\n      xs: 'gap-1',\n      sm: 'gap-1.5',\n      default: 'gap-2',\n      lg: 'gap-3',\n    },\n  },\n  defaultVariants: {\n    gap: 'default',\n  },\n})\n\nexport interface FieldProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof fieldVariants> {\n  error?: boolean\n  disabled?: boolean\n}\n\nconst Field = React.forwardRef<HTMLDivElement, FieldProps>(\n  ({ className, gap, error, disabled, children, ...props }, ref) => {\n    const id = React.useId()\n\n    return (\n      <FieldContext.Provider value={{ id, error, disabled }}>\n        <div\n          ref={ref}\n          className={cn(fieldVariants({ gap }), className)}\n          data-error={error || undefined}\n          data-disabled={disabled || undefined}\n          {...props}\n        >\n          {children}\n        </div>\n      </FieldContext.Provider>\n    )\n  }\n)\nField.displayName = 'Field'\n\n// Field Label\nexport interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  required?: boolean\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  ({ className, required, children, ...props }, ref) => {\n    const context = useFieldContext()\n\n    return (\n      <label\n        ref={ref}\n        htmlFor={context?.id}\n        className={cn(\n          'text-md font-semibold text-foreground', // 14px - primary field identifier\n          context?.disabled && 'opacity-50 cursor-not-allowed',\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {required && <span className=\"text-error ml-0.5\">*</span>}\n      </label>\n    )\n  }\n)\nFieldLabel.displayName = 'FieldLabel'\n\n// Field Error\nconst FieldError = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n  const context = useFieldContext()\n\n  if (!children) return null\n\n  return (\n    <p\n      ref={ref}\n      id={context ? `${context.id}-error` : undefined}\n      role=\"alert\"\n      className={cn('text-xs text-error pl-1', className)} // 12px - color-distinguished, left-aligned with input text\n      {...props}\n    >\n      {children}\n    </p>\n  )\n})\nFieldError.displayName = 'FieldError'\n\n// Field Character Count\nconst FieldCharCount = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const context = useFieldContext()\n\n  return (\n    <p\n      ref={ref}\n      id={context ? `${context.id}-charcount` : undefined}\n      className={cn(\n        'text-xs text-text-muted text-right pr-1 -mt-1', // 12px - right-aligned, 4px gap from input (gap-2 8px - mt-1 4px)\n        context?.disabled && 'opacity-50',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nFieldCharCount.displayName = 'FieldCharCount'\n\nexport { Field, FieldLabel, FieldError, FieldCharCount, useFieldContext }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgDQ;AA9CR,YAAuB;AACvB,sCAAuC;AACvC,mBAAmB;AASnB,MAAM,eAAe,MAAM,cAAwC,IAAI;AAEvE,SAAS,kBAAkB;AACzB,SAAO,MAAM,WAAW,YAAY;AACtC;AAGA,MAAM,oBAAgB,qCAAI,iBAAiB;AAAA,EACzC,UAAU;AAAA,IACR,KAAK;AAAA,MACH,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,IACN;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,KAAK;AAAA,EACP;AACF,CAAC;AASD,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,WAAW,KAAK,OAAO,UAAU,UAAU,GAAG,MAAM,GAAG,QAAQ;AAChE,UAAM,KAAK,MAAM,MAAM;AAEvB,WACE,4CAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,IAAI,OAAO,SAAS,GAClD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,cAAc,EAAE,IAAI,CAAC,GAAG,SAAS;AAAA,QAC/C,cAAY,SAAS;AAAA,QACrB,iBAAe,YAAY;AAAA,QAC1B,GAAG;AAAA,QAEH;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAOpB,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,UAAU,UAAU,GAAG,MAAM,GAAG,QAAQ;AACpD,UAAM,UAAU,gBAAgB;AAEhC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS,SAAS;AAAA,QAClB,eAAW;AAAA,UACT;AAAA;AAAA,UACA,SAAS,YAAY;AAAA,UACrB;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,UACA,YAAY,4CAAC,UAAK,WAAU,qBAAoB,eAAC;AAAA;AAAA;AAAA,IACpD;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAGzB,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5C,QAAM,UAAU,gBAAgB;AAEhC,MAAI,CAAC,SAAU,QAAO;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI,UAAU,GAAG,QAAQ,EAAE,WAAW;AAAA,MACtC,MAAK;AAAA,MACL,eAAW,iBAAG,2BAA2B,SAAS;AAAA,MACjD,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AACD,WAAW,cAAc;AAGzB,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,UAAU,gBAAgB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI,UAAU,GAAG,QAAQ,EAAE,eAAe;AAAA,MAC1C,eAAW;AAAA,QACT;AAAA;AAAA,QACA,SAAS,YAAY;AAAA,QACrB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AACD,eAAe,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/field.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Field Context for sharing state between components\ninterface FieldContextValue {\n  id: string\n  /** id of the FieldLabel, for aria-labelledby on grouped controls */\n  labelId: string\n  error?: boolean\n  disabled?: boolean\n  /** A FieldLabel is rendered inside this Field */\n  hasLabel: boolean\n  /** The Field holds labelled checkboxes / switches / a radio group and no single input */\n  isGroup: boolean\n  registerLabel: () => () => void\n  registerControl: (kind: FieldControlKind) => () => void\n}\n\ntype FieldControlKind = 'single' | 'group' | 'labelled'\n\nconst FieldContext = React.createContext<FieldContextValue | null>(null)\n\nfunction useFieldContext() {\n  return React.useContext(FieldContext)\n}\n\n// Controls tell their Field what they are, so FieldLabel can point at the right thing.\n// 'single': one input that takes the Field id (Input, Textarea, a bare Checkbox / Switch);\n//   FieldLabel targets it with htmlFor.\n// 'group': a Checkbox / Switch with its own label keeps a unique id; the Field becomes\n//   role=\"group\" named by FieldLabel instead of every item sharing one id.\n// 'labelled': a RadioGroup names itself from FieldLabel (aria-labelledby).\n// A single input wins: with one present, FieldLabel keeps pointing at it.\nfunction useFieldControl(kind: FieldControlKind, enabled: boolean) {\n  const context = useFieldContext()\n  const register = context?.registerControl\n  React.useEffect(() => {\n    if (!enabled || !register) return\n    return register(kind)\n  }, [enabled, register, kind])\n}\n\n// Field wrapper\nconst fieldVariants = cva('flex flex-col', {\n  variants: {\n    gap: {\n      none: 'gap-0',\n      xs: 'gap-1',\n      sm: 'gap-1.5',\n      default: 'gap-2',\n      lg: 'gap-3',\n    },\n  },\n  defaultVariants: {\n    gap: 'default',\n  },\n})\n\nexport interface FieldProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof fieldVariants> {\n  error?: boolean\n  disabled?: boolean\n}\n\nconst Field = React.forwardRef<HTMLDivElement, FieldProps>(\n  ({ className, gap, error, disabled, children, ...props }, ref) => {\n    const id = React.useId()\n    const labelId = `${id}-label`\n    const [labelCount, setLabelCount] = React.useState(0)\n    const [counts, setCounts] = React.useState({ single: 0, group: 0, labelled: 0 })\n\n    const registerLabel = React.useCallback(() => {\n      setLabelCount((n) => n + 1)\n      return () => setLabelCount((n) => n - 1)\n    }, [])\n    const registerControl = React.useCallback((kind: FieldControlKind) => {\n      setCounts((c) => ({ ...c, [kind]: c[kind] + 1 }))\n      return () => setCounts((c) => ({ ...c, [kind]: c[kind] - 1 }))\n    }, [])\n\n    const hasLabel = labelCount > 0\n    const isGroup = counts.single === 0 && (counts.group > 0 || counts.labelled > 0)\n    const asGroup = counts.single === 0 && counts.group > 0\n    const contextValue = React.useMemo(\n      () => ({ id, labelId, error, disabled, hasLabel, isGroup, registerLabel, registerControl }),\n      [id, labelId, error, disabled, hasLabel, isGroup, registerLabel, registerControl]\n    )\n\n    return (\n      <FieldContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          role={asGroup ? 'group' : undefined}\n          aria-labelledby={asGroup && hasLabel ? labelId : undefined}\n          className={cn(fieldVariants({ gap }), className)}\n          data-error={error || undefined}\n          data-disabled={disabled || undefined}\n          {...props}\n        >\n          {children}\n        </div>\n      </FieldContext.Provider>\n    )\n  }\n)\nField.displayName = 'Field'\n\n// Field Label\nexport interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  required?: boolean\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  ({ className, required, children, ...props }, ref) => {\n    const context = useFieldContext()\n    const registerLabel = context?.registerLabel\n    React.useEffect(() => registerLabel?.(), [registerLabel])\n\n    return (\n      <label\n        ref={ref}\n        id={context?.labelId}\n        // Grouped controls have their own labels; the group title targets no input\n        htmlFor={context && !context.isGroup ? context.id : undefined}\n        className={cn(\n          'text-md font-semibold text-foreground', // 14px - primary field identifier\n          context?.disabled && 'opacity-50 cursor-not-allowed',\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {required && <span className=\"text-error ml-0.5\">*</span>}\n      </label>\n    )\n  }\n)\nFieldLabel.displayName = 'FieldLabel'\n\n// Field Error\nconst FieldError = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n  const context = useFieldContext()\n\n  if (!children) return null\n\n  return (\n    <p\n      ref={ref}\n      id={context ? `${context.id}-error` : undefined}\n      role=\"alert\"\n      className={cn('text-xs text-error pl-1', className)} // 12px - color-distinguished, left-aligned with input text\n      {...props}\n    >\n      {children}\n    </p>\n  )\n})\nFieldError.displayName = 'FieldError'\n\n// Field Character Count\nconst FieldCharCount = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const context = useFieldContext()\n\n  return (\n    <p\n      ref={ref}\n      id={context ? `${context.id}-charcount` : undefined}\n      className={cn(\n        'text-xs text-text-muted text-right pr-1 -mt-1', // 12px - right-aligned, 4px gap from input (gap-2 8px - mt-1 4px)\n        context?.disabled && 'opacity-50',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nFieldCharCount.displayName = 'FieldCharCount'\n\nexport { Field, FieldLabel, FieldError, FieldCharCount, useFieldContext, useFieldControl }\n"],"mappings":"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","names":[]}

package/dist/components/ui/field.mjs

@@ -2,11 +2,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
+import { cn } from "../../lib/utils.mjs";
 const FieldContext = React.createContext(null);
 function useFieldContext() {
   return React.useContext(FieldContext);
 }
+function useFieldControl(kind, enabled) {
+  const context = useFieldContext();
+  const register = context?.registerControl;
+  React.useEffect(() => {
+    if (!enabled || !register) return;
+    return register(kind);
+  }, [enabled, register, kind]);
+}
 const fieldVariants = cva("flex flex-col", {
   variants: {
     gap: {
@@ -24,10 +32,30 @@ const fieldVariants = cva("flex flex-col", {
 const Field = React.forwardRef(
   ({ className, gap, error, disabled, children, ...props }, ref) => {
     const id = React.useId();
-    return /* @__PURE__ */ jsx(FieldContext.Provider, { value: { id, error, disabled }, children: /* @__PURE__ */ jsx(
+    const labelId = `${id}-label`;
+    const [labelCount, setLabelCount] = React.useState(0);
+    const [counts, setCounts] = React.useState({ single: 0, group: 0, labelled: 0 });
+    const registerLabel = React.useCallback(() => {
+      setLabelCount((n) => n + 1);
+      return () => setLabelCount((n) => n - 1);
+    }, []);
+    const registerControl = React.useCallback((kind) => {
+      setCounts((c) => ({ ...c, [kind]: c[kind] + 1 }));
+      return () => setCounts((c) => ({ ...c, [kind]: c[kind] - 1 }));
+    }, []);
+    const hasLabel = labelCount > 0;
+    const isGroup = counts.single === 0 && (counts.group > 0 || counts.labelled > 0);
+    const asGroup = counts.single === 0 && counts.group > 0;
+    const contextValue = React.useMemo(
+      () => ({ id, labelId, error, disabled, hasLabel, isGroup, registerLabel, registerControl }),
+      [id, labelId, error, disabled, hasLabel, isGroup, registerLabel, registerControl]
+    );
+    return /* @__PURE__ */ jsx(FieldContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
       "div",
       {
         ref,
+        role: asGroup ? "group" : void 0,
+        "aria-labelledby": asGroup && hasLabel ? labelId : void 0,
         className: cn(fieldVariants({ gap }), className),
         "data-error": error || void 0,
         "data-disabled": disabled || void 0,
@@ -41,11 +69,14 @@ Field.displayName = "Field";
 const FieldLabel = React.forwardRef(
   ({ className, required, children, ...props }, ref) => {
     const context = useFieldContext();
+    const registerLabel = context?.registerLabel;
+    React.useEffect(() => registerLabel?.(), [registerLabel]);
     return /* @__PURE__ */ jsxs(
       "label",
       {
         ref,
-        htmlFor: context?.id,
+        id: context?.labelId,
+        htmlFor: context && !context.isGroup ? context.id : void 0,
         className: cn(
           "text-md font-semibold text-foreground",
           // 14px - primary field identifier
@@ -101,6 +132,7 @@ export {
   FieldCharCount,
   FieldError,
   FieldLabel,
-  useFieldContext
+  useFieldContext,
+  useFieldControl
 };
 //# sourceMappingURL=field.mjs.map

package/dist/components/ui/field.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/field.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Field Context for sharing state between components\ninterface FieldContextValue {\n  id: string\n  error?: boolean\n  disabled?: boolean\n}\n\nconst FieldContext = React.createContext<FieldContextValue | null>(null)\n\nfunction useFieldContext() {\n  return React.useContext(FieldContext)\n}\n\n// Field wrapper\nconst fieldVariants = cva('flex flex-col', {\n  variants: {\n    gap: {\n      none: 'gap-0',\n      xs: 'gap-1',\n      sm: 'gap-1.5',\n      default: 'gap-2',\n      lg: 'gap-3',\n    },\n  },\n  defaultVariants: {\n    gap: 'default',\n  },\n})\n\nexport interface FieldProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof fieldVariants> {\n  error?: boolean\n  disabled?: boolean\n}\n\nconst Field = React.forwardRef<HTMLDivElement, FieldProps>(\n  ({ className, gap, error, disabled, children, ...props }, ref) => {\n    const id = React.useId()\n\n    return (\n      <FieldContext.Provider value={{ id, error, disabled }}>\n        <div\n          ref={ref}\n          className={cn(fieldVariants({ gap }), className)}\n          data-error={error || undefined}\n          data-disabled={disabled || undefined}\n          {...props}\n        >\n          {children}\n        </div>\n      </FieldContext.Provider>\n    )\n  }\n)\nField.displayName = 'Field'\n\n// Field Label\nexport interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  required?: boolean\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  ({ className, required, children, ...props }, ref) => {\n    const context = useFieldContext()\n\n    return (\n      <label\n        ref={ref}\n        htmlFor={context?.id}\n        className={cn(\n          'text-md font-semibold text-foreground', // 14px - primary field identifier\n          context?.disabled && 'opacity-50 cursor-not-allowed',\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {required && <span className=\"text-error ml-0.5\">*</span>}\n      </label>\n    )\n  }\n)\nFieldLabel.displayName = 'FieldLabel'\n\n// Field Error\nconst FieldError = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n  const context = useFieldContext()\n\n  if (!children) return null\n\n  return (\n    <p\n      ref={ref}\n      id={context ? `${context.id}-error` : undefined}\n      role=\"alert\"\n      className={cn('text-xs text-error pl-1', className)} // 12px - color-distinguished, left-aligned with input text\n      {...props}\n    >\n      {children}\n    </p>\n  )\n})\nFieldError.displayName = 'FieldError'\n\n// Field Character Count\nconst FieldCharCount = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const context = useFieldContext()\n\n  return (\n    <p\n      ref={ref}\n      id={context ? `${context.id}-charcount` : undefined}\n      className={cn(\n        'text-xs text-text-muted text-right pr-1 -mt-1', // 12px - right-aligned, 4px gap from input (gap-2 8px - mt-1 4px)\n        context?.disabled && 'opacity-50',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nFieldCharCount.displayName = 'FieldCharCount'\n\nexport { Field, FieldLabel, FieldError, FieldCharCount, useFieldContext }\n"],"mappings":";AAgDQ,cAyBF,YAzBE;AA9CR,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AASnB,MAAM,eAAe,MAAM,cAAwC,IAAI;AAEvE,SAAS,kBAAkB;AACzB,SAAO,MAAM,WAAW,YAAY;AACtC;AAGA,MAAM,gBAAgB,IAAI,iBAAiB;AAAA,EACzC,UAAU;AAAA,IACR,KAAK;AAAA,MACH,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,IACN;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,KAAK;AAAA,EACP;AACF,CAAC;AASD,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,WAAW,KAAK,OAAO,UAAU,UAAU,GAAG,MAAM,GAAG,QAAQ;AAChE,UAAM,KAAK,MAAM,MAAM;AAEvB,WACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,IAAI,OAAO,SAAS,GAClD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,cAAc,EAAE,IAAI,CAAC,GAAG,SAAS;AAAA,QAC/C,cAAY,SAAS;AAAA,QACrB,iBAAe,YAAY;AAAA,QAC1B,GAAG;AAAA,QAEH;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAOpB,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,UAAU,UAAU,GAAG,MAAM,GAAG,QAAQ;AACpD,UAAM,UAAU,gBAAgB;AAEhC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS,SAAS;AAAA,QAClB,WAAW;AAAA,UACT;AAAA;AAAA,UACA,SAAS,YAAY;AAAA,UACrB;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,UACA,YAAY,oBAAC,UAAK,WAAU,qBAAoB,eAAC;AAAA;AAAA;AAAA,IACpD;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAGzB,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5C,QAAM,UAAU,gBAAgB;AAEhC,MAAI,CAAC,SAAU,QAAO;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI,UAAU,GAAG,QAAQ,EAAE,WAAW;AAAA,MACtC,MAAK;AAAA,MACL,WAAW,GAAG,2BAA2B,SAAS;AAAA,MACjD,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AACD,WAAW,cAAc;AAGzB,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,UAAU,gBAAgB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI,UAAU,GAAG,QAAQ,EAAE,eAAe;AAAA,MAC1C,WAAW;AAAA,QACT;AAAA;AAAA,QACA,SAAS,YAAY;AAAA,QACrB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AACD,eAAe,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/ui/field.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Field Context for sharing state between components\ninterface FieldContextValue {\n  id: string\n  /** id of the FieldLabel, for aria-labelledby on grouped controls */\n  labelId: string\n  error?: boolean\n  disabled?: boolean\n  /** A FieldLabel is rendered inside this Field */\n  hasLabel: boolean\n  /** The Field holds labelled checkboxes / switches / a radio group and no single input */\n  isGroup: boolean\n  registerLabel: () => () => void\n  registerControl: (kind: FieldControlKind) => () => void\n}\n\ntype FieldControlKind = 'single' | 'group' | 'labelled'\n\nconst FieldContext = React.createContext<FieldContextValue | null>(null)\n\nfunction useFieldContext() {\n  return React.useContext(FieldContext)\n}\n\n// Controls tell their Field what they are, so FieldLabel can point at the right thing.\n// 'single': one input that takes the Field id (Input, Textarea, a bare Checkbox / Switch);\n//   FieldLabel targets it with htmlFor.\n// 'group': a Checkbox / Switch with its own label keeps a unique id; the Field becomes\n//   role=\"group\" named by FieldLabel instead of every item sharing one id.\n// 'labelled': a RadioGroup names itself from FieldLabel (aria-labelledby).\n// A single input wins: with one present, FieldLabel keeps pointing at it.\nfunction useFieldControl(kind: FieldControlKind, enabled: boolean) {\n  const context = useFieldContext()\n  const register = context?.registerControl\n  React.useEffect(() => {\n    if (!enabled || !register) return\n    return register(kind)\n  }, [enabled, register, kind])\n}\n\n// Field wrapper\nconst fieldVariants = cva('flex flex-col', {\n  variants: {\n    gap: {\n      none: 'gap-0',\n      xs: 'gap-1',\n      sm: 'gap-1.5',\n      default: 'gap-2',\n      lg: 'gap-3',\n    },\n  },\n  defaultVariants: {\n    gap: 'default',\n  },\n})\n\nexport interface FieldProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof fieldVariants> {\n  error?: boolean\n  disabled?: boolean\n}\n\nconst Field = React.forwardRef<HTMLDivElement, FieldProps>(\n  ({ className, gap, error, disabled, children, ...props }, ref) => {\n    const id = React.useId()\n    const labelId = `${id}-label`\n    const [labelCount, setLabelCount] = React.useState(0)\n    const [counts, setCounts] = React.useState({ single: 0, group: 0, labelled: 0 })\n\n    const registerLabel = React.useCallback(() => {\n      setLabelCount((n) => n + 1)\n      return () => setLabelCount((n) => n - 1)\n    }, [])\n    const registerControl = React.useCallback((kind: FieldControlKind) => {\n      setCounts((c) => ({ ...c, [kind]: c[kind] + 1 }))\n      return () => setCounts((c) => ({ ...c, [kind]: c[kind] - 1 }))\n    }, [])\n\n    const hasLabel = labelCount > 0\n    const isGroup = counts.single === 0 && (counts.group > 0 || counts.labelled > 0)\n    const asGroup = counts.single === 0 && counts.group > 0\n    const contextValue = React.useMemo(\n      () => ({ id, labelId, error, disabled, hasLabel, isGroup, registerLabel, registerControl }),\n      [id, labelId, error, disabled, hasLabel, isGroup, registerLabel, registerControl]\n    )\n\n    return (\n      <FieldContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          role={asGroup ? 'group' : undefined}\n          aria-labelledby={asGroup && hasLabel ? labelId : undefined}\n          className={cn(fieldVariants({ gap }), className)}\n          data-error={error || undefined}\n          data-disabled={disabled || undefined}\n          {...props}\n        >\n          {children}\n        </div>\n      </FieldContext.Provider>\n    )\n  }\n)\nField.displayName = 'Field'\n\n// Field Label\nexport interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  required?: boolean\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  ({ className, required, children, ...props }, ref) => {\n    const context = useFieldContext()\n    const registerLabel = context?.registerLabel\n    React.useEffect(() => registerLabel?.(), [registerLabel])\n\n    return (\n      <label\n        ref={ref}\n        id={context?.labelId}\n        // Grouped controls have their own labels; the group title targets no input\n        htmlFor={context && !context.isGroup ? context.id : undefined}\n        className={cn(\n          'text-md font-semibold text-foreground', // 14px - primary field identifier\n          context?.disabled && 'opacity-50 cursor-not-allowed',\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {required && <span className=\"text-error ml-0.5\">*</span>}\n      </label>\n    )\n  }\n)\nFieldLabel.displayName = 'FieldLabel'\n\n// Field Error\nconst FieldError = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n  const context = useFieldContext()\n\n  if (!children) return null\n\n  return (\n    <p\n      ref={ref}\n      id={context ? `${context.id}-error` : undefined}\n      role=\"alert\"\n      className={cn('text-xs text-error pl-1', className)} // 12px - color-distinguished, left-aligned with input text\n      {...props}\n    >\n      {children}\n    </p>\n  )\n})\nFieldError.displayName = 'FieldError'\n\n// Field Character Count\nconst FieldCharCount = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n  const context = useFieldContext()\n\n  return (\n    <p\n      ref={ref}\n      id={context ? `${context.id}-charcount` : undefined}\n      className={cn(\n        'text-xs text-text-muted text-right pr-1 -mt-1', // 12px - right-aligned, 4px gap from input (gap-2 8px - mt-1 4px)\n        context?.disabled && 'opacity-50',\n        className\n      )}\n      {...props}\n    />\n  )\n})\nFieldCharCount.displayName = 'FieldCharCount'\n\nexport { Field, FieldLabel, FieldError, FieldCharCount, useFieldContext, useFieldControl }\n"],"mappings":";AA8FQ,cA6BF,YA7BE;AA5FR,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAmBnB,MAAM,eAAe,MAAM,cAAwC,IAAI;AAEvE,SAAS,kBAAkB;AACzB,SAAO,MAAM,WAAW,YAAY;AACtC;AASA,SAAS,gBAAgB,MAAwB,SAAkB;AACjE,QAAM,UAAU,gBAAgB;AAChC,QAAM,WAAW,SAAS;AAC1B,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,WAAW,CAAC,SAAU;AAC3B,WAAO,SAAS,IAAI;AAAA,EACtB,GAAG,CAAC,SAAS,UAAU,IAAI,CAAC;AAC9B;AAGA,MAAM,gBAAgB,IAAI,iBAAiB;AAAA,EACzC,UAAU;AAAA,IACR,KAAK;AAAA,MACH,MAAM;AAAA,MACN,IAAI;AAAA,MACJ,IAAI;AAAA,MACJ,SAAS;AAAA,MACT,IAAI;AAAA,IACN;AAAA,EACF;AAAA,EACA,iBAAiB;AAAA,IACf,KAAK;AAAA,EACP;AACF,CAAC;AASD,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,WAAW,KAAK,OAAO,UAAU,UAAU,GAAG,MAAM,GAAG,QAAQ;AAChE,UAAM,KAAK,MAAM,MAAM;AACvB,UAAM,UAAU,GAAG,EAAE;AACrB,UAAM,CAAC,YAAY,aAAa,IAAI,MAAM,SAAS,CAAC;AACpD,UAAM,CAAC,QAAQ,SAAS,IAAI,MAAM,SAAS,EAAE,QAAQ,GAAG,OAAO,GAAG,UAAU,EAAE,CAAC;AAE/E,UAAM,gBAAgB,MAAM,YAAY,MAAM;AAC5C,oBAAc,CAAC,MAAM,IAAI,CAAC;AAC1B,aAAO,MAAM,cAAc,CAAC,MAAM,IAAI,CAAC;AAAA,IACzC,GAAG,CAAC,CAAC;AACL,UAAM,kBAAkB,MAAM,YAAY,CAAC,SAA2B;AACpE,gBAAU,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,IAAI,GAAG,EAAE,IAAI,IAAI,EAAE,EAAE;AAChD,aAAO,MAAM,UAAU,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,IAAI,GAAG,EAAE,IAAI,IAAI,EAAE,EAAE;AAAA,IAC/D,GAAG,CAAC,CAAC;AAEL,UAAM,WAAW,aAAa;AAC9B,UAAM,UAAU,OAAO,WAAW,MAAM,OAAO,QAAQ,KAAK,OAAO,WAAW;AAC9E,UAAM,UAAU,OAAO,WAAW,KAAK,OAAO,QAAQ;AACtD,UAAM,eAAe,MAAM;AAAA,MACzB,OAAO,EAAE,IAAI,SAAS,OAAO,UAAU,UAAU,SAAS,eAAe,gBAAgB;AAAA,MACzF,CAAC,IAAI,SAAS,OAAO,UAAU,UAAU,SAAS,eAAe,eAAe;AAAA,IAClF;AAEA,WACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,cAC5B;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAM,UAAU,UAAU;AAAA,QAC1B,mBAAiB,WAAW,WAAW,UAAU;AAAA,QACjD,WAAW,GAAG,cAAc,EAAE,IAAI,CAAC,GAAG,SAAS;AAAA,QAC/C,cAAY,SAAS;AAAA,QACrB,iBAAe,YAAY;AAAA,QAC1B,GAAG;AAAA,QAEH;AAAA;AAAA,IACH,GACF;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAOpB,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,UAAU,UAAU,GAAG,MAAM,GAAG,QAAQ;AACpD,UAAM,UAAU,gBAAgB;AAChC,UAAM,gBAAgB,SAAS;AAC/B,UAAM,UAAU,MAAM,gBAAgB,GAAG,CAAC,aAAa,CAAC;AAExD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,IAAI,SAAS;AAAA,QAEb,SAAS,WAAW,CAAC,QAAQ,UAAU,QAAQ,KAAK;AAAA,QACpD,WAAW;AAAA,UACT;AAAA;AAAA,UACA,SAAS,YAAY;AAAA,UACrB;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,UACA,YAAY,oBAAC,UAAK,WAAU,qBAAoB,eAAC;AAAA;AAAA;AAAA,IACpD;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAGzB,MAAM,aAAa,MAAM,WAGvB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC5C,QAAM,UAAU,gBAAgB;AAEhC,MAAI,CAAC,SAAU,QAAO;AAEtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI,UAAU,GAAG,QAAQ,EAAE,WAAW;AAAA,MACtC,MAAK;AAAA,MACL,WAAW,GAAG,2BAA2B,SAAS;AAAA,MACjD,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AACD,WAAW,cAAc;AAGzB,MAAM,iBAAiB,MAAM,WAG3B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAClC,QAAM,UAAU,gBAAgB;AAEhC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,IAAI,UAAU,GAAG,QAAQ,EAAE,eAAe;AAAA,MAC1C,WAAW;AAAA,QACT;AAAA;AAAA,QACA,SAAS,YAAY;AAAA,QACrB;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AACD,eAAe,cAAc;","names":[]}

package/dist/components/ui/icon-button.mjs

@@ -3,8 +3,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
-import { cn } from "../../lib/utils";
-import { useButtonGroup } from "./button-group";
+import { cn } from "../../lib/utils.mjs";
+import { useButtonGroup } from "./button-group.mjs";
 const solidColorMap = {
   default: "bg-foreground text-background hover:bg-foreground/90 active:bg-foreground/80",
   primary: "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",

package/dist/components/ui/index.d.mts

@@ -9,7 +9,7 @@ export { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, t
 export { Segmented, SegmentedItem, SegmentedItemProps, SegmentedProps, segmentedItemVariants, segmentedVariants } from './segmented.mjs';
 export { Input, InputProps, inputVariants } from './input.mjs';
 export { Textarea, TextareaProps, textareaVariants } from './textarea.mjs';
-export { Field, FieldCharCount, FieldError, FieldLabel, FieldLabelProps, FieldProps, useFieldContext } from './field.mjs';
+export { Field, FieldCharCount, FieldError, FieldLabel, FieldLabelProps, FieldProps, useFieldContext, useFieldControl } from './field.mjs';
 export { Checkbox, CheckboxColor, CheckboxProps, checkboxVariants } from './checkbox.mjs';
 export { RadioColor, RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps, radioGroupVariants, radioItemVariants } from './radio-group.mjs';
 export { Switch, SwitchColor, SwitchLabelPosition, SwitchProps, switchVariants } from './switch.mjs';

package/dist/components/ui/index.d.ts

@@ -9,7 +9,7 @@ export { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps, ToggleGroupProps, t
 export { Segmented, SegmentedItem, SegmentedItemProps, SegmentedProps, segmentedItemVariants, segmentedVariants } from './segmented.js';
 export { Input, InputProps, inputVariants } from './input.js';
 export { Textarea, TextareaProps, textareaVariants } from './textarea.js';
-export { Field, FieldCharCount, FieldError, FieldLabel, FieldLabelProps, FieldProps, useFieldContext } from './field.js';
+export { Field, FieldCharCount, FieldError, FieldLabel, FieldLabelProps, FieldProps, useFieldContext, useFieldControl } from './field.js';
 export { Checkbox, CheckboxColor, CheckboxProps, checkboxVariants } from './checkbox.js';
 export { RadioColor, RadioGroup, RadioGroupItem, RadioGroupItemProps, RadioGroupProps, radioGroupVariants, radioItemVariants } from './radio-group.js';
 export { Switch, SwitchColor, SwitchLabelPosition, SwitchProps, switchVariants } from './switch.js';