@bigtablet/design-system 3.3.0 → 3.4.0

package/README.md

@@ -174,6 +174,8 @@ pnpm build            # tsup + SCSS copy
 | | |
 |---|---|
 | 📚 [Components](./docs/COMPONENTS.md) | Props API + usage per component |
+| 🔄 [Migration](./docs/MIGRATION.md) | Deprecated prop migration guide |
+| 🎨 [Theming](./docs/THEMING.md) | Light/dark theme system guide |
 | 🏗️ [Architecture](./docs/ARCHITECTURE.md) | Project structure + design principles |
 | 🤝 [Contributing](./docs/CONTRIBUTING.md) | Dev setup + workflow |
 | 🧪 [Testing](./docs/TESTING.md) | Test patterns + a11y testing |

package/dist/index.css

@@ -2695,6 +2695,7 @@
   border: 1px solid var(--bt-color-border-default);
   border-radius: 12px;
   box-shadow: var(--bt-elevation-level1);
+  overflow: hidden;
 }
 [data-theme=dark] .dropdown_list {
   background: var(--bt-color-bg-solid-dim);
@@ -2705,10 +2706,6 @@
   }
 }
 .dropdown_list {
-  max-height: 18rem;
-  overflow-y: auto;
-  overflow-x: hidden;
-  padding: 4px 0;
   will-change: transform, opacity;
 }
 .dropdown_list_up {
@@ -2717,6 +2714,55 @@
   margin-top: 0;
   margin-bottom: 4px;
 }
+.dropdown_search {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--bt-color-border-default);
+}
+.dropdown_search_icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--bt-color-text-body);
+}
+.dropdown_search_input {
+  flex: 1 1 auto;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--bt-color-text-heading);
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0px;
+  transition: box-shadow 0.1s ease-in-out;
+}
+.dropdown_search_input::placeholder {
+  color: var(--bt-color-text-body);
+}
+.dropdown_search_input:focus-visible {
+  box-shadow: var(--bt-focus-ring);
+}
+.dropdown_options {
+  max-height: 18rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 4px 0;
+}
+.dropdown_empty {
+  padding: 12px 16px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0px;
+  color: var(--bt-color-text-caption);
+  text-align: center;
+}
 .dropdown_option {
   width: 100%;
   box-sizing: border-box;
@@ -2751,6 +2797,14 @@
   cursor: not-allowed;
   color: var(--bt-color-text-caption);
 }
+.dropdown_option_check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  color: var(--bt-color-accent-default);
+}
 .dropdown_option_icon {
   display: inline-flex;
   align-items: center;
@@ -2803,6 +2857,9 @@
   .dropdown_icon {
     transition: none;
   }
+  .dropdown_search_input {
+    transition: none;
+  }
 }
 
 /* src/ui/forms/date-picker/style.scss */
@@ -2887,6 +2944,124 @@
   height: 2px;
 }
 
