@kimdw-rtk/ui 0.1.6 → 0.1.8

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;

package/dist/components/Skeleton/Skeleton.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('./Skeleton.css.ts.vanilla.css');
+
+var skeleton = 'Skeleton_styleWithLayer__a0ivc31';
+
+exports.skeleton = skeleton;

package/dist/components/Skeleton/index.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 Skeleton_css = require('./Skeleton.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const Skeleton = react.forwardRef(({ className, width, height, style, sx: propSx, ...props }, ref) => {
+    return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(Skeleton_css.skeleton, className, sx.sx(propSx)), style: { ...style, width, height }, ...props }));
+});
+Skeleton.displayName = 'Skeleton';
+
+exports.Skeleton = Skeleton;

package/dist/components/Table/Table.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 Table_css = require('./Table.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const Table = react.forwardRef(({ isStriped, className, size = 'md', sx: propSx, ...props }, ref) => {
+    return (jsxRuntime.jsx("table", { ref: ref, className: clsx.clsx(Table_css.table({ size }), isStriped && Table_css.striped, sx.sx(propSx), className), ...props }));
+});
+Table.displayName = 'Table';
+
+exports.tableCss = Table_css;
+exports.Table = Table;

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

@@ -0,0 +1,15 @@
+'use strict';
+
+require('./../../styles/layers.css.ts.vanilla.css');
+require('./../../styles/sprinkles.css.ts.vanilla.css');
+require('./../../styles/globalStyle.css.ts.vanilla.css');
+require('./Table.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 paddingVar = 'var(--paddingVar__cuva6j0)';
+var striped = 'Table_styleWithLayer__cuva6jb';
+var table = createRuntimeFn62c9670f_esm.c({defaultClassName:'Table__cuva6j6 Table_layeredBase__cuva6j1',variantClassNames:{size:{sm:'Table_styleWithLayer__cuva6j2',md:'Table_styleWithLayer__cuva6j3',lg:'Table_styleWithLayer__cuva6j4',xl:'Table_styleWithLayer__cuva6j5'}},defaultVariants:{},compoundVariants:[]});
+
+exports.paddingVar = paddingVar;
+exports.striped = striped;
+exports.table = table;

package/dist/components/Table/TableBody.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const TableBody = ({ className, sx: propSx, ...props }) => {
+    return jsxRuntime.jsx("tbody", { className: clsx.clsx(className, sx.sx(propSx)), ...props });
+};
+
+exports.TableBody = TableBody;

package/dist/components/Table/TableCell.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var TableCell_css = require('./TableCell.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const TableCell = ({ width, textAlign, style, className, sx: propSx, ...props }) => {
+    return (jsxRuntime.jsx("td", { className: clsx.clsx(TableCell_css.tableCell, className, sx.sx(propSx)), style: { ...style, width, textAlign }, ...props }));
+};
+
+exports.TableCell = TableCell;

package/dist/components/Table/TableCell.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('./Table.css.ts.vanilla.css');
+require('./TableRow.css.ts.vanilla.css');
+require('./TableCell.css.ts.vanilla.css');
+
+var tableCell = 'TableCell_styleWithLayer__1a6tmtd0';
+
+exports.tableCell = tableCell;

package/dist/components/Table/TableHead.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var TableHead_css = require('./TableHead.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const TableHead = ({ width, textAlign, style, className, sx: propSx, ...props }) => {
+    return (jsxRuntime.jsx("th", { className: clsx.clsx(TableHead_css.tableHead, className, sx.sx(propSx)), style: { ...style, width, textAlign }, ...props }));
+};
+
+exports.TableHead = TableHead;

package/dist/components/Table/TableHead.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('./TableHead.css.ts.vanilla.css');
+
+var tableHead = 'TableHead_styleWithLayer__1sk0un50';
+
+exports.tableHead = tableHead;

package/dist/components/Table/TableHeader.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const TableHeader = ({ className, sx: propSx, ...props }) => {
+    return jsxRuntime.jsx("thead", { className: clsx.clsx(className, sx.sx(propSx)), ...props });
+};
+
+exports.TableHeader = TableHeader;

package/dist/components/Table/TableRow.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
+var TableRow_css = require('./TableRow.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const TableRow = ({ isInteractive = false, className, sx: propSx, ...props }) => {
+    return (jsxRuntime.jsx("tr", { className: clsx.clsx(isInteractive && TableRow_css.interactive, className, sx.sx(propSx)), ...props }));
+};
+
+exports.TableRow = TableRow;

package/dist/components/Table/TableRow.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('./TableRow.css.ts.vanilla.css');
+
+var interactive = 'TableRow_styleWithLayer__1ntlunj0';
+
+exports.interactive = interactive;

package/dist/components/Tabs/Tabs.cjs

@@ -0,0 +1,16 @@
+"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 TabsProvider = require('./TabsProvider.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const Tabs = react.forwardRef(({ children, defaultValue, className, sx: propSx, ...props }, ref) => {
+    const [value, setValue] = react.useReducer(TabsProvider.tabsReducer, defaultValue);
+    return (jsxRuntime.jsx(TabsProvider.TabsContext.Provider, { value: { value, setValue }, children: jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(className, sx.sx(propSx)), style: { width: '100%' }, ...props, children: children }) }));
+});
+Tabs.displayName = 'Tabs';
+
+exports.Tabs = Tabs;

