@lerianstudio/sindarian-ui 2.0.0-beta.2 → 2.0.0-beta.21

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 (227) hide show
  1. package/LICENSE +93 -0
  2. package/README.md +52 -1
  3. package/dist/components/breadcrumb/index.d.ts.map +1 -1
  4. package/dist/components/breadcrumb/index.js +25 -1
  5. package/dist/components/card/account-card/index.js +5 -5
  6. package/dist/components/card/basic-card/index.d.ts.map +1 -1
  7. package/dist/components/card/basic-card/index.js +2 -2
  8. package/dist/components/card/entity-card/index.js +1 -1
  9. package/dist/components/dialog/confirmation-dialog/index.d.ts.map +1 -1
  10. package/dist/components/dialog/confirmation-dialog/index.js +4 -1
  11. package/dist/components/entity-box/index.d.ts +18 -2
  12. package/dist/components/entity-box/index.d.ts.map +1 -1
  13. package/dist/components/entity-box/index.js +32 -4
  14. package/dist/components/form/date-picker-field/index.js +1 -1
  15. package/dist/components/form/date-range-field/index.js +1 -1
  16. package/dist/components/form/date-time-picker-field/index.js +1 -1
  17. package/dist/components/form/password-field/index.d.ts +5 -1
  18. package/dist/components/form/password-field/index.d.ts.map +1 -1
  19. package/dist/components/form/password-field/index.js +2 -2
  20. package/dist/components/form/select-field/index.d.ts +15 -1
  21. package/dist/components/form/select-field/index.d.ts.map +1 -1
  22. package/dist/components/form/select-field/index.js +28 -3
  23. package/dist/components/form/switch-field/index.d.ts.map +1 -1
  24. package/dist/components/form/switch-field/index.js +6 -1
  25. package/dist/components/page/index.d.ts +35 -1
  26. package/dist/components/page/index.d.ts.map +1 -1
  27. package/dist/components/page/index.js +6 -2
  28. package/dist/components/page-header/index.js +1 -1
  29. package/dist/components/table/id-table-cell.d.ts +13 -1
  30. package/dist/components/table/id-table-cell.d.ts.map +1 -1
  31. package/dist/components/table/id-table-cell.js +99 -9
  32. package/dist/components/table/index.d.ts +1 -0
  33. package/dist/components/table/index.d.ts.map +1 -1
  34. package/dist/components/table/index.js +1 -0
  35. package/dist/components/table/locked-table-actions.d.ts +24 -0
  36. package/dist/components/table/locked-table-actions.d.ts.map +1 -1
  37. package/dist/components/table/locked-table-actions.js +31 -1
  38. package/dist/components/table/name-table-cell.d.ts +57 -4
  39. package/dist/components/table/name-table-cell.d.ts.map +1 -1
  40. package/dist/components/table/name-table-cell.js +50 -2
  41. package/dist/components/ui/autocomplete/index.d.ts +24 -0
  42. package/dist/components/ui/autocomplete/index.d.ts.map +1 -1
  43. package/dist/components/ui/autocomplete/index.js +24 -0
  44. package/dist/components/ui/badge/index.d.ts +11 -7
  45. package/dist/components/ui/badge/index.d.ts.map +1 -1
  46. package/dist/components/ui/badge/index.js +20 -8
  47. package/dist/components/ui/button/index.d.ts +3 -3
  48. package/dist/components/ui/copy-field/index.d.ts +25 -1
  49. package/dist/components/ui/copy-field/index.d.ts.map +1 -1
  50. package/dist/components/ui/copy-field/index.js +16 -8
  51. package/dist/components/ui/dialog/index.d.ts +1 -1
  52. package/dist/components/ui/dialog/index.d.ts.map +1 -1
  53. package/dist/components/ui/dialog/index.js +2 -2
  54. package/dist/components/ui/file-upload/index.d.ts +159 -0
  55. package/dist/components/ui/file-upload/index.d.ts.map +1 -1
  56. package/dist/components/ui/file-upload/index.js +308 -6
  57. package/dist/components/ui/icon-button/index.d.ts +1 -1
  58. package/dist/components/ui/icon-button/styles.css +42 -0
  59. package/dist/components/ui/input/styles.css +79 -4
  60. package/dist/components/ui/lerian-wordmark/index.d.ts +6 -0
  61. package/dist/components/ui/lerian-wordmark/index.d.ts.map +1 -0
  62. package/dist/components/ui/lerian-wordmark/index.js +7 -0
  63. package/dist/components/ui/otp-input/index.js +1 -1
  64. package/dist/components/ui/radio-group/index.js +1 -1
  65. package/dist/components/ui/select/index.d.ts.map +1 -1
  66. package/dist/components/ui/select/index.js +8 -4
  67. package/dist/components/ui/select/styles.css +1 -1
  68. package/dist/components/ui/sheet/index.d.ts +42 -0
  69. package/dist/components/ui/sheet/index.d.ts.map +1 -1
  70. package/dist/components/ui/sheet/index.js +47 -14
  71. package/dist/components/ui/sidebar/index.d.ts +1 -0
  72. package/dist/components/ui/sidebar/index.d.ts.map +1 -1
  73. package/dist/components/ui/sidebar/index.js +1 -0
  74. package/dist/components/ui/sidebar/sidebar-expand-button.d.ts +1 -1
  75. package/dist/components/ui/sidebar/sidebar-expand-button.d.ts.map +1 -1
  76. package/dist/components/ui/sidebar/sidebar-expand-button.js +15 -1
  77. package/dist/components/ui/sidebar/sidebar-item.d.ts +1 -1
  78. package/dist/components/ui/sidebar/sidebar-item.d.ts.map +1 -1
  79. package/dist/components/ui/sidebar/sidebar-item.js +28 -4
  80. package/dist/components/ui/sidebar/sidebar-provider.d.ts +58 -0
  81. package/dist/components/ui/sidebar/sidebar-provider.d.ts.map +1 -1
  82. package/dist/components/ui/sidebar/sidebar-provider.js +146 -4
  83. package/dist/components/ui/sidebar/sidebar-root.d.ts +38 -1
  84. package/dist/components/ui/sidebar/sidebar-root.d.ts.map +1 -1
  85. package/dist/components/ui/sidebar/sidebar-root.js +111 -5
  86. package/dist/components/ui/sidebar/sidebar-trigger.d.ts +45 -0
  87. package/dist/components/ui/sidebar/sidebar-trigger.d.ts.map +1 -0
  88. package/dist/components/ui/sidebar/sidebar-trigger.js +57 -0
  89. package/dist/components/ui/textarea/index.js +1 -1
  90. package/dist/components/ui/toast/toaster.d.ts +5 -1
  91. package/dist/components/ui/toast/toaster.d.ts.map +1 -1
  92. package/dist/components/ui/toast/toaster.js +3 -2
  93. package/dist/enterprise/data-table/index.d.ts +77 -7
  94. package/dist/enterprise/data-table/index.d.ts.map +1 -1
  95. package/dist/enterprise/data-table/index.js +56 -11
  96. package/dist/enterprise/date-range-picker/index.js +4 -4
  97. package/dist/enterprise/number-input/index.d.ts.map +1 -1
  98. package/dist/enterprise/number-input/index.js +1 -1
  99. package/dist/esm/components/breadcrumb/index.d.ts.map +1 -1
  100. package/dist/esm/components/breadcrumb/index.js +25 -1
  101. package/dist/esm/components/card/account-card/index.js +5 -5
  102. package/dist/esm/components/card/basic-card/index.d.ts.map +1 -1
  103. package/dist/esm/components/card/basic-card/index.js +2 -2
  104. package/dist/esm/components/card/entity-card/index.js +1 -1
  105. package/dist/esm/components/dialog/confirmation-dialog/index.d.ts.map +1 -1
  106. package/dist/esm/components/dialog/confirmation-dialog/index.js +4 -1
  107. package/dist/esm/components/entity-box/index.d.ts +18 -2
  108. package/dist/esm/components/entity-box/index.d.ts.map +1 -1
  109. package/dist/esm/components/entity-box/index.js +29 -4
  110. package/dist/esm/components/form/date-picker-field/index.js +1 -1
  111. package/dist/esm/components/form/date-range-field/index.js +1 -1
  112. package/dist/esm/components/form/date-time-picker-field/index.js +1 -1
  113. package/dist/esm/components/form/password-field/index.d.ts +5 -1
  114. package/dist/esm/components/form/password-field/index.d.ts.map +1 -1
  115. package/dist/esm/components/form/password-field/index.js +2 -2
  116. package/dist/esm/components/form/select-field/index.d.ts +15 -1
  117. package/dist/esm/components/form/select-field/index.d.ts.map +1 -1
  118. package/dist/esm/components/form/select-field/index.js +29 -4
  119. package/dist/esm/components/form/switch-field/index.d.ts.map +1 -1
  120. package/dist/esm/components/form/switch-field/index.js +7 -2
  121. package/dist/esm/components/page/index.d.ts +35 -1
  122. package/dist/esm/components/page/index.d.ts.map +1 -1
  123. package/dist/esm/components/page/index.js +6 -2
  124. package/dist/esm/components/page-header/index.js +1 -1
  125. package/dist/esm/components/table/id-table-cell.d.ts +13 -1
  126. package/dist/esm/components/table/id-table-cell.d.ts.map +1 -1
  127. package/dist/esm/components/table/id-table-cell.js +100 -7
  128. package/dist/esm/components/table/index.d.ts +1 -0
  129. package/dist/esm/components/table/index.d.ts.map +1 -1
  130. package/dist/esm/components/table/index.js +1 -0
  131. package/dist/esm/components/table/locked-table-actions.d.ts +24 -0
  132. package/dist/esm/components/table/locked-table-actions.d.ts.map +1 -1
  133. package/dist/esm/components/table/locked-table-actions.js +31 -1
  134. package/dist/esm/components/table/name-table-cell.d.ts +57 -4
  135. package/dist/esm/components/table/name-table-cell.d.ts.map +1 -1
  136. package/dist/esm/components/table/name-table-cell.js +50 -2
  137. package/dist/esm/components/ui/autocomplete/index.d.ts +24 -0
  138. package/dist/esm/components/ui/autocomplete/index.d.ts.map +1 -1
  139. package/dist/esm/components/ui/autocomplete/index.js +24 -0
  140. package/dist/esm/components/ui/badge/index.d.ts +11 -7
  141. package/dist/esm/components/ui/badge/index.d.ts.map +1 -1
  142. package/dist/esm/components/ui/badge/index.js +20 -8
  143. package/dist/esm/components/ui/button/index.d.ts +3 -3
  144. package/dist/esm/components/ui/copy-field/index.d.ts +25 -1
  145. package/dist/esm/components/ui/copy-field/index.d.ts.map +1 -1
  146. package/dist/esm/components/ui/copy-field/index.js +16 -8
  147. package/dist/esm/components/ui/dialog/index.d.ts +1 -1
  148. package/dist/esm/components/ui/dialog/index.d.ts.map +1 -1
  149. package/dist/esm/components/ui/dialog/index.js +3 -3
  150. package/dist/esm/components/ui/file-upload/index.d.ts +159 -0
  151. package/dist/esm/components/ui/file-upload/index.d.ts.map +1 -1
  152. package/dist/esm/components/ui/file-upload/index.js +307 -5
  153. package/dist/esm/components/ui/icon-button/index.d.ts +1 -1
  154. package/dist/esm/components/ui/lerian-wordmark/index.d.ts +6 -0
  155. package/dist/esm/components/ui/lerian-wordmark/index.d.ts.map +1 -0
  156. package/dist/esm/components/ui/lerian-wordmark/index.js +4 -0
  157. package/dist/esm/components/ui/otp-input/index.js +1 -1
  158. package/dist/esm/components/ui/radio-group/index.js +1 -1
  159. package/dist/esm/components/ui/select/index.d.ts.map +1 -1
  160. package/dist/esm/components/ui/select/index.js +8 -4
  161. package/dist/esm/components/ui/sheet/index.d.ts +42 -0
  162. package/dist/esm/components/ui/sheet/index.d.ts.map +1 -1
  163. package/dist/esm/components/ui/sheet/index.js +48 -15
  164. package/dist/esm/components/ui/sidebar/index.d.ts +1 -0
  165. package/dist/esm/components/ui/sidebar/index.d.ts.map +1 -1
  166. package/dist/esm/components/ui/sidebar/index.js +1 -0
  167. package/dist/esm/components/ui/sidebar/sidebar-expand-button.d.ts +1 -1
  168. package/dist/esm/components/ui/sidebar/sidebar-expand-button.d.ts.map +1 -1
  169. package/dist/esm/components/ui/sidebar/sidebar-expand-button.js +15 -1
  170. package/dist/esm/components/ui/sidebar/sidebar-item.d.ts +1 -1
  171. package/dist/esm/components/ui/sidebar/sidebar-item.d.ts.map +1 -1
  172. package/dist/esm/components/ui/sidebar/sidebar-item.js +28 -4
  173. package/dist/esm/components/ui/sidebar/sidebar-provider.d.ts +58 -0
  174. package/dist/esm/components/ui/sidebar/sidebar-provider.d.ts.map +1 -1
  175. package/dist/esm/components/ui/sidebar/sidebar-provider.js +143 -1
  176. package/dist/esm/components/ui/sidebar/sidebar-root.d.ts +38 -1
  177. package/dist/esm/components/ui/sidebar/sidebar-root.d.ts.map +1 -1
  178. package/dist/esm/components/ui/sidebar/sidebar-root.js +113 -7
  179. package/dist/esm/components/ui/sidebar/sidebar-trigger.d.ts +45 -0
  180. package/dist/esm/components/ui/sidebar/sidebar-trigger.d.ts.map +1 -0
  181. package/dist/esm/components/ui/sidebar/sidebar-trigger.js +53 -0
  182. package/dist/esm/components/ui/textarea/index.js +1 -1
  183. package/dist/esm/components/ui/toast/toaster.d.ts +5 -1
  184. package/dist/esm/components/ui/toast/toaster.d.ts.map +1 -1
  185. package/dist/esm/components/ui/toast/toaster.js +3 -2
  186. package/dist/esm/enterprise/data-table/index.d.ts +77 -7
  187. package/dist/esm/enterprise/data-table/index.d.ts.map +1 -1
  188. package/dist/esm/enterprise/data-table/index.js +57 -12
  189. package/dist/esm/enterprise/date-range-picker/index.js +4 -4
  190. package/dist/esm/enterprise/number-input/index.d.ts.map +1 -1
  191. package/dist/esm/enterprise/number-input/index.js +1 -1
  192. package/dist/esm/hooks/use-toast.d.ts +18 -2
  193. package/dist/esm/hooks/use-toast.d.ts.map +1 -1
  194. package/dist/esm/hooks/use-toast.js +60 -16
  195. package/dist/esm/index.d.ts +3 -0
  196. package/dist/esm/index.d.ts.map +1 -1
  197. package/dist/esm/index.js +3 -0
  198. package/dist/esm/lib/utils.d.ts +2 -0
  199. package/dist/esm/lib/utils.d.ts.map +1 -1
  200. package/dist/esm/lib/utils.js +10 -0
  201. package/dist/esm/toast/helpers.d.ts +13 -0
  202. package/dist/esm/toast/helpers.d.ts.map +1 -1
  203. package/dist/esm/toast/helpers.js +8 -1
  204. package/dist/fonts/OFL.txt +96 -0
  205. package/dist/fonts/ibm-plex-mono-latin-400.woff2 +0 -0
  206. package/dist/fonts/ibm-plex-mono-latin-500.woff2 +0 -0
  207. package/dist/fonts/ibm-plex-serif-latin-400.woff2 +0 -0
  208. package/dist/fonts/ibm-plex-serif-latin-500.woff2 +0 -0
  209. package/dist/fonts/inter-latin.woff2 +0 -0
  210. package/dist/fonts.css +46 -0
  211. package/dist/globals.css +62 -362
  212. package/dist/hooks/use-toast.d.ts +18 -2
  213. package/dist/hooks/use-toast.d.ts.map +1 -1
  214. package/dist/hooks/use-toast.js +61 -16
  215. package/dist/index.d.ts +3 -0
  216. package/dist/index.d.ts.map +1 -1
  217. package/dist/index.js +3 -0
  218. package/dist/lib/utils.d.ts +2 -0
  219. package/dist/lib/utils.d.ts.map +1 -1
  220. package/dist/lib/utils.js +11 -0
  221. package/dist/public/wordmark.svg +1 -0
  222. package/dist/standalone.css +10 -0
  223. package/dist/toast/helpers.d.ts +13 -0
  224. package/dist/toast/helpers.d.ts.map +1 -1
  225. package/dist/toast/helpers.js +8 -1
  226. package/dist/tokens.css +367 -0
  227. package/package.json +9 -6
