@bricks-toolkit/toolkit 0.1.12 → 0.1.14

package/dist/search-input/index.d.ts

@@ -0,0 +1,22 @@
+import { T as TextInputProps } from '../TextInput.types-DRI8HQza.js';
+import 'react';
+
+interface SearchInputProps extends TextInputProps {
+    /**
+     * The delay in milliseconds before the onDebouncedChange callback is called.
+     * @default 300
+     */
+    debounce?: number;
+    /**
+     * Callback function called after the debounce delay with the current input value.
+     */
+    onDebouncedChange?: (value: string) => void;
+}
+
+/**
+ * SearchInput component - A debounced input field for search functionality.
+ * Built on top of TextInput, it includes a search icon by default and handles debouncing.
+ */
+declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
+
+export { SearchInput, type SearchInputProps };

package/dist/select/index.d.mts

@@ -0,0 +1,36 @@
+import { SelectHTMLAttributes, ReactNode } from 'react';
+
+type SelectVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
+type SelectSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type SelectState = 'default' | 'error' | 'success' | 'warning';
+interface SelectOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+}
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    errorMessage?: string;
+    successMessage?: string;
+    warningMessage?: string;
+    variant?: SelectVariant;
+    size?: SelectSize;
+    state?: SelectState;
+    fullWidth?: boolean;
+    leftElement?: ReactNode;
+    rightElement?: ReactNode;
+    wrapperClassName?: string;
+    inputGroupClassName?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    helperClassName?: string;
+    isLoading?: boolean;
+    options?: SelectOption[];
+    placeholder?: string;
+}
+
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+
+export { Select, type SelectOption, type SelectProps, type SelectSize, type SelectState, type SelectVariant };

package/dist/select/index.d.ts

@@ -0,0 +1,36 @@
+import { SelectHTMLAttributes, ReactNode } from 'react';
+
+type SelectVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
+type SelectSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type SelectState = 'default' | 'error' | 'success' | 'warning';
+interface SelectOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+}
+interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    label?: string;
+    required?: boolean;
+    helperText?: string;
+    errorMessage?: string;
+    successMessage?: string;
+    warningMessage?: string;
+    variant?: SelectVariant;
+    size?: SelectSize;
+    state?: SelectState;
+    fullWidth?: boolean;
+    leftElement?: ReactNode;
+    rightElement?: ReactNode;
+    wrapperClassName?: string;
+    inputGroupClassName?: string;
+    inputClassName?: string;
+    labelClassName?: string;
+    helperClassName?: string;
+    isLoading?: boolean;
+    options?: SelectOption[];
+    placeholder?: string;
+}
+
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+
+export { Select, type SelectOption, type SelectProps, type SelectSize, type SelectState, type SelectVariant };

package/dist/sidebar/index.d.mts

@@ -0,0 +1,96 @@
+import { ReactNode, ElementType, CSSProperties } from 'react';
+
+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;
+}
+interface SidebarGroup {
+    id: string;
+    label?: string;
+    items: SidebarItem[];
+    /** Whether the group should be hidden */
+    hidden?: boolean;
+}
+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;
+}
+interface SidebarStyles {
+    root?: CSSProperties;
+    header?: CSSProperties;
+    content?: CSSProperties;
+    footer?: CSSProperties;
+    group?: CSSProperties;
+    groupLabel?: CSSProperties;
+    item?: CSSProperties;
+    itemIcon?: CSSProperties;
+    itemLabel?: CSSProperties;
+    toggleButton?: CSSProperties;
+}
+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;
+}
+
+interface SidebarComponent {
+    (props: SidebarProps): React.JSX.Element;
+    displayName?: string;
+}
+declare const Sidebar: SidebarComponent;
+
+export { Sidebar, type SidebarGroup, type SidebarItem, type SidebarProps };

package/dist/sidebar/index.d.ts

@@ -0,0 +1,96 @@
+import { ReactNode, ElementType, CSSProperties } from 'react';
+
+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;
+}
+interface SidebarGroup {
+    id: string;
+    label?: string;
+    items: SidebarItem[];
+    /** Whether the group should be hidden */
+    hidden?: boolean;
+}
+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;
+}
+interface SidebarStyles {
+    root?: CSSProperties;
+    header?: CSSProperties;
+    content?: CSSProperties;
+    footer?: CSSProperties;
+    group?: CSSProperties;
+    groupLabel?: CSSProperties;
+    item?: CSSProperties;
+    itemIcon?: CSSProperties;
+    itemLabel?: CSSProperties;
+    toggleButton?: CSSProperties;
+}
+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;
+}
+
+interface SidebarComponent {
+    (props: SidebarProps): React.JSX.Element;
+    displayName?: string;
+}
+declare const Sidebar: SidebarComponent;
+
+export { Sidebar, type SidebarGroup, type SidebarItem, type SidebarProps };

package/dist/skeleton/index.d.mts

