@pk-design/react-tailwind 1.0.6 → 1.1.0

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

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

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

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

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

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+export type AlertType = 'success' | 'danger' | 'warning' | 'info';
+export interface BaseAlertProps {
+    /**
+     * Defines alert type
+     * @default "info"
+     */
+    type?: AlertType;
+    className?: string;
+    /**
+     * Defines if alert is removable
+     */
+    removable?: boolean;
+    /**
+     * Handler when closing / dismissing alert
+     * @returns void
+     */
+    onRemove?: () => void;
+}
+/**
+ * Alert component used to display important messages.
+ *
+ * One of `message` or `children` is required.
+ * @remarks Only one should be provided at a time.
+ */
+export type AlertProps = (BaseAlertProps & {
+    /** Text content to display in alert */
+    message: string;
+    children?: never;
+}) | (BaseAlertProps & {
+    /** ReactNode to display in alert */
+    children: ReactNode;
+    message?: never;
+});

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

@@ -1,35 +1,2 @@
-import React, { type ReactNode } from 'react';
-export type AlertType = 'success' | 'danger' | 'warning' | 'info';
-export interface BaseAlertProps {
-    /**
-     * Defines alert type
-     * @default "info"
-     */
-    type?: AlertType;
-    className?: string;
-    /**
-     * Defines if alert is removable
-     */
-    removable?: boolean;
-    /**
-     * Handler when closing / dismissing alert
-     * @returns void
-     */
-    onRemove?: () => void;
-}
-/**
- * Alert component used to display important messages.
- *
- * One of `message` or `children` is required.
- * @remarks Only one should be provided at a time.
- */
-export type AlertProps = (BaseAlertProps & {
-    /** Text content to display in alert */
-    message: string;
-    children?: never;
-}) | (BaseAlertProps & {
-    /** ReactNode to display in alert */
-    children: ReactNode;
-    message?: never;
-});
-export declare const Alert: React.FC<AlertProps>;
+export * from './Alert';
+export * from './Alert.types';

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

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

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

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

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

@@ -0,0 +1,22 @@
+export type BadgeTheme = 'success' | 'danger' | 'warning' | 'info' | 'secondary';
+export interface BadgeProps {
+    /**
+     * Defines theme of the Badge
+     * @default "info"
+     */
+    theme?: BadgeTheme;
+    className?: string;
+    children: any;
+    /**
+     * Defines if badge is removable
+     */
+    removable?: boolean;
+    /**
+     * Defines if corners are rounded
+     */
+    rounded?: boolean;
+    /**
+     * Handler on removing badge
+     */
+    onRemove?: () => void;
+}

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

@@ -1,24 +1,2 @@
-import React from 'react';
-export type BadgeTheme = 'success' | 'danger' | 'warning' | 'info' | 'secondary';
-export interface BadgeProps {
-    /**
-     * Defines theme of the Badge
-     * @default "info"
-     */
-    theme?: BadgeTheme;
-    className?: string;
-    children: any;
-    /**
-     * Defines if badge is removable
-     */
-    removable?: boolean;
-    /**
-     * Defines if corners are rounded
-     */
-    rounded?: boolean;
-    /**
-     * Handler on removing badge
-     */
-    onRemove?: () => void;
-}
-export declare const Badge: React.FC<BadgeProps>;
+export * from './Badge';
+export * from './Badge.types';

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

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

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

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

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

@@ -0,0 +1,14 @@
+export type BannerType = 'info' | 'error' | 'success' | 'warning';
+export type IconSize = 5 | 6 | 7 | 8 | 9 | 10;
+export interface BannerProps {
+    /**
+     * Defines banner type
+     * @default "info"
+     */
+    type?: BannerType;
+    children: any;
+    /**
+     * Controls the icon size
+     */
+    iconSize?: IconSize;
+}

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

@@ -1,16 +1,2 @@
-import React from 'react';
-export type BannerType = 'info' | 'error' | 'success' | 'warning';
-export type IconSize = 5 | 6 | 7 | 8 | 9 | 10;
-export interface BannerProps {
-    /**
-     * Defines banner type
-     * @default "info"
-     */
-    type?: BannerType;
-    children: any;
-    /**
-     * Controls the icon size
-     */
-    iconSize?: IconSize;
-}
-export declare const Banner: React.FC<BannerProps>;
+export * from './Banner';
+export * from './Banner.types';

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

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

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

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

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

