@telepix-lab/telepix-ui 0.1.1 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/cjs/autocomplete/styles.d.ts +0 -1
  2. package/dist/cjs/card/styles.d.ts +0 -1
  3. package/dist/cjs/hooks/usePreferColors.d.ts +13 -0
  4. package/dist/cjs/index.js +737 -1520
  5. package/dist/cjs/index.js.map +1 -1
  6. package/dist/cjs/styles/primitiveColors.stylex.d.ts +6 -6
  7. package/dist/cjs/styles/semanticColors.stylex.d.ts +98 -0
  8. package/dist/cjs/styles.css +151 -61
  9. package/dist/esm/autocomplete/styles.d.ts +0 -1
  10. package/dist/esm/card/styles.d.ts +0 -1
  11. package/dist/esm/hooks/usePreferColors.d.ts +13 -0
  12. package/dist/esm/index.js +736 -1521
  13. package/dist/esm/index.js.map +1 -1
  14. package/dist/esm/styles/primitiveColors.stylex.d.ts +6 -6
  15. package/dist/esm/styles/semanticColors.stylex.d.ts +98 -0
  16. package/dist/esm/styles.css +151 -61
  17. package/dist/index.d.ts +105 -9
  18. package/package.json +2 -1
package/dist/cjs/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  'use strict';
2
2
 
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
- var stylex = require('@stylexjs/stylex');
5
4
  var React = require('react');
5
+ var stylex = require('@stylexjs/stylex');
6
6
  var ReactDOM = require('react-dom');
7
7
  var reactDayPicker = require('react-day-picker');
8
8
 
@@ -23,33 +23,10 @@ function _interopNamespaceDefault(e) {
23
23
  return Object.freeze(n);
24
24
  }
25
25
 
26
- var stylex__namespace = /*#__PURE__*/_interopNamespaceDefault(stylex);
27
26
  var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
27
+ var stylex__namespace = /*#__PURE__*/_interopNamespaceDefault(stylex);
28
28
  var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
29
29
 
30
- // 간격 변수 정의
31
- const spacing = {
32
- xs: "var(--tpst1aa85u5)",
33
- sm: "var(--tpst15cl33r)",
34
- md: "var(--tpst1s1bzlu)",
35
- lg: "var(--tpstr1ymy1)",
36
- xl: "var(--tpst13zox1l)",
37
- xxl: "var(--tpst1xkcubw)",
38
- xxxl: "var(--tpst67ua5f)",
39
- __themeName__: "tpst1cmuz2h"
40
- };
41
- // 테두리 반경 변수 정의
42
- const borderRadius = {
43
- none: "var(--tpst16kocez)",
44
- xs: "var(--tpst1vsob78)",
45
- sm: "var(--tpst1w7bvkk)",
46
- md: "var(--tpst1ls88jo)",
47
- lg: "var(--tpst1d2ic4p)",
48
- xl: "var(--tpst1bkg6mz)",
49
- full: "var(--tpstbu84cc)",
50
- __themeName__: "tpstun8bdo"
51
- };
52
-
53
30
  // 프리미티브 컬러 변수 정의
