@uxuissk/design-system 0.5.0 → 0.7.0

package/dist/types/index.d.ts

@@ -48,6 +48,79 @@ export declare interface AccordionProps {
 
 export declare type AccordionType = "single" | "multiple";
 
+export declare interface AdvancedColumn<T = Record<string, any>> {
+    /** Unique column key — matches field name in data row */
+    key: string;
+    /** Column header label */
+    header: string;
+    /** Enable server-side sort click */
+    sortable?: boolean;
+    /** Fixed pixel or CSS width */
+    width?: number | string;
+    /** Minimum width in px (default 80) */
+    minWidth?: number;
+    /** Text alignment */
+    align?: "left" | "center" | "right";
+    /** Stick to left edge (frozen column) */
+    frozen?: boolean;
+    /** Allow hiding via column toggle. Default true */
+    hideable?: boolean;
+    /** Start hidden */
+    defaultHidden?: boolean;
+    /** Custom cell renderer */
+    render?: (value: any, row: T, index: number) => default_2.ReactNode;
+}
+
+export declare function AdvancedDataTable<T extends Record<string, any>>({ columns, data, rowKey, pagination, sortBy, sortOrder, onPageChange, onSortChange, selectable, selectedRows: controlledSelected, onSelectionChange, bulkActions, onRowClick, expandedRowRender, loading, loadingRows, error, emptyMessage, emptyDescription, showColumnToggle, size, stickyHeader, className, }: AdvancedDataTableProps<T>): JSX.Element;
+
+export declare interface AdvancedDataTableProps<T = Record<string, any>> {
+    /** Column definitions */
+    columns: AdvancedColumn<T>[];
+    /** Row data */
+    data: T[];
+    /** Field to use as unique row key (default: "id") */
+    rowKey?: string;
+    /** Server pagination metadata */
+    pagination?: PaginationMeta;
+    /** Currently sorted column key */
+    sortBy?: string;
+    /** Current sort direction */
+    sortOrder?: SortOrder;
+    /** Called when user changes page or page size */
+    onPageChange?: (page: number, pageSize: number) => void;
+    /** Called when user clicks a sortable column */
+    onSortChange?: (sortBy: string, sortOrder: SortOrder) => void;
+    /** Enable row checkboxes */
+    selectable?: boolean;
+    /** Controlled selection (set of rowKey values) */
+    selectedRows?: Set<string | number>;
+    /** Called when selection changes */
+    onSelectionChange?: (selected: Set<string | number>, rows: T[]) => void;
+    /** Actions shown in bulk action bar when rows are selected */
+    bulkActions?: BulkAction[];
+    /** Called when a row is clicked */
+    onRowClick?: (row: T) => void;
+    /** Render function for expanded row content */
+    expandedRowRender?: (row: T) => default_2.ReactNode;
+    /** Show skeleton loading rows */
+    loading?: boolean;
+    /** Number of skeleton rows to show while loading */
+    loadingRows?: number;
+    /** Error message — renders error state instead of table body */
+    error?: string;
+    /** Custom empty state message */
+    emptyMessage?: string;
+    /** Custom empty state description */
+    emptyDescription?: string;
+    /** Show column visibility toggle button */
+    showColumnToggle?: boolean;
+    size?: AdvancedTableSize;
+    stickyHeader?: boolean;
+    className?: string;
+}
+
+export declare type AdvancedTableSize = "sm" | "md" | "lg";
+
 export declare function Alert({ variant, title, children, dismissible, onDismiss, action, icon, className }: AlertProps): JSX.Element | null;
 
 declare interface AlertProps {
@@ -144,6 +217,13 @@ export declare type BreadcrumbSeparator = "chevron" | "slash" | "dot";
 
 export declare type BreadcrumbSize = "sm" | "md" | "lg";
 
+export declare interface BulkAction {
+    label: string;
+    icon?: default_2.ReactNode;
+    variant?: "default" | "destructive";
+    onClick: (selectedKeys: Array<string | number>) => void;
+}
+
 export declare function ButtonGroup({ children, className, }: {
     children: default_2.ReactNode;
     className?: string;
@@ -523,6 +603,46 @@ export declare interface FileUploadProps {
 
 export declare type FileUploadVariant = "dropzone" | "button" | "avatar";
 
+export declare function FilterBar({ filters, searchPlaceholder, showSearch, value, onFilterChange, className, }: FilterBarProps): JSX.Element;
+
+export declare interface FilterBarProps {
+    /** Filter definitions */
+    filters?: FilterConfig[];
+    /** Search placeholder */
+    searchPlaceholder?: string;
+    /** Show search field */
+    showSearch?: boolean;
+    /** Controlled value */
+    value?: FilterBarValue;
+    /** Callback when any filter/search changes */
+    onFilterChange?: (value: FilterBarValue) => void;
+    /** Additional className */
+    className?: string;
+}
+
+export declare interface FilterBarValue {
+    search?: string;
+    filters: Record<string, FilterValue>;
+}
+
+export declare interface FilterConfig {
+    /** Unique key for this filter */
+    key: string;
+    /** Display label for the filter button */
+    label: string;
+    /** single = one value at a time, multi = multiple values */
+    type: "single" | "multi";
+    /** Available options */
+    options: FilterOption[];
+}
+
+export declare interface FilterOption {
+    label: string;
+    value: string;
+}
+
+export declare type FilterValue = string | string[] | [Date | null, Date | null] | null;
+
 export declare function FormError({ message, className }: FormErrorProps): JSX.Element | null;
 
 export declare interface FormErrorProps {
@@ -530,13 +650,15 @@ export declare interface FormErrorProps {
     className?: string;
 }
 
-export declare function FormField({ name, label, required, error, helperText, children, className, }: FormFieldProps): JSX.Element;
+export declare function FormField({ name, label, required, error, successMessage, helperText, layout, labelWidth, children, className, }: FormFieldProps): JSX.Element;
 
 declare interface FormFieldContextValue {
     name: string;
     error?: string;
 }
 
+export declare type FormFieldLayout = "vertical" | "horizontal";
+
 export declare interface FormFieldProps {
     /** Field name — used for htmlFor on label */
     name: string;
@@ -546,8 +668,14 @@ export declare interface FormFieldProps {
     required?: boolean;
     /** Error message to display */
     error?: string;
+    /** Success message to display (overrides helperText when present) */
+    successMessage?: string;
     /** Helper/description text below the field */
     helperText?: string;
+    /** Layout direction: vertical (default) or horizontal (label left, input right) */
+    layout?: FormFieldLayout;
+    /** Label width when layout="horizontal" (default: "160px") */
+    labelWidth?: string;
     /** Field content (input, select, etc.) */
     children: default_2.ReactNode;
     /** Additional className */
@@ -570,6 +698,13 @@ export declare interface FormLabelProps {
     className?: string;
 }
 
+export declare function FormSuccess({ message, className }: FormSuccessProps): JSX.Element | null;
+
+export declare interface FormSuccessProps {
+    message?: string;
+    className?: string;
+}
+
 export declare const IconButton: default_2.ForwardRefExoticComponent<IconButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
 
 export declare interface IconButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -740,8 +875,33 @@ export declare interface OTPInputProps {
 
 export declare type OTPInputSize = "sm" | "md" | "lg";
 
+export declare function PageHeader({ title, subtitle, breadcrumb, actions, tabs, sticky, className, }: PageHeaderProps): JSX.Element;
+
+export declare interface PageHeaderProps {
+    /** Main page title (required) */
+    title: string;
+    /** Optional subtitle below the title */
+    subtitle?: string;
+    /** Breadcrumb content — pass a <Breadcrumb /> component */
+    breadcrumb?: default_2.ReactNode;
+    /** Action buttons — right-aligned (pass DSButton components) */
+    actions?: default_2.ReactNode;
+    /** Tab navigation below the header — pass a <Tabs /> component */
+    tabs?: default_2.ReactNode;
+    /** Stick to top of viewport while scrolling */
+    sticky?: boolean;
+    /** Additional className */
+    className?: string;
+}
+
 export declare function Pagination({ currentPage, totalPages, onPageChange, siblingCount, showFirstLast, showPrevNext, showPageSize, pageSizeOptions, pageSize, onPageSizeChange, totalItems, size, variant, disabled, showPageInfo, showItemsInfo, prevLabel, nextLabel, }: PaginationProps): JSX.Element;
 
+export declare interface PaginationMeta {
+    page: number;
+    pageSize: number;
+    totalCount: number;
+}
+
 export declare interface PaginationProps {
     /** Current active page (1-indexed) */
     currentPage: number;
@@ -960,6 +1120,8 @@ export declare function SkeletonTable(): JSX.Element;
 
 export declare type SkeletonVariant = "text" | "rectangular" | "circular" | "rounded";
 
+export declare type SortOrder = "asc" | "desc";
+
 export declare function Spinner({ size, color, className }: SpinnerProps): JSX.Element;
 
 export declare namespace Spinner {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uxuissk/design-system",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "private": false,
   "type": "module",
   "main": "./dist/sellsuki-ds.umd.cjs",