@@ -23,7 +23,7 @@ export function AccountBalanceCardHeader({ className, ...props }) {
23
23
  return (_jsx("div", { "data-slot": "account-balance-card-header", className: cn('flex flex-col', className), ...props }));
24
24
  }
25
25
  export function AccountBalanceCardTitle({ className, ...props }) {
26
- return (_jsx("p", { "data-slot": "account-balance-card-title", className: cn('text-shadcn-600 text-lg font-bold', className), ...props }));
26
+ return (_jsx("p", { "data-slot": "account-balance-card-title", className: cn('text-foreground text-lg font-bold', className), ...props }));
27
27
  }
28
28
  export function AccountBalanceCardDeleteButton({ className, ...props }) {
29
29
  return (_jsx(IconButton, { variant: "outline", size: "small", rounded: true, "data-slot": "account-balance-card-delete-button", className: cn('absolute top-3 right-3', className), ...props, children: _jsx(Trash, { className: "text-muted-foreground h-4 w-4" }) }));
@@ -35,19 +35,19 @@ export function AccountBalanceCardLoading({ className, ...props }) {
35
35
  return (_jsx(Skeleton, { "data-slot": "account-balance-card-loading", className: cn('bg-muted mt-3 h-3 w-full rounded-md', className), ...props }));
36
36
  }
37
37
  export function AccountBalanceCardEmpty({ className, ...props }) {
38
- return (_jsx("p", { "data-slot": "account-balance-card-empty", className: cn('text-shadcn-500 mt-3 text-center text-sm font-normal', className), ...props }));
38
+ return (_jsx("p", { "data-slot": "account-balance-card-empty", className: cn('text-muted-foreground mt-3 text-center text-sm font-normal', className), ...props }));
39
39
  }
40
40
  export function AccountBalanceCardInfo({ className, assetCode, value, children: _children, ref, ...props }) {
41
- return (_jsxs("div", { ref: ref, "data-slot": "account-balance-card-info", className: cn('text-shadcn-500 mt-3 flex flex-row items-center justify-between text-sm font-normal', className), ...props, children: [_jsx("p", { children: assetCode }), _jsx("p", { children: value })] }));
41
+ return (_jsxs("div", { ref: ref, "data-slot": "account-balance-card-info", className: cn('text-muted-foreground mt-3 flex flex-row items-center justify-between text-sm font-normal', className), ...props, children: [_jsx("p", { children: assetCode }), _jsx("p", { children: value })] }));
42
42
  }
43
43
  export function AccountBalanceCardUpdateButton({ className: _className, loading, timestamp, loadingLabel = 'Updating...', updatedInLabel = 'Updated in', updatedLabel = 'Updated', onRefresh, children: _children, ref, ...props }) {
44
44
  const _time = useTime({ interval: 1000 * 60 });
45
45
  const updated = React.useMemo(() => {
46
46
  return !dayjs(timestamp).isBefore(dayjs().subtract(1, 'minute'));
47
47
  }, [_time, timestamp]);
48
- return (_jsxs("div", { className: "mb-3 flex flex-row items-center justify-end gap-2", children: [_jsxs("p", { className: "text-shadcn-500 text-xs font-medium", children: [loading && loadingLabel, !loading && !updated && updatedInLabel, !loading && updated && updatedLabel] }), !loading && updated && (_jsx(CheckCircle2, { className: "text-system-success-h1a h-4 w-4" })), (!updated || loading) && (_jsx(Button, { ref: ref, variant: "link", "data-slot": "account-balance-card-update-button", className: "h-3 p-0", onClick: onRefresh, disabled: loading, ...props, children: _jsx(RefreshCw, { className: cn('size-4', { 'motion-safe:animate-spin': loading }) }) }))] }));
48
+ return (_jsxs("div", { className: "mb-3 flex flex-row items-center justify-end gap-2", children: [_jsxs("p", { className: "text-muted-foreground text-xs font-medium", children: [loading && loadingLabel, !loading && !updated && updatedInLabel, !loading && updated && updatedLabel] }), !loading && updated && (_jsx(CheckCircle2, { className: "text-system-success-h1a h-4 w-4" })), (!updated || loading) && (_jsx(Button, { ref: ref, variant: "link", "data-slot": "account-balance-card-update-button", className: "h-3 p-0", onClick: onRefresh, disabled: loading, ...props, children: _jsx(RefreshCw, { className: cn('size-4', { 'motion-safe:animate-spin': loading }) }) }))] }));
49
49
  }
50
50
  export function AccountBalanceCardTrigger({ className, openLabel, closeLabel, children: _children, ...props }) {
51
51
  const { open } = React.useContext(AccountBalanceCardContext);
52
- return (_jsx(CollapsibleTrigger, { asChild: true, children: _jsx(Button, { variant: "link", "data-slot": "account-balance-card-trigger", className: cn('text-shadcn-600/40 h-4 p-0 text-xs', className), ...props, children: !open ? openLabel : closeLabel }) }));
52
+ return (_jsx(CollapsibleTrigger, { asChild: true, children: _jsx(Button, { variant: "link", "data-slot": "account-balance-card-trigger", className: cn('text-muted-foreground h-4 p-0 text-xs', className), ...props, children: !open ? openLabel : closeLabel }) }));
53
53
  }
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/card/basic-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAO7B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAO5B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAO7B;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAE7B"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/card/basic-card/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,wBAAgB,SAAS,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAO7B;AAED,wBAAgB,cAAc,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,qBAO5B;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAU7B;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAE7B"}
@@ -4,10 +4,10 @@ export function BasicCard({ className, ...props }) {
4
4
  return (_jsx("div", { className: cn('bg-card flex flex-col rounded-lg p-6', className), ...props }));
5
5
  }
