@kimdw-rtk/ui 0.0.20 → 0.0.21

package/dist/components/Toast/index.js

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

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

@@ -0,0 +1,10 @@
+export declare const typography: import("@vanilla-extract/recipes").RuntimeFn<{
+    isEllipsis: {
+        true: {
+            overflow: "hidden";
+            whiteSpace: "nowrap";
+            textOverflow: "ellipsis";
+        };
+    };
+}>;
+//# sourceMappingURL=Typography.css.d.ts.map

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

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

package/dist/components/Typography/Typography.css.js

@@ -0,0 +1,18 @@
+import { recipeWithLayer } from '../../utils/styleUtils.css.js';
+
+const typography = recipeWithLayer({
+    base: {
+        margin: '0',
+    },
+    variants: {
+        isEllipsis: {
+            true: {
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+            },
+        },
+    },
+});
+
+export { typography };

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

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

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

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

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

@@ -0,0 +1,14 @@
+import { type SprinklesProps } from '@/styles';
+import { type UIComponent } from '@/types';
+import * as s from './Typography.css';
+type TypographyElement = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
+type TypographyProps<T extends TypographyElement = TypographyElement> = Omit<UIComponent<T, typeof s.typography> & {
+    as?: T;
+    color?: SprinklesProps['color'];
+    fontSize?: SprinklesProps['fontSize'];
+    fontWeight?: SprinklesProps['fontWeight'];
+    lineHeight?: SprinklesProps['lineHeight'];
+}, 'ref'>;
+export declare const Typography: import("react").ForwardRefExoticComponent<TypographyProps<TypographyElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+export { s as typographyCss };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Typography/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,UAAU,CAAC;AAC1D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,kBAAkB,CAAC;AAEtC,KAAK,iBAAiB,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;AAEhF,KAAK,eAAe,CAAC,CAAC,SAAS,iBAAiB,GAAG,iBAAiB,IAAI,IAAI,CAC1E,WAAW,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,UAAU,CAAC,GAAG;IACpC,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACtC,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;CAC3C,EACD,KAAK,CACN,CAAC;AAEF,eAAO,MAAM,UAAU,qIA+BtB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,aAAa,EAAE,CAAC"}

package/dist/components/Typography/index.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 { typography } from './Typography.css.js';
+import * as Typography_css from './Typography.css.js';
+export { Typography_css as typographyCss };
+import { sprinkles } from '../../styles/sprinkles.css.js';
+
+const Typography = forwardRef(({ children, as: Component = 'p', className, color = 'foreground', fontSize = 'md', fontWeight = 'normal', lineHeight, isEllipsis = false, sx, ...props }, ref) => {
+    return (jsxRuntimeExports.jsx(Component, { ref: ref, className: clsx(typography({ isEllipsis }), sprinkles({ color, fontSize, fontWeight, lineHeight }), sx && sprinkles(sx), className), ...props, children: children }));
+});
+Typography.displayName = 'Typography';
+
+export { Typography };

package/dist/components/index.d.ts

@@ -0,0 +1,19 @@
+export * from './Accordion';
+export * from './Alert';
+export * from './Box';
+export * from './Button';
+export * from './Card';
+export * from './Chip';
+export * from './Confirm';
+export * from './Dialog';
+export * from './Navigation';
+export * from './Range';
+export * from './ScrollArea';
+export * from './Select';
+export * from './Skeleton';
+export * from './Table';
+export * from './Tabs';
+export * from './TextField';
+export * from './Toast';
+export * from './Typography';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}

package/dist/contexts/UIProvider.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+import { type OverlayOption } from '@kimdw-rtk/utils';
+interface UIProviderProps {
+    children: ReactNode;
+    overlayUnmountOn?: OverlayOption['unmountOn'];
+}
+export declare const UIProvider: ({ children, overlayUnmountOn, }: UIProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=UIProvider.d.ts.map

package/dist/contexts/UIProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIProvider.d.ts","sourceRoot":"","sources":["../../src/contexts/UIProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAmB,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMvE,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,gBAAgB,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;CAC/C;AAED,eAAO,MAAM,UAAU,GAAI,iCAGxB,eAAe,4CAWjB,CAAC"}

package/dist/contexts/UIProvider.js

@@ -0,0 +1,10 @@
+import jsxRuntimeExports from '../_virtual/jsx-runtime.js';
+import { OverlayProvider } from '@kimdw-rtk/utils';
+import * as overlay_css from '../styles/overlay.css.js';
+import { ToastProvider } from '../hooks/useToast/ToastProvider.js';
+
+const UIProvider = ({ children, overlayUnmountOn = 'transitionEnd', }) => {
+    return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(OverlayProvider, { className: { ...overlay_css }, unmountOn: overlayUnmountOn, children: jsxRuntimeExports.jsx(ToastProvider, { children: children }) }) }));
+};
+
+export { UIProvider };

