@karakuri-ui/react 0.3.6 → 0.3.8

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

@@ -25,7 +25,7 @@ interface AccordionItemProps extends React.ComponentPropsWithoutRef<typeof Accor
 }
 declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
 declare const accordionTriggerVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
     iconPosition?: "left" | "right" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface AccordionTriggerProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {

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

@@ -25,7 +25,7 @@ interface AccordionItemProps extends React.ComponentPropsWithoutRef<typeof Accor
 }
 declare const AccordionItem: React.ForwardRefExoticComponent<AccordionItemProps & React.RefAttributes<HTMLDivElement>>;
 declare const accordionTriggerVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
     iconPosition?: "left" | "right" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface AccordionTriggerProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {

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

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const alertVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
-    radius?: "sm" | "lg" | "base" | "none" | "md" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
+    radius?: "sm" | "lg" | "none" | "base" | "md" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type AlertVariant = 'default' | 'outline' | 'filled';
 type AlertColor = 'info' | 'success' | 'warning' | 'error';

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

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const alertVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
-    radius?: "sm" | "lg" | "base" | "none" | "md" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
+    radius?: "sm" | "lg" | "none" | "base" | "md" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type AlertVariant = 'default' | 'outline' | 'filled';
 type AlertColor = 'info' | 'success' | 'warning' | 'error';

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

@@ -4,8 +4,8 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { VariantProps } from 'class-variance-authority';
 
 declare const avatarVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | "xl" | "2xl" | "xs" | null | undefined;
-    shape?: "circle" | "square" | null | undefined;
+    size?: "sm" | "default" | "lg" | "xl" | "2xl" | "xs" | null | undefined;
+    shape?: "square" | "circle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const avatarColors: readonly [{
     readonly vivid: {

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

@@ -4,8 +4,8 @@ import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { VariantProps } from 'class-variance-authority';
 
 declare const avatarVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | "xl" | "2xl" | "xs" | null | undefined;
-    shape?: "circle" | "square" | null | undefined;
+    size?: "sm" | "default" | "lg" | "xl" | "2xl" | "xs" | null | undefined;
+    shape?: "square" | "circle" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const avatarColors: readonly [{
     readonly vivid: {

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
     radius?: "sm" | "lg" | "base" | "md" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type BadgeVariant = 'solid' | 'subtle' | 'outline';

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
     radius?: "sm" | "lg" | "base" | "md" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type BadgeVariant = 'solid' | 'subtle' | 'outline';

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

@@ -10,9 +10,9 @@ declare const solidColorMap: {
 };
 type ButtonColor = keyof typeof solidColorMap;
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "outline" | "solid" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | "md" | "xs" | null | undefined;
-    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+    variant?: "outline" | "link" | "solid" | "ghost" | null | undefined;
+    size?: "sm" | "default" | "lg" | "md" | "icon" | "xs" | null | undefined;
+    radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

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

@@ -10,9 +10,9 @@ declare const solidColorMap: {
 };
 type ButtonColor = keyof typeof solidColorMap;
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "outline" | "solid" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | "md" | "xs" | null | undefined;
-    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+    variant?: "outline" | "link" | "solid" | "ghost" | null | undefined;
+    size?: "sm" | "default" | "lg" | "md" | "icon" | "xs" | null | undefined;
+    radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

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

@@ -6,7 +6,7 @@ type CardSize = 'sm' | 'default' | 'lg';
 type CardDirection = 'vertical' | 'horizontal';
 declare const cardVariants: (props?: ({
     variant?: "default" | "outline" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
     radius?: "sm" | "lg" | "base" | "md" | "xl" | "2xl" | null | undefined;
     direction?: "horizontal" | "vertical" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

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

@@ -6,7 +6,7 @@ type CardSize = 'sm' | 'default' | 'lg';
 type CardDirection = 'vertical' | 'horizontal';
 declare const cardVariants: (props?: ({
     variant?: "default" | "outline" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
     radius?: "sm" | "lg" | "base" | "md" | "xl" | "2xl" | null | undefined;
     direction?: "horizontal" | "vertical" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

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

@@ -9,7 +9,7 @@ declare const checkboxColorMap: {
 };
 type CheckboxColor = keyof typeof checkboxColorMap;
 declare const checkboxVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
     radius?: "sm" | "none" | "md" | null | undefined;
     weight?: "bold" | "thin" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

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

@@ -9,7 +9,7 @@ declare const checkboxColorMap: {
 };
 type CheckboxColor = keyof typeof checkboxColorMap;
 declare const checkboxVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "sm" | "default" | "lg" | null | undefined;
     radius?: "sm" | "none" | "md" | null | undefined;
     weight?: "bold" | "thin" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

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

@@ -6,7 +6,7 @@ declare const dividerVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
     variant?: "solid" | "dashed" | "dotted" | null | undefined;
     color?: "default" | "strong" | "muted" | null | undefined;
-    spacing?: "default" | "sm" | "lg" | "md" | null | undefined;
+    spacing?: "sm" | "default" | "lg" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface DividerProps extends Omit<React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, 'children' | 'color' | 'orientation'> {
     /** Direction of the divider */

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

@@ -6,7 +6,7 @@ declare const dividerVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
     variant?: "solid" | "dashed" | "dotted" | null | undefined;
     color?: "default" | "strong" | "muted" | null | undefined;
-    spacing?: "default" | "sm" | "lg" | "md" | null | undefined;
+    spacing?: "sm" | "default" | "lg" | "md" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface DividerProps extends Omit<React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>, 'children' | 'color' | 'orientation'> {
     /** Direction of the divider */

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

@@ -12,14 +12,17 @@ interface FieldContextValue {
     hasLabel: boolean;
     /** The Field holds labelled checkboxes / switches / a radio group and no single input */
     isGroup: boolean;
+    /** The FieldLabel is marked required; single controls set aria-required */
+    required: boolean;
     registerLabel: () => () => void;
+    registerRequired: () => () => 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;
+    gap?: "sm" | "default" | "lg" | "none" | "xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface FieldProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof fieldVariants> {
     error?: boolean;
@@ -28,6 +31,8 @@ interface FieldProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<
 declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;
 interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     required?: boolean;
+    /** Text of the required badge shown when `required` is set */
+    requiredLabel?: React.ReactNode;
 }
 declare const FieldLabel: React.ForwardRefExoticComponent<FieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
 declare const FieldError: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

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

@@ -12,14 +12,17 @@ interface FieldContextValue {
     hasLabel: boolean;
     /** The Field holds labelled checkboxes / switches / a radio group and no single input */
     isGroup: boolean;
+    /** The FieldLabel is marked required; single controls set aria-required */
+    required: boolean;
     registerLabel: () => () => void;
+    registerRequired: () => () => 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;
+    gap?: "sm" | "default" | "lg" | "none" | "xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface FieldProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof fieldVariants> {
     error?: boolean;
@@ -28,6 +31,8 @@ interface FieldProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<
 declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;
 interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     required?: boolean;
+    /** Text of the required badge shown when `required` is set */
+    requiredLabel?: React.ReactNode;
 }
 declare const FieldLabel: React.ForwardRefExoticComponent<FieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
 declare const FieldError: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/ui/field.js

@@ -72,21 +72,27 @@ const Field = React.forwardRef(
     const id = React.useId();
     const labelId = `${id}-label`;
     const [labelCount, setLabelCount] = React.useState(0);
+    const [requiredCount, setRequiredCount] = 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 registerRequired = React.useCallback(() => {
+      setRequiredCount((n) => n + 1);
+      return () => setRequiredCount((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 required = requiredCount > 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]
+      () => ({ id, labelId, error, disabled, hasLabel, isGroup, required, registerLabel, registerRequired, registerControl }),
+      [id, labelId, error, disabled, hasLabel, isGroup, required, registerLabel, registerRequired, registerControl]
     );
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
@@ -105,10 +111,12 @@ const Field = React.forwardRef(
 );
 Field.displayName = "Field";
 const FieldLabel = React.forwardRef(
-  ({ className, required, children, ...props }, ref) => {
+  ({ className, required, requiredLabel = "\u5FC5\u9808", children, ...props }, ref) => {
     const context = useFieldContext();
     const registerLabel = context?.registerLabel;
     React.useEffect(() => registerLabel?.(), [registerLabel]);
+    const registerRequired = context?.registerRequired;
+    React.useEffect(() => required ? registerRequired?.() : void 0, [required, registerRequired]);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "label",
       {
@@ -124,7 +132,17 @@ const FieldLabel = React.forwardRef(
         ...props,
         children: [
           children,
-          required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-error ml-0.5", children: "*" })
+          required && // Neutral badge, not the error color: red stays reserved for errors.
+          // Inside a Field the single control carries aria-required, so the badge is hidden
+          // from assistive technology there to avoid announcing "required" twice.
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              "aria-hidden": context && !context.isGroup ? true : void 0,
+              className: "ml-1.5 inline-flex h-5 items-center rounded px-1.5 align-middle text-2xs font-semibold whitespace-nowrap bg-background-muted text-text-muted",
+              children: requiredLabel
+            }
+          )
         ]
       }
     );

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  /** 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":[]}
+{"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  /** The FieldLabel is marked required; single controls set aria-required */\n  required: boolean\n  registerLabel: () => () => void\n  registerRequired: () => () => 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 [requiredCount, setRequiredCount] = 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 registerRequired = React.useCallback(() => {\n      setRequiredCount((n) => n + 1)\n      return () => setRequiredCount((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 required = requiredCount > 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, required, registerLabel, registerRequired, registerControl }),\n      [id, labelId, error, disabled, hasLabel, isGroup, required, registerLabel, registerRequired, 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  /** Text of the required badge shown when `required` is set */\n  requiredLabel?: React.ReactNode\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  ({ className, required, requiredLabel = '必須', children, ...props }, ref) => {\n    const context = useFieldContext()\n    const registerLabel = context?.registerLabel\n    React.useEffect(() => registerLabel?.(), [registerLabel])\n    const registerRequired = context?.registerRequired\n    React.useEffect(() => (required ? registerRequired?.() : undefined), [required, registerRequired])\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 && (\n          // Neutral badge, not the error color: red stays reserved for errors.\n          // Inside a Field the single control carries aria-required, so the badge is hidden\n          // from assistive technology there to avoid announcing \"required\" twice.\n          <span\n            aria-hidden={context && !context.isGroup ? true : undefined}\n            className=\"ml-1.5 inline-flex h-5 items-center rounded px-1.5 align-middle text-2xs font-semibold whitespace-nowrap bg-background-muted text-text-muted\"\n          >\n            {requiredLabel}\n          </span>\n        )}\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

@@ -34,21 +34,27 @@ const Field = React.forwardRef(
     const id = React.useId();
     const labelId = `${id}-label`;
     const [labelCount, setLabelCount] = React.useState(0);
+    const [requiredCount, setRequiredCount] = 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 registerRequired = React.useCallback(() => {
+      setRequiredCount((n) => n + 1);
+      return () => setRequiredCount((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 required = requiredCount > 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]
+      () => ({ id, labelId, error, disabled, hasLabel, isGroup, required, registerLabel, registerRequired, registerControl }),
+      [id, labelId, error, disabled, hasLabel, isGroup, required, registerLabel, registerRequired, registerControl]
     );
     return /* @__PURE__ */ jsx(FieldContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
       "div",
@@ -67,10 +73,12 @@ const Field = React.forwardRef(
 );
 Field.displayName = "Field";
 const FieldLabel = React.forwardRef(
-  ({ className, required, children, ...props }, ref) => {
+  ({ className, required, requiredLabel = "\u5FC5\u9808", children, ...props }, ref) => {
     const context = useFieldContext();
     const registerLabel = context?.registerLabel;
     React.useEffect(() => registerLabel?.(), [registerLabel]);
+    const registerRequired = context?.registerRequired;
+    React.useEffect(() => required ? registerRequired?.() : void 0, [required, registerRequired]);
     return /* @__PURE__ */ jsxs(
       "label",
       {
@@ -86,7 +94,17 @@ const FieldLabel = React.forwardRef(
         ...props,
         children: [
           children,
-          required && /* @__PURE__ */ jsx("span", { className: "text-error ml-0.5", children: "*" })
+          required && // Neutral badge, not the error color: red stays reserved for errors.
+          // Inside a Field the single control carries aria-required, so the badge is hidden
+          // from assistive technology there to avoid announcing "required" twice.
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": context && !context.isGroup ? true : void 0,
+              className: "ml-1.5 inline-flex h-5 items-center rounded px-1.5 align-middle text-2xs font-semibold whitespace-nowrap bg-background-muted text-text-muted",
+              children: requiredLabel
+            }
+          )
         ]
       }
     );

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  /** 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":[]}
+{"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  /** The FieldLabel is marked required; single controls set aria-required */\n  required: boolean\n  registerLabel: () => () => void\n  registerRequired: () => () => 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 [requiredCount, setRequiredCount] = 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 registerRequired = React.useCallback(() => {\n      setRequiredCount((n) => n + 1)\n      return () => setRequiredCount((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 required = requiredCount > 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, required, registerLabel, registerRequired, registerControl }),\n      [id, labelId, error, disabled, hasLabel, isGroup, required, registerLabel, registerRequired, 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  /** Text of the required badge shown when `required` is set */\n  requiredLabel?: React.ReactNode\n}\n\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\n  ({ className, required, requiredLabel = '必須', children, ...props }, ref) => {\n    const context = useFieldContext()\n    const registerLabel = context?.registerLabel\n    React.useEffect(() => registerLabel?.(), [registerLabel])\n    const registerRequired = context?.registerRequired\n    React.useEffect(() => (required ? registerRequired?.() : undefined), [required, registerRequired])\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 && (\n          // Neutral badge, not the error color: red stays reserved for errors.\n          // Inside a Field the single control carries aria-required, so the badge is hidden\n          // from assistive technology there to avoid announcing \"required\" twice.\n          <span\n            aria-hidden={context && !context.isGroup ? true : undefined}\n            className=\"ml-1.5 inline-flex h-5 items-center rounded px-1.5 align-middle text-2xs font-semibold whitespace-nowrap bg-background-muted text-text-muted\"\n          >\n            {requiredLabel}\n          </span>\n        )}\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":";AAuGQ,cAiCF,YAjCE;AArGR,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAsBnB,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,eAAe,gBAAgB,IAAI,MAAM,SAAS,CAAC;AAC1D,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,mBAAmB,MAAM,YAAY,MAAM;AAC/C,uBAAiB,CAAC,MAAM,IAAI,CAAC;AAC7B,aAAO,MAAM,iBAAiB,CAAC,MAAM,IAAI,CAAC;AAAA,IAC5C,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,WAAW,gBAAgB;AACjC,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,UAAU,eAAe,kBAAkB,gBAAgB;AAAA,MACrH,CAAC,IAAI,SAAS,OAAO,UAAU,UAAU,SAAS,UAAU,eAAe,kBAAkB,eAAe;AAAA,IAC9G;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;AASpB,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,UAAU,gBAAgB,gBAAM,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC1E,UAAM,UAAU,gBAAgB;AAChC,UAAM,gBAAgB,SAAS;AAC/B,UAAM,UAAU,MAAM,gBAAgB,GAAG,CAAC,aAAa,CAAC;AACxD,UAAM,mBAAmB,SAAS;AAClC,UAAM,UAAU,MAAO,WAAW,mBAAmB,IAAI,QAAY,CAAC,UAAU,gBAAgB,CAAC;AAEjG,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;AAAA;AAAA;AAAA,UAIC;AAAA,YAAC;AAAA;AAAA,cACC,eAAa,WAAW,CAAC,QAAQ,UAAU,OAAO;AAAA,cAClD,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA;AAAA;AAAA,IAEJ;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.d.mts

@@ -5,8 +5,8 @@ import { ButtonColor } from './button.mjs';
 
 declare const iconButtonVariants: (props?: ({
     variant?: "outline" | "solid" | "subtle" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "md" | "xs" | null | undefined;
-    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+    size?: "sm" | "default" | "lg" | "md" | "xs" | null | undefined;
+    radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
     /** Solid variant color */

package/dist/components/ui/icon-button.d.ts

@@ -5,8 +5,8 @@ import { ButtonColor } from './button.js';
 
 declare const iconButtonVariants: (props?: ({
     variant?: "outline" | "solid" | "subtle" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "md" | "xs" | null | undefined;
-    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+    size?: "sm" | "default" | "lg" | "md" | "xs" | null | undefined;
+    radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
     /** Solid variant color */

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

@@ -5,9 +5,9 @@ import { VariantProps } from 'class-variance-authority';
 declare const inputVariants: (props?: ({
     variant?: "default" | "filled" | null | undefined;
     focusRing?: boolean | null | undefined;
-    size?: "default" | "sm" | "lg" | "xl" | "xs" | null | undefined;
-    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
-    state?: "default" | "error" | null | undefined;
+    size?: "sm" | "default" | "lg" | "xl" | "xs" | null | undefined;
+    radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+    state?: "error" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputVariants> {
     leftIcon?: React.ReactNode;

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

@@ -5,9 +5,9 @@ import { VariantProps } from 'class-variance-authority';
 declare const inputVariants: (props?: ({
     variant?: "default" | "filled" | null | undefined;
     focusRing?: boolean | null | undefined;
-    size?: "default" | "sm" | "lg" | "xl" | "xs" | null | undefined;
-    radius?: "default" | "sm" | "lg" | "base" | "none" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
-    state?: "default" | "error" | null | undefined;
+    size?: "sm" | "default" | "lg" | "xl" | "xs" | null | undefined;
+    radius?: "sm" | "default" | "lg" | "none" | "base" | "xl" | "2xl" | "3xl" | "full" | null | undefined;
+    state?: "error" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputVariants> {
     leftIcon?: React.ReactNode;

package/dist/components/ui/input.js

@@ -213,6 +213,7 @@ const Input = React.forwardRef(
               className
             ),
             "aria-invalid": resolvedError || void 0,
+            "aria-required": fieldContext?.required || void 0,
             "aria-describedby": ariaDescribedBy,
             disabled: isDisabled,
             ref,
@@ -238,6 +239,7 @@ const Input = React.forwardRef(
           className
         ),
         "aria-invalid": resolvedError || void 0,
+        "aria-required": fieldContext?.required || void 0,
         "aria-describedby": ariaDescribedBy,
         disabled: isDisabled,
         ref,