6
6
  export function BasicCardTitle({ className, ...props }) {
7
- return (_jsx("h2", { className: cn('text-shadcn-600 mb-4 text-sm font-medium', className), ...props }));
7
+ return (_jsx("h2", { className: cn('text-foreground mb-4 text-sm font-medium', className), ...props }));
8
8
  }
9
9
  export function BasicCardContent({ className, ...props }) {
10
- return (_jsx("div", { className: cn('text-shadcn-500 mb-6 text-sm font-medium', className), ...props }));
10
+ return (_jsx("div", { className: cn('text-muted-foreground mb-6 text-sm font-medium', className), ...props }));
11
11
  }
12
12
  export function BasicCardAction({ className, ...props }) {
13
13
  return _jsx("div", { className: cn('flex flex-col', className), ...props });
@@ -45,7 +45,7 @@ export function EntityCardDescription({ className, ...props }) {
45
45
  return (_jsx("p", { "data-slot": "entity-card-description", className: cn('text-muted-foreground text-xs font-medium', className), ...props }));
46
46
  }
47
47
  export function EntityCardList({ className, ...props }) {
48
- return (_jsx("ul", { "data-slot": "entity-card-list", className: cn('text-shadcn-500 mx-2 list-inside list-disc space-y-1 text-xs font-medium', className), ...props }));
48
+ return (_jsx("ul", { "data-slot": "entity-card-list", className: cn('text-muted-foreground mx-2 list-inside list-disc space-y-1 text-xs font-medium', className), ...props }));
49
49
  }
50
50
  export function EntityCardFooter({ className, children, ...props }) {
51
51
  return (_jsxs("div", { "data-slot": "entity-card-footer", className: cn('text-muted-foreground flex flex-col gap-2 text-xs font-medium', className), ...props, children: [_jsx(Separator, {}), _jsx("div", { className: "[&>svg]:text-muted-foreground flex flex-row items-center gap-2 [&>svg]:size-4 [&>svg]:stroke-[1.5]", children: children })] }));
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dialog/confirmation-dialog/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAuD9B,KAAK,6BAA6B,GAAG;IACnC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAAA;IAC3D;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,KAAK,8BAA8B,GAC/B;IACE,OAAO,EAAE,OAAO,CAAA;IAChB;;;;;;OAMG;IACH,YAAY,EAAE,MAAM,CAAA;CACrB,GACD;IACE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;yEACqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAEL,MAAM,MAAM,uBAAuB,GAAG,6BAA6B,GACjE,8BAA8B,CAAA;AAEhC,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,KAAY,EACZ,WAAkB,EAClB,OAAmB,EACnB,OAAO,EACP,SAAoB,EACpB,QAAmB,EACnB,YAAY,EACZ,WAAW,EACX,YAAY,EACb,EAAE,uBAAuB,qBA8FzB"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/dialog/confirmation-dialog/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAuD9B,KAAK,6BAA6B,GAAG;IACnC,IAAI,EAAE,OAAO,CAAA;IACb,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACrC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAAA;IAC3D;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,KAAK,8BAA8B,GAC/B;IACE,OAAO,EAAE,OAAO,CAAA;IAChB;;;;;;OAMG;IACH,YAAY,EAAE,MAAM,CAAA;CACrB,GACD;IACE,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB;yEACqE;IACrE,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,CAAA;AAEL,MAAM,MAAM,uBAAuB,GAAG,6BAA6B,GACjE,8BAA8B,CAAA;AAEhC,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,YAAY,EACZ,KAAY,EACZ,WAAkB,EAClB,OAAmB,EACnB,OAAO,EACP,SAAoB,EACpB,QAAmB,EACnB,YAAY,EACZ,WAAW,EACX,YAAY,EACb,EAAE,uBAAuB,qBAiGzB"}
@@ -53,5 +53,8 @@ export function ConfirmationDialog({ open, onOpenChange, title = null, descripti
53
53
  if (busy) {
54
54
  event.preventDefault();
55
55
  }
56
- }, children: [_jsxs(AlertDialogHeader, { className: "flex-row items-center", children: [_jsx(ConfirmationDialogIcon, { variant: variant }), _jsxs("div", { className: "flex flex-col gap-4", children: [title == null || title === false || title === true || title === '' ? (_jsx(AlertDialogTitle, { className: "sr-only", children: confirmLabel || 'Confirm' })) : (_jsx(AlertDialogTitle, { children: title })), description == null ? null : (_jsx(AlertDialogDescription, { children: description }))] })] }), pendingLabel ? (_jsx("span", { role: "status", className: "sr-only", children: busy ? pendingLabel : '' })) : null, _jsxs(AlertDialogFooter, { className: "gap-4", children: [_jsx(AlertDialogCancel, { asChild: true, variant: "secondary", children: _jsx(Button, { onClick: onCancel, disabled: busy, variant: "secondary", size: "small", children: cancelLabel ?? 'Cancel' }) }), _jsx(LoadingButton, { loading: busy, onClick: handleConfirm, variant: "primary", size: "small", "data-testid": "confirm", children: confirmLabel ?? 'Confirm' })] })] }) }));
56
+ }, children: [_jsxs(AlertDialogHeader, { className: "flex-row items-center", children: [_jsx(ConfirmationDialogIcon, { variant: variant }), _jsxs("div", { className: "flex flex-col gap-4", children: [title == null ||
57
+ title === false ||
58
+ title === true ||
59
+ title === '' ? (_jsx(AlertDialogTitle, { className: "sr-only", children: confirmLabel || 'Confirm' })) : (_jsx(AlertDialogTitle, { children: title })), description == null ? null : (_jsx(AlertDialogDescription, { children: description }))] })] }), pendingLabel ? (_jsx("span", { role: "status", className: "sr-only", children: busy ? pendingLabel : '' })) : null, _jsxs(AlertDialogFooter, { className: "gap-4", children: [_jsx(AlertDialogCancel, { asChild: true, variant: "secondary", children: _jsx(Button, { onClick: onCancel, disabled: busy, variant: "secondary", size: "small", children: cancelLabel ?? 'Cancel' }) }), _jsx(LoadingButton, { loading: busy, onClick: handleConfirm, variant: "primary", size: "small", "data-testid": "confirm", children: confirmLabel ?? 'Confirm' })] })] }) }));
57
60
  }
