@alneas/appkit-react 0.2.0 → 0.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"field.js","names":["FieldsetPrimitive","React","FieldPrimitive","React$1","Field$1","FieldSet","props","Fieldset","cn","className","FieldLegend","variant","FieldGroup","fieldVariants","cva","Field","orientation","FieldContent","FieldLabel","FieldTitle","FieldDescription","FieldSeparator","children","Separator","FieldError","content","useMemo","errors","uniqueErrors","error","index","FieldValidity","FieldControl"],"sources":["../../../../src/ui/components/ui/field.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMemo } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Field as FieldPrimitive } from '@base-ui/react/field';\nimport { Fieldset as FieldsetPrimitive } from '@base-ui/react/fieldset';\n\nimport { cn } from '../../lib/utils';\nimport { Separator } from './separator';\n\n// ============================================================================\n// FieldSet (Fieldset.Root)\n// ============================================================================\n\n/**\n * Groups related form fields using the Base UI fieldset root.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldSet composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldSet({ className, ...props }: FieldsetPrimitive.Root.Props) {\n  return (\n    <FieldsetPrimitive.Root\n      data-slot='field-set'\n      className={cn(\n        'gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// FieldLegend (Fieldset.Legend)\n// ============================================================================\n\n/**\n * Labels the fieldset with legend or compact label styling.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='legend'.\n * @returns The rendered FieldLegend composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values. variant defaults to legend; label selects smaller typography.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldLegend({\n  className,\n  variant = 'legend',\n  ...props\n}: FieldsetPrimitive.Legend.Props & { /**\n * Visual treatment from the declared variant union; changing it does not alter host action semantics.\n */\n/**\n * Visual treatment from the declared variant union; changing it does not alter host action semantics.\n */\nvariant?: 'legend' | 'label' }) {\n  return (\n    <FieldsetPrimitive.Legend\n      data-slot='field-legend'\n      data-variant={variant}\n      className={cn(\n        'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// FieldGroup\n// ============================================================================\n\n/**\n * Lays out a vertical group of fields and nested field groups.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='field-group'\n      className={cn(\n        'gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// Field (Field.Root)\n// Primtive Field Component (was FieldRoot)\n// ============================================================================\n\nconst fieldVariants = cva('data-[invalid]:text-destructive gap-2 group/field flex w-full', {\n  variants: {\n    /**\n     * Axis used to join/group controls or arrange field content.\n     * Accepted values: vertical, horizontal, responsive.\n     * @defaultValue 'vertical'\n     * @see fieldVariants\n     */\n    orientation: {\n      vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',\n      horizontal:\n        'flex-row items-center [&>[data-slot=field-label]]:w-24 [&>[data-slot=field-label]]:shrink-0 [&>[data-slot=field-label]]:text-right has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      responsive:\n        'flex-row items-center [&>[data-slot=field-label]]:w-24 [&>[data-slot=field-label]]:shrink-0 [&>[data-slot=field-label]]:text-right has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px max-sm:flex-col max-sm:[&>*]:w-full max-sm:[&>[data-slot=field-label]]:w-full max-sm:[&>[data-slot=field-label]]:text-left',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n});\n\n/**\n * Coordinates one field control, label, description and validation state.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: orientation='vertical'.\n * @returns The rendered Field composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values. The ref prop forwards to the rendered control or container declared by the component ref type. orientation defaults to vertical; horizontal/responsive change layout rather than field validation.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nconst Field = React.forwardRef<\n  HTMLDivElement,\n  FieldPrimitive.Root.Props & VariantProps<typeof fieldVariants>\n>(({ className, orientation = 'vertical', ...props }, ref) => {\n  return (\n    <FieldPrimitive.Root\n      ref={ref}\n      data-slot='field'\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n});\nField.displayName = 'Field';\n\n// ============================================================================\n// FieldContent\n// ============================================================================\n\n/**\n * Groups the textual content adjacent to a field control.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldContent composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='field-content'\n      className={cn('gap-0.5 group/field-content flex flex-1 flex-col leading-snug', className)}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// FieldLabel (Field.Label)\n// ============================================================================\n\n/**\n * Associates a visible label with its Base UI field control.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldLabel composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nconst FieldLabel = React.forwardRef<HTMLLabelElement, FieldPrimitive.Label.Props>(\n  ({ className, ...props }, ref) => {\n    return (\n      <FieldPrimitive.Label\n        ref={ref}\n        data-slot='field-label'\n        className={cn(\n          'has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug text-sm font-medium',\n          'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',\n          'data-[invalid]:text-destructive',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nFieldLabel.displayName = 'FieldLabel';\n\n// ============================================================================\n// FieldTitle\n// ============================================================================\n\n/**\n * Styles label-like title content without creating a label association.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldTitle composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='field-label'\n      className={cn(\n        'gap-2 text-sm font-medium group-data-[disabled]/field:opacity-50 flex w-fit items-center leading-snug',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// FieldDescription (Field.Description)\n// ============================================================================\n\n/**\n * Provides descriptive text associated with the surrounding field.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldDescription composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nconst FieldDescription = React.forwardRef<HTMLParagraphElement, FieldPrimitive.Description.Props>(\n  ({ className, ...props }, ref) => {\n    return (\n      <FieldPrimitive.Description\n        ref={ref}\n        data-slot='field-description'\n        className={cn(\n          'text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',\n          'last:mt-0 nth-last-2:-mt-1',\n          '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nFieldDescription.displayName = 'FieldDescription';\n\n// ============================================================================\n// FieldSeparator\n// ============================================================================\n\n/**\n * Draws a divider with optional centered text between field groups.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldSeparator composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  /**\n   * Content rendered in the wrapper's child region.\n   */\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot='field-separator'\n      data-content={!!children}\n      className={cn(\n        '-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative',\n        className,\n      )}\n      {...props}\n    >\n      <Separator className='absolute inset-0 top-1/2' />\n      {children && (\n        <span\n          className='text-muted-foreground px-2 bg-background relative mx-auto block w-fit'\n          data-slot='field-separator-content'\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\n// ============================================================================\n// FieldError (Field.Error)\n// ============================================================================\n\n/**\n * Renders supplied children or deduplicated error messages when content exists.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldError composition, or null when it has no visible content.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nconst FieldError = React.forwardRef<\n  HTMLDivElement,\n  FieldPrimitive.Error.Props & {\n    /**\n     * Explicit validation messages; duplicate message strings are collapsed and missing/empty messages may yield no content.\n     */\n    errors?: Array<{ /**\n * Optional error message used for deduplication and display; missing messages do not render a list item.\n */\n    /**\n     * Optional error message used for deduplication and display; missing messages do not render a list item.\n     */\n    message?: string } | undefined>;\n  }\n>(({ className, children, errors, ...props }, ref) => {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <ul className='ml-4 flex list-disc flex-col gap-1'>\n        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <FieldPrimitive.Error\n      ref={ref}\n      data-slot='field-error'\n      className={cn('text-destructive text-sm font-normal', className)}\n      {...props}\n    >\n      {content}\n    </FieldPrimitive.Error>\n  );\n});\nFieldError.displayName = 'FieldError';\n\n// ============================================================================\n// FieldValidity (Field.Validity)\n// ============================================================================\n\n/**\n * Exposes the surrounding Base UI field validity state to its child renderer.\n * @param props - Inherited primitive configuration, children and controlled/default state; the upstream prop type remains authoritative.\n * @returns The rendered FieldValidity composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nconst FieldValidity = FieldPrimitive.Validity;\n\n// ============================================================================\n// FieldControl (Helper for Smart Field / Legacy)\n// ============================================================================\n\n/**\n * Renders a Base UI control bound to its surrounding field context.\n * @param props - Inherited primitive configuration, children and controlled/default state; the upstream prop type remains authoritative.\n * @returns The rendered FieldControl composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nconst FieldControl = FieldPrimitive.Control;\n\n\nexport { Field, FieldLabel, FieldControl, FieldError, FieldDescription, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, FieldValidity };\n"],"mappings":";;;;;;;;;;;AA8BA,SAASK,EAAS,EAAE,cAAW,GAAGC,KAAuC;CACvE,OACE,kBAACN,EAAkB,MAAnB;EACE,aAAU;EACV,WAAWQ,EACT,oGACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AAqBA,SAASI,EAAY,EACnB,cACA,aAAU,UACV,GAAGJ,KAO2B;CAC9B,OACE,kBAACN,EAAkB,QAAnB;EACE,aAAU;EACV,gBAAcW;EACd,WAAWH,EACT,mFACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AAqBA,SAASM,EAAW,EAAE,cAAW,GAAGN,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWE,EACT,0IACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AAOA,IAAMO,IAAgBC,EAAI,iEAAiE;CACzF,UAAU,EAOR,aAAa;EACX,UAAU;EACV,YACE;EACF,YACE;CACJ,EACF;CACA,iBAAiB,EACf,aAAa,WACf;AACF,CAAC,GAiBKC,IAAQd,EAAM,YAGjB,EAAE,cAAW,iBAAc,YAAY,GAAGK,KAAS,MAElD,kBAACJ,EAAe,MAAhB;CACO;CACL,aAAU;CACV,oBAAkBc;CAClB,WAAWR,EAAGK,EAAc,EAAE,eAAY,CAAC,GAAGJ,CAAS;CACvD,GAAIH;AACL,CAAA,CAEJ;AACD,EAAM,cAAc;AAqBpB,SAASW,EAAa,EAAE,cAAW,GAAGX,KAAsC;CAC1E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWE,EAAG,iEAAiEC,CAAS;EACxF,GAAIH;CACL,CAAA;AAEL;AAqBA,IAAMY,IAAajB,EAAM,YACtB,EAAE,cAAW,GAAGK,KAAS,MAEtB,kBAACJ,EAAe,OAAhB;CACO;CACL,aAAU;CACV,WAAWM,EACT,mUACA,qEACA,mCACAC,CACF;CACA,GAAIH;AACL,CAAA,CAGP;AACA,EAAW,cAAc;AAqBzB,SAASa,EAAW,EAAE,cAAW,GAAGb,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWE,EACT,yGACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AAqBA,IAAMc,IAAmBnB,EAAM,YAC5B,EAAE,cAAW,GAAGK,KAAS,MAEtB,kBAACJ,EAAe,aAAhB;CACO;CACL,aAAU;CACV,WAAWM,EACT,qKACA,8BACA,qEACAC,CACF;CACA,GAAIH;AACL,CAAA,CAGP;AACA,EAAiB,cAAc;AAqB/B,SAASe,EAAe,EACtB,aACA,cACA,GAAGf,KAMF;CACD,OACE,kBAAC,OAAD;EACE,aAAU;EACV,gBAAc,CAAC,CAACgB;EAChB,WAAWd,EACT,6EACAC,CACF;EACA,GAAIH;EAPN,UAAA,CASE,kBAACiB,GAAD,EAAW,WAAU,2BAA4B,CAAA,GAChDD,KACC,kBAAC,QAAD;GACE,WAAU;GACV,aAAU;GAET;EACG,CAAA,CAEL;;AAET;AAqBA,IAAME,IAAavB,EAAM,YActB,EAAE,cAAW,aAAU,WAAQ,GAAGK,KAAS,MAAQ;CACpD,IAAMmB,IAAUC,QAAc;EAC5B,IAAIJ,GACF,OAAOA;EAGT,IAAI,CAACK,GAAQ,QACX,OAAO;EAGT,IAAMC,IAAe,CAAC,GAAG,IAAI,IAAID,EAAO,KAAK,MAAU,CAACE,GAAO,SAASA,CAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;EAMzF,OAJID,GAAc,UAAU,IACnBA,EAAa,EAAE,EAAE,UAIxB,kBAAC,MAAD;GAAI,WAAU;GACX,UAAAA,EAAa,KAAK,GAAO,MAAUC,GAAO,WAAW,kBAAC,MAAD,EAAA,UAAiBA,EAAM,QAAY,GAA1BC,CAA0B,CAAC;EACxF,CAAA;CAER,GAAG,CAACR,GAAUK,CAAM,CAAC;CAMrB,OAJKF,IAKH,kBAACvB,EAAe,OAAhB;EACO;EACL,aAAU;EACV,WAAWM,EAAG,wCAAwCC,CAAS;EAC/D,GAAIH;EAEH,UAAAmB;CACmB,CAAA,IAXf;AAaX,CAAC;AACD,EAAW,cAAc;AAqBzB,IAAMM,IAAgB7B,EAAe,UAqB/B8B,IAAe9B,EAAe"}
+{"version":3,"file":"field.js","names":["FieldsetPrimitive","FieldPrimitive","Field$1","FieldSet","props","Fieldset","cn","className","FieldLegend","variant","FieldGroup","fieldVariants","cva","Field","orientation","FieldContent","FieldLabel","FieldTitle","FieldDescription","FieldSeparator","children","Separator","FieldError","content","useMemo","errors","uniqueErrors","error","index","FieldValidity","FieldControl"],"sources":["../../../../src/ui/components/ui/field.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useMemo } from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Field as FieldPrimitive } from '@base-ui/react/field';\nimport { Fieldset as FieldsetPrimitive } from '@base-ui/react/fieldset';\n\nimport { cn } from '../../lib/utils';\nimport { Separator } from './separator';\n\n// ============================================================================\n// FieldSet (Fieldset.Root)\n// ============================================================================\n\n/**\n * Groups related form fields using the Base UI fieldset root.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldSet composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldSet({ className, ...props }: FieldsetPrimitive.Root.Props) {\n  return (\n    <FieldsetPrimitive.Root\n      data-slot='field-set'\n      className={cn(\n        'gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// FieldLegend (Fieldset.Legend)\n// ============================================================================\n\n/**\n * Labels the fieldset with legend or compact label styling.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: variant='legend'.\n * @returns The rendered FieldLegend composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values. variant defaults to legend; label selects smaller typography.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldLegend({\n  className,\n  variant = 'legend',\n  ...props\n}: FieldsetPrimitive.Legend.Props & { /**\n * Visual treatment from the declared variant union; changing it does not alter host action semantics.\n */\n/**\n * Visual treatment from the declared variant union; changing it does not alter host action semantics.\n */\nvariant?: 'legend' | 'label' }) {\n  return (\n    <FieldsetPrimitive.Legend\n      data-slot='field-legend'\n      data-variant={variant}\n      className={cn(\n        'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// FieldGroup\n// ============================================================================\n\n/**\n * Lays out a vertical group of fields and nested field groups.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldGroup composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='field-group'\n      className={cn(\n        'gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// Field (Field.Root)\n// Primtive Field Component (was FieldRoot)\n// ============================================================================\n\nconst fieldVariants = cva('data-[invalid]:text-destructive gap-2 group/field flex w-full', {\n  variants: {\n    /**\n     * Axis used to join/group controls or arrange field content.\n     * Accepted values: vertical, horizontal, responsive.\n     * @defaultValue 'vertical'\n     * @see fieldVariants\n     */\n    orientation: {\n      vertical: 'flex-col [&>*]:w-full [&>.sr-only]:w-auto',\n      horizontal:\n        'flex-row items-center [&>[data-slot=field-label]]:w-24 [&>[data-slot=field-label]]:shrink-0 [&>[data-slot=field-label]]:text-right has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n      responsive:\n        'flex-row items-center [&>[data-slot=field-label]]:w-24 [&>[data-slot=field-label]]:shrink-0 [&>[data-slot=field-label]]:text-right has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px max-sm:flex-col max-sm:[&>*]:w-full max-sm:[&>[data-slot=field-label]]:w-full max-sm:[&>[data-slot=field-label]]:text-left',\n    },\n  },\n  defaultVariants: {\n    orientation: 'vertical',\n  },\n});\n\n/**\n * Coordinates one field control, label, description and validation state.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling. Wrapper defaults: orientation='vertical'.\n * @returns The rendered Field composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values. The ref prop forwards to the rendered control or container declared by the component ref type. orientation defaults to vertical; horizontal/responsive change layout rather than field validation.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction Field({\n  ref,\n  className,\n  orientation = 'vertical',\n  ...props\n}: React.PropsWithoutRef<FieldPrimitive.Root.Props & VariantProps<typeof fieldVariants>> &\n  React.RefAttributes<HTMLDivElement>) {\n  return (\n    <FieldPrimitive.Root\n      ref={ref}\n      data-slot='field'\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  );\n}\nField.displayName = 'Field';\n\n// ============================================================================\n// FieldContent\n// ============================================================================\n\n/**\n * Groups the textual content adjacent to a field control.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldContent composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='field-content'\n      className={cn('gap-0.5 group/field-content flex flex-1 flex-col leading-snug', className)}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// FieldLabel (Field.Label)\n// ============================================================================\n\n/**\n * Associates a visible label with its Base UI field control.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldLabel composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldLabel({\n  ref,\n  className,\n  ...props\n}: React.PropsWithoutRef<FieldPrimitive.Label.Props> & React.RefAttributes<HTMLLabelElement>) {\n  return (\n    <FieldPrimitive.Label\n      ref={ref}\n      data-slot='field-label'\n      className={cn(\n        'has-data-checked:bg-primary/5 has-data-checked:border-primary dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug text-sm font-medium',\n        'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',\n        'data-[invalid]:text-destructive',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nFieldLabel.displayName = 'FieldLabel';\n\n// ============================================================================\n// FieldTitle\n// ============================================================================\n\n/**\n * Styles label-like title content without creating a label association.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldTitle composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot='field-label'\n      className={cn(\n        'gap-2 text-sm font-medium group-data-[disabled]/field:opacity-50 flex w-fit items-center leading-snug',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// ============================================================================\n// FieldDescription (Field.Description)\n// ============================================================================\n\n/**\n * Provides descriptive text associated with the surrounding field.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldDescription composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldDescription({\n  ref,\n  className,\n  ...props\n}: React.PropsWithoutRef<FieldPrimitive.Description.Props> &\n  React.RefAttributes<HTMLParagraphElement>) {\n  return (\n    <FieldPrimitive.Description\n      ref={ref}\n      data-slot='field-description'\n      className={cn(\n        'text-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance',\n        'last:mt-0 nth-last-2:-mt-1',\n        '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nFieldDescription.displayName = 'FieldDescription';\n\n// ============================================================================\n// FieldSeparator\n// ============================================================================\n\n/**\n * Draws a divider with optional centered text between field groups.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldSeparator composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<'div'> & {\n  /**\n   * Content rendered in the wrapper's child region.\n   */\n  children?: React.ReactNode;\n}) {\n  return (\n    <div\n      data-slot='field-separator'\n      data-content={!!children}\n      className={cn(\n        '-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative',\n        className,\n      )}\n      {...props}\n    >\n      <Separator className='absolute inset-0 top-1/2' />\n      {children && (\n        <span\n          className='text-muted-foreground px-2 bg-background relative mx-auto block w-fit'\n          data-slot='field-separator-content'\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\n// ============================================================================\n// FieldError (Field.Error)\n// ============================================================================\n\n/**\n * Renders supplied children or deduplicated error messages when content exists.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered FieldError composition, or null when it has no visible content.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nfunction FieldError({\n  ref,\n  className,\n  children,\n  errors,\n  ...props\n}: React.PropsWithoutRef<\n  FieldPrimitive.Error.Props & {\n    /**\n     * Explicit validation messages; duplicate message strings are collapsed and missing/empty messages may yield no content.\n     */\n    errors?: Array<\n      | {\n          /**\n           * Optional error message used for deduplication and display; missing messages do not render a list item.\n           */\n          /**\n           * Optional error message used for deduplication and display; missing messages do not render a list item.\n           */\n          message?: string;\n        }\n      | undefined\n    >;\n  }\n> &\n  React.RefAttributes<HTMLDivElement>) {\n  const content = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors?.length) {\n      return null;\n    }\n\n    const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message;\n    }\n\n    return (\n      <ul className='ml-4 flex list-disc flex-col gap-1'>\n        {uniqueErrors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <FieldPrimitive.Error\n      ref={ref}\n      data-slot='field-error'\n      className={cn('text-destructive text-sm font-normal', className)}\n      {...props}\n    >\n      {content}\n    </FieldPrimitive.Error>\n  );\n}\nFieldError.displayName = 'FieldError';\n\n// ============================================================================\n// FieldValidity (Field.Validity)\n// ============================================================================\n\n/**\n * Exposes the surrounding Base UI field validity state to its child renderer.\n * @param props - Inherited primitive configuration, children and controlled/default state; the upstream prop type remains authoritative.\n * @returns The rendered FieldValidity composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nconst FieldValidity = FieldPrimitive.Validity;\n\n// ============================================================================\n// FieldControl (Helper for Smart Field / Legacy)\n// ============================================================================\n\n/**\n * Renders a Base UI control bound to its surrounding field context.\n * @param props - Inherited primitive configuration, children and controlled/default state; the upstream prop type remains authoritative.\n * @returns The rendered FieldControl composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Label, Control, Description, Error and Validity require the surrounding Field context. FieldSet/Legend provide related-field semantics. FieldError prefers truthy children; otherwise it deduplicates errors by message and returns null when empty. These wrappers do not persist form values.\n * @example\n * ```tsx\n * import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<FieldSet><FieldLegend>Contact</FieldLegend><FieldGroup><Field name=\"email\"><FieldLabel>Email</FieldLabel><FieldControl type=\"email\" /><FieldDescription>Used for replies</FieldDescription><FieldError /></Field></FieldGroup></FieldSet>);\n * }\n * ```\n */\nconst FieldControl = FieldPrimitive.Control;\n\n\nexport { Field, FieldLabel, FieldControl, FieldError, FieldDescription, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, FieldValidity };\n"],"mappings":";;;;;;;;;;AA8BA,SAASG,EAAS,EAAE,cAAW,GAAGC,KAAuC;CACvE,OACE,kBAACJ,EAAkB,MAAnB;EACE,aAAU;EACV,WAAWM,EACT,oGACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AAqBA,SAASI,EAAY,EACnB,cACA,aAAU,UACV,GAAGJ,KAO2B;CAC9B,OACE,kBAACJ,EAAkB,QAAnB;EACE,aAAU;EACV,gBAAcS;EACd,WAAWH,EACT,mFACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AAqBA,SAASM,EAAW,EAAE,cAAW,GAAGN,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWE,EACT,0IACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AAOA,IAAMO,IAAgBC,EAAI,iEAAiE;CACzF,UAAU,EAOR,aAAa;EACX,UAAU;EACV,YACE;EACF,YACE;CACJ,EACF;CACA,iBAAiB,EACf,aAAa,WACf;AACF,CAAC;AAiBD,SAASC,EAAM,EACb,QACA,cACA,iBAAc,YACd,GAAGT,KAEkC;CACrC,OACE,kBAACH,EAAe,MAAhB;EACO;EACL,aAAU;EACV,oBAAkBa;EAClB,WAAWR,EAAGK,EAAc,EAAE,eAAY,CAAC,GAAGJ,CAAS;EACvD,GAAIH;CACL,CAAA;AAEL;AACA,EAAM,cAAc;AAqBpB,SAASW,EAAa,EAAE,cAAW,GAAGX,KAAsC;CAC1E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWE,EAAG,iEAAiEC,CAAS;EACxF,GAAIH;CACL,CAAA;AAEL;AAqBA,SAASY,EAAW,EAClB,QACA,cACA,GAAGZ,KACyF;CAC5F,OACE,kBAACH,EAAe,OAAhB;EACO;EACL,aAAU;EACV,WAAWK,EACT,mUACA,qEACA,mCACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AACA,EAAW,cAAc;AAqBzB,SAASa,EAAW,EAAE,cAAW,GAAGb,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAWE,EACT,yGACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AAqBA,SAASc,EAAiB,EACxB,QACA,cACA,GAAGd,KAEwC;CAC3C,OACE,kBAACH,EAAe,aAAhB;EACO;EACL,aAAU;EACV,WAAWK,EACT,qKACA,8BACA,qEACAC,CACF;EACA,GAAIH;CACL,CAAA;AAEL;AACA,EAAiB,cAAc;AAqB/B,SAASe,EAAe,EACtB,aACA,cACA,GAAGf,KAMF;CACD,OACE,kBAAC,OAAD;EACE,aAAU;EACV,gBAAc,CAAC,CAACgB;EAChB,WAAWd,EACT,6EACAC,CACF;EACA,GAAIH;EAPN,UAAA,CASE,kBAACiB,GAAD,EAAW,WAAU,2BAA4B,CAAA,GAChDD,KACC,kBAAC,QAAD;GACE,WAAU;GACV,aAAU;GAET;EACG,CAAA,CAEL;;AAET;AAqBA,SAASE,EAAW,EAClB,QACA,cACA,aACA,WACA,GAAGlB,KAoBkC;CACrC,IAAMmB,IAAUC,QAAc;EAC5B,IAAIJ,GACF,OAAOA;EAGT,IAAI,CAACK,GAAQ,QACX,OAAO;EAGT,IAAMC,IAAe,CAAC,GAAG,IAAI,IAAID,EAAO,KAAK,MAAU,CAACE,GAAO,SAASA,CAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;EAMzF,OAJID,GAAc,UAAU,IACnBA,EAAa,EAAE,EAAE,UAIxB,kBAAC,MAAD;GAAI,WAAU;GACX,UAAAA,EAAa,KAAK,GAAO,MAAUC,GAAO,WAAW,kBAAC,MAAD,EAAA,UAAiBA,EAAM,QAAY,GAA1BC,CAA0B,CAAC;EACxF,CAAA;CAER,GAAG,CAACR,GAAUK,CAAM,CAAC;CAMrB,OAJKF,IAKH,kBAACtB,EAAe,OAAhB;EACO;EACL,aAAU;EACV,WAAWK,EAAG,wCAAwCC,CAAS;EAC/D,GAAIH;EAEH,UAAAmB;CACmB,CAAA,IAXf;AAaX;AACA,EAAW,cAAc;AAqBzB,IAAMM,IAAgB5B,EAAe,UAqB/B6B,IAAe7B,EAAe"}

