@cryptlex/web-components 6.6.120 → 6.7.0

package/dist/components/date-picker.js

@@ -1,2 +1,2 @@
-"use client";import{jsxs as o,jsx as e}from"react/jsx-runtime";import{DatePicker as D,composeRenderProps as c,DateRangePicker as b,Popover as v,Dialog as N}from"react-aria-components";import{parseAbsolute as P,getLocalTimeZone as k}from"@internationalized/date";import{Button as u}from"./button.js";import{Calendar as C,RangeCalendar as R}from"./calendar.js";import{DateInput as m}from"./datefield.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{FormField as p,FieldGroup as f}from"./form.js";import{IcDate as g}from"./icons.js";import"class-variance-authority";import"./loader.js";import"clsx";import"@icons-pack/react-simple-icons";import"react";import"./card.js";import"@tanstack/react-form";const h=({className:a,popoverClassName:r,...i})=>e(v,{className:c(r,t=>n("w-auto p-3 bg-elevation-1 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),...i})});function I({label:a,description:r,errorMessage:i,requiredIndicator:t,className:l,...s}){return o(D,{className:c(l,x=>n("group flex flex-col gap-2",x)),...s,children:[e(p,{label:a,description:r,errorMessage:i,requiredIndicator:t,children:o(f,{children:[e(m,{className:"flex-1",variant:"ghost"}),e(u,{variant:"ghost",size:"icon",className:"-me-3 ms-2",children:e(g,{"aria-hidden":!0})})]})}),e(h,{children:e(C,{})})]})}function O({...a}){const r=F({disabled:a.isDisabled});return e(I,{requiredIndicator:r.isRequired,hideTimeZone:!0,isDisabled:a.isDisabled||r.isSubmitting,value:r.state.value?P(r.state.value,k()):null,onChange:i=>i?r.handleChange(i.toAbsoluteString()):r.handleChange(null),onBlur:r.handleBlur,isInvalid:!!d(r),errorMessage:d(r),...a})}function Q({label:a,description:r,errorMessage:i,className:t,...l}){return o(b,{className:c(t,s=>n("group flex flex-col gap-2",s)),...l,children:[e(p,{label:a,errorMessage:i,description:r,children:o(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(u,{variant:"ghost",size:"icon",className:"mr-1 data-[focus-visible]:ring-offset-0",children:e(g,{"aria-hidden":!0})})]})}),e(h,{children:e(R,{})})]})}export{I as DatePicker,Q as DateRangePicker,O as TfDatePicker};
+"use client";import{jsxs as o,jsx as e}from"react/jsx-runtime";import{DatePicker as D,composeRenderProps as c,DateRangePicker as b,Popover as v,Dialog as N}from"react-aria-components";import{parseAbsolute as P,getLocalTimeZone as k}from"@internationalized/date";import{Button as u}from"./button.js";import{Calendar as C,RangeCalendar as R}from"./calendar.js";import{DateInput as m}from"./datefield.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{FormField as p,FieldGroup as f}from"./form.js";import{IcDate as g}from"./icons.js";import"class-variance-authority";import"./loader.js";import"clsx";import"@icons-pack/react-simple-icons";import"react";import"./card.js";import"@tanstack/react-form";const h=({className:a,popoverClassName:r,...i})=>e(v,{className:c(r,t=>n("w-auto p-3 bg-surface-primary 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),...i})});function y({label:a,description:r,errorMessage:i,requiredIndicator:t,className:l,...s}){return o(D,{className:c(l,x=>n("group flex flex-col gap-2",x)),...s,children:[e(p,{label:a,description:r,errorMessage:i,requiredIndicator:t,children:o(f,{children:[e(m,{className:"flex-1",variant:"ghost"}),e(u,{variant:"ghost",size:"icon",className:"-me-3 ms-2",children:e(g,{"aria-hidden":!0})})]})}),e(h,{children:e(C,{})})]})}function O({...a}){const r=F({disabled:a.isDisabled});return e(y,{requiredIndicator:r.isRequired,hideTimeZone:!0,isDisabled:a.isDisabled||r.isSubmitting,value:r.state.value?P(r.state.value,k()):null,onChange:i=>i?r.handleChange(i.toAbsoluteString()):r.handleChange(null),onBlur:r.handleBlur,isInvalid:!!d(r),errorMessage:d(r),...a})}function Q({label:a,description:r,errorMessage:i,className:t,...l}){return o(b,{className:c(t,s=>n("group flex flex-col gap-2",s)),...l,children:[e(p,{label:a,errorMessage:i,description:r,children:o(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(u,{variant:"ghost",size:"icon",className:"mr-1 data-[focus-visible]:ring-offset-0",children:e(g,{"aria-hidden":!0})})]})}),e(h,{children:e(R,{})})]})}export{y as DatePicker,Q as DateRangePicker,O 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":["'use client';\nimport {\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 { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FieldGroup, FormField, type FormFieldProps } from './form';\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-elevation-1 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    requiredIndicator,\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, description, errorMessage, requiredIndicator }}>\n                <FieldGroup>\n                    <DateInput className=\"flex-1\" variant=\"ghost\" />\n                    <Button variant=\"ghost\" size=\"icon\" className={'-me-3 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            requiredIndicator={field.isRequired}\n            hideTimeZone\n            isDisabled={props.isDisabled || field.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","requiredIndicator","jsxs","AriaDatePicker","FormField","FieldGroup","DateInput","Button","IcDate","Calendar","TfDatePicker","field","useFieldContext","parseAbsolute","getLocalTimeZone","v","getFieldErrorMessage","DateRangePicker","AriaDateRangePicker","RangeCalendar"],"mappings":"g0BA8BA,MAAMA,EAAoB,CAAC,CACvB,UAAAC,EACA,iBAAAC,EACA,GAAGC,CACP,IACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAkBD,GAC5CM,EAAW,mCAAoCN,CAAS,CAAA,EAG5D,SAAAG,EAACI,EAAA,CACG,UAAWD,EACP,iFACAN,CAAA,EAEH,GAAGE,CAAA,CAAA,CACR,CACJ,EAqBG,SAASM,EAAoC,CAChD,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,UAAAZ,EACA,GAAGE,CACP,EAAuB,CACnB,OACIW,EAACC,EAAA,CACG,UAAWT,EAAmBL,EAAWA,GAAaM,EAAW,4BAA6BN,CAAS,CAAC,EACvG,GAAGE,EAEJ,SAAA,CAAAC,EAACY,EAAA,CAAgB,MAAAN,EAAO,YAAAC,EAAa,aAAAC,EAAc,kBAAAC,EAC/C,SAAAC,EAACG,EAAA,CACG,SAAA,CAAAb,EAACc,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,EAC9Cd,EAACe,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAW,aAC3C,SAAAf,EAACgB,EAAA,CAAO,cAAW,EAAA,CAAC,CAAA,CACxB,CAAA,CAAA,CACJ,CAAA,CACJ,EACAhB,EAACJ,EAAA,CACG,SAAAI,EAACiB,EAAA,CAAA,CAAS,CAAA,CACd,CAAA,CAAA,CAAA,CAGZ,CASO,SAASC,EAAa,CACzB,GAAGnB,CACP,EAAyG,CACrG,MAAMoB,EAAQC,EAA+B,CAAE,SAAUrB,EAAM,WAAY,EAC3E,OACIC,EAACK,EAAA,CACG,kBAAmBc,EAAM,WACzB,aAAY,GACZ,WAAYpB,EAAM,YAAcoB,EAAM,aACtC,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,GAAGpB,CAAA,CAAA,CAGhB,CAqBO,SAAS0B,EAAyC,CACrD,MAAAnB,EACA,YAAAC,EACA,aAAAC,EACA,UAAAX,EACA,GAAGE,CACP,EAA4B,CACxB,OACIW,EAACgB,EAAA,CACG,UAAWxB,EAAmBL,EAAWA,GAAaM,EAAW,4BAA6BN,CAAS,CAAC,EACvG,GAAGE,EAEJ,SAAA,CAAAC,EAACY,EAAA,CAAU,MAAAN,EAAc,aAAAE,EAA4B,YAAAD,EACjD,WAACM,EAAA,CACG,SAAA,CAAAb,EAACc,EAAA,CAAU,QAAQ,QAAQ,KAAM,QAAS,IACzC,OAAA,CAAK,cAAW,GAAC,UAAU,qCAAqC,SAAA,IAEjE,IACCA,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,KAAM,MAAO,EAC3Dd,EAACe,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAU,0CAC1C,SAAAf,EAACgB,EAAA,CAAO,cAAW,EAAA,CAAC,CAAA,CACxB,CAAA,CAAA,CACJ,CAAA,CACJ,EACAhB,EAACJ,EAAA,CACG,SAAAI,EAAC2B,EAAA,CAAA,CAAc,CAAA,CACnB,CAAA,CAAA,CAAA,CAGZ"}
+{"version":3,"file":"date-picker.js","sources":["../../lib/components/date-picker.tsx"],"sourcesContent":["'use client';\nimport {\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 { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FieldGroup, FormField, type FormFieldProps } from './form';\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-surface-primary 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    requiredIndicator,\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, description, errorMessage, requiredIndicator }}>\n                <FieldGroup>\n                    <DateInput className=\"flex-1\" variant=\"ghost\" />\n                    <Button variant=\"ghost\" size=\"icon\" className={'-me-3 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            requiredIndicator={field.isRequired}\n            hideTimeZone\n            isDisabled={props.isDisabled || field.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","requiredIndicator","jsxs","AriaDatePicker","FormField","FieldGroup","DateInput","Button","IcDate","Calendar","TfDatePicker","field","useFieldContext","parseAbsolute","getLocalTimeZone","v","getFieldErrorMessage","DateRangePicker","AriaDateRangePicker","RangeCalendar"],"mappings":"g0BA8BA,MAAMA,EAAoB,CAAC,CACvB,UAAAC,EACA,iBAAAC,EACA,GAAGC,CACP,IACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAkBD,GAC5CM,EAAW,uCAAwCN,CAAS,CAAA,EAGhE,SAAAG,EAACI,EAAA,CACG,UAAWD,EACP,iFACAN,CAAA,EAEH,GAAGE,CAAA,CAAA,CACR,CACJ,EAqBG,SAASM,EAAoC,CAChD,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,UAAAZ,EACA,GAAGE,CACP,EAAuB,CACnB,OACIW,EAACC,EAAA,CACG,UAAWT,EAAmBL,EAAWA,GAAaM,EAAW,4BAA6BN,CAAS,CAAC,EACvG,GAAGE,EAEJ,SAAA,CAAAC,EAACY,EAAA,CAAgB,MAAAN,EAAO,YAAAC,EAAa,aAAAC,EAAc,kBAAAC,EAC/C,SAAAC,EAACG,EAAA,CACG,SAAA,CAAAb,EAACc,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,EAC9Cd,EAACe,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAW,aAC3C,SAAAf,EAACgB,EAAA,CAAO,cAAW,EAAA,CAAC,CAAA,CACxB,CAAA,CAAA,CACJ,CAAA,CACJ,EACAhB,EAACJ,EAAA,CACG,SAAAI,EAACiB,EAAA,CAAA,CAAS,CAAA,CACd,CAAA,CAAA,CAAA,CAGZ,CASO,SAASC,EAAa,CACzB,GAAGnB,CACP,EAAyG,CACrG,MAAMoB,EAAQC,EAA+B,CAAE,SAAUrB,EAAM,WAAY,EAC3E,OACIC,EAACK,EAAA,CACG,kBAAmBc,EAAM,WACzB,aAAY,GACZ,WAAYpB,EAAM,YAAcoB,EAAM,aACtC,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,GAAGpB,CAAA,CAAA,CAGhB,CAqBO,SAAS0B,EAAyC,CACrD,MAAAnB,EACA,YAAAC,EACA,aAAAC,EACA,UAAAX,EACA,GAAGE,CACP,EAA4B,CACxB,OACIW,EAACgB,EAAA,CACG,UAAWxB,EAAmBL,EAAWA,GAAaM,EAAW,4BAA6BN,CAAS,CAAC,EACvG,GAAGE,EAEJ,SAAA,CAAAC,EAACY,EAAA,CAAU,MAAAN,EAAc,aAAAE,EAA4B,YAAAD,EACjD,WAACM,EAAA,CACG,SAAA,CAAAb,EAACc,EAAA,CAAU,QAAQ,QAAQ,KAAM,QAAS,IACzC,OAAA,CAAK,cAAW,GAAC,UAAU,qCAAqC,SAAA,IAEjE,IACCA,EAAA,CAAU,UAAU,SAAS,QAAQ,QAAQ,KAAM,MAAO,EAC3Dd,EAACe,EAAA,CAAO,QAAQ,QAAQ,KAAK,OAAO,UAAU,0CAC1C,SAAAf,EAACgB,EAAA,CAAO,cAAW,EAAA,CAAC,CAAA,CACxB,CAAA,CAAA,CACJ,CAAA,CACJ,EACAhB,EAACJ,EAAA,CACG,SAAAI,EAAC2B,EAAA,CAAA,CAAc,CAAA,CACnB,CAAA,CAAA,CAAA,CAGZ"}

package/dist/components/dialog.js

@@ -1,2 +1,2 @@
-"use client";import{jsxs as l,jsx as i,Fragment as v}from"react/jsx-runtime";import{cva as D}from"class-variance-authority";import{createContext as h,useState as x,useContext as d}from"react";import{DialogTrigger as w,Modal as y,Dialog as C,composeRenderProps as f,ModalOverlay as N,Heading as z}from"react-aria-components";import{Button as P}from"./button.js";import{classNames as n}from"../utilities/theme.js";import{useIsMobile as p}from"../utilities/use-mobile.js";import{IcClose as M}from"./icons.js";import"./loader.js";import"clsx";import"@icons-pack/react-simple-icons";const O=D(["fixed z-50 gap-icon bg-surface-secondary border-stroke-primary transition ease-in-out","data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200  data-[exiting]:animate-out data-[exiting]:fade-out-0"],{variants:{side:{top:"inset-x-0 top-0 overflow-hidden border-b rounded-b-lg data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table",bottom:"inset-x-0 bottom-0 overflow-hidden rounded-t-lg data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-[80dvh]",left:"inset-y-0 left-0 h-full w-3/4 overflow-hidden border-r rounded-r-lg data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm",right:"inset-y-0 right-0 h-full w-3/4 overflow-hidden border-l rounded-l-lg data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm"}}}),k=w,T=({className:e,isDismissable:o=!0,...t})=>i(N,{isDismissable:o,className:f(e,a=>n("fixed inset-0 z-50 bg-background-overlay","data-[exiting]:duration-100 data-[exiting]:animate-out","data-[entering]:animate-in",a)),...t}),s=h(void 0);function j({className:e,children:o,side:t,role:a,closeButton:g=!0,...c}){const u=p();return t=t??(u?"bottom":void 0),i(s.Provider,{value:t,children:i(y,{className:f(e,r=>n(t?O({side:t}):["fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-hidden border rounded-lg bg-elevation-mid duration-100 data-[exiting]:duration-100 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 md:w-full"],r)),...c,children:i(C,{role:a,className:n(!t&&"grid h-full gap-icon relative","h-full outline-none"),children:f(o,(r,m)=>l(v,{children:[r,g&&i("div",{className:"absolute right-2 top-6 md:top-3",children:l(P,{variant:"ghost",onPress:m.close,className:"!rounded-full",children:[i(M,{className:"size-6"}),i("span",{className:"sr-only",children:"Close"})]})})]}))})})})}function G({className:e,...o}){const t=d(s);return l("div",{className:n("flex flex-col p-icon border-b rounded-t-3xl gap-y-2 text-left",t?"bg-surface-secondary":"bg-elevation-mid",e),...o,children:[i("div",{className:"md:hidden mx-auto h-1 w-9 shrink-0 rounded-full bg-neutral-200"}),o.children]})}function J({className:e,...o}){const t=d(s);return i("div",{className:n("flex flex-row justify-end gap-2 p-icon border-t *:flex-1 sm:*:flex-none",t&&"bg-surface-secondary",e),...o})}function K({className:e,...o}){const t=d(s);return i("div",{className:n("flex flex-col gap-2 p-icon max-h-[60dvh] overflow-auto",t&&"bg-surface-secondary",e),...o})}function L({className:e,...o}){return i(z,{slot:"title",className:n("heading-4 font-semibold leading-none tracking-tight text-text-primary",e),...o})}function Q({className:e,...o}){return i("p",{className:n("flex flex-col gap-y-1 text-center sm:text-left",e),...o})}const b=h(null);function U({children:e}){const[o,t]=x(!1),[a,g]=x(null),c=m=>{g(m),t(!0)},u=()=>{t(!1)},r=p();return l(b.Provider,{value:{openDialog:c,closeDialog:u,isOpen:o},children:[e,i(k,{isOpen:o,onOpenChange:t,children:i(T,{isDismissable:!0,children:i(j,{side:r?"bottom":void 0,children:a})})})]})}function W(){const e=d(b);if(!e)throw new Error("useControlledDialog must be used within ControlledDialogProvider");return e}export{U as ControlledDialogProvider,K as DialogBody,j as DialogContent,Q as DialogDescription,J as DialogFooter,G as DialogHeader,T as DialogOverlay,L as DialogTitle,k as DialogTrigger,W as useControlledDialog};
+"use client";import{jsxs as l,jsx as i,Fragment as v}from"react/jsx-runtime";import{cva as D}from"class-variance-authority";import{createContext as h,useState as x,useContext as d}from"react";import{DialogTrigger as y,Modal as w,Dialog as C,composeRenderProps as f,ModalOverlay as N,Heading as z}from"react-aria-components";import{Button as P}from"./button.js";import{classNames as n}from"../utilities/theme.js";import{useIsMobile as p}from"../utilities/use-mobile.js";import{IcClose as k}from"./icons.js";import"./loader.js";import"clsx";import"@icons-pack/react-simple-icons";const M=D(["fixed z-50 gap-icon bg-surface-secondary border-stroke-primary transition ease-in-out","data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200  data-[exiting]:animate-out data-[exiting]:fade-out-0"],{variants:{side:{top:"inset-x-0 top-0 overflow-hidden border-b rounded-b-lg data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table",bottom:"inset-x-0 bottom-0 overflow-hidden rounded-t-lg data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-[80dvh]",left:"inset-y-0 left-0 h-full w-3/4 overflow-hidden border-r rounded-r-lg data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm",right:"inset-y-0 right-0 h-full w-3/4 overflow-hidden border-l rounded-l-lg data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm"}}}),O=y,T=({className:e,isDismissable:o=!0,...t})=>i(N,{isDismissable:o,className:f(e,a=>n("fixed inset-0 z-50 bg-background-overlay","data-[exiting]:duration-100 data-[exiting]:animate-out","data-[entering]:animate-in",a)),...t}),s=h(void 0);function j({className:e,children:o,side:t,role:a,closeButton:g=!0,...c}){const u=p();return t=t??(u?"bottom":void 0),i(s.Provider,{value:t,children:i(w,{className:f(e,r=>n(t?M({side:t}):["fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-hidden border rounded-lg bg-surface-tertiary duration-100 data-[exiting]:duration-100 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 md:w-full"],r)),...c,children:i(C,{role:a,className:n(!t&&"grid h-full gap-icon relative","h-full outline-none"),children:f(o,(r,m)=>l(v,{children:[r,g&&i("div",{className:"absolute right-2 top-6 md:top-3",children:l(P,{variant:"ghost",onPress:m.close,className:"!rounded-full",children:[i(k,{className:"size-6"}),i("span",{className:"sr-only",children:"Close"})]})})]}))})})})}function G({className:e,...o}){const t=d(s);return l("div",{className:n("flex flex-col p-icon border-b rounded-t-3xl gap-y-2 text-left",t?"bg-surface-secondary":"bg-surface-tertiary",e),...o,children:[i("div",{className:"md:hidden mx-auto h-1 w-9 shrink-0 rounded-full bg-stroke-primary"}),o.children]})}function J({className:e,...o}){const t=d(s);return i("div",{className:n("flex flex-row justify-end gap-2 p-icon border-t *:flex-1 sm:*:flex-none",t&&"bg-surface-secondary",e),...o})}function K({className:e,...o}){const t=d(s);return i("div",{className:n("flex flex-col gap-2 p-icon max-h-[60dvh] overflow-auto",t&&"bg-surface-secondary",e),...o})}function L({className:e,...o}){return i(z,{slot:"title",className:n("heading-4 font-semibold leading-none tracking-tight text-text-primary",e),...o})}function Q({className:e,...o}){return i("p",{className:n("flex flex-col gap-y-1 text-center sm:text-left",e),...o})}const b=h(null);function U({children:e}){const[o,t]=x(!1),[a,g]=x(null),c=m=>{g(m),t(!0)},u=()=>{t(!1)},r=p();return l(b.Provider,{value:{openDialog:c,closeDialog:u,isOpen:o},children:[e,i(O,{isOpen:o,onOpenChange:t,children:i(T,{isDismissable:!0,children:i(j,{side:r?"bottom":void 0,children:a})})})]})}function W(){const e=d(b);if(!e)throw new Error("useControlledDialog must be used within ControlledDialogProvider");return e}export{U as ControlledDialogProvider,K as DialogBody,j as DialogContent,Q as DialogDescription,J as DialogFooter,G as DialogHeader,T as DialogOverlay,L as DialogTitle,O as DialogTrigger,W as useControlledDialog};
 //# sourceMappingURL=dialog.js.map

