@zentauri-ui/zentauri-components 2.1.9 → 2.2.1
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 +7 -5
- package/cli/props.json +620 -0
- package/cli/registry.json +13 -1
- package/dist/{chunk-OLT7P7JO.mjs → chunk-45ZHGDT2.mjs} +3 -3
- package/dist/{chunk-OLT7P7JO.mjs.map → chunk-45ZHGDT2.mjs.map} +1 -1
- package/dist/chunk-46HJFCP7.js +87 -0
- package/dist/chunk-46HJFCP7.js.map +1 -0
- package/dist/chunk-4KOQS4DT.mjs +96 -0
- package/dist/chunk-4KOQS4DT.mjs.map +1 -0
- package/dist/{chunk-3RC5IG6O.mjs → chunk-5HLEHSPM.mjs} +24 -5
- package/dist/chunk-5HLEHSPM.mjs.map +1 -0
- package/dist/{chunk-7CZDJTPD.js → chunk-DUH2YLH2.js} +12 -12
- package/dist/{chunk-7CZDJTPD.js.map → chunk-DUH2YLH2.js.map} +1 -1
- package/dist/chunk-DXNIAFBG.js +103 -0
- package/dist/chunk-DXNIAFBG.js.map +1 -0
- package/dist/chunk-EMZC6ICD.mjs +55 -0
- package/dist/chunk-EMZC6ICD.mjs.map +1 -0
- package/dist/chunk-HNPGWFVY.js +65 -0
- package/dist/chunk-HNPGWFVY.js.map +1 -0
- package/dist/chunk-HR6MGXNI.mjs +212 -0
- package/dist/chunk-HR6MGXNI.mjs.map +1 -0
- package/dist/chunk-LOEKM3FL.mjs +78 -0
- package/dist/chunk-LOEKM3FL.mjs.map +1 -0
- package/dist/{chunk-7DGPRPWM.js → chunk-NW5BSLR2.js} +6 -6
- package/dist/{chunk-7DGPRPWM.js.map → chunk-NW5BSLR2.js.map} +1 -1
- package/dist/{chunk-4TPE5DEG.js → chunk-UJZ7JQBQ.js} +24 -5
- package/dist/chunk-UJZ7JQBQ.js.map +1 -0
- package/dist/chunk-WMM42MAC.js +222 -0
- package/dist/chunk-WMM42MAC.js.map +1 -0
- package/dist/chunk-YBKNXDZU.js +19 -0
- package/dist/{chunk-MWG7LHAK.js.map → chunk-YBKNXDZU.js.map} +1 -1
- package/dist/{chunk-3HBC34NF.mjs → chunk-YSQW56JX.mjs} +4 -4
- package/dist/{chunk-3HBC34NF.mjs.map → chunk-YSQW56JX.mjs.map} +1 -1
- package/dist/{chunk-VN7FE5RR.mjs → chunk-Z4Y5IPR3.mjs} +3 -3
- package/dist/{chunk-VN7FE5RR.mjs.map → chunk-Z4Y5IPR3.mjs.map} +1 -1
- package/dist/design-system/facade.js +7 -5
- package/dist/design-system/facade.js.map +1 -1
- package/dist/design-system/facade.mjs +6 -4
- package/dist/design-system/facade.mjs.map +1 -1
- package/dist/design-system/index.d.ts +2 -0
- package/dist/design-system/index.d.ts.map +1 -1
- package/dist/design-system/password-strength-meter.d.ts +74 -0
- package/dist/design-system/password-strength-meter.d.ts.map +1 -0
- package/dist/design-system/typing-indicator.d.ts +47 -0
- package/dist/design-system/typing-indicator.d.ts.map +1 -0
- package/dist/ui/buttons/animated.js +9 -7
- package/dist/ui/buttons/animated.js.map +1 -1
- package/dist/ui/buttons/animated.mjs +7 -5
- package/dist/ui/buttons/animated.mjs.map +1 -1
- package/dist/ui/buttons.js +10 -8
- package/dist/ui/buttons.mjs +8 -6
- package/dist/ui/data-table.js +20 -18
- package/dist/ui/data-table.js.map +1 -1
- package/dist/ui/data-table.mjs +10 -8
- package/dist/ui/data-table.mjs.map +1 -1
- package/dist/ui/dynamic-stepper.js +19 -17
- package/dist/ui/dynamic-stepper.js.map +1 -1
- package/dist/ui/dynamic-stepper.mjs +8 -6
- package/dist/ui/dynamic-stepper.mjs.map +1 -1
- package/dist/ui/pagination.js +11 -9
- package/dist/ui/pagination.mjs +8 -6
- package/dist/ui/password-strength-meter/animated/animations.d.ts +3 -0
- package/dist/ui/password-strength-meter/animated/animations.d.ts.map +1 -0
- package/dist/ui/password-strength-meter/animated/index.d.ts +4 -0
- package/dist/ui/password-strength-meter/animated/index.d.ts.map +1 -0
- package/dist/ui/password-strength-meter/animated/password-strength-meter-animated.d.ts +14 -0
- package/dist/ui/password-strength-meter/animated/password-strength-meter-animated.d.ts.map +1 -0
- package/dist/ui/password-strength-meter/animated/types.d.ts +21 -0
- package/dist/ui/password-strength-meter/animated/types.d.ts.map +1 -0
- package/dist/ui/password-strength-meter/animated.js +169 -0
- package/dist/ui/password-strength-meter/animated.js.map +1 -0
- package/dist/ui/password-strength-meter/animated.mjs +165 -0
- package/dist/ui/password-strength-meter/animated.mjs.map +1 -0
- package/dist/ui/password-strength-meter/index.d.ts +5 -0
- package/dist/ui/password-strength-meter/index.d.ts.map +1 -0
- package/dist/ui/password-strength-meter/password-strength-meter-base.d.ts +17 -0
- package/dist/ui/password-strength-meter/password-strength-meter-base.d.ts.map +1 -0
- package/dist/ui/password-strength-meter/password-strength-meter.d.ts +6 -0
- package/dist/ui/password-strength-meter/password-strength-meter.d.ts.map +1 -0
- package/dist/ui/password-strength-meter/types.d.ts +33 -0
- package/dist/ui/password-strength-meter/types.d.ts.map +1 -0
- package/dist/ui/password-strength-meter/variants.d.ts +13 -0
- package/dist/ui/password-strength-meter/variants.d.ts.map +1 -0
- package/dist/ui/password-strength-meter.js +37 -0
- package/dist/ui/password-strength-meter.js.map +1 -0
- package/dist/ui/password-strength-meter.mjs +16 -0
- package/dist/ui/password-strength-meter.mjs.map +1 -0
- package/dist/ui/split-button.js +21 -19
- package/dist/ui/split-button.js.map +1 -1
- package/dist/ui/split-button.mjs +8 -6
- package/dist/ui/split-button.mjs.map +1 -1
- package/dist/ui/typing-indicator/animated/animations.d.ts +8 -0
- package/dist/ui/typing-indicator/animated/animations.d.ts.map +1 -0
- package/dist/ui/typing-indicator/animated/index.d.ts +4 -0
- package/dist/ui/typing-indicator/animated/index.d.ts.map +1 -0
- package/dist/ui/typing-indicator/animated/types.d.ts +9 -0
- package/dist/ui/typing-indicator/animated/types.d.ts.map +1 -0
- package/dist/ui/typing-indicator/animated/typing-indicator-animated.d.ts +6 -0
- package/dist/ui/typing-indicator/animated/typing-indicator-animated.d.ts.map +1 -0
- package/dist/ui/typing-indicator/animated.js +119 -0
- package/dist/ui/typing-indicator/animated.js.map +1 -0
- package/dist/ui/typing-indicator/animated.mjs +116 -0
- package/dist/ui/typing-indicator/animated.mjs.map +1 -0
- package/dist/ui/typing-indicator/index.d.ts +4 -0
- package/dist/ui/typing-indicator/index.d.ts.map +1 -0
- package/dist/ui/typing-indicator/types.d.ts +13 -0
- package/dist/ui/typing-indicator/types.d.ts.map +1 -0
- package/dist/ui/typing-indicator/typing-indicator-base.d.ts +13 -0
- package/dist/ui/typing-indicator/typing-indicator-base.d.ts.map +1 -0
- package/dist/ui/typing-indicator/typing-indicator.d.ts +2 -0
- package/dist/ui/typing-indicator/typing-indicator.d.ts.map +1 -0
- package/dist/ui/typing-indicator/variants.d.ts +16 -0
- package/dist/ui/typing-indicator/variants.d.ts.map +1 -0
- package/dist/ui/typing-indicator.js +32 -0
- package/dist/ui/typing-indicator.js.map +1 -0
- package/dist/ui/typing-indicator.mjs +7 -0
- package/dist/ui/typing-indicator.mjs.map +1 -0
- package/package.json +1 -1
- package/src/design-system/index.ts +2 -0
- package/src/design-system/password-strength-meter.ts +115 -0
- package/src/design-system/typing-indicator.ts +74 -0
- package/src/ui/password-strength-meter/animated/animations.ts +10 -0
- package/src/ui/password-strength-meter/animated/index.ts +14 -0
- package/src/ui/password-strength-meter/animated/password-strength-meter-animated.tsx +186 -0
- package/src/ui/password-strength-meter/animated/types.ts +35 -0
- package/src/ui/password-strength-meter/index.ts +18 -0
- package/src/ui/password-strength-meter/password-strength-meter-base.tsx +202 -0
- package/src/ui/password-strength-meter/password-strength-meter.test.tsx +103 -0
- package/src/ui/password-strength-meter/password-strength-meter.tsx +8 -0
- package/src/ui/password-strength-meter/types.ts +40 -0
- package/src/ui/password-strength-meter/variants.ts +49 -0
- package/src/ui/typing-indicator/animated/animations.ts +58 -0
- package/src/ui/typing-indicator/animated/index.ts +8 -0
- package/src/ui/typing-indicator/animated/types.ts +11 -0
- package/src/ui/typing-indicator/animated/typing-indicator-animated.tsx +79 -0
- package/src/ui/typing-indicator/index.ts +15 -0
- package/src/ui/typing-indicator/types.ts +20 -0
- package/src/ui/typing-indicator/typing-indicator-base.tsx +75 -0
- package/src/ui/typing-indicator/typing-indicator.test.tsx +76 -0
- package/src/ui/typing-indicator/typing-indicator.tsx +2 -0
- package/src/ui/typing-indicator/variants.ts +49 -0
- package/dist/chunk-3RC5IG6O.mjs.map +0 -1
- package/dist/chunk-4TPE5DEG.js.map +0 -1
- package/dist/chunk-MWG7LHAK.js +0 -19
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
// src/design-system/typing-indicator.ts
|
|
2
|
+
var zuiTypingIndicatorAppearances = {
|
|
3
|
+
default: "bg-[var(--zui-typing-indicator-default-dot-bg,var(--zui-brand,oklch(20.8%_0.042_265.755)))] dark:bg-[var(--zui-typing-indicator-default-dot-bg-dark,var(--zui-brand-dark,oklch(98.4%_0.003_247.858)))]",
|
|
4
|
+
subtle: "bg-[var(--zui-typing-indicator-subtle-dot-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-typing-indicator-subtle-dot-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))]",
|
|
5
|
+
muted: "bg-[var(--zui-typing-indicator-muted-dot-bg,var(--zui-fg-muted,oklch(44.6%_0.043_257.281)))] dark:bg-[var(--zui-typing-indicator-muted-dot-bg-dark,var(--zui-fg-muted-dark,oklch(86.9%_0.022_252.894)))]",
|
|
6
|
+
primary: "bg-[var(--zui-typing-indicator-primary-dot-bg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:bg-[var(--zui-typing-indicator-primary-dot-bg-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]",
|
|
7
|
+
blue: "bg-[var(--zui-typing-indicator-blue-dot-bg,var(--zui-color-blue,#2563eb))] dark:bg-[var(--zui-typing-indicator-blue-dot-bg-dark,var(--zui-color-blue-dark,#3b82f6))]",
|
|
8
|
+
cyan: "bg-[var(--zui-typing-indicator-cyan-dot-bg,var(--zui-color-cyan,#0891b2))] dark:bg-[var(--zui-typing-indicator-cyan-dot-bg-dark,var(--zui-color-cyan-dark,#22d3ee))]",
|
|
9
|
+
green: "bg-[var(--zui-typing-indicator-green-dot-bg,var(--zui-color-green,#16a34a))] dark:bg-[var(--zui-typing-indicator-green-dot-bg-dark,var(--zui-color-green-dark,#22c55e))]",
|
|
10
|
+
lime: "bg-[var(--zui-typing-indicator-lime-dot-bg,var(--zui-color-lime,#65a30d))] dark:bg-[var(--zui-typing-indicator-lime-dot-bg-dark,var(--zui-color-lime-dark,#a3e635))]",
|
|
11
|
+
emerald: "bg-[var(--zui-typing-indicator-emerald-dot-bg,var(--zui-color-emerald,oklch(69.6%_0.17_162.48)))] dark:bg-[var(--zui-typing-indicator-emerald-dot-bg-dark,var(--zui-color-emerald-dark,oklch(43.2%_0.095_166.913)))]",
|
|
12
|
+
indigo: "bg-[var(--zui-typing-indicator-indigo-dot-bg,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:bg-[var(--zui-typing-indicator-indigo-dot-bg-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))]",
|
|
13
|
+
purple: "bg-[var(--zui-typing-indicator-purple-dot-bg,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:bg-[var(--zui-typing-indicator-purple-dot-bg-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))]",
|
|
14
|
+
pink: "bg-[var(--zui-typing-indicator-pink-dot-bg,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:bg-[var(--zui-typing-indicator-pink-dot-bg-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))]",
|
|
15
|
+
rose: "bg-[var(--zui-typing-indicator-rose-dot-bg,var(--zui-color-rose,oklch(64.5%_0.246_16.439)))] dark:bg-[var(--zui-typing-indicator-rose-dot-bg-dark,var(--zui-color-rose-dark,oklch(51.4%_0.222_16.935)))]",
|
|
16
|
+
sky: "bg-[var(--zui-typing-indicator-sky-dot-bg,var(--zui-color-sky,oklch(68.5%_0.169_237.323)))] dark:bg-[var(--zui-typing-indicator-sky-dot-bg-dark,var(--zui-color-sky-dark,oklch(50%_0.134_242.749)))]",
|
|
17
|
+
teal: "bg-[var(--zui-typing-indicator-teal-dot-bg,var(--zui-color-teal,oklch(70.4%_0.14_182.503)))] dark:bg-[var(--zui-typing-indicator-teal-dot-bg-dark,var(--zui-color-teal-dark,oklch(51.1%_0.096_186.391)))]",
|
|
18
|
+
yellow: "bg-[var(--zui-typing-indicator-yellow-dot-bg,var(--zui-color-yellow,oklch(79.5%_0.184_86.047)))] dark:bg-[var(--zui-typing-indicator-yellow-dot-bg-dark,var(--zui-color-yellow-dark,oklch(47.6%_0.114_61.907)))]",
|
|
19
|
+
orange: "bg-[var(--zui-typing-indicator-orange-dot-bg,var(--zui-color-orange,oklch(70.5%_0.213_47.604)))] dark:bg-[var(--zui-typing-indicator-orange-dot-bg-dark,var(--zui-color-orange-dark,oklch(47%_0.157_37.304)))]",
|
|
20
|
+
red: "bg-[var(--zui-typing-indicator-red-dot-bg,var(--zui-color-red,#dc2626))] dark:bg-[var(--zui-typing-indicator-red-dot-bg-dark,var(--zui-color-red-dark,#ef4444))]",
|
|
21
|
+
slate: "bg-[var(--zui-typing-indicator-slate-dot-bg,var(--zui-color-slate,#475569))] dark:bg-[var(--zui-typing-indicator-slate-dot-bg-dark,var(--zui-color-slate-dark,#64748b))]",
|
|
22
|
+
gray: "bg-[var(--zui-typing-indicator-gray-dot-bg,var(--zui-color-gray,oklch(55.1%_0.027_264.364)))] dark:bg-[var(--zui-typing-indicator-gray-dot-bg-dark,var(--zui-color-gray-dark,oklch(55.1%_0.027_264.364)))]",
|
|
23
|
+
zinc: "bg-[var(--zui-typing-indicator-zinc-dot-bg,var(--zui-color-zinc,#52525b))] dark:bg-[var(--zui-typing-indicator-zinc-dot-bg-dark,var(--zui-color-zinc-dark,#71717a))]",
|
|
24
|
+
"gradient-blue": "bg-linear-to-r from-[var(--zui-typing-indicator-gradient-blue-from,var(--zui-color-blue,oklch(42.4%_0.199_265.638)))] dark:from-[var(--zui-typing-indicator-gradient-blue-from-dark,var(--zui-color-blue-dark,oklch(54.6%_0.245_262.881)))] to-[var(--zui-typing-indicator-gradient-blue-to,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:to-[var(--zui-typing-indicator-gradient-blue-to-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))]",
|
|
25
|
+
"gradient-green": "bg-linear-to-r from-[var(--zui-typing-indicator-gradient-green-from,var(--zui-color-green,oklch(44.8%_0.119_151.328)))] dark:from-[var(--zui-typing-indicator-gradient-green-from-dark,var(--zui-color-green-dark,oklch(62.7%_0.194_149.214)))] to-[var(--zui-typing-indicator-gradient-green-to,var(--zui-color-lime,oklch(45.3%_0.124_130.933)))] dark:to-[var(--zui-typing-indicator-gradient-green-to-dark,var(--zui-color-lime-dark,oklch(64.8%_0.2_131.684)))]",
|
|
26
|
+
"gradient-purple": "bg-linear-to-r from-[var(--zui-typing-indicator-gradient-purple-from,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:from-[var(--zui-typing-indicator-gradient-purple-from-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] to-[var(--zui-typing-indicator-gradient-purple-to,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:to-[var(--zui-typing-indicator-gradient-purple-to-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))]"
|
|
27
|
+
};
|
|
28
|
+
var zuiTypingIndicatorDotsBase = "inline-flex items-center";
|
|
29
|
+
var zuiTypingIndicatorDotBase = "rounded-full animate-bounce [animation-duration:1.4s]";
|
|
30
|
+
var zuiTypingIndicatorDotDelays = [
|
|
31
|
+
"[animation-delay:0s]",
|
|
32
|
+
"[animation-delay:0.16s]",
|
|
33
|
+
"[animation-delay:0.32s]"
|
|
34
|
+
];
|
|
35
|
+
var zuiTypingIndicatorSizes = {
|
|
36
|
+
sm: "gap-1",
|
|
37
|
+
md: "gap-1.5",
|
|
38
|
+
lg: "gap-2"
|
|
39
|
+
};
|
|
40
|
+
var zuiTypingIndicatorDotSizes = {
|
|
41
|
+
sm: "size-1.5",
|
|
42
|
+
md: "size-2",
|
|
43
|
+
lg: "size-2.5"
|
|
44
|
+
};
|
|
45
|
+
var zuiTypingIndicatorLabelBase = "text-[color:var(--zui-typing-indicator-label-fg,var(--zui-fg-muted,oklch(44.6%_0.043_257.287)))] dark:text-[color:var(--zui-typing-indicator-label-fg-dark,var(--zui-fg-muted-dark,oklch(86.9%_0.022_252.894)))]";
|
|
46
|
+
var zuiTypingIndicatorLabelSizes = {
|
|
47
|
+
sm: "text-xs",
|
|
48
|
+
md: "text-sm",
|
|
49
|
+
lg: "text-base"
|
|
50
|
+
};
|
|
51
|
+
var zuiTypingIndicatorContainerBase = "inline-flex items-center gap-2";
|
|
52
|
+
|
|
53
|
+
export { zuiTypingIndicatorAppearances, zuiTypingIndicatorContainerBase, zuiTypingIndicatorDotBase, zuiTypingIndicatorDotDelays, zuiTypingIndicatorDotSizes, zuiTypingIndicatorDotsBase, zuiTypingIndicatorLabelBase, zuiTypingIndicatorLabelSizes, zuiTypingIndicatorSizes };
|
|
54
|
+
//# sourceMappingURL=chunk-EMZC6ICD.mjs.map
|
|
55
|
+
//# sourceMappingURL=chunk-EMZC6ICD.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/design-system/typing-indicator.ts"],"names":[],"mappings":";AAAO,IAAM,6BAAA,GAAgC;AAAA,EAC3C,OAAA,EACE,wMAAA;AAAA,EACF,MAAA,EACE,sNAAA;AAAA,EACF,KAAA,EACE,0MAAA;AAAA,EACF,OAAA,EACE,kMAAA;AAAA,EACF,IAAA,EAAM,sKAAA;AAAA,EACN,IAAA,EAAM,sKAAA;AAAA,EACN,KAAA,EACE,0KAAA;AAAA,EACF,IAAA,EAAM,sKAAA;AAAA,EACN,OAAA,EACE,sNAAA;AAAA,EACF,MAAA,EACE,oNAAA;AAAA,EACF,MAAA,EACE,oNAAA;AAAA,EACF,IAAA,EAAM,wMAAA;AAAA,EACN,IAAA,EAAM,0MAAA;AAAA,EACN,GAAA,EAAK,sMAAA;AAAA,EACL,IAAA,EAAM,2MAAA;AAAA,EACN,MAAA,EACE,kNAAA;AAAA,EACF,MAAA,EACE,gNAAA;AAAA,EACF,GAAA,EAAK,kKAAA;AAAA,EACL,KAAA,EACE,0KAAA;AAAA,EACF,IAAA,EAAM,4MAAA;AAAA,EACN,IAAA,EAAM,sKAAA;AAAA,EACN,eAAA,EACE,scAAA;AAAA,EACF,gBAAA,EACE,scAAA;AAAA,EACF,iBAAA,EACE;AACJ;AAEO,IAAM,0BAAA,GAA6B;AAEnC,IAAM,yBAAA,GACX;AAEK,IAAM,2BAAA,GAA8B;AAAA,EACzC,sBAAA;AAAA,EACA,yBAAA;AAAA,EACA;AACF;AAEO,IAAM,uBAAA,GAA0B;AAAA,EACrC,EAAA,EAAI,OAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAEO,IAAM,0BAAA,GAA6B;AAAA,EACxC,EAAA,EAAI,UAAA;AAAA,EACJ,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAEO,IAAM,2BAAA,GACX;AAEK,IAAM,4BAAA,GAA+B;AAAA,EAC1C,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAEO,IAAM,+BAAA,GAAkC","file":"chunk-EMZC6ICD.mjs","sourcesContent":["export const zuiTypingIndicatorAppearances = {\n default:\n \"bg-[var(--zui-typing-indicator-default-dot-bg,var(--zui-brand,oklch(20.8%_0.042_265.755)))] dark:bg-[var(--zui-typing-indicator-default-dot-bg-dark,var(--zui-brand-dark,oklch(98.4%_0.003_247.858)))]\",\n subtle:\n \"bg-[var(--zui-typing-indicator-subtle-dot-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-typing-indicator-subtle-dot-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))]\",\n muted:\n \"bg-[var(--zui-typing-indicator-muted-dot-bg,var(--zui-fg-muted,oklch(44.6%_0.043_257.281)))] dark:bg-[var(--zui-typing-indicator-muted-dot-bg-dark,var(--zui-fg-muted-dark,oklch(86.9%_0.022_252.894)))]\",\n primary:\n \"bg-[var(--zui-typing-indicator-primary-dot-bg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:bg-[var(--zui-typing-indicator-primary-dot-bg-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]\",\n blue: \"bg-[var(--zui-typing-indicator-blue-dot-bg,var(--zui-color-blue,#2563eb))] dark:bg-[var(--zui-typing-indicator-blue-dot-bg-dark,var(--zui-color-blue-dark,#3b82f6))]\",\n cyan: \"bg-[var(--zui-typing-indicator-cyan-dot-bg,var(--zui-color-cyan,#0891b2))] dark:bg-[var(--zui-typing-indicator-cyan-dot-bg-dark,var(--zui-color-cyan-dark,#22d3ee))]\",\n green:\n \"bg-[var(--zui-typing-indicator-green-dot-bg,var(--zui-color-green,#16a34a))] dark:bg-[var(--zui-typing-indicator-green-dot-bg-dark,var(--zui-color-green-dark,#22c55e))]\",\n lime: \"bg-[var(--zui-typing-indicator-lime-dot-bg,var(--zui-color-lime,#65a30d))] dark:bg-[var(--zui-typing-indicator-lime-dot-bg-dark,var(--zui-color-lime-dark,#a3e635))]\",\n emerald:\n \"bg-[var(--zui-typing-indicator-emerald-dot-bg,var(--zui-color-emerald,oklch(69.6%_0.17_162.48)))] dark:bg-[var(--zui-typing-indicator-emerald-dot-bg-dark,var(--zui-color-emerald-dark,oklch(43.2%_0.095_166.913)))]\",\n indigo:\n \"bg-[var(--zui-typing-indicator-indigo-dot-bg,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:bg-[var(--zui-typing-indicator-indigo-dot-bg-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))]\",\n purple:\n \"bg-[var(--zui-typing-indicator-purple-dot-bg,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:bg-[var(--zui-typing-indicator-purple-dot-bg-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))]\",\n pink: \"bg-[var(--zui-typing-indicator-pink-dot-bg,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:bg-[var(--zui-typing-indicator-pink-dot-bg-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))]\",\n rose: \"bg-[var(--zui-typing-indicator-rose-dot-bg,var(--zui-color-rose,oklch(64.5%_0.246_16.439)))] dark:bg-[var(--zui-typing-indicator-rose-dot-bg-dark,var(--zui-color-rose-dark,oklch(51.4%_0.222_16.935)))]\",\n sky: \"bg-[var(--zui-typing-indicator-sky-dot-bg,var(--zui-color-sky,oklch(68.5%_0.169_237.323)))] dark:bg-[var(--zui-typing-indicator-sky-dot-bg-dark,var(--zui-color-sky-dark,oklch(50%_0.134_242.749)))]\",\n teal: \"bg-[var(--zui-typing-indicator-teal-dot-bg,var(--zui-color-teal,oklch(70.4%_0.14_182.503)))] dark:bg-[var(--zui-typing-indicator-teal-dot-bg-dark,var(--zui-color-teal-dark,oklch(51.1%_0.096_186.391)))]\",\n yellow:\n \"bg-[var(--zui-typing-indicator-yellow-dot-bg,var(--zui-color-yellow,oklch(79.5%_0.184_86.047)))] dark:bg-[var(--zui-typing-indicator-yellow-dot-bg-dark,var(--zui-color-yellow-dark,oklch(47.6%_0.114_61.907)))]\",\n orange:\n \"bg-[var(--zui-typing-indicator-orange-dot-bg,var(--zui-color-orange,oklch(70.5%_0.213_47.604)))] dark:bg-[var(--zui-typing-indicator-orange-dot-bg-dark,var(--zui-color-orange-dark,oklch(47%_0.157_37.304)))]\",\n red: \"bg-[var(--zui-typing-indicator-red-dot-bg,var(--zui-color-red,#dc2626))] dark:bg-[var(--zui-typing-indicator-red-dot-bg-dark,var(--zui-color-red-dark,#ef4444))]\",\n slate:\n \"bg-[var(--zui-typing-indicator-slate-dot-bg,var(--zui-color-slate,#475569))] dark:bg-[var(--zui-typing-indicator-slate-dot-bg-dark,var(--zui-color-slate-dark,#64748b))]\",\n gray: \"bg-[var(--zui-typing-indicator-gray-dot-bg,var(--zui-color-gray,oklch(55.1%_0.027_264.364)))] dark:bg-[var(--zui-typing-indicator-gray-dot-bg-dark,var(--zui-color-gray-dark,oklch(55.1%_0.027_264.364)))]\",\n zinc: \"bg-[var(--zui-typing-indicator-zinc-dot-bg,var(--zui-color-zinc,#52525b))] dark:bg-[var(--zui-typing-indicator-zinc-dot-bg-dark,var(--zui-color-zinc-dark,#71717a))]\",\n \"gradient-blue\":\n \"bg-linear-to-r from-[var(--zui-typing-indicator-gradient-blue-from,var(--zui-color-blue,oklch(42.4%_0.199_265.638)))] dark:from-[var(--zui-typing-indicator-gradient-blue-from-dark,var(--zui-color-blue-dark,oklch(54.6%_0.245_262.881)))] to-[var(--zui-typing-indicator-gradient-blue-to,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:to-[var(--zui-typing-indicator-gradient-blue-to-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))]\",\n \"gradient-green\":\n \"bg-linear-to-r from-[var(--zui-typing-indicator-gradient-green-from,var(--zui-color-green,oklch(44.8%_0.119_151.328)))] dark:from-[var(--zui-typing-indicator-gradient-green-from-dark,var(--zui-color-green-dark,oklch(62.7%_0.194_149.214)))] to-[var(--zui-typing-indicator-gradient-green-to,var(--zui-color-lime,oklch(45.3%_0.124_130.933)))] dark:to-[var(--zui-typing-indicator-gradient-green-to-dark,var(--zui-color-lime-dark,oklch(64.8%_0.2_131.684)))]\",\n \"gradient-purple\":\n \"bg-linear-to-r from-[var(--zui-typing-indicator-gradient-purple-from,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:from-[var(--zui-typing-indicator-gradient-purple-from-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] to-[var(--zui-typing-indicator-gradient-purple-to,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:to-[var(--zui-typing-indicator-gradient-purple-to-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))]\",\n} as const;\n\nexport const zuiTypingIndicatorDotsBase = \"inline-flex items-center\";\n\nexport const zuiTypingIndicatorDotBase =\n \"rounded-full animate-bounce [animation-duration:1.4s]\";\n\nexport const zuiTypingIndicatorDotDelays = [\n \"[animation-delay:0s]\",\n \"[animation-delay:0.16s]\",\n \"[animation-delay:0.32s]\",\n] as const;\n\nexport const zuiTypingIndicatorSizes = {\n sm: \"gap-1\",\n md: \"gap-1.5\",\n lg: \"gap-2\",\n} as const;\n\nexport const zuiTypingIndicatorDotSizes = {\n sm: \"size-1.5\",\n md: \"size-2\",\n lg: \"size-2.5\",\n} as const;\n\nexport const zuiTypingIndicatorLabelBase =\n \"text-[color:var(--zui-typing-indicator-label-fg,var(--zui-fg-muted,oklch(44.6%_0.043_257.287)))] dark:text-[color:var(--zui-typing-indicator-label-fg-dark,var(--zui-fg-muted-dark,oklch(86.9%_0.022_252.894)))]\";\n\nexport const zuiTypingIndicatorLabelSizes = {\n sm: \"text-xs\",\n md: \"text-sm\",\n lg: \"text-base\",\n} as const;\n\nexport const zuiTypingIndicatorContainerBase = \"inline-flex items-center gap-2\";\n"]}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
// src/design-system/typing-indicator.ts
|
|
4
|
+
var zuiTypingIndicatorAppearances = {
|
|
5
|
+
default: "bg-[var(--zui-typing-indicator-default-dot-bg,var(--zui-brand,oklch(20.8%_0.042_265.755)))] dark:bg-[var(--zui-typing-indicator-default-dot-bg-dark,var(--zui-brand-dark,oklch(98.4%_0.003_247.858)))]",
|
|
6
|
+
subtle: "bg-[var(--zui-typing-indicator-subtle-dot-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-typing-indicator-subtle-dot-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))]",
|
|
7
|
+
muted: "bg-[var(--zui-typing-indicator-muted-dot-bg,var(--zui-fg-muted,oklch(44.6%_0.043_257.281)))] dark:bg-[var(--zui-typing-indicator-muted-dot-bg-dark,var(--zui-fg-muted-dark,oklch(86.9%_0.022_252.894)))]",
|
|
8
|
+
primary: "bg-[var(--zui-typing-indicator-primary-dot-bg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:bg-[var(--zui-typing-indicator-primary-dot-bg-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]",
|
|
9
|
+
blue: "bg-[var(--zui-typing-indicator-blue-dot-bg,var(--zui-color-blue,#2563eb))] dark:bg-[var(--zui-typing-indicator-blue-dot-bg-dark,var(--zui-color-blue-dark,#3b82f6))]",
|
|
10
|
+
cyan: "bg-[var(--zui-typing-indicator-cyan-dot-bg,var(--zui-color-cyan,#0891b2))] dark:bg-[var(--zui-typing-indicator-cyan-dot-bg-dark,var(--zui-color-cyan-dark,#22d3ee))]",
|
|
11
|
+
green: "bg-[var(--zui-typing-indicator-green-dot-bg,var(--zui-color-green,#16a34a))] dark:bg-[var(--zui-typing-indicator-green-dot-bg-dark,var(--zui-color-green-dark,#22c55e))]",
|
|
12
|
+
lime: "bg-[var(--zui-typing-indicator-lime-dot-bg,var(--zui-color-lime,#65a30d))] dark:bg-[var(--zui-typing-indicator-lime-dot-bg-dark,var(--zui-color-lime-dark,#a3e635))]",
|
|
13
|
+
emerald: "bg-[var(--zui-typing-indicator-emerald-dot-bg,var(--zui-color-emerald,oklch(69.6%_0.17_162.48)))] dark:bg-[var(--zui-typing-indicator-emerald-dot-bg-dark,var(--zui-color-emerald-dark,oklch(43.2%_0.095_166.913)))]",
|
|
14
|
+
indigo: "bg-[var(--zui-typing-indicator-indigo-dot-bg,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:bg-[var(--zui-typing-indicator-indigo-dot-bg-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))]",
|
|
15
|
+
purple: "bg-[var(--zui-typing-indicator-purple-dot-bg,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:bg-[var(--zui-typing-indicator-purple-dot-bg-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))]",
|
|
16
|
+
pink: "bg-[var(--zui-typing-indicator-pink-dot-bg,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:bg-[var(--zui-typing-indicator-pink-dot-bg-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))]",
|
|
17
|
+
rose: "bg-[var(--zui-typing-indicator-rose-dot-bg,var(--zui-color-rose,oklch(64.5%_0.246_16.439)))] dark:bg-[var(--zui-typing-indicator-rose-dot-bg-dark,var(--zui-color-rose-dark,oklch(51.4%_0.222_16.935)))]",
|
|
18
|
+
sky: "bg-[var(--zui-typing-indicator-sky-dot-bg,var(--zui-color-sky,oklch(68.5%_0.169_237.323)))] dark:bg-[var(--zui-typing-indicator-sky-dot-bg-dark,var(--zui-color-sky-dark,oklch(50%_0.134_242.749)))]",
|
|
19
|
+
teal: "bg-[var(--zui-typing-indicator-teal-dot-bg,var(--zui-color-teal,oklch(70.4%_0.14_182.503)))] dark:bg-[var(--zui-typing-indicator-teal-dot-bg-dark,var(--zui-color-teal-dark,oklch(51.1%_0.096_186.391)))]",
|
|
20
|
+
yellow: "bg-[var(--zui-typing-indicator-yellow-dot-bg,var(--zui-color-yellow,oklch(79.5%_0.184_86.047)))] dark:bg-[var(--zui-typing-indicator-yellow-dot-bg-dark,var(--zui-color-yellow-dark,oklch(47.6%_0.114_61.907)))]",
|
|
21
|
+
orange: "bg-[var(--zui-typing-indicator-orange-dot-bg,var(--zui-color-orange,oklch(70.5%_0.213_47.604)))] dark:bg-[var(--zui-typing-indicator-orange-dot-bg-dark,var(--zui-color-orange-dark,oklch(47%_0.157_37.304)))]",
|
|
22
|
+
red: "bg-[var(--zui-typing-indicator-red-dot-bg,var(--zui-color-red,#dc2626))] dark:bg-[var(--zui-typing-indicator-red-dot-bg-dark,var(--zui-color-red-dark,#ef4444))]",
|
|
23
|
+
slate: "bg-[var(--zui-typing-indicator-slate-dot-bg,var(--zui-color-slate,#475569))] dark:bg-[var(--zui-typing-indicator-slate-dot-bg-dark,var(--zui-color-slate-dark,#64748b))]",
|
|
24
|
+
gray: "bg-[var(--zui-typing-indicator-gray-dot-bg,var(--zui-color-gray,oklch(55.1%_0.027_264.364)))] dark:bg-[var(--zui-typing-indicator-gray-dot-bg-dark,var(--zui-color-gray-dark,oklch(55.1%_0.027_264.364)))]",
|
|
25
|
+
zinc: "bg-[var(--zui-typing-indicator-zinc-dot-bg,var(--zui-color-zinc,#52525b))] dark:bg-[var(--zui-typing-indicator-zinc-dot-bg-dark,var(--zui-color-zinc-dark,#71717a))]",
|
|
26
|
+
"gradient-blue": "bg-linear-to-r from-[var(--zui-typing-indicator-gradient-blue-from,var(--zui-color-blue,oklch(42.4%_0.199_265.638)))] dark:from-[var(--zui-typing-indicator-gradient-blue-from-dark,var(--zui-color-blue-dark,oklch(54.6%_0.245_262.881)))] to-[var(--zui-typing-indicator-gradient-blue-to,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:to-[var(--zui-typing-indicator-gradient-blue-to-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))]",
|
|
27
|
+
"gradient-green": "bg-linear-to-r from-[var(--zui-typing-indicator-gradient-green-from,var(--zui-color-green,oklch(44.8%_0.119_151.328)))] dark:from-[var(--zui-typing-indicator-gradient-green-from-dark,var(--zui-color-green-dark,oklch(62.7%_0.194_149.214)))] to-[var(--zui-typing-indicator-gradient-green-to,var(--zui-color-lime,oklch(45.3%_0.124_130.933)))] dark:to-[var(--zui-typing-indicator-gradient-green-to-dark,var(--zui-color-lime-dark,oklch(64.8%_0.2_131.684)))]",
|
|
28
|
+
"gradient-purple": "bg-linear-to-r from-[var(--zui-typing-indicator-gradient-purple-from,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:from-[var(--zui-typing-indicator-gradient-purple-from-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] to-[var(--zui-typing-indicator-gradient-purple-to,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:to-[var(--zui-typing-indicator-gradient-purple-to-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))]"
|
|
29
|
+
};
|
|
30
|
+
var zuiTypingIndicatorDotsBase = "inline-flex items-center";
|
|
31
|
+
var zuiTypingIndicatorDotBase = "rounded-full animate-bounce [animation-duration:1.4s]";
|
|
32
|
+
var zuiTypingIndicatorDotDelays = [
|
|
33
|
+
"[animation-delay:0s]",
|
|
34
|
+
"[animation-delay:0.16s]",
|
|
35
|
+
"[animation-delay:0.32s]"
|
|
36
|
+
];
|
|
37
|
+
var zuiTypingIndicatorSizes = {
|
|
38
|
+
sm: "gap-1",
|
|
39
|
+
md: "gap-1.5",
|
|
40
|
+
lg: "gap-2"
|
|
41
|
+
};
|
|
42
|
+
var zuiTypingIndicatorDotSizes = {
|
|
43
|
+
sm: "size-1.5",
|
|
44
|
+
md: "size-2",
|
|
45
|
+
lg: "size-2.5"
|
|
46
|
+
};
|
|
47
|
+
var zuiTypingIndicatorLabelBase = "text-[color:var(--zui-typing-indicator-label-fg,var(--zui-fg-muted,oklch(44.6%_0.043_257.287)))] dark:text-[color:var(--zui-typing-indicator-label-fg-dark,var(--zui-fg-muted-dark,oklch(86.9%_0.022_252.894)))]";
|
|
48
|
+
var zuiTypingIndicatorLabelSizes = {
|
|
49
|
+
sm: "text-xs",
|
|
50
|
+
md: "text-sm",
|
|
51
|
+
lg: "text-base"
|
|
52
|
+
};
|
|
53
|
+
var zuiTypingIndicatorContainerBase = "inline-flex items-center gap-2";
|
|
54
|
+
|
|
55
|
+
exports.zuiTypingIndicatorAppearances = zuiTypingIndicatorAppearances;
|
|
56
|
+
exports.zuiTypingIndicatorContainerBase = zuiTypingIndicatorContainerBase;
|
|
57
|
+
exports.zuiTypingIndicatorDotBase = zuiTypingIndicatorDotBase;
|
|
58
|
+
exports.zuiTypingIndicatorDotDelays = zuiTypingIndicatorDotDelays;
|
|
59
|
+
exports.zuiTypingIndicatorDotSizes = zuiTypingIndicatorDotSizes;
|
|
60
|
+
exports.zuiTypingIndicatorDotsBase = zuiTypingIndicatorDotsBase;
|
|
61
|
+
exports.zuiTypingIndicatorLabelBase = zuiTypingIndicatorLabelBase;
|
|
62
|
+
exports.zuiTypingIndicatorLabelSizes = zuiTypingIndicatorLabelSizes;
|
|
63
|
+
exports.zuiTypingIndicatorSizes = zuiTypingIndicatorSizes;
|
|
64
|
+
//# sourceMappingURL=chunk-HNPGWFVY.js.map
|
|
65
|
+
//# sourceMappingURL=chunk-HNPGWFVY.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/design-system/typing-indicator.ts"],"names":[],"mappings":";;;AAAO,IAAM,6BAAA,GAAgC;AAAA,EAC3C,OAAA,EACE,wMAAA;AAAA,EACF,MAAA,EACE,sNAAA;AAAA,EACF,KAAA,EACE,0MAAA;AAAA,EACF,OAAA,EACE,kMAAA;AAAA,EACF,IAAA,EAAM,sKAAA;AAAA,EACN,IAAA,EAAM,sKAAA;AAAA,EACN,KAAA,EACE,0KAAA;AAAA,EACF,IAAA,EAAM,sKAAA;AAAA,EACN,OAAA,EACE,sNAAA;AAAA,EACF,MAAA,EACE,oNAAA;AAAA,EACF,MAAA,EACE,oNAAA;AAAA,EACF,IAAA,EAAM,wMAAA;AAAA,EACN,IAAA,EAAM,0MAAA;AAAA,EACN,GAAA,EAAK,sMAAA;AAAA,EACL,IAAA,EAAM,2MAAA;AAAA,EACN,MAAA,EACE,kNAAA;AAAA,EACF,MAAA,EACE,gNAAA;AAAA,EACF,GAAA,EAAK,kKAAA;AAAA,EACL,KAAA,EACE,0KAAA;AAAA,EACF,IAAA,EAAM,4MAAA;AAAA,EACN,IAAA,EAAM,sKAAA;AAAA,EACN,eAAA,EACE,scAAA;AAAA,EACF,gBAAA,EACE,scAAA;AAAA,EACF,iBAAA,EACE;AACJ;AAEO,IAAM,0BAAA,GAA6B;AAEnC,IAAM,yBAAA,GACX;AAEK,IAAM,2BAAA,GAA8B;AAAA,EACzC,sBAAA;AAAA,EACA,yBAAA;AAAA,EACA;AACF;AAEO,IAAM,uBAAA,GAA0B;AAAA,EACrC,EAAA,EAAI,OAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAEO,IAAM,0BAAA,GAA6B;AAAA,EACxC,EAAA,EAAI,UAAA;AAAA,EACJ,EAAA,EAAI,QAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAEO,IAAM,2BAAA,GACX;AAEK,IAAM,4BAAA,GAA+B;AAAA,EAC1C,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAEO,IAAM,+BAAA,GAAkC","file":"chunk-HNPGWFVY.js","sourcesContent":["export const zuiTypingIndicatorAppearances = {\n default:\n \"bg-[var(--zui-typing-indicator-default-dot-bg,var(--zui-brand,oklch(20.8%_0.042_265.755)))] dark:bg-[var(--zui-typing-indicator-default-dot-bg-dark,var(--zui-brand-dark,oklch(98.4%_0.003_247.858)))]\",\n subtle:\n \"bg-[var(--zui-typing-indicator-subtle-dot-bg,var(--zui-surface-muted,oklch(92.9%_0.013_255.508)))] dark:bg-[var(--zui-typing-indicator-subtle-dot-bg-dark,var(--zui-surface-muted-dark,oklch(27.9%_0.041_260.031)))]\",\n muted:\n \"bg-[var(--zui-typing-indicator-muted-dot-bg,var(--zui-fg-muted,oklch(44.6%_0.043_257.281)))] dark:bg-[var(--zui-typing-indicator-muted-dot-bg-dark,var(--zui-fg-muted-dark,oklch(86.9%_0.022_252.894)))]\",\n primary:\n \"bg-[var(--zui-typing-indicator-primary-dot-bg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:bg-[var(--zui-typing-indicator-primary-dot-bg-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]\",\n blue: \"bg-[var(--zui-typing-indicator-blue-dot-bg,var(--zui-color-blue,#2563eb))] dark:bg-[var(--zui-typing-indicator-blue-dot-bg-dark,var(--zui-color-blue-dark,#3b82f6))]\",\n cyan: \"bg-[var(--zui-typing-indicator-cyan-dot-bg,var(--zui-color-cyan,#0891b2))] dark:bg-[var(--zui-typing-indicator-cyan-dot-bg-dark,var(--zui-color-cyan-dark,#22d3ee))]\",\n green:\n \"bg-[var(--zui-typing-indicator-green-dot-bg,var(--zui-color-green,#16a34a))] dark:bg-[var(--zui-typing-indicator-green-dot-bg-dark,var(--zui-color-green-dark,#22c55e))]\",\n lime: \"bg-[var(--zui-typing-indicator-lime-dot-bg,var(--zui-color-lime,#65a30d))] dark:bg-[var(--zui-typing-indicator-lime-dot-bg-dark,var(--zui-color-lime-dark,#a3e635))]\",\n emerald:\n \"bg-[var(--zui-typing-indicator-emerald-dot-bg,var(--zui-color-emerald,oklch(69.6%_0.17_162.48)))] dark:bg-[var(--zui-typing-indicator-emerald-dot-bg-dark,var(--zui-color-emerald-dark,oklch(43.2%_0.095_166.913)))]\",\n indigo:\n \"bg-[var(--zui-typing-indicator-indigo-dot-bg,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:bg-[var(--zui-typing-indicator-indigo-dot-bg-dark,var(--zui-color-indigo-dark,oklch(51.1%_0.262_276.966)))]\",\n purple:\n \"bg-[var(--zui-typing-indicator-purple-dot-bg,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:bg-[var(--zui-typing-indicator-purple-dot-bg-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))]\",\n pink: \"bg-[var(--zui-typing-indicator-pink-dot-bg,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:bg-[var(--zui-typing-indicator-pink-dot-bg-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))]\",\n rose: \"bg-[var(--zui-typing-indicator-rose-dot-bg,var(--zui-color-rose,oklch(64.5%_0.246_16.439)))] dark:bg-[var(--zui-typing-indicator-rose-dot-bg-dark,var(--zui-color-rose-dark,oklch(51.4%_0.222_16.935)))]\",\n sky: \"bg-[var(--zui-typing-indicator-sky-dot-bg,var(--zui-color-sky,oklch(68.5%_0.169_237.323)))] dark:bg-[var(--zui-typing-indicator-sky-dot-bg-dark,var(--zui-color-sky-dark,oklch(50%_0.134_242.749)))]\",\n teal: \"bg-[var(--zui-typing-indicator-teal-dot-bg,var(--zui-color-teal,oklch(70.4%_0.14_182.503)))] dark:bg-[var(--zui-typing-indicator-teal-dot-bg-dark,var(--zui-color-teal-dark,oklch(51.1%_0.096_186.391)))]\",\n yellow:\n \"bg-[var(--zui-typing-indicator-yellow-dot-bg,var(--zui-color-yellow,oklch(79.5%_0.184_86.047)))] dark:bg-[var(--zui-typing-indicator-yellow-dot-bg-dark,var(--zui-color-yellow-dark,oklch(47.6%_0.114_61.907)))]\",\n orange:\n \"bg-[var(--zui-typing-indicator-orange-dot-bg,var(--zui-color-orange,oklch(70.5%_0.213_47.604)))] dark:bg-[var(--zui-typing-indicator-orange-dot-bg-dark,var(--zui-color-orange-dark,oklch(47%_0.157_37.304)))]\",\n red: \"bg-[var(--zui-typing-indicator-red-dot-bg,var(--zui-color-red,#dc2626))] dark:bg-[var(--zui-typing-indicator-red-dot-bg-dark,var(--zui-color-red-dark,#ef4444))]\",\n slate:\n \"bg-[var(--zui-typing-indicator-slate-dot-bg,var(--zui-color-slate,#475569))] dark:bg-[var(--zui-typing-indicator-slate-dot-bg-dark,var(--zui-color-slate-dark,#64748b))]\",\n gray: \"bg-[var(--zui-typing-indicator-gray-dot-bg,var(--zui-color-gray,oklch(55.1%_0.027_264.364)))] dark:bg-[var(--zui-typing-indicator-gray-dot-bg-dark,var(--zui-color-gray-dark,oklch(55.1%_0.027_264.364)))]\",\n zinc: \"bg-[var(--zui-typing-indicator-zinc-dot-bg,var(--zui-color-zinc,#52525b))] dark:bg-[var(--zui-typing-indicator-zinc-dot-bg-dark,var(--zui-color-zinc-dark,#71717a))]\",\n \"gradient-blue\":\n \"bg-linear-to-r from-[var(--zui-typing-indicator-gradient-blue-from,var(--zui-color-blue,oklch(42.4%_0.199_265.638)))] dark:from-[var(--zui-typing-indicator-gradient-blue-from-dark,var(--zui-color-blue-dark,oklch(54.6%_0.245_262.881)))] to-[var(--zui-typing-indicator-gradient-blue-to,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:to-[var(--zui-typing-indicator-gradient-blue-to-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))]\",\n \"gradient-green\":\n \"bg-linear-to-r from-[var(--zui-typing-indicator-gradient-green-from,var(--zui-color-green,oklch(44.8%_0.119_151.328)))] dark:from-[var(--zui-typing-indicator-gradient-green-from-dark,var(--zui-color-green-dark,oklch(62.7%_0.194_149.214)))] to-[var(--zui-typing-indicator-gradient-green-to,var(--zui-color-lime,oklch(45.3%_0.124_130.933)))] dark:to-[var(--zui-typing-indicator-gradient-green-to-dark,var(--zui-color-lime-dark,oklch(64.8%_0.2_131.684)))]\",\n \"gradient-purple\":\n \"bg-linear-to-r from-[var(--zui-typing-indicator-gradient-purple-from,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:from-[var(--zui-typing-indicator-gradient-purple-from-dark,var(--zui-color-purple-dark,oklch(55.8%_0.288_302.321)))] to-[var(--zui-typing-indicator-gradient-purple-to,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:to-[var(--zui-typing-indicator-gradient-purple-to-dark,var(--zui-color-pink-dark,oklch(59.2%_0.249_0.584)))]\",\n} as const;\n\nexport const zuiTypingIndicatorDotsBase = \"inline-flex items-center\";\n\nexport const zuiTypingIndicatorDotBase =\n \"rounded-full animate-bounce [animation-duration:1.4s]\";\n\nexport const zuiTypingIndicatorDotDelays = [\n \"[animation-delay:0s]\",\n \"[animation-delay:0.16s]\",\n \"[animation-delay:0.32s]\",\n] as const;\n\nexport const zuiTypingIndicatorSizes = {\n sm: \"gap-1\",\n md: \"gap-1.5\",\n lg: \"gap-2\",\n} as const;\n\nexport const zuiTypingIndicatorDotSizes = {\n sm: \"size-1.5\",\n md: \"size-2\",\n lg: \"size-2.5\",\n} as const;\n\nexport const zuiTypingIndicatorLabelBase =\n \"text-[color:var(--zui-typing-indicator-label-fg,var(--zui-fg-muted,oklch(44.6%_0.043_257.287)))] dark:text-[color:var(--zui-typing-indicator-label-fg-dark,var(--zui-fg-muted-dark,oklch(86.9%_0.022_252.894)))]\";\n\nexport const zuiTypingIndicatorLabelSizes = {\n sm: \"text-xs\",\n md: \"text-sm\",\n lg: \"text-base\",\n} as const;\n\nexport const zuiTypingIndicatorContainerBase = \"inline-flex items-center gap-2\";\n"]}
|
|
@@ -0,0 +1,212 @@
|
|
|
1
|
+
import { zuiPasswordStrengthMeterBase, zuiPasswordStrengthMeterShapes, zuiPasswordStrengthMeterSizes, zuiPasswordStrengthMeterAppearances, zuiPasswordStrengthMeterTrackBase, zuiPasswordStrengthMeterTrackSizes, zuiPasswordStrengthMeterBarBase, zuiPasswordStrengthMeterBarSegmented } from './chunk-LOEKM3FL.mjs';
|
|
2
|
+
import { clamp, cn } from './chunk-4D54YOL6.mjs';
|
|
3
|
+
import { cva } from 'class-variance-authority';
|
|
4
|
+
import { createContext, useContext, useId, useMemo } from 'react';
|
|
5
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
var passwordStrengthMeterVariants = cva(zuiPasswordStrengthMeterBase, {
|
|
8
|
+
variants: {
|
|
9
|
+
appearance: zuiPasswordStrengthMeterAppearances,
|
|
10
|
+
size: zuiPasswordStrengthMeterSizes,
|
|
11
|
+
shape: zuiPasswordStrengthMeterShapes
|
|
12
|
+
},
|
|
13
|
+
defaultVariants: {
|
|
14
|
+
appearance: "default",
|
|
15
|
+
size: "md",
|
|
16
|
+
shape: "rounded"
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
var passwordStrengthMeterTrackVariants = cva(
|
|
20
|
+
zuiPasswordStrengthMeterTrackBase,
|
|
21
|
+
{
|
|
22
|
+
variants: {
|
|
23
|
+
size: zuiPasswordStrengthMeterTrackSizes,
|
|
24
|
+
shape: zuiPasswordStrengthMeterShapes
|
|
25
|
+
},
|
|
26
|
+
defaultVariants: {
|
|
27
|
+
size: "md",
|
|
28
|
+
shape: "rounded"
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
);
|
|
32
|
+
var passwordStrengthMeterBarVariants = cva(
|
|
33
|
+
zuiPasswordStrengthMeterBarBase,
|
|
34
|
+
{
|
|
35
|
+
variants: {
|
|
36
|
+
segmented: zuiPasswordStrengthMeterBarSegmented
|
|
37
|
+
},
|
|
38
|
+
defaultVariants: { segmented: false }
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
var PasswordStrengthMeterContext = createContext(null);
|
|
42
|
+
function usePasswordStrengthMeterContext(component) {
|
|
43
|
+
const ctx = useContext(PasswordStrengthMeterContext);
|
|
44
|
+
if (!ctx) {
|
|
45
|
+
throw new Error(`${component} must be used within <PasswordStrengthMeter>`);
|
|
46
|
+
}
|
|
47
|
+
return ctx;
|
|
48
|
+
}
|
|
49
|
+
function getStrengthLabel(percent) {
|
|
50
|
+
if (percent <= 20) return "Weak";
|
|
51
|
+
if (percent <= 40) return "Fair";
|
|
52
|
+
if (percent <= 60) return "Good";
|
|
53
|
+
if (percent <= 80) return "Strong";
|
|
54
|
+
return "Very strong";
|
|
55
|
+
}
|
|
56
|
+
function getStrengthColor(percent) {
|
|
57
|
+
if (percent <= 20)
|
|
58
|
+
return "text-[var(--zui-status-error,#dc2626)] dark:text-[var(--zui-status-error-dark,#ef4444)]";
|
|
59
|
+
if (percent <= 40)
|
|
60
|
+
return "text-[var(--zui-color-orange,#ea580c)] dark:text-[var(--zui-color-orange-dark,#fb923c)]";
|
|
61
|
+
if (percent <= 60)
|
|
62
|
+
return "text-[var(--zui-color-yellow,#ca8a04)] dark:text-[var(--zui-color-yellow-dark,#facc15)]";
|
|
63
|
+
if (percent <= 80)
|
|
64
|
+
return "text-[var(--zui-color-emerald,#16a34a)] dark:text-[var(--zui-color-emerald-dark,#22c55e)]";
|
|
65
|
+
return "text-[var(--zui-color-indigo,#4338ca)] dark:text-[var(--zui-color-indigo-dark,#818cf8)]";
|
|
66
|
+
}
|
|
67
|
+
function PasswordStrengthMeterBase(props) {
|
|
68
|
+
const {
|
|
69
|
+
className,
|
|
70
|
+
appearance = "default",
|
|
71
|
+
size = "md",
|
|
72
|
+
shape = "rounded",
|
|
73
|
+
animated = false,
|
|
74
|
+
segmented = false,
|
|
75
|
+
value = 0,
|
|
76
|
+
min = 0,
|
|
77
|
+
max = 100,
|
|
78
|
+
label,
|
|
79
|
+
scoreLabel,
|
|
80
|
+
showScoreLabel = true,
|
|
81
|
+
children,
|
|
82
|
+
ref,
|
|
83
|
+
as: Wrapper = "div",
|
|
84
|
+
...rest
|
|
85
|
+
} = props;
|
|
86
|
+
const clamped = clamp(value, min, max);
|
|
87
|
+
const percent = max === min ? 0 : (clamped - min) / (max - min) * 100;
|
|
88
|
+
const labelSlotId = `${useId()}-password-strength-meter-label`;
|
|
89
|
+
const hasInlineLabelProp = Boolean(label?.trim().length);
|
|
90
|
+
const labelingProps = useMemo(() => {
|
|
91
|
+
if (hasInlineLabelProp) {
|
|
92
|
+
return { "aria-label": label?.trim() ?? "Password strength" };
|
|
93
|
+
}
|
|
94
|
+
return { "aria-label": "Password strength" };
|
|
95
|
+
}, [hasInlineLabelProp, label]);
|
|
96
|
+
const ctx = useMemo(
|
|
97
|
+
() => ({
|
|
98
|
+
value: clamped,
|
|
99
|
+
min,
|
|
100
|
+
max,
|
|
101
|
+
size: size ?? "md",
|
|
102
|
+
shape: shape ?? "rounded",
|
|
103
|
+
animated: Boolean(animated),
|
|
104
|
+
segmented: Boolean(segmented),
|
|
105
|
+
appearance: appearance ?? "default",
|
|
106
|
+
labelSlotId
|
|
107
|
+
}),
|
|
108
|
+
[
|
|
109
|
+
animated,
|
|
110
|
+
appearance,
|
|
111
|
+
clamped,
|
|
112
|
+
labelSlotId,
|
|
113
|
+
max,
|
|
114
|
+
min,
|
|
115
|
+
shape,
|
|
116
|
+
size,
|
|
117
|
+
segmented
|
|
118
|
+
]
|
|
119
|
+
);
|
|
120
|
+
return /* @__PURE__ */ jsx(PasswordStrengthMeterContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
|
|
121
|
+
Wrapper,
|
|
122
|
+
{
|
|
123
|
+
ref,
|
|
124
|
+
"data-slot": "password-strength-meter",
|
|
125
|
+
role: "meter",
|
|
126
|
+
"aria-valuemin": min,
|
|
127
|
+
"aria-valuemax": max,
|
|
128
|
+
"aria-valuenow": clamped,
|
|
129
|
+
"aria-valuetext": getStrengthLabel(percent),
|
|
130
|
+
...labelingProps,
|
|
131
|
+
className: cn(
|
|
132
|
+
passwordStrengthMeterVariants({ appearance, size, shape }),
|
|
133
|
+
className
|
|
134
|
+
),
|
|
135
|
+
...rest,
|
|
136
|
+
children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
137
|
+
(label || showScoreLabel) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1.5", children: [
|
|
138
|
+
label && /* @__PURE__ */ jsx(
|
|
139
|
+
"span",
|
|
140
|
+
{
|
|
141
|
+
id: labelSlotId,
|
|
142
|
+
"data-slot": "password-strength-meter-label",
|
|
143
|
+
className: "text-xs font-medium",
|
|
144
|
+
children: label
|
|
145
|
+
}
|
|
146
|
+
),
|
|
147
|
+
showScoreLabel && /* @__PURE__ */ jsx(
|
|
148
|
+
"span",
|
|
149
|
+
{
|
|
150
|
+
"data-slot": "password-strength-meter-score-label",
|
|
151
|
+
className: cn(
|
|
152
|
+
"text-xs font-semibold",
|
|
153
|
+
getStrengthColor(percent)
|
|
154
|
+
),
|
|
155
|
+
children: scoreLabel ?? getStrengthLabel(percent)
|
|
156
|
+
}
|
|
157
|
+
)
|
|
158
|
+
] }),
|
|
159
|
+
/* @__PURE__ */ jsx(
|
|
160
|
+
PasswordStrengthMeterBar,
|
|
161
|
+
{
|
|
162
|
+
style: { transform: `scaleX(${percent / 100})` }
|
|
163
|
+
}
|
|
164
|
+
)
|
|
165
|
+
] })
|
|
166
|
+
}
|
|
167
|
+
) });
|
|
168
|
+
}
|
|
169
|
+
PasswordStrengthMeterBase.displayName = "PasswordStrengthMeter";
|
|
170
|
+
function PasswordStrengthMeterBar({
|
|
171
|
+
className,
|
|
172
|
+
style,
|
|
173
|
+
ref,
|
|
174
|
+
as: Wrapper = "div",
|
|
175
|
+
...rest
|
|
176
|
+
}) {
|
|
177
|
+
const { size, shape, animated, segmented } = usePasswordStrengthMeterContext(
|
|
178
|
+
"PasswordStrengthMeterBar"
|
|
179
|
+
);
|
|
180
|
+
return /* @__PURE__ */ jsx(
|
|
181
|
+
Wrapper,
|
|
182
|
+
{
|
|
183
|
+
"data-slot": "password-strength-meter-track",
|
|
184
|
+
className: cn(
|
|
185
|
+
passwordStrengthMeterTrackVariants({ size, shape }),
|
|
186
|
+
"text-current"
|
|
187
|
+
),
|
|
188
|
+
children: /* @__PURE__ */ jsx(
|
|
189
|
+
"div",
|
|
190
|
+
{
|
|
191
|
+
ref,
|
|
192
|
+
"data-slot": "password-strength-meter-bar",
|
|
193
|
+
className: cn(
|
|
194
|
+
passwordStrengthMeterBarVariants({ segmented }),
|
|
195
|
+
animated ? "animate-pulse" : void 0,
|
|
196
|
+
className
|
|
197
|
+
),
|
|
198
|
+
style: {
|
|
199
|
+
transformOrigin: "left center",
|
|
200
|
+
...style
|
|
201
|
+
},
|
|
202
|
+
...rest
|
|
203
|
+
}
|
|
204
|
+
)
|
|
205
|
+
}
|
|
206
|
+
);
|
|
207
|
+
}
|
|
208
|
+
PasswordStrengthMeterBar.displayName = "PasswordStrengthMeterBar";
|
|
209
|
+
|
|
210
|
+
export { PasswordStrengthMeterBar, PasswordStrengthMeterBase, PasswordStrengthMeterContext, getStrengthColor, getStrengthLabel, passwordStrengthMeterBarVariants, passwordStrengthMeterTrackVariants, passwordStrengthMeterVariants, usePasswordStrengthMeterContext };
|
|
211
|
+
//# sourceMappingURL=chunk-HR6MGXNI.mjs.map
|
|
212
|
+
//# sourceMappingURL=chunk-HR6MGXNI.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/ui/password-strength-meter/variants.ts","../src/ui/password-strength-meter/password-strength-meter-base.tsx"],"names":[],"mappings":"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","file":"chunk-HR6MGXNI.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n zuiPasswordStrengthMeterAppearances,\n zuiPasswordStrengthMeterBarBase,\n zuiPasswordStrengthMeterBarSegmented,\n zuiPasswordStrengthMeterBase,\n zuiPasswordStrengthMeterShapes,\n zuiPasswordStrengthMeterSizes,\n zuiPasswordStrengthMeterTrackBase,\n zuiPasswordStrengthMeterTrackSizes,\n} from \"../../design-system/password-strength-meter\";\n\nexport const passwordStrengthMeterVariants = cva(zuiPasswordStrengthMeterBase, {\n variants: {\n appearance: zuiPasswordStrengthMeterAppearances,\n size: zuiPasswordStrengthMeterSizes,\n shape: zuiPasswordStrengthMeterShapes,\n },\n defaultVariants: {\n appearance: \"default\",\n size: \"md\",\n shape: \"rounded\",\n },\n});\n\nexport const passwordStrengthMeterTrackVariants = cva(\n zuiPasswordStrengthMeterTrackBase,\n {\n variants: {\n size: zuiPasswordStrengthMeterTrackSizes,\n shape: zuiPasswordStrengthMeterShapes,\n },\n defaultVariants: {\n size: \"md\",\n shape: \"rounded\",\n },\n },\n);\n\nexport const passwordStrengthMeterBarVariants = cva(\n zuiPasswordStrengthMeterBarBase,\n {\n variants: {\n segmented: zuiPasswordStrengthMeterBarSegmented,\n },\n defaultVariants: { segmented: false },\n },\n);\n","\"use client\";\n\nimport { createContext, useContext, useMemo, useId } from \"react\";\n\nimport { cn, clamp } from \"../../lib/utils\";\n\nimport type {\n PasswordStrengthMeterProps,\n PasswordStrengthMeterSectionProps,\n PasswordStrengthMeterCtx,\n} from \"./types\";\nimport {\n passwordStrengthMeterBarVariants,\n passwordStrengthMeterTrackVariants,\n passwordStrengthMeterVariants,\n} from \"./variants\";\n\nexport const PasswordStrengthMeterContext =\n createContext<PasswordStrengthMeterCtx | null>(null);\n\nexport function usePasswordStrengthMeterContext(\n component: string,\n): PasswordStrengthMeterCtx {\n const ctx = useContext(PasswordStrengthMeterContext);\n if (!ctx) {\n throw new Error(`${component} must be used within <PasswordStrengthMeter>`);\n }\n return ctx;\n}\n\nexport function getStrengthLabel(percent: number): string {\n if (percent <= 20) return \"Weak\";\n if (percent <= 40) return \"Fair\";\n if (percent <= 60) return \"Good\";\n if (percent <= 80) return \"Strong\";\n return \"Very strong\";\n}\n\nexport function getStrengthColor(percent: number): string {\n if (percent <= 20)\n return \"text-[var(--zui-status-error,#dc2626)] dark:text-[var(--zui-status-error-dark,#ef4444)]\";\n if (percent <= 40)\n return \"text-[var(--zui-color-orange,#ea580c)] dark:text-[var(--zui-color-orange-dark,#fb923c)]\";\n if (percent <= 60)\n return \"text-[var(--zui-color-yellow,#ca8a04)] dark:text-[var(--zui-color-yellow-dark,#facc15)]\";\n if (percent <= 80)\n return \"text-[var(--zui-color-emerald,#16a34a)] dark:text-[var(--zui-color-emerald-dark,#22c55e)]\";\n return \"text-[var(--zui-color-indigo,#4338ca)] dark:text-[var(--zui-color-indigo-dark,#818cf8)]\";\n}\n\nexport function PasswordStrengthMeterBase(props: PasswordStrengthMeterProps) {\n const {\n className,\n appearance = \"default\",\n size = \"md\",\n shape = \"rounded\",\n animated = false,\n segmented = false,\n value = 0,\n min = 0,\n max = 100,\n label,\n scoreLabel,\n showScoreLabel = true,\n children,\n ref,\n as: Wrapper = \"div\",\n ...rest\n } = props;\n const clamped = clamp(value, min, max);\n const percent = max === min ? 0 : ((clamped - min) / (max - min)) * 100;\n const labelSlotId = `${useId()}-password-strength-meter-label`;\n const hasInlineLabelProp = Boolean(label?.trim().length);\n\n const labelingProps = useMemo(() => {\n if (hasInlineLabelProp) {\n return { \"aria-label\": label?.trim() ?? \"Password strength\" };\n }\n return { \"aria-label\": \"Password strength\" };\n }, [hasInlineLabelProp, label]);\n\n const ctx = useMemo(\n () => ({\n value: clamped,\n min,\n max,\n size: size ?? \"md\",\n shape: shape ?? \"rounded\",\n animated: Boolean(animated),\n segmented: Boolean(segmented),\n appearance: appearance ?? \"default\",\n labelSlotId,\n }),\n [\n animated,\n appearance,\n clamped,\n labelSlotId,\n max,\n min,\n shape,\n size,\n segmented,\n ],\n );\n\n return (\n <PasswordStrengthMeterContext.Provider value={ctx}>\n <Wrapper\n ref={ref}\n data-slot=\"password-strength-meter\"\n role=\"meter\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={clamped}\n aria-valuetext={getStrengthLabel(percent)}\n {...labelingProps}\n className={cn(\n passwordStrengthMeterVariants({ appearance, size, shape }),\n className,\n )}\n {...rest}\n >\n {children ?? (\n <>\n {(label || showScoreLabel) && (\n <div className=\"flex items-center justify-between mb-1.5\">\n {label && (\n <span\n id={labelSlotId}\n data-slot=\"password-strength-meter-label\"\n className=\"text-xs font-medium\"\n >\n {label}\n </span>\n )}\n {showScoreLabel && (\n <span\n data-slot=\"password-strength-meter-score-label\"\n className={cn(\n \"text-xs font-semibold\",\n getStrengthColor(percent),\n )}\n >\n {scoreLabel ?? getStrengthLabel(percent)}\n </span>\n )}\n </div>\n )}\n <PasswordStrengthMeterBar\n style={{ transform: `scaleX(${percent / 100})` }}\n />\n </>\n )}\n </Wrapper>\n </PasswordStrengthMeterContext.Provider>\n );\n}\n\nPasswordStrengthMeterBase.displayName = \"PasswordStrengthMeter\";\n\nexport function PasswordStrengthMeterBar({\n className,\n style,\n ref,\n as: Wrapper = \"div\",\n ...rest\n}: PasswordStrengthMeterSectionProps & {\n style?: React.CSSProperties;\n ref?: React.Ref<HTMLDivElement>;\n}) {\n const { size, shape, animated, segmented } = usePasswordStrengthMeterContext(\n \"PasswordStrengthMeterBar\",\n );\n\n return (\n <Wrapper\n data-slot=\"password-strength-meter-track\"\n className={cn(\n passwordStrengthMeterTrackVariants({ size, shape }),\n \"text-current\",\n )}\n >\n <div\n ref={ref}\n data-slot=\"password-strength-meter-bar\"\n className={cn(\n passwordStrengthMeterBarVariants({ segmented }),\n animated ? \"animate-pulse\" : undefined,\n className,\n )}\n style={{\n transformOrigin: \"left center\",\n ...style,\n }}\n {...rest}\n />\n </Wrapper>\n );\n}\n\nPasswordStrengthMeterBar.displayName = \"PasswordStrengthMeterBar\";\n"]}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
// src/design-system/password-strength-meter.ts
|
|
2
|
+
var zuiPasswordStrengthMeterBase = "w-full text-[color:var(--zui-password-strength-meter-fg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-password-strength-meter-fg-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]";
|
|
3
|
+
var zuiPasswordStrengthMeterAppearances = {
|
|
4
|
+
default: "[--psm-fill:var(--zui-password-strength-meter-default-fill,var(--zui-brand,oklch(20.8%_0.042_265.755)))] dark:[--psm-fill:var(--zui-password-strength-meter-default-fill-dark,var(--zui-brand-dark,oklch(98.4%_0.003_247.858)))]",
|
|
5
|
+
secondary: "[--psm-fill:var(--zui-password-strength-meter-secondary-fill,var(--zui-fg,oklch(44.6%_0.043_257.281)))] dark:[--psm-fill:var(--zui-password-strength-meter-secondary-fill-dark,var(--zui-fg-dark,oklch(86.9%_0.022_252.894)))]",
|
|
6
|
+
destructive: "[--psm-fill:var(--zui-password-strength-meter-destructive-fill,var(--zui-status-error,oklch(45.5%_0.188_13.697)))] dark:[--psm-fill:var(--zui-password-strength-meter-destructive-fill-dark,var(--zui-status-error-dark,oklch(71.2%_0.194_13.428)))]",
|
|
7
|
+
emerald: "[--psm-fill:var(--zui-password-strength-meter-emerald-fill,var(--zui-color-emerald,oklch(43.2%_0.095_166.913)))] dark:[--psm-fill:var(--zui-password-strength-meter-emerald-fill-dark,var(--zui-color-emerald-dark,oklch(76.5%_0.177_163.223)))]",
|
|
8
|
+
indigo: "[--psm-fill:var(--zui-password-strength-meter-indigo-fill,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:[--psm-fill:var(--zui-password-strength-meter-indigo-fill-dark,var(--zui-color-indigo-dark,oklch(67.3%_0.182_276.935)))]",
|
|
9
|
+
purple: "[--psm-fill:var(--zui-password-strength-meter-purple-fill,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:[--psm-fill:var(--zui-password-strength-meter-purple-fill-dark,var(--zui-color-purple-dark,oklch(71.4%_0.203_305.504)))]",
|
|
10
|
+
pink: "[--psm-fill:var(--zui-password-strength-meter-pink-fill,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:[--psm-fill:var(--zui-password-strength-meter-pink-fill-dark,var(--zui-color-pink-dark,oklch(71.8%_0.202_349.761)))]",
|
|
11
|
+
rose: "[--psm-fill:var(--zui-password-strength-meter-rose-fill,var(--zui-color-rose,oklch(45.5%_0.188_13.697)))] dark:[--psm-fill:var(--zui-password-strength-meter-rose-fill-dark,var(--zui-color-rose-dark,oklch(71.2%_0.194_13.428)))]",
|
|
12
|
+
sky: "[--psm-fill:var(--zui-password-strength-meter-sky-fill,var(--zui-color-sky,oklch(44.3%_0.11_240.79)))] dark:[--psm-fill:var(--zui-password-strength-meter-sky-fill-dark,var(--zui-color-sky-dark,oklch(74.6%_0.16_232.661)))]",
|
|
13
|
+
teal: "[--psm-fill:var(--zui-password-strength-meter-teal-fill,var(--zui-color-teal,oklch(43.7%_0.078_188.216)))] dark:[--psm-fill:var(--zui-password-strength-meter-teal-fill-dark,var(--zui-color-teal-dark,oklch(77.7%_0.152_181.912)))]",
|
|
14
|
+
yellow: "[--psm-fill:var(--zui-password-strength-meter-yellow-fill,var(--zui-color-yellow,oklch(47.6%_0.114_61.907)))] dark:[--psm-fill:var(--zui-password-strength-meter-yellow-fill-dark,var(--zui-color-yellow-dark,oklch(85.2%_0.199_91.936)))]",
|
|
15
|
+
orange: "[--psm-fill:var(--zui-password-strength-meter-orange-fill,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:[--psm-fill:var(--zui-password-strength-meter-orange-fill-dark,var(--zui-color-orange-dark,oklch(75%_0.183_55.934)))]",
|
|
16
|
+
outline: "[--psm-fill:var(--zui-password-strength-meter-outline-fill,var(--zui-fg,oklch(52%_0.105_223.128)))] dark:[--psm-fill:var(--zui-password-strength-meter-outline-fill-dark,var(--zui-fg-dark,oklch(86.5%_0.127_207.078)))]",
|
|
17
|
+
ghost: "[--psm-fill:var(--zui-password-strength-meter-ghost-fill,var(--zui-fg,oklch(27.9%_0.041_260.031)))] dark:[--psm-fill:var(--zui-password-strength-meter-ghost-fill-dark,var(--zui-fg-dark,oklch(92.9%_0.013_255.508)))]",
|
|
18
|
+
glass: "[--psm-fill:var(--zui-password-strength-meter-glass-fill,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:[--psm-fill:var(--zui-password-strength-meter-glass-fill-dark,var(--zui-fg-dark,#ffffff))]",
|
|
19
|
+
"gradient-blue": "[--psm-fill:var(--zui-password-strength-meter-gradient-blue-fill,var(--zui-color-blue,linear-gradient(90deg,oklch(62.3%_0.214_259.815)),oklch(62.7%_0.265_303.9)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-blue-fill-dark,var(--zui-color-blue-dark,linear-gradient(90deg,oklch(62.3%_0.214_259.815)),oklch(62.7%_0.265_303.9)))]",
|
|
20
|
+
"gradient-green": "[--psm-fill:var(--zui-password-strength-meter-gradient-green-fill,var(--zui-color-green,linear-gradient(90deg,oklch(72.3%_0.219_149.579)),oklch(76.8%_0.233_130.85)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-green-fill-dark,var(--zui-color-green-dark,linear-gradient(90deg,oklch(72.3%_0.219_149.579)),oklch(76.8%_0.233_130.85)))]",
|
|
21
|
+
"gradient-red": "[--psm-fill:var(--zui-password-strength-meter-gradient-red-fill,var(--zui-color-red,linear-gradient(90deg,oklch(63.7%_0.237_25.331)),oklch(65.6%_0.241_354.308)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-red-fill-dark,var(--zui-color-red-dark,linear-gradient(90deg,oklch(63.7%_0.237_25.331)),oklch(65.6%_0.241_354.308)))]",
|
|
22
|
+
"gradient-yellow": "[--psm-fill:var(--zui-password-strength-meter-gradient-yellow-fill,var(--zui-color-yellow,linear-gradient(90deg,oklch(79.5%_0.184_86.047)),oklch(70.5%_0.213_47.604)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-yellow-fill-dark,var(--zui-color-yellow-dark,linear-gradient(90deg,oklch(79.5%_0.184_86.047)),oklch(70.5%_0.213_47.604)))]",
|
|
23
|
+
"gradient-purple": "[--psm-fill:var(--zui-password-strength-meter-gradient-purple-fill,var(--zui-color-purple,linear-gradient(90deg,oklch(62.7%_0.265_303.9)),oklch(65.6%_0.241_354.308)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-purple-fill-dark,var(--zui-color-purple-dark,linear-gradient(90deg,oklch(62.7%_0.265_303.9)),oklch(65.6%_0.241_354.308)))]",
|
|
24
|
+
"gradient-teal": "[--psm-fill:var(--zui-password-strength-meter-gradient-teal-fill,var(--zui-color-teal,linear-gradient(90deg,oklch(70.4%_0.14_182.503)),oklch(71.5%_0.143_215.221)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-teal-fill-dark,var(--zui-color-teal-dark,linear-gradient(90deg,oklch(70.4%_0.14_182.503)),oklch(71.5%_0.143_215.221)))]",
|
|
25
|
+
"gradient-indigo": "[--psm-fill:var(--zui-password-strength-meter-gradient-indigo-fill,var(--zui-color-indigo,linear-gradient(90deg,oklch(58.5%_0.233_277.117)),oklch(62.7%_0.265_303.9)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-indigo-fill-dark,var(--zui-color-indigo-dark,linear-gradient(90deg,oklch(58.5%_0.233_277.117)),oklch(62.7%_0.265_303.9)))]",
|
|
26
|
+
"gradient-pink": "[--psm-fill:var(--zui-password-strength-meter-gradient-pink-fill,var(--zui-color-pink,linear-gradient(90deg,oklch(65.6%_0.241_354.308)),oklch(64.5%_0.246_16.439)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-pink-fill-dark,var(--zui-color-pink-dark,linear-gradient(90deg,oklch(65.6%_0.241_354.308)),oklch(64.5%_0.246_16.439)))]",
|
|
27
|
+
"gradient-orange": "[--psm-fill:var(--zui-password-strength-meter-gradient-orange-fill,var(--zui-color-orange,linear-gradient(90deg,oklch(70.5%_0.213_47.604)),oklch(63.7%_0.237_25.331)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-orange-fill-dark,var(--zui-color-orange-dark,linear-gradient(90deg,oklch(70.5%_0.213_47.604)),oklch(63.7%_0.237_25.331)))]",
|
|
28
|
+
blue: "[--psm-fill:var(--zui-password-strength-meter-blue-fill,var(--zui-color-blue,#2563eb))] dark:[--psm-fill:var(--zui-password-strength-meter-blue-fill-dark,var(--zui-color-blue-dark,#3b82f6))]",
|
|
29
|
+
cyan: "[--psm-fill:var(--zui-password-strength-meter-cyan-fill,var(--zui-color-cyan,#0891b2))] dark:[--psm-fill:var(--zui-password-strength-meter-cyan-fill-dark,var(--zui-color-cyan-dark,#22d3ee))]",
|
|
30
|
+
green: "[--psm-fill:var(--zui-password-strength-meter-green-fill,var(--zui-color-green,#16a34a))] dark:[--psm-fill:var(--zui-password-strength-meter-green-fill-dark,var(--zui-color-green-dark,#22c55e))]",
|
|
31
|
+
lime: "[--psm-fill:var(--zui-password-strength-meter-lime-fill,var(--zui-color-lime,#65a30d))] dark:[--psm-fill:var(--zui-password-strength-meter-lime-fill-dark,var(--zui-color-lime-dark,#a3e635))]",
|
|
32
|
+
mint: "[--psm-fill:var(--zui-password-strength-meter-mint-fill,var(--zui-color-mint,#10b981))] dark:[--psm-fill:var(--zui-password-strength-meter-mint-fill-dark,var(--zui-color-mint-dark,#6ee7b7))]",
|
|
33
|
+
ocean: "[--psm-fill:var(--zui-password-strength-meter-ocean-fill,var(--zui-color-ocean,#0284c7))] dark:[--psm-fill:var(--zui-password-strength-meter-ocean-fill-dark,var(--zui-color-ocean-dark,#38bdf8))]",
|
|
34
|
+
sapphire: "[--psm-fill:var(--zui-password-strength-meter-sapphire-fill,var(--zui-color-sapphire,#1d4ed8))] dark:[--psm-fill:var(--zui-password-strength-meter-sapphire-fill-dark,var(--zui-color-sapphire-dark,#60a5fa))]",
|
|
35
|
+
lavender: "[--psm-fill:var(--zui-password-strength-meter-lavender-fill,var(--zui-color-lavender,#8b5cf6))] dark:[--psm-fill:var(--zui-password-strength-meter-lavender-fill-dark,var(--zui-color-lavender-dark,#a78bfa))]",
|
|
36
|
+
ruby: "[--psm-fill:var(--zui-password-strength-meter-ruby-fill,var(--zui-color-ruby,#be123c))] dark:[--psm-fill:var(--zui-password-strength-meter-ruby-fill-dark,var(--zui-color-ruby-dark,#fb7185))]",
|
|
37
|
+
red: "[--psm-fill:var(--zui-password-strength-meter-red-fill,var(--zui-color-red,#dc2626))] dark:[--psm-fill:var(--zui-password-strength-meter-red-fill-dark,var(--zui-color-red-dark,#ef4444))]",
|
|
38
|
+
slate: "[--psm-fill:var(--zui-password-strength-meter-slate-fill,var(--zui-color-slate,#475569))] dark:[--psm-fill:var(--zui-password-strength-meter-slate-fill-dark,var(--zui-color-slate-dark,#64748b))]",
|
|
39
|
+
zinc: "[--psm-fill:var(--zui-password-strength-meter-zinc-fill,var(--zui-color-zinc,#52525b))] dark:[--psm-fill:var(--zui-password-strength-meter-zinc-fill-dark,var(--zui-color-zinc-dark,#71717a))]",
|
|
40
|
+
stone: "[--psm-fill:var(--zui-password-strength-meter-stone-fill,var(--zui-color-stone,#57534e))] dark:[--psm-fill:var(--zui-password-strength-meter-stone-fill-dark,var(--zui-color-stone-dark,#78716c))]",
|
|
41
|
+
royal: "[--psm-fill:var(--zui-password-strength-meter-royal-fill,var(--zui-color-royal,#4338ca))] dark:[--psm-fill:var(--zui-password-strength-meter-royal-fill-dark,var(--zui-color-royal-dark,#818cf8))]",
|
|
42
|
+
electric: "[--psm-fill:var(--zui-password-strength-meter-electric-fill,var(--zui-color-electric,#0ea5e9))] dark:[--psm-fill:var(--zui-password-strength-meter-electric-fill-dark,var(--zui-color-electric-dark,#38bdf8))]",
|
|
43
|
+
forest: "[--psm-fill:var(--zui-password-strength-meter-forest-fill,var(--zui-color-forest,#166534))] dark:[--psm-fill:var(--zui-password-strength-meter-forest-fill-dark,var(--zui-color-forest-dark,#4ade80))]",
|
|
44
|
+
sunset: "[--psm-fill:var(--zui-password-strength-meter-sunset-fill,var(--zui-color-sunset,#ea580c))] dark:[--psm-fill:var(--zui-password-strength-meter-sunset-fill-dark,var(--zui-color-sunset-dark,#fb923c))]",
|
|
45
|
+
magenta: "[--psm-fill:var(--zui-password-strength-meter-magenta-fill,var(--zui-color-magenta,#c026d3))] dark:[--psm-fill:var(--zui-password-strength-meter-magenta-fill-dark,var(--zui-color-magenta-dark,#e879f9))]",
|
|
46
|
+
crimson: "[--psm-fill:var(--zui-password-strength-meter-crimson-fill,var(--zui-color-crimson,#b91c1c))] dark:[--psm-fill:var(--zui-password-strength-meter-crimson-fill-dark,var(--zui-color-crimson-dark,#f87171))]",
|
|
47
|
+
aqua: "[--psm-fill:var(--zui-password-strength-meter-aqua-fill,var(--zui-color-aqua,#0f766e))] dark:[--psm-fill:var(--zui-password-strength-meter-aqua-fill-dark,var(--zui-color-aqua-dark,#2dd4bf))]",
|
|
48
|
+
plum: "[--psm-fill:var(--zui-password-strength-meter-plum-fill,var(--zui-color-plum,#7e22ce))] dark:[--psm-fill:var(--zui-password-strength-meter-plum-fill-dark,var(--zui-color-plum-dark,#c084fc))]"
|
|
49
|
+
};
|
|
50
|
+
var zuiPasswordStrengthMeterSizes = {
|
|
51
|
+
xs: "text-[0.65rem]",
|
|
52
|
+
sm: "text-xs",
|
|
53
|
+
md: "text-sm",
|
|
54
|
+
lg: "text-base",
|
|
55
|
+
xl: "text-lg"
|
|
56
|
+
};
|
|
57
|
+
var zuiPasswordStrengthMeterShapes = {
|
|
58
|
+
flat: "rounded-none",
|
|
59
|
+
rounded: "rounded-md",
|
|
60
|
+
pill: "rounded-full"
|
|
61
|
+
};
|
|
62
|
+
var zuiPasswordStrengthMeterTrackBase = "relative w-full overflow-hidden bg-[var(--zui-password-strength-meter-track-bg,var(--zui-surface-muted,#0000001a))] dark:bg-[var(--zui-password-strength-meter-track-bg-dark,var(--zui-surface-muted-dark,#ffffff1a))]";
|
|
63
|
+
var zuiPasswordStrengthMeterTrackSizes = {
|
|
64
|
+
xs: "h-1",
|
|
65
|
+
sm: "h-1.5",
|
|
66
|
+
md: "h-2",
|
|
67
|
+
lg: "h-3",
|
|
68
|
+
xl: "h-4"
|
|
69
|
+
};
|
|
70
|
+
var zuiPasswordStrengthMeterBarBase = "h-full w-full origin-left rounded-[inherit]";
|
|
71
|
+
var zuiPasswordStrengthMeterBarSegmented = {
|
|
72
|
+
true: "[background:var(--zui-password-strength-meter-bar-bg-segmented,linear-gradient(90deg,var(--zui-status-error,oklch(45.5%_0.188_13.697))_0 calc(100%/5),var(--zui-color-orange,oklch(47%_0.157_37.304))_0 calc(200%/5),var(--zui-color-yellow,oklch(47.6%_0.114_61.907))_0 calc(300%/5),var(--zui-color-emerald,oklch(43.2%_0.095_166.913))_0 calc(400%/5),var(--zui-color-indigo,oklch(39.8%_0.195_277.366))_0))] dark:[background:var(--zui-password-strength-meter-bar-bg-segmented-dark,linear-gradient(90deg,var(--zui-status-error-dark,oklch(71.2%_0.194_13.428))_0 calc(100%/5),var(--zui-color-orange-dark,oklch(75%_0.183_55.934))_0 calc(200%/5),var(--zui-color-yellow-dark,oklch(85.2%_0.199_91.936))_0 calc(300%/5),var(--zui-color-emerald-dark,oklch(76.5%_0.177_163.223))_0 calc(400%/5),var(--zui-color-indigo-dark,oklch(67.3%_0.182_276.935))_0))]",
|
|
73
|
+
false: "[background:var(--psm-fill)]"
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
export { zuiPasswordStrengthMeterAppearances, zuiPasswordStrengthMeterBarBase, zuiPasswordStrengthMeterBarSegmented, zuiPasswordStrengthMeterBase, zuiPasswordStrengthMeterShapes, zuiPasswordStrengthMeterSizes, zuiPasswordStrengthMeterTrackBase, zuiPasswordStrengthMeterTrackSizes };
|
|
77
|
+
//# sourceMappingURL=chunk-LOEKM3FL.mjs.map
|
|
78
|
+
//# sourceMappingURL=chunk-LOEKM3FL.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/design-system/password-strength-meter.ts"],"names":[],"mappings":";AAAO,IAAM,4BAAA,GACX;AAEK,IAAM,mCAAA,GAAsC;AAAA,EACjD,OAAA,EACE,kOAAA;AAAA,EACF,SAAA,EACE,gOAAA;AAAA,EACF,WAAA,EACE,sPAAA;AAAA,EACF,OAAA,EACE,kPAAA;AAAA,EACF,MAAA,EACE,8OAAA;AAAA,EACF,MAAA,EACE,8OAAA;AAAA,EACF,IAAA,EAAM,oOAAA;AAAA,EACN,IAAA,EAAM,oOAAA;AAAA,EACN,GAAA,EAAK,+NAAA;AAAA,EACL,IAAA,EAAM,sOAAA;AAAA,EACN,MAAA,EACE,4OAAA;AAAA,EACF,MAAA,EACE,wOAAA;AAAA,EACF,OAAA,EACE,0NAAA;AAAA,EACF,KAAA,EACE,wNAAA;AAAA,EACF,KAAA,EACE,qMAAA;AAAA,EACF,eAAA,EACE,wVAAA;AAAA,EACF,gBAAA,EACE,8VAAA;AAAA,EACF,cAAA,EACE,sVAAA;AAAA,EACF,iBAAA,EACE,gWAAA;AAAA,EACF,iBAAA,EACE,gWAAA;AAAA,EACF,eAAA,EACE,0VAAA;AAAA,EACF,iBAAA,EACE,gWAAA;AAAA,EACF,eAAA,EACE,0VAAA;AAAA,EACF,iBAAA,EACE,gWAAA;AAAA,EACF,IAAA,EAAM,gMAAA;AAAA,EACN,IAAA,EAAM,gMAAA;AAAA,EACN,KAAA,EACE,oMAAA;AAAA,EACF,IAAA,EAAM,gMAAA;AAAA,EACN,IAAA,EAAM,gMAAA;AAAA,EACN,KAAA,EACE,oMAAA;AAAA,EACF,QAAA,EACE,gNAAA;AAAA,EACF,QAAA,EACE,gNAAA;AAAA,EACF,IAAA,EAAM,gMAAA;AAAA,EACN,GAAA,EAAK,4LAAA;AAAA,EACL,KAAA,EACE,oMAAA;AAAA,EACF,IAAA,EAAM,gMAAA;AAAA,EACN,KAAA,EACE,oMAAA;AAAA,EACF,KAAA,EACE,oMAAA;AAAA,EACF,QAAA,EACE,gNAAA;AAAA,EACF,MAAA,EACE,wMAAA;AAAA,EACF,MAAA,EACE,wMAAA;AAAA,EACF,OAAA,EACE,4MAAA;AAAA,EACF,OAAA,EACE,4MAAA;AAAA,EACF,IAAA,EAAM,gMAAA;AAAA,EACN,IAAA,EAAM;AACR;AAEO,IAAM,6BAAA,GAAgC;AAAA,EAC3C,EAAA,EAAI,gBAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,SAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAEO,IAAM,8BAAA,GAAiC;AAAA,EAC5C,IAAA,EAAM,cAAA;AAAA,EACN,OAAA,EAAS,YAAA;AAAA,EACT,IAAA,EAAM;AACR;AAEO,IAAM,iCAAA,GACX;AAEK,IAAM,kCAAA,GAAqC;AAAA,EAChD,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,OAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI;AACN;AAEO,IAAM,+BAAA,GACX;AAEK,IAAM,oCAAA,GAAuC;AAAA,EAClD,IAAA,EAAM,s0BAAA;AAAA,EACN,KAAA,EAAO;AACT","file":"chunk-LOEKM3FL.mjs","sourcesContent":["export const zuiPasswordStrengthMeterBase =\n \"w-full text-[color:var(--zui-password-strength-meter-fg,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:text-[color:var(--zui-password-strength-meter-fg-dark,var(--zui-fg-dark,oklch(98.4%_0.003_247.858)))]\";\n\nexport const zuiPasswordStrengthMeterAppearances = {\n default:\n \"[--psm-fill:var(--zui-password-strength-meter-default-fill,var(--zui-brand,oklch(20.8%_0.042_265.755)))] dark:[--psm-fill:var(--zui-password-strength-meter-default-fill-dark,var(--zui-brand-dark,oklch(98.4%_0.003_247.858)))]\",\n secondary:\n \"[--psm-fill:var(--zui-password-strength-meter-secondary-fill,var(--zui-fg,oklch(44.6%_0.043_257.281)))] dark:[--psm-fill:var(--zui-password-strength-meter-secondary-fill-dark,var(--zui-fg-dark,oklch(86.9%_0.022_252.894)))]\",\n destructive:\n \"[--psm-fill:var(--zui-password-strength-meter-destructive-fill,var(--zui-status-error,oklch(45.5%_0.188_13.697)))] dark:[--psm-fill:var(--zui-password-strength-meter-destructive-fill-dark,var(--zui-status-error-dark,oklch(71.2%_0.194_13.428)))]\",\n emerald:\n \"[--psm-fill:var(--zui-password-strength-meter-emerald-fill,var(--zui-color-emerald,oklch(43.2%_0.095_166.913)))] dark:[--psm-fill:var(--zui-password-strength-meter-emerald-fill-dark,var(--zui-color-emerald-dark,oklch(76.5%_0.177_163.223)))]\",\n indigo:\n \"[--psm-fill:var(--zui-password-strength-meter-indigo-fill,var(--zui-color-indigo,oklch(39.8%_0.195_277.366)))] dark:[--psm-fill:var(--zui-password-strength-meter-indigo-fill-dark,var(--zui-color-indigo-dark,oklch(67.3%_0.182_276.935)))]\",\n purple:\n \"[--psm-fill:var(--zui-password-strength-meter-purple-fill,var(--zui-color-purple,oklch(43.8%_0.218_303.724)))] dark:[--psm-fill:var(--zui-password-strength-meter-purple-fill-dark,var(--zui-color-purple-dark,oklch(71.4%_0.203_305.504)))]\",\n pink: \"[--psm-fill:var(--zui-password-strength-meter-pink-fill,var(--zui-color-pink,oklch(45.9%_0.187_3.815)))] dark:[--psm-fill:var(--zui-password-strength-meter-pink-fill-dark,var(--zui-color-pink-dark,oklch(71.8%_0.202_349.761)))]\",\n rose: \"[--psm-fill:var(--zui-password-strength-meter-rose-fill,var(--zui-color-rose,oklch(45.5%_0.188_13.697)))] dark:[--psm-fill:var(--zui-password-strength-meter-rose-fill-dark,var(--zui-color-rose-dark,oklch(71.2%_0.194_13.428)))]\",\n sky: \"[--psm-fill:var(--zui-password-strength-meter-sky-fill,var(--zui-color-sky,oklch(44.3%_0.11_240.79)))] dark:[--psm-fill:var(--zui-password-strength-meter-sky-fill-dark,var(--zui-color-sky-dark,oklch(74.6%_0.16_232.661)))]\",\n teal: \"[--psm-fill:var(--zui-password-strength-meter-teal-fill,var(--zui-color-teal,oklch(43.7%_0.078_188.216)))] dark:[--psm-fill:var(--zui-password-strength-meter-teal-fill-dark,var(--zui-color-teal-dark,oklch(77.7%_0.152_181.912)))]\",\n yellow:\n \"[--psm-fill:var(--zui-password-strength-meter-yellow-fill,var(--zui-color-yellow,oklch(47.6%_0.114_61.907)))] dark:[--psm-fill:var(--zui-password-strength-meter-yellow-fill-dark,var(--zui-color-yellow-dark,oklch(85.2%_0.199_91.936)))]\",\n orange:\n \"[--psm-fill:var(--zui-password-strength-meter-orange-fill,var(--zui-color-orange,oklch(47%_0.157_37.304)))] dark:[--psm-fill:var(--zui-password-strength-meter-orange-fill-dark,var(--zui-color-orange-dark,oklch(75%_0.183_55.934)))]\",\n outline:\n \"[--psm-fill:var(--zui-password-strength-meter-outline-fill,var(--zui-fg,oklch(52%_0.105_223.128)))] dark:[--psm-fill:var(--zui-password-strength-meter-outline-fill-dark,var(--zui-fg-dark,oklch(86.5%_0.127_207.078)))]\",\n ghost:\n \"[--psm-fill:var(--zui-password-strength-meter-ghost-fill,var(--zui-fg,oklch(27.9%_0.041_260.031)))] dark:[--psm-fill:var(--zui-password-strength-meter-ghost-fill-dark,var(--zui-fg-dark,oklch(92.9%_0.013_255.508)))]\",\n glass:\n \"[--psm-fill:var(--zui-password-strength-meter-glass-fill,var(--zui-fg,oklch(20.8%_0.042_265.755)))] dark:[--psm-fill:var(--zui-password-strength-meter-glass-fill-dark,var(--zui-fg-dark,#ffffff))]\",\n \"gradient-blue\":\n \"[--psm-fill:var(--zui-password-strength-meter-gradient-blue-fill,var(--zui-color-blue,linear-gradient(90deg,oklch(62.3%_0.214_259.815)),oklch(62.7%_0.265_303.9)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-blue-fill-dark,var(--zui-color-blue-dark,linear-gradient(90deg,oklch(62.3%_0.214_259.815)),oklch(62.7%_0.265_303.9)))]\",\n \"gradient-green\":\n \"[--psm-fill:var(--zui-password-strength-meter-gradient-green-fill,var(--zui-color-green,linear-gradient(90deg,oklch(72.3%_0.219_149.579)),oklch(76.8%_0.233_130.85)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-green-fill-dark,var(--zui-color-green-dark,linear-gradient(90deg,oklch(72.3%_0.219_149.579)),oklch(76.8%_0.233_130.85)))]\",\n \"gradient-red\":\n \"[--psm-fill:var(--zui-password-strength-meter-gradient-red-fill,var(--zui-color-red,linear-gradient(90deg,oklch(63.7%_0.237_25.331)),oklch(65.6%_0.241_354.308)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-red-fill-dark,var(--zui-color-red-dark,linear-gradient(90deg,oklch(63.7%_0.237_25.331)),oklch(65.6%_0.241_354.308)))]\",\n \"gradient-yellow\":\n \"[--psm-fill:var(--zui-password-strength-meter-gradient-yellow-fill,var(--zui-color-yellow,linear-gradient(90deg,oklch(79.5%_0.184_86.047)),oklch(70.5%_0.213_47.604)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-yellow-fill-dark,var(--zui-color-yellow-dark,linear-gradient(90deg,oklch(79.5%_0.184_86.047)),oklch(70.5%_0.213_47.604)))]\",\n \"gradient-purple\":\n \"[--psm-fill:var(--zui-password-strength-meter-gradient-purple-fill,var(--zui-color-purple,linear-gradient(90deg,oklch(62.7%_0.265_303.9)),oklch(65.6%_0.241_354.308)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-purple-fill-dark,var(--zui-color-purple-dark,linear-gradient(90deg,oklch(62.7%_0.265_303.9)),oklch(65.6%_0.241_354.308)))]\",\n \"gradient-teal\":\n \"[--psm-fill:var(--zui-password-strength-meter-gradient-teal-fill,var(--zui-color-teal,linear-gradient(90deg,oklch(70.4%_0.14_182.503)),oklch(71.5%_0.143_215.221)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-teal-fill-dark,var(--zui-color-teal-dark,linear-gradient(90deg,oklch(70.4%_0.14_182.503)),oklch(71.5%_0.143_215.221)))]\",\n \"gradient-indigo\":\n \"[--psm-fill:var(--zui-password-strength-meter-gradient-indigo-fill,var(--zui-color-indigo,linear-gradient(90deg,oklch(58.5%_0.233_277.117)),oklch(62.7%_0.265_303.9)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-indigo-fill-dark,var(--zui-color-indigo-dark,linear-gradient(90deg,oklch(58.5%_0.233_277.117)),oklch(62.7%_0.265_303.9)))]\",\n \"gradient-pink\":\n \"[--psm-fill:var(--zui-password-strength-meter-gradient-pink-fill,var(--zui-color-pink,linear-gradient(90deg,oklch(65.6%_0.241_354.308)),oklch(64.5%_0.246_16.439)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-pink-fill-dark,var(--zui-color-pink-dark,linear-gradient(90deg,oklch(65.6%_0.241_354.308)),oklch(64.5%_0.246_16.439)))]\",\n \"gradient-orange\":\n \"[--psm-fill:var(--zui-password-strength-meter-gradient-orange-fill,var(--zui-color-orange,linear-gradient(90deg,oklch(70.5%_0.213_47.604)),oklch(63.7%_0.237_25.331)))] dark:[--psm-fill:var(--zui-password-strength-meter-gradient-orange-fill-dark,var(--zui-color-orange-dark,linear-gradient(90deg,oklch(70.5%_0.213_47.604)),oklch(63.7%_0.237_25.331)))]\",\n blue: \"[--psm-fill:var(--zui-password-strength-meter-blue-fill,var(--zui-color-blue,#2563eb))] dark:[--psm-fill:var(--zui-password-strength-meter-blue-fill-dark,var(--zui-color-blue-dark,#3b82f6))]\",\n cyan: \"[--psm-fill:var(--zui-password-strength-meter-cyan-fill,var(--zui-color-cyan,#0891b2))] dark:[--psm-fill:var(--zui-password-strength-meter-cyan-fill-dark,var(--zui-color-cyan-dark,#22d3ee))]\",\n green:\n \"[--psm-fill:var(--zui-password-strength-meter-green-fill,var(--zui-color-green,#16a34a))] dark:[--psm-fill:var(--zui-password-strength-meter-green-fill-dark,var(--zui-color-green-dark,#22c55e))]\",\n lime: \"[--psm-fill:var(--zui-password-strength-meter-lime-fill,var(--zui-color-lime,#65a30d))] dark:[--psm-fill:var(--zui-password-strength-meter-lime-fill-dark,var(--zui-color-lime-dark,#a3e635))]\",\n mint: \"[--psm-fill:var(--zui-password-strength-meter-mint-fill,var(--zui-color-mint,#10b981))] dark:[--psm-fill:var(--zui-password-strength-meter-mint-fill-dark,var(--zui-color-mint-dark,#6ee7b7))]\",\n ocean:\n \"[--psm-fill:var(--zui-password-strength-meter-ocean-fill,var(--zui-color-ocean,#0284c7))] dark:[--psm-fill:var(--zui-password-strength-meter-ocean-fill-dark,var(--zui-color-ocean-dark,#38bdf8))]\",\n sapphire:\n \"[--psm-fill:var(--zui-password-strength-meter-sapphire-fill,var(--zui-color-sapphire,#1d4ed8))] dark:[--psm-fill:var(--zui-password-strength-meter-sapphire-fill-dark,var(--zui-color-sapphire-dark,#60a5fa))]\",\n lavender:\n \"[--psm-fill:var(--zui-password-strength-meter-lavender-fill,var(--zui-color-lavender,#8b5cf6))] dark:[--psm-fill:var(--zui-password-strength-meter-lavender-fill-dark,var(--zui-color-lavender-dark,#a78bfa))]\",\n ruby: \"[--psm-fill:var(--zui-password-strength-meter-ruby-fill,var(--zui-color-ruby,#be123c))] dark:[--psm-fill:var(--zui-password-strength-meter-ruby-fill-dark,var(--zui-color-ruby-dark,#fb7185))]\",\n red: \"[--psm-fill:var(--zui-password-strength-meter-red-fill,var(--zui-color-red,#dc2626))] dark:[--psm-fill:var(--zui-password-strength-meter-red-fill-dark,var(--zui-color-red-dark,#ef4444))]\",\n slate:\n \"[--psm-fill:var(--zui-password-strength-meter-slate-fill,var(--zui-color-slate,#475569))] dark:[--psm-fill:var(--zui-password-strength-meter-slate-fill-dark,var(--zui-color-slate-dark,#64748b))]\",\n zinc: \"[--psm-fill:var(--zui-password-strength-meter-zinc-fill,var(--zui-color-zinc,#52525b))] dark:[--psm-fill:var(--zui-password-strength-meter-zinc-fill-dark,var(--zui-color-zinc-dark,#71717a))]\",\n stone:\n \"[--psm-fill:var(--zui-password-strength-meter-stone-fill,var(--zui-color-stone,#57534e))] dark:[--psm-fill:var(--zui-password-strength-meter-stone-fill-dark,var(--zui-color-stone-dark,#78716c))]\",\n royal:\n \"[--psm-fill:var(--zui-password-strength-meter-royal-fill,var(--zui-color-royal,#4338ca))] dark:[--psm-fill:var(--zui-password-strength-meter-royal-fill-dark,var(--zui-color-royal-dark,#818cf8))]\",\n electric:\n \"[--psm-fill:var(--zui-password-strength-meter-electric-fill,var(--zui-color-electric,#0ea5e9))] dark:[--psm-fill:var(--zui-password-strength-meter-electric-fill-dark,var(--zui-color-electric-dark,#38bdf8))]\",\n forest:\n \"[--psm-fill:var(--zui-password-strength-meter-forest-fill,var(--zui-color-forest,#166534))] dark:[--psm-fill:var(--zui-password-strength-meter-forest-fill-dark,var(--zui-color-forest-dark,#4ade80))]\",\n sunset:\n \"[--psm-fill:var(--zui-password-strength-meter-sunset-fill,var(--zui-color-sunset,#ea580c))] dark:[--psm-fill:var(--zui-password-strength-meter-sunset-fill-dark,var(--zui-color-sunset-dark,#fb923c))]\",\n magenta:\n \"[--psm-fill:var(--zui-password-strength-meter-magenta-fill,var(--zui-color-magenta,#c026d3))] dark:[--psm-fill:var(--zui-password-strength-meter-magenta-fill-dark,var(--zui-color-magenta-dark,#e879f9))]\",\n crimson:\n \"[--psm-fill:var(--zui-password-strength-meter-crimson-fill,var(--zui-color-crimson,#b91c1c))] dark:[--psm-fill:var(--zui-password-strength-meter-crimson-fill-dark,var(--zui-color-crimson-dark,#f87171))]\",\n aqua: \"[--psm-fill:var(--zui-password-strength-meter-aqua-fill,var(--zui-color-aqua,#0f766e))] dark:[--psm-fill:var(--zui-password-strength-meter-aqua-fill-dark,var(--zui-color-aqua-dark,#2dd4bf))]\",\n plum: \"[--psm-fill:var(--zui-password-strength-meter-plum-fill,var(--zui-color-plum,#7e22ce))] dark:[--psm-fill:var(--zui-password-strength-meter-plum-fill-dark,var(--zui-color-plum-dark,#c084fc))]\",\n} as const;\n\nexport const zuiPasswordStrengthMeterSizes = {\n xs: \"text-[0.65rem]\",\n sm: \"text-xs\",\n md: \"text-sm\",\n lg: \"text-base\",\n xl: \"text-lg\",\n} as const;\n\nexport const zuiPasswordStrengthMeterShapes = {\n flat: \"rounded-none\",\n rounded: \"rounded-md\",\n pill: \"rounded-full\",\n} as const;\n\nexport const zuiPasswordStrengthMeterTrackBase =\n \"relative w-full overflow-hidden bg-[var(--zui-password-strength-meter-track-bg,var(--zui-surface-muted,#0000001a))] dark:bg-[var(--zui-password-strength-meter-track-bg-dark,var(--zui-surface-muted-dark,#ffffff1a))]\";\n\nexport const zuiPasswordStrengthMeterTrackSizes = {\n xs: \"h-1\",\n sm: \"h-1.5\",\n md: \"h-2\",\n lg: \"h-3\",\n xl: \"h-4\",\n} as const;\n\nexport const zuiPasswordStrengthMeterBarBase =\n \"h-full w-full origin-left rounded-[inherit]\";\n\nexport const zuiPasswordStrengthMeterBarSegmented = {\n true: \"[background:var(--zui-password-strength-meter-bar-bg-segmented,linear-gradient(90deg,var(--zui-status-error,oklch(45.5%_0.188_13.697))_0 calc(100%/5),var(--zui-color-orange,oklch(47%_0.157_37.304))_0 calc(200%/5),var(--zui-color-yellow,oklch(47.6%_0.114_61.907))_0 calc(300%/5),var(--zui-color-emerald,oklch(43.2%_0.095_166.913))_0 calc(400%/5),var(--zui-color-indigo,oklch(39.8%_0.195_277.366))_0))] dark:[background:var(--zui-password-strength-meter-bar-bg-segmented-dark,linear-gradient(90deg,var(--zui-status-error-dark,oklch(71.2%_0.194_13.428))_0 calc(100%/5),var(--zui-color-orange-dark,oklch(75%_0.183_55.934))_0 calc(200%/5),var(--zui-color-yellow-dark,oklch(85.2%_0.199_91.936))_0 calc(300%/5),var(--zui-color-emerald-dark,oklch(76.5%_0.177_163.223))_0 calc(400%/5),var(--zui-color-indigo-dark,oklch(67.3%_0.182_276.935))_0))]\",\n false: \"[background:var(--psm-fill)]\",\n} as const;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var chunkYBKNXDZU_js = require('./chunk-YBKNXDZU.js');
|
|
4
4
|
var chunkZS5756ZC_js = require('./chunk-ZS5756ZC.js');
|
|
5
5
|
var react = require('react');
|
|
6
6
|
var jsxRuntime = require('react/jsx-runtime');
|
|
@@ -40,7 +40,7 @@ var ButtonBase = (props) => {
|
|
|
40
40
|
"data-slot": "button",
|
|
41
41
|
onClick: handleClick,
|
|
42
42
|
className: chunkZS5756ZC_js.cn(
|
|
43
|
-
|
|
43
|
+
chunkYBKNXDZU_js.buttonVariants({ appearance: appearance2, size: size2 }),
|
|
44
44
|
children2.props.className,
|
|
45
45
|
className2
|
|
46
46
|
)
|
|
@@ -65,7 +65,7 @@ var ButtonBase = (props) => {
|
|
|
65
65
|
target,
|
|
66
66
|
rel: target === "_blank" ? "noopener noreferrer" : void 0,
|
|
67
67
|
"data-slot": "button",
|
|
68
|
-
className: chunkZS5756ZC_js.cn(
|
|
68
|
+
className: chunkZS5756ZC_js.cn(chunkYBKNXDZU_js.buttonVariants({ appearance: appearance2, size: size2 }), className2),
|
|
69
69
|
...rest2,
|
|
70
70
|
children: children2
|
|
71
71
|
}
|
|
@@ -86,7 +86,7 @@ var ButtonBase = (props) => {
|
|
|
86
86
|
ref,
|
|
87
87
|
type,
|
|
88
88
|
"data-slot": "button",
|
|
89
|
-
className: chunkZS5756ZC_js.cn(
|
|
89
|
+
className: chunkZS5756ZC_js.cn(chunkYBKNXDZU_js.buttonVariants({ appearance, size }), className),
|
|
90
90
|
...rest,
|
|
91
91
|
children
|
|
92
92
|
}
|
|
@@ -99,5 +99,5 @@ var Button = (props) => {
|
|
|
99
99
|
Button.displayName = "Button";
|
|
100
100
|
|
|
101
101
|
exports.Button = Button;
|
|
102
|
-
//# sourceMappingURL=chunk-
|
|
103
|
-
//# sourceMappingURL=chunk-
|
|
102
|
+
//# sourceMappingURL=chunk-NW5BSLR2.js.map
|
|
103
|
+
//# sourceMappingURL=chunk-NW5BSLR2.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ui/buttons/button-base.tsx","../src/ui/buttons/button.tsx"],"names":["className","appearance","size","children","rest","isValidElement","cloneElement","cn","buttonVariants","ref","jsx"],"mappings":"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","file":"chunk-
|
|
1
|
+
{"version":3,"sources":["../src/ui/buttons/button-base.tsx","../src/ui/buttons/button.tsx"],"names":["className","appearance","size","children","rest","isValidElement","cloneElement","cn","buttonVariants","ref","jsx"],"mappings":"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","file":"chunk-NW5BSLR2.js","sourcesContent":["\"use client\";\n\nimport { cloneElement, isValidElement, type MouseEventHandler } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type { ButtonProps } from \"./types\";\nimport { buttonVariants } from \"./variants\";\n\nexport const ButtonBase = (props: ButtonProps) => {\n if (\"asChild\" in props && props.asChild) {\n const {\n className,\n appearance,\n size,\n children,\n asChild: _asChild,\n disabled,\n onClick,\n ...rest\n } = props;\n\n if (!isValidElement<{ className?: string }>(children)) {\n return null;\n }\n\n const isNativeButton = children.type === \"button\";\n const childOnClick = children.props.onClick as\n | MouseEventHandler<HTMLElement>\n | undefined;\n const handleClick: MouseEventHandler<HTMLElement> = (event) => {\n if (disabled) {\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n\n onClick?.(event);\n if (!event.defaultPrevented) {\n childOnClick?.(event);\n }\n };\n\n return cloneElement(children, {\n ...rest,\n ...children.props,\n ...(disabled\n ? isNativeButton\n ? { disabled: true }\n : { \"aria-disabled\": true, tabIndex: -1 }\n : null),\n \"data-slot\": \"button\",\n onClick: handleClick,\n className: cn(\n buttonVariants({ appearance, size }),\n children.props.className,\n className,\n ),\n });\n }\n\n if (props.as === \"link\") {\n const {\n className,\n appearance,\n size,\n children,\n ref,\n href,\n target,\n ...rest\n } = props;\n\n return (\n <a\n ref={ref}\n href={href}\n target={target}\n rel={target === \"_blank\" ? \"noopener noreferrer\" : undefined}\n data-slot=\"button\"\n className={cn(buttonVariants({ appearance, size }), className)}\n {...rest}\n >\n {children}\n </a>\n );\n }\n\n const {\n className,\n appearance,\n size,\n type = \"button\",\n children,\n ref,\n ...rest\n } = props;\n\n return (\n <button\n ref={ref}\n type={type}\n data-slot=\"button\"\n className={cn(buttonVariants({ appearance, size }), className)}\n {...rest}\n >\n {children}\n </button>\n );\n};\n\nButtonBase.displayName = \"Button\";\n","// button.tsx — default static entry (no framer-motion)\nimport { ButtonBase } from \"./button-base\";\nimport type { ButtonProps } from \"./types\";\n\nexport const Button = (props: ButtonProps) => {\n return <ButtonBase {...props} />;\n};\n\nButton.displayName = \"Button\";\n"]}
|