@pk-design/react-tailwind 1.0.6 → 1.1.0

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

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react';
+/**
+ * Single tab item.
+ */
+export type TabsItem = {
+    /** Visible label for the tab */
+    label: ReactNode;
+    /** Content rendered inside the TabPanel for this tab */
+    content: ReactNode;
+    /** Optional icon (ReactNode) shown before the label */
+    icon?: ReactNode;
+    /** optional id or key; if missing index will be used */
+    id?: string | number;
+};
+/**
+ * Tabs component props
+ */
+export interface TabsProps {
+    /**
+     * Tabs data (label + panel). Order defines visual order.
+     */
+    tabs: TabsItem[];
+    /**
+     * Variant for the tab list's appearance.
+     * Only supported values: "underline" | "segmented" | "solid"
+     *
+     * - "underline" (default): modern underline indicator under active tab
+     * - "segmented": segmented pill style where selected tab looks like a pill
+     * - "solid": solid nav tabs (selected tab has solid background)
+     */
+    variant?: 'underline' | 'segmented' | 'solid';
+    /**
+     * Starting tab index (controlled by TabGroup defaultIndex)
+     */
+    defaultIndex?: number;
+    /**
+     * Extra classes for the outer group container
+     */
+    className?: string;
+    /**
+     * Extra classes to apply to the TabList wrapper
+     */
+    listClass?: string;
+    /**
+     * Extra classes to apply to individual TabPanel wrapper
+     */
+    panelClass?: string;
+}

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

@@ -1,2 +1 @@
-import React from 'react';
-export declare const Tabs: React.FC;
+export * from './Tabs';

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

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

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

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

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

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from 'react';
+export interface TextContentProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Render extra-small sized text (`text-xs/5`).
+     */
+    xsmall?: boolean;
+    /**
+     * Render small sized text (`text-sm/6`).
+     */
+    small?: boolean;
+    /**
+     * Render bold/semibold text (`font-semibold`).
+     */
+    strong?: boolean;
+    /**
+     * Apply muted gray tone (commonly used for secondary text).
+     */
+    muted?: boolean;
+    /**
+     * Apply error color styling (`text-red-500`).
+     */
+    error?: boolean;
+}

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

@@ -1,10 +1,2 @@
-import React, { type HTMLAttributes, type JSX, type JSXElementConstructor } from 'react';
-export interface TextContentProps extends HTMLAttributes<HTMLSpanElement> {
-    xsmall?: boolean;
-    small?: boolean;
-    strong?: boolean;
-    muted?: boolean;
-    error?: boolean;
-    as?: keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
-}
-export declare const TextContent: React.FC<TextContentProps>;
+export * from './TextContent';
+export * from './TextContent.types';

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

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

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

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

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

@@ -0,0 +1,6 @@
+import type { ReactNode, TextareaHTMLAttributes } from 'react';
+import type { InputCustomProps } from '../common-type';
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, InputCustomProps {
+    rightGroup?: ReactNode | null;
+    leftGroup?: ReactNode | null;
+}

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

@@ -1,7 +1,2 @@
-import React, { type TextareaHTMLAttributes, type ReactNode } from 'react';
-import { type InputCustomProps } from '../common-type';
-export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>, InputCustomProps {
-    rightGroup?: ReactNode | null;
-    leftGroup?: ReactNode | null;
-}
-export declare const Textarea: React.FC<TextareaProps>;
+export * from './Textarea';
+export * from './Textarea.types';

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

@@ -1,9 +1,5 @@
 import React from 'react';
-interface ToastProps {
-    id?: number;
-    message: string;
-    type: 'success' | 'error' | 'info' | 'warning';
-    onClose: () => void;
-}
-declare const Toast: React.FC<ToastProps>;
-export default Toast;
+import { ToastProps } from './Toast.types';
+export declare const Toast: React.FC<ToastProps & {
+    isTop?: boolean;
+}>;

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

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

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

