@bichon/ds 0.0.0 → 0.0.2

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, HTMLAttributes, ButtonHTMLAttributes, CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { ReactNode, HTMLAttributes, ButtonHTMLAttributes, CSSProperties, InputHTMLAttributes, TextareaHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } 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';
@@ -8,6 +8,7 @@ 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';
+import * as ToggleGroup from '@radix-ui/react-toggle-group';
 
 /**
  * Emotion Theme augmentation for Bichon design tokens.
@@ -45,21 +46,25 @@ type BichonColors = {
   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;
+  readonly Sb_32: string;
+  readonly Sb_24: string;
+  readonly Sb_20: string;
+  readonly Sb_18: string;
+  readonly Sb_16: string;
+  readonly Sb_14: string;
+  readonly Md_18: string;
+  readonly Md_16: string;
+  readonly Md_15: string;
+  readonly Md_14: string;
+  readonly Md_13: string;
+  readonly Md_12: string;
+  readonly Rg_16: string;
+  readonly Rg_15: string;
+  readonly Rg_14: string;
+  readonly Rg_13: string;
+  readonly Rg_12: string;
+  [key: string]: string;
 };
 
 type BichonSpacing$1 = Record<number, string> & Record<string, string>;
@@ -68,10 +73,10 @@ type BichonRadius$1 = Record<string, string>;
 
 type BichonShadows$1 = Record<string, string>;
 
-declare module '@emotion/react' {
+declare module "@emotion/react" {
   export interface Theme {
     colors: BichonColors;
-    typography: BichonTypography$1;
+    typo: BichonTypography$1;
     spacing: BichonSpacing$1;
     radius: BichonRadius$1;
     shadows: BichonShadows$1;
@@ -80,7 +85,7 @@ declare module '@emotion/react' {
 
 type BichonEmotionTheme = {
   colors: BichonColors;
-  typography: BichonTypography$1;
+  typo: BichonTypography$1;
   spacing: BichonSpacing$1;
   radius: BichonRadius$1;
   shadows: BichonShadows$1;
@@ -150,147 +155,26 @@ declare const colors: {
 };
 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";
-    };
+declare const typo: {
+    readonly Sb_32: "\n    font-size: 32px;\n    line-height: 42px;\n    font-weight: 600;\n    letter-spacing: -0.02em;\n  ";
+    readonly Sb_24: "\n    font-size: 24px;\n    line-height: 32px;\n    font-weight: 600;\n    letter-spacing: -0.02em;\n  ";
+    readonly Sb_20: "\n    font-size: 20px;\n    line-height: 29px;\n    font-weight: 600;\n    letter-spacing: -0.02em;\n  ";
+    readonly Sb_18: "\n    font-size: 18px;\n    line-height: 27px;\n    font-weight: 600;\n    letter-spacing: -0.02em;\n  ";
+    readonly Sb_16: "\n    font-size: 16px;\n    line-height: 24px;\n    font-weight: 600;\n    letter-spacing: -0.02em;\n  ";
+    readonly Sb_14: "\n    font-size: 14px;\n    line-height: 21px;\n    font-weight: 600;\n    letter-spacing: -0.02em;\n  ";
+    readonly Md_18: "\n    font-size: 18px;\n    line-height: 27px;\n    font-weight: 500;\n    letter-spacing: -0.02em;\n  ";
+    readonly Md_16: "\n    font-size: 16px;\n    line-height: 24px;\n    font-weight: 500;\n    letter-spacing: -0.02em;\n  ";
+    readonly Md_15: "\n    font-size: 15px;\n    line-height: 22.5px;\n    font-weight: 500;\n    letter-spacing: -0.02em;\n  ";
+    readonly Md_14: "\n    font-size: 14px;\n    line-height: 21px;\n    font-weight: 500;\n    letter-spacing: -0.02em;\n  ";
+    readonly Md_13: "\n    font-size: 13px;\n    line-height: 19.5px;\n    font-weight: 500;\n    letter-spacing: -0.02em;\n  ";
+    readonly Md_12: "\n    font-size: 12px;\n    line-height: 18px;\n    font-weight: 500;\n    letter-spacing: -0.02em;\n  ";
+    readonly Rg_16: "\n    font-size: 16px;\n    line-height: 24px;\n    font-weight: 400;\n    letter-spacing: -0.02em;\n  ";
+    readonly Rg_15: "\n    font-size: 15px;\n    line-height: 22.5px;\n    font-weight: 400;\n    letter-spacing: -0.02em;\n  ";
+    readonly Rg_14: "\n    font-size: 14px;\n    line-height: 21px;\n    font-weight: 400;\n    letter-spacing: -0.02em;\n  ";
+    readonly Rg_13: "\n    font-size: 13px;\n    line-height: 19.5px;\n    font-weight: 400;\n    letter-spacing: -0.02em;\n  ";
+    readonly Rg_12: "\n    font-size: 12px;\n    line-height: 18px;\n    font-weight: 400;\n    letter-spacing: -0.02em;\n  ";
 };
-type BichonTypography = typeof typography;
+type BichonTypography = typeof typo;
 
 /**
  * Spacing Tokens for Bichon Design System
@@ -318,8 +202,8 @@ declare const semanticSpacing: {
     readonly md: "12px";
     readonly lg: "16px";
     readonly xl: "20px";
-    readonly '2xl': "24px";
-    readonly '3xl': "32px";
+    readonly "2xl": "24px";
+    readonly "3xl": "32px";
 };
 declare const componentSize: {
     readonly cardWidth: "286px";
@@ -371,7 +255,7 @@ type BichonShadows = typeof shadows;
 
 interface BichonTheme {
     colors: typeof colors;
-    typography: typeof typography;
+    typo: typeof typo;
     spacing: typeof spacing;
     radius: typeof radius;
     shadows: typeof shadows;
@@ -399,8 +283,8 @@ interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'color'> {
 }
 declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
-type ProgressSize = 'large' | 'medium' | 'small';
-interface ProgressProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixProgress.Root>, 'asChild'> {
+type ProgressSize = "large" | "medium" | "small";
+interface ProgressProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixProgress.Root>, "asChild"> {
     size?: ProgressSize;
     value?: number;
     width?: string | number;
@@ -411,13 +295,14 @@ declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.Re
 /**
  * Button Styled Components
  */
