@pk-design/react-tailwind 1.5.4 → 1.6.0

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,11 +114,6 @@ 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 */

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 {};

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

@@ -0,0 +1,30 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface StickyActionBarProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Primary summary content rendered on the left/start side (e.g. Total amount, item count)
+     */
+    summaryContent?: ReactNode;
+    /**
+     * Action buttons rendered on the right/end side (e.g. Save, Cancel buttons)
+     */
+    actionsContent?: ReactNode;
+    /**
+     * Optional expandable drawer content triggered when clicking summary
+     */
+    drawerContent?: ReactNode;
+    /**
+     * Title for the expandable summary drawer
+     * @default "Summary Details"
+     */
+    drawerTitle?: string;
+    /**
+     * Positioning mode for the bar
+     * @default "fixed"
+     */
+    position?: 'fixed' | 'sticky' | 'relative';
+    /**
+     * Custom maximum width container class
+     * @default "max-w-5xl"
+     */
+    containerMaxWidth?: string;
+}

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

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

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

@@ -1,3 +1,3 @@
 import React from 'react';
-import { TextContentProps } from './TextContent.types';
-export declare const TextContent: React.ForwardRefExoticComponent<TextContentProps & React.RefAttributes<HTMLSpanElement>>;
+import type { TextContentProps } from './TextContent.types';
+export declare const TextContent: React.ForwardRefExoticComponent<TextContentProps & React.RefAttributes<HTMLElement>>;

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

@@ -1,23 +1,63 @@
-import type { HTMLAttributes } from 'react';
-export interface TextContentProps extends HTMLAttributes<HTMLSpanElement> {
+import type { HTMLAttributes, JSX, ReactNode } from 'react';
+export type TextContentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type TextContentWeight = 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+export interface TextContentProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
     /**
-     * Render extra-small sized text (`text-xs/5`).
+     * HTML element to render (e.g. `span`, `code`, `mark`, `label`, `b`, `i`, `div`, `time`).
+     * Defaults to `span`.
+     */
+    as?: keyof JSX.IntrinsicElements;
+    /**
+     * Font size variant (`xs`, `sm`, `md`, `lg`, `xl`).
+     */
+    size?: TextContentSize;
+    /**
+     * Font weight variant (`light`, `normal`, `medium`, `semibold`, `bold`).
+     */
+    weight?: TextContentWeight;
+    /**
+     * Shortcut for extra-small text (`text-xs/5`). Retained for backward compatibility.
      */
     xsmall?: boolean;
     /**
-     * Render small sized text (`text-sm/6`).
+     * Shortcut for small text (`text-sm/6`). Retained for backward compatibility.
      */
     small?: boolean;
     /**
-     * Render bold/semibold text (`font-semibold`).
+     * Shortcut for semibold text (`font-semibold`). Retained for backward compatibility.
      */
     strong?: boolean;
     /**
-     * Apply muted gray tone (commonly used for secondary text).
+     * Apply muted gray tone.
      */
     muted?: boolean;
     /**
-     * Apply error color styling (`text-red-500`).
+     * Apply error red text color.
      */
     error?: boolean;
+    /**
+     * Apply success green text color.
+     */
+    success?: boolean;
+    /**
+     * Apply warning amber text color.
+     */
+    warning?: boolean;
+    /**
+     * Apply info blue text color.
+     */
+    info?: boolean;
+    /**
+     * Inverted text color for dark background contexts.
+     */
+    invert?: boolean;
+    /**
+     * Monospace font family (`font-mono`) for code snippets or numbers.
+     */
+    monospace?: boolean;
+    /**
+     * Truncate single line text with ellipsis.
+     */
+    truncate?: boolean;
 }

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

@@ -1,6 +1,40 @@
-import type { ReactNode, TextareaHTMLAttributes } from 'react';
+import type { TextareaHTMLAttributes, ReactNode } from 'react';
 import type { InputCustomProps } from '../common-type';
+export type TextareaSize = 'sm' | 'md' | 'lg';
+export type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
 export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, InputCustomProps {
-    rightGroup?: ReactNode | null;
-    leftGroup?: ReactNode | null;
+    /**
+     * Space for right icon / control
+     */
+    rightGroup?: ReactNode;
+    /**
+     * Space for left icon / control
+     */
+    leftGroup?: ReactNode;
+    /**
+     * Size scale of the textarea.
+     * - `sm` (compact padding/text-xs)
+     * - `md` (standard padding/text-sm default)
+     * - `lg` (prominent padding/text-base)
+     * Defaults to `"md"`.
+     */
+    size?: TextareaSize;
+    /**
+     * Automatically expands textarea height as text lines are typed.
+     * Defaults to `false`.
+     */
+    autoSize?: boolean;
+    /**
+     * Renders a live character count (`140 / 500`) below the textarea.
+     */
+    showCount?: boolean;
+    /**
+     * Helper guidance text rendered below the textarea.
+     */
+    helperText?: ReactNode;
+    /**
+     * CSS resize control behavior.
+     * Defaults to `"vertical"`.
+     */
+    resize?: TextareaResize;
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ToastProps } from './Toast.types';
+import type { ToastProps } from './Toast.types';
 export declare const Toast: React.FC<ToastProps & {
     isTop?: boolean;
 }>;