klun-ui 0.2.2 → 0.3.0

package/dist/templates/index.d.cts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
+import { C as ChipColor } from '../Chip-DiCYJmnv.cjs';
 
 interface SidebarUser {
     name: string;
@@ -45,15 +46,18 @@ declare function SettingsTemplate(): react.JSX.Element;
 
 interface MetronicNavChild {
     key: string;
-    label: string;
+    /** Optional override — otherwise resolved from the demo dictionary. */
+    label?: string;
 }
 interface MetronicNavItem {
     key: string;
-    label: string;
+    label?: string;
     /** Remix Icon class, e.g. `ri-dashboard-line`. */
     icon: string;
     badge?: string;
     children?: MetronicNavChild[];
+    /** Render a hairline above this item (section break). */
+    dividerBefore?: boolean;
 }
 interface MetronicSidebarProps {
     /** Active item key. */
@@ -62,11 +66,56 @@ interface MetronicSidebarProps {
 }
 declare function MetronicSidebar({ active, onNavigate }: MetronicSidebarProps): react.JSX.Element;
 
-declare function MetronicTopBar(): react.JSX.Element;
+/** Accent skins shipped by the design system (`data-mode`). */
+declare const DEMO_SKINS: readonly ["metronic", "blue", "purple", "orange", "green", "slate"];
+type DemoSkin = (typeof DEMO_SKINS)[number];
+interface DemoNotification {
+    id: string;
+    title: string;
+    body: string;
+    /** ISO timestamp. */
+    time: string;
+    icon: string;
+    tone: "primary" | "success" | "warning" | "error";
+    read: boolean;
+}
+interface MetronicTopBarProps {
+    /** Open the ⌘K command palette (the search box does this too). */
+    onOpenPalette?: () => void;
+    /** Platform hint rendered in the search box. */
+    paletteHint?: string;
+    theme: "light" | "dark";
+    onThemeChange?: (theme: "light" | "dark") => void;
+    density: "default" | "compact";
+    onDensityChange?: (density: "default" | "compact") => void;
+    skin: DemoSkin;
+    onSkinChange?: (skin: DemoSkin) => void;
+    /** Active BCP-47 locale code (`en-US`, `zh-CN`, …). */
+    localeCode?: string;
+    onLocaleChange?: (code: string) => void;
+    notifications?: DemoNotification[];
+    onNotificationClick?: (notification: DemoNotification) => void;
+    onMarkAllRead?: () => void;
+    /** Navigate to another screen. */
+    onNavigate?: (key: string) => void;
+    /** Opens the create-order dialog. */
+    onNewOrder?: () => void;
+    /** Sign out (the demo just shows a toast). */
+    onSignOut?: () => void;
+}
+declare function MetronicTopBar({ onOpenPalette, paletteHint, theme, onThemeChange, density, onDensityChange, skin, onSkinChange, localeCode, onLocaleChange, notifications, onNotificationClick, onMarkAllRead, onNavigate, onNewOrder, onSignOut, }: MetronicTopBarProps): react.JSX.Element;
 
-declare function DashboardScreen(): react.JSX.Element;
+interface DashboardScreenProps {
+    /** Jump to the orders screen — fired by “View all” and by clicking a recent order. */
+    onViewAllOrders?: (orderId?: string) => void;
+}
+declare function DashboardScreen({ onViewAllOrders }?: DashboardScreenProps): react.JSX.Element;
 
-declare function OrdersScreen(): react.JSX.Element;
+interface OrdersScreenProps {
+    /** Bump this counter to pop the create dialog (used by the shell's top bar). */
+    createRequest?: number;
+}
+declare function OrdersScreen({ createRequest }: OrdersScreenProps): react.JSX.Element;
 
 declare function ProductsScreen(): react.JSX.Element;
 
@@ -104,7 +153,17 @@ declare function ProductWizardPage({ mode, initial, onCancel, onSave }: ProductW
 
 declare function CustomersScreen(): react.JSX.Element;
 
-declare function UsersScreen(): react.JSX.Element;
+interface UsersScreenProps {
+    /** Pre-filter the list by department (used by the departments screen). */
+    initialDepartment?: string;
+    /** Open the audit log filtered by this member. */
+    onOpenAudit?: (actor: string) => void;
+    /** Jump to the roles & permissions matrix. */
+    onOpenRoles?: () => void;
+    /** Jump to the departments tree. */
+    onOpenDepartments?: () => void;
+}
+declare function UsersScreen({ initialDepartment, onOpenAudit, onOpenRoles, onOpenDepartments }?: UsersScreenProps): react.JSX.Element;
 
 declare function RolesScreen(): react.JSX.Element;
 
@@ -113,6 +172,158 @@ declare function ReportsScreen({ view }: {
     view?: ReportsView;
 }): react.JSX.Element;
 
+interface DepartmentsScreenProps {
+    /** Jump to the team page (the drawer links to members), focused on a department. */
+    onOpenTeam?: (departmentName?: string) => void;
+}
+declare function DepartmentsScreen({ onOpenTeam }?: DepartmentsScreenProps): react.JSX.Element;
+
+interface RoleTreeScreenProps {
+    /** Jump to the roles & permissions matrix. */
+    onOpenRoles?: () => void;
+}
+declare function RoleTreeScreen({ onOpenRoles }?: RoleTreeScreenProps): react.JSX.Element;
+
+declare function TasksScreen(): react.JSX.Element;
+
+interface AuditScreenProps {
+    /** Pre-filter the trail by actor (set from the user detail drawer). */
+    initialActor?: string;
+}
+declare function AuditScreen({ initialActor }?: AuditScreenProps): react.JSX.Element;
+
+type UserStatus = "Active" | "Invited" | "Suspended" | "Locked";
+type RoleId = "Owner" | "Admin" | "Manager" | "Editor" | "Viewer" | "Support";
+interface UserSession {
+    id: string;
+    device: string;
+    icon: string;
+    browser: string;
+    ip: string;
+    location: string;
+    lastActive: string;
+    current?: boolean;
+}
+interface UserActivity {
+    id: string;
+    at: string;
+    action: "create" | "update" | "delete" | "login" | "export" | "permission";
+    target: string;
+    ip: string;
+    result: "success" | "failed" | "blocked";
+}
+interface PermissionOverride {
+    id: string;
+    permission: string;
+    /** Allow grants a permission the roles don't; deny removes one they grant. */
+    effect: "allow" | "deny";
+}
+interface DemoUser {
+    id: string;
+    name: string;
+    email: string;
+    title: string;
+    avatarColor: "blue" | "purple" | "green" | "orange" | "gray";
+    /** Department id — see DEPARTMENTS. */
+    department: string;
+    manager: string;
+    location: string;
+    timezone: string;
+    roles: RoleId[];
+    status: UserStatus;
+    twoFA: boolean;
+    forcePasswordChange: boolean;
+    failedLogins: number;
+    lastActive: string;
+    createdAt: string;
+    passwordChangedAt: string;
+    overrides: PermissionOverride[];
+    sessions: UserSession[];
+    activity: UserActivity[];
+}
+interface DepartmentOption {
+    id: string;
+    name: string;
+    path: string;
+}
+declare const DEPARTMENTS: DepartmentOption[];
+declare const departmentPath: (id: string) => string;
+declare const departmentName: (id: string) => string;
+/** A department plus every descendant — picking a parent filters the whole branch. */
+declare const departmentIdsWithChildren: (id: string) => string[];
+/** Depth of a department in the tree (0 = root). */
+declare const departmentDepth: (id: string) => number;
+/** Direct children of a department (or the roots when `id` is null). */
+declare const departmentChildren: (id: string | null) => DepartmentOption[];
+declare const ROLE_IDS: RoleId[];
+/** Permissions granted by each role (children inherit their parents'). */
+declare const ROLE_PERMISSIONS: Record<RoleId, string[]>;
+declare const ROLE_COLOR: Record<RoleId, ChipColor>;
+/** Every permission the workspace knows about. */
+declare const ALL_PERMISSIONS: string[];
+/** Permissions granted by the user's roles (before overrides). */
+declare const rolePermissions: (roles: RoleId[]) => string[];
+/** Final permission set = role grants + allow overrides − deny overrides. */
+declare const effectivePermissions: (user: DemoUser) => string[];
+declare const USER_STATUS_COLOR: Record<UserStatus, "green" | "blue" | "gray" | "red">;
+declare const USER_STATUSES: UserStatus[];
+declare const INITIAL_USERS: DemoUser[];
+
+interface UserDetailDrawerProps {
+    user: DemoUser | null;
+    onClose: () => void;
+    /** Persist changes back into the list. */
+    onChange: (user: DemoUser) => void;
+    /** Jump to the audit log filtered by this user. */
+    onOpenAudit?: (actor: string) => void;
+    /** Jump to the roles & permissions matrix. */
+    onOpenRoles?: () => void;
+    /** Jump to the departments tree. */
+    onOpenDepartments?: () => void;
+}
+declare function UserDetailDrawer({ user, onClose, onChange, onOpenAudit, onOpenRoles, onOpenDepartments }: UserDetailDrawerProps): react.JSX.Element;
+
+interface DepartmentFilterProps {
+    /** Active department id, or `"all"`. */
+    value: string;
+    onChange: (id: string) => void;
+    /** Members used for the per-branch counters. */
+    users: DemoUser[];
+}
+declare function DepartmentFilter({ value, onChange, users }: DepartmentFilterProps): react.JSX.Element;
+
+/** Every locale the design system ships, as a menu-friendly list. */
+declare const LOCALE_OPTIONS: {
+    code: string;
+    label: string;
+}[];
+/** Right-to-left locales — the provider flips the whole layout. */
+declare const RTL_LOCALES: string[];
+interface DemoPageCopy {
+    title: string;
+    subtitle: string;
+}
+interface DemoText {
+    nav: Record<string, string>;
+    shell: Record<string, string>;
+    common: Record<string, string>;
+    pages: Record<string, DemoPageCopy>;
+}
+/** Demo copy — add a language by copying a block and translating the strings. */
+declare const DEMO_TEXT: Record<string, DemoText>;
+/** Demo copy for a locale code — falls back to English. */
+declare const demoTextFor: (code: string) => DemoText;
+/** Active demo copy — falls back to English for locales without a dictionary. */
+declare function useDemoText(): DemoText;
+interface PageHeaderProps {
+    /** Key into `pages`. */
+    page: string;
+    /** Right-aligned slot for page actions. */
+    extra?: ReactNode;
+}
+/** Localised `<h1>` + subtitle used at the top of every demo screen. */
+declare function PageHeader({ page, extra }: PageHeaderProps): react.JSX.Element;
+
 /** Semantic tone → chart color. */
 type ChartTone = "primary" | "success" | "danger" | "info" | "warning" | "feature";
 interface SparklineProps {
@@ -181,6 +392,46 @@ declare function MiniStat({ label, value, hint, tone }: MiniStatProps): react.JS
 
 declare function MetronicDashboardTemplate(): react.JSX.Element;
 
-declare function MetronicSettingsTemplate(): react.JSX.Element;
+/** Tabs of the settings page. */
+type SettingsSectionKey = "profile" | "account" | "notifications" | "billing" | "api";
+interface SettingsNavItem {
+    key: SettingsSectionKey;
+    label: string;
+    /** Remix Icon class. */
+    icon: string;
+    /** One-liner used by the page header. */
+    description: string;
+}
+declare const SETTINGS_NAV: SettingsNavItem[];
+
+interface ProfileSectionProps {
+    /** Fired whenever the amount of unsaved work changes. */
+    onDirtyChange?: (dirty: boolean) => void;
+}
+declare function ProfileSection({ onDirtyChange }: ProfileSectionProps): react.JSX.Element;
+
+declare function AccountSection(): react.JSX.Element;
+
+interface NotificationsSectionProps {
+    /** Fired whenever the amount of unsaved work changes. */
+    onDirtyChange?: (dirty: boolean) => void;
+}
+declare function NotificationsSection({ onDirtyChange }: NotificationsSectionProps): react.JSX.Element;
+
+declare function BillingSection(): react.JSX.Element;
+
+declare function ApiKeysSection(): react.JSX.Element;
+
+interface MetronicSettingsTemplateProps {
+    /** Controlled active tab. */
+    section?: SettingsSectionKey;
+    /** Initial tab in uncontrolled mode. Default `"profile"`. */
+    defaultSection?: SettingsSectionKey;
+    /** Fired when the user picks another tab (controlled mode). */
+    onSectionChange?: (section: SettingsSectionKey) => void;
+    /** Cap the page column — `"none"` (default) fills the host width. */
+    maxWidth?: number | string;
+}
+declare function MetronicSettingsTemplate({ section, defaultSection, onSectionChange, maxWidth, }?: MetronicSettingsTemplateProps): react.JSX.Element;
 
-export { AIAssistantTemplate, AgentChatTemplate, AreaChart, type AreaChartProps, BarChart, type BarChartProps, CATEGORIES, CalendarTemplate, type ChartTone, CryptoTemplate, CustomersScreen, DashboardScreen, DashboardTemplate, DonutChart, type DonutChartProps, Kpi, type KpiProps, MarketingTemplate, MetronicDashboardTemplate, type MetronicNavChild, type MetronicNavItem, MetronicSettingsTemplate, MetronicSidebar, type MetronicSidebarProps, MetronicTopBar, MiniStat, type MiniStatProps, OrdersScreen, OverviewScreen, PricingTemplate, type Product, type ProductDraft, type ProductStatus, ProductWizardPage, type ProductWizardPageProps, ProductsScreen, ReportsScreen, type ReportsView, RolesScreen, STATUS_COLOR, SettingsScreen, SettingsTemplate, Sidebar, type SidebarProps, type SidebarUser, Sparkline, type SparklineProps, TopBar, type TopBarProps, UsersScreen, deriveStatus, emptyDraft };
+export { AIAssistantTemplate, ALL_PERMISSIONS, AccountSection, AgentChatTemplate, ApiKeysSection, AreaChart, type AreaChartProps, AuditScreen, type AuditScreenProps, BarChart, type BarChartProps, BillingSection, CATEGORIES, CalendarTemplate, type ChartTone, CryptoTemplate, CustomersScreen, DEMO_SKINS, DEMO_TEXT, DEPARTMENTS, DashboardScreen, type DashboardScreenProps, DashboardTemplate, type DemoNotification, type DemoPageCopy, type DemoSkin, type DemoText, type DemoUser, DepartmentFilter, type DepartmentFilterProps, type DepartmentOption, DepartmentsScreen, type DepartmentsScreenProps, DonutChart, type DonutChartProps, INITIAL_USERS, Kpi, type KpiProps, LOCALE_OPTIONS, MarketingTemplate, MetronicDashboardTemplate, type MetronicNavChild, type MetronicNavItem, MetronicSettingsTemplate, type MetronicSettingsTemplateProps, MetronicSidebar, type MetronicSidebarProps, MetronicTopBar, type MetronicTopBarProps, MiniStat, type MiniStatProps, NotificationsSection, type NotificationsSectionProps, OrdersScreen, type OrdersScreenProps, OverviewScreen, PageHeader, type PageHeaderProps, type PermissionOverride, PricingTemplate, type Product, type ProductDraft, type ProductStatus, ProductWizardPage, type ProductWizardPageProps, ProductsScreen, ProfileSection, type ProfileSectionProps, ROLE_COLOR, ROLE_IDS, ROLE_PERMISSIONS, RTL_LOCALES, ReportsScreen, type ReportsView, type RoleId, RoleTreeScreen, type RoleTreeScreenProps, RolesScreen, SETTINGS_NAV, STATUS_COLOR, type SettingsNavItem, SettingsScreen, type SettingsSectionKey, SettingsTemplate, Sidebar, type SidebarProps, type SidebarUser, Sparkline, type SparklineProps, TasksScreen, TopBar, type TopBarProps, USER_STATUSES, USER_STATUS_COLOR, type UserActivity, UserDetailDrawer, type UserDetailDrawerProps, type UserSession, type UserStatus, UsersScreen, demoTextFor, departmentChildren, departmentDepth, departmentIdsWithChildren, departmentName, departmentPath, deriveStatus, effectivePermissions, emptyDraft, rolePermissions, useDemoText };

package/dist/templates/index.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
+import { C as ChipColor } from '../Chip-DiCYJmnv.js';
 
 interface SidebarUser {
     name: string;
@@ -45,15 +46,18 @@ declare function SettingsTemplate(): react.JSX.Element;
 
 interface MetronicNavChild {
     key: string;
-    label: string;
+    /** Optional override — otherwise resolved from the demo dictionary. */
+    label?: string;
 }
 interface MetronicNavItem {
     key: string;
-    label: string;
+    label?: string;
     /** Remix Icon class, e.g. `ri-dashboard-line`. */
     icon: string;
     badge?: string;
     children?: MetronicNavChild[];
+    /** Render a hairline above this item (section break). */
+    dividerBefore?: boolean;
 }
 interface MetronicSidebarProps {
     /** Active item key. */
@@ -62,11 +66,56 @@ interface MetronicSidebarProps {
 }
 declare function MetronicSidebar({ active, onNavigate }: MetronicSidebarProps): react.JSX.Element;
 
-declare function MetronicTopBar(): react.JSX.Element;
+/** Accent skins shipped by the design system (`data-mode`). */
+declare const DEMO_SKINS: readonly ["metronic", "blue", "purple", "orange", "green", "slate"];
+type DemoSkin = (typeof DEMO_SKINS)[number];
+interface DemoNotification {
+    id: string;
+    title: string;
+    body: string;
+    /** ISO timestamp. */
+    time: string;
+    icon: string;
+    tone: "primary" | "success" | "warning" | "error";
+    read: boolean;
+}
+interface MetronicTopBarProps {
+    /** Open the ⌘K command palette (the search box does this too). */
+    onOpenPalette?: () => void;
+    /** Platform hint rendered in the search box. */
+    paletteHint?: string;
+    theme: "light" | "dark";
+    onThemeChange?: (theme: "light" | "dark") => void;
+    density: "default" | "compact";
+    onDensityChange?: (density: "default" | "compact") => void;
+    skin: DemoSkin;
+    onSkinChange?: (skin: DemoSkin) => void;
+    /** Active BCP-47 locale code (`en-US`, `zh-CN`, …). */
+    localeCode?: string;
+    onLocaleChange?: (code: string) => void;
+    notifications?: DemoNotification[];
+    onNotificationClick?: (notification: DemoNotification) => void;
+    onMarkAllRead?: () => void;
+    /** Navigate to another screen. */
+    onNavigate?: (key: string) => void;
+    /** Opens the create-order dialog. */
+    onNewOrder?: () => void;
+    /** Sign out (the demo just shows a toast). */
+    onSignOut?: () => void;
+}
+declare function MetronicTopBar({ onOpenPalette, paletteHint, theme, onThemeChange, density, onDensityChange, skin, onSkinChange, localeCode, onLocaleChange, notifications, onNotificationClick, onMarkAllRead, onNavigate, onNewOrder, onSignOut, }: MetronicTopBarProps): react.JSX.Element;
 
-declare function DashboardScreen(): react.JSX.Element;
+interface DashboardScreenProps {
+    /** Jump to the orders screen — fired by “View all” and by clicking a recent order. */
+    onViewAllOrders?: (orderId?: string) => void;
+}
+declare function DashboardScreen({ onViewAllOrders }?: DashboardScreenProps): react.JSX.Element;
 
-declare function OrdersScreen(): react.JSX.Element;
+interface OrdersScreenProps {
+    /** Bump this counter to pop the create dialog (used by the shell's top bar). */
+    createRequest?: number;
+}
+declare function OrdersScreen({ createRequest }: OrdersScreenProps): react.JSX.Element;
 
 declare function ProductsScreen(): react.JSX.Element;
 
@@ -104,7 +153,17 @@ declare function ProductWizardPage({ mode, initial, onCancel, onSave }: ProductW
 
 declare function CustomersScreen(): react.JSX.Element;
 
-declare function UsersScreen(): react.JSX.Element;
+interface UsersScreenProps {
+    /** Pre-filter the list by department (used by the departments screen). */
+    initialDepartment?: string;
+    /** Open the audit log filtered by this member. */
+    onOpenAudit?: (actor: string) => void;
+    /** Jump to the roles & permissions matrix. */
+    onOpenRoles?: () => void;
+    /** Jump to the departments tree. */
+    onOpenDepartments?: () => void;
+}
+declare function UsersScreen({ initialDepartment, onOpenAudit, onOpenRoles, onOpenDepartments }?: UsersScreenProps): react.JSX.Element;
 
 declare function RolesScreen(): react.JSX.Element;
 
@@ -113,6 +172,158 @@ declare function ReportsScreen({ view }: {
     view?: ReportsView;
 }): react.JSX.Element;
 
+interface DepartmentsScreenProps {
+    /** Jump to the team page (the drawer links to members), focused on a department. */
+    onOpenTeam?: (departmentName?: string) => void;
+}
+declare function DepartmentsScreen({ onOpenTeam }?: DepartmentsScreenProps): react.JSX.Element;
+
+interface RoleTreeScreenProps {
+    /** Jump to the roles & permissions matrix. */
+    onOpenRoles?: () => void;
+}
+declare function RoleTreeScreen({ onOpenRoles }?: RoleTreeScreenProps): react.JSX.Element;
+
+declare function TasksScreen(): react.JSX.Element;
+
+interface AuditScreenProps {
+    /** Pre-filter the trail by actor (set from the user detail drawer). */
+    initialActor?: string;
+}
+declare function AuditScreen({ initialActor }?: AuditScreenProps): react.JSX.Element;
+
+type UserStatus = "Active" | "Invited" | "Suspended" | "Locked";
+type RoleId = "Owner" | "Admin" | "Manager" | "Editor" | "Viewer" | "Support";
+interface UserSession {
+    id: string;
+    device: string;
+    icon: string;
+    browser: string;
+    ip: string;
+    location: string;
+    lastActive: string;
+    current?: boolean;
+}
+interface UserActivity {
+    id: string;
+    at: string;
+    action: "create" | "update" | "delete" | "login" | "export" | "permission";
+    target: string;
+    ip: string;
+    result: "success" | "failed" | "blocked";
+}
+interface PermissionOverride {
+    id: string;
+    permission: string;
+    /** Allow grants a permission the roles don't; deny removes one they grant. */
+    effect: "allow" | "deny";
+}
+interface DemoUser {
+    id: string;
+    name: string;
+    email: string;
+    title: string;
+    avatarColor: "blue" | "purple" | "green" | "orange" | "gray";
+    /** Department id — see DEPARTMENTS. */
+    department: string;
+    manager: string;
+    location: string;
+    timezone: string;
+    roles: RoleId[];
+    status: UserStatus;
+    twoFA: boolean;
+    forcePasswordChange: boolean;
+    failedLogins: number;
+    lastActive: string;
+    createdAt: string;
+    passwordChangedAt: string;
+    overrides: PermissionOverride[];
+    sessions: UserSession[];
+    activity: UserActivity[];
+}
+interface DepartmentOption {
+    id: string;
+    name: string;
+    path: string;
+}
+declare const DEPARTMENTS: DepartmentOption[];
+declare const departmentPath: (id: string) => string;
+declare const departmentName: (id: string) => string;
+/** A department plus every descendant — picking a parent filters the whole branch. */
+declare const departmentIdsWithChildren: (id: string) => string[];
+/** Depth of a department in the tree (0 = root). */
+declare const departmentDepth: (id: string) => number;
+/** Direct children of a department (or the roots when `id` is null). */
+declare const departmentChildren: (id: string | null) => DepartmentOption[];
+declare const ROLE_IDS: RoleId[];
+/** Permissions granted by each role (children inherit their parents'). */
+declare const ROLE_PERMISSIONS: Record<RoleId, string[]>;
+declare const ROLE_COLOR: Record<RoleId, ChipColor>;
+/** Every permission the workspace knows about. */
+declare const ALL_PERMISSIONS: string[];
+/** Permissions granted by the user's roles (before overrides). */
+declare const rolePermissions: (roles: RoleId[]) => string[];
+/** Final permission set = role grants + allow overrides − deny overrides. */
+declare const effectivePermissions: (user: DemoUser) => string[];
+declare const USER_STATUS_COLOR: Record<UserStatus, "green" | "blue" | "gray" | "red">;
+declare const USER_STATUSES: UserStatus[];
+declare const INITIAL_USERS: DemoUser[];
+
+interface UserDetailDrawerProps {
+    user: DemoUser | null;
+    onClose: () => void;
+    /** Persist changes back into the list. */
+    onChange: (user: DemoUser) => void;
+    /** Jump to the audit log filtered by this user. */
+    onOpenAudit?: (actor: string) => void;
+    /** Jump to the roles & permissions matrix. */
+    onOpenRoles?: () => void;
+    /** Jump to the departments tree. */
+    onOpenDepartments?: () => void;
+}
+declare function UserDetailDrawer({ user, onClose, onChange, onOpenAudit, onOpenRoles, onOpenDepartments }: UserDetailDrawerProps): react.JSX.Element;
+
+interface DepartmentFilterProps {
+    /** Active department id, or `"all"`. */
+    value: string;
+    onChange: (id: string) => void;
+    /** Members used for the per-branch counters. */
+    users: DemoUser[];
+}
+declare function DepartmentFilter({ value, onChange, users }: DepartmentFilterProps): react.JSX.Element;
+
+/** Every locale the design system ships, as a menu-friendly list. */
+declare const LOCALE_OPTIONS: {
+    code: string;
+    label: string;
+}[];
+/** Right-to-left locales — the provider flips the whole layout. */
+declare const RTL_LOCALES: string[];
+interface DemoPageCopy {
+    title: string;
+    subtitle: string;
+}
+interface DemoText {
+    nav: Record<string, string>;
+    shell: Record<string, string>;
+    common: Record<string, string>;
+    pages: Record<string, DemoPageCopy>;
+}
+/** Demo copy — add a language by copying a block and translating the strings. */
+declare const DEMO_TEXT: Record<string, DemoText>;
+/** Demo copy for a locale code — falls back to English. */
+declare const demoTextFor: (code: string) => DemoText;
+/** Active demo copy — falls back to English for locales without a dictionary. */
+declare function useDemoText(): DemoText;
+interface PageHeaderProps {
+    /** Key into `pages`. */
+    page: string;
+    /** Right-aligned slot for page actions. */
+    extra?: ReactNode;
+}
+/** Localised `<h1>` + subtitle used at the top of every demo screen. */
+declare function PageHeader({ page, extra }: PageHeaderProps): react.JSX.Element;
+
 /** Semantic tone → chart color. */
 type ChartTone = "primary" | "success" | "danger" | "info" | "warning" | "feature";
 interface SparklineProps {
@@ -181,6 +392,46 @@ declare function MiniStat({ label, value, hint, tone }: MiniStatProps): react.JS
 
 declare function MetronicDashboardTemplate(): react.JSX.Element;
 
-declare function MetronicSettingsTemplate(): react.JSX.Element;
+/** Tabs of the settings page. */
+type SettingsSectionKey = "profile" | "account" | "notifications" | "billing" | "api";
+interface SettingsNavItem {
+    key: SettingsSectionKey;
+    label: string;
+    /** Remix Icon class. */
+    icon: string;
+    /** One-liner used by the page header. */
+    description: string;
+}
+declare const SETTINGS_NAV: SettingsNavItem[];
+
+interface ProfileSectionProps {
+    /** Fired whenever the amount of unsaved work changes. */
+    onDirtyChange?: (dirty: boolean) => void;
+}
+declare function ProfileSection({ onDirtyChange }: ProfileSectionProps): react.JSX.Element;
+
+declare function AccountSection(): react.JSX.Element;
+
+interface NotificationsSectionProps {
+    /** Fired whenever the amount of unsaved work changes. */
+    onDirtyChange?: (dirty: boolean) => void;
+}
+declare function NotificationsSection({ onDirtyChange }: NotificationsSectionProps): react.JSX.Element;
+
+declare function BillingSection(): react.JSX.Element;
+
+declare function ApiKeysSection(): react.JSX.Element;
+
+interface MetronicSettingsTemplateProps {
+    /** Controlled active tab. */
+    section?: SettingsSectionKey;
+    /** Initial tab in uncontrolled mode. Default `"profile"`. */
+    defaultSection?: SettingsSectionKey;
+    /** Fired when the user picks another tab (controlled mode). */
+    onSectionChange?: (section: SettingsSectionKey) => void;
+    /** Cap the page column — `"none"` (default) fills the host width. */
+    maxWidth?: number | string;
+}
+declare function MetronicSettingsTemplate({ section, defaultSection, onSectionChange, maxWidth, }?: MetronicSettingsTemplateProps): react.JSX.Element;
 
-export { AIAssistantTemplate, AgentChatTemplate, AreaChart, type AreaChartProps, BarChart, type BarChartProps, CATEGORIES, CalendarTemplate, type ChartTone, CryptoTemplate, CustomersScreen, DashboardScreen, DashboardTemplate, DonutChart, type DonutChartProps, Kpi, type KpiProps, MarketingTemplate, MetronicDashboardTemplate, type MetronicNavChild, type MetronicNavItem, MetronicSettingsTemplate, MetronicSidebar, type MetronicSidebarProps, MetronicTopBar, MiniStat, type MiniStatProps, OrdersScreen, OverviewScreen, PricingTemplate, type Product, type ProductDraft, type ProductStatus, ProductWizardPage, type ProductWizardPageProps, ProductsScreen, ReportsScreen, type ReportsView, RolesScreen, STATUS_COLOR, SettingsScreen, SettingsTemplate, Sidebar, type SidebarProps, type SidebarUser, Sparkline, type SparklineProps, TopBar, type TopBarProps, UsersScreen, deriveStatus, emptyDraft };
+export { AIAssistantTemplate, ALL_PERMISSIONS, AccountSection, AgentChatTemplate, ApiKeysSection, AreaChart, type AreaChartProps, AuditScreen, type AuditScreenProps, BarChart, type BarChartProps, BillingSection, CATEGORIES, CalendarTemplate, type ChartTone, CryptoTemplate, CustomersScreen, DEMO_SKINS, DEMO_TEXT, DEPARTMENTS, DashboardScreen, type DashboardScreenProps, DashboardTemplate, type DemoNotification, type DemoPageCopy, type DemoSkin, type DemoText, type DemoUser, DepartmentFilter, type DepartmentFilterProps, type DepartmentOption, DepartmentsScreen, type DepartmentsScreenProps, DonutChart, type DonutChartProps, INITIAL_USERS, Kpi, type KpiProps, LOCALE_OPTIONS, MarketingTemplate, MetronicDashboardTemplate, type MetronicNavChild, type MetronicNavItem, MetronicSettingsTemplate, type MetronicSettingsTemplateProps, MetronicSidebar, type MetronicSidebarProps, MetronicTopBar, type MetronicTopBarProps, MiniStat, type MiniStatProps, NotificationsSection, type NotificationsSectionProps, OrdersScreen, type OrdersScreenProps, OverviewScreen, PageHeader, type PageHeaderProps, type PermissionOverride, PricingTemplate, type Product, type ProductDraft, type ProductStatus, ProductWizardPage, type ProductWizardPageProps, ProductsScreen, ProfileSection, type ProfileSectionProps, ROLE_COLOR, ROLE_IDS, ROLE_PERMISSIONS, RTL_LOCALES, ReportsScreen, type ReportsView, type RoleId, RoleTreeScreen, type RoleTreeScreenProps, RolesScreen, SETTINGS_NAV, STATUS_COLOR, type SettingsNavItem, SettingsScreen, type SettingsSectionKey, SettingsTemplate, Sidebar, type SidebarProps, type SidebarUser, Sparkline, type SparklineProps, TasksScreen, TopBar, type TopBarProps, USER_STATUSES, USER_STATUS_COLOR, type UserActivity, UserDetailDrawer, type UserDetailDrawerProps, type UserSession, type UserStatus, UsersScreen, demoTextFor, departmentChildren, departmentDepth, departmentIdsWithChildren, departmentName, departmentPath, deriveStatus, effectivePermissions, emptyDraft, rolePermissions, useDemoText };