@pk-design/react-tailwind 1.5.4 → 1.6.0

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

@@ -28,6 +28,11 @@ export * from './components/RadioSwitch';
 export * from './components/RangeInput';
 export * from './components/RangeSlider';
 export * from './components/SelectBox';
+export * from './components/Skeleton';
+export * from './components/QuantityStepper';
+export * from './components/SegmentedControl';
+export * from './components/StatusPill';
+export * from './components/StickyActionBar';
 export * from './components/Tabs';
 export * from './components/Table';
 export * from './components/TextContent';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pk-design/react-tailwind",
-  "version": "1.5.4",
+  "version": "1.6.0",
   "main": "dist/react-tailwind.cjs.js",
   "module": "dist/react-tailwind.es.js",
   "types": "dist/types/index.d.ts",