@kimdw-rtk/ui 0.1.7 → 0.1.8

package/dist/components/Flex/index.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var Flex_css = require('./Flex.css.vanilla.cjs');
+var sprinklesUtils = require('../../utils/sprinklesUtils.cjs');
+var sprinkles_css = require('../../styles/sprinkles.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const Flex = react.forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(className, Flex_css.flex, sx.sx(propSx), sprinkles_css.sprinkles(sprinklesUtils.filterSprinkles(props))), ...sprinklesUtils.omitSprinkles(props), children: children }));
+});
+Flex.displayName = 'Flex';
+
+exports.Flex = Flex;

package/dist/components/Navigation/NavigationAside.cjs

@@ -0,0 +1,15 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var NavigationAside_css = require('./NavigationAside.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const NavigationAside = react.forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntime.jsx("aside", { ref: ref, className: clsx.clsx(className, sx.sx(propSx)), ...props, children: jsxRuntime.jsx("div", { className: NavigationAside_css.wide, children: children }) }));
+});
+NavigationAside.displayName = 'NavigationAside';
+
+exports.NavigationAside = NavigationAside;

package/dist/components/Navigation/NavigationAside.css.vanilla.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./NavigationAside.css.ts.vanilla.css');
+
+var wide = 'NavigationAside_styleWithLayer__alxqst0';
+
+exports.wide = wide;

package/dist/components/Navigation/NavigationBar.cjs

@@ -0,0 +1,18 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var utils = require('@kimdw-rtk/utils');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var NavigationBar_css = require('./NavigationBar.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const NavigationBar = react.forwardRef(({ className, size = 'md', sx: propSx, ...props }, ref) => {
+    const isScrolled = utils.useIsScrolled(typeof window === 'undefined' ? undefined : window);
+    return (jsxRuntime.jsx("nav", { ref: ref, className: clsx.clsx(NavigationBar_css.navigationBar({ size, isStuck: isScrolled }), className, sx.sx(propSx)), ...props }));
+});
+NavigationBar.displayName = 'NavigationBar';
+
+exports.navigationBarCss = NavigationBar_css;
+exports.NavigationBar = NavigationBar;

package/dist/components/Navigation/NavigationBar.css.vanilla.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./NavigationBar.css.ts.vanilla.css');
+var createRuntimeFn62c9670f_esm = require('../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs');
+
+var navigationBar = createRuntimeFn62c9670f_esm.c({defaultClassName:'NavigationBar__x4q5x97 NavigationBar_layeredBase__x4q5x91',variantClassNames:{size:{sm:'NavigationBar_styleWithLayer__x4q5x92',md:'NavigationBar_styleWithLayer__x4q5x93',lg:'NavigationBar_styleWithLayer__x4q5x94'},isStuck:{true:'NavigationBar_styleWithLayer__x4q5x95',false:'NavigationBar_styleWithLayer__x4q5x96'}},defaultVariants:{},compoundVariants:[]});
+var navigationBarContainer = 'NavigationBar_navigationBarContainer__x4q5x90';
+
+exports.navigationBar = navigationBar;
+exports.navigationBarContainer = navigationBarContainer;

package/dist/components/Navigation/NavigationContainer.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var NavigationContainer_css = require('./NavigationContainer.css.vanilla.cjs');
+var index = require('../Container/index.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const NavigationContainer = react.forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntime.jsx(index.Container, { ref: ref, className: clsx.clsx(className, NavigationContainer_css.container, sx.sx(propSx)), ...props, children: children }));
+});
+NavigationContainer.displayName = 'NavigationContainer';
+
+exports.NavigationContainer = NavigationContainer;

package/dist/components/Navigation/NavigationContainer.css.vanilla.cjs

@@ -0,0 +1,7 @@
+'use strict';
+
+require('./NavigationContainer.css.ts.vanilla.css');
+
+var container = 'NavigationContainer_container__1s3m4g70';
+
+exports.container = container;

package/dist/components/Navigation/NavigationDrawer.cjs

