@codella-software/react 2.0.0

package/dist/react/src/live-updates/useLiveUpdateListener.d.ts

@@ -0,0 +1,14 @@
+import { WS_ACTIONS } from '../../../core/src/live-updates';
+export interface UseUpdateListenerOptions {
+    enabled?: boolean;
+}
+/**
+ * Hook to listen for and handle live updates with callback
+ * @param action - The WS_ACTIONS enum value to listen for
+ * @param onUpdate - Callback when update is received
+ * @param enabled - Whether to subscribe (defaults to true)
+ */
+export declare const useLiveUpdateListener: <T = unknown>(action: WS_ACTIONS, onUpdate: (data: T) => void, { enabled }?: UseUpdateListenerOptions) => {
+    subscribe: () => () => void;
+};
+//# sourceMappingURL=useLiveUpdateListener.d.ts.map

package/dist/react/src/live-updates/useLiveUpdateListener.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLiveUpdateListener.d.ts","sourceRoot":"","sources":["../../../../src/live-updates/useLiveUpdateListener.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAG7D,MAAM,WAAW,wBAAwB;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,GAAI,CAAC,GAAG,OAAO,EAC/C,QAAQ,UAAU,EAClB,UAAU,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,EAC3B,cAAoB,wBAA6B;;CA2BlD,CAAC"}

package/dist/react/src/live-updates/useLiveUpdates.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Hook to subscribe to live update events
+ * @param eventName - The event name (must be mapped in LiveUpdateProvider.eventMappings)
+ * @returns The latest event data or null
+ */
+export declare const useLiveUpdates: <T = unknown>(eventName: string) => {
+    data: T | null;
+    error: Error | null;
+};
+//# sourceMappingURL=useLiveUpdates.d.ts.map

package/dist/react/src/live-updates/useLiveUpdates.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLiveUpdates.d.ts","sourceRoot":"","sources":["../../../../src/live-updates/useLiveUpdates.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,GAAG,OAAO,EAAE,WAAW,MAAM;;;CAsB5D,CAAC"}

package/dist/react/src/table-builder/index.d.ts

@@ -0,0 +1,2 @@
+export { useTableService, type UseTableServiceOptions, type UseTableServiceReturn } from './useTableService';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/src/table-builder/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/table-builder/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,KAAK,sBAAsB,EAAE,KAAK,qBAAqB,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/react/src/table-builder/useTableService.d.ts

@@ -0,0 +1,93 @@
+import { TableBuilderConfig } from '../../../core/src/index.ts';
+/**
+ * Hook options for useTableService
+ */
+export interface UseTableServiceOptions<T extends Record<string, any>> {
+    /** TableBuilder configuration */
+    config: TableBuilderConfig<T>;
+    /** Table data */
+    data: T[];
+}
+/**
+ * Hook return value for useTableService
+ */
+export interface UseTableServiceReturn<T extends Record<string, any>> {
+    /** Filtered and paginated data rows */
+    rows: T[];
+    /** Selected row IDs */
+    selectedRows: string[];
+    /** All rows selected flag */
+    allSelected: boolean;
+    /** Current page */
+    currentPage: number;
+    /** Page size */
+    pageSize: number;
+    /** Total pages */
+    totalPages: number;
+    /** Total item count */
+    totalItems: number;
+    /** Has next page */
+    hasNextPage: boolean;
+    /** Has previous page */
+    hasPrevPage: boolean;
+    /** Sort field */
+    sortBy: string | null;
+    /** Sort direction */
+    sortDirection: 'asc' | 'desc' | null;
+    /** Active filters */
+    filters: Record<string, any>;
+    /** Toggle row selection */
+    toggleRowSelection: (rowId: string) => void;
+    /** Toggle all rows selection */
+    toggleAllSelection: () => void;
+    /** Clear selection */
+    clearSelection: () => void;
+    /** Set sort */
+    setSort: (field: string, direction: 'asc' | 'desc') => void;
+    /** Toggle sort */
+    toggleSort: (field: string) => void;
+    /** Set filter */
+    setFilter: (field: string, value: any) => void;
+    /** Clear filter */
+    clearFilter: (field: string) => void;
+    /** Clear all filters */
+    clearAllFilters: () => void;
+    /** Set page */
+    setPage: (page: number) => void;
+    /** Set page size */
+    setPageSize: (size: number) => void;
+    /** Next page */
+    nextPage: () => void;
+    /** Previous page */
+    prevPage: () => void;
+}
+/**
+ * React hook that wraps TableBuilder for table state management
+ *
+ * @param options - Hook options including config and data
+ * @returns Table state and control methods
+ *
+ * @example
+ * ```tsx
+ * const config: TableBuilderConfig<User> = {
+ *   columns: [
+ *     { field: 'name', header: 'Name', sortable: true }
+ *   ]
+ * };
+ *
+ * function MyTable({ data }: { data: User[] }) {
+ *   const table = useTableService({ config, data });
+ *   return (
+ *     <table>
+ *       <tbody>
+ *         {table.rows.map(row => (
+ *           <tr key={row.id}><td>{row.name}</td></tr>
+ *         ))}
+ *       </tbody>
+ *     </table>
+ *   );
+ * }
+ * ```
+ */
+export declare function useTableService<T extends Record<string, any>>(options: UseTableServiceOptions<T>): UseTableServiceReturn<T>;
+//# sourceMappingURL=useTableService.d.ts.map

