erp-pro-ui 0.1.9 → 0.2.0

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 (183) hide show
  1. package/README.md +14 -0
  2. package/dist/button.cjs +1 -1
  3. package/dist/button.mjs +1 -1
  4. package/dist/calendar.cjs +1 -1
  5. package/dist/calendar.mjs +1 -1
  6. package/dist/charts.cjs +1 -1
  7. package/dist/charts.mjs +1 -1
  8. package/dist/chip.cjs +1 -1
  9. package/dist/chip.mjs +1 -1
  10. package/dist/chunks/{DropdownMenu-CeD9kl_N.cjs → DropdownMenu-BDrNYO-D.cjs} +5 -4
  11. package/dist/chunks/DropdownMenu-BDrNYO-D.cjs.map +1 -0
  12. package/dist/chunks/{DropdownMenu-CBdZoVQs.mjs → DropdownMenu-BtTOri-A.mjs} +5 -4
  13. package/dist/chunks/DropdownMenu-BtTOri-A.mjs.map +1 -0
  14. package/dist/chunks/{tooltip-PJaQa8_l.cjs → Tooltip-DD30yj3A.cjs} +1 -1
  15. package/dist/chunks/{tooltip-PJaQa8_l.cjs.map → Tooltip-DD30yj3A.cjs.map} +1 -1
  16. package/dist/chunks/{tooltip-CmB8xKOF.mjs → Tooltip-DK3B879v.mjs} +1 -1
  17. package/dist/chunks/{tooltip-CmB8xKOF.mjs.map → Tooltip-DK3B879v.mjs.map} +1 -1
  18. package/dist/chunks/{button-DddUhuR-.mjs → button-A6UTvrOu.mjs} +2 -2
  19. package/dist/chunks/{button-DddUhuR-.mjs.map → button-A6UTvrOu.mjs.map} +1 -1
  20. package/dist/chunks/{button-xqernofO.cjs → button-C4MXPxsC.cjs} +2 -2
  21. package/dist/chunks/{button-xqernofO.cjs.map → button-C4MXPxsC.cjs.map} +1 -1
  22. package/dist/chunks/{calendar-BVuDnWUc.mjs → calendar-5XzPqKbE.mjs} +4 -4
  23. package/dist/chunks/calendar-5XzPqKbE.mjs.map +1 -0
  24. package/dist/chunks/{calendar-CYxkfvDv.cjs → calendar-CQJgQ5H_.cjs} +4 -4
  25. package/dist/chunks/calendar-CQJgQ5H_.cjs.map +1 -0
  26. package/dist/chunks/{charts-DuVZD7el.cjs → charts-BmIV-mJy.cjs} +40 -9
  27. package/dist/chunks/charts-BmIV-mJy.cjs.map +1 -0
  28. package/dist/chunks/{charts-mfevxJSU.mjs → charts-DkVu0rFc.mjs} +40 -9
  29. package/dist/chunks/charts-DkVu0rFc.mjs.map +1 -0
  30. package/dist/chunks/{chip-BDrpg5Ux.cjs → chip-B0YzBwkz.cjs} +7 -4
  31. package/dist/chunks/chip-B0YzBwkz.cjs.map +1 -0
  32. package/dist/chunks/{chip-Dt0p0_zd.mjs → chip-CqcdcSs2.mjs} +7 -4
  33. package/dist/chunks/chip-CqcdcSs2.mjs.map +1 -0
  34. package/dist/chunks/color-palette-C3lesasJ.mjs +329 -0
  35. package/dist/chunks/color-palette-C3lesasJ.mjs.map +1 -0
  36. package/dist/chunks/color-palette-pLh6En3n.cjs +384 -0
  37. package/dist/chunks/color-palette-pLh6En3n.cjs.map +1 -0
  38. package/dist/chunks/{combobox-0n1_tB8L.mjs → combobox-B6yk5U82.mjs} +4 -4
  39. package/dist/chunks/combobox-B6yk5U82.mjs.map +1 -0
  40. package/dist/chunks/{combobox-Ca7-BcLO.cjs → combobox-CtNrGmuR.cjs} +4 -4
  41. package/dist/chunks/combobox-CtNrGmuR.cjs.map +1 -0
  42. package/dist/chunks/{data-table-Bt2c9dog.mjs → data-table-Dtf6lKpp.mjs} +11 -11
  43. package/dist/chunks/{data-table-Bt2c9dog.mjs.map → data-table-Dtf6lKpp.mjs.map} +1 -1
  44. package/dist/chunks/{data-table-DhCpQjdf.cjs → data-table-fAEuevPn.cjs} +12 -12
  45. package/dist/chunks/{data-table-DhCpQjdf.cjs.map → data-table-fAEuevPn.cjs.map} +1 -1
  46. package/dist/chunks/{date-picker-CDACysPq.mjs → date-picker-BmQ0rgwH.mjs} +2 -2
  47. package/dist/chunks/{date-picker-CDACysPq.mjs.map → date-picker-BmQ0rgwH.mjs.map} +1 -1
  48. package/dist/chunks/{date-picker-duwF35Rk.cjs → date-picker-qpUZMtZC.cjs} +2 -2
  49. package/dist/chunks/{date-picker-duwF35Rk.cjs.map → date-picker-qpUZMtZC.cjs.map} +1 -1
  50. package/dist/chunks/{form-CvNNjA1i.mjs → form-CtZ6U-_B.mjs} +2 -2
  51. package/dist/chunks/{form-CvNNjA1i.mjs.map → form-CtZ6U-_B.mjs.map} +1 -1
  52. package/dist/chunks/{form-C_JxqsSZ.cjs → form-X6Vyaavl.cjs} +2 -2
  53. package/dist/chunks/{form-C_JxqsSZ.cjs.map → form-X6Vyaavl.cjs.map} +1 -1
  54. package/dist/chunks/{input-BvTrWtRn.mjs → input-Bqo9Q5zF.mjs} +33 -12
  55. package/dist/chunks/input-Bqo9Q5zF.mjs.map +1 -0
  56. package/dist/chunks/{input-wAznik-_.cjs → input-DkCPyWXi.cjs} +33 -12
  57. package/dist/chunks/input-DkCPyWXi.cjs.map +1 -0
  58. package/dist/chunks/{label-CxmbGh0l.cjs → label-BKzqfAAq.cjs} +2 -2
  59. package/dist/chunks/{label-CxmbGh0l.cjs.map → label-BKzqfAAq.cjs.map} +1 -1
  60. package/dist/chunks/{label-C1Ekt3j2.mjs → label-Drxg0cG2.mjs} +2 -2
  61. package/dist/chunks/{label-C1Ekt3j2.mjs.map → label-Drxg0cG2.mjs.map} +1 -1
  62. package/dist/chunks/{multi-select-combobox-CdPcvP_S.cjs → multi-select-combobox-C0DoDzxQ.cjs} +5 -5
  63. package/dist/chunks/multi-select-combobox-C0DoDzxQ.cjs.map +1 -0
  64. package/dist/chunks/{multi-select-combobox-_nuc3cZ3.mjs → multi-select-combobox-Do23ZfOQ.mjs} +5 -5
  65. package/dist/chunks/multi-select-combobox-Do23ZfOQ.mjs.map +1 -0
  66. package/dist/chunks/{password-strength-meter-BEx94cfy.mjs → password-strength-meter-BsvqQBAg.mjs} +3 -3
  67. package/dist/chunks/{password-strength-meter-BEx94cfy.mjs.map → password-strength-meter-BsvqQBAg.mjs.map} +1 -1
  68. package/dist/chunks/{password-strength-meter-BNnmSgLh.cjs → password-strength-meter-DCi_BP7e.cjs} +3 -3
  69. package/dist/chunks/{password-strength-meter-BNnmSgLh.cjs.map → password-strength-meter-DCi_BP7e.cjs.map} +1 -1
  70. package/dist/chunks/radio-CuiM_gDv.mjs +50 -0
  71. package/dist/chunks/radio-CuiM_gDv.mjs.map +1 -0
  72. package/dist/chunks/radio-zx9xEW_C.cjs +56 -0
  73. package/dist/chunks/radio-zx9xEW_C.cjs.map +1 -0
  74. package/dist/chunks/{select-B3tfHqQo.mjs → select-CUaSNR09.mjs} +4 -4
  75. package/dist/chunks/select-CUaSNR09.mjs.map +1 -0
  76. package/dist/chunks/{select-BwB9MsSv.cjs → select-bZ9WqLOc.cjs} +4 -4
  77. package/dist/chunks/select-bZ9WqLOc.cjs.map +1 -0
  78. package/dist/chunks/{sidebar-CCKZ_NMW.mjs → sidebar-DYEDFV2u.mjs} +3 -3
  79. package/dist/chunks/{sidebar-CCKZ_NMW.mjs.map → sidebar-DYEDFV2u.mjs.map} +1 -1
  80. package/dist/chunks/{sidebar-WG9Wnwnv.cjs → sidebar-Kkr45nuN.cjs} +3 -3
  81. package/dist/chunks/{sidebar-WG9Wnwnv.cjs.map → sidebar-Kkr45nuN.cjs.map} +1 -1
  82. package/dist/chunks/{stepper-CvuyKYXC.cjs → stepper-DepvEGfr.cjs} +2 -2
  83. package/dist/chunks/{stepper-CvuyKYXC.cjs.map → stepper-DepvEGfr.cjs.map} +1 -1
  84. package/dist/chunks/{stepper-CjywisS9.mjs → stepper-Jv5OS1nY.mjs} +2 -2
  85. package/dist/chunks/{stepper-CjywisS9.mjs.map → stepper-Jv5OS1nY.mjs.map} +1 -1
  86. package/dist/chunks/{sun-to-moon-button-azXKWDYT.mjs → sun-to-moon-button-BJtBEaa3.mjs} +69 -50
  87. package/dist/chunks/sun-to-moon-button-BJtBEaa3.mjs.map +1 -0
  88. package/dist/chunks/{sun-to-moon-button-A__wuc_4.cjs → sun-to-moon-button-PwgTPsTW.cjs} +69 -50
  89. package/dist/chunks/sun-to-moon-button-PwgTPsTW.cjs.map +1 -0
  90. package/dist/chunks/{switch-DPyzVrNh.cjs → switch-X3l8xnle.cjs} +10 -29
  91. package/dist/chunks/switch-X3l8xnle.cjs.map +1 -0
  92. package/dist/chunks/{switch-C1gKE0m0.mjs → switch-iPsN1NS2.mjs} +10 -29
  93. package/dist/chunks/switch-iPsN1NS2.mjs.map +1 -0
  94. package/dist/color-palette.cjs +9 -1
  95. package/dist/color-palette.mjs +2 -2
  96. package/dist/combobox.cjs +1 -1
  97. package/dist/combobox.mjs +1 -1
  98. package/dist/components/data-display/charts/BarChart.d.ts +5 -0
  99. package/dist/components/data-display/charts/BarChart.d.ts.map +1 -1
  100. package/dist/components/data-display/chip/Chip.d.ts +1 -1
  101. package/dist/components/data-display/chip/Chip.d.ts.map +1 -1
  102. package/dist/components/data-display/color-palette/ColorPalette.d.ts +24 -16
  103. package/dist/components/data-display/color-palette/ColorPalette.d.ts.map +1 -1
  104. package/dist/components/data-display/color-palette/index.d.ts +2 -1
  105. package/dist/components/data-display/color-palette/index.d.ts.map +1 -1
  106. package/dist/components/data-display/dashboard-cards/StatCard.d.ts +11 -3
  107. package/dist/components/data-display/dashboard-cards/StatCard.d.ts.map +1 -1
  108. package/dist/components/effects/sun-to-moon-button/ThemeSwitcherButtons.d.ts +16 -1
  109. package/dist/components/effects/sun-to-moon-button/ThemeSwitcherButtons.d.ts.map +1 -1
  110. package/dist/components/effects/sun-to-moon-button/index.d.ts +1 -1
  111. package/dist/components/effects/sun-to-moon-button/index.d.ts.map +1 -1
  112. package/dist/components/forms/input/Input.d.ts.map +1 -1
  113. package/dist/components/forms/input/types.d.ts +2 -0
  114. package/dist/components/forms/input/types.d.ts.map +1 -1
  115. package/dist/components/forms/radio/Radio.d.ts.map +1 -1
  116. package/dist/components/forms/switch/Switch.d.ts.map +1 -1
  117. package/dist/components/overlays/dropdown-menu/DropdownMenu.d.ts +1 -1
  118. package/dist/components/overlays/dropdown-menu/DropdownMenu.d.ts.map +1 -1
  119. package/dist/components/overlays/dropdown-menu/types.d.ts +1 -0
  120. package/dist/components/overlays/dropdown-menu/types.d.ts.map +1 -1
  121. package/dist/data-table.cjs +1 -1
  122. package/dist/data-table.mjs +1 -1
  123. package/dist/date-picker.cjs +1 -1
  124. package/dist/date-picker.mjs +1 -1
  125. package/dist/form.cjs +1 -1
  126. package/dist/form.mjs +1 -1
  127. package/dist/index.cjs +81 -67
  128. package/dist/index.cjs.map +1 -1
  129. package/dist/index.d.ts +3 -3
  130. package/dist/index.d.ts.map +1 -1
  131. package/dist/index.mjs +74 -68
  132. package/dist/index.mjs.map +1 -1
  133. package/dist/input.cjs +1 -1
  134. package/dist/input.mjs +1 -1
  135. package/dist/label.cjs +1 -1
  136. package/dist/label.mjs +1 -1
  137. package/dist/multi-select-combobox.cjs +1 -1
  138. package/dist/multi-select-combobox.mjs +1 -1
  139. package/dist/password-strength-meter.cjs +1 -1
  140. package/dist/password-strength-meter.mjs +1 -1
  141. package/dist/radio.cjs +1 -1
  142. package/dist/radio.mjs +1 -1
  143. package/dist/select.cjs +1 -1
  144. package/dist/select.mjs +1 -1
  145. package/dist/sidebar.cjs +1 -1
  146. package/dist/sidebar.mjs +1 -1
  147. package/dist/stepper.cjs +1 -1
  148. package/dist/stepper.mjs +1 -1
  149. package/dist/sun-to-moon-button.cjs +1 -1
  150. package/dist/sun-to-moon-button.mjs +1 -1
  151. package/dist/switch.cjs +1 -1
  152. package/dist/switch.mjs +1 -1
  153. package/dist/tooltip.cjs +2 -2
  154. package/dist/tooltip.mjs +1 -1
  155. package/package.json +5 -5
  156. package/dist/chunks/DropdownMenu-CBdZoVQs.mjs.map +0 -1
  157. package/dist/chunks/DropdownMenu-CeD9kl_N.cjs.map +0 -1
  158. package/dist/chunks/calendar-BVuDnWUc.mjs.map +0 -1
  159. package/dist/chunks/calendar-CYxkfvDv.cjs.map +0 -1
  160. package/dist/chunks/charts-DuVZD7el.cjs.map +0 -1
  161. package/dist/chunks/charts-mfevxJSU.mjs.map +0 -1
  162. package/dist/chunks/chip-BDrpg5Ux.cjs.map +0 -1
  163. package/dist/chunks/chip-Dt0p0_zd.mjs.map +0 -1
  164. package/dist/chunks/color-palette-BmQC14gE.cjs +0 -789
  165. package/dist/chunks/color-palette-BmQC14gE.cjs.map +0 -1
  166. package/dist/chunks/color-palette-DnX1sODj.mjs +0 -782
  167. package/dist/chunks/color-palette-DnX1sODj.mjs.map +0 -1
  168. package/dist/chunks/combobox-0n1_tB8L.mjs.map +0 -1
  169. package/dist/chunks/combobox-Ca7-BcLO.cjs.map +0 -1
  170. package/dist/chunks/input-BvTrWtRn.mjs.map +0 -1
  171. package/dist/chunks/input-wAznik-_.cjs.map +0 -1
  172. package/dist/chunks/multi-select-combobox-CdPcvP_S.cjs.map +0 -1
  173. package/dist/chunks/multi-select-combobox-_nuc3cZ3.mjs.map +0 -1
  174. package/dist/chunks/radio-DOkKyKKL.mjs +0 -44
  175. package/dist/chunks/radio-DOkKyKKL.mjs.map +0 -1
  176. package/dist/chunks/radio-DyQ3jF-M.cjs +0 -50
  177. package/dist/chunks/radio-DyQ3jF-M.cjs.map +0 -1
  178. package/dist/chunks/select-B3tfHqQo.mjs.map +0 -1
  179. package/dist/chunks/select-BwB9MsSv.cjs.map +0 -1
  180. package/dist/chunks/sun-to-moon-button-A__wuc_4.cjs.map +0 -1
  181. package/dist/chunks/sun-to-moon-button-azXKWDYT.mjs.map +0 -1
  182. package/dist/chunks/switch-C1gKE0m0.mjs.map +0 -1
  183. package/dist/chunks/switch-DPyzVrNh.cjs.map +0 -1
