@bricks-toolkit/toolkit 0.1.0

package/dist/components/Sidebar/Sidebar.types.d.ts

@@ -0,0 +1,87 @@
+import type { ReactNode, ElementType, CSSProperties } from 'react';
+export interface SidebarItem {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    href?: string;
+    onClick?: () => void;
+    isActive?: boolean;
+    badge?: ReactNode;
+    /** Optional component to use for the item (e.g., NavLink) */
+    component?: ElementType;
+    /** Optional props for the custom component */
+    componentProps?: Record<string, unknown>;
+    /** Optional nested items */
+    items?: SidebarItem[];
+    /** Whether the item is currently expanded (for nested items) */
+    isExpanded?: boolean;
+    /** Whether the item should be hidden */
+    hidden?: boolean;
+}
+export interface SidebarGroup {
+    id: string;
+    label?: string;
+    items: SidebarItem[];
+    /** Whether the group should be hidden */
+    hidden?: boolean;
+}
+export interface SidebarClassNames {
+    root?: string;
+    header?: string;
+    content?: string;
+    footer?: string;
+    group?: string;
+    groupLabel?: string;
+    item?: string;
+    itemIcon?: string;
+    itemLabel?: string;
+    itemActive?: string;
+    itemCollapsed?: string;
+    toggleButton?: string;
+}
+export interface SidebarStyles {
+    root?: CSSProperties;
+    header?: CSSProperties;
+    content?: CSSProperties;
+    footer?: CSSProperties;
+    group?: CSSProperties;
+    groupLabel?: CSSProperties;
+    item?: CSSProperties;
+    itemIcon?: CSSProperties;
+    itemLabel?: CSSProperties;
+    toggleButton?: CSSProperties;
+}
+export interface SidebarProps {
+    /** Groups of navigation items to display in the sidebar. */
+    groups: SidebarGroup[];
+    /** Whether the sidebar is in its collapsed state. */
+    isCollapsed?: boolean;
+    /** Callback triggered when the collapsed state changes. */
+    onToggleCollapse?: (isCollapsed: boolean) => void;
+    /** Optional logo or brand element to display at the top. */
+    logo?: ReactNode;
+    /** Optional footer content. */
+    footer?: ReactNode;
+    /** Additional CSS classes for the container. */
+    className?: string;
+    /** Whether to show the glass effect. */
+    glass?: boolean;
+    /** Custom width for expanded state (default: 288px / 72rem) */
+    width?: string | number;
+    /** Custom width for collapsed state (default: 80px / 20rem) */
+    collapsedWidth?: string | number;
+    /** Whether to show the built-in collapse toggle button */
+    showToggleButton?: boolean;
+    /** Position of the toggle button ('top' | 'bottom' | 'center') */
+    togglePosition?: 'top' | 'bottom' | 'center';
+    /** Placement of the sidebar */
+    position?: 'left' | 'right';
+    /** Whether icons should be centered when collapsed */
+    centerIcons?: boolean;
+    /** Deep customization of CSS classes */
+    classNames?: SidebarClassNames;
+    /** Deep customization of inline styles */
+    styles?: SidebarStyles;
+    /** Custom render function for items */
+    renderItem?: (item: SidebarItem, isCollapsed: boolean) => ReactNode;
+}

package/dist/components/Sidebar/index.d.ts

@@ -0,0 +1,2 @@
+export { Sidebar } from './Sidebar';
+export type { SidebarProps, SidebarItem, SidebarGroup } from './Sidebar.types';

package/dist/components/Skeleton/Skeleton.d.ts

