@pk-design/react-tailwind 1.0.6 → 1.1.0

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

@@ -1,7 +1,3 @@
+import { UsePaginationProps } from './Pagination.types';
 export declare const DOTS = "...";
-export type UsePaginationProps = {
-    totalPages: number;
-    currentPage: number;
-    siblingCount?: number;
-};
 export declare const usePagination: ({ totalPages, currentPage, siblingCount, }: UsePaginationProps) => (number | string)[];

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

@@ -0,0 +1,6 @@
+import { type InputProps } from '../Input';
+export interface PasswordInputProps extends Omit<InputProps, 'rightGroup'> {
+}
+export declare const PASSWORD_TYPE = "password";
+export declare const PASSWORD_PLACEHOLDER = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
+export declare const PasswordInput: React.FC<PasswordInputProps>;

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

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

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

@@ -1,6 +1 @@
-import { type InputProps } from '../Input';
-export interface PasswordInputProps extends Omit<InputProps, 'rightGroup'> {
-}
-export declare const PASSWORD_TYPE = "password";
-export declare const PASSWORD_PLACEHOLDER = "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022";
-export declare const PasswordInput: React.FC<PasswordInputProps>;
+export * from './PasswordInput';

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

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

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

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

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

@@ -0,0 +1,14 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import type { InputCustomProps } from '../common-type';
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>, Omit<InputCustomProps, 'labelHint'> {
+    /** Force type to checkbox only */
+    type?: 'radio';
+    /** Extra class for outer wrapper */
+    wrapperClass?: string;
+    /** Input container class */
+    containerClass?: string;
+    /** Label class */
+    labelClass?: string;
+    /** Error message */
+    error?: string | ReactNode;
+}

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

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

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

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

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

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

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

@@ -0,0 +1,65 @@
+import type { ChangeEvent, ReactNode } from 'react';
+export type RadionGroupItem = {
+    /**
+     * The display label shown next to the radio button.
+     */
+    label: string;
+    /**
+     * The underlying value associated with the option.
+     * Can be any type, including string, number, or object.
+     */
+    value: any;
+};
+export interface RadioGroupProps {
+    /**
+     * The name attribute shared by all radio buttons in the group.
+     * Ensures only one option can be selected at a time.
+     */
+    name: string;
+    /**
+     * Optional label displayed above the radio button group.
+     * Can be a string or a custom ReactNode.
+     */
+    label?: ReactNode;
+    /**
+     * Custom CSS classes applied to the label element.
+     */
+    labelClass?: string;
+    /**
+     * Custom CSS classes applied to the label wrapper container.
+     */
+    labelWrapperClass?: string;
+    /**
+     * Optional hint content displayed beside the label.
+     * Useful for showing small guidance text.
+     */
+    labelHint?: ReactNode;
+    /**
+     * Custom CSS classes applied to the outer container
+     * that wraps the entire radio group.
+     */
+    containerClass?: string;
+    /**
+     * The currently selected value.
+     * When provided, the component becomes controlled.
+     */
+    value?: any;
+    /**
+     * The list of options to render.
+     * - Strings → converted to { label, value } internally
+     * - Objects → must follow RadionButtonGroupItem structure
+     */
+    options: string[] | RadionGroupItem[];
+    /**
+     * Whether to display radio buttons horizontally in a row.
+     * Defaults to vertical column layout.
+     */
+    row?: boolean;
+    /**
+     * Change handler called when the selected radio button changes.
+     * Receives the native ChangeEvent from the input element.
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    error?: string | null;
+    showErrorMessage?: boolean;
+}

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

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

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { RadioSwitchProps } from './RadioSwitch.types';
+/**
+ * GPU-accelerated Radio Switch with perfect highlight alignment.
+ * Supports wrapping, icons, descriptions, and dark mode.
+ */
+export declare const RadioSwitch: React.FC<RadioSwitchProps>;

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

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

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

@@ -0,0 +1,47 @@
+import type { RadioGroupProps } from '@headlessui/react';
+/**
+ * A single item in the RadioSwitch component.
+ * Can be:
+ * - a string → used as both label & value
+ * - an object → allows custom label, value, and an optional description
+ */
+export type RadioSwitchItem = string | {
+    /** Text shown inside the switch option */
+    label: string;
+    /** The underlying value for this option */
+    value: string;
+    /** Optional description shown below the label (small text) */
+    description?: string;
+};
+/**
+ * Props for the RadioSwitch component.
+ * Extends HeadlessUI's RadioGroupProps.
+ */
+export type RadioSwitchProps = RadioGroupProps & {
+    /**
+     * Accessible label for the group.
+     * Used internally for aria-label.
+     */
+    label?: string;
+    /**
+     * The currently selected value.
+     * Makes this a controlled component.
+     */
+    selected: string;
+    /**
+     * Callback fired when selection changes.
+     * Receives the selected string value.
+     */
+    onChange: (value: string) => void;
+    /**
+     * List of switch options.
+     * Can be:
+     * - an array of strings
+     * - an array of objects with label/value/description
+     */
+    items: RadioSwitchItem[];
+    switchClass?: string;
+    wrapperClass?: string;
+    contentClass?: string;
+    descriptionClass?: string;
+};

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

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

package/dist/types/components/RangeInput/-backup.d.ts

@@ -0,0 +1,10 @@
+import React, { type InputHTMLAttributes } from 'react';
+import { type InputCustomProps } from '../common-type';
+export type RangeValue = {
+    min: any;
+    max: any;
+};
+export interface RangeInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'>, InputCustomProps {
+    value?: RangeValue;
+}
+export declare const RangeInput: React.FC<RangeInputProps>;

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

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

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

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

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

