@pk-design/react-tailwind 1.5.3 → 1.6.0

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/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;
     /**
@@ -22,55 +43,40 @@ export type CardBaseProps = {
      */
     zeroPadding?: 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 */

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

@@ -1,4 +1,5 @@
 import type { ChangeEvent, ReactNode } from 'react';
+import type { CheckboxSize, CheckboxVariant } from '../Checkbox/Checkbox.types';
 export type CheckboxGroupItem<T = any> = {
     /**
      * Checkbox item label
@@ -8,6 +9,14 @@ export type CheckboxGroupItem<T = any> = {
      * Checkbox item value
      */
     value: T;
+    /**
+     * Optional subtext description beneath label
+     */
+    description?: ReactNode;
+    /**
+     * Whether this individual option is disabled
+     */
+    disabled?: boolean;
 };
 export interface CheckboxGroupProps<T = any> {
     /**
@@ -15,9 +24,13 @@ export interface CheckboxGroupProps<T = any> {
      */
     name?: string;
     /**
-     * Currently selected values
+     * Currently selected values (Controlled Mode).
      */
     value?: T[];
+    /**
+     * Default selected values (Uncontrolled Mode).
+     */
+    defaultValue?: T[];
     /**
      * Label displayed above the group
      */
@@ -52,4 +65,43 @@ export interface CheckboxGroupProps<T = any> {
      * Whether to arrange checkboxes inline
      */
     inline?: boolean;
+    /**
+     * Multi-column grid layout (1, 2, 3, or 4 columns).
+     * Takes precedence over `inline`.
+     */
+    columns?: 1 | 2 | 3 | 4;
+    /**
+     * Size scale passed to all checkboxes in the group.
+     * Defaults to `"md"`.
+     */
+    size?: CheckboxSize;
+    /**
+     * Visual variant passed to all checkboxes in the group.
+     * - `default` — standard inline checkboxes
+     * - `card` — enclosed interactive card containers
+     * Defaults to `"default"`.
+     */
+    variant?: CheckboxVariant;
+    /**
+     * Automatically renders a "Select All" parent checkbox header with indeterminate state!
+     * Defaults to `false`.
+     */
+    showSelectAll?: boolean;
+    /**
+     * Label for the "Select All" checkbox.
+     * Defaults to `"Select All"`.
+     */
+    selectAllLabel?: string;
+    /**
+     * Group-level error message.
+     */
+    error?: string | ReactNode;
+    /**
+     * Group-level helper text.
+     */
+    helperText?: ReactNode;
+    /**
+     * Disable all checkboxes in the group.
+     */
+    disabled?: boolean;
 }

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

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

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
 export type Detail = {
     /**
      * Label of the information to be displayed
@@ -8,16 +8,36 @@ export type Detail = {
      * Information to be displayed
      */
     value?: ReactNode;
+    /**
+     * Optional icon displayed next to the label
+     */
+    icon?: ReactNode;
     /**
      * Classname of the value content sections
      */
     contentClass?: string;
     /**
-     * Defines if the items should be hidden.
+     * Classname of the label section
+     */
+    labelClass?: string;
+    /**
+     * Enables hover-to-copy button next to the value
+     */
+    copyable?: boolean;
+    /**
+     * Custom tooltip / help text to display next to the label
+     */
+    helpText?: string;
+    /**
+     * Custom fallback value when value is empty or undefined
+     */
+    emptyValue?: ReactNode;
+    /**
+     * Defines if the item should be hidden.
      */
     hidden?: boolean;
 };
-export interface DetailedInformationProps {
+export interface DetailedInformationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     className?: string;
     /**
      * Title for the information section
@@ -27,10 +47,26 @@ export interface DetailedInformationProps {
      * Subtitle for the information section
      */
     subTitle?: ReactNode;
+    /**
+     * Action element rendered at the top-right of the header area
+     */
+    action?: ReactNode;
     /**
      * List of details / information to be displayed
      */
     details: Detail[];
+    /**
+     * Number of grid columns for details layout (1, 2, 3, or 4). Default is 1
+     */
+    columns?: 1 | 2 | 3 | 4;
+    /**
+     * Direction of label vs value. 'horizontal' (side-by-side) or 'vertical' (stacked). Default is 'horizontal'
+     */
+    layout?: 'horizontal' | 'vertical';
+    /**
+     * Visual presentation variant. Default is 'flat'
+     */
+    variant?: 'flat' | 'bordered' | 'card';
     /**
      * Defines if the layout should be compact
      */
@@ -43,6 +79,10 @@ export interface DetailedInformationProps {
      * Defines if each item in section should have divider
      */
     divider?: boolean;
+    /**
+     * Default fallback when value is missing or empty. Default is '- -'
+     */
+    emptyValue?: ReactNode;
     /**
      * Classname for title element
      */
@@ -51,4 +91,8 @@ export interface DetailedInformationProps {
      * Classname for details section
      */
     detailsClass?: string;
+    /**
+     * Classname for label elements
+     */
+    labelClass?: string;
 }