@@ -0,0 +1,76 @@
+import { HTMLAttributes } from 'react';
+
+type SkeletonVariant = 'default' | 'wave' | 'pulse';
+type SkeletonShape = 'rectangle' | 'circle' | 'rounded';
+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;
+}
+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;
+}
+interface SkeletonAvatarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Diameter of the avatar circle in pixels. Defaults to 40. */
+    size?: number;
+    /** Animation variant. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+}
+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;
+}
+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;
+}
+
+/**
+ * Primitive skeleton block. Use this as the building brick for any custom
+ * layout skeleton you need.
+ */
+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.
+ */
+declare const SkeletonText: React.ForwardRefExoticComponent<SkeletonTextProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Circular avatar placeholder. Pairs naturally with SkeletonText to build
+ * user-card or comment-thread loaders.
+ */
+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.
+ */
+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.
+ */
+declare const SkeletonTable: React.ForwardRefExoticComponent<SkeletonTableProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Skeleton, SkeletonAvatar, type SkeletonAvatarProps, SkeletonCard, type SkeletonCardProps, type SkeletonProps, type SkeletonShape, SkeletonTable, type SkeletonTableProps, SkeletonText, type SkeletonTextProps, type SkeletonVariant };

package/dist/skeleton/index.d.ts

@@ -0,0 +1,76 @@
+import { HTMLAttributes } from 'react';
+
+type SkeletonVariant = 'default' | 'wave' | 'pulse';
+type SkeletonShape = 'rectangle' | 'circle' | 'rounded';
+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;
+}
+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;
+}
+interface SkeletonAvatarProps extends HTMLAttributes<HTMLDivElement> {
+    /** Diameter of the avatar circle in pixels. Defaults to 40. */
+    size?: number;
+    /** Animation variant. Defaults to 'wave'. */
+    variant?: SkeletonVariant;
+}
+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;
+}
+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;
+}
+
+/**
+ * Primitive skeleton block. Use this as the building brick for any custom
+ * layout skeleton you need.
+ */
+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.
+ */
+declare const SkeletonText: React.ForwardRefExoticComponent<SkeletonTextProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Circular avatar placeholder. Pairs naturally with SkeletonText to build
+ * user-card or comment-thread loaders.
+ */
+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.
+ */
+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.
+ */
+declare const SkeletonTable: React.ForwardRefExoticComponent<SkeletonTableProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Skeleton, SkeletonAvatar, type SkeletonAvatarProps, SkeletonCard, type SkeletonCardProps, type SkeletonProps, type SkeletonShape, SkeletonTable, type SkeletonTableProps, SkeletonText, type SkeletonTextProps, type SkeletonVariant };

package/dist/styles.d.mts

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

package/dist/styles.d.ts

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

package/dist/table/index.d.mts

@@ -0,0 +1,92 @@
+import React__default, { ReactNode, CSSProperties } from 'react';
+
+type TableAlign = 'left' | 'center' | 'right';
+type TableSize = 'sm' | 'md' | 'lg';
+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;
+}
+type SortDirection = 'asc' | 'desc';
+interface SortState {
+    key: string;
+    direction: SortDirection;
+}
+type TableHeaderVariant = 'light' | 'dark';
+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;
+}
+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;
+}
+
+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__default.JSX.Element;
+
+declare function Pagination({ total, page, pageSize, totalPages: propTotalPages, hasNextPage: propHasNextPage, hasPrevPage: propHasPrevPage, onPageChange, onPageSizeChange, pageSizeOptions, showSizeChanger, className, }: PaginationProps): React__default.JSX.Element;
+
+export { Pagination, type PaginationProps, type SortDirection, type SortState, Table, type TableAlign, type TableColumn, type TableHeaderVariant, type TableProps, type TableSize };

package/dist/table/index.d.ts

@@ -0,0 +1,92 @@
+import React__default, { ReactNode, CSSProperties } from 'react';
+
+type TableAlign = 'left' | 'center' | 'right';
+type TableSize = 'sm' | 'md' | 'lg';
+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;
+}
+type SortDirection = 'asc' | 'desc';
+interface SortState {
+    key: string;
+    direction: SortDirection;
+}
+type TableHeaderVariant = 'light' | 'dark';
+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;
+}
+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;
+}
+
+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__default.JSX.Element;
+
+declare function Pagination({ total, page, pageSize, totalPages: propTotalPages, hasNextPage: propHasNextPage, hasPrevPage: propHasPrevPage, onPageChange, onPageSizeChange, pageSizeOptions, showSizeChanger, className, }: PaginationProps): React__default.JSX.Element;
+
+export { Pagination, type PaginationProps, type SortDirection, type SortState, Table, type TableAlign, type TableColumn, type TableHeaderVariant, type TableProps, type TableSize };

package/dist/tabs/index.d.mts

@@ -0,0 +1,26 @@
+import { ReactNode, HTMLAttributes } from 'react';
+
+type TabsVariant = 'default' | 'filled' | 'flushed' | 'unstyled';
+type TabsSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+interface TabItem {
+    id: string;
+    label: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+}
+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;
+}
+
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+
+export { type TabItem, Tabs, type TabsProps, type TabsSize, type TabsVariant };