@react-fabric/core 1.0.0-beta.6 → 1.0.0-beta.61

package/dist/types/hooks/useResizeObserver.d.ts

@@ -1,3 +1,22 @@
 import { type RefObject } from "react";
 import { type SizeObject } from "../types";
-export declare const useResizeObserver: <T extends HTMLElement = HTMLDivElement>(onResize?: (size: SizeObject) => void) => RefObject<T>;
+/**
+ * Custom hook to observe size changes of an element using ResizeObserver.
+ * It returns a ref that can be attached to the element you want to observe.
+ * The hook will call the provided `onResize` callback with the new size of the element
+ * whenever it changes.
+ * * This is useful for responsive designs where you need to adjust the layout or styles
+ * based on the size of an element.
+ *
+ * @param onResize Callback function that receives the new size of the element.
+ * @returns A ref object to be attached to the element you want to observe.
+ *
+ * @example
+ * ```jsx
+ * const ref = useResizeObserver((size) => {
+ *   console.log("Element resized:", size);
+ * });
+ * <div ref={ref}>Resize me!</div>
+ * ```
+ */
+export declare const useResizeObserver: <T extends HTMLElement = HTMLDivElement>(onResize?: (size: SizeObject) => void) => RefObject<T | null>;

package/dist/types/hooks/useStepper.d.ts

@@ -0,0 +1,14 @@
+export declare const useStepper: ({ steps, activeStep: _initialActiveStep, }: {
+    steps: Array<{
+        label?: React.ReactNode;
+        icon?: React.ReactNode;
+    }>;
+    activeStep?: number;
+}) => {
+    stepper: import("react/jsx-runtime").JSX.Element;
+    activeStep: number;
+    firstStep: boolean;
+    lastStep: boolean;
+    next: () => void;
+    prev: () => void;
+};

package/dist/types/hooks/useStorage.d.ts

@@ -1,2 +1,40 @@
+/**
+ * Custom hook to manage local storage state.
+ * This hook allows you to store and retrieve values from the browser's local storage,
+ * and provides a way to update the stored value while keeping the state in sync with local storage.
+ * It initializes the state with the value from local storage if it exists, or uses a default value if it does not.
+ * The hook returns a tuple containing the current value and a function to update the value.
+ * This is useful for persisting user preferences or application state across page reloads.
+ *
+ * @param key - The key under which the value is stored in local storage.
+ * @param defaultValue - The default value to use if the key does not exist in local storage.
+ * @returns A tuple containing the current value and a function to update the value.
+ *
+ * @example
+ * ```jsx
+ * const [settings, setSettings] = useLocalStorage("userSettings", { theme: "light" });
+ * // This will initialize the settings state from local storage or use the default value.
+ * ```
+ */
 export declare const useLocalStorage: <T>(key: string, defaultValue: T) => [T, (value: T) => void];
+/**
+ * Custom hook to manage session storage state.
+ * This hook allows you to store and retrieve values from the browser's session storage,
+ * and provides a way to update the stored value while keeping the state in sync with session storage.
+ * It initializes the state with the value from session storage if it exists, or uses a default value if it does not.
+ * The hook returns a tuple containing the current value and a function to update the value.
+ * This is useful for persisting user preferences or application state during a single session,
+ * such as form data or temporary settings that should not persist across page reloads.
+ * This hook is similar to `useLocalStorage`, but it uses session storage instead of local storage.
+ *
+ * @param key - The key under which the value is stored in session storage.
+ * @param defaultValue - The default value to use if the key does not exist in session storage.
+ * @returns A tuple containing the current value and a function to update the value.
+ *
+ * @example
+ * ```jsx
+ * const [user, setUser] = useSessionStorage("user", { name: "", age: 0 });
+ * // This will initialize the user state from session storage or use the default value.
+ * ```
+ */
 export declare const useSessionStorage: <T>(key: string, defaultValue: T) => [T, (value: T) => void];

package/dist/types/index.d.ts

@@ -12,8 +12,11 @@ export * from "./hooks/useNavigator";
 export * from "./hooks/useOverlayService";
 export * from "./hooks/useResize";
 export * from "./hooks/useResizeObserver";
+export * from "./hooks/useStepper";
 export * from "./hooks/useStorage";
 export { HotKey } from "./hotkeys/HotKey";
 export { HotKeyLabel } from "./hotkeys/HotKeyLabel";
