npm - erp-pro-ui - Versions diffs - 0.1.8 → 0.2.0 - Mend

erp-pro-ui 0.1.8 → 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 (309) hide show

package/dist/chunks/{password-strength-meter-BEx94cfy.mjs → password-strength-meter-BsvqQBAg.mjs} RENAMED Viewed

@@ -29,10 +29,10 @@ var PasswordCriteria = ({ password }) => {
 		].map((item) => /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center text-xs",
 			children: [item.met ? /* @__PURE__ */ jsx(CheckIcon, {
-				className: "mr-2 size-4 text-success",
+				className: "me-2 size-4 text-success",
 				title: "CheckIcon"
 			}) : /* @__PURE__ */ jsx(CloseIcon, {
-				className: "mr-2 size-4 text-ds-3",
+				className: "me-2 size-4 text-ds-3",
 				title: "CloseIcon"
 			}), /* @__PURE__ */ jsx("span", {
 				className: item.met ? "text-success" : "text-ds-2",
@@ -96,4 +96,4 @@ function PasswordStrengthMeter({ password }) {
 //#endregion
 export { PasswordStrengthMeter as t };
-//# sourceMappingURL=password-strength-meter-BEx94cfy.mjs.map
+//# sourceMappingURL=password-strength-meter-BsvqQBAg.mjs.map

package/dist/chunks/{password-strength-meter-BEx94cfy.mjs.map → password-strength-meter-BsvqQBAg.mjs.map} RENAMED Viewed

	@@ -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;~~YATA~~;~~GACf~~;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;~~GAC5E~~,~~CAIa~~,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,~~SAPe~~;~~GACb~~;GACA;GACA;GACA;GACA;~~GACD~~,~~CACa~~,aAAa;;CAI7B,MAAM,mBAAmB,aAA6B;AAEpD,~~SADuB~~;~~GAAC~~;GAAa;GAAQ;GAAQ;GAAQ;~~GAAS~~,~~CAChD~~,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"}

package/dist/chunks/{password-strength-meter-BNnmSgLh.cjs → password-strength-meter-DCi_BP7e.cjs} RENAMED Viewed

@@ -30,10 +30,10 @@ var PasswordCriteria = ({ password }) => {
 		].map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex items-center text-xs",
 			children: [item.met ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CheckIcon, {
-				className: "mr-2 size-4 text-success",
+				className: "me-2 size-4 text-success",
 				title: "CheckIcon"
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CloseIcon, {
-				className: "mr-2 size-4 text-ds-3",
+				className: "me-2 size-4 text-ds-3",
 				title: "CloseIcon"
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: item.met ? "text-success" : "text-ds-2",
@@ -102,4 +102,4 @@ Object.defineProperty(exports, "PasswordStrengthMeter", {
 	}
 });
-//# sourceMappingURL=password-strength-meter-BNnmSgLh.cjs.map
+//# sourceMappingURL=password-strength-meter-DCi_BP7e.cjs.map

package/dist/chunks/{password-strength-meter-BNnmSgLh.cjs.map → password-strength-meter-DCi_BP7e.cjs.map} RENAMED Viewed

	@@ -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;~~YATA~~;~~GACf~~;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;~~GAC5E~~,~~CAIa~~,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,~~SAPe~~;~~GACb~~;GACA;GACA;GACA;GACA;~~GACD~~,~~CACa~~,aAAa;;CAI7B,MAAM,mBAAmB,aAA6B;AAEpD,~~SADuB~~;~~GAAC~~;GAAa;GAAQ;GAAQ;GAAQ;~~GAAS~~,~~CAChD~~,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"}

package/dist/chunks/{progress-bar-DS8KZ7eO.cjs → progress-bar-CYaBO_lS.cjs} RENAMED Viewed

@@ -1,5 +1,5 @@
 const require_chunk = require("./chunk-B_GkZjkl.cjs");
-const require_utils = require("./utils-B4SmmY4J.cjs");
+const require_utils = require("./utils-LRbEQHYs.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react, 1);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -166,4 +166,4 @@ Object.defineProperty(exports, "ProgressBar", {
 	}
 });
-//# sourceMappingURL=progress-bar-DS8KZ7eO.cjs.map
+//# sourceMappingURL=progress-bar-CYaBO_lS.cjs.map

package/dist/chunks/{progress-bar-DS8KZ7eO.cjs.map → progress-bar-CYaBO_lS.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress-bar-DS8KZ7eO.cjs","names":[],"sources":["../../src/components/data-display/progress-bar/ProgressBar.tsx","../../src/components/data-display/progress-bar/CircularProgress.tsx"],"sourcesContent":["import React from \"react\";\n\nexport type ProgressBarSize = \"sm\" \| \"md\" \| \"lg\";\nexport type ProgressBarTone =\n \| \"default\"\n \| \"success\"\n \| \"warning\"\n \| \"danger\"\n \| \"info\";\n\nexport interface ProgressBarProps {\n value: number;\n max?: number;\n label?: React.ReactNode;\n percentageLabel?: React.ReactNode;\n showPercentage?: boolean;\n size?: ProgressBarSize;\n tone?: ProgressBarTone;\n className?: string;\n trackClassName?: string;\n fillClassName?: string;\n ariaLabel?: string;\n}\n\nconst sizeStyles: Record<\n ProgressBarSize,\n {\n track: string;\n label: string;\n percentage: string;\n }\n> = {\n sm: {\n track: \"h-1.5\",\n label: \"text-xs\",\n percentage: \"text-xs\",\n },\n md: {\n track: \"h-2.5\",\n label: \"text-sm\",\n percentage: \"text-sm\",\n },\n lg: {\n track: \"h-3.5\",\n label: \"text-base\",\n percentage: \"text-base\",\n },\n};\n\nconst toneStyles: Record<\n ProgressBarTone,\n {\n color: string;\n trackBackground: string;\n }\n> = {\n default: {\n color: \"var(--ds-chart-1)\",\n trackBackground:\n \"linear-gradient(90deg, rgba(15, 23, 42, 0.08) 0%, rgba(30, 41, 59, 0.14) 100%)\",\n },\n success: {\n color: \"var(--ds-chart-3)\",\n trackBackground:\n \"linear-gradient(90deg, rgba(20, 83, 45, 0.12) 0%, rgba(34, 197, 94, 0.18) 100%)\",\n },\n warning: {\n color: \"var(--ds-chart-4)\",\n trackBackground:\n \"linear-gradient(90deg, rgba(120, 53, 15, 0.12) 0%, rgba(245, 158, 11, 0.18) 100%)\",\n },\n danger: {\n color: \"var(--ds-chart-5)\",\n trackBackground:\n \"linear-gradient(90deg, rgba(127, 29, 29, 0.12) 0%, rgba(239, 68, 68, 0.18) 100%)\",\n },\n info: {\n color: \"var(--ds-chart-2)\",\n trackBackground:\n \"linear-gradient(90deg, rgba(30, 64, 175, 0.12) 0%, rgba(59, 130, 246, 0.18) 100%)\",\n },\n};\n\nfunction clampValue(value: number, max: number): number {\n if (!Number.isFinite(value)) {\n return 0;\n }\n\n return Math.min(Math.max(value, 0), max);\n}\n\nexport default function ProgressBar({\n value,\n max = 100,\n label,\n percentageLabel,\n showPercentage = true,\n size = \"md\",\n tone = \"default\",\n className = \"\",\n trackClassName = \"\",\n fillClassName = \"\",\n ariaLabel = \"Progress\",\n}: ProgressBarProps) {\n const safeMax = Number.isFinite(max) && max > 0 ? max : 100;\n const clampedValue = clampValue(value, safeMax);\n const percentage = (clampedValue / safeMax) * 100;\n const roundedPercentage = Math.round(percentage);\n const toneStyle = toneStyles[tone];\n const resolvedPercentageLabel = percentageLabel ?? `${roundedPercentage}%`;\n\n return (\n <div className={`w-full space-y-3 ${className}`}>\n {(label \|\| showPercentage) && (\n <div className=\"flex items-center justify-between gap-4\">\n <div\n className={`font-mono font-semibold tracking-[0.08em] text-ds-1 ${sizeStyles[size].label}`}\n >\n {label}\n </div>\n {showPercentage && (\n <div\n className={`font-mono font-medium tracking-[0.08em] text-ds-2 ${sizeStyles[size].percentage}`}\n >\n {resolvedPercentageLabel}\n </div>\n )}\n </div>\n )}\n\n <div\n role=\"progressbar\"\n aria-label={ariaLabel}\n aria-valuemin={0}\n aria-valuemax={safeMax}\n aria-valuenow={Math.round(clampedValue)}\n aria-valuetext={`${roundedPercentage}%`}\n className={`relative overflow-hidden rounded-full border border-ds-border-2/50 bg-ds-surface-2/80 shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)] ${sizeStyles[size].track} ${trackClassName}`}\n style={{ background: toneStyle.trackBackground }}\n >\n <div\n className={`h-full rounded-full transition-[width,filter,box-shadow] duration-500 ease-out ${fillClassName}`}\n style={{\n width: `${percentage}%`,\n background: `linear-gradient(90deg, color-mix(in srgb, ${toneStyle.color} 68%, white 32%) 0%, ${toneStyle.color} 100%)`,\n boxShadow: `inset 0 1px 0 rgba(255,255,255,0.4), 0 0 14px color-mix(in srgb, ${toneStyle.color} 32%, transparent)`,\n filter: percentage > 0 ? \"saturate(1.05) brightness(1.02)\" : \"none\",\n }}\n />\n </div>\n </div>\n );\n}\n","import { mergeClassNames } from \"../../../utils\";\n\nexport type CircularProgressTone =\n \| \"default\"\n \| \"success\"\n \| \"warning\"\n \| \"danger\"\n \| \"info\";\n\nexport interface CircularProgressProps {\n value: number;\n max?: number;\n size?: number;\n strokeWidth?: number;\n tone?: CircularProgressTone;\n showValue?: boolean;\n valueLabel?: string;\n className?: string;\n trackClassName?: string;\n progressClassName?: string;\n ariaLabel?: string;\n}\n\nconst toneColorMap: Record<CircularProgressTone, string> = {\n default: \"var(--ds-chart-1)\",\n success: \"var(--ds-chart-3)\",\n warning: \"var(--ds-chart-4)\",\n danger: \"var(--ds-chart-5)\",\n info: \"var(--ds-chart-2)\",\n};\n\nfunction clamp(value: number, max: number): number {\n if (!Number.isFinite(value)) return 0;\n return Math.min(Math.max(value, 0), max);\n}\n\nexport default function CircularProgress({\n value,\n max = 100,\n size = 24,\n strokeWidth = 3,\n tone = \"default\",\n showValue = false,\n valueLabel,\n className,\n trackClassName,\n progressClassName,\n ariaLabel = \"Circular progress\",\n}: CircularProgressProps) {\n const safeMax = Number.isFinite(max) && max > 0 ? max : 100;\n const safeValue = clamp(value, safeMax);\n const percentage = (safeValue / safeMax) * 100;\n\n const center = size / 2;\n const radius = center - strokeWidth / 2;\n const circumference = 2 * Math.PI * radius;\n const dashOffset = circumference - (percentage / 100) * circumference;\n const label = valueLabel ?? `${Math.round(percentage)}%`;\n\n return (\n <span\n role=\"progressbar\"\n aria-label={ariaLabel}\n aria-valuemin={0}\n aria-valuemax={safeMax}\n aria-valuenow={Math.round(safeValue)}\n aria-valuetext={label}\n className={mergeClassNames(\n \"relative inline-flex items-center justify-center\",\n className,\n )}\n style={{ width: size, height: size }}\n >\n <svg\n width={size}\n height={size}\n viewBox={`0 0 ${size} ${size}`}\n className=\"-rotate-90\"\n >\n <circle\n cx={center}\n cy={center}\n r={radius}\n fill=\"none\"\n stroke=\"var(--ds-border-2)\"\n strokeOpacity={0.5}\n strokeWidth={strokeWidth}\n className={trackClassName}\n />\n <circle\n cx={center}\n cy={center}\n r={radius}\n fill=\"none\"\n stroke={toneColorMap[tone]}\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeDasharray={circumference}\n strokeDashoffset={dashOffset}\n className={mergeClassNames(\n \"transition-[stroke-dashoffset] duration-500 ease-out\",\n progressClassName,\n )}\n />\n </svg>\n\n {showValue ? (\n <span className=\"absolute text-[10px] font-semibold leading-none text-ds-1\">\n {Math.round(percentage)}\n </span>\n ) : null}\n </span>\n );\n}\n\nexport { CircularProgress };\n"],"mappings":"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"}
1	+ {"version":3,"file":"progress-bar-CYaBO_lS.cjs","names":[],"sources":["../../src/components/data-display/progress-bar/ProgressBar.tsx","../../src/components/data-display/progress-bar/CircularProgress.tsx"],"sourcesContent":["import React from \"react\";\n\nexport type ProgressBarSize = \"sm\" \| \"md\" \| \"lg\";\nexport type ProgressBarTone =\n \| \"default\"\n \| \"success\"\n \| \"warning\"\n \| \"danger\"\n \| \"info\";\n\nexport interface ProgressBarProps {\n value: number;\n max?: number;\n label?: React.ReactNode;\n percentageLabel?: React.ReactNode;\n showPercentage?: boolean;\n size?: ProgressBarSize;\n tone?: ProgressBarTone;\n className?: string;\n trackClassName?: string;\n fillClassName?: string;\n ariaLabel?: string;\n}\n\nconst sizeStyles: Record<\n ProgressBarSize,\n {\n track: string;\n label: string;\n percentage: string;\n }\n> = {\n sm: {\n track: \"h-1.5\",\n label: \"text-xs\",\n percentage: \"text-xs\",\n },\n md: {\n track: \"h-2.5\",\n label: \"text-sm\",\n percentage: \"text-sm\",\n },\n lg: {\n track: \"h-3.5\",\n label: \"text-base\",\n percentage: \"text-base\",\n },\n};\n\nconst toneStyles: Record<\n ProgressBarTone,\n {\n color: string;\n trackBackground: string;\n }\n> = {\n default: {\n color: \"var(--ds-chart-1)\",\n trackBackground:\n \"linear-gradient(90deg, rgba(15, 23, 42, 0.08) 0%, rgba(30, 41, 59, 0.14) 100%)\",\n },\n success: {\n color: \"var(--ds-chart-3)\",\n trackBackground:\n \"linear-gradient(90deg, rgba(20, 83, 45, 0.12) 0%, rgba(34, 197, 94, 0.18) 100%)\",\n },\n warning: {\n color: \"var(--ds-chart-4)\",\n trackBackground:\n \"linear-gradient(90deg, rgba(120, 53, 15, 0.12) 0%, rgba(245, 158, 11, 0.18) 100%)\",\n },\n danger: {\n color: \"var(--ds-chart-5)\",\n trackBackground:\n \"linear-gradient(90deg, rgba(127, 29, 29, 0.12) 0%, rgba(239, 68, 68, 0.18) 100%)\",\n },\n info: {\n color: \"var(--ds-chart-2)\",\n trackBackground:\n \"linear-gradient(90deg, rgba(30, 64, 175, 0.12) 0%, rgba(59, 130, 246, 0.18) 100%)\",\n },\n};\n\nfunction clampValue(value: number, max: number): number {\n if (!Number.isFinite(value)) {\n return 0;\n }\n\n return Math.min(Math.max(value, 0), max);\n}\n\nexport default function ProgressBar({\n value,\n max = 100,\n label,\n percentageLabel,\n showPercentage = true,\n size = \"md\",\n tone = \"default\",\n className = \"\",\n trackClassName = \"\",\n fillClassName = \"\",\n ariaLabel = \"Progress\",\n}: ProgressBarProps) {\n const safeMax = Number.isFinite(max) && max > 0 ? max : 100;\n const clampedValue = clampValue(value, safeMax);\n const percentage = (clampedValue / safeMax) * 100;\n const roundedPercentage = Math.round(percentage);\n const toneStyle = toneStyles[tone];\n const resolvedPercentageLabel = percentageLabel ?? `${roundedPercentage}%`;\n\n return (\n <div className={`w-full space-y-3 ${className}`}>\n {(label \|\| showPercentage) && (\n <div className=\"flex items-center justify-between gap-4\">\n <div\n className={`font-mono font-semibold tracking-[0.08em] text-ds-1 ${sizeStyles[size].label}`}\n >\n {label}\n </div>\n {showPercentage && (\n <div\n className={`font-mono font-medium tracking-[0.08em] text-ds-2 ${sizeStyles[size].percentage}`}\n >\n {resolvedPercentageLabel}\n </div>\n )}\n </div>\n )}\n\n <div\n role=\"progressbar\"\n aria-label={ariaLabel}\n aria-valuemin={0}\n aria-valuemax={safeMax}\n aria-valuenow={Math.round(clampedValue)}\n aria-valuetext={`${roundedPercentage}%`}\n className={`relative overflow-hidden rounded-full border border-ds-border-2/50 bg-ds-surface-2/80 shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)] ${sizeStyles[size].track} ${trackClassName}`}\n style={{ background: toneStyle.trackBackground }}\n >\n <div\n className={`h-full rounded-full transition-[width,filter,box-shadow] duration-500 ease-out ${fillClassName}`}\n style={{\n width: `${percentage}%`,\n background: `linear-gradient(90deg, color-mix(in srgb, ${toneStyle.color} 68%, white 32%) 0%, ${toneStyle.color} 100%)`,\n boxShadow: `inset 0 1px 0 rgba(255,255,255,0.4), 0 0 14px color-mix(in srgb, ${toneStyle.color} 32%, transparent)`,\n filter: percentage > 0 ? \"saturate(1.05) brightness(1.02)\" : \"none\",\n }}\n />\n </div>\n </div>\n );\n}\n","import { mergeClassNames } from \"../../../utils\";\n\nexport type CircularProgressTone =\n \| \"default\"\n \| \"success\"\n \| \"warning\"\n \| \"danger\"\n \| \"info\";\n\nexport interface CircularProgressProps {\n value: number;\n max?: number;\n size?: number;\n strokeWidth?: number;\n tone?: CircularProgressTone;\n showValue?: boolean;\n valueLabel?: string;\n className?: string;\n trackClassName?: string;\n progressClassName?: string;\n ariaLabel?: string;\n}\n\nconst toneColorMap: Record<CircularProgressTone, string> = {\n default: \"var(--ds-chart-1)\",\n success: \"var(--ds-chart-3)\",\n warning: \"var(--ds-chart-4)\",\n danger: \"var(--ds-chart-5)\",\n info: \"var(--ds-chart-2)\",\n};\n\nfunction clamp(value: number, max: number): number {\n if (!Number.isFinite(value)) return 0;\n return Math.min(Math.max(value, 0), max);\n}\n\nexport default function CircularProgress({\n value,\n max = 100,\n size = 24,\n strokeWidth = 3,\n tone = \"default\",\n showValue = false,\n valueLabel,\n className,\n trackClassName,\n progressClassName,\n ariaLabel = \"Circular progress\",\n}: CircularProgressProps) {\n const safeMax = Number.isFinite(max) && max > 0 ? max : 100;\n const safeValue = clamp(value, safeMax);\n const percentage = (safeValue / safeMax) * 100;\n\n const center = size / 2;\n const radius = center - strokeWidth / 2;\n const circumference = 2 * Math.PI * radius;\n const dashOffset = circumference - (percentage / 100) * circumference;\n const label = valueLabel ?? `${Math.round(percentage)}%`;\n\n return (\n <span\n role=\"progressbar\"\n aria-label={ariaLabel}\n aria-valuemin={0}\n aria-valuemax={safeMax}\n aria-valuenow={Math.round(safeValue)}\n aria-valuetext={label}\n className={mergeClassNames(\n \"relative inline-flex items-center justify-center\",\n className,\n )}\n style={{ width: size, height: size }}\n >\n <svg\n width={size}\n height={size}\n viewBox={`0 0 ${size} ${size}`}\n className=\"-rotate-90\"\n >\n <circle\n cx={center}\n cy={center}\n r={radius}\n fill=\"none\"\n stroke=\"var(--ds-border-2)\"\n strokeOpacity={0.5}\n strokeWidth={strokeWidth}\n className={trackClassName}\n />\n <circle\n cx={center}\n cy={center}\n r={radius}\n fill=\"none\"\n stroke={toneColorMap[tone]}\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeDasharray={circumference}\n strokeDashoffset={dashOffset}\n className={mergeClassNames(\n \"transition-[stroke-dashoffset] duration-500 ease-out\",\n progressClassName,\n )}\n />\n </svg>\n\n {showValue ? (\n <span className=\"absolute text-[10px] font-semibold leading-none text-ds-1\">\n {Math.round(percentage)}\n </span>\n ) : null}\n </span>\n );\n}\n\nexport { CircularProgress };\n"],"mappings":"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"}

package/dist/chunks/{progress-bar-C9O0tuZf.mjs → progress-bar-DQ5ZKk2Y.mjs} RENAMED Viewed

@@ -1,4 +1,4 @@
-import { n as mergeClassNames } from "./utils-ati1KkDb.mjs";
+import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/data-display/progress-bar/ProgressBar.tsx
@@ -153,4 +153,4 @@ function CircularProgress({ value, max = 100, size = 24, strokeWidth = 3, tone =
 //#endregion
 export { ProgressBar as n, CircularProgress as t };
-//# sourceMappingURL=progress-bar-C9O0tuZf.mjs.map
+//# sourceMappingURL=progress-bar-DQ5ZKk2Y.mjs.map

package/dist/chunks/{progress-bar-C9O0tuZf.mjs.map → progress-bar-DQ5ZKk2Y.mjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress-bar-C9O0tuZf.mjs","names":[],"sources":["../../src/components/data-display/progress-bar/ProgressBar.tsx","../../src/components/data-display/progress-bar/CircularProgress.tsx"],"sourcesContent":["import React from \"react\";\n\nexport type ProgressBarSize = \"sm\" \| \"md\" \| \"lg\";\nexport type ProgressBarTone =\n \| \"default\"\n \| \"success\"\n \| \"warning\"\n \| \"danger\"\n \| \"info\";\n\nexport interface ProgressBarProps {\n value: number;\n max?: number;\n label?: React.ReactNode;\n percentageLabel?: React.ReactNode;\n showPercentage?: boolean;\n size?: ProgressBarSize;\n tone?: ProgressBarTone;\n className?: string;\n trackClassName?: string;\n fillClassName?: string;\n ariaLabel?: string;\n}\n\nconst sizeStyles: Record<\n ProgressBarSize,\n {\n track: string;\n label: string;\n percentage: string;\n }\n> = {\n sm: {\n track: \"h-1.5\",\n label: \"text-xs\",\n percentage: \"text-xs\",\n },\n md: {\n track: \"h-2.5\",\n label: \"text-sm\",\n percentage: \"text-sm\",\n },\n lg: {\n track: \"h-3.5\",\n label: \"text-base\",\n percentage: \"text-base\",\n },\n};\n\nconst toneStyles: Record<\n ProgressBarTone,\n {\n color: string;\n trackBackground: string;\n }\n> = {\n default: {\n color: \"var(--ds-chart-1)\",\n trackBackground:\n \"linear-gradient(90deg, rgba(15, 23, 42, 0.08) 0%, rgba(30, 41, 59, 0.14) 100%)\",\n },\n success: {\n color: \"var(--ds-chart-3)\",\n trackBackground:\n \"linear-gradient(90deg, rgba(20, 83, 45, 0.12) 0%, rgba(34, 197, 94, 0.18) 100%)\",\n },\n warning: {\n color: \"var(--ds-chart-4)\",\n trackBackground:\n \"linear-gradient(90deg, rgba(120, 53, 15, 0.12) 0%, rgba(245, 158, 11, 0.18) 100%)\",\n },\n danger: {\n color: \"var(--ds-chart-5)\",\n trackBackground:\n \"linear-gradient(90deg, rgba(127, 29, 29, 0.12) 0%, rgba(239, 68, 68, 0.18) 100%)\",\n },\n info: {\n color: \"var(--ds-chart-2)\",\n trackBackground:\n \"linear-gradient(90deg, rgba(30, 64, 175, 0.12) 0%, rgba(59, 130, 246, 0.18) 100%)\",\n },\n};\n\nfunction clampValue(value: number, max: number): number {\n if (!Number.isFinite(value)) {\n return 0;\n }\n\n return Math.min(Math.max(value, 0), max);\n}\n\nexport default function ProgressBar({\n value,\n max = 100,\n label,\n percentageLabel,\n showPercentage = true,\n size = \"md\",\n tone = \"default\",\n className = \"\",\n trackClassName = \"\",\n fillClassName = \"\",\n ariaLabel = \"Progress\",\n}: ProgressBarProps) {\n const safeMax = Number.isFinite(max) && max > 0 ? max : 100;\n const clampedValue = clampValue(value, safeMax);\n const percentage = (clampedValue / safeMax) * 100;\n const roundedPercentage = Math.round(percentage);\n const toneStyle = toneStyles[tone];\n const resolvedPercentageLabel = percentageLabel ?? `${roundedPercentage}%`;\n\n return (\n <div className={`w-full space-y-3 ${className}`}>\n {(label \|\| showPercentage) && (\n <div className=\"flex items-center justify-between gap-4\">\n <div\n className={`font-mono font-semibold tracking-[0.08em] text-ds-1 ${sizeStyles[size].label}`}\n >\n {label}\n </div>\n {showPercentage && (\n <div\n className={`font-mono font-medium tracking-[0.08em] text-ds-2 ${sizeStyles[size].percentage}`}\n >\n {resolvedPercentageLabel}\n </div>\n )}\n </div>\n )}\n\n <div\n role=\"progressbar\"\n aria-label={ariaLabel}\n aria-valuemin={0}\n aria-valuemax={safeMax}\n aria-valuenow={Math.round(clampedValue)}\n aria-valuetext={`${roundedPercentage}%`}\n className={`relative overflow-hidden rounded-full border border-ds-border-2/50 bg-ds-surface-2/80 shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)] ${sizeStyles[size].track} ${trackClassName}`}\n style={{ background: toneStyle.trackBackground }}\n >\n <div\n className={`h-full rounded-full transition-[width,filter,box-shadow] duration-500 ease-out ${fillClassName}`}\n style={{\n width: `${percentage}%`,\n background: `linear-gradient(90deg, color-mix(in srgb, ${toneStyle.color} 68%, white 32%) 0%, ${toneStyle.color} 100%)`,\n boxShadow: `inset 0 1px 0 rgba(255,255,255,0.4), 0 0 14px color-mix(in srgb, ${toneStyle.color} 32%, transparent)`,\n filter: percentage > 0 ? \"saturate(1.05) brightness(1.02)\" : \"none\",\n }}\n />\n </div>\n </div>\n );\n}\n","import { mergeClassNames } from \"../../../utils\";\n\nexport type CircularProgressTone =\n \| \"default\"\n \| \"success\"\n \| \"warning\"\n \| \"danger\"\n \| \"info\";\n\nexport interface CircularProgressProps {\n value: number;\n max?: number;\n size?: number;\n strokeWidth?: number;\n tone?: CircularProgressTone;\n showValue?: boolean;\n valueLabel?: string;\n className?: string;\n trackClassName?: string;\n progressClassName?: string;\n ariaLabel?: string;\n}\n\nconst toneColorMap: Record<CircularProgressTone, string> = {\n default: \"var(--ds-chart-1)\",\n success: \"var(--ds-chart-3)\",\n warning: \"var(--ds-chart-4)\",\n danger: \"var(--ds-chart-5)\",\n info: \"var(--ds-chart-2)\",\n};\n\nfunction clamp(value: number, max: number): number {\n if (!Number.isFinite(value)) return 0;\n return Math.min(Math.max(value, 0), max);\n}\n\nexport default function CircularProgress({\n value,\n max = 100,\n size = 24,\n strokeWidth = 3,\n tone = \"default\",\n showValue = false,\n valueLabel,\n className,\n trackClassName,\n progressClassName,\n ariaLabel = \"Circular progress\",\n}: CircularProgressProps) {\n const safeMax = Number.isFinite(max) && max > 0 ? max : 100;\n const safeValue = clamp(value, safeMax);\n const percentage = (safeValue / safeMax) * 100;\n\n const center = size / 2;\n const radius = center - strokeWidth / 2;\n const circumference = 2 * Math.PI * radius;\n const dashOffset = circumference - (percentage / 100) * circumference;\n const label = valueLabel ?? `${Math.round(percentage)}%`;\n\n return (\n <span\n role=\"progressbar\"\n aria-label={ariaLabel}\n aria-valuemin={0}\n aria-valuemax={safeMax}\n aria-valuenow={Math.round(safeValue)}\n aria-valuetext={label}\n className={mergeClassNames(\n \"relative inline-flex items-center justify-center\",\n className,\n )}\n style={{ width: size, height: size }}\n >\n <svg\n width={size}\n height={size}\n viewBox={`0 0 ${size} ${size}`}\n className=\"-rotate-90\"\n >\n <circle\n cx={center}\n cy={center}\n r={radius}\n fill=\"none\"\n stroke=\"var(--ds-border-2)\"\n strokeOpacity={0.5}\n strokeWidth={strokeWidth}\n className={trackClassName}\n />\n <circle\n cx={center}\n cy={center}\n r={radius}\n fill=\"none\"\n stroke={toneColorMap[tone]}\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeDasharray={circumference}\n strokeDashoffset={dashOffset}\n className={mergeClassNames(\n \"transition-[stroke-dashoffset] duration-500 ease-out\",\n progressClassName,\n )}\n />\n </svg>\n\n {showValue ? (\n <span className=\"absolute text-[10px] font-semibold leading-none text-ds-1\">\n {Math.round(percentage)}\n </span>\n ) : null}\n </span>\n );\n}\n\nexport { CircularProgress };\n"],"mappings":"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"}
1	+ {"version":3,"file":"progress-bar-DQ5ZKk2Y.mjs","names":[],"sources":["../../src/components/data-display/progress-bar/ProgressBar.tsx","../../src/components/data-display/progress-bar/CircularProgress.tsx"],"sourcesContent":["import React from \"react\";\n\nexport type ProgressBarSize = \"sm\" \| \"md\" \| \"lg\";\nexport type ProgressBarTone =\n \| \"default\"\n \| \"success\"\n \| \"warning\"\n \| \"danger\"\n \| \"info\";\n\nexport interface ProgressBarProps {\n value: number;\n max?: number;\n label?: React.ReactNode;\n percentageLabel?: React.ReactNode;\n showPercentage?: boolean;\n size?: ProgressBarSize;\n tone?: ProgressBarTone;\n className?: string;\n trackClassName?: string;\n fillClassName?: string;\n ariaLabel?: string;\n}\n\nconst sizeStyles: Record<\n ProgressBarSize,\n {\n track: string;\n label: string;\n percentage: string;\n }\n> = {\n sm: {\n track: \"h-1.5\",\n label: \"text-xs\",\n percentage: \"text-xs\",\n },\n md: {\n track: \"h-2.5\",\n label: \"text-sm\",\n percentage: \"text-sm\",\n },\n lg: {\n track: \"h-3.5\",\n label: \"text-base\",\n percentage: \"text-base\",\n },\n};\n\nconst toneStyles: Record<\n ProgressBarTone,\n {\n color: string;\n trackBackground: string;\n }\n> = {\n default: {\n color: \"var(--ds-chart-1)\",\n trackBackground:\n \"linear-gradient(90deg, rgba(15, 23, 42, 0.08) 0%, rgba(30, 41, 59, 0.14) 100%)\",\n },\n success: {\n color: \"var(--ds-chart-3)\",\n trackBackground:\n \"linear-gradient(90deg, rgba(20, 83, 45, 0.12) 0%, rgba(34, 197, 94, 0.18) 100%)\",\n },\n warning: {\n color: \"var(--ds-chart-4)\",\n trackBackground:\n \"linear-gradient(90deg, rgba(120, 53, 15, 0.12) 0%, rgba(245, 158, 11, 0.18) 100%)\",\n },\n danger: {\n color: \"var(--ds-chart-5)\",\n trackBackground:\n \"linear-gradient(90deg, rgba(127, 29, 29, 0.12) 0%, rgba(239, 68, 68, 0.18) 100%)\",\n },\n info: {\n color: \"var(--ds-chart-2)\",\n trackBackground:\n \"linear-gradient(90deg, rgba(30, 64, 175, 0.12) 0%, rgba(59, 130, 246, 0.18) 100%)\",\n },\n};\n\nfunction clampValue(value: number, max: number): number {\n if (!Number.isFinite(value)) {\n return 0;\n }\n\n return Math.min(Math.max(value, 0), max);\n}\n\nexport default function ProgressBar({\n value,\n max = 100,\n label,\n percentageLabel,\n showPercentage = true,\n size = \"md\",\n tone = \"default\",\n className = \"\",\n trackClassName = \"\",\n fillClassName = \"\",\n ariaLabel = \"Progress\",\n}: ProgressBarProps) {\n const safeMax = Number.isFinite(max) && max > 0 ? max : 100;\n const clampedValue = clampValue(value, safeMax);\n const percentage = (clampedValue / safeMax) * 100;\n const roundedPercentage = Math.round(percentage);\n const toneStyle = toneStyles[tone];\n const resolvedPercentageLabel = percentageLabel ?? `${roundedPercentage}%`;\n\n return (\n <div className={`w-full space-y-3 ${className}`}>\n {(label \|\| showPercentage) && (\n <div className=\"flex items-center justify-between gap-4\">\n <div\n className={`font-mono font-semibold tracking-[0.08em] text-ds-1 ${sizeStyles[size].label}`}\n >\n {label}\n </div>\n {showPercentage && (\n <div\n className={`font-mono font-medium tracking-[0.08em] text-ds-2 ${sizeStyles[size].percentage}`}\n >\n {resolvedPercentageLabel}\n </div>\n )}\n </div>\n )}\n\n <div\n role=\"progressbar\"\n aria-label={ariaLabel}\n aria-valuemin={0}\n aria-valuemax={safeMax}\n aria-valuenow={Math.round(clampedValue)}\n aria-valuetext={`${roundedPercentage}%`}\n className={`relative overflow-hidden rounded-full border border-ds-border-2/50 bg-ds-surface-2/80 shadow-[inset_0_1px_1px_rgba(255,255,255,0.2)] ${sizeStyles[size].track} ${trackClassName}`}\n style={{ background: toneStyle.trackBackground }}\n >\n <div\n className={`h-full rounded-full transition-[width,filter,box-shadow] duration-500 ease-out ${fillClassName}`}\n style={{\n width: `${percentage}%`,\n background: `linear-gradient(90deg, color-mix(in srgb, ${toneStyle.color} 68%, white 32%) 0%, ${toneStyle.color} 100%)`,\n boxShadow: `inset 0 1px 0 rgba(255,255,255,0.4), 0 0 14px color-mix(in srgb, ${toneStyle.color} 32%, transparent)`,\n filter: percentage > 0 ? \"saturate(1.05) brightness(1.02)\" : \"none\",\n }}\n />\n </div>\n </div>\n );\n}\n","import { mergeClassNames } from \"../../../utils\";\n\nexport type CircularProgressTone =\n \| \"default\"\n \| \"success\"\n \| \"warning\"\n \| \"danger\"\n \| \"info\";\n\nexport interface CircularProgressProps {\n value: number;\n max?: number;\n size?: number;\n strokeWidth?: number;\n tone?: CircularProgressTone;\n showValue?: boolean;\n valueLabel?: string;\n className?: string;\n trackClassName?: string;\n progressClassName?: string;\n ariaLabel?: string;\n}\n\nconst toneColorMap: Record<CircularProgressTone, string> = {\n default: \"var(--ds-chart-1)\",\n success: \"var(--ds-chart-3)\",\n warning: \"var(--ds-chart-4)\",\n danger: \"var(--ds-chart-5)\",\n info: \"var(--ds-chart-2)\",\n};\n\nfunction clamp(value: number, max: number): number {\n if (!Number.isFinite(value)) return 0;\n return Math.min(Math.max(value, 0), max);\n}\n\nexport default function CircularProgress({\n value,\n max = 100,\n size = 24,\n strokeWidth = 3,\n tone = \"default\",\n showValue = false,\n valueLabel,\n className,\n trackClassName,\n progressClassName,\n ariaLabel = \"Circular progress\",\n}: CircularProgressProps) {\n const safeMax = Number.isFinite(max) && max > 0 ? max : 100;\n const safeValue = clamp(value, safeMax);\n const percentage = (safeValue / safeMax) * 100;\n\n const center = size / 2;\n const radius = center - strokeWidth / 2;\n const circumference = 2 * Math.PI * radius;\n const dashOffset = circumference - (percentage / 100) * circumference;\n const label = valueLabel ?? `${Math.round(percentage)}%`;\n\n return (\n <span\n role=\"progressbar\"\n aria-label={ariaLabel}\n aria-valuemin={0}\n aria-valuemax={safeMax}\n aria-valuenow={Math.round(safeValue)}\n aria-valuetext={label}\n className={mergeClassNames(\n \"relative inline-flex items-center justify-center\",\n className,\n )}\n style={{ width: size, height: size }}\n >\n <svg\n width={size}\n height={size}\n viewBox={`0 0 ${size} ${size}`}\n className=\"-rotate-90\"\n >\n <circle\n cx={center}\n cy={center}\n r={radius}\n fill=\"none\"\n stroke=\"var(--ds-border-2)\"\n strokeOpacity={0.5}\n strokeWidth={strokeWidth}\n className={trackClassName}\n />\n <circle\n cx={center}\n cy={center}\n r={radius}\n fill=\"none\"\n stroke={toneColorMap[tone]}\n strokeWidth={strokeWidth}\n strokeLinecap=\"round\"\n strokeDasharray={circumference}\n strokeDashoffset={dashOffset}\n className={mergeClassNames(\n \"transition-[stroke-dashoffset] duration-500 ease-out\",\n progressClassName,\n )}\n />\n </svg>\n\n {showValue ? (\n <span className=\"absolute text-[10px] font-semibold leading-none text-ds-1\">\n {Math.round(percentage)}\n </span>\n ) : null}\n </span>\n );\n}\n\nexport { CircularProgress };\n"],"mappings":"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"}

package/dist/chunks/radio-CuiM_gDv.mjs ADDED Viewed

@@ -0,0 +1,50 @@
+import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/forms/radio/Radio.tsx
+var sanitizeId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "-");
+var colorMap = {
+	red: "var(--ds-color-danger)",
+	blue: "var(--ds-color-info)",
+	green: "var(--ds-color-success)",
+	yellow: "var(--ds-color-warning)",
+	teal: "var(--ds-brand-teal)",
+	primary: "var(--ds-color-accent)"
+};
+var Radio = forwardRef(({ className = "", label, error, id, color = "primary", bgClassName = "", ...props }, ref) => {
+	const generatedId = useId();
+	const radioId = id || `radio-${sanitizeId(generatedId)}`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col",
+		style: { "--radio-accent": colorMap[color] },
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "relative h-5 w-5 shrink-0",
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						ref,
+						type: "radio",
+						id: radioId,
+						className: mergeClassNames("peer absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed", className),
+						...props
+					}),
+					/* @__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) }),
+					/* @__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" })
+				]
+			}), label && /* @__PURE__ */ jsx("label", {
+				htmlFor: radioId,
+				className: "cursor-pointer text-sm font-medium leading-none text-ds-1",
+				children: label
+			})]
+		}), error && /* @__PURE__ */ jsx("p", {
+			className: "ms-7 mt-1 text-sm font-medium text-destructive",
+			children: error
+		})]
+	});
+});
+Radio.displayName = "Radio";
+//#endregion
+export { Radio as t };
+//# sourceMappingURL=radio-CuiM_gDv.mjs.map

