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

package/dist/types/index.d.ts

@@ -1,19 +1,107 @@
-export * from "./components";
-export * from "./core";
+/**
+ * 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.
+ */
+export declare const CORE_PACKAGE = "@react-fabric/core";
+export declare const CORE_VERSION = "1.0.1";
+export { useApplicationContext } from "./context/context";
+export { ApplicationProvider } from "./context/Global";
+export type { ModalProps } from "./types";
 export { addTranslationBundle } from "./i18n";
-export { Flyout, Modal, Tooltip } from "./overlays";
-export * from "./typography";
-export * from "./hooks/useClientService";
-export * from "./hooks/useDebounce";
-export * from "./hooks/useEffectDebugger";
-export * from "./hooks/useIsDark";
-export * from "./hooks/useIsRtl";
-export * from "./hooks/useNavigator";
-export * from "./hooks/useOverlayService";
-export * from "./hooks/useResize";
-export * from "./hooks/useResizeObserver";
-export * from "./hooks/useStorage";
-export { HotKey } from "./hotkeys/HotKey";
-export { HotKeyLabel } from "./hotkeys/HotKeyLabel";
-export { CoreIcons } from "./types/icons";
-export { ApplicationProvider, useApplicationContext, useGlobals, useNotificationService, } from "./context/Global";
+export { cloneChildren, getBadgeProps, getColor, getIconProps } from "./utils";
+export { useClientService } from "./hooks/useClientService";
+export { useContextMenu } from "./hooks/useContextMenu";
+export { useControlledValue } from "./hooks/useControlledValue";
+export { useDebounce } from "./hooks/useDebounce";
+export { useEffectDebugger, useLayoutEffectDebugger, useMemoDebugger } from "./hooks/useEffectDebugger";
+export { useIsDark } from "./hooks/useIsDark";
+export { useIsRtl } from "./hooks/useIsRtl";
+export { useNavigator } from "./hooks/useNavigator";
+export { useNotificationService } from "./hooks/useNotificationService";
+export { useOverlayService } from "./hooks/useOverlayService";
+export { usePropState, usePropWatcher } from "./hooks/usePropState";
+export { usePropToggle } from "./hooks/usePropToggle";
+export { useResize } from "./hooks/useResize";
+export { useResizeObserver } from "./hooks/useResizeObserver";
+export { useLocalStorage, useSessionStorage } from "./hooks/useStorage";
+export { AreaToggle } from "./core/areaToggle/AreaToggle";
+export { Aside } from "./core/aside/Aside";
+export { ErrorBoundary } from "./core/boundary/ErrorBoundary";
+export { Content } from "./core/content/Content";
+export { Footer, Header } from "./core/headfoot/HeadFoot";
+export { Layout } from "./core/layout/Layout";
+export { Col, Container, Row } from "./core/responsive/Responsive";
+export { ThemeProvider } from "./core/theme/ThemeProvider";
+export { Viewport } from "./core/viewport/Viewport";
+export { Abbr } from "./typography/Abbr";
+export { Anchor } from "./typography/Anchor";
+export { Copy } from "./typography/Copy";
+export { Kbd } from "./typography/Kbd";
+export { Mark } from "./typography/Mark";
+export { Text } from "./typography/Text";
+export { Title } from "./typography/Title";
+export { ActionLabel } from "./components/actionLabel/ActionLabel";
+export { AnimationIndicator } from "./components/animations/Indicator";
+export { AnimationLoader } from "./components/animations/Loader";
+export { LoadingBars } from "./components/animations/LoadingBars";
+export { LoadingLine } from "./components/animations/LoadingLine";
+export { LoadingSpinner } from "./components/animations/LoadingSpinner";
+export { Skeleton } from "./components/animations/Skeleton";
+export { Avatar } from "./components/avatar/Avatar";
+export { AvatarGroup } from "./components/avatar/AvatarGroup";
+export { Badge } from "./components/badge/Badge";
+export { Button } from "./components/button/Button";
+export { ButtonGroup } from "./components/button/ButtonGroup";
+export { ConfirmButton } from "./components/button/ConfirmButton";
+export { ToggleButtonGroup } from "./components/button/ToggleButtonGroup";
+export { Callout } from "./components/callout/Callout";
+export { Card } from "./components/card/Card";
+export { CardCover } from "./components/card/CardCover";
+export { FlipContent, type FlipContentRef } from "./components/card/FlipContent";
+export { Chip } from "./components/chip/Chip";
+export { Collapsable } from "./components/collapsable/Collapsable";
+export { Divider } from "./components/divider/Divider";
+export { Dropdown, DropdownDismiss } from "./components/dropdown/Dropdown";
+export { DropdownTool } from "./components/dropdown/DropdownTool";
+export { StyleEffect } from "./components/effect/StyleEffect";
+export { EmptyContent } from "./components/empty/EmptyContent";
+export { Flyout } from "./components/flyout/Flyout";
+export { HotKey } from "./components/hotkey/HotKey";
+export { Icon } from "./components/icon/Icon";
+export { Image, Video } from "./components/media/Media";
+export { ContextMenu } from "./components/menu/ContextMenu";
+export { Menu } from "./components/menu/Menu";
+export { MenuItem } from "./components/menu/MenuItem";
+export { Meter } from "./components/meter/Meter";
+export { Modal } from "./components/modal/Modal";
+export { Navigator } from "./components/navigator/Navigator";
+export { Panel } from "./components/panel/Panel";
+export { PanelGroup } from "./components/panel/PanelGroup";
+export { PanelStack } from "./components/panel/PanelStack";
+export { Pillbox } from "./components/pillbox/Pillbox";
+export { ProgressBar } from "./components/progress/ProgressBar";
+export { ProgressCircle } from "./components/progress/ProgressCircle";
+export { Tab } from "./components/tabpanel/Tab";
+export { TabPanel } from "./components/tabpanel/TabPanel";
+export { Titlebar } from "./components/titlebar/Titlebar";
+export { Tooltip } from "./components/tooltip/Tooltip";

