@pk-design/react-tailwind 1.5.4 → 1.7.0

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

@@ -0,0 +1,5 @@
+import type { ActionSheetProps } from './ActionSheet.types';
+export declare function ActionSheet({ isOpen, onClose, title, description, actions, showCancelButton, cancelLabel, onCancel, closeOnBackdropClick, dragHandle, panelClass, containerClass, }: ActionSheetProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ActionSheet {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,44 @@
+import type { ReactNode } from 'react';
+export type ActionSheetItemTheme = 'default' | 'primary' | 'danger';
+export interface ActionSheetItem {
+    /** Unique action identifier */
+    id: string;
+    /** Display label text */
+    label: ReactNode;
+    /** Optional icon rendered on the left */
+    icon?: ReactNode;
+    /** Optional secondary description text */
+    description?: ReactNode;
+    /** Visual color theme variant ('default' | 'primary' | 'danger') */
+    theme?: ActionSheetItemTheme;
+    /** Disables click interaction */
+    disabled?: boolean;
+    /** Click handler callback */
+    onClick?: () => void;
+}
+export interface ActionSheetProps {
+    /** Controls if the action sheet is open */
+    isOpen: boolean;
+    /** Handler called when sheet backdrop is clicked or closed */
+    onClose: () => void;
+    /** Optional header title */
+    title?: ReactNode;
+    /** Optional header description/subtext */
+    description?: ReactNode;
+    /** List of action items */
+    actions: ActionSheetItem[];
+    /** Displays a separate bottom Cancel button (default: true) */
+    showCancelButton?: boolean;
+    /** Custom text for Cancel button (default: "Cancel") */
+    cancelLabel?: string;
+    /** Callback when Cancel button is clicked */
+    onCancel?: () => void;
+    /** Controls whether clicking backdrop overlay closes the sheet (default: true) */
+    closeOnBackdropClick?: boolean;
+    /** Shows top drag handle pill (default: true) */
+    dragHandle?: boolean;
+    /** Custom class for panel */
+    panelClass?: string;
+    /** Custom class for action items container */
+    containerClass?: string;
+}

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

@@ -0,0 +1,2 @@
+export { ActionSheet } from './ActionSheet';
+export type { ActionSheetProps, ActionSheetItem, ActionSheetItemTheme } from './ActionSheet.types';

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

@@ -1,5 +1,5 @@
 import type { HTMLAttributes, ReactNode } from 'react';
-export type BadgeTheme = 'success' | 'danger' | 'warning' | 'info' | 'secondary';
+export type BadgeTheme = 'success' | 'danger' | 'warning' | 'info' | 'primary' | 'secondary';
 export type BadgeSize = 'sm' | 'md';
 export interface BadgeProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
     /**

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

@@ -1,3 +1,3 @@
 import React from 'react';
-import { BodyTextProps } from './BodyText.types';
+import type { BodyTextProps } from './BodyText.types';
 export declare const BodyText: React.ForwardRefExoticComponent<BodyTextProps & React.RefAttributes<HTMLParagraphElement>>;

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

@@ -1,28 +1,67 @@
-import type { HTMLAttributes, JSX, JSXElementConstructor } from 'react';
+import type { HTMLAttributes, JSX, JSXElementConstructor, ReactNode } from 'react';
+export type BodyTextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type BodyTextWeight = 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+export type BodyTextAlign = 'left' | 'center' | 'right' | 'justify';
 export interface BodyTextProps extends HTMLAttributes<HTMLParagraphElement> {
+    children?: ReactNode;
     /**
-     * Add's `text-sm` class to the element
+     * Font size variant (`xs`, `sm`, `md`, `lg`, `xl`).
+     */
+    size?: BodyTextSize;
+    /**
+     * Font weight variant (`light`, `normal`, `medium`, `semibold`, `bold`).
+     */
+    weight?: BodyTextWeight;
+    /**
+     * Shortcut prop adding `text-sm` class (retained for backward compatibility).
      */
     small?: boolean;
     /**
-     * Add's `font-semibold` class to the element
+     * Shortcut prop adding `font-semibold` class (retained for backward compatibility).
      */
     strong?: boolean;
     /**
-     * Add's `text-gray-500` class to the element
+     * Muted secondary text color.
      */
     muted?: boolean;
     /**
-     * Add's `text-red-500` class to the element
+     * Error red text color.
      */
     error?: boolean;
     /**
-     * Add's `inline-flex items-center gap-2` class to the element
+     * Success green text color.
+     */
+    success?: boolean;
+    /**
+     * Warning amber text color.
+     */
+    warning?: boolean;
+    /**
+     * Info blue text color.
+     */
+    info?: boolean;
+    /**
+     * Renders `inline-flex items-center gap-2`.
      */
     inline?: boolean;
     /**
-     * JSX element to be render in place of `p`
+     * Inverted text color for dark backgrounds.
      */
-    as?: keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
     invert?: boolean;
+    /**
+     * Text alignment (`left`, `center`, `right`, `justify`).
+     */
+    align?: BodyTextAlign;
+    /**
+     * Truncate single line with ellipsis.
+     */
+    truncate?: boolean;
+    /**
+     * Multi-line line clamp count (`1`, `2`, `3`, `4`).
+     */
+    clamp?: 1 | 2 | 3 | 4;
+    /**
+     * JSX element to render in place of `p` (e.g. `div`, `span`, `article`).
+     */
+    as?: keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
 }

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

@@ -0,0 +1,5 @@
+import type { BottomNavigationProps } from './BottomNavigation.types';
+export declare function BottomNavigation({ items, activeId, onChange, fixed, showLabels, theme, activeIndicatorStyle, containerClass, itemClass, }: BottomNavigationProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace BottomNavigation {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+export type BottomNavigationLabelVisibility = 'always' | 'active' | 'never';
+export type BottomNavigationTheme = 'primary' | 'dark' | 'light';
+export interface BottomNavigationItem {
+    /** Unique tab identifier */
+    id: string;
+    /** Display label text */
+    label: ReactNode;
+    /** Icon rendered in standard state */
+    icon: ReactNode;
+    /** Optional custom icon rendered when active */
+    activeIcon?: ReactNode;
+    /** Optional notification badge text or number (e.g. 3 or "NEW") */
+    badge?: string | number;
+    /** Badge color variant ('danger' | 'info' | 'success') */
+    badgeVariant?: 'danger' | 'info' | 'success';
+    /** Disables tab click */
+    disabled?: boolean;
+    /** Custom click handler */
+    onClick?: () => void;
+}
+export interface BottomNavigationProps {
+    /** Array of bottom navigation items (3 to 5 recommended) */
+    items: BottomNavigationItem[];
+    /** Controlled active tab ID */
+    activeId: string;
+    /** Callback fired when a tab is selected */
+    onChange: (id: string) => void;
+    /** Fixed positioning at bottom of viewport (default: true) */
+    fixed?: boolean;
+    /** Controls when tab labels are visible ('always' | 'active' | 'never', default: 'always') */
+    showLabels?: BottomNavigationLabelVisibility;
+    /** Theme styling variant ('primary' | 'dark' | 'light', default: 'light') */
+    theme?: BottomNavigationTheme;
+    /** Active tab indicator visual style ('pill' | 'line' | 'dot' | 'none', default: 'pill') */
+    activeIndicatorStyle?: 'pill' | 'line' | 'dot' | 'none';
+    /** Outer container class string */
+    containerClass?: string;
+    /** Tab button item class string */
+    itemClass?: string;
+}

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

@@ -0,0 +1,2 @@
+export { BottomNavigation } from './BottomNavigation';
+export type { BottomNavigationProps, BottomNavigationItem, BottomNavigationLabelVisibility, BottomNavigationTheme, } from './BottomNavigation.types';

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

@@ -1,3 +1,2 @@
-import React from 'react';
-import { BreadcrumbProps } from './Breadcrumb.types';
-export declare const Breadcrumb: React.FC<BreadcrumbProps>;
+import type { BreadcrumbProps } from './Breadcrumb.types';
+export declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLElement>>;

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

@@ -1,7 +1,7 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 export type BreadcrumbItem = {
     /**
-     * Unique key for each breadcrumn item
+     * Unique key for each breadcrumb item
      */
     key: string;
     /**
@@ -9,21 +9,54 @@ export type BreadcrumbItem = {
      */
     text: string;
     /**
-     * Href Link to navigate using breadcrumb
+     * Href link for navigation
      */
     to?: string;
+    /**
+     * Optional icon displayed before the text label
+     */
+    icon?: ReactNode;
+    /**
+     * Additional custom class for the item element
+     */
+    className?: string;
 };
-export interface BreadcrumbProps {
+export interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
     /**
      * List of breadcrumb items
      */
     items: BreadcrumbItem[];
     /**
-     * Rendered method for breadcrumbItem,
-     * This method is called for all items except the last,
-     * since, last item in breadcrumb will be the current page of user
-     * @param item BreadcrumbItem
-     * @returns ReactNode
+     * Custom render method for breadcrumb items.
+     * If omitted, defaults to standard <a href={item.to}>{item.text}</a>
+     */
+    render?: (item: BreadcrumbItem) => ReactNode;
+    /**
+     * Separator icon or variant ('slash' | 'chevron' | 'dot' | ReactNode). Default is 'slash'
+     */
+    separator?: 'slash' | 'chevron' | 'dot' | ReactNode;
+    /**
+     * Size variant ('sm' | 'md' | 'lg'). Default is 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Maximum number of items to display before collapsing middle items into a '...' dropdown menu
+     */
+    maxItems?: number;
+    /**
+     * Additional container class name
+     */
+    className?: string;
+    /**
+     * Custom class name applied to non-active ancestor links
+     */
+    itemClass?: string;
+    /**
+     * Custom class name applied to the active current page item
+     */
+    activeItemClass?: string;
+    /**
+     * Custom class name applied to separator elements
      */
-    render: (item: BreadcrumbItem) => ReactNode;
+    separatorClass?: string;
 }

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

@@ -1,4 +1,4 @@
-import type { JSX, ElementType, ComponentPropsWithoutRef } from 'react';
+import type { JSX, ElementType, ComponentPropsWithoutRef, ReactNode } from 'react';
 import type { PolymorphicRef } from '../common-type';
 /**
  * Theme variants applied to the Button component.
@@ -7,7 +7,7 @@ import type { PolymorphicRef } from '../common-type';
  *
  * @default "primary"
  */
-export type ButtonTheme = 'primary' | 'secondary' | 'danger';
+export type ButtonTheme = 'primary' | 'secondary' | 'danger' | 'success' | 'warning';
 /**
  * Visual variant of the button.
  *
@@ -36,89 +36,66 @@ export type ThemedButtonClass = {
         [key in ButtonVariant]: string;
     };
 };
-/**
- * Utility: Builds a polymorphic prop type.
- *
- * This allows the component to accept **any HTML element** or **any custom React component**
- * via the `as` prop while automatically inheriting the correct props.
- *
- * Example:
- * ```tsx
- * <Button as="a" href="/home" />
- * <Button as={MyLink} to="/home" customProp />
- * ```
- */
 export type PolymorphicButtonProps<C extends ElementType, Props = {}> = Props & {
     /**
      * The element or component to render.
-     *
-     * Supports:
-     * - HTML elements (e.g., `"button"`, `"a"`, `"div"`)
-     * - React components (e.g., `Link`, `NextLink`, `MyCustomButton`)
-     *
      * @default "button"
      */
     as?: C;
 } & Omit<ComponentPropsWithoutRef<C>, keyof Props | 'as' | 'type' | 'disabled'>;
 /**
  * Core props shared by all Button variants.
- *
- * These do **not** include any HTML attributes — those come from the polymorphic type.
  */
 export interface ButtonBaseProps {
     /**
      * Controls button theme (color palette).
-     *
      * @default "primary"
      */
     theme?: ButtonTheme;
     /**
      * Controls the visual styling of the button.
-     *
      * @default "default"
      */
     variant?: ButtonVariant;
     /**
      * Controls padding, font size, spacing.
-     *
      * @default "md"
      */
     size?: ButtonSize;
+    /**
+     * Icon displayed on the left side of button text.
+     */
+    leftIcon?: ReactNode;
+    /**
+     * Icon displayed on the right side of button text.
+     */
+    rightIcon?: ReactNode;
+    /**
+     * Stretches button to share 100% of container width.
+     * @default false
+     */
+    fullWidth?: boolean;
     /**
      * If true, shows a Loader inside the button.
-     *
-     * While loading:
-     * - children are replaced
-     * - button typically becomes disabled
      */
     loading?: boolean;
     /**
      * Optional text to display next to the loader.
-     *
-     * Only shown when `loading=true`.
-     *
      * @default ""
      */
     loadingText?: string;
     /**
      * Applies 50% border radius, producing a pill-shaped button.
-     *
      * @default false
      */
     rounded?: boolean;
     /**
      * Indicates that the button only contains an icon.
-     *
-     * Adjusts padding to match icon-only UX.
-     *
      * @default false
      */
     iconOnly?: boolean;
     /**
      * Prevents outline styles on keyboard focus.
-     *
-     * Useful for icon buttons or custom focus handling.
-     *
      * @default false
      */
     noOutlineOnFocus?: boolean;
@@ -127,37 +104,14 @@ export interface ButtonBaseProps {
      */
     className?: string;
     /**
-     * The HTML button type.
-     * Only valid when rendering as <button>.
+     * The HTML button type. Only valid when rendering as <button>.
      */
     type?: 'button' | 'submit' | 'reset';
     /**
-     * Standard disabled attribute.
-     * Only applies when as="button".
+     * Standard disabled attribute. Only applies when as="button".
      */
     disabled?: boolean;
 }
-/**
- * Complete Button props,
- * supporting **polymorphic rendering** via the `as` prop.
- *
- * Examples:
- *
- * Render as a native button:
- * ```tsx
- * <Button type="submit">Save</Button>
- * ```
- *
- * Render as a link:
- * ```tsx
- * <Button as="a" href="/pricing" target="_blank">Learn More</Button>
- * ```
- *
- * Render as a custom component:
- * ```tsx
- * <Button as={MyCustomComponent} customProp="123">Custom</Button>
- * ```
- */
 export type ButtonProps<C extends ElementType = 'button'> = PolymorphicButtonProps<C, ButtonBaseProps>;
 export interface ButtonComponent {
     <C extends ElementType = 'button'>(props: ButtonProps<C> & {

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

@@ -44,6 +44,22 @@ export interface ButtonGroupProps {
      * @default "md"
      */
     size?: ButtonSize;
+    /**
+     * Currently selected value (or array of values for multi-select) in toggle mode.
+     * Compares against each child's `value`, `id`, or button label.
+     */
+    value?: string | number | (string | number)[];
+    /**
+     * Callback fired when a button in toggle selection mode is clicked.
+     * Receives the selected button value.
+     */
+    onChange?: (value: any) => void;
+    /**
+     * Disables all child buttons in the group.
+     *
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Rounds the group's outer corners into a full pill shape instead of the
      * size-matched corner radius.

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

@@ -1,2 +1,8 @@
-import type { CardComponent } from './Card.types';
+import type { CardComponent, CardContentProps, CardDescriptionProps, CardFooterProps, CardHeaderProps, CardMediaProps, CardTitleProps } from './Card.types';
 export declare const Card: CardComponent;
+export declare const CardHeader: ({ className, bordered, children, ...props }: CardHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardTitle: ({ className, as: Component, children, ...props }: CardTitleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardDescription: ({ className, children, ...props }: CardDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardContent: ({ className, children, ...props }: CardContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardFooter: ({ className, bordered, children, ...props }: CardFooterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardMedia: ({ className, aspectRatio, alt, ...props }: CardMediaProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,14 +1,35 @@
-import type { ComponentPropsWithoutRef, ElementType, JSX } from 'react';
+import type { ComponentPropsWithoutRef, ElementType, HTMLAttributes, ImgHTMLAttributes, JSX, FC } from 'react';
 import { PolymorphicRef } from '../common-type';
+export type CardVariant = 'outlined' | 'elevated' | 'filled' | 'ghost';
+export type CardRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 export type CardBaseProps = {
     /**
-     * Make card hoverable (adds background transitions)
+     * Surface visual variant ('outlined' | 'elevated' | 'filled' | 'ghost')
+     * @default 'outlined'
+     */
+    variant?: CardVariant;
+    /**
+     * Border radius variant ('none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl')
+     * @default 'xl'
+     */
+    radius?: CardRadius;
+    /**
+     * Make card hoverable (adds subtle background transitions)
      * @default false
      */
     hoverable?: boolean;
     /**
-     * Adds border around the card
-     * @default true
+     * Make card clickable (adds hover elevation lift & pointer cursor)
+     * @default false
+     */
+    clickable?: boolean;
+    /**
+     * Highlights card with a primary brand ring & border
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Adds border around the card. Default is true (when variant='outlined')
      */
     bordered?: boolean;
     /**
@@ -21,56 +42,66 @@ export type CardBaseProps = {
      * @default false
      */
     zeroPadding?: boolean;
+    /**
+     * Optional primary title node for mobile & web card rows
+     */
+    title?: React.ReactNode;
+    /**
+     * Optional secondary subtitle node for mobile & web card rows
+     */
+    subtitle?: React.ReactNode;
+    /**
+     * Leading node (e.g. Avatar, thumbnail image, or icon)
+     */
+    leading?: React.ReactNode;
+    /**
+     * Trailing detail text or action node
+     */
+    trailing?: React.ReactNode;
+    /**
+     * Optional status badge or count pill
+     */
+    badge?: React.ReactNode;
+    /**
+     * Render trailing chevron arrow navigation icon
+     * @default false
+     */
+    showChevron?: boolean;
 };
-/**
- * Utility: Builds a polymorphic prop type.
- *
- * This allows the component to accept **any HTML element** or **any custom React component**
- * via the `as` prop while automatically inheriting the correct props.
- *
- * Example:
- * ```tsx
- * <Card as="a" href="/home" />
- * <Card as={MyLink} to="/home" customProp />
- * ```
- */
 export type PolymorphicCardProps<C extends ElementType, Props = {}> = Props & {
     /**
      * The element or component to render.
-     *
-     * Supports:
-     * - HTML elements (e.g., `"a"`, `"div"`)
-     * - React components (e.g., `Link`, `NextLink`, `MyCustomCard`)
-     *
      * @default "div"
      */
     as?: C;
 } & Omit<ComponentPropsWithoutRef<C>, keyof Props | 'as'>;
-/**
- * Complete Card props,
- * supporting **polymorphic rendering** via the `as` prop.
- *
- * Examples:
- *
- * Render as a native card:
- * ```tsx
- * <Card>Card content</Card>
- * ```
- *
- * Render as a link:
- * ```tsx
- * <Card as="a" href="/pricing" target="_blank">Learn More</Card>
- * ```
- *
- * Render as a custom component:
- * ```tsx
- * <Card as={MyCustomComponent} customProp="123">Custom card content</Card>
- * ```
- */
 export type CardProps<C extends ElementType = 'div'> = PolymorphicCardProps<C, CardBaseProps>;
+export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    bordered?: boolean;
+}
+export interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
+}
+export interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+}
+export interface CardContentProps extends HTMLAttributes<HTMLDivElement> {
+}
+export interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    bordered?: boolean;
+}
+export interface CardMediaProps extends ImgHTMLAttributes<HTMLImageElement> {
+    aspectRatio?: 'auto' | 'square' | 'video' | 'wide';
+}
 export interface CardComponent {
     <C extends ElementType = 'div'>(props: CardProps<C> & {
         ref?: PolymorphicRef<C>;
     }): JSX.Element;
+    Header: FC<CardHeaderProps>;
+    Title: FC<CardTitleProps>;
+    Description: FC<CardDescriptionProps>;
+    Content: FC<CardContentProps>;
+    Body: FC<CardContentProps>;
+    Footer: FC<CardFooterProps>;
+    Media: FC<CardMediaProps>;
     displayName?: string;
 }

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

@@ -1,8 +1,35 @@
 import type { InputHTMLAttributes, ReactNode } from 'react';
 import type { InputCustomProps } from '../common-type';
-export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>, Omit<InputCustomProps, 'labelHint'> {
+export type CheckboxSize = 'sm' | 'md' | 'lg';
+export type CheckboxVariant = 'default' | 'card';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>, Omit<InputCustomProps, 'labelHint'> {
     /** Force type to checkbox only */
     type?: 'checkbox';
+    /**
+     * Indeterminate (partially checked) state.
+     * Useful for "Select All" parent checkboxes.
+     */
+    indeterminate?: boolean;
+    /**
+     * Size scale of the checkbox.
+     * Defaults to `"md"`.
+     */
+    size?: CheckboxSize;
+    /**
+     * Container style variant.
+     * - `default` — standard inline checkbox
+     * - `card` — enclosed interactive card container
+     * Defaults to `"default"`.
+     */
+    variant?: CheckboxVariant;
+    /**
+     * Optional subtext description displayed beneath label.
+     */
+    description?: ReactNode;
+    /**
+     * Optional helper message displayed below checkbox.
+     */
+    helperText?: ReactNode;
     /** Extra class for outer wrapper */
     wrapperClass?: string;
     /** Input container class */