package/dist/ui/components/ui/input.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../../lib/ime-utils.cjs");let r=require("react/jsx-runtime"),i=require("react");i=e.__toESM(i,1);let a=require("@base-ui/react/input");var o=i.forwardRef(({className:e,type:i,testId:o,...s},c)=>{let{children:l,...u}=s,d=i===`number`,f=d?`text`:i,p=s.inputMode||(d?`numeric`:void 0),m=s.pattern||(d?`[0-9\\.\\-]*`:void 0),h=e=>{if(d&&(e.key===`ArrowUp`||e.key===`ArrowDown`)){e.preventDefault();let t=e.key===`ArrowUp`?`up`:`down`,r=parseFloat(String(s.step||`1`)),i=n.getNextNumericValue(s.value,t,r);if(s.onChange){let t={target:{...e.target,value:String(i),name:s.name},currentTarget:{...e.currentTarget,value:String(i),name:s.name}};s.onChange(t)}}s.onKeyDown?.(e)},g=e=>{d&&(e.target.value=n.normalizeNumericInput(e.target.value)),s.onChange?.(e)};return(0,r.jsx)(a.Input,{ref:c,...u,type:f,inputMode:p,pattern:m,"data-slot":`input`,"data-testid":o,onKeyDown:h,onChange:g,className:t.cn(`dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-background px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,e)})});o.displayName=`Input`,exports.Input=o;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../../lib/ime-utils.cjs");let r=require("react/jsx-runtime"),i=require("react");i=e.__toESM(i,1);let a=require("@base-ui/react/input");function o({ref:e,className:i,type:o,testId:s,...c}){let{children:l,...u}=c,d=o===`number`,f=d?`text`:o,p=c.inputMode||(d?`numeric`:void 0),m=c.pattern||(d?`[0-9\\.\\-]*`:void 0),h=e=>{if(d&&(e.key===`ArrowUp`||e.key===`ArrowDown`)){e.preventDefault();let t=e.key===`ArrowUp`?`up`:`down`,r=parseFloat(String(c.step||`1`)),i=n.getNextNumericValue(c.value,t,r);if(c.onChange){let t={target:{...e.target,value:String(i),name:c.name},currentTarget:{...e.currentTarget,value:String(i),name:c.name}};c.onChange(t)}}c.onKeyDown?.(e)},g=e=>{d&&(e.target.value=n.normalizeNumericInput(e.target.value)),c.onChange?.(e)};return(0,r.jsx)(a.Input,{ref:e,...u,type:f,inputMode:p,pattern:m,"data-slot":`input`,"data-testid":s,onKeyDown:h,onChange:g,className:t.cn(`dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-background px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50`,i)})}o.displayName=`Input`,exports.Input=o;
 //# sourceMappingURL=input.cjs.map

