@cryptlex/web-components 6.6.35 → 6.6.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/dist/components/alert.js +1 -1
  2. package/dist/components/alert.js.map +1 -1
  3. package/dist/components/breadcrumbs.js +1 -1
  4. package/dist/components/breadcrumbs.js.map +1 -1
  5. package/dist/components/button.js +1 -1
  6. package/dist/components/button.js.map +1 -1
  7. package/dist/components/calendar.js +1 -1
  8. package/dist/components/calendar.js.map +1 -1
  9. package/dist/components/checkbox.js +1 -1
  10. package/dist/components/checkbox.js.map +1 -1
  11. package/dist/components/data-table-filter.js +1 -1
  12. package/dist/components/data-table.d.ts +16 -6
  13. package/dist/components/data-table.js +1 -1
  14. package/dist/components/data-table.js.map +1 -1
  15. package/dist/components/date-picker.js +1 -1
  16. package/dist/components/date-picker.js.map +1 -1
  17. package/dist/components/datefield.js +1 -1
  18. package/dist/components/datefield.js.map +1 -1
  19. package/dist/components/dialog.js +1 -1
  20. package/dist/components/dialog.js.map +1 -1
  21. package/dist/components/disclosure.js +1 -1
  22. package/dist/components/disclosure.js.map +1 -1
  23. package/dist/components/duration-field.js +1 -1
  24. package/dist/components/duration-field.js.map +1 -1
  25. package/dist/components/file-trigger.js +1 -1
  26. package/dist/components/file-trigger.js.map +1 -1
  27. package/dist/components/form.js +1 -1
  28. package/dist/components/form.js.map +1 -1
  29. package/dist/components/icons.d.ts +8 -1
  30. package/dist/components/icons.js +92 -92
  31. package/dist/components/icons.js.map +1 -1
  32. package/dist/components/id-search.js +1 -1
  33. package/dist/components/id-search.js.map +1 -1
  34. package/dist/components/list-box.js +1 -1
  35. package/dist/components/list-box.js.map +1 -1
  36. package/dist/components/loader.js +1 -1
  37. package/dist/components/loader.js.map +1 -1
  38. package/dist/components/menu.js +1 -1
  39. package/dist/components/menu.js.map +1 -1
  40. package/dist/components/multi-select.js +1 -1
  41. package/dist/components/multi-select.js.map +1 -1
  42. package/dist/components/numberfield.js +1 -1
  43. package/dist/components/numberfield.js.map +1 -1
  44. package/dist/components/otpfield.js +1 -1
  45. package/dist/components/otpfield.js.map +1 -1
  46. package/dist/components/searchfield.js +1 -1
  47. package/dist/components/searchfield.js.map +1 -1
  48. package/dist/components/select-options.js +1 -1
  49. package/dist/components/select-options.js.map +1 -1
  50. package/dist/components/select.js +1 -1
  51. package/dist/components/select.js.map +1 -1
  52. package/dist/components/sidebar.js +1 -1
  53. package/dist/components/sidebar.js.map +1 -1
  54. package/dist/components/textfield.js +1 -1
  55. package/dist/components/textfield.js.map +1 -1
  56. package/dist/components/toast.js +1 -1
  57. package/dist/components/toast.js.map +1 -1
  58. package/dist/utilities/countries.js +1 -1
  59. package/dist/utilities/countries.js.map +1 -1
  60. package/dist/utilities/form-hook.js +1 -1
  61. package/dist/utilities/form-hook.js.map +1 -1
  62. package/package.json +3 -1