@@ -0,0 +1,14 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import type { InputCustomProps } from '../common-type';
+export interface RangeInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>, InputCustomProps {
+    /** Extra class for outer wrapper */
+    wrapperClass?: string;
+    /** Input container class */
+    containerClass?: string;
+    /** Label class */
+    labelClass?: string;
+    /** Error message */
+    error?: string | ReactNode;
+    showValue?: boolean;
+    valueSuffix?: string;
+}

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

@@ -1,10 +1 @@
-import React, { type InputHTMLAttributes } from 'react';
-import { type InputCustomProps } from '../common-type';
-export type RangeValue = {
-    min: any;
-    max: any;
-};
-export interface RangeInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value'>, InputCustomProps {
-    value?: RangeValue;
-}
-export declare const RangeInput: React.FC<RangeInputProps>;
+export * from './RangeInput';

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

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

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

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

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

@@ -0,0 +1,68 @@
+/**
+ * Props for the RangeSlider component.
+ * A dual-thumb, draggable range selector with support for labels,
+ * error display, and smooth animated thumb movement.
+ */
+export interface RangeSliderProps {
+    /**
+     * Top label displayed above the slider.
+     * Useful for identifying the field in forms.
+     */
+    label?: string;
+    /**
+     * Optional hint displayed to the right of the label.
+     * Often used for contextual help or inline descriptions.
+     */
+    labelHint?: React.ReactNode;
+    /**
+     * Custom Tailwind classes applied to the label element.
+     */
+    labelClass?: string;
+    /**
+     * Custom Tailwind classes applied to the outer container
+     * that wraps the entire slider component.
+     */
+    containerClass?: string;
+    /**
+     * Custom Tailwind classes applied to the slider thumbs.
+     */
+    className?: string;
+    /**
+     * The minimum allowed numeric value of the slider.
+     */
+    min: number;
+    /**
+     * The maximum allowed numeric value of the slider.
+     */
+    max: number;
+    /**
+     * The current selected minimum value (left thumb).
+     * This makes the component fully controlled.
+     */
+    valueMin: number;
+    /**
+     * The current selected maximum value (right thumb).
+     * This makes the component fully controlled.
+     */
+    valueMax: number;
+    /**
+     * Callback triggered whenever either thumb moves.
+     * Receives the updated min and max values.
+     */
+    onChange: (min: number, max: number) => void;
+    /**
+     * Optional string appended to displayed values.
+     * Example: "kg", "₹", "cm", "hrs", "%".
+     */
+    valueSuffix?: string;
+    /**
+     * Error message to display below the slider.
+     * If provided, the slider is styled with an error state.
+     */
+    error?: string | null;
+    /**
+     * Whether the error message should be shown.
+     * Defaults to true.
+     */
+    showErrorMessage?: boolean;
+}

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

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

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

@@ -0,0 +1,2 @@
+import type { BaseOption, SelectBoxProps } from './SelectBox.types';
+export declare const SelectBox: import("react").ForwardRefExoticComponent<SelectBoxProps<string | BaseOption> & import("react").RefAttributes<HTMLInputElement | HTMLDivElement>>;

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

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

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

