@bigtablet/design-system 1.22.2 → 1.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/index.css +345 -285
  2. package/dist/index.d.ts +374 -88
  3. package/dist/index.js +416 -308
  4. package/dist/next.css +28 -28
  5. package/dist/styles/scss/_a11y.scss +4 -4
  6. package/dist/styles/scss/_breakpoints.scss +19 -13
  7. package/dist/styles/scss/_colors.scss +67 -55
  8. package/dist/styles/scss/_radius.scss +6 -5
  9. package/dist/styles/scss/_shadows.scss +5 -20
  10. package/dist/styles/scss/_spacing.scss +14 -12
  11. package/dist/styles/scss/_typography.scss +61 -64
  12. package/dist/styles/scss/_z-index.scss +6 -3
  13. package/dist/vanilla/bigtablet.min.css +1 -1
  14. package/dist/vanilla/bigtablet.min.js +12 -12
  15. package/package.json +12 -11
package/dist/index.js CHANGED
@@ -1,102 +1,186 @@
1
1
  "use client";
2
2
  import './index.css';
3
- import * as React7 from 'react';
3
+ import * as React6 from 'react';
4
4
  import { createContext, useContext, useState, useCallback } from 'react';
5
5
  import { jsxs, jsx } from 'react/jsx-runtime';
6
6
  import { createPortal } from 'react-dom';
7
7
  import { ChevronDown, Check, X, Bell, Info, AlertTriangle, XCircle, CheckCircle2 } from 'lucide-react';
8
8
 
9
9
  // src/styles/ts/colors.ts
10
+ var baseColors = {
11
+ brandPrimary: "#121212",
12
+ blue600: "#1A73E8",
13
+ neutral0: "#FFFFFF",
14
+ neutral50: "#F4F4F4",
15
+ neutral200: "#E5E5E5",
16
+ neutral300: "#999999",
17
+ neutral400: "#B3B3B3",
18
+ neutral500: "#888888",
19
+ neutral700: "#666666",
20
+ neutral900: "#121212",
21
+ statusError: "#EF4444",
22
+ statusSuccess: "#10B981",
23
+ statusWarning: "#F59E0B",
24
+ statusInfo: "#3B82F6",
25
+ alphaBlack5: "rgba(0, 0, 0, 0.05)",
26
+ alphaBlack8: "rgba(0, 0, 0, 0.08)",
27
+ alphaBlack12: "rgba(26, 26, 26, 0.12)",
28
+ alphaBlack38: "rgba(26, 26, 26, 0.38)",
29
+ alphaBlack50: "rgba(0, 0, 0, 0.50)",
30
+ alphaWhite5: "rgba(255, 255, 255, 0.05)",
31
+ alphaWhite8: "rgba(255, 255, 255, 0.08)",
32
+ alphaWhite12: "rgba(255, 255, 255, 0.12)"
33
+ };
10
34
  var colors = {
11
- primary: "#000000",
12
- primaryHover: "#333333",
13
- background: "#ffffff",
14
- backgroundSecondary: "#fafafa",
15
- backgroundNeutral: "#f3f3f3",
16
- backgroundMuted: "#f0f0f0",
17
- textPrimary: "#1a1a1a",
18
- textSecondary: "#666666",
19
- textTertiary: "#999999",
20
- border: "#e5e5e5",
21
- borderLight: "rgba(0, 0, 0, 0.08)",
22
- success: "#10b981",
23
- error: "#ef4444",
24
- warning: "#f59e0b",
25
- info: "#3b82f6",
26
- overlay: "rgba(0, 0, 0, 0.5)",
27
- hoverSubtle: "rgba(0, 0, 0, 0.03)",
28
- hoverLight: "rgba(0, 0, 0, 0.05)",
29
- textStrong: "#1F2937",
30
- textNormal: "#3B3B3B",
31
- textSubtle: "#6B7280",
32
- textDisabled: "#9CA3AF",
33
- textInverse: "#FFFFFF"
35
+ brand: {
36
+ primary: baseColors.brandPrimary,
37
+ onPrimary: baseColors.neutral0
38
+ },
39
+ text: {
40
+ heading: baseColors.neutral900,
41
+ body: baseColors.neutral700,
42
+ caption: baseColors.neutral500,
43
+ brand: baseColors.brandPrimary,
44
+ inverse: baseColors.neutral0,
45
+ disabled: baseColors.alphaBlack38
46
+ },
47
+ bg: {
48
+ solid: baseColors.neutral0,
49
+ solidDim: baseColors.neutral50,
50
+ additive: baseColors.alphaBlack5,
51
+ disabled: baseColors.alphaBlack12,
52
+ overlay: baseColors.alphaBlack50
53
+ },
54
+ state: {
55
+ hoverOnLight: baseColors.alphaBlack5,
56
+ pressedOnLight: baseColors.alphaBlack12,
57
+ hoverOnDark: baseColors.alphaWhite5,
58
+ pressedOnDark: baseColors.alphaWhite12
59
+ },
60
+ border: {
61
+ default: baseColors.neutral200,
62
+ hover: baseColors.neutral400,
63
+ subtle: baseColors.alphaBlack8,
64
+ focus: baseColors.neutral900,
65
+ disabled: "#F2F2F2"
66
+ },
67
+ status: {
68
+ error: baseColors.statusError,
69
+ success: baseColors.statusSuccess,
70
+ warning: baseColors.statusWarning,
71
+ info: baseColors.statusInfo
72
+ }
34
73
  };
