@likelion-design/ui 1.0.15 → 1.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.mts CHANGED
@@ -88,6 +88,16 @@ interface TabProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "
88
88
  }
89
89
  /** Tab 컴포넌트는 사용자가 여러 옵션 중 하나를 선택할 때 사용하는 탭 컴포넌트이다. */
90
90
  declare const Tab: ({ type, size, badge, label, mode, className, selected, disabled, onClick, ...props }: TabProps) => react_jsx_runtime.JSX.Element;
91
+ interface TabItem {
92
+ /** 탭 식별 값 */
93
+ value: string;
94
+ /** 탭 라벨 */
95
+ label: React.ReactNode;
96
+ /** 배지 표시 여부 */
97
+ badge?: boolean;
98
+ /** 개별 탭 비활성화 */
99
+ disabled?: boolean;
100
+ }
91
101
  interface TabGroupProps {
92
102
  /** 선택된 탭 값 (controlled) */
93
103
  value?: string;
@@ -103,14 +113,20 @@ interface TabGroupProps {
103
113
  mode?: boolean;
104
114
  /** 비활성화 상태 */
105
115
  disabled?: boolean;
106
- /** 자식 Tab 컴포넌트들 */
107
- children: React.ReactNode;
116
+ /** 데이터 배열 (items 사용 시 children 불필요) */
117
+ items?: readonly TabItem[];
118
+ /** 자식 Tab 컴포넌트들 (items 미사용 시) */
119
+ children?: React.ReactNode;
120
+ /** 탭 간 간격 (px 또는 CSS 문자열). 미지정 시 기본 gap 적용 */
121
+ gap?: number | string;
108
122
  /** 추가 CSS 클래스명 */
109
123
  className?: string;
124
+ /** 인라인 스타일 */
125
+ style?: React.CSSProperties;
110
126
  }
111
127
  /** Tab.Group은 여러 Tab을 그룹화하여 단일 선택을 관리한다. */
112
128
  declare const TabGroup: {
113
- ({ value: valueProp, defaultValue, onChange, type, size, mode, disabled, children, className, }: TabGroupProps): react_jsx_runtime.JSX.Element;
129
+ ({ value: valueProp, defaultValue, onChange, type, size, mode, disabled, items, children, gap, className, style, }: TabGroupProps): react_jsx_runtime.JSX.Element;
114
130
  displayName: string;
115
131
  };
116
132
 
@@ -962,7 +978,7 @@ declare const Badge: ({ type, variant, value, maxValue, className, ...props }: B
962
978
 
963
979
  type TagType = "solid" | "outline" | "weak";
964
980
  type TagSize = "medium" | "small";
965
- type TagState = "enabled" | "error" | "progress" | "warning" | "success";
981
+ type TagState = "enabled" | "error" | "progressing" | "warning" | "success";
966
982
  interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
967
983
  /** 태그 타입 (solid, outline, weak) */
968
984
  type?: TagType;
@@ -1426,6 +1442,8 @@ interface TextFieldBaseProps {
1426
1442
  error?: boolean;
1427
1443
  /** Help text */
1428
1444
  description?: React.ReactNode;
1445
+ /** 컴포넌트 너비 (px 또는 CSS 문자열) */
1446
+ width?: number | string;
1429
1447
  /** 최대 문자 수 제한 */
1430
1448
  maxLength?: number;
1431
1449
  /**
@@ -1460,10 +1478,10 @@ interface TextFieldAreaProps extends TextFieldBaseProps, Omit<React.TextareaHTML
1460
1478
  /** 컴포넌트 타입: textarea */
1461
1479
  type: "area";
1462
1480
  /**
1463
- * textarea 높이 (px 또는 CSS 문자열). 내용이 넘치면 스크롤 생성.
1481
+ * textarea 높이 (px 또는 CSS 문자열). 고정 높이로 적용되며 내용이 넘치면 스크롤 생성.
1464
1482
  * @default 120
1465
1483
  */
1466
- minHeight?: number | string;
1484
+ height?: number | string;
1467
1485
  }
1468
1486
  type TextFieldProps = TextFieldInputProps | TextFieldAreaProps;
1469
1487
  /** TextField 컴포넌트는 사용자로부터 텍스트 입력을 받는 폼 컴포넌트입니다. input과 textarea를 통합합니다. */
@@ -1548,4 +1566,4 @@ declare const LAYOUT_SYSTEM: {
1548
1566
  };
1549
1567
  };
1550
1568
 
1551
- export { ActionButton, type ActionButtonProps, type AlertOptions, BREAKPOINTS, Badge, type BadgeProps, type BadgeType, type BadgeVariant, BreakpointProvider, ActionButton as Button, type ButtonColor, type ActionButtonProps as ButtonProps, type ButtonSize, type ButtonState, type ButtonType, Calendar, type CalendarProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, type ChipSize, type ChipType, type ChipVariant, type ConfirmOptions, DateInput, type DateInputProps, type DateInputSlot, type DateInputState, type DateInputType, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DatePickerSlot, type DatePickerType, Dialog, type DialogActionColor, type DialogActionItem, type DialogActionSize, type DialogActionType, type DialogAlign, type DialogFooterLayout, type DialogOptions, type DialogProps, DialogProvider, type DialogVariant, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonSize, type IconButtonState, type IconButtonType, LAYOUT_SYSTEM, Logo, type LogoColor, type LogoProps, type LogoSize, type LogoType, MEDIA_QUERIES, Pagination, type PaginationProps, RadioButton, RadioButtonGroup, type RadioButtonGroupProps, type RadioButtonProps, SelectBox, type SelectBoxClassName, type SelectBoxProps, type SelectBoxSize, type SelectBoxState, type SelectBoxStyle, type SelectBoxType, SelectHeader, type SelectHeaderProps, type SelectHeaderType, SelectMenu, type SelectMenuItem, SelectMenuOverlay, TAILWIND_SCREENS, Tab, TabGroup, type TabGroupProps, type TabProps, type TabSize, type TabType, Tag, type TagProps, type TagSize, type TagState, type TagType, Text, type TextDecoration, TextField, type TextFieldProps, type TextFieldSize, type TextFieldState, type TextFieldType, type TextProps, type TextVariant, TimePicker, type TimePickerProps, Toast, type ToastHorizontalAlign, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastSize, type ToastState, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPosition, type TooltipProps, type TooltipType, type UseCheckboxGroupOptions, type UseCheckboxGroupResult, formatDate, parseDate, useBreakpoint, useCheckboxGroup, useDialog, useMediaQuery, useToast };
1569
+ export { ActionButton, type ActionButtonProps, type AlertOptions, BREAKPOINTS, Badge, type BadgeProps, type BadgeType, type BadgeVariant, BreakpointProvider, ActionButton as Button, type ButtonColor, type ActionButtonProps as ButtonProps, type ButtonSize, type ButtonState, type ButtonType, Calendar, type CalendarProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, type ChipSize, type ChipType, type ChipVariant, type ConfirmOptions, DateInput, type DateInputProps, type DateInputSlot, type DateInputState, type DateInputType, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DatePickerSlot, type DatePickerType, Dialog, type DialogActionColor, type DialogActionItem, type DialogActionSize, type DialogActionType, type DialogAlign, type DialogFooterLayout, type DialogOptions, type DialogProps, DialogProvider, type DialogVariant, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonSize, type IconButtonState, type IconButtonType, LAYOUT_SYSTEM, Logo, type LogoColor, type LogoProps, type LogoSize, type LogoType, MEDIA_QUERIES, Pagination, type PaginationProps, RadioButton, RadioButtonGroup, type RadioButtonGroupProps, type RadioButtonProps, SelectBox, type SelectBoxClassName, type SelectBoxProps, type SelectBoxSize, type SelectBoxState, type SelectBoxStyle, type SelectBoxType, SelectHeader, type SelectHeaderProps, type SelectHeaderType, SelectMenu, type SelectMenuItem, SelectMenuOverlay, TAILWIND_SCREENS, Tab, TabGroup, type TabGroupProps, type TabItem, type TabProps, type TabSize, type TabType, Tag, type TagProps, type TagSize, type TagState, type TagType, Text, type TextDecoration, TextField, type TextFieldProps, type TextFieldSize, type TextFieldState, type TextFieldType, type TextProps, type TextVariant, TimePicker, type TimePickerProps, Toast, type ToastHorizontalAlign, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastSize, type ToastState, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPosition, type TooltipProps, type TooltipType, type UseCheckboxGroupOptions, type UseCheckboxGroupResult, formatDate, parseDate, useBreakpoint, useCheckboxGroup, useDialog, useMediaQuery, useToast };
package/dist/index.d.ts CHANGED
@@ -88,6 +88,16 @@ interface TabProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "
88
88
  }
