@kimdw-rtk/ui 0.0.0 → 0.0.3

package/dist/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { useCombinedRefs } from '@kimdw-rtk/utils';
+import clsx from 'clsx';
+import { useMouseScroll } from '#hooks/useMouseScroll';
+import { sx } from '#styles';
+import * as s from './ScrollArea.css';
+export 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 (_jsx("div", { ref: targetRef, className: clsx(s.scrollArea, className, sx(propSx), hasLeftSpace && hasRightSpace && s.maskBoth, hasLeftSpace && s.maskLeft, hasRightSpace && s.maskRight), ...props, children: _jsx("div", { className: s.wrapper, children: children }) }));
+});
+ScrollArea.displayName = 'ScrollArea';
+export { s as scrollAreaCss };

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

@@ -0,0 +1,2 @@
+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/{src/components/ScrollArea/ScrollArea.spec.tsx → dist/components/ScrollArea/ScrollArea.spec.js}

@@ -1,6 +1,5 @@
-import { uiTest } from '../../tests/uiTest';
-import { ScrollArea } from './ScrollArea';
-
-describe('ScrollArea 컴포넌트', () => {
-  uiTest(ScrollArea, 'ScrollArea');
-});
+import { uiTest } from '../../tests/uiTest';
+import { ScrollArea } from './ScrollArea';
+describe('ScrollArea 컴포넌트', () => {
+    uiTest(ScrollArea, 'ScrollArea');
+});

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

@@ -0,0 +1,2 @@
+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/{src/components/ScrollArea/index.ts → dist/components/ScrollArea/index.js}

@@ -1 +1 @@
-export * from './ScrollArea';
+export * from './ScrollArea';

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

@@ -0,0 +1,14 @@
+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,20 @@
+import { recipeWithLayer } from '#styleUtils';
+import { typography } from '#tokens';
+export const select = recipeWithLayer({
+    base: {
+        position: 'relative',
+    },
+    variants: {
+        size: {
+            sm: {
+                fontSize: typography.size.sm,
+            },
+            md: {
+                fontSize: typography.size.md,
+            },
+            lg: {
+                fontSize: typography.size.lg,
+            },
+        },
+    },
+});

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

@@ -0,0 +1,17 @@
+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>;
+    name?: string;
+    width?: CSSProperties['width'];
+    defaultValue?: string;
+    variant?: ComponentProps<typeof SelectTrigger>['variant'];
+    onChange?: (value: string | undefined) => void;
+}
+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,QAAQ,CAAC;AAE1C,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,46 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useReducer, useRef, } from 'react';
+import { useCombinedRefs } from '@kimdw-rtk/utils';
+import clsx from 'clsx';
+import { sx } from '#styles';
+import * as s from './Select.css';
+import { SelectContext, selectReducer } from './SelectContext';
+import SelectOptionList from './SelectOptionList';
+import SelectTrigger from './SelectTrigger';
+export 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 (_jsx(SelectContext.Provider, { value: { state, dispatch }, children: _jsxs("div", { ref: targetRef, style: { ...style, width }, className: clsx(s.select({ size }), className, sx(propSx)), ...props, children: [_jsx(SelectTrigger, { variant: variant, children: state.selected !== null && state.items.get(state.selected || '') }), _jsx(SelectOptionList, { children: children }), _jsx("input", { type: "hidden", name: name, value: state.selected || '' })] }) }));
+});
+Select.displayName = 'Select';
+export { s as selectCss };

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