@@ -1,8 +1,24 @@
1
1
  import React from 'react';
2
2
  import { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps } from '@radix-ui/react-collapsible';
3
3
  declare function EntityBox({ className, children, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
4
- declare function EntityBoxCollapsible({ className, ...props }: CollapsibleProps): React.JSX.Element;
5
- declare function EntityBoxCollapsibleTrigger(props: CollapsibleTriggerProps): React.JSX.Element;
4
+ declare function EntityBoxCollapsible({ className, open, defaultOpen, onOpenChange, ...props }: CollapsibleProps): React.JSX.Element;
5
+ export type EntityBoxCollapsibleTriggerProps = CollapsibleTriggerProps & {
6
+ /** Accessible name while the box is closed. */
7
+ expandLabel?: string;
8
+ /** Accessible name while the box is open. */
9
+ collapseLabel?: string;
10
+ };
11
+ /**
12
+ * ⛔ THIS TRIGGER HAS NO TEXT NODE. It is a `Settings2` glyph inside a Button,
13
+ * so without an `aria-label` a screen reader announced "button" and nothing
14
+ * else (SC 4.1.2) — and this is the control that opens the filter panel on
15
+ * every console list page.
16
+ *
17
+ * The name describes the ACTION and Radix's `aria-expanded` carries the state,
18
+ * so the two halves do not repeat each other. English defaults because no
19
+ * consumer passes a label today; a translated console overrides both.
20
+ */
21
+ declare function EntityBoxCollapsibleTrigger({ expandLabel, collapseLabel, 'aria-label': ariaLabel, ...props }: EntityBoxCollapsibleTriggerProps): React.JSX.Element;
6
22
  declare function EntityBoxCollapsibleContent({ children, ...props }: CollapsibleContentProps): React.JSX.Element;
7
23
  export interface EntityBoxHeaderProps extends React.ComponentProps<'div'> {
8
24
  title: string;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/entity-box/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAczB,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,6BAA6B,CAAA;AAIpC,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAa7B;AAED,iBAAS,oBAAoB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,qBAUtE;AAED,iBAAS,2BAA2B,CAAC,KAAK,EAAE,uBAAuB,qBAQlE;AAED,iBAAS,2BAA2B,CAAC,EACnC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,qBAOzB;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACvE,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC/B;AAED,iBAAS,oBAAoB,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,SAAS,EACT,EAAE,EAAE,OAAc,EAClB,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAkCtB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAU7B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAa7B;AAED,OAAO,EACL,SAAS,EACT,oBAAoB,EACpB,2BAA2B,EAC3B,2BAA2B,EAC3B,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EACjB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/entity-box/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAczB,OAAO,EACL,uBAAuB,EACvB,gBAAgB,EAChB,uBAAuB,EACxB,MAAM,6BAA6B,CAAA;AAIpC,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAa7B;AAYD,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,GAAG,KAAK,EACT,EAAE,gBAAgB,qBAoBlB;AAED,MAAM,MAAM,gCAAgC,GAAG,uBAAuB,GAAG;IACvE,+CAA+C;IAC/C,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED;;;;;;;;;GASG;AACH,iBAAS,2BAA2B,CAAC,EACnC,WAAsB,EACtB,aAA0B,EAC1B,YAAY,EAAE,SAAS,EACvB,GAAG,KAAK,EACT,EAAE,gCAAgC,qBAclC;AAED,iBAAS,2BAA2B,CAAC,EACnC,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,uBAAuB,qBAOzB;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACvE,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC/B;AAED,iBAAS,oBAAoB,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,SAAS,EACT,EAAE,EAAE,OAAc,EAClB,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAkCtB;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAU7B;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAa7B;AAED,OAAO,EACL,SAAS,EACT,oBAAoB,EACpB,2BAA2B,EAC3B,2BAA2B,EAC3B,oBAAoB,EACpB,eAAe,EACf,gBAAgB,EACjB,CAAA"}
@@ -1,4 +1,5 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import React from 'react';
2
3
  import { cn } from '../../lib/utils.js';
3
4
  import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../ui/tooltip/index.js';
4
5
  import { CircleHelp, Settings2 } from 'lucide-react';
@@ -8,11 +9,35 @@ import { Separator } from '../ui/separator/index.js';
8
9
  function EntityBox({ className, children, ...props }) {
9
10
  return (_jsx("div", { "data-slot": "entity-box", className: cn('shadow-entity-box bg-card mb-2 flex items-center justify-between rounded-lg p-6', className), ...props, children: children }));
10
11
  }
11
- function EntityBoxCollapsible({ className, ...props }) {
12
- return (_jsx(Collapsible, { className: cn('shadow-entity-box bg-card mb-2 flex flex-col rounded-lg', className), ...props }));
12
+ /**
13
+ * The open state, republished for the trigger.
14
+ *
15
+ * Radix keeps it in a context it does not export, and the trigger one element
16
+ * down needs it to say what activating it will DO. Mirroring it here rather
17
+ * than forcing every consumer to lift the state: all ten console call sites
18
+ * render `<EntityBoxCollapsible>` uncontrolled.
19
+ */
20
+ const EntityBoxCollapsibleContext = React.createContext(false);
21
+ function EntityBoxCollapsible({ className, open, defaultOpen, onOpenChange, ...props }) {
22
+ const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? false);
23
+ return (_jsx(EntityBoxCollapsibleContext.Provider, { value: open ?? uncontrolled, children: _jsx(Collapsible, { className: cn('shadow-entity-box bg-card mb-2 flex flex-col rounded-lg', className), open: open, defaultOpen: defaultOpen, onOpenChange: (next) => {
24
+ setUncontrolled(next);
25
+ onOpenChange?.(next);
26
+ }, ...props }) }));
13
27
  }
14
- function EntityBoxCollapsibleTrigger(props) {
15
- return (_jsx(CollapsibleTrigger, { ...props, asChild: true, children: _jsx(Button, { variant: "secondary", className: "h-[34px] w-[34px] p-2", children: _jsx(Settings2, { size: 16 }) }) }));
28
+ /**
29
+ * ⛔ THIS TRIGGER HAS NO TEXT NODE. It is a `Settings2` glyph inside a Button,
30
+ * so without an `aria-label` a screen reader announced "button" and nothing
31
+ * else (SC 4.1.2) — and this is the control that opens the filter panel on
32
+ * every console list page.
33
+ *
34
+ * The name describes the ACTION and Radix's `aria-expanded` carries the state,
35
+ * so the two halves do not repeat each other. English defaults because no
36
+ * consumer passes a label today; a translated console overrides both.
37
+ */
38
+ function EntityBoxCollapsibleTrigger({ expandLabel = 'Expand', collapseLabel = 'Collapse', 'aria-label': ariaLabel, ...props }) {
39
+ const open = React.useContext(EntityBoxCollapsibleContext);
40
+ return (_jsx(CollapsibleTrigger, { ...props, asChild: true, children: _jsx(Button, { variant: "secondary", className: "h-[34px] w-[34px] p-2", "aria-label": ariaLabel ?? (open ? collapseLabel : expandLabel), children: _jsx(Settings2, { size: 16, "aria-hidden": true }) }) }));
16
41
  }
17
42
  function EntityBoxCollapsibleContent({ children, ...props }) {
18
43
  return (_jsxs(CollapsibleContent, { ...props, children: [_jsx(Separator, { orientation: "horizontal" }), _jsx("div", { className: "grid w-full grid-cols-3 p-6", children: children })] }));
@@ -34,7 +34,7 @@ export const DatePickerField = ({ name, label, tooltip, labelExtra, description,
34
34
  const handleSelect = (date) => {
35
35
  field.onChange(convertDateToOutputFormat(date));
36
36
  };
37
- return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: _jsx(CalendarIcon, { className: "size-4" }), children: value ? (_jsx("span", { className: "text-foreground flex-1 text-left font-bold", children: dayjs(value).format(dateFormat) })) : (_jsx("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsx(Calendar, { mode: "single",
37
+ return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-input-border text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: _jsx(CalendarIcon, { className: "size-4" }), children: value ? (_jsx("span", { className: "text-foreground flex-1 text-left font-bold", children: dayjs(value).format(dateFormat) })) : (_jsx("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsx(Calendar, { mode: "single",
38
38
  // `required` mirrors the field's own required: a required
39
39
  // field is not emptied by a re-click; an optional one keeps
40
40
  // react-day-picker's clear gesture.
@@ -13,6 +13,6 @@ export const DateRangeField = ({ name, label, tooltip, labelExtra, description,
13
13
  const [open, setOpen] = React.useState(false);
14
14
  return (_jsx(FormField, { name: name, control: control, render: ({ field }) => {
15
15
  const value = field.value;
16
- return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: _jsx(CalendarIcon, { className: "size-4" }), children: value?.from ? (_jsx("span", { className: "text-foreground flex-1 text-left font-bold", children: value.to ? (_jsxs(_Fragment, { children: [dayjs(value.from).format(dateFormat), " -", ' ', dayjs(value.to).format(dateFormat)] })) : (dayjs(value.from).format(dateFormat)) })) : (_jsx("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsx(Calendar, { mode: "range", defaultMonth: value?.from, selected: value, onSelect: field.onChange, numberOfMonths: numberOfMonths, disabled: disabled || readOnly, locale: locale }) })] }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
16
+ return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-input-border text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: _jsx(CalendarIcon, { className: "size-4" }), children: value?.from ? (_jsx("span", { className: "text-foreground flex-1 text-left font-bold", children: value.to ? (_jsxs(_Fragment, { children: [dayjs(value.from).format(dateFormat), " -", ' ', dayjs(value.to).format(dateFormat)] })) : (dayjs(value.from).format(dateFormat)) })) : (_jsx("span", { className: "text-muted-foreground flex-1 text-left", children: placeholder })) }) }) }), _jsx(PopoverContent, { className: "w-auto p-0", align: align, children: _jsx(Calendar, { mode: "range", defaultMonth: value?.from, selected: value, onSelect: field.onChange, numberOfMonths: numberOfMonths, disabled: disabled || readOnly, locale: locale }) })] }), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
17
17
  } }));
18
18
  };
@@ -52,7 +52,7 @@ export const DateTimePickerField = ({ name, label, tooltip, labelExtra, descript
52
52
  setOpen(false);
53
53
  };
54
54
  const showClear = !!field.value && !readOnly && !disabled;
55
- return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs("div", { className: "relative w-full", children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-shadcn-400 text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', showClear && 'pr-8', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: _jsx(CalendarIcon, { className: "size-4" }), children: _jsx("span", { className: cn('text-foreground flex-1 text-left', validCurrent && 'font-bold'), children: validCurrent
55
+ return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsxs("div", { className: "relative w-full", children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(FormControl, { children: _jsx(Button, { variant: "outline", disabled: disabled, className: cn('bg-input hover:bg-input border-input-border text-foreground h-10 w-full justify-start rounded-md px-2.5 font-normal', readOnly && 'pointer-events-none', showClear && 'pr-8', open && 'ring-ring ring-2 ring-offset-0'), "data-testid": others['data-testid'], icon: _jsx(CalendarIcon, { className: "size-4" }), children: _jsx("span", { className: cn('text-foreground flex-1 text-left', validCurrent && 'font-bold'), children: validCurrent
56
56
  ? validCurrent.format(dateFormat)
57
57
  : placeholder }) }) }) }), showClear && (_jsx("span", { role: "button", tabIndex: 0, "aria-label": "Clear date and time", className: "text-muted-foreground hover:text-foreground focus-visible:ring-ring absolute top-1/2 right-2 z-10 inline-flex shrink-0 -translate-y-1/2 rounded-sm outline-none focus-visible:ring-2", onClick: handleClear, onKeyDown: (e) => {
58
58
  if (e.key === 'Enter' || e.key === ' ') {
@@ -9,6 +9,10 @@ export type PasswordFieldProps<TFieldValues extends FieldValues = FieldValues, T
9
9
  required?: boolean;
10
10
  disabled?: boolean;
11
11
  'data-testid'?: string;
12
+ /** Accessible name of the eye button while the password is hidden. */
13
+ showPasswordLabel?: string;
14
+ /** Accessible name of the eye button while the password is showing. */
15
+ hidePasswordLabel?: string;
12
16
  };
13
- export declare function PasswordField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, tooltip, placeholder, control, required, disabled, 'data-testid': dataTestId }: PasswordFieldProps<TFieldValues, TName>): React.JSX.Element;
17
+ export declare function PasswordField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, tooltip, placeholder, control, required, disabled, 'data-testid': dataTestId, showPasswordLabel, hidePasswordLabel }: PasswordFieldProps<TFieldValues, TName>): React.JSX.Element;
14
18
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/password-field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAajE,MAAM,MAAM,kBAAkB,CAC5B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,IAC7D;IACF,IAAI,EAAE,KAAK,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,aAAa,CAC3B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,EACA,IAAI,EACJ,KAAK,EACL,OAAO,EACP,WAAW,EACX,OAAO,EACP,QAAgB,EAChB,QAAgB,EAChB,aAAa,EAAE,UAAU,EAC1B,EAAE,kBAAkB,CAAC,YAAY,EAAE,KAAK,CAAC,qBA0CzC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/password-field/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAajE,MAAM,MAAM,kBAAkB,CAC5B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,IAC7D;IACF,IAAI,EAAE,KAAK,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,sEAAsE;IACtE,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,uEAAuE;IACvE,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED,wBAAgB,aAAa,CAC3B,YAAY,SAAS,WAAW,GAAG,WAAW,EAC9C,KAAK,SAAS,SAAS,CAAC,YAAY,CAAC,GAAG,SAAS,CAAC,YAAY,CAAC,EAC/D,EACA,IAAI,EACJ,KAAK,EACL,OAAO,EACP,WAAW,EACX,OAAO,EACP,QAAgB,EAChB,QAAgB,EAChB,aAAa,EAAE,UAAU,EACzB,iBAAmC,EACnC,iBAAmC,EACpC,EAAE,kBAAkB,CAAC,YAAY,EAAE,KAAK,CAAC,qBAuDzC"}
@@ -4,7 +4,7 @@ import { FormControl, FormField, FormItem, FormLabel, FormMessage, FormTooltip }
4
4
  import { Input, InputAdornment } from '../../../components/ui/input/index.js';
5
5
  import { Eye, EyeOff } from 'lucide-react';
6
6
  import { IconButton } from '../../../components/ui/icon-button/index.js';
7
- export function PasswordField({ name, label, tooltip, placeholder, control, required = false, disabled = false, 'data-testid': dataTestId }) {
7
+ export function PasswordField({ name, label, tooltip, placeholder, control, required = false, disabled = false, 'data-testid': dataTestId, showPasswordLabel = 'Show password', hidePasswordLabel = 'Hide password' }) {
8
8
  const [show, setShow] = React.useState(false);
9
- return (_jsx(FormField, { control: control, name: name, render: ({ field }) => (_jsxs(FormItem, { required: required, children: [_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : undefined, children: label }), _jsx(FormControl, { children: _jsx(Input, { ...field, type: show ? 'text' : 'password', placeholder: placeholder, endAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { type: "button", variant: "outline", rounded: true, onClick: () => setShow(!show), children: show ? _jsx(EyeOff, {}) : _jsx(Eye, {}) }) }), disabled: disabled, className: "pr-10", "data-testid": dataTestId }) }), _jsx(FormMessage, {})] })) }));
9
+ return (_jsx(FormField, { control: control, name: name, render: ({ field }) => (_jsxs(FormItem, { required: required, children: [_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : undefined, children: label }), _jsx(FormControl, { children: _jsx(Input, { ...field, type: show ? 'text' : 'password', placeholder: placeholder, endAdornment: _jsx(InputAdornment, { position: "end", children: _jsx(IconButton, { type: "button", variant: "outline", rounded: true, "aria-label": show ? hidePasswordLabel : showPasswordLabel, onClick: () => setShow(!show), children: show ? _jsx(EyeOff, { "aria-hidden": true }) : _jsx(Eye, { "aria-hidden": true }) }) }), disabled: disabled, className: "pr-10", "data-testid": dataTestId }) }), _jsx(FormMessage, {})] })) }));
10
10
  }
@@ -15,6 +15,20 @@ type SelectFieldSharedProps<T extends FieldValues = FieldValues> = PropsWithChil
15
15
  required?: boolean;
16
16
  /** Copy for the "nothing to pick" row. Defaults to "No options found." */
17
17
  emptyMessage?: string;
18
+ /**
19
+ * Rendered inside the trigger, before the value — where a filter bar wants
20
+ * its glyph. On the single select it shares one flex box with the value so
21
+ * the trigger keeps exactly two children; on the multi select the trigger
22
+ * already groups them. The node itself is passed through untouched, with
23
+ * no `aria-hidden`: the prop takes an arbitrary node, and hiding it from
24
+ * the accessibility tree on the caller's behalf would silence a node the
25
+ * caller may have made meaningful on purpose. The trigger is named by its
26
+ * label and its value, so the node passed here should be decorative.
27
+ *
28
+ * Spacing is the caller's: the kit adds no margin, because a gap here
29
+ * would double with the one every existing call site already carries.
30
+ */
31
+ leadingIcon?: ReactNode;
18
32
  /**
19
33
  * Placed on the field's own root box, merged with its spacing rather than
20
34
  * replacing it. The root is the element a parent grid positions, so
@@ -47,6 +61,6 @@ type SelectFieldModeProps = {
47
61
  onChange?: (value: string) => void;
48
62
  };
49
63
  export type SelectFieldProps<T extends FieldValues = FieldValues> = SelectFieldSharedProps<T> & SelectFieldModeProps;
50
- export declare const SelectField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage, className, onChange, ...others }: SelectFieldProps<T>) => React.JSX.Element;
64
+ export declare const SelectField: <T extends FieldValues = FieldValues>({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage, leadingIcon, className, onChange, ...others }: SelectFieldProps<T>) => React.JSX.Element;
51
65
  export {};
52
66
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/select-field/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,EACL,OAAO,EAEP,WAAW,EAEZ,MAAM,iBAAiB,CAAA;AAExB,KAAK,sBAAsB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC7D,iBAAiB,GAAG;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;qCACiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAEH;;;;;;;;GAQG;AACH,KAAK,oBAAoB,GACrB;IACE,KAAK,EAAE,IAAI,CAAA;IACX;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACrC,GACD;IACE,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CAAA;AAEL,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC9D,sBAAsB,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAA;AAWlD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,6KAkB9D,gBAAgB,CAAC,CAAC,CAAC,sBA6FrB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/select-field/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC3D,OAAO,EACL,OAAO,EAEP,WAAW,EAEZ,MAAM,iBAAiB,CAAA;AAExB,KAAK,sBAAsB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC7D,iBAAiB,GAAG;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;qCACiC;IACjC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;;;;;;;;OAYG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAEH;;;;;;;;GAQG;AACH,KAAK,oBAAoB,GACrB;IACE,KAAK,EAAE,IAAI,CAAA;IACX;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACrC,GACD;IACE,KAAK,CAAC,EAAE,KAAK,CAAA;IACb;yEACqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CAAA;AAEL,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAC9D,sBAAsB,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAA;AAWlD,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,0LAmB9D,gBAAgB,CAAC,CAAC,CAAC,sBAgIrB,CAAA"}
@@ -1,22 +1,47 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
2
2
  import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, FormTooltip } from '../../../components/ui/form.js';
3
3
  import { MultipleSelect, MultipleSelectContent, MultipleSelectTrigger, MultipleSelectValue } from '../../../components/ui/multiple-select/index.js';
4
4
  import { Select, SelectContent, SelectEmpty, SelectTrigger, SelectValue } from '../../../components/ui/select/index.js';
5
5
  import { cn } from '../../../lib/utils.js';
6
- export const SelectField = ({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage = 'No options found.', className, onChange, ...others }) => {
6
+ export const SelectField = ({ name, label, tooltip, labelExtra, required, placeholder, description, disabled, readOnly, multi, control, value, children, emptyMessage = 'No options found.', leadingIcon, className, onChange, ...others }) => {
7
7
  // The props union already pairs `multi` with the callback shape that branch
8
8
  // emits, but destructuring an intersection loses that correlation — TS sees
9
9
  // two unrelated callbacks. Both branches report through this one seam, each
10
10
  // with the payload its own union member declared.
11
11
  const emitChange = onChange;
12
+ /**
13
+ * ⛔ THE GLYPH AND THE VALUE ARE ONE FLEX CHILD, NEVER TWO.
14
+ *
15
+ * `.select-trigger` is `flex w-full items-center justify-between`, so a
16
+ * third child makes it split the free space into TWO gaps: on any trigger
17
+ * wider than its content — which is every filter bar — the selected value
18
+ * drifted to the middle of the box instead of sitting beside the glyph.
19
+ * Wrapped, the trigger is back to two children, content and chevron,
20
+ * whatever the caller passes.
21
+ *
22
+ * `min-w-0` keeps the value truncating: the wrapper is the flex item now,
23
+ * and a flex item never shrinks below its own min-content width. The
24
+ * trigger's `VALUE_OVERFLOW_CLASS` reaches through it by descendant
25
+ * selector.
26
+ *
27
+ * No `gap`: the prop's contract is that spacing is the caller's (the Tracer
28
+ * filter bars carry their own `mr-2`), and a kit gap would double with it.
29
+ *
30
+ * The MULTI trigger needs none of this — it already renders its children
31
+ * inside one `flex grow flex-wrap` box, so the icon already shares a parent
32
+ * with the value and the trigger root already has exactly two children.
33
+ * Wrapping there would put the selected-value badges in a non-wrapping row
34
+ * and stop the trigger growing to a second line.
35
+ */
36
+ const withLeadingIcon = (value) => leadingIcon ? (_jsxs("span", { className: "flex min-w-0 items-center", children: [leadingIcon, value] })) : (value);
12
37
  const renderItem = (field) => {
13
38
  return (_jsxs(FormItem, { required: required, className: className, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), multi ? (_jsxs(MultipleSelect, { onValueChange: (value) => {
14
39
  field.onChange(value);
15
40
  emitChange?.(value);
16
- }, disabled: disabled, ...field, children: [_jsx(MultipleSelectTrigger, { readOnly: readOnly, children: _jsx(MultipleSelectValue, { placeholder: placeholder }) }), _jsx(MultipleSelectContent, { children: children })] })) : (_jsxs(Select, { onValueChange: (value) => {
41
+ }, disabled: disabled, ...field, children: [_jsxs(MultipleSelectTrigger, { readOnly: readOnly, children: [leadingIcon, _jsx(MultipleSelectValue, { placeholder: placeholder })] }), _jsx(MultipleSelectContent, { children: children })] })) : (_jsxs(Select, { onValueChange: (value) => {
17
42
  field.onChange(value);
18
43
  emitChange?.(value);
19
- }, value: field.value, disabled: disabled, open: readOnly ? false : undefined, onOpenChange: readOnly ? () => { } : undefined, children: [_jsx(FormControl, { children: _jsx(SelectTrigger, { className: cn(disabled && 'bg-shadcn-100'), readOnly: readOnly, "data-testid": others['data-testid'], children: _jsx(SelectValue, { placeholder: placeholder }) }) }), _jsxs(SelectContent, { children: [_jsx(SelectEmpty, { children: emptyMessage }), children] })] })), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
44
+ }, value: field.value, disabled: disabled, open: readOnly ? false : undefined, onOpenChange: readOnly ? () => { } : undefined, children: [_jsx(FormControl, { children: _jsx(SelectTrigger, { className: cn(disabled && 'bg-shadcn-100'), readOnly: readOnly, "data-testid": others['data-testid'], children: withLeadingIcon(_jsx(SelectValue, { placeholder: placeholder })) }) }), _jsxs(SelectContent, { children: [_jsx(SelectEmpty, { children: emptyMessage }), children] })] })), _jsx(FormMessage, {}), description && _jsx(FormDescription, { children: description })] }));
20
45
  };
