@pk-design/react-tailwind 1.5.4 → 1.7.0

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

@@ -0,0 +1,66 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+export type QuantityStepperSize = 'sm' | 'md' | 'lg';
+export interface QuantityStepperProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'prefix'> {
+    /**
+     * Numeric value of the stepper
+     */
+    value: number;
+    /**
+     * Callback fired when value changes
+     */
+    onChange: (value: number) => void;
+    /**
+     * Minimum allowable value
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Maximum allowable value
+     * @default 99999
+     */
+    max?: number;
+    /**
+     * Increment/decrement step interval
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Optional field label text
+     */
+    label?: string;
+    /**
+     * Optional label hint text displayed next to label
+     */
+    labelHint?: string;
+    /**
+     * Optional helper text rendered beneath the field
+     */
+    helperText?: string;
+    /**
+     * Error message text. Setting this marks field as invalid.
+     */
+    error?: string;
+    /**
+     * Show or hide the error message text underneath
+     * @default true
+     */
+    showErrorMessage?: boolean;
+    /**
+     * Size variant matching Input component dimensions
+     * @default "md"
+     */
+    size?: QuantityStepperSize;
+    /**
+     * Optional prefix icon or element
+     */
+    prefix?: ReactNode;
+    /**
+     * Optional suffix element (e.g. unit label like "kg", "items")
+     */
+    suffix?: ReactNode;
+    /**
+     * Disabled state for input and controls
+     * @default false
+     */
+    disabled?: boolean;
+}

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

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

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

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

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

@@ -1,14 +1,24 @@
 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 */
+export type RadioSize = 'sm' | 'md' | 'lg';
+export type RadioTheme = 'primary' | 'success' | 'danger';
+export interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>, Omit<InputCustomProps, 'labelHint'> {
+    /** Force type to radio only */
     type?: 'radio';
+    /** Optional subtext description below radio label */
+    description?: ReactNode;
+    /** Size variant ('sm' | 'md' | 'lg') @default "md" */
+    size?: RadioSize;
+    /** Color accent theme ('primary' | 'success' | 'danger') @default "primary" */
+    theme?: RadioTheme;
     /** Extra class for outer wrapper */
     wrapperClass?: string;
     /** Input container class */
     containerClass?: string;
     /** Label class */
     labelClass?: string;
+    /** Description subtext class */
+    descriptionClass?: string;
     /** Error message */
     error?: string | ReactNode;
 }

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

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

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

@@ -1,4 +1,7 @@
 import type { ChangeEvent, ReactNode } from 'react';
+import type { RadioSize, RadioTheme } from '../Radio/Radio.types';
+export type RadioGroupVariant = 'default' | 'cards';
+export type RadioGroupColumns = 1 | 2 | 3 | 4;
 export type RadionGroupItem = {
     /**
      * The display label shown next to the radio button.
@@ -6,19 +9,43 @@ export type RadionGroupItem = {
     label: string;
     /**
      * The underlying value associated with the option.
-     * Can be any type, including string, number, or object.
      */
     value: any;
+    /**
+     * Optional subtext description for rich option items.
+     */
+    description?: ReactNode;
+    /**
+     * Optional icon displayed next to the item label.
+     */
+    icon?: ReactNode;
+    /**
+     * Disable individual option item
+     */
+    disabled?: boolean;
 };
 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.
+     * Visual variant mode: 'default' or 'cards' (rich selectable card tiles)
+     * @default "default"
+     */
+    variant?: RadioGroupVariant;
+    /**
+     * Size variant for all radios in the group ('sm' | 'md' | 'lg')
+     * @default "md"
+     */
+    size?: RadioSize;
+    /**
+     * Theme accent color ('primary' | 'success' | 'danger')
+     * @default "primary"
+     */
+    theme?: RadioTheme;
+    /**
+     * Optional label displayed above the radio group.
      */
     label?: ReactNode;
     /**
@@ -31,33 +58,34 @@ export interface RadioGroupProps {
     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.
+     * Custom CSS classes applied to the outer container.
      */
     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[];