@@ -1 +1 @@
1
- {"version":3,"file":"datefield.js","sources":["../../lib/components/datefield.tsx"],"sourcesContent":["'use client';\nimport { VariantProps } from 'class-variance-authority';\nimport {\n DateField as AriaDateField,\n DateFieldProps as AriaDateFieldProps,\n DateInput as AriaDateInput,\n DateInputProps as AriaDateInputProps,\n DateSegment as AriaDateSegment,\n DateSegmentProps as AriaDateSegmentProps,\n DateValue as AriaDateValue,\n TimeField as AriaTimeField,\n TimeFieldProps as AriaTimeFieldProps,\n TimeValue as AriaTimeValue,\n composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\nimport { fieldGroupVariants, FormField, type FormFieldProps } from './form';\n\nexport function DateSegment({ className, ...props }: AriaDateSegmentProps) {\n return (\n <AriaDateSegment\n className={composeRenderProps(className, className =>\n classNames(\n 'inline caret-transparent outline-0',\n /* Placeholder */\n 'data-[placeholder]:text-muted-foreground',\n /* Disabled */\n 'disabled-muted',\n /* Focused */\n 'data-[focused]:bg-accent data-[focused]:text-accent-foreground',\n /* Invalid */\n 'data-[invalid]:data-[focused]:bg-destructive data-[invalid]:data-[focused]:data-[placeholder]:text-destructive-foreground data-[invalid]:data-[focused]:text-destructive-foreground data-[invalid]:data-[placeholder]:text-destructive data-[invalid]:text-destructive',\n className\n )\n )}\n {...props}\n />\n );\n}\n\ninterface DateInputProps extends AriaDateInputProps, VariantProps<typeof fieldGroupVariants> {}\n\nexport function DateInput({ className, variant, ...props }: Omit<DateInputProps, 'children'>) {\n return (\n <AriaDateInput\n className={composeRenderProps(className, className =>\n classNames(fieldGroupVariants({ variant }), 'body-sm', className)\n )}\n {...props}\n >\n {segment => <DateSegment segment={segment} />}\n </AriaDateInput>\n );\n}\n\ninterface DateFieldProps<T extends AriaDateValue> extends AriaDateFieldProps<T>, FormFieldProps {}\n\nexport function DateField<T extends AriaDateValue>({\n label,\n description,\n className,\n errorMessage,\n ...props\n}: DateFieldProps<T>) {\n return (\n <AriaDateField\n className={composeRenderProps(className, className => classNames('group form-field', className))}\n {...props}\n >\n <FormField label={label} description={description} errorMessage={errorMessage}>\n <DateInput />\n </FormField>\n </AriaDateField>\n );\n}\n\ninterface TimeFieldProps<T extends AriaTimeValue> extends AriaTimeFieldProps<T>, FormFieldProps {}\n\n/**\n * Time field component for time values.\n *\n * @remarks\n * Built with React Aria for accessibility and internationalization support.\n * Supports 12/24-hour formats, granularity control, and time constraints.\n * Features segmented input for hours, minutes, seconds, and AM/PM.\n *\n * @example\n * ```tsx\n * <TimeField\n * label=\"Meeting Time\"\n * minValue={parseTime('09:00')}\n * maxValue={parseTime('17:00')}\n * />\n * ```\n */\nexport function TimeField<T extends AriaTimeValue>({\n label,\n description,\n errorMessage,\n className,\n ...props\n}: TimeFieldProps<T>) {\n return (\n <AriaTimeField\n className={composeRenderProps(className, className => classNames('group form-field', className))}\n {...props}\n >\n <FormField label={label} description={description} errorMessage={errorMessage}>\n <DateInput />\n </FormField>\n </AriaTimeField>\n );\n}\n"],"names":["DateSegment","className","props","jsx","AriaDateSegment","composeRenderProps","classNames","DateInput","variant","AriaDateInput","fieldGroupVariants","segment","DateField","label","description","errorMessage","AriaDateField","FormField","TimeField","AriaTimeField"],"mappings":"gYAmBO,SAASA,EAAY,CAAE,UAAAC,EAAW,GAAGC,GAA+B,CACvE,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,qCAEA,2CAEA,iBAEA,iEAEA,yQACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAIO,SAASK,EAAU,CAAE,UAAAN,EAAW,QAAAO,EAAS,GAAGN,GAA2C,CAC1F,OACIC,EAACM,EAAA,CACG,UAAWJ,EAAmBJ,EAAWA,GACrCK,EAAWI,EAAmB,CAAE,QAAAF,CAAA,CAAS,EAAG,UAAWP,CAAS,CAAA,EAEnE,GAAGC,EAEH,SAAAS,GAAWR,EAACH,EAAA,CAAY,QAAAW,CAAA,CAAkB,CAAA,CAAA,CAGvD,CAIO,SAASC,EAAmC,CAC/C,MAAAC,EACA,YAAAC,EACA,UAAAb,EACA,aAAAc,EACA,GAAGb,CACP,EAAsB,CAClB,OACIC,EAACa,EAAA,CACG,UAAWX,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAZ,EAACI,IAAU,CAAA,CACf,CAAA,CAAA,CAGZ,CAqBO,SAASW,EAAmC,CAC/C,MAAAL,EACA,YAAAC,EACA,aAAAC,EACA,UAAAd,EACA,GAAGC,CACP,EAAsB,CAClB,OACIC,EAACgB,EAAA,CACG,UAAWd,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAZ,EAACI,IAAU,CAAA,CACf,CAAA,CAAA,CAGZ"}
1
+ {"version":3,"file":"datefield.js","sources":["../../lib/components/datefield.tsx"],"sourcesContent":["'use client';\nimport { VariantProps } from 'class-variance-authority';\nimport {\n DateField as AriaDateField,\n DateFieldProps as AriaDateFieldProps,\n DateInput as AriaDateInput,\n DateInputProps as AriaDateInputProps,\n DateSegment as AriaDateSegment,\n DateSegmentProps as AriaDateSegmentProps,\n DateValue as AriaDateValue,\n TimeField as AriaTimeField,\n TimeFieldProps as AriaTimeFieldProps,\n TimeValue as AriaTimeValue,\n composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\nimport { fieldGroupVariants, FormField, type FormFieldProps } from './form';\n\nexport function DateSegment({ className, ...props }: AriaDateSegmentProps) {\n return (\n <AriaDateSegment\n className={composeRenderProps(className, className =>\n classNames(\n 'inline caret-transparent outline-0',\n /* Placeholder */\n 'data-[placeholder]:text-muted-foreground',\n /* Disabled */\n 'disabled-muted',\n /* Focused */\n 'data-[focused]:bg-accent data-[focused]:text-accent-foreground',\n /* Invalid */\n 'data-[invalid]:data-[focused]:bg-destructive data-[invalid]:data-[focused]:data-[placeholder]:text-destructive-foreground data-[invalid]:data-[focused]:text-destructive-foreground data-[invalid]:data-[placeholder]:text-destructive data-[invalid]:text-destructive',\n className\n )\n )}\n {...props}\n />\n );\n}\n\ninterface DateInputProps extends AriaDateInputProps, VariantProps<typeof fieldGroupVariants> {}\n\nexport function DateInput({ className, variant, ...props }: Omit<DateInputProps, 'children'>) {\n return (\n <AriaDateInput\n className={composeRenderProps(className, className =>\n classNames(fieldGroupVariants({ variant }), 'body-sm', className)\n )}\n {...props}\n >\n {segment => <DateSegment segment={segment} />}\n </AriaDateInput>\n );\n}\n\ninterface DateFieldProps<T extends AriaDateValue> extends AriaDateFieldProps<T>, FormFieldProps {}\n\nexport function DateField<T extends AriaDateValue>({\n label,\n description,\n className,\n errorMessage,\n ...props\n}: DateFieldProps<T>) {\n return (\n <AriaDateField\n className={composeRenderProps(className, className => classNames('group form-field', className))}\n {...props}\n >\n <FormField label={label} description={description} errorMessage={errorMessage}>\n <DateInput />\n </FormField>\n </AriaDateField>\n );\n}\n\ninterface TimeFieldProps<T extends AriaTimeValue> extends AriaTimeFieldProps<T>, FormFieldProps {}\n\n/**\n * Time field component for time values.\n *\n * @remarks\n * Built with React Aria for accessibility and internationalization support.\n * Supports 12/24-hour formats, granularity control, and time constraints.\n * Features segmented input for hours, minutes, seconds, and AM/PM.\n *\n * @example\n * ```tsx\n * <TimeField\n * label=\"Meeting Time\"\n * minValue={parseTime('09:00')}\n * maxValue={parseTime('17:00')}\n * />\n * ```\n */\nexport function TimeField<T extends AriaTimeValue>({\n label,\n description,\n errorMessage,\n className,\n ...props\n}: TimeFieldProps<T>) {\n return (\n <AriaTimeField\n className={composeRenderProps(className, className => classNames('group form-field', className))}\n {...props}\n >\n <FormField label={label} description={description} errorMessage={errorMessage}>\n <DateInput />\n </FormField>\n </AriaTimeField>\n );\n}\n"],"names":["DateSegment","className","props","jsx","AriaDateSegment","composeRenderProps","classNames","DateInput","variant","AriaDateInput","fieldGroupVariants","segment","DateField","label","description","errorMessage","AriaDateField","FormField","TimeField","AriaTimeField"],"mappings":"uaAmBO,SAASA,EAAY,CAAE,UAAAC,EAAW,GAAGC,GAA+B,CACvE,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,qCAEA,2CAEA,iBAEA,iEAEA,yQACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAIO,SAASK,EAAU,CAAE,UAAAN,EAAW,QAAAO,EAAS,GAAGN,GAA2C,CAC1F,OACIC,EAACM,EAAA,CACG,UAAWJ,EAAmBJ,EAAWA,GACrCK,EAAWI,EAAmB,CAAE,QAAAF,CAAA,CAAS,EAAG,UAAWP,CAAS,CAAA,EAEnE,GAAGC,EAEH,SAAAS,GAAWR,EAACH,EAAA,CAAY,QAAAW,CAAA,CAAkB,CAAA,CAAA,CAGvD,CAIO,SAASC,EAAmC,CAC/C,MAAAC,EACA,YAAAC,EACA,UAAAb,EACA,aAAAc,EACA,GAAGb,CACP,EAAsB,CAClB,OACIC,EAACa,EAAA,CACG,UAAWX,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAZ,EAACI,IAAU,CAAA,CACf,CAAA,CAAA,CAGZ,CAqBO,SAASW,EAAmC,CAC/C,MAAAL,EACA,YAAAC,EACA,aAAAC,EACA,UAAAd,EACA,GAAGC,CACP,EAAsB,CAClB,OACIC,EAACgB,EAAA,CACG,UAAWd,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,WAACe,EAAA,CAAU,MAAAJ,EAAc,YAAAC,EAA0B,aAAAC,EAC/C,SAAAZ,EAACI,IAAU,CAAA,CACf,CAAA,CAAA,CAGZ"}
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as n,jsxs as g,Fragment as x}from"react/jsx-runtime";import{cva as p}from"class-variance-authority";import{createContext as h,useContext as u,useState as c}from"react";import{DialogTrigger as b,OverlayTriggerStateContext as D,ModalOverlay as v,composeRenderProps as m,Modal as C,Dialog as w,Heading as N}from"react-aria-components";import{Button as y}from"./button.js";import{classNames as o}from"../utilities/theme.js";import{IcClose as O}from"./icons.js";import"./loader.js";import"clsx";const z=p(["fixed z-50 gap-icon bg-elevation-1 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 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table",bottom:"inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table",left:"inset-y-0 left-0 h-full w-3/4 border-r 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 border-l data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm"}}}),P=b,T=({className:t,isDismissable:e=!0,...i})=>u(D)?.isOpen?n(v,{isDismissable:e,className:m(t,a=>o("fixed inset-0 z-50 bg-background/90","data-[exiting]:duration-100 data-[exiting]:animate-out","data-[entering]:animate-in",a)),...i}):null;function j({className:t,children:e,side:i,role:l,closeButton:a=!0,...s}){return n(C,{className:m(t,r=>o(i?z({side:i}):["fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border rounded-md bg-elevation-1 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)),...s,children:n(w,{role:l,className:o(!i&&"grid h-full gap-icon relative","h-full outline-none"),children:m(e,(r,d)=>g(x,{children:[r,a&&n("div",{className:"absolute right-2 top-1",children:g(y,{size:"icon",variant:"ghost",onPress:d.close,className:"!rounded-full",children:[n(O,{}),n("span",{className:"sr-only",children:"Close"})]})})]}))})})}function V({className:t,...e}){return n("div",{className:o("flex flex-col p-icon border-b gap-y-2 text-center sm:text-left",t),...e})}function $({className:t,...e}){return n("div",{className:o("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2 p-icon border-t",t),...e})}function q({className:t,...e}){return n("div",{className:o("flex flex-col gap-2 p-icon",t),...e})}function A({className:t,...e}){return n(N,{slot:"title",className:o("heading-3 font-semibold leading-none tracking-tight",t),...e})}function G({className:t,...e}){return n("p",{className:o("flex flex-col gap-y-1 text-center sm:text-left",t),...e})}const f=h(null);function J({children:t}){const[e,i]=c(!1),[l,a]=c(null),s=d=>{a(d),i(!0)},r=()=>{i(!1)};return g(f.Provider,{value:{openDialog:s,closeDialog:r,isOpen:e},children:[t,n(P,{isOpen:e,onOpenChange:i,children:n(T,{isDismissable:!0,children:n(j,{children:l})})})]})}function K(){const t=u(f);if(!t)throw new Error("useControlledDialog must be used within ControlledDialogProvider");return t}export{J as ControlledDialogProvider,q as DialogBody,j as DialogContent,G as DialogDescription,$ as DialogFooter,V as DialogHeader,T as DialogOverlay,A as DialogTitle,P as DialogTrigger,K as useControlledDialog};
1
+ "use client";import{jsx as n,jsxs as g,Fragment as x}from"react/jsx-runtime";import{cva as p}from"class-variance-authority";import{createContext as h,useContext as u,useState as c}from"react";import{DialogTrigger as b,OverlayTriggerStateContext as D,ModalOverlay as v,composeRenderProps as m,Modal as C,Dialog as w,Heading as N}from"react-aria-components";import{Button as y}from"./button.js";import{classNames as o}from"../utilities/theme.js";import{IcClose as O}from"./icons.js";import"./loader.js";import"clsx";import"@icons-pack/react-simple-icons";const z=p(["fixed z-50 gap-icon bg-elevation-1 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 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table",bottom:"inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table",left:"inset-y-0 left-0 h-full w-3/4 border-r 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 border-l data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right sm:max-w-sm"}}}),P=b,T=({className:t,isDismissable:e=!0,...i})=>u(D)?.isOpen?n(v,{isDismissable:e,className:m(t,a=>o("fixed inset-0 z-50 bg-background/90","data-[exiting]:duration-100 data-[exiting]:animate-out","data-[entering]:animate-in",a)),...i}):null;function j({className:t,children:e,side:i,role:l,closeButton:a=!0,...s}){return n(C,{className:m(t,r=>o(i?z({side:i}):["fixed left-[50vw] top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border rounded-md bg-elevation-1 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)),...s,children:n(w,{role:l,className:o(!i&&"grid h-full gap-icon relative","h-full outline-none"),children:m(e,(r,d)=>g(x,{children:[r,a&&n("div",{className:"absolute right-2 top-1",children:g(y,{size:"icon",variant:"ghost",onPress:d.close,className:"!rounded-full",children:[n(O,{}),n("span",{className:"sr-only",children:"Close"})]})})]}))})})}function $({className:t,...e}){return n("div",{className:o("flex flex-col p-icon border-b gap-y-2 text-center sm:text-left",t),...e})}function q({className:t,...e}){return n("div",{className:o("flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2 p-icon border-t",t),...e})}function A({className:t,...e}){return n("div",{className:o("flex flex-col gap-2 p-icon",t),...e})}function G({className:t,...e}){return n(N,{slot:"title",className:o("heading-3 font-semibold leading-none tracking-tight",t),...e})}function J({className:t,...e}){return n("p",{className:o("flex flex-col gap-y-1 text-center sm:text-left",t),...e})}const f=h(null);function K({children:t}){const[e,i]=c(!1),[l,a]=c(null),s=d=>{a(d),i(!0)},r=()=>{i(!1)};return g(f.Provider,{value:{openDialog:s,closeDialog:r,isOpen:e},children:[t,n(P,{isOpen:e,onOpenChange:i,children:n(T,{isDismissable:!0,children:n(j,{children:l})})})]})}function L(){const t=u(f);if(!t)throw new Error("useControlledDialog must be used within ControlledDialogProvider");return t}export{K as ControlledDialogProvider,A as DialogBody,j as DialogContent,J as DialogDescription,q as DialogFooter,$ as DialogHeader,T as DialogOverlay,G as DialogTitle,P as DialogTrigger,L as useControlledDialog};
2
2
  //# sourceMappingURL=dialog.js.map
@@ -1 +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 OverlayTriggerStateContext,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { classNames } from '../utilities/theme';\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-elevation-1 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 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table',\n bottom: 'inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table',\n left: 'inset-y-0 left-0 h-full w-3/4 border-r 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 border-l 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 // TODO: Remove once https://github.com/adobe/react-spectrum/pull/9772 is released\n const state = useContext(OverlayTriggerStateContext);\n if (!state?.isOpen) return null;\n\n return (\n <AriaModalOverlay\n isDismissable={isDismissable}\n className={composeRenderProps(className, className =>\n classNames(\n 'fixed inset-0 z-50 bg-background/90',\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 */\nexport function DialogContent({ className, children, side, role, closeButton = true, ...props }: DialogContentProps) {\n return (\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 border rounded-md bg-elevation-1 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-1\">\n <Button\n size={'icon'}\n variant={'ghost'}\n onPress={renderProps.close}\n className=\"!rounded-full\"\n >\n <IcClose />\n <span className=\"sr-only\">Close</span>\n </Button>\n </div>\n )}\n </>\n ))}\n </AriaDialog>\n </AriaModal>\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 return (\n <div\n className={classNames('flex flex-col p-icon border-b gap-y-2 text-center sm:text-left', className)}\n {...props}\n />\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 return (\n <div\n className={classNames(\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2 p-icon border-t',\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 return <div className={classNames('flex flex-col gap-2 p-icon', className)} {...props} />;\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-3 font-semibold leading-none tracking-tight', 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\n return (\n <ControlledDialogContext.Provider value={{ openDialog, closeDialog, isOpen }}>\n {children}\n <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>\n <DialogOverlay isDismissable>\n <DialogContent>{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","useContext","OverlayTriggerStateContext","jsx","AriaModalOverlay","composeRenderProps","classNames","DialogContent","children","side","role","closeButton","AriaModal","AriaDialog","renderProps","jsxs","Fragment","Button","IcClose","DialogHeader","DialogFooter","DialogBody","DialogTitle","AriaHeading","DialogDescription","ControlledDialogContext","createContext","ControlledDialogProvider","isOpen","setIsOpen","useState","content","setContent","openDialog","dialogContent","closeDialog","useControlledDialog","context"],"mappings":"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"}
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 OverlayTriggerStateContext,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { classNames } from '../utilities/theme';\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-elevation-1 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 border-b data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top max-h-table',\n bottom: 'inset-x-0 bottom-0 border-t data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom max-h-table',\n left: 'inset-y-0 left-0 h-full w-3/4 border-r 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 border-l 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 // TODO: Remove once https://github.com/adobe/react-spectrum/pull/9772 is released\n const state = useContext(OverlayTriggerStateContext);\n if (!state?.isOpen) return null;\n\n return (\n <AriaModalOverlay\n isDismissable={isDismissable}\n className={composeRenderProps(className, className =>\n classNames(\n 'fixed inset-0 z-50 bg-background/90',\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 */\nexport function DialogContent({ className, children, side, role, closeButton = true, ...props }: DialogContentProps) {\n return (\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 border rounded-md bg-elevation-1 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-1\">\n <Button\n size={'icon'}\n variant={'ghost'}\n onPress={renderProps.close}\n className=\"!rounded-full\"\n >\n <IcClose />\n <span className=\"sr-only\">Close</span>\n </Button>\n </div>\n )}\n </>\n ))}\n </AriaDialog>\n </AriaModal>\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 return (\n <div\n className={classNames('flex flex-col p-icon border-b gap-y-2 text-center sm:text-left', className)}\n {...props}\n />\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 return (\n <div\n className={classNames(\n 'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2 p-icon border-t',\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 return <div className={classNames('flex flex-col gap-2 p-icon', className)} {...props} />;\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-3 font-semibold leading-none tracking-tight', 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\n return (\n <ControlledDialogContext.Provider value={{ openDialog, closeDialog, isOpen }}>\n {children}\n <DialogTrigger isOpen={isOpen} onOpenChange={setIsOpen}>\n <DialogOverlay isDismissable>\n <DialogContent>{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","useContext","OverlayTriggerStateContext","jsx","AriaModalOverlay","composeRenderProps","classNames","DialogContent","children","side","role","closeButton","AriaModal","AriaDialog","renderProps","jsxs","Fragment","Button","IcClose","DialogHeader","DialogFooter","DialogBody","DialogTitle","AriaHeading","DialogDescription","ControlledDialogContext","createContext","ControlledDialogProvider","isOpen","setIsOpen","useState","content","setContent","openDialog","dialogContent","closeDialog","useControlledDialog","context"],"mappings":"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"}
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as e,jsxs as u,Fragment as l}from"react/jsx-runtime";import{useContext as c}from"react";import{DisclosureGroupStateContext as m,Disclosure as p,composeRenderProps as i,DisclosurePanel as d,DisclosureGroup as D}from"react-aria-components";import{Button as f}from"./button.js";import{classNames as a}from"../utilities/theme.js";import{IcDown as N}from"./icons.js";import"class-variance-authority";import"./loader.js";import"clsx";function _({children:r,className:s,...o}){let t=c(m)!==null;return e(p,{...o,className:i(s,(n,g)=>a("group",t&&"border-0 last:border-b-0",n)),children:r})}function v({children:r,className:s,...o}){return e(f,{slot:"trigger",type:"button",variant:"ghost",className:a(s),...o,children:i(r,t=>u(l,{children:[e("span",{children:t}),e(N,{"aria-hidden":!0,className:a("transition-transform duration-200","group-data-[expanded]:rotate-180")})]}))})}function w({children:r,className:s,...o}){return e(d,{...o,className:"transition-all",children:r})}function y({children:r,className:s,...o}){return e(D,{...o,className:i(s,(t,n)=>a("",t)),children:r})}export{_ as Disclosure,y as DisclosureGroup,v as DisclosureHeader,w as DisclosurePanel};
1
+ "use client";import{jsx as e,jsxs as u,Fragment as l}from"react/jsx-runtime";import{useContext as c}from"react";import{DisclosureGroupStateContext as m,Disclosure as p,composeRenderProps as a,DisclosurePanel as d,DisclosureGroup as D}from"react-aria-components";import{Button as f}from"./button.js";import{classNames as i}from"../utilities/theme.js";import{IcDown as N}from"./icons.js";import"class-variance-authority";import"./loader.js";import"clsx";import"@icons-pack/react-simple-icons";function v({children:r,className:s,...o}){let t=c(m)!==null;return e(p,{...o,className:a(s,(n,g)=>i("group",t&&"border-0 last:border-b-0",n)),children:r})}function w({children:r,className:s,...o}){return e(f,{slot:"trigger",type:"button",variant:"ghost",className:i(s),...o,children:a(r,t=>u(l,{children:[e("span",{children:t}),e(N,{"aria-hidden":!0,className:i("transition-transform duration-200","group-data-[expanded]:rotate-180")})]}))})}function y({children:r,className:s,...o}){return e(d,{...o,className:"transition-all",children:r})}function B({children:r,className:s,...o}){return e(D,{...o,className:a(s,(t,n)=>i("",t)),children:r})}export{v as Disclosure,B as DisclosureGroup,w as DisclosureHeader,y as DisclosurePanel};
2
2
  //# sourceMappingURL=disclosure.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"disclosure.js","sources":["../../lib/components/disclosure.tsx"],"sourcesContent":["'use client';\nimport { useContext } from 'react';\nimport {\n Disclosure as AriaDisclosure,\n DisclosureGroup as AriaDisclosureGroup,\n DisclosureGroupProps as AriaDisclosureGroupProps,\n DisclosurePanel as AriaDisclosurePanel,\n DisclosurePanelProps as AriaDisclosurePanelProps,\n DisclosureProps as AriaDisclosureProps,\n composeRenderProps,\n DisclosureGroupStateContext,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { classNames } from '../utilities/theme';\nimport { IcDown } from './icons';\n\nexport interface DisclosureProps extends AriaDisclosureProps {\n children: React.ReactNode;\n}\n\nexport function Disclosure({ children, className, ...props }: DisclosureProps) {\n let isInGroup = useContext(DisclosureGroupStateContext) !== null;\n return (\n <AriaDisclosure\n {...props}\n className={composeRenderProps(className, (className, _) =>\n classNames('group', isInGroup && 'border-0 last:border-b-0', className)\n )}\n >\n {children}\n </AriaDisclosure>\n );\n}\n\nexport function DisclosureHeader({ children, className, ...props }: React.ComponentProps<typeof Button>) {\n return (\n <Button slot=\"trigger\" type=\"button\" variant={'ghost'} className={classNames(className)} {...props}>\n {composeRenderProps(children, children => (\n <>\n <span>{children}</span>\n <IcDown\n aria-hidden\n className={classNames('transition-transform duration-200', 'group-data-[expanded]:rotate-180')}\n />\n </>\n ))}\n </Button>\n );\n}\n\nexport interface DisclosurePanelProps extends AriaDisclosurePanelProps {\n children: React.ReactNode;\n}\n\nexport function DisclosurePanel({ children, className, ...props }: DisclosurePanelProps) {\n return (\n <AriaDisclosurePanel {...props} className={'transition-all'}>\n {children}\n </AriaDisclosurePanel>\n );\n}\n\nexport interface DisclosureGroupProps extends AriaDisclosureGroupProps {\n children: React.ReactNode;\n}\n\nexport function DisclosureGroup({ children, className, ...props }: DisclosureGroupProps) {\n return (\n <AriaDisclosureGroup\n {...props}\n className={composeRenderProps(className, (className, _) => classNames('', className))}\n >\n {children}\n </AriaDisclosureGroup>\n );\n}\n"],"names":["Disclosure","children","className","props","isInGroup","useContext","DisclosureGroupStateContext","jsx","AriaDisclosure","composeRenderProps","_","classNames","DisclosureHeader","Button","jsxs","Fragment","IcDown","DisclosurePanel","AriaDisclosurePanel","DisclosureGroup","AriaDisclosureGroup"],"mappings":"ocAqBO,SAASA,EAAW,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,GAA0B,CAC3E,IAAIC,EAAYC,EAAWC,CAA2B,IAAM,KAC5D,OACIC,EAACC,EAAA,CACI,GAAGL,EACJ,UAAWM,EAAmBP,EAAW,CAACA,EAAWQ,IACjDC,EAAW,QAASP,GAAa,2BAA4BF,CAAS,CAAA,EAGzE,SAAAD,CAAA,CAAA,CAGb,CAEO,SAASW,EAAiB,CAAE,SAAAX,EAAU,UAAAC,EAAW,GAAGC,GAA8C,CACrG,SACKU,EAAA,CAAO,KAAK,UAAU,KAAK,SAAS,QAAS,QAAS,UAAWF,EAAWT,CAAS,EAAI,GAAGC,EACxF,WAAmBF,EAAUA,GAC1Ba,EAAAC,EAAA,CACI,SAAA,CAAAR,EAAC,OAAA,CAAM,SAAAN,CAAAA,CAAS,EAChBM,EAACS,EAAA,CACG,cAAW,GACX,UAAWL,EAAW,oCAAqC,kCAAkC,CAAA,CAAA,CACjG,CAAA,CACJ,CACH,CAAA,CACL,CAER,CAMO,SAASM,EAAgB,CAAE,SAAAhB,EAAU,UAAAC,EAAW,GAAGC,GAA+B,CACrF,SACKe,EAAA,CAAqB,GAAGf,EAAO,UAAW,iBACtC,SAAAF,EACL,CAER,CAMO,SAASkB,EAAgB,CAAE,SAAAlB,EAAU,UAAAC,EAAW,GAAGC,GAA+B,CACrF,OACII,EAACa,EAAA,CACI,GAAGjB,EACJ,UAAWM,EAAmBP,EAAW,CAACA,EAAWQ,IAAMC,EAAW,GAAIT,CAAS,CAAC,EAEnF,SAAAD,CAAA,CAAA,CAGb"}
1
+ {"version":3,"file":"disclosure.js","sources":["../../lib/components/disclosure.tsx"],"sourcesContent":["'use client';\nimport { useContext } from 'react';\nimport {\n Disclosure as AriaDisclosure,\n DisclosureGroup as AriaDisclosureGroup,\n DisclosureGroupProps as AriaDisclosureGroupProps,\n DisclosurePanel as AriaDisclosurePanel,\n DisclosurePanelProps as AriaDisclosurePanelProps,\n DisclosureProps as AriaDisclosureProps,\n composeRenderProps,\n DisclosureGroupStateContext,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { classNames } from '../utilities/theme';\nimport { IcDown } from './icons';\n\nexport interface DisclosureProps extends AriaDisclosureProps {\n children: React.ReactNode;\n}\n\nexport function Disclosure({ children, className, ...props }: DisclosureProps) {\n let isInGroup = useContext(DisclosureGroupStateContext) !== null;\n return (\n <AriaDisclosure\n {...props}\n className={composeRenderProps(className, (className, _) =>\n classNames('group', isInGroup && 'border-0 last:border-b-0', className)\n )}\n >\n {children}\n </AriaDisclosure>\n );\n}\n\nexport function DisclosureHeader({ children, className, ...props }: React.ComponentProps<typeof Button>) {\n return (\n <Button slot=\"trigger\" type=\"button\" variant={'ghost'} className={classNames(className)} {...props}>\n {composeRenderProps(children, children => (\n <>\n <span>{children}</span>\n <IcDown\n aria-hidden\n className={classNames('transition-transform duration-200', 'group-data-[expanded]:rotate-180')}\n />\n </>\n ))}\n </Button>\n );\n}\n\nexport interface DisclosurePanelProps extends AriaDisclosurePanelProps {\n children: React.ReactNode;\n}\n\nexport function DisclosurePanel({ children, className, ...props }: DisclosurePanelProps) {\n return (\n <AriaDisclosurePanel {...props} className={'transition-all'}>\n {children}\n </AriaDisclosurePanel>\n );\n}\n\nexport interface DisclosureGroupProps extends AriaDisclosureGroupProps {\n children: React.ReactNode;\n}\n\nexport function DisclosureGroup({ children, className, ...props }: DisclosureGroupProps) {\n return (\n <AriaDisclosureGroup\n {...props}\n className={composeRenderProps(className, (className, _) => classNames('', className))}\n >\n {children}\n </AriaDisclosureGroup>\n );\n}\n"],"names":["Disclosure","children","className","props","isInGroup","useContext","DisclosureGroupStateContext","jsx","AriaDisclosure","composeRenderProps","_","classNames","DisclosureHeader","Button","jsxs","Fragment","IcDown","DisclosurePanel","AriaDisclosurePanel","DisclosureGroup","AriaDisclosureGroup"],"mappings":"2eAqBO,SAASA,EAAW,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,GAA0B,CAC3E,IAAIC,EAAYC,EAAWC,CAA2B,IAAM,KAC5D,OACIC,EAACC,EAAA,CACI,GAAGL,EACJ,UAAWM,EAAmBP,EAAW,CAACA,EAAWQ,IACjDC,EAAW,QAASP,GAAa,2BAA4BF,CAAS,CAAA,EAGzE,SAAAD,CAAA,CAAA,CAGb,CAEO,SAASW,EAAiB,CAAE,SAAAX,EAAU,UAAAC,EAAW,GAAGC,GAA8C,CACrG,SACKU,EAAA,CAAO,KAAK,UAAU,KAAK,SAAS,QAAS,QAAS,UAAWF,EAAWT,CAAS,EAAI,GAAGC,EACxF,WAAmBF,EAAUA,GAC1Ba,EAAAC,EAAA,CACI,SAAA,CAAAR,EAAC,OAAA,CAAM,SAAAN,CAAAA,CAAS,EAChBM,EAACS,EAAA,CACG,cAAW,GACX,UAAWL,EAAW,oCAAqC,kCAAkC,CAAA,CAAA,CACjG,CAAA,CACJ,CACH,CAAA,CACL,CAER,CAMO,SAASM,EAAgB,CAAE,SAAAhB,EAAU,UAAAC,EAAW,GAAGC,GAA+B,CACrF,SACKe,EAAA,CAAqB,GAAGf,EAAO,UAAW,iBACtC,SAAAF,EACL,CAER,CAMO,SAASkB,EAAgB,CAAE,SAAAlB,EAAU,UAAAC,EAAW,GAAGC,GAA+B,CACrF,OACII,EAACa,EAAA,CACI,GAAGjB,EACJ,UAAWM,EAAmBP,EAAW,CAACA,EAAWQ,IAAMC,EAAW,GAAIT,CAAS,CAAC,EAEnF,SAAAD,CAAA,CAAA,CAGb"}
@@ -1,2 +1,2 @@
1
- "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 w}from"../utilities/duration.js";import{getFieldErrorMessage as B}from"../utilities/form.js";import{useFieldContext as $}from"../utilities/form-context.js";import{classNames as b}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"./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 w.parse(s)}catch{return{}}},[s]),x=v((o,a)=>{const g={...c,[o]:a>0?a:void 0};r(w.serialize(g))},[c,r]),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:b("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:b("flex-shrink-0"),children:l?t(_,{className:"size-icon"}):t(j,{className:"size-icon"})})]})})})}function le({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,le as TfIso8601DurationField};
1
+ "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 w}from"../utilities/duration.js";import{getFieldErrorMessage as B}from"../utilities/form.js";import{useFieldContext as $}from"../utilities/form-context.js";import{classNames as b}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 w.parse(s)}catch{return{}}},[s]),x=v((o,a)=>{const g={...c,[o]:a>0?a:void 0};r(w.serialize(g))},[c,r]),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:b("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:b("flex-shrink-0"),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};
2
2
  //# sourceMappingURL=duration-field.js.map
@@ -1 +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')}\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":"qsBAYA,MAAMA,EAAeC,EASfC,EAA2E,CAC7E,MAAO,CAAE,KAAM,QAAS,MAAO,IAAA,EAC/B,OAAQ,CAAE,KAAM,SAAU,MAAO,IAAA,EACjC,MAAO,CAAE,KAAM,QAAS,MAAO,IAAA,EAC/B,KAAM,CAAE,KAAM,OAAQ,MAAO,GAAA,EAC7B,MAAO,CAAE,KAAM,QAAS,MAAO,IAAA,EAC/B,QAAS,CAAE,KAAM,UAAW,MAAO,KAAA,EACnC,QAAS,CAAE,KAAM,UAAW,MAAO,KAAA,CACvC,EAEMC,EAA+B,CAAC,QAAS,SAAU,MAAM,EACzDC,EAA+B,CAAC,QAAS,UAAW,SAAS,EAsBnE,SAASC,EAAgB,CAAE,GAAAC,EAAI,MAAAC,EAAO,SAAAC,EAAU,OAAAC,EAAQ,MAAAC,EAAO,UAAAC,EAAW,WAAAC,GAAoC,CAC1G,OACIC,EAAC,MAAA,CAAI,UAAU,4CACX,SAAA,CAAAC,EAACd,EAAA,CACG,aAAYU,EACZ,UAAAC,EACA,WAAAC,EACA,MAAAL,EACA,SAAUQ,GAAYP,EAASO,CAAQ,EACvC,OAAAN,EACA,SAAU,EACV,UAAU,SAEV,SAAAK,EAACE,EAAA,CAAiB,GAAAV,EAAQ,UAAU,iBAAA,CAAkB,CAAA,CAAA,EAE1DQ,EAAC,MAAA,CAAI,UAAU,8DAA+D,SAAAJ,CAAA,CAAM,CAAA,EACxF,CAER,CAeO,SAASO,EAAqB,CACjC,MAAAV,EACA,SAAAC,EACA,OAAAC,EACA,MAAAC,EACA,YAAAQ,EACA,aAAAC,EACA,kBAAAC,EACA,WAAAR,EACA,GAAAN,CACJ,EAA8B,CAC1B,KAAM,CAACe,EAAUC,CAAW,EAAIC,EAAS,EAAK,EAExCC,EAAWC,EAAQ,IAAgB,CACrC,GAAI,CAAClB,GAASA,IAAU,GACpB,MAAO,CAAA,EAEX,GAAI,CACA,OAAOmB,EAAS,MAAMnB,CAAK,CAC/B,MAAQ,CACJ,MAAO,CAAA,CACX,CACJ,EAAG,CAACA,CAAK,CAAC,EAEJoB,EAAmBC,EACrB,CAACC,EAAuBC,IAAsB,CAC1C,MAAMC,EAA4B,CAC9B,GAAGP,EACH,CAACK,CAAI,EAAGC,EAAY,EAAIA,EAAY,MAAA,EAExCtB,EAASkB,EAAS,UAAUK,CAAe,CAAC,CAChD,EACA,CAACP,EAAUhB,CAAQ,CAAA,EAGjBwB,EAAmB,IAAM,CAC3BV,EAAYW,GAAQ,CAACA,CAAI,CAC7B,EAEMtB,EAAY,CAAC,CAACQ,EACde,EAAU5B,GAAM,iBAEhB6B,EAAiBP,EAClBQ,GAAyB,CACtB,MAAMC,EAAOD,EAAc,CAAC,GAAGjC,EAAW,GAAGC,CAAS,EAAID,EACpDmC,EAAYF,EAAc,QAAU,OAE1C,OAAOC,EAAK,IAAI,CAACE,EAAKC,IAClB3B,EAAC,MAAA,CAAc,UAAU,WACrB,SAAA,CAAAC,EAACT,EAAA,CACG,GAAI,GAAG6B,CAAO,IAAIK,CAAG,GACrB,MAAOf,EAASe,CAAG,GAAK,EACxB,SAAUE,GAAgBd,EAAiBY,EAAKE,CAAY,EAC5D,OAAQhC,IAAW,IAAM,CAAC,GAC1B,MAAOP,EAAeqC,CAAG,EAAED,CAAS,EACpC,UAAA3B,EACA,WAAYC,GAAc,EAAA,CAAA,EAE7B4B,EAAQH,EAAK,OAAS,GACnBvB,EAAC,MAAA,CAEG,UAAU,gDACV,cAAY,MAAA,EAFP,OAAOyB,CAAG,EAAA,CAGnB,CAAA,EAfEA,CAiBV,CACH,CACL,EACA,CAACL,EAASV,EAAUG,EAAkBlB,EAAQE,EAAWC,EAAYS,CAAQ,CAAA,EAGjF,OACIP,EAAC,OAAI,UAAW4B,EAAW,kBAAkB,EAAG,eAAc/B,EAAY,GAAK,OAC3E,SAAAG,EAAC6B,EAAA,CACG,MAAAjC,EACA,YAAAQ,EACA,aAAAC,EACA,kBAAAC,EACA,QAAS,GAAGc,CAAO,SAEnB,SAAArB,EAAC,MAAA,CAAI,UAAU,iCACX,SAAA,CAAAC,EAAC8B,EAAA,CACG,eAAcjC,EAAY,GAAK,OAC/B,UAAU,qDAET,WAAeU,CAAQ,CAAA,CAAA,EAE5BP,EAAC+B,EAAA,CACG,KAAK,SACL,KAAK,OACL,QAASb,EACT,WAAApB,EACA,aAAYS,EAAW,uBAAyB,uBAChD,gBAAeA,EACf,UAAWqB,EAAW,eAAe,EAEpC,SAAArB,IAAYyB,EAAA,CAAO,UAAU,YAAY,EAAKhC,EAACiC,EAAA,CAAQ,UAAU,WAAA,CAAY,CAAA,CAAA,CAClF,CAAA,CACJ,CAAA,CAAA,EAER,CAER,CAIO,SAASC,GAAuB,CAAE,WAAApC,EAAY,GAAGqC,GAAsC,CAC1F,MAAMC,EAAQC,EAAwB,CAAE,SAAUvC,EAAY,EAE9D,OACIE,EAACG,EAAA,CACG,kBAAmBiC,EAAM,WACzB,MAAOA,EAAM,MAAM,MACnB,SAAUA,EAAM,aAChB,OAAQA,EAAM,WACd,aAAcE,EAAqBF,CAAK,EACxC,WAAYtC,GAAcsC,EAAM,aAChC,GAAIA,EAAM,KACT,GAAGD,CAAA,CAAA,CAGhB"}
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')}\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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"}
@@ -1,2 +1,2 @@
1
- import{jsx as r,jsxs as o}from"react/jsx-runtime";import{FileTrigger as m}from"react-aria-components";import{classNames as e}from"../utilities/theme.js";import{Button as t}from"./button.js";import{IcUpload as l}from"./icons.js";import"clsx";import"class-variance-authority";import"./loader.js";import"react";function u(i){return r(m,{...i,children:o(t,{className:e(i.className),children:[r(l,{}),r("p",{children:"Click to browse files"})]})})}export{u as FileTrigger};
1
+ import{jsx as r,jsxs as o}from"react/jsx-runtime";import{FileTrigger as m}from"react-aria-components";import{classNames as e}from"../utilities/theme.js";import{Button as t}from"./button.js";import{IcUpload as l}from"./icons.js";import"clsx";import"class-variance-authority";import"./loader.js";import"@icons-pack/react-simple-icons";import"react";function x(i){return r(m,{...i,children:o(t,{className:e(i.className),children:[r(l,{}),r("p",{children:"Click to browse files"})]})})}export{x as FileTrigger};
2
2
  //# sourceMappingURL=file-trigger.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"file-trigger.js","sources":["../../lib/components/file-trigger.tsx"],"sourcesContent":["import { FileTrigger as AriaFileTrigger, FileTriggerProps as AriaFileTriggerProps } from 'react-aria-components';\nimport { classNames } from '../utilities/theme';\nimport { Button } from './button';\nimport { IcUpload } from './icons';\nexport interface FileTriggerProps extends AriaFileTriggerProps {\n className?: string;\n}\nexport function FileTrigger(props: FileTriggerProps) {\n return (\n <AriaFileTrigger {...props}>\n <Button className={classNames(props.className)}>\n <IcUpload />\n <p>Click to browse files</p>\n </Button>\n </AriaFileTrigger>\n );\n}\n"],"names":["FileTrigger","props","jsx","AriaFileTrigger","jsxs","Button","classNames","IcUpload"],"mappings":"oTAOO,SAASA,EAAYC,EAAyB,CACjD,OACIC,EAACC,EAAA,CAAiB,GAAGF,EACjB,SAAAG,EAACC,GAAO,UAAWC,EAAWL,EAAM,SAAS,EACzC,SAAA,CAAAC,EAACK,EAAA,EAAS,EACVL,EAAC,KAAE,SAAA,uBAAA,CAAqB,CAAA,CAAA,CAC5B,CAAA,CACJ,CAER"}
1
+ {"version":3,"file":"file-trigger.js","sources":["../../lib/components/file-trigger.tsx"],"sourcesContent":["import { FileTrigger as AriaFileTrigger, FileTriggerProps as AriaFileTriggerProps } from 'react-aria-components';\nimport { classNames } from '../utilities/theme';\nimport { Button } from './button';\nimport { IcUpload } from './icons';\nexport interface FileTriggerProps extends AriaFileTriggerProps {\n className?: string;\n}\nexport function FileTrigger(props: FileTriggerProps) {\n return (\n <AriaFileTrigger {...props}>\n <Button className={classNames(props.className)}>\n <IcUpload />\n <p>Click to browse files</p>\n </Button>\n </AriaFileTrigger>\n );\n}\n"],"names":["FileTrigger","props","jsx","AriaFileTrigger","jsxs","Button","classNames","IcUpload"],"mappings":"2VAOO,SAASA,EAAYC,EAAyB,CACjD,OACIC,EAACC,EAAA,CAAiB,GAAGF,EACjB,SAAAG,EAACC,GAAO,UAAWC,EAAWL,EAAM,SAAS,EACzC,SAAA,CAAAC,EAACK,EAAA,EAAS,EACVL,EAAC,KAAE,SAAA,uBAAA,CAAqB,CAAA,CAAA,CAC5B,CAAA,CACJ,CAER"}
@@ -1,2 +1,2 @@
1
- "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{Group as u,composeRenderProps as m,Label as f,Text as p,Button as g}from"react-aria-components";import{classNames as i}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"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(f,{className:i(N(),t),...e})}function k({className:t,children:e,...n}){return a(p,{className:i("body-sm text-muted leading-tight",t),...n,slot:"description",children:[e,r(v,{className:"inline size-2 align-text-top ms-0.5"})]})}function j({className:t,children:e,...n}){return a("label",{role:"alert",className:i("body-sm leading-tight text-destructive duration-150 animate-in transition-transform slide-in-from-top-5 fade-in",t),...n,children:[e,r(F,{className:"inline size-2 align-text-top ms-0.5"})]})}const w=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","disabled-muted"],ghost:""}},defaultVariants:{variant:"default"}});function V({className:t,variant:e,...n}){return r(u,{className:m(t,o=>i(w({variant:e}),o)),...n})}function B({label:t,description:e,errorMessage:n,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}),n&&r(j,{htmlFor:l,children:n})]})}function D({className:t,...e}){return r(g,{className:m(t,n=>i("btn btn-ghost h-input px-2 -me-2",n)),...e})}function A({className:t,onSubmit:e,...n}){return r("form",{className:i(t),onSubmit:o=>{o.preventDefault(),document?.activeElement?.blur(),e?.(o)},...n})}function H({className:t,...e}){return r(b,{className:i("gap-input",t),...e})}function P({className:t,...e}){return r(x,{children:r(h,{className:i(t,"!body-base text-muted"),...e})})}function R({className:t,...e}){return r("nav",{className:i("flex items-center justify-end bg-elevation-1 sticky bottom-0 z-50 py-icon px-icon border-t",t),...e})}function q({className:t,preview:e,...n}){return a("div",{className:"flex flex-col gap-icon lg:flex-row lg:items-start",children:[r("div",{className:i("grid grid-cols-1 gap-input mt-icon my-header max-w-3xl",t),...n}),e&&r("div",{className:"lg:sticky lg:top-header lg:shrink-0",children:e})]})}export{V as FieldGroup,A as Form,R as FormActionFooter,B as FormField,D as FormFieldButton,k as FormFieldDescription,j as FormFieldError,y as FormFieldLabel,q as FormLayout,H as FormSection,P as FormSectionTitle,w as fieldGroupVariants,N as labelVariants};
1
+ "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{Group as u,composeRenderProps as m,Label as f,Text as p,Button as g}from"react-aria-components";import{classNames as i}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=s(["select-none body-sm font-medium leading-none","disabled-muted","group-data-[invalid]:text-destructive"]);function y({className:t,...e}){return r(f,{className:i(N(),t),...e})}function k({className:t,children:e,...n}){return a(p,{className:i("body-sm text-muted leading-tight",t),...n,slot:"description",children:[e,r(v,{className:"inline size-2 align-text-top ms-0.5"})]})}function j({className:t,children:e,...n}){return a("label",{role:"alert",className:i("body-sm leading-tight text-destructive duration-150 animate-in transition-transform slide-in-from-top-5 fade-in",t),...n,children:[e,r(F,{className:"inline size-2 align-text-top ms-0.5"})]})}const w=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","disabled-muted"],ghost:""}},defaultVariants:{variant:"default"}});function B({className:t,variant:e,...n}){return r(u,{className:m(t,o=>i(w({variant:e}),o)),...n})}function D({label:t,description:e,errorMessage:n,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}),n&&r(j,{htmlFor:l,children:n})]})}function A({className:t,...e}){return r(g,{className:m(t,n=>i("btn btn-ghost h-input px-2 -me-2",n)),...e})}function H({className:t,onSubmit:e,...n}){return r("form",{className:i(t),onSubmit:o=>{o.preventDefault(),document?.activeElement?.blur(),e?.(o)},...n})}function P({className:t,...e}){return r(b,{className:i("gap-input",t),...e})}function R({className:t,...e}){return r(x,{children:r(h,{className:i(t,"!body-base text-muted"),...e})})}function q({className:t,...e}){return r("nav",{className:i("flex items-center justify-end bg-elevation-1 sticky bottom-0 z-50 py-icon px-icon border-t",t),...e})}function J({className:t,preview:e,...n}){return a("div",{className:"flex flex-col gap-icon lg:flex-row lg:items-start",children:[r("div",{className:i("grid grid-cols-1 gap-input mt-icon my-header max-w-3xl",t),...n}),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,j as FormFieldError,y as FormFieldLabel,J as FormLayout,P as FormSection,R as FormSectionTitle,w as fieldGroupVariants,N as labelVariants};
2
2
  //# sourceMappingURL=form.js.map
@@ -1 +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',\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', 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-1 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 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":"kaAuBO,MAAMA,EAAgBC,EAAI,CAC7B,+CAEA,iBAEA,uCACJ,CAAC,EAUM,SAASC,EAAe,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CACpE,OAAOC,EAACC,GAAU,UAAWC,EAAWP,IAAiBG,CAAS,EAAI,GAAGC,EAAO,CACpF,CAMO,SAASI,EAAqB,CAAE,UAAAL,EAAW,SAAAM,EAAU,GAAGL,GAAwB,CACnF,OACIM,EAACC,EAAA,CAAS,UAAWJ,EAAW,mCAAoCJ,CAAS,EAAI,GAAGC,EAAO,KAAK,cAC3F,SAAA,CAAAK,EACDJ,EAACO,EAAA,CAAO,UAAU,qCAAA,CAAsC,CAAA,EAC5D,CAER,CASO,SAASC,EAAe,CAAE,UAAAV,EAAW,SAAAM,EAAU,GAAGL,GAA+C,CACpG,OACIM,EAAC,QAAA,CACG,KAAK,QACL,UAAWH,EACP,mHACAJ,CAAA,EAEH,GAAGC,EAEH,SAAA,CAAAK,EACDJ,EAACS,EAAA,CAAQ,UAAU,qCAAA,CAAsC,CAAA,CAAA,CAAA,CAGrE,CAMO,MAAMC,EAAqBd,EAAI,GAAI,CACtC,SAAU,CACN,QAAS,CACL,QAAS,CACL,0JAEA,aAEA,gBAAA,EAEJ,MAAO,EAAA,CACX,EAEJ,gBAAiB,CACb,QAAS,SAAA,CAEjB,CAAC,EAYM,SAASe,EAAW,CAAE,UAAAb,EAAW,QAAAc,EAAS,GAAGb,GAAqB,CACrE,OACIC,EAACa,EAAA,CACG,UAAWC,EAAmBhB,EAAWA,GACrCI,EAAWQ,EAAmB,CAAE,QAAAE,CAAA,CAAS,EAAGd,CAAS,CAAA,EAExD,GAAGC,CAAA,CAAA,CAGhB,CAwBO,SAASgB,EAAU,CACtB,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,SAAAd,EACA,kBAAAe,EACA,QAAAC,CACJ,EAEG,CACC,OACIf,EAAAgB,EAAA,CACK,SAAA,CAAAL,GACGX,EAACR,GAAe,QAAAuB,EACX,SAAA,CAAAJ,EACAG,GAAqBnB,EAAC,MAAA,CAAI,UAAU,mBAAmB,SAAA,GAAA,CAAC,CAAA,EAC7D,EAEHI,EACAa,GAAejB,EAACG,EAAA,CAAsB,SAAAc,CAAA,CAAY,EAClDC,GAAgBlB,EAACQ,EAAA,CAAe,QAAAY,EAAmB,SAAAF,CAAA,CAAa,CAAA,EACrE,CAER,CAMO,SAASI,EAAgB,CAAE,UAAAxB,EAAW,GAAGC,GAA0B,CACtE,OACIC,EAACuB,EAAA,CACG,UAAWT,EAAmBhB,EAAWA,GACrCI,EAAW,mCAAoCJ,CAAS,CAAA,EAE3D,GAAGC,CAAA,CAAA,CAGhB,CAMO,SAASyB,EAAK,CAAE,UAAA1B,EAAW,SAAA2B,EAAU,GAAG1B,GAAuC,CAClF,OACIC,EAAC,OAAA,CACG,UAAWE,EAAWJ,CAAS,EAC/B,SAAU4B,GAAK,CAEXA,EAAE,eAAA,EAGD,UAAU,eAA+B,KAAA,EAG1CD,IAAWC,CAAC,CAChB,EACC,GAAG3B,CAAA,CAAA,CAGhB,CAMO,SAAS4B,EAAY,CAAE,UAAA7B,EAAW,GAAGC,GAAsC,CAC9E,OAAOC,EAAC4B,GAAK,UAAW1B,EAAW,YAAaJ,CAAS,EAAI,GAAGC,EAAO,CAC3E,CAKO,SAAS8B,EAAiB,CAAE,UAAA/B,EAAW,GAAGC,GAAqC,CAClF,OACIC,EAAC8B,EAAA,CACG,SAAA9B,EAAC+B,EAAA,CAAU,UAAW7B,EAAWJ,EAAW,uBAAuB,EAAI,GAAGC,CAAA,CAAO,CAAA,CACrF,CAER,CAEO,SAASiC,EAAiB,CAAE,UAAAlC,EAAW,GAAGC,GAAsC,CACnF,OACIC,EAAC,MAAA,CACG,UAAWE,EACP,6FACAJ,CAAA,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASkC,EAAW,CACvB,UAAAnC,EACA,QAAAoC,EACA,GAAGnC,CACP,EAAgE,CAC5D,OACIM,EAAC,MAAA,CAAI,UAAU,oDACX,SAAA,CAAAL,EAAC,MAAA,CACG,UAAWE,EAAW,yDAA0DJ,CAAS,EACxF,GAAGC,CAAA,CAAA,EAEPmC,GAAWlC,EAAC,MAAA,CAAI,UAAU,sCAAuC,SAAAkC,CAAA,CAAQ,CAAA,EAC9E,CAER"}
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',\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', 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-1 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 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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"}
@@ -1,5 +1,6 @@
1
+ import { IconType as SiIconType } from '@icons-pack/react-simple-icons';
1
2
  import { LucideIcon } from 'lucide-react';
2
- export type CtxIcon = LucideIcon;
3
+ export type CtxIcon = LucideIcon | SiIconType;
3
4
  export declare const IcCreate: CtxIcon;
4
5
  export declare const IcExport: CtxIcon;
5
6
  export declare const IcUpdate: CtxIcon;
@@ -96,3 +97,9 @@ export declare const IcLayoutGrid: CtxIcon;
96
97
  export declare const IcMenu: CtxIcon;
97
98
  export declare const IcEye: CtxIcon;
98
99
  export declare const IcPlus: CtxIcon;
100
+ export declare const IcOsWindows: CtxIcon;
101
+ export declare const IcOsMacos: CtxIcon;
102
+ export declare const IcOsLinux: CtxIcon;
103
+ export declare const IcOsIos: CtxIcon;
104
+ export declare const IcOsAndroid: CtxIcon;
105
+ export declare const IcOsApple: CtxIcon;