@pk-design/react-tailwind 1.6.0 → 1.7.1

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

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+export interface MobileHeaderAction {
+    /** Unique action identifier */
+    id: string;
+    /** Icon rendered in right actions area */
+    icon: ReactNode;
+    /** Accessible title/label for action */
+    label: string;
+    /** Click handler callback */
+    onClick: () => void;
+    /** Optional notification badge text or number */
+    badge?: string | number;
+    /** Badge color variant */
+    badgeVariant?: 'danger' | 'info' | 'success';
+    /** Disables action click */
+    disabled?: boolean;
+}
+export interface MobileHeaderProps {
+    /** Main header title text or ReactNode */
+    title?: ReactNode;
+    /** Secondary subtitle text or sub-heading */
+    subtitle?: ReactNode;
+    /** Title text alignment ('center' | 'left', default: 'center') */
+    titleAlign?: 'center' | 'left';
+    /** Back button click handler */
+    onBack?: () => void;
+    /** Back button accessible label (default: "Back") */
+    backLabel?: string;
+    /** Custom leading element on left (e.g. Hamburger menu icon) */
+    leading?: ReactNode;
+    /** Right side action items */
+    actions?: MobileHeaderAction[];
+    /** Enables in-header search bar layout */
+    searchable?: boolean;
+    /** Controlled search input value */
+    searchValue?: string;
+    /** Search input change callback */
+    onSearchChange?: (value: string) => void;
+    /** Search input placeholder text (default: "Search...") */
+    searchPlaceholder?: string;
+    /** Sticky top positioning (default: true) */
+    sticky?: boolean;
+    /** Transparent background with backdrop blur */
+    transparent?: boolean;
+    /** Sub-header slot rendered below main header row (e.g. Filter tabs) */
+    bottomSlot?: ReactNode;
+    /** Outer container class string */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { MobileHeader } from './MobileHeader';
+export type { MobileHeaderProps, MobileHeaderAction } from './MobileHeader.types';

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

@@ -0,0 +1,6 @@
+import type { BaseOption } from '../SelectBox/SelectBox.types';
+import type { MobilePickerProps } from './MobilePicker.types';
+export declare function MobilePicker<T extends BaseOption | string = BaseOption>(props: MobilePickerProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace MobilePicker {
+    var displayName: string;
+}

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

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

@@ -0,0 +1,90 @@
+import { type ReactNode } from 'react';
+import type { BaseOption, OptionGroup, SelectBoxSize } from '../SelectBox/SelectBox.types';
+export interface MobilePickerProps<T extends BaseOption | string = BaseOption> {
+    /** List of options to display in the mobile sheet */
+    options?: T[];
+    /** List of option groups to display in the mobile sheet */
+    groups?: OptionGroup<T>[];
+    /** Currently selected option(s). Single: T | null, Multi: T[] */
+    selected?: T | T[] | null;
+    /** Callback fired when selection changes */
+    onChange?: (value: T | T[] | null) => void;
+    /** Size scale of the trigger field (`"sm"` | `"md"` | `"lg"`). Defaults to `"md"`. */
+    size?: SelectBoxSize;
+    /** Field name for display label (default "label") */
+    labelKey?: string;
+    /** Field name for unique value (default "value") */
+    valueKey?: string;
+    /** Input element id */
+    id?: string;
+    /** Input element name */
+    name?: string;
+    /** Label text displayed above the component */
+    label?: string;
+    /** Label wrapper custom class */
+    labelWrapperClass?: string;
+    /** Label element custom class */
+    labelClass?: string;
+    /** Hint element beside label */
+    labelHint?: string;
+    /** Title shown in the top header of the mobile sheet */
+    title?: string;
+    /** Description shown in the top header of the mobile sheet */
+    description?: string;
+    /** Placeholder text shown when no value is selected */
+    placeholder?: string;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Multi-select mode */
+    multiple?: boolean;
+    /** Maximum selections allowed in multi-select mode */
+    maxSelection?: number;
+    /** Shows a 1-click Select All / Deselect All header in multi-select mode */
+    showSelectAll?: boolean;
+    /** Primary CTA button text for multi-select confirmation (default "Apply Selection") */
+    confirmText?: string;
+    /** Enables search input bar inside the bottom sheet */
+    searchable?: boolean;
+    /** Search input placeholder inside sheet */
+    searchPlaceholder?: string;
+    /** Enables async search mode (server-side search) */
+    async?: boolean;
+    /** Callback triggered when user types in async search mode */
+    onSearch?: (query: string) => Promise<void> | void;
+    /** Loading state spinner inside search bar or option list */
+    loading?: boolean;
+    /** Text displayed in async mode before typing query */
+    typeToSearchText?: string;
+    /** Custom search filter predicate for client-side filtering */
+    filterOption?: (option: T, query: string) => boolean;
+    /** Quick-access 1-tap option chips displayed above option list */
+    quickOptions?: T[];
+    /** Section header for quick-access chips (default "Quick Picks") */
+    quickOptionsTitle?: string;
+    /** Enables clear (X) button on single-select trigger */
+    allowClear?: boolean;
+    /** Enables typing custom freeform text inside the mobile search bar */
+    allowFreeText?: boolean;
+    /** Enables "+ Create" option card when search query doesn't match existing options */
+    allowAdd?: boolean;
+    /** Label prefix for creatable option action (default "Create") */
+    addNewText?: string;
+    /** Callback when user clicks the creatable option */
+    onAdd?: (value: string) => Promise<T | string | void> | T | string | void;
+    /** Icon or element displayed inside the trigger on the left */
+    leftGroup?: ReactNode;
+    /** Shows error state border and message */
+    error?: string | ReactNode;
+    /** Shows error message below field (default true) */
+    showErrorMessage?: boolean;
+    /** Helper guidance message rendered below field */
+    helperText?: ReactNode;
+    /** Message shown in the dropdown when options are empty */
+    noOptionsText?: string;
+    /** Custom option renderer function */
+    renderOption?: (option: T, isSelected: boolean) => ReactNode;
+    /** Outer container class */
+    containerClass?: string;
+    /** Sheet panel custom class */
+    sheetClass?: string;
+}

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

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

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

@@ -0,0 +1,5 @@
+import type { MobileStepperProps } from './MobileStepper.types';
+export declare function MobileStepper({ steps, activeStep, variant, onBack, onNext, backLabel, nextLabel, stepTitle, nextDisabled, backDisabled, nextLoading, className, }: MobileStepperProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MobileStepper {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+export type MobileStepperVariant = 'dots' | 'progress' | 'text';
+export interface MobileStepperProps {
+    /** Total number of steps (e.g. 4) */
+    steps: number;
+    /** Active step index (0-indexed) */
+    activeStep: number;
+    /** Progress layout variant ('dots' | 'progress' | 'text', default: 'dots') */
+    variant?: MobileStepperVariant;
+    /** Back button click handler */
+    onBack?: () => void;
+    /** Next button click handler */
+    onNext?: () => void;
+    /** Custom Back button label (default: "Back") */
+    backLabel?: ReactNode;
+    /** Custom Next button label (default: "Next") */
+    nextLabel?: ReactNode;
+    /** Current step title text (e.g. "Payment Details") */
+    stepTitle?: ReactNode;
+    /** Disables Next button */
+    nextDisabled?: boolean;
+    /** Disables Back button */
+    backDisabled?: boolean;
+    /** Loading spinner on Next button */
+    nextLoading?: boolean;
+    /** Outer container class string */
+    className?: string;
+}

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

@@ -0,0 +1,2 @@
+export { MobileStepper } from './MobileStepper';
+export type { MobileStepperProps, MobileStepperVariant } from './MobileStepper.types';

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

@@ -0,0 +1,5 @@
+import type { PinInputProps } from './PinInput.types';
+export declare function PinInput({ length, value: externalValue, onChange, onComplete, mask, size, type, error, disabled, autoFocus, containerClass, inputClass, }: PinInputProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PinInput {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+export type PinInputSize = 'sm' | 'md' | 'lg';
+export type PinInputType = 'numeric' | 'alphanumeric';
+export interface PinInputProps {
+    /** Number of digit/character boxes (default: 4) */
+    length?: number;
+    /** Controlled PIN input value string */
+    value?: string;
+    /** Change callback fired when value updates */
+    onChange?: (value: string) => void;
+    /** Callback fired when all digits are completely filled */
+    onComplete?: (value: string) => void;
+    /** Masks typed characters with dots for security PINs */
+    mask?: boolean;
+    /** Size scale of digit boxes ('sm' | 'md' | 'lg', default: 'md') */
+    size?: PinInputSize;
+    /** Allowed character type ('numeric' | 'alphanumeric', default: 'numeric') */
+    type?: PinInputType;
+    /** Error state or error message string */
+    error?: boolean | ReactNode;
+    /** Disables input interaction */
+    disabled?: boolean;
+    /** Auto-focuses the first digit input on mount */
+    autoFocus?: boolean;
+    /** Custom container class string */
+    containerClass?: string;
+    /** Custom individual digit input box class string */
+    inputClass?: string;
+}

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

@@ -0,0 +1,2 @@
+export { PinInput } from './PinInput';
+export type { PinInputProps, PinInputSize, PinInputType } from './PinInput.types';

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

@@ -0,0 +1,5 @@
+import type { PullToRefreshProps } from './PullToRefresh.types';
+export declare function PullToRefresh({ onRefresh, pullThreshold, maxPullDistance, disabled, refreshing: externalRefreshing, pullingContent, refreshingContent, children, className, contentClass, }: PullToRefreshProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PullToRefresh {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react';
+export interface PullToRefreshProps {
+    /** Async callback function triggered when user pulls to refresh */
+    onRefresh: () => Promise<void> | void;
+    /** Pull distance threshold in px to trigger refresh (default: 70) */
+    pullThreshold?: number;
+    /** Maximum pull distance in px (default: 120) */
+    maxPullDistance?: number;
+    /** Disables the pull-to-refresh touch gesture */
+    disabled?: boolean;
+    /** Controlled refreshing state */
+    refreshing?: boolean;
+    /** Custom content rendered while pulling down */
+    pullingContent?: ReactNode;
+    /** Custom content rendered while refreshing */
+    refreshingContent?: ReactNode;
+    /** Main scrollable content node */
+    children: ReactNode;
+    /** Container class string */
+    className?: string;
+    /** Content wrapper class string */
+    contentClass?: string;
+}

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

@@ -0,0 +1,2 @@
+export { PullToRefresh } from './PullToRefresh';
+export type { PullToRefreshProps } from './PullToRefresh.types';

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

@@ -29,7 +29,24 @@ export interface QuantityStepperProps extends Omit<InputHTMLAttributes<HTMLInput
      */
     label?: string;
     /**
-     * Size variant controlling button and text dimensions
+     * Optional label hint text displayed next to label
+     */
+    labelHint?: string;
+    /**
+     * Optional helper text rendered beneath the field
+     */
+    helperText?: string;
+    /**
+     * Error message text. Setting this marks field as invalid.
+     */
+    error?: string;
+    /**
+     * Show or hide the error message text underneath
+     * @default true
+     */
+    showErrorMessage?: boolean;
+    /**
+     * Size variant matching Input component dimensions
      * @default "md"
      */
     size?: QuantityStepperSize;

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

@@ -118,4 +118,13 @@ export interface SelectBoxProps<T extends BaseOption | string = BaseOption> {
     onAdd?: (value: string) => Promise<T | string | void> | T | string | void;
     /** Show a clear (X) button for single-select mode */
     allowClear?: boolean;
+    /**
+     * Allows typing freeform text that is not present in the options list.
+     * Commits typed text as selected value on Enter or Blur.
+     */
+    allowFreeText?: boolean;
+    /** Renders the select dropdown as a mobile-optimized slide-up bottom sheet */
+    asBottomSheet?: boolean;
+    /** Mobile presentation mode (`"dropdown"` or `"sheet"`) */
+    mobileMode?: 'dropdown' | 'sheet';
 }

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/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>;

package/dist/types/index.d.ts

@@ -1,9 +1,11 @@
 import './styles/tokens.css';
 export * from './components/Accordion';
+export * from './components/ActionSheet';
 export * from './components/Alert';
 export * from './components/Badge';
 export * from './components/Banner';
 export * from './components/BodyText';
+export * from './components/BottomNavigation';
 export * from './components/Breadcrumb';
 export * from './components/Button';
 export * from './components/ButtonGroup';
@@ -16,17 +18,28 @@ export * from './components/Dot';
 export * from './components/Drawer';
 export * from './components/Dropdown';
 export * from './components/EmptyState';
+export * from './components/FloatingActionButton';
+export * from './components/Flex';
+export * from './components/Grid';
 export * from './components/HeadingText';
 export * from './components/Input';
 export * from './components/Label';
 export * from './components/Loader';
 export * from './components/Pagination';
 export * from './components/PasswordInput';
+export * from './components/PinInput';
+export * from './components/PullToRefresh';
 export * from './components/Radio';
 export * from './components/RadioGroup';
 export * from './components/RadioSwitch';
 export * from './components/RangeInput';
 export * from './components/RangeSlider';
+export * from './components/MobilePicker';
+export * from './components/WheelPicker';
+export * from './components/MobileHeader';
+export * from './components/MobileStepper';
+export * from './components/DataList';
+export * from './components/SwipeableRow';
 export * from './components/SelectBox';
 export * from './components/Skeleton';
 export * from './components/QuantityStepper';
@@ -34,6 +47,7 @@ export * from './components/SegmentedControl';
 export * from './components/StatusPill';
 export * from './components/StickyActionBar';
 export * from './components/Tabs';
+export * from './components/SwipeableTabs';
 export * from './components/Table';
 export * from './components/TextContent';
 export * from './components/Textarea';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pk-design/react-tailwind",
-  "version": "1.6.0",
+  "version": "1.7.1",
   "main": "dist/react-tailwind.cjs.js",
   "module": "dist/react-tailwind.es.js",
   "types": "dist/types/index.d.ts",
@@ -8,10 +8,18 @@
     ".": {
       "types": "./dist/types/index.d.ts",
       "import": "./dist/react-tailwind.es.js",
-      "require": "./dist/react-tailwind.cjs.js"
+      "default": "./dist/react-tailwind.cjs.js"
     },
-    "./react-tailwind.css": "./dist/react-tailwind.css"
+    "./components/*": {
+      "types": "./dist/types/components/*/index.d.ts",
+      "import": "./dist/es/components/*/index.js",
+      "default": "./dist/cjs/components/*/index.js"
+    },
+    "./*": "./dist/*"
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "dist"
   ],