@cryptlex/web-components 6.7.9 → 6.7.11

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 (233) hide show
  1. package/dist/components/alert.d.ts +2 -2
  2. package/dist/components/alert.js +2 -2
  3. package/dist/components/alert.js.map +1 -1
  4. package/dist/components/autocomplete.js +2 -2
  5. package/dist/components/autocomplete.js.map +1 -1
  6. package/dist/components/avatar.d.ts +1 -1
  7. package/dist/components/avatar.js +2 -2
  8. package/dist/components/avatar.js.map +1 -1
  9. package/dist/components/badge.d.ts +2 -2
  10. package/dist/components/badge.js +2 -2
  11. package/dist/components/badge.js.map +1 -1
  12. package/dist/components/breadcrumbs.d.ts +5 -5
  13. package/dist/components/breadcrumbs.js +2 -2
  14. package/dist/components/breadcrumbs.js.map +1 -1
  15. package/dist/components/button.d.ts +3 -3
  16. package/dist/components/button.js +2 -2
  17. package/dist/components/button.js.map +1 -1
  18. package/dist/components/calendar.d.ts +7 -7
  19. package/dist/components/calendar.js +2 -2
  20. package/dist/components/calendar.js.map +1 -1
  21. package/dist/components/card.d.ts +6 -6
  22. package/dist/components/card.js +2 -2
  23. package/dist/components/card.js.map +1 -1
  24. package/dist/components/charts.d.ts +8 -8
  25. package/dist/components/charts.js +2 -2
  26. package/dist/components/charts.js.map +1 -1
  27. package/dist/components/checkbox.d.ts +2 -2
  28. package/dist/components/checkbox.js +2 -2
  29. package/dist/components/checkbox.js.map +1 -1
  30. package/dist/components/code-block.d.ts +1 -1
  31. package/dist/components/code-block.js +2 -2
  32. package/dist/components/code-block.js.map +1 -1
  33. package/dist/components/copy-button.d.ts +1 -1
  34. package/dist/components/copy-button.js +2 -2
  35. package/dist/components/copy-button.js.map +1 -1
  36. package/dist/components/data-table-filter.d.ts +1 -1
  37. package/dist/components/data-table-filter.js +1 -2
  38. package/dist/components/data-table.d.ts +11 -86
  39. package/dist/components/data-table.js +1 -2
  40. package/dist/components/date-picker.d.ts +3 -3
  41. package/dist/components/date-picker.js +2 -2
  42. package/dist/components/date-picker.js.map +1 -1
  43. package/dist/components/datefield.d.ts +4 -4
  44. package/dist/components/datefield.js +2 -2
  45. package/dist/components/datefield.js.map +1 -1
  46. package/dist/components/dialog.d.ts +8 -8
  47. package/dist/components/dialog.js +2 -2
  48. package/dist/components/dialog.js.map +1 -1
  49. package/dist/components/disclosure.d.ts +4 -4
  50. package/dist/components/disclosure.js +2 -2
  51. package/dist/components/disclosure.js.map +1 -1
  52. package/dist/components/divider.d.ts +2 -2
  53. package/dist/components/divider.js +2 -2
  54. package/dist/components/divider.js.map +1 -1
  55. package/dist/components/duration-field.d.ts +2 -2
  56. package/dist/components/duration-field.js +2 -2
  57. package/dist/components/duration-field.js.map +1 -1
  58. package/dist/components/file-trigger.d.ts +1 -1
  59. package/dist/components/file-trigger.js +2 -2
  60. package/dist/components/file-trigger.js.map +1 -1
  61. package/dist/components/form.d.ts +11 -11
  62. package/dist/components/form.js +2 -2
  63. package/dist/components/form.js.map +1 -1
  64. package/dist/components/icons.js +1 -2
  65. package/dist/components/id-search.d.ts +5 -5
  66. package/dist/components/id-search.js +2 -2
  67. package/dist/components/id-search.js.map +1 -1
  68. package/dist/components/kbd.d.ts +1 -1
  69. package/dist/components/kbd.js +2 -2
  70. package/dist/components/kbd.js.map +1 -1
  71. package/dist/components/list-box.d.ts +3 -3
  72. package/dist/components/list-box.js +2 -2
  73. package/dist/components/list-box.js.map +1 -1
  74. package/dist/components/loader.d.ts +1 -1
  75. package/dist/components/loader.js +2 -2
  76. package/dist/components/loader.js.map +1 -1
  77. package/dist/components/menu.d.ts +7 -7
  78. package/dist/components/menu.js +2 -2
  79. package/dist/components/menu.js.map +1 -1
  80. package/dist/components/multi-select.d.ts +2 -2
  81. package/dist/components/multi-select.js +2 -2
  82. package/dist/components/multi-select.js.map +1 -1
  83. package/dist/components/numberfield.d.ts +5 -5
  84. package/dist/components/numberfield.js +2 -2
  85. package/dist/components/numberfield.js.map +1 -1
  86. package/dist/components/object-table.d.ts +1 -1
  87. package/dist/components/object-table.js +2 -2
  88. package/dist/components/object-table.js.map +1 -1
  89. package/dist/components/offline-request-file-input.d.ts +2 -2
  90. package/dist/components/offline-request-file-input.js +2 -2
  91. package/dist/components/offline-request-file-input.js.map +1 -1
  92. package/dist/components/otpfield.d.ts +1 -1
  93. package/dist/components/otpfield.js +2 -2
  94. package/dist/components/otpfield.js.map +1 -1
  95. package/dist/components/popover.d.ts +2 -2
  96. package/dist/components/popover.js +2 -2
  97. package/dist/components/popover.js.map +1 -1
  98. package/dist/components/progress-bar.d.ts +1 -1
  99. package/dist/components/progress-bar.js +2 -2
  100. package/dist/components/progress-bar.js.map +1 -1
  101. package/dist/components/searchfield.d.ts +1 -1
  102. package/dist/components/searchfield.js +2 -2
  103. package/dist/components/searchfield.js.map +1 -1
  104. package/dist/components/select-options.js +2 -2
  105. package/dist/components/select-options.js.map +1 -1
  106. package/dist/components/select.d.ts +5 -5
  107. package/dist/components/select.js +2 -2
  108. package/dist/components/select.js.map +1 -1
  109. package/dist/components/sidebar.d.ts +20 -20
  110. package/dist/components/sidebar.js +2 -2
  111. package/dist/components/sidebar.js.map +1 -1
  112. package/dist/components/skeleton.d.ts +1 -1
  113. package/dist/components/skeleton.js +2 -2
  114. package/dist/components/skeleton.js.map +1 -1
  115. package/dist/components/steps.d.ts +1 -1
  116. package/dist/components/steps.js +2 -2
  117. package/dist/components/steps.js.map +1 -1
  118. package/dist/components/table-of-contents.d.ts +1 -1
  119. package/dist/components/table-of-contents.js +2 -2
  120. package/dist/components/table-of-contents.js.map +1 -1
  121. package/dist/components/table.d.ts +8 -8
  122. package/dist/components/table.js +2 -2
  123. package/dist/components/table.js.map +1 -1
  124. package/dist/components/tabs.d.ts +4 -4
  125. package/dist/components/tabs.js +2 -2
  126. package/dist/components/tabs.js.map +1 -1
  127. package/dist/components/tag-group.d.ts +2 -2
  128. package/dist/components/tag-group.js +2 -2
  129. package/dist/components/tag-group.js.map +1 -1
  130. package/dist/components/textfield.d.ts +2 -2
  131. package/dist/components/textfield.js +2 -2
  132. package/dist/components/textfield.js.map +1 -1
  133. package/dist/components/timeline.d.ts +6 -6
  134. package/dist/components/timeline.js +2 -2
  135. package/dist/components/timeline.js.map +1 -1
  136. package/dist/components/toast.d.ts +1 -1
  137. package/dist/components/toast.js +2 -2
  138. package/dist/components/toast.js.map +1 -1
  139. package/dist/components/tooltip.d.ts +2 -2
  140. package/dist/components/tooltip.js +2 -2
  141. package/dist/components/tooltip.js.map +1 -1
  142. package/dist/data-table-filter.js +2 -0
  143. package/dist/data-table-filter.js.map +1 -0
  144. package/dist/icons.js +2 -0
  145. package/dist/icons.js.map +1 -0
  146. package/dist/stories/atoms/color.stories.d.ts +11 -0
  147. package/dist/stories/atoms/icons.stories.d.ts +11 -0
  148. package/dist/stories/atoms/type.stories.d.ts +13 -0
  149. package/dist/stories/components/alert.stories.d.ts +11 -0
  150. package/dist/stories/components/avatar.stories.d.ts +6 -0
  151. package/dist/stories/components/badge.stories.d.ts +6 -0
  152. package/dist/stories/components/breadcrumbs.stories.d.ts +5 -0
  153. package/dist/stories/components/button.stories.d.ts +6 -0
  154. package/dist/stories/components/calendar.stories.d.ts +10 -0
  155. package/dist/stories/components/card.stories.d.ts +9 -0
  156. package/dist/stories/components/code-block.stories.d.ts +12 -0
  157. package/dist/stories/components/copy-button.stories.d.ts +6 -0
  158. package/dist/stories/components/date-range-picker.stories.d.ts +23 -0
  159. package/dist/stories/components/datepicker.stories.d.ts +23 -0
  160. package/dist/stories/components/dialog.stories.d.ts +5 -0
  161. package/dist/stories/components/divider.stories.d.ts +13 -0
  162. package/dist/stories/components/file-trigger.stories.d.ts +10 -0
  163. package/dist/stories/components/kbd.stories.d.ts +49 -0
  164. package/dist/stories/components/loader.stories.d.ts +12 -0
  165. package/dist/stories/components/offline-request-file-upload.stories.d.ts +10 -0
  166. package/dist/stories/components/progress-bar.stories.d.ts +15 -0
  167. package/dist/stories/components/sheet.stories.d.ts +15 -0
  168. package/dist/stories/components/skeleton.stories.d.ts +10 -0
  169. package/dist/stories/components/tabs.stories.d.ts +12 -0
  170. package/dist/stories/components/tag-group.stories.d.ts +8 -0
  171. package/dist/stories/components/timeline.stories.d.ts +6 -0
  172. package/dist/stories/components/timepicker.stories.d.ts +23 -0
  173. package/dist/stories/components/toast.stories.d.ts +12 -0
  174. package/dist/stories/components/tooltip.stories.d.ts +9 -0
  175. package/dist/stories/examples/autocomplete.stories.d.ts +11 -0
  176. package/dist/stories/examples/charts.stories.d.ts +11 -0
  177. package/dist/stories/examples/data-table.stories.d.ts +9 -0
  178. package/dist/stories/examples/key-value-card.stories.d.ts +42 -0
  179. package/dist/stories/examples/sidebar.stories.d.ts +32 -0
  180. package/dist/stories/examples/table-of-contents.stories.d.ts +6 -0
  181. package/dist/stories/inputs/form.stories.d.ts +6 -0
  182. package/dist/stories/inputs/id-search.stories.d.ts +8 -0
  183. package/dist/stories/inputs/otp-field.stories.d.ts +6 -0
  184. package/dist/stories/inputs/textfield.stories.d.ts +8 -0
  185. package/dist/stories/story-commons.d.ts +3 -0
  186. package/dist/stories/utilities/resource-formatter.stories.d.ts +7 -0
  187. package/dist/utilities/auth.js +2 -2
  188. package/dist/utilities/auth.js.map +1 -1
  189. package/dist/utilities/countries.d.ts +1 -1
  190. package/dist/utilities/countries.js +2 -2
  191. package/dist/utilities/countries.js.map +1 -1
  192. package/dist/utilities/ctx-client.d.ts +1 -1
  193. package/dist/utilities/ctx-client.js +2 -2
  194. package/dist/utilities/ctx-client.js.map +1 -1
  195. package/dist/utilities/date.js +2 -2
  196. package/dist/utilities/date.js.map +1 -1
  197. package/dist/utilities/duration.js +2 -2
  198. package/dist/utilities/duration.js.map +1 -1
  199. package/dist/utilities/empty-option.js +2 -2
  200. package/dist/utilities/empty-option.js.map +1 -1
  201. package/dist/utilities/errors.js +2 -2
  202. package/dist/utilities/errors.js.map +1 -1
  203. package/dist/utilities/form-context.js +2 -2
  204. package/dist/utilities/form-context.js.map +1 -1
  205. package/dist/utilities/form-hook.js +2 -2
  206. package/dist/utilities/form-hook.js.map +1 -1
  207. package/dist/utilities/form.js +2 -2
  208. package/dist/utilities/form.js.map +1 -1
  209. package/dist/utilities/highlight-code.js +2 -2
  210. package/dist/utilities/highlight-code.js.map +1 -1
  211. package/dist/utilities/normalize-arrays.js +2 -2
  212. package/dist/utilities/normalize-arrays.js.map +1 -1
  213. package/dist/utilities/numbers.js +2 -2
  214. package/dist/utilities/numbers.js.map +1 -1
  215. package/dist/utilities/resources.d.ts +1 -1
  216. package/dist/utilities/resources.js +2 -2
  217. package/dist/utilities/resources.js.map +1 -1
  218. package/dist/utilities/shiki.js +2 -2
  219. package/dist/utilities/shiki.js.map +1 -1
  220. package/dist/utilities/string.js +2 -2
  221. package/dist/utilities/string.js.map +1 -1
  222. package/dist/utilities/theme.js +2 -2
  223. package/dist/utilities/theme.js.map +1 -1
  224. package/dist/utilities/use-code-highlight.js +2 -2
  225. package/dist/utilities/use-code-highlight.js.map +1 -1
  226. package/dist/utilities/use-mobile.js +2 -2
  227. package/dist/utilities/use-mobile.js.map +1 -1
  228. package/dist/utilities/validators.js +2 -2
  229. package/dist/utilities/validators.js.map +1 -1
  230. package/package.json +41 -41
  231. package/dist/components/data-table-filter.js.map +0 -1
  232. package/dist/components/data-table.js.map +0 -1
  233. package/dist/components/icons.js.map +0 -1
@@ -4,18 +4,18 @@ import { buttonVariants } from './button';
4
4
  export declare const MenuTrigger: typeof AriaMenuTrigger;
5
5
  export declare const MenuSubTrigger: (props: import('react-aria-components').SubmenuTriggerProps & React.RefAttributes<HTMLDivElement>) => import('react').ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
6
6
  export declare const MenuCollection: typeof import('react-aria-components').Collection;
7
- export declare function MenuPopover({ className, ...props }: PopoverProps): import("react/jsx-runtime").JSX.Element;
8
- export declare function Menu<T extends object>({ className, ...props }: AriaMenuProps<T>): import("react/jsx-runtime").JSX.Element;
7
+ export declare function MenuPopover({ className, ...props }: PopoverProps): import("react").JSX.Element;
8
+ export declare function Menu<T extends object>({ className, ...props }: AriaMenuProps<T>): import("react").JSX.Element;
9
9
  export declare function MenuItem({ children, className, ...props }: AriaMenuItemProps & {
10
10
  ref?: React.Ref<HTMLDivElement>;
11
- }): import("react/jsx-runtime").JSX.Element;
11
+ }): import("react").JSX.Element;
12
12
  interface MenuHeaderProps extends React.ComponentProps<typeof AriaHeader> {
13
13
  inset?: boolean;
14
14
  separator?: boolean;
15
15
  }
16
- export declare function MenuHeader({ className, inset, separator, ...props }: MenuHeaderProps): import("react/jsx-runtime").JSX.Element;
17
- export declare function MenuSeparator({ className, ...props }: AriaSeparatorProps): import("react/jsx-runtime").JSX.Element;
18
- export declare function MenuKeyboard({ className, ...props }: React.ComponentProps<typeof AriaKeyboard>): import("react/jsx-runtime").JSX.Element;
16
+ export declare function MenuHeader({ className, inset, separator, ...props }: MenuHeaderProps): import("react").JSX.Element;
17
+ export declare function MenuSeparator({ className, ...props }: AriaSeparatorProps): import("react").JSX.Element;
18
+ export declare function MenuKeyboard({ className, ...props }: React.ComponentProps<typeof AriaKeyboard>): import("react").JSX.Element;
19
19
  interface MenuProps<T> extends AriaMenuProps<T>, VariantProps<typeof buttonVariants>, Omit<AriaMenuTriggerProps, 'children'> {
20
20
  label?: React.ReactNode;
21
21
  isDisabled?: boolean;
@@ -23,5 +23,5 @@ interface MenuProps<T> extends AriaMenuProps<T>, VariantProps<typeof buttonVaria
23
23
  id?: string;
24
24
  withChevron?: boolean;
25
25
  }
26
- export declare function EasyMenu<T extends object>({ label, children, variant, isDisabled, withChevron, size, isNonModal, id, 'aria-label': ariaLabel, ...props }: MenuProps<T>): import("react/jsx-runtime").JSX.Element;
26
+ export declare function EasyMenu<T extends object>({ label, children, variant, isDisabled, withChevron, size, isNonModal, id, 'aria-label': ariaLabel, ...props }: MenuProps<T>): import("react").JSX.Element;
27
27
  export {};