+    /**
+     * Grid column layout when variant="cards" or row=true (1 | 2 | 3 | 4)
+     */
+    columns?: RadioGroupColumns;
+    /**
+     * Disables all options in the radio group.
+     */
+    disabled?: boolean;
     /**
      * 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.
+     * Change handler called when selected value changes.
      */
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     error?: string | null;

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

@@ -1,7 +1,3 @@
 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.types.d.ts

@@ -1,45 +1,20 @@
 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 RadioSwitchSize = 'sm' | 'md' | 'lg';
+export type RadioSwitchTheme = 'primary' | 'secondary' | 'dark';
 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;
+    disabled?: boolean;
 };
-/**
- * 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[];
+    size?: RadioSwitchSize;
+    theme?: RadioSwitchTheme;
+    disabled?: boolean;
     switchClass?: string;
     wrapperClass?: string;
     contentClass?: string;

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

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

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

@@ -1,6 +1,11 @@
 import type { InputHTMLAttributes, ReactNode } from 'react';
 import type { InputCustomProps } from '../common-type';
-export interface RangeInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>, InputCustomProps {
+export type RangeInputSize = 'sm' | 'md' | 'lg';
+export interface RangeInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>, InputCustomProps {
+    /**
+     * Size scale of the slider (`"sm"` | `"md"` | `"lg"`). Defaults to `"md"`.
+     */
+    size?: RangeInputSize;
     /** Extra class for outer wrapper */
     wrapperClass?: string;
     /** Input container class */
@@ -9,6 +14,14 @@ export interface RangeInputProps extends Omit<InputHTMLAttributes<HTMLInputEleme
     labelClass?: string;
     /** Error message */
     error?: string | ReactNode;
+    /** Helper guidance message rendered below the slider */
+    helperText?: ReactNode;
+    /** Whether to display current value on the right side of the slider. Defaults to `true`. */
     showValue?: boolean;
+    /** String suffix appended to value display (e.g. `"%"`, `"px"`, `"₹"`) */
     valueSuffix?: string;
+    /** Floating value tooltip popup badge displayed above the thumb on hover or drag */
+    showTooltip?: boolean;
+    /** Step tick marks displayed along slider track (boolean or map of values to labels) */
+    marks?: boolean | Record<number, string>;
 }

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

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

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

@@ -1,32 +1,35 @@
+import type { ReactNode } from 'react';
+export type RangeSliderSize = 'sm' | 'md' | 'lg';
 /**
  * Props for the RangeSlider component.
  * A dual-thumb, draggable range selector with support for labels,
- * error display, and smooth animated thumb movement.
+ * step increments, marks, tooltips, keyboard navigation, and error display.
  */
 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;
+    labelHint?: 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.
+     * Custom Tailwind classes applied to the outer container.
      */
     containerClass?: string;
     /**
      * Custom Tailwind classes applied to the slider thumbs.
      */
     className?: string;
+    /**
+     * Size scale of the range slider (`"sm"` | `"md"` | `"lg"`). Defaults to `"md"`.
+     */
+    size?: RangeSliderSize;
     /**
      * The minimum allowed numeric value of the slider.
      */
