@bigtablet/design-system 3.0.0 → 3.1.1

package/dist/index.css

@@ -718,6 +718,267 @@
   color: #fff;
 }
 
+/* src/ui/navigation/bottom-nav/style.scss */
+:root {
+  --bt-color-brand-primary: #121212;
+  --bt-color-brand-on-primary: #FFFFFF;
+  --bt-color-brand-primary-container: rgba(0, 0, 0, 0.05);
+  --bt-color-text-heading: #121212;
+  --bt-color-text-body: #666666;
+  --bt-color-text-caption: #888888;
+  --bt-color-text-brand: #121212;
+  --bt-color-text-inverse: #FFFFFF;
+  --bt-color-text-disabled: rgba(26, 26, 26, 0.38);
+  --bt-color-bg-solid: #FFFFFF;
+  --bt-color-bg-solid-dim: #F4F4F4;
+  --bt-color-bg-additive: rgba(0, 0, 0, 0.05);
+  --bt-color-bg-disabled: rgba(26, 26, 26, 0.12);
+  --bt-color-bg-overlay: rgba(0, 0, 0, 0.5);
+  --bt-color-bg-inverse-surface: #333333;
+  --bt-color-state-hover-on-light: rgba(0, 0, 0, 0.05);
+  --bt-color-state-pressed-on-light: rgba(26, 26, 26, 0.12);
+  --bt-color-state-focus-on-light: rgba(0, 0, 0, 0.08);
+  --bt-color-state-hover-on-dark: rgba(255, 255, 255, 0.05);
+  --bt-color-state-pressed-on-dark: rgba(255, 255, 255, 0.12);
+  --bt-color-state-focus-on-dark: rgba(255, 255, 255, 0.08);
+  --bt-color-border-default: #E5E5E5;
+  --bt-color-border-hover: #B3B3B3;
+  --bt-color-border-subtle: rgba(0, 0, 0, 0.08);
+  --bt-color-border-focus: #121212;
+  --bt-color-border-disabled: #F2F2F2;
+  --bt-color-status-error: #EF4444;
+  --bt-color-status-success: #10B981;
+  --bt-color-status-warning: #F59E0B;
+  --bt-color-status-info: #3B82F6;
+  --bt-color-accent-subtle: rgba(0, 0, 0, 0.05);
+  --bt-color-accent-muted: rgba(26, 26, 26, 0.12);
+  --bt-color-accent-light: #B3B3B3;
+  --bt-color-accent-default: #121212;
+  --bt-color-accent-strong: #121212;
+  --bt-color-accent-on-surface: #FFFFFF;
+  --bt-color-skeleton-base: #F3F3F3;
+  --bt-color-skeleton-wave: #f0f0f0;
+  --bt-color-skeleton-highlight: #fafafa;
+}
+[data-theme=dark] {
+  color-scheme: dark;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  --bt-color-text-heading: rgba(255, 255, 255, 0.95);
+  --bt-color-text-body: #B4C2CD;
+  --bt-color-text-caption: #B3B3B3;
+  --bt-color-text-inverse: #121212;
+  --bt-color-text-disabled: rgba(255, 255, 255, 0.38);
+  --bt-color-bg-solid: #1F2630;
+  --bt-color-bg-solid-dim: #303841;
+  --bt-color-bg-additive: rgba(255, 255, 255, 0.05);
+  --bt-color-bg-disabled: rgba(255, 255, 255, 0.12);
+  --bt-color-bg-overlay: rgba(0, 0, 0, 0.7);
+  --bt-color-bg-inverse-surface: #F4F4F4;
+  --bt-color-state-hover-on-light: rgba(255, 255, 255, 0.08);
+  --bt-color-state-pressed-on-light: rgba(255, 255, 255, 0.12);
+  --bt-color-state-focus-on-light: rgba(255, 255, 255, 0.12);
+  --bt-color-state-hover-on-dark: rgba(0, 0, 0, 0.08);
+  --bt-color-state-pressed-on-dark: rgba(26, 26, 26, 0.12);
+  --bt-color-state-focus-on-dark: rgba(26, 26, 26, 0.12);
+  --bt-color-border-default: #3D4852;
+  --bt-color-border-hover: #5A8DCB;
+  --bt-color-border-subtle: rgba(255, 255, 255, 0.12);
+  --bt-color-border-focus: #FFFFFF;
+  --bt-color-border-disabled: #303841;
+  --bt-color-brand-primary-container: rgba(255, 255, 255, 0.08);
+  --bt-color-accent-subtle: rgba(255, 255, 255, 0.08);
+  --bt-color-accent-muted: rgba(255, 255, 255, 0.12);
+  --bt-color-accent-light: #999999;
+  --bt-color-accent-default: #FFFFFF;
+  --bt-color-accent-strong: #FFFFFF;
+  --bt-color-accent-on-surface: #121212;
+  --bt-color-skeleton-base: #3D4852;
+  --bt-color-skeleton-wave: #3D4852;
+  --bt-color-skeleton-highlight: #47555E;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    color-scheme: dark;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    --bt-color-text-heading: rgba(255, 255, 255, 0.95);
+    --bt-color-text-body: #B4C2CD;
+    --bt-color-text-caption: #B3B3B3;
+    --bt-color-text-inverse: #121212;
+    --bt-color-text-disabled: rgba(255, 255, 255, 0.38);
+    --bt-color-bg-solid: #1F2630;
+    --bt-color-bg-solid-dim: #303841;
+    --bt-color-bg-additive: rgba(255, 255, 255, 0.05);
+    --bt-color-bg-disabled: rgba(255, 255, 255, 0.12);
+    --bt-color-bg-overlay: rgba(0, 0, 0, 0.7);
+    --bt-color-bg-inverse-surface: #F4F4F4;
+    --bt-color-state-hover-on-light: rgba(255, 255, 255, 0.08);
+    --bt-color-state-pressed-on-light: rgba(255, 255, 255, 0.12);
+    --bt-color-state-focus-on-light: rgba(255, 255, 255, 0.12);
+    --bt-color-state-hover-on-dark: rgba(0, 0, 0, 0.08);
+    --bt-color-state-pressed-on-dark: rgba(26, 26, 26, 0.12);
+    --bt-color-state-focus-on-dark: rgba(26, 26, 26, 0.12);
+    --bt-color-border-default: #3D4852;
+    --bt-color-border-hover: #5A8DCB;
+    --bt-color-border-subtle: rgba(255, 255, 255, 0.12);
+    --bt-color-border-focus: #FFFFFF;
+    --bt-color-border-disabled: #303841;
+    --bt-color-brand-primary-container: rgba(255, 255, 255, 0.08);
+    --bt-color-accent-subtle: rgba(255, 255, 255, 0.08);
+    --bt-color-accent-muted: rgba(255, 255, 255, 0.12);
+    --bt-color-accent-light: #999999;
+    --bt-color-accent-default: #FFFFFF;
+    --bt-color-accent-strong: #FFFFFF;
+    --bt-color-accent-on-surface: #121212;
+    --bt-color-skeleton-base: #3D4852;
+    --bt-color-skeleton-wave: #3D4852;
+    --bt-color-skeleton-highlight: #47555E;
+  }
+}
+:root {
+  --bt-focus-ring: 0 0 0 3px rgba(0, 0, 0, 0.15);
+  --bt-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.30);
+  --bt-focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.30);
+}
+[data-theme=dark] {
+  --bt-focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.35);
+  --bt-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.45);
+  --bt-focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.45);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --bt-focus-ring: 0 0 0 3px rgba(255, 255, 255, 0.35);
+    --bt-focus-ring-error: 0 0 0 3px rgba(239, 68, 68, 0.45);
+    --bt-focus-ring-success: 0 0 0 3px rgba(16, 185, 129, 0.45);
+  }
+}
+:root {
+  --bt-elevation-level1: 0 1px 1px -1px rgba(0, 0, 0, 0.20), 0 3px 3px 0px rgba(0, 0, 0, 0.12);
+  --bt-elevation-level2: 0 2px 2px -2px rgba(0, 0, 0, 0.20), 0 6px 6px 0px rgba(0, 0, 0, 0.12);
+  --bt-elevation-level3: 0 3px 3px -3px rgba(0, 0, 0, 0.20), 0 9px 9px 0px rgba(0, 0, 0, 0.12);
+  --bt-elevation-level4: 0 5px 5px -5px rgba(0, 0, 0, 0.20), 0 15px 15px 0px rgba(0, 0, 0, 0.12);
+  --bt-elevation-level5: 0 8px 10px -5px rgba(0, 0, 0, 0.20), 0 20px 20px 0px rgba(0, 0, 0, 0.12);
+}
+[data-theme=dark] {
+  --bt-elevation-level1: 0 1px 2px 0 rgba(0, 0, 0, 0.45), 0 3px 6px 0 rgba(0, 0, 0, 0.30);
+  --bt-elevation-level2: 0 2px 4px 0 rgba(0, 0, 0, 0.45), 0 6px 12px 0 rgba(0, 0, 0, 0.30);
+  --bt-elevation-level3: 0 3px 6px 0 rgba(0, 0, 0, 0.50), 0 9px 18px 0 rgba(0, 0, 0, 0.35);
+  --bt-elevation-level4: 0 5px 10px 0 rgba(0, 0, 0, 0.55), 0 15px 30px 0 rgba(0, 0, 0, 0.40);
+  --bt-elevation-level5: 0 8px 16px 0 rgba(0, 0, 0, 0.60), 0 20px 40px 0 rgba(0, 0, 0, 0.45);
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --bt-elevation-level1: 0 1px 2px 0 rgba(0, 0, 0, 0.45), 0 3px 6px 0 rgba(0, 0, 0, 0.30);
+    --bt-elevation-level2: 0 2px 4px 0 rgba(0, 0, 0, 0.45), 0 6px 12px 0 rgba(0, 0, 0, 0.30);
+    --bt-elevation-level3: 0 3px 6px 0 rgba(0, 0, 0, 0.50), 0 9px 18px 0 rgba(0, 0, 0, 0.35);
+    --bt-elevation-level4: 0 5px 10px 0 rgba(0, 0, 0, 0.55), 0 15px 30px 0 rgba(0, 0, 0, 0.40);
+    --bt-elevation-level5: 0 8px 16px 0 rgba(0, 0, 0, 0.60), 0 20px 40px 0 rgba(0, 0, 0, 0.45);
+  }
+}
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+:root {
+  --bt-bottom-nav-height: 56px;
+  --bt-bottom-nav-safe-area: env(safe-area-inset-bottom, 0px);
+  --bt-bottom-nav-total-height: calc( var(--bt-bottom-nav-height) + var(--bt-bottom-nav-safe-area) );
+}
+.bottom_nav {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+  display: flex;
+  align-items: stretch;
+  justify-content: space-around;
+  height: var(--bt-bottom-nav-total-height);
+  padding-bottom: var(--bt-bottom-nav-safe-area);
+  background: var(--bt-color-bg-solid);
+  border-top: 1px solid var(--bt-color-border-default);
+}
+.bottom_nav_item {
+  flex: 1;
+  min-width: 0;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+  padding: 8px 4px;
+  border: none;
+  background: transparent;
+  color: var(--bt-color-text-caption);
+  cursor: pointer;
+  text-decoration: none;
+  min-height: 56px;
+  transition: color 0.1s cubic-bezier(0.16, 1, 0.3, 1), background 0.1s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.bottom_nav_item:hover:not(.bottom_nav_item_active) {
+  background: var(--bt-color-state-hover-on-light);
+  color: var(--bt-color-text-heading);
+}
+.bottom_nav_item:active:not(.bottom_nav_item_active) {
+  background: var(--bt-color-state-pressed-on-light);
+}
+.bottom_nav_item:focus-visible {
+  outline: none;
+  box-shadow: var(--bt-focus-ring);
+}
+.bottom_nav_item:disabled,
+.bottom_nav_item_disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+.bottom_nav_item_active {
+  color: var(--bt-color-accent-default);
+}
+.bottom_nav_item_active .bottom_nav_item_label {
+  font-weight: 600;
+}
+.bottom_nav_item_icon {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+.bottom_nav_item_badge {
+  position: absolute;
+  top: -4px;
+  right: -8px;
+  pointer-events: none;
+}
+.bottom_nav_item_label {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0px;
+  line-height: 1.2;
+  text-align: center;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.bottom_nav_spacer {
+  height: var(--bt-bottom-nav-total-height);
+  flex-shrink: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .bottom_nav_item {
+    transition: none;
+  }
+}
+
 /* src/ui/navigation/breadcrumb/style.scss */
 :root {
   --bt-color-brand-primary: #121212;
@@ -2175,6 +2436,102 @@
   padding: 8px;
   gap: 0;
 }
+@media (max-width: 599px) {
+  :root {
+    --bt-sidebar-height: 56px;
+    --bt-sidebar-safe-area: env(safe-area-inset-bottom, 0px);
+    --bt-sidebar-total-height: calc( var(--bt-sidebar-height) + var(--bt-sidebar-safe-area) );
+  }
+  .sidebar:not(.sidebar_static) {
+    position: fixed;
+    inset: auto 0 0 0;
+    width: 100% !important;
+    height: auto;
+    min-height: 0;
+    flex-direction: row;
+    border-right: none;
+    border-top: 1px solid var(--bt-color-border-default);
+    box-shadow: var(--bt-elevation-level2);
+    z-index: 100;
+    padding-bottom: var(--bt-sidebar-safe-area);
+  }
+  .sidebar:not(.sidebar_static) .sidebar_header,
+  .sidebar:not(.sidebar_static) .sidebar_footer,
+  .sidebar:not(.sidebar_static) .sidebar_collapse_btn,
+  .sidebar:not(.sidebar_static) .sidebar_section_label {
+    display: none;
+  }
+  .sidebar:not(.sidebar_static) .sidebar_nav {
+    flex: 1;
+    flex-direction: row;
+    align-items: stretch;
+    padding: 0;
+    gap: 0;
+    overflow: visible;
+  }
+  .sidebar:not(.sidebar_static) .sidebar_section {
+    display: contents;
+  }
+  .sidebar:not(.sidebar_static) .sidebar_item {
+    flex: 1;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    padding: 6px 4px;
+    min-height: 56px;
+    border-radius: 0;
+    color: var(--bt-color-text-body);
+  }
+  .sidebar:not(.sidebar_static) .sidebar_item:hover:not(.sidebar_item_active) {
+    background: var(--bt-color-state-hover-on-light);
+    color: var(--bt-color-text-heading);
+  }
+  .sidebar:not(.sidebar_static) .sidebar_item_active {
+    background: transparent;
+    color: var(--bt-color-text-heading);
+  }
+  .sidebar:not(.sidebar_static) .sidebar_item_active .sidebar_item_icon {
+    background: var(--bt-color-brand-primary);
+    color: var(--bt-color-brand-on-primary);
+    border-radius: 9999px;
+    padding: 0 16px;
+    width: auto;
+    height: 32px;
+    min-width: 56px;
+  }
+  .sidebar:not(.sidebar_static) .sidebar_item_active .sidebar_item_label {
+    font-weight: 600;
+  }
+  .sidebar:not(.sidebar_static) .sidebar_item_icon {
+    width: 24px;
+    height: 24px;
+    transition: background 0.1s ease-in-out, color 0.1s ease-in-out;
+  }
+  .sidebar:not(.sidebar_static) .sidebar_item_label {
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 16px;
+    letter-spacing: 0px;
+    flex: 0 0 auto;
+    line-height: 1.2;
+    text-align: center;
+    max-width: 100%;
+    white-space: nowrap;
+  }
+  .sidebar:not(.sidebar_static) .sidebar_item_trailing {
+    display: none;
+  }
+  .sidebar:not(.sidebar_static).sidebar_collapsed .sidebar_item_label {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+  }
+}
 
 /* src/ui/navigation/tabs/style.scss */
 :root {

package/dist/index.d.ts

@@ -171,6 +171,62 @@ interface BadgeProps extends React$1.HTMLAttributes<HTMLSpanElement> {
  */
 declare const Badge: ({ variant, shape, size, count, max, className, children, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
 
+interface BottomNavProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onChange"> {
+    /** 스크린 리더 레이블 (기본 "주요 메뉴") */
+    ariaLabel?: string;
+    /** 2–5 개의 `BottomNavItem` */
+    children: React$1.ReactNode;
+}
+/**
+ * 모바일 하단 네비게이션 바.
+ *
+ * `position: fixed; bottom: 0` 으로 viewport 하단 고정. iOS 홈 인디케이터 영역
+ * (`env(safe-area-inset-bottom)`) 자동 패딩. 본문이 가려지지 않게 페이지 끝에
+ * `<BottomNavSpacer />` 를 깔거나 `--bt-bottom-nav-height` CSS 변수로 padding 계산.
+ *
+ * @example
+ * ```tsx
+ * <BottomNav>
+ *   <BottomNavItem icon={<Home />} label="주문" active />
+ *   <BottomNavItem icon={<Menu />} label="메뉴" />
+ *   <BottomNavItem icon={<Chart />} label="매출" />
+ * </BottomNav>
+ * <BottomNavSpacer />
+ * ```
+ */
+declare const BottomNav: ({ ariaLabel, className, children, ...props }: BottomNavProps) => react_jsx_runtime.JSX.Element;
+interface BottomNavItemCommon {
+    /** 아이콘 (필수) */
+    icon: React$1.ReactNode;
+    /** 라벨 텍스트 (필수, 짧게 — 2–4자) */
+    label: string;
+    /** 활성 상태 */
+    active?: boolean;
+    /** 아이콘 우상단 dot/카운트 (Badge 등) */
+    badge?: React$1.ReactNode;
+}
+type BottomNavItemButton = BottomNavItemCommon & {
+    as?: "button";
+    href?: never;
+} & Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "children">;
+type BottomNavItemAnchor = BottomNavItemCommon & {
+    as: "a";
+    href: string;
+    /** anchor 에 native `disabled` 없음 — `aria-disabled` + `preventDefault` 로 처리. */
+    disabled?: boolean;
+} & Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "children" | "type">;
+type BottomNavItemProps = BottomNavItemButton | BottomNavItemAnchor;
+/**
+ * `BottomNav` 의 항목. icon + label 수직 스택.
+ * active 시 `aria-current="page"` 자동 부여.
+ */
+declare const BottomNavItem: (props: BottomNavItemProps) => react_jsx_runtime.JSX.Element;
+/**
+ * 페이지 본문 끝에 두면 `BottomNav` 가 콘텐츠를 가리지 않게 빈 공간 확보.
+ * `--bt-bottom-nav-height` (+ safe-area) 만큼 height.
+ */
+declare const BottomNavSpacer: ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
+
 interface BreadcrumbItem {
     /** 표시 텍스트 */
     label: React$1.ReactNode;
@@ -326,6 +382,7 @@ interface NavLinkProps extends React$1.AnchorHTMLAttributes<HTMLAnchorElement> {
 }
 declare const NavLink: ({ active, className, children, ...props }: NavLinkProps) => react_jsx_runtime.JSX.Element;
 
+type SidebarMode = "auto" | "static";
 interface SidebarProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onChange"> {
     /** 상단 brand 영역 (펼친 상태 로고) */
     header?: React$1.ReactNode;
@@ -347,6 +404,12 @@ interface SidebarProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onChan
     width?: number;
     /** collapsed 너비 (기본 64px) */
     collapsedWidth?: number;
+    /**
+     * 반응형 모드 (기본 `"auto"`).
+     * - `"auto"`: viewport `< 600px` 에서 자동으로 하단 bar 로 변신.
+     * - `"static"`: 어떤 viewport 에서도 좌측 rail 유지 (admin desktop-only).
+     */
+    mode?: SidebarMode;
 }
 /**
  * admin/dashboard 좌측 네비게이션.
@@ -363,20 +426,25 @@ interface SidebarProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onChan
  * </Sidebar>
  * ```
  */
-declare const Sidebar: ({ header, headerCollapsed, footer, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, collapsible, toggleLabel, width, collapsedWidth, className, children, style, ...props }: SidebarProps) => react_jsx_runtime.JSX.Element;
-interface SidebarItemProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement> {
+declare const Sidebar: ({ header, headerCollapsed, footer, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, collapsible, toggleLabel, width, collapsedWidth, mode, className, children, style, ...props }: SidebarProps) => react_jsx_runtime.JSX.Element;
+interface SidebarItemCommon {
     /** 왼쪽 아이콘 */
     icon?: React$1.ReactNode;
     /** 현재 활성 상태 */
     active?: boolean;
     /** 오른쪽 trailing (Badge 등) */
     trailing?: React$1.ReactNode;
-    /** 링크 컴포넌트 (Next Link 등). `asChild` 패턴 — `as="a" href="..."` */
-    as?: "button" | "a";
-    /** as="a"일 때 사용 */
-    href?: string;
 }
-declare const SidebarItem: ({ icon, active, trailing, as, href, className, children, type, ...props }: SidebarItemProps) => react_jsx_runtime.JSX.Element;
+type SidebarItemButton = SidebarItemCommon & {
+    as?: "button";
+    href?: never;
+} & React$1.ButtonHTMLAttributes<HTMLButtonElement>;
+type SidebarItemAnchor = SidebarItemCommon & {
+    as: "a";
+    href: string;
+} & Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "type">;
+type SidebarItemProps = SidebarItemButton | SidebarItemAnchor;
+declare const SidebarItem: (props: SidebarItemProps) => react_jsx_runtime.JSX.Element;
 interface SidebarSectionProps extends React$1.HTMLAttributes<HTMLDivElement> {
     /** 섹션 라벨 (collapsed 상태에선 hidden) */
     label?: string;
@@ -1866,4 +1934,4 @@ interface GridProps extends React$1.HTMLAttributes<HTMLDivElement> {
  */
 declare const Grid: ({ cols, minColWidth, gap, rowGap, colGap, singleColOnMobile, as: Tag, className, children, style, ...props }: GridProps) => react_jsx_runtime.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, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Card, type CardProps, 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, 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, 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, Radio, type RadioProps, type ResolvedTheme, Section, type SectionBg, type SectionProps, type SectionSpacing, Sidebar, SidebarItem, type SidebarItemProps, 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 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, 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 CardProps, 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, 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, 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, Radio, 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 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, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };

package/dist/index.js

@@ -1,10 +1,10 @@
 "use client";
 import './index.css';
-import * as React16 from 'react';
+import * as React17 from 'react';
 import { createContext, useRef, useState, useLayoutEffect, useId, useEffect, useContext, useCallback, useMemo, Fragment } from 'react';
 import { useSpring, animated } from '@react-spring/web';
 import { ChevronDown, Globe, ChevronRight, ChevronLeft, Check, Image, X, XCircle, AlertTriangle, CheckCircle2, Info, Bell } from 'lucide-react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
 // src/utils/cn.ts
@@ -38,8 +38,8 @@ var FOCUSABLE_SELECTORS = [
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
 function useFocusTrap(containerRef, isActive) {
-  const previousActiveElement = React16.useRef(null);
-  React16.useEffect(() => {
+  const previousActiveElement = React17.useRef(null);
+  React17.useEffect(() => {
     if (!isActive) return;
     const container = containerRef.current;
     if (!container) return;
@@ -91,7 +91,7 @@ function useSpringHover({
   scale = 1.02,
   lift = -2
 } = {}) {
-  const [hovered, setHovered] = React16.useState(false);
+  const [hovered, setHovered] = React17.useState(false);
   const style = useSpring({
     transform: hovered ? `translateY(${lift}px) scale(${scale})` : "translateY(0px) scale(1)",
     config: { tension: 320, friction: 22 }
@@ -139,7 +139,7 @@ var Accordion = ({
   ...props
 }) => {
   const isControlled = controlledKeys !== void 0;
-  const [internalKeys, setInternalKeys] = React16.useState(defaultOpenKeys);
+  const [internalKeys, setInternalKeys] = React17.useState(defaultOpenKeys);
   const open = isControlled ? controlledKeys ?? [] : internalKeys;
   const toggle = (key) => {
     const isOpen = open.includes(key);
@@ -205,7 +205,7 @@ var Avatar = ({
   style,
   ...props
 }) => {
-  const [imgFailed, setImgFailed] = React16.useState(false);
+  const [imgFailed, setImgFailed] = React17.useState(false);
   const showImage = src && !imgFailed;
   const initials = getInitials(name);
   return /* @__PURE__ */ jsx(
@@ -263,6 +263,89 @@ var Badge = ({
     }
   );
 };
+var BottomNav = ({
+  ariaLabel = "\uC8FC\uC694 \uBA54\uB274",
+  className,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      className: cn("bottom_nav", className),
+      "aria-label": ariaLabel,
+      ...props,
+      children
+    }
+  );
+};
+var BottomNavItem = (props) => {
+  const {
+    icon,
+    label,
+    active,
+    badge,
+    as = "button",
+    className,
+    disabled,
+    ...rest
+  } = props;
+  const classes = cn(
+    "bottom_nav_item",
+    active && "bottom_nav_item_active",
+    disabled && "bottom_nav_item_disabled",
+    className
+  );
+  const ariaCurrent = active ? "page" : void 0;
+  const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsxs("span", { className: "bottom_nav_item_icon", "aria-hidden": "true", children: [
+      icon,
+      badge && /* @__PURE__ */ jsx("span", { className: "bottom_nav_item_badge", children: badge })
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "bottom_nav_item_label", children: label })
+  ] });
+  if (as === "a") {
+    const { href, onClick: onClick2, ...anchorRest } = rest;
+    return (
+      // biome-ignore lint/a11y/useValidAnchor: navigation link with optional active state
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          className: classes,
+          href,
+          "aria-current": ariaCurrent,
+          "aria-disabled": disabled ? "true" : void 0,
+          tabIndex: disabled ? -1 : void 0,
+          onClick: (e) => {
+            if (disabled) {
+              e.preventDefault();
+              return;
+            }
+            onClick2?.(e);
+          },
+          ...anchorRest,
+          children: content
+        }
+      )
+    );
+  }
+  const { type, onClick, ...buttonRest } = rest;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: type ?? "button",
+      className: classes,
+      disabled,
+      "aria-current": ariaCurrent,
+      onClick,
+      ...buttonRest,
+      children: content
+    }
+  );
+};
+var BottomNavSpacer = ({ className, ...props }) => {
+  return /* @__PURE__ */ jsx("div", { className: cn("bottom_nav_spacer", className), "aria-hidden": "true", ...props });
+};
 var Breadcrumb = ({
   items,
   separator,
@@ -309,11 +392,11 @@ var EmptyState = ({
   ] });
 };
 var Menu = ({ items, trigger, align = "start" }) => {
-  const [open, setOpen] = React16.useState(false);
-  const wrapperRef = React16.useRef(null);
-  const menuId = React16.useId();
+  const [open, setOpen] = React17.useState(false);
+  const wrapperRef = React17.useRef(null);
+  const menuId = React17.useId();
   const style = useSpringPresence({ visible: open, from: "translateY(-4px)" });
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     if (!open) return;
     const handleClick = (e) => {
       if (!wrapperRef.current?.contains(e.target)) setOpen(false);
@@ -328,7 +411,7 @@ var Menu = ({ items, trigger, align = "start" }) => {
       document.removeEventListener("keydown", handleEsc);
     };
   }, [open]);
-  const triggerWithProps = React16.cloneElement(
+  const triggerWithProps = React17.cloneElement(
     trigger,
     {
       onClick: () => setOpen((o) => !o),
@@ -540,23 +623,30 @@ var Sidebar = ({
   toggleLabel = "\uC0AC\uC774\uB4DC\uBC14 \uD1A0\uAE00",
   width = 240,
   collapsedWidth = 64,
+  mode = "auto",
   className,
   children,
   style,
   ...props
 }) => {
   const isControlled = collapsedProp !== void 0;
-  const [internalCollapsed, setInternalCollapsed] = React16.useState(defaultCollapsed);
+  const [internalCollapsed, setInternalCollapsed] = React17.useState(defaultCollapsed);
   const collapsed = isControlled ? collapsedProp : internalCollapsed;
-  const toggle = React16.useCallback(() => {
+  const toggle = React17.useCallback(() => {
     const next = !collapsed;
     if (!isControlled) setInternalCollapsed(next);
     onCollapsedChange?.(next);
   }, [collapsed, isControlled, onCollapsedChange]);
+  const isStatic = mode === "static";
   return /* @__PURE__ */ jsxs(
     "aside",
     {
-      className: cn("sidebar", collapsed && "sidebar_collapsed", className),
+      className: cn(
+        "sidebar",
+        collapsed && "sidebar_collapsed",
+        isStatic && "sidebar_static",
+        className
+      ),
       style: { width: collapsed ? collapsedWidth : width, ...style },
       ...props,
       children: [
@@ -581,41 +671,31 @@ var Sidebar = ({
     }
   );
 };
-var SidebarItem = ({
-  icon,
-  active,
-  trailing,
-  as = "button",
-  href,
-  className,
-  children,
-  type,
-  ...props
-}) => {
+var SidebarItem = (props) => {
+  const { icon, active, trailing, as = "button", className, children, ...rest } = props;
   const classes = cn("sidebar_item", active && "sidebar_item_active", className);
   const ariaCurrent = active ? "page" : void 0;
-  if (as === "a" && href) {
+  const inner = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    icon && /* @__PURE__ */ jsx("span", { className: "sidebar_item_icon", "aria-hidden": "true", children: icon }),
+    /* @__PURE__ */ jsx("span", { className: "sidebar_item_label", children }),
+    trailing && /* @__PURE__ */ jsx("span", { className: "sidebar_item_trailing", children: trailing })
+  ] });
+  if (as === "a") {
+    const { href, ...anchorRest } = rest;
     return (
       // biome-ignore lint/a11y/useValidAnchor: navigation link with optional active state
-      /* @__PURE__ */ jsxs("a", { className: classes, href, "aria-current": ariaCurrent, ...props, children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "sidebar_item_icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ jsx("span", { className: "sidebar_item_label", children }),
-        trailing && /* @__PURE__ */ jsx("span", { className: "sidebar_item_trailing", children: trailing })
-      ] })
+      /* @__PURE__ */ jsx("a", { className: classes, href, "aria-current": ariaCurrent, ...anchorRest, children: inner })
     );
   }
-  return /* @__PURE__ */ jsxs(
+  const { type, ...buttonRest } = rest;
+  return /* @__PURE__ */ jsx(
     "button",
     {
       type: type ?? "button",
       className: classes,
       "aria-current": ariaCurrent,
-      ...props,
-      children: [
-        icon && /* @__PURE__ */ jsx("span", { className: "sidebar_item_icon", "aria-hidden": "true", children: icon }),
-        /* @__PURE__ */ jsx("span", { className: "sidebar_item_label", children }),
-        trailing && /* @__PURE__ */ jsx("span", { className: "sidebar_item_trailing", children: trailing })
-      ]
+      ...buttonRest,
+      children: inner
     }
   );
 };
@@ -625,9 +705,9 @@ var SidebarSection = ({ label, className, children, ...props }) => {
     children
   ] });
 };
-var TabsContext = React16.createContext(null);
+var TabsContext = React17.createContext(null);
 function useTabsContext() {
-  const ctx = React16.useContext(TabsContext);
+  const ctx = React17.useContext(TabsContext);
   if (!ctx) {
     throw new Error(
       '[Bigtablet DS] <Tab>, <TabList>, <TabPanel>\uC740 \uBC18\uB4DC\uC2DC <Tabs> \uC548\uC5D0 \uC788\uC5B4\uC57C \uD569\uB2C8\uB2E4.\n\n\uC62C\uBC14\uB978 \uC0AC\uC6A9 \uC608:\n  <Tabs defaultValue="a">\n    <TabList>\n      <Tab value="a">A</Tab>\n    </TabList>\n    <TabPanel value="a">...</TabPanel>\n  </Tabs>'
@@ -646,17 +726,17 @@ var Tabs = ({
   ...props
 }) => {
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = React16.useState(defaultValue);
+  const [internalValue, setInternalValue] = React17.useState(defaultValue);
   const value = isControlled ? controlledValue : internalValue;
-  const setValue = React16.useCallback(
+  const setValue = React17.useCallback(
     (v) => {
       if (!isControlled) setInternalValue(v);
       onValueChange?.(v);
     },
     [isControlled, onValueChange]
   );
-  const idPrefix = React16.useId();
-  const ctx = React16.useMemo(
+  const idPrefix = React17.useId();
+  const ctx = React17.useMemo(
     () => ({ value, setValue, variant, size, idPrefix }),
     [value, setValue, variant, size, idPrefix]
   );
@@ -664,10 +744,10 @@ var Tabs = ({
 };
 var TabList = ({ ariaLabel, className, children, ...props }) => {
   const { variant } = useTabsContext();
-  const listRef = React16.useRef(null);
-  const [indicator, setIndicator] = React16.useState(null);
-  const [hasMounted, setHasMounted] = React16.useState(false);
-  React16.useLayoutEffect(() => {
+  const listRef = React17.useRef(null);
+  const [indicator, setIndicator] = React17.useState(null);
+  const [hasMounted, setHasMounted] = React17.useState(false);
+  React17.useLayoutEffect(() => {
     const list = listRef.current;
     if (!list) return;
     const update = () => {
@@ -802,18 +882,18 @@ var Tooltip = ({
   disabled = false,
   children
 }) => {
-  const [open, setOpen] = React16.useState(false);
-  const timerRef = React16.useRef(null);
-  const tooltipId = React16.useId();
-  const show = React16.useCallback(() => {
+  const [open, setOpen] = React17.useState(false);
+  const timerRef = React17.useRef(null);
+  const tooltipId = React17.useId();
+  const show = React17.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     timerRef.current = setTimeout(() => setOpen(true), delay);
   }, [delay]);
-  const hide = React16.useCallback(() => {
+  const hide = React17.useCallback(() => {
     if (timerRef.current) clearTimeout(timerRef.current);
     setOpen(false);
   }, []);
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     return () => {
       if (timerRef.current) clearTimeout(timerRef.current);
     };
@@ -831,7 +911,7 @@ var Tooltip = ({
     }
   })();
   const style = useSpringPresence({ visible: open, from: fromTransform });
-  const trigger = React16.cloneElement(children, {
+  const trigger = React17.cloneElement(children, {
     onMouseEnter: show,
     onMouseLeave: hide,
     onFocus: show,
@@ -1425,12 +1505,12 @@ var AlertModal = ({
   onCancel,
   onClose
 }) => {
-  const panelRef = React16.useRef(null);
-  const titleId = React16.useId();
-  const messageId = React16.useId();
+  const panelRef = React17.useRef(null);
+  const titleId = React17.useId();
+  const messageId = React17.useId();
   const [shouldRender, setShouldRender] = useState(isOpen);
   useFocusTrap(panelRef, isOpen);
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     if (isOpen) setShouldRender(true);
   }, [isOpen]);
   const overlayStyle = useSpring({
@@ -1533,12 +1613,12 @@ var Checkbox = ({
   ref,
   ...props
 }) => {
-  const inputRef = React16.useRef(null);
-  React16.useImperativeHandle(
+  const inputRef = React17.useRef(null);
+  React17.useImperativeHandle(
     ref,
     () => inputRef.current
   );
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     if (!inputRef.current) return;
     inputRef.current.indeterminate = Boolean(indeterminate);
   }, [indeterminate]);
@@ -1943,9 +2023,9 @@ var DatePicker = ({
   minDateSrFormat = "Minimum date: {date}",
   selectableRangeUntilTodaySrText = "Selectable up to today"
 }) => {
-  const groupId = React16.useId();
-  const constraintId = React16.useId();
-  const { todayYear, todayMonth, todayDay } = React16.useMemo(() => {
+  const groupId = React17.useId();
+  const constraintId = React17.useId();
+  const { todayYear, todayMonth, todayDay } = React17.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     return {
       todayYear: now.getFullYear(),
@@ -1954,7 +2034,7 @@ var DatePicker = ({
     };
   }, []);
   const endYear = endYearProp ?? todayYear + 10;
-  const parsed = React16.useMemo(() => {
+  const parsed = React17.useMemo(() => {
     if (!value) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = value.split("-").map(Number);
     return {
@@ -1963,7 +2043,7 @@ var DatePicker = ({
       day: d || 0
     };
   }, [value]);
-  const min = React16.useMemo(() => {
+  const min = React17.useMemo(() => {
     if (!minDate) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = minDate.split("-").map(Number);
     return {
@@ -1983,7 +2063,7 @@ var DatePicker = ({
       min.year > 0 && min.month > 0 && year === min.year && month === min.month ? min.day : 1
     )
   );
-  const maxDay = React16.useMemo(() => {
+  const maxDay = React17.useMemo(() => {
     if (!year || !month) return 31;
     const daysInMonth = getDaysInMonth(year, month);
     if (selectableRange === "until-today" && year === todayYear && month === todayMonth) {
@@ -1991,28 +2071,28 @@ var DatePicker = ({
     }
     return daysInMonth;
   }, [year, month, selectableRange, todayYear, todayMonth, todayDay]);
-  const yearOptions = React16.useMemo(
+  const yearOptions = React17.useMemo(
     () => range(startYear, maxYear).map((y) => ({
       value: String(y),
       label: String(y)
     })),
     [startYear, maxYear]
   );
-  const monthOptions = React16.useMemo(
+  const monthOptions = React17.useMemo(
     () => range(minMonth, Math.max(minMonth, maxMonth)).map((m) => ({
       value: String(m),
       label: pad(m)
     })),
     [minMonth, maxMonth]
   );
-  const dayOptions = React16.useMemo(
+  const dayOptions = React17.useMemo(
     () => range(minDay, Math.max(minDay, maxDay)).map((d) => ({
       value: String(d),
       label: pad(d)
     })),
     [minDay, maxDay]
   );
-  const emit = React16.useCallback(
+  const emit = React17.useCallback(
     (yy, mm, dd) => {
       if (mode === "year-month") {
         onChange(`${yy}-${pad(mm)}`);
@@ -2023,7 +2103,7 @@ var DatePicker = ({
     },
     [mode, onChange]
   );
-  const handleYearChange = React16.useCallback(
+  const handleYearChange = React17.useCallback(
     (raw) => {
       if (!raw) return;
       const newYear = Number(raw);
@@ -2040,14 +2120,14 @@ var DatePicker = ({
     },
     [month, day, min.year, min.month, selectableRange, todayYear, todayMonth, emit]
   );
-  const handleMonthChange = React16.useCallback(
+  const handleMonthChange = React17.useCallback(
     (raw) => {
       if (!raw || !year) return;
       emit(year, Number(raw), day || void 0);
     },
     [year, day, emit]
   );
-  const handleDayChange = React16.useCallback(
+  const handleDayChange = React17.useCallback(
     (raw) => {
       if (!raw || !year || !month) return;
       emit(year, month, Number(raw));
@@ -2135,10 +2215,10 @@ var FileInput = ({
   onChange,
   ...props
 }) => {
-  const inputId = React16.useId();
-  const helperId = React16.useId();
-  const inputRef = React16.useRef(null);
-  const [previewUrls, setPreviewUrls] = React16.useState([]);
+  const inputId = React17.useId();
+  const helperId = React17.useId();
+  const inputRef = React17.useRef(null);
+  const [previewUrls, setPreviewUrls] = React17.useState([]);
   const isPreviewVariant = variant === "preview";
   const showPreview = isPreviewVariant || preview;
   const handleChange = (e) => {
@@ -2176,7 +2256,7 @@ var FileInput = ({
     }
     onFiles?.(null);
   };
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     return () => {
       for (const url of previewUrls) {
         URL.revokeObjectURL(url);
@@ -2473,11 +2553,11 @@ var Modal = ({
   ariaLabel,
   ...props
 }) => {
-  const panelRef = React16.useRef(null);
-  const titleId = React16.useId();
-  const [shouldRender, setShouldRender] = React16.useState(open);
+  const panelRef = React17.useRef(null);
+  const titleId = React17.useId();
+  const [shouldRender, setShouldRender] = React17.useState(open);
   useFocusTrap(panelRef, open);
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     if (open) setShouldRender(true);
   }, [open]);
   const overlayStyle = useSpring({
@@ -2492,15 +2572,15 @@ var Modal = ({
     transform: open ? "scale(1) translateY(0px)" : "scale(0.96) translateY(-4px)",
     config: { tension: 280, friction: 28, clamp: !open }
   });
-  const handleEscape = React16.useEffectEvent((e) => {
+  const handleEscape = React17.useEffectEvent((e) => {
     if (e.key === "Escape") onClose?.();
   });
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     if (!open) return;
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [open]);
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     if (!open) return;
     const body = document.body;
     const openModals = parseInt(body.dataset.openModals || "0", 10);
@@ -2580,12 +2660,12 @@ var OtpInput = ({
   ariaLabel = "OTP \uC785\uB825",
   className
 }) => {
-  const inputsRef = React16.useRef([]);
-  const isTypingRef = React16.useRef(false);
-  React16.useEffect(() => {
+  const inputsRef = React17.useRef([]);
+  const isTypingRef = React17.useRef(false);
+  React17.useEffect(() => {
     if (autoFocus) inputsRef.current[0]?.focus();
   }, [autoFocus]);
-  const digits = React16.useMemo(() => {
+  const digits = React17.useMemo(() => {
     const chars = value.split("").slice(0, length);
     while (chars.length < length) chars.push("");
     return chars;
@@ -2724,7 +2804,7 @@ var Pagination = ({
 }) => {
   const prevDisabled = page <= 1;
   const nextDisabled = page >= totalPages;
-  const items = React16.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
+  const items = React17.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
   return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": "Pagination", children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -2906,9 +2986,9 @@ var Table = ({
     isEmpty && /* @__PURE__ */ jsx("div", { className: "table_empty", role: "status", children: emptyMessage })
   ] });
 };
-var ThemeContext = React16.createContext(null);
+var ThemeContext = React17.createContext(null);
 var useTheme = () => {
-  const ctx = React16.useContext(ThemeContext);
+  const ctx = React17.useContext(ThemeContext);
   if (!ctx) {
     throw new Error(
       '[Bigtablet DS] useTheme\uB294 <ThemeProvider> \uC548\uC5D0\uC11C\uB9CC \uC0AC\uC6A9 \uAC00\uB2A5\uD569\uB2C8\uB2E4.\n\n\uC571 \uCD5C\uC0C1\uB2E8\uC5D0 <ThemeProvider>\uB85C \uAC10\uC2F8\uC8FC\uC138\uC694:\n  <ThemeProvider mode="system">\n    <YourApp />\n  </ThemeProvider>'
@@ -2932,14 +3012,14 @@ var ThemeProvider = ({
   targetSelector,
   children
 }) => {
-  const [mode, setModeState] = React16.useState(() => {
+  const [mode, setModeState] = React17.useState(() => {
     return readStored(storageKey) ?? defaultMode;
   });
-  const [systemDark, setSystemDark] = React16.useState(() => {
+  const [systemDark, setSystemDark] = React17.useState(() => {
     if (!isClient) return false;
     return window.matchMedia("(prefers-color-scheme: dark)").matches;
   });
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     if (!isClient) return;
     const mq = window.matchMedia("(prefers-color-scheme: dark)");
     const handler = (e) => setSystemDark(e.matches);
@@ -2947,7 +3027,7 @@ var ThemeProvider = ({
     return () => mq.removeEventListener("change", handler);
   }, []);
   const resolved = mode === "system" ? systemDark ? "dark" : "light" : mode;
-  React16.useEffect(() => {
+  React17.useEffect(() => {
     if (!isClient) return;
     const target = targetSelector ? document.querySelector(targetSelector) : document.documentElement;
     if (!target) return;
@@ -2957,7 +3037,7 @@ var ThemeProvider = ({
       target.setAttribute("data-theme", mode);
     }
   }, [mode, targetSelector]);
-  const setMode = React16.useCallback(
+  const setMode = React17.useCallback(
     (next) => {
       setModeState(next);
       if (storageKey && isClient) {
@@ -2969,7 +3049,7 @@ var ThemeProvider = ({
     },
     [storageKey]
   );
-  const value = React16.useMemo(
+  const value = React17.useMemo(
     () => ({ mode, resolved, setMode }),
     [mode, resolved, setMode]
   );
@@ -3075,7 +3155,7 @@ var TextField = ({
   ] });
 };
 TextField.displayName = "TextField";
-var ToastContext = React16.createContext(null);
+var ToastContext = React17.createContext(null);
 var VARIANT_ICONS = {
   success: /* @__PURE__ */ jsx(CheckCircle2, { size: 18 }),
   error: /* @__PURE__ */ jsx(XCircle, { size: 18 }),
@@ -3084,15 +3164,15 @@ var VARIANT_ICONS = {
   default: /* @__PURE__ */ jsx(Bell, { size: 18 })
 };
 var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
-  const [visible, setVisible] = React16.useState(true);
-  const closingRef = React16.useRef(false);
+  const [visible, setVisible] = React17.useState(true);
+  const closingRef = React17.useRef(false);
   const style = useSpringPresence({
     visible,
     from: "translateX(20px)",
     // 우측에서 슬라이드 인
     onExitComplete: () => onRemove(item.id)
   });
-  const close = React16.useCallback(() => {
+  const close = React17.useCallback(() => {
     if (closingRef.current) return;
     closingRef.current = true;
     setVisible(false);
@@ -3125,19 +3205,19 @@ var ToastProvider = ({
   maxCount = 5,
   closeAriaLabel = "Close"
 }) => {
-  const [toasts, setToasts] = React16.useState([]);
-  const [isMounted, setIsMounted] = React16.useState(false);
-  React16.useEffect(() => {
+  const [toasts, setToasts] = React17.useState([]);
+  const [isMounted, setIsMounted] = React17.useState(false);
+  React17.useEffect(() => {
     setIsMounted(true);
   }, []);
-  const addToast = React16.useCallback(
+  const addToast = React17.useCallback(
     (message, variant, duration = 3e3) => {
       const id = crypto.randomUUID();
       setToasts((prev) => [{ id, message, variant, duration }, ...prev].slice(0, maxCount));
     },
     [maxCount]
   );
-  const removeToast = React16.useCallback((id) => {
+  const removeToast = React17.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { addToast }, children: [
@@ -3199,7 +3279,7 @@ var Toggle = ({
   ...props
 }) => {
   const isControlled = checked !== void 0;
-  const [innerChecked, setInnerChecked] = React16.useState(!!defaultChecked);
+  const [innerChecked, setInnerChecked] = React17.useState(!!defaultChecked);
   const isOn = isControlled ? !!checked : innerChecked;
   const handleToggle = () => {
     if (disabled) return;
@@ -3361,4 +3441,4 @@ var Grid = ({
   );
 };
 
-export { Accordion, AlertProvider, Avatar, Badge, Breadcrumb, Button, Card, Checkbox, Chip, Container, DatePicker, Divider, Dropdown, EmptyState, FileInput, Grid, Hero, Icon, IconButton, LinearProgress, ListItem, MediaCard, Menu, Modal, NavBar, NavLink, OtpInput, Pagination, Radio, Section, Sidebar, SidebarItem, SidebarSection, Skeleton, Spinner, Stack, Tab, TabList, TabPanel, Table, Tabs, TextField, ThemeProvider, ToastProvider, Toggle, Tooltip, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, cn, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };
+export { Accordion, AlertProvider, Avatar, Badge, BottomNav, BottomNavItem, BottomNavSpacer, Breadcrumb, Button, Card, Checkbox, Chip, Container, DatePicker, Divider, Dropdown, EmptyState, FileInput, Grid, Hero, Icon, IconButton, LinearProgress, ListItem, MediaCard, Menu, Modal, NavBar, NavLink, OtpInput, Pagination, Radio, Section, Sidebar, SidebarItem, SidebarSection, Skeleton, Spinner, Stack, Tab, TabList, TabPanel, Table, Tabs, TextField, ThemeProvider, ToastProvider, Toggle, Tooltip, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, cn, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useFocusTrap, useSpringHover, useSpringPresence, useTheme, useToast, zIndex };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bigtablet/design-system",
-	"version": "3.0.0",
+	"version": "3.1.1",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",