@yeongseoksong/framework 1.3.1 → 1.5.0

package/dist/ui/index.d.ts

@@ -1,21 +1,26 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _mantine_core from '@mantine/core';
-import { MantineSize, TabsProps, TabsListProps, TabsPanelProps, TitleProps, TextProps, ButtonProps, BoxProps, TableProps, ModalProps, ThemeIconProps, ContainerProps, BadgeProps, TextInputProps, PasswordInputProps, TextareaProps, SelectProps, SkeletonProps, AnchorProps, StackProps, StyleProp, MantineColor, SimpleGridProps, CardProps as CardProps$1, MantineColorsTuple } from '@mantine/core';
+import { MantineSize, TabsProps, TabsListProps, TabsPanelProps, TitleProps, TextProps, ButtonProps, BoxProps, TableProps, ModalProps, ThemeIconProps, ContainerProps, BadgeProps, TextInputProps, PasswordInputProps, TextareaProps, JsonInputProps, NumberInputProps, SliderProps, InputWrapperProps, RatingProps, PinInputProps, SelectProps, NativeSelectProps, MultiSelectProps, AutocompleteProps, TagsInputProps, RadioGroupProps, SegmentedControlProps, CheckboxProps, SwitchProps, FileInputProps, ColorInputProps, SkeletonProps, AnchorProps, StackProps, StyleProp, MantineColor, SimpleGridProps, CardProps as CardProps$1, MantineColorsTuple } from '@mantine/core';
 import React$1, { ReactNode, ComponentPropsWithoutRef, AnchorHTMLAttributes } from 'react';
 import * as _mantine_core_lib_components_Modal_ModalCloseButton from '@mantine/core/lib/components/Modal/ModalCloseButton';
 import * as _mantine_core_lib_components_Modal_ModalBody from '@mantine/core/lib/components/Modal/ModalBody';
 import * as _mantine_core_lib_components_Modal_ModalTitle from '@mantine/core/lib/components/Modal/ModalTitle';
 import * as _mantine_core_lib_components_Modal_ModalHeader from '@mantine/core/lib/components/Modal/ModalHeader';
+import { DateInputProps, DatePickerInputProps, TimeInputProps } from '@mantine/dates';
+import { NotificationData, NotificationsProps } from '@mantine/notifications';
 
 interface LogoProps {
     size?: MantineSize;
 }
 declare function Logo(_props: LogoProps): react_jsx_runtime.JSX.Element;
 