@@ -35,31 +38,43 @@ export interface RangeSliderProps {
      * The maximum allowed numeric value of the slider.
      */
     max: number;
+    /**
+     * Step increment precision for thumbs (e.g. `1`, `5`, `10`, `0.5`).
+     * Defaults to `1`.
+     */
+    step?: 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", "%".
+     * Optional string appended to displayed values (e.g. `"kg"`, `"₹"`, `"%"`, `"hrs"`).
      */
     valueSuffix?: string;
+    /**
+     * Floating value tooltip popups displayed above active thumbs on drag or hover.
+     */
+    showTooltips?: boolean;
+    /**
+     * Custom tick marks and labels displayed along slider track (e.g. `{ 0: '$0', 50: '$50', 100: '$100' }`).
+     */
+    marks?: Record<number, string>;
     /**
      * Error message to display below the slider.
-     * If provided, the slider is styled with an error state.
      */
-    error?: string | null;
+    error?: string | ReactNode;
+    /**
+     * Guidance helper text rendered below the slider.
+     */
+    helperText?: ReactNode;
     /**
      * Whether the error message should be shown.
      * Defaults to true.

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { SegmentedControlProps } from './SegmentedControl.types';
+export declare const SegmentedControl: React.ForwardRefExoticComponent<SegmentedControlProps<string> & React.RefAttributes<HTMLDivElement>>;

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

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

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

@@ -0,0 +1,53 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface SegmentedControlOption<T extends string = string> {
+    /**
+     * Visible label or element for the segment option
+     */
+    label: ReactNode;
+    /**
+     * Unique value associated with the option
+     */
+    value: T;
+    /**
+     * Optional tooltip or title text
+     */
+    title?: string;
+    /**
+     * Optional icon rendered before the label
+     */
+    icon?: ReactNode;
+    /**
+     * Defines if option is disabled
+     */
+    disabled?: boolean;
+}
+export type SegmentedControlSize = 'sm' | 'md' | 'lg';
+export interface SegmentedControlProps<T extends string = string> extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> {
+    /**
+     * Options list to display in the control
+     */
+    options: SegmentedControlOption<T>[];
+    /**
+     * Currently selected value
+     */
+    value: T;
+    /**
+     * Callback triggered when selection changes
+     */
+    onChange: (value: T) => void;
+    /**
+     * Global disabled state for the entire control
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Size variant controlling padding and text size
+     * @default "md"
+     */
+    size?: SegmentedControlSize;
+    /**
+     * Expand control to span full container width
+     * @default false
+     */
+    fullWidth?: boolean;
+}

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

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

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

@@ -1,4 +1,5 @@
 import { type ReactNode } from 'react';
