@pk-design/react-tailwind 1.0.6 → 1.1.0

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

@@ -1,56 +1,2 @@
-import React, { type ChangeEvent, type ReactNode } from 'react';
-export type CheckboxGroupItem = {
-    /**
-     * Checkbox item label
-     */
-    label: string;
-    /**
-     * Checkbox item value
-     */
-    value: any;
-};
-export interface CheckboxGroupProps {
-    /**
-     * Group name
-     */
-    name?: string;
-    /**
-     * Selected value
-     */
-    value?: any;
-    /**
-     * Label of checkbox group field
-     */
-    label?: ReactNode;
-    /**
-     * Label class for checkbox group field
-     */
-    labelClass?: string;
-    /**
-     * Label wrapper class for checkbox group field
-     */
-    labelWrapperClass?: string;
-    /**
-     * Group field hint
-     */
-    labelHint?: ReactNode;
-    /**
-     * Group field container
-     */
-    containerClass?: string;
-    /**
-     * On change handler
-     * @param e ChangeEvent<HTMLInputElement>
-     * @returns void
-     */
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * List of checkbox field option
-     */
-    options: string[] | CheckboxGroupItem[];
-    /**
-     * Defines whether to list the checkbox inline
-     */
-    inline?: boolean;
-}
-export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
+export * from './CheckboxGroup';
+export * from './CheckboxGroup.types';

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

@@ -0,0 +1,2 @@
+import type { DataTableProps } from './DataTable.types';
+export declare const DataTable: React.FC<DataTableProps>;

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

@@ -0,0 +1,4 @@
+import type { SortIconKey, Sorting } from './DataTable.types';
+import type { ReactNode } from 'react';
+export declare const SortIconMap: Record<SortIconKey, ReactNode>;
+export declare const getSortIcon: (sort?: Sorting) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;

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

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

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

@@ -0,0 +1,63 @@
+import type { ReactNode } from 'react';
+import type { TPagination } from '../Pagination';
+/**
+ * Allowed column value data types
+ * Used only to influence sorting logic
+ */
+export type DataValueType = 'string' | 'number' | 'date';
+/**
+ * Sorting direction
+ */
+export type Sorting = 'asc' | 'desc' | '1' | '-1';
+/** Allowed sort icon types */
+export type SortIconKey = Extract<Sorting, 'asc' | 'desc' | '1' | '-1'>;
+export type SortQuery = Record<string, Sorting>;
+/**
+ * Column definition for DataTable
+ */
+export interface DataTableColumn {
+    /** Unique key used to extract column data (supports nested paths) */
+    name: string;
+    /** Display label for the header */
+    label: ReactNode;
+    /** Text alignment for header */
+    headerAlign?: 'left' | 'center' | 'right';
+    /** Text alignment for body cells */
+    align?: 'left' | 'center' | 'right';
+    /** Custom cell renderer (highest priority) */
+    render?: (item: any) => ReactNode;
+    /** Optional fixed width (px, %, rem) */
+    width?: string | number;
+    /** Enables sorting when true */
+    sortable?: boolean;
+    /** Type of cell value helps sorting logic */
+    type?: DataValueType;
+    /** Sticks cell to right side */
+    sticky?: 'left' | 'right';
+}
+/**
+ * DataTable props
+ */
+export interface DataTableProps {
+    /** Array of data items */
+    items: any[];
+    /** Column definitions */
+    columns: DataTableColumn[];
+    /** Sorting state, keyed by column name */
+    sorting?: Record<string, Sorting>;
+    /** Loading state (shows skeleton rows) */
+    loading?: boolean;
+    /** Pagination config */
+    pagination?: TPagination;
+    /** Empty message to show when no results */
+    emptyMessage?: ReactNode;
+    /** External sorting handler */
+    onSort?: (column: DataTableColumn) => void;
+    /** Pagination setter */
+    setPagination?: (pagination: Partial<TPagination>) => void;
+    /** Layout of table cells */
+    layout?: 'fixed' | 'auto';
+    /** Optional wrapper styles */
+    containerClass?: string;
+    wrapperClass?: string;
+}

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

@@ -0,0 +1,12 @@
+import type { DataValueType, Sorting, SortQuery } from './DataTable.types';
+/**
+ * Compute the next sorting direction for a column.
+ * - string: undefined → asc → desc → undefined
+ * - number/date: undefined → 1 → -1 → undefined
+ */
+export declare const nextSortDirection: (prev: Sorting | undefined, type?: "string" | "number" | "date") => Sorting | undefined;
+/**
+ * Update the sort query object for a table column.
+ * Toggles sort direction, removing key when reset.
+ */
+export declare const updateSortQuery: (sortQuery: SortQuery, name: string, type?: DataValueType) => SortQuery;

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

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

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

