@opencxh/ui-kit 1.0.0

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

@@ -0,0 +1,89 @@
+import { default as React } from 'react';
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /**
+     * The value of the select field.
+     * For multi-select, this is an array of strings.
+     */
+    value?: string | string[];
+    /**
+     * Callback function when the value changes.
+     * For multi-select, this returns an array of strings.
+     */
+    onChange?: (value: string | string[]) => void;
+    /**
+     * The label for the select field
+     */
+    label?: string;
+    /**
+     * Helper text to display below the select
+     */
+    helperText?: string;
+    /**
+     * Error message to display when the select is invalid
+     */
+    error?: string;
+    /**
+     * The size of the select field
+     */
+    size?: "sm" | "md" | "lg" | "full";
+    /**
+     * Whether the select should take the full width of its container
+     */
+    fullWidth?: boolean;
+    /**
+     * The options for the select
+     */
+    options: SelectOption[];
+    /**
+     * Placeholder text when no option is selected
+     */
+    placeholder?: string;
+    /**
+     * Additional class name for the container
+     */
+    containerClassName?: string;
+    /**
+     * Additional class name for the label
+     */
+    labelClassName?: string;
+    /**
+     * Whether the select should be searchable
+     */
+    searchable?: boolean;
+    /**
+     * Multiple select
+     */
+    multiple?: boolean;
+}
+/**
+ * Select component with theme integration
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   label="Country"
+ *   placeholder="Select a country"
+ *   options={[
+ *     { value: 'us', label: 'United States' },
+ *     { value: 'ca', label: 'Canada' },
+ *     { value: 'uk', label: 'United Kingdom' }
+ *   ]}
+ * />
+ *
+ * <Select
+ *   label="Priority"
+ *   error="Priority is required"
+ *   options={[
+ *     { value: 'low', label: 'Low' },
+ *     { value: 'medium', label: 'Medium' },
+ *     { value: 'high', label: 'High' }
+ *   ]}
+ * />
+ * ```
+ */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,39 @@
+import { default as React } from 'react';
+export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+    /**
+     * The label for the textarea field
+     */
+    label?: string;
+    /**
+     * Helper text to display below the textarea
+     */
+    helperText?: string;
+    /**
+     * Error message to display when the textarea is invalid
+     */
+    error?: string;
+    /**
+     * The size of the textarea field
+     */
+    size?: 'sm' | 'md' | 'lg' | 'full';
+    /**
+     * Whether the textarea should take the full width of its container
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether the textarea is in a loading state
+     */
+    loading?: boolean;
+    /**
+     * Additional class name for the container
+     */
+    containerClassName?: string;
+    /**
+     * Additional class name for the label
+     */
+    labelClassName?: string;
+}
+/**
+ * TextArea component with theme integration and validation states
+ */
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

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

@@ -0,0 +1,68 @@
+import { default as React } from 'react';
+export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /**
+     * The label for the input field
+     */
+    label?: string;
+    /**
+     * Helper text to display below the input
+     */
+    helperText?: string;
+    /**
+     * Error message to display when the input is invalid
+     */
+    error?: string;
+    /**
+     * The size of the input field
+     */
+    size?: 'sm' | 'md' | 'lg' | 'full';
+    /**
+     * Whether the input should take the full width of its container
+     */
+    fullWidth?: boolean;
+    /**
+     * Icon to display at the start of the input
+     */
+    startIcon?: React.ReactNode;
+    /**
+     * Icon to display at the end of the input
+     */
+    endIcon?: React.ReactNode;
+    /**
+     * Whether the input is in a loading state
+     */
+    loading?: boolean;
+    /**
+     * Additional class name for the container
+     */
+    containerClassName?: string;
+    /**
+     * Additional class name for the label
+     */
+    labelClassName?: string;
+}
+/**
+ * TextField component with theme integration and validation states
+ *
+ * @example
+ * ```tsx
+ * <TextField
+ *   label="Email"
+ *   placeholder="Enter your email"
+ *   type="email"
+ * />
+ *
+ * <TextField
+ *   label="Search"
+ *   startIcon={<SearchIcon />}
+ *   placeholder="Search..."
+ * />
+ *
+ * <TextField
+ *   label="Password"
+ *   type="password"
+ *   error="Password is required"
+ * />
+ * ```
+ */
+export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;

package/dist/src/navigation/Sidebar.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+export interface MenuItem {
+    icon?: React.ReactNode;
+    label: string;
+    count?: number;
+    children?: MenuItem[];
+    path?: string;
+}
+interface SidebarMenuProps {
+    title: string;
+    actionIcons?: React.ReactNode[];
+    items: MenuItem[];
+    isSelectedHandler: (path: string | undefined) => boolean;
+    onClick?: (path: string | undefined) => void;
+}
+export declare const SidebarMenu: React.FC<SidebarMenuProps>;
+export default SidebarMenu;

