@uxuissk/design-system 0.6.0 → 0.7.1

package/dist/types/index.d.ts

@@ -48,6 +48,79 @@ export declare interface AccordionProps {
 
 export declare type AccordionType = "single" | "multiple";
 
+export declare interface AdvancedColumn<T = Record<string, any>> {
+    /** Unique column key — matches field name in data row */
+    key: string;
+    /** Column header label */
+    header: string;
+    /** Enable server-side sort click */
+    sortable?: boolean;
+    /** Fixed pixel or CSS width */
+    width?: number | string;
+    /** Minimum width in px (default 80) */
+    minWidth?: number;
+    /** Text alignment */
+    align?: "left" | "center" | "right";
+    /** Stick to left edge (frozen column) */
+    frozen?: boolean;
+    /** Allow hiding via column toggle. Default true */
+    hideable?: boolean;
+    /** Start hidden */
+    defaultHidden?: boolean;
+    /** Custom cell renderer */
+    render?: (value: any, row: T, index: number) => default_2.ReactNode;
+}
+
+export declare function AdvancedDataTable<T extends Record<string, any>>({ columns, data, rowKey, pagination, sortBy, sortOrder, onPageChange, onSortChange, selectable, selectedRows: controlledSelected, onSelectionChange, bulkActions, onRowClick, expandedRowRender, loading, loadingRows, error, emptyMessage, emptyDescription, showColumnToggle, size, stickyHeader, className, }: AdvancedDataTableProps<T>): JSX.Element;
+
+export declare interface AdvancedDataTableProps<T = Record<string, any>> {
+    /** Column definitions */
+    columns: AdvancedColumn<T>[];
+    /** Row data */
+    data: T[];
+    /** Field to use as unique row key (default: "id") */
+    rowKey?: string;
+    /** Server pagination metadata */
+    pagination?: PaginationMeta;
+    /** Currently sorted column key */
+    sortBy?: string;
+    /** Current sort direction */
+    sortOrder?: SortOrder;
+    /** Called when user changes page or page size */
+    onPageChange?: (page: number, pageSize: number) => void;
+    /** Called when user clicks a sortable column */
+    onSortChange?: (sortBy: string, sortOrder: SortOrder) => void;
+    /** Enable row checkboxes */
+    selectable?: boolean;
+    /** Controlled selection (set of rowKey values) */
+    selectedRows?: Set<string | number>;
+    /** Called when selection changes */
+    onSelectionChange?: (selected: Set<string | number>, rows: T[]) => void;
+    /** Actions shown in bulk action bar when rows are selected */
+    bulkActions?: BulkAction[];
+    /** Called when a row is clicked */
+    onRowClick?: (row: T) => void;
+    /** Render function for expanded row content */
+    expandedRowRender?: (row: T) => default_2.ReactNode;
+    /** Show skeleton loading rows */
+    loading?: boolean;
+    /** Number of skeleton rows to show while loading */
+    loadingRows?: number;
+    /** Error message — renders error state instead of table body */
+    error?: string;
+    /** Custom empty state message */
+    emptyMessage?: string;
+    /** Custom empty state description */
+    emptyDescription?: string;
+    /** Show column visibility toggle button */
+    showColumnToggle?: boolean;
+    size?: AdvancedTableSize;
+    stickyHeader?: boolean;
+    className?: string;
+}
+
+export declare type AdvancedTableSize = "sm" | "md" | "lg";
+
 export declare function Alert({ variant, title, children, dismissible, onDismiss, action, icon, className }: AlertProps): JSX.Element | null;
 
 declare interface AlertProps {
@@ -144,6 +217,13 @@ export declare type BreadcrumbSeparator = "chevron" | "slash" | "dot";
 
 export declare type BreadcrumbSize = "sm" | "md" | "lg";
 
+export declare interface BulkAction {
+    label: string;
+    icon?: default_2.ReactNode;
+    variant?: "default" | "destructive";
+    onClick: (selectedKeys: Array<string | number>) => void;
+}
+
 export declare function ButtonGroup({ children, className, }: {
     children: default_2.ReactNode;
     className?: string;
@@ -435,7 +515,7 @@ declare interface DSInputProps extends Omit<default_2.InputHTMLAttributes<HTMLIn
     helperText?: string;
     errorMessage?: string;
     successMessage?: string;
-    inputSize?: InputSize;
+    size?: InputSize;
     variant?: InputVariant;
     state?: InputState;
     leftIcon?: default_2.ReactNode;
@@ -456,7 +536,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, className, }: TableProps<T>): JSX.Element;
+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;
 export { DSTable }
 export { DSTable as Table }
 
@@ -469,7 +549,7 @@ declare interface DSTextareaProps extends Omit<default_2.TextareaHTMLAttributes<
     helperText?: string;
     errorMessage?: string;
     successMessage?: string;
-    inputSize?: InputSize;
+    size?: InputSize;
     variant?: InputVariant;
     state?: InputState;
     showCharCount?: boolean;
@@ -816,6 +896,12 @@ export declare interface PageHeaderProps {
 
 export declare function Pagination({ currentPage, totalPages, onPageChange, siblingCount, showFirstLast, showPrevNext, showPageSize, pageSizeOptions, pageSize, onPageSizeChange, totalItems, size, variant, disabled, showPageInfo, showItemsInfo, prevLabel, nextLabel, }: PaginationProps): JSX.Element;
 
+export declare interface PaginationMeta {
+    page: number;
+    pageSize: number;
+    totalCount: number;
+}
+
 export declare interface PaginationProps {
     /** Current active page (1-indexed) */
     currentPage: number;
@@ -966,12 +1052,44 @@ declare interface SearchSuggestion {
 
 export declare type SearchVariant = "default" | "outlined" | "filled";
 
-export declare function Sidebar({ brand, groups, activeItem, onNavigate, collapsed, onCollapsedChange, className, }: SidebarProps): JSX.Element;
+export declare function Sidebar({ brand, accountSwitcher, groups, activeItem, onNavigate, collapsed, onCollapsedChange, showCollapseToggle, version, versionDate, className, }: SidebarProps): JSX.Element;
 
 export declare namespace Sidebar {
     var displayName: string;
 }
 
+export declare interface SidebarAccountItem {
+    id: string;
+    /** Display name (company / branch / provider) */
+    name: string;
+    /** Handle or sub-label e.g. "@phoenix" */
+    handle?: string;
+    /** Avatar image URL */
+    avatarUrl?: string;
+    /** Fallback initials when no avatarUrl */
+    avatarFallback?: string;
+}
+
+export declare function SidebarAccountSwitcher({ company, branch, provider, companies, branches, providers, onCompanyChange, onBranchChange, onProviderChange, collapsed, }: SidebarAccountSwitcherProps): JSX.Element;
+
+export declare namespace SidebarAccountSwitcher {
+    var displayName: string;
+}
+
+export declare interface SidebarAccountSwitcherProps {
+    company?: SidebarAccountItem;
+    branch?: SidebarAccountItem;
+    provider?: SidebarAccountItem;
+    companies?: SidebarAccountItem[];
+    branches?: SidebarAccountItem[];
+    providers?: SidebarAccountItem[];
+    onCompanyChange?: (item: SidebarAccountItem) => void;
+    onBranchChange?: (item: SidebarAccountItem) => void;
+    onProviderChange?: (item: SidebarAccountItem) => void;
+    /** Collapsed icon-only mode */
+    collapsed?: boolean;
+}
+
 export declare interface SidebarBrand {
     /** Brand name */
     name: string;
@@ -1010,6 +1128,14 @@ 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 */
+    showCollapseToggle?: boolean;
+    /** Account/Company/Branch switcher shown in header area */
+    accountSwitcher?: SidebarAccountSwitcherProps;
+    /** App version string e.g. "v1.4.0" */
+    version?: string;
+    /** Version date string e.g. "March 10, 2026" */
+    versionDate?: string;
     /** Sidebar width (default: 256px) */
     width?: string;
     /** Additional class name */
@@ -1034,6 +1160,8 @@ export declare function SkeletonTable(): JSX.Element;
 
 export declare type SkeletonVariant = "text" | "rectangular" | "circular" | "rounded";
 
+export declare type SortOrder = "asc" | "desc";
+
 export declare function Spinner({ size, color, className }: SpinnerProps): JSX.Element;
 
 export declare namespace Spinner {
@@ -1157,6 +1285,8 @@ declare interface TableProps<T = any> {
     loading?: boolean;
     emptyMessage?: string;
     stickyHeader?: boolean;
+    /** Remove border and border-radius — use when table is already inside a bordered container */
+    flush?: boolean;
     className?: string;
 }
 
@@ -1292,7 +1422,7 @@ export declare interface TooltipProps {
     className?: string;
 }
 
-export declare function TopNavbar({ brand, breadcrumbs, actions, user, height, showSearch, searchPlaceholder, onSearchClick, notificationCount, onNotificationClick, onMobileMenuClick, 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, className, }: TopNavbarProps): JSX.Element;
 
 export declare namespace TopNavbar {
     var displayName: string;
@@ -1310,6 +1440,8 @@ export declare interface TopNavbarProps {
     brand?: TopNavbarBrand;
     /** Breadcrumb items */
     breadcrumbs?: BreadcrumbItem_2[];
+    /** Page title displayed after brand (used for current page context) */
+    title?: string;
     /** Right-side action area */
     actions?: default_2.ReactNode;
     /** User avatar */
@@ -1326,8 +1458,10 @@ export declare interface TopNavbarProps {
     notificationCount?: number;
     /** Notification click handler */
     onNotificationClick?: () => void;
-    /** Mobile menu click handler */
+    /** Mobile menu click handler (shows only on mobile) */
     onMobileMenuClick?: () => void;
+    /** Sidebar toggle handler — shows burger icon (always visible) to collapse/expand sidebar */
+    onSidebarToggle?: () => void;
     /** User click handler */
     onUserClick?: () => void;
     /** Breadcrumb click handler */

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@uxuissk/design-system",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "private": false,
   "type": "module",
+  "workspaces": [
+    "packages/*"
+  ],
   "main": "./dist/sellsuki-ds.umd.cjs",
   "module": "./dist/sellsuki-ds.js",
   "types": "./dist/types/index.d.ts",
@@ -16,7 +19,11 @@
     "./styles.css": "./dist/sellsuki-ds.css"
   },
   "files": [
-    "dist",
+    "dist/sellsuki-ds.js",
+    "dist/sellsuki-ds.umd.cjs",
+    "dist/sellsuki-ds.css",
+    "dist/fonts",
+    "dist/types",
     "README.md"
   ],
   "sideEffects": [
@@ -25,19 +32,20 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "build:lib": "vite build --config vite.lib.config.ts",
+    "clean": "node --input-type=module -e \"import{rmSync}from'fs';try{rmSync('dist',{recursive:true,force:true})}catch{}\"",
+    "build:lib": "npm run clean && npm run lint:svelte-css && vite build --config vite.lib.config.ts && node scripts/inject-font-face.mjs && npm run hardcode:log",
+    "lint:svelte-css": "stylelint 'src/lib/svelte/**/*.svelte' --allow-empty-input",
+    "hardcode:log": "node scripts/check-hardcodes.mjs",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "prepublishOnly": "npm run build:lib"
   },
-  "dependencies": {},
   "peerDependencies": {
+    "lucide-react": ">=0.400.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "lucide-react": ">=0.400.0"
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "lucide-react": "0.487.0",
     "@emotion/react": "11.14.0",
     "@emotion/styled": "11.14.1",
     "@mui/icons-material": "7.3.5",
@@ -85,8 +93,10 @@
     "date-fns": "3.6.0",
     "embla-carousel-react": "8.6.0",
     "input-otp": "1.4.2",
+    "lucide-react": "0.487.0",
     "motion": "12.23.24",
     "next-themes": "0.4.6",
+    "postcss-html": "^1.8.1",
     "react-day-picker": "8.10.1",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
@@ -99,13 +109,16 @@
     "recharts": "2.15.2",
     "sonner": "2.0.3",
     "storybook": "^8.4.0",
+    "stylelint": "^17.6.0",
+    "stylelint-config-standard": "^40.0.0",
     "tailwind-merge": "3.2.0",
     "tailwindcss": "4.1.12",
     "tw-animate-css": "1.3.8",
     "typescript": "^5.5.0",
     "vaul": "1.1.2",
     "vite": "6.3.5",
-    "vite-plugin-dts": "^4.0.0"
+    "vite-plugin-dts": "^4.0.0",
+    "vite-plugin-static-copy": "^4.0.0"
   },
   "pnpm": {
     "overrides": {

package/dist/ai-rules.json

@@ -1,84 +0,0 @@
-{
-  "name": "Sellsuki Design System",
-  "version": "1.2.0",
-  "updated": "2026-03-20",
-  "url": "https://sellsukidesignsystemv12.vercel.app/ai-rules.json",
-  "storybook": "https://sellsukidesignsystemv12.vercel.app",
-  "npm": "@uxuissk/design-system",
-  "brand": {
-    "product": "Sellsuki — E-commerce management platform for Thai merchants",
-    "mood": "Professional, clean, trustworthy, light, airy, functional",
-    "design": "Clarity over decoration — flat design, minimal shadows"
-  },
-  "colors": {
-    "primary": "#32a9ff",
-    "primary-hover": "#1b8bf5",
-    "primary-light": "#f0f9ff",
-    "text-primary": "#1f2937",
-    "text-secondary": "#6b7280",
-    "border": "#e5e7eb",
-    "surface": "#f9fafb",
-    "background": "#ffffff",
-    "success": "#059669",
-    "success-light": "#d1fae5",
-    "warning": "#d97706",
-    "warning-light": "#fef3c7",
-    "danger": "#e11d48",
-    "danger-light": "#ffe4e6"
-  },
-  "typography": {
-    "body": "'DB HeaventRounded', 'Noto Sans Thai', sans-serif",
-    "button": "'Inter', sans-serif"
-  },
-  "spacing": {
-    "page-desktop": "24px",
-    "page-mobile": "16px",
-    "card-gap": "16px",
-    "form-gap": "16px",
-    "section-gap": "32px"
-  },
-  "border": {
-    "radius": "8px",
-    "shadow": "0px 1px 2px 0px rgba(0,0,0,0.05)"
-  },
-  "layout": {
-    "navbar-height": "72px",
-    "sidebar-width": "280px"
-  },
-  "button": {
-    "variants": ["primary", "secondary", "outline", "ghost", "destructive", "link"],
-    "sizes": { "sm": "32px", "md": "36px", "lg": "40px", "xl": "44px" },
-    "default": "variant=primary size=md",
-    "rule": "Max 1 primary button per view"
-  },
-  "components": {
-    "data-entry": ["DSButton", "IconButton", "ButtonGroup", "DSInput", "DSTextarea", "DSCheckbox", "CheckboxGroup", "DSRadio", "RadioGroup", "Switch", "Dropdown", "DatePicker", "SearchField", "ColorPicker", "FileUpload", "TagInput", "Rating", "TransferList"],
-    "data-display": ["DSTable", "Card", "CardHeader", "CardBody", "CardFooter", "StatCard", "Statistic", "Badge", "Tag", "Avatar", "AvatarGroup", "Timeline", "Tree", "EmptyState", "Skeleton"],
-    "navigation": ["TopNavbar", "Sidebar", "Breadcrumb", "Tabs", "Stepper", "Pagination"],
-    "feedback": ["Alert", "Modal", "Drawer", "ConfirmDialog", "Notification", "toast", "ToastContainer", "Tooltip", "Popover", "ProgressBar", "Spinner"],
-    "layout": ["Divider", "Menu", "ImagePreview"]
-  },
-  "rules": [
-    "Flat clean design — no heavy shadows or gradients",
-    "Max 1 primary button per view",
-    "Handle loading, empty, and error states",
-    "DB HeaventRounded for text, Inter for buttons only",
-    "Only colors from the defined palette",
-    "Follow spacing system strictly"
-  ],
-  "tailwind_patterns": {
-    "button-primary": "h-9 px-4 bg-[#32a9ff] hover:bg-[#1b8bf5] text-white text-sm font-semibold rounded-lg font-['Inter']",
-    "button-secondary": "h-9 px-4 bg-[#f3f4f6] hover:bg-[#e5e7eb] text-[#1f2937] text-sm font-semibold rounded-lg font-['Inter']",
-    "button-outline": "h-9 px-4 border border-[#32a9ff] text-[#32a9ff] bg-white hover:bg-[#f0f9ff] text-sm font-semibold rounded-lg font-['Inter']",
-    "button-destructive": "h-9 px-4 bg-[#e11d48] hover:bg-[#be123c] text-white text-sm font-semibold rounded-lg font-['Inter']",
-    "card": "bg-white rounded-lg border border-[#e5e7eb] p-4",
-    "input": "w-full h-9 px-3 border border-[#e5e7eb] rounded-lg text-sm text-[#1f2937] placeholder:text-[#9ca3af] focus:border-[#32a9ff] focus:ring-1 focus:ring-[#32a9ff] outline-none",
-    "badge-success": "px-2 py-0.5 text-xs font-medium rounded-full bg-[#d1fae5] text-[#065f46]",
-    "badge-warning": "px-2 py-0.5 text-xs font-medium rounded-full bg-[#fef3c7] text-[#92400e]",
-    "badge-danger": "px-2 py-0.5 text-xs font-medium rounded-full bg-[#ffe4e6] text-[#9f1239]",
-    "table-header": "px-4 py-3 bg-[#f9fafb] text-[#6b7280] text-xs font-semibold uppercase text-left",
-    "table-cell": "px-4 py-3 text-sm text-[#1f2937]",
-    "sidebar-item": "flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm text-[#6b7280] hover:bg-[#f0f9ff] hover:text-[#32a9ff]",
-    "sidebar-item-active": "flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm bg-[#f0f9ff] text-[#32a9ff] font-medium"
-  }
-}

package/dist/ai-rules.md

@@ -1,163 +0,0 @@
-# Sellsuki Design System — AI Rules (Hosted Version)
-
-> This file is the single source of truth for all AI tools generating Sellsuki UI.
-> URL: https://sellsukidesignsystemv12.vercel.app/ai-rules.md
-> Last updated: 2026-03-20
-
-## Important: Sandbox vs Full Mode
-
-**Sandbox mode** (Claude.ai Artifacts, v0, Google AI Studio):
-- Use ONLY React + Tailwind CSS + lucide-react + recharts
-- DO NOT import from @uxuissk/design-system or any external npm package
-- Recreate components inline using Tailwind classes matching tokens below
-- For font: use `font-['Inter']` for buttons, system font for body
-
-**Full mode** (Claude Code, Cursor, Bolt.new, Lovable, Firebase Studio):
-- Install: `npm install @uxuissk/design-system`
-- CSS: `import "@uxuissk/design-system/styles.css"` (always first)
-- Import: `import { DSButton, DSInput, Card, ... } from "@uxuissk/design-system"`
-
-## Brand
-
-- Product: **Sellsuki** — E-commerce management platform for Thai merchants
-- Mood: Professional, clean, trustworthy, light, airy, functional
-- Design: Clarity over decoration — flat design, minimal shadows
-
-## Colors
-
-| Token | Hex | Tailwind | Usage |
-|-------|-----|----------|-------|
-| Primary | `#32a9ff` | `bg-[#32a9ff]` | Buttons, links, brand |
-| Primary hover | `#1b8bf5` | `hover:bg-[#1b8bf5]` | Hover states |
-| Primary light | `#f0f9ff` | `bg-[#f0f9ff]` | Badges, highlights |
-| Text primary | `#1f2937` | `text-[#1f2937]` | Headings, body |
-| Text secondary | `#6b7280` | `text-[#6b7280]` | Muted, labels |
-| Border | `#e5e7eb` | `border-[#e5e7eb]` | Dividers, cards |
-| Surface | `#f9fafb` | `bg-[#f9fafb]` | Page background |
-| Success | `#059669` | `bg-[#059669]` | Success states |
-| Success light | `#d1fae5` | `bg-[#d1fae5]` | Success badges |
-| Warning | `#d97706` | `bg-[#d97706]` | Warning states |
-| Warning light | `#fef3c7` | `bg-[#fef3c7]` | Warning badges |
-| Danger | `#e11d48` | `bg-[#e11d48]` | Error, destructive |
-| Danger light | `#ffe4e6` | `bg-[#ffe4e6]` | Error badges |
-
-## Typography
-
-| Element | Font | Weight | Size |
-|---------|------|--------|------|
-| Body text | DB HeaventRounded, Noto Sans Thai, sans-serif | 400 | 16px |
-| Heading | DB HeaventRounded, Noto Sans Thai, sans-serif | 700 | 24-32px |
-| Button | Inter, sans-serif | 600 | 14px |
-| Label | DB HeaventRounded | 500 | 14px |
-| Caption | DB HeaventRounded | 400 | 12px |
-
-## Spacing
-
-- Page padding: `24px` desktop / `16px` mobile
-- Card gap: `16px`
-- Form field gap: `16px`
-- Section gap: `32px`
-- Border radius: `8px` (default)
-- Shadow: `0px 1px 2px 0px rgba(0,0,0,0.05)` — prefer borders
-
-## Layout
-
-- Navbar: `72px` height, white background, bottom border
-- Sidebar: `280px` width, white background, right border
-- Content: `flex-1`, `24px` padding
-
-## Button System
-
-| Variant | Background | Text | Border |
-|---------|-----------|------|--------|
-| Primary | `#32a9ff` | white | none |
-| Secondary | `#f3f4f6` | `#1f2937` | none |
-| Outline | transparent | `#32a9ff` | `#32a9ff` |
-| Ghost | transparent | `#6b7280` | none |
-| Destructive | `#e11d48` | white | none |
-| Link | transparent | `#32a9ff` | none |
-
-Sizes: `sm` 32px / `md` 36px (default) / `lg` 40px / `xl` 44px
-**Rule: Max 1 primary button per view**
-
-## Component Patterns (Tailwind)
-
-### Button
-```html
-<button class="h-9 px-4 bg-[#32a9ff] hover:bg-[#1b8bf5] text-white text-sm font-semibold rounded-lg font-['Inter']">
-```
-
-### Card
-```html
-<div class="bg-white rounded-lg border border-[#e5e7eb] p-4">
-```
-
-### Input
-```html
-<input class="w-full h-9 px-3 border border-[#e5e7eb] rounded-lg text-sm text-[#1f2937] placeholder:text-[#9ca3af] focus:border-[#32a9ff] focus:ring-1 focus:ring-[#32a9ff] outline-none" />
-```
-
-### Badge
-```html
-<span class="px-2 py-0.5 text-xs font-medium rounded-full bg-[#d1fae5] text-[#065f46]">Active</span>
-```
-
-### Table Header
-```html
-<th class="px-4 py-3 bg-[#f9fafb] text-[#6b7280] text-xs font-semibold uppercase text-left">
-```
-
-### Table Row
-```html
-<tr class="border-b border-[#e5e7eb] hover:bg-[#f9fafb]">
-  <td class="px-4 py-3 text-sm text-[#1f2937]">
-```
-
-### Sidebar Menu Item
-```html
-<div class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm text-[#6b7280] hover:bg-[#f0f9ff] hover:text-[#32a9ff] cursor-pointer">
-```
-
-### Active Menu Item
-```html
-<div class="flex items-center gap-3 px-4 py-2.5 rounded-lg text-sm bg-[#f0f9ff] text-[#32a9ff] font-medium">
-```
-
-## Components (41 total)
-
-**Data Entry**: DSButton, IconButton, ButtonGroup, DSInput, DSTextarea, DSCheckbox, CheckboxGroup, DSRadio, RadioGroup, Switch, Dropdown, DatePicker, SearchField, ColorPicker, FileUpload, TagInput, Rating, TransferList
-
-**Data Display**: DSTable, Card, CardHeader, CardBody, CardFooter, StatCard, Statistic, Badge, Tag, Avatar, AvatarGroup, Timeline, Tree, EmptyState, Skeleton
-
-**Navigation**: TopNavbar, Sidebar, Breadcrumb, Tabs, Stepper, Pagination
-
-**Feedback**: Alert, Modal, Drawer, ConfirmDialog, Notification, toast, ToastContainer, Tooltip, Popover, ProgressBar, Spinner
-
-**Layout**: Divider, Menu, ImagePreview
-
-## Rules
-
-1. Always use flat, clean design — no heavy shadows or gradients
-2. Max 1 primary button per view
-3. Handle loading (skeleton), empty, and error states
-4. Use DB HeaventRounded for text, Inter for buttons only
-5. Only colors from the palette above — no random colors
-6. Spacing must follow the defined system
-7. Support responsive: desktop-first
-
-## npm Package (for production code)
-
-```bash
-npm install @uxuissk/design-system
-```
-
-```tsx
-import "@uxuissk/design-system/styles.css";
-import { DSButton, DSInput, Card } from "@uxuissk/design-system";
-```
-
-## Resources
-
-- Storybook: https://sellsukidesignsystemv12.vercel.app
-- npm: @uxuissk/design-system
-- GitHub: https://github.com/BearyCenter/Sellsukidesignsystemv12