package/dist/contexts/index.d.ts

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

package/dist/contexts/index.d.ts.map

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

package/dist/hooks/index.d.ts

@@ -0,0 +1,6 @@
+export * from './useDialog';
+export * from './usePointerSlider';
+export * from './useRipple';
+export * from './useToast';
+export * from './useToast/ToastProvider';
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,0BAA0B,CAAC"}

package/dist/hooks/useDialog/index.d.ts

@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+export declare const useDialog: () => {
+    alert: (message: ReactNode) => Promise<unknown>;
+    confirm: (message: ReactNode) => Promise<boolean>;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/useDialog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useDialog/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAgC,MAAM,OAAO,CAAC;AAMrE,eAAO,MAAM,SAAS;qBAKR,SAAS;uBAST,SAAS,KAAG,OAAO,CAAC,OAAO,CAAC;CA4BzC,CAAC"}

package/dist/hooks/useDialog/index.js

@@ -0,0 +1,31 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { useRef, useCallback, useMemo } from 'react';
+import { useOverlay } from '@kimdw-rtk/utils';
+import { Alert } from '../../components/Alert/index.js';
+import { Confirm } from '../../components/Confirm/index.js';
+
+const useDialog = () => {
+    const { push } = useOverlay();
+    const dialogRef = useRef(null);
+    const alert = useCallback((message) => {
+        return new Promise((resolve) => {
+            push(jsxRuntimeExports.jsx(Alert, { children: message }), { onClose: () => resolve(true) });
+        });
+    }, [push]);
+    const confirm = useCallback((message) => {
+        return new Promise((resolve) => {
+            const handleConfirm = () => {
+                resolve(true);
+                dialogRef.current?.close();
+            };
+            const handleCancle = () => {
+                resolve(false);
+                dialogRef.current?.close();
+            };
+            push(jsxRuntimeExports.jsx(Confirm, { ref: dialogRef, onConfirm: handleConfirm, onCancle: handleCancle, children: message }), { onClose: () => resolve(false) });
+        });
+    }, [push]);
+    return useMemo(() => ({ alert, confirm }), [alert, confirm]);
+};
+
+export { useDialog };

package/dist/hooks/useDialog/useDialog.spec.d.ts

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

package/dist/hooks/useDialog/useDialog.spec.d.ts.map

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

package/dist/hooks/useMouseScroll/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 마우스를 사용하는 환경에서도 드래그로 가로 스크롤을 할 수 있게 만드는 hook
+ */
+export declare const useMouseScroll: <T extends React.RefObject<HTMLElement | null>>(ref: T) => void;
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/useMouseScroll/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useMouseScroll/index.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC1E,KAAK,CAAC,KACL,IAqDF,CAAC"}

package/dist/hooks/useMouseScroll/index.js

@@ -0,0 +1,49 @@
+import { useEffect } from 'react';
+
+/**
+ * 마우스를 사용하는 환경에서도 드래그로 가로 스크롤을 할 수 있게 만드는 hook
+ */
+const useMouseScroll = (ref) => {
+    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]);
+};
+
+export { useMouseScroll };

package/dist/hooks/usePointerSlider/index.d.ts

@@ -0,0 +1,6 @@
+export declare const usePointerSlider: <T extends React.RefObject<HTMLElement | null>>(ref: T, { min, max, defaultValue, }: {
+    min: number;
+    max: number;
+    defaultValue: number;
+}) => number;
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/usePointerSlider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePointerSlider/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC5E,KAAK,CAAC,EACN,6BAIG;IACD,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;CACtB,KACA,MA+DF,CAAC"}

package/dist/hooks/usePointerSlider/index.js

