@react-fabric/core 1.0.0-beta.0

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

@@ -0,0 +1,94 @@
+import { type MouseEventHandler, type WheelEventHandler } from "react";
+import { type AriaProps, type BadgeType, type CallbackReturn, type ColorType, type CssProp, type IconProps, type PolymorphicProps, type RefProp, type SizeType, type TestProps } from "../../types";
+export interface BaseProps extends CssProp, AriaProps, IconProps, RefProp, TestProps {
+    /**
+     * primary icon alignment
+     */
+    iconAlign?: "start" | "end";
+    /**
+     * alternate icon align end (caret, arrow)
+     */
+    altIcon?: string;
+    /**
+     * button size
+     */
+    size?: SizeType;
+    /**
+     * button color
+     */
+    color?: ColorType;
+    /**
+     * button type
+     */
+    type?: "button" | "reset" | "submit";
+    /**
+     * button styling
+     */
+    variant?: "outline" | "solid" | "link";
+    /**
+     * active state with click disabled
+     */
+    active?: boolean;
+    /**
+     * loading state with animation and click disabled
+     */
+    loading?: boolean;
+    /**
+     * full rounded edges
+     */
+    rounded?: boolean;
+    /**
+     * spin icon on hover
+     */
+    spinOnHover?: boolean;
+    /**
+     * disabled state
+     */
+    disabled?: boolean;
+    /**
+     * stretch to full width
+     */
+    fullWidth?: boolean;
+    /**
+     * action completed message works best with `onClick` Promise return.
+     * To hide completed message onClick/Promise return should be false
+     */
+    actionMessage?: string;
+    /**
+     * manually force show action message
+     */
+    showActionDone?: boolean;
+    /**
+     * show action message `onClick` or manually by setting `showActionDone` true
+     */
+    showActionDoneEvent?: "click" | "manual";
+    /**
+     * click handler, return Promise to autoset loading state
+     */
+    onClick?: (e?: React.MouseEvent) => CallbackReturn;
+    /**
+     * badges
+     */
+    badge?: string | number | BadgeType;
+    /**
+     * keyboard shortcut
+     */
+    hotKey?: string;
+    onMouseOut?: MouseEventHandler;
+    onMouseOver?: MouseEventHandler;
+    onMouseMove?: MouseEventHandler;
+    onMouseEnter?: MouseEventHandler;
+    onMouseLeave?: MouseEventHandler;
+    onWheel?: WheelEventHandler;
+}
+export type ButtonProps = {
+    children: string | React.ReactElement;
+    "aria-label"?: string;
+} | {
+    children?: never;
+    "aria-label": string;
+};
+/**
+ * Clickable action button
+ */
+export declare const Button: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ as, ref, children, className, active, color, icon, iconBg, iconColor, iconAlign, altIcon, rtlFlip, rounded, size, disabled, loading, variant, badge, fullWidth, spinOnHover, onClick, actionMessage, type, hotKey, showActionDone, showActionDoneEvent, tabIndex, "data-ref": dataRef, ...aria }: BaseProps & ButtonProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { type AriaProps, type ChildrenProp, type ColorType, type CssProp, type RefProp, type SizeType, type TestProps } from "../../types";
+import { type Button } from "./Button";
+export interface ButtonGroupProps extends CssProp, AriaProps, TestProps, RefProp<HTMLDivElement>, ChildrenProp<React.ReactElement<typeof Button>> {
+    /**
+     * vertical orientation
+     */
+    vertical?: boolean;
+    /**
+     * button styling
+     */
+    variant?: "outline" | "solid" | "link";
+    /**
+     * button size
+     */
+    size?: SizeType;
+    /**
+     * button color
+     */
+    color?: ColorType;
+    /**
+     * full rounded edges
+     */
+    rounded?: boolean;
+    /**
+     * disabled state
+     */
+    disabled?: boolean;
+    /**
+     * stretch to full width
+     */
+    fullWidth?: boolean;
+}
+export declare const ButtonGroup: ({ vertical, className, children, variant, rounded, disabled, fullWidth, color, size, ...aria }: ButtonGroupProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+import { type CallbackReturn, type PolymorphicProps, type RefProp } from "../../types";
+import { type BaseProps, type ButtonProps } from "./Button";
+interface ExtendedProps extends Omit<BaseProps, "onClick">, RefProp {
+    /**
+     * confirm message
+     */
+    message: string;
+    /**
+     * ok label
+     */
+    okLabel?: string;
+    /**
+     * ok label
+     */
+    cancelLabel?: string;
+    /**
+     * click handler, return Promise to autoset loading state
+     */
+    onClick?: (e: boolean) => CallbackReturn;
+}
+export type ConfirmButtonProps = ExtendedProps & ButtonProps;
+/**
+ * Button with confirmation dropdown
+ */
+export declare const ConfirmButton: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ ref, message, color, okLabel, cancelLabel, onClick, loading, actionMessage, showActionDone, showActionDoneEvent, ...props }: ConfirmButtonProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,56 @@
+/// <reference types="react" />
+import { type AriaProps, type ChildrenProp, type ColorType, type CssProp, type SizeType } from "../../types";
+import { type ButtonProps } from "./Button";
+interface BaseProps extends CssProp, AriaProps, ChildrenProp<React.ReactElement<ButtonProps & {
+    value: string;
+}>> {
+    /**
+     * vertical orientation
+     */
+    vertical?: boolean;
+    /**
+     * button styling
+     */
+    variant?: "outline" | "solid" | "link";
+    /**
+     * button size
+     */
+    size?: SizeType;
+    /**
+     * button color
+     */
+    color?: ColorType;
+    /**
+     * full rounded edges
+     */
+    rounded?: boolean;
+    /**
+     * disabled state
+     */
+    disabled?: boolean;
+    /**
+     * stretch to full width
+     */
+    fullWidth?: boolean;
+}
+export type ToggleButtonGroupProps = BaseProps & ({
+    /**
+     *
+     */
+    value: string;
+    /**
+     * change handler
+     */
+    onChange?: (value: string) => void;
+} | {
+    /**
+     *
+     */
+    value: string[];
+    /**
+     * change handler
+     */
+    onChange?: (value: string[]) => void;
+});
+export declare const ToggleButtonGroup: ({ vertical, className, children, variant, rounded, disabled, fullWidth, color, size, value, onChange, ...aria }: ToggleButtonGroupProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,28 @@
+import { type AriaProps, type ChildrenProp, type ColorType, type PaletteType, type TestProps } from "../../types";
+export interface CalloutProps extends AriaProps, ChildrenProp, TestProps {
+    /**
+     * callout color
+     */
+    color?: ColorType | PaletteType;
+    /**
+     * legend title
+     */
+    legend?: string;
+    /**
+     * callout icon
+     */
+    icon?: string;
+    /**
+     * callout title
+     */
+    title?: string;
+    /**
+     * callout border style
+     */
+    border?: "solid" | "dotted" | "dashed";
+    /**
+     * close action handler
+     */
+    onClose?: () => void;
+}
+export declare const Callout: ({ children, color, legend, title, icon, border, onClose, ...aria }: CalloutProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,39 @@
+import { type MouseEventHandler } from "react";
+import { type ContentProps } from "../../core/content/Content";
+import { type HeadFootProps } from "../../core/headfoot/HeadFoot";
+import { type AriaProps, type ChildrenProp, type CssProp, type TestProps } from "../../types";
+export interface CardProps extends CssProp, AriaProps, TestProps, ChildrenProp<React.ReactElement<HeadFootProps | ContentProps>> {
+    /**
+     * apply flex fill styling
+     */
+    flex?: boolean;
+    /**
+     * click handler
+     */
+    onClick?: MouseEventHandler;
+    /**
+     * body css classname(s)
+     */
+    bodyClassName?: string;
+    /**
+     * show selected ring
+     */
+    selected?: boolean;
+    /**
+     * show tick mark ribbon
+     */
+    selectedRibbon?: boolean;
+    /**
+     * make card draggable
+     */
+    draggable?: boolean;
+    /**
+     * drag event data key
+     */
+    dragKey?: string;
+    /**
+     * drag event data
+     */
+    dragData?: KeyValue;
+}
+export declare const Card: ({ children, className, bodyClassName, selected, selectedRibbon, onClick, flex, draggable, dragKey, dragData, ...aria }: CardProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+import { type AriaProps, type ChildrenProp, type CssProp } from "../../types";
+export interface CardCoverProps extends CssProp, AriaProps, ChildrenProp {
+    /**
+     * cover height
+     */
+    height?: string | number;
+    /**
+     * cover color scheme
+     */
+    colorScheme?: "light" | "dark";
+    /**
+     * justify content
+     */
+    justify?: "start" | "center" | "end";
+}
+export declare const CardCover: ({ className, children, height, justify, colorScheme, ...aria }: CardCoverProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,41 @@
+import { type ReactElement } from "react";
+import { type AriaProps, type ChildProp, type ColorType, type CssProp, type IconProps, type PolymorphicProps, type RefProp, type SizeType, type TestProps } from "../../types";
+export interface ChipProps extends CssProp, AriaProps, IconProps, TestProps, ChildProp<string | ReactElement>, RefProp<HTMLDivElement> {
+    /**
+     * chip size
+     */
+    size?: SizeType;
+    /**
+     * chip color (CSS color / tailwind color)
+     */
+    color?: ColorType | string;
+    /**
+     * chip styling
+     */
+    variant?: "solid" | "outline";
+    /**
+     * full rounded edges
+     */
+    rounded?: boolean;
+    /**
+     * disabled state
+     */
+    disabled?: boolean;
+    /**
+     * prevent click propagation
+     */
+    stopPropagation?: boolean;
+    /**
+     * click handler
+     */
+    onClick?: React.MouseEventHandler;
+    /**
+     * icon click handler
+     */
+    onIconClick?: React.MouseEventHandler;
+    /**
+     * remove handler
+     */
+    onRemove?: React.MouseEventHandler;
+}
+export declare const Chip: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "div">({ ref, children, className, size, color, variant, icon, iconBg, iconColor, rtlFlip, disabled, onClick, onIconClick, onRemove, rounded, stopPropagation, as, ...aria }: ChipProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,43 @@
+import { type RefObject } from "react";
+import { type AriaProps, type ChildrenProp, type CssProp, type RefProp, type TestProps } from "../../types";
+interface CollapsableRef {
+    button: RefObject<HTMLElement>;
+    body: RefObject<HTMLElement>;
+    open: boolean;
+}
+export interface CollapsableProps extends CssProp, AriaProps, TestProps, RefProp<CollapsableRef>, ChildrenProp {
+    /**
+     * expand icon alignment
+     */
+    iconAlign?: "start" | "end";
+    /**
+     * panel body className
+     */
+    bodyClassName?: string;
+    /**
+     * header button className
+     */
+    headerClassName?: string;
+    /**
+     * open state icon
+     */
+    iconOpen?: string;
+    /**
+     * closed state icon
+     */
+    iconClosed?: string;
+    /**
+     * open state
+     */
+    open?: boolean;
+    /**
+     * open handler
+     */
+    onOpen?: () => void;
+    /**
+     * open handler
+     */
+    onClose?: () => void;
+}
+export declare const Collapsable: ({ ref, className, bodyClassName, headerClassName, children, iconAlign, iconClosed, iconOpen, open, onClose, onOpen, ...aria }: CollapsableProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,20 @@
+import { type CssProp, type ChildProp, type ColorType, type PaletteType } from "../../types";
+export interface DividerProps extends CssProp, Partial<ChildProp> {
+    /**
+     * apply text bg
+     */
+    fill?: boolean;
+    /**
+     * vertical rule
+     */
+    vertical?: boolean;
+    /**
+     * rule color
+     */
+    color?: ColorType | PaletteType | "tint";
+    /**
+     * text alignment
+     */
+    align?: "start" | "end" | "center";
+}
+export declare const Divider: ({ children, color, vertical, fill, align, className, }: DividerProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import { type Placement } from "@floating-ui/react";
+import { type ChildProp, type RefProp } from "../../types";
+export interface DropdownProps extends RefProp {
+    children: [React.ReactNode, React.ReactNode];
+    /**
+     * dropdown placement
+     */
+    placement?: Placement;
+    /**
+     * show dropdown arrow
+     */
+    showArrow?: boolean;
+    /**
+     * fit with to anchor' parent element
+     */
+    fitToParent?: boolean;
+    /**
+     * close dropdown on click
+     */
+    closeOnClick?: boolean;
+    /**
+     * disable dropdown
+     */
+    disabled?: boolean;
+    /**
+     * plain dropdown body
+     */
+    plainDropdown?: boolean;
+    /**
+     * dropdown body className
+     */
+    dropdownClassName?: string;
+    /**
+     * dropdown event
+     */
+    dropdownEvent?: "click" | "hover";
+    /**
+     * open handler
+     */
+    onOpen?: () => void;
+    /**
+     * close handler
+     */
+    onClose?: () => void;
+}
+export declare const Dropdown: (props: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DropdownDismiss: ({ children, dismiss, }: ChildProp & {
+    dismiss?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,8 @@
+import { type ChildProp, type CssProp } from "../../types";
+import { type DropdownProps } from "./Dropdown";
+export declare const DropdownTool: ({ children, className, groupHover, ...props }: ChildProp & CssProp & Omit<DropdownProps, "children"> & {
+    /**
+     * hide until group hovered
+     */
+    groupHover?: boolean;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { type ChildrenProp, type CssProp, type TestProps } from "../../types";
+export interface EmptyContentProps extends CssProp, TestProps, Partial<ChildrenProp> {
+    /**
+     * empty title
+     */
+    title?: string | JSX.Element;
+    /**
+     * empty message
+     */
+    message: string | JSX.Element;
+    /**
+     * content size
+     */
+    size?: "sm" | "md";
+    /**
+     * empty icon
+     */
+    icon?: string | React.ReactElement;
+}
+export declare const EmptyContent: ({ children, title, message, icon, className, size, ...test }: EmptyContentProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,44 @@
+/// <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 {
+    /**
+     * svg path / webfont className / 1-4 letter text
+     */
+    icon: string;
+    /**
+     * background color (CSS color / tailwind color)
+     */
+    bg?: ColorType | string;
+    /**
+     * icon color (CSS color / tailwind color)
+     */
+    color?: ColorType | string;
+    /**
+     * flip icon in rtl
+     */
+    rtlFlip?: boolean;
+    /**
+     * icon size
+     */
+    size?: SizeType | number | string;
+    /**
+     * viewbox for svg path (default 24)
+     */
+    viewBox?: string;
+    /**
+     * rounded icon
+     */
+    rounded?: boolean;
+    /**
+     * apply animation
+     */
+    animate?: "spin" | "pulse" | "bounce";
+    /**
+     * click handler
+     */
+    onClick?: React.MouseEventHandler;
+}
+/**
+ * An icon is a display component for svg icon path / image
+ */
+export declare const Icon: ({ ref, icon, bg, color, size, rtlFlip, animate, rounded, viewBox, className, onClick, ...rest }: IconProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,33 @@
+export { ActionLabel } from "./actionLabel/ActionLabel";
+export { AnimationBars, AnimationIndicator, AnimationSpinner, Skeleton, } from "./animations/Animations";
+export { Avatar } from "./avatar/Avatar";
+export { AvatarGroup } from "./avatar/AvatarGroup";
+export { Badge, getBadgeProps } from "./badge/Badge";
+export { Breadcrumbs } from "./breadcrumbs/Breadcrumbs";
+export { Button } from "./button/Button";
+export { ButtonGroup } from "./button/ButtonGroup";
+export { ConfirmButton } from "./button/ConfirmButton";
+export { ToggleButtonGroup } from "./button/ToggleButtonGroup";
+export { Callout } from "./callout/Callout";
+export { Card } from "./card/Card";
+export { CardCover } from "./card/CardCover";
+export { Chip } from "./chip/Chip";
+export { Collapsable } from "./collapsable/Collapsable";
+export { Divider } from "./divider/Divider";
+export { Dropdown, DropdownDismiss } from "./dropdown/Dropdown";
+export { DropdownTool } from "./dropdown/DropdownTool";
+export { EmptyContent } from "./empty/EmptyContent";
+export { Icon } from "./icon/Icon";
+export { Image, Video } from "./media/Media";
+export { ContextMenu } from "./menu/ContextMenu";
+export { Menu } from "./menu/Menu";
+export { MenuItem } from "./menu/MenuItem";
+export { Meter } from "./meter/Meter";
+export { Navigator } from "./navigator/Navigator";
+export { Panel } from "./panel/Panel";
+export { PanelGroup } from "./panel/PanelGroup";
+export { PanelStack } from "./panel/PanelStack";
+export { ProgressBar } from "./progress/ProgressBar";
+export { ProgressCircle } from "./progress/ProgressCircle";
+export { Tab } from "./tabpanel/Tab";
+export { TabPanel } from "./tabpanel/TabPanel";

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

@@ -0,0 +1,37 @@
+import { type AriaProps, type CssProp } from "../../types";
+export interface BaseProps extends CssProp, AriaProps {
+    /**
+     * media source
+     */
+    src: string;
+    /**
+     * show media reel decoration
+     */
+    reel?: boolean;
+    /**
+     * media content fit
+     */
+    fit?: "cover" | "contain" | "fill";
+}
+export interface ImageProps extends BaseProps {
+    /**
+     * image alt text
+     */
+    alt?: string;
+}
+export interface VideoProps extends BaseProps {
+    /**
+     * video poster
+     */
+    poster?: string;
+    /**
+     * auto play video
+     */
+    autoPlay?: boolean;
+    /**
+     * play on mouse over
+     */
+    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;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { type ChildrenProp } from "../../types";
+import { type Menu } from "./Menu";
+export interface ContextMenuProps extends ChildrenProp {
+    menu: React.ReactElement<typeof Menu>;
+}
+export declare const ContextMenu: ({ children, menu }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+import { type MenuProps } from "./types";
+export declare const Menu: (props: MenuProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type PolymorphicProps } from "../../types";
+import { type MenuItemProps } from "./types";
+export declare const MenuItem: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ as, label, color, className, icon, iconBg, iconColor, appendLabel, rtlFlip, altIcon, id, active, disabled, onClick, badge, hotKey, minimal, "data-open": childOpen, ref, ...aria }: MenuItemProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;