@cryptlex/web-components 6.6.6-alpha09 → 6.6.6-alpha11

package/dist/components/calendar.d.ts

@@ -1,16 +1,55 @@
 import { CalendarCellProps as AriaCalendarCellProps, CalendarGridBodyProps as AriaCalendarGridBodyProps, CalendarGridProps as AriaCalendarGridProps, CalendarHeaderCellProps as AriaCalendarHeaderCellProps, CalendarProps as AriaCalendarProps, DateValue as AriaDateValue, RangeCalendarProps as AriaRangeCalendarProps } from 'react-aria-components';
+/**
+ * Calendar header with navigation buttons and month/year display.
+ */
 export declare function CalendarHeading(props: React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Grid container for calendar cells with proper spacing.
+ */
 export declare function CalendarGrid({ className, ...props }: AriaCalendarGridProps): import("react/jsx-runtime").JSX.Element;
 export declare const CalendarGridHeader: (props: import('react-aria-components').CalendarGridHeaderProps & React.RefAttributes<HTMLTableSectionElement>) => import('react').ReactElement | null;
+/**
+ * Header cell displaying day of week abbreviation.
+ */
 export declare function CalendarHeaderCell({ className, ...props }: AriaCalendarHeaderCellProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Body container for calendar date cells.
+ */
 export declare function CalendarGridBody({ className, ...props }: AriaCalendarGridBodyProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Individual calendar date cell with selection, hover, and availability states.
+ * Automatically adapts styling for range selection contexts.
+ */
 export declare function CalendarCell({ className, ...props }: AriaCalendarCellProps): import("react/jsx-runtime").JSX.Element;
 interface CalendarProps<T extends AriaDateValue> extends AriaCalendarProps<T> {
+    /** Error message to display below the calendar */
     errorMessage?: string;
 }
+/**
+ * Calendar component for single date selection.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Calendar defaultValue={today(getLocalTimeZone())} />
+ * ```
+ */
 export declare function Calendar<T extends AriaDateValue>({ errorMessage, className, ...props }: CalendarProps<T>): import("react/jsx-runtime").JSX.Element;
 interface RangeCalendarProps<T extends AriaDateValue> extends AriaRangeCalendarProps<T> {
+    /** Error message to display below the calendar */
     errorMessage?: string;
 }
+/**
+ * Calendar component for date range selection.
+ *
+ * @example Basic range selection
+ * ```tsx
+ * <RangeCalendar
+ *   defaultValue={{
+ *     start: today(getLocalTimeZone()),
+ *     end: today(getLocalTimeZone()).add({ days: 7 })
+ *   }}
+ * />
+ * ```
+ */
 export declare function RangeCalendar<T extends AriaDateValue>({ errorMessage, className, ...props }: RangeCalendarProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.js","sources":["../../lib/components/calendar.tsx"],"sourcesContent":["import { getLocalTimeZone, today } from '@internationalized/date';\nimport {\n    Calendar as AriaCalendar,\n    CalendarCell as AriaCalendarCell,\n    CalendarCellProps as AriaCalendarCellProps,\n    CalendarGrid as AriaCalendarGrid,\n    CalendarGridBody as AriaCalendarGridBody,\n    CalendarGridBodyProps as AriaCalendarGridBodyProps,\n    CalendarGridHeader as AriaCalendarGridHeader,\n    CalendarGridProps as AriaCalendarGridProps,\n    CalendarHeaderCell as AriaCalendarHeaderCell,\n    CalendarHeaderCellProps as AriaCalendarHeaderCellProps,\n    CalendarProps as AriaCalendarProps,\n    DateValue as AriaDateValue,\n    Heading as AriaHeading,\n    RangeCalendar as AriaRangeCalendar,\n    RangeCalendarProps as AriaRangeCalendarProps,\n    RangeCalendarStateContext as AriaRangeCalendarStateContext,\n    composeRenderProps,\n    useLocale,\n} from 'react-aria-components';\n\nimport { use } from 'react';\nimport { Button, buttonVariants } from '../components/button';\nimport { FieldError } from '../components/field';\nimport { classNames } from '../utilities/theme';\nimport { IcLeft, IcRight } from './icons';\n\nexport function CalendarHeading(props: React.HTMLAttributes<HTMLElement>) {\n    let { direction } = useLocale();\n\n    return (\n        <header className=\"flex w-full items-center gap-1 px-1 pb-icon\" {...props}>\n            <Button\n                slot=\"previous\"\n                size=\"none\"\n                className={classNames(\n                    'size-7 bg-transparent p-0 opacity-50',\n                    /* Hover */\n                    'data-[hovered]:opacity-100'\n                )}\n            >\n                {direction === 'rtl' ? <IcRight aria-hidden /> : <IcLeft aria-hidden />}\n            </Button>\n            <AriaHeading className=\"grow text-center body font-medium\" />\n            <Button\n                slot=\"next\"\n                className={classNames(\n                    'size-7 bg-transparent p-0 opacity-50',\n                    /* Hover */\n                    'data-[hovered]:opacity-100'\n                )}\n            >\n                {direction === 'rtl' ? <IcLeft aria-hidden /> : <IcRight aria-hidden />}\n            </Button>\n        </header>\n    );\n}\n\nexport function CalendarGrid({ className, ...props }: AriaCalendarGridProps) {\n    return (\n        <AriaCalendarGrid\n            className={classNames(' border-separate border-spacing-x-0 border-spacing-y-1 ', className)}\n            {...props}\n        />\n    );\n}\n\nexport const CalendarGridHeader = AriaCalendarGridHeader;\n\nexport function CalendarHeaderCell({ className, ...props }: AriaCalendarHeaderCellProps) {\n    return (\n        <AriaCalendarHeaderCell\n            className={classNames('w-9 body-sm font-normal text-muted-foreground', className)}\n            {...props}\n        />\n    );\n}\n\nexport function CalendarGridBody({ className, ...props }: AriaCalendarGridBodyProps) {\n    return <AriaCalendarGridBody className={classNames('[&>tr>td]:p-0', className)} {...props} />;\n}\n\nexport function CalendarCell({ className, ...props }: AriaCalendarCellProps) {\n    const isRange = Boolean(use(AriaRangeCalendarStateContext));\n    return (\n        <AriaCalendarCell\n            className={composeRenderProps(className, (className, renderProps) =>\n                classNames(\n                    buttonVariants({ variant: 'ghost', size: 'none' }),\n                    'relative flex size-9 items-center justify-center p-0 body-sm font-normal',\n                    /* Disabled */\n                    renderProps.isDisabled && 'text-muted-foreground opacity-50',\n                    /* Selected */\n                    renderProps.isSelected &&\n                        'bg-primary text-primary-foreground data-[focused]:bg-primary  data-[focused]:text-primary-foreground',\n                    /* Hover */\n                    renderProps.isHovered &&\n                        renderProps.isSelected &&\n                        (renderProps.isSelectionStart || renderProps.isSelectionEnd || !isRange) &&\n                        'data-[hovered]:bg-primary data-[hovered]:text-primary-foreground',\n                    /* Selection Start/End */\n                    renderProps.isSelected &&\n                        isRange &&\n                        !renderProps.isSelectionStart &&\n                        !renderProps.isSelectionEnd &&\n                        'rounded-none bg-accent text-accent-foreground',\n                    /* Outside Month */\n                    renderProps.isOutsideMonth &&\n                        'text-muted-foreground opacity-50 data-[selected]:bg-accent/50 data-[selected]:text-muted-foreground data-[selected]:opacity-30',\n                    /* Current Date */\n                    renderProps.date.compare(today(getLocalTimeZone())) === 0 &&\n                        !renderProps.isSelected &&\n                        'bg-accent text-accent-foreground',\n                    /* Unavailable Date */\n                    renderProps.isUnavailable && 'cursor-default text-destructive ',\n                    renderProps.isInvalid &&\n                        'bg-destructive text-destructive-foreground data-[focused]:bg-destructive data-[hovered]:bg-destructive data-[focused]:text-destructive-foreground data-[hovered]:text-destructive-foreground',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\ninterface CalendarProps<T extends AriaDateValue> extends AriaCalendarProps<T> {\n    errorMessage?: string;\n}\n\nexport function Calendar<T extends AriaDateValue>({ errorMessage, className, ...props }: CalendarProps<T>) {\n    return (\n        <AriaCalendar className={composeRenderProps(className, className => classNames('w-fit', className))} {...props}>\n            <CalendarHeading />\n            <CalendarGrid>\n                <CalendarGridHeader>{day => <CalendarHeaderCell>{day}</CalendarHeaderCell>}</CalendarGridHeader>\n                <CalendarGridBody>{date => <CalendarCell date={date} />}</CalendarGridBody>\n            </CalendarGrid>\n            {errorMessage && <FieldError>{errorMessage}</FieldError>}\n        </AriaCalendar>\n    );\n}\n\ninterface RangeCalendarProps<T extends AriaDateValue> extends AriaRangeCalendarProps<T> {\n    errorMessage?: string;\n}\n\nexport function RangeCalendar<T extends AriaDateValue>({ errorMessage, className, ...props }: RangeCalendarProps<T>) {\n    return (\n        <AriaRangeCalendar\n            className={composeRenderProps(className, className => classNames('w-fit', className))}\n            {...props}\n        >\n            <CalendarHeading />\n            <CalendarGrid>\n                <CalendarGridHeader>{day => <CalendarHeaderCell>{day}</CalendarHeaderCell>}</CalendarGridHeader>\n                <CalendarGridBody>{date => <CalendarCell date={date} />}</CalendarGridBody>\n            </CalendarGrid>\n            {errorMessage && <FieldError slot=\"errorMessage\">{errorMessage}</FieldError>}\n        </AriaRangeCalendar>\n    );\n}\n"],"names":["CalendarHeading","props","direction","useLocale","jsxs","jsx","Button","classNames","IcRight","IcLeft","AriaHeading","CalendarGrid","className","AriaCalendarGrid","CalendarGridHeader","AriaCalendarGridHeader","CalendarHeaderCell","AriaCalendarHeaderCell","CalendarGridBody","AriaCalendarGridBody","CalendarCell","isRange","use","AriaRangeCalendarStateContext","AriaCalendarCell","composeRenderProps","renderProps","buttonVariants","today","getLocalTimeZone","Calendar","errorMessage","AriaCalendar","day","date","FieldError","RangeCalendar","AriaRangeCalendar"],"mappings":"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"}
+{"version":3,"file":"calendar.js","sources":["../../lib/components/calendar.tsx"],"sourcesContent":["import { getLocalTimeZone, today } from '@internationalized/date';\nimport {\n    Calendar as AriaCalendar,\n    CalendarCell as AriaCalendarCell,\n    CalendarCellProps as AriaCalendarCellProps,\n    CalendarGrid as AriaCalendarGrid,\n    CalendarGridBody as AriaCalendarGridBody,\n    CalendarGridBodyProps as AriaCalendarGridBodyProps,\n    CalendarGridHeader as AriaCalendarGridHeader,\n    CalendarGridProps as AriaCalendarGridProps,\n    CalendarHeaderCell as AriaCalendarHeaderCell,\n    CalendarHeaderCellProps as AriaCalendarHeaderCellProps,\n    CalendarProps as AriaCalendarProps,\n    DateValue as AriaDateValue,\n    Heading as AriaHeading,\n    RangeCalendar as AriaRangeCalendar,\n    RangeCalendarProps as AriaRangeCalendarProps,\n    RangeCalendarStateContext as AriaRangeCalendarStateContext,\n    composeRenderProps,\n    useLocale,\n} from 'react-aria-components';\n\nimport { use } from 'react';\nimport { Button, buttonVariants } from '../components/button';\nimport { FieldError } from '../components/field';\nimport { classNames } from '../utilities/theme';\nimport { IcLeft, IcRight } from './icons';\n\n/**\n * Calendar header with navigation buttons and month/year display.\n */\nexport function CalendarHeading(props: React.HTMLAttributes<HTMLElement>) {\n    let { direction } = useLocale();\n\n    return (\n        <header className=\"flex w-full items-center gap-1 px-1 pb-icon\" {...props}>\n            <Button\n                slot=\"previous\"\n                size=\"none\"\n                className={classNames(\n                    'size-7 bg-transparent p-0 opacity-50',\n                    /* Hover */\n                    'data-[hovered]:opacity-100'\n                )}\n            >\n                {direction === 'rtl' ? <IcRight aria-hidden /> : <IcLeft aria-hidden />}\n            </Button>\n            <AriaHeading className=\"grow text-center body font-medium\" />\n            <Button\n                slot=\"next\"\n                className={classNames(\n                    'size-7 bg-transparent p-0 opacity-50',\n                    /* Hover */\n                    'data-[hovered]:opacity-100'\n                )}\n            >\n                {direction === 'rtl' ? <IcLeft aria-hidden /> : <IcRight aria-hidden />}\n            </Button>\n        </header>\n    );\n}\n\n/**\n * Grid container for calendar cells with proper spacing.\n */\nexport function CalendarGrid({ className, ...props }: AriaCalendarGridProps) {\n    return (\n        <AriaCalendarGrid\n            className={classNames(' border-separate border-spacing-x-0 border-spacing-y-1 ', className)}\n            {...props}\n        />\n    );\n}\n\nexport const CalendarGridHeader = AriaCalendarGridHeader;\n\n/**\n * Header cell displaying day of week abbreviation.\n */\nexport function CalendarHeaderCell({ className, ...props }: AriaCalendarHeaderCellProps) {\n    return (\n        <AriaCalendarHeaderCell\n            className={classNames('w-9 body-sm font-normal text-muted-foreground', className)}\n            {...props}\n        />\n    );\n}\n\n/**\n * Body container for calendar date cells.\n */\nexport function CalendarGridBody({ className, ...props }: AriaCalendarGridBodyProps) {\n    return <AriaCalendarGridBody className={classNames('[&>tr>td]:p-0', className)} {...props} />;\n}\n\n/**\n * Individual calendar date cell with selection, hover, and availability states.\n * Automatically adapts styling for range selection contexts.\n */\nexport function CalendarCell({ className, ...props }: AriaCalendarCellProps) {\n    const isRange = Boolean(use(AriaRangeCalendarStateContext));\n    return (\n        <AriaCalendarCell\n            className={composeRenderProps(className, (className, renderProps) =>\n                classNames(\n                    buttonVariants({ variant: 'ghost', size: 'none' }),\n                    'relative flex size-9 items-center justify-center p-0 body-sm font-normal',\n                    /* Disabled */\n                    renderProps.isDisabled && 'text-muted-foreground opacity-50',\n                    /* Selected */\n                    renderProps.isSelected &&\n                        'bg-primary text-primary-foreground data-[focused]:bg-primary  data-[focused]:text-primary-foreground',\n                    /* Hover */\n                    renderProps.isHovered &&\n                        renderProps.isSelected &&\n                        (renderProps.isSelectionStart || renderProps.isSelectionEnd || !isRange) &&\n                        'data-[hovered]:bg-primary data-[hovered]:text-primary-foreground',\n                    /* Selection Start/End */\n                    renderProps.isSelected &&\n                        isRange &&\n                        !renderProps.isSelectionStart &&\n                        !renderProps.isSelectionEnd &&\n                        'rounded-none bg-accent text-accent-foreground',\n                    /* Outside Month */\n                    renderProps.isOutsideMonth &&\n                        'text-muted-foreground opacity-50 data-[selected]:bg-accent/50 data-[selected]:text-muted-foreground data-[selected]:opacity-30',\n                    /* Current Date */\n                    renderProps.date.compare(today(getLocalTimeZone())) === 0 &&\n                        !renderProps.isSelected &&\n                        'bg-accent text-accent-foreground',\n                    /* Unavailable Date */\n                    renderProps.isUnavailable && 'cursor-default text-destructive ',\n                    renderProps.isInvalid &&\n                        'bg-destructive text-destructive-foreground data-[focused]:bg-destructive data-[hovered]:bg-destructive data-[focused]:text-destructive-foreground data-[hovered]:text-destructive-foreground',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\ninterface CalendarProps<T extends AriaDateValue> extends AriaCalendarProps<T> {\n    /** Error message to display below the calendar */\n    errorMessage?: string;\n}\n\n/**\n * Calendar component for single date selection.\n *\n * @example Basic usage\n * ```tsx\n * <Calendar defaultValue={today(getLocalTimeZone())} />\n * ```\n */\nexport function Calendar<T extends AriaDateValue>({ errorMessage, className, ...props }: CalendarProps<T>) {\n    return (\n        <AriaCalendar className={composeRenderProps(className, className => classNames('w-fit', className))} {...props}>\n            <CalendarHeading />\n            <CalendarGrid>\n                <CalendarGridHeader>{day => <CalendarHeaderCell>{day}</CalendarHeaderCell>}</CalendarGridHeader>\n                <CalendarGridBody>{date => <CalendarCell date={date} />}</CalendarGridBody>\n            </CalendarGrid>\n            {errorMessage && <FieldError>{errorMessage}</FieldError>}\n        </AriaCalendar>\n    );\n}\n\ninterface RangeCalendarProps<T extends AriaDateValue> extends AriaRangeCalendarProps<T> {\n    /** Error message to display below the calendar */\n    errorMessage?: string;\n}\n\n/**\n * Calendar component for date range selection.\n *\n * @example Basic range selection\n * ```tsx\n * <RangeCalendar\n *   defaultValue={{\n *     start: today(getLocalTimeZone()),\n *     end: today(getLocalTimeZone()).add({ days: 7 })\n *   }}\n * />\n * ```\n */\nexport function RangeCalendar<T extends AriaDateValue>({ errorMessage, className, ...props }: RangeCalendarProps<T>) {\n    return (\n        <AriaRangeCalendar\n            className={composeRenderProps(className, className => classNames('w-fit', className))}\n            {...props}\n        >\n            <CalendarHeading />\n            <CalendarGrid>\n                <CalendarGridHeader>{day => <CalendarHeaderCell>{day}</CalendarHeaderCell>}</CalendarGridHeader>\n                <CalendarGridBody>{date => <CalendarCell date={date} />}</CalendarGridBody>\n            </CalendarGrid>\n            {errorMessage && <FieldError slot=\"errorMessage\">{errorMessage}</FieldError>}\n        </AriaRangeCalendar>\n    );\n}\n"],"names":["CalendarHeading","props","direction","useLocale","jsxs","jsx","Button","classNames","IcRight","IcLeft","AriaHeading","CalendarGrid","className","AriaCalendarGrid","CalendarGridHeader","AriaCalendarGridHeader","CalendarHeaderCell","AriaCalendarHeaderCell","CalendarGridBody","AriaCalendarGridBody","CalendarCell","isRange","use","AriaRangeCalendarStateContext","AriaCalendarCell","composeRenderProps","renderProps","buttonVariants","today","getLocalTimeZone","Calendar","errorMessage","AriaCalendar","day","date","FieldError","RangeCalendar","AriaRangeCalendar"],"mappings":"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"}

package/dist/components/checkbox.js

@@ -1,2 +1,2 @@
-import{jsx as e,Fragment as c}from"react/jsx-runtime";import{Checkbox as u,composeRenderProps as a,CheckboxGroup as m}from"react-aria-components";import{FormField as b,labelVariants as p}from"./field.js";import{useTfFieldContext as h}from"../utilities/form.js";import{classNames as d}from"../utilities/theme.js";import{IcMinus as x,IcCheck as g}from"./icons.js";import"class-variance-authority";import"react";import"../utilities/form-context.js";import"@tanstack/react-form";import"clsx";const j=m;function f({className:r,label:o,description:s,errorMessage:n,...l}){return e("div",{className:"group form-field",children:e(b,{label:o,description:s,errorMessage:n,children:e(u,{className:a(r,t=>d("group/checkbox cursor-pointer focus-ring flex items-center gap-x-2","disabled-muted",p,t)),...l,children:a(e(c,{}),(t,i)=>e(c,{children:e("div",{className:d("flex size-input shrink-0 items-center bg-popover justify-center border border-input text-current ring-offset-background","group-data-[indeterminate]/checkbox:bg-primary group-data-[selected]/checkbox:bg-primary group-data-[indeterminate]/checkbox:text-primary-foreground  group-data-[selected]/checkbox:text-primary-foreground","group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50","group-data-[invalid]/checkbox:border-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground","focus:outline-none focus-visible:outline-none"),children:i.isIndeterminate?e(x,{className:"size-icon"}):i.isSelected?e(g,{className:"size-icon"}):null})}))})})})}function B({...r}){const o=h({disabled:r.isDisabled});return e(f,{isSelected:o.state.value,isDisabled:o.form.state.isSubmitting||r.isDisabled,onChange:()=>o.handleChange(!o.state.value),onBlur:o.handleBlur,...r})}export{f as Checkbox,j as CheckboxGroup,B as TfCheckbox};
+import{jsx as e,Fragment as c}from"react/jsx-runtime";import{Checkbox as u,composeRenderProps as a,CheckboxGroup as m}from"react-aria-components";import{FormField as b,labelVariants as p}from"./field.js";import{useFieldContext as h}from"../utilities/form-context.js";import{classNames as d}from"../utilities/theme.js";import{IcMinus as x,IcCheck as g}from"./icons.js";import"class-variance-authority";import"@tanstack/react-form";import"react";import"clsx";const S=m;function f({className:r,label:o,description:s,errorMessage:n,...l}){return e("div",{className:"group form-field",children:e(b,{label:o,description:s,errorMessage:n,children:e(u,{className:a(r,t=>d("group/checkbox cursor-pointer focus-ring flex items-center gap-x-2","disabled-muted",p,t)),...l,children:a(e(c,{}),(t,i)=>e(c,{children:e("div",{className:d("flex size-input shrink-0 items-center bg-popover justify-center border border-input text-current ring-offset-background","group-data-[indeterminate]/checkbox:bg-primary group-data-[selected]/checkbox:bg-primary group-data-[indeterminate]/checkbox:text-primary-foreground  group-data-[selected]/checkbox:text-primary-foreground","group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50","group-data-[invalid]/checkbox:border-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground","focus:outline-none focus-visible:outline-none"),children:i.isIndeterminate?e(x,{className:"size-icon"}):i.isSelected?e(g,{className:"size-icon"}):null})}))})})})}function j({...r}){const o=h({disabled:r.isDisabled});return e(f,{isSelected:o.state.value,isDisabled:o.form.state.isSubmitting||r.isDisabled,onChange:()=>o.handleChange(!o.state.value),onBlur:o.handleBlur,...r})}export{f as Checkbox,S as CheckboxGroup,j as TfCheckbox};
 //# sourceMappingURL=checkbox.js.map

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sources":["../../lib/components/checkbox.tsx"],"sourcesContent":["import {\n    Checkbox as AriaCheckbox,\n    CheckboxGroup as AriaCheckboxGroup,\n    composeRenderProps,\n    type CheckboxProps as AriaCheckboxProps,\n} from 'react-aria-components';\n\nimport { FormField, labelVariants, type FormFieldProps } from '../components/field';\nimport { useTfFieldContext } from '../utilities/form';\nimport { classNames } from '../utilities/theme';\nimport { IcCheck, IcMinus } from './icons';\n\nexport const CheckboxGroup = AriaCheckboxGroup;\ntype CheckboxProps = AriaCheckboxProps & FormFieldProps;\nexport function Checkbox({ className, label, description, errorMessage, ...props }: Omit<CheckboxProps, 'children'>) {\n    return (\n        <div className=\"group form-field\">\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <AriaCheckbox\n                    className={composeRenderProps(className, className =>\n                        classNames(\n                            'group/checkbox cursor-pointer focus-ring flex items-center gap-x-2',\n                            /* Disabled */\n                            'disabled-muted',\n                            labelVariants,\n                            className\n                        )\n                    )}\n                    {...props}\n                >\n                    {composeRenderProps(<></>, (_, renderProps) => (\n                        <>\n                            <div\n                                className={classNames(\n                                    'flex size-input shrink-0 items-center bg-popover justify-center border border-input text-current ring-offset-background',\n                                    /* Selected */\n                                    'group-data-[indeterminate]/checkbox:bg-primary group-data-[selected]/checkbox:bg-primary group-data-[indeterminate]/checkbox:text-primary-foreground  group-data-[selected]/checkbox:text-primary-foreground',\n                                    /* Disabled */\n                                    'group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50',\n                                    /* Invalid */\n                                    'group-data-[invalid]/checkbox:border-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground',\n                                    /* Resets */\n                                    'focus:outline-none focus-visible:outline-none'\n                                )}\n                            >\n                                {renderProps.isIndeterminate ? (\n                                    <IcMinus className=\"size-icon\" />\n                                ) : renderProps.isSelected ? (\n                                    <IcCheck className=\"size-icon\" />\n                                ) : null}\n                            </div>\n                        </>\n                    ))}\n                </AriaCheckbox>\n            </FormField>\n        </div>\n    );\n}\n\nexport type TfCheckboxProps = Omit<React.ComponentProps<typeof Checkbox>, 'onChange' | 'onBlur' | 'isChecked'>;\nexport function TfCheckbox({ ...props }: TfCheckboxProps) {\n    const field = useTfFieldContext<boolean>({ disabled: props.isDisabled });\n    return (\n        <Checkbox\n            isSelected={field.state.value}\n            isDisabled={field.form.state.isSubmitting || props.isDisabled}\n            onChange={() => field.handleChange(!field.state.value)}\n            onBlur={field.handleBlur}\n            {...props}\n        />\n    );\n}\n"],"names":["CheckboxGroup","AriaCheckboxGroup","Checkbox","className","label","description","errorMessage","props","jsx","FormField","AriaCheckbox","composeRenderProps","classNames","labelVariants","Fragment","_","renderProps","IcMinus","IcCheck","TfCheckbox","field","useTfFieldContext"],"mappings":"weAYO,MAAMA,EAAgBC,EAEtB,SAASC,EAAS,CAAE,UAAAC,EAAW,MAAAC,EAAO,YAAAC,EAAa,aAAAC,EAAc,GAAGC,GAA0C,CACjH,OACIC,EAAC,OAAI,UAAU,mBACX,WAACC,EAAA,CAAU,MAAAL,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAE,EAACE,EAAA,CACG,UAAWC,EAAmBR,EAAWA,GACrCS,EACI,qEAEA,iBACAC,EACAV,CAAA,CACJ,EAEH,GAAGI,EAEH,WAAmBC,EAAAM,EAAA,CAAA,CAAE,EAAK,CAACC,EAAGC,IAC3BR,EAAAM,EAAA,CACI,SAAAN,EAAC,MAAA,CACG,UAAWI,EACP,0HAEA,+MAEA,8FAEA,wNAEA,+CAAA,EAGH,SAAAI,EAAY,gBACTR,EAACS,EAAA,CAAQ,UAAU,WAAA,CAAY,EAC/BD,EAAY,WACZR,EAACU,EAAA,CAAQ,UAAU,YAAY,EAC/B,IAAA,CAAA,EAEZ,CACH,CAAA,CAAA,EAET,CAAA,CACJ,CAER,CAGO,SAASC,EAAW,CAAE,GAAGZ,GAA0B,CACtD,MAAMa,EAAQC,EAA2B,CAAE,SAAUd,EAAM,WAAY,EACvE,OACIC,EAACN,EAAA,CACG,WAAYkB,EAAM,MAAM,MACxB,WAAYA,EAAM,KAAK,MAAM,cAAgBb,EAAM,WACnD,SAAU,IAAMa,EAAM,aAAa,CAACA,EAAM,MAAM,KAAK,EACrD,OAAQA,EAAM,WACb,GAAGb,CAAA,CAAA,CAGhB"}
+{"version":3,"file":"checkbox.js","sources":["../../lib/components/checkbox.tsx"],"sourcesContent":["import {\n    Checkbox as AriaCheckbox,\n    CheckboxGroup as AriaCheckboxGroup,\n    composeRenderProps,\n    type CheckboxProps as AriaCheckboxProps,\n} from 'react-aria-components';\n\nimport { FormField, labelVariants, type FormFieldProps } from '../components/field';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { IcCheck, IcMinus } from './icons';\n\nexport const CheckboxGroup = AriaCheckboxGroup;\ntype CheckboxProps = AriaCheckboxProps & FormFieldProps;\nexport function Checkbox({ className, label, description, errorMessage, ...props }: Omit<CheckboxProps, 'children'>) {\n    return (\n        <div className=\"group form-field\">\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <AriaCheckbox\n                    className={composeRenderProps(className, className =>\n                        classNames(\n                            'group/checkbox cursor-pointer focus-ring flex items-center gap-x-2',\n                            /* Disabled */\n                            'disabled-muted',\n                            labelVariants,\n                            className\n                        )\n                    )}\n                    {...props}\n                >\n                    {composeRenderProps(<></>, (_, renderProps) => (\n                        <>\n                            <div\n                                className={classNames(\n                                    'flex size-input shrink-0 items-center bg-popover justify-center border border-input text-current ring-offset-background',\n                                    /* Selected */\n                                    'group-data-[indeterminate]/checkbox:bg-primary group-data-[selected]/checkbox:bg-primary group-data-[indeterminate]/checkbox:text-primary-foreground  group-data-[selected]/checkbox:text-primary-foreground',\n                                    /* Disabled */\n                                    'group-data-[disabled]/checkbox:cursor-not-allowed group-data-[disabled]/checkbox:opacity-50',\n                                    /* Invalid */\n                                    'group-data-[invalid]/checkbox:border-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:bg-destructive group-data-[invalid]/checkbox:group-data-[selected]/checkbox:text-destructive-foreground',\n                                    /* Resets */\n                                    'focus:outline-none focus-visible:outline-none'\n                                )}\n                            >\n                                {renderProps.isIndeterminate ? (\n                                    <IcMinus className=\"size-icon\" />\n                                ) : renderProps.isSelected ? (\n                                    <IcCheck className=\"size-icon\" />\n                                ) : null}\n                            </div>\n                        </>\n                    ))}\n                </AriaCheckbox>\n            </FormField>\n        </div>\n    );\n}\n\nexport type TfCheckboxProps = Omit<React.ComponentProps<typeof Checkbox>, 'onChange' | 'onBlur' | 'isChecked'>;\nexport function TfCheckbox({ ...props }: TfCheckboxProps) {\n    const field = useFieldContext<boolean>({ disabled: props.isDisabled });\n    return (\n        <Checkbox\n            isSelected={field.state.value}\n            isDisabled={field.form.state.isSubmitting || props.isDisabled}\n            onChange={() => field.handleChange(!field.state.value)}\n            onBlur={field.handleBlur}\n            {...props}\n        />\n    );\n}\n"],"names":["CheckboxGroup","AriaCheckboxGroup","Checkbox","className","label","description","errorMessage","props","jsx","FormField","AriaCheckbox","composeRenderProps","classNames","labelVariants","Fragment","_","renderProps","IcMinus","IcCheck","TfCheckbox","field","useFieldContext"],"mappings":"ycAYO,MAAMA,EAAgBC,EAEtB,SAASC,EAAS,CAAE,UAAAC,EAAW,MAAAC,EAAO,YAAAC,EAAa,aAAAC,EAAc,GAAGC,GAA0C,CACjH,OACIC,EAAC,OAAI,UAAU,mBACX,WAACC,EAAA,CAAU,MAAAL,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAE,EAACE,EAAA,CACG,UAAWC,EAAmBR,EAAWA,GACrCS,EACI,qEAEA,iBACAC,EACAV,CAAA,CACJ,EAEH,GAAGI,EAEH,WAAmBC,EAAAM,EAAA,CAAA,CAAE,EAAK,CAACC,EAAGC,IAC3BR,EAAAM,EAAA,CACI,SAAAN,EAAC,MAAA,CACG,UAAWI,EACP,0HAEA,+MAEA,8FAEA,wNAEA,+CAAA,EAGH,SAAAI,EAAY,gBACTR,EAACS,EAAA,CAAQ,UAAU,WAAA,CAAY,EAC/BD,EAAY,WACZR,EAACU,EAAA,CAAQ,UAAU,YAAY,EAC/B,IAAA,CAAA,EAEZ,CACH,CAAA,CAAA,EAET,CAAA,CACJ,CAER,CAGO,SAASC,EAAW,CAAE,GAAGZ,GAA0B,CACtD,MAAMa,EAAQC,EAAyB,CAAE,SAAUd,EAAM,WAAY,EACrE,OACIC,EAACN,EAAA,CACG,WAAYkB,EAAM,MAAM,MACxB,WAAYA,EAAM,KAAK,MAAM,cAAgBb,EAAM,WACnD,SAAU,IAAMa,EAAM,aAAa,CAACA,EAAM,MAAM,KAAK,EACrD,OAAQA,EAAM,WACb,GAAGb,CAAA,CAAA,CAGhB"}

package/dist/components/data-table-filter.js

@@ -1,2 +1,2 @@
-import"react/jsx-runtime";import"react";import"./button.js";import{C as z,D as G,F as H}from"./data-table.js";import"./date-picker.js";import"./menu.js";import"./popover.js";import"../utilities/form-hook.js";import"../utilities/resources.js";import"../utilities/theme.js";import"./icons.js";import"./id-search.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";import"@dnd-kit/core";import"@dnd-kit/sortable";import"@dnd-kit/utilities";import"@tanstack/react-query";import"@tanstack/react-table";import"@uidotdev/usehooks";import"lodash-es";import"./searchfield.js";import"./field.js";import"./table.js";import"../utilities/date.js";import"./checkbox.js";import"../utilities/form.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"@internationalized/date";import"./calendar.js";import"./datefield.js";import"./list-box.js";import"./select.js";import"./multi-select.js";import"./numberfield.js";import"./textfield.js";import"../utilities/string.js";export{z as COMPARISON_OPERATOR_LABELS,G as DataTableFilter,H as FILTER_COMPARISON_OPERATORS};
+import"react/jsx-runtime";import"react";import"./button.js";import{C as z,D as G,F as H}from"./data-table.js";import"./date-picker.js";import"./menu.js";import"./popover.js";import"../utilities/form-hook.js";import"../utilities/resources.js";import"../utilities/theme.js";import"./icons.js";import"./id-search.js";import"class-variance-authority";import"react-aria-components";import"./loader.js";import"clsx";import"@dnd-kit/core";import"@dnd-kit/sortable";import"@dnd-kit/utilities";import"@tanstack/react-query";import"@tanstack/react-table";import"@uidotdev/usehooks";import"lodash-es";import"./searchfield.js";import"./field.js";import"./table.js";import"../utilities/date.js";import"./checkbox.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"@internationalized/date";import"./calendar.js";import"./datefield.js";import"../utilities/form.js";import"./list-box.js";import"./select.js";import"./multi-select.js";import"./numberfield.js";import"./textfield.js";import"../utilities/string.js";export{z as COMPARISON_OPERATOR_LABELS,G as DataTableFilter,H as FILTER_COMPARISON_OPERATORS};
 //# sourceMappingURL=data-table-filter.js.map

package/dist/components/date-picker.d.ts

@@ -3,9 +3,49 @@ import { ZonedDateTime } from '@internationalized/date';
 import { FormFieldProps } from '../components/field';
 interface DatePickerProps<T extends AriaDateValue> extends AriaDatePickerProps<T>, FormFieldProps {
 }
+/**
+ * Date picker component for selecting single dates.
+ *
+ * @remarks
+ * Built with React Aria for accessibility and internationalization support.
+ * Supports date validation, min/max values, and custom date formatting.
+ *
+ * @example
+ * ```tsx
+ * <DatePicker
+ *   label="Event Date"
+ *   isRequired
+ *   minValue={today(getLocalTimeZone())}
+ * />
+ * ```
+ */
 export declare function DatePicker<T extends AriaDateValue>({ label, description, errorMessage, className, ...props }: DatePickerProps<T>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Form-integrated date picker that works with TanStack Form.
+ *
+ * @remarks
+ * Automatically handles form state, validation, and error messages.
+ * Uses the field context to connect with the form's validation system.
+ */
 export declare function TfDatePicker({ ...props }: Omit<DatePickerProps<ZonedDateTime>, 'value' | 'onChange' | 'onBlur' | 'isInvalid' | 'errorMessage'>): import("react/jsx-runtime").JSX.Element;
 interface DateRangePickerProps<T extends AriaDateValue> extends AriaDateRangePickerProps<T>, FormFieldProps {
 }
+/**
+ * Date range picker component for selecting start and end dates.
+ *
+ * @remarks
+ * Allows users to select a date range with start and end values.
+ * Built with React Aria for accessibility and internationalization support.
+ * Features separate input fields for start and end dates with range validation.
+ *
+ * @example
+ * ```tsx
+ * <DateRangePicker
+ *   label="Booking Period"
+ *   description="Select your stay dates"
+ *   isRequired
+ * />
+ * ```
+ */
 export declare function DateRangePicker<T extends AriaDateValue>({ label, description, errorMessage, className, ...props }: DateRangePickerProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/date-picker.js

@@ -1,2 +1,2 @@
-import{jsxs as i,jsx as e}from"react/jsx-runtime";import{DatePicker as x,composeRenderProps as c,DateRangePicker as v,Popover as D,Dialog as N}from"react-aria-components";import{parseAbsolute as P,getLocalTimeZone as k}from"@internationalized/date";import{Button as p}from"./button.js";import{Calendar as C,RangeCalendar as b}from"./calendar.js";import{DateInput as m}from"./datefield.js";import{FormField as u,FieldGroup as f}from"./field.js";import{getFieldErrorMessage as d}from"../utilities/form.js";import{useFieldContext as F}from"../utilities/form-context.js";import{classNames as n}from"../utilities/theme.js";import{IcDate as g}from"./icons.js";import"class-variance-authority";import"./loader.js";import"react";import"@tanstack/react-form";import"clsx";const h=({className:a,popoverClassName:r,...o})=>e(D,{className:c(r,t=>n("w-auto p-3 bg-popover border",t)),children:e(N,{className:n("flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0",a),...o})});function R({label:a,description:r,errorMessage:o,className:t,...l}){return i(x,{className:c(t,s=>n("group flex flex-col gap-2",s)),...l,children:[e(u,{label:a,description:r,errorMessage:o,children:i(f,{"aria-label":a,children:[e(m,{className:"flex-1",variant:"ghost"}),e(p,{variant:"ghost",size:"icon",className:"-me-2 ms-2",children:e(g,{"aria-hidden":!0})})]})}),e(h,{children:e(C,{})})]})}function H({...a}){const r=F();return e(R,{hideTimeZone:!0,value:r.state.value?P(r.state.value,k()):null,onChange:o=>o?r.handleChange(o.toAbsoluteString()):r.handleChange(null),onBlur:r.handleBlur,isInvalid:!!d(r),errorMessage:d(r),...a})}function J({label:a,description:r,errorMessage:o,className:t,...l}){return i(v,{className:c(t,s=>n("group flex flex-col gap-2",s)),...l,children:[e(u,{label:a,errorMessage:o,description:r,children:i(f,{children:[e(m,{variant:"ghost",slot:"start"}),e("span",{"aria-hidden":!0,className:"px-2 body-sm text-muted-foreground",children:"-"}),e(m,{className:"flex-1",variant:"ghost",slot:"end"}),e(p,{variant:"ghost",size:"icon",className:"mr-1 data-[focus-visible]:ring-offset-0",children:e(g,{"aria-hidden":!0})})]})}),e(h,{children:e(b,{})})]})}export{R as DatePicker,J as DateRangePicker,H as TfDatePicker};
+import{jsxs as o,jsx as e}from"react/jsx-runtime";import{DatePicker as x,composeRenderProps as c,DateRangePicker as D,Popover as b,Dialog as v}from"react-aria-components";import{parseAbsolute as N,getLocalTimeZone as P}from"@internationalized/date";import{Button as u}from"./button.js";import{Calendar as k,RangeCalendar as C}from"./calendar.js";import{DateInput as m}from"./datefield.js";import{FormField as f,FieldGroup as p}from"./field.js";import{getFieldErrorMessage as d}from"../utilities/form.js";import{useFieldContext as F}from"../utilities/form-context.js";import{classNames as l}from"../utilities/theme.js";import{IcDate as g}from"./icons.js";import"class-variance-authority";import"./loader.js";import"react";import"@tanstack/react-form";import"clsx";const h=({className:a,popoverClassName:r,...i})=>e(b,{className:c(r,t=>l("w-auto p-3 bg-popover border",t)),children:e(v,{className:l("flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0",a),...i})});function R({label:a,description:r,errorMessage:i,className:t,...n}){return o(x,{className:c(t,s=>l("group flex flex-col gap-2",s)),...n,children:[e(f,{label:a,description:r,errorMessage:i,children:o(p,{"aria-label":a,children:[e(m,{className:"flex-1",variant:"ghost"}),e(u,{variant:"ghost",size:"icon",className:"-me-2 ms-2",children:e(g,{"aria-hidden":!0})})]})}),e(h,{children:e(k,{})})]})}function H({...a}){const r=F({disabled:a.isDisabled});return e(R,{hideTimeZone:!0,isDisabled:a.isDisabled||r.form.state.isSubmitting,value:r.state.value?N(r.state.value,P()):null,onChange:i=>i?r.handleChange(i.toAbsoluteString()):r.handleChange(null),onBlur:r.handleBlur,isInvalid:!!d(r),errorMessage:d(r),...a})}function J({label:a,description:r,errorMessage:i,className:t,...n}){return o(D,{className:c(t,s=>l("group flex flex-col gap-2",s)),...n,children:[e(f,{label:a,errorMessage:i,description:r,children:o(p,{children:[e(m,{variant:"ghost",slot:"start"}),e("span",{"aria-hidden":!0,className:"px-2 body-sm text-muted-foreground",children:"-"}),e(m,{className:"flex-1",variant:"ghost",slot:"end"}),e(u,{variant:"ghost",size:"icon",className:"mr-1 data-[focus-visible]:ring-offset-0",children:e(g,{"aria-hidden":!0})})]})}),e(h,{children:e(C,{})})]})}export{R as DatePicker,J as DateRangePicker,H as TfDatePicker};
 //# sourceMappingURL=date-picker.js.map

package/dist/components/date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","sources":["../../lib/components/date-picker.tsx"],"sourcesContent":["import {\n    DatePicker as AriaDatePicker,\n    DatePickerProps as AriaDatePickerProps,\n    DateRangePicker as AriaDateRangePicker,\n    DateRangePickerProps as AriaDateRangePickerProps,\n    DateValue as AriaDateValue,\n    Dialog as AriaDialog,\n    DialogProps as AriaDialogProps,\n    PopoverProps as AriaPopoverProps,\n    composeRenderProps,\n    Popover,\n} from 'react-aria-components';\n\nimport { getLocalTimeZone, parseAbsolute, type ZonedDateTime } from '@internationalized/date';\nimport { Button } from '../components/button';\nimport { Calendar, RangeCalendar } from '../components/calendar';\nimport { DateInput } from '../components/datefield';\nimport { FieldGroup, FormField, type FormFieldProps } from '../components/field';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { IcDate } from './icons';\n\nconst DatePickerContent = ({\n    className,\n    popoverClassName,\n    ...props\n}: AriaDialogProps & { popoverClassName?: AriaPopoverProps['className'] }) => (\n    <Popover\n        className={composeRenderProps(popoverClassName, className =>\n            classNames('w-auto p-3 bg-popover border', className)\n        )}\n    >\n        <AriaDialog\n            className={classNames(\n                'flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0',\n                className\n            )}\n            {...props}\n        />\n    </Popover>\n);\n\ninterface DatePickerProps<T extends AriaDateValue> extends AriaDatePickerProps<T>, FormFieldProps {}\n\nexport function DatePicker<T extends AriaDateValue>({\n    label,\n    description,\n    errorMessage,\n    className,\n    ...props\n}: DatePickerProps<T>) {\n    return (\n        <AriaDatePicker\n            className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <FieldGroup aria-label={label}>\n                    <DateInput className=\"flex-1\" variant=\"ghost\" />\n                    <Button variant=\"ghost\" size=\"icon\" className={'-me-2 ms-2'}>\n                        <IcDate aria-hidden />\n                    </Button>\n                </FieldGroup>\n            </FormField>\n            <DatePickerContent>\n                <Calendar />\n            </DatePickerContent>\n        </AriaDatePicker>\n    );\n}\n\nexport function TfDatePicker({\n    ...props\n}: Omit<DatePickerProps<ZonedDateTime>, 'value' | 'onChange' | 'onBlur' | 'isInvalid' | 'errorMessage'>) {\n    const field = useFieldContext<string | null>();\n    return (\n        <DatePicker\n            hideTimeZone\n            value={field.state.value ? parseAbsolute(field.state.value, getLocalTimeZone()) : null}\n            onChange={v => (v ? field.handleChange(v.toAbsoluteString()) : field.handleChange(null))}\n            onBlur={field.handleBlur}\n            isInvalid={!!getFieldErrorMessage(field)}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n\ninterface DateRangePickerProps<T extends AriaDateValue> extends AriaDateRangePickerProps<T>, FormFieldProps {}\nexport function DateRangePicker<T extends AriaDateValue>({\n    label,\n    description,\n    errorMessage,\n    className,\n    ...props\n}: DateRangePickerProps<T>) {\n    return (\n        <AriaDateRangePicker\n            className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n            {...props}\n        >\n            <FormField label={label} errorMessage={errorMessage} description={description}>\n                <FieldGroup>\n                    <DateInput variant=\"ghost\" slot={'start'} />\n                    <span aria-hidden className=\"px-2 body-sm text-muted-foreground\">\n                        -\n                    </span>\n                    <DateInput className=\"flex-1\" variant=\"ghost\" slot={'end'} />\n                    <Button variant=\"ghost\" size=\"icon\" className=\"mr-1 data-[focus-visible]:ring-offset-0\">\n                        <IcDate aria-hidden />\n                    </Button>\n                </FieldGroup>\n            </FormField>\n            <DatePickerContent>\n                <RangeCalendar />\n            </DatePickerContent>\n        </AriaDateRangePicker>\n    );\n}\n"],"names":["DatePickerContent","className","popoverClassName","props","jsx","Popover","composeRenderProps","classNames","AriaDialog","DatePicker","label","description","errorMessage","jsxs","AriaDatePicker","FormField","FieldGroup","DateInput","Button","IcDate","Calendar","TfDatePicker","field","useFieldContext","parseAbsolute","getLocalTimeZone","v","getFieldErrorMessage","DateRangePicker","AriaDateRangePicker","RangeCalendar"],"mappings":"2vBAuBA,MAAMA,EAAoB,CAAC,CACvB,UAAAC,EACA,iBAAAC,EACA,GAAGC,CACP,IACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAkBD,GAC5CM,EAAW,+BAAgCN,CAAS,CAAA,EAGxD,SAAAG,EAACI,EAAA,CACG,UAAWD,EACP,iFACAN,CAAA,EAEH,GAAGE,CAAA,CAAA,CACR,CACJ,EAKG,SAASM,EAAoC,CAChD,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,UAAAX,EACA,GAAGE,CACP,EAAuB,CACnB,OACIU,EAACC,EAAA,CACG,UAAWR,EAAmBL,EAAWA,GAAaM,EAAW,4BAA6BN,CAAS,CAAC,EACvG,GAAGE,EAEJ,SAAA,CAAAC,EAACW,GAAU,MAAAL,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAC,EAACG,EAAA,CAAW,aAAYN,EACpB,SAAA,CAAAN,EAACa,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,EAC9Cb,EAACc,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAW,aAC3C,SAAAd,EAACe,EAAA,CAAO,cAAW,EAAA,CAAC,CAAA,CACxB,CAAA,CAAA,CACJ,CAAA,CACJ,EACAf,EAACJ,EAAA,CACG,SAAAI,EAACgB,EAAA,CAAA,CAAS,CAAA,CACd,CAAA,CAAA,CAAA,CAGZ,CAEO,SAASC,EAAa,CACzB,GAAGlB,CACP,EAAyG,CACrG,MAAMmB,EAAQC,EAAA,EACd,OACInB,EAACK,EAAA,CACG,aAAY,GACZ,MAAOa,EAAM,MAAM,MAAQE,EAAcF,EAAM,MAAM,MAAOG,EAAA,CAAkB,EAAI,KAClF,SAAUC,GAAMA,EAAIJ,EAAM,aAAaI,EAAE,kBAAkB,EAAIJ,EAAM,aAAa,IAAI,EACtF,OAAQA,EAAM,WACd,UAAW,CAAC,CAACK,EAAqBL,CAAK,EACvC,aAAcK,EAAqBL,CAAK,EACvC,GAAGnB,CAAA,CAAA,CAGhB,CAGO,SAASyB,EAAyC,CACrD,MAAAlB,EACA,YAAAC,EACA,aAAAC,EACA,UAAAX,EACA,GAAGE,CACP,EAA4B,CACxB,OACIU,EAACgB,EAAA,CACG,UAAWvB,EAAmBL,EAAWA,GAAaM,EAAW,4BAA6BN,CAAS,CAAC,EACvG,GAAGE,EAEJ,SAAA,CAAAC,EAACW,EAAA,CAAU,MAAAL,EAAc,aAAAE,EAA4B,YAAAD,EACjD,WAACK,EAAA,CACG,SAAA,CAAAZ,EAACa,EAAA,CAAU,QAAQ,QAAQ,KAAM,QAAS,IACzC,OAAA,CAAK,cAAW,GAAC,UAAU,qCAAqC,SAAA,IAEjE,IACCA,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,KAAM,MAAO,EAC3Db,EAACc,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAU,0CAC1C,SAAAd,EAACe,EAAA,CAAO,cAAW,EAAA,CAAC,CAAA,CACxB,CAAA,CAAA,CACJ,CAAA,CACJ,EACAf,EAACJ,EAAA,CACG,SAAAI,EAAC0B,EAAA,CAAA,CAAc,CAAA,CACnB,CAAA,CAAA,CAAA,CAGZ"}
+{"version":3,"file":"date-picker.js","sources":["../../lib/components/date-picker.tsx"],"sourcesContent":["import {\n    DatePicker as AriaDatePicker,\n    DatePickerProps as AriaDatePickerProps,\n    DateRangePicker as AriaDateRangePicker,\n    DateRangePickerProps as AriaDateRangePickerProps,\n    DateValue as AriaDateValue,\n    Dialog as AriaDialog,\n    DialogProps as AriaDialogProps,\n    PopoverProps as AriaPopoverProps,\n    composeRenderProps,\n    Popover,\n} from 'react-aria-components';\n\nimport { getLocalTimeZone, parseAbsolute, type ZonedDateTime } from '@internationalized/date';\nimport { Button } from '../components/button';\nimport { Calendar, RangeCalendar } from '../components/calendar';\nimport { DateInput } from '../components/datefield';\nimport { FieldGroup, FormField, type FormFieldProps } from '../components/field';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { IcDate } from './icons';\n\n/**\n * Popover container for date picker content.\n *\n * @remarks\n * Provides consistent styling and positioning for the calendar popup.\n */\nconst DatePickerContent = ({\n    className,\n    popoverClassName,\n    ...props\n}: AriaDialogProps & { popoverClassName?: AriaPopoverProps['className'] }) => (\n    <Popover\n        className={composeRenderProps(popoverClassName, className =>\n            classNames('w-auto p-3 bg-popover border', className)\n        )}\n    >\n        <AriaDialog\n            className={classNames(\n                'flex w-full flex-col gap-y-2 outline-none sm:flex-row sm:gap-x-icon sm:gap-y-0',\n                className\n            )}\n            {...props}\n        />\n    </Popover>\n);\n\ninterface DatePickerProps<T extends AriaDateValue> extends AriaDatePickerProps<T>, FormFieldProps {}\n\n/**\n * Date picker component for selecting single dates.\n *\n * @remarks\n * Built with React Aria for accessibility and internationalization support.\n * Supports date validation, min/max values, and custom date formatting.\n *\n * @example\n * ```tsx\n * <DatePicker\n *   label=\"Event Date\"\n *   isRequired\n *   minValue={today(getLocalTimeZone())}\n * />\n * ```\n */\nexport function DatePicker<T extends AriaDateValue>({\n    label,\n    description,\n    errorMessage,\n    className,\n    ...props\n}: DatePickerProps<T>) {\n    return (\n        <AriaDatePicker\n            className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <FieldGroup aria-label={label}>\n                    <DateInput className=\"flex-1\" variant=\"ghost\" />\n                    <Button variant=\"ghost\" size=\"icon\" className={'-me-2 ms-2'}>\n                        <IcDate aria-hidden />\n                    </Button>\n                </FieldGroup>\n            </FormField>\n            <DatePickerContent>\n                <Calendar />\n            </DatePickerContent>\n        </AriaDatePicker>\n    );\n}\n\n/**\n * Form-integrated date picker that works with TanStack Form.\n *\n * @remarks\n * Automatically handles form state, validation, and error messages.\n * Uses the field context to connect with the form's validation system.\n */\nexport function TfDatePicker({\n    ...props\n}: Omit<DatePickerProps<ZonedDateTime>, 'value' | 'onChange' | 'onBlur' | 'isInvalid' | 'errorMessage'>) {\n    const field = useFieldContext<string | null>({ disabled: props.isDisabled });\n    return (\n        <DatePicker\n            hideTimeZone\n            isDisabled={props.isDisabled || field.form.state.isSubmitting}\n            value={field.state.value ? parseAbsolute(field.state.value, getLocalTimeZone()) : null}\n            onChange={v => (v ? field.handleChange(v.toAbsoluteString()) : field.handleChange(null))}\n            onBlur={field.handleBlur}\n            isInvalid={!!getFieldErrorMessage(field)}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n\ninterface DateRangePickerProps<T extends AriaDateValue> extends AriaDateRangePickerProps<T>, FormFieldProps {}\n\n/**\n * Date range picker component for selecting start and end dates.\n *\n * @remarks\n * Allows users to select a date range with start and end values.\n * Built with React Aria for accessibility and internationalization support.\n * Features separate input fields for start and end dates with range validation.\n *\n * @example\n * ```tsx\n * <DateRangePicker\n *   label=\"Booking Period\"\n *   description=\"Select your stay dates\"\n *   isRequired\n * />\n * ```\n */\nexport function DateRangePicker<T extends AriaDateValue>({\n    label,\n    description,\n    errorMessage,\n    className,\n    ...props\n}: DateRangePickerProps<T>) {\n    return (\n        <AriaDateRangePicker\n            className={composeRenderProps(className, className => classNames('group flex flex-col gap-2', className))}\n            {...props}\n        >\n            <FormField label={label} errorMessage={errorMessage} description={description}>\n                <FieldGroup>\n                    <DateInput variant=\"ghost\" slot={'start'} />\n                    <span aria-hidden className=\"px-2 body-sm text-muted-foreground\">\n                        -\n                    </span>\n                    <DateInput className=\"flex-1\" variant=\"ghost\" slot={'end'} />\n                    <Button variant=\"ghost\" size=\"icon\" className=\"mr-1 data-[focus-visible]:ring-offset-0\">\n                        <IcDate aria-hidden />\n                    </Button>\n                </FieldGroup>\n            </FormField>\n            <DatePickerContent>\n                <RangeCalendar />\n            </DatePickerContent>\n        </AriaDateRangePicker>\n    );\n}\n"],"names":["DatePickerContent","className","popoverClassName","props","jsx","Popover","composeRenderProps","classNames","AriaDialog","DatePicker","label","description","errorMessage","jsxs","AriaDatePicker","FormField","FieldGroup","DateInput","Button","IcDate","Calendar","TfDatePicker","field","useFieldContext","parseAbsolute","getLocalTimeZone","v","getFieldErrorMessage","DateRangePicker","AriaDateRangePicker","RangeCalendar"],"mappings":"2vBA6BA,MAAMA,EAAoB,CAAC,CACvB,UAAAC,EACA,iBAAAC,EACA,GAAGC,CACP,IACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAkBD,GAC5CM,EAAW,+BAAgCN,CAAS,CAAA,EAGxD,SAAAG,EAACI,EAAA,CACG,UAAWD,EACP,iFACAN,CAAA,EAEH,GAAGE,CAAA,CAAA,CACR,CACJ,EAqBG,SAASM,EAAoC,CAChD,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,UAAAX,EACA,GAAGE,CACP,EAAuB,CACnB,OACIU,EAACC,EAAA,CACG,UAAWR,EAAmBL,EAAWA,GAAaM,EAAW,4BAA6BN,CAAS,CAAC,EACvG,GAAGE,EAEJ,SAAA,CAAAC,EAACW,GAAU,MAAAL,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAC,EAACG,EAAA,CAAW,aAAYN,EACpB,SAAA,CAAAN,EAACa,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,EAC9Cb,EAACc,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAW,aAC3C,SAAAd,EAACe,EAAA,CAAO,cAAW,EAAA,CAAC,CAAA,CACxB,CAAA,CAAA,CACJ,CAAA,CACJ,EACAf,EAACJ,EAAA,CACG,SAAAI,EAACgB,EAAA,CAAA,CAAS,CAAA,CACd,CAAA,CAAA,CAAA,CAGZ,CASO,SAASC,EAAa,CACzB,GAAGlB,CACP,EAAyG,CACrG,MAAMmB,EAAQC,EAA+B,CAAE,SAAUpB,EAAM,WAAY,EAC3E,OACIC,EAACK,EAAA,CACG,aAAY,GACZ,WAAYN,EAAM,YAAcmB,EAAM,KAAK,MAAM,aACjD,MAAOA,EAAM,MAAM,MAAQE,EAAcF,EAAM,MAAM,MAAOG,EAAA,CAAkB,EAAI,KAClF,SAAUC,GAAMA,EAAIJ,EAAM,aAAaI,EAAE,kBAAkB,EAAIJ,EAAM,aAAa,IAAI,EACtF,OAAQA,EAAM,WACd,UAAW,CAAC,CAACK,EAAqBL,CAAK,EACvC,aAAcK,EAAqBL,CAAK,EACvC,GAAGnB,CAAA,CAAA,CAGhB,CAqBO,SAASyB,EAAyC,CACrD,MAAAlB,EACA,YAAAC,EACA,aAAAC,EACA,UAAAX,EACA,GAAGE,CACP,EAA4B,CACxB,OACIU,EAACgB,EAAA,CACG,UAAWvB,EAAmBL,EAAWA,GAAaM,EAAW,4BAA6BN,CAAS,CAAC,EACvG,GAAGE,EAEJ,SAAA,CAAAC,EAACW,EAAA,CAAU,MAAAL,EAAc,aAAAE,EAA4B,YAAAD,EACjD,WAACK,EAAA,CACG,SAAA,CAAAZ,EAACa,EAAA,CAAU,QAAQ,QAAQ,KAAM,QAAS,IACzC,OAAA,CAAK,cAAW,GAAC,UAAU,qCAAqC,SAAA,IAEjE,IACCA,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,KAAM,MAAO,EAC3Db,EAACc,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAU,0CAC1C,SAAAd,EAACe,EAAA,CAAO,cAAW,EAAA,CAAC,CAAA,CACxB,CAAA,CAAA,CACJ,CAAA,CACJ,EACAf,EAACJ,EAAA,CACG,SAAAI,EAAC0B,EAAA,CAAA,CAAc,CAAA,CACnB,CAAA,CAAA,CAAA,CAGZ"}

package/dist/components/datefield.d.ts

@@ -10,5 +10,22 @@ interface DateFieldProps<T extends AriaDateValue> extends AriaDateFieldProps<T>,
 export declare function DateField<T extends AriaDateValue>({ label, description, className, errorMessage, ...props }: DateFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 interface TimeFieldProps<T extends AriaTimeValue> extends AriaTimeFieldProps<T>, FormFieldProps {
 }
+/**
+ * Time field component for time values.
+ *
+ * @remarks
+ * Built with React Aria for accessibility and internationalization support.
+ * Supports 12/24-hour formats, granularity control, and time constraints.
+ * Features segmented input for hours, minutes, seconds, and AM/PM.
+ *
+ * @example
+ * ```tsx
+ * <TimeField
+ *   label="Meeting Time"
+ *   minValue={parseTime('09:00')}
+ *   maxValue={parseTime('17:00')}
+ * />
+ * ```
+ */
 export declare function TimeField<T extends AriaTimeValue>({ label, description, errorMessage, className, ...props }: TimeFieldProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/datefield.js.map

@@ -1 +1 @@
-{"version":3,"file":"datefield.js","sources":["../../lib/components/datefield.tsx"],"sourcesContent":["'use client';\n\nimport { VariantProps } from 'class-variance-authority';\nimport {\n    DateField as AriaDateField,\n    DateFieldProps as AriaDateFieldProps,\n    DateInput as AriaDateInput,\n    DateInputProps as AriaDateInputProps,\n    DateSegment as AriaDateSegment,\n    DateSegmentProps as AriaDateSegmentProps,\n    DateValue as AriaDateValue,\n    TimeField as AriaTimeField,\n    TimeFieldProps as AriaTimeFieldProps,\n    TimeValue as AriaTimeValue,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\nimport { fieldGroupVariants, FormField, type FormFieldProps } from './field';\n\nexport function DateSegment({ className, ...props }: AriaDateSegmentProps) {\n    return (\n        <AriaDateSegment\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'inline caret-transparent outline-0',\n                    /* Placeholder */\n                    'data-[placeholder]:text-muted-foreground',\n                    /* Disabled */\n                    'disabled-muted',\n                    /* Focused */\n                    'data-[focused]:bg-accent data-[focused]:text-accent-foreground',\n                    /* Invalid */\n                    'data-[invalid]:data-[focused]:bg-destructive data-[invalid]:data-[focused]:data-[placeholder]:text-destructive-foreground data-[invalid]:data-[focused]:text-destructive-foreground data-[invalid]:data-[placeholder]:text-destructive data-[invalid]:text-destructive',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\ninterface DateInputProps extends AriaDateInputProps, VariantProps<typeof fieldGroupVariants> {}\n\nexport function DateInput({ className, variant, ...props }: Omit<DateInputProps, 'children'>) {\n    return (\n        <AriaDateInput\n            className={composeRenderProps(className, className =>\n                classNames(fieldGroupVariants({ variant }), 'body-sm', className)\n            )}\n            {...props}\n        >\n            {segment => <DateSegment segment={segment} />}\n        </AriaDateInput>\n    );\n}\n\ninterface DateFieldProps<T extends AriaDateValue> extends AriaDateFieldProps<T>, FormFieldProps {}\n\nexport function DateField<T extends AriaDateValue>({\n    label,\n    description,\n    className,\n    errorMessage,\n    ...props\n}: DateFieldProps<T>) {\n    return (\n        <AriaDateField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <DateInput />\n            </FormField>\n        </AriaDateField>\n    );\n}\n\ninterface TimeFieldProps<T extends AriaTimeValue> extends AriaTimeFieldProps<T>, FormFieldProps {}\n\nexport function TimeField<T extends AriaTimeValue>({\n    label,\n    description,\n    errorMessage,\n    className,\n    ...props\n}: TimeFieldProps<T>) {\n    return (\n        <AriaTimeField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <DateInput />\n            </FormField>\n        </AriaTimeField>\n    );\n}\n"],"names":["DateSegment","className","props","jsx","AriaDateSegment","composeRenderProps","classNames","DateInput","variant","AriaDateInput","fieldGroupVariants","segment","DateField","label","description","errorMessage","AriaDateField","FormField","TimeField","AriaTimeField"],"mappings":"+WAoBO,SAASA,EAAY,CAAE,UAAAC,EAAW,GAAGC,GAA+B,CACvE,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,qCAEA,2CAEA,iBAEA,iEAEA,yQACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAIO,SAASK,EAAU,CAAE,UAAAN,EAAW,QAAAO,EAAS,GAAGN,GAA2C,CAC1F,OACIC,EAACM,EAAA,CACG,UAAWJ,EAAmBJ,EAAWA,GACrCK,EAAWI,EAAmB,CAAE,QAAAF,CAAA,CAAS,EAAG,UAAWP,CAAS,CAAA,EAEnE,GAAGC,EAEH,SAAAS,GAAWR,EAACH,EAAA,CAAY,QAAAW,CAAA,CAAkB,CAAA,CAAA,CAGvD,CAIO,SAASC,EAAmC,CAC/C,MAAAC,EACA,YAAAC,EACA,UAAAb,EACA,aAAAc,EACA,GAAGb,CACP,EAAsB,CAClB,OACIC,EAACa,EAAA,CACG,UAAWX,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAZ,EAACI,IAAU,CAAA,CACf,CAAA,CAAA,CAGZ,CAIO,SAASW,EAAmC,CAC/C,MAAAL,EACA,YAAAC,EACA,aAAAC,EACA,UAAAd,EACA,GAAGC,CACP,EAAsB,CAClB,OACIC,EAACgB,EAAA,CACG,UAAWd,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAZ,EAACI,IAAU,CAAA,CACf,CAAA,CAAA,CAGZ"}
+{"version":3,"file":"datefield.js","sources":["../../lib/components/datefield.tsx"],"sourcesContent":["'use client';\n\nimport { VariantProps } from 'class-variance-authority';\nimport {\n    DateField as AriaDateField,\n    DateFieldProps as AriaDateFieldProps,\n    DateInput as AriaDateInput,\n    DateInputProps as AriaDateInputProps,\n    DateSegment as AriaDateSegment,\n    DateSegmentProps as AriaDateSegmentProps,\n    DateValue as AriaDateValue,\n    TimeField as AriaTimeField,\n    TimeFieldProps as AriaTimeFieldProps,\n    TimeValue as AriaTimeValue,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\nimport { fieldGroupVariants, FormField, type FormFieldProps } from './field';\n\nexport function DateSegment({ className, ...props }: AriaDateSegmentProps) {\n    return (\n        <AriaDateSegment\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'inline caret-transparent outline-0',\n                    /* Placeholder */\n                    'data-[placeholder]:text-muted-foreground',\n                    /* Disabled */\n                    'disabled-muted',\n                    /* Focused */\n                    'data-[focused]:bg-accent data-[focused]:text-accent-foreground',\n                    /* Invalid */\n                    'data-[invalid]:data-[focused]:bg-destructive data-[invalid]:data-[focused]:data-[placeholder]:text-destructive-foreground data-[invalid]:data-[focused]:text-destructive-foreground data-[invalid]:data-[placeholder]:text-destructive data-[invalid]:text-destructive',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\ninterface DateInputProps extends AriaDateInputProps, VariantProps<typeof fieldGroupVariants> {}\n\nexport function DateInput({ className, variant, ...props }: Omit<DateInputProps, 'children'>) {\n    return (\n        <AriaDateInput\n            className={composeRenderProps(className, className =>\n                classNames(fieldGroupVariants({ variant }), 'body-sm', className)\n            )}\n            {...props}\n        >\n            {segment => <DateSegment segment={segment} />}\n        </AriaDateInput>\n    );\n}\n\ninterface DateFieldProps<T extends AriaDateValue> extends AriaDateFieldProps<T>, FormFieldProps {}\n\nexport function DateField<T extends AriaDateValue>({\n    label,\n    description,\n    className,\n    errorMessage,\n    ...props\n}: DateFieldProps<T>) {\n    return (\n        <AriaDateField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <DateInput />\n            </FormField>\n        </AriaDateField>\n    );\n}\n\ninterface TimeFieldProps<T extends AriaTimeValue> extends AriaTimeFieldProps<T>, FormFieldProps {}\n\n/**\n * Time field component for time values.\n *\n * @remarks\n * Built with React Aria for accessibility and internationalization support.\n * Supports 12/24-hour formats, granularity control, and time constraints.\n * Features segmented input for hours, minutes, seconds, and AM/PM.\n *\n * @example\n * ```tsx\n * <TimeField\n *   label=\"Meeting Time\"\n *   minValue={parseTime('09:00')}\n *   maxValue={parseTime('17:00')}\n * />\n * ```\n */\nexport function TimeField<T extends AriaTimeValue>({\n    label,\n    description,\n    errorMessage,\n    className,\n    ...props\n}: TimeFieldProps<T>) {\n    return (\n        <AriaTimeField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <DateInput />\n            </FormField>\n        </AriaTimeField>\n    );\n}\n"],"names":["DateSegment","className","props","jsx","AriaDateSegment","composeRenderProps","classNames","DateInput","variant","AriaDateInput","fieldGroupVariants","segment","DateField","label","description","errorMessage","AriaDateField","FormField","TimeField","AriaTimeField"],"mappings":"+WAoBO,SAASA,EAAY,CAAE,UAAAC,EAAW,GAAGC,GAA+B,CACvE,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,qCAEA,2CAEA,iBAEA,iEAEA,yQACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAIO,SAASK,EAAU,CAAE,UAAAN,EAAW,QAAAO,EAAS,GAAGN,GAA2C,CAC1F,OACIC,EAACM,EAAA,CACG,UAAWJ,EAAmBJ,EAAWA,GACrCK,EAAWI,EAAmB,CAAE,QAAAF,CAAA,CAAS,EAAG,UAAWP,CAAS,CAAA,EAEnE,GAAGC,EAEH,SAAAS,GAAWR,EAACH,EAAA,CAAY,QAAAW,CAAA,CAAkB,CAAA,CAAA,CAGvD,CAIO,SAASC,EAAmC,CAC/C,MAAAC,EACA,YAAAC,EACA,UAAAb,EACA,aAAAc,EACA,GAAGb,CACP,EAAsB,CAClB,OACIC,EAACa,EAAA,CACG,UAAWX,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAZ,EAACI,IAAU,CAAA,CACf,CAAA,CAAA,CAGZ,CAqBO,SAASW,EAAmC,CAC/C,MAAAL,EACA,YAAAC,EACA,aAAAC,EACA,UAAAd,EACA,GAAGC,CACP,EAAsB,CAClB,OACIC,EAACgB,EAAA,CACG,UAAWd,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAZ,EAACI,IAAU,CAAA,CACf,CAAA,CAAA,CAGZ"}

package/dist/components/disclosure.js

@@ -1,2 +1,2 @@
-import{jsx as s,jsxs as l,Fragment as u}from"react/jsx-runtime";import{useContext as c}from"react";import{DisclosureGroupStateContext as m,Disclosure as p,composeRenderProps as n,DisclosurePanel as d,DisclosureGroup as f}from"react-aria-components";import{Button as D}from"./button.js";import{classNames as i}from"../utilities/theme.js";import{IcDown as b}from"./icons.js";import"class-variance-authority";import"./loader.js";import"clsx";function $({children:r,className:o,...e}){let t=c(m)!==null;return s(p,{...e,className:n(o,(a,h)=>i("group",t&&"border-0 border-b last:border-b-0",a)),children:r})}function C({children:r,className:o,...e}){return s(D,{slot:"trigger",type:"button",variant:"ghost",className:i("font-light w-full justify-between",o),...e,children:n(r,t=>l(u,{children:[s("span",{children:t}),s(b,{"aria-hidden":!0,className:i("transition-transform duration-200","group-data-[expanded]:rotate-180")})]}))})}function I({children:r,className:o,...e}){return s(d,{...e,className:"overflow-hidden body-sm transition-all",children:s("div",{className:i("pb-icon pt-2",o),children:r})})}function _({children:r,className:o,...e}){return s(f,{...e,className:n(o,(t,a)=>i("",t)),children:r})}export{$ as Disclosure,_ as DisclosureGroup,C as DisclosureHeader,I as DisclosurePanel};
+import{jsx as e,jsxs as l,Fragment as u}from"react/jsx-runtime";import{useContext as c}from"react";import{DisclosureGroupStateContext as m,Disclosure as p,composeRenderProps as n,DisclosurePanel as d,DisclosureGroup as f}from"react-aria-components";import{Button as D}from"./button.js";import{classNames as i}from"../utilities/theme.js";import{IcDown as b}from"./icons.js";import"class-variance-authority";import"./loader.js";import"clsx";function y({children:r,className:o,...s}){let t=c(m)!==null;return e(p,{...s,className:n(o,(a,h)=>i("group",t&&"border-0 border-b last:border-b-0",a)),children:r})}function C({children:r,className:o,...s}){return e(D,{slot:"trigger",type:"button",variant:"ghost",className:i(o),...s,children:n(r,t=>l(u,{children:[e("span",{children:t}),e(b,{"aria-hidden":!0,className:i("transition-transform duration-200","group-data-[expanded]:rotate-180")})]}))})}function I({children:r,className:o,...s}){return e(d,{...s,className:"overflow-hidden body-sm transition-all",children:e("div",{className:i("pb-icon pt-2",o),children:r})})}function _({children:r,className:o,...s}){return e(f,{...s,className:n(o,(t,a)=>i("",t)),children:r})}export{y as Disclosure,_ as DisclosureGroup,C as DisclosureHeader,I as DisclosurePanel};
 //# sourceMappingURL=disclosure.js.map

package/dist/components/disclosure.js.map

@@ -1 +1 @@
-{"version":3,"file":"disclosure.js","sources":["../../lib/components/disclosure.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport {\n    Disclosure as AriaDisclosure,\n    DisclosureGroup as AriaDisclosureGroup,\n    DisclosureGroupProps as AriaDisclosureGroupProps,\n    DisclosurePanel as AriaDisclosurePanel,\n    DisclosurePanelProps as AriaDisclosurePanelProps,\n    DisclosureProps as AriaDisclosureProps,\n    composeRenderProps,\n    DisclosureGroupStateContext,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { classNames } from '../utilities/theme';\nimport { IcDown } from './icons';\n\nexport interface DisclosureProps extends AriaDisclosureProps {\n    children: React.ReactNode;\n}\n\nexport function Disclosure({ children, className, ...props }: DisclosureProps) {\n    let isInGroup = useContext(DisclosureGroupStateContext) !== null;\n    return (\n        <AriaDisclosure\n            {...props}\n            className={composeRenderProps(className, (className, _) =>\n                classNames('group', isInGroup && 'border-0 border-b last:border-b-0', className)\n            )}\n        >\n            {children}\n        </AriaDisclosure>\n    );\n}\n\nexport function DisclosureHeader({ children, className, ...props }: React.ComponentProps<typeof Button>) {\n    return (\n        <Button\n            slot=\"trigger\"\n            type=\"button\"\n            variant={'ghost'}\n            className={classNames('font-light w-full justify-between', className)}\n            {...props}\n        >\n            {composeRenderProps(children, children => (\n                <>\n                    <span>{children}</span>\n                    <IcDown\n                        aria-hidden\n                        className={classNames('transition-transform duration-200', 'group-data-[expanded]:rotate-180')}\n                    />\n                </>\n            ))}\n        </Button>\n    );\n}\n\nexport interface DisclosurePanelProps extends AriaDisclosurePanelProps {\n    children: React.ReactNode;\n}\n\nexport function DisclosurePanel({ children, className, ...props }: DisclosurePanelProps) {\n    return (\n        <AriaDisclosurePanel {...props} className={'overflow-hidden body-sm transition-all'}>\n            <div className={classNames('pb-icon pt-2', className)}>{children}</div>\n        </AriaDisclosurePanel>\n    );\n}\n\nexport interface DisclosureGroupProps extends AriaDisclosureGroupProps {\n    children: React.ReactNode;\n}\n\nexport function DisclosureGroup({ children, className, ...props }: DisclosureGroupProps) {\n    return (\n        <AriaDisclosureGroup\n            {...props}\n            className={composeRenderProps(className, (className, _) => classNames('', className))}\n        >\n            {children}\n        </AriaDisclosureGroup>\n    );\n}\n"],"names":["Disclosure","children","className","props","isInGroup","useContext","DisclosureGroupStateContext","jsx","AriaDisclosure","composeRenderProps","_","classNames","DisclosureHeader","Button","jsxs","Fragment","IcDown","DisclosurePanel","AriaDisclosurePanel","DisclosureGroup","AriaDisclosureGroup"],"mappings":"ubAoBO,SAASA,EAAW,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,GAA0B,CAC3E,IAAIC,EAAYC,EAAWC,CAA2B,IAAM,KAC5D,OACIC,EAACC,EAAA,CACI,GAAGL,EACJ,UAAWM,EAAmBP,EAAW,CAACA,EAAWQ,IACjDC,EAAW,QAASP,GAAa,oCAAqCF,CAAS,CAAA,EAGlF,SAAAD,CAAA,CAAA,CAGb,CAEO,SAASW,EAAiB,CAAE,SAAAX,EAAU,UAAAC,EAAW,GAAGC,GAA8C,CACrG,OACII,EAACM,EAAA,CACG,KAAK,UACL,KAAK,SACL,QAAS,QACT,UAAWF,EAAW,oCAAqCT,CAAS,EACnE,GAAGC,EAEH,SAAAM,EAAmBR,EAAUA,GAC1Ba,EAAAC,EAAA,CACI,SAAA,CAAAR,EAAC,OAAA,CAAM,SAAAN,CAAAA,CAAS,EAChBM,EAACS,EAAA,CACG,cAAW,GACX,UAAWL,EAAW,oCAAqC,kCAAkC,CAAA,CAAA,CACjG,EACJ,CACH,CAAA,CAAA,CAGb,CAMO,SAASM,EAAgB,CAAE,SAAAhB,EAAU,UAAAC,EAAW,GAAGC,GAA+B,CACrF,OACII,EAACW,EAAA,CAAqB,GAAGf,EAAO,UAAW,yCACvC,SAAAI,EAAC,MAAA,CAAI,UAAWI,EAAW,eAAgBT,CAAS,EAAI,SAAAD,EAAS,EACrE,CAER,CAMO,SAASkB,EAAgB,CAAE,SAAAlB,EAAU,UAAAC,EAAW,GAAGC,GAA+B,CACrF,OACII,EAACa,EAAA,CACI,GAAGjB,EACJ,UAAWM,EAAmBP,EAAW,CAACA,EAAWQ,IAAMC,EAAW,GAAIT,CAAS,CAAC,EAEnF,SAAAD,CAAA,CAAA,CAGb"}
+{"version":3,"file":"disclosure.js","sources":["../../lib/components/disclosure.tsx"],"sourcesContent":["import { useContext } from 'react';\nimport {\n    Disclosure as AriaDisclosure,\n    DisclosureGroup as AriaDisclosureGroup,\n    DisclosureGroupProps as AriaDisclosureGroupProps,\n    DisclosurePanel as AriaDisclosurePanel,\n    DisclosurePanelProps as AriaDisclosurePanelProps,\n    DisclosureProps as AriaDisclosureProps,\n    composeRenderProps,\n    DisclosureGroupStateContext,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { classNames } from '../utilities/theme';\nimport { IcDown } from './icons';\n\nexport interface DisclosureProps extends AriaDisclosureProps {\n    children: React.ReactNode;\n}\n\nexport function Disclosure({ children, className, ...props }: DisclosureProps) {\n    let isInGroup = useContext(DisclosureGroupStateContext) !== null;\n    return (\n        <AriaDisclosure\n            {...props}\n            className={composeRenderProps(className, (className, _) =>\n                classNames('group', isInGroup && 'border-0 border-b last:border-b-0', className)\n            )}\n        >\n            {children}\n        </AriaDisclosure>\n    );\n}\n\nexport function DisclosureHeader({ children, className, ...props }: React.ComponentProps<typeof Button>) {\n    return (\n        <Button slot=\"trigger\" type=\"button\" variant={'ghost'} className={classNames(className)} {...props}>\n            {composeRenderProps(children, children => (\n                <>\n                    <span>{children}</span>\n                    <IcDown\n                        aria-hidden\n                        className={classNames('transition-transform duration-200', 'group-data-[expanded]:rotate-180')}\n                    />\n                </>\n            ))}\n        </Button>\n    );\n}\n\nexport interface DisclosurePanelProps extends AriaDisclosurePanelProps {\n    children: React.ReactNode;\n}\n\nexport function DisclosurePanel({ children, className, ...props }: DisclosurePanelProps) {\n    return (\n        <AriaDisclosurePanel {...props} className={'overflow-hidden body-sm transition-all'}>\n            <div className={classNames('pb-icon pt-2', className)}>{children}</div>\n        </AriaDisclosurePanel>\n    );\n}\n\nexport interface DisclosureGroupProps extends AriaDisclosureGroupProps {\n    children: React.ReactNode;\n}\n\nexport function DisclosureGroup({ children, className, ...props }: DisclosureGroupProps) {\n    return (\n        <AriaDisclosureGroup\n            {...props}\n            className={composeRenderProps(className, (className, _) => classNames('', className))}\n        >\n            {children}\n        </AriaDisclosureGroup>\n    );\n}\n"],"names":["Disclosure","children","className","props","isInGroup","useContext","DisclosureGroupStateContext","jsx","AriaDisclosure","composeRenderProps","_","classNames","DisclosureHeader","Button","jsxs","Fragment","IcDown","DisclosurePanel","AriaDisclosurePanel","DisclosureGroup","AriaDisclosureGroup"],"mappings":"ubAoBO,SAASA,EAAW,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,GAA0B,CAC3E,IAAIC,EAAYC,EAAWC,CAA2B,IAAM,KAC5D,OACIC,EAACC,EAAA,CACI,GAAGL,EACJ,UAAWM,EAAmBP,EAAW,CAACA,EAAWQ,IACjDC,EAAW,QAASP,GAAa,oCAAqCF,CAAS,CAAA,EAGlF,SAAAD,CAAA,CAAA,CAGb,CAEO,SAASW,EAAiB,CAAE,SAAAX,EAAU,UAAAC,EAAW,GAAGC,GAA8C,CACrG,SACKU,EAAA,CAAO,KAAK,UAAU,KAAK,SAAS,QAAS,QAAS,UAAWF,EAAWT,CAAS,EAAI,GAAGC,EACxF,WAAmBF,EAAUA,GAC1Ba,EAAAC,EAAA,CACI,SAAA,CAAAR,EAAC,OAAA,CAAM,SAAAN,CAAAA,CAAS,EAChBM,EAACS,EAAA,CACG,cAAW,GACX,UAAWL,EAAW,oCAAqC,kCAAkC,CAAA,CAAA,CACjG,CAAA,CACJ,CACH,CAAA,CACL,CAER,CAMO,SAASM,EAAgB,CAAE,SAAAhB,EAAU,UAAAC,EAAW,GAAGC,GAA+B,CACrF,OACII,EAACW,EAAA,CAAqB,GAAGf,EAAO,UAAW,yCACvC,SAAAI,EAAC,MAAA,CAAI,UAAWI,EAAW,eAAgBT,CAAS,EAAI,SAAAD,EAAS,EACrE,CAER,CAMO,SAASkB,EAAgB,CAAE,SAAAlB,EAAU,UAAAC,EAAW,GAAGC,GAA+B,CACrF,OACII,EAACa,EAAA,CACI,GAAGjB,EACJ,UAAWM,EAAmBP,EAAW,CAACA,EAAWQ,IAAMC,EAAW,GAAIT,CAAS,CAAC,EAEnF,SAAAD,CAAA,CAAA,CAGb"}

package/dist/components/id-search.d.ts

@@ -1,20 +1,129 @@
 import { Menu } from '../components/menu';
 import { FormFieldProps } from './field';
+/**
+ * Minimal resource shape used by the ID search inputs.
+ * Only `id` and `name` are required.
+ *
+ * @example
+ * const user: BaseSearchableResource = { id: 'u_123', name: 'Nabeel Farooq' };
+ */
 type BaseSearchableResource = {
+    /** Unique identifier used as the input value. */
     id: string;
+    /** Human-readable label shown to users. */
     name: string;
 };
+/**
+ * - Generic, accessible ID-search building block.
+ * - Search (powered by react-query)
+ * - Renders an accessible Autocomplete + Menu listbox
+ * - Exposes a controlled `value`/`onChange` contract so callers (and wrappers) can manage state
+ * - Clear separation of concerns: this component only handles UI search/display; callers provide `searchFn`
+ *
+ * @template T - resource type extending `BaseSearchableResource` (must have `id` and `name`)
+ * @template V - controlled value type (e.g. `string` for single-select or `string[]` for multi-select)
+ *
+ * @param props - props object (see inline property JSDoc for the most important fields)
+ *
+ * @remarks
+ * - `searchFn` should return `Promise<T[] | undefined>`. Returning `undefined` indicates no results / handled error.
+ * - When the popover closes, `onBlur` (if provided) is called with the current `value`.
+ * - `renderLabel` must convert `value` to a readable string for the control button.
+ *
+ * @example
+ * <BaseIdSearchInput
+ *   label="Owner"
+ *   searchFn={q => api.searchUsers(q)}
+ *   value={ownerId}
+ *   onChange={setOwnerId}
+ *   renderLabel={(v, data) => data?.find(d => d.id === v)?.name ?? v}
+ * />
+ *
+ * @testing
+ * - Mock `searchFn` in unit tests; assert keyboard navigation, open/close behavior, and `onBlur` call on popover close.
+ */
 declare function BaseIdSearchInput<T extends BaseSearchableResource, V>({ label, description, errorMessage, searchFn, isDisabled, onBlur, onChange, value, renderLabel, ...props }: FormFieldProps & {
+    /** Function that returns matching resources for the current query. */
     searchFn: (q: string) => Promise<T[] | undefined>;
+    /** Disable interactions. */
     isDisabled?: boolean;
+    /** Key used to access an alternate display accessor on item (kept for compatibility). */
     accessor: keyof BaseSearchableResource;
+    /** Controlled value. */
     value: V;
+    /** Called when popover closes or the field blurs with the current value. */
     onBlur?: (v: V) => void;
+    /** Controlled change handler. */
     onChange: (v: V) => void;
+    /** Render a human-readable label for the current value using the latest data. */
     renderLabel: (v: V, data: T[] | undefined) => string;
 } & Omit<React.ComponentProps<typeof Menu>, 'items' | 'className'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Single-selection ID search input.
+ *
+ * Thin, typed wrapper around `BaseIdSearchInput` specialized for the very common single-ID case.
+ * Adapts the internal selection events into `onChange(id?: string)` and renders the selected label.
+ *
+ * @template T - resource type (extends BaseSearchableResource)
+ *
+ * @param props - Inherits `BaseIdSearchInput` props but uses `string[]` value type.
+ *
+ * @example
+ * <SingleIdSearchInput
+ *   label="Reporter"
+ *   value={reporterId}
+ *   onChange={setReporterId}
+ *   searchFn={q => api.searchUsers(q)}
+ * />
+ *
+ */
 export declare function SingleIdSearchInput<T extends BaseSearchableResource>({ ...props }: Omit<React.ComponentProps<typeof BaseIdSearchInput<T, string>>, 'onSelectionChange' | 'selectionMode' | 'selectedKeys' | 'renderLabel'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Multi-selection ID search input.
+ *
+ * Thin wrapper around `BaseIdSearchInput` for the multiple-ID (`string[]`) case.
+ * Adapts internal selection events into `onChange(ids: string[])`.
+ *
+ * @template T - resource type (extends BaseSearchableResource)
+ *
+ * @param props - Inherits `BaseIdSearchInput` props but uses `string[]` value type.
+ *
+ * @example
+ * <MultipleIdSearchInput
+ *   label="Reviewers"
+ *   value={reviewerIds}
+ *   onChange={setReviewerIds}
+ *   searchFn={q => api.searchUsers(q)}
+ * />
+ *
+ * @remarks
+ * - The `renderLabel` joins selected item names with commas for compact display.
+ */
 export declare function MultipleIdSearchInput<T extends BaseSearchableResource>({ ...props }: Omit<React.ComponentProps<typeof BaseIdSearchInput<T, string[]>>, 'renderLabel' | 'onSelectionChange' | 'selectionMode' | 'selectedKeys'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Form-integrated single-select ID input (field wrapper).
+ *
+ * Integrates `SingleIdSearchInput` into the form system using `useFieldContext`.
+ * - wires `value`, `onChange`, and `onBlur`
+ * - disables the control while the form is submitting
+ * - surfaces field-level error messages
+ *
+ * @example
+ * <TfSingleIdSearchInput name="ownerId" label="Owner" searchFn={q => api.searchUsers(q)} />
+ 
+ */
 export declare function TfSingleIdSearchInput({ isDisabled, ...props }: Omit<React.ComponentProps<typeof SingleIdSearchInput>, 'value' | 'onChange'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Form-integrated multi-select ID input (field wrapper).
+ *
+ * Integrates `MultipleIdSearchInput` into the form system using `useFieldContext`.
+ * - wires `value`, `onChange`, and `onBlur`
+ * - disables the control while the form is submitting
+ * - surfaces field-level error messages
+ *
+ * @example
+ * <TfMultipleIdSearchInput name="reviewerIds" label="Reviewers" searchFn={q => api.searchUsers(q)} />
+ *
+ */
 export declare function TfMultipleIdSearchInput({ isDisabled, ...props }: Omit<React.ComponentProps<typeof MultipleIdSearchInput>, 'value' | 'onChange'>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/id-search.js

@@ -1,2 +1,2 @@
-import{jsx as n,jsxs as c}from"react/jsx-runtime";import{useQuery as N}from"@tanstack/react-query";import{useId as b,useState as M}from"react";import{Autocomplete as x}from"react-aria-components";import{Button as F}from"./button.js";import{Loader as B}from"./loader.js";import{Menu as T,MenuItem as j}from"./menu.js";import{PopoverTrigger as A,Popover as E}from"./popover.js";import{SearchField as K}from"./searchfield.js";import{useTfFieldContext as h,getFieldErrorMessage as p}from"../utilities/form.js";import{FormField as L}from"./field.js";import"class-variance-authority";import"../utilities/theme.js";import"clsx";import"./icons.js";import"./list-box.js";import"./select.js";import"../utilities/form-context.js";import"@tanstack/react-form";function f({label:r,description:t,errorMessage:e,searchFn:o,isDisabled:a,onBlur:g,onChange:P,value:s,renderLabel:S,...y}){const I=b(),[l,C]=M(""),{data:m,isError:d,isFetching:u,error:v}=N({queryKey:[I,l],queryFn:()=>o(l)});return n("div",{className:"group form-field",children:n(L,{label:r,description:t,errorMessage:e,children:c(A,{onOpenChange:i=>{i||g?.(s)},children:[n(F,{className:"min-w-3xs",isDisabled:a,children:S(s,m)}),n(E,{className:"p-2",children:c(x,{inputValue:l,onInputChange:C,children:[n(K,{className:"mb-2",autoFocus:!0}),u&&n("div",{className:"p-input",children:n(B,{className:"mx-auto"})}),!u&&!d&&n(T,{...y,className:"max-h-48",items:m,renderEmptyState:()=>n("div",{className:"body-sm p-2",children:"No results found."}),children:i=>n(j,{id:i.id,children:i.name},i.id)}),d&&n("div",{className:"text-destructive p-icon body-sm",children:v.message})]})})]})})})}function _({...r}){return n(f,{selectedKeys:[r.value],onSelectionChange:t=>r.onChange(Array.from(t).filter(e=>typeof e=="string")[0]),renderLabel:(t,e)=>e?.find(o=>o.id===t)?.name??t,selectionMode:"single",...r})}function q({...r}){return n(f,{selectedKeys:r.value,onSelectionChange:t=>r.onChange(Array.from(t).filter(e=>typeof e=="string")),selectionMode:"multiple",renderLabel:(t,e)=>t.map(o=>e?.find(a=>a.id===o)?.name??o).join(","),...r})}function ne({isDisabled:r,...t}){const e=h({disabled:r});return n(_,{...t,isDisabled:r||e.form.state.isSubmitting,value:e.state.value,onBlur:o=>e.handleBlur(),onChange:o=>e.handleChange(o),errorMessage:p(e)})}function te({isDisabled:r,...t}){const e=h({disabled:r});return n(q,{...t,isDisabled:r||e.form.state.isSubmitting,value:e.state.value,onBlur:o=>e.handleBlur(),onChange:o=>e.handleChange(o),errorMessage:p(e)})}export{q as MultipleIdSearchInput,_ as SingleIdSearchInput,te as TfMultipleIdSearchInput,ne as TfSingleIdSearchInput};
+import{jsx as n,jsxs as c}from"react/jsx-runtime";import{useQuery as N}from"@tanstack/react-query";import{useId as b,useState as M}from"react";import{Autocomplete as x}from"react-aria-components";import{Button as F}from"./button.js";import{Loader as B}from"./loader.js";import{Menu as j,MenuItem as A}from"./menu.js";import{PopoverTrigger as E,Popover as K}from"./popover.js";import{SearchField as L}from"./searchfield.js";import{getFieldErrorMessage as h}from"../utilities/form.js";import{useFieldContext as p}from"../utilities/form-context.js";import{FormField as T}from"./field.js";import"class-variance-authority";import"../utilities/theme.js";import"clsx";import"./icons.js";import"./list-box.js";import"./select.js";import"@tanstack/react-form";function f({label:r,description:t,errorMessage:e,searchFn:o,isDisabled:a,onBlur:g,onChange:P,value:s,renderLabel:S,...y}){const I=b(),[l,C]=M(""),{data:m,isError:d,isFetching:u,error:v}=N({queryKey:[I,l],queryFn:()=>o(l)});return n("div",{className:"group form-field",children:n(T,{label:r,description:t,errorMessage:e,children:c(E,{onOpenChange:i=>{i||g?.(s)},children:[n(F,{className:"min-w-3xs",isDisabled:a,children:S(s,m)}),n(K,{className:"p-2",children:c(x,{inputValue:l,onInputChange:C,children:[n(L,{className:"mb-2",autoFocus:!0}),u&&n("div",{className:"p-input",children:n(B,{className:"mx-auto"})}),!u&&!d&&n(j,{...y,className:"max-h-48",items:m,renderEmptyState:()=>n("div",{className:"body-sm p-2",children:"No results found."}),children:i=>n(A,{id:i.id,children:i.name},i.id)}),d&&n("div",{className:"text-destructive p-icon body-sm",children:v.message})]})})]})})})}function _({...r}){return n(f,{selectedKeys:[r.value],onSelectionChange:t=>r.onChange(Array.from(t).filter(e=>typeof e=="string")[0]),renderLabel:(t,e)=>e?.find(o=>o.id===t)?.name??t,selectionMode:"single",...r})}function q({...r}){return n(f,{selectedKeys:r.value,onSelectionChange:t=>r.onChange(Array.from(t).filter(e=>typeof e=="string")),selectionMode:"multiple",renderLabel:(t,e)=>t.map(o=>e?.find(a=>a.id===o)?.name??o).join(","),...r})}function ne({isDisabled:r,...t}){const e=p({disabled:r});return n(_,{...t,isDisabled:r||e.form.state.isSubmitting,value:e.state.value,onBlur:o=>e.handleBlur(),onChange:o=>e.handleChange(o),errorMessage:h(e)})}function te({isDisabled:r,...t}){const e=p({disabled:r});return n(q,{...t,isDisabled:r||e.form.state.isSubmitting,value:e.state.value,onBlur:o=>e.handleBlur(),onChange:o=>e.handleChange(o),errorMessage:h(e)})}export{q as MultipleIdSearchInput,_ as SingleIdSearchInput,te as TfMultipleIdSearchInput,ne as TfSingleIdSearchInput};
 //# sourceMappingURL=id-search.js.map

package/dist/components/id-search.js.map

@@ -1 +1 @@
-{"version":3,"file":"id-search.js","sources":["../../lib/components/id-search.tsx"],"sourcesContent":["import { useQuery } from '@tanstack/react-query';\nimport { useId, useState } from 'react';\nimport { Autocomplete } from 'react-aria-components';\nimport { Button } from '../components/button';\nimport { Loader } from '../components/loader';\nimport { Menu, MenuItem } from '../components/menu';\nimport { Popover, PopoverTrigger } from '../components/popover';\nimport { SearchField } from '../components/searchfield';\nimport { getFieldErrorMessage, useTfFieldContext } from '../utilities/form';\nimport { FormField, type FormFieldProps } from './field';\n\ntype BaseSearchableResource = {\n    id: string;\n    name: string;\n};\n\nfunction BaseIdSearchInput<T extends BaseSearchableResource, V>({\n    label,\n    description,\n    errorMessage,\n    searchFn,\n    isDisabled,\n    onBlur,\n    onChange,\n    value,\n    renderLabel,\n    ...props\n}: FormFieldProps & {\n    searchFn: (q: string) => Promise<T[] | undefined>;\n    isDisabled?: boolean;\n    accessor: keyof BaseSearchableResource;\n    value: V;\n    onBlur?: (v: V) => void;\n    onChange: (v: V) => void;\n    renderLabel: (v: V, data: T[] | undefined) => string;\n} & Omit<React.ComponentProps<typeof Menu>, 'items' | 'className'>) {\n    const id = useId();\n    const [search, _setSearch] = useState('');\n    const { data, isError, isFetching, error } = useQuery({\n        queryKey: [id, search],\n        queryFn: () => searchFn(search),\n    });\n\n    return (\n        <div className=\"group form-field\">\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <PopoverTrigger\n                    onOpenChange={o => {\n                        if (!o) {\n                            // searchInputRef.current?.focus();\n                            onBlur?.(value);\n                        }\n                    }}\n                >\n                    <Button className={'min-w-3xs'} isDisabled={isDisabled}>\n                        {renderLabel(value, data)}\n                    </Button>\n                    <Popover className={'p-2'}>\n                        <Autocomplete inputValue={search} onInputChange={_setSearch}>\n                            <SearchField className={'mb-2'} autoFocus />\n                            {isFetching && (\n                                <div className=\"p-input\">\n                                    <Loader className=\"mx-auto\" />\n                                </div>\n                            )}\n                            {!isFetching && !isError && (\n                                <Menu\n                                    {...props}\n                                    className={'max-h-48'}\n                                    items={data}\n                                    renderEmptyState={() => <div className=\"body-sm p-2\">No results found.</div>}\n                                >\n                                    {item => (\n                                        <MenuItem key={item['id']} id={item['id']}>\n                                            {item.name}\n                                        </MenuItem>\n                                    )}\n                                </Menu>\n                            )}\n                            {isError && <div className=\"text-destructive p-icon body-sm\">{error.message}</div>}\n                        </Autocomplete>\n                    </Popover>\n                </PopoverTrigger>\n            </FormField>\n        </div>\n    );\n}\n\nexport function SingleIdSearchInput<T extends BaseSearchableResource>({\n    ...props\n}: Omit<\n    React.ComponentProps<typeof BaseIdSearchInput<T, string>>,\n    'onSelectionChange' | 'selectionMode' | 'selectedKeys' | 'renderLabel'\n>) {\n    return (\n        <BaseIdSearchInput\n            selectedKeys={[props.value]}\n            onSelectionChange={e => props.onChange(Array.from(e).filter(v => typeof v === 'string')[0])}\n            renderLabel={(v, d) => d?.find(di => di.id === v)?.name ?? v}\n            selectionMode=\"single\"\n            {...props}\n        />\n    );\n}\n\nexport function MultipleIdSearchInput<T extends BaseSearchableResource>({\n    ...props\n}: Omit<\n    React.ComponentProps<typeof BaseIdSearchInput<T, string[]>>,\n    'renderLabel' | 'onSelectionChange' | 'selectionMode' | 'selectedKeys'\n>) {\n    return (\n        <BaseIdSearchInput\n            selectedKeys={props.value}\n            onSelectionChange={e => props.onChange(Array.from(e).filter(v => typeof v === 'string'))}\n            selectionMode=\"multiple\"\n            renderLabel={(v, d) => v.map(vi => d?.find(di => di.id === vi)?.name ?? vi).join(',')}\n            {...props}\n        />\n    );\n}\n\nexport function TfSingleIdSearchInput({\n    isDisabled,\n    ...props\n}: Omit<React.ComponentProps<typeof SingleIdSearchInput>, 'value' | 'onChange'>) {\n    const field = useTfFieldContext<string>({ disabled: isDisabled });\n    return (\n        <SingleIdSearchInput\n            {...props}\n            isDisabled={isDisabled || field.form.state.isSubmitting}\n            value={field.state.value}\n            onBlur={_ => field.handleBlur()}\n            onChange={e => field.handleChange(e)}\n            errorMessage={getFieldErrorMessage(field)}\n        />\n    );\n}\n// TODO, popover alignment should be same as Select\nexport function TfMultipleIdSearchInput({\n    isDisabled,\n    ...props\n}: Omit<React.ComponentProps<typeof MultipleIdSearchInput>, 'value' | 'onChange'>) {\n    const field = useTfFieldContext<string[]>({ disabled: isDisabled });\n    return (\n        <MultipleIdSearchInput\n            {...props}\n            isDisabled={isDisabled || field.form.state.isSubmitting}\n            value={field.state.value}\n            onBlur={_ => field.handleBlur()}\n            onChange={e => field.handleChange(e)}\n            errorMessage={getFieldErrorMessage(field)}\n        />\n    );\n}\n"],"names":["BaseIdSearchInput","label","description","errorMessage","searchFn","isDisabled","onBlur","onChange","value","renderLabel","props","id","useId","search","_setSearch","useState","data","isError","isFetching","error","useQuery","jsx","FormField","jsxs","PopoverTrigger","o","Button","Popover","Autocomplete","SearchField","Loader","Menu","item","MenuItem","SingleIdSearchInput","e","v","d","di","MultipleIdSearchInput","vi","TfSingleIdSearchInput","field","useTfFieldContext","_","getFieldErrorMessage","TfMultipleIdSearchInput"],"mappings":"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"}
+{"version":3,"file":"id-search.js","sources":["../../lib/components/id-search.tsx"],"sourcesContent":["import { useQuery } from '@tanstack/react-query';\nimport { useId, useState } from 'react';\nimport { Autocomplete } from 'react-aria-components';\nimport { Button } from '../components/button';\nimport { Loader } from '../components/loader';\nimport { Menu, MenuItem } from '../components/menu';\nimport { Popover, PopoverTrigger } from '../components/popover';\nimport { SearchField } from '../components/searchfield';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { FormField, type FormFieldProps } from './field';\n\n/**\n * Minimal resource shape used by the ID search inputs.\n * Only `id` and `name` are required.\n *\n * @example\n * const user: BaseSearchableResource = { id: 'u_123', name: 'Nabeel Farooq' };\n */\ntype BaseSearchableResource = {\n    /** Unique identifier used as the input value. */\n    id: string;\n    /** Human-readable label shown to users. */\n    name: string;\n};\n\n/**\n * - Generic, accessible ID-search building block.\n * - Search (powered by react-query)\n * - Renders an accessible Autocomplete + Menu listbox\n * - Exposes a controlled `value`/`onChange` contract so callers (and wrappers) can manage state\n * - Clear separation of concerns: this component only handles UI search/display; callers provide `searchFn`\n *\n * @template T - resource type extending `BaseSearchableResource` (must have `id` and `name`)\n * @template V - controlled value type (e.g. `string` for single-select or `string[]` for multi-select)\n *\n * @param props - props object (see inline property JSDoc for the most important fields)\n *\n * @remarks\n * - `searchFn` should return `Promise<T[] | undefined>`. Returning `undefined` indicates no results / handled error.\n * - When the popover closes, `onBlur` (if provided) is called with the current `value`.\n * - `renderLabel` must convert `value` to a readable string for the control button.\n *\n * @example\n * <BaseIdSearchInput\n *   label=\"Owner\"\n *   searchFn={q => api.searchUsers(q)}\n *   value={ownerId}\n *   onChange={setOwnerId}\n *   renderLabel={(v, data) => data?.find(d => d.id === v)?.name ?? v}\n * />\n *\n * @testing\n * - Mock `searchFn` in unit tests; assert keyboard navigation, open/close behavior, and `onBlur` call on popover close.\n */\nfunction BaseIdSearchInput<T extends BaseSearchableResource, V>({\n    label,\n    description,\n    errorMessage,\n    searchFn,\n    isDisabled,\n    onBlur,\n    onChange,\n    value,\n    renderLabel,\n    ...props\n}: FormFieldProps & {\n    /** Function that returns matching resources for the current query. */\n    searchFn: (q: string) => Promise<T[] | undefined>;\n    /** Disable interactions. */\n    isDisabled?: boolean;\n    /** Key used to access an alternate display accessor on item (kept for compatibility). */\n    accessor: keyof BaseSearchableResource;\n    /** Controlled value. */\n    value: V;\n    /** Called when popover closes or the field blurs with the current value. */\n    onBlur?: (v: V) => void;\n    /** Controlled change handler. */\n    onChange: (v: V) => void;\n    /** Render a human-readable label for the current value using the latest data. */\n    renderLabel: (v: V, data: T[] | undefined) => string;\n} & Omit<React.ComponentProps<typeof Menu>, 'items' | 'className'>) {\n    const id = useId();\n    const [search, _setSearch] = useState('');\n    const { data, isError, isFetching, error } = useQuery({\n        queryKey: [id, search],\n        queryFn: () => searchFn(search),\n    });\n\n    return (\n        <div className=\"group form-field\">\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <PopoverTrigger\n                    onOpenChange={o => {\n                        if (!o) {\n                            // searchInputRef.current?.focus();\n                            onBlur?.(value);\n                        }\n                    }}\n                >\n                    <Button className={'min-w-3xs'} isDisabled={isDisabled}>\n                        {renderLabel(value, data)}\n                    </Button>\n                    <Popover className={'p-2'}>\n                        <Autocomplete inputValue={search} onInputChange={_setSearch}>\n                            <SearchField className={'mb-2'} autoFocus />\n                            {isFetching && (\n                                <div className=\"p-input\">\n                                    <Loader className=\"mx-auto\" />\n                                </div>\n                            )}\n                            {!isFetching && !isError && (\n                                <Menu\n                                    {...props}\n                                    className={'max-h-48'}\n                                    items={data}\n                                    renderEmptyState={() => <div className=\"body-sm p-2\">No results found.</div>}\n                                >\n                                    {item => (\n                                        <MenuItem key={item['id']} id={item['id']}>\n                                            {item.name}\n                                        </MenuItem>\n                                    )}\n                                </Menu>\n                            )}\n                            {isError && <div className=\"text-destructive p-icon body-sm\">{error.message}</div>}\n                        </Autocomplete>\n                    </Popover>\n                </PopoverTrigger>\n            </FormField>\n        </div>\n    );\n}\n\n/**\n * Single-selection ID search input.\n *\n * Thin, typed wrapper around `BaseIdSearchInput` specialized for the very common single-ID case.\n * Adapts the internal selection events into `onChange(id?: string)` and renders the selected label.\n *\n * @template T - resource type (extends BaseSearchableResource)\n *\n * @param props - Inherits `BaseIdSearchInput` props but uses `string[]` value type.\n *\n * @example\n * <SingleIdSearchInput\n *   label=\"Reporter\"\n *   value={reporterId}\n *   onChange={setReporterId}\n *   searchFn={q => api.searchUsers(q)}\n * />\n *\n */\nexport function SingleIdSearchInput<T extends BaseSearchableResource>({\n    ...props\n}: Omit<\n    React.ComponentProps<typeof BaseIdSearchInput<T, string>>,\n    'onSelectionChange' | 'selectionMode' | 'selectedKeys' | 'renderLabel'\n>) {\n    return (\n        <BaseIdSearchInput\n            selectedKeys={[props.value]}\n            onSelectionChange={e => props.onChange(Array.from(e).filter(v => typeof v === 'string')[0])}\n            renderLabel={(v, d) => d?.find(di => di.id === v)?.name ?? v}\n            selectionMode=\"single\"\n            {...props}\n        />\n    );\n}\n\n/**\n * Multi-selection ID search input.\n *\n * Thin wrapper around `BaseIdSearchInput` for the multiple-ID (`string[]`) case.\n * Adapts internal selection events into `onChange(ids: string[])`.\n *\n * @template T - resource type (extends BaseSearchableResource)\n *\n * @param props - Inherits `BaseIdSearchInput` props but uses `string[]` value type.\n *\n * @example\n * <MultipleIdSearchInput\n *   label=\"Reviewers\"\n *   value={reviewerIds}\n *   onChange={setReviewerIds}\n *   searchFn={q => api.searchUsers(q)}\n * />\n *\n * @remarks\n * - The `renderLabel` joins selected item names with commas for compact display.\n */\nexport function MultipleIdSearchInput<T extends BaseSearchableResource>({\n    ...props\n}: Omit<\n    React.ComponentProps<typeof BaseIdSearchInput<T, string[]>>,\n    'renderLabel' | 'onSelectionChange' | 'selectionMode' | 'selectedKeys'\n>) {\n    return (\n        <BaseIdSearchInput\n            selectedKeys={props.value}\n            onSelectionChange={e => props.onChange(Array.from(e).filter(v => typeof v === 'string'))}\n            selectionMode=\"multiple\"\n            renderLabel={(v, d) => v.map(vi => d?.find(di => di.id === vi)?.name ?? vi).join(',')}\n            {...props}\n        />\n    );\n}\n\n/**\n * Form-integrated single-select ID input (field wrapper).\n *\n * Integrates `SingleIdSearchInput` into the form system using `useFieldContext`.\n * - wires `value`, `onChange`, and `onBlur`\n * - disables the control while the form is submitting\n * - surfaces field-level error messages\n *\n * @example\n * <TfSingleIdSearchInput name=\"ownerId\" label=\"Owner\" searchFn={q => api.searchUsers(q)} />\n \n */\nexport function TfSingleIdSearchInput({\n    isDisabled,\n    ...props\n}: Omit<React.ComponentProps<typeof SingleIdSearchInput>, 'value' | 'onChange'>) {\n    const field = useFieldContext<string>({ disabled: isDisabled });\n    return (\n        <SingleIdSearchInput\n            {...props}\n            isDisabled={isDisabled || field.form.state.isSubmitting}\n            value={field.state.value}\n            onBlur={_ => field.handleBlur()}\n            onChange={e => field.handleChange(e)}\n            errorMessage={getFieldErrorMessage(field)}\n        />\n    );\n}\n// TODO, popover alignment should be same as Select\n\n/**\n * Form-integrated multi-select ID input (field wrapper).\n *\n * Integrates `MultipleIdSearchInput` into the form system using `useFieldContext`.\n * - wires `value`, `onChange`, and `onBlur`\n * - disables the control while the form is submitting\n * - surfaces field-level error messages\n *\n * @example\n * <TfMultipleIdSearchInput name=\"reviewerIds\" label=\"Reviewers\" searchFn={q => api.searchUsers(q)} />\n *\n */\nexport function TfMultipleIdSearchInput({\n    isDisabled,\n    ...props\n}: Omit<React.ComponentProps<typeof MultipleIdSearchInput>, 'value' | 'onChange'>) {\n    const field = useFieldContext<string[]>({ disabled: isDisabled });\n    return (\n        <MultipleIdSearchInput\n            {...props}\n            isDisabled={isDisabled || field.form.state.isSubmitting}\n            value={field.state.value}\n            onBlur={_ => field.handleBlur()}\n            onChange={e => field.handleChange(e)}\n            errorMessage={getFieldErrorMessage(field)}\n        />\n    );\n}\n"],"names":["BaseIdSearchInput","label","description","errorMessage","searchFn","isDisabled","onBlur","onChange","value","renderLabel","props","id","useId","search","_setSearch","useState","data","isError","isFetching","error","useQuery","jsx","FormField","jsxs","PopoverTrigger","o","Button","Popover","Autocomplete","SearchField","Loader","Menu","item","MenuItem","SingleIdSearchInput","e","v","d","di","MultipleIdSearchInput","vi","TfSingleIdSearchInput","field","useFieldContext","_","getFieldErrorMessage","TfMultipleIdSearchInput"],"mappings":"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"}

package/dist/components/multi-select.js

@@ -1,2 +1,2 @@
-import{jsx as i}from"react/jsx-runtime";import{FormField as d}from"./field.js";import{EasyMenu as a,MenuItem as p}from"./menu.js";import{useTfFieldContext as f,getFieldErrorMessage as u}from"../utilities/form.js";import"class-variance-authority";import"react-aria-components";import"../utilities/theme.js";import"clsx";import"./icons.js";import"react";import"./button.js";import"./loader.js";import"./list-box.js";import"./select.js";import"./popover.js";import"../utilities/form-context.js";import"@tanstack/react-form";function c({items:o,value:e,onChange:t,label:l,errorMessage:n,description:s,...m}){return i("div",{className:"group form-field",children:i(d,{label:l,description:s,errorMessage:n,children:i(a,{isNonModal:!1,selectionMode:"multiple",selectedKeys:e,onSelectionChange:r=>{typeof r!="string"&&t(r)},items:o,label:e.size,...m,children:r=>i(p,{id:r.id,isDisabled:r?.disabled,children:r.label},r.id)})})})}function A({...o}){const e=f({disabled:o.isDisabled});return i(c,{value:new Set(e.state.value),onChange:t=>e.setValue(Array.from(t)),onClose:e.handleBlur,errorMessage:u(e),...o})}export{c as MultiSelect,A as TfMultiSelect};
+import{jsx as i}from"react/jsx-runtime";import{FormField as d}from"./field.js";import{EasyMenu as a,MenuItem as p}from"./menu.js";import{getFieldErrorMessage as f}from"../utilities/form.js";import{useFieldContext as u}from"../utilities/form-context.js";import"class-variance-authority";import"react-aria-components";import"../utilities/theme.js";import"clsx";import"./icons.js";import"react";import"./button.js";import"./loader.js";import"./list-box.js";import"./select.js";import"./popover.js";import"@tanstack/react-form";function c({items:o,value:e,onChange:t,label:l,errorMessage:n,description:m,...s}){return i("div",{className:"group form-field",children:i(d,{label:l,description:m,errorMessage:n,children:i(a,{isNonModal:!1,selectionMode:"multiple",selectedKeys:e,onSelectionChange:r=>{typeof r!="string"&&t(r)},items:o,label:e.size,...s,children:r=>i(p,{id:r.id,isDisabled:r?.disabled,children:r.label},r.id)})})})}function B({...o}){const e=u({disabled:o.isDisabled});return i(c,{value:new Set(e.state.value),onChange:t=>e.setValue(Array.from(t)),onClose:e.handleBlur,errorMessage:f(e),...o})}export{c as MultiSelect,B as TfMultiSelect};
 //# sourceMappingURL=multi-select.js.map

package/dist/components/multi-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.js","sources":["../../lib/components/multi-select.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, type FormFieldProps } from '../components/field';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport type { SelectOption } from '../components/select-options';\nimport { getFieldErrorMessage, useTfFieldContext } from '../utilities/form';\n\ninterface MultipleSelectionProps {\n    value: Set<string | number>;\n    onChange: (v: Set<string | number>) => void;\n    buttonLabel?: React.ReactNode;\n    items: SelectOption[];\n}\n\nexport interface MultiSelectProps\n    extends MultipleSelectionProps,\n        FormFieldProps,\n        Omit<React.ComponentProps<typeof EasyMenu>, 'label' | 'items'> {}\n\nexport function MultiSelect({\n    items,\n    value,\n    onChange: setValue,\n    label,\n    errorMessage,\n    description,\n    ...props\n}: MultiSelectProps) {\n    return (\n        <div className=\"group form-field\">\n            <FormField {...{ label, description, errorMessage }}>\n                <EasyMenu\n                    isNonModal={false}\n                    selectionMode=\"multiple\"\n                    selectedKeys={value}\n                    onSelectionChange={v => {\n                        if (typeof v === 'string') return;\n                        setValue(v);\n                    }}\n                    items={items}\n                    label={value.size}\n                    {...props}\n                >\n                    {item => (\n                        <MenuItem id={item.id} key={item.id} isDisabled={item?.disabled}>\n                            {item.label}\n                        </MenuItem>\n                    )}\n                </EasyMenu>\n            </FormField>\n        </div>\n    );\n}\n\nexport interface TfMultiSelectProps extends Omit<MultiSelectProps, 'value' | 'onChange'> {}\nexport function TfMultiSelect({ ...props }: TfMultiSelectProps) {\n    const field = useTfFieldContext<string[]>({\n        disabled: props.isDisabled,\n    });\n\n    return (\n        <MultiSelect\n            value={new Set(field.state.value)}\n            // @ts-expect-error\n            onChange={e => field.setValue(Array.from(e))}\n            onClose={field.handleBlur}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n"],"names":["MultiSelect","items","value","setValue","label","errorMessage","description","props","jsx","FormField","EasyMenu","v","item","MenuItem","TfMultiSelect","field","useTfFieldContext","e","getFieldErrorMessage"],"mappings":"ygBAkBO,SAASA,EAAY,CACxB,MAAAC,EACA,MAAAC,EACA,SAAUC,EACV,MAAAC,EACA,aAAAC,EACA,YAAAC,EACA,GAAGC,CACP,EAAqB,CACjB,OACIC,EAAC,MAAA,CAAI,UAAU,mBACX,SAAAA,EAACC,EAAA,CAAgB,MAAAL,EAAO,YAAAE,EAAa,aAAAD,EACjC,SAAAG,EAACE,EAAA,CACG,WAAY,GACZ,cAAc,WACd,aAAcR,EACd,kBAAmBS,GAAK,CAChB,OAAOA,GAAM,UACjBR,EAASQ,CAAC,CACd,EACA,MAAAV,EACA,MAAOC,EAAM,KACZ,GAAGK,EAEH,SAAAK,GACGJ,EAACK,EAAA,CAAS,GAAID,EAAK,GAAkB,WAAYA,GAAM,SAClD,SAAAA,EAAK,KAAA,EADkBA,EAAK,EAEjC,CAAA,CAAA,EAGZ,CAAA,CACJ,CAER,CAGO,SAASE,EAAc,CAAE,GAAGP,GAA6B,CAC5D,MAAMQ,EAAQC,EAA4B,CACtC,SAAUT,EAAM,UAAA,CACnB,EAED,OACIC,EAACR,EAAA,CACG,MAAO,IAAI,IAAIe,EAAM,MAAM,KAAK,EAEhC,SAAUE,GAAKF,EAAM,SAAS,MAAM,KAAKE,CAAC,CAAC,EAC3C,QAASF,EAAM,WACf,aAAcG,EAAqBH,CAAK,EACvC,GAAGR,CAAA,CAAA,CAGhB"}
+{"version":3,"file":"multi-select.js","sources":["../../lib/components/multi-select.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, type FormFieldProps } from '../components/field';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport type { SelectOption } from '../components/select-options';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\n\ninterface MultipleSelectionProps {\n    value: Set<string | number>;\n    onChange: (v: Set<string | number>) => void;\n    buttonLabel?: React.ReactNode;\n    items: SelectOption[];\n}\n\nexport interface MultiSelectProps\n    extends MultipleSelectionProps,\n        FormFieldProps,\n        Omit<React.ComponentProps<typeof EasyMenu>, 'label' | 'items'> {}\n\nexport function MultiSelect({\n    items,\n    value,\n    onChange: setValue,\n    label,\n    errorMessage,\n    description,\n    ...props\n}: MultiSelectProps) {\n    return (\n        <div className=\"group form-field\">\n            <FormField {...{ label, description, errorMessage }}>\n                <EasyMenu\n                    isNonModal={false}\n                    selectionMode=\"multiple\"\n                    selectedKeys={value}\n                    onSelectionChange={v => {\n                        if (typeof v === 'string') return;\n                        setValue(v);\n                    }}\n                    items={items}\n                    label={value.size}\n                    {...props}\n                >\n                    {item => (\n                        <MenuItem id={item.id} key={item.id} isDisabled={item?.disabled}>\n                            {item.label}\n                        </MenuItem>\n                    )}\n                </EasyMenu>\n            </FormField>\n        </div>\n    );\n}\n\nexport interface TfMultiSelectProps extends Omit<MultiSelectProps, 'value' | 'onChange'> {}\nexport function TfMultiSelect({ ...props }: TfMultiSelectProps) {\n    const field = useFieldContext<string[]>({\n        disabled: props.isDisabled,\n    });\n\n    return (\n        <MultiSelect\n            value={new Set(field.state.value)}\n            // @ts-expect-error\n            onChange={e => field.setValue(Array.from(e))}\n            onClose={field.handleBlur}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n"],"names":["MultiSelect","items","value","setValue","label","errorMessage","description","props","jsx","FormField","EasyMenu","v","item","MenuItem","TfMultiSelect","field","useFieldContext","e","getFieldErrorMessage"],"mappings":"4gBAmBO,SAASA,EAAY,CACxB,MAAAC,EACA,MAAAC,EACA,SAAUC,EACV,MAAAC,EACA,aAAAC,EACA,YAAAC,EACA,GAAGC,CACP,EAAqB,CACjB,OACIC,EAAC,MAAA,CAAI,UAAU,mBACX,SAAAA,EAACC,EAAA,CAAgB,MAAAL,EAAO,YAAAE,EAAa,aAAAD,EACjC,SAAAG,EAACE,EAAA,CACG,WAAY,GACZ,cAAc,WACd,aAAcR,EACd,kBAAmBS,GAAK,CAChB,OAAOA,GAAM,UACjBR,EAASQ,CAAC,CACd,EACA,MAAAV,EACA,MAAOC,EAAM,KACZ,GAAGK,EAEH,SAAAK,GACGJ,EAACK,EAAA,CAAS,GAAID,EAAK,GAAkB,WAAYA,GAAM,SAClD,SAAAA,EAAK,KAAA,EADkBA,EAAK,EAEjC,CAAA,CAAA,EAGZ,CAAA,CACJ,CAER,CAGO,SAASE,EAAc,CAAE,GAAGP,GAA6B,CAC5D,MAAMQ,EAAQC,EAA0B,CACpC,SAAUT,EAAM,UAAA,CACnB,EAED,OACIC,EAACR,EAAA,CACG,MAAO,IAAI,IAAIe,EAAM,MAAM,KAAK,EAEhC,SAAUE,GAAKF,EAAM,SAAS,MAAM,KAAKE,CAAC,CAAC,EAC3C,QAASF,EAAM,WACf,aAAcG,EAAqBH,CAAK,EACvC,GAAGR,CAAA,CAAA,CAGhB"}

package/dist/components/numberfield.js

@@ -1,2 +1,2 @@
-import{jsx as r,jsxs as d}from"react/jsx-runtime";import{NumberField as c,composeRenderProps as n,Input as p}from"react-aria-components";import{Button as f}from"./button.js";import{useTfFieldContext as b,getFieldErrorMessage as l}from"../utilities/form.js";import{classNames as i}from"../utilities/theme.js";import{FormField as h,FieldGroup as N}from"./field.js";import{IcUp as g,IcDown as F}from"./icons.js";import"class-variance-authority";import"./loader.js";import"react";import"../utilities/form-context.js";import"@tanstack/react-form";import"clsx";const x=c;function v({className:o,...t}){return r(p,{className:n(o,e=>i("w-fit min-w-0 flex-1 border-r border-transparent bg-popover pr-2 outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",e)),...t})}function w({className:o,...t}){return d("div",{className:i("absolute right-0 flex h-full flex-col border-l",o),...t,children:[r(m,{slot:"increment",children:r(g,{"aria-hidden":!0,className:"size-icon"})}),r("div",{className:"border-b"}),r(m,{slot:"decrement",children:r(F,{"aria-hidden":!0,className:"size-icon"})})]})}function m({className:o,...t}){return r(f,{className:n(o,e=>i("w-auto grow h-3 px-0.5 text-muted-foreground",e)),variant:"ghost",size:"none",...t})}function I({label:o,description:t,errorMessage:e,className:s,...a}){return r(x,{className:n(s,u=>i("group form-field",u)),...a,children:r(h,{label:o,description:t,errorMessage:e,children:d(N,{children:[r(v,{}),r(w,{})]})})})}function R({isDisabled:o,...t}){const e=b({disabled:o});return r(I,{isInvalid:!!l(e),isDisabled:o||e.form.state.isSubmitting,value:e.state.value,id:e.name,onChange:e.handleChange,onBlur:e.handleBlur,errorMessage:l(e),...t})}export{I as NumberField,R as TfNumberField};
+import{jsx as r,jsxs as d}from"react/jsx-runtime";import{NumberField as c,composeRenderProps as n,Input as p}from"react-aria-components";import{Button as f}from"./button.js";import{getFieldErrorMessage as l}from"../utilities/form.js";import{useFieldContext as b}from"../utilities/form-context.js";import{classNames as i}from"../utilities/theme.js";import{FormField as h,FieldGroup as N}from"./field.js";import{IcUp as g,IcDown as F}from"./icons.js";import"class-variance-authority";import"./loader.js";import"@tanstack/react-form";import"react";import"clsx";const x=c;function v({className:o,...t}){return r(p,{className:n(o,e=>i("w-fit min-w-0 flex-1 border-r border-transparent bg-popover pr-2 outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",e)),...t})}function w({className:o,...t}){return d("div",{className:i("absolute right-0 flex h-full flex-col border-l",o),...t,children:[r(m,{slot:"increment",children:r(g,{"aria-hidden":!0,className:"size-icon"})}),r("div",{className:"border-b"}),r(m,{slot:"decrement",children:r(F,{"aria-hidden":!0,className:"size-icon"})})]})}function m({className:o,...t}){return r(f,{className:n(o,e=>i("w-auto grow h-3 px-0.5 text-muted-foreground",e)),variant:"ghost",size:"none",...t})}function I({label:o,description:t,errorMessage:e,className:s,...a}){return r(x,{className:n(s,u=>i("group form-field",u)),...a,children:r(h,{label:o,description:t,errorMessage:e,children:d(N,{children:[r(v,{}),r(w,{})]})})})}function T({isDisabled:o,...t}){const e=b({disabled:o});return r(I,{isInvalid:!!l(e),isDisabled:o||e.form.state.isSubmitting,value:e.state.value,id:e.name,onChange:e.handleChange,onBlur:e.handleBlur,errorMessage:l(e),...t})}export{I as NumberField,T as TfNumberField};
 //# sourceMappingURL=numberfield.js.map

package/dist/components/numberfield.js.map

@@ -1 +1 @@
-{"version":3,"file":"numberfield.js","sources":["../../lib/components/numberfield.tsx"],"sourcesContent":["import {\n    ButtonProps as AriaButtonProps,\n    Input as AriaInput,\n    InputProps as AriaInputProps,\n    NumberField as AriaNumberField,\n    NumberFieldProps as AriaNumberFieldProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { getFieldErrorMessage, useTfFieldContext } from '../utilities/form';\nimport { classNames } from '../utilities/theme';\nimport { FieldGroup, FormField, type FormFieldProps } from './field';\nimport { IcDown, IcUp } from './icons';\n\nconst ANumberField = AriaNumberField;\n\nfunction NumberFieldInput({ className, ...props }: AriaInputProps) {\n    return (\n        <AriaInput\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'w-fit min-w-0 flex-1 border-r border-transparent bg-popover pr-2 outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction NumberFieldSteppers({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div className={classNames('absolute right-0 flex h-full flex-col border-l', className)} {...props}>\n            <NumberFieldStepper slot=\"increment\">\n                <IcUp aria-hidden className=\"size-icon\" />\n            </NumberFieldStepper>\n            <div className=\"border-b\" />\n            <NumberFieldStepper slot=\"decrement\">\n                <IcDown aria-hidden className=\"size-icon\" />\n            </NumberFieldStepper>\n        </div>\n    );\n}\n\nfunction NumberFieldStepper({ className, ...props }: AriaButtonProps) {\n    return (\n        <Button\n            className={composeRenderProps(className, className =>\n                classNames('w-auto grow h-3 px-0.5 text-muted-foreground', className)\n            )}\n            variant={'ghost'}\n            size={'none'}\n            {...props}\n        />\n    );\n}\n\ntype NumberFieldProps = AriaNumberFieldProps & FormFieldProps;\nexport function NumberField({ label, description, errorMessage, className, ...props }: NumberFieldProps) {\n    return (\n        <ANumberField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <FieldGroup>\n                    <NumberFieldInput />\n                    <NumberFieldSteppers />\n                </FieldGroup>\n            </FormField>\n        </ANumberField>\n    );\n}\n\nexport function TfNumberField({\n    isDisabled,\n    ...props\n}: Omit<React.ComponentProps<typeof NumberField>, 'value' | 'id' | 'onChange' | 'onBlur'>) {\n    const field = useTfFieldContext<number>({ disabled: isDisabled });\n\n    return (\n        <NumberField\n            isInvalid={!!getFieldErrorMessage(field)}\n            isDisabled={isDisabled || field.form.state.isSubmitting}\n            value={field.state.value}\n            id={field.name}\n            onChange={field.handleChange}\n            onBlur={field.handleBlur}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n"],"names":["ANumberField","AriaNumberField","NumberFieldInput","className","props","jsx","AriaInput","composeRenderProps","classNames","NumberFieldSteppers","jsxs","NumberFieldStepper","IcUp","IcDown","Button","NumberField","label","description","errorMessage","FormField","FieldGroup","TfNumberField","isDisabled","field","useTfFieldContext","getFieldErrorMessage"],"mappings":"2iBAeA,MAAMA,EAAeC,EAErB,SAASC,EAAiB,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CAC/D,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,wJACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASK,EAAoB,CAAE,UAAAN,EAAW,GAAGC,GAAsC,CAC/E,OACIM,EAAC,OAAI,UAAWF,EAAW,iDAAkDL,CAAS,EAAI,GAAGC,EACzF,SAAA,CAAAC,EAACM,EAAA,CAAmB,KAAK,YACrB,SAAAN,EAACO,GAAK,cAAW,GAAC,UAAU,WAAA,CAAY,CAAA,CAC5C,EACAP,EAAC,MAAA,CAAI,UAAU,UAAA,CAAW,EAC1BA,EAACM,EAAA,CAAmB,KAAK,YACrB,SAAAN,EAACQ,GAAO,cAAW,GAAC,UAAU,WAAA,CAAY,CAAA,CAC9C,CAAA,EACJ,CAER,CAEA,SAASF,EAAmB,CAAE,UAAAR,EAAW,GAAGC,GAA0B,CAClE,OACIC,EAACS,EAAA,CACG,UAAWP,EAAmBJ,EAAWA,GACrCK,EAAW,+CAAgDL,CAAS,CAAA,EAExE,QAAS,QACT,KAAM,OACL,GAAGC,CAAA,CAAA,CAGhB,CAGO,SAASW,EAAY,CAAE,MAAAC,EAAO,YAAAC,EAAa,aAAAC,EAAc,UAAAf,EAAW,GAAGC,GAA2B,CACrG,OACIC,EAACL,EAAA,CACG,UAAWO,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAH,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,WAACE,EAAA,CACG,SAAA,CAAAf,EAACH,EAAA,EAAiB,IACjBO,EAAA,CAAA,CAAoB,CAAA,CAAA,CACzB,CAAA,CACJ,CAAA,CAAA,CAGZ,CAEO,SAASY,EAAc,CAC1B,WAAAC,EACA,GAAGlB,CACP,EAA2F,CACvF,MAAMmB,EAAQC,EAA0B,CAAE,SAAUF,EAAY,EAEhE,OACIjB,EAACU,EAAA,CACG,UAAW,CAAC,CAACU,EAAqBF,CAAK,EACvC,WAAYD,GAAcC,EAAM,KAAK,MAAM,aAC3C,MAAOA,EAAM,MAAM,MACnB,GAAIA,EAAM,KACV,SAAUA,EAAM,aAChB,OAAQA,EAAM,WACd,aAAcE,EAAqBF,CAAK,EACvC,GAAGnB,CAAA,CAAA,CAGhB"}
+{"version":3,"file":"numberfield.js","sources":["../../lib/components/numberfield.tsx"],"sourcesContent":["import {\n    ButtonProps as AriaButtonProps,\n    Input as AriaInput,\n    InputProps as AriaInputProps,\n    NumberField as AriaNumberField,\n    NumberFieldProps as AriaNumberFieldProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FieldGroup, FormField, type FormFieldProps } from './field';\nimport { IcDown, IcUp } from './icons';\n\nconst ANumberField = AriaNumberField;\n\nfunction NumberFieldInput({ className, ...props }: AriaInputProps) {\n    return (\n        <AriaInput\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'w-fit min-w-0 flex-1 border-r border-transparent bg-popover pr-2 outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction NumberFieldSteppers({ className, ...props }: React.ComponentProps<'div'>) {\n    return (\n        <div className={classNames('absolute right-0 flex h-full flex-col border-l', className)} {...props}>\n            <NumberFieldStepper slot=\"increment\">\n                <IcUp aria-hidden className=\"size-icon\" />\n            </NumberFieldStepper>\n            <div className=\"border-b\" />\n            <NumberFieldStepper slot=\"decrement\">\n                <IcDown aria-hidden className=\"size-icon\" />\n            </NumberFieldStepper>\n        </div>\n    );\n}\n\nfunction NumberFieldStepper({ className, ...props }: AriaButtonProps) {\n    return (\n        <Button\n            className={composeRenderProps(className, className =>\n                classNames('w-auto grow h-3 px-0.5 text-muted-foreground', className)\n            )}\n            variant={'ghost'}\n            size={'none'}\n            {...props}\n        />\n    );\n}\n\ntype NumberFieldProps = AriaNumberFieldProps & FormFieldProps;\nexport function NumberField({ label, description, errorMessage, className, ...props }: NumberFieldProps) {\n    return (\n        <ANumberField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <FieldGroup>\n                    <NumberFieldInput />\n                    <NumberFieldSteppers />\n                </FieldGroup>\n            </FormField>\n        </ANumberField>\n    );\n}\n\nexport function TfNumberField({\n    isDisabled,\n    ...props\n}: Omit<React.ComponentProps<typeof NumberField>, 'value' | 'id' | 'onChange' | 'onBlur'>) {\n    const field = useFieldContext<number>({ disabled: isDisabled });\n\n    return (\n        <NumberField\n            isInvalid={!!getFieldErrorMessage(field)}\n            isDisabled={isDisabled || field.form.state.isSubmitting}\n            value={field.state.value}\n            id={field.name}\n            onChange={field.handleChange}\n            onBlur={field.handleBlur}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n"],"names":["ANumberField","AriaNumberField","NumberFieldInput","className","props","jsx","AriaInput","composeRenderProps","classNames","NumberFieldSteppers","jsxs","NumberFieldStepper","IcUp","IcDown","Button","NumberField","label","description","errorMessage","FormField","FieldGroup","TfNumberField","isDisabled","field","useFieldContext","getFieldErrorMessage"],"mappings":"8iBAgBA,MAAMA,EAAeC,EAErB,SAASC,EAAiB,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CAC/D,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,wJACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASK,EAAoB,CAAE,UAAAN,EAAW,GAAGC,GAAsC,CAC/E,OACIM,EAAC,OAAI,UAAWF,EAAW,iDAAkDL,CAAS,EAAI,GAAGC,EACzF,SAAA,CAAAC,EAACM,EAAA,CAAmB,KAAK,YACrB,SAAAN,EAACO,GAAK,cAAW,GAAC,UAAU,WAAA,CAAY,CAAA,CAC5C,EACAP,EAAC,MAAA,CAAI,UAAU,UAAA,CAAW,EAC1BA,EAACM,EAAA,CAAmB,KAAK,YACrB,SAAAN,EAACQ,GAAO,cAAW,GAAC,UAAU,WAAA,CAAY,CAAA,CAC9C,CAAA,EACJ,CAER,CAEA,SAASF,EAAmB,CAAE,UAAAR,EAAW,GAAGC,GAA0B,CAClE,OACIC,EAACS,EAAA,CACG,UAAWP,EAAmBJ,EAAWA,GACrCK,EAAW,+CAAgDL,CAAS,CAAA,EAExE,QAAS,QACT,KAAM,OACL,GAAGC,CAAA,CAAA,CAGhB,CAGO,SAASW,EAAY,CAAE,MAAAC,EAAO,YAAAC,EAAa,aAAAC,EAAc,UAAAf,EAAW,GAAGC,GAA2B,CACrG,OACIC,EAACL,EAAA,CACG,UAAWO,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAH,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,WAACE,EAAA,CACG,SAAA,CAAAf,EAACH,EAAA,EAAiB,IACjBO,EAAA,CAAA,CAAoB,CAAA,CAAA,CACzB,CAAA,CACJ,CAAA,CAAA,CAGZ,CAEO,SAASY,EAAc,CAC1B,WAAAC,EACA,GAAGlB,CACP,EAA2F,CACvF,MAAMmB,EAAQC,EAAwB,CAAE,SAAUF,EAAY,EAE9D,OACIjB,EAACU,EAAA,CACG,UAAW,CAAC,CAACU,EAAqBF,CAAK,EACvC,WAAYD,GAAcC,EAAM,KAAK,MAAM,aAC3C,MAAOA,EAAM,MAAM,MACnB,GAAIA,EAAM,KACV,SAAUA,EAAM,aAChB,OAAQA,EAAM,WACd,aAAcE,EAAqBF,CAAK,EACvC,GAAGnB,CAAA,CAAA,CAGhB"}

package/dist/components/otpfield.js

@@ -1,2 +1,2 @@
-import{jsx as i}from"react/jsx-runtime";import{TextField as r}from"./textfield.js";import"react-aria-components";import"../utilities/form.js";import"react";import"../utilities/form-context.js";import"@tanstack/react-form";import"../utilities/theme.js";import"clsx";import"./field.js";import"class-variance-authority";import"./icons.js";function j({className:m,...t}){return i(r,{inputClassName:"justify-items-center",...t})}export{j as OTPField};
+import{jsx as i}from"react/jsx-runtime";import{TextField as r}from"./textfield.js";import"react-aria-components";import"../utilities/form.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"react";import"../utilities/theme.js";import"clsx";import"./field.js";import"class-variance-authority";import"./icons.js";function j({className:m,...t}){return i(r,{inputClassName:"justify-items-center",...t})}export{j as OTPField};
 //# sourceMappingURL=otpfield.js.map

package/dist/components/select.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as o,jsxs as c,Fragment as u}from"react/jsx-runtime";import{Select as p,composeRenderProps as i,SelectValue as f,ListBox as S}from"react-aria-components";import{Button as h}from"./button.js";import{FormField as g}from"./field.js";import{useTfFieldContext as x,getFieldErrorMessage as B}from"../utilities/form.js";import{classNames as l}from"../utilities/theme.js";import{IcDown as N}from"./icons.js";import{ListBoxItem as w,ListBoxHeader as C,ListBoxCollection as F}from"./list-box.js";import{Popover as L}from"./popover.js";import"class-variance-authority";import"./loader.js";import"clsx";import"react";import"../utilities/form-context.js";import"@tanstack/react-form";const v=p,b=w,Q=C,U=F,I=({className:r,...t})=>o(f,{className:i(r,e=>l("line-clamp-1 data-[placeholder]:text-muted-foreground","[&>[slot=description]]:hidden",e)),...t});function P({className:r,children:t,...e}){return o(h,{...e,children:i(t,n=>c(u,{children:[n,o(N,{"aria-hidden":"true",className:"size-icon opacity-50"})]}))})}function T({className:r,...t}){return o(L,{className:i(r,e=>l("w-auto min-w-[--trigger-width]",e)),...t})}function V({className:r,...t}){return o(S,{className:i(r,e=>l("overflow-auto p-1 outline-none",e)),...t})}function j({label:r,description:t,errorMessage:e,children:n,className:s,items:a,...m}){return o(v,{className:i(s,d=>l("group form-field",d)),...m,children:c(g,{label:r,description:t,errorMessage:e,children:[o(P,{children:o(I,{})}),o(T,{children:o(V,{items:a,children:n})})]})})}function W({...r}){const t=x({disabled:r.isDisabled});return o(j,{selectedKey:t.state.value,onSelectionChange:e=>t.handleChange(e.toString()),onBlur:t.handleBlur,errorMessage:B(t),...r,children:e=>o(b,{id:e.id,children:e.label},e.id)})}export{U as SelectCollection,Q as SelectHeader,b as SelectItem,T as SelectPopover,I as SelectValue,j as SingleSelect,W as TfSingleSelect};
+"use client";import{jsx as o,jsxs as c,Fragment as u}from"react/jsx-runtime";import{Select as p,composeRenderProps as i,SelectValue as f,ListBox as S}from"react-aria-components";import{Button as h}from"./button.js";import{FormField as g}from"./field.js";import{getFieldErrorMessage as x}from"../utilities/form.js";import{useFieldContext as B}from"../utilities/form-context.js";import{classNames as l}from"../utilities/theme.js";import{IcDown as N}from"./icons.js";import{ListBoxItem as w,ListBoxHeader as C,ListBoxCollection as F}from"./list-box.js";import{Popover as L}from"./popover.js";import"class-variance-authority";import"./loader.js";import"clsx";import"react";import"@tanstack/react-form";const v=p,b=w,Q=C,U=F,I=({className:r,...t})=>o(f,{className:i(r,e=>l("line-clamp-1 data-[placeholder]:text-muted-foreground","[&>[slot=description]]:hidden",e)),...t});function P({className:r,children:t,...e}){return o(h,{...e,children:i(t,n=>c(u,{children:[n,o(N,{"aria-hidden":"true",className:"size-icon opacity-50"})]}))})}function V({className:r,...t}){return o(L,{className:i(r,e=>l("w-auto min-w-[--trigger-width]",e)),...t})}function j({className:r,...t}){return o(S,{className:i(r,e=>l("overflow-auto p-1 outline-none",e)),...t})}function y({label:r,description:t,errorMessage:e,children:n,className:s,items:a,...m}){return o(v,{className:i(s,d=>l("group form-field",d)),...m,children:c(g,{label:r,description:t,errorMessage:e,children:[o(P,{children:o(I,{})}),o(V,{children:o(j,{items:a,children:n})})]})})}function W({...r}){const t=B({disabled:r.isDisabled});return o(y,{selectedKey:t.state.value,onSelectionChange:e=>t.handleChange(e.toString()),onBlur:t.handleBlur,errorMessage:x(t),...r,children:e=>o(b,{id:e.id,children:e.label},e.id)})}export{U as SelectCollection,Q as SelectHeader,b as SelectItem,V as SelectPopover,I as SelectValue,y as SingleSelect,W as TfSingleSelect};
 //# sourceMappingURL=select.js.map

package/dist/components/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","sources":["../../lib/components/select.tsx"],"sourcesContent":["'use client';\nimport {\n    ListBox as AriaListBox,\n    ListBoxProps as AriaListBoxProps,\n    PopoverProps as AriaPopoverProps,\n    Select as AriaSelect,\n    SelectProps as AriaSelectProps,\n    SelectValue as AriaSelectValue,\n    SelectValueProps as AriaSelectValueProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { FormField, type FormFieldProps } from '../components/field';\nimport type { SelectOption } from '../components/select-options';\nimport { getFieldErrorMessage, useTfFieldContext } from '../utilities/form';\nimport { classNames } from '../utilities/theme';\nimport { IcDown } from './icons';\nimport { ListBoxCollection, ListBoxHeader, ListBoxItem } from './list-box';\nimport { Popover } from './popover';\n\nconst ASelect = AriaSelect;\nexport const SelectItem = ListBoxItem;\nexport const SelectHeader = ListBoxHeader;\nexport const SelectCollection = ListBoxCollection;\n\nexport const SelectValue = <T extends object>({ className, ...props }: AriaSelectValueProps<T>) => (\n    <AriaSelectValue\n        className={composeRenderProps(className, className =>\n            classNames(\n                'line-clamp-1 data-[placeholder]:text-muted-foreground',\n                /* Description */\n                '[&>[slot=description]]:hidden',\n                className\n            )\n        )}\n        {...props}\n    />\n);\n// TODO, justify-between?\nfunction SelectTrigger({ className, children, ...props }: React.ComponentProps<typeof Button>) {\n    return (\n        <Button {...props}>\n            {composeRenderProps(children, children => (\n                <>\n                    {children}\n                    <IcDown aria-hidden=\"true\" className=\"size-icon opacity-50\" />\n                </>\n            ))}\n        </Button>\n    );\n}\n\nexport function SelectPopover({ className, ...props }: AriaPopoverProps) {\n    return (\n        <Popover\n            className={composeRenderProps(className, className =>\n                classNames('w-auto min-w-[--trigger-width]', className)\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SelectListBox<T extends object>({ className, ...props }: AriaListBoxProps<T>) {\n    return (\n        <AriaListBox\n            className={composeRenderProps(className, className =>\n                classNames('overflow-auto p-1 outline-none', className)\n            )}\n            {...props}\n        />\n    );\n}\n\nexport interface SingleSelectProps<T extends SelectOption>\n    extends Omit<AriaSelectProps<T>, 'children'>,\n        FormFieldProps {\n    items: Iterable<T>;\n    children: React.ReactNode | ((item: T) => React.ReactNode);\n}\n\nexport function SingleSelect<T extends SelectOption>({\n    label,\n    description,\n    errorMessage,\n    children,\n    className,\n    items,\n    ...props\n}: SingleSelectProps<T>) {\n    return (\n        <ASelect\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <SelectTrigger>\n                    <SelectValue />\n                </SelectTrigger>\n                <SelectPopover>\n                    <SelectListBox items={items}>{children}</SelectListBox>\n                </SelectPopover>\n            </FormField>\n        </ASelect>\n    );\n}\n\ntype TfSingleSelectProps<T extends SelectOption> = Omit<SingleSelectProps<T>, 'value' | 'setValue' | 'children'>;\n\nexport function TfSingleSelect<T extends SelectOption>({ ...props }: TfSingleSelectProps<T>) {\n    const field = useTfFieldContext<string>({ disabled: props.isDisabled });\n\n    return (\n        <SingleSelect\n            selectedKey={field.state.value}\n            onSelectionChange={e => field.handleChange(e!.toString())}\n            onBlur={field.handleBlur}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        >\n            {item => (\n                <SelectItem id={item.id} key={item.id}>\n                    {item.label}\n                </SelectItem>\n            )}\n        </SingleSelect>\n    );\n}\n"],"names":["ASelect","AriaSelect","SelectItem","ListBoxItem","SelectHeader","ListBoxHeader","SelectCollection","ListBoxCollection","SelectValue","className","props","jsx","AriaSelectValue","composeRenderProps","classNames","SelectTrigger","children","Button","jsxs","Fragment","IcDown","SelectPopover","Popover","SelectListBox","AriaListBox","SingleSelect","label","description","errorMessage","items","FormField","TfSingleSelect","field","useTfFieldContext","getFieldErrorMessage","item"],"mappings":"urBAqBA,MAAMA,EAAUC,EACHC,EAAaC,EACbC,EAAeC,EACfC,EAAmBC,EAEnBC,EAAc,CAAmB,CAAE,UAAAC,EAAW,GAAGC,KAC1DC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,wDAEA,gCACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CACR,EAGJ,SAASK,EAAc,CAAE,UAAAN,EAAW,SAAAO,EAAU,GAAGN,GAA8C,CAC3F,OACIC,EAACM,GAAQ,GAAGP,EACP,WAAmBM,EAAUA,GAC1BE,EAAAC,EAAA,CACK,SAAA,CAAAH,EACDL,EAACS,EAAA,CAAO,cAAY,OAAO,UAAU,sBAAA,CAAuB,CAAA,CAAA,CAChE,CACH,CAAA,CACL,CAER,CAEO,SAASC,EAAc,CAAE,UAAAZ,EAAW,GAAGC,GAA2B,CACrE,OACIC,EAACW,EAAA,CACG,UAAWT,EAAmBJ,EAAWA,GACrCK,EAAW,iCAAkCL,CAAS,CAAA,EAEzD,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASa,EAAgC,CAAE,UAAAd,EAAW,GAAGC,GAA8B,CACnF,OACIC,EAACa,EAAA,CACG,UAAWX,EAAmBJ,EAAWA,GACrCK,EAAW,iCAAkCL,CAAS,CAAA,EAEzD,GAAGC,CAAA,CAAA,CAGhB,CASO,SAASe,EAAqC,CACjD,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAZ,EACA,UAAAP,EACA,MAAAoB,EACA,GAAGnB,CACP,EAAyB,CACrB,OACIC,EAACX,EAAA,CACG,UAAWa,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,SAAAQ,EAACY,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAA,CAAAjB,EAACI,EAAA,CACG,SAAAJ,EAACH,EAAA,CAAA,CAAY,EACjB,IACCa,EAAA,CACG,SAAAV,EAACY,EAAA,CAAc,MAAAM,EAAe,SAAAb,EAAS,CAAA,CAC3C,CAAA,CAAA,CACJ,CAAA,CAAA,CAGZ,CAIO,SAASe,EAAuC,CAAE,GAAGrB,GAAiC,CACzF,MAAMsB,EAAQC,EAA0B,CAAE,SAAUvB,EAAM,WAAY,EAEtE,OACIC,EAACc,EAAA,CACG,YAAaO,EAAM,MAAM,MACzB,kBAAmB,GAAKA,EAAM,aAAa,EAAG,UAAU,EACxD,OAAQA,EAAM,WACd,aAAcE,EAAqBF,CAAK,EACvC,GAAGtB,EAEH,SAAAyB,KACIjC,EAAA,CAAW,GAAIiC,EAAK,GAChB,SAAAA,EAAK,KAAA,EADoBA,EAAK,EAEnC,CAAA,CAAA,CAIhB"}
+{"version":3,"file":"select.js","sources":["../../lib/components/select.tsx"],"sourcesContent":["'use client';\nimport {\n    ListBox as AriaListBox,\n    ListBoxProps as AriaListBoxProps,\n    PopoverProps as AriaPopoverProps,\n    Select as AriaSelect,\n    SelectProps as AriaSelectProps,\n    SelectValue as AriaSelectValue,\n    SelectValueProps as AriaSelectValueProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { FormField, type FormFieldProps } from '../components/field';\nimport type { SelectOption } from '../components/select-options';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { IcDown } from './icons';\nimport { ListBoxCollection, ListBoxHeader, ListBoxItem } from './list-box';\nimport { Popover } from './popover';\n\nconst ASelect = AriaSelect;\nexport const SelectItem = ListBoxItem;\nexport const SelectHeader = ListBoxHeader;\nexport const SelectCollection = ListBoxCollection;\n\nexport const SelectValue = <T extends object>({ className, ...props }: AriaSelectValueProps<T>) => (\n    <AriaSelectValue\n        className={composeRenderProps(className, className =>\n            classNames(\n                'line-clamp-1 data-[placeholder]:text-muted-foreground',\n                /* Description */\n                '[&>[slot=description]]:hidden',\n                className\n            )\n        )}\n        {...props}\n    />\n);\n// TODO, justify-between?\nfunction SelectTrigger({ className, children, ...props }: React.ComponentProps<typeof Button>) {\n    return (\n        <Button {...props}>\n            {composeRenderProps(children, children => (\n                <>\n                    {children}\n                    <IcDown aria-hidden=\"true\" className=\"size-icon opacity-50\" />\n                </>\n            ))}\n        </Button>\n    );\n}\n\nexport function SelectPopover({ className, ...props }: AriaPopoverProps) {\n    return (\n        <Popover\n            className={composeRenderProps(className, className =>\n                classNames('w-auto min-w-[--trigger-width]', className)\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SelectListBox<T extends object>({ className, ...props }: AriaListBoxProps<T>) {\n    return (\n        <AriaListBox\n            className={composeRenderProps(className, className =>\n                classNames('overflow-auto p-1 outline-none', className)\n            )}\n            {...props}\n        />\n    );\n}\n\nexport interface SingleSelectProps<T extends SelectOption>\n    extends Omit<AriaSelectProps<T>, 'children'>,\n        FormFieldProps {\n    items: Iterable<T>;\n    children: React.ReactNode | ((item: T) => React.ReactNode);\n}\n\nexport function SingleSelect<T extends SelectOption>({\n    label,\n    description,\n    errorMessage,\n    children,\n    className,\n    items,\n    ...props\n}: SingleSelectProps<T>) {\n    return (\n        <ASelect\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} description={description} errorMessage={errorMessage}>\n                <SelectTrigger>\n                    <SelectValue />\n                </SelectTrigger>\n                <SelectPopover>\n                    <SelectListBox items={items}>{children}</SelectListBox>\n                </SelectPopover>\n            </FormField>\n        </ASelect>\n    );\n}\n\ntype TfSingleSelectProps<T extends SelectOption> = Omit<SingleSelectProps<T>, 'value' | 'setValue' | 'children'>;\n\nexport function TfSingleSelect<T extends SelectOption>({ ...props }: TfSingleSelectProps<T>) {\n    const field = useFieldContext<string>({ disabled: props.isDisabled });\n\n    return (\n        <SingleSelect\n            selectedKey={field.state.value}\n            onSelectionChange={e => field.handleChange(e!.toString())}\n            onBlur={field.handleBlur}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        >\n            {item => (\n                <SelectItem id={item.id} key={item.id}>\n                    {item.label}\n                </SelectItem>\n            )}\n        </SingleSelect>\n    );\n}\n"],"names":["ASelect","AriaSelect","SelectItem","ListBoxItem","SelectHeader","ListBoxHeader","SelectCollection","ListBoxCollection","SelectValue","className","props","jsx","AriaSelectValue","composeRenderProps","classNames","SelectTrigger","children","Button","jsxs","Fragment","IcDown","SelectPopover","Popover","SelectListBox","AriaListBox","SingleSelect","label","description","errorMessage","items","FormField","TfSingleSelect","field","useFieldContext","getFieldErrorMessage","item"],"mappings":"0rBAsBA,MAAMA,EAAUC,EACHC,EAAaC,EACbC,EAAeC,EACfC,EAAmBC,EAEnBC,EAAc,CAAmB,CAAE,UAAAC,EAAW,GAAGC,KAC1DC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,wDAEA,gCACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CACR,EAGJ,SAASK,EAAc,CAAE,UAAAN,EAAW,SAAAO,EAAU,GAAGN,GAA8C,CAC3F,OACIC,EAACM,GAAQ,GAAGP,EACP,WAAmBM,EAAUA,GAC1BE,EAAAC,EAAA,CACK,SAAA,CAAAH,EACDL,EAACS,EAAA,CAAO,cAAY,OAAO,UAAU,sBAAA,CAAuB,CAAA,CAAA,CAChE,CACH,CAAA,CACL,CAER,CAEO,SAASC,EAAc,CAAE,UAAAZ,EAAW,GAAGC,GAA2B,CACrE,OACIC,EAACW,EAAA,CACG,UAAWT,EAAmBJ,EAAWA,GACrCK,EAAW,iCAAkCL,CAAS,CAAA,EAEzD,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASa,EAAgC,CAAE,UAAAd,EAAW,GAAGC,GAA8B,CACnF,OACIC,EAACa,EAAA,CACG,UAAWX,EAAmBJ,EAAWA,GACrCK,EAAW,iCAAkCL,CAAS,CAAA,EAEzD,GAAGC,CAAA,CAAA,CAGhB,CASO,SAASe,EAAqC,CACjD,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAZ,EACA,UAAAP,EACA,MAAAoB,EACA,GAAGnB,CACP,EAAyB,CACrB,OACIC,EAACX,EAAA,CACG,UAAWa,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,SAAAQ,EAACY,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAA,CAAAjB,EAACI,EAAA,CACG,SAAAJ,EAACH,EAAA,CAAA,CAAY,EACjB,IACCa,EAAA,CACG,SAAAV,EAACY,EAAA,CAAc,MAAAM,EAAe,SAAAb,EAAS,CAAA,CAC3C,CAAA,CAAA,CACJ,CAAA,CAAA,CAGZ,CAIO,SAASe,EAAuC,CAAE,GAAGrB,GAAiC,CACzF,MAAMsB,EAAQC,EAAwB,CAAE,SAAUvB,EAAM,WAAY,EAEpE,OACIC,EAACc,EAAA,CACG,YAAaO,EAAM,MAAM,MACzB,kBAAmB,GAAKA,EAAM,aAAa,EAAG,UAAU,EACxD,OAAQA,EAAM,WACd,aAAcE,EAAqBF,CAAK,EACvC,GAAGtB,EAEH,SAAAyB,KACIjC,EAAA,CAAW,GAAIiC,EAAK,GAChB,SAAAA,EAAK,KAAA,EADoBA,EAAK,EAEnC,CAAA,CAAA,CAIhB"}

package/dist/components/textfield.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{TextField as f,composeRenderProps as i,TextArea as p,Input as c}from"react-aria-components";import{useTfFieldContext as g,getFieldErrorMessage as l}from"../utilities/form.js";import{classNames as n}from"../utilities/theme.js";import{FormField as b}from"./field.js";import"react";import"../utilities/form-context.js";import"@tanstack/react-form";import"clsx";import"class-variance-authority";import"./icons.js";const x=f;function T({className:r,...o}){return t(c,{className:i(r,e=>n("flex input-dim w-full border border-input bg-popover ring-offset-background file:border-0 file:bg-transparent file:body-sm file:font-medium placeholder:text-muted-foreground","disabled-muted","focus-ring",e)),...o})}function h({className:r,...o}){return t(p,{className:i(r,e=>n("flex min-h-32 w-full border border-input bg-popover px-3 py-2 body-sm ring-offset-background placeholder:text-muted-foreground","focus-ring","disabled-muted",e)),...o})}function F({label:r,description:o,errorMessage:e,textArea:a,className:m,inputClassName:d,...s}){return t(x,{className:i(m,u=>n("group form-field",u)),...s,children:t(b,{label:r,errorMessage:e,description:o,children:a?t(h,{className:d}):t(T,{className:d})})})}function j({isDisabled:r,...o}){const e=g({disabled:r});return t(F,{isDisabled:r||e.form.state.isSubmitting,value:e.state.value,id:e.name,name:e.name,onBlur:e.handleBlur,onChange:e.handleChange,isInvalid:!!l(e),errorMessage:l(e),...o})}export{F as TextField,j as TfTextField};
+import{jsx as t}from"react/jsx-runtime";import{TextField as f,composeRenderProps as i,TextArea as p,Input as c}from"react-aria-components";import{getFieldErrorMessage as l}from"../utilities/form.js";import{useFieldContext as g}from"../utilities/form-context.js";import{classNames as n}from"../utilities/theme.js";import{FormField as b}from"./field.js";import"@tanstack/react-form";import"react";import"clsx";import"class-variance-authority";import"./icons.js";const x=f;function h({className:r,...o}){return t(c,{className:i(r,e=>n("flex input-dim w-full border border-input bg-popover ring-offset-background file:border-0 file:bg-transparent file:body-sm file:font-medium placeholder:text-muted-foreground","disabled-muted","focus-ring",e)),...o})}function F({className:r,...o}){return t(p,{className:i(r,e=>n("flex min-h-32 w-full border border-input bg-popover px-3 py-2 body-sm ring-offset-background placeholder:text-muted-foreground","focus-ring","disabled-muted",e)),...o})}function T({label:r,description:o,errorMessage:e,textArea:m,className:a,inputClassName:d,...s}){return t(x,{className:i(a,u=>n("group form-field",u)),...s,children:t(b,{label:r,errorMessage:e,description:o,children:m?t(F,{className:d}):t(h,{className:d})})})}function j({isDisabled:r,...o}){const e=g({disabled:r});return t(T,{isDisabled:r||e.form.state.isSubmitting,value:e.state.value,id:e.name,name:e.name,onBlur:e.handleBlur,onChange:e.handleChange,isInvalid:!!l(e),errorMessage:l(e),...o})}export{T as TextField,j as TfTextField};
 //# sourceMappingURL=textfield.js.map

package/dist/components/textfield.js.map

@@ -1 +1 @@
-{"version":3,"file":"textfield.js","sources":["../../lib/components/textfield.tsx"],"sourcesContent":["import {\n    Input as AriaInput,\n    InputProps as AriaInputProps,\n    TextArea as AriaTextArea,\n    TextAreaProps as AriaTextAreaProps,\n    TextField as AriaTextField,\n    TextFieldProps as AriaTextFieldProps,\n    composeRenderProps,\n} from 'react-aria-components';\nimport { getFieldErrorMessage, useTfFieldContext } from '../utilities/form';\nimport { classNames } from '../utilities/theme';\nimport { FormField, type FormFieldProps } from './field';\n\nconst ATextField = AriaTextField;\n\nfunction Input({ className, ...props }: AriaInputProps) {\n    return (\n        <AriaInput\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'flex input-dim w-full border border-input bg-popover ring-offset-background file:border-0 file:bg-transparent file:body-sm file:font-medium placeholder:text-muted-foreground',\n                    /* Disabled */\n                    'disabled-muted',\n                    /* Focused */\n                    'focus-ring',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction TextArea({ className, ...props }: AriaTextAreaProps) {\n    return (\n        <AriaTextArea\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'flex min-h-32 w-full border border-input bg-popover px-3 py-2 body-sm ring-offset-background placeholder:text-muted-foreground',\n                    /* Focused */\n                    'focus-ring',\n                    /* Disabled */\n                    'disabled-muted',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nexport interface TextFieldProps extends AriaTextFieldProps, FormFieldProps {\n    textArea?: boolean;\n    inputClassName?: string;\n}\n\nexport function TextField({\n    label,\n    description,\n    errorMessage,\n    textArea,\n    className,\n    inputClassName,\n    ...props\n}: TextFieldProps) {\n    return (\n        <ATextField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} errorMessage={errorMessage} description={description}>\n                {textArea ? <TextArea className={inputClassName} /> : <Input className={inputClassName} />}\n            </FormField>\n        </ATextField>\n    );\n}\n\nexport function TfTextField({ isDisabled, ...props }: React.ComponentProps<typeof TextField>) {\n    const field = useTfFieldContext<string>({ disabled: isDisabled });\n\n    return (\n        <TextField\n            isDisabled={isDisabled || field.form.state.isSubmitting}\n            value={field.state.value}\n            id={field.name}\n            name={field.name}\n            onBlur={field.handleBlur}\n            onChange={field.handleChange}\n            isInvalid={!!getFieldErrorMessage(field)}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n"],"names":["ATextField","AriaTextField","Input","className","props","jsx","AriaInput","composeRenderProps","classNames","TextArea","AriaTextArea","TextField","label","description","errorMessage","textArea","inputClassName","FormField","TfTextField","isDisabled","field","useTfFieldContext","getFieldErrorMessage"],"mappings":"ycAaA,MAAMA,EAAaC,EAEnB,SAASC,EAAM,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CACpD,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,gLAEA,iBAEA,aACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASK,EAAS,CAAE,UAAAN,EAAW,GAAGC,GAA4B,CAC1D,OACIC,EAACK,EAAA,CACG,UAAWH,EAAmBJ,EAAWA,GACrCK,EACI,iIAEA,aAEA,iBACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAOO,SAASO,EAAU,CACtB,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAC,EACA,UAAAZ,EACA,eAAAa,EACA,GAAGZ,CACP,EAAmB,CACf,OACIC,EAACL,EAAA,CACG,UAAWO,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,SAAAC,EAACY,EAAA,CAAU,MAAAL,EAAc,aAAAE,EAA4B,YAAAD,EAChD,SAAAE,EAAWV,EAACI,EAAA,CAAS,UAAWO,EAAgB,EAAKX,EAACH,EAAA,CAAM,UAAWc,EAAgB,CAAA,CAC5F,CAAA,CAAA,CAGZ,CAEO,SAASE,EAAY,CAAE,WAAAC,EAAY,GAAGf,GAAiD,CAC1F,MAAMgB,EAAQC,EAA0B,CAAE,SAAUF,EAAY,EAEhE,OACId,EAACM,EAAA,CACG,WAAYQ,GAAcC,EAAM,KAAK,MAAM,aAC3C,MAAOA,EAAM,MAAM,MACnB,GAAIA,EAAM,KACV,KAAMA,EAAM,KACZ,OAAQA,EAAM,WACd,SAAUA,EAAM,aAChB,UAAW,CAAC,CAACE,EAAqBF,CAAK,EACvC,aAAcE,EAAqBF,CAAK,EACvC,GAAGhB,CAAA,CAAA,CAGhB"}
+{"version":3,"file":"textfield.js","sources":["../../lib/components/textfield.tsx"],"sourcesContent":["import {\n    Input as AriaInput,\n    InputProps as AriaInputProps,\n    TextArea as AriaTextArea,\n    TextAreaProps as AriaTextAreaProps,\n    TextField as AriaTextField,\n    TextFieldProps as AriaTextFieldProps,\n    composeRenderProps,\n} from 'react-aria-components';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FormField, type FormFieldProps } from './field';\n\nconst ATextField = AriaTextField;\n\nfunction Input({ className, ...props }: AriaInputProps) {\n    return (\n        <AriaInput\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'flex input-dim w-full border border-input bg-popover ring-offset-background file:border-0 file:bg-transparent file:body-sm file:font-medium placeholder:text-muted-foreground',\n                    /* Disabled */\n                    'disabled-muted',\n                    /* Focused */\n                    'focus-ring',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction TextArea({ className, ...props }: AriaTextAreaProps) {\n    return (\n        <AriaTextArea\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'flex min-h-32 w-full border border-input bg-popover px-3 py-2 body-sm ring-offset-background placeholder:text-muted-foreground',\n                    /* Focused */\n                    'focus-ring',\n                    /* Disabled */\n                    'disabled-muted',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nexport interface TextFieldProps extends AriaTextFieldProps, FormFieldProps {\n    textArea?: boolean;\n    inputClassName?: string;\n}\n\nexport function TextField({\n    label,\n    description,\n    errorMessage,\n    textArea,\n    className,\n    inputClassName,\n    ...props\n}: TextFieldProps) {\n    return (\n        <ATextField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField label={label} errorMessage={errorMessage} description={description}>\n                {textArea ? <TextArea className={inputClassName} /> : <Input className={inputClassName} />}\n            </FormField>\n        </ATextField>\n    );\n}\n\nexport function TfTextField({ isDisabled, ...props }: React.ComponentProps<typeof TextField>) {\n    const field = useFieldContext<string>({ disabled: isDisabled });\n\n    return (\n        <TextField\n            isDisabled={isDisabled || field.form.state.isSubmitting}\n            value={field.state.value}\n            id={field.name}\n            name={field.name}\n            onBlur={field.handleBlur}\n            onChange={field.handleChange}\n            isInvalid={!!getFieldErrorMessage(field)}\n            errorMessage={getFieldErrorMessage(field)}\n            {...props}\n        />\n    );\n}\n"],"names":["ATextField","AriaTextField","Input","className","props","jsx","AriaInput","composeRenderProps","classNames","TextArea","AriaTextArea","TextField","label","description","errorMessage","textArea","inputClassName","FormField","TfTextField","isDisabled","field","useFieldContext","getFieldErrorMessage"],"mappings":"4cAcA,MAAMA,EAAaC,EAEnB,SAASC,EAAM,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CACpD,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,gLAEA,iBAEA,aACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASK,EAAS,CAAE,UAAAN,EAAW,GAAGC,GAA4B,CAC1D,OACIC,EAACK,EAAA,CACG,UAAWH,EAAmBJ,EAAWA,GACrCK,EACI,iIAEA,aAEA,iBACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAOO,SAASO,EAAU,CACtB,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAC,EACA,UAAAZ,EACA,eAAAa,EACA,GAAGZ,CACP,EAAmB,CACf,OACIC,EAACL,EAAA,CACG,UAAWO,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,SAAAC,EAACY,EAAA,CAAU,MAAAL,EAAc,aAAAE,EAA4B,YAAAD,EAChD,SAAAE,EAAWV,EAACI,EAAA,CAAS,UAAWO,EAAgB,EAAKX,EAACH,EAAA,CAAM,UAAWc,EAAgB,CAAA,CAC5F,CAAA,CAAA,CAGZ,CAEO,SAASE,EAAY,CAAE,WAAAC,EAAY,GAAGf,GAAiD,CAC1F,MAAMgB,EAAQC,EAAwB,CAAE,SAAUF,EAAY,EAE9D,OACId,EAACM,EAAA,CACG,WAAYQ,GAAcC,EAAM,KAAK,MAAM,aAC3C,MAAOA,EAAM,MAAM,MACnB,GAAIA,EAAM,KACV,KAAMA,EAAM,KACZ,OAAQA,EAAM,WACd,SAAUA,EAAM,aAChB,UAAW,CAAC,CAACE,EAAqBF,CAAK,EACvC,aAAcE,EAAqBF,CAAK,EACvC,GAAGhB,CAAA,CAAA,CAGhB"}

package/dist/utilities/form-context.d.ts

@@ -1,4 +1,13 @@
 /**
  * useFieldContext is used in custom components
  */
-export declare const fieldContext: import('react').Context<import('@tanstack/react-form').AnyFieldApi>, formContext: import('react').Context<import('@tanstack/react-form').AnyFormApi>, useFieldContext: <TData>() => import('@tanstack/react-form').FieldApi<any, string, TData, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
+declare const fieldContext: import('react').Context<import('@tanstack/react-form').AnyFieldApi>, formContext: import('react').Context<import('@tanstack/react-form').AnyFormApi>;
+export { fieldContext, formContext };
+/**
+ * Custom hook to handle disabled state for form fields
+ * @param {boolean} disabled - The disabled prop passed to the component
+ * @returns The field context with disabled state properly managed
+ */
+export declare function useFieldContext<T>({ disabled }: {
+    disabled?: boolean;
+}): import('@tanstack/react-form').FieldApi<any, string, T, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;

package/dist/utilities/form-context.js

@@ -1,2 +1,2 @@
-import{createFormHookContexts as o}from"@tanstack/react-form";const{fieldContext:e,formContext:r,useFieldContext:n}=o();export{e as fieldContext,r as formContext,n as useFieldContext};
+import{createFormHookContexts as n}from"@tanstack/react-form";import{useEffect as r}from"react";const{fieldContext:x,formContext:m,useFieldContext:f}=n();function u({disabled:e}){const t=f();return r(()=>{t.setMeta(o=>({...o,disabled:!!e}))},[e,t]),t}export{x as fieldContext,m as formContext,u as useFieldContext};
 //# sourceMappingURL=form-context.js.map

package/dist/utilities/form-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-context.js","sources":["../../lib/utilities/form-context.tsx"],"sourcesContent":["import { createFormHookContexts } from '@tanstack/react-form';\n\n/**\n * useFieldContext is used in custom components\n */\nexport const { fieldContext, formContext, useFieldContext } = createFormHookContexts();\n"],"names":["fieldContext","formContext","useFieldContext","createFormHookContexts"],"mappings":"8DAKO,KAAM,CAAE,aAAAA,EAAc,YAAAC,EAAa,gBAAAC,CAAA,EAAoBC,EAAA"}
+{"version":3,"file":"form-context.js","sources":["../../lib/utilities/form-context.tsx"],"sourcesContent":["import { createFormHookContexts } from '@tanstack/react-form';\nimport { useEffect } from 'react';\n\n/**\n * useFieldContext is used in custom components\n */\nconst { fieldContext, formContext, useFieldContext: _useFieldContext } = createFormHookContexts();\n\nexport { fieldContext, formContext };\n/**\n * Custom hook to handle disabled state for form fields\n * @param {boolean} disabled - The disabled prop passed to the component\n * @returns The field context with disabled state properly managed\n */\nexport function useFieldContext<T>({ disabled }: { disabled?: boolean }) {\n    const field = _useFieldContext<T>();\n\n    useEffect(() => {\n        field.setMeta(meta => ({\n            ...meta,\n            disabled: !!disabled,\n        }));\n    }, [disabled, field]);\n\n    return field;\n}\n"],"names":["fieldContext","formContext","_useFieldContext","createFormHookContexts","useFieldContext","disabled","field","useEffect","meta"],"mappings":"gGAMA,KAAM,CAAE,aAAAA,EAAc,YAAAC,EAAa,gBAAiBC,CAAA,EAAqBC,EAAA,EAQlE,SAASC,EAAmB,CAAE,SAAAC,GAAoC,CACrE,MAAMC,EAAQJ,EAAA,EAEd,OAAAK,EAAU,IAAM,CACZD,EAAM,QAAQE,IAAS,CACnB,GAAGA,EACH,SAAU,CAAC,CAACH,CAAA,EACd,CACN,EAAG,CAACA,EAAUC,CAAK,CAAC,EAEbA,CACX"}

package/dist/utilities/form-hook.js

@@ -1,2 +1,2 @@
-import{createFormHook as o}from"@tanstack/react-form";import{Button as m}from"../components/button.js";import{TfCheckbox as r}from"../components/checkbox.js";import{TfMultiSelect as t}from"../components/multi-select.js";import{TfNumberField as i}from"../components/numberfield.js";import{TfSingleSelect as p}from"../components/select.js";import{TfTextField as e}from"../components/textfield.js";import{formContext as f,fieldContext as n}from"./form-context.js";import"react/jsx-runtime";import"class-variance-authority";import"react-aria-components";import"./theme.js";import"clsx";import"../components/loader.js";import"../components/icons.js";import"react";import"../components/field.js";import"./form.js";import"../components/menu.js";import"../components/list-box.js";import"../components/popover.js";const{useAppForm:q}=o({fieldComponents:{TfTextField:e,TfNumberField:i,TfMultiSelect:t,TfSingleSelect:p,TfCheckbox:r},formComponents:{Button:m},fieldContext:n,formContext:f});export{q as useAppForm};
+import{createFormHook as o}from"@tanstack/react-form";import{Button as m}from"../components/button.js";import{TfCheckbox as r}from"../components/checkbox.js";import{TfMultiSelect as t}from"../components/multi-select.js";import{TfNumberField as i}from"../components/numberfield.js";import{TfSingleSelect as p}from"../components/select.js";import{TfTextField as e}from"../components/textfield.js";import{formContext as f,fieldContext as n}from"./form-context.js";import"react/jsx-runtime";import"class-variance-authority";import"react-aria-components";import"./theme.js";import"clsx";import"../components/loader.js";import"../components/icons.js";import"react";import"../components/field.js";import"../components/menu.js";import"../components/list-box.js";import"./form.js";import"../components/popover.js";const{useAppForm:q}=o({fieldComponents:{TfTextField:e,TfNumberField:i,TfMultiSelect:t,TfSingleSelect:p,TfCheckbox:r},formComponents:{Button:m},fieldContext:n,formContext:f});export{q as useAppForm};
 //# sourceMappingURL=form-hook.js.map

package/dist/utilities/form.d.ts

@@ -1,13 +1,4 @@
 import { FieldApi, FormApi } from '@tanstack/react-form';
-type FieldContextProps = {
-    disabled?: boolean;
-};
-/**
- * Custom hook to handle disabled state for form fields
- * @param {boolean} disabled - The disabled prop passed to the component
- * @returns The field context with disabled state properly managed
- */
-export declare function useTfFieldContext<T>({ disabled }: FieldContextProps): FieldApi<any, string, T, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>;
 /** Utility type to simplify FormApi usage */
 export type AppFormApi<TValues> = FormApi<TValues, any, any, any, any, any, any, any, any, any>;
 /**
@@ -22,4 +13,3 @@ export declare function tfOnSubmit<TValues>(onSubmit: ({ values, formApi }: {
     formApi: AppFormApi<TValues>;
 }) => Promise<any>;
 export declare function getFieldErrorMessage(field: FieldApi<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>): string;
-export {};

package/dist/utilities/form.js

@@ -1,2 +1,2 @@
-import o from"react";import{useFieldContext as r}from"./form-context.js";import"@tanstack/react-form";function l({disabled:e}){const t=r();return o.useEffect(()=>{t.setMeta(n=>({...n,disabled:!!e}))},[e,t]),t}function d(e){return async({formApi:t})=>{const n=i(t.state.values,t);await e({values:n,formApi:t})}}function i(e,t){const n={};for(const s in e)t.getFieldMeta(s)?.disabled||(n[s]=e[s]);return n}function m(e){return e?.state.meta.errors.map(t=>t?.message).join(",")}export{m as getFieldErrorMessage,d as tfOnSubmit,l as useTfFieldContext};
+function i(t){return async({formApi:e})=>{const n=a(e.state.values,e);await t({values:n,formApi:e})}}function a(t,e){const n={};for(const s in t)e.getFieldMeta(s)?.disabled||(n[s]=t[s]);return n}function o(t){return t?.state.meta.errors.map(e=>e?.message).join(",")}export{o as getFieldErrorMessage,i as tfOnSubmit};
 //# sourceMappingURL=form.js.map

package/dist/utilities/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sources":["../../lib/utilities/form.tsx"],"sourcesContent":["import { type AnyFieldMeta, type FieldApi, type FormApi } from '@tanstack/react-form';\nimport React from 'react';\nimport { useFieldContext } from './form-context';\n\ntype FieldContextProps = {\n    disabled?: boolean;\n};\n\n/**\n * Custom hook to handle disabled state for form fields\n * @param {boolean} disabled - The disabled prop passed to the component\n * @returns The field context with disabled state properly managed\n */\nexport function useTfFieldContext<T>({ disabled }: FieldContextProps) {\n    const field = useFieldContext<T>();\n\n    React.useEffect(() => {\n        field.setMeta(meta => ({\n            ...meta,\n            disabled: !!disabled,\n        }));\n    }, [disabled, field]);\n\n    return field;\n}\n\n/** Utility type to simplify FormApi usage */\nexport type AppFormApi<TValues> = FormApi<TValues, any, any, any, any, any, any, any, any, any>;\n\n/**\n * Utility function to submit a form with a handler that receives the values and the formApi.\n * @param onSubmit - The handler function to call with the values and the formApi.\n * @returns A function that can be used to submit the form. It will filter out disabled fields from the values.\n */\nexport function tfOnSubmit<TValues>(\n    onSubmit: ({ values, formApi }: { values: TValues; formApi: AppFormApi<TValues> }) => Promise<any> | any\n) {\n    return async ({ formApi }: { formApi: AppFormApi<TValues> }): Promise<any> => {\n        const values = pickEnabledFields(formApi.state.values, formApi);\n\n        await onSubmit({ values, formApi });\n    };\n}\nfunction pickEnabledFields<TValues>(rawValues: TValues, formApi: AppFormApi<TValues>): TValues {\n    const result: TValues = {} as TValues;\n\n    //TODO: Nested objects are not supported yet\n    for (const key in rawValues) {\n        const meta = formApi.getFieldMeta(key) as AnyFieldMeta & {\n            disabled?: boolean;\n        };\n        if (!meta?.disabled) {\n            result[key] = rawValues[key];\n        }\n    }\n\n    return result;\n}\n\nexport function getFieldErrorMessage(\n    field: FieldApi<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>\n): string {\n    return field?.state.meta.errors.map(e => e?.message).join(',');\n}\n"],"names":["useTfFieldContext","disabled","field","useFieldContext","React","meta","tfOnSubmit","onSubmit","formApi","values","pickEnabledFields","rawValues","result","key","getFieldErrorMessage","e"],"mappings":"sGAaO,SAASA,EAAqB,CAAE,SAAAC,GAA+B,CAClE,MAAMC,EAAQC,EAAA,EAEd,OAAAC,EAAM,UAAU,IAAM,CAClBF,EAAM,QAAQG,IAAS,CACnB,GAAGA,EACH,SAAU,CAAC,CAACJ,CAAA,EACd,CACN,EAAG,CAACA,EAAUC,CAAK,CAAC,EAEbA,CACX,CAUO,SAASI,EACZC,EACF,CACE,MAAO,OAAO,CAAE,QAAAC,KAA8D,CAC1E,MAAMC,EAASC,EAAkBF,EAAQ,MAAM,OAAQA,CAAO,EAE9D,MAAMD,EAAS,CAAE,OAAAE,EAAQ,QAAAD,EAAS,CACtC,CACJ,CACA,SAASE,EAA2BC,EAAoBH,EAAuC,CAC3F,MAAMI,EAAkB,CAAA,EAGxB,UAAWC,KAAOF,EACDH,EAAQ,aAAaK,CAAG,GAG1B,WACPD,EAAOC,CAAG,EAAIF,EAAUE,CAAG,GAInC,OAAOD,CACX,CAEO,SAASE,EACZZ,EACM,CACN,OAAOA,GAAO,MAAM,KAAK,OAAO,OAASa,GAAG,OAAO,EAAE,KAAK,GAAG,CACjE"}
+{"version":3,"file":"form.js","sources":["../../lib/utilities/form.tsx"],"sourcesContent":["import { type AnyFieldMeta, type FieldApi, type FormApi } from '@tanstack/react-form';\n\n/** Utility type to simplify FormApi usage */\nexport type AppFormApi<TValues> = FormApi<TValues, any, any, any, any, any, any, any, any, any>;\n\n/**\n * Utility function to submit a form with a handler that receives the values and the formApi.\n * @param onSubmit - The handler function to call with the values and the formApi.\n * @returns A function that can be used to submit the form. It will filter out disabled fields from the values.\n */\nexport function tfOnSubmit<TValues>(\n    onSubmit: ({ values, formApi }: { values: TValues; formApi: AppFormApi<TValues> }) => Promise<any> | any\n) {\n    return async ({ formApi }: { formApi: AppFormApi<TValues> }): Promise<any> => {\n        const values = pickEnabledFields(formApi.state.values, formApi);\n\n        await onSubmit({ values, formApi });\n    };\n}\nfunction pickEnabledFields<TValues>(rawValues: TValues, formApi: AppFormApi<TValues>): TValues {\n    const result: TValues = {} as TValues;\n\n    //TODO: Nested objects are not supported yet\n    for (const key in rawValues) {\n        const meta = formApi.getFieldMeta(key) as AnyFieldMeta & {\n            disabled?: boolean;\n        };\n        if (!meta?.disabled) {\n            result[key] = rawValues[key];\n        }\n    }\n\n    return result;\n}\n\nexport function getFieldErrorMessage(\n    field: FieldApi<any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any, any>\n): string {\n    return field?.state.meta.errors.map(e => e?.message).join(',');\n}\n"],"names":["tfOnSubmit","onSubmit","formApi","values","pickEnabledFields","rawValues","result","key","getFieldErrorMessage","field"],"mappings":"AAUO,SAASA,EACZC,EACF,CACE,MAAO,OAAO,CAAE,QAAAC,KAA8D,CAC1E,MAAMC,EAASC,EAAkBF,EAAQ,MAAM,OAAQA,CAAO,EAE9D,MAAMD,EAAS,CAAE,OAAAE,EAAQ,QAAAD,EAAS,CACtC,CACJ,CACA,SAASE,EAA2BC,EAAoBH,EAAuC,CAC3F,MAAMI,EAAkB,CAAA,EAGxB,UAAWC,KAAOF,EACDH,EAAQ,aAAaK,CAAG,GAG1B,WACPD,EAAOC,CAAG,EAAIF,EAAUE,CAAG,GAInC,OAAOD,CACX,CAEO,SAASE,EACZC,EACM,CACN,OAAOA,GAAO,MAAM,KAAK,OAAO,OAAS,GAAG,OAAO,EAAE,KAAK,GAAG,CACjE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cryptlex/web-components",
-  "version": "6.6.6-alpha09",
+  "version": "6.6.6-alpha11",
   "description": "React component library for Cryptlex web applications",
   "author": "Cryptlex",
   "type": "module",
@@ -45,7 +45,7 @@
     "*.{ts,tsx,css,scss,json}": "prettier --write"
   },
   "peerDependencies": {
-    "@cryptlex/web-api-types": "2.0.0",
+    "@cryptlex/web-api-types": "2.1.0",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",