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.
- package/README.md +14 -0
- package/dist/button.cjs +1 -1
- package/dist/button.mjs +1 -1
- package/dist/calendar.cjs +1 -1
- package/dist/calendar.mjs +1 -1
- package/dist/charts.cjs +1 -1
- package/dist/charts.mjs +1 -1
- package/dist/chip.cjs +1 -1
- package/dist/chip.mjs +1 -1
- package/dist/chunks/{DropdownMenu-CeD9kl_N.cjs → DropdownMenu-BDrNYO-D.cjs} +5 -4
- package/dist/chunks/DropdownMenu-BDrNYO-D.cjs.map +1 -0
- package/dist/chunks/{DropdownMenu-CBdZoVQs.mjs → DropdownMenu-BtTOri-A.mjs} +5 -4
- package/dist/chunks/DropdownMenu-BtTOri-A.mjs.map +1 -0
- package/dist/chunks/{tooltip-PJaQa8_l.cjs → Tooltip-DD30yj3A.cjs} +1 -1
- package/dist/chunks/{tooltip-PJaQa8_l.cjs.map → Tooltip-DD30yj3A.cjs.map} +1 -1
- package/dist/chunks/{tooltip-CmB8xKOF.mjs → Tooltip-DK3B879v.mjs} +1 -1
- package/dist/chunks/{tooltip-CmB8xKOF.mjs.map → Tooltip-DK3B879v.mjs.map} +1 -1
- package/dist/chunks/{button-DddUhuR-.mjs → button-A6UTvrOu.mjs} +2 -2
- package/dist/chunks/{button-DddUhuR-.mjs.map → button-A6UTvrOu.mjs.map} +1 -1
- package/dist/chunks/{button-xqernofO.cjs → button-C4MXPxsC.cjs} +2 -2
- package/dist/chunks/{button-xqernofO.cjs.map → button-C4MXPxsC.cjs.map} +1 -1
- package/dist/chunks/{calendar-BVuDnWUc.mjs → calendar-5XzPqKbE.mjs} +4 -4
- package/dist/chunks/calendar-5XzPqKbE.mjs.map +1 -0
- package/dist/chunks/{calendar-CYxkfvDv.cjs → calendar-CQJgQ5H_.cjs} +4 -4
- package/dist/chunks/calendar-CQJgQ5H_.cjs.map +1 -0
- package/dist/chunks/{charts-DuVZD7el.cjs → charts-BmIV-mJy.cjs} +40 -9
- package/dist/chunks/charts-BmIV-mJy.cjs.map +1 -0
- package/dist/chunks/{charts-mfevxJSU.mjs → charts-DkVu0rFc.mjs} +40 -9
- package/dist/chunks/charts-DkVu0rFc.mjs.map +1 -0
- package/dist/chunks/{chip-BDrpg5Ux.cjs → chip-B0YzBwkz.cjs} +7 -4
- package/dist/chunks/chip-B0YzBwkz.cjs.map +1 -0
- package/dist/chunks/{chip-Dt0p0_zd.mjs → chip-CqcdcSs2.mjs} +7 -4
- package/dist/chunks/chip-CqcdcSs2.mjs.map +1 -0
- package/dist/chunks/color-palette-C3lesasJ.mjs +329 -0
- package/dist/chunks/color-palette-C3lesasJ.mjs.map +1 -0
- package/dist/chunks/color-palette-pLh6En3n.cjs +384 -0
- package/dist/chunks/color-palette-pLh6En3n.cjs.map +1 -0
- package/dist/chunks/{combobox-0n1_tB8L.mjs → combobox-B6yk5U82.mjs} +4 -4
- package/dist/chunks/combobox-B6yk5U82.mjs.map +1 -0
- package/dist/chunks/{combobox-Ca7-BcLO.cjs → combobox-CtNrGmuR.cjs} +4 -4
- package/dist/chunks/combobox-CtNrGmuR.cjs.map +1 -0
- package/dist/chunks/{data-table-Bt2c9dog.mjs → data-table-Dtf6lKpp.mjs} +11 -11
- package/dist/chunks/{data-table-Bt2c9dog.mjs.map → data-table-Dtf6lKpp.mjs.map} +1 -1
- package/dist/chunks/{data-table-DhCpQjdf.cjs → data-table-fAEuevPn.cjs} +12 -12
- package/dist/chunks/{data-table-DhCpQjdf.cjs.map → data-table-fAEuevPn.cjs.map} +1 -1
- package/dist/chunks/{date-picker-CDACysPq.mjs → date-picker-BmQ0rgwH.mjs} +2 -2
- package/dist/chunks/{date-picker-CDACysPq.mjs.map → date-picker-BmQ0rgwH.mjs.map} +1 -1
- package/dist/chunks/{date-picker-duwF35Rk.cjs → date-picker-qpUZMtZC.cjs} +2 -2
- package/dist/chunks/{date-picker-duwF35Rk.cjs.map → date-picker-qpUZMtZC.cjs.map} +1 -1
- package/dist/chunks/{form-CvNNjA1i.mjs → form-CtZ6U-_B.mjs} +2 -2
- package/dist/chunks/{form-CvNNjA1i.mjs.map → form-CtZ6U-_B.mjs.map} +1 -1
- package/dist/chunks/{form-C_JxqsSZ.cjs → form-X6Vyaavl.cjs} +2 -2
- package/dist/chunks/{form-C_JxqsSZ.cjs.map → form-X6Vyaavl.cjs.map} +1 -1
- package/dist/chunks/{input-BvTrWtRn.mjs → input-Bqo9Q5zF.mjs} +33 -12
- package/dist/chunks/input-Bqo9Q5zF.mjs.map +1 -0
- package/dist/chunks/{input-wAznik-_.cjs → input-DkCPyWXi.cjs} +33 -12
- package/dist/chunks/input-DkCPyWXi.cjs.map +1 -0
- package/dist/chunks/{label-CxmbGh0l.cjs → label-BKzqfAAq.cjs} +2 -2
- package/dist/chunks/{label-CxmbGh0l.cjs.map → label-BKzqfAAq.cjs.map} +1 -1
- package/dist/chunks/{label-C1Ekt3j2.mjs → label-Drxg0cG2.mjs} +2 -2
- package/dist/chunks/{label-C1Ekt3j2.mjs.map → label-Drxg0cG2.mjs.map} +1 -1
- package/dist/chunks/{multi-select-combobox-CdPcvP_S.cjs → multi-select-combobox-C0DoDzxQ.cjs} +5 -5
- package/dist/chunks/multi-select-combobox-C0DoDzxQ.cjs.map +1 -0
- package/dist/chunks/{multi-select-combobox-_nuc3cZ3.mjs → multi-select-combobox-Do23ZfOQ.mjs} +5 -5
- package/dist/chunks/multi-select-combobox-Do23ZfOQ.mjs.map +1 -0
- package/dist/chunks/{password-strength-meter-BEx94cfy.mjs → password-strength-meter-BsvqQBAg.mjs} +3 -3
- package/dist/chunks/{password-strength-meter-BEx94cfy.mjs.map → password-strength-meter-BsvqQBAg.mjs.map} +1 -1
- package/dist/chunks/{password-strength-meter-BNnmSgLh.cjs → password-strength-meter-DCi_BP7e.cjs} +3 -3
- package/dist/chunks/{password-strength-meter-BNnmSgLh.cjs.map → password-strength-meter-DCi_BP7e.cjs.map} +1 -1
- package/dist/chunks/radio-CuiM_gDv.mjs +50 -0
- package/dist/chunks/radio-CuiM_gDv.mjs.map +1 -0
- package/dist/chunks/radio-zx9xEW_C.cjs +56 -0
- package/dist/chunks/radio-zx9xEW_C.cjs.map +1 -0
- package/dist/chunks/{select-B3tfHqQo.mjs → select-CUaSNR09.mjs} +4 -4
- package/dist/chunks/select-CUaSNR09.mjs.map +1 -0
- package/dist/chunks/{select-BwB9MsSv.cjs → select-bZ9WqLOc.cjs} +4 -4
- package/dist/chunks/select-bZ9WqLOc.cjs.map +1 -0
- package/dist/chunks/{sidebar-CCKZ_NMW.mjs → sidebar-DYEDFV2u.mjs} +3 -3
- package/dist/chunks/{sidebar-CCKZ_NMW.mjs.map → sidebar-DYEDFV2u.mjs.map} +1 -1
- package/dist/chunks/{sidebar-WG9Wnwnv.cjs → sidebar-Kkr45nuN.cjs} +3 -3
- package/dist/chunks/{sidebar-WG9Wnwnv.cjs.map → sidebar-Kkr45nuN.cjs.map} +1 -1
- package/dist/chunks/{stepper-CvuyKYXC.cjs → stepper-DepvEGfr.cjs} +2 -2
- package/dist/chunks/{stepper-CvuyKYXC.cjs.map → stepper-DepvEGfr.cjs.map} +1 -1
- package/dist/chunks/{stepper-CjywisS9.mjs → stepper-Jv5OS1nY.mjs} +2 -2
- package/dist/chunks/{stepper-CjywisS9.mjs.map → stepper-Jv5OS1nY.mjs.map} +1 -1
- package/dist/chunks/{sun-to-moon-button-azXKWDYT.mjs → sun-to-moon-button-BJtBEaa3.mjs} +69 -50
- package/dist/chunks/sun-to-moon-button-BJtBEaa3.mjs.map +1 -0
- package/dist/chunks/{sun-to-moon-button-A__wuc_4.cjs → sun-to-moon-button-PwgTPsTW.cjs} +69 -50
- package/dist/chunks/sun-to-moon-button-PwgTPsTW.cjs.map +1 -0
- package/dist/chunks/{switch-DPyzVrNh.cjs → switch-X3l8xnle.cjs} +10 -29
- package/dist/chunks/switch-X3l8xnle.cjs.map +1 -0
- package/dist/chunks/{switch-C1gKE0m0.mjs → switch-iPsN1NS2.mjs} +10 -29
- package/dist/chunks/switch-iPsN1NS2.mjs.map +1 -0
- package/dist/color-palette.cjs +9 -1
- package/dist/color-palette.mjs +2 -2
- package/dist/combobox.cjs +1 -1
- package/dist/combobox.mjs +1 -1
- package/dist/components/data-display/charts/BarChart.d.ts +5 -0
- package/dist/components/data-display/charts/BarChart.d.ts.map +1 -1
- package/dist/components/data-display/chip/Chip.d.ts +1 -1
- package/dist/components/data-display/chip/Chip.d.ts.map +1 -1
- package/dist/components/data-display/color-palette/ColorPalette.d.ts +24 -16
- package/dist/components/data-display/color-palette/ColorPalette.d.ts.map +1 -1
- package/dist/components/data-display/color-palette/index.d.ts +2 -1
- package/dist/components/data-display/color-palette/index.d.ts.map +1 -1
- package/dist/components/data-display/dashboard-cards/StatCard.d.ts +11 -3
- package/dist/components/data-display/dashboard-cards/StatCard.d.ts.map +1 -1
- package/dist/components/effects/sun-to-moon-button/ThemeSwitcherButtons.d.ts +16 -1
- package/dist/components/effects/sun-to-moon-button/ThemeSwitcherButtons.d.ts.map +1 -1
- package/dist/components/effects/sun-to-moon-button/index.d.ts +1 -1
- package/dist/components/effects/sun-to-moon-button/index.d.ts.map +1 -1
- package/dist/components/forms/input/Input.d.ts.map +1 -1
- package/dist/components/forms/input/types.d.ts +2 -0
- package/dist/components/forms/input/types.d.ts.map +1 -1
- package/dist/components/forms/radio/Radio.d.ts.map +1 -1
- package/dist/components/forms/switch/Switch.d.ts.map +1 -1
- package/dist/components/overlays/dropdown-menu/DropdownMenu.d.ts +1 -1
- package/dist/components/overlays/dropdown-menu/DropdownMenu.d.ts.map +1 -1
- package/dist/components/overlays/dropdown-menu/types.d.ts +1 -0
- package/dist/components/overlays/dropdown-menu/types.d.ts.map +1 -1
- package/dist/data-table.cjs +1 -1
- package/dist/data-table.mjs +1 -1
- package/dist/date-picker.cjs +1 -1
- package/dist/date-picker.mjs +1 -1
- package/dist/form.cjs +1 -1
- package/dist/form.mjs +1 -1
- package/dist/index.cjs +81 -67
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +3 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +74 -68
- package/dist/index.mjs.map +1 -1
- package/dist/input.cjs +1 -1
- package/dist/input.mjs +1 -1
- package/dist/label.cjs +1 -1
- package/dist/label.mjs +1 -1
- package/dist/multi-select-combobox.cjs +1 -1
- package/dist/multi-select-combobox.mjs +1 -1
- package/dist/password-strength-meter.cjs +1 -1
- package/dist/password-strength-meter.mjs +1 -1
- package/dist/radio.cjs +1 -1
- package/dist/radio.mjs +1 -1
- package/dist/select.cjs +1 -1
- package/dist/select.mjs +1 -1
- package/dist/sidebar.cjs +1 -1
- package/dist/sidebar.mjs +1 -1
- package/dist/stepper.cjs +1 -1
- package/dist/stepper.mjs +1 -1
- package/dist/sun-to-moon-button.cjs +1 -1
- package/dist/sun-to-moon-button.mjs +1 -1
- package/dist/switch.cjs +1 -1
- package/dist/switch.mjs +1 -1
- package/dist/tooltip.cjs +2 -2
- package/dist/tooltip.mjs +1 -1
- package/package.json +5 -5
- package/dist/chunks/DropdownMenu-CBdZoVQs.mjs.map +0 -1
- package/dist/chunks/DropdownMenu-CeD9kl_N.cjs.map +0 -1
- package/dist/chunks/calendar-BVuDnWUc.mjs.map +0 -1
- package/dist/chunks/calendar-CYxkfvDv.cjs.map +0 -1
- package/dist/chunks/charts-DuVZD7el.cjs.map +0 -1
- package/dist/chunks/charts-mfevxJSU.mjs.map +0 -1
- package/dist/chunks/chip-BDrpg5Ux.cjs.map +0 -1
- package/dist/chunks/chip-Dt0p0_zd.mjs.map +0 -1
- package/dist/chunks/color-palette-BmQC14gE.cjs +0 -789
- package/dist/chunks/color-palette-BmQC14gE.cjs.map +0 -1
- package/dist/chunks/color-palette-DnX1sODj.mjs +0 -782
- package/dist/chunks/color-palette-DnX1sODj.mjs.map +0 -1
- package/dist/chunks/combobox-0n1_tB8L.mjs.map +0 -1
- package/dist/chunks/combobox-Ca7-BcLO.cjs.map +0 -1
- package/dist/chunks/input-BvTrWtRn.mjs.map +0 -1
- package/dist/chunks/input-wAznik-_.cjs.map +0 -1
- package/dist/chunks/multi-select-combobox-CdPcvP_S.cjs.map +0 -1
- package/dist/chunks/multi-select-combobox-_nuc3cZ3.mjs.map +0 -1
- package/dist/chunks/radio-DOkKyKKL.mjs +0 -44
- package/dist/chunks/radio-DOkKyKKL.mjs.map +0 -1
- package/dist/chunks/radio-DyQ3jF-M.cjs +0 -50
- package/dist/chunks/radio-DyQ3jF-M.cjs.map +0 -1
- package/dist/chunks/select-B3tfHqQo.mjs.map +0 -1
- package/dist/chunks/select-BwB9MsSv.cjs.map +0 -1
- package/dist/chunks/sun-to-moon-button-A__wuc_4.cjs.map +0 -1
- package/dist/chunks/sun-to-moon-button-azXKWDYT.mjs.map +0 -1
- package/dist/chunks/switch-C1gKE0m0.mjs.map +0 -1
- 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
|
|
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-
|
|
26
|
+
//# sourceMappingURL=label-Drxg0cG2.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"label-
|
|
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"}
|
package/dist/chunks/{multi-select-combobox-CdPcvP_S.cjs → multi-select-combobox-C0DoDzxQ.cjs}
RENAMED
|
@@ -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-
|
|
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]
|
|
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: "
|
|
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("
|
|
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-
|
|
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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"}
|
package/dist/chunks/{multi-select-combobox-_nuc3cZ3.mjs → multi-select-combobox-Do23ZfOQ.mjs}
RENAMED
|
@@ -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-
|
|
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]
|
|
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: "
|
|
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("
|
|
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-
|
|
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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"}
|
package/dist/chunks/{password-strength-meter-BEx94cfy.mjs → password-strength-meter-BsvqQBAg.mjs}
RENAMED
|
@@ -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: "
|
|
32
|
+
className: "me-2 size-4 text-success",
|
|
33
33
|
title: "CheckIcon"
|
|
34
34
|
}) : /* @__PURE__ */ jsx(CloseIcon, {
|
|
35
|
-
className: "
|
|
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-
|
|
99
|
+
//# sourceMappingURL=password-strength-meter-BsvqQBAg.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"password-strength-meter-
|
|
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"}
|
package/dist/chunks/{password-strength-meter-BNnmSgLh.cjs → password-strength-meter-DCi_BP7e.cjs}
RENAMED
|
@@ -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: "
|
|
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: "
|
|
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-
|
|
105
|
+
//# sourceMappingURL=password-strength-meter-DCi_BP7e.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"password-strength-meter-
|
|
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-
|
|
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("
|
|
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("
|
|
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-
|
|
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-
|
|
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("
|
|
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("
|
|
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-
|
|
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-
|
|
4
|
-
import { t as DropdownMenu } from "./DropdownMenu-
|
|
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-
|
|
519
|
+
//# sourceMappingURL=sidebar-DYEDFV2u.mjs.map
|