@bichon/ds 0.0.0

package/dist/index.d.ts

@@ -0,0 +1,556 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode, HTMLAttributes, ButtonHTMLAttributes, CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import * as RadixAvatar from '@radix-ui/react-avatar';
+import * as RadixProgress from '@radix-ui/react-progress';
+import * as ToastPrimitive from '@radix-ui/react-toast';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+/**
+ * Emotion Theme augmentation for Bichon design tokens.
+ * BichonThemeProvider 하위 styled components에서 theme.colors, theme.typography 등 사용 시 타입 지원.
+ * @docs-front/packages/ui styles/emotion.d.ts 패턴 참고.
+ */
+
+
+
+type BichonColors = {
+  readonly basic: Record<string, unknown>;
+  readonly none: string;
+  readonly textPrimary: string;
+  readonly textSecondary: string;
+  readonly textTertiary: string;
+  readonly textDisabled: string;
+  readonly textPlaceholder: string;
+  readonly lineLight: string;
+  readonly lineDefault: string;
+  readonly lineAccent: string;
+  readonly lineWarning: string;
+  readonly bgWhite: string;
+  readonly bgLightGrey: string;
+  readonly bgMediumGrey: string;
+  readonly bgDarkGrey: string;
+  readonly bgBlack: string;
+  readonly bgAccent: string;
+  readonly bgAccentDark: string;
+  readonly bgAccentSubtle: string;
+  readonly bgWarning: string;
+  readonly bgWarningDark: string;
+  readonly bgWarningSubtle: string;
+  readonly textAccent: string;
+  readonly textWarning: string;
+  readonly [key: string]: unknown;
+};
+
+type BichonTypographyStyle = {
+  readonly fontSize: string;
+  readonly lineHeight: string;
+  readonly fontWeight: number;
+  readonly letterSpacing: string;
+};
+
+type BichonTypography$1 = {
+  readonly bodyLgMedium: BichonTypographyStyle;
+  readonly bodyMdMedium: BichonTypographyStyle;
+  readonly bodyLgRegular: BichonTypographyStyle;
+  readonly bodyXsRegular: BichonTypographyStyle;
+  readonly bodyBaseMedium: BichonTypographyStyle;
+  readonly headingXl: BichonTypographyStyle;
+  readonly [key: string]: BichonTypographyStyle;
+};
+
+type BichonSpacing$1 = Record<number, string> & Record<string, string>;
+
+type BichonRadius$1 = Record<string, string>;
+
+type BichonShadows$1 = Record<string, string>;
+
+declare module '@emotion/react' {
+  export interface Theme {
+    colors: BichonColors;
+    typography: BichonTypography$1;
+    spacing: BichonSpacing$1;
+    radius: BichonRadius$1;
+    shadows: BichonShadows$1;
+  }
+}
+
+type BichonEmotionTheme = {
+  colors: BichonColors;
+  typography: BichonTypography$1;
+  spacing: BichonSpacing$1;
+  radius: BichonRadius$1;
+  shadows: BichonShadows$1;
+};
+
+declare const colors: {
+    readonly basic: {
+        readonly blue: {
+            readonly 100: "#EAF3FF";
+            readonly 300: "#ABCDFF";
+            readonly 500: "#2C81FC";
+            readonly 700: "#0C52B8";
+            readonly 900: "#002F74";
+        };
+        readonly grey: {
+            readonly 50: "#FAFAFC";
+            readonly 100: "#F1F1F4";
+            readonly 200: "#E3E4E8";
+            readonly 300: "#B5B9C4";
+            readonly 400: "#949AA8";
+            readonly 500: "#6E7687";
+            readonly 600: "#596070";
+            readonly 700: "#4B505D";
+            readonly 800: "#3F434D";
+            readonly 900: "#25262C";
+        };
+        readonly black: "#25262C";
+        readonly white: "#FFFFFF";
+        readonly black30: "rgba(37, 38, 44, 0.3)";
+        readonly red: {
+            readonly 100: "#FFECEE";
+            readonly 500: "#F04452";
+            readonly 700: "#AC202B";
+        };
+    };
+    readonly none: "transparent";
+    readonly chartBlack: "#25262C";
+    readonly chartRed: "#F04452";
+    readonly chartOrange: "#F98A00";
+    readonly chartYellow: "#EDB100";
+    readonly chartGreen: "#31A96B";
+    readonly chartBlue: "#2C81FC";
+    readonly chartPurple: "#8B4EDD";
+    readonly chartPink: "#F05C96";
+    readonly textPrimary: "#25262C";
+    readonly textSecondary: "#596070";
+    readonly textTertiary: "#6E7687";
+    readonly textDisabled: "#B5B9C4";
+    readonly textPlaceholder: "#B5B9C4";
+    readonly lineLight: "#F1F1F4";
+    readonly lineDefault: "#E3E4E8";
+    readonly lineAccent: "#2C81FC";
+    readonly lineWarning: "#F04452";
+    readonly bgWhite: "#FFFFFF";
+    readonly bgLightGrey: "#FAFAFC";
+    readonly bgMediumGrey: "#F1F1F4";
+    readonly bgDarkGrey: "#3F434D";
+    readonly bgBlack: "#25262C";
+    readonly bgAccent: "#2C81FC";
+    readonly bgAccentDark: "#0C52B8";
+    readonly bgAccentSubtle: "#EAF3FF";
+    readonly bgWarning: "#F04452";
+    readonly bgWarningDark: "#AC202B";
+    readonly bgWarningSubtle: "#FFECEE";
+    readonly textAccent: "#2C81FC";
+    readonly textWarning: "#F04452";
+};
+type Colors = typeof colors;
+
+/**
+ * Typography Tokens for Bichon Design System
+ *
+ * Semantic typography system with consistent naming and scales.
+ */
+declare const fontSize: {
+    readonly xs: "12px";
+    readonly sm: "13px";
+    readonly base: "14px";
+    readonly md: "15px";
+    readonly lg: "16px";
+    readonly xl: "18px";
+    readonly '2xl': "20px";
+    readonly '3xl': "24px";
+    readonly '4xl': "32px";
+};
+declare const fontWeight: {
+    readonly regular: 400;
+    readonly medium: 500;
+    readonly semibold: 600;
+};
+declare const lineHeight: {
+    readonly xs: "18px";
+    readonly sm: "19.5px";
+    readonly base: "21px";
+    readonly md: "22.5px";
+    readonly lg: "24px";
+    readonly xl: "27px";
+    readonly '2xl': "29px";
+    readonly '3xl': "32px";
+    readonly '4xl': "42px";
+};
+declare const letterSpacing: {
+    readonly tight: "-0.02em";
+    readonly normal: "0em";
+};
+declare const typography: {
+    readonly heading4xl: {
+        readonly fontSize: "32px";
+        readonly lineHeight: "42px";
+        readonly fontWeight: 600;
+        readonly letterSpacing: "-0.02em";
+    };
+    readonly heading3xl: {
+        readonly fontSize: "24px";
+        readonly lineHeight: "32px";
+        readonly fontWeight: 600;
+        readonly letterSpacing: "-0.02em";
+    };
+    readonly heading2xl: {
+        readonly fontSize: "20px";
+        readonly lineHeight: "29px";
+        readonly fontWeight: 600;
+        readonly letterSpacing: "-0.02em";
+    };
+    readonly headingXl: {
+        readonly fontSize: "18px";
+        readonly lineHeight: "27px";
+        readonly fontWeight: 600;
+        readonly letterSpacing: "-0.02em";
+    };
+    readonly headingLg: {
+        readonly fontSize: "16px";
+        readonly lineHeight: "24px";
+        readonly fontWeight: 600;
+        readonly letterSpacing: "-0.02em";
+    };
+    readonly headingBase: {
+        readonly fontSize: "14px";
+        readonly lineHeight: "21px";
+        readonly fontWeight: 600;
+        readonly letterSpacing: "-0.02em";
+    };
+    readonly bodyXlMedium: {
+        readonly fontSize: "18px";
+        readonly lineHeight: "27px";
+        readonly fontWeight: 500;
+        readonly letterSpacing: "-0.02em";
+    };
+    readonly bodyLgMedium: {
+        readonly fontSize: "16px";
+        readonly lineHeight: "24px";
+        readonly fontWeight: 500;
+        readonly letterSpacing: "-0.02em";
+    };
+    readonly bodyMdMedium: {
+        readonly fontSize: "15px";
+        readonly lineHeight: "22.5px";
+        readonly fontWeight: 500;
+        readonly letterSpacing: "-0.02em";
+    };
+    readonly bodyBaseMedium: {
+        readonly fontSize: "14px";
+        readonly lineHeight: "21px";
+        readonly fontWeight: 500;
+        readonly letterSpacing: "-0.02em";
+    };
+    readonly bodySmMedium: {
+        readonly fontSize: "13px";
+        readonly lineHeight: "19.5px";
+        readonly fontWeight: 500;
+        readonly letterSpacing: "-0.02em";
+    };
+    readonly bodyXsMedium: {
+        readonly fontSize: "12px";
+        readonly lineHeight: "18px";
+        readonly fontWeight: 500;
+        readonly letterSpacing: "-0.02em";
+    };
+    readonly bodyLgRegular: {
+        readonly fontSize: "16px";
+        readonly lineHeight: "24px";
+        readonly fontWeight: 400;
+        readonly letterSpacing: "-0.02em";
+    };
+    readonly bodyMdRegular: {
+        readonly fontSize: "15px";
+        readonly lineHeight: "22.5px";
+        readonly fontWeight: 400;
+        readonly letterSpacing: "-0.02em";
+    };
+    readonly bodyBaseRegular: {
+        readonly fontSize: "14px";
+        readonly lineHeight: "21px";
+        readonly fontWeight: 400;
+        readonly letterSpacing: "-0.02em";
+    };
+    readonly bodySmRegular: {
+        readonly fontSize: "13px";
+        readonly lineHeight: "19.5px";
+        readonly fontWeight: 400;
+        readonly letterSpacing: "-0.02em";
+    };
+    readonly bodyXsRegular: {
+        readonly fontSize: "12px";
+        readonly lineHeight: "18px";
+        readonly fontWeight: 400;
+        readonly letterSpacing: "-0.02em";
+    };
+};
+type BichonTypography = typeof typography;
+
+/**
+ * Spacing Tokens for Bichon Design System
+ *
+ * Consistent spacing scale for margins, padding, and gaps.
+ */
+declare const spacing: {
+    readonly 0: "0px";
+    readonly 1: "4px";
+    readonly 2: "8px";
+    readonly 3: "12px";
+    readonly 4: "16px";
+    readonly 5: "20px";
+    readonly 6: "24px";
+    readonly 8: "32px";
+    readonly 10: "40px";
+    readonly 12: "48px";
+    readonly 16: "64px";
+    readonly 20: "80px";
+    readonly 24: "96px";
+};
+declare const semanticSpacing: {
+    readonly xs: "4px";
+    readonly sm: "8px";
+    readonly md: "12px";
+    readonly lg: "16px";
+    readonly xl: "20px";
+    readonly '2xl': "24px";
+    readonly '3xl': "32px";
+};
+declare const componentSize: {
+    readonly cardWidth: "286px";
+    readonly cardContainerWidth: "334px";
+    readonly modalWidth: "400px";
+    readonly inputHeight: {
+        readonly small: "32px";
+        readonly medium: "40px";
+        readonly large: "48px";
+    };
+};
+type BichonSpacing = typeof spacing;
+type BichonSemanticSpacing = typeof semanticSpacing;
+type BichonComponentSize = typeof componentSize;
+
+/**
+ * Border Radius Tokens for Bichon Design System
+ *
+ * Consistent border radius scale for components.
+ */
+declare const radius: {
+    readonly none: "0px";
+    readonly xs: "2px";
+    readonly sm: "4px";
+    readonly md: "6px";
+    readonly lg: "8px";
+    readonly xl: "10px";
+    readonly '2xl': "12px";
+    readonly '3xl': "20px";
+    readonly full: "9999px";
+};
+type BichonRadius = typeof radius;
+
+/**
+ * Shadow Tokens for Bichon Design System
+ *
+ * Elevation and depth effects for components.
+ */
+declare const shadows: {
+    readonly none: "none";
+    readonly sm: "0px 1px 2px 0px rgba(0, 27, 55, 0.08)";
+    readonly base: "0px 2px 4px 0px rgba(0, 27, 55, 0.10)";
+    readonly md: "0px 4px 8px 0px rgba(0, 27, 55, 0.12)";
+    readonly lg: "0px 8px 16px 0px rgba(0, 27, 55, 0.15)";
+    readonly xl: "0px 12px 24px 0px rgba(0, 27, 55, 0.18)";
+    readonly modal: "0px 4px 12px 0px rgba(0, 27, 55, 0.15)";
+};
+type BichonShadows = typeof shadows;
+
+interface BichonTheme {
+    colors: typeof colors;
+    typography: typeof typography;
+    spacing: typeof spacing;
+    radius: typeof radius;
+    shadows: typeof shadows;
+}
+interface BichonThemeProviderProps {
+    children: ReactNode;
+}
+declare function BichonThemeProvider({ children }: BichonThemeProviderProps): react_jsx_runtime.JSX.Element;
+
+type AvatarSize = 'large' | 'medium' | 'small';
+interface AvatarProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixAvatar.Root>, 'asChild'> {
+    size?: AvatarSize;
+    src?: string;
+    alt?: string;
+    fallback?: React.ReactNode;
+}
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
+
+type BadgeVariant = 'active' | 'neutral' | 'warning';
+type BadgeSize = 'large' | 'medium' | 'small';
+interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    children: ReactNode;
+}
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+type ProgressSize = 'large' | 'medium' | 'small';
+interface ProgressProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixProgress.Root>, 'asChild'> {
+    size?: ProgressSize;
+    value?: number;
+    width?: string | number;
+    duration?: string;
+}
+declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Button Styled Components
+ */
+type ButtonVariant = 'filled' | 'outlined' | 'text' | 'warning';
+type ButtonSize = 'large' | 'medium' | 'small';
+
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "color"> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    width?: string | number;
+    children: ReactNode;
+}
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface FlexProps extends HTMLAttributes<HTMLDivElement> {
+    direction?: CSSProperties['flexDirection'];
+    justify?: CSSProperties['justifyContent'];
+    alignItems?: CSSProperties['alignItems'];
+    gap?: number | string;
+    width?: string | number;
+    height?: string | number;
+    padding?: CSSProperties['padding'];
+}
+declare const Flex: react.ForwardRefExoticComponent<FlexProps & react.RefAttributes<HTMLDivElement>>;
+
+type TextFieldVariant = 'default' | 'focus' | 'warning' | 'disabled';
+
+interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement> & TextareaHTMLAttributes<HTMLTextAreaElement>, 'width'> {
+    multiline?: boolean;
+    variant?: TextFieldVariant;
+    width?: CSSProperties['width'];
+    minRows?: number;
+    maxRows?: number;
+    helperText?: string;
+    showHelperText?: boolean;
+}
+type TextFieldRef = HTMLInputElement | HTMLTextAreaElement;
+declare const TextField: react.ForwardRefExoticComponent<TextFieldProps & react.RefAttributes<TextFieldRef>>;
+
+interface ToastProviderProps extends ToastPrimitive.ToastProviderProps {
+    children: ReactNode;
+    position?: 'top' | 'bottom';
+    viewportOffset?: number;
+}
+declare function ToastProvider({ children, position: defaultPosition, viewportOffset, ...props }: ToastProviderProps): react_jsx_runtime.JSX.Element;
+declare function useToast(): {
+    showToast: (message: string, options?: {
+        duration?: number;
+        position?: "top" | "bottom";
+    }) => void;
+};
+
+interface DialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    children: ReactNode;
+}
+interface DialogTitleProps {
+    children: ReactNode;
+}
+interface DialogContentProps {
+    children: ReactNode;
+}
+interface DialogFooterProps {
+    children: ReactNode;
+}
+declare function DialogTitle({ children }: DialogTitleProps): react_jsx_runtime.JSX.Element;
+declare function DialogContent({ children }: DialogContentProps): react_jsx_runtime.JSX.Element;
+declare function DialogFooter({ children }: DialogFooterProps): react_jsx_runtime.JSX.Element;
+interface DialogCompoundComponent {
+    (props: DialogProps): JSX.Element;
+    Title: typeof DialogTitle;
+    Content: typeof DialogContent;
+    Footer: typeof DialogFooter;
+}
+declare const Dialog: DialogCompoundComponent;
+
+type ChatBubbleVariant = 'user' | 'assistant';
+
+interface ChatBubbleProps {
+    variant?: ChatBubbleVariant;
+    children: ReactNode;
+}
+declare function ChatBubble({ variant, children }: ChatBubbleProps): react_jsx_runtime.JSX.Element;
+
+type IconButtonVariant = ButtonVariant;
+type IconButtonSize = ButtonSize;
+interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
+    variant?: IconButtonVariant;
+    size?: IconButtonSize;
+    children: ReactNode;
+}
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Pagination Component
+ *
+ * Page navigation with ellipsis for large page counts.
+ */
+interface PaginationProps {
+    currentPage: number;
+    totalPage: number;
+    onPageChange: (page: number) => void;
+    siblingCount?: number;
+}
+declare function Pagination({ currentPage, totalPage, onPageChange, siblingCount }: PaginationProps): react_jsx_runtime.JSX.Element | null;
+
+interface CheckboxProps extends Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'asChild'> {
+    label?: string;
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface RadioButtonOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface RadioButtonProps extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>, 'asChild'> {
+    options: RadioButtonOption[];
+}
+declare const RadioButton: react.ForwardRefExoticComponent<RadioButtonProps & react.RefAttributes<HTMLDivElement>>;
+
+declare const Menu: react.FC<DropdownMenu.DropdownMenuProps>;
+declare const MenuTrigger: react.ForwardRefExoticComponent<Omit<DropdownMenu.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare const MenuContent: react.ForwardRefExoticComponent<Omit<DropdownMenu.DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+interface MenuItemProps extends Omit<React.ComponentPropsWithoutRef<typeof DropdownMenu.Item>, 'children'> {
+    leadingIcon?: ReactNode;
+    trailingIcon?: boolean;
+    children: ReactNode;
+    width?: string | number;
+}
+declare const MenuItem: react.ForwardRefExoticComponent<MenuItemProps & react.RefAttributes<HTMLDivElement>>;
+
+interface TooltipProviderProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider> {
+    children: ReactNode;
+}
+declare const TooltipProvider: react.ForwardRefExoticComponent<TooltipProviderProps & react.RefAttributes<HTMLDivElement>>;
+declare const Tooltip: react.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: react.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+interface TooltipContentProps extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> {
+    children: ReactNode;
+    showArrow?: boolean;
+}
+declare const TooltipContent: react.ForwardRefExoticComponent<TooltipContentProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, type BichonComponentSize, type BichonEmotionTheme, type BichonRadius, type BichonSemanticSpacing, type BichonShadows, type BichonSpacing, type BichonTheme, BichonThemeProvider, type BichonThemeProviderProps, type BichonTypography, Button, type ButtonProps, type ButtonSize, type ButtonVariant, ChatBubble, type ChatBubbleProps, type ChatBubbleVariant, Checkbox, type CheckboxProps, type Colors, Dialog, type DialogContentProps, type DialogFooterProps, type DialogProps, type DialogTitleProps, Flex, type FlexProps, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, Menu, MenuContent, MenuItem, type MenuItemProps, MenuTrigger, Pagination, type PaginationProps, Progress, type ProgressProps, type ProgressSize, RadioButton, type RadioButtonOption, type RadioButtonProps, TextField, type TextFieldProps, type TextFieldVariant, ToastProvider, type ToastProviderProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, colors, componentSize, fontSize, fontWeight, letterSpacing, lineHeight, radius, semanticSpacing, shadows, spacing, typography, useToast };