@uxuissk/design-system 0.8.8 → 0.8.10

package/dist/types/index.d.ts

@@ -125,7 +125,8 @@ export declare interface AdvancedDataTableProps<T = Record<string, any>> {
 export declare type AdvancedTableSize = "sm" | "md" | "lg";
 
 /**
- * Akita brand config — placeholder, theme TBD.
+ * Akita brand config — Cobalt Blue primary (#1769E2).
+ * logo / logoFull: inject from product repo (Brand=akita SVG files).
  */
 export declare const akitaBrandConfig: ProductBrandConfig;
 
@@ -242,18 +243,34 @@ export declare interface AppShellProps {
     notificationCount?: number;
     /** Notification click handler */
     onNotificationClick?: () => void;
+    /** App/product switcher click handler — shows grid icon in TopNavbar */
+    onAppSwitcherClick?: () => void;
     /** User click handler (profile menu, logout) */
     onUserClick?: () => void;
     /** Search click handler */
     onSearchClick?: () => void;
-    /** Show search in TopNavbar */
+    /**
+     * Search display mode for TopNavbar.
+     * - "bar"  — full search bar
+     * - "icon" — icon button only
+     * - "none" — hidden (default)
+     * @deprecated showSearch — use searchMode="bar" instead
+     */
+    searchMode?: "bar" | "icon" | "none";
+    /**
+     * @deprecated Use searchMode="bar" instead
+     */
     showSearch?: boolean;
+    /** Page title / system name shown in TopNavbar after logo. Default: hidden */
+    title?: string;
     /** App version string */
     version?: string;
     /** App version date */
     versionDate?: string;
     /** Whether content area has padding (default: true) */
     contentPadding?: boolean;
+    /** Utility items rendered at sidebar footer (e.g. Help, Settings) */
+    utilityItems?: SidebarItem[];
     /** Children — feature page content */
     children: default_2.ReactNode;
     /** Additional class name on root element */
@@ -1448,6 +1465,12 @@ export declare interface NumberInputProps {
 
 export declare type NumberInputSize = "sm" | "md" | "lg";
 
+/**
+ * Oc2plus brand config — Sky-500 primary (same as Sellsuki default).
+ * logo / logoFull: inject from product repo (Brand=oc2plus SVG files).
+ */
+export declare const oc2plusBrandConfig: ProductBrandConfig;
+
 export declare function OTPInput({ length, value, onChange, onComplete, disabled, error, size, label, masked, className, }: OTPInputProps): JSX.Element;
 
 export declare interface OTPInputProps {
@@ -1541,8 +1564,8 @@ 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.
+ * Patona brand config — Aerospace Orange primary (#EC5E2A).
+ * logo / logoFull: inject from product repo (Brand=patona SVG files).
  */
 export declare const patonaBrandConfig: ProductBrandConfig;
 
@@ -1582,8 +1605,20 @@ export declare interface ProductBrandConfig {
     brand: {
         /** Brand/product name shown in sidebar header and nav title */
         name: string;
-        /** Logo component or image URL */
+        /**
+         * Icon-only logo (40×40px SVG/ReactNode or image URL string).
+         * Used in collapsed sidebar state.
+         * Falls back to name initial when not provided.
+         */
         logo?: default_2.ReactNode;
+        /**
+         * Icon+Name logo (variable width × 40px height SVG/ReactNode).
+         * Used in expanded sidebar and TopNavbar.
+         * When provided, the brand name text is NOT rendered separately
+         * (it is baked into the SVG).
+         * Falls back to `logo` + name text when not provided.
+         */
+        logoFull?: 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 */
@@ -1849,10 +1884,26 @@ 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.
+ *
+ * To add logos, provide SVG components:
+ * ```tsx
+ * import SellsukiIcon from "@/assets/logos/sellsuki-icon.svg?react";
+ * import SellsukiFull from "@/assets/logos/sellsuki-full.svg?react";
+ *
+ * const config = {
+ *   ...sellsukiBrandConfig,
+ *   brand: { ...sellsukiBrandConfig.brand, logo: <SellsukiIcon />, logoFull: <SellsukiFull /> },
+ * };
+ * ```
  */
 export declare const sellsukiBrandConfig: ProductBrandConfig;
 
+/**
+ * SellsukiPay brand config — Sky-500 primary (same as Sellsuki default).
+ * logo / logoFull: inject from product repo (Brand=sellsukipay SVG files).
+ */
+export declare const sellsukiPayBrandConfig: ProductBrandConfig;
+
 /**
  * Shell layout preferences that can be overridden per product.
  */
@@ -1898,11 +1949,14 @@ export declare interface ShellUser {
 }
 
 /**
- * Shipmunk brand config — placeholder, theme TBD.
+ * Shipmunk brand config — Sky-500 primary + Cyan secondary.
+ * NOTE: Shipmunk only has an icon+name SVG (no icon-only variant).
+ * Set `logoFull` to the icon+name SVG; collapsed sidebar will clip to icon area.
+ * logo / logoFull: inject from product repo (Brand=shipmunk SVG files).
  */
 export declare const shipmunkBrandConfig: ProductBrandConfig;
 
-export declare function Sidebar({ brand, accountSwitcher, groups, activeItem, onNavigate, collapsed, onCollapsedChange, showCollapseToggle, version, versionDate, width, className, }: SidebarProps): JSX.Element;
+export declare function Sidebar({ brand, accountSwitcher, groups, activeItem, onNavigate, collapsed, onCollapsedChange, showCollapseToggle, utilityItems, version, versionDate, width, className, }: SidebarProps): JSX.Element;
 
 export declare namespace Sidebar {
     var displayName: string;
@@ -1941,10 +1995,12 @@ export declare interface SidebarAccountSwitcherProps {
 }
 
 export declare interface SidebarBrand {
-    /** Brand name */
+    /** Brand name (fallback text when no logo) */
     name: string;
-    /** Brand logo URL */
+    /** Icon-only logo (40×40) — used in collapsed state */
     logo?: string;
+    /** Icon+Name logo (variable width × 40px) — used in expanded state */
+    logoFull?: default_2.ReactNode;
 }
 
 export declare interface SidebarGroup {
@@ -1978,15 +2034,20 @@ export declare interface SidebarProps {
     collapsed?: boolean;
     /** Toggle collapse callback */
     onCollapsedChange?: (collapsed: boolean) => void;
-    /** Show the footer collapse toggle button (default: true). Set false when collapse is controlled from TopNavbar */
+    /** Show the footer collapse toggle button (default: false). Set true to show inline toggle */
     showCollapseToggle?: boolean;
     /** Account/Company/Branch switcher shown in header area */
     accountSwitcher?: SidebarAccountSwitcherProps;
+    /**
+     * Utility items (e.g. Help, Setting) — rendered at bottom of sidebar
+     * above collapse toggle, separated by a divider from main nav groups.
+     */
+    utilityItems?: SidebarItem[];
     /** App version string e.g. "v1.4.0" */
     version?: string;
     /** Version date string e.g. "March 10, 2026" */
     versionDate?: string;
-    /** Sidebar width (default: 256px) */
+    /** Sidebar width override (200–320px range; default: var(--shell-sidebar-width, 200px)) */
     width?: string;
     /** Additional class name */
     className?: string;
@@ -2342,17 +2403,19 @@ 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, workspaceSwitcher, className, }: TopNavbarProps): JSX.Element;
+export declare function TopNavbar({ brand, breadcrumbs, title, actions, user, height, searchMode: searchModeProp, searchPlaceholder, onSearchClick, notificationCount, onNotificationClick, onMobileMenuClick, onSidebarToggle, onAppSwitcherClick, onUserClick, onBreadcrumbClick, workspaceSwitcher, showSearch, className, }: TopNavbarProps): JSX.Element;
 
 export declare namespace TopNavbar {
     var displayName: string;
 }
 
 export declare interface TopNavbarBrand {
-    /** Brand name */
+    /** Brand name (fallback text when no logo) */
     name: string;
-    /** Logo URL or ReactNode */
+    /** Icon-only logo (40×40) — used as fallback when logoFull not provided */
     logo?: string | default_2.ReactNode;
+    /** Icon+Name logo (variable width × 40px) — shown in navbar when provided */
+    logoFull?: default_2.ReactNode;
 }
 
 export declare interface TopNavbarProps {
@@ -2360,7 +2423,7 @@ export declare interface TopNavbarProps {
     brand?: TopNavbarBrand;
     /** Breadcrumb items */
     breadcrumbs?: BreadcrumbItem_2[];
-    /** Page title displayed after brand (used for current page context) */
+    /** Page title / system name — shown after brand. Default: hidden */
     title?: string;
     /** Right-side action area */
     actions?: default_2.ReactNode;
@@ -2368,8 +2431,13 @@ export declare interface TopNavbarProps {
     user?: TopNavbarUser;
     /** Navbar height */
     height?: string;
-    /** Show search bar */
-    showSearch?: boolean;
+    /**
+     * Search display mode.
+     * - "bar"  — full search bar (default when showSearch=true for backward compat)
+     * - "icon" — icon button only
+     * - "none" — hidden (default)
+     */
+    searchMode?: "bar" | "icon" | "none";
     /** Search placeholder text */
     searchPlaceholder?: string;
     /** Search click handler */
@@ -2382,12 +2450,18 @@ export declare interface TopNavbarProps {
     onMobileMenuClick?: () => void;
     /** Sidebar toggle handler — shows burger icon (always visible) to collapse/expand sidebar */
     onSidebarToggle?: () => void;
+    /** App/product switcher handler — shows 3×3 grid icon on right side */
+    onAppSwitcherClick?: () => void;
     /** User click handler */
     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;
+    /**
+     * @deprecated Use searchMode="bar" instead
+     */
+    showSearch?: boolean;
     /** Additional class name */
     className?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxuissk/design-system",
-  "version": "0.8.8",
+  "version": "0.8.10",
   "private": false,
   "type": "module",
   "workspaces": [