+export type SelectBoxSize = 'sm' | 'md' | 'lg';
 export type BaseOption = {
     /** Unique value for the option (used for selection comparison) */
     value: string;
@@ -9,15 +10,25 @@ export type BaseOption = {
     /** Additional metadata fields allowed on the option */
     [k: string]: any;
 };
+export type OptionGroup<T = BaseOption> = {
+    /** Section header label for the group */
+    group: string;
+    /** Options belonging to this group */
+    options: T[];
+};
 export interface SelectBoxProps<T extends BaseOption | string = BaseOption> {
     /** List of options to display in the dropdown */
-    options: T[];
+    options?: T[];
+    /** List of option groups to display in the dropdown (alternative to options) */
+    groups?: OptionGroup<T>[];
     /**
      * Currently selected option(s).
      * - For single select: a single T or null
      * - For multi-select: T[]
      */
     selected?: T | T[] | null;
+    /** Size scale of the SelectBox component (`"sm"` | `"md"` | `"lg"`). Defaults to `"md"`. */
+    size?: SelectBoxSize;
     /** 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") */
@@ -49,13 +60,7 @@ export interface SelectBoxProps<T extends BaseOption | string = BaseOption> {
     /** CSS classes applied to the dropdown options container */
     dropdownContainerClass?: string;
     /**
-     * Whether the open dropdown traps focus and makes the rest of the page
-     * inert (Headless UI's default Combobox behavior). Disabled by default so
-     * elements rendered inside the control itself — like the `allowClear`
-     * button — and the rest of the page stay interactive while the dropdown
-     * is open, matching common combobox libraries (e.g. react-select). Set to
-     * `true` to restore Headless UI's modal focus-trapping behavior.
-     *
+     * Whether the open dropdown traps focus and makes the rest of the page inert.
      * @default false
      */
     modalDropdown?: boolean;
@@ -63,15 +68,24 @@ export interface SelectBoxProps<T extends BaseOption | string = BaseOption> {
     multiple?: boolean;
     /** Maximum number of selections allowed in multi-select mode */
     maxSelection?: number;
+    /**
+     * Automatically renders a "Select All" / "Clear All" action header inside multi-select dropdowns.
+     */
+    showSelectAll?: boolean;
     /**
      * 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;
+    /** Helper guidance message rendered below the field */
+    helperText?: ReactNode;
+    /** Optional icon or element displayed on the left side of the input */
+    leftGroup?: ReactNode;
+    /** Custom option renderer function */
+    renderOption?: (option: T, isSelected: boolean) => ReactNode;
     /**
      * Enables async search mode:
      * - Component will not filter options locally
@@ -100,13 +114,17 @@ export interface SelectBoxProps<T extends BaseOption | string = BaseOption> {
     noOptionsText?: 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;
+    /**
+     * Allows typing freeform text that is not present in the options list.
+     * Commits typed text as selected value on Enter or Blur.
+     */
+    allowFreeText?: boolean;
+    /** Renders the select dropdown as a mobile-optimized slide-up bottom sheet */
+    asBottomSheet?: boolean;
+    /** Mobile presentation mode (`"dropdown"` or `"sheet"`) */
+    mobileMode?: 'dropdown' | 'sheet';
 }

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

@@ -0,0 +1,2 @@
+import type { SkeletonComponent } from './Skeleton.types';
+export declare const Skeleton: SkeletonComponent;

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

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

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

@@ -0,0 +1,38 @@
+import type { ComponentPropsWithoutRef, ElementType, JSX } from 'react';
+import type { PolymorphicRef } from '../common-type';
+export type SkeletonVariant = 'text' | 'circular' | 'rectangular' | 'rounded';
+export type SkeletonAnimation = 'pulse' | 'wave' | 'none';
+export interface SkeletonBaseProps {
+    /**
+     * Shape variant of the skeleton element
+     * @default "text"
+     */
+    variant?: SkeletonVariant;
+    /**
+     * Animation style for the placeholder shimmer
+     * @default "pulse"
+     */
+    animation?: SkeletonAnimation;
+    /**
+     * Explicit width (number in px or CSS string like "100%", "200px")
+     */
+    width?: number | string;
+    /**
+     * Explicit height (number in px or CSS string like "1rem", "40px")
+     */
+    height?: number | string;
+    /**
+     * Optional custom border radius override
+     */
+    borderRadius?: number | string;
+}
+export type PolymorphicSkeletonProps<C extends ElementType, Props = {}> = Props & {
+    as?: C;
+} & Omit<ComponentPropsWithoutRef<C>, keyof Props | 'as'>;
+export type SkeletonProps<C extends ElementType = 'div'> = PolymorphicSkeletonProps<C, SkeletonBaseProps>;
+export interface SkeletonComponent {
+    <C extends ElementType = 'div'>(props: SkeletonProps<C> & {
+        ref?: PolymorphicRef<C>;
+    }): JSX.Element;
+    displayName?: string;
+}

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

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

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

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

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

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

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

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export type StatusPillTheme = 'success' | 'warning' | 'danger' | 'info' | 'secondary';
+export type StatusPillSize = 'sm' | 'md';
+export interface StatusPillProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Status theme tone
+     * @default "secondary"
+     */
+    theme?: StatusPillTheme;
+    /**
+     * Size variant controlling padding and text size
+     * @default "sm"
+     */
+    size?: StatusPillSize;
+    /**
+     * Display indicator dot inside the status pill
+     * @default true
+     */
+    dot?: boolean;
+    /**
+     * Enable pulsing animation on indicator dot
+     * @default false
+     */
+    pulse?: boolean;
+    /**
+     * Label content of the status pill
+     */
+    children: ReactNode;
+}

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

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

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

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

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

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