@dimasbaguspm/versaur 0.0.8 → 0.0.9
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 +5 -44
- package/dist/calendar-DwRERSxq.js +645 -0
- package/dist/drawer-Cn7sreJG.js +221 -0
- package/dist/enforce-subpath-import.js +106 -0
- package/dist/feedbacks/index.d.ts +3 -0
- package/dist/feedbacks/index.js +6 -0
- package/dist/feedbacks/progress-indicator/index.d.ts +2 -0
- package/dist/feedbacks/progress-indicator/progress-indicator.d.ts +7 -0
- package/dist/feedbacks/progress-indicator/types.d.ts +19 -0
- package/dist/form-layout-COQbtyW5.js +302 -0
- package/dist/{components → forms}/calculator-input/types.d.ts +2 -2
- package/dist/forms/index.d.ts +12 -0
- package/dist/forms/index.js +18 -0
- package/dist/{components → forms}/segment-multiple-input/types.d.ts +4 -0
- package/dist/{components → forms}/segment-single-input/types.d.ts +4 -0
- package/dist/{components → forms}/time-picker-input/types.d.ts +1 -1
- package/dist/index-DOdDlCoL.js +3055 -0
- package/dist/index.d.ts +6 -2
- package/dist/index.js +50 -7727
- package/dist/layouts/form-layout/form-layout.d.ts +4 -0
- package/dist/layouts/form-layout/index.d.ts +2 -0
- package/dist/layouts/form-layout/types.d.ts +20 -0
- package/dist/layouts/index.d.ts +5 -0
- package/dist/layouts/index.js +8 -0
- package/dist/menu--hEHXVZf.js +315 -0
- package/dist/navigation/index.d.ts +2 -0
- package/dist/navigation/index.js +5 -0
- package/dist/{components → navigation}/tabs/types.d.ts +4 -0
- package/dist/overlays/index.d.ts +3 -0
- package/dist/overlays/index.js +7 -0
- package/dist/{components → overlays}/menu/menu.atoms.d.ts +1 -1
- package/dist/{components → overlays}/menu/menu.d.ts +1 -1
- package/dist/{components → overlays}/menu/types.d.ts +1 -1
- package/dist/primitive/brand/brand.atoms.d.ts +6 -0
- package/dist/primitive/brand/brand.d.ts +8 -0
- package/dist/primitive/brand/index.d.ts +2 -0
- package/dist/primitive/brand/types.d.ts +17 -0
- package/dist/{components → primitive}/button-icon/types.d.ts +1 -1
- package/dist/primitive/index.d.ts +14 -0
- package/dist/primitive/index.js +18 -0
- package/dist/skeleton-DwqjRsF-.js +277 -0
- package/dist/styles.css +4 -0
- package/dist/switch-input-DRNFMsqC.js +1985 -0
- package/dist/tabs-KyFmo5cA.js +310 -0
- package/dist/tile-BinjKW_i.js +921 -0
- package/package.json +24 -2
- package/dist/components/alert/alert.stories.d.ts +0 -42
- package/dist/components/alert/helpers.d.ts +0 -14
- package/dist/components/app-bar/app-bar.stories.d.ts +0 -21
- package/dist/components/app-bar/helpers.d.ts +0 -6
- package/dist/components/avatar/avatar.stories.d.ts +0 -42
- package/dist/components/avatar/helpers.d.ts +0 -14
- package/dist/components/badge/badge.stories.d.ts +0 -50
- package/dist/components/badge/helpers.d.ts +0 -11
- package/dist/components/bottom-bar/bottom-bar.stories.d.ts +0 -6
- package/dist/components/bottom-bar/helpers.d.ts +0 -7
- package/dist/components/breadcrumbs/breadcrumbs.stories.d.ts +0 -7
- package/dist/components/breadcrumbs/helpers.d.ts +0 -7
- package/dist/components/button/button.stories.d.ts +0 -50
- package/dist/components/button-float/button-float.stories.d.ts +0 -27
- package/dist/components/button-float/helpers.d.ts +0 -4
- package/dist/components/button-icon/button-icon.stories.d.ts +0 -45
- package/dist/components/button-icon/helpers.d.ts +0 -11
- package/dist/components/calculator/calculator.stories.d.ts +0 -8
- package/dist/components/calculator/helpers.d.ts +0 -7
- package/dist/components/calculator-input/calculator-input.stories.d.ts +0 -8
- package/dist/components/calculator-input/helpers.d.ts +0 -3
- package/dist/components/calendar/calendar.stories.d.ts +0 -6
- package/dist/components/checkbox-input/checkbox-input.stories.d.ts +0 -44
- package/dist/components/checkbox-input/context.d.ts +0 -10
- package/dist/components/checkbox-input/helpers.d.ts +0 -11
- package/dist/components/chip-input/chip-input.stories.d.ts +0 -12
- package/dist/components/chip-input/context.d.ts +0 -11
- package/dist/components/chip-input/helpers.d.ts +0 -4
- package/dist/components/date-single-picker-input/date-single-picker-input.docked.stories.d.ts +0 -10
- package/dist/components/date-single-picker-input/date-single-picker-input.modal.stories.d.ts +0 -10
- package/dist/components/date-single-picker-input/helpers.d.ts +0 -3
- package/dist/components/drawer/context.d.ts +0 -11
- package/dist/components/drawer/drawer.stories.d.ts +0 -42
- package/dist/components/drawer/helpers.d.ts +0 -40
- package/dist/components/icon/helpers.d.ts +0 -4
- package/dist/components/icon/icon.stories.d.ts +0 -39
- package/dist/components/index.d.ts +0 -35
- package/dist/components/loading-indicator/helpers.d.ts +0 -9
- package/dist/components/loading-indicator/loading-indicator.stories.d.ts +0 -16
- package/dist/components/menu/context.d.ts +0 -13
- package/dist/components/menu/helpers.d.ts +0 -8
- package/dist/components/menu/menu.stories.d.ts +0 -22
- package/dist/components/modal/helpers.d.ts +0 -7
- package/dist/components/modal/modal.stories.d.ts +0 -13
- package/dist/components/page-layout/helpers.d.ts +0 -6
- package/dist/components/page-layout/page-layout.stories.d.ts +0 -8
- package/dist/components/radio-input/context.d.ts +0 -11
- package/dist/components/radio-input/helpers.d.ts +0 -11
- package/dist/components/radio-input/radio-input.stories.d.ts +0 -74
- package/dist/components/segment-multiple-input/context.d.ts +0 -12
- package/dist/components/segment-multiple-input/helpers.d.ts +0 -15
- package/dist/components/segment-multiple-input/segment-multiple-input.stories.d.ts +0 -66
- package/dist/components/segment-single-input/context.d.ts +0 -12
- package/dist/components/segment-single-input/helpers.d.ts +0 -15
- package/dist/components/segment-single-input/segment-single-input.stories.d.ts +0 -57
- package/dist/components/select-input/helpers.d.ts +0 -3
- package/dist/components/select-input/select-input.stories.d.ts +0 -50
- package/dist/components/skeleton/helpers.d.ts +0 -6
- package/dist/components/skeleton/skeleton.stories.d.ts +0 -25
- package/dist/components/snackbar/helpers.d.ts +0 -8
- package/dist/components/snackbar/snackbar.stories.d.ts +0 -8
- package/dist/components/switch-input/helpers.d.ts +0 -18
- package/dist/components/switch-input/switch-input.stories.d.ts +0 -10
- package/dist/components/table/context.d.ts +0 -3
- package/dist/components/table/helpers.d.ts +0 -2
- package/dist/components/table/table.stories.d.ts +0 -27
- package/dist/components/tabs/context.d.ts +0 -3
- package/dist/components/tabs/helpers.d.ts +0 -8
- package/dist/components/tabs/tabs.stories.d.ts +0 -17
- package/dist/components/text/helpers.d.ts +0 -18
- package/dist/components/text/text.stories.d.ts +0 -17
- package/dist/components/text-input/helpers.d.ts +0 -3
- package/dist/components/text-input/text-input.stories.d.ts +0 -20
- package/dist/components/textarea-input/helpers.d.ts +0 -4
- package/dist/components/textarea-input/textarea-input.stories.d.ts +0 -50
- package/dist/components/tile/helpers.d.ts +0 -8
- package/dist/components/tile/tile.stories.d.ts +0 -35
- package/dist/components/time-picker-input/helpers.d.ts +0 -4
- package/dist/components/time-picker-input/time-picker-input.stories.d.ts +0 -7
- package/dist/components/top-bar/helpers.d.ts +0 -26
- package/dist/components/top-bar/top-bar.stories.d.ts +0 -15
- package/dist/hooks/index.d.ts +0 -1
- package/dist/hooks/use-floating-position/index.d.ts +0 -1
- /package/dist/{components → feedbacks}/loading-indicator/index.d.ts +0 -0
- /package/dist/{components → feedbacks}/loading-indicator/loading-indicator.atoms.d.ts +0 -0
- /package/dist/{components → feedbacks}/loading-indicator/loading-indicator.d.ts +0 -0
- /package/dist/{components → feedbacks}/loading-indicator/types.d.ts +0 -0
- /package/dist/{components → feedbacks}/skeleton/index.d.ts +0 -0
- /package/dist/{components → feedbacks}/skeleton/skeleton.d.ts +0 -0
- /package/dist/{components → feedbacks}/skeleton/types.d.ts +0 -0
- /package/dist/{components → forms}/calculator-input/calculator-input.atoms.d.ts +0 -0
- /package/dist/{components → forms}/calculator-input/calculator-input.d.ts +0 -0
- /package/dist/{components → forms}/calculator-input/index.d.ts +0 -0
- /package/dist/{components → forms}/checkbox-input/checkbox-input.atoms.d.ts +0 -0
- /package/dist/{components → forms}/checkbox-input/checkbox-input.d.ts +0 -0
- /package/dist/{components → forms}/checkbox-input/index.d.ts +0 -0
- /package/dist/{components → forms}/checkbox-input/types.d.ts +0 -0
- /package/dist/{components → forms}/chip-input/chip-input.atoms.d.ts +0 -0
- /package/dist/{components → forms}/chip-input/chip-input.d.ts +0 -0
- /package/dist/{components → forms}/chip-input/index.d.ts +0 -0
- /package/dist/{components → forms}/chip-input/types.d.ts +0 -0
- /package/dist/{components → forms}/date-single-picker-input/date-single-picker-input.atoms.d.ts +0 -0
- /package/dist/{components → forms}/date-single-picker-input/date-single-picker-input.d.ts +0 -0
- /package/dist/{components → forms}/date-single-picker-input/date-single-picker-input.docked.d.ts +0 -0
- /package/dist/{components → forms}/date-single-picker-input/date-single-picker-input.modal.d.ts +0 -0
- /package/dist/{components → forms}/date-single-picker-input/index.d.ts +0 -0
- /package/dist/{components → forms}/date-single-picker-input/types.d.ts +0 -0
- /package/dist/{components → forms}/date-single-picker-input/use-date-single-picker.d.ts +0 -0
- /package/dist/{components → forms}/radio-input/index.d.ts +0 -0
- /package/dist/{components → forms}/radio-input/radio-input.atoms.d.ts +0 -0
- /package/dist/{components → forms}/radio-input/radio-input.d.ts +0 -0
- /package/dist/{components → forms}/radio-input/types.d.ts +0 -0
- /package/dist/{components → forms}/segment-multiple-input/index.d.ts +0 -0
- /package/dist/{components → forms}/segment-multiple-input/segment-multiple-input.atoms.d.ts +0 -0
- /package/dist/{components → forms}/segment-multiple-input/segment-multiple-input.d.ts +0 -0
- /package/dist/{components → forms}/segment-single-input/index.d.ts +0 -0
- /package/dist/{components → forms}/segment-single-input/segment-single-input.atoms.d.ts +0 -0
- /package/dist/{components → forms}/segment-single-input/segment-single-input.d.ts +0 -0
- /package/dist/{components → forms}/select-input/index.d.ts +0 -0
- /package/dist/{components → forms}/select-input/select-input.d.ts +0 -0
- /package/dist/{components → forms}/select-input/types.d.ts +0 -0
- /package/dist/{components → forms}/switch-input/index.d.ts +0 -0
- /package/dist/{components → forms}/switch-input/switch-input.atoms.d.ts +0 -0
- /package/dist/{components → forms}/switch-input/switch-input.d.ts +0 -0
- /package/dist/{components → forms}/switch-input/types.d.ts +0 -0
- /package/dist/{components → forms}/text-input/index.d.ts +0 -0
- /package/dist/{components → forms}/text-input/text-input.d.ts +0 -0
- /package/dist/{components → forms}/text-input/types.d.ts +0 -0
- /package/dist/{components → forms}/textarea-input/index.d.ts +0 -0
- /package/dist/{components → forms}/textarea-input/textarea-input.d.ts +0 -0
- /package/dist/{components → forms}/textarea-input/types.d.ts +0 -0
- /package/dist/{components → forms}/time-picker-input/index.d.ts +0 -0
- /package/dist/{components → forms}/time-picker-input/time-picker-input.atoms.d.ts +0 -0
- /package/dist/{components → forms}/time-picker-input/time-picker-input.d.ts +0 -0
- /package/dist/{components → layouts}/app-bar/app-bar.atoms.d.ts +0 -0
- /package/dist/{components → layouts}/app-bar/app-bar.d.ts +0 -0
- /package/dist/{components → layouts}/app-bar/index.d.ts +0 -0
- /package/dist/{components → layouts}/app-bar/types.d.ts +0 -0
- /package/dist/{components → layouts}/bottom-bar/bottom-bar.atoms.d.ts +0 -0
- /package/dist/{components → layouts}/bottom-bar/bottom-bar.d.ts +0 -0
- /package/dist/{components → layouts}/bottom-bar/index.d.ts +0 -0
- /package/dist/{components → layouts}/bottom-bar/types.d.ts +0 -0
- /package/dist/{components → layouts}/page-layout/index.d.ts +0 -0
- /package/dist/{components → layouts}/page-layout/page-layout.d.ts +0 -0
- /package/dist/{components → layouts}/page-layout/types.d.ts +0 -0
- /package/dist/{components → layouts}/top-bar/index.d.ts +0 -0
- /package/dist/{components → layouts}/top-bar/top-bar.atoms.d.ts +0 -0
- /package/dist/{components → layouts}/top-bar/top-bar.d.ts +0 -0
- /package/dist/{components → layouts}/top-bar/types.d.ts +0 -0
- /package/dist/{components → navigation}/breadcrumbs/breadcrumbs.atoms.d.ts +0 -0
- /package/dist/{components → navigation}/breadcrumbs/breadcrumbs.d.ts +0 -0
- /package/dist/{components → navigation}/breadcrumbs/index.d.ts +0 -0
- /package/dist/{components → navigation}/breadcrumbs/types.d.ts +0 -0
- /package/dist/{components → navigation}/tabs/index.d.ts +0 -0
- /package/dist/{components → navigation}/tabs/tabs.atoms.d.ts +0 -0
- /package/dist/{components → navigation}/tabs/tabs.d.ts +0 -0
- /package/dist/{components → navigation}/tabs/use-tab-indicator.d.ts +0 -0
- /package/dist/{components → overlays}/drawer/drawer.atoms.d.ts +0 -0
- /package/dist/{components → overlays}/drawer/drawer.d.ts +0 -0
- /package/dist/{components → overlays}/drawer/index.d.ts +0 -0
- /package/dist/{components → overlays}/drawer/types.d.ts +0 -0
- /package/dist/{components → overlays}/menu/index.d.ts +0 -0
- /package/dist/{components → overlays}/menu/use-menu.d.ts +0 -0
- /package/dist/{components → overlays}/modal/index.d.ts +0 -0
- /package/dist/{components → overlays}/modal/modal.atoms.d.ts +0 -0
- /package/dist/{components → overlays}/modal/modal.d.ts +0 -0
- /package/dist/{components → overlays}/modal/types.d.ts +0 -0
- /package/dist/{components → overlays}/modal/use-escape-close.d.ts +0 -0
- /package/dist/{components → overlays}/modal/use-focus-trap.d.ts +0 -0
- /package/dist/{components → primitive}/alert/alert.atoms.d.ts +0 -0
- /package/dist/{components → primitive}/alert/alert.d.ts +0 -0
- /package/dist/{components → primitive}/alert/index.d.ts +0 -0
- /package/dist/{components → primitive}/alert/types.d.ts +0 -0
- /package/dist/{components → primitive}/avatar/avatar.atoms.d.ts +0 -0
- /package/dist/{components → primitive}/avatar/avatar.d.ts +0 -0
- /package/dist/{components → primitive}/avatar/index.d.ts +0 -0
- /package/dist/{components → primitive}/avatar/types.d.ts +0 -0
- /package/dist/{components → primitive}/badge/badge.d.ts +0 -0
- /package/dist/{components → primitive}/badge/index.d.ts +0 -0
- /package/dist/{components → primitive}/badge/types.d.ts +0 -0
- /package/dist/{components → primitive}/button/button.d.ts +0 -0
- /package/dist/{components → primitive}/button/index.d.ts +0 -0
- /package/dist/{components → primitive}/button/types.d.ts +0 -0
- /package/dist/{components → primitive}/button-float/button-float.d.ts +0 -0
- /package/dist/{components → primitive}/button-float/index.d.ts +0 -0
- /package/dist/{components → primitive}/button-float/types.d.ts +0 -0
- /package/dist/{hooks/use-floating-position → primitive/button-float}/use-floating-position.d.ts +0 -0
- /package/dist/{components → primitive}/button-icon/button-icon.d.ts +0 -0
- /package/dist/{components → primitive}/button-icon/index.d.ts +0 -0
- /package/dist/{components → primitive}/calculator/calculator.atoms.d.ts +0 -0
- /package/dist/{components → primitive}/calculator/calculator.d.ts +0 -0
- /package/dist/{components → primitive}/calculator/index.d.ts +0 -0
- /package/dist/{components → primitive}/calculator/types.d.ts +0 -0
- /package/dist/{components → primitive}/calculator/use-calculator.d.ts +0 -0
- /package/dist/{components → primitive}/calendar/calendar.d.ts +0 -0
- /package/dist/{components → primitive}/calendar/index.d.ts +0 -0
- /package/dist/{components → primitive}/calendar/types.d.ts +0 -0
- /package/dist/{components → primitive}/icon/icon.d.ts +0 -0
- /package/dist/{components → primitive}/icon/index.d.ts +0 -0
- /package/dist/{components → primitive}/icon/types.d.ts +0 -0
- /package/dist/{components → primitive}/snackbar/index.d.ts +0 -0
- /package/dist/{components → primitive}/snackbar/snackbar.atoms.d.ts +0 -0
- /package/dist/{components → primitive}/snackbar/snackbar.d.ts +0 -0
- /package/dist/{components → primitive}/snackbar/types.d.ts +0 -0
- /package/dist/{components → primitive}/table/index.d.ts +0 -0
- /package/dist/{components → primitive}/table/table.atoms.d.ts +0 -0
- /package/dist/{components → primitive}/table/table.d.ts +0 -0
- /package/dist/{components → primitive}/table/types.d.ts +0 -0
- /package/dist/{components → primitive}/text/index.d.ts +0 -0
- /package/dist/{components → primitive}/text/text.d.ts +0 -0
- /package/dist/{components → primitive}/text/types.d.ts +0 -0
- /package/dist/{components → primitive}/tile/index.d.ts +0 -0
- /package/dist/{components → primitive}/tile/tile.d.ts +0 -0
- /package/dist/{components → primitive}/tile/types.d.ts +0 -0
|
@@ -0,0 +1,1985 @@
|
|
|
1
|
+
import { c as cva, j as jsxRuntimeExports, a as cn } from "./index-DOdDlCoL.js";
|
|
2
|
+
import React__default, { useState, useRef, createContext, useContext, useEffect, useId, useCallback } from "react";
|
|
3
|
+
import { I as Icon, C as Calculator, B as Button, b as Calendar, T as Text } from "./calendar-DwRERSxq.js";
|
|
4
|
+
import { a as Modal, M as Menu } from "./menu--hEHXVZf.js";
|
|
5
|
+
import { CalculatorIcon, Check, Clock } from "lucide-react";
|
|
6
|
+
const textInputVariants = cva(
|
|
7
|
+
"block w-full rounded-md border bg-white transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none disabled:bg-gray-50",
|
|
8
|
+
{
|
|
9
|
+
variants: {
|
|
10
|
+
variant: {
|
|
11
|
+
// Core variants using Versaur color system
|
|
12
|
+
primary: "border-coral/30 text-foreground focus:border-coral focus:ring-coral/20",
|
|
13
|
+
secondary: "border-sage/30 text-foreground focus:border-sage focus:ring-sage/20",
|
|
14
|
+
tertiary: "border-mist/30 text-foreground focus:border-mist focus:ring-mist/20",
|
|
15
|
+
ghost: "border-slate/30 text-foreground focus:border-slate focus:ring-slate/20",
|
|
16
|
+
neutral: "border-gray-300 text-foreground focus:border-gray-400 focus:ring-gray-400/20",
|
|
17
|
+
// Outline variants
|
|
18
|
+
"primary-outline": "border-coral text-foreground focus:border-coral focus:ring-coral/20",
|
|
19
|
+
"secondary-outline": "border-sage text-foreground focus:border-sage focus:ring-sage/20",
|
|
20
|
+
"tertiary-outline": "border-mist text-foreground focus:border-mist focus:ring-mist/20",
|
|
21
|
+
"ghost-outline": "border-slate text-foreground focus:border-slate focus:ring-slate/20",
|
|
22
|
+
"neutral-outline": "border-gray-400 text-foreground focus:border-gray-500 focus:ring-gray-500/20",
|
|
23
|
+
// Semantic variants
|
|
24
|
+
success: "border-success/30 text-foreground focus:border-success focus:ring-success/20",
|
|
25
|
+
"success-outline": "border-success text-foreground focus:border-success focus:ring-success/20",
|
|
26
|
+
info: "border-info/30 text-foreground focus:border-info focus:ring-info/20",
|
|
27
|
+
"info-outline": "border-info text-foreground focus:border-info focus:ring-info/20",
|
|
28
|
+
warning: "border-warning/30 text-foreground focus:border-warning focus:ring-warning/20",
|
|
29
|
+
"warning-outline": "border-warning text-foreground focus:border-warning focus:ring-warning/20",
|
|
30
|
+
danger: "border-danger bg-danger/5 text-foreground focus:border-danger focus:ring-danger/20",
|
|
31
|
+
"danger-outline": "border-danger bg-danger/5 text-foreground focus:border-danger focus:ring-danger/20"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
defaultVariants: {
|
|
35
|
+
variant: "primary"
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
), TextInput = React__default.forwardRef(
|
|
39
|
+
({
|
|
40
|
+
variant: e = "primary",
|
|
41
|
+
label: t,
|
|
42
|
+
leftContent: s,
|
|
43
|
+
rightContent: a,
|
|
44
|
+
helperText: n,
|
|
45
|
+
error: c,
|
|
46
|
+
className: l,
|
|
47
|
+
disabled: o,
|
|
48
|
+
id: r,
|
|
49
|
+
...u
|
|
50
|
+
}, x) => {
|
|
51
|
+
const i = React__default.useId(), d = r || i, g = !!c;
|
|
52
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
|
|
53
|
+
t && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
54
|
+
"label",
|
|
55
|
+
{
|
|
56
|
+
htmlFor: d,
|
|
57
|
+
className: "block text-sm font-medium text-foreground mb-2",
|
|
58
|
+
children: t
|
|
59
|
+
}
|
|
60
|
+
),
|
|
61
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("relative w-full", l), children: [
|
|
62
|
+
s && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
63
|
+
"span",
|
|
64
|
+
{
|
|
65
|
+
className: "absolute left-2.5 top-0 bottom-0 pointer-events-none text-gray-500 flex items-center justify-center w-5",
|
|
66
|
+
"data-testid": "left-content",
|
|
67
|
+
children: s
|
|
68
|
+
}
|
|
69
|
+
),
|
|
70
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
71
|
+
"input",
|
|
72
|
+
{
|
|
73
|
+
ref: x,
|
|
74
|
+
id: d,
|
|
75
|
+
"aria-invalid": g,
|
|
76
|
+
"aria-disabled": o,
|
|
77
|
+
disabled: o,
|
|
78
|
+
className: cn(
|
|
79
|
+
textInputVariants({
|
|
80
|
+
variant: g ? "danger" : e
|
|
81
|
+
}),
|
|
82
|
+
s ? "pl-9" : "pl-3",
|
|
83
|
+
a ? "pr-9" : "pr-3",
|
|
84
|
+
"h-10"
|
|
85
|
+
),
|
|
86
|
+
...u
|
|
87
|
+
}
|
|
88
|
+
),
|
|
89
|
+
a && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
90
|
+
"span",
|
|
91
|
+
{
|
|
92
|
+
className: "absolute right-2.5 top-0 bottom-0 pointer-events-none text-gray-500 flex items-center justify-center w-5",
|
|
93
|
+
"data-testid": "right-content",
|
|
94
|
+
children: a
|
|
95
|
+
}
|
|
96
|
+
)
|
|
97
|
+
] }),
|
|
98
|
+
g && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 text-sm text-danger", role: "alert", children: c }),
|
|
99
|
+
!g && n && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 text-sm text-gray-600", children: n })
|
|
100
|
+
] });
|
|
101
|
+
}
|
|
102
|
+
);
|
|
103
|
+
TextInput.displayName = "TextInput";
|
|
104
|
+
const DEFAULT_HEADER = "Enter Amount", CalculatorInput = ({
|
|
105
|
+
value,
|
|
106
|
+
onChange,
|
|
107
|
+
placeholder,
|
|
108
|
+
disabled,
|
|
109
|
+
modalProps,
|
|
110
|
+
headerLabel,
|
|
111
|
+
label,
|
|
112
|
+
helperText,
|
|
113
|
+
error,
|
|
114
|
+
...rest
|
|
115
|
+
}) => {
|
|
116
|
+
const [open, setOpen] = useState(!1), inputRef = useRef(null), [calculatorValue, setCalculatorValue] = useState(
|
|
117
|
+
value === "" ? "" : String(value)
|
|
118
|
+
), [lastValidValue, setLastValidValue] = useState(value ?? ""), handleCalculatorChange = (v) => {
|
|
119
|
+
setCalculatorValue(v);
|
|
120
|
+
let result = null;
|
|
121
|
+
try {
|
|
122
|
+
if (/^[\d+\-*/.\s]+$/.test(v)) {
|
|
123
|
+
const evalResult = eval(v);
|
|
124
|
+
typeof evalResult == "number" && !isNaN(evalResult) && (result = evalResult);
|
|
125
|
+
}
|
|
126
|
+
} catch {
|
|
127
|
+
}
|
|
128
|
+
result !== null && setLastValidValue(result);
|
|
129
|
+
}, handleOpen = () => {
|
|
130
|
+
setCalculatorValue(value === "" ? "" : String(value)), setOpen(!0);
|
|
131
|
+
}, handleOk = () => {
|
|
132
|
+
const trimmed = calculatorValue.trim();
|
|
133
|
+
let result = null;
|
|
134
|
+
try {
|
|
135
|
+
if (/^[\d+\-*/.\s]+$/.test(trimmed)) {
|
|
136
|
+
const evalResult = eval(trimmed);
|
|
137
|
+
typeof evalResult == "number" && !isNaN(evalResult) && (result = evalResult);
|
|
138
|
+
}
|
|
139
|
+
} catch {
|
|
140
|
+
}
|
|
141
|
+
result !== null ? (onChange(result), setLastValidValue(result)) : onChange(lastValidValue), setOpen(!1);
|
|
142
|
+
}, handleClear = () => {
|
|
143
|
+
setCalculatorValue(""), setLastValidValue(""), onChange("");
|
|
144
|
+
};
|
|
145
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
146
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
147
|
+
TextInput,
|
|
148
|
+
{
|
|
149
|
+
ref: inputRef,
|
|
150
|
+
type: "text",
|
|
151
|
+
label,
|
|
152
|
+
value: value === "" ? "" : value,
|
|
153
|
+
onClick: disabled ? void 0 : handleOpen,
|
|
154
|
+
readOnly: !0,
|
|
155
|
+
disabled,
|
|
156
|
+
error,
|
|
157
|
+
helperText,
|
|
158
|
+
rightContent: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { as: CalculatorIcon, size: "sm", color: "ghost" }),
|
|
159
|
+
placeholder,
|
|
160
|
+
"aria-label": rest["aria-label"],
|
|
161
|
+
"aria-labelledby": rest["aria-labelledby"],
|
|
162
|
+
"aria-describedby": rest["aria-describedby"],
|
|
163
|
+
className: "cursor-pointer bg-white"
|
|
164
|
+
}
|
|
165
|
+
),
|
|
166
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
167
|
+
Modal,
|
|
168
|
+
{
|
|
169
|
+
isOpen: open,
|
|
170
|
+
onOpenChange: setOpen,
|
|
171
|
+
disableOverlayClose: !!disabled,
|
|
172
|
+
disableEscClose: !!disabled,
|
|
173
|
+
size: "sm",
|
|
174
|
+
"aria-label": rest["aria-label"],
|
|
175
|
+
"aria-labelledby": rest["aria-labelledby"],
|
|
176
|
+
"aria-describedby": rest["aria-describedby"],
|
|
177
|
+
...modalProps,
|
|
178
|
+
children: [
|
|
179
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(Modal.Header, { children: headerLabel ?? DEFAULT_HEADER }),
|
|
180
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(Modal.Body, { className: "flex flex-col items-center justify-center pb-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
181
|
+
Calculator,
|
|
182
|
+
{
|
|
183
|
+
initialValue: typeof value == "number" ? value : "",
|
|
184
|
+
onChange: handleCalculatorChange,
|
|
185
|
+
disabled
|
|
186
|
+
}
|
|
187
|
+
) }),
|
|
188
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(Modal.Footer, { className: "pb-4 pt-0", children: [
|
|
189
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
190
|
+
Button,
|
|
191
|
+
{
|
|
192
|
+
variant: "neutral-ghost",
|
|
193
|
+
onClick: handleClear,
|
|
194
|
+
disabled,
|
|
195
|
+
children: "Clear"
|
|
196
|
+
}
|
|
197
|
+
),
|
|
198
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
199
|
+
Button,
|
|
200
|
+
{
|
|
201
|
+
variant: "primary-ghost",
|
|
202
|
+
onClick: handleOk,
|
|
203
|
+
disabled,
|
|
204
|
+
children: "OK"
|
|
205
|
+
}
|
|
206
|
+
)
|
|
207
|
+
] })
|
|
208
|
+
]
|
|
209
|
+
}
|
|
210
|
+
)
|
|
211
|
+
] });
|
|
212
|
+
}, checkboxGroupVariants = cva("space-y-2", {
|
|
213
|
+
variants: {
|
|
214
|
+
direction: {
|
|
215
|
+
vertical: "space-y-2 space-x-0",
|
|
216
|
+
horizontal: "flex flex-wrap gap-4 space-y-0"
|
|
217
|
+
}
|
|
218
|
+
},
|
|
219
|
+
defaultVariants: {
|
|
220
|
+
direction: "vertical"
|
|
221
|
+
}
|
|
222
|
+
}), checkboxVariants = cva(
|
|
223
|
+
"relative h-4 w-4 rounded border cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed appearance-none bg-white",
|
|
224
|
+
{
|
|
225
|
+
variants: {
|
|
226
|
+
variant: {
|
|
227
|
+
// Core variants using Versaur color system
|
|
228
|
+
primary: "border-coral/40 checked:bg-coral checked:border-coral focus:ring-coral/20",
|
|
229
|
+
secondary: "border-sage/40 checked:bg-sage checked:border-sage focus:ring-sage/20",
|
|
230
|
+
tertiary: "border-mist/40 checked:bg-mist checked:border-mist focus:ring-mist/20",
|
|
231
|
+
ghost: "border-slate/40 checked:bg-slate checked:border-slate focus:ring-slate/20",
|
|
232
|
+
neutral: "border-gray-300 checked:bg-gray-500 checked:border-gray-500 focus:ring-gray-400/20",
|
|
233
|
+
// Outline variants
|
|
234
|
+
"primary-outline": "border-coral checked:bg-white checked:border-coral focus:ring-coral/20",
|
|
235
|
+
"secondary-outline": "border-sage checked:bg-white checked:border-sage focus:ring-sage/20",
|
|
236
|
+
"tertiary-outline": "border-mist checked:bg-white checked:border-mist focus:ring-mist/20",
|
|
237
|
+
"ghost-outline": "border-slate checked:bg-white checked:border-slate focus:ring-slate/20",
|
|
238
|
+
"neutral-outline": "border-gray-400 checked:bg-white checked:border-gray-400 focus:ring-gray-500/20",
|
|
239
|
+
// Semantic variants
|
|
240
|
+
success: "border-success/40 checked:bg-success checked:border-success focus:ring-success/20",
|
|
241
|
+
"success-outline": "border-success checked:bg-white checked:border-success focus:ring-success/20",
|
|
242
|
+
info: "border-info/40 checked:bg-info checked:border-info focus:ring-info/20",
|
|
243
|
+
"info-outline": "border-info checked:bg-white checked:border-info focus:ring-info/20",
|
|
244
|
+
warning: "border-warning/40 checked:bg-warning checked:border-warning focus:ring-warning/20",
|
|
245
|
+
"warning-outline": "border-warning checked:bg-white checked:border-warning focus:ring-warning/20",
|
|
246
|
+
danger: "border-danger/40 checked:bg-danger checked:border-danger focus:ring-danger/20",
|
|
247
|
+
"danger-outline": "border-danger checked:bg-white checked:border-danger focus:ring-danger/20"
|
|
248
|
+
},
|
|
249
|
+
size: {
|
|
250
|
+
sm: "h-3 w-3",
|
|
251
|
+
md: "h-4 w-4",
|
|
252
|
+
lg: "h-5 w-5"
|
|
253
|
+
}
|
|
254
|
+
},
|
|
255
|
+
defaultVariants: {
|
|
256
|
+
variant: "primary",
|
|
257
|
+
size: "md"
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
), checkboxLabelVariants = cva(
|
|
261
|
+
"text-foreground cursor-pointer select-none",
|
|
262
|
+
{
|
|
263
|
+
variants: {
|
|
264
|
+
size: {
|
|
265
|
+
sm: "text-xs",
|
|
266
|
+
md: "text-sm",
|
|
267
|
+
lg: "text-base"
|
|
268
|
+
},
|
|
269
|
+
disabled: {
|
|
270
|
+
true: "opacity-50 cursor-not-allowed",
|
|
271
|
+
false: ""
|
|
272
|
+
}
|
|
273
|
+
},
|
|
274
|
+
defaultVariants: {
|
|
275
|
+
size: "md",
|
|
276
|
+
disabled: !1
|
|
277
|
+
}
|
|
278
|
+
}
|
|
279
|
+
), CheckboxContext = createContext(null), useCheckboxContext = () => {
|
|
280
|
+
const e = useContext(CheckboxContext);
|
|
281
|
+
if (!e)
|
|
282
|
+
throw new Error("CheckboxOption must be used within CheckboxInput");
|
|
283
|
+
return e;
|
|
284
|
+
}, CheckboxOption = React__default.forwardRef(({ children: e, description: t, className: s, disabled: a, id: n, ...c }, l) => {
|
|
285
|
+
const o = useCheckboxContext(), r = React__default.useId(), u = n || r, x = a || o.disabled, i = o.error ? "danger" : o.variant || "primary";
|
|
286
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
287
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative flex items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
288
|
+
"input",
|
|
289
|
+
{
|
|
290
|
+
ref: l,
|
|
291
|
+
type: "checkbox",
|
|
292
|
+
id: u,
|
|
293
|
+
disabled: x,
|
|
294
|
+
className: cn(
|
|
295
|
+
checkboxVariants({
|
|
296
|
+
variant: i,
|
|
297
|
+
size: o.size
|
|
298
|
+
}),
|
|
299
|
+
// Custom checkmark styling using ::after - centered positioning with size variants
|
|
300
|
+
'after:content-[""] after:absolute after:left-1/2 after:top-[45%] after:-translate-x-1/2 after:-translate-y-1/2 after:border-b-2 after:border-r-2 after:border-white after:rotate-45 after:opacity-0 after:transition-opacity after:duration-200',
|
|
301
|
+
// Size-specific checkmark dimensions
|
|
302
|
+
o.size === "sm" && "after:w-[3px] after:h-[6px]",
|
|
303
|
+
o.size === "md" && "after:w-[4px] after:h-[8px]",
|
|
304
|
+
o.size === "lg" && "after:w-[6px] after:h-[10px]",
|
|
305
|
+
"checked:after:opacity-100",
|
|
306
|
+
// Outline variants use colored checkmark
|
|
307
|
+
i?.includes("outline") && "checked:after:border-current",
|
|
308
|
+
s
|
|
309
|
+
),
|
|
310
|
+
...c
|
|
311
|
+
}
|
|
312
|
+
) }),
|
|
313
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
|
|
314
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
315
|
+
"label",
|
|
316
|
+
{
|
|
317
|
+
htmlFor: u,
|
|
318
|
+
className: checkboxLabelVariants({
|
|
319
|
+
size: o.size,
|
|
320
|
+
disabled: x
|
|
321
|
+
}),
|
|
322
|
+
children: e
|
|
323
|
+
}
|
|
324
|
+
),
|
|
325
|
+
t && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
326
|
+
"div",
|
|
327
|
+
{
|
|
328
|
+
className: cn(
|
|
329
|
+
"text-gray-600 mt-1",
|
|
330
|
+
o.size === "sm" && "text-xs",
|
|
331
|
+
o.size === "md" && "text-xs",
|
|
332
|
+
o.size === "lg" && "text-sm",
|
|
333
|
+
x && "opacity-50"
|
|
334
|
+
),
|
|
335
|
+
children: t
|
|
336
|
+
}
|
|
337
|
+
)
|
|
338
|
+
] })
|
|
339
|
+
] });
|
|
340
|
+
});
|
|
341
|
+
CheckboxOption.displayName = "CheckboxOption";
|
|
342
|
+
const CheckboxInputRoot = React__default.forwardRef(
|
|
343
|
+
({
|
|
344
|
+
variant: e = "primary",
|
|
345
|
+
size: t = "md",
|
|
346
|
+
label: s,
|
|
347
|
+
helperText: a,
|
|
348
|
+
error: n,
|
|
349
|
+
direction: c = "vertical",
|
|
350
|
+
className: l,
|
|
351
|
+
disabled: o,
|
|
352
|
+
children: r,
|
|
353
|
+
...u
|
|
354
|
+
}, x) => {
|
|
355
|
+
const i = !!n, d = {
|
|
356
|
+
variant: e,
|
|
357
|
+
size: t,
|
|
358
|
+
disabled: o,
|
|
359
|
+
error: i
|
|
360
|
+
};
|
|
361
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(CheckboxContext.Provider, { value: d, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: x, className: cn("w-full", l), ...u, children: [
|
|
362
|
+
s && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "block text-sm font-medium text-foreground mb-3", children: s }),
|
|
363
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: checkboxGroupVariants({ direction: c }), children: r }),
|
|
364
|
+
i && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 text-sm text-danger", role: "alert", children: n }),
|
|
365
|
+
!i && a && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 text-sm text-gray-600", children: a })
|
|
366
|
+
] }) });
|
|
367
|
+
}
|
|
368
|
+
);
|
|
369
|
+
CheckboxInputRoot.displayName = "CheckboxInput";
|
|
370
|
+
const CheckboxInput = Object.assign(CheckboxInputRoot, {
|
|
371
|
+
Option: CheckboxOption
|
|
372
|
+
}), ChipInputContext = createContext(
|
|
373
|
+
null
|
|
374
|
+
), useChipInputContext = () => {
|
|
375
|
+
const e = useContext(ChipInputContext);
|
|
376
|
+
if (!e)
|
|
377
|
+
throw new Error("useChipInputContext must be used within ChipInputContext");
|
|
378
|
+
return e;
|
|
379
|
+
}, chipOptionVariants = cva(
|
|
380
|
+
"inline-flex items-center px-2 py-1 text-xs bg-neutral rounded-full font-medium transition-colors duration-200 cursor-pointer border border-slate-100",
|
|
381
|
+
{
|
|
382
|
+
variants: {
|
|
383
|
+
variant: {
|
|
384
|
+
primary: [
|
|
385
|
+
"hover:bg-coral/10",
|
|
386
|
+
"hover:border-coral/30",
|
|
387
|
+
"focus:border-coral/30",
|
|
388
|
+
"data-[selected=true]:bg-coral/10",
|
|
389
|
+
"data-[selected=true]:border-coral"
|
|
390
|
+
].join(" "),
|
|
391
|
+
secondary: [
|
|
392
|
+
"hover:bg-sage/10",
|
|
393
|
+
"hover:border-sage/30",
|
|
394
|
+
"focus:border-sage/30",
|
|
395
|
+
"data-[selected=true]:bg-sage/10",
|
|
396
|
+
"data-[selected=true]:border-sage"
|
|
397
|
+
].join(" "),
|
|
398
|
+
tertiary: [
|
|
399
|
+
"hover:bg-mist/10",
|
|
400
|
+
"hover:border-mist/30",
|
|
401
|
+
"focus:border-mist/30",
|
|
402
|
+
"data-[selected=true]:bg-mist/10",
|
|
403
|
+
"data-[selected=true]:border-mist"
|
|
404
|
+
].join(" "),
|
|
405
|
+
ghost: [
|
|
406
|
+
"hover:bg-slate/10",
|
|
407
|
+
"hover:border-slate/30",
|
|
408
|
+
"focus:border-slate/30",
|
|
409
|
+
"data-[selected=true]:bg-slate/10",
|
|
410
|
+
"data-[selected=true]:border-slate"
|
|
411
|
+
].join(" "),
|
|
412
|
+
neutral: [
|
|
413
|
+
"hover:bg-gray/10",
|
|
414
|
+
"hover:border-gray/30",
|
|
415
|
+
"focus:border-gray/30",
|
|
416
|
+
"data-[selected=true]:bg-gray/10",
|
|
417
|
+
"data-[selected=true]:border-gray"
|
|
418
|
+
].join(" "),
|
|
419
|
+
success: [
|
|
420
|
+
"hover:bg-success/10",
|
|
421
|
+
"hover:border-success/30",
|
|
422
|
+
"focus:border-success/30",
|
|
423
|
+
"data-[selected=true]:bg-success/10",
|
|
424
|
+
"data-[selected=true]:border-success"
|
|
425
|
+
].join(" "),
|
|
426
|
+
info: [
|
|
427
|
+
"hover:bg-info/10",
|
|
428
|
+
"hover:border-info/30",
|
|
429
|
+
"focus:border-info/30",
|
|
430
|
+
"data-[selected=true]:bg-info/10",
|
|
431
|
+
"data-[selected=true]:border-info"
|
|
432
|
+
].join(" "),
|
|
433
|
+
warning: [
|
|
434
|
+
"hover:bg-warning/10",
|
|
435
|
+
"hover:border-warning/30",
|
|
436
|
+
"focus:border-warning/30",
|
|
437
|
+
"data-[selected=true]:bg-warning/10",
|
|
438
|
+
"data-[selected=true]:border-warning"
|
|
439
|
+
].join(" "),
|
|
440
|
+
danger: [
|
|
441
|
+
"hover:bg-danger/10",
|
|
442
|
+
"hover:border-danger/30",
|
|
443
|
+
"focus:border-danger/30",
|
|
444
|
+
"data-[selected=true]:bg-danger/10",
|
|
445
|
+
"data-[selected=true]:border-danger"
|
|
446
|
+
].join(" ")
|
|
447
|
+
},
|
|
448
|
+
selected: {
|
|
449
|
+
true: "",
|
|
450
|
+
false: ""
|
|
451
|
+
}
|
|
452
|
+
},
|
|
453
|
+
defaultVariants: {
|
|
454
|
+
variant: "primary",
|
|
455
|
+
selected: !1
|
|
456
|
+
}
|
|
457
|
+
}
|
|
458
|
+
), ChipOption = React__default.forwardRef(({ children: e, className: t, disabled: s, id: a, value: n, ...c }, l) => {
|
|
459
|
+
const o = useChipInputContext(), r = React__default.useId(), u = a || r, x = s || o.disabled, i = o.error ? "danger" : o.variant || "primary", d = o.value?.includes(n) ?? !1, g = (f) => {
|
|
460
|
+
if (!x) {
|
|
461
|
+
const b = o.value || [];
|
|
462
|
+
let m;
|
|
463
|
+
d ? m = b.filter((p) => p !== n) : m = [...b, n], o.onChange?.(m);
|
|
464
|
+
}
|
|
465
|
+
c.onChange?.(f);
|
|
466
|
+
};
|
|
467
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
468
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
469
|
+
"input",
|
|
470
|
+
{
|
|
471
|
+
ref: l,
|
|
472
|
+
type: "checkbox",
|
|
473
|
+
id: u,
|
|
474
|
+
name: `${o.name}[]`,
|
|
475
|
+
value: n,
|
|
476
|
+
checked: d,
|
|
477
|
+
disabled: x,
|
|
478
|
+
onChange: g,
|
|
479
|
+
className: "sr-only",
|
|
480
|
+
...c
|
|
481
|
+
}
|
|
482
|
+
),
|
|
483
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
484
|
+
"label",
|
|
485
|
+
{
|
|
486
|
+
htmlFor: u,
|
|
487
|
+
"data-selected": d,
|
|
488
|
+
className: cn(
|
|
489
|
+
chipOptionVariants({
|
|
490
|
+
variant: i,
|
|
491
|
+
selected: d
|
|
492
|
+
}),
|
|
493
|
+
x && "opacity-50 cursor-not-allowed pointer-events-none",
|
|
494
|
+
t
|
|
495
|
+
),
|
|
496
|
+
children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center", children: [
|
|
497
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
498
|
+
"span",
|
|
499
|
+
{
|
|
500
|
+
className: cn(
|
|
501
|
+
"flex items-center",
|
|
502
|
+
"transition-transform transition-opacity duration-200",
|
|
503
|
+
d ? "opacity-100 scale-100 mr-1" : "opacity-0 scale-75"
|
|
504
|
+
),
|
|
505
|
+
"aria-hidden": "true",
|
|
506
|
+
children: d && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
507
|
+
Check,
|
|
508
|
+
{
|
|
509
|
+
size: 16,
|
|
510
|
+
className: i === "primary" ? "text-coral" : i === "secondary" ? "text-sage" : i === "tertiary" ? "text-mist" : i === "ghost" ? "text-slate" : i === "success" ? "text-success" : i === "info" ? "text-info" : i === "warning" ? "text-warning" : i === "danger" ? "text-danger" : "text-coral"
|
|
511
|
+
}
|
|
512
|
+
)
|
|
513
|
+
}
|
|
514
|
+
),
|
|
515
|
+
e
|
|
516
|
+
] })
|
|
517
|
+
}
|
|
518
|
+
)
|
|
519
|
+
] });
|
|
520
|
+
});
|
|
521
|
+
ChipOption.displayName = "ChipOption";
|
|
522
|
+
const ChipInputRoot = React__default.forwardRef(
|
|
523
|
+
({
|
|
524
|
+
variant: e = "primary",
|
|
525
|
+
label: t,
|
|
526
|
+
helperText: s,
|
|
527
|
+
error: a,
|
|
528
|
+
className: n,
|
|
529
|
+
disabled: c,
|
|
530
|
+
name: l,
|
|
531
|
+
value: o = [],
|
|
532
|
+
onChange: r,
|
|
533
|
+
children: u,
|
|
534
|
+
...x
|
|
535
|
+
}, i) => {
|
|
536
|
+
const d = !!a, g = {
|
|
537
|
+
variant: e,
|
|
538
|
+
disabled: c,
|
|
539
|
+
error: d,
|
|
540
|
+
name: l,
|
|
541
|
+
value: o,
|
|
542
|
+
onChange: r
|
|
543
|
+
};
|
|
544
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(ChipInputContext.Provider, { value: g, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: i, className: cn("w-full", n), ...x, children: [
|
|
545
|
+
t && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "block text-sm font-medium text-foreground mb-3", children: t }),
|
|
546
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-wrap gap-2", children: u }),
|
|
547
|
+
d && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 text-sm text-danger", role: "alert", children: a }),
|
|
548
|
+
!d && s && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 text-sm text-gray-600", children: s })
|
|
549
|
+
] }) });
|
|
550
|
+
}
|
|
551
|
+
), ChipInput = Object.assign(ChipInputRoot, {
|
|
552
|
+
Option: ChipOption
|
|
553
|
+
}), dateSinglePickerInputVariants = textInputVariants, DateSinglePickerTrigger = React__default.forwardRef(
|
|
554
|
+
({
|
|
555
|
+
leftContent: e,
|
|
556
|
+
rightContent: t,
|
|
557
|
+
hasError: s,
|
|
558
|
+
variant: a = "primary",
|
|
559
|
+
value: n,
|
|
560
|
+
placeholder: c = "Select date",
|
|
561
|
+
formatDate: l,
|
|
562
|
+
className: o,
|
|
563
|
+
...r
|
|
564
|
+
}, u) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
565
|
+
"button",
|
|
566
|
+
{
|
|
567
|
+
ref: u,
|
|
568
|
+
type: "button",
|
|
569
|
+
"aria-invalid": s,
|
|
570
|
+
className: cn(
|
|
571
|
+
dateSinglePickerInputVariants({
|
|
572
|
+
variant: s ? "danger" : a
|
|
573
|
+
}),
|
|
574
|
+
e ? "pl-9" : "pl-3",
|
|
575
|
+
t ? "pr-9" : "pr-3",
|
|
576
|
+
"h-10 flex items-center justify-between cursor-pointer w-full relative",
|
|
577
|
+
"text-left",
|
|
578
|
+
o
|
|
579
|
+
),
|
|
580
|
+
...r,
|
|
581
|
+
children: [
|
|
582
|
+
e && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
583
|
+
"span",
|
|
584
|
+
{
|
|
585
|
+
className: "absolute left-2.5 top-0 bottom-0 pointer-events-none text-gray-500 flex items-center justify-center w-5",
|
|
586
|
+
"data-testid": "left-content",
|
|
587
|
+
children: e
|
|
588
|
+
}
|
|
589
|
+
),
|
|
590
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
591
|
+
"span",
|
|
592
|
+
{
|
|
593
|
+
className: cn(
|
|
594
|
+
"flex-1",
|
|
595
|
+
e ? "ml-2" : "",
|
|
596
|
+
t ? "mr-2" : ""
|
|
597
|
+
),
|
|
598
|
+
children: l ? l(n) : c
|
|
599
|
+
}
|
|
600
|
+
),
|
|
601
|
+
t && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
602
|
+
"span",
|
|
603
|
+
{
|
|
604
|
+
className: "absolute right-2.5 top-0 bottom-0 pointer-events-none text-gray-500 flex items-center justify-center w-5",
|
|
605
|
+
"data-testid": "right-content",
|
|
606
|
+
children: t
|
|
607
|
+
}
|
|
608
|
+
)
|
|
609
|
+
]
|
|
610
|
+
}
|
|
611
|
+
)
|
|
612
|
+
);
|
|
613
|
+
DateSinglePickerTrigger.displayName = "DateSinglePickerTrigger";
|
|
614
|
+
const DateSinglePickerDocked = ({
|
|
615
|
+
open: e,
|
|
616
|
+
value: t,
|
|
617
|
+
onChange: s,
|
|
618
|
+
handleMenuClose: a
|
|
619
|
+
}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Menu, { isOpen: e, onOutsideClick: a, children: [
|
|
620
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(Menu.Trigger, { className: "absolute top-[90%] left-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { "aria-hidden": "true" }) }),
|
|
621
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(Menu.Content, { className: "drop-shadow-lg rounded-lg bg-white border border-neutral", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Calendar, { value: t, onChange: s }) })
|
|
622
|
+
] }), DateSinglePickerModal = ({
|
|
623
|
+
open: e,
|
|
624
|
+
setOpen: t,
|
|
625
|
+
value: s,
|
|
626
|
+
onChange: a,
|
|
627
|
+
label: n,
|
|
628
|
+
buttonRef: c
|
|
629
|
+
}) => {
|
|
630
|
+
const [l, o] = useState(
|
|
631
|
+
s
|
|
632
|
+
);
|
|
633
|
+
useEffect(() => {
|
|
634
|
+
o(s);
|
|
635
|
+
}, [s, e]);
|
|
636
|
+
const r = () => {
|
|
637
|
+
t(!1), o(s), c.current?.focus();
|
|
638
|
+
}, u = () => {
|
|
639
|
+
l && (a(l), t(!1), c.current?.focus());
|
|
640
|
+
};
|
|
641
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
642
|
+
Modal,
|
|
643
|
+
{
|
|
644
|
+
isOpen: e,
|
|
645
|
+
onOpenChange: t,
|
|
646
|
+
placement: "top",
|
|
647
|
+
size: "md",
|
|
648
|
+
"aria-label": n ? String(n) : "Select date",
|
|
649
|
+
disableOverlayClose: !1,
|
|
650
|
+
disableEscClose: !1,
|
|
651
|
+
children: [
|
|
652
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(Modal.Body, { className: "px-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Calendar, { value: l, onChange: o }) }),
|
|
653
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(Modal.Footer, { className: "px-6", children: [
|
|
654
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
655
|
+
Button,
|
|
656
|
+
{
|
|
657
|
+
onClick: r,
|
|
658
|
+
variant: "ghost",
|
|
659
|
+
type: "button",
|
|
660
|
+
size: "sm",
|
|
661
|
+
children: "Cancel"
|
|
662
|
+
}
|
|
663
|
+
),
|
|
664
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
665
|
+
Button,
|
|
666
|
+
{
|
|
667
|
+
onClick: u,
|
|
668
|
+
variant: "primary",
|
|
669
|
+
type: "button",
|
|
670
|
+
disabled: !l,
|
|
671
|
+
size: "sm",
|
|
672
|
+
children: "Confirm"
|
|
673
|
+
}
|
|
674
|
+
)
|
|
675
|
+
] })
|
|
676
|
+
]
|
|
677
|
+
}
|
|
678
|
+
);
|
|
679
|
+
};
|
|
680
|
+
function useDateSinglePicker({ id: e }) {
|
|
681
|
+
const [t, s] = useState(!1), a = useId(), n = e || a, c = useRef(null), l = useCallback(
|
|
682
|
+
(r) => {
|
|
683
|
+
(r.key === "ArrowDown" || r.key === "Enter" || r.key === " ") && s(!0);
|
|
684
|
+
},
|
|
685
|
+
[]
|
|
686
|
+
), o = useCallback(() => {
|
|
687
|
+
s(!1), c.current?.focus();
|
|
688
|
+
}, []);
|
|
689
|
+
return {
|
|
690
|
+
open: t,
|
|
691
|
+
setOpen: s,
|
|
692
|
+
inputId: n,
|
|
693
|
+
buttonRef: c,
|
|
694
|
+
handleKeyDown: l,
|
|
695
|
+
handleMenuClose: o
|
|
696
|
+
};
|
|
697
|
+
}
|
|
698
|
+
const DateSinglePickerInput = React__default.forwardRef(
|
|
699
|
+
({
|
|
700
|
+
value: e,
|
|
701
|
+
onChange: t,
|
|
702
|
+
label: s,
|
|
703
|
+
leftContent: a,
|
|
704
|
+
rightContent: n,
|
|
705
|
+
helperText: c,
|
|
706
|
+
error: l,
|
|
707
|
+
variant: o = "primary",
|
|
708
|
+
disabled: r,
|
|
709
|
+
placeholder: u = "Select date",
|
|
710
|
+
id: x,
|
|
711
|
+
type: i = "docked",
|
|
712
|
+
...d
|
|
713
|
+
}, g) => {
|
|
714
|
+
if (e === void 0 || typeof t != "function")
|
|
715
|
+
throw new Error(
|
|
716
|
+
"DateSinglePickerInput is a controlled component: value and onChange are required."
|
|
717
|
+
);
|
|
718
|
+
const {
|
|
719
|
+
open: f,
|
|
720
|
+
setOpen: b,
|
|
721
|
+
inputId: m,
|
|
722
|
+
buttonRef: p,
|
|
723
|
+
handleKeyDown: w,
|
|
724
|
+
handleMenuClose: j
|
|
725
|
+
} = useDateSinglePicker({ id: x }), y = !!l, E = (R) => R ? R.toLocaleDateString(void 0, {
|
|
726
|
+
year: "numeric",
|
|
727
|
+
month: "short",
|
|
728
|
+
day: "numeric"
|
|
729
|
+
}) : typeof u == "string" ? u : "Select date", I = (R) => typeof d.formatDate == "function" ? d.formatDate(R) : E(R), k = () => b((R) => !R), h = w, C = (R) => {
|
|
730
|
+
t?.(R), p.current?.focus();
|
|
731
|
+
};
|
|
732
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-full", children: [
|
|
733
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
|
|
734
|
+
s && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
735
|
+
"label",
|
|
736
|
+
{
|
|
737
|
+
htmlFor: m,
|
|
738
|
+
className: "block text-sm font-medium text-foreground mb-2",
|
|
739
|
+
children: s
|
|
740
|
+
}
|
|
741
|
+
),
|
|
742
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
743
|
+
DateSinglePickerTrigger,
|
|
744
|
+
{
|
|
745
|
+
ref: (R) => {
|
|
746
|
+
p.current = R, typeof g == "function" ? g(R) : g && (g.current = R);
|
|
747
|
+
},
|
|
748
|
+
id: m,
|
|
749
|
+
"aria-haspopup": "dialog",
|
|
750
|
+
"aria-expanded": f,
|
|
751
|
+
"aria-controls": f ? `${m}-calendar` : void 0,
|
|
752
|
+
"aria-invalid": y,
|
|
753
|
+
"aria-disabled": r,
|
|
754
|
+
disabled: r,
|
|
755
|
+
leftContent: a,
|
|
756
|
+
rightContent: n,
|
|
757
|
+
hasError: y,
|
|
758
|
+
variant: o,
|
|
759
|
+
value: e,
|
|
760
|
+
placeholder: typeof u == "string" ? u : "Select date",
|
|
761
|
+
formatDate: I,
|
|
762
|
+
onClick: k,
|
|
763
|
+
onKeyDown: h,
|
|
764
|
+
tabIndex: 0,
|
|
765
|
+
...d
|
|
766
|
+
}
|
|
767
|
+
),
|
|
768
|
+
y && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 text-sm text-danger", role: "alert", children: l }),
|
|
769
|
+
c && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 text-sm text-muted-foreground", children: c })
|
|
770
|
+
] }),
|
|
771
|
+
i === "docked" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
772
|
+
DateSinglePickerDocked,
|
|
773
|
+
{
|
|
774
|
+
open: f,
|
|
775
|
+
value: e,
|
|
776
|
+
onChange: C,
|
|
777
|
+
inputId: m,
|
|
778
|
+
handleMenuClose: j
|
|
779
|
+
}
|
|
780
|
+
) : /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
781
|
+
DateSinglePickerModal,
|
|
782
|
+
{
|
|
783
|
+
open: f,
|
|
784
|
+
setOpen: b,
|
|
785
|
+
value: e,
|
|
786
|
+
onChange: C,
|
|
787
|
+
label: typeof s == "string" ? s : void 0,
|
|
788
|
+
buttonRef: p
|
|
789
|
+
}
|
|
790
|
+
)
|
|
791
|
+
] });
|
|
792
|
+
}
|
|
793
|
+
), radioGroupVariants = cva("space-y-2", {
|
|
794
|
+
variants: {
|
|
795
|
+
direction: {
|
|
796
|
+
vertical: "space-y-2 space-x-0",
|
|
797
|
+
horizontal: "flex flex-wrap gap-4 space-y-0"
|
|
798
|
+
}
|
|
799
|
+
},
|
|
800
|
+
defaultVariants: {
|
|
801
|
+
direction: "vertical"
|
|
802
|
+
}
|
|
803
|
+
}), radioOptionVariants = cva(
|
|
804
|
+
"relative h-4 w-4 rounded-full border cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed appearance-none bg-white",
|
|
805
|
+
{
|
|
806
|
+
variants: {
|
|
807
|
+
variant: {
|
|
808
|
+
// Core variants using Versaur color system
|
|
809
|
+
primary: "border-coral/40 checked:bg-coral checked:border-coral focus:ring-coral/20",
|
|
810
|
+
secondary: "border-sage/40 checked:bg-sage checked:border-sage focus:ring-sage/20",
|
|
811
|
+
tertiary: "border-mist/40 checked:bg-mist checked:border-mist focus:ring-mist/20",
|
|
812
|
+
ghost: "border-slate/40 checked:bg-slate checked:border-slate focus:ring-slate/20",
|
|
813
|
+
neutral: "border-gray-300 checked:bg-gray-500 checked:border-gray-500 focus:ring-gray-400/20",
|
|
814
|
+
// Outline variants
|
|
815
|
+
"primary-outline": "border-coral checked:bg-white checked:border-coral focus:ring-coral/20",
|
|
816
|
+
"secondary-outline": "border-sage checked:bg-white checked:border-sage focus:ring-sage/20",
|
|
817
|
+
"tertiary-outline": "border-mist checked:bg-white checked:border-mist focus:ring-mist/20",
|
|
818
|
+
"ghost-outline": "border-slate checked:bg-white checked:border-slate focus:ring-slate/20",
|
|
819
|
+
"neutral-outline": "border-gray-400 checked:bg-white checked:border-gray-400 focus:ring-gray-500/20",
|
|
820
|
+
// Semantic variants
|
|
821
|
+
success: "border-success/40 checked:bg-success checked:border-success focus:ring-success/20",
|
|
822
|
+
"success-outline": "border-success checked:bg-white checked:border-success focus:ring-success/20",
|
|
823
|
+
info: "border-info/40 checked:bg-info checked:border-info focus:ring-info/20",
|
|
824
|
+
"info-outline": "border-info checked:bg-white checked:border-info focus:ring-info/20",
|
|
825
|
+
warning: "border-warning/40 checked:bg-warning checked:border-warning focus:ring-warning/20",
|
|
826
|
+
"warning-outline": "border-warning checked:bg-white checked:border-warning focus:ring-warning/20",
|
|
827
|
+
danger: "border-danger/40 checked:bg-danger checked:border-danger focus:ring-danger/20",
|
|
828
|
+
"danger-outline": "border-danger checked:bg-white checked:border-danger focus:ring-danger/20"
|
|
829
|
+
},
|
|
830
|
+
size: {
|
|
831
|
+
sm: "h-3 w-3",
|
|
832
|
+
md: "h-4 w-4",
|
|
833
|
+
lg: "h-5 w-5"
|
|
834
|
+
}
|
|
835
|
+
},
|
|
836
|
+
defaultVariants: {
|
|
837
|
+
variant: "primary",
|
|
838
|
+
size: "md"
|
|
839
|
+
}
|
|
840
|
+
}
|
|
841
|
+
), radioLabelVariants = cva(
|
|
842
|
+
"text-foreground cursor-pointer select-none",
|
|
843
|
+
{
|
|
844
|
+
variants: {
|
|
845
|
+
size: {
|
|
846
|
+
sm: "text-xs",
|
|
847
|
+
md: "text-sm",
|
|
848
|
+
lg: "text-base"
|
|
849
|
+
},
|
|
850
|
+
disabled: {
|
|
851
|
+
true: "opacity-50 cursor-not-allowed",
|
|
852
|
+
false: ""
|
|
853
|
+
}
|
|
854
|
+
},
|
|
855
|
+
defaultVariants: {
|
|
856
|
+
size: "md",
|
|
857
|
+
disabled: !1
|
|
858
|
+
}
|
|
859
|
+
}
|
|
860
|
+
), RadioInputContext = createContext(
|
|
861
|
+
null
|
|
862
|
+
), useRadioInputContext = () => {
|
|
863
|
+
const e = useContext(RadioInputContext);
|
|
864
|
+
if (!e)
|
|
865
|
+
throw new Error(
|
|
866
|
+
"useRadioInputContext must be used within RadioInputContext"
|
|
867
|
+
);
|
|
868
|
+
return e;
|
|
869
|
+
}, RadioOption = React__default.forwardRef(
|
|
870
|
+
({ children: e, description: t, className: s, disabled: a, id: n, value: c, ...l }, o) => {
|
|
871
|
+
const r = useRadioInputContext(), u = React__default.useId(), x = n || u, i = a || r.disabled, d = r.error ? "danger" : r.variant || "primary";
|
|
872
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
|
|
873
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative flex items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
874
|
+
"input",
|
|
875
|
+
{
|
|
876
|
+
ref: o,
|
|
877
|
+
type: "radio",
|
|
878
|
+
id: x,
|
|
879
|
+
name: r.name,
|
|
880
|
+
value: c,
|
|
881
|
+
disabled: i,
|
|
882
|
+
className: cn(
|
|
883
|
+
radioOptionVariants({
|
|
884
|
+
variant: d,
|
|
885
|
+
size: r.size
|
|
886
|
+
}),
|
|
887
|
+
// Custom radio dot styling using ::before - centered positioning with size variants
|
|
888
|
+
'before:content-[""] before:absolute before:left-1/2 before:top-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-white before:opacity-0 before:transition-opacity before:duration-200',
|
|
889
|
+
// Size-specific radio dot dimensions
|
|
890
|
+
r.size === "sm" && "before:w-[6px] before:h-[6px]",
|
|
891
|
+
r.size === "md" && "before:w-[8px] before:h-[8px]",
|
|
892
|
+
r.size === "lg" && "before:w-[10px] before:h-[10px]",
|
|
893
|
+
"checked:before:opacity-100",
|
|
894
|
+
// Outline variants use colored radio dot
|
|
895
|
+
d?.includes("outline") && "checked:before:bg-current",
|
|
896
|
+
s
|
|
897
|
+
),
|
|
898
|
+
...l
|
|
899
|
+
}
|
|
900
|
+
) }),
|
|
901
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1", children: [
|
|
902
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
903
|
+
"label",
|
|
904
|
+
{
|
|
905
|
+
htmlFor: x,
|
|
906
|
+
className: radioLabelVariants({
|
|
907
|
+
size: r.size,
|
|
908
|
+
disabled: i
|
|
909
|
+
}),
|
|
910
|
+
children: e
|
|
911
|
+
}
|
|
912
|
+
),
|
|
913
|
+
t && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
914
|
+
"div",
|
|
915
|
+
{
|
|
916
|
+
className: cn(
|
|
917
|
+
"text-gray-600 mt-1",
|
|
918
|
+
r.size === "sm" && "text-xs",
|
|
919
|
+
r.size === "md" && "text-xs",
|
|
920
|
+
r.size === "lg" && "text-sm",
|
|
921
|
+
i && "opacity-50"
|
|
922
|
+
),
|
|
923
|
+
children: t
|
|
924
|
+
}
|
|
925
|
+
)
|
|
926
|
+
] })
|
|
927
|
+
] });
|
|
928
|
+
}
|
|
929
|
+
), RadioInputRoot = React__default.forwardRef(
|
|
930
|
+
({
|
|
931
|
+
variant: e = "primary",
|
|
932
|
+
size: t = "md",
|
|
933
|
+
label: s,
|
|
934
|
+
helperText: a,
|
|
935
|
+
error: n,
|
|
936
|
+
direction: c = "vertical",
|
|
937
|
+
className: l,
|
|
938
|
+
disabled: o,
|
|
939
|
+
name: r,
|
|
940
|
+
children: u,
|
|
941
|
+
...x
|
|
942
|
+
}, i) => {
|
|
943
|
+
const d = !!n, g = {
|
|
944
|
+
variant: e,
|
|
945
|
+
size: t,
|
|
946
|
+
disabled: o,
|
|
947
|
+
error: d,
|
|
948
|
+
name: r
|
|
949
|
+
};
|
|
950
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(RadioInputContext.Provider, { value: g, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { ref: i, className: cn("w-full", l), ...x, children: [
|
|
951
|
+
s && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "block text-sm font-medium text-foreground mb-3", children: s }),
|
|
952
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: radioGroupVariants({ direction: c }), children: u }),
|
|
953
|
+
d && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 text-sm text-danger", role: "alert", children: n }),
|
|
954
|
+
!d && a && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 text-sm text-gray-600", children: a })
|
|
955
|
+
] }) });
|
|
956
|
+
}
|
|
957
|
+
), RadioInput = Object.assign(RadioInputRoot, {
|
|
958
|
+
Option: RadioOption
|
|
959
|
+
}), segmentGroupVariants$1 = cva(
|
|
960
|
+
"inline-flex rounded-lg border overflow-hidden bg-neutral/50 p-1",
|
|
961
|
+
{
|
|
962
|
+
variants: {
|
|
963
|
+
variant: {
|
|
964
|
+
// Core variants using Versaur color system
|
|
965
|
+
primary: "border-coral/20",
|
|
966
|
+
secondary: "border-sage/20",
|
|
967
|
+
tertiary: "border-mist/20",
|
|
968
|
+
ghost: "border-slate/20",
|
|
969
|
+
neutral: "border-gray-200",
|
|
970
|
+
// Outline variants
|
|
971
|
+
"primary-outline": "border-coral",
|
|
972
|
+
"secondary-outline": "border-sage",
|
|
973
|
+
"tertiary-outline": "border-mist",
|
|
974
|
+
"ghost-outline": "border-slate",
|
|
975
|
+
"neutral-outline": "border-gray-400",
|
|
976
|
+
// Semantic variants
|
|
977
|
+
success: "border-success/20",
|
|
978
|
+
"success-outline": "border-success",
|
|
979
|
+
info: "border-info/20",
|
|
980
|
+
"info-outline": "border-info",
|
|
981
|
+
warning: "border-warning/20",
|
|
982
|
+
"warning-outline": "border-warning",
|
|
983
|
+
danger: "border-danger/20",
|
|
984
|
+
"danger-outline": "border-danger"
|
|
985
|
+
},
|
|
986
|
+
size: {
|
|
987
|
+
sm: "text-xs",
|
|
988
|
+
md: "text-sm",
|
|
989
|
+
lg: "text-base"
|
|
990
|
+
},
|
|
991
|
+
error: {
|
|
992
|
+
true: "border-danger",
|
|
993
|
+
false: ""
|
|
994
|
+
}
|
|
995
|
+
},
|
|
996
|
+
defaultVariants: {
|
|
997
|
+
variant: "primary",
|
|
998
|
+
size: "md",
|
|
999
|
+
error: !1
|
|
1000
|
+
}
|
|
1001
|
+
}
|
|
1002
|
+
), segmentOptionVariants$1 = cva(
|
|
1003
|
+
"relative flex flex-row items-center px-3 py-2 text-center font-medium transition-all duration-200 cursor-pointer border-0 bg-transparent outline-none focus:ring-2 focus:ring-offset-1",
|
|
1004
|
+
{
|
|
1005
|
+
variants: {
|
|
1006
|
+
variant: {
|
|
1007
|
+
// Core variants using Versaur color system
|
|
1008
|
+
primary: "text-slate hover:text-coral focus:ring-coral/30",
|
|
1009
|
+
secondary: "text-slate hover:text-sage focus:ring-sage/30",
|
|
1010
|
+
tertiary: "text-slate hover:text-mist focus:ring-mist/30",
|
|
1011
|
+
ghost: "text-slate hover:text-slate focus:ring-slate/30",
|
|
1012
|
+
neutral: "text-slate hover:text-gray-700 focus:ring-gray-400/30",
|
|
1013
|
+
// Outline variants
|
|
1014
|
+
"primary-outline": "text-coral hover:bg-coral/10 focus:ring-coral/30",
|
|
1015
|
+
"secondary-outline": "text-sage hover:bg-sage/10 focus:ring-sage/30",
|
|
1016
|
+
"tertiary-outline": "text-mist hover:bg-mist/10 focus:ring-mist/30",
|
|
1017
|
+
"ghost-outline": "text-slate hover:bg-slate/10 focus:ring-slate/30",
|
|
1018
|
+
"neutral-outline": "text-gray-600 hover:bg-gray-100 focus:ring-gray-500/30",
|
|
1019
|
+
// Semantic variants
|
|
1020
|
+
success: "text-slate hover:text-success focus:ring-success/30",
|
|
1021
|
+
"success-outline": "text-success hover:bg-success/10 focus:ring-success/30",
|
|
1022
|
+
info: "text-slate hover:text-info focus:ring-info/30",
|
|
1023
|
+
"info-outline": "text-info hover:bg-info/10 focus:ring-info/30",
|
|
1024
|
+
warning: "text-slate hover:text-warning focus:ring-warning/30",
|
|
1025
|
+
"warning-outline": "text-warning hover:bg-warning/10 focus:ring-warning/30",
|
|
1026
|
+
danger: "text-slate hover:text-danger focus:ring-danger/30",
|
|
1027
|
+
"danger-outline": "text-danger hover:bg-danger/10 focus:ring-danger/30"
|
|
1028
|
+
},
|
|
1029
|
+
size: {
|
|
1030
|
+
sm: "px-2 py-1.5 text-xs",
|
|
1031
|
+
md: "px-3 py-2 text-sm",
|
|
1032
|
+
lg: "px-4 py-2.5 text-base"
|
|
1033
|
+
},
|
|
1034
|
+
rounded: {
|
|
1035
|
+
first: "rounded-l-md",
|
|
1036
|
+
middle: "",
|
|
1037
|
+
last: "rounded-r-md",
|
|
1038
|
+
single: "rounded-md"
|
|
1039
|
+
}
|
|
1040
|
+
},
|
|
1041
|
+
defaultVariants: {
|
|
1042
|
+
variant: "primary",
|
|
1043
|
+
size: "md",
|
|
1044
|
+
rounded: "middle"
|
|
1045
|
+
}
|
|
1046
|
+
}
|
|
1047
|
+
), getSegmentSelectedClasses$1 = (e) => {
|
|
1048
|
+
const t = {
|
|
1049
|
+
// Core variants - override hover text color changes
|
|
1050
|
+
primary: "bg-coral text-white shadow-sm hover:text-white",
|
|
1051
|
+
secondary: "bg-sage text-white shadow-sm hover:text-white",
|
|
1052
|
+
tertiary: "bg-mist text-white shadow-sm hover:text-white",
|
|
1053
|
+
ghost: "bg-slate text-white shadow-sm hover:text-white",
|
|
1054
|
+
neutral: "bg-gray-500 text-white shadow-sm hover:text-white",
|
|
1055
|
+
// Outline variants - override hover text color changes
|
|
1056
|
+
"primary-outline": "bg-coral text-white shadow-sm hover:text-white",
|
|
1057
|
+
"secondary-outline": "bg-sage text-white shadow-sm hover:text-white",
|
|
1058
|
+
"tertiary-outline": "bg-mist text-white shadow-sm hover:text-white",
|
|
1059
|
+
"ghost-outline": "bg-slate text-white shadow-sm hover:text-white",
|
|
1060
|
+
"neutral-outline": "bg-gray-500 text-white shadow-sm hover:text-white",
|
|
1061
|
+
// Semantic variants - override hover text color changes
|
|
1062
|
+
success: "bg-success text-white shadow-sm hover:text-white",
|
|
1063
|
+
"success-outline": "bg-success text-white shadow-sm hover:text-white",
|
|
1064
|
+
info: "bg-info text-white shadow-sm hover:text-white",
|
|
1065
|
+
"info-outline": "bg-info text-white shadow-sm hover:text-white",
|
|
1066
|
+
warning: "bg-warning text-white shadow-sm hover:text-white",
|
|
1067
|
+
"warning-outline": "bg-warning text-white shadow-sm hover:text-white",
|
|
1068
|
+
danger: "bg-danger text-white shadow-sm hover:text-white",
|
|
1069
|
+
"danger-outline": "bg-danger text-white shadow-sm hover:text-white"
|
|
1070
|
+
};
|
|
1071
|
+
return t[e || "primary"] || t.primary;
|
|
1072
|
+
}, SegmentSingleInputContext = createContext(null), useSegmentSingleInputContext = () => {
|
|
1073
|
+
const e = useContext(SegmentSingleInputContext);
|
|
1074
|
+
if (!e)
|
|
1075
|
+
throw new Error(
|
|
1076
|
+
"useSegmentSingleInputContext must be used within SegmentSingleInputContext"
|
|
1077
|
+
);
|
|
1078
|
+
return e;
|
|
1079
|
+
}, SegmentOption$1 = React__default.forwardRef(
|
|
1080
|
+
({ children: e, className: t, disabled: s, id: a, value: n, position: c = "middle", ...l }, o) => {
|
|
1081
|
+
const r = useSegmentSingleInputContext(), u = React__default.useId(), x = a || u, i = s || r.disabled, d = r.error ? "danger" : r.variant || "primary", g = r.value === n, f = (b) => {
|
|
1082
|
+
if (!i) {
|
|
1083
|
+
const m = r.value === n ? null : n;
|
|
1084
|
+
r.onChange?.(m);
|
|
1085
|
+
}
|
|
1086
|
+
l.onChange?.(b);
|
|
1087
|
+
};
|
|
1088
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
1089
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1090
|
+
"input",
|
|
1091
|
+
{
|
|
1092
|
+
ref: o,
|
|
1093
|
+
type: "radio",
|
|
1094
|
+
id: x,
|
|
1095
|
+
name: r.name,
|
|
1096
|
+
value: n,
|
|
1097
|
+
checked: g,
|
|
1098
|
+
disabled: i,
|
|
1099
|
+
onChange: f,
|
|
1100
|
+
className: "sr-only",
|
|
1101
|
+
...l
|
|
1102
|
+
}
|
|
1103
|
+
),
|
|
1104
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1105
|
+
"label",
|
|
1106
|
+
{
|
|
1107
|
+
htmlFor: x,
|
|
1108
|
+
className: cn(
|
|
1109
|
+
segmentOptionVariants$1({
|
|
1110
|
+
variant: d,
|
|
1111
|
+
size: r.size,
|
|
1112
|
+
rounded: c
|
|
1113
|
+
}),
|
|
1114
|
+
// Apply selected state styling
|
|
1115
|
+
g && getSegmentSelectedClasses$1(d),
|
|
1116
|
+
g && "relative z-10",
|
|
1117
|
+
// Apply disabled styling directly since labels don't support disabled attribute
|
|
1118
|
+
i && "opacity-50 cursor-not-allowed pointer-events-none",
|
|
1119
|
+
r.fullWidth && "flex-1 min-w-0",
|
|
1120
|
+
t
|
|
1121
|
+
),
|
|
1122
|
+
children: e
|
|
1123
|
+
}
|
|
1124
|
+
)
|
|
1125
|
+
] });
|
|
1126
|
+
}
|
|
1127
|
+
);
|
|
1128
|
+
SegmentOption$1.displayName = "SegmentOption";
|
|
1129
|
+
const SegmentSingleInputRoot = React__default.forwardRef(
|
|
1130
|
+
({
|
|
1131
|
+
variant: e = "primary",
|
|
1132
|
+
size: t = "md",
|
|
1133
|
+
label: s,
|
|
1134
|
+
helperText: a,
|
|
1135
|
+
error: n,
|
|
1136
|
+
className: c,
|
|
1137
|
+
disabled: l,
|
|
1138
|
+
name: o,
|
|
1139
|
+
value: r,
|
|
1140
|
+
onChange: u,
|
|
1141
|
+
children: x,
|
|
1142
|
+
fullWidth: i = !1,
|
|
1143
|
+
...d
|
|
1144
|
+
}, g) => {
|
|
1145
|
+
const f = !!n, b = {
|
|
1146
|
+
variant: e,
|
|
1147
|
+
size: t,
|
|
1148
|
+
disabled: l,
|
|
1149
|
+
error: f,
|
|
1150
|
+
name: o,
|
|
1151
|
+
value: r,
|
|
1152
|
+
onChange: u,
|
|
1153
|
+
fullWidth: i
|
|
1154
|
+
}, m = React__default.Children.toArray(x), p = m.map((w, j) => {
|
|
1155
|
+
if (React__default.isValidElement(w)) {
|
|
1156
|
+
let y;
|
|
1157
|
+
return m.length === 1 ? y = "single" : j === 0 ? y = "first" : j === m.length - 1 ? y = "last" : y = "middle", React__default.cloneElement(
|
|
1158
|
+
w,
|
|
1159
|
+
{ position: y }
|
|
1160
|
+
);
|
|
1161
|
+
}
|
|
1162
|
+
return w;
|
|
1163
|
+
});
|
|
1164
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(SegmentSingleInputContext.Provider, { value: b, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1165
|
+
"div",
|
|
1166
|
+
{
|
|
1167
|
+
ref: g,
|
|
1168
|
+
className: cn(i ? "w-full" : "", c),
|
|
1169
|
+
...d,
|
|
1170
|
+
children: [
|
|
1171
|
+
s && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "block text-sm font-medium text-foreground mb-3", children: s }),
|
|
1172
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1173
|
+
"div",
|
|
1174
|
+
{
|
|
1175
|
+
className: cn(
|
|
1176
|
+
segmentGroupVariants$1({
|
|
1177
|
+
variant: f ? "danger" : e,
|
|
1178
|
+
size: t,
|
|
1179
|
+
error: f
|
|
1180
|
+
}),
|
|
1181
|
+
i ? "flex w-full" : ""
|
|
1182
|
+
),
|
|
1183
|
+
children: p
|
|
1184
|
+
}
|
|
1185
|
+
),
|
|
1186
|
+
f && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 text-sm text-danger", role: "alert", children: n }),
|
|
1187
|
+
!f && a && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 text-sm text-gray-600", children: a })
|
|
1188
|
+
]
|
|
1189
|
+
}
|
|
1190
|
+
) });
|
|
1191
|
+
}
|
|
1192
|
+
), SegmentSingleInput = Object.assign(SegmentSingleInputRoot, {
|
|
1193
|
+
Option: SegmentOption$1
|
|
1194
|
+
}), segmentGroupVariants = cva(
|
|
1195
|
+
"inline-flex rounded-lg border overflow-hidden bg-neutral/50 p-1",
|
|
1196
|
+
{
|
|
1197
|
+
variants: {
|
|
1198
|
+
variant: {
|
|
1199
|
+
// Core variants using Versaur color system
|
|
1200
|
+
primary: "border-coral/20",
|
|
1201
|
+
secondary: "border-sage/20",
|
|
1202
|
+
tertiary: "border-mist/20",
|
|
1203
|
+
ghost: "border-slate/20",
|
|
1204
|
+
neutral: "border-gray-200",
|
|
1205
|
+
// Outline variants
|
|
1206
|
+
"primary-outline": "border-coral",
|
|
1207
|
+
"secondary-outline": "border-sage",
|
|
1208
|
+
"tertiary-outline": "border-mist",
|
|
1209
|
+
"ghost-outline": "border-slate",
|
|
1210
|
+
"neutral-outline": "border-gray-400",
|
|
1211
|
+
// Semantic variants
|
|
1212
|
+
success: "border-success/20",
|
|
1213
|
+
"success-outline": "border-success",
|
|
1214
|
+
info: "border-info/20",
|
|
1215
|
+
"info-outline": "border-info",
|
|
1216
|
+
warning: "border-warning/20",
|
|
1217
|
+
"warning-outline": "border-warning",
|
|
1218
|
+
danger: "border-danger/20",
|
|
1219
|
+
"danger-outline": "border-danger"
|
|
1220
|
+
},
|
|
1221
|
+
size: {
|
|
1222
|
+
sm: "text-xs",
|
|
1223
|
+
md: "text-sm",
|
|
1224
|
+
lg: "text-base"
|
|
1225
|
+
},
|
|
1226
|
+
error: {
|
|
1227
|
+
true: "border-danger",
|
|
1228
|
+
false: ""
|
|
1229
|
+
}
|
|
1230
|
+
},
|
|
1231
|
+
defaultVariants: {
|
|
1232
|
+
variant: "primary",
|
|
1233
|
+
size: "md",
|
|
1234
|
+
error: !1
|
|
1235
|
+
}
|
|
1236
|
+
}
|
|
1237
|
+
), segmentOptionVariants = cva(
|
|
1238
|
+
"relative flex flex-row items-center px-3 py-2 text-center font-medium transition-all duration-200 cursor-pointer border-0 bg-transparent outline-none focus:ring-2 focus:ring-offset-1 flex-1",
|
|
1239
|
+
{
|
|
1240
|
+
variants: {
|
|
1241
|
+
variant: {
|
|
1242
|
+
// Core variants using Versaur color system
|
|
1243
|
+
primary: "text-slate hover:text-coral focus:ring-coral/30",
|
|
1244
|
+
secondary: "text-slate hover:text-sage focus:ring-sage/30",
|
|
1245
|
+
tertiary: "text-slate hover:text-mist focus:ring-mist/30",
|
|
1246
|
+
ghost: "text-slate hover:text-slate focus:ring-slate/30",
|
|
1247
|
+
neutral: "text-slate hover:text-gray-700 focus:ring-gray-400/30",
|
|
1248
|
+
// Outline variants
|
|
1249
|
+
"primary-outline": "text-coral hover:bg-coral/10 focus:ring-coral/30",
|
|
1250
|
+
"secondary-outline": "text-sage hover:bg-sage/10 focus:ring-sage/30",
|
|
1251
|
+
"tertiary-outline": "text-mist hover:bg-mist/10 focus:ring-mist/30",
|
|
1252
|
+
"ghost-outline": "text-slate hover:bg-slate/10 focus:ring-slate/30",
|
|
1253
|
+
"neutral-outline": "text-gray-600 hover:bg-gray-100 focus:ring-gray-500/30",
|
|
1254
|
+
// Semantic variants
|
|
1255
|
+
success: "text-slate hover:text-success focus:ring-success/30",
|
|
1256
|
+
"success-outline": "text-success hover:bg-success/10 focus:ring-success/30",
|
|
1257
|
+
info: "text-slate hover:text-info focus:ring-info/30",
|
|
1258
|
+
"info-outline": "text-info hover:bg-info/10 focus:ring-info/30",
|
|
1259
|
+
warning: "text-slate hover:text-warning focus:ring-warning/30",
|
|
1260
|
+
"warning-outline": "text-warning hover:bg-warning/10 focus:ring-warning/30",
|
|
1261
|
+
danger: "text-slate hover:text-danger focus:ring-danger/30",
|
|
1262
|
+
"danger-outline": "text-danger hover:bg-danger/10 focus:ring-danger/30"
|
|
1263
|
+
},
|
|
1264
|
+
size: {
|
|
1265
|
+
sm: "px-2 py-1.5 text-xs",
|
|
1266
|
+
md: "px-3 py-2 text-sm",
|
|
1267
|
+
lg: "px-4 py-2.5 text-base"
|
|
1268
|
+
},
|
|
1269
|
+
rounded: {
|
|
1270
|
+
first: "rounded-l-md",
|
|
1271
|
+
middle: "",
|
|
1272
|
+
last: "rounded-r-md",
|
|
1273
|
+
single: "rounded-md"
|
|
1274
|
+
}
|
|
1275
|
+
},
|
|
1276
|
+
defaultVariants: {
|
|
1277
|
+
variant: "primary",
|
|
1278
|
+
size: "md",
|
|
1279
|
+
rounded: "middle"
|
|
1280
|
+
}
|
|
1281
|
+
}
|
|
1282
|
+
), getSegmentSelectedClasses = (e) => {
|
|
1283
|
+
const t = {
|
|
1284
|
+
// Core variants - override hover text color changes
|
|
1285
|
+
primary: "bg-coral text-white shadow-sm hover:text-white",
|
|
1286
|
+
secondary: "bg-sage text-white shadow-sm hover:text-white",
|
|
1287
|
+
tertiary: "bg-mist text-white shadow-sm hover:text-white",
|
|
1288
|
+
ghost: "bg-slate text-white shadow-sm hover:text-white",
|
|
1289
|
+
neutral: "bg-gray-500 text-white shadow-sm hover:text-white",
|
|
1290
|
+
// Outline variants - override hover text color changes
|
|
1291
|
+
"primary-outline": "bg-coral text-white shadow-sm hover:text-white",
|
|
1292
|
+
"secondary-outline": "bg-sage text-white shadow-sm hover:text-white",
|
|
1293
|
+
"tertiary-outline": "bg-mist text-white shadow-sm hover:text-white",
|
|
1294
|
+
"ghost-outline": "bg-slate text-white shadow-sm hover:text-white",
|
|
1295
|
+
"neutral-outline": "bg-gray-500 text-white shadow-sm hover:text-white",
|
|
1296
|
+
// Semantic variants - override hover text color changes
|
|
1297
|
+
success: "bg-success text-white shadow-sm hover:text-white",
|
|
1298
|
+
"success-outline": "bg-success text-white shadow-sm hover:text-white",
|
|
1299
|
+
info: "bg-info text-white shadow-sm hover:text-white",
|
|
1300
|
+
"info-outline": "bg-info text-white shadow-sm hover:text-white",
|
|
1301
|
+
warning: "bg-warning text-white shadow-sm hover:text-white",
|
|
1302
|
+
"warning-outline": "bg-warning text-white shadow-sm hover:text-white",
|
|
1303
|
+
danger: "bg-danger text-white shadow-sm hover:text-white",
|
|
1304
|
+
"danger-outline": "bg-danger text-white shadow-sm hover:text-white"
|
|
1305
|
+
};
|
|
1306
|
+
return t[e || "primary"] || t.primary;
|
|
1307
|
+
}, SegmentMultipleInputContext = createContext(null), useSegmentMultipleInputContext = () => {
|
|
1308
|
+
const e = useContext(SegmentMultipleInputContext);
|
|
1309
|
+
if (!e)
|
|
1310
|
+
throw new Error(
|
|
1311
|
+
"useSegmentMultipleInputContext must be used within SegmentMultipleInputContext"
|
|
1312
|
+
);
|
|
1313
|
+
return e;
|
|
1314
|
+
}, SegmentOption = React__default.forwardRef(
|
|
1315
|
+
({ children: e, className: t, disabled: s, id: a, value: n, position: c = "middle", ...l }, o) => {
|
|
1316
|
+
const r = useSegmentMultipleInputContext(), u = React__default.useId(), x = a || u, i = s || r.disabled, d = r.error ? "danger" : r.variant || "primary", g = r.value?.includes(n) ?? !1, f = (b) => {
|
|
1317
|
+
if (!i) {
|
|
1318
|
+
const m = r.value || [];
|
|
1319
|
+
let p;
|
|
1320
|
+
g ? p = m.filter((w) => w !== n) : p = [...m, n], r.onChange?.(p);
|
|
1321
|
+
}
|
|
1322
|
+
l.onChange?.(b);
|
|
1323
|
+
};
|
|
1324
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
1325
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1326
|
+
"input",
|
|
1327
|
+
{
|
|
1328
|
+
ref: o,
|
|
1329
|
+
type: "checkbox",
|
|
1330
|
+
id: x,
|
|
1331
|
+
name: `${r.name}[]`,
|
|
1332
|
+
value: n,
|
|
1333
|
+
checked: g,
|
|
1334
|
+
disabled: i,
|
|
1335
|
+
onChange: f,
|
|
1336
|
+
className: "sr-only",
|
|
1337
|
+
...l
|
|
1338
|
+
}
|
|
1339
|
+
),
|
|
1340
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1341
|
+
"label",
|
|
1342
|
+
{
|
|
1343
|
+
htmlFor: x,
|
|
1344
|
+
className: cn(
|
|
1345
|
+
segmentOptionVariants({
|
|
1346
|
+
variant: d,
|
|
1347
|
+
size: r.size,
|
|
1348
|
+
rounded: c
|
|
1349
|
+
}),
|
|
1350
|
+
// Apply selected state styling
|
|
1351
|
+
g && getSegmentSelectedClasses(d),
|
|
1352
|
+
g && "relative z-10",
|
|
1353
|
+
// Apply disabled styling directly since labels don't support disabled attribute
|
|
1354
|
+
i && "opacity-50 cursor-not-allowed pointer-events-none",
|
|
1355
|
+
t
|
|
1356
|
+
),
|
|
1357
|
+
children: e
|
|
1358
|
+
}
|
|
1359
|
+
)
|
|
1360
|
+
] });
|
|
1361
|
+
}
|
|
1362
|
+
);
|
|
1363
|
+
SegmentOption.displayName = "SegmentOption";
|
|
1364
|
+
const SegmentMultipleInputRoot = React__default.forwardRef(
|
|
1365
|
+
({
|
|
1366
|
+
variant: e = "primary",
|
|
1367
|
+
size: t = "md",
|
|
1368
|
+
label: s,
|
|
1369
|
+
helperText: a,
|
|
1370
|
+
error: n,
|
|
1371
|
+
className: c,
|
|
1372
|
+
disabled: l,
|
|
1373
|
+
name: o,
|
|
1374
|
+
value: r = [],
|
|
1375
|
+
onChange: u,
|
|
1376
|
+
children: x,
|
|
1377
|
+
fullWidth: i = !1,
|
|
1378
|
+
...d
|
|
1379
|
+
}, g) => {
|
|
1380
|
+
const f = !!n, b = {
|
|
1381
|
+
variant: e,
|
|
1382
|
+
size: t,
|
|
1383
|
+
disabled: l,
|
|
1384
|
+
error: f,
|
|
1385
|
+
name: o,
|
|
1386
|
+
value: r,
|
|
1387
|
+
onChange: u
|
|
1388
|
+
}, m = React__default.Children.toArray(x), p = m.map((w, j) => {
|
|
1389
|
+
if (React__default.isValidElement(w)) {
|
|
1390
|
+
let y;
|
|
1391
|
+
return m.length === 1 ? y = "single" : j === 0 ? y = "first" : j === m.length - 1 ? y = "last" : y = "middle", React__default.cloneElement(
|
|
1392
|
+
w,
|
|
1393
|
+
{ position: y }
|
|
1394
|
+
);
|
|
1395
|
+
}
|
|
1396
|
+
return w;
|
|
1397
|
+
});
|
|
1398
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(SegmentMultipleInputContext.Provider, { value: b, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1399
|
+
"div",
|
|
1400
|
+
{
|
|
1401
|
+
ref: g,
|
|
1402
|
+
className: cn(
|
|
1403
|
+
i ? "flex w-full flex-col" : "w-full",
|
|
1404
|
+
c
|
|
1405
|
+
),
|
|
1406
|
+
...d,
|
|
1407
|
+
children: [
|
|
1408
|
+
s && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "block text-sm font-medium text-foreground mb-3", children: s }),
|
|
1409
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1410
|
+
"div",
|
|
1411
|
+
{
|
|
1412
|
+
className: cn(
|
|
1413
|
+
segmentGroupVariants({
|
|
1414
|
+
variant: f ? "danger" : e,
|
|
1415
|
+
size: t,
|
|
1416
|
+
error: f
|
|
1417
|
+
}),
|
|
1418
|
+
i && "flex w-full"
|
|
1419
|
+
),
|
|
1420
|
+
children: p
|
|
1421
|
+
}
|
|
1422
|
+
),
|
|
1423
|
+
f && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 text-sm text-danger", role: "alert", children: n }),
|
|
1424
|
+
!f && a && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 text-sm text-gray-600", children: a })
|
|
1425
|
+
]
|
|
1426
|
+
}
|
|
1427
|
+
) });
|
|
1428
|
+
}
|
|
1429
|
+
), SegmentMultipleInput = Object.assign(SegmentMultipleInputRoot, {
|
|
1430
|
+
Option: SegmentOption
|
|
1431
|
+
}), selectInputVariants = cva(
|
|
1432
|
+
"block w-full rounded-md border bg-white transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none disabled:bg-gray-50 appearance-none bg-no-repeat bg-right pr-10",
|
|
1433
|
+
{
|
|
1434
|
+
variants: {
|
|
1435
|
+
variant: {
|
|
1436
|
+
// Core variants using Versaur color system
|
|
1437
|
+
primary: "border-coral/30 text-foreground focus:border-coral focus:ring-coral/20",
|
|
1438
|
+
secondary: "border-sage/30 text-foreground focus:border-sage focus:ring-sage/20",
|
|
1439
|
+
tertiary: "border-mist/30 text-foreground focus:border-mist focus:ring-mist/20",
|
|
1440
|
+
ghost: "border-slate/30 text-foreground focus:border-slate focus:ring-slate/20",
|
|
1441
|
+
neutral: "border-gray-300 text-foreground focus:border-gray-400 focus:ring-gray-400/20",
|
|
1442
|
+
// Outline variants
|
|
1443
|
+
"primary-outline": "border-coral text-foreground focus:border-coral focus:ring-coral/20",
|
|
1444
|
+
"secondary-outline": "border-sage text-foreground focus:border-sage focus:ring-sage/20",
|
|
1445
|
+
"tertiary-outline": "border-mist text-foreground focus:border-mist focus:ring-mist/20",
|
|
1446
|
+
"ghost-outline": "border-slate text-foreground focus:border-slate focus:ring-slate/20",
|
|
1447
|
+
"neutral-outline": "border-gray-400 text-foreground focus:border-gray-500 focus:ring-gray-500/20",
|
|
1448
|
+
// Semantic variants
|
|
1449
|
+
success: "border-success/30 text-foreground focus:border-success focus:ring-success/20",
|
|
1450
|
+
"success-outline": "border-success text-foreground focus:border-success focus:ring-success/20",
|
|
1451
|
+
info: "border-info/30 text-foreground focus:border-info focus:ring-info/20",
|
|
1452
|
+
"info-outline": "border-info text-foreground focus:border-info focus:ring-info/20",
|
|
1453
|
+
warning: "border-warning/30 text-foreground focus:border-warning focus:ring-warning/20",
|
|
1454
|
+
"warning-outline": "border-warning text-foreground focus:border-warning focus:ring-warning/20",
|
|
1455
|
+
danger: "border-danger bg-danger/5 text-foreground focus:border-danger focus:ring-danger/20",
|
|
1456
|
+
"danger-outline": "border-danger bg-danger/5 text-foreground focus:border-danger focus:ring-danger/20"
|
|
1457
|
+
}
|
|
1458
|
+
},
|
|
1459
|
+
defaultVariants: {
|
|
1460
|
+
variant: "primary"
|
|
1461
|
+
}
|
|
1462
|
+
}
|
|
1463
|
+
), SelectInput = React__default.forwardRef(
|
|
1464
|
+
({
|
|
1465
|
+
variant: e = "primary",
|
|
1466
|
+
label: t,
|
|
1467
|
+
helperText: s,
|
|
1468
|
+
error: a,
|
|
1469
|
+
className: n,
|
|
1470
|
+
disabled: c,
|
|
1471
|
+
id: l,
|
|
1472
|
+
placeholder: o,
|
|
1473
|
+
children: r,
|
|
1474
|
+
...u
|
|
1475
|
+
}, x) => {
|
|
1476
|
+
const i = React__default.useId(), d = l || i, g = !!a;
|
|
1477
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
|
|
1478
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1479
|
+
"label",
|
|
1480
|
+
{
|
|
1481
|
+
htmlFor: d,
|
|
1482
|
+
className: "block text-sm font-medium text-foreground mb-2",
|
|
1483
|
+
children: t
|
|
1484
|
+
}
|
|
1485
|
+
),
|
|
1486
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("relative w-full", n), children: [
|
|
1487
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1488
|
+
"select",
|
|
1489
|
+
{
|
|
1490
|
+
ref: x,
|
|
1491
|
+
id: d,
|
|
1492
|
+
"aria-invalid": g,
|
|
1493
|
+
"aria-disabled": c,
|
|
1494
|
+
disabled: c,
|
|
1495
|
+
className: cn(
|
|
1496
|
+
selectInputVariants({
|
|
1497
|
+
variant: g ? "danger" : e
|
|
1498
|
+
}),
|
|
1499
|
+
"h-10 pl-3"
|
|
1500
|
+
),
|
|
1501
|
+
...u,
|
|
1502
|
+
children: [
|
|
1503
|
+
o && /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", disabled: !0, hidden: !0, children: o }),
|
|
1504
|
+
r
|
|
1505
|
+
]
|
|
1506
|
+
}
|
|
1507
|
+
),
|
|
1508
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1509
|
+
"svg",
|
|
1510
|
+
{
|
|
1511
|
+
className: "w-5 h-5 text-gray-400",
|
|
1512
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
1513
|
+
viewBox: "0 0 20 20",
|
|
1514
|
+
fill: "currentColor",
|
|
1515
|
+
"aria-hidden": "true",
|
|
1516
|
+
children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1517
|
+
"path",
|
|
1518
|
+
{
|
|
1519
|
+
fillRule: "evenodd",
|
|
1520
|
+
d: "M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z",
|
|
1521
|
+
clipRule: "evenodd"
|
|
1522
|
+
}
|
|
1523
|
+
)
|
|
1524
|
+
}
|
|
1525
|
+
) })
|
|
1526
|
+
] }),
|
|
1527
|
+
g && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 text-sm text-danger", role: "alert", children: a }),
|
|
1528
|
+
!g && s && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 text-sm text-gray-600", children: s })
|
|
1529
|
+
] });
|
|
1530
|
+
}
|
|
1531
|
+
);
|
|
1532
|
+
SelectInput.displayName = "SelectInput";
|
|
1533
|
+
const textAreaInputVariants = cva(
|
|
1534
|
+
"block w-full rounded-md border bg-white transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none disabled:bg-gray-50",
|
|
1535
|
+
{
|
|
1536
|
+
variants: {
|
|
1537
|
+
variant: {
|
|
1538
|
+
// Core variants using Versaur color system
|
|
1539
|
+
primary: "border-coral/30 text-foreground focus:border-coral focus:ring-coral/20",
|
|
1540
|
+
secondary: "border-sage/30 text-foreground focus:border-sage focus:ring-sage/20",
|
|
1541
|
+
tertiary: "border-mist/30 text-foreground focus:border-mist focus:ring-mist/20",
|
|
1542
|
+
ghost: "border-slate/30 text-foreground focus:border-slate focus:ring-slate/20",
|
|
1543
|
+
neutral: "border-gray-300 text-foreground focus:border-gray-400 focus:ring-gray-400/20",
|
|
1544
|
+
// Outline variants
|
|
1545
|
+
"primary-outline": "border-coral text-foreground focus:border-coral focus:ring-coral/20",
|
|
1546
|
+
"secondary-outline": "border-sage text-foreground focus:border-sage focus:ring-sage/20",
|
|
1547
|
+
"tertiary-outline": "border-mist text-foreground focus:border-mist focus:ring-mist/20",
|
|
1548
|
+
"ghost-outline": "border-slate text-foreground focus:border-slate focus:ring-slate/20",
|
|
1549
|
+
"neutral-outline": "border-gray-400 text-foreground focus:border-gray-500 focus:ring-gray-500/20",
|
|
1550
|
+
// Semantic variants
|
|
1551
|
+
success: "border-success/30 text-foreground focus:border-success focus:ring-success/20",
|
|
1552
|
+
"success-outline": "border-success text-foreground focus:border-success focus:ring-success/20",
|
|
1553
|
+
info: "border-info/30 text-foreground focus:border-info focus:ring-info/20",
|
|
1554
|
+
"info-outline": "border-info text-foreground focus:border-info focus:ring-info/20",
|
|
1555
|
+
warning: "border-warning/30 text-foreground focus:border-warning focus:ring-warning/20",
|
|
1556
|
+
"warning-outline": "border-warning text-foreground focus:border-warning focus:ring-warning/20",
|
|
1557
|
+
danger: "border-danger bg-danger/5 text-foreground focus:border-danger focus:ring-danger/20",
|
|
1558
|
+
"danger-outline": "border-danger bg-danger/5 text-foreground focus:border-danger focus:ring-danger/20"
|
|
1559
|
+
},
|
|
1560
|
+
fieldSizing: {
|
|
1561
|
+
content: "field-sizing-content resize-none",
|
|
1562
|
+
fixed: "resize-y"
|
|
1563
|
+
}
|
|
1564
|
+
},
|
|
1565
|
+
defaultVariants: {
|
|
1566
|
+
variant: "primary",
|
|
1567
|
+
fieldSizing: "fixed"
|
|
1568
|
+
}
|
|
1569
|
+
}
|
|
1570
|
+
), TextAreaInput = React__default.forwardRef(
|
|
1571
|
+
({
|
|
1572
|
+
variant: e = "primary",
|
|
1573
|
+
label: t,
|
|
1574
|
+
helperText: s,
|
|
1575
|
+
error: a,
|
|
1576
|
+
className: n,
|
|
1577
|
+
disabled: c,
|
|
1578
|
+
id: l,
|
|
1579
|
+
minRows: o = 3,
|
|
1580
|
+
maxRows: r,
|
|
1581
|
+
fieldSizing: u = "fixed",
|
|
1582
|
+
style: x,
|
|
1583
|
+
rows: i,
|
|
1584
|
+
...d
|
|
1585
|
+
}, g) => {
|
|
1586
|
+
const f = React__default.useId(), b = l || f, m = !!a, p = i || o, w = u === "content" ? void 0 : r, j = {
|
|
1587
|
+
...u === "content" && { fieldSizing: "content" },
|
|
1588
|
+
...w && {
|
|
1589
|
+
maxHeight: `${w * 1.5}rem`
|
|
1590
|
+
// Approximate line height
|
|
1591
|
+
},
|
|
1592
|
+
...x
|
|
1593
|
+
};
|
|
1594
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
|
|
1595
|
+
t && /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1596
|
+
"label",
|
|
1597
|
+
{
|
|
1598
|
+
htmlFor: b,
|
|
1599
|
+
className: "block text-sm font-medium text-foreground mb-2",
|
|
1600
|
+
children: t
|
|
1601
|
+
}
|
|
1602
|
+
),
|
|
1603
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("relative w-full", n), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1604
|
+
"textarea",
|
|
1605
|
+
{
|
|
1606
|
+
ref: g,
|
|
1607
|
+
id: b,
|
|
1608
|
+
rows: p,
|
|
1609
|
+
"aria-invalid": m,
|
|
1610
|
+
"aria-disabled": c,
|
|
1611
|
+
disabled: c,
|
|
1612
|
+
style: j,
|
|
1613
|
+
className: cn(
|
|
1614
|
+
textAreaInputVariants({
|
|
1615
|
+
variant: m ? "danger" : e,
|
|
1616
|
+
fieldSizing: u
|
|
1617
|
+
}),
|
|
1618
|
+
"px-3 py-2"
|
|
1619
|
+
),
|
|
1620
|
+
...d
|
|
1621
|
+
}
|
|
1622
|
+
) }),
|
|
1623
|
+
m && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 text-sm text-danger", role: "alert", children: a }),
|
|
1624
|
+
!m && s && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-1 text-sm text-gray-600", children: s })
|
|
1625
|
+
] });
|
|
1626
|
+
}
|
|
1627
|
+
);
|
|
1628
|
+
TextAreaInput.displayName = "TextAreaInput";
|
|
1629
|
+
const timeSegmentButtonVariants = cva(
|
|
1630
|
+
"inline-flex items-center justify-center rounded-md font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
|
|
1631
|
+
{
|
|
1632
|
+
variants: {
|
|
1633
|
+
active: {
|
|
1634
|
+
true: "bg-primary text-white",
|
|
1635
|
+
false: "bg-neutral text-foreground"
|
|
1636
|
+
},
|
|
1637
|
+
size: {
|
|
1638
|
+
sm: "h-8 px-3 text-sm",
|
|
1639
|
+
md: "h-10 px-4 text-base",
|
|
1640
|
+
lg: "h-12 px-6 text-lg"
|
|
1641
|
+
}
|
|
1642
|
+
},
|
|
1643
|
+
defaultVariants: {
|
|
1644
|
+
active: !1,
|
|
1645
|
+
size: "md"
|
|
1646
|
+
}
|
|
1647
|
+
}
|
|
1648
|
+
), TimeField = ({
|
|
1649
|
+
value: e,
|
|
1650
|
+
onChange: t,
|
|
1651
|
+
label: s,
|
|
1652
|
+
"aria-label": a,
|
|
1653
|
+
disabled: n
|
|
1654
|
+
}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1655
|
+
"input",
|
|
1656
|
+
{
|
|
1657
|
+
type: "text",
|
|
1658
|
+
inputMode: "numeric",
|
|
1659
|
+
pattern: "[0-9]*",
|
|
1660
|
+
maxLength: 2,
|
|
1661
|
+
value: e,
|
|
1662
|
+
onChange: (c) => t(c.target.value),
|
|
1663
|
+
className: "w-12 h-12 text-center text-2xl border-b-2 border-primary bg-transparent focus:outline-none focus:border-primary",
|
|
1664
|
+
"aria-label": a || s,
|
|
1665
|
+
disabled: n,
|
|
1666
|
+
autoComplete: "off"
|
|
1667
|
+
}
|
|
1668
|
+
), AmPmSegment = ({
|
|
1669
|
+
value: e,
|
|
1670
|
+
onChange: t,
|
|
1671
|
+
disabled: s
|
|
1672
|
+
}) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex flex-col gap-1 ml-4", children: ["AM", "PM"].map((a) => /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1673
|
+
"button",
|
|
1674
|
+
{
|
|
1675
|
+
type: "button",
|
|
1676
|
+
className: cn(
|
|
1677
|
+
timeSegmentButtonVariants({
|
|
1678
|
+
active: e === a,
|
|
1679
|
+
size: "sm"
|
|
1680
|
+
})
|
|
1681
|
+
),
|
|
1682
|
+
"aria-pressed": e === a,
|
|
1683
|
+
onClick: () => t(a),
|
|
1684
|
+
disabled: s,
|
|
1685
|
+
children: a
|
|
1686
|
+
},
|
|
1687
|
+
a
|
|
1688
|
+
)) }), TimePickerInput = ({
|
|
1689
|
+
value: e,
|
|
1690
|
+
onChange: t,
|
|
1691
|
+
label: s,
|
|
1692
|
+
helperText: a,
|
|
1693
|
+
disabled: n,
|
|
1694
|
+
error: c,
|
|
1695
|
+
placement: l,
|
|
1696
|
+
"aria-label": o,
|
|
1697
|
+
"aria-labelledby": r,
|
|
1698
|
+
"aria-describedby": u
|
|
1699
|
+
}) => {
|
|
1700
|
+
const [x, i] = useState(!1), d = (k) => {
|
|
1701
|
+
const h = k.match(/^(\d{1,2}):(\d{2})\s?(AM|PM)$/i);
|
|
1702
|
+
return h ? {
|
|
1703
|
+
hour: h[1],
|
|
1704
|
+
minute: h[2],
|
|
1705
|
+
period: h[3].toUpperCase()
|
|
1706
|
+
} : { hour: "", minute: "", period: "AM" };
|
|
1707
|
+
}, [{ hour: g, minute: f, period: b }, m] = useState(() => d(e)), p = () => {
|
|
1708
|
+
n || (m(d(e)), i(!0));
|
|
1709
|
+
}, w = (k) => {
|
|
1710
|
+
let h = k.replace(/[^\d]/g, "");
|
|
1711
|
+
h.length > 2 && (h = h.slice(0, 2)), Number(h) > 12 && (h = "12"), m((C) => ({ ...C, hour: h }));
|
|
1712
|
+
}, j = (k) => {
|
|
1713
|
+
let h = k.replace(/[^\d]/g, "");
|
|
1714
|
+
h.length > 2 && (h = h.slice(0, 2)), Number(h) > 59 && (h = "59"), m((C) => ({ ...C, minute: h }));
|
|
1715
|
+
}, y = (k) => {
|
|
1716
|
+
m((h) => ({ ...h, period: k }));
|
|
1717
|
+
}, E = () => {
|
|
1718
|
+
m(d(e)), i(!1);
|
|
1719
|
+
}, I = () => {
|
|
1720
|
+
const k = g.padStart(2, "0") || "12", h = f.padStart(2, "0") || "00";
|
|
1721
|
+
t(`${k}:${h} ${b}`), i(!1);
|
|
1722
|
+
};
|
|
1723
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
|
|
1724
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1725
|
+
TextInput,
|
|
1726
|
+
{
|
|
1727
|
+
label: s,
|
|
1728
|
+
value: e,
|
|
1729
|
+
onClick: p,
|
|
1730
|
+
readOnly: !0,
|
|
1731
|
+
disabled: n,
|
|
1732
|
+
error: c,
|
|
1733
|
+
helperText: a,
|
|
1734
|
+
"aria-label": o,
|
|
1735
|
+
"aria-labelledby": r,
|
|
1736
|
+
"aria-describedby": u,
|
|
1737
|
+
className: "cursor-pointer bg-white",
|
|
1738
|
+
rightContent: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { as: Clock, size: "sm", color: "ghost" })
|
|
1739
|
+
}
|
|
1740
|
+
),
|
|
1741
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1742
|
+
Modal,
|
|
1743
|
+
{
|
|
1744
|
+
isOpen: x,
|
|
1745
|
+
onOpenChange: i,
|
|
1746
|
+
placement: l,
|
|
1747
|
+
size: "sm",
|
|
1748
|
+
"aria-label": o,
|
|
1749
|
+
"aria-labelledby": r,
|
|
1750
|
+
"aria-describedby": u,
|
|
1751
|
+
children: [
|
|
1752
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(Modal.Header, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "lg", fontWeight: "semibold", children: "Select time" }) }),
|
|
1753
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(Modal.Body, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 justify-center py-2", children: [
|
|
1754
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1755
|
+
TimeField,
|
|
1756
|
+
{
|
|
1757
|
+
value: g,
|
|
1758
|
+
onChange: w,
|
|
1759
|
+
label: "Hour",
|
|
1760
|
+
"aria-label": "Hour",
|
|
1761
|
+
disabled: n
|
|
1762
|
+
}
|
|
1763
|
+
),
|
|
1764
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(Text, { as: "span", fontSize: "2xl", className: "select-none", children: ":" }),
|
|
1765
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1766
|
+
TimeField,
|
|
1767
|
+
{
|
|
1768
|
+
value: f,
|
|
1769
|
+
onChange: j,
|
|
1770
|
+
label: "Minute",
|
|
1771
|
+
"aria-label": "Minute",
|
|
1772
|
+
disabled: n
|
|
1773
|
+
}
|
|
1774
|
+
),
|
|
1775
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1776
|
+
AmPmSegment,
|
|
1777
|
+
{
|
|
1778
|
+
value: b === "AM" ? "AM" : "PM",
|
|
1779
|
+
onChange: y,
|
|
1780
|
+
disabled: n
|
|
1781
|
+
}
|
|
1782
|
+
)
|
|
1783
|
+
] }) }),
|
|
1784
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(Modal.Footer, { children: [
|
|
1785
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "ghost", size: "md", onClick: E, children: "Cancel" }),
|
|
1786
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(Button, { variant: "primary", size: "md", onClick: I, children: "Confirm" })
|
|
1787
|
+
] })
|
|
1788
|
+
]
|
|
1789
|
+
}
|
|
1790
|
+
)
|
|
1791
|
+
] });
|
|
1792
|
+
}, switchVariants = cva(
|
|
1793
|
+
"relative inline-flex items-center transition-colors duration-200",
|
|
1794
|
+
{
|
|
1795
|
+
variants: {
|
|
1796
|
+
color: {
|
|
1797
|
+
primary: "",
|
|
1798
|
+
secondary: "",
|
|
1799
|
+
tertiary: "",
|
|
1800
|
+
ghost: "",
|
|
1801
|
+
neutral: "",
|
|
1802
|
+
success: "",
|
|
1803
|
+
info: "",
|
|
1804
|
+
warning: "",
|
|
1805
|
+
danger: ""
|
|
1806
|
+
},
|
|
1807
|
+
size: {
|
|
1808
|
+
sm: "h-4 w-8",
|
|
1809
|
+
md: "h-5 w-10",
|
|
1810
|
+
lg: "h-6 w-12"
|
|
1811
|
+
},
|
|
1812
|
+
disabled: {
|
|
1813
|
+
true: "opacity-50 cursor-not-allowed",
|
|
1814
|
+
false: ""
|
|
1815
|
+
},
|
|
1816
|
+
checked: {
|
|
1817
|
+
true: "",
|
|
1818
|
+
false: ""
|
|
1819
|
+
}
|
|
1820
|
+
},
|
|
1821
|
+
defaultVariants: {
|
|
1822
|
+
color: "primary",
|
|
1823
|
+
size: "md",
|
|
1824
|
+
disabled: !1,
|
|
1825
|
+
checked: !1
|
|
1826
|
+
},
|
|
1827
|
+
compoundVariants: [
|
|
1828
|
+
{ checked: !0, color: "primary", class: "bg-[var(--color-primary)]" },
|
|
1829
|
+
{
|
|
1830
|
+
checked: !0,
|
|
1831
|
+
color: "secondary",
|
|
1832
|
+
class: "bg-[var(--color-secondary)]"
|
|
1833
|
+
},
|
|
1834
|
+
{ checked: !0, color: "tertiary", class: "bg-[var(--color-tertiary)]" },
|
|
1835
|
+
{ checked: !0, color: "ghost", class: "bg-[var(--color-ghost)]" },
|
|
1836
|
+
{ checked: !0, color: "neutral", class: "bg-[var(--color-neutral)]" },
|
|
1837
|
+
{ checked: !0, color: "success", class: "bg-[var(--color-success)]" },
|
|
1838
|
+
{ checked: !0, color: "info", class: "bg-[var(--color-info)]" },
|
|
1839
|
+
{ checked: !0, color: "warning", class: "bg-[var(--color-warning)]" },
|
|
1840
|
+
{ checked: !0, color: "danger", class: "bg-[var(--color-danger)]" },
|
|
1841
|
+
{ checked: !1, class: "bg-white border border-slate-300" }
|
|
1842
|
+
]
|
|
1843
|
+
}
|
|
1844
|
+
), thumbVariants = cva(
|
|
1845
|
+
"absolute rounded-full transition-transform duration-200",
|
|
1846
|
+
{
|
|
1847
|
+
variants: {
|
|
1848
|
+
size: {
|
|
1849
|
+
sm: "h-3 w-3",
|
|
1850
|
+
md: "h-4 w-4",
|
|
1851
|
+
lg: "h-5 w-5"
|
|
1852
|
+
},
|
|
1853
|
+
checked: {
|
|
1854
|
+
true: "translate-x-full bg-white left-1.5",
|
|
1855
|
+
false: "bg-slate-300 left-0.5"
|
|
1856
|
+
}
|
|
1857
|
+
},
|
|
1858
|
+
defaultVariants: {
|
|
1859
|
+
size: "md",
|
|
1860
|
+
checked: !1
|
|
1861
|
+
}
|
|
1862
|
+
}
|
|
1863
|
+
), SwitchTrack = ({
|
|
1864
|
+
color: e = "primary",
|
|
1865
|
+
size: t = "md",
|
|
1866
|
+
disabled: s = !1,
|
|
1867
|
+
className: a,
|
|
1868
|
+
checked: n
|
|
1869
|
+
}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1870
|
+
"span",
|
|
1871
|
+
{
|
|
1872
|
+
className: cn(
|
|
1873
|
+
switchVariants({ color: e, size: t, disabled: s, checked: n }),
|
|
1874
|
+
"rounded-full pointer-events-none",
|
|
1875
|
+
a
|
|
1876
|
+
),
|
|
1877
|
+
"aria-hidden": "true"
|
|
1878
|
+
}
|
|
1879
|
+
), SwitchThumb = ({ size: e = "md", checked: t = !1 }) => /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: cn(thumbVariants({ size: e, checked: t })), "aria-hidden": "true" }), SwitchLabel = ({ label: e, htmlFor: t, placement: s = "top", disabled: a = !1 }) => e ? /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1880
|
+
"label",
|
|
1881
|
+
{
|
|
1882
|
+
htmlFor: t,
|
|
1883
|
+
className: cn(
|
|
1884
|
+
"text-sm select-none font-medium text-foreground",
|
|
1885
|
+
s === "inline" ? "ml-2 mb-0" : "mb-1",
|
|
1886
|
+
a && "opacity-50 cursor-not-allowed"
|
|
1887
|
+
),
|
|
1888
|
+
children: e
|
|
1889
|
+
}
|
|
1890
|
+
) : null, SwitchInput = React__default.forwardRef(
|
|
1891
|
+
({
|
|
1892
|
+
checked: e,
|
|
1893
|
+
defaultChecked: t,
|
|
1894
|
+
onCheckedChange: s,
|
|
1895
|
+
color: a = "primary",
|
|
1896
|
+
size: n = "md",
|
|
1897
|
+
label: c,
|
|
1898
|
+
labelPlacement: l = "top",
|
|
1899
|
+
disabled: o = !1,
|
|
1900
|
+
className: r,
|
|
1901
|
+
id: u,
|
|
1902
|
+
ariaLabel: x,
|
|
1903
|
+
...i
|
|
1904
|
+
}, d) => {
|
|
1905
|
+
const [g, f] = useState(
|
|
1906
|
+
t ?? !1
|
|
1907
|
+
), b = useId(), m = u || b, p = typeof e == "boolean", w = p ? e : g, j = (y) => {
|
|
1908
|
+
p || f(y.target.checked), s?.(y.target.checked);
|
|
1909
|
+
};
|
|
1910
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1911
|
+
"div",
|
|
1912
|
+
{
|
|
1913
|
+
className: cn(
|
|
1914
|
+
"flex flex-col",
|
|
1915
|
+
l === "inline" && "flex-row items-center",
|
|
1916
|
+
r
|
|
1917
|
+
),
|
|
1918
|
+
children: [
|
|
1919
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1920
|
+
SwitchLabel,
|
|
1921
|
+
{
|
|
1922
|
+
label: c,
|
|
1923
|
+
htmlFor: m,
|
|
1924
|
+
placement: l,
|
|
1925
|
+
disabled: o
|
|
1926
|
+
}
|
|
1927
|
+
),
|
|
1928
|
+
/* @__PURE__ */ jsxRuntimeExports.jsxs(
|
|
1929
|
+
"span",
|
|
1930
|
+
{
|
|
1931
|
+
className: cn(
|
|
1932
|
+
"relative flex items-center",
|
|
1933
|
+
l === "inline" && "ml-2"
|
|
1934
|
+
),
|
|
1935
|
+
children: [
|
|
1936
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1937
|
+
"input",
|
|
1938
|
+
{
|
|
1939
|
+
ref: d,
|
|
1940
|
+
type: "checkbox",
|
|
1941
|
+
id: m,
|
|
1942
|
+
"aria-label": x || c,
|
|
1943
|
+
checked: w,
|
|
1944
|
+
disabled: o,
|
|
1945
|
+
onChange: j,
|
|
1946
|
+
className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10",
|
|
1947
|
+
...i
|
|
1948
|
+
}
|
|
1949
|
+
),
|
|
1950
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
1951
|
+
SwitchTrack,
|
|
1952
|
+
{
|
|
1953
|
+
color: a,
|
|
1954
|
+
size: n,
|
|
1955
|
+
disabled: o,
|
|
1956
|
+
checked: w
|
|
1957
|
+
}
|
|
1958
|
+
),
|
|
1959
|
+
/* @__PURE__ */ jsxRuntimeExports.jsx(SwitchThumb, { size: n, checked: w })
|
|
1960
|
+
]
|
|
1961
|
+
}
|
|
1962
|
+
)
|
|
1963
|
+
]
|
|
1964
|
+
}
|
|
1965
|
+
);
|
|
1966
|
+
}
|
|
1967
|
+
);
|
|
1968
|
+
SwitchInput.displayName = "SwitchInput";
|
|
1969
|
+
export {
|
|
1970
|
+
CalculatorInput as C,
|
|
1971
|
+
DateSinglePickerInput as D,
|
|
1972
|
+
RadioInput as R,
|
|
1973
|
+
SegmentSingleInput as S,
|
|
1974
|
+
TextInput as T,
|
|
1975
|
+
CheckboxInput as a,
|
|
1976
|
+
ChipInput as b,
|
|
1977
|
+
SegmentMultipleInput as c,
|
|
1978
|
+
SelectInput as d,
|
|
1979
|
+
TextAreaInput as e,
|
|
1980
|
+
TimePickerInput as f,
|
|
1981
|
+
SwitchInput as g,
|
|
1982
|
+
SwitchTrack as h,
|
|
1983
|
+
SwitchThumb as i,
|
|
1984
|
+
SwitchLabel as j
|
|
1985
|
+
};
|