package/dist/types/types/colors.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 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.
+ */
+export type ColorBase = "primary" | "secondary" | "info" | "danger" | "success" | "warning";
+export type ColorTints = "tint" | "silver" | "steel" | "olive" | "blush" | "slate";
+export type ColorPalette = "scarlet" | "pumpkin" | "marigold" | "amber" | "jade" | "avocado" | "teal" | "azure" | "denim" | "iris" | "lilac" | "orchid" | "coral" | "wood" | "terracotta";
+export type ColorUnion = ColorBase | ColorTints | ColorPalette;
+export type CustomColors<T = ColorUnion> = T | (string & {});

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

@@ -1,49 +1,106 @@
-import { type Placement } from "@floating-ui/react";
-import { type JSXElementConstructor, type Ref } 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.
+ */
+/**
+ * Core type definitions for React Fabric.
+ *
+ * This module exports shared TypeScript types and interfaces used across the library,
+ * including CSS prop types, test prop types, polymorphic component props,
+ * and utility types for working with React elements and nested object keys.
+ */
+export type { ColorBase, ColorPalette, ColorTints, ColorUnion, CustomColors } from "./colors";
+export type CSSSizeType = string | number;
 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 ColorWithGrays = ColorType | "invert" | "dimmed" | "muted";
-export declare const ThemeColors: string[];
-export interface TooltipType {
+export type SizeWithCustom = SizeType | (string & {}) | number;
+export interface PositionObject {
+    top: number;
+    left: number;
+}
+export interface SizeObject {
+    width: number;
+    height: number;
+}
+export interface ScrollObject extends PositionObject, SizeObject {
+    scrollWidth?: number;
+    scrollHeight: number;
+}
+/**
+ * CSS prop types
+ * This interface defines the properties that can be used for styling React components using CSS class names.
+ * It includes an optional "className" property for applying CSS class names directly to the component,
+ * and an optional "classNames" property which is an object map for component items, allowing for more granular styling.
+ * The "dir" property specifies the text direction, which can be either "ltr" (left-to-right) or "rtl" (right-to-left), providing support for internationalization and different writing systems.
+ * By using this interface, developers can easily apply consistent styling to their components while also supporting various text directions.
+ */
+export interface CssProp {
     /**
-     * tooltip content
+     * css classname(s)
      */
-    content?: string | JSX.Element;
+    className?: string;
+    dir?: "ltr" | "rtl";
+}
+export interface CssPropWithMap<T extends Record<string, string> = never> extends CssProp {
     /**
-     * tooltip color
+     * css classname(s) object map for component items
      */
-    color?: ColorType;
+    classNames?: Partial<T>;
+}
+export interface HeightProps {
     /**
-     * tooltip placement
+     * initial height
      */
-    placement?: Placement;
-}
-export interface BadgeType {
+    height?: number | string;
     /**
-     * badge value
+     * max height
      */
-    value?: number | string;
+    maxHeight?: number | string;
     /**
-     * max value for number display
+     * min height
      */
-    max?: number;
+    minHeight?: number | string;
+}
+export interface WidthProps {
     /**
-     * ping animation
+     * initial width
      */
-    ping?: boolean;
+    width?: number | string;
     /**
-     * badge CSS className
+     * max width
      */
-    className?: string;
-}
-export interface CssProp {
+    maxWidth?: number | string;
     /**
-     * css classname(s)
+     * min width
      */
-    className?: string;
+    minWidth?: number | string;
 }
+/**
+ * Test prop types
+ * This interface defines the properties that can be used for testing purposes in React components.
+ * It includes optional data attributes for test id and test value, which can be used to identify and interact with elements during testing.
+ * The "data-testid" attribute is commonly used to provide a unique identifier for an element, while the "data-test-value" attribute can hold any additional information relevant to the test.
+ * By using these properties, developers can write more robust and maintainable tests that target specific elements in the DOM.
+ */
 export interface TestProps {
     /**
      * data attribute for test id
@@ -52,44 +109,91 @@ export interface TestProps {
     /**
      * data attribute for test value
      */
-    "data-test-value"?: AnyObject;
+    "data-test-value"?: string;
 }
-export type Elements<T> = React.ReactElement<T> | React.ReactPortal | React.ReactNode | string | number | boolean | null | undefined;
-export type AriaProps = React.AriaAttributes;
-/**
- * For wrapping components
- */
-export interface RefProp<T = HTMLElement> {
-    ref?: Ref<T>;
-}
-export type CallbackReturn<T = unknown> = undefined | T | Promise<T | undefined>;
-export type ReactTag = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
-export type PropsOf<AsTag extends ReactTag> = AsTag extends React.ElementType ? Omit<React.ComponentProps<AsTag>, "ref"> : never;
-export type PolymorphicProps<AsTag extends ReactTag> = Omit<PropsOf<AsTag>, "children" | "as" | "className" | "onClick"> & {
+export interface HtmlEvents {
     /**
-     * The component used for the root node.
-     * Either a string to use a HTML element or a component.
+     * Focus handler for the button.
      */
-    as?: AsTag;
-};
-export interface IconProps {
+    onFocus?: (e: React.FocusEvent) => void;
+    /**
+     * Blur handler for the button.
+     */
+    onBlur?: (e: React.FocusEvent) => void;
+    /**
+     * Click handler for the button.
+     */
+    onClick?: (e?: React.MouseEvent) => CallbackReturn;
     /**
-     * svg path / image url
+     * Mouse down handler for the button.
      */
-    icon?: string;
+    onMouseDown?: (e: React.MouseEvent) => void;
     /**
-     * flip icon in rtl
+     * Mouse up handler for the button.
      */
-    rtlFlip?: boolean;
+    onMouseUp?: (e: React.MouseEvent) => void;
     /**
-     * icon background color
+     * Mouse over handler for the button.
      */
-    iconBg?: ColorType | string;
+    onMouseOver?: (e: React.MouseEvent) => void;
     /**
-     * icon color
+     * Mouse move handler for the button.
      */
-    iconColor?: ColorType | string;
+    onMouseMove?: (e: React.MouseEvent) => void;
+    /**
+     * Mouse enter handler for the button.
+     */
+    onMouseEnter?: (e: React.MouseEvent) => void;
+    /**
+     * Mouse leave handler for the button.
+     */
+    onMouseLeave?: (e: React.MouseEvent) => void;
 }
+export interface Draggable {
+    /**
+     * make card draggable
+     */
+    draggable?: boolean;
+    /**
+     * drag event data key
+     */
+    dragKey?: string;
+    /**
+     * drag event data
+     */
+    dragData?: KeyValue;
+    onDrag?: (e: React.DragEvent) => void;
+    onDragStart?: (e: React.DragEvent, dragKey: string, dragData?: KeyValue) => void;
+    onDragEnd?: (e: React.DragEvent) => void;
+}
+export interface Droppable {
+    /**
+     * droppable types. true for all, string[] for specific types
+     */
+    dropable?: true | string[];
+    onDragEnter?: (e: React.DragEvent) => void;
+    onDragOver?: (e: React.DragEvent) => void;
+    onDragLeave?: (e: React.DragEvent) => void;
+    onDrop?: (e: React.DragEvent) => void;
+}
+/**
+ * Utility type for ref props in React components.
+ * This type defines a generic interface for components that accept a ref prop, allowing the ref to be of any specified type T (defaulting to HTMLElement).
+ * The ref prop is optional and can be used to access the underlying DOM element or component instance.
+ * By using this type, you can ensure that your components are properly typed when accepting refs, improving type safety and developer experience.
+ */
+export interface RefProp<T = HTMLElement> {
+    ref?: React.Ref<T>;
+}
+export type ModalProps<P = unknown, T extends AnyObject = AnyObject> = P & {
+    onClose?: (args: T | null) => void;
+};
+/**
+ * Utility type for callback return values, allowing for void, undefined, a specific type T, or a Promise that resolves to T or undefined.
+ * This type is useful for defining the return type of callback functions that may perform asynchronous operations or may not return a value at all.
+ * By including void and undefined, it allows for flexibility in how the callback is implemented, while still providing the option to return a specific type or a Promise.
+ */
+export type CallbackReturn<T = unknown> = void | undefined | T | Promise<T | undefined>;
 export interface CollapseProps {
     /**
      * Allow collapsing
@@ -118,27 +222,63 @@ export interface ExpandProps {
      */
     onExpand?: (state: boolean) => void;
 }
-export interface TooltipProp {
-    /**
-     * floating tooltip
-     */
-    tooltip?: string | TooltipType;
-}
-export interface ChildProp<T = JSX.Element> {
-    children: Elements<T>;
-}
-export interface ChildrenProp<T = JSX.Element> {
-    children: Elements<T> | Array<Elements<T>>;
-}
-export interface PositionObject {
-    top: number;
-    left: number;
-}
-export interface SizeObject {
-    width: number;
-    height: number;
+export type ChildNode<T = unknown> = React.ReactElement<T> | React.ReactNode | false | undefined | null;
+export interface ChildProp<T = unknown> {
+    children: ChildNode<T>;
 }
-export interface ScrollObject extends PositionObject, SizeObject {
-    scrollWidth?: number;
-    scrollHeight: number;
+export interface ChildrenProp<T = unknown> {
+    children: ChildNode<T> | Array<ChildNode<T>>;
 }
+/**
+ * React tag types
+ */
+export type ReactTag = keyof React.JSX.IntrinsicElements | React.JSXElementConstructor<unknown>;
+/**
+ * Utility type to extract props of a given React tag, excluding the ref prop.
+ * If the tag is a valid React element type, it returns the component props without the ref.
+ * Otherwise, it returns never.
+ */
+export type PropsOf<AsTag extends ReactTag> = AsTag extends React.ElementType ? Omit<React.ComponentProps<AsTag>, "ref"> : never;
+/**
+ * Utility type for polymorphic component props.
+ * It combines the props of the specified React tag (excluding "as" and HTML attributes)
+ * with an optional "as" prop that allows specifying the component or HTML element to render.
+ * This type is useful for creating flexible components that can render different elements based on the "as" prop.
+ * The resulting props include all props of the specified tag, except for "as",
+ * which are handled separately to avoid conflicts.
+ */
+export type PolymorphicProps<AsTag extends ReactTag> = Omit<PropsOf<AsTag>, "as" | "children" | "onClick" | "onDragStart"> & {
+    /**
+     * The component used for the root node.
+     * Either a string to use a HTML element or a component.
+     */
+    as?: AsTag;
+};
+/**
+ * Utility type to extract the element type from an array or array-like type.
+ * If the type is a readonly array, it returns the type of its elements.
+ * If the type is an array-like object, it also returns the type of its elements.
+ * If the type is undefined or does not match either case, it returns undefined.
+ */
+export type ArrayType<T extends readonly unknown[] | ArrayLike<unknown> | undefined> = T extends readonly unknown[] ? T[number] : T extends ArrayLike<unknown> ? T[number] : undefined;
+/**
+ * Utility type to make all properties of a type required, but still allow them to be optional if they were originally optional.
+ * This is useful for cases where you want to ensure that all properties are present, but still want to allow for optional properties to be omitted.
+ * The type iterates over each property of the input type T and checks if it is required or optional.
+ * If the property is required, it keeps it as is. If the property is optional, it allows it to be either the original type or undefined.
+ */
+export type Complete<T> = {
+    [P in keyof Required<T>]: Pick<T, P> extends Required<Pick<T, P>> ? T[P] : T[P] | undefined;
+};
+/**
+ * Utility type to recursively extract nested keys from an object type T.
+ * It checks if T is an object and iterates over its keys. For each key K, it checks if the corresponding value is also an object.
+ * If it is, it recursively extracts the nested keys and combines them with the current key using dot notation.
+ * If the value is not an object, it simply returns the current key. The resulting type is a union of all possible nested keys in the object.
+ * This type is useful for scenarios where you want to access deeply nested properties of an object using a string path.
+ */
+export type NestedKeys<T> = T extends object ? {
+    [K in keyof T]: K extends string | number ? T[K] extends object ? T[K] extends readonly unknown[] ? 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,28 @@
-/// <reference types="react" />
-import { type ChildProp, type ColorType, type CssProp } 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 { ChildProp, CssProp, CustomColors } from "../types";
 export interface AbbrProps extends ChildProp<string>, CssProp {
     /**
      * content to copy using the tooltip copy action
@@ -10,13 +33,35 @@ 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?: CustomColors]>;
     /**
      * renderer callback
      */
-    renderer?: (part: string[]) => JSX.Element;
+    renderer?: (part: string[]) => React.ReactElement;
 }
 /**
- * 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.
+ *
+ * @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.
+ * ```
  */
-export declare const Abbr: ({ children, abbr, className, renderer, copyContent, }: AbbrProps) => import("react/jsx-runtime").JSX.Element;
+export declare function Abbr({ children, abbr, className, renderer, copyContent }: AbbrProps): import("react").JSX.Element;

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

@@ -0,0 +1,41 @@
+/**
+ * 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, PolymorphicProps, RefProp } from "../types";
+export interface AnchorProps extends ChildrenProp, CssProp, RefProp {
+    onClick?: React.MouseEventHandler;
+}
+/**
+ * A versatile link component that supports polymorphic rendering, allowing it to be used as an anchor (`<a>`), button, or any other HTML element.
+ * 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.
+ *
+ * @example
+ * ```jsx
+ * <Anchor href="https://example.com">
+ *   Click here
+ * </Anchor>
+ * // Renders a link with default styling.
+ * ```
+ */
+export declare function Anchor<Tag extends React.ElementType = "a">({ ref, as, children, className, ...props }: AnchorProps & PolymorphicProps<Tag>): import("react").JSX.Element;

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

@@ -1,4 +1,38 @@
-import { type CssProp, type SizeType } 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 { CssProp, 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.
+ *
+ * @example
+ * ```jsx
+ * <Copy text="Text to copy" size="small" />
+ * ```
+ */
 export interface CopyProps extends CssProp {
     text: string;
     /**
@@ -6,4 +40,4 @@ export interface CopyProps extends CssProp {
      */
     size?: SizeType;
 }
-export declare const Copy: ({ text, size, className }: CopyProps) => import("react/jsx-runtime").JSX.Element;
+export declare function Copy({ text, size, className }: CopyProps): import("react").JSX.Element;