@pk-design/react-tailwind 1.5.4 → 1.7.0

package/dist/types/components/CheckboxGroup/CheckboxGroup.types.d.ts

@@ -1,4 +1,5 @@
 import type { ChangeEvent, ReactNode } from 'react';
+import type { CheckboxSize, CheckboxVariant } from '../Checkbox/Checkbox.types';
 export type CheckboxGroupItem<T = any> = {
     /**
      * Checkbox item label
@@ -8,6 +9,14 @@ export type CheckboxGroupItem<T = any> = {
      * Checkbox item value
      */
     value: T;
+    /**
+     * Optional subtext description beneath label
+     */
+    description?: ReactNode;
+    /**
+     * Whether this individual option is disabled
+     */
+    disabled?: boolean;
 };
 export interface CheckboxGroupProps<T = any> {
     /**
@@ -15,9 +24,13 @@ export interface CheckboxGroupProps<T = any> {
      */
     name?: string;
     /**
-     * Currently selected values
+     * Currently selected values (Controlled Mode).
      */
     value?: T[];
+    /**
+     * Default selected values (Uncontrolled Mode).
+     */
+    defaultValue?: T[];
     /**
      * Label displayed above the group
      */
@@ -52,4 +65,43 @@ export interface CheckboxGroupProps<T = any> {
      * Whether to arrange checkboxes inline
      */
     inline?: boolean;
+    /**
+     * Multi-column grid layout (1, 2, 3, or 4 columns).
+     * Takes precedence over `inline`.
+     */
+    columns?: 1 | 2 | 3 | 4;
+    /**
+     * Size scale passed to all checkboxes in the group.
+     * Defaults to `"md"`.
+     */
+    size?: CheckboxSize;
+    /**
+     * Visual variant passed to all checkboxes in the group.
+     * - `default` — standard inline checkboxes
+     * - `card` — enclosed interactive card containers
+     * Defaults to `"default"`.
+     */
+    variant?: CheckboxVariant;
+    /**
+     * Automatically renders a "Select All" parent checkbox header with indeterminate state!
+     * Defaults to `false`.
+     */
+    showSelectAll?: boolean;
+    /**
+     * Label for the "Select All" checkbox.
+     * Defaults to `"Select All"`.
+     */
+    selectAllLabel?: string;
+    /**
+     * Group-level error message.
+     */
+    error?: string | ReactNode;
+    /**
+     * Group-level helper text.
+     */
+    helperText?: ReactNode;
+    /**
+     * Disable all checkboxes in the group.
+     */
+    disabled?: boolean;
 }

package/dist/types/components/DataList/DataList.d.ts

@@ -0,0 +1,5 @@
+import type { DataListProps } from './DataList.types';
+export declare function DataList<T extends Record<string, any> = Record<string, any>>({ items, columns, renderItem, searchable, searchQuery: externalSearchQuery, onSearchChange, searchFields, filterFields, selectedFilters: externalFilters, onFilterChange, sorting: externalSorting, onSortChange, swipeableActions, rowKey, selectable, selectedKeys, onSelectionChange, onItemClick, loading, emptyMessage, pagination, setPagination, containerClass, itemClass, }: DataListProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace DataList {
+    var displayName: string;
+}

package/dist/types/components/DataList/DataList.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/DataList/DataList.types.d.ts

@@ -0,0 +1,81 @@
+import type { ReactNode } from 'react';
+import type { TPagination } from '../Pagination';
+import type { SwipeableAction } from '../SwipeableRow';
+export type DataListSortDirection = 'asc' | 'desc' | '1' | '-1';
+export interface DataListColumn<T = any> {
+    /** Unique key or property path */
+    name: string;
+    /** Display label text */
+    label: ReactNode;
+    /** Enables sorting on this field */
+    sortable?: boolean;
+    /** Data type for sorting logic */
+    type?: 'string' | 'number' | 'date';
+    /** Custom renderer for item card */
+    render?: (item: T) => ReactNode;
+}
+export interface DataListFilterOption {
+    label: string;
+    value: string | number;
+}
+export interface DataListFilterField {
+    /** Field name string */
+    name: string;
+    /** Filter display label */
+    label: string;
+    /** Selectable filter options */
+    options: DataListFilterOption[];
+}
+export interface DataListProps<T = any> {
+    /** Array of data items */
+    items: T[];
+    /** Column definitions used for card grid rendering and auto-sorting/filtering */
+    columns?: DataListColumn<T>[];
+    /** Custom item card renderer */
+    renderItem?: (item: T, index: number) => ReactNode;
+    /** Enables top search input */
+    searchable?: boolean;
+    /** Controlled search query */
+    searchQuery?: string;
+    /** Search query change handler */
+    onSearchChange?: (query: string) => void;
+    /** Fields to search across (defaults to string/number column names) */
+    searchFields?: string[];
+    /** Available filter fields */
+    filterFields?: DataListFilterField[];
+    /** Controlled filter values keyed by filter field name (supports string, number, or array of selected values) */
+    selectedFilters?: Record<string, Array<string | number> | string | number>;
+    /** Filter values change handler */
+    onFilterChange?: (filters: Record<string, Array<string | number> | string | number>) => void;
+    /** Controlled sort state, e.g. `{ status: 'asc' }` */
+    sorting?: Record<string, DataListSortDirection>;
+    /** Sort change callback handler */
+    onSortChange?: (sorting: Record<string, DataListSortDirection>) => void;
+    /** Swipe actions callback for card rows */
+    swipeableActions?: (item: T) => {
+        leftActions?: SwipeableAction[];
+        rightActions?: SwipeableAction[];
+    };
+    /** Unique row key field or function */
+    rowKey?: string | ((item: T) => string | number);
+    /** Enables touch selection checkboxes */
+    selectable?: boolean;
+    /** Controlled selected item keys */
+    selectedKeys?: Array<string | number>;
+    /** Selection change callback */
+    onSelectionChange?: (selectedKeys: Array<string | number>, selectedItems: T[]) => void;
+    /** Item click callback */
+    onItemClick?: (item: T, index: number) => void;
+    /** Loading state */
+    loading?: boolean;
+    /** Empty state message */
+    emptyMessage?: ReactNode;
+    /** Pagination config */
+    pagination?: TPagination;
+    /** Pagination setter */
+    setPagination?: (pagination: Partial<TPagination>) => void;
+    /** Outer container class */
+    containerClass?: string;
+    /** Item card wrapper class */
+    itemClass?: string | ((item: T, index: number) => string);
+}

package/dist/types/components/DataList/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DataList';
+export * from './DataList.types';

package/dist/types/components/DataTable/DataTable.d.ts

@@ -1,5 +1,5 @@
 import type { DataTableProps } from './DataTable.types';
-export declare function DataTable<T extends Record<string, any> = Record<string, any>>({ items, columns, sorting, onSort, loading, pagination, setPagination, emptyMessage, containerClass, wrapperClass, tableClass, headClass, footerRow, rowKey, onRowClick, rowClass, density, striped, layout, selectable, selectedRowKeys, defaultSelectedRowKeys, onSelectionChange, isRowSelectable, paginationContainerClass, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<T extends Record<string, any> = Record<string, any>>({ items, columns, sorting, onSort, loading, pagination, setPagination, emptyMessage, containerClass, wrapperClass, tableClass, headClass, footerRow, rowKey, onRowClick, rowClass, density, striped, layout, selectable, selectedRowKeys, defaultSelectedRowKeys, onSelectionChange, isRowSelectable, stickyHeader, stickyPagination, paginationContainerClass, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace DataTable {
     var displayName: string;
 }

package/dist/types/components/DataTable/DataTable.types.d.ts

@@ -72,6 +72,16 @@ export interface DataTableProps<T = any> {
     setPagination?: (pagination: Partial<TPagination>) => void;
     /** Table layout algorithm */
     layout?: 'fixed' | 'auto';
+    /**
+     * Pins the table header to the top when scrolling.
+     * @default true
+     */
+    stickyHeader?: boolean;
+    /**
+     * Pins the pagination footer to the bottom when scrolling.
+     * @default true
+     */
+    stickyPagination?: boolean;
     /**
      * Determines the stable React key for each row.
      * Pass a field name string or a function returning a unique value.

package/dist/types/components/DetailedInformation/DetailedInformation.d.ts

@@ -1,2 +1,2 @@
-import { DetailedInformationProps } from './DetailedInformation.types';
+import type { DetailedInformationProps } from './DetailedInformation.types';
 export declare const DetailedInformation: import("react").ForwardRefExoticComponent<DetailedInformationProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/DetailedInformation/DetailedInformation.types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 export type Detail = {
     /**
      * Label of the information to be displayed
@@ -8,16 +8,36 @@ export type Detail = {
      * Information to be displayed
      */
     value?: ReactNode;
+    /**
+     * Optional icon displayed next to the label
+     */
+    icon?: ReactNode;
     /**
      * Classname of the value content sections
      */
     contentClass?: string;
     /**
-     * Defines if the items should be hidden.
+     * Classname of the label section
+     */
+    labelClass?: string;
+    /**
+     * Enables hover-to-copy button next to the value
+     */
+    copyable?: boolean;
+    /**
+     * Custom tooltip / help text to display next to the label
+     */
+    helpText?: string;
+    /**
+     * Custom fallback value when value is empty or undefined
+     */
+    emptyValue?: ReactNode;
+    /**
+     * Defines if the item should be hidden.
      */
     hidden?: boolean;
 };
-export interface DetailedInformationProps {
+export interface DetailedInformationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     className?: string;
     /**
      * Title for the information section
@@ -27,10 +47,26 @@ export interface DetailedInformationProps {
      * Subtitle for the information section
      */
     subTitle?: ReactNode;
+    /**
+     * Action element rendered at the top-right of the header area
+     */
+    action?: ReactNode;
     /**
      * List of details / information to be displayed
      */
     details: Detail[];
+    /**
+     * Number of grid columns for details layout (1, 2, 3, or 4). Default is 1
+     */
+    columns?: 1 | 2 | 3 | 4;
+    /**
+     * Direction of label vs value. 'horizontal' (side-by-side) or 'vertical' (stacked). Default is 'horizontal'
+     */
+    layout?: 'horizontal' | 'vertical';
+    /**
+     * Visual presentation variant. Default is 'flat'
+     */
+    variant?: 'flat' | 'bordered' | 'card';
     /**
      * Defines if the layout should be compact
      */
@@ -43,6 +79,10 @@ export interface DetailedInformationProps {
      * Defines if each item in section should have divider
      */
     divider?: boolean;
+    /**
+     * Default fallback when value is missing or empty. Default is '- -'
+     */
+    emptyValue?: ReactNode;
     /**
      * Classname for title element
      */
@@ -51,4 +91,8 @@ export interface DetailedInformationProps {
      * Classname for details section
      */
     detailsClass?: string;
+    /**
+     * Classname for label elements
+     */
+    labelClass?: string;
 }

package/dist/types/components/Drawer/Drawer.types.d.ts

@@ -8,40 +8,68 @@ export interface DrawerProps {
     isOpen: boolean;
     /**
      * Handler method that invokes on close attempt
-     * @returns void
      */
     onClose?: () => void;
     /**
-     * Drawer alignment on the page
+     * Controls whether clicking outside / backdrop closes the drawer.
+     * Set to false to prevent accidental dismissal.
+     * @default true
+     */
+    closeOnOutsideClick?: boolean;
+    /**
+     * Drawer alignment on the page ('start' | 'end' | 'top' | 'bottom' | 'center')
      * @default "end"
      */
     align?: DrawerAlignment;
     /**
-     * Whether to add backdrop, when drawer is open
-     * @default "true"
+     * Whether to add backdrop overlay
+     * @default true
      */
     backdrop?: boolean;
     /**
-     * Drawer title
+     * Optional Drawer title
      */
-    title: ReactNode;
+    title?: ReactNode;
     /**
      * Controls if the title should be sticky on top
      */
     titleSticky?: boolean;
     /**
-     * Drawer description section
+     * Drawer description text
      */
     description?: ReactNode;
     /**
-     * Content of the drawer
+     * Main content of the drawer
      */
     children?: ReactNode;
     /**
-     * Drawer size
+     * Optional drawer footer action bar (e.g. action buttons)
+     */
+    footer?: ReactNode;
+    /**
+     * Keeps the footer sticky at the bottom of the drawer
+     * @default false
+     */
+    footerSticky?: boolean;
+    /**
+     * Drawer size ('xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full')
      * @default "md"
      */
     size?: DrawerSize;
+    /**
+     * Shows top-right ✕ close button
+     * @default true
+     */
+    showCloseButton?: boolean;
+    /**
+     * Shows left ← back button in header
+     */
+    showBackButton?: boolean;
+    /**
+     * Displays top drag handle pill (especially for mobile bottom sheets)
+     * Defaults to true when align="bottom"
+     */
+    dragHandle?: boolean;
     /**
      * Dialog Panel class
      */
@@ -58,10 +86,6 @@ export interface DrawerProps {
      * Drawer description class
      */
     descriptionClass?: string;
-    /**
-     * Should show back button on Drawer
-     */
-    showBackButton?: boolean;
 }
 export type AlignmentMap = {
     [key in DrawerAlignment]: string;

package/dist/types/components/Dropdown/Dropdown.types.d.ts

@@ -36,16 +36,32 @@ export type DropdownItem = {
     /** Unique ID for the item. */
     id: string;
     /** Display label (optional if using custom render). */
-    label?: string;
+    label?: ReactNode;
+    /** Subtitle description text displayed underneath the label. */
+    description?: ReactNode;
+    /** Icon displayed on the left side of the item. */
+    icon?: ReactNode;
+    /** Keyboard shortcut key badge on the right side (e.g. '⌘K'). */
+    shortcut?: string;
+    /** Marks item as destructive action (renders in red styling). */
+    danger?: boolean;
+    /** Group or section title header displayed above this item. */
+    groupTitle?: string;
     /** If true, renders a horizontal divider instead of an item. */
     divider?: boolean;
     /** Optional: mark item as disabled. */
     disabled?: boolean;
+    /** Custom click handler for this item. */
+    onClick?: (item: DropdownItem) => void;
     /** Allow additional arbitrary metadata. */
     [key: string]: any;
 };
 /** Base props shared between both trigger modes. */
 type DropdownBaseProps = {
+    /** Outer container / trigger class name */
+    className?: string;
+    /** Width size variant or custom width ('auto' | 'sm' | 'md' | 'lg' | 'xl' | string). Default is 'md' (w-56) */
+    width?: 'auto' | 'sm' | 'md' | 'lg' | 'xl' | string;
     /** Additional classes for the menu container. */
     itemsContainerClass?: string;
     /** Enables menu transition animations. Default: true */

package/dist/types/components/Flex/Flex.d.ts

@@ -0,0 +1,3 @@
+import type { FlexComponent, FlexItemProps } from './Flex.types';
+export declare const FlexItem: import("react").ForwardRefExoticComponent<FlexItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Flex: FlexComponent;

package/dist/types/components/Flex/Flex.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Flex/Flex.types.d.ts

@@ -0,0 +1,92 @@
+import type { ElementType, HTMLAttributes, ReactNode } from 'react';
+import type { ResponsiveOrder } from '../common-responsive';
+export type FlexGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type FlexAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+export type FlexJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+export type FlexDirection = 'row' | 'row-reverse' | 'col' | 'col-reverse';
+export type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+export type FlexSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'auto' | 'full';
+export interface FlexProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Render element tag override
+     * @default 'div'
+     */
+    as?: ElementType;
+    /**
+     * Spacing gap between flex items (applies to both axes unless `gapX`/`gapY` are set)
+     * @default undefined
+     */
+    gap?: FlexGap;
+    /**
+     * Horizontal gap between flex items, overrides `gap` on the x-axis
+     * @default undefined
+     */
+    gapX?: FlexGap;
+    /**
+     * Vertical gap between flex items, overrides `gap` on the y-axis
+     * @default undefined
+     */
+    gapY?: FlexGap;
+    /**
+     * Vertical cross-axis alignment
+     * @default 'stretch'
+     */
+    align?: FlexAlign;
+    /**
+     * Horizontal main-axis distribution
+     * @default 'start'
+     */
+    justify?: FlexJustify;
+    /**
+     * Flex direction (row, row-reverse, col, col-reverse)
+     * @default 'row'
+     */
+    direction?: FlexDirection;
+    /**
+     * Flex wrapping behavior (wrap, nowrap, wrap-reverse)
+     * @default 'wrap'
+     */
+    wrap?: FlexWrap;
+    /**
+     * Renders container as inline-flex
+     * @default false
+     */
+    inline?: boolean;
+    children?: ReactNode;
+}
+export interface FlexItemProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Render element tag override
+     * @default 'div'
+     */
+    as?: ElementType;
+    /**
+     * Width fraction (1-12, 'auto', 'full')
+     */
+    span?: FlexSpan;
+    /** Responsive width fraction at sm breakpoint (>= 640px) */
+    sm?: FlexSpan;
+    /** Responsive width fraction at md breakpoint (>= 768px) */
+    md?: FlexSpan;
+    /** Responsive width fraction at lg breakpoint (>= 1024px) */
+    lg?: FlexSpan;
+    /** Responsive width fraction at xl breakpoint (>= 1280px) */
+    xl?: FlexSpan;
+    /** Responsive width fraction at 2xl breakpoint (>= 1536px) */
+    xxl?: FlexSpan;
+    /** Allows flex item to grow and fill available space */
+    grow?: boolean;
+    /** Controls flex item shrinking behavior */
+    shrink?: boolean;
+    /**
+     * Visual order of the flex item. `'first'`/`'last'` map to Tailwind's
+     * `order-first`/`order-last` utilities; a numeric value is applied via an
+     * inline `order` style so any value is supported.
+     */
+    order?: ResponsiveOrder;
+    children?: ReactNode;
+}
+export interface FlexComponent extends React.ForwardRefExoticComponent<FlexProps & React.RefAttributes<HTMLDivElement>> {
+    Item: React.ForwardRefExoticComponent<FlexItemProps & React.RefAttributes<HTMLDivElement>>;
+    Col: React.ForwardRefExoticComponent<FlexItemProps & React.RefAttributes<HTMLDivElement>>;
+}

package/dist/types/components/Flex/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Flex';
+export * from './Flex.types';

package/dist/types/components/FloatingActionButton/FloatingActionButton.d.ts

@@ -0,0 +1,5 @@
+import type { FloatingActionButtonProps } from './FloatingActionButton.types';
+export declare function FloatingActionButton({ icon, activeIcon, label, variant, size, position, speedDialActions, isOpen: externalIsOpen, onToggle, disabled, onClick, 'aria-label': ariaLabel, containerClass, className, }: FloatingActionButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace FloatingActionButton {
+    var displayName: string;
+}

package/dist/types/components/FloatingActionButton/FloatingActionButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/FloatingActionButton/FloatingActionButton.types.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+export type FABVariant = 'primary' | 'secondary' | 'danger' | 'dark';
+export type FABSize = 'sm' | 'md' | 'lg';
+export type FABPosition = 'bottom-right' | 'bottom-left' | 'bottom-center' | 'inline';
+export interface FABSpeedDialAction {
+    /** Unique sub-action identifier */
+    id: string;
+    /** Display label text */
+    label: ReactNode;
+    /** Icon rendered next to label */
+    icon: ReactNode;
+    /** Visual color theme ('default' | 'danger' | 'primary') */
+    theme?: 'default' | 'danger' | 'primary';
+    /** Disables sub-action click */
+    disabled?: boolean;
+    /** Click handler callback */
+    onClick?: () => void;
+}
+export interface FloatingActionButtonProps {
+    /** Primary button icon */
+    icon: ReactNode;
+    /** Optional active icon when speed dial menu is expanded (e.g. X close icon) */
+    activeIcon?: ReactNode;
+    /** Label text for Extended FAB (Icon + Text layout) */
+    label?: ReactNode;
+    /** Color theme variant (default: 'primary') */
+    variant?: FABVariant;
+    /** Button size scale (default: 'md') */
+    size?: FABSize;
+    /** Screen positioning (default: 'bottom-right') */
+    position?: FABPosition;
+    /** List of expandable speed dial sub-actions */
+    speedDialActions?: FABSpeedDialAction[];
+    /** Controlled open state for speed dial */
+    isOpen?: boolean;
+    /** Handler called when speed dial open state changes */
+    onToggle?: (open: boolean) => void;
+    /** Disables click interaction */
+    disabled?: boolean;
+    /** Primary click handler (when speedDialActions is empty) */
+    onClick?: () => void;
+    /** Accessible label */
+    'aria-label'?: string;
+    /** Outer container class string */
+    containerClass?: string;
+    /** Button element class string */
+    className?: string;
+}

package/dist/types/components/FloatingActionButton/index.d.ts

@@ -0,0 +1,2 @@
+export { FloatingActionButton } from './FloatingActionButton';
+export type { FloatingActionButtonProps, FABSpeedDialAction, FABVariant, FABSize, FABPosition, } from './FloatingActionButton.types';

package/dist/types/components/Grid/Grid.d.ts

@@ -0,0 +1,3 @@
+import type { GridColProps, GridComponent } from './Grid.types';
+export declare const GridCol: import("react").ForwardRefExoticComponent<GridColProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Grid: GridComponent;

package/dist/types/components/Grid/Grid.test.d.ts

@@ -0,0 +1 @@
+export {};