35
74
 
36
75
  // src/styles/ts/spacing.ts
37
76
  var spacing = {
38
- xs: "0.25rem",
39
- // 4px
40
- sm: "0.5rem",
41
- // 8px
42
- md: "0.75rem",
43
- // 12px
44
- lg: "1rem",
45
- // 16px
46
- xl: "1.25rem",
47
- // 20px
48
- "2xl": "1.5rem",
49
- // 24px
50
- "3xl": "2rem",
51
- // 32px
52
- "4xl": "2.5rem",
53
- // 40px
54
- "5xl": "3rem"
55
- // 48px
77
+ "0": "0px",
78
+ "1": "1px",
79
+ "2": "2px",
80
+ "3": "3px",
81
+ "4": "4px",
82
+ "6": "6px",
83
+ "8": "8px",
84
+ "12": "12px",
85
+ "16": "16px",
86
+ "20": "20px",
87
+ "24": "24px",
88
+ "32": "32px",
89
+ "40": "40px",
90
+ "48": "48px"
56
91
  };
57
92
 
58
93
  // src/styles/ts/typography.ts
59
- var typography = {
94
+ var baseTypography = {
60
95
  fontFamily: {
61
- primary: "'Pretendard', sans-serif"
96
+ primary: "Pretendard"
62
97
  },
63
98
  fontSize: {
64
- xs: "0.75rem",
65
- sm: "0.875rem",
66
- base: "0.9375rem",
67
- md: "1rem",
68
- lg: "1.125rem",
69
- xl: "1.25rem",
70
- "2xl": "1.5rem",
71
- "3xl": "2rem",
72
- "4xl": "2.5rem"
99
+ "12": "12px",
100
+ "13": "13px",
101
+ "14": "14px",
102
+ "15": "15px",
103
+ "16": "16px",
104
+ "18": "18px",
105
+ "20": "20px",
106
+ "24": "24px",
107
+ "28": "28px",
108
+ "32": "32px",
109
+ "40": "40px",
110
+ "48": "48px"
73
111
  },
74
112
  fontWeight: {
75
- thin: 100,
76
- extralight: 200,
77
- light: 300,
78
- regular: 400,
79
- medium: 500,
80
- semibold: 600,
81
- bold: 700,
82
- extrabold: 800,
83
- black: 900
113
+ regular: "Regular",
114
+ medium: "Medium"
84
115
  },
85
116
  lineHeight: {
86
- tight: 1.25,
87
- snug: 1.3,
88
- normal: 1.5,
89
- relaxed: 1.75
117
+ "16": "16px",
118
+ "18": "18px",
119
+ "20": "20px",
120
+ "22-5": "22.5px",
121
+ "24": "24px",
122
+ "28": "28px",
123
+ "32": "32px",
124
+ "36": "36px",
125
+ "40": "40px",
126
+ "50": "50px",
127
+ "60": "60px"
90
128
  },
91
129
  letterSpacing: {
92
- tight: "-0.02em",
93
- normal: "0",
94
- wide: "0.02em"
130
+ normal: "0px"
131
+ }
132
+ };
133
+ var { fontSize: fs, fontWeight: fw, lineHeight: lh, letterSpacing: ls } = baseTypography;
134
+ var typography = {
135
+ fontFamily: {
136
+ primary: `'${baseTypography.fontFamily.primary}', sans-serif`
137
+ },
138
+ display: {
139
+ large: { fontSize: fs["48"], fontWeight: fw.regular, lineHeight: lh["60"], letterSpacing: ls.normal },
140
+ largeMedium: { fontSize: fs["48"], fontWeight: fw.medium, lineHeight: lh["60"], letterSpacing: ls.normal },
141
+ medium: { fontSize: fs["40"], fontWeight: fw.regular, lineHeight: lh["50"], letterSpacing: ls.normal },
142
+ mediumMedium: { fontSize: fs["40"], fontWeight: fw.medium, lineHeight: lh["50"], letterSpacing: ls.normal },
143
+ small: { fontSize: fs["32"], fontWeight: fw.regular, lineHeight: lh["40"], letterSpacing: ls.normal },
144
+ smallMedium: { fontSize: fs["32"], fontWeight: fw.medium, lineHeight: lh["40"], letterSpacing: ls.normal }
145
+ },
146
+ heading: {
147
+ large: { fontSize: fs["28"], fontWeight: fw.regular, lineHeight: lh["36"], letterSpacing: ls.normal },
148
+ largeMedium: { fontSize: fs["28"], fontWeight: fw.medium, lineHeight: lh["36"], letterSpacing: ls.normal },
149
+ medium: { fontSize: fs["24"], fontWeight: fw.regular, lineHeight: lh["32"], letterSpacing: ls.normal },
150
+ mediumMedium: { fontSize: fs["24"], fontWeight: fw.medium, lineHeight: lh["32"], letterSpacing: ls.normal },
151
+ small: { fontSize: fs["20"], fontWeight: fw.regular, lineHeight: lh["28"], letterSpacing: ls.normal },
152
+ smallMedium: { fontSize: fs["20"], fontWeight: fw.medium, lineHeight: lh["28"], letterSpacing: ls.normal }
153
+ },
154
+ title: {
155
+ large: { fontSize: fs["18"], fontWeight: fw.regular, lineHeight: lh["24"], letterSpacing: ls.normal },
156
+ largeMedium: { fontSize: fs["18"], fontWeight: fw.medium, lineHeight: lh["24"], letterSpacing: ls.normal },
157
+ medium: { fontSize: fs["16"], fontWeight: fw.regular, lineHeight: lh["24"], letterSpacing: ls.normal },
158
+ mediumMedium: { fontSize: fs["16"], fontWeight: fw.medium, lineHeight: lh["24"], letterSpacing: ls.normal },
159
+ small: { fontSize: fs["14"], fontWeight: fw.regular, lineHeight: lh["20"], letterSpacing: ls.normal },
160
+ smallMedium: { fontSize: fs["14"], fontWeight: fw.medium, lineHeight: lh["20"], letterSpacing: ls.normal }
161
+ },
162
+ body: {
163
+ large: { fontSize: fs["16"], fontWeight: fw.regular, lineHeight: lh["24"], letterSpacing: ls.normal },
164
+ largeMedium: { fontSize: fs["16"], fontWeight: fw.medium, lineHeight: lh["24"], letterSpacing: ls.normal },
165
+ medium: { fontSize: fs["15"], fontWeight: fw.regular, lineHeight: lh["22-5"], letterSpacing: ls.normal },
166
+ mediumMedium: { fontSize: fs["15"], fontWeight: fw.medium, lineHeight: lh["22-5"], letterSpacing: ls.normal },
167
+ small: { fontSize: fs["14"], fontWeight: fw.regular, lineHeight: lh["20"], letterSpacing: ls.normal },
168
+ smallMedium: { fontSize: fs["14"], fontWeight: fw.medium, lineHeight: lh["20"], letterSpacing: ls.normal }
169
+ },
170
+ label: {
171
+ large: { fontSize: fs["14"], fontWeight: fw.regular, lineHeight: lh["20"], letterSpacing: ls.normal },
172
+ largeMedium: { fontSize: fs["14"], fontWeight: fw.medium, lineHeight: lh["20"], letterSpacing: ls.normal },
173
+ medium: { fontSize: fs["13"], fontWeight: fw.regular, lineHeight: lh["18"], letterSpacing: ls.normal },
174
+ mediumMedium: { fontSize: fs["13"], fontWeight: fw.medium, lineHeight: lh["18"], letterSpacing: ls.normal },
175
+ small: { fontSize: fs["12"], fontWeight: fw.regular, lineHeight: lh["16"], letterSpacing: ls.normal },
176
+ smallMedium: { fontSize: fs["12"], fontWeight: fw.medium, lineHeight: lh["16"], letterSpacing: ls.normal }
95
177
  }
96
178
  };
97
179
 
98
180
  // src/styles/ts/radius.ts
99
181
  var radius = {
182
+ none: "0px",
183
+ xs: "4px",
100
184
  sm: "6px",
101
185
  md: "8px",
102
186
  lg: "12px",
@@ -106,10 +190,37 @@ var radius = {
106
190
 
107
191
  // src/styles/ts/shadows.ts
108
192
  var shadows = {
109
- sm: "0 2px 4px rgba(0, 0, 0, 0.04)",
110
- md: "0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04)",
111
- lg: "0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06)",
112
- xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)"
193
+ level1: "0 1px 1px -1px rgba(0, 0, 0, 0.20), 0 3px 3px 0px rgba(0, 0, 0, 0.12)",
194
+ level2: "0 2px 2px -2px rgba(0, 0, 0, 0.20), 0 6px 6px 0px rgba(0, 0, 0, 0.12)",
195
+ level3: "0 3px 3px -3px rgba(0, 0, 0, 0.20), 0 9px 9px 0px rgba(0, 0, 0, 0.12)",
196
+ level4: "0 5px 5px -5px rgba(0, 0, 0, 0.20), 0 15px 15px 0px rgba(0, 0, 0, 0.12)",
197
+ level5: "0 8px 10px -5px rgba(0, 0, 0, 0.20), 0 20px 20px 0px rgba(0, 0, 0, 0.12)"
198
+ };
199
+
200
+ // src/styles/ts/border-width.ts
201
+ var baseBorderWidth = {
202
+ "0": "0px",
203
+ "1": "1px",
204
+ "2": "2px"
205
+ };
206
+ var borderWidth = {
207
+ none: baseBorderWidth["0"],
208
+ standard: baseBorderWidth["1"],
209
+ indicator: baseBorderWidth["2"]
210
+ };
211
+
212
+ // src/styles/ts/opacity.ts
213
+ var opacity = {
214
+ "0": 0,
215
+ "5": 0.05,
216
+ "8": 0.08,
217
+ "12": 0.12,
218
+ "16": 0.16,
219
+ "38": 0.38,
220
+ "50": 0.5,
221
+ "80": 0.8,
222
+ "90": 0.9,
223
+ "100": 1
113
224
  };
114
225
 
115
226
  // src/styles/ts/motion.ts
@@ -130,22 +241,22 @@ var motion = {
130
241
  // src/styles/ts/skeleton.ts
131
242
  var skeleton = {
132
243
  color: {
133
- base: colors.backgroundNeutral,
134
- wave: colors.backgroundMuted,
135
- highlight: colors.backgroundSecondary
244
+ base: baseColors.neutral50,
245
+ wave: baseColors.neutral200,
246
+ highlight: baseColors.neutral0
136
247
  },
137
- gradient: `linear-gradient(90deg, ${colors.backgroundNeutral} 25%, ${colors.backgroundSecondary} 37%, ${colors.backgroundMuted} 63%)`,
248
+ gradient: `linear-gradient(90deg, ${baseColors.neutral50} 25%, ${baseColors.neutral0} 37%, ${baseColors.neutral200} 63%)`,
138
249
  radius: {
139
250
  sm: radius.sm,
140
251
  md: radius.md,
141
252
  lg: radius.lg
142
253
  },
143
254
  height: {
144
- xs: spacing.xs,
145
- sm: spacing.sm,
146
- md: spacing.md,
147
- lg: spacing.lg,
148
- xl: spacing.xl
255
+ xs: spacing["4"],
256
+ sm: spacing["8"],
257
+ md: spacing["12"],
258
+ lg: spacing["16"],
259
+ xl: spacing["20"]
149
260
  },
150
261
  animation: {
151
262
  duration: "1.4s",
@@ -155,21 +266,24 @@ var skeleton = {
155
266
 
156
267
  // src/styles/ts/breakpoints.ts
157
268
  var breakpoints = {
158
- mobile: 0,
159
- // ~767
160
- tablet: 768,
161
- // 768 ~ 1023
162
- laptop: 1024,
163
- // 1024 ~ 1439
164
- desktop: 1440
165
- // 1440+
269
+ compact: 0,
270
+ // mobile
271
+ medium: 600,
272
+ // tablet
273
+ expanded: 840,
274
+ // small desktop
275
+ large: 1200
276
+ // desktop
166
277
  };
167
278
 
168
279
  // src/styles/ts/z-index.ts
169
280
  var zIndex = {
170
- loading: 9999,
171
- modal: 1e4,
172
- toast: 10001
281
+ level0: 0,
282
+ level1: 10,
283
+ level2: 100,
284
+ level3: 200,
285
+ level4: 500,
286
+ level5: 1e3
173
287
  };
174
288
 
175
289
  // src/styles/ts/a11y.ts
@@ -211,8 +325,8 @@ var FOCUSABLE_SELECTORS = [
211
325
  '[tabindex]:not([tabindex="-1"])'
212
326
  ].join(", ");
213
327
  function useFocusTrap(containerRef, isActive) {
214
- const previousActiveElement = React7.useRef(null);
215
- React7.useEffect(() => {
328
+ const previousActiveElement = React6.useRef(null);
329
+ React6.useEffect(() => {
216
330
  if (!isActive) return;
217
331
  const container = containerRef.current;
218
332
  if (!container) return;
@@ -343,7 +457,7 @@ var AlertModal = ({
343
457
  onCancel,
344
458
  onClose
345
459
  }) => {
346
- const panelRef = React7.useRef(null);
460
+ const panelRef = React6.useRef(null);
347
461
  useFocusTrap(panelRef, true);
348
462
  const modalClassName = [
349
463
  "alert_modal",
@@ -444,7 +558,7 @@ var TopLoading = ({
444
558
  }
445
559
  );
446
560
  };
447
- var ToastContext = React7.createContext(null);
561
+ var ToastContext = React6.createContext(null);
448
562
  var VARIANT_ICONS = {
449
563
  success: /* @__PURE__ */ jsx(CheckCircle2, { size: 18 }),
450
564
  error: /* @__PURE__ */ jsx(XCircle, { size: 18 }),
@@ -453,9 +567,9 @@ var VARIANT_ICONS = {
453
567
  default: /* @__PURE__ */ jsx(Bell, { size: 18 })
454
568
  };
455
569
  var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
456
- const [exiting, setExiting] = React7.useState(false);
457
- const closingRef = React7.useRef(false);
458
- const close = React7.useCallback(() => {
570
+ const [exiting, setExiting] = React6.useState(false);
571
+ const closingRef = React6.useRef(false);
572
+ const close = React6.useCallback(() => {
459
573
  if (closingRef.current) return;
460
574
  closingRef.current = true;
461
575
  setExiting(true);
@@ -497,19 +611,19 @@ var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
497
611
  );
498
612
  };
499
613
  var ToastProvider = ({ children, maxCount = 5, closeAriaLabel = "Close" }) => {
500
- const [toasts, setToasts] = React7.useState([]);
501
- const [isMounted, setIsMounted] = React7.useState(false);
502
- React7.useEffect(() => {
614
+ const [toasts, setToasts] = React6.useState([]);
615
+ const [isMounted, setIsMounted] = React6.useState(false);
616
+ React6.useEffect(() => {
503
617
  setIsMounted(true);
504
618
  }, []);
505
- const addToast = React7.useCallback(
619
+ const addToast = React6.useCallback(
506
620
  (message, variant, duration = 3e3) => {
507
621
  const id = crypto.randomUUID();
508
622
  setToasts((prev) => [{ id, message, variant, duration }, ...prev].slice(0, maxCount));
509
623
  },
510
624
  [maxCount]
511
625
  );
512
- const removeToast = React7.useCallback((id) => {
626
+ const removeToast = React6.useCallback((id) => {
513
627
  setToasts((prev) => prev.filter((t) => t.id !== id));
514
628
  }, []);
515
629
  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { addToast }, children: [
@@ -574,34 +688,32 @@ var Button = ({
574
688
  const buttonStyle = width ? { ...style, width } : style;
575
689
  return /* @__PURE__ */ jsx("button", { className: buttonClassName, style: buttonStyle, ...props });
576
690
  };
577
- var Checkbox = React7.forwardRef(
578
- ({ label, size = "md", indeterminate, className, ...props }, ref) => {
579
- const inputRef = React7.useRef(null);
580
- React7.useImperativeHandle(ref, () => inputRef.current);
581
- React7.useEffect(() => {
582
- if (!inputRef.current) return;
583
- inputRef.current.indeterminate = Boolean(indeterminate);
584
- }, [indeterminate]);
585
- const rootClassName = cn(
586
- "checkbox",
587
- `checkbox_size_${size}`,
588
- className
589
- );
590
- return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
591
- /* @__PURE__ */ jsx(
592
- "input",
593
- {
594
- ref: inputRef,
595
- type: "checkbox",
596
- className: "checkbox_input",
597
- ...props
598
- }
599
- ),
600
- /* @__PURE__ */ jsx("span", { className: "checkbox_box", "aria-hidden": "true" }),
601
- label ? /* @__PURE__ */ jsx("span", { className: "checkbox_label", children: label }) : null
602
- ] });
603
- }
604
- );
691
+ var Checkbox = ({ label, size = "md", indeterminate, className, ref, ...props }) => {
692
+ const inputRef = React6.useRef(null);
693
+ React6.useImperativeHandle(ref, () => inputRef.current);
694
+ React6.useEffect(() => {
695
+ if (!inputRef.current) return;
696
+ inputRef.current.indeterminate = Boolean(indeterminate);
697
+ }, [indeterminate]);
698
+ const rootClassName = cn(
699
+ "checkbox",
700
+ `checkbox_size_${size}`,
701
+ className
702
+ );
703
+ return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
704
+ /* @__PURE__ */ jsx(
705
+ "input",
706
+ {
707
+ ref: inputRef,
708
+ type: "checkbox",
709
+ className: "checkbox_input",
710
+ ...props
711
+ }
712
+ ),
713
+ /* @__PURE__ */ jsx("span", { className: "checkbox_box", "aria-hidden": "true" }),
714
+ label ? /* @__PURE__ */ jsx("span", { className: "checkbox_label", children: label }) : null
715
+ ] });
716
+ };
605
717
  Checkbox.displayName = "Checkbox";
606
718
  var FileInput = ({
607
719
  label = "Choose file",
@@ -611,8 +723,8 @@ var FileInput = ({
611
723
  disabled,
612
724
  ...props
613
725
  }) => {
614
- const inputId = React7.useId();
615
- const helperId = React7.useId();
726
+ const inputId = React6.useId();
727
+ const helperId = React6.useId();
616
728
  const rootClassName = [
617
729
  "file_input",
618
730
  disabled && "file_input_disabled",
@@ -635,20 +747,18 @@ var FileInput = ({
635
747
  helperText && /* @__PURE__ */ jsx("span", { id: helperId, className: "file_input_helper", children: helperText })
636
748
  ] });
637
749
  };
638
- var Radio = React7.forwardRef(
639
- ({ label, size = "md", className, ...props }, ref) => {
640
- const rootClassName = cn(
641
- "radio",
642
- `radio_size_${size}`,
643
- className
644
- );
645
- return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
646
- /* @__PURE__ */ jsx("input", { ref, type: "radio", className: "radio_input", ...props }),
647
- /* @__PURE__ */ jsx("span", { className: "radio_dot", "aria-hidden": "true" }),
648
- label ? /* @__PURE__ */ jsx("span", { className: "radio_label", children: label }) : null
649
- ] });
650
- }
651
- );
750
+ var Radio = ({ label, size = "md", className, ref, ...props }) => {
751
+ const rootClassName = cn(
752
+ "radio",
753
+ `radio_size_${size}`,
754
+ className
755
+ );
756
+ return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
757
+ /* @__PURE__ */ jsx("input", { ref, type: "radio", className: "radio_input", ...props }),
758
+ /* @__PURE__ */ jsx("span", { className: "radio_dot", "aria-hidden": "true" }),
759
+ label ? /* @__PURE__ */ jsx("span", { className: "radio_label", children: label }) : null
760
+ ] });
761
+ };
652
762
  Radio.displayName = "Radio";
653
763
  var Select = ({
654
764
  id,
@@ -665,21 +775,21 @@ var Select = ({
665
775
  className,
666
776
  textAlign = "left"
667
777
  }) => {
668
- const internalId = React7.useId();
778
+ const internalId = React6.useId();
669
779
  const selectId = id ?? internalId;
670
780
  const isControlled = value !== void 0;
671
- const [internalValue, setInternalValue] = React7.useState(defaultValue);
781
+ const [internalValue, setInternalValue] = React6.useState(defaultValue);
672
782
  const currentValue = isControlled ? value ?? null : internalValue;
673
- const [isOpen, setIsOpen] = React7.useState(false);
674
- const [activeIndex, setActiveIndex] = React7.useState(-1);
675
- const [dropUp, setDropUp] = React7.useState(false);
676
- const wrapperRef = React7.useRef(null);
677
- const controlRef = React7.useRef(null);
678
- const currentOption = React7.useMemo(
783
+ const [isOpen, setIsOpen] = React6.useState(false);
784
+ const [activeIndex, setActiveIndex] = React6.useState(-1);
785
+ const [dropUp, setDropUp] = React6.useState(false);
786
+ const wrapperRef = React6.useRef(null);
787
+ const controlRef = React6.useRef(null);
788
+ const currentOption = React6.useMemo(
679
789
  () => options.find((o) => o.value === currentValue) ?? null,
680
790
  [options, currentValue]
681
791
  );
682
- const setValue = React7.useCallback(
792
+ const setValue = React6.useCallback(
683
793
  (next) => {
684
794
  const option = options.find((o) => o.value === next) ?? null;
685
795
  if (!isControlled) setInternalValue(next);
@@ -687,12 +797,12 @@ var Select = ({
687
797
  },
688
798
  [isControlled, onChange, options]
689
799
  );
690
- const handleOutsideClick = React7.useEffectEvent((e) => {
800
+ const handleOutsideClick = React6.useEffectEvent((e) => {
691
801
  if (!wrapperRef.current?.contains(e.target)) {
692
802
  setIsOpen(false);
693
803
  }
694
804
  });
695
- React7.useEffect(() => {
805
+ React6.useEffect(() => {
696
806
  document.addEventListener("mousedown", handleOutsideClick);
697
807
  return () => document.removeEventListener("mousedown", handleOutsideClick);
698
808
  }, []);
@@ -757,12 +867,12 @@ var Select = ({
757
867
  break;
758
868
  }
759
869
  };
760
- React7.useEffect(() => {
870
+ React6.useEffect(() => {
761
871
  if (!isOpen) return;
762
872
  const idx = options.findIndex((o) => o.value === currentValue && !o.disabled);
763
873
  setActiveIndex(idx >= 0 ? idx : Math.max(0, options.findIndex((o) => !o.disabled)));
764
874
  }, [isOpen, options, currentValue]);
765
- React7.useLayoutEffect(() => {
875
+ React6.useLayoutEffect(() => {
766
876
  if (!isOpen || !controlRef.current) return;
767
877
  const rect = controlRef.current.getBoundingClientRect();
768
878
  const listHeight = Math.min(options.length * 40, 288);
@@ -844,146 +954,144 @@ var Select = ({
844
954
  )
845
955
  ] });
846
956
  };
847
- var Switch = React7.forwardRef(
848
- ({
849
- checked,
850
- defaultChecked,
851
- onChange,
852
- size = "md",
853
- disabled,
854
- className,
855
- ariaLabel,
856
- ...props
857
- }, ref) => {
858
- const isControlled = checked !== void 0;
859
- const [innerChecked, setInnerChecked] = React7.useState(!!defaultChecked);
860
- const isOn = isControlled ? !!checked : innerChecked;
861
- const handleToggle = () => {
862
- if (disabled) return;
863
- const next = !isOn;
864
- if (!isControlled) setInnerChecked(next);
865
- onChange?.(next);
866
- };
867
- const rootClassName = cn(
868
- "switch",
869
- `switch_size_${size}`,
870
- { switch_on: isOn, switch_disabled: disabled },
871
- className
872
- );
873
- return /* @__PURE__ */ jsx(
874
- "button",
875
- {
876
- ref,
877
- type: "button",
878
- role: "switch",
879
- "aria-checked": isOn,
880
- "aria-label": ariaLabel,
881
- disabled,
882
- onClick: handleToggle,
883
- className: rootClassName,
884
- ...props,
885
- children: /* @__PURE__ */ jsx("span", { className: "switch_thumb" })
886
- }
887
- );
888
- }
889
- );
957
+ var Switch = ({
958
+ checked,
959
+ defaultChecked,
960
+ onChange,
961
+ size = "md",
962
+ disabled,
963
+ className,
964
+ ariaLabel,
965
+ ref,
966
+ ...props
967
+ }) => {
968
+ const isControlled = checked !== void 0;
969
+ const [innerChecked, setInnerChecked] = React6.useState(!!defaultChecked);
970
+ const isOn = isControlled ? !!checked : innerChecked;
971
+ const handleToggle = () => {
972
+ if (disabled) return;
973
+ const next = !isOn;
974
+ if (!isControlled) setInnerChecked(next);
975
+ onChange?.(next);
976
+ };
977
+ const rootClassName = cn(
978
+ "switch",
979
+ `switch_size_${size}`,
980
+ { switch_on: isOn, switch_disabled: disabled },
981
+ className
982
+ );
983
+ return /* @__PURE__ */ jsx(
984
+ "button",
985
+ {
986
+ ref,
987
+ type: "button",
988
+ role: "switch",
989
+ "aria-checked": isOn,
990
+ "aria-label": ariaLabel,
991
+ disabled,
992
+ onClick: handleToggle,
993
+ className: rootClassName,
994
+ ...props,
995
+ children: /* @__PURE__ */ jsx("span", { className: "switch_thumb" })
996
+ }
997
+ );
998
+ };
890
999
  Switch.displayName = "Switch";
891
- var TextField = React7.forwardRef(
892
- ({
893
- id,
894
- label,
895
- helperText,
896
- error,
897
- success,
898
- variant = "outline",
899
- size = "md",
900
- leftIcon,
901
- rightIcon,
902
- fullWidth,
903
- className,
904
- onChangeAction,
905
- value,
906
- defaultValue,
907
- transformValue,
908
- ...props
909
- }, ref) => {
910
- const inputId = id ?? React7.useId();
911
- const helperId = helperText ? `${inputId}-help` : void 0;
912
- const isControlled = value !== void 0;
913
- const applyTransform = (nextValue) => transformValue ? transformValue(nextValue) : nextValue;
914
- const [innerValue, setInnerValue] = React7.useState(
915
- () => applyTransform(value ?? defaultValue ?? "")
916
- );
917
- const isComposingRef = React7.useRef(false);
918
- React7.useEffect(() => {
919
- if (!isControlled) return;
920
- setInnerValue(applyTransform(value ?? ""));
921
- }, [isControlled, value, transformValue]);
922
- const rootClassName = cn(
923
- "text_field",
924
- { text_field_full_width: fullWidth },
925
- className
926
- );
927
- const inputClassName = cn(
928
- "text_field_input",
929
- `text_field_variant_${variant}`,
930
- `text_field_size_${size}`,
931
- {
932
- text_field_with_left: !!leftIcon,
933
- text_field_with_right: !!rightIcon,
934
- text_field_error: !!error,
935
- text_field_success: !!success
936
- }
937
- );
938
- const helperClassName = cn(
939
- "text_field_helper",
940
- {
941
- text_field_helper_error: error,
942
- text_field_helper_success: success
943
- }
944
- );
945
- return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
946
- label ? /* @__PURE__ */ jsx("label", { className: "text_field_label", htmlFor: inputId, children: label }) : null,
947
- /* @__PURE__ */ jsxs("div", { className: "text_field_wrap", children: [
948
- leftIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_icon_left", "aria-hidden": "true", children: leftIcon }) : null,
949
- /* @__PURE__ */ jsx(
950
- "input",
951
- {
952
- id: inputId,
953
- ref,
954
- className: inputClassName,
955
- "aria-invalid": !!error,
956
- "aria-describedby": helperId,
957
- ...props,
958
- value: innerValue,
959
- onCompositionStart: () => {
960
- isComposingRef.current = true;
961
- },
962
- onCompositionEnd: (event) => {
963
- isComposingRef.current = false;
964
- const rawValue = event.currentTarget.value;
965
- const nextValue = applyTransform(rawValue);
966
- setInnerValue(nextValue);
967
- onChangeAction?.(nextValue);
968
- },
969
- onChange: (event) => {
970
- const rawValue = event.target.value;
971
- if (isComposingRef.current) {
972
- setInnerValue(rawValue);
973
- return;
974
- }
975
- const nextValue = applyTransform(rawValue);
976
- setInnerValue(nextValue);
977
- onChangeAction?.(nextValue);
1000
+ var TextField = ({
1001
+ id,
1002
+ label,
1003
+ helperText,
1004
+ error,
1005
+ success,
1006
+ variant = "outline",
1007
+ size = "md",
1008
+ leftIcon,
1009
+ rightIcon,
1010
+ fullWidth,
1011
+ className,
1012
+ onChangeAction,
1013
+ value,
1014
+ defaultValue,
1015
+ transformValue,
1016
+ ref,
1017
+ ...props
1018
+ }) => {
1019
+ const inputId = id ?? React6.useId();
1020
+ const helperId = helperText ? `${inputId}-help` : void 0;
1021
+ const isControlled = value !== void 0;
1022
+ const applyTransform = (nextValue) => transformValue ? transformValue(nextValue) : nextValue;
1023
+ const [innerValue, setInnerValue] = React6.useState(
1024
+ () => applyTransform(value ?? defaultValue ?? "")
1025
+ );
1026
+ const isComposingRef = React6.useRef(false);
1027
+ React6.useEffect(() => {
1028
+ if (!isControlled) return;
1029
+ setInnerValue(applyTransform(value ?? ""));
1030
+ }, [isControlled, value, transformValue]);
1031
+ const rootClassName = cn(
1032
+ "text_field",
1033
+ { text_field_full_width: fullWidth },
1034
+ className
1035
+ );
1036
+ const inputClassName = cn(
1037
+ "text_field_input",
1038
+ `text_field_variant_${variant}`,
1039
+ `text_field_size_${size}`,
1040
+ {
1041
+ text_field_with_left: !!leftIcon,
1042
+ text_field_with_right: !!rightIcon,
1043
+ text_field_error: !!error,
1044
+ text_field_success: !!success
1045
+ }
1046
+ );
1047
+ const helperClassName = cn(
1048
+ "text_field_helper",
1049
+ {
1050
+ text_field_helper_error: error,
1051
+ text_field_helper_success: success
1052
+ }
1053
+ );
1054
+ return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
1055
+ label ? /* @__PURE__ */ jsx("label", { className: "text_field_label", htmlFor: inputId, children: label }) : null,
1056
+ /* @__PURE__ */ jsxs("div", { className: "text_field_wrap", children: [
1057
+ leftIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_icon_left", "aria-hidden": "true", children: leftIcon }) : null,
1058
+ /* @__PURE__ */ jsx(
1059
+ "input",
1060
+ {
1061
+ id: inputId,
1062
+ ref,
1063
+ className: inputClassName,
1064
+ "aria-invalid": !!error,
1065
+ "aria-describedby": helperId,
1066
+ ...props,
1067
+ value: innerValue,
1068
+ onCompositionStart: () => {
1069
+ isComposingRef.current = true;
1070
+ },
1071
+ onCompositionEnd: (event) => {
1072
+ isComposingRef.current = false;
1073
+ const rawValue = event.currentTarget.value;
1074
+ const nextValue = applyTransform(rawValue);
1075
+ setInnerValue(nextValue);
1076
+ onChangeAction?.(nextValue);
1077
+ },
1078
+ onChange: (event) => {
1079
+ const rawValue = event.target.value;
1080
+ if (isComposingRef.current) {
1081
+ setInnerValue(rawValue);
1082
+ return;
978
1083
  }
1084
+ const nextValue = applyTransform(rawValue);
1085
+ setInnerValue(nextValue);
1086
+ onChangeAction?.(nextValue);
979
1087
  }
980
- ),
981
- rightIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_icon_right", "aria-hidden": "true", children: rightIcon }) : null
982
- ] }),
983
- helperText ? /* @__PURE__ */ jsx("div", { id: helperId, className: helperClassName, children: helperText }) : null
984
- ] });
985
- }
986
- );
1088
+ }
1089
+ ),
1090
+ rightIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_icon_right", "aria-hidden": "true", children: rightIcon }) : null
1091
+ ] }),
1092
+ helperText ? /* @__PURE__ */ jsx("div", { id: helperId, className: helperClassName, children: helperText }) : null
1093
+ ] });
1094
+ };
987
1095
  TextField.displayName = "TextField";
988
1096
  var pad = (n) => String(n).padStart(2, "0");
989
1097
  var getDaysInMonth = (year, month) => new Date(year, month, 0).getDate();
@@ -1006,8 +1114,8 @@ var DatePicker = ({
1006
1114
  minDateSrFormat = "Minimum date: {date}",
1007
1115
  selectableRangeUntilTodaySrText = "Selectable up to today"
1008
1116
  }) => {
1009
- const groupId = React7.useId();
1010
- const constraintId = React7.useId();
1117
+ const groupId = React6.useId();
1118
+ const constraintId = React6.useId();
1011
1119
  const today = /* @__PURE__ */ new Date();
1012
1120
  const todayYear = today.getFullYear();
1013
1121
  const todayMonth = today.getMonth() + 1;
@@ -1133,7 +1241,7 @@ var getPaginationItems = (page, totalPages) => {
1133
1241
  var Pagination = ({ page, totalPages, onChange, prevLabel = "Previous page", nextLabel = "Next page" }) => {
1134
1242
  const prevDisabled = page <= 1;
1135
1243
  const nextDisabled = page >= totalPages;
1136
- const items = React7.useMemo(
1244
+ const items = React6.useMemo(
1137
1245
  () => getPaginationItems(page, totalPages),
1138
1246
  [page, totalPages]
1139
1247
  );
@@ -1193,18 +1301,18 @@ var Modal = ({
1193
1301
  ariaLabel,
1194
1302
  ...props
1195
1303
  }) => {
1196
- const panelRef = React7.useRef(null);
1197
- const titleId = React7.useId();
1304
+ const panelRef = React6.useRef(null);
1305
+ const titleId = React6.useId();
1198
1306
  useFocusTrap(panelRef, open);
1199
- const handleEscape = React7.useEffectEvent((e) => {
1307
+ const handleEscape = React6.useEffectEvent((e) => {
1200
1308
  if (e.key === "Escape") onClose?.();
1201
1309
  });
1202
- React7.useEffect(() => {
1310
+ React6.useEffect(() => {
1203
1311
  if (!open) return;
1204
1312
  document.addEventListener("keydown", handleEscape);
1205
1313
  return () => document.removeEventListener("keydown", handleEscape);
1206
1314
  }, [open]);
1207
- React7.useEffect(() => {
1315
+ React6.useEffect(() => {
1208
1316
  if (!open) return;
1209
1317
  const body = document.body;
1210
1318
  const openModals = parseInt(body.dataset.openModals || "0", 10);
@@ -1255,4 +1363,4 @@ var Modal = ({
1255
1363
  );
1256
1364
  };
1257
1365
 
1258
- export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Modal, Pagination, Radio, Select, Spinner, Switch, TextField, ToastProvider, TopLoading, a11y, breakpoints, colors, motion, radius, shadows, skeleton, spacing, typography, useAlert, useToast, zIndex };
1366
+ export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Modal, Pagination, Radio, Select, Spinner, Switch, TextField, ToastProvider, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, motion, opacity, radius, shadows, skeleton, spacing, typography, useAlert, useToast, zIndex };