ddingdong-design-system 0.2.0 → 0.2.2

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './shared/index'
+export {}

package/dist/shared/constants/motion.d.ts

@@ -0,0 +1,113 @@
+export declare const MODAL_MOTION: {
+    initial: {
+        opacity: number;
+    };
+    animate: {
+        opacity: number;
+    };
+    exit: {
+        opacity: number;
+    };
+    transition: {
+        duration: number;
+    };
+};
+export declare const FADE_IN_ANIMATION: {
+    initial: {
+        opacity: number;
+    };
+    animate: {
+        opacity: number;
+    };
+    exit: {
+        opacity: number;
+    };
+};
+export declare const SLIDE_IN_ANIMATION: {
+    initial: {
+        translateX: string;
+    };
+    animate: {
+        translateX: number;
+    };
+    exit: {
+        translateX: string;
+    };
+    transition: {
+        type: string;
+        damping: number;
+    };
+};
+export declare const TOOLTIP_MOTION: {
+    SPRING: {
+        initial: {
+            opacity: number;
+            scale: number;
+            y: number;
+        };
+        animate: {
+            opacity: number;
+            scale: number;
+            y: number;
+            transition: {
+                type: string;
+                stiffness: number;
+                damping: number;
+                mass: number;
+            };
+        };
+        exit: {
+            opacity: number;
+            scale: number;
+            y: number;
+            transition: {
+                duration: number;
+            };
+        };
+    };
+    POP: {
+        initial: {
+            opacity: number;
+            scale: number;
+        };
+        animate: {
+            opacity: number;
+            scale: number;
+            transition: {
+                type: string;
+                stiffness: number;
+                damping: number;
+                mass: number;
+            };
+        };
+        exit: {
+            opacity: number;
+            scale: number;
+            transition: {
+                duration: number;
+            };
+        };
+    };
+    SMOOTH: {
+        initial: {
+            opacity: number;
+            y: number;
+        };
+        animate: {
+            opacity: number;
+            y: number;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+        exit: {
+            opacity: number;
+            y: number;
+            transition: {
+                duration: number;
+                ease: string;
+            };
+        };
+    };
+};

package/dist/shared/hooks/useCarouselController.d.ts

@@ -0,0 +1,11 @@
+export declare const useCarouselController: (itemsPerView?: number) => {
+    currentIndex: number;
+    totalItems: number;
+    goToNext: () => void;
+    goToPrevious: () => void;
+    canGoNext: boolean;
+    canGoPrevious: boolean;
+    scrollContainerRef: import('react').RefObject<HTMLDivElement | null>;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+};

package/dist/shared/hooks/usePortal.d.ts

@@ -0,0 +1,5 @@
+export declare const usePortal: () => {
+    isOpen: boolean;
+    openModal: () => void;
+    closeModal: () => void;
+};

package/dist/shared/hooks/useTooltip.d.ts

@@ -0,0 +1,10 @@
+export declare const useTooltip: () => {
+    open: boolean;
+    ref: import('react').RefObject<HTMLDivElement | null>;
+    show: () => void;
+    hide: () => void;
+    position: {
+        top: number;
+        left: number;
+    } | null;
+};

package/dist/shared/index.d.ts

@@ -0,0 +1,27 @@
+export { Accordion } from './ui/Accordion';
+export { Avatar } from './ui/Avatar/Avatar';
+export { Badge } from './ui/Badge';
+export { Button } from './ui/Button';
+export { Card } from './ui/Card';
+export { DoubleButton } from './ui/DoubleButton';
+export { Drawer } from './ui/Drawer';
+export { FileUpload } from './ui/FileUpload/FileUpload';
+export { Flex } from './ui/Flex';
+export { Icon } from './ui/Icon';
+export { IconButton } from './ui/IconButton';
+export { Input } from './ui/Input/Input';
+export { Modal } from './ui/Modal';
+export { NavBack } from './ui/NavBack';
+export { Pagination } from './ui/Pagination';
+export { Portal } from './ui/Portal';
+export { Select } from './ui/Select';
+export { Skeleton } from './ui/Skeleton';
+export { Switch } from './ui/Switch';
+export { Tabs } from './ui/Tabs';
+export { TextArea } from './ui/TextArea';
+export { Tooltip } from './ui/Tooltip';
+export * from './ui/Typography';
+export * from './ui/assets';
+export * from './lib/colors';
+export * from './lib/core';
+export * from './hooks/usePortal';

package/dist/shared/lib/colors.d.ts

@@ -0,0 +1,46 @@
+export declare const colors: {
+    primary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+    };
+    red: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+    };
+    green: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+    };
+    orange: string;
+    yellow: string;
+    purple: string;
+    white: string;
+    black: string;
+};
+export declare const COLORS: {
+    primary: string;
+    gray: string;
+    red: string;
+    green: string;
+    black: string;
+};
+export type Colors = keyof typeof colors;
+export type IconColor = keyof typeof COLORS;
+export type SwitchColor = keyof typeof COLORS;
+export declare const colorNames: Colors[];