@@ -0,0 +1,4 @@
+export * from './DataTable';
+export * from './DataTable.types';
+export * from './DataTable.utils';
+export * from './DataTable.icons';

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

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

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

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

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

@@ -0,0 +1,54 @@
+import type { ReactNode } from 'react';
+export type Detail = {
+    /**
+     * Label of the information to be displayed
+     */
+    label: string;
+    /**
+     * Information to be displayed
+     */
+    value?: ReactNode;
+    /**
+     * Classname of the value content sections
+     */
+    contentClass?: string;
+    /**
+     * Defines if the items should be hidden.
+     */
+    hidden?: boolean;
+};
+export interface DetailedInformationProps {
+    className?: string;
+    /**
+     * Title for the information section
+     */
+    title?: ReactNode;
+    /**
+     * Subtitle for the information section
+     */
+    subTitle?: ReactNode;
+    /**
+     * List of details / information to be displayed
+     */
+    details: Detail[];
+    /**
+     * Defines if the layout should be compact
+     */
+    compact?: boolean;
+    /**
+     * Defines if the section should have borders
+     */
+    bordered?: boolean;
+    /**
+     * Defines if each item in section should have divider
+     */
+    divider?: boolean;
+    /**
+     * Classname for title element
+     */
+    titleClass?: string;
+    /**
+     * Classname for details section
+     */
+    detailsClass?: string;
+}

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

@@ -1,63 +1,2 @@
-import React, { type ReactNode, type JSX, type JSXElementConstructor } from 'react';
-export type Detail = {
-    /**
-     * Label of the information to be displayed
-     */
-    label: string;
-    /**
-     * Information to be displayed
-     */
-    value?: ReactNode;
-    /**
-     * Classname of the value content sections
-     */
-    contentClass?: string;
-    /**
-     * Defines if the items should be hidden.
-     */
-    hidden?: boolean;
-};
-export interface DetailedInformationProps {
-    className?: string;
-    /**
-     * Title for the information section
-     */
-    title?: ReactNode;
-    /**
-     * Subtitle for the information section
-     */
-    subTitle?: ReactNode;
-    /**
-     * List of details / information to be displayed
-     */
-    details: Detail[];
-    /**
-     * Defines if the layout should be compact
-     */
-    compact?: boolean;
-    /**
-     * Defines if the section should have borders
-     */
-    bordered?: boolean;
-    /**
-     * Defines if each item in section should have divider
-     */
-    divider?: boolean;
-    /**
-     * Classname for title element
-     */
-    titleClass?: string;
-    /**
-     * Classname for details section
-     */
-    detailsClass?: string;
-    /**
-     * JSX element to be rendered as.
-     */
-    as?: keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
-    /**
-     * When rendering as Link, use `to` prop for navigation
-     */
-    to?: string;
-}
-export declare const DetailedInformation: React.FC<DetailedInformationProps>;
+export * from './DetailedInformation';
+export * from './DetailedInformation.types';

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

@@ -1,3 +1,3 @@
 import React from 'react';
-import { type DrawerProps } from './type';
+import type { DrawerProps } from './Drawer.types';
 export declare const Drawer: React.FC<DrawerProps>;

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

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

package/dist/types/components/Drawer/{type.d.ts → Drawer.types.d.ts}

@@ -1,5 +1,5 @@
 import { type ReactNode } from 'react';