@@ -0,0 +1,26 @@
+import type { SkeletonProps, SkeletonTextProps, SkeletonAvatarProps, SkeletonCardProps, SkeletonTableProps } from './Skeleton.types';
+/**
+ * Primitive skeleton block. Use this as the building brick for any custom
+ * layout skeleton you need.
+ */
+export declare const Skeleton: React.ForwardRefExoticComponent<SkeletonProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Multi-line text placeholder. The last line is intentionally shorter to
+ * mimic natural prose paragraph endings.
+ */
+export declare const SkeletonText: React.ForwardRefExoticComponent<SkeletonTextProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Circular avatar placeholder. Pairs naturally with SkeletonText to build
+ * user-card or comment-thread loaders.
+ */
+export declare const SkeletonAvatar: React.ForwardRefExoticComponent<SkeletonAvatarProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Pre-composed card skeleton mirroring the Card component structure:
+ * optional hero image → title → description lines → action bar.
+ */
+export declare const SkeletonCard: React.ForwardRefExoticComponent<SkeletonCardProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Full table placeholder matching the Table component's visual grid.
+ * Renders a configurable number of column headers and body rows.
+ */
+export declare const SkeletonTable: React.ForwardRefExoticComponent<SkeletonTableProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Skeleton/Skeleton.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Skeleton } from './Skeleton';
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+export declare const Default: Story;
+export declare const Variants: Story;
+export declare const Shapes: Story;
+export declare const TextBlock: Story;
+export declare const AvatarWithText: Story;
+export declare const CardSkeleton: Story;
+export declare const TableSkeleton: Story;
+export declare const DashboardPageSkeleton: Story;

package/dist/components/Skeleton/Skeleton.types.d.ts

@@ -0,0 +1,47 @@
+import type { HTMLAttributes } from 'react';
+export type SkeletonVariant = 'default' | 'wave' | 'pulse';
+export type SkeletonShape = 'rectangle' | 'circle' | 'rounded';
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /** Animation style of the skeleton. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+    /** Shape of the skeleton block. Defaults to 'rectangle'. */
+    shape?: SkeletonShape;
+    /** Explicit width (e.g. '100%', '200px'). Falls back to the element's natural width. */
+    width?: string | number;
+    /** Explicit height (e.g. '1rem', 48). Falls back to the element's natural height. */
+    height?: string | number;
+}
+export interface SkeletonTextProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of text lines to render. Defaults to 3. */
+    lines?: number;
+    /** Animation variant forwarded to each line. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+    /** When true the last line is shorter (≈ 60 %) to look like natural prose. Defaults to true. */
+    shortLast?: boolean;
+}
+export interface SkeletonAvatarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Diameter of the avatar circle in pixels. Defaults to 40. */
+    size?: number;
+    /** Animation variant. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+}
+export interface SkeletonCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Show a header image placeholder at the top of the card. Defaults to true. */
+    showImage?: boolean;
+    /** Height of the image placeholder in pixels. Defaults to 160. */
+    imageHeight?: number;
+    /** Number of text-line skeletons in the body. Defaults to 3. */
+    lines?: number;
+    /** Animation variant forwarded to all children. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+}
+export interface SkeletonTableProps extends HTMLAttributes<HTMLDivElement> {
+    /** Number of rows to render. Defaults to 5. */
+    rows?: number;
+    /** Number of columns to render. Defaults to 4. */
+    columns?: number;
+    /** Animation variant. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+    /** Show a header row above the body rows. Defaults to true. */
+    showHeader?: boolean;
+}

package/dist/components/Skeleton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Skeleton';
+export type * from './Skeleton.types';

package/dist/components/Stepper/Stepper.d.ts

@@ -0,0 +1,2 @@
+import type { StepperProps } from './Stepper.types';
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Stepper/Stepper.stories.d.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Stepper } from './Stepper';
+declare const meta: Meta<typeof Stepper>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** The default Stepper starting at step 2 (Profile). */
+export declare const Default: Story;
+/** All four visual variants. */
+export declare const Variants: Story;
+/** All three size tokens. */
+export declare const Sizes: Story;
+/** Vertical orientation, great for sidebars or wizards. */
+export declare const Vertical: Story;
+/** All four variants in vertical orientation. */
+export declare const VerticalVariants: Story;
+/** Steps with custom Heroicon icons instead of numbers. */
+export declare const WithIcons: Story;
+/** A step can be marked with an error status. */
+export declare const WithError: Story;
+/** When `clickable` is true, users can jump to any step. */
+export declare const Clickable: Story;
+/** Fully controlled stepper driven by external state with next/back navigation. */
+export declare const Controlled: Story;

