@kimdw-rtk/ui 0.0.18 → 0.0.21

package/dist/components/Range/Range.css.d.ts

@@ -1,2 +1,49 @@
-import '@vanilla-extract/recipes';
-export { b as bar, f as fill, r as range, t as thumb } from '../../Range.css-DcxHoAAm.js';
+export declare const range: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: {
+        red: string;
+        orange: string;
+        amber: string;
+        yellow: string;
+        lime: string;
+        green: string;
+        emerald: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        blue: string;
+        indigo: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+        slate: string;
+        gray: string;
+        zinc: string;
+        neutral: string;
+        stone: string;
+        primary: string;
+        secondary: string;
+        muted: string;
+        accent: string;
+        card: string;
+        danger: string;
+        warning: string;
+        success: string;
+    };
+    size: {
+        sm: {
+            fontSize: "0.75em";
+        };
+        md: {
+            fontSize: "1em";
+        };
+        lg: {
+            fontSize: "1.25em";
+        };
+    };
+}>;
+export declare const thumb: string;
+export declare const fill: string;
+export declare const bar: string;
+//# sourceMappingURL=Range.css.d.ts.map

package/dist/components/Range/Range.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Range.css.d.ts","sourceRoot":"","sources":["../../../src/components/Range/Range.css.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BhB,CAAC;AAEH,eAAO,MAAM,KAAK,QA2ChB,CAAC;AAEH,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,GAAG,QAWd,CAAC"}

package/dist/components/Range/Range.css.js

@@ -0,0 +1,96 @@
+import { createVar } from '../../node_modules/.pnpm/@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+import { recipeWithLayer, styleWithLayer } from '../../utils/styleUtils.css.js';
+import { SCALE_COLOR } from '../../tokens/scale/color.js';
+import { semanticColor } from '../../tokens/semantic/color.js';
+import { theme } from '../../themes/theme.css.js';
+
+const backgroundVar = createVar();
+const semanticColors = semanticColor.reduce((prev, color) => ({
+    ...prev,
+    [color]: styleWithLayer({
+        vars: {
+            [backgroundVar]: theme.color[color],
+        },
+    }),
+}), {});
+const scaleColors = SCALE_COLOR.reduce((prev, value) => ({
+    ...prev,
+    [value]: styleWithLayer({
+        vars: {
+            [backgroundVar]: theme.color[value][100],
+        },
+    }),
+}), {});
+const range = recipeWithLayer({
+    base: {
+        position: 'relative',
+        width: '100%',
+        height: '2em',
+        userSelect: 'none',
+    },
+    variants: {
+        color: {
+            ...semanticColors,
+            ...scaleColors,
+        },
+        size: {
+            sm: {
+                fontSize: '0.75em',
+            },
+            md: {
+                fontSize: '1em',
+            },
+            lg: {
+                fontSize: '1.25em',
+            },
+        },
+    },
+});
+const thumb = styleWithLayer({
+    display: 'inline-block',
+    position: 'absolute',
+    top: '50%',
+    width: '1.25em',
+    height: '1.25em',
+    borderRadius: '50%',
+    boxShadow: `0 0 0.375em 0.125em rgba(${backgroundVar}, 0.33)`,
+    backgroundColor: `rgb(${backgroundVar})`,
+    transform: 'translate(-50%, -50%)',
+    cursor: 'pointer',
+    '::before': {
+        position: 'absolute',
+        inset: '-0.75em',
+        content: '',
+    },
+    '::after': {
+        position: 'absolute',
+        inset: '0',
+        borderRadius: '50%',
+        boxShadow: `0 0 0.5em 0.125em rgba(${backgroundVar}, 0.5)`,
+        opacity: '0',
+        transition: 'opacity 0.2s ease',
+        content: '',
+    },
+    selectors: {
+        '&:hover::after': {
+            opacity: '1',
+        },
+    },
+});
+const fill = styleWithLayer({
+    position: 'absolute',
+    top: '0',
+    height: '100%',
+    backgroundColor: `rgb(${backgroundVar})`,
+});
+const bar = styleWithLayer({
+    position: 'absolute',
+    top: '50%',
+    width: '100%',
+    height: '0.5em',
+    borderRadius: theme.borderRadius,
+    backgroundColor: `rgb(${theme.color.muted})`,
+    transform: 'translateY(-50%)',
+});
+
+export { bar, fill, range, thumb };

