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

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,12 @@ 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 { HotKeyWrapper } from "./hotkeys/HotKeyWrapper";
+export { type ModalProps } from "./types";
 export { CoreIcons } from "./types/icons";
+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/icons.d.ts

@@ -1,3 +1,7 @@
+/**
+ * Core icons used in the application.
+ * These icons are typically used for navigation, actions, and other UI elements.
+ */
 export declare namespace CoreIcons {
     /**
      * carets
@@ -38,6 +42,8 @@ export declare namespace CoreIcons {
     const collapseActive = "M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z";
     const expandAll = "M5.293 16.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM18.707 7.293l-6-6c-0.391-0.391-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z";
     const colapseAll = "M18.707 21.293l-6-6c-0.391-0.391-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414zM5.293 2.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
+    const expandAllVar = "M13,9V15H16L12,19L8,15H11V9H8L12,5L16,9H13M4,2H20V4H4V2M4,20H20V22H4V20Z";
+    const colapseAllVar = "M4,12H20V14H4V12M4,9H20V11H4V9M16,4L12,8L8,4H11V1H13V4H16M8,19L12,15L16,19H13V22H11V19H8Z";
     const folderClosed = "M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z";
     const folderOpen = "M6.1,10L4,18V8H21A2,2 0 0,0 19,6H12L10,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H19C19.9,20 20.7,19.4 20.9,18.5L23.2,10H6.1M19,18H6L7.6,12H20.6L19,18Z";
     const zoomIn = "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414zM8 12h2v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1v2h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
@@ -46,9 +52,10 @@ export declare namespace CoreIcons {
     const sortAsc = "M19 7H22L18 3L14 7H17V21H19M2 17H12V19H2M6 5V7H2V5M2 11H9V13H2V11Z";
     const refresh = "M19.547 14.667c-0.736 2.083-2.245 3.67-4.094 4.553s-4.031 1.061-6.114 0.325-3.67-2.245-4.553-4.094-1.061-4.031-0.325-6.114 2.245-3.67 4.094-4.553 4.031-1.061 6.114-0.325c1.188 0.42 2.209 1.088 2.987 1.882l2.824 2.659h-3.48c-0.552 0-1 0.448-1 1s0.448 1 1 1h5.997c0.004 0 0.009 0 0.013 0 0.137-0.001 0.267-0.030 0.386-0.082 0.119-0.051 0.229-0.126 0.324-0.225 0.012-0.012 0.023-0.025 0.034-0.038 0.076-0.087 0.134-0.184 0.175-0.287s0.065-0.213 0.069-0.328c0.002-0.014 0.002-0.028 0.002-0.042v-5.998c0-0.552-0.448-1-1-1s-1 0.448-1 1v3.685l-2.916-2.745c-0.993-1.012-2.274-1.846-3.748-2.366-2.604-0.921-5.336-0.698-7.644 0.405s-4.197 3.088-5.117 5.692-0.696 5.335 0.406 7.643 3.088 4.197 5.692 5.117 5.335 0.697 7.643-0.406 4.197-3.088 5.117-5.692c0.184-0.521-0.089-1.092-0.61-1.276s-1.092 0.089-1.276 0.61z";
     const search = "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z";
+    const ellipsis = "M14 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 5c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 19c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414z";
     const filter = "M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z";
     const funnel = "M19.845 4l-6.609 7.814c-0.147 0.173-0.236 0.399-0.236 0.646v6.922l-2-1v-5.922c0.001-0.227-0.077-0.457-0.236-0.646l-6.609-7.814zM22 2h-20c-0.552 0-1 0.448-1 1 0 0.247 0.089 0.473 0.236 0.646l7.764 9.18v6.174c0 0.389 0.222 0.727 0.553 0.894l4 2c0.494 0.247 1.095 0.047 1.342-0.447 0.072-0.146 0.106-0.301 0.105-0.447v-8.174l7.764-9.18c0.357-0.422 0.304-1.053-0.118-1.409-0.189-0.16-0.419-0.238-0.646-0.237z";
-    const ellipsis = "M14 12c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 5c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414zM14 19c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586-1.053 0.225-1.414 0.586-0.586 0.862-0.586 1.414 0.225 1.053 0.586 1.414 0.862 0.586 1.414 0.586 1.053-0.225 1.414-0.586 0.586-0.862 0.586-1.414z";
+    const funnelFull = "M14,12V19.88C14.04,20.18 13.94,20.5 13.71,20.71C13.32,21.1 12.69,21.1 12.3,20.71L10.29,18.7C10.06,18.47 9.96,18.16 10,17.87V12H9.97L4.21,4.62C3.87,4.19 3.95,3.56 4.38,3.22C4.57,3.08 4.78,3 5,3V3H19V3C19.22,3 19.43,3.08 19.62,3.22C20.05,3.56 20.13,4.19 19.79,4.62L14.03,12H14Z";
     const funnelPlus = "M15 17H18V14H20V17H23V19H20V22H18V19H15V17M13 19.88C13.04 20.18 12.94 20.5 12.72 20.71C12.32 21.1 11.69 21.1 11.3 20.71L7.29 16.7C7.06 16.47 6.96 16.16 7 15.87V10.75L2.21 4.62C1.87 4.19 1.95 3.56 2.38 3.22C2.57 3.08 2.78 3 3 3V3H17V3C17.22 3 17.43 3.08 17.62 3.22C18.05 3.56 18.13 4.19 17.79 4.62L13 10.75V19.88M5.04 5L9 10.07V15.58L11 17.58V10.05L14.96 5H5.04Z";
     const funnelRemove = "M14.73,20.83L17.58,18L14.73,15.17L16.15,13.76L19,16.57L21.8,13.76L23.22,15.17L20.41,18L23.22,20.83L21.8,22.24L19,19.4L16.15,22.24L14.73,20.83M13,19.88C13.04,20.18 12.94,20.5 12.71,20.71C12.32,21.1 11.69,21.1 11.3,20.71L7.29,16.7C7.06,16.47 6.96,16.16 7,15.87V10.75L2.21,4.62C1.87,4.19 1.95,3.56 2.38,3.22C2.57,3.08 2.78,3 3,3V3H17V3C17.22,3 17.43,3.08 17.62,3.22C18.05,3.56 18.13,4.19 17.79,4.62L13,10.75V19.88M5.04,5L9,10.06V15.58L11,17.58V10.05L14.96,5H5.04Z";
     const funnelMinus = "M15 17H23V19H15V17M13 19.88C13.04 20.18 12.94 20.5 12.72 20.71C12.32 21.1 11.69 21.1 11.3 20.71L7.29 16.7C7.06 16.47 6.96 16.16 7 15.87V10.75L2.21 4.62C1.87 4.19 1.95 3.56 2.38 3.22C2.57 3.08 2.78 3 3 3V3H17V3C17.22 3 17.43 3.08 17.62 3.22C18.05 3.56 18.13 4.19 17.79 4.62L13 10.75V19.88M5.04 5L9 10.07V15.58L11 17.58V10.05L14.96 5H5.04Z";
@@ -105,6 +112,7 @@ export declare namespace CoreIcons {
     const mic = "M12 2c0.553 0 1.051 0.223 1.414 0.586s0.586 0.861 0.586 1.414v8c0 0.553-0.223 1.051-0.586 1.414s-0.861 0.586-1.414 0.586-1.051-0.223-1.414-0.586-0.586-0.861-0.586-1.414v-8c0-0.553 0.223-1.051 0.586-1.414s0.861-0.586 1.414-0.586zM12 0c-1.104 0-2.106 0.449-2.828 1.172s-1.172 1.724-1.172 2.828v8c0 1.104 0.449 2.106 1.172 2.828s1.724 1.172 2.828 1.172 2.106-0.449 2.828-1.172 1.172-1.724 1.172-2.828v-8c0-1.104-0.449-2.106-1.172-2.828s-1.724-1.172-2.828-1.172zM8 24h8c0.552 0 1-0.448 1-1s-0.448-1-1-1h-3v-2.062c1.809-0.226 3.432-1.056 4.657-2.281 1.446-1.447 2.343-3.448 2.343-5.657v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1v2c0 1.657-0.67 3.156-1.757 4.243s-2.586 1.757-4.243 1.757-3.156-0.67-4.243-1.757-1.757-2.586-1.757-4.243v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1v2c0 2.209 0.897 4.21 2.343 5.657 1.225 1.225 2.847 2.055 4.657 2.281v2.062h-3c-0.552 0-1 0.448-1 1s0.448 1 1 1z";
     const play = "M5.541 2.159c-0.153-0.1-0.34-0.159-0.541-0.159-0.552 0-1 0.448-1 1v18c-0.001 0.182 0.050 0.372 0.159 0.541 0.299 0.465 0.917 0.599 1.382 0.3l14-9c0.114-0.072 0.219-0.174 0.3-0.3 0.299-0.465 0.164-1.083-0.3-1.382zM6 4.832l11.151 7.168-11.151 7.168z";
     const pause = "M6 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM7 5h2v14h-2zM14 3c-0.552 0-1 0.448-1 1v16c0 0.552 0.448 1 1 1h4c0.552 0 1-0.448 1-1v-16c0-0.552-0.448-1-1-1zM15 5h2v14h-2z";
+    const stop = "M18,18H6V6H18V18Z";
     const volumeOn = "M10 7.081v9.839l-3.375-2.7c-0.17-0.137-0.388-0.22-0.625-0.22h-3v-4h3c0.218 0.001 0.439-0.071 0.625-0.219zM10.375 4.219l-4.726 3.781h-3.649c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h3.649l4.726 3.781c0.431 0.345 1.061 0.275 1.406-0.156 0.148-0.185 0.22-0.407 0.219-0.625v-14c0-0.552-0.448-1-1-1-0.237 0-0.455 0.083-0.625 0.219zM18.363 5.637c1.757 1.758 2.635 4.059 2.635 6.364 0 2.304-0.878 4.605-2.635 6.362-0.39 0.391-0.39 1.024 0 1.414s1.024 0.39 1.414 0c2.147-2.147 3.22-4.963 3.221-7.776s-1.074-5.63-3.221-7.778c-0.39-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM14.833 9.167c0.781 0.781 1.171 1.803 1.171 2.828s-0.39 2.047-1.171 2.828c-0.39 0.391-0.39 1.024 0 1.414s1.024 0.39 1.414 0c1.171-1.171 1.757-2.708 1.757-4.242s-0.586-3.071-1.757-4.242c-0.39-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
     const volumeOff = "M10 7.081v9.839l-3.375-2.7c-0.17-0.137-0.388-0.22-0.625-0.22h-3v-4h3c0.218 0.001 0.439-0.071 0.625-0.219zM10.375 4.219l-4.726 3.781h-3.649c-0.552 0-1 0.448-1 1v6c0 0.552 0.448 1 1 1h3.649l4.726 3.781c0.431 0.345 1.061 0.275 1.406-0.156 0.148-0.185 0.22-0.407 0.219-0.625v-14c0-0.552-0.448-1-1-1-0.237 0-0.455 0.083-0.625 0.219zM16.293 9.707l2.293 2.293-2.293 2.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l2.293-2.293 2.293 2.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-2.293-2.293 2.293-2.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-2.293 2.293-2.293-2.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z";
     const alignLeft = "M3,3H21V5H3V3M3,7H15V9H3V7M3,11H21V13H3V11M3,15H15V17H3V15M3,19H21V21H3V19Z";
@@ -152,6 +160,7 @@ export declare namespace CoreIcons {
     const radioOn = "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z";
     const colorSwatch = "M16 14V12H17.61C17.85 12.71 18 13.39 18 14H16M15.58 8C15.12 7.29 14.65 6.61 14.2 6H14V8H15.58M16 12V10H14V12H16M16 8.68V10H16.74C16.5 9.56 16.26 9.11 16 8.68M12 16V14H14V12H12V10H14V8H12V6H14V5.73C12.9 4.26 12 3.25 12 3.25S6 10 6 14C6 17.31 8.69 20 12 20V18H14V16H12M14 19.65C14.75 19.39 15.42 19 16 18.46V18H14V19.65M14 16H16V14H14V16M16 18H16.46C17 17.42 17.39 16.75 17.65 16H16V18Z";
     const colorPicker = "M19.35,11.72L17.22,13.85L15.81,12.43L8.1,20.14L3.5,22L2,20.5L3.86,15.9L11.57,8.19L10.15,6.78L12.28,4.65L19.35,11.72M16.76,3C17.93,1.83 19.83,1.83 21,3C22.17,4.17 22.17,6.07 21,7.24L19.08,9.16L14.84,4.92L16.76,3M5.56,17.03L4.5,19.5L6.97,18.44L14.4,11L13,9.6L5.56,17.03Z";
+    const list = "M11 15H17V17H11V15M9 7H7V9H9V7M11 13H17V11H11V13M11 9H17V7H11V9M9 11H7V13H9V11M21 5V19C21 20.1 20.1 21 19 21H5C3.9 21 3 20.1 3 19V5C3 3.9 3.9 3 5 3H19C20.1 3 21 3.9 21 5M19 5H5V19H19V5M9 15H7V17H9V15Z";
     /**
      * alert icons
      */
@@ -171,7 +180,7 @@ export declare namespace CoreIcons {
     const mediaAspect = "M19,12H17V15H14V17H19V12M7,9H10V7H5V12H7V9M21,3H3A2,2 0 0,0 1,5V19A2,2 0 0,0 3,21H21A2,2 0 0,0 23,19V5A2,2 0 0,0 21,3M21,19H3V5H21V19Z";
     const mediaZoomer = "M15 0.004c-4.97 0-9 4.030-9 9 0 1.52 0.38 2.95 1.046 4.206l-6.258 6.256 0.005 0.005c-0.489 0.481-0.794 1.147-0.794 1.887 0 1.462 1.185 2.647 2.647 2.647 0.739 0 1.406-0.304 1.886-0.794l-0.002-0.001 6.256-6.255c1.257 0.668 2.689 1.050 4.213 1.050 4.97 0 9-4.030 9-9s-4.030-9-9-9zM3.596 22.273c-0.241 0.25-0.576 0.407-0.95 0.407-0.731 0-1.324-0.592-1.324-1.323 0-0.373 0.157-0.707 0.407-0.95l-0.007-0.006 6.050-6.050c0.529 0.713 1.159 1.343 1.87 1.874l-6.047 6.047zM15 16.505c-4.142 0-7.5-3.359-7.5-7.5s3.358-7.5 7.5-7.5c4.141 0 7.5 3.358 7.5 7.5s-3.359 7.5-7.5 7.5zM15 3.754c0.206 0 0.375 0.168 0.375 0.375s-0.169 0.375-0.375 0.375c-2.486 0-4.5 2.015-4.5 4.5 0 0.207-0.168 0.375-0.375 0.375s-0.375-0.168-0.375-0.375c0-2.9 2.35-5.25 5.25-5.25z";
     const mediaOrient = "M7.34,6.41L0.86,12.9L7.35,19.38L13.84,12.9L7.34,6.41M3.69,12.9L7.35,9.24L11,12.9L7.34,16.56L3.69,12.9M19.36,6.64C17.61,4.88 15.3,4 13,4V0.76L8.76,5L13,9.24V6C14.79,6 16.58,6.68 17.95,8.05C20.68,10.78 20.68,15.22 17.95,17.95C16.58,19.32 14.79,20 13,20C12.03,20 11.06,19.79 10.16,19.39L8.67,20.88C10,21.62 11.5,22 13,22C15.3,22 17.61,21.12 19.36,19.36C22.88,15.85 22.88,10.15 19.36,6.64Z";
-    const mediaCrop = "M7,17V1H5V5H1V7H5V17A2,2 0 0,0 7,19H17V23H19V19H23V17M17,15H19V7C19,5.89 18.1,5 17,5H9V7H17V15Z";
+    const mediaCrop = "M13,17H17V13H19V17H23V19H19V23H17V19H13V17M11,17V19H9V17H11M7,17V19H5V17H7M19,9V11H17V9H19M19,5V7H17V5H19M15,5V7H13V5H15M11,5V7H9V5H11M7,5V7H5V5H7M7,13V15H5V13H7M7,9V11H5V9H7Z";
     const mediaImage = "M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M13.96,12.29L11.21,15.83L9.25,13.47L6.5,17H17.5L13.96,12.29Z";
     const mediaVideo = "M15,8V16H5V8H15M16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5V7A1,1 0 0,0 16,6Z";
     const mediaAudio = "M17.3,11C17.3,14 14.76,16.1 12,16.1C9.24,16.1 6.7,14 6.7,11H5C5,14.41 7.72,17.23 11,17.72V21H13V17.72C16.28,17.23 19,14.41 19,11M10.8,4.9C10.8,4.24 11.34,3.7 12,3.7C12.66,3.7 13.2,4.24 13.2,4.9L13.19,11.1C13.19,11.76 12.66,12.3 12,12.3C11.34,12.3 10.8,11.76 10.8,11.1M12,14A3,3 0 0,0 15,11V5A3,3 0 0,0 12,2A3,3 0 0,0 9,5V11A3,3 0 0,0 12,14Z";
@@ -182,7 +191,7 @@ export declare namespace CoreIcons {
     const mediaSplitter = "M3 15V17H5V15M15 19V21H17V19M19 3H5C3.9 3 3 3.9 3 5V9H5V5H19V9H21V5C21 3.9 20.1 3 19 3M21 19H19V21C20.1 21 21 20.1 21 19M1 11V13H23V11M7 19V21H9V19M19 15V17H21V15M11 19V21H13V19M3 19C3 20.1 3.9 21 5 21V19Z";
     const mediaPlay = "M8,5.14V19.14L19,12.14L8,5.14Z";
     const mediaPause = "M14,19H18V5H14M6,19H10V5H6V19Z";
-    const mediaContrast = "M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z";
+    const mediaContrast = "M12,20C9.79,20 7.79,19.1 6.34,17.66L17.66,6.34C19.1,7.79 20,9.79 20,12A8,8 0 0,1 12,20M6,8H8V6H9.5V8H11.5V9.5H9.5V11.5H8V9.5H6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,16H17V14.5H12V16Z";
     const mediaEqs = "M7 3H5V9H7V3M19 3H17V13H19V3M3 13H5V21H7V13H9V11H3V13M15 7H13V3H11V7H9V9H15V7M11 21H13V11H11V21M15 15V17H17V21H19V17H21V15H15Z";
     const mediaCaptionOff = "M5,4C4.45,4 4,4.18 3.59,4.57C3.2,4.96 3,5.44 3,6V18C3,18.56 3.2,19.04 3.59,19.43C4,19.82 4.45,20 5,20H19C19.5,20 20,19.81 20.39,19.41C20.8,19 21,18.53 21,18V6C21,5.47 20.8,5 20.39,4.59C20,4.19 19.5,4 19,4H5M4.5,5.5H19.5V18.5H4.5V5.5M7,9C6.7,9 6.47,9.09 6.28,9.28C6.09,9.47 6,9.7 6,10V14C6,14.3 6.09,14.53 6.28,14.72C6.47,14.91 6.7,15 7,15H10C10.27,15 10.5,14.91 10.71,14.72C10.91,14.53 11,14.3 11,14V13H9.5V13.5H7.5V10.5H9.5V11H11V10C11,9.7 10.91,9.47 10.71,9.28C10.5,9.09 10.27,9 10,9H7M14,9C13.73,9 13.5,9.09 13.29,9.28C13.09,9.47 13,9.7 13,10V14C13,14.3 13.09,14.53 13.29,14.72C13.5,14.91 13.73,15 14,15H17C17.3,15 17.53,14.91 17.72,14.72C17.91,14.53 18,14.3 18,14V13H16.5V13.5H14.5V10.5H16.5V11H18V10C18,9.7 17.91,9.47 17.72,9.28C17.53,9.09 17.3,9 17,9H14Z";
     const mediaCaptionOn = "M18,11H16.5V10.5H14.5V13.5H16.5V13H18V14A1,1 0 0,1 17,15H14A1,1 0 0,1 13,14V10A1,1 0 0,1 14,9H17A1,1 0 0,1 18,10M11,11H9.5V10.5H7.5V13.5H9.5V13H11V14A1,1 0 0,1 10,15H7A1,1 0 0,1 6,14V10A1,1 0 0,1 7,9H10A1,1 0 0,1 11,10M19,4H5C3.89,4 3,4.89 3,6V18A2,2 0 0,0 5,20H19A2,2 0 0,0 21,18V6C21,4.89 20.1,4 19,4Z";
@@ -193,4 +202,9 @@ export declare namespace CoreIcons {
     const mediaVolume3 = "M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z";
     const mediaComment = "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M6,7H18V9H6V7M6,11H15V13H6V11Z";
     const mediaCommentAdd = "M9,22A1,1 0 0,1 8,21V18H4A2,2 0 0,1 2,16V4C2,2.89 2.9,2 4,2H20A2,2 0 0,1 22,4V16A2,2 0 0,1 20,18H13.9L10.2,21.71C10,21.9 9.75,22 9.5,22V22H9M10,16V19.08L13.08,16H20V4H4V16H10M11,6H13V9H16V11H13V14H11V11H8V9H11V6Z";
+    const mediaCapture = "M12,10L11.06,12.06L9,13L11.06,13.94L12,16L12.94,13.94L15,13L12.94,12.06L12,10M20,5H16.83L15,3H9L7.17,5H4A2,2 0 0,0 2,7V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V7A2,2 0 0,0 20,5M20,19H4V7H8.05L8.64,6.35L9.88,5H14.12L15.36,6.35L15.95,7H20V19M12,8A5,5 0 0,0 7,13A5,5 0 0,0 12,18A5,5 0 0,0 17,13A5,5 0 0,0 12,8M12,16A3,3 0 0,1 9,13A3,3 0 0,1 12,10A3,3 0 0,1 15,13A3,3 0 0,1 12,16Z";
+    const mediaLightness = "M12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6A6,6 0 0,1 18,12A6,6 0 0,1 12,18M20,15.31L23.31,12L20,8.69V4H15.31L12,0.69L8.69,4H4V8.69L0.69,12L4,15.31V20H8.69L12,23.31L15.31,20H20V15.31Z";
+    const mediaColor = "M19,11.5C19,11.5 17,13.67 17,15A2,2 0 0,0 19,17A2,2 0 0,0 21,15C21,13.67 19,11.5 19,11.5M5.21,10L10,5.21L14.79,10M16.56,8.94L7.62,0L6.21,1.41L8.59,3.79L3.44,8.94C2.85,9.5 2.85,10.47 3.44,11.06L8.94,16.56C9.23,16.85 9.62,17 10,17C10.38,17 10.77,16.85 11.06,16.56L16.56,11.06C17.15,10.47 17.15,9.5 16.56,8.94Z";
+    const mediaInvert = "M12,19.58V19.58C10.4,19.58 8.89,18.96 7.76,17.83C6.62,16.69 6,15.19 6,13.58C6,12 6.62,10.47 7.76,9.34L12,5.1M17.66,7.93L12,2.27V2.27L6.34,7.93C3.22,11.05 3.22,16.12 6.34,19.24C7.9,20.8 9.95,21.58 12,21.58C14.05,21.58 16.1,20.8 17.66,19.24C20.78,16.12 20.78,11.05 17.66,7.93Z";
+    const mediaSaturate = "M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z";
 }

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 = "primary" | "accent" | "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
@@ -142,3 +136,7 @@ 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;
+};

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;