@seedgrid/fe-components 0.2.9 → 0.2.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/commons/SgToaster.d.ts +9 -0
- package/dist/commons/SgToaster.d.ts.map +1 -1
- package/dist/commons/SgToaster.js +86 -17
- package/dist/gadgets/qr-code/SgQRCode.d.ts +25 -0
- package/dist/gadgets/qr-code/SgQRCode.d.ts.map +1 -0
- package/dist/gadgets/qr-code/SgQRCode.js +75 -0
- package/dist/gadgets/qr-code/index.d.ts +3 -0
- package/dist/gadgets/qr-code/index.d.ts.map +1 -0
- package/dist/gadgets/qr-code/index.js +1 -0
- package/dist/index.d.ts +7 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +3 -0
- package/dist/inputs/SgCombobox.d.ts +26 -0
- package/dist/inputs/SgCombobox.d.ts.map +1 -0
- package/dist/inputs/SgCombobox.js +349 -0
- package/dist/inputs/SgInputOTP.d.ts.map +1 -1
- package/dist/inputs/SgInputOTP.js +9 -2
- package/dist/inputs/SgToggleSwitch.d.ts +36 -0
- package/dist/inputs/SgToggleSwitch.d.ts.map +1 -0
- package/dist/inputs/SgToggleSwitch.js +174 -0
- package/dist/others/SgPlayground.js +1 -1
- package/package.json +8 -2
|
@@ -1,11 +1,20 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import { type SgToastRecord } from "./SgToast";
|
|
2
3
|
export type SgToasterPosition = "top-right" | "top-left" | "top-center" | "bottom-right" | "bottom-left" | "bottom-center";
|
|
4
|
+
export type SgToasterTypeColors = {
|
|
5
|
+
bg?: string;
|
|
6
|
+
fg?: string;
|
|
7
|
+
border?: string;
|
|
8
|
+
};
|
|
9
|
+
export type SgToasterCustomColors = Partial<Record<SgToastRecord["type"], SgToasterTypeColors>>;
|
|
3
10
|
export type SgToasterProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
4
11
|
position?: SgToasterPosition;
|
|
5
12
|
duration?: number;
|
|
6
13
|
visibleToasts?: number;
|
|
7
14
|
closeButton?: boolean;
|
|
8
15
|
richColors?: boolean;
|
|
16
|
+
transparency?: number;
|
|
17
|
+
customColors?: SgToasterCustomColors;
|
|
9
18
|
};
|
|
10
19
|
export declare function SgToaster(props: SgToasterProps): import("react/jsx-runtime").JSX.Element;
|
|
11
20
|
//# sourceMappingURL=SgToaster.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgToaster.d.ts","sourceRoot":"","sources":["../../src/commons/SgToaster.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"SgToaster.d.ts","sourceRoot":"","sources":["../../src/commons/SgToaster.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAqC,KAAK,aAAa,EAAE,MAAM,WAAW,CAAC;AAMlF,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,UAAU,GACV,YAAY,GACZ,cAAc,GACd,aAAa,GACb,eAAe,CAAC;AAEpB,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,OAAO,CACzC,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,mBAAmB,CAAC,CACnD,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACpF,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,qBAAqB,CAAC;CACtC,CAAC;AAgGF,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,2CAkI9C"}
|
|
@@ -13,24 +13,86 @@ const POSITION_CLASS = {
|
|
|
13
13
|
"bottom-left": "bottom-4 left-4 items-start",
|
|
14
14
|
"bottom-center": "bottom-4 left-1/2 -translate-x-1/2 items-center"
|
|
15
15
|
};
|
|
16
|
-
const
|
|
17
|
-
default:
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
16
|
+
const RICH_TYPE_COLORS = {
|
|
17
|
+
default: {
|
|
18
|
+
border: "hsl(var(--border))",
|
|
19
|
+
bg: "hsl(var(--background))",
|
|
20
|
+
fg: "hsl(var(--foreground))"
|
|
21
|
+
},
|
|
22
|
+
success: {
|
|
23
|
+
border: "#22c55e",
|
|
24
|
+
bg: "#16a34a",
|
|
25
|
+
fg: "#ffffff"
|
|
26
|
+
},
|
|
27
|
+
info: {
|
|
28
|
+
border: "#0ea5e9",
|
|
29
|
+
bg: "#0284c7",
|
|
30
|
+
fg: "#ffffff"
|
|
31
|
+
},
|
|
32
|
+
warning: {
|
|
33
|
+
border: "#f59e0b",
|
|
34
|
+
bg: "#f59e0b",
|
|
35
|
+
fg: "#000000"
|
|
36
|
+
},
|
|
37
|
+
error: {
|
|
38
|
+
border: "#ef4444",
|
|
39
|
+
bg: "#dc2626",
|
|
40
|
+
fg: "#ffffff"
|
|
41
|
+
},
|
|
42
|
+
loading: {
|
|
43
|
+
border: "#3b82f6",
|
|
44
|
+
bg: "#2563eb",
|
|
45
|
+
fg: "#ffffff"
|
|
46
|
+
}
|
|
23
47
|
};
|
|
24
|
-
const
|
|
25
|
-
default:
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
48
|
+
const SOFT_TYPE_COLORS = {
|
|
49
|
+
default: {
|
|
50
|
+
border: "hsl(var(--border))",
|
|
51
|
+
bg: "hsl(var(--background))",
|
|
52
|
+
fg: "hsl(var(--foreground))"
|
|
53
|
+
},
|
|
54
|
+
success: {
|
|
55
|
+
border: "#86efac",
|
|
56
|
+
bg: "#f0fdf4",
|
|
57
|
+
fg: "#14532d"
|
|
58
|
+
},
|
|
59
|
+
info: {
|
|
60
|
+
border: "#7dd3fc",
|
|
61
|
+
bg: "#f0f9ff",
|
|
62
|
+
fg: "#0c4a6e"
|
|
63
|
+
},
|
|
64
|
+
warning: {
|
|
65
|
+
border: "#fcd34d",
|
|
66
|
+
bg: "#fffbeb",
|
|
67
|
+
fg: "#78350f"
|
|
68
|
+
},
|
|
69
|
+
error: {
|
|
70
|
+
border: "#fca5a5",
|
|
71
|
+
bg: "#fef2f2",
|
|
72
|
+
fg: "#7f1d1d"
|
|
73
|
+
},
|
|
74
|
+
loading: {
|
|
75
|
+
border: "#93c5fd",
|
|
76
|
+
bg: "#eff6ff",
|
|
77
|
+
fg: "#1e3a8a"
|
|
78
|
+
}
|
|
31
79
|
};
|
|
80
|
+
function clampTransparency(value) {
|
|
81
|
+
if (value === undefined || Number.isNaN(value))
|
|
82
|
+
return 0;
|
|
83
|
+
return Math.max(0, Math.min(100, value));
|
|
84
|
+
}
|
|
85
|
+
function resolveToastColors(type, richColors, customColors) {
|
|
86
|
+
const base = richColors ? RICH_TYPE_COLORS[type] : SOFT_TYPE_COLORS[type];
|
|
87
|
+
const custom = customColors?.[type];
|
|
88
|
+
return {
|
|
89
|
+
border: custom?.border ?? base.border,
|
|
90
|
+
bg: custom?.bg ?? base.bg,
|
|
91
|
+
fg: custom?.fg ?? base.fg
|
|
92
|
+
};
|
|
93
|
+
}
|
|
32
94
|
export function SgToaster(props) {
|
|
33
|
-
const { position = "top-right", duration = 4000, visibleToasts = 6, closeButton = true, richColors = true, className, style, ...rest } = props;
|
|
95
|
+
const { position = "top-right", duration = 4000, visibleToasts = 6, closeButton = true, richColors = true, transparency = 0, customColors, className, style, ...rest } = props;
|
|
34
96
|
const [toasts, setToasts] = React.useState([]);
|
|
35
97
|
const timersRef = React.useRef({});
|
|
36
98
|
React.useEffect(() => subscribeSgToasts(setToasts), []);
|
|
@@ -74,10 +136,17 @@ export function SgToaster(props) {
|
|
|
74
136
|
timersRef.current = {};
|
|
75
137
|
};
|
|
76
138
|
}, []);
|
|
139
|
+
const toastOpacity = 1 - clampTransparency(transparency) / 100;
|
|
77
140
|
return (_jsx("div", { className: cn("pointer-events-none fixed z-[1100] flex max-h-screen w-full flex-col gap-2 p-4 sm:w-auto", POSITION_CLASS[position], className), style: style, ...rest, children: visible.map((toast) => {
|
|
78
|
-
const
|
|
141
|
+
const typeColors = resolveToastColors(toast.type, richColors, customColors);
|
|
79
142
|
const canClose = toast.closeButton ?? closeButton;
|
|
80
|
-
return (_jsxs("div", { className: cn("pointer-events-auto flex min-w-[260px] max-w-[420px] items-start gap-3 rounded-md border px-3 py-2 shadow-lg",
|
|
143
|
+
return (_jsxs("div", { className: cn("pointer-events-auto flex min-w-[260px] max-w-[420px] items-start gap-3 rounded-md border px-3 py-2 shadow-lg", toast.className), style: {
|
|
144
|
+
borderColor: typeColors.border,
|
|
145
|
+
backgroundColor: typeColors.bg,
|
|
146
|
+
color: typeColors.fg,
|
|
147
|
+
opacity: toastOpacity,
|
|
148
|
+
...toast.style
|
|
149
|
+
}, role: "status", "aria-live": "polite", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [toast.title ? _jsx("div", { className: "text-sm font-semibold", children: toast.title }) : null, toast.description ? _jsx("div", { className: "mt-0.5 text-xs opacity-90", children: toast.description }) : null] }), toast.action ? (_jsx("button", { type: "button", className: "rounded border border-current/30 px-2 py-1 text-xs font-medium opacity-95 hover:opacity-100", onClick: () => {
|
|
81
150
|
toast.action?.onClick?.();
|
|
82
151
|
dismissSgToast(toast.id);
|
|
83
152
|
}, children: toast.action.label })) : null, canClose ? (_jsx("button", { type: "button", className: "rounded px-1.5 py-0.5 text-xs opacity-80 hover:opacity-100", onClick: () => dismissSgToast(toast.id), "aria-label": "Close toast", children: "x" })) : null] }, toast.id));
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
export type SgQRCodeErrorCorrectionLevel = "L" | "M" | "Q" | "H";
|
|
3
|
+
export type SgQRCodeProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
4
|
+
value?: string;
|
|
5
|
+
size?: number;
|
|
6
|
+
margin?: number;
|
|
7
|
+
fgColor?: string;
|
|
8
|
+
bgColor?: string;
|
|
9
|
+
errorCorrectionLevel?: SgQRCodeErrorCorrectionLevel;
|
|
10
|
+
logoSrc?: string;
|
|
11
|
+
logoAlt?: string;
|
|
12
|
+
logoSize?: number;
|
|
13
|
+
logoPadding?: number;
|
|
14
|
+
logoBackgroundColor?: string;
|
|
15
|
+
logoBorderRadius?: number;
|
|
16
|
+
imageClassName?: string;
|
|
17
|
+
logoClassName?: string;
|
|
18
|
+
emptyFallback?: React.ReactNode;
|
|
19
|
+
onGenerateError?: (error: Error) => void;
|
|
20
|
+
};
|
|
21
|
+
export declare function SgQRCode(props: Readonly<SgQRCodeProps>): import("react/jsx-runtime").JSX.Element | null;
|
|
22
|
+
export declare namespace SgQRCode {
|
|
23
|
+
var displayName: string;
|
|
24
|
+
}
|
|
25
|
+
//# sourceMappingURL=SgQRCode.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SgQRCode.d.ts","sourceRoot":"","sources":["../../../src/gadgets/qr-code/SgQRCode.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,MAAM,4BAA4B,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEjE,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IACnF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oBAAoB,CAAC,EAAE,4BAA4B,CAAC;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAC1C,CAAC;AAEF,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,kDAyItD;yBAzIe,QAAQ"}
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import * as React from "react";
|
|
4
|
+
import QRCode from "qrcode";
|
|
5
|
+
function cn(...parts) {
|
|
6
|
+
return parts.filter(Boolean).join(" ");
|
|
7
|
+
}
|
|
8
|
+
export function SgQRCode(props) {
|
|
9
|
+
const { value, size = 220, margin = 2, fgColor = "#000000", bgColor = "#FFFFFF", errorCorrectionLevel = "H", logoSrc, logoAlt = "Logo", logoSize, logoPadding = 6, logoBackgroundColor = "#FFFFFF", logoBorderRadius = 12, imageClassName, logoClassName, emptyFallback, onGenerateError, className, style, ...rest } = props;
|
|
10
|
+
const [qrDataUrl, setQrDataUrl] = React.useState("");
|
|
11
|
+
const [hasError, setHasError] = React.useState(false);
|
|
12
|
+
const normalizedValue = value?.trim() ?? "";
|
|
13
|
+
const safeSize = Math.max(64, Math.round(size));
|
|
14
|
+
const safeMargin = Math.max(0, Math.round(margin));
|
|
15
|
+
const safeLogoPadding = Math.max(0, Math.round(logoPadding));
|
|
16
|
+
const safeLogoSize = Math.max(18, Math.min(safeSize, Math.round(logoSize ?? safeSize * 0.22)));
|
|
17
|
+
const logoContainerSize = safeLogoSize + safeLogoPadding * 2;
|
|
18
|
+
React.useEffect(() => {
|
|
19
|
+
let active = true;
|
|
20
|
+
if (!normalizedValue) {
|
|
21
|
+
setQrDataUrl("");
|
|
22
|
+
setHasError(false);
|
|
23
|
+
return () => {
|
|
24
|
+
active = false;
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
QRCode.toDataURL(normalizedValue, {
|
|
28
|
+
width: safeSize,
|
|
29
|
+
margin: safeMargin,
|
|
30
|
+
color: {
|
|
31
|
+
dark: fgColor,
|
|
32
|
+
light: bgColor
|
|
33
|
+
},
|
|
34
|
+
errorCorrectionLevel
|
|
35
|
+
})
|
|
36
|
+
.then((dataUrl) => {
|
|
37
|
+
if (!active)
|
|
38
|
+
return;
|
|
39
|
+
setQrDataUrl(dataUrl);
|
|
40
|
+
setHasError(false);
|
|
41
|
+
})
|
|
42
|
+
.catch((cause) => {
|
|
43
|
+
if (!active)
|
|
44
|
+
return;
|
|
45
|
+
const error = cause instanceof Error ? cause : new Error("Failed to generate QR code");
|
|
46
|
+
setQrDataUrl("");
|
|
47
|
+
setHasError(true);
|
|
48
|
+
onGenerateError?.(error);
|
|
49
|
+
});
|
|
50
|
+
return () => {
|
|
51
|
+
active = false;
|
|
52
|
+
};
|
|
53
|
+
}, [
|
|
54
|
+
normalizedValue,
|
|
55
|
+
safeSize,
|
|
56
|
+
safeMargin,
|
|
57
|
+
fgColor,
|
|
58
|
+
bgColor,
|
|
59
|
+
errorCorrectionLevel,
|
|
60
|
+
onGenerateError
|
|
61
|
+
]);
|
|
62
|
+
if (!normalizedValue) {
|
|
63
|
+
if (!emptyFallback)
|
|
64
|
+
return null;
|
|
65
|
+
return (_jsx("div", { className: cn("inline-flex items-center justify-center", className), style: { width: safeSize, height: safeSize, ...style }, ...rest, children: emptyFallback }));
|
|
66
|
+
}
|
|
67
|
+
return (_jsxs("div", { className: cn("relative inline-flex items-center justify-center", className), style: { width: safeSize, height: safeSize, ...style }, ...rest, children: [qrDataUrl && !hasError ? (_jsx("img", { src: qrDataUrl, alt: "QR Code", width: safeSize, height: safeSize, className: cn("block h-full w-full", imageClassName), draggable: false })) : (_jsx("div", { className: "h-full w-full animate-pulse rounded-md bg-muted/40", "aria-hidden": "true" })), logoSrc && qrDataUrl && !hasError ? (_jsx("span", { className: cn("absolute inline-flex items-center justify-center overflow-hidden", logoClassName), style: {
|
|
68
|
+
width: logoContainerSize,
|
|
69
|
+
height: logoContainerSize,
|
|
70
|
+
padding: safeLogoPadding,
|
|
71
|
+
borderRadius: logoBorderRadius,
|
|
72
|
+
backgroundColor: logoBackgroundColor
|
|
73
|
+
}, children: _jsx("img", { src: logoSrc, alt: logoAlt, width: safeLogoSize, height: safeLogoSize, className: "block h-full w-full object-contain", draggable: false }) })) : null] }));
|
|
74
|
+
}
|
|
75
|
+
SgQRCode.displayName = "SgQRCode";
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/gadgets/qr-code/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,4BAA4B,EAAE,MAAM,YAAY,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { SgQRCode } from "./SgQRCode";
|
package/dist/index.d.ts
CHANGED
|
@@ -24,8 +24,12 @@ export { SgInputOTP } from "./inputs/SgInputOTP";
|
|
|
24
24
|
export type { SgInputOTPProps, SgInputOTPRef } from "./inputs/SgInputOTP";
|
|
25
25
|
export { SgInputDate } from "./inputs/SgInputDate";
|
|
26
26
|
export { SgInputBirthDate } from "./inputs/SgInputBirthDate";
|
|
27
|
+
export { SgToggleSwitch, SgSwitch } from "./inputs/SgToggleSwitch";
|
|
28
|
+
export type { SgToggleSwitchProps, SgSwitchProps } from "./inputs/SgToggleSwitch";
|
|
27
29
|
export { SgAutocomplete } from "./inputs/SgAutocomplete";
|
|
28
30
|
export type { SgAutocompleteItem, SgAutocompleteProps } from "./inputs/SgAutocomplete";
|
|
31
|
+
export { SgCombobox } from "./inputs/SgCombobox";
|
|
32
|
+
export type { SgComboboxProps, SgComboboxSource } from "./inputs/SgCombobox";
|
|
29
33
|
export { SgTextEditor } from "./inputs/SgTextEditor";
|
|
30
34
|
export type { SgTextEditorProps, SgTextEditorSaveMeta } from "./inputs/SgTextEditor";
|
|
31
35
|
export { SgButton } from "./buttons/SgButton";
|
|
@@ -35,7 +39,7 @@ export type { SgSplitButtonProps, SgSplitButtonItem } from "./buttons/SgSplitBut
|
|
|
35
39
|
export { SgFloatActionButton } from "./buttons/SgFloatActionButton";
|
|
36
40
|
export type { SgFloatActionButtonProps, SgFABAction, FABPosition, FABSeverity, FABVariant, FABSize, FABShape, FABElevation, FABAnimation, FABAnimationTrigger, FABLayoutType } from "./buttons/SgFloatActionButton";
|
|
37
41
|
export { SgToaster } from "./commons/SgToaster";
|
|
38
|
-
export type { SgToasterProps } from "./commons/SgToaster";
|
|
42
|
+
export type { SgToasterProps, SgToasterPosition, SgToasterTypeColors, SgToasterCustomColors } from "./commons/SgToaster";
|
|
39
43
|
export { SgPopup } from "./overlay/SgPopup";
|
|
40
44
|
export type { SgPopupProps, SgPopupAction, SgPopupPlacement, SgPopupPreferPlacement, SgPopupAlign, SgPopupSeverity } from "./overlay/SgPopup";
|
|
41
45
|
export { SgDialog } from "./overlay/SgDialog";
|
|
@@ -79,6 +83,8 @@ export type { SgTimeContextValue } from "./gadgets/clock/SgTimeProvider";
|
|
|
79
83
|
export type { SgClockProps } from "./gadgets/clock/SgClock";
|
|
80
84
|
export { SgFlipDigit } from "./gadgets/flip-digit";
|
|
81
85
|
export type { SgFlipDigitProps } from "./gadgets/flip-digit";
|
|
86
|
+
export { SgQRCode } from "./gadgets/qr-code";
|
|
87
|
+
export type { SgQRCodeProps, SgQRCodeErrorCorrectionLevel } from "./gadgets/qr-code";
|
|
82
88
|
export { registerTheme, registerThemes, getTheme, hasTheme, listThemes, unregisterTheme, clearThemes, createThemeResolver, SgClockThemeProvider, useSgClockThemeResolver, ThemeLayer, resolveTheme, useDarkFlag, SgClockThemePicker, SgClockThemePreview, sgClockThemesBuiltIn } from "./gadgets/clock/themes";
|
|
83
89
|
export type { SgClockTheme, SgClockThemeRenderArgs, SgClockThemeResolveMode, SgClockThemeResolver } from "./gadgets/clock/themes";
|
|
84
90
|
export { SgWizard, SgWizardPage } from "./wizard/SgWizard";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,YAAY,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,YAAY,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,YAAY,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,YAAY,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,YAAY,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,YAAY,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAC5G,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,YAAY,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACzD,YAAY,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACvF,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACrD,YAAY,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AACrF,OAAO,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC9C,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC9E,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,YAAY,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,YAAY,EACV,wBAAwB,EAAE,WAAW,EACrC,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,aAAa,EACxH,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,YAAY,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -13,7 +13,9 @@ export { SgInputPassword } from "./inputs/SgInputPassword";
|
|
|
13
13
|
export { SgInputOTP } from "./inputs/SgInputOTP";
|
|
14
14
|
export { SgInputDate } from "./inputs/SgInputDate";
|
|
15
15
|
export { SgInputBirthDate } from "./inputs/SgInputBirthDate";
|
|
16
|
+
export { SgToggleSwitch, SgSwitch } from "./inputs/SgToggleSwitch";
|
|
16
17
|
export { SgAutocomplete } from "./inputs/SgAutocomplete";
|
|
18
|
+
export { SgCombobox } from "./inputs/SgCombobox";
|
|
17
19
|
export { SgTextEditor } from "./inputs/SgTextEditor";
|
|
18
20
|
export { SgButton } from "./buttons/SgButton";
|
|
19
21
|
export { SgSplitButton } from "./buttons/SgSplitButton";
|
|
@@ -41,6 +43,7 @@ export { SgTreeView, sgTreeFromJson, sgTreeFromJsonWithChecked } from "./layout/
|
|
|
41
43
|
export { SgTimeProvider, useSgTime } from "./gadgets/clock/SgTimeProvider";
|
|
42
44
|
export { SgClock } from "./gadgets/clock/SgClock";
|
|
43
45
|
export { SgFlipDigit } from "./gadgets/flip-digit";
|
|
46
|
+
export { SgQRCode } from "./gadgets/qr-code";
|
|
44
47
|
export { registerTheme, registerThemes, getTheme, hasTheme, listThemes, unregisterTheme, clearThemes, createThemeResolver, SgClockThemeProvider, useSgClockThemeResolver, ThemeLayer, resolveTheme, useDarkFlag, SgClockThemePicker, SgClockThemePreview, sgClockThemesBuiltIn } from "./gadgets/clock/themes";
|
|
45
48
|
export { SgWizard, SgWizardPage } from "./wizard/SgWizard";
|
|
46
49
|
export { SgEnvironmentProvider, useSgEnvironment, useSgNamespaceProvider, buildSgPersistenceKey, createLocalStorageStrategy, createApiPersistenceStrategy, createCompositePersistenceStrategy, useSgPersistence, useSgPersistentState } from "./environment/SgEnvironmentProvider";
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type SgInputTextProps } from "./SgInputText";
|
|
3
|
+
import { type SgAutocompleteItem, type SgAutocompleteSource } from "./SgAutocomplete";
|
|
4
|
+
type ComboboxValue = string | number | null;
|
|
5
|
+
type SgComboboxBaseProps = Omit<SgInputTextProps, "onChange" | "clearButton" | "iconButtons" | "inputProps" | "readOnly" | "value" | "type">;
|
|
6
|
+
export type SgComboboxSource<T = SgAutocompleteItem> = T[] | SgAutocompleteSource<T>;
|
|
7
|
+
export type SgComboboxProps<T = SgAutocompleteItem> = SgComboboxBaseProps & {
|
|
8
|
+
source: SgComboboxSource<T>;
|
|
9
|
+
value?: ComboboxValue;
|
|
10
|
+
onValueChange?: (value: ComboboxValue) => void;
|
|
11
|
+
mapItem?: (raw: T) => SgAutocompleteItem;
|
|
12
|
+
grouped?: boolean;
|
|
13
|
+
groupped?: boolean;
|
|
14
|
+
loadingText?: string;
|
|
15
|
+
emptyText?: string;
|
|
16
|
+
openOnFocus?: boolean;
|
|
17
|
+
onSelect?: (value: T) => void;
|
|
18
|
+
renderItem?: (item: SgAutocompleteItem, isActive: boolean) => React.ReactNode;
|
|
19
|
+
renderGroupHeader?: (group: string) => React.ReactNode;
|
|
20
|
+
renderFooter?: (query: string, hasResults: boolean) => React.ReactNode;
|
|
21
|
+
itemTooltip?: (item: SgAutocompleteItem) => React.ReactNode;
|
|
22
|
+
inputProps?: SgInputTextProps["inputProps"];
|
|
23
|
+
};
|
|
24
|
+
export declare function SgCombobox<T = SgAutocompleteItem>(props: Readonly<SgComboboxProps<T>>): import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
export {};
|
|
26
|
+
//# sourceMappingURL=SgCombobox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SgCombobox.d.ts","sourceRoot":"","sources":["../../src/inputs/SgCombobox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,KAAK,kBAAkB,EAAE,KAAK,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAGtF,KAAK,aAAa,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;AAE5C,KAAK,mBAAmB,GAAG,IAAI,CAC7B,gBAAgB,EAChB,UAAU,GAAG,aAAa,GAAG,aAAa,GAAG,YAAY,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAC1F,CAAC;AAEF,MAAM,MAAM,gBAAgB,CAAC,CAAC,GAAG,kBAAkB,IAAI,CAAC,EAAE,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAErF,MAAM,MAAM,eAAe,CAAC,CAAC,GAAG,kBAAkB,IAAI,mBAAmB,GAAG;IAC1E,MAAM,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,kBAAkB,CAAC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC9B,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,QAAQ,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9E,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACvD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IACvE,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5D,UAAU,CAAC,EAAE,gBAAgB,CAAC,YAAY,CAAC,CAAC;CAC7C,CAAC;AA4DF,wBAAgB,UAAU,CAAC,CAAC,GAAG,kBAAkB,EAAE,KAAK,EAAE,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,2CAobrF"}
|
|
@@ -0,0 +1,349 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { ChevronDown } from "lucide-react";
|
|
5
|
+
import { SgInputText } from "./SgInputText";
|
|
6
|
+
import { t, useComponentsI18n } from "../i18n";
|
|
7
|
+
const TYPEAHEAD_RESET_MS = 700;
|
|
8
|
+
function defaultMapItem(raw) {
|
|
9
|
+
if (typeof raw === "string" || typeof raw === "number") {
|
|
10
|
+
return {
|
|
11
|
+
id: String(raw),
|
|
12
|
+
label: String(raw)
|
|
13
|
+
};
|
|
14
|
+
}
|
|
15
|
+
if (raw && typeof raw === "object") {
|
|
16
|
+
const asRecord = raw;
|
|
17
|
+
const id = asRecord.id ?? asRecord.value ?? asRecord.key ?? asRecord.label;
|
|
18
|
+
const label = asRecord.label ?? asRecord.name ?? asRecord.description ?? asRecord.title ?? id;
|
|
19
|
+
return {
|
|
20
|
+
id: typeof id === "string" || typeof id === "number" ? id : String(id ?? ""),
|
|
21
|
+
label: String(label ?? "")
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
return {
|
|
25
|
+
id: String(raw ?? ""),
|
|
26
|
+
label: String(raw ?? "")
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
function idEquals(left, right) {
|
|
30
|
+
if (right == null)
|
|
31
|
+
return false;
|
|
32
|
+
return String(left) === String(right);
|
|
33
|
+
}
|
|
34
|
+
function findTypeAheadMatchIndex(entries, query, startIndex) {
|
|
35
|
+
const normalized = query.trim().toLowerCase();
|
|
36
|
+
if (!normalized)
|
|
37
|
+
return -1;
|
|
38
|
+
if (!entries.length)
|
|
39
|
+
return -1;
|
|
40
|
+
for (let offset = 1; offset <= entries.length; offset += 1) {
|
|
41
|
+
const index = (startIndex + offset + entries.length) % entries.length;
|
|
42
|
+
const entry = entries[index];
|
|
43
|
+
if (!entry || entry.item.disabled)
|
|
44
|
+
continue;
|
|
45
|
+
const label = entry.item.label?.toLowerCase() ?? "";
|
|
46
|
+
if (label.startsWith(normalized))
|
|
47
|
+
return index;
|
|
48
|
+
}
|
|
49
|
+
return -1;
|
|
50
|
+
}
|
|
51
|
+
export function SgCombobox(props) {
|
|
52
|
+
const { source, mapItem: mapItemProp, value, onValueChange, grouped, groupped, loadingText: loadingTextProp, emptyText: emptyTextProp, openOnFocus = false, onSelect, renderItem, renderGroupHeader, renderFooter, itemTooltip, inputProps, enabled, ...rest } = props;
|
|
53
|
+
const i18n = useComponentsI18n();
|
|
54
|
+
const loadingText = loadingTextProp ?? t(i18n, "components.autocomplete.loading");
|
|
55
|
+
const emptyText = emptyTextProp ?? t(i18n, "components.autocomplete.empty");
|
|
56
|
+
const effectiveGrouped = grouped ?? groupped ?? false;
|
|
57
|
+
const isControlled = value !== undefined;
|
|
58
|
+
const wrapperRef = React.useRef(null);
|
|
59
|
+
const ignoreBlurRef = React.useRef(false);
|
|
60
|
+
const requestIdRef = React.useRef(0);
|
|
61
|
+
const typeAheadRef = React.useRef({
|
|
62
|
+
buffer: "",
|
|
63
|
+
ts: 0
|
|
64
|
+
});
|
|
65
|
+
const [open, setOpen] = React.useState(false);
|
|
66
|
+
const [loading, setLoading] = React.useState(false);
|
|
67
|
+
const [entries, setEntries] = React.useState([]);
|
|
68
|
+
const [activeIndex, setActiveIndex] = React.useState(-1);
|
|
69
|
+
const [internalValue, setInternalValue] = React.useState(null);
|
|
70
|
+
const [lastSelectedLabel, setLastSelectedLabel] = React.useState("");
|
|
71
|
+
const resolvedValue = isControlled ? value : internalValue;
|
|
72
|
+
const isDisabled = enabled === false;
|
|
73
|
+
const mapItem = React.useCallback((raw) => {
|
|
74
|
+
if (mapItemProp)
|
|
75
|
+
return mapItemProp(raw);
|
|
76
|
+
return defaultMapItem(raw);
|
|
77
|
+
}, [mapItemProp]);
|
|
78
|
+
const refreshFromSource = React.useCallback(async () => {
|
|
79
|
+
if (Array.isArray(source)) {
|
|
80
|
+
const nextEntries = source.map((raw) => ({
|
|
81
|
+
item: mapItem(raw),
|
|
82
|
+
raw
|
|
83
|
+
}));
|
|
84
|
+
setEntries(nextEntries);
|
|
85
|
+
return nextEntries;
|
|
86
|
+
}
|
|
87
|
+
setLoading(true);
|
|
88
|
+
const currentRequest = ++requestIdRef.current;
|
|
89
|
+
try {
|
|
90
|
+
const result = source("");
|
|
91
|
+
const data = typeof result?.then === "function"
|
|
92
|
+
? await result
|
|
93
|
+
: result;
|
|
94
|
+
if (currentRequest !== requestIdRef.current)
|
|
95
|
+
return [];
|
|
96
|
+
const nextEntries = data.map((raw) => ({
|
|
97
|
+
item: mapItem(raw),
|
|
98
|
+
raw
|
|
99
|
+
}));
|
|
100
|
+
setEntries(nextEntries);
|
|
101
|
+
return nextEntries;
|
|
102
|
+
}
|
|
103
|
+
catch {
|
|
104
|
+
if (currentRequest !== requestIdRef.current)
|
|
105
|
+
return [];
|
|
106
|
+
setEntries([]);
|
|
107
|
+
return [];
|
|
108
|
+
}
|
|
109
|
+
finally {
|
|
110
|
+
if (currentRequest === requestIdRef.current) {
|
|
111
|
+
setLoading(false);
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
}, [mapItem, source]);
|
|
115
|
+
React.useEffect(() => {
|
|
116
|
+
if (!Array.isArray(source))
|
|
117
|
+
return;
|
|
118
|
+
setEntries(source.map((raw) => ({
|
|
119
|
+
item: mapItem(raw),
|
|
120
|
+
raw
|
|
121
|
+
})));
|
|
122
|
+
}, [mapItem, source]);
|
|
123
|
+
const selectedEntry = React.useMemo(() => entries.find((entry) => idEquals(entry.item.id, resolvedValue)), [entries, resolvedValue]);
|
|
124
|
+
React.useEffect(() => {
|
|
125
|
+
if (resolvedValue == null || resolvedValue === "") {
|
|
126
|
+
if (lastSelectedLabel !== "") {
|
|
127
|
+
setLastSelectedLabel("");
|
|
128
|
+
}
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
if (selectedEntry) {
|
|
132
|
+
if (lastSelectedLabel !== selectedEntry.item.label) {
|
|
133
|
+
setLastSelectedLabel(selectedEntry.item.label);
|
|
134
|
+
}
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
if (lastSelectedLabel !== "") {
|
|
138
|
+
setLastSelectedLabel("");
|
|
139
|
+
}
|
|
140
|
+
void refreshFromSource();
|
|
141
|
+
}, [lastSelectedLabel, refreshFromSource, resolvedValue, selectedEntry]);
|
|
142
|
+
const displayedValue = resolvedValue == null || resolvedValue === ""
|
|
143
|
+
? ""
|
|
144
|
+
: selectedEntry?.item.label ?? lastSelectedLabel;
|
|
145
|
+
const setSelectedValue = React.useCallback((nextValue) => {
|
|
146
|
+
if (!isControlled) {
|
|
147
|
+
setInternalValue(nextValue);
|
|
148
|
+
}
|
|
149
|
+
onValueChange?.(nextValue);
|
|
150
|
+
}, [isControlled, onValueChange]);
|
|
151
|
+
const closeDropdown = React.useCallback(() => {
|
|
152
|
+
setOpen(false);
|
|
153
|
+
setActiveIndex(-1);
|
|
154
|
+
typeAheadRef.current = { buffer: "", ts: 0 };
|
|
155
|
+
}, []);
|
|
156
|
+
const openDropdown = React.useCallback(() => {
|
|
157
|
+
if (isDisabled)
|
|
158
|
+
return;
|
|
159
|
+
setOpen(true);
|
|
160
|
+
void refreshFromSource();
|
|
161
|
+
}, [isDisabled, refreshFromSource]);
|
|
162
|
+
const selectIndex = React.useCallback((index) => {
|
|
163
|
+
const entry = entries[index];
|
|
164
|
+
if (!entry || entry.item.disabled)
|
|
165
|
+
return;
|
|
166
|
+
setSelectedValue(entry.item.id);
|
|
167
|
+
setLastSelectedLabel(entry.item.label);
|
|
168
|
+
onSelect?.(entry.raw);
|
|
169
|
+
closeDropdown();
|
|
170
|
+
}, [closeDropdown, entries, onSelect, setSelectedValue]);
|
|
171
|
+
const handleTypeAhead = React.useCallback(async (typedKey) => {
|
|
172
|
+
const key = typedKey.toLowerCase();
|
|
173
|
+
const now = Date.now();
|
|
174
|
+
const previous = typeAheadRef.current;
|
|
175
|
+
const buffer = now - previous.ts > TYPEAHEAD_RESET_MS
|
|
176
|
+
? key
|
|
177
|
+
: `${previous.buffer}${key}`;
|
|
178
|
+
typeAheadRef.current = {
|
|
179
|
+
buffer,
|
|
180
|
+
ts: now
|
|
181
|
+
};
|
|
182
|
+
let availableEntries = entries;
|
|
183
|
+
if (!availableEntries.length) {
|
|
184
|
+
availableEntries = await refreshFromSource();
|
|
185
|
+
}
|
|
186
|
+
if (!availableEntries.length)
|
|
187
|
+
return;
|
|
188
|
+
const selectedIndex = availableEntries.findIndex((entry) => idEquals(entry.item.id, resolvedValue));
|
|
189
|
+
const baseIndex = selectedIndex >= 0 ? selectedIndex : activeIndex;
|
|
190
|
+
let nextIndex = findTypeAheadMatchIndex(availableEntries, buffer, baseIndex);
|
|
191
|
+
if (nextIndex < 0 && buffer.length > 1) {
|
|
192
|
+
typeAheadRef.current = { buffer: key, ts: now };
|
|
193
|
+
nextIndex = findTypeAheadMatchIndex(availableEntries, key, baseIndex);
|
|
194
|
+
}
|
|
195
|
+
if (nextIndex < 0)
|
|
196
|
+
return;
|
|
197
|
+
const nextEntry = availableEntries[nextIndex];
|
|
198
|
+
if (!nextEntry || nextEntry.item.disabled)
|
|
199
|
+
return;
|
|
200
|
+
setSelectedValue(nextEntry.item.id);
|
|
201
|
+
setLastSelectedLabel(nextEntry.item.label);
|
|
202
|
+
onSelect?.(nextEntry.raw);
|
|
203
|
+
if (open) {
|
|
204
|
+
setActiveIndex(nextIndex);
|
|
205
|
+
}
|
|
206
|
+
}, [activeIndex, entries, onSelect, open, refreshFromSource, resolvedValue, setSelectedValue]);
|
|
207
|
+
React.useEffect(() => {
|
|
208
|
+
if (!open)
|
|
209
|
+
return;
|
|
210
|
+
const handleOutside = (event) => {
|
|
211
|
+
if (wrapperRef.current?.contains(event.target))
|
|
212
|
+
return;
|
|
213
|
+
closeDropdown();
|
|
214
|
+
};
|
|
215
|
+
document.addEventListener("mousedown", handleOutside);
|
|
216
|
+
return () => document.removeEventListener("mousedown", handleOutside);
|
|
217
|
+
}, [closeDropdown, open]);
|
|
218
|
+
React.useEffect(() => {
|
|
219
|
+
if (!open)
|
|
220
|
+
return;
|
|
221
|
+
if (!entries.length) {
|
|
222
|
+
setActiveIndex(-1);
|
|
223
|
+
return;
|
|
224
|
+
}
|
|
225
|
+
const selectedIndex = entries.findIndex((entry) => idEquals(entry.item.id, resolvedValue));
|
|
226
|
+
if (selectedIndex >= 0) {
|
|
227
|
+
setActiveIndex(selectedIndex);
|
|
228
|
+
return;
|
|
229
|
+
}
|
|
230
|
+
setActiveIndex(0);
|
|
231
|
+
}, [entries, open, resolvedValue]);
|
|
232
|
+
const groupedEntries = React.useMemo(() => {
|
|
233
|
+
if (!effectiveGrouped)
|
|
234
|
+
return null;
|
|
235
|
+
const map = new Map();
|
|
236
|
+
entries.forEach((entry, index) => {
|
|
237
|
+
const groupKey = entry.item.group ?? "";
|
|
238
|
+
if (!map.has(groupKey))
|
|
239
|
+
map.set(groupKey, []);
|
|
240
|
+
map.get(groupKey)?.push({ entry, index });
|
|
241
|
+
});
|
|
242
|
+
return Array.from(map.entries()).map(([group, list]) => ({
|
|
243
|
+
group,
|
|
244
|
+
list
|
|
245
|
+
}));
|
|
246
|
+
}, [effectiveGrouped, entries]);
|
|
247
|
+
const dropdownButton = (_jsx("button", { type: "button", className: "text-foreground/60 hover:text-foreground", onMouseDown: (event) => {
|
|
248
|
+
event.preventDefault();
|
|
249
|
+
ignoreBlurRef.current = true;
|
|
250
|
+
}, onClick: () => {
|
|
251
|
+
if (open) {
|
|
252
|
+
closeDropdown();
|
|
253
|
+
return;
|
|
254
|
+
}
|
|
255
|
+
openDropdown();
|
|
256
|
+
}, "aria-label": "Abrir lista", children: _jsx(ChevronDown, { size: 16 }) }));
|
|
257
|
+
return (_jsxs("div", { className: "relative", ref: wrapperRef, children: [_jsx(SgInputText, { ...rest, enabled: enabled, clearButton: false, readOnly: true, iconButtons: [dropdownButton], inputProps: {
|
|
258
|
+
...inputProps,
|
|
259
|
+
value: displayedValue,
|
|
260
|
+
onMouseDown: (event) => {
|
|
261
|
+
inputProps?.onMouseDown?.(event);
|
|
262
|
+
if (isDisabled)
|
|
263
|
+
return;
|
|
264
|
+
if (!open) {
|
|
265
|
+
openDropdown();
|
|
266
|
+
}
|
|
267
|
+
},
|
|
268
|
+
onFocus: (event) => {
|
|
269
|
+
inputProps?.onFocus?.(event);
|
|
270
|
+
if (openOnFocus) {
|
|
271
|
+
openDropdown();
|
|
272
|
+
}
|
|
273
|
+
},
|
|
274
|
+
onBlur: (event) => {
|
|
275
|
+
inputProps?.onBlur?.(event);
|
|
276
|
+
if (event.relatedTarget && wrapperRef.current?.contains(event.relatedTarget)) {
|
|
277
|
+
return;
|
|
278
|
+
}
|
|
279
|
+
if (ignoreBlurRef.current) {
|
|
280
|
+
setTimeout(() => {
|
|
281
|
+
ignoreBlurRef.current = false;
|
|
282
|
+
}, 0);
|
|
283
|
+
return;
|
|
284
|
+
}
|
|
285
|
+
closeDropdown();
|
|
286
|
+
},
|
|
287
|
+
onKeyDown: (event) => {
|
|
288
|
+
inputProps?.onKeyDown?.(event);
|
|
289
|
+
if (event.defaultPrevented)
|
|
290
|
+
return;
|
|
291
|
+
if (isDisabled)
|
|
292
|
+
return;
|
|
293
|
+
if (!event.ctrlKey && !event.altKey && !event.metaKey && event.key.length === 1 && event.key !== " ") {
|
|
294
|
+
event.preventDefault();
|
|
295
|
+
void handleTypeAhead(event.key);
|
|
296
|
+
return;
|
|
297
|
+
}
|
|
298
|
+
if (event.key === "Tab") {
|
|
299
|
+
closeDropdown();
|
|
300
|
+
return;
|
|
301
|
+
}
|
|
302
|
+
if (event.key === "Escape") {
|
|
303
|
+
event.preventDefault();
|
|
304
|
+
closeDropdown();
|
|
305
|
+
return;
|
|
306
|
+
}
|
|
307
|
+
if (event.key === "ArrowDown") {
|
|
308
|
+
event.preventDefault();
|
|
309
|
+
if (!open) {
|
|
310
|
+
openDropdown();
|
|
311
|
+
return;
|
|
312
|
+
}
|
|
313
|
+
setActiveIndex((prev) => Math.min(prev + 1, entries.length - 1));
|
|
314
|
+
return;
|
|
315
|
+
}
|
|
316
|
+
if (event.key === "ArrowUp") {
|
|
317
|
+
event.preventDefault();
|
|
318
|
+
if (!open) {
|
|
319
|
+
openDropdown();
|
|
320
|
+
return;
|
|
321
|
+
}
|
|
322
|
+
setActiveIndex((prev) => Math.max(prev - 1, 0));
|
|
323
|
+
return;
|
|
324
|
+
}
|
|
325
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
326
|
+
event.preventDefault();
|
|
327
|
+
if (!open) {
|
|
328
|
+
openDropdown();
|
|
329
|
+
return;
|
|
330
|
+
}
|
|
331
|
+
if (activeIndex >= 0) {
|
|
332
|
+
selectIndex(activeIndex);
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
}
|
|
336
|
+
} }), open && !isDisabled ? (_jsxs("div", { className: "absolute left-0 right-0 z-30 mt-1 overflow-hidden rounded-md border border-border bg-white shadow-lg", children: [_jsx("div", { className: "max-h-64 overflow-auto", children: loading ? (_jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: loadingText })) : entries.length === 0 ? (_jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: emptyText })) : groupedEntries ? (groupedEntries.map(({ group, list }) => (_jsxs("div", { className: "border-b border-border last:border-b-0", children: [_jsx("div", { className: "px-3 py-1 text-xs font-semibold text-muted-foreground", children: renderGroupHeader ? renderGroupHeader(group) : group || " " }), list.map(({ entry, index }) => {
|
|
337
|
+
const isActive = activeIndex === index;
|
|
338
|
+
return (_jsxs("div", { className: `group relative cursor-pointer px-3 py-2 text-sm ${isActive ? "bg-muted/60" : ""} ${entry.item.disabled ? "cursor-not-allowed opacity-50" : "hover:bg-muted/40"}`, onMouseEnter: () => setActiveIndex(index), onMouseDown: (event) => {
|
|
339
|
+
event.preventDefault();
|
|
340
|
+
ignoreBlurRef.current = true;
|
|
341
|
+
}, onClick: () => selectIndex(index), children: [renderItem ? renderItem(entry.item, isActive) : entry.item.label, itemTooltip ? (_jsx("div", { className: "pointer-events-none absolute left-full top-1/2 z-20 ml-2 -translate-y-1/2 rounded border border-border bg-white px-2 py-1 text-xs shadow-md opacity-0 transition-opacity group-hover:opacity-100", children: itemTooltip(entry.item) })) : null] }, entry.item.id));
|
|
342
|
+
})] }, group || "default")))) : (entries.map((entry, index) => {
|
|
343
|
+
const isActive = activeIndex === index;
|
|
344
|
+
return (_jsxs("div", { className: `group relative cursor-pointer px-3 py-2 text-sm ${isActive ? "bg-muted/60" : ""} ${entry.item.disabled ? "cursor-not-allowed opacity-50" : "hover:bg-muted/40"}`, onMouseEnter: () => setActiveIndex(index), onMouseDown: (event) => {
|
|
345
|
+
event.preventDefault();
|
|
346
|
+
ignoreBlurRef.current = true;
|
|
347
|
+
}, onClick: () => selectIndex(index), children: [renderItem ? renderItem(entry.item, isActive) : entry.item.label, itemTooltip ? (_jsx("div", { className: "pointer-events-none absolute left-full top-1/2 z-20 ml-2 -translate-y-1/2 rounded border border-border bg-white px-2 py-1 text-xs shadow-md opacity-0 transition-opacity group-hover:opacity-100", children: itemTooltip(entry.item) })) : null] }, entry.item.id));
|
|
348
|
+
})) }), renderFooter ? (_jsx("div", { className: "border-t border-border bg-white px-3 py-2", children: renderFooter("", entries.length > 0) })) : null] })) : null] }));
|
|
349
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SgInputOTP.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputOTP.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAGV,WAAW,EACX,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAsB5C,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,WAAW,EAAE,MAAM,MAAM,CAAC;IAC1B,cAAc,EAAE,MAAM,MAAM,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,IAAI,CACf,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,OAAO,GAAG,cAAc,CACzB,GAAG;QACF,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACnC,CAAC;IACF,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,MAAM,GAAG,IAAI,CAAC;IACtE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;CACtC,GAAG,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"SgInputOTP.d.ts","sourceRoot":"","sources":["../../src/inputs/SgInputOTP.tsx"],"names":[],"mappings":"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"}
|
|
@@ -409,7 +409,7 @@ const SgInputOTPBase = React.forwardRef(function SgInputOTPBase(props, ref) {
|
|
|
409
409
|
const isDisabled = enabled === false || Boolean(inputDisabled);
|
|
410
410
|
const isReadOnly = readOnly || Boolean(inputReadOnly);
|
|
411
411
|
const mergedSlotClass = [
|
|
412
|
-
"h-12 w-11
|
|
412
|
+
"h-12 w-11 border bg-white px-0 text-center text-base font-medium shadow-sm outline-none transition-all",
|
|
413
413
|
hasError
|
|
414
414
|
? "border-[hsl(var(--destructive))] focus:border-[hsl(var(--destructive))] focus:ring-2 focus:ring-[hsl(var(--destructive)/0.25)]"
|
|
415
415
|
: "border-border focus:border-[hsl(var(--primary))] focus:ring-2 focus:ring-[hsl(var(--primary)/0.25)]",
|
|
@@ -448,7 +448,14 @@ const SgInputOTPBase = React.forwardRef(function SgInputOTPBase(props, ref) {
|
|
|
448
448
|
const computedPattern = token.slotKind === "digit"
|
|
449
449
|
? "[0-9]*"
|
|
450
450
|
: slotPattern ?? "[A-Za-z0-9]*";
|
|
451
|
-
|
|
451
|
+
const slotShapeClass = slotCount === 1
|
|
452
|
+
? "rounded-2xl"
|
|
453
|
+
: slotIndex === 0
|
|
454
|
+
? "rounded-l-2xl rounded-r-md"
|
|
455
|
+
: slotIndex === slotCount - 1
|
|
456
|
+
? "rounded-r-2xl rounded-l-md"
|
|
457
|
+
: "rounded-md";
|
|
458
|
+
return (_createElement("input", { ...restSlotInputProps, key: `${id}-slot-${slotIndex}`, id: `${id}-slot-${slotIndex}`, type: "text", value: slotValue, maxLength: 1, autoComplete: slotIndex === 0 ? slotAutoComplete ?? "one-time-code" : "off", autoFocus: slotIndex === 0 ? slotAutoFocus : false, inputMode: computedInputMode, pattern: computedPattern, className: `${mergedSlotClass} ${slotShapeClass}`, disabled: isDisabled, readOnly: isReadOnly, "aria-label": labelText ? `${labelText} ${slotIndex + 1}` : `OTP ${slotIndex + 1}`, ref: (node) => setSlotRef(slotIndex, node), onFocus: (event) => {
|
|
452
459
|
event.currentTarget.select();
|
|
453
460
|
onSlotInputFocus?.(event);
|
|
454
461
|
}, onBlur: (event) => {
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { FieldValues, RegisterOptions, UseFormRegister } from "react-hook-form";
|
|
3
|
+
import type { RhfFieldProps } from "../rhf";
|
|
4
|
+
export type SgToggleSwitchProps = {
|
|
5
|
+
id: string;
|
|
6
|
+
label?: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
error?: string;
|
|
9
|
+
className?: string;
|
|
10
|
+
labelClassName?: string;
|
|
11
|
+
switchClassName?: string;
|
|
12
|
+
trackClassName?: string;
|
|
13
|
+
thumbClassName?: string;
|
|
14
|
+
onIcon?: React.ReactNode;
|
|
15
|
+
offIcon?: React.ReactNode;
|
|
16
|
+
checked?: boolean;
|
|
17
|
+
defaultChecked?: boolean;
|
|
18
|
+
width?: number | string;
|
|
19
|
+
enabled?: boolean;
|
|
20
|
+
readOnly?: boolean;
|
|
21
|
+
required?: boolean;
|
|
22
|
+
requiredMessage?: string;
|
|
23
|
+
validateOnBlur?: boolean;
|
|
24
|
+
validation?: (checked: boolean) => string | null;
|
|
25
|
+
onValidation?: (message: string | null) => void;
|
|
26
|
+
onChange?: (checked: boolean) => void;
|
|
27
|
+
inputProps?: React.InputHTMLAttributes<HTMLInputElement> & {
|
|
28
|
+
ref?: React.Ref<HTMLInputElement>;
|
|
29
|
+
};
|
|
30
|
+
register?: UseFormRegister<FieldValues>;
|
|
31
|
+
rules?: RegisterOptions<FieldValues>;
|
|
32
|
+
} & RhfFieldProps;
|
|
33
|
+
export declare function SgToggleSwitch(props: Readonly<SgToggleSwitchProps>): import("react/jsx-runtime").JSX.Element;
|
|
34
|
+
export declare const SgSwitch: typeof SgToggleSwitch;
|
|
35
|
+
export type SgSwitchProps = SgToggleSwitchProps;
|
|
36
|
+
//# sourceMappingURL=SgToggleSwitch.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SgToggleSwitch.d.ts","sourceRoot":"","sources":["../../src/inputs/SgToggleSwitch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAGV,WAAW,EACX,eAAe,EACf,eAAe,EAChB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAuC5C,MAAM,MAAM,mBAAmB,GAAG;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,GAAG,IAAI,CAAC;IACjD,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;QACzD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KACnC,CAAC;IACF,QAAQ,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;CACtC,GAAG,aAAa,CAAC;AAsNlB,wBAAgB,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,mBAAmB,CAAC,2CAmDlE;AAED,eAAO,MAAM,QAAQ,uBAAiB,CAAC;AACvC,MAAM,MAAM,aAAa,GAAG,mBAAmB,CAAC"}
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import React from "react";
|
|
4
|
+
import { Controller } from "react-hook-form";
|
|
5
|
+
import { t, useComponentsI18n } from "../i18n";
|
|
6
|
+
function cn(...parts) {
|
|
7
|
+
return parts.filter(Boolean).join(" ");
|
|
8
|
+
}
|
|
9
|
+
function toBoolean(value, fallback = false) {
|
|
10
|
+
if (typeof value === "boolean")
|
|
11
|
+
return value;
|
|
12
|
+
if (typeof value === "number")
|
|
13
|
+
return value !== 0;
|
|
14
|
+
if (typeof value === "string") {
|
|
15
|
+
const normalized = value.trim().toLowerCase();
|
|
16
|
+
return normalized === "true" || normalized === "1" || normalized === "on" || normalized === "yes";
|
|
17
|
+
}
|
|
18
|
+
return fallback;
|
|
19
|
+
}
|
|
20
|
+
function mergeRefs(...refs) {
|
|
21
|
+
return (node) => {
|
|
22
|
+
for (const ref of refs) {
|
|
23
|
+
if (!ref)
|
|
24
|
+
continue;
|
|
25
|
+
if (typeof ref === "function") {
|
|
26
|
+
ref(node);
|
|
27
|
+
}
|
|
28
|
+
else if (typeof ref === "object" && "current" in ref) {
|
|
29
|
+
ref.current = node;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
}
|
|
34
|
+
function ErrorText(props) {
|
|
35
|
+
if (!props.message)
|
|
36
|
+
return null;
|
|
37
|
+
return (_jsx("p", { id: props.id, "data-sg-error": true, className: "text-xs text-red-600", children: props.message }));
|
|
38
|
+
}
|
|
39
|
+
function mergeInputPropsWithField(inputProps, field) {
|
|
40
|
+
return {
|
|
41
|
+
...inputProps,
|
|
42
|
+
checked: toBoolean(field.value, false),
|
|
43
|
+
onChange: (event) => {
|
|
44
|
+
field.onChange(event.currentTarget.checked);
|
|
45
|
+
inputProps?.onChange?.(event);
|
|
46
|
+
},
|
|
47
|
+
onBlur: (event) => {
|
|
48
|
+
field.onBlur();
|
|
49
|
+
inputProps?.onBlur?.(event);
|
|
50
|
+
},
|
|
51
|
+
ref: (node) => {
|
|
52
|
+
field.ref(node);
|
|
53
|
+
const ref = inputProps?.ref;
|
|
54
|
+
if (!ref)
|
|
55
|
+
return;
|
|
56
|
+
if (typeof ref === "function") {
|
|
57
|
+
ref(node);
|
|
58
|
+
}
|
|
59
|
+
else if (ref && typeof ref === "object" && "current" in ref) {
|
|
60
|
+
ref.current = node;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
};
|
|
64
|
+
}
|
|
65
|
+
function SgToggleSwitchBase(props) {
|
|
66
|
+
const i18n = useComponentsI18n();
|
|
67
|
+
const inputProps = props.inputProps ?? {};
|
|
68
|
+
const { checked: inputChecked, defaultChecked: inputDefaultChecked, onChange: inputOnChange, onBlur: inputOnBlur, onClick: inputOnClick, disabled: inputDisabled, readOnly: inputReadOnly, className: inputClassName, ref: inputRef, style: inputStyle, ...restInputProps } = inputProps;
|
|
69
|
+
const isControlled = props.checked !== undefined || inputChecked !== undefined;
|
|
70
|
+
const [internalChecked, setInternalChecked] = React.useState(() => toBoolean(props.defaultChecked ?? inputDefaultChecked, false));
|
|
71
|
+
const [internalError, setInternalError] = React.useState(null);
|
|
72
|
+
const [hasInteracted, setHasInteracted] = React.useState(false);
|
|
73
|
+
const inputNodeRef = React.useRef(null);
|
|
74
|
+
const errorId = `${props.id}-error`;
|
|
75
|
+
const checked = isControlled ? toBoolean(props.checked ?? inputChecked, false) : internalChecked;
|
|
76
|
+
const isReadOnly = Boolean(props.readOnly ?? inputReadOnly);
|
|
77
|
+
const isDisabled = props.enabled === false || Boolean(inputDisabled);
|
|
78
|
+
const setRefs = React.useMemo(() => mergeRefs((node) => {
|
|
79
|
+
inputNodeRef.current = node;
|
|
80
|
+
}, inputRef), [inputRef]);
|
|
81
|
+
React.useEffect(() => {
|
|
82
|
+
if (isControlled)
|
|
83
|
+
return;
|
|
84
|
+
const domChecked = inputNodeRef.current?.checked ?? false;
|
|
85
|
+
setInternalChecked((prev) => (prev === domChecked ? prev : domChecked));
|
|
86
|
+
}, [isControlled]);
|
|
87
|
+
const runValidation = React.useCallback((nextChecked) => {
|
|
88
|
+
if ((props.required ?? false) && !nextChecked) {
|
|
89
|
+
const message = props.requiredMessage ?? t(i18n, "components.inputs.required");
|
|
90
|
+
setInternalError(message);
|
|
91
|
+
props.onValidation?.(message);
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
94
|
+
if (props.validation) {
|
|
95
|
+
const message = props.validation(nextChecked);
|
|
96
|
+
setInternalError(message);
|
|
97
|
+
props.onValidation?.(message ?? null);
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
setInternalError(null);
|
|
101
|
+
props.onValidation?.(null);
|
|
102
|
+
}, [i18n, props]);
|
|
103
|
+
const handleChange = (event) => {
|
|
104
|
+
if (isReadOnly) {
|
|
105
|
+
event.preventDefault();
|
|
106
|
+
event.currentTarget.checked = checked;
|
|
107
|
+
return;
|
|
108
|
+
}
|
|
109
|
+
const nextChecked = event.currentTarget.checked;
|
|
110
|
+
if (!isControlled)
|
|
111
|
+
setInternalChecked(nextChecked);
|
|
112
|
+
setHasInteracted(true);
|
|
113
|
+
if (props.validateOnBlur === false) {
|
|
114
|
+
runValidation(nextChecked);
|
|
115
|
+
}
|
|
116
|
+
inputOnChange?.(event);
|
|
117
|
+
props.onChange?.(nextChecked);
|
|
118
|
+
};
|
|
119
|
+
const handleBlur = (event) => {
|
|
120
|
+
if ((props.validateOnBlur ?? true) || hasInteracted) {
|
|
121
|
+
runValidation(event.currentTarget.checked);
|
|
122
|
+
}
|
|
123
|
+
inputOnBlur?.(event);
|
|
124
|
+
};
|
|
125
|
+
const handleClick = (event) => {
|
|
126
|
+
if (isReadOnly) {
|
|
127
|
+
event.preventDefault();
|
|
128
|
+
return;
|
|
129
|
+
}
|
|
130
|
+
inputOnClick?.(event);
|
|
131
|
+
};
|
|
132
|
+
const hasError = Boolean(props.error ?? internalError);
|
|
133
|
+
const resolvedBorderRadius = 9999;
|
|
134
|
+
const switchWidth = props.width
|
|
135
|
+
? typeof props.width === "number"
|
|
136
|
+
? `${props.width}px`
|
|
137
|
+
: props.width
|
|
138
|
+
: undefined;
|
|
139
|
+
return (_jsxs("div", { className: cn("space-y-1", props.className), style: switchWidth ? { width: switchWidth } : undefined, children: [_jsxs("label", { htmlFor: props.id, className: cn("inline-flex items-start gap-3 select-none", isDisabled
|
|
140
|
+
? "cursor-not-allowed opacity-70"
|
|
141
|
+
: isReadOnly
|
|
142
|
+
? "cursor-default"
|
|
143
|
+
: "cursor-pointer"), children: [_jsx("input", { id: props.id, type: "checkbox", role: "switch", "aria-invalid": hasError, "aria-describedby": hasError ? errorId : undefined, "aria-label": props.label ? undefined : props.id, checked: isControlled ? checked : undefined, defaultChecked: isControlled ? undefined : toBoolean(props.defaultChecked ?? inputDefaultChecked, false), disabled: isDisabled, readOnly: isReadOnly, ...restInputProps, className: cn("peer sr-only", inputClassName), style: inputStyle, ref: setRefs, onChange: handleChange, onBlur: handleBlur, onClick: handleClick }), _jsxs("span", { className: cn("relative inline-flex h-6 w-11 items-center", props.switchClassName), children: [_jsx("span", { "aria-hidden": "true", className: cn("absolute inset-0 rounded-full border transition-colors duration-200", checked
|
|
144
|
+
? hasError
|
|
145
|
+
? "border-[hsl(var(--destructive))] bg-[hsl(var(--destructive)/0.2)]"
|
|
146
|
+
: "border-[hsl(var(--primary))] bg-[hsl(var(--primary))]"
|
|
147
|
+
: hasError
|
|
148
|
+
? "border-[hsl(var(--destructive))] bg-[hsl(var(--destructive)/0.05)]"
|
|
149
|
+
: "border-border bg-muted", "peer-focus-visible:ring-2 peer-focus-visible:ring-[hsl(var(--primary)/0.25)]", hasError ? "peer-focus-visible:ring-[hsl(var(--destructive)/0.25)]" : undefined, props.trackClassName), style: { borderRadius: resolvedBorderRadius } }), _jsx("span", { "aria-hidden": "true", className: cn("pointer-events-none relative z-10 inline-flex size-5 items-center justify-center rounded-full bg-white text-[11px] text-foreground/70 shadow-sm transition-transform duration-200", checked ? "translate-x-5" : "translate-x-0", props.thumbClassName), children: checked ? props.onIcon ?? null : props.offIcon ?? null })] }), props.label ? (_jsxs("span", { className: cn("pt-0.5 text-sm text-foreground", props.labelClassName), children: [props.label, props.required ? _jsx("span", { className: "ml-1 text-[hsl(var(--destructive))]", children: "*" }) : null, props.description ? (_jsx("span", { className: "mt-0.5 block text-xs text-muted-foreground", children: props.description })) : null] })) : null] }), _jsx(ErrorText, { id: errorId, message: props.error ?? internalError ?? undefined })] }));
|
|
150
|
+
}
|
|
151
|
+
export function SgToggleSwitch(props) {
|
|
152
|
+
const { control, name, register, rules, ...rest } = props;
|
|
153
|
+
if (name && register) {
|
|
154
|
+
const reg = register(name, rules);
|
|
155
|
+
return (_jsx(SgToggleSwitchBase, { ...rest, inputProps: {
|
|
156
|
+
...rest.inputProps,
|
|
157
|
+
name,
|
|
158
|
+
onChange: (event) => {
|
|
159
|
+
reg.onChange(event);
|
|
160
|
+
rest.inputProps?.onChange?.(event);
|
|
161
|
+
},
|
|
162
|
+
onBlur: (event) => {
|
|
163
|
+
reg.onBlur(event);
|
|
164
|
+
rest.inputProps?.onBlur?.(event);
|
|
165
|
+
},
|
|
166
|
+
ref: mergeRefs(reg.ref, rest.inputProps?.ref)
|
|
167
|
+
} }));
|
|
168
|
+
}
|
|
169
|
+
if (control && name) {
|
|
170
|
+
return (_jsx(Controller, { name: name, control: control, render: ({ field, fieldState }) => (_jsx(SgToggleSwitchBase, { ...rest, error: rest.error ?? fieldState.error?.message, inputProps: mergeInputPropsWithField(rest.inputProps, field) })) }));
|
|
171
|
+
}
|
|
172
|
+
return _jsx(SgToggleSwitchBase, { ...rest });
|
|
173
|
+
}
|
|
174
|
+
export const SgSwitch = SgToggleSwitch;
|
|
@@ -7,7 +7,7 @@ import { SgCard } from "../layout/SgCard";
|
|
|
7
7
|
function cn(...parts) {
|
|
8
8
|
return parts.filter(Boolean).join(" ");
|
|
9
9
|
}
|
|
10
|
-
const DEFAULT_SEEDGRID_DEPENDENCY = "0.2.
|
|
10
|
+
const DEFAULT_SEEDGRID_DEPENDENCY = "0.2.9";
|
|
11
11
|
const DEFAULT_SEEDGRID_PEER_DEPENDENCIES = {
|
|
12
12
|
"@codesandbox/sandpack-react": "^2.20.0",
|
|
13
13
|
"react-hook-form": "^7.0.0",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seedgrid/fe-components",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.10",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -38,6 +38,8 @@
|
|
|
38
38
|
"@tiptap/extension-font-family": "^2.9.1"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
+
"react": "19.0.0",
|
|
42
|
+
"react-dom": "19.0.0",
|
|
41
43
|
"react-hook-form": "^7.0.0",
|
|
42
44
|
"@codesandbox/sandpack-react": "^2.20.0",
|
|
43
45
|
"lucide-react": "^0.468.0",
|
|
@@ -52,6 +54,10 @@
|
|
|
52
54
|
"@tiptap/extension-highlight": "^2.9.1",
|
|
53
55
|
"@tiptap/extension-subscript": "^2.9.1",
|
|
54
56
|
"@tiptap/extension-superscript": "^2.9.1",
|
|
55
|
-
"@tiptap/extension-font-family": "^2.9.1"
|
|
57
|
+
"@tiptap/extension-font-family": "^2.9.1",
|
|
58
|
+
"@types/qrcode": "^1.5.6"
|
|
59
|
+
},
|
|
60
|
+
"dependencies": {
|
|
61
|
+
"qrcode": "^1.5.4"
|
|
56
62
|
}
|
|
57
63
|
}
|