package/dist/components/Range/Range.d.ts

@@ -1,18 +1,12 @@
-import * as react from 'react';
-import { UIComponent } from '../../types/ui.types.js';
-import { r as range } from '../../Range.css-DcxHoAAm.js';
-export { R as rangeCss } from '../../Range.css-DcxHoAAm.js';
-import '@vanilla-extract/css';
-import '@vanilla-extract/recipes';
-import '../../styles/sprinkles.css.js';
-
-interface RangeProps extends Omit<UIComponent<'div', typeof range>, 'children' | 'onChange'> {
+import type { UIComponent } from '@/types';
+import * as s from './Range.css';
+interface RangeProps extends Omit<UIComponent<'div', typeof s.range>, 'children' | 'onChange'> {
     min: number;
     max: number;
     defaultMinValue: number;
     defaultMaxValue: number;
     onChange: (min: number, max: number) => void;
 }
-declare const Range: react.ForwardRefExoticComponent<Omit<RangeProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-
-export { Range };
+export declare const Range: import("react").ForwardRefExoticComponent<Omit<RangeProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { s as rangeCss };
+//# sourceMappingURL=Range.d.ts.map

package/dist/components/Range/Range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Range.d.ts","sourceRoot":"","sources":["../../../src/components/Range/Range.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG3C,OAAO,KAAK,CAAC,MAAM,aAAa,CAAC;AAEjC,UAAU,UACR,SAAQ,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACzE,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9C;AAED,eAAO,MAAM,KAAK,oHAiEjB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,QAAQ,EAAE,CAAC"}

package/dist/components/Range/Range.js

@@ -0,0 +1,40 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef, useRef, useEffect } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { usePointerSlider } from '../../hooks/usePointerSlider/index.js';
+import { bar, fill, thumb, range } from './Range.css.js';
+import * as Range_css from './Range.css.js';
+export { Range_css as rangeCss };
+import { sx } from '../../styles/sx.js';
+
+const Range = forwardRef(({ min, max, defaultMinValue, defaultMaxValue, onChange, className, color = 'primary', size = 'md', sx: propSx, ...props }, ref) => {
+    const barRef = useRef(null);
+    const leftThumbRef = useRef(null);
+    const rightThumbRef = useRef(null);
+    const leftValue = usePointerSlider(leftThumbRef, {
+        min,
+        max,
+        defaultValue: defaultMinValue,
+    }), rightValue = usePointerSlider(rightThumbRef, {
+        min,
+        max,
+        defaultValue: defaultMaxValue,
+    });
+    const initRef = useRef(false);
+    const minValue = Math.min(leftValue, rightValue), maxValue = Math.max(leftValue, rightValue);
+    useEffect(() => {
+        if (!initRef.current) {
+            initRef.current = true;
+            return;
+        }
+        onChange(minValue, maxValue);
+        // eslint-disable-next-line
+    }, [minValue, maxValue]);
+    return (jsxRuntimeExports.jsxs("div", { ref: ref, className: clsx(range({ color, size }), className, sx(propSx)), ...props, children: [jsxRuntimeExports.jsx("div", { className: bar, children: jsxRuntimeExports.jsx("div", { ref: barRef, className: fill, style: {
+                        left: `${((minValue - min) / (max - min)) * 100}%`,
+                        right: `${(1 - (maxValue - min) / (max - min)) * 100}%`,
+                    } }) }), jsxRuntimeExports.jsx("span", { ref: leftThumbRef, className: thumb }), jsxRuntimeExports.jsx("span", { ref: rightThumbRef, className: thumb })] }));
+});
+Range.displayName = 'Range';
+
+export { Range };

package/dist/components/Range/Range.spec.d.ts