package/dist/components/Stepper/Stepper.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Stepper/Stepper.types.d.ts

@@ -0,0 +1,47 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+/** Visual style of the stepper. */
+export type StepperVariant = 'default' | 'filled' | 'outlined' | 'minimal';
+/** Size token for the stepper. */
+export type StepperSize = 'sm' | 'md' | 'lg';
+/** Layout orientation. */
+export type StepperOrientation = 'horizontal' | 'vertical';
+/** State of an individual step. */
+export type StepStatus = 'completed' | 'active' | 'upcoming' | 'error';
+export interface StepItem {
+    /** Unique identifier for the step. */
+    id: string;
+    /** Primary label shown below / beside the step indicator. */
+    label: ReactNode;
+    /** Optional secondary description text. */
+    description?: ReactNode;
+    /** Optional custom icon to render inside the step indicator (overrides the step number). */
+    icon?: ReactNode;
+    /** Marks the step as disabled — cannot be clicked. */
+    disabled?: boolean;
+    /** Optional extra content/panel revealed when this step is active. */
+    content?: ReactNode;
+    /** Override status explicitly. When omitted, status is derived from `currentStep`. */
+    status?: StepStatus;
+}
+export interface StepperProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Ordered list of steps to render. */
+    steps: StepItem[];
+    /** Zero-based index of the currently active step. */
+    currentStep?: number;
+    /** Callback fired when the user clicks a step (passes zero-based index). */
+    onChange?: (index: number) => void;
+    /** Visual style. Defaults to `'default'`. */
+    variant?: StepperVariant;
+    /** Size. Defaults to `'md'`. */
+    size?: StepperSize;
+    /** Layout direction. Defaults to `'horizontal'`. */
+    orientation?: StepperOrientation;
+    /** Whether steps are clickable for navigation. Defaults to `false`. */
+    clickable?: boolean;
+    /** Show content panel of the active step below the stepper. Defaults to `true`. */
+    showContent?: boolean;
+    /** Extra class applied to the step connector line. */
+    connectorClassName?: string;
+    /** Extra class applied to each step wrapper. */
+    stepClassName?: string;
+}

package/dist/components/Stepper/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Stepper';
+export * from './Stepper.types';

package/dist/components/Table/Pagination.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { PaginationProps } from './Table.types';
+export declare function Pagination({ total, page, pageSize, totalPages: propTotalPages, hasNextPage: propHasNextPage, hasPrevPage: propHasPrevPage, onPageChange, onPageSizeChange, pageSizeOptions, showSizeChanger, className, }: PaginationProps): React.JSX.Element;

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { TableProps } from './Table.types';
+export declare function Table<T extends object>({ data, columns, rowKey, loading, emptyMessage, striped, bordered, hoverable, stickyHeader, size, sortState: externalSort, onSortChange, className, tableClassName, pagination, headerVariant, }: TableProps<T>): React.JSX.Element;

package/dist/components/Table/Table.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Table } from './Table';
+declare const meta: Meta<typeof Table>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Basic: Story;
+export declare const StripedBordered: Story;
+export declare const Loading: Story;
+export declare const Empty: Story;
+export declare const WithPagination: Story;
+export declare const Sortable: Story;
+export declare const Sizes: Story;
+export declare const PaginationStory: Story;

package/dist/components/Table/Table.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Table/Table.types.d.ts