@@ -0,0 +1,46 @@
+import { useState, useEffect } from 'react';
+
+const usePointerSlider = (ref, { min, max, defaultValue, }) => {
+    const [value, setValue] = useState(defaultValue);
+    useEffect(() => {
+        const element = ref.current;
+        let isDown = false, parentWidth = 0, parentX = 0;
+        if (element === null) {
+            return;
+        }
+        element.style.left = `${((value - min) / (max - min)) * 100}%`;
+        const handlePointerDown = (e) => {
+            element.setPointerCapture(e.pointerId);
+            isDown = true;
+            const boundingRect = element.parentElement?.getBoundingClientRect();
+            if (boundingRect === undefined) {
+                return;
+            }
+            parentWidth = boundingRect.width;
+            parentX = boundingRect.x;
+        };
+        const handlePointerMove = (e) => {
+            if (!isDown) {
+                return;
+            }
+            const currentValue = Math.min(max, Math.max(min, Math.round((e.clientX - parentX) / (parentWidth / (max - min))) + min));
+            element.style.left = `${((currentValue - min) / (max - min)) * 100}%`;
+            setValue(currentValue);
+        };
+        const handlePointerUp = (e) => {
+            element.releasePointerCapture(e.pointerId);
+            isDown = false;
+        };
+        element.addEventListener('pointerdown', handlePointerDown);
+        element.addEventListener('pointermove', handlePointerMove);
+        element.addEventListener('pointerup', handlePointerUp);
+        return () => {
+            element.removeEventListener('pointerdown', handlePointerDown);
+            element.removeEventListener('pointermove', handlePointerMove);
+            element.removeEventListener('pointerup', handlePointerUp);
+        };
+    }, [ref, max, min, value]);
+    return value;
+};
+
+export { usePointerSlider };

package/dist/hooks/useRipple/index.d.ts

@@ -0,0 +1,4 @@
+export declare const useRipple: <T extends HTMLElement>(ref?: React.Ref<T>) => {
+    ripple: import("react/jsx-runtime").JSX.Element;
+};
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/useRipple/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useRipple/index.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,WAAW,EAAE,MAAM,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;;CAiJlE,CAAC"}

package/dist/hooks/useRipple/index.js

@@ -0,0 +1,111 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { useRef, useEffect, useMemo } from 'react';
+import { ripple, colorVar } from './ripple.css.js';
+
+const useRipple = (ref) => {
+    const rippleRef = useRef(null);
+    useEffect(() => {
+        let element = null;
+        if (!ref) {
+            return;
+        }
+        if (typeof ref === 'function') {
+            ref(element);
+        }
+        else {
+            element = ref.current;
+        }
+        const ripple$1 = rippleRef.current;
+        let timer;
+        let isAnimationPending = false;
+        let isFadeIn = false, isMouseDown = false, isTransitionEnd = true;
+        if (!ripple$1 || !element) {
+            return;
+        }
+        const clearTimer = () => {
+            clearTimeout(timer);
+            isAnimationPending = false;
+        };
+        const runAnimation = (x, y) => {
+            const width = element.clientWidth / 2 + Math.abs(element.clientWidth / 2 - x), height = element.clientHeight / 2 + Math.abs(element.clientHeight / 2 - y);
+            const size = Math.round(Math.sqrt(width ** 2 + height ** 2) * 2);
+            ripple$1.style.width = `${size}px`;
+            ripple$1.style.height = `${size}px`;
+            ripple$1.style.left = `${x}px`;
+            ripple$1.style.top = `${y}px`;
+            ripple$1.style.boxShadow = `${colorVar} 0 0 ${size / 10}px ${size / 10}px`;
+            ripple$1.className = ripple({ animation: false });
+            ripple$1.className = ripple({ animation: true });
+            ripple$1.style.opacity = '1';
+            isAnimationPending = false;
+            isFadeIn = true;
+            isTransitionEnd = false;
+        };
+        const handleClick = (e) => {
+            if (!isAnimationPending) {
+                return;
+            }
+            if (element instanceof HTMLButtonElement && element.disabled) {
+                return;
+            }
+            clearTimer();
+            runAnimation(e.offsetX, e.offsetY);
+        };
+        const handlePointerDown = (e) => {
+            if (e.button !== 0 || !ripple$1 || !isTransitionEnd) {
+                return;
+            }
+            if (element instanceof HTMLButtonElement && element.disabled) {
+                return;
+            }
+            isMouseDown = true;
+            if (e.pointerType === 'mouse') {
+                runAnimation(e.offsetX, e.offsetY);
+                return;
+            }
+            clearTimer();
+            isAnimationPending = true;
+            timer = setTimeout(() => runAnimation(e.offsetX, e.offsetY), 100);
+        };
+        const handlePointerUp = () => {
+            if (!isMouseDown) {
+                return;
+            }
+            clearTimer();
+            if (!isFadeIn) {
+                ripple$1.style.opacity = '0';
+                isFadeIn = false;
+            }
+            isMouseDown = false;
+        };
+        const handleTransitionEnd = (e) => {
+            if (e.propertyName === 'opacity' && isFadeIn) {
+                if (!isMouseDown) {
+                    ripple$1.style.opacity = '0';
+                }
+                isFadeIn = false;
+                return;
+            }
+            if (e.propertyName === 'transform' && !isFadeIn) {
+                isTransitionEnd = true;
+            }
+        };
+        element.addEventListener('click', handleClick);
+        element.addEventListener('pointerdown', handlePointerDown);
+        element.addEventListener('pointerup', handlePointerUp);
+        element.addEventListener('pointerleave', handlePointerUp);
+        ripple$1.addEventListener('transitionend', handleTransitionEnd);
+        return () => {
+            element.removeEventListener('click', handleClick);
+            element.removeEventListener('pointerdown', handlePointerDown);
+            element.removeEventListener('pointerup', handlePointerUp);
+            element.removeEventListener('pointerleave', handlePointerUp);
+            ripple$1.removeEventListener('transitionend', handleTransitionEnd);
+        };
+    }, [ref, rippleRef]);
+    return useMemo(() => ({
+        ripple: (jsxRuntimeExports.jsx("div", { ref: rippleRef, className: ripple({ animation: false }) })),
+    }), [rippleRef]);
+};
+
+export { useRipple };