@@ -1,2 +1,2 @@
-
-export {  }
+export {};
+//# sourceMappingURL=Range.spec.d.ts.map

package/dist/components/Range/Range.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Range.spec.d.ts","sourceRoot":"","sources":["../../../src/components/Range/Range.spec.tsx"],"names":[],"mappings":""}

package/dist/components/Range/index.d.ts

@@ -1,7 +1,2 @@
-export { Range } from './Range.js';
-export { R as rangeCss } from '../../Range.css-DcxHoAAm.js';
-import 'react';
-import '../../types/ui.types.js';
-import '@vanilla-extract/css';
-import '@vanilla-extract/recipes';
-import '../../styles/sprinkles.css.js';
+export * from './Range';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Range/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Range/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC"}

package/dist/components/ScrollArea/ScrollArea.css.d.ts

@@ -1 +1,6 @@
-export { b as maskBoth, m as maskLeft, a as maskRight, s as scrollArea, w as wrapper } from '../../ScrollArea.css-CNx8Yliu.js';
+export declare const scrollArea: string;
+export declare const maskLeft: string;
+export declare const maskRight: string;
+export declare const maskBoth: string;
+export declare const wrapper: string;
+//# sourceMappingURL=ScrollArea.css.d.ts.map

package/dist/components/ScrollArea/ScrollArea.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.css.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,UAAU,QAOrB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAKnB,CAAC;AAEH,eAAO,MAAM,SAAS,QAKpB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAMnB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC"}

package/dist/components/ScrollArea/ScrollArea.css.js

@@ -0,0 +1,35 @@
+import { style } from '../../node_modules/.pnpm/@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0/node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+
+const MASK_SIZE = '3rem';
+const scrollArea = styleWithLayer({
+    width: '100%',
+    overflowX: 'scroll',
+    '::-webkit-scrollbar': {
+        display: 'none',
+    },
+});
+const maskLeft = style({
+    maskImage: `linear-gradient(to left,
+  black 0%,
+  black calc(100% - ${MASK_SIZE}),
+  transparent 100%)`,
+});
+const maskRight = style({
+    maskImage: `linear-gradient(to right,
+  black 0%,
+  black calc(100% - ${MASK_SIZE}),
+  transparent 100%)`,
+});
+const maskBoth = style({
+    maskImage: `linear-gradient(to right,
+  transparent 0%,
+  black ${MASK_SIZE},
+  black calc(100% - ${MASK_SIZE}),
+  transparent 100%)`,
+});
+const wrapper = style({
+    width: 'max-content',
+});
+
+export { maskBoth, maskLeft, maskRight, scrollArea, wrapper };

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -1,11 +1,6 @@
-import * as react from 'react';
-import { UIComponent } from '../../types/ui.types.js';
-export { S as scrollAreaCss } from '../../ScrollArea.css-CNx8Yliu.js';
-import '@vanilla-extract/css';
-import '@vanilla-extract/recipes';
-import '../../styles/sprinkles.css.js';
-
+import type { UIComponent } from '@/types';
+import * as s from './ScrollArea.css';
 type ScrollAreaProps = UIComponent<'div'>;
-declare const ScrollArea: react.ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-
-export { ScrollArea };
+export declare const ScrollArea: import("react").ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { s as scrollAreaCss };
+//# sourceMappingURL=ScrollArea.d.ts.map

package/dist/components/ScrollArea/ScrollArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,kBAAkB,CAAC;AAEtC,KAAK,eAAe,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAE1C,eAAO,MAAM,UAAU,yHAiDtB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,aAAa,EAAE,CAAC"}