package/dist/components/dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.js","sources":["../../lib/components/dialog.tsx"],"sourcesContent":["'use client';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useState } from 'react';\nimport {\n    Dialog as AriaDialog,\n    DialogProps as AriaDialogProps,\n    DialogTrigger as AriaDialogTrigger,\n    Heading as AriaHeading,\n    HeadingProps as AriaHeadingProps,\n    Modal as AriaModal,\n    ModalOverlay as AriaModalOverlay,\n    ModalOverlayProps as AriaModalOverlayProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { classNames } from '../utilities/theme';\nimport { useIsMobile } from '../utilities/use-mobile';\nimport { IcClose } from './icons';\n\n/**\n * Visual variants for the sheet-style dialog (slide in from an edge).\n *\n * @remarks\n * Internally used to style `<DialogContent side=\"...\">`.\n */\nconst sheetVariants = cva(\n    [\n        'fixed z-50 gap-icon bg-surface-secondary border-stroke-primary transition ease-in-out',\n        'data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200  data-[exiting]:animate-out data-[exiting]:fade-out-0',\n    ],\n    {\n        variants: {\n            side: {\n                top: 'inset-x-0 top-0 overflow-hidden border-b rounded-b-lg data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table',\n                bottom: 'inset-x-0 bottom-0 overflow-hidden rounded-t-lg data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-[80dvh]',\n                left: 'inset-y-0 left-0 h-full w-3/4 overflow-hidden border-r rounded-r-lg data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm',\n                right: 'inset-y-0 right-0 h-full w-3/4 overflow-hidden border-l rounded-l-lg data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm',\n            },\n        },\n    }\n);\n\n/**\n * Opens the dialog when interacted with (click/press).\n *\n * @remarks\n * Compose this around any control that should open the dialog.\n *\n * @example\n * ```tsx\n * <DialogTrigger>\n *   <Button>Open</Button>\n *   <DialogOverlay>\n *     <DialogContent>...</DialogContent>\n *   </DialogOverlay>\n * </DialogTrigger>\n * ```\n */\nexport const DialogTrigger = AriaDialogTrigger;\n\nexport const DialogOverlay = ({ className, isDismissable = true, ...props }: AriaModalOverlayProps) => {\n    return (\n        <AriaModalOverlay\n            isDismissable={isDismissable}\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'fixed inset-0 z-50 bg-background-overlay',\n                    /* Exiting */\n                    'data-[exiting]:duration-100 data-[exiting]:animate-out',\n                    /* Entering */\n                    'data-[entering]:animate-in',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n};\n\n/** Props for {@link DialogContent}. */\nexport interface DialogContentProps\n    extends Omit<React.ComponentProps<typeof AriaModal>, 'children'>,\n        VariantProps<typeof sheetVariants> {\n    /**\n     * Render function or nodes for the dialog panel contents.\n     */\n    children?: AriaDialogProps['children'];\n\n    /**\n     * ARIA role of the dialog.\n     *\n     * Use `\"alertdialog\"` for destructive/confirmation flows that require\n     * explicit acknowledgement.\n     * @defaultValue \"dialog\"\n     */\n    role?: AriaDialogProps['role'];\n\n    /**\n     * Show a built-in close button in the top-right corner.\n     * @defaultValue true\n     */\n    closeButton?: boolean;\n}\n\n/**\n * Dialog panel container. Renders either a centered modal or a sheet\n * from an edge when `side` is provided.\n *\n * @example Basic\n * ```tsx\n * <DialogTrigger>\n *   <Button>Open</Button>\n *   <DialogOverlay>\n *     <DialogContent>\n *       <DialogHeader>\n *         <DialogTitle>Sign up</DialogTitle>\n *       </DialogHeader>\n *       ...\n *     </DialogContent>\n *   </DialogOverlay>\n * </DialogTrigger>\n * ```\n */\nconst DialogSideContext = createContext<DialogContentProps['side']>(undefined);\n\nexport function DialogContent({ className, children, side, role, closeButton = true, ...props }: DialogContentProps) {\n    const isMobile = useIsMobile();\n    side = side ?? (isMobile ? 'bottom' : undefined);\n    return (\n        <DialogSideContext.Provider value={side}>\n            <AriaModal\n                className={composeRenderProps(className, className =>\n                    classNames(\n                        side\n                            ? sheetVariants({ side })\n                            : [\n                                  'fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-hidden border rounded-lg bg-elevation-mid duration-100 data-[exiting]:duration-100 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 md:w-full',\n                              ],\n                        className\n                    )\n                )}\n                {...props}\n            >\n                <AriaDialog\n                    role={role}\n                    className={classNames(!side && 'grid h-full gap-icon relative', 'h-full outline-none')}\n                >\n                    {composeRenderProps(children, (children, renderProps) => (\n                        <>\n                            {children}\n                            {closeButton && (\n                                <div className=\"absolute right-2 top-6 md:top-3\">\n                                    <Button variant={'ghost'} onPress={renderProps.close} className=\"!rounded-full\">\n                                        <IcClose className=\"size-6\" />\n                                        <span className=\"sr-only\">Close</span>\n                                    </Button>\n                                </div>\n                            )}\n                        </>\n                    ))}\n                </AriaDialog>\n            </AriaModal>\n        </DialogSideContext.Provider>\n    );\n}\n\n/**\n * Header region for the dialog panel.\n *\n * @example\n * ```tsx\n * <DialogHeader>\n *   <DialogTitle>Settings</DialogTitle>\n * </DialogHeader>\n * ```\n */\nexport function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n    const side = useContext(DialogSideContext);\n    return (\n        <div\n            className={classNames(\n                'flex flex-col p-icon border-b rounded-t-3xl gap-y-2 text-left',\n                side ? 'bg-surface-secondary' : 'bg-elevation-mid',\n                className\n            )}\n            {...props}\n        >\n            <div className=\"md:hidden mx-auto h-1 w-9 shrink-0 rounded-full bg-neutral-200\" />\n            {props.children}\n        </div>\n    );\n}\n\n/**\n * Footer region that aligns action buttons.\n *\n * @example\n * ```tsx\n * <DialogFooter>\n *   <Button variant=\"outline\">Cancel</Button>\n *   <Button>Save</Button>\n * </DialogFooter>\n * ```\n */\nexport function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n    const side = useContext(DialogSideContext);\n    return (\n        <div\n            className={classNames(\n                'flex flex-row justify-end gap-2 p-icon border-t *:flex-1 sm:*:flex-none',\n                side && 'bg-surface-secondary',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Body section of the dialog\n */\nexport function DialogBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n    const side = useContext(DialogSideContext);\n    return (\n        <div\n            className={classNames(\n                'flex flex-col gap-2 p-icon max-h-[60dvh] overflow-auto',\n                side && 'bg-surface-secondary',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Heading element mapped to the dialog title (announced by screen readers).\n *\n * @remarks\n * Sets `slot=\"title\"` so RAC wires it to the dialog.\n */\nexport function DialogTitle({ className, ...props }: AriaHeadingProps) {\n    return (\n        <AriaHeading\n            slot=\"title\"\n            className={classNames('heading-4 font-semibold leading-none tracking-tight text-text-primary', className)}\n            {...props}\n        />\n    );\n}\n\n/**\n * Short explanatory text under the title.\n *\n * @example\n * ```tsx\n * <DialogDescription>\n *   This action cannot be undone.\n * </DialogDescription>\n * ```\n */\nexport function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {\n    return <p className={classNames('flex flex-col gap-y-1 text-center sm:text-left', className)} {...props} />;\n}\n\n/**\n * Context type for controlled dialog state and actions.\n */\ntype ControlledDialogContextType = {\n    /** Opens the dialog with the provided content */\n    openDialog: (content: ReactNode) => void;\n    /** Closes the dialog */\n    closeDialog: () => void;\n    /** Whether the dialog is currently open */\n    isOpen: boolean;\n};\n\nconst ControlledDialogContext = createContext<ControlledDialogContextType | null>(null);\n\n/**\n * Provider that manages a scoped dialog controlled via hooks.\n *\n * @example\n * ```tsx\n * <ControlledDialogProvider>\n *   <MyComponent />\n * </ControlledDialogProvider>\n *\n * // Inside MyComponent:\n * function MyComponent() {\n *   const { openDialog } = useControlledDialog();\n *   return (\n *     <Button onPress={() => openDialog(<div>Dialog content</div>)}>\n *       Open Dialog\n *     </Button>\n *   );\n * }\n * ```\n */\nexport function ControlledDialogProvider({ children }: { children: ReactNode }) {\n    const [isOpen, setIsOpen] = useState(false);\n    const [content, setContent] = useState<ReactNode>(null);\n\n    const openDialog = (dialogContent: ReactNode) => {\n        setContent(dialogContent);\n        setIsOpen(true);\n    };\n\n    const closeDialog = () => {\n        setIsOpen(false);\n    };\n    const isMobile = useIsMobile();\n    return (\n        <ControlledDialogContext.Provider value={{ openDialog, closeDialog, isOpen }}>\n            {children}\n            <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>\n                <DialogOverlay isDismissable>\n                    <DialogContent side={isMobile ? 'bottom' : undefined}>{content}</DialogContent>\n                </DialogOverlay>\n            </DialogTrigger>\n        </ControlledDialogContext.Provider>\n    );\n}\n\n/**\n * Hook to access the controlled dialog from within a ControlledDialogProvider.\n *\n * @throws Error if used outside of ControlledDialogProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { openDialog, closeDialog, isOpen } = useControlledDialog();\n *\n *   return (\n *     <Button onPress={() => openDialog(\n *       <DialogHeader>\n *         <DialogTitle>Confirm</DialogTitle>\n *       </DialogHeader>\n *     )}>\n *       Open\n *     </Button>\n *   );\n * }\n * ```\n */\nexport function useControlledDialog() {\n    const context = useContext(ControlledDialogContext);\n    if (!context) {\n        throw new Error('useControlledDialog must be used within ControlledDialogProvider');\n    }\n    return context;\n}\n"],"names":["sheetVariants","cva","DialogTrigger","AriaDialogTrigger","DialogOverlay","className","isDismissable","props","jsx","AriaModalOverlay","composeRenderProps","classNames","DialogSideContext","createContext","DialogContent","children","side","role","closeButton","isMobile","useIsMobile","AriaModal","AriaDialog","renderProps","jsxs","Fragment","Button","IcClose","DialogHeader","useContext","DialogFooter","DialogBody","DialogTitle","AriaHeading","DialogDescription","ControlledDialogContext","ControlledDialogProvider","isOpen","setIsOpen","useState","content","setContent","openDialog","dialogContent","closeDialog","useControlledDialog","context"],"mappings":"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"}
+{"version":3,"file":"dialog.js","sources":["../../lib/components/dialog.tsx"],"sourcesContent":["'use client';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useState } from 'react';\nimport {\n    Dialog as AriaDialog,\n    DialogProps as AriaDialogProps,\n    DialogTrigger as AriaDialogTrigger,\n    Heading as AriaHeading,\n    HeadingProps as AriaHeadingProps,\n    Modal as AriaModal,\n    ModalOverlay as AriaModalOverlay,\n    ModalOverlayProps as AriaModalOverlayProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { classNames } from '../utilities/theme';\nimport { useIsMobile } from '../utilities/use-mobile';\nimport { IcClose } from './icons';\n\n/**\n * Visual variants for the sheet-style dialog (slide in from an edge).\n *\n * @remarks\n * Internally used to style `<DialogContent side=\"...\">`.\n */\nconst sheetVariants = cva(\n    [\n        'fixed z-50 gap-icon bg-surface-secondary border-stroke-primary transition ease-in-out',\n        'data-[entering]:duration-200 data-[entering]:animate-in data-[entering]:fade-in-0 data-[exiting]:duration-200  data-[exiting]:animate-out data-[exiting]:fade-out-0',\n    ],\n    {\n        variants: {\n            side: {\n                top: 'inset-x-0 top-0 overflow-hidden border-b rounded-b-lg data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table',\n                bottom: 'inset-x-0 bottom-0 overflow-hidden rounded-t-lg data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-[80dvh]',\n                left: 'inset-y-0 left-0 h-full w-3/4 overflow-hidden border-r rounded-r-lg data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left sm:max-w-sm',\n                right: 'inset-y-0 right-0 h-full w-3/4 overflow-hidden border-l rounded-l-lg data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm',\n            },\n        },\n    }\n);\n\n/**\n * Opens the dialog when interacted with (click/press).\n *\n * @remarks\n * Compose this around any control that should open the dialog.\n *\n * @example\n * ```tsx\n * <DialogTrigger>\n *   <Button>Open</Button>\n *   <DialogOverlay>\n *     <DialogContent>...</DialogContent>\n *   </DialogOverlay>\n * </DialogTrigger>\n * ```\n */\nexport const DialogTrigger = AriaDialogTrigger;\n\nexport const DialogOverlay = ({ className, isDismissable = true, ...props }: AriaModalOverlayProps) => {\n    return (\n        <AriaModalOverlay\n            isDismissable={isDismissable}\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'fixed inset-0 z-50 bg-background-overlay',\n                    /* Exiting */\n                    'data-[exiting]:duration-100 data-[exiting]:animate-out',\n                    /* Entering */\n                    'data-[entering]:animate-in',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n};\n\n/** Props for {@link DialogContent}. */\nexport interface DialogContentProps\n    extends Omit<React.ComponentProps<typeof AriaModal>, 'children'>,\n        VariantProps<typeof sheetVariants> {\n    /**\n     * Render function or nodes for the dialog panel contents.\n     */\n    children?: AriaDialogProps['children'];\n\n    /**\n     * ARIA role of the dialog.\n     *\n     * Use `\"alertdialog\"` for destructive/confirmation flows that require\n     * explicit acknowledgement.\n     * @defaultValue \"dialog\"\n     */\n    role?: AriaDialogProps['role'];\n\n    /**\n     * Show a built-in close button in the top-right corner.\n     * @defaultValue true\n     */\n    closeButton?: boolean;\n}\n\n/**\n * Dialog panel container. Renders either a centered modal or a sheet\n * from an edge when `side` is provided.\n *\n * @example Basic\n * ```tsx\n * <DialogTrigger>\n *   <Button>Open</Button>\n *   <DialogOverlay>\n *     <DialogContent>\n *       <DialogHeader>\n *         <DialogTitle>Sign up</DialogTitle>\n *       </DialogHeader>\n *       ...\n *     </DialogContent>\n *   </DialogOverlay>\n * </DialogTrigger>\n * ```\n */\nconst DialogSideContext = createContext<DialogContentProps['side']>(undefined);\n\nexport function DialogContent({ className, children, side, role, closeButton = true, ...props }: DialogContentProps) {\n    const isMobile = useIsMobile();\n    side = side ?? (isMobile ? 'bottom' : undefined);\n    return (\n        <DialogSideContext.Provider value={side}>\n            <AriaModal\n                className={composeRenderProps(className, className =>\n                    classNames(\n                        side\n                            ? sheetVariants({ side })\n                            : [\n                                  'fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-hidden border rounded-lg bg-surface-tertiary duration-100 data-[exiting]:duration-100 data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in-0 data-[exiting]:fade-out-0 data-[entering]:zoom-in-95 data-[exiting]:zoom-out-95 md:w-full',\n                              ],\n                        className\n                    )\n                )}\n                {...props}\n            >\n                <AriaDialog\n                    role={role}\n                    className={classNames(!side && 'grid h-full gap-icon relative', 'h-full outline-none')}\n                >\n                    {composeRenderProps(children, (children, renderProps) => (\n                        <>\n                            {children}\n                            {closeButton && (\n                                <div className=\"absolute right-2 top-6 md:top-3\">\n                                    <Button variant={'ghost'} onPress={renderProps.close} className=\"!rounded-full\">\n                                        <IcClose className=\"size-6\" />\n                                        <span className=\"sr-only\">Close</span>\n                                    </Button>\n                                </div>\n                            )}\n                        </>\n                    ))}\n                </AriaDialog>\n            </AriaModal>\n        </DialogSideContext.Provider>\n    );\n}\n\n/**\n * Header region for the dialog panel.\n *\n * @example\n * ```tsx\n * <DialogHeader>\n *   <DialogTitle>Settings</DialogTitle>\n * </DialogHeader>\n * ```\n */\nexport function DialogHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n    const side = useContext(DialogSideContext);\n    return (\n        <div\n            className={classNames(\n                'flex flex-col p-icon border-b rounded-t-3xl gap-y-2 text-left',\n                side ? 'bg-surface-secondary' : 'bg-surface-tertiary',\n                className\n            )}\n            {...props}\n        >\n            <div className=\"md:hidden mx-auto h-1 w-9 shrink-0 rounded-full bg-stroke-primary\" />\n            {props.children}\n        </div>\n    );\n}\n\n/**\n * Footer region that aligns action buttons.\n *\n * @example\n * ```tsx\n * <DialogFooter>\n *   <Button variant=\"outline\">Cancel</Button>\n *   <Button>Save</Button>\n * </DialogFooter>\n * ```\n */\nexport function DialogFooter({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n    const side = useContext(DialogSideContext);\n    return (\n        <div\n            className={classNames(\n                'flex flex-row justify-end gap-2 p-icon border-t *:flex-1 sm:*:flex-none',\n                side && 'bg-surface-secondary',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Body section of the dialog\n */\nexport function DialogBody({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n    const side = useContext(DialogSideContext);\n    return (\n        <div\n            className={classNames(\n                'flex flex-col gap-2 p-icon max-h-[60dvh] overflow-auto',\n                side && 'bg-surface-secondary',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Heading element mapped to the dialog title (announced by screen readers).\n *\n * @remarks\n * Sets `slot=\"title\"` so RAC wires it to the dialog.\n */\nexport function DialogTitle({ className, ...props }: AriaHeadingProps) {\n    return (\n        <AriaHeading\n            slot=\"title\"\n            className={classNames('heading-4 font-semibold leading-none tracking-tight text-text-primary', className)}\n            {...props}\n        />\n    );\n}\n\n/**\n * Short explanatory text under the title.\n *\n * @example\n * ```tsx\n * <DialogDescription>\n *   This action cannot be undone.\n * </DialogDescription>\n * ```\n */\nexport function DialogDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {\n    return <p className={classNames('flex flex-col gap-y-1 text-center sm:text-left', className)} {...props} />;\n}\n\n/**\n * Context type for controlled dialog state and actions.\n */\ntype ControlledDialogContextType = {\n    /** Opens the dialog with the provided content */\n    openDialog: (content: ReactNode) => void;\n    /** Closes the dialog */\n    closeDialog: () => void;\n    /** Whether the dialog is currently open */\n    isOpen: boolean;\n};\n\nconst ControlledDialogContext = createContext<ControlledDialogContextType | null>(null);\n\n/**\n * Provider that manages a scoped dialog controlled via hooks.\n *\n * @example\n * ```tsx\n * <ControlledDialogProvider>\n *   <MyComponent />\n * </ControlledDialogProvider>\n *\n * // Inside MyComponent:\n * function MyComponent() {\n *   const { openDialog } = useControlledDialog();\n *   return (\n *     <Button onPress={() => openDialog(<div>Dialog content</div>)}>\n *       Open Dialog\n *     </Button>\n *   );\n * }\n * ```\n */\nexport function ControlledDialogProvider({ children }: { children: ReactNode }) {\n    const [isOpen, setIsOpen] = useState(false);\n    const [content, setContent] = useState<ReactNode>(null);\n\n    const openDialog = (dialogContent: ReactNode) => {\n        setContent(dialogContent);\n        setIsOpen(true);\n    };\n\n    const closeDialog = () => {\n        setIsOpen(false);\n    };\n    const isMobile = useIsMobile();\n    return (\n        <ControlledDialogContext.Provider value={{ openDialog, closeDialog, isOpen }}>\n            {children}\n            <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>\n                <DialogOverlay isDismissable>\n                    <DialogContent side={isMobile ? 'bottom' : undefined}>{content}</DialogContent>\n                </DialogOverlay>\n            </DialogTrigger>\n        </ControlledDialogContext.Provider>\n    );\n}\n\n/**\n * Hook to access the controlled dialog from within a ControlledDialogProvider.\n *\n * @throws Error if used outside of ControlledDialogProvider\n *\n * @example\n * ```tsx\n * function MyComponent() {\n *   const { openDialog, closeDialog, isOpen } = useControlledDialog();\n *\n *   return (\n *     <Button onPress={() => openDialog(\n *       <DialogHeader>\n *         <DialogTitle>Confirm</DialogTitle>\n *       </DialogHeader>\n *     )}>\n *       Open\n *     </Button>\n *   );\n * }\n * ```\n */\nexport function useControlledDialog() {\n    const context = useContext(ControlledDialogContext);\n    if (!context) {\n        throw new Error('useControlledDialog must be used within ControlledDialogProvider');\n    }\n    return context;\n}\n"],"names":["sheetVariants","cva","DialogTrigger","AriaDialogTrigger","DialogOverlay","className","isDismissable","props","jsx","AriaModalOverlay","composeRenderProps","classNames","DialogSideContext","createContext","DialogContent","children","side","role","closeButton","isMobile","useIsMobile","AriaModal","AriaDialog","renderProps","jsxs","Fragment","Button","IcClose","DialogHeader","useContext","DialogFooter","DialogBody","DialogTitle","AriaHeading","DialogDescription","ControlledDialogContext","ControlledDialogProvider","isOpen","setIsOpen","useState","content","setContent","openDialog","dialogContent","closeDialog","useControlledDialog","context"],"mappings":"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"}

package/dist/components/duration-field.js

@@ -1,2 +1,2 @@
-"use client";import{jsxs as N,jsx as t}from"react/jsx-runtime";import{useState as D,useMemo as M,useCallback as x}from"react";import{NumberField as z}from"react-aria-components";import{Duration as b}from"../utilities/duration.js";import{getFieldErrorMessage as B}from"../utilities/form.js";import{useFieldContext as $}from"../utilities/form-context.js";import{classNames as w}from"../utilities/theme.js";import{Button as A}from"./button.js";import{FormField as L,FieldGroup as Y}from"./form.js";import{IcLeft as _,IcRight as j}from"./icons.js";import{NumberFieldInput as k}from"./numberfield.js";import"@tanstack/react-form";import"clsx";import"class-variance-authority";import"./loader.js";import"@icons-pack/react-simple-icons";import"./card.js";const q=z,G={years:{full:"Years",short:"yr"},months:{full:"Months",short:"mo"},weeks:{full:"Weeks",short:"wk"},days:{full:"Days",short:"d"},hours:{full:"Hours",short:"hr"},minutes:{full:"Minutes",short:"min"},seconds:{full:"Seconds",short:"sec"}},F=["years","months","days"],H=["hours","minutes","seconds"];function K({id:s,value:r,onChange:e,onBlur:f,label:m,isInvalid:d,isDisabled:h}){return N("div",{className:"flex items-center flex-1 min-w-0 relative",children:[t(q,{"aria-label":m,isInvalid:d,isDisabled:h,value:r,onChange:n=>e(n),onBlur:f,minValue:0,className:"w-full",children:t(k,{id:s,className:"w-full pr-input"})}),t("div",{className:"absolute right-1 select-none text-muted pointer-events-none",children:m})]})}function P({value:s,onChange:r,onBlur:e,label:f,description:m,errorMessage:d,requiredIndicator:h,isDisabled:n,id:S}){const[l,I]=D(!1),c=M(()=>{if(!s||s==="")return{};try{return b.parse(s)}catch{return{}}},[s]),v=x((o,a)=>{const g={...c,[o]:a>0?a:void 0};r(b.serialize(g))},[c,r]),E=()=>{I(o=>!o)},u=!!d,p=S||"duration-field",T=x(o=>{const a=o?[...F,...H]:F,g=o?"short":"full";return a.map((i,y)=>N("div",{className:"contents",children:[t(K,{id:`${p}-${i}`,value:c[i]??0,onChange:C=>v(i,C),onBlur:e||(()=>{}),label:G[i][g],isInvalid:u,isDisabled:n||!1}),y<a.length-1&&t("div",{className:"self-stretch w-px bg-input mx-2 flex-shrink-0","aria-hidden":"true"},`sep-${i}`)]},i))},[p,c,v,e,u,n,l]);return t("div",{className:w("group form-field"),"data-invalid":u?"":void 0,children:t(L,{label:f,description:m,errorMessage:d,requiredIndicator:h,htmlFor:`${p}-years`,children:N("div",{className:"flex-1 flex items-center gap-1",children:[t(Y,{"data-invalid":u?"":void 0,className:"flex flex-row items-stretch w-full overflow-hidden",children:T(l)}),t(A,{type:"button",size:"icon",onPress:E,isDisabled:n,"aria-label":l?"Hide time components":"Show time components","aria-expanded":l,className:w("flex-shrink-0 bg-elevation-1"),children:l?t(_,{className:"size-icon"}):t(j,{className:"size-icon"})})]})})})}function ae({isDisabled:s,...r}){const e=$({disabled:s});return t(P,{requiredIndicator:e.isRequired,value:e.state.value,onChange:e.handleChange,onBlur:e.handleBlur,errorMessage:B(e),isDisabled:s||e.isSubmitting,id:e.name,...r})}export{P as Iso8601DurationField,ae as TfIso8601DurationField};
+"use client";import{jsxs as N,jsx as t}from"react/jsx-runtime";import{useState as D,useMemo as M,useCallback as v}from"react";import{NumberField as z}from"react-aria-components";import{Duration as b}from"../utilities/duration.js";import{getFieldErrorMessage as B}from"../utilities/form.js";import{useFieldContext as $}from"../utilities/form-context.js";import{classNames as w}from"../utilities/theme.js";import{Button as A}from"./button.js";import{FormField as L,FieldGroup as Y}from"./form.js";import{IcLeft as _,IcRight as j}from"./icons.js";import{NumberFieldInput as k}from"./numberfield.js";import"@tanstack/react-form";import"clsx";import"class-variance-authority";import"./loader.js";import"@icons-pack/react-simple-icons";import"./card.js";const q=z,G={years:{full:"Years",short:"yr"},months:{full:"Months",short:"mo"},weeks:{full:"Weeks",short:"wk"},days:{full:"Days",short:"d"},hours:{full:"Hours",short:"hr"},minutes:{full:"Minutes",short:"min"},seconds:{full:"Seconds",short:"sec"}},F=["years","months","days"],H=["hours","minutes","seconds"];function K({id:r,value:s,onChange:e,onBlur:f,label:m,isInvalid:d,isDisabled:h}){return N("div",{className:"flex items-center flex-1 min-w-0 relative",children:[t(q,{"aria-label":m,isInvalid:d,isDisabled:h,value:s,onChange:n=>e(n),onBlur:f,minValue:0,className:"w-full",children:t(k,{id:r,className:"w-full pr-input"})}),t("div",{className:"absolute right-1 select-none text-muted pointer-events-none",children:m})]})}function P({value:r,onChange:s,onBlur:e,label:f,description:m,errorMessage:d,requiredIndicator:h,isDisabled:n,id:S}){const[l,I]=D(!1),c=M(()=>{if(!r||r==="")return{};try{return b.parse(r)}catch{return{}}},[r]),x=v((o,a)=>{const g={...c,[o]:a>0?a:void 0};s(b.serialize(g))},[c,s]),E=()=>{I(o=>!o)},u=!!d,p=S||"duration-field",T=v(o=>{const a=o?[...F,...H]:F,g=o?"short":"full";return a.map((i,y)=>N("div",{className:"contents",children:[t(K,{id:`${p}-${i}`,value:c[i]??0,onChange:C=>x(i,C),onBlur:e||(()=>{}),label:G[i][g],isInvalid:u,isDisabled:n||!1}),y<a.length-1&&t("div",{className:"self-stretch w-px bg-input mx-2 flex-shrink-0","aria-hidden":"true"},`sep-${i}`)]},i))},[p,c,x,e,u,n,l]);return t("div",{className:w("group form-field"),"data-invalid":u?"":void 0,children:t(L,{label:f,description:m,errorMessage:d,requiredIndicator:h,htmlFor:`${p}-years`,children:N("div",{className:"flex-1 flex items-center gap-1",children:[t(Y,{"data-invalid":u?"":void 0,className:"flex flex-row items-stretch w-full overflow-hidden",children:T(l)}),t(A,{type:"button",size:"icon",onPress:E,isDisabled:n,"aria-label":l?"Hide time components":"Show time components","aria-expanded":l,className:w("flex-shrink-0 bg-surface-primary"),children:l?t(_,{className:"size-icon"}):t(j,{className:"size-icon"})})]})})})}function ae({isDisabled:r,...s}){const e=$({disabled:r});return t(P,{requiredIndicator:e.isRequired,value:e.state.value,onChange:e.handleChange,onBlur:e.handleBlur,errorMessage:B(e),isDisabled:r||e.isSubmitting,id:e.name,...s})}export{P as Iso8601DurationField,ae as TfIso8601DurationField};
 //# sourceMappingURL=duration-field.js.map

package/dist/components/duration-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"duration-field.js","sources":["../../lib/components/duration-field.tsx"],"sourcesContent":["'use client';\nimport { useCallback, useMemo, useState } from 'react';\nimport { NumberField as AriaNumberField, NumberFieldProps as AriaNumberFieldProps } from 'react-aria-components';\nimport { Duration } from '../utilities/duration';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { Button } from './button';\nimport { FieldGroup, FormField, type FormFieldProps } from './form';\nimport { IcLeft, IcRight } from './icons';\nimport { NumberFieldInput } from './numberfield';\n\nconst ANumberField = AriaNumberField;\n\ntype DurationPartKey = keyof Duration;\n\n/**\n * Segment configurations with both full and short labels\n * https://learn.microsoft.com/en-us/style-guide/a-z-word-list-term-collections/term-collections/date-time-terms\n * https://en.wikipedia.org/wiki/Hour\n */\nconst SEGMENT_LABELS: Record<DurationPartKey, { full: string; short: string }> = {\n    years: { full: 'Years', short: 'yr' },\n    months: { full: 'Months', short: 'mo' },\n    weeks: { full: 'Weeks', short: 'wk' },\n    days: { full: 'Days', short: 'd' },\n    hours: { full: 'Hours', short: 'hr' },\n    minutes: { full: 'Minutes', short: 'min' },\n    seconds: { full: 'Seconds', short: 'sec' },\n};\n\nconst DATE_KEYS: DurationPartKey[] = ['years', 'months', 'days'];\nconst TIME_KEYS: DurationPartKey[] = ['hours', 'minutes', 'seconds'];\n\n/**\n * Props for DurationSegment component\n */\ninterface DurationSegmentProps {\n    /** Unique identifier for the input field */\n    id: string;\n    /** Current numeric value */\n    value: number;\n    /** Callback when value changes */\n    onChange: (value: number) => void;\n    /** Callback when field loses focus */\n    onBlur: () => void;\n    /** Display label for the segment */\n    label: string;\n    /** Whether the field has validation errors */\n    isInvalid: boolean;\n    /** Whether the field is disabled */\n    isDisabled: boolean;\n}\n\nfunction DurationSegment({ id, value, onChange, onBlur, label, isInvalid, isDisabled }: DurationSegmentProps) {\n    return (\n        <div className=\"flex items-center flex-1 min-w-0 relative\">\n            <ANumberField\n                aria-label={label}\n                isInvalid={isInvalid}\n                isDisabled={isDisabled}\n                value={value}\n                onChange={newValue => onChange(newValue)}\n                onBlur={onBlur}\n                minValue={0}\n                className=\"w-full\"\n            >\n                <NumberFieldInput id={id} className=\"w-full pr-input\" />\n            </ANumberField>\n            <div className=\"absolute right-1 select-none text-muted pointer-events-none\">{label}</div>\n        </div>\n    );\n}\n\ninterface Iso8601DurationFieldBaseProps {\n    value: string;\n    onChange: (value: string) => void;\n    onBlur?: () => void;\n}\n\nexport interface Iso8601DurationFieldProps\n    extends Iso8601DurationFieldBaseProps,\n        FormFieldProps,\n        Omit<AriaNumberFieldProps, 'value' | 'onChange' | 'onBlur'> {\n    id?: string;\n}\n\nexport function Iso8601DurationField({\n    value,\n    onChange,\n    onBlur,\n    label,\n    description,\n    errorMessage,\n    requiredIndicator,\n    isDisabled,\n    id,\n}: Iso8601DurationFieldProps) {\n    const [showTime, setShowTime] = useState(false);\n\n    const duration = useMemo((): Duration => {\n        if (!value || value === '') {\n            return {};\n        }\n        try {\n            return Duration.parse(value);\n        } catch {\n            return {};\n        }\n    }, [value]);\n\n    const handlePartChange = useCallback(\n        (part: DurationPartKey, partValue: number) => {\n            const updatedDuration: Duration = {\n                ...duration,\n                [part]: partValue > 0 ? partValue : undefined,\n            };\n            onChange(Duration.serialize(updatedDuration));\n        },\n        [duration, onChange]\n    );\n\n    const handleToggleTime = () => {\n        setShowTime(prev => !prev);\n    };\n\n    const isInvalid = !!errorMessage;\n    const fieldId = id || 'duration-field';\n\n    const renderSegments = useCallback(\n        (includeTime: boolean) => {\n            const keys = includeTime ? [...DATE_KEYS, ...TIME_KEYS] : DATE_KEYS;\n            const labelType = includeTime ? 'short' : 'full';\n\n            return keys.map((key, index) => (\n                <div key={key} className=\"contents\">\n                    <DurationSegment\n                        id={`${fieldId}-${key}`}\n                        value={duration[key] ?? 0}\n                        onChange={segmentValue => handlePartChange(key, segmentValue)}\n                        onBlur={onBlur || (() => {})}\n                        label={SEGMENT_LABELS[key][labelType]}\n                        isInvalid={isInvalid}\n                        isDisabled={isDisabled || false}\n                    />\n                    {index < keys.length - 1 && (\n                        <div\n                            key={`sep-${key}`}\n                            className=\"self-stretch w-px bg-input mx-2 flex-shrink-0\"\n                            aria-hidden=\"true\"\n                        />\n                    )}\n                </div>\n            ));\n        },\n        [fieldId, duration, handlePartChange, onBlur, isInvalid, isDisabled, showTime]\n    );\n\n    return (\n        <div className={classNames('group form-field')} data-invalid={isInvalid ? '' : undefined}>\n            <FormField\n                label={label}\n                description={description}\n                errorMessage={errorMessage}\n                requiredIndicator={requiredIndicator}\n                htmlFor={`${fieldId}-years`}\n            >\n                <div className=\"flex-1 flex items-center gap-1\">\n                    <FieldGroup\n                        data-invalid={isInvalid ? '' : undefined}\n                        className=\"flex flex-row items-stretch w-full overflow-hidden\"\n                    >\n                        {renderSegments(showTime)}\n                    </FieldGroup>\n                    <Button\n                        type=\"button\"\n                        size=\"icon\"\n                        onPress={handleToggleTime}\n                        isDisabled={isDisabled}\n                        aria-label={showTime ? 'Hide time components' : 'Show time components'}\n                        aria-expanded={showTime}\n                        className={classNames('flex-shrink-0 bg-elevation-1')}\n                    >\n                        {showTime ? <IcLeft className=\"size-icon\" /> : <IcRight className=\"size-icon\" />}\n                    </Button>\n                </div>\n            </FormField>\n        </div>\n    );\n}\n\nexport interface TfIso8601DurationFieldProps extends Omit<Iso8601DurationFieldProps, 'value' | 'onChange'> {}\n\nexport function TfIso8601DurationField({ isDisabled, ...props }: TfIso8601DurationFieldProps) {\n    const field = useFieldContext<string>({ disabled: isDisabled });\n\n    return (\n        <Iso8601DurationField\n            requiredIndicator={field.isRequired}\n            value={field.state.value}\n            onChange={field.handleChange}\n            onBlur={field.handleBlur}\n            errorMessage={getFieldErrorMessage(field)}\n            isDisabled={isDisabled || field.isSubmitting}\n            id={field.name}\n            {...props}\n        />\n    );\n}\n"],"names":["ANumberField","AriaNumberField","SEGMENT_LABELS","DATE_KEYS","TIME_KEYS","DurationSegment","id","value","onChange","onBlur","label","isInvalid","isDisabled","jsxs","jsx","newValue","NumberFieldInput","Iso8601DurationField","description","errorMessage","requiredIndicator","showTime","setShowTime","useState","duration","useMemo","Duration","handlePartChange","useCallback","part","partValue","updatedDuration","handleToggleTime","prev","fieldId","renderSegments","includeTime","keys","labelType","key","index","segmentValue","classNames","FormField","FieldGroup","Button","IcLeft","IcRight","TfIso8601DurationField","props","field","useFieldContext","getFieldErrorMessage"],"mappings":"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"}
+{"version":3,"file":"duration-field.js","sources":["../../lib/components/duration-field.tsx"],"sourcesContent":["'use client';\nimport { useCallback, useMemo, useState } from 'react';\nimport { NumberField as AriaNumberField, NumberFieldProps as AriaNumberFieldProps } from 'react-aria-components';\nimport { Duration } from '../utilities/duration';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { Button } from './button';\nimport { FieldGroup, FormField, type FormFieldProps } from './form';\nimport { IcLeft, IcRight } from './icons';\nimport { NumberFieldInput } from './numberfield';\n\nconst ANumberField = AriaNumberField;\n\ntype DurationPartKey = keyof Duration;\n\n/**\n * Segment configurations with both full and short labels\n * https://learn.microsoft.com/en-us/style-guide/a-z-word-list-term-collections/term-collections/date-time-terms\n * https://en.wikipedia.org/wiki/Hour\n */\nconst SEGMENT_LABELS: Record<DurationPartKey, { full: string; short: string }> = {\n    years: { full: 'Years', short: 'yr' },\n    months: { full: 'Months', short: 'mo' },\n    weeks: { full: 'Weeks', short: 'wk' },\n    days: { full: 'Days', short: 'd' },\n    hours: { full: 'Hours', short: 'hr' },\n    minutes: { full: 'Minutes', short: 'min' },\n    seconds: { full: 'Seconds', short: 'sec' },\n};\n\nconst DATE_KEYS: DurationPartKey[] = ['years', 'months', 'days'];\nconst TIME_KEYS: DurationPartKey[] = ['hours', 'minutes', 'seconds'];\n\n/**\n * Props for DurationSegment component\n */\ninterface DurationSegmentProps {\n    /** Unique identifier for the input field */\n    id: string;\n    /** Current numeric value */\n    value: number;\n    /** Callback when value changes */\n    onChange: (value: number) => void;\n    /** Callback when field loses focus */\n    onBlur: () => void;\n    /** Display label for the segment */\n    label: string;\n    /** Whether the field has validation errors */\n    isInvalid: boolean;\n    /** Whether the field is disabled */\n    isDisabled: boolean;\n}\n\nfunction DurationSegment({ id, value, onChange, onBlur, label, isInvalid, isDisabled }: DurationSegmentProps) {\n    return (\n        <div className=\"flex items-center flex-1 min-w-0 relative\">\n            <ANumberField\n                aria-label={label}\n                isInvalid={isInvalid}\n                isDisabled={isDisabled}\n                value={value}\n                onChange={newValue => onChange(newValue)}\n                onBlur={onBlur}\n                minValue={0}\n                className=\"w-full\"\n            >\n                <NumberFieldInput id={id} className=\"w-full pr-input\" />\n            </ANumberField>\n            <div className=\"absolute right-1 select-none text-muted pointer-events-none\">{label}</div>\n        </div>\n    );\n}\n\ninterface Iso8601DurationFieldBaseProps {\n    value: string;\n    onChange: (value: string) => void;\n    onBlur?: () => void;\n}\n\nexport interface Iso8601DurationFieldProps\n    extends Iso8601DurationFieldBaseProps,\n        FormFieldProps,\n        Omit<AriaNumberFieldProps, 'value' | 'onChange' | 'onBlur'> {\n    id?: string;\n}\n\nexport function Iso8601DurationField({\n    value,\n    onChange,\n    onBlur,\n    label,\n    description,\n    errorMessage,\n    requiredIndicator,\n    isDisabled,\n    id,\n}: Iso8601DurationFieldProps) {\n    const [showTime, setShowTime] = useState(false);\n\n    const duration = useMemo((): Duration => {\n        if (!value || value === '') {\n            return {};\n        }\n        try {\n            return Duration.parse(value);\n        } catch {\n            return {};\n        }\n    }, [value]);\n\n    const handlePartChange = useCallback(\n        (part: DurationPartKey, partValue: number) => {\n            const updatedDuration: Duration = {\n                ...duration,\n                [part]: partValue > 0 ? partValue : undefined,\n            };\n            onChange(Duration.serialize(updatedDuration));\n        },\n        [duration, onChange]\n    );\n\n    const handleToggleTime = () => {\n        setShowTime(prev => !prev);\n    };\n\n    const isInvalid = !!errorMessage;\n    const fieldId = id || 'duration-field';\n\n    const renderSegments = useCallback(\n        (includeTime: boolean) => {\n            const keys = includeTime ? [...DATE_KEYS, ...TIME_KEYS] : DATE_KEYS;\n            const labelType = includeTime ? 'short' : 'full';\n\n            return keys.map((key, index) => (\n                <div key={key} className=\"contents\">\n                    <DurationSegment\n                        id={`${fieldId}-${key}`}\n                        value={duration[key] ?? 0}\n                        onChange={segmentValue => handlePartChange(key, segmentValue)}\n                        onBlur={onBlur || (() => {})}\n                        label={SEGMENT_LABELS[key][labelType]}\n                        isInvalid={isInvalid}\n                        isDisabled={isDisabled || false}\n                    />\n                    {index < keys.length - 1 && (\n                        <div\n                            key={`sep-${key}`}\n                            className=\"self-stretch w-px bg-input mx-2 flex-shrink-0\"\n                            aria-hidden=\"true\"\n                        />\n                    )}\n                </div>\n            ));\n        },\n        [fieldId, duration, handlePartChange, onBlur, isInvalid, isDisabled, showTime]\n    );\n\n    return (\n        <div className={classNames('group form-field')} data-invalid={isInvalid ? '' : undefined}>\n            <FormField\n                label={label}\n                description={description}\n                errorMessage={errorMessage}\n                requiredIndicator={requiredIndicator}\n                htmlFor={`${fieldId}-years`}\n            >\n                <div className=\"flex-1 flex items-center gap-1\">\n                    <FieldGroup\n                        data-invalid={isInvalid ? '' : undefined}\n                        className=\"flex flex-row items-stretch w-full overflow-hidden\"\n                    >\n                        {renderSegments(showTime)}\n                    </FieldGroup>\n                    <Button\n                        type=\"button\"\n                        size=\"icon\"\n                        onPress={handleToggleTime}\n                        isDisabled={isDisabled}\n                        aria-label={showTime ? 'Hide time components' : 'Show time components'}\n                        aria-expanded={showTime}\n                        className={classNames('flex-shrink-0 bg-surface-primary')}\n                    >\n                        {showTime ? <IcLeft className=\"size-icon\" /> : <IcRight className=\"size-icon\" />}\n                    </Button>\n                </div>\n            </FormField>\n        </div>\n    );\n}\n\nexport interface TfIso8601DurationFieldProps extends Omit<Iso8601DurationFieldProps, 'value' | 'onChange'> {}\n\nexport function TfIso8601DurationField({ isDisabled, ...props }: TfIso8601DurationFieldProps) {\n    const field = useFieldContext<string>({ disabled: isDisabled });\n\n    return (\n        <Iso8601DurationField\n            requiredIndicator={field.isRequired}\n            value={field.state.value}\n            onChange={field.handleChange}\n            onBlur={field.handleBlur}\n            errorMessage={getFieldErrorMessage(field)}\n            isDisabled={isDisabled || field.isSubmitting}\n            id={field.name}\n            {...props}\n        />\n    );\n}\n"],"names":["ANumberField","AriaNumberField","SEGMENT_LABELS","DATE_KEYS","TIME_KEYS","DurationSegment","id","value","onChange","onBlur","label","isInvalid","isDisabled","jsxs","jsx","newValue","NumberFieldInput","Iso8601DurationField","description","errorMessage","requiredIndicator","showTime","setShowTime","useState","duration","useMemo","Duration","handlePartChange","useCallback","part","partValue","updatedDuration","handleToggleTime","prev","fieldId","renderSegments","includeTime","keys","labelType","key","index","segmentValue","classNames","FormField","FieldGroup","Button","IcLeft","IcRight","TfIso8601DurationField","props","field","useFieldContext","getFieldErrorMessage"],"mappings":"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"}

package/dist/components/form.js

@@ -1,2 +1,2 @@
-"use client";import{jsxs as a,Fragment as c,jsx as r}from"react/jsx-runtime";import{cva as s}from"class-variance-authority";import{Label as u,Text as f,Group as p,composeRenderProps as m,Button as g}from"react-aria-components";import{classNames as n}from"../utilities/theme.js";import{Card as b,CardHeader as x,CardTitle as v}from"./card.js";import{IcInfo as h,IcError as F}from"./icons.js";import"clsx";import"@icons-pack/react-simple-icons";import"react";const N=s(["select-none body-sm font-medium leading-none","disabled-muted","group-data-[invalid]:text-destructive"]);function y({className:t,...e}){return r(u,{className:n(N(),t),...e})}function k({className:t,children:e,...i}){return a(f,{className:n("body-sm text-muted leading-tight",t),...i,slot:"description",children:[e,r(h,{className:"inline size-2 align-text-top ms-0.5"})]})}function w({className:t,children:e,...i}){return a("label",{role:"alert",className:n("body-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in",t),...i,children:[e,r(F,{className:"inline size-2 align-text-top ms-0.5"})]})}const j=s("",{variants:{variant:{default:["relative flex w-full items-center overflow-hidden border border-input bg-elevation-1 input-dim ring-offset-background placeholder:text-muted-foreground","focus-ring focus-visible:border-stroke-active","disabled-muted"],ghost:""}},defaultVariants:{variant:"default"}});function B({className:t,variant:e,...i}){return r(p,{className:m(t,o=>n(j({variant:e}),o)),...i})}function D({label:t,description:e,errorMessage:i,children:o,requiredIndicator:d,htmlFor:l}){return a(c,{children:[t&&a(y,{htmlFor:l,children:[t,d&&r("sup",{className:"text-destructive",children:"*"})]}),o,e&&r(k,{children:e}),i&&r(w,{htmlFor:l,children:i})]})}function A({className:t,...e}){return r(g,{className:m(t,i=>n("btn btn-ghost h-input px-2 -me-2",i)),...e})}function H({className:t,onSubmit:e,...i}){return r("form",{className:n(t),onSubmit:o=>{o.preventDefault(),document?.activeElement?.blur(),e?.(o)},...i})}function P({className:t,...e}){return r(b,{className:n("gap-input bg-elevation-mid",t),...e})}function R({className:t,...e}){return r(x,{children:r(v,{className:n(t,"!body-base text-muted"),...e})})}function q({className:t,...e}){return r("nav",{className:n("flex items-center justify-end bg-elevation-mid sticky bottom-0 z-50 py-icon px-icon border-t",t),...e})}function J({className:t,preview:e,...i}){return a("div",{className:"flex flex-col gap-icon lg:flex-row lg:items-start",children:[r("div",{className:n("grid grid-cols-1 gap-input mt-icon my-header w-full max-w-3xl",t),...i}),e&&r("div",{className:"lg:sticky lg:top-header lg:shrink-0",children:e})]})}export{B as FieldGroup,H as Form,q as FormActionFooter,D as FormField,A as FormFieldButton,k as FormFieldDescription,w as FormFieldError,y as FormFieldLabel,J as FormLayout,P as FormSection,R as FormSectionTitle,j as fieldGroupVariants,N as labelVariants};
+"use client";import{jsxs as a,Fragment as d,jsx as r}from"react/jsx-runtime";import{cva as l}from"class-variance-authority";import{Label as u,Text as f,Group as p,composeRenderProps as c,Button as g}from"react-aria-components";import{classNames as n}from"../utilities/theme.js";import{Card as b,CardHeader as x,CardTitle as h}from"./card.js";import{IcInfo as v,IcError as F}from"./icons.js";import"clsx";import"@icons-pack/react-simple-icons";import"react";const N=l(["select-none body-sm font-medium leading-none","disabled-muted","group-data-[invalid]:text-destructive"]);function y({className:t,...e}){return r(u,{className:n(N(),t),...e})}function k({className:t,children:e,...i}){return a(f,{className:n("body-sm text-muted leading-tight",t),...i,slot:"description",children:[e,r(v,{className:"inline size-2 align-text-top ms-0.5"})]})}function w({className:t,children:e,...i}){return a("label",{role:"alert",className:n("body-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in",t),...i,children:[e,r(F,{className:"inline size-2 align-text-top ms-0.5"})]})}const j=l("",{variants:{variant:{default:["relative flex w-full items-center overflow-hidden border border-input bg-surface-primary input-dim ring-offset-surface-secondary placeholder:text-muted-foreground","focus-ring focus-visible:border-stroke-active","disabled-muted"],ghost:""}},defaultVariants:{variant:"default"}});function B({className:t,variant:e,...i}){return r(p,{className:c(t,o=>n(j({variant:e}),o)),...i})}function D({label:t,description:e,errorMessage:i,children:o,requiredIndicator:m,htmlFor:s}){return a(d,{children:[t&&a(y,{htmlFor:s,children:[t,m&&r("sup",{className:"text-destructive",children:"*"})]}),o,e&&r(k,{children:e}),i&&r(w,{htmlFor:s,children:i})]})}function A({className:t,...e}){return r(g,{className:c(t,i=>n("btn btn-ghost h-input px-2 -me-2",i)),...e})}function H({className:t,onSubmit:e,...i}){return r("form",{className:n(t),onSubmit:o=>{o.preventDefault(),document?.activeElement?.blur(),e?.(o)},...i})}function P({className:t,...e}){return r(b,{className:n("gap-input bg-surface-tertiary",t),...e})}function R({className:t,...e}){return r(x,{children:r(h,{className:n(t,"!body-base text-muted"),...e})})}function q({className:t,...e}){return r("nav",{className:n("flex items-center justify-end bg-surface-tertiary sticky bottom-0 z-50 py-icon px-icon border-t",t),...e})}function J({className:t,preview:e,...i}){return a("div",{className:"flex flex-col gap-icon lg:flex-row lg:items-start",children:[r("div",{className:n("grid grid-cols-1 gap-input mt-icon my-header w-full max-w-3xl",t),...i}),e&&r("div",{className:"lg:sticky lg:top-header lg:shrink-0",children:e})]})}export{B as FieldGroup,H as Form,q as FormActionFooter,D as FormField,A as FormFieldButton,k as FormFieldDescription,w as FormFieldError,y as FormFieldLabel,J as FormLayout,P as FormSection,R as FormSectionTitle,j as fieldGroupVariants,N as labelVariants};
 //# sourceMappingURL=form.js.map

package/dist/components/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sources":["../../lib/components/form.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n    Button as AriaButton,\n    ButtonProps as AriaButtonProps,\n    Group as AriaGroup,\n    GroupProps as AriaGroupProps,\n    Label as AriaLabel,\n    LabelProps as AriaLabelProps,\n    Text as AriaText,\n    TextProps as AriaTextProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\nimport { Card, CardHeader, CardTitle } from './card';\nimport { IcError, IcInfo } from './icons';\n\n/**\n * Class variance authority variants for form field labels.\n * Provides styling for different states including disabled and invalid.\n */\nexport const labelVariants = cva([\n    'select-none body-sm font-medium leading-none',\n    /* Disabled */\n    'disabled-muted',\n    /* Invalid */\n    'group-data-[invalid]:text-destructive',\n]);\n\n/**\n * A form field label component that extends React Aria's Label component.\n * Applies consistent styling for form labels including disabled and invalid states.\n *\n * @param className - Optional additional CSS classes to apply\n * @param props - All other props from AriaLabelProps\n * @returns A styled label element\n */\nexport function FormFieldLabel({ className, ...props }: AriaLabelProps) {\n    return <AriaLabel className={classNames(labelVariants(), className)} {...props} />;\n}\n\n/**\n * A form field description component that provides additional context or help text.\n * Automatically includes an info icon and uses the \"description\" slot for accessibility.\n */\nexport function FormFieldDescription({ className, children, ...props }: AriaTextProps) {\n    return (\n        <AriaText className={classNames('body-sm text-muted leading-tight', className)} {...props} slot=\"description\">\n            {children}\n            <IcInfo className=\"inline size-2 align-text-top ms-0.5\" />\n        </AriaText>\n    );\n}\n/**\n * A form field error component that displays validation error messages.\n *\n * @remarks\n * Currently uses a div instead of AriaFieldError to avoid overlap with Tanstack Form.\n * This approach needs further discussion and exploration.\n *\n */\nexport function FormFieldError({ className, children, ...props }: React.ComponentPropsWithRef<'label'>) {\n    return (\n        <label\n            role=\"alert\"\n            className={classNames(\n                'body-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in',\n                className\n            )}\n            {...props}\n        >\n            {children}\n            <IcError className=\"inline size-2 align-text-top ms-0.5\" />\n        </label>\n    );\n}\n\n/**\n * Class variance authority variants for field groups.\n * Provides styling variants for different types of form field containers.\n */\nexport const fieldGroupVariants = cva('', {\n    variants: {\n        variant: {\n            default: [\n                'relative flex w-full items-center overflow-hidden border border-input bg-elevation-1 input-dim ring-offset-background placeholder:text-muted-foreground',\n                /* Focus Within */\n                'focus-ring focus-visible:border-stroke-active',\n                /* Disabled */\n                'disabled-muted',\n            ],\n            ghost: '',\n        },\n    },\n    defaultVariants: {\n        variant: 'default',\n    },\n});\n\n/**\n * Props interface for FieldGroup component.\n * Extends AriaGroupProps with variant styling options.\n */\nexport interface GroupProps extends AriaGroupProps, VariantProps<typeof fieldGroupVariants> {}\n\n/**\n * A field group component that wraps form inputs with consistent styling.\n * Supports different variants for various use cases.\n */\nexport function FieldGroup({ className, variant, ...props }: GroupProps) {\n    return (\n        <AriaGroup\n            className={composeRenderProps(className, className =>\n                classNames(fieldGroupVariants({ variant }), className)\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Props for the FormField component.\n * Defines the structure for form field configuration.\n */\nexport type FormFieldProps = {\n    /** Optional label text for the form field */\n    label?: React.ReactNode;\n    /** Optional description or help text */\n    description?: React.ReactNode;\n    /** Optional error message to display */\n    errorMessage?: string;\n    /** Show required indicator on field label */\n    requiredIndicator?: boolean;\n    /** Not defining the htmlFor on labels will lead to accessibilty warnings */\n    htmlFor?: string;\n};\n\n/**\n * A wrapper component for form fields that provides consistent layout and styling.\n * Automatically renders label, children, description, and error message in the correct order.\n * @returns A complete form field with all associated elements\n */\nexport function FormField({\n    label,\n    description,\n    errorMessage,\n    children,\n    requiredIndicator,\n    htmlFor,\n}: FormFieldProps & {\n    children: React.ReactNode;\n}) {\n    return (\n        <>\n            {label && (\n                <FormFieldLabel htmlFor={htmlFor}>\n                    {label}\n                    {requiredIndicator && <sup className=\"text-destructive\">*</sup>}\n                </FormFieldLabel>\n            )}\n            {children}\n            {description && <FormFieldDescription>{description}</FormFieldDescription>}\n            {errorMessage && <FormFieldError htmlFor={htmlFor}>{errorMessage}</FormFieldError>}\n        </>\n    );\n}\n\n/**\n * A button component designed to be used within form fields.\n * Styled to fit nicely alongside form inputs with ghost styling.\n */\nexport function FormFieldButton({ className, ...props }: AriaButtonProps) {\n    return (\n        <AriaButton\n            className={composeRenderProps(className, className =>\n                classNames('btn btn-ghost h-input px-2 -me-2', className)\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * A form component that prevents default form submission and handles submit events.\n * All forms in this application are controlled components, not pure HTML forms.\n */\nexport function Form({ className, onSubmit, ...props }: React.ComponentProps<'form'>) {\n    return (\n        <form\n            className={classNames(className)}\n            onSubmit={e => {\n                // None of the forms in our applications are pure HTML forms.\n                e.preventDefault();\n\n                // Blur the active input field.\n                (document?.activeElement as HTMLElement)?.blur();\n\n                // If onSubmit is provided, call it.\n                onSubmit?.(e);\n            }}\n            {...props}\n        />\n    );\n}\n\n/**\n * A section component for organizing form content into logical groups.\n * Provides consistent spacing and visual separation between form sections.\n */\nexport function FormSection({ className, ...props }: React.ComponentProps<'div'>) {\n    return <Card className={classNames('gap-input bg-elevation-mid', className)} {...props} />;\n}\n\n/**\n * A title component for form sections.\n */\nexport function FormSectionTitle({ className, ...props }: React.ComponentProps<'h2'>) {\n    return (\n        <CardHeader>\n            <CardTitle className={classNames(className, '!body-base text-muted')} {...props} />\n        </CardHeader>\n    );\n}\n\nexport function FormActionFooter({ className, ...props }: React.ComponentProps<'nav'>) {\n    return (\n        <nav\n            className={classNames(\n                'flex items-center justify-end bg-elevation-mid sticky bottom-0 z-50 py-icon px-icon border-t',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function FormLayout({\n    className,\n    preview,\n    ...props\n}: React.ComponentProps<'div'> & { preview?: React.ReactNode }) {\n    return (\n        <div className=\"flex flex-col gap-icon lg:flex-row lg:items-start\">\n            <div\n                className={classNames('grid grid-cols-1 gap-input mt-icon my-header w-full max-w-3xl', className)}\n                {...props}\n            />\n            {preview && <div className=\"lg:sticky lg:top-header lg:shrink-0\">{preview}</div>}\n        </div>\n    );\n}\n"],"names":["labelVariants","cva","FormFieldLabel","className","props","jsx","AriaLabel","classNames","FormFieldDescription","children","jsxs","AriaText","IcInfo","FormFieldError","IcError","fieldGroupVariants","FieldGroup","variant","AriaGroup","composeRenderProps","FormField","label","description","errorMessage","requiredIndicator","htmlFor","Fragment","FormFieldButton","AriaButton","Form","onSubmit","e","FormSection","Card","FormSectionTitle","CardHeader","CardTitle","FormActionFooter","FormLayout","preview"],"mappings":"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"}
+{"version":3,"file":"form.js","sources":["../../lib/components/form.tsx"],"sourcesContent":["'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n    Button as AriaButton,\n    ButtonProps as AriaButtonProps,\n    Group as AriaGroup,\n    GroupProps as AriaGroupProps,\n    Label as AriaLabel,\n    LabelProps as AriaLabelProps,\n    Text as AriaText,\n    TextProps as AriaTextProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\nimport { Card, CardHeader, CardTitle } from './card';\nimport { IcError, IcInfo } from './icons';\n\n/**\n * Class variance authority variants for form field labels.\n * Provides styling for different states including disabled and invalid.\n */\nexport const labelVariants = cva([\n    'select-none body-sm font-medium leading-none',\n    /* Disabled */\n    'disabled-muted',\n    /* Invalid */\n    'group-data-[invalid]:text-destructive',\n]);\n\n/**\n * A form field label component that extends React Aria's Label component.\n * Applies consistent styling for form labels including disabled and invalid states.\n *\n * @param className - Optional additional CSS classes to apply\n * @param props - All other props from AriaLabelProps\n * @returns A styled label element\n */\nexport function FormFieldLabel({ className, ...props }: AriaLabelProps) {\n    return <AriaLabel className={classNames(labelVariants(), className)} {...props} />;\n}\n\n/**\n * A form field description component that provides additional context or help text.\n * Automatically includes an info icon and uses the \"description\" slot for accessibility.\n */\nexport function FormFieldDescription({ className, children, ...props }: AriaTextProps) {\n    return (\n        <AriaText className={classNames('body-sm text-muted leading-tight', className)} {...props} slot=\"description\">\n            {children}\n            <IcInfo className=\"inline size-2 align-text-top ms-0.5\" />\n        </AriaText>\n    );\n}\n/**\n * A form field error component that displays validation error messages.\n *\n * @remarks\n * Currently uses a div instead of AriaFieldError to avoid overlap with Tanstack Form.\n * This approach needs further discussion and exploration.\n *\n */\nexport function FormFieldError({ className, children, ...props }: React.ComponentPropsWithRef<'label'>) {\n    return (\n        <label\n            role=\"alert\"\n            className={classNames(\n                'body-sm leading-tight text-destructive duration-150 animate-in transition-transform  slide-in-from-top-5 fade-in',\n                className\n            )}\n            {...props}\n        >\n            {children}\n            <IcError className=\"inline size-2 align-text-top ms-0.5\" />\n        </label>\n    );\n}\n\n/**\n * Class variance authority variants for field groups.\n * Provides styling variants for different types of form field containers.\n */\nexport const fieldGroupVariants = cva('', {\n    variants: {\n        variant: {\n            default: [\n                'relative flex w-full items-center overflow-hidden border border-input bg-surface-primary input-dim ring-offset-surface-secondary placeholder:text-muted-foreground',\n                /* Focus Within */\n                'focus-ring focus-visible:border-stroke-active',\n                /* Disabled */\n                'disabled-muted',\n            ],\n            ghost: '',\n        },\n    },\n    defaultVariants: {\n        variant: 'default',\n    },\n});\n\n/**\n * Props interface for FieldGroup component.\n * Extends AriaGroupProps with variant styling options.\n */\nexport interface GroupProps extends AriaGroupProps, VariantProps<typeof fieldGroupVariants> {}\n\n/**\n * A field group component that wraps form inputs with consistent styling.\n * Supports different variants for various use cases.\n */\nexport function FieldGroup({ className, variant, ...props }: GroupProps) {\n    return (\n        <AriaGroup\n            className={composeRenderProps(className, className =>\n                classNames(fieldGroupVariants({ variant }), className)\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * Props for the FormField component.\n * Defines the structure for form field configuration.\n */\nexport type FormFieldProps = {\n    /** Optional label text for the form field */\n    label?: React.ReactNode;\n    /** Optional description or help text */\n    description?: React.ReactNode;\n    /** Optional error message to display */\n    errorMessage?: string;\n    /** Show required indicator on field label */\n    requiredIndicator?: boolean;\n    /** Not defining the htmlFor on labels will lead to accessibilty warnings */\n    htmlFor?: string;\n};\n\n/**\n * A wrapper component for form fields that provides consistent layout and styling.\n * Automatically renders label, children, description, and error message in the correct order.\n * @returns A complete form field with all associated elements\n */\nexport function FormField({\n    label,\n    description,\n    errorMessage,\n    children,\n    requiredIndicator,\n    htmlFor,\n}: FormFieldProps & {\n    children: React.ReactNode;\n}) {\n    return (\n        <>\n            {label && (\n                <FormFieldLabel htmlFor={htmlFor}>\n                    {label}\n                    {requiredIndicator && <sup className=\"text-destructive\">*</sup>}\n                </FormFieldLabel>\n            )}\n            {children}\n            {description && <FormFieldDescription>{description}</FormFieldDescription>}\n            {errorMessage && <FormFieldError htmlFor={htmlFor}>{errorMessage}</FormFieldError>}\n        </>\n    );\n}\n\n/**\n * A button component designed to be used within form fields.\n * Styled to fit nicely alongside form inputs with ghost styling.\n */\nexport function FormFieldButton({ className, ...props }: AriaButtonProps) {\n    return (\n        <AriaButton\n            className={composeRenderProps(className, className =>\n                classNames('btn btn-ghost h-input px-2 -me-2', className)\n            )}\n            {...props}\n        />\n    );\n}\n\n/**\n * A form component that prevents default form submission and handles submit events.\n * All forms in this application are controlled components, not pure HTML forms.\n */\nexport function Form({ className, onSubmit, ...props }: React.ComponentProps<'form'>) {\n    return (\n        <form\n            className={classNames(className)}\n            onSubmit={e => {\n                // None of the forms in our applications are pure HTML forms.\n                e.preventDefault();\n\n                // Blur the active input field.\n                (document?.activeElement as HTMLElement)?.blur();\n\n                // If onSubmit is provided, call it.\n                onSubmit?.(e);\n            }}\n            {...props}\n        />\n    );\n}\n\n/**\n * A section component for organizing form content into logical groups.\n * Provides consistent spacing and visual separation between form sections.\n */\nexport function FormSection({ className, ...props }: React.ComponentProps<'div'>) {\n    return <Card className={classNames('gap-input bg-surface-tertiary', className)} {...props} />;\n}\n\n/**\n * A title component for form sections.\n */\nexport function FormSectionTitle({ className, ...props }: React.ComponentProps<'h2'>) {\n    return (\n        <CardHeader>\n            <CardTitle className={classNames(className, '!body-base text-muted')} {...props} />\n        </CardHeader>\n    );\n}\n\nexport function FormActionFooter({ className, ...props }: React.ComponentProps<'nav'>) {\n    return (\n        <nav\n            className={classNames(\n                'flex items-center justify-end bg-surface-tertiary sticky bottom-0 z-50 py-icon px-icon border-t',\n                className\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function FormLayout({\n    className,\n    preview,\n    ...props\n}: React.ComponentProps<'div'> & { preview?: React.ReactNode }) {\n    return (\n        <div className=\"flex flex-col gap-icon lg:flex-row lg:items-start\">\n            <div\n                className={classNames('grid grid-cols-1 gap-input mt-icon my-header w-full max-w-3xl', className)}\n                {...props}\n            />\n            {preview && <div className=\"lg:sticky lg:top-header lg:shrink-0\">{preview}</div>}\n        </div>\n    );\n}\n"],"names":["labelVariants","cva","FormFieldLabel","className","props","jsx","AriaLabel","classNames","FormFieldDescription","children","jsxs","AriaText","IcInfo","FormFieldError","IcError","fieldGroupVariants","FieldGroup","variant","AriaGroup","composeRenderProps","FormField","label","description","errorMessage","requiredIndicator","htmlFor","Fragment","FormFieldButton","AriaButton","Form","onSubmit","e","FormSection","Card","FormSectionTitle","CardHeader","CardTitle","FormActionFooter","FormLayout","preview"],"mappings":"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"}

package/dist/components/list-box.js

@@ -1,2 +1,2 @@
-import{jsx as o,jsxs as m,Fragment as l}from"react/jsx-runtime";import{ListBoxItem as c,composeRenderProps as r,Collection as p,ListBox as u,Header as d}from"react-aria-components";import{classNames as n}from"../utilities/theme.js";import{IcCheck as f}from"./icons.js";import"clsx";import"@icons-pack/react-simple-icons";import"react";const j=p;function v({className:e,...t}){return o(u,{className:r(e,s=>n(s,"group overflow-auto border bg-elevation-1 p-1 text-foreground outline-none","data-[empty]:p-6 data-[empty]:text-center data-[empty]:body-sm")),...t})}function I({className:e,children:t,...s}){return o(c,{textValue:s.textValue||(typeof t=="string"?t:void 0),className:r(e,i=>n("btn btn-ghost justify-start input-dim relative w-full","data-[selection-mode]:pl-input",i)),...s,children:r(t,(i,a)=>m(l,{children:[a.isSelected&&o("span",{className:"absolute left-2 flex size-icon items-center justify-center",children:o(f,{className:"size-icon"})}),i]}))})}function h({className:e,...t}){return o(d,{className:n("py-1.5 pl-input pr-2 body font-semibold",e),...t})}export{v as ListBox,j as ListBoxCollection,h as ListBoxHeader,I as ListBoxItem};
+import{jsx as o,jsxs as n,Fragment as l}from"react/jsx-runtime";import{ListBoxItem as p,composeRenderProps as r,Collection as c,ListBox as u,Header as x}from"react-aria-components";import{classNames as a}from"../utilities/theme.js";import{IcCheck as d}from"./icons.js";import"clsx";import"@icons-pack/react-simple-icons";import"react";const j=c;function I({className:e,...t}){return o(u,{className:r(e,s=>a(s,"group overflow-auto border bg-surface-primary p-1 text-text-primary outline-none","data-[empty]:p-6 data-[empty]:text-center data-[empty]:body-sm")),...t})}function h({className:e,children:t,...s}){return o(p,{textValue:s.textValue||(typeof t=="string"?t:void 0),className:r(e,i=>a("btn btn-ghost justify-start input-dim relative w-full","data-[selection-mode]:pl-input",i)),...s,children:r(t,(i,m)=>n(l,{children:[m.isSelected&&o("span",{className:"absolute left-2 flex size-icon items-center justify-center",children:o(d,{className:"size-icon"})}),i]}))})}function v({className:e,...t}){return o(x,{className:a("py-1.5 pl-input pr-2 body font-semibold",e),...t})}export{I as ListBox,j as ListBoxCollection,v as ListBoxHeader,h as ListBoxItem};
 //# sourceMappingURL=list-box.js.map

package/dist/components/list-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"list-box.js","sources":["../../lib/components/list-box.tsx"],"sourcesContent":["import {\n    Collection as AriaCollection,\n    Header as AriaHeader,\n    ListBox as AriaListBox,\n    ListBoxItem as AriaListBoxItem,\n    ListBoxItemProps as AriaListBoxItemProps,\n    ListBoxProps as AriaListBoxProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\nimport { IcCheck } from './icons';\n\nexport const ListBoxCollection = AriaCollection;\n\nexport function ListBox<T extends object>({ className, ...props }: AriaListBoxProps<T>) {\n    return (\n        <AriaListBox\n            className={composeRenderProps(className, className =>\n                classNames(\n                    className,\n                    'group overflow-auto border bg-elevation-1 p-1 text-foreground outline-none',\n                    /* Empty */\n                    'data-[empty]:p-6 data-[empty]:text-center data-[empty]:body-sm'\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function ListBoxItem<T extends object>({ className, children, ...props }: AriaListBoxItemProps<T>) {\n    return (\n        <AriaListBoxItem\n            textValue={props.textValue || (typeof children === 'string' ? children : undefined)}\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'btn btn-ghost justify-start input-dim relative w-full',\n                    /* Selection */\n                    'data-[selection-mode]:pl-input',\n                    className\n                )\n            )}\n            {...props}\n        >\n            {composeRenderProps(children, (children, renderProps) => (\n                <>\n                    {renderProps.isSelected && (\n                        <span className=\"absolute left-2 flex size-icon items-center justify-center\">\n                            <IcCheck className=\"size-icon\" />\n                        </span>\n                    )}\n                    {children}\n                </>\n            ))}\n        </AriaListBoxItem>\n    );\n}\n\nexport function ListBoxHeader({ className, ...props }: React.ComponentProps<typeof AriaHeader>) {\n    return <AriaHeader className={classNames('py-1.5 pl-input pr-2 body font-semibold', className)} {...props} />;\n}\n"],"names":["ListBoxCollection","AriaCollection","ListBox","className","props","jsx","AriaListBox","composeRenderProps","classNames","ListBoxItem","children","AriaListBoxItem","renderProps","jsxs","Fragment","IcCheck","ListBoxHeader","AriaHeader"],"mappings":"+UAaO,MAAMA,EAAoBC,EAE1B,SAASC,EAA0B,CAAE,UAAAC,EAAW,GAAGC,GAA8B,CACpF,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACIL,EACA,6EAEA,gEAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASK,EAA8B,CAAE,UAAAN,EAAW,SAAAO,EAAU,GAAGN,GAAkC,CACtG,OACIC,EAACM,EAAA,CACG,UAAWP,EAAM,YAAc,OAAOM,GAAa,SAAWA,EAAW,QACzE,UAAWH,EAAmBJ,EAAWA,GACrCK,EACI,wDAEA,iCACAL,CAAA,CACJ,EAEH,GAAGC,EAEH,SAAAG,EAAmBG,EAAU,CAACA,EAAUE,IACrCC,EAAAC,EAAA,CACK,SAAA,CAAAF,EAAY,cACR,OAAA,CAAK,UAAU,6DACZ,SAAAP,EAACU,EAAA,CAAQ,UAAU,WAAA,CAAY,CAAA,CACnC,EAEHL,CAAA,EACL,CACH,CAAA,CAAA,CAGb,CAEO,SAASM,EAAc,CAAE,UAAAb,EAAW,GAAGC,GAAkD,CAC5F,OAAOC,EAACY,GAAW,UAAWT,EAAW,0CAA2CL,CAAS,EAAI,GAAGC,EAAO,CAC/G"}
+{"version":3,"file":"list-box.js","sources":["../../lib/components/list-box.tsx"],"sourcesContent":["import {\n    Collection as AriaCollection,\n    Header as AriaHeader,\n    ListBox as AriaListBox,\n    ListBoxItem as AriaListBoxItem,\n    ListBoxItemProps as AriaListBoxItemProps,\n    ListBoxProps as AriaListBoxProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\nimport { IcCheck } from './icons';\n\nexport const ListBoxCollection = AriaCollection;\n\nexport function ListBox<T extends object>({ className, ...props }: AriaListBoxProps<T>) {\n    return (\n        <AriaListBox\n            className={composeRenderProps(className, className =>\n                classNames(\n                    className,\n                    'group overflow-auto border bg-surface-primary p-1 text-text-primary outline-none',\n                    /* Empty */\n                    'data-[empty]:p-6 data-[empty]:text-center data-[empty]:body-sm'\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nexport function ListBoxItem<T extends object>({ className, children, ...props }: AriaListBoxItemProps<T>) {\n    return (\n        <AriaListBoxItem\n            textValue={props.textValue || (typeof children === 'string' ? children : undefined)}\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'btn btn-ghost justify-start input-dim relative w-full',\n                    /* Selection */\n                    'data-[selection-mode]:pl-input',\n                    className\n                )\n            )}\n            {...props}\n        >\n            {composeRenderProps(children, (children, renderProps) => (\n                <>\n                    {renderProps.isSelected && (\n                        <span className=\"absolute left-2 flex size-icon items-center justify-center\">\n                            <IcCheck className=\"size-icon\" />\n                        </span>\n                    )}\n                    {children}\n                </>\n            ))}\n        </AriaListBoxItem>\n    );\n}\n\nexport function ListBoxHeader({ className, ...props }: React.ComponentProps<typeof AriaHeader>) {\n    return <AriaHeader className={classNames('py-1.5 pl-input pr-2 body font-semibold', className)} {...props} />;\n}\n"],"names":["ListBoxCollection","AriaCollection","ListBox","className","props","jsx","AriaListBox","composeRenderProps","classNames","ListBoxItem","children","AriaListBoxItem","renderProps","jsxs","Fragment","IcCheck","ListBoxHeader","AriaHeader"],"mappings":"+UAaO,MAAMA,EAAoBC,EAE1B,SAASC,EAA0B,CAAE,UAAAC,EAAW,GAAGC,GAA8B,CACpF,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACIL,EACA,mFAEA,gEAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASK,EAA8B,CAAE,UAAAN,EAAW,SAAAO,EAAU,GAAGN,GAAkC,CACtG,OACIC,EAACM,EAAA,CACG,UAAWP,EAAM,YAAc,OAAOM,GAAa,SAAWA,EAAW,QACzE,UAAWH,EAAmBJ,EAAWA,GACrCK,EACI,wDAEA,iCACAL,CAAA,CACJ,EAEH,GAAGC,EAEH,SAAAG,EAAmBG,EAAU,CAACA,EAAUE,IACrCC,EAAAC,EAAA,CACK,SAAA,CAAAF,EAAY,cACR,OAAA,CAAK,UAAU,6DACZ,SAAAP,EAACU,EAAA,CAAQ,UAAU,WAAA,CAAY,CAAA,CACnC,EAEHL,CAAA,EACL,CACH,CAAA,CAAA,CAGb,CAEO,SAASM,EAAc,CAAE,UAAAb,EAAW,GAAGC,GAAkD,CAC5F,OAAOC,EAACY,GAAW,UAAWT,EAAW,0CAA2CL,CAAS,EAAI,GAAGC,EAAO,CAC/G"}

package/dist/components/loader.js

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import{classNames as m}from"../utilities/theme.js";import{IcLoader as t}from"./icons.js";import"clsx";import"@icons-pack/react-simple-icons";import"react";function c({className:o}){return r(t,{className:m("animate-spin size-icon text-foreground",o)})}export{c as Loader};
+import{jsx as o}from"react/jsx-runtime";import{classNames as t}from"../utilities/theme.js";import{IcLoader as m}from"./icons.js";import"clsx";import"@icons-pack/react-simple-icons";import"react";function c({className:r}){return o(m,{className:t("animate-spin size-icon text-text-primary",r)})}export{c as Loader};
 //# sourceMappingURL=loader.js.map

package/dist/components/loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"loader.js","sources":["../../lib/components/loader.tsx"],"sourcesContent":["import { classNames } from '../utilities/theme';\nimport { IcLoader } from './icons';\n\ninterface LoaderProps {\n    className?: string; // Define props interface\n}\n\nexport function Loader({ className }: LoaderProps) {\n    return <IcLoader className={classNames(`animate-spin size-icon text-foreground`, className)} />;\n}\n"],"names":["Loader","className","IcLoader","classNames"],"mappings":"mMAOO,SAASA,EAAO,CAAE,UAAAC,GAA0B,CAC/C,SAAQC,EAAA,CAAS,UAAWC,EAAW,yCAA0CF,CAAS,EAAG,CACjG"}
+{"version":3,"file":"loader.js","sources":["../../lib/components/loader.tsx"],"sourcesContent":["import { classNames } from '../utilities/theme';\nimport { IcLoader } from './icons';\n\ninterface LoaderProps {\n    className?: string; // Define props interface\n}\n\nexport function Loader({ className }: LoaderProps) {\n    return <IcLoader className={classNames(`animate-spin size-icon text-text-primary`, className)} />;\n}\n"],"names":["Loader","className","IcLoader","classNames"],"mappings":"mMAOO,SAASA,EAAO,CAAE,UAAAC,GAA0B,CAC/C,SAAQC,EAAA,CAAS,UAAWC,EAAW,2CAA4CF,CAAS,EAAG,CACnG"}

package/dist/components/offline-request-file-input.js

@@ -1,2 +1,2 @@
-"use client";import{jsxs as c,jsx as e}from"react/jsx-runtime";import{useState as m}from"react";import{getFieldErrorMessage as F}from"../utilities/form.js";import{useFieldContext as v}from"../utilities/form-context.js";import{classNames as h}from"../utilities/theme.js";import{Alert as y}from"./alert.js";import{Button as N}from"./button.js";import{FileTrigger as R}from"./file-trigger.js";import{FormField as q}from"./form.js";import{IcPlus as I}from"./icons.js";import"@tanstack/react-form";import"clsx";import"class-variance-authority";import"@icons-pack/react-simple-icons";import"react-aria-components";import"./loader.js";import"./card.js";function S({className:s,onSelect:t,isDisabled:l,onBlur:n}){const[i,r]=m(null),[o,f]=m(!1),[u,p]=m(null);async function g(a){return(await a.text()).trim()}const x=async a=>{p(null);const d=a?.[0]??null;if(!d){r(null),t(null);return}f(!0);try{const b=await g(d);r(d),t(b??null)}catch{p("Failed to read the file. Please try again."),r(null),t(null)}finally{f(!1)}n?.()};return c("div",{className:h("flex flex-col gap-2",s),children:[e(R,{onSelect:x,children:e(N,{size:"none",variant:"ghost",isDisabled:l||o,className:h("rounded-md border border-dashed border-foreground/20 bg-elevation-1 inline-flex justify-start items-center p-4"),onBlur:n,children:c("div",{className:"flex items-center gap-4",children:[e("div",{className:"flex size-12 items-center justify-center rounded-md border border-foreground/20 bg-elevation-2",children:e(I,{className:"size-icon"})}),c("div",{className:"flex flex-col text-left",children:[e("p",{className:"body-sm",children:i?i.name:"Upload file"}),e("p",{className:"body-sm",children:i?"Click to replace":"Generated by the SDK"})]})]})})}),u&&e(y,{variant:"destructive",children:u})]})}function J({label:s,description:t,isDisabled:l,className:n,...i}){const r=v({disabled:l});return e("div",{children:e(q,{label:s,description:t,requiredIndicator:r.isRequired,errorMessage:F(r),children:e(S,{...i,onSelect:o=>r.handleChange(o),onBlur:()=>r.handleBlur(),isDisabled:l||r.isSubmitting,className:n})})})}export{S as OfflineRequestFileInput,J as TfOfflineRequestFileInput};
+"use client";import{jsxs as c,jsx as e}from"react/jsx-runtime";import{useState as m}from"react";import{getFieldErrorMessage as b}from"../utilities/form.js";import{useFieldContext as F}from"../utilities/form-context.js";import{classNames as h}from"../utilities/theme.js";import{Alert as N}from"./alert.js";import{Button as v}from"./button.js";import{FileTrigger as R}from"./file-trigger.js";import{FormField as q}from"./form.js";import{IcPlus as I}from"./icons.js";import"@tanstack/react-form";import"clsx";import"class-variance-authority";import"@icons-pack/react-simple-icons";import"react-aria-components";import"./loader.js";import"./card.js";function S({className:s,onSelect:t,isDisabled:l,onBlur:n}){const[i,r]=m(null),[a,f]=m(!1),[u,p]=m(null);async function x(o){return(await o.text()).trim()}const g=async o=>{p(null);const d=o?.[0]??null;if(!d){r(null),t(null);return}f(!0);try{const y=await x(d);r(d),t(y??null)}catch{p("Failed to read the file. Please try again."),r(null),t(null)}finally{f(!1)}n?.()};return c("div",{className:h("flex flex-col gap-2",s),children:[e(R,{onSelect:g,children:e(v,{size:"none",variant:"ghost",isDisabled:l||a,className:h("rounded-md border border-dashed border-text-primary/20 bg-surface-primary inline-flex justify-start items-center p-4"),onBlur:n,children:c("div",{className:"flex items-center gap-4",children:[e("div",{className:"flex size-12 items-center justify-center rounded-md border border-text-primary/20 bg-surface-primary",children:e(I,{className:"size-icon"})}),c("div",{className:"flex flex-col text-left",children:[e("p",{className:"body-sm",children:i?i.name:"Upload file"}),e("p",{className:"body-sm",children:i?"Click to replace":"Generated by the SDK"})]})]})})}),u&&e(N,{variant:"destructive",children:u})]})}function J({label:s,description:t,isDisabled:l,className:n,...i}){const r=F({disabled:l});return e("div",{children:e(q,{label:s,description:t,requiredIndicator:r.isRequired,errorMessage:b(r),children:e(S,{...i,onSelect:a=>r.handleChange(a),onBlur:()=>r.handleBlur(),isDisabled:l||r.isSubmitting,className:n})})})}export{S as OfflineRequestFileInput,J as TfOfflineRequestFileInput};
 //# sourceMappingURL=offline-request-file-input.js.map

package/dist/components/offline-request-file-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"offline-request-file-input.js","sources":["../../lib/components/offline-request-file-input.tsx"],"sourcesContent":["'use client';\nimport { useState } from 'react';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { Alert } from './alert';\nimport { Button } from './button';\nimport { FileTrigger } from './file-trigger';\nimport { FormField, type FormFieldProps } from './form';\nimport { IcPlus } from './icons';\n\nexport type OfflineRequestFileInputProps = {\n    className?: string;\n    onSelect: (value: string | null) => void;\n    isDisabled?: boolean;\n    onBlur?: () => void;\n};\n\nexport function OfflineRequestFileInput({ className, onSelect, isDisabled, onBlur }: OfflineRequestFileInputProps) {\n    const [selectedFile, setSelectedFile] = useState<File | null>(null);\n    const [isReading, setIsReading] = useState(false);\n    const [error, setError] = useState<string | null>(null);\n\n    async function readOfflineRequestFileText(file: File): Promise<string> {\n        return (await file.text()).trim();\n    }\n\n    const handleSelect = async (files: FileList | null) => {\n        setError(null);\n\n        const file = files?.[0] ?? null;\n\n        if (!file) {\n            setSelectedFile(null);\n            onSelect(null);\n            return;\n        }\n\n        setIsReading(true);\n        try {\n            const text = await readOfflineRequestFileText(file);\n            setSelectedFile(file);\n            onSelect(text ?? null);\n        } catch {\n            setError('Failed to read the file. Please try again.');\n            setSelectedFile(null);\n            onSelect(null);\n        } finally {\n            setIsReading(false);\n        }\n        onBlur?.();\n    };\n\n    return (\n        <div className={classNames('flex flex-col gap-2', className)}>\n            <FileTrigger onSelect={handleSelect}>\n                <Button\n                    size=\"none\"\n                    variant=\"ghost\"\n                    isDisabled={isDisabled || isReading}\n                    className={classNames(\n                        'rounded-md border border-dashed border-foreground/20 bg-elevation-1 inline-flex justify-start items-center p-4'\n                    )}\n                    onBlur={onBlur}\n                >\n                    <div className=\"flex items-center gap-4\">\n                        <div className=\"flex size-12 items-center justify-center rounded-md border border-foreground/20 bg-elevation-2\">\n                            <IcPlus className=\"size-icon\" />\n                        </div>\n                        <div className=\"flex flex-col text-left\">\n                            <p className=\"body-sm\">{selectedFile ? selectedFile.name : 'Upload file'}</p>\n                            <p className=\"body-sm\">{selectedFile ? `Click to replace` : 'Generated by the SDK'}</p>\n                        </div>\n                    </div>\n                </Button>\n            </FileTrigger>\n\n            {error && <Alert variant=\"destructive\">{error}</Alert>}\n        </div>\n    );\n}\n\nexport function TfOfflineRequestFileInput({\n    label,\n    description,\n    isDisabled,\n    className,\n    ...props\n}: Omit<OfflineRequestFileInputProps, 'onSelect'> & FormFieldProps) {\n    const field = useFieldContext<string | null>({ disabled: isDisabled });\n    return (\n        <div>\n            <FormField\n                {...{\n                    label: label,\n                    description: description,\n                    requiredIndicator: field.isRequired,\n                    errorMessage: getFieldErrorMessage(field),\n                }}\n            >\n                <OfflineRequestFileInput\n                    {...props}\n                    onSelect={value => field.handleChange(value)}\n                    onBlur={() => field.handleBlur()}\n                    isDisabled={isDisabled || field.isSubmitting}\n                    className={className}\n                />\n            </FormField>\n        </div>\n    );\n}\n"],"names":["OfflineRequestFileInput","className","onSelect","isDisabled","onBlur","selectedFile","setSelectedFile","useState","isReading","setIsReading","error","setError","readOfflineRequestFileText","file","handleSelect","files","text","classNames","jsx","FileTrigger","Button","jsxs","IcPlus","Alert","TfOfflineRequestFileInput","label","description","props","field","useFieldContext","FormField","getFieldErrorMessage","value"],"mappings":"soBAkBO,SAASA,EAAwB,CAAE,UAAAC,EAAW,SAAAC,EAAU,WAAAC,EAAY,OAAAC,GAAwC,CAC/G,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAsB,IAAI,EAC5D,CAACC,EAAWC,CAAY,EAAIF,EAAS,EAAK,EAC1C,CAACG,EAAOC,CAAQ,EAAIJ,EAAwB,IAAI,EAEtD,eAAeK,EAA2BC,EAA6B,CACnE,OAAQ,MAAMA,EAAK,KAAA,GAAQ,KAAA,CAC/B,CAEA,MAAMC,EAAe,MAAOC,GAA2B,CACnDJ,EAAS,IAAI,EAEb,MAAME,EAAOE,IAAQ,CAAC,GAAK,KAE3B,GAAI,CAACF,EAAM,CACPP,EAAgB,IAAI,EACpBJ,EAAS,IAAI,EACb,MACJ,CAEAO,EAAa,EAAI,EACjB,GAAI,CACA,MAAMO,EAAO,MAAMJ,EAA2BC,CAAI,EAClDP,EAAgBO,CAAI,EACpBX,EAASc,GAAQ,IAAI,CACzB,MAAQ,CACJL,EAAS,4CAA4C,EACrDL,EAAgB,IAAI,EACpBJ,EAAS,IAAI,CACjB,QAAA,CACIO,EAAa,EAAK,CACtB,CACAL,IAAA,CACJ,EAEA,SACK,MAAA,CAAI,UAAWa,EAAW,sBAAuBhB,CAAS,EACvD,SAAA,CAAAiB,EAACC,EAAA,CAAY,SAAUL,EACnB,SAAAI,EAACE,EAAA,CACG,KAAK,OACL,QAAQ,QACR,WAAYjB,GAAcK,EAC1B,UAAWS,EACP,gHAAA,EAEJ,OAAAb,EAEA,SAAAiB,EAAC,MAAA,CAAI,UAAU,0BACX,SAAA,CAAAH,EAAC,OAAI,UAAU,iGACX,WAACI,EAAA,CAAO,UAAU,YAAY,CAAA,CAClC,EACAD,EAAC,MAAA,CAAI,UAAU,0BACX,SAAA,CAAAH,EAAC,KAAE,UAAU,UAAW,SAAAb,EAAeA,EAAa,KAAO,cAAc,IACxE,IAAA,CAAE,UAAU,UAAW,SAAAA,EAAe,mBAAqB,sBAAA,CAAuB,CAAA,CAAA,CACvF,CAAA,CAAA,CACJ,CAAA,CAAA,EAER,EAECK,GAASQ,EAACK,EAAA,CAAM,QAAQ,cAAe,SAAAb,CAAA,CAAM,CAAA,EAClD,CAER,CAEO,SAASc,EAA0B,CACtC,MAAAC,EACA,YAAAC,EACA,WAAAvB,EACA,UAAAF,EACA,GAAG0B,CACP,EAAoE,CAChE,MAAMC,EAAQC,EAA+B,CAAE,SAAU1B,EAAY,EACrE,SACK,MAAA,CACG,SAAAe,EAACY,EAAA,CAEO,MAAAL,EACA,YAAAC,EACA,kBAAmBE,EAAM,WACzB,aAAcG,EAAqBH,CAAK,EAG5C,SAAAV,EAAClB,EAAA,CACI,GAAG2B,EACJ,SAAUK,GAASJ,EAAM,aAAaI,CAAK,EAC3C,OAAQ,IAAMJ,EAAM,WAAA,EACpB,WAAYzB,GAAcyB,EAAM,aAChC,UAAA3B,CAAA,CAAA,CACJ,CAAA,EAER,CAER"}
+{"version":3,"file":"offline-request-file-input.js","sources":["../../lib/components/offline-request-file-input.tsx"],"sourcesContent":["'use client';\nimport { useState } from 'react';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { Alert } from './alert';\nimport { Button } from './button';\nimport { FileTrigger } from './file-trigger';\nimport { FormField, type FormFieldProps } from './form';\nimport { IcPlus } from './icons';\n\nexport type OfflineRequestFileInputProps = {\n    className?: string;\n    onSelect: (value: string | null) => void;\n    isDisabled?: boolean;\n    onBlur?: () => void;\n};\n\nexport function OfflineRequestFileInput({ className, onSelect, isDisabled, onBlur }: OfflineRequestFileInputProps) {\n    const [selectedFile, setSelectedFile] = useState<File | null>(null);\n    const [isReading, setIsReading] = useState(false);\n    const [error, setError] = useState<string | null>(null);\n\n    async function readOfflineRequestFileText(file: File): Promise<string> {\n        return (await file.text()).trim();\n    }\n\n    const handleSelect = async (files: FileList | null) => {\n        setError(null);\n\n        const file = files?.[0] ?? null;\n\n        if (!file) {\n            setSelectedFile(null);\n            onSelect(null);\n            return;\n        }\n\n        setIsReading(true);\n        try {\n            const text = await readOfflineRequestFileText(file);\n            setSelectedFile(file);\n            onSelect(text ?? null);\n        } catch {\n            setError('Failed to read the file. Please try again.');\n            setSelectedFile(null);\n            onSelect(null);\n        } finally {\n            setIsReading(false);\n        }\n        onBlur?.();\n    };\n\n    return (\n        <div className={classNames('flex flex-col gap-2', className)}>\n            <FileTrigger onSelect={handleSelect}>\n                <Button\n                    size=\"none\"\n                    variant=\"ghost\"\n                    isDisabled={isDisabled || isReading}\n                    className={classNames(\n                        'rounded-md border border-dashed border-text-primary/20 bg-surface-primary inline-flex justify-start items-center p-4'\n                    )}\n                    onBlur={onBlur}\n                >\n                    <div className=\"flex items-center gap-4\">\n                        <div className=\"flex size-12 items-center justify-center rounded-md border border-text-primary/20 bg-surface-primary\">\n                            <IcPlus className=\"size-icon\" />\n                        </div>\n                        <div className=\"flex flex-col text-left\">\n                            <p className=\"body-sm\">{selectedFile ? selectedFile.name : 'Upload file'}</p>\n                            <p className=\"body-sm\">{selectedFile ? `Click to replace` : 'Generated by the SDK'}</p>\n                        </div>\n                    </div>\n                </Button>\n            </FileTrigger>\n\n            {error && <Alert variant=\"destructive\">{error}</Alert>}\n        </div>\n    );\n}\n\nexport function TfOfflineRequestFileInput({\n    label,\n    description,\n    isDisabled,\n    className,\n    ...props\n}: Omit<OfflineRequestFileInputProps, 'onSelect'> & FormFieldProps) {\n    const field = useFieldContext<string | null>({ disabled: isDisabled });\n    return (\n        <div>\n            <FormField\n                {...{\n                    label: label,\n                    description: description,\n                    requiredIndicator: field.isRequired,\n                    errorMessage: getFieldErrorMessage(field),\n                }}\n            >\n                <OfflineRequestFileInput\n                    {...props}\n                    onSelect={value => field.handleChange(value)}\n                    onBlur={() => field.handleBlur()}\n                    isDisabled={isDisabled || field.isSubmitting}\n                    className={className}\n                />\n            </FormField>\n        </div>\n    );\n}\n"],"names":["OfflineRequestFileInput","className","onSelect","isDisabled","onBlur","selectedFile","setSelectedFile","useState","isReading","setIsReading","error","setError","readOfflineRequestFileText","file","handleSelect","files","text","classNames","jsx","FileTrigger","Button","jsxs","IcPlus","Alert","TfOfflineRequestFileInput","label","description","props","field","useFieldContext","FormField","getFieldErrorMessage","value"],"mappings":"soBAkBO,SAASA,EAAwB,CAAE,UAAAC,EAAW,SAAAC,EAAU,WAAAC,EAAY,OAAAC,GAAwC,CAC/G,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAsB,IAAI,EAC5D,CAACC,EAAWC,CAAY,EAAIF,EAAS,EAAK,EAC1C,CAACG,EAAOC,CAAQ,EAAIJ,EAAwB,IAAI,EAEtD,eAAeK,EAA2BC,EAA6B,CACnE,OAAQ,MAAMA,EAAK,KAAA,GAAQ,KAAA,CAC/B,CAEA,MAAMC,EAAe,MAAOC,GAA2B,CACnDJ,EAAS,IAAI,EAEb,MAAME,EAAOE,IAAQ,CAAC,GAAK,KAE3B,GAAI,CAACF,EAAM,CACPP,EAAgB,IAAI,EACpBJ,EAAS,IAAI,EACb,MACJ,CAEAO,EAAa,EAAI,EACjB,GAAI,CACA,MAAMO,EAAO,MAAMJ,EAA2BC,CAAI,EAClDP,EAAgBO,CAAI,EACpBX,EAASc,GAAQ,IAAI,CACzB,MAAQ,CACJL,EAAS,4CAA4C,EACrDL,EAAgB,IAAI,EACpBJ,EAAS,IAAI,CACjB,QAAA,CACIO,EAAa,EAAK,CACtB,CACAL,IAAA,CACJ,EAEA,SACK,MAAA,CAAI,UAAWa,EAAW,sBAAuBhB,CAAS,EACvD,SAAA,CAAAiB,EAACC,EAAA,CAAY,SAAUL,EACnB,SAAAI,EAACE,EAAA,CACG,KAAK,OACL,QAAQ,QACR,WAAYjB,GAAcK,EAC1B,UAAWS,EACP,sHAAA,EAEJ,OAAAb,EAEA,SAAAiB,EAAC,MAAA,CAAI,UAAU,0BACX,SAAA,CAAAH,EAAC,OAAI,UAAU,uGACX,WAACI,EAAA,CAAO,UAAU,YAAY,CAAA,CAClC,EACAD,EAAC,MAAA,CAAI,UAAU,0BACX,SAAA,CAAAH,EAAC,KAAE,UAAU,UAAW,SAAAb,EAAeA,EAAa,KAAO,cAAc,IACxE,IAAA,CAAE,UAAU,UAAW,SAAAA,EAAe,mBAAqB,sBAAA,CAAuB,CAAA,CAAA,CACvF,CAAA,CAAA,CACJ,CAAA,CAAA,EAER,EAECK,GAASQ,EAACK,EAAA,CAAM,QAAQ,cAAe,SAAAb,CAAA,CAAM,CAAA,EAClD,CAER,CAEO,SAASc,EAA0B,CACtC,MAAAC,EACA,YAAAC,EACA,WAAAvB,EACA,UAAAF,EACA,GAAG0B,CACP,EAAoE,CAChE,MAAMC,EAAQC,EAA+B,CAAE,SAAU1B,EAAY,EACrE,SACK,MAAA,CACG,SAAAe,EAACY,EAAA,CAEO,MAAAL,EACA,YAAAC,EACA,kBAAmBE,EAAM,WACzB,aAAcG,EAAqBH,CAAK,EAG5C,SAAAV,EAAClB,EAAA,CACI,GAAG2B,EACJ,SAAUK,GAASJ,EAAM,aAAaI,CAAK,EAC3C,OAAQ,IAAMJ,EAAM,WAAA,EACpB,WAAYzB,GAAcyB,EAAM,aAChC,UAAA3B,CAAA,CAAA,CACJ,CAAA,EAER,CAER"}

package/dist/components/popover.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import{Popover as r,composeRenderProps as m,DialogTrigger as d,Dialog as l}from"react-aria-components";import{classNames as a}from"../utilities/theme.js";import"clsx";const c=d,u=({className:o,offset:e=4,...i})=>t(r,{offset:e,className:m(o,n=>a("z-50 border bg-elevation-1 text-foreground outline-none max-w-lg rounded-md","data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95","data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95","data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2",n)),...i});function x({className:o,...e}){return t(l,{className:a("p-icon outline-0",o),...e})}export{u as Popover,x as PopoverDialog,c as PopoverTrigger};
+import{jsx as t}from"react/jsx-runtime";import{Popover as n,composeRenderProps as m,DialogTrigger as d,Dialog as p}from"react-aria-components";import{classNames as a}from"../utilities/theme.js";import"clsx";const f=d,u=({className:e,offset:o=4,...i})=>t(n,{offset:o,className:m(e,r=>a("z-50 border bg-surface-primary text-text-primary outline-none max-w-lg rounded-md","data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95","data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95","data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2",r)),...i});function x({className:e,...o}){return t(p,{className:a("p-icon outline-0",e),...o})}export{u as Popover,x as PopoverDialog,f as PopoverTrigger};
 //# sourceMappingURL=popover.js.map

package/dist/components/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../lib/components/popover.tsx"],"sourcesContent":["import {\n    Dialog as AriaDialog,\n    DialogProps as AriaDialogProps,\n    DialogTrigger as AriaDialogTrigger,\n    Popover as AriaPopover,\n    PopoverProps as AriaPopoverProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\n\nexport const PopoverTrigger = AriaDialogTrigger;\n\nexport const Popover = ({ className, offset = 4, ...props }: AriaPopoverProps) => (\n    <AriaPopover\n        offset={offset}\n        className={composeRenderProps(className, className =>\n            classNames(\n                'z-50 border bg-elevation-1 text-foreground outline-none max-w-lg rounded-md',\n                /* Entering */\n                'data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95',\n                /* Exiting */\n                'data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95',\n                /* Placement */\n                'data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2',\n                className\n            )\n        )}\n        {...props}\n    />\n);\n\nexport function PopoverDialog({ className, ...props }: AriaDialogProps) {\n    return <AriaDialog className={classNames('p-icon outline-0', className)} {...props} />;\n}\n"],"names":["PopoverTrigger","AriaDialogTrigger","Popover","className","offset","props","jsx","AriaPopover","composeRenderProps","classNames","PopoverDialog","AriaDialog"],"mappings":"+MAWO,MAAMA,EAAiBC,EAEjBC,EAAU,CAAC,CAAE,UAAAC,EAAW,OAAAC,EAAS,EAAG,GAAGC,KAChDC,EAACC,EAAA,CACG,OAAAH,EACA,UAAWI,EAAmBL,EAAWA,GACrCM,EACI,8EAEA,kFAEA,kFAEA,kLACAN,CAAA,CACJ,EAEH,GAAGE,CAAA,CACR,EAGG,SAASK,EAAc,CAAE,UAAAP,EAAW,GAAGE,GAA0B,CACpE,OAAOC,EAACK,GAAW,UAAWF,EAAW,mBAAoBN,CAAS,EAAI,GAAGE,EAAO,CACxF"}
+{"version":3,"file":"popover.js","sources":["../../lib/components/popover.tsx"],"sourcesContent":["import {\n    Dialog as AriaDialog,\n    DialogProps as AriaDialogProps,\n    DialogTrigger as AriaDialogTrigger,\n    Popover as AriaPopover,\n    PopoverProps as AriaPopoverProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\n\nexport const PopoverTrigger = AriaDialogTrigger;\n\nexport const Popover = ({ className, offset = 4, ...props }: AriaPopoverProps) => (\n    <AriaPopover\n        offset={offset}\n        className={composeRenderProps(className, className =>\n            classNames(\n                'z-50 border bg-surface-primary text-text-primary outline-none max-w-lg rounded-md',\n                /* Entering */\n                'data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95',\n                /* Exiting */\n                'data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95',\n                /* Placement */\n                'data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2',\n                className\n            )\n        )}\n        {...props}\n    />\n);\n\nexport function PopoverDialog({ className, ...props }: AriaDialogProps) {\n    return <AriaDialog className={classNames('p-icon outline-0', className)} {...props} />;\n}\n"],"names":["PopoverTrigger","AriaDialogTrigger","Popover","className","offset","props","jsx","AriaPopover","composeRenderProps","classNames","PopoverDialog","AriaDialog"],"mappings":"+MAWO,MAAMA,EAAiBC,EAEjBC,EAAU,CAAC,CAAE,UAAAC,EAAW,OAAAC,EAAS,EAAG,GAAGC,KAChDC,EAACC,EAAA,CACG,OAAAH,EACA,UAAWI,EAAmBL,EAAWA,GACrCM,EACI,oFAEA,kFAEA,kFAEA,kLACAN,CAAA,CACJ,EAEH,GAAGE,CAAA,CACR,EAGG,SAASK,EAAc,CAAE,UAAAP,EAAW,GAAGE,GAA0B,CACpE,OAAOC,EAACK,GAAW,UAAWF,EAAW,mBAAoBN,CAAS,EAAI,GAAGE,EAAO,CACxF"}

package/dist/components/progress-bar.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as e,jsxs as l,Fragment as m}from"react/jsx-runtime";import{useId as n}from"react";import{ProgressBar as c,composeRenderProps as f}from"react-aria-components";import{classNames as i}from"../utilities/theme.js";import"clsx";function x({className:t,label:r,meterClassName:a,...d}){const o=n();return e(c,{...d,"aria-labelledby":r?o:void 0,className:f(t,s=>i("flex items-center gap-2",s)),children:({percentage:s})=>l(m,{children:[e("div",{className:i("h-2 shrink-0 overflow-hidden rounded-full bg-primary/15",a??"w-full"),children:e("div",{className:i("h-full bg-primary transition-[width] duration-300 ease-out"),style:{width:`${s}%`}})}),r&&e("div",{className:"flex items-center justify-between body-sm",children:e("div",{id:o,className:"text-foreground",children:r})})]})})}export{x as ProgressBar};
+"use client";import{jsx as e,jsxs as l,Fragment as m}from"react/jsx-runtime";import{useId as n}from"react";import{ProgressBar as c,composeRenderProps as f}from"react-aria-components";import{classNames as i}from"../utilities/theme.js";import"clsx";function y({className:a,label:r,meterClassName:o,...d}){const t=n();return e(c,{...d,"aria-labelledby":r?t:void 0,className:f(a,s=>i("flex items-center gap-2",s)),children:({percentage:s})=>l(m,{children:[e("div",{className:i("h-2 shrink-0 overflow-hidden rounded-full bg-primary/15",o??"w-full"),children:e("div",{className:i("h-full bg-primary transition-[width] duration-300 ease-out"),style:{width:`${s}%`}})}),r&&e("div",{className:"flex items-center justify-between body-sm",children:e("div",{id:t,className:"text-text-primary",children:r})})]})})}export{y as ProgressBar};
 //# sourceMappingURL=progress-bar.js.map

package/dist/components/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sources":["../../lib/components/progress-bar.tsx"],"sourcesContent":["'use client';\nimport { useId, type ReactNode } from 'react';\nimport {\n    ProgressBar as AriaProgressBar,\n    composeRenderProps,\n    type ProgressBarProps as AriaProgressBarProps,\n} from 'react-aria-components';\nimport { classNames } from '../utilities/theme';\n\nexport type ProgressBarProps = AriaProgressBarProps & {\n    label?: ReactNode;\n    meterClassName?: string;\n};\n\nexport function ProgressBar({ className, label, meterClassName, ...props }: ProgressBarProps) {\n    const labelId = useId();\n    return (\n        <AriaProgressBar\n            {...props}\n            aria-labelledby={label ? labelId : undefined}\n            className={composeRenderProps(className, className => classNames('flex items-center gap-2', className))}\n        >\n            {({ percentage }) => (\n                <>\n                    <div\n                        className={classNames(\n                            'h-2 shrink-0 overflow-hidden rounded-full bg-primary/15',\n                            meterClassName ?? 'w-full'\n                        )}\n                    >\n                        <div\n                            className={classNames('h-full bg-primary transition-[width] duration-300 ease-out')}\n                            style={{ width: `${percentage}%` }}\n                        />\n                    </div>\n                    {label && (\n                        <div className=\"flex items-center justify-between body-sm\">\n                            <div id={labelId} className=\"text-foreground\">\n                                {label}\n                            </div>\n                        </div>\n                    )}\n                </>\n            )}\n        </AriaProgressBar>\n    );\n}\n"],"names":["ProgressBar","className","label","meterClassName","props","labelId","useId","jsx","AriaProgressBar","composeRenderProps","classNames","percentage","jsxs","Fragment"],"mappings":"uPAcO,SAASA,EAAY,CAAE,UAAAC,EAAW,MAAAC,EAAO,eAAAC,EAAgB,GAAGC,GAA2B,CAC1F,MAAMC,EAAUC,EAAA,EAChB,OACIC,EAACC,EAAA,CACI,GAAGJ,EACJ,kBAAiBF,EAAQG,EAAU,OACnC,UAAWI,EAAmBR,EAAWA,GAAaS,EAAW,0BAA2BT,CAAS,CAAC,EAErG,SAAA,CAAC,CAAE,WAAAU,CAAA,IACAC,EAAAC,EAAA,CACI,SAAA,CAAAN,EAAC,MAAA,CACG,UAAWG,EACP,0DACAP,GAAkB,QAAA,EAGtB,SAAAI,EAAC,MAAA,CACG,UAAWG,EAAW,4DAA4D,EAClF,MAAO,CAAE,MAAO,GAAGC,CAAU,GAAA,CAAI,CAAA,CACrC,CAAA,EAEHT,GACGK,EAAC,MAAA,CAAI,UAAU,4CACX,SAAAA,EAAC,MAAA,CAAI,GAAIF,EAAS,UAAU,kBACvB,SAAAH,CAAA,CACL,CAAA,CACJ,CAAA,CAAA,CAER,CAAA,CAAA,CAIhB"}
+{"version":3,"file":"progress-bar.js","sources":["../../lib/components/progress-bar.tsx"],"sourcesContent":["'use client';\nimport { useId, type ReactNode } from 'react';\nimport {\n    ProgressBar as AriaProgressBar,\n    composeRenderProps,\n    type ProgressBarProps as AriaProgressBarProps,\n} from 'react-aria-components';\nimport { classNames } from '../utilities/theme';\n\nexport type ProgressBarProps = AriaProgressBarProps & {\n    label?: ReactNode;\n    meterClassName?: string;\n};\n\nexport function ProgressBar({ className, label, meterClassName, ...props }: ProgressBarProps) {\n    const labelId = useId();\n    return (\n        <AriaProgressBar\n            {...props}\n            aria-labelledby={label ? labelId : undefined}\n            className={composeRenderProps(className, className => classNames('flex items-center gap-2', className))}\n        >\n            {({ percentage }) => (\n                <>\n                    <div\n                        className={classNames(\n                            'h-2 shrink-0 overflow-hidden rounded-full bg-primary/15',\n                            meterClassName ?? 'w-full'\n                        )}\n                    >\n                        <div\n                            className={classNames('h-full bg-primary transition-[width] duration-300 ease-out')}\n                            style={{ width: `${percentage}%` }}\n                        />\n                    </div>\n                    {label && (\n                        <div className=\"flex items-center justify-between body-sm\">\n                            <div id={labelId} className=\"text-text-primary\">\n                                {label}\n                            </div>\n                        </div>\n                    )}\n                </>\n            )}\n        </AriaProgressBar>\n    );\n}\n"],"names":["ProgressBar","className","label","meterClassName","props","labelId","useId","jsx","AriaProgressBar","composeRenderProps","classNames","percentage","jsxs","Fragment"],"mappings":"uPAcO,SAASA,EAAY,CAAE,UAAAC,EAAW,MAAAC,EAAO,eAAAC,EAAgB,GAAGC,GAA2B,CAC1F,MAAMC,EAAUC,EAAA,EAChB,OACIC,EAACC,EAAA,CACI,GAAGJ,EACJ,kBAAiBF,EAAQG,EAAU,OACnC,UAAWI,EAAmBR,EAAWA,GAAaS,EAAW,0BAA2BT,CAAS,CAAC,EAErG,SAAA,CAAC,CAAE,WAAAU,CAAA,IACAC,EAAAC,EAAA,CACI,SAAA,CAAAN,EAAC,MAAA,CACG,UAAWG,EACP,0DACAP,GAAkB,QAAA,EAGtB,SAAAI,EAAC,MAAA,CACG,UAAWG,EAAW,4DAA4D,EAClF,MAAO,CAAE,MAAO,GAAGC,CAAU,GAAA,CAAI,CAAA,CACrC,CAAA,EAEHT,GACGK,EAAC,MAAA,CAAI,UAAU,4CACX,SAAAA,EAAC,MAAA,CAAI,GAAIF,EAAS,UAAU,oBACvB,SAAAH,CAAA,CACL,CAAA,CACJ,CAAA,CAAA,CAER,CAAA,CAAA,CAIhB"}

package/dist/components/searchfield.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as d}from"react/jsx-runtime";import{composeRenderProps as t,SearchField as p,Input as s}from"react-aria-components";import{classNames as a}from"../utilities/theme.js";import{FormField as u,FieldGroup as h,FormFieldButton as f}from"./form.js";import{IcSearch as F,IcRemove as N}from"./icons.js";import"clsx";import"class-variance-authority";import"./card.js";import"@icons-pack/react-simple-icons";import"react";function S({className:r,...i}){return e(p,{className:t(r,o=>a("group",o)),...i})}function g({className:r,...i}){return e(s,{className:t(r,o=>a("min-w-0 ring-0 outline-0 flex-1 bg-elevation-1 px-2 py-1.5 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",o)),...i})}function x(){return e(f,{className:"group-data-[empty]:invisible",children:e(N,{"aria-hidden":!0,className:"size-icon"})})}function B({label:r,description:i,className:o,errorMessage:c,requiredIndicator:n,...l}){return e(S,{className:t(o,m=>a("group form-field",m)),...l,children:e(u,{label:r,description:i,errorMessage:c,requiredIndicator:n,children:d(h,{children:[e(F,{"aria-hidden":!0,className:"size-icon opacity-80"}),e(g,{placeholder:""}),e(x,{})]})})})}export{B as SearchField};
+import{jsx as e,jsxs as d}from"react/jsx-runtime";import{composeRenderProps as a,SearchField as p,Input as s}from"react-aria-components";import{classNames as t}from"../utilities/theme.js";import{FormField as u,FieldGroup as h,FormFieldButton as f}from"./form.js";import{IcSearch as F,IcRemove as N}from"./icons.js";import"clsx";import"class-variance-authority";import"./card.js";import"@icons-pack/react-simple-icons";import"react";function S({className:r,...i}){return e(p,{className:a(r,o=>t("group",o)),...i})}function g({className:r,...i}){return e(s,{className:a(r,o=>t("min-w-0 ring-0 outline-0 flex-1 bg-surface-primary px-2 py-1.5 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",o)),...i})}function x(){return e(f,{className:"group-data-[empty]:invisible",children:e(N,{"aria-hidden":!0,className:"size-icon"})})}function B({label:r,description:i,className:o,errorMessage:c,requiredIndicator:n,...m}){return e(S,{className:a(o,l=>t("group form-field",l)),...m,children:e(u,{label:r,description:i,errorMessage:c,requiredIndicator:n,children:d(h,{children:[e(F,{"aria-hidden":!0,className:"size-icon opacity-80"}),e(g,{placeholder:""}),e(x,{})]})})})}export{B as SearchField};
 //# sourceMappingURL=searchfield.js.map

package/dist/components/searchfield.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchfield.js","sources":["../../lib/components/searchfield.tsx"],"sourcesContent":["import {\n    Input as AriaInput,\n    InputProps as AriaInputProps,\n    SearchField as AriaSearchField,\n    SearchFieldProps as AriaSearchFieldProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\n\nimport { FieldGroup, FormField, FormFieldButton, type FormFieldProps } from './form';\nimport { IcRemove, IcSearch } from './icons';\n\nfunction ASearchField({ className, ...props }: AriaSearchFieldProps) {\n    return (\n        <AriaSearchField\n            className={composeRenderProps(className, className => classNames('group', className))}\n            {...props}\n        />\n    );\n}\n\nfunction ASearchFieldInput({ className, ...props }: AriaInputProps) {\n    return (\n        <AriaInput\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'min-w-0 ring-0 outline-0 flex-1 bg-elevation-1 px-2 py-1.5 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SearchFieldClear() {\n    return (\n        <FormFieldButton className={'group-data-[empty]:invisible'}>\n            <IcRemove aria-hidden className=\"size-icon\" />\n        </FormFieldButton>\n    );\n}\n\nexport interface SearchFieldProps extends AriaSearchFieldProps, FormFieldProps {}\nexport function SearchField({\n    label,\n    description,\n    className,\n    errorMessage,\n    requiredIndicator,\n    ...props\n}: SearchFieldProps) {\n    return (\n        <ASearchField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField {...{ label, description, errorMessage, requiredIndicator }}>\n                <FieldGroup>\n                    <IcSearch aria-hidden className=\"size-icon opacity-80\" />\n                    <ASearchFieldInput placeholder=\"\" />\n                    <SearchFieldClear />\n                </FieldGroup>\n            </FormField>\n        </ASearchField>\n    );\n}\n"],"names":["ASearchField","className","props","jsx","AriaSearchField","composeRenderProps","classNames","ASearchFieldInput","AriaInput","SearchFieldClear","FormFieldButton","IcRemove","SearchField","label","description","errorMessage","requiredIndicator","FormField","jsxs","FieldGroup","IcSearch"],"mappings":"gbAaA,SAASA,EAAa,CAAE,UAAAC,EAAW,GAAGC,GAA+B,CACjE,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GAAaK,EAAW,QAASL,CAAS,CAAC,EACnF,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASK,EAAkB,CAAE,UAAAN,EAAW,GAAGC,GAAyB,CAChE,OACIC,EAACK,EAAA,CACG,UAAWH,EAAmBJ,EAAWA,GACrCK,EACI,wIACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASO,GAAmB,CACxB,OACIN,EAACO,EAAA,CAAgB,UAAW,+BACxB,SAAAP,EAACQ,GAAS,cAAW,GAAC,UAAU,WAAA,CAAY,CAAA,CAChD,CAER,CAGO,SAASC,EAAY,CACxB,MAAAC,EACA,YAAAC,EACA,UAAAb,EACA,aAAAc,EACA,kBAAAC,EACA,GAAGd,CACP,EAAqB,CACjB,OACIC,EAACH,EAAA,CACG,UAAWK,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,SAAAC,EAACc,EAAA,CAAgB,MAAAJ,EAAO,YAAAC,EAAa,aAAAC,EAAc,kBAAAC,EAC/C,SAAAE,EAACC,EAAA,CACG,SAAA,CAAAhB,EAACiB,EAAA,CAAS,cAAW,GAAC,UAAU,uBAAuB,EACvDjB,EAACI,EAAA,CAAkB,YAAY,EAAA,CAAG,IACjCE,EAAA,CAAA,CAAiB,CAAA,CAAA,CACtB,CAAA,CACJ,CAAA,CAAA,CAGZ"}
+{"version":3,"file":"searchfield.js","sources":["../../lib/components/searchfield.tsx"],"sourcesContent":["import {\n    Input as AriaInput,\n    InputProps as AriaInputProps,\n    SearchField as AriaSearchField,\n    SearchFieldProps as AriaSearchFieldProps,\n    composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\n\nimport { FieldGroup, FormField, FormFieldButton, type FormFieldProps } from './form';\nimport { IcRemove, IcSearch } from './icons';\n\nfunction ASearchField({ className, ...props }: AriaSearchFieldProps) {\n    return (\n        <AriaSearchField\n            className={composeRenderProps(className, className => classNames('group', className))}\n            {...props}\n        />\n    );\n}\n\nfunction ASearchFieldInput({ className, ...props }: AriaInputProps) {\n    return (\n        <AriaInput\n            className={composeRenderProps(className, className =>\n                classNames(\n                    'min-w-0 ring-0 outline-0 flex-1 bg-surface-primary px-2 py-1.5 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden',\n                    className\n                )\n            )}\n            {...props}\n        />\n    );\n}\n\nfunction SearchFieldClear() {\n    return (\n        <FormFieldButton className={'group-data-[empty]:invisible'}>\n            <IcRemove aria-hidden className=\"size-icon\" />\n        </FormFieldButton>\n    );\n}\n\nexport interface SearchFieldProps extends AriaSearchFieldProps, FormFieldProps {}\nexport function SearchField({\n    label,\n    description,\n    className,\n    errorMessage,\n    requiredIndicator,\n    ...props\n}: SearchFieldProps) {\n    return (\n        <ASearchField\n            className={composeRenderProps(className, className => classNames('group form-field', className))}\n            {...props}\n        >\n            <FormField {...{ label, description, errorMessage, requiredIndicator }}>\n                <FieldGroup>\n                    <IcSearch aria-hidden className=\"size-icon opacity-80\" />\n                    <ASearchFieldInput placeholder=\"\" />\n                    <SearchFieldClear />\n                </FieldGroup>\n            </FormField>\n        </ASearchField>\n    );\n}\n"],"names":["ASearchField","className","props","jsx","AriaSearchField","composeRenderProps","classNames","ASearchFieldInput","AriaInput","SearchFieldClear","FormFieldButton","IcRemove","SearchField","label","description","errorMessage","requiredIndicator","FormField","jsxs","FieldGroup","IcSearch"],"mappings":"gbAaA,SAASA,EAAa,CAAE,UAAAC,EAAW,GAAGC,GAA+B,CACjE,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GAAaK,EAAW,QAASL,CAAS,CAAC,EACnF,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASK,EAAkB,CAAE,UAAAN,EAAW,GAAGC,GAAyB,CAChE,OACIC,EAACK,EAAA,CACG,UAAWH,EAAmBJ,EAAWA,GACrCK,EACI,4IACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASO,GAAmB,CACxB,OACIN,EAACO,EAAA,CAAgB,UAAW,+BACxB,SAAAP,EAACQ,GAAS,cAAW,GAAC,UAAU,WAAA,CAAY,CAAA,CAChD,CAER,CAGO,SAASC,EAAY,CACxB,MAAAC,EACA,YAAAC,EACA,UAAAb,EACA,aAAAc,EACA,kBAAAC,EACA,GAAGd,CACP,EAAqB,CACjB,OACIC,EAACH,EAAA,CACG,UAAWK,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,SAAAC,EAACc,EAAA,CAAgB,MAAAJ,EAAO,YAAAC,EAAa,aAAAC,EAAc,kBAAAC,EAC/C,SAAAE,EAACC,EAAA,CACG,SAAA,CAAAhB,EAACiB,EAAA,CAAS,cAAW,GAAC,UAAU,uBAAuB,EACvDjB,EAACI,EAAA,CAAkB,YAAY,EAAA,CAAG,IACjCE,EAAA,CAAA,CAAiB,CAAA,CAAA,CACtB,CAAA,CACJ,CAAA,CAAA,CAGZ"}

package/dist/components/select.js

@@ -1,2 +1,2 @@
-"use client";import{jsx as i,jsxs as d,Fragment as p}from"react/jsx-runtime";import{useId as g}from"react";import{Select as h,composeRenderProps as l,SelectValue as S,ListBox as x}from"react-aria-components";import{Button as N}from"./button.js";import{getFieldErrorMessage as b}from"../utilities/form.js";import{useFieldContext as B}from"../utilities/form-context.js";import{classNames as o}from"../utilities/theme.js";import{FormField as I}from"./form.js";import{IcDown as w}from"./icons.js";import{ListBoxItem as F,ListBoxCollection as v,ListBoxHeader as L}from"./list-box.js";import{Popover as C}from"./popover.js";import"class-variance-authority";import"./loader.js";import"clsx";import"@icons-pack/react-simple-icons";import"@tanstack/react-form";import"./card.js";const D=h,j=F,Z=L,_=v,y=({className:r,...e})=>i(S,{className:l(r,t=>o("line-clamp-1 data-[placeholder]:text-muted-foreground","[&>[slot=description]]:hidden",t)),...e});function P({className:r,children:e,withChevron:t=!0,...n}){return i(N,{type:"button",...n,className:o("px-2 bg-elevation-1",t&&"justify-between",r),children:l(e,c=>d(p,{children:[i("span",{className:"inline-flex gap-1",children:c}),t&&i(w,{"aria-hidden":"true",className:"shrink-0"})]}))})}function V({className:r,...e}){return i(C,{className:l(r,t=>o("w-auto min-w-(--trigger-width)",t)),...e})}function q({className:r,...e}){return i(x,{className:l(r,t=>o("overflow-auto p-1 outline-none",t)),...e})}function H({label:r,description:e,errorMessage:t,children:n,className:c,requiredIndicator:m,items:u,...s}){const f=g(),a=s.id||f;return i("div",{className:o("group form-field",c),children:i(I,{label:r,description:e,errorMessage:t,requiredIndicator:m,htmlFor:a,children:d(D,{...s,placeholder:s.placeholder??"",children:[i(P,{className:"w-full",id:a,children:i(y,{className:"inline-flex gap-1 items-center"})}),i(V,{children:i(q,{items:u,children:n})})]})})})}function ee({...r}){const e=B({disabled:r.isDisabled});return i(H,{requiredIndicator:e.isRequired,selectedKey:e.state.value,onSelectionChange:t=>e.handleChange(t.toString()),onBlur:e.handleBlur,errorMessage:b(e),...r,isDisabled:r.isDisabled||e.isSubmitting,children:t=>i(j,{id:t.id,children:t.label},t.id)})}export{_ as SelectCollection,Z as SelectHeader,j as SelectItem,V as SelectPopover,P as SelectTrigger,y as SelectValue,H as SingleSelect,ee as TfSingleSelect};
+"use client";import{jsx as r,jsxs as d,Fragment as p}from"react/jsx-runtime";import{useId as g}from"react";import{Select as h,composeRenderProps as l,SelectValue as S,ListBox as x}from"react-aria-components";import{Button as N}from"./button.js";import{getFieldErrorMessage as b}from"../utilities/form.js";import{useFieldContext as B}from"../utilities/form-context.js";import{classNames as o}from"../utilities/theme.js";import{FormField as I}from"./form.js";import{IcDown as w}from"./icons.js";import{ListBoxItem as F,ListBoxCollection as L,ListBoxHeader as v}from"./list-box.js";import{Popover as y}from"./popover.js";import"class-variance-authority";import"./loader.js";import"clsx";import"@icons-pack/react-simple-icons";import"@tanstack/react-form";import"./card.js";const C=h,D=F,Z=v,_=L,j=({className:i,...e})=>r(S,{className:l(i,t=>o("line-clamp-1 data-[placeholder]:text-muted-foreground","[&>[slot=description]]:hidden",t)),...e});function P({className:i,children:e,withChevron:t=!0,...n}){return r(N,{type:"button",...n,className:o("px-2 bg-surface-primary",t&&"justify-between",i),children:l(e,c=>d(p,{children:[r("span",{className:"inline-flex gap-1",children:c}),t&&r(w,{"aria-hidden":"true",className:"shrink-0"})]}))})}function V({className:i,...e}){return r(y,{className:l(i,t=>o("w-auto min-w-(--trigger-width)",t)),...e})}function q({className:i,...e}){return r(x,{className:l(i,t=>o("overflow-auto p-1 outline-none",t)),...e})}function H({label:i,description:e,errorMessage:t,children:n,className:c,requiredIndicator:m,items:u,...s}){const f=g(),a=s.id||f;return r("div",{className:o("group form-field",c),children:r(I,{label:i,description:e,errorMessage:t,requiredIndicator:m,htmlFor:a,children:d(C,{...s,placeholder:s.placeholder??"",children:[r(P,{className:"w-full",id:a,children:r(j,{className:"inline-flex gap-1 items-center"})}),r(V,{children:r(q,{items:u,children:n})})]})})})}function ee({...i}){const e=B({disabled:i.isDisabled});return r(H,{requiredIndicator:e.isRequired,selectedKey:e.state.value,onSelectionChange:t=>e.handleChange(t.toString()),onBlur:e.handleBlur,errorMessage:b(e),...i,isDisabled:i.isDisabled||e.isSubmitting,children:t=>r(D,{id:t.id,children:t.label},t.id)})}export{_ as SelectCollection,Z as SelectHeader,D as SelectItem,V as SelectPopover,P as SelectTrigger,j as SelectValue,H as SingleSelect,ee as TfSingleSelect};
 //# sourceMappingURL=select.js.map