@@ -1,2 +1,2 @@
1
- import{jsxs as u,jsx as o,Fragment as c}from"react/jsx-runtime";import{MenuTrigger as b,MenuItem as f,composeRenderProps as m,Menu as M,SubmenuTrigger as g,Header as y,Keyboard as N,Separator as x}from"react-aria-components";import{classNames as a}from"../utilities/theme.js";import{IcDot as h,IcCheck as S,IcRight as v}from"./icons.js";import{ListBoxCollection as I}from"./list-box.js";import{SelectTrigger as T,SelectPopover as j}from"./select.js";import"clsx";import"@icons-pack/react-simple-icons";import"react";import"./button.js";import"class-variance-authority";import"./loader.js";import"../utilities/form.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"./form.js";import"./card.js";import"./popover.js";const z=b,W=g,X=I;function w({className:e,...t}){return o(j,{className:m(e,r=>a(r)),...t})}function C({className:e,...t}){return o(M,{className:a("overflow-auto p-1 outline-0 body-base",e),escapeKeyBehavior:"none",...t})}function Y({children:e,className:t,...r}){return o(f,{textValue:r.textValue||(typeof e=="string"?e:void 0),className:m(t,i=>a("btn btn-ghost relative flex justify-start input-dim","data-[selection-mode]:pl-input",i)),...r,children:m(e,(i,n)=>u(c,{children:[o("span",{className:"absolute left-2 flex size-icon items-center justify-center",children:n.isSelected&&u(c,{children:[n.selectionMode=="single"&&o(h,{className:"size-icon fill-current"}),n.selectionMode=="multiple"&&o(S,{className:"size-icon"})]})}),i,n.hasSubmenu&&o(v,{className:"ml-auto size-icon"})]}))})}function Z({className:e,inset:t,separator:r=!0,...i}){return o(y,{className:a("px-3 py-1.5 body font-semibold",t&&"pl-input",r&&"-mx-1 mb-1 border-b border-b-border pb-2.5",e),...i})}function _({className:e,...t}){return o(x,{className:a("-mx-1 my-1 h-px bg-muted",e),...t})}function ee({className:e,...t}){return o(N,{className:a("ml-auto body-sm tracking-widest opacity-60",e),...t})}function te({label:e,children:t,variant:r,isDisabled:i,withChevron:n=!0,size:l,isNonModal:F,id:p,"aria-label":d="Menu",...s}){return u(z,{...s,children:[o(T,{id:p,isDisabled:i,autoFocus:!!s.autoFocus,variant:r,size:l,"aria-label":d,withChevron:n,children:e}),o(w,{className:"overflow-auto",children:o(C,{...s,children:t})})]})}export{te as EasyMenu,C as Menu,X as MenuCollection,Z as MenuHeader,Y as MenuItem,ee as MenuKeyboard,w as MenuPopover,_ as MenuSeparator,W as MenuSubTrigger,z as MenuTrigger};
2
- //# sourceMappingURL=menu.js.map
1
+ import{classNames as e}from"../utilities/theme.js";import{At as t,b as n,c as r}from"../icons.js";import{ListBoxCollection as i}from"./list-box.js";import{SelectPopover as a,SelectTrigger as o}from"./select.js";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";import{Header as u,Keyboard as d,Menu as f,MenuItem as p,MenuTrigger as m,Separator as h,SubmenuTrigger as g,composeRenderProps as _}from"react-aria-components";var v=m,y=g,b=i;function x({className:t,...n}){return c(a,{className:_(t,t=>e(t)),...n})}function S({className:t,...n}){return c(f,{className:e(`overflow-auto p-1 outline-0 body-base`,t),escapeKeyBehavior:`none`,...n})}function C({children:i,className:a,...o}){return c(p,{textValue:o.textValue||(typeof i==`string`?i:void 0),className:_(a,t=>e(`btn btn-ghost relative flex justify-start input-dim`,`data-[selection-mode]:pl-input`,t)),...o,children:_(i,(e,i)=>l(s,{children:[c(`span`,{className:`absolute left-2 flex size-icon items-center justify-center`,children:i.isSelected&&l(s,{children:[i.selectionMode==`single`&&c(n,{className:`size-icon fill-current`}),i.selectionMode==`multiple`&&c(r,{className:`size-icon`})]})}),e,i.hasSubmenu&&c(t,{className:`ml-auto size-icon`})]}))})}function w({className:t,inset:n,separator:r=!0,...i}){return c(u,{className:e(`px-3 py-1.5 body font-semibold`,n&&`pl-input`,r&&`-mx-1 mb-1 border-b border-b-border pb-2.5`,t),...i})}function T({className:t,...n}){return c(h,{className:e(`-mx-1 my-1 h-px bg-muted`,t),...n})}function E({className:t,...n}){return c(d,{className:e(`ml-auto body-sm tracking-widest opacity-60`,t),...n})}function D({label:e,children:t,variant:n,isDisabled:r,withChevron:i=!0,size:a,isNonModal:s,id:u,"aria-label":d=`Menu`,...f}){return l(v,{...f,children:[c(o,{id:u,isDisabled:r,autoFocus:!!f.autoFocus,variant:n,size:a,"aria-label":d,withChevron:i,children:e}),c(x,{className:`overflow-auto`,children:c(S,{...f,children:t})})]})}export{D as EasyMenu,S as Menu,b as MenuCollection,w as MenuHeader,C as MenuItem,E as MenuKeyboard,x as MenuPopover,T as MenuSeparator,y as MenuSubTrigger,v as MenuTrigger};
2
+ //# sourceMappingURL=menu.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"menu.js","sources":["../../lib/components/menu.tsx"],"sourcesContent":["import { VariantProps } from 'class-variance-authority';\nimport {\n Header as AriaHeader,\n Keyboard as AriaKeyboard,\n Menu as AriaMenu,\n MenuItem as AriaMenuItem,\n MenuItemProps as AriaMenuItemProps,\n MenuProps as AriaMenuProps,\n MenuTrigger as AriaMenuTrigger,\n MenuTriggerProps as AriaMenuTriggerProps,\n Separator as AriaSeparator,\n SeparatorProps as AriaSeparatorProps,\n SubmenuTrigger as AriaSubmenuTrigger,\n composeRenderProps,\n PopoverProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\n\nimport { buttonVariants } from './button';\nimport { IcCheck, IcDot, IcRight } from './icons';\nimport { ListBoxCollection } from './list-box';\nimport { SelectPopover, SelectTrigger } from './select';\n\nexport const MenuTrigger = AriaMenuTrigger;\nexport const MenuSubTrigger = AriaSubmenuTrigger;\nexport const MenuCollection = ListBoxCollection;\n\nexport function MenuPopover({ className, ...props }: PopoverProps) {\n return <SelectPopover className={composeRenderProps(className, className => classNames(className))} {...props} />;\n}\n\nexport function Menu<T extends object>({ className, ...props }: AriaMenuProps<T>) {\n return (\n <AriaMenu\n className={classNames('overflow-auto p-1 outline-0 body-base', className)}\n escapeKeyBehavior=\"none\"\n {...props}\n />\n );\n}\n\nexport function MenuItem({ children, className, ...props }: AriaMenuItemProps & { ref?: React.Ref<HTMLDivElement> }) {\n return (\n <AriaMenuItem\n textValue={props.textValue || (typeof children === 'string' ? children : undefined)}\n className={composeRenderProps(className, className =>\n classNames(\n 'btn btn-ghost relative flex justify-start input-dim',\n /* Selection Mode */\n 'data-[selection-mode]:pl-input',\n className\n )\n )}\n {...props}\n >\n {composeRenderProps(children, (children, renderProps) => (\n <>\n <span className=\"absolute left-2 flex size-icon items-center justify-center\">\n {renderProps.isSelected && (\n <>\n {renderProps.selectionMode == 'single' && <IcDot className=\"size-icon fill-current\" />}\n {renderProps.selectionMode == 'multiple' && <IcCheck className=\"size-icon\" />}\n </>\n )}\n </span>\n\n {children}\n\n {renderProps.hasSubmenu && <IcRight className=\"ml-auto size-icon\" />}\n </>\n ))}\n </AriaMenuItem>\n );\n}\n\ninterface MenuHeaderProps extends React.ComponentProps<typeof AriaHeader> {\n inset?: boolean;\n separator?: boolean;\n}\n\nexport function MenuHeader({ className, inset, separator = true, ...props }: MenuHeaderProps) {\n return (\n <AriaHeader\n className={classNames(\n 'px-3 py-1.5 body font-semibold',\n inset && 'pl-input',\n separator && '-mx-1 mb-1 border-b border-b-border pb-2.5',\n className\n )}\n {...props}\n />\n );\n}\n\nexport function MenuSeparator({ className, ...props }: AriaSeparatorProps) {\n return <AriaSeparator className={classNames('-mx-1 my-1 h-px bg-muted', className)} {...props} />;\n}\n\nexport function MenuKeyboard({ className, ...props }: React.ComponentProps<typeof AriaKeyboard>) {\n return <AriaKeyboard className={classNames('ml-auto body-sm tracking-widest opacity-60', className)} {...props} />;\n}\ninterface MenuProps<T>\n extends AriaMenuProps<T>,\n VariantProps<typeof buttonVariants>,\n Omit<AriaMenuTriggerProps, 'children'> {\n label?: React.ReactNode;\n isDisabled?: boolean;\n isNonModal?: boolean;\n id?: string;\n withChevron?: boolean;\n}\n// TODO name this better\nexport function EasyMenu<T extends object>({\n label,\n children,\n variant,\n isDisabled,\n withChevron = true,\n size,\n isNonModal,\n id,\n 'aria-label': ariaLabel = 'Menu',\n ...props\n}: MenuProps<T>) {\n return (\n <MenuTrigger {...props}>\n <SelectTrigger\n id={id}\n isDisabled={isDisabled}\n autoFocus={!!props.autoFocus}\n variant={variant}\n size={size}\n aria-label={ariaLabel}\n withChevron={withChevron}\n >\n {label}\n </SelectTrigger>\n <MenuPopover className=\"overflow-auto\">\n <Menu {...props}>{children}</Menu>\n </MenuPopover>\n </MenuTrigger>\n );\n}\n"],"names":["MenuTrigger","AriaMenuTrigger","MenuSubTrigger","AriaSubmenuTrigger","MenuCollection","ListBoxCollection","MenuPopover","className","props","jsx","SelectPopover","composeRenderProps","classNames","Menu","AriaMenu","MenuItem","children","AriaMenuItem","renderProps","jsxs","Fragment","IcDot","IcCheck","IcRight","MenuHeader","inset","separator","AriaHeader","MenuSeparator","AriaSeparator","MenuKeyboard","AriaKeyboard","EasyMenu","label","variant","isDisabled","withChevron","size","isNonModal","id","ariaLabel","SelectTrigger"],"mappings":"quBAwBO,MAAMA,EAAcC,EACdC,EAAiBC,EACjBC,EAAiBC,EAEvB,SAASC,EAAY,CAAE,UAAAC,EAAW,GAAGC,GAAuB,CAC/D,OAAOC,EAACC,EAAA,CAAc,UAAWC,EAAmBJ,EAAWA,GAAaK,EAAWL,CAAS,CAAC,EAAI,GAAGC,CAAA,CAAO,CACnH,CAEO,SAASK,EAAuB,CAAE,UAAAN,EAAW,GAAGC,GAA2B,CAC9E,OACIC,EAACK,EAAA,CACG,UAAWF,EAAW,wCAAyCL,CAAS,EACxE,kBAAkB,OACjB,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASO,EAAS,CAAE,SAAAC,EAAU,UAAAT,EAAW,GAAGC,GAAkE,CACjH,OACIC,EAACQ,EAAA,CACG,UAAWT,EAAM,YAAc,OAAOQ,GAAa,SAAWA,EAAW,QACzE,UAAWL,EAAmBJ,EAAWA,GACrCK,EACI,sDAEA,iCACAL,CAAA,CACJ,EAEH,GAAGC,EAEH,SAAAG,EAAmBK,EAAU,CAACA,EAAUE,IACrCC,EAAAC,EAAA,CACI,SAAA,CAAAX,EAAC,OAAA,CAAK,UAAU,6DACX,SAAAS,EAAY,YACTC,EAAAC,EAAA,CACK,SAAA,CAAAF,EAAY,eAAiB,UAAYT,EAACY,EAAA,CAAM,UAAU,yBAAyB,EACnFH,EAAY,eAAiB,YAAcT,EAACa,EAAA,CAAQ,UAAU,WAAA,CAAY,CAAA,CAAA,CAC/E,CAAA,CAER,EAECN,EAEAE,EAAY,YAAcT,EAACc,EAAA,CAAQ,UAAU,mBAAA,CAAoB,CAAA,EACtE,CACH,CAAA,CAAA,CAGb,CAOO,SAASC,EAAW,CAAE,UAAAjB,EAAW,MAAAkB,EAAO,UAAAC,EAAY,GAAM,GAAGlB,GAA0B,CAC1F,OACIC,EAACkB,EAAA,CACG,UAAWf,EACP,iCACAa,GAAS,WACTC,GAAa,6CACbnB,CAAA,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEO,SAASoB,EAAc,CAAE,UAAArB,EAAW,GAAGC,GAA6B,CACvE,OAAOC,EAACoB,GAAc,UAAWjB,EAAW,2BAA4BL,CAAS,EAAI,GAAGC,EAAO,CACnG,CAEO,SAASsB,GAAa,CAAE,UAAAvB,EAAW,GAAGC,GAAoD,CAC7F,OAAOC,EAACsB,GAAa,UAAWnB,EAAW,6CAA8CL,CAAS,EAAI,GAAGC,EAAO,CACpH,CAYO,SAASwB,GAA2B,CACvC,MAAAC,EACA,SAAAjB,EACA,QAAAkB,EACA,WAAAC,EACA,YAAAC,EAAc,GACd,KAAAC,EACA,WAAAC,EACA,GAAAC,EACA,aAAcC,EAAY,OAC1B,GAAGhC,CACP,EAAiB,CACb,OACIW,EAACnB,EAAA,CAAa,GAAGQ,EACb,SAAA,CAAAC,EAACgC,EAAA,CACG,GAAAF,EACA,WAAAJ,EACA,UAAW,CAAC,CAAC3B,EAAM,UACnB,QAAA0B,EACA,KAAAG,EACA,aAAYG,EACZ,YAAAJ,EAEC,SAAAH,CAAA,CAAA,EAELxB,EAACH,GAAY,UAAU,gBACnB,WAACO,EAAA,CAAM,GAAGL,EAAQ,SAAAQ,CAAA,CAAS,CAAA,CAC/B,CAAA,EACJ,CAER"}
1
+ {"version":3,"file":"menu.js","names":[],"sources":["../../lib/components/menu.tsx"],"sourcesContent":["import { VariantProps } from 'class-variance-authority';\nimport {\n Header as AriaHeader,\n Keyboard as AriaKeyboard,\n Menu as AriaMenu,\n MenuItem as AriaMenuItem,\n MenuItemProps as AriaMenuItemProps,\n MenuProps as AriaMenuProps,\n MenuTrigger as AriaMenuTrigger,\n MenuTriggerProps as AriaMenuTriggerProps,\n Separator as AriaSeparator,\n SeparatorProps as AriaSeparatorProps,\n SubmenuTrigger as AriaSubmenuTrigger,\n composeRenderProps,\n PopoverProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\n\nimport { buttonVariants } from './button';\nimport { IcCheck, IcDot, IcRight } from './icons';\nimport { ListBoxCollection } from './list-box';\nimport { SelectPopover, SelectTrigger } from './select';\n\nexport const MenuTrigger = AriaMenuTrigger;\nexport const MenuSubTrigger = AriaSubmenuTrigger;\nexport const MenuCollection = ListBoxCollection;\n\nexport function MenuPopover({ className, ...props }: PopoverProps) {\n return <SelectPopover className={composeRenderProps(className, className => classNames(className))} {...props} />;\n}\n\nexport function Menu<T extends object>({ className, ...props }: AriaMenuProps<T>) {\n return (\n <AriaMenu\n className={classNames('overflow-auto p-1 outline-0 body-base', className)}\n escapeKeyBehavior=\"none\"\n {...props}\n />\n );\n}\n\nexport function MenuItem({ children, className, ...props }: AriaMenuItemProps & { ref?: React.Ref<HTMLDivElement> }) {\n return (\n <AriaMenuItem\n textValue={props.textValue || (typeof children === 'string' ? children : undefined)}\n className={composeRenderProps(className, className =>\n classNames(\n 'btn btn-ghost relative flex justify-start input-dim',\n /* Selection Mode */\n 'data-[selection-mode]:pl-input',\n className\n )\n )}\n {...props}\n >\n {composeRenderProps(children, (children, renderProps) => (\n <>\n <span className=\"absolute left-2 flex size-icon items-center justify-center\">\n {renderProps.isSelected && (\n <>\n {renderProps.selectionMode == 'single' && <IcDot className=\"size-icon fill-current\" />}\n {renderProps.selectionMode == 'multiple' && <IcCheck className=\"size-icon\" />}\n </>\n )}\n </span>\n\n {children}\n\n {renderProps.hasSubmenu && <IcRight className=\"ml-auto size-icon\" />}\n </>\n ))}\n </AriaMenuItem>\n );\n}\n\ninterface MenuHeaderProps extends React.ComponentProps<typeof AriaHeader> {\n inset?: boolean;\n separator?: boolean;\n}\n\nexport function MenuHeader({ className, inset, separator = true, ...props }: MenuHeaderProps) {\n return (\n <AriaHeader\n className={classNames(\n 'px-3 py-1.5 body font-semibold',\n inset && 'pl-input',\n separator && '-mx-1 mb-1 border-b border-b-border pb-2.5',\n className\n )}\n {...props}\n />\n );\n}\n\nexport function MenuSeparator({ className, ...props }: AriaSeparatorProps) {\n return <AriaSeparator className={classNames('-mx-1 my-1 h-px bg-muted', className)} {...props} />;\n}\n\nexport function MenuKeyboard({ className, ...props }: React.ComponentProps<typeof AriaKeyboard>) {\n return <AriaKeyboard className={classNames('ml-auto body-sm tracking-widest opacity-60', className)} {...props} />;\n}\ninterface MenuProps<T>\n extends AriaMenuProps<T>,\n VariantProps<typeof buttonVariants>,\n Omit<AriaMenuTriggerProps, 'children'> {\n label?: React.ReactNode;\n isDisabled?: boolean;\n isNonModal?: boolean;\n id?: string;\n withChevron?: boolean;\n}\n// TODO name this better\nexport function EasyMenu<T extends object>({\n label,\n children,\n variant,\n isDisabled,\n withChevron = true,\n size,\n isNonModal,\n id,\n 'aria-label': ariaLabel = 'Menu',\n ...props\n}: MenuProps<T>) {\n return (\n <MenuTrigger {...props}>\n <SelectTrigger\n id={id}\n isDisabled={isDisabled}\n autoFocus={!!props.autoFocus}\n variant={variant}\n size={size}\n aria-label={ariaLabel}\n withChevron={withChevron}\n >\n {label}\n </SelectTrigger>\n <MenuPopover className=\"overflow-auto\">\n <Menu {...props}>{children}</Menu>\n </MenuPopover>\n </MenuTrigger>\n );\n}\n"],"mappings":"obAwBA,IAAa,EAAc,EACd,EAAiB,EACjB,EAAiB,EAE9B,SAAgB,EAAY,CAAE,YAAW,GAAG,GAAuB,CAC/D,OAAO,EAAC,EAAD,CAAe,UAAW,EAAmB,EAAW,GAAa,EAAW,CAAS,CAAC,EAAG,GAAI,CAAQ,CAAA,CACpH,CAEA,SAAgB,EAAuB,CAAE,YAAW,GAAG,GAA2B,CAC9E,OACI,EAAC,EAAD,CACI,UAAW,EAAW,wCAAyC,CAAS,EACxE,kBAAkB,OAClB,GAAI,CACP,CAAA,CAET,CAEA,SAAgB,EAAS,CAAE,WAAU,YAAW,GAAG,GAAkE,CACjH,OACI,EAAC,EAAD,CACI,UAAW,EAAM,YAAc,OAAO,GAAa,SAAW,EAAW,IAAA,IACzE,UAAW,EAAmB,EAAW,GACrC,EACI,sDAEA,iCACA,CACJ,CACJ,EACA,GAAI,EAEH,SAAA,EAAmB,GAAW,EAAU,IACrC,EAAA,EAAA,CAAA,SAAA,CACI,EAAC,OAAD,CAAM,UAAU,6DACX,SAAA,EAAY,YACT,EAAA,EAAA,CAAA,SAAA,CACK,EAAY,eAAiB,UAAY,EAAC,EAAD,CAAO,UAAU,wBAA0B,CAAA,EACpF,EAAY,eAAiB,YAAc,EAAC,EAAD,CAAS,UAAU,WAAa,CAAA,CAC9E,CAAA,CAAA,CAEJ,CAAA,EAEL,EAEA,EAAY,YAAc,EAAC,EAAD,CAAS,UAAU,mBAAqB,CAAA,CACrE,CAAA,CAAA,CACL,CACS,CAAA,CAEtB,CAOA,SAAgB,EAAW,CAAE,YAAW,QAAO,YAAY,GAAM,GAAG,GAA0B,CAC1F,OACI,EAAC,EAAD,CACI,UAAW,EACP,iCACA,GAAS,WACT,GAAa,6CACb,CACJ,EACA,GAAI,CACP,CAAA,CAET,CAEA,SAAgB,EAAc,CAAE,YAAW,GAAG,GAA6B,CACvE,OAAO,EAAC,EAAD,CAAe,UAAW,EAAW,2BAA4B,CAAS,EAAG,GAAI,CAAQ,CAAA,CACpG,CAEA,SAAgB,EAAa,CAAE,YAAW,GAAG,GAAoD,CAC7F,OAAO,EAAC,EAAD,CAAc,UAAW,EAAW,6CAA8C,CAAS,EAAG,GAAI,CAAQ,CAAA,CACrH,CAYA,SAAgB,EAA2B,CACvC,QACA,WACA,UACA,aACA,cAAc,GACd,OACA,aACA,KACA,aAAc,EAAY,OAC1B,GAAG,GACU,CACb,OACI,EAAC,EAAD,CAAa,GAAI,EAAjB,SAAA,CACI,EAAC,EAAD,CACQ,KACQ,aACZ,UAAW,CAAC,CAAC,EAAM,UACV,UACH,OACN,aAAY,EACC,cAEZ,SAAA,CACU,CAAA,EACf,EAAC,EAAD,CAAa,UAAU,gBACnB,SAAA,EAAC,EAAD,CAAM,GAAI,EAAQ,UAAe,CAAA,CACxB,CAAA,CACJ,GAErB"}
@@ -11,8 +11,8 @@ export interface MultiSelectProps extends MultipleSelectionProps, FormFieldProps
11
11
  triggerLabel?: ((value: Set<string | number>) => React.ReactNode) | React.ReactNode;