@@ -0,0 +1,94 @@
+import { type ReactNode } from 'react';
+export type BaseOption = {
+    /** Unique value for the option (used for selection comparison) */
+    value: string;
+    /** Display label for the option (optional; if omitted, value may be used) */
+    label?: string;
+    /** Whether the option is disabled and non-selectable */
+    disabled?: boolean;
+    /** Additional metadata fields allowed on the option */
+    [k: string]: any;
+};
+export interface SelectBoxProps<T extends BaseOption | string = BaseOption> {
+    /** List of options to display in the dropdown */
+    options: T[];
+    /**
+     * Currently selected option(s).
+     * - For single select: a single T or null
+     * - For multi-select: T[]
+     */
+    selected?: T | T[] | null;
+    /** Name of the field inside option objects to use as the label (defaults to "label") */
+    labelKey?: string;
+    /** Name of the field inside option objects to use as the value (defaults to "value") */
+    valueKey?: string;
+    /** Input ID attribute; defaults to the name field */
+    id?: string;
+    /** Input name attribute */
+    name?: string;
+    /** Text label displayed above the component */
+    label?: string;
+    /** Additional CSS classes for the label wrapper */
+    labelWrapperClass?: string;
+    /** Additional CSS classes for the label element */
+    labelClass?: string;
+    /** Optional hint element (string or JSX) displayed beside the label */
+    labelHint?: string;
+    /**
+     * Callback fired when selection changes.
+     * - Single select → value is T or null
+     * - Multi-select → value is T[]
+     */
+    onChange?: (value: T | T[] | null) => void;
+    /** Whether the entire SelectBox is disabled */
+    disabled?: boolean;
+    /** Additional CSS classes for the outer container */
+    containerClass?: string;
+    /** Placeholder text displayed when no value is selected */
+    placeholder?: string;
+    /** CSS classes applied to the dropdown options container */
+    dropdownContainerClass?: string;
+    /** Enable multiple selection mode */
+    multiple?: boolean;
+    /** Maximum number of selections allowed in multi-select mode */
+    maxSelection?: number;
+    /**
+     * Whether to commit value selection immediately when clicking options.
+     * Headless UI uses "immediate" to control Combobox selection behavior.
+     */
+    immediate?: boolean;
+    /** Whether to show an error message below the field */
+    showErrorMessage?: boolean;
+    /** Error message displayed below the component */
+    error?: string | ReactNode;
+    /**
+     * Enables async search mode:
+     * - Component will not filter options locally
+     * - Calls onSearch(query) when user types
+     */
+    async?: boolean;
+    /**
+     * Async search callback.
+     * Should update the `options` prop externally after fetching.
+     */
+    onSearch?: (query: string) => Promise<void>;
+    /** Whether the user can type inside the input (false = readOnly mode) */
+    searchable?: boolean;
+    /** Mark input as required (used for accessibility) */
+    required?: boolean;
+    /** Whether to show an “Add new” option when no results match */
+    allowAdd?: boolean;
+    /** Label prefix for the “Add new” action (e.g., "Create") */
+    addNewText?: string;
+    /**
+     * Callback when the user chooses the "create/add" option.
+     *
+     * It may:
+     *  - return void (do nothing automatically)
+     *  - return a string or BaseOption → the component will auto-add/select it
+     *  - return a Promise resolving to the above
+     */
+    onAdd?: (value: string) => Promise<T | string | void> | T | string | void;
+    /** Show a clear (X) button for single-select mode */
+    allowClear?: boolean;
+}

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

@@ -1,40 +1,2 @@
-import React, { type ReactNode } from 'react';
-export type SelectOption = {
-    value: string;
-    label?: string;
-    disabled?: boolean;
-    [key: string]: any;
-};
-type Selected = SelectOption | string;
-interface SelectBoxProps {
-    options: SelectOption[] | string[];
-    selected?: Selected | Selected[] | null;
-    labelKey?: string;
-    valueKey?: string;
-    id?: string;
-    name?: string;
-    label?: string;
-    labelWrapperClass?: string;
-    labelClass?: string;
-    labelHint?: string;
-    onChange?: (value: any) => void;
-    disabled?: boolean;
-    containerClass?: string;
-    placeholder?: string;
-    dropdownContainerClass?: string;
-    multiple?: boolean;
-    maxSelection?: number;
-    immediate?: boolean;
-    showErrorMessage?: boolean;
-    error?: string | ReactNode;
-    async?: boolean;
-    onSearch?: (query: string) => Promise<void>;
-    searchable?: boolean;
-    required?: boolean;
-    allowAdd?: boolean;
-    addNewText?: string;
-    onAdd?: (value: string) => void;
-    allowClear?: boolean;
-}
-export declare const SelectBox: React.FC<SelectBoxProps>;
-export {};
+export * from './SelectBox';
+export * from './SelectBox.types';

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { EmptyTableRowProps, TableProps, TableBodyProps, TableCellProps, TableFootProps, TableHeaderCellProps, TableHeadProps, TableRowProps } from './Table.types';
+export declare const Table: React.FC<TableProps>;
+export declare const TableHead: React.FC<TableHeadProps>;
+export declare const TableBody: React.FC<TableBodyProps>;
+export declare const TableFoot: React.FC<TableFootProps>;
+export declare const TableRow: React.FC<TableRowProps>;
+export declare const TableCell: React.FC<TableCellProps>;
+export declare const TableHeaderCell: React.FC<TableHeaderCellProps>;
+export declare const EmptyTableRow: React.FC<EmptyTableRowProps>;

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

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

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

