@kimdw-rtk/ui 0.0.2 → 0.0.5

package/dist/hooks/useRipple/index.js

@@ -0,0 +1,111 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from 'react';
+import * as s from './ripple.css';
+export 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 = rippleRef.current;
+        let timer;
+        let isAnimationPending = false;
+        let isFadeIn = false, isMouseDown = false, isTransitionEnd = true;
+        if (!ripple || !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.style.width = `${size}px`;
+            ripple.style.height = `${size}px`;
+            ripple.style.left = `${x}px`;
+            ripple.style.top = `${y}px`;
+            ripple.style.boxShadow = `${s.colorVar} 0 0 ${size / 10}px ${size / 10}px`;
+            ripple.className = s.ripple({ animation: false });
+            //eslint-disable-next-line
+            ripple.offsetTop;
+            ripple.className = s.ripple({ animation: true });
+            ripple.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 || !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.style.opacity = '0';
+                isFadeIn = false;
+            }
+            isMouseDown = false;
+        };
+        const handleTransitionEnd = (e) => {
+            if (e.propertyName === 'opacity' && isFadeIn) {
+                if (!isMouseDown) {
+                    ripple.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.addEventListener('transitionend', handleTransitionEnd);
+        return () => {
+            element.removeEventListener('click', handleClick);
+            element.removeEventListener('pointerdown', handlePointerDown);
+            element.removeEventListener('pointerup', handlePointerUp);
+            element.removeEventListener('pointerleave', handlePointerUp);
+            ripple.removeEventListener('transitionend', handleTransitionEnd);
+        };
+    }, [ref, rippleRef]);
+    return useMemo(() => ({
+        ripple: (_jsx("div", { ref: rippleRef, className: s.ripple({ animation: false }) })),
+    }), [rippleRef]);
+};

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,30 @@
+import { createVar } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { theme } from '#themes';
+export const colorVar = createVar();
+export 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)',
+            },
+        },
+    },
+});

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

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,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as s from './ToastContainer.css';
+export const ToastContainer = ({ children }) => {
+    return _jsx("div", { className: s.container, children: children });
+};

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,aAAa,CAAC;AAIpC,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,47 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useMemo, useRef, useState, } from 'react';
+import { CSSTransition, TransitionGroup } from '@kimdw-rtk/utils';
+import { Toast } from '#components';
+import { ToastContainer } from './ToastContainer';
+export const ToastContext = createContext(undefined);
+const DEFAULT_TOAST_DURATION = 5000;
+export 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 (_jsxs(ToastContext.Provider, { value: useMemo(() => ({ push, remove }), [push, remove]), children: [children, _jsx(ToastContainer, { children: _jsx(TransitionGroup, { children: toasts.map((toast) => (_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: _jsx(Toast, { color: toast.color, duration: toast.autoClose ? toast.duration : 0, onClick: () => handleToastClick(toast), children: toast.message }) }, toast.id))) }) })] }));
+};

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

@@ -0,0 +1,5 @@
+export declare const useToast: () => {
+    push: (data: Omit<import("./ToastProvider").ToastData, "id">) => number;
+    remove: (id: number) => void;
+};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useToast/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,QAAQ;;;CAUpB,CAAC"}

package/dist/hooks/useToast/index.js

@@ -0,0 +1,10 @@
+import { useContext, useMemo } from 'react';
+import { ToastContext } from './ToastProvider';
+export const useToast = () => {
+    const toastContext = useContext(ToastContext);
+    if (!toastContext) {
+        throw new Error('useToast must be used within a ToastProvider');
+    }
+    const { push, remove } = toastContext;
+    return useMemo(() => ({ push, remove }), [push, remove]);
+};

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export * from './components';
+export * from './contexts';
+export * from './hooks';
+export * from './styles';
+export * from './styles/globalStyle.css';
+export * from './themes';
+export * from './types';
+export * from './utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,0BAA0B,CAAC;AACzC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,8 @@
+export * from './components';
+export * from './contexts';
+export * from './hooks';
+export * from './styles';
+export * from './styles/globalStyle.css';
+export * from './themes';
+export * from './types';
+export * from './utils';