12
12
  maxVisibleItems?: number;
13
13
  }
14
- export declare function MultiSelect({ items, value, onChange: setValue, label, errorMessage, description, requiredIndicator, maxVisibleItems, ...props }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
14
+ export declare function MultiSelect({ items, value, onChange: setValue, label, errorMessage, description, requiredIndicator, maxVisibleItems, ...props }: MultiSelectProps): React.JSX.Element;
15
15
  export interface TfMultiSelectProps extends Omit<MultiSelectProps, 'value' | 'onChange'> {
16
16
  }
17
- export declare function TfMultiSelect({ ...props }: TfMultiSelectProps): import("react/jsx-runtime").JSX.Element;
17
+ export declare function TfMultiSelect({ ...props }: TfMultiSelectProps): React.JSX.Element;
18
18
  export {};
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as n,jsxs as p,Fragment as u}from"react/jsx-runtime";import{useId as g}from"react";import{EasyMenu as h,MenuItem as b}from"./menu.js";import{getFieldErrorMessage as M}from"../utilities/form.js";import{useFieldContext as C}from"../utilities/form-context.js";import{FormField as y}from"./form.js";import"react-aria-components";import"../utilities/theme.js";import"clsx";import"./icons.js";import"@icons-pack/react-simple-icons";import"./list-box.js";import"./select.js";import"./button.js";import"class-variance-authority";import"./loader.js";import"./popover.js";import"@tanstack/react-form";import"./card.js";function F(i,e,t){const l=new Map(i.map(r=>[r.id,r.label])),s=Array.from(e).map(r=>l.get(r)).filter(r=>r!==void 0);if(s.length===0)return"Select options";const d=s.slice(0,t).flatMap((r,m)=>m===0?[r]:[", ",r]),a=s.length-t;return a>0?p(u,{children:[d," +",a," more"]}):n(u,{children:d})}function S(i,e,t,l){return i===void 0?F(t,e,l):typeof i=="function"?i(e):i}function v({items:i,value:e,onChange:t,label:l,errorMessage:s,description:c,requiredIndicator:d,maxVisibleItems:a=2,...r}){const m=g(),f=r.id||m;return n("div",{className:"group form-field",children:n(y,{label:l,description:c,errorMessage:s,requiredIndicator:d,htmlFor:f,children:n(h,{id:f,isNonModal:!1,selectionMode:"multiple",selectedKeys:e,onSelectionChange:o=>{typeof o!="string"&&t(o)},items:i,label:S(r.triggerLabel,e,i,a),...r,children:o=>n(b,{id:o.id,isDisabled:o?.disabled,children:o.label},o.id)})})})}function O({...i}){const e=C({disabled:i.isDisabled});return n(v,{requiredIndicator:e.isRequired,value:new Set(e.state.value),onChange:t=>e.setValue(Array.from(t)),onClose:e.handleBlur,errorMessage:M(e),...i,isDisabled:i.isDisabled||e.isSubmitting})}export{v as MultiSelect,O as TfMultiSelect};
2
- //# sourceMappingURL=multi-select.js.map
1
+ "use client";import{useFieldContext as e}from"../utilities/form-context.js";import{FormField as t}from"./form.js";import{getFieldErrorMessage as n}from"../utilities/form.js";import{EasyMenu as r,MenuItem as i}from"./menu.js";import{useId as a}from"react";import{Fragment as o,jsx as s,jsxs as c}from"react/jsx-runtime";function l(e,t,n){let r=new Map(e.map(e=>[e.id,e.label])),i=Array.from(t).map(e=>r.get(e)).filter(e=>e!==void 0);if(i.length===0)return`Select options`;let a=i.slice(0,n).flatMap((e,t)=>t===0?[e]:[`, `,e]),l=i.length-n;return l>0?c(o,{children:[a,` +`,l,` more`]}):s(o,{children:a})}function u(e,t,n,r){return e===void 0?l(n,t,r):typeof e==`function`?e(t):e}function d({items:e,value:n,onChange:o,label:c,errorMessage:l,description:d,requiredIndicator:f,maxVisibleItems:p=2,...m}){let h=a(),g=m.id||h;return s(`div`,{className:`group form-field`,children:s(t,{label:c,description:d,errorMessage:l,requiredIndicator:f,htmlFor:g,children:s(r,{id:g,isNonModal:!1,selectionMode:`multiple`,selectedKeys:n,onSelectionChange:e=>{typeof e!=`string`&&o(e)},items:e,label:u(m.triggerLabel,n,e,p),...m,children:e=>s(i,{id:e.id,isDisabled:e?.disabled,children:e.label},e.id)})})})}function f({...t}){let r=e({disabled:t.isDisabled});return s(d,{requiredIndicator:r.isRequired,value:new Set(r.state.value),onChange:e=>r.setValue(Array.from(e)),onClose:r.handleBlur,errorMessage:n(r),...t,isDisabled:t.isDisabled||r.isSubmitting})}export{d as MultiSelect,f as TfMultiSelect};
2
+ //# sourceMappingURL=multi-select.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"multi-select.js","sources":["../../lib/components/multi-select.tsx"],"sourcesContent":["'use client';\nimport React, { useId } from 'react';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport type { SelectOption } from '../components/select-options';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { FormField, type FormFieldProps } from './form';\n\ninterface MultipleSelectionProps {\n value: Set<string | number>;\n onChange: (v: Set<string | number>) => void;\n items: SelectOption[];\n}\n\nexport interface MultiSelectProps\n extends MultipleSelectionProps,\n FormFieldProps,\n Omit<React.ComponentProps<typeof EasyMenu>, 'label' | 'items'> {\n triggerLabel?: ((value: Set<string | number>) => React.ReactNode) | React.ReactNode;\n maxVisibleItems?: number;\n}\n\nfunction getDefaultTriggerLabel(\n items: SelectOption[],\n value: Set<string | number>,\n maxVisibleItems: number\n): React.ReactNode {\n const idToLabel = new Map<string | number, React.ReactNode>(items.map(item => [item.id, item.label]));\n\n const labels = Array.from(value)\n .map(id => idToLabel.get(id))\n .filter((x): x is React.ReactNode => x !== undefined);\n\n if (labels.length === 0) return 'Select options';\n\n const visible = labels.slice(0, maxVisibleItems);\n const withCommas = visible.flatMap((node, i) => (i === 0 ? [node] : [', ', node]));\n const overflowCount = labels.length - maxVisibleItems;\n\n return overflowCount > 0 ? (\n <>\n {withCommas} +{overflowCount} more\n </>\n ) : (\n <>{withCommas}</>\n );\n}\n\nfunction getTriggerLabel(\n triggerLabel: MultiSelectProps['triggerLabel'],\n value: Set<string | number>,\n items: SelectOption[],\n maxVisibleItems: number\n): React.ReactNode {\n if (triggerLabel === undefined) {\n return getDefaultTriggerLabel(items, value, maxVisibleItems);\n }\n\n if (typeof triggerLabel === 'function') {\n return triggerLabel(value);\n }\n\n return triggerLabel;\n}\n\nexport function MultiSelect({\n items,\n value,\n onChange: setValue,\n label,\n errorMessage,\n description,\n requiredIndicator,\n maxVisibleItems = 2,\n ...props\n}: MultiSelectProps) {\n const generatedId = useId();\n const fieldId = props.id || generatedId;\n\n return (\n <div className=\"group form-field\">\n <FormField {...{ label, description, errorMessage, requiredIndicator, htmlFor: fieldId }}>\n <EasyMenu\n id={fieldId}\n isNonModal={false}\n selectionMode=\"multiple\"\n selectedKeys={value}\n onSelectionChange={v => {\n if (typeof v === 'string') return;\n setValue(v);\n }}\n items={items}\n label={getTriggerLabel(props.triggerLabel, value, items, maxVisibleItems)}\n {...props}\n >\n {item => (\n <MenuItem id={item.id} key={item.id} isDisabled={item?.disabled}>\n {item.label}\n </MenuItem>\n )}\n </EasyMenu>\n </FormField>\n </div>\n );\n}\n\nexport interface TfMultiSelectProps extends Omit<MultiSelectProps, 'value' | 'onChange'> {}\nexport function TfMultiSelect({ ...props }: TfMultiSelectProps) {\n const field = useFieldContext<string[]>({\n disabled: props.isDisabled,\n });\n\n return (\n <MultiSelect\n requiredIndicator={field.isRequired}\n value={new Set(field.state.value)}\n // @ts-expect-error\n onChange={e => field.setValue(Array.from(e))}\n onClose={field.handleBlur}\n errorMessage={getFieldErrorMessage(field)}\n {...props}\n isDisabled={props.isDisabled || field.isSubmitting}\n />\n );\n}\n"],"names":["getDefaultTriggerLabel","items","value","maxVisibleItems","idToLabel","item","labels","id","x","withCommas","node","i","overflowCount","jsxs","Fragment","getTriggerLabel","triggerLabel","MultiSelect","setValue","label","errorMessage","description","requiredIndicator","props","generatedId","useId","fieldId","jsx","FormField","EasyMenu","v","MenuItem","TfMultiSelect","field","useFieldContext","e","getFieldErrorMessage"],"mappings":"ynBAsBA,SAASA,EACLC,EACAC,EACAC,EACe,CACf,MAAMC,EAAY,IAAI,IAAsCH,EAAM,IAAII,GAAQ,CAACA,EAAK,GAAIA,EAAK,KAAK,CAAC,CAAC,EAE9FC,EAAS,MAAM,KAAKJ,CAAK,EAC1B,IAAIK,GAAMH,EAAU,IAAIG,CAAE,CAAC,EAC3B,OAAQC,GAA4BA,IAAM,MAAS,EAExD,GAAIF,EAAO,SAAW,EAAG,MAAO,iBAGhC,MAAMG,EADUH,EAAO,MAAM,EAAGH,CAAe,EACpB,QAAQ,CAACO,EAAMC,IAAOA,IAAM,EAAI,CAACD,CAAI,EAAI,CAAC,KAAMA,CAAI,CAAE,EAC3EE,EAAgBN,EAAO,OAASH,EAEtC,OAAOS,EAAgB,EACnBC,EAAAC,EAAA,CACK,SAAA,CAAAL,EAAW,KAAGG,EAAc,OAAA,CAAA,CACjC,OAEG,SAAAH,CAAA,CAAW,CAEtB,CAEA,SAASM,EACLC,EACAd,EACAD,EACAE,EACe,CACf,OAAIa,IAAiB,OACVhB,EAAuBC,EAAOC,EAAOC,CAAe,EAG3D,OAAOa,GAAiB,WACjBA,EAAad,CAAK,EAGtBc,CACX,CAEO,SAASC,EAAY,CACxB,MAAAhB,EACA,MAAAC,EACA,SAAUgB,EACV,MAAAC,EACA,aAAAC,EACA,YAAAC,EACA,kBAAAC,EACA,gBAAAnB,EAAkB,EAClB,GAAGoB,CACP,EAAqB,CACjB,MAAMC,EAAcC,EAAA,EACdC,EAAUH,EAAM,IAAMC,EAE5B,OACIG,EAAC,MAAA,CAAI,UAAU,mBACX,WAACC,EAAA,CAAgB,MAAAT,EAAO,YAAAE,EAAa,aAAAD,EAAc,kBAAAE,EAAmB,QAASI,EAC3E,SAAAC,EAACE,EAAA,CACG,GAAIH,EACJ,WAAY,GACZ,cAAc,WACd,aAAcxB,EACd,kBAAmB4B,GAAK,CAChB,OAAOA,GAAM,UACjBZ,EAASY,CAAC,CACd,EACA,MAAA7B,EACA,MAAOc,EAAgBQ,EAAM,aAAcrB,EAAOD,EAAOE,CAAe,EACvE,GAAGoB,EAEH,SAAAlB,GACGsB,EAACI,EAAA,CAAS,GAAI1B,EAAK,GAAkB,WAAYA,GAAM,SAClD,SAAAA,EAAK,KAAA,EADkBA,EAAK,EAEjC,CAAA,CAAA,EAGZ,CAAA,CACJ,CAER,CAGO,SAAS2B,EAAc,CAAE,GAAGT,GAA6B,CAC5D,MAAMU,EAAQC,EAA0B,CACpC,SAAUX,EAAM,UAAA,CACnB,EAED,OACII,EAACV,EAAA,CACG,kBAAmBgB,EAAM,WACzB,MAAO,IAAI,IAAIA,EAAM,MAAM,KAAK,EAEhC,SAAUE,GAAKF,EAAM,SAAS,MAAM,KAAKE,CAAC,CAAC,EAC3C,QAASF,EAAM,WACf,aAAcG,EAAqBH,CAAK,EACvC,GAAGV,EACJ,WAAYA,EAAM,YAAcU,EAAM,YAAA,CAAA,CAGlD"}
1
+ {"version":3,"file":"multi-select.js","names":[],"sources":["../../lib/components/multi-select.tsx"],"sourcesContent":["'use client';\nimport React, { useId } from 'react';\nimport { EasyMenu, MenuItem } from '../components/menu';\nimport type { SelectOption } from '../components/select-options';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { FormField, type FormFieldProps } from './form';\n\ninterface MultipleSelectionProps {\n value: Set<string | number>;\n onChange: (v: Set<string | number>) => void;\n items: SelectOption[];\n}\n\nexport interface MultiSelectProps\n extends MultipleSelectionProps,\n FormFieldProps,\n Omit<React.ComponentProps<typeof EasyMenu>, 'label' | 'items'> {\n triggerLabel?: ((value: Set<string | number>) => React.ReactNode) | React.ReactNode;\n maxVisibleItems?: number;\n}\n\nfunction getDefaultTriggerLabel(\n items: SelectOption[],\n value: Set<string | number>,\n maxVisibleItems: number\n): React.ReactNode {\n const idToLabel = new Map<string | number, React.ReactNode>(items.map(item => [item.id, item.label]));\n\n const labels = Array.from(value)\n .map(id => idToLabel.get(id))\n .filter((x): x is React.ReactNode => x !== undefined);\n\n if (labels.length === 0) return 'Select options';\n\n const visible = labels.slice(0, maxVisibleItems);\n const withCommas = visible.flatMap((node, i) => (i === 0 ? [node] : [', ', node]));\n const overflowCount = labels.length - maxVisibleItems;\n\n return overflowCount > 0 ? (\n <>\n {withCommas} +{overflowCount} more\n </>\n ) : (\n <>{withCommas}</>\n );\n}\n\nfunction getTriggerLabel(\n triggerLabel: MultiSelectProps['triggerLabel'],\n value: Set<string | number>,\n items: SelectOption[],\n maxVisibleItems: number\n): React.ReactNode {\n if (triggerLabel === undefined) {\n return getDefaultTriggerLabel(items, value, maxVisibleItems);\n }\n\n if (typeof triggerLabel === 'function') {\n return triggerLabel(value);\n }\n\n return triggerLabel;\n}\n\nexport function MultiSelect({\n items,\n value,\n onChange: setValue,\n label,\n errorMessage,\n description,\n requiredIndicator,\n maxVisibleItems = 2,\n ...props\n}: MultiSelectProps) {\n const generatedId = useId();\n const fieldId = props.id || generatedId;\n\n return (\n <div className=\"group form-field\">\n <FormField {...{ label, description, errorMessage, requiredIndicator, htmlFor: fieldId }}>\n <EasyMenu\n id={fieldId}\n isNonModal={false}\n selectionMode=\"multiple\"\n selectedKeys={value}\n onSelectionChange={v => {\n if (typeof v === 'string') return;\n setValue(v);\n }}\n items={items}\n label={getTriggerLabel(props.triggerLabel, value, items, maxVisibleItems)}\n {...props}\n >\n {item => (\n <MenuItem id={item.id} key={item.id} isDisabled={item?.disabled}>\n {item.label}\n </MenuItem>\n )}\n </EasyMenu>\n </FormField>\n </div>\n );\n}\n\nexport interface TfMultiSelectProps extends Omit<MultiSelectProps, 'value' | 'onChange'> {}\nexport function TfMultiSelect({ ...props }: TfMultiSelectProps) {\n const field = useFieldContext<string[]>({\n disabled: props.isDisabled,\n });\n\n return (\n <MultiSelect\n requiredIndicator={field.isRequired}\n value={new Set(field.state.value)}\n // @ts-expect-error\n onChange={e => field.setValue(Array.from(e))}\n onClose={field.handleBlur}\n errorMessage={getFieldErrorMessage(field)}\n {...props}\n isDisabled={props.isDisabled || field.isSubmitting}\n />\n );\n}\n"],"mappings":"+TAsBA,SAAS,EACL,EACA,EACA,EACe,CACf,IAAM,EAAY,IAAI,IAAsC,EAAM,IAAI,GAAQ,CAAC,EAAK,GAAI,EAAK,KAAK,CAAC,CAAC,EAE9F,EAAS,MAAM,KAAK,CAAK,CAAC,CAC3B,IAAI,GAAM,EAAU,IAAI,CAAE,CAAC,CAAC,CAC5B,OAAQ,GAA4B,IAAM,IAAA,EAAS,EAExD,GAAI,EAAO,SAAW,EAAG,MAAO,iBAGhC,IAAM,EADU,EAAO,MAAM,EAAG,CACb,CAAA,CAAQ,SAAS,EAAM,IAAO,IAAM,EAAI,CAAC,CAAI,EAAI,CAAC,KAAM,CAAI,CAAE,EAC3E,EAAgB,EAAO,OAAS,EAEtC,OAAO,EAAgB,EACnB,EAAA,EAAA,CAAA,SAAA,CACK,EAAW,KAAG,EAAc,OAC/B,CAAA,CAAA,EAEF,EAAA,EAAA,CAAA,SAAG,CAAa,CAAA,CAExB,CAEA,SAAS,EACL,EACA,EACA,EACA,EACe,CASf,OARI,IAAiB,IAAA,GACV,EAAuB,EAAO,EAAO,CAAe,EAG3D,OAAO,GAAiB,WACjB,EAAa,CAAK,EAGtB,CACX,CAEA,SAAgB,EAAY,CACxB,QACA,QACA,SAAU,EACV,QACA,eACA,cACA,oBACA,kBAAkB,EAClB,GAAG,GACc,CACjB,IAAM,EAAc,EAAM,EACpB,EAAU,EAAM,IAAM,EAE5B,OACI,EAAC,MAAD,CAAK,UAAU,mBACX,SAAA,EAAC,EAAD,CAAiB,QAAO,cAAa,eAAc,oBAAmB,QAAS,EAC3E,SAAA,EAAC,EAAD,CACI,GAAI,EACJ,WAAY,GACZ,cAAc,WACd,aAAc,EACd,kBAAmB,GAAK,CAChB,OAAO,GAAM,UACjB,EAAS,CAAC,CACd,EACO,QACP,MAAO,EAAgB,EAAM,aAAc,EAAO,EAAO,CAAe,EACxE,GAAI,EAEH,SAAA,GACG,EAAC,EAAD,CAAU,GAAI,EAAK,GAAkB,WAAY,GAAM,SAClD,SAAA,EAAK,KACA,EAFkB,EAAK,EAEvB,CAER,CAAA,CACH,CAAA,CACV,CAAA,CAEb,CAGA,SAAgB,EAAc,CAAE,GAAG,GAA6B,CAC5D,IAAM,EAAQ,EAA0B,CACpC,SAAU,EAAM,UACpB,CAAC,EAED,OACI,EAAC,EAAD,CACI,kBAAmB,EAAM,WACzB,MAAO,IAAI,IAAI,EAAM,MAAM,KAAK,EAEhC,SAAU,GAAK,EAAM,SAAS,MAAM,KAAK,CAAC,CAAC,EAC3C,QAAS,EAAM,WACf,aAAc,EAAqB,CAAK,EACxC,GAAI,EACJ,WAAY,EAAM,YAAc,EAAM,YACzC,CAAA,CAET"}
@@ -1,8 +1,8 @@
1
1
  import { InputProps as AriaInputProps, NumberFieldProps as AriaNumberFieldProps } from 'react-aria-components';