package/dist/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,37 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef, useRef, useState, useEffect } from 'react';
+import { useCombinedRefs } from '@kimdw-rtk/utils';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { useMouseScroll } from '../../hooks/useMouseScroll/index.js';
+import { wrapper, scrollArea, maskBoth, maskLeft, maskRight } from './ScrollArea.css.js';
+import * as ScrollArea_css from './ScrollArea.css.js';
+export { ScrollArea_css as scrollAreaCss };
+import { sx } from '../../styles/sx.js';
+
+const ScrollArea = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    const scrollAreaRef = useRef(null);
+    const targetRef = useCombinedRefs(ref, scrollAreaRef);
+    const [hasLeftSpace, setHasLeftSpace] = useState(false);
+    const [hasRightSpace, setHasRightSpace] = useState(true);
+    useMouseScroll(scrollAreaRef);
+    useEffect(() => {
+        const element = scrollAreaRef.current;
+        if (element === null) {
+            return;
+        }
+        const handleScroll = () => {
+            setHasLeftSpace(element.scrollLeft !== 0);
+            setHasRightSpace(Math.round(element.scrollLeft + element.clientWidth) <
+                element.scrollWidth);
+        };
+        handleScroll();
+        element.addEventListener('scroll', handleScroll);
+        return () => {
+            element.removeEventListener('scroll', handleScroll);
+        };
+    }, []);
+    return (jsxRuntimeExports.jsx("div", { ref: targetRef, className: clsx(scrollArea, className, sx(propSx), hasLeftSpace && hasRightSpace && maskBoth, hasLeftSpace && maskLeft, hasRightSpace && maskRight), ...props, children: jsxRuntimeExports.jsx("div", { className: wrapper, children: children }) }));
+});
+ScrollArea.displayName = 'ScrollArea';
+
+export { ScrollArea };

package/dist/components/ScrollArea/ScrollArea.spec.d.ts

@@ -1,2 +1,2 @@
-
-export {  }
+export {};
+//# sourceMappingURL=ScrollArea.spec.d.ts.map

package/dist/components/ScrollArea/ScrollArea.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.spec.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.spec.tsx"],"names":[],"mappings":""}

package/dist/components/ScrollArea/index.d.ts

@@ -1,7 +1,2 @@
-export { ScrollArea } from './ScrollArea.js';
-export { S as scrollAreaCss } from '../../ScrollArea.css-CNx8Yliu.js';
-import 'react';
-import '../../types/ui.types.js';
-import '@vanilla-extract/css';
-import '@vanilla-extract/recipes';
-import '../../styles/sprinkles.css.js';
+export * from './ScrollArea';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ScrollArea/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/Select/Select.css.d.ts

@@ -1,2 +1,14 @@
-import '@vanilla-extract/recipes';
-export { s as select } from '../../Select.css-BlJORB-N.js';
+export declare const select: import("@vanilla-extract/recipes").RuntimeFn<{
+    size: {
+        sm: {
+            fontSize: "0.875em";
+        };
+        md: {
+            fontSize: "1em";
+        };
+        lg: {
+            fontSize: "1.125em";
+        };
+    };
+}>;
+//# sourceMappingURL=Select.css.d.ts.map

package/dist/components/Select/Select.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.css.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,MAAM;;;;;;;;;;;;EAkBjB,CAAC"}

package/dist/components/Select/Select.css.js

@@ -0,0 +1,23 @@
+import { recipeWithLayer } from '../../utils/styleUtils.css.js';
+import { typography } from '../../tokens/semantic/typography.js';
+
+const select = recipeWithLayer({
+    base: {
+        position: 'relative',
+    },
+    variants: {
+        size: {
+            sm: {
+                fontSize: typography.size.sm,
+            },
+            md: {
+                fontSize: typography.size.md,
+            },
+            lg: {
+                fontSize: typography.size.lg,
+            },
+        },
+    },
+});
+
+export { select };

package/dist/components/Select/Select.d.ts

