@kimdw-rtk/ui 0.0.0 → 0.0.3

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

@@ -0,0 +1,49 @@
+export declare const textField: 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: {
+            borderRadius: `var(--${string})`;
+            fontSize: "0.875em";
+        };
+        md: {
+            borderRadius: `var(--${string})`;
+            fontSize: "1em";
+        };
+        lg: {
+            borderRadius: `var(--${string})`;
+            fontSize: "1.125em";
+        };
+    };
+}>;
+//# sourceMappingURL=TextField.css.d.ts.map

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

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

package/dist/components/TextField/TextField.css.js

@@ -0,0 +1,59 @@
+import { createVar } from '@vanilla-extract/css';
+import { recipeWithLayer, styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+import { semanticColor } from '#tokens';
+import { SCALE_COLOR } from '../../tokens/scale/color';
+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][500],
+        },
+    }),
+}), {});
+export const textField = recipeWithLayer({
+    base: {
+        padding: '0.75em 0.5em',
+        border: `1px solid`,
+        borderColor: ` rgb(${theme.color.border})`,
+        backgroundColor: `rgb(${theme.color.background})`,
+        color: `rgb(${theme.color.foreground})`,
+        transition: 'border-color 0.15s ease, color 0.15s ease',
+        outline: 'none',
+        ':focus': {
+            borderColor: `rgb(${backgroundVar})`,
+        },
+        ':disabled': {
+            color: `rgb(${theme.color['muted-foreground']})`,
+        },
+    },
+    variants: {
+        color: {
+            ...semanticColors,
+            ...scaleColors,
+        },
+        size: {
+            sm: {
+                borderRadius: theme.borderRadius,
+                fontSize: '0.875em',
+            },
+            md: {
+                borderRadius: theme.borderRadius,
+                fontSize: '1em',
+            },
+            lg: {
+                borderRadius: theme.borderRadius,
+                fontSize: '1.125em',
+            },
+        },
+    },
+});

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

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

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

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

package/{src/components/TextField/TextField.spec.tsx → dist/components/TextField/TextField.spec.js}

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

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

@@ -0,0 +1,8 @@
+import type { UIComponent } from '#types';
+import * as s from './TextField.css';
+interface TextFieldProps extends UIComponent<'input', typeof s.textField> {
+    type?: React.HTMLInputTypeAttribute;
+}
+export declare const TextField: import("react").ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+export { s as textFieldCss };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,iBAAiB,CAAC;AAErC,UAAU,cAAe,SAAQ,WAAW,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,SAAS,CAAC;IACvE,IAAI,CAAC,EAAE,KAAK,CAAC,sBAAsB,CAAC;CACrC;AAED,eAAO,MAAM,SAAS,0HAqBrB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,YAAY,EAAE,CAAC"}

package/dist/components/TextField/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { clsx } from 'clsx';
+import { sx } from '#styles';
+import * as s from './TextField.css';
+export const TextField = forwardRef(({ className, type = 'text', size = 'md', color = 'primary', sx: propSx, ...props }, ref) => {
+    return (_jsx("input", { ref: ref, type: type, className: clsx(className, s.textField({ size, color }), sx(propSx)), ...props }));
+});
+TextField.displayName = 'TextField';
+export { s as textFieldCss };

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

@@ -0,0 +1,26 @@
+export declare const progress: import("@vanilla-extract/recipes").RuntimeFn<{
+    animation: {
+        true: {
+            animationName: string;
+            animationTimingFunction: "linear";
+            animationIterationCount: "1";
+            animationFillMode: "forwards";
+        };
+        false: {
+            display: "none";
+        };
+    };
+}>;
+export declare const toast: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: {
+        primary: string;
+        secondary: string;
+        muted: string;
+        accent: string;
+        card: string;
+        danger: string;
+        warning: string;
+        success: string;
+    };
+}>;
+//# sourceMappingURL=Toast.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.css.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/Toast.css.ts"],"names":[],"mappings":"AA+BA,eAAO,MAAM,QAAQ;;;;;;;;;;;;EAyBnB,CAAC;AAEH,eAAO,MAAM,KAAK;;;;;;;;;;;EAoBhB,CAAC"}

package/dist/components/Toast/Toast.css.js