2
2
  import { FormFieldProps } from './form';
3
- export declare function NumberFieldInput({ className, ...props }: AriaInputProps): import("react/jsx-runtime").JSX.Element;
3
+ export declare function NumberFieldInput({ className, ...props }: AriaInputProps): import("react").JSX.Element;
4
4
  export type NumberFieldProps = AriaNumberFieldProps & FormFieldProps;
5
- export declare function NumberField({ label, description, errorMessage, requiredIndicator, className, ...props }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
6
- export declare function TfNumberField({ isDisabled, ...props }: Omit<React.ComponentProps<typeof NumberField>, 'value' | 'id' | 'onChange' | 'onBlur'>): import("react/jsx-runtime").JSX.Element;
7
- export declare function DaysField({ label, description, errorMessage, requiredIndicator, className, ...props }: NumberFieldProps): import("react/jsx-runtime").JSX.Element;
8
- export declare function TfDaysField({ isDisabled, ...props }: Omit<React.ComponentProps<typeof DaysField>, 'value' | 'id' | 'onChange' | 'onBlur'>): import("react/jsx-runtime").JSX.Element;
5
+ export declare function NumberField({ label, description, errorMessage, requiredIndicator, className, ...props }: NumberFieldProps): import("react").JSX.Element;
6
+ export declare function TfNumberField({ isDisabled, ...props }: Omit<React.ComponentProps<typeof NumberField>, 'value' | 'id' | 'onChange' | 'onBlur'>): import("react").JSX.Element;
7
+ export declare function DaysField({ label, description, errorMessage, requiredIndicator, className, ...props }: NumberFieldProps): import("react").JSX.Element;
8
+ export declare function TfDaysField({ isDisabled, ...props }: Omit<React.ComponentProps<typeof DaysField>, 'value' | 'id' | 'onChange' | 'onBlur'>): import("react").JSX.Element;
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as r,jsxs as m}from"react/jsx-runtime";import{NumberField as F,composeRenderProps as u,Input as v}from"react-aria-components";import{Button as x}from"./button.js";import{getFieldErrorMessage as d}from"../utilities/form.js";import{useFieldContext as p}from"../utilities/form-context.js";import{classNames as a}from"../utilities/theme.js";import{FormField as f,FieldGroup as h}from"./form.js";import{IcUp as I,IcDown as C}from"./icons.js";import"class-variance-authority";import"./loader.js";import"clsx";import"@icons-pack/react-simple-icons";import"react";import"@tanstack/react-form";import"./card.js";const b=F;function N({className:i,...n}){return r(v,{className:u(i,e=>a("w-fit min-w-0 flex-1 border-r border-transparent outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",e)),...n})}function w({className:i,...n}){return m("div",{className:a("absolute right-0 flex h-full flex-col border-l",i),...n,children:[r(c,{slot:"increment",children:r(I,{"aria-hidden":!0,className:"size-icon"})}),r("div",{className:"border-b"}),r(c,{slot:"decrement",children:r(C,{"aria-hidden":!0,className:"size-icon"})})]})}function c({className:i,...n}){return r(x,{className:u(i,e=>a("w-auto grow h-3 px-0.5 text-muted-foreground",e)),variant:"ghost",size:"none",...n})}function y({label:i,description:n,errorMessage:e,requiredIndicator:t,className:o,...l}){return r(b,{className:u(o,s=>a("group form-field",s)),...l,children:r(f,{label:i,description:n,errorMessage:e,requiredIndicator:t,children:m(h,{children:[r(N,{className:"pr-input"}),r(w,{})]})})})}function U({isDisabled:i,...n}){const e=p({disabled:i});return r(y,{isInvalid:!!d(e),isDisabled:i||e.isSubmitting,value:e.state.value,id:e.name,onChange:e.handleChange,onBlur:e.handleBlur,errorMessage:d(e),requiredIndicator:e.isRequired,...n})}function D({label:i,description:n,errorMessage:e,requiredIndicator:t,className:o,...l}){return r(b,{className:u(o,s=>a("group form-field",s)),...l,children:r(f,{label:i,description:n,errorMessage:e,requiredIndicator:t,children:m(h,{children:[r(N,{className:"pr-input"}),r("div",{className:"absolute right-3 opacity-80 select-none text-muted",children:"days"})]})})})}function V({isDisabled:i,...n}){const e=p({disabled:i}),t=86400,o=e.state.value!=null?e.state.value/t:void 0,l=s=>{const g=s*t;e.handleChange(g)};return r(D,{isInvalid:!!d(e),isDisabled:i||e.isSubmitting,value:o,id:e.name,onChange:l,onBlur:e.handleBlur,errorMessage:d(e),requiredIndicator:e.isRequired,...n})}export{D as DaysField,y as NumberField,N as NumberFieldInput,V as TfDaysField,U as TfNumberField};
2
- //# sourceMappingURL=numberfield.js.map
1
+ "use client";import{classNames as e}from"../utilities/theme.js";import{Ut as t,x as n}from"../icons.js";import{useFieldContext as r}from"../utilities/form-context.js";import{Button as i}from"./button.js";import{FieldGroup as a,FormField as o}from"./form.js";import{getFieldErrorMessage as s}from"../utilities/form.js";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{Input as u,NumberField as d,composeRenderProps as f}from"react-aria-components";var p=d;function m({className:t,...n}){return c(u,{className:f(t,t=>e(`w-fit min-w-0 flex-1 border-r border-transparent outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden`,t)),...n})}function h({className:r,...i}){return l(`div`,{className:e(`absolute right-0 flex h-full flex-col border-l`,r),...i,children:[c(g,{slot:`increment`,children:c(t,{"aria-hidden":!0,className:`size-icon`})}),c(`div`,{className:`border-b`}),c(g,{slot:`decrement`,children:c(n,{"aria-hidden":!0,className:`size-icon`})})]})}function g({className:t,...n}){return c(i,{className:f(t,t=>e(`w-auto grow h-3 px-0.5 text-muted-foreground`,t)),variant:`ghost`,size:`none`,...n})}function _({label:t,description:n,errorMessage:r,requiredIndicator:i,className:s,...u}){return c(p,{className:f(s,t=>e(`group form-field`,t)),...u,children:c(o,{label:t,description:n,errorMessage:r,requiredIndicator:i,children:l(a,{children:[c(m,{className:`pr-input`}),c(h,{})]})})})}function v({isDisabled:e,...t}){let n=r({disabled:e});return c(_,{isInvalid:!!s(n),isDisabled:e||n.isSubmitting,value:n.state.value,id:n.name,onChange:n.handleChange,onBlur:n.handleBlur,errorMessage:s(n),requiredIndicator:n.isRequired,...t})}function y({label:t,description:n,errorMessage:r,requiredIndicator:i,className:s,...u}){return c(p,{className:f(s,t=>e(`group form-field`,t)),...u,children:c(o,{label:t,description:n,errorMessage:r,requiredIndicator:i,children:l(a,{children:[c(m,{className:`pr-input`}),c(`div`,{className:`absolute right-3 opacity-80 select-none text-muted`,children:`days`})]})})})}function b({isDisabled:e,...t}){let n=r({disabled:e}),i=86400,a=n.state.value==null?void 0:n.state.value/i;return c(y,{isInvalid:!!s(n),isDisabled:e||n.isSubmitting,value:a,id:n.name,onChange:e=>{let t=e*i;n.handleChange(t)},onBlur:n.handleBlur,errorMessage:s(n),requiredIndicator:n.isRequired,...t})}export{y as DaysField,_ as NumberField,m as NumberFieldInput,b as TfDaysField,v as TfNumberField};
2
+ //# sourceMappingURL=numberfield.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"numberfield.js","sources":["../../lib/components/numberfield.tsx"],"sourcesContent":["'use client';\nimport {\n ButtonProps as AriaButtonProps,\n Input as AriaInput,\n InputProps as AriaInputProps,\n NumberField as AriaNumberField,\n NumberFieldProps as AriaNumberFieldProps,\n composeRenderProps,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FieldGroup, FormField, type FormFieldProps } from './form';\nimport { IcDown, IcUp } from './icons';\n\nconst ANumberField = AriaNumberField;\n\nexport function NumberFieldInput({ className, ...props }: AriaInputProps) {\n return (\n <AriaInput\n className={composeRenderProps(className, className =>\n classNames(\n 'w-fit min-w-0 flex-1 border-r border-transparent outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden',\n className\n )\n )}\n {...props}\n />\n );\n}\n\nfunction NumberFieldSteppers({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div className={classNames('absolute right-0 flex h-full flex-col border-l', className)} {...props}>\n <NumberFieldStepper slot=\"increment\">\n <IcUp aria-hidden className=\"size-icon\" />\n </NumberFieldStepper>\n <div className=\"border-b\" />\n <NumberFieldStepper slot=\"decrement\">\n <IcDown aria-hidden className=\"size-icon\" />\n </NumberFieldStepper>\n </div>\n );\n}\n\nfunction NumberFieldStepper({ className, ...props }: AriaButtonProps) {\n return (\n <Button\n className={composeRenderProps(className, className =>\n classNames('w-auto grow h-3 px-0.5 text-muted-foreground', className)\n )}\n variant={'ghost'}\n size={'none'}\n {...props}\n />\n );\n}\n\nexport type NumberFieldProps = AriaNumberFieldProps & FormFieldProps;\nexport function NumberField({\n label,\n description,\n errorMessage,\n requiredIndicator,\n className,\n ...props\n}: NumberFieldProps) {\n return (\n <ANumberField\n className={composeRenderProps(className, className => classNames('group form-field', className))}\n {...props}\n >\n <FormField {...{ label, description, errorMessage, requiredIndicator }}>\n <FieldGroup>\n <NumberFieldInput className={'pr-input'} />\n <NumberFieldSteppers />\n </FieldGroup>\n </FormField>\n </ANumberField>\n );\n}\n\nexport function TfNumberField({\n isDisabled,\n ...props\n}: Omit<React.ComponentProps<typeof NumberField>, 'value' | 'id' | 'onChange' | 'onBlur'>) {\n const field = useFieldContext<number>({ disabled: isDisabled });\n\n return (\n <NumberField\n isInvalid={!!getFieldErrorMessage(field)}\n isDisabled={isDisabled || field.isSubmitting}\n value={field.state.value}\n id={field.name}\n onChange={field.handleChange}\n onBlur={field.handleBlur}\n errorMessage={getFieldErrorMessage(field)}\n requiredIndicator={field.isRequired}\n {...props}\n />\n );\n}\n\nexport function DaysField({\n label,\n description,\n errorMessage,\n requiredIndicator,\n className,\n ...props\n}: NumberFieldProps) {\n return (\n <ANumberField\n className={composeRenderProps(className, className => classNames('group form-field', className))}\n {...props}\n >\n <FormField {...{ label, description, errorMessage, requiredIndicator }}>\n <FieldGroup>\n <NumberFieldInput className={'pr-input'} />\n <div className=\"absolute right-3 opacity-80 select-none text-muted\">days</div>\n </FieldGroup>\n </FormField>\n </ANumberField>\n );\n}\n\nexport function TfDaysField({\n isDisabled,\n ...props\n}: Omit<React.ComponentProps<typeof DaysField>, 'value' | 'id' | 'onChange' | 'onBlur'>) {\n const field = useFieldContext<number>({ disabled: isDisabled });\n\n const SECONDS_PER_DAY = 86400; // 24 * 60 * 60\n\n // Convert seconds to days for display\n const daysValue = field.state.value != null ? field.state.value / SECONDS_PER_DAY : undefined;\n\n // Convert days to seconds when value changes\n const handleDaysChange = (days: number) => {\n const seconds = days * SECONDS_PER_DAY;\n field.handleChange(seconds);\n };\n\n return (\n <DaysField\n isInvalid={!!getFieldErrorMessage(field)}\n isDisabled={isDisabled || field.isSubmitting}\n value={daysValue}\n id={field.name}\n onChange={handleDaysChange}\n onBlur={field.handleBlur}\n errorMessage={getFieldErrorMessage(field)}\n requiredIndicator={field.isRequired}\n {...props}\n />\n );\n}\n"],"names":["ANumberField","AriaNumberField","NumberFieldInput","className","props","jsx","AriaInput","composeRenderProps","classNames","NumberFieldSteppers","jsxs","NumberFieldStepper","IcUp","IcDown","Button","NumberField","label","description","errorMessage","requiredIndicator","FormField","FieldGroup","TfNumberField","isDisabled","field","useFieldContext","getFieldErrorMessage","DaysField","TfDaysField","SECONDS_PER_DAY","daysValue","handleDaysChange","days","seconds"],"mappings":"mnBAiBA,MAAMA,EAAeC,EAEd,SAASC,EAAiB,CAAE,UAAAC,EAAW,GAAGC,GAAyB,CACtE,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GACrCK,EACI,wIACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASK,EAAoB,CAAE,UAAAN,EAAW,GAAGC,GAAsC,CAC/E,OACIM,EAAC,OAAI,UAAWF,EAAW,iDAAkDL,CAAS,EAAI,GAAGC,EACzF,SAAA,CAAAC,EAACM,EAAA,CAAmB,KAAK,YACrB,SAAAN,EAACO,GAAK,cAAW,GAAC,UAAU,WAAA,CAAY,CAAA,CAC5C,EACAP,EAAC,MAAA,CAAI,UAAU,UAAA,CAAW,EAC1BA,EAACM,EAAA,CAAmB,KAAK,YACrB,SAAAN,EAACQ,GAAO,cAAW,GAAC,UAAU,WAAA,CAAY,CAAA,CAC9C,CAAA,EACJ,CAER,CAEA,SAASF,EAAmB,CAAE,UAAAR,EAAW,GAAGC,GAA0B,CAClE,OACIC,EAACS,EAAA,CACG,UAAWP,EAAmBJ,EAAWA,GACrCK,EAAW,+CAAgDL,CAAS,CAAA,EAExE,QAAS,QACT,KAAM,OACL,GAAGC,CAAA,CAAA,CAGhB,CAGO,SAASW,EAAY,CACxB,MAAAC,EACA,YAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,UAAAhB,EACA,GAAGC,CACP,EAAqB,CACjB,OACIC,EAACL,EAAA,CACG,UAAWO,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,SAAAC,EAACe,EAAA,CAAgB,MAAAJ,EAAO,YAAAC,EAAa,aAAAC,EAAc,kBAAAC,EAC/C,SAAAT,EAACW,EAAA,CACG,SAAA,CAAAhB,EAACH,EAAA,CAAiB,UAAW,UAAA,CAAY,IACxCO,EAAA,CAAA,CAAoB,CAAA,CAAA,CACzB,CAAA,CACJ,CAAA,CAAA,CAGZ,CAEO,SAASa,EAAc,CAC1B,WAAAC,EACA,GAAGnB,CACP,EAA2F,CACvF,MAAMoB,EAAQC,EAAwB,CAAE,SAAUF,EAAY,EAE9D,OACIlB,EAACU,EAAA,CACG,UAAW,CAAC,CAACW,EAAqBF,CAAK,EACvC,WAAYD,GAAcC,EAAM,aAChC,MAAOA,EAAM,MAAM,MACnB,GAAIA,EAAM,KACV,SAAUA,EAAM,aAChB,OAAQA,EAAM,WACd,aAAcE,EAAqBF,CAAK,EACxC,kBAAmBA,EAAM,WACxB,GAAGpB,CAAA,CAAA,CAGhB,CAEO,SAASuB,EAAU,CACtB,MAAAX,EACA,YAAAC,EACA,aAAAC,EACA,kBAAAC,EACA,UAAAhB,EACA,GAAGC,CACP,EAAqB,CACjB,OACIC,EAACL,EAAA,CACG,UAAWO,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,SAAAC,EAACe,EAAA,CAAgB,MAAAJ,EAAO,YAAAC,EAAa,aAAAC,EAAc,kBAAAC,EAC/C,SAAAT,EAACW,EAAA,CACG,SAAA,CAAAhB,EAACH,EAAA,CAAiB,UAAW,UAAA,CAAY,EACzCG,EAAC,MAAA,CAAI,UAAU,qDAAqD,SAAA,MAAA,CAAI,CAAA,CAAA,CAC5E,CAAA,CACJ,CAAA,CAAA,CAGZ,CAEO,SAASuB,EAAY,CACxB,WAAAL,EACA,GAAGnB,CACP,EAAyF,CACrF,MAAMoB,EAAQC,EAAwB,CAAE,SAAUF,EAAY,EAExDM,EAAkB,MAGlBC,EAAYN,EAAM,MAAM,OAAS,KAAOA,EAAM,MAAM,MAAQK,EAAkB,OAG9EE,EAAoBC,GAAiB,CACvC,MAAMC,EAAUD,EAAOH,EACvBL,EAAM,aAAaS,CAAO,CAC9B,EAEA,OACI5B,EAACsB,EAAA,CACG,UAAW,CAAC,CAACD,EAAqBF,CAAK,EACvC,WAAYD,GAAcC,EAAM,aAChC,MAAOM,EACP,GAAIN,EAAM,KACV,SAAUO,EACV,OAAQP,EAAM,WACd,aAAcE,EAAqBF,CAAK,EACxC,kBAAmBA,EAAM,WACxB,GAAGpB,CAAA,CAAA,CAGhB"}
1
+ {"version":3,"file":"numberfield.js","names":[],"sources":["../../lib/components/numberfield.tsx"],"sourcesContent":["'use client';\nimport {\n ButtonProps as AriaButtonProps,\n Input as AriaInput,\n InputProps as AriaInputProps,\n NumberField as AriaNumberField,\n NumberFieldProps as AriaNumberFieldProps,\n composeRenderProps,\n} from 'react-aria-components';\n\nimport { Button } from '../components/button';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { FieldGroup, FormField, type FormFieldProps } from './form';\nimport { IcDown, IcUp } from './icons';\n\nconst ANumberField = AriaNumberField;\n\nexport function NumberFieldInput({ className, ...props }: AriaInputProps) {\n return (\n <AriaInput\n className={composeRenderProps(className, className =>\n classNames(\n 'w-fit min-w-0 flex-1 border-r border-transparent outline-0 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden',\n className\n )\n )}\n {...props}\n />\n );\n}\n\nfunction NumberFieldSteppers({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div className={classNames('absolute right-0 flex h-full flex-col border-l', className)} {...props}>\n <NumberFieldStepper slot=\"increment\">\n <IcUp aria-hidden className=\"size-icon\" />\n </NumberFieldStepper>\n <div className=\"border-b\" />\n <NumberFieldStepper slot=\"decrement\">\n <IcDown aria-hidden className=\"size-icon\" />\n </NumberFieldStepper>\n </div>\n );\n}\n\nfunction NumberFieldStepper({ className, ...props }: AriaButtonProps) {\n return (\n <Button\n className={composeRenderProps(className, className =>\n classNames('w-auto grow h-3 px-0.5 text-muted-foreground', className)\n )}\n variant={'ghost'}\n size={'none'}\n {...props}\n />\n );\n}\n\nexport type NumberFieldProps = AriaNumberFieldProps & FormFieldProps;\nexport function NumberField({\n label,\n description,\n errorMessage,\n requiredIndicator,\n className,\n ...props\n}: NumberFieldProps) {\n return (\n <ANumberField\n className={composeRenderProps(className, className => classNames('group form-field', className))}\n {...props}\n >\n <FormField {...{ label, description, errorMessage, requiredIndicator }}>\n <FieldGroup>\n <NumberFieldInput className={'pr-input'} />\n <NumberFieldSteppers />\n </FieldGroup>\n </FormField>\n </ANumberField>\n );\n}\n\nexport function TfNumberField({\n isDisabled,\n ...props\n}: Omit<React.ComponentProps<typeof NumberField>, 'value' | 'id' | 'onChange' | 'onBlur'>) {\n const field = useFieldContext<number>({ disabled: isDisabled });\n\n return (\n <NumberField\n isInvalid={!!getFieldErrorMessage(field)}\n isDisabled={isDisabled || field.isSubmitting}\n value={field.state.value}\n id={field.name}\n onChange={field.handleChange}\n onBlur={field.handleBlur}\n errorMessage={getFieldErrorMessage(field)}\n requiredIndicator={field.isRequired}\n {...props}\n />\n );\n}\n\nexport function DaysField({\n label,\n description,\n errorMessage,\n requiredIndicator,\n className,\n ...props\n}: NumberFieldProps) {\n return (\n <ANumberField\n className={composeRenderProps(className, className => classNames('group form-field', className))}\n {...props}\n >\n <FormField {...{ label, description, errorMessage, requiredIndicator }}>\n <FieldGroup>\n <NumberFieldInput className={'pr-input'} />\n <div className=\"absolute right-3 opacity-80 select-none text-muted\">days</div>\n </FieldGroup>\n </FormField>\n </ANumberField>\n );\n}\n\nexport function TfDaysField({\n isDisabled,\n ...props\n}: Omit<React.ComponentProps<typeof DaysField>, 'value' | 'id' | 'onChange' | 'onBlur'>) {\n const field = useFieldContext<number>({ disabled: isDisabled });\n\n const SECONDS_PER_DAY = 86400; // 24 * 60 * 60\n\n // Convert seconds to days for display\n const daysValue = field.state.value != null ? field.state.value / SECONDS_PER_DAY : undefined;\n\n // Convert days to seconds when value changes\n const handleDaysChange = (days: number) => {\n const seconds = days * SECONDS_PER_DAY;\n field.handleChange(seconds);\n };\n\n return (\n <DaysField\n isInvalid={!!getFieldErrorMessage(field)}\n isDisabled={isDisabled || field.isSubmitting}\n value={daysValue}\n id={field.name}\n onChange={handleDaysChange}\n onBlur={field.handleBlur}\n errorMessage={getFieldErrorMessage(field)}\n requiredIndicator={field.isRequired}\n {...props}\n />\n );\n}\n"],"mappings":"ucAiBA,IAAM,EAAe,EAErB,SAAgB,EAAiB,CAAE,YAAW,GAAG,GAAyB,CACtE,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GACrC,EACI,wIACA,CACJ,CACJ,EACA,GAAI,CACP,CAAA,CAET,CAEA,SAAS,EAAoB,CAAE,YAAW,GAAG,GAAsC,CAC/E,OACI,EAAC,MAAD,CAAK,UAAW,EAAW,iDAAkD,CAAS,EAAG,GAAI,EAA7F,SAAA,CACI,EAAC,EAAD,CAAoB,KAAK,YACrB,SAAA,EAAC,EAAD,CAAM,cAAA,GAAY,UAAU,WAAa,CAAA,CACzB,CAAA,EACpB,EAAC,MAAD,CAAK,UAAU,UAAY,CAAA,EAC3B,EAAC,EAAD,CAAoB,KAAK,YACrB,SAAA,EAAC,EAAD,CAAQ,cAAA,GAAY,UAAU,WAAa,CAAA,CAC3B,CAAA,CACnB,GAEb,CAEA,SAAS,EAAmB,CAAE,YAAW,GAAG,GAA0B,CAClE,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GACrC,EAAW,+CAAgD,CAAS,CACxE,EACA,QAAS,QACT,KAAM,OACN,GAAI,CACP,CAAA,CAET,CAGA,SAAgB,EAAY,CACxB,QACA,cACA,eACA,oBACA,YACA,GAAG,GACc,CACjB,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GAAa,EAAW,mBAAoB,CAAS,CAAC,EAC/F,GAAI,EAEJ,SAAA,EAAC,EAAD,CAAiB,QAAO,cAAa,eAAc,oBAC/C,SAAA,EAAC,EAAD,CAAA,SAAA,CACI,EAAC,EAAD,CAAkB,UAAW,UAAa,CAAA,EAC1C,EAAC,EAAD,CAAsB,CAAA,CACd,CAAA,CAAA,CACL,CAAA,CACD,CAAA,CAEtB,CAEA,SAAgB,EAAc,CAC1B,aACA,GAAG,GACoF,CACvF,IAAM,EAAQ,EAAwB,CAAE,SAAU,CAAW,CAAC,EAE9D,OACI,EAAC,EAAD,CACI,UAAW,CAAC,CAAC,EAAqB,CAAK,EACvC,WAAY,GAAc,EAAM,aAChC,MAAO,EAAM,MAAM,MACnB,GAAI,EAAM,KACV,SAAU,EAAM,aAChB,OAAQ,EAAM,WACd,aAAc,EAAqB,CAAK,EACxC,kBAAmB,EAAM,WACzB,GAAI,CACP,CAAA,CAET,CAEA,SAAgB,EAAU,CACtB,QACA,cACA,eACA,oBACA,YACA,GAAG,GACc,CACjB,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GAAa,EAAW,mBAAoB,CAAS,CAAC,EAC/F,GAAI,EAEJ,SAAA,EAAC,EAAD,CAAiB,QAAO,cAAa,eAAc,oBAC/C,SAAA,EAAC,EAAD,CAAA,SAAA,CACI,EAAC,EAAD,CAAkB,UAAW,UAAa,CAAA,EAC1C,EAAC,MAAD,CAAK,UAAU,qDAAqD,SAAA,MAAS,CAAA,CACrE,CAAA,CAAA,CACL,CAAA,CACD,CAAA,CAEtB,CAEA,SAAgB,EAAY,CACxB,aACA,GAAG,GACkF,CACrF,IAAM,EAAQ,EAAwB,CAAE,SAAU,CAAW,CAAC,EAExD,EAAkB,MAGlB,EAAY,EAAM,MAAM,OAAS,KAA6C,IAAA,GAAtC,EAAM,MAAM,MAAQ,EAQlE,OACI,EAAC,EAAD,CACI,UAAW,CAAC,CAAC,EAAqB,CAAK,EACvC,WAAY,GAAc,EAAM,aAChC,MAAO,EACP,GAAI,EAAM,KACV,SAXkB,GAAiB,CACvC,IAAM,EAAU,EAAO,EACvB,EAAM,aAAa,CAAO,CAC9B,EASQ,OAAQ,EAAM,WACd,aAAc,EAAqB,CAAK,EACxC,kBAAmB,EAAM,WACzB,GAAI,CACP,CAAA,CAET"}
@@ -13,5 +13,5 @@ export interface KeyValueCardProps<T> {
13
13
  fields: DisplayField<T>[];
14
14
  className?: string;
15
15
  }