package/dist/react/src/table-builder/useTableService.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableService.d.ts","sourceRoot":"","sources":["../../../../src/table-builder/useTableService.ts"],"names":[],"mappings":"AAEA,OAAO,EAAgB,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAGrE;;GAEG;AACH,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IACnE,iCAAiC;IACjC,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAA;IAE7B,iBAAiB;IACjB,IAAI,EAAE,CAAC,EAAE,CAAA;CACV;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAClE,uCAAuC;IACvC,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,uBAAuB;IACvB,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,6BAA6B;IAC7B,WAAW,EAAE,OAAO,CAAA;IACpB,mBAAmB;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,kBAAkB;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,uBAAuB;IACvB,UAAU,EAAE,MAAM,CAAA;IAClB,oBAAoB;IACpB,WAAW,EAAE,OAAO,CAAA;IACpB,wBAAwB;IACxB,WAAW,EAAE,OAAO,CAAA;IACpB,iBAAiB;IACjB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,qBAAqB;IACrB,aAAa,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI,CAAA;IACpC,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5B,2BAA2B;IAC3B,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,gCAAgC;IAChC,kBAAkB,EAAE,MAAM,IAAI,CAAA;IAC9B,sBAAsB;IACtB,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,eAAe;IACf,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,GAAG,MAAM,KAAK,IAAI,CAAA;IAC3D,kBAAkB;IAClB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,iBAAiB;IACjB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;IAC9C,mBAAmB;IACnB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,wBAAwB;IACxB,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,eAAe;IACf,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,oBAAoB;IACpB,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,gBAAgB;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,oBAAoB;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC3D,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,GACjC,qBAAqB,CAAC,CAAC,CAAC,CA2G1B"}

package/dist/react/src/tabs/ResponsiveTabs.d.ts