package/dist/hooks/useRipple/ripple.css.d.ts

@@ -0,0 +1,13 @@
+export declare const colorVar: `var(--${string})`;
+export declare const ripple: import("@vanilla-extract/recipes").RuntimeFn<{
+    animation: {
+        true: {
+            transition: "opacity 0.25s linear, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)";
+            transform: "translate(-50%, -50%) scale(1, 1)";
+        };
+        false: {
+            transform: "translate(-50%, -50%) scale(0.1, 0.1)";
+        };
+    };
+}>;
+//# sourceMappingURL=ripple.css.d.ts.map

package/dist/hooks/useRipple/ripple.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ripple.css.d.ts","sourceRoot":"","sources":["../../../src/hooks/useRipple/ripple.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,QAAQ,oBAAc,CAAC;AAEpC,eAAO,MAAM,MAAM;;;;;;;;;;EAgCjB,CAAC"}

package/dist/hooks/useRipple/ripple.css.js

@@ -0,0 +1,33 @@
+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 { recipe } from '../../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/vanilla-extract-recipes.esm.js';
+import { theme } from '../../themes/theme.css.js';
+
+const colorVar = createVar();
+const ripple = recipe({
+    base: {
+        position: 'absolute',
+        left: '0',
+        top: '0',
+        borderRadius: '50%',
+        backgroundColor: colorVar,
+        opacity: '0',
+        transformOrigin: 'center center',
+        pointerEvents: 'none',
+        vars: {
+            [colorVar]: `color-mix(in srgb, rgba(${theme.color.accent}, 0.2) 20%, rgba(${theme.color.foreground}, 0.2) 80%)`,
+        },
+    },
+    variants: {
+        animation: {
+            true: {
+                transition: 'opacity 0.25s linear, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
+                transform: 'translate(-50%, -50%) scale(1, 1)',
+            },
+            false: {
+                transform: 'translate(-50%, -50%) scale(0.1, 0.1)',
+            },
+        },
+    },
+});
+
+export { colorVar, ripple };

package/dist/hooks/useToast/ToastContainer.css.d.ts

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

package/dist/hooks/useToast/ToastContainer.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContainer.css.d.ts","sourceRoot":"","sources":["../../../src/hooks/useToast/ToastContainer.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,QASpB,CAAC"}

package/dist/hooks/useToast/ToastContainer.css.js

@@ -0,0 +1,13 @@
+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';
+
+const container = style({
+    display: 'flex',
+    alignItems: 'flex-end',
+    flexDirection: 'column-reverse',
+    position: 'fixed',
+    right: '1rem',
+    bottom: '1rem',
+    left: '1rem',
+});
+
+export { container };

package/dist/hooks/useToast/ToastContainer.d.ts

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

package/dist/hooks/useToast/ToastContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastContainer.d.ts","sourceRoot":"","sources":["../../../src/hooks/useToast/ToastContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,GAAI,cAAc,mBAAmB,4CAE/D,CAAC"}