package/dist/src/navigation/Tabs.d.ts

@@ -0,0 +1,59 @@
+import { default as React } from 'react';
+export interface TabItem {
+    /** Tab identifier */
+    id: string;
+    /** Tab label */
+    label: string;
+    /** Tab content */
+    content?: React.ReactNode;
+    /** Whether tab is disabled */
+    disabled?: boolean;
+    /** Badge/count to show next to label */
+    badge?: string | number;
+}
+export interface TabsProps {
+    /** Tab items */
+    items: TabItem[];
+    /** Default active tab */
+    defaultTab?: string;
+    /** Active tab (controlled) */
+    activeTab?: string;
+    /** Tab change handler */
+    onTabChange?: (tabId: string) => void;
+    /** Tabs variant */
+    variant?: 'default' | 'pills' | 'underline';
+    /** Tabs size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional CSS classes */
+    className?: string;
+}
+export interface TabBarProps {
+    /** Tab items (simplified for bar style) */
+    items: Array<{
+        id: string;
+        label: string;
+        badge?: string | number;
+        disabled?: boolean;
+    }>;
+    /** Active tab */
+    activeTab?: string;
+    /** Tab change handler */
+    onTabChange?: (tabId: string) => void;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * TabBar component for simple tab navigation (like in the screenshot)
+ */
+export declare const TabBar: React.FC<TabBarProps>;
+/**
+ * Full Tabs component with content panels
+ */
+export declare const Tabs: React.FC<TabsProps>;
+/**
+ * Hook to access tab context
+ */
+export declare const useTabsContext: () => {
+    activeTab: string;
+    setActiveTab: (tab: string) => void;
+};

package/dist/src/overlays/Dropdown.d.ts

@@ -0,0 +1,41 @@
+import { default as React } from 'react';
+export interface DropdownOption {
+    /** Option value */
+    value: string;
+    /** Option label */
+    label: string;
+    /** Option icon */
+    icon?: React.ReactNode;
+    /** Whether option is disabled */
+    disabled?: boolean;
+    /** Whether option is a divider */
+    divider?: boolean;
+    /** Optional description for the option */
+    description?: string;
+    /** Nested sub-options */
+    children?: DropdownOption[];
+}
+export interface DropdownProps {
+    /** Dropdown trigger element */
+    trigger: React.ReactNode;
+    /** Dropdown options */
+    options: DropdownOption[];
+    /** Selected value */
+    value?: string | Record<string, string | string[]>;
+    /** Change handler */
+    onSelect?: (value: string, parentValue?: string) => void;
+    /** Dropdown placement */
+    placement?: "bottom-start" | "bottom-end" | "top-start" | "top-end";
+    /** Whether dropdown is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Show check mark for selected option */
+    showCheck?: boolean;
+    /** Header text for the dropdown */
+    header?: string;
+}
+/**
+ * Dropdown component for menus and select-like interfaces
+ */
+export declare const Dropdown: React.FC<DropdownProps>;

package/dist/src/overlays/Modal.d.ts

@@ -0,0 +1,82 @@
+import { default as React } from 'react';
+export interface ModalProps {
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Callback fired when the modal should be closed
+     */
+    onClose: () => void;
+    /**
+     * The title of the modal
+     */
+    title?: string;
+    /**
+     * The size of the modal
+     */
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /**
+     * Whether clicking the backdrop should close the modal
+     */
+    closeOnBackdropClick?: boolean;
+    /**
+     * Whether pressing escape should close the modal
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Additional class name for the modal content
+     */
+    className?: string;
+    /**
+     * Additional class name for the modal backdrop
+     */
+    backdropClassName?: string;
+    /**
+     * The content of the modal
+     */
+    children: React.ReactNode;
+    /**
+     * Footer content for the modal
+     */
+    footer?: React.ReactNode;
+    /**
+     * Whether to show the close button
+     */
+    showCloseButton?: boolean;
+}
+/**
+ * Modal component with theme integration and accessibility features
+ *
+ * @example
+ * ```tsx
+ * <Modal
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Confirm Action"
+ *   size="md"
+ * >
+ *   <p>Are you sure you want to delete this item?</p>
+ * </Modal>
+ *
+ * <Modal
+ *   open={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Settings"
+ *   size="lg"
+ *   footer={
+ *     <div className="flex justify-end space-x-2">
+ *       <Button variant="outline" onClick={() => setIsOpen(false)}>
+ *         Cancel
+ *       </Button>
+ *       <Button onClick={handleSave}>
+ *         Save
+ *       </Button>
+ *     </div>
+ *   }
+ * >
+ *   <SettingsForm />
+ * </Modal>
+ * ```
+ */
+export declare function Modal({ open, onClose, title, size, closeOnBackdropClick, closeOnEscape, className, backdropClassName, children, footer, showCloseButton, }: ModalProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/src/primitives/Box.d.ts

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Padding size
+     */
+    padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /**
+     * Margin size
+     */
+    margin?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /**
+     * Background color
+     */
+    background?: 'none' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'white' | 'module';
+    /**
+     * Border radius
+     */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /**
+     * Shadow size
+     */
+    shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /**
+     * Border width
+     */
+    border?: 'none' | 'sm' | 'md' | 'lg';
+    /**
+     * Border color
+     */
+    borderColor?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'white';
+}
+/**
+ * Box primitive component for layout and styling
+ *
+ * @example
+ * ```tsx
+ * <Box padding="md" background="primary" radius="lg">
+ *   Content
+ * </Box>
+ *
+ * <Box as="section" padding="lg" shadow="md">
+ *   <h2>Section Title</h2>
+ *   <p>Section content</p>
+ * </Box>
+ * ```
+ */
+export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/primitives/Card.d.ts

@@ -0,0 +1,6 @@
+import { BoxProps } from './Box';
+export interface CardProps extends BoxProps {
+    children: React.ReactNode;
+    title?: string;
+}
+export declare const Card: ({ children, title, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/typography/Heading.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+export interface HeadingProps {
+    /** Heading level */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /** Visual size (can be different from semantic level) */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+    /** Font weight */
+    weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+    /** Text color */
+    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'current';
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Whether to truncate text with ellipsis */
+    truncate?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Child content */
+    children: React.ReactNode;
+}
+/**
+ * Heading component with semantic HTML and theme integration
+ */
+export declare const Heading: React.FC<HeadingProps>;

package/dist/src/typography/List.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+export interface ListItem {
+    /** Unique identifier */
+    id?: string;
+    /** List item content */
+    content: React.ReactNode;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Click handler for interactive lists */
+    onClick?: () => void;
+}
+export interface ListProps {
+    /** List items */
+    items: ListItem[];
+    /** List type */
+    type?: 'unordered' | 'ordered' | 'description';
+    /** List variant */
+    variant?: 'default' | 'flush' | 'bordered' | 'divided';
+    /** List size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether list items are interactive */
+    interactive?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Additional CSS classes for list items */
+    itemClassName?: string;
+}
+/**
+ * List component with theme integration and multiple variants
+ */
+export declare const List: React.FC<ListProps>;

package/dist/src/typography/Text.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+export interface TextProps {
+    /** Text variant */
+    variant?: 'body' | 'caption' | 'label' | 'code';
+    /** Text size */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Font weight */
+    weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+    /** Text color */
+    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'current' | 'muted';
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right' | 'justify';
+    /** Whether to truncate text with ellipsis */
+    truncate?: boolean;
+    /** Whether text should be italic */
+    italic?: boolean;
+    /** Whether text should be underlined */
+    underline?: boolean;
+    /** Line height */
+    lineHeight?: 'tight' | 'normal' | 'relaxed';
+    /** HTML element to render */
+    as?: 'p' | 'span' | 'div' | 'code' | 'pre';
+    /** Additional CSS classes */
+    className?: string;
+    /** Child content */
+    children: React.ReactNode;
+}
+/**
+ * Text component with theme integration and typography variants
+ */
+export declare const Text: React.FC<TextProps>;

package/dist/src/utils/cn.d.ts

@@ -0,0 +1,14 @@
+import { ClassValue } from 'clsx';
+/**
+ * Utility function for combining class names
+ * Combines clsx for conditional classes with Tailwind merge for deduplication
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Utility for creating variant-based class combinations
+ */
+export declare function createVariants<T extends Record<string, Record<string, string>>>(variants: T): (variant: keyof T, value: keyof T[keyof T]) => T[keyof T][keyof T[keyof T]] | "";
+/**
+ * Utility for creating size-based class combinations
+ */
+export declare function createSizes<T extends Record<string, string>>(sizes: T): (size: keyof T) => "" | T[keyof T];

package/dist/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vite').UserConfig;
+export default _default;

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@opencxh/ui-kit",
+  "version": "1.0.0",
+  "description": "Theme-aware UI component library for OpenCXH platform",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest --coverage"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.460.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.15.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "typescript": "^5.6.3",
+    "vite": "^6.0.1",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^2.1.8"
+  },
+  "peerDependencies": {
+    "react": ">=19.1.0",
+    "react-dom": ">=19.1.0"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "design-system",
+    "theme",
+    "tailwind"
+  ],
+  "author": "OpenCXH Team",
+  "license": "MIT"
+}