ddingdong-design-system 0.2.0 → 0.2.2

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';

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

@@ -0,0 +1,28 @@
+import { ComponentProps } from 'react';
+type TextAreaProps = {
+    /**
+     * Current value of the textarea
+     */
+    value: string;
+    /**
+     * Background color of the textarea
+     * @default 'gray'
+     */
+    variant: 'gray' | 'white';
+    /**
+     * Default height in number of rows
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * Whether to show character counter
+     * @default false
+     */
+    showCounter?: boolean;
+    /**
+     * Custom class name for styling
+     */
+    className?: string;
+} & Omit<ComponentProps<'textarea'>, 'rows'>;
+export declare function TextArea({ value, variant, rows, showCounter, className, ...props }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,22 @@
+import { TOOLTIP_MOTION } from '../../constants/motion';
+import { tooltipColorMap } from './tooltipColorMap';
+type TooltipProps = {
+    /**
+     * The content to display in the tooltip
+     */
+    content: string;
+    /**
+     * The color of the tooltip
+     */
+    color: keyof typeof tooltipColorMap;
+    /**
+     * The animation mode for the tooltip
+     */
+    animationMode?: keyof typeof TOOLTIP_MOTION;
+    /**
+     * The content to display in the tooltip
+     */
+    children: React.ReactNode;
+};
+export declare function Tooltip({ content, color, animationMode, children, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

package/dist/shared/ui/Tooltip/tooltipColorMap.d.ts

@@ -0,0 +1,38 @@
+export declare const tooltipColorMap: {
+    readonly primary: {
+        readonly bg: "bg-primary-300";
+        readonly text: "text-white";
+    };
+    readonly gray: {
+        readonly bg: "bg-gray-400";
+        readonly text: "text-white";
+    };
+    readonly red: {
+        readonly bg: "bg-red-300";
+        readonly text: "text-white";
+    };
+    readonly green: {
+        readonly bg: "bg-green-300";
+        readonly text: "text-white";
+    };
+    readonly orange: {
+        readonly bg: "bg-orange-500";
+        readonly text: "text-white";
+    };
+    readonly yellow: {
+        readonly bg: "bg-yellow-400";
+        readonly text: "text-black";
+    };
+    readonly purple: {
+        readonly bg: "bg-purple-500";
+        readonly text: "text-white";
+    };
+    readonly white: {
+        readonly bg: "bg-white border border-gray-200";
+        readonly text: "text-gray-800";
+    };
+    readonly black: {
+        readonly bg: "bg-black";
+        readonly text: "text-white";
+    };
+};

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

@@ -0,0 +1,39 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+type TypographyVariant = 'Title1' | 'Title2' | 'Title3' | 'Body1' | 'Body2' | 'Body3' | 'Caption1';
+type FontWeight = 'normal' | 'medium' | 'semibold' | 'bold';
+type AllowedTag = 'p' | 'div' | 'label' | 'span';
+type TypographyProps<T extends AllowedTag> = {
+    /**
+     * The HTML element to use for the typography component.
+     */
+    as?: T;
+    /**
+     * The variant of the typography component.
+     * @default 'Body1'
+     */
+    variant?: TypographyVariant;
+    /**
+     * The font weight of the typography component.
+     *  @default 'medium'
+     */
+    weight?: FontWeight;
+    /**
+     * Additional CSS classes to apply to the typography component.
+     */
+    className?: string;
+    /**
+     * The content of the typography component.
+     */
+    children?: ReactNode;
+} & Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'children'>;
+export declare function Typography<T extends AllowedTag = 'p'>({ as, weight, className, children, ...props }: TypographyProps<T>): import('react').ReactElement<{
+    className: string;
+} & Omit<TypographyProps<T>, "className" | "children" | "weight" | "as">, string | import('react').JSXElementConstructor<any>>;
+export declare const Title1: <T extends AllowedTag = "p">(props: Omit<TypographyProps<T>, "variant">) => import("react/jsx-runtime").JSX.Element;
+export declare const Title2: <T extends AllowedTag = "p">(props: Omit<TypographyProps<T>, "variant">) => import("react/jsx-runtime").JSX.Element;
+export declare const Title3: <T extends AllowedTag = "p">(props: Omit<TypographyProps<T>, "variant">) => import("react/jsx-runtime").JSX.Element;
+export declare const Body1: <T extends AllowedTag = "p">(props: Omit<TypographyProps<T>, "variant">) => import("react/jsx-runtime").JSX.Element;
+export declare const Body2: <T extends AllowedTag = "p">(props: Omit<TypographyProps<T>, "variant">) => import("react/jsx-runtime").JSX.Element;
+export declare const Body3: <T extends AllowedTag = "p">(props: Omit<TypographyProps<T>, "variant">) => import("react/jsx-runtime").JSX.Element;
+export declare const Caption1: <T extends AllowedTag = "p">(props: Omit<TypographyProps<T>, "variant">) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1 @@
+export { Title1, Title2, Title3, Caption1, Body1, Body2, Body3 } from './Typography';

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

@@ -0,0 +1,23 @@
+export declare const Icons: {
+    add: string;
+    arrowDown: string;
+    arrowUp: string;
+    arrowLeft: string;
+    arrowRight: string;
+    check: string;
+    close: string;
+    download: string;
+    etc: string;
+    file: string;
+    list: string;
+    navbarArrow: string;
+    new: string;
+    pin: string;
+    trash: string;
+    write: string;
+    loading: string;
+    instagram: string;
+    youtube: string;
+};
+export type IconName = keyof typeof Icons;
+export declare const iconNames: IconName[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ddingdong-design-system",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "keywords": [
     "react",