@@ -0,0 +1,27 @@
+import type { HTMLAttributes, JSX, JSXElementConstructor } from 'react';
+export interface BodyTextProps extends HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * Add's `text-sm` class to the element
+     */
+    small?: boolean;
+    /**
+     * Add's `font-semibold` class to the element
+     */
+    strong?: boolean;
+    /**
+     * Add's `text-gray-500` class to the element
+     */
+    muted?: boolean;
+    /**
+     * Add's `text-red-500` class to the element
+     */
+    error?: boolean;
+    /**
+     * Add's `inline-flex items-center gap-2` class to the element
+     */
+    inline?: boolean;
+    /**
+     * JSX element to be render in place of `p`
+     */
+    as?: keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
+}

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

@@ -1,28 +1,2 @@
-import React, { type HTMLAttributes, type JSX, type JSXElementConstructor } from 'react';
-export interface BodyTextProps extends HTMLAttributes<HTMLParagraphElement> {
-    /**
-     * Add's `text-sm` class to the element
-     */
-    small?: boolean;
-    /**
-     * Add's `font-semibold` class to the element
-     */
-    strong?: boolean;
-    /**
-     * Add's `text-gray-500` class to the element
-     */
-    muted?: boolean;
-    /**
-     * Add's `text-red-500` class to the element
-     */
-    error?: boolean;
-    /**
-     * Add's `inline-flex items-center gap-2` class to the element
-     */
-    inline?: boolean;
-    /**
-     * JSX element to be render in place of `p`
-     */
-    as?: keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
-}
-export declare const BodyText: React.FC<BodyTextProps>;
+export * from './BodyText';
+export * from './BodyText.types';

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

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

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

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

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

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+export type BreadcrumbItem = {
+    /**
+     * Unique key for each breadcrumn item
+     */
+    key: string;
+    /**
+     * Text content to display
+     */
+    text: string;
+    /**
+     * Href Link to navigate using breadcrumb
+     */
+    to?: string;
+};
+export interface BreadcrumbProps {
+    /**
+     * 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
+     */
+    render: (item: BreadcrumbItem) => ReactNode;
+}

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

@@ -1,30 +1,2 @@
-import React, { ReactNode } from 'react';
-export type BreadcrumbItem = {
-    /**
-     * Unique key for each breadcrumn item
-     */
-    key: string;
-    /**
-     * Text content to display
-     */
-    text: string;
-    /**
-     * Href Link to navigate using breadcrumb
-     */
-    to?: string;
-};
-export interface BreadcrumbProps {
-    /**
-     * 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
-     */
-    render: (item: BreadcrumbItem) => ReactNode;
-}
-export declare const Breadcrumb: React.FC<BreadcrumbProps>;
+export * from './Breadcrumb';
+export * from './Breadcrumb.types';

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

@@ -1,3 +1,2 @@
-import React from 'react';
-import { type ButtonProps } from './type';
-export declare const Button: React.FC<ButtonProps>;
+import type { ButtonComponent } from './Button.types';
+export declare const Button: ButtonComponent;

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

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

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