package/dist/hooks/useToast/ToastContainer.js

@@ -0,0 +1,8 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { container } from './ToastContainer.css.js';
+
+const ToastContainer = ({ children }) => {
+    return jsxRuntimeExports.jsx("div", { className: container, children: children });
+};
+
+export { ToastContainer };

package/dist/hooks/useToast/ToastProvider.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentProps, type ReactNode } from 'react';
+import { Toast } from '@/components';
+export interface ToastData {
+    id: number;
+    color?: ComponentProps<typeof Toast>['color'];
+    message: string;
+    autoClose?: boolean;
+    duration?: number;
+    onClick?: (id: number) => void;
+}
+interface ToastContextType {
+    push: (data: Omit<ToastData, 'id'>) => number;
+    remove: (id: number) => void;
+}
+export declare const ToastContext: import("react").Context<ToastContextType | undefined>;
+interface ToastProviderProps {
+    children: ReactNode;
+    defaultDuration?: number;
+}
+export declare const ToastProvider: ({ children, defaultDuration, }: ToastProviderProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ToastProvider.d.ts.map

package/dist/hooks/useToast/ToastProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastProvider.d.ts","sourceRoot":"","sources":["../../../src/hooks/useToast/ToastProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAML,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAIrC,MAAM,WAAW,SAAS;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC;IAC9C,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAChC;AAED,UAAU,gBAAgB;IACxB,IAAI,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,KAAK,MAAM,CAAC;IAC9C,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9B;AAED,eAAO,MAAM,YAAY,uDAExB,CAAC;AAEF,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAID,eAAO,MAAM,aAAa,GAAI,gCAG3B,kBAAkB,4CAoFpB,CAAC"}

package/dist/hooks/useToast/ToastProvider.js

@@ -0,0 +1,49 @@
+import jsxRuntimeExports from '../../_virtual/jsx-runtime.js';
+import { createContext, useState, useRef, useCallback, useMemo } from 'react';
+import { TransitionGroup, CSSTransition } from '@kimdw-rtk/utils';
+import { ToastContainer } from './ToastContainer.js';
+import { Toast } from '../../components/Toast/index.js';
+
+const ToastContext = createContext(undefined);
+const DEFAULT_TOAST_DURATION = 5000;
+const ToastProvider = ({ children, defaultDuration = DEFAULT_TOAST_DURATION, }) => {
+    const [toasts, setToasts] = useState([]);
+    const idRef = useRef(0);
+    const remove = useCallback((id) => {
+        setToasts((prev) => prev.filter((toast) => toast.id !== id));
+    }, []);
+    const push = useCallback(({ color, message, autoClose = true, duration = defaultDuration, onClick, }) => {
+        const id = ++idRef.current;
+        setToasts((prev) => [
+            ...prev,
+            { id, color, message, autoClose, duration, onClick },
+        ]);
+        if (!autoClose) {
+            return id;
+        }
+        // autoClose가 true면, 일정 시간이 지난 후 toast 제거
+        setTimeout(() => {
+            remove(id);
+        }, duration);
+        return id;
+    }, [defaultDuration, remove]);
+    const handleToastClick = (toast) => {
+        // onClick 이벤트가 정의되어 있지 않으면 기본적으로 toast를 닫도록 한다.
+        if (toast.onClick === undefined) {
+            remove(toast.id);
+            return;
+        }
+        toast.onClick(toast.id);
+    };
+    return (jsxRuntimeExports.jsxs(ToastContext.Provider, { value: useMemo(() => ({ push, remove }), [push, remove]), children: [children, jsxRuntimeExports.jsx(ToastContainer, { children: jsxRuntimeExports.jsx(TransitionGroup, { children: toasts.map((toast) => (jsxRuntimeExports.jsx(CSSTransition, { as: "div", initial: {
+                            opacity: 0,
+                            transform: 'translateY(1rem)',
+                            height: '0',
+                        }, animate: {
+                            opacity: 1,
+                            transform: 'translateY(0)',
+                            height: '3.5rem',
+                        }, exit: { opacity: 0, height: '0' }, duration: 500, style: { display: 'flex', flexDirection: 'column-reverse' }, children: jsxRuntimeExports.jsx(Toast, { color: toast.color, duration: toast.autoClose ? toast.duration : 0, onClick: () => handleToastClick(toast), children: toast.message }) }, toast.id))) }) })] }));
+};
+
+export { ToastContext, ToastProvider };