16
- export declare function ObjectTable<T extends object>({ data, label, fields }: KeyValueCardProps<T>): import("react/jsx-runtime").JSX.Element;
16
+ export declare function ObjectTable<T extends object>({ data, label, fields }: KeyValueCardProps<T>): import("react").JSX.Element;
17
17
  export {};
@@ -1,2 +1,2 @@
1
- import{jsxs as c,jsx as e}from"react/jsx-runtime";import{Badge as d}from"./badge.js";import{Card as p,CardHeader as m,CardTitle as f,CardContent as h}from"./card.js";import{Skeleton as u}from"./skeleton.js";import{formatDate as x}from"../utilities/date.js";import"class-variance-authority";import"../utilities/theme.js";import"clsx";function S({data:s,label:o,fields:l}){const i=(n,r)=>{if(n.render)return n.render(r);if(r==null)return"-";switch(n.type){case"date":return e("span",{children:x(r)});case"yesno":return e("span",{children:r?"Yes":"No"});case"badge":return e("div",{className:"flex flex-wrap gap-1",children:Array.isArray(r)?r.map((t,a)=>e(d,{children:typeof t=="object"?t?.name||t?.id:t},a)):r});case"boolean":return e("span",{children:r.toString()});default:return e("span",{children:r})}};return c(p,{children:[e(m,{children:e(f,{children:o})}),e(h,{children:e("div",{className:"flex flex-col gap-2",children:s?l.map(n=>{const r=n.accessor?n.accessor.split(".").reduce((t,a)=>t&&a in t?t[a]:void 0,s):null;return c("div",{className:"flex w-full flex-col md:flex-row justify-between first:pt-0 last:pb-0",children:[e("p",{className:"body flex w-full justify-start col-span-1",children:n.display}),e("div",{className:"body flex w-full justify-start text-wrap break-all",children:i(n,r)})]},n.display)}):l.map((n,r)=>e(u,{className:"h-12 w-full"},r))})})]})}export{S as ObjectTable};
2
- //# sourceMappingURL=object-table.js.map
1
+ import{formatDate as e}from"../utilities/date.js";import{Card as t,CardContent as n,CardHeader as r,CardTitle as i}from"./card.js";import{Badge as a}from"./badge.js";import{Skeleton as o}from"./skeleton.js";import{jsx as s,jsxs as c}from"react/jsx-runtime";function l({data:l,label:u,fields:d}){let f=(t,n)=>{if(t.render)return t.render(n);if(n==null)return`-`;switch(t.type){case`date`:return s(`span`,{children:e(n)});case`yesno`:return s(`span`,{children:n?`Yes`:`No`});case`badge`:return s(`div`,{className:`flex flex-wrap gap-1`,children:Array.isArray(n)?n.map((e,t)=>s(a,{children:typeof e==`object`?e?.name||e?.id:e},t)):n});case`boolean`:return s(`span`,{children:n.toString()});default:return s(`span`,{children:n})}};return c(t,{children:[s(r,{children:s(i,{children:u})}),s(n,{children:s(`div`,{className:`flex flex-col gap-2`,children:l?d.map(e=>{let t=e.accessor?e.accessor.split(`.`).reduce((e,t)=>e&&t in e?e[t]:void 0,l):null;return c(`div`,{className:`flex w-full flex-col md:flex-row justify-between first:pt-0 last:pb-0`,children:[s(`p`,{className:`body flex w-full justify-start col-span-1`,children:e.display}),s(`div`,{className:`body flex w-full justify-start text-wrap break-all`,children:f(e,t)})]},e.display)}):d.map((e,t)=>s(o,{className:`h-12 w-full`},t))})})]})}export{l as ObjectTable};
2
+ //# sourceMappingURL=object-table.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"object-table.js","sources":["../../lib/components/object-table.tsx"],"sourcesContent":["import { Badge } from '../components/badge';\nimport { Card, CardContent, CardHeader, CardTitle } from '../components/card';\nimport { Skeleton } from '../components/skeleton';\nimport { formatDate } from '../utilities/date';\n\n// Utility type to handle nested keys (dot notation) in any object\ntype NestedKeyOf<T> = T extends object\n ? {\n [K in keyof T]: K extends string | number ? `${K & string}` | `${K & string}.${NestedKeyOf<T[K]>}` : never;\n }[keyof T]\n : never;\n\n// DisplayField type that works with nested keys\nexport type DisplayField<T> = {\n display: string;\n accessor: NestedKeyOf<T>;\n type?: 'text' | 'badge' | 'boolean' | 'date' | 'yesno' | 'copyButton' | 'link'; // Field types\n render?: (value: T) => React.ReactNode;\n};\n\nexport interface KeyValueCardProps<T> {\n data: T; // Ensure data is of type T\n label: string;\n fields: DisplayField<T>[];\n className?: string;\n}\n\n// This component is used to render object values in a tabular format\n// General patterns in the table are\n// Number\n// Status properties\n\nexport function ObjectTable<T extends object>({ data, label, fields }: KeyValueCardProps<T>) {\n const renderValue = (field: DisplayField<T>, value: any) => {\n if (field.render) {\n return field.render(value);\n }\n if (value === undefined || value === null) {\n return '-';\n }\n switch (field.type) {\n case 'date':\n return <span>{formatDate(value)}</span>;\n case 'yesno':\n return <span>{value ? 'Yes' : 'No'}</span>;\n case 'badge':\n return (\n <div className=\"flex flex-wrap gap-1\">\n {Array.isArray(value)\n ? value.map((item, index) => (\n <Badge key={index}>{typeof item === 'object' ? item?.name || item?.id : item}</Badge>\n ))\n : value}\n </div>\n );\n\n case 'boolean':\n return <span>{value.toString()}</span>;\n default:\n return <span>{value}</span>;\n }\n };\n\n return (\n <Card>\n <CardHeader>\n <CardTitle>{label}</CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"flex flex-col gap-2\">\n {data\n ? fields.map(field => {\n // TODO: improve this\n const value = field.accessor\n ? field.accessor\n .split('.')\n .reduce(\n (obj, key) => (obj && key in obj ? obj[key] : undefined),\n data as Record<string, any>\n )\n : null;\n\n return (\n <div\n key={field.display}\n className=\"flex w-full flex-col md:flex-row justify-between first:pt-0 last:pb-0\"\n >\n <p className=\"body flex w-full justify-start col-span-1\">{field.display}</p>\n <div className=\"body flex w-full justify-start text-wrap break-all\">\n {renderValue(field, value)}\n </div>\n </div>\n );\n })\n : fields.map((_, index) => <Skeleton key={index} className=\"h-12 w-full\" />)}\n </div>\n </CardContent>\n </Card>\n );\n}\n"],"names":["ObjectTable","data","label","fields","renderValue","field","value","jsx","formatDate","item","index","Badge","Card","CardHeader","CardTitle","CardContent","obj","key","jsxs","_","Skeleton"],"mappings":"6UAgCO,SAASA,EAA8B,CAAE,KAAAC,EAAM,MAAAC,EAAO,OAAAC,GAAgC,CACzF,MAAMC,EAAc,CAACC,EAAwBC,IAAe,CACxD,GAAID,EAAM,OACN,OAAOA,EAAM,OAAOC,CAAK,EAE7B,GAA2BA,GAAU,KACjC,MAAO,IAEX,OAAQD,EAAM,KAAA,CACV,IAAK,OACD,OAAOE,EAAC,OAAA,CAAM,SAAAC,EAAWF,CAAK,EAAE,EACpC,IAAK,QACD,OAAOC,EAAC,OAAA,CAAM,SAAAD,EAAQ,MAAQ,KAAK,EACvC,IAAK,QACD,OACIC,EAAC,MAAA,CAAI,UAAU,uBACV,SAAA,MAAM,QAAQD,CAAK,EACdA,EAAM,IAAI,CAACG,EAAMC,MACZC,EAAA,CAAmB,SAAA,OAAOF,GAAS,SAAWA,GAAM,MAAQA,GAAM,GAAKA,CAAA,EAA5DC,CAAiE,CAChF,EACDJ,CAAA,CACV,EAGR,IAAK,UACD,OAAOC,EAAC,OAAA,CAAM,SAAAD,EAAM,SAAA,EAAW,EACnC,QACI,OAAOC,EAAC,QAAM,SAAAD,CAAA,CAAM,CAAA,CAEhC,EAEA,SACKM,EAAA,CACG,SAAA,CAAAL,EAACM,EAAA,CACG,SAAAN,EAACO,EAAA,CAAW,SAAAZ,CAAA,CAAM,EACtB,EACAK,EAACQ,GACG,SAAAR,EAAC,MAAA,CAAI,UAAU,sBACV,SAAAN,EACKE,EAAO,IAAIE,GAAS,CAEhB,MAAMC,EAAQD,EAAM,SACdA,EAAM,SACD,MAAM,GAAG,EACT,OACG,CAACW,EAAKC,IAASD,GAAOC,KAAOD,EAAMA,EAAIC,CAAG,EAAI,OAC9ChB,CAAA,EAER,KAEN,OACIiB,EAAC,MAAA,CAEG,UAAU,wEAEV,SAAA,CAAAX,EAAC,IAAA,CAAE,UAAU,4CAA6C,SAAAF,EAAM,QAAQ,IACvE,MAAA,CAAI,UAAU,qDACV,SAAAD,EAAYC,EAAOC,CAAK,CAAA,CAC7B,CAAA,CAAA,EANKD,EAAM,OAAA,CASvB,CAAC,EACDF,EAAO,IAAI,CAACgB,EAAGT,IAAUH,EAACa,EAAA,CAAqB,UAAU,aAAA,EAAjBV,CAA+B,CAAE,EACnF,CAAA,CACJ,CAAA,EACJ,CAER"}
1
+ {"version":3,"file":"object-table.js","names":[],"sources":["../../lib/components/object-table.tsx"],"sourcesContent":["import { Badge } from '../components/badge';\nimport { Card, CardContent, CardHeader, CardTitle } from '../components/card';\nimport { Skeleton } from '../components/skeleton';\nimport { formatDate } from '../utilities/date';\n\n// Utility type to handle nested keys (dot notation) in any object\ntype NestedKeyOf<T> = T extends object\n ? {\n [K in keyof T]: K extends string | number ? `${K & string}` | `${K & string}.${NestedKeyOf<T[K]>}` : never;\n }[keyof T]\n : never;\n\n// DisplayField type that works with nested keys\nexport type DisplayField<T> = {\n display: string;\n accessor: NestedKeyOf<T>;\n type?: 'text' | 'badge' | 'boolean' | 'date' | 'yesno' | 'copyButton' | 'link'; // Field types\n render?: (value: T) => React.ReactNode;\n};\n\nexport interface KeyValueCardProps<T> {\n data: T; // Ensure data is of type T\n label: string;\n fields: DisplayField<T>[];\n className?: string;\n}\n\n// This component is used to render object values in a tabular format\n// General patterns in the table are\n// Number\n// Status properties\n\nexport function ObjectTable<T extends object>({ data, label, fields }: KeyValueCardProps<T>) {\n const renderValue = (field: DisplayField<T>, value: any) => {\n if (field.render) {\n return field.render(value);\n }\n if (value === undefined || value === null) {\n return '-';\n }\n switch (field.type) {\n case 'date':\n return <span>{formatDate(value)}</span>;\n case 'yesno':\n return <span>{value ? 'Yes' : 'No'}</span>;\n case 'badge':\n return (\n <div className=\"flex flex-wrap gap-1\">\n {Array.isArray(value)\n ? value.map((item, index) => (\n <Badge key={index}>{typeof item === 'object' ? item?.name || item?.id : item}</Badge>\n ))\n : value}\n </div>\n );\n\n case 'boolean':\n return <span>{value.toString()}</span>;\n default:\n return <span>{value}</span>;\n }\n };\n\n return (\n <Card>\n <CardHeader>\n <CardTitle>{label}</CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"flex flex-col gap-2\">\n {data\n ? fields.map(field => {\n // TODO: improve this\n const value = field.accessor\n ? field.accessor\n .split('.')\n .reduce(\n (obj, key) => (obj && key in obj ? obj[key] : undefined),\n data as Record<string, any>\n )\n : null;\n\n return (\n <div\n key={field.display}\n className=\"flex w-full flex-col md:flex-row justify-between first:pt-0 last:pb-0\"\n >\n <p className=\"body flex w-full justify-start col-span-1\">{field.display}</p>\n <div className=\"body flex w-full justify-start text-wrap break-all\">\n {renderValue(field, value)}\n </div>\n </div>\n );\n })\n : fields.map((_, index) => <Skeleton key={index} className=\"h-12 w-full\" />)}\n </div>\n </CardContent>\n </Card>\n );\n}\n"],"mappings":"iQAgCA,SAAgB,EAA8B,CAAE,OAAM,QAAO,UAAgC,CACzF,IAAM,GAAe,EAAwB,IAAe,CACxD,GAAI,EAAM,OACN,OAAO,EAAM,OAAO,CAAK,EAE7B,GAAI,GAAiC,KACjC,MAAO,IAEX,OAAQ,EAAM,KAAd,CACI,IAAK,OACD,OAAO,EAAC,OAAD,CAAA,SAAO,EAAW,CAAK,CAAQ,CAAA,EAC1C,IAAK,QACD,OAAO,EAAC,OAAD,CAAA,SAAO,EAAQ,MAAQ,IAAW,CAAA,EAC7C,IAAK,QACD,OACI,EAAC,MAAD,CAAK,UAAU,uBACV,SAAA,MAAM,QAAQ,CAAK,EACd,EAAM,KAAK,EAAM,IACb,EAAC,EAAD,CAAA,SAAoB,OAAO,GAAS,SAAW,GAAM,MAAQ,GAAM,GAAK,CAAY,EAAxE,CAAwE,CACvF,EACD,CACL,CAAA,EAGb,IAAK,UACD,OAAO,EAAC,OAAD,CAAA,SAAO,EAAM,SAAS,CAAQ,CAAA,EACzC,QACI,OAAO,EAAC,OAAD,CAAA,SAAO,CAAY,CAAA,CAClC,CACJ,EAEA,OACI,EAAC,EAAD,CAAA,SAAA,CACI,EAAC,EAAD,CAAA,SACI,EAAC,EAAD,CAAA,SAAY,CAAiB,CAAA,CACrB,CAAA,EACZ,EAAC,EAAD,CAAA,SACI,EAAC,MAAD,CAAK,UAAU,sBACV,SAAA,EACK,EAAO,IAAI,GAAS,CAEhB,IAAM,EAAQ,EAAM,SACd,EAAM,SACD,MAAM,GAAG,CAAC,CACV,QACI,EAAK,IAAS,GAAO,KAAO,EAAM,EAAI,GAAO,IAAA,GAC9C,CACJ,EACJ,KAEN,OACI,EAAC,MAAD,CAEI,UAAU,wEAFd,SAAA,CAII,EAAC,IAAD,CAAG,UAAU,4CAA6C,SAAA,EAAM,OAAW,CAAA,EAC3E,EAAC,MAAD,CAAK,UAAU,qDACV,SAAA,EAAY,EAAO,CAAK,CACxB,CAAA,CACJ,CAPI,EAAA,EAAM,OAOV,CAEb,CAAC,EACD,EAAO,KAAK,EAAG,IAAU,EAAC,EAAD,CAAsB,UAAU,aAAe,EAAhC,CAAgC,CAAC,CAC9E,CAAA,CACI,CAAA,CACX,CAAA,CAAA,CAEd"}
@@ -5,5 +5,5 @@ export type OfflineRequestFileInputProps = {
5
5
  isDisabled?: boolean;
6
6
  onBlur?: () => void;
7
7
  };