21
46
  if (!control) {
22
47
  // `value` undefined leaves Radix to keep its own state, so an uncontrolled
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/switch-field/index.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAClE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,+GAU9D,gBAAgB,CAAC,CAAC,CAAC,gCAiDrB,CAAA"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/switch-field/index.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAQ,MAAM,iBAAiB,CAAA;AAE5D,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,IAAI;IAClE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAA;IACnB,UAAU,CAAC,EAAE,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,WAAW,GAAG,WAAW,EAAE,+GAU9D,gBAAgB,CAAC,CAAC,CAAC,gCAiDrB,CAAA"}
@@ -1,7 +1,12 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { FormControl, FormField, FormItem, FormLabel, FormMessage, FormTooltip } from '../../../components/ui/form.js';
3
3
  import { Switch } from '../../../components/ui/switch/index.js';
4
- import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../../../components/ui/tooltip/index.js';
4
+ import { Tooltip, TooltipContent, TooltipTrigger } from '../../../components/ui/tooltip/index.js';
5
5
  export const SwitchField = ({ label, name, control, labelExtra, tooltip, required, disabled, disabledTooltip, 'data-testid': dataTestId }) => {
6
- return (_jsx(FormField, { name: name, control: control, render: ({ field }) => (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsx("div", { className: "relative", children: _jsx(FormControl, { children: disabled && disabledTooltip ? (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: "inline-flex w-auto", children: _jsx(Switch, { checked: field.value, onCheckedChange: field.onChange, disabled: disabled }) }) }), _jsx(TooltipContent, { children: disabledTooltip })] }) })) : (_jsx(Switch, { checked: field.value, onCheckedChange: field.onChange, disabled: disabled, "data-testid": dataTestId })) }) }), _jsx(FormMessage, {})] })) }));
6
+ return (_jsx(FormField, { name: name, control: control, render: ({ field }) => {
7
+ // FormControl stamps the id the label points at on its direct child,
8
+ // so it must wrap the Switch itself, never the tooltip around it.
9
+ const control = (_jsx(FormControl, { children: _jsx(Switch, { checked: field.value, onCheckedChange: field.onChange, disabled: disabled, "data-testid": dataTestId }) }));
10
+ return (_jsxs(FormItem, { required: required, children: [label && (_jsx(FormLabel, { extra: tooltip ? _jsx(FormTooltip, { children: tooltip }) : labelExtra, children: label })), _jsx("div", { className: "relative", children: disabled && disabledTooltip ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx("div", { className: "inline-flex w-auto", children: control }) }), _jsx(TooltipContent, { children: disabledTooltip })] })) : (control) }), _jsx(FormMessage, {})] }));
11
+ } }));
7
12
  };
