@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/esm/index.js CHANGED
@@ -1,34 +1,11 @@
1
1
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
2
- import * as stylex from '@stylexjs/stylex';
3
2
  import * as React from 'react';
4
- import React__default, { useState, useLayoutEffect, forwardRef, createElement, useEffect, createContext, useContext, useRef, useCallback } from 'react';
3
+ import React__default, { useState, useEffect, useLayoutEffect, forwardRef, createElement, createContext, useContext, useRef, useCallback } from 'react';
4
+ import * as stylex from '@stylexjs/stylex';
5
5
  import * as ReactDOM from 'react-dom';
6
6
  import ReactDOM__default from 'react-dom';
7
7
  import { DayPicker } from 'react-day-picker';
8
8
 
9
- // 간격 변수 정의
10
- const spacing = {
11
- xs: "var(--tpst1aa85u5)",
12
- sm: "var(--tpst15cl33r)",
13
- md: "var(--tpst1s1bzlu)",
14
- lg: "var(--tpstr1ymy1)",
15
- xl: "var(--tpst13zox1l)",
16
- xxl: "var(--tpst1xkcubw)",
17
- xxxl: "var(--tpst67ua5f)",
18
- __themeName__: "tpst1cmuz2h"
19
- };
20
- // 테두리 반경 변수 정의
21
- const borderRadius = {
22
- none: "var(--tpst16kocez)",
23
- xs: "var(--tpst1vsob78)",
24
- sm: "var(--tpst1w7bvkk)",
25
- md: "var(--tpst1ls88jo)",
26
- lg: "var(--tpst1d2ic4p)",
27
- xl: "var(--tpst1bkg6mz)",
28
- full: "var(--tpstbu84cc)",
29
- __themeName__: "tpstun8bdo"
30
- };
31
-
32
9
  // 프리미티브 컬러 변수 정의
