@opencxh/ui-kit 1.0.0 → 3.1.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/forms/Form.d.ts

@@ -1,8 +1,11 @@
 import { default as React } from 'react';
 export type FormFieldType = "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 FormGroupItem<T = any> {
     /** Field name (key in form data) */
-    name: keyof T;
+    name: NestedKeys<T>;
     /** Field label */
     label: string;
     /** Field type */
@@ -50,6 +53,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 */
@@ -117,3 +121,4 @@ export interface FormProps<T = Record<string, 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 {};

package/dist/src/index.d.ts

@@ -4,19 +4,21 @@ 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 { 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';

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/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,6 +1,6 @@
 {
   "name": "@opencxh/ui-kit",
-  "version": "1.0.0",
+  "version": "3.1.0",
   "description": "Theme-aware UI component library for OpenCXH platform",
   "type": "module",
   "exports": {