@@ -0,0 +1,30 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var NavigationDrawer_css = require('./NavigationDrawer.css.vanilla.cjs');
+var x = require('../../node_modules/.pnpm/lucide-react@0.503.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/x.cjs');
+var alignJustify = require('../../node_modules/.pnpm/lucide-react@0.503.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/align-justify.cjs');
+var index = require('../Button/index.cjs');
+var index$1 = require('../Box/index.cjs');
+
+const NavigationDrawer = ({ menu, aside }) => {
+    const [isExpanded, setIsExpanded] = react.useState(false);
+    const handleClick = () => {
+        setIsExpanded((prev) => !prev);
+    };
+    react.useEffect(() => {
+        if (isExpanded) {
+            document.body.style.overflow = 'hidden';
+        }
+        return () => {
+            if (isExpanded) {
+                document.body.style.overflow = 'auto';
+            }
+        };
+    }, [isExpanded]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: NavigationDrawer_css.wide, children: [menu, aside] }), jsxRuntime.jsxs("div", { className: NavigationDrawer_css.narrow, children: [jsxRuntime.jsx(index.Button, { color: "secondary", size: "icon-md", variant: "ghost", onClick: handleClick, children: isExpanded ? jsxRuntime.jsx(x.default, {}) : jsxRuntime.jsx(alignJustify.default, {}) }), jsxRuntime.jsx("div", { className: NavigationDrawer_css.popup({ isVisible: isExpanded }), children: jsxRuntime.jsxs(index$1.Box, { alignItems: "flex-end", flexDirection: "column-reverse", gap: "xl", paddingY: "lg", flex: true, children: [jsxRuntime.jsx(index$1.Box, { width: "100%", onClick: () => setIsExpanded(false), children: menu }), aside] }) })] })] }));
+};
+
+exports.NavigationDrawer = NavigationDrawer;

package/dist/components/Navigation/NavigationDrawer.css.vanilla.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./NavigationBar.css.ts.vanilla.css');
+require('./NavigationDrawer.css.ts.vanilla.css');
+var createRuntimeFn62c9670f_esm = require('../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs');
+
+var narrow = 'NavigationDrawer_styleWithLayer__1190lva0';
+var popup = createRuntimeFn62c9670f_esm.c({defaultClassName:'NavigationDrawer__1190lva5 NavigationDrawer_layeredBase__1190lva2',variantClassNames:{isVisible:{true:'NavigationDrawer_styleWithLayer__1190lva3',false:'NavigationDrawer_styleWithLayer__1190lva4'}},defaultVariants:{},compoundVariants:[]});
+var wide = 'NavigationDrawer_styleWithLayer__1190lva1';
+
+exports.narrow = narrow;
+exports.popup = popup;
+exports.wide = wide;

package/dist/components/Navigation/NavigationItem.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var NavigationItem_css = require('./NavigationItem.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const NavigationItem = react.forwardRef(({ style, className, sx: propSx, isSelected = false, ...props }, ref) => {
+    return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(NavigationItem_css.container({ isSelected }), className, sx.sx(propSx)), style: { ...style }, ...props }));
+});
+NavigationItem.displayName = 'NavigationItem';
+
+exports.NavigationItem = NavigationItem;

package/dist/components/Navigation/NavigationItem.css.vanilla.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./NavigationBar.css.ts.vanilla.css');
+require('./NavigationDrawer.css.ts.vanilla.css');
+require('./NavigationItem.css.ts.vanilla.css');
+var createRuntimeFn62c9670f_esm = require('../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs');
+
+var container = createRuntimeFn62c9670f_esm.c({defaultClassName:'NavigationItem__1epy0hz3 NavigationItem_layeredBase__1epy0hz0',variantClassNames:{isSelected:{true:'NavigationItem_styleWithLayer__1epy0hz1',false:'NavigationItem_styleWithLayer__1epy0hz2'}},defaultVariants:{},compoundVariants:[]});
+
+exports.container = container;

