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

package/dist/types/components/divider/Divider.d.ts

@@ -1,9 +1,8 @@
-import { type CssProp, type ChildProp, type ColorType, type PaletteType } from "../../types";
-export interface DividerProps extends CssProp, Partial<ChildProp> {
-    /**
-     * apply text bg
-     */
-    fill?: boolean;
+import type { ChildProp, CssPropWithMap, CustomColors } from "../../types";
+export interface DividerProps extends CssPropWithMap<{
+    root: string;
+    label: string;
+}>, Partial<ChildProp> {
     /**
      * vertical rule
      */
@@ -11,10 +10,28 @@ export interface DividerProps extends CssProp, Partial<ChildProp> {
     /**
      * rule color
      */
-    color?: ColorType | PaletteType | "tint";
+    color?: CustomColors;
     /**
      * text alignment
      */
     align?: "start" | "end" | "center";
+    /**
+     * divider style
+     */
+    style?: "solid" | "dashed" | "dotted";
 }
-export declare const Divider: ({ children, color, vertical, fill, align, className, }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A component that represents a visual divider between content.
+ * It can be used to separate sections of content, with optional text labels.
+ * It supports both horizontal and vertical orientations, customizable colors,
+ * styles, and alignment options.
+ *
+ * @example
+ * ```jsx
+ * <Divider color="primary" align="center" style="dashed">
+ *   Divider Text
+ * </Divider>
+ * // Renders a horizontal divider with primary color, centered text, and dashed style.
+ * ```
+ */
+export declare function Divider({ children, color, vertical, style, align, className, classNames }: DividerProps): import("react").JSX.Element;

package/dist/types/components/dropdown/Dropdown.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-import { type Placement } from "@floating-ui/react";
-import { type ChildProp, type RefProp } from "../../types";
+import type { Placement } from "@floating-ui/react";
+import type { ChildProp, RefProp } from "../../types";
 export interface DropdownProps extends RefProp {
     children: [React.ReactNode, React.ReactNode];
     /**
@@ -30,11 +29,15 @@ export interface DropdownProps extends RefProp {
     /**
      * dropdown body className
      */
-    dropdownClassName?: string;
+    className?: string;
     /**
-     * dropdown event
+     * dropdown trigger event, default is click
      */
-    dropdownEvent?: "click" | "hover";
+    trigger?: "click" | "hover";
+    /**
+     * portal root element
+     */
+    root?: HTMLElement;
     /**
      * open handler
      */
@@ -44,7 +47,37 @@ export interface DropdownProps extends RefProp {
      */
     onClose?: () => void;
 }
-export declare const Dropdown: (props: DropdownProps) => import("react/jsx-runtime").JSX.Element;
-export declare const DropdownDismiss: ({ children, dismiss, }: ChildProp & {
+/**
+ * A component that displays a dropdown menu with an anchor and a panel.
+ * It supports various features such as placement, arrow display, click handling,
+ * and event handling for opening and closing the dropdown.
+ *
+ * @example
+ * ```jsx
+ * <Dropdown
+ *   placement="bottom"
+ *   showArrow
+ *   closeOnClick
+ *   fitToParent
+ *   onOpen={() => console.log("Dropdown opened")}
+ *   onClose={() => console.log("Dropdown closed")}
+ * >
+ *   <button>Open Dropdown</button>
+ *   <div>
+ *     <DropdownDismiss>
+ *       <button>Dismiss</button>
+ *     </DropdownDismiss>
+ *     <p>Dropdown Content</p>
+ *   </div>
+ * </Dropdown>
+ * ```
+ */
+export declare function Dropdown(props: DropdownProps): import("react").JSX.Element;
+/**
+ * A component that allows dismissing the dropdown when clicked.
+ * It can be used inside the dropdown panel to provide a dismiss area.
+ * It supports an optional `dismiss` prop to control whether the dropdown should be dismissed on click.
+ */
+export declare function DropdownDismiss({ children, dismiss }: ChildProp & {
     dismiss?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/types/components/dropdown/DropdownTool.d.ts

@@ -1,9 +1,27 @@
-import { type ChildProp, type CssProp } from "../../types";
-import { type DropdownProps } from "./Dropdown";
-export declare const DropdownTool: ({ children, className, groupHover, icon, ...props }: ChildProp & CssProp & Omit<DropdownProps, "children"> & {
+import type { ChildProp, CssProp } from "../../types";
+import type { DropdownProps } from "./Dropdown";
+/**
+ * A dropdown component that displays an icon and tool menu.
+ * It can be used to create a dropdown menu that appears when the icon is clicked or hovered over.
+ * This component is useful for creating toolbars or action menus in a user interface.
+ * It accepts children as menu items and can be styled with additional CSS classes.
+ *
+ * @example
+ * ```jsx
+ * <DropdownTool
+ *   icon="caret-down"
+ *   groupHover={true}
+ *   className="my-dropdown"
+ * >
+ *   <MenuItem>Item 1</MenuItem>
+ *   <MenuItem>Item 2</MenuItem>
+ * </DropdownTool>
+ * ```
+ */
+export declare function DropdownTool({ children, className, groupHover, icon, ...props }: ChildProp & CssProp & Omit<DropdownProps, "children"> & {
     icon?: string;
     /**
      * hide until group hovered
      */
     groupHover?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

package/dist/types/components/effect/GlassEffect.d.ts

@@ -0,0 +1,5 @@
+export interface GlassEffectProps {
+    /** Border width style (default: "medium") */
+    showBorder?: boolean;
+}
+export declare function GlassEffect({ showBorder }: GlassEffectProps): import("react").JSX.Element;

package/dist/types/components/effect/MatteEffect.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 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.
+ */
+/**
+ * MatteEffect component that applies a halftone/dither matte overlay effect.
+ * Creates a subtle textured appearance using alternating transparent and semi-transparent cells.
+ * The effect is applied as an absolute overlay with z-index 0.
+ * Border radius is inherited from the parent element.
+ * Use CSS `.fabric-style-effect ~ * { z-index: 1 }` to ensure siblings render above.
+ *
+ * @example
+ * ```tsx
+ * <div className="fabric-style-effect relative rounded-md">
+ *     <MatteEffect />
+ *     <Button>Click me</Button>
+ * </div>
+ * ```
+ */
+export declare function MatteEffect(): import("react").JSX.Element;

package/dist/types/components/effect/StyleEffect.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 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 function StyleEffect({ showBorder }: {
+    showBorder?: boolean;
+}): import("react").JSX.Element | null;

package/dist/types/components/empty/EmptyContent.d.ts

@@ -1,21 +1,65 @@
-/// <reference types="react" />
-import { type ChildrenProp, type CssProp, type TestProps } from "../../types";
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import type { ChildrenProp, ColorUnion, CssProp, TestProps } from "../../types";
 export interface EmptyContentProps extends CssProp, TestProps, Partial<ChildrenProp> {
     /**
-     * empty title
+     * Title text or custom React element displayed above the message. When omitted, the title area is hidden.
      */
-    title?: string | JSX.Element;
+    title?: string | React.ReactElement;
     /**
-     * empty message
+     * Message text or custom React element describing the empty state. This is always rendered.
      */
-    message: string | JSX.Element;
+    message: string | React.ReactElement;
     /**
-     * content size
+     * Controls the font size scale of the component. "sm" reduces sizes for compact layouts, "md" uses default larger sizes.
      */
     size?: "sm" | "md";
     /**
-     * empty icon
+     * Icon displayed above the title. Accepts a string icon name (e.g., `"icon-[mdi--alert]"`) or a custom React element. Defaults to `"icon-[mdi-light--alert]"` when omitted.
      */
     icon?: string | React.ReactElement;
+    /**
+     * Color token applied to the icon. Defaults to `"tint"` when not provided.
+     */
+    iconColor?: ColorUnion;
 }
-export declare const EmptyContent: ({ children, title, message, icon, className, size, ...test }: EmptyContentProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Displays a message and optional icon to represent an empty state, such as when no data is available.
+ * Supports customizable title, message, icon, size, and action buttons via children.
+ * When no icon is provided, a default alert icon is shown.
+ *
+ * @example
+ * ```tsx
+ * <EmptyContent
+ *   title="No Data Available"
+ *   message="Please check back later."
+ *   iconColor="tint-600"
+ *   size="md"
+ * >
+ *   <Button onClick={() => console.log("Retry")}>Retry</Button>
+ * </EmptyContent>
+ * ```
+ */
+export declare function EmptyContent({ children, title, message, icon, className, size, iconColor, ...test }: EmptyContentProps): import("react").JSX.Element;

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

@@ -0,0 +1,60 @@
+import type { CallbackReturn, ChildrenProp, CssPropWithMap, TestProps } from "../../types";
+import type { TitlebarProps } from "../titlebar/Titlebar";
+export interface FlyoutProps<T> extends TestProps, ChildrenProp, TitlebarProps, CssPropWithMap<{
+    root: string;
+    body?: string;
+    titlebar?: string;
+    title?: string;
+    icon?: string;
+}> {
+    /**
+     * flyout alignment
+     */
+    align?: "start" | "end" | "top" | "bottom";
+    /**
+     * show loading indicator
+     */
+    loading?: boolean;
+    /**
+     * modal size
+     */
+    size?: "sm" | "md" | "lg" | "xl" | "screen";
+    /**
+     * width
+     */
+    width?: string | number;
+    /**
+     * minimum width
+     */
+    minWidth?: string | number;
+    /**
+     * height
+     */
+    height?: string | number;
+    /**
+     * minimum height
+     */
+    minHeight?: string | number;
+    /**
+     * portal root element
+     */
+    root?: HTMLElement;
+    /**
+     * hide backdrop mask
+     */
+    hideMask?: boolean;
+    /**
+     * close flyout on any click
+     */
+    closeOnClick?: boolean;
+    closeOnEscape?: boolean;
+    /**
+     * close handler
+     */
+    onClose?: (args: T | null) => void;
+    /**
+     * before close handler, return false to prevent close
+     */
+    onBeforeClose?: (args: T | null) => CallbackReturn;
+}
+export declare function Flyout<T extends AnyObject = AnyObject>({ icon, className, classNames, closeOnEscape, title, actions, closeOnClick, onClose, onBeforeClose, children, loading, size, width, minWidth, height, minHeight, root, hideMask, align, ...props }: FlyoutProps<T>): import("react").JSX.Element;

package/dist/types/components/hotkey/HotKey.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 { Hotkey } from "@tanstack/react-hotkeys";
+export interface HotKeyProps {
+    /**
+     * Hot key combination
+     *
+     * ctrl, shift, alt, meta
+     * enter, space, escape, tab, backspace, delete
+     * left, right, up, down
+     */
+    keys: Hotkey | Hotkey[];
+    disabled?: boolean;
+    /**
+     * Callback handler
+     */
+    handler?: () => void;
+}
+export declare function HotKey({ keys, disabled, handler }: HotKeyProps): null;

package/dist/types/components/icon/Icon.d.ts

@@ -1,44 +1,94 @@
-/// <reference types="react" />
-import { type AriaProps, type ColorType, type CssProp, type RefProp, type SizeType, type TestProps } from "../../types";
-export interface IconProps extends CssProp, AriaProps, RefProp, TestProps {
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import type { CssProp, CSSSizeType, CustomColors, RefProp, TestProps } from "../../types";
+export interface BaseIconProps extends CssProp, TestProps {
     /**
-     * svg path / webfont className / 1-4 letter text
+     * Icon can be a string or a React element. If it's a string, it can be either an SVG path or a CSS class name.
+     * If the string is a valid SVG path, it will be rendered as an inline SVG. If it's a CSS class name, it will be rendered as an <i> element with that class.
+     * If the string is 4 characters or less, it will be rendered as text inside an SVG, with font size adjusted based on the length of the string.
+     * If it's a React element, it will be rendered directly.
      */
-    icon: string;
+    icon: string | React.ReactElement;
     /**
-     * background color (CSS color / tailwind color)
+     * Background color applied to the badge. Accepts Tailwind palette tokens or any CSS color.
      */
-    bg?: ColorType | string;
+    bg?: CustomColors;
     /**
-     * icon color (CSS color / tailwind color)
+     * The color prop allows developers to specify the color of the icon.
+     * It can accept predefined color values from the design system, such as "primary-500" or "secondary-300", which correspond to specific colors in the palette.
+     * Additionally, it can also accept custom color values in standard CSS formats, such as hex codes (e.g., "#ff0000"), RGB (e.g., "rgb(255, 0, 0)"), or HSL (e.g., "hsl(0, 100%, 50%)"). This flexibility allows developers to easily integrate icons with their application's color scheme while also providing the option for custom styling when needed.
      */
-    color?: ColorType | string;
+    color?: CustomColors;
     /**
-     * flip icon in rtl
+     * The viewBox attribute defines the position and dimension, in user space, of an SVG viewport.
+     * It is required when the icon prop is an SVG path string to ensure the SVG scales correctly.
      */
-    rtlFlip?: boolean;
+    viewBox?: string;
     /**
-     * icon size
+     * The size property allows developers to specify the size of the icon, which can be defined using standard CSS size values such as pixels (e.g., "24px"), ems (e.g., "1.5em"), or percentages (e.g., "100%").
      */
-    size?: SizeType | number | string;
+    size?: CSSSizeType;
     /**
-     * viewbox for svg path (default 24)
+     * When true, the icon will be flipped horizontally in right-to-left (RTL) contexts.
+     * This is useful for icons that indicate direction, such as arrows, to ensure they point in the correct direction in RTL layouts.
      */
-    viewBox?: string;
+    rtlFlip?: boolean;
     /**
-     * rounded icon
+     * When true, the icon will have rounded corners.
      */
     rounded?: boolean;
     /**
-     * apply animation
-     */
-    animate?: "spin" | "pulse" | "bounce";
-    /**
-     * click handler
+     * The animate prop can be used to apply animation effects to the icon.
+     * It accepts predefined animation values such as "spin", "fade", "pulse", or "bounce".
      */
-    onClick?: React.MouseEventHandler;
+    animate?: "spin" | "fade" | "pulse" | "bounce";
 }
+export type IconProps = string | BaseIconProps | React.ReactElement;
 /**
- * An icon is a display component for svg icon path / image
+ * A versatile icon component that supports multiple formats: SVG paths, CSS class names,
+ * and short text labels (rendered inside an SVG).
+ *
+ * Recommended to use iconify for CSS icons
+ *
+ * @see https://iconify.design/ for a comprehensive collection of icons that can be easily integrated using CSS class names, providing a wide range of options for developers to choose from when selecting icons for their applications.
+ *
+ * @example
+ * ```tsx
+ * import { Icon } from "@react-fabric/core";
+ *
+ * // Render as a raw SVG path
+ * <Icon icon="M10 20v-6h4v6h5V3h-5V13H9v6H5v-6h4z" size="24px" />
+ *
+ * // Render via CSS class
+ * <Icon icon="icon-[mdi--home]" />
+ *
+ * // Render as a short text label inside an SVG
+ * <Icon icon="+" size="1.5em" />
+ *
+ * // With additional features like animations and custom colors
+ * <Icon icon="M4 10h2v10H4zm8-2h2v10h-2zm6-7h2v10h-2zm-4 12h2v3h-2z" animate="spin" color="primary-500" />
+ * ```
  */
-export declare const Icon: ({ ref, icon, bg, color, size, rtlFlip, animate, rounded, viewBox, className, onClick, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare function Icon({ animate, className, color, bg, icon, ref, rounded, rtlFlip, size, viewBox, ...props }: BaseIconProps & RefProp): import("react").JSX.Element;

package/dist/types/components/media/Media.d.ts

@@ -1,5 +1,29 @@
-import { type AriaProps, type CssProp, type TestProps } from "../../types";
-export interface BaseProps extends CssProp, TestProps, AriaProps {
+/**
+ * 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, TestProps } from "../../types";
+export interface BaseProps extends CssProp, TestProps {
     /**
      * media source
      */
@@ -33,5 +57,49 @@ export interface VideoProps extends BaseProps {
      */
     playOnHover?: boolean;
 }
-export declare const Image: ({ src, alt, reel, fit, className, ...aria }: ImageProps) => import("react/jsx-runtime").JSX.Element;
-export declare const Video: ({ src, poster, reel, autoPlay, playOnHover, fit, className, ...aria }: VideoProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Component for displaying images with optional reel decoration.
+ * A versatile media component that supports images and videos with various display options.
+ * It can display images with a reel decoration, handle loading states, and show error icons if the media fails to load.
+ * This component is useful for displaying images in a visually appealing way, with support for lazy loading and error handling.
+ * It automatically adjusts the display based on the provided fit property, allowing for different styles such as cover, contain, or fill.
+ *
+ * @example
+ * ```jsx
+ * <Image
+ *   src="image.jpg"
+ *   alt="Example Image"
+ *   reel={true}
+ *   fit="cover"
+ *   className="custom-class"
+ * />
+ * // Renders an image with reel decoration, cover fit, and a custom class name.
+ * ```
+ */
+export declare function Image({ src, alt, reel, fit, className, ...aria }: ImageProps): import("react").JSX.Element;
+/**
+ * Component for displaying videos with optional controls and reel decoration.
+ * A versatile video component that supports autoplay, hover play, and various display options.
+ * It can display videos with a reel decoration, handle loading states, and show error icons if the video fails to load.
+ * This component is useful for displaying videos in a visually appealing way, with support for controls, autoplay, and error handling.
+ * It automatically adjusts the display based on the provided fit property, allowing for different styles such as cover, contain, or fill.
+ * It also includes controls for play/pause and volume, enhancing user interaction with the video content.
+ * This component is ideal for media-rich applications where video content needs to be displayed with user-friendly controls and visual effects.
+ * It supports features like autoplay, play on hover, and custom fit options for the video display.
+ * It also includes a reel decoration for a more engaging visual presentation.
+ *
+ * @example
+ * ```jsx
+ * <Video
+ *   src="video.mp4"
+ *   poster="poster.jpg"
+ *   reel={true}
+ *   autoPlay={true}
+ *   playOnHover={true}
+ *   fit="cover"
+ *   className="custom-class"
+ * />
+ * // Renders a video with reel decoration, autoplay, play on hover, cover fit, and a custom class name.
+ * ```
+ */
+export declare function Video({ src, poster, reel, autoPlay, playOnHover, fit, className, ...aria }: VideoProps): import("react").JSX.Element;

package/dist/types/components/menu/ContextMenu.d.ts

@@ -1,8 +1,25 @@
-/// <reference types="react" />
-import { type ChildrenProp } from "../../types";
-import { type Menu } from "./Menu";
+import type { ChildrenProp } from "../../types";
+import type { MenuProps } from "./types";
 export interface ContextMenuProps extends ChildrenProp {
-    menu: React.ReactElement<typeof Menu>;
+    menu: React.ReactElement<MenuProps & {
+        style: React.CSSProperties;
+        onMouseUp: (e: React.MouseEvent) => void;
+        ref: React.RefObject<HTMLElement>;
+    }>;
     disabled?: boolean;
 }
-export declare const ContextMenu: ({ children, menu, disabled }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * A component that provides a context menu that appears on right-click.
+ * It uses the Floating UI library to manage the positioning and interactions of the menu.
+ * This component is useful for creating custom context menus that can be triggered by right-clicking on elements.
+ *
+ * @example
+ * ```jsx
+ * <ContextMenu
+ *   menu={<Menu items={[{ label: "Option 1" }, { label: "Option 2" }]} />}
+ * >
+ *   <div className="context-menu-target">Right-click me!</div>
+ * </ContextMenu>
+ * ```
+ */
+export declare function ContextMenu({ children, menu, disabled }: ContextMenuProps): import("react").JSX.Element;