-export type DrawerAlignment = 'center' | 'start' | 'end' | 'top' | 'bottom' | 'top-center';
+export type DrawerAlignment = 'center' | 'start' | 'end' | 'top' | 'bottom';
 export type DrawerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
 export interface DrawerProps {
     /**

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

@@ -1,2 +1,2 @@
 export * from './Drawer';
-export * from './type';
+export * from './Drawer.types';

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { DropdownProps } from './Dropdown.types';
+export declare const Dropdown: React.FC<DropdownProps>;

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

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

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

@@ -0,0 +1,107 @@
+import type { ReactNode } from 'react';
+export type DropdownAlignment = 'start' | 'end';
+export type DropdownPlacement = 'top' | 'right' | 'bottom' | 'left';
+export type DropdownAnchorTo = `${DropdownPlacement}` | `${DropdownPlacement} ${DropdownAlignment}`;
+/**
+ * Configuration for advanced positioning when using object-based `anchor`.
+ */
+export type DropdownBaseAnchorProps = {
+    /** Space between the trigger and the menu panel. */
+    gap: number | string;
+    /** Nudges the menu panel from its natural anchor position. */
+    offset: number | string;
+    /** Minimum distance between the menu panel and the viewport. */
+    padding: number | string;
+};
+/**
+ * Render props passed to `renderTriggerButton`.
+ * These reflect the trigger state.
+ */
+export type DropdownTriggerBtnProps = {
+    /** Whether the trigger is active (pressed). */
+    active: boolean;
+    /** Whether the dropdown is open. */
+    open: boolean;
+    /** Whether the trigger button is disabled. */
+    disabled: boolean;
+    /** Whether the trigger is hovered. */
+    hover: boolean;
+    /** Whether the trigger is focused. */
+    focus: boolean;
+};
+/**
+ * Individual item shown inside the dropdown menu.
+ */
+export type DropdownItem = {
+    /** Unique ID for the item. */
+    id: string;
+    /** Display label (optional if using custom render). */
+    label?: string;
+    /** If true, renders a horizontal divider instead of an item. */
+    divider?: boolean;
+    /** Optional: mark item as disabled. */
+    disabled?: boolean;
+    /** Allow additional arbitrary metadata. */
+    [key: string]: any;
+};
+/** Base props shared between both trigger modes. */
+type DropdownBaseProps = {
+    /** Additional classes for the menu container. */
+    itemsContainerClass?: string;
+    /** Enables menu transition animations. Default: true */
+    transition?: boolean;
+    /**
+     * Controls dropdown placement.
+     * Accepts:
+     * - `"bottom start"`
+     * - `"top end"`
+     * - `"right"`
+     * - or object configuration for advanced placement.
+     */
+    anchor?: false | DropdownAnchorTo | Partial<DropdownBaseAnchorProps & {
+        /** Placement descriptor for advanced mode. */
+        to: DropdownAnchorTo;
+    }>;
+    /** List of dropdown menu items. */
+    items: DropdownItem[];
+    /**
+     * Renderer for customizing how a menu item is displayed.
+     * If omitted, the default item UI is used.
+     */
+    renderItem?: (item: DropdownItem) => ReactNode;
+    /** Custom CSS classes applied to each menu item. */
+    menuItemClass?: string;
+    /**
+     * Called when a menu item is clicked.
+     * Receives: (item, index)
+     */
+    onMenuClick?: (item: DropdownItem, index: number) => void;
+};
+/**
+ * Mode 1: Using static JSX as trigger (`triggerButton`)
+ */
+export type DropdownWithStaticTrigger = DropdownBaseProps & {
+    /** JSX element used as the trigger button. */
+    triggerButton: ReactNode;
+    /** Must NOT be provided when using triggerButton. */
+    renderTriggerButton?: never;
+};
+/**
+ * Mode 2: Using a render function for trigger (`renderTriggerButton`)
+ */
+export type DropdownWithRenderTrigger = DropdownBaseProps & {
+    /**
+     * Custom trigger renderer.
+     * Receives trigger UI state (open, focus, hover, etc.)
+     * Must return a valid element.
+     */
+    renderTriggerButton: (props: DropdownTriggerBtnProps) => ReactNode;
+    /** Must NOT be provided when using renderTriggerButton. */
+    triggerButton?: never;
+};
+/**
+ * Final Dropdown Props:
+ * Exactly ONE of the trigger modes must be used.
+ */
+export type DropdownProps = DropdownWithStaticTrigger | DropdownWithRenderTrigger;
+export {};

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

@@ -1,62 +1,2 @@
-import React, { type ReactNode } from 'react';
-type Align = 'start' | 'end';
-type Placement = 'top' | 'right' | 'bottom' | 'left';
-type AnchorTo = `${Placement}` | `${Placement} ${Align}`;
-type BaseAnchorProps = {
-    /**
-     * The `gap` is the space between the trigger and the panel.
-     */
-    gap: number | string;
-    /**
-     * The `offset` is the amount the panel should be nudged from its original position.
-     */
-    offset: number | string;
-    /**
-     * The `padding` is the minimum space between the panel and the viewport.
-     */
-    padding: number | string;
-};
-export type DropdownItem = Record<string, any> & {
-    id: string;
-    divider?: boolean;
-};
-export type DropdownProps = {
-    /**
-     * Dropdown menu trigger button
-     */
-    triggerButton: ReactNode;
-    /**
-     * Dropdown menu item container class
-     */
-    itemsContainerClass?: string;
-    /**
-     * Controls animation of dropdown menu
-     * @default true
-     */
-    transition?: boolean;
-    /**
-     * Controls placement of the dropdown menu
-     * @default "bottom start"
-     */
-    anchor?: false | AnchorTo | Partial<BaseAnchorProps & {
-        /**
-         * The `to` value defines which side of the trigger the panel should be placed on and its
-         * alignment.
-         */
-        to: AnchorTo;
-    }>;
-    /**
-     * List of dropdown menu items
-     */
-    items: DropdownItem[];
-    /**
-     * Renderer function that returns react element to render dropdown item
-     * @param item DropdownItem
-     * @returns ReactNode
-     */
-    renderItem: (item: DropdownItem, options: {
-        className: string;
-    }) => ReactNode;
-};
-export declare const Dropdown: React.FC<DropdownProps>;
-export {};
+export * from './Dropdown';
+export * from './Dropdown.types';

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { HeadingTextProps } from './HeadingText.types';
+export declare const HeadingText: {
+    Title: React.FC<HeadingTextProps>;
+    SubTitle: React.FC<HeadingTextProps>;
+    SubTitle2: React.FC<HeadingTextProps>;
+    SubTitle3: React.FC<HeadingTextProps>;
+    SubTitle4: React.FC<HeadingTextProps>;
+};

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

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export interface HeadingTextProps {
+    children: ReactNode;
+    className?: string;
+}

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

@@ -1,12 +1,2 @@
-import React, { type ReactNode } from 'react';
-export interface HeadingTextProps {
-    children: ReactNode;
-    className?: string;
-}
-export declare const HeadingText: {
-    Title: React.FC<HeadingTextProps>;
-    SubTitle: React.FC<HeadingTextProps>;
-    SubTitle2: React.FC<HeadingTextProps>;
-    SubTitle3: React.FC<HeadingTextProps>;
-    SubTitle4: React.FC<HeadingTextProps>;
-};
+export * from './HeadingText';
+export * from './HeadingText.types';

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

@@ -0,0 +1,6 @@
+import { InputProps } from './Input.types';
+export declare function buildInputClass(className?: string, { isFocusWithin, disabled }?: {
+    isFocusWithin?: boolean;
+    disabled?: boolean;
+}): string;
+export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<HTMLInputElement>>;

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

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

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

@@ -0,0 +1,12 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import type { InputCustomProps } from '../common-type';
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, InputCustomProps {
+    /**
+     * Space for right icon
+     */
+    rightGroup?: ReactNode;
+    /**
+     * Space for left icon
+     */
+    leftGroup?: ReactNode;
+}

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

@@ -1,13 +1,2 @@
-import React, { type InputHTMLAttributes, type ReactNode } from 'react';
-import { type InputCustomProps } from '../common-type';
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, InputCustomProps {
-    /**
-     * Space for right icon
-     */
-    rightGroup?: ReactNode;
-    /**
-     * Space for left icon
-     */
-    leftGroup?: ReactNode;
-}
-export declare const Input: React.FC<InputProps>;
+export * from './Input';
+export * from './Input.types';

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

@@ -0,0 +1,6 @@
+import React, { type LabelHTMLAttributes } from 'react';
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    htmlFor?: string;
+}
+export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLLabelElement>>;
+export {};

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