package/dist/styles/globalStyle.css.d.ts

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

package/dist/styles/globalStyle.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"globalStyle.css.d.ts","sourceRoot":"","sources":["../../src/styles/globalStyle.css.ts"],"names":[],"mappings":""}

package/dist/styles/globalStyle.css.js

@@ -0,0 +1,26 @@
+import { assignVars, globalStyle } from '@vanilla-extract/css';
+import { darkThemeVars, lightThemeVars, theme } from '#themes';
+globalStyle('*', {
+    boxSizing: 'border-box',
+    overscrollBehavior: 'none',
+    WebkitTapHighlightColor: 'transparent',
+});
+globalStyle('.light', {
+    vars: assignVars(theme, lightThemeVars),
+});
+globalStyle('.dark', {
+    vars: assignVars(theme, darkThemeVars),
+});
+globalStyle('body', {
+    margin: '0',
+    backgroundColor: `rgb(${theme.color.background})`,
+    lineHeight: '1',
+    color: `rgb(${theme.color.foreground})`,
+});
+globalStyle('a', {
+    textDecoration: 'none',
+    color: 'inherit',
+});
+globalStyle('svg', {
+    lineHeight: '0',
+});

package/dist/styles/index.d.ts

@@ -0,0 +1,5 @@
+export * from './layers.css';
+export * from './sprinkles.css';
+export * from './globalStyle.css';
+export * from './sx';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC;AAClC,cAAc,MAAM,CAAC"}

package/dist/styles/index.js

@@ -0,0 +1,4 @@
+export * from './layers.css';
+export * from './sprinkles.css';
+export * from './globalStyle.css';
+export * from './sx';

package/dist/styles/layers.css.d.ts

@@ -0,0 +1,3 @@
+export declare const componentsLayer: string;
+export declare const sprinklesLayer: string;
+//# sourceMappingURL=layers.css.d.ts.map

package/dist/styles/layers.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layers.css.d.ts","sourceRoot":"","sources":["../../src/styles/layers.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,QAA4B,CAAC;AACzD,eAAO,MAAM,cAAc,QAA2B,CAAC"}

package/dist/styles/layers.css.js

@@ -0,0 +1,3 @@
+import { globalLayer } from '@vanilla-extract/css';
+export const componentsLayer = globalLayer('components');
+export const sprinklesLayer = globalLayer('utilities');

package/dist/styles/overlay.css.d.ts

@@ -0,0 +1,4 @@
+export declare const enter: string;
+export declare const base: string;
+export declare const exit: string;
+//# sourceMappingURL=overlay.css.d.ts.map

package/dist/styles/overlay.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay.css.d.ts","sourceRoot":"","sources":["../../src/styles/overlay.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,QAGhB,CAAC;AAEH,eAAO,MAAM,IAAI,QAWf,CAAC;AAEH,eAAO,MAAM,IAAI,QAKf,CAAC"}

package/dist/styles/overlay.css.js

@@ -0,0 +1,31 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+export const enter = style({
+    opacity: '1 !important',
+    transition: 'all 0.2s ease',
+});
+export const base = style({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'fixed',
+    inset: '0',
+    zIndex: '100',
+    backgroundColor: '#00000080',
+    opacity: '0',
+});
+export const exit = style({
+    opacity: '0 !important',
+    transition: 'all 0.2s ease',
+    pointerEvents: 'none',
+});
+globalStyle(`${enter} > div`, {
+    transform: 'scale(1) !important',
+    transition: 'all 0.2s ease',
+});
+globalStyle(`${base} > div`, {
+    transform: 'scale(0.9)',
+});
+globalStyle(`${exit} > div`, {
+    transform: 'scale(0.9) !important',
+    transition: 'all 0.2s ease',
+});