@react-fabric/core 1.0.0-beta.9 → 1.0.2

package/dist/types/components/button/ToggleButtonGroup.d.ts

@@ -1,56 +1,100 @@
-/// <reference types="react" />
-import { type AriaProps, type ChildrenProp, type ColorType, type CssProp, type SizeType } from "../../types";
-import { type ButtonProps } from "./Button";
-interface BaseProps extends CssProp, AriaProps, ChildrenProp<React.ReactElement<ButtonProps & {
-    value: string;
-}>> {
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import type { ChildrenProp, CssProp, TestProps } from "../../types";
+import type { ButtonProps, SharedButtonProps } from "./Button";
+interface BaseProps extends CssProp, TestProps, SharedButtonProps {
     /**
-     * vertical orientation
+     * Arrange buttons vertically (top-to-bottom) instead of the default horizontal layout.
      */
     vertical?: boolean;
     /**
-     * button styling
-     */
-    variant?: "outline" | "solid" | "link";
-    /**
-     * button size
-     */
-    size?: SizeType;
-    /**
-     * button color
-     */
-    color?: ColorType;
-    /**
-     * full rounded edges
-     */
-    rounded?: boolean;
-    /**
-     * disabled state
+     * Disable all child toggle buttons, preventing interaction.
      */
     disabled?: boolean;
     /**
-     * stretch to full width
+     * Stretch the button group to full available width using `flex` (vs `inline-flex` by default).
      */
     fullWidth?: boolean;
 }
-export type ToggleButtonGroupProps = BaseProps & ({
-    /**
-     *
-     */
-    value: string;
-    /**
-     * change handler
-     */
-    onChange?: (value: string) => void;
+/**
+ * Props for single-value (radio-like) or multi-value (checkbox-like) toggle groups.
+ */
+export type ToggleButtonGroupValueProps<T> = {
+    /** The currently selected single value. When `null`, no button is active. */
+    value: T;
+    /** Callback invoked when the selected value changes. Receives the new value or `null` if cleared. */
+    onChange?: (value: T) => void;
 } | {
-    /**
-     *
-     */
-    value: string[];
-    /**
-     * change handler
-     */
-    onChange?: (value: string[]) => void;
-});
-export declare const ToggleButtonGroup: ({ vertical, className, children, variant, rounded, disabled, fullWidth, color, size, value, onChange, ...aria }: ToggleButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
+    /** The array of currently selected values. An empty array means no buttons are active. */
+    value: T[];
+    /** Callback invoked when the selected values change. Receives the updated array or `null` if cleared. */
+    onChange?: (value: T[]) => void;
+};
+export type ToggleButtonGroupProps<T> = BaseProps & ChildrenProp<ButtonProps & {
+    value: T;
+}> & ToggleButtonGroupValueProps<T>;
+/**
+ * A composite component that renders a group of toggle buttons with shared styling
+ * and selection behavior.
+ *
+ * Automatically switches between single-select (radio-like) and multi-select
+ * (checkbox-like) modes based on the `value` prop: a scalar value enables radio
+ * mode (one active button), while an array enables checkbox mode (multiple active).
+ *
+ * All child buttons receive consistent `color`, `size`, `variant`, `disabled`,
+ * and `rounded` props, while each button's own `value` and `onClick` are preserved
+ * and extended with the group's selection logic.
+ *
+ * @example
+ * ```jsx
+ * // Single-select (radio-like)
+ * <ToggleButtonGroup
+ *   value={selected}
+ *   onChange={(v) => setSelected(v)}
+ *   variant="outlined"
+ *   color="primary"
+ *   size="md"
+ * >
+ *   <Button value="a">A</Button>
+ *   <Button value="b">B</Button>
+ * </ToggleButtonGroup>
+ *
+ * // Multi-select (checkbox-like)
+ * <ToggleButtonGroup
+ *   value={selected}
+ *   onChange={(v) => setSelected(v)}
+ *   variant="outlined"
+ *   color="primary"
+ *   rounded
+ *   fullWidth
+ * >
+ *   <Button value="a">A</Button>
+ *   <Button value="b">B</Button>
+ *   <Button value="c">C</Button>
+ * </ToggleButtonGroup>
+ * ```
+ */
+export declare function ToggleButtonGroup<T extends AnyObject = string>({ vertical, className, children, variant, rounded, disabled, fullWidth, color, size, value, onChange, ...props }: ToggleButtonGroupProps<T>): import("react").JSX.Element;
 export {};

package/dist/types/components/callout/Callout.d.ts

@@ -1,21 +1,51 @@
-import { type AriaProps, type ChildrenProp, type ColorType, type CssProp, type PaletteType, type TestProps } from "../../types";
-export interface CalloutProps extends AriaProps, ChildrenProp, CssProp, TestProps {
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import type { ChildrenProp, ColorBase, CssPropWithMap, TestProps } from "../../types";
+import type { IconProps } from "../icon/Icon";
+export interface CalloutProps extends ChildrenProp, CssPropWithMap<{
+    root: string;
+    legend: string;
+    title: string;
+    icon: string;
+}>, TestProps {
     /**
      * callout color
      */
-    color?: ColorType | PaletteType;
+    color?: ColorBase | "default";
     /**
      * legend title
      */
-    legend?: string;
+    legend?: string | React.ReactElement;
     /**
      * callout icon
      */
-    icon?: string;
+    icon?: IconProps;
     /**
      * callout title
      */
-    title?: string;
+    title?: string | React.ReactElement;
     /**
      * callout border style
      */
@@ -25,4 +55,25 @@ export interface CalloutProps extends AriaProps, ChildrenProp, CssProp, TestProp
      */
     onClose?: () => void;
 }
-export declare const Callout: ({ children, color, legend, title, icon, border, onClose, className, ...aria }: CalloutProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A component that displays a callout box with an optional title, icon, and legend.
+ * It can be used to highlight important information, warnings, or notices.
+ * The callout can be styled with different colors and border styles, and it supports a close action.
+ * This component is useful for drawing attention to specific content within a page or application,
+ * such as alerts, notifications, or important messages.
+ *
+ * @example
+ * ```jsx
+ * <Callout
+ *   color="primary"
+ *   legend="Important Notice"
+ *   title="Attention Required"
+ *   icon="info"
+ *   onClose={() => console.log("Callout closed")}
+ * >
+ *   This is an important message that requires your attention.
+ * </Callout>
+ * // Renders a callout box with a primary color, an icon, a title, and a close button.
+ * ```
+ */
+export declare function Callout({ children, color, classNames, legend, title, icon, border, onClose, className, ...props }: CalloutProps): import("react").JSX.Element;

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

@@ -1,20 +1,42 @@
-import { type MouseEventHandler } from "react";
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
 import { type ContentProps } from "../../core/content/Content";
 import { type HeadFootProps } from "../../core/headfoot/HeadFoot";
-import { type AriaProps, type ChildrenProp, type CssProp, type RefProp, type TestProps } from "../../types";
-export interface CardProps extends CssProp, AriaProps, TestProps, RefProp<HTMLDivElement>, ChildrenProp<React.ReactElement<HeadFootProps | ContentProps>> {
-    /**
-     * apply flex fill styling
-     */
-    flex?: boolean;
+import type { ChildrenProp, CssPropWithMap, Draggable, HeightProps, PolymorphicProps, RefProp, TestProps, WidthProps } from "../../types";
+import type { TitlebarProps } from "../titlebar/Titlebar";
+interface BaseProps extends CssPropWithMap<{
+    root?: string;
+    body?: string;
+    titlebar?: string;
+    title?: string;
+    icon?: string;
+}>, TestProps, HeightProps, WidthProps, Draggable, RefProp<HTMLDivElement>, ChildrenProp<React.ReactElement<HeadFootProps | ContentProps>> {
     /**
      * click handler
      */
-    onClick?: MouseEventHandler;
-    /**
-     * body css classname(s)
-     */
-    bodyClassName?: string;
+    onClick?: React.MouseEventHandler;
     /**
      * show selected ring
      */
@@ -23,17 +45,36 @@ export interface CardProps extends CssProp, AriaProps, TestProps, RefProp<HTMLDi
      * show tick mark ribbon
      */
     selectedRibbon?: boolean;
-    /**
-     * make card draggable
-     */
-    draggable?: boolean;
-    /**
-     * drag event data key
-     */
-    dragKey?: string;
-    /**
-     * drag event data
-     */
-    dragData?: KeyValue;
+    hideEffect?: boolean;
 }
-export declare const Card: ({ children, className, bodyClassName, selected, selectedRibbon, onClick, flex, draggable, dragKey, dragData, ref, ...aria }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export type CardProps<Tag extends React.ElementType = "div"> = BaseProps & PolymorphicProps<Tag> & TitlebarProps;
+/**
+ * A component that displays a card with a header, body, and footer. It can be used to display content in a structured format.
+ * It supports various features such as click handling, drag-and-drop functionality, and customizable styles.
+ * The Card component is designed to be flexible and can be used in various contexts, such as displaying user profiles, product information, or any other content that benefits from a card layout.
+ * The component accepts children that can include a Header, body content, and a Footer.
+ * It also supports additional properties for styling, accessibility, and interaction.
+ * It can be styled with custom CSS classes and supports features like selection indication and drag-and-drop functionality.
+ *
+ * @example
+ * ```jsx
+ * <Card
+ *   className="my-custom-class"
+ *   classNames={{ body: "my-body-class" }}
+ *   selected={true}
+ *   selectedRibbon={true}
+ *   onClick={() => console.log("Card clicked")}
+ *   onDragStart={(event, key, data) => console.log("Drag started", key, data)}
+ *   draggable={true}
+ *   dragKey="my-drag-key"
+ *   dragData={{ id: 1, name: "Card Data" }}
+ *   aria-label="My Card"
+ * >
+ *   <Header>Card Header</Header>
+ *   <div>Card Body Content</div>
+ *   <Footer>Card Footer</Footer>
+ * </Card>
+ * ```
+ */
+export declare function Card<Tag extends React.ElementType = "div">({ children, className, classNames, selected, selectedRibbon, onClick, onDragStart, hideEffect, draggable, dragKey, dragData, ref, as, height, width, minHeight, minWidth, maxHeight, maxWidth, title, icon, actions, ...props }: CardProps<Tag>): import("react").JSX.Element;
+export {};

package/dist/types/components/card/CardCover.d.ts

@@ -1,16 +1,61 @@
-import { type AriaProps, type ChildrenProp, type CssProp } from "../../types";
-export interface CardCoverProps extends CssProp, AriaProps, ChildrenProp {
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import type { ChildProp, CssProp } from "../../types";
+import type { ImageProps, VideoProps } from "../media/Media";
+export interface CardCoverProps extends CssProp, ChildProp<ImageProps | VideoProps> {
     /**
      * cover height
      */
     height?: string | number;
-    /**
-     * cover color scheme
-     */
-    colorScheme?: "light" | "dark";
     /**
      * justify content
      */
     justify?: "start" | "center" | "end";
+    /**
+     * cover media element
+     */
+    title: React.ReactNode;
 }
-export declare const CardCover: ({ className, children, height, justify, colorScheme, ...aria }: CardCoverProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A cover component for cards that can contain media and content.
+ * It allows for flexible layout options and supports different color schemes.
+ * It can be used to create visually appealing card layouts with media content.
+ *
+ * @example
+ * ```jsx
+ * <CardCover
+ *   height={200}
+ *   colorScheme="light"
+ *   justify="center"
+ *   className="my-custom-class"
+ *   aria-label="Card Cover"
+ * >
+ *   <Image src="image.jpg" alt="Card Image" />
+ *   <div>Card Content</div>
+ * </CardCover>
+ * // Renders a card cover with a height of 200px, light color scheme, centered content, and a custom class name.
+ * ```
+ */
+export declare function CardCover({ className, children, title, height, justify, ...props }: CardCoverProps): import("react").JSX.Element;

package/dist/types/components/card/FlipContent.d.ts

@@ -0,0 +1,50 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import type { ChildrenProp, RefProp } from "../../types";
+/**
+ * Ref interface for FlipContent
+ */
+export interface FlipContentRef {
+    /**
+     * Programmatically flip the card
+     */
+    flipCard: () => void;
+}
+export interface Props extends ChildrenProp, RefProp<FlipContentRef> {
+}
+/**
+ * A component that flips between front and back content using a ref-based API.
+ * The first child renders as the front face, the second child as the back face.
+ * Use the `flipCard` ref method to programmatically toggle between faces.
+ *
+ * @example
+ * ```jsx
+ * <FlipContent ref={flipRef}>
+ *    <div className="front">Front Content</div>
+ *    <div className="back">Back Content</div>
+ * </FlipContent>
+ * ```
+ */
+export declare function FlipContent({ ref, children }: Props): import("react").JSX.Element;

package/dist/types/components/chip/Chip.d.ts

@@ -1,41 +1,93 @@
-import { type ReactElement } from "react";
-import { type AriaProps, type ChildProp, type ColorType, type CssProp, type IconProps, type PolymorphicProps, type RefProp, type SizeType, type TestProps } from "../../types";
-export interface ChipProps extends CssProp, AriaProps, IconProps, TestProps, ChildProp<string | ReactElement>, RefProp<HTMLDivElement> {
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import type { ChildProp, ColorBase, CssPropWithMap, CustomColors, Draggable, HtmlEvents, PolymorphicProps, RefProp, SizeWithCustom, TestProps } from "../../types";
+import type { IconProps } from "../icon/Icon";
+export interface ChipProps extends CssPropWithMap<{
+    root: string;
+    value: string;
+}>, TestProps, HtmlEvents, Draggable, ChildProp<string | React.ReactNode>, RefProp<HTMLDivElement> {
     /**
-     * chip size
+     * Value displayed in a small badge on the chip (e.g., count, index).
      */
-    size?: SizeType;
+    value?: string | number;
     /**
-     * chip color (CSS color / tailwind color)
+     * Chip size — uses predefined `SizeType` keys (`xs`–`xl`) or a custom font-size string/number.
      */
-    color?: ColorType | string;
+    size?: SizeWithCustom;
     /**
-     * chip styling
+     * Color token (from the design system palette) or arbitrary CSS color string.
      */
-    variant?: "solid" | "outline";
+    color?: CustomColors<ColorBase>;
     /**
-     * full rounded edges
+     * Visual style variant — controls background, border, and text color treatment.
+     */
+    variant?: "default" | "soft" | "solid" | "outlined";
+    /**
+     * When `true`, rounds the chip edges into a full pill shape.
      */
     rounded?: boolean;
     /**
-     * disabled state
+     * Icon configuration — accepts either a string (icon name) or full `IconProps`. Renders to the left of the label.
      */
-    disabled?: boolean;
+    icon?: IconProps;
     /**
-     * prevent click propagation
+     * Disables interaction and applies a dimmed opacity.
      */
-    stopPropagation?: boolean;
+    disabled?: boolean;
     /**
-     * click handler
+     * Calls `e.preventDefault()` on click — useful when the chip lives inside an `<a>` element.
      */
-    onClick?: React.MouseEventHandler;
+    preventDefault?: boolean;
     /**
-     * icon click handler
+     * Calls `e.stopPropagation()` on click to prevent event bubbling.
      */
-    onIconClick?: React.MouseEventHandler;
+    stopPropagation?: boolean;
     /**
-     * remove handler
+     * Click handler for the remove (×) button; receives the native mouse event.
      */
     onRemove?: React.MouseEventHandler;
 }
-export declare const Chip: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "div">({ ref, children, className, size, color, variant, icon, iconBg, iconColor, rtlFlip, disabled, onClick, onIconClick, onRemove, rounded, stopPropagation, as, ...aria }: ChipProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A compact, interactive chip used to represent tags, filters, selections, or status indicators.
+ *
+ * Renders a horizontally-flowing container with optional left-to-right slots:
+ * value badge → icon → label → remove (×) button.
+ *
+ * Supports four visual variants (`default`, `soft`, `solid`, `outlined`), five predefined sizes,
+ * and full color customization via the design system palette. The chip is keyboard-accessible,
+ * respects `disabled` and `data-clickable` states, and provides hooks for click and remove actions.
+ *
+ * @example
+ * ```tsx
+ * <Chip color="primary" size="md">
+ *   React
+ * </Chip>
+ *
+ * <Chip color="secondary" variant="outlined" icon="star" onRemove={() => console.log('removed')}>
+ *   Filter
+ * </Chip>
+ * ```
+ */
+export declare function Chip<Tag extends React.ElementType = "div">({ ref, children, className, classNames, size, color, variant, icon, value, disabled, onClick, onRemove, rounded, preventDefault, stopPropagation, as, draggable, dragKey, dragData, onDragStart, ...props }: ChipProps & PolymorphicProps<Tag>): import("react").JSX.Element;

package/dist/types/components/collapsable/Collapsable.d.ts

@@ -1,23 +1,42 @@
-import { type RefObject } from "react";
-import { type AriaProps, type ChildrenProp, type CssProp, type RefProp, type TestProps } from "../../types";
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import type { ChildrenProp, CssPropWithMap, RefProp, TestProps } from "../../types";
 interface CollapsableRef {
-    button: RefObject<HTMLElement>;
-    body: RefObject<HTMLElement>;
+    button: React.RefObject<HTMLElement | null>;
+    body: React.RefObject<HTMLElement | null>;
     open: boolean;
 }
-export interface CollapsableProps extends CssProp, AriaProps, TestProps, RefProp<CollapsableRef>, ChildrenProp {
+export interface CollapsableProps extends CssPropWithMap<{
+    root?: string;
+    header?: string;
+    body?: string;
+}>, TestProps, RefProp<CollapsableRef>, ChildrenProp {
     /**
      * expand icon alignment
      */
     iconAlign?: "start" | "end";
-    /**
-     * panel body className
-     */
-    bodyClassName?: string;
-    /**
-     * header button className
-     */
-    headerClassName?: string;
     /**
      * Header position sticky
      */
@@ -43,9 +62,30 @@ export interface CollapsableProps extends CssProp, AriaProps, TestProps, RefProp
      */
     onOpen?: () => void;
     /**
-     * open handler
+     * close handler
      */
     onClose?: () => void;
 }
-export declare const Collapsable: ({ ref, disabled, className, bodyClassName, headerClassName, children, iconAlign, stickyHeader, iconClosed, iconOpen, open, onClose, onOpen, ...aria }: CollapsableProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A component that can be expanded or collapsed to show or hide content.
+ * It is useful for organizing content in a way that allows users to focus on the information they are interested in.
+ * It supports custom icons for open and closed states, alignment options, and can be made sticky.
+ * This component is ideal for creating accordions, expandable panels, or sections that can be toggled by the user.
+ *
+ * @example
+ * ```jsx
+ * <Collapsable
+ *   iconAlign="start"
+ *   iconOpen="icon-[mdi--chevron-down]"
+ *   iconClosed="icon-[mdi--chevron-right]"
+ *   open={true}
+ *   onOpen={() => console.log("Opened")}
+ *   onClose={() => console.log("Closed")}
+ * >
+ *   <div>Header Content</div>
+ *   <div>Body Content</div>
+ * </Collapsable>
+ * ```
+ */
+export declare function Collapsable({ ref, disabled, className, classNames, children, iconAlign, stickyHeader, iconClosed, iconOpen, open, onClose, onOpen, ...props }: CollapsableProps): import("react").JSX.Element;
 export {};