ddingdong-design-system 0.1.0

package/dist/index.d.ts

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

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

@@ -0,0 +1,40 @@
+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;
+    };
+};

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

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

package/dist/shared/index.d.ts

@@ -0,0 +1,21 @@
+export { Accordion } from './ui/Accordion';
+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 { Flex } from './ui/Flex';
+export { Icon } from './ui/Icon';
+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 * 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/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/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/Flex/Flex.d.ts

@@ -0,0 +1,71 @@
+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.
+     * @default '0px'
+     */
+    gap?: string;
+    /**
+     * 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;
+} & React.SVGProps<SVGSVGElement>;
+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/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';

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

@@ -0,0 +1,16 @@
+type Props = {
+    /**
+     * The title to display in the navigation back button.
+     */
+    title: string;
+    /**
+     * The size of the navigation back button.
+     */
+    size: 'sm' | 'lg';
+    /**
+     * Callback function to be called when the button is clicked.
+     */
+    onClick?: () => void;
+};
+export declare function NavBack({ title, size, onClick }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,20 @@
+type Props = {
+    /**
+     * current page number.
+     */
+    currentPage: number;
+    /**
+     * total page number.
+     */
+    totalPages: number;
+    /**
+     * function to be called when page is changed.
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * additional className.
+     */
+    className?: string;
+};
+export declare function Pagination({ currentPage, totalPages, onPageChange, className }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,12 @@
+type Props = {
+    /**
+     * Controls whether the portal is open or closed.
+     */
+    isOpen: boolean;
+    /**
+     * The content to render inside the portal.
+     */
+    children: React.ReactNode;
+};
+export declare function Portal({ isOpen, children }: Props): import('react').ReactPortal | null;
+export {};

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

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

package/dist/shared/ui/Select/Option.d.ts

@@ -0,0 +1,10 @@
+import { VariantProps } from 'class-variance-authority';
+declare const optionVariants: (props?: ({
+    size?: "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type Props = {
+    id: string;
+    name: string;
+} & VariantProps<typeof optionVariants>;
+export declare function Option({ id, name, size }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/Select/OptionGroupName.d.ts

@@ -0,0 +1,5 @@
+type Props = {
+    name: string;
+};
+export declare function OptionGroupName({ name }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/Select/OptionList.d.ts

@@ -0,0 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
+declare const optionListVariants: (props?: ({
+    size?: "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type Props = {
+    children: React.ReactNode;
+} & VariantProps<typeof optionListVariants>;
+export declare function OptionList({ children, size }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/Select/Select.context.d.ts

@@ -0,0 +1,12 @@
+type OptionProps = {
+    id: string;
+    name: string;
+};
+export type SelectContextType = {
+    selected: OptionProps;
+    onSelect: (option: OptionProps) => void;
+    size: 'md' | 'lg';
+};
+export declare const SelectContext: import('react').Context<SelectContextType | undefined>;
+export declare const useSelectContext: () => SelectContextType;
+export {};

package/dist/shared/ui/Select/SelectButton.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    selected: string;
+    onClick: () => void;
+    isOpen: boolean;
+    size?: 'md' | 'lg';
+};
+export declare function SelectButton({ selected, onClick, isOpen, size }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/Select/SelectMain.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+type OptionProps = {
+    id: string;
+    name: string;
+};
+type Props = {
+    /**
+     * The size of the select component.
+     * @default 'lg'
+     */
+    size?: 'md' | 'lg';
+    /**
+     * Callback function called when the selected option changes.
+     */
+    onChange?: (option: OptionProps) => void;
+    /**
+     * The default value of the select component.
+     */
+    defaultValue: string;
+    /**
+     * The content to be displayed inside the select component.
+     */
+    children: ReactNode;
+};
+export declare function SelectMain({ children, defaultValue, onChange, size }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,16 @@
+import { Option } from './Option';
+import { OptionGroupName } from './OptionGroupName';
+import { OptionList } from './OptionList';
+import { SelectButton } from './SelectButton';
+import { SelectMain } from './SelectMain';
+export declare const Select: typeof SelectMain & {
+    Option: typeof Option;
+    Button: typeof SelectButton;
+    List: typeof OptionList;
+};
+export declare const GroupingSelect: typeof SelectMain & {
+    Option: typeof Option;
+    Select: typeof SelectButton;
+    List: typeof OptionList;
+    Group: typeof OptionGroupName;
+};

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

@@ -0,0 +1,20 @@
+type Props = {
+    /**
+     * optional additional CSS class names like size etc.
+     */
+    className?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare function Skeleton({ className, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+type TextProps = {
+    /**
+     * optional additional CSS class names like size etc.
+     */
+    className?: string;
+    /**
+     * length of text line
+     * @default 2
+     */
+    length?: number;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare function TextSkeleton({ length, className, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export { Skeleton } from './Skeleton';
+export { TextSkeleton } from './Skeleton';

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

@@ -0,0 +1,11 @@
+import { SwitchColor } from '../../lib/colors';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+type Props = React.ComponentProps<typeof SwitchPrimitives.Root> & {
+    /**
+     * color of the switch.
+     * @default 'primary'
+     */
+    color?: SwitchColor;
+};
+export declare function Switch({ color, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

package/dist/shared/ui/Tabs/Tabs.context.d.ts

@@ -0,0 +1,5 @@
+type TabsContextType = {
+    activeLabel: string;
+};
+export declare const TabsContext: import('react').Context<TabsContextType | undefined>;
+export {};

package/dist/shared/ui/Tabs/TabsItem.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    /**
+     * tab name to be displayed.
+     */
+    label: string;
+    /**
+     * if activated, exposed element.
+     */
+    children: React.ReactNode;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare function TabsItem({ label, children, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/ui/Tabs/TabsRoot.d.ts

@@ -0,0 +1,12 @@
+type Props = {
+    /**
+     * children elements of the Tabs
+     */
+    children: React.ReactNode;
+    /**
+     * default focusing tabsItem index.
+     */
+    defaultIndex?: number;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare function TabsRoot({ children, defaultIndex, ...props }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export { TabsRoot as Tabs } from './TabsRoot';
+export { TabsItem as Item } from './TabsItem';