package/dist/ui/components/ui/input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input.cjs","names":["React","getNextNumericValue","normalizeNumericInput","InputPrimitive","cn","require_runtime","require_ui_lib_utils","require_ui_lib_ime_utils","react_jsx_runtime","react","_base_ui_react_input","Input","props","_children","restProps","isNumeric","type","effectiveType","inputMode","pattern","handleKeyDown","direction","step","nextValue","event","handleChange","testId","className"],"sources":["../../../../src/ui/components/ui/input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Input as InputPrimitive } from '@base-ui/react/input';\nimport { normalizeNumericInput, getNextNumericValue } from '../../lib/ime-utils';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Base UI input props with a stable selector; numeric wrapper behavior is documented on Input.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see Input\n */\nexport interface InputProps extends React.ComponentProps<typeof InputPrimitive> {\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a Base UI input with optional test ID and IME-aware numeric normalization.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered Input composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. No label prop is supported; use an associated Label or accessible name. type=number renders type=text, defaults inputMode to numeric and pattern to [0-9\\.\\-]*, normalizes fullwidth/nonnumeric input on change, and invokes the supplied onChange with the modified event. ArrowUp/ArrowDown derive the next value from props.value and step (default 1); min/max are not clamped by this wrapper. Numeric stepping requires a controlled value/onChange for reliable updates. Children are discarded. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { useState } from 'react';\n * import { Input, Label } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   const [quantity, setQuantity] = useState(\"1\");\n *   return (<><Label htmlFor=\"quantity\">Quantity</Label><Input id=\"quantity\" type=\"number\" value={quantity} onChange={event => setQuantity(event.target.value)} /></>);\n * }\n * ```\n */\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, testId, ...props }, ref) => {\n    // Explicitly exclude children from props since input is a void element\n    const {\n      children: _children,\n      ...restProps\n    } = props as InputProps & { children?: React.ReactNode };\n\n    const isNumeric = type === 'number';\n    const effectiveType = isNumeric ? 'text' : type;\n    const inputMode = props.inputMode || (isNumeric ? 'numeric' : undefined);\n    const pattern = props.pattern || (isNumeric ? '[0-9\\\\.\\\\-]*' : undefined);\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (isNumeric && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {\n        e.preventDefault();\n        const direction = e.key === 'ArrowUp' ? 'up' : 'down';\n        const step = parseFloat(String(props.step || '1'));\n        const nextValue = getNextNumericValue(props.value as any, direction, step);\n\n        // Create a synthetic event to trigger onChange if needed,\n        // but since Input is often used with controlled value, we just need to call onChange if it exists.\n        // However, most React apps use controlled components.\n        // For uncontrolled ones, we'd need to set e.target.value.\n        if (props.onChange) {\n          const event = {\n            target: {\n              ...e.target,\n              value: String(nextValue),\n              name: props.name,\n            },\n            currentTarget: {\n              ...e.currentTarget,\n              value: String(nextValue),\n              name: props.name,\n            },\n          } as any;\n          props.onChange(event);\n        }\n      }\n      props.onKeyDown?.(e as any);\n    };\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (isNumeric) {\n        e.target.value = normalizeNumericInput(e.target.value);\n      }\n      props.onChange?.(e as any);\n    };\n\n    return (\n      <InputPrimitive\n        ref={ref}\n        {...restProps}\n        type={effectiveType}\n        inputMode={inputMode}\n        pattern={pattern}\n        data-slot='input'\n        data-testid={testId}\n        onKeyDown={handleKeyDown}\n        onChange={handleChange}\n        className={cn(\n          'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-background px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n      />\n    );\n  },\n);\nInput.displayName = 'Input';\n\nexport { Input };\n"],"mappings":"A,8TAmCA,IAAMW,EAAQX,EAAM,YACjB,CAAE,YAAW,OAAM,SAAQ,GAAGY,GAAS,IAAQ,CAE9C,GAAM,CACJ,SAAUC,EACV,GAAGC,GACDF,EAEEG,EAAYC,IAAS,SACrBC,EAAgBF,EAAY,OAASC,EACrCE,EAAYN,EAAM,YAAcG,EAAY,UAAY,IAAA,IACxDI,EAAUP,EAAM,UAAYG,EAAY,eAAiB,IAAA,IAEzDK,EAAiB,GAA6C,CAClE,GAAIL,IAAc,EAAE,MAAQ,WAAa,EAAE,MAAQ,aAAc,CAC/D,EAAE,eAAe,EACjB,IAAMM,EAAY,EAAE,MAAQ,UAAY,KAAO,OACzCC,EAAO,WAAW,OAAOV,EAAM,MAAQ,GAAG,CAAC,EAC3CW,EAAYtB,EAAAA,oBAAoBW,EAAM,MAAcS,EAAWC,CAAI,EAMzE,GAAIV,EAAM,SAAU,CAClB,IAAMY,EAAQ,CACZ,OAAQ,CACN,GAAG,EAAE,OACL,MAAO,OAAOD,CAAS,EACvB,KAAMX,EAAM,IACd,EACA,cAAe,CACb,GAAG,EAAE,cACL,MAAO,OAAOW,CAAS,EACvB,KAAMX,EAAM,IACd,CACF,EACAA,EAAM,SAASY,CAAK,CACtB,CACF,CACAZ,EAAM,YAAY,CAAQ,CAC5B,EAEMa,EAAgB,GAA2C,CAC3DV,IACF,EAAE,OAAO,MAAQb,EAAAA,sBAAsB,EAAE,OAAO,KAAK,GAEvDU,EAAM,WAAW,CAAQ,CAC3B,EAEA,OACE,EAAAJ,EAAA,IAAA,CAACL,EAAAA,MAAD,CACO,MACL,GAAIW,EACJ,KAAMG,EACK,YACF,UACT,YAAU,QACV,cAAaS,EACb,UAAWN,EACX,SAAUK,EACV,UAAWrB,EAAAA,GACT,qpBACAuB,CACF,CACD,CAAA,CAEL,CACF,EACA,EAAM,YAAc,Q"}
+{"version":3,"file":"input.cjs","names":["getNextNumericValue","normalizeNumericInput","InputPrimitive","cn","require_runtime","require_ui_lib_utils","require_ui_lib_ime_utils","react_jsx_runtime","react","_base_ui_react_input","Input","props","_children","restProps","isNumeric","type","effectiveType","inputMode","pattern","handleKeyDown","direction","step","nextValue","event","handleChange","testId","className"],"sources":["../../../../src/ui/components/ui/input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Input as InputPrimitive } from '@base-ui/react/input';\nimport { normalizeNumericInput, getNextNumericValue } from '../../lib/ime-utils';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Base UI input props with a stable selector; numeric wrapper behavior is documented on Input.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see Input\n */\nexport interface InputProps extends React.ComponentProps<typeof InputPrimitive> {\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a Base UI input with optional test ID and IME-aware numeric normalization.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered Input composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. No label prop is supported; use an associated Label or accessible name. type=number renders type=text, defaults inputMode to numeric and pattern to [0-9\\.\\-]*, normalizes fullwidth/nonnumeric input on change, and invokes the supplied onChange with the modified event. ArrowUp/ArrowDown derive the next value from props.value and step (default 1); min/max are not clamped by this wrapper. Numeric stepping requires a controlled value/onChange for reliable updates. Children are discarded. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { useState } from 'react';\n * import { Input, Label } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   const [quantity, setQuantity] = useState(\"1\");\n *   return (<><Label htmlFor=\"quantity\">Quantity</Label><Input id=\"quantity\" type=\"number\" value={quantity} onChange={event => setQuantity(event.target.value)} /></>);\n * }\n * ```\n */\nfunction Input({\n  ref,\n  className,\n  type,\n  testId,\n  ...props\n}: React.PropsWithoutRef<InputProps> & React.RefAttributes<HTMLInputElement>) {\n  // Explicitly exclude children from props since input is a void element\n  const { children: _children, ...restProps } = props as InputProps & {\n    children?: React.ReactNode;\n  };\n\n  const isNumeric = type === 'number';\n  const effectiveType = isNumeric ? 'text' : type;\n  const inputMode = props.inputMode || (isNumeric ? 'numeric' : undefined);\n  const pattern = props.pattern || (isNumeric ? '[0-9\\\\.\\\\-]*' : undefined);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (isNumeric && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {\n      e.preventDefault();\n      const direction = e.key === 'ArrowUp' ? 'up' : 'down';\n      const step = parseFloat(String(props.step || '1'));\n      const nextValue = getNextNumericValue(props.value as any, direction, step);\n\n      // Create a synthetic event to trigger onChange if needed,\n      // but since Input is often used with controlled value, we just need to call onChange if it exists.\n      // However, most React apps use controlled components.\n      // For uncontrolled ones, we'd need to set e.target.value.\n      if (props.onChange) {\n        const event = {\n          target: {\n            ...e.target,\n            value: String(nextValue),\n            name: props.name,\n          },\n          currentTarget: {\n            ...e.currentTarget,\n            value: String(nextValue),\n            name: props.name,\n          },\n        } as any;\n        props.onChange(event);\n      }\n    }\n    props.onKeyDown?.(e as any);\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (isNumeric) {\n      e.target.value = normalizeNumericInput(e.target.value);\n    }\n    props.onChange?.(e as any);\n  };\n\n  return (\n    <InputPrimitive\n      ref={ref}\n      {...restProps}\n      type={effectiveType}\n      inputMode={inputMode}\n      pattern={pattern}\n      data-slot='input'\n      data-testid={testId}\n      onKeyDown={handleKeyDown}\n      onChange={handleChange}\n      className={cn(\n        'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-background px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n    />\n  );\n}\nInput.displayName = 'Input';\n\nexport { Input };\n"],"mappings":"A,8TAmCA,SAASU,EAAM,CACb,MACA,YACA,OACA,SACA,GAAGC,GACyE,CAE5E,GAAM,CAAE,SAAUC,EAAW,GAAGC,GAAcF,EAIxCG,EAAYC,IAAS,SACrBC,EAAgBF,EAAY,OAASC,EACrCE,EAAYN,EAAM,YAAcG,EAAY,UAAY,IAAA,IACxDI,EAAUP,EAAM,UAAYG,EAAY,eAAiB,IAAA,IAEzDK,EAAiB,GAA6C,CAClE,GAAIL,IAAc,EAAE,MAAQ,WAAa,EAAE,MAAQ,aAAc,CAC/D,EAAE,eAAe,EACjB,IAAMM,EAAY,EAAE,MAAQ,UAAY,KAAO,OACzCC,EAAO,WAAW,OAAOV,EAAM,MAAQ,GAAG,CAAC,EAC3CW,EAAYtB,EAAAA,oBAAoBW,EAAM,MAAcS,EAAWC,CAAI,EAMzE,GAAIV,EAAM,SAAU,CAClB,IAAMY,EAAQ,CACZ,OAAQ,CACN,GAAG,EAAE,OACL,MAAO,OAAOD,CAAS,EACvB,KAAMX,EAAM,IACd,EACA,cAAe,CACb,GAAG,EAAE,cACL,MAAO,OAAOW,CAAS,EACvB,KAAMX,EAAM,IACd,CACF,EACAA,EAAM,SAASY,CAAK,CACtB,CACF,CACAZ,EAAM,YAAY,CAAQ,CAC5B,EAEMa,EAAgB,GAA2C,CAC3DV,IACF,EAAE,OAAO,MAAQb,EAAAA,sBAAsB,EAAE,OAAO,KAAK,GAEvDU,EAAM,WAAW,CAAQ,CAC3B,EAEA,OACE,EAAAJ,EAAA,IAAA,CAACL,EAAAA,MAAD,CACO,MACL,GAAIW,EACJ,KAAMG,EACK,YACF,UACT,YAAU,QACV,cAAaS,EACb,UAAWN,EACX,SAAUK,EACV,UAAWrB,EAAAA,GACT,qpBACAuB,CACF,CACD,CAAA,CAEL,CACA,EAAM,YAAc,Q"}

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