@@ -0,0 +1,117 @@
+/**
+ * Props passed to the Toast UI component.
+ * This component is rendered internally by the ToastProvider.
+ */
+export interface ToastProps {
+    /**
+     * Unique identifier of the toast instance.
+     * Generated internally by ToastProvider.
+     */
+    id: number;
+    /**
+     * The message text displayed inside the toast.
+     */
+    message: string;
+    /**
+     * 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
+     */
+    type: 'success' | 'error' | 'info' | 'warning';
+    /**
+     * Triggers removal of the toast.
+     * Managed internally by the ToastProvider.
+     */
+    onClose: () => void;
+    /**
+     * Optional additional class names to customize the toast container.
+     */
+    className?: string;
+}
+/**
+ * Utility type mapping the 4 possible toast types.
+ */
+export type ToastType = ToastProps['type'];
+/**
+ * Options passed when calling `showToast()`.
+ */
+export interface ToastOptions {
+    /**
+     * The toast visual style.
+     * Defaults to `"info"` if not provided.
+     */
+    type?: ToastType;
+    /**
+     * Duration the toast stays visible (in milliseconds).
+     * Defaults to 3000 ms.
+     */
+    duration?: number;
+    /**
+     * Should the toast automatically close after its duration?
+     * Defaults to `true`.
+     */
+    autoClose?: boolean;
+    /**
+     * If true, hovering over the toast pauses auto-close timer.
+     * Defaults to `true`.
+     */
+    pauseOnHover?: boolean;
+}
+/**
+ * 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 */
+    type: ToastType;
+    /** Toast lifetime in milliseconds */
+    duration: number;
+    /** Whether the toast will auto-close */
+    autoClose: boolean;
+    /** Whether hover pauses auto closing */
+    pauseOnHover: boolean;
+}
+/**
+ * The methods exposed by the ToastProvider context.
+ * Accessible through the `useToast()` hook.
+ */
+export interface ToastContextType {
+    /**
+     * Imperatively show a toast message.
+     *
+     * @example
+     * showToast("Saved!", { type: "success" })
+     */
+    showToast: (message: string, options?: ToastOptions) => void;
+    /**
+     * Manually closes a toast by ID.
+     * Normally handled internally.
+     */
+    closeToast: (id: number) => void;
+}
+/**
+ * All supported toast placements.
+ * Used by `<ToastProvider placement=\"...\"/>`
+ */
+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 {
+    /**
+     * Your application or subtree where toast notifications should be available.
+     */
+    children: React.ReactNode;
+    /**
+     * Controls where toasts appear on the screen.
+     * Defaults to `"top-right"`.
+     */
+    placement?: ToastPlacement;
+}

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

@@ -1,16 +1,7 @@
 import React, { type ReactNode } from 'react';
-type ToastType = 'success' | 'error' | 'info' | 'warning';
-interface ToastOptions {
-    type?: ToastType;
-    duration?: number;
-    autoClose?: boolean;
-}
-interface ToastContextType {
-    showToast: (message: string, options?: ToastOptions) => void;
-    closeToast: (id: number) => void;
-}
+import type { ToastContextType, ToastPlacement } from './Toast.types';
 export declare const useToast: () => ToastContextType;
 export declare const ToastProvider: React.FC<{
     children: ReactNode;
+    placement?: ToastPlacement;
 }>;
-export {};

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

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

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

@@ -1,2 +1,3 @@
 export * from './ToastProvider';
 export * from './Toast';
+export * from './Toast.types';

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

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

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

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

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

@@ -0,0 +1,18 @@
+import { DataTableColumn, DataTableProps } from '../DataTable';
+/**
+ * Props for VirtualizedDataTable
+ */
+export interface VirtualizedDataTableProps extends DataTableProps {
+    /** Height of each row in pixels (required for virtualization) */
+    rowHeight?: number;
+    /** Max height (px) the table body can take. AutoSizer will size to available space. */
+    maxHeight?: number;
+}
+/**
+ * Row props passed to the custom rowComponent API of react-window.
+ * react-window will also pass index, style, and aria attributes.
+ */
+export type VirtualizedRowProps = {
+    items: any[];
+    columns: DataTableColumn[];
+};

package/dist/types/components/VirtualizedDataTable/VirtualizedRow.d.ts

@@ -0,0 +1,5 @@
+import { type RowComponentProps } from 'react-window';
+import { VirtualizedRowProps } from './VirtualizedDataTable.types';
+export declare const VirtualizedRow: ({ index, style, items, columns, gridTemplate, }: RowComponentProps<VirtualizedRowProps & {
+    gridTemplate: string;
+}>) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/types/components/_Dialog/Dialog.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DialogProps } from './Dialog.types';
+import './dialog.css';
+export declare const Dialog: React.FC<DialogProps>;

package/dist/types/components/_Dialog/Dialog.types.d.ts