+type SdTabsRootProps = TabsProps & {
+    syncHash?: boolean;
+};
 declare function SdPanel({ children, ...props }: TabsPanelProps): react_jsx_runtime.JSX.Element;
 declare const SdTabs: {
     Pills: {
-        (props: TabsProps): react_jsx_runtime.JSX.Element;
+        ({ syncHash, value, onChange, ...props }: SdTabsRootProps): react_jsx_runtime.JSX.Element;
         List: _mantine_core.MantineComponent<{
             props: TabsListProps;
             ref: HTMLDivElement;
@@ -31,7 +36,7 @@ declare const SdTabs: {
         Panel: typeof SdPanel;
     };
     Underline: {
-        (props: TabsProps): react_jsx_runtime.JSX.Element;
+        ({ syncHash, value, onChange, ...props }: SdTabsRootProps): react_jsx_runtime.JSX.Element;
         List: _mantine_core.MantineComponent<{
             props: TabsListProps;
             ref: HTMLDivElement;
@@ -47,7 +52,7 @@ declare const SdTabs: {
         Panel: typeof SdPanel;
     };
     Outline: {
-        (props: TabsProps): react_jsx_runtime.JSX.Element;
+        ({ syncHash, value, onChange, ...props }: SdTabsRootProps): react_jsx_runtime.JSX.Element;
         List: _mantine_core.MantineComponent<{
             props: TabsListProps;
             ref: HTMLDivElement;
@@ -64,7 +69,7 @@ declare const SdTabs: {
     };
 };
 declare const SdTabsPills: {
-    (props: TabsProps): react_jsx_runtime.JSX.Element;
+    ({ syncHash, value, onChange, ...props }: SdTabsRootProps): react_jsx_runtime.JSX.Element;
     List: _mantine_core.MantineComponent<{
         props: TabsListProps;
         ref: HTMLDivElement;
@@ -80,7 +85,7 @@ declare const SdTabsPills: {
     Panel: typeof SdPanel;
 };
 declare const SdTabsUnderline: {
-    (props: TabsProps): react_jsx_runtime.JSX.Element;
+    ({ syncHash, value, onChange, ...props }: SdTabsRootProps): react_jsx_runtime.JSX.Element;
     List: _mantine_core.MantineComponent<{
         props: TabsListProps;
         ref: HTMLDivElement;
@@ -96,7 +101,7 @@ declare const SdTabsUnderline: {
     Panel: typeof SdPanel;
 };
 declare const SdTabsOutline: {
-    (props: TabsProps): react_jsx_runtime.JSX.Element;
+    ({ syncHash, value, onChange, ...props }: SdTabsRootProps): react_jsx_runtime.JSX.Element;
     List: _mantine_core.MantineComponent<{
         props: TabsListProps;
         ref: HTMLDivElement;
@@ -372,23 +377,89 @@ declare const SdBadgePrimary: ({ children, ...props }: Props$1) => react_jsx_run
 declare const SdBadgeSuccess: ({ children, ...props }: Props$1) => react_jsx_runtime.JSX.Element;
 declare const SdBadgeWarning: ({ children, ...props }: Props$1) => react_jsx_runtime.JSX.Element;
 
+/** Input.Wrapper가 대신 받아 주는 필드들. */
+type WrapperFields = Pick<InputWrapperProps, 'label' | 'description' | 'error' | 'required' | 'withAsterisk'>;
+/** 라디오는 그룹 단위로 쓰인다 — 항목을 `data`로 받아 Select류와 호출부를 맞춘다. */
+interface SdRadioProps extends Omit<RadioGroupProps, 'children'> {
+    data: {
+        value: string;
+        label: ReactNode;
+        disabled?: boolean;
+    }[];
+    orientation?: 'horizontal' | 'vertical';
+}
+declare function SdInputRadio({ data, orientation, ...props }: SdRadioProps): react_jsx_runtime.JSX.Element;
 declare const SdInput: {
     /** 일반 텍스트 — 이름, 회사명 등 */
-    Text: ({ ...props }: TextInputProps) => react_jsx_runtime.JSX.Element;
+    Text: (props: TextInputProps) => react_jsx_runtime.JSX.Element;
     /** 이메일 입력 */
-    Email: ({ ...props }: TextInputProps) => react_jsx_runtime.JSX.Element;
+    Email: (props: TextInputProps) => react_jsx_runtime.JSX.Element;
     /** 비밀번호 입력 — 마스킹 토글 포함 */
-    Password: ({ ...props }: PasswordInputProps) => react_jsx_runtime.JSX.Element;
+    Password: (props: PasswordInputProps) => react_jsx_runtime.JSX.Element;
     /** 멀티라인 텍스트 — 문의 메시지 등 */
-    Textarea: ({ ...props }: TextareaProps) => react_jsx_runtime.JSX.Element;
+    Textarea: (props: TextareaProps) => react_jsx_runtime.JSX.Element;
+    /** JSON 입력 — 포맷·검증 버튼 포함 */
+    Json: (props: JsonInputProps) => react_jsx_runtime.JSX.Element;
+    /** 숫자 입력 — 증감 컨트롤 포함 */
+    Number: (props: NumberInputProps<number>) => react_jsx_runtime.JSX.Element;
+    /** 범위 선택 슬라이더 */
+    Slider: ({ label, description, error, required, withAsterisk, ...rest }: Omit<SliderProps, "label" | "error" | "description" | "required" | "withAsterisk"> & WrapperFields) => react_jsx_runtime.JSX.Element;
+    /** 별점 */
+    Rating: ({ label, description, error, required, withAsterisk, ...rest }: Omit<RatingProps, "label" | "error" | "description" | "required" | "withAsterisk"> & WrapperFields) => react_jsx_runtime.JSX.Element;
+    /** 인증번호 등 자리수가 고정된 코드 */
+    PinCode: ({ label, description, error, required, withAsterisk, ...rest }: Omit<PinInputProps, "label" | "error" | "description" | "required" | "withAsterisk"> & WrapperFields) => react_jsx_runtime.JSX.Element;
     /** 드롭다운 선택 */
-    Select: ({ ...props }: SelectProps) => react_jsx_runtime.JSX.Element;
+    Select: (props: SelectProps<string>) => react_jsx_runtime.JSX.Element;
+    /** 브라우저 기본 select — 모바일·간단한 목록 */
+    NativeSelect: (props: NativeSelectProps) => react_jsx_runtime.JSX.Element;
+    /** 다중 선택 */
+    MultiSelect: (props: MultiSelectProps<string>) => react_jsx_runtime.JSX.Element;
+    /** 입력하며 후보를 좁히는 자동완성(자유 입력 허용) */
+    Autocomplete: (props: AutocompleteProps) => react_jsx_runtime.JSX.Element;
+    /** 자유롭게 추가하는 태그 목록 */
+    Tags: (props: TagsInputProps) => react_jsx_runtime.JSX.Element;
+    /** 라디오 그룹 — data로 항목을 넘긴다 */
+    Radio: typeof SdInputRadio;
+    /** 두세 개 중 하나 — 탭처럼 보이는 선택 */
+    Segmented: ({ label, description, error, required, withAsterisk, ...rest }: Omit<SegmentedControlProps<string>, "label" | "error" | "description" | "required" | "withAsterisk"> & WrapperFields) => react_jsx_runtime.JSX.Element;
+    /** 체크박스 — getInputProps(name, { type: 'checkbox' }) */
+    Checkbox: (props: CheckboxProps) => react_jsx_runtime.JSX.Element;
+    /** 스위치 — 즉시 반영되는 on/off */
+    Switch: (props: SwitchProps) => react_jsx_runtime.JSX.Element;
+    /** 파일 선택 */
+    File: (props: FileInputProps<false>) => react_jsx_runtime.JSX.Element;
+    /** 색상 선택 */
+    Color: (props: ColorInputProps) => react_jsx_runtime.JSX.Element;
+    /** 날짜 — 직접 입력 + 달력 팝오버. 값은 'YYYY-MM-DD' 문자열 */
+    Date: (props: DateInputProps) => react_jsx_runtime.JSX.Element;
+    /** 기간 — 시작·종료 두 날짜 */
+    DateRange: (props: DatePickerInputProps<"range">) => react_jsx_runtime.JSX.Element;
+    /** 시각 */
+    Time: (props: TimeInputProps) => react_jsx_runtime.JSX.Element;
 };
-declare const SdInputText: ({ ...props }: TextInputProps) => react_jsx_runtime.JSX.Element;
-declare const SdInputEmail: ({ ...props }: TextInputProps) => react_jsx_runtime.JSX.Element;
-declare const SdInputPassword: ({ ...props }: PasswordInputProps) => react_jsx_runtime.JSX.Element;
-declare const SdInputTextarea: ({ ...props }: TextareaProps) => react_jsx_runtime.JSX.Element;
-declare const SdInputSelect: ({ ...props }: SelectProps) => react_jsx_runtime.JSX.Element;
+declare const SdInputText: (props: TextInputProps) => react_jsx_runtime.JSX.Element;
+declare const SdInputEmail: (props: TextInputProps) => react_jsx_runtime.JSX.Element;
+declare const SdInputPassword: (props: PasswordInputProps) => react_jsx_runtime.JSX.Element;
+declare const SdInputTextarea: (props: TextareaProps) => react_jsx_runtime.JSX.Element;
+declare const SdInputJson: (props: JsonInputProps) => react_jsx_runtime.JSX.Element;
+declare const SdInputNumber: (props: NumberInputProps<number>) => react_jsx_runtime.JSX.Element;
+declare const SdInputSlider: ({ label, description, error, required, withAsterisk, ...rest }: Omit<SliderProps, "label" | "error" | "description" | "required" | "withAsterisk"> & WrapperFields) => react_jsx_runtime.JSX.Element;
+declare const SdInputRating: ({ label, description, error, required, withAsterisk, ...rest }: Omit<RatingProps, "label" | "error" | "description" | "required" | "withAsterisk"> & WrapperFields) => react_jsx_runtime.JSX.Element;
+declare const SdInputPinCode: ({ label, description, error, required, withAsterisk, ...rest }: Omit<PinInputProps, "label" | "error" | "description" | "required" | "withAsterisk"> & WrapperFields) => react_jsx_runtime.JSX.Element;
+declare const SdInputSelect: (props: SelectProps<string>) => react_jsx_runtime.JSX.Element;
+declare const SdInputNativeSelect: (props: NativeSelectProps) => react_jsx_runtime.JSX.Element;
+declare const SdInputMultiSelect: (props: MultiSelectProps<string>) => react_jsx_runtime.JSX.Element;
+declare const SdInputAutocomplete: (props: AutocompleteProps) => react_jsx_runtime.JSX.Element;
+declare const SdInputTags: (props: TagsInputProps) => react_jsx_runtime.JSX.Element;
+declare const SdInputRadioGroup: typeof SdInputRadio;
+declare const SdInputSegmented: ({ label, description, error, required, withAsterisk, ...rest }: Omit<SegmentedControlProps<string>, "label" | "error" | "description" | "required" | "withAsterisk"> & WrapperFields) => react_jsx_runtime.JSX.Element;
+declare const SdInputCheckbox: (props: CheckboxProps) => react_jsx_runtime.JSX.Element;
+declare const SdInputSwitch: (props: SwitchProps) => react_jsx_runtime.JSX.Element;
+declare const SdInputFile: (props: FileInputProps<false>) => react_jsx_runtime.JSX.Element;
+declare const SdInputColor: (props: ColorInputProps) => react_jsx_runtime.JSX.Element;
+declare const SdInputDate: (props: DateInputProps) => react_jsx_runtime.JSX.Element;
+declare const SdInputDateRange: (props: DatePickerInputProps<"range">) => react_jsx_runtime.JSX.Element;
+declare const SdInputTime: (props: TimeInputProps) => react_jsx_runtime.JSX.Element;
 
 declare function SkeletonText({ width, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
 declare function SkeletonTitle({ width, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
@@ -434,6 +505,77 @@ declare const SdLinkBody: ({ children, onMouseEnter, onMouseLeave, ...props }: P
 declare const SdLinkSub: ({ children, onMouseEnter, onMouseLeave, ...props }: Props) => react_jsx_runtime.JSX.Element;
 declare const SdLinkHint: ({ children, onMouseEnter, onMouseLeave, ...props }: Props) => react_jsx_runtime.JSX.Element;
 
+/**
+ * 변형별 색·아이콘·기본 제목. 토스트의 유일한 출처다.
+ *
+ * `SdToast.Update`가 같은 맵을 읽어 이미 떠 있는 알림을 다른 변형으로 바꾸므로,
+ * 톤을 고치려면 여기만 고치면 된다.
+ */
+declare const toastStyles: {
+    /** 성공 — 저장·전송 완료 */
+    Success: {
+        color: "green";
+        icon: react_jsx_runtime.JSX.Element;
+        title: string;
+    };
+    /** 실패 — 요청 오류·검증 실패 */
+    Error: {
+        color: "red";
+        icon: react_jsx_runtime.JSX.Element;
+        title: string;
+    };
+    /** 주의 — 되돌릴 수 없는 동작 안내 등 */
+    Warning: {
+        color: "amber";
+        icon: react_jsx_runtime.JSX.Element;
+        title: string;
+    };
+    /** 안내 — 중립 정보 */
+    Info: {
+        color: "primary";
+        icon: react_jsx_runtime.JSX.Element;
+        title: string;
+    };
+    /** 진행 중 — 스피너 + 자동 닫힘 없음. Update로 결과 변형으로 바꾼다. */
+    Loading: {
+        loading: true;
+        autoClose: false;
+        withCloseButton: false;
+        title: string;
+    };
+};
+type ToastVariant = keyof typeof toastStyles;
+declare const SdToast: {
+    Success: (message: ReactNode, options?: Partial<NotificationData>) => string;
+    Error: (message: ReactNode, options?: Partial<NotificationData>) => string;
+    Warning: (message: ReactNode, options?: Partial<NotificationData>) => string;
+    Info: (message: ReactNode, options?: Partial<NotificationData>) => string;
+    Loading: (message: ReactNode, options?: Partial<NotificationData>) => string;
+    /**
+     * 이미 떠 있는 알림을 다른 변형으로 교체한다 — `Loading` → `Success`/`Error` 전환용.
+     * `loading: false`·`autoClose`를 먼저 깔아 두므로 스피너가 그대로 남지 않는다.
+     */
+    Update: (id: string, variant: ToastVariant, message: ReactNode, options?: Partial<NotificationData>) => string | undefined;
+    /** 특정 알림 닫기 */
+    Hide: (id: string) => string;
+    /** 떠 있는 알림 전부 닫기 */
+    Clean: () => void;
+};
+/**
+ * 토스트가 실제로 렌더되는 곳. `MantineProvider` 안에 **한 번** 놓는다.
+ * 이게 없으면 `SdToast.*` 호출은 조용히 아무 일도 하지 않는다.
+ * 소비자 앱에서 `@mantine/notifications/styles.css` 임포트도 필요하다.
+ */
+declare function SdToastProvider(props: NotificationsProps): react_jsx_runtime.JSX.Element;
+declare const SdToastSuccess: (message: ReactNode, options?: Partial<NotificationData>) => string;
+declare const SdToastError: (message: ReactNode, options?: Partial<NotificationData>) => string;
+declare const SdToastWarning: (message: ReactNode, options?: Partial<NotificationData>) => string;
+declare const SdToastInfo: (message: ReactNode, options?: Partial<NotificationData>) => string;
+declare const SdToastLoading: (message: ReactNode, options?: Partial<NotificationData>) => string;
+declare const SdToastUpdate: (id: string, variant: ToastVariant, message: ReactNode, options?: Partial<NotificationData>) => string | undefined;
+declare const SdToastHide: (id: string) => string;
+declare const SdToastClean: () => void;
+
 type TitleVariant = 'Display' | 'Section' | 'Card' | 'Sub';
 type ColorVariant = StyleProp<MantineColor> | undefined;
 interface TextBoxProps extends Omit<StackProps, 'title' | 'color'> {
@@ -761,6 +903,24 @@ declare const SdMap: {
 declare const SdMapSingle: typeof Single;
 declare const SdMapTabs: typeof Tabs;
 
+interface SdBreadcrumbProps extends BoxProps {
+    navItems: NavItem[];
+    /** 현재 경로. 생략하면 `usePathname()`으로 자동 추론한다. */
+    currentHref?: string;
+    /** 홈(첫 크럼) 링크 대상. 기본 `/`. */
+    homeHref?: string;
+    /** 홈 아이콘의 접근성 라벨. 기본 `홈`. */
+    homeLabel?: string;
+}
+/**
+ * 네비게이션 계층 기반 브레드크럼 — `홈 아이콘 > a > b > c`.
+ *
+ * navItems의 `parentId` 트리에서 현재 경로가 놓인 위치를 찾아 루트까지의 경로를 그린다.
+ * 조상 크럼은 클릭 가능한 링크(`SdLink.Sub`), 마지막(현재 페이지) 크럼은 href 없는
+ * `SdLink.Body`라 링크가 아닌 강조 텍스트(`SdText.Body`)로 폴백해 현재 위치를 나타낸다.
+ */
+declare function SdBreadcrumb({ navItems, currentHref, homeHref, homeLabel, ...boxProps }: SdBreadcrumbProps): react_jsx_runtime.JSX.Element;
+
 interface HeroCarouselProps {
     slides: HeroSlide[];
     children?: React$1.ReactNode;
@@ -771,7 +931,32 @@ interface HeaderProps {
     navItems: NavItem[];
     loginFlag?: boolean;
 }
-declare function SdHeader({ navItems, loginFlag }: HeaderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Mega 변형(기본) — 헤더 전체가 아래로 확장되며 하위 링크가 상위 항목 아래 컬럼으로
+ * 한꺼번에 노출되는 메가 메뉴.
+ */
+declare function MegaHeader({ navItems, loginFlag }: HeaderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Simple 변형 — 헤더 바 높이는 고정이고, 자식을 가진 상위 항목마다
+ * Mantine `Menu`가 하나씩 붙어 개별 드롭다운으로 열린다.
+ * 바가 자라지 않으므로 AppShell.Header 높이를 그대로 쓰는 레이아웃에 적합하다.
+ */
+declare function SimpleHeader({ navItems, loginFlag }: HeaderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Panel 변형 — Simple처럼 바 높이는 60px로 고정하고 상위 항목마다 Mantine `Menu`가 붙지만,
+ * 드롭다운 내부는 Mega와 동일한 그룹 레이아웃으로 편다: 손자가 없는 자식은 단일 링크,
+ * 손자가 있는 자식은 그룹 제목(`SdLink.Body`) 아래로 손자를 `SdLink.Sub`로 얹는다.
+ * Simple의 개별 드롭다운 안정성 + Mega의 풍부한 그룹 구성이 함께 필요할 때 쓴다.
+ */
+declare function PanelHeader({ navItems, loginFlag }: HeaderProps): react_jsx_runtime.JSX.Element;
+declare const SdHeader: typeof MegaHeader & {
+    Mega: typeof MegaHeader;
+    Simple: typeof SimpleHeader;
+    Panel: typeof PanelHeader;
+};
+declare const SdHeaderMega: typeof MegaHeader;
+declare const SdHeaderSimple: typeof SimpleHeader;
+declare const SdHeaderPanel: typeof PanelHeader;
 
 interface SdFooterProps {
     company: CompanyInfo;
@@ -830,14 +1015,109 @@ declare const SdErrorView: {
 declare const SdErrorViewPage: typeof Page;
 declare const SdErrorViewNotFound: typeof NotFound;
 
-declare function MainLayout({ children, navItems, companyInfo, loginFlag, }: {
+/** 소셜 로그인 제공자 — 아이콘·기본 라벨이 고정된 목록. */
+type LoginProvider = 'google' | 'kakao' | 'naver' | 'apple' | 'github';
+interface LoginSocial {
+    provider: LoginProvider;
+    /** 버튼 라벨. 생략하면 제공자 기본 라벨("구글로 로그인" 등)을 쓴다. */
+    label?: ReactNode;
+    /** OAuth 시작 핸들러. 리다이렉트가 필요하면 여기서 이동시킨다. */
+    onClick?: () => void;
+}
+/** 폼 제출 값. 비제어 폼이라 소비자는 이 값만 받아 인증 로직을 붙이면 된다. */
+interface LoginValues {
+    email: string;
+    password: string;
+    remember: boolean;
+}
+interface SdLoginViewProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    /** 제출 시 폼 값 전달. 소비자가 인증 호출을 담당한다. */
+    onSubmit?: (values: LoginValues) => void;
+    /** 제출 버튼 로딩 상태 */
+    loading?: boolean;
+    /** 인증 실패 메시지 — 폼 상단에 SdText.Error로 노출 */
+    error?: ReactNode;
+    submitLabel?: ReactNode;
+    /** 자동 로그인 체크박스 노출 여부 */
+    withRemember?: boolean;
+    /** 비밀번호 찾기 링크. 없으면 렌더하지 않는다. */
+    findPasswordHref?: string;
+    /** 회원가입 링크. 없으면 하단 안내가 사라진다. */
+    signUpHref?: string;
+    /** 소셜 로그인 버튼. 비어 있으면 구분선까지 함께 사라진다. */
+    socials?: LoginSocial[];
+    /** 폼 아래 추가 슬롯 — 약관 안내·사업자 정보 등 */
+    children?: ReactNode;
+    /** 화면 최소 높이. 카탈로그처럼 좁은 프레임에 담을 때 줄인다. */
+    mih?: string | number;
+}
+declare function Card({ title, description, mih, ...formProps }: SdLoginViewProps): react_jsx_runtime.JSX.Element;
+interface SdLoginSplitProps extends SdLoginViewProps {
+    brandTitle?: ReactNode;
+    brandDescription?: ReactNode;
+}
+declare function Split({ title, description, brandTitle, brandDescription, mih, ...formProps }: SdLoginSplitProps): react_jsx_runtime.JSX.Element;
+declare const SdLoginView: {
+    /** 중앙 정렬 카드 — 기본 로그인 화면 */
+    Card: typeof Card;
+    /** 좌측 브랜드 패널 + 우측 폼 — 넓은 화면용 */
+    Split: typeof Split;
+};
+declare const SdLoginViewCard: typeof Card;
+declare const SdLoginViewSplit: typeof Split;
+
+/** 결과 화면의 액션 버튼. SdButton은 component prop을 받지 못해 href가 아닌 onClick만 받는다. */
+interface ResultAction {
+    label: ReactNode;
+    onClick: () => void;
+}
+interface SdResultProps {
+    title?: ReactNode;
+    description?: ReactNode;
+    /** 주 액션 — filled primary */
+    primaryAction?: ResultAction;
+    /** 보조 액션 — ghost */
+    secondaryAction?: ResultAction;
+    /** 제목·설명과 버튼 사이 상세 슬롯 (주문번호 요약 등) */
+    children?: ReactNode;
+    /** 화면 최소 높이. 좁은 프레임에 담을 때 줄인다. SdErrorView와 같은 기본값. */
+    mih?: string | number;
+}
+declare const SdResult: {
+    /** 성공 — 가입 완료·결제 완료 등 */
+    Success: ({ title, description, primaryAction, secondaryAction, children, mih, }: SdResultProps) => react_jsx_runtime.JSX.Element;
+    /** 실패 — 결제 실패·처리 중 오류 등. 서버 오류·404는 SdErrorView를 쓴다. */
+    Error: ({ title, description, primaryAction, secondaryAction, children, mih, }: SdResultProps) => react_jsx_runtime.JSX.Element;
+};
+declare const SdResultSuccess: ({ title, description, primaryAction, secondaryAction, children, mih, }: SdResultProps) => react_jsx_runtime.JSX.Element;
+declare const SdResultError: ({ title, description, primaryAction, secondaryAction, children, mih, }: SdResultProps) => react_jsx_runtime.JSX.Element;
+
+/** 헤더 변형 선택자 — SdHeader의 네임스페이스 키와 1:1로 대응한다. */
+type HeaderVariant = 'mega' | 'simple' | 'panel';
+declare function MainLayout({ children, navItems, companyInfo, loginFlag, headerVariant, }: {
     children: React.ReactNode;
     navItems: NavItem[];
     companyInfo: CompanyInfo;
     loginFlag?: boolean;
+    /** 기본 `mega` — hover 시 헤더가 확장되는 메가 메뉴. `simple`은 바 높이 고정 + 개별 드롭다운. `panel`은 바 높이 고정 + 드롭다운 내부를 Mega식 그룹 컬럼으로. */
+    headerVariant?: HeaderVariant;
 }): react_jsx_runtime.JSX.Element;
 
-interface PageHeroBaseProps {
+/**
+ * 모든 변형이 공유하는 브레드크럼 설정.
+ * `navItems`가 있고 `breadcrumb`이 false가 아니면 본문 최상단에 브레드크럼을 그린다.
+ */
+interface BreadcrumbProps {
+    /** 브레드크럼용 네비 트리. 없으면 브레드크럼을 렌더하지 않는다. */
+    navItems?: NavItem[];
+    /** 브레드크럼 표시 여부. 기본 `true` — `navItems`가 있을 때만 실제로 그려진다. `false`로 끈다. */
+    breadcrumb?: boolean;
+    /** 현재 경로 강제 지정. 생략 시 `SdBreadcrumb`가 `usePathname()`으로 추론한다. */
+    currentHref?: string;
+}
+interface PageHeroBaseProps extends BreadcrumbProps {
     label?: ReactNode;
     title: ReactNode;
     description?: ReactNode;
@@ -846,22 +1126,26 @@ interface PageHeroBaseProps {
 interface WithImageProps extends PageHeroBaseProps {
     image?: string;
 }
-declare function Minimal({ label, title, description, children }: PageHeroBaseProps): react_jsx_runtime.JSX.Element;
-declare function Plain({ children }: {
+declare function Minimal({ label, title, description, children, navItems, breadcrumb, currentHref, }: PageHeroBaseProps): react_jsx_runtime.JSX.Element;
+declare function Plain({ children, navItems, breadcrumb, currentHref, }: BreadcrumbProps & {
     children: ReactNode;
 }): react_jsx_runtime.JSX.Element;
-declare function Image({ image, label, title, description, children }: WithImageProps): react_jsx_runtime.JSX.Element;
-declare function Brand({ label, title, description, children }: PageHeroBaseProps): react_jsx_runtime.JSX.Element;
+declare function Image({ image, label, title, description, children, navItems, breadcrumb, currentHref, }: WithImageProps): react_jsx_runtime.JSX.Element;
+declare function Brand({ label, title, description, children, navItems, breadcrumb, currentHref, }: PageHeroBaseProps): react_jsx_runtime.JSX.Element;
 declare const PageLayout: {
-    /** 이미지 배경 + 대각선 그라디언트 + 좌하단 텍스트 */
+    /** 사진 배경 + 하단 스크림 + 좌측 정렬 텍스트 */
     Image: typeof Image;
     /** SdTextBox.Section 타이틀 + Plain 컨테이너 */
     Minimal: typeof Minimal;
-    /** primary 그라디언트 배경 + 중앙 텍스트 */
+    /** slate 바탕 + primary 라이트 + 도트 텍스처 */
     Brand: typeof Brand;
     /** 히어로 없이 SdContainer + py="xl" 만 */
     Plain: typeof Plain;
 };
+declare const PageLayoutImage: typeof Image;
+declare const PageLayoutMinimal: typeof Minimal;
+declare const PageLayoutBrand: typeof Brand;
+declare const PageLayoutPlain: typeof Plain;
 
 declare const theme: {
     focusRing?: "auto" | "always" | "never" | undefined;
@@ -1011,4 +1295,4 @@ declare const theme: {
     } | undefined;
 };
 
-export { HeroCarousel, Logo, MainLayout, type NavItem, PageLayout, SdBadge, SdBadgeDefault, SdBadgePrimary, SdBadgeSuccess, SdBadgeWarning, SdButton, SdButtonCancel, SdButtonDelete, SdButtonDownload, SdButtonExcel, SdButtonGhost, SdButtonOutline, SdButtonPrimary, SdButtonSecondary, SdButtonSubmit, SdButtonWhite, SdClients, SdClientsGrid, SdClientsMarquee, SdContainer, SdCta, SdCtaBanner, SdCtaInline, SdCtaSubtle, SdErrorView, SdErrorViewNotFound, SdErrorViewPage, SdFaq, SdFaqDefault, SdFaqFilled, SdFaqWithHeader, SdFeatureSection, SdFeatures, SdFooter, SdHeader, SdInput, SdInputEmail, SdInputPassword, SdInputSelect, SdInputText, SdInputTextarea, SdLink, SdLinkBody, SdLinkHint, SdLinkStrong, SdLinkSub, SdMap, SdMapSingle, SdMapTabs, SdModal, SdNumberIcon, SdPricingCard, SdPricingCardDefault, SdPricingCardFeatured, SdPricingCardGrid, SdQuote, SdQuoteCard, SdQuotePlain, SdSkeleton, SdSkeletonAvatar, SdSkeletonCard, SdSkeletonImage, SdSkeletonText, SdSkeletonTitle, SdSolution, SdSolutionCard, SdSolutionCardGrid, SdSolutionCardItem, SdSolutionFiltered, SdSolutionList, SdSteps, SdStepsBubble, SdStepsCard, SdStepsSection, SdStepsStrip, SdTable, SdTableSpec, SdTabs, SdTabsOutline, SdTabsPills, SdTabsUnderline, SdTestimonial, SdTestimonialCard, SdTestimonialGrid, SdTestimonialStrip, SdText, SdTextBody, SdTextBox, SdTextBoxCard, SdTextBoxHero, SdTextBoxSection, SdTextBoxSub, SdTextError, SdTextEyebrow, SdTextHint, SdTextNumeric, SdTextStrong, SdTextSub, SdTimeline, SdTimelineSection, SdTitle, SdTitleCard, SdTitleDisplay, SdTitleSection, SdTitleSub, theme };
+export { type HeaderVariant, HeroCarousel, Logo, MainLayout, type NavItem, PageLayout, PageLayoutBrand, PageLayoutImage, PageLayoutMinimal, PageLayoutPlain, SdBadge, SdBadgeDefault, SdBadgePrimary, SdBadgeSuccess, SdBadgeWarning, SdBreadcrumb, SdButton, SdButtonCancel, SdButtonDelete, SdButtonDownload, SdButtonExcel, SdButtonGhost, SdButtonOutline, SdButtonPrimary, SdButtonSecondary, SdButtonSubmit, SdButtonWhite, SdClients, SdClientsGrid, SdClientsMarquee, SdContainer, SdCta, SdCtaBanner, SdCtaInline, SdCtaSubtle, SdErrorView, SdErrorViewNotFound, SdErrorViewPage, SdFaq, SdFaqDefault, SdFaqFilled, SdFaqWithHeader, SdFeatureSection, SdFeatures, SdFooter, SdHeader, SdHeaderMega, SdHeaderPanel, SdHeaderSimple, SdInput, SdInputAutocomplete, SdInputCheckbox, SdInputColor, SdInputDate, SdInputDateRange, SdInputEmail, SdInputFile, SdInputJson, SdInputMultiSelect, SdInputNativeSelect, SdInputNumber, SdInputPassword, SdInputPinCode, SdInputRadioGroup, SdInputRating, SdInputSegmented, SdInputSelect, SdInputSlider, SdInputSwitch, SdInputTags, SdInputText, SdInputTextarea, SdInputTime, SdLink, SdLinkBody, SdLinkHint, SdLinkStrong, SdLinkSub, SdLoginView, SdLoginViewCard, SdLoginViewSplit, SdMap, SdMapSingle, SdMapTabs, SdModal, SdNumberIcon, SdPricingCard, SdPricingCardDefault, SdPricingCardFeatured, SdPricingCardGrid, SdQuote, SdQuoteCard, SdQuotePlain, SdResult, SdResultError, SdResultSuccess, SdSkeleton, SdSkeletonAvatar, SdSkeletonCard, SdSkeletonImage, SdSkeletonText, SdSkeletonTitle, SdSolution, SdSolutionCard, SdSolutionCardGrid, SdSolutionCardItem, SdSolutionFiltered, SdSolutionList, SdSteps, SdStepsBubble, SdStepsCard, SdStepsSection, SdStepsStrip, SdTable, SdTableSpec, SdTabs, SdTabsOutline, SdTabsPills, SdTabsUnderline, SdTestimonial, SdTestimonialCard, SdTestimonialGrid, SdTestimonialStrip, SdText, SdTextBody, SdTextBox, SdTextBoxCard, SdTextBoxHero, SdTextBoxSection, SdTextBoxSub, SdTextError, SdTextEyebrow, SdTextHint, SdTextNumeric, SdTextStrong, SdTextSub, SdTimeline, SdTimelineSection, SdTitle, SdTitleCard, SdTitleDisplay, SdTitleSection, SdTitleSub, SdToast, SdToastClean, SdToastError, SdToastHide, SdToastInfo, SdToastLoading, SdToastProvider, SdToastSuccess, SdToastUpdate, SdToastWarning, theme };