@@ -0,0 +1,91 @@
+import type { HTMLAttributes, ReactNode, TdHTMLAttributes, ThHTMLAttributes } from 'react';
+/**
+ * Root <Table /> props.
+ */
+export interface TableProps {
+    /** Table layout mode ("auto" or "fixed"). Default = "auto" */
+    layout?: 'fixed' | 'auto';
+    /** Additional classes applied to the table wrapper */
+    wrapperClass?: string;
+    /** Additional classes applied to the <table> element */
+    className?: string;
+    /** Table content (Head + Body + Foot) */
+    children: ReactNode;
+}
+/**
+ * <TableHead /> — table header section
+ */
+export interface TableHeadProps {
+    /** Additional classes applied to <thead> */
+    className?: string;
+    /** Header cells (TableHeaderCell components) */
+    children: ReactNode;
+}
+/**
+ * <TableBody /> — table body section
+ */
+export interface TableBodyProps {
+    /** Additional classes applied to <tbody> */
+    className?: string;
+    /** Show loading shimmer (overrides children) */
+    loading?: boolean;
+    /** Number of columns — needed for shimmer loader layout */
+    colSize: number;
+    /** Number of shimmer rows to show when loading */
+    rowSize?: number;
+    /** Actual table rows */
+    children: ReactNode;
+}
+/**
+ * <TableFoot /> — table footer
+ */
+export interface TableFootProps {
+    children: ReactNode;
+}
+/**
+ * <EmptyTableRow /> — rendered when no data is available
+ */
+export interface EmptyTableRowProps {
+    /** Column span for empty row */
+    colSpan?: number;
+    /** Content shown in empty state */
+    children: ReactNode;
+    /** Optional custom styling */
+    contentClass?: string;
+}
+/**
+ * <TableCell /> — regular table cell
+ */
+export interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    /** Horizontal alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Cell content */
+    children: ReactNode;
+    /** Additional classes */
+    className?: string;
+}
+/**
+ * <TableRow /> — regular row
+ */
+export interface TableRowProps extends ThHTMLAttributes<HTMLTableRowElement> {
+    /** Whether the row highlights on hover */
+    hoverable?: boolean;
+}
+/**
+ * <TableHeaderCell /> — header cell
+ */
+export interface TableHeaderCellProps extends HTMLAttributes<HTMLTableCellElement> {
+    /** Horizontal alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Additional classes */
+    className?: string;
+    /** Label */
+    children: ReactNode;
+}
+/**
+ * <TableRowLoader /> shimmer-loader row
+ */
+export interface TableRowLoaderProps {
+    colSize: number;
+    rowSize: number;
+}

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

@@ -1,48 +1,2 @@
-import React, { type HTMLAttributes, type MouseEventHandler, type ReactNode, type TdHTMLAttributes, type ThHTMLAttributes } from 'react';
-interface TableProps {
-    layout?: 'fixed' | 'auto';
-    wrapperClass?: string;
-    className?: string;
-    children: ReactNode;
-}
-interface TableHeadProps {
-    className?: string;
-    children: ReactNode;
-    onSort?: MouseEventHandler<HTMLElement>;
-}
-interface TableBodyProps {
-    className?: string;
-    loading?: boolean;
-    children: ReactNode;
-    colSize: number;
-    rowSize?: number;
-}
-interface TableFootProps {
-    children: ReactNode;
-}
-interface EmptyTableRow {
-    colSpan?: number;
-    children: ReactNode;
-}
-interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
-    className?: string;
-    children: ReactNode;
-    align?: 'left' | 'center' | 'right';
-}
-interface TableRowProps extends ThHTMLAttributes<HTMLTableRowElement> {
-    hoverable?: boolean;
-}
-interface TableHeaderCellProps extends HTMLAttributes<HTMLTableCellElement> {
-    className?: string;
-    children: ReactNode;
-    align?: 'left' | 'center' | 'right';
-}
-export declare const Table: React.FC<TableProps>;
-export declare const TabelHead: React.FC<TableHeadProps>;
-export declare const TabelBody: React.FC<TableBodyProps>;
-export declare const TabelFoot: React.FC<TableFootProps>;
-export declare const TableRow: React.FC<TableRowProps>;
-export declare const TableCell: React.FC<TableCellProps>;
-export declare const TableHeaderCell: React.FC<TableHeaderCellProps>;
-export declare const EmptyTableRow: React.FC<EmptyTableRow>;
-export {};
+export * from './Table';
+export * from './Table.types';

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

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

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

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