@@ -1,5 +1 @@
-import React, { type LabelHTMLAttributes } from 'react';
-interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
-}
-export declare const Label: React.FC<LabelProps>;
-export {};
+export * from './Label';

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

@@ -1,33 +1,3 @@
 import React from 'react';
-export interface TPagination {
-    /**
-     * Defines current page number
-     */
-    page: number;
-    /**
-     * Defines page limit
-     */
-    limit: number;
-    /**
-     * Defines totol items in the list to be paginated.
-     */
-    total: number;
-}
-export type PaginationProps = TPagination & {
-    /**
-     * Pagination component classname
-     */
-    className?: string;
-    /**
-     * Handler for page change
-     * @param pagination Partial<TPagination>
-     * @returns void
-     */
-    onChange: (pagination: Partial<TPagination>) => void;
-    /**
-     * Whether to show ellipsis for large page numbers
-     * @default true
-     */
-    ellipsis?: boolean;
-};
+import type { PaginationProps } from './Pagination.types';
 export declare const Pagination: React.FC<PaginationProps>;

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

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

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

@@ -0,0 +1,36 @@
+export interface TPagination {
+    /**
+     * Defines current page number
+     */
+    page: number;
+    /**
+     * Defines page limit
+     */
+    limit: number;
+    /**
+     * Defines totol items in the list to be paginated.
+     */
+    total: number;
+}
+export type PaginationProps = TPagination & {
+    /**
+     * Pagination component classname
+     */
+    className?: string;
+    /**
+     * Handler for page change
+     * @param pagination Partial<TPagination>
+     * @returns void
+     */
+    onChange: (pagination: Partial<TPagination>) => void;
+    /**
+     * Whether to show ellipsis for large page numbers
+     * @default true
+     */
+    ellipsis?: boolean;
+};
+export type UsePaginationProps = {
+    totalPages: number;
+    currentPage: number;
+    siblingCount?: number;
+};

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

@@ -1,2 +1,3 @@
 export * from './Pagination';
 export * from './usePagination';
+export * from './Pagination.types';