@@ -0,0 +1,62 @@
+import { createVar, keyframes } from '@vanilla-extract/css';
+import { recipeWithLayer, styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+import { semanticColor } from '#tokens';
+const colorVar = createVar();
+const foregroundVar = createVar();
+const semanticColors = semanticColor.reduce((prev, color) => ({
+    ...prev,
+    [color]: styleWithLayer({
+        vars: {
+            [colorVar]: theme.color[color],
+            [foregroundVar]: theme.color[`${color}-foreground`],
+        },
+    }),
+}), {});
+const fill = keyframes({
+    '0%': {
+        transform: 'scaleX(0)',
+    },
+    '100%': {
+        transform: 'scaleX(1)',
+    },
+});
+export const progress = recipeWithLayer({
+    base: {
+        position: 'absolute',
+        inset: '0',
+        width: '100%',
+        backgroundColor: `rgba(${foregroundVar}, 0.25)`,
+        transformOrigin: '0 0',
+    },
+    variants: {
+        animation: {
+            true: {
+                animationName: fill,
+                animationTimingFunction: 'linear',
+                animationIterationCount: '1',
+                animationFillMode: 'forwards',
+            },
+            false: {
+                display: 'none',
+            },
+        },
+    },
+});
+export const toast = recipeWithLayer({
+    base: {
+        position: 'relative',
+        overflow: 'hidden',
+        padding: '0.875em',
+        backgroundColor: `rgb(${colorVar})`,
+        color: `rgb(${foregroundVar})`,
+        whiteSpace: 'nowrap',
+        wordBreak: 'break-all',
+        cursor: 'pointer',
+    },
+    variants: {
+        color: {
+            ...semanticColors,
+        },
+    },
+});

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

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

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

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

package/{src/components/Toast/Toast.spec.tsx → dist/components/Toast/Toast.spec.js}

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

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

@@ -0,0 +1,8 @@
+import type { UIComponent } from '#types';
+import * as s from './Toast.css';
+interface ToastProps extends UIComponent<'div', typeof s.toast> {
+    duration?: number;
+}
+export declare const Toast: import("react").ForwardRefExoticComponent<Omit<ToastProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export { s as toastCss };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Toast/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,aAAa,CAAC;AAEjC,UAAU,UAAW,SAAQ,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,KAAK,CAAC;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,KAAK,oHA8BjB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,QAAQ,EAAE,CAAC"}

package/dist/components/Toast/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { Box } from '#components';
+import { sx } from '#styles';
+import * as s from './Toast.css';
+export const Toast = forwardRef(({ children, color = 'accent', className, duration = 0, sx: propSx, ...props }, ref) => {
+    return (_jsxs(Box, { ref: ref, boxShadow: "accent-sm", rounded: true, className: clsx(s.toast({ color }), className, sx(propSx)), ...props, children: [_jsx("div", { className: s.progress({ animation: duration !== 0 }), style: {
+                    animationDuration: duration > 0 ? `${duration}ms` : undefined,
+                } }), _jsx("span", { style: { position: 'relative' }, children: children })] }));
+});
+Toast.displayName = 'Toast';
+export { s as toastCss };

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,15 @@
+import { recipeWithLayer } from '#styleUtils';
+export const typography = recipeWithLayer({
+    base: {
+        margin: '0',
+    },
+    variants: {
+        isEllipsis: {
+            true: {
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+                textOverflow: 'ellipsis',
+            },
+        },
+    },
+});

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/Typography.spec.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cleanup, render, screen } from '@testing-library/react';
+import { Typography } from '#components';
+import { uiTest } from '../../tests/uiTest';
+describe('Typogrphy 컴포넌트', () => {
+    uiTest(Typography, 'Typography');
+    test('기본적으로 p태그로 출력한다.', () => {
+        render(_jsx(Typography, { children: "test" }));
+        expect(screen.getByText('test').tagName.toLowerCase()).toBe('p');
+    });
+    test('as에 전달된 알맞은 태그로 출력한다.', () => {
+        const tags = [
+            'p',
+            'h1',
+            'h2',
+            'h3',
+            'h4',
+            'h5',
+            'h6',
+            'span',
+        ];
+        for (const tag of tags) {
+            cleanup();
+            render(_jsx(Typography, { as: tag, children: "test" }));
+            expect(screen.getByText('test').tagName.toLowerCase()).toBe(tag);
+        }
+    });
+});

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,SAAS,CAAC;AACzD,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,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,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { sprinkles } from '#styles';
+import {} from '#types';
+import * as s from './Typography.css';
+export const Typography = forwardRef(({ children, as: Component = 'p', className, color = 'foreground', fontSize = 'md', fontWeight = 'normal', lineHeight, isEllipsis = false, sx, ...props }, ref) => {
+    return (_jsx(Component, { ref: ref, className: clsx(s.typography({ isEllipsis }), sprinkles({ color, fontSize, fontWeight, lineHeight }), sx && sprinkles(sx), className), ...props, children: children }));
+});
+Typography.displayName = 'Typography';
+export { s as typographyCss };

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/{src/components/index.ts → dist/components/index.js}

