@pk-design/react-tailwind 1.4.3 → 1.5.0

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

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

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

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

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

@@ -0,0 +1,85 @@
+import type { ReactNode } from 'react';
+/**
+ * Single accordion item.
+ */
+export type AccordionItem = {
+    /** Header content for this item */
+    title: ReactNode;
+    /** Content rendered in the collapsible panel when this item is open */
+    content: ReactNode;
+    /** Optional icon rendered before the title */
+    icon?: ReactNode;
+    /** Unique key for this item; falls back to index when omitted */
+    id?: string | number;
+    /** Prevents this item from being opened/closed */
+    disabled?: boolean;
+    /** Extra classes applied to this specific item's header button */
+    titleClass?: string;
+    /** Extra classes applied to this specific item's panel content */
+    panelClass?: string;
+};
+/**
+ * Whether one or multiple items can be open at the same time.
+ *
+ * @default "single"
+ */
+export type AccordionType = 'single' | 'multiple';
+/**
+ * Visual style of the accordion.
+ *
+ * - **bordered** (default): items share a single bordered container, divided by hairlines
+ * - **separated**: each item renders as its own bordered card with spacing between items
+ * - **plain**: no borders, just a divided list
+ *
+ * @default "bordered"
+ */
+export type AccordionVariant = 'bordered' | 'separated' | 'plain';
+/**
+ * Accordion component props.
+ */
+export interface AccordionProps {
+    /** Item data array. Order defines visual order. */
+    items: AccordionItem[];
+    /**
+     * Whether one or multiple items can be open at the same time.
+     *
+     * @default "single"
+     */
+    type?: AccordionType;
+    /**
+     * Visual style of the accordion.
+     *
+     * @default "bordered"
+     */
+    variant?: AccordionVariant;
+    /**
+     * When `type="single"`, whether clicking the currently open item's header
+     * closes it. Has no effect when `type="multiple"`.
+     *
+     * @default true
+     */
+    collapsible?: boolean;
+    /** Initially open item id(s) (uncontrolled) */
+    defaultOpenIds?: Array<string | number>;
+    /** Controlled open item id(s) — pair with onChange */
+    openIds?: Array<string | number>;
+    /** Called with the new open id(s) whenever an item is toggled */
+    onChange?: (openIds: Array<string | number>) => void;
+    /**
+     * Custom trailing indicator icon rendered in place of the default chevron.
+     *
+     * - Pass a `ReactNode` to swap the icon while keeping the default
+     *   rotate-180°-on-open behavior.
+     * - Pass a function of the item's open state for full control (e.g.
+     *   swapping between plus/minus icons instead of rotating).
+     *
+     * @default undefined (renders the built-in chevron)
+     */
+    expandIcon?: ReactNode | ((isOpen: boolean) => ReactNode);
+    /** Extra classes for the outer container */
+    className?: string;
+    /** Extra classes applied to every item's header button */
+    titleClass?: string;
+    /** Extra classes applied to every item's panel content */
+    panelClass?: string;
+}

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

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

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

@@ -24,4 +24,5 @@ export interface BodyTextProps extends HTMLAttributes<HTMLParagraphElement> {
      * JSX element to be render in place of `p`
      */
     as?: keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
+    invert?: boolean;
 }

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

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

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

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

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