@@ -0,0 +1,2 @@
+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/Select.spec.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Select, SelectOption } from '.';
+import { uiTest } from '../../tests/uiTest';
+describe('Select 컴포넌트', () => {
+    uiTest(Select, 'Select');
+    it('클릭한 option의 내용이 Select에 보인다.', () => {
+        render(_jsxs(Select, { "data-testid": "select", children: [_jsx(SelectOption, { value: "1", children: "1\uBC88" }), _jsx(SelectOption, { value: "2", children: "2\uBC88" })] }));
+        const select = screen.getByTestId('select');
+        fireEvent.click(screen.getByText('2번'));
+        expect(select).toHaveTextContent('2번');
+    });
+    it('새로운 option을 클릭하면 onChange 이벤트가 발생하고, form value, ref.value의 값이 바뀐다.', () => {
+        const handleChange = jest.fn();
+        render(_jsx("form", { "data-testid": "form", children: _jsxs(Select, { "data-testid": "select", name: "select", onChange: handleChange, children: [_jsx(SelectOption, { value: "1", children: "1\uBC88" }), _jsx(SelectOption, { value: "2", children: "2\uBC88" })] }) }));
+        const option2 = screen.getByText('2번');
+        const form = screen.getByTestId('form');
+        fireEvent.click(option2);
+        expect(handleChange).toHaveBeenCalledTimes(1);
+        expect(handleChange.mock.calls[0][0]).toBe('2');
+        expect(new FormData(form).get('select')).toBe('2');
+        fireEvent.click(option2);
+        expect(handleChange).toHaveBeenCalledTimes(1);
+        expect(new FormData(form).get('select')).toBe('2');
+        fireEvent.click(screen.getByText('1번'));
+        expect(handleChange).toHaveBeenCalledTimes(2);
+        expect(handleChange.mock.calls[1][0]).toBe('1');
+        expect(new FormData(form).get('select')).toBe('1');
+    });
+    it('defaultValue의 값이 기본으로 보인다.', () => {
+        render(_jsxs(Select, { "data-testid": "select", defaultValue: "2", children: [_jsx(SelectOption, { value: "1", children: "1\uBC88" }), _jsx(SelectOption, { value: "2", children: "2\uBC88" })] }));
+        const select = screen.getByTestId('select');
+        expect(select).toHaveTextContent('2번');
+    });
+});

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

@@ -0,0 +1,34 @@
+import { type Dispatch, type ReactNode } from 'react';
+type SelectState = {
+    isActive: boolean;
+    selected?: string;
+    defaultValue?: string;
+    items: Map<string, ReactNode>;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+};
+type SelectAction = {
+    type: 'ADD';
+    payload: {
+        value: string;
+        children: ReactNode;
+    };
+} | {
+    type: 'REMOVE';
+    payload: {
+        value: string;
+    };
+} | {
+    type: 'SELECT';
+    payload: {
+        value: string;
+    };
+} | {
+    type: 'TOGGLE';
+};
+export declare const SelectContext: import("react").Context<{
+    state: SelectState;
+    dispatch: Dispatch<SelectAction>;
+} | undefined>;
+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,30 @@
+import { createContext } from 'react';
+export const SelectContext = createContext(undefined);
+export 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 };
+    }
+};

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

@@ -0,0 +1,2 @@
+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,10 @@
+import { styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+export const selectOption = styleWithLayer({
+    padding: '0.75em 0.5em',
+    transition: 'background-color 0.2s ease',
+    cursor: 'default',
+    ':hover': {
+        backgroundColor: `rgb(${theme.color.accent})`,
+    },
+});

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

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+interface SelectOptionProps {
+    children: ReactNode;
+    value: string;
+}
+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"}

package/dist/components/Select/SelectOption.js

@@ -0,0 +1,23 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect } from 'react';
+import { SelectContext } from './SelectContext';
+import * as s from './SelectOption.css';
+export const SelectOption = ({ children, value }) => {
+    const selectContext = useContext(SelectContext);
+    if (!selectContext) {
+        throw new Error('SelectOption must be rendered within a Select.');
+    }
+    const { dispatch } = selectContext;
+    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 (_jsx("div", { className: s.selectOption, onClick: handleClick, children: children }));
+};

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

@@ -0,0 +1,19 @@
+export declare const container: import("@vanilla-extract/recipes").RuntimeFn<{
+    isVisible: {
+        true: {
+            display: "block";
+        };
+        false: {
+            display: "none";
+        };
+    };
+    isAbove: {
+        true: {
+            top: "100%";
+        };
+        false: {
+            bottom: "100%";
+        };
+    };
+}>;
+//# sourceMappingURL=SelectOptionList.css.d.ts.map

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

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

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