@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react';
+/**
+ * Available dialog placement modes.
+ */
+export type DialogPosition = 'center' | 'top' | 'bottom' | 'left' | 'right';
+/**
+ * Sizes for the dialog panel when in center/top modes.
+ */
+export type DialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+export interface DialogProps {
+    /**
+     * Controls the visibility of the dialog.
+     */
+    open: boolean;
+    /**
+     * Called when clicking overlay or pressing the ESC key.
+     */
+    onClose?: () => void;
+    /**
+     * Dialog position on the screen.
+     * @default "center"
+     */
+    position?: DialogPosition;
+    /**
+     * Controls dialog width for center/top/bottom modes.
+     * @default "md"
+     */
+    size?: DialogSize;
+    /**
+     * Custom classes for overlay.
+     */
+    overlayClass?: string;
+    /**
+     * Custom classes for the panel.
+     */
+    panelClass?: string;
+    /**
+     * Child content of the dialog panel.
+     */
+    children?: ReactNode;
+    /**
+     * Controls if Dialog should have a backdrop
+     * @default true
+     */
+    backdrop?: boolean;
+    /**
+     * Controls if Dialog should close on ESC key press
+     * @default true
+     */
+    closeOnEscape?: boolean;
+}
+export type DialogSizeMap = Record<DialogSize, string>;
+export type DialogPositionClassMap = Record<DialogPosition, string>;

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

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

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

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import type { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
 export interface InputCustomProps {
     /**
      * Input field label
@@ -29,3 +29,4 @@ export interface InputCustomProps {
      */
     showErrorMessage?: boolean;
 }
+export type PolymorphicProps<C extends ElementType, Props> = Props & Omit<ComponentPropsWithoutRef<C>, keyof Props | 'as'>;

package/dist/types/hooks/use-debounce.d.ts

@@ -0,0 +1,2 @@
+export declare const useDebounce: <T>(value: T, delay: number) => T;
+export declare const useDebounceFn: (fn: (...args: any[]) => void, ms: number) => (...args: any[]) => void;

package/dist/types/hooks/use-is-mobile.d.ts

@@ -0,0 +1 @@
+export declare const useIsMobile: () => boolean;

package/dist/types/hooks/use-is-tablet.d.ts

@@ -0,0 +1 @@
+export declare const useIsTablet: () => boolean;

package/dist/types/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/Button';
 export * from './components/Card';
 export * from './components/Checkbox';
 export * from './components/CheckboxGroup';
+export * from './components/DataTable';
 export * from './components/DetailedInformation';
 export * from './components/Dot';
 export * from './components/Drawer';
@@ -18,19 +19,23 @@ export * from './components/Label';
 export * from './components/Loader';
 export * from './components/Pagination';
 export * from './components/PasswordInput';
-export * from './components/RadioButton';
-export * from './components/RadioButtonGroup';
-export * from './components/RadioSwtich';
+export * from './components/Radio';
+export * from './components/RadioGroup';
+export * from './components/RadioSwitch';
 export * from './components/RangeInput';
+export * from './components/RangeSlider';
 export * from './components/SelectBox';
-export * from './components/Table';
 export * from './components/Tabs';
-export * from './components/Tag';
+export * from './components/Table';
 export * from './components/TextContent';
 export * from './components/Textarea';
 export * from './components/Toast';
+export * from './components/VirtualizedDataTable';
 export * from './components/common-type';
-export * from './components/hooks/use-debounce';
+export * from './hooks/use-debounce';
+export * from './hooks/use-is-mobile';
+export * from './hooks/use-is-tablet';
 export * from './utils/build-classname';
 export * from './utils/is-array';
 export * from './utils/is-empty';
+export * from './utils/get';

package/dist/types/utils/get.d.ts

@@ -0,0 +1 @@
+export declare function get<T = any, R = any>(obj: T, path: string, defaultValue?: R): R;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pk-design/react-tailwind",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "main": "dist/react-tailwind.cjs.js",
   "module": "dist/react-tailwind.es.js",
   "types": "dist/types/index.d.ts",
@@ -20,7 +20,11 @@
     "prepare": "husky",
     "format": "prettier --write .",
     "lint": "prettier --check .",
-    "prepublishOnly": "pnpm run build"
+    "prepublishOnly": "pnpm run build",
+    "predeploy": "cd my-ui-pages && pnpm run build",
+    "deploy": "gh-pages -d my-ui-pages/dist -b gh-pages",
+    "test": "jest --watch",
+    "test:ci": "jest --runInBand --ci"
   },
   "peerDependencies": {
     "@headlessui/react": "^2.2.9",
@@ -34,12 +38,15 @@
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@semantic-release/changelog": "^5.0.1",
+    "@semantic-release/changelog": "~6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^12.0.2",
     "@semantic-release/npm": "^13.1.1",
     "@semantic-release/release-notes-generator": "^13.0.0",
     "@svgr/rollup": "^8.1.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
     "@types/node": "^24.10.0",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
@@ -52,12 +59,17 @@
     "gh-pages": "^6.3.0",
     "globals": "^16.4.0",
     "husky": "^9.1.7",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "jsdom-testing-mocks": "^1.16.0",
     "lint-staged": "^16.2.6",
     "prettier": "^3.6.2",
     "rollup": "^4.24.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "semantic-release": "23.0.0",
+    "ts-jest": "^29.4.5",
     "tslib": "^2.8.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.45.0"
@@ -93,5 +105,9 @@
     "overrides": {
       "conventional-changelog-writer": "6.0.1"
     }
+  },
+  "dependencies": {
+    "@semantic-release/github": "~10.3.5",
+    "react-window": "^2.2.3"
   }
 }