@@ -1,18 +1,18 @@
-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';
+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';

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,8 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { OverlayProvider } from '@kimdw-rtk/utils';
+import { ToastProvider } from '#hooks';
+import * as overlayStyle from '../styles/overlay.css';
+export const UIProvider = ({ children, overlayUnmountOn = 'transitionEnd', }) => {
+    return (_jsx(_Fragment, { children: _jsx(OverlayProvider, { className: { ...overlayStyle }, unmountOn: overlayUnmountOn, children: _jsx(ToastProvider, { children: children }) }) }));
+};

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/{src/contexts/index.ts → dist/contexts/index.js}

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

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/{src/hooks/index.ts → dist/hooks/index.js}

@@ -1,5 +1,5 @@
-export * from './useDialog';
-export * from './usePointerSlider';
-export * from './useRipple';
-export * from './useToast';
-export * from './useToast/ToastProvider';
+export * from './useDialog';
+export * from './usePointerSlider';
+export * from './useRipple';
+export * from './useToast';
+export * from './useToast/ToastProvider';

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,28 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef } from 'react';
+import { useOverlay } from '@kimdw-rtk/utils';
+import { Alert, Confirm } from '#components';
+export const useDialog = () => {
+    const { push } = useOverlay();
+    const dialogRef = useRef(null);
+    const alert = useCallback((message) => {
+        return new Promise((resolve) => {
+            push(_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(_jsx(Confirm, { ref: dialogRef, onConfirm: handleConfirm, onCancle: handleCancle, children: message }), { onClose: () => resolve(false) });
+        });
+    }, [push]);
+    return useMemo(() => ({ alert, confirm }), [alert, confirm]);
+};

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/useDialog/useDialog.spec.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { act, render, screen, waitFor } from '@testing-library/react';
+import { UIProvider } from '#contexts';
+import { useDialog } from '#hooks';
+describe('useDialog 테스트', () => {
+    const mockFn = jest.fn();
+    beforeEach(() => {
+        const TestComponent = () => {
+            const { alert, confirm } = useDialog();
+            const handleConfirmClick = async () => {
+                mockFn(await confirm('confirm'));
+            };
+            return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => alert('alert'), children: "alert click" }), _jsx("button", { onClick: handleConfirmClick, children: "confirm click" })] }));
+        };
+        render(_jsx(UIProvider, { overlayUnmountOn: 'exit', children: _jsx(TestComponent, {}) }));
+    });
+    it('확인 버튼을 누르면 alert을 닫을 수 있다.', async () => {
+        const alertButton = screen.getByRole('button', { name: 'alert click' });
+        expect(screen.queryByText('alert')).not.toBeInTheDocument();
+        act(() => {
+            alertButton.click();
+        });
+        expect(screen.getByText('alert')).toBeInTheDocument();
+        const okButton = screen.getByRole('button', { name: '확인' });
+        act(() => {
+            okButton.click();
+        });
+        expect(screen.queryByText('alert')).not.toBeInTheDocument();
+    });
+    it.skip('confirm의 확인 버튼을 누르면 true, 취소 버튼을 누르면 false를 반환한다.', async () => {
+        const confirmButton = screen.getByRole('button', { name: 'confirm click' });
+        act(() => {
+            confirmButton.click();
+        });
+        const okButton = screen.getByRole('button', { name: '확인' });
+        act(() => {
+            okButton.click();
+        });
+        await waitFor(() => {
+            expect(mockFn.mock.calls[0][0]).toBe(true);
+        });
+        act(() => {
+            confirmButton.click();
+        });
+        const cancelButton = screen.getByRole('button', { name: '취소' });
+        act(() => {
+            cancelButton.click();
+        });
+        await waitFor(() => {
+            expect(mockFn.mock.calls[1][0]).toBe(false);
+        });
+    });
+});

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"}