package/dist/components/Navigation/NavigationLogo.cjs

@@ -0,0 +1,14 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var NavigationLogo_css = require('./NavigationLogo.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const NavigationLogo = react.forwardRef(({ className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(NavigationLogo_css.navigationLogo, className, sx.sx({ marginRight: { mobile: 'lg', desktop: '3xl' } }), sx.sx(propSx)), ...props }));
+});
+NavigationLogo.displayName = 'NavigationLogo';
+
+exports.NavigationLogo = NavigationLogo;

package/dist/components/Navigation/NavigationLogo.css.vanilla.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./NavigationLogo.css.ts.vanilla.css');
+
+var navigationLogo = 'NavigationLogo_styleWithLayer__1u9v1830';
+
+exports.navigationLogo = navigationLogo;

package/dist/components/Navigation/NavigationMenu.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var NavigationMenu_css = require('./NavigationMenu.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const NavigationMenu = react.forwardRef(({ className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(NavigationMenu_css.navigationMenu, className, sx.sx(propSx)), ...props }));
+});
+NavigationMenu.displayName = 'NavigationMenu';
+
+exports.navigationMenuCss = NavigationMenu_css;
+exports.NavigationMenu = NavigationMenu;

package/dist/components/Navigation/NavigationMenu.css.vanilla.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./NavigationBar.css.ts.vanilla.css');
+require('./NavigationDrawer.css.ts.vanilla.css');
+require('./NavigationMenu.css.ts.vanilla.css');
+
+var navigationMenu = 'NavigationMenu_styleWithLayer__rsojes0';
+
+exports.navigationMenu = navigationMenu;

package/dist/components/Portal/index.cjs

@@ -0,0 +1,12 @@
+"use client";
+'use strict';
+
+var reactDom = require('react-dom');
+var index = require('../../hooks/useContainer/index.cjs');
+
+const Portal = ({ children }) => {
+    const container = index.useContainer();
+    return container !== undefined && reactDom.createPortal(children, container);
+};
+
+exports.Portal = Portal;

package/dist/components/Range/Range.cjs

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

package/dist/components/Range/Range.css.vanilla.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./Range.css.ts.vanilla.css');
+var createRuntimeFn62c9670f_esm = require('../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs');
+
+var bar = 'Range_styleWithLayer__biyxwo1z';
+var fill = 'Range_styleWithLayer__biyxwo1y';
+var range = createRuntimeFn62c9670f_esm.c({defaultClassName:'Range__biyxwoz Range_layeredBase__biyxwov',variantClassNames:{color:{primary:'Range_styleWithLayer__biyxwo1',secondary:'Range_styleWithLayer__biyxwo2',muted:'Range_styleWithLayer__biyxwo3',accent:'Range_styleWithLayer__biyxwo4',card:'Range_styleWithLayer__biyxwo5',danger:'Range_styleWithLayer__biyxwo6',warning:'Range_styleWithLayer__biyxwo7',success:'Range_styleWithLayer__biyxwo8',red:'Range_styleWithLayer__biyxwo9',orange:'Range_styleWithLayer__biyxwoa',amber:'Range_styleWithLayer__biyxwob',yellow:'Range_styleWithLayer__biyxwoc',lime:'Range_styleWithLayer__biyxwod',green:'Range_styleWithLayer__biyxwoe',emerald:'Range_styleWithLayer__biyxwof',teal:'Range_styleWithLayer__biyxwog',cyan:'Range_styleWithLayer__biyxwoh',sky:'Range_styleWithLayer__biyxwoi',blue:'Range_styleWithLayer__biyxwoj',indigo:'Range_styleWithLayer__biyxwok',violet:'Range_styleWithLayer__biyxwol',purple:'Range_styleWithLayer__biyxwom',fuchsia:'Range_styleWithLayer__biyxwon',pink:'Range_styleWithLayer__biyxwoo',rose:'Range_styleWithLayer__biyxwop',slate:'Range_styleWithLayer__biyxwoq',gray:'Range_styleWithLayer__biyxwor',zinc:'Range_styleWithLayer__biyxwos',neutral:'Range_styleWithLayer__biyxwot',stone:'Range_styleWithLayer__biyxwou'},size:{sm:'Range_styleWithLayer__biyxwow',md:'Range_styleWithLayer__biyxwox',lg:'Range_styleWithLayer__biyxwoy'}},defaultVariants:{},compoundVariants:[]});
+var thumb = 'Range_styleWithLayer__biyxwo1x';
+
+exports.bar = bar;
+exports.fill = fill;
+exports.range = range;
+exports.thumb = thumb;