@@ -0,0 +1,70 @@
+import type { ReactNode } from 'react';
+import type { ButtonSize, ButtonTheme, ButtonVariant } from '../Button/Button.types';
+/**
+ * Layout direction of a ButtonGroup.
+ *
+ * @default "horizontal"
+ */
+export type ButtonGroupOrientation = 'horizontal' | 'vertical';
+/**
+ * ButtonGroup component props.
+ */
+export interface ButtonGroupProps {
+    /**
+     * `Button` elements to render as a single joined control.
+     *
+     * Each child may still set its own `theme`/`variant`/`size`/`className`
+     * to override the group's fallback styling (e.g. a colored icon).
+     */
+    children: ReactNode;
+    /**
+     * Layout direction of the group.
+     *
+     * - **horizontal** (default): buttons sit side by side, divided by a vertical hairline.
+     * - **vertical**: buttons stack top to bottom, divided by a horizontal hairline.
+     *
+     * @default "horizontal"
+     */
+    orientation?: ButtonGroupOrientation;
+    /**
+     * Fallback theme applied to child buttons that don't set their own `theme`.
+     *
+     * @default "secondary"
+     */
+    theme?: ButtonTheme;
+    /**
+     * Fallback variant applied to child buttons that don't set their own `variant`.
+     *
+     * @default "default"
+     */
+    variant?: ButtonVariant;
+    /**
+     * Fallback size applied to child buttons that don't set their own `size`.
+     *
+     * @default "md"
+     */
+    size?: ButtonSize;
+    /**
+     * Rounds the group's outer corners into a full pill shape instead of the
+     * size-matched corner radius.
+     *
+     * @default false
+     */
+    rounded?: boolean;
+    /**
+     * Stretches child buttons to share the group's width (horizontal) or
+     * height (vertical) equally.
+     *
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Accessible label describing the purpose of the group.
+     * Rendered as `aria-label` on the `role="group"` container.
+     */
+    label?: string;
+    /**
+     * Additional classNames merged onto the outer container.
+     */
+    className?: string;
+}

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

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

package/dist/types/components/DataTable/DataTable.icons.d.ts

@@ -1,4 +1,4 @@
 import type { SortIconKey, Sorting } from './DataTable.types';
 import type { ReactNode } from 'react';
 export declare const SortIconMap: Record<SortIconKey, ReactNode>;
-export declare const getSortIcon: (sort?: Sorting) => string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | null | undefined;
+export declare const getSortIcon: (sort?: Sorting) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;

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

@@ -1,2 +1,2 @@
 import type { BaseOption, SelectBoxProps } from './SelectBox.types';
-export declare const SelectBox: import("react").ForwardRefExoticComponent<SelectBoxProps<string | BaseOption> & import("react").RefAttributes<HTMLInputElement | HTMLDivElement>>;
+export declare const SelectBox: import("react").ForwardRefExoticComponent<SelectBoxProps<string | BaseOption> & import("react").RefAttributes<HTMLDivElement | HTMLInputElement>>;

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

@@ -48,6 +48,17 @@ export interface SelectBoxProps<T extends BaseOption | string = BaseOption> {
     placeholder?: string;
     /** CSS classes applied to the dropdown options container */
     dropdownContainerClass?: string;
+    /**
+     * Whether the open dropdown traps focus and makes the rest of the page
+     * inert (Headless UI's default Combobox behavior). Disabled by default so
+     * elements rendered inside the control itself — like the `allowClear`
+     * button — and the rest of the page stay interactive while the dropdown
+     * is open, matching common combobox libraries (e.g. react-select). Set to
+     * `true` to restore Headless UI's modal focus-trapping behavior.
+     *
+     * @default false
+     */
+    modalDropdown?: boolean;
     /** Enable multiple selection mode */
     multiple?: boolean;
     /** Maximum number of selections allowed in multi-select mode */
@@ -80,6 +91,13 @@ export interface SelectBoxProps<T extends BaseOption | string = BaseOption> {
     allowAdd?: boolean;
     /** Label prefix for the “Add new” action (e.g., "Create") */
     addNewText?: string;
+    /**
+     * Message shown in the dropdown when `options` is empty and the user
+     * hasn't typed a search query yet.
+     *
+     * @default "No options available"
+     */
+    noOptionsText?: string;
     /**
      * Callback when the user chooses the "create/add" option.
      *

package/dist/types/index.d.ts

@@ -1,10 +1,12 @@
 import './styles/tokens.css';
+export * from './components/Accordion';
 export * from './components/Alert';
 export * from './components/Badge';
 export * from './components/Banner';
 export * from './components/BodyText';
 export * from './components/Breadcrumb';
 export * from './components/Button';
+export * from './components/ButtonGroup';
 export * from './components/Card';
 export * from './components/Checkbox';
 export * from './components/CheckboxGroup';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pk-design/react-tailwind",
-  "version": "1.4.3",
+  "version": "1.5.0",
   "main": "dist/react-tailwind.cjs.js",
   "module": "dist/react-tailwind.es.js",
   "types": "dist/types/index.d.ts",