@hivcd-printshop/design-system 1.1.0 → 1.1.1

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { ComponentType, AnchorHTMLAttributes, ReactNode, Ref } from 'react';
 
 interface BackButtonProps {
     onClick?: () => void;
@@ -6,15 +7,16 @@ interface BackButtonProps {
 }
 declare const BackButton: ({ onClick, className }: BackButtonProps) => react.JSX.Element;
 
-interface CTAProps {
+interface CTAProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     primary?: boolean;
-    variable: CTAVariable;
+    alert?: boolean;
+    disabled?: boolean;
     label: string;
     onClick?: () => void;
     className?: string;
+    forModal?: boolean;
 }
-type CTAVariable = "disabled" | "default" | "pressed";
-declare const CTA: ({ primary, variable, label, onClick, className, }: CTAProps) => react.JSX.Element;
+declare const CTA: ({ primary, alert, disabled, label, onClick, className, forModal, ...props }: CTAProps) => react.JSX.Element;
 
 interface CategorySegmentProps {
     selected?: boolean;
@@ -70,9 +72,21 @@ type PrintColor$1 = "Plotter" | "Printer" | "Riso" | "Fluorescent" | "UV" | "See
 type RadioToggle = {
     title: string;
     content: string;
+    /**
+     * 선택 상태를 식별할 값. 표시 텍스트(title)와 분리하고 싶을 때 사용한다.
+     * 생략하면 title이 식별자로 쓰인다. onSelect도 이 값을 넘겨준다.
+     */
+    value?: string;
     badges?: string[];
-    /** 선택됐을 때 라디오 행에 입힐 배경색. 없으면 회색(gray00)으로 표시 */
+    /** 선택됐을 때 라디오 행에 입힐 배경색(팔레트). `color`가 있으면 무시된다. */
     printColor?: PrintColor$1;
+    /**
+     * 선택됐을 때 라디오 행에 입힐 임의 배경색(hex/rgb/CSS 변수 등).
+     * 고정 팔레트(printColor) 밖의 색이 필요할 때 사용한다.
+     */
+    color?: string;
+    /** 라디오 행(button)에 덧붙일 클래스. 보더/그룹 구분 등 앱별 커스터마이징 훅. */
+    className?: string;
     labelTextButton?: string;
     onClickTextButton?: () => void;
 };
@@ -80,14 +94,26 @@ interface SideRadioAccordionProps {
     step: number;
     title: string;
     radioToggleList: RadioToggle[];
-    /** 처음에 선택돼 있을 항목의 title */
+    /** controlled: 현재 선택된 항목의 value(없으면 title). `null`이면 미선택. */
+    selected?: string | null;
+    /** uncontrolled 초기 선택값. `selected`를 함께 주면 무시된다. */
     defaultSelected?: string;
-    onSelect?: (title: string) => void;
+    /** 선택이 바뀔 때 호출. 인자는 항목의 value(없으면 title). */
+    onSelect?: (value: string) => void;
+    /** 헤더(Stepper)를 스크롤 컨테이너 상단에 고정한다. */
+    stickyHeader?: boolean;
+    /** 헤더 클릭으로 접기/펼치기를 허용할지. false면 항상 펼쳐지고 chevron도 감춘다. 기본 true. */
+    collapsible?: boolean;
+    /** uncontrolled 펼침 초기값. 기본 true. */
+    defaultOpen?: boolean;
+    /** controlled 펼침 상태. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
     quantityLimitLabel?: string;
     onClickQuantityLimit?: () => void;
     className?: string;
 }
-declare const SideRadioAccordion: ({ step, title, radioToggleList, defaultSelected, onSelect, quantityLimitLabel, onClickQuantityLimit, className, }: SideRadioAccordionProps) => react.JSX.Element;
+declare const SideRadioAccordion: react.ForwardRefExoticComponent<SideRadioAccordionProps & react.RefAttributes<HTMLDivElement>>;
 
 interface TagProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     className?: string;
@@ -102,20 +128,30 @@ type Week = "thisWeek" | "nextWeek" | "twoWeeksLater";
 interface WeekNavigationProps {
     /** 표시 중인 주의 월요일(ISO "YYYY-MM-DD"). 범위 라벨(~금요일)을 여기서 계산한다. */
     date: string;
-    week: Week;
+    /** 3주 모델에 매핑되는 주차. `label`을 직접 주면 생략 가능. */
+    week?: Week;
+    /** 가운데 텍스트를 직접 지정(주어지면 week 기반 자동 라벨을 대체). */
+    label?: string;
+    /** 이전/다음 버튼 노출 여부를 명시적으로 제어. 생략 시 week로 자동 판단(thisWeek↔twoWeeksLater 경계). */
+    canPrev?: boolean;
+    canNext?: boolean;
     onPrevWeek?: () => void;
     onNextWeek?: () => void;
     className?: string;
 }
-declare const WeekNavigation: ({ date, week, onPrevWeek, onNextWeek, className, }: WeekNavigationProps) => react.JSX.Element;
+declare const WeekNavigation: react.ForwardRefExoticComponent<WeekNavigationProps & react.RefAttributes<HTMLDivElement>>;
 
 type PrintColor = "Plotter" | "Printer" | "Riso" | "Fluorescent" | "UV" | "Seet Cutting" | "Laser Cutting";
 type TimeSlotState = "none" | "default" | "disabled" | "selected";
 interface TimeSlot {
     time: string;
     state: TimeSlotState;
-    /** state가 "default"/"selected"일 때만 사용되는 hover 색상 */
+    /** state가 "default"/"selected"일 때만 사용되는 hover 색상(팔레트). `color`가 있으면 무시. */
     printColor?: PrintColor;
+    /** 고정 팔레트 밖의 임의 hover 색상(hex/rgb/CSS 변수 등). */
+    color?: string;
+    /** 셀(div)에 덧붙일 클래스. 보더/그룹 구분 등 앱별 커스터마이징 훅. */
+    className?: string;
 }
 interface DayColumn {
     /** 해당 요일의 ISO 날짜("YYYY-MM-DD") */
@@ -131,24 +167,63 @@ interface TimetableProps {
     onPrevWeek?: () => void;
     onNextWeek?: () => void;
     onSelectSlot?: (date: string, time: string) => void;
+    /**
+     * true면 열 너비가 고정폭(72px) 대신 컨테이너 폭에 맞춰 균등하게 늘어난다.
+     * 기존 고정폭 레이아웃이 필요하면 생략한다.
+     */
+    fluid?: boolean;
+    /** 상단 주간 네비게이션을 숨긴다(외부에서 별도로 렌더링할 때). */
+    hideWeekNavigation?: boolean;
+    /** 주간 네비게이션의 이전/다음 버튼 노출을 명시적으로 제어(생략 시 week로 자동 판단). */
+    canPrevWeek?: boolean;
+    canNextWeek?: boolean;
     className?: string;
 }
-declare const Timetable: ({ weekStart, week, days, onPrevWeek, onNextWeek, onSelectSlot, className, }: TimetableProps) => react.JSX.Element;
+declare const Timetable: react.ForwardRefExoticComponent<TimetableProps & react.RefAttributes<HTMLDivElement>>;
 
+/**
+ * href가 있는 항목을 실제 링크로 렌더링하기 위해 주입하는 컴포넌트.
+ * Next.js라면 `next/link`를 그대로 넘기면 된다.
+ * 주입하지 않으면 순수 `<a>`로 렌더링된다.
+ */
+type LinkComponent = ComponentType<Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "className" | "onClick" | "aria-current"> & {
+    children: ReactNode;
+    ref?: Ref<HTMLAnchorElement>;
+}>;
 type NavIcon = {
-    src: string;
+    /** 아이콘 이미지 URL. `icon`(ReactNode)과 택일해서 사용한다. */
+    src?: string;
+    /** 인라인 SVG 등 커스텀 노드. `src` 대신 사용한다. 선택 상태 대비를 위해 `currentColor` 사용을 권장. */
+    icon?: ReactNode;
     alt?: string;
+    /** 아이콘 옆에 함께 노출할 텍스트 라벨(예: "피드백"). 아이콘 없이 라벨만도 가능. */
+    label?: string;
+    /** key/상태 식별용 안정적 id(권장). 없으면 `src` → `label` 순으로 대체한다. */
+    id?: string;
+    /** 지정하면 `<a>`(또는 주입된 LinkComponent)로 렌더링된다. */
+    href?: string;
     onClick?: () => void;
-    /** true면 아이콘 배경을 검게 채워 강조한다(예: 알림/마이페이지 진입 상태) */
+    /** true면 아이콘 배경을 검게 채워 강조한다(예: 알림/마이페이지 진입 상태). */
     selected?: boolean;
+    /** 알림 개수 등 우상단 뱃지. `true`면 점(dot)만 표시. */
+    badge?: ReactNode;
     className?: string;
+    /** 렌더링된 `<a>`/`<button>` 엘리먼트로 전달되는 ref(외부 클릭 감지 등에 사용). */
+    ref?: Ref<HTMLElement>;
 };
 type LowerPartItem = {
     label: string;
+    /** key/상태 식별용 안정적 id(권장). 없으면 `label`을 사용한다. */
+    id?: string;
+    /** 지정하면 `<a>`(또는 주입된 LinkComponent)로 렌더링된다. */
+    href?: string;
     onClick?: () => void;
 };
 type UpperPartItem = {
     label: string;
+    id?: string;
+    href?: string;
+    onClick?: () => void;
     /** 이 상단 탭이 선택됐을 때 아래에 노출할 하위 메뉴 */
     lowerPartItemList: LowerPartItem[];
 };
@@ -157,17 +232,49 @@ interface TNBProps {
     upperPartItemList: UpperPartItem[];
     /** 우측 알림/마이페이지 등 아이콘 목록(로고 제외) */
     upperPartIconList: NavIcon[];
-    /** 처음에 선택돼 있을 상단 탭의 label */
+    /**
+     * controlled: 현재 선택된 상단 탭의 label.
+     * `null`을 넘기면 "선택된 탭 없음"(홈 등)으로 표시된다.
+     */
+    selected?: string | null;
+    /** uncontrolled 초기값. `selected`를 함께 넘기면 무시된다. 지정하지 않으면 선택된 탭이 없다. */
     defaultSelected?: string;
+    onSelectedChange?: (label: string) => void;
+    /** controlled: 현재 선택된 하위 메뉴 label. `null`이면 미선택. */
+    selectedLower?: string | null;
+    /** uncontrolled 초기값. */
+    defaultSelectedLower?: string;
+    onSelectedLowerChange?: (label: string) => void;
+    /** @deprecated `onSelectedChange`를 사용하세요. 하위 호환용 별칭입니다. */
     onSelectItem?: (label: string) => void;
+    /** href가 있는 항목을 렌더링할 링크 컴포넌트(Next.js면 `next/link`). */
+    linkComponent?: LinkComponent;
+    /** nav 랜드마크의 접근성 라벨. */
+    "aria-label"?: string;
     className?: string;
 }
-declare const TNB: ({ logo, upperPartItemList, upperPartIconList, defaultSelected, onSelectItem, className, }: TNBProps) => react.JSX.Element;
+declare const TNB: react.ForwardRefExoticComponent<TNBProps & react.RefAttributes<HTMLElement>>;
 
 interface ToastProps {
     message: string;
+    /**
+     * 표시 여부(controlled). 생략하면 항상 표시되는 순수 렌더 모드(하위 호환).
+     * `true`/`false`를 넘기면 페이드 인/아웃 + 언마운트를 컴포넌트가 스스로 처리한다.
+     */
+    open?: boolean;
+    /**
+     * 자동 소멸까지의 시간(ms). `0`/`null`이면 자동 소멸하지 않는다. 기본 3000.
+     * `open`이 `true`로 바뀔 때마다 타이머가 재시작된다.
+     */
+    duration?: number | null;
+    /** 자동 소멸 시각 또는 (배너 클릭 시) 호출. controlled 모드에서 `open`을 false로 되돌리는 데 사용. */
+    onClose?: () => void;
+    /**
+     * 화면 고정 위치. `"none"`이면 위치 스타일을 붙이지 않고 부모 레이아웃에 맡긴다(하위 호환 기본값).
+     */
+    position?: "top" | "bottom" | "none";
     className?: string;
 }
-declare const Toast: ({ message, className }: ToastProps) => react.JSX.Element;
+declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<HTMLDivElement>>;
 
-export { BackButton, type BackButtonProps, CTA, type CTAProps, type CTAVariable, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, type DayColumn, type LowerPartItem, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, Tag, type TagProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps };
+export { BackButton, type BackButtonProps, CTA, type CTAProps, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, type DayColumn, type LinkComponent, type LowerPartItem, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, Tag, type TagProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as react from 'react';
+import { ComponentType, AnchorHTMLAttributes, ReactNode, Ref } from 'react';
 
 interface BackButtonProps {
     onClick?: () => void;
@@ -6,15 +7,16 @@ interface BackButtonProps {
 }
 declare const BackButton: ({ onClick, className }: BackButtonProps) => react.JSX.Element;
 
-interface CTAProps {
+interface CTAProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     primary?: boolean;
-    variable: CTAVariable;
+    alert?: boolean;
+    disabled?: boolean;
     label: string;
     onClick?: () => void;
     className?: string;
+    forModal?: boolean;
 }
-type CTAVariable = "disabled" | "default" | "pressed";
-declare const CTA: ({ primary, variable, label, onClick, className, }: CTAProps) => react.JSX.Element;
+declare const CTA: ({ primary, alert, disabled, label, onClick, className, forModal, ...props }: CTAProps) => react.JSX.Element;
 
 interface CategorySegmentProps {
     selected?: boolean;
@@ -70,9 +72,21 @@ type PrintColor$1 = "Plotter" | "Printer" | "Riso" | "Fluorescent" | "UV" | "See
 type RadioToggle = {
     title: string;
     content: string;
+    /**
+     * 선택 상태를 식별할 값. 표시 텍스트(title)와 분리하고 싶을 때 사용한다.
+     * 생략하면 title이 식별자로 쓰인다. onSelect도 이 값을 넘겨준다.
+     */
+    value?: string;
     badges?: string[];
-    /** 선택됐을 때 라디오 행에 입힐 배경색. 없으면 회색(gray00)으로 표시 */
+    /** 선택됐을 때 라디오 행에 입힐 배경색(팔레트). `color`가 있으면 무시된다. */
     printColor?: PrintColor$1;
+    /**
+     * 선택됐을 때 라디오 행에 입힐 임의 배경색(hex/rgb/CSS 변수 등).
+     * 고정 팔레트(printColor) 밖의 색이 필요할 때 사용한다.
+     */
+    color?: string;
+    /** 라디오 행(button)에 덧붙일 클래스. 보더/그룹 구분 등 앱별 커스터마이징 훅. */
+    className?: string;
     labelTextButton?: string;
     onClickTextButton?: () => void;
 };
@@ -80,14 +94,26 @@ interface SideRadioAccordionProps {
     step: number;
     title: string;
     radioToggleList: RadioToggle[];
-    /** 처음에 선택돼 있을 항목의 title */
+    /** controlled: 현재 선택된 항목의 value(없으면 title). `null`이면 미선택. */
+    selected?: string | null;
+    /** uncontrolled 초기 선택값. `selected`를 함께 주면 무시된다. */
     defaultSelected?: string;
-    onSelect?: (title: string) => void;
+    /** 선택이 바뀔 때 호출. 인자는 항목의 value(없으면 title). */
+    onSelect?: (value: string) => void;
+    /** 헤더(Stepper)를 스크롤 컨테이너 상단에 고정한다. */
+    stickyHeader?: boolean;
+    /** 헤더 클릭으로 접기/펼치기를 허용할지. false면 항상 펼쳐지고 chevron도 감춘다. 기본 true. */
+    collapsible?: boolean;
+    /** uncontrolled 펼침 초기값. 기본 true. */
+    defaultOpen?: boolean;
+    /** controlled 펼침 상태. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
     quantityLimitLabel?: string;
     onClickQuantityLimit?: () => void;
     className?: string;
 }
-declare const SideRadioAccordion: ({ step, title, radioToggleList, defaultSelected, onSelect, quantityLimitLabel, onClickQuantityLimit, className, }: SideRadioAccordionProps) => react.JSX.Element;
+declare const SideRadioAccordion: react.ForwardRefExoticComponent<SideRadioAccordionProps & react.RefAttributes<HTMLDivElement>>;
 
 interface TagProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     className?: string;
@@ -102,20 +128,30 @@ type Week = "thisWeek" | "nextWeek" | "twoWeeksLater";
 interface WeekNavigationProps {
     /** 표시 중인 주의 월요일(ISO "YYYY-MM-DD"). 범위 라벨(~금요일)을 여기서 계산한다. */
     date: string;
-    week: Week;
+    /** 3주 모델에 매핑되는 주차. `label`을 직접 주면 생략 가능. */
+    week?: Week;
+    /** 가운데 텍스트를 직접 지정(주어지면 week 기반 자동 라벨을 대체). */
+    label?: string;
+    /** 이전/다음 버튼 노출 여부를 명시적으로 제어. 생략 시 week로 자동 판단(thisWeek↔twoWeeksLater 경계). */
+    canPrev?: boolean;
+    canNext?: boolean;
     onPrevWeek?: () => void;
     onNextWeek?: () => void;
     className?: string;
 }
-declare const WeekNavigation: ({ date, week, onPrevWeek, onNextWeek, className, }: WeekNavigationProps) => react.JSX.Element;
+declare const WeekNavigation: react.ForwardRefExoticComponent<WeekNavigationProps & react.RefAttributes<HTMLDivElement>>;
 
 type PrintColor = "Plotter" | "Printer" | "Riso" | "Fluorescent" | "UV" | "Seet Cutting" | "Laser Cutting";
 type TimeSlotState = "none" | "default" | "disabled" | "selected";
 interface TimeSlot {
     time: string;
     state: TimeSlotState;
-    /** state가 "default"/"selected"일 때만 사용되는 hover 색상 */
+    /** state가 "default"/"selected"일 때만 사용되는 hover 색상(팔레트). `color`가 있으면 무시. */
     printColor?: PrintColor;
+    /** 고정 팔레트 밖의 임의 hover 색상(hex/rgb/CSS 변수 등). */
+    color?: string;
+    /** 셀(div)에 덧붙일 클래스. 보더/그룹 구분 등 앱별 커스터마이징 훅. */
+    className?: string;
 }
 interface DayColumn {
     /** 해당 요일의 ISO 날짜("YYYY-MM-DD") */
@@ -131,24 +167,63 @@ interface TimetableProps {
     onPrevWeek?: () => void;
     onNextWeek?: () => void;
     onSelectSlot?: (date: string, time: string) => void;
+    /**
+     * true면 열 너비가 고정폭(72px) 대신 컨테이너 폭에 맞춰 균등하게 늘어난다.
+     * 기존 고정폭 레이아웃이 필요하면 생략한다.
+     */
+    fluid?: boolean;
+    /** 상단 주간 네비게이션을 숨긴다(외부에서 별도로 렌더링할 때). */
+    hideWeekNavigation?: boolean;
+    /** 주간 네비게이션의 이전/다음 버튼 노출을 명시적으로 제어(생략 시 week로 자동 판단). */
+    canPrevWeek?: boolean;
+    canNextWeek?: boolean;
     className?: string;
 }
-declare const Timetable: ({ weekStart, week, days, onPrevWeek, onNextWeek, onSelectSlot, className, }: TimetableProps) => react.JSX.Element;
+declare const Timetable: react.ForwardRefExoticComponent<TimetableProps & react.RefAttributes<HTMLDivElement>>;
 
+/**
+ * href가 있는 항목을 실제 링크로 렌더링하기 위해 주입하는 컴포넌트.
+ * Next.js라면 `next/link`를 그대로 넘기면 된다.
+ * 주입하지 않으면 순수 `<a>`로 렌더링된다.
+ */
+type LinkComponent = ComponentType<Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "className" | "onClick" | "aria-current"> & {
+    children: ReactNode;
+    ref?: Ref<HTMLAnchorElement>;
+}>;
 type NavIcon = {
-    src: string;
+    /** 아이콘 이미지 URL. `icon`(ReactNode)과 택일해서 사용한다. */
+    src?: string;
+    /** 인라인 SVG 등 커스텀 노드. `src` 대신 사용한다. 선택 상태 대비를 위해 `currentColor` 사용을 권장. */
+    icon?: ReactNode;
     alt?: string;
+    /** 아이콘 옆에 함께 노출할 텍스트 라벨(예: "피드백"). 아이콘 없이 라벨만도 가능. */
+    label?: string;
+    /** key/상태 식별용 안정적 id(권장). 없으면 `src` → `label` 순으로 대체한다. */
+    id?: string;
+    /** 지정하면 `<a>`(또는 주입된 LinkComponent)로 렌더링된다. */
+    href?: string;
     onClick?: () => void;
-    /** true면 아이콘 배경을 검게 채워 강조한다(예: 알림/마이페이지 진입 상태) */
+    /** true면 아이콘 배경을 검게 채워 강조한다(예: 알림/마이페이지 진입 상태). */
     selected?: boolean;
+    /** 알림 개수 등 우상단 뱃지. `true`면 점(dot)만 표시. */
+    badge?: ReactNode;
     className?: string;
+    /** 렌더링된 `<a>`/`<button>` 엘리먼트로 전달되는 ref(외부 클릭 감지 등에 사용). */
+    ref?: Ref<HTMLElement>;
 };
 type LowerPartItem = {
     label: string;
+    /** key/상태 식별용 안정적 id(권장). 없으면 `label`을 사용한다. */
+    id?: string;
+    /** 지정하면 `<a>`(또는 주입된 LinkComponent)로 렌더링된다. */
+    href?: string;
     onClick?: () => void;
 };
 type UpperPartItem = {
     label: string;
+    id?: string;
+    href?: string;
+    onClick?: () => void;
     /** 이 상단 탭이 선택됐을 때 아래에 노출할 하위 메뉴 */
     lowerPartItemList: LowerPartItem[];
 };
@@ -157,17 +232,49 @@ interface TNBProps {
     upperPartItemList: UpperPartItem[];
     /** 우측 알림/마이페이지 등 아이콘 목록(로고 제외) */
     upperPartIconList: NavIcon[];
-    /** 처음에 선택돼 있을 상단 탭의 label */
+    /**
+     * controlled: 현재 선택된 상단 탭의 label.
+     * `null`을 넘기면 "선택된 탭 없음"(홈 등)으로 표시된다.
+     */
+    selected?: string | null;
+    /** uncontrolled 초기값. `selected`를 함께 넘기면 무시된다. 지정하지 않으면 선택된 탭이 없다. */
     defaultSelected?: string;
+    onSelectedChange?: (label: string) => void;
+    /** controlled: 현재 선택된 하위 메뉴 label. `null`이면 미선택. */
+    selectedLower?: string | null;
+    /** uncontrolled 초기값. */
+    defaultSelectedLower?: string;
+    onSelectedLowerChange?: (label: string) => void;
+    /** @deprecated `onSelectedChange`를 사용하세요. 하위 호환용 별칭입니다. */
     onSelectItem?: (label: string) => void;
+    /** href가 있는 항목을 렌더링할 링크 컴포넌트(Next.js면 `next/link`). */
+    linkComponent?: LinkComponent;
+    /** nav 랜드마크의 접근성 라벨. */
+    "aria-label"?: string;
     className?: string;
 }
-declare const TNB: ({ logo, upperPartItemList, upperPartIconList, defaultSelected, onSelectItem, className, }: TNBProps) => react.JSX.Element;
+declare const TNB: react.ForwardRefExoticComponent<TNBProps & react.RefAttributes<HTMLElement>>;
 
 interface ToastProps {
     message: string;
+    /**
+     * 표시 여부(controlled). 생략하면 항상 표시되는 순수 렌더 모드(하위 호환).
+     * `true`/`false`를 넘기면 페이드 인/아웃 + 언마운트를 컴포넌트가 스스로 처리한다.
+     */
+    open?: boolean;
+    /**
+     * 자동 소멸까지의 시간(ms). `0`/`null`이면 자동 소멸하지 않는다. 기본 3000.
+     * `open`이 `true`로 바뀔 때마다 타이머가 재시작된다.
+     */
+    duration?: number | null;
+    /** 자동 소멸 시각 또는 (배너 클릭 시) 호출. controlled 모드에서 `open`을 false로 되돌리는 데 사용. */
+    onClose?: () => void;
+    /**
+     * 화면 고정 위치. `"none"`이면 위치 스타일을 붙이지 않고 부모 레이아웃에 맡긴다(하위 호환 기본값).
+     */
+    position?: "top" | "bottom" | "none";
     className?: string;
 }
-declare const Toast: ({ message, className }: ToastProps) => react.JSX.Element;
+declare const Toast: react.ForwardRefExoticComponent<ToastProps & react.RefAttributes<HTMLDivElement>>;
 
-export { BackButton, type BackButtonProps, CTA, type CTAProps, type CTAVariable, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, type DayColumn, type LowerPartItem, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, Tag, type TagProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps };
+export { BackButton, type BackButtonProps, CTA, type CTAProps, CategorySegment, type CategorySegmentProps, CategorySegmentedControl, type CategorySegmentedControlProps, type DayColumn, type LinkComponent, type LowerPartItem, type NavIcon, NoticeBadge, type NoticeBadgeProps, type NoticeBadgeVariable, NoticeBar, type NoticeBarBadgeVariable, type NoticeBarProps, type NoticeBarVariable, type RadioToggle, SearchBar, type SearchBarProps, SideRadioAccordion, type PrintColor$1 as SideRadioAccordionPrintColor, type SideRadioAccordionProps, TNB, type TNBProps, Tag, type TagProps, type TimeSlot, type TimeSlotState, Timetable, type PrintColor as TimetablePrintColor, type TimetableProps, TitleInput, type TitleInputProps, Toast, type ToastProps, type UpperPartItem, type Week, WeekNavigation, type WeekNavigationProps };