8
- export declare function OfflineRequestFileInput({ className, onSelect, isDisabled, onBlur }: OfflineRequestFileInputProps): import("react/jsx-runtime").JSX.Element;
9
- export declare function TfOfflineRequestFileInput({ label, description, isDisabled, className, ...props }: Omit<OfflineRequestFileInputProps, 'onSelect'> & FormFieldProps): import("react/jsx-runtime").JSX.Element;
8
+ export declare function OfflineRequestFileInput({ className, onSelect, isDisabled, onBlur }: OfflineRequestFileInputProps): import("react").JSX.Element;
9
+ export declare function TfOfflineRequestFileInput({ label, description, isDisabled, className, ...props }: Omit<OfflineRequestFileInputProps, 'onSelect'> & FormFieldProps): import("react").JSX.Element;
@@ -1,2 +1,2 @@
1
- "use client";import{jsxs as c,jsx as e}from"react/jsx-runtime";import{useState as m}from"react";import{getFieldErrorMessage as b}from"../utilities/form.js";import{useFieldContext as F}from"../utilities/form-context.js";import{classNames as h}from"../utilities/theme.js";import{Alert as N}from"./alert.js";import{Button as v}from"./button.js";import{FileTrigger as R}from"./file-trigger.js";import{FormField as q}from"./form.js";import{IcPlus as I}from"./icons.js";import"@tanstack/react-form";import"clsx";import"class-variance-authority";import"@icons-pack/react-simple-icons";import"react-aria-components";import"./loader.js";import"./card.js";function S({className:s,onSelect:t,isDisabled:l,onBlur:n}){const[i,r]=m(null),[a,f]=m(!1),[u,p]=m(null);async function x(o){return(await o.text()).trim()}const g=async o=>{p(null);const d=o?.[0]??null;if(!d){r(null),t(null);return}f(!0);try{const y=await x(d);r(d),t(y??null)}catch{p("Failed to read the file. Please try again."),r(null),t(null)}finally{f(!1)}n?.()};return c("div",{className:h("flex flex-col gap-2",s),children:[e(R,{onSelect:g,children:e(v,{size:"none",variant:"ghost",isDisabled:l||a,className:h("rounded-md border border-dashed border-text-primary/20 bg-surface-primary inline-flex justify-start items-center p-4"),onBlur:n,children:c("div",{className:"flex items-center gap-4",children:[e("div",{className:"flex size-12 items-center justify-center rounded-md border border-text-primary/20 bg-surface-primary",children:e(I,{className:"size-icon"})}),c("div",{className:"flex flex-col text-left",children:[e("p",{className:"body-sm",children:i?i.name:"Upload file"}),e("p",{className:"body-sm",children:i?"Click to replace":"Generated by the SDK"})]})]})})}),u&&e(N,{variant:"destructive",children:u})]})}function J({label:s,description:t,isDisabled:l,className:n,...i}){const r=F({disabled:l});return e("div",{children:e(q,{label:s,description:t,requiredIndicator:r.isRequired,errorMessage:b(r),children:e(S,{...i,onSelect:a=>r.handleChange(a),onBlur:()=>r.handleBlur(),isDisabled:l||r.isSubmitting,className:n})})})}export{S as OfflineRequestFileInput,J as TfOfflineRequestFileInput};
2
- //# sourceMappingURL=offline-request-file-input.js.map
1
+ "use client";import{classNames as e}from"../utilities/theme.js";import{xt as t}from"../icons.js";import{useFieldContext as n}from"../utilities/form-context.js";import{Button as r}from"./button.js";import{FormField as i}from"./form.js";import{getFieldErrorMessage as a}from"../utilities/form.js";import{Alert as o}from"./alert.js";import{FileTrigger as s}from"./file-trigger.js";import{useState as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";function d({className:n,onSelect:i,isDisabled:a,onBlur:d}){let[f,p]=c(null),[m,h]=c(!1),[g,_]=c(null);async function v(e){return(await e.text()).trim()}return u(`div`,{className:e(`flex flex-col gap-2`,n),children:[l(s,{onSelect:async e=>{_(null);let t=e?.[0]??null;if(!t){p(null),i(null);return}h(!0);try{let e=await v(t);p(t),i(e??null)}catch{_(`Failed to read the file. Please try again.`),p(null),i(null)}finally{h(!1)}d?.()},children:l(r,{size:`none`,variant:`ghost`,isDisabled:a||m,className:e(`rounded-md border border-dashed border-text-primary/20 bg-surface-primary inline-flex justify-start items-center p-4`),onBlur:d,children:u(`div`,{className:`flex items-center gap-4`,children:[l(`div`,{className:`flex size-12 items-center justify-center rounded-md border border-text-primary/20 bg-surface-primary`,children:l(t,{className:`size-icon`})}),u(`div`,{className:`flex flex-col text-left`,children:[l(`p`,{className:`body-sm`,children:f?f.name:`Upload file`}),l(`p`,{className:`body-sm`,children:f?`Click to replace`:`Generated by the SDK`})]})]})})}),g&&l(o,{variant:`destructive`,children:g})]})}function f({label:e,description:t,isDisabled:r,className:o,...s}){let c=n({disabled:r});return l(`div`,{children:l(i,{label:e,description:t,requiredIndicator:c.isRequired,errorMessage:a(c),children:l(d,{...s,onSelect:e=>c.handleChange(e),onBlur:()=>c.handleBlur(),isDisabled:r||c.isSubmitting,className:o})})})}export{d as OfflineRequestFileInput,f as TfOfflineRequestFileInput};
2
+ //# sourceMappingURL=offline-request-file-input.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"offline-request-file-input.js","sources":["../../lib/components/offline-request-file-input.tsx"],"sourcesContent":["'use client';\nimport { useState } from 'react';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { Alert } from './alert';\nimport { Button } from './button';\nimport { FileTrigger } from './file-trigger';\nimport { FormField, type FormFieldProps } from './form';\nimport { IcPlus } from './icons';\n\nexport type OfflineRequestFileInputProps = {\n className?: string;\n onSelect: (value: string | null) => void;\n isDisabled?: boolean;\n onBlur?: () => void;\n};\n\nexport function OfflineRequestFileInput({ className, onSelect, isDisabled, onBlur }: OfflineRequestFileInputProps) {\n const [selectedFile, setSelectedFile] = useState<File | null>(null);\n const [isReading, setIsReading] = useState(false);\n const [error, setError] = useState<string | null>(null);\n\n async function readOfflineRequestFileText(file: File): Promise<string> {\n return (await file.text()).trim();\n }\n\n const handleSelect = async (files: FileList | null) => {\n setError(null);\n\n const file = files?.[0] ?? null;\n\n if (!file) {\n setSelectedFile(null);\n onSelect(null);\n return;\n }\n\n setIsReading(true);\n try {\n const text = await readOfflineRequestFileText(file);\n setSelectedFile(file);\n onSelect(text ?? null);\n } catch {\n setError('Failed to read the file. Please try again.');\n setSelectedFile(null);\n onSelect(null);\n } finally {\n setIsReading(false);\n }\n onBlur?.();\n };\n\n return (\n <div className={classNames('flex flex-col gap-2', className)}>\n <FileTrigger onSelect={handleSelect}>\n <Button\n size=\"none\"\n variant=\"ghost\"\n isDisabled={isDisabled || isReading}\n className={classNames(\n 'rounded-md border border-dashed border-text-primary/20 bg-surface-primary inline-flex justify-start items-center p-4'\n )}\n onBlur={onBlur}\n >\n <div className=\"flex items-center gap-4\">\n <div className=\"flex size-12 items-center justify-center rounded-md border border-text-primary/20 bg-surface-primary\">\n <IcPlus className=\"size-icon\" />\n </div>\n <div className=\"flex flex-col text-left\">\n <p className=\"body-sm\">{selectedFile ? selectedFile.name : 'Upload file'}</p>\n <p className=\"body-sm\">{selectedFile ? `Click to replace` : 'Generated by the SDK'}</p>\n </div>\n </div>\n </Button>\n </FileTrigger>\n\n {error && <Alert variant=\"destructive\">{error}</Alert>}\n </div>\n );\n}\n\nexport function TfOfflineRequestFileInput({\n label,\n description,\n isDisabled,\n className,\n ...props\n}: Omit<OfflineRequestFileInputProps, 'onSelect'> & FormFieldProps) {\n const field = useFieldContext<string | null>({ disabled: isDisabled });\n return (\n <div>\n <FormField\n {...{\n label: label,\n description: description,\n requiredIndicator: field.isRequired,\n errorMessage: getFieldErrorMessage(field),\n }}\n >\n <OfflineRequestFileInput\n {...props}\n onSelect={value => field.handleChange(value)}\n onBlur={() => field.handleBlur()}\n isDisabled={isDisabled || field.isSubmitting}\n className={className}\n />\n </FormField>\n </div>\n );\n}\n"],"names":["OfflineRequestFileInput","className","onSelect","isDisabled","onBlur","selectedFile","setSelectedFile","useState","isReading","setIsReading","error","setError","readOfflineRequestFileText","file","handleSelect","files","text","classNames","jsx","FileTrigger","Button","jsxs","IcPlus","Alert","TfOfflineRequestFileInput","label","description","props","field","useFieldContext","FormField","getFieldErrorMessage","value"],"mappings":"soBAkBO,SAASA,EAAwB,CAAE,UAAAC,EAAW,SAAAC,EAAU,WAAAC,EAAY,OAAAC,GAAwC,CAC/G,KAAM,CAACC,EAAcC,CAAe,EAAIC,EAAsB,IAAI,EAC5D,CAACC,EAAWC,CAAY,EAAIF,EAAS,EAAK,EAC1C,CAACG,EAAOC,CAAQ,EAAIJ,EAAwB,IAAI,EAEtD,eAAeK,EAA2BC,EAA6B,CACnE,OAAQ,MAAMA,EAAK,KAAA,GAAQ,KAAA,CAC/B,CAEA,MAAMC,EAAe,MAAOC,GAA2B,CACnDJ,EAAS,IAAI,EAEb,MAAME,EAAOE,IAAQ,CAAC,GAAK,KAE3B,GAAI,CAACF,EAAM,CACPP,EAAgB,IAAI,EACpBJ,EAAS,IAAI,EACb,MACJ,CAEAO,EAAa,EAAI,EACjB,GAAI,CACA,MAAMO,EAAO,MAAMJ,EAA2BC,CAAI,EAClDP,EAAgBO,CAAI,EACpBX,EAASc,GAAQ,IAAI,CACzB,MAAQ,CACJL,EAAS,4CAA4C,EACrDL,EAAgB,IAAI,EACpBJ,EAAS,IAAI,CACjB,QAAA,CACIO,EAAa,EAAK,CACtB,CACAL,IAAA,CACJ,EAEA,SACK,MAAA,CAAI,UAAWa,EAAW,sBAAuBhB,CAAS,EACvD,SAAA,CAAAiB,EAACC,EAAA,CAAY,SAAUL,EACnB,SAAAI,EAACE,EAAA,CACG,KAAK,OACL,QAAQ,QACR,WAAYjB,GAAcK,EAC1B,UAAWS,EACP,sHAAA,EAEJ,OAAAb,EAEA,SAAAiB,EAAC,MAAA,CAAI,UAAU,0BACX,SAAA,CAAAH,EAAC,OAAI,UAAU,uGACX,WAACI,EAAA,CAAO,UAAU,YAAY,CAAA,CAClC,EACAD,EAAC,MAAA,CAAI,UAAU,0BACX,SAAA,CAAAH,EAAC,KAAE,UAAU,UAAW,SAAAb,EAAeA,EAAa,KAAO,cAAc,IACxE,IAAA,CAAE,UAAU,UAAW,SAAAA,EAAe,mBAAqB,sBAAA,CAAuB,CAAA,CAAA,CACvF,CAAA,CAAA,CACJ,CAAA,CAAA,EAER,EAECK,GAASQ,EAACK,EAAA,CAAM,QAAQ,cAAe,SAAAb,CAAA,CAAM,CAAA,EAClD,CAER,CAEO,SAASc,EAA0B,CACtC,MAAAC,EACA,YAAAC,EACA,WAAAvB,EACA,UAAAF,EACA,GAAG0B,CACP,EAAoE,CAChE,MAAMC,EAAQC,EAA+B,CAAE,SAAU1B,EAAY,EACrE,SACK,MAAA,CACG,SAAAe,EAACY,EAAA,CAEO,MAAAL,EACA,YAAAC,EACA,kBAAmBE,EAAM,WACzB,aAAcG,EAAqBH,CAAK,EAG5C,SAAAV,EAAClB,EAAA,CACI,GAAG2B,EACJ,SAAUK,GAASJ,EAAM,aAAaI,CAAK,EAC3C,OAAQ,IAAMJ,EAAM,WAAA,EACpB,WAAYzB,GAAcyB,EAAM,aAChC,UAAA3B,CAAA,CAAA,CACJ,CAAA,EAER,CAER"}
1
+ {"version":3,"file":"offline-request-file-input.js","names":[],"sources":["../../lib/components/offline-request-file-input.tsx"],"sourcesContent":["'use client';\nimport { useState } from 'react';\nimport { getFieldErrorMessage } from '../utilities/form';\nimport { useFieldContext } from '../utilities/form-context';\nimport { classNames } from '../utilities/theme';\nimport { Alert } from './alert';\nimport { Button } from './button';\nimport { FileTrigger } from './file-trigger';\nimport { FormField, type FormFieldProps } from './form';\nimport { IcPlus } from './icons';\n\nexport type OfflineRequestFileInputProps = {\n className?: string;\n onSelect: (value: string | null) => void;\n isDisabled?: boolean;\n onBlur?: () => void;\n};\n\nexport function OfflineRequestFileInput({ className, onSelect, isDisabled, onBlur }: OfflineRequestFileInputProps) {\n const [selectedFile, setSelectedFile] = useState<File | null>(null);\n const [isReading, setIsReading] = useState(false);\n const [error, setError] = useState<string | null>(null);\n\n async function readOfflineRequestFileText(file: File): Promise<string> {\n return (await file.text()).trim();\n }\n\n const handleSelect = async (files: FileList | null) => {\n setError(null);\n\n const file = files?.[0] ?? null;\n\n if (!file) {\n setSelectedFile(null);\n onSelect(null);\n return;\n }\n\n setIsReading(true);\n try {\n const text = await readOfflineRequestFileText(file);\n setSelectedFile(file);\n onSelect(text ?? null);\n } catch {\n setError('Failed to read the file. Please try again.');\n setSelectedFile(null);\n onSelect(null);\n } finally {\n setIsReading(false);\n }\n onBlur?.();\n };\n\n return (\n <div className={classNames('flex flex-col gap-2', className)}>\n <FileTrigger onSelect={handleSelect}>\n <Button\n size=\"none\"\n variant=\"ghost\"\n isDisabled={isDisabled || isReading}\n className={classNames(\n 'rounded-md border border-dashed border-text-primary/20 bg-surface-primary inline-flex justify-start items-center p-4'\n )}\n onBlur={onBlur}\n >\n <div className=\"flex items-center gap-4\">\n <div className=\"flex size-12 items-center justify-center rounded-md border border-text-primary/20 bg-surface-primary\">\n <IcPlus className=\"size-icon\" />\n </div>\n <div className=\"flex flex-col text-left\">\n <p className=\"body-sm\">{selectedFile ? selectedFile.name : 'Upload file'}</p>\n <p className=\"body-sm\">{selectedFile ? `Click to replace` : 'Generated by the SDK'}</p>\n </div>\n </div>\n </Button>\n </FileTrigger>\n\n {error && <Alert variant=\"destructive\">{error}</Alert>}\n </div>\n );\n}\n\nexport function TfOfflineRequestFileInput({\n label,\n description,\n isDisabled,\n className,\n ...props\n}: Omit<OfflineRequestFileInputProps, 'onSelect'> & FormFieldProps) {\n const field = useFieldContext<string | null>({ disabled: isDisabled });\n return (\n <div>\n <FormField\n {...{\n label: label,\n description: description,\n requiredIndicator: field.isRequired,\n errorMessage: getFieldErrorMessage(field),\n }}\n >\n <OfflineRequestFileInput\n {...props}\n onSelect={value => field.handleChange(value)}\n onBlur={() => field.handleBlur()}\n isDisabled={isDisabled || field.isSubmitting}\n className={className}\n />\n </FormField>\n </div>\n );\n}\n"],"mappings":"6cAkBA,SAAgB,EAAwB,CAAE,YAAW,WAAU,aAAY,UAAwC,CAC/G,GAAM,CAAC,EAAc,GAAmB,EAAsB,IAAI,EAC5D,CAAC,EAAW,GAAgB,EAAS,EAAK,EAC1C,CAAC,EAAO,GAAY,EAAwB,IAAI,EAEtD,eAAe,EAA2B,EAA6B,CACnE,OAAQ,MAAM,EAAK,KAAK,EAAA,CAAG,KAAK,CACpC,CA4BA,OACI,EAAC,MAAD,CAAK,UAAW,EAAW,sBAAuB,CAAS,EAA3D,SAAA,CACI,EAAC,EAAD,CAAa,SAAU,KA5BH,IAA2B,CACnD,EAAS,IAAI,EAEb,IAAM,EAAO,IAAQ,IAAM,KAE3B,GAAI,CAAC,EAAM,CACP,EAAgB,IAAI,EACpB,EAAS,IAAI,EACb,MACJ,CAEA,EAAa,EAAI,EACjB,GAAI,CACA,IAAM,EAAO,MAAM,EAA2B,CAAI,EAClD,EAAgB,CAAI,EACpB,EAAS,GAAQ,IAAI,CACzB,MAAQ,CACJ,EAAS,4CAA4C,EACrD,EAAgB,IAAI,EACpB,EAAS,IAAI,CACjB,QAAU,CACN,EAAa,EAAK,CACtB,CACA,IAAS,CACb,EAKY,SAAA,EAAC,EAAD,CACI,KAAK,OACL,QAAQ,QACR,WAAY,GAAc,EAC1B,UAAW,EACP,sHACJ,EACQ,SAER,SAAA,EAAC,MAAD,CAAK,UAAU,0BAAf,SAAA,CACI,EAAC,MAAD,CAAK,UAAU,uGACX,SAAA,EAAC,EAAD,CAAQ,UAAU,WAAa,CAAA,CAC9B,CAAA,EACL,EAAC,MAAD,CAAK,UAAU,0BAAf,SAAA,CACI,EAAC,IAAD,CAAG,UAAU,UAAW,SAAA,EAAe,EAAa,KAAO,aAAiB,CAAA,EAC5E,EAAC,IAAD,CAAG,UAAU,UAAW,SAAA,EAAe,mBAAqB,sBAA0B,CAAA,CACrF,CACJ,CAAA,CAAA,GACD,CAAA,CACC,CAAA,EAEZ,GAAS,EAAC,EAAD,CAAO,QAAQ,cAAe,SAAA,CAAa,CAAA,CACpD,GAEb,CAEA,SAAgB,EAA0B,CACtC,QACA,cACA,aACA,YACA,GAAG,GAC6D,CAChE,IAAM,EAAQ,EAA+B,CAAE,SAAU,CAAW,CAAC,EACrE,OACI,EAAC,MAAD,CAAA,SACI,EAAC,EAAD,CAEe,QACM,cACb,kBAAmB,EAAM,WACzB,aAAc,EAAqB,CAAK,EAG5C,SAAA,EAAC,EAAD,CACI,GAAI,EACJ,SAAU,GAAS,EAAM,aAAa,CAAK,EAC3C,WAAc,EAAM,WAAW,EAC/B,WAAY,GAAc,EAAM,aACrB,WACd,CAAA,CACM,CAAA,CACV,CAAA,CAEb"}
@@ -6,4 +6,4 @@ import { TextField } from './textfield';
6
6
  * one-time passwords. It extends the base TextField component with centered text
7
7
  * alignment for better visual presentation of numeric codes.
8
8
  */
9
- export declare function OTPField({ className, ...props }: React.ComponentProps<typeof TextField>): import("react/jsx-runtime").JSX.Element;
9
+ export declare function OTPField({ className, ...props }: React.ComponentProps<typeof TextField>): import("react").JSX.Element;
@@ -1,2 +1,2 @@
1
- import{jsx as i}from"react/jsx-runtime";import{TextField as r}from"./textfield.js";import"react-aria-components";import"../utilities/form.js";import"../utilities/form-context.js";import"@tanstack/react-form";import"react";import"../utilities/theme.js";import"clsx";import"./form.js";import"class-variance-authority";import"./card.js";import"./icons.js";import"@icons-pack/react-simple-icons";import"./kbd.js";function T({className:m,...t}){return i(r,{inputClassName:"justify-items-center",...t})}export{T as OTPField};
2
- //# sourceMappingURL=otpfield.js.map
1
+ import{TextField as e}from"./textfield.js";import{jsx as t}from"react/jsx-runtime";function n({className:n,...r}){return t(e,{inputClassName:`justify-items-center`,...r})}export{n as OTPField};
2
+ //# sourceMappingURL=otpfield.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"otpfield.js","sources":["../../lib/components/otpfield.tsx"],"sourcesContent":["import { TextField } from './textfield';\n\n/**\n * OTP (One-Time Password) input field component for secure code entry.\n *\n * This component is designed for entering verification codes, 2FA tokens, or other\n * one-time passwords. It extends the base TextField component with centered text\n * alignment for better visual presentation of numeric codes.\n */\nexport function OTPField({ className, ...props }: React.ComponentProps<typeof TextField>) {\n return <TextField inputClassName=\"justify-items-center\" {...props} />;\n}\n"],"names":["OTPField","className","props","jsx","TextField"],"mappings":"yZASO,SAASA,EAAS,CAAE,UAAAC,EAAW,GAAGC,GAAiD,CACtF,OAAOC,EAACC,EAAA,CAAU,eAAe,uBAAwB,GAAGF,EAAO,CACvE"}
1
+ {"version":3,"file":"otpfield.js","names":[],"sources":["../../lib/components/otpfield.tsx"],"sourcesContent":["import { TextField } from './textfield';\n\n/**\n * OTP (One-Time Password) input field component for secure code entry.\n *\n * This component is designed for entering verification codes, 2FA tokens, or other\n * one-time passwords. It extends the base TextField component with centered text\n * alignment for better visual presentation of numeric codes.\n */\nexport function OTPField({ className, ...props }: React.ComponentProps<typeof TextField>) {\n return <TextField inputClassName=\"justify-items-center\" {...props} />;\n}\n"],"mappings":"mFASA,SAAgB,EAAS,CAAE,YAAW,GAAG,GAAiD,CACtF,OAAO,EAAC,EAAD,CAAW,eAAe,uBAAuB,GAAI,CAAQ,CAAA,CACxE"}
@@ -1,4 +1,4 @@
1
1
  import { DialogProps as AriaDialogProps, DialogTrigger as AriaDialogTrigger, PopoverProps as AriaPopoverProps } from 'react-aria-components';
2
2
  export declare const PopoverTrigger: typeof AriaDialogTrigger;
3
- export declare const Popover: ({ className, offset, ...props }: AriaPopoverProps) => import("react/jsx-runtime").JSX.Element;
4
- export declare function PopoverDialog({ className, ...props }: AriaDialogProps): import("react/jsx-runtime").JSX.Element;
3
+ export declare const Popover: ({ className, offset, ...props }: AriaPopoverProps) => import("react").JSX.Element;
4
+ export declare function PopoverDialog({ className, ...props }: AriaDialogProps): import("react").JSX.Element;
@@ -1,2 +1,2 @@
1
- import{jsx as t}from"react/jsx-runtime";import{Popover as n,composeRenderProps as m,DialogTrigger as d,Dialog as p}from"react-aria-components";import{classNames as a}from"../utilities/theme.js";import"clsx";const f=d,u=({className:e,offset:o=4,...i})=>t(n,{offset:o,className:m(e,r=>a("z-50 border bg-surface-primary text-text-primary outline-none max-w-lg rounded-md","data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95","data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95","data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2",r)),...i});function x({className:e,...o}){return t(p,{className:a("p-icon outline-0",e),...o})}export{u as Popover,x as PopoverDialog,f as PopoverTrigger};
2
- //# sourceMappingURL=popover.js.map
1
+ import{classNames as e}from"../utilities/theme.js";import{jsx as t}from"react/jsx-runtime";import{Dialog as n,DialogTrigger as r,Popover as i,composeRenderProps as a}from"react-aria-components";var o=r,s=({className:n,offset:r=4,...o})=>t(i,{offset:r,className:a(n,t=>e(`z-50 border bg-surface-primary text-text-primary outline-none max-w-lg rounded-md`,`data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95`,`data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95`,`data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2`,t)),...o});function c({className:r,...i}){return t(n,{className:e(`p-icon outline-0`,r),...i})}export{s as Popover,c as PopoverDialog,o as PopoverTrigger};
2
+ //# sourceMappingURL=popover.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"popover.js","sources":["../../lib/components/popover.tsx"],"sourcesContent":["import {\n Dialog as AriaDialog,\n DialogProps as AriaDialogProps,\n DialogTrigger as AriaDialogTrigger,\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\n\nexport const PopoverTrigger = AriaDialogTrigger;\n\nexport const Popover = ({ className, offset = 4, ...props }: AriaPopoverProps) => (\n <AriaPopover\n offset={offset}\n className={composeRenderProps(className, className =>\n classNames(\n 'z-50 border bg-surface-primary text-text-primary outline-none max-w-lg rounded-md',\n /* Entering */\n 'data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95',\n /* Exiting */\n 'data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95',\n /* Placement */\n 'data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2',\n className\n )\n )}\n {...props}\n />\n);\n\nexport function PopoverDialog({ className, ...props }: AriaDialogProps) {\n return <AriaDialog className={classNames('p-icon outline-0', className)} {...props} />;\n}\n"],"names":["PopoverTrigger","AriaDialogTrigger","Popover","className","offset","props","jsx","AriaPopover","composeRenderProps","classNames","PopoverDialog","AriaDialog"],"mappings":"+MAWO,MAAMA,EAAiBC,EAEjBC,EAAU,CAAC,CAAE,UAAAC,EAAW,OAAAC,EAAS,EAAG,GAAGC,KAChDC,EAACC,EAAA,CACG,OAAAH,EACA,UAAWI,EAAmBL,EAAWA,GACrCM,EACI,oFAEA,kFAEA,kFAEA,kLACAN,CAAA,CACJ,EAEH,GAAGE,CAAA,CACR,EAGG,SAASK,EAAc,CAAE,UAAAP,EAAW,GAAGE,GAA0B,CACpE,OAAOC,EAACK,GAAW,UAAWF,EAAW,mBAAoBN,CAAS,EAAI,GAAGE,EAAO,CACxF"}
1
+ {"version":3,"file":"popover.js","names":[],"sources":["../../lib/components/popover.tsx"],"sourcesContent":["import {\n Dialog as AriaDialog,\n DialogProps as AriaDialogProps,\n DialogTrigger as AriaDialogTrigger,\n Popover as AriaPopover,\n PopoverProps as AriaPopoverProps,\n composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\n\nexport const PopoverTrigger = AriaDialogTrigger;\n\nexport const Popover = ({ className, offset = 4, ...props }: AriaPopoverProps) => (\n <AriaPopover\n offset={offset}\n className={composeRenderProps(className, className =>\n classNames(\n 'z-50 border bg-surface-primary text-text-primary outline-none max-w-lg rounded-md',\n /* Entering */\n 'data-[entering]:animate-in data-[entering]:fade-in-0 data-[entering]:zoom-in-95',\n /* Exiting */\n 'data-[exiting]:animate-out data-[exiting]:fade-out-0 data-[exiting]:zoom-out-95',\n /* Placement */\n 'data-[placement=bottom]:slide-in-from-top-2 data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2',\n className\n )\n )}\n {...props}\n />\n);\n\nexport function PopoverDialog({ className, ...props }: AriaDialogProps) {\n return <AriaDialog className={classNames('p-icon outline-0', className)} {...props} />;\n}\n"],"mappings":"kMAWA,IAAa,EAAiB,EAEjB,GAAW,CAAE,YAAW,SAAS,EAAG,GAAG,KAChD,EAAC,EAAD,CACY,SACR,UAAW,EAAmB,EAAW,GACrC,EACI,oFAEA,kFAEA,kFAEA,kLACA,CACJ,CACJ,EACA,GAAI,CACP,CAAA,EAGL,SAAgB,EAAc,CAAE,YAAW,GAAG,GAA0B,CACpE,OAAO,EAAC,EAAD,CAAY,UAAW,EAAW,mBAAoB,CAAS,EAAG,GAAI,CAAQ,CAAA,CACzF"}
@@ -4,4 +4,4 @@ export type ProgressBarProps = AriaProgressBarProps & {
4
4
  label?: ReactNode;
5
5
  meterClassName?: string;
6
6
  };
7
- export declare function ProgressBar({ className, label, meterClassName, ...props }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
7
+ export declare function ProgressBar({ className, label, meterClassName, ...props }: ProgressBarProps): import("react").JSX.Element;
@@ -1,2 +1,2 @@
1
- "use client";import{jsx as e,jsxs as l,Fragment as m}from"react/jsx-runtime";import{useId as n}from"react";import{ProgressBar as c,composeRenderProps as f}from"react-aria-components";import{classNames as i}from"../utilities/theme.js";import"clsx";function y({className:a,label:r,meterClassName:o,...d}){const t=n();return e(c,{...d,"aria-labelledby":r?t:void 0,className:f(a,s=>i("flex items-center gap-2",s)),children:({percentage:s})=>l(m,{children:[e("div",{className:i("h-2 shrink-0 overflow-hidden rounded-full bg-primary/15",o??"w-full"),children:e("div",{className:i("h-full bg-primary transition-[width] duration-300 ease-out"),style:{width:`${s}%`}})}),r&&e("div",{className:"flex items-center justify-between body-sm",children:e("div",{id:t,className:"text-text-primary",children:r})})]})})}export{y as ProgressBar};
2
- //# sourceMappingURL=progress-bar.js.map
1
+ "use client";import{classNames as e}from"../utilities/theme.js";import{useId as t}from"react";import{Fragment as n,jsx as r,jsxs as i}from"react/jsx-runtime";import{ProgressBar as a,composeRenderProps as o}from"react-aria-components";function s({className:s,label:c,meterClassName:l,...u}){let d=t();return r(a,{...u,"aria-labelledby":c?d:void 0,className:o(s,t=>e(`flex items-center gap-2`,t)),children:({percentage:t})=>i(n,{children:[r(`div`,{className:e(`h-2 shrink-0 overflow-hidden rounded-full bg-primary/15`,l??`w-full`),children:r(`div`,{className:e(`h-full bg-primary transition-[width] duration-300 ease-out`),style:{width:`${t}%`}})}),c&&r(`div`,{className:`flex items-center justify-between body-sm`,children:r(`div`,{id:d,className:`text-text-primary`,children:c})})]})})}export{s as ProgressBar};
2
+ //# sourceMappingURL=progress-bar.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"progress-bar.js","sources":["../../lib/components/progress-bar.tsx"],"sourcesContent":["'use client';\nimport { useId, type ReactNode } from 'react';\nimport {\n ProgressBar as AriaProgressBar,\n composeRenderProps,\n type ProgressBarProps as AriaProgressBarProps,\n} from 'react-aria-components';\nimport { classNames } from '../utilities/theme';\n\nexport type ProgressBarProps = AriaProgressBarProps & {\n label?: ReactNode;\n meterClassName?: string;\n};\n\nexport function ProgressBar({ className, label, meterClassName, ...props }: ProgressBarProps) {\n const labelId = useId();\n return (\n <AriaProgressBar\n {...props}\n aria-labelledby={label ? labelId : undefined}\n className={composeRenderProps(className, className => classNames('flex items-center gap-2', className))}\n >\n {({ percentage }) => (\n <>\n <div\n className={classNames(\n 'h-2 shrink-0 overflow-hidden rounded-full bg-primary/15',\n meterClassName ?? 'w-full'\n )}\n >\n <div\n className={classNames('h-full bg-primary transition-[width] duration-300 ease-out')}\n style={{ width: `${percentage}%` }}\n />\n </div>\n {label && (\n <div className=\"flex items-center justify-between body-sm\">\n <div id={labelId} className=\"text-text-primary\">\n {label}\n </div>\n </div>\n )}\n </>\n )}\n </AriaProgressBar>\n );\n}\n"],"names":["ProgressBar","className","label","meterClassName","props","labelId","useId","jsx","AriaProgressBar","composeRenderProps","classNames","percentage","jsxs","Fragment"],"mappings":"uPAcO,SAASA,EAAY,CAAE,UAAAC,EAAW,MAAAC,EAAO,eAAAC,EAAgB,GAAGC,GAA2B,CAC1F,MAAMC,EAAUC,EAAA,EAChB,OACIC,EAACC,EAAA,CACI,GAAGJ,EACJ,kBAAiBF,EAAQG,EAAU,OACnC,UAAWI,EAAmBR,EAAWA,GAAaS,EAAW,0BAA2BT,CAAS,CAAC,EAErG,SAAA,CAAC,CAAE,WAAAU,CAAA,IACAC,EAAAC,EAAA,CACI,SAAA,CAAAN,EAAC,MAAA,CACG,UAAWG,EACP,0DACAP,GAAkB,QAAA,EAGtB,SAAAI,EAAC,MAAA,CACG,UAAWG,EAAW,4DAA4D,EAClF,MAAO,CAAE,MAAO,GAAGC,CAAU,GAAA,CAAI,CAAA,CACrC,CAAA,EAEHT,GACGK,EAAC,MAAA,CAAI,UAAU,4CACX,SAAAA,EAAC,MAAA,CAAI,GAAIF,EAAS,UAAU,oBACvB,SAAAH,CAAA,CACL,CAAA,CACJ,CAAA,CAAA,CAER,CAAA,CAAA,CAIhB"}
1
+ {"version":3,"file":"progress-bar.js","names":[],"sources":["../../lib/components/progress-bar.tsx"],"sourcesContent":["'use client';\nimport { useId, type ReactNode } from 'react';\nimport {\n ProgressBar as AriaProgressBar,\n composeRenderProps,\n type ProgressBarProps as AriaProgressBarProps,\n} from 'react-aria-components';\nimport { classNames } from '../utilities/theme';\n\nexport type ProgressBarProps = AriaProgressBarProps & {\n label?: ReactNode;\n meterClassName?: string;\n};\n\nexport function ProgressBar({ className, label, meterClassName, ...props }: ProgressBarProps) {\n const labelId = useId();\n return (\n <AriaProgressBar\n {...props}\n aria-labelledby={label ? labelId : undefined}\n className={composeRenderProps(className, className => classNames('flex items-center gap-2', className))}\n >\n {({ percentage }) => (\n <>\n <div\n className={classNames(\n 'h-2 shrink-0 overflow-hidden rounded-full bg-primary/15',\n meterClassName ?? 'w-full'\n )}\n >\n <div\n className={classNames('h-full bg-primary transition-[width] duration-300 ease-out')}\n style={{ width: `${percentage}%` }}\n />\n </div>\n {label && (\n <div className=\"flex items-center justify-between body-sm\">\n <div id={labelId} className=\"text-text-primary\">\n {label}\n </div>\n </div>\n )}\n </>\n )}\n </AriaProgressBar>\n );\n}\n"],"mappings":"0OAcA,SAAgB,EAAY,CAAE,YAAW,QAAO,iBAAgB,GAAG,GAA2B,CAC1F,IAAM,EAAU,EAAM,EACtB,OACI,EAAC,EAAD,CACI,GAAI,EACJ,kBAAiB,EAAQ,EAAU,IAAA,GACnC,UAAW,EAAmB,EAAW,GAAa,EAAW,0BAA2B,CAAS,CAAC,EAEpG,UAAA,CAAE,gBACA,EAAA,EAAA,CAAA,SAAA,CACI,EAAC,MAAD,CACI,UAAW,EACP,0DACA,GAAkB,QACtB,EAEA,SAAA,EAAC,MAAD,CACI,UAAW,EAAW,4DAA4D,EAClF,MAAO,CAAE,MAAO,GAAG,EAAW,EAAG,CACpC,CAAA,CACA,CAAA,EACJ,GACG,EAAC,MAAD,CAAK,UAAU,4CACX,SAAA,EAAC,MAAD,CAAK,GAAI,EAAS,UAAU,oBACvB,SAAA,CACA,CAAA,CACJ,CAAA,CAEX,CAAA,CAAA,CAEO,CAAA,CAEzB"}
@@ -2,4 +2,4 @@ import { SearchFieldProps as AriaSearchFieldProps } from 'react-aria-components'
2
2
  import { FormFieldProps } from './form';
3
3
  export interface SearchFieldProps extends AriaSearchFieldProps, FormFieldProps {
4
4
  }
5
- export declare function SearchField({ label, description, className, errorMessage, requiredIndicator, ...props }: SearchFieldProps): import("react/jsx-runtime").JSX.Element;
5
+ export declare function SearchField({ label, description, className, errorMessage, requiredIndicator, ...props }: SearchFieldProps): import("react").JSX.Element;
@@ -1,2 +1,2 @@
1
- import{jsx as e,jsxs as d}from"react/jsx-runtime";import{composeRenderProps as a,SearchField as p,Input as s}from"react-aria-components";import{classNames as t}from"../utilities/theme.js";import{FormField as u,FieldGroup as h,FormFieldButton as f}from"./form.js";import{IcSearch as F,IcRemove as N}from"./icons.js";import"clsx";import"class-variance-authority";import"./card.js";import"@icons-pack/react-simple-icons";import"react";function S({className:r,...i}){return e(p,{className:a(r,o=>t("group",o)),...i})}function g({className:r,...i}){return e(s,{className:a(r,o=>t("min-w-0 ring-0 outline-0 flex-1 bg-surface-primary px-2 py-1.5 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden",o)),...i})}function x(){return e(f,{className:"group-data-[empty]:invisible",children:e(N,{"aria-hidden":!0,className:"size-icon"})})}function B({label:r,description:i,className:o,errorMessage:c,requiredIndicator:n,...m}){return e(S,{className:a(o,l=>t("group form-field",l)),...m,children:e(u,{label:r,description:i,errorMessage:c,requiredIndicator:n,children:d(h,{children:[e(F,{"aria-hidden":!0,className:"size-icon opacity-80"}),e(g,{placeholder:""}),e(x,{})]})})})}export{B as SearchField};
2
- //# sourceMappingURL=searchfield.js.map
1
+ import{classNames as e}from"../utilities/theme.js";import{Nt as t,Ot as n}from"../icons.js";import{FieldGroup as r,FormField as i,FormFieldButton as a}from"./form.js";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{Input as c,SearchField as l,composeRenderProps as u}from"react-aria-components";function d({className:t,...n}){return o(l,{className:u(t,t=>e(`group`,t)),...n})}function f({className:t,...n}){return o(c,{className:u(t,t=>e(`min-w-0 ring-0 outline-0 flex-1 bg-surface-primary px-2 py-1.5 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden`,t)),...n})}function p(){return o(a,{className:`group-data-[empty]:invisible`,children:o(n,{"aria-hidden":!0,className:`size-icon`})})}function m({label:n,description:a,className:c,errorMessage:l,requiredIndicator:m,...h}){return o(d,{className:u(c,t=>e(`group form-field`,t)),...h,children:o(i,{label:n,description:a,errorMessage:l,requiredIndicator:m,children:s(r,{children:[o(t,{"aria-hidden":!0,className:`size-icon opacity-80`}),o(f,{placeholder:``}),o(p,{})]})})})}export{m as SearchField};
2
+ //# sourceMappingURL=searchfield.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"searchfield.js","sources":["../../lib/components/searchfield.tsx"],"sourcesContent":["import {\n Input as AriaInput,\n InputProps as AriaInputProps,\n SearchField as AriaSearchField,\n SearchFieldProps as AriaSearchFieldProps,\n composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\n\nimport { FieldGroup, FormField, FormFieldButton, type FormFieldProps } from './form';\nimport { IcRemove, IcSearch } from './icons';\n\nfunction ASearchField({ className, ...props }: AriaSearchFieldProps) {\n return (\n <AriaSearchField\n className={composeRenderProps(className, className => classNames('group', className))}\n {...props}\n />\n );\n}\n\nfunction ASearchFieldInput({ className, ...props }: AriaInputProps) {\n return (\n <AriaInput\n className={composeRenderProps(className, className =>\n classNames(\n 'min-w-0 ring-0 outline-0 flex-1 bg-surface-primary px-2 py-1.5 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden',\n className\n )\n )}\n {...props}\n />\n );\n}\n\nfunction SearchFieldClear() {\n return (\n <FormFieldButton className={'group-data-[empty]:invisible'}>\n <IcRemove aria-hidden className=\"size-icon\" />\n </FormFieldButton>\n );\n}\n\nexport interface SearchFieldProps extends AriaSearchFieldProps, FormFieldProps {}\nexport function SearchField({\n label,\n description,\n className,\n errorMessage,\n requiredIndicator,\n ...props\n}: SearchFieldProps) {\n return (\n <ASearchField\n className={composeRenderProps(className, className => classNames('group form-field', className))}\n {...props}\n >\n <FormField {...{ label, description, errorMessage, requiredIndicator }}>\n <FieldGroup>\n <IcSearch aria-hidden className=\"size-icon opacity-80\" />\n <ASearchFieldInput placeholder=\"\" />\n <SearchFieldClear />\n </FieldGroup>\n </FormField>\n </ASearchField>\n );\n}\n"],"names":["ASearchField","className","props","jsx","AriaSearchField","composeRenderProps","classNames","ASearchFieldInput","AriaInput","SearchFieldClear","FormFieldButton","IcRemove","SearchField","label","description","errorMessage","requiredIndicator","FormField","jsxs","FieldGroup","IcSearch"],"mappings":"gbAaA,SAASA,EAAa,CAAE,UAAAC,EAAW,GAAGC,GAA+B,CACjE,OACIC,EAACC,EAAA,CACG,UAAWC,EAAmBJ,EAAWA,GAAaK,EAAW,QAASL,CAAS,CAAC,EACnF,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASK,EAAkB,CAAE,UAAAN,EAAW,GAAGC,GAAyB,CAChE,OACIC,EAACK,EAAA,CACG,UAAWH,EAAmBJ,EAAWA,GACrCK,EACI,4IACAL,CAAA,CACJ,EAEH,GAAGC,CAAA,CAAA,CAGhB,CAEA,SAASO,GAAmB,CACxB,OACIN,EAACO,EAAA,CAAgB,UAAW,+BACxB,SAAAP,EAACQ,GAAS,cAAW,GAAC,UAAU,WAAA,CAAY,CAAA,CAChD,CAER,CAGO,SAASC,EAAY,CACxB,MAAAC,EACA,YAAAC,EACA,UAAAb,EACA,aAAAc,EACA,kBAAAC,EACA,GAAGd,CACP,EAAqB,CACjB,OACIC,EAACH,EAAA,CACG,UAAWK,EAAmBJ,EAAWA,GAAaK,EAAW,mBAAoBL,CAAS,CAAC,EAC9F,GAAGC,EAEJ,SAAAC,EAACc,EAAA,CAAgB,MAAAJ,EAAO,YAAAC,EAAa,aAAAC,EAAc,kBAAAC,EAC/C,SAAAE,EAACC,EAAA,CACG,SAAA,CAAAhB,EAACiB,EAAA,CAAS,cAAW,GAAC,UAAU,uBAAuB,EACvDjB,EAACI,EAAA,CAAkB,YAAY,EAAA,CAAG,IACjCE,EAAA,CAAA,CAAiB,CAAA,CAAA,CACtB,CAAA,CACJ,CAAA,CAAA,CAGZ"}
1
+ {"version":3,"file":"searchfield.js","names":[],"sources":["../../lib/components/searchfield.tsx"],"sourcesContent":["import {\n Input as AriaInput,\n InputProps as AriaInputProps,\n SearchField as AriaSearchField,\n SearchFieldProps as AriaSearchFieldProps,\n composeRenderProps,\n} from 'react-aria-components';\n\nimport { classNames } from '../utilities/theme';\n\nimport { FieldGroup, FormField, FormFieldButton, type FormFieldProps } from './form';\nimport { IcRemove, IcSearch } from './icons';\n\nfunction ASearchField({ className, ...props }: AriaSearchFieldProps) {\n return (\n <AriaSearchField\n className={composeRenderProps(className, className => classNames('group', className))}\n {...props}\n />\n );\n}\n\nfunction ASearchFieldInput({ className, ...props }: AriaInputProps) {\n return (\n <AriaInput\n className={composeRenderProps(className, className =>\n classNames(\n 'min-w-0 ring-0 outline-0 flex-1 bg-surface-primary px-2 py-1.5 placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden',\n className\n )\n )}\n {...props}\n />\n );\n}\n\nfunction SearchFieldClear() {\n return (\n <FormFieldButton className={'group-data-[empty]:invisible'}>\n <IcRemove aria-hidden className=\"size-icon\" />\n </FormFieldButton>\n );\n}\n\nexport interface SearchFieldProps extends AriaSearchFieldProps, FormFieldProps {}\nexport function SearchField({\n label,\n description,\n className,\n errorMessage,\n requiredIndicator,\n ...props\n}: SearchFieldProps) {\n return (\n <ASearchField\n className={composeRenderProps(className, className => classNames('group form-field', className))}\n {...props}\n >\n <FormField {...{ label, description, errorMessage, requiredIndicator }}>\n <FieldGroup>\n <IcSearch aria-hidden className=\"size-icon opacity-80\" />\n <ASearchFieldInput placeholder=\"\" />\n <SearchFieldClear />\n </FieldGroup>\n </FormField>\n </ASearchField>\n );\n}\n"],"mappings":"gTAaA,SAAS,EAAa,CAAE,YAAW,GAAG,GAA+B,CACjE,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GAAa,EAAW,QAAS,CAAS,CAAC,EACpF,GAAI,CACP,CAAA,CAET,CAEA,SAAS,EAAkB,CAAE,YAAW,GAAG,GAAyB,CAChE,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GACrC,EACI,4IACA,CACJ,CACJ,EACA,GAAI,CACP,CAAA,CAET,CAEA,SAAS,GAAmB,CACxB,OACI,EAAC,EAAD,CAAiB,UAAW,+BACxB,SAAA,EAAC,EAAD,CAAU,cAAA,GAAY,UAAU,WAAa,CAAA,CAChC,CAAA,CAEzB,CAGA,SAAgB,EAAY,CACxB,QACA,cACA,YACA,eACA,oBACA,GAAG,GACc,CACjB,OACI,EAAC,EAAD,CACI,UAAW,EAAmB,EAAW,GAAa,EAAW,mBAAoB,CAAS,CAAC,EAC/F,GAAI,EAEJ,SAAA,EAAC,EAAD,CAAiB,QAAO,cAAa,eAAc,oBAC/C,SAAA,EAAC,EAAD,CAAA,SAAA,CACI,EAAC,EAAD,CAAU,cAAA,GAAY,UAAU,sBAAwB,CAAA,EACxD,EAAC,EAAD,CAAmB,YAAY,EAAI,CAAA,EACnC,EAAC,EAAD,CAAmB,CAAA,CACX,CAAA,CAAA,CACL,CAAA,CACD,CAAA,CAEtB"}