@syuttechnologies/layout 1.0.2 → 1.0.21

package/dist/components/ui/SyutGrid/SyutGrid.js

@@ -0,0 +1,306 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useCallback, useEffect } from 'react';
+import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, flexRender, } from '@tanstack/react-table';
+import IconSystem from '../../../icon-collection/icon-systems';
+import { ActionMenu } from '../ActionMenu';
+if (typeof document !== 'undefined') {
+    const styleId = 'syut-grid-styles';
+    if (!document.getElementById(styleId)) {
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      .syut-grid-component { display: flex; flex-direction: column; height: 100%; font-family: inherit; }
+      .syut-grid-wrapper { flex: 1; overflow: auto; min-height: 0; border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px 8px 0 0; }
+      .syut-grid { width: 100%; border-collapse: collapse; font-size: 0.875rem; background: var(--bg-primary, #ffffff); }
+      .syut-grid thead { position: sticky; top: 0; z-index: 3; }
+      .syut-grid th { padding: 0.75rem 1rem; text-align: left; font-weight: 600; color: var(--text-primary, #1e293b); background: var(--bg-secondary, #f8fafc); border-bottom: 2px solid var(--border-color, #e2e8f0); white-space: nowrap; user-select: none; }
+      .syut-grid th.frozen-column { background: var(--bg-secondary, #f8fafc); box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1); z-index: 4; }
+      .syut-grid td { padding: 0.625rem 1rem; color: var(--text-primary, #1e293b); border-bottom: 1px solid var(--border-color, #e2e8f0); background: var(--bg-primary, #ffffff); }
+      .syut-grid td.frozen-column { background: var(--bg-primary, #ffffff); box-shadow: -2px 0 4px rgba(0, 0, 0, 0.1); z-index: 1; }
+      .syut-grid tbody tr:hover td { background: var(--bg-secondary, #f8fafc); }
+      .syut-grid tbody tr:hover td.frozen-column { background: var(--bg-secondary, #f8fafc); }
+      .syut-grid th.action-column, .syut-grid td.action-column { text-align: center; width: 80px; }
+      .syut-grid .row-select, .syut-grid .row-select-all { width: 16px; height: 16px; cursor: pointer; accent-color: var(--primary, #3b82f6); }
+      .syut-grid-component .pagination-footer { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: var(--bg-secondary, #f8fafc); border: 1px solid var(--border-color, #e2e8f0); border-top: none; border-radius: 0 0 8px 8px; flex-shrink: 0; gap: 0.5rem; flex-wrap: wrap; }
+      .syut-grid-component .pagination-info { font-size: 0.85rem; color: var(--text-muted, #64748b); white-space: nowrap; }
+      .syut-grid-component .pagination-controls { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
+      .syut-grid-component .pagination-controls select { padding: 0.375rem 0.5rem; border-radius: 0.375rem; border: 1px solid var(--border-color, #e2e8f0); font-size: 0.85rem; background: var(--bg-primary, #ffffff); color: var(--text-primary, #1e293b); cursor: pointer; }
+      .syut-grid-component .page-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.375rem 0.5rem; border: 1px solid var(--border-color, #e2e8f0); border-radius: 0.375rem; background: var(--bg-primary, #ffffff); color: var(--text-primary, #1e293b); cursor: pointer; transition: all 0.15s ease; }
+      .syut-grid-component .page-btn:hover:not(:disabled) { background: var(--bg-secondary, #f8fafc); border-color: var(--primary, #3b82f6); color: var(--primary, #3b82f6); }
+      .syut-grid-component .page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
+      .syut-grid-component .page-info { padding: 0 0.75rem; font-size: 0.85rem; white-space: nowrap; }
+      .syut-grid-component .page-nav-buttons { display: flex; align-items: center; gap: 0.25rem; }
+
+      /* Mobile responsive styles for pagination footer */
+      @media (max-width: 768px) {
+        .syut-grid-component .pagination-footer {
+          flex-direction: column;
+          align-items: stretch;
+          padding: 0.625rem 0.75rem;
+          gap: 0.625rem;
+        }
+        .syut-grid-component .pagination-info {
+          text-align: center;
+          font-size: 0.8rem;
+        }
+        .syut-grid-component .pagination-controls {
+          justify-content: center;
+          gap: 0.375rem;
+        }
+        .syut-grid-component .pagination-controls select {
+          padding: 0.3rem 0.4rem;
+          font-size: 0.8rem;
+          margin-right: 0.5rem;
+        }
+        .syut-grid-component .page-btn {
+          padding: 0.3rem 0.4rem;
+        }
+        .syut-grid-component .page-info {
+          font-size: 0.8rem;
+          padding: 0 0.5rem;
+        }
+      }
+
+      @media (max-width: 480px) {
+        .syut-grid-component .pagination-footer {
+          padding: 0.5rem;
+          gap: 0.5rem;
+        }
+        .syut-grid-component .pagination-info {
+          font-size: 0.75rem;
+        }
+        .syut-grid-component .pagination-controls {
+          flex-wrap: wrap;
+          justify-content: center;
+        }
+        .syut-grid-component .pagination-controls select {
+          font-size: 0.75rem;
+          margin-right: 0;
+          margin-bottom: 0.25rem;
+        }
+        .syut-grid-component .page-info {
+          font-size: 0.75rem;
+          padding: 0 0.25rem;
+          order: -1;
+          width: 100%;
+          text-align: center;
+          margin-bottom: 0.25rem;
+        }
+        .syut-grid-component .page-nav-buttons {
+          width: 100%;
+          justify-content: center;
+        }
+      }
+    `;
+        document.head.appendChild(style);
+    }
+}
+function ColumnFilter({ column, placeholder }) {
+    const columnFilterValue = column.getFilterValue();
+    return (_jsx("input", { type: "text", value: columnFilterValue ?? '', onChange: (e) => column.setFilterValue(e.target.value), placeholder: placeholder || 'Filter...', onClick: (e) => e.stopPropagation(), style: { width: '100%', padding: '0.25rem 0.5rem', fontSize: '0.75rem', border: '1px solid var(--border-color)', borderRadius: '0.25rem', marginTop: '0.375rem', background: 'var(--bg-primary)' } }));
+}
+export function SyutGrid({ data: dataProp, columns, enableRowSelection: enableRowSelectionProp = false, enablePagination: enablePaginationProp, pageSizeOptions: pageSizeOptionsProp = [10, 25, 50, 100], defaultPageSize: defaultPageSizeProp = 10, enableSorting = true, enableColumnFilters = false, rowActions, emptyMessage: emptyMessageProp = 'No data found', onSelectionChange, isLoading: isLoadingProp = false, className = '', frozenLeftColumns = [], frozenRightColumns = [], visibleColumns, selectable, selectedRows: selectedRowsProp, pagination: paginationConfig, 
+// Legacy props
+dataSource, rowSelection: rowSelectionConfig, loading, emptyText, }) {
+    // Handle legacy props
+    const data = dataProp || dataSource || [];
+    const isLoading = loading ?? isLoadingProp;
+    const emptyMessage = emptyText || emptyMessageProp;
+    const enableRowSelection = selectable ?? (rowSelectionConfig !== undefined ? true : enableRowSelectionProp);
+    const enablePagination = paginationConfig?.enabled ?? enablePaginationProp ?? true;
+    const pageSizeOptions = paginationConfig?.pageSizeOptions ?? pageSizeOptionsProp;
+    const defaultPageSize = paginationConfig?.pageSize ?? defaultPageSizeProp;
+    // Get initial selected rows from either new or legacy prop
+    const initialSelectedRows = selectedRowsProp || rowSelectionConfig?.selectedRowKeys || [];
+    const [sorting, setSorting] = useState([]);
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [rowSelection, setRowSelection] = useState(() => {
+        if (initialSelectedRows.length > 0) {
+            const selection = {};
+            initialSelectedRows.forEach(id => { selection[id] = true; });
+            return selection;
+        }
+        return {};
+    });
+    const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: defaultPageSize });
+    useEffect(() => {
+        const selectedRows = selectedRowsProp || rowSelectionConfig?.selectedRowKeys;
+        if (selectedRows) {
+            const selection = {};
+            selectedRows.forEach(id => { selection[id] = true; });
+            setRowSelection(selection);
+        }
+    }, [selectedRowsProp, rowSelectionConfig?.selectedRowKeys]);
+    const normalizedColumns = useMemo(() => {
+        return columns.map(col => ({
+            ...col,
+            id: col.id || col.key || '',
+            header: col.header || col.title || '',
+            // Use accessorKey, or dataIndex, or key as the accessor for getting cell values
+            accessorKey: col.accessorKey || col.dataIndex || col.key,
+            size: col.size || col.width,
+            enableSorting: col.enableSorting ?? col.sortable ?? true,
+        }));
+    }, [columns]);
+    const columnVisibility = useMemo(() => {
+        const legacyVisibility = {};
+        normalizedColumns.forEach(col => {
+            if (col.visible !== undefined)
+                legacyVisibility[col.id] = col.visible;
+        });
+        if (Object.keys(legacyVisibility).length > 0)
+            return legacyVisibility;
+        if (!visibleColumns)
+            return {};
+        const visibility = {};
+        const allColumnIds = [...(enableRowSelection ? ['select'] : []), ...normalizedColumns.map(col => col.id), ...(rowActions ? ['actions'] : [])];
+        allColumnIds.forEach(colId => { visibility[colId] = visibleColumns.includes(colId); });
+        return visibility;
+    }, [visibleColumns, normalizedColumns, enableRowSelection, rowActions]);
+    const frozenColumnMap = useMemo(() => {
+        const map = {};
+        const getColumnWidth = (colId) => {
+            if (colId === 'select')
+                return 50;
+            if (colId === 'actions')
+                return 80;
+            const col = normalizedColumns.find(c => c.id === colId);
+            return col?.size || 150;
+        };
+        let leftOffset = 0;
+        frozenLeftColumns.forEach((colId) => { map[colId] = { frozen: 'left', leftOffset, rightOffset: 0 }; leftOffset += getColumnWidth(colId); });
+        let rightOffset = 0;
+        [...frozenRightColumns].reverse().forEach((colId) => { map[colId] = { frozen: 'right', leftOffset: 0, rightOffset }; rightOffset += getColumnWidth(colId); });
+        return map;
+    }, [normalizedColumns, frozenLeftColumns, frozenRightColumns]);
+    const getStickyStyles = useCallback((columnId) => {
+        const frozenInfo = frozenColumnMap[columnId];
+        if (!frozenInfo || !frozenInfo.frozen)
+            return {};
+        return { position: 'sticky', [frozenInfo.frozen]: frozenInfo.frozen === 'left' ? frozenInfo.leftOffset : frozenInfo.rightOffset, zIndex: 1 };
+    }, [frozenColumnMap]);
+    const tableColumns = useMemo(() => {
+        const cols = [];
+        if (enableRowSelection) {
+            cols.push({
+                id: 'select',
+                header: ({ table }) => (_jsx("input", { type: "checkbox", className: "row-select-all", checked: table.getIsAllRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler() })),
+                cell: ({ row }) => (_jsx("input", { type: "checkbox", className: "row-select", checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler() })),
+                size: 50,
+                enableColumnFilter: false,
+            });
+        }
+        normalizedColumns.forEach((col) => {
+            const canFilter = enableColumnFilters && col.enableFiltering !== false;
+            let cellRenderer;
+            if (col.cell) {
+                cellRenderer = (info) => col.cell({ row: info.row, getValue: info.getValue });
+            }
+            else if (col.render) {
+                // Support both render signatures:
+                // 1. render(value, row) - value first, row second (when column has accessor)
+                // 2. render(row) - just the row object (when column has no accessor)
+                // We detect based on whether there's an accessor key defined
+                const hasAccessor = col.accessorKey || col.dataIndex || col.key;
+                cellRenderer = (info) => {
+                    if (hasAccessor) {
+                        // Column has accessor - pass value and row (legacy pattern)
+                        return col.render(info.getValue(), info.row.original);
+                    }
+                    else {
+                        // No accessor - pass just the row object
+                        return col.render(info.row.original);
+                    }
+                };
+            }
+            else {
+                cellRenderer = (info) => info.getValue();
+            }
+            cols.push({
+                id: col.id,
+                accessorKey: col.accessorKey,
+                header: typeof col.header === 'string' ? ({ column }) => {
+                    const headerText = col.header;
+                    const isSortable = enableSorting && col.enableSorting !== false;
+                    return (_jsxs("div", { children: [_jsxs("div", { style: { cursor: isSortable ? 'pointer' : 'default', display: 'flex', alignItems: 'center', gap: '4px' }, onClick: () => isSortable && column.toggleSorting(), children: [_jsx("span", { children: headerText }), isSortable && (_jsx("span", { children: column.getIsSorted() === 'asc' ? (_jsx(IconSystem.chevronUp, { size: 14 })) : column.getIsSorted() === 'desc' ? (_jsx(IconSystem.chevronDown, { size: 14 })) : (_jsx(IconSystem.chevronUp, { size: 14, style: { opacity: 0.3 } })) }))] }), canFilter && (_jsx(ColumnFilter, { column: column, placeholder: `Filter ${headerText}...` }))] }));
+                } : col.header,
+                cell: cellRenderer,
+                size: col.size,
+                enableSorting: enableSorting && col.enableSorting !== false,
+                enableColumnFilter: canFilter,
+            });
+        });
+        if (rowActions) {
+            cols.push({
+                id: 'actions',
+                header: 'Actions',
+                cell: ({ row }) => {
+                    // Handle both patterns: function that returns items, or array of items with row-accepting onClick
+                    let items;
+                    if (typeof rowActions === 'function') {
+                        // Function pattern - items are already processed
+                        items = rowActions(row.original);
+                    }
+                    else {
+                        // Array pattern - need to filter by isVisible and wrap onClick with row
+                        items = rowActions
+                            .filter(item => !item.isVisible || item.isVisible(row.original))
+                            .map(item => ({
+                            id: item.id,
+                            label: item.label,
+                            icon: item.icon,
+                            variant: item.variant,
+                            disabled: item.disabled,
+                            onClick: () => item.onClick(row.original)
+                        }));
+                    }
+                    return _jsx(ActionMenu, { items: items });
+                },
+                size: 80,
+                enableColumnFilter: false
+            });
+        }
+        return cols;
+    }, [normalizedColumns, enableRowSelection, enableSorting, enableColumnFilters, rowActions]);
+    const handleRowSelectionChange = useCallback((updaterOrValue) => {
+        setRowSelection((prev) => {
+            const newSelection = typeof updaterOrValue === 'function' ? updaterOrValue(prev) : updaterOrValue;
+            const selectedIds = Object.keys(newSelection).filter((key) => newSelection[key]);
+            // Call new API callback
+            if (onSelectionChange) {
+                onSelectionChange(selectedIds);
+            }
+            // Call legacy API callback
+            if (rowSelectionConfig?.onChange) {
+                rowSelectionConfig.onChange(selectedIds);
+            }
+            return newSelection;
+        });
+    }, [onSelectionChange, rowSelectionConfig]);
+    const table = useReactTable({
+        data,
+        columns: tableColumns,
+        state: { sorting, columnFilters, rowSelection, pagination, columnVisibility },
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        onRowSelectionChange: handleRowSelectionChange,
+        onPaginationChange: setPagination,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getPaginationRowModel: enablePagination ? getPaginationRowModel() : undefined,
+        enableRowSelection,
+        getRowId: (row) => row.id,
+    });
+    return (_jsxs("div", { className: `syut-grid-component ${className}`, style: { display: 'flex', flexDirection: 'column', height: '100%' }, children: [_jsx("div", { className: "syut-grid-wrapper", style: { flex: 1, overflow: 'auto', minHeight: 0 }, children: _jsxs("table", { className: "syut-grid", children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx("tr", { children: headerGroup.headers.map((header) => {
+                                    const stickyStyles = getStickyStyles(header.id);
+                                    const isFrozen = !!frozenColumnMap[header.id];
+                                    return (_jsx("th", { style: { width: header.getSize() !== 150 ? header.getSize() : undefined, ...stickyStyles, ...(isFrozen && { zIndex: 4 }) }, className: `${header.id === 'actions' ? 'action-column' : ''} ${isFrozen ? 'frozen-column' : ''}`, children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
+                                }) }, headerGroup.id))) }), _jsx("tbody", { children: isLoading ? (_jsx("tr", { children: _jsx("td", { colSpan: table.getAllColumns().length, style: { textAlign: 'center', padding: '2rem', color: 'var(--text-muted)' }, children: "Loading..." }) })) : table.getRowModel().rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: table.getAllColumns().length, style: { textAlign: 'center', padding: '2rem', color: 'var(--text-muted)' }, children: emptyMessage }) })) : (table.getRowModel().rows.map((row) => (_jsx("tr", { children: row.getVisibleCells().map((cell) => {
+                                    const stickyStyles = getStickyStyles(cell.column.id);
+                                    const isFrozen = !!frozenColumnMap[cell.column.id];
+                                    const isActionsColumn = cell.column.id === 'actions';
+                                    return (_jsx("td", { className: `${isActionsColumn ? 'action-column' : ''} ${isFrozen ? 'frozen-column' : ''}`, style: { ...stickyStyles, ...(isActionsColumn && { overflow: 'visible' }) }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                }) }, row.id)))) })] }) }), enablePagination && (_jsxs("div", { className: "pagination-footer", children: [_jsxs("div", { className: "pagination-info", children: ["Showing ", table.getRowModel().rows.length, " of ", table.getFilteredRowModel().rows.length, " items", Object.keys(rowSelection).length > 0 && (_jsxs("span", { style: { marginLeft: '0.5rem', color: 'var(--primary)' }, children: ["(", Object.keys(rowSelection).length, " selected)"] }))] }), _jsxs("div", { className: "pagination-controls", children: [_jsx("select", { value: pagination.pageSize, onChange: (e) => table.setPageSize(Number(e.target.value)), children: pageSizeOptions.map((size) => (_jsxs("option", { value: size, children: [size, " / page"] }, size))) }), _jsxs("div", { className: "page-nav-buttons", children: [_jsxs("button", { className: "page-btn", onClick: () => table.firstPage(), disabled: !table.getCanPreviousPage(), title: "First page", children: [_jsx(IconSystem.chevronLeft, { size: 16 }), _jsx(IconSystem.chevronLeft, { size: 16, style: { marginLeft: '-8px' } })] }), _jsx("button", { className: "page-btn", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), title: "Previous page", children: _jsx(IconSystem.chevronLeft, { size: 16 }) }), _jsxs("span", { className: "page-info", children: ["Page ", table.getState().pagination.pageIndex + 1, " of ", table.getPageCount()] }), _jsx("button", { className: "page-btn", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), title: "Next page", children: _jsx(IconSystem.chevronRight, { size: 16 }) }), _jsxs("button", { className: "page-btn", onClick: () => table.lastPage(), disabled: !table.getCanNextPage(), title: "Last page", children: [_jsx(IconSystem.chevronRight, { size: 16 }), _jsx(IconSystem.chevronRight, { size: 16, style: { marginLeft: '-8px' } })] })] })] })] }))] }));
+}
+export default SyutGrid;

package/dist/components/ui/SyutGrid/index.d.ts

@@ -0,0 +1,3 @@
+export { SyutGrid, type SyutGridProps, type SyutGridColumn } from './SyutGrid';
+export { default } from './SyutGrid';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ui/SyutGrid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/SyutGrid/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,YAAY,CAAC;AAC/E,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/ui/SyutGrid/index.js

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

package/dist/components/ui/SyutSelect/SyutSelectUnified.d.ts

@@ -0,0 +1,128 @@
+import React from 'react';
+export interface SelectOption {
+    value: string;
+    label: string;
+    isDisabled?: boolean;
+    [key: string]: any;
+}
+export interface SyutSelectUnifiedProps {
+    /** Unique identifier for the select */
+    id?: string;
+    /** Name attribute for form handling */
+    name?: string;
+    /** Options to display in the dropdown */
+    options?: SelectOption[];
+    /** Currently selected value(s) - string[] for multi, string for single */
+    value?: string | string[];
+    /** Callback when selection changes */
+    onChange?: (value: any) => void;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the select is disabled */
+    isDisabled?: boolean;
+    /** Whether the select is in loading state */
+    isLoading?: boolean;
+    /** Whether to allow multiple selections */
+    isMulti?: boolean;
+    /** Whether the select is searchable */
+    isSearchable?: boolean;
+    /** Legacy alias for isSearchable */
+    searchable?: boolean;
+    /** Whether the value can be cleared */
+    isClearable?: boolean;
+    /** Whether to allow creating new options */
+    isCreatable?: boolean;
+    /** Callback for creating new options */
+    onCreateOption?: (inputValue: string) => void;
+    /** Format for the create option label */
+    formatCreateLabel?: (inputValue: string) => React.ReactNode;
+    /** Whether to use async loading */
+    isAsync?: boolean;
+    /** Async function to load options */
+    loadOptions?: (inputValue: string, callback: (options: SelectOption[]) => void) => Promise<SelectOption[]> | void;
+    /** Default options to show before search (for async) */
+    defaultOptions?: boolean | SelectOption[];
+    /** Cache loaded options */
+    cacheOptions?: boolean;
+    /** Label for the select (optional) */
+    label?: string;
+    /** Error message to display */
+    error?: string;
+    /** Helper text below the select */
+    helperText?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Additional class name for the container */
+    className?: string;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Auto focus the select */
+    autoFocus?: boolean;
+    /** Menu placement */
+    menuPlacement?: 'auto' | 'top' | 'bottom';
+    /** Maximum height of dropdown menu */
+    maxMenuHeight?: number;
+    /**
+     * Variant style:
+     * - 'default': Uses react-select (tags for multi, dropdown for single)
+     * - 'checkbox': Custom checkbox-style multi-select with search and select all
+     */
+    variant?: 'default' | 'checkbox';
+    /** Show select all option (only for checkbox variant) */
+    showSelectAll?: boolean;
+    /** Label for select all option */
+    selectAllLabel?: string;
+    /** Search placeholder (for checkbox variant) */
+    searchPlaceholder?: string;
+    /** No options message */
+    noOptionsMessage?: string;
+    /** Debounce delay in ms for async search (default: 300) */
+    debounceDelay?: number;
+    /** Minimum characters before triggering async search (default: 1) */
+    minSearchLength?: number;
+    /** Message to show while loading async results */
+    loadingMessage?: string;
+    /** Message to show when search query is too short */
+    minSearchMessage?: string;
+    /** Inline styles for the container */
+    style?: React.CSSProperties;
+}
+/**
+ * SyutSelectUnified - A unified select component with multiple variants
+ *
+ * @example
+ * Single select (default variant):
+ * ```tsx
+ * <SyutSelectUnified
+ *   options={options}
+ *   value={selectedValue}
+ *   onChange={setSelectedValue}
+ * />
+ * ```
+ *
+ * @example
+ * Multi-select with checkbox variant:
+ * ```tsx
+ * <SyutSelectUnified
+ *   isMulti
+ *   variant="checkbox"
+ *   options={options}
+ *   value={selectedValues}
+ *   onChange={setSelectedValues}
+ *   showSelectAll
+ * />
+ * ```
+ *
+ * @example
+ * Creatable select:
+ * ```tsx
+ * <SyutSelectUnified
+ *   isCreatable
+ *   options={options}
+ *   onCreateOption={(value) => addOption(value)}
+ * />
+ * ```
+ */
+export declare function SyutSelectUnified({ id, name, options, value, onChange, placeholder, isDisabled, isLoading, isMulti, isSearchable: isSearchableProp, searchable, isClearable, isCreatable, onCreateOption, formatCreateLabel, isAsync, loadOptions, defaultOptions, cacheOptions, label, error, helperText, required, className, size, autoFocus, menuPlacement, maxMenuHeight, variant, showSelectAll, selectAllLabel, searchPlaceholder, noOptionsMessage, debounceDelay, minSearchLength, loadingMessage, minSearchMessage, style, }: SyutSelectUnifiedProps): import("react/jsx-runtime").JSX.Element;
+export default SyutSelectUnified;
+//# sourceMappingURL=SyutSelectUnified.d.ts.map

package/dist/components/ui/SyutSelect/SyutSelectUnified.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SyutSelectUnified.d.ts","sourceRoot":"","sources":["../../../../src/components/ui/SyutSelect/SyutSelectUnified.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AA8HjF,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB;AAED,MAAM,WAAW,sBAAsB;IACrC,uCAAuC;IACvC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,sCAAsC;IACtC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAChC,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qCAAqC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,wCAAwC;IACxC,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5D,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qCAAqC;IACrC,WAAW,CAAC,EAAE,CACZ,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,KAAK,IAAI,KACxC,OAAO,CAAC,YAAY,EAAE,CAAC,GAAG,IAAI,CAAC;IACpC,wDAAwD;IACxD,cAAc,CAAC,EAAE,OAAO,GAAG,YAAY,EAAE,CAAC;IAC1C,2BAA2B;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qBAAqB;IACrB,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAC;IAC1C,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,yDAAyD;IACzD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kCAAkC;IAClC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,yBAAyB;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2DAA2D;IAC3D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qEAAqE;IACrE,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,qDAAqD;IACrD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sCAAsC;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAgsBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,IAAI,EACJ,OAAY,EACZ,KAAK,EACL,QAAQ,EACR,WAAyB,EACzB,UAAkB,EAClB,SAAiB,EACjB,OAAe,EACf,YAAY,EAAE,gBAAwB,EACtC,UAAU,EACV,WAAkB,EAClB,WAAmB,EACnB,cAAc,EACd,iBAA4D,EAC5D,OAAe,EACf,WAAW,EACX,cAAqB,EACrB,YAAmB,EACnB,KAAK,EACL,KAAK,EACL,UAAU,EACV,QAAgB,EAChB,SAAc,EACd,IAAW,EACX,SAAiB,EACjB,aAAsB,EACtB,aAAmB,EACnB,OAAmB,EACnB,aAAoB,EACpB,cAA6B,EAC7B,iBAA+B,EAC/B,gBAAqC,EACrC,aAAmB,EACnB,eAAmB,EACnB,cAA6B,EAC7B,gBAAsC,EACtC,KAAK,GACN,EAAE,sBAAsB,2CAoHxB;AAED,eAAe,iBAAiB,CAAC"}