package/dist/components/ScrollArea/ScrollArea.cjs

@@ -0,0 +1,39 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var utils = require('@kimdw-rtk/utils');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var index = require('../../hooks/useMouseScroll/index.cjs');
+var ScrollArea_css = require('./ScrollArea.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const ScrollArea = react.forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    const scrollAreaRef = react.useRef(null);
+    const targetRef = utils.useCombinedRefs(ref, scrollAreaRef);
+    const [hasLeftSpace, setHasLeftSpace] = react.useState(false);
+    const [hasRightSpace, setHasRightSpace] = react.useState(true);
+    index.useMouseScroll(scrollAreaRef);
+    react.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 (jsxRuntime.jsx("div", { ref: targetRef, className: clsx.clsx(ScrollArea_css.scrollArea, className, sx.sx(propSx), hasLeftSpace && hasRightSpace && ScrollArea_css.maskBoth, hasLeftSpace && ScrollArea_css.maskLeft, hasRightSpace && ScrollArea_css.maskRight), ...props, children: jsxRuntime.jsx("div", { className: ScrollArea_css.wrapper, children: children }) }));
+});
+ScrollArea.displayName = 'ScrollArea';
+
+exports.scrollAreaCss = ScrollArea_css;
+exports.ScrollArea = ScrollArea;

package/dist/components/ScrollArea/ScrollArea.css.vanilla.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./ScrollArea.css.ts.vanilla.css');
+
+var maskBoth = 'ScrollArea_maskBoth__m6lfro3';
+var maskLeft = 'ScrollArea_maskLeft__m6lfro1';
+var maskRight = 'ScrollArea_maskRight__m6lfro2';
+var scrollArea = 'ScrollArea_styleWithLayer__m6lfro0';
+var wrapper = 'ScrollArea_wrapper__m6lfro4';
+
+exports.maskBoth = maskBoth;
+exports.maskLeft = maskLeft;
+exports.maskRight = maskRight;
+exports.scrollArea = scrollArea;
+exports.wrapper = wrapper;

package/dist/components/Select/Select.cjs

@@ -0,0 +1,51 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var utils = require('@kimdw-rtk/utils');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var Select_css = require('./Select.css.vanilla.cjs');
+var SelectContext = require('./SelectContext.cjs');
+var SelectOptionList = require('./SelectOptionList.cjs');
+var SelectTrigger = require('./SelectTrigger.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const Select = react.forwardRef(({ children, className, style, name, defaultValue, width = '100%', size = 'md', sx: propSx, variant = 'outlined', onChange, ...props }, ref) => {
+    const containerRef = react.useRef(null);
+    const targetRef = utils.useCombinedRefs(ref, containerRef);
+    const [state, dispatch] = react.useReducer(SelectContext.selectReducer, {
+        isActive: false,
+        containerRef,
+        defaultValue,
+        items: new Map(),
+    });
+    react.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]);
+    react.useEffect(() => {
+        if (!onChange || !state.items.size) {
+            return;
+        }
+        onChange(state.selected);
+        //eslint-disable-next-line
+    }, [state.selected]);
+    return (jsxRuntime.jsx(SelectContext.SelectContext.Provider, { value: { state, dispatch }, children: jsxRuntime.jsxs("div", { ref: targetRef, className: clsx.clsx(Select_css.select({ size }), className, sx.sx(propSx)), style: { ...style, width }, ...props, children: [jsxRuntime.jsx(SelectTrigger.default, { variant: variant, children: state.selected !== null && state.items.get(state.selected || '') }), jsxRuntime.jsx(SelectOptionList.default, { children: children }), jsxRuntime.jsx("input", { name: name, type: "hidden", value: state.selected || '' })] }) }));
+});
+Select.displayName = 'Select';
+
+exports.selectCss = Select_css;
+exports.Select = Select;