package/dist/types/components/Button/type.d.ts

@@ -1,58 +0,0 @@
-import { type ButtonHTMLAttributes, type HTMLAttributeAnchorTarget, type JSX, type JSXElementConstructor } from 'react';
-export type ButtonTheme = 'primary' | 'secondary' | 'danger';
-export type ButtonVariant = 'outlined' | 'default' | 'plain';
-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
-export type ThemedButtonClass = {
-    [key in ButtonTheme]: {
-        [key in ButtonVariant]: string;
-    };
-};
-export type SizeButtonClass = {
-    [key in ButtonSize]: string;
-};
-export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * Controls button theme
-     * @default "primary"
-     */
-    theme?: ButtonTheme;
-    /**
-     * Controls button variant
-     * @default "default"
-     */
-    variant?: ButtonVariant;
-    /**
-     * Controls button size
-     * @default "md"
-     */
-    size?: ButtonSize;
-    /**
-     * When treating button as Link, use "to"
-     */
-    to?: string;
-    /**
-     * When treating button as Link, "target" for href behaviour
-     */
-    target?: HTMLAttributeAnchorTarget;
-    /**
-     * When render button as some other JSX Element
-     */
-    as?: keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
-    /**
-     * Controls the loading state of the button
-     */
-    loading?: boolean;
-    /**
-     * Text to appear when button is in loading state
-     * @default ""
-     */
-    loadingText?: string;
-    /**
-     * 50% border radius for button
-     */
-    rounded?: boolean;
-    /**
-     * Renders icon only buttons with unique padding on X axis
-     */
-    iconOnly?: boolean;
-}

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

@@ -1,7 +0,0 @@
-import React, { type InputHTMLAttributes } from 'react';
-import { type InputCustomProps } from '../common-type';
-export interface RadioButtonProps extends InputHTMLAttributes<HTMLInputElement>, InputCustomProps {
-    type?: 'radio';
-    wrapperClass?: string;
-}
-export declare const RadioButton: React.FC<RadioButtonProps>;

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

@@ -1,19 +0,0 @@
-import React, { type ChangeEvent, type ReactNode } from 'react';
-type RadionButtonGroupItem = {
-    label: string;
-    value: any;
-};
-export interface RadioButtonGroupProps {
-    name: string;
-    label?: ReactNode;
-    labelClass?: string;
-    labelWrapperClass?: string;
-    labelHint?: ReactNode;
-    containerClass?: string;
-    value?: any;
-    options: string[] | RadionButtonGroupItem[];
-    row?: boolean;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
-}
-export declare const RadioButtonGroup: React.FC<RadioButtonGroupProps>;
-export {};

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

@@ -1,14 +0,0 @@
-import React from 'react';
-import { type RadioGroupProps } from '@headlessui/react';
-export type RadioSwitchItem = string | {
-    label: string;
-    value: string;
-    description?: string;
-};
-export type RadioSwitchProps = RadioGroupProps & {
-    label?: string;
-    selected: string;
-    onChange: (value: string) => void;
-    items: RadioSwitchItem[];
-};
-export declare const RadioSwitch: React.FC<RadioSwitchProps>;

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

@@ -1,12 +0,0 @@
-import React, { type HTMLAttributes, type JSX, type JSXElementConstructor } from 'react';
-export type TagVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error';
-export interface TagProps extends HTMLAttributes<HTMLElement> {
-    as?: keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
-    text: string;
-    onClose?: () => void;
-    variant?: TagVariant;
-}
-export type VariantMap = {
-    [k in TagVariant]: string;
-};
-export declare const Tag: React.FC<TagProps>;

package/dist/types/components/hooks/use-debounce.d.ts

@@ -1 +0,0 @@
-export declare const useDebounce: <T>(value: T, delay: number) => T;