@pk-design/react-tailwind 1.5.4 → 1.6.0

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/HeadingText/HeadingText.d.ts

@@ -1,9 +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>;
+import type { HeadingTextProps } from './HeadingText.types';
+export declare const HeadingText: React.ForwardRefExoticComponent<HeadingTextProps & React.RefAttributes<HTMLHeadingElement>> & {
+    Title: React.ForwardRefExoticComponent<HeadingTextProps & React.RefAttributes<HTMLHeadingElement>>;
+    SubTitle: React.ForwardRefExoticComponent<HeadingTextProps & React.RefAttributes<HTMLHeadingElement>>;
+    SubTitle2: React.ForwardRefExoticComponent<HeadingTextProps & React.RefAttributes<HTMLHeadingElement>>;
+    SubTitle3: React.ForwardRefExoticComponent<HeadingTextProps & React.RefAttributes<HTMLHeadingElement>>;
+    SubTitle4: React.ForwardRefExoticComponent<HeadingTextProps & React.RefAttributes<HTMLHeadingElement>>;
 };

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

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

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

@@ -1,5 +1,58 @@
-import type { ReactNode } from 'react';
-export interface HeadingTextProps {
-    children: ReactNode;
+import type { HTMLAttributes, ReactNode } from 'react';
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HeadingSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
+export type HeadingWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold';
+export type HeadingAlign = 'left' | 'center' | 'right';
+export interface HeadingTextProps extends HTMLAttributes<HTMLHeadingElement> {
+    children?: ReactNode;
+    /**
+     * Heading HTML element level: 1 (h1), 2 (h2), 3 (h3), 4 (h4), 5 (h5), 6 (h6).
+     * Defaults to `1`.
+     */
+    level?: HeadingLevel;
+    /**
+     * Visual font size override.
+     */
+    size?: HeadingSize;
+    /**
+     * Font weight override.
+     */
+    weight?: HeadingWeight;
+    /**
+     * Muted secondary text color.
+     */
+    muted?: boolean;
+    /**
+     * Error red text color.
+     */
+    error?: boolean;
+    /**
+     * Success green text color.
+     */
+    success?: boolean;
+    /**
+     * Warning amber text color.
+     */
+    warning?: boolean;
+    /**
+     * Info blue text color.
+     */
+    info?: boolean;
+    /**
+     * Inverted text color for dark backgrounds.
+     */
+    invert?: boolean;
+    /**
+     * Text alignment (`left`, `center`, `right`).
+     */
+    align?: HeadingAlign;
+    /**
+     * Letter spacing / tracking (`tighter`, `tight`, `normal`, `wide`).
+     */
+    tracking?: 'tighter' | 'tight' | 'normal' | 'wide';
+    /**
+     * Truncate text with ellipsis.
+     */
+    truncate?: boolean;
     className?: string;
 }

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

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

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

@@ -1,12 +1,45 @@
 import type { InputHTMLAttributes, ReactNode } from 'react';
 import type { InputCustomProps } from '../common-type';
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, InputCustomProps {
+export type InputSize = 'sm' | 'md' | 'lg';
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'>, InputCustomProps {
     /**
-     * Space for right icon
+     * Size scale of the input component.
+     * - `sm` (compact 28px/text-xs)
+     * - `md` (standard 36px/text-sm default)
+     * - `lg` (prominent 44px/text-base)
+     * Defaults to `"md"`.
+     */
+    size?: InputSize;
+    /**
+     * Space for right icon / control
      */
     rightGroup?: ReactNode;
     /**
-     * Space for left icon
+     * Space for left icon / control
      */
     leftGroup?: ReactNode;
+    /**
+     * Static prefix addon text or element (e.g. `"https://"` or `"$"`).
+     */
+    prefix?: ReactNode;
+    /**
+     * Static suffix addon text or element (e.g. `".com"` or `"USD"`).
+     */
+    suffix?: ReactNode;
+    /**
+     * Renders a 1-Click clear `✕` button when text is present.
+     */
+    clearable?: boolean;
+    /**
+     * Callback fired when clear button is clicked.
+     */
+    onClear?: () => void;
+    /**
+     * Renders a live character count (`12 / 50`) below the input field.
+     */
+    showCount?: boolean;
+    /**
+     * Helper message rendered below the input field.
+     */
+    helperText?: ReactNode;
 }

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import './loader.css';
 export type LoaderSize = 'xs' | 'sm' | 'md' | 'lg';
-interface LoaderProps {
+interface LoaderProps extends React.SVGAttributes<SVGSVGElement> {
     size?: LoaderSize;
     className?: string;
 }

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

@@ -1,6 +1,10 @@
-import { type InputProps } from '../Input';
-export interface PasswordInputProps extends Omit<InputProps, 'rightGroup' | 'type' | 'placeholder'> {
-}
+import type { PasswordInputProps } from './PasswordInput.types';
 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 declare function evaluatePasswordStrength(val: string): {
+    score: number;
+    label: 'Weak' | 'Fair' | 'Good' | 'Strong';
+    colorClass: string;
+    percent: number;
+};
+export declare const PasswordInput: import("react").ForwardRefExoticComponent<PasswordInputProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,8 @@
+import type { InputProps } from '../Input';
+export interface PasswordInputProps extends Omit<InputProps, 'rightGroup' | 'type'> {
+    /**
+     * Automatically evaluates and renders a visual password strength indicator bar
+     * (Weak, Fair, Good, Strong) based on length, digits, symbols, and uppercase letters.
+     */
+    showStrength?: boolean;
+}

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

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

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

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

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

@@ -0,0 +1,49 @@
+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;
+    /**
+     * Size variant controlling button and text 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>;