@@ -28,5 +28,8 @@ export interface InputProps extends React.ComponentProps<typeof InputPrimitive>
  * }
  * ```
  */
-declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare function Input({ ref, className, type, testId, ...props }: React.PropsWithoutRef<InputProps> & React.RefAttributes<HTMLInputElement>): React.JSX.Element;
+declare namespace Input {
+    var displayName: string;
+}
 export { Input };

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

@@ -28,5 +28,8 @@ export interface InputProps extends React.ComponentProps<typeof InputPrimitive>
  * }
  * ```
  */
-declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare function Input({ ref, className, type, testId, ...props }: React.PropsWithoutRef<InputProps> & React.RefAttributes<HTMLInputElement>): React.JSX.Element;
+declare namespace Input {
+    var displayName: string;
+}
 export { Input };

package/dist/ui/components/ui/input.js

@@ -2,49 +2,49 @@
 import { cn as e } from "../../lib/utils.js";
 import { getNextNumericValue as t, normalizeNumericInput as n } from "../../lib/ime-utils.js";
 import { jsx as r } from "react/jsx-runtime";
-import * as i from "react";
-import { Input as a } from "@base-ui/react/input";
+import "react";
+import { Input as i } from "@base-ui/react/input";
 //#region src/ui/components/ui/input.tsx
