@pk-design/react-tailwind 1.5.4 → 1.7.0

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

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

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

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

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

@@ -0,0 +1,42 @@
+import React from 'react';
+export type SwipeableActionTheme = 'primary' | 'secondary' | 'danger' | 'warning' | 'info' | 'success' | 'gray';
+export interface SwipeableAction {
+    /** Unique identifier for the action */
+    id: string;
+    /** Text label displayed on the action button */
+    label?: string;
+    /** Icon component or node */
+    icon?: React.ReactNode;
+    /** Color theme for the action button */
+    theme?: SwipeableActionTheme;
+    /** Custom class overrides for the action button */
+    className?: string;
+    /** Click handler triggered when action button is tapped */
+    onClick: () => void;
+}
+export interface SwipeableRowProps {
+    /** The main content node rendered inside the swipeable row */
+    children: React.ReactNode;
+    /** Action buttons revealed when swiping right (from left edge) */
+    leftActions?: SwipeableAction[];
+    /** Action buttons revealed when swiping left (from right edge) */
+    rightActions?: SwipeableAction[];
+    /** Action button width in pixels (defaults to 76px per action button) */
+    actionWidth?: number;
+    /** Minimum drag threshold in pixels to trigger row expansion (defaults to 40px) */
+    threshold?: number;
+    /** Execute the primary action automatically when full swipe threshold is reached */
+    fullSwipeToExecute?: boolean;
+    /** Full swipe threshold in pixels or percentage of width (defaults to 180px) */
+    fullSwipeThreshold?: number;
+    /** Disabled state to lock swipe interactions */
+    disabled?: boolean;
+    /** Outer container wrapper class */
+    className?: string;
+    /** Inner content wrapper class */
+    contentClassName?: string;
+    /** Callback fired when row snaps open */
+    onOpen?: (direction: 'left' | 'right') => void;
+    /** Callback fired when row returns to closed state */
+    onClose?: () => void;
+}

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

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

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