33
10
  const primitiveColors = {
34
11
  blue100: "var(--tpstqe013h)",
@@ -49,16 +26,16 @@ const primitiveColors = {
49
26
  cyan700: "var(--tpsth1uc7g)",
50
27
  cyan800: "var(--tpsttewm74)",
51
28
  cyan900: "var(--tpst1ts0yxk)",
29
+ darkOpacity25: "var(--tpst1695na0)",
30
+ darkOpacity50: "var(--tpstoyk8v8)",
52
31
  darkOpacity100: "var(--tpst101zq66)",
53
32
  darkOpacity150: "var(--tpst18059y4)",
54
33
  darkOpacity200: "var(--tpst1o2qj1w)",
55
- darkOpacity25: "var(--tpst1695na0)",
56
34
  darkOpacity250: "var(--tpst1e4u9cd)",
57
35
  darkOpacity300: "var(--tpstzzylim)",
58
36
  darkOpacity350: "var(--tpst1giqxg)",
59
37
  darkOpacity400: "var(--tpst1ckp6cb)",
60
38
  darkOpacity450: "var(--tpst1ujyhgx)",
61
- darkOpacity50: "var(--tpstoyk8v8)",
62
39
  darkOpacity500: "var(--tpstdb8mlt)",
63
40
  darkOpacity550: "var(--tpst142inpb)",
64
41
  darkOpacity600: "var(--tpstrvxn8n)",
@@ -77,16 +54,16 @@ const primitiveColors = {
77
54
  green700: "var(--tpst1a1gxqa)",
78
55
  green800: "var(--tpstb6uyui)",
79
56
  green900: "var(--tpstklhf60)",
57
+ lightOpacity25: "var(--tpstevrkdv)",
58
+ lightOpacity50: "var(--tpst8kgh2v)",
80
59
  lightOpacity100: "var(--tpst1i0r5ji)",
81
60
  lightOpacity150: "var(--tpst1y5wwdd)",
82
61
  lightOpacity200: "var(--tpst1qyy4b3)",
83
- lightOpacity25: "var(--tpstevrkdv)",
84
62
  lightOpacity250: "var(--tpst9u9sq4)",
85
63
  lightOpacity300: "var(--tpst9ontey)",
86
64
  lightOpacity350: "var(--tpst7h2gr7)",
87
65
  lightOpacity400: "var(--tpstrlh8f2)",
88
66
  lightOpacity450: "var(--tpstpvck6k)",
89
- lightOpacity50: "var(--tpst8kgh2v)",
90
67
  lightOpacity500: "var(--tpstwf3o2r)",
91
68
  lightOpacity550: "var(--tpst1yklry3)",
92
69
  lightOpacity600: "var(--tpst1pqr7tr)",
@@ -105,16 +82,16 @@ const primitiveColors = {
105
82
  magenta700: "var(--tpst11snvgx)",
106
83
  magenta800: "var(--tpst14beq8s)",
107
84
  magenta900: "var(--tpstzb1amu)",
85
+ neutral25: "var(--tpsttwjrp6)",
86
+ neutral50: "var(--tpst1oe8qtm)",
108
87
  neutral100: "var(--tpst1gpymmf)",
109
88
  neutral150: "var(--tpst1wxl5pq)",
110
89
  neutral200: "var(--tpst12b1wd7)",
111
- neutral25: "var(--tpsttwjrp6)",
112
90
  neutral250: "var(--tpstxadivy)",
113
91
  neutral300: "var(--tpst13x3j6w)",
114
92
  neutral350: "var(--tpstihxxi9)",
115
93
  neutral400: "var(--tpstv2m2ve)",
116
94
  neutral450: "var(--tpstiiea8d)",
117
- neutral50: "var(--tpst1oe8qtm)",
118
95
  neutral500: "var(--tpst1yltxr6)",
119
96
  neutral550: "var(--tpstr8jwi2)",
120
97
  neutral600: "var(--tpst1dl1ny3)",
@@ -257,6 +234,89 @@ const semanticColors = {
257
234
  transparent: "var(--tpst1wrmwgo)",
258
235
  __themeName__: "tpst1h3jhwn"
259
236
  };
237
+ const lightMode = {
238
+ $$css: true,
239
+ tpst1h3jhwn: "tpst1eqgcyt tpst1h3jhwn"
240
+ };
241
+ const darkMode = {
242
+ $$css: true,
243
+ tpst1h3jhwn: "tpst1bbvikf tpst1h3jhwn"
244
+ };
245
+
246
+ const usePreferColors = () => {
247
+ const [dataTheme, setDataTheme] = useState("light");
248
+ const initTheme = () => {
249
+ const targetNode = document.documentElement; // <html> 엘리먼트
250
+ const currentTheme = targetNode.getAttribute("data-theme");
251
+ // currentTheme이 없으면 system의 기본 테마를 사용
252
+ if (currentTheme === "dark" || currentTheme === "light") {
253
+ setDataTheme(currentTheme);
254
+ } else {
255
+ // matchMedia를 사용하여 시스템의 기본 테마를 확인
256
+ const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
257
+ // 시스템의 기본 테마가 dark이면 data-theme을 "dark"로 설정,
258
+ // 아니면 "light"로 설정
259
+ prefersDark ? setDataTheme("dark") : setDataTheme("light");
260
+ }
261
+ };
262
+ useEffect(() => {
263
+ const targetNode = document.documentElement; // <html> 엘리먼트
264
+ const observer = new MutationObserver(mutationsList => {
265
+ for (const mutation of mutationsList) {
266
+ if (mutation.type === "attributes" && mutation.attributeName === "data-theme") {
267
+ const currentTheme = targetNode.getAttribute("data-theme");
268
+ // currentTheme이 없으면 system의 기본 테마를 사용
269
+ if (currentTheme === "dark" || currentTheme === "light") {
270
+ setDataTheme(currentTheme);
271
+ } else {
272
+ // matchMedia를 사용하여 시스템의 기본 테마를 확인
273
+ const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
274
+ // 시스템의 기본 테마가 dark이면 data-theme을 "dark"로 설정,
275
+ // 아니면 "light"로 설정
276
+ prefersDark ? setDataTheme("dark") : setDataTheme("light");
277
+ }
278
+ }
279
+ }
280
+ });
281
+ observer.observe(targetNode, {
282
+ attributes: true,
283
+ // 속성 감시
284
+ attributeFilter: ["data-theme"] // data-theme만 감시
285
+ });
286
+ initTheme();
287
+ }, []);
288
+ const setStyleXProps = (...styles) => {
289
+ return stylex.props(dataTheme === "dark" ? darkMode : lightMode, ...styles);
290
+ };
291
+ return {
292
+ setStyleXProps,
293
+ dataTheme,
294
+ setDataTheme
295
+ };
296
+ };
297
+
298
+ // 간격 변수 정의
299
+ const spacing = {
300
+ xs: "var(--tpst1aa85u5)",
301
+ sm: "var(--tpst15cl33r)",
302
+ md: "var(--tpst1s1bzlu)",
303
+ lg: "var(--tpstr1ymy1)",
304
+ xl: "var(--tpst13zox1l)",
305
+ xxl: "var(--tpst1xkcubw)",
306
+ xxxl: "var(--tpst67ua5f)",
307
+ __themeName__: "tpst1cmuz2h"
308
+ };
309
+ // 테두리 반경 변수 정의
310
+ const borderRadius = {
311
+ none: "var(--tpst16kocez)",
312
+ xs: "var(--tpst1vsob78)",
313
+ sm: "var(--tpst1w7bvkk)",
314
+ md: "var(--tpst1ls88jo)",
315
+ lg: "var(--tpst1d2ic4p)",
316
+ xl: "var(--tpst1bkg6mz)",
317
+ full: "var(--tpstbu84cc)",
318
+ __themeName__: "tpstun8bdo"
319
+ };
260
320
 
261
321
  // 폰트 패밀리 변수 정의
262
322
  const fontFamily = {
@@ -594,61 +654,19 @@ const commonStyles = {
594
654
  * </Button>
595
655
  * ```
596
656
  */
597
- const Button = React__default.forwardRef(({
598
- variant = "accent",
599
- size = "regular",
600
- fullWidth = false,
601
- isLoading = false,
602
- leftIcon,
603
- rightIcon,
604
- children,
605
- disabled,
606
- className,
607
- ...rest
608
- }, ref) => {
609
- const buttonClasses = stylex.props(buttonStyles.base, buttonSizeStyles[size], buttonVariantStyles[variant], fullWidth ? buttonStyles.fullWidth : null, leftIcon || rightIcon ? buttonStyles.withIcon : null);
610
- const getLoadingSpinnerStyles = () => {
611
- if (size === "small") {
612
- return buttonStyles.spinnerSmall;
613
- }
614
- if (size === "large") {
615
- return buttonStyles.spinnerLarge;
616
- }
617
- return buttonStyles.spinner;
618
- };
619
- return jsxs("button", {
620
- ref: ref,
621
- disabled: disabled ?? isLoading,
622
- className: `${buttonClasses.className} ${className ?? ""}`,
623
- ...rest,
624
- children: [isLoading && jsx("svg", {
625
- xmlns: "http://www.w3.org/2000/svg",
626
- width: "24",
627
- height: "24",
628
- viewBox: "0 0 24 24",
629
- fill: "none",
630
- stroke: "currentColor",
631
- strokeWidth: "2",
632
- strokeLinecap: "round",
633
- strokeLinejoin: "round",
634
- className: `lucide lucide-loader-circle-icon lucide-loader-circle ${stylex.props(getLoadingSpinnerStyles()).className}`,
635
- children: jsx("path", {
636
- d: "M21 12a9 9 0 1 1-6.219-8.56"
637
- })
638
- }), leftIcon && jsx("span", {
639
- className: stylex.props(commonStyles.flexCenter).className,
640
- children: leftIcon
641
- }), children && jsx("span", {
642
- className: "button-text",
643
- style: {
644
- visibility: isLoading ? "hidden" : "visible"
645
- },
646
- children: children
647
- }), rightIcon && jsx("span", {
648
- className: stylex.props(commonStyles.flexCenter).className,
649
- children: rightIcon
650
- })]
651
- });
657
+ const Button = React__default.forwardRef(({ variant = "accent", size = "regular", fullWidth = false, isLoading = false, leftIcon, rightIcon, children, disabled, className, ...rest }, ref) => {
658
+ const { setStyleXProps } = usePreferColors();
659
+ const buttonClasses = setStyleXProps(buttonStyles.base, buttonSizeStyles[size], buttonVariantStyles[variant], fullWidth ? buttonStyles.fullWidth : null, leftIcon || rightIcon ? buttonStyles.withIcon : null);
660
+ const getLoadingSpinnerStyles = () => {
661
+ if (size === "small") {
662
+ return buttonStyles.spinnerSmall;
663
+ }
664
+ if (size === "large") {
665
+ return buttonStyles.spinnerLarge;
666
+ }
667
+ return buttonStyles.spinner;
668
+ };
669
+ return (jsxs("button", { ref: ref, disabled: disabled ?? isLoading, className: `${buttonClasses.className} ${className ?? ""}`, ...rest, children: [isLoading && (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: jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) })), leftIcon && (jsx("span", { className: setStyleXProps(commonStyles.flexCenter).className, children: leftIcon })), children && (jsx("span", { className: "button-text", style: { visibility: isLoading ? "hidden" : "visible" }, children: children })), rightIcon && (jsx("span", { className: setStyleXProps(commonStyles.flexCenter).className, children: rightIcon }))] }));
652
670
  });
653
671
  Button.displayName = "Button";
654
672
 
@@ -1017,24 +1035,10 @@ const textStyles = {
1017
1035
  }
1018
1036
  };
1019
1037
 
1020
- const Text = ({
1021
- children,
1022
- className,
1023
- size,
1024
- weight,
1025
- align,
1026
- variant = "regularBase",
1027
- color,
1028
- as: Component = "p"
1029
- }) => {
1030
- const styles = stylex.props(textStyles.base, textVariantStyles[variant], size ? textSizeStyles[size] : undefined, weight ? fontWeightStyles[weight] : undefined, align ? textAlignStyles[align] : undefined);
1031
- return jsx(Component, {
1032
- style: color ? {
1033
- color
1034
- } : undefined,
1035
- className: `${styles.className} ${className ?? ""}`,
1036
- children: children
1037
- });
1038
+ const Text = ({ children, className, size, weight, align, variant = "regularBase", color, as: Component = "p", }) => {
1039
+ const { setStyleXProps } = usePreferColors();
1040
+ const styles = setStyleXProps(textStyles.base, textVariantStyles[variant], size ? textSizeStyles[size] : undefined, weight ? fontWeightStyles[weight] : undefined, align ? textAlignStyles[align] : undefined);
1041
+ return (jsx(Component, { style: color ? { color } : undefined, className: `${styles.className} ${className ?? ""}`, children: children }));
1038
1042
  };
1039
1043
  Text.displayName = "Text";
1040
1044
 
@@ -1212,30 +1216,11 @@ const inputStyles = {
1212
1216
  * />
1213
1217
  * ```
1214
1218
  */
1215
- const Input = React__default.forwardRef(({
1216
- size = "regular",
1217
- leftIcon,
1218
- rightIcon,
1219
- wrapperClassName,
1220
- ...rest
1221
- }, ref) => {
1222
- const inputWrapperClasses = stylex.props(inputWrapperStyles.base, size ? inputWrapperSizeStyles[size] : inputWrapperSizeStyles.regular);
1223
- const inputClasses = stylex.props(inputStyles.base, size ? inputStyles[size] : inputStyles.regular);
1224
- return jsxs("div", {
1225
- "aria-disabled": rest.disabled,
1226
- className: `${inputWrapperClasses.className} ${wrapperClassName}`,
1227
- children: [leftIcon && jsx("span", {
1228
- className: stylex.props(commonStyles.flexCenter).className,
1229
- children: leftIcon
1230
- }), jsx("input", {
1231
- ref: ref,
1232
- className: `${inputClasses.className} ${rest.className}`,
1233
- ...rest
1234
- }), rightIcon && jsx("span", {
1235
- className: stylex.props(commonStyles.flexCenter).className,
1236
- children: rightIcon
1237
- })]
1238
- });
1219
+ const Input = React__default.forwardRef(({ size = "regular", leftIcon, rightIcon, wrapperClassName, ...rest }, ref) => {
1220
+ const { setStyleXProps } = usePreferColors();
1221
+ const inputWrapperClasses = setStyleXProps(inputWrapperStyles.base, size ? inputWrapperSizeStyles[size] : inputWrapperSizeStyles.regular);
1222
+ const inputClasses = setStyleXProps(inputStyles.base, size ? inputStyles[size] : inputStyles.regular);
1223
+ return (jsxs("div", { "aria-disabled": rest.disabled, className: `${inputWrapperClasses.className} ${wrapperClassName}`, children: [leftIcon && (jsx("span", { className: setStyleXProps(commonStyles.flexCenter).className, children: leftIcon })), jsx("input", { ref: ref, className: `${inputClasses.className} ${rest.className}`, ...rest }), rightIcon && (jsx("span", { className: setStyleXProps(commonStyles.flexCenter).className, children: rightIcon }))] }));
1239
1224
  });
1240
1225
  Input.displayName = "Input";
1241
1226
 
@@ -1339,15 +1324,9 @@ const textAreaStyles = {
1339
1324
  * ```
1340
1325
  */
1341
1326
  const TextArea = React__default.forwardRef((rest, ref) => {
1342
- const textAreaClasses = stylex.props(textAreaStyles.base, rest.disabled ? textAreaStyles.disabled : undefined);
1343
- return jsx("div", {
1344
- ...stylex.props(textAreaWrapperStyles.base),
1345
- children: jsx("textarea", {
1346
- ref: ref,
1347
- className: `${textAreaClasses.className} ${rest.className}`,
1348
- ...rest
1349
- })
1350
- });
1327
+ const { setStyleXProps } = usePreferColors();
1328
+ const textAreaClasses = setStyleXProps(textAreaStyles.base, rest.disabled ? textAreaStyles.disabled : undefined);
1329
+ return (jsx("div", { ...setStyleXProps(textAreaWrapperStyles.base), children: jsx("textarea", { ref: ref, className: `${textAreaClasses.className} ${rest.className}`, ...rest }) }));
1351
1330
  });
1352
1331
  TextArea.displayName = "TextArea";
1353
1332
 
@@ -10102,64 +10081,32 @@ const X = createLucideIcon("x", __iconNode);
10102
10081
  * />
10103
10082
  * ```
10104
10083
  */
10105
- const Checkbox = React__default.forwardRef(({
10106
- label,
10107
- labelClassName,
10108
- wrapperClassName,
10109
- ...rest
10110
- }, ref) => {
10111
- const {
10112
- checked: isChecked,
10113
- defaultChecked,
10114
- id,
10115
- disabled,
10116
- className,
10117
- onCheckedChange: onChange
10118
- } = rest;
10119
- const [checked, setChecked] = React__default.useState(isChecked ?? defaultChecked);
10120
- useEffect(() => {
10121
- setChecked(isChecked ?? defaultChecked);
10122
- }, [isChecked, defaultChecked]);
10123
- const randomId = React__default.useId();
10124
- const checkboxWrapperClasses = stylex.props(checkboxWrapperStyles.base);
10125
- const checkboxClasses = stylex.props(checkboxStyles.base);
10126
- const labelClasses = stylex.props(labelStyles.base, disabled ? labelStyles.disabled : undefined);
10127
- const checkboxIconClasses = stylex.props(checkboxStyles.icon, checked ? checkboxStyles.iconChecked : undefined, disabled ? checkboxStyles.iconDisabled : undefined);
10128
- const renderCheckboxIcon = (checked, disabled) => {
10129
- if (disabled) {
10130
- return jsx(SquareMinus, {
10131
- ...checkboxIconClasses
10132
- });
10133
- } else if (checked) {
10134
- return jsx(SquareCheck, {
10135
- ...checkboxIconClasses
10136
- });
10137
- }
10138
- return jsx(Square, {
10139
- ...checkboxIconClasses
10140
- });
10141
- };
10142
- const onCheckedChange = value => {
10143
- setChecked(value);
10144
- onChange?.(value);
10145
- };
10146
- return jsxs("div", {
10147
- className: `${checkboxWrapperClasses.className} ${wrapperClassName}`,
10148
- children: [jsx(Checkbox$1, {
10149
- ref: ref,
10150
- id: id ?? randomId,
10151
- ...rest,
10152
- checked: checked,
10153
- className: `${checkboxClasses.className} ${className}`,
10154
- onCheckedChange: onCheckedChange,
10155
- children: renderCheckboxIcon(checked, disabled)
10156
- }), jsx("label", {
10157
- className: `${labelClasses.className} ${labelClassName}`,
10158
- htmlFor: id ?? randomId,
10159
- "aria-disabled": disabled,
10160
- children: label
10161
- })]
10162
- });
10084
+ const Checkbox = React__default.forwardRef(({ label, labelClassName, wrapperClassName, ...rest }, ref) => {
10085
+ const { checked: isChecked, defaultChecked, id, disabled, className, onCheckedChange: onChange, } = rest;
10086
+ const { setStyleXProps } = usePreferColors();
10087
+ const [checked, setChecked] = React__default.useState(isChecked ?? defaultChecked);
10088
+ useEffect(() => {
10089
+ setChecked(isChecked ?? defaultChecked);
10090
+ }, [isChecked, defaultChecked]);
10091
+ const randomId = React__default.useId();
10092
+ const checkboxWrapperClasses = setStyleXProps(checkboxWrapperStyles.base);
10093
+ const checkboxClasses = setStyleXProps(checkboxStyles.base);
10094
+ const labelClasses = setStyleXProps(labelStyles.base, disabled ? labelStyles.disabled : undefined);
10095
+ const checkboxIconClasses = setStyleXProps(checkboxStyles.icon, checked ? checkboxStyles.iconChecked : undefined, disabled ? checkboxStyles.iconDisabled : undefined);
10096
+ const renderCheckboxIcon = (checked, disabled) => {
10097
+ if (disabled) {
10098
+ return jsx(SquareMinus, { ...checkboxIconClasses });
10099
+ }
10100
+ else if (checked) {
10101
+ return jsx(SquareCheck, { ...checkboxIconClasses });
10102
+ }
10103
+ return jsx(Square, { ...checkboxIconClasses });
10104
+ };
10105
+ const onCheckedChange = (value) => {
10106
+ setChecked(value);
10107
+ onChange?.(value);
10108
+ };
10109
+ return (jsxs("div", { className: `${checkboxWrapperClasses.className} ${wrapperClassName}`, children: [jsx(Checkbox$1, { ref: ref, id: id ?? randomId, ...rest, checked: checked, className: `${checkboxClasses.className} ${className}`, onCheckedChange: onCheckedChange, children: renderCheckboxIcon(checked, disabled) }), jsx("label", { className: `${labelClasses.className} ${labelClassName}`, htmlFor: id ?? randomId, "aria-disabled": disabled, children: label })] }));
10163
10110
  });
10164
10111
  Checkbox.displayName = "Checkbox";
10165
10112
 
@@ -10435,13 +10382,16 @@ const RadioGroup = React__default.forwardRef(({
10435
10382
  orientation = "vertical",
10436
10383
  ...rest
10437
10384
  }, ref) => {
10385
+ const {
10386
+ setStyleXProps
10387
+ } = usePreferColors();
10438
10388
  const {
10439
10389
  disabled,
10440
10390
  children,
10441
10391
  value,
10442
10392
  ...restProps
10443
10393
  } = rest;
10444
- const radioGroupClasses = stylex.props(radioGroupStyles.base, orientation === "horizontal" ? radioGroupStyles.horizontal : undefined);
10394
+ const radioGroupClasses = setStyleXProps(radioGroupStyles.base, orientation === "horizontal" ? radioGroupStyles.horizontal : undefined);
10445
10395
  return jsx(RadioGroupContext, {
10446
10396
  value: {
10447
10397
  value: value ?? "",
@@ -10469,11 +10419,14 @@ const RadioItem = React__default.forwardRef(({
10469
10419
  ...restProps
10470
10420
  } = rest;
10471
10421
  const randomId = id ?? React__default.useId();
10422
+ const {
10423
+ setStyleXProps
10424
+ } = usePreferColors();
10472
10425
  const isSelected = useContext(RadioGroupContext).value === value;
10473
10426
  const isDisabled = useContext(RadioGroupContext).disabled || disabled || false;
10474
- const radioItemWrapperClasses = stylex.props(radioItemWrapperStyles.base);
10475
- const radioItemLabelClasses = stylex.props(radioItemLabelStyles.base, isSelected ? radioItemLabelStyles.selected : undefined, isDisabled ? radioItemLabelStyles.disabled : undefined);
10476
- const radioItemClasses = stylex.props(radioItemStyles.base);
10427
+ const radioItemWrapperClasses = setStyleXProps(radioItemWrapperStyles.base);
10428
+ const radioItemLabelClasses = setStyleXProps(radioItemLabelStyles.base, isSelected ? radioItemLabelStyles.selected : undefined, isDisabled ? radioItemLabelStyles.disabled : undefined);
10429
+ const radioItemClasses = setStyleXProps(radioItemStyles.base);
10477
10430
  return jsxs("div", {
10478
10431
  className: `${radioItemWrapperClasses.className} ${wrapperClassName ?? ""}`,
10479
10432
  children: [jsx(Item2, {
@@ -10541,15 +10494,6 @@ const cardStyles = {
10541
10494
  k5QoK5: null,
10542
10495
  kLZC3w: null,
10543
10496
  kL6WhQ: null,
10544
- kmVPX3: "tpst1mkn4gz",
10545
- kg3NbH: null,
10546
- kuDDbn: null,
10547
- kE3dHu: null,
10548
- kP0aTx: null,
10549
- kpe85a: null,
10550
- k8WAf4: null,
10551
- kLKAdn: null,
10552
- kGO01o: null,
10553
10497
  kWkggS: "tpst1tugou3",
10554
10498
  $$css: true
10555
10499
  }
@@ -10612,60 +10556,28 @@ const cardFooterStyles = {
10612
10556
  * </CardFooter>
10613
10557
  * </Card>
10614
10558
  */
10615
- const Card = React__default.forwardRef(({
10616
- className,
10617
- ...rest
10618
- }, ref) => {
10619
- const cardClasses = stylex.props(cardStyles.base);
10620
- return jsx("div", {
10621
- ...rest,
10622
- ref: ref,
10623
- className: `${cardClasses.className} ${className ?? ""}`,
10624
- children: rest.children
10625
- });
10559
+ const Card = React__default.forwardRef(({ className, ...rest }, ref) => {
10560
+ const { setStyleXProps } = usePreferColors();
10561
+ const cardClasses = setStyleXProps(cardStyles.base);
10562
+ return (jsx("div", { ...rest, ref: ref, className: `${cardClasses.className} ${className ?? ""}`, children: rest.children }));
10626
10563
  });
10627
- const CardBody = React__default.forwardRef(({
10628
- className,
10629
- ...rest
10630
- }, ref) => {
10631
- const cardBodyClasses = stylex.props(cardBodyStyles.base);
10632
- return jsx("div", {
10633
- ...rest,
10634
- ref: ref,
10635
- className: `${cardBodyClasses.className} ${className ?? ""}`,
10636
- children: rest.children
10637
- });
10564
+ const CardBody = React__default.forwardRef(({ className, ...rest }, ref) => {
10565
+ const { setStyleXProps } = usePreferColors();
10566
+ const cardBodyClasses = setStyleXProps(cardBodyStyles.base);
10567
+ return (jsx("div", { ...rest, ref: ref, className: `${cardBodyClasses.className} ${className ?? ""}`, children: rest.children }));
10638
10568
  });
10639
- const CardHeader = React__default.forwardRef(({
10640
- className,
10641
- ...rest
10642
- }, ref) => {
10643
- const cardHeaderClasses = stylex.props(cardHeaderStyles.base);
10644
- return jsx("div", {
10645
- ...rest,
10646
- ref: ref,
10647
- className: `${cardHeaderClasses.className} ${className ?? ""}`,
10648
- children: rest.children
10649
- });
10569
+ const CardHeader = React__default.forwardRef(({ className, ...rest }, ref) => {
10570
+ const { setStyleXProps } = usePreferColors();
10571
+ const cardHeaderClasses = setStyleXProps(cardHeaderStyles.base);
10572
+ return (jsx("div", { ...rest, ref: ref, className: `${cardHeaderClasses.className} ${className ?? ""}`, children: rest.children }));
10650
10573
  });
10651
10574
  const CardContent = React__default.forwardRef((rest, ref) => {
10652
- return jsx("div", {
10653
- ...rest,
10654
- ref: ref,
10655
- children: rest.children
10656
- });
10575
+ return (jsx("div", { ...rest, ref: ref, children: rest.children }));
10657
10576
  });
10658
- const CardFooter = React__default.forwardRef(({
10659
- className,
10660
- ...rest
10661
- }, ref) => {
10662
- const cardFooterClasses = stylex.props(cardFooterStyles.base);
10663
- return jsx("div", {
10664
- ...rest,
10665
- ref: ref,
10666
- className: `${cardFooterClasses.className} ${className ?? ""}`,
10667
- children: rest.children
10668
- });
10577
+ const CardFooter = React__default.forwardRef(({ className, ...rest }, ref) => {
10578
+ const { setStyleXProps } = usePreferColors();
10579
+ const cardFooterClasses = setStyleXProps(cardFooterStyles.base);
10580
+ return (jsx("div", { ...rest, ref: ref, className: `${cardFooterClasses.className} ${className ?? ""}`, children: rest.children }));
10669
10581
  });
10670
10582
 
10671
10583
  const dialogOverlayStyles = {
@@ -10751,58 +10663,23 @@ const dialogContentStyles = {
10751
10663
  * </Dialog>
10752
10664
  */
10753
10665
  const Dialog = Root$2;
10754
- const DialogTrigger = props => {
10755
- return jsx(Trigger$4, {
10756
- className: props.className,
10757
- ...props,
10758
- "data-slot": "dialog-trigger",
10759
- asChild: true,
10760
- children: props.children
10761
- });
10666
+ const DialogTrigger = (props) => {
10667
+ return (jsx(Trigger$4, { className: props.className, ...props, "data-slot": "dialog-trigger", asChild: true, children: props.children }));
10762
10668
  };
10763
10669
  const DialogPortal = Portal$3;
10764
10670
  const DialogClose = Close;
10765
- const DialogContent = ({
10766
- className,
10767
- children,
10768
- ...props
10769
- }) => {
10770
- const dialogOverlayClasses = stylex.props(dialogOverlayStyles.base);
10771
- const dialogContentClasses = stylex.props(dialogContentStyles.base);
10772
- return jsxs(Portal$3, {
10773
- children: [jsx(Overlay, {
10774
- ...dialogOverlayClasses
10775
- }), jsxs(Content$1, {
10776
- className: `${dialogContentClasses.className} ${className ?? ""}`,
10777
- ...props,
10778
- children: [jsx(Description, {}), jsx(Card, {
10779
- children: children
10780
- })]
10781
- })]
10782
- });
10671
+ const DialogContent = ({ className, children, ...props }) => {
10672
+ const { setStyleXProps } = usePreferColors();
10673
+ const dialogOverlayClasses = setStyleXProps(dialogOverlayStyles.base);
10674
+ const dialogContentClasses = setStyleXProps(dialogContentStyles.base);
10675
+ return (jsxs(Portal$3, { children: [jsx(Overlay, { ...dialogOverlayClasses }), jsxs(Content$1, { className: `${dialogContentClasses.className} ${className ?? ""}`, ...props, children: [jsx(Description, {}), jsx(Card, { children: children })] })] }));
10783
10676
  };
10784
- const DialogHeader = ({
10785
- className,
10786
- ...props
10787
- }) => {
10788
- return jsx(Title, {
10789
- "data-slot": "dialog-title",
10790
- ...props,
10791
- children: jsx(CardHeader, {
10792
- className: className,
10793
- children: props.children
10794
- })
10795
- });
10677
+ const DialogHeader = ({ className, ...props }) => {
10678
+ return (jsx(Title, { "data-slot": "dialog-title", ...props, children: jsx(CardHeader, { className: className, children: props.children }) }));
10796
10679
  };
10797
10680
  const DialogFooter = CardFooter;
10798
- const DialogDescription = ({
10799
- className,
10800
- ...props
10801
- }) => {
10802
- return jsx(CardBody, {
10803
- className: className,
10804
- children: props.children
10805
- });
10681
+ const DialogDescription = ({ className, ...props }) => {
10682
+ return jsx(CardBody, { className: className, children: props.children });
10806
10683
  };
10807
10684
 
10808
10685
  const selectIconWrapperStyles = {
@@ -11124,95 +11001,37 @@ const selectGroupLabelStyles = {
11124
11001
  * </SelectContent>
11125
11002
  * </Select>
11126
11003
  */
11127
- const Select = props => jsx(Root2, {
11128
- ...props
11129
- });
11130
- const SelectTrigger = ({
11131
- placeholder,
11132
- variant = "outline",
11133
- size = "regular",
11134
- icon,
11135
- ...rest
11136
- }) => {
11137
- const {
11138
- className,
11139
- ...otherProps
11140
- } = rest;
11141
- const triggerClasses = stylex.props(selectTriggerStyles.base, selectTriggerStyles[variant], selectTriggerStyles[size]);
11142
- const iconWrapperClasses = stylex.props(selectIconWrapperStyles.base);
11143
- return jsxs(Trigger$1, {
11144
- className: `${triggerClasses.className} ${className}`,
11145
- ...otherProps,
11146
- children: [icon && jsx("div", {
11147
- className: iconWrapperClasses.className,
11148
- children: icon
11149
- }), jsx(Value, {
11150
- placeholder: placeholder
11151
- }), jsx(Icon$1, {
11152
- className: iconWrapperClasses.className,
11153
- children: jsx(CaretDownIcon, {})
11154
- })]
11155
- });
11156
- };
11157
- const SelectContent = ({
11158
- children,
11159
- ...rest
11160
- }) => {
11161
- const contentClasses = stylex.props(selectContentStyles.base);
11162
- const {
11163
- className,
11164
- position,
11165
- sideOffset,
11166
- ...otherProps
11167
- } = rest;
11168
- return jsx(Portal$1, {
11169
- children: jsx(Content2$1, {
11170
- position: "popper",
11171
- sideOffset: 7,
11172
- className: `${contentClasses.className} ${className}`,
11173
- ...otherProps,
11174
- children: jsx(Viewport, {
11175
- children: children
11176
- })
11177
- })
11178
- });
11004
+ const Select = (props) => jsx(Root2, { ...props });
11005
+ const SelectTrigger = ({ placeholder, variant = "outline", size = "regular", icon, ...rest }) => {
11006
+ const { setStyleXProps } = usePreferColors();
11007
+ const { className, ...otherProps } = rest;
11008
+ const triggerClasses = setStyleXProps(selectTriggerStyles.base, selectTriggerStyles[variant], selectTriggerStyles[size]);
11009
+ const iconWrapperClasses = setStyleXProps(selectIconWrapperStyles.base);
11010
+ return (jsxs(Trigger$1, { className: `${triggerClasses.className} ${className}`, ...otherProps, children: [icon && jsx("div", { className: iconWrapperClasses.className, children: icon }), jsx(Value, { placeholder: placeholder }), jsx(Icon$1, { className: iconWrapperClasses.className, children: jsx(CaretDownIcon, {}) })] }));
11011
+ };
11012
+ const SelectContent = ({ children, ...rest }) => {
11013
+ const { setStyleXProps } = usePreferColors();
11014
+ const contentClasses = setStyleXProps(selectContentStyles.base);
11015
+ const { className, position, sideOffset, ...otherProps } = rest;
11016
+ return (jsx(Portal$1, { children: jsx(Content2$1, { position: "popper", sideOffset: 7, className: `${contentClasses.className} ${className}`, ...otherProps, children: jsx(Viewport, { children: children }) }) }));
11179
11017
  };
11180
11018
  const SelectGroup = Group;
11181
- const SelectLabel = props => {
11182
- const groupLabelClasses = stylex.props(selectGroupLabelStyles.base);
11183
- return jsx(Label, {
11184
- ...props,
11185
- className: groupLabelClasses.className
11186
- });
11187
- };
11188
- const SelectSeparator = props => {
11189
- const separatorClasses = stylex.props(selectSeparatorStyles.base);
11190
- return jsx(Separator, {
11191
- ...props,
11192
- className: separatorClasses.className
11193
- });
11194
- };
11195
- const SelectItem = ({
11196
- indicator,
11197
- ...rest
11198
- }) => {
11199
- const itemClasses = stylex.props(selectItemStyles.base);
11200
- const itemIndicatorClasses = stylex.props(selectItemStyles.indicator);
11201
- const {
11202
- className,
11203
- textValue,
11204
- ...otherProps
11205
- } = rest;
11206
- return jsxs(Item, {
11207
- className: `${itemClasses.className} ${className}`,
11208
- ...otherProps,
11209
- children: [jsx(ItemText, {
11210
- children: textValue
11211
- }), indicator && jsx(ItemIndicator, {
11212
- className: itemIndicatorClasses.className,
11213
- children: indicator
11214
- })]
11215
- });
11019
+ const SelectLabel = (props) => {
11020
+ const { setStyleXProps } = usePreferColors();
11021
+ const groupLabelClasses = setStyleXProps(selectGroupLabelStyles.base);
11022
+ return (jsx(Label, { ...props, className: groupLabelClasses.className }));
11023
+ };
11024
+ const SelectSeparator = (props) => {
11025
+ const { setStyleXProps } = usePreferColors();
11026
+ const separatorClasses = setStyleXProps(selectSeparatorStyles.base);
11027
+ return (jsx(Separator, { ...props, className: separatorClasses.className }));
11028
+ };
11029
+ const SelectItem = ({ indicator, ...rest }) => {
11030
+ const { setStyleXProps } = usePreferColors();
11031
+ const itemClasses = setStyleXProps(selectItemStyles.base);
11032
+ const itemIndicatorClasses = setStyleXProps(selectItemStyles.indicator);
11033
+ const { className, textValue, ...otherProps } = rest;
11034
+ return (jsxs(Item, { className: `${itemClasses.className} ${className}`, ...otherProps, children: [jsx(ItemText, { children: textValue }), indicator && (jsx(ItemIndicator, { className: itemIndicatorClasses.className, children: indicator }))] }));
11216
11035
  };
11217
11036
  Select.displayName = "Select";
11218
11037
  SelectTrigger.displayName = "SelectTrigger";
@@ -11362,70 +11181,41 @@ const verticalMenuStyles = {
11362
11181
  };
11363
11182
 
11364
11183
  const VerticalMenusContext = createContext({
11365
- value: "",
11366
- disabled: false,
11367
- setSelectedMenu: () => {}
11184
+ value: "",
11185
+ disabled: false,
11186
+ setSelectedMenu: () => { },
11368
11187
  });
11369
- const VerticalMenus = React__default.forwardRef(({
11370
- disabled,
11371
- value,
11372
- onValueChange,
11373
- className,
11374
- ...rest
11375
- }, ref) => {
11376
- const [selectedMenu, setSelectedMenu] = React__default.useState(value || "");
11377
- const verticalMenusClasses = stylex.props(verticalMenusWrapperStyles.base);
11378
- useEffect(() => {
11379
- if (!onValueChange) return;
11380
- onValueChange(selectedMenu);
11381
- }, [selectedMenu]);
11382
- return jsx(VerticalMenusContext, {
11383
- value: {
11384
- value: selectedMenu,
11385
- disabled: disabled ?? false,
11386
- setSelectedMenu
11387
- },
11388
- children: jsx("div", {
11389
- ref: ref,
11390
- className: `${verticalMenusClasses.className} ${className || ""}`,
11391
- ...rest,
11392
- children: rest.children
11393
- })
11394
- });
11188
+ const VerticalMenus = React__default.forwardRef(({ disabled, value, onValueChange, className, ...rest }, ref) => {
11189
+ const { setStyleXProps } = usePreferColors();
11190
+ const [selectedMenu, setSelectedMenu] = React__default.useState(value || "");
11191
+ const verticalMenusClasses = setStyleXProps(verticalMenusWrapperStyles.base);
11192
+ useEffect(() => {
11193
+ if (!onValueChange)
11194
+ return;
11195
+ onValueChange(selectedMenu);
11196
+ }, [selectedMenu]);
11197
+ return (jsx(VerticalMenusContext, { value: {
11198
+ value: selectedMenu,
11199
+ disabled: disabled ?? false,
11200
+ setSelectedMenu,
11201
+ }, children: jsx("div", { ref: ref, className: `${verticalMenusClasses.className} ${className || ""}`, ...rest, children: rest.children }) }));
11395
11202
  });
11396
- const VerticalMenu = React__default.forwardRef(({
11397
- disabled,
11398
- value,
11399
- label,
11400
- icon,
11401
- variant = "accent",
11402
- size = "regular",
11403
- ...rest
11404
- }, ref) => {
11405
- const context = useContext(VerticalMenusContext);
11406
- const isSelected = context.value === value;
11407
- const isDisabled = context.disabled || disabled || false;
11408
- const verticalMenuClasses = stylex.props(verticalMenuStyles.base, verticalMenuStyles[variant], verticalMenuStyles[size]);
11409
- const verticalMenuIconClasses = stylex.props(verticalMenuIconStyles.base);
11410
- const onClick = e => {
11411
- if (isDisabled) return;
11412
- if (context.disabled) return;
11413
- context.setSelectedMenu?.(value);
11414
- rest.onClick?.(e);
11415
- };
11416
- return jsxs("button", {
11417
- ref: ref,
11418
- className: `${verticalMenuClasses.className} ${rest.className || ""}`,
11419
- ...rest,
11420
- disabled: isDisabled,
11421
- value: value,
11422
- "data-selected": isSelected,
11423
- onClick: onClick,
11424
- children: [icon && jsx("span", {
11425
- ...verticalMenuIconClasses,
11426
- children: icon
11427
- }), label]
11428
- });
11203
+ const VerticalMenu = React__default.forwardRef(({ disabled, value, label, icon, variant = "accent", size = "regular", ...rest }, ref) => {
11204
+ const context = useContext(VerticalMenusContext);
11205
+ const { setStyleXProps } = usePreferColors();
11206
+ const isSelected = context.value === value;
11207
+ const isDisabled = context.disabled || disabled || false;
11208
+ const verticalMenuClasses = setStyleXProps(verticalMenuStyles.base, verticalMenuStyles[variant], verticalMenuStyles[size]);
11209
+ const verticalMenuIconClasses = setStyleXProps(verticalMenuIconStyles.base);
11210
+ const onClick = (e) => {
11211
+ if (isDisabled)
11212
+ return;
11213
+ if (context.disabled)
11214
+ return;
11215
+ context.setSelectedMenu?.(value);
11216
+ rest.onClick?.(e);
11217
+ };
11218
+ return (jsxs("button", { ref: ref, className: `${verticalMenuClasses.className} ${rest.className || ""}`, ...rest, disabled: isDisabled, value: value, "data-selected": isSelected, onClick: onClick, children: [icon && jsx("span", { ...verticalMenuIconClasses, children: icon }), label] }));
11429
11219
  });
11430
11220
  VerticalMenu.displayName = "VerticalMenu";
11431
11221
 
@@ -11555,78 +11345,40 @@ const horizontalTabStyles = {
11555
11345
  };
11556
11346
 
11557
11347
  const HorizontalTabContext = React__default.createContext({
11558
- value: "",
11559
- disabled: false,
11560
- setSelectedTab: () => {}
11348
+ value: "",
11349
+ disabled: false,
11350
+ setSelectedTab: () => { },
11561
11351
  });
11562
- const HorizontalTabs = React__default.forwardRef(({
11563
- disabled,
11564
- value,
11565
- onValueChange,
11566
- className,
11567
- ...rest
11568
- }, ref) => {
11569
- const [selectedTab, setSelectedTab] = React__default.useState(value || "");
11570
- const horizontalTabClasses = stylex.props(horizontalTabWrapperStyles.base);
11571
- React__default.useEffect(() => {
11572
- if (!onValueChange) return;
11573
- onValueChange(selectedTab);
11574
- }, [selectedTab]);
11575
- return jsx(HorizontalTabContext.Provider, {
11576
- value: {
11577
- value: selectedTab,
11578
- disabled: disabled ?? false,
11579
- setSelectedTab
11580
- },
11581
- children: jsx("div", {
11582
- ref: ref,
11583
- className: `${horizontalTabClasses.className} ${className || ""}`,
11584
- ...rest,
11585
- children: rest.children
11586
- })
11587
- });
11352
+ const HorizontalTabs = React__default.forwardRef(({ disabled, value, onValueChange, className, ...rest }, ref) => {
11353
+ const { setStyleXProps } = usePreferColors();
11354
+ const [selectedTab, setSelectedTab] = React__default.useState(value || "");
11355
+ const horizontalTabClasses = setStyleXProps(horizontalTabWrapperStyles.base);
11356
+ React__default.useEffect(() => {
11357
+ if (!onValueChange)
11358
+ return;
11359
+ onValueChange(selectedTab);
11360
+ }, [selectedTab]);
11361
+ return (jsx(HorizontalTabContext.Provider, { value: {
11362
+ value: selectedTab,
11363
+ disabled: disabled ?? false,
11364
+ setSelectedTab,
11365
+ }, children: jsx("div", { ref: ref, className: `${horizontalTabClasses.className} ${className || ""}`, ...rest, children: rest.children }) }));
11588
11366
  });
11589
- const HorizontalTab = React__default.forwardRef(({
11590
- value,
11591
- label,
11592
- className,
11593
- icon,
11594
- size = "regular",
11595
- ...rest
11596
- }, ref) => {
11597
- const {
11598
- value: selectedTab,
11599
- setSelectedTab,
11600
- disabled
11601
- } = React__default.useContext(HorizontalTabContext);
11602
- const isSelected = selectedTab === value;
11603
- const isDisabled = disabled || rest.disabled;
11604
- const handleClick = () => {
11605
- if (isDisabled) return;
11606
- setSelectedTab(value);
11607
- };
11608
- const horizontalTabClasses = stylex.props(horizontalTabStyles.base);
11609
- const iconClasses = stylex.props(horizontalTabStyles.icon, size === "small" && horizontalTabStyles.iconSmall);
11610
- const lineClasses = stylex.props(horizontalTabStyles.line);
11611
- const labelWrapperClasses = stylex.props(horizontalTabStyles.labelWrapper, horizontalTabStyles[size || "regular"]);
11612
- return jsxs("button", {
11613
- ref: ref,
11614
- className: `${horizontalTabClasses.className} ${className || ""}`,
11615
- onClick: handleClick,
11616
- disabled: isDisabled,
11617
- "data-selected": isSelected,
11618
- ...rest,
11619
- children: [jsxs("div", {
11620
- ...labelWrapperClasses,
11621
- children: [icon && jsx("span", {
11622
- ...iconClasses,
11623
- children: icon
11624
- }), label]
11625
- }), jsx("div", {
11626
- ...lineClasses,
11627
- "data-selected": isSelected
11628
- })]
11629
- });
11367
+ const HorizontalTab = React__default.forwardRef(({ value, label, className, icon, size = "regular", ...rest }, ref) => {
11368
+ const { value: selectedTab, setSelectedTab, disabled, } = React__default.useContext(HorizontalTabContext);
11369
+ const { setStyleXProps } = usePreferColors();
11370
+ const isSelected = selectedTab === value;
11371
+ const isDisabled = disabled || rest.disabled;
11372
+ const handleClick = () => {
11373
+ if (isDisabled)
11374
+ return;
11375
+ setSelectedTab(value);
11376
+ };
11377
+ const horizontalTabClasses = setStyleXProps(horizontalTabStyles.base);
11378
+ const iconClasses = setStyleXProps(horizontalTabStyles.icon, size === "small" && horizontalTabStyles.iconSmall);
11379
+ const lineClasses = setStyleXProps(horizontalTabStyles.line);
11380
+ const labelWrapperClasses = setStyleXProps(horizontalTabStyles.labelWrapper, horizontalTabStyles[size || "regular"]);
11381
+ return (jsxs("button", { ref: ref, className: `${horizontalTabClasses.className} ${className || ""}`, onClick: handleClick, disabled: isDisabled, "data-selected": isSelected, ...rest, children: [jsxs("div", { ...labelWrapperClasses, children: [icon && jsx("span", { ...iconClasses, children: icon }), label] }), jsx("div", { ...lineClasses, "data-selected": isSelected })] }));
11630
11382
  });
11631
11383
 
11632
11384
  const modeTabWrapperStyles = {
@@ -11739,69 +11491,38 @@ const modeTabStyles = {
11739
11491
  };
11740
11492
 
11741
11493
  const ModeTabContext = React__default.createContext({
11742
- value: "",
11743
- disabled: false,
11744
- setSelectedTab: () => {}
11494
+ value: "",
11495
+ disabled: false,
11496
+ setSelectedTab: () => { },
11745
11497
  });
11746
- const ModeTabs = React__default.forwardRef(({
11747
- disabled,
11748
- value,
11749
- onValueChange,
11750
- className,
11751
- ...rest
11752
- }, ref) => {
11753
- const [selectedTab, setSelectedTab] = React__default.useState(value || "");
11754
- const modeTabsClasses = stylex.props(modeTabWrapperStyles.base);
11755
- React__default.useEffect(() => {
11756
- if (!onValueChange) return;
11757
- onValueChange(selectedTab);
11758
- }, [selectedTab]);
11759
- return jsx(ModeTabContext, {
11760
- value: {
11761
- value: selectedTab,
11762
- disabled: disabled ?? false,
11763
- setSelectedTab
11764
- },
11765
- children: jsx("div", {
11766
- ref: ref,
11767
- className: `${modeTabsClasses.className} ${className || ""}`,
11768
- ...rest,
11769
- children: rest.children
11770
- })
11771
- });
11498
+ const ModeTabs = React__default.forwardRef(({ disabled, value, onValueChange, className, ...rest }, ref) => {
11499
+ const { setStyleXProps } = usePreferColors();
11500
+ const [selectedTab, setSelectedTab] = React__default.useState(value || "");
11501
+ const modeTabsClasses = setStyleXProps(modeTabWrapperStyles.base);
11502
+ React__default.useEffect(() => {
11503
+ if (!onValueChange)
11504
+ return;
11505
+ onValueChange(selectedTab);
11506
+ }, [selectedTab]);
11507
+ return (jsx(ModeTabContext, { value: {
11508
+ value: selectedTab,
11509
+ disabled: disabled ?? false,
11510
+ setSelectedTab,
11511
+ }, children: jsx("div", { ref: ref, className: `${modeTabsClasses.className} ${className || ""}`, ...rest, children: rest.children }) }));
11772
11512
  });
11773
- const ModeTab = React__default.forwardRef(({
11774
- label,
11775
- icon,
11776
- value,
11777
- className,
11778
- ...rest
11779
- }, ref) => {
11780
- const modeTabClasses = stylex.props(modeTabStyles.base);
11781
- const iconClasses = stylex.props(modeTabStyles.icon);
11782
- const {
11783
- value: selectedTab,
11784
- disabled,
11785
- setSelectedTab
11786
- } = React__default.useContext(ModeTabContext);
11787
- const isSelected = selectedTab === value;
11788
- const isDisabled = disabled || rest.disabled;
11789
- const handleClick = () => {
11790
- if (isDisabled) return;
11791
- setSelectedTab(value);
11792
- };
11793
- return jsxs("button", {
11794
- ref: ref,
11795
- className: `${modeTabClasses.className} ${className || ""}`,
11796
- "data-selected": isSelected,
11797
- disabled: isDisabled,
11798
- onClick: handleClick,
11799
- ...rest,
11800
- children: [icon && jsx("span", {
11801
- ...iconClasses,
11802
- children: icon
11803
- }), label]
11804
- });
11513
+ const ModeTab = React__default.forwardRef(({ label, icon, value, className, ...rest }, ref) => {
11514
+ const { setStyleXProps } = usePreferColors();
11515
+ const modeTabClasses = setStyleXProps(modeTabStyles.base);
11516
+ const iconClasses = setStyleXProps(modeTabStyles.icon);
11517
+ const { value: selectedTab, disabled, setSelectedTab, } = React__default.useContext(ModeTabContext);
11518
+ const isSelected = selectedTab === value;
11519
+ const isDisabled = disabled || rest.disabled;
11520
+ const handleClick = () => {
11521
+ if (isDisabled)
11522
+ return;
11523
+ setSelectedTab(value);
11524
+ };
11525
+ return (jsxs("button", { ref: ref, className: `${modeTabClasses.className} ${className || ""}`, "data-selected": isSelected, disabled: isDisabled, onClick: handleClick, ...rest, children: [icon && jsx("span", { ...iconClasses, children: icon }), label] }));
11805
11526
  });
11806
11527
 
11807
11528
  const tooltipDescriptionStyles = {
@@ -11967,94 +11688,40 @@ const tooltipShortStyles = {
11967
11688
  }
11968
11689
  };
11969
11690
 
11970
- const Tooltip = props => {
11971
- const {
11972
- delayDuration,
11973
- skipDelayDuration,
11974
- disableHoverableContent,
11975
- ...rest
11976
- } = props;
11977
- return jsx(Provider, {
11978
- delayDuration: delayDuration,
11979
- skipDelayDuration: skipDelayDuration,
11980
- disableHoverableContent: disableHoverableContent,
11981
- children: jsx(Root3, {
11982
- ...rest,
11983
- children: props.children
11984
- })
11985
- });
11691
+ const Tooltip = (props) => {
11692
+ const { delayDuration, skipDelayDuration, disableHoverableContent, ...rest } = props;
11693
+ return (jsx(Provider, { delayDuration: delayDuration, skipDelayDuration: skipDelayDuration, disableHoverableContent: disableHoverableContent, children: jsx(Root3, { ...rest, children: props.children }) }));
11986
11694
  };
11987
11695
  const TooltipTrigger = Trigger;
11988
- const TooltipContent = ({
11989
- type,
11990
- ...rest
11991
- }) => {
11992
- if (type === "default") {
11993
- const contentClasses = stylex.props(tooltipDescriptionStyles.base);
11994
- const {
11995
- className,
11996
- ...otherProps
11997
- } = rest;
11998
- return jsx(Portal, {
11999
- children: jsx(Content2, {
12000
- className: `${contentClasses.className} ${className}`,
12001
- ...otherProps,
12002
- children: rest.children
12003
- })
12004
- });
12005
- }
12006
- const {
12007
- variant = "default",
12008
- size = "regular"
12009
- } = rest;
12010
- const contentClasses = stylex.props(tooltipShortStyles.base, type === "short" && tooltipShortStyles[variant], type === "short" && tooltipShortStyles[size]);
12011
- return jsx(Portal, {
12012
- children: jsx(Content2, {
12013
- className: contentClasses.className,
12014
- ...rest,
12015
- children: rest.children
12016
- })
12017
- });
11696
+ const TooltipContent = ({ type, ...rest }) => {
11697
+ const { setStyleXProps } = usePreferColors();
11698
+ if (type === "default") {
11699
+ const contentClasses = setStyleXProps(tooltipDescriptionStyles.base);
11700
+ const { className, ...otherProps } = rest;
11701
+ return (jsx(Portal, { children: jsx(Content2, { className: `${contentClasses.className} ${className}`, ...otherProps, children: rest.children }) }));
11702
+ }
11703
+ const { variant = "default", size = "regular" } = rest;
11704
+ const contentClasses = setStyleXProps(tooltipShortStyles.base, type === "short" && tooltipShortStyles[variant], type === "short" && tooltipShortStyles[size]);
11705
+ return (jsx(Portal, { children: jsx(Content2, { className: contentClasses.className, ...rest, children: rest.children }) }));
12018
11706
  };
12019
11707
  const TooltipArrow = Arrow2;
12020
11708
  const TooltipHeader = React__default.forwardRef((props, ref) => {
12021
- const {
12022
- className,
12023
- ...otherProps
12024
- } = props;
12025
- const headerClasses = stylex.props(tooltipDescriptionStyles.header);
12026
- return jsx("div", {
12027
- className: `${headerClasses.className} ${className}`,
12028
- ...otherProps,
12029
- ref: ref,
12030
- children: props.children
12031
- });
11709
+ const { className, ...otherProps } = props;
11710
+ const { setStyleXProps } = usePreferColors();
11711
+ const headerClasses = setStyleXProps(tooltipDescriptionStyles.header);
11712
+ return (jsx("div", { className: `${headerClasses.className} ${className}`, ...otherProps, ref: ref, children: props.children }));
12032
11713
  });
12033
11714
  const TooltipDescription = React__default.forwardRef((props, ref) => {
12034
- const {
12035
- className,
12036
- ...otherProps
12037
- } = props;
12038
- const descriptionClasses = stylex.props(tooltipDescriptionStyles.content);
12039
- return jsx("div", {
12040
- className: `${descriptionClasses.className} ${className}`,
12041
- ...otherProps,
12042
- ref: ref,
12043
- children: props.children
12044
- });
11715
+ const { className, ...otherProps } = props;
11716
+ const { setStyleXProps } = usePreferColors();
11717
+ const descriptionClasses = setStyleXProps(tooltipDescriptionStyles.content);
11718
+ return (jsx("div", { className: `${descriptionClasses.className} ${className}`, ...otherProps, ref: ref, children: props.children }));
12045
11719
  });
12046
11720
  const TooltipFooter = React__default.forwardRef((props, ref) => {
12047
- const {
12048
- className,
12049
- ...otherProps
12050
- } = props;
12051
- const footerClasses = stylex.props(tooltipDescriptionStyles.footer);
12052
- return jsx("div", {
12053
- className: `${footerClasses.className} ${className}`,
12054
- ...otherProps,
12055
- ref: ref,
12056
- children: props.children
12057
- });
11721
+ const { className, ...otherProps } = props;
11722
+ const { setStyleXProps } = usePreferColors();
11723
+ const footerClasses = setStyleXProps(tooltipDescriptionStyles.footer);
11724
+ return (jsx("div", { className: `${footerClasses.className} ${className}`, ...otherProps, ref: ref, children: props.children }));
12058
11725
  });
12059
11726
 
12060
11727
  const tagStyles = {
@@ -12345,46 +12012,21 @@ const tagStyles = {
12345
12012
  }
12346
12013
  };
12347
12014
 
12348
- const Tag = React__default.forwardRef(({
12349
- icon,
12350
- value,
12351
- variant = "filled",
12352
- size = "regular",
12353
- className,
12354
- onDeleteClick,
12355
- onClick,
12356
- ...props
12357
- }, ref) => {
12358
- const [isSelected, setIsSelected] = React__default.useState(false);
12359
- const handleClick = event => {
12360
- setIsSelected(prev => !prev);
12361
- onClick?.(event);
12362
- };
12363
- const tagClasses = stylex.props(tagStyles.base, tagStyles[variant], tagStyles[size]);
12364
- const iconClasses = stylex.props(tagStyles.icon);
12365
- const textClasses = stylex.props(tagStyles.text);
12366
- const handleDeleteClick = event => {
12367
- event.stopPropagation();
12368
- onDeleteClick?.(value, event);
12369
- };
12370
- return jsxs("button", {
12371
- ref: ref,
12372
- className: `${tagClasses.className} ${className ?? ""}`,
12373
- onClick: handleClick,
12374
- "data-selected": isSelected,
12375
- ...props,
12376
- children: [icon && jsx("span", {
12377
- className: iconClasses.className,
12378
- children: icon
12379
- }), jsx("span", {
12380
- ...textClasses,
12381
- children: value.label
12382
- }), onDeleteClick && jsx("span", {
12383
- className: iconClasses.className,
12384
- onClick: handleDeleteClick,
12385
- children: jsx(X, {})
12386
- })]
12387
- });
12015
+ const Tag = React__default.forwardRef(({ icon, value, variant = "filled", size = "regular", className, onDeleteClick, onClick, ...props }, ref) => {
12016
+ const { setStyleXProps } = usePreferColors();
12017
+ const [isSelected, setIsSelected] = React__default.useState(false);
12018
+ const handleClick = (event) => {
12019
+ setIsSelected((prev) => !prev);
12020
+ onClick?.(event);
12021
+ };
12022
+ const tagClasses = setStyleXProps(tagStyles.base, tagStyles[variant], tagStyles[size]);
12023
+ const iconClasses = setStyleXProps(tagStyles.icon);
12024
+ const textClasses = setStyleXProps(tagStyles.text);
12025
+ const handleDeleteClick = (event) => {
12026
+ event.stopPropagation();
12027
+ onDeleteClick?.(value, event);
12028
+ };
12029
+ return (jsxs("button", { ref: ref, className: `${tagClasses.className} ${className ?? ""}`, onClick: handleClick, "data-selected": isSelected, ...props, children: [icon && jsx("span", { className: iconClasses.className, children: icon }), jsx("span", { ...textClasses, children: value.label }), onDeleteClick && (jsx("span", { className: iconClasses.className, onClick: handleDeleteClick, children: jsx(X, {}) }))] }));
12388
12030
  });
12389
12031
  Tag.displayName = "Tag";
12390
12032
 
@@ -12759,245 +12401,131 @@ const multipleSelectItemStyles = {
12759
12401
  };
12760
12402
 
12761
12403
  const MultipleSelectContext = React__default.createContext({
12762
- isOpen: false,
12763
- values: [],
12764
- disabled: false,
12765
- setSelectedValues: () => {},
12766
- setIsOpen: () => {}
12404
+ isOpen: false,
12405
+ values: [],
12406
+ disabled: false,
12407
+ setSelectedValues: () => { },
12408
+ setIsOpen: () => { },
12767
12409
  });
12768
- const MultipleSelect = React__default.forwardRef(({
12769
- open,
12770
- onOpenChange,
12771
- disabled,
12772
- value,
12773
- onValueChange,
12774
- className,
12775
- children,
12776
- ...rest
12777
- }, ref) => {
12778
- const [isOpen, setIsOpen] = React__default.useState(open || false);
12779
- const [selectedValues, setSelectedValues] = React__default.useState([]);
12780
- const wrapperStyles = stylex.props(multipleSelectWrapperStyles.base);
12781
- useEffect(() => {
12782
- setIsOpen(open || false);
12783
- }, [open]);
12784
- const onSelectedValuesChange = newValues => {
12785
- setSelectedValues(newValues);
12786
- onValueChange?.(newValues.map(value => ({
12787
- value: value.value,
12788
- label: value.label
12789
- })));
12790
- };
12791
- const onTriggerOpenChange = value => {
12792
- setIsOpen(value);
12793
- onOpenChange?.(value);
12794
- };
12795
- return jsx(MultipleSelectContext, {
12796
- value: {
12797
- isOpen,
12798
- values: selectedValues,
12799
- disabled: disabled || false,
12800
- setSelectedValues: onSelectedValuesChange,
12801
- setIsOpen: onTriggerOpenChange
12802
- },
12803
- children: jsx("div", {
12804
- ref: ref,
12805
- className: `${wrapperStyles.className} ${className ?? ""}`,
12806
- ...rest,
12807
- children: children
12808
- })
12809
- });
12810
- });
12811
- const MultipleSelectTrigger = React__default.forwardRef(({
12812
- size = "regular",
12813
- children,
12814
- ...rest
12815
- }, ref) => {
12816
- const {
12817
- className,
12818
- onClick,
12819
- ...otherProps
12820
- } = rest;
12821
- const {
12822
- disabled,
12823
- values,
12824
- isOpen,
12825
- setIsOpen
12826
- } = React__default.useContext(MultipleSelectContext);
12827
- const triggerStyles = stylex.props(multipleSelectTriggerStyles.base, multipleSelectTriggerStyles[size]);
12828
- const arrowStyles = stylex.props(multipleSelectTriggerStyles.arrow);
12829
- const handleTriggerClick = e => {
12830
- e.stopPropagation();
12831
- if (disabled) return;
12832
- const value = !isOpen;
12833
- setIsOpen(value);
12834
- onClick?.(e);
12835
- };
12836
- return jsxs("div", {
12837
- ref: ref,
12838
- className: `${triggerStyles.className} ${className ?? ""}`,
12839
- "data-disabled": disabled,
12840
- "data-selected": values.length > 0,
12841
- onClick: handleTriggerClick,
12842
- ...otherProps,
12843
- children: [children, jsx("span", {
12844
- ...arrowStyles,
12845
- children: jsx(ChevronDown, {
12846
- size: 16
12847
- })
12848
- })]
12849
- });
12850
- });
12851
- const MultipleSelectValue = React__default.forwardRef(({
12852
- placeholder,
12853
- className,
12854
- ...rest
12855
- }, ref) => {
12856
- const {
12857
- values,
12858
- disabled,
12859
- setSelectedValues
12860
- } = React__default.useContext(MultipleSelectContext);
12861
- const [content, setContent] = React__default.useState(null);
12862
- const composedRefs = useComposedRefs(ref, node => setContent(node));
12863
- const valueStyles = stylex.props(multipleSelectTriggerStyles.value);
12864
- const tagStyles = stylex.props(multipleSelectTriggerStyles.tag);
12865
- const placeholderStyles = stylex.props(multipleSelectTriggerStyles.placeholder);
12866
- const onDeleteClick = (value, e) => {
12867
- e.stopPropagation();
12868
- const newValues = values.filter(v => v.value !== value.id);
12869
- setSelectedValues(newValues);
12870
- };
12871
- return jsx("div", {
12872
- ref: composedRefs,
12873
- style: {
12874
- "--select-content-width": `${content?.offsetWidth}px`
12875
- },
12876
- className: `${valueStyles.className} ${className ?? ""}`,
12877
- ...rest,
12878
- children: values?.length > 0 ? values.map(val => jsx(Tag, {
12879
- value: {
12880
- id: val.value,
12881
- label: val.label
12882
- },
12883
- disabled: disabled,
12884
- className: tagStyles.className,
12885
- onDeleteClick: onDeleteClick
12886
- }, val.value)) : jsx("span", {
12887
- "data-disabled": disabled,
12888
- ...placeholderStyles,
12889
- children: placeholder || "Select options"
12890
- })
12891
- });
12410
+ const MultipleSelect = React__default.forwardRef(({ open, onOpenChange, disabled, value, onValueChange, className, children, ...rest }, ref) => {
12411
+ const { setStyleXProps } = usePreferColors();
12412
+ const [isOpen, setIsOpen] = React__default.useState(open || false);
12413
+ const [selectedValues, setSelectedValues] = React__default.useState([]);
12414
+ const wrapperStyles = setStyleXProps(multipleSelectWrapperStyles.base);
12415
+ useEffect(() => {
12416
+ setIsOpen(open || false);
12417
+ }, [open]);
12418
+ const onSelectedValuesChange = (newValues) => {
12419
+ setSelectedValues(newValues);
12420
+ onValueChange?.(newValues.map((value) => ({ value: value.value, label: value.label })));
12421
+ };
12422
+ const onTriggerOpenChange = (value) => {
12423
+ setIsOpen(value);
12424
+ onOpenChange?.(value);
12425
+ };
12426
+ return (jsx(MultipleSelectContext, { value: {
12427
+ isOpen,
12428
+ values: selectedValues,
12429
+ disabled: disabled || false,
12430
+ setSelectedValues: onSelectedValuesChange,
12431
+ setIsOpen: onTriggerOpenChange,
12432
+ }, children: jsx("div", { ref: ref, className: `${wrapperStyles.className} ${className ?? ""}`, ...rest, children: children }) }));
12892
12433
  });
12893
- const MultipleSelectContent = React__default.forwardRef(({
12894
- useSearch,
12895
- options: optionsProps,
12896
- indicator,
12897
- className,
12898
- ...rest
12899
- }, ref) => {
12900
- const {
12901
- isOpen,
12902
- setIsOpen
12903
- } = React__default.useContext(MultipleSelectContext);
12904
- const contentStyles = stylex.props(multipleSelectContentStyles.base);
12905
- const optionsStyles = stylex.props(multipleSelectContentStyles.options);
12906
- const searchStyles = stylex.props(multipleSelectContentStyles.search);
12907
- const [content, setContent] = React__default.useState(null);
12908
- const composedRefs = useComposedRefs(ref, node => setContent(node));
12909
- const [options, setOptions] = useState(optionsProps);
12910
- useEffect(() => {
12911
- if (isOpen) return;
12912
- setOptions(optionsProps);
12913
- }, [isOpen]);
12914
- const handleSearchChange = e => {
12915
- const searchValue = e.target.value.toLowerCase();
12916
- if (!searchValue) {
12917
- setOptions(optionsProps);
12918
- return;
12919
- }
12920
- const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue));
12921
- setOptions(filteredOptions);
12922
- };
12923
- React__default.useEffect(() => {
12924
- const handleMouseUp = event => {
12925
- if (!content?.contains(event.target)) {
12926
- setIsOpen(false);
12927
- }
12434
+ const MultipleSelectTrigger = React__default.forwardRef(({ size = "regular", children, ...rest }, ref) => {
12435
+ const { setStyleXProps } = usePreferColors();
12436
+ const { className, onClick, ...otherProps } = rest;
12437
+ const { disabled, values, isOpen, setIsOpen } = React__default.useContext(MultipleSelectContext);
12438
+ const triggerStyles = setStyleXProps(multipleSelectTriggerStyles.base, multipleSelectTriggerStyles[size]);
12439
+ const arrowStyles = setStyleXProps(multipleSelectTriggerStyles.arrow);
12440
+ const handleTriggerClick = (e) => {
12441
+ e.stopPropagation();
12442
+ if (disabled)
12443
+ return;
12444
+ const value = !isOpen;
12445
+ setIsOpen(value);
12446
+ onClick?.(e);
12928
12447
  };
12929
- document.addEventListener("mouseup", handleMouseUp);
12930
- return () => {
12931
- document.removeEventListener("mouseup", handleMouseUp);
12448
+ return (jsxs("div", { ref: ref, className: `${triggerStyles.className} ${className ?? ""}`, "data-disabled": disabled, "data-selected": values.length > 0, onClick: handleTriggerClick, ...otherProps, children: [children, jsx("span", { ...arrowStyles, children: jsx(ChevronDown, { size: 16 }) })] }));
12449
+ });
12450
+ const MultipleSelectValue = React__default.forwardRef(({ placeholder, className, ...rest }, ref) => {
12451
+ const { setStyleXProps } = usePreferColors();
12452
+ const { values, disabled, setSelectedValues } = React__default.useContext(MultipleSelectContext);
12453
+ const [content, setContent] = React__default.useState(null);
12454
+ const composedRefs = useComposedRefs(ref, (node) => setContent(node));
12455
+ const valueStyles = setStyleXProps(multipleSelectTriggerStyles.value);
12456
+ const tagStyles = setStyleXProps(multipleSelectTriggerStyles.tag);
12457
+ const placeholderStyles = setStyleXProps(multipleSelectTriggerStyles.placeholder);
12458
+ const onDeleteClick = (value, e) => {
12459
+ e.stopPropagation();
12460
+ const newValues = values.filter((v) => v.value !== value.id);
12461
+ setSelectedValues(newValues);
12932
12462
  };
12933
- }, [setIsOpen, content]);
12934
- React__default.useEffect(() => {
12935
- const close = () => setIsOpen(false);
12936
- window.addEventListener("blur", close);
12937
- window.addEventListener("resize", close);
12938
- return () => {
12939
- window.removeEventListener("blur", close);
12940
- window.removeEventListener("resize", close);
12463
+ return (jsx("div", { ref: composedRefs, style: {
12464
+ "--select-content-width": `${content?.offsetWidth}px`,
12465
+ }, className: `${valueStyles.className} ${className ?? ""}`, ...rest, children: values?.length > 0 ? (values.map((val) => (jsx(Tag, { value: { id: val.value, label: val.label }, disabled: disabled, className: tagStyles.className, onDeleteClick: onDeleteClick }, val.value)))) : (jsx("span", { "data-disabled": disabled, ...placeholderStyles, children: placeholder || "Select options" })) }));
12466
+ });
12467
+ const MultipleSelectContent = React__default.forwardRef(({ useSearch, options: optionsProps, indicator, className, ...rest }, ref) => {
12468
+ const { setStyleXProps } = usePreferColors();
12469
+ const { isOpen, setIsOpen } = React__default.useContext(MultipleSelectContext);
12470
+ const contentStyles = setStyleXProps(multipleSelectContentStyles.base);
12471
+ const optionsStyles = setStyleXProps(multipleSelectContentStyles.options);
12472
+ const searchStyles = setStyleXProps(multipleSelectContentStyles.search);
12473
+ const [content, setContent] = React__default.useState(null);
12474
+ const composedRefs = useComposedRefs(ref, (node) => setContent(node));
12475
+ const [options, setOptions] = useState(optionsProps);
12476
+ useEffect(() => {
12477
+ if (isOpen)
12478
+ return;
12479
+ setOptions(optionsProps);
12480
+ }, [isOpen]);
12481
+ const handleSearchChange = (e) => {
12482
+ const searchValue = e.target.value.toLowerCase();
12483
+ if (!searchValue) {
12484
+ setOptions(optionsProps);
12485
+ return;
12486
+ }
12487
+ const filteredOptions = options.filter((option) => option.label.toLowerCase().includes(searchValue));
12488
+ setOptions(filteredOptions);
12941
12489
  };
12942
- }, [setIsOpen]);
12943
- return isOpen && jsxs("div", {
12944
- ref: composedRefs,
12945
- className: `${contentStyles.className} ${className ?? ""}`,
12946
- ...rest,
12947
- children: [useSearch && jsx("div", {
12948
- ...searchStyles,
12949
- children: jsx(Input, {
12950
- onChange: handleSearchChange,
12951
- leftIcon: jsx(MagnifyingGlassIcon, {
12952
- width: 20,
12953
- height: 20
12954
- }),
12955
- placeholder: "Enter any characters..."
12956
- })
12957
- }), jsx("ul", {
12958
- ...optionsStyles,
12959
- children: options.map(option => jsx(MultipleSelectItem, {
12960
- option: option,
12961
- indicator: indicator
12962
- }, option.value))
12963
- })]
12964
- });
12490
+ React__default.useEffect(() => {
12491
+ const handleMouseUp = (event) => {
12492
+ if (!content?.contains(event.target)) {
12493
+ setIsOpen(false);
12494
+ }
12495
+ };
12496
+ document.addEventListener("mouseup", handleMouseUp);
12497
+ return () => {
12498
+ document.removeEventListener("mouseup", handleMouseUp);
12499
+ };
12500
+ }, [setIsOpen, content]);
12501
+ React__default.useEffect(() => {
12502
+ const close = () => setIsOpen(false);
12503
+ window.addEventListener("blur", close);
12504
+ window.addEventListener("resize", close);
12505
+ return () => {
12506
+ window.removeEventListener("blur", close);
12507
+ window.removeEventListener("resize", close);
12508
+ };
12509
+ }, [setIsOpen]);
12510
+ return (isOpen && (jsxs("div", { ref: composedRefs, className: `${contentStyles.className} ${className ?? ""}`, ...rest, children: [useSearch && (jsx("div", { ...searchStyles, children: jsx(Input, { onChange: handleSearchChange, leftIcon: jsx(MagnifyingGlassIcon, { width: 20, height: 20 }), placeholder: "Enter any characters..." }) })), jsx("ul", { ...optionsStyles, children: options.map((option) => (jsx(MultipleSelectItem, { option: option, indicator: indicator }, option.value))) })] })));
12965
12511
  });
12966
- const MultipleSelectItem = React__default.forwardRef(({
12967
- option,
12968
- indicator,
12969
- className,
12970
- ...rest
12971
- }, ref) => {
12972
- const {
12973
- values,
12974
- setSelectedValues
12975
- } = React__default.useContext(MultipleSelectContext);
12976
- const isSelected = values.some(val => val.value === option.value);
12977
- const itemStyles = stylex.props(multipleSelectItemStyles.base);
12978
- const indicatorStyles = stylex.props(multipleSelectItemStyles.indicator);
12979
- const itemLabelStyles = stylex.props(multipleSelectItemStyles.label);
12980
- const handleClick = e => {
12981
- e.stopPropagation();
12982
- if (option.disabled) return;
12983
- const newValues = isSelected ? values.filter(val => val.value !== option.value) : [...values, option];
12984
- setSelectedValues(newValues);
12985
- };
12986
- return jsxs("li", {
12987
- ref: ref,
12988
- "data-selected": isSelected,
12989
- "data-disabled": option.disabled,
12990
- className: `${itemStyles.className} ${className}`,
12991
- onClick: handleClick,
12992
- ...rest,
12993
- children: [jsx("span", {
12994
- className: itemLabelStyles.className,
12995
- children: option.label
12996
- }), indicator && isSelected && jsx("span", {
12997
- ...indicatorStyles,
12998
- children: indicator
12999
- })]
13000
- });
12512
+ const MultipleSelectItem = React__default.forwardRef(({ option, indicator, className, ...rest }, ref) => {
12513
+ const { setStyleXProps } = usePreferColors();
12514
+ const { values, setSelectedValues } = React__default.useContext(MultipleSelectContext);
12515
+ const isSelected = values.some((val) => val.value === option.value);
12516
+ const itemStyles = setStyleXProps(multipleSelectItemStyles.base);
12517
+ const indicatorStyles = setStyleXProps(multipleSelectItemStyles.indicator);
12518
+ const itemLabelStyles = setStyleXProps(multipleSelectItemStyles.label);
12519
+ const handleClick = (e) => {
12520
+ e.stopPropagation();
12521
+ if (option.disabled)
12522
+ return;
12523
+ const newValues = isSelected
12524
+ ? values.filter((val) => val.value !== option.value)
12525
+ : [...values, option];
12526
+ setSelectedValues(newValues);
12527
+ };
12528
+ return (jsxs("li", { ref: ref, "data-selected": isSelected, "data-disabled": option.disabled, className: `${itemStyles.className} ${className}`, onClick: handleClick, ...rest, children: [jsx("span", { className: itemLabelStyles.className, children: option.label }), indicator && isSelected && jsx("span", { ...indicatorStyles, children: indicator })] }));
13001
12529
  });
13002
12530
 
13003
12531
  const tableStyles = {
@@ -13066,99 +12594,35 @@ const tableStyles = {
13066
12594
  }
13067
12595
  };
13068
12596
 
13069
- const Table = React__default.forwardRef(({
13070
- className,
13071
- ...rest
13072
- }, ref) => {
13073
- const tableClasses = stylex.props(tableStyles.table);
13074
- return jsx("table", {
13075
- ref: ref,
13076
- className: `${tableClasses.className} ${className ?? ""}`,
13077
- ...rest
13078
- });
12597
+ const Table = React__default.forwardRef(({ className, ...rest }, ref) => {
12598
+ const { setStyleXProps } = usePreferColors();
12599
+ const tableClasses = setStyleXProps(tableStyles.table);
12600
+ return (jsx("table", { ref: ref, className: `${tableClasses.className} ${className ?? ""}`, ...rest }));
13079
12601
  });
13080
- const TableHeader = React__default.forwardRef(({
13081
- className,
13082
- ...rest
13083
- }, ref) => {
13084
- const headerRowClasses = stylex.props(tableStyles.theadTR);
13085
- return jsx("thead", {
13086
- children: jsx("tr", {
13087
- ref: ref,
13088
- className: `${headerRowClasses.className} ${className ?? ""}`,
13089
- ...rest
13090
- })
13091
- });
12602
+ const TableHeader = React__default.forwardRef(({ className, ...rest }, ref) => {
12603
+ const { setStyleXProps } = usePreferColors();
12604
+ const headerRowClasses = setStyleXProps(tableStyles.theadTR);
12605
+ return (jsx("thead", { children: jsx("tr", { ref: ref, className: `${headerRowClasses.className} ${className ?? ""}`, ...rest }) }));
13092
12606
  });
13093
- const TableBody = React__default.forwardRef(({
13094
- ...rest
13095
- }, ref) => {
13096
- return jsx("tbody", {
13097
- ref: ref,
13098
- ...rest
13099
- });
12607
+ const TableBody = React__default.forwardRef(({ ...rest }, ref) => {
12608
+ return jsx("tbody", { ref: ref, ...rest });
13100
12609
  });
13101
- const TableRow = React__default.forwardRef(({
13102
- isSelected,
13103
- shouldLastBorderRender = true,
13104
- className,
13105
- ...rest
13106
- }, ref) => {
13107
- const rowClasses = stylex.props(tableStyles.tr);
13108
- return jsx("tr", {
13109
- ref: ref,
13110
- "data-selected": isSelected,
13111
- "data-last-border": shouldLastBorderRender,
13112
- className: `${rowClasses.className} ${className ?? ""}`,
13113
- ...rest
13114
- });
12610
+ const TableRow = React__default.forwardRef(({ isSelected, shouldLastBorderRender = true, className, ...rest }, ref) => {
12611
+ const { setStyleXProps } = usePreferColors();
12612
+ const rowClasses = setStyleXProps(tableStyles.tr);
12613
+ return (jsx("tr", { ref: ref, "data-selected": isSelected, "data-last-border": shouldLastBorderRender, className: `${rowClasses.className} ${className ?? ""}`, ...rest }));
13115
12614
  });
13116
- const TableHead = React__default.forwardRef(({
13117
- className,
13118
- children,
13119
- ...rest
13120
- }, ref) => {
13121
- const headClasses = stylex.props(tableStyles.cell, tableStyles.th);
13122
- const contentClasses = stylex.props(tableStyles.content);
13123
- return jsx("th", {
13124
- ref: ref,
13125
- className: `${headClasses.className} ${className ?? ""}`,
13126
- ...rest,
13127
- children: jsx("div", {
13128
- className: contentClasses.className,
13129
- children: children
13130
- })
13131
- });
12615
+ const TableHead = React__default.forwardRef(({ className, children, ...rest }, ref) => {
12616
+ const { setStyleXProps } = usePreferColors();
12617
+ const headClasses = setStyleXProps(tableStyles.cell, tableStyles.th);
12618
+ const contentClasses = setStyleXProps(tableStyles.content);
12619
+ return (jsx("th", { ref: ref, className: `${headClasses.className} ${className ?? ""}`, ...rest, children: jsx("div", { className: contentClasses.className, children: children }) }));
13132
12620
  });
13133
- const TableCell = React__default.forwardRef(({
13134
- className,
13135
- children,
13136
- showTooltip,
13137
- ...rest
13138
- }, ref) => {
13139
- const cellClasses = stylex.props(tableStyles.cell, tableStyles.td);
13140
- const contentClasses = stylex.props(tableStyles.content);
13141
- return jsx("td", {
13142
- ref: ref,
13143
- className: `${cellClasses.className} ${className ?? ""}`,
13144
- ...rest,
13145
- children: showTooltip ? jsxs(Tooltip, {
13146
- children: [jsx(TooltipTrigger, {
13147
- asChild: true,
13148
- children: jsx("span", {
13149
- children: children
13150
- })
13151
- }), jsx(TooltipContent, {
13152
- type: "short",
13153
- side: "bottom",
13154
- sideOffset: 10,
13155
- children: children
13156
- })]
13157
- }) : jsx("div", {
13158
- className: contentClasses.className,
13159
- children: children
13160
- })
13161
- });
12621
+ const TableCell = React__default.forwardRef(({ className, children, showTooltip, ...rest }, ref) => {
12622
+ const { setStyleXProps } = usePreferColors();
12623
+ const cellClasses = setStyleXProps(tableStyles.cell, tableStyles.td);
12624
+ const contentClasses = setStyleXProps(tableStyles.content);
12625
+ return (jsx("td", { ref: ref, className: `${cellClasses.className} ${className ?? ""}`, ...rest, children: showTooltip ? (jsxs(Tooltip, { children: [jsx(TooltipTrigger, { asChild: true, children: jsx("span", { children: children }) }), jsx(TooltipContent, { type: "short", side: "bottom", sideOffset: 10, children: children })] })) : (jsx("div", { className: contentClasses.className, children: children })) }));
13162
12626
  });
13163
12627
 
13164
12628
  const DataTable = ({ config, data, emptyMessage, onRowClick, enableSelection = false, shouldLastBorderRender = true, classNames, refs, }) => {
@@ -13256,97 +12720,39 @@ const paginationStyles = {
13256
12720
  }
13257
12721
  };
13258
12722
 
13259
- const Pagination = ({
13260
- className,
13261
- ...props
13262
- }) => {
13263
- const paginationClasses = stylex.props(paginationStyles.pagination);
13264
- return jsx("nav", {
13265
- role: "navigation",
13266
- "aria-label": "pagination",
13267
- "data-slot": "pagination",
13268
- className: `${paginationClasses.className} ${className ?? ""}`,
13269
- ...props
13270
- });
12723
+ const Pagination = ({ className, ...props }) => {
12724
+ const { setStyleXProps } = usePreferColors();
12725
+ const paginationClasses = setStyleXProps(paginationStyles.pagination);
12726
+ return (jsx("nav", { role: "navigation", "aria-label": "pagination", "data-slot": "pagination", className: `${paginationClasses.className} ${className ?? ""}`, ...props }));
13271
12727
  };
13272
- const PaginationContent = ({
13273
- className,
13274
- ...props
13275
- }) => {
13276
- const contentClasses = stylex.props(paginationStyles.content);
13277
- return jsx("ul", {
13278
- "data-slot": "pagination-content",
13279
- className: `${contentClasses.className} ${className ?? ""}`,
13280
- ...props
13281
- });
12728
+ const PaginationContent = ({ className, ...props }) => {
12729
+ const { setStyleXProps } = usePreferColors();
12730
+ const contentClasses = setStyleXProps(paginationStyles.content);
12731
+ return (jsx("ul", { "data-slot": "pagination-content", className: `${contentClasses.className} ${className ?? ""}`, ...props }));
13282
12732
  };
13283
- const PaginationItem = props => {
13284
- return jsx("li", {
13285
- "data-slot": "pagination-item",
13286
- ...props
13287
- });
12733
+ const PaginationItem = (props) => {
12734
+ return jsx("li", { "data-slot": "pagination-item", ...props });
13288
12735
  };
13289
- const PaginationLink = ({
13290
- className,
13291
- isActive,
13292
- size = "regular",
13293
- variant = "ghost",
13294
- ...props
13295
- }) => {
13296
- const buttonClasses = stylex.props(paginationStyles.button, isActive && paginationStyles.selected);
13297
- return jsx(Button, {
13298
- "aria-current": isActive ? "page" : undefined,
13299
- "data-slot": "pagination-link",
13300
- "data-active": isActive,
13301
- size: size,
13302
- variant: variant,
13303
- className: `${buttonClasses.className} ${className ?? ""}`,
13304
- ...props
13305
- });
12736
+ const PaginationLink = ({ className, isActive, size = "regular", variant = "ghost", ...props }) => {
12737
+ const { setStyleXProps } = usePreferColors();
12738
+ const buttonClasses = setStyleXProps(paginationStyles.button, isActive && paginationStyles.selected);
12739
+ return (jsx(Button, { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, size: size, variant: variant, className: `${buttonClasses.className} ${className ?? ""}`, ...props }));
13306
12740
  };
13307
- const PaginationPrevious = ({
13308
- className,
13309
- ...props
13310
- }) => {
13311
- const previousClasses = stylex.props(paginationStyles.previous);
13312
- return jsx(PaginationLink, {
13313
- "aria-label": "Go to previous page",
13314
- className: `${previousClasses.className} ${className ?? ""}`,
13315
- leftIcon: jsx(ChevronLeft, {
13316
- size: 20
13317
- }),
13318
- ...props
13319
- });
12741
+ const PaginationPrevious = ({ className, ...props }) => {
12742
+ const { setStyleXProps } = usePreferColors();
12743
+ const previousClasses = setStyleXProps(paginationStyles.previous);
12744
+ return (jsx(PaginationLink, { "aria-label": "Go to previous page", className: `${previousClasses.className} ${className ?? ""}`, leftIcon: jsx(ChevronLeft, { size: 20 }), ...props }));
13320
12745
  };
13321
- const PaginationNext = ({
13322
- className,
13323
- ...props
13324
- }) => {
13325
- const nextClasses = stylex.props(paginationStyles.next);
13326
- return jsx(PaginationLink, {
13327
- "aria-label": "Go to next page",
13328
- className: `${nextClasses.className} ${className ?? ""}`,
13329
- leftIcon: jsx(ChevronRight, {
13330
- size: 20
13331
- }),
13332
- ...props
13333
- });
12746
+ const PaginationNext = ({ className, ...props }) => {
12747
+ const { setStyleXProps } = usePreferColors();
12748
+ const nextClasses = setStyleXProps(paginationStyles.next);
12749
+ return (jsx(PaginationLink, { "aria-label": "Go to next page", className: `${nextClasses.className} ${className ?? ""}`, leftIcon: jsx(ChevronRight, { size: 20 }), ...props }));
13334
12750
  };
13335
- const PaginationEllipsis = ({
13336
- className,
13337
- ...props
13338
- }) => {
13339
- const ellipsisClasses = stylex.props(paginationStyles.ellipsis);
13340
- const iconClasses = stylex.props(paginationStyles.ellipsisIcon);
13341
- return jsx("span", {
13342
- "aria-hidden": true,
13343
- "data-slot": "pagination-ellipsis",
13344
- className: `${ellipsisClasses.className} ${className ?? ""}`,
13345
- ...props,
13346
- children: jsx(Ellipsis, {
13347
- className: iconClasses.className
13348
- })
13349
- });
12751
+ const PaginationEllipsis = ({ className, ...props }) => {
12752
+ const { setStyleXProps } = usePreferColors();
12753
+ const ellipsisClasses = setStyleXProps(paginationStyles.ellipsis);
12754
+ const iconClasses = setStyleXProps(paginationStyles.ellipsisIcon);
12755
+ return (jsx("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: `${ellipsisClasses.className} ${className ?? ""}`, ...props, children: jsx(Ellipsis, { className: iconClasses.className }) }));
13350
12756
  };
13351
12757
 
13352
12758
  const interactiveListItemStyles = {
@@ -13478,66 +12884,27 @@ const interactiveListItemStyles = {
13478
12884
  };
13479
12885
 
13480
12886
  const InteractiveListItemContext = React__default.createContext({
13481
- disabled: false
12887
+ disabled: false,
13482
12888
  });
13483
- const InteractiveListItem = React__default.forwardRef(({
13484
- isSelected,
13485
- disabled,
13486
- showHoverActions = true,
13487
- children,
13488
- ...props
13489
- }, ref) => {
13490
- const itemClasses = stylex.props(interactiveListItemStyles.base);
13491
- return jsx(InteractiveListItemContext, {
13492
- value: {
13493
- disabled: !!disabled
13494
- },
13495
- children: jsx("div", {
13496
- ref: ref,
13497
- "data-selected": isSelected,
13498
- "data-disabled": disabled,
13499
- "data-hover-actions": showHoverActions,
13500
- className: `${itemClasses.className} ${props.className ?? ""}`,
13501
- ...props,
13502
- children: children
13503
- })
13504
- });
12889
+ const InteractiveListItem = React__default.forwardRef(({ isSelected, disabled, showHoverActions = true, children, ...props }, ref) => {
12890
+ const { setStyleXProps } = usePreferColors();
12891
+ const itemClasses = setStyleXProps(interactiveListItemStyles.base);
12892
+ return (jsx(InteractiveListItemContext, { value: { disabled: !!disabled }, children: jsx("div", { ref: ref, "data-selected": isSelected, "data-disabled": disabled, "data-hover-actions": showHoverActions, className: `${itemClasses.className} ${props.className ?? ""}`, ...props, children: children }) }));
13505
12893
  });
13506
- const InteractiveListItemIcon = React__default.forwardRef(({
13507
- children,
13508
- ...props
13509
- }, ref) => {
13510
- const iconClasses = stylex.props(interactiveListItemStyles.icon);
13511
- return jsx("span", {
13512
- className: iconClasses.className,
13513
- ...props,
13514
- ref: ref,
13515
- children: children
13516
- });
12894
+ const InteractiveListItemIcon = React__default.forwardRef(({ children, ...props }, ref) => {
12895
+ const { setStyleXProps } = usePreferColors();
12896
+ const iconClasses = setStyleXProps(interactiveListItemStyles.icon);
12897
+ return (jsx("span", { className: iconClasses.className, ...props, ref: ref, children: children }));
13517
12898
  });
13518
- const InteractiveListItemContent = React__default.forwardRef(({
13519
- children,
13520
- ...rest
13521
- }, ref) => {
13522
- const contentClasses = stylex.props(interactiveListItemStyles.content);
13523
- return jsx("div", {
13524
- className: contentClasses.className,
13525
- ...rest,
13526
- ref: ref,
13527
- children: children
13528
- });
12899
+ const InteractiveListItemContent = React__default.forwardRef(({ children, ...rest }, ref) => {
12900
+ const { setStyleXProps } = usePreferColors();
12901
+ const contentClasses = setStyleXProps(interactiveListItemStyles.content);
12902
+ return (jsx("div", { className: contentClasses.className, ...rest, ref: ref, children: children }));
13529
12903
  });
13530
- const InteractiveListItemActions = React__default.forwardRef(({
13531
- children,
13532
- ...props
13533
- }, ref) => {
13534
- const buttonsClasses = stylex.props(interactiveListItemStyles.buttons);
13535
- return jsx("div", {
13536
- className: buttonsClasses.className,
13537
- ...props,
13538
- ref: ref,
13539
- children: children
13540
- });
12904
+ const InteractiveListItemActions = React__default.forwardRef(({ children, ...props }, ref) => {
12905
+ const { setStyleXProps } = usePreferColors();
12906
+ const buttonsClasses = setStyleXProps(interactiveListItemStyles.buttons);
12907
+ return (jsx("div", { className: buttonsClasses.className, ...props, ref: ref, children: children }));
13541
12908
  });
13542
12909
 
13543
12910
  const calendarStyles = {
@@ -13760,50 +13127,33 @@ const calendarStyles = {
13760
13127
  }
13761
13128
  };
13762
13129
 
13763
- const Calendar = ({
13764
- className,
13765
- classNames,
13766
- showOutsideDays = true,
13767
- ...props
13768
- }) => {
13769
- const getDatePickerClassName = key => {
13770
- return stylex.props(calendarStyles[key]).className;
13771
- };
13772
- return jsx(DayPicker, {
13773
- showOutsideDays: showOutsideDays,
13774
- navLayout: "around",
13775
- style: {
13776
- "--rdp-day-width": "32px",
13777
- "--rdp-day-height": "32px",
13778
- "--rdp-day_button-height": "32px",
13779
- "--rdp-day_button-width": "32px"
13780
- },
13781
- className: className,
13782
- classNames: {
13783
- months: getDatePickerClassName("months"),
13784
- month_caption: getDatePickerClassName("monthCaption"),
13785
- caption_label: getDatePickerClassName("captionLabel"),
13786
- month_grid: getDatePickerClassName("monthGrid"),
13787
- weekday: getDatePickerClassName("weekday"),
13788
- day: getDatePickerClassName("day"),
13789
- selected: getDatePickerClassName("selected"),
13790
- today: getDatePickerClassName("day"),
13791
- range_start: `${getDatePickerClassName("rangeStart")} range-start`,
13792
- range_middle: `${getDatePickerClassName("rangeMiddle")} range-middle`,
13793
- range_end: `${getDatePickerClassName("rangeEnd")} range-end`,
13794
- outside: getDatePickerClassName("outside"),
13795
- ...classNames
13796
- },
13797
- components: {
13798
- Chevron: args => jsx(ChevronLeft, {
13799
- size: 16,
13800
- ...args,
13801
- "data-orientation": args.orientation,
13802
- className: getDatePickerClassName("navButton")
13803
- })
13804
- },
13805
- ...props
13806
- });
13130
+ const Calendar = ({ className, classNames, showOutsideDays = true, ...props }) => {
13131
+ const { setStyleXProps } = usePreferColors();
13132
+ const getDatePickerClassName = (key) => {
13133
+ return setStyleXProps(calendarStyles[key]).className;
13134
+ };
13135
+ return (jsx(DayPicker, { showOutsideDays: showOutsideDays, navLayout: "around", style: {
13136
+ "--rdp-day-width": "32px",
13137
+ "--rdp-day-height": "32px",
13138
+ "--rdp-day_button-height": "32px",
13139
+ "--rdp-day_button-width": "32px",
13140
+ }, className: className, classNames: {
13141
+ months: getDatePickerClassName("months"),
13142
+ month_caption: getDatePickerClassName("monthCaption"),
13143
+ caption_label: getDatePickerClassName("captionLabel"),
13144
+ month_grid: getDatePickerClassName("monthGrid"),
13145
+ weekday: getDatePickerClassName("weekday"),
13146
+ day: getDatePickerClassName("day"),
13147
+ selected: getDatePickerClassName("selected"),
13148
+ today: getDatePickerClassName("day"),
13149
+ range_start: `${getDatePickerClassName("rangeStart")} range-start`,
13150
+ range_middle: `${getDatePickerClassName("rangeMiddle")} range-middle`,
13151
+ range_end: `${getDatePickerClassName("rangeEnd")} range-end`,
13152
+ outside: getDatePickerClassName("outside"),
13153
+ ...classNames,
13154
+ }, components: {
13155
+ Chevron: (args) => (jsx(ChevronLeft, { size: 16, ...args, "data-orientation": args.orientation, className: getDatePickerClassName("navButton") })),
13156
+ }, ...props }));
13807
13157
  };
13808
13158
 
13809
13159
  const datePickerStyles = {
@@ -13822,90 +13172,49 @@ var dayjs_min = {exports: {}};
13822
13172
  var dayjs_minExports = dayjs_min.exports;
13823
13173
  var dayjs = /*@__PURE__*/getDefaultExportFromCjs(dayjs_minExports);
13824
13174
 
13825
- const DatePicker = ({
13826
- size = "regular",
13827
- placeholder = "Pick a date",
13828
- format = "YYYY. MM. DD.",
13829
- value,
13830
- mode = "single",
13831
- onChange,
13832
- isInstantClose = false,
13833
- open: openProp,
13834
- onOpenChange: onOpenChangeProp,
13835
- disabled,
13836
- ...rest
13837
- }) => {
13838
- const [inputValue, setInputValue] = React__default.useState(value);
13839
- const [open, setOpen] = React__default.useState(openProp || false);
13840
- const wrapperStyle = stylex.props(datePickerStyles.wrapper);
13841
- const handleSelect = date => {
13842
- if (mode === "single") {
13843
- const value = date;
13844
- onChange?.(value);
13845
- } else if (mode === "multiple") {
13846
- const value = date;
13847
- onChange?.(value);
13848
- } else if (mode === "range") {
13849
- const value = date;
13850
- onChange?.(value);
13851
- }
13852
- setInputValue(date);
13853
- if (isInstantClose && mode === "single") {
13854
- handleOpenChange(false);
13855
- }
13856
- };
13857
- const handleOpenChange = open => {
13858
- setOpen(open);
13859
- onOpenChangeProp?.(open);
13860
- };
13861
- const getDateToFormatString = date => {
13862
- if (date instanceof Date) {
13863
- return dayjs(date).format(format);
13864
- } else if (Array.isArray(date)) {
13865
- return date.map(d => dayjs(d).format(format)).join(", ");
13866
- } else if (date && typeof date === "object" && "from" in date && "to" in date) {
13867
- return `${dayjs(date.from).format(format)} - ${dayjs(date.to).format(format)}`;
13868
- }
13869
- return placeholder ?? "";
13870
- };
13871
- return jsxs(Root2$2, {
13872
- open: open,
13873
- onOpenChange: handleOpenChange,
13874
- children: [jsx(Trigger$2, {
13875
- asChild: true,
13876
- children: jsx(Button, {
13877
- size: size,
13878
- fullWidth: true,
13879
- variant: "outline",
13880
- leftIcon: jsx(Calendar$1, {
13881
- size: 20
13882
- }),
13883
- className: wrapperStyle.className,
13884
- disabled: disabled,
13885
- children: getDateToFormatString(inputValue)
13886
- })
13887
- }), jsx(Content2$2, {
13888
- sideOffset: 10,
13889
- align: "start",
13890
- ...rest,
13891
- children: mode === "single" ? jsx(Calendar, {
13892
- mode: "single",
13893
- ...rest,
13894
- selected: inputValue,
13895
- onSelect: handleSelect
13896
- }) : mode === "multiple" ? jsx(Calendar, {
13897
- mode: "multiple",
13898
- ...rest,
13899
- selected: Array.isArray(inputValue) ? inputValue : [],
13900
- onSelect: handleSelect
13901
- }) : jsx(Calendar, {
13902
- mode: "range",
13903
- ...rest,
13904
- selected: inputValue,
13905
- onSelect: handleSelect
13906
- })
13907
- })]
13908
- });
13175
+ const DatePicker = ({ size = "regular", placeholder = "Pick a date", format = "YYYY. MM. DD.", value, mode = "single", onChange, isInstantClose = false, open: openProp, onOpenChange: onOpenChangeProp, disabled, ...rest }) => {
13176
+ const { setStyleXProps } = usePreferColors();
13177
+ const [inputValue, setInputValue] = React__default.useState(value);
13178
+ const [open, setOpen] = React__default.useState(openProp || false);
13179
+ const wrapperStyle = setStyleXProps(datePickerStyles.wrapper);
13180
+ const handleSelect = (date) => {
13181
+ if (mode === "single") {
13182
+ const value = date;
13183
+ onChange?.(value);
13184
+ }
13185
+ else if (mode === "multiple") {
13186
+ const value = date;
13187
+ onChange?.(value);
13188
+ }
13189
+ else if (mode === "range") {
13190
+ const value = date;
13191
+ onChange?.(value);
13192
+ }
13193
+ setInputValue(date);
13194
+ if (isInstantClose && mode === "single") {
13195
+ handleOpenChange(false);
13196
+ }
13197
+ };
13198
+ const handleOpenChange = (open) => {
13199
+ setOpen(open);
13200
+ onOpenChangeProp?.(open);
13201
+ };
13202
+ const getDateToFormatString = (date) => {
13203
+ if (date instanceof Date) {
13204
+ return dayjs(date).format(format);
13205
+ }
13206
+ else if (Array.isArray(date)) {
13207
+ return date.map((d) => dayjs(d).format(format)).join(", ");
13208
+ }
13209
+ else if (date &&
13210
+ typeof date === "object" &&
13211
+ "from" in date &&
13212
+ "to" in date) {
13213
+ return `${dayjs(date.from).format(format)} - ${dayjs(date.to).format(format)}`;
13214
+ }
13215
+ return placeholder ?? "";
13216
+ };
13217
+ return (jsxs(Root2$2, { open: open, onOpenChange: handleOpenChange, children: [jsx(Trigger$2, { asChild: true, children: jsx(Button, { size: size, fullWidth: true, variant: "outline", leftIcon: jsx(Calendar$1, { size: 20 }), className: wrapperStyle.className, disabled: disabled, children: getDateToFormatString(inputValue) }) }), jsx(Content2$2, { sideOffset: 10, align: "start", ...rest, children: mode === "single" ? (jsx(Calendar, { mode: "single", ...rest, selected: inputValue, onSelect: handleSelect })) : mode === "multiple" ? (jsx(Calendar, { mode: "multiple", ...rest, selected: Array.isArray(inputValue) ? inputValue : [], onSelect: handleSelect })) : (jsx(Calendar, { mode: "range", ...rest, selected: inputValue, onSelect: handleSelect })) })] }));
13909
13218
  };
13910
13219
 
13911
13220
  const contextMenuContentStyles = {
@@ -14104,80 +13413,42 @@ const contextMenuContentStyles = {
14104
13413
 
14105
13414
  const ContextMenu = Root2$3;
14106
13415
  const ContextMenuTrigger = Trigger$3;
14107
- const ContextMenuContent = props => {
14108
- const contentClasses = stylex.props(contextMenuContentStyles.content);
14109
- return jsx(Portal2, {
14110
- children: jsx(Content2$3, {
14111
- ...props,
14112
- className: `${contentClasses.className} ${props.className ?? ""}`,
14113
- children: props.children
14114
- })
14115
- });
13416
+ const ContextMenuContent = (props) => {
13417
+ const { setStyleXProps } = usePreferColors();
13418
+ const contentClasses = setStyleXProps(contextMenuContentStyles.content);
13419
+ return (jsx(Portal2, { children: jsx(Content2$3, { ...props, className: `${contentClasses.className} ${props.className ?? ""}`, children: props.children }) }));
14116
13420
  };
14117
13421
  const ContextMenuArrow = Arrow2$1;
14118
- const ContextMenuLabel = props => {
14119
- return jsx(Label2, {
14120
- ...props,
14121
- children: props.children
14122
- });
14123
- };
14124
- const ContextMenuItem = ({
14125
- leftIcon,
14126
- rightSlot,
14127
- textValue,
14128
- ...rest
14129
- }) => {
14130
- const itemClasses = stylex.props(contextMenuContentStyles.item);
14131
- const leftIconClasses = stylex.props(contextMenuContentStyles.leftIcon);
14132
- const rightSlotClasses = stylex.props(contextMenuContentStyles.rightSlot);
14133
- const itemContentClasses = stylex.props(contextMenuContentStyles.itemContent);
14134
- const itemTextClasses = stylex.props(contextMenuContentStyles.textValue);
14135
- return jsxs(Item2$1, {
14136
- ...rest,
14137
- className: `${itemClasses.className} ${rest.className ?? ""}`,
14138
- children: [jsxs("div", {
14139
- ...itemContentClasses,
14140
- children: [jsx("div", {
14141
- className: leftIconClasses.className,
14142
- children: leftIcon
14143
- }), jsx("span", {
14144
- ...itemTextClasses,
14145
- children: textValue
14146
- })]
14147
- }), rightSlot && jsx("div", {
14148
- ...rightSlotClasses,
14149
- children: rightSlot
14150
- })]
14151
- });
13422
+ const ContextMenuLabel = (props) => {
13423
+ return (jsx(Label2, { ...props, children: props.children }));
13424
+ };
13425
+ const ContextMenuItem = ({ leftIcon, rightSlot, textValue, ...rest }) => {
13426
+ const { setStyleXProps } = usePreferColors();
13427
+ const itemClasses = setStyleXProps(contextMenuContentStyles.item);
13428
+ const leftIconClasses = setStyleXProps(contextMenuContentStyles.leftIcon);
13429
+ const rightSlotClasses = setStyleXProps(contextMenuContentStyles.rightSlot);
13430
+ const itemContentClasses = setStyleXProps(contextMenuContentStyles.itemContent);
13431
+ const itemTextClasses = setStyleXProps(contextMenuContentStyles.textValue);
13432
+ return (jsxs(Item2$1, { ...rest, className: `${itemClasses.className} ${rest.className ?? ""}`, children: [jsxs("div", { ...itemContentClasses, children: [jsx("div", { className: leftIconClasses.className, children: leftIcon }), jsx("span", { ...itemTextClasses, children: textValue })] }), rightSlot && jsx("div", { ...rightSlotClasses, children: rightSlot })] }));
14152
13433
  };
14153
13434
  const ContextMenuGroup = Group2;
14154
13435
  const ContextMenuSub = Sub2;
14155
13436
  const ContextMenuSubTrigger = SubTrigger2;
14156
- const ContextMenuSubContent = props => {
14157
- const contentClasses = stylex.props(contextMenuContentStyles.content);
14158
- return jsx(Portal2, {
14159
- children: jsx(SubContent2, {
14160
- ...props,
14161
- className: `${contentClasses.className} ${props.className ?? ""}`,
14162
- children: props.children
14163
- })
14164
- });
13437
+ const ContextMenuSubContent = (props) => {
13438
+ const { setStyleXProps } = usePreferColors();
13439
+ const contentClasses = setStyleXProps(contextMenuContentStyles.content);
13440
+ return (jsx(Portal2, { children: jsx(SubContent2, { ...props, className: `${contentClasses.className} ${props.className ?? ""}`, children: props.children }) }));
14165
13441
  };
14166
- const ContextMenuSeparator = props => {
14167
- const separatorClasses = stylex.props(contextMenuContentStyles.separator);
14168
- return jsx(Separator2, {
14169
- ...props,
14170
- className: `${separatorClasses.className} ${props.className ?? ""}`
14171
- });
13442
+ const ContextMenuSeparator = (props) => {
13443
+ const { setStyleXProps } = usePreferColors();
13444
+ const separatorClasses = setStyleXProps(contextMenuContentStyles.separator);
13445
+ return (jsx(Separator2, { ...props, className: `${separatorClasses.className} ${props.className ?? ""}` }));
14172
13446
  };
14173
13447
  const ContextMenuCheckboxItem = CheckboxItem2;
14174
13448
  const ContextMenuRadioGroup = RadioGroup2;
14175
13449
  const ContextMenuRadioItem = RadioItem2;
14176
- const ContextMenuItemIndicator = props => {
14177
- return jsx(ItemIndicator2, {
14178
- ...props,
14179
- children: props.children
14180
- });
13450
+ const ContextMenuItemIndicator = (props) => {
13451
+ return (jsx(ItemIndicator2, { ...props, children: props.children }));
14181
13452
  };
14182
13453
 
14183
13454
  const autocompleteStyles = {
@@ -14262,7 +13533,6 @@ const autocompleteStyles = {
14262
13533
  k8WAf4: null,
14263
13534
  kLKAdn: null,
14264
13535
  kGO01o: null,
14265
- kWkggS: "tpst1po33qi",
14266
13536
  kMwMTN: "tpst3jceqh",
14267
13537
  kGuDYH: "tpst1v3388n",
14268
13538
  kLWn49: "tpst1waae9e",
@@ -14312,179 +13582,124 @@ const autocompleteStyles = {
14312
13582
  }
14313
13583
  };
14314
13584
 
14315
- const AutocompleteContentItem = ({
14316
- inputValue,
14317
- item,
14318
- index,
14319
- displayValue,
14320
- highlightedIndex,
14321
- onClick,
14322
- className = ""
14323
- }) => {
14324
- const isHighlighted = index === highlightedIndex;
14325
- const itemClasses = stylex.props(autocompleteStyles.item, isHighlighted && autocompleteStyles.highlight);
14326
- const matchedClasses = stylex.props(autocompleteStyles.matched);
14327
- return jsx("li", {
14328
- id: `suggestion-item-${index}`,
14329
- className: `${itemClasses.className} ${className}`,
14330
- onClick: e => onClick(item, e),
14331
- role: "option",
14332
- "aria-selected": isHighlighted,
14333
- children: displayValue(item).split(new RegExp(`(${inputValue})`, "gi")).map((part, i) => part.toLowerCase() === inputValue.toLowerCase() ? jsx("span", {
14334
- ...matchedClasses,
14335
- children: part
14336
- }, i) : jsx("span", {
14337
- children: part
14338
- }, i))
14339
- });
14340
- };
14341
- const Autocomplete = ({
14342
- placeholder,
14343
- data,
14344
- value,
14345
- displayValue,
14346
- onSelect,
14347
- onChange,
14348
- noResultsMessage = "검색 결과가 없습니다.",
14349
- maxResults = 10,
14350
- debounceTime = 300,
14351
- wrapperClassName,
14352
- contentClassName,
14353
- itemClassName
14354
- }) => {
14355
- const [inputValue, setInputValue] = useState(value ?? "");
14356
- const [filteredResults, setFilteredResults] = useState([]);
14357
- const [showSuggestions, setShowSuggestions] = useState(false);
14358
- const [highlightedIndex, setHighlightedIndex] = useState(-1);
14359
- // useRef를 사용하여 DOM 엘리먼트 참조
14360
- const autocompleteRef = useRef(null);
14361
- const inputRef = useRef(null);
14362
- // 디바운싱을 위한 타이머 참조
14363
- const debounceTimerRef = useRef(null);
14364
- // 외부 클릭 감지 (추천 목록 닫기)
14365
- useEffect(() => {
14366
- const handleClickOutside = event => {
14367
- if (autocompleteRef.current && !autocompleteRef.current.contains(event.target)) {
13585
+ const AutocompleteContentItem = ({ inputValue, item, index, displayValue, highlightedIndex, onClick, className = "", }) => {
13586
+ const { setStyleXProps } = usePreferColors();
13587
+ const isHighlighted = index === highlightedIndex;
13588
+ const itemClasses = setStyleXProps(autocompleteStyles.item, isHighlighted && autocompleteStyles.highlight);
13589
+ const matchedClasses = setStyleXProps(autocompleteStyles.matched);
13590
+ return (jsx("li", { id: `suggestion-item-${index}`, className: `${itemClasses.className} ${className}`, onClick: (e) => onClick(item, e), role: "option", "aria-selected": isHighlighted, children: displayValue(item)
13591
+ .split(new RegExp(`(${inputValue})`, "gi"))
13592
+ .map((part, i) => part.toLowerCase() === inputValue.toLowerCase() ? (jsx("span", { ...matchedClasses, children: part }, i)) : (jsx("span", { children: part }, i))) }));
13593
+ };
13594
+ const Autocomplete = ({ placeholder, data, value, displayValue, onSelect, onChange, noResultsMessage = "검색 결과가 없습니다.", maxResults = 10, debounceTime = 300, wrapperClassName, contentClassName, itemClassName, }) => {
13595
+ const { setStyleXProps } = usePreferColors();
13596
+ const [inputValue, setInputValue] = useState(value ?? "");
13597
+ const [filteredResults, setFilteredResults] = useState([]);
13598
+ const [showSuggestions, setShowSuggestions] = useState(false);
13599
+ const [highlightedIndex, setHighlightedIndex] = useState(-1);
13600
+ // useRef를 사용하여 DOM 엘리먼트 참조
13601
+ const autocompleteRef = useRef(null);
13602
+ const inputRef = useRef(null);
13603
+ // 디바운싱을 위한 타이머 참조
13604
+ const debounceTimerRef = useRef(null);
13605
+ // 외부 클릭 감지 (추천 목록 닫기)
13606
+ useEffect(() => {
13607
+ const handleClickOutside = (event) => {
13608
+ if (autocompleteRef.current &&
13609
+ !autocompleteRef.current.contains(event.target)) {
13610
+ setShowSuggestions(false);
13611
+ }
13612
+ };
13613
+ document.addEventListener("mousedown", handleClickOutside);
13614
+ return () => {
13615
+ document.removeEventListener("mousedown", handleClickOutside);
13616
+ if (debounceTimerRef.current) {
13617
+ clearTimeout(debounceTimerRef.current);
13618
+ }
13619
+ };
13620
+ }, []);
13621
+ useEffect(() => {
13622
+ setInputValue(value ?? "");
13623
+ }, [value]);
13624
+ // 입력 값 변경에 따른 필터링 로직 (디바운싱 적용)
13625
+ useEffect(() => {
13626
+ if (debounceTimerRef.current) {
13627
+ clearTimeout(debounceTimerRef.current);
13628
+ }
13629
+ if (inputValue.length === 0) {
13630
+ setFilteredResults(data);
13631
+ return;
13632
+ }
13633
+ debounceTimerRef.current = setTimeout(() => {
13634
+ const lowercasedInput = inputValue.toLowerCase();
13635
+ const results = data.filter((item) => displayValue(item).toLowerCase().includes(lowercasedInput));
13636
+ setFilteredResults(results.slice(0, maxResults));
13637
+ setHighlightedIndex(-1); // 필터링 시 하이라이트 초기화
13638
+ }, debounceTime);
13639
+ return () => {
13640
+ // 클린업: 컴포넌트 언마운트 또는 useEffect 재실행 시 타이머 정리
13641
+ if (debounceTimerRef.current) {
13642
+ clearTimeout(debounceTimerRef.current);
13643
+ }
13644
+ };
13645
+ }, [inputValue, data, displayValue, maxResults, debounceTime]);
13646
+ // 항목 선택 처리
13647
+ const handleSelectItem = useCallback((item) => {
13648
+ setInputValue(displayValue(item));
13649
+ onSelect?.(item);
14368
13650
  setShowSuggestions(false);
14369
- }
13651
+ setHighlightedIndex(-1);
13652
+ inputRef.current?.focus(); // 선택 후 입력 필드에 포커스 유지
13653
+ }, [displayValue, onSelect]);
13654
+ // 입력 필드 변경 핸들러
13655
+ const handleChange = (e) => {
13656
+ const value = e.target.value;
13657
+ setInputValue(value);
13658
+ onChange?.(value); // 외부 onChange 콜백 호출
14370
13659
  };
14371
- document.addEventListener("mousedown", handleClickOutside);
14372
- return () => {
14373
- document.removeEventListener("mousedown", handleClickOutside);
14374
- if (debounceTimerRef.current) {
14375
- clearTimeout(debounceTimerRef.current);
14376
- }
13660
+ // 키보드 이벤트 핸들러
13661
+ const handleKeyDown = (e) => {
13662
+ if (!showSuggestions || filteredResults.length === 0)
13663
+ return;
13664
+ if (e.key === "ArrowDown") {
13665
+ e.preventDefault(); // 커서 이동 방지
13666
+ setHighlightedIndex((prevIndex) => (prevIndex + 1) % filteredResults.length);
13667
+ }
13668
+ else if (e.key === "ArrowUp") {
13669
+ e.preventDefault(); // 커서 이동 방지
13670
+ setHighlightedIndex((prevIndex) => (prevIndex - 1 + filteredResults.length) % filteredResults.length);
13671
+ }
13672
+ else if (e.key === "Enter") {
13673
+ e.preventDefault();
13674
+ if (highlightedIndex >= 0) {
13675
+ handleSelectItem(filteredResults[highlightedIndex]);
13676
+ }
13677
+ else if (filteredResults.length > 0) ;
13678
+ }
13679
+ else if (e.key === "Escape") {
13680
+ e.preventDefault();
13681
+ setShowSuggestions(false);
13682
+ setHighlightedIndex(-1);
13683
+ }
14377
13684
  };
14378
- }, []);
14379
- useEffect(() => {
14380
- setInputValue(value ?? "");
14381
- }, [value]);
14382
- // 입력 값 변경에 따른 필터링 로직 (디바운싱 적용)
14383
- useEffect(() => {
14384
- if (debounceTimerRef.current) {
14385
- clearTimeout(debounceTimerRef.current);
14386
- }
14387
- if (inputValue.length === 0) {
14388
- setFilteredResults(data);
14389
- return;
14390
- }
14391
- debounceTimerRef.current = setTimeout(() => {
14392
- const lowercasedInput = inputValue.toLowerCase();
14393
- const results = data.filter(item => displayValue(item).toLowerCase().includes(lowercasedInput));
14394
- setFilteredResults(results.slice(0, maxResults));
14395
- setHighlightedIndex(-1); // 필터링 시 하이라이트 초기화
14396
- }, debounceTime);
14397
- return () => {
14398
- // 클린업: 컴포넌트 언마운트 또는 useEffect 재실행 시 타이머 정리
14399
- if (debounceTimerRef.current) {
14400
- clearTimeout(debounceTimerRef.current);
14401
- }
13685
+ // 마우스 클릭 시 항목 선택
13686
+ const handleItemClick = (item, e) => {
13687
+ e.stopPropagation(); // 외부 클릭 감지 이벤트 버블링 방지
13688
+ handleSelectItem(item);
14402
13689
  };
14403
- }, [inputValue, data, displayValue, maxResults, debounceTime]);
14404
- // 항목 선택 처리
14405
- const handleSelectItem = useCallback(item => {
14406
- setInputValue(displayValue(item));
14407
- onSelect?.(item);
14408
- setShowSuggestions(false);
14409
- setHighlightedIndex(-1);
14410
- inputRef.current?.focus(); // 선택 후 입력 필드에 포커스 유지
14411
- }, [displayValue, onSelect]);
14412
- // 입력 필드 변경 핸들러
14413
- const handleChange = e => {
14414
- const value = e.target.value;
14415
- setInputValue(value);
14416
- onChange?.(value); // 외부 onChange 콜백 호출
14417
- };
14418
- // 키보드 이벤트 핸들러
14419
- const handleKeyDown = e => {
14420
- if (!showSuggestions || filteredResults.length === 0) return;
14421
- if (e.key === "ArrowDown") {
14422
- e.preventDefault(); // 커서 이동 방지
14423
- setHighlightedIndex(prevIndex => (prevIndex + 1) % filteredResults.length);
14424
- } else if (e.key === "ArrowUp") {
14425
- e.preventDefault(); // 커서 이동 방지
14426
- setHighlightedIndex(prevIndex => (prevIndex - 1 + filteredResults.length) % filteredResults.length);
14427
- } else if (e.key === "Enter") {
14428
- e.preventDefault();
14429
- if (highlightedIndex >= 0) {
14430
- handleSelectItem(filteredResults[highlightedIndex]);
14431
- } else if (filteredResults.length > 0) ;
14432
- } else if (e.key === "Escape") {
14433
- e.preventDefault();
14434
- setShowSuggestions(false);
14435
- setHighlightedIndex(-1);
14436
- }
14437
- };
14438
- // 마우스 클릭 시 항목 선택
14439
- const handleItemClick = (item, e) => {
14440
- e.stopPropagation(); // 외부 클릭 감지 이벤트 버블링 방지
14441
- handleSelectItem(item);
14442
- };
14443
- const wrapperClasses = stylex.props(autocompleteStyles.wrapper);
14444
- const contentClasses = stylex.props(autocompleteStyles.content);
14445
- const noResultClasses = stylex.props(autocompleteStyles.noResults);
14446
- return jsxs("div", {
14447
- ref: autocompleteRef,
14448
- className: `${wrapperClasses.className} ${wrapperClassName ?? ""}`,
14449
- children: [jsx(Input, {
14450
- type: "text",
14451
- placeholder: placeholder,
14452
- value: inputValue,
14453
- onChange: handleChange,
14454
- onFocus: () => setShowSuggestions(true),
14455
- onKeyDown: handleKeyDown,
14456
- ref: inputRef,
14457
- // ARIA 속성 (접근성)
14458
- role: "combobox",
14459
- "aria-autocomplete": "list",
14460
- "aria-haspopup": "listbox",
14461
- "aria-expanded": showSuggestions,
14462
- "aria-controls": "autocomplete-suggestions",
14463
- "aria-activedescendant": highlightedIndex >= 0 ? `suggestion-item-${highlightedIndex}` : undefined
14464
- }), showSuggestions && jsx("ul", {
14465
- id: "autocomplete-suggestions",
14466
- role: "listbox",
14467
- className: `${contentClasses.className} ${contentClassName ?? ""}`,
14468
- children: filteredResults.length > 0 ? filteredResults.map((item, index) => jsx(AutocompleteContentItem, {
14469
- item: item,
14470
- index: index,
14471
- highlightedIndex: highlightedIndex,
14472
- onClick: handleItemClick,
14473
- displayValue: displayValue,
14474
- inputValue: inputValue,
14475
- className: itemClassName
14476
- }, displayValue(item) + index)) : jsx("li", {
14477
- "data-no-results": true,
14478
- ...noResultClasses,
14479
- children: noResultsMessage
14480
- })
14481
- })]
14482
- });
13690
+ const wrapperClasses = setStyleXProps(autocompleteStyles.wrapper);
13691
+ const contentClasses = setStyleXProps(autocompleteStyles.content);
13692
+ const noResultClasses = setStyleXProps(autocompleteStyles.noResults);
13693
+ return (jsxs("div", { ref: autocompleteRef, className: `${wrapperClasses.className} ${wrapperClassName ?? ""}`, children: [jsx(Input, { type: "text", placeholder: placeholder, value: inputValue, onChange: handleChange, onFocus: () => setShowSuggestions(true), onKeyDown: handleKeyDown, ref: inputRef,
13694
+ // ARIA 속성 (접근성)
13695
+ role: "combobox", "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": showSuggestions, "aria-controls": "autocomplete-suggestions", "aria-activedescendant": highlightedIndex >= 0
13696
+ ? `suggestion-item-${highlightedIndex}`
13697
+ : undefined }), showSuggestions && (jsx("ul", { id: "autocomplete-suggestions", role: "listbox", className: `${contentClasses.className} ${contentClassName ?? ""}`, children: filteredResults.length > 0 ? (filteredResults.map((item, index) => (jsx(AutocompleteContentItem, { item: item, index: index, highlightedIndex: highlightedIndex, onClick: handleItemClick, displayValue: displayValue, inputValue: inputValue, className: itemClassName }, displayValue(item) + index)))) : (jsx("li", { "data-no-results": true, ...noResultClasses, children: noResultsMessage })) }))] }));
14483
13698
  };
14484
13699
 
14485
13700
  // 컴포넌트 내보내기
14486
13701
  // 버전 정보
14487
13702
  const version = "0.0.1";
14488
13703
 
14489
- export { Autocomplete, Button, Calendar, Card, CardBody, CardContent, CardFooter, CardHeader, Checkbox, ContextMenu, ContextMenuArrow, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTrigger, HorizontalTab, HorizontalTabs, Input, InteractiveListItem, InteractiveListItemActions, InteractiveListItemContent, InteractiveListItemIcon, ModeTab, ModeTabs, MultipleSelect, MultipleSelectContent, MultipleSelectTrigger, MultipleSelectValue, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, RadioGroup, RadioItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tag, Text, TextArea, Tooltip, TooltipArrow, TooltipContent, TooltipDescription, TooltipFooter, TooltipHeader, TooltipTrigger, VerticalMenu, VerticalMenus, autocompleteStyles, borderRadius, buttonSizeStyles, buttonStyles, buttonVariantStyles, calendarStyles, cardBodyStyles, cardFooterStyles, cardHeaderStyles, cardStyles, checkboxStyles, checkboxWrapperStyles, commonStyles, contextMenuContentStyles, datePickerStyles, dialogContentStyles, dialogOverlayStyles, fontFamily, fontSize, fontWeight, fontWeightStyles, horizontalTabStyles, horizontalTabWrapperStyles, inputStyles, inputWrapperSizeStyles, inputWrapperStyles, interactiveListItemStyles, labelStyles, lineHeight, modeTabStyles, modeTabWrapperStyles, multipleSelectContentStyles, multipleSelectItemStyles, multipleSelectTriggerStyles, multipleSelectWrapperStyles, paginationStyles, primitiveColors, radioGroupStyles, radioItemLabelStyles, radioItemStyles, radioItemWrapperStyles, selectContentStyles, selectGroupLabelStyles, selectIconWrapperStyles, selectItemStyles, selectSeparatorStyles, selectTriggerStyles, semanticColors, spacing, tableStyles, tagStyles, textAlignStyles, textAreaStyles, textAreaWrapperStyles, textSizeStyles, textStyles, textVariantStyles, tooltipDescriptionStyles, tooltipShortStyles, version, verticalMenuIconStyles, verticalMenuStyles, verticalMenusWrapperStyles };
13704
+ export { Autocomplete, Button, Calendar, Card, CardBody, CardContent, CardFooter, CardHeader, Checkbox, ContextMenu, ContextMenuArrow, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuItemIndicator, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogPortal, DialogTrigger, HorizontalTab, HorizontalTabs, Input, InteractiveListItem, InteractiveListItemActions, InteractiveListItemContent, InteractiveListItemIcon, ModeTab, ModeTabs, MultipleSelect, MultipleSelectContent, MultipleSelectTrigger, MultipleSelectValue, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, RadioGroup, RadioItem, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Tag, Text, TextArea, Tooltip, TooltipArrow, TooltipContent, TooltipDescription, TooltipFooter, TooltipHeader, TooltipTrigger, VerticalMenu, VerticalMenus, autocompleteStyles, borderRadius, buttonSizeStyles, buttonStyles, buttonVariantStyles, calendarStyles, cardBodyStyles, cardFooterStyles, cardHeaderStyles, cardStyles, checkboxStyles, checkboxWrapperStyles, commonStyles, contextMenuContentStyles, darkMode, datePickerStyles, dialogContentStyles, dialogOverlayStyles, fontFamily, fontSize, fontWeight, fontWeightStyles, horizontalTabStyles, horizontalTabWrapperStyles, inputStyles, inputWrapperSizeStyles, inputWrapperStyles, interactiveListItemStyles, labelStyles, lightMode, lineHeight, modeTabStyles, modeTabWrapperStyles, multipleSelectContentStyles, multipleSelectItemStyles, multipleSelectTriggerStyles, multipleSelectWrapperStyles, paginationStyles, primitiveColors, radioGroupStyles, radioItemLabelStyles, radioItemStyles, radioItemWrapperStyles, selectContentStyles, selectGroupLabelStyles, selectIconWrapperStyles, selectItemStyles, selectSeparatorStyles, selectTriggerStyles, semanticColors, spacing, tableStyles, tagStyles, textAlignStyles, textAreaStyles, textAreaWrapperStyles, textSizeStyles, textStyles, textVariantStyles, tooltipDescriptionStyles, tooltipShortStyles, version, verticalMenuIconStyles, verticalMenuStyles, verticalMenusWrapperStyles };
14490
13705
  //# sourceMappingURL=index.js.map