-var o = i.forwardRef(({ className: i, type: o, testId: s, ...c }, l) => {
-	let { children: u, ...d } = c, f = o === "number", p = f ? "text" : o, m = c.inputMode || (f ? "numeric" : void 0), h = c.pattern || (f ? "[0-9\\.\\-]*" : void 0), g = (e) => {
+function a({ ref: a, className: o, type: s, testId: c, ...l }) {
+	let { children: u, ...d } = l, f = s === "number", p = f ? "text" : s, m = l.inputMode || (f ? "numeric" : void 0), h = l.pattern || (f ? "[0-9\\.\\-]*" : void 0), g = (e) => {
 		if (f && (e.key === "ArrowUp" || e.key === "ArrowDown")) {
 			e.preventDefault();
-			let n = e.key === "ArrowUp" ? "up" : "down", r = parseFloat(String(c.step || "1")), i = t(c.value, n, r);
-			if (c.onChange) {
+			let n = e.key === "ArrowUp" ? "up" : "down", r = parseFloat(String(l.step || "1")), i = t(l.value, n, r);
+			if (l.onChange) {
 				let t = {
 					target: {
 						...e.target,
 						value: String(i),
-						name: c.name
+						name: l.name
 					},
 					currentTarget: {
 						...e.currentTarget,
 						value: String(i),
-						name: c.name
+						name: l.name
 					}
 				};
-				c.onChange(t);
+				l.onChange(t);
 			}
 		}
-		c.onKeyDown?.(e);
+		l.onKeyDown?.(e);
 	}, _ = (e) => {
-		f && (e.target.value = n(e.target.value)), c.onChange?.(e);
+		f && (e.target.value = n(e.target.value)), l.onChange?.(e);
 	};
-	return /* @__PURE__ */ r(a, {
-		ref: l,
+	return /* @__PURE__ */ r(i, {
+		ref: a,
 		...d,
 		type: p,
 		inputMode: m,
 		pattern: h,
 		"data-slot": "input",
-		"data-testid": s,
+		"data-testid": c,
 		onKeyDown: g,
 		onChange: _,
-		className: e("dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-background px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", i)
+		className: e("dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-background px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", o)
 	});
-});
-o.displayName = "Input";
+}
+a.displayName = "Input";
 //#endregion
-export { o as Input };
+export { a as Input };
 
 //# sourceMappingURL=input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["React","InputPrimitive","React$1","Input$1","Input","props","_children","restProps","isNumeric","type","effectiveType","inputMode","pattern","handleKeyDown","direction","step","nextValue","getNextNumericValue","event","handleChange","normalizeNumericInput","testId","cn","className"],"sources":["../../../../src/ui/components/ui/input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Input as InputPrimitive } from '@base-ui/react/input';\nimport { normalizeNumericInput, getNextNumericValue } from '../../lib/ime-utils';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Base UI input props with a stable selector; numeric wrapper behavior is documented on Input.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see Input\n */\nexport interface InputProps extends React.ComponentProps<typeof InputPrimitive> {\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a Base UI input with optional test ID and IME-aware numeric normalization.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered Input composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. No label prop is supported; use an associated Label or accessible name. type=number renders type=text, defaults inputMode to numeric and pattern to [0-9\\.\\-]*, normalizes fullwidth/nonnumeric input on change, and invokes the supplied onChange with the modified event. ArrowUp/ArrowDown derive the next value from props.value and step (default 1); min/max are not clamped by this wrapper. Numeric stepping requires a controlled value/onChange for reliable updates. Children are discarded. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { useState } from 'react';\n * import { Input, Label } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   const [quantity, setQuantity] = useState(\"1\");\n *   return (<><Label htmlFor=\"quantity\">Quantity</Label><Input id=\"quantity\" type=\"number\" value={quantity} onChange={event => setQuantity(event.target.value)} /></>);\n * }\n * ```\n */\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, type, testId, ...props }, ref) => {\n    // Explicitly exclude children from props since input is a void element\n    const {\n      children: _children,\n      ...restProps\n    } = props as InputProps & { children?: React.ReactNode };\n\n    const isNumeric = type === 'number';\n    const effectiveType = isNumeric ? 'text' : type;\n    const inputMode = props.inputMode || (isNumeric ? 'numeric' : undefined);\n    const pattern = props.pattern || (isNumeric ? '[0-9\\\\.\\\\-]*' : undefined);\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (isNumeric && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {\n        e.preventDefault();\n        const direction = e.key === 'ArrowUp' ? 'up' : 'down';\n        const step = parseFloat(String(props.step || '1'));\n        const nextValue = getNextNumericValue(props.value as any, direction, step);\n\n        // Create a synthetic event to trigger onChange if needed,\n        // but since Input is often used with controlled value, we just need to call onChange if it exists.\n        // However, most React apps use controlled components.\n        // For uncontrolled ones, we'd need to set e.target.value.\n        if (props.onChange) {\n          const event = {\n            target: {\n              ...e.target,\n              value: String(nextValue),\n              name: props.name,\n            },\n            currentTarget: {\n              ...e.currentTarget,\n              value: String(nextValue),\n              name: props.name,\n            },\n          } as any;\n          props.onChange(event);\n        }\n      }\n      props.onKeyDown?.(e as any);\n    };\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (isNumeric) {\n        e.target.value = normalizeNumericInput(e.target.value);\n      }\n      props.onChange?.(e as any);\n    };\n\n    return (\n      <InputPrimitive\n        ref={ref}\n        {...restProps}\n        type={effectiveType}\n        inputMode={inputMode}\n        pattern={pattern}\n        data-slot='input'\n        data-testid={testId}\n        onKeyDown={handleKeyDown}\n        onChange={handleChange}\n        className={cn(\n          'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-background px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n          className,\n        )}\n      />\n    );\n  },\n);\nInput.displayName = 'Input';\n\nexport { Input };\n"],"mappings":";;;;;;;AAmCA,IAAMI,IAAQJ,EAAM,YACjB,EAAE,cAAW,SAAM,WAAQ,GAAGK,KAAS,MAAQ;CAE9C,IAAM,EACJ,UAAUC,GACV,GAAGC,MACDF,GAEEG,IAAYC,MAAS,UACrBC,IAAgBF,IAAY,SAASC,GACrCE,IAAYN,EAAM,cAAcG,IAAY,YAAY,KAAA,IACxDI,IAAUP,EAAM,YAAYG,IAAY,iBAAiB,KAAA,IAEzDK,KAAiB,MAA6C;EAClE,IAAIL,MAAc,EAAE,QAAQ,aAAa,EAAE,QAAQ,cAAc;GAC/D,EAAE,eAAe;GACjB,IAAMM,IAAY,EAAE,QAAQ,YAAY,OAAO,QACzCC,IAAO,WAAW,OAAOV,EAAM,QAAQ,GAAG,CAAC,GAC3CW,IAAYC,EAAoBZ,EAAM,OAAcS,GAAWC,CAAI;GAMzE,IAAIV,EAAM,UAAU;IAClB,IAAMa,IAAQ;KACZ,QAAQ;MACN,GAAG,EAAE;MACL,OAAO,OAAOF,CAAS;MACvB,MAAMX,EAAM;KACd;KACA,eAAe;MACb,GAAG,EAAE;MACL,OAAO,OAAOW,CAAS;MACvB,MAAMX,EAAM;KACd;IACF;IACA,EAAM,SAASa,CAAK;GACtB;EACF;EACA,EAAM,YAAY,CAAQ;CAC5B,GAEMC,KAAgB,MAA2C;EAI/D,AAHIX,MACF,EAAE,OAAO,QAAQY,EAAsB,EAAE,OAAO,KAAK,IAEvDf,EAAM,WAAW,CAAQ;CAC3B;CAEA,OACE,kBAACJ,GAAD;EACO;EACL,GAAIM;EACJ,MAAMG;EACK;EACF;EACT,aAAU;EACV,eAAaW;EACb,WAAWR;EACX,UAAUM;EACV,WAAWG,EACT,spBACAC,CACF;CACD,CAAA;AAEL,CACF;AACA,EAAM,cAAc"}
+{"version":3,"file":"input.js","names":["InputPrimitive","Input$1","Input","props","_children","restProps","isNumeric","type","effectiveType","inputMode","pattern","handleKeyDown","direction","step","nextValue","getNextNumericValue","event","handleChange","normalizeNumericInput","testId","cn","className"],"sources":["../../../../src/ui/components/ui/input.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Input as InputPrimitive } from '@base-ui/react/input';\nimport { normalizeNumericInput, getNextNumericValue } from '../../lib/ime-utils';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Base UI input props with a stable selector; numeric wrapper behavior is documented on Input.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see Input\n */\nexport interface InputProps extends React.ComponentProps<typeof InputPrimitive> {\n  /**\n   * Stable data-testid assigned to the rendered control/container; omitted means no selector.\n   */\n  testId?: string;\n}\n\n/**\n * Renders a Base UI input with optional test ID and IME-aware numeric normalization.\n * @param props - Component attributes and children accepted by the declared Base UI or native prop type; className customizes wrapper styling.\n * @returns The rendered Input composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. No label prop is supported; use an associated Label or accessible name. type=number renders type=text, defaults inputMode to numeric and pattern to [0-9\\.\\-]*, normalizes fullwidth/nonnumeric input on change, and invokes the supplied onChange with the modified event. ArrowUp/ArrowDown derive the next value from props.value and step (default 1); min/max are not clamped by this wrapper. Numeric stepping requires a controlled value/onChange for reliable updates. Children are discarded. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { useState } from 'react';\n * import { Input, Label } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   const [quantity, setQuantity] = useState(\"1\");\n *   return (<><Label htmlFor=\"quantity\">Quantity</Label><Input id=\"quantity\" type=\"number\" value={quantity} onChange={event => setQuantity(event.target.value)} /></>);\n * }\n * ```\n */\nfunction Input({\n  ref,\n  className,\n  type,\n  testId,\n  ...props\n}: React.PropsWithoutRef<InputProps> & React.RefAttributes<HTMLInputElement>) {\n  // Explicitly exclude children from props since input is a void element\n  const { children: _children, ...restProps } = props as InputProps & {\n    children?: React.ReactNode;\n  };\n\n  const isNumeric = type === 'number';\n  const effectiveType = isNumeric ? 'text' : type;\n  const inputMode = props.inputMode || (isNumeric ? 'numeric' : undefined);\n  const pattern = props.pattern || (isNumeric ? '[0-9\\\\.\\\\-]*' : undefined);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (isNumeric && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {\n      e.preventDefault();\n      const direction = e.key === 'ArrowUp' ? 'up' : 'down';\n      const step = parseFloat(String(props.step || '1'));\n      const nextValue = getNextNumericValue(props.value as any, direction, step);\n\n      // Create a synthetic event to trigger onChange if needed,\n      // but since Input is often used with controlled value, we just need to call onChange if it exists.\n      // However, most React apps use controlled components.\n      // For uncontrolled ones, we'd need to set e.target.value.\n      if (props.onChange) {\n        const event = {\n          target: {\n            ...e.target,\n            value: String(nextValue),\n            name: props.name,\n          },\n          currentTarget: {\n            ...e.currentTarget,\n            value: String(nextValue),\n            name: props.name,\n          },\n        } as any;\n        props.onChange(event);\n      }\n    }\n    props.onKeyDown?.(e as any);\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (isNumeric) {\n      e.target.value = normalizeNumericInput(e.target.value);\n    }\n    props.onChange?.(e as any);\n  };\n\n  return (\n    <InputPrimitive\n      ref={ref}\n      {...restProps}\n      type={effectiveType}\n      inputMode={inputMode}\n      pattern={pattern}\n      data-slot='input'\n      data-testid={testId}\n      onKeyDown={handleKeyDown}\n      onChange={handleChange}\n      className={cn(\n        'dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-background px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n    />\n  );\n}\nInput.displayName = 'Input';\n\nexport { Input };\n"],"mappings":";;;;;;;AAmCA,SAASE,EAAM,EACb,QACA,cACA,SACA,WACA,GAAGC,KACyE;CAE5E,IAAM,EAAE,UAAUC,GAAW,GAAGC,MAAcF,GAIxCG,IAAYC,MAAS,UACrBC,IAAgBF,IAAY,SAASC,GACrCE,IAAYN,EAAM,cAAcG,IAAY,YAAY,KAAA,IACxDI,IAAUP,EAAM,YAAYG,IAAY,iBAAiB,KAAA,IAEzDK,KAAiB,MAA6C;EAClE,IAAIL,MAAc,EAAE,QAAQ,aAAa,EAAE,QAAQ,cAAc;GAC/D,EAAE,eAAe;GACjB,IAAMM,IAAY,EAAE,QAAQ,YAAY,OAAO,QACzCC,IAAO,WAAW,OAAOV,EAAM,QAAQ,GAAG,CAAC,GAC3CW,IAAYC,EAAoBZ,EAAM,OAAcS,GAAWC,CAAI;GAMzE,IAAIV,EAAM,UAAU;IAClB,IAAMa,IAAQ;KACZ,QAAQ;MACN,GAAG,EAAE;MACL,OAAO,OAAOF,CAAS;MACvB,MAAMX,EAAM;KACd;KACA,eAAe;MACb,GAAG,EAAE;MACL,OAAO,OAAOW,CAAS;MACvB,MAAMX,EAAM;KACd;IACF;IACA,EAAM,SAASa,CAAK;GACtB;EACF;EACA,EAAM,YAAY,CAAQ;CAC5B,GAEMC,KAAgB,MAA2C;EAI/D,AAHIX,MACF,EAAE,OAAO,QAAQY,EAAsB,EAAE,OAAO,KAAK,IAEvDf,EAAM,WAAW,CAAQ;CAC3B;CAEA,OACE,kBAACH,GAAD;EACO;EACL,GAAIK;EACJ,MAAMG;EACK;EACF;EACT,aAAU;EACV,eAAaW;EACb,WAAWR;EACX,UAAUM;EACV,WAAWG,EACT,spBACAC,CACF;CACD,CAAA;AAEL;AACA,EAAM,cAAc"}

package/dist/ui/components/ui/label.cjs

@@ -1,2 +1,2 @@
-"use client";"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react/jsx-runtime"),r=require("react");r=e.__toESM(r,1);var i=r.forwardRef(({className:e,...r},i)=>(0,n.jsx)(`label`,{ref:i,"data-slot":`label`,className:t.cn(`gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed`,e),...r}));i.displayName=`Label`,exports.Label=i;
+"use client";"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react/jsx-runtime"),r=require("react");r=e.__toESM(r,1);function i({ref:e,className:r,...i}){return(0,n.jsx)(`label`,{ref:e,"data-slot":`label`,className:t.cn(`gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed`,r),...i})}i.displayName=`Label`,exports.Label=i;
 //# sourceMappingURL=label.cjs.map

package/dist/ui/components/ui/label.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"label.cjs","names":["React","cn","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","Label","props","className"],"sources":["../../../../src/ui/components/ui/label.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Renders a styled native label for an explicitly associated form control.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered Label composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Use htmlFor matching a control id, or wrap the control as native label semantics permit. This component does not allocate IDs or supply a form context. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Label, Input } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><Label htmlFor=\"name\">Name</Label><Input id=\"name\" /></>);\n * }\n * ```\n */\nconst Label = React.forwardRef<HTMLLabelElement, React.ComponentProps<'label'>>(\n  ({ className, ...props }, ref) => (\n    <label\n      ref={ref}\n      data-slot='label'\n      className={cn(\n        'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nLabel.displayName = 'Label';\n\nexport { Label };\n"],"mappings":"A,gQAqBA,IAAMM,EAAQN,EAAM,YACjB,CAAE,YAAW,GAAGO,GAAS,KACxB,EAAAH,EAAA,IAAA,CAAC,QAAD,CACO,MACL,YAAU,QACV,UAAWH,EAAAA,GACT,sNACAO,CACF,EACA,GAAID,CACL,CAAA,CAEL,EACA,EAAM,YAAc,Q"}
+{"version":3,"file":"label.cjs","names":["cn","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","Label","props","className"],"sources":["../../../../src/ui/components/ui/label.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Renders a styled native label for an explicitly associated form control.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered Label composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Use htmlFor matching a control id, or wrap the control as native label semantics permit. This component does not allocate IDs or supply a form context. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Label, Input } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><Label htmlFor=\"name\">Name</Label><Input id=\"name\" /></>);\n * }\n * ```\n */\nfunction Label({\n  ref,\n  className,\n  ...props\n}: React.PropsWithoutRef<React.ComponentProps<'label'>> & React.RefAttributes<HTMLLabelElement>) {\n  return (\n    <label\n      ref={ref}\n      data-slot='label'\n      className={cn(\n        'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nLabel.displayName = 'Label';\n\nexport { Label };\n"],"mappings":"A,gQAqBA,SAASK,EAAM,CACb,MACA,YACA,GAAGC,GAC4F,CAC/F,OACE,EAAAH,EAAA,IAAA,CAAC,QAAD,CACO,MACL,YAAU,QACV,UAAWH,EAAAA,GACT,sNACAO,CACF,EACA,GAAID,CACL,CAAA,CAEL,CACA,EAAM,YAAc,Q"}

package/dist/ui/components/ui/label.d.cts

@@ -14,5 +14,8 @@ import * as React from 'react';
  * }
  * ```
  */
-declare const Label: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare function Label({ ref, className, ...props }: React.PropsWithoutRef<React.ComponentProps<'label'>> & React.RefAttributes<HTMLLabelElement>): React.JSX.Element;
+declare namespace Label {
+    var displayName: string;
+}
 export { Label };

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

@@ -14,5 +14,8 @@ import * as React from 'react';
  * }
  * ```
  */