@@ -0,0 +1,85 @@
+import type { ReactNode, CSSProperties } from 'react';
+export type TableAlign = 'left' | 'center' | 'right';
+export type TableSize = 'sm' | 'md' | 'lg';
+export interface TableColumn<T> {
+    /** Unique key identifying this column (also used as data accessor when render is omitted). */
+    key: string;
+    /** Header label shown in <th>. */
+    header: ReactNode;
+    /** Custom cell renderer. Receives the row object and its index. */
+    render?: (row: T, rowIndex: number) => ReactNode;
+    /** When true a sort toggle is shown in the header. */
+    sortable?: boolean;
+    /** Column width, e.g. '120px' or '10%'. */
+    width?: CSSProperties['width'];
+    /** Text alignment for both header and cells. Defaults to 'left'. */
+    align?: TableAlign;
+    /** Extra class applied to every <td> in this column. */
+    cellClassName?: string;
+    /** Extra class applied to the <th> of this column. */
+    headerClassName?: string;
+}
+export type SortDirection = 'asc' | 'desc';
+export interface SortState {
+    key: string;
+    direction: SortDirection;
+}
+export type TableHeaderVariant = 'light' | 'dark';
+export interface TableProps<T extends object> {
+    /** Array of data rows. */
+    data: T[];
+    /** Column definitions. */
+    columns: TableColumn<T>[];
+    /** Returns a unique key for each row (required for React reconciliation). */
+    rowKey: (row: T) => string | number;
+    /** Show a loading skeleton overlay. */
+    loading?: boolean;
+    /** Message (or element) shown when data is empty. */
+    emptyMessage?: ReactNode;
+    /** Alternate row background colours. */
+    striped?: boolean;
+    /** Render outer and inner borders. */
+    bordered?: boolean;
+    /** Highlight row on hover. */
+    hoverable?: boolean;
+    /** Makes the header stick to the top when scrolling. */
+    stickyHeader?: boolean;
+    /** Cell padding size. Defaults to 'md'. */
+    size?: TableSize;
+    /** External sort state (controlled). When omitted, sorting is internal. */
+    sortState?: SortState;
+    /** Called when the user clicks a sortable header. */
+    onSortChange?: (sort: SortState) => void;
+    /** Additional class for the outer wrapper. */
+    className?: string;
+    /** Additional class for the <table> element. */
+    tableClassName?: string;
+    /** Pagination configuration. If null or undefined, pagination is hidden. */
+    pagination?: PaginationProps | null;
+    /** Variant for the table header */
+    headerVariant?: TableHeaderVariant;
+}
+export interface PaginationProps {
+    /** Total number of items across all pages. */
+    total: number;
+    /** Current page index (1-based). */
+    page: number;
+    /** Number of rows per page. */
+    pageSize: number;
+    /** Total number of pages. */
+    totalPages?: number;
+    /** Whether there is a next page. */
+    hasNextPage?: boolean;
+    /** Whether there is a previous page. */
+    hasPrevPage?: boolean;
+    /** Called when the user navigates to a new page. */
+    onPageChange: (page: number) => void;
+    /** Called when the user picks a new page size. */
+    onPageSizeChange?: (size: number) => void;
+    /** Available page-size options. Defaults to [10, 20, 50]. */
+    pageSizeOptions?: number[];
+    /** Show the page-size selector. Defaults to true when onPageSizeChange is provided. */
+    showSizeChanger?: boolean;
+    /** Additional class for the pagination wrapper. */
+    className?: string;
+}

package/dist/components/Table/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Table';
+export * from './Pagination';
+export * from './Table.types';

package/dist/components/Tabs/Tabs.d.ts

@@ -0,0 +1,2 @@
+import type { TabsProps } from './Tabs.types';
+export declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Tabs/Tabs.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Tabs } from './Tabs';
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** The default Tabs component. */
+export declare const Default: Story;
+/** All five size variants stacked vertically. */
+export declare const Sizes: Story;
+/** All four visual variants. */
+export declare const Variants: Story;
+/** Tabs spanning the full width of their container. */
+export declare const FullWidth: Story;
+/** Individual tabs can be disabled. */
+export declare const DisabledTabs: Story;
+/** Controlled usage where the selection state is managed externally. */
+export declare const Controlled: Story;

package/dist/components/Tabs/Tabs.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Tabs/Tabs.types.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+export type TabsVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
+export type TabsSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface TabItem {
+    id: string;
+    label: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+}
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    items: TabItem[];
+    defaultSelectedId?: string;
+    selectedId?: string;
+    onChange?: (id: string) => void;
+    variant?: TabsVariant;
+    size?: TabsSize;
+    fullWidth?: boolean;
+    tabListClassName?: string;
+    tabClassName?: string;
+    tabPanelClassName?: string;
+}

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Tabs';
+export * from './Tabs.types';