@@ -0,0 +1,55 @@
+import { keyframes } from '@vanilla-extract/css';
+import { recipeWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+const fadeIn = keyframes({
+    '0%': {
+        transform: 'scale(0.95)',
+        opacity: 0,
+    },
+    '100%': {
+        transform: 'scale(1)',
+        opacity: 1,
+    },
+});
+export const container = recipeWithLayer({
+    base: {
+        overflowY: 'auto',
+        position: 'absolute',
+        zIndex: '10',
+        width: '100%',
+        minWidth: 'max-content',
+        border: `1px solid rgb(${theme.color.border})`,
+        borderRadius: theme.borderRadius,
+        margin: '0.5rem 0',
+        backgroundColor: `rgb(${theme.color.background})`,
+        animation: `${fadeIn} 0.3s ease 1`,
+        transformOrigin: '0 0',
+        userSelect: 'none',
+        '::-webkit-scrollbar': {
+            width: '0.25rem',
+            height: '0.25rem',
+        },
+        '::-webkit-scrollbar-thumb': {
+            borderRadius: '0.5rem',
+            backgroundColor: `rgb(${theme.color['muted-foreground']})`,
+        },
+    },
+    variants: {
+        isVisible: {
+            true: {
+                display: 'block',
+            },
+            false: {
+                display: 'none',
+            },
+        },
+        isAbove: {
+            true: {
+                top: '100%',
+            },
+            false: {
+                bottom: '100%',
+            },
+        },
+    },
+});

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

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+interface SelectOptionListProps {
+    children: ReactNode;
+}
+declare const SelectOptionList: ({ children }: SelectOptionListProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectOptionList;
+//# sourceMappingURL=SelectOptionList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectOptionList.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectOptionList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AASpE,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,gBAAgB,GAAI,cAAc,qBAAqB,4CA2C5D,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/Select/SelectOptionList.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useMemo, useRef } from 'react';
+import clsx from 'clsx';
+import { sprinkles } from '#styles';
+import { SelectContext } from './SelectContext';
+import * as s from './SelectOptionList.css';
+const SelectOptionList = ({ children }) => {
+    const selectContext = useContext(SelectContext);
+    const containerRef = useRef(null);
+    if (!selectContext) {
+        throw new Error('SelectOption must be rendered within a Select.');
+    }
+    const { state } = selectContext;
+    const isAbove = 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 (_jsx("div", { ref: containerRef, className: clsx(s.container({ isVisible: state.isActive, isAbove }), sprinkles({ boxShadow: 'accent-sm' })), children: children }));
+};
+export default SelectOptionList;

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

@@ -0,0 +1,34 @@
+export declare const children: string;
+export declare const icon: import("@vanilla-extract/recipes").RuntimeFn<{
+    isActive: {
+        false: {
+            transform: "rotate(0)";
+        };
+        true: {
+            color: `rgb(var(--${string}))`;
+            transform: "rotate(-180deg)";
+        };
+    };
+}>;
+export declare const selectTrigger: import("@vanilla-extract/recipes").RuntimeFn<{
+    isActive: {
+        true: {
+            borderColor: `rgb(var(--${string}))`;
+        };
+    };
+    variant: {
+        contained: {
+            padding: "0.75em 0.75em";
+            borderRadius: `var(--${string})`;
+            backgroundColor: `rgb(var(--${string}))`;
+        };
+        outlined: {
+            padding: "0.75em 0.5em";
+            border: "1px solid";
+            borderColor: `rgb(var(--${string}))`;
+            borderRadius: `var(--${string})`;
+            backgroundColor: `rgb(var(--${string}))`;
+        };
+    };
+}>;
+//# sourceMappingURL=SelectTrigger.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTrigger.css.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectTrigger.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ,QAInB,CAAC;AAEH,eAAO,MAAM,IAAI;;;;;;;;;;EAqBf,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;EAsCxB,CAAC"}

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

@@ -0,0 +1,59 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { theme } from '#themes';
+export const children = style({
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+});
+export const icon = recipe({
+    base: {
+        flexShrink: '0',
+        lineHeight: '0',
+        transition: 'color 0.2s ease, transform 0.2s ease',
+    },
+    variants: {
+        isActive: {
+            false: {
+                transform: 'rotate(0)',
+            },
+            true: {
+                color: `rgb(${theme.color.primary})`,
+                transform: 'rotate(-180deg)',
+            },
+        },
+    },
+});
+export const selectTrigger = recipe({
+    base: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5em',
+        justifyContent: 'space-between',
+        width: '100%',
+        transition: 'border-color 0.2s ease',
+        cursor: 'pointer',
+        userSelect: 'none',
+    },
+    variants: {
+        isActive: {
+            true: {
+                borderColor: `rgb(${theme.color.primary})`,
+            },
+        },
+        variant: {
+            contained: {
+                padding: '0.75em 0.75em',
+                borderRadius: theme.borderRadius,
+                backgroundColor: `rgb(${theme.color.secondary})`,
+            },
+            outlined: {
+                padding: '0.75em 0.5em',
+                border: '1px solid',
+                borderColor: `rgb(${theme.color.border})`,
+                borderRadius: theme.borderRadius,
+                backgroundColor: `rgb(${theme.color.background})`,
+            },
+        },
+    },
+});

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

@@ -0,0 +1,6 @@
+import type { UIComponent } from '#types';
+import * as s from './SelectTrigger.css';
+type SelectTriggerProps = UIComponent<'div', typeof s.selectTrigger>;
+declare const SelectTrigger: ({ children, className, variant, sx: propSx, }: SelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export default SelectTrigger;
+//# sourceMappingURL=SelectTrigger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/Select/SelectTrigger.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAG1C,OAAO,KAAK,CAAC,MAAM,qBAAqB,CAAC;AAEzC,KAAK,kBAAkB,GAAG,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,aAAa,CAAC,CAAC;AAErE,QAAA,MAAM,aAAa,GAAI,+CAKpB,kBAAkB,4CA4BpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/Select/SelectTrigger.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import clsx from 'clsx';
+import { ChevronDownIcon } from 'lucide-react';
+import { sx } from '#styles';
+import { SelectContext } from './SelectContext';
+import * as s from './SelectTrigger.css';
+const SelectTrigger = ({ children, className, variant, sx: propSx, }) => {
+    const selectContext = useContext(SelectContext);
+    if (!selectContext) {
+        throw new Error('SelectTrigger must be rendered within a Select.');
+    }
+    const { state, dispatch } = selectContext;
+    const handleClick = () => {
+        dispatch({ type: 'TOGGLE' });
+    };
+    return (_jsxs("div", { className: clsx(s.selectTrigger({ isActive: state.isActive, variant }), className, sx(propSx)), onClick: handleClick, children: [_jsx("span", { className: s.children, children: children }), _jsx("span", { className: s.icon({ isActive: state.isActive }), children: _jsx(ChevronDownIcon, { size: "1em", strokeWidth: "2px" }) })] }));
+};
+export default SelectTrigger;

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

@@ -0,0 +1,3 @@
+export * from './Select';
+export * from './SelectOption';
+//# sourceMappingURL=index.d.ts.map

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

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

package/{src/components/Select/index.tsx → dist/components/Select/index.js}

@@ -1,2 +1,2 @@
-export * from './Select';
-export * from './SelectOption';
+export * from './Select';
+export * from './SelectOption';

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

@@ -0,0 +1,2 @@
+export declare const skeleton: string;
+//# sourceMappingURL=Skeleton.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.css.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Skeleton.css.ts"],"names":[],"mappings":"AAeA,eAAO,MAAM,QAAQ,QAUnB,CAAC"}