package/dist/shared/lib/core.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare const cn: (...inputs: ClassValue[]) => string;

package/dist/shared/ui/Accordion/Accordion.d.ts

@@ -0,0 +1,29 @@
+import * as AccordionPrimitives from '@radix-ui/react-accordion';
+type Prop = {
+    /**
+     * The content of the Accordion, typically AccordionItem components.
+     */
+    children: React.ReactNode;
+} & (AccordionPrimitives.AccordionSingleProps | AccordionPrimitives.AccordionMultipleProps);
+export declare function AccordionRoot({ children, ...props }: Prop): import("react/jsx-runtime").JSX.Element;
+type ItemProps = {
+    /**
+     * The trigger element that toggles the visibility of the content.
+     */
+    trigger: React.ReactNode;
+    /**
+     * The content that is shown or hidden when the trigger is clicked.
+     */
+    children: React.ReactNode;
+    /**
+     * arrow icon to display alongside the trigger.
+     * @default true
+     */
+    isArrow?: boolean;
+    /**
+     * additional class names to apply to the AccordionItem.
+     */
+    className?: string;
+} & AccordionPrimitives.AccordionItemProps;
+export declare function AccordionItem({ trigger, className, children, isArrow, ...props }: ItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { AccordionRoot as Accordion } from './Accordion';
+export { AccordionItem as Item } from './Accordion';

package/dist/shared/ui/Avatar/Avatar.d.ts

@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+type AvatarProps = {
+    /**
+     * Size of the avatar.
+     * @default 'lg'
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * URL of the avatar image.
+     */
+    src: string;
+    /**
+     * Alternative text for the avatar image.
+     */
+    alt: string;
+    /**
+     * CSS class name for the avatar container.
+     */
+    className?: string;
+} & Omit<ComponentProps<'img'>, 'src' | 'alt'>;
+export declare function Avatar({ size, src, alt, className, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/Avatar/index.d.ts

@@ -0,0 +1 @@
+export { Avatar } from './Avatar';

package/dist/shared/ui/Badge/Badge.d.ts

@@ -0,0 +1,13 @@
+type Props = {
+    /**
+     * Color type representing the status.
+     * @default 'neutral'
+     */
+    variant: 'positive' | 'negative' | 'neutral';
+    /**
+     * The text content to be displayed.
+     */
+    text: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare function Badge({ variant, text, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/Badge/index.d.ts

@@ -0,0 +1 @@
+export { Badge } from './Badge';

package/dist/shared/ui/Button/Button.d.ts

@@ -0,0 +1,40 @@
+type VariantColorMap = {
+    primary: 'red' | 'blue';
+    secondary: 'red' | 'blue' | 'green';
+    tertiary: never;
+};
+export type ButtonVariant = keyof VariantColorMap;
+type ButtonColor<V extends ButtonVariant> = VariantColorMap[V];
+export type Props<V extends keyof VariantColorMap> = {
+    /**
+     * variant of the Button.
+     */
+    variant: V;
+    /**
+     * color of the Button.
+     * @default 'blue'
+     */
+    color?: ButtonColor<V>;
+    /**
+     * size of the Button.
+     * @default 'medium'
+     */
+    size?: 'sm' | 'md' | 'lg' | 'full';
+    /**
+     * loading state of the Button
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * border-radius option of the Button
+     * @default false
+     */
+    rounded?: boolean;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+export declare const ButtonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "tertiary" | null | undefined;
+    size?: "sm" | "md" | "lg" | "full" | null | undefined;
+    color?: "red" | "green" | "blue" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare function Button<V extends ButtonVariant>({ children, variant, color, size, rounded, isLoading, disabled, className, ...props }: Props<V>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/Button/index.d.ts

@@ -0,0 +1 @@
+export { Button } from './Button';

package/dist/shared/ui/Card/Card.d.ts

@@ -0,0 +1,13 @@
+import { ComponentProps, PropsWithChildren, ElementType } from 'react';
+export type Props<T extends ElementType> = {
+    /**
+     * The HTML element or React component to render as the root element.
+     * @defaults 'div'.
+     */
+    as?: T;
+    /**
+     * Additional CSS classNames to be applied to the Card.
+     */
+    className?: string;
+} & PropsWithChildren<ComponentProps<T>>;
+export declare function Card<T extends ElementType = 'div'>({ as, className, children, ...props }: Props<T>): import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/Card/index.d.ts

@@ -0,0 +1 @@
+export { Card } from './Card';

package/dist/shared/ui/Carousel/Carousel.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+type CarouselProps = {
+    /**
+     * Number of items to show in the carousel at once
+     */
+    itemsPerView?: number;
+    /**
+     * Additional CSS classes to apply to the carousel container
+     */
+    className?: string;
+    /**
+     * The content to display within the carousel
+     */
+    children: ReactNode;
+};
+export declare function Carousel({ itemsPerView, className, children }: CarouselProps): import("react/jsx-runtime").JSX.Element;
+export declare function CarouselContent({ children, className }: Omit<CarouselProps, 'itemsPerView'>): import("react/jsx-runtime").JSX.Element;
+export declare function CarouselItem({ children, className }: Omit<CarouselProps, 'itemsPerView'>): import("react/jsx-runtime").JSX.Element;
+export declare function CarouselPrevious(): import("react/jsx-runtime").JSX.Element | null;
+export declare function CarouselNext(): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/shared/ui/Carousel/CarouselContext.d.ts

@@ -0,0 +1,44 @@
+import { RefObject } from 'react';
+type CarouselContextType = {
+    /**
+     * The current index of the active item in the carousel.
+     */
+    currentIndex: number;
+    /**
+     * The total number of items in the carousel.
+     */
+    totalItems: number;
+    /**
+     * Scroll to the next item in the carousel.
+     * @returns void
+     */
+    goToNext: () => void;
+    /**
+     * Scroll to the previous item in the carousel.
+     * @returns void
+     */
+    goToPrevious: () => void;
+    /**
+     * Whether the carousel can scroll to the next item.
+     */
+    canGoNext: boolean;
+    /**
+     * Whether the carousel can scroll to the previous item.
+     */
+    canGoPrevious: boolean;
+    /**
+     * A ref to the scroll container element.
+     */
+    scrollContainerRef: RefObject<HTMLDivElement | null>;
+    /**
+     * Function to handle mouse enter event to pause auto-scrolling.
+     */
+    handleMouseEnter: () => void;
+    /**
+     * Function to handle mouse leave event to resume auto-scrolling.
+     */
+    handleMouseLeave: () => void;
+};
+export declare const CarouselContext: import('react').Context<CarouselContextType | null>;
+export declare const useCarousel: () => CarouselContextType;
+export {};

package/dist/shared/ui/Carousel/index.d.ts

@@ -0,0 +1 @@
+export { Carousel, CarouselContent, CarouselItem } from './Carousel';

package/dist/shared/ui/DoubleButton/DoubleButton.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+export type Props = {
+    /**
+     * left child of the DoubleButton
+     */
+    left: ReactNode;
+    /**
+     * right child of the DoubleButton
+     */
+    right: ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare function DoubleButton({ left, right }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/DoubleButton/index.d.ts

@@ -0,0 +1 @@
+export { DoubleButton } from './DoubleButton';

package/dist/shared/ui/Drawer/Drawer.d.ts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+export type Props = {
+    /**
+     * The open state of the drawer.
+     */
+    isOpen: boolean;
+    /**
+     * The function to call when the drawer is closed.
+     */
+    onClose: () => void;
+} & PropsWithChildren;
+export declare function Drawer({ isOpen, onClose, children }: Props): import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/Drawer/index.d.ts

@@ -0,0 +1 @@
+export { Drawer } from './Drawer';

package/dist/shared/ui/FileUpload/FileUpload.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from 'react';
+export type FileUploadProps = {
+    /**
+     * The id of the file input.
+     */
+    id?: string;
+    /**
+     * The mode of the file upload.
+     */
+    mode: 'single' | 'multiple';
+} & Omit<ComponentProps<'input'>, 'id' | 'multiple'>;
+export declare function FileUpload({ id, mode, ...props }: FileUploadProps): import("react/jsx-runtime").JSX.Element;

package/dist/shared/ui/FileUpload/index.d.ts

@@ -0,0 +1 @@
+export { FileUpload } from './FileUpload';

package/dist/shared/ui/Flex/Flex.d.ts

@@ -0,0 +1,72 @@
+declare const DIR: {
+    readonly row: "flex-row";
+    readonly 'row-reverse': "flex-row-reverse";
+    readonly col: "flex-col";
+    readonly 'col-reverse': "flex-col-reverse";
+};
+declare const ALIGN_ITEMS: {
+    readonly start: "items-start";
+    readonly end: "items-end";
+    readonly center: "items-center";
+    readonly baseline: "items-baseline";
+    readonly stretch: "items-stretch";
+};
+declare const JUSTIFY_CONTENT: {
+    readonly start: "justify-start";
+    readonly end: "justify-end";
+    readonly center: "justify-center";
+    readonly between: "justify-between";
+    readonly around: "justify-around";
+    readonly evenly: "justify-evenly";
+    readonly stretch: "justify-stretch";
+    readonly baseline: "justify-baseline";
+};
+declare const WRAP: {
+    readonly nowrap: "flex-nowrap";
+    readonly wrap: "flex-wrap";
+    readonly 'wrap-reverse': "flex-wrap-reverse";
+};
+type Props = {
+    /**
+     * The HTML element to use as the container.
+     * @default 'div'
+     */
+    as?: React.ElementType;
+    /**
+     * Defines the direction of the flex container's main axis.
+     * @default row
+     */
+    dir?: keyof typeof DIR;
+    /**
+     * Specifies how flex items are aligned along the cross axis.
+     * @default start
+     */
+    alignItems?: keyof typeof ALIGN_ITEMS;
+    /**
+     * Defines how flex items are distributed along the main axis.
+     * @default center
+     */
+    justifyContent?: keyof typeof JUSTIFY_CONTENT;
+    /**
+     * Controls whether flex items should wrap onto multiple lines.
+     * @default nowrap
+     */
+    wrap?: keyof typeof WRAP;
+    /**
+     * Defines the gap between flex items.
+     * Can be a number (Tailwind spacing scale) or string (custom CSS value)
+     * @example gap={4} → gap-4
+     */
+    gap?: number;
+    /**
+     * Additional CSS classNames to be applied to the container.
+     * @default ''
+     */
+    className?: string;
+    /**
+     * The child elements to be rendered inside the Flex container.
+     */
+    children: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare function Flex({ as, dir, alignItems, justifyContent, wrap, gap, className, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/Flex/index.d.ts

@@ -0,0 +1 @@
+export { Flex } from './Flex';

package/dist/shared/ui/Icon/Icon.d.ts

@@ -0,0 +1,21 @@
+import { IconColor } from '../../lib/colors';
+import { IconName } from '../assets';
+type Props = {
+    /**
+     * icon name to be displayed.
+     */
+    name: IconName;
+    /**
+     * color of the icon.
+     * @default 'gray'
+     */
+    color?: IconColor;
+    /**
+     * size of the icon.
+     * @description px 단위로 변환합니다.
+     * @default 25
+     */
+    size?: number;
+} & Omit<React.SVGProps<SVGSVGElement>, 'color'>;
+export declare function Icon({ name, color, size, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/Icon/index.d.ts

@@ -0,0 +1 @@
+export { Icon } from './Icon';

package/dist/shared/ui/IconButton/IconButton.d.ts

@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react';
+import { IconColor } from '../../lib/colors';
+import { IconName } from '../assets';
+type IconButtonProps = {
+    /**
+     * name of the icon.
+     */
+    iconName: IconName;
+    /**
+     * color of the icon.
+     * @default 'gray'
+     */
+    color?: IconColor;
+    /**
+     * size of the icon.
+     * @description px 단위로 변환합니다.
+     * @default 25
+     */
+    size?: number;
+} & ComponentProps<'button'>;
+export declare function IconButton({ iconName, color, size, className, ...props }: IconButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/IconButton/index.d.ts

@@ -0,0 +1 @@
+export { IconButton } from './IconButton';

package/dist/shared/ui/Input/Input.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+type InputProps = {
+    /**
+     * Callback function when the reset button is clicked.
+     */
+    onClickReset: () => void;
+} & ComponentProps<'input'>;
+export declare function Input({ value, onClickReset, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/Input/index.d.ts

@@ -0,0 +1 @@
+export { Input } from './Input';

package/dist/shared/ui/Modal/Modal.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+type Props = {
+    /**
+     * Controls whether the modal is open or closed.
+     */
+    isOpen: boolean;
+    /**
+     * Function to close the modal.
+     */
+    closeModal: () => void;
+    /**
+     * The content to be displayed inside the modal.
+     */
+    children: ReactNode;
+};
+export declare function Modal({ isOpen, closeModal, children }: Props): import("react/jsx-runtime").JSX.Element;
+export declare function ModalContent({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/Modal/index.d.ts

@@ -0,0 +1 @@
+export { Modal } from './Modal';