-declare const Label: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare function Label({ ref, className, ...props }: React.PropsWithoutRef<React.ComponentProps<'label'>> & React.RefAttributes<HTMLLabelElement>): React.JSX.Element;
+declare namespace Label {
+    var displayName: string;
+}
 export { Label };

package/dist/ui/components/ui/label.js

@@ -2,16 +2,18 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { jsx as t } from "react/jsx-runtime";
-import * as n from "react";
+import "react";
 //#region src/ui/components/ui/label.tsx
-var r = n.forwardRef(({ className: n, ...r }, i) => /* @__PURE__ */ t("label", {
-	ref: i,
-	"data-slot": "label",
-	className: e("gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed", n),
-	...r
-}));
-r.displayName = "Label";
+function n({ ref: n, className: r, ...i }) {
+	return /* @__PURE__ */ t("label", {
+		ref: n,
+		"data-slot": "label",
+		className: e("gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed", r),
+		...i
+	});
+}
+n.displayName = "Label";
 //#endregion
-export { r as Label };
+export { n as Label };
 
 //# sourceMappingURL=label.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"label.js","names":["React","React$1","Label","props","cn","className"],"sources":["../../../../src/ui/components/ui/label.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Renders a styled native label for an explicitly associated form control.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered Label composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Use htmlFor matching a control id, or wrap the control as native label semantics permit. This component does not allocate IDs or supply a form context. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Label, Input } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><Label htmlFor=\"name\">Name</Label><Input id=\"name\" /></>);\n * }\n * ```\n */\nconst Label = React.forwardRef<HTMLLabelElement, React.ComponentProps<'label'>>(\n  ({ className, ...props }, ref) => (\n    <label\n      ref={ref}\n      data-slot='label'\n      className={cn(\n        'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\nLabel.displayName = 'Label';\n\nexport { Label };\n"],"mappings":";;;;;;AAqBA,IAAME,IAAQF,EAAM,YACjB,EAAE,cAAW,GAAGG,KAAS,MACxB,kBAAC,SAAD;CACO;CACL,aAAU;CACV,WAAWC,EACT,uNACAC,CACF;CACA,GAAIF;AACL,CAAA,CAEL;AACA,EAAM,cAAc"}
+{"version":3,"file":"label.js","names":["Label","props","cn","className"],"sources":["../../../../src/ui/components/ui/label.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '../../lib/utils';\n\n/**\n * Renders a styled native label for an explicitly associated form control.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling.\n * @returns The rendered Label composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. Use htmlFor matching a control id, or wrap the control as native label semantics permit. This component does not allocate IDs or supply a form context. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Label, Input } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<><Label htmlFor=\"name\">Name</Label><Input id=\"name\" /></>);\n * }\n * ```\n */\nfunction Label({\n  ref,\n  className,\n  ...props\n}: React.PropsWithoutRef<React.ComponentProps<'label'>> & React.RefAttributes<HTMLLabelElement>) {\n  return (\n    <label\n      ref={ref}\n      data-slot='label'\n      className={cn(\n        'gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\nLabel.displayName = 'Label';\n\nexport { Label };\n"],"mappings":";;;;;;AAqBA,SAASA,EAAM,EACb,QACA,cACA,GAAGC,KAC4F;CAC/F,OACE,kBAAC,SAAD;EACO;EACL,aAAU;EACV,WAAWC,EACT,uNACAC,CACF;EACA,GAAIF;CACL,CAAA;AAEL;AACA,EAAM,cAAc"}

package/dist/ui/components/ui/layout.cjs

@@ -1,2 +1,2 @@
-"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react/jsx-runtime"),r=require("react");r=e.__toESM(r,1);var i=r.forwardRef(({className:e,header:r,footer:i,leftSidebar:a,rightPane:o,children:s,isLeftSidebarCollapsed:c=!1,isRightPaneVisible:l=!0,scrollable:u=!0,"aria-label":d=`Main content`,selectable:f=!0,headerPosition:p=`top`,...m},h)=>{let g=r&&(0,n.jsx)(`div`,{className:`flex-none z-10 w-full`,children:r}),_=i&&(0,n.jsx)(`div`,{className:`flex-none z-10 w-full`,children:i}),v=a,y=o&&l&&(0,n.jsx)(`aside`,{className:`flex-none overflow-y-auto border-l w-96 max-w-full absolute lg:relative right-0 top-0 bottom-0 h-full z-20 bg-background shadow-2xl lg:shadow-none`,children:o}),b=(0,n.jsx)(`main`,{"aria-label":d,tabIndex:u?0:void 0,className:t.cn(`flex-1 min-w-0 flex flex-col`,u?`overflow-y-auto`:`overflow-hidden`,!f&&`select-none`),children:s});return p===`right-of-sidebar`?(0,n.jsxs)(`div`,{ref:h,className:t.cn(`flex h-screen w-screen overflow-hidden bg-background text-foreground`,e),...m,children:[v,(0,n.jsxs)(`div`,{className:`flex flex-col flex-1 min-w-0 overflow-hidden`,children:[g,(0,n.jsxs)(`div`,{className:`flex flex-1 overflow-hidden relative`,children:[b,y]}),_]})]}):(0,n.jsxs)(`div`,{ref:h,className:t.cn(`flex h-screen w-screen flex-col overflow-hidden bg-background text-foreground`,e),...m,children:[g,(0,n.jsxs)(`div`,{className:`flex flex-1 overflow-hidden relative`,children:[v,b,y]}),_]})});i.displayName=`Layout`,exports.Layout=i;
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react/jsx-runtime"),r=require("react");r=e.__toESM(r,1);function i({ref:e,className:r,header:i,footer:a,leftSidebar:o,rightPane:s,children:c,isLeftSidebarCollapsed:l=!1,isRightPaneVisible:u=!0,scrollable:d=!0,"aria-label":f=`Main content`,selectable:p=!0,headerPosition:m=`top`,...h}){let g=i&&(0,n.jsx)(`div`,{className:`flex-none z-10 w-full`,children:i}),_=a&&(0,n.jsx)(`div`,{className:`flex-none z-10 w-full`,children:a}),v=o,y=s&&u&&(0,n.jsx)(`aside`,{className:`flex-none overflow-y-auto border-l w-96 max-w-full absolute lg:relative right-0 top-0 bottom-0 h-full z-20 bg-background shadow-2xl lg:shadow-none`,children:s}),b=(0,n.jsx)(`main`,{"aria-label":f,tabIndex:d?0:void 0,className:t.cn(`flex-1 min-w-0 flex flex-col`,d?`overflow-y-auto`:`overflow-hidden`,!p&&`select-none`),children:c});return m===`right-of-sidebar`?(0,n.jsxs)(`div`,{ref:e,className:t.cn(`flex h-screen w-screen overflow-hidden bg-background text-foreground`,r),...h,children:[v,(0,n.jsxs)(`div`,{className:`flex flex-col flex-1 min-w-0 overflow-hidden`,children:[g,(0,n.jsxs)(`div`,{className:`flex flex-1 overflow-hidden relative`,children:[b,y]}),_]})]}):(0,n.jsxs)(`div`,{ref:e,className:t.cn(`flex h-screen w-screen flex-col overflow-hidden bg-background text-foreground`,r),...h,children:[g,(0,n.jsxs)(`div`,{className:`flex flex-1 overflow-hidden relative`,children:[v,b,y]}),_]})}i.displayName=`Layout`,exports.Layout=i;
 //# sourceMappingURL=layout.cjs.map