package/dist/components/TextInput/TextInput.d.ts

@@ -0,0 +1,2 @@
+import type { TextInputProps } from './TextInput.types';
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;

package/dist/components/TextInput/TextInput.stories.d.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { TextInput } from './TextInput';
+declare const meta: Meta<typeof TextInput>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** The default input with a label, placeholder, and helper text. */
+export declare const Default: Story;
+/** All five size variants stacked vertically. */
+export declare const Sizes: Story;
+/** All four visual variants. */
+export declare const Variants: Story;
+/** All four validation states. */
+export declare const ValidationStates: Story;
+/** Inline left and right elements (SVG icons). */
+export declare const WithIcons: Story;
+/** External prefix and suffix addon elements. */
+export declare const WithPrefixSuffix: Story;
+/** Required fields show a red asterisk beside the label. */
+export declare const Required: Story;
+/** Disabled input — read-only and non-interactive. */
+export declare const Disabled: Story;
+/** Override styles via `inputClassName` and `wrapperClassName`. */
+export declare const CustomClassName: Story;
+/** Input without a label — uses `aria-label` on the `<input>` instead. */
+export declare const NoLabel: Story;

package/dist/components/TextInput/TextInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/TextInput/TextInput.types.d.ts

@@ -0,0 +1,29 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+export type TextInputVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
+export type TextInputSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type TextInputState = 'default' | 'error' | 'success' | 'warning';
+export interface TextInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'> {
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    errorMessage?: string;
+    successMessage?: string;
+    warningMessage?: string;
+    variant?: TextInputVariant;
+    size?: TextInputSize;
+    state?: TextInputState;
+    fullWidth?: boolean;
+    leftElement?: ReactNode;
+    rightElement?: ReactNode;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    wrapperClassName?: string;
+    inputGroupClassName?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    helperClassName?: string;
+    clearable?: boolean;
+    isLoading?: boolean;
+    multiline?: boolean;
+    rows?: number;
+}

package/dist/components/TextInput/index.d.ts

@@ -0,0 +1,2 @@
+export { TextInput } from './TextInput';
+export type { TextInputProps, TextInputVariant, TextInputSize, TextInputState, } from './TextInput.types';

package/dist/components/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,8 @@
+import type { ThemeProviderProps, ThemeProviderState } from './ThemeProvider.types';
+interface ThemeProviderComponent {
+    (props: ThemeProviderProps): React.JSX.Element;
+    displayName?: string;
+}
+export declare const ThemeProvider: ThemeProviderComponent;
+export declare const useTheme: () => ThemeProviderState;
+export {};

package/dist/components/ThemeProvider/ThemeProvider.stories.d.ts

@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ThemeProvider } from './ThemeProvider';
+/**
+ * The ThemeProvider is the heart of the design system. It manages theme state,
+ * synchronizes with user preferences, and injects a comprehensive set of
+ * CSS variables into the application root.
+ */
+declare const meta: Meta<typeof ThemeProvider>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/** The default Storybook demonstration using the library's premium tokens. */
+export declare const Default: Story;
+/** Demonstration of a high-contrast custom brand configuration. */
+export declare const CustomBranding: Story;
+/** A comprehensive gallery for auditing all theme design tokens. */
+export declare const TokenGalleryStory: Story;

package/dist/components/ThemeProvider/ThemeProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ThemeProvider/ThemeProvider.types.d.ts