package/dist/chunks/radio-CuiM_gDv.mjs.map ADDED Viewed

@@ -0,0 +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"}

package/dist/chunks/radio-zx9xEW_C.cjs ADDED Viewed

@@ -0,0 +1,56 @@
+require("./chunk-B_GkZjkl.cjs");
+const require_utils = require("./utils-LRbEQHYs.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/forms/radio/Radio.tsx
+var sanitizeId = (value) => value.replace(/[^a-zA-Z0-9_-]/g, "-");
+var colorMap = {
+	red: "var(--ds-color-danger)",
+	blue: "var(--ds-color-info)",
+	green: "var(--ds-color-success)",
+	yellow: "var(--ds-color-warning)",
+	teal: "var(--ds-brand-teal)",
+	primary: "var(--ds-color-accent)"
+};
+var Radio = (0, react.forwardRef)(({ className = "", label, error, id, color = "primary", bgClassName = "", ...props }, ref) => {
+	const generatedId = (0, react.useId)();
+	const radioId = id || `radio-${sanitizeId(generatedId)}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "flex flex-col",
+		style: { "--radio-accent": colorMap[color] },
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "relative h-5 w-5 shrink-0",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						ref,
+						type: "radio",
+						id: radioId,
+						className: require_utils.mergeClassNames("peer absolute inset-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed", className),
+						...props
+					}),
+					/* @__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) }),
+					/* @__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" })
+				]
+			}), label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+				htmlFor: radioId,
+				className: "cursor-pointer text-sm font-medium leading-none text-ds-1",
+				children: label
+			})]
+		}), error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "ms-7 mt-1 text-sm font-medium text-destructive",
+			children: error
+		})]
+	});
+});
+Radio.displayName = "Radio";
+//#endregion
+Object.defineProperty(exports, "Radio", {
+	enumerable: true,
+	get: function() {
+		return Radio;
+	}
+});
+//# sourceMappingURL=radio-zx9xEW_C.cjs.map

package/dist/chunks/radio-zx9xEW_C.cjs.map ADDED Viewed

@@ -0,0 +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"}

package/dist/chunks/{select-D0GOBB-b.mjs → select-CUaSNR09.mjs} RENAMED Viewed

@@ -1,7 +1,7 @@
-import { n as mergeClassNames } from "./utils-ati1KkDb.mjs";
-import { t as TruncatedText } from "./truncated-text-DTgks5yS.mjs";
+import { n as mergeClassNames } from "./utils-7S0u48mU.mjs";
+import { t as TruncatedText } from "./truncated-text-C9t9o9IA.mjs";
 import { J as CheckIcon, N as ChevronDownIcon } from "./icons-bx3nrxNv.mjs";
-import { t as DropdownMenu } from "./DropdownMenu-C17Zqu_E.mjs";
+import { t as DropdownMenu } from "./DropdownMenu-BtTOri-A.mjs";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
@@ -90,7 +90,7 @@ var Select = forwardRef(function SelectComponent({ className = "", containerClas
 					}
 					setOpen(nextOpen);
 				},
-				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),
+				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),
 				animationClassName: "origin-top-left",
 				trigger: /* @__PURE__ */ jsx(motion.div, {
 					style: { backgroundImage: disabled ? "none" : useMotionTemplate`
@@ -121,7 +121,7 @@ var Select = forwardRef(function SelectComponent({ className = "", containerClas
 							className: "flex-1 text-ds-2",
 							children: placeholder
 						}), /* @__PURE__ */ jsx("span", {
-							className: mergeClassNames("ml-2 shrink-0 text-ds-2 transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
+							className: mergeClassNames("ms-2 shrink-0 text-ds-2 transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
 							children: /* @__PURE__ */ jsx(ChevronDownIcon, {
 								width: 24,
 								height: 24,
@@ -168,4 +168,4 @@ Select.displayName = "Select";
 //#endregion
 export { Select as t };
-//# sourceMappingURL=select-D0GOBB-b.mjs.map
+//# sourceMappingURL=select-CUaSNR09.mjs.map

package/dist/chunks/select-CUaSNR09.mjs.map ADDED Viewed

@@ -0,0 +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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"}

package/dist/chunks/{select-CORFYTvs.cjs → select-bZ9WqLOc.cjs} RENAMED Viewed

@@ -1,8 +1,8 @@
 require("./chunk-B_GkZjkl.cjs");
-const require_utils = require("./utils-B4SmmY4J.cjs");
-const require_truncated_text = require("./truncated-text-istgJRUq.cjs");
+const require_utils = require("./utils-LRbEQHYs.cjs");
+const require_truncated_text = require("./truncated-text-BIXqNfOL.cjs");
 const require_icons = require("./icons-CRanVZB1.cjs");
-const require_DropdownMenu = require("./DropdownMenu-DOvo5pV_.cjs");
+const require_DropdownMenu = require("./DropdownMenu-BDrNYO-D.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let framer_motion = require("framer-motion");
@@ -91,7 +91,7 @@ var Select = (0, react.forwardRef)(function SelectComponent({ className = "", co
 					}
 					setOpen(nextOpen);
 				},
-				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),
+				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),
 				animationClassName: "origin-top-left",
 				trigger: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
 					style: { backgroundImage: disabled ? "none" : framer_motion.useMotionTemplate`
@@ -122,7 +122,7 @@ var Select = (0, react.forwardRef)(function SelectComponent({ className = "", co
 							className: "flex-1 text-ds-2",
 							children: placeholder
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							className: require_utils.mergeClassNames("ml-2 shrink-0 text-ds-2 transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
+							className: require_utils.mergeClassNames("ms-2 shrink-0 text-ds-2 transition-transform duration-300", open ? "rotate-180" : "rotate-0"),
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.ChevronDownIcon, {
 								width: 24,
 								height: 24,
@@ -174,4 +174,4 @@ Object.defineProperty(exports, "Select", {
 	}
 });
-//# sourceMappingURL=select-CORFYTvs.cjs.map
+//# sourceMappingURL=select-bZ9WqLOc.cjs.map

package/dist/chunks/select-bZ9WqLOc.cjs.map ADDED Viewed

@@ -0,0 +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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"}