@@ -1,4 +1,38 @@
1
1
  export declare function PageRoot({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
2
2
  export declare function PageView({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
3
- export declare function PageContent({ className, ...props }: React.ComponentProps<'div'>): import("react").JSX.Element;
3
+ export type PageContentProps = React.ComponentProps<'div'> & {
4
+ /**
5
+ * How much room the container spends on padding.
6
+ *
7
+ * `'default'` is 64px a side at every width, and it is what every consumer
8
+ * that does not ask for anything gets, class for class.
9
+ *
10
+ * `'compact'` adds 16px a side below `sm` (640px) and changes nothing above
11
+ * it. On a 390px phone the default spends 128px — a third of the screen —
12
+ * before the page has drawn anything: measured at 390 on ten Product Console
13
+ * screens across Midaz, Pix, Payments, Reporter, Tracer, Flowker and
14
+ * Settings, each was left with 262px of content, and the pages adding their
15
+ * own `px-24` inside it were down to 70px, which is where a transaction
16
+ * receipt's amount ran off its card.
17
+ *
18
+ * WHY `max-sm:p-4` AND NOT THE MOBILE-FIRST `p-4 sm:p-16`. A base `p-4`
19
+ * REPLACES `p-16` for every caller, and `sm:p-16` then re-imposes 64px at
20
+ * desktop on the pages that deliberately asked for something else — a
21
+ * full-bleed page would grow a 64px frame at 1440. `max-sm:` only ADDS a rule
22
+ * below `sm`, so every call site renders identically from 640px up, whatever
23
+ * padding it passes.
24
+ *
25
+ * HOW A CALLER OPTS OUT. Pass the phone value too: `className="p-0
26
+ * max-sm:p-0"`. `cn` is tailwind-merge, so the caller's `max-sm:p-0` replaces
27
+ * this rule rather than stacking with it.
28
+ *
29
+ * AND AN AXIS PADDING HAS TO REPEAT ITSELF: `className="px-6 max-sm:px-6"`,
30
+ * never `px-6` alone. tailwind-merge does not treat `max-sm:p-4` and `px-6`
31
+ * as the same group, so it drops neither, and CSS then gives the media-query
32
+ * rule the last word — a lone `px-6` is silently 16px on both axes on a
33
+ * phone.
34
+ */
35
+ padding?: 'default' | 'compact';
36
+ };
37
+ export declare function PageContent({ className, padding, ...props }: PageContentProps): import("react").JSX.Element;
4
38
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/page/index.tsx"],"names":[],"mappings":"AAEA,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAW5E;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ5E;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ7B"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/page/index.tsx"],"names":[],"mappings":"AAEA,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAW5E;AAED,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,+BAQ5E;AAED,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8BG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;CAChC,CAAA;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAelB"}
@@ -6,6 +6,10 @@ export function PageRoot({ className, ...props }) {
6
6
  export function PageView({ className, ...props }) {
7
7
  return (_jsx("div", { "data-slot": "page-view", className: cn('flex min-h-0 flex-1', className), ...props }));
8
8
  }
9
- export function PageContent({ className, ...props }) {
10
- return (_jsx("div", { "data-slot": "page-content", className: cn('flex grow flex-col overflow-y-auto p-16', className), ...props }));
9
+ export function PageContent({ className, padding = 'default', ...props }) {
10
+ return (_jsx("div", { "data-slot": "page-content",
11
+ // Order is the contract, not a style: `className` last is what lets a
12
+ // caller's `p-0` beat `p-16` and a caller's `max-sm:p-0` replace the
13
+ // compact rule instead of stacking with it.
14
+ className: cn('flex grow flex-col overflow-y-auto p-16', padding === 'compact' && 'max-sm:p-4', className), ...props }));
11
15
  }
@@ -67,5 +67,5 @@ export function PageHeaderCollapsibleInfoTrigger({ question }) {
67
67
  return (_jsx("div", { "data-slot": "page-header-collapsible-info-trigger", children: _jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Button, { variant: "link", className: "flex gap-2 pr-0", children: [_jsx("span", { className: "text-foreground text-sm font-medium", children: question }), _jsx(HelpCircle, { className: "h-4 w-4" })] }) }) }));
68
68
  }
69
69
  export function PageHeaderCollapsibleInfo({ question, answer, seeMore, href }) {
70
- return (_jsx("div", { "data-slot": "page-header-collapsible-info", children: _jsx(CollapsibleContent, { children: _jsxs("div", { className: "flex w-full justify-between pt-6", children: [_jsxs("div", { className: "mt-12 flex grow flex-col gap-3 pr-6", children: [_jsx("h2", { className: "text-foreground text-xl font-bold", children: question }), _jsxs("p", { className: "text-shadcn-500 text-sm leading-relaxed font-medium", children: [answer, seeMore && href && (_jsxs(_Fragment, { children: [' ', _jsxs("a", { target: "_blank", rel: "noopener noreferrer", href: href, className: "text-muted-foreground font-medium", children: [_jsx("span", { className: "underline underline-offset-4", children: seeMore }), _jsx(ExternalLink, { size: 16, className: "ml-1 inline align-middle" })] })] }))] })] }), _jsx(CollapsibleTrigger, { asChild: true, children: _jsx(Button, { variant: "link", className: "cursor-pointer self-start", children: _jsx(ChevronUp, { size: 24, className: "text-shadcn-500" }) }) })] }) }) }));
70
+ return (_jsx("div", { "data-slot": "page-header-collapsible-info", children: _jsx(CollapsibleContent, { children: _jsxs("div", { className: "flex w-full justify-between pt-6", children: [_jsxs("div", { className: "mt-12 flex grow flex-col gap-3 pr-6", children: [_jsx("h2", { className: "text-foreground text-xl font-bold", children: question }), _jsxs("p", { className: "text-muted-foreground text-sm leading-relaxed font-medium", children: [answer, seeMore && href && (_jsxs(_Fragment, { children: [' ', _jsxs("a", { target: "_blank", rel: "noopener noreferrer", href: href, className: "text-muted-foreground font-medium", children: [_jsx("span", { className: "underline underline-offset-4", children: seeMore }), _jsx(ExternalLink, { size: 16, className: "ml-1 inline align-middle" })] })] }))] })] }), _jsx(CollapsibleTrigger, { asChild: true, children: _jsx(Button, { variant: "link", className: "cursor-pointer self-start", children: _jsx(ChevronUp, { size: 24, className: "text-muted-foreground" }) }) })] }) }) }));
71
71
  }
@@ -2,6 +2,18 @@ import { TableCell } from '../../components/ui/table/index.js';
2
2
  export type IdTableCellProps = Omit<React.ComponentProps<typeof TableCell>, 'onCopy'> & {
3
3
  id?: string;
4
4
  onCopy?: (id: string) => void;
5
+ /** Characters kept from the start of the id. */
6
+ head?: number;
7
+ /** Characters kept from the end of the id. */
8
+ tail?: number;
9
+ /**
10
+ * Accessible name for the copy button. Override for localization; the kit
11
+ * ships no i18n. The id is deliberately NOT interpolated into it — a column
12
+ * of thirty rows would announce thirty different names for the same action,
13
+ * and the id is already the cell's text and its `title`.
14
+ * @defaultValue 'Copy id'
15
+ */
16
+ copyLabel?: string;
5
17
  };
6
- export declare const IdTableCell: ({ id, onCopy, ...others }: IdTableCellProps) => import("react").JSX.Element;
18
+ export declare const IdTableCell: ({ id, onCopy, head, tail, copyLabel, ...others }: IdTableCellProps) => import("react").JSX.Element;
7
19
  //# sourceMappingURL=id-table-cell.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"id-table-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/id-table-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAGV,MAAM,uBAAuB,CAAA;AAU9B,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EACtC,QAAQ,CACT,GAAG;IACF,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B,CAAA;AAED,eAAO,MAAM,WAAW,GAAI,2BAA2B,gBAAgB,gCAqBtE,CAAA"}
1
+ {"version":3,"file":"id-table-cell.d.ts","sourceRoot":"","sources":["../../../../src/components/table/id-table-cell.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAoB,MAAM,uBAAuB,CAAA;AASnE,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,EACtC,QAAQ,CACT,GAAG;IACF,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,8CAA8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AA6CD,eAAO,MAAM,WAAW,GAAI,kDAOzB,gBAAgB,gCAqFlB,CAAA"}