-type ButtonVariant = 'filled' | 'outlined' | 'text' | 'warning';
-type ButtonSize = 'large' | 'medium' | 'small';
+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;
+    active?: boolean;
     children: ReactNode;
 }
 declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
@@ -553,4 +438,92 @@ interface TooltipContentProps extends React.ComponentPropsWithoutRef<typeof Tool
 }
 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 };
+type SegmentedControlSize = "large" | "small";
+interface SegmentedControlRootProps {
+    size?: SegmentedControlSize;
+    children: ReactNode;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    dir?: "ltr" | "rtl";
+    rovingFocus?: boolean;
+}
+declare const SegmentedControlRoot: react.ForwardRefExoticComponent<SegmentedControlRootProps & react.RefAttributes<HTMLDivElement>>;
+interface SegmentedControlItemProps extends Omit<React.ComponentPropsWithoutRef<typeof ToggleGroup.Item>, "children"> {
+    children: ReactNode;
+}
+declare const SegmentedControlItem: react.ForwardRefExoticComponent<SegmentedControlItemProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface TabRootProps {
+    children: ReactNode;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: "horizontal" | "vertical";
+    dir?: "ltr" | "rtl";
+}
+declare const TabRoot: react.ForwardRefExoticComponent<TabRootProps & react.RefAttributes<HTMLDivElement>>;
+interface TabListProps {
+    children: ReactNode;
+}
+declare const TabList: react.ForwardRefExoticComponent<TabListProps & react.RefAttributes<HTMLDivElement>>;
+interface TabTriggerProps {
+    value: string;
+    children: ReactNode;
+    disabled?: boolean;
+}
+declare const TabTrigger: react.ForwardRefExoticComponent<TabTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+interface TabContentProps {
+    value: string;
+    children: ReactNode;
+}
+declare const TabContent: react.ForwardRefExoticComponent<TabContentProps & react.RefAttributes<HTMLDivElement>>;
+
+interface TableRootProps {
+    children: ReactNode;
+}
+declare const TableRoot: react.ForwardRefExoticComponent<TableRootProps & react.RefAttributes<HTMLDivElement>>;
+interface TableProps {
+    children: ReactNode;
+}
+declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>>;
+interface TableHeaderProps {
+    children: ReactNode;
+}
+declare const TableHeader: react.ForwardRefExoticComponent<TableHeaderProps & react.RefAttributes<HTMLTableSectionElement>>;
+interface TableBodyProps {
+    children: ReactNode;
+}
+declare const TableBody: react.ForwardRefExoticComponent<TableBodyProps & react.RefAttributes<HTMLTableSectionElement>>;
+interface TableHeaderRowProps {
+    children: ReactNode;
+}
+declare const TableHeaderRow: react.ForwardRefExoticComponent<TableHeaderRowProps & react.RefAttributes<HTMLTableRowElement>>;
+interface TableBodyRowProps {
+    children: ReactNode;
+}
+declare const TableBodyRow: react.ForwardRefExoticComponent<TableBodyRowProps & react.RefAttributes<HTMLTableRowElement>>;
+interface TableHeaderCellProps extends ThHTMLAttributes<HTMLTableHeaderCellElement> {
+    children?: ReactNode;
+}
+declare const TableHeaderCell: react.ForwardRefExoticComponent<TableHeaderCellProps & react.RefAttributes<HTMLTableHeaderCellElement>>;
+interface TableBodyCellProps extends TdHTMLAttributes<HTMLTableDataCellElement> {
+    children?: ReactNode;
+}
+declare const TableBodyCell: react.ForwardRefExoticComponent<TableBodyCellProps & react.RefAttributes<HTMLTableDataCellElement>>;
+
+interface SkeletonProps {
+    /** 로딩 중이면 스켈레톤 표시, false면 children 표시 */
+    loading?: boolean;
+    children?: ReactNode;
+    width?: string | number;
+    minWidth?: string | number;
+    maxWidth?: string | number;
+    height?: string | number;
+    minHeight?: string | number;
+    maxHeight?: string | number;
+}
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLSpanElement>>;
+
+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, SegmentedControlItem, type SegmentedControlItemProps, SegmentedControlRoot, type SegmentedControlRootProps, type SegmentedControlSize, Skeleton, type SkeletonProps, TabContent, type TabContentProps, TabList, type TabListProps, TabRoot, type TabRootProps, TabTrigger, type TabTriggerProps, Table, TableBody, TableBodyCell, type TableBodyCellProps, type TableBodyProps, TableBodyRow, type TableBodyRowProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, TableHeaderRow, type TableHeaderRowProps, type TableProps, TableRoot, type TableRootProps, TextField, type TextFieldProps, type TextFieldVariant, ToastProvider, type ToastProviderProps, Tooltip, TooltipContent, type TooltipContentProps, TooltipProvider, TooltipTrigger, colors, componentSize, radius, semanticSpacing, shadows, spacing, typo, useToast };