@kimdw-rtk/ui 0.0.20 → 0.0.21

package/dist/components/Navigation/NavigationItem.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationItem.css.d.ts","sourceRoot":"","sources":["../../../src/components/Navigation/NavigationItem.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS;;;;;;;;;EAoCpB,CAAC"}

package/dist/components/Navigation/NavigationItem.css.js

@@ -0,0 +1,38 @@
+import { recipeWithLayer } from '../../utils/styleUtils.css.js';
+import { narrow } from './NavigationDrawer.css.js';
+import { spacing } from '../../tokens/semantic/spacing.js';
+import { theme } from '../../themes/theme.css.js';
+import { typography } from '../../tokens/semantic/typography.js';
+
+const container = recipeWithLayer({
+    base: {
+        position: 'relative',
+        lineHeight: '0',
+        padding: spacing.lg,
+        fontSize: '0.9375em',
+        fontWeight: typography.weight.semiBold,
+        transition: 'color 0.2s ease',
+        cursor: 'pointer',
+        ':hover': {
+            color: `rgb(${theme.color.foreground})`,
+        },
+        selectors: {
+            [`${narrow} &`]: {
+                padding: `${spacing['2xl']} ${spacing.lg}`,
+                fontSize: '1.125em',
+            },
+        },
+    },
+    variants: {
+        isSelected: {
+            true: {
+                color: `rgb(${theme.color['secondary-foreground']})`,
+            },
+            false: {
+                color: `rgba(${theme.color['secondary-foreground']}, 0.5)`,
+            },
+        },
+    },
+});
+
+export { container };

package/dist/components/Navigation/NavigationItem.d.ts

@@ -0,0 +1,6 @@
+import type { UIComponent } from '@/types';
+import * as s from './NavigationItem.css';
+type NavigationItemProps = UIComponent<'div', typeof s.container>;
+export declare const NavigationItem: import("react").ForwardRefExoticComponent<Omit<NavigationItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=NavigationItem.d.ts.map

package/dist/components/Navigation/NavigationItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationItem.d.ts","sourceRoot":"","sources":["../../../src/components/Navigation/NavigationItem.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,sBAAsB,CAAC;AAE1C,KAAK,mBAAmB,GAAG,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,SAAS,CAAC,CAAC;AAElE,eAAO,MAAM,cAAc,6HAW1B,CAAC"}

package/dist/components/Navigation/NavigationItem.js

@@ -0,0 +1,12 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { container } from './NavigationItem.css.js';
+import { sx } from '../../styles/sx.js';
+
+const NavigationItem = forwardRef(({ style, className, sx: propSx, isSelected = false, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx("div", { ref: ref, style: { ...style }, className: clsx(container({ isSelected }), className, sx(propSx)), ...props }));
+});
+NavigationItem.displayName = 'NavigationItem';
+
+export { NavigationItem };

package/dist/components/Navigation/NavigationLogo.css.d.ts

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

package/dist/components/Navigation/NavigationLogo.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationLogo.css.d.ts","sourceRoot":"","sources":["../../../src/components/Navigation/NavigationLogo.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,QAEzB,CAAC"}

package/dist/components/Navigation/NavigationLogo.css.js

@@ -0,0 +1,7 @@
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+
+const navigationLogo = styleWithLayer({
+    marginRight: '0.5em',
+});
+
+export { navigationLogo };

package/dist/components/Navigation/NavigationLogo.d.ts

@@ -0,0 +1,5 @@
+import type { UIComponent } from '@/types';
+type NavigationLogoProps = UIComponent<'div'>;
+export declare const NavigationLogo: import("react").ForwardRefExoticComponent<Omit<NavigationLogoProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=NavigationLogo.d.ts.map

package/dist/components/Navigation/NavigationLogo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationLogo.d.ts","sourceRoot":"","sources":["../../../src/components/Navigation/NavigationLogo.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,KAAK,mBAAmB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAE9C,eAAO,MAAM,cAAc,6HAe1B,CAAC"}

package/dist/components/Navigation/NavigationLogo.js

@@ -0,0 +1,12 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { navigationLogo } from './NavigationLogo.css.js';
+import { sx } from '../../styles/sx.js';
+
+const NavigationLogo = forwardRef(({ className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx("div", { ref: ref, className: clsx(navigationLogo, className, sx({ marginRight: { mobile: 'lg', desktop: '3xl' } }), sx(propSx)), ...props }));
+});
+NavigationLogo.displayName = 'NavigationLogo';
+
+export { NavigationLogo };

package/dist/components/Navigation/NavigationMenu.css.d.ts

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

package/dist/components/Navigation/NavigationMenu.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenu.css.d.ts","sourceRoot":"","sources":["../../../src/components/Navigation/NavigationMenu.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,cAAc,QAgBzB,CAAC"}

package/dist/components/Navigation/NavigationMenu.css.js

@@ -0,0 +1,22 @@
+import { styleWithLayer } from '../../utils/styleUtils.css.js';
+import { narrow } from './NavigationDrawer.css.js';
+import { spacing } from '../../tokens/semantic/spacing.js';
+import { theme } from '../../themes/theme.css.js';
+
+const navigationMenu = styleWithLayer({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5em',
+    selectors: {
+        [`${narrow} &`]: {
+            flexDirection: 'column',
+            alignItems: 'stretch',
+            gap: '0',
+            width: '100%',
+            borderTop: `1px solid rgb(${theme.color['border.weak']})`,
+            paddingTop: spacing['md'],
+        },
+    },
+});
+
+export { navigationMenu };

package/dist/components/Navigation/NavigationMenu.d.ts

@@ -0,0 +1,6 @@
+import type { UIComponent } from '@/types';
+import * as s from './NavigationMenu.css';
+type NavigationMenuProps = UIComponent<'div'>;
+export declare const NavigationMenu: import("react").ForwardRefExoticComponent<Omit<NavigationMenuProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { s as navigationMenuCss };
+//# sourceMappingURL=NavigationMenu.d.ts.map

package/dist/components/Navigation/NavigationMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Navigation/NavigationMenu.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,sBAAsB,CAAC;AAE1C,KAAK,mBAAmB,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAE9C,eAAO,MAAM,cAAc,6HAU1B,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,iBAAiB,EAAE,CAAC"}

package/dist/components/Navigation/NavigationMenu.js

@@ -0,0 +1,14 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { forwardRef } from 'react';
+import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
+import { navigationMenu } from './NavigationMenu.css.js';
+import * as NavigationMenu_css from './NavigationMenu.css.js';
+export { NavigationMenu_css as navigationMenuCss };
+import { sx } from '../../styles/sx.js';
+
+const NavigationMenu = forwardRef(({ className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx("div", { ref: ref, className: clsx(navigationMenu, className, sx(propSx)), ...props }));
+});
+NavigationMenu.displayName = 'NavigationMenu';
+
+export { NavigationMenu };

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

@@ -0,0 +1,8 @@
+export * from './NavigationAside';
+export * from './NavigationBar';
+export * from './NavigationContainer';
+export * from './NavigationDrawer';
+export * from './NavigationItem';
+export * from './NavigationLogo';
+export * from './NavigationMenu';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Navigation/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}

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

@@ -0,0 +1,49 @@
+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

@@ -0,0 +1,12 @@
+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;
+}
+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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,6 @@
+import type { UIComponent } from '@/types';
+import * as s from './ScrollArea.css';
+type ScrollAreaProps = UIComponent<'div'>;
+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

@@ -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/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/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,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

@@ -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,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

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