@arolariu/components 0.5.0 → 1.1.0

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

@@ -1,26 +1,225 @@
-import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
-import { Label } from "./label";
-declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react/jsx-runtime").JSX.Element;
-declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
-    variant?: "legend" | "label";
-}): import("react/jsx-runtime").JSX.Element;
-declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare const fieldVariants: (props?: {
-    orientation?: "horizontal" | "vertical" | "responsive";
-} & import("class-variance-authority/types").ClassProp) => string;
-declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): import("react/jsx-runtime").JSX.Element;
-declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react/jsx-runtime").JSX.Element;
-declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
-declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
-    children?: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
-declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
-    errors?: Array<{
-        message?: string;
-    } | undefined>;
-}): import("react/jsx-runtime").JSX.Element;
+/** Supported layouts for {@link Field}. */
+export type FieldOrientation = "vertical" | "horizontal" | "responsive";
+/** Supported legend render styles for {@link FieldLegend}. */
+export type FieldLegendVariant = "legend" | "label";
+/** Shape of error objects accepted by {@link FieldError}. */
+export interface FieldErrorItem {
+    /** Human-readable validation error message. @default undefined */
+    message?: string;
+}
+/**
+ * Props for the {@link FieldSet} component.
+ */
+export type FieldSetProps = React.ComponentPropsWithoutRef<"fieldset">;
+/**
+ * Props for the {@link FieldLegend} component.
+ */
+export interface FieldLegendProps extends React.ComponentPropsWithoutRef<"legend"> {
+    /** Visual treatment used for the legend content. @default "legend" */
+    variant?: FieldLegendVariant;
+}
+/**
+ * Props for the {@link FieldGroup} component.
+ */
+export type FieldGroupProps = React.ComponentPropsWithoutRef<"div">;
+/**
+ * Props for the {@link Field} component.
+ */
+export interface FieldProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** Layout used to arrange labels and controls. @default "vertical" */
+    orientation?: FieldOrientation;
+}
+/**
+ * Props for the {@link FieldContent} component.
+ */
+export type FieldContentProps = React.ComponentPropsWithoutRef<"div">;
+/**
+ * Props for the {@link FieldLabel} component.
+ */
+export type FieldLabelProps = React.ComponentPropsWithoutRef<"label">;
+/**
+ * Props for the {@link FieldTitle} component.
+ */
+export type FieldTitleProps = React.ComponentPropsWithoutRef<"div">;
+/**
+ * Props for the {@link FieldDescription} component.
+ */
+export type FieldDescriptionProps = React.ComponentPropsWithoutRef<"p">;
+/**
+ * Props for the {@link FieldSeparator} component.
+ */
+export type FieldSeparatorProps = React.ComponentPropsWithoutRef<"div">;
+/**
+ * Props for the {@link FieldError} component.
+ */
+export interface FieldErrorProps extends React.ComponentPropsWithoutRef<"div"> {
+    /** Validation errors rendered when children are not provided. @default undefined */
+    errors?: Array<FieldErrorItem | undefined>;
+}
+/**
+ * Groups related controls within a semantic fieldset.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<fieldset>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <FieldSet>
+ *   <FieldLegend>Preferences</FieldLegend>
+ * </FieldSet>
+ * ```
+ *
+ * @see {@link FieldSetProps} for available props
+ */
+declare const FieldSet: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, HTMLFieldSetElement>, "ref"> & React.RefAttributes<HTMLFieldSetElement>>;
+/**
+ * Labels a grouped set of controls within {@link FieldSet}.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<legend>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <FieldLegend variant='label'>Billing address</FieldLegend>
+ * ```
+ *
+ * @see {@link FieldLegendProps} for available props
+ */
+declare const FieldLegend: React.ForwardRefExoticComponent<FieldLegendProps & React.RefAttributes<HTMLLegendElement>>;
+/**
+ * Stacks multiple field rows under a shared container.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<div>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <FieldGroup>
+ *   <Field />
+ * </FieldGroup>
+ * ```
+ *
+ * @see {@link FieldGroupProps} for available props
+ */
+declare const FieldGroup: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Creates a styled field row for labels, descriptions, and controls.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<div>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <Field orientation='responsive'>...</Field>
+ * ```
+ *
+ * @see {@link FieldProps} for available props
+ */
+declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Wraps field controls and supporting content.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<div>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <FieldContent>{control}</FieldContent>
+ * ```
+ *
+ * @see {@link FieldContentProps} for available props
+ */
+declare const FieldContent: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Renders the label associated with a form control.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<label>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <FieldLabel htmlFor='email'>Email</FieldLabel>
+ * ```
+ *
+ * @see {@link FieldLabelProps} for available props
+ */
+declare const FieldLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+/**
+ * Displays the leading title content for a field row.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<div>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <FieldTitle>Account</FieldTitle>
+ * ```
+ *
+ * @see {@link FieldTitleProps} for available props
+ */
+declare const FieldTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Renders supplementary descriptive text for a field.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<p>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <FieldDescription>Used for account recovery.</FieldDescription>
+ * ```
+ *
+ * @see {@link FieldDescriptionProps} for available props
+ */
+declare const FieldDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * Separates field sections with optional inline content.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<div>` element
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <FieldSeparator>or</FieldSeparator>
+ * ```
+ *
+ * @see {@link FieldSeparatorProps} for available props
+ */
+declare const FieldSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Presents validation feedback for a field.
+ *
+ * @remarks
+ * - Pure CSS component (no Base UI primitive)
+ * - Renders a `<div>` element when content exists
+ * - Styling via CSS Modules with `--ac-*` custom properties
+ *
+ * @example
+ * ```tsx
+ * <FieldError errors={[{message: "Required"}]} />
+ * ```
+ *
+ * @see {@link FieldErrorProps} for available props
+ */
+declare const FieldError: React.ForwardRefExoticComponent<FieldErrorProps & React.RefAttributes<HTMLDivElement>>;
 export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };
 //# sourceMappingURL=field.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../src/components/ui/field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAM,KAAK,YAAY,EAAC,MAAM,0BAA0B,CAAC;AAChE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,KAAK,EAAC,MAAM,uBAAuB,CAAC;AAI5C,iBAAS,QAAQ,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,2CAQxE;AAED,iBAAS,WAAW,CAAC,EAAC,SAAS,EAAE,OAAkB,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;IAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAAC,2CAS9H;AAED,iBAAS,UAAU,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWrE;AAED,QAAA,MAAM,aAAa;;iEAmBjB,CAAC;AAEH,iBAAS,KAAK,CAAC,EAAC,SAAS,EAAE,WAAwB,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,2CAU/H;AAED,iBAAS,YAAY,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQvE;AAED,iBAAS,UAAU,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,2CAa5E;AAED,iBAAS,UAAU,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAWrE;AAED,iBAAS,gBAAgB,CAAC,EAAC,SAAS,EAAE,GAAG,KAAK,EAAC,EAAE,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,2CAazE;AAED,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,2CAiBA;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,MAAM,CAAC,EAAE,KAAK,CAAC;QAAC,OAAO,CAAC,EAAE,MAAM,CAAA;KAAC,GAAG,SAAS,CAAC,CAAC;CAChD,2CAmCA;AAED,OAAO,EAAC,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAC,CAAC"}
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../src/components/ui/field.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,2CAA2C;AAC3C,MAAM,MAAM,gBAAgB,GAAG,UAAU,GAAG,YAAY,GAAG,YAAY,CAAC;AAExE,8DAA8D;AAC9D,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEpD,6DAA6D;AAC7D,MAAM,WAAW,cAAc;IAC7B,kEAAkE;IAClE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,wBAAwB,CAAC,UAAU,CAAC,CAAC;AAEvE;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IAChF,sEAAsE;IACtE,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAEpE;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACvE,sEAAsE;IACtE,WAAW,CAAC,EAAE,gBAAgB,CAAC;CAChC;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAEtE;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC;AAEtE;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAEpE;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,CAAC;AAExE;;GAEG;AACH,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAExE;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IAC5E,oFAAoF;IACpF,MAAM,CAAC,EAAE,KAAK,CAAC,cAAc,GAAG,SAAS,CAAC,CAAC;CAC5C;AAgBD;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,QAAQ,0LASb,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,WAAW,4FAUhB,CAAC;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,QAAA,MAAM,UAAU,mKASf,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,KAAK,mFAWV,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,YAAY,mKASjB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,UAAU,8KAWf,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,UAAU,mKASf,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,gBAAgB,qLASrB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,cAAc,mKAYnB,CAAC;AAEF;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,UAAU,wFAmCf,CAAC;AAaF,OAAO,EAAC,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAC,CAAC"}

package/dist/components/ui/field.js

@@ -1,121 +1,100 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
-import { useMemo } from "react";
-import { Label } from "./label.js";
+import { forwardRef, useMemo } from "react";
 import { Separator } from "./separator.js";
 import { cn } from "../../lib/utilities.js";
-function FieldSet({ className, ...props }) {
-    return /*#__PURE__*/ jsx("fieldset", {
+import field_module from "./field.module.js";
+function getFieldOrientationClass(orientation) {
+    switch(orientation){
+        case "horizontal":
+            return field_module.horizontal;
+        case "responsive":
+            return field_module.responsive;
+        default:
+            return field_module.vertical;
+    }
+}
+const FieldSet = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("fieldset", {
+        ref: ref,
         "data-slot": "field-set",
-        className: cn("flex flex-col gap-6", "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className),
+        className: cn(field_module.fieldSet, className),
         ...props
-    });
-}
-function FieldLegend({ className, variant = "legend", ...props }) {
-    return /*#__PURE__*/ jsx("legend", {
+    }));
+const FieldLegend = /*#__PURE__*/ forwardRef(({ className, variant = "legend", ...props }, ref)=>/*#__PURE__*/ jsx("legend", {
+        ref: ref,
         "data-slot": "field-legend",
         "data-variant": variant,
-        className: cn("mb-3 font-medium", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", className),
+        className: cn(field_module.legend, "label" === variant ? field_module.legendLabel : field_module.legendDefault, className),
         ...props
-    });
-}
-function FieldGroup({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+    }));
+const FieldGroup = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
         "data-slot": "field-group",
-        className: cn("group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4", className),
+        className: cn(field_module.group, className),
         ...props
-    });
-}
-const fieldVariants = cva("group/field data-[invalid=true]:text-red-500 flex w-full gap-3 dark:data-[invalid=true]:text-red-900", {
-    variants: {
-        orientation: {
-            vertical: [
-                "flex-col [&>*]:w-full [&>.sr-only]:w-auto"
-            ],
-            horizontal: [
-                "flex-row items-center",
-                "[&>[data-slot=field-label]]:flex-auto",
-                "has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start"
-            ],
-            responsive: [
-                "@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
-                "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
-                "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
-            ]
-        }
-    },
-    defaultVariants: {
-        orientation: "vertical"
-    }
-});
-function Field({ className, orientation = "vertical", ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+    }));
+const Field = /*#__PURE__*/ forwardRef(({ className, orientation = "vertical", ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
         role: "group",
         "data-slot": "field",
         "data-orientation": orientation,
-        className: cn(fieldVariants({
-            orientation
-        }), className),
+        className: cn(field_module.field, getFieldOrientationClass(orientation), className),
         ...props
-    });
-}
-function FieldContent({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+    }));
+const FieldContent = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
         "data-slot": "field-content",
-        className: cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className),
+        className: cn(field_module.content, className),
         ...props
-    });
-}
-function FieldLabel({ className, ...props }) {
-    return /*#__PURE__*/ jsx(Label, {
+    }));
+const FieldLabel = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("label", {
+        ref: ref,
         "data-slot": "field-label",
-        className: cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4", "has-data-[state=checked]:border-neutral-900 has-data-[state=checked]:bg-neutral-900/5 dark:has-data-[state=checked]:border-neutral-50 dark:dark:has-data-[state=checked]:bg-neutral-50/10 dark:has-data-[state=checked]:bg-neutral-50/5 dark:has-data-[state=checked]:bg-neutral-900/10", className),
+        className: cn(field_module.label, className),
         ...props
-    });
-}
-function FieldTitle({ className, ...props }) {
-    return /*#__PURE__*/ jsx("div", {
+    }));
+const FieldTitle = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
+        ref: ref,
         "data-slot": "field-label",
-        className: cn("flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50", className),
+        className: cn(field_module.title, className),
         ...props
-    });
-}
-function FieldDescription({ className, ...props }) {
-    return /*#__PURE__*/ jsx("p", {
+    }));
+const FieldDescription = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("p", {
+        ref: ref,
         "data-slot": "field-description",
-        className: cn("text-sm leading-normal font-normal text-neutral-500 group-has-[[data-orientation=horizontal]]/field:text-balance dark:text-neutral-400", "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-neutral-900 dark:[&>a:hover]:text-neutral-50", className),
+        className: cn(field_module.description, className),
         ...props
-    });
-}
-function FieldSeparator({ children, className, ...props }) {
-    return /*#__PURE__*/ jsxs("div", {
+    }));
+const FieldSeparator = /*#__PURE__*/ forwardRef(({ children, className, ...props }, ref)=>/*#__PURE__*/ jsxs("div", {
+        ref: ref,
         "data-slot": "field-separator",
-        "data-content": Boolean(children) || void 0,
-        className: cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
+        "data-content": children ? "true" : void 0,
+        className: cn(field_module.separator, className),
         ...props,
         children: [
             /*#__PURE__*/ jsx(Separator, {
-                className: "absolute inset-0 top-1/2"
+                className: field_module.separatorLine
             }),
-            Boolean(children) && /*#__PURE__*/ jsx("span", {
-                className: "relative mx-auto block w-fit bg-white px-2 text-neutral-500 dark:bg-neutral-950 dark:text-neutral-400",
-                "data-slot": "field-separator-content",
+            children ? /*#__PURE__*/ jsx("span", {
+                className: field_module.separatorContent,
                 children: children
-            })
+            }) : null
         ]
-    });
-}
-function FieldError({ className, children, errors, ...props }) {
+    }));
+const FieldError = /*#__PURE__*/ forwardRef(({ className, children, errors, ...props }, ref)=>{
     const content = useMemo(()=>{
-        if (children) return children;
+        if (children) return /*#__PURE__*/ jsx("span", {
+            children: children
+        });
         if (!errors) return null;
-        if (errors?.length === 1 && errors[0]?.message) return errors[0].message;
+        if (1 === errors.length && errors[0]?.message) return /*#__PURE__*/ jsx("span", {
+            children: errors[0].message
+        });
         return /*#__PURE__*/ jsx("ul", {
-            className: "ml-4 flex list-disc flex-col gap-1",
-            children: errors.map((error, index)=>error?.message && /*#__PURE__*/ jsx("li", {
+            className: field_module.errorList,
+            children: errors.map((error, index)=>error?.message ? /*#__PURE__*/ jsx("li", {
                     children: error.message
-                }, index))
+                }, index) : null)
         });
     }, [
         children,
@@ -123,13 +102,24 @@ function FieldError({ className, children, errors, ...props }) {
     ]);
     if (!content) return null;
     return /*#__PURE__*/ jsx("div", {
+        ref: ref,
         role: "alert",
         "data-slot": "field-error",
-        className: cn("text-sm font-normal text-red-500 dark:text-red-900", className),
+        className: cn(field_module.error, className),
         ...props,
         children: content
     });
-}
+});
+FieldSet.displayName = "FieldSet";
+FieldLegend.displayName = "FieldLegend";
+FieldGroup.displayName = "FieldGroup";
+Field.displayName = "Field";
+FieldContent.displayName = "FieldContent";
+FieldLabel.displayName = "FieldLabel";
+FieldTitle.displayName = "FieldTitle";
+FieldDescription.displayName = "FieldDescription";
+FieldSeparator.displayName = "FieldSeparator";
+FieldError.displayName = "FieldError";
 export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };
 
 //# sourceMappingURL=field.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"components/ui/field.js","sources":["../../../src/components/ui/field.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {cva, type VariantProps} from \"class-variance-authority\";\r\nimport * as React from \"react\";\r\n\r\nimport {Label} from \"@/components/ui/label\";\r\nimport {Separator} from \"@/components/ui/separator\";\r\nimport {cn} from \"@/lib/utilities\";\r\n\r\nfunction FieldSet({className, ...props}: React.ComponentProps<\"fieldset\">) {\r\n  return (\r\n    <fieldset\r\n      data-slot='field-set'\r\n      className={cn(\"flex flex-col gap-6\", \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction FieldLegend({className, variant = \"legend\", ...props}: React.ComponentProps<\"legend\"> & {variant?: \"legend\" | \"label\"}) {\r\n  return (\r\n    <legend\r\n      data-slot='field-legend'\r\n      data-variant={variant}\r\n      className={cn(\"mb-3 font-medium\", \"data-[variant=legend]:text-base\", \"data-[variant=label]:text-sm\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction FieldGroup({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='field-group'\r\n      className={cn(\r\n        \"group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nconst fieldVariants = cva(\"group/field data-[invalid=true]:text-red-500 flex w-full gap-3 dark:data-[invalid=true]:text-red-900\", {\r\n  variants: {\r\n    orientation: {\r\n      vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\r\n      horizontal: [\r\n        \"flex-row items-center\",\r\n        \"[&>[data-slot=field-label]]:flex-auto\",\r\n        \"has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start\",\r\n      ],\r\n      responsive: [\r\n        \"@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto\",\r\n        \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\r\n        \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\r\n      ],\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    orientation: \"vertical\",\r\n  },\r\n});\r\n\r\nfunction Field({className, orientation = \"vertical\", ...props}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\r\n  return (\r\n    <div\r\n      role='group'\r\n      data-slot='field'\r\n      data-orientation={orientation}\r\n      className={cn(fieldVariants({orientation}), className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction FieldContent({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='field-content'\r\n      className={cn(\"group/field-content flex flex-1 flex-col gap-1.5 leading-snug\", className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction FieldLabel({className, ...props}: React.ComponentProps<typeof Label>) {\r\n  return (\r\n    <Label\r\n      data-slot='field-label'\r\n      className={cn(\r\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50\",\r\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4\",\r\n        \"has-data-[state=checked]:border-neutral-900 has-data-[state=checked]:bg-neutral-900/5 dark:has-data-[state=checked]:border-neutral-50 dark:dark:has-data-[state=checked]:bg-neutral-50/10 dark:has-data-[state=checked]:bg-neutral-50/5 dark:has-data-[state=checked]:bg-neutral-900/10\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction FieldTitle({className, ...props}: React.ComponentProps<\"div\">) {\r\n  return (\r\n    <div\r\n      data-slot='field-label'\r\n      className={cn(\r\n        \"flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction FieldDescription({className, ...props}: React.ComponentProps<\"p\">) {\r\n  return (\r\n    <p\r\n      data-slot='field-description'\r\n      className={cn(\r\n        \"text-sm leading-normal font-normal text-neutral-500 group-has-[[data-orientation=horizontal]]/field:text-balance dark:text-neutral-400\",\r\n        \"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5\",\r\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-neutral-900 dark:[&>a:hover]:text-neutral-50\",\r\n        className,\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction FieldSeparator({\r\n  children,\r\n  className,\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n  children?: React.ReactNode;\r\n}) {\r\n  return (\r\n    <div\r\n      data-slot='field-separator'\r\n      data-content={Boolean(children) || undefined}\r\n      className={cn(\"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\", className)}\r\n      {...props}>\r\n      <Separator className='absolute inset-0 top-1/2' />\r\n      {Boolean(children) && (\r\n        <span\r\n          className='relative mx-auto block w-fit bg-white px-2 text-neutral-500 dark:bg-neutral-950 dark:text-neutral-400'\r\n          data-slot='field-separator-content'>\r\n          {children}\r\n        </span>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nfunction FieldError({\r\n  className,\r\n  children,\r\n  errors,\r\n  ...props\r\n}: React.ComponentProps<\"div\"> & {\r\n  errors?: Array<{message?: string} | undefined>;\r\n}) {\r\n  // eslint-disable-next-line sonarjs/function-return-type -- expected different return type.\r\n  const content = React.useMemo(() => {\r\n    if (children) {\r\n      return children;\r\n    }\r\n\r\n    if (!errors) {\r\n      return null;\r\n    }\r\n\r\n    if (errors?.length === 1 && errors[0]?.message) {\r\n      return errors[0].message;\r\n    }\r\n\r\n    return (\r\n      <ul className='ml-4 flex list-disc flex-col gap-1'>\r\n        {errors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\r\n      </ul>\r\n    );\r\n  }, [children, errors]);\r\n\r\n  if (!content) {\r\n    return null;\r\n  }\r\n\r\n  return (\r\n    <div\r\n      role='alert'\r\n      data-slot='field-error'\r\n      className={cn(\"text-sm font-normal text-red-500 dark:text-red-900\", className)}\r\n      {...props}>\r\n      {content}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport {Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle};\r\n"],"names":["FieldSet","className","props","cn","FieldLegend","variant","FieldGroup","fieldVariants","cva","Field","orientation","FieldContent","FieldLabel","Label","FieldTitle","FieldDescription","FieldSeparator","children","Boolean","undefined","Separator","FieldError","errors","content","React","error","index"],"mappings":"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"}
+{"version":3,"file":"components/ui/field.js","sources":["../../../src/components/ui/field.tsx"],"sourcesContent":["\"use client\";\r\n\r\n/* eslint-disable jsx-a11y/label-has-associated-control */\r\n\r\nimport * as React from \"react\";\r\n\r\nimport {Separator} from \"@/components/ui/separator\";\r\nimport {cn} from \"@/lib/utilities\";\r\nimport styles from \"./field.module.css\";\r\n\r\n/** Supported layouts for {@link Field}. */\r\nexport type FieldOrientation = \"vertical\" | \"horizontal\" | \"responsive\";\r\n\r\n/** Supported legend render styles for {@link FieldLegend}. */\r\nexport type FieldLegendVariant = \"legend\" | \"label\";\r\n\r\n/** Shape of error objects accepted by {@link FieldError}. */\r\nexport interface FieldErrorItem {\r\n  /** Human-readable validation error message. @default undefined */\r\n  message?: string;\r\n}\r\n\r\n/**\r\n * Props for the {@link FieldSet} component.\r\n */\r\nexport type FieldSetProps = React.ComponentPropsWithoutRef<\"fieldset\">;\r\n\r\n/**\r\n * Props for the {@link FieldLegend} component.\r\n */\r\nexport interface FieldLegendProps extends React.ComponentPropsWithoutRef<\"legend\"> {\r\n  /** Visual treatment used for the legend content. @default \"legend\" */\r\n  variant?: FieldLegendVariant;\r\n}\r\n\r\n/**\r\n * Props for the {@link FieldGroup} component.\r\n */\r\nexport type FieldGroupProps = React.ComponentPropsWithoutRef<\"div\">;\r\n\r\n/**\r\n * Props for the {@link Field} component.\r\n */\r\nexport interface FieldProps extends React.ComponentPropsWithoutRef<\"div\"> {\r\n  /** Layout used to arrange labels and controls. @default \"vertical\" */\r\n  orientation?: FieldOrientation;\r\n}\r\n\r\n/**\r\n * Props for the {@link FieldContent} component.\r\n */\r\nexport type FieldContentProps = React.ComponentPropsWithoutRef<\"div\">;\r\n\r\n/**\r\n * Props for the {@link FieldLabel} component.\r\n */\r\nexport type FieldLabelProps = React.ComponentPropsWithoutRef<\"label\">;\r\n\r\n/**\r\n * Props for the {@link FieldTitle} component.\r\n */\r\nexport type FieldTitleProps = React.ComponentPropsWithoutRef<\"div\">;\r\n\r\n/**\r\n * Props for the {@link FieldDescription} component.\r\n */\r\nexport type FieldDescriptionProps = React.ComponentPropsWithoutRef<\"p\">;\r\n\r\n/**\r\n * Props for the {@link FieldSeparator} component.\r\n */\r\nexport type FieldSeparatorProps = React.ComponentPropsWithoutRef<\"div\">;\r\n\r\n/**\r\n * Props for the {@link FieldError} component.\r\n */\r\nexport interface FieldErrorProps extends React.ComponentPropsWithoutRef<\"div\"> {\r\n  /** Validation errors rendered when children are not provided. @default undefined */\r\n  errors?: Array<FieldErrorItem | undefined>;\r\n}\r\n\r\nfunction getFieldOrientationClass(orientation: FieldOrientation): string {\r\n  switch (orientation) {\r\n    case \"horizontal\": {\r\n      return styles.horizontal;\r\n    }\r\n    case \"responsive\": {\r\n      return styles.responsive;\r\n    }\r\n    default: {\r\n      return styles.vertical;\r\n    }\r\n  }\r\n}\r\n\r\n/**\r\n * Groups related controls within a semantic fieldset.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<fieldset>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <FieldSet>\r\n *   <FieldLegend>Preferences</FieldLegend>\r\n * </FieldSet>\r\n * ```\r\n *\r\n * @see {@link FieldSetProps} for available props\r\n */\r\nconst FieldSet = React.forwardRef<HTMLFieldSetElement, FieldSetProps>(\r\n  ({className, ...props}: Readonly<FieldSetProps>, ref): React.JSX.Element => (\r\n    <fieldset\r\n      ref={ref}\r\n      data-slot='field-set'\r\n      className={cn(styles.fieldSet, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Labels a grouped set of controls within {@link FieldSet}.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<legend>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <FieldLegend variant='label'>Billing address</FieldLegend>\r\n * ```\r\n *\r\n * @see {@link FieldLegendProps} for available props\r\n */\r\nconst FieldLegend = React.forwardRef<HTMLLegendElement, FieldLegendProps>(\r\n  ({className, variant = \"legend\", ...props}: Readonly<FieldLegendProps>, ref): React.JSX.Element => (\r\n    <legend\r\n      ref={ref}\r\n      data-slot='field-legend'\r\n      data-variant={variant}\r\n      className={cn(styles.legend, variant === \"label\" ? styles.legendLabel : styles.legendDefault, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Stacks multiple field rows under a shared container.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<div>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <FieldGroup>\r\n *   <Field />\r\n * </FieldGroup>\r\n * ```\r\n *\r\n * @see {@link FieldGroupProps} for available props\r\n */\r\nconst FieldGroup = React.forwardRef<HTMLDivElement, FieldGroupProps>(\r\n  ({className, ...props}: Readonly<FieldGroupProps>, ref): React.JSX.Element => (\r\n    <div\r\n      ref={ref}\r\n      data-slot='field-group'\r\n      className={cn(styles.group, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Creates a styled field row for labels, descriptions, and controls.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<div>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <Field orientation='responsive'>...</Field>\r\n * ```\r\n *\r\n * @see {@link FieldProps} for available props\r\n */\r\nconst Field = React.forwardRef<HTMLDivElement, FieldProps>(\r\n  ({className, orientation = \"vertical\", ...props}: Readonly<FieldProps>, ref): React.JSX.Element => (\r\n    <div\r\n      ref={ref}\r\n      role='group'\r\n      data-slot='field'\r\n      data-orientation={orientation}\r\n      className={cn(styles.field, getFieldOrientationClass(orientation), className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Wraps field controls and supporting content.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<div>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <FieldContent>{control}</FieldContent>\r\n * ```\r\n *\r\n * @see {@link FieldContentProps} for available props\r\n */\r\nconst FieldContent = React.forwardRef<HTMLDivElement, FieldContentProps>(\r\n  ({className, ...props}: Readonly<FieldContentProps>, ref): React.JSX.Element => (\r\n    <div\r\n      ref={ref}\r\n      data-slot='field-content'\r\n      className={cn(styles.content, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Renders the label associated with a form control.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<label>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <FieldLabel htmlFor='email'>Email</FieldLabel>\r\n * ```\r\n *\r\n * @see {@link FieldLabelProps} for available props\r\n */\r\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldLabelProps>(\r\n  ({className, ...props}: Readonly<FieldLabelProps>, ref): React.JSX.Element => {\r\n    return (\r\n      <label\r\n        ref={ref}\r\n        data-slot='field-label'\r\n        className={cn(styles.label, className)}\r\n        {...props}\r\n      />\r\n    );\r\n  },\r\n);\r\n\r\n/**\r\n * Displays the leading title content for a field row.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<div>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <FieldTitle>Account</FieldTitle>\r\n * ```\r\n *\r\n * @see {@link FieldTitleProps} for available props\r\n */\r\nconst FieldTitle = React.forwardRef<HTMLDivElement, FieldTitleProps>(\r\n  ({className, ...props}: Readonly<FieldTitleProps>, ref): React.JSX.Element => (\r\n    <div\r\n      ref={ref}\r\n      data-slot='field-label'\r\n      className={cn(styles.title, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Renders supplementary descriptive text for a field.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<p>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <FieldDescription>Used for account recovery.</FieldDescription>\r\n * ```\r\n *\r\n * @see {@link FieldDescriptionProps} for available props\r\n */\r\nconst FieldDescription = React.forwardRef<HTMLParagraphElement, FieldDescriptionProps>(\r\n  ({className, ...props}: Readonly<FieldDescriptionProps>, ref): React.JSX.Element => (\r\n    <p\r\n      ref={ref}\r\n      data-slot='field-description'\r\n      className={cn(styles.description, className)}\r\n      {...props}\r\n    />\r\n  ),\r\n);\r\n\r\n/**\r\n * Separates field sections with optional inline content.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<div>` element\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <FieldSeparator>or</FieldSeparator>\r\n * ```\r\n *\r\n * @see {@link FieldSeparatorProps} for available props\r\n */\r\nconst FieldSeparator = React.forwardRef<HTMLDivElement, FieldSeparatorProps>(\r\n  ({children, className, ...props}: Readonly<FieldSeparatorProps>, ref): React.JSX.Element => (\r\n    <div\r\n      ref={ref}\r\n      data-slot='field-separator'\r\n      data-content={children ? \"true\" : undefined}\r\n      className={cn(styles.separator, className)}\r\n      {...props}>\r\n      <Separator className={styles.separatorLine} />\r\n      {children ? <span className={styles.separatorContent}>{children}</span> : null}\r\n    </div>\r\n  ),\r\n);\r\n\r\n/**\r\n * Presents validation feedback for a field.\r\n *\r\n * @remarks\r\n * - Pure CSS component (no Base UI primitive)\r\n * - Renders a `<div>` element when content exists\r\n * - Styling via CSS Modules with `--ac-*` custom properties\r\n *\r\n * @example\r\n * ```tsx\r\n * <FieldError errors={[{message: \"Required\"}]} />\r\n * ```\r\n *\r\n * @see {@link FieldErrorProps} for available props\r\n */\r\nconst FieldError = React.forwardRef<HTMLDivElement, FieldErrorProps>(\r\n  ({className, children, errors, ...props}: Readonly<FieldErrorProps>, ref): React.JSX.Element | null => {\r\n    const content = React.useMemo((): React.JSX.Element | null => {\r\n      if (children) {\r\n        return <span>{children}</span>;\r\n      }\r\n\r\n      if (!errors) {\r\n        return null;\r\n      }\r\n\r\n      if (errors.length === 1 && errors[0]?.message) {\r\n        return <span>{errors[0].message}</span>;\r\n      }\r\n\r\n      return (\r\n        <ul className={styles.errorList}>{errors.map((error, index) => (error?.message ? <li key={index}>{error.message}</li> : null))}</ul>\r\n      );\r\n    }, [children, errors]);\r\n\r\n    if (!content) {\r\n      return null;\r\n    }\r\n\r\n    return (\r\n      <div\r\n        ref={ref}\r\n        role='alert'\r\n        data-slot='field-error'\r\n        className={cn(styles.error, className)}\r\n        {...props}>\r\n        {content}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nFieldSet.displayName = \"FieldSet\";\r\nFieldLegend.displayName = \"FieldLegend\";\r\nFieldGroup.displayName = \"FieldGroup\";\r\nField.displayName = \"Field\";\r\nFieldContent.displayName = \"FieldContent\";\r\nFieldLabel.displayName = \"FieldLabel\";\r\nFieldTitle.displayName = \"FieldTitle\";\r\nFieldDescription.displayName = \"FieldDescription\";\r\nFieldSeparator.displayName = \"FieldSeparator\";\r\nFieldError.displayName = \"FieldError\";\r\n\r\nexport {Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle};\r\n"],"names":["getFieldOrientationClass","orientation","styles","FieldSet","React","className","props","ref","cn","FieldLegend","variant","FieldGroup","Field","FieldContent","FieldLabel","FieldTitle","FieldDescription","FieldSeparator","children","undefined","Separator","FieldError","errors","content","error","index"],"mappings":";;;;;;AAiFA,SAASA,yBAAyBC,WAA6B;IAC7D,OAAQA;QACN,KAAK;YACH,OAAOC,aAAAA,UAAiB;QAE1B,KAAK;YACH,OAAOA,aAAAA,UAAiB;QAE1B;YACE,OAAOA,aAAAA,QAAe;IAE1B;AACF;AAmBA,MAAMC,WAAW,WAAHA,GAAGC,WACf,CAAC,EAACC,SAAS,EAAE,GAAGC,OAA+B,EAAEC,MAAAA,WAAAA,GAC/C,IAAC;QACC,KAAKA;QACL,aAAU;QACV,WAAWC,GAAGN,aAAAA,QAAe,EAAEG;QAC9B,GAAGC,KAAK;;AAoBf,MAAMG,cAAc,WAAHA,GAAGL,WAClB,CAAC,EAACC,SAAS,EAAEK,UAAU,QAAQ,EAAE,GAAGJ,OAAkC,EAAEC,MAAAA,WAAAA,GACtE,IAAC;QACC,KAAKA;QACL,aAAU;QACV,gBAAcG;QACd,WAAWF,GAAGN,aAAAA,MAAa,EAAEQ,AAAY,YAAZA,UAAsBR,aAAAA,WAAkB,GAAGA,aAAAA,aAAoB,EAAEG;QAC7F,GAAGC,KAAK;;AAsBf,MAAMK,aAAa,WAAHA,GAAGP,WACjB,CAAC,EAACC,SAAS,EAAE,GAAGC,OAAiC,EAAEC,MAAAA,WAAAA,GACjD,IAAC;QACC,KAAKA;QACL,aAAU;QACV,WAAWC,GAAGN,aAAAA,KAAY,EAAEG;QAC3B,GAAGC,KAAK;;AAoBf,MAAMM,QAAQ,WAAHA,GAAGR,WACZ,CAAC,EAACC,SAAS,EAAEJ,cAAc,UAAU,EAAE,GAAGK,OAA4B,EAAEC,MAAAA,WAAAA,GACtE,IAAC;QACC,KAAKA;QACL,MAAK;QACL,aAAU;QACV,oBAAkBN;QAClB,WAAWO,GAAGN,aAAAA,KAAY,EAAEF,yBAAyBC,cAAcI;QAClE,GAAGC,KAAK;;AAoBf,MAAMO,eAAe,WAAHA,GAAGT,WACnB,CAAC,EAACC,SAAS,EAAE,GAAGC,OAAmC,EAAEC,MAAAA,WAAAA,GACnD,IAAC;QACC,KAAKA;QACL,aAAU;QACV,WAAWC,GAAGN,aAAAA,OAAc,EAAEG;QAC7B,GAAGC,KAAK;;AAoBf,MAAMQ,aAAa,WAAHA,GAAGV,WACjB,CAAC,EAACC,SAAS,EAAE,GAAGC,OAAiC,EAAEC,MAC1C,WAAP,GACE,IAAC;QACC,KAAKA;QACL,aAAU;QACV,WAAWC,GAAGN,aAAAA,KAAY,EAAEG;QAC3B,GAAGC,KAAK;;AAqBjB,MAAMS,aAAa,WAAHA,GAAGX,WACjB,CAAC,EAACC,SAAS,EAAE,GAAGC,OAAiC,EAAEC,MAAAA,WAAAA,GACjD,IAAC;QACC,KAAKA;QACL,aAAU;QACV,WAAWC,GAAGN,aAAAA,KAAY,EAAEG;QAC3B,GAAGC,KAAK;;AAoBf,MAAMU,mBAAmB,WAAHA,GAAGZ,WACvB,CAAC,EAACC,SAAS,EAAE,GAAGC,OAAuC,EAAEC,MAAAA,WAAAA,GACvD,IAAC;QACC,KAAKA;QACL,aAAU;QACV,WAAWC,GAAGN,aAAAA,WAAkB,EAAEG;QACjC,GAAGC,KAAK;;AAoBf,MAAMW,iBAAiB,WAAHA,GAAGb,WACrB,CAAC,EAACc,QAAQ,EAAEb,SAAS,EAAE,GAAGC,OAAqC,EAAEC,MAAAA,WAAAA,GAC/D,KAAC;QACC,KAAKA;QACL,aAAU;QACV,gBAAcW,WAAW,SAASC;QAClC,WAAWX,GAAGN,aAAAA,SAAgB,EAAEG;QAC/B,GAAGC,KAAK;;0BACT,IAACc,WAASA;gBAAC,WAAWlB,aAAAA,aAAoB;;YACzCgB,WAAW,WAAXA,GAAW,IAAC;gBAAK,WAAWhB,aAAAA,gBAAuB;0BAAGgB;iBAAmB;;;AAoBhF,MAAMG,aAAa,WAAHA,GAAGjB,WACjB,CAAC,EAACC,SAAS,EAAEa,QAAQ,EAAEI,MAAM,EAAE,GAAGhB,OAAiC,EAAEC;IACnE,MAAMgB,UAAUnB,QAAc;QAC5B,IAAIc,UACF,OAAO,WAAP,GAAO,IAAC;sBAAMA;;QAGhB,IAAI,CAACI,QACH,OAAO;QAGT,IAAIA,AAAkB,MAAlBA,OAAO,MAAM,IAAUA,MAAM,CAAC,EAAE,EAAE,SACpC,OAAO,WAAP,GAAO,IAAC;sBAAMA,MAAM,CAAC,EAAE,CAAC,OAAO;;QAGjC,OAAO,WAAP,GACE,IAAC;YAAG,WAAWpB,aAAAA,SAAgB;sBAAGoB,OAAO,GAAG,CAAC,CAACE,OAAOC,QAAWD,OAAO,UAAU,WAAV,GAAU,IAAC;8BAAgBA,MAAM,OAAO;mBAArBC,SAA8B;;IAE5H,GAAG;QAACP;QAAUI;KAAO;IAErB,IAAI,CAACC,SACH,OAAO;IAGT,OAAO,WAAP,GACE,IAAC;QACC,KAAKhB;QACL,MAAK;QACL,aAAU;QACV,WAAWC,GAAGN,aAAAA,KAAY,EAAEG;QAC3B,GAAGC,KAAK;kBACRiB;;AAGP;AAGFpB,SAAS,WAAW,GAAG;AACvBM,YAAY,WAAW,GAAG;AAC1BE,WAAW,WAAW,GAAG;AACzBC,MAAM,WAAW,GAAG;AACpBC,aAAa,WAAW,GAAG;AAC3BC,WAAW,WAAW,GAAG;AACzBC,WAAW,WAAW,GAAG;AACzBC,iBAAiB,WAAW,GAAG;AAC/BC,eAAe,WAAW,GAAG;AAC7BI,WAAW,WAAW,GAAG"}

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

@@ -0,0 +1,24 @@
+import "./field_module.css";
+const field_module = {
+    fieldSet: "fieldSet-ZsYf1y",
+    legend: "legend-cxaotK",
+    legendDefault: "legendDefault-za5qgw",
+    legendLabel: "legendLabel-dxy8Ra",
+    group: "group-jMAZ6P",
+    field: "field-xkpXUG",
+    vertical: "vertical-teIgkd",
+    horizontal: "horizontal-xEGT3H",
+    responsive: "responsive-KhsIcd",
+    content: "content-wtS4mt",
+    label: "label-aBLDfE",
+    title: "title-yyNFE9",
+    description: "description-wbkoMV",
+    separator: "separator-ZduEsC",
+    separatorLine: "separatorLine-cueT3n",
+    separatorContent: "separatorContent-naPPmD",
+    error: "error-zfXC1o",
+    errorList: "errorList-SVbSW8"
+};
+export default field_module;
+
+//# sourceMappingURL=field.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"components/ui/field.module.js","sources":["../../../src/components/ui/field.module.css"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./field_module.css\"\nexport default {\"fieldSet\":\"fieldSet-ZsYf1y\",\"legend\":\"legend-cxaotK\",\"legendDefault\":\"legendDefault-za5qgw\",\"legendLabel\":\"legendLabel-dxy8Ra\",\"group\":\"group-jMAZ6P\",\"field\":\"field-xkpXUG\",\"vertical\":\"vertical-teIgkd\",\"horizontal\":\"horizontal-xEGT3H\",\"responsive\":\"responsive-KhsIcd\",\"content\":\"content-wtS4mt\",\"label\":\"label-aBLDfE\",\"title\":\"title-yyNFE9\",\"description\":\"description-wbkoMV\",\"separator\":\"separator-ZduEsC\",\"separatorLine\":\"separatorLine-cueT3n\",\"separatorContent\":\"separatorContent-naPPmD\",\"error\":\"error-zfXC1o\",\"errorList\":\"errorList-SVbSW8\"};"],"names":[],"mappings":";AAEA,qBAAe;IAAC,UAAW;IAAkB,QAAS;IAAgB,eAAgB;IAAuB,aAAc;IAAqB,OAAQ;IAAe,OAAQ;IAAe,UAAW;IAAkB,YAAa;IAAoB,YAAa;IAAoB,SAAU;IAAiB,OAAQ;IAAe,OAAQ;IAAe,aAAc;IAAqB,WAAY;IAAmB,eAAgB;IAAuB,kBAAmB;IAA0B,OAAQ;IAAe,WAAY;AAAkB"}