@@ -1,16 +1,8 @@
-import * as react from 'react';
-import { RefObject, CSSProperties, ComponentProps } from 'react';
-import { UIComponent } from '../../types/ui.types.js';
-import { s as select } from '../../Select.css-BlJORB-N.js';
-export { S as selectCss } from '../../Select.css-BlJORB-N.js';
-import SelectTrigger from './SelectTrigger.js';
-import '@vanilla-extract/css';
-import '@vanilla-extract/recipes';
-import '../../styles/sprinkles.css.js';
-import 'react/jsx-runtime';
-import './SelectTrigger.css.js';
-
-interface SelectProps extends Omit<UIComponent<'div', typeof select>, 'ref' | 'onChange'> {
+import { type ComponentProps, type CSSProperties, type RefObject } from 'react';
+import type { UIComponent } from '@/types';
+import * as s from './Select.css';
+import SelectTrigger from './SelectTrigger';
+interface SelectProps extends Omit<UIComponent<'div', typeof s.select>, 'ref' | 'onChange'> {
     ref?: RefObject<{
         value?: string;
     } | null>;
@@ -20,6 +12,6 @@ interface SelectProps extends Omit<UIComponent<'div', typeof select>, 'ref' | 'o
     variant?: ComponentProps<typeof SelectTrigger>['variant'];
     onChange?: (value: string | undefined) => void;
 }
-declare const Select: react.ForwardRefExoticComponent<Omit<SelectProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
-
-export { Select };
+export declare const Select: import("react").ForwardRefExoticComponent<Omit<SelectProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { s as selectCss };
+//# sourceMappingURL=Select.d.ts.map

package/dist/components/Select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAMf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAGlC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAE5C,UAAU,WACR,SAAQ,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,MAAM,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC;IACrE,GAAG,CAAC,EAAE,SAAS,CAAC;QAAE,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,CAAC;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,SAAS,CAAC,CAAC;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;CAChD;AAED,eAAO,MAAM,MAAM,qHA0ElB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,SAAS,EAAE,CAAC"}

package/dist/components/Select/Select.js

@@ -0,0 +1,49 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef, useRef, useReducer, useEffect } from 'react';
+import { useCombinedRefs } from '@kimdw-rtk/utils';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { select } from './Select.css.js';
+import * as Select_css from './Select.css.js';
+export { Select_css as selectCss };
+import { selectReducer, SelectContext } from './SelectContext.js';
+import SelectOptionList from './SelectOptionList.js';
+import SelectTrigger from './SelectTrigger.js';
+import { sx } from '../../styles/sx.js';
+
+const Select = forwardRef(({ children, className, style, name, defaultValue, width = '100%', size = 'md', sx: propSx, variant = 'outlined', onChange, ...props }, ref) => {
+    const containerRef = useRef(null);
+    const targetRef = useCombinedRefs(ref, containerRef);
+    const [state, dispatch] = useReducer(selectReducer, {
+        isActive: false,
+        containerRef,
+        defaultValue,
+        items: new Map(),
+    });
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) {
+            return;
+        }
+        const handleOutsideClick = (e) => {
+            if (container.contains(e.target) || !state.isActive) {
+                return;
+            }
+            dispatch({ type: 'TOGGLE' });
+        };
+        window.addEventListener('mousedown', handleOutsideClick);
+        return () => {
+            window.removeEventListener('mousedown', handleOutsideClick);
+        };
+    }, [state.isActive, dispatch]);
+    useEffect(() => {
+        if (!onChange || !state.items.size) {
+            return;
+        }
+        onChange(state.selected);
+        //eslint-disable-next-line
+    }, [state.selected]);
+    return (jsxRuntimeExports.jsx(SelectContext.Provider, { value: { state, dispatch }, children: jsxRuntimeExports.jsxs("div", { ref: targetRef, style: { ...style, width }, className: clsx(select({ size }), className, sx(propSx)), ...props, children: [jsxRuntimeExports.jsx(SelectTrigger, { variant: variant, children: state.selected !== null && state.items.get(state.selected || '') }), jsxRuntimeExports.jsx(SelectOptionList, { children: children }), jsxRuntimeExports.jsx("input", { type: "hidden", name: name, value: state.selected || '' })] }) }));
+});
+Select.displayName = 'Select';
+
+export { Select };

package/dist/components/Select/Select.spec.d.ts

@@ -1,2 +1,2 @@
-
-export {  }
+export {};
+//# sourceMappingURL=Select.spec.d.ts.map

package/dist/components/Select/Select.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.spec.d.ts","sourceRoot":"","sources":["../../../src/components/Select/Select.spec.tsx"],"names":[],"mappings":""}

package/dist/components/Select/SelectContext.d.ts