54
31
  const primitiveColors = {
55
32
  blue100: "var(--tpstqe013h)",
@@ -70,16 +47,16 @@ const primitiveColors = {
70
47
  cyan700: "var(--tpsth1uc7g)",
71
48
  cyan800: "var(--tpsttewm74)",
72
49
  cyan900: "var(--tpst1ts0yxk)",
50
+ darkOpacity25: "var(--tpst1695na0)",
51
+ darkOpacity50: "var(--tpstoyk8v8)",
73
52
  darkOpacity100: "var(--tpst101zq66)",
74
53
  darkOpacity150: "var(--tpst18059y4)",
75
54
  darkOpacity200: "var(--tpst1o2qj1w)",
76
- darkOpacity25: "var(--tpst1695na0)",
77
55
  darkOpacity250: "var(--tpst1e4u9cd)",
78
56
  darkOpacity300: "var(--tpstzzylim)",
79
57
  darkOpacity350: "var(--tpst1giqxg)",
80
58
  darkOpacity400: "var(--tpst1ckp6cb)",
81
59
  darkOpacity450: "var(--tpst1ujyhgx)",
82
- darkOpacity50: "var(--tpstoyk8v8)",
83
60
  darkOpacity500: "var(--tpstdb8mlt)",
84
61
  darkOpacity550: "var(--tpst142inpb)",
85
62
  darkOpacity600: "var(--tpstrvxn8n)",
@@ -98,16 +75,16 @@ const primitiveColors = {
98
75
  green700: "var(--tpst1a1gxqa)",
99
76
  green800: "var(--tpstb6uyui)",
100
77
  green900: "var(--tpstklhf60)",
78
+ lightOpacity25: "var(--tpstevrkdv)",
79
+ lightOpacity50: "var(--tpst8kgh2v)",
101
80
  lightOpacity100: "var(--tpst1i0r5ji)",
102
81
  lightOpacity150: "var(--tpst1y5wwdd)",
103
82
  lightOpacity200: "var(--tpst1qyy4b3)",
104
- lightOpacity25: "var(--tpstevrkdv)",
105
83
  lightOpacity250: "var(--tpst9u9sq4)",
106
84
  lightOpacity300: "var(--tpst9ontey)",
107
85
  lightOpacity350: "var(--tpst7h2gr7)",
108
86
  lightOpacity400: "var(--tpstrlh8f2)",
109
87
  lightOpacity450: "var(--tpstpvck6k)",
110
- lightOpacity50: "var(--tpst8kgh2v)",
111
88
  lightOpacity500: "var(--tpstwf3o2r)",
112
89
  lightOpacity550: "var(--tpst1yklry3)",
113
90
  lightOpacity600: "var(--tpst1pqr7tr)",
@@ -126,16 +103,16 @@ const primitiveColors = {
126
103
  magenta700: "var(--tpst11snvgx)",
127
104
  magenta800: "var(--tpst14beq8s)",
128
105
  magenta900: "var(--tpstzb1amu)",
106
+ neutral25: "var(--tpsttwjrp6)",
107
+ neutral50: "var(--tpst1oe8qtm)",
129
108
  neutral100: "var(--tpst1gpymmf)",
130
109
  neutral150: "var(--tpst1wxl5pq)",
131
110
  neutral200: "var(--tpst12b1wd7)",
132
- neutral25: "var(--tpsttwjrp6)",
133
111
  neutral250: "var(--tpstxadivy)",
134
112
  neutral300: "var(--tpst13x3j6w)",
135
113
  neutral350: "var(--tpstihxxi9)",
136
114
  neutral400: "var(--tpstv2m2ve)",
137
115
  neutral450: "var(--tpstiiea8d)",
138
- neutral50: "var(--tpst1oe8qtm)",
139
116
  neutral500: "var(--tpst1yltxr6)",
140
117
  neutral550: "var(--tpstr8jwi2)",
141
118
  neutral600: "var(--tpst1dl1ny3)",
@@ -278,6 +255,89 @@ const semanticColors = {
278
255
  transparent: "var(--tpst1wrmwgo)",
279
256
  __themeName__: "tpst1h3jhwn"
280
257
  };
258
+ const lightMode = {
259
+ $$css: true,
260
+ tpst1h3jhwn: "tpst1eqgcyt tpst1h3jhwn"
261
+ };
262
+ const darkMode = {
263
+ $$css: true,
264
+ tpst1h3jhwn: "tpst1bbvikf tpst1h3jhwn"
265
+ };
266
+
267
+ const usePreferColors = () => {
268
+ const [dataTheme, setDataTheme] = React.useState("light");
269
+ const initTheme = () => {
270
+ const targetNode = document.documentElement; // <html> 엘리먼트
271
+ const currentTheme = targetNode.getAttribute("data-theme");
272
+ // currentTheme이 없으면 system의 기본 테마를 사용
273
+ if (currentTheme === "dark" || currentTheme === "light") {
274
+ setDataTheme(currentTheme);
275
+ } else {
276
+ // matchMedia를 사용하여 시스템의 기본 테마를 확인
277
+ const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
278
+ // 시스템의 기본 테마가 dark이면 data-theme을 "dark"로 설정,
279
+ // 아니면 "light"로 설정
280
+ prefersDark ? setDataTheme("dark") : setDataTheme("light");
281
+ }
282
+ };
283
+ React.useEffect(() => {
284
+ const targetNode = document.documentElement; // <html> 엘리먼트
285
+ const observer = new MutationObserver(mutationsList => {
286
+ for (const mutation of mutationsList) {
287
+ if (mutation.type === "attributes" && mutation.attributeName === "data-theme") {
288
+ const currentTheme = targetNode.getAttribute("data-theme");
289
+ // currentTheme이 없으면 system의 기본 테마를 사용
290
+ if (currentTheme === "dark" || currentTheme === "light") {
291
+ setDataTheme(currentTheme);
292
+ } else {
293
+ // matchMedia를 사용하여 시스템의 기본 테마를 확인
294
+ const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
295
+ // 시스템의 기본 테마가 dark이면 data-theme을 "dark"로 설정,
296
+ // 아니면 "light"로 설정
297
+ prefersDark ? setDataTheme("dark") : setDataTheme("light");
298
+ }
299
+ }
300
+ }
301
+ });
302
+ observer.observe(targetNode, {
303
+ attributes: true,
304
+ // 속성 감시
305
+ attributeFilter: ["data-theme"] // data-theme만 감시
306
+ });
307
+ initTheme();
308
+ }, []);
309
+ const setStyleXProps = (...styles) => {
310
+ return stylex__namespace.props(dataTheme === "dark" ? darkMode : lightMode, ...styles);
311
+ };
312
+ return {
313
+ setStyleXProps,
314
+ dataTheme,
315
+ setDataTheme
316
+ };
317
+ };
318
+
319
+ // 간격 변수 정의
320
+ const spacing = {
321
+ xs: "var(--tpst1aa85u5)",
322
+ sm: "var(--tpst15cl33r)",
323
+ md: "var(--tpst1s1bzlu)",
324
+ lg: "var(--tpstr1ymy1)",
325
+ xl: "var(--tpst13zox1l)",
326
+ xxl: "var(--tpst1xkcubw)",
327
+ xxxl: "var(--tpst67ua5f)",
328
+ __themeName__: "tpst1cmuz2h"
329
+ };
330
+ // 테두리 반경 변수 정의
331
+ const borderRadius = {
332
+ none: "var(--tpst16kocez)",
333
+ xs: "var(--tpst1vsob78)",
334
+ sm: "var(--tpst1w7bvkk)",
335
+ md: "var(--tpst1ls88jo)",
336
+ lg: "var(--tpst1d2ic4p)",
337
+ xl: "var(--tpst1bkg6mz)",
338
+ full: "var(--tpstbu84cc)",
339
+ __themeName__: "tpstun8bdo"
340
+ };
281
341
 
282
342
  // 폰트 패밀리 변수 정의
283
343
  const fontFamily = {
@@ -615,61 +675,19 @@ const commonStyles = {
615
675
  * </Button>
616
676
  * ```
617
677
  */
618
- const Button = React.forwardRef(({
619
- variant = "accent",
620
- size = "regular",
621
- fullWidth = false,
622
- isLoading = false,
623
- leftIcon,
624
- rightIcon,
625
- children,
626
- disabled,
627
- className,
628
- ...rest
629
- }, ref) => {
630
- const buttonClasses = stylex__namespace.props(buttonStyles.base, buttonSizeStyles[size], buttonVariantStyles[variant], fullWidth ? buttonStyles.fullWidth : null, leftIcon || rightIcon ? buttonStyles.withIcon : null);
631
- const getLoadingSpinnerStyles = () => {
632
- if (size === "small") {
633
- return buttonStyles.spinnerSmall;
634
- }
635
- if (size === "large") {
636
- return buttonStyles.spinnerLarge;
637
- }
638
- return buttonStyles.spinner;
639
- };
640
- return jsxRuntime.jsxs("button", {
641
- ref: ref,
642
- disabled: disabled ?? isLoading,
643
- className: `${buttonClasses.className} ${className ?? ""}`,
644
- ...rest,
645
- children: [isLoading && jsxRuntime.jsx("svg", {
646
- xmlns: "http://www.w3.org/2000/svg",
647
- width: "24",
648
- height: "24",
649
- viewBox: "0 0 24 24",
650
- fill: "none",
651
- stroke: "currentColor",
652
- strokeWidth: "2",
653
- strokeLinecap: "round",
654
- strokeLinejoin: "round",
655
- className: `lucide lucide-loader-circle-icon lucide-loader-circle ${stylex__namespace.props(getLoadingSpinnerStyles()).className}`,
656
- children: jsxRuntime.jsx("path", {
657
- d: "M21 12a9 9 0 1 1-6.219-8.56"
658
- })
659
- }), leftIcon && jsxRuntime.jsx("span", {
660
- className: stylex__namespace.props(commonStyles.flexCenter).className,
661
- children: leftIcon
662
- }), children && jsxRuntime.jsx("span", {
663
- className: "button-text",
664
- style: {
665
- visibility: isLoading ? "hidden" : "visible"
666
- },
667
- children: children
668
- }), rightIcon && jsxRuntime.jsx("span", {
669
- className: stylex__namespace.props(commonStyles.flexCenter).className,
670
- children: rightIcon
671
- })]
672
- });
678
+ const Button = React.forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, ...rest }, ref) => {
679
+ const { setStyleXProps } = usePreferColors();
680
+ const buttonClasses = setStyleXProps(buttonStyles.base, buttonSizeStyles[size], buttonVariantStyles[variant], fullWidth ? buttonStyles.fullWidth : null, leftIcon || rightIcon ? buttonStyles.withIcon : null);
681
+ const getLoadingSpinnerStyles = () => {
682
+ if (size === "small") {
683
+ return buttonStyles.spinnerSmall;
684
+ }
685
+ if (size === "large") {
686
+ return buttonStyles.spinnerLarge;
687
+ }
688
+ return buttonStyles.spinner;
689
+ };
690
+ return (jsxRuntime.jsxs("button", { ref: ref, disabled: disabled ?? isLoading, className: `${buttonClasses.className} ${className ?? ""}`, ...rest, children: [isLoading && (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: `lucide lucide-loader-circle-icon lucide-loader-circle ${setStyleXProps(getLoadingSpinnerStyles()).className}`, children: jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) })), leftIcon && (jsxRuntime.jsx("span", { className: setStyleXProps(commonStyles.flexCenter).className, children: leftIcon })), children && (jsxRuntime.jsx("span", { className: "button-text", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsxRuntime.jsx("span", { className: setStyleXProps(commonStyles.flexCenter).className, children: rightIcon }))] }));
673
691
  });
674
692
  Button.displayName = "Button";
675
693
 
@@ -1038,24 +1056,10 @@ const textStyles = {
1038
1056
  }
1039
1057
  };
1040
1058
 
1041
- const Text = ({
1042
- children,
1043
- className,
1044
- size,
1045
- weight,
1046
- align,
1047
- variant = "regularBase",
1048
- color,
1049
- as: Component = "p"
1050
- }) => {
1051
- const styles = stylex__namespace.props(textStyles.base, textVariantStyles[variant], size ? textSizeStyles[size] : undefined, weight ? fontWeightStyles[weight] : undefined, align ? textAlignStyles[align] : undefined);
1052
- return jsxRuntime.jsx(Component, {
1053
- style: color ? {
1054
- color
1055
- } : undefined,
1056
- className: `${styles.className} ${className ?? ""}`,
1057
- children: children
1058
- });
1059
+ const Text = ({ children, className, size, weight, align, variant = "regularBase", color, as: Component = "p", }) => {
1060
+ const { setStyleXProps } = usePreferColors();
1061
+ const styles = setStyleXProps(textStyles.base, textVariantStyles[variant], size ? textSizeStyles[size] : undefined, weight ? fontWeightStyles[weight] : undefined, align ? textAlignStyles[align] : undefined);
1062
+ return (jsxRuntime.jsx(Component, { style: color ? { color } : undefined, className: `${styles.className} ${className ?? ""}`, children: children }));
1059
1063
  };
1060
1064
  Text.displayName = "Text";
1061
1065
 
@@ -1233,30 +1237,11 @@ const inputStyles = {
1233
1237
  * />
1234
1238
  * ```
1235
1239
  */
1236
- const Input = React.forwardRef(({
1237
- size = "regular",
1238
- leftIcon,
1239
- rightIcon,
1240
- wrapperClassName,
1241
- ...rest
1242
- }, ref) => {
1243
- const inputWrapperClasses = stylex__namespace.props(inputWrapperStyles.base, size ? inputWrapperSizeStyles[size] : inputWrapperSizeStyles.regular);
1244
- const inputClasses = stylex__namespace.props(inputStyles.base, size ? inputStyles[size] : inputStyles.regular);
1245
- return jsxRuntime.jsxs("div", {
1246
- "aria-disabled": rest.disabled,
1247
- className: `${inputWrapperClasses.className} ${wrapperClassName}`,
1248
- children: [leftIcon && jsxRuntime.jsx("span", {
1249
- className: stylex__namespace.props(commonStyles.flexCenter).className,
1250
- children: leftIcon
1251
- }), jsxRuntime.jsx("input", {
1252
- ref: ref,
1253
- className: `${inputClasses.className} ${rest.className}`,
1254
- ...rest
1255
- }), rightIcon && jsxRuntime.jsx("span", {
1256
- className: stylex__namespace.props(commonStyles.flexCenter).className,
1257
- children: rightIcon
1258
- })]
1259
- });
1240
+ const Input = React.forwardRef(({ size = "regular", leftIcon, rightIcon, wrapperClassName, ...rest }, ref) => {
1241
+ const { setStyleXProps } = usePreferColors();
1242
+ const inputWrapperClasses = setStyleXProps(inputWrapperStyles.base, size ? inputWrapperSizeStyles[size] : inputWrapperSizeStyles.regular);
1243
+ const inputClasses = setStyleXProps(inputStyles.base, size ? inputStyles[size] : inputStyles.regular);
1244
+ return (jsxRuntime.jsxs("div", { "aria-disabled": rest.disabled, className: `${inputWrapperClasses.className} ${wrapperClassName}`, children: [leftIcon && (jsxRuntime.jsx("span", { className: setStyleXProps(commonStyles.flexCenter).className, children: leftIcon })), jsxRuntime.jsx("input", { ref: ref, className: `${inputClasses.className} ${rest.className}`, ...rest }), rightIcon && (jsxRuntime.jsx("span", { className: setStyleXProps(commonStyles.flexCenter).className, children: rightIcon }))] }));
1260
1245
  });
1261
1246
  Input.displayName = "Input";
1262
1247
 
@@ -1360,15 +1345,9 @@ const textAreaStyles = {
1360
1345
  * ```
1361
1346
  */
1362
1347
  const TextArea = React.forwardRef((rest, ref) => {
1363
- const textAreaClasses = stylex__namespace.props(textAreaStyles.base, rest.disabled ? textAreaStyles.disabled : undefined);
1364
- return jsxRuntime.jsx("div", {
1365
- ...stylex__namespace.props(textAreaWrapperStyles.base),
1366
- children: jsxRuntime.jsx("textarea", {
1367
- ref: ref,
1368
- className: `${textAreaClasses.className} ${rest.className}`,
1369
- ...rest
1370
- })
1371
- });
1348
+ const { setStyleXProps } = usePreferColors();
1349
+ const textAreaClasses = setStyleXProps(textAreaStyles.base, rest.disabled ? textAreaStyles.disabled : undefined);
1350
+ return (jsxRuntime.jsx("div", { ...setStyleXProps(textAreaWrapperStyles.base), children: jsxRuntime.jsx("textarea", { ref: ref, className: `${textAreaClasses.className} ${rest.className}`, ...rest }) }));
1372
1351
  });
1373
1352
  TextArea.displayName = "TextArea";
1374
1353
 
@@ -10123,64 +10102,32 @@ const X = createLucideIcon("x", __iconNode);
10123
10102
  * />
10124
10103
  * ```
10125
10104
  */
10126
- const Checkbox = React.forwardRef(({
10127
- label,
10128
- labelClassName,
10129
- wrapperClassName,
10130
- ...rest
10131
- }, ref) => {
10132
- const {
10133
- checked: isChecked,
10134
- defaultChecked,
10135
- id,
10136
- disabled,
10137
- className,
10138
- onCheckedChange: onChange
10139
- } = rest;
10140
- const [checked, setChecked] = React.useState(isChecked ?? defaultChecked);
10141
- React.useEffect(() => {
10142
- setChecked(isChecked ?? defaultChecked);
10143
- }, [isChecked, defaultChecked]);
10144
- const randomId = React.useId();
10145
- const checkboxWrapperClasses = stylex__namespace.props(checkboxWrapperStyles.base);
10146
- const checkboxClasses = stylex__namespace.props(checkboxStyles.base);
10147
- const labelClasses = stylex__namespace.props(labelStyles.base, disabled ? labelStyles.disabled : undefined);
10148
- const checkboxIconClasses = stylex__namespace.props(checkboxStyles.icon, checked ? checkboxStyles.iconChecked : undefined, disabled ? checkboxStyles.iconDisabled : undefined);
10149
- const renderCheckboxIcon = (checked, disabled) => {
10150
- if (disabled) {
10151
- return jsxRuntime.jsx(SquareMinus, {
10152
- ...checkboxIconClasses
10153
- });
10154
- } else if (checked) {
10155
- return jsxRuntime.jsx(SquareCheck, {
10156
- ...checkboxIconClasses
10157
- });
10158
- }
10159
- return jsxRuntime.jsx(Square, {
10160
- ...checkboxIconClasses
10161
- });
10162
- };
10163
- const onCheckedChange = value => {
10164
- setChecked(value);
10165
- onChange?.(value);
10166
- };
10167
- return jsxRuntime.jsxs("div", {
10168
- className: `${checkboxWrapperClasses.className} ${wrapperClassName}`,
10169
- children: [jsxRuntime.jsx(Checkbox$1, {
10170
- ref: ref,
10171
- id: id ?? randomId,
10172
- ...rest,
10173
- checked: checked,
10174
- className: `${checkboxClasses.className} ${className}`,
10175
- onCheckedChange: onCheckedChange,
10176
- children: renderCheckboxIcon(checked, disabled)
10177
- }), jsxRuntime.jsx("label", {
10178
- className: `${labelClasses.className} ${labelClassName}`,
10179
- htmlFor: id ?? randomId,
10180
- "aria-disabled": disabled,
10181
- children: label
10182
- })]
10183
- });
10105
+ const Checkbox = React.forwardRef(({ label, labelClassName, wrapperClassName, ...rest }, ref) => {
10106
+ const { checked: isChecked, defaultChecked, id, disabled, className, onCheckedChange: onChange, } = rest;
10107
+ const { setStyleXProps } = usePreferColors();
10108
+ const [checked, setChecked] = React.useState(isChecked ?? defaultChecked);
10109
+ React.useEffect(() => {
10110
+ setChecked(isChecked ?? defaultChecked);
10111
+ }, [isChecked, defaultChecked]);
10112
+ const randomId = React.useId();
10113
+ const checkboxWrapperClasses = setStyleXProps(checkboxWrapperStyles.base);
10114
+ const checkboxClasses = setStyleXProps(checkboxStyles.base);
10115
+ const labelClasses = setStyleXProps(labelStyles.base, disabled ? labelStyles.disabled : undefined);
10116
+ const checkboxIconClasses = setStyleXProps(checkboxStyles.icon, checked ? checkboxStyles.iconChecked : undefined, disabled ? checkboxStyles.iconDisabled : undefined);
10117
+ const renderCheckboxIcon = (checked, disabled) => {
10118
+ if (disabled) {
10119
+ return jsxRuntime.jsx(SquareMinus, { ...checkboxIconClasses });
10120
+ }
10121
+ else if (checked) {
10122
+ return jsxRuntime.jsx(SquareCheck, { ...checkboxIconClasses });
10123
+ }
10124
+ return jsxRuntime.jsx(Square, { ...checkboxIconClasses });
10125
+ };
10126
+ const onCheckedChange = (value) => {
10127
+ setChecked(value);
10128
+ onChange?.(value);
10129
+ };
10130
+ return (jsxRuntime.jsxs("div", { className: `${checkboxWrapperClasses.className} ${wrapperClassName}`, children: [jsxRuntime.jsx(Checkbox$1, { ref: ref, id: id ?? randomId, ...rest, checked: checked, className: `${checkboxClasses.className} ${className}`, onCheckedChange: onCheckedChange, children: renderCheckboxIcon(checked, disabled) }), jsxRuntime.jsx("label", { className: `${labelClasses.className} ${labelClassName}`, htmlFor: id ?? randomId, "aria-disabled": disabled, children: label })] }));
10184
10131
  });
10185
10132
  Checkbox.displayName = "Checkbox";
10186
10133
 
@@ -10456,13 +10403,16 @@ const RadioGroup = React.forwardRef(({
10456
10403
  orientation = "vertical",
10457
10404
  ...rest
10458
10405
  }, ref) => {
10406
+ const {
10407
+ setStyleXProps
10408
+ } = usePreferColors();
10459
10409
  const {
10460
10410
  disabled,
10461
10411
  children,
10462
10412
  value,
10463
10413
  ...restProps
10464
10414
  } = rest;
10465
- const radioGroupClasses = stylex__namespace.props(radioGroupStyles.base, orientation === "horizontal" ? radioGroupStyles.horizontal : undefined);
10415
+ const radioGroupClasses = setStyleXProps(radioGroupStyles.base, orientation === "horizontal" ? radioGroupStyles.horizontal : undefined);
10466
10416
  return jsxRuntime.jsx(RadioGroupContext, {
10467
10417
  value: {
10468
10418
  value: value ?? "",
@@ -10490,11 +10440,14 @@ const RadioItem = React.forwardRef(({
10490
10440
  ...restProps
10491
10441
  } = rest;
10492
10442
  const randomId = id ?? React.useId();
10443
+ const {
10444
+ setStyleXProps
10445
+ } = usePreferColors();
10493
10446
  const isSelected = React.useContext(RadioGroupContext).value === value;
10494
10447
  const isDisabled = React.useContext(RadioGroupContext).disabled || disabled || false;
10495
- const radioItemWrapperClasses = stylex__namespace.props(radioItemWrapperStyles.base);
10496
- const radioItemLabelClasses = stylex__namespace.props(radioItemLabelStyles.base, isSelected ? radioItemLabelStyles.selected : undefined, isDisabled ? radioItemLabelStyles.disabled : undefined);
10497
- const radioItemClasses = stylex__namespace.props(radioItemStyles.base);
10448
+ const radioItemWrapperClasses = setStyleXProps(radioItemWrapperStyles.base);
10449
+ const radioItemLabelClasses = setStyleXProps(radioItemLabelStyles.base, isSelected ? radioItemLabelStyles.selected : undefined, isDisabled ? radioItemLabelStyles.disabled : undefined);
10450
+ const radioItemClasses = setStyleXProps(radioItemStyles.base);
10498
10451
  return jsxRuntime.jsxs("div", {
10499
10452
  className: `${radioItemWrapperClasses.className} ${wrapperClassName ?? ""}`,
10500
10453
  children: [jsxRuntime.jsx(Item2, {
@@ -10562,15 +10515,6 @@ const cardStyles = {
10562
10515
  k5QoK5: null,
10563
10516
  kLZC3w: null,
10564
10517
  kL6WhQ: null,
10565
- kmVPX3: "tpst1mkn4gz",
10566
- kg3NbH: null,
10567
- kuDDbn: null,
10568
- kE3dHu: null,
10569
- kP0aTx: null,
10570
- kpe85a: null,
10571
- k8WAf4: null,
10572
- kLKAdn: null,
10573
- kGO01o: null,
10574
10518
  kWkggS: "tpst1tugou3",
10575
10519
  $$css: true
10576
10520
  }
@@ -10633,60 +10577,28 @@ const cardFooterStyles = {
10633
10577
  * </CardFooter>
10634
10578
  * </Card>
10635
10579
  */
10636
- const Card = React.forwardRef(({
10637
- className,
10638
- ...rest
10639
- }, ref) => {
10640
- const cardClasses = stylex__namespace.props(cardStyles.base);
10641
- return jsxRuntime.jsx("div", {
10642
- ...rest,
10643
- ref: ref,
10644
- className: `${cardClasses.className} ${className ?? ""}`,
10645
- children: rest.children
10646
- });
10580
+ const Card = React.forwardRef(({ className, ...rest }, ref) => {
10581
+ const { setStyleXProps } = usePreferColors();
10582
+ const cardClasses = setStyleXProps(cardStyles.base);
10583
+ return (jsxRuntime.jsx("div", { ...rest, ref: ref, className: `${cardClasses.className} ${className ?? ""}`, children: rest.children }));
10647
10584
  });
10648
- const CardBody = React.forwardRef(({
10649
- className,
10650
- ...rest
10651
- }, ref) => {
10652
- const cardBodyClasses = stylex__namespace.props(cardBodyStyles.base);
10653
- return jsxRuntime.jsx("div", {
10654
- ...rest,
10655
- ref: ref,
10656
- className: `${cardBodyClasses.className} ${className ?? ""}`,
10657
- children: rest.children
10658
- });
10585
+ const CardBody = React.forwardRef(({ className, ...rest }, ref) => {
10586
+ const { setStyleXProps } = usePreferColors();
10587
+ const cardBodyClasses = setStyleXProps(cardBodyStyles.base);
10588
+ return (jsxRuntime.jsx("div", { ...rest, ref: ref, className: `${cardBodyClasses.className} ${className ?? ""}`, children: rest.children }));
10659
10589
  });
10660
- const CardHeader = React.forwardRef(({
10661
- className,
10662
- ...rest
10663
- }, ref) => {
10664
- const cardHeaderClasses = stylex__namespace.props(cardHeaderStyles.base);
10665
- return jsxRuntime.jsx("div", {
10666
- ...rest,
10667
- ref: ref,
10668
- className: `${cardHeaderClasses.className} ${className ?? ""}`,
10669
- children: rest.children
10670
- });
10590
+ const CardHeader = React.forwardRef(({ className, ...rest }, ref) => {
10591
+ const { setStyleXProps } = usePreferColors();
10592
+ const cardHeaderClasses = setStyleXProps(cardHeaderStyles.base);
10593
+ return (jsxRuntime.jsx("div", { ...rest, ref: ref, className: `${cardHeaderClasses.className} ${className ?? ""}`, children: rest.children }));
10671
10594
  });
10672
10595
  const CardContent = React.forwardRef((rest, ref) => {
10673
- return jsxRuntime.jsx("div", {
10674
- ...rest,
10675
- ref: ref,
10676
- children: rest.children
10677
- });
10596
+ return (jsxRuntime.jsx("div", { ...rest, ref: ref, children: rest.children }));
10678
10597
  });
10679
- const CardFooter = React.forwardRef(({
10680
- className,
10681
- ...rest
10682
- }, ref) => {
10683
- const cardFooterClasses = stylex__namespace.props(cardFooterStyles.base);
10684
- return jsxRuntime.jsx("div", {
10685
- ...rest,
10686
- ref: ref,
10687
- className: `${cardFooterClasses.className} ${className ?? ""}`,
10688
- children: rest.children
10689
- });
10598
+ const CardFooter = React.forwardRef(({ className, ...rest }, ref) => {
10599
+ const { setStyleXProps } = usePreferColors();
10600
+ const cardFooterClasses = setStyleXProps(cardFooterStyles.base);
10601
+ return (jsxRuntime.jsx("div", { ...rest, ref: ref, className: `${cardFooterClasses.className} ${className ?? ""}`, children: rest.children }));
10690
10602
  });
10691
10603
 
10692
10604
  const dialogOverlayStyles = {
@@ -10772,58 +10684,23 @@ const dialogContentStyles = {
10772
10684
  * </Dialog>
10773
10685
  */
10774
10686
  const Dialog = Root$2;
10775
- const DialogTrigger = props => {
10776
- return jsxRuntime.jsx(Trigger$4, {
10777
- className: props.className,
10778
- ...props,
10779
- "data-slot": "dialog-trigger",
10780
- asChild: true,
10781
- children: props.children
10782
- });
10687
+ const DialogTrigger = (props) => {
10688
+ return (jsxRuntime.jsx(Trigger$4, { className: props.className, ...props, "data-slot": "dialog-trigger", asChild: true, children: props.children }));
10783
10689
  };
10784
10690
  const DialogPortal = Portal$3;
10785
10691
  const DialogClose = Close;
10786
- const DialogContent = ({
10787
- className,
10788
- children,
10789
- ...props
10790
- }) => {
10791
- const dialogOverlayClasses = stylex__namespace.props(dialogOverlayStyles.base);
10792
- const dialogContentClasses = stylex__namespace.props(dialogContentStyles.base);
10793
- return jsxRuntime.jsxs(Portal$3, {
10794
- children: [jsxRuntime.jsx(Overlay, {
10795
- ...dialogOverlayClasses
10796
- }), jsxRuntime.jsxs(Content$1, {
10797
- className: `${dialogContentClasses.className} ${className ?? ""}`,
10798
- ...props,
10799
- children: [jsxRuntime.jsx(Description, {}), jsxRuntime.jsx(Card, {
10800
- children: children
10801
- })]
10802
- })]
10803
- });
10692
+ const DialogContent = ({ className, children, ...props }) => {
10693
+ const { setStyleXProps } = usePreferColors();
10694
+ const dialogOverlayClasses = setStyleXProps(dialogOverlayStyles.base);
10695
+ const dialogContentClasses = setStyleXProps(dialogContentStyles.base);
10696
+ return (jsxRuntime.jsxs(Portal$3, { children: [jsxRuntime.jsx(Overlay, { ...dialogOverlayClasses }), jsxRuntime.jsxs(Content$1, { className: `${dialogContentClasses.className} ${className ?? ""}`, ...props, children: [jsxRuntime.jsx(Description, {}), jsxRuntime.jsx(Card, { children: children })] })] }));
10804
10697
  };
10805
- const DialogHeader = ({
10806
- className,
10807
- ...props
10808
- }) => {
10809
- return jsxRuntime.jsx(Title, {
10810
- "data-slot": "dialog-title",
10811
- ...props,
10812
- children: jsxRuntime.jsx(CardHeader, {
10813
- className: className,
10814
- children: props.children
10815
- })
10816
- });
10698
+ const DialogHeader = ({ className, ...props }) => {
10699
+ return (jsxRuntime.jsx(Title, { "data-slot": "dialog-title", ...props, children: jsxRuntime.jsx(CardHeader, { className: className, children: props.children }) }));
10817
10700
  };
10818
10701
  const DialogFooter = CardFooter;
10819
- const DialogDescription = ({
10820
- className,
10821
- ...props
10822
- }) => {
10823
- return jsxRuntime.jsx(CardBody, {
10824
- className: className,
10825
- children: props.children
10826
- });
10702
+ const DialogDescription = ({ className, ...props }) => {
10703
+ return jsxRuntime.jsx(CardBody, { className: className, children: props.children });
10827
10704
  };
10828
10705
 
10829
10706
  const selectIconWrapperStyles = {
@@ -11145,95 +11022,37 @@ const selectGroupLabelStyles = {
11145
11022
  * </SelectContent>
11146
11023
  * </Select>
11147
11024
  */
11148
- const Select = props => jsxRuntime.jsx(Root2, {
11149
- ...props
11150
- });
11151
- const SelectTrigger = ({
11152
- placeholder,
11153
- variant = "outline",
11154
- size = "regular",
11155
- icon,
11156
- ...rest
11157
- }) => {
11158
- const {
11159
- className,
11160
- ...otherProps
11161
- } = rest;
11162
- const triggerClasses = stylex__namespace.props(selectTriggerStyles.base, selectTriggerStyles[variant], selectTriggerStyles[size]);
11163
- const iconWrapperClasses = stylex__namespace.props(selectIconWrapperStyles.base);
11164
- return jsxRuntime.jsxs(Trigger$1, {
11165
- className: `${triggerClasses.className} ${className}`,
11166
- ...otherProps,
11167
- children: [icon && jsxRuntime.jsx("div", {
11168
- className: iconWrapperClasses.className,
11169
- children: icon
11170
- }), jsxRuntime.jsx(Value, {
11171
- placeholder: placeholder
11172
- }), jsxRuntime.jsx(Icon$1, {
11173
- className: iconWrapperClasses.className,
11174
- children: jsxRuntime.jsx(CaretDownIcon, {})
11175
- })]
11176
- });
11177
- };
11178
- const SelectContent = ({
11179
- children,
11180
- ...rest
11181
- }) => {
11182
- const contentClasses = stylex__namespace.props(selectContentStyles.base);
11183
- const {
11184
- className,
11185
- position,
11186
- sideOffset,
11187
- ...otherProps
11188
- } = rest;
11189
- return jsxRuntime.jsx(Portal$1, {
11190
- children: jsxRuntime.jsx(Content2$1, {
11191
- position: "popper",
11192
- sideOffset: 7,
11193
- className: `${contentClasses.className} ${className}`,
11194
- ...otherProps,
11195
- children: jsxRuntime.jsx(Viewport, {
11196
- children: children
11197
- })
11198
- })
11199
- });
11025
+ const Select = (props) => jsxRuntime.jsx(Root2, { ...props });
11026
+ const SelectTrigger = ({ placeholder, variant = "outline", size = "regular", icon, ...rest }) => {
11027
+ const { setStyleXProps } = usePreferColors();
11028
+ const { className, ...otherProps } = rest;
11029
+ const triggerClasses = setStyleXProps(selectTriggerStyles.base, selectTriggerStyles[variant], selectTriggerStyles[size]);
11030
+ const iconWrapperClasses = setStyleXProps(selectIconWrapperStyles.base);
11031
+ return (jsxRuntime.jsxs(Trigger$1, { className: `${triggerClasses.className} ${className}`, ...otherProps, children: [icon && jsxRuntime.jsx("div", { className: iconWrapperClasses.className, children: icon }), jsxRuntime.jsx(Value, { placeholder: placeholder }), jsxRuntime.jsx(Icon$1, { className: iconWrapperClasses.className, children: jsxRuntime.jsx(CaretDownIcon, {}) })] }));
11032
+ };
11033
+ const SelectContent = ({ children, ...rest }) => {
11034
+ const { setStyleXProps } = usePreferColors();
11035
+ const contentClasses = setStyleXProps(selectContentStyles.base);
11036
+ const { className, position, sideOffset, ...otherProps } = rest;
11037
+ return (jsxRuntime.jsx(Portal$1, { children: jsxRuntime.jsx(Content2$1, { position: "popper", sideOffset: 7, className: `${contentClasses.className} ${className}`, ...otherProps, children: jsxRuntime.jsx(Viewport, { children: children }) }) }));
11200
11038
  };
11201
11039
  const SelectGroup = Group;
11202
- const SelectLabel = props => {
11203
- const groupLabelClasses = stylex__namespace.props(selectGroupLabelStyles.base);
11204
- return jsxRuntime.jsx(Label, {
11205
- ...props,
11206
- className: groupLabelClasses.className
11207
- });
11208
- };
11209
- const SelectSeparator = props => {
11210
- const separatorClasses = stylex__namespace.props(selectSeparatorStyles.base);
11211
- return jsxRuntime.jsx(Separator, {
11212
- ...props,
11213
- className: separatorClasses.className
11214
- });
11215
- };
11216
- const SelectItem = ({
11217
- indicator,
11218
- ...rest
11219
- }) => {
11220
- const itemClasses = stylex__namespace.props(selectItemStyles.base);
11221
- const itemIndicatorClasses = stylex__namespace.props(selectItemStyles.indicator);
11222
- const {
11223
- className,
11224
- textValue,
11225
- ...otherProps
11226
- } = rest;
11227
- return jsxRuntime.jsxs(Item, {
11228
- className: `${itemClasses.className} ${className}`,
11229
- ...otherProps,
11230
- children: [jsxRuntime.jsx(ItemText, {
11231
- children: textValue
11232
- }), indicator && jsxRuntime.jsx(ItemIndicator, {
11233
- className: itemIndicatorClasses.className,
11234
- children: indicator
11235
- })]
11236
- });
11040
+ const SelectLabel = (props) => {
11041
+ const { setStyleXProps } = usePreferColors();
11042
+ const groupLabelClasses = setStyleXProps(selectGroupLabelStyles.base);
11043
+ return (jsxRuntime.jsx(Label, { ...props, className: groupLabelClasses.className }));
11044
+ };
11045
+ const SelectSeparator = (props) => {
11046
+ const { setStyleXProps } = usePreferColors();
11047
+ const separatorClasses = setStyleXProps(selectSeparatorStyles.base);
11048
+ return (jsxRuntime.jsx(Separator, { ...props, className: separatorClasses.className }));
11049
+ };
11050
+ const SelectItem = ({ indicator, ...rest }) => {
11051
+ const { setStyleXProps } = usePreferColors();
11052
+ const itemClasses = setStyleXProps(selectItemStyles.base);
11053
+ const itemIndicatorClasses = setStyleXProps(selectItemStyles.indicator);
11054
+ const { className, textValue, ...otherProps } = rest;
11055
+ return (jsxRuntime.jsxs(Item, { className: `${itemClasses.className} ${className}`, ...otherProps, children: [jsxRuntime.jsx(ItemText, { children: textValue }), indicator && (jsxRuntime.jsx(ItemIndicator, { className: itemIndicatorClasses.className, children: indicator }))] }));
11237
11056
  };
11238
11057
  Select.displayName = "Select";
11239
11058
  SelectTrigger.displayName = "SelectTrigger";
@@ -11383,70 +11202,41 @@ const verticalMenuStyles = {
11383
11202
  };
11384
11203
 
11385
11204
  const VerticalMenusContext = React.createContext({
11386
- value: "",
11387
- disabled: false,
11388
- setSelectedMenu: () => {}
11205
+ value: "",
11206
+ disabled: false,
11207
+ setSelectedMenu: () => { },
11389
11208
  });
11390
- const VerticalMenus = React.forwardRef(({
11391
- disabled,
11392
- value,
11393
- onValueChange,
11394
- className,
11395
- ...rest
11396
- }, ref) => {
11397
- const [selectedMenu, setSelectedMenu] = React.useState(value || "");
11398
- const verticalMenusClasses = stylex__namespace.props(verticalMenusWrapperStyles.base);
11399
- React.useEffect(() => {
11400
- if (!onValueChange) return;
11401
- onValueChange(selectedMenu);
11402
- }, [selectedMenu]);
11403
- return jsxRuntime.jsx(VerticalMenusContext, {
11404
- value: {
11405
- value: selectedMenu,
11406
- disabled: disabled ?? false,
11407
- setSelectedMenu
11408
- },
11409
- children: jsxRuntime.jsx("div", {
11410
- ref: ref,
11411
- className: `${verticalMenusClasses.className} ${className || ""}`,
11412
- ...rest,
11413
- children: rest.children
11414
- })
11415
- });
11209
+ const VerticalMenus = React.forwardRef(({ disabled, value, onValueChange, className, ...rest }, ref) => {
11210
+ const { setStyleXProps } = usePreferColors();
11211
+ const [selectedMenu, setSelectedMenu] = React.useState(value || "");
11212
+ const verticalMenusClasses = setStyleXProps(verticalMenusWrapperStyles.base);
11213
+ React.useEffect(() => {
11214
+ if (!onValueChange)
11215
+ return;
11216
+ onValueChange(selectedMenu);
11217
+ }, [selectedMenu]);
11218
+ return (jsxRuntime.jsx(VerticalMenusContext, { value: {
11219
+ value: selectedMenu,
11220
+ disabled: disabled ?? false,
11221
+ setSelectedMenu,
11222
+ }, children: jsxRuntime.jsx("div", { ref: ref, className: `${verticalMenusClasses.className} ${className || ""}`, ...rest, children: rest.children }) }));
11416
11223
  });
11417
- const VerticalMenu = React.forwardRef(({
11418
- disabled,
11419
- value,
11420
- label,
11421
- icon,
11422
- variant = "accent",
11423
- size = "regular",
11424
- ...rest
11425
- }, ref) => {
11426
- const context = React.useContext(VerticalMenusContext);
11427
- const isSelected = context.value === value;
11428
- const isDisabled = context.disabled || disabled || false;
11429
- const verticalMenuClasses = stylex__namespace.props(verticalMenuStyles.base, verticalMenuStyles[variant], verticalMenuStyles[size]);
11430
- const verticalMenuIconClasses = stylex__namespace.props(verticalMenuIconStyles.base);
11431
- const onClick = e => {
11432
- if (isDisabled) return;
11433
- if (context.disabled) return;
11434
- context.setSelectedMenu?.(value);
11435
- rest.onClick?.(e);
11436
- };
11437
- return jsxRuntime.jsxs("button", {
11438
- ref: ref,
11439
- className: `${verticalMenuClasses.className} ${rest.className || ""}`,
11440
- ...rest,
11441
- disabled: isDisabled,
11442
- value: value,
11443
- "data-selected": isSelected,
11444
- onClick: onClick,
11445
- children: [icon && jsxRuntime.jsx("span", {
11446
- ...verticalMenuIconClasses,
11447
- children: icon
11448
- }), label]
11449
- });
11224
+ const VerticalMenu = React.forwardRef(({ disabled, value, label, icon, variant = "accent", size = "regular", ...rest }, ref) => {
11225
+ const context = React.useContext(VerticalMenusContext);
11226
+ const { setStyleXProps } = usePreferColors();
11227
+ const isSelected = context.value === value;
11228
+ const isDisabled = context.disabled || disabled || false;
11229
+ const verticalMenuClasses = setStyleXProps(verticalMenuStyles.base, verticalMenuStyles[variant], verticalMenuStyles[size]);
11230
+ const verticalMenuIconClasses = setStyleXProps(verticalMenuIconStyles.base);
11231
+ const onClick = (e) => {
11232
+ if (isDisabled)
11233
+ return;
11234
+ if (context.disabled)
11235
+ return;
11236
+ context.setSelectedMenu?.(value);
11237
+ rest.onClick?.(e);
11238
+ };
11239
+ return (jsxRuntime.jsxs("button", { ref: ref, className: `${verticalMenuClasses.className} ${rest.className || ""}`, ...rest, disabled: isDisabled, value: value, "data-selected": isSelected, onClick: onClick, children: [icon && jsxRuntime.jsx("span", { ...verticalMenuIconClasses, children: icon }), label] }));
11450
11240
  });
11451
11241
  VerticalMenu.displayName = "VerticalMenu";
11452
11242
 
@@ -11576,78 +11366,40 @@ const horizontalTabStyles = {
11576
11366
  };
11577
11367
 
11578
11368
  const HorizontalTabContext = React.createContext({
11579
- value: "",
11580
- disabled: false,
11581
- setSelectedTab: () => {}
11369
+ value: "",
11370
+ disabled: false,
11371
+ setSelectedTab: () => { },
11582
11372
  });
11583
- const HorizontalTabs = React.forwardRef(({
11584
- disabled,
11585
- value,
11586
- onValueChange,
11587
- className,
11588
- ...rest
11589
- }, ref) => {
11590
- const [selectedTab, setSelectedTab] = React.useState(value || "");
11591
- const horizontalTabClasses = stylex__namespace.props(horizontalTabWrapperStyles.base);
11592
- React.useEffect(() => {
11593
- if (!onValueChange) return;
11594
- onValueChange(selectedTab);
11595
- }, [selectedTab]);
11596
- return jsxRuntime.jsx(HorizontalTabContext.Provider, {
11597
- value: {
11598
- value: selectedTab,
11599
- disabled: disabled ?? false,
11600
- setSelectedTab
11601
- },
11602
- children: jsxRuntime.jsx("div", {
11603
- ref: ref,
11604
- className: `${horizontalTabClasses.className} ${className || ""}`,
11605
- ...rest,
11606
- children: rest.children
11607
- })
11608
- });
11373
+ const HorizontalTabs = React.forwardRef(({ disabled, value, onValueChange, className, ...rest }, ref) => {
11374
+ const { setStyleXProps } = usePreferColors();
11375
+ const [selectedTab, setSelectedTab] = React.useState(value || "");
11376
+ const horizontalTabClasses = setStyleXProps(horizontalTabWrapperStyles.base);
11377
+ React.useEffect(() => {
11378
+ if (!onValueChange)
11379
+ return;
11380
+ onValueChange(selectedTab);
11381
+ }, [selectedTab]);
11382
+ return (jsxRuntime.jsx(HorizontalTabContext.Provider, { value: {
11383
+ value: selectedTab,
11384
+ disabled: disabled ?? false,
11385
+ setSelectedTab,
11386
+ }, children: jsxRuntime.jsx("div", { ref: ref, className: `${horizontalTabClasses.className} ${className || ""}`, ...rest, children: rest.children }) }));
11609
11387
  });
11610
- const HorizontalTab = React.forwardRef(({
11611
- value,
11612
- label,
11613
- className,
11614
- icon,
11615
- size = "regular",
11616
- ...rest
11617
- }, ref) => {
11618
- const {
11619
- value: selectedTab,
11620
- setSelectedTab,
11621
- disabled
11622
- } = React.useContext(HorizontalTabContext);
11623
- const isSelected = selectedTab === value;
11624
- const isDisabled = disabled || rest.disabled;
11625
- const handleClick = () => {
11626
- if (isDisabled) return;
11627
- setSelectedTab(value);
11628
- };
11629
- const horizontalTabClasses = stylex__namespace.props(horizontalTabStyles.base);
11630
- const iconClasses = stylex__namespace.props(horizontalTabStyles.icon, size === "small" && horizontalTabStyles.iconSmall);
11631
- const lineClasses = stylex__namespace.props(horizontalTabStyles.line);
11632
- const labelWrapperClasses = stylex__namespace.props(horizontalTabStyles.labelWrapper, horizontalTabStyles[size || "regular"]);
11633
- return jsxRuntime.jsxs("button", {
11634
- ref: ref,
11635
- className: `${horizontalTabClasses.className} ${className || ""}`,
11636
- onClick: handleClick,
11637
- disabled: isDisabled,
11638
- "data-selected": isSelected,
11639
- ...rest,
11640
- children: [jsxRuntime.jsxs("div", {
11641
- ...labelWrapperClasses,
11642
- children: [icon && jsxRuntime.jsx("span", {
11643
- ...iconClasses,
11644
- children: icon
11645
- }), label]
11646
- }), jsxRuntime.jsx("div", {
11647
- ...lineClasses,
11648
- "data-selected": isSelected
11649
- })]
11650
- });
11388
+ const HorizontalTab = React.forwardRef(({ value, label, className, icon, size = "regular", ...rest }, ref) => {
11389
+ const { value: selectedTab, setSelectedTab, disabled, } = React.useContext(HorizontalTabContext);
11390
+ const { setStyleXProps } = usePreferColors();
11391
+ const isSelected = selectedTab === value;
11392
+ const isDisabled = disabled || rest.disabled;
11393
+ const handleClick = () => {
11394
+ if (isDisabled)
11395
+ return;
11396
+ setSelectedTab(value);
11397
+ };
11398
+ const horizontalTabClasses = setStyleXProps(horizontalTabStyles.base);
11399
+ const iconClasses = setStyleXProps(horizontalTabStyles.icon, size === "small" && horizontalTabStyles.iconSmall);
11400
+ const lineClasses = setStyleXProps(horizontalTabStyles.line);
11401
+ const labelWrapperClasses = setStyleXProps(horizontalTabStyles.labelWrapper, horizontalTabStyles[size || "regular"]);
11402
+ return (jsxRuntime.jsxs("button", { ref: ref, className: `${horizontalTabClasses.className} ${className || ""}`, onClick: handleClick, disabled: isDisabled, "data-selected": isSelected, ...rest, children: [jsxRuntime.jsxs("div", { ...labelWrapperClasses, children: [icon && jsxRuntime.jsx("span", { ...iconClasses, children: icon }), label] }), jsxRuntime.jsx("div", { ...lineClasses, "data-selected": isSelected })] }));
11651
11403
  });
11652
11404
 
11653
11405
  const modeTabWrapperStyles = {
@@ -11760,69 +11512,38 @@ const modeTabStyles = {
11760
11512
  };
11761
11513
 
11762
11514
  const ModeTabContext = React.createContext({
11763
- value: "",
11764
- disabled: false,
11765
- setSelectedTab: () => {}
11515
+ value: "",
11516
+ disabled: false,
11517
+ setSelectedTab: () => { },
11766
11518
  });
11767
- const ModeTabs = React.forwardRef(({
11768
- disabled,
11769
- value,
11770
- onValueChange,
11771
- className,
11772
- ...rest
11773
- }, ref) => {
11774
- const [selectedTab, setSelectedTab] = React.useState(value || "");
11775
- const modeTabsClasses = stylex__namespace.props(modeTabWrapperStyles.base);
11776
- React.useEffect(() => {
11777
- if (!onValueChange) return;
11778
- onValueChange(selectedTab);
11779
- }, [selectedTab]);
11780
- return jsxRuntime.jsx(ModeTabContext, {
11781
- value: {
11782
- value: selectedTab,
11783
- disabled: disabled ?? false,
11784
- setSelectedTab
11785
- },
11786
- children: jsxRuntime.jsx("div", {
11787
- ref: ref,
11788
- className: `${modeTabsClasses.className} ${className || ""}`,
11789
- ...rest,
11790
- children: rest.children
11791
- })
11792
- });
11519
+ const ModeTabs = React.forwardRef(({ disabled, value, onValueChange, className, ...rest }, ref) => {
11520
+ const { setStyleXProps } = usePreferColors();
11521
+ const [selectedTab, setSelectedTab] = React.useState(value || "");
11522
+ const modeTabsClasses = setStyleXProps(modeTabWrapperStyles.base);
11523
+ React.useEffect(() => {
11524
+ if (!onValueChange)
11525
+ return;
11526
+ onValueChange(selectedTab);
11527
+ }, [selectedTab]);
11528
+ return (jsxRuntime.jsx(ModeTabContext, { value: {
11529
+ value: selectedTab,
11530
+ disabled: disabled ?? false,
11531
+ setSelectedTab,
11532
+ }, children: jsxRuntime.jsx("div", { ref: ref, className: `${modeTabsClasses.className} ${className || ""}`, ...rest, children: rest.children }) }));
11793
11533
  });
11794
- const ModeTab = React.forwardRef(({
11795
- label,
11796
- icon,
11797
- value,
11798
- className,
11799
- ...rest
11800
- }, ref) => {
11801
- const modeTabClasses = stylex__namespace.props(modeTabStyles.base);
11802
- const iconClasses = stylex__namespace.props(modeTabStyles.icon);
11803
- const {
11804
- value: selectedTab,
11805
- disabled,
11806
- setSelectedTab
11807
- } = React.useContext(ModeTabContext);
11808
- const isSelected = selectedTab === value;
11809
- const isDisabled = disabled || rest.disabled;
11810
- const handleClick = () => {
11811
- if (isDisabled) return;
11812
- setSelectedTab(value);
11813
- };
11814
- return jsxRuntime.jsxs("button", {
11815
- ref: ref,
11816
- className: `${modeTabClasses.className} ${className || ""}`,
11817
- "data-selected": isSelected,
11818
- disabled: isDisabled,
11819
- onClick: handleClick,
11820
- ...rest,
11821
- children: [icon && jsxRuntime.jsx("span", {
11822
- ...iconClasses,
11823
- children: icon
11824
- }), label]
11825
- });
11534
+ const ModeTab = React.forwardRef(({ label, icon, value, className, ...rest }, ref) => {
11535
+ const { setStyleXProps } = usePreferColors();
11536
+ const modeTabClasses = setStyleXProps(modeTabStyles.base);
11537
+ const iconClasses = setStyleXProps(modeTabStyles.icon);
11538
+ const { value: selectedTab, disabled, setSelectedTab, } = React.useContext(ModeTabContext);
11539
+ const isSelected = selectedTab === value;
11540
+ const isDisabled = disabled || rest.disabled;
11541
+ const handleClick = () => {
11542
+ if (isDisabled)
11543
+ return;
11544
+ setSelectedTab(value);
11545
+ };
11546
+ return (jsxRuntime.jsxs("button", { ref: ref, className: `${modeTabClasses.className} ${className || ""}`, "data-selected": isSelected, disabled: isDisabled, onClick: handleClick, ...rest, children: [icon && jsxRuntime.jsx("span", { ...iconClasses, children: icon }), label] }));
11826
11547
  });
11827
11548
 
11828
11549
  const tooltipDescriptionStyles = {
@@ -11988,94 +11709,40 @@ const tooltipShortStyles = {
11988
11709
  }
11989
11710
  };
11990
11711
 
11991
- const Tooltip = props => {
11992
- const {
11993
- delayDuration,
11994
- skipDelayDuration,
11995
- disableHoverableContent,
11996
- ...rest
11997
- } = props;
11998
- return jsxRuntime.jsx(Provider, {
11999
- delayDuration: delayDuration,
12000
- skipDelayDuration: skipDelayDuration,
12001
- disableHoverableContent: disableHoverableContent,
12002
- children: jsxRuntime.jsx(Root3, {
12003
- ...rest,
12004
- children: props.children
12005
- })
12006
- });
11712
+ const Tooltip = (props) => {
11713
+ const { delayDuration, skipDelayDuration, disableHoverableContent, ...rest } = props;
11714
+ return (jsxRuntime.jsx(Provider, { delayDuration: delayDuration, skipDelayDuration: skipDelayDuration, disableHoverableContent: disableHoverableContent, children: jsxRuntime.jsx(Root3, { ...rest, children: props.children }) }));
12007
11715
  };
12008
11716
  const TooltipTrigger = Trigger;
12009
- const TooltipContent = ({
12010
- type,
12011
- ...rest
12012
- }) => {
12013
- if (type === "default") {
12014
- const contentClasses = stylex__namespace.props(tooltipDescriptionStyles.base);
12015
- const {
12016
- className,
12017
- ...otherProps
12018
- } = rest;
12019
- return jsxRuntime.jsx(Portal, {
12020
- children: jsxRuntime.jsx(Content2, {
12021
- className: `${contentClasses.className} ${className}`,
12022
- ...otherProps,
12023
- children: rest.children
12024
- })
12025
- });
12026
- }
12027
- const {
12028
- variant = "default",
12029
- size = "regular"
12030
- } = rest;
12031
- const contentClasses = stylex__namespace.props(tooltipShortStyles.base, type === "short" && tooltipShortStyles[variant], type === "short" && tooltipShortStyles[size]);
12032
- return jsxRuntime.jsx(Portal, {
12033
- children: jsxRuntime.jsx(Content2, {
12034
- className: contentClasses.className,
12035
- ...rest,
12036
- children: rest.children
12037
- })
12038
- });
11717
+ const TooltipContent = ({ type, ...rest }) => {
11718
+ const { setStyleXProps } = usePreferColors();
11719
+ if (type === "default") {
11720
+ const contentClasses = setStyleXProps(tooltipDescriptionStyles.base);
11721
+ const { className, ...otherProps } = rest;
11722
+ return (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(Content2, { className: `${contentClasses.className} ${className}`, ...otherProps, children: rest.children }) }));
11723
+ }
11724
+ const { variant = "default", size = "regular" } = rest;
11725
+ const contentClasses = setStyleXProps(tooltipShortStyles.base, type === "short" && tooltipShortStyles[variant], type === "short" && tooltipShortStyles[size]);
11726
+ return (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(Content2, { className: contentClasses.className, ...rest, children: rest.children }) }));
12039
11727
  };
12040
11728
  const TooltipArrow = Arrow2;
12041
11729
  const TooltipHeader = React.forwardRef((props, ref) => {
12042
- const {
12043
- className,
12044
- ...otherProps
12045
- } = props;
12046
- const headerClasses = stylex__namespace.props(tooltipDescriptionStyles.header);
12047
- return jsxRuntime.jsx("div", {
12048
- className: `${headerClasses.className} ${className}`,
12049
- ...otherProps,
12050
- ref: ref,
12051
- children: props.children
12052
- });
11730
+ const { className, ...otherProps } = props;
11731
+ const { setStyleXProps } = usePreferColors();
11732
+ const headerClasses = setStyleXProps(tooltipDescriptionStyles.header);
11733
+ return (jsxRuntime.jsx("div", { className: `${headerClasses.className} ${className}`, ...otherProps, ref: ref, children: props.children }));
12053
11734
  });
12054
11735
  const TooltipDescription = React.forwardRef((props, ref) => {
12055
- const {
12056
- className,
12057
- ...otherProps
12058
- } = props;
12059
- const descriptionClasses = stylex__namespace.props(tooltipDescriptionStyles.content);
12060
- return jsxRuntime.jsx("div", {
12061
- className: `${descriptionClasses.className} ${className}`,
12062
- ...otherProps,
12063
- ref: ref,
12064
- children: props.children
12065
- });
11736
+ const { className, ...otherProps } = props;
11737
+ const { setStyleXProps } = usePreferColors();
11738
+ const descriptionClasses = setStyleXProps(tooltipDescriptionStyles.content);
11739
+ return (jsxRuntime.jsx("div", { className: `${descriptionClasses.className} ${className}`, ...otherProps, ref: ref, children: props.children }));
12066
11740
  });
12067
11741
  const TooltipFooter = React.forwardRef((props, ref) => {
12068
- const {
12069
- className,
12070
- ...otherProps
12071
- } = props;
12072
- const footerClasses = stylex__namespace.props(tooltipDescriptionStyles.footer);
12073
- return jsxRuntime.jsx("div", {
12074
- className: `${footerClasses.className} ${className}`,
12075
- ...otherProps,
12076
- ref: ref,
12077
- children: props.children
12078
- });
11742
+ const { className, ...otherProps } = props;
11743
+ const { setStyleXProps } = usePreferColors();
11744
+ const footerClasses = setStyleXProps(tooltipDescriptionStyles.footer);
11745
+ return (jsxRuntime.jsx("div", { className: `${footerClasses.className} ${className}`, ...otherProps, ref: ref, children: props.children }));
12079
11746
  });
12080
11747
 
12081
11748
  const tagStyles = {
@@ -12366,46 +12033,21 @@ const tagStyles = {
12366
12033
  }
12367
12034
  };
12368
12035
 
12369
- const Tag = React.forwardRef(({
12370
- icon,
12371
- value,
12372
- variant = "filled",
12373
- size = "regular",
12374
- className,
12375
- onDeleteClick,
12376
- onClick,
12377
- ...props
12378
- }, ref) => {
12379
- const [isSelected, setIsSelected] = React.useState(false);
12380
- const handleClick = event => {
12381
- setIsSelected(prev => !prev);
12382
- onClick?.(event);
12383
- };
12384
- const tagClasses = stylex__namespace.props(tagStyles.base, tagStyles[variant], tagStyles[size]);
12385
- const iconClasses = stylex__namespace.props(tagStyles.icon);
12386
- const textClasses = stylex__namespace.props(tagStyles.text);
12387
- const handleDeleteClick = event => {
12388
- event.stopPropagation();
12389
- onDeleteClick?.(value, event);
12390
- };
12391
- return jsxRuntime.jsxs("button", {
12392
- ref: ref,
12393
- className: `${tagClasses.className} ${className ?? ""}`,
12394
- onClick: handleClick,
12395
- "data-selected": isSelected,
12396
- ...props,
12397
- children: [icon && jsxRuntime.jsx("span", {
12398
- className: iconClasses.className,
12399
- children: icon
12400
- }), jsxRuntime.jsx("span", {
12401
- ...textClasses,
12402
- children: value.label
12403
- }), onDeleteClick && jsxRuntime.jsx("span", {
12404
- className: iconClasses.className,
12405
- onClick: handleDeleteClick,
12406
- children: jsxRuntime.jsx(X, {})
12407
- })]
12408
- });
12036
+ const Tag = React.forwardRef(({ icon, value, variant = "filled", size = "regular", className, onDeleteClick, onClick, ...props }, ref) => {
12037
+ const { setStyleXProps } = usePreferColors();
12038
+ const [isSelected, setIsSelected] = React.useState(false);
12039
+ const handleClick = (event) => {
12040
+ setIsSelected((prev) => !prev);
12041
+ onClick?.(event);
12042
+ };
12043
+ const tagClasses = setStyleXProps(tagStyles.base, tagStyles[variant], tagStyles[size]);
12044
+ const iconClasses = setStyleXProps(tagStyles.icon);
12045
+ const textClasses = setStyleXProps(tagStyles.text);
12046
+ const handleDeleteClick = (event) => {
12047
+ event.stopPropagation();
12048
+ onDeleteClick?.(value, event);
12049
+ };
12050
+ return (jsxRuntime.jsxs("button", { ref: ref, className: `${tagClasses.className} ${className ?? ""}`, onClick: handleClick, "data-selected": isSelected, ...props, children: [icon && jsxRuntime.jsx("span", { className: iconClasses.className, children: icon }), jsxRuntime.jsx("span", { ...textClasses, children: value.label }), onDeleteClick && (jsxRuntime.jsx("span", { className: iconClasses.className, onClick: handleDeleteClick, children: jsxRuntime.jsx(X, {}) }))] }));
12409
12051
  });
12410
12052
  Tag.displayName = "Tag";
12411
12053
 
@@ -12780,245 +12422,131 @@ const multipleSelectItemStyles = {
12780
12422
  };
12781
12423
 
12782
12424
  const MultipleSelectContext = React.createContext({
12783
- isOpen: false,
12784
- values: [],
12785
- disabled: false,
12786
- setSelectedValues: () => {},
12787
- setIsOpen: () => {}
12788
- });
12789
- const MultipleSelect = React.forwardRef(({
12790
- open,
12791
- onOpenChange,
12792
- disabled,
12793
- value,
12794
- onValueChange,
12795
- className,
12796
- children,
12797
- ...rest
12798
- }, ref) => {
12799
- const [isOpen, setIsOpen] = React.useState(open || false);
12800
- const [selectedValues, setSelectedValues] = React.useState([]);
12801
- const wrapperStyles = stylex__namespace.props(multipleSelectWrapperStyles.base);
12802
- React.useEffect(() => {
12803
- setIsOpen(open || false);
12804
- }, [open]);
12805
- const onSelectedValuesChange = newValues => {
12806
- setSelectedValues(newValues);
12807
- onValueChange?.(newValues.map(value => ({
12808
- value: value.value,
12809
- label: value.label
12810
- })));
12811
- };
12812
- const onTriggerOpenChange = value => {
12813
- setIsOpen(value);
12814
- onOpenChange?.(value);
12815
- };
12816
- return jsxRuntime.jsx(MultipleSelectContext, {
12817
- value: {
12818
- isOpen,
12819
- values: selectedValues,
12820
- disabled: disabled || false,
12821
- setSelectedValues: onSelectedValuesChange,
12822
- setIsOpen: onTriggerOpenChange
12823
- },
12824
- children: jsxRuntime.jsx("div", {
12825
- ref: ref,
12826
- className: `${wrapperStyles.className} ${className ?? ""}`,
12827
- ...rest,
12828
- children: children
12829
- })
12830
- });
12425
+ isOpen: false,
12426
+ values: [],
12427
+ disabled: false,
12428
+ setSelectedValues: () => { },
12429
+ setIsOpen: () => { },
12831
12430
  });
12832
- const MultipleSelectTrigger = React.forwardRef(({
12833
- size = "regular",
12834
- children,
12835
- ...rest
12836
- }, ref) => {
12837
- const {
12838
- className,
12839
- onClick,
12840
- ...otherProps
12841
- } = rest;
12842
- const {
12843
- disabled,
12844
- values,
12845
- isOpen,
12846
- setIsOpen
12847
- } = React.useContext(MultipleSelectContext);
12848
- const triggerStyles = stylex__namespace.props(multipleSelectTriggerStyles.base, multipleSelectTriggerStyles[size]);
12849
- const arrowStyles = stylex__namespace.props(multipleSelectTriggerStyles.arrow);
12850
- const handleTriggerClick = e => {
12851
- e.stopPropagation();
12852
- if (disabled) return;
12853
- const value = !isOpen;
12854
- setIsOpen(value);
12855
- onClick?.(e);
12856
- };
12857
- return jsxRuntime.jsxs("div", {
12858
- ref: ref,
12859
- className: `${triggerStyles.className} ${className ?? ""}`,
12860
- "data-disabled": disabled,
12861
- "data-selected": values.length > 0,
12862
- onClick: handleTriggerClick,
12863
- ...otherProps,
12864
- children: [children, jsxRuntime.jsx("span", {
12865
- ...arrowStyles,
12866
- children: jsxRuntime.jsx(ChevronDown, {
12867
- size: 16
12868
- })
12869
- })]
12870
- });
12871
- });
12872
- const MultipleSelectValue = React.forwardRef(({
12873
- placeholder,
12874
- className,
12875
- ...rest
12876
- }, ref) => {
12877
- const {
12878
- values,
12879
- disabled,
12880
- setSelectedValues
12881
- } = React.useContext(MultipleSelectContext);
12882
- const [content, setContent] = React.useState(null);
12883
- const composedRefs = useComposedRefs(ref, node => setContent(node));
12884
- const valueStyles = stylex__namespace.props(multipleSelectTriggerStyles.value);
12885
- const tagStyles = stylex__namespace.props(multipleSelectTriggerStyles.tag);
12886
- const placeholderStyles = stylex__namespace.props(multipleSelectTriggerStyles.placeholder);
12887
- const onDeleteClick = (value, e) => {
12888
- e.stopPropagation();
12889
- const newValues = values.filter(v => v.value !== value.id);
12890
- setSelectedValues(newValues);
12891
- };
12892
- return jsxRuntime.jsx("div", {
12893
- ref: composedRefs,
12894
- style: {
12895
- "--select-content-width": `${content?.offsetWidth}px`
12896
- },
12897
- className: `${valueStyles.className} ${className ?? ""}`,
12898
- ...rest,
12899
- children: values?.length > 0 ? values.map(val => jsxRuntime.jsx(Tag, {
12900
- value: {
12901
- id: val.value,
12902
- label: val.label
12903
- },
12904
- disabled: disabled,
12905
- className: tagStyles.className,
12906
- onDeleteClick: onDeleteClick
12907
- }, val.value)) : jsxRuntime.jsx("span", {
12908
- "data-disabled": disabled,
12909
- ...placeholderStyles,
12910
- children: placeholder || "Select options"
12911
- })
12912
- });
12431
+ const MultipleSelect = React.forwardRef(({ open, onOpenChange, disabled, value, onValueChange, className, children, ...rest }, ref) => {
12432
+ const { setStyleXProps } = usePreferColors();
12433
+ const [isOpen, setIsOpen] = React.useState(open || false);
12434
+ const [selectedValues, setSelectedValues] = React.useState([]);
12435
+ const wrapperStyles = setStyleXProps(multipleSelectWrapperStyles.base);
12436
+ React.useEffect(() => {
12437
+ setIsOpen(open || false);
12438
+ }, [open]);
12439
+ const onSelectedValuesChange = (newValues) => {
12440
+ setSelectedValues(newValues);
12441
+ onValueChange?.(newValues.map((value) => ({ value: value.value, label: value.label })));
12442
+ };
12443
+ const onTriggerOpenChange = (value) => {
12444
+ setIsOpen(value);
12445
+ onOpenChange?.(value);
12446
+ };
12447
+ return (jsxRuntime.jsx(MultipleSelectContext, { value: {
12448
+ isOpen,
12449
+ values: selectedValues,
12450
+ disabled: disabled || false,
12451
+ setSelectedValues: onSelectedValuesChange,
12452
+ setIsOpen: onTriggerOpenChange,
12453
+ }, children: jsxRuntime.jsx("div", { ref: ref, className: `${wrapperStyles.className} ${className ?? ""}`, ...rest, children: children }) }));
12913
12454
  });
12914
- const MultipleSelectContent = React.forwardRef(({
12915
- useSearch,
12916
- options: optionsProps,
12917
- indicator,
12918
- className,
12919
- ...rest
12920
- }, ref) => {
12921
- const {
12922
- isOpen,
12923
- setIsOpen
12924
- } = React.useContext(MultipleSelectContext);
12925
- const contentStyles = stylex__namespace.props(multipleSelectContentStyles.base);
12926
- const optionsStyles = stylex__namespace.props(multipleSelectContentStyles.options);
12927
- const searchStyles = stylex__namespace.props(multipleSelectContentStyles.search);
12928
- const [content, setContent] = React.useState(null);
12929
- const composedRefs = useComposedRefs(ref, node => setContent(node));
12930
- const [options, setOptions] = React.useState(optionsProps);
12931
- React.useEffect(() => {
12932
- if (isOpen) return;
12933
- setOptions(optionsProps);
12934
- }, [isOpen]);
12935
- const handleSearchChange = e => {
12936
- const searchValue = e.target.value.toLowerCase();
12937
- if (!searchValue) {
12938
- setOptions(optionsProps);
12939
- return;
12940
- }
12941
- const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue));
12942
- setOptions(filteredOptions);
12943
- };
12944
- React.useEffect(() => {
12945
- const handleMouseUp = event => {
12946
- if (!content?.contains(event.target)) {
12947
- setIsOpen(false);
12948
- }
12455
+ const MultipleSelectTrigger = React.forwardRef(({ size = "regular", children, ...rest }, ref) => {
12456
+ const { setStyleXProps } = usePreferColors();
12457
+ const { className, onClick, ...otherProps } = rest;
12458
+ const { disabled, values, isOpen, setIsOpen } = React.useContext(MultipleSelectContext);
12459
+ const triggerStyles = setStyleXProps(multipleSelectTriggerStyles.base, multipleSelectTriggerStyles[size]);
12460
+ const arrowStyles = setStyleXProps(multipleSelectTriggerStyles.arrow);
12461
+ const handleTriggerClick = (e) => {
12462
+ e.stopPropagation();
12463
+ if (disabled)
12464
+ return;
12465
+ const value = !isOpen;
12466
+ setIsOpen(value);
12467
+ onClick?.(e);
12949
12468
  };
12950
- document.addEventListener("mouseup", handleMouseUp);
12951
- return () => {
12952
- document.removeEventListener("mouseup", handleMouseUp);
12469
+ return (jsxRuntime.jsxs("div", { ref: ref, className: `${triggerStyles.className} ${className ?? ""}`, "data-disabled": disabled, "data-selected": values.length > 0, onClick: handleTriggerClick, ...otherProps, children: [children, jsxRuntime.jsx("span", { ...arrowStyles, children: jsxRuntime.jsx(ChevronDown, { size: 16 }) })] }));
12470
+ });
12471
+ const MultipleSelectValue = React.forwardRef(({ placeholder, className, ...rest }, ref) => {
12472
+ const { setStyleXProps } = usePreferColors();
12473
+ const { values, disabled, setSelectedValues } = React.useContext(MultipleSelectContext);
12474
+ const [content, setContent] = React.useState(null);
12475
+ const composedRefs = useComposedRefs(ref, (node) => setContent(node));
12476
+ const valueStyles = setStyleXProps(multipleSelectTriggerStyles.value);
12477
+ const tagStyles = setStyleXProps(multipleSelectTriggerStyles.tag);
12478
+ const placeholderStyles = setStyleXProps(multipleSelectTriggerStyles.placeholder);
12479
+ const onDeleteClick = (value, e) => {
12480
+ e.stopPropagation();
12481
+ const newValues = values.filter((v) => v.value !== value.id);
12482
+ setSelectedValues(newValues);
12953
12483
  };
12954
- }, [setIsOpen, content]);
12955
- React.useEffect(() => {
12956
- const close = () => setIsOpen(false);
12957
- window.addEventListener("blur", close);
12958
- window.addEventListener("resize", close);
12959
- return () => {
12960
- window.removeEventListener("blur", close);
12961
- window.removeEventListener("resize", close);
12484
+ return (jsxRuntime.jsx("div", { ref: composedRefs, style: {
12485
+ "--select-content-width": `${content?.offsetWidth}px`,
12486
+ }, className: `${valueStyles.className} ${className ?? ""}`, ...rest, children: values?.length > 0 ? (values.map((val) => (jsxRuntime.jsx(Tag, { value: { id: val.value, label: val.label }, disabled: disabled, className: tagStyles.className, onDeleteClick: onDeleteClick }, val.value)))) : (jsxRuntime.jsx("span", { "data-disabled": disabled, ...placeholderStyles, children: placeholder || "Select options" })) }));
12487
+ });
12488
+ const MultipleSelectContent = React.forwardRef(({ useSearch, options: optionsProps, indicator, className, ...rest }, ref) => {
12489
+ const { setStyleXProps } = usePreferColors();
12490
+ const { isOpen, setIsOpen } = React.useContext(MultipleSelectContext);
12491
+ const contentStyles = setStyleXProps(multipleSelectContentStyles.base);
12492
+ const optionsStyles = setStyleXProps(multipleSelectContentStyles.options);
12493
+ const searchStyles = setStyleXProps(multipleSelectContentStyles.search);
12494
+ const [content, setContent] = React.useState(null);
12495
+ const composedRefs = useComposedRefs(ref, (node) => setContent(node));
12496
+ const [options, setOptions] = React.useState(optionsProps);
12497
+ React.useEffect(() => {
12498
+ if (isOpen)
12499
+ return;
12500
+ setOptions(optionsProps);
12501
+ }, [isOpen]);
12502
+ const handleSearchChange = (e) => {
12503
+ const searchValue = e.target.value.toLowerCase();
12504
+ if (!searchValue) {
12505
+ setOptions(optionsProps);
12506
+ return;
12507
+ }
12508
+ const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchValue));
12509
+ setOptions(filteredOptions);
12962
12510
  };
12963
- }, [setIsOpen]);
12964
- return isOpen && jsxRuntime.jsxs("div", {
12965
- ref: composedRefs,
12966
- className: `${contentStyles.className} ${className ?? ""}`,
12967
- ...rest,
12968
- children: [useSearch && jsxRuntime.jsx("div", {
12969
- ...searchStyles,
12970
- children: jsxRuntime.jsx(Input, {
12971
- onChange: handleSearchChange,
12972
- leftIcon: jsxRuntime.jsx(MagnifyingGlassIcon, {
12973
- width: 20,
12974
- height: 20
12975
- }),
12976
- placeholder: "Enter any characters..."
12977
- })
12978
- }), jsxRuntime.jsx("ul", {
12979
- ...optionsStyles,
12980
- children: options.map(option => jsxRuntime.jsx(MultipleSelectItem, {
12981
- option: option,
12982
- indicator: indicator
12983
- }, option.value))
12984
- })]
12985
- });
12511
+ React.useEffect(() => {
12512
+ const handleMouseUp = (event) => {
12513
+ if (!content?.contains(event.target)) {
12514
+ setIsOpen(false);
12515
+ }
12516
+ };
12517
+ document.addEventListener("mouseup", handleMouseUp);
12518
+ return () => {
12519
+ document.removeEventListener("mouseup", handleMouseUp);
12520
+ };
12521
+ }, [setIsOpen, content]);
12522
+ React.useEffect(() => {
12523
+ const close = () => setIsOpen(false);
12524
+ window.addEventListener("blur", close);
12525
+ window.addEventListener("resize", close);
12526
+ return () => {
12527
+ window.removeEventListener("blur", close);
12528
+ window.removeEventListener("resize", close);
12529
+ };
12530
+ }, [setIsOpen]);
12531
+ return (isOpen && (jsxRuntime.jsxs("div", { ref: composedRefs, className: `${contentStyles.className} ${className ?? ""}`, ...rest, children: [useSearch && (jsxRuntime.jsx("div", { ...searchStyles, children: jsxRuntime.jsx(Input, { onChange: handleSearchChange, leftIcon: jsxRuntime.jsx(MagnifyingGlassIcon, { width: 20, height: 20 }), placeholder: "Enter any characters..." }) })), jsxRuntime.jsx("ul", { ...optionsStyles, children: options.map((option) => (jsxRuntime.jsx(MultipleSelectItem, { option: option, indicator: indicator }, option.value))) })] })));
12986
12532
  });
12987
- const MultipleSelectItem = React.forwardRef(({
12988
- option,
12989
- indicator,
12990
- className,
12991
- ...rest
12992
- }, ref) => {
12993
- const {
12994
- values,
12995
- setSelectedValues
12996
- } = React.useContext(MultipleSelectContext);
12997
- const isSelected = values.some(val => val.value === option.value);
12998
- const itemStyles = stylex__namespace.props(multipleSelectItemStyles.base);
12999
- const indicatorStyles = stylex__namespace.props(multipleSelectItemStyles.indicator);
13000
- const itemLabelStyles = stylex__namespace.props(multipleSelectItemStyles.label);
13001
- const handleClick = e => {
13002
- e.stopPropagation();
13003
- if (option.disabled) return;
13004
- const newValues = isSelected ? values.filter(val => val.value !== option.value) : [...values, option];
13005
- setSelectedValues(newValues);
13006
- };
13007
- return jsxRuntime.jsxs("li", {
13008
- ref: ref,
13009
- "data-selected": isSelected,
13010
- "data-disabled": option.disabled,
13011
- className: `${itemStyles.className} ${className}`,
13012
- onClick: handleClick,
13013
- ...rest,
13014
- children: [jsxRuntime.jsx("span", {
13015
- className: itemLabelStyles.className,
13016
- children: option.label
13017
- }), indicator && isSelected && jsxRuntime.jsx("span", {
13018
- ...indicatorStyles,
13019
- children: indicator
13020
- })]
13021
- });
12533
+ const MultipleSelectItem = React.forwardRef(({ option, indicator, className, ...rest }, ref) => {
12534
+ const { setStyleXProps } = usePreferColors();
12535
+ const { values, setSelectedValues } = React.useContext(MultipleSelectContext);
12536
+ const isSelected = values.some((val) => val.value === option.value);
12537
+ const itemStyles = setStyleXProps(multipleSelectItemStyles.base);
12538
+ const indicatorStyles = setStyleXProps(multipleSelectItemStyles.indicator);
12539
+ const itemLabelStyles = setStyleXProps(multipleSelectItemStyles.label);
12540
+ const handleClick = (e) => {
12541
+ e.stopPropagation();
12542
+ if (option.disabled)
12543
+ return;
12544
+ const newValues = isSelected
12545
+ ? values.filter((val) => val.value !== option.value)
12546
+ : [...values, option];
12547
+ setSelectedValues(newValues);
12548
+ };
12549
+ return (jsxRuntime.jsxs("li", { ref: ref, "data-selected": isSelected, "data-disabled": option.disabled, className: `${itemStyles.className} ${className}`, onClick: handleClick, ...rest, children: [jsxRuntime.jsx("span", { className: itemLabelStyles.className, children: option.label }), indicator && isSelected && jsxRuntime.jsx("span", { ...indicatorStyles, children: indicator })] }));
13022
12550
  });
13023
12551
 
13024
12552
  const tableStyles = {
@@ -13087,99 +12615,35 @@ const tableStyles = {
13087
12615
  }
13088
12616
  };
13089
12617
 
13090
- const Table = React.forwardRef(({
13091
- className,
13092
- ...rest
13093
- }, ref) => {
13094
- const tableClasses = stylex__namespace.props(tableStyles.table);
13095
- return jsxRuntime.jsx("table", {
13096
- ref: ref,
13097
- className: `${tableClasses.className} ${className ?? ""}`,
13098
- ...rest
13099
- });
12618
+ const Table = React.forwardRef(({ className, ...rest }, ref) => {
12619
+ const { setStyleXProps } = usePreferColors();
12620
+ const tableClasses = setStyleXProps(tableStyles.table);
12621
+ return (jsxRuntime.jsx("table", { ref: ref, className: `${tableClasses.className} ${className ?? ""}`, ...rest }));
13100
12622
  });
13101
- const TableHeader = React.forwardRef(({
13102
- className,
13103
- ...rest
13104
- }, ref) => {
13105
- const headerRowClasses = stylex__namespace.props(tableStyles.theadTR);
13106
- return jsxRuntime.jsx("thead", {
13107
- children: jsxRuntime.jsx("tr", {
13108
- ref: ref,
13109
- className: `${headerRowClasses.className} ${className ?? ""}`,
13110
- ...rest
13111
- })
13112
- });
12623
+ const TableHeader = React.forwardRef(({ className, ...rest }, ref) => {
12624
+ const { setStyleXProps } = usePreferColors();
12625
+ const headerRowClasses = setStyleXProps(tableStyles.theadTR);
12626
+ return (jsxRuntime.jsx("thead", { children: jsxRuntime.jsx("tr", { ref: ref, className: `${headerRowClasses.className} ${className ?? ""}`, ...rest }) }));
13113
12627
  });
13114
- const TableBody = React.forwardRef(({
13115
- ...rest
13116
- }, ref) => {
13117
- return jsxRuntime.jsx("tbody", {
13118
- ref: ref,
13119
- ...rest
13120
- });
12628
+ const TableBody = React.forwardRef(({ ...rest }, ref) => {
12629
+ return jsxRuntime.jsx("tbody", { ref: ref, ...rest });
13121
12630
  });
13122
- const TableRow = React.forwardRef(({
13123
- isSelected,
13124
- shouldLastBorderRender = true,
13125
- className,
13126
- ...rest
13127
- }, ref) => {
13128
- const rowClasses = stylex__namespace.props(tableStyles.tr);
13129
- return jsxRuntime.jsx("tr", {
13130
- ref: ref,
13131
- "data-selected": isSelected,
13132
- "data-last-border": shouldLastBorderRender,
13133
- className: `${rowClasses.className} ${className ?? ""}`,
13134
- ...rest
13135
- });
12631
+ const TableRow = React.forwardRef(({ isSelected, shouldLastBorderRender = true, className, ...rest }, ref) => {
12632
+ const { setStyleXProps } = usePreferColors();
12633
+ const rowClasses = setStyleXProps(tableStyles.tr);
12634
+ return (jsxRuntime.jsx("tr", { ref: ref, "data-selected": isSelected, "data-last-border": shouldLastBorderRender, className: `${rowClasses.className} ${className ?? ""}`, ...rest }));
13136
12635
  });
13137
- const TableHead = React.forwardRef(({
13138
- className,
13139
- children,
13140
- ...rest
13141
- }, ref) => {
13142
- const headClasses = stylex__namespace.props(tableStyles.cell, tableStyles.th);
13143
- const contentClasses = stylex__namespace.props(tableStyles.content);
13144
- return jsxRuntime.jsx("th", {
13145
- ref: ref,
13146
- className: `${headClasses.className} ${className ?? ""}`,
13147
- ...rest,
13148
- children: jsxRuntime.jsx("div", {
13149
- className: contentClasses.className,
13150
- children: children
13151
- })
13152
- });
12636
+ const TableHead = React.forwardRef(({ className, children, ...rest }, ref) => {
12637
+ const { setStyleXProps } = usePreferColors();
12638
+ const headClasses = setStyleXProps(tableStyles.cell, tableStyles.th);
12639
+ const contentClasses = setStyleXProps(tableStyles.content);
12640
+ return (jsxRuntime.jsx("th", { ref: ref, className: `${headClasses.className} ${className ?? ""}`, ...rest, children: jsxRuntime.jsx("div", { className: contentClasses.className, children: children }) }));
13153
12641
  });
13154
- const TableCell = React.forwardRef(({
13155
- className,
13156
- children,
13157
- showTooltip,
13158
- ...rest
13159
- }, ref) => {
13160
- const cellClasses = stylex__namespace.props(tableStyles.cell, tableStyles.td);
13161
- const contentClasses = stylex__namespace.props(tableStyles.content);
13162
- return jsxRuntime.jsx("td", {
13163
- ref: ref,
13164
- className: `${cellClasses.className} ${className ?? ""}`,
13165
- ...rest,
13166
- children: showTooltip ? jsxRuntime.jsxs(Tooltip, {
13167
- children: [jsxRuntime.jsx(TooltipTrigger, {
13168
- asChild: true,
13169
- children: jsxRuntime.jsx("span", {
13170
- children: children
13171
- })
13172
- }), jsxRuntime.jsx(TooltipContent, {
13173
- type: "short",
13174
- side: "bottom",
13175
- sideOffset: 10,
13176
- children: children
13177
- })]
13178
- }) : jsxRuntime.jsx("div", {
13179
- className: contentClasses.className,
13180
- children: children
13181
- })
13182
- });
12642
+ const TableCell = React.forwardRef(({ className, children, showTooltip, ...rest }, ref) => {
12643
+ const { setStyleXProps } = usePreferColors();
12644
+ const cellClasses = setStyleXProps(tableStyles.cell, tableStyles.td);
12645
+ const contentClasses = setStyleXProps(tableStyles.content);
12646
+ return (jsxRuntime.jsx("td", { ref: ref, className: `${cellClasses.className} ${className ?? ""}`, ...rest, children: showTooltip ? (jsxRuntime.jsxs(Tooltip, { children: [jsxRuntime.jsx(TooltipTrigger, { asChild: true, children: jsxRuntime.jsx("span", { children: children }) }), jsxRuntime.jsx(TooltipContent, { type: "short", side: "bottom", sideOffset: 10, children: children })] })) : (jsxRuntime.jsx("div", { className: contentClasses.className, children: children })) }));
13183
12647
  });
13184
12648
 
13185
12649
  const DataTable = ({ config, data, emptyMessage, onRowClick, enableSelection = false, shouldLastBorderRender = true, classNames, refs, }) => {
@@ -13277,97 +12741,39 @@ const paginationStyles = {
13277
12741
  }
13278
12742
  };
13279
12743
 
13280
- const Pagination = ({
13281
- className,
13282
- ...props
13283
- }) => {
13284
- const paginationClasses = stylex__namespace.props(paginationStyles.pagination);
13285
- return jsxRuntime.jsx("nav", {
13286
- role: "navigation",
13287
- "aria-label": "pagination",
13288
- "data-slot": "pagination",
13289
- className: `${paginationClasses.className} ${className ?? ""}`,
13290
- ...props
13291
- });
12744
+ const Pagination = ({ className, ...props }) => {
12745
+ const { setStyleXProps } = usePreferColors();
12746
+ const paginationClasses = setStyleXProps(paginationStyles.pagination);
12747
+ return (jsxRuntime.jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: `${paginationClasses.className} ${className ?? ""}`, ...props }));
13292
12748
  };
13293
- const PaginationContent = ({
13294
- className,
13295
- ...props
13296
- }) => {
13297
- const contentClasses = stylex__namespace.props(paginationStyles.content);
13298
- return jsxRuntime.jsx("ul", {
13299
- "data-slot": "pagination-content",
13300
- className: `${contentClasses.className} ${className ?? ""}`,
13301
- ...props
13302
- });
12749
+ const PaginationContent = ({ className, ...props }) => {
12750
+ const { setStyleXProps } = usePreferColors();
12751
+ const contentClasses = setStyleXProps(paginationStyles.content);
12752
+ return (jsxRuntime.jsx("ul", { "data-slot": "pagination-content", className: `${contentClasses.className} ${className ?? ""}`, ...props }));
13303
12753
  };
13304
- const PaginationItem = props => {
13305
- return jsxRuntime.jsx("li", {
13306
- "data-slot": "pagination-item",
13307
- ...props
13308
- });
12754
+ const PaginationItem = (props) => {
12755
+ return jsxRuntime.jsx("li", { "data-slot": "pagination-item", ...props });
13309
12756
  };
13310
- const PaginationLink = ({
13311
- className,
13312
- isActive,
13313
- size = "regular",
13314
- variant = "ghost",
13315
- ...props
13316
- }) => {
13317
- const buttonClasses = stylex__namespace.props(paginationStyles.button, isActive && paginationStyles.selected);
13318
- return jsxRuntime.jsx(Button, {
13319
- "aria-current": isActive ? "page" : undefined,
13320
- "data-slot": "pagination-link",
13321
- "data-active": isActive,
13322
- size: size,
13323
- variant: variant,
13324
- className: `${buttonClasses.className} ${className ?? ""}`,
13325
- ...props
13326
- });
12757
+ const PaginationLink = ({ className, isActive, size = "regular", variant = "ghost", ...props }) => {
12758
+ const { setStyleXProps } = usePreferColors();
12759
+ const buttonClasses = setStyleXProps(paginationStyles.button, isActive && paginationStyles.selected);
12760
+ return (jsxRuntime.jsx(Button, { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, size: size, variant: variant, className: `${buttonClasses.className} ${className ?? ""}`, ...props }));
13327
12761
  };
13328
- const PaginationPrevious = ({
13329
- className,
13330
- ...props
13331
- }) => {
13332
- const previousClasses = stylex__namespace.props(paginationStyles.previous);
13333
- return jsxRuntime.jsx(PaginationLink, {
13334
- "aria-label": "Go to previous page",
13335
- className: `${previousClasses.className} ${className ?? ""}`,
13336
- leftIcon: jsxRuntime.jsx(ChevronLeft, {
13337
- size: 20
13338
- }),
13339
- ...props
13340
- });
12762
+ const PaginationPrevious = ({ className, ...props }) => {
12763
+ const { setStyleXProps } = usePreferColors();
12764
+ const previousClasses = setStyleXProps(paginationStyles.previous);
12765
+ return (jsxRuntime.jsx(PaginationLink, { "aria-label": "Go to previous page", className: `${previousClasses.className} ${className ?? ""}`, leftIcon: jsxRuntime.jsx(ChevronLeft, { size: 20 }), ...props }));
13341
12766
  };
13342
- const PaginationNext = ({
13343
- className,
13344
- ...props
13345
- }) => {
13346
- const nextClasses = stylex__namespace.props(paginationStyles.next);
13347
- return jsxRuntime.jsx(PaginationLink, {
13348
- "aria-label": "Go to next page",
13349
- className: `${nextClasses.className} ${className ?? ""}`,
13350
- leftIcon: jsxRuntime.jsx(ChevronRight, {
13351
- size: 20
13352
- }),
13353
- ...props
13354
- });
12767
+ const PaginationNext = ({ className, ...props }) => {
12768
+ const { setStyleXProps } = usePreferColors();
12769
+ const nextClasses = setStyleXProps(paginationStyles.next);
12770
+ return (jsxRuntime.jsx(PaginationLink, { "aria-label": "Go to next page", className: `${nextClasses.className} ${className ?? ""}`, leftIcon: jsxRuntime.jsx(ChevronRight, { size: 20 }), ...props }));
13355
12771
  };
13356
- const PaginationEllipsis = ({
13357
- className,
13358
- ...props
13359
- }) => {
13360
- const ellipsisClasses = stylex__namespace.props(paginationStyles.ellipsis);
13361
- const iconClasses = stylex__namespace.props(paginationStyles.ellipsisIcon);
13362
- return jsxRuntime.jsx("span", {
13363
- "aria-hidden": true,
13364
- "data-slot": "pagination-ellipsis",
13365
- className: `${ellipsisClasses.className} ${className ?? ""}`,
13366
- ...props,
13367
- children: jsxRuntime.jsx(Ellipsis, {
13368
- className: iconClasses.className
13369
- })
13370
- });
12772
+ const PaginationEllipsis = ({ className, ...props }) => {
12773
+ const { setStyleXProps } = usePreferColors();
12774
+ const ellipsisClasses = setStyleXProps(paginationStyles.ellipsis);
12775
+ const iconClasses = setStyleXProps(paginationStyles.ellipsisIcon);
12776
+ return (jsxRuntime.jsx("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: `${ellipsisClasses.className} ${className ?? ""}`, ...props, children: jsxRuntime.jsx(Ellipsis, { className: iconClasses.className }) }));
13371
12777
  };
13372
12778
 
13373
12779
  const interactiveListItemStyles = {
@@ -13499,66 +12905,27 @@ const interactiveListItemStyles = {
13499
12905
  };
13500
12906
 
13501
12907
  const InteractiveListItemContext = React.createContext({
13502
- disabled: false
12908
+ disabled: false,
13503
12909
  });
13504
- const InteractiveListItem = React.forwardRef(({
13505
- isSelected,
13506
- disabled,
13507
- showHoverActions = true,
13508
- children,
13509
- ...props
13510
- }, ref) => {
13511
- const itemClasses = stylex__namespace.props(interactiveListItemStyles.base);
13512
- return jsxRuntime.jsx(InteractiveListItemContext, {
13513
- value: {
13514
- disabled: !!disabled
13515
- },
13516
- children: jsxRuntime.jsx("div", {
13517
- ref: ref,
13518
- "data-selected": isSelected,
13519
- "data-disabled": disabled,
13520
- "data-hover-actions": showHoverActions,
13521
- className: `${itemClasses.className} ${props.className ?? ""}`,
13522
- ...props,
13523
- children: children
13524
- })
13525
- });
12910
+ const InteractiveListItem = React.forwardRef(({ isSelected, disabled, showHoverActions = true, children, ...props }, ref) => {
12911
+ const { setStyleXProps } = usePreferColors();
12912
+ const itemClasses = setStyleXProps(interactiveListItemStyles.base);
12913
+ return (jsxRuntime.jsx(InteractiveListItemContext, { value: { disabled: !!disabled }, children: jsxRuntime.jsx("div", { ref: ref, "data-selected": isSelected, "data-disabled": disabled, "data-hover-actions": showHoverActions, className: `${itemClasses.className} ${props.className ?? ""}`, ...props, children: children }) }));
13526
12914
  });
13527
- const InteractiveListItemIcon = React.forwardRef(({
13528
- children,
13529
- ...props
13530
- }, ref) => {
13531
- const iconClasses = stylex__namespace.props(interactiveListItemStyles.icon);
13532
- return jsxRuntime.jsx("span", {
13533
- className: iconClasses.className,
13534
- ...props,
13535
- ref: ref,
13536
- children: children
13537
- });
12915
+ const InteractiveListItemIcon = React.forwardRef(({ children, ...props }, ref) => {
12916
+ const { setStyleXProps } = usePreferColors();
12917
+ const iconClasses = setStyleXProps(interactiveListItemStyles.icon);
12918
+ return (jsxRuntime.jsx("span", { className: iconClasses.className, ...props, ref: ref, children: children }));
13538
12919
  });
13539
- const InteractiveListItemContent = React.forwardRef(({
13540
- children,
13541
- ...rest
13542
- }, ref) => {
13543
- const contentClasses = stylex__namespace.props(interactiveListItemStyles.content);
13544
- return jsxRuntime.jsx("div", {
13545
- className: contentClasses.className,
13546
- ...rest,
13547
- ref: ref,
13548
- children: children
13549
- });
12920
+ const InteractiveListItemContent = React.forwardRef(({ children, ...rest }, ref) => {
12921
+ const { setStyleXProps } = usePreferColors();
12922
+ const contentClasses = setStyleXProps(interactiveListItemStyles.content);
12923
+ return (jsxRuntime.jsx("div", { className: contentClasses.className, ...rest, ref: ref, children: children }));
13550
12924
  });
13551
- const InteractiveListItemActions = React.forwardRef(({
13552
- children,
13553
- ...props
13554
- }, ref) => {
13555
- const buttonsClasses = stylex__namespace.props(interactiveListItemStyles.buttons);
13556
- return jsxRuntime.jsx("div", {
13557
- className: buttonsClasses.className,
13558
- ...props,
13559
- ref: ref,
13560
- children: children
13561
- });
12925
+ const InteractiveListItemActions = React.forwardRef(({ children, ...props }, ref) => {
12926
+ const { setStyleXProps } = usePreferColors();
12927
+ const buttonsClasses = setStyleXProps(interactiveListItemStyles.buttons);
12928
+ return (jsxRuntime.jsx("div", { className: buttonsClasses.className, ...props, ref: ref, children: children }));
13562
12929
  });
13563
12930
 
13564
12931
  const calendarStyles = {
@@ -13781,50 +13148,33 @@ const calendarStyles = {
13781
13148
  }
13782
13149
  };
13783
13150
 
13784
- const Calendar = ({
13785
- className,
13786
- classNames,
13787
- showOutsideDays = true,
13788
- ...props
13789
- }) => {
13790
- const getDatePickerClassName = key => {
13791
- return stylex__namespace.props(calendarStyles[key]).className;
13792
- };
13793
- return jsxRuntime.jsx(reactDayPicker.DayPicker, {
13794
- showOutsideDays: showOutsideDays,
13795
- navLayout: "around",
13796
- style: {
13797
- "--rdp-day-width": "32px",
13798
- "--rdp-day-height": "32px",
13799
- "--rdp-day_button-height": "32px",
13800
- "--rdp-day_button-width": "32px"
13801
- },
13802
- className: className,
13803
- classNames: {
13804
- months: getDatePickerClassName("months"),
13805
- month_caption: getDatePickerClassName("monthCaption"),
13806
- caption_label: getDatePickerClassName("captionLabel"),
13807
- month_grid: getDatePickerClassName("monthGrid"),
13808
- weekday: getDatePickerClassName("weekday"),
13809
- day: getDatePickerClassName("day"),
13810
- selected: getDatePickerClassName("selected"),
13811
- today: getDatePickerClassName("day"),
13812
- range_start: `${getDatePickerClassName("rangeStart")} range-start`,
13813
- range_middle: `${getDatePickerClassName("rangeMiddle")} range-middle`,
13814
- range_end: `${getDatePickerClassName("rangeEnd")} range-end`,
13815
- outside: getDatePickerClassName("outside"),
13816
- ...classNames
13817
- },
13818
- components: {
13819
- Chevron: args => jsxRuntime.jsx(ChevronLeft, {
13820
- size: 16,
13821
- ...args,
13822
- "data-orientation": args.orientation,
13823
- className: getDatePickerClassName("navButton")
13824
- })
13825
- },
13826
- ...props
13827
- });
13151
+ const Calendar = ({ className, classNames, showOutsideDays = true, ...props }) => {
13152
+ const { setStyleXProps } = usePreferColors();
13153
+ const getDatePickerClassName = (key) => {
13154
+ return setStyleXProps(calendarStyles[key]).className;
13155
+ };
13156
+ return (jsxRuntime.jsx(reactDayPicker.DayPicker, { showOutsideDays: showOutsideDays, navLayout: "around", style: {
13157
+ "--rdp-day-width": "32px",
13158
+ "--rdp-day-height": "32px",
13159
+ "--rdp-day_button-height": "32px",
13160
+ "--rdp-day_button-width": "32px",
13161
+ }, className: className, classNames: {
13162
+ months: getDatePickerClassName("months"),
13163
+ month_caption: getDatePickerClassName("monthCaption"),
13164
+ caption_label: getDatePickerClassName("captionLabel"),
13165
+ month_grid: getDatePickerClassName("monthGrid"),
13166
+ weekday: getDatePickerClassName("weekday"),
13167
+ day: getDatePickerClassName("day"),
13168
+ selected: getDatePickerClassName("selected"),
13169
+ today: getDatePickerClassName("day"),
13170
+ range_start: `${getDatePickerClassName("rangeStart")} range-start`,
13171
+ range_middle: `${getDatePickerClassName("rangeMiddle")} range-middle`,
13172
+ range_end: `${getDatePickerClassName("rangeEnd")} range-end`,
13173
+ outside: getDatePickerClassName("outside"),
13174
+ ...classNames,
13175
+ }, components: {
13176
+ Chevron: (args) => (jsxRuntime.jsx(ChevronLeft, { size: 16, ...args, "data-orientation": args.orientation, className: getDatePickerClassName("navButton") })),
13177
+ }, ...props }));
13828
13178
  };
13829
13179
 
13830
13180
  const datePickerStyles = {
@@ -13843,90 +13193,49 @@ var dayjs_min = {exports: {}};
13843
13193
  var dayjs_minExports = dayjs_min.exports;
13844
13194
  var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
13845
13195
 
13846
- const DatePicker = ({
13847
- size = "regular",
13848
- placeholder = "Pick a date",
13849
- format = "YYYY. MM. DD.",
13850
- value,
13851
- mode = "single",
13852
- onChange,
13853
- isInstantClose = false,
13854
- open: openProp,
13855
- onOpenChange: onOpenChangeProp,
13856
- disabled,
13857
- ...rest
13858
- }) => {
13859
- const [inputValue, setInputValue] = React.useState(value);
13860
- const [open, setOpen] = React.useState(openProp || false);
13861
- const wrapperStyle = stylex__namespace.props(datePickerStyles.wrapper);
13862
- const handleSelect = date => {
13863
- if (mode === "single") {
13864
- const value = date;
13865
- onChange?.(value);
13866
- } else if (mode === "multiple") {
13867
- const value = date;
13868
- onChange?.(value);
13869
- } else if (mode === "range") {
13870
- const value = date;
13871
- onChange?.(value);
13872
- }
13873
- setInputValue(date);
13874
- if (isInstantClose && mode === "single") {
13875
- handleOpenChange(false);
13876
- }
13877
- };
13878
- const handleOpenChange = open => {
13879
- setOpen(open);
13880
- onOpenChangeProp?.(open);
13881
- };
13882
- const getDateToFormatString = date => {
13883
- if (date instanceof Date) {
13884
- return dayjs(date).format(format);
13885
- } else if (Array.isArray(date)) {
13886
- return date.map(d => dayjs(d).format(format)).join(", ");
13887
- } else if (date && typeof date === "object" && "from" in date && "to" in date) {
13888
- return `${dayjs(date.from).format(format)} - ${dayjs(date.to).format(format)}`;
13889
- }
13890
- return placeholder ?? "";
13891
- };
13892
- return jsxRuntime.jsxs(Root2$2, {
13893
- open: open,
13894
- onOpenChange: handleOpenChange,
13895
- children: [jsxRuntime.jsx(Trigger$2, {
13896
- asChild: true,
13897
- children: jsxRuntime.jsx(Button, {
13898
- size: size,
13899
- fullWidth: true,
13900
- variant: "outline",
13901
- leftIcon: jsxRuntime.jsx(Calendar$1, {
13902
- size: 20
13903
- }),
13904
- className: wrapperStyle.className,
13905
- disabled: disabled,
13906
- children: getDateToFormatString(inputValue)
13907
- })
13908
- }), jsxRuntime.jsx(Content2$2, {
13909
- sideOffset: 10,
13910
- align: "start",
13911
- ...rest,
13912
- children: mode === "single" ? jsxRuntime.jsx(Calendar, {
13913
- mode: "single",
13914
- ...rest,
13915
- selected: inputValue,
13916
- onSelect: handleSelect
13917
- }) : mode === "multiple" ? jsxRuntime.jsx(Calendar, {
13918
- mode: "multiple",
13919
- ...rest,
13920
- selected: Array.isArray(inputValue) ? inputValue : [],
13921
- onSelect: handleSelect
13922
- }) : jsxRuntime.jsx(Calendar, {
13923
- mode: "range",
13924
- ...rest,
13925
- selected: inputValue,
13926
- onSelect: handleSelect
13927
- })
13928
- })]
13929
- });
13196
+ const DatePicker = ({ size = "regular", placeholder = "Pick a date", format = "YYYY. MM. DD.", value, mode = "single", onChange, isInstantClose = false, open: openProp, onOpenChange: onOpenChangeProp, disabled, ...rest }) => {
13197
+ const { setStyleXProps } = usePreferColors();
13198
+ const [inputValue, setInputValue] = React.useState(value);
13199
+ const [open, setOpen] = React.useState(openProp || false);
13200
+ const wrapperStyle = setStyleXProps(datePickerStyles.wrapper);
13201
+ const handleSelect = (date) => {
13202
+ if (mode === "single") {
13203
+ const value = date;
13204
+ onChange?.(value);
13205
+ }
13206
+ else if (mode === "multiple") {
13207
+ const value = date;
13208
+ onChange?.(value);
13209
+ }
13210
+ else if (mode === "range") {
13211
+ const value = date;
13212
+ onChange?.(value);
13213
+ }
13214
+ setInputValue(date);
13215
+ if (isInstantClose && mode === "single") {
13216
+ handleOpenChange(false);
13217
+ }
13218
+ };
13219
+ const handleOpenChange = (open) => {
13220
+ setOpen(open);
13221
+ onOpenChangeProp?.(open);
13222
+ };
13223
+ const getDateToFormatString = (date) => {
13224
+ if (date instanceof Date) {
13225
+ return dayjs(date).format(format);
13226
+ }
13227
+ else if (Array.isArray(date)) {
13228
+ return date.map((d) => dayjs(d).format(format)).join(", ");
13229
+ }
13230
+ else if (date &&
13231
+ typeof date === "object" &&
13232
+ "from" in date &&
13233
+ "to" in date) {
13234
+ return `${dayjs(date.from).format(format)} - ${dayjs(date.to).format(format)}`;
13235
+ }
13236
+ return placeholder ?? "";
13237
+ };
13238
+ return (jsxRuntime.jsxs(Root2$2, { open: open, onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(Trigger$2, { asChild: true, children: jsxRuntime.jsx(Button, { size: size, fullWidth: true, variant: "outline", leftIcon: jsxRuntime.jsx(Calendar$1, { size: 20 }), className: wrapperStyle.className, disabled: disabled, children: getDateToFormatString(inputValue) }) }), jsxRuntime.jsx(Content2$2, { sideOffset: 10, align: "start", ...rest, children: mode === "single" ? (jsxRuntime.jsx(Calendar, { mode: "single", ...rest, selected: inputValue, onSelect: handleSelect })) : mode === "multiple" ? (jsxRuntime.jsx(Calendar, { mode: "multiple", ...rest, selected: Array.isArray(inputValue) ? inputValue : [], onSelect: handleSelect })) : (jsxRuntime.jsx(Calendar, { mode: "range", ...rest, selected: inputValue, onSelect: handleSelect })) })] }));
13930
13239
  };
13931
13240
 
13932
13241
  const contextMenuContentStyles = {
@@ -14125,80 +13434,42 @@ const contextMenuContentStyles = {
14125
13434
 
14126
13435
  const ContextMenu = Root2$3;
14127
13436
  const ContextMenuTrigger = Trigger$3;
14128
- const ContextMenuContent = props => {
14129
- const contentClasses = stylex__namespace.props(contextMenuContentStyles.content);
14130
- return jsxRuntime.jsx(Portal2, {
14131
- children: jsxRuntime.jsx(Content2$3, {
14132
- ...props,
14133
- className: `${contentClasses.className} ${props.className ?? ""}`,
14134
- children: props.children
14135
- })
14136
- });
13437
+ const ContextMenuContent = (props) => {
13438
+ const { setStyleXProps } = usePreferColors();
13439
+ const contentClasses = setStyleXProps(contextMenuContentStyles.content);
13440
+ return (jsxRuntime.jsx(Portal2, { children: jsxRuntime.jsx(Content2$3, { ...props, className: `${contentClasses.className} ${props.className ?? ""}`, children: props.children }) }));
14137
13441
  };
14138
13442
  const ContextMenuArrow = Arrow2$1;
14139
- const ContextMenuLabel = props => {
14140
- return jsxRuntime.jsx(Label2, {
14141
- ...props,
14142
- children: props.children
14143
- });
14144
- };
14145
- const ContextMenuItem = ({
14146
- leftIcon,
14147
- rightSlot,
14148
- textValue,
14149
- ...rest
14150
- }) => {
14151
- const itemClasses = stylex__namespace.props(contextMenuContentStyles.item);
14152
- const leftIconClasses = stylex__namespace.props(contextMenuContentStyles.leftIcon);
14153
- const rightSlotClasses = stylex__namespace.props(contextMenuContentStyles.rightSlot);
14154
- const itemContentClasses = stylex__namespace.props(contextMenuContentStyles.itemContent);
14155
- const itemTextClasses = stylex__namespace.props(contextMenuContentStyles.textValue);
14156
- return jsxRuntime.jsxs(Item2$1, {
14157
- ...rest,
14158
- className: `${itemClasses.className} ${rest.className ?? ""}`,
14159
- children: [jsxRuntime.jsxs("div", {
14160
- ...itemContentClasses,
14161
- children: [jsxRuntime.jsx("div", {
14162
- className: leftIconClasses.className,
14163
- children: leftIcon
14164
- }), jsxRuntime.jsx("span", {
14165
- ...itemTextClasses,
14166
- children: textValue
14167
- })]
14168
- }), rightSlot && jsxRuntime.jsx("div", {
14169
- ...rightSlotClasses,
14170
- children: rightSlot
14171
- })]
14172
- });
13443
+ const ContextMenuLabel = (props) => {
13444
+ return (jsxRuntime.jsx(Label2, { ...props, children: props.children }));
13445
+ };
13446
+ const ContextMenuItem = ({ leftIcon, rightSlot, textValue, ...rest }) => {
13447
+ const { setStyleXProps } = usePreferColors();
13448
+ const itemClasses = setStyleXProps(contextMenuContentStyles.item);
13449
+ const leftIconClasses = setStyleXProps(contextMenuContentStyles.leftIcon);
13450
+ const rightSlotClasses = setStyleXProps(contextMenuContentStyles.rightSlot);
13451
+ const itemContentClasses = setStyleXProps(contextMenuContentStyles.itemContent);
13452
+ const itemTextClasses = setStyleXProps(contextMenuContentStyles.textValue);
13453
+ return (jsxRuntime.jsxs(Item2$1, { ...rest, className: `${itemClasses.className} ${rest.className ?? ""}`, children: [jsxRuntime.jsxs("div", { ...itemContentClasses, children: [jsxRuntime.jsx("div", { className: leftIconClasses.className, children: leftIcon }), jsxRuntime.jsx("span", { ...itemTextClasses, children: textValue })] }), rightSlot && jsxRuntime.jsx("div", { ...rightSlotClasses, children: rightSlot })] }));
14173
13454
  };
14174
13455
  const ContextMenuGroup = Group2;
14175
13456
  const ContextMenuSub = Sub2;
14176
13457
  const ContextMenuSubTrigger = SubTrigger2;
14177
- const ContextMenuSubContent = props => {
14178
- const contentClasses = stylex__namespace.props(contextMenuContentStyles.content);
14179
- return jsxRuntime.jsx(Portal2, {
14180
- children: jsxRuntime.jsx(SubContent2, {
14181
- ...props,
14182
- className: `${contentClasses.className} ${props.className ?? ""}`,
14183
- children: props.children
14184
- })
14185
- });
13458
+ const ContextMenuSubContent = (props) => {
13459
+ const { setStyleXProps } = usePreferColors();
13460
+ const contentClasses = setStyleXProps(contextMenuContentStyles.content);
13461
+ return (jsxRuntime.jsx(Portal2, { children: jsxRuntime.jsx(SubContent2, { ...props, className: `${contentClasses.className} ${props.className ?? ""}`, children: props.children }) }));
14186
13462
  };
14187
- const ContextMenuSeparator = props => {
14188
- const separatorClasses = stylex__namespace.props(contextMenuContentStyles.separator);
14189
- return jsxRuntime.jsx(Separator2, {
14190
- ...props,
14191
- className: `${separatorClasses.className} ${props.className ?? ""}`
14192
- });
13463
+ const ContextMenuSeparator = (props) => {
13464
+ const { setStyleXProps } = usePreferColors();
13465
+ const separatorClasses = setStyleXProps(contextMenuContentStyles.separator);
13466
+ return (jsxRuntime.jsx(Separator2, { ...props, className: `${separatorClasses.className} ${props.className ?? ""}` }));
14193
13467
  };
14194
13468
  const ContextMenuCheckboxItem = CheckboxItem2;
14195
13469
  const ContextMenuRadioGroup = RadioGroup2;
14196
13470
  const ContextMenuRadioItem = RadioItem2;
14197
- const ContextMenuItemIndicator = props => {
14198
- return jsxRuntime.jsx(ItemIndicator2, {
14199
- ...props,
14200
- children: props.children
14201
- });
13471
+ const ContextMenuItemIndicator = (props) => {
13472
+ return (jsxRuntime.jsx(ItemIndicator2, { ...props, children: props.children }));
14202
13473
  };
14203
13474
 
14204
13475
  const autocompleteStyles = {
@@ -14283,7 +13554,6 @@ const autocompleteStyles = {
14283
13554
  k8WAf4: null,
14284
13555
  kLKAdn: null,
14285
13556
  kGO01o: null,
14286
- kWkggS: "tpst1po33qi",
14287
13557
  kMwMTN: "tpst3jceqh",
14288
13558
  kGuDYH: "tpst1v3388n",
14289
13559
  kLWn49: "tpst1waae9e",
@@ -14333,174 +13603,119 @@ const autocompleteStyles = {
14333
13603
  }
14334
13604
  };
14335
13605
 
14336
- const AutocompleteContentItem = ({
14337
- inputValue,
14338
- item,
14339
- index,
14340
- displayValue,
14341
- highlightedIndex,
14342
- onClick,
14343
- className = ""
14344
- }) => {
14345
- const isHighlighted = index === highlightedIndex;
14346
- const itemClasses = stylex__namespace.props(autocompleteStyles.item, isHighlighted && autocompleteStyles.highlight);
14347
- const matchedClasses = stylex__namespace.props(autocompleteStyles.matched);
14348
- return jsxRuntime.jsx("li", {
14349
- id: `suggestion-item-${index}`,
14350
- className: `${itemClasses.className} ${className}`,
14351
- onClick: e => onClick(item, e),
14352
- role: "option",
14353
- "aria-selected": isHighlighted,
14354
- children: displayValue(item).split(new RegExp(`(${inputValue})`, "gi")).map((part, i) => part.toLowerCase() === inputValue.toLowerCase() ? jsxRuntime.jsx("span", {
14355
- ...matchedClasses,
14356
- children: part
14357
- }, i) : jsxRuntime.jsx("span", {
14358
- children: part
14359
- }, i))
14360
- });
14361
- };
14362
- const Autocomplete = ({
14363
- placeholder,
14364
- data,
14365
- value,
14366
- displayValue,
14367
- onSelect,
14368
- onChange,
14369
- noResultsMessage = "검색 결과가 없습니다.",
14370
- maxResults = 10,
14371
- debounceTime = 300,
14372
- wrapperClassName,
14373
- contentClassName,
14374
- itemClassName
14375
- }) => {
14376
- const [inputValue, setInputValue] = React.useState(value ?? "");
14377
- const [filteredResults, setFilteredResults] = React.useState([]);
14378
- const [showSuggestions, setShowSuggestions] = React.useState(false);
14379
- const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
14380
- // useRef를 사용하여 DOM 엘리먼트 참조
14381
- const autocompleteRef = React.useRef(null);
14382
- const inputRef = React.useRef(null);
14383
- // 디바운싱을 위한 타이머 참조
14384
- const debounceTimerRef = React.useRef(null);
14385
- // 외부 클릭 감지 (추천 목록 닫기)
14386
- React.useEffect(() => {
14387
- const handleClickOutside = event => {
14388
- if (autocompleteRef.current && !autocompleteRef.current.contains(event.target)) {
13606
+ const AutocompleteContentItem = ({ inputValue, item, index, displayValue, highlightedIndex, onClick, className = "", }) => {
13607
+ const { setStyleXProps } = usePreferColors();
13608
+ const isHighlighted = index === highlightedIndex;
13609
+ const itemClasses = setStyleXProps(autocompleteStyles.item, isHighlighted && autocompleteStyles.highlight);
13610
+ const matchedClasses = setStyleXProps(autocompleteStyles.matched);
13611
+ return (jsxRuntime.jsx("li", { id: `suggestion-item-${index}`, className: `${itemClasses.className} ${className}`, onClick: (e) => onClick(item, e), role: "option", "aria-selected": isHighlighted, children: displayValue(item)
13612
+ .split(new RegExp(`(${inputValue})`, "gi"))
13613
+ .map((part, i) => part.toLowerCase() === inputValue.toLowerCase() ? (jsxRuntime.jsx("span", { ...matchedClasses, children: part }, i)) : (jsxRuntime.jsx("span", { children: part }, i))) }));
13614
+ };
13615
+ const Autocomplete = ({ placeholder, data, value, displayValue, onSelect, onChange, noResultsMessage = "검색 결과가 없습니다.", maxResults = 10, debounceTime = 300, wrapperClassName, contentClassName, itemClassName, }) => {
13616
+ const { setStyleXProps } = usePreferColors();
13617
+ const [inputValue, setInputValue] = React.useState(value ?? "");
13618
+ const [filteredResults, setFilteredResults] = React.useState([]);
13619
+ const [showSuggestions, setShowSuggestions] = React.useState(false);
13620
+ const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
13621
+ // useRef를 사용하여 DOM 엘리먼트 참조
13622
+ const autocompleteRef = React.useRef(null);
13623
+ const inputRef = React.useRef(null);
13624
+ // 디바운싱을 위한 타이머 참조
13625
+ const debounceTimerRef = React.useRef(null);
13626
+ // 외부 클릭 감지 (추천 목록 닫기)
13627
+ React.useEffect(() => {
13628
+ const handleClickOutside = (event) => {
13629
+ if (autocompleteRef.current &&
13630
+ !autocompleteRef.current.contains(event.target)) {
13631
+ setShowSuggestions(false);
13632
+ }
13633
+ };
13634
+ document.addEventListener("mousedown", handleClickOutside);
13635
+ return () => {
13636
+ document.removeEventListener("mousedown", handleClickOutside);
13637
+ if (debounceTimerRef.current) {
13638
+ clearTimeout(debounceTimerRef.current);
13639
+ }
13640
+ };
13641
+ }, []);
13642
+ React.useEffect(() => {
13643
+ setInputValue(value ?? "");
13644
+ }, [value]);
13645
+ // 입력 값 변경에 따른 필터링 로직 (디바운싱 적용)
13646
+ React.useEffect(() => {
13647
+ if (debounceTimerRef.current) {
13648
+ clearTimeout(debounceTimerRef.current);
13649
+ }
13650
+ if (inputValue.length === 0) {
13651
+ setFilteredResults(data);
13652
+ return;
13653
+ }
13654
+ debounceTimerRef.current = setTimeout(() => {
13655
+ const lowercasedInput = inputValue.toLowerCase();
13656
+ const results = data.filter((item) => displayValue(item).toLowerCase().includes(lowercasedInput));
13657
+ setFilteredResults(results.slice(0, maxResults));
13658
+ setHighlightedIndex(-1); // 필터링 시 하이라이트 초기화
13659
+ }, debounceTime);
13660
+ return () => {
13661
+ // 클린업: 컴포넌트 언마운트 또는 useEffect 재실행 시 타이머 정리
13662
+ if (debounceTimerRef.current) {
13663
+ clearTimeout(debounceTimerRef.current);
13664
+ }
13665
+ };
13666
+ }, [inputValue, data, displayValue, maxResults, debounceTime]);
13667
+ // 항목 선택 처리
13668
+ const handleSelectItem = React.useCallback((item) => {
13669
+ setInputValue(displayValue(item));
13670
+ onSelect?.(item);
14389
13671
  setShowSuggestions(false);
14390
- }
13672
+ setHighlightedIndex(-1);
13673
+ inputRef.current?.focus(); // 선택 후 입력 필드에 포커스 유지
13674
+ }, [displayValue, onSelect]);
13675
+ // 입력 필드 변경 핸들러
13676
+ const handleChange = (e) => {
13677
+ const value = e.target.value;
13678
+ setInputValue(value);
13679
+ onChange?.(value); // 외부 onChange 콜백 호출
14391
13680
  };
14392
- document.addEventListener("mousedown", handleClickOutside);
14393
- return () => {
14394
- document.removeEventListener("mousedown", handleClickOutside);
14395
- if (debounceTimerRef.current) {
14396
- clearTimeout(debounceTimerRef.current);
14397
- }
13681
+ // 키보드 이벤트 핸들러
13682
+ const handleKeyDown = (e) => {
13683
+ if (!showSuggestions || filteredResults.length === 0)
13684
+ return;
13685
+ if (e.key === "ArrowDown") {
13686
+ e.preventDefault(); // 커서 이동 방지
13687
+ setHighlightedIndex((prevIndex) => (prevIndex + 1) % filteredResults.length);
13688
+ }
13689
+ else if (e.key === "ArrowUp") {
13690
+ e.preventDefault(); // 커서 이동 방지
13691
+ setHighlightedIndex((prevIndex) => (prevIndex - 1 + filteredResults.length) % filteredResults.length);
13692
+ }
13693
+ else if (e.key === "Enter") {
13694
+ e.preventDefault();
13695
+ if (highlightedIndex >= 0) {
13696
+ handleSelectItem(filteredResults[highlightedIndex]);
13697
+ }
13698
+ else if (filteredResults.length > 0) ;
13699
+ }
13700
+ else if (e.key === "Escape") {
13701
+ e.preventDefault();
13702
+ setShowSuggestions(false);
13703
+ setHighlightedIndex(-1);
13704
+ }
14398
13705
  };
14399
- }, []);
14400
- React.useEffect(() => {
14401
- setInputValue(value ?? "");
14402
- }, [value]);
14403
- // 입력 값 변경에 따른 필터링 로직 (디바운싱 적용)
14404
- React.useEffect(() => {
14405
- if (debounceTimerRef.current) {
14406
- clearTimeout(debounceTimerRef.current);
14407
- }
14408
- if (inputValue.length === 0) {
14409
- setFilteredResults(data);
14410
- return;
14411
- }
14412
- debounceTimerRef.current = setTimeout(() => {
14413
- const lowercasedInput = inputValue.toLowerCase();
14414
- const results = data.filter(item => displayValue(item).toLowerCase().includes(lowercasedInput));
14415
- setFilteredResults(results.slice(0, maxResults));
14416
- setHighlightedIndex(-1); // 필터링 시 하이라이트 초기화
14417
- }, debounceTime);
14418
- return () => {
14419
- // 클린업: 컴포넌트 언마운트 또는 useEffect 재실행 시 타이머 정리
14420
- if (debounceTimerRef.current) {
14421
- clearTimeout(debounceTimerRef.current);
14422
- }
13706
+ // 마우스 클릭 시 항목 선택
13707
+ const handleItemClick = (item, e) => {
13708
+ e.stopPropagation(); // 외부 클릭 감지 이벤트 버블링 방지
13709
+ handleSelectItem(item);
14423
13710
  };
14424
- }, [inputValue, data, displayValue, maxResults, debounceTime]);
14425
- // 항목 선택 처리
14426
- const handleSelectItem = React.useCallback(item => {
14427
- setInputValue(displayValue(item));
14428
- onSelect?.(item);
14429
- setShowSuggestions(false);
14430
- setHighlightedIndex(-1);
14431
- inputRef.current?.focus(); // 선택 후 입력 필드에 포커스 유지
14432
- }, [displayValue, onSelect]);
14433
- // 입력 필드 변경 핸들러
14434
- const handleChange = e => {
14435
- const value = e.target.value;
14436
- setInputValue(value);
14437
- onChange?.(value); // 외부 onChange 콜백 호출
14438
- };
14439
- // 키보드 이벤트 핸들러
14440
- const handleKeyDown = e => {
14441
- if (!showSuggestions || filteredResults.length === 0) return;
14442
- if (e.key === "ArrowDown") {
14443
- e.preventDefault(); // 커서 이동 방지
14444
- setHighlightedIndex(prevIndex => (prevIndex + 1) % filteredResults.length);
14445
- } else if (e.key === "ArrowUp") {
14446
- e.preventDefault(); // 커서 이동 방지
14447
- setHighlightedIndex(prevIndex => (prevIndex - 1 + filteredResults.length) % filteredResults.length);
14448
- } else if (e.key === "Enter") {
14449
- e.preventDefault();
14450
- if (highlightedIndex >= 0) {
14451
- handleSelectItem(filteredResults[highlightedIndex]);
14452
- } else if (filteredResults.length > 0) ;
14453
- } else if (e.key === "Escape") {
14454
- e.preventDefault();
14455
- setShowSuggestions(false);
14456
- setHighlightedIndex(-1);
14457
- }
14458
- };
14459
- // 마우스 클릭 시 항목 선택
14460
- const handleItemClick = (item, e) => {
14461
- e.stopPropagation(); // 외부 클릭 감지 이벤트 버블링 방지
14462
- handleSelectItem(item);
14463
- };
14464
- const wrapperClasses = stylex__namespace.props(autocompleteStyles.wrapper);
14465
- const contentClasses = stylex__namespace.props(autocompleteStyles.content);
14466
- const noResultClasses = stylex__namespace.props(autocompleteStyles.noResults);
14467
- return jsxRuntime.jsxs("div", {
14468
- ref: autocompleteRef,
14469
- className: `${wrapperClasses.className} ${wrapperClassName ?? ""}`,
14470
- children: [jsxRuntime.jsx(Input, {
14471
- type: "text",
14472
- placeholder: placeholder,
14473
- value: inputValue,
14474
- onChange: handleChange,
14475
- onFocus: () => setShowSuggestions(true),
14476
- onKeyDown: handleKeyDown,
14477
- ref: inputRef,
14478
- // ARIA 속성 (접근성)
14479
- role: "combobox",
14480
- "aria-autocomplete": "list",
14481
- "aria-haspopup": "listbox",
14482
- "aria-expanded": showSuggestions,
14483
- "aria-controls": "autocomplete-suggestions",
14484
- "aria-activedescendant": highlightedIndex >= 0 ? `suggestion-item-${highlightedIndex}` : undefined
14485
- }), showSuggestions && jsxRuntime.jsx("ul", {
14486
- id: "autocomplete-suggestions",
14487
- role: "listbox",
14488
- className: `${contentClasses.className} ${contentClassName ?? ""}`,
14489
- children: filteredResults.length > 0 ? filteredResults.map((item, index) => jsxRuntime.jsx(AutocompleteContentItem, {
14490
- item: item,
14491
- index: index,
14492
- highlightedIndex: highlightedIndex,
14493
- onClick: handleItemClick,
14494
- displayValue: displayValue,
14495
- inputValue: inputValue,
14496
- className: itemClassName
14497
- }, displayValue(item) + index)) : jsxRuntime.jsx("li", {
14498
- "data-no-results": true,
14499
- ...noResultClasses,
14500
- children: noResultsMessage
14501
- })
14502
- })]
14503
- });
13711
+ const wrapperClasses = setStyleXProps(autocompleteStyles.wrapper);
13712
+ const contentClasses = setStyleXProps(autocompleteStyles.content);
13713
+ const noResultClasses = setStyleXProps(autocompleteStyles.noResults);
13714
+ return (jsxRuntime.jsxs("div", { ref: autocompleteRef, className: `${wrapperClasses.className} ${wrapperClassName ?? ""}`, children: [jsxRuntime.jsx(Input, { type: "text", placeholder: placeholder, value: inputValue, onChange: handleChange, onFocus: () => setShowSuggestions(true), onKeyDown: handleKeyDown, ref: inputRef,
13715
+ // ARIA 속성 (접근성)
13716
+ role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": showSuggestions, "aria-controls": "autocomplete-suggestions", "aria-activedescendant": highlightedIndex >= 0
13717
+ ? `suggestion-item-${highlightedIndex}`
13718
+ : undefined }), showSuggestions && (jsxRuntime.jsx("ul", { id: "autocomplete-suggestions", role: "listbox", className: `${contentClasses.className} ${contentClassName ?? ""}`, children: filteredResults.length > 0 ? (filteredResults.map((item, index) => (jsxRuntime.jsx(AutocompleteContentItem, { item: item, index: index, highlightedIndex: highlightedIndex, onClick: handleItemClick, displayValue: displayValue, inputValue: inputValue, className: itemClassName }, displayValue(item) + index)))) : (jsxRuntime.jsx("li", { "data-no-results": true, ...noResultClasses, children: noResultsMessage })) }))] }));
14504
13719
  };
14505
13720
 
14506
13721
  // 컴포넌트 내보내기
@@ -14602,6 +13817,7 @@ exports.checkboxStyles = checkboxStyles;
14602
13817
  exports.checkboxWrapperStyles = checkboxWrapperStyles;
14603
13818
  exports.commonStyles = commonStyles;
14604
13819
  exports.contextMenuContentStyles = contextMenuContentStyles;
13820
+ exports.darkMode = darkMode;
14605
13821
  exports.datePickerStyles = datePickerStyles;
14606
13822
  exports.dialogContentStyles = dialogContentStyles;
14607
13823
  exports.dialogOverlayStyles = dialogOverlayStyles;
@@ -14616,6 +13832,7 @@ exports.inputWrapperSizeStyles = inputWrapperSizeStyles;
14616
13832
  exports.inputWrapperStyles = inputWrapperStyles;
14617
13833
  exports.interactiveListItemStyles = interactiveListItemStyles;
14618
13834
  exports.labelStyles = labelStyles;
13835
+ exports.lightMode = lightMode;
14619
13836
  exports.lineHeight = lineHeight;
14620
13837
  exports.modeTabStyles = modeTabStyles;
14621
13838
  exports.modeTabWrapperStyles = modeTabWrapperStyles;