@@ -0,0 +1,50 @@
+import { TabItem } from '../../../core/src/tabs';
+/**
+ * Props for TabsComponent
+ */
+export interface TabsComponentProps {
+    className?: string;
+    tabClassName?: string;
+    activeTabClassName?: string;
+    selectClassName?: string;
+    breakpoint?: number;
+    showBadges?: boolean;
+    icon?: boolean;
+}
+/**
+ * Responsive Tabs component that switches to Select on smaller screens
+ *
+ * Features:
+ * - Tabs on desktop (> breakpoint)
+ * - Select dropdown on mobile (< breakpoint)
+ * - Badge support
+ * - Icon support
+ * - Fully customizable with className props
+ */
+export declare function ResponsiveTabs({ className, tabClassName, activeTabClassName, selectClassName, breakpoint, showBadges, icon, }: TabsComponentProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Tabs List component (desktop view)
+ */
+interface TabsListProps {
+    tabs: TabItem[];
+    activeTabId: string;
+    onTabChange: (tabId: string) => void;
+    className?: string;
+    tabClassName?: string;
+    activeTabClassName?: string;
+    showBadges?: boolean;
+    icon?: boolean;
+}
+declare function TabsList({ tabs, activeTabId, onTabChange, className, tabClassName, activeTabClassName, showBadges, icon, }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Tabs Select component (mobile view)
+ */
+interface TabsSelectProps {
+    tabs: TabItem[];
+    activeTabId: string;
+    onTabChange: (tabId: string) => void;
+    className?: string;
+}
+declare function TabsSelect({ tabs, activeTabId, onTabChange, className, }: TabsSelectProps): import("react/jsx-runtime").JSX.Element;
+export { TabsList, TabsSelect };
+//# sourceMappingURL=ResponsiveTabs.d.ts.map

package/dist/react/src/tabs/ResponsiveTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveTabs.d.ts","sourceRoot":"","sources":["../../../../src/tabs/ResponsiveTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAIlD;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;;;;GASG;AACH,wBAAgB,cAAc,CAAC,EAC7B,SAAc,EACd,YAAiB,EACjB,kBAAuB,EACvB,eAAoB,EACpB,UAAgB,EAChB,UAAiB,EACjB,IAAW,GACZ,EAAE,kBAAkB,kDA2CpB;AAED;;GAEG;AACH,UAAU,aAAa;IACrB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,iBAAS,QAAQ,CAAC,EAChB,IAAI,EACJ,WAAW,EACX,WAAW,EACX,SAAc,EACd,YAAiB,EACjB,kBAAuB,EACvB,UAAiB,EACjB,IAAW,GACZ,EAAE,aAAa,2CAoCf;AAED;;GAEG;AACH,UAAU,eAAe;IACvB,IAAI,EAAE,OAAO,EAAE,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,UAAU,CAAC,EAClB,IAAI,EACJ,WAAW,EACX,WAAW,EACX,SAAc,GACf,EAAE,eAAe,2CAuBjB;AAED,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC"}

package/dist/react/src/tabs/index.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @module @codella/react/tabs
+ *
+ * React hooks and components for tabs service.
+ *
+ * ## Features
+ *
+ * - TabsProvider for state management
+ * - Hooks for accessing tabs service
+ * - Responsive Tabs component (desktop/mobile)
+ * - Auto-switching between tabs and select
+ *
+ * ## Usage
+ *
+ * ```tsx
+ * import { TabsProvider, ResponsiveTabs, useSetActiveTab } from '@codella/react/tabs';
+ *
+ * function MyApp() {
+ *   return (
+ *     <TabsProvider config={{
+ *       tabs: [
+ *         { id: 'overview', label: 'Overview' },
+ *         { id: 'details', label: 'Details' }
+ *       ],
+ *       enableUrlRouting: true
+ *     }}>
+ *       <ResponsiveTabs />
+ *       <MyTabContent />
+ *     </TabsProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @packageDocumentation
+ */
+export { TabsProvider, useActiveTab, useSetActiveTab, useTabChange, useTabs, useTabsContext, useTabsService } from './useTabsHooks';
+export type { TabsProviderProps } from './useTabsHooks';
+export { ResponsiveTabs, TabsList, TabsSelect } from './ResponsiveTabs';
+export type { TabsComponentProps } from './ResponsiveTabs';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/src/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/tabs/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACpI,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACxE,YAAY,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/react/src/tabs/useTabsHooks.d.ts

@@ -0,0 +1,49 @@
+import { TabChangeEvent, TabsConfig, TabsService } from '../../../core/src/tabs';
+import { default as React } from 'react';
+interface TabsContextValue {
+    service: TabsService;
+    activeTabId: string;
+    tabs: ReturnType<TabsService['getTabs']>;
+}
+/**
+ * Props for TabsProvider
+ */
+export interface TabsProviderProps {
+    config: TabsConfig;
+    children: React.ReactNode;
+}
+/**
+ * Tabs provider for React
+ */
+export declare function TabsProvider({ config, children }: TabsProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access tabs service from context
+ */
+export declare function useTabsContext(): TabsContextValue;
+/**
+ * Hook to use tabs service directly
+ */
+export declare function useTabsService(): TabsService;
+/**
+ * Hook to get active tab
+ */
+export declare function useActiveTab(): import('../../../core/src/index.ts').TabItem | undefined;
+/**
+ * Hook to get all tabs
+ */
+export declare function useTabs(): import('../../../core/src/index.ts').TabItem[];
+/**
+ * Hook to listen to tab changes
+ */
+export declare function useTabChange(): TabChangeEvent | null;
+/**
+ * Hook to set active tab
+ */
+export declare function useSetActiveTab(): {
+    setActiveTab: (tabId: string) => void;
+    setActiveTabByIndex: (index: number) => void;
+    nextTab: () => void;
+    previousTab: () => void;
+};
+export {};
+//# sourceMappingURL=useTabsHooks.d.ts.map

package/dist/react/src/tabs/useTabsHooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabsHooks.d.ts","sourceRoot":"","sources":["../../../../src/tabs/useTabsHooks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,UAAU,gBAAgB;IACxB,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,UAAU,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC,CAAC;CAC1C;AAID;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,UAAU,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CA0BnE;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,gBAAgB,CAMjD;AAED;;GAEG;AACH,wBAAgB,cAAc,gBAG7B;AAED;;GAEG;AACH,wBAAgB,YAAY,gDAU3B;AAED;;GAEG;AACH,wBAAgB,OAAO,sCAGtB;AAED;;GAEG;AACH,wBAAgB,YAAY,0BAU3B;AAED;;GAEG;AACH,wBAAgB,eAAe;0BAGL,MAAM;iCACC,MAAM;;;EAItC"}

package/dist/react/src/useFiltersAndSort.d.ts

@@ -0,0 +1,67 @@
+import { FiltersAndSortService } from '../../core/src/index.ts';
+/**
+ * Hook options for useFiltersAndSort
+ */
+export interface UseFiltersAndSortOptions {
+    /** FiltersAndSortService instance */
+    service: FiltersAndSortService;
+}
+/**
+ * Hook return value for useFiltersAndSort
+ */
+export interface UseFiltersAndSortReturn {
+    /** Current filter state */
+    filters: Record<string, any>;
+    /** Current sort field */
+    sortBy: string | null;
+    /** Current sort direction */
+    sortDirection: 'asc' | 'desc';
+    /** Current page */
+    page: number;
+    /** Page size */
+    pageSize: number;
+    /** Set filter */
+    setFilter: (key: string, value: any) => void;
+    /** Clear specific filter */
+    clearFilter: (key: string) => void;
+    /** Clear all filters */
+    clearAllFilters: () => void;
+    /** Set sort */
+    setSort: (field: string, direction: 'asc' | 'desc') => void;
+    /** Toggle sort direction for field */
+    toggleSort: (field: string) => void;
+    /** Set page */
+    setPage: (page: number) => void;
+    /** Set page size */
+    setPageSize: (size: number) => void;
+    /** Go to next page */
+    nextPage: () => void;
+    /** Go to previous page */
+    prevPage: () => void;
+}
+/**
+ * React hook that wraps FiltersAndSortService
+ *
+ * @param options - Hook options including FiltersAndSortService instance
+ * @returns Filters and sort state with control methods
+ *
+ * @example
+ * ```tsx
+ * const service = new FiltersAndSortService({ storageKey: 'my-filters' });
+ *
+ * function MyTable() {
+ *   const filters = useFiltersAndSort({ service });
+ *   return (
+ *     <div>
+ *       <input
+ *         value={filters.filters.name || ''}
+ *         onChange={(e) => filters.setFilter('name', e.target.value)}
+ *       />
+ *       <button onClick={() => filters.clearAllFilters()}>Clear</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useFiltersAndSort(options: UseFiltersAndSortOptions): UseFiltersAndSortReturn;
+//# sourceMappingURL=useFiltersAndSort.d.ts.map

package/dist/react/src/useFiltersAndSort.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFiltersAndSort.d.ts","sourceRoot":"","sources":["../../../src/useFiltersAndSort.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAA2B,MAAM,eAAe,CAAA;AAG9E;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,qCAAqC;IACrC,OAAO,EAAE,qBAAqB,CAAA;CAC/B;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,2BAA2B;IAC3B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5B,yBAAyB;IACzB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,6BAA6B;IAC7B,aAAa,EAAE,KAAK,GAAG,MAAM,CAAA;IAC7B,mBAAmB;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,iBAAiB;IACjB,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;IAC5C,4BAA4B;IAC5B,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,wBAAwB;IACxB,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,eAAe;IACf,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,GAAG,MAAM,KAAK,IAAI,CAAA;IAC3D,sCAAsC;IACtC,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,eAAe;IACf,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,oBAAoB;IACpB,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,sBAAsB;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,0BAA0B;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,iBAAiB,CAC/B,OAAO,EAAE,wBAAwB,GAChC,uBAAuB,CA+DzB"}

package/dist/react/src/useFormBuilder.d.ts

@@ -0,0 +1,70 @@
+import { FormBuilder } from '../../core/src/index.ts';
+/**
+ * Hook options for useFormBuilder
+ */
+export interface UseFormBuilderOptions<T extends Record<string, any>> {
+    /** FormBuilder instance */
+    builder: FormBuilder<T>;
+}
+/**
+ * Hook return value for useFormBuilder
+ */
+export interface UseFormBuilderReturn<T extends Record<string, any>> {
+    /** Current form values */
+    values: T;
+    /** Form validation errors */
+    errors: Record<string, string | undefined>;
+    /** Form touched fields */
+    touched: Record<string, boolean>;
+    /** Current form step (for multi-step forms) */
+    currentStep: number;
+    /** Total form steps */
+    totalSteps: number;
+    /** Is form currently submitting */
+    isSubmitting: boolean;
+    /** Is form valid */
+    isValid: boolean;
+    /** Set field value */
+    setFieldValue: (field: keyof T, value: any) => Promise<void>;
+    /** Set field touched */
+    setFieldTouched: (field: keyof T, touched: boolean) => void;
+    /** Validate entire form */
+    validate: () => Promise<Record<string, string | undefined>>;
+    /** Submit form */
+    submit: () => Promise<T | null>;
+    /** Reset form to initial values */
+    reset: () => void;
+    /** Go to next step */
+    nextStep: () => void;
+    /** Go to previous step */
+    prevStep: () => void;
+}
+/**
+ * React hook that wraps FormBuilder and provides form state management
+ *
+ * @param options - Hook options including FormBuilder instance
+ * @returns Form state and methods
+ *
+ * @example
+ * ```tsx
+ * const builder = new FormBuilder<{ name: string }>()
+ *   .addField({ name: 'name', type: 'text', label: 'Name' })
+ *   .build();
+ *
+ * function MyForm() {
+ *   const form = useFormBuilder({ builder });
+ *   return (
+ *     <form onSubmit={(e) => { e.preventDefault(); form.submit(); }}>
+ *       <input
+ *         value={form.values.name}
+ *         onChange={(e) => form.setFieldValue('name', e.target.value)}
+ *       />
+ *       {form.errors.name && <span>{form.errors.name}</span>}
+ *       <button type="submit">Submit</button>
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+export declare function useFormBuilder<T extends Record<string, any>>(options: UseFormBuilderOptions<T>): UseFormBuilderReturn<T>;
+//# sourceMappingURL=useFormBuilder.d.ts.map

package/dist/react/src/useFormBuilder.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFormBuilder.d.ts","sourceRoot":"","sources":["../../../src/useFormBuilder.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAG3C;;GAEG;AACH,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAClE,2BAA2B;IAC3B,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,CAAA;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IACjE,0BAA0B;IAC1B,MAAM,EAAE,CAAC,CAAA;IACT,6BAA6B;IAC7B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAA;IAC1C,0BAA0B;IAC1B,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAChC,+CAA+C;IAC/C,WAAW,EAAE,MAAM,CAAA;IACnB,uBAAuB;IACvB,UAAU,EAAE,MAAM,CAAA;IAClB,mCAAmC;IACnC,YAAY,EAAE,OAAO,CAAA;IACrB,oBAAoB;IACpB,OAAO,EAAE,OAAO,CAAA;IAChB,sBAAsB;IACtB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;IAC5D,wBAAwB;IACxB,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3D,2BAA2B;IAC3B,QAAQ,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC,CAAA;IAC3D,kBAAkB;IAClB,MAAM,EAAE,MAAM,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,CAAA;IAC/B,mCAAmC;IACnC,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,sBAAsB;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,0BAA0B;IAC1B,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC1D,OAAO,EAAE,qBAAqB,CAAC,CAAC,CAAC,GAChC,oBAAoB,CAAC,CAAC,CAAC,CA4DzB"}

package/dist/react/src/useTableService.d.ts

@@ -0,0 +1,93 @@
+import { TableBuilderConfig } from '../../core/src/index.ts';
+/**
+ * Hook options for useTableService
+ */
+export interface UseTableServiceOptions<T extends Record<string, any>> {
+    /** TableBuilder configuration */
+    config: TableBuilderConfig<T>;
+    /** Table data */
+    data: T[];
+}
+/**
+ * Hook return value for useTableService
+ */
+export interface UseTableServiceReturn<T extends Record<string, any>> {
+    /** Filtered and paginated data rows */
+    rows: T[];
+    /** Selected row IDs */
+    selectedRows: string[];
+    /** All rows selected flag */
+    allSelected: boolean;
+    /** Current page */
+    currentPage: number;
+    /** Page size */
+    pageSize: number;
+    /** Total pages */
+    totalPages: number;
+    /** Total item count */
+    totalItems: number;
+    /** Has next page */
+    hasNextPage: boolean;
+    /** Has previous page */
+    hasPrevPage: boolean;
+    /** Sort field */
+    sortBy: string | null;
+    /** Sort direction */
+    sortDirection: 'asc' | 'desc' | null;
+    /** Active filters */
+    filters: Record<string, any>;
+    /** Toggle row selection */
+    toggleRowSelection: (rowId: string) => void;
+    /** Toggle all rows selection */
+    toggleAllSelection: () => void;
+    /** Clear selection */
+    clearSelection: () => void;
+    /** Set sort */
+    setSort: (field: string, direction: 'asc' | 'desc') => void;
+    /** Toggle sort */
+    toggleSort: (field: string) => void;
+    /** Set filter */
+    setFilter: (field: string, value: any) => void;
+    /** Clear filter */
+    clearFilter: (field: string) => void;
+    /** Clear all filters */
+    clearAllFilters: () => void;
+    /** Set page */
+    setPage: (page: number) => void;
+    /** Set page size */
+    setPageSize: (size: number) => void;
+    /** Next page */
+    nextPage: () => void;
+    /** Previous page */
+    prevPage: () => void;
+}
+/**
+ * React hook that wraps TableBuilder for table state management
+ *
+ * @param options - Hook options including config and data
+ * @returns Table state and control methods
+ *
+ * @example
+ * ```tsx
+ * const config: TableBuilderConfig<User> = {
+ *   columns: [
+ *     { field: 'name', header: 'Name', sortable: true }
+ *   ]
+ * };
+ *
+ * function MyTable({ data }: { data: User[] }) {
+ *   const table = useTableService({ config, data });
+ *   return (
+ *     <table>
+ *       <tbody>
+ *         {table.rows.map(row => (
+ *           <tr key={row.id}><td>{row.name}</td></tr>
+ *         ))}
+ *       </tbody>
+ *     </table>
+ *   );
+ * }
+ * ```
+ */
+export declare function useTableService<T extends Record<string, any>>(options: UseTableServiceOptions<T>): UseTableServiceReturn<T>;
+//# sourceMappingURL=useTableService.d.ts.map

package/dist/react/src/useTableService.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableService.d.ts","sourceRoot":"","sources":["../../../src/useTableService.ts"],"names":[],"mappings":"AAEA,OAAO,EAAgB,KAAK,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAGrE;;GAEG;AACH,MAAM,WAAW,sBAAsB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IACnE,iCAAiC;IACjC,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAA;IAE7B,iBAAiB;IACjB,IAAI,EAAE,CAAC,EAAE,CAAA;CACV;AAED;;GAEG;AACH,MAAM,WAAW,qBAAqB,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;IAClE,uCAAuC;IACvC,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,uBAAuB;IACvB,YAAY,EAAE,MAAM,EAAE,CAAA;IACtB,6BAA6B;IAC7B,WAAW,EAAE,OAAO,CAAA;IACpB,mBAAmB;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,kBAAkB;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,uBAAuB;IACvB,UAAU,EAAE,MAAM,CAAA;IAClB,oBAAoB;IACpB,WAAW,EAAE,OAAO,CAAA;IACpB,wBAAwB;IACxB,WAAW,EAAE,OAAO,CAAA;IACpB,iBAAiB;IACjB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,qBAAqB;IACrB,aAAa,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI,CAAA;IACpC,qBAAqB;IACrB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5B,2BAA2B;IAC3B,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,gCAAgC;IAChC,kBAAkB,EAAE,MAAM,IAAI,CAAA;IAC9B,sBAAsB;IACtB,cAAc,EAAE,MAAM,IAAI,CAAA;IAC1B,eAAe;IACf,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,GAAG,MAAM,KAAK,IAAI,CAAA;IAC3D,kBAAkB;IAClB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,iBAAiB;IACjB,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;IAC9C,mBAAmB;IACnB,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,wBAAwB;IACxB,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,eAAe;IACf,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,oBAAoB;IACpB,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,gBAAgB;IAChB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,oBAAoB;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC3D,OAAO,EAAE,sBAAsB,CAAC,CAAC,CAAC,GACjC,qBAAqB,CAAC,CAAC,CAAC,CA2G1B"}

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@codella-software/react",
+  "version": "2.0.0",
+  "description": "React hooks for Codella core services",
+  "keywords": [
+    "form-builder",
+    "table-builder",
+    "filters",
+    "react",
+    "hooks",
+    "typescript"
+  ],
+  "homepage": "https://github.com/CodellaSoftware/codella-utils#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CodellaSoftware/codella-utils.git",
+    "directory": "packages/react"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly",
+    "dev": "vite build --watch",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "lint": "eslint src --ext .ts,.tsx",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@codella/core": "file:../core"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "rxjs": "^7.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "clsx": "^2.1.0",
+    "date-fns": "^3.0.0",
+    "happy-dom": "^15.11.0",
+    "react": "^18.3.0",
+    "react-day-picker": "^8.10.0",
+    "rxjs": "^7.8.0",
+    "tailwind-merge": "^2.5.0",
+    "typescript": "^5.6.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^3.0.0"
+  },
+  "module": "./dist/index.js",
+  "sideEffects": false
+}