package/dist/components/Select/Select.css.vanilla.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./Select.css.ts.vanilla.css');
+var createRuntimeFn62c9670f_esm = require('../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs');
+
+var select = createRuntimeFn62c9670f_esm.c({defaultClassName:'Select__7k9d9e4 Select_layeredBase__7k9d9e0',variantClassNames:{size:{sm:'Select_styleWithLayer__7k9d9e1',md:'Select_styleWithLayer__7k9d9e2',lg:'Select_styleWithLayer__7k9d9e3'}},defaultVariants:{},compoundVariants:[]});
+
+exports.select = select;

package/dist/components/Select/SelectContext.cjs

@@ -0,0 +1,36 @@
+'use strict';
+
+var react = require('react');
+
+const SelectContext = react.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 };
+    }
+};
+
+exports.SelectContext = SelectContext;
+exports.selectReducer = selectReducer;

package/dist/components/Select/SelectOption.cjs

@@ -0,0 +1,28 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var SelectContext = require('./SelectContext.cjs');
+var SelectOption_css = require('./SelectOption.css.vanilla.cjs');
+
+const SelectOption = ({ children, value }) => {
+    const selectContext = react.useContext(SelectContext.SelectContext);
+    if (!selectContext) {
+        throw new Error('SelectOption must be rendered within a Select.');
+    }
+    const { dispatch } = selectContext;
+    react.useEffect(() => {
+        dispatch({ type: 'ADD', payload: { value, children } });
+        return () => {
+            dispatch({ type: 'REMOVE', payload: { value } });
+        };
+        // eslint-disable-next-line
+    }, [dispatch, value]);
+    const handleClick = () => {
+        dispatch({ type: 'SELECT', payload: { value } });
+    };
+    return (jsxRuntime.jsx("div", { className: SelectOption_css.selectOption, onClick: handleClick, children: children }));
+};
+
+exports.SelectOption = SelectOption;

package/dist/components/Select/SelectOption.css.vanilla.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./SelectOption.css.ts.vanilla.css');
+
+var selectOption = 'SelectOption_styleWithLayer__16jsez30';
+
+exports.selectOption = selectOption;

package/dist/components/Select/SelectOptionList.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var SelectContext = require('./SelectContext.cjs');
+var SelectOptionList_css = require('./SelectOptionList.css.vanilla.cjs');
+var sprinkles_css = require('../../styles/sprinkles.css.vanilla.cjs');
+
+const SelectOptionList = ({ children }) => {
+    const selectContext = react.useContext(SelectContext.SelectContext);
+    const containerRef = react.useRef(null);
+    if (!selectContext) {
+        throw new Error('SelectOption must be rendered within a Select.');
+    }
+    const { state } = selectContext;
+    const isAbove = react.useMemo(() => {
+        const container = containerRef.current;
+        const parent = state.containerRef.current;
+        if (!state.isActive || !container || !parent) {
+            return;
+        }
+        const parentRect = parent.getBoundingClientRect();
+        container.style.display = 'block';
+        const containerRect = container.getBoundingClientRect();
+        container.style.display = '';
+        // 하단에 리스트를 모두 보여줄 공간이 충분한 경우
+        if (containerRect.top + containerRect.height < window.innerHeight) {
+            return true;
+        }
+        // 그렇지 않으면 parent의 상단/하단 중 공간이 더 넓은 쪽으로 리스트를 보여줌
+        return parentRect.top + parentRect.height / 2 < window.innerHeight / 2;
+    }, [state.isActive, state.containerRef]);
+    return (jsxRuntime.jsx("div", { ref: containerRef, className: clsx.clsx(SelectOptionList_css.container({ isVisible: state.isActive, isAbove }), sprinkles_css.sprinkles({ boxShadow: 'accent-sm' })), children: children }));
+};
+
+exports.default = SelectOptionList;