package/dist/components/Tabs/TabsContent.cjs

@@ -0,0 +1,22 @@
+"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 TabsProvider = require('./TabsProvider.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const TabsContent = react.forwardRef(({ value, className, sx: propSx, ...props }, ref) => {
+    const tabsContext = react.useContext(TabsProvider.TabsContext);
+    if (tabsContext === undefined) {
+        throw new Error('TabsContext must be used within a Tabs.');
+    }
+    if (tabsContext.value !== value) {
+        return null;
+    }
+    return jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(className, sx.sx(propSx)), ...props });
+});
+TabsContent.displayName = 'TabsContent';
+
+exports.TabsContent = TabsContent;

package/dist/components/Tabs/TabsList.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 TabsList_css = require('./TabsList.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const TabsList = react.forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+    return (jsxRuntime.jsx("div", { ref: ref, className: clsx.clsx(className, TabsList_css.container, sx.sx(propSx)), ...props, children: children }));
+});
+TabsList.displayName = 'TabsList';
+
+exports.TabsList = TabsList;

package/dist/components/Tabs/TabsList.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('./TabsList.css.ts.vanilla.css');
+
+var container = 'TabsList_styleWithLayer__9gciwt0';
+
+exports.container = container;

package/dist/components/Tabs/TabsProvider.cjs

@@ -0,0 +1,12 @@
+"use client";
+'use strict';
+
+var react = require('react');
+
+const TabsContext = react.createContext(undefined);
+const tabsReducer = (_, value) => {
+    return value;
+};
+
+exports.TabsContext = TabsContext;
+exports.tabsReducer = tabsReducer;

package/dist/components/Tabs/TabsTrigger.cjs

@@ -0,0 +1,24 @@
+"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 TabsProvider = require('./TabsProvider.cjs');
+var TabsTrigger_css = require('./TabsTrigger.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const TabsTrigger = react.forwardRef(({ children, value, className, sx: propSx, ...props }, ref) => {
+    const tabsContext = react.useContext(TabsProvider.TabsContext);
+    if (tabsContext === undefined) {
+        throw new Error('TabsTrigger must be used within a Tabs.');
+    }
+    const isSelected = tabsContext.value === value;
+    const handleClick = () => {
+        tabsContext.setValue(value);
+    };
+    return (jsxRuntime.jsx("button", { ref: ref, className: clsx.clsx(className, TabsTrigger_css.container({ isSelected }), sx.sx(propSx)), onClick: handleClick, ...props, children: children }));
+});
+TabsTrigger.displayName = 'TabsTrigger';
+
+exports.TabsTrigger = TabsTrigger;