-export { CoreIcons } from "./types/icons";
+export { HotKeyWrapper } from "./hotkeys/HotKeyWrapper";
+export { type ModalProps } from "./types";
+export { cloneChildren } from "./utils";
 export { ApplicationProvider, useApplicationContext, useGlobals, useNotificationService, } from "./context/Global";

package/dist/types/overlays/alert/Alert.d.ts

@@ -1,10 +1,21 @@
-/// <reference types="react" />
-import { type ColorType, type Elements, type IconProps } from "../../types";
-export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+import { type ColorState, type Elements } from "../../types";
+export interface AlertProps {
     /**
      * toast type
      */
     type?: "alert" | "confirm" | "prompt";
+    /**
+     * svg path / webfont className / 1-4 letter text
+     */
+    icon?: string;
+    /**
+     * icon image source URL, if failed to load then shows icon
+     */
+    iconSrc?: string;
+    /**
+     * flip icon in rtl
+     */
+    rtlFlip?: boolean;
     /**
      * toast title
      */
@@ -16,7 +27,7 @@ export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
     /**
      * theme color
      */
-    color?: ColorType;
+    color?: ColorState;
     /**
      * extra action button
      */
@@ -38,4 +49,4 @@ export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
      */
     defaultValue?: string;
 }
-export declare const Alert: ({ title, message, color, icon, rtlFlip, actions, onClose, type, okLabel, cancelLabel, placeholder, defaultValue, }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Alert: ({ title, message, color, icon, iconSrc, rtlFlip, actions, onClose, type, okLabel, cancelLabel, placeholder, defaultValue, }: AlertProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/overlays/flyout/Flyout.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
-import { type AriaProps, type CallbackReturn, type ChildrenProp, type Elements, type IconProps, type TestProps } from "../../types";
-export interface FlyoutProps extends AriaProps, TestProps, IconProps, ChildrenProp {
+import { type IconProps } from "../../components/icon/Icon";
+import { type AriaProps, type CallbackReturn, type ChildrenProp, type Elements, type TestProps } from "../../types";
+export interface FlyoutProps extends AriaProps, TestProps, ChildrenProp {
+    icon?: IconProps;
     /**
      * flyout alignment
      */
@@ -37,6 +38,10 @@ export interface FlyoutProps extends AriaProps, TestProps, IconProps, ChildrenPr
      * minimum width
      */
     minWidth?: string | number;
+    /**
+     * portal root element
+     */
+    root?: HTMLElement;
     /**
      * hide backdrop mask
      */
@@ -54,4 +59,4 @@ export interface FlyoutProps extends AriaProps, TestProps, IconProps, ChildrenPr
      */
     onBeforeClose?: (...args: AnyObject) => CallbackReturn;
 }
-export declare const Flyout: ({ icon, iconBg, iconColor, iconClassName, rtlFlip, title, actions, closeOnClick, headerClassName, onClose, onBeforeClose, children, loading, size, width, minWidth, hideMask, align, ...aria }: FlyoutProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Flyout: ({ icon, iconClassName, title, actions, closeOnClick, headerClassName, onClose, onBeforeClose, children, loading, size, width, minWidth, root, hideMask, align, ...aria }: FlyoutProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/overlays/message/Message.d.ts

@@ -1,6 +1,17 @@
-/// <reference types="react" />
-import { type ColorType, type Elements, type IconProps } from "../../types";
-export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+import { type ColorState, type Elements } from "../../types";
+export interface MessageProps {
+    /**
+     * svg path / webfont className / 1-4 letter text
+     */
+    icon: string;
+    /**
+     * icon image source URL, if failed to load then shows icon
+     */
+    iconSrc?: string;
+    /**
+     * flip icon in rtl
+     */
+    rtlFlip?: boolean;
     /**
      * message title
      */
@@ -12,10 +23,10 @@ export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
     /**
      * theme color
      */
-    color?: ColorType;
+    color?: ColorState;
     /**
      * extra action button
      */
     actions?: Elements<JSX.Element>;
 }
-export declare const Message: ({ title, message, color, icon, rtlFlip, actions, onClose, }: MessageProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Message: ({ title, message, color, icon, iconSrc, rtlFlip, actions, onClose, }: MessageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/overlays/modal/Modal.d.ts

@@ -1,6 +1,7 @@
-/// <reference types="react" />
-import { type AriaProps, type CallbackReturn, type ChildrenProp, type Elements, type IconProps, type TestProps } from "../../types";
-export interface ModalProps extends AriaProps, TestProps, IconProps, ChildrenProp {
+import { type IconProps } from "../../components/icon/Icon";
+import { type AriaProps, type CallbackReturn, type ChildrenProp, type Elements, type TestProps } from "../../types";
+export interface ModalProps extends AriaProps, TestProps, ChildrenProp {
+    icon?: IconProps;
     /**
      * header className
      */
@@ -41,6 +42,14 @@ export interface ModalProps extends AriaProps, TestProps, IconProps, ChildrenPro
      * minimum width
      */
     minWidth?: string | number;
+    /**
+     * portal root element
+     */
+    root?: HTMLElement;
+    /**
+     * hide mask background
+     */
+    hideMask?: boolean;
     /**
      * close handler
      */
@@ -50,4 +59,4 @@ export interface ModalProps extends AriaProps, TestProps, IconProps, ChildrenPro
      */
     onBeforeClose?: (...args: AnyObject) => CallbackReturn;
 }
-export declare const Modal: ({ icon, iconBg, iconColor, iconClassName, rtlFlip, title, actions, headerClassName, onClose, onBeforeClose, children, loading, size, width, height, minHeight, minWidth, ...aria }: ModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ icon, iconClassName, title, actions, headerClassName, onClose, onBeforeClose, children, loading, root, size, hideMask, width, height, minHeight, minWidth, ...aria }: ModalProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/overlays/toast/Toast.d.ts

@@ -1,10 +1,21 @@
-/// <reference types="react" />
-import { type ColorType, type Elements, type IconProps } from "../../types";
-export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+import { type ColorState, type Elements } from "../../types";
+export interface ToastProps {
     /**
      * toast type
      */
     type?: "alert" | "confirm";
+    /**
+     * svg path / webfont className / 1-4 letter text
+     */
+    icon?: string;
+    /**
+     * icon image source URL, if failed to load then shows icon
+     */
+    iconSrc?: string;
+    /**
+     * flip icon in rtl
+     */
+    rtlFlip?: boolean;
     /**
      * toast title
      */
@@ -16,7 +27,7 @@ export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
     /**
      * theme color
      */
-    color?: ColorType;
+    color?: ColorState;
     /**
      * extra action button
      */
@@ -30,4 +41,4 @@ export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
      */
     cancelLabel?: string;
 }
-export declare const Toast: ({ title, message, color, icon, rtlFlip, actions, onClose, onCloseAll, type, okLabel, cancelLabel, }: ToastProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toast: ({ title, message, color, icon, iconSrc, rtlFlip, actions, onClose, onCloseAll, type, okLabel, cancelLabel, }: ToastProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/overlays/tooltip/Tooltip.d.ts

@@ -10,9 +10,9 @@ export interface TooltipProps extends TooltipType, RefProp {
      */
     copyContent?: boolean | string;
     disabled?: boolean;
-    children: ReactElement;
+    children: ReactElement<KeyValue>;
 }
 export declare const getTooltipProps: (tooltip?: string | TooltipType, innerRef?: AnyObject) => (TooltipType & {
     ref: AnyObject;
 }) | undefined;
-export declare const Tooltip: ({ ref, children, color, content, open, copyContent, disabled, placement: _placement, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltip: ({ ref, children, color, textColor, content, open, copyContent, disabled, placement: _placement, ...rest }: TooltipProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,13 @@
 import { type Placement } from "@floating-ui/react";
 import { type JSXElementConstructor, type Ref } from "react";
+export type ModalProps<P = unknown> = P & {
+    onClose: (...args: AnyObject) => void;
+};
 export type SizeType = "xs" | "sm" | "md" | "lg" | "xl";
 export type SizeTypeWithZero = "xs" | "sm" | "md" | "lg" | "xl" | 0;
-export type ColorType = "primary" | "accent" | "info" | "danger" | "success" | "warning";
-export type PaletteType = "scarlet" | "pumpkin" | "marigold" | "avacado" | "jade" | "denim" | "iris" | "lilac" | "coral" | "wood" | "silver" | "steel" | "olive" | "sand";
+export type ColorState = "default" | "primary" | "accent" | "muted" | "info" | "danger" | "success" | "warning";
+export type ColorType = "primary-50" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-800" | "primary-900" | "primary-950" | "accent-50" | "accent-100" | "accent-200" | "accent-300" | "accent-400" | "accent-500" | "accent-600" | "accent-700" | "accent-800" | "accent-900" | "accent-950" | "info-50" | "info-100" | "info-200" | "info-300" | "info-400" | "info-500" | "info-600" | "info-700" | "info-800" | "info-900" | "info-950" | "danger-50" | "danger-100" | "danger-200" | "danger-300" | "danger-400" | "danger-500" | "danger-600" | "danger-700" | "danger-800" | "danger-900" | "danger-950" | "success-50" | "success-100" | "success-200" | "success-300" | "success-400" | "success-500" | "success-600" | "success-700" | "success-800" | "success-900" | "success-950" | "warning-50" | "warning-100" | "warning-200" | "warning-300" | "warning-400" | "warning-500" | "warning-600" | "warning-700" | "warning-800" | "warning-900" | "warning-950";
+export type PaletteType = "scarlet-50" | "scarlet-100" | "scarlet-200" | "scarlet-300" | "scarlet-400" | "scarlet-500" | "scarlet-600" | "scarlet-700" | "scarlet-800" | "scarlet-900" | "scarlet-950" | "pumpkin-50" | "pumpkin-100" | "pumpkin-200" | "pumpkin-300" | "pumpkin-400" | "pumpkin-500" | "pumpkin-600" | "pumpkin-700" | "pumpkin-800" | "pumpkin-900" | "pumpkin-950" | "marigold-50" | "marigold-100" | "marigold-200" | "marigold-300" | "marigold-400" | "marigold-500" | "marigold-600" | "marigold-700" | "marigold-800" | "marigold-900" | "marigold-950" | "avacado-50" | "avacado-100" | "avacado-200" | "avacado-300" | "avacado-400" | "avacado-500" | "avacado-600" | "avacado-700" | "avacado-800" | "avacado-900" | "avacado-950" | "jade-50" | "jade-100" | "jade-200" | "jade-300" | "jade-400" | "jade-500" | "jade-600" | "jade-700" | "jade-800" | "jade-900" | "jade-950" | "denim-50" | "denim-100" | "denim-200" | "denim-300" | "denim-400" | "denim-500" | "denim-600" | "denim-700" | "denim-800" | "denim-900" | "denim-950" | "iris-50" | "iris-100" | "iris-200" | "iris-300" | "iris-400" | "iris-500" | "iris-600" | "iris-700" | "iris-800" | "iris-900" | "iris-950" | "lilac-50" | "lilac-100" | "lilac-200" | "lilac-300" | "lilac-400" | "lilac-500" | "lilac-600" | "lilac-700" | "lilac-800" | "lilac-900" | "lilac-950" | "coral-50" | "coral-100" | "coral-200" | "coral-300" | "coral-400" | "coral-500" | "coral-600" | "coral-700" | "coral-800" | "coral-900" | "coral-950" | "wood-50" | "wood-100" | "wood-200" | "wood-300" | "wood-400" | "wood-500" | "wood-600" | "wood-700" | "wood-800" | "wood-900" | "wood-950" | "silver-50" | "silver-100" | "silver-200" | "silver-300" | "silver-400" | "silver-500" | "silver-600" | "silver-700" | "silver-800" | "silver-900" | "silver-950" | "steel-50" | "steel-100" | "steel-200" | "steel-300" | "steel-400" | "steel-500" | "steel-600" | "steel-700" | "steel-800" | "steel-900" | "steel-950" | "olive-50" | "olive-100" | "olive-200" | "olive-300" | "olive-400" | "olive-500" | "olive-600" | "olive-700" | "olive-800" | "olive-900" | "olive-950" | "sand-50" | "sand-100" | "sand-200" | "sand-300" | "sand-400" | "sand-500" | "sand-600" | "sand-700" | "sand-800" | "sand-900" | "sand-950" | "tint-50" | "tint-100" | "tint-200" | "tint-300" | "tint-400" | "tint-500" | "tint-600" | "tint-700" | "tint-800" | "tint-900" | "tint-950";
 export type ColorWithGrays = ColorType | "invert" | "dimmed" | "muted";
 export declare const ThemeColors: string[];
 export interface TooltipType {
@@ -14,7 +18,11 @@ export interface TooltipType {
     /**
      * tooltip color
      */
-    color?: ColorType;
+    color?: ColorType | PaletteType | string;
+    /**
+     * text color
+     */
+    textColor?: ColorType | PaletteType | string;
     /**
      * tooltip placement
      */
@@ -43,6 +51,10 @@ export interface CssProp {
      * css classname(s)
      */
     className?: string;
+    /**
+     * direction
+     */
+    dir?: "ltr" | "rtl";
 }
 export interface TestProps {
     /**
@@ -54,7 +66,7 @@ export interface TestProps {
      */
     "data-test-value"?: AnyObject;
 }
-export type Elements<T> = React.ReactElement<T> | React.ReactPortal | React.ReactNode | string | number | boolean | null | undefined;
+export type Elements<T> = React.ReactElement<T> | React.ReactNode;
 export type AriaProps = React.AriaAttributes;
 /**
  * For wrapping components
@@ -72,24 +84,6 @@ export type PolymorphicProps<AsTag extends ReactTag> = Omit<PropsOf<AsTag>, "chi
      */
     as?: AsTag;
 };
-export interface IconProps {
-    /**
-     * svg path / image url
-     */
-    icon?: string;
-    /**
-     * flip icon in rtl
-     */
-    rtlFlip?: boolean;
-    /**
-     * icon background color
-     */
-    iconBg?: ColorType | string;
-    /**
-     * icon color
-     */
-    iconColor?: ColorType | string;
-}
 export interface CollapseProps {
     /**
      * Allow collapsing
@@ -124,10 +118,11 @@ export interface TooltipProp {
      */
     tooltip?: string | TooltipType;
 }
-export interface ChildProp<T = JSX.Element> {
+export type ReactElement = React.ReactElement | string | number | bigint | Iterable<React.ReactNode> | React.ReactPortal | boolean | null | undefined;
+export interface ChildProp<T = ReactElement> {
     children: Elements<T>;
 }
-export interface ChildrenProp<T = JSX.Element> {
+export interface ChildrenProp<T = ReactElement> {
     children: Elements<T> | Array<Elements<T>>;
 }
 export interface PositionObject {
@@ -142,3 +137,12 @@ export interface ScrollObject extends PositionObject, SizeObject {
     scrollWidth?: number;
     scrollHeight: number;
 }
+export type ArrayType<T extends readonly any[] | ArrayLike<any> | undefined> = T extends readonly any[] ? T[number] : T extends ArrayLike<any> ? T[number] : undefined;
+export type Complete<T> = {
+    [P in keyof Required<T>]: Pick<T, P> extends Required<Pick<T, P>> ? T[P] : T[P] | undefined;
+};
+export type NestedKeys<T> = T extends object ? {
+    [K in keyof T]: K extends string | number ? T[K] extends object ? T[K] extends readonly any[] ? T[K][number] extends object ? // Array of objects/items: return key with array index notation and recurse
+    `${K}.${NestedKeys<T[K][number]>}` | `${K}` : `${K}` : // Standard object: return key with dot notation and recurse
+    `${K}.${NestedKeys<T[K]>}` | `${K}` : `${K}` : never;
+}[keyof T] : "";

package/dist/types/typography/Abbr.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { type ChildProp, type ColorType, type CssProp } from "../types";
+import { type ChildProp, type ColorType, type CssProp, type PaletteType } from "../types";
 export interface AbbrProps extends ChildProp<string>, CssProp {
     /**
      * content to copy using the tooltip copy action
@@ -10,13 +9,44 @@ export interface AbbrProps extends ChildProp<string>, CssProp {
      *
      * [textPart, tooltip, color (class name or color string)]
      */
-    abbr: Array<[textPart: string, tooltip: string, color?: ColorType | string]>;
+    abbr: Array<[
+        textPart: string,
+        tooltip: string,
+        color?: ColorType | PaletteType | string
+    ]>;
     /**
      * renderer callback
      */
     renderer?: (part: string[]) => JSX.Element;
 }
 /**
- * Typography abbr component to wrap text parts in `abbr` with tooltip
+ * A component that renders abbreviated text with tooltips for additional information.
+ * It allows you to define a list of abbreviations, each with a tooltip and optional color.
+ * The component will tokenize the children text and replace matching parts with the abbreviated version.
+ * It supports a copy action that can either copy the text or the tooltip content.
+ * This component is useful for displaying technical terms or acronyms in a user-friendly way,
+ * while providing additional context through tooltips.
+ *
+ * @param {AbbrProps} props - The properties for the Abbr component.
+ * @returns {JSX.Element} The rendered Abbr component.
+ *
+ * @example
+ * ```jsx
+ * <Abbr
+ * abbr={[
+ *   ["HTML", "HyperText Markup Language", "primary"],
+ *   ["CSS", "Cascading Style Sheets", "secondary"],
+ *   ["JS", "JavaScript", "success"],
+ * ]}
+ * className="text-sm"
+ * copyContent="tooltip"
+ * >
+ *   Learn more about HTML, CSS, and JS.
+ * </Abbr>
+ * // Renders the text with abbreviations for HTML, CSS, and JS,
+ * // each with a tooltip showing the full form and colored according to the specified color.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--abbr} for more details.
  */
 export declare const Abbr: ({ children, abbr, className, renderer, copyContent, }: AbbrProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/typography/Anchor.d.ts

@@ -0,0 +1,42 @@
+import { type MouseEventHandler } from "react";
+import { type AriaProps, type ChildrenProp, type ColorType, type CssProp, type PaletteType, type PolymorphicProps, type RefProp, type SizeType } from "../types";
+export interface AnchorProps extends ChildrenProp, CssProp, RefProp, AriaProps {
+    /**
+     * link background (CSS color / tailwind color)
+     */
+    bg?: ColorType | PaletteType | string;
+    /**
+     * link color (CSS color / tailwind color)
+     */
+    color?: ColorType | PaletteType | string;
+    /**
+     * link size
+     */
+    size?: SizeType | number | string;
+    /**
+     * font family
+     */
+    family?: "sans" | "serif" | "mono";
+    onClick?: MouseEventHandler;
+}
+/**
+ * A versatile link component that supports polymorphic rendering, allowing it to be used as an anchor (`<a>`), button, or any other HTML element.
+ * It can be styled with background color, text color, font size, and font family.
+ * It accepts various properties such as `bg`, `color`, `size`, and `family` to customize its appearance.
+ * This component is useful for creating links that need to be styled consistently across an application, while also providing flexibility in terms of the HTML element used.
+ *
+ * @param {AnchorProps} props - The properties for the Anchor component.
+ * @param {Tag} as - The HTML element type to render as (default is "a").
+ * @returns {JSX.Element} - A styled anchor element with the specified properties.
+ *
+ * @example
+ * ```jsx
+ * <Anchor href="https://example.com" bg="blue-500" color="white" size="md">
+ *   Click here
+ * </Anchor>
+ * // Renders a link with a blue background, white text, and medium font size.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--anchor} for more details.
+ */
+export declare const Anchor: <Tag extends React.ElementType = "a">({ ref, as, children, className, bg, color, family, size, ...aria }: AnchorProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/typography/Copy.d.ts

@@ -1,4 +1,19 @@
 import { type CssProp, type SizeType } from "../types";
+/**
+ * A component that provides a button to copy text to the clipboard.
+ * It uses the Clipboard API to write the specified text to the clipboard.
+ * The button displays a tooltip feedback when the text is successfully copied.
+ *
+ * @param {CopyProps} props - The properties for the Copy component.
+ * @returns {JSX.Element} The rendered Copy component.
+ *
+ * @example
+ * ```jsx
+ * <Copy text="Text to copy" size="small" />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--copy} for more details.
+ */
 export interface CopyProps extends CssProp {
     text: string;
     /**

package/dist/types/typography/Mark.d.ts

@@ -1,18 +1,36 @@
-/// <reference types="react" />
-import { type ChildProp, type ColorType } from "../types";
+import { type ChildProp, type ColorType, type PaletteType } from "../types";
 export interface MarkProps extends ChildProp<string> {
     /**
      * texts to match and abbreviate within
      *
      * [textPart, color (class name or color string)]
      */
-    mark: Array<[textPart: string, color?: ColorType | string]>;
+    mark: Array<[textPart: string, color?: ColorType | PaletteType | string]>;
     /**
      * renderer callback
      */
     renderer?: (part: string[]) => JSX.Element;
 }
 /**
- * Typography mark component to wrap text parts in `mark`
+ * A component that highlights specific text parts with a mark element, allowing for custom rendering and color.
+ * It tokenizes the children string based on the provided `mark` array,
+ * which contains pairs of text parts and their corresponding colors.
+ * The component can use a custom renderer to display the marked text,
+ * allowing for greater flexibility in how the text is presented.
+ *
+ * @param {MarkProps} props - The properties for the Mark component.
+ * @returns {JSX.Element} The rendered Mark component.
+ *
+ * @example
+ * <Mark
+ *   mark={[
+ *     ["important", "red"],
+ *     ["note", "blue"],
+ *   ]}
+ * >
+ *   This is an important note that should be highlighted.
+ * </Mark>
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--mark} for more details.
  */
 export declare const Mark: ({ children, mark, renderer }: MarkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/typography/Text.d.ts

@@ -30,6 +30,32 @@ export interface TextProps extends ChildrenProp, CssProp, AriaProps, TestProps {
     clamp?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 }
 /**
- * Typography text component
+ * A component that renders text with various styles, supports line clamping, and provides a "show more" link if the text is clipped.
+ * It can be rendered as an inline element or a block element, and allows customization of background color, text color, font size, font family, and text alignment.
+ * It also supports line clamping to limit the number of visible lines, and provides a toggle to show more or less text when the content exceeds the specified clamp.
+ * The component uses a combination of CSS and JavaScript to achieve the desired effects, ensuring a smooth user experience.
+ * It leverages the ResizeObserver API to detect changes in the text container's size and adjust the line clamping accordingly.
+ *
+ * @param {TextProps} props - The properties for the Text component.
+ * @returns {JSX.Element} The rendered Text component.
+ *
+ * @example
+ * ```jsx
+ * <Text
+ *   inline={false}
+ *   bg="bg-gray-100"
+ *   color="text-gray-800"
+ *   size="md"
+ *   family="sans"
+ *   clamp={2}
+ *   align="start"
+ * >
+ *   This is a sample text that demonstrates the Text component with various styles applied.
+ * </Text>
+ * // Renders a block-level text with gray background, dark gray text, medium font size,
+ * // sans-serif font family, clamped to 2 lines, and left-aligned.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--text} for more details.
  */
 export declare const Text: ({ children, className, inline, bg, color, family, size, clamp, align, ...aria }: TextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/typography/Title.d.ts

@@ -24,6 +24,21 @@ export interface TitleProps extends ChildrenProp, CssProp, AriaProps {
     align?: "start" | "end" | "center" | "justify";
 }
 /**
- * Typography title component
+ * A component that renders a title with customizable styles such as background color, text color, size, alignment, and font family.
+ * It can be rendered as different HTML elements based on the `as` prop.
+ * This component is useful for creating headings or titles in a consistent style across an application.
+ *
+ * @param {TitleProps} props - The properties for the Title component.
+ * @returns {JSX.Element} The rendered Title component.
+ *
+ * @example
+ * ```jsx
+ * <Title as="h1" bg="blue-500" color="white" size="2xl" align="center">
+ *   This is a Title
+ * </Title>
+ * // Renders a title as an h1 element with a blue background, white text color, size of 2xl, and centered alignment.
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/core-typography--title} for more details.
  */
 export declare const Title: ({ children, className, as, bg, color, size, align, family, ...aria }: TitleProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/typography/index.d.ts

@@ -1,6 +1,6 @@
 export { Abbr } from "./Abbr";
+export { Anchor } from "./Anchor";
 export { Copy } from "./Copy";
-export { Link } from "./Link";
 export { Mark } from "./Mark";
 export { Text } from "./Text";
 export { Title } from "./Title";

package/dist/types/utils/cloneElement.d.ts

@@ -0,0 +1 @@
+export declare const cloneChildren: (children: React.ReactNode, callback: (child: React.ReactNode, index: number) => React.ReactNode) => React.ReactNode;

package/dist/types/utils/getColor.d.ts

@@ -1,4 +1 @@
-export declare const getColor: (color: string) => string | undefined;
-export declare const getBgClass: (bg: string) => string | undefined;
-export declare const getColorClass: (color: string) => string | undefined;
-export declare const getBorderClass: (color: string) => string | undefined;
+export declare const getColor: (color: string) => string;

package/dist/types/utils/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./calculateDimensions";
+export * from "./cloneElement";
 export * from "./getColor";
 export * from "./nodeCheck";