89
89
  /** Tab 컴포넌트는 사용자가 여러 옵션 중 하나를 선택할 때 사용하는 탭 컴포넌트이다. */
90
90
  declare const Tab: ({ type, size, badge, label, mode, className, selected, disabled, onClick, ...props }: TabProps) => react_jsx_runtime.JSX.Element;
91
+ interface TabItem {
92
+ /** 탭 식별 값 */
93
+ value: string;
94
+ /** 탭 라벨 */
95
+ label: React.ReactNode;
96
+ /** 배지 표시 여부 */
97
+ badge?: boolean;
98
+ /** 개별 탭 비활성화 */
99
+ disabled?: boolean;
100
+ }
91
101
  interface TabGroupProps {
92
102
  /** 선택된 탭 값 (controlled) */
93
103
  value?: string;
@@ -103,14 +113,20 @@ interface TabGroupProps {
103
113
  mode?: boolean;
104
114
  /** 비활성화 상태 */
105
115
  disabled?: boolean;
106
- /** 자식 Tab 컴포넌트들 */
107
- children: React.ReactNode;
116
+ /** 데이터 배열 (items 사용 시 children 불필요) */
117
+ items?: readonly TabItem[];
118
+ /** 자식 Tab 컴포넌트들 (items 미사용 시) */
119
+ children?: React.ReactNode;
120
+ /** 탭 간 간격 (px 또는 CSS 문자열). 미지정 시 기본 gap 적용 */
121
+ gap?: number | string;
108
122
  /** 추가 CSS 클래스명 */
109
123
  className?: string;
124
+ /** 인라인 스타일 */
125
+ style?: React.CSSProperties;
110
126
  }
111
127
  /** Tab.Group은 여러 Tab을 그룹화하여 단일 선택을 관리한다. */
112
128
  declare const TabGroup: {
113
- ({ value: valueProp, defaultValue, onChange, type, size, mode, disabled, children, className, }: TabGroupProps): react_jsx_runtime.JSX.Element;
129
+ ({ value: valueProp, defaultValue, onChange, type, size, mode, disabled, items, children, gap, className, style, }: TabGroupProps): react_jsx_runtime.JSX.Element;
114
130
  displayName: string;
115
131
  };
116
132
 
@@ -962,7 +978,7 @@ declare const Badge: ({ type, variant, value, maxValue, className, ...props }: B
962
978
 
963
979
  type TagType = "solid" | "outline" | "weak";
964
980
  type TagSize = "medium" | "small";
965
- type TagState = "enabled" | "error" | "progress" | "warning" | "success";
981
+ type TagState = "enabled" | "error" | "progressing" | "warning" | "success";
966
982
  interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
967
983
  /** 태그 타입 (solid, outline, weak) */
968
984
  type?: TagType;
@@ -1426,6 +1442,8 @@ interface TextFieldBaseProps {
1426
1442
  error?: boolean;
1427
1443
  /** Help text */
1428
1444
  description?: React.ReactNode;
1445
+ /** 컴포넌트 너비 (px 또는 CSS 문자열) */
1446
+ width?: number | string;
1429
1447
  /** 최대 문자 수 제한 */
1430
1448
  maxLength?: number;
1431
1449
  /**
@@ -1460,10 +1478,10 @@ interface TextFieldAreaProps extends TextFieldBaseProps, Omit<React.TextareaHTML
1460
1478
  /** 컴포넌트 타입: textarea */
1461
1479
  type: "area";
1462
1480
  /**
1463
- * textarea 높이 (px 또는 CSS 문자열). 내용이 넘치면 스크롤 생성.
1481
+ * textarea 높이 (px 또는 CSS 문자열). 고정 높이로 적용되며 내용이 넘치면 스크롤 생성.
1464
1482
  * @default 120
1465
1483
  */
1466
- minHeight?: number | string;
1484
+ height?: number | string;
1467
1485
  }
1468
1486
  type TextFieldProps = TextFieldInputProps | TextFieldAreaProps;
1469
1487
  /** TextField 컴포넌트는 사용자로부터 텍스트 입력을 받는 폼 컴포넌트입니다. input과 textarea를 통합합니다. */
@@ -1548,4 +1566,4 @@ declare const LAYOUT_SYSTEM: {
1548
1566
  };
1549
1567
  };
1550
1568
 
1551
- export { ActionButton, type ActionButtonProps, type AlertOptions, BREAKPOINTS, Badge, type BadgeProps, type BadgeType, type BadgeVariant, BreakpointProvider, ActionButton as Button, type ButtonColor, type ActionButtonProps as ButtonProps, type ButtonSize, type ButtonState, type ButtonType, Calendar, type CalendarProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, type ChipSize, type ChipType, type ChipVariant, type ConfirmOptions, DateInput, type DateInputProps, type DateInputSlot, type DateInputState, type DateInputType, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DatePickerSlot, type DatePickerType, Dialog, type DialogActionColor, type DialogActionItem, type DialogActionSize, type DialogActionType, type DialogAlign, type DialogFooterLayout, type DialogOptions, type DialogProps, DialogProvider, type DialogVariant, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonSize, type IconButtonState, type IconButtonType, LAYOUT_SYSTEM, Logo, type LogoColor, type LogoProps, type LogoSize, type LogoType, MEDIA_QUERIES, Pagination, type PaginationProps, RadioButton, RadioButtonGroup, type RadioButtonGroupProps, type RadioButtonProps, SelectBox, type SelectBoxClassName, type SelectBoxProps, type SelectBoxSize, type SelectBoxState, type SelectBoxStyle, type SelectBoxType, SelectHeader, type SelectHeaderProps, type SelectHeaderType, SelectMenu, type SelectMenuItem, SelectMenuOverlay, TAILWIND_SCREENS, Tab, TabGroup, type TabGroupProps, type TabProps, type TabSize, type TabType, Tag, type TagProps, type TagSize, type TagState, type TagType, Text, type TextDecoration, TextField, type TextFieldProps, type TextFieldSize, type TextFieldState, type TextFieldType, type TextProps, type TextVariant, TimePicker, type TimePickerProps, Toast, type ToastHorizontalAlign, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastSize, type ToastState, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPosition, type TooltipProps, type TooltipType, type UseCheckboxGroupOptions, type UseCheckboxGroupResult, formatDate, parseDate, useBreakpoint, useCheckboxGroup, useDialog, useMediaQuery, useToast };
1569
+ export { ActionButton, type ActionButtonProps, type AlertOptions, BREAKPOINTS, Badge, type BadgeProps, type BadgeType, type BadgeVariant, BreakpointProvider, ActionButton as Button, type ButtonColor, type ActionButtonProps as ButtonProps, type ButtonSize, type ButtonState, type ButtonType, Calendar, type CalendarProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipProps, type ChipSize, type ChipType, type ChipVariant, type ConfirmOptions, DateInput, type DateInputProps, type DateInputSlot, type DateInputState, type DateInputType, DatePicker, type DatePickerProps, type DatePickerRangeProps, type DatePickerSingleProps, type DatePickerSlot, type DatePickerType, Dialog, type DialogActionColor, type DialogActionItem, type DialogActionSize, type DialogActionType, type DialogAlign, type DialogFooterLayout, type DialogOptions, type DialogProps, DialogProvider, type DialogVariant, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonSize, type IconButtonState, type IconButtonType, LAYOUT_SYSTEM, Logo, type LogoColor, type LogoProps, type LogoSize, type LogoType, MEDIA_QUERIES, Pagination, type PaginationProps, RadioButton, RadioButtonGroup, type RadioButtonGroupProps, type RadioButtonProps, SelectBox, type SelectBoxClassName, type SelectBoxProps, type SelectBoxSize, type SelectBoxState, type SelectBoxStyle, type SelectBoxType, SelectHeader, type SelectHeaderProps, type SelectHeaderType, SelectMenu, type SelectMenuItem, SelectMenuOverlay, TAILWIND_SCREENS, Tab, TabGroup, type TabGroupProps, type TabItem, type TabProps, type TabSize, type TabType, Tag, type TagProps, type TagSize, type TagState, type TagType, Text, type TextDecoration, TextField, type TextFieldProps, type TextFieldSize, type TextFieldState, type TextFieldType, type TextProps, type TextVariant, TimePicker, type TimePickerProps, Toast, type ToastHorizontalAlign, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastSize, type ToastState, Toggle, type ToggleProps, type ToggleSize, Tooltip, type TooltipPosition, type TooltipProps, type TooltipType, type UseCheckboxGroupOptions, type UseCheckboxGroupResult, formatDate, parseDate, useBreakpoint, useCheckboxGroup, useDialog, useMediaQuery, useToast };