flikkui 0.1.0-beta.2 → 0.1.0-beta.3

package/dist/components/data-display/Table/Table.types.d.ts

@@ -1,44 +1,79 @@
 import { ReactNode } from 'react';
+/**
+ * Defines bulk actions available when rows are selected
+ */
 export interface BulkAction {
+    /** Unique identifier for the action */
     id: string;
+    /** Display label for the action button */
     label: string;
+    /** Optional icon component to display in the action button */
     icon?: React.ComponentType<{
         className?: string;
     }>;
+    /** Visual style variant for the action button */
     variant?: 'primary' | 'secondary' | 'danger';
+    /** Callback function when action is triggered with selected row IDs */
     onClick: (selectedRows: string[]) => void;
 }
-export type TableSize = 'sm' | 'md' | 'lg';
+/** Table visual variants for different styling approaches */
 export type TableVariant = 'default' | 'striped' | 'bordered' | 'compact';
+/** Text alignment options for table cells and headers */
 export type TableAlignment = 'left' | 'center' | 'right';
+/** Selection control types for row selection */
 export type SelectionType = 'checkbox' | 'radio';
+/**
+ * Column definition for table data display and behavior
+ */
 export interface Column<T = any> {
+    /** Unique identifier for the column */
     id: string;
+    /** Header content - can be string or React element */
     header: string | ReactNode;
+    /** Property key or function to extract cell data from row object */
     accessor: keyof T | ((row: T) => any);
+    /** Optional custom renderer for cell content */
     cell?: (row: T) => ReactNode;
+    /** Enable sorting for this column */
     sortable?: boolean;
+    /** Enable filtering for this column */
     filterable?: boolean;
+    /** Truncate long content with ellipsis */
     ellipsis?: boolean;
+    /** Show tooltip on hover - boolean or function returning tooltip text */
     tooltip?: boolean | ((row: T) => string);
+    /** Fixed width for the column */
     width?: string | number;
+    /** Text alignment for column content */
     align?: TableAlignment;
+    /** Whether column is hidden by default */
     hidden?: boolean;
+    /** Whether column is locked and cannot be hidden or reordered */
     locked?: boolean;
 }
+/**
+ * Configuration for column sorting state
+ */
 export interface SortConfig {
+    /** ID of the column being sorted */
     columnId: string;
+    /** Sort direction - ascending or descending */
     direction: 'asc' | 'desc';
+    /** Priority for multi-column sorting (lower numbers = higher priority) */
     priority: number;
 }
+/**
+ * Configuration for column filtering state
+ */
 export interface FilterConfig {
+    /** ID of the column being filtered */
     columnId: string;
+    /** Filter value - type depends on column data type */
     value: any;
 }
 export interface TableThemeOverrides {
     baseStyle?: string;
     variants?: Partial<Record<TableVariant, string>>;
-    sizes?: Partial<Record<TableSize, string>>;
     headerStyle?: string;
     cellStyle?: string;
     rowStyle?: string;
@@ -49,19 +84,11 @@ export interface TableThemeOverrides {
     frozenHeaderStyle?: string;
     bodyStyle?: string;
     headerContainerStyle?: string;
-    paginationContainer?: string;
-    paginationLeftSection?: string;
-    paginationRightSection?: string;
-    paginationLabel?: string;
-    paginationSelect?: string;
-    paginationButton?: string;
-    paginationInfo?: string;
     columnManagerButton?: string;
     columnManagerContainer?: string;
 }
 export interface TableContextType {
     theme: TableThemeOverrides;
-    size: TableSize;
     variant: TableVariant;
     freezeHeader?: boolean;
     freezeFirstColumn?: boolean;
@@ -80,8 +107,15 @@ export interface TableContextType {
     selectedRows?: string[];
     onSelectionChange?: (selectedRows: string[]) => void;
 }
+/**
+ * Main Table component props supporting both data-driven and declarative APIs
+ *
+ * @template T The type of data objects in each table row
+ */
 export interface TableProps<T = any> {
+    /** Array of data objects to display - required for data-driven API */
     data?: T[];
+    /** Column definitions for data display and behavior - required for data-driven API */
     columns?: Column<T>[];
     /**
      * Property name or function to extract stable row identifiers for React keys and selection.
@@ -95,18 +129,29 @@ export interface TableProps<T = any> {
      * rowKey={(row, index) => `${row.category}-${row.id}`}
      */
     rowKey?: keyof T | ((row: T, index: number) => string | number);
-    size?: TableSize;
+    /** Visual variant for different table styles */
     variant?: TableVariant;
+    /** Theme overrides for custom styling */
     theme?: TableThemeOverrides;
+    /** Additional CSS classes for customization */
     className?: string;
+    /** Keep header visible when scrolling vertically */
     freezeHeader?: boolean;
+    /** Keep first column visible when scrolling horizontally */
     freezeFirstColumn?: boolean;
+    /** Keep last column visible when scrolling horizontally */
     freezeLastColumn?: boolean;
+    /** Enable sorting functionality for sortable columns */
     sortable?: boolean;
+    /** Current sort configuration state */
     sortConfig?: SortConfig[];
+    /** Callback when sort configuration changes */
     onSortChange?: (sortConfig: SortConfig[]) => void;
+    /** Enable filtering functionality for filterable columns */
     filterable?: boolean;
+    /** Current filter configuration state */
     filterConfig?: FilterConfig[];
+    /** Callback when filter configuration changes */
     onFilterChange?: (filterConfig: FilterConfig[]) => void;
     expandable?: boolean;
     expandedRowRender?: (row: T) => ReactNode;
@@ -125,8 +170,6 @@ export interface TableProps<T = any> {
         pageSize: number;
         currentPage: number;
         totalItems: number;
-        onPageChange: (page: number) => void;
-        onPageSizeChange: (pageSize: number) => void;
     };
     children?: ReactNode;
 }

package/dist/components/data-display/Table/components/TableActionsMenu.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableActionsMenuProps } from './TableActions.types';
+import { TableActionsMenuProps } from './TableActions/TableActions.types';
 /**
  * TableActionsMenu component for displaying actions in an overflow menu
  */

package/dist/components/data-display/Table/components/TableColumnManager/TableColumnManager.theme.d.ts

@@ -1,4 +1,20 @@
 export interface TableColumnManagerThemeOverrides {
     container?: string;
+    content?: string;
+    header?: string;
+    title?: string;
+    description?: string;
+    actions?: string;
+    quickActionButton?: string;
+    quickActionButtonDisabled?: string;
+    columnList?: string;
+    columnItem?: string;
+    columnItemVisible?: string;
+    checkbox?: string;
+    columnLabel?: string;
+    columnIcon?: string;
+    footer?: string;
+    summary?: string;
+    closeButton?: string;
 }
 export declare const tableColumnManagerTheme: Required<TableColumnManagerThemeOverrides>;

package/dist/components/data-display/Table/components/TablePagination/TablePagination.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import { TablePaginationProps } from "./TablePagination.types";
+/**
+ * TablePagination provides a standardized pagination interface for tables
+ * Combines the core Pagination component with page size selection controls
+ *
+ * @example
+ * <Table.Pagination
+ *   currentPage={currentPage}
+ *   totalItems={data.length}
+ *   pageSize={pageSize}
+ *   onPageChange={setCurrentPage}
+ *   onPageSizeChange={setPageSize}
+ *   pageSizeOptions={[10, 25, 50, 100]}
+ * />
+ */
+export declare const TablePagination: React.FC<TablePaginationProps>;

package/dist/components/data-display/Table/components/TablePagination/TablePagination.types.d.ts

@@ -0,0 +1,21 @@
+/**
+ * TablePagination component props for seamless integration with Table component
+ */
+export interface TablePaginationProps {
+    /** Current active page number (1-based) */
+    currentPage: number;
+    /** Total number of items across all pages */
+    totalItems: number;
+    /** Number of items per page */
+    pageSize: number;
+    /** Available page size options */
+    pageSizeOptions?: number[];
+    /** Callback when page changes */
+    onPageChange: (page: number) => void;
+    /** Callback when page size changes */
+    onPageSizeChange: (pageSize: number) => void;
+    /** Whether to show the page size selector */
+    showPageSizeSelector?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}

package/dist/components/data-display/Table/components/TablePagination/index.d.ts

@@ -0,0 +1,2 @@
+export { TablePagination } from "./TablePagination";
+export type { TablePaginationProps } from "./TablePagination.types";

package/dist/components/data-display/Table/index.d.ts

@@ -1,7 +1,9 @@
-import { TableProps, Column, SortConfig, FilterConfig, TableThemeOverrides, TableSize, TableVariant, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction } from './Table.types';
+import { TableProps, Column, SortConfig, FilterConfig, TableThemeOverrides, TableVariant, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction } from './Table.types';
 import { TableActions } from './components/TableActions/TableActions';
 import { TableActionsMenu } from './components/TableActions/TableActionsMenu';
+import { TablePagination } from './components/TablePagination';
 import { ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps } from './components/TableActions/TableActions.types';
+import { TablePaginationProps } from './components/TablePagination/TablePagination.types';
 interface TableCompound {
     <T extends Record<string, any>>(props: TableProps<T>): React.ReactElement;
     Header: React.FC<TableHeaderProps>;
@@ -10,9 +12,10 @@ interface TableCompound {
     Cell: React.FC<TableCellProps>;
     HeaderCell: React.FC<TableHeaderCellProps>;
     Actions: typeof TableActions;
+    Pagination: React.FC<TablePaginationProps>;
 }
 declare const Table: TableCompound;
 export { Table };
 export default Table;
-export type { TableProps, Column, SortConfig, FilterConfig, TableThemeOverrides, TableSize, TableVariant, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction, ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps, };
-export { TableActions, TableActionsMenu };
+export type { TableProps, Column, SortConfig, FilterConfig, TableThemeOverrides, TableVariant, TableAlignment, SelectionType, TableHeaderProps, TableBodyProps, TableRowProps, TableCellProps, TableHeaderCellProps, BulkAction, ActionItem, ActionVariant, ActionPriority, TableActionsProps, TableActionsMenuProps, TablePaginationProps, };
+export { TableActions, TableActionsMenu, TablePagination };

package/dist/components/feedback/Alert/Alert.types.d.ts

@@ -4,16 +4,20 @@ export interface AlertTheme {
     baseStyle: string;
     variants: Record<AlertVariant, string>;
     iconStyle: string;
+    contentStyle: string;
     titleStyle: string;
     descriptionStyle: string;
+    childrenStyle: string;
     closeButtonStyle: string;
 }
 export interface AlertThemeOverrides {
     baseStyle?: string;
     variants?: Partial<Record<AlertVariant, string>>;
     iconStyle?: string;
+    contentStyle?: string;
     titleStyle?: string;
     descriptionStyle?: string;
+    childrenStyle?: string;
     closeButtonStyle?: string;
 }
 export interface AlertProps extends HTMLAttributes<HTMLDivElement> {

package/dist/components/feedback/ChatMessage/ChatMessage.types.d.ts

@@ -44,23 +44,29 @@ export interface ChatMessageProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 export interface ChatMessageTheme {
     baseStyle: string;
+    avatarContainerStyle: string;
+    messageContainerStyle: string;
     bubbleBaseStyle: string;
-    variants: {
-        [K in ChatMessageVariant]: {
-            container: string;
-            bubble: string;
-            timestamp: string;
-        };
-    };
+    messageTextStyle: string;
+    timeStyle: string;
+    senderContainerStyle: string;
+    senderBubbleStyle: string;
+    senderTimestampStyle: string;
+    receiverContainerStyle: string;
+    receiverBubbleStyle: string;
+    receiverTimestampStyle: string;
 }
 export interface ChatMessageThemeOverrides {
     baseStyle?: string;
+    avatarContainerStyle?: string;
+    messageContainerStyle?: string;
     bubbleBaseStyle?: string;
-    variants?: Partial<{
-        [K in ChatMessageVariant]: Partial<{
-            container: string;
-            bubble: string;
-            timestamp: string;
-        }>;
-    }>;
+    messageTextStyle?: string;
+    timeStyle?: string;
+    senderContainerStyle?: string;
+    senderBubbleStyle?: string;
+    senderTimestampStyle?: string;
+    receiverContainerStyle?: string;
+    receiverBubbleStyle?: string;
+    receiverTimestampStyle?: string;
 }

package/dist/components/feedback/Empty/Empty.theme.d.ts

@@ -1,22 +1,12 @@
-import { EmptyVariant } from "./Empty.types";
 /**
- * Internal theme structure for the Empty component
+ * Simplified theme structure for the Empty component - only essential customizable styles
  */
-interface EmptyTheme {
+export interface EmptyTheme {
     baseStyle: string;
-    variants: Record<EmptyVariant, string>;
-    elements: {
-        container: string;
-        imageContainer: string;
-        image: string;
-        iconContainer: string;
-        title: string;
-        description: string;
-        actionContainer: string;
-    };
+    titleStyle: string;
+    descriptionStyle: string;
 }
 /**
  * Default theme for the Empty component
  */
 export declare const emptyTheme: EmptyTheme;
-export {};

package/dist/components/feedback/Empty/Empty.types.d.ts

@@ -3,17 +3,21 @@ import React from "react";
  * Empty component props for displaying empty states and placeholders
  */
 export interface EmptyProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
-    /** The visual style variant of the empty state */
-    variant?: EmptyVariant;
     /** Primary title/heading text */
     title?: React.ReactNode;
     /** Descriptive text explaining the empty state */
     description?: React.ReactNode;
-    /** Optional image source for illustration */
+    /**
+     * Optional image source for illustration
+     * Note: If both image and icon are provided, image takes precedence
+     */
     image?: string;
     /** Alt text for the image (required if image is provided) */
     imageAlt?: string;
-    /** Optional icon component (used when no image is provided) */
+    /**
+     * Optional icon component (displayed only when no image is provided)
+     * Note: If both image and icon are provided, image takes precedence
+     */
     icon?: React.ReactNode;
     /** Optional action element (button, link, etc.) */
     action?: React.ReactNode;
@@ -22,19 +26,3 @@ export interface EmptyProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     /** Children content (overrides all other content when provided) */
     children?: React.ReactNode;
 }
-/** Visual variants for different empty state contexts */
-export type EmptyVariant = "default" | "error" | "loading" | "search" | "create";
-/** Theme configuration overrides for Empty component */
-export interface EmptyThemeOverrides {
-    baseStyle?: string;
-    variants?: Partial<Record<EmptyVariant, string>>;
-    elements?: {
-        container?: string;
-        imageContainer?: string;
-        image?: string;
-        iconContainer?: string;
-        title?: string;
-        description?: string;
-        actionContainer?: string;
-    };
-}

package/dist/components/feedback/Empty/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from "./Empty";
-export type { EmptyProps, EmptyVariant, EmptyThemeOverrides } from "./Empty.types";
-export { emptyTheme } from "./Empty.theme";
+export type { EmptyProps } from "./Empty.types";
+export { emptyTheme, type EmptyTheme } from "./Empty.theme";

package/dist/components/feedback/Notification/Notification.theme.d.ts

@@ -1,2 +1,17 @@
-import { NotificationTheme } from './Notification.types';
+import { NotificationVariant } from './Notification.types';
+/**
+ * Comprehensive variant theme system for the Notification component
+ */
+export interface NotificationVariantTheme {
+    containerStyle: string;
+    iconColor: string;
+    titleColor: string;
+    defaultIcon: React.ComponentType<any>;
+}
+export interface NotificationTheme {
+    baseStyle: string;
+    titleStyle: string;
+    descriptionStyle: string;
+    variants: Record<NotificationVariant, NotificationVariantTheme>;
+}
 export declare const notificationTheme: NotificationTheme;

package/dist/components/feedback/Notification/Notification.types.d.ts

@@ -1,32 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export type NotificationVariant = 'info' | 'success' | 'warning' | 'error';
-export interface NotificationAction {
-    label: string;
-    onClick: () => void;
-    variant?: 'primary' | 'secondary';
-}
-export interface NotificationTheme {
-    baseStyle: string;
-    variants: Record<NotificationVariant, string>;
-    avatarStyle: string;
-    iconStyle: string;
-    titleStyle: string;
-    descriptionStyle: string;
-    actionsStyle: string;
-    actionButtonStyle: string;
-    closeButtonStyle: string;
-}
-export interface NotificationThemeOverrides {
-    baseStyle?: string;
-    variants?: Partial<Record<NotificationVariant, string>>;
-    avatarStyle?: string;
-    iconStyle?: string;
-    titleStyle?: string;
-    descriptionStyle?: string;
-    actionsStyle?: string;
-    actionButtonStyle?: string;
-    closeButtonStyle?: string;
-}
+export type NotificationVariant = 'default' | 'info' | 'success' | 'warning' | 'error';
 export interface NotificationProps extends HTMLAttributes<HTMLDivElement> {
     /** The visual style variant of the notification */
     variant?: NotificationVariant;
@@ -34,22 +7,27 @@ export interface NotificationProps extends HTMLAttributes<HTMLDivElement> {
     title: string;
     /** Additional description text */
     description?: string;
-    /** Avatar or icon to display */
+    /** Avatar to display (takes precedence over icons) */
     avatar?: ReactNode;
-    /** Custom icon for the notification */
-    icon?: ReactNode;
-    /** Whether to show the default icon for the variant */
-    showIcon?: boolean;
-    /** Action buttons for the notification */
-    actions?: NotificationAction[];
-    /** Whether the notification can be dismissed */
-    dismissible?: boolean;
-    /** Callback when the notification is dismissed */
+    /**
+     * Custom icon for the notification
+     * - Provide custom icon: overrides the default variant icon
+     * - Set to null: hides icon completely
+     * - Leave undefined: shows default variant icon
+     */
+    icon?: ReactNode | null;
+    /**
+     * Action buttons as ReactNode - use Button components directly
+     * Example: actions={<><Button>Cancel</Button><Button variant="primary">Save</Button></>}
+     */
+    actions?: ReactNode;
+    /**
+     * Callback when the notification is dismissed
+     * Note: Providing this callback automatically makes the notification dismissible
+     */
     onDismiss?: () => void;
     /** Custom class name */
     className?: string;
-    /** Theme overrides */
-    theme?: NotificationThemeOverrides;
     /** Children content */
     children?: ReactNode;
 }

package/dist/components/feedback/Notification/index.d.ts

@@ -1,3 +1,3 @@
 export { Notification } from './Notification';
-export type { NotificationProps, NotificationTheme, NotificationThemeOverrides, NotificationAction } from './Notification.types';
-export { notificationTheme } from './Notification.theme';
+export type { NotificationProps, NotificationVariant } from './Notification.types';
+export { notificationTheme, type NotificationTheme } from './Notification.theme';

package/dist/components/feedback/Toast/Toast.animations.d.ts

@@ -0,0 +1,31 @@
+export declare const toastAnimations: {
+    initial: {
+        opacity: number;
+        y: number;
+        scale: number;
+    };
+    exit: {
+        opacity: number;
+        scale: number;
+        transition: {
+            duration: number;
+        };
+    };
+    transition: {
+        type: "spring";
+        stiffness: number;
+        damping: number;
+        mass: number;
+    };
+};
+export declare const getToastStackingAnimation: (index: number, totalToasts: number, isExpanded: boolean) => {
+    y?: undefined;
+    scale?: undefined;
+    zIndex?: undefined;
+    opacity?: undefined;
+} | {
+    y: number;
+    scale: number;
+    zIndex: number;
+    opacity: number;
+};

package/dist/components/feedback/Toast/Toast.types.d.ts

@@ -41,7 +41,7 @@ export interface ToastProps extends HTMLAttributes<HTMLDivElement> {
     toast: ToastData;
     /** Custom class name */
     className?: string;
-    /** Theme overrides */
+    /** Theme overrides (deprecated - use className for customization) */
     theme?: ToastThemeOverrides;
     /** Callback when toast is dismissed */
     onDismiss?: (id: string) => void;

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

@@ -3,9 +3,9 @@ export type { AlertProps, AlertTheme, AlertThemeOverrides } from './Alert';
 export { Toast, ToastProvider, useToast, useToastContext } from './Toast';
 export type { ToastProps, ToastData, ToastProviderProps, ToastTheme, ToastThemeOverrides, UseToastReturn, UseToastOptions, } from './Toast';
 export { Notification } from './Notification';
-export type { NotificationProps, NotificationTheme, NotificationThemeOverrides, NotificationAction } from './Notification';
-export { Spinner } from './Spinner';
+export type { NotificationProps, NotificationVariant, NotificationTheme } from './Notification';
+export { default as Spinner } from './Spinner';
 export { ChatMessage } from './ChatMessage';
 export type { ChatMessageProps, ChatMessageVariant, ChatMessageAvatarProps, ChatMessageTheme, ChatMessageThemeOverrides } from './ChatMessage';
 export { default as Empty } from './Empty';
-export type { EmptyProps, EmptyVariant, EmptyThemeOverrides } from './Empty';
+export type { EmptyProps, EmptyTheme } from './Empty';

package/dist/components/forms/Checkbox/Checkbox.js

@@ -10,8 +10,8 @@ import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/
  * Checkbox component for selecting one or more options
  */
 var Checkbox = function (_a) {
-    var id = _a.id, name = _a.name, value = _a.value, controlledChecked = _a.checked, _b = _a.indeterminate, indeterminate = _b === void 0 ? false : _b, onChange = _a.onChange, label = _a.label, description = _a.description, _c = _a.state, state = _c === void 0 ? "default" : _c, themeOverrides = _a.theme, className = _a.className, restProps = __rest(_a, ["id", "name", "value", "checked", "indeterminate", "onChange", "label", "description", "state", "theme", "className"]);
-    var _d = useState(false), internalChecked = _d[0], setInternalChecked = _d[1];
+    var id = _a.id, name = _a.name, value = _a.value, controlledChecked = _a.checked, _b = _a.indeterminate, indeterminate = _b === void 0 ? false : _b, onChange = _a.onChange, label = _a.label, description = _a.description, _c = _a.state, state = _c === void 0 ? "default" : _c, _d = _a.size, size = _d === void 0 ? "md" : _d, className = _a.className, restProps = __rest(_a, ["id", "name", "value", "checked", "indeterminate", "onChange", "label", "description", "state", "size", "className"]);
+    var _e = useState(false), internalChecked = _e[0], setInternalChecked = _e[1];
     var inputRef = useRef(null);
     // Determine if component is controlled or uncontrolled
     var isControlled = controlledChecked !== undefined;
@@ -24,7 +24,6 @@ var Checkbox = function (_a) {
     }, [indeterminate]);
     // Derive state flags
     var isDisabled = state === "disabled";
-    var isInvalid = state === "invalid";
     var handleChange = function (e) {
         if (isDisabled)
             return;
@@ -33,19 +32,14 @@ var Checkbox = function (_a) {
         }
         onChange === null || onChange === void 0 ? void 0 : onChange(e.target.checked, value);
     };
-    // Create state class for CSS selectors (like other components)
-    var stateClass = isInvalid
-        ? "state-invalid"
-        : isDisabled
-            ? "state-disabled"
-            : "state-default";
-    return (React__default.createElement("div", __assign({ className: cn(checkboxTheme.container, stateClass, themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.container, className) }, restProps),
-        React__default.createElement("div", { className: cn(checkboxTheme.inputContainer, themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.inputContainer) },
-            React__default.createElement("input", { ref: inputRef, type: "checkbox", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? "".concat(id, "-description") : undefined, "aria-invalid": isInvalid, className: cn(checkboxTheme.input, themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.input) }),
-            (isChecked || indeterminate) && (indeterminate ? (React__default.createElement(ForwardRef, { className: cn(checkboxTheme.checkmark, themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.checkmark), strokeWidth: 3 })) : isDisabled ? (React__default.createElement(ForwardRef, { className: cn(checkboxTheme.checkmark, themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.checkmark), strokeWidth: 3 })) : (React__default.createElement(ForwardRef$1, { className: cn(checkboxTheme.checkmark, themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.checkmark), strokeWidth: 3 })))),
-        (label || description) && (React__default.createElement("div", { className: cn(checkboxTheme.labelContainer, themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.labelContainer) },
-            label && React__default.createElement(FormLabel, { htmlFor: id, className: "!mb-0", state: state }, label),
-            description && (React__default.createElement("div", { id: "".concat(id, "-description"), className: cn(checkboxTheme.description, themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.description) }, description))))));
+    return (React__default.createElement("div", __assign({ className: cn(checkboxTheme.baseStyle, className) }, restProps),
+        React__default.createElement("div", { className: cn(checkboxTheme.inputContainerStyle, checkboxTheme.sizes[size]) },
+            React__default.createElement("input", { ref: inputRef, type: "checkbox", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? "".concat(id, "-description") : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }),
+            indeterminate && (React__default.createElement(ForwardRef, { className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center opacity-100 stroke-neutral-600 transition-opacity duration-200", size === "sm" ? "size-3" : "size-4"), strokeWidth: 3 })),
+            isChecked && !indeterminate && (React__default.createElement(ForwardRef$1, { className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center opacity-100 stroke-white transition-opacity duration-200", size === "sm" ? "size-3" : "size-4"), strokeWidth: 3 }))),
+        (label || description) && (React__default.createElement("div", { className: "cursor-pointer" },
+            label && (React__default.createElement(FormLabel, { htmlFor: id, className: "!mb-0", state: state }, label)),
+            description && (React__default.createElement("div", { id: "".concat(id, "-description"), className: checkboxTheme.descriptionStyle }, description))))));
 };
 
 export { Checkbox, Checkbox as default };

package/dist/components/forms/Checkbox/Checkbox.theme.js

@@ -2,12 +2,14 @@
  * Default theme configuration for the Checkbox component
  */
 var checkboxTheme = {
-    container: "relative flex items-start gap-3",
-    inputContainer: "relative flex-shrink-0 group grid size-6 grid-cols-1",
-    labelContainer: "cursor-pointer",
-    input: "col-start-1 row-start-1 appearance-none rounded-md border-2 border-gray-300 bg-white size-6 checked:border-primary-600 checked:bg-primary-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 checked:outline-2 checked:outline-primary-100 checked:outline-offset-1 transition-all duration-400",
-    checkmark: "pointer-events-none col-start-1 row-start-1 size-4 self-center justify-self-center opacity-0 group-has-[:checked]:opacity-100 stroke-white group-has-[:disabled]:stroke-neutral-400 transition-opacity duration-200",
-    description: "text-sm text-text-secondary mt-1",
+    baseStyle: "relative flex items-start gap-3",
+    inputContainerStyle: "relative flex-shrink-0 group grid grid-cols-1",
+    inputStyle: "col-start-1 row-start-1 appearance-none rounded-md border-2 border-gray-300 bg-white checked:border-primary-base checked:bg-primary-base disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 checked:outline-2 checked:outline-primary-100 checked:outline-offset-1 transition-all duration-400 data-[state=disabled]:border-gray-300 data-[state=disabled]:bg-gray-100",
+    descriptionStyle: "text-base text-text-secondary mt-0.5",
+    sizes: {
+        sm: "size-5 mt-0.25",
+        md: "size-6"
+    }
 };
 
 export { checkboxTheme };