package/dist/components/Select/SelectOptionList.css.vanilla.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./SelectOptionList.css.ts.vanilla.css');
+var createRuntimeFn62c9670f_esm = require('../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs');
+
+var container = createRuntimeFn62c9670f_esm.c({defaultClassName:'SelectOptionList__yft69m6 SelectOptionList_layeredBase__yft69m1',variantClassNames:{isVisible:{true:'SelectOptionList_styleWithLayer__yft69m2',false:'SelectOptionList_styleWithLayer__yft69m3'},isAbove:{true:'SelectOptionList_styleWithLayer__yft69m4',false:'SelectOptionList_styleWithLayer__yft69m5'}},defaultVariants:{},compoundVariants:[]});
+
+exports.container = container;

package/dist/components/Select/SelectTrigger.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var SelectContext = require('./SelectContext.cjs');
+var SelectTrigger_css = require('./SelectTrigger.css.vanilla.cjs');
+var chevronDown = require('../../node_modules/.pnpm/lucide-react@0.503.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/chevron-down.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const SelectTrigger = ({ children, className, variant, sx: propSx, }) => {
+    const selectContext = react.useContext(SelectContext.SelectContext);
+    if (!selectContext) {
+        throw new Error('SelectTrigger must be rendered within a Select.');
+    }
+    const { state, dispatch } = selectContext;
+    const handleClick = () => {
+        dispatch({ type: 'TOGGLE' });
+    };
+    return (jsxRuntime.jsxs("div", { className: clsx.clsx(SelectTrigger_css.selectTrigger({ isActive: state.isActive, variant }), className, sx.sx(propSx)), onClick: handleClick, children: [jsxRuntime.jsx("span", { className: SelectTrigger_css.children, children: children }), jsxRuntime.jsx("span", { className: SelectTrigger_css.icon({ isActive: state.isActive }), children: jsxRuntime.jsx(chevronDown.default, { size: "1em", strokeWidth: "2px" }) })] }));
+};
+
+exports.default = SelectTrigger;

package/dist/components/Select/SelectTrigger.css.vanilla.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+require('./SelectTrigger.css.ts.vanilla.css');
+var createRuntimeFn62c9670f_esm = require('../../node_modules/.pnpm/@vanilla-extract_recipes@0.5.7_@vanilla-extract_css@1.17.4_babel-plugin-macros@3.1.0_/node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.cjs');
+
+var children = 'SelectTrigger_children__1uw63tl0';
+var icon = createRuntimeFn62c9670f_esm.c({defaultClassName:'SelectTrigger_icon__1uw63tl1',variantClassNames:{isActive:{false:'SelectTrigger_icon_isActive_false__1uw63tl2',true:'SelectTrigger_icon_isActive_true__1uw63tl3'}},defaultVariants:{},compoundVariants:[]});
+var selectTrigger = createRuntimeFn62c9670f_esm.c({defaultClassName:'SelectTrigger_selectTrigger__1uw63tl4',variantClassNames:{isActive:{true:'SelectTrigger_selectTrigger_isActive_true__1uw63tl5'},variant:{contained:'SelectTrigger_selectTrigger_variant_contained__1uw63tl6',outlined:'SelectTrigger_selectTrigger_variant_outlined__1uw63tl7'}},defaultVariants:{},compoundVariants:[]});
+
+exports.children = children;
+exports.icon = icon;
+exports.selectTrigger = selectTrigger;

package/dist/components/Separator/index.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const Separator = ({ children, separator }) => {
+    const items = react.Children.toArray(children);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.map((child, index) => (jsxRuntime.jsxs(react.Fragment, { children: [index > 0 && separator, child] }, child.key || index))) }));
+};
+
+exports.Separator = Separator;