package/dist/ui/components/ui/layout.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"layout.cjs","names":["React","cn","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","Layout","_isLeftSidebarCollapsed","mainLabel","props","HeaderContent","header","FooterContent","footer","SidebarContent","leftSidebar","RightPaneContent","rightPane","isRightPaneVisible","MainContent","scrollable","selectable","headerPosition","className"],"sources":["../../../../src/ui/components/ui/layout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/utils';\n\n/**\n * Viewport regions and flex/scroll options for Layout.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see Layout\n */\nexport interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Content in the non-scrolling top flex region; omitted means no header.\n   */\n  header?: React.ReactNode;\n  /**\n   * Content in the non-scrolling bottom flex region; omitted means no footer.\n   */\n  footer?: React.ReactNode;\n  /**\n   * Sidebar element rendered directly; it controls its own width and collapse behavior.\n   */\n  leftSidebar?: React.ReactNode;\n  /**\n   * Optional content in the right aside, visible when isRightPaneVisible is true.\n   */\n  rightPane?: React.ReactNode;\n  /**\n   * Compatibility flag accepted but ignored by Layout; it does not change sidebar width.\n   */\n  isLeftSidebarCollapsed?: boolean;\n  /**\n   * Whether rightPane is mounted; defaults to true.\n   */\n  isRightPaneVisible?: boolean;\n  /**\n   * Enables overflow-y-auto on the main area; defaults to true.\n   */\n  scrollable?: boolean;\n  /**\n   * Allows main-area text selection; defaults to true, false adds select-none.\n   */\n  selectable?: boolean;\n  /**\n   * top places header above sidebar; right-of-sidebar places it beside sidebar. Defaults to top.\n   */\n  headerPosition?: 'top' | 'right-of-sidebar';\n}\n\n/**\n * Divides the viewport into fixed flex header/footer, a growing main area and optional side panes.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: _isLeftSidebarCollapsed=false, isRightPaneVisible=true, scrollable=true, selectable=true, headerPosition='top'.\n * @returns The rendered Layout composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The root uses h-screen/w-screen and clips overflow. scrollable and selectable default to true; the right pane overlays content below lg and sits in normal layout from lg. headerPosition defaults to top; right-of-sidebar moves header/footer beside the sidebar. isLeftSidebarCollapsed is accepted but ignored; the supplied sidebar owns its own collapse behavior. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Layout } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Layout header={<header>Project</header>} footer={<footer>Status</footer>} leftSidebar={<nav>Navigation</nav>} rightPane={<aside>Details</aside>}><p>Main content</p></Layout>);\n * }\n * ```\n */\nexport const Layout = React.forwardRef<HTMLDivElement, LayoutProps>(\n  (\n    {\n      className,\n      header,\n      footer,\n      leftSidebar,\n      rightPane,\n      children,\n      isLeftSidebarCollapsed: _isLeftSidebarCollapsed = false,\n      isRightPaneVisible = true,\n      scrollable = true,\n      'aria-label': mainLabel = 'Main content',\n      selectable = true,\n      headerPosition = 'top',\n      ...props\n    },\n    ref,\n  ) => {\n    const HeaderContent = header && <div className='flex-none z-10 w-full'>{header}</div>;\n\n    const FooterContent = footer && <div className='flex-none z-10 w-full'>{footer}</div>;\n\n    // Render sidebar directly without aside wrapper - Sidebar component has its own container structure\n    const SidebarContent = leftSidebar;\n\n    const RightPaneContent = rightPane && isRightPaneVisible && (\n      <aside className='flex-none overflow-y-auto border-l w-96 max-w-full absolute lg:relative right-0 top-0 bottom-0 h-full z-20 bg-background shadow-2xl lg:shadow-none'>\n        {rightPane}\n      </aside>\n    );\n\n    const MainContent = (\n      <main\n        aria-label={mainLabel}\n        tabIndex={scrollable ? 0 : undefined}\n        className={cn(\n          'flex-1 min-w-0 flex flex-col',\n          scrollable ? 'overflow-y-auto' : 'overflow-hidden',\n          !selectable && 'select-none',\n        )}\n      >\n        {children}\n      </main>\n    );\n\n    if (headerPosition === 'right-of-sidebar') {\n      return (\n        <div\n          ref={ref}\n          className={cn(\n            'flex h-screen w-screen overflow-hidden bg-background text-foreground',\n            className,\n          )}\n          {...props}\n        >\n          {SidebarContent}\n          <div className='flex flex-col flex-1 min-w-0 overflow-hidden'>\n            {HeaderContent}\n            <div className='flex flex-1 overflow-hidden relative'>\n              {MainContent}\n              {RightPaneContent}\n            </div>\n            {FooterContent}\n          </div>\n        </div>\n      );\n    }\n\n    // Default: headerPosition === 'top'\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex h-screen w-screen flex-col overflow-hidden bg-background text-foreground',\n          className,\n        )}\n        {...props}\n      >\n        {HeaderContent}\n        <div className='flex flex-1 overflow-hidden relative'>\n          {SidebarContent}\n          {MainContent}\n          {RightPaneContent}\n        </div>\n        {FooterContent}\n      </div>\n    );\n  },\n);\nLayout.displayName = 'Layout';\n"],"mappings":"A,mPA8DA,IAAaM,EAASN,EAAM,YAExB,CACE,YACA,SACA,SACA,cACA,YACA,WACA,uBAAwBO,EAA0B,GAClD,qBAAqB,GACrB,aAAa,GACb,aAAcC,EAAY,eAC1B,aAAa,GACb,iBAAiB,MACjB,GAAGC,GAEL,IACG,CACH,IAAMC,EAAgBC,IAAU,EAAAP,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wBAAyB,SAAAO,CAAY,CAAA,EAE9EC,EAAgBC,IAAU,EAAAT,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wBAAyB,SAAAS,CAAY,CAAA,EAG9EC,EAAiBC,EAEjBC,EAAmBC,GAAaC,IACpC,EAAAd,EAAA,IAAA,CAAC,QAAD,CAAO,UAAU,qJACd,SAAAa,CACI,CAAA,EAGHE,GACJ,EAAAf,EAAA,IAAA,CAAC,OAAD,CACE,aAAYI,EACZ,SAAUY,EAAa,EAAI,IAAA,GAC3B,UAAWnB,EAAAA,GACT,+BACAmB,EAAa,kBAAoB,kBACjC,CAACC,GAAc,aACjB,EAEC,UACG,CAAA,EA2BR,OAxBIC,IAAmB,oBAEnB,EAAAlB,EAAA,KAAA,CAAC,MAAD,CACO,MACL,UAAWH,EAAAA,GACT,uEACAsB,CACF,EACA,GAAId,EANN,SAAA,CAQGK,GACD,EAAAV,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,+CAAf,SAAA,CACGM,GACD,EAAAN,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uCAAf,SAAA,CACGe,EACAH,CACE,C,GACJJ,CACE,CACF,CAAA,CAAA,C,IAMP,EAAAR,EAAA,KAAA,CAAC,MAAD,CACO,MACL,UAAWH,EAAAA,GACT,gFACAsB,CACF,EACA,GAAId,EANN,SAAA,CAQGC,GACD,EAAAN,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uCAAf,SAAA,CACGU,EACAK,EACAH,CACE,C,GACJJ,CACE,C,EAET,CACF,EACA,EAAO,YAAc,S"}
+{"version":3,"file":"layout.cjs","names":["cn","require_runtime","require_ui_lib_utils","react_jsx_runtime","react","Layout","_isLeftSidebarCollapsed","mainLabel","props","HeaderContent","header","FooterContent","footer","SidebarContent","leftSidebar","RightPaneContent","rightPane","isRightPaneVisible","MainContent","scrollable","selectable","headerPosition","className"],"sources":["../../../../src/ui/components/ui/layout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/utils';\n\n/**\n * Viewport regions and flex/scroll options for Layout.\n * @remarks Inherited native or primitive props keep their upstream types and behavior; this declaration documents only the wrapper-owned options.\n * @see Layout\n */\nexport interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Content in the non-scrolling top flex region; omitted means no header.\n   */\n  header?: React.ReactNode;\n  /**\n   * Content in the non-scrolling bottom flex region; omitted means no footer.\n   */\n  footer?: React.ReactNode;\n  /**\n   * Sidebar element rendered directly; it controls its own width and collapse behavior.\n   */\n  leftSidebar?: React.ReactNode;\n  /**\n   * Optional content in the right aside, visible when isRightPaneVisible is true.\n   */\n  rightPane?: React.ReactNode;\n  /**\n   * Compatibility flag accepted but ignored by Layout; it does not change sidebar width.\n   */\n  isLeftSidebarCollapsed?: boolean;\n  /**\n   * Whether rightPane is mounted; defaults to true.\n   */\n  isRightPaneVisible?: boolean;\n  /**\n   * Enables overflow-y-auto on the main area; defaults to true.\n   */\n  scrollable?: boolean;\n  /**\n   * Allows main-area text selection; defaults to true, false adds select-none.\n   */\n  selectable?: boolean;\n  /**\n   * top places header above sidebar; right-of-sidebar places it beside sidebar. Defaults to top.\n   */\n  headerPosition?: 'top' | 'right-of-sidebar';\n}\n\n/**\n * Divides the viewport into fixed flex header/footer, a growing main area and optional side panes.\n * @param props - Component attributes and children accepted by the declared native/underlying prop type; className customizes wrapper styling. Wrapper defaults: _isLeftSidebarCollapsed=false, isRightPaneVisible=true, scrollable=true, selectable=true, headerPosition='top'.\n * @returns The rendered Layout composition.\n * @remarks Import @alneas/appkit-react/styles in the rendering host. The root uses h-screen/w-screen and clips overflow. scrollable and selectable default to true; the right pane overlays content below lg and sits in normal layout from lg. headerPosition defaults to top; right-of-sidebar moves header/footer beside the sidebar. isLeftSidebarCollapsed is accepted but ignored; the supplied sidebar owns its own collapse behavior. The ref prop forwards to the rendered control or container declared by the component ref type.\n * @example\n * ```tsx\n * import { Layout } from '@alneas/appkit-react/ui';\n * import '@alneas/appkit-react/styles';\n *\n * export function Example() {\n *   return (<Layout header={<header>Project</header>} footer={<footer>Status</footer>} leftSidebar={<nav>Navigation</nav>} rightPane={<aside>Details</aside>}><p>Main content</p></Layout>);\n * }\n * ```\n */\nexport function Layout({\n  ref,\n  className,\n  header,\n  footer,\n  leftSidebar,\n  rightPane,\n  children,\n  isLeftSidebarCollapsed: _isLeftSidebarCollapsed = false,\n  isRightPaneVisible = true,\n  scrollable = true,\n  'aria-label': mainLabel = 'Main content',\n  selectable = true,\n  headerPosition = 'top',\n  ...props\n}: React.PropsWithoutRef<LayoutProps> & React.RefAttributes<HTMLDivElement>) {\n  const HeaderContent = header && <div className='flex-none z-10 w-full'>{header}</div>;\n\n  const FooterContent = footer && <div className='flex-none z-10 w-full'>{footer}</div>;\n\n  // Render sidebar directly without aside wrapper - Sidebar component has its own container structure\n  const SidebarContent = leftSidebar;\n\n  const RightPaneContent = rightPane && isRightPaneVisible && (\n    <aside className='flex-none overflow-y-auto border-l w-96 max-w-full absolute lg:relative right-0 top-0 bottom-0 h-full z-20 bg-background shadow-2xl lg:shadow-none'>\n      {rightPane}\n    </aside>\n  );\n\n  const MainContent = (\n    <main\n      aria-label={mainLabel}\n      tabIndex={scrollable ? 0 : undefined}\n      className={cn(\n        'flex-1 min-w-0 flex flex-col',\n        scrollable ? 'overflow-y-auto' : 'overflow-hidden',\n        !selectable && 'select-none',\n      )}\n    >\n      {children}\n    </main>\n  );\n\n  if (headerPosition === 'right-of-sidebar') {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex h-screen w-screen overflow-hidden bg-background text-foreground',\n          className,\n        )}\n        {...props}\n      >\n        {SidebarContent}\n        <div className='flex flex-col flex-1 min-w-0 overflow-hidden'>\n          {HeaderContent}\n          <div className='flex flex-1 overflow-hidden relative'>\n            {MainContent}\n            {RightPaneContent}\n          </div>\n          {FooterContent}\n        </div>\n      </div>\n    );\n  }\n\n  // Default: headerPosition === 'top'\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'flex h-screen w-screen flex-col overflow-hidden bg-background text-foreground',\n        className,\n      )}\n      {...props}\n    >\n      {HeaderContent}\n      <div className='flex flex-1 overflow-hidden relative'>\n        {SidebarContent}\n        {MainContent}\n        {RightPaneContent}\n      </div>\n      {FooterContent}\n    </div>\n  );\n}\nLayout.displayName = 'Layout';\n"],"mappings":"A,mPA8DA,SAAgBK,EAAO,CACrB,MACA,YACA,SACA,SACA,cACA,YACA,WACA,uBAAwBC,EAA0B,GAClD,qBAAqB,GACrB,aAAa,GACb,aAAcC,EAAY,eAC1B,aAAa,GACb,iBAAiB,MACjB,GAAGC,GACwE,CAC3E,IAAMC,EAAgBC,IAAU,EAAAP,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wBAAyB,SAAAO,CAAY,CAAA,EAE9EC,EAAgBC,IAAU,EAAAT,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,wBAAyB,SAAAS,CAAY,CAAA,EAG9EC,EAAiBC,EAEjBC,EAAmBC,GAAaC,IACpC,EAAAd,EAAA,IAAA,CAAC,QAAD,CAAO,UAAU,qJACd,SAAAa,CACI,CAAA,EAGHE,GACJ,EAAAf,EAAA,IAAA,CAAC,OAAD,CACE,aAAYI,EACZ,SAAUY,EAAa,EAAI,IAAA,GAC3B,UAAWnB,EAAAA,GACT,+BACAmB,EAAa,kBAAoB,kBACjC,CAACC,GAAc,aACjB,EAEC,UACG,CAAA,EA2BR,OAxBIC,IAAmB,oBAEnB,EAAAlB,EAAA,KAAA,CAAC,MAAD,CACO,MACL,UAAWH,EAAAA,GACT,uEACAsB,CACF,EACA,GAAId,EANN,SAAA,CAQGK,GACD,EAAAV,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,+CAAf,SAAA,CACGM,GACD,EAAAN,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uCAAf,SAAA,CACGe,EACAH,CACE,C,GACJJ,CACE,CACF,CAAA,CAAA,C,IAMP,EAAAR,EAAA,KAAA,CAAC,MAAD,CACO,MACL,UAAWH,EAAAA,GACT,gFACAsB,CACF,EACA,GAAId,EANN,SAAA,CAQGC,GACD,EAAAN,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uCAAf,SAAA,CACGU,EACAK,EACAH,CACE,C,GACJJ,CACE,C,EAET,CACA,EAAO,YAAc,S"}

