@opencxh/ui-kit 1.0.0 → 3.5.0

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

@@ -17,6 +17,8 @@ export interface CommandPaletteProps {
         close?: string;
         noCommandsFound?: string;
     };
+    initialCommandPath?: string[];
+    initialActiveIndex?: number;
 }
 declare const CommandPalette: React.FC<CommandPaletteProps>;
 export default CommandPalette;

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

@@ -35,6 +35,10 @@ export interface PageHeaderProps {
     onBack?: () => void;
     /** Back button class name */
     backClassName?: string;
+    /** Whether the title is editable */
+    editable?: boolean;
+    /** Callback when title is changed */
+    onTitleChange?: (newTitle: string) => void;
 }
 export declare const ChevronLeftIcon: () => import("react/jsx-runtime").JSX.Element;
 /**

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

@@ -15,9 +15,9 @@ export interface TableColumn<T = any> {
     /** Whether column is searchable */
     searchable?: boolean;
     /** Column alignment */
-    align?: 'left' | 'center' | 'right';
+    align?: "left" | "center" | "right";
     /** Whether column is sticky */
-    sticky?: 'left' | 'right';
+    sticky?: "left" | "right";
     /** Custom header renderer */
     headerCell?: () => React.ReactNode;
 }
@@ -33,7 +33,7 @@ export interface TableAction<T = any> {
     /** Whether action is disabled for this row */
     disabled?: (row: T) => boolean;
     /** Action variant */
-    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive";
 }
 export interface TableFilter {
     /** Filter identifier */
@@ -41,7 +41,7 @@ export interface TableFilter {
     /** Filter label */
     label: string;
     /** Filter type */
-    type?: 'select' | 'date' | 'dateRange';
+    type?: "select" | "date" | "dateRange";
     /** Filter options (for select type) */
     options?: Array<{
         value: string;
@@ -90,7 +90,7 @@ export interface TableProps<T = any> {
     /** Empty state content */
     emptyContent?: React.ReactNode;
     /** Table size */
-    size?: 'sm' | 'md' | 'lg';
+    size?: "sm" | "md" | "lg";
     /** Whether to show row hover */
     hoverable?: boolean;
     /** Whether to show row borders */

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

@@ -0,0 +1,66 @@
+import { default as React } from 'react';
+export type ViewFieldType = "text" | "email" | "password" | "number" | "tel" | "url" | "textarea" | "select" | "checkbox" | "radio" | "date" | "custom" | "array";
+type NestedKeys<T> = {
+    [K in keyof T]: T[K] extends object ? `${K & string}.${NestedKeys<T[K]>}` : K & string;
+}[keyof T];
+export interface ViewGroupItem<T = any> {
+    /** Field name (key in data) */
+    name: NestedKeys<T>;
+    /** Field label */
+    label: string;
+    /** Field type */
+    type: ViewFieldType;
+    /** Field width (CSS width value or grid columns) */
+    width?: string | number;
+    /** Options for select/radio/checkbox types */
+    options?: Array<{
+        value: string | number;
+        label: string;
+    }>;
+    /** Conditional function to show/hide field */
+    conditional?: (data: T) => boolean;
+    /** Whether field is hidden */
+    hidden?: boolean;
+    /** Custom component renderer */
+    customComponent?: (props: {
+        value: any;
+    }) => React.ReactNode;
+    /** Format function for display value */
+    format?: (value: any, data: T) => string | React.ReactNode;
+    /** For 'array' type, defines the fields for each item in the array */
+    arrayFields?: ViewGroupItem<any>[];
+}
+export interface ViewGroup<T = any> {
+    /** Group identifier */
+    id: string;
+    /** Group title */
+    title: string;
+    /** Group description */
+    description?: string;
+    /** Group items */
+    items: ViewGroupItem<T>[];
+    /** Conditional function to show/hide group */
+    conditional?: (data: T) => boolean;
+    /** Group layout */
+    layout?: "grid" | "flex";
+    /** Number of columns for grid layout */
+    columns?: number;
+    /** Additional CSS classes */
+    className?: string;
+}
+export interface ViewProps<T = Record<string, any>> {
+    /** View groups */
+    groups: ViewGroup<T>[];
+    /** Data to display */
+    data: T;
+    /** View size */
+    size?: "sm" | "md" | "lg" | "full";
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Generic View component with groups and conditional rendering
+ * Displays data in a read-only format matching the Form component layout
+ */
+export declare const View: <T extends Record<string, any>>({ groups, data, size, className, }: ViewProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/error-boundary/index.d.ts

@@ -0,0 +1,17 @@
+import { ErrorInfo, ReactNode, Component } from 'react';
+interface Props {
+    children: ReactNode;
+    fallback?: ReactNode;
+    name?: string;
+}
+interface State {
+    hasError: boolean;
+    error: Error | null;
+}
+export declare class ErrorBoundary extends Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(error: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};

package/dist/src/federated-resource/index.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+interface FederatedResourceProps {
+    identifier: string;
+    resourceLoader: () => Promise<any>;
+    framework?: 'react' | 'svelte' | 'vanilla';
+    fallback?: React.ReactNode;
+    componentProps?: Record<string, any>;
+    className?: string;
+}
+export declare function FederatedResource({ identifier, resourceLoader, framework, fallback, componentProps, className, }: FederatedResourceProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,8 +1,12 @@
+import { InternalSDK } from '@opencxh/domain';
 import { default as React } from 'react';
-export type FormFieldType = "text" | "email" | "password" | "number" | "tel" | "url" | "textarea" | "select" | "checkbox" | "radio" | "date" | "custom" | "array";
+export type FormFieldType = "text" | "email" | "password" | "number" | "tel" | "url" | "textarea" | "select" | "checkbox" | "radio" | "date" | "file" | "custom" | "array";
+type NestedKeys<T> = {
+    [K in keyof T]: T[K] extends object ? `${K & string}.${NestedKeys<T[K]>}` : K & string;
+}[keyof T];
 export interface FormGroupItem<T = any> {
     /** Field name (key in form data) */
-    name: keyof T;
+    name: NestedKeys<T>;
     /** Field label */
     label: string;
     /** Field type */
@@ -50,6 +54,7 @@ export interface FormGroupItem<T = any> {
     searchable?: boolean;
     /** For 'select' type, whether the select should be multiple */
     multiple?: boolean;
+    allowCreate?: boolean;
 }
 export interface FormGroup<T = any> {
     /** Group identifier */
@@ -112,8 +117,11 @@ export interface FormProps<T = Record<string, any>> {
     className?: string;
     /** Form ref */
     ref?: React.RefObject<HTMLFormElement>;
+    /** SDK instance */
+    sdk?: InternalSDK<any>;
 }
 /**
  * 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;
+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, sdk, }: FormProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/index.d.ts

@@ -4,19 +4,22 @@ 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 { SearchableTextField, type SearchableTextFieldProps } from './input/SearchableTextField';
 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 { StorageInput, type StorageInputProps } from './input/StorageInput';
+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 { PageHeader, type PageHeaderAction, type PageHeaderProps } from './content/PageHeader';
+export { Table, type TableAction, type TableColumn, type TableFilter, type TableProps } from './content/Table';
+export { View, type ViewGroup, type ViewProps } from './content/View';
 export { SidebarMenu, type MenuItem } from './navigation/Sidebar';
 export { TabBar, Tabs, type TabItem, type TabsProps } from './navigation/Tabs';
 export { Heading, type HeadingProps } from './typography/Heading';
@@ -26,3 +29,5 @@ export * from './command-palette';
 export * from './primitives/Box';
 export * from './primitives/Card';
 export * from './typography/Text';
+export { FederatedResource } from './federated-resource/index';
+export { ErrorBoundary } from './error-boundary/index';

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

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface SearchableTextFieldOption {
+    value: string;
+    label: string;
+}
+export interface SearchableTextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "onSelect"> {
+    label?: string;
+    helperText?: string;
+    error?: string;
+    size?: "sm" | "md" | "lg" | "full";
+    fullWidth?: boolean;
+    startIcon?: React.ReactNode;
+    loading?: boolean;
+    containerClassName?: string;
+    labelClassName?: string;
+    options: SearchableTextFieldOption[];
+    onRemoteSearch?: (searchTerm: string) => Promise<void>;
+    onSelect?: (value: string) => void;
+    debounceTime?: number;
+}
+export declare const SearchableTextField: React.ForwardRefExoticComponent<SearchableTextFieldProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -5,85 +5,22 @@ export interface SelectOption {
     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;
+    /** Vrije invoer toestaan (Enter of klik op “Voeg toe…”) */
+    allowCreate?: boolean;
+    /** Optioneel: zelf bepalen hoe een nieuwe optie eruit ziet */
+    onCreateOption?: (label: string) => SelectOption;
 }
-/**
- * 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/StorageInput.d.ts

@@ -0,0 +1,36 @@
+import { FilePointer, VirtualMount } from '@opencxh/domain';
+import { default as React } from 'react';
+export interface StorageInputProps {
+    value?: string | FilePointer;
+    onChange: (value: FilePointer | null, content?: Uint8Array) => void;
+    label?: string;
+    placeholder?: string;
+    error?: string;
+    disabled?: boolean;
+    accept?: string;
+    onListFiles?: (filters?: {
+        name?: string;
+        mimeType?: string;
+        mountId?: string;
+        path?: string;
+    }) => Promise<{
+        data: FilePointer[];
+    }> | undefined;
+    onListMounts?: () => Promise<{
+        data: VirtualMount[];
+    }> | undefined;
+    onUploadFile?: (payload: {
+        file: Uint8Array;
+        filename: string;
+        mimeType: string;
+        mountId?: string;
+        path?: string;
+    }) => Promise<{
+        data: FilePointer;
+    }> | undefined;
+    onDownloadFile?: (fileId: string) => Promise<Uint8Array> | undefined;
+    onRegisterFile?: (payload: Omit<FilePointer, 'id'>) => Promise<{
+        data: FilePointer;
+    }> | undefined;
+}
+export declare const StorageInput: React.FC<StorageInputProps>;

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

@@ -12,6 +12,7 @@ interface SidebarMenuProps {
     items: MenuItem[];
     isSelectedHandler: (path: string | undefined) => boolean;
     onClick?: (path: string | undefined) => void;
+    preMenuItemsComponent?: React.ReactNode;
 }
 export declare const SidebarMenu: React.FC<SidebarMenuProps>;
 export default SidebarMenu;

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

@@ -33,7 +33,7 @@ export interface DropdownProps {
     /** Show check mark for selected option */
     showCheck?: boolean;
     /** Header text for the dropdown */
-    header?: string;
+    header?: string | React.ReactNode;
 }
 /**
  * Dropdown component for menus and select-like interfaces

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@opencxh/ui-kit",
-  "version": "1.0.0",
+  "version": "3.5.0",
   "description": "Theme-aware UI component library for OpenCXH platform",
   "type": "module",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.cjs"
     },
     "./styles": "./dist/styles.css"
   },
@@ -28,26 +28,27 @@
   "dependencies": {
     "clsx": "^2.1.0",
     "lucide-react": "^0.460.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "@opencxh/domain": "workspace:*"
   },
   "devDependencies": {
     "@types/react": "^19.1.8",
-    "@types/react-dom": "^19.1.6",
+    "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.15.0",
     "@typescript-eslint/parser": "^8.15.0",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^5.0.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",
+    "vite": "7.1.7",
+    "vite-plugin-dts": "^4.5.4",
     "vitest": "^2.1.8"
   },
   "peerDependencies": {
-    "react": ">=19.1.0",
-    "react-dom": ">=19.1.0"
+    "react": ">=19.2.4",
+    "react-dom": ">=19.2.4"
   },
   "keywords": [
     "react",