package/dist/components/Tabs/TabsTrigger.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('./TabsTrigger.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:'TabsTrigger__rk5ejr3 TabsTrigger_layeredBase__rk5ejr0',variantClassNames:{isSelected:{true:'TabsTrigger_styleWithLayer__rk5ejr1',false:'TabsTrigger_styleWithLayer__rk5ejr2'}},defaultVariants:{},compoundVariants:[]});
+
+exports.container = container;

package/dist/components/TextField/TextField.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('./TextField.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 textField = createRuntimeFn62c9670f_esm.c({defaultClassName:'TextField__q8l7gtz TextField_layeredBase__q8l7gtv',variantClassNames:{color:{primary:'TextField_styleWithLayer__q8l7gt1',secondary:'TextField_styleWithLayer__q8l7gt2',muted:'TextField_styleWithLayer__q8l7gt3',accent:'TextField_styleWithLayer__q8l7gt4',card:'TextField_styleWithLayer__q8l7gt5',danger:'TextField_styleWithLayer__q8l7gt6',warning:'TextField_styleWithLayer__q8l7gt7',success:'TextField_styleWithLayer__q8l7gt8',red:'TextField_styleWithLayer__q8l7gt9',orange:'TextField_styleWithLayer__q8l7gta',amber:'TextField_styleWithLayer__q8l7gtb',yellow:'TextField_styleWithLayer__q8l7gtc',lime:'TextField_styleWithLayer__q8l7gtd',green:'TextField_styleWithLayer__q8l7gte',emerald:'TextField_styleWithLayer__q8l7gtf',teal:'TextField_styleWithLayer__q8l7gtg',cyan:'TextField_styleWithLayer__q8l7gth',sky:'TextField_styleWithLayer__q8l7gti',blue:'TextField_styleWithLayer__q8l7gtj',indigo:'TextField_styleWithLayer__q8l7gtk',violet:'TextField_styleWithLayer__q8l7gtl',purple:'TextField_styleWithLayer__q8l7gtm',fuchsia:'TextField_styleWithLayer__q8l7gtn',pink:'TextField_styleWithLayer__q8l7gto',rose:'TextField_styleWithLayer__q8l7gtp',slate:'TextField_styleWithLayer__q8l7gtq',gray:'TextField_styleWithLayer__q8l7gtr',zinc:'TextField_styleWithLayer__q8l7gts',neutral:'TextField_styleWithLayer__q8l7gtt',stone:'TextField_styleWithLayer__q8l7gtu'},size:{sm:'TextField_styleWithLayer__q8l7gtw',md:'TextField_styleWithLayer__q8l7gtx',lg:'TextField_styleWithLayer__q8l7gty'}},defaultVariants:{},compoundVariants:[]});
+
+exports.textField = textField;

package/dist/components/TextField/index.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 TextField_css = require('./TextField.css.vanilla.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const TextField = react.forwardRef(({ className, type = 'text', size = 'md', color = 'primary', sx: propSx, ...props }, ref) => {
+    return (jsxRuntime.jsx("input", { ref: ref, className: clsx.clsx(className, TextField_css.textField({ size, color }), sx.sx(propSx)), type: type, ...props }));
+});
+TextField.displayName = 'TextField';
+
+exports.textFieldCss = TextField_css;
+exports.TextField = TextField;

package/dist/components/Toast/Toast.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('./Toast.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 progress = createRuntimeFn62c9670f_esm.c({defaultClassName:'Toast__1nxbvh6e Toast_layeredBase__1nxbvh6b',variantClassNames:{animation:{true:'Toast_styleWithLayer__1nxbvh6c',false:'Toast_styleWithLayer__1nxbvh6d'}},defaultVariants:{},compoundVariants:[]});
+var toast = createRuntimeFn62c9670f_esm.c({defaultClassName:'Toast__1nxbvh6i Toast_layeredBase__1nxbvh6h',variantClassNames:{color:{primary:'Toast_styleWithLayer__1nxbvh62',secondary:'Toast_styleWithLayer__1nxbvh63',muted:'Toast_styleWithLayer__1nxbvh64',accent:'Toast_styleWithLayer__1nxbvh65',card:'Toast_styleWithLayer__1nxbvh66',danger:'Toast_styleWithLayer__1nxbvh67',warning:'Toast_styleWithLayer__1nxbvh68',success:'Toast_styleWithLayer__1nxbvh69'}},defaultVariants:{},compoundVariants:[]});
+
+exports.progress = progress;
+exports.toast = toast;

package/dist/components/Toast/index.cjs

@@ -0,0 +1,18 @@
+'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 Toast_css = require('./Toast.css.vanilla.cjs');
+var index = require('../Box/index.cjs');
+var sx = require('../../styles/sx.cjs');
+
+const Toast = react.forwardRef(({ children, color = 'accent', className, duration = 0, sx: propSx, ...props }, ref) => {
+    return (jsxRuntime.jsxs(index.Box, { ref: ref, boxShadow: "accent-sm", className: clsx.clsx(Toast_css.toast({ color }), className, sx.sx(propSx)), rounded: true, ...props, children: [jsxRuntime.jsx("div", { className: Toast_css.progress({ animation: duration !== 0 }), style: {
+                    animationDuration: duration > 0 ? `${duration}ms` : undefined,
+                } }), jsxRuntime.jsx("span", { style: { position: 'relative' }, children: children })] }));
+});
+Toast.displayName = 'Toast';
+
+exports.toastCss = Toast_css;
+exports.Toast = Toast;

package/dist/components/Tooltip/Tooltip.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('./Tooltip.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 tooltip = createRuntimeFn62c9670f_esm.c({defaultClassName:'Tooltip__1s9n3or5 Tooltip_layeredBase__1s9n3or1',variantClassNames:{size:{sm:'Tooltip_styleWithLayer__1s9n3or2',md:'Tooltip_styleWithLayer__1s9n3or3',lg:'Tooltip_styleWithLayer__1s9n3or4'}},defaultVariants:{},compoundVariants:[]});
+
+exports.tooltip = tooltip;

package/dist/components/Tooltip/index.cjs

@@ -0,0 +1,31 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var Tooltip_css = require('./Tooltip.css.vanilla.cjs');
+var index = require('../Portal/index.cjs');
+
+const Tooltip = ({ children, content, size = 'sm' }) => {
+    const [isVisible, setIsVisible] = react.useState(false);
+    const [position, setPosition] = react.useState({
+        x: 0,
+        y: 0,
+    });
+    const handlePointerOver = (e) => {
+        const rect = e.currentTarget.getBoundingClientRect();
+        setIsVisible(true);
+        setPosition({ x: rect.x + rect.width / 2, y: rect.y + rect.height + 4 });
+        children.props?.onPointerOver?.(e);
+    };
+    const handlePointerOut = (e) => {
+        setIsVisible(false);
+        children.props?.onPointerOut?.(e);
+    };
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [react.cloneElement(children, {
+                onPointerOver: handlePointerOver,
+                onPointerOut: handlePointerOut,
+            }), isVisible && (jsxRuntime.jsx(index.Portal, { children: jsxRuntime.jsx("div", { className: Tooltip_css.tooltip({ size }), style: { top: position.y, left: position.x }, children: content }) }))] }));
+};
+
+exports.Tooltip = Tooltip;