+/* src/ui/overlay/drawer/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+.drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  background: var(--bt-color-bg-overlay);
+  z-index: 100;
+  will-change: opacity;
+}
+.drawer_placement_left {
+  justify-content: flex-start;
+}
+.drawer_placement_right {
+  justify-content: flex-end;
+}
+.drawer_placement_bottom {
+  align-items: flex-end;
+  justify-content: stretch;
+}
+.drawer_panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--bt-color-bg-solid);
+  box-shadow: var(--bt-elevation-level3);
+  max-width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  will-change: transform;
+}
+.drawer_placement_left .drawer_panel,
+.drawer_placement_right .drawer_panel {
+  height: 100%;
+}
+.drawer_placement_bottom .drawer_panel {
+  width: 100%;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+.drawer_close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--bt-color-text-caption);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.1s ease-in-out, color 0.1s ease-in-out;
+}
+.drawer_close:hover {
+  background: var(--bt-color-state-hover-on-light);
+  color: var(--bt-color-text-heading);
+}
+.drawer_close:focus-visible {
+  outline: none;
+  box-shadow: var(--bt-focus-ring);
+}
+.drawer_header {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  padding: 20px 24px;
+  padding-right: 48px;
+  border-bottom: 1px solid var(--bt-color-border-subtle);
+}
+.drawer_title {
+  margin: 0;
+  color: var(--bt-color-text-heading);
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 28px;
+  letter-spacing: 0px;
+}
+.drawer_body {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 24px;
+  color: var(--bt-color-text-body);
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 22.5px;
+  letter-spacing: 0px;
+}
+.drawer_footer {
+  flex: 0 0 auto;
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  padding: 16px 24px;
+  border-top: 1px solid var(--bt-color-border-subtle);
+}
+@media (prefers-reduced-motion: reduce) {
+  .drawer,
+  .drawer_panel,
+  .drawer_close {
+    transition: none;
+    animation: none;
+  }
+}
+
 /* src/ui/forms/file/style.scss */
 @keyframes skeleton_loading {
   0% {
@@ -4351,6 +4526,52 @@
   line-height: 20px;
   letter-spacing: 0px;
 }
+.table_th_checkbox,
+.table_td_checkbox {
+  box-sizing: border-box;
+  width: 48px;
+}
+.table_th_sortable {
+  padding: 0;
+}
+.table_sort_button {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  padding: 12px 16px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  transition: background 0.1s ease-in-out;
+}
+.table_sort_button:hover:not(:disabled) {
+  background: var(--bt-color-state-hover-on-light);
+}
+.table_sort_button:focus-visible {
+  outline: none;
+  box-shadow: var(--bt-focus-ring);
+}
+.table_sort_button:disabled {
+  cursor: not-allowed;
+  opacity: 0.38;
+}
+.table_align_center .table_sort_button {
+  justify-content: center;
+}
+.table_align_right .table_sort_button {
+  justify-content: flex-end;
+}
+.table_sort_icon {
+  flex-shrink: 0;
+  color: var(--bt-color-text-caption);
+  transition: color 0.1s ease-in-out;
+}
+.table_sort_icon_active {
+  color: var(--bt-color-text-heading);
+}
 .table_tbody .table_row {
   border-bottom: 1px solid var(--bt-color-border-default);
   transition: background-color 0.1s ease-in-out;
@@ -4374,6 +4595,12 @@
 .table_tbody .table_row_skeleton {
   pointer-events: none;
 }
+.table_tbody .table_row_selected {
+  background: var(--bt-color-accent-subtle);
+}
+.table_tbody .table_row_selected.table_row_hoverable:hover {
+  background: var(--bt-color-accent-muted);
+}
 .table_td {
   padding: 12px 16px;
   color: var(--bt-color-text-body);
@@ -4406,6 +4633,12 @@
   line-height: 18px;
   letter-spacing: 0px;
 }
+.table_size_sm .table_th_sortable {
+  padding: 0;
+}
+.table_size_sm .table_sort_button {
+  padding: 8px 12px;
+}
 .table_size_lg .table_th,
 .table_size_lg .table_td {
   padding: 16px 20px;
@@ -4422,6 +4655,12 @@
   line-height: 22.5px;
   letter-spacing: 0px;
 }
+.table_size_lg .table_th_sortable {
+  padding: 0;
+}
+.table_size_lg .table_sort_button {
+  padding: 16px 20px;
+}
 .table_sticky_header .table_thead {
   position: sticky;
   top: 0;
@@ -4436,6 +4675,13 @@
   line-height: 20px;
   letter-spacing: 0px;
 }
+@media (prefers-reduced-motion: reduce) {
+  .table_row,
+  .table_sort_button,
+  .table_sort_icon {
+    transition: none;
+  }
+}
 
 /* src/ui/forms/textfield/style.scss */
 @keyframes skeleton_loading {

package/dist/index.d.ts

@@ -742,6 +742,14 @@ declare const elevation: {
     readonly level5: "0 8px 10px -5px rgba(0, 0, 0, 0.20), 0 20px 20px 0px rgba(0, 0, 0, 0.12)";
 };
 
+declare const iconSize: {
+    readonly xs: 14;
+    readonly sm: 16;
+    readonly md: 18;
+    readonly lg: 20;
+    readonly xl: 32;
+};
+
 declare const motion: {
     readonly transition: {
         readonly fast: "0.1s ease-in-out";
@@ -1307,6 +1315,42 @@ interface DividerProps extends React$1.HTMLAttributes<HTMLHRElement> {
  */
 declare const Divider: ({ weight, className, ...props }: DividerProps) => React$1.JSX.Element;
 
+/** Drawer 가 미끄러져 들어오는 방향 (top 은 범위 외) */
+type DrawerPlacement = "left" | "right" | "bottom";
+interface DrawerProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** 드로어 열림 여부 */
+    open: boolean;
+    /** 드로어 닫기 콜백 */
+    onClose?: () => void;
+    /** 슬라이드 방향 (기본값: "right") */
+    placement?: DrawerPlacement;
+    /** 패널 크기 - left/right 는 너비, bottom 은 높이 (기본값: 360). number ⇒ px */
+    size?: number | string;
+    /** 드로어 제목 (헤더 h2, heading_small_bold) */
+    title?: React$1.ReactNode;
+    /** 하단 액션 영역 (Button들). 미지정 시 footer 영역 자체가 안 보임 */
+    footer?: React$1.ReactNode;
+    /** 오버레이 클릭 시 닫기 여부 (기본값: true) */
+    closeOnOverlay?: boolean;
+    /** 우상단 X 닫기 아이콘 표시 여부 (기본값: true) */
+    showCloseIcon?: boolean;
+    /** X 닫기 버튼 접근성 레이블 (기본값: "닫기") */
+    closeLabel?: string;
+    /** 드로어 접근성 레이블 (title 없을 때 사용, 기본값: "Dialog") */
+    ariaLabel?: string;
+}
+/**
+ * 화면 가장자리에서 미끄러져 들어오는 패널(Drawer)을 렌더링한다.
+ * react-spring 기반 방향별 슬라이드 진입/퇴출 + 포커스 트랩 + 바디 스크롤 잠금.
+ *
+ * @param props 드로어 속성
+ * @returns 열림 상태일 때 렌더링된 드로어, 닫힘 상태면 null
+ */
+declare const Drawer: {
+    ({ open, onClose, placement, size, title, footer, closeOnOverlay, showCloseIcon, closeLabel, ariaLabel, children, className, ...props }: DrawerProps): React$1.JSX.Element | null;
+    displayName: string;
+};
+
 type DropdownSize = "sm" | "md" | "lg";
 interface DropdownOption {
     value: string;
@@ -1321,7 +1365,8 @@ interface DropdownOption {
     /** 아이템 아래 구분선 표시 여부 */
     showDivider?: boolean;
 }
-interface DropdownProps {
+/** single/multiple 공통 속성 */
+interface DropdownCommonProps {
     /** 드롭다운 요소의 id (미입력 시 자동 생성) */
     id?: string;
     /** 드롭다운 위에 표시할 플로팅 라벨 텍스트 */
@@ -1330,14 +1375,6 @@ interface DropdownProps {
     placeholder?: string;
     /** 표시할 옵션 목록 */
     options: DropdownOption[];
-    /** 제어형 선택 값 */
-    value?: string | null;
-    /** 값 변경 콜백 (canonical). 선택된 값과 전체 옵션 객체를 전달합니다. */
-    onValueChange?: (value: string | null, option?: DropdownOption | null) => void;
-    /** @deprecated `onValueChange` 를 사용하세요. */
-    onChange?: (value: string | null, option?: DropdownOption | null) => void;
-    /** 비제어형 초기 선택 값 */
-    defaultValue?: string | null;
     /** 비활성화 여부 */
     disabled?: boolean;
     /** 드롭다운 크기 (기본값: "md") */
@@ -1356,14 +1393,53 @@ interface DropdownProps {
      * @deprecated textAlign은 더 이상 지원되지 않습니다.
      */
     textAlign?: "left" | "center";
+    /**
+     * 검색 가능 여부. 활성화 시 열린 패널 상단에 검색 입력이 표시되고, 옵션 `label` 부분 일치로 필터링됩니다.
+     * (기본값: false)
+     */
+    searchable?: boolean;
+    /** 검색 입력의 placeholder (기본값: "검색…") */
+    searchPlaceholder?: string;
+    /** 필터 결과가 0개일 때 표시할 텍스트 (기본값: "결과 없음") */
+    emptyText?: string;
+    /** 멀티 선택 요약 텍스트 (기본값: "N개 선택") */
+    selectedSummary?: (count: number) => string;
+}
+/** 단일 선택 (기본) */
+interface DropdownSingleProps extends DropdownCommonProps {
+    /** 다중 선택 모드 (기본값: false) */
+    multiple?: false;
+    /** 제어형 선택 값 */
+    value?: string | null;
+    /** 값 변경 콜백 (canonical). 선택된 값과 전체 옵션 객체를 전달합니다. */
+    onValueChange?: (value: string | null, option?: DropdownOption | null) => void;
+    /** @deprecated `onValueChange` 를 사용하세요. */
+    onChange?: (value: string | null, option?: DropdownOption | null) => void;
+    /** 비제어형 초기 선택 값 */
+    defaultValue?: string | null;
 }
+/** 다중 선택 */
+interface DropdownMultipleProps extends DropdownCommonProps {
+    /** 다중 선택 모드 */
+    multiple: true;
+    /** 제어형 선택 값 목록 */
+    value?: string[];
+    /** 값 변경 콜백 (canonical). 선택된 값 목록과 옵션 객체 목록을 전달합니다. */
+    onValueChange?: (values: string[], options: DropdownOption[]) => void;
+    /** @deprecated `onValueChange` 를 사용하세요. */
+    onChange?: (values: string[], options: DropdownOption[]) => void;
+    /** 비제어형 초기 선택 값 목록 */
+    defaultValue?: string[];
+}
+type DropdownProps = DropdownSingleProps | DropdownMultipleProps;
 /**
  * 드롭다운 컴포넌트를 렌더링한다.
- * 제어형/비제어형 상태를 지원하며, 키보드/마우스 상호작용과 플로팅 라벨을 관리한다.
+ * 제어형/비제어형 상태를 지원하며, 키보드/마우스 상호작용과 정적 라벨을 관리한다.
+ * `searchable` 로 라벨 부분 일치 검색을, `multiple` 로 다중 선택을 opt-in 할 수 있다.
  * @param props 드롭다운 속성
  * @returns 렌더링된 드롭다운 UI
  */
-declare const Dropdown: ({ id, label, placeholder, options, value, onValueChange, onChange, defaultValue, disabled, size, className, }: DropdownProps) => React$1.JSX.Element;
+declare const Dropdown: (props: DropdownProps) => React$1.JSX.Element;
 
 type FileInputVariant = "button" | "preview";
 interface FileInputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
@@ -1759,6 +1835,13 @@ interface SpinnerProps {
 declare const Spinner: ({ size, ariaLabel }: SpinnerProps) => React$1.JSX.Element;
 
 type TableSize = "sm" | "md" | "lg";
+type TableSortDirection = "asc" | "desc";
+interface TableSort {
+    /** 정렬 중인 컬럼의 `TableColumn.key` */
+    key: string;
+    /** 정렬 방향 */
+    direction: TableSortDirection;
+}
 interface TableColumn<T extends object> {
     /** 컬럼 식별자 - `data[key]` 자동 렌더링에도 쓰임 */
     key: string;
@@ -1770,8 +1853,26 @@ interface TableColumn<T extends object> {
     width?: string;
     /** 정렬 (기본값: "left") */
     align?: "left" | "center" | "right";
-}
-interface TableProps<T extends object> {
+    /** 정렬 가능한 컬럼 여부 (기본값: false). 클릭 시 `onSortChange` 발화 - 실제 정렬은 소비자가 수행 */
+    sortable?: boolean;
+}
+/** `selectable` 시 `rowKey` 를 요구하기 위한 판별 유니온 */
+type TableSelectionProps<T extends object> = {
+    /** 행 선택(체크박스 컬럼) 활성화 여부 */
+    selectable: true;
+    /** 행 고유 key 추출 함수 - `selectable` 사용 시 필수 */
+    rowKey: (row: T) => string;
+    /** 선택된 행 key 배열 (제어형) */
+    selectedKeys?: string[];
+    /** 선택 변경 콜백 */
+    onSelectionChange?: (keys: string[]) => void;
+} | {
+    selectable?: false;
+    rowKey?: (row: T) => string;
+    selectedKeys?: string[];
+    onSelectionChange?: (keys: string[]) => void;
+};
+type TableProps<T extends object> = {
     /** 컬럼 정의 */
     columns: TableColumn<T>[];
     /** 표시할 데이터 배열 */
@@ -1796,13 +1897,21 @@ interface TableProps<T extends object> {
     className?: string;
     /** 행 클릭 콜백 */
     onRowClick?: (item: T, index: number) => void;
-}
+    /** 현재 정렬 상태 (제어형). `undefined` 는 정렬 없음 */
+    sort?: TableSort;
+    /** 정렬 가능한 헤더 클릭 시 발화 (none→asc→desc→none 순환). DS는 데이터를 직접 정렬하지 않음 - 정렬된 `data` 를 다시 전달해야 함 */
+    onSortChange?: (sort: TableSort | undefined) => void;
+    /** 전체 선택 체크박스 aria-label (기본값: "전체 선택") */
+    selectAllAriaLabel?: string;
+    /** 개별 행 선택 체크박스 aria-label (기본값: (i) => `${i+1}번째 행 선택`) */
+    selectRowAriaLabel?: (index: number) => string;
+} & TableSelectionProps<T>;
 /**
  * 데이터 테이블을 렌더링한다. 로딩 중에는 헤더 유지, 바디에 스켈레톤 행을 표시한다.
  * @param props 테이블 속성
  * @returns 테이블 컴포넌트
  */
-declare const Table: <T extends object>({ columns, data, keyExtractor, emptyMessage, isLoading, skeletonRows, size, hoverable, stickyHeader, ariaLabel, className, onRowClick, }: TableProps<T>) => React$1.JSX.Element;
+declare const Table: <T extends object>({ columns, data, keyExtractor, emptyMessage, isLoading, skeletonRows, size, hoverable, stickyHeader, ariaLabel, className, onRowClick, sort, onSortChange, selectAllAriaLabel, selectRowAriaLabel, selectable, rowKey, selectedKeys, onSelectionChange, }: TableProps<T>) => React$1.JSX.Element;
 
 type ThemeMode = "light" | "dark" | "system";
 type ResolvedTheme = "light" | "dark";
@@ -2199,4 +2308,4 @@ interface GridProps extends React$1.HTMLAttributes<HTMLDivElement> {
  */
 declare const Grid: ({ cols, minColWidth, gap, rowGap, colGap, singleColOnMobile, as: Tag, ref, className, children, style, ...props }: GridProps) => React$1.JSX.Element;
 
-export { Accordion, type AccordionItem, type AccordionProps, AlertProvider, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeVariant, BottomNav, BottomNavItem, type BottomNavItemProps, type BottomNavProps, BottomNavSpacer, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardFooterAlign, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipType, Container, type ContainerProps, type ContainerSize, DatePicker, type DatePickerProps, Divider, type DividerProps, Dropdown, type DropdownOption, type DropdownProps, type DropdownSize, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, type ErrorStateVariant, FileInput, type FileInputProps, Grid, type GridCols, type GridGap, type GridProps, Hero, type HeroAction, type HeroAlign, type HeroHeight, type HeroOverlay, type HeroProps, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconProps, type ImeStrategy, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, MediaCard, type MediaCardImage, type MediaCardImagePosition, type MediaCardProps, type MediaCardShadow, Menu, type MenuItem, type MenuProps, Modal, type ModalProps, NavBar, type NavBarLayout, type NavBarLocaleConfig, type NavBarLocaleOption, type NavBarProps, type NavBarVariant, NavLink, type NavLinkProps, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Popover, type PopoverPlacement, type PopoverProps, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RadioProps, type ResolvedTheme, Section, type SectionBg, type SectionProps, type SectionSpacing, Sidebar, SidebarItem, type SidebarItemProps, type SidebarMode, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, type StackWrap, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableColumn, type TableProps, type TableSize, Tabs, type TabsProps, type TabsSize, type TabsVariant, TextField, type TextFieldProps, type TextFieldSize, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type ThemeMode, ThemeProvider, type ThemeProviderProps, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, cn, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useReducedMotion, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };
+export { Accordion, type AccordionItem, type AccordionProps, AlertProvider, Avatar, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeProps, type BadgeShape, type BadgeSize, type BadgeVariant, BottomNav, BottomNavItem, type BottomNavItemProps, type BottomNavProps, BottomNavSpacer, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardFooterAlign, type CardProps, type CardVariant, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipSize, type ChipTone, type ChipType, Container, type ContainerProps, type ContainerSize, DatePicker, type DatePickerProps, Divider, type DividerProps, Drawer, type DrawerPlacement, type DrawerProps, Dropdown, type DropdownOption, type DropdownProps, type DropdownSize, EmptyState, type EmptyStateProps, ErrorState, type ErrorStateProps, type ErrorStateVariant, FileInput, type FileInputProps, Grid, type GridCols, type GridGap, type GridProps, Hero, type HeroAction, type HeroAlign, type HeroHeight, type HeroOverlay, type HeroProps, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconProps, type ImeStrategy, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, MediaCard, type MediaCardImage, type MediaCardImagePosition, type MediaCardProps, type MediaCardShadow, Menu, type MenuItem, type MenuProps, Modal, type ModalProps, NavBar, type NavBarLayout, type NavBarLocaleConfig, type NavBarLocaleOption, type NavBarProps, type NavBarVariant, NavLink, type NavLinkProps, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Popover, type PopoverPlacement, type PopoverProps, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioGroupSize, type RadioProps, type ResolvedTheme, Section, type SectionBg, type SectionProps, type SectionSpacing, Sidebar, SidebarItem, type SidebarItemProps, type SidebarMode, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonProps, type SkeletonVariant, Spinner, type SpinnerProps, Stack, type StackAlign, type StackDirection, type StackGap, type StackJustify, type StackProps, type StackWrap, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, type TableColumn, type TableProps, type TableSize, type TableSort, type TableSortDirection, Tabs, type TabsProps, type TabsSize, type TabsVariant, TextField, type TextFieldProps, type TextFieldSize, Textarea, type TextareaProps, type TextareaResize, type TextareaSize, type ThemeMode, ThemeProvider, type ThemeProviderProps, ToastProvider, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, cn, colors, elevation, iconSize, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useReducedMotion, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };