@opencxh/ui-kit 1.0.0

package/dist/src/action/Button.d.ts

@@ -0,0 +1,50 @@
+import { default as React } from 'react';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * The visual style variant of the button
+     */
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+    /**
+     * The size of the button
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /**
+     * Whether the button should take the full width of its container
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the button is in a loading state
+     */
+    loading?: boolean;
+    /**
+     * Icon to display before the button text
+     */
+    leftIcon?: React.ReactNode;
+    /**
+     * Icon to display after the button text
+     */
+    rightIcon?: React.ReactNode;
+    /**
+     * Whether the button should only display an icon (no text)
+     */
+    iconOnly?: boolean;
+}
+/**
+ * Button component with theme integration and multiple variants
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" size="md">
+ *   Click me
+ * </Button>
+ *
+ * <Button variant="outline" leftIcon={<PlusIcon />}>
+ *   Add item
+ * </Button>
+ *
+ * <Button iconOnly variant="ghost" size="sm">
+ *   <SearchIcon />
+ * </Button>
+ * ```
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/src/action/ButtonGroup.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface ButtonGroupProps {
+    /** Child buttons to group */
+    children: React.ReactNode;
+    /** Size of the button group */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Orientation of the button group */
+    orientation?: 'horizontal' | 'vertical';
+    /** Whether buttons should be attached (no gap) */
+    attached?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * ButtonGroup component for grouping related buttons
+ */
+export declare const ButtonGroup: React.FC<ButtonGroupProps>;

package/dist/src/action/Link.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** Link variant */
+    variant?: 'default' | 'subtle' | 'underline' | 'button';
+    /** Link size */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Color theme */
+    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    /** Whether the link is disabled */
+    disabled?: boolean;
+    /** Whether to show external link icon */
+    external?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Child content */
+    children: React.ReactNode;
+}
+/**
+ * Link component with theme integration and accessibility features
+ */
+export declare const Link: React.FC<LinkProps>;

package/dist/src/command-palette/CommandPalette.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+export interface Command {
+    id: string;
+    label: string;
+    action?: () => void;
+    subCommands?: Command[];
+    icon?: React.ReactNode;
+}
+export interface CommandPaletteProps {
+    commands: Command[];
+    isOpen: boolean;
+    onClose: () => void;
+    labels?: {
+        searchPlaceholder?: string;
+        navigate?: string;
+        select?: string;
+        close?: string;
+        noCommandsFound?: string;
+    };
+}
+declare const CommandPalette: React.FC<CommandPaletteProps>;
+export default CommandPalette;

package/dist/src/command-palette/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CommandPalette';
+export { default as CommandPalette } from './CommandPalette';

package/dist/src/content/Icon.d.ts

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface IconProps {
+    /** Icon component from lucide-react or custom icon */
+    icon: React.ComponentType<any>;
+    /** Icon size */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+    /** Icon color */
+    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'current';
+    /** Whether the icon should be clickable */
+    clickable?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Accessibility label */
+    'aria-label'?: string;
+}
+/**
+ * Icon component that works with Lucide React icons and provides theme integration
+ */
+export declare const Icon: React.FC<IconProps>;

package/dist/src/content/Image.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /** Image source URL */
+    src: string;
+    /** Alt text for accessibility */
+    alt: string;
+    /** Image size preset */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Aspect ratio */
+    aspectRatio?: 'square' | 'video' | 'portrait' | 'landscape' | 'auto';
+    /** Border radius */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Whether to show loading state */
+    showLoading?: boolean;
+    /** Whether to show error state */
+    showError?: boolean;
+    /** Fallback image URL */
+    fallback?: string;
+    /** Loading placeholder content */
+    loadingContent?: React.ReactNode;
+    /** Error placeholder content */
+    errorContent?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Image component with loading states, error handling, and theme integration
+ */
+export declare const Image: React.FC<ImageProps>;

package/dist/src/content/PageHeader.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+export interface PageHeaderAction {
+    /** Action identifier */
+    id: string;
+    /** Action label */
+    label: string;
+    /** Action icon */
+    icon?: React.ReactNode;
+    /** Action handler */
+    onClick: () => void;
+    /** Action variant */
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive";
+    /** Whether action is disabled */
+    disabled?: boolean;
+}
+export interface PageHeaderProps {
+    /** Page title */
+    title: string;
+    /** Page subtitle/description */
+    subtitle?: string;
+    /** Breadcrumb items */
+    breadcrumbs?: Array<{
+        label: string;
+        href?: string;
+    }>;
+    /** Action buttons */
+    actions?: PageHeaderAction[];
+    /** Additional content to render in the header */
+    children?: React.ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+    /** Back button label */
+    backLabel?: string;
+    /** Back button handler */
+    onBack?: () => void;
+    /** Back button class name */
+    backClassName?: string;
+}
+export declare const ChevronLeftIcon: () => import("react/jsx-runtime").JSX.Element;
+/**
+ * PageHeader component for consistent page layouts with title, actions, and breadcrumbs
+ */
+export declare const PageHeader: React.FC<PageHeaderProps>;

package/dist/src/content/Table.d.ts

@@ -0,0 +1,108 @@
+import { default as React } from 'react';
+export interface TableColumn<T = any> {
+    /** Unique column identifier */
+    id: string;
+    /** Column header text */
+    header: string;
+    /** Data accessor - can be string key or function */
+    accessor: keyof T | ((row: T) => any);
+    /** Custom cell renderer */
+    cell?: (value: any, row: T, index: number) => React.ReactNode;
+    /** Column width */
+    width?: string | number;
+    /** Whether column is sortable */
+    sortable?: boolean;
+    /** Whether column is searchable */
+    searchable?: boolean;
+    /** Column alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Whether column is sticky */
+    sticky?: 'left' | 'right';
+    /** Custom header renderer */
+    headerCell?: () => React.ReactNode;
+}
+export interface TableAction<T = any> {
+    /** Action identifier */
+    id: string;
+    /** Action label */
+    label: string;
+    /** Action icon */
+    icon?: React.ReactNode;
+    /** Action handler */
+    onClick: (row: T, index: number) => void;
+    /** Whether action is disabled for this row */
+    disabled?: (row: T) => boolean;
+    /** Action variant */
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+}
+export interface TableFilter {
+    /** Filter identifier */
+    id: string;
+    /** Filter label */
+    label: string;
+    /** Filter type */
+    type?: 'select' | 'date' | 'dateRange';
+    /** Filter options (for select type) */
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+    /** Current filter value */
+    value?: string | Date | null | string[];
+    /** Filter change handler */
+    onChange: (value: string | Date | null | string[]) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether filter is multi-select */
+    multiSelect?: boolean;
+}
+export interface TableProps<T = any> {
+    /** Table data */
+    data: T[];
+    /** Column definitions */
+    columns: TableColumn<T>[];
+    /** Loading state */
+    loading?: boolean;
+    /** Whether table is searchable */
+    searchable?: boolean;
+    /** Search placeholder text */
+    searchPlaceholder?: string;
+    /** Table filters */
+    filters?: TableFilter[];
+    /** Whether table has pagination */
+    paginated?: boolean;
+    /** Page size options */
+    pageSizeOptions?: number[];
+    /** Default page size */
+    defaultPageSize?: number;
+    /** Row actions */
+    actions?: TableAction<T>[];
+    /** Row click handler */
+    onRowClick?: (row: T, index: number) => void;
+    /** Row selection */
+    selectable?: boolean;
+    /** Selected rows */
+    selectedRows?: T[];
+    /** Selection change handler */
+    onSelectionChange?: (selectedRows: T[]) => void;
+    /** Row key accessor */
+    getRowKey?: (row: T, index: number) => string | number;
+    /** Empty state content */
+    emptyContent?: React.ReactNode;
+    /** Table size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether to show row hover */
+    hoverable?: boolean;
+    /** Whether to show row borders */
+    bordered?: boolean;
+    /** Whether to stripe rows */
+    striped?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Custom row className */
+    rowClassName?: (row: T, index: number) => string;
+}
+/**
+ * High-performance Table component with sorting, pagination, search, and custom renderers
+ */
+export declare const Table: <T extends Record<string, any>>({ data, columns, loading, searchable, searchPlaceholder, filters, paginated, pageSizeOptions, defaultPageSize, actions, onRowClick, selectable, selectedRows, onSelectionChange, getRowKey, emptyContent, hoverable, bordered, striped, className, rowClassName, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/feedback/Badge.d.ts

@@ -0,0 +1,48 @@
+import { default as React } from 'react';
+export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The visual variant of the badge
+     */
+    variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';
+    /**
+     * The size of the badge
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Whether the badge should have a dot indicator
+     */
+    dot?: boolean;
+    /**
+     * Icon to display in the badge
+     */
+    icon?: React.ReactNode;
+    /**
+     * Whether the badge can be dismissed
+     */
+    dismissible?: boolean;
+    /**
+     * Callback fired when the badge is dismissed
+     */
+    onDismiss?: () => void;
+}
+/**
+ * Badge component for displaying status indicators and labels
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="success">Active</Badge>
+ *
+ * <Badge variant="warning" dot>
+ *   Pending
+ * </Badge>
+ *
+ * <Badge variant="error" dismissible onDismiss={() => console.log('dismissed')}>
+ *   Error
+ * </Badge>
+ *
+ * <Badge variant="primary" icon={<StarIcon />}>
+ *   Featured
+ * </Badge>
+ * ```
+ */
+export declare function Badge({ variant, size, dot, icon, dismissible, onDismiss, className, children, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/feedback/ContentLoading.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+interface ContentLoadingProps {
+    /**
+     * Optional custom skeleton content (overrides default)
+     */
+    children?: ReactNode;
+    /**
+     * If true, renders a table-style skeleton
+     */
+    showTableSkeleton?: boolean;
+    /**
+     * Number of table columns (default: 6)
+     */
+    tableColumns?: number;
+    /**
+     * Number of table rows (default: 8)
+     */
+    tableRows?: number;
+}
+export declare function ContentLoading({ children, showTableSkeleton, tableColumns, tableRows, }: ContentLoadingProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/feedback/Spinner.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The size of the spinner
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * The color variant of the spinner
+     */
+    variant?: 'primary' | 'secondary' | 'white' | 'current';
+    /**
+     * Optional label for accessibility
+     */
+    label?: string;
+    /**
+     * Whether to show the spinner with a label
+     */
+    showLabel?: boolean;
+}
+/**
+ * Spinner component for loading states
+ *
+ * @example
+ * ```tsx
+ * <Spinner size="md" variant="primary" />
+ *
+ * <Spinner size="lg" variant="primary" showLabel label="Loading..." />
+ *
+ * <Spinner size="sm" variant="white" />
+ * ```
+ */
+export declare function Spinner({ size, variant, label, showLabel, className, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/forms/Form.d.ts

@@ -0,0 +1,119 @@
+import { default as React } from 'react';
+export type FormFieldType = "text" | "email" | "password" | "number" | "tel" | "url" | "textarea" | "select" | "checkbox" | "radio" | "date" | "custom" | "array";
+export interface FormGroupItem<T = any> {
+    /** Field name (key in form data) */
+    name: keyof T;
+    /** Field label */
+    label: string;
+    /** Field type */
+    type: FormFieldType;
+    /** Text input type (when type is 'text') */
+    textType?: "text" | "email" | "password" | "number" | "tel" | "url";
+    /** Field width (CSS width value or grid columns) */
+    width?: string | number;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Autocomplete attribute */
+    autocomplete?: string;
+    /** Options for select/radio/checkbox types */
+    options?: Array<{
+        value: string | number;
+        label: string;
+        disabled?: boolean;
+    }>;
+    /** Validation function */
+    validator?: (value: any, formData: T) => string | null;
+    /** Conditional function to show/hide field */
+    conditional?: (formData: T) => boolean;
+    /** Whether field can be empty */
+    allowEmpty?: boolean;
+    /** Remove field from form data when empty */
+    removeIfEmpty?: boolean;
+    /** Whether field is hidden */
+    hidden?: boolean;
+    /** Whether field is required */
+    required?: boolean;
+    /** Whether field is disabled */
+    disabled?: boolean;
+    /** Custom component renderer */
+    customComponent?: (props: {
+        value: any;
+        onChange: (value: any) => void;
+        error?: string;
+        disabled?: boolean;
+    }) => React.ReactNode;
+    /** Additional props to pass to the field component */
+    fieldProps?: Record<string, any>;
+    /** For 'array' type, defines the fields for each item in the array */
+    arrayFields?: FormGroupItem<any>[];
+    /** For 'select' type, whether the select should be searchable */
+    searchable?: boolean;
+    /** For 'select' type, whether the select should be multiple */
+    multiple?: boolean;
+}
+export interface FormGroup<T = any> {
+    /** Group identifier */
+    id: string;
+    /** Group title */
+    title: string;
+    /** Group description */
+    description?: string;
+    /** Group items */
+    items: FormGroupItem<T>[];
+    /** Conditional function to show/hide group */
+    conditional?: (formData: T) => boolean;
+    /** Group layout */
+    layout?: "grid" | "flex";
+    /** Number of columns for grid layout */
+    columns?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+export interface FormButtonProps {
+    /** Button label */
+    label: string;
+    /** Button variant */
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive";
+    /** Button size */
+    size?: "sm" | "md" | "lg";
+    /** Whether button is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+}
+export interface FormProps<T = Record<string, any>> {
+    /** Form groups */
+    groups: FormGroup<T>[];
+    /** Initial form data */
+    data?: Partial<T>;
+    /** Form submit handler */
+    onSubmit?: (data: T, transformedData?: any) => void | Promise<void>;
+    /** Form cancel handler */
+    onCancel?: () => void;
+    /** Form change handler */
+    onChange?: (data: Partial<T>, changedField?: keyof T) => void;
+    /** Data transformation function (called before submit) */
+    transform?: (data: T) => any;
+    /** Form validation function */
+    validate?: (data: T) => Record<keyof T, string> | null;
+    /** Submit button props */
+    submitButton?: FormButtonProps;
+    /** Cancel button props */
+    cancelButton?: FormButtonProps;
+    /** Whether to show buttons */
+    showButtons?: boolean;
+    /** Form layout */
+    layout?: "vertical" | "horizontal";
+    /** Form size */
+    size?: "sm" | "md" | "lg" | "full";
+    /** Whether form is loading */
+    loading?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Form ref */
+    ref?: React.RefObject<HTMLFormElement>;
+}
+/**
+ * Generic Form component with groups, validation, and conditional rendering
+ */
+export declare const Form: <T extends Record<string, any>>({ groups, data: externalData, onSubmit, onCancel, onChange, transform, validate, submitButton, cancelButton, showButtons, layout, size, loading, className, ref, }: FormProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/index.d.ts

@@ -0,0 +1,28 @@
+export { cn, createSizes, createVariants } from './utils/cn';
+export { Button, type ButtonProps } from './action/Button';
+export { ButtonGroup, type ButtonGroupProps } from './action/ButtonGroup';
+export { Link, type LinkProps } from './action/Link';
+export { Checkbox, type CheckboxProps } from './input/Checkbox';
+export { DatePicker, type DatePickerProps } from './input/DatePicker';
+export { Select, type SelectOption, type SelectProps } from './input/Select';
+export { TextArea, type TextAreaProps } from './input/TextArea';
+export { TextField, type TextFieldProps } from './input/TextField';
+export { Form, type FormButtonProps, type FormFieldType, type FormGroup, type FormGroupItem, type FormProps, } from './forms/Form';
+export { Dropdown, type DropdownOption, type DropdownProps, } from './overlays/Dropdown';
+export { Modal, type ModalProps } from './overlays/Modal';
+export { Badge, type BadgeProps } from './feedback/Badge';
+export { ContentLoading } from './feedback/ContentLoading';
+export { Spinner, type SpinnerProps } from './feedback/Spinner';
+export { Icon, type IconProps } from './content/Icon';
+export { Image, type ImageProps } from './content/Image';
+export { PageHeader, type PageHeaderAction, type PageHeaderProps, } from './content/PageHeader';
+export { Table, type TableAction, type TableColumn, type TableFilter, type TableProps, } from './content/Table';
+export { SidebarMenu, type MenuItem } from './navigation/Sidebar';
+export { TabBar, Tabs, type TabItem, type TabsProps } from './navigation/Tabs';
+export { Heading, type HeadingProps } from './typography/Heading';
+export { List, type ListItem, type ListProps } from './typography/List';
+export { Text, type TextProps } from './typography/Text';
+export * from './command-palette';
+export * from './primitives/Box';
+export * from './primitives/Card';
+export * from './typography/Text';

package/dist/src/input/Checkbox.d.ts

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /**
+     * The label for the checkbox
+     */
+    label?: string;
+    /**
+     * Helper text to display below the checkbox
+     */
+    helperText?: string;
+    /**
+     * Error message to display when the checkbox is invalid
+     */
+    error?: string;
+    /**
+     * The size of the checkbox
+     */
+    size?: 'sm' | 'md' | 'lg' | 'full';
+    /**
+     * Whether the checkbox is in an indeterminate state
+     */
+    indeterminate?: boolean;
+    /**
+     * Additional class name for the container
+     */
+    containerClassName?: string;
+    /**
+     * Additional class name for the label
+     */
+    labelClassName?: string;
+}
+/**
+ * Checkbox component with theme integration
+ *
+ * @example
+ * ```tsx
+ * <Checkbox label="Accept terms and conditions" />
+ *
+ * <Checkbox
+ *   label="Subscribe to newsletter"
+ *   helperText="You can unsubscribe at any time"
+ * />
+ *
+ * <Checkbox
+ *   label="Required field"
+ *   error="This field is required"
+ * />
+ *
+ * <Checkbox
+ *   label="Select all"
+ *   indeterminate={true}
+ * />
+ * ```
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/dist/src/input/DatePicker.d.ts

@@ -0,0 +1,26 @@
+export interface DatePickerProps {
+    /** Current date value */
+    value?: Date | null;
+    /** Change handler */
+    onChange?: (date: Date | null) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether the input is required */
+    required?: boolean;
+    /** Input size */
+    size?: 'sm' | 'md' | 'lg' | 'full';
+    /** Additional CSS classes */
+    className?: string;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Date format for display */
+    format?: 'MM/dd/yyyy' | 'dd/MM/yyyy' | 'yyyy-MM-dd';
+}
+/**
+ * DatePicker component with calendar popup
+ */
+export declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLInputElement>>;