@@ -0,0 +1,112 @@
+import type { ReactNode } from 'react';
+/** Theme modes supported by the library. */
+export type ThemeMode = 'light' | 'dark' | 'system';
+/** A record of semantic design tokens for a single theme (light or dark). */
+export interface SemanticColors {
+    /** Main primary color used for actions and highlights. */
+    primary?: string;
+    /** Hover state for primary actions. */
+    primaryHover?: string;
+    /** Active/pressed state for primary actions. */
+    primaryActive?: string;
+    /** Secondary actions or secondary emphasis. */
+    secondary?: string;
+    /** Hover state for secondary actions. */
+    secondaryHover?: string;
+    /** A vibrant accent color for specific focus or brand elements. */
+    accent?: string;
+    /** Main application background. */
+    background?: string;
+    /** Primary surface color for cards, modals, and navigation. */
+    surface?: string;
+    /** A darker/lighter alternate surface for contrast. */
+    surfaceSecondary?: string;
+    /** Default border color for elements like inputs or cards. */
+    border?: string;
+    /** A more subtle border for secondary grouping. */
+    borderLight?: string;
+    /** Explicit divider color between content blocks. */
+    divider?: string;
+    /** Standard high-contrast text for body and headings. */
+    text?: string;
+    /** Slightly lower contrast text for secondary descriptions. */
+    textSecondary?: string;
+    /** Muted text for captions, metadata, or disabled labels. */
+    textMuted?: string;
+    /** High-contrast text to be used on dark背景 (e.g. on primary buttons). */
+    textInverse?: string;
+    /** Color representing success (often green). */
+    success?: string;
+    /** Color representing warnings (often amber). */
+    warning?: string;
+    /** Color representing errors or destructive actions (often red). */
+    error?: string;
+    /** Color representing informational messages (often blue). */
+    info?: string;
+    /** Background color for item hover states (e.g. list items). */
+    hover?: string;
+    /** Background color for item active/selected states. */
+    active?: string;
+    /** Ring or outline color for focus states. */
+    focus?: string;
+    /** Color for disabled backgrounds or indicators. */
+    disabled?: string;
+    /** A subtle, tight shadow for small components. */
+    shadowSm?: string;
+    /** The standard shadow for cards and modals. */
+    shadowMd?: string;
+    /** A large, diffuse shadow for overlays. */
+    shadowLg?: string;
+    /** For quick interactions like hover entry. */
+    transitionFast?: string;
+    /** The default transition for most entry/exit animations. */
+    transitionNormal?: string;
+    /** For large surface changes or fade-ins. */
+    transitionSlow?: string;
+    /** Layer for dropdowns and popovers. */
+    zIndexDropdown?: string | number;
+    /** Layer for sticky headers or nav. */
+    zIndexSticky?: string | number;
+    /** Layer for modals and drawers. */
+    zIndexModal?: string | number;
+    /** Highest layer for tooltips and alerts. */
+    zIndexTooltip?: string | number;
+    primaryForeground?: string;
+    secondaryForeground?: string;
+    muted?: string;
+    mutedForeground?: string;
+    accentForeground?: string;
+    destructive?: string;
+    destructiveForeground?: string;
+    card?: string;
+    cardForeground?: string;
+    input?: string;
+    ring?: string;
+}
+/** Theme configuration that allows overriding light and dark properties. */
+export interface ThemeConfig {
+    /** Light theme overrides. */
+    light?: SemanticColors;
+    /** Dark theme overrides. */
+    dark?: SemanticColors;
+}
+/** Props for the ThemeProvider component. */
+export interface ThemeProviderProps {
+    /** The children to render within the provider. */
+    children: ReactNode;
+    /** The default theme mode ('light', 'dark', or 'system'). Default is 'system'. */
+    defaultTheme?: ThemeMode;
+    /** The key used to store the theme mode in localStorage. Default is 'ui-theme'. */
+    storageKey?: string;
+    /** Optional custom theme configuration to override default tokens. */
+    themeConfig?: ThemeConfig;
+}
+/** Context state provided by the ThemeProvider. */
+export interface ThemeProviderState {
+    /** The currently active theme mode. */
+    theme: ThemeMode;
+    /** Function to update the theme mode. */
+    setTheme: (theme: ThemeMode) => void;
+    /** The currently active theme configuration (including overrides). */
+    themeConfig?: ThemeConfig;
+}

package/dist/components/ThemeProvider/index.d.ts

@@ -0,0 +1,2 @@
+export { ThemeProvider, useTheme } from './ThemeProvider';
+export type { ThemeProviderProps, ThemeProviderState, ThemeMode, ThemeConfig, SemanticColors, } from './ThemeProvider.types';