@@ -0,0 +1,171 @@
+import type { JSX, ElementType, ComponentPropsWithoutRef } from 'react';
+/**
+ * Theme variants applied to the Button component.
+ *
+ * Controls the color scheme of the button.
+ *
+ * @default "primary"
+ */
+export type ButtonTheme = 'primary' | 'secondary' | 'danger';
+/**
+ * Visual variant of the button.
+ *
+ * - **default**: Filled style (solid background)
+ * - **outlined**: Transparent background + border
+ * - **plain**: Text-only style
+ *
+ * @default "default"
+ */
+export type ButtonVariant = 'default' | 'outlined' | 'plain';
+/**
+ * Predefined Button sizes.
+ *
+ * Controls padding, font size, and spacing.
+ *
+ * @default "md"
+ */
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+/**
+ * Mapping of theme + variant to Tailwind class strings.
+ *
+ * Internal use only.
+ */
+export type ThemedButtonClass = {
+    [key in ButtonTheme]: {
+        [key in ButtonVariant]: string;
+    };
+};
+/**
+ * Utility: Extract the correct `ref` type for intrinsic elements
+ * or custom React components.
+ */
+export type PolymorphicRef<C extends ElementType> = ComponentPropsWithoutRef<C>['ref'];
+/**
+ * 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;
+    /**
+     * 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;
+    /**
+     * Additional classNames merged with the computed classes.
+     */
+    className?: string;
+    /**
+     * The HTML button type.
+     * Only valid when rendering as <button>.
+     */
+    type?: 'button' | 'submit' | 'reset';
+    /**
+     * 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> & {
+        ref?: PolymorphicRef<C>;
+    }): JSX.Element;
+    displayName?: string;
+}

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

@@ -1,2 +1,2 @@
 export * from './Button';
-export * from './type';
+export * from './Button.types';

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { CardProps } from './Card.types';
+export declare const Card: React.ForwardRefExoticComponent<Omit<CardProps<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<Element>>;

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

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

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

@@ -0,0 +1,23 @@
+import type { ElementType } from 'react';
+import { PolymorphicProps } from '../common-type';
+export type CardBaseProps = {
+    /**
+     * Make card hoverable (adds shadow transitions)
+     */
+    hoverable?: boolean;
+    /**
+     * Adds border around the card
+     */
+    bordered?: boolean;
+    /**
+     * Removes default padding
+     */
+    noPadding?: boolean;
+    /**
+     * Render Card as different element or component
+     *
+     * @default "div"
+     */
+    as?: ElementType;
+};
+export type CardProps<C extends ElementType = 'div'> = PolymorphicProps<C, CardBaseProps>;

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

@@ -1,9 +1,2 @@
-import React, { type HTMLAttributes, type JSX, type JSXElementConstructor } from 'react';
-export interface CardProps extends HTMLAttributes<HTMLDivElement> {
-    to?: string;
-    hoverable?: boolean;
-    bordered?: boolean;
-    noPadding?: boolean;
-    as?: keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
-}
-export declare const Card: React.FC<CardProps>;
+export * from './Card';
+export * from './Card.types';

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

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

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

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

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

@@ -0,0 +1,14 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import type { InputCustomProps } from '../common-type';
+export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'>, Omit<InputCustomProps, 'labelHint'> {
+    /** Force type to checkbox only */
+    type?: 'checkbox';
+    /** Extra class for outer wrapper */
+    wrapperClass?: string;
+    /** Input container class */
+    containerClass?: string;
+    /** Label class */
+    labelClass?: string;
+    /** Error message */
+    error?: string | ReactNode;
+}

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

@@ -1,13 +1,2 @@
-import React, { type InputHTMLAttributes } from 'react';
-import { type InputCustomProps } from '../common-type';
-export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement>, Omit<InputCustomProps, 'labelHint'> {
-    /**
-     * Type is constant 'checkbox'
-     */
-    type?: 'checkbox';
-    /**
-     * Input wrapper class
-     */
-    wrapperClass?: string;
-}
-export declare const Checkbox: React.FC<CheckboxProps>;
+export * from './Checkbox';
+export * from './Checkbox.types';

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

@@ -0,0 +1,5 @@
+import type { CheckboxGroupProps } from './CheckboxGroup.types';
+export declare const CheckboxGroup: {
+    <T>(props: CheckboxGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

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

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

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

@@ -0,0 +1,55 @@
+import type { ChangeEvent, ReactNode } from 'react';
+export type CheckboxGroupItem<T = any> = {
+    /**
+     * Checkbox item label
+     */
+    label: string;
+    /**
+     * Checkbox item value
+     */
+    value: T;
+};
+export interface CheckboxGroupProps<T = any> {
+    /**
+     * Group name applied to all checkboxes in the group
+     */
+    name?: string;
+    /**
+     * Currently selected values
+     */
+    value?: T[];
+    /**
+     * Label displayed above the group
+     */
+    label?: ReactNode;
+    /**
+     * Label CSS classes
+     */
+    labelClass?: string;
+    /**
+     * Wrapper classes for the label row
+     */
+    labelWrapperClass?: string;
+    /**
+     * Hint text shown next to the label
+     */
+    labelHint?: ReactNode;
+    /**
+     * Container classes for the group wrapper
+     */
+    containerClass?: string;
+    /**
+     * Callback fired whenever selection updates.
+     */
+    onChange?: (values: T[], e: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Options in the group — can be:
+     *  - string[] → converted to {label, value}
+     *  - CheckboxGroupItem<T>[]
+     */
+    options: string[] | CheckboxGroupItem<T>[];
+    /**
+     * Whether to arrange checkboxes inline
+     */
+    inline?: boolean;
+}