@@ -0,0 +1,5 @@
+import type { SwipeableTabsProps } from './SwipeableTabs.types';
+export declare function SwipeableTabs({ items, activeId: externalActiveId, defaultActiveId, onChange, swipeable, threshold, headerVariant, containerClass, headerClass, contentClass, }: SwipeableTabsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SwipeableTabs {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,38 @@
+import type { ReactNode } from 'react';
+export interface SwipeableTabItem {
+    /** Unique tab identifier */
+    id: string;
+    /** Tab header label */
+    label: ReactNode;
+    /** Tab panel content element */
+    content: ReactNode;
+    /** Icon rendered next to label */
+    icon?: ReactNode;
+    /** Notification badge text or number */
+    badge?: string | number;
+    /** Disables tab selection */
+    disabled?: boolean;
+}
+export type SwipeableTabsHeaderVariant = 'default' | 'pills' | 'segmented';
+export interface SwipeableTabsProps {
+    /** Array of tab items */
+    items: SwipeableTabItem[];
+    /** Controlled active tab ID */
+    activeId?: string;
+    /** Default active tab ID (uncontrolled mode) */
+    defaultActiveId?: string;
+    /** Callback fired when active tab changes */
+    onChange?: (id: string) => void;
+    /** Enables touch swipe navigation (default: true) */
+    swipeable?: boolean;
+    /** Minimum horizontal swipe distance threshold in px (default: 50) */
+    threshold?: number;
+    /** Visual tab header variant ('default' | 'pills' | 'segmented', default: 'default') */
+    headerVariant?: SwipeableTabsHeaderVariant;
+    /** Outer container class string */
+    containerClass?: string;
+    /** Tab header row class string */
+    headerClass?: string;
+    /** Tab panel view container class string */
+    contentClass?: string;
+}

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

@@ -0,0 +1,2 @@
+export { SwipeableTabs } from './SwipeableTabs';
+export type { SwipeableTabsProps, SwipeableTabItem, SwipeableTabsHeaderVariant, } from './SwipeableTabs.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;
 }>;

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

@@ -1,55 +1,100 @@
+import type { ReactNode } from 'react';
+/**
+ * Visual style variant of the toast container.
+ * - `accent` — default clean container with top/left accent bar
+ * - `filled` — solid vibrant color tile with high contrast
+ * - `outlined` — subtle border with badge icon
+ * - `glass` — modern glassmorphism with backdrop blur
+ */
+export type ToastVariant = 'accent' | 'filled' | 'outlined' | 'glass';
+/**
+ * Utility type mapping the 4 possible toast types.
+ */
+export type ToastType = 'success' | 'error' | 'info' | 'warning';
 /**
  * Props passed to the Toast UI component.
- * This component is rendered internally by the ToastProvider.
+ * Managed internally by ToastProvider.
  */
 export interface ToastProps {
     /**
      * Unique identifier of the toast instance.
-     * Generated internally by ToastProvider.
      */
     id: number;
     /**
-     * The message text displayed inside the toast.
+     * Optional headline title displayed above message.
+     */
+    title?: ReactNode;
+    /**
+     * Main text message displayed inside the toast.
+     */
+    message: ReactNode;
+    /**
+     * Visual intent style of the toast.
+     */
+    type: ToastType;
+    /**
+     * Container variant style.
+     * Defaults to `"accent"`.
+     */
+    variant?: ToastVariant;
+    /**
+     * Optional action button.
      */
-    message: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
     /**
-     * Visual style of the toast based on its purpose.
-     * - `success` — positive confirmations
-     * - `error` — failures or critical issues
-     * - `info` — general helpful information
-     * - `warning` — caution or attention required
+     * Optional custom icon override slot.
      */
-    type: 'success' | 'error' | 'info' | 'warning';
+    icon?: ReactNode;
+    /**
+     * Controls whether an animated auto-close progress bar is displayed.
+     * Defaults to `true` when autoClose is enabled.
+     */
+    showProgressBar?: boolean;
+    /**
+     * Total duration in milliseconds for progress bar countdown.
+     */
+    duration?: number;
+    /**
+     * State indicating whether auto-close countdown is paused (e.g. on hover).
+     */
+    isPaused?: boolean;
     /**
      * Triggers removal of the toast.
-     * Managed internally by the ToastProvider.
      */
     onClose: () => void;
     /**
-     * Optional additional class names to customize the toast container.
+     * Optional additional class names.
      */
     className?: string;
 }
 /**
- * Utility type mapping the 4 possible toast types.
- */
-export type ToastType = ToastProps['type'];
-/**
- * Options passed when calling `showToast()`.
+ * Options passed when calling `showToast()` or `toast.success()`.
  */
 export interface ToastOptions {
     /**
-     * The toast visual style.
-     * Defaults to `"info"` if not provided.
+     * Optional headline title above message.
+     */
+    title?: ReactNode;
+    /**
+     * The toast visual intent type.
+     * Defaults to `"info"`.
      */
     type?: ToastType;
+    /**
+     * Container variant style (`accent`, `filled`, `outlined`, `glass`).
+     * Defaults to `"accent"`.
+     */
+    variant?: ToastVariant;
     /**
      * Duration the toast stays visible (in milliseconds).
-     * Defaults to 3000 ms.
+     * Defaults to 4000 ms.
      */
     duration?: number;
     /**
-     * Should the toast automatically close after its duration?
+     * Should the toast automatically close after duration?
      * Defaults to `true`.
      */
     autoClose?: boolean;
@@ -58,24 +103,41 @@ export interface ToastOptions {
      * Defaults to `true`.
      */
     pauseOnHover?: boolean;
+    /**
+     * Controls whether the auto-close progress bar is shown.
+     * Defaults to `true`.
+     */
+    showProgressBar?: boolean;
+    /**
+     * Optional action button inside toast (e.g. `{ label: "Undo", onClick: ... }`).
+     */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /**
+     * Optional custom icon element.
+     */
+    icon?: ReactNode;
 }
 /**
  * Internal structure stored inside the ToastProvider state.
- * This is NOT exposed publicly.
  */
 export interface IToast {
-    /** Unique toast ID */
     id: number;
-    /** Toast message */
-    message: string;
-    /** Toast type variant */
+    title?: ReactNode;
+    message: ReactNode;
     type: ToastType;
-    /** Toast lifetime in milliseconds */
+    variant: ToastVariant;
     duration: number;
-    /** Whether the toast will auto-close */
     autoClose: boolean;
-    /** Whether hover pauses auto closing */
     pauseOnHover: boolean;
+    showProgressBar: boolean;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    icon?: ReactNode;
 }
 /**
  * The methods exposed by the ToastProvider context.
@@ -83,35 +145,47 @@ export interface IToast {
  */
 export interface ToastContextType {
     /**
-     * Imperatively show a toast message.
-     *
-     * @example
-     * showToast("Saved!", { type: "success" })
+     * Imperatively show a toast notification.
      */
-    showToast: (message: string, options?: ToastOptions) => void;
+    showToast: (message: ReactNode, options?: ToastOptions) => number;
     /**
      * Manually closes a toast by ID.
-     * Normally handled internally.
      */
     closeToast: (id: number) => void;
+    /**
+     * Shorthand object providing `toast.success()`, `toast.error()`, `toast.info()`, `toast.warning()`, `toast.dismiss()`, `toast.dismissAll()`.
+     */
+    toast: {
+        show: (message: ReactNode, options?: ToastOptions) => number;
+        success: (message: ReactNode, options?: ToastOptions) => number;
+        error: (message: ReactNode, options?: ToastOptions) => number;
+        info: (message: ReactNode, options?: ToastOptions) => number;
+        warning: (message: ReactNode, options?: ToastOptions) => number;
+        dismiss: (id: number) => void;
+        dismissAll: () => void;
+    };
 }
 /**
- * All supported toast placements.
- * Used by `<ToastProvider placement=\"...\"/>`
+ * All supported toast placements on screen.
  */
 export type ToastPlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center';
 /**
  * Props for the ToastProvider.
- * Wrap your application with this provider to enable toast notifications.
  */
 export interface ToastProviderProps {
+    children: ReactNode;
     /**
-     * Your application or subtree where toast notifications should be available.
-     */
-    children: React.ReactNode;
-    /**
-     * Controls where toasts appear on the screen.
+     * Position on screen where toasts appear.
      * Defaults to `"top-right"`.
      */
     placement?: ToastPlacement;
+    /**
+     * Maximum number of toasts visible simultaneously.
+     * Defaults to `5`.
+     */
+    maxToasts?: number;
+    /**
+     * Optional extra container class name override.
+     */
+    className?: string;
 }

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

@@ -1,7 +1,4 @@
-import React, { type ReactNode } from 'react';
-import type { ToastContextType, ToastPlacement } from './Toast.types';
+import React from 'react';
+import type { ToastContextType, ToastProviderProps } from './Toast.types';
 export declare const useToast: () => ToastContextType;
-export declare const ToastProvider: React.FC<{
-    children: ReactNode;
-    placement?: ToastPlacement;
-}>;
+export declare const ToastProvider: React.FC<ToastProviderProps>;

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

@@ -0,0 +1,5 @@
+import type { WheelPickerProps } from './WheelPicker.types';
+export declare function WheelPicker({ columns, height, itemHeight, onChange, disabled, containerClass, }: WheelPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace WheelPicker {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,35 @@
+import type { ReactNode } from 'react';
+export interface WheelPickerOption {
+    /** Value identifier */
+    value: string | number;
+    /** Display label or element */
+    label: ReactNode;
+    /** Disables option selection */
+    disabled?: boolean;
+}
+export interface WheelPickerColumn {
+    /** Unique column identifier */
+    id: string;
+    /** Column options list */
+    options: WheelPickerOption[];
+    /** Controlled active value for column */
+    value?: string | number;
+    /** Default active value for column */
+    defaultValue?: string | number;
+    /** Callback fired when column value changes */
+    onChange?: (val: string | number) => void;
+}
+export interface WheelPickerProps {
+    /** Array of column configurations */
+    columns: WheelPickerColumn[];
+    /** Height of wheel container in px (default: 200) */
+    height?: number;
+    /** Height of each item row in px (default: 40) */
+    itemHeight?: number;
+    /** Combined change callback fired when any column updates */
+    onChange?: (values: Record<string, string | number>) => void;
+    /** Disables interaction across all columns */
+    disabled?: boolean;
+    /** Custom container class string */
+    containerClass?: string;
+}

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

@@ -0,0 +1,2 @@
+export { WheelPicker } from './WheelPicker';
+export type { WheelPickerProps, WheelPickerColumn, WheelPickerOption } from './WheelPicker.types';

package/dist/types/components/common-responsive.d.ts

@@ -0,0 +1,57 @@
+import type { CSSProperties } from 'react';
+/**
+ * Shared class-name lookup tables for `Flex`/`Grid` (and their `.Item`/`.Col`
+ * sub-components).
+ *
+ * These are intentionally plain object literals with fully spelled-out class
+ * names (e.g. `'sm:col-span-6'`) rather than strings built with template
+ * interpolation (e.g. `` `sm:col-span-${n}` ``). Tailwind's JIT compiler
+ * discovers classes by statically scanning file text for literal substrings —
+ * it does not execute this code — so any class name assembled at runtime
+ * would never be generated into the final stylesheet. Keep every entry here
+ * fully literal.
+ */
+export type ResponsiveGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+export type ResponsiveAlign = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+export type ResponsiveJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
+export type ResponsiveDirection = 'row' | 'row-reverse' | 'col' | 'col-reverse';
+export type ResponsiveWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
+export type ResponsiveOrder = 'first' | 'last' | number;
+export declare const GAP_MAP: Record<ResponsiveGap, string>;
+export declare const GAP_X_MAP: Record<ResponsiveGap, string>;
+export declare const GAP_Y_MAP: Record<ResponsiveGap, string>;
+export declare const ALIGN_MAP: Record<ResponsiveAlign, string>;
+export declare const JUSTIFY_MAP: Record<ResponsiveJustify, string>;
+export declare const DIRECTION_MAP: Record<ResponsiveDirection, string>;
+export declare const WRAP_MAP: Record<ResponsiveWrap, string>;
+/**
+ * Resolves the `order` prop to inline styles when it's a raw number.
+ *
+ * `'first'` / `'last'` map to the static `order-first`/`order-last` Tailwind
+ * utilities (safe, since those exact class names are literal elsewhere).
+ * Arbitrary numeric orders can't be expressed as a safe literal class (the
+ * value is unbounded), so they're applied as an inline `order` style instead
+ * — that works regardless of what the consuming app's Tailwind build scans.
+ */
+export declare const resolveOrderStyle: (order?: ResponsiveOrder) => CSSProperties | undefined;
+export declare const resolveOrderClassName: (order?: ResponsiveOrder) => string | undefined;
+/** Width-fraction span classes used by `Flex.Item` (unprefixed / base breakpoint). */
+export declare const FLEX_SPAN_MAP: Record<string, string>;
+export declare const FLEX_SM_SPAN_MAP: Record<string, string>;
+export declare const FLEX_MD_SPAN_MAP: Record<string, string>;
+export declare const FLEX_LG_SPAN_MAP: Record<string, string>;
+export declare const FLEX_XL_SPAN_MAP: Record<string, string>;
+export declare const FLEX_XXL_SPAN_MAP: Record<string, string>;
+/** `col-span-*` classes used by `Grid.Col` (unprefixed / base breakpoint). */
+export declare const GRID_SPAN_MAP: Record<string, string>;
+export declare const GRID_SM_SPAN_MAP: Record<string, string>;
+export declare const GRID_MD_SPAN_MAP: Record<string, string>;
+export declare const GRID_LG_SPAN_MAP: Record<string, string>;
+export declare const GRID_XL_SPAN_MAP: Record<string, string>;
+export declare const GRID_XXL_SPAN_MAP: Record<string, string>;
+/**
+ * Preset track-count classes for `Grid`'s `cols` prop. Each preset
+ * progressively reveals more columns at wider breakpoints so a grid is
+ * responsive out of the box without the caller specifying per-item spans.
+ */
+export declare const GRID_COLS_MAP: Record<string, string>;