package/dist/ui/components/ui/layout.d.cts

@@ -57,4 +57,7 @@ export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
  * }
  * ```
  */
-export declare const Layout: React.ForwardRefExoticComponent<LayoutProps & React.RefAttributes<HTMLDivElement>>;
+export declare function Layout({ ref, className, header, footer, leftSidebar, rightPane, children, isLeftSidebarCollapsed: _isLeftSidebarCollapsed, isRightPaneVisible, scrollable, 'aria-label': mainLabel, selectable, headerPosition, ...props }: React.PropsWithoutRef<LayoutProps> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace Layout {
+    var displayName: string;
+}

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

@@ -57,4 +57,7 @@ export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
  * }
  * ```
  */
-export declare const Layout: React.ForwardRefExoticComponent<LayoutProps & React.RefAttributes<HTMLDivElement>>;
+export declare function Layout({ ref, className, header, footer, leftSidebar, rightPane, children, isLeftSidebarCollapsed: _isLeftSidebarCollapsed, isRightPaneVisible, scrollable, 'aria-label': mainLabel, selectable, headerPosition, ...props }: React.PropsWithoutRef<LayoutProps> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare namespace Layout {
+    var displayName: string;
+}

package/dist/ui/components/ui/layout.js

@@ -1,28 +1,28 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import * as r from "react";
+import "react";
 //#region src/ui/components/ui/layout.tsx
-var i = r.forwardRef(({ className: r, header: i, footer: a, leftSidebar: o, rightPane: s, children: c, isLeftSidebarCollapsed: l = !1, isRightPaneVisible: u = !0, scrollable: d = !0, "aria-label": f = "Main content", selectable: p = !0, headerPosition: m = "top", ...h }, g) => {
-	let _ = i && /* @__PURE__ */ t("div", {
-		className: "flex-none z-10 w-full",
-		children: i
-	}), v = a && /* @__PURE__ */ t("div", {
+function r({ ref: r, className: i, header: a, footer: o, leftSidebar: s, rightPane: c, children: l, isLeftSidebarCollapsed: u = !1, isRightPaneVisible: d = !0, scrollable: f = !0, "aria-label": p = "Main content", selectable: m = !0, headerPosition: h = "top", ...g }) {
+	let _ = a && /* @__PURE__ */ t("div", {
 		className: "flex-none z-10 w-full",
 		children: a
-	}), y = o, b = s && u && /* @__PURE__ */ t("aside", {
+	}), v = o && /* @__PURE__ */ t("div", {
+		className: "flex-none z-10 w-full",
+		children: o
+	}), y = s, b = c && d && /* @__PURE__ */ t("aside", {
 		className: "flex-none overflow-y-auto border-l w-96 max-w-full absolute lg:relative right-0 top-0 bottom-0 h-full z-20 bg-background shadow-2xl lg:shadow-none",
-		children: s
-	}), x = /* @__PURE__ */ t("main", {
-		"aria-label": f,
-		tabIndex: d ? 0 : void 0,
-		className: e("flex-1 min-w-0 flex flex-col", d ? "overflow-y-auto" : "overflow-hidden", !p && "select-none"),
 		children: c
+	}), x = /* @__PURE__ */ t("main", {
+		"aria-label": p,
+		tabIndex: f ? 0 : void 0,
+		className: e("flex-1 min-w-0 flex flex-col", f ? "overflow-y-auto" : "overflow-hidden", !m && "select-none"),
+		children: l
 	});
-	return m === "right-of-sidebar" ? /* @__PURE__ */ n("div", {
-		ref: g,
-		className: e("flex h-screen w-screen overflow-hidden bg-background text-foreground", r),
-		...h,
+	return h === "right-of-sidebar" ? /* @__PURE__ */ n("div", {
+		ref: r,
+		className: e("flex h-screen w-screen overflow-hidden bg-background text-foreground", i),
+		...g,
 		children: [y, /* @__PURE__ */ n("div", {
 			className: "flex flex-col flex-1 min-w-0 overflow-hidden",
 			children: [
@@ -35,9 +35,9 @@ var i = r.forwardRef(({ className: r, header: i, footer: a, leftSidebar: o, righ
 			]
 		})]
 	}) : /* @__PURE__ */ n("div", {
-		ref: g,
-		className: e("flex h-screen w-screen flex-col overflow-hidden bg-background text-foreground", r),
-		...h,
+		ref: r,
+		className: e("flex h-screen w-screen flex-col overflow-hidden bg-background text-foreground", i),
+		...g,
 		children: [
 			_,
 			/* @__PURE__ */ n("div", {
@@ -51,9 +51,9 @@ var i = r.forwardRef(({ className: r, header: i, footer: a, leftSidebar: o, righ
 			v
 		]
 	});
-});
-i.displayName = "Layout";
+}
+r.displayName = "Layout";
 //#endregion
-export { i as Layout };
+export { r as Layout };
 
 //# sourceMappingURL=layout.js.map