erp-pro-ui 0.1.2 → 0.1.3
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/dist/calendar.cjs +1 -1
- package/dist/calendar.mjs +1 -1
- package/dist/card.cjs +1 -1
- package/dist/card.mjs +1 -1
- package/dist/carousel.cjs +1 -1
- package/dist/carousel.mjs +1 -1
- package/dist/catalog.cjs +6 -0
- package/dist/catalog.cjs.map +1 -1
- package/dist/catalog.d.ts +11 -1
- package/dist/catalog.d.ts.map +1 -1
- package/dist/catalog.mjs +6 -0
- package/dist/catalog.mjs.map +1 -1
- package/dist/charts.cjs +2 -1
- package/dist/charts.mjs +2 -2
- package/dist/checkbox.cjs +1 -1
- package/dist/checkbox.mjs +1 -1
- package/dist/chip.cjs +1 -1
- package/dist/chip.mjs +1 -1
- package/dist/chroma-grid.cjs +1 -1
- package/dist/chroma-grid.mjs +1 -1
- package/dist/chunks/{calendar-xrGmvukr.cjs → calendar-Cpp_Rc7T.cjs} +58 -17
- package/dist/chunks/calendar-Cpp_Rc7T.cjs.map +1 -0
- package/dist/chunks/{calendar-BarcG6x_.mjs → calendar-DrCgT_pj.mjs} +58 -17
- package/dist/chunks/calendar-DrCgT_pj.mjs.map +1 -0
- package/dist/chunks/{card-gt-HZh0h.cjs → card-C5_tFK6Q.cjs} +1 -1
- package/dist/chunks/{card-gt-HZh0h.cjs.map → card-C5_tFK6Q.cjs.map} +1 -1
- package/dist/chunks/{card-CcIF6z2H.mjs → card-Dh8wNv8N.mjs} +1 -1
- package/dist/chunks/{card-CcIF6z2H.mjs.map → card-Dh8wNv8N.mjs.map} +1 -1
- package/dist/chunks/{carousel-DJdqBVRK.mjs → carousel-BYwqI4cA.mjs} +1 -1
- package/dist/chunks/{carousel-DJdqBVRK.mjs.map → carousel-BYwqI4cA.mjs.map} +1 -1
- package/dist/chunks/{carousel-Cq5uwqQt.cjs → carousel-C1338X8h.cjs} +1 -1
- package/dist/chunks/{carousel-Cq5uwqQt.cjs.map → carousel-C1338X8h.cjs.map} +1 -1
- package/dist/chunks/{charts-DugYWvEf.mjs → charts-BYvM4TMG.mjs} +371 -117
- package/dist/chunks/charts-BYvM4TMG.mjs.map +1 -0
- package/dist/chunks/{charts-BpElnsoR.cjs → charts-DbxyHtlX.cjs} +375 -115
- package/dist/chunks/charts-DbxyHtlX.cjs.map +1 -0
- package/dist/chunks/{checkbox-yHuSw-hV.cjs → checkbox-CxOcjoGP.cjs} +1 -1
- package/dist/chunks/{checkbox-yHuSw-hV.cjs.map → checkbox-CxOcjoGP.cjs.map} +1 -1
- package/dist/chunks/{checkbox-DvwlGwWe.mjs → checkbox-Pr49U9F1.mjs} +1 -1
- package/dist/chunks/{checkbox-DvwlGwWe.mjs.map → checkbox-Pr49U9F1.mjs.map} +1 -1
- package/dist/chunks/{chip-DcBji__g.cjs → chip-B4ol1yPk.cjs} +1 -1
- package/dist/chunks/{chip-DcBji__g.cjs.map → chip-B4ol1yPk.cjs.map} +1 -1
- package/dist/chunks/{chip-BGSUmnlO.mjs → chip-DdnBLdpl.mjs} +1 -1
- package/dist/chunks/{chip-BGSUmnlO.mjs.map → chip-DdnBLdpl.mjs.map} +1 -1
- package/dist/chunks/{chroma-grid-Cdeql_2C.mjs → chroma-grid-BAo6V5A7.mjs} +1 -1
- package/dist/chunks/{chroma-grid-Cdeql_2C.mjs.map → chroma-grid-BAo6V5A7.mjs.map} +1 -1
- package/dist/chunks/{chroma-grid-9E9j1s9I.cjs → chroma-grid-CIk0dsNS.cjs} +1 -1
- package/dist/chunks/{chroma-grid-9E9j1s9I.cjs.map → chroma-grid-CIk0dsNS.cjs.map} +1 -1
- package/dist/chunks/{color-palette-BLvDnCOD.cjs → color-palette-2TuEMkAn.cjs} +1 -1
- package/dist/chunks/{color-palette-BLvDnCOD.cjs.map → color-palette-2TuEMkAn.cjs.map} +1 -1
- package/dist/chunks/{color-palette-CXlCDiZz.mjs → color-palette-euKQMWlV.mjs} +1 -1
- package/dist/chunks/{color-palette-CXlCDiZz.mjs.map → color-palette-euKQMWlV.mjs.map} +1 -1
- package/dist/chunks/{combobox-BXu3s0dt.cjs → combobox-CwGubKTt.cjs} +2 -2
- package/dist/chunks/combobox-CwGubKTt.cjs.map +1 -0
- package/dist/chunks/{combobox-CjK-qG4k.mjs → combobox-DrFmkI0F.mjs} +2 -2
- package/dist/chunks/combobox-DrFmkI0F.mjs.map +1 -0
- package/dist/chunks/{data-table-DyEQn9Yj.mjs → data-table-Bo80m7qV.mjs} +8 -8
- package/dist/chunks/{data-table-DyEQn9Yj.mjs.map → data-table-Bo80m7qV.mjs.map} +1 -1
- package/dist/chunks/{data-table-9HELVsYR.cjs → data-table-W1sK5tkL.cjs} +8 -8
- package/dist/chunks/{data-table-9HELVsYR.cjs.map → data-table-W1sK5tkL.cjs.map} +1 -1
- package/dist/chunks/{date-picker-D8gaaMlJ.mjs → date-picker-CNPORxhv.mjs} +87 -17
- package/dist/chunks/date-picker-CNPORxhv.mjs.map +1 -0
- package/dist/chunks/{date-picker-W9om1j7A.cjs → date-picker-CZo68Fkl.cjs} +87 -17
- package/dist/chunks/date-picker-CZo68Fkl.cjs.map +1 -0
- package/dist/chunks/input-BWM6G7jq.cjs +117 -0
- package/dist/chunks/input-BWM6G7jq.cjs.map +1 -0
- package/dist/chunks/input-Bt_r_B_c.mjs +105 -0
- package/dist/chunks/input-Bt_r_B_c.mjs.map +1 -0
- package/dist/chunks/{multi-select-combobox-ELSH_Xr4.mjs → multi-select-combobox-D46M-AN9.mjs} +2 -2
- package/dist/chunks/multi-select-combobox-D46M-AN9.mjs.map +1 -0
- package/dist/chunks/{multi-select-combobox-UW0X15W7.cjs → multi-select-combobox-dS6bJE_e.cjs} +2 -2
- package/dist/chunks/multi-select-combobox-dS6bJE_e.cjs.map +1 -0
- package/dist/chunks/{otp-input-B6zzOEqw.cjs → otp-input-DSW9Ca_D.cjs} +2 -2
- package/dist/chunks/otp-input-DSW9Ca_D.cjs.map +1 -0
- package/dist/chunks/{otp-input-Bg4nQG6x.mjs → otp-input-DeAi4nJ_.mjs} +2 -2
- package/dist/chunks/otp-input-DeAi4nJ_.mjs.map +1 -0
- package/dist/chunks/{progress-bar-C9FZDrju.mjs → progress-bar-B9sy7WBT.mjs} +1 -1
- package/dist/chunks/{progress-bar-C9FZDrju.mjs.map → progress-bar-B9sy7WBT.mjs.map} +1 -1
- package/dist/chunks/{progress-bar-C1OvQ-NI.cjs → progress-bar-BdvQtpm3.cjs} +1 -1
- package/dist/chunks/{progress-bar-C1OvQ-NI.cjs.map → progress-bar-BdvQtpm3.cjs.map} +1 -1
- package/dist/chunks/select-B8UQ6Uq5.mjs +170 -0
- package/dist/chunks/select-B8UQ6Uq5.mjs.map +1 -0
- package/dist/chunks/select-CCUSMvfS.cjs +176 -0
- package/dist/chunks/select-CCUSMvfS.cjs.map +1 -0
- package/dist/chunks/stepper-D6qQbZdg.cjs +642 -0
- package/dist/chunks/stepper-D6qQbZdg.cjs.map +1 -0
- package/dist/chunks/stepper-DUknuW2E.mjs +618 -0
- package/dist/chunks/stepper-DUknuW2E.mjs.map +1 -0
- package/dist/chunks/{textarea-CU5C-Zw9.mjs → textarea-Blky_fLK.mjs} +2 -2
- package/dist/chunks/{textarea-CU5C-Zw9.mjs.map → textarea-Blky_fLK.mjs.map} +1 -1
- package/dist/chunks/{textarea-CAUsyu4-.cjs → textarea-ok_NlE2p.cjs} +2 -2
- package/dist/chunks/textarea-ok_NlE2p.cjs.map +1 -0
- package/dist/color-palette.cjs +1 -1
- package/dist/color-palette.mjs +1 -1
- package/dist/colors.css +3 -0
- package/dist/combobox.cjs +1 -1
- package/dist/combobox.mjs +1 -1
- package/dist/components/data-display/charts/AreaChart.d.ts.map +1 -1
- package/dist/components/data-display/charts/BarChart.d.ts +1 -0
- package/dist/components/data-display/charts/BarChart.d.ts.map +1 -1
- package/dist/components/data-display/charts/NeonLineChart.d.ts.map +1 -1
- package/dist/components/data-display/charts/PieChart.d.ts +18 -2
- package/dist/components/data-display/charts/PieChart.d.ts.map +1 -1
- package/dist/components/data-display/charts/PositiveNegativeBarChart.d.ts +21 -0
- package/dist/components/data-display/charts/PositiveNegativeBarChart.d.ts.map +1 -0
- package/dist/components/data-display/charts/StackedBarChart.d.ts.map +1 -1
- package/dist/components/data-display/charts/ThinBreakdownBar.d.ts +3 -0
- package/dist/components/data-display/charts/ThinBreakdownBar.d.ts.map +1 -1
- package/dist/components/data-display/charts/chartStyles.d.ts +24 -0
- package/dist/components/data-display/charts/chartStyles.d.ts.map +1 -0
- package/dist/components/data-display/charts/index.d.ts +2 -0
- package/dist/components/data-display/charts/index.d.ts.map +1 -1
- package/dist/components/forms/calendar/Calendar.d.ts.map +1 -1
- package/dist/components/forms/date-picker/DatePicker.d.ts.map +1 -1
- package/dist/components/forms/input/Input.d.ts.map +1 -1
- package/dist/components/forms/input/types.d.ts +5 -0
- package/dist/components/forms/input/types.d.ts.map +1 -1
- package/dist/components/forms/select/Select.d.ts.map +1 -1
- package/dist/components/forms/select/types.d.ts +7 -1
- package/dist/components/forms/select/types.d.ts.map +1 -1
- package/dist/components/navigation/stepper/Stepper1.d.ts +4 -0
- package/dist/components/navigation/stepper/Stepper1.d.ts.map +1 -0
- package/dist/components/navigation/stepper/Stepper2.d.ts +5 -0
- package/dist/components/navigation/stepper/Stepper2.d.ts.map +1 -0
- package/dist/components/navigation/stepper/index.d.ts +4 -1
- package/dist/components/navigation/stepper/index.d.ts.map +1 -1
- package/dist/components/navigation/stepper/types.d.ts +85 -0
- package/dist/components/navigation/stepper/types.d.ts.map +1 -1
- package/dist/data-table.cjs +1 -1
- package/dist/data-table.mjs +1 -1
- package/dist/date-picker.cjs +1 -1
- package/dist/date-picker.mjs +1 -1
- package/dist/docs.cjs +10 -0
- package/dist/docs.cjs.map +1 -1
- package/dist/docs.d.ts.map +1 -1
- package/dist/docs.mjs +10 -0
- package/dist/docs.mjs.map +1 -1
- package/dist/foundation.css +7 -0
- package/dist/index.cjs +23 -18
- package/dist/index.d.ts +5 -3
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +19 -19
- package/dist/input.cjs +1 -1
- package/dist/input.mjs +1 -1
- package/dist/multi-select-combobox.cjs +1 -1
- package/dist/multi-select-combobox.mjs +1 -1
- package/dist/otp-input.cjs +1 -1
- package/dist/otp-input.mjs +1 -1
- package/dist/progress-bar.cjs +1 -1
- package/dist/progress-bar.mjs +1 -1
- package/dist/select.cjs +1 -1
- package/dist/select.mjs +1 -1
- package/dist/stepper.cjs +5 -1
- package/dist/stepper.mjs +2 -2
- package/dist/textarea.cjs +1 -1
- package/dist/textarea.mjs +1 -1
- package/dist/tokens.css +11 -2
- package/package.json +4 -4
- package/dist/chunks/calendar-BarcG6x_.mjs.map +0 -1
- package/dist/chunks/calendar-xrGmvukr.cjs.map +0 -1
- package/dist/chunks/charts-BpElnsoR.cjs.map +0 -1
- package/dist/chunks/charts-DugYWvEf.mjs.map +0 -1
- package/dist/chunks/combobox-BXu3s0dt.cjs.map +0 -1
- package/dist/chunks/combobox-CjK-qG4k.mjs.map +0 -1
- package/dist/chunks/date-picker-D8gaaMlJ.mjs.map +0 -1
- package/dist/chunks/date-picker-W9om1j7A.cjs.map +0 -1
- package/dist/chunks/input-D9qZNqXV.cjs +0 -99
- package/dist/chunks/input-D9qZNqXV.cjs.map +0 -1
- package/dist/chunks/input-wNqevfQ4.mjs +0 -87
- package/dist/chunks/input-wNqevfQ4.mjs.map +0 -1
- package/dist/chunks/multi-select-combobox-ELSH_Xr4.mjs.map +0 -1
- package/dist/chunks/multi-select-combobox-UW0X15W7.cjs.map +0 -1
- package/dist/chunks/otp-input-B6zzOEqw.cjs.map +0 -1
- package/dist/chunks/otp-input-Bg4nQG6x.mjs.map +0 -1
- package/dist/chunks/select-D71tk6-I.mjs +0 -152
- package/dist/chunks/select-D71tk6-I.mjs.map +0 -1
- package/dist/chunks/select-WC_kPqUP.cjs +0 -158
- package/dist/chunks/select-WC_kPqUP.cjs.map +0 -1
- package/dist/chunks/stepper-D4yQsQB0.mjs +0 -261
- package/dist/chunks/stepper-D4yQsQB0.mjs.map +0 -1
- package/dist/chunks/stepper-fY-Sx72k.cjs +0 -267
- package/dist/chunks/stepper-fY-Sx72k.cjs.map +0 -1
- package/dist/chunks/textarea-CAUsyu4-.cjs.map +0 -1
|
@@ -1,267 +0,0 @@
|
|
|
1
|
-
require("./chunk-B_GkZjkl.cjs");
|
|
2
|
-
const require_utils = require("./utils-B4SmmY4J.cjs");
|
|
3
|
-
const require_icons = require("./icons-BxIzP2jd.cjs");
|
|
4
|
-
let react_jsx_runtime = require("react/jsx-runtime");
|
|
5
|
-
let framer_motion = require("framer-motion");
|
|
6
|
-
//#region src/components/navigation/stepper/Stepper.tsx
|
|
7
|
-
var sizeConfig = {
|
|
8
|
-
sm: {
|
|
9
|
-
indicator: "w-8 h-8",
|
|
10
|
-
icon: "w-4 h-4",
|
|
11
|
-
text: "text-xs",
|
|
12
|
-
connectorThickness: "2px"
|
|
13
|
-
},
|
|
14
|
-
md: {
|
|
15
|
-
indicator: "w-10 h-10",
|
|
16
|
-
icon: "w-5 h-5",
|
|
17
|
-
text: "text-sm",
|
|
18
|
-
connectorThickness: "2px"
|
|
19
|
-
},
|
|
20
|
-
lg: {
|
|
21
|
-
indicator: "w-12 h-12",
|
|
22
|
-
icon: "w-6 h-6",
|
|
23
|
-
text: "text-base",
|
|
24
|
-
connectorThickness: "4px"
|
|
25
|
-
}
|
|
26
|
-
};
|
|
27
|
-
var getVariantStyles = (variant, status) => {
|
|
28
|
-
return {
|
|
29
|
-
default: {
|
|
30
|
-
completed: "bg-accent text-on-accent shadow-md shadow-accent/25",
|
|
31
|
-
current: "bg-accent text-on-accent ring-4 ring-focus/40 shadow-lg shadow-accent/30",
|
|
32
|
-
upcoming: "bg-neutral-200 text-neutral-500 dark:bg-neutral-700 dark:text-neutral-400",
|
|
33
|
-
error: "bg-red-500 text-white ring-4 ring-red-500/30"
|
|
34
|
-
},
|
|
35
|
-
glass: {
|
|
36
|
-
completed: "bg-accent/85 text-on-accent backdrop-blur-xl border border-accent/30 shadow-lg shadow-accent/20",
|
|
37
|
-
current: "bg-accent/90 text-on-accent backdrop-blur-xl border-2 border-accent ring-4 ring-focus/30 shadow-xl shadow-accent/30",
|
|
38
|
-
upcoming: "bg-white/60 text-neutral-500 backdrop-blur-xl border border-white/40 dark:bg-neutral-800/60 dark:text-neutral-400 dark:border-white/10",
|
|
39
|
-
error: "bg-red-500/80 text-white backdrop-blur-xl border border-red-400/30 ring-4 ring-red-500/20"
|
|
40
|
-
},
|
|
41
|
-
minimal: {
|
|
42
|
-
completed: "bg-accent-subtle text-accent",
|
|
43
|
-
current: "bg-accent text-on-accent shadow-sm",
|
|
44
|
-
upcoming: "bg-transparent text-neutral-400 border-2 border-neutral-300 dark:border-neutral-600",
|
|
45
|
-
error: "bg-red-100 text-red-500 dark:bg-red-900/30"
|
|
46
|
-
},
|
|
47
|
-
outlined: {
|
|
48
|
-
completed: "bg-transparent text-accent border-2 border-accent",
|
|
49
|
-
current: "bg-accent text-on-accent border-2 border-accent shadow-lg",
|
|
50
|
-
upcoming: "bg-transparent text-neutral-400 border-2 border-neutral-300 dark:border-neutral-600",
|
|
51
|
-
error: "bg-transparent text-red-500 border-2 border-red-500"
|
|
52
|
-
}
|
|
53
|
-
}[variant][status];
|
|
54
|
-
};
|
|
55
|
-
var StepIndicator = ({ step, index, status, size, variant, showNumbers, animated, colors }) => {
|
|
56
|
-
const config = sizeConfig[size];
|
|
57
|
-
const variantStyles = getVariantStyles(variant, status);
|
|
58
|
-
const customColorStyle = colors?.[status] ? {
|
|
59
|
-
backgroundColor: colors[status],
|
|
60
|
-
borderColor: colors[status]
|
|
61
|
-
} : void 0;
|
|
62
|
-
const renderContent = () => {
|
|
63
|
-
if (step.icon) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
64
|
-
className: config.icon,
|
|
65
|
-
children: step.icon
|
|
66
|
-
});
|
|
67
|
-
if (status === "completed") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CheckIcon, {
|
|
68
|
-
className: config.icon,
|
|
69
|
-
"aria-hidden": "true"
|
|
70
|
-
});
|
|
71
|
-
if (status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons.CloseIcon, {
|
|
72
|
-
className: config.icon,
|
|
73
|
-
"aria-hidden": "true"
|
|
74
|
-
});
|
|
75
|
-
if (showNumbers) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
76
|
-
className: "font-semibold",
|
|
77
|
-
children: index + 1
|
|
78
|
-
});
|
|
79
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { className: require_utils.mergeClassNames("rounded-full bg-current", size === "sm" ? "w-2 h-2" : "w-3 h-3") });
|
|
80
|
-
};
|
|
81
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
|
|
82
|
-
className: require_utils.mergeClassNames("rounded-full flex items-center justify-center transition-all duration-300", config.indicator, variantStyles),
|
|
83
|
-
style: customColorStyle,
|
|
84
|
-
initial: animated ? {
|
|
85
|
-
scale: .8,
|
|
86
|
-
opacity: 0
|
|
87
|
-
} : void 0,
|
|
88
|
-
animate: animated ? {
|
|
89
|
-
scale: 1,
|
|
90
|
-
opacity: 1
|
|
91
|
-
} : void 0,
|
|
92
|
-
whileHover: { scale: 1.05 },
|
|
93
|
-
whileTap: { scale: .95 },
|
|
94
|
-
transition: {
|
|
95
|
-
type: "spring",
|
|
96
|
-
stiffness: 400,
|
|
97
|
-
damping: 17
|
|
98
|
-
},
|
|
99
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, {
|
|
100
|
-
mode: "wait",
|
|
101
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.span, {
|
|
102
|
-
initial: animated ? {
|
|
103
|
-
scale: 0,
|
|
104
|
-
rotate: -180
|
|
105
|
-
} : void 0,
|
|
106
|
-
animate: animated ? {
|
|
107
|
-
scale: 1,
|
|
108
|
-
rotate: 0
|
|
109
|
-
} : void 0,
|
|
110
|
-
exit: animated ? {
|
|
111
|
-
scale: 0,
|
|
112
|
-
rotate: 180
|
|
113
|
-
} : void 0,
|
|
114
|
-
transition: { duration: .2 },
|
|
115
|
-
children: renderContent()
|
|
116
|
-
}, status)
|
|
117
|
-
})
|
|
118
|
-
});
|
|
119
|
-
};
|
|
120
|
-
var Stepper = ({ steps, currentStep, onStepClick, orientation = "horizontal", size = "md", variant = "glass", showNumbers = true, clickable = true, showConnector = true, className, connectorClassName, stepClassName, showErrors = false, errorSteps = [], completedSteps, animated = true, colors }) => {
|
|
121
|
-
const isVertical = orientation === "vertical";
|
|
122
|
-
const config = sizeConfig[size];
|
|
123
|
-
const getStepStatus = (index) => {
|
|
124
|
-
if (showErrors && errorSteps.includes(index)) return "error";
|
|
125
|
-
if (completedSteps) {
|
|
126
|
-
if (completedSteps.includes(index)) return "completed";
|
|
127
|
-
if (index === currentStep) return "current";
|
|
128
|
-
return "upcoming";
|
|
129
|
-
}
|
|
130
|
-
if (index < currentStep) return "completed";
|
|
131
|
-
if (index === currentStep) return "current";
|
|
132
|
-
return "upcoming";
|
|
133
|
-
};
|
|
134
|
-
const handleStepClick = (index) => {
|
|
135
|
-
if (!clickable || !onStepClick) return;
|
|
136
|
-
if (steps[index].disabled) return;
|
|
137
|
-
const status = getStepStatus(index);
|
|
138
|
-
if (status === "completed" || status === "current") onStepClick(index);
|
|
139
|
-
};
|
|
140
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
141
|
-
className: require_utils.mergeClassNames("w-full relative", isVertical ? "flex flex-col" : "flex items-start justify-between", className),
|
|
142
|
-
children: [showConnector && (() => {
|
|
143
|
-
const paddingValue = variant === "glass" || variant === "outlined" || variant === "minimal" ? 4 : 2;
|
|
144
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
145
|
-
className: require_utils.mergeClassNames("absolute rounded-full", variant === "glass" ? "bg-white/30 dark:bg-white/10 backdrop-blur-sm" : "bg-neutral-200 dark:bg-neutral-700", connectorClassName),
|
|
146
|
-
style: { ...isVertical ? {
|
|
147
|
-
top: "0",
|
|
148
|
-
bottom: "0",
|
|
149
|
-
left: `calc(${paddingValue}px + 1px + ${config.indicator.split(" ")[0].replace("w-", "")} * 0.125rem - ${config.connectorThickness} / 2)`,
|
|
150
|
-
width: config.connectorThickness
|
|
151
|
-
} : {
|
|
152
|
-
left: "0",
|
|
153
|
-
right: "0",
|
|
154
|
-
top: `calc(${paddingValue}px + 1px + ${config.indicator.split(" ")[1].replace("h-", "")} * 0.125rem - ${config.connectorThickness} / 2)`,
|
|
155
|
-
height: config.connectorThickness
|
|
156
|
-
} },
|
|
157
|
-
children: animated ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
|
|
158
|
-
className: "absolute top-0 left-0 bg-accent rounded-full",
|
|
159
|
-
initial: { [isVertical ? "height" : "width"]: 0 },
|
|
160
|
-
animate: { [isVertical ? "height" : "width"]: `${steps.length > 1 ? Math.min(currentStep, steps.length - 1) / (steps.length - 1) * 100 : 0}%` },
|
|
161
|
-
transition: {
|
|
162
|
-
duration: .4,
|
|
163
|
-
ease: "easeOut"
|
|
164
|
-
},
|
|
165
|
-
style: {
|
|
166
|
-
...isVertical ? { width: "100%" } : { height: "100%" },
|
|
167
|
-
backgroundColor: colors?.connector || colors?.completed
|
|
168
|
-
}
|
|
169
|
-
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
170
|
-
className: "absolute top-0 left-0 bg-accent rounded-full",
|
|
171
|
-
style: {
|
|
172
|
-
...isVertical ? {
|
|
173
|
-
width: "100%",
|
|
174
|
-
height: `${steps.length > 1 ? Math.min(currentStep, steps.length - 1) / (steps.length - 1) * 100 : 0}%`
|
|
175
|
-
} : {
|
|
176
|
-
height: "100%",
|
|
177
|
-
width: `${steps.length > 1 ? Math.min(currentStep, steps.length - 1) / (steps.length - 1) * 100 : 0}%`
|
|
178
|
-
},
|
|
179
|
-
backgroundColor: colors?.connector || colors?.completed
|
|
180
|
-
}
|
|
181
|
-
})
|
|
182
|
-
});
|
|
183
|
-
})(), steps.map((step, index) => {
|
|
184
|
-
const status = getStepStatus(index);
|
|
185
|
-
const isLast = index === steps.length - 1;
|
|
186
|
-
const isClickable = clickable && !step.disabled;
|
|
187
|
-
const paddingValue = variant === "glass" || variant === "outlined" || variant === "minimal" ? 4 : 2;
|
|
188
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
189
|
-
className: require_utils.mergeClassNames("relative z-10", isVertical ? "flex gap-4 pb-8" : "flex flex-1 flex-col items-center", !isLast && isVertical && "mb-2", isVertical && isLast && "pb-0", stepClassName),
|
|
190
|
-
style: { ...!isVertical ? {
|
|
191
|
-
flexBasis: 0,
|
|
192
|
-
flexGrow: 1,
|
|
193
|
-
alignItems: index === 0 ? "flex-start" : isLast ? "flex-end" : "center"
|
|
194
|
-
} : {} },
|
|
195
|
-
children: [
|
|
196
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
|
|
197
|
-
type: "button",
|
|
198
|
-
onClick: () => handleStepClick(index),
|
|
199
|
-
disabled: !isClickable,
|
|
200
|
-
className: require_utils.mergeClassNames("relative z-10 shrink-0 flex items-center justify-center bg-white dark:bg-neutral-900 rounded-full", isClickable ? "cursor-pointer" : "cursor-default", !isVertical && index === 0 && "mx-0", !isVertical && isLast && "mx-0"),
|
|
201
|
-
style: { padding: `${paddingValue}px` },
|
|
202
|
-
"aria-current": status === "current" ? "step" : void 0,
|
|
203
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepIndicator, {
|
|
204
|
-
step,
|
|
205
|
-
index,
|
|
206
|
-
status,
|
|
207
|
-
size,
|
|
208
|
-
variant,
|
|
209
|
-
showNumbers,
|
|
210
|
-
animated,
|
|
211
|
-
colors
|
|
212
|
-
})
|
|
213
|
-
}),
|
|
214
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(framer_motion.motion.div, {
|
|
215
|
-
className: require_utils.mergeClassNames("mt-2", isVertical ? "flex-1 pb-6" : "text-center px-2", !isVertical && index === 0 && "text-left px-0", !isVertical && isLast && "text-right px-0", isVertical && isLast && "pb-0"),
|
|
216
|
-
style: isVertical ? { marginTop: "-4px" } : void 0,
|
|
217
|
-
initial: animated ? {
|
|
218
|
-
opacity: 0,
|
|
219
|
-
y: 10
|
|
220
|
-
} : void 0,
|
|
221
|
-
animate: animated ? {
|
|
222
|
-
opacity: 1,
|
|
223
|
-
y: 0
|
|
224
|
-
} : void 0,
|
|
225
|
-
transition: { delay: index * .1 },
|
|
226
|
-
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
|
|
227
|
-
className: require_utils.mergeClassNames("font-medium transition-colors duration-200", config.text, status === "current" ? "text-accent" : status === "completed" ? "text-neutral-700 dark:text-neutral-200" : status === "error" ? "text-red-500" : "text-neutral-500 dark:text-neutral-400"),
|
|
228
|
-
children: [step.title, step.optional && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
229
|
-
className: "ml-1 text-neutral-400 dark:text-neutral-500 font-normal",
|
|
230
|
-
children: "(Optional)"
|
|
231
|
-
})]
|
|
232
|
-
}), step.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
|
|
233
|
-
className: require_utils.mergeClassNames("mt-0.5 text-neutral-500 dark:text-neutral-400", size === "sm" ? "text-xs" : "text-xs"),
|
|
234
|
-
children: step.description
|
|
235
|
-
})]
|
|
236
|
-
}),
|
|
237
|
-
isVertical && step.content && status === "current" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
|
|
238
|
-
initial: {
|
|
239
|
-
opacity: 0,
|
|
240
|
-
height: 0
|
|
241
|
-
},
|
|
242
|
-
animate: {
|
|
243
|
-
opacity: 1,
|
|
244
|
-
height: "auto"
|
|
245
|
-
},
|
|
246
|
-
exit: {
|
|
247
|
-
opacity: 0,
|
|
248
|
-
height: 0
|
|
249
|
-
},
|
|
250
|
-
className: "pl-14 pb-4 w-full",
|
|
251
|
-
children: step.content
|
|
252
|
-
})
|
|
253
|
-
]
|
|
254
|
-
}, step.id);
|
|
255
|
-
})]
|
|
256
|
-
});
|
|
257
|
-
};
|
|
258
|
-
Stepper.displayName = "Stepper";
|
|
259
|
-
//#endregion
|
|
260
|
-
Object.defineProperty(exports, "Stepper", {
|
|
261
|
-
enumerable: true,
|
|
262
|
-
get: function() {
|
|
263
|
-
return Stepper;
|
|
264
|
-
}
|
|
265
|
-
});
|
|
266
|
-
|
|
267
|
-
//# sourceMappingURL=stepper-fY-Sx72k.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"stepper-fY-Sx72k.cjs","names":[],"sources":["../../src/components/navigation/stepper/Stepper.tsx"],"sourcesContent":["import { motion, AnimatePresence } from \"framer-motion\";\n\nimport { CheckIcon, CloseIcon } from \"../../icons\";\nimport { mergeClassNames } from \"../../../utils\";\nimport type {\n StepperProps,\n StepIndicatorProps,\n StepStatus,\n StepperSize,\n StepperVariant,\n} from \"./types\";\n\n// Size configurations for indicators and icons\nconst sizeConfig: Record<\n StepperSize,\n { indicator: string; icon: string; text: string; connectorThickness: string }\n> = {\n sm: {\n indicator: \"w-8 h-8\",\n icon: \"w-4 h-4\",\n text: \"text-xs\",\n connectorThickness: \"2px\",\n },\n md: {\n indicator: \"w-10 h-10\",\n icon: \"w-5 h-5\",\n text: \"text-sm\",\n connectorThickness: \"2px\",\n },\n lg: {\n indicator: \"w-12 h-12\",\n icon: \"w-6 h-6\",\n text: \"text-base\",\n connectorThickness: \"4px\",\n },\n};\n\n// Variant styles for the indicator\nconst getVariantStyles = (variant: StepperVariant, status: StepStatus) => {\n const baseStyles = {\n default: {\n completed: \"bg-accent text-on-accent shadow-md shadow-accent/25\",\n current:\n \"bg-accent text-on-accent ring-4 ring-focus/40 shadow-lg shadow-accent/30\",\n upcoming:\n \"bg-neutral-200 text-neutral-500 dark:bg-neutral-700 dark:text-neutral-400\",\n error: \"bg-red-500 text-white ring-4 ring-red-500/30\",\n },\n glass: {\n completed:\n \"bg-accent/85 text-on-accent backdrop-blur-xl border border-accent/30 shadow-lg shadow-accent/20\",\n current:\n \"bg-accent/90 text-on-accent backdrop-blur-xl border-2 border-accent ring-4 ring-focus/30 shadow-xl shadow-accent/30\",\n upcoming:\n \"bg-white/60 text-neutral-500 backdrop-blur-xl border border-white/40 dark:bg-neutral-800/60 dark:text-neutral-400 dark:border-white/10\",\n error:\n \"bg-red-500/80 text-white backdrop-blur-xl border border-red-400/30 ring-4 ring-red-500/20\",\n },\n minimal: {\n completed: \"bg-accent-subtle text-accent\",\n current: \"bg-accent text-on-accent shadow-sm\",\n upcoming:\n \"bg-transparent text-neutral-400 border-2 border-neutral-300 dark:border-neutral-600\",\n error: \"bg-red-100 text-red-500 dark:bg-red-900/30\",\n },\n outlined: {\n completed: \"bg-transparent text-accent border-2 border-accent\",\n current: \"bg-accent text-on-accent border-2 border-accent shadow-lg\",\n upcoming:\n \"bg-transparent text-neutral-400 border-2 border-neutral-300 dark:border-neutral-600\",\n error: \"bg-transparent text-red-500 border-2 border-red-500\",\n },\n };\n\n return baseStyles[variant][status];\n};\n\n// Step Indicator Component\nconst StepIndicator = ({\n step,\n index,\n status,\n size,\n variant,\n showNumbers,\n animated,\n colors,\n}: StepIndicatorProps) => {\n const config = sizeConfig[size];\n const variantStyles = getVariantStyles(variant, status);\n\n // Custom color overrides\n const customColorStyle = colors?.[status]\n ? { backgroundColor: colors[status], borderColor: colors[status] }\n : undefined;\n\n const renderContent = () => {\n if (step.icon) {\n return <span className={config.icon}>{step.icon}</span>;\n }\n\n if (status === \"completed\") {\n return <CheckIcon className={config.icon} aria-hidden=\"true\" />;\n }\n\n if (status === \"error\") {\n return <CloseIcon className={config.icon} aria-hidden=\"true\" />;\n }\n\n if (showNumbers) {\n return <span className=\"font-semibold\">{index + 1}</span>;\n }\n\n return (\n <span\n className={mergeClassNames(\n \"rounded-full bg-current\",\n size === \"sm\" ? \"w-2 h-2\" : \"w-3 h-3\",\n )}\n />\n );\n };\n\n return (\n <motion.div\n className={mergeClassNames(\n \"rounded-full flex items-center justify-center transition-all duration-300\",\n config.indicator,\n variantStyles,\n )}\n style={customColorStyle}\n initial={animated ? { scale: 0.8, opacity: 0 } : undefined}\n animate={animated ? { scale: 1, opacity: 1 } : undefined}\n whileHover={{ scale: 1.05 }}\n whileTap={{ scale: 0.95 }}\n transition={{ type: \"spring\", stiffness: 400, damping: 17 }}\n >\n <AnimatePresence mode=\"wait\">\n <motion.span\n key={status}\n initial={animated ? { scale: 0, rotate: -180 } : undefined}\n animate={animated ? { scale: 1, rotate: 0 } : undefined}\n exit={animated ? { scale: 0, rotate: 180 } : undefined}\n transition={{ duration: 0.2 }}\n >\n {renderContent()}\n </motion.span>\n </AnimatePresence>\n </motion.div>\n );\n};\n\n// Main Stepper Component\nexport const Stepper = ({\n steps,\n currentStep,\n onStepClick,\n orientation = \"horizontal\",\n size = \"md\",\n variant = \"glass\",\n showNumbers = true,\n clickable = true,\n showConnector = true,\n className,\n connectorClassName,\n stepClassName,\n showErrors = false,\n errorSteps = [],\n completedSteps,\n animated = true,\n colors,\n}: StepperProps) => {\n const isVertical = orientation === \"vertical\";\n const config = sizeConfig[size];\n\n const getStepStatus = (index: number): StepStatus => {\n if (showErrors && errorSteps.includes(index)) return \"error\";\n if (completedSteps) {\n if (completedSteps.includes(index)) return \"completed\";\n if (index === currentStep) return \"current\";\n return \"upcoming\";\n }\n if (index < currentStep) return \"completed\";\n if (index === currentStep) return \"current\";\n return \"upcoming\";\n };\n\n const handleStepClick = (index: number) => {\n if (!clickable || !onStepClick) return;\n const step = steps[index];\n if (step.disabled) return;\n\n // Allow clicking on completed or current steps\n const status = getStepStatus(index);\n if (status === \"completed\" || status === \"current\") {\n onStepClick(index);\n }\n };\n\n return (\n <div\n className={mergeClassNames(\n \"w-full relative\",\n isVertical ? \"flex flex-col\" : \"flex items-start justify-between\",\n className,\n )}\n >\n {/* Global Background Continuous Connector */}\n {showConnector &&\n (() => {\n const paddingValue =\n variant === \"glass\" ||\n variant === \"outlined\" ||\n variant === \"minimal\"\n ? 4\n : 2;\n return (\n <div\n className={mergeClassNames(\n \"absolute rounded-full\",\n variant === \"glass\"\n ? \"bg-white/30 dark:bg-white/10 backdrop-blur-sm\"\n : \"bg-neutral-200 dark:bg-neutral-700\",\n connectorClassName,\n )}\n style={{\n ...(isVertical\n ? {\n // Vertical background line\n top: \"0\",\n bottom: \"0\",\n left: `calc(${paddingValue}px + 1px + ${config.indicator.split(\" \")[0].replace(\"w-\", \"\")} * 0.125rem - ${config.connectorThickness} / 2)`,\n width: config.connectorThickness,\n }\n : {\n // Horizontal background line\n left: \"0\",\n right: \"0\",\n top: `calc(${paddingValue}px + 1px + ${config.indicator.split(\" \")[1].replace(\"h-\", \"\")} * 0.125rem - ${config.connectorThickness} / 2)`,\n height: config.connectorThickness,\n }),\n }}\n >\n {/* Animated fill connector */}\n {animated ? (\n <motion.div\n className=\"absolute top-0 left-0 bg-accent rounded-full\"\n initial={{ [isVertical ? \"height\" : \"width\"]: 0 }}\n animate={{\n [isVertical ? \"height\" : \"width\"]:\n `${steps.length > 1 ? (Math.min(currentStep, steps.length - 1) / (steps.length - 1)) * 100 : 0}%`,\n }}\n transition={{ duration: 0.4, ease: \"easeOut\" }}\n style={{\n ...(isVertical ? { width: \"100%\" } : { height: \"100%\" }),\n backgroundColor: colors?.connector || colors?.completed,\n }}\n />\n ) : (\n <div\n className=\"absolute top-0 left-0 bg-accent rounded-full\"\n style={{\n ...(isVertical\n ? {\n width: \"100%\",\n height: `${steps.length > 1 ? (Math.min(currentStep, steps.length - 1) / (steps.length - 1)) * 100 : 0}%`,\n }\n : {\n height: \"100%\",\n width: `${steps.length > 1 ? (Math.min(currentStep, steps.length - 1) / (steps.length - 1)) * 100 : 0}%`,\n }),\n backgroundColor: colors?.connector || colors?.completed,\n }}\n />\n )}\n </div>\n );\n })()}\n\n {steps.map((step, index) => {\n const status = getStepStatus(index);\n const isLast = index === steps.length - 1;\n const isClickable = clickable && !step.disabled; // Keep steps clickable unconditionally for navigation\n const paddingValue =\n variant === \"glass\" || variant === \"outlined\" || variant === \"minimal\"\n ? 4\n : 2;\n\n return (\n <div\n key={step.id}\n className={mergeClassNames(\n \"relative z-10\",\n isVertical\n ? \"flex gap-4 pb-8\" // spacing between vertical elements\n : \"flex flex-1 flex-col items-center\",\n !isLast && isVertical && \"mb-2\",\n isVertical && isLast && \"pb-0\",\n stepClassName,\n )}\n style={{\n // Ensure perfect horizontal distribution\n ...(!isVertical\n ? {\n flexBasis: 0,\n flexGrow: 1,\n // Keep first item aligned left, last aligned right, others centered\n alignItems:\n index === 0\n ? \"flex-start\"\n : isLast\n ? \"flex-end\"\n : \"center\",\n }\n : {}),\n }}\n >\n {/* Step Indicator */}\n <button\n type=\"button\"\n onClick={() => handleStepClick(index)}\n disabled={!isClickable}\n className={mergeClassNames(\n \"relative z-10 shrink-0 flex items-center justify-center bg-white dark:bg-neutral-900 rounded-full\", // Mask background line\n isClickable ? \"cursor-pointer\" : \"cursor-default\",\n // Horizontal offset logic for end items to align with text\n !isVertical && index === 0 && \"mx-0\",\n !isVertical && isLast && \"mx-0\",\n )}\n style={{\n // Adjust the background masking size depending on variant so the line doesn't peek through the edges\n padding: `${paddingValue}px`,\n }}\n aria-current={status === \"current\" ? \"step\" : undefined}\n >\n <StepIndicator\n step={step}\n index={index}\n status={status}\n size={size}\n variant={variant}\n showNumbers={showNumbers}\n animated={animated}\n colors={colors}\n />\n </button>\n\n {/* Step text content */}\n <motion.div\n className={mergeClassNames(\n \"mt-2\",\n isVertical ? \"flex-1 pb-6\" : \"text-center px-2\",\n !isVertical && index === 0 && \"text-left px-0\",\n !isVertical && isLast && \"text-right px-0\",\n isVertical && isLast && \"pb-0\",\n )}\n style={isVertical ? { marginTop: \"-4px\" } : undefined}\n initial={animated ? { opacity: 0, y: 10 } : undefined}\n animate={animated ? { opacity: 1, y: 0 } : undefined}\n transition={{ delay: index * 0.1 }}\n >\n <p\n className={mergeClassNames(\n \"font-medium transition-colors duration-200\",\n config.text,\n status === \"current\"\n ? \"text-accent\"\n : status === \"completed\"\n ? \"text-neutral-700 dark:text-neutral-200\"\n : status === \"error\"\n ? \"text-red-500\"\n : \"text-neutral-500 dark:text-neutral-400\",\n )}\n >\n {step.title}\n {step.optional && (\n <span className=\"ml-1 text-neutral-400 dark:text-neutral-500 font-normal\">\n (Optional)\n </span>\n )}\n </p>\n {step.description && (\n <p\n className={mergeClassNames(\n \"mt-0.5 text-neutral-500 dark:text-neutral-400\",\n size === \"sm\" ? \"text-xs\" : \"text-xs\",\n )}\n >\n {step.description}\n </p>\n )}\n </motion.div>\n\n {/* Step content (for vertical with content) */}\n {isVertical && step.content && status === \"current\" && (\n <motion.div\n initial={{ opacity: 0, height: 0 }}\n animate={{ opacity: 1, height: \"auto\" }}\n exit={{ opacity: 0, height: 0 }}\n className=\"pl-14 pb-4 w-full\"\n >\n {step.content}\n </motion.div>\n )}\n </div>\n );\n })}\n </div>\n );\n};\n\nStepper.displayName = \"Stepper\";\n\nexport default Stepper;\n"],"mappings":"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"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"textarea-CAUsyu4-.cjs","names":[],"sources":["../../src/components/forms/textarea/Textarea.tsx"],"sourcesContent":["import type { TextareaProps } from \"./types\";\nimport { forwardRef, useState } from \"react\";\nimport { motion, useMotionTemplate, useMotionValue } from \"framer-motion\";\n\nimport { mergeClassNames } from \"../../../utils\";\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n ({ className = \"\", label, error, helperText, disabled, ...props }, ref) => {\n const radius = 100;\n const [visible, setVisible] = useState(false);\n const mouseX = useMotionValue(0);\n const mouseY = useMotionValue(0);\n\n const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\n const { left, top } = event.currentTarget.getBoundingClientRect();\n mouseX.set(event.clientX - left);\n mouseY.set(event.clientY - top);\n };\n\n return (\n <div className=\"w-full\">\n {label && (\n <label className=\"mb-2 block text-sm leading-none font-medium text-foreground peer-disabled:cursor-not-allowed peer-disabled:opacity-70\">\n {label}\n </label>\n )}\n\n <motion.div\n style={{\n backgroundImage: disabled\n ? \"none\"\n : useMotionTemplate`\n radial-gradient(\n ${\n visible ? `${radius}px` : \"0px\"\n } 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/textarea rounded-lg p-[2px] transition duration-300 hover:border-accent\",\n error ? \"border-destructive\" : \"border-border\",\n )}\n >\n <textarea\n ref={ref}\n disabled={disabled}\n className={mergeClassNames(\n \"shadow-input flex min-h-[80px] w-full rounded-md border border-input bg-background-secondary px-3 py-2 text-sm text-foreground transition duration-400 ease-in-out group-hover/textarea:shadow-none placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent disabled:cursor-not-allowed disabled:opacity-50 resize-none\",\n error &&\n \"border-destructive text-destructive placeholder:text-destructive focus-visible:ring-destructive\",\n className,\n )}\n {...props}\n />\n </motion.div>\n\n {error && (\n <p className=\"text-sm font-medium text-destructive mt-1\">{error}</p>\n )}\n {helperText && !error && (\n <p className=\"mt-1 text-sm text-muted-foreground\">{helperText}</p>\n )}\n </div>\n );\n },\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";;;;;;AAMA,IAAa,YAAA,GAAA,MAAA,aACV,EAAE,YAAY,IAAI,OAAO,OAAO,YAAY,UAAU,GAAG,SAAS,QAAQ;CACzE,MAAM,SAAS;CACf,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,UAAuB,MAAM;CAC7C,MAAM,UAAA,GAAA,cAAA,gBAAwB,EAAE;CAChC,MAAM,UAAA,GAAA,cAAA,gBAAwB,EAAE;CAEhC,MAAM,mBAAmB,UAA4C;EACnE,MAAM,EAAE,MAAM,QAAQ,MAAM,cAAc,uBAAuB;AACjE,SAAO,IAAI,MAAM,UAAU,KAAK;AAChC,SAAO,IAAI,MAAM,UAAU,IAAI;;AAGjC,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf;GACG,SACC,iBAAA,GAAA,kBAAA,KAAC,SAAD;IAAO,WAAU;cACd;IACK,CAAA;GAGV,iBAAA,GAAA,kBAAA,KAAC,cAAA,OAAO,KAAR;IACE,OAAO,EACL,iBAAiB,WACb,SACA,cAAA,iBAAiB;;sBAGX,UAAU,GAAG,OAAO,MAAM,MAC3B,aAAa,OAAO,KAAK,OAAO;;;;mBAK1C;IACD,aAAa,CAAC,WAAW,kBAAkB,KAAA;IAC3C,cAAc,CAAC,iBAAiB,WAAW,KAAK,GAAG,KAAA;IACnD,cAAc,CAAC,iBAAiB,WAAW,MAAM,GAAG,KAAA;IACpD,WAAW,cAAA,gBACT,iFACA,QAAQ,uBAAuB,gBAChC;cAED,iBAAA,GAAA,kBAAA,KAAC,YAAD;KACO;KACK;KACV,WAAW,cAAA,gBACT,+WACA,SACE,mGACF,UACD;KACD,GAAI;KACJ,CAAA;IACS,CAAA;GAEZ,SACC,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAA6C;IAAU,CAAA;GAErE,cAAc,CAAC,SACd,iBAAA,GAAA,kBAAA,KAAC,KAAD;IAAG,WAAU;cAAsC;IAAe,CAAA;GAEhE;;EAGX;AAED,SAAS,cAAc"}
|