@uxuissk/design-system 0.7.2 → 0.8.0

package/dist/types/index.d.ts

@@ -7,7 +7,7 @@ export declare namespace Accordion {
     var displayName: string;
 }
 
-export declare function AccordionItem({ title, children, open, onToggle, icon }: AccordionItemProps): JSX.Element;
+export declare function AccordionItem({ title, children, open, onToggle, icon, disabled }: AccordionItemProps): JSX.Element;
 
 export declare namespace AccordionItem {
     var displayName: string;
@@ -24,6 +24,8 @@ export declare interface AccordionItemProps {
     onToggle: () => void;
     /** Optional leading icon */
     icon?: default_2.ReactNode;
+    /** Disable interaction for this item */
+    disabled?: boolean;
 }
 
 export declare interface AccordionProps {
@@ -35,6 +37,7 @@ export declare interface AccordionProps {
         title: string;
         content: default_2.ReactNode;
         icon?: default_2.ReactNode;
+        disabled?: boolean;
     }[];
     /** Initially open item(s) */
     defaultOpen?: string | string[];
@@ -121,6 +124,11 @@ export declare interface AdvancedDataTableProps<T = Record<string, any>> {
 
 export declare type AdvancedTableSize = "sm" | "md" | "lg";
 
+/**
+ * Akita brand config — placeholder, theme TBD.
+ */
+export declare const akitaBrandConfig: ProductBrandConfig;
+
 export declare function Alert({ variant, title, children, dismissible, onDismiss, action, icon, className }: AlertProps): JSX.Element | null;
 
 declare interface AlertProps {
@@ -136,6 +144,173 @@ declare interface AlertProps {
 
 export declare type AlertVariant = "info" | "success" | "warning" | "error";
 
+/**
+ * AppShell — top-level layout shell for Sellsuki products.
+ *
+ * Combines AppShellProvider + TopNavbar + Sidebar + content frame.
+ * Handles responsive sidebar (desktop collapse, mobile drawer overlay).
+ * Sets data-product attribute for CSS theme token override.
+ *
+ * @example
+ * <AppShell product={sellsukiBrandConfig} user={user} navResolver={nav}>
+ *   <FeaturePageScaffold layout="list" ... />
+ * </AppShell>
+ */
+export declare function AppShell({ product, user, navResolver, ...rest }: AppShellProps): JSX.Element;
+
+export declare namespace AppShell {
+    var displayName: string;
+}
+
+/**
+ * The context value provided by AppShellProvider and consumed by useAppShell().
+ * Feature pages use this to read shell state and push breadcrumbs.
+ */
+export declare interface AppShellContextValue {
+    /** Whether the sidebar is currently open */
+    sidebarOpen: boolean;
+    /** Toggle sidebar open/closed */
+    setSidebarOpen: (open: boolean) => void;
+    /** The current authenticated user */
+    user: ShellUser | null;
+    /** The current product config */
+    product: ProductBrandConfig | null;
+    /** Current breadcrumb items */
+    breadcrumbs: BreadcrumbEntry[];
+    /**
+     * Set breadcrumbs from a feature page.
+     * Call this in a useEffect when the page mounts.
+     *
+     * @example
+     * const { setBreadcrumbs } = useAppShell();
+     * useEffect(() => {
+     *   setBreadcrumbs([
+     *     { label: "Orders", href: "/orders" },
+     *     { label: "Order #12345" },
+     *   ]);
+     * }, []);
+     */
+    setBreadcrumbs: (items: BreadcrumbEntry[]) => void;
+}
+
+/**
+ * Error boundary for AppShell content.
+ * Prevents a feature page crash from taking down the entire shell.
+ *
+ * @example
+ * <AppShellProvider ...>
+ *   <AppShellErrorBoundary fallback={<ErrorPage />}>
+ *     <FeaturePage />
+ *   </AppShellErrorBoundary>
+ * </AppShellProvider>
+ */
+export declare class AppShellErrorBoundary extends default_2.Component<AppShellErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: AppShellErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, info: default_2.ErrorInfo): void;
+    render(): string | number | bigint | boolean | Iterable<default_2.ReactNode> | Promise<string | number | bigint | boolean | default_2.ReactPortal | default_2.ReactElement<unknown, string | default_2.JSXElementConstructor<any>> | Iterable<default_2.ReactNode> | null | undefined> | JSX.Element | null | undefined;
+}
+
+declare interface AppShellErrorBoundaryProps {
+    children: default_2.ReactNode;
+    fallback?: default_2.ReactNode;
+}
+
+export declare interface AppShellFullContextValue extends AppShellContextValue {
+    /** Navigation groups resolved from navResolver */
+    navGroups: ShellSidebarGroup[];
+    /** Whether nav is loading (async navResolver in flight) */
+    navLoading: boolean;
+    /** Nav load error — display fallback nav when set */
+    navError: string | null;
+    /** Manually refresh nav (re-call navResolver) */
+    refreshNav: () => void;
+}
+
+export declare interface AppShellProps {
+    /** Product brand config — drives theme and brand identity */
+    product: ProductBrandConfig;
+    /** Authenticated user */
+    user: ShellUser;
+    /** Async nav resolver — permission-filtered nav groups */
+    navResolver?: NavResolver;
+    /** Currently active nav item ID */
+    activeItemId?: string;
+    /** Navigation handler — called when user clicks a nav item */
+    onNavigate?: (item: NavItem) => void;
+    /** Notification count (0 = hidden) */
+    notificationCount?: number;
+    /** Notification click handler */
+    onNotificationClick?: () => void;
+    /** User click handler (profile menu, logout) */
+    onUserClick?: () => void;
+    /** Search click handler */
+    onSearchClick?: () => void;
+    /** Show search in TopNavbar */
+    showSearch?: boolean;
+    /** App version string */
+    version?: string;
+    /** App version date */
+    versionDate?: string;
+    /** Whether content area has padding (default: true) */
+    contentPadding?: boolean;
+    /** Children — feature page content */
+    children: default_2.ReactNode;
+    /** Additional class name on root element */
+    className?: string;
+}
+
+export declare function AppShellProvider({ user, product, navResolver, sidebarOpen: controlledOpen, onSidebarChange, defaultSidebarOpen, children, }: AppShellProviderProps): JSX.Element;
+
+export declare namespace AppShellProvider {
+    var displayName: string;
+}
+
+export declare interface AppShellProviderProps {
+    /** The authenticated user for the session */
+    user?: ShellUser | null;
+    /** The product brand config — drives theme token override and brand identity */
+    product?: ProductBrandConfig | null;
+    /**
+     * Async nav resolver — called once on mount (and when user changes).
+     * Return permission-filtered SidebarGroups.
+     * If omitted the nav state is empty (product drives its own nav externally).
+     */
+    navResolver?: NavResolver;
+    /**
+     * Override sidebar open state from outside (controlled mode).
+     * Pair with onSidebarChange for fully controlled behavior.
+     */
+    sidebarOpen?: boolean;
+    /** Sidebar change callback (controlled mode) */
+    onSidebarChange?: (open: boolean) => void;
+    /** Initial sidebar open state (uncontrolled, default: true on desktop) */
+    defaultSidebarOpen?: boolean;
+    /** Children */
+    children: default_2.ReactNode;
+}
+
+/**
+ * Full-page loading skeleton for AppShell.
+ * Use while the user session or product config is loading.
+ */
+export declare function AppShellSkeleton(): JSX.Element;
+
+export declare namespace AppShellSkeleton {
+    var displayName: string;
+}
+
+export declare function AreaChart({ series, height, width, showXAxis, showYAxis, showGrid, showLegend, showTooltip, showDots, smooth, fillOpacity, className, }: AreaChartProps): JSX.Element | null;
+
+export declare namespace AreaChart {
+    var displayName: string;
+}
+
+export declare interface AreaChartProps extends LineChartProps {
+    /** Opacity of fill area */
+    fillOpacity?: number;
+}
+
 export declare function Avatar({ src, name, size, status, className }: AvatarProps): JSX.Element;
 
 export declare namespace Avatar {
@@ -191,8 +366,56 @@ export declare type BadgeSize = "sm" | "md" | "lg";
 
 export declare type BadgeVariant = "default" | "secondary" | "outline" | "destructive" | "success" | "warning";
 
+export declare function BarChart({ series, height, width, showXAxis, showYAxis, showGrid, showLegend, showTooltip, stacked, radius, className, }: BarChartProps): JSX.Element | null;
+
+export declare namespace BarChart {
+    var displayName: string;
+}
+
+export declare interface BarChartProps extends BaseChartProps {
+    /** Horizontal bar chart */
+    horizontal?: boolean;
+    /** Stack bars (when multiple series) */
+    stacked?: boolean;
+    /** Bar corner radius */
+    radius?: number;
+}
+
+export declare interface BaseChartProps {
+    /** Chart series (single or multiple) */
+    series: ChartSeries[];
+    /** Chart height */
+    height?: number;
+    /** Chart width (default: 100% of container) */
+    width?: number;
+    /** Show X-axis labels */
+    showXAxis?: boolean;
+    /** Show Y-axis labels */
+    showYAxis?: boolean;
+    /** Show grid lines */
+    showGrid?: boolean;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Show tooltip on hover */
+    showTooltip?: boolean;
+    /** Y-axis label */
+    yAxisLabel?: string;
+    /** Additional class name */
+    className?: string;
+}
+
 export declare function Breadcrumb({ items, separator, size, maxItems, }: BreadcrumbProps): JSX.Element;
 
+/**
+ * A breadcrumb entry set by feature pages via setBreadcrumbs().
+ */
+export declare interface BreadcrumbEntry {
+    /** Display label */
+    label: string;
+    /** Navigation href — omit for current page (last item) */
+    href?: string;
+}
+
 export declare interface BreadcrumbItem {
     label: string;
     href?: string;
@@ -273,6 +496,22 @@ export declare interface CardProps {
     elevation?: "none" | "sm" | "md" | "lg";
 }
 
+export declare interface ChartDataPoint {
+    /** X-axis label */
+    label: string;
+    /** Numeric value */
+    value: number;
+}
+
+export declare interface ChartSeries {
+    /** Series name (shown in legend/tooltip) */
+    name: string;
+    /** Data points */
+    data: ChartDataPoint[];
+    /** Color override (defaults to token palette) */
+    color?: string;
+}
+
 export declare function CheckboxGroup({ label, children, direction, className }: CheckboxGroupProps): JSX.Element;
 
 declare interface CheckboxGroupProps {
@@ -298,7 +537,67 @@ declare interface CheckboxProps {
 
 export declare type CheckboxSize = "sm" | "md" | "lg";
 
-export declare function ColorPicker({ value, onChange, label, presets, showInput, showFormats, size, }: ColorPickerProps): JSX.Element;
+export declare function ChoiceCard({ value, title, description, icon, badge, selected, disabled, showArrow, showCheck, size, layout, onClick, className, }: ChoiceCardProps): JSX.Element;
+
+export declare namespace ChoiceCard {
+    var displayName: string;
+}
+
+export declare function ChoiceCardGroup({ value, onChange, layout, size, children, className, }: ChoiceCardGroupProps): JSX.Element;
+
+export declare namespace ChoiceCardGroup {
+    var displayName: string;
+}
+
+export declare interface ChoiceCardGroupProps {
+    /** Currently selected value */
+    value?: string;
+    /** Change handler */
+    onChange?: (value: string) => void;
+    /** Layout of the group */
+    layout?: ChoiceCardLayout;
+    /** Size applied to all cards */
+    size?: ChoiceCardSize;
+    /** Cards */
+    children: default_2.ReactNode;
+    /** Additional class name */
+    className?: string;
+}
+
+declare type ChoiceCardLayout = "horizontal" | "vertical";
+
+export declare interface ChoiceCardProps {
+    /** Unique value for this card */
+    value: string;
+    /** Card title */
+    title: string;
+    /** Subtitle / description */
+    description?: string;
+    /** Leading icon or image */
+    icon?: default_2.ReactNode;
+    /** Badge label (top-right) */
+    badge?: string;
+    /** Whether this card is selected */
+    selected?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Show arrow indicator (horizontal layout only) */
+    showArrow?: boolean;
+    /** Show checkmark instead of arrow on selection */
+    showCheck?: boolean;
+    /** Card size */
+    size?: ChoiceCardSize;
+    /** Layout direction */
+    layout?: ChoiceCardLayout;
+    /** Click handler */
+    onClick?: (value: string) => void;
+    /** Additional class name */
+    className?: string;
+}
+
+declare type ChoiceCardSize = "sm" | "md" | "lg";
+
+export declare function ColorPicker({ value, onChange, label, presets, showInput, showFormats, size, disabled, }: ColorPickerProps): JSX.Element;
 
 export declare interface ColorPickerProps {
     value: string;
@@ -308,6 +607,7 @@ export declare interface ColorPickerProps {
     showInput?: boolean;
     showFormats?: boolean;
     size?: ColorPickerSize;
+    disabled?: boolean;
 }
 
 export declare type ColorPickerSize = "sm" | "md" | "lg";
@@ -392,6 +692,73 @@ export declare type DatePickerState = "default" | "error" | "success";
 
 export declare type DatePickerVariant = "default" | "outlined" | "filled" | "ghost";
 
+export declare interface DateRange {
+    from: Date | null;
+    to: Date | null;
+}
+
+export declare function DateRangePicker({ value, onChange, presets, placeholder, size, minDate, maxDate, clearable, disabled, className, }: DateRangePickerProps): JSX.Element;
+
+export declare namespace DateRangePicker {
+    var displayName: string;
+}
+
+export declare interface DateRangePickerProps {
+    /** Current range */
+    value?: DateRange;
+    /** Change handler */
+    onChange?: (range: DateRange, preset?: DateRangePreset) => void;
+    /** Available presets (default: today, last7, last30, custom) */
+    presets?: DateRangePreset[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Component size */
+    size?: DateRangePickerSize;
+    /** Min selectable date */
+    minDate?: Date;
+    /** Max selectable date */
+    maxDate?: Date;
+    /** Show clear button */
+    clearable?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+
+declare type DateRangePickerSize = "sm" | "md" | "lg";
+
+export declare type DateRangePreset = "today" | "yesterday" | "last7" | "last30" | "thisMonth" | "lastMonth" | "custom";
+
+export declare function DateTimePicker({ value, onChange, format, showSeconds, placeholder, size, minDate, maxDate, disabled, className, }: DateTimePickerProps): JSX.Element;
+
+export declare namespace DateTimePicker {
+    var displayName: string;
+}
+
+export declare interface DateTimePickerProps {
+    /** Combined date+time value */
+    value?: Date;
+    /** Change handler */
+    onChange?: (date: Date) => void;
+    /** Time format */
+    format?: TimePickerFormat;
+    /** Show seconds */
+    showSeconds?: boolean;
+    /** Placeholder */
+    placeholder?: string;
+    /** Component size */
+    size?: TimePickerSize;
+    /** Min date */
+    minDate?: Date;
+    /** Max date */
+    maxDate?: Date;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+
 export declare function Divider({ label, orientation, dashed, spacing, className, }: DividerProps): JSX.Element;
 
 export declare namespace Divider {
@@ -410,6 +777,35 @@ export declare interface DividerProps {
 
 export declare type DividerSpacing = "sm" | "md" | "lg";
 
+export declare function DonutChart({ data, size, innerRatio, centerLabel, centerValue, showLegend, showTooltip, className, }: DonutChartProps): JSX.Element | null;
+
+export declare namespace DonutChart {
+    var displayName: string;
+}
+
+export declare interface DonutChartProps {
+    /** Data segments */
+    data: {
+        label: string;
+        value: number;
+        color?: string;
+    }[];
+    /** Outer radius */
+    size?: number;
+    /** Inner radius ratio (0=pie, 0.6=donut) */
+    innerRatio?: number;
+    /** Center label */
+    centerLabel?: string;
+    /** Center value (overrides auto-sum) */
+    centerValue?: string;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Show tooltip */
+    showTooltip?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+
 export declare function Drawer({ open, onClose, title, children, side, size, footer, className, }: DrawerProps): JSX.Element | null;
 
 export declare namespace Drawer {
@@ -527,6 +923,8 @@ declare interface DSInputProps extends Omit<default_2.InputHTMLAttributes<HTMLIn
     loading?: boolean;
     fullWidth?: boolean;
     required?: boolean;
+    /** Show character count below input (requires maxLength) */
+    showCount?: boolean;
     onClear?: () => void;
 }
 export { DSInputProps }
@@ -536,7 +934,7 @@ declare function DSRadio({ value, label, description, disabled: localDisabled, s
 export { DSRadio }
 export { DSRadio as Radio }
 
-declare function DSTable<T extends Record<string, any>>({ columns, data, size, striped, hoverable, bordered, selectable, selectedRows: controlledSelected, onSelectionChange, loading, emptyMessage, stickyHeader, flush, className, }: TableProps<T>): JSX.Element;
+declare function DSTable<T extends Record<string, any>>({ columns, data, size, striped, hoverable, bordered, selectable, selectedRows: controlledSelected, onSelectionChange, loading, error, emptyMessage, stickyHeader, flush, className, }: TableProps<T>): JSX.Element;
 export { DSTable }
 export { DSTable as Table }
 
@@ -581,6 +979,75 @@ export declare interface EmptyStateProps {
 
 export declare type EmptyStateSize = "sm" | "md" | "lg";
 
+declare interface ErrorBoundaryState {
+    hasError: boolean;
+    error?: Error;
+}
+
+export declare type FeaturePageLayout = "list" | "detail" | "settings" | "wizard" | "dashboard" | "form" | "report";
+
+export declare function FeaturePageScaffold(props: FeaturePageScaffoldProps): JSX.Element;
+
+export declare namespace FeaturePageScaffold {
+    var displayName: string;
+}
+
+export declare interface FeaturePageScaffoldProps {
+    /**
+     * Layout variant — determines the region structure.
+     * @default "list"
+     */
+    layout?: FeaturePageLayout;
+    /** Page header — use <PageHeader> component */
+    header?: default_2.ReactNode;
+    /** Page-level alert / announcement banner */
+    banner?: default_2.ReactNode;
+    /** Stat cards row — shown above filters in list/dashboard layouts */
+    stats?: default_2.ReactNode;
+    /** Filter bar — shown between stats and content in list layout */
+    filters?: default_2.ReactNode;
+    /** Main content area — table, grid, cards */
+    content?: default_2.ReactNode;
+    /** Footer — pagination, bulk action bar */
+    footer?: default_2.ReactNode;
+    /** Main content column (left, wider) — detail layout */
+    main?: default_2.ReactNode;
+    /** Side panel (right, narrower) — detail layout */
+    aside?: default_2.ReactNode;
+    /** Aside width class — default: "w-80" */
+    asideWidth?: string;
+    /** Whether aside appears on the left instead of right */
+    asideLeft?: boolean;
+    /** Sections list — settings layout (array of ReactNode) */
+    sections?: default_2.ReactNode;
+    /** Stepper — wizard layout */
+    stepper?: default_2.ReactNode;
+    /** Form body — wizard/form layouts */
+    form?: default_2.ReactNode;
+    /** Sticky action bar — wizard/form layouts */
+    actions?: default_2.ReactNode;
+    /** Primary chart area — dashboard */
+    primaryChart?: default_2.ReactNode;
+    /** Secondary chart(s) — dashboard (2-column) */
+    secondaryCharts?: default_2.ReactNode;
+    /** Quick stats / KPI cards */
+    kpis?: default_2.ReactNode;
+    /** Date range picker + period selector */
+    dateRange?: default_2.ReactNode;
+    /** Chart section */
+    charts?: default_2.ReactNode;
+    /** Data table section */
+    table?: default_2.ReactNode;
+    /** Outer max width (e.g. "max-w-7xl") — defaults to full width */
+    maxWidth?: string;
+    /** Page padding — default "p-6" desktop, "p-4" mobile */
+    padding?: string;
+    /** Gap between regions — default "gap-6" */
+    gap?: string;
+    /** Additional className on root element */
+    className?: string;
+}
+
 export declare function FileUpload({ accept, maxSize, multiple, disabled, variant, label, description, value, onChange, onUpload, onRemove, }: FileUploadProps): JSX.Element;
 
 export declare interface FileUploadProps {
@@ -705,6 +1172,16 @@ export declare interface FormSuccessProps {
     className?: string;
 }
 
+export declare interface GalleryImage {
+    id: string;
+    src: string;
+    alt?: string;
+    name?: string;
+    size?: string;
+    /** Extra metadata */
+    meta?: Record<string, string>;
+}
+
 export declare const IconButton: default_2.ForwardRefExoticComponent<IconButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
 
 export declare interface IconButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -715,6 +1192,45 @@ export declare interface IconButtonProps extends default_2.ButtonHTMLAttributes<
     "aria-label": string;
 }
 
+export declare function ImageGallery({ images, selectable, selectedIds, onSelectChange, maxSelect, lightbox, uploadable, onUpload, onDelete, defaultLayout, columns, disabled, className, }: ImageGalleryProps): JSX.Element;
+
+export declare namespace ImageGallery {
+    var displayName: string;
+}
+
+declare type ImageGalleryColumns = 2 | 3 | 4 | 5 | 6;
+
+declare type ImageGalleryLayout = "grid" | "list";
+
+export declare interface ImageGalleryProps {
+    /** Images to display */
+    images: GalleryImage[];
+    /** Allow selecting images */
+    selectable?: boolean;
+    /** Currently selected image IDs */
+    selectedIds?: string[];
+    /** Selection change handler */
+    onSelectChange?: (ids: string[]) => void;
+    /** Max selectable images (default: unlimited) */
+    maxSelect?: number;
+    /** Show lightbox on click */
+    lightbox?: boolean;
+    /** Allow upload (calls onUpload) */
+    uploadable?: boolean;
+    /** Upload handler */
+    onUpload?: (files: FileList) => void;
+    /** Delete handler */
+    onDelete?: (id: string) => void;
+    /** Default layout */
+    defaultLayout?: ImageGalleryLayout;
+    /** Grid columns */
+    columns?: ImageGalleryColumns;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+
 export declare function ImagePreview({ images, initialIndex }: ImagePreviewProps): JSX.Element;
 
 export declare interface ImagePreviewItem {
@@ -734,6 +1250,19 @@ export declare type InputState = "default" | "error" | "success" | "warning";
 
 export declare type InputVariant = "default" | "outlined" | "filled" | "ghost";
 
+export declare function LineChart({ series, height, width, showXAxis, showYAxis, showGrid, showLegend, showTooltip, showDots, smooth, className, }: LineChartProps): JSX.Element | null;
+
+export declare namespace LineChart {
+    var displayName: string;
+}
+
+export declare interface LineChartProps extends BaseChartProps {
+    /** Show dots on data points */
+    showDots?: boolean;
+    /** Smooth curves (catmull-rom) */
+    smooth?: boolean;
+}
+
 export declare function Menu({ items, open, onClose, triggerRef, className }: MenuProps): default_2.ReactPortal | null;
 
 export declare namespace Menu {
@@ -774,6 +1303,31 @@ export declare interface MenuProps {
     className?: string;
 }
 
+export declare function MiniSparkline({ values, type, width, height, color, showValue, trend, className, }: MiniSparklineProps): JSX.Element | null;
+
+export declare namespace MiniSparkline {
+    var displayName: string;
+}
+
+export declare interface MiniSparklineProps {
+    /** Data values (no labels needed) */
+    values: number[];
+    /** Type */
+    type?: "line" | "bar" | "area";
+    /** Width */
+    width?: number;
+    /** Height */
+    height?: number;
+    /** Color */
+    color?: string;
+    /** Show last value as label */
+    showValue?: boolean;
+    /** Trend direction override (auto-computed if omitted) */
+    trend?: "up" | "down" | "neutral";
+    /** Additional class name */
+    className?: string;
+}
+
 export declare function Modal({ open, onClose, title, description, size, children, footer, closeOnOverlay, showCloseButton, className, }: ModalProps): JSX.Element | null;
 
 declare interface ModalProps {
@@ -791,6 +1345,47 @@ declare interface ModalProps {
 
 export declare type ModalSize = "sm" | "md" | "lg" | "xl" | "full";
 
+/**
+ * A single navigation item in the sidebar.
+ * Supports static badge, async badge, and permission gating.
+ */
+export declare interface NavItem {
+    /** Unique identifier — used for active state matching */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Leading icon (ReactNode — use lucide-react icons) */
+    icon?: default_2.ReactNode;
+    /** Navigation target — href or route path */
+    href?: string;
+    /** Badge count or label — static string/number or async resolver */
+    badge?: string | number | (() => Promise<number>);
+    /** Child items for nested navigation (one level only) */
+    children?: NavItem[];
+    /** Permission key required to show this item — matched against ShellUser.permissions */
+    permission?: string;
+    /** Disable click and dim the item */
+    disabled?: boolean;
+}
+
+/**
+ * A resolver function that returns navigation groups for a given user.
+ * Used by AppShell to support permission-filtered, async navigation.
+ *
+ * @example
+ * const navResolver: NavResolver = async (user) => {
+ *   const counts = await fetchBadgeCounts(user.id);
+ *   return buildNavGroups(user.permissions, counts);
+ * };
+ */
+export declare type NavResolver = (user: ShellUser) => ShellSidebarGroup[] | Promise<ShellSidebarGroup[]>;
+
+export declare interface NavState {
+    groups: ShellSidebarGroup[];
+    loading: boolean;
+    error: string | null;
+}
+
 declare function Notification_2({ type, title, message, closable, onClose, action, avatar, time, read, }: NotificationProps): JSX.Element;
 export { Notification_2 as Notification }
 
@@ -945,6 +1540,12 @@ export declare type PaginationSize = "sm" | "md" | "lg";
 
 export declare type PaginationVariant = "default" | "outlined" | "filled" | "minimal";
 
+/**
+ * Patona brand config — Orange-500 primary.
+ * Logo and workspaceSwitcher should be provided by the Patona product repo.
+ */
+export declare const patonaBrandConfig: ProductBrandConfig;
+
 export declare function Popover({ trigger, children, placement, title, open: controlled, onOpenChange, }: PopoverProps): JSX.Element;
 
 export declare type PopoverPlacement = "top" | "bottom" | "left" | "right";
@@ -958,6 +1559,45 @@ export declare interface PopoverProps {
     onOpenChange?: (v: boolean) => void;
 }
 
+/**
+ * Static brand identity config for a product.
+ *
+ * This is the config that ships in the npm package (or product repo).
+ * It does NOT include navigation — nav lives in the product repo (dynamic).
+ *
+ * @example
+ * const sellsukiBrandConfig: ProductBrandConfig = {
+ *   product: "sellsuki",
+ *   brand: {
+ *     name: "Sellsuki",
+ *     logo: <SellsukiLogo />,
+ *     theme: "sellsuki",
+ *   },
+ * };
+ */
+export declare interface ProductBrandConfig {
+    /** Product identifier — sets data-product attribute on shell root */
+    product: ProductId;
+    /** Brand identity */
+    brand: {
+        /** Brand/product name shown in sidebar header and nav title */
+        name: string;
+        /** Logo component or image URL */
+        logo?: default_2.ReactNode;
+        /** CSS theme class or data-product value — used for token overrides */
+        theme?: string;
+        /** Optional workspace/shop switcher rendered after brand logo in TopNavbar */
+        workspaceSwitcher?: default_2.ReactNode;
+    };
+    /** Optional shell layout preferences */
+    shell?: ShellPrefs;
+}
+
+/**
+ * Product identifier — all current and planned Sellsuki products.
+ */
+export declare type ProductId = "sellsuki" | "patona" | "sukispace" | "shipmunk" | "akita" | "oc2plus" | (string & {});
+
 export declare function ProgressBar({ value, max, size, color, label, showValue, indeterminate, className, }: ProgressBarProps): JSX.Element;
 
 export declare namespace ProgressBar {
@@ -977,6 +1617,50 @@ export declare interface ProgressBarProps {
 
 export declare type ProgressBarSize = "sm" | "md" | "lg";
 
+export declare function RadioCard({ options, value, onChange, columns, layout, size, name, className, }: RadioCardProps): JSX.Element;
+
+export declare namespace RadioCard {
+    var displayName: string;
+}
+
+declare type RadioCardLayout = "grid" | "list";
+
+export declare interface RadioCardOption {
+    /** Unique value */
+    value: string;
+    /** Card title */
+    title: string;
+    /** Description text */
+    description?: string;
+    /** Icon, logo, or image */
+    icon?: default_2.ReactNode;
+    /** Badge label */
+    badge?: string;
+    /** Disabled state */
+    disabled?: boolean;
+}
+
+export declare interface RadioCardProps {
+    /** Options to render */
+    options: RadioCardOption[];
+    /** Currently selected value */
+    value?: string;
+    /** Change handler */
+    onChange?: (value: string) => void;
+    /** Grid columns */
+    columns?: 1 | 2 | 3 | 4;
+    /** Layout */
+    layout?: RadioCardLayout;
+    /** Card size */
+    size?: RadioCardSize;
+    /** Name for the radio group (for form semantics) */
+    name?: string;
+    /** Additional class name */
+    className?: string;
+}
+
+declare type RadioCardSize = "sm" | "md" | "lg";
+
 export declare function RadioGroup({ name, value: controlled, defaultValue, onChange, label, size, disabled, direction, children, error, className, }: RadioGroupProps): JSX.Element;
 
 declare interface RadioGroupProps {
@@ -1022,6 +1706,117 @@ export declare interface RatingProps {
 
 export declare type RatingSize = "sm" | "md" | "lg";
 
+export declare interface RepeatableFieldColumn {
+    /** Column key matching values[key] */
+    key: string;
+    /** Column header label */
+    label: string;
+    /** Render function — receive current value + onChange */
+    render: (value: unknown, onChange: (val: unknown) => void, rowIndex: number) => default_2.ReactNode;
+    /** Column width (CSS, e.g. "200px", "1fr") */
+    width?: string;
+}
+
+export declare function RepeatableFieldList({ columns, value, onChange, defaultRow, minRows, maxRows, addLabel, sortable, disabled, className, }: RepeatableFieldListProps): JSX.Element;
+
+export declare namespace RepeatableFieldList {
+    var displayName: string;
+}
+
+export declare interface RepeatableFieldListProps {
+    /** Column definitions */
+    columns: RepeatableFieldColumn[];
+    /** Current rows */
+    value?: RepeatableFieldRow[];
+    /** Change handler */
+    onChange?: (rows: RepeatableFieldRow[]) => void;
+    /** Default values for a new row */
+    defaultRow?: Record<string, unknown>;
+    /** Minimum number of rows (shows disabled remove when at min) */
+    minRows?: number;
+    /** Maximum number of rows (hides add button when at max) */
+    maxRows?: number;
+    /** Add button label */
+    addLabel?: string;
+    /** Whether rows can be reordered */
+    sortable?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+
+export declare interface RepeatableFieldRow {
+    /** Internal unique ID */
+    id: string;
+    /** Row data values keyed by field name */
+    values: Record<string, unknown>;
+}
+
+export declare function RichTextEditor({ value, onChange, placeholder, minHeight, maxHeight, toolbar, fullscreen: allowFullscreen, disabled, readOnly, size, className, }: RichTextEditorProps): JSX.Element;
+
+export declare namespace RichTextEditor {
+    var displayName: string;
+}
+
+export declare interface RichTextEditorProps {
+    /** HTML content value */
+    value?: string;
+    /** Change handler (receives HTML string) */
+    onChange?: (html: string) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Min height (px) */
+    minHeight?: number;
+    /** Max height (px, scroll beyond) */
+    maxHeight?: number;
+    /** Toolbar groups to show */
+    toolbar?: ("format" | "list" | "align" | "link" | "block" | "history")[];
+    /** Allow fullscreen toggle */
+    fullscreen?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Read-only state */
+    readOnly?: boolean;
+    /** Component size */
+    size?: RichTextEditorSize;
+    /** Additional class name */
+    className?: string;
+}
+
+declare type RichTextEditorSize = "sm" | "md" | "lg";
+
+/**
+ * KPI stat card row for dashboard layout.
+ * Wraps children in an equal-width responsive grid.
+ */
+export declare function ScaffoldKPIRow({ children, className }: {
+    children: default_2.ReactNode;
+    className?: string;
+}): JSX.Element;
+
+export declare namespace ScaffoldKPIRow {
+    var displayName: string;
+}
+
+export declare function ScaffoldSection({ title, description, action, children, className }: ScaffoldSectionProps): JSX.Element;
+
+export declare namespace ScaffoldSection {
+    var displayName: string;
+}
+
+/**
+ * Scaffold section for settings layout.
+ * Provides consistent heading + description + content region.
+ */
+export declare interface ScaffoldSectionProps {
+    title: string;
+    description?: string;
+    action?: default_2.ReactNode;
+    children: default_2.ReactNode;
+    className?: string;
+}
+
 export declare function SearchField({ value: controlled, onChange, onSearch, placeholder, size, variant, loading, suggestions, onSuggestionSelect, clearable, disabled, autoFocus, debounce, className, }: SearchFieldProps): JSX.Element;
 
 declare interface SearchFieldProps {
@@ -1052,6 +1847,61 @@ declare interface SearchSuggestion {
 
 export declare type SearchVariant = "default" | "outlined" | "filled";
 
+/**
+ * Sellsuki brand config — Sky-500 primary, DB HeaventRounded font.
+ * Use this as the default for Sellsuki Admin product.
+ */
+export declare const sellsukiBrandConfig: ProductBrandConfig;
+
+/**
+ * Shell layout preferences that can be overridden per product.
+ */
+export declare interface ShellPrefs {
+    /** Whether the sidebar can be collapsed — default true */
+    sidebarCollapsible?: boolean;
+    /** Sidebar open by default on desktop — default true */
+    sidebarDefaultOpen?: boolean;
+    /** Max width of the content area — default undefined (full width) */
+    contentMaxWidth?: string;
+}
+
+/**
+ * A group of navigation items used by AppShell — richer than the standalone Sidebar's SidebarGroup.
+ * Use this type when configuring AppShell navigation via NavResolver.
+ * @alias ShellSidebarGroup
+ */
+export declare interface ShellSidebarGroup {
+    /** Group label shown as section header — omit for ungrouped items */
+    title?: string;
+    /** Navigation items in this group */
+    items: NavItem[];
+    /** Whether the group can be collapsed — default false */
+    collapsible?: boolean;
+    /** Default collapsed state — only applies if collapsible=true */
+    defaultCollapsed?: boolean;
+}
+
+/**
+ * The authenticated user shown in the shell (top nav user menu, sidebar account).
+ */
+export declare interface ShellUser {
+    /** Display name */
+    name: string;
+    /** Avatar image URL — falls back to initials if not provided */
+    avatar?: string;
+    /** Email address */
+    email?: string;
+    /** User role label (e.g. "Admin", "Staff", "Owner") */
+    role?: string;
+    /** Permission keys for nav item filtering — e.g. ["orders:read", "settings:write"] */
+    permissions: string[];
+}
+
+/**
+ * Shipmunk brand config — placeholder, theme TBD.
+ */
+export declare const shipmunkBrandConfig: ProductBrandConfig;
+
 export declare function Sidebar({ brand, accountSwitcher, groups, activeItem, onNavigate, collapsed, onCollapsedChange, showCollapseToggle, version, versionDate, className, }: SidebarProps): JSX.Element;
 
 export declare namespace Sidebar {
@@ -1111,8 +1961,8 @@ export declare interface SidebarItem {
     label: string;
     /** Leading icon */
     icon?: default_2.ReactNode;
-    /** Badge text (e.g., count) */
-    badge?: string;
+    /** Badge text or count — shown next to item label */
+    badge?: string | number;
 }
 
 export declare interface SidebarProps {
@@ -1146,7 +1996,9 @@ export declare function Skeleton({ width, height, variant, animate, className, }
 
 export declare function SkeletonCard(): JSX.Element;
 
-export declare function SkeletonList(): JSX.Element;
+export declare function SkeletonList({ rows }: {
+    rows?: number;
+}): JSX.Element;
 
 export declare interface SkeletonProps {
     width?: string | number;
@@ -1217,6 +2069,8 @@ export declare interface StepDefinition {
     title: string;
     /** Optional step description */
     description?: string;
+    /** Disable click navigation to this step */
+    disabled?: boolean;
 }
 
 export declare function Stepper({ steps, current, orientation, onStepClick, className, }: StepperProps): JSX.Element;
@@ -1238,6 +2092,11 @@ export declare interface StepperProps {
     className?: string;
 }
 
+/**
+ * Sukispace brand config — Sky-500 primary (same as Sellsuki, identity TBD).
+ */
+export declare const sukispaceBrandConfig: ProductBrandConfig;
+
 export declare function Switch({ checked, onChange, label, description, size, disabled, color, }: SwitchProps): JSX.Element;
 
 export declare type SwitchColor = "primary" | "success" | "warning" | "destructive";
@@ -1283,6 +2142,7 @@ declare interface TableProps<T = any> {
     selectedRows?: Set<number>;
     onSelectionChange?: (selected: Set<number>) => void;
     loading?: boolean;
+    error?: string;
     emptyMessage?: string;
     stickyHeader?: boolean;
     /** Remove border and border-radius — use when table is already inside a bordered container */
@@ -1361,6 +2221,29 @@ export declare interface TagProps {
 
 export declare type TagSize = "sm" | "md" | "lg";
 
+export declare function ThumbnailCell({ src, alt, caption, subCaption, size, onClick, className, }: ThumbnailCellProps): JSX.Element;
+
+export declare namespace ThumbnailCell {
+    var displayName: string;
+}
+
+export declare interface ThumbnailCellProps {
+    /** Image source */
+    src: string;
+    /** Alt text */
+    alt?: string;
+    /** Caption below image */
+    caption?: string;
+    /** Sub-caption (muted) */
+    subCaption?: string;
+    /** Thumbnail size */
+    size?: "xs" | "sm" | "md";
+    /** Click handler */
+    onClick?: () => void;
+    /** Additional class name */
+    className?: string;
+}
+
 export declare function Timeline({ items, variant, size, }: TimelineProps): JSX.Element;
 
 export declare interface TimelineItem {
@@ -1384,6 +2267,43 @@ export declare type TimelineSize = "sm" | "md" | "lg";
 
 export declare type TimelineVariant = "default" | "alternate" | "compact";
 
+export declare function TimePicker({ value, onChange, format, showSeconds, minuteStep, placeholder, size, disabled, className, }: TimePickerProps): JSX.Element;
+
+export declare namespace TimePicker {
+    var displayName: string;
+}
+
+export declare type TimePickerFormat = "12h" | "24h";
+
+export declare interface TimePickerProps {
+    /** Current time value */
+    value?: TimeValue;
+    /** Change handler */
+    onChange?: (time: TimeValue) => void;
+    /** 12-hour or 24-hour format */
+    format?: TimePickerFormat;
+    /** Show seconds column */
+    showSeconds?: boolean;
+    /** Minute step (default: 1) */
+    minuteStep?: number;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Component size */
+    size?: TimePickerSize;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Additional class name */
+    className?: string;
+}
+
+declare type TimePickerSize = "sm" | "md" | "lg";
+
+export declare interface TimeValue {
+    hours: number;
+    minutes: number;
+    seconds?: number;
+}
+
 export declare const toast: {
     show: (opts: Omit<ToastData, "id">) => void;
     info: (message: string, title?: string) => void;
@@ -1422,7 +2342,7 @@ export declare interface TooltipProps {
     className?: string;
 }
 
-export declare function TopNavbar({ brand, breadcrumbs, title, actions, user, height, showSearch, searchPlaceholder, onSearchClick, notificationCount, onNotificationClick, onMobileMenuClick, onSidebarToggle, onUserClick, onBreadcrumbClick, className, }: TopNavbarProps): JSX.Element;
+export declare function TopNavbar({ brand, breadcrumbs, title, actions, user, height, showSearch, searchPlaceholder, onSearchClick, notificationCount, onNotificationClick, onMobileMenuClick, onSidebarToggle, onUserClick, onBreadcrumbClick, workspaceSwitcher, className, }: TopNavbarProps): JSX.Element;
 
 export declare namespace TopNavbar {
     var displayName: string;
@@ -1466,6 +2386,8 @@ export declare interface TopNavbarProps {
     onUserClick?: () => void;
     /** Breadcrumb click handler */
     onBreadcrumbClick?: (item: BreadcrumbItem_2, index: number) => void;
+    /** Workspace/shop switcher rendered after brand logo — for multi-workspace products */
+    workspaceSwitcher?: default_2.ReactNode;
     /** Additional class name */
     className?: string;
 }
@@ -1483,7 +2405,7 @@ export declare interface TransferItem {
     disabled?: boolean;
 }
 
-export declare function TransferList({ sourceTitle, targetTitle, items, defaultTarget, searchable, value, onChange, }: TransferListProps): JSX.Element;
+export declare function TransferList({ sourceTitle, targetTitle, items, defaultTarget, searchable, value, onChange, loading, error, }: TransferListProps): JSX.Element;
 
 export declare interface TransferListProps {
     sourceTitle?: string;
@@ -1495,9 +2417,13 @@ export declare interface TransferListProps {
     value?: string[];
     /** Called when target list changes */
     onChange?: (targetIds: string[]) => void;
+    /** Show loading skeleton overlay */
+    loading?: boolean;
+    /** Show error message instead of content */
+    error?: string;
 }
 
-export declare function Tree({ data, selectable, showLines, defaultExpanded, expandedItems, onExpandChange, selectedItems, onSelect, }: TreeProps): JSX.Element;
+export declare function Tree({ data, selectable, showLines, defaultExpanded, expandedItems, onExpandChange, selectedItems, onSelect, loading, error, emptyMessage, }: TreeProps): JSX.Element;
 
 export declare interface TreeNode {
     id: string;
@@ -1520,6 +2446,12 @@ export declare interface TreeProps {
     selectedItems?: string[];
     /** Called when selection changes */
     onSelect?: (selectedIds: string[]) => void;
+    /** Show loading skeleton */
+    loading?: boolean;
+    /** Show error message */
+    error?: string;
+    /** Message shown when data is empty */
+    emptyMessage?: string;
 }
 
 export declare interface UploadedFile {
@@ -1531,6 +2463,65 @@ export declare interface UploadedFile {
     status: "uploading" | "done" | "error";
 }
 
+/**
+ * Access shell state from any descendant component.
+ *
+ * @throws Error if called outside of AppShellProvider
+ *
+ * @example
+ * function OrderDetailPage() {
+ *   const { setBreadcrumbs, user, sidebarOpen } = useAppShell();
+ *
+ *   useEffect(() => {
+ *     setBreadcrumbs([
+ *       { label: "Orders", href: "/orders" },
+ *       { label: "Order #12345" },
+ *     ]);
+ *   }, []);
+ *
+ *   return <div>...</div>;
+ * }
+ */
+export declare function useAppShell(): AppShellContextValue;
+
+/**
+ * Extended hook that also exposes nav state.
+ * Use this in the Sidebar/TopNavbar wrappers that need nav groups.
+ *
+ * @throws Error if called outside of AppShellProvider
+ */
+export declare function useAppShellFull(): AppShellFullContextValue;
+
+/**
+ * Convenience hook for setting breadcrumbs from a feature page.
+ * Handles the useEffect pattern automatically.
+ *
+ * @example
+ * function ProductDetailPage({ productId }: { productId: string }) {
+ *   useBreadcrumbs([
+ *     { label: "Products", href: "/products" },
+ *     { label: product.name },
+ *   ]);
+ *   return <div>...</div>;
+ * }
+ */
+export declare function useBreadcrumbs(items: BreadcrumbEntry[]): void;
+
 export declare function useFormField(): FormFieldContextValue;
 
+/**
+ * Standalone hook for products that manage nav outside of AppShellProvider.
+ * Returns nav groups, loading state, error, and a refresh function.
+ *
+ * @example
+ * function AppSidebar() {
+ *   const { groups, loading, error, refresh } = useNavResolver(navResolver, currentUser);
+ *   if (loading) return <SkeletonList />;
+ *   return <Sidebar groups={mapGroupsForSidebar(groups)} />;
+ * }
+ */
+export declare function useNavResolver(resolver: NavResolver | undefined, user: ShellUser | null): NavState & {
+    refresh: () => void;
+};
+
 export { }