@@ -14,7 +14,7 @@ var Label = forwardRef(({ className = "", children, required, ...props }, ref) =
14
14
  `.trim().replace(/\s+/g, " "),
15
15
  ...props,
16
16
  children: [children, required && /* @__PURE__ */ jsx("span", {
17
- className: "text-destructive ml-1",
17
+ className: "text-destructive ms-1",
18
18
  children: "*"
19
19
  })]
20
20
  });
@@ -23,4 +23,4 @@ Label.displayName = "Label";
23
23
  //#endregion
24
24
  export { Label as t };
25
25
 
26
- //# sourceMappingURL=label-C1Ekt3j2.mjs.map
26
+ //# sourceMappingURL=label-Drxg0cG2.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"label-C1Ekt3j2.mjs","names":[],"sources":["../../src/components/forms/label/Label.tsx"],"sourcesContent":["import type { LabelProps } from \"./types\";\nimport { forwardRef } from \"react\";\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ className = \"\", children, required, ...props }, ref) => {\n return (\n <label\n ref={ref}\n className={`\n text-sm\n font-medium\n leading-none\n peer-disabled:cursor-not-allowed\n peer-disabled:opacity-70\n ${className}\n `\n .trim()\n .replace(/\\s+/g, \" \")}\n {...props}\n >\n {children}\n {required && <span className=\"text-destructive ml-1\">*</span>}\n </label>\n );\n },\n);\n\nLabel.displayName = \"Label\";\n"],"mappings":";;;AAGA,IAAa,QAAQ,YAClB,EAAE,YAAY,IAAI,UAAU,UAAU,GAAG,SAAS,QAAQ;AACzD,QACE,qBAAC,SAAD;EACO;EACL,WAAW;;;;;;YAMP,UAAU;UAEX,MAAM,CACN,QAAQ,QAAQ,IAAI;EACvB,GAAI;YAZN,CAcG,UACA,YAAY,oBAAC,QAAD;GAAM,WAAU;aAAwB;GAAQ,CAAA,CACvD;;EAGb;AAED,MAAM,cAAc"}
1
+ {"version":3,"file":"label-Drxg0cG2.mjs","names":[],"sources":["../../src/components/forms/label/Label.tsx"],"sourcesContent":["import type { LabelProps } from \"./types\";\nimport { forwardRef } from \"react\";\n\nexport const Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ className = \"\", children, required, ...props }, ref) => {\n return (\n <label\n ref={ref}\n className={`\n text-sm\n font-medium\n leading-none\n peer-disabled:cursor-not-allowed\n peer-disabled:opacity-70\n ${className}\n `\n .trim()\n .replace(/\\s+/g, \" \")}\n {...props}\n >\n {children}\n {required && <span className=\"text-destructive ms-1\">*</span>}\n </label>\n );\n },\n);\n\nLabel.displayName = \"Label\";\n"],"mappings":";;;AAGA,IAAa,QAAQ,YAClB,EAAE,YAAY,IAAI,UAAU,UAAU,GAAG,SAAS,QAAQ;AACzD,QACE,qBAAC,SAAD;EACO;EACL,WAAW;;;;;;YAMP,UAAU;UAEX,MAAM,CACN,QAAQ,QAAQ,IAAI;EACvB,GAAI;YAZN,CAcG,UACA,YAAY,oBAAC,QAAD;GAAM,WAAU;aAAwB;GAAQ,CAAA,CACvD;;EAGb;AAED,MAAM,cAAc"}
@@ -1,7 +1,7 @@
1
1
  const require_chunk = require("./chunk-B_GkZjkl.cjs");
2
2
  const require_utils = require("./utils-LRbEQHYs.cjs");
3
3
  const require_icons = require("./icons-CRanVZB1.cjs");
4
- const require_DropdownMenu = require("./DropdownMenu-CeD9kl_N.cjs");
4
+ const require_DropdownMenu = require("./DropdownMenu-BDrNYO-D.cjs");
5
5
  let react = require("react");
6
6
  react = require_chunk.__toESM(react, 1);
7
7
  let react_jsx_runtime = require("react/jsx-runtime");
@@ -37,7 +37,7 @@ var MultiSelectCombobox = ({ options, value = [], onChange, placeholder = "Selec
37
37
  if (!nextOpen) setSearch("");
38
38
  },
39
39
  animationClassName: "origin-top-left",
40
- panelClassName: "top-[40px] left-0 z-20 mt-1 flex max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition",
40
+ panelClassName: "top-[40px] start-0 z-20 mt-1 flex w-full max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition",
41
41
  trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
42
42
  style: { backgroundImage: framer_motion.useMotionTemplate`
43
43
  radial-gradient(
@@ -60,7 +60,7 @@ var MultiSelectCombobox = ({ options, value = [], onChange, placeholder = "Selec
60
60
  type: "button",
61
61
  onMouseDown: (e) => e.stopPropagation(),
62
62
  onClick: (e) => handleRemoveTag(value[index], e),
63
- className: "ml-0.5 rounded-full p-0.5 text-ds-2 transition-colors hover:bg-ds-surface-1 hover:text-ds-1",
63
+ className: "ms-0.5 rounded-full p-0.5 text-ds-2 transition-colors hover:bg-ds-surface-1 hover:text-ds-1",
64
64
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CloseIcon, {
65
65
  className: "h-3 w-3",
66
66
  "aria-hidden": "true"
@@ -71,7 +71,7 @@ var MultiSelectCombobox = ({ options, value = [], onChange, placeholder = "Selec
71
71
  children: placeholder
72
72
  })
73
73
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
74
- className: require_utils.mergeClassNames("ml-2 shrink-0 text-ds-2 transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
74
+ className: require_utils.mergeClassNames("ms-2 shrink-0 text-ds-2 transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
75
75
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.ChevronDownIcon, {
76
76
  width: 24,
77
77
  height: 24,
@@ -124,4 +124,4 @@ Object.defineProperty(exports, "MultiSelectCombobox", {
124
124
  }
125
125
  });
126
126
 
127
- //# sourceMappingURL=multi-select-combobox-CdPcvP_S.cjs.map
127
+ //# sourceMappingURL=multi-select-combobox-C0DoDzxQ.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"multi-select-combobox-C0DoDzxQ.cjs","names":[],"sources":["../../src/components/forms/multi-select-combobox/MultiSelectCombobox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface MultiSelectOption {\n label: string;\n value: string;\n}\n\nexport interface MultiSelectComboboxProps {\n options: MultiSelectOption[];\n value: string[];\n onChange: (values: string[]) => void;\n placeholder?: string;\n searchPlaceholder?: string;\n noOptionsText?: string;\n className?: string;\n bgClassName?: string;\n}\n\nconst MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({\n options,\n value = [],\n onChange,\n placeholder = \"Select...\",\n searchPlaceholder = \"Type to search...\",\n noOptionsText = \"No options found\",\n className,\n bgClassName = \"bg-ds-surface-1\",\n}) => {\n const [open, setOpen] = useState(false);\n const [search, setSearch] = useState(\"\");\n const [visible, setVisible] = useState(false);\n const mouseX = useMotionValue(0);\n const mouseY = useMotionValue(0);\n const radius = 100;\n\n // Filter options by search\n const filteredOptions = options.filter((opt) =>\n opt.label.toLowerCase().includes(search.toLowerCase()),\n );\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n const { left, top } = event.currentTarget.getBoundingClientRect();\n mouseX.set(event.clientX - left);\n mouseY.set(event.clientY - top);\n };\n\n const handleOptionClick = (optionValue: string) => {\n if (value.includes(optionValue)) {\n onChange(value.filter((v) => v !== optionValue));\n } else {\n onChange([...value, optionValue]);\n }\n };\n\n const handleRemoveTag = (optionValue: string, e: React.MouseEvent) => {\n e.stopPropagation();\n onChange(value.filter((v) => v !== optionValue));\n };\n\n const selectedLabels = value\n .map((v) => options.find((opt) => opt.value === v)?.label)\n .filter(Boolean);\n\n return (\n <DropdownMenu\n className={mergeClassNames(\"w-full\", className)}\n open={open}\n onOpenChange={(nextOpen) => {\n setOpen(nextOpen);\n if (!nextOpen) {\n setSearch(\"\");\n }\n }}\n animationClassName=\"origin-top-left\"\n panelClassName=\"top-[40px] start-0 z-20 mt-1 flex w-full max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition\"\n trigger={\n <motion.div\n style={{\n backgroundImage: useMotionTemplate`\n radial-gradient(\n ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n var(--ds-color-accent),\n transparent 90%\n )\n `,\n }}\n onMouseMove={handleMouseMove}\n onMouseEnter={() => setVisible(true)}\n onMouseLeave={() => setVisible(false)}\n className=\"group/multi-combobox w-full rounded-lg border-ds-border-2 p-[2px] transition duration-300 hover:border-ds-border-accent\"\n >\n <div\n className={mergeClassNames(\n \"flex min-h-10 w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out group-hover/multi-combobox:shadow-none\",\n bgClassName,\n )}\n >\n <div className=\"flex flex-1 flex-wrap gap-1\">\n {selectedLabels.length > 0 ? (\n selectedLabels.map((label, index) => (\n <span\n key={value[index]}\n className=\"inline-flex items-center gap-1 rounded-md border border-ds-border-field bg-ds-surface-2 px-2 py-0.5 text-xs font-medium text-ds-1\"\n >\n {label}\n <button\n type=\"button\"\n onMouseDown={(e) => e.stopPropagation()}\n onClick={(e) => handleRemoveTag(value[index], e)}\n className=\"ms-0.5 rounded-full p-0.5 text-ds-2 transition-colors hover:bg-ds-surface-1 hover:text-ds-1\"\n >\n <CloseIcon className=\"h-3 w-3\" aria-hidden=\"true\" />\n </button>\n </span>\n ))\n ) : (\n <span className=\"text-ds-2\">{placeholder}</span>\n )}\n </div>\n <span\n className={mergeClassNames(\n \"ms-2 shrink-0 text-ds-2 transition-transform duration-300\",\n open ? \"rotate-180\" : \"rotate-0\",\n )}\n >\n <ChevronDownIcon\n width={24}\n height={24}\n color=\"currentColor\"\n className=\"h-5 w-5\"\n />\n </span>\n </div>\n </motion.div>\n }\n >\n {/* Sticky search input */}\n <div className=\"sticky top-0 z-10 rounded-t-lg border-b border-ds-border-2/30 bg-ds-surface-1/95 backdrop-blur-sm\">\n <input\n autoFocus\n className=\"w-full rounded-t-lg bg-transparent px-3 py-2 text-sm text-ds-1 outline-none placeholder:text-ds-2 focus-visible:ring-2 focus-visible:ring-ds-focus/30\"\n placeholder={searchPlaceholder}\n value={search}\n onChange={(e) => setSearch(e.target.value)}\n onClick={(e) => e.stopPropagation()}\n />\n </div>\n {/* Scrollable options */}\n <div className=\"max-h-80 flex-1 overflow-auto\">\n {filteredOptions.length === 0 && (\n <div className=\"p-3 text-center text-sm text-ds-2\">\n {noOptionsText}\n </div>\n )}\n {filteredOptions.map((option) => {\n const isSelected = value.includes(option.value);\n return (\n <div\n key={option.value}\n className={mergeClassNames(\n \"flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition\",\n isSelected\n ? \"bg-ds-surface-2 text-ds-1\"\n : \"text-ds-1 hover:bg-ds-surface-2 hover:text-ds-1\",\n )}\n onClick={() => handleOptionClick(option.value)}\n >\n <span\n className={mergeClassNames(\n \"flex h-4 w-4 items-center justify-center rounded border transition\",\n isSelected\n ? \"border-ds-border-accent bg-ds-accent text-ds-on-accent\"\n : \"border-ds-border-2\",\n )}\n >\n {isSelected && <CheckIcon width={12} height={12} />}\n </span>\n <span className=\"flex-1\">{option.label}</span>\n </div>\n );\n })}\n </div>\n </DropdownMenu>\n );\n};\n\nexport default MultiSelectCombobox;\n"],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
2
2
  import { J as CheckIcon, N as ChevronDownIcon, q as CloseIcon } from "./icons-bx3nrxNv.mjs";
3
- import { t as DropdownMenu } from "./DropdownMenu-CBdZoVQs.mjs";
3
+ import { t as DropdownMenu } from "./DropdownMenu-BtTOri-A.mjs";
4
4
  import { useState } from "react";
5
5
  import { jsx, jsxs } from "react/jsx-runtime";
6
6
  import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
@@ -35,7 +35,7 @@ var MultiSelectCombobox = ({ options, value = [], onChange, placeholder = "Selec
35
35
  if (!nextOpen) setSearch("");
36
36
  },
37
37
  animationClassName: "origin-top-left",
38
- panelClassName: "top-[40px] left-0 z-20 mt-1 flex max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition",
38
+ panelClassName: "top-[40px] start-0 z-20 mt-1 flex w-full max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition",
39
39
  trigger: /* @__PURE__ */ jsx(motion.div, {
40
40
  style: { backgroundImage: useMotionTemplate`
41
41
  radial-gradient(
@@ -58,7 +58,7 @@ var MultiSelectCombobox = ({ options, value = [], onChange, placeholder = "Selec
58
58
  type: "button",
59
59
  onMouseDown: (e) => e.stopPropagation(),
60
60
  onClick: (e) => handleRemoveTag(value[index], e),
61
- className: "ml-0.5 rounded-full p-0.5 text-ds-2 transition-colors hover:bg-ds-surface-1 hover:text-ds-1",
61
+ className: "ms-0.5 rounded-full p-0.5 text-ds-2 transition-colors hover:bg-ds-surface-1 hover:text-ds-1",
62
62
  children: /* @__PURE__ */ jsx(CloseIcon, {
63
63
  className: "h-3 w-3",
64
64
  "aria-hidden": "true"
@@ -69,7 +69,7 @@ var MultiSelectCombobox = ({ options, value = [], onChange, placeholder = "Selec
69
69
  children: placeholder
70
70
  })
71
71
  }), /* @__PURE__ */ jsx("span", {
72
- className: mergeClassNames("ml-2 shrink-0 text-ds-2 transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
72
+ className: mergeClassNames("ms-2 shrink-0 text-ds-2 transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
73
73
  children: /* @__PURE__ */ jsx(ChevronDownIcon, {
74
74
  width: 24,
75
75
  height: 24,
@@ -117,4 +117,4 @@ var MultiSelectCombobox = ({ options, value = [], onChange, placeholder = "Selec
117
117
  //#endregion
118
118
  export { MultiSelectCombobox as t };
119
119
 
120
- //# sourceMappingURL=multi-select-combobox-_nuc3cZ3.mjs.map
120
+ //# sourceMappingURL=multi-select-combobox-Do23ZfOQ.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"multi-select-combobox-Do23ZfOQ.mjs","names":[],"sources":["../../src/components/forms/multi-select-combobox/MultiSelectCombobox.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon, CloseIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { mergeClassNames } from \"../../../utils\";\n\nexport interface MultiSelectOption {\n label: string;\n value: string;\n}\n\nexport interface MultiSelectComboboxProps {\n options: MultiSelectOption[];\n value: string[];\n onChange: (values: string[]) => void;\n placeholder?: string;\n searchPlaceholder?: string;\n noOptionsText?: string;\n className?: string;\n bgClassName?: string;\n}\n\nconst MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({\n options,\n value = [],\n onChange,\n placeholder = \"Select...\",\n searchPlaceholder = \"Type to search...\",\n noOptionsText = \"No options found\",\n className,\n bgClassName = \"bg-ds-surface-1\",\n}) => {\n const [open, setOpen] = useState(false);\n const [search, setSearch] = useState(\"\");\n const [visible, setVisible] = useState(false);\n const mouseX = useMotionValue(0);\n const mouseY = useMotionValue(0);\n const radius = 100;\n\n // Filter options by search\n const filteredOptions = options.filter((opt) =>\n opt.label.toLowerCase().includes(search.toLowerCase()),\n );\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n const { left, top } = event.currentTarget.getBoundingClientRect();\n mouseX.set(event.clientX - left);\n mouseY.set(event.clientY - top);\n };\n\n const handleOptionClick = (optionValue: string) => {\n if (value.includes(optionValue)) {\n onChange(value.filter((v) => v !== optionValue));\n } else {\n onChange([...value, optionValue]);\n }\n };\n\n const handleRemoveTag = (optionValue: string, e: React.MouseEvent) => {\n e.stopPropagation();\n onChange(value.filter((v) => v !== optionValue));\n };\n\n const selectedLabels = value\n .map((v) => options.find((opt) => opt.value === v)?.label)\n .filter(Boolean);\n\n return (\n <DropdownMenu\n className={mergeClassNames(\"w-full\", className)}\n open={open}\n onOpenChange={(nextOpen) => {\n setOpen(nextOpen);\n if (!nextOpen) {\n setSearch(\"\");\n }\n }}\n animationClassName=\"origin-top-left\"\n panelClassName=\"top-[40px] start-0 z-20 mt-1 flex w-full max-h-60 flex-col rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition\"\n trigger={\n <motion.div\n style={{\n backgroundImage: useMotionTemplate`\n radial-gradient(\n ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n var(--ds-color-accent),\n transparent 90%\n )\n `,\n }}\n onMouseMove={handleMouseMove}\n onMouseEnter={() => setVisible(true)}\n onMouseLeave={() => setVisible(false)}\n className=\"group/multi-combobox w-full rounded-lg border-ds-border-2 p-[2px] transition duration-300 hover:border-ds-border-accent\"\n >\n <div\n className={mergeClassNames(\n \"flex min-h-10 w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field px-3 py-2 text-sm text-ds-1 transition duration-400 ease-in-out group-hover/multi-combobox:shadow-none\",\n bgClassName,\n )}\n >\n <div className=\"flex flex-1 flex-wrap gap-1\">\n {selectedLabels.length > 0 ? (\n selectedLabels.map((label, index) => (\n <span\n key={value[index]}\n className=\"inline-flex items-center gap-1 rounded-md border border-ds-border-field bg-ds-surface-2 px-2 py-0.5 text-xs font-medium text-ds-1\"\n >\n {label}\n <button\n type=\"button\"\n onMouseDown={(e) => e.stopPropagation()}\n onClick={(e) => handleRemoveTag(value[index], e)}\n className=\"ms-0.5 rounded-full p-0.5 text-ds-2 transition-colors hover:bg-ds-surface-1 hover:text-ds-1\"\n >\n <CloseIcon className=\"h-3 w-3\" aria-hidden=\"true\" />\n </button>\n </span>\n ))\n ) : (\n <span className=\"text-ds-2\">{placeholder}</span>\n )}\n </div>\n <span\n className={mergeClassNames(\n \"ms-2 shrink-0 text-ds-2 transition-transform duration-300\",\n open ? \"rotate-180\" : \"rotate-0\",\n )}\n >\n <ChevronDownIcon\n width={24}\n height={24}\n color=\"currentColor\"\n className=\"h-5 w-5\"\n />\n </span>\n </div>\n </motion.div>\n }\n >\n {/* Sticky search input */}\n <div className=\"sticky top-0 z-10 rounded-t-lg border-b border-ds-border-2/30 bg-ds-surface-1/95 backdrop-blur-sm\">\n <input\n autoFocus\n className=\"w-full rounded-t-lg bg-transparent px-3 py-2 text-sm text-ds-1 outline-none placeholder:text-ds-2 focus-visible:ring-2 focus-visible:ring-ds-focus/30\"\n placeholder={searchPlaceholder}\n value={search}\n onChange={(e) => setSearch(e.target.value)}\n onClick={(e) => e.stopPropagation()}\n />\n </div>\n {/* Scrollable options */}\n <div className=\"max-h-80 flex-1 overflow-auto\">\n {filteredOptions.length === 0 && (\n <div className=\"p-3 text-center text-sm text-ds-2\">\n {noOptionsText}\n </div>\n )}\n {filteredOptions.map((option) => {\n const isSelected = value.includes(option.value);\n return (\n <div\n key={option.value}\n className={mergeClassNames(\n \"flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition\",\n isSelected\n ? \"bg-ds-surface-2 text-ds-1\"\n : \"text-ds-1 hover:bg-ds-surface-2 hover:text-ds-1\",\n )}\n onClick={() => handleOptionClick(option.value)}\n >\n <span\n className={mergeClassNames(\n \"flex h-4 w-4 items-center justify-center rounded border transition\",\n isSelected\n ? \"border-ds-border-accent bg-ds-accent text-ds-on-accent\"\n : \"border-ds-border-2\",\n )}\n >\n {isSelected && <CheckIcon width={12} height={12} />}\n </span>\n <span className=\"flex-1\">{option.label}</span>\n </div>\n );\n })}\n </div>\n </DropdownMenu>\n );\n};\n\nexport default MultiSelectCombobox;\n"],"mappings":"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"}
@@ -29,10 +29,10 @@ var PasswordCriteria = ({ password }) => {
29
29
  ].map((item) => /* @__PURE__ */ jsxs("div", {
30
30
  className: "flex items-center text-xs",
31
31
  children: [item.met ? /* @__PURE__ */ jsx(CheckIcon, {
32
- className: "mr-2 size-4 text-success",
32
+ className: "me-2 size-4 text-success",
33
33
  title: "CheckIcon"
34
34
  }) : /* @__PURE__ */ jsx(CloseIcon, {
35
- className: "mr-2 size-4 text-ds-3",
35
+ className: "me-2 size-4 text-ds-3",
36
36
  title: "CloseIcon"
37
37
  }), /* @__PURE__ */ jsx("span", {
38
38
  className: item.met ? "text-success" : "text-ds-2",
@@ -96,4 +96,4 @@ function PasswordStrengthMeter({ password }) {
96
96
  //#endregion
97
97
  export { PasswordStrengthMeter as t };
98
98
 
99
- //# sourceMappingURL=password-strength-meter-BEx94cfy.mjs.map
99
+ //# sourceMappingURL=password-strength-meter-BsvqQBAg.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"password-strength-meter-BEx94cfy.mjs","names":[],"sources":["../../src/components/forms/password-strength-meter/PasswordCriteria.tsx","../../src/components/forms/password-strength-meter/PasswordStrengthMeter.tsx"],"sourcesContent":["import { CheckIcon, CloseIcon } from \"../../icons\";\n\ninterface PasswordCriteriaProps {\n password: string;\n}\n\nexport const PasswordCriteria = ({ password }: PasswordCriteriaProps) => {\n const criteria = [\n { label: \"At least 6 characters\", met: password.length >= 6 },\n { label: \"Contains uppercase letter\", met: /[A-Z]/.test(password) },\n { label: \"Contains lowercase letter\", met: /[a-z]/.test(password) },\n { label: \"Contains a number\", met: /\\d/.test(password) },\n { label: \"Contains special character\", met: /[^A-Za-z0-9]/.test(password) },\n ];\n\n return (\n <div className=\"mt-2 space-y-1\">\n {criteria.map((item) => (\n <div key={item.label} className=\"flex items-center text-xs\">\n {item.met ? (\n <CheckIcon className=\"mr-2 size-4 text-success\" title=\"CheckIcon\" />\n ) : (\n <CloseIcon className=\"mr-2 size-4 text-ds-3\" title=\"CloseIcon\" />\n )}\n <span className={item.met ? \"text-success\" : \"text-ds-2\"}>\n {item.label}\n </span>\n </div>\n ))}\n </div>\n );\n};\n","import { useMemo } from \"react\";\n\nimport { PasswordCriteria } from \"./PasswordCriteria\";\n\nexport interface PasswordStrengthMeterProps {\n password: string;\n}\n\nexport function PasswordStrengthMeter({\n password,\n}: PasswordStrengthMeterProps) {\n // Calculate password strength using an object mapping approach\n const getStrength = (pass: string): number => {\n const criteria = {\n minLength: pass.length >= 6,\n hasMixedCase: /[a-z]/.test(pass) && /[A-Z]/.test(pass),\n hasNumber: /\\d/.test(pass),\n hasSpecialChar: /[^a-zA-Z\\d]/.test(pass),\n };\n\n // Count the number of criteria that pass\n return Object.values(criteria).filter(Boolean).length;\n };\n\n // Memoize the strength calculation to avoid unnecessary recalculations\n const strength = useMemo(() => getStrength(password), [password]);\n\n // Determine strength color based on the calculated strength\n const getColor = (strength: number): string => {\n const colors = [\n \"bg-ds-state-danger\",\n \"bg-ds-state-danger\",\n \"bg-ds-state-warning\",\n \"bg-ds-state-warning\",\n \"bg-ds-state-success\",\n ];\n return colors[strength] || \"bg-ds-surface-3\";\n };\n\n // Get a text label corresponding to the password strength\n const getStrengthText = (strength: number): string => {\n const strengthLevels = [\"Very Weak\", \"Weak\", \"Fair\", \"Good\", \"Strong\"];\n return strengthLevels[strength] || \"Very Weak\";\n };\n\n return (\n <div className=\"mt-2\">\n {/* Strength Label */}\n <div className=\"mb-1 flex items-center justify-between\">\n <span className=\"text-xs text-ds-2\">Password strength</span>\n <span className=\"text-xs text-ds-2\">{getStrengthText(strength)}</span>\n </div>\n\n {/* Strength Meter */}\n <div className=\"flex gap-1\">\n {Array.from({ length: 4 }, (_, index) => (\n <div\n key={index}\n className={`h-1 w-1/4 rounded-full transition-colors duration-300 ${\n index < strength ? getColor(strength) : \"bg-ds-surface-3\"\n }`}\n />\n ))}\n </div>\n\n <PasswordCriteria password={password} />\n </div>\n );\n}\n"],"mappings":";;;;AAMA,IAAa,oBAAoB,EAAE,eAAsC;AASvE,QACE,oBAAC,OAAD;EAAK,WAAU;YACZ;GATH;IAAE,OAAO;IAAyB,KAAK,SAAS,UAAU;IAAG;GAC7D;IAAE,OAAO;IAA6B,KAAK,QAAQ,KAAK,SAAS;IAAE;GACnE;IAAE,OAAO;IAA6B,KAAK,QAAQ,KAAK,SAAS;IAAE;GACnE;IAAE,OAAO;IAAqB,KAAK,KAAK,KAAK,SAAS;IAAE;GACxD;IAAE,OAAO;IAA8B,KAAK,eAAe,KAAK,SAAS;IAAE;GAKxE,CAAS,KAAK,SACb,qBAAC,OAAD;GAAsB,WAAU;aAAhC,CACG,KAAK,MACJ,oBAAC,WAAD;IAAW,WAAU;IAA2B,OAAM;IAAc,CAAA,GAEpE,oBAAC,WAAD;IAAW,WAAU;IAAwB,OAAM;IAAc,CAAA,EAEnE,oBAAC,QAAD;IAAM,WAAW,KAAK,MAAM,iBAAiB;cAC1C,KAAK;IACD,CAAA,CACH;KATI,KAAK,MAST,CACN;EACE,CAAA;;;;ACrBV,SAAgB,sBAAsB,EACpC,YAC6B;CAE7B,MAAM,eAAe,SAAyB;EAC5C,MAAM,WAAW;GACf,WAAW,KAAK,UAAU;GAC1B,cAAc,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,KAAK;GACtD,WAAW,KAAK,KAAK,KAAK;GAC1B,gBAAgB,cAAc,KAAK,KAAK;GACzC;AAGD,SAAO,OAAO,OAAO,SAAS,CAAC,OAAO,QAAQ,CAAC;;CAIjD,MAAM,WAAW,cAAc,YAAY,SAAS,EAAE,CAAC,SAAS,CAAC;CAGjE,MAAM,YAAY,aAA6B;AAQ7C,SAAO;GANL;GACA;GACA;GACA;GACA;GAEK,CAAO,aAAa;;CAI7B,MAAM,mBAAmB,aAA6B;AAEpD,SAAO;GADiB;GAAa;GAAQ;GAAQ;GAAQ;GACtD,CAAe,aAAa;;AAGrC,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KAAM,WAAU;eAAoB;KAAwB,CAAA,EAC5D,oBAAC,QAAD;KAAM,WAAU;eAAqB,gBAAgB,SAAS;KAAQ,CAAA,CAClE;;GAGN,oBAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,UAC7B,oBAAC,OAAD,EAEE,WAAW,yDACT,QAAQ,WAAW,SAAS,SAAS,GAAG,qBAE1C,EAJK,MAIL,CACF;IACE,CAAA;GAEN,oBAAC,kBAAD,EAA4B,UAAY,CAAA;GACpC"}
1
+ {"version":3,"file":"password-strength-meter-BsvqQBAg.mjs","names":[],"sources":["../../src/components/forms/password-strength-meter/PasswordCriteria.tsx","../../src/components/forms/password-strength-meter/PasswordStrengthMeter.tsx"],"sourcesContent":["import { CheckIcon, CloseIcon } from \"../../icons\";\n\ninterface PasswordCriteriaProps {\n password: string;\n}\n\nexport const PasswordCriteria = ({ password }: PasswordCriteriaProps) => {\n const criteria = [\n { label: \"At least 6 characters\", met: password.length >= 6 },\n { label: \"Contains uppercase letter\", met: /[A-Z]/.test(password) },\n { label: \"Contains lowercase letter\", met: /[a-z]/.test(password) },\n { label: \"Contains a number\", met: /\\d/.test(password) },\n { label: \"Contains special character\", met: /[^A-Za-z0-9]/.test(password) },\n ];\n\n return (\n <div className=\"mt-2 space-y-1\">\n {criteria.map((item) => (\n <div key={item.label} className=\"flex items-center text-xs\">\n {item.met ? (\n <CheckIcon className=\"me-2 size-4 text-success\" title=\"CheckIcon\" />\n ) : (\n <CloseIcon className=\"me-2 size-4 text-ds-3\" title=\"CloseIcon\" />\n )}\n <span className={item.met ? \"text-success\" : \"text-ds-2\"}>\n {item.label}\n </span>\n </div>\n ))}\n </div>\n );\n};\n","import { useMemo } from \"react\";\n\nimport { PasswordCriteria } from \"./PasswordCriteria\";\n\nexport interface PasswordStrengthMeterProps {\n password: string;\n}\n\nexport function PasswordStrengthMeter({\n password,\n}: PasswordStrengthMeterProps) {\n // Calculate password strength using an object mapping approach\n const getStrength = (pass: string): number => {\n const criteria = {\n minLength: pass.length >= 6,\n hasMixedCase: /[a-z]/.test(pass) && /[A-Z]/.test(pass),\n hasNumber: /\\d/.test(pass),\n hasSpecialChar: /[^a-zA-Z\\d]/.test(pass),\n };\n\n // Count the number of criteria that pass\n return Object.values(criteria).filter(Boolean).length;\n };\n\n // Memoize the strength calculation to avoid unnecessary recalculations\n const strength = useMemo(() => getStrength(password), [password]);\n\n // Determine strength color based on the calculated strength\n const getColor = (strength: number): string => {\n const colors = [\n \"bg-ds-state-danger\",\n \"bg-ds-state-danger\",\n \"bg-ds-state-warning\",\n \"bg-ds-state-warning\",\n \"bg-ds-state-success\",\n ];\n return colors[strength] || \"bg-ds-surface-3\";\n };\n\n // Get a text label corresponding to the password strength\n const getStrengthText = (strength: number): string => {\n const strengthLevels = [\"Very Weak\", \"Weak\", \"Fair\", \"Good\", \"Strong\"];\n return strengthLevels[strength] || \"Very Weak\";\n };\n\n return (\n <div className=\"mt-2\">\n {/* Strength Label */}\n <div className=\"mb-1 flex items-center justify-between\">\n <span className=\"text-xs text-ds-2\">Password strength</span>\n <span className=\"text-xs text-ds-2\">{getStrengthText(strength)}</span>\n </div>\n\n {/* Strength Meter */}\n <div className=\"flex gap-1\">\n {Array.from({ length: 4 }, (_, index) => (\n <div\n key={index}\n className={`h-1 w-1/4 rounded-full transition-colors duration-300 ${\n index < strength ? getColor(strength) : \"bg-ds-surface-3\"\n }`}\n />\n ))}\n </div>\n\n <PasswordCriteria password={password} />\n </div>\n );\n}\n"],"mappings":";;;;AAMA,IAAa,oBAAoB,EAAE,eAAsC;AASvE,QACE,oBAAC,OAAD;EAAK,WAAU;YACZ;GATH;IAAE,OAAO;IAAyB,KAAK,SAAS,UAAU;IAAG;GAC7D;IAAE,OAAO;IAA6B,KAAK,QAAQ,KAAK,SAAS;IAAE;GACnE;IAAE,OAAO;IAA6B,KAAK,QAAQ,KAAK,SAAS;IAAE;GACnE;IAAE,OAAO;IAAqB,KAAK,KAAK,KAAK,SAAS;IAAE;GACxD;IAAE,OAAO;IAA8B,KAAK,eAAe,KAAK,SAAS;IAAE;GAKxE,CAAS,KAAK,SACb,qBAAC,OAAD;GAAsB,WAAU;aAAhC,CACG,KAAK,MACJ,oBAAC,WAAD;IAAW,WAAU;IAA2B,OAAM;IAAc,CAAA,GAEpE,oBAAC,WAAD;IAAW,WAAU;IAAwB,OAAM;IAAc,CAAA,EAEnE,oBAAC,QAAD;IAAM,WAAW,KAAK,MAAM,iBAAiB;cAC1C,KAAK;IACD,CAAA,CACH;KATI,KAAK,MAST,CACN;EACE,CAAA;;;;ACrBV,SAAgB,sBAAsB,EACpC,YAC6B;CAE7B,MAAM,eAAe,SAAyB;EAC5C,MAAM,WAAW;GACf,WAAW,KAAK,UAAU;GAC1B,cAAc,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,KAAK;GACtD,WAAW,KAAK,KAAK,KAAK;GAC1B,gBAAgB,cAAc,KAAK,KAAK;GACzC;AAGD,SAAO,OAAO,OAAO,SAAS,CAAC,OAAO,QAAQ,CAAC;;CAIjD,MAAM,WAAW,cAAc,YAAY,SAAS,EAAE,CAAC,SAAS,CAAC;CAGjE,MAAM,YAAY,aAA6B;AAQ7C,SAAO;GANL;GACA;GACA;GACA;GACA;GAEK,CAAO,aAAa;;CAI7B,MAAM,mBAAmB,aAA6B;AAEpD,SAAO;GADiB;GAAa;GAAQ;GAAQ;GAAQ;GACtD,CAAe,aAAa;;AAGrC,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GAEE,qBAAC,OAAD;IAAK,WAAU;cAAf,CACE,oBAAC,QAAD;KAAM,WAAU;eAAoB;KAAwB,CAAA,EAC5D,oBAAC,QAAD;KAAM,WAAU;eAAqB,gBAAgB,SAAS;KAAQ,CAAA,CAClE;;GAGN,oBAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,UAC7B,oBAAC,OAAD,EAEE,WAAW,yDACT,QAAQ,WAAW,SAAS,SAAS,GAAG,qBAE1C,EAJK,MAIL,CACF;IACE,CAAA;GAEN,oBAAC,kBAAD,EAA4B,UAAY,CAAA;GACpC"}
@@ -30,10 +30,10 @@ var PasswordCriteria = ({ password }) => {
30
30
  ].map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
31
31
  className: "flex items-center text-xs",
32
32
  children: [item.met ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CheckIcon, {
33
- className: "mr-2 size-4 text-success",
33
+ className: "me-2 size-4 text-success",
34
34
  title: "CheckIcon"
35
35
  }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CloseIcon, {
36
- className: "mr-2 size-4 text-ds-3",
36
+ className: "me-2 size-4 text-ds-3",
37
37
  title: "CloseIcon"
38
38
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
39
39
  className: item.met ? "text-success" : "text-ds-2",
@@ -102,4 +102,4 @@ Object.defineProperty(exports, "PasswordStrengthMeter", {
102
102
  }
103
103
  });
104
104
 
105
- //# sourceMappingURL=password-strength-meter-BNnmSgLh.cjs.map
105
+ //# sourceMappingURL=password-strength-meter-DCi_BP7e.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"password-strength-meter-BNnmSgLh.cjs","names":[],"sources":["../../src/components/forms/password-strength-meter/PasswordCriteria.tsx","../../src/components/forms/password-strength-meter/PasswordStrengthMeter.tsx"],"sourcesContent":["import { CheckIcon, CloseIcon } from \"../../icons\";\n\ninterface PasswordCriteriaProps {\n password: string;\n}\n\nexport const PasswordCriteria = ({ password }: PasswordCriteriaProps) => {\n const criteria = [\n { label: \"At least 6 characters\", met: password.length >= 6 },\n { label: \"Contains uppercase letter\", met: /[A-Z]/.test(password) },\n { label: \"Contains lowercase letter\", met: /[a-z]/.test(password) },\n { label: \"Contains a number\", met: /\\d/.test(password) },\n { label: \"Contains special character\", met: /[^A-Za-z0-9]/.test(password) },\n ];\n\n return (\n <div className=\"mt-2 space-y-1\">\n {criteria.map((item) => (\n <div key={item.label} className=\"flex items-center text-xs\">\n {item.met ? (\n <CheckIcon className=\"mr-2 size-4 text-success\" title=\"CheckIcon\" />\n ) : (\n <CloseIcon className=\"mr-2 size-4 text-ds-3\" title=\"CloseIcon\" />\n )}\n <span className={item.met ? \"text-success\" : \"text-ds-2\"}>\n {item.label}\n </span>\n </div>\n ))}\n </div>\n );\n};\n","import { useMemo } from \"react\";\n\nimport { PasswordCriteria } from \"./PasswordCriteria\";\n\nexport interface PasswordStrengthMeterProps {\n password: string;\n}\n\nexport function PasswordStrengthMeter({\n password,\n}: PasswordStrengthMeterProps) {\n // Calculate password strength using an object mapping approach\n const getStrength = (pass: string): number => {\n const criteria = {\n minLength: pass.length >= 6,\n hasMixedCase: /[a-z]/.test(pass) && /[A-Z]/.test(pass),\n hasNumber: /\\d/.test(pass),\n hasSpecialChar: /[^a-zA-Z\\d]/.test(pass),\n };\n\n // Count the number of criteria that pass\n return Object.values(criteria).filter(Boolean).length;\n };\n\n // Memoize the strength calculation to avoid unnecessary recalculations\n const strength = useMemo(() => getStrength(password), [password]);\n\n // Determine strength color based on the calculated strength\n const getColor = (strength: number): string => {\n const colors = [\n \"bg-ds-state-danger\",\n \"bg-ds-state-danger\",\n \"bg-ds-state-warning\",\n \"bg-ds-state-warning\",\n \"bg-ds-state-success\",\n ];\n return colors[strength] || \"bg-ds-surface-3\";\n };\n\n // Get a text label corresponding to the password strength\n const getStrengthText = (strength: number): string => {\n const strengthLevels = [\"Very Weak\", \"Weak\", \"Fair\", \"Good\", \"Strong\"];\n return strengthLevels[strength] || \"Very Weak\";\n };\n\n return (\n <div className=\"mt-2\">\n {/* Strength Label */}\n <div className=\"mb-1 flex items-center justify-between\">\n <span className=\"text-xs text-ds-2\">Password strength</span>\n <span className=\"text-xs text-ds-2\">{getStrengthText(strength)}</span>\n </div>\n\n {/* Strength Meter */}\n <div className=\"flex gap-1\">\n {Array.from({ length: 4 }, (_, index) => (\n <div\n key={index}\n className={`h-1 w-1/4 rounded-full transition-colors duration-300 ${\n index < strength ? getColor(strength) : \"bg-ds-surface-3\"\n }`}\n />\n ))}\n </div>\n\n <PasswordCriteria password={password} />\n </div>\n );\n}\n"],"mappings":";;;;;AAMA,IAAa,oBAAoB,EAAE,eAAsC;AASvE,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;YACZ;GATH;IAAE,OAAO;IAAyB,KAAK,SAAS,UAAU;IAAG;GAC7D;IAAE,OAAO;IAA6B,KAAK,QAAQ,KAAK,SAAS;IAAE;GACnE;IAAE,OAAO;IAA6B,KAAK,QAAQ,KAAK,SAAS;IAAE;GACnE;IAAE,OAAO;IAAqB,KAAK,KAAK,KAAK,SAAS;IAAE;GACxD;IAAE,OAAO;IAA8B,KAAK,eAAe,KAAK,SAAS;IAAE;GAKxE,CAAS,KAAK,SACb,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAsB,WAAU;aAAhC,CACG,KAAK,MACJ,iBAAA,GAAA,kBAAA,KAAC,cAAA,WAAD;IAAW,WAAU;IAA2B,OAAM;IAAc,CAAA,GAEpE,iBAAA,GAAA,kBAAA,KAAC,cAAA,WAAD;IAAW,WAAU;IAAwB,OAAM;IAAc,CAAA,EAEnE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAW,KAAK,MAAM,iBAAiB;cAC1C,KAAK;IACD,CAAA,CACH;KATI,KAAK,MAST,CACN;EACE,CAAA;;;;ACrBV,SAAgB,sBAAsB,EACpC,YAC6B;CAE7B,MAAM,eAAe,SAAyB;EAC5C,MAAM,WAAW;GACf,WAAW,KAAK,UAAU;GAC1B,cAAc,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,KAAK;GACtD,WAAW,KAAK,KAAK,KAAK;GAC1B,gBAAgB,cAAc,KAAK,KAAK;GACzC;AAGD,SAAO,OAAO,OAAO,SAAS,CAAC,OAAO,QAAQ,CAAC;;CAIjD,MAAM,YAAA,GAAA,MAAA,eAAyB,YAAY,SAAS,EAAE,CAAC,SAAS,CAAC;CAGjE,MAAM,YAAY,aAA6B;AAQ7C,SAAO;GANL;GACA;GACA;GACA;GACA;GAEK,CAAO,aAAa;;CAI7B,MAAM,mBAAmB,aAA6B;AAEpD,SAAO;GADiB;GAAa;GAAQ;GAAQ;GAAQ;GACtD,CAAe,aAAa;;AAGrC,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf;GAEE,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eAAoB;KAAwB,CAAA,EAC5D,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eAAqB,gBAAgB,SAAS;KAAQ,CAAA,CAClE;;GAGN,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,UAC7B,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAEE,WAAW,yDACT,QAAQ,WAAW,SAAS,SAAS,GAAG,qBAE1C,EAJK,MAIL,CACF;IACE,CAAA;GAEN,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAA4B,UAAY,CAAA;GACpC"}
1
+ {"version":3,"file":"password-strength-meter-DCi_BP7e.cjs","names":[],"sources":["../../src/components/forms/password-strength-meter/PasswordCriteria.tsx","../../src/components/forms/password-strength-meter/PasswordStrengthMeter.tsx"],"sourcesContent":["import { CheckIcon, CloseIcon } from \"../../icons\";\n\ninterface PasswordCriteriaProps {\n password: string;\n}\n\nexport const PasswordCriteria = ({ password }: PasswordCriteriaProps) => {\n const criteria = [\n { label: \"At least 6 characters\", met: password.length >= 6 },\n { label: \"Contains uppercase letter\", met: /[A-Z]/.test(password) },\n { label: \"Contains lowercase letter\", met: /[a-z]/.test(password) },\n { label: \"Contains a number\", met: /\\d/.test(password) },\n { label: \"Contains special character\", met: /[^A-Za-z0-9]/.test(password) },\n ];\n\n return (\n <div className=\"mt-2 space-y-1\">\n {criteria.map((item) => (\n <div key={item.label} className=\"flex items-center text-xs\">\n {item.met ? (\n <CheckIcon className=\"me-2 size-4 text-success\" title=\"CheckIcon\" />\n ) : (\n <CloseIcon className=\"me-2 size-4 text-ds-3\" title=\"CloseIcon\" />\n )}\n <span className={item.met ? \"text-success\" : \"text-ds-2\"}>\n {item.label}\n </span>\n </div>\n ))}\n </div>\n );\n};\n","import { useMemo } from \"react\";\n\nimport { PasswordCriteria } from \"./PasswordCriteria\";\n\nexport interface PasswordStrengthMeterProps {\n password: string;\n}\n\nexport function PasswordStrengthMeter({\n password,\n}: PasswordStrengthMeterProps) {\n // Calculate password strength using an object mapping approach\n const getStrength = (pass: string): number => {\n const criteria = {\n minLength: pass.length >= 6,\n hasMixedCase: /[a-z]/.test(pass) && /[A-Z]/.test(pass),\n hasNumber: /\\d/.test(pass),\n hasSpecialChar: /[^a-zA-Z\\d]/.test(pass),\n };\n\n // Count the number of criteria that pass\n return Object.values(criteria).filter(Boolean).length;\n };\n\n // Memoize the strength calculation to avoid unnecessary recalculations\n const strength = useMemo(() => getStrength(password), [password]);\n\n // Determine strength color based on the calculated strength\n const getColor = (strength: number): string => {\n const colors = [\n \"bg-ds-state-danger\",\n \"bg-ds-state-danger\",\n \"bg-ds-state-warning\",\n \"bg-ds-state-warning\",\n \"bg-ds-state-success\",\n ];\n return colors[strength] || \"bg-ds-surface-3\";\n };\n\n // Get a text label corresponding to the password strength\n const getStrengthText = (strength: number): string => {\n const strengthLevels = [\"Very Weak\", \"Weak\", \"Fair\", \"Good\", \"Strong\"];\n return strengthLevels[strength] || \"Very Weak\";\n };\n\n return (\n <div className=\"mt-2\">\n {/* Strength Label */}\n <div className=\"mb-1 flex items-center justify-between\">\n <span className=\"text-xs text-ds-2\">Password strength</span>\n <span className=\"text-xs text-ds-2\">{getStrengthText(strength)}</span>\n </div>\n\n {/* Strength Meter */}\n <div className=\"flex gap-1\">\n {Array.from({ length: 4 }, (_, index) => (\n <div\n key={index}\n className={`h-1 w-1/4 rounded-full transition-colors duration-300 ${\n index < strength ? getColor(strength) : \"bg-ds-surface-3\"\n }`}\n />\n ))}\n </div>\n\n <PasswordCriteria password={password} />\n </div>\n );\n}\n"],"mappings":";;;;;AAMA,IAAa,oBAAoB,EAAE,eAAsC;AASvE,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;YACZ;GATH;IAAE,OAAO;IAAyB,KAAK,SAAS,UAAU;IAAG;GAC7D;IAAE,OAAO;IAA6B,KAAK,QAAQ,KAAK,SAAS;IAAE;GACnE;IAAE,OAAO;IAA6B,KAAK,QAAQ,KAAK,SAAS;IAAE;GACnE;IAAE,OAAO;IAAqB,KAAK,KAAK,KAAK,SAAS;IAAE;GACxD;IAAE,OAAO;IAA8B,KAAK,eAAe,KAAK,SAAS;IAAE;GAKxE,CAAS,KAAK,SACb,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAsB,WAAU;aAAhC,CACG,KAAK,MACJ,iBAAA,GAAA,kBAAA,KAAC,cAAA,WAAD;IAAW,WAAU;IAA2B,OAAM;IAAc,CAAA,GAEpE,iBAAA,GAAA,kBAAA,KAAC,cAAA,WAAD;IAAW,WAAU;IAAwB,OAAM;IAAc,CAAA,EAEnE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAW,KAAK,MAAM,iBAAiB;cAC1C,KAAK;IACD,CAAA,CACH;KATI,KAAK,MAST,CACN;EACE,CAAA;;;;ACrBV,SAAgB,sBAAsB,EACpC,YAC6B;CAE7B,MAAM,eAAe,SAAyB;EAC5C,MAAM,WAAW;GACf,WAAW,KAAK,UAAU;GAC1B,cAAc,QAAQ,KAAK,KAAK,IAAI,QAAQ,KAAK,KAAK;GACtD,WAAW,KAAK,KAAK,KAAK;GAC1B,gBAAgB,cAAc,KAAK,KAAK;GACzC;AAGD,SAAO,OAAO,OAAO,SAAS,CAAC,OAAO,QAAQ,CAAC;;CAIjD,MAAM,YAAA,GAAA,MAAA,eAAyB,YAAY,SAAS,EAAE,CAAC,SAAS,CAAC;CAGjE,MAAM,YAAY,aAA6B;AAQ7C,SAAO;GANL;GACA;GACA;GACA;GACA;GAEK,CAAO,aAAa;;CAI7B,MAAM,mBAAmB,aAA6B;AAEpD,SAAO;GADiB;GAAa;GAAQ;GAAQ;GAAQ;GACtD,CAAe,aAAa;;AAGrC,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf;GAEE,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eAAoB;KAAwB,CAAA,EAC5D,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,WAAU;eAAqB,gBAAgB,SAAS;KAAQ,CAAA,CAClE;;GAGN,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACZ,MAAM,KAAK,EAAE,QAAQ,GAAG,GAAG,GAAG,UAC7B,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAEE,WAAW,yDACT,QAAQ,WAAW,SAAS,SAAS,GAAG,qBAE1C,EAJK,MAIL,CACF;IACE,CAAA;GAEN,iBAAA,GAAA,kBAAA,KAAC,kBAAD,EAA4B,UAAY,CAAA;GACpC"}
@@ -0,0 +1,50 @@
1
+ import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
2
+ import { forwardRef, useId } from "react";
3
+ import { jsx, jsxs } from "react/jsx-runtime";
4
+ //#region src/components/forms/radio/Radio.tsx
5
+ var sanitizeId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "-");
6
+ var colorMap = {
7
+ red: "var(--ds-color-danger)",
8
+ blue: "var(--ds-color-info)",
9
+ green: "var(--ds-color-success)",
10
+ yellow: "var(--ds-color-warning)",
11
+ teal: "var(--ds-brand-teal)",
12
+ primary: "var(--ds-color-accent)"
13
+ };
14
+ var Radio = forwardRef(({ className = "", label, error, id, color = "primary", bgClassName = "", ...props }, ref) => {
15
+ const generatedId = useId();
16
+ const radioId = id || `radio-${sanitizeId(generatedId)}`;
17
+ return /* @__PURE__ */ jsxs("div", {
18
+ className: "flex flex-col",
19
+ style: { "--radio-accent": colorMap[color] },
20
+ children: [/* @__PURE__ */ jsxs("div", {
21
+ className: "flex items-center gap-2",
22
+ children: [/* @__PURE__ */ jsxs("div", {
23
+ className: "relative h-5 w-5 shrink-0",
24
+ children: [
25
+ /* @__PURE__ */ jsx("input", {
26
+ ref,
27
+ type: "radio",
28
+ id: radioId,
29
+ className: mergeClassNames("peer absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed", className),
30
+ ...props
31
+ }),
32
+ /* @__PURE__ */ jsx("span", { className: mergeClassNames("pointer-events-none absolute inset-0 rounded-full border-2 transition-colors duration-150", "border-ds-border-field bg-ds-surface-1", "peer-checked:border-(--radio-accent) peer-checked:bg-(--radio-accent)", "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2", "peer-focus-visible:ring-[var(--radio-accent)] peer-focus-visible:ring-offset-ds-surface-1", "peer-disabled:opacity-50", bgClassName) }),
33
+ /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 scale-0 rounded-full bg-white transition-transform duration-150 peer-checked:scale-100 peer-disabled:opacity-50" })
34
+ ]
35
+ }), label && /* @__PURE__ */ jsx("label", {
36
+ htmlFor: radioId,
37
+ className: "cursor-pointer text-sm font-medium leading-none text-ds-1",
38
+ children: label
39
+ })]
40
+ }), error && /* @__PURE__ */ jsx("p", {
41
+ className: "ms-7 mt-1 text-sm font-medium text-destructive",
42
+ children: error
43
+ })]
44
+ });
45
+ });
46
+ Radio.displayName = "Radio";
47
+ //#endregion
48
+ export { Radio as t };
49
+
50
+ //# sourceMappingURL=radio-CuiM_gDv.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"radio-CuiM_gDv.mjs","names":[],"sources":["../../src/components/forms/radio/Radio.tsx"],"sourcesContent":["import type { RadioProps, RadioColor } from \"./types\";\nimport { forwardRef, useId } from \"react\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nconst colorMap: Record<RadioColor, string> = {\n red: \"var(--ds-color-danger)\",\n blue: \"var(--ds-color-info)\",\n green: \"var(--ds-color-success)\",\n yellow: \"var(--ds-color-warning)\",\n teal: \"var(--ds-brand-teal)\",\n primary: \"var(--ds-color-accent)\",\n};\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n (\n {\n className = \"\",\n label,\n error,\n id,\n color = \"primary\",\n bgClassName = \"\",\n ...props\n },\n ref,\n ) => {\n const generatedId = useId();\n const radioId = id || `radio-${sanitizeId(generatedId)}`;\n\n return (\n <div\n className=\"flex flex-col\"\n style={{ \"--radio-accent\": colorMap[color] } as React.CSSProperties}\n >\n <div className=\"flex items-center gap-2\">\n {/* Custom radio visual — keeps native input for full a11y */}\n <div className=\"relative h-5 w-5 shrink-0\">\n <input\n ref={ref}\n type=\"radio\"\n id={radioId}\n className={mergeClassNames(\n \"peer absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed\",\n className,\n )}\n {...props}\n />\n {/* Outer ring: surface-1 bg + border when idle, accent fill when checked */}\n <span\n className={mergeClassNames(\n \"pointer-events-none absolute inset-0 rounded-full border-2 transition-colors duration-150\",\n \"border-ds-border-field bg-ds-surface-1\",\n \"peer-checked:border-(--radio-accent) peer-checked:bg-(--radio-accent)\",\n \"peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2\",\n \"peer-focus-visible:ring-[var(--radio-accent)] peer-focus-visible:ring-offset-ds-surface-1\",\n \"peer-disabled:opacity-50\",\n bgClassName,\n )}\n />\n {/* Inner dot: always white, scales in/out with checked state */}\n <span className=\"pointer-events-none absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 scale-0 rounded-full bg-white transition-transform duration-150 peer-checked:scale-100 peer-disabled:opacity-50\" />\n </div>\n\n {label && (\n <label\n htmlFor={radioId}\n className=\"cursor-pointer text-sm font-medium leading-none text-ds-1\"\n >\n {label}\n </label>\n )}\n </div>\n\n {error && (\n <p className=\"ms-7 mt-1 text-sm font-medium text-destructive\">\n {error}\n </p>\n )}\n </div>\n );\n },\n);\n\nRadio.displayName = \"Radio\";\n"],"mappings":";;;;AAKA,IAAM,cAAc,UAAkB,MAAM,QAAQ,mBAAmB,IAAI;AAE3E,IAAM,WAAuC;CAC3C,KAAK;CACL,MAAM;CACN,OAAO;CACP,QAAQ;CACR,MAAM;CACN,SAAS;CACV;AAED,IAAa,QAAQ,YAEjB,EACE,YAAY,IACZ,OACA,OACA,IACA,QAAQ,WACR,cAAc,IACd,GAAG,SAEL,QACG;CACH,MAAM,cAAc,OAAO;CAC3B,MAAM,UAAU,MAAM,SAAS,WAAW,YAAY;AAEtD,QACE,qBAAC,OAAD;EACE,WAAU;EACV,OAAO,EAAE,kBAAkB,SAAS,QAAQ;YAF9C,CAIE,qBAAC,OAAD;GAAK,WAAU;aAAf,CAEE,qBAAC,OAAD;IAAK,WAAU;cAAf;KACE,oBAAC,SAAD;MACO;MACL,MAAK;MACL,IAAI;MACJ,WAAW,gBACT,4FACA,UACD;MACD,GAAI;MACJ,CAAA;KAEF,oBAAC,QAAD,EACE,WAAW,gBACT,6FACA,0CACA,yEACA,8DACA,6FACA,4BACA,YACD,EACD,CAAA;KAEF,oBAAC,QAAD,EAAM,WAAU,2MAA4M,CAAA;KACxN;OAEL,SACC,oBAAC,SAAD;IACE,SAAS;IACT,WAAU;cAET;IACK,CAAA,CAEN;MAEL,SACC,oBAAC,KAAD;GAAG,WAAU;aACV;GACC,CAAA,CAEF;;EAGX;AAED,MAAM,cAAc"}
@@ -0,0 +1,56 @@
1
+ require("./chunk-B_GkZjkl.cjs");
2
+ const require_utils = require("./utils-LRbEQHYs.cjs");
3
+ let react = require("react");
4
+ let react_jsx_runtime = require("react/jsx-runtime");
5
+ //#region src/components/forms/radio/Radio.tsx
6
+ var sanitizeId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "-");
7
+ var colorMap = {
8
+ red: "var(--ds-color-danger)",
9
+ blue: "var(--ds-color-info)",
10
+ green: "var(--ds-color-success)",
11
+ yellow: "var(--ds-color-warning)",
12
+ teal: "var(--ds-brand-teal)",
13
+ primary: "var(--ds-color-accent)"
14
+ };
15
+ var Radio = (0, react.forwardRef)(({ className = "", label, error, id, color = "primary", bgClassName = "", ...props }, ref) => {
16
+ const generatedId = (0, react.useId)();
17
+ const radioId = id || `radio-${sanitizeId(generatedId)}`;
18
+ return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
19
+ className: "flex flex-col",
20
+ style: { "--radio-accent": colorMap[color] },
21
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
22
+ className: "flex items-center gap-2",
23
+ children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
24
+ className: "relative h-5 w-5 shrink-0",
25
+ children: [
26
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
27
+ ref,
28
+ type: "radio",
29
+ id: radioId,
30
+ className: require_utils.mergeClassNames("peer absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed", className),
31
+ ...props
32
+ }),
33
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_utils.mergeClassNames("pointer-events-none absolute inset-0 rounded-full border-2 transition-colors duration-150", "border-ds-border-field bg-ds-surface-1", "peer-checked:border-(--radio-accent) peer-checked:bg-(--radio-accent)", "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2", "peer-focus-visible:ring-[var(--radio-accent)] peer-focus-visible:ring-offset-ds-surface-1", "peer-disabled:opacity-50", bgClassName) }),
34
+ /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: "pointer-events-none absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 scale-0 rounded-full bg-white transition-transform duration-150 peer-checked:scale-100 peer-disabled:opacity-50" })
35
+ ]
36
+ }), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
37
+ htmlFor: radioId,
38
+ className: "cursor-pointer text-sm font-medium leading-none text-ds-1",
39
+ children: label
40
+ })]
41
+ }), error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
42
+ className: "ms-7 mt-1 text-sm font-medium text-destructive",
43
+ children: error
44
+ })]
45
+ });
46
+ });
47
+ Radio.displayName = "Radio";
48
+ //#endregion
49
+ Object.defineProperty(exports, "Radio", {
50
+ enumerable: true,
51
+ get: function() {
52
+ return Radio;
53
+ }
54
+ });
55
+
56
+ //# sourceMappingURL=radio-zx9xEW_C.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"radio-zx9xEW_C.cjs","names":[],"sources":["../../src/components/forms/radio/Radio.tsx"],"sourcesContent":["import type { RadioProps, RadioColor } from \"./types\";\nimport { forwardRef, useId } from \"react\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nconst sanitizeId = (value: string) => value.replace(/[^a-zA-Z0-9_-]/g, \"-\");\n\nconst colorMap: Record<RadioColor, string> = {\n red: \"var(--ds-color-danger)\",\n blue: \"var(--ds-color-info)\",\n green: \"var(--ds-color-success)\",\n yellow: \"var(--ds-color-warning)\",\n teal: \"var(--ds-brand-teal)\",\n primary: \"var(--ds-color-accent)\",\n};\n\nexport const Radio = forwardRef<HTMLInputElement, RadioProps>(\n (\n {\n className = \"\",\n label,\n error,\n id,\n color = \"primary\",\n bgClassName = \"\",\n ...props\n },\n ref,\n ) => {\n const generatedId = useId();\n const radioId = id || `radio-${sanitizeId(generatedId)}`;\n\n return (\n <div\n className=\"flex flex-col\"\n style={{ \"--radio-accent\": colorMap[color] } as React.CSSProperties}\n >\n <div className=\"flex items-center gap-2\">\n {/* Custom radio visual — keeps native input for full a11y */}\n <div className=\"relative h-5 w-5 shrink-0\">\n <input\n ref={ref}\n type=\"radio\"\n id={radioId}\n className={mergeClassNames(\n \"peer absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed\",\n className,\n )}\n {...props}\n />\n {/* Outer ring: surface-1 bg + border when idle, accent fill when checked */}\n <span\n className={mergeClassNames(\n \"pointer-events-none absolute inset-0 rounded-full border-2 transition-colors duration-150\",\n \"border-ds-border-field bg-ds-surface-1\",\n \"peer-checked:border-(--radio-accent) peer-checked:bg-(--radio-accent)\",\n \"peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2\",\n \"peer-focus-visible:ring-[var(--radio-accent)] peer-focus-visible:ring-offset-ds-surface-1\",\n \"peer-disabled:opacity-50\",\n bgClassName,\n )}\n />\n {/* Inner dot: always white, scales in/out with checked state */}\n <span className=\"pointer-events-none absolute left-1/2 top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 scale-0 rounded-full bg-white transition-transform duration-150 peer-checked:scale-100 peer-disabled:opacity-50\" />\n </div>\n\n {label && (\n <label\n htmlFor={radioId}\n className=\"cursor-pointer text-sm font-medium leading-none text-ds-1\"\n >\n {label}\n </label>\n )}\n </div>\n\n {error && (\n <p className=\"ms-7 mt-1 text-sm font-medium text-destructive\">\n {error}\n </p>\n )}\n </div>\n );\n },\n);\n\nRadio.displayName = \"Radio\";\n"],"mappings":";;;;;AAKA,IAAM,cAAc,UAAkB,MAAM,QAAQ,mBAAmB,IAAI;AAE3E,IAAM,WAAuC;CAC3C,KAAK;CACL,MAAM;CACN,OAAO;CACP,QAAQ;CACR,MAAM;CACN,SAAS;CACV;AAED,IAAa,SAAA,GAAA,MAAA,aAET,EACE,YAAY,IACZ,OACA,OACA,IACA,QAAQ,WACR,cAAc,IACd,GAAG,SAEL,QACG;CACH,MAAM,eAAA,GAAA,MAAA,QAAqB;CAC3B,MAAM,UAAU,MAAM,SAAS,WAAW,YAAY;AAEtD,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,WAAU;EACV,OAAO,EAAE,kBAAkB,SAAS,QAAQ;YAF9C,CAIE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CAEE,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAU;cAAf;KACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;MACO;MACL,MAAK;MACL,IAAI;MACJ,WAAW,cAAA,gBACT,4FACA,UACD;MACD,GAAI;MACJ,CAAA;KAEF,iBAAA,GAAA,kBAAA,KAAC,QAAD,EACE,WAAW,cAAA,gBACT,6FACA,0CACA,yEACA,8DACA,6FACA,4BACA,YACD,EACD,CAAA;KAEF,iBAAA,GAAA,kBAAA,KAAC,QAAD,EAAM,WAAU,2MAA4M,CAAA;KACxN;OAEL,SACC,iBAAA,GAAA,kBAAA,KAAC,SAAD;IACE,SAAS;IACT,WAAU;cAET;IACK,CAAA,CAEN;MAEL,SACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;GAAG,WAAU;aACV;GACC,CAAA,CAEF;;EAGX;AAED,MAAM,cAAc"}
@@ -1,7 +1,7 @@
1
1
  import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