package/dist/components/Typography/Typography.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('./Typography.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 typography = createRuntimeFn62c9670f_esm.c({defaultClassName:'Typography__q3o6cc3 Typography_layeredBase__q3o6cc0',variantClassNames:{isEllipsis:{true:'Typography_styleWithLayer__q3o6cc1'},isGradient:{true:'Typography_styleWithLayer__q3o6cc2'}},defaultVariants:{},compoundVariants:[]});
+
+exports.typography = typography;

package/dist/components/Typography/index.cjs

@@ -0,0 +1,25 @@
+'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 Typography_css = require('./Typography.css.vanilla.cjs');
+var sprinkles_css = require('../../styles/sprinkles.css.vanilla.cjs');
+
+const Typography = react.forwardRef(({ children, as: Component = 'p', className, color = 'foreground', fontSize = 'md', fontWeight = 'normal', lineHeight, textAlign, letterSpacing, wordBreak, gradientFrom, gradientTo, isEllipsis = false, isGradient = false, sx, ...props }, ref) => {
+    return (jsxRuntime.jsx(Component, { ref: ref, className: clsx.clsx(Typography_css.typography({ isEllipsis, isGradient }), sprinkles_css.sprinkles({
+            color,
+            fontSize,
+            fontWeight,
+            lineHeight,
+            textAlign,
+            letterSpacing,
+            wordBreak,
+            gradientFrom,
+            gradientTo,
+        }), sx && sprinkles_css.sprinkles(sx), className), ...props, children: children }));
+});
+Typography.displayName = 'Typography';
+
+exports.typographyCss = Typography_css;
+exports.Typography = Typography;

package/dist/contexts/UIProvider.cjs

@@ -0,0 +1,15 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var utils = require('@kimdw-rtk/utils');
+var overlay_css = require('../styles/overlay.css.vanilla.cjs');
+var ContainerProvider = require('../hooks/useContainer/ContainerProvider.cjs');
+var ToastProvider = require('../hooks/useToast/ToastProvider.cjs');
+var index = require('../components/Portal/index.cjs');
+
+const UIProvider = ({ children, container, overlayUnmountOn = 'transitionEnd', }) => {
+    return (jsxRuntime.jsx(ContainerProvider.ContainerProvider, { container: container, children: jsxRuntime.jsx(ToastProvider.ToastProvider, { children: jsxRuntime.jsx(utils.OverlayProvider, { className: { ...overlay_css }, renderOverlay: (overlayChildren) => (jsxRuntime.jsx(index.Portal, { children: overlayChildren })), unmountOn: overlayUnmountOn, children: children }) }) }));
+};
+
+exports.UIProvider = UIProvider;

package/dist/hooks/useContainer/ContainerProvider.cjs

@@ -0,0 +1,13 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+
+const ContainerContext = react.createContext(undefined);
+const ContainerProvider = ({ children, container, }) => {
+    return (jsxRuntime.jsx(ContainerContext.Provider, { value: container, children: children }));
+};
+
+exports.ContainerContext = ContainerContext;
+exports.ContainerProvider = ContainerProvider;

package/dist/hooks/useContainer/index.cjs

@@ -0,0 +1,12 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var ContainerProvider = require('./ContainerProvider.cjs');
+
+const useContainer = () => {
+    const containerContext = react.useContext(ContainerProvider.ContainerContext);
+    return containerContext;
+};
+
+exports.useContainer = useContainer;

package/dist/hooks/useDialog/index.cjs

@@ -0,0 +1,34 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var utils = require('@kimdw-rtk/utils');
+var index = require('../../components/Alert/index.cjs');
+var index$1 = require('../../components/Confirm/index.cjs');
+
+const useDialog = () => {
+    const { push } = utils.useOverlay();
+    const dialogRef = react.useRef(null);
+    const alert = react.useCallback((message) => {
+        return new Promise((resolve) => {
+            push(jsxRuntime.jsx(index.Alert, { children: message }), { onClose: () => resolve(true) });
+        });
+    }, [push]);
+    const confirm = react.useCallback((message) => {
+        return new Promise((resolve) => {
+            const handleConfirm = () => {
+                resolve(true);
+                dialogRef.current?.close();
+            };
+            const handleCancle = () => {
+                resolve(false);
+                dialogRef.current?.close();
+            };
+            push(jsxRuntime.jsx(index$1.Confirm, { ref: dialogRef, onCancle: handleCancle, onConfirm: handleConfirm, children: message }), { onClose: () => resolve(false) });
+        });
+    }, [push]);
+    return react.useMemo(() => ({ alert, confirm }), [alert, confirm]);
+};
+
+exports.useDialog = useDialog;

package/dist/hooks/useMouseScroll/index.cjs

@@ -0,0 +1,52 @@
+"use client";
+'use strict';
+
+var react = require('react');
+
+/**
+ * 마우스를 사용하는 환경에서도 드래그로 가로 스크롤을 할 수 있게 만드는 hook
+ */
+const useMouseScroll = (ref) => {
+    react.useEffect(() => {
+        const element = ref.current;
+        let isDown = false, startX = 0, startLeft = 0;
+        if (element === null) {
+            return;
+        }
+        const handleMouseDown = (e) => {
+            if (!element.contains(e.target)) {
+                return;
+            }
+            isDown = true;
+            startLeft = element.scrollLeft;
+            startX = e.x;
+        };
+        const handleMouseMove = (e) => {
+            if (!isDown) {
+                return;
+            }
+            element.scrollLeft = startLeft + startX - e.x;
+        };
+        const handleMouseUp = () => {
+            isDown = false;
+        };
+        const handleWheel = (e) => {
+            element.scrollTo({
+                left: element.scrollLeft + e.deltaY,
+                behavior: 'smooth',
+            });
+        };
+        window.addEventListener('mousedown', handleMouseDown);
+        window.addEventListener('mousemove', handleMouseMove);
+        window.addEventListener('mouseup', handleMouseUp);
+        element.addEventListener('wheel', handleWheel);
+        return () => {
+            window.removeEventListener('mousedown', handleMouseDown);
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+            element.removeEventListener('wheel', handleWheel);
+        };
+    }, [ref]);
+};
+
+exports.useMouseScroll = useMouseScroll;