@@ -1,6 +1,4 @@
-import * as react from 'react';
-import { ReactNode, Dispatch } from 'react';
-
+import { type Dispatch, type ReactNode } from 'react';
 type SelectState = {
     isActive: boolean;
     selected?: string;
@@ -27,10 +25,10 @@ type SelectAction = {
 } | {
     type: 'TOGGLE';
 };
-declare const SelectContext: react.Context<{
+export declare const SelectContext: import("react").Context<{
     state: SelectState;
     dispatch: Dispatch<SelectAction>;
 } | undefined>;
-declare const selectReducer: (state: SelectState, action: SelectAction) => SelectState;
-
-export { SelectContext, selectReducer };
+export declare const selectReducer: (state: SelectState, action: SelectAction) => SelectState;
+export {};
+//# sourceMappingURL=SelectContext.d.ts.map

package/dist/components/Select/SelectContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectContext.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAErE,KAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAC9B,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CACtD,CAAC;AAEF,KAAK,YAAY,GACb;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAA;KAAE,CAAA;CAAE,GAChE;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,GAC9C;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAA;CAAE,GAC9C;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,CAAC;AAEvB,eAAO,MAAM,aAAa;WACf,WAAW;cAAY,QAAQ,CAAC,YAAY,CAAC;cAC5C,CAAC;AAEb,eAAO,MAAM,aAAa,GACxB,OAAO,WAAW,EAClB,QAAQ,YAAY,KACnB,WAmCF,CAAC"}

package/dist/components/Select/SelectContext.js

@@ -0,0 +1,33 @@
+import { createContext } from 'react';
+
+const SelectContext = createContext(undefined);
+const selectReducer = (state, action) => {
+    switch (action.type) {
+        case 'ADD': {
+            // 현재 selected가 없고, defaultValue === payload.value일 경우 select함.
+            if (state.selected === undefined &&
+                state.defaultValue === action.payload.value) {
+                return {
+                    ...state,
+                    selected: action.payload.value,
+                    items: new Map(state.items).set(action.payload.value, action.payload.children),
+                };
+            }
+            return {
+                ...state,
+                items: new Map(state.items).set(action.payload.value, action.payload.children),
+            };
+        }
+        case 'REMOVE': {
+            const newMap = new Map(state.items);
+            newMap.delete(action.payload.value);
+            return { ...state, items: newMap };
+        }
+        case 'SELECT':
+            return { ...state, isActive: false, selected: action.payload.value };
+        case 'TOGGLE':
+            return { ...state, isActive: !state.isActive };
+    }
+};
+
+export { SelectContext, selectReducer };

package/dist/components/Select/SelectOption.css.d.ts

@@ -1,3 +1,2 @@
-declare const selectOption: string;
-
-export { selectOption };
+export declare const selectOption: string;
+//# sourceMappingURL=SelectOption.css.d.ts.map

package/dist/components/Select/SelectOption.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOption.css.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectOption.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,QAUvB,CAAC"}

package/dist/components/Select/SelectOption.css.js

@@ -0,0 +1,13 @@
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+import { theme } from '../../themes/theme.css.js';
+
+const selectOption = styleWithLayer({
+    padding: '0.75em 0.5em',
+    transition: 'background-color 0.2s ease',
+    cursor: 'default',
+    ':hover': {
+        backgroundColor: `rgb(${theme.color.accent})`,
+    },
+});
+
+export { selectOption };

package/dist/components/Select/SelectOption.d.ts

@@ -1,10 +1,8 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-
+import { type ReactNode } from 'react';
 interface SelectOptionProps {
     children: ReactNode;
     value: string;
 }
-declare const SelectOption: ({ children, value }: SelectOptionProps) => react_jsx_runtime.JSX.Element;
-
-export { SelectOption };
+export declare const SelectOption: ({ children, value }: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SelectOption.d.ts.map

package/dist/components/Select/SelectOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectOption.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAK9D,UAAU,iBAAiB;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,YAAY,GAAI,qBAAqB,iBAAiB,4CA2BlE,CAAC"}