2
2
  import { t as TruncatedText } from "./truncated-text-C9t9o9IA.mjs";
3
3
  import { J as CheckIcon, N as ChevronDownIcon } from "./icons-bx3nrxNv.mjs";
4
- import { t as DropdownMenu } from "./DropdownMenu-CBdZoVQs.mjs";
4
+ import { t as DropdownMenu } from "./DropdownMenu-BtTOri-A.mjs";
5
5
  import { forwardRef, useEffect, useRef, useState } from "react";
6
6
  import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
7
7
  import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
@@ -90,7 +90,7 @@ var Select = forwardRef(function SelectComponent({ className = "", containerClas
90
90
  }
91
91
  setOpen(nextOpen);
92
92
  },
93
- panelClassName: mergeClassNames(" left-0 top-[40px] z-20 mt-1 flex flex-col overflow-auto rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition", isCompact ? "max-h-56" : "max-h-60", dropdownClassName),
93
+ panelClassName: mergeClassNames("start-0 top-[40px] z-20 mt-1 flex w-full flex-col overflow-auto rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition", isCompact ? "max-h-56" : "max-h-60", dropdownClassName),
94
94
  animationClassName: "origin-top-left",
95
95
  trigger: /* @__PURE__ */ jsx(motion.div, {
96
96
  style: { backgroundImage: disabled ? "none" : useMotionTemplate`
@@ -121,7 +121,7 @@ var Select = forwardRef(function SelectComponent({ className = "", containerClas
121
121
  className: "flex-1 text-ds-2",
122
122
  children: placeholder
123
123
  }), /* @__PURE__ */ jsx("span", {
124
- className: mergeClassNames("ml-2 shrink-0 text-ds-2 transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
124
+ className: mergeClassNames("ms-2 shrink-0 text-ds-2 transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
125
125
  children: /* @__PURE__ */ jsx(ChevronDownIcon, {
126
126
  width: 24,
127
127
  height: 24,
@@ -168,4 +168,4 @@ Select.displayName = "Select";
168
168
  //#endregion
169
169
  export { Select as t };
170
170
 
171
- //# sourceMappingURL=select-B3tfHqQo.mjs.map
171
+ //# sourceMappingURL=select-CUaSNR09.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select-CUaSNR09.mjs","names":[],"sources":["../../src/components/forms/select/Select.tsx"],"sourcesContent":["import {\n forwardRef,\n useEffect,\n useRef,\n useState,\n type ChangeEvent,\n type ForwardedRef,\n type KeyboardEvent,\n type MouseEvent as ReactMouseEvent,\n} from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { TruncatedText } from \"../../typography/truncated-text\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { SelectProps } from \"./types\";\n\nexport const Select = forwardRef(function SelectComponent(\n {\n className = \"\",\n containerClassName = \"\",\n triggerClassName = \"\",\n dropdownClassName = \"\",\n optionClassName = \"\",\n label,\n error,\n helperText,\n options,\n value,\n onChange,\n placeholder = \"Select...\",\n noOptionsText = \"No options\",\n disabled,\n bgClassName = \"bg-ds-surface-1\",\n size = \"default\",\n selectionIndicator = \"check\",\n ...props\n }: SelectProps,\n ref: ForwardedRef<HTMLSelectElement>,\n) {\n const [open, setOpen] = useState(false);\n const [visible, setVisible] = useState(false);\n const hiddenSelectRef = useRef<HTMLSelectElement>(null);\n const selectedOptionRef = useRef<HTMLDivElement>(null);\n const mouseX = useMotionValue(0);\n const mouseY = useMotionValue(0);\n const radius = 100;\n const isCompact = size === \"compact\";\n const selectedOption = options.find((option) => option.value === value);\n\n useEffect(() => {\n if (typeof ref === \"function\") {\n ref(hiddenSelectRef.current);\n return;\n }\n\n if (ref) {\n ref.current = hiddenSelectRef.current;\n }\n }, [ref]);\n\n useEffect(() => {\n if (!open || !selectedOptionRef.current) {\n return;\n }\n\n const frameId = window.requestAnimationFrame(() => {\n selectedOptionRef.current?.scrollIntoView({ block: \"nearest\" });\n });\n\n return () => {\n window.cancelAnimationFrame(frameId);\n };\n }, [open, value]);\n\n const handleMouseMove = (event: ReactMouseEvent<HTMLDivElement>) => {\n const { left, top } = event.currentTarget.getBoundingClientRect();\n mouseX.set(event.clientX - left);\n mouseY.set(event.clientY - top);\n };\n\n const handleSelect = (optionValue: string) => {\n if (onChange && hiddenSelectRef.current) {\n const syntheticEvent = {\n target: { value: optionValue, name: props.name },\n currentTarget: { value: optionValue, name: props.name },\n } as ChangeEvent<HTMLSelectElement>;\n\n onChange(syntheticEvent);\n }\n\n setOpen(false);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n if (disabled) {\n return;\n }\n\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n setOpen((current) => !current);\n }\n\n if (event.key === \"Escape\") {\n setOpen(false);\n }\n };\n\n return (\n <div\n className={mergeClassNames(\n \"w-full\",\n isCompact ? \"min-w-0\" : \"min-w-48\",\n containerClassName,\n )}\n >\n {label ? (\n <label className=\"mb-2 block text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n {label}\n </label>\n ) : null}\n\n <select\n ref={hiddenSelectRef}\n className=\"sr-only\"\n value={value}\n onChange={onChange}\n disabled={disabled}\n {...props}\n >\n <option value=\"\">{placeholder}</option>\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n\n <DropdownMenu\n className={mergeClassNames(\"w-full\", className)}\n open={open}\n onOpenChange={(nextOpen) => {\n if (disabled) {\n setOpen(false);\n return;\n }\n\n setOpen(nextOpen);\n }}\n panelClassName={mergeClassNames(\n \"start-0 top-[40px] z-20 mt-1 flex w-full flex-col overflow-auto rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition\",\n isCompact ? \"max-h-56\" : \"max-h-60\",\n dropdownClassName,\n )}\n animationClassName=\"origin-top-left\"\n trigger={\n <motion.div\n style={{\n backgroundImage: disabled\n ? \"none\"\n : useMotionTemplate`\n radial-gradient(\n ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n var(--ds-color-accent),\n transparent 90%\n )\n `,\n }}\n onMouseMove={!disabled ? handleMouseMove : undefined}\n onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n className={mergeClassNames(\n \"group/select w-full rounded-lg p-[2px] transition duration-300 hover:border-ds-border-accent\",\n disabled\n ? \"border-none bg-ds-surface-1\"\n : error\n ? \"border-ds-state-error-border\"\n : \"border-ds-border-2\",\n )}\n >\n <div\n className={mergeClassNames(\n \"flex w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field transition duration-400 ease-in-out\",\n isCompact\n ? \"h-9 px-2.5 py-2 text-sm\"\n : \"h-10 px-3 py-2 text-sm\",\n bgClassName,\n disabled ? \"cursor-not-allowed opacity-50\" : \"text-ds-1\",\n error\n ? \"border-ds-state-error-border text-ds-state-error-text focus-visible:ring-ds-state-error-border\"\n : \"\",\n triggerClassName,\n )}\n onKeyDown={handleKeyDown}\n role=\"button\"\n tabIndex={disabled ? -1 : 0}\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n >\n {selectedOption ? (\n <TruncatedText\n as=\"span\"\n showTitleOnHover\n className=\"flex-1 text-ds-1\"\n >\n {selectedOption.label}\n </TruncatedText>\n ) : (\n <TruncatedText as=\"span\" className=\"flex-1 text-ds-2\">\n {placeholder}\n </TruncatedText>\n )}\n\n <span\n className={mergeClassNames(\n \"ms-2 shrink-0 text-ds-2 transition-transform duration-300\",\n open ? \"rotate-180\" : \"rotate-0\",\n )}\n >\n <ChevronDownIcon\n width={24}\n height={24}\n color=\"currentColor\"\n className={isCompact ? \"h-4 w-4\" : \"h-5 w-5\"}\n />\n </span>\n </div>\n </motion.div>\n }\n >\n {!disabled ? (\n <>\n {options.length === 0 ? (\n <div className=\"px-3 py-2 text-ds-2\">{noOptionsText}</div>\n ) : null}\n\n {options.map((option) => (\n <div\n key={option.value}\n ref={option.value === value ? selectedOptionRef : null}\n className={mergeClassNames(\n \"mx-1 my-1 flex cursor-pointer items-center rounded-md text-ds-1 transition\",\n isCompact\n ? \"gap-1.5 px-2.5 py-2 text-sm\"\n : \"gap-2 px-3 py-2 text-sm\",\n option.value === value\n ? \"bg-ds-accent-subtle font-semibold text-ds-1\"\n : \"\",\n \"hover:bg-ds-accent hover:text-ds-on-accent\",\n optionClassName,\n )}\n onClick={() => handleSelect(option.value)}\n >\n {selectionIndicator === \"check\" ? (\n <span\n className={mergeClassNames(\n \"flex items-center justify-center\",\n isCompact ? \"w-4\" : \"w-5\",\n )}\n >\n {option.value === value ? (\n <CheckIcon\n className=\"text-ds-1\"\n width={isCompact ? 16 : 18}\n height={isCompact ? 16 : 18}\n />\n ) : null}\n </span>\n ) : null}\n <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n {option.label}\n </TruncatedText>\n </div>\n ))}\n </>\n ) : null}\n </DropdownMenu>\n\n {error ? (\n <p className=\"mt-1 text-sm font-medium text-ds-state-error-text\">\n {error}\n </p>\n ) : null}\n {helperText && !error ? (\n <p className=\"mt-1 text-sm text-ds-2\">{helperText}</p>\n ) : null}\n </div>\n );\n});\n\nSelect.displayName = \"Select\";\n"],"mappings":"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"}
@@ -2,7 +2,7 @@ require("./chunk-B_GkZjkl.cjs");
2
2
  const require_utils = require("./utils-LRbEQHYs.cjs");
3
3
  const require_truncated_text = require("./truncated-text-BIXqNfOL.cjs");
4
4
  const require_icons = require("./icons-CRanVZB1.cjs");
5
- const require_DropdownMenu = require("./DropdownMenu-CeD9kl_N.cjs");
5
+ const require_DropdownMenu = require("./DropdownMenu-BDrNYO-D.cjs");
6
6
  let react = require("react");
7
7
  let react_jsx_runtime = require("react/jsx-runtime");
8
8
  let framer_motion = require("framer-motion");
@@ -91,7 +91,7 @@ var Select = (0, react.forwardRef)(function SelectComponent({ className = "", co
91
91
  }
92
92
  setOpen(nextOpen);
93
93
  },
94
- panelClassName: require_utils.mergeClassNames(" left-0 top-[40px] z-20 mt-1 flex flex-col overflow-auto rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition", isCompact ? "max-h-56" : "max-h-60", dropdownClassName),
94
+ panelClassName: require_utils.mergeClassNames("start-0 top-[40px] z-20 mt-1 flex w-full flex-col overflow-auto rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition", isCompact ? "max-h-56" : "max-h-60", dropdownClassName),
95
95
  animationClassName: "origin-top-left",
96
96
  trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
97
97
  style: { backgroundImage: disabled ? "none" : framer_motion.useMotionTemplate`
@@ -122,7 +122,7 @@ var Select = (0, react.forwardRef)(function SelectComponent({ className = "", co
122
122
  className: "flex-1 text-ds-2",
123
123
  children: placeholder
124
124
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
125
- className: require_utils.mergeClassNames("ml-2 shrink-0 text-ds-2 transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
125
+ className: require_utils.mergeClassNames("ms-2 shrink-0 text-ds-2 transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
126
126
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.ChevronDownIcon, {
127
127
  width: 24,
128
128
  height: 24,
@@ -174,4 +174,4 @@ Object.defineProperty(exports, "Select", {
174
174
  }
175
175
  });
176
176
 
177
- //# sourceMappingURL=select-BwB9MsSv.cjs.map
177
+ //# sourceMappingURL=select-bZ9WqLOc.cjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select-bZ9WqLOc.cjs","names":[],"sources":["../../src/components/forms/select/Select.tsx"],"sourcesContent":["import {\n forwardRef,\n useEffect,\n useRef,\n useState,\n type ChangeEvent,\n type ForwardedRef,\n type KeyboardEvent,\n type MouseEvent as ReactMouseEvent,\n} from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { CheckIcon, ChevronDownIcon } from \"../../icons\";\nimport { DropdownMenu } from \"../../overlays/dropdown-menu\";\nimport { TruncatedText } from \"../../typography/truncated-text\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type { SelectProps } from \"./types\";\n\nexport const Select = forwardRef(function SelectComponent(\n {\n className = \"\",\n containerClassName = \"\",\n triggerClassName = \"\",\n dropdownClassName = \"\",\n optionClassName = \"\",\n label,\n error,\n helperText,\n options,\n value,\n onChange,\n placeholder = \"Select...\",\n noOptionsText = \"No options\",\n disabled,\n bgClassName = \"bg-ds-surface-1\",\n size = \"default\",\n selectionIndicator = \"check\",\n ...props\n }: SelectProps,\n ref: ForwardedRef<HTMLSelectElement>,\n) {\n const [open, setOpen] = useState(false);\n const [visible, setVisible] = useState(false);\n const hiddenSelectRef = useRef<HTMLSelectElement>(null);\n const selectedOptionRef = useRef<HTMLDivElement>(null);\n const mouseX = useMotionValue(0);\n const mouseY = useMotionValue(0);\n const radius = 100;\n const isCompact = size === \"compact\";\n const selectedOption = options.find((option) => option.value === value);\n\n useEffect(() => {\n if (typeof ref === \"function\") {\n ref(hiddenSelectRef.current);\n return;\n }\n\n if (ref) {\n ref.current = hiddenSelectRef.current;\n }\n }, [ref]);\n\n useEffect(() => {\n if (!open || !selectedOptionRef.current) {\n return;\n }\n\n const frameId = window.requestAnimationFrame(() => {\n selectedOptionRef.current?.scrollIntoView({ block: \"nearest\" });\n });\n\n return () => {\n window.cancelAnimationFrame(frameId);\n };\n }, [open, value]);\n\n const handleMouseMove = (event: ReactMouseEvent<HTMLDivElement>) => {\n const { left, top } = event.currentTarget.getBoundingClientRect();\n mouseX.set(event.clientX - left);\n mouseY.set(event.clientY - top);\n };\n\n const handleSelect = (optionValue: string) => {\n if (onChange && hiddenSelectRef.current) {\n const syntheticEvent = {\n target: { value: optionValue, name: props.name },\n currentTarget: { value: optionValue, name: props.name },\n } as ChangeEvent<HTMLSelectElement>;\n\n onChange(syntheticEvent);\n }\n\n setOpen(false);\n };\n\n const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n if (disabled) {\n return;\n }\n\n if (event.key === \"Enter\" || event.key === \" \") {\n event.preventDefault();\n setOpen((current) => !current);\n }\n\n if (event.key === \"Escape\") {\n setOpen(false);\n }\n };\n\n return (\n <div\n className={mergeClassNames(\n \"w-full\",\n isCompact ? \"min-w-0\" : \"min-w-48\",\n containerClassName,\n )}\n >\n {label ? (\n <label className=\"mb-2 block text-sm leading-none font-medium text-ds-1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n {label}\n </label>\n ) : null}\n\n <select\n ref={hiddenSelectRef}\n className=\"sr-only\"\n value={value}\n onChange={onChange}\n disabled={disabled}\n {...props}\n >\n <option value=\"\">{placeholder}</option>\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </select>\n\n <DropdownMenu\n className={mergeClassNames(\"w-full\", className)}\n open={open}\n onOpenChange={(nextOpen) => {\n if (disabled) {\n setOpen(false);\n return;\n }\n\n setOpen(nextOpen);\n }}\n panelClassName={mergeClassNames(\n \"start-0 top-[40px] z-20 mt-1 flex w-full flex-col overflow-auto rounded-lg border border-ds-border-2 bg-ds-surface-1 shadow-3 backdrop-blur-xl transition\",\n isCompact ? \"max-h-56\" : \"max-h-60\",\n dropdownClassName,\n )}\n animationClassName=\"origin-top-left\"\n trigger={\n <motion.div\n style={{\n backgroundImage: disabled\n ? \"none\"\n : useMotionTemplate`\n radial-gradient(\n ${visible ? `${radius}px` : \"0px\"} circle at ${mouseX}px ${mouseY}px,\n var(--ds-color-accent),\n transparent 90%\n )\n `,\n }}\n onMouseMove={!disabled ? handleMouseMove : undefined}\n onMouseEnter={!disabled ? () => setVisible(true) : undefined}\n onMouseLeave={!disabled ? () => setVisible(false) : undefined}\n className={mergeClassNames(\n \"group/select w-full rounded-lg p-[2px] transition duration-300 hover:border-ds-border-accent\",\n disabled\n ? \"border-none bg-ds-surface-1\"\n : error\n ? \"border-ds-state-error-border\"\n : \"border-ds-border-2\",\n )}\n >\n <div\n className={mergeClassNames(\n \"flex w-full cursor-pointer items-center justify-between rounded-md border border-ds-border-field transition duration-400 ease-in-out\",\n isCompact\n ? \"h-9 px-2.5 py-2 text-sm\"\n : \"h-10 px-3 py-2 text-sm\",\n bgClassName,\n disabled ? \"cursor-not-allowed opacity-50\" : \"text-ds-1\",\n error\n ? \"border-ds-state-error-border text-ds-state-error-text focus-visible:ring-ds-state-error-border\"\n : \"\",\n triggerClassName,\n )}\n onKeyDown={handleKeyDown}\n role=\"button\"\n tabIndex={disabled ? -1 : 0}\n aria-haspopup=\"listbox\"\n aria-expanded={open}\n >\n {selectedOption ? (\n <TruncatedText\n as=\"span\"\n showTitleOnHover\n className=\"flex-1 text-ds-1\"\n >\n {selectedOption.label}\n </TruncatedText>\n ) : (\n <TruncatedText as=\"span\" className=\"flex-1 text-ds-2\">\n {placeholder}\n </TruncatedText>\n )}\n\n <span\n className={mergeClassNames(\n \"ms-2 shrink-0 text-ds-2 transition-transform duration-300\",\n open ? \"rotate-180\" : \"rotate-0\",\n )}\n >\n <ChevronDownIcon\n width={24}\n height={24}\n color=\"currentColor\"\n className={isCompact ? \"h-4 w-4\" : \"h-5 w-5\"}\n />\n </span>\n </div>\n </motion.div>\n }\n >\n {!disabled ? (\n <>\n {options.length === 0 ? (\n <div className=\"px-3 py-2 text-ds-2\">{noOptionsText}</div>\n ) : null}\n\n {options.map((option) => (\n <div\n key={option.value}\n ref={option.value === value ? selectedOptionRef : null}\n className={mergeClassNames(\n \"mx-1 my-1 flex cursor-pointer items-center rounded-md text-ds-1 transition\",\n isCompact\n ? \"gap-1.5 px-2.5 py-2 text-sm\"\n : \"gap-2 px-3 py-2 text-sm\",\n option.value === value\n ? \"bg-ds-accent-subtle font-semibold text-ds-1\"\n : \"\",\n \"hover:bg-ds-accent hover:text-ds-on-accent\",\n optionClassName,\n )}\n onClick={() => handleSelect(option.value)}\n >\n {selectionIndicator === \"check\" ? (\n <span\n className={mergeClassNames(\n \"flex items-center justify-center\",\n isCompact ? \"w-4\" : \"w-5\",\n )}\n >\n {option.value === value ? (\n <CheckIcon\n className=\"text-ds-1\"\n width={isCompact ? 16 : 18}\n height={isCompact ? 16 : 18}\n />\n ) : null}\n </span>\n ) : null}\n <TruncatedText as=\"span\" showTitleOnHover className=\"flex-1\">\n {option.label}\n </TruncatedText>\n </div>\n ))}\n </>\n ) : null}\n </DropdownMenu>\n\n {error ? (\n <p className=\"mt-1 text-sm font-medium text-ds-state-error-text\">\n {error}\n </p>\n ) : null}\n {helperText && !error ? (\n <p className=\"mt-1 text-sm text-ds-2\">{helperText}</p>\n ) : null}\n </div>\n );\n});\n\nSelect.displayName = \"Select\";\n"],"mappings":"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"}
@@ -1,7 +1,7 @@
1
1
  import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
2
2
  import { S as BellIcon, x as FullScreenIcon } from "./icons-bx3nrxNv.mjs";
3
- import { t as Button } from "./button-DddUhuR-.mjs";
4
- import { t as DropdownMenu } from "./DropdownMenu-CBdZoVQs.mjs";
3
+ import { t as Button } from "./button-A6UTvrOu.mjs";
4
+ import { t as DropdownMenu } from "./DropdownMenu-BtTOri-A.mjs";
5
5
  import { t as Typography } from "./typography-Ct-jDJP3.mjs";
6
6
  import { t as SunToMoonButton } from "./SunToMoonButton-BkEfkElJ.mjs";
7
7
  import { useCallback, useEffect, useMemo, useState } from "react";
@@ -516,4 +516,4 @@ function DashboardSidebarShell({ items, open, defaultOpen = false, onOpenChange,
516
516
  //#endregion
517
517
  export { HamburgerIcon as a, NavLink as i, Sidebar as n, SidebarLinks as r, DashboardSidebarShell as t };
518
518
 
519
- //# sourceMappingURL=sidebar-CCKZ_NMW.mjs.map
519
+ //# sourceMappingURL=sidebar-DYEDFV2u.mjs.map