@react-fabric/core 1.0.0-beta.0

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

@@ -0,0 +1,59 @@
+import { type ElementType } from "react";
+import { type AriaProps, type BadgeType, type CallbackReturn, type ChildrenProp, type ColorType, type CssProp, type IconProps, type TestProps } from "../../types";
+export interface MenuItemProps extends CssProp, AriaProps, TestProps, IconProps {
+    /**
+     * menu id passed via menu.onClick
+     */
+    id?: string;
+    /**
+     * item label
+     */
+    label: string;
+    /**
+     * append label badge text
+     */
+    appendLabel?: string | false;
+    /**
+     * menu color
+     */
+    color?: ColorType;
+    /**
+     * item active
+     */
+    active?: boolean;
+    /**
+     * item disabled
+     */
+    disabled?: boolean;
+    /**
+     * badge
+     */
+    badge?: string | number | BadgeType;
+    /**
+     * keyboard shortcut label
+     */
+    hotKey?: string;
+    /**
+     * alternate icon align end (caret, arrow)
+     */
+    altIcon?: string;
+    /**
+     * click handler
+     */
+    onClick?: () => CallbackReturn;
+}
+export interface MenuRootProps extends CssProp {
+    label?: never;
+    minimal?: boolean;
+    menuClassName?: never;
+    onClick?: (id: string) => CallbackReturn;
+}
+export interface MenuInnerProps extends MenuItemProps {
+    label: string;
+    minimal?: never;
+    /**
+     * floating menu className
+     */
+    menuClassName?: string;
+}
+export type MenuProps = ChildrenProp<ElementType<MenuItemProps>> & (MenuRootProps | MenuInnerProps);

package/dist/types/components/meter/Meter.d.ts

@@ -0,0 +1,12 @@
+import { type AriaProps, type CssProp, type TestProps } from "../../types";
+export interface MeterProps extends CssProp, AriaProps, TestProps {
+    /**
+     * meter value (0-100)
+     */
+    value: number;
+    /**
+     * hide value label
+     */
+    hideLabel?: boolean;
+}
+export declare const Meter: ({ value, hideLabel, className, ...aria }: MeterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/navigator/Navigator.d.ts

@@ -0,0 +1,12 @@
+import { type AriaProps, type ColorType, type CssProp, type TestProps } from "../../types";
+export interface NavigatorProps extends CssProp, AriaProps, TestProps {
+    /**
+     * navigator button color
+     */
+    color?: ColorType | string;
+    /**
+     * navigation handler
+     */
+    onNavigate: (dir: -1 | 1) => void;
+}
+export declare const Navigator: ({ className, onNavigate, color, ...aria }: NavigatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/panel/Panel.d.ts

@@ -0,0 +1,59 @@
+/// <reference types="react" />
+import { type ContentProps } from "../../core/content/Content";
+import { type HeadFootProps } from "../../core/headfoot/HeadFoot";
+import { type AriaProps, type ChildrenProp, type CollapseProps, type CssProp, type ExpandProps, type IconProps, type TestProps } from "../../types";
+export interface PanelProps extends CssProp, AriaProps, TestProps, IconProps, ExpandProps, CollapseProps, ChildrenProp<HeadFootProps | ContentProps> {
+    /**
+     * panel id used by panel stack
+     */
+    panelId?: string;
+    /**
+     * panel title
+     */
+    title?: string;
+    /**
+     * header actions
+     */
+    actions?: JSX.Element;
+    /**
+     * header css classname(s)
+     */
+    headerClassName?: string;
+    /**
+     * title css classname(s)
+     */
+    titleClassName?: string;
+    /**
+     * loading state
+     */
+    loading?: boolean;
+    /**
+     * height
+     */
+    height?: string | number;
+    /**
+     * width
+     */
+    width?: string | number;
+    /**
+     * minimum height
+     */
+    minHeight?: string | number;
+    /**
+     * minimum width
+     */
+    minWidth?: string | number;
+    /**
+     * maximum height
+     */
+    maxHeight?: string | number;
+    /**
+     * maximum width
+     */
+    maxWidth?: string | number;
+    /**
+     * close handler
+     */
+    onClose?: () => void;
+}
+export declare const Panel: ({ children, className, titleClassName, headerClassName, title, actions, icon, iconBg, iconColor, rtlFlip, panelId, height, width, minHeight, minWidth, maxHeight, maxWidth, loading, expandable, expanded: _expanded, onExpand, collapsable, collapsed: _collapsed, onCollapse, onClose, onBack, ...aria }: PanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/panel/PanelGroup.d.ts

@@ -0,0 +1,12 @@
+import { type ChildrenProp } from "../../types";
+export interface PanelGroupProps extends ChildrenProp {
+    /**
+     * active panel id / index
+     */
+    activePanel?: string | number;
+    /**
+     * active change callback
+     */
+    onActiveChange?: (panelId: string) => void;
+}
+export declare const PanelGroup: ({ children, activePanel, onActiveChange, }: PanelGroupProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/panel/PanelStack.d.ts

@@ -0,0 +1,16 @@
+import { type ChildrenProp, type CssProp } from "../../types";
+export interface PanelStackProps extends CssProp, ChildrenProp {
+    /**
+     * active panel id
+     */
+    active?: string;
+    /**
+     * panel change event callback
+     */
+    onPanelChange?: (panelId: string) => void;
+    /**
+     * navigate to previous panel in history
+     */
+    onBack?: (panelId: string, nextPanelId: string) => boolean | undefined;
+}
+export declare const PanelStack: ({ active, children, className, onPanelChange, onBack, ...rest }: PanelStackProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/progress/ProgressBar.d.ts

@@ -0,0 +1,24 @@
+import { type ColorType } from "../../types";
+export interface ProgressProps {
+    /**
+     * progress value (0-100)
+     */
+    value: number;
+    /**
+     * size
+     */
+    size?: "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
+    /**
+     * color
+     */
+    color?: ColorType;
+    /**
+     * animate
+     */
+    animate?: boolean;
+    /**
+     * progress label
+     */
+    label?: string;
+}
+export declare const ProgressBar: ({ value, size, color, label, animate, }: ProgressProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/progress/ProgressCircle.d.ts

@@ -0,0 +1,16 @@
+import { type ColorType } from "../../types";
+export interface ProgressProps {
+    /**
+     * progress value (0-100)
+     */
+    value: number;
+    /**
+     * size
+     */
+    size?: "sm" | "md" | "lg" | "xl";
+    /**
+     * color
+     */
+    color?: ColorType;
+}
+export declare const ProgressCircle: ({ value, size, color, }: ProgressProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/tabpanel/Tab.d.ts

@@ -0,0 +1,41 @@
+import { type ReactElement } from "react";
+import { type AriaProps, type BadgeType, type CallbackReturn, type ChildrenProp, type ColorType, type CssProp, type IconProps, type PolymorphicProps, type RefProp, type TestProps } from "../../types";
+export interface TabProps extends Partial<ChildrenProp>, CssProp, RefProp, AriaProps, TestProps, IconProps {
+    /**
+     * tab id
+     */
+    id: string;
+    /**
+     * tab label
+     */
+    label?: string;
+    /**
+     * tab color
+     */
+    color?: ColorType;
+    /**
+     * tab badge
+     */
+    badge?: BadgeType;
+    /**
+     * disabled
+     */
+    disabled?: boolean;
+    /**
+     * tab flex to fill button
+     */
+    tabFlex?: boolean;
+    /**
+     * className for active state
+     */
+    activeClassName?: string;
+    /**
+     * action dropdown body
+     */
+    actions?: ReactElement;
+    /**
+     * close handler
+     */
+    onClose?: () => CallbackReturn;
+}
+export declare const Tab: <Tag extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "button">({ ref, as, id, className, label, icon, iconBg, iconColor, rtlFlip, badge, disabled, onClose, active, minimal, onClick, tabFlex, color, actions, activeClassName, ...aria }: TabProps & PolymorphicProps<Tag>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/tabpanel/TabPanel.d.ts

@@ -0,0 +1,41 @@
+import { type CallbackReturn, type ChildrenProp } from "../../types";
+import { Tab } from "./Tab";
+export interface TabPanelProps extends ChildrenProp<typeof Tab> {
+    /**
+     * tab list orientation
+     */
+    orientation?: "top" | "bottom" | "start" | "end";
+    /**
+     * justify buttons
+     */
+    justify?: "start" | "center" | "end";
+    /**
+     * tab variations
+     */
+    variant?: "soft" | "solid" | "outline";
+    /**
+     * tab button flex to fill tabs
+     */
+    tabFlex?: boolean;
+    /**
+     * tab button gap
+     */
+    gap?: number;
+    /**
+     * current active tab
+     */
+    activeTab?: string;
+    /**
+     * tab list className
+     */
+    headerClassName?: string;
+    /**
+     * change handler
+     */
+    onChange?: (id: string) => void;
+    /**
+     * before close handler, return false to prevent change
+     */
+    onBeforeChange?: (nextTab: string, currentTab?: string) => CallbackReturn;
+}
+export declare const TabPanel: ({ children, headerClassName, orientation, activeTab, justify, variant, tabFlex, gap, onBeforeChange, onChange, }: TabPanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/context/Global.d.ts

@@ -0,0 +1,81 @@
+import { type ComponentType, type FC, type PropsWithChildren } from "react";
+import { type NotificationManagerRef } from "./NotificationCenter";
+interface State {
+    locale: string;
+    colorScheme: "light" | "dark";
+    calendar: "gregorian" | "hijri";
+}
+export interface GlobalProps extends PropsWithChildren {
+    /**
+     * application default error display
+     */
+    errorElement?: ComponentType<{
+        error?: string;
+    }>;
+    defaultLocale?: string;
+    defaultCalendar?: State["calendar"];
+    defaultColorScheme?: State["colorScheme"];
+}
+interface GlobalContextType {
+    /**
+     * change language locale
+     * @param locale
+     */
+    changeLocale: (locale: string) => string;
+    /**
+     * change date calendat
+     * @param locale
+     */
+    changeCalendar: (calendar: State["calendar"]) => State["calendar"];
+    /**
+     * toggle theme between light and dark
+     * or force to theme provided
+     * @param theme
+     */
+    toggleColorScheme: (colorScheme?: State["colorScheme"]) => State["colorScheme"];
+    /**
+     * application default error display
+     */
+    errorElement: GlobalProps["errorElement"];
+    currentLocale: string;
+    currentCalendar: State["calendar"];
+    currentColorScheme: State["colorScheme"];
+    notificationManager: NotificationManagerRef;
+}
+export declare const GlobalContext: import("react").Context<GlobalContextType>;
+/**
+ * global context provider
+ */
+export declare const ApplicationProvider: FC<GlobalProps>;
+/**
+ * internal usage only
+ * @internal
+ */
+export declare const useGlobals: () => GlobalContextType;
+/**
+ * global application context
+ */
+export declare const useApplicationContext: () => {
+    /**
+     * change language locale
+     * @param locale
+     */
+    changeLocale: (locale: string) => string;
+    /**
+     * change date calendat
+     * @param locale
+     */
+    changeCalendar: (calendar: State["calendar"]) => State["calendar"];
+    /**
+     * toggle theme between light and dark
+     * or force to theme provided
+     * @param theme
+     */
+    toggleColorScheme: (colorScheme?: State["colorScheme"]) => State["colorScheme"];
+    currentLocale: string;
+    currentCalendar: State["calendar"];
+    currentColorScheme: State["colorScheme"];
+    notificationManager: NotificationManagerRef;
+};
+export declare const useNotificationService: () => NotificationManagerRef;
+export {};

package/dist/types/context/NotificationCenter.d.ts

@@ -0,0 +1,11 @@
+import { type AlertProps } from "../overlays/alert/Alert";
+import { type MessageProps } from "../overlays/message/Message";
+import { type ToastProps } from "../overlays/toast/Toast";
+export interface NotificationManagerRef {
+    showMessage: (props: string | MessageProps, timeout?: number) => Promise<boolean | string>;
+    showToast: (props: string | ToastProps, timeout?: number) => Promise<boolean | string>;
+    showAlert: (props: string | AlertProps) => Promise<boolean | string>;
+    showError: (props: string | Omit<ToastProps, "color">) => Promise<boolean | string>;
+    closeAll: () => void;
+}
+export declare const NotificationManager: ({ onLoad }: KeyValue) => import("react/jsx-runtime").JSX.Element;

package/dist/types/core/aside/Aside.d.ts

@@ -0,0 +1,52 @@
+/// <reference types="react" />
+import { type ChildrenProp, type CollapseProps, type Elements, type IconProps, type TestProps } from "../../types";
+export interface AsideProps extends IconProps, ChildrenProp, CollapseProps, TestProps {
+    /**
+     * page title
+     */
+    title?: string;
+    /**
+     * align inline-end
+     */
+    align?: "start" | "end";
+    /**
+     * header actions
+     */
+    actions?: Elements<JSX.Element>;
+    /**
+     * header class
+     */
+    headerClassName?: string;
+    /**
+     * show loading indicator
+     */
+    loading?: boolean;
+    /**
+     * allow resize
+     */
+    resizeable?: boolean;
+    /**
+     * allow flyout with collapsed
+     */
+    flyout?: boolean;
+    /**
+     * event handler when shown
+     */
+    onFlyout?: () => void;
+    /**
+     * fixed width
+     */
+    width?: number | string;
+    /**
+     * max width
+     */
+    maxWidth?: number | string;
+    /**
+     * min width
+     */
+    minWidth?: number | string;
+}
+/**
+ * Side panel
+ */
+export declare const Aside: ({ children, title, icon, iconBg, iconColor, rtlFlip, headerClassName, resizeable, flyout, onFlyout, collapsed, collapsable, onCollapse, actions, loading, align, width: wd, minWidth, maxWidth, "data-testid": testId, "data-test-value": testValue, }: AsideProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/core/boundary/ErrorBoundary.d.ts

@@ -0,0 +1,26 @@
+import { Component } from "react";
+import { type ChildrenProp } from "../../types";
+/**
+ * An error boundary wrapper higher-order component designed to provide consistent error display across the application will trap runtime errors
+ */
+export declare class ErrorBoundary extends Component<{
+    /**
+     * custom error display
+     */
+    errorElement?: React.ComponentType<{
+        error?: string;
+    }>;
+} & ChildrenProp, {
+    hasError: boolean;
+    error?: string;
+    stack?: AnyObject;
+}> {
+    static getDerivedStateFromError(error: Error): {
+        hasError: boolean;
+        error: string;
+        stack: string | undefined;
+    };
+    constructor(props: AnyObject);
+    componentDidCatch(error: Error): void;
+    render(): string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}

package/dist/types/core/boundary/ErrorIcon.d.ts

@@ -0,0 +1 @@
+export declare const ErrorIcon: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/core/content/Content.d.ts

@@ -0,0 +1,15 @@
+import { type ChildrenProp, type CssProp, type PositionObject, type RefProp, type SizeObject, type TestProps } from "../../types";
+export interface ContentProps extends ChildrenProp, CssProp, RefProp, TestProps {
+    /**
+     * scroll vevent handler
+     */
+    onScroll?: (event: PositionObject) => void;
+    /**
+     * scroll vevent handler
+     */
+    onResize?: (event: SizeObject) => void;
+}
+/**
+ * Scrollable content element
+ */
+export declare const Content: ({ ref, children, className, onScroll, onResize, "data-testid": testId, "data-test-value": testValue, }: ContentProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/core/headfoot/HeadFoot.d.ts

@@ -0,0 +1,24 @@
+import { type AriaProps, type ChildrenProp, type ColorWithGrays, type CssProp, type TestProps } from "../../types";
+interface BaseProps extends CssProp, AriaProps, ChildrenProp, TestProps {
+    dir?: "ltr" | "rtl";
+    /**
+     * background color
+     */
+    bg?: ColorWithGrays | string;
+    /**
+     * background color
+     */
+    color?: ColorWithGrays | string;
+}
+type DefaultProps = BaseProps & {
+    flex?: false;
+};
+type FlexProps = BaseProps & {
+    flex: true;
+    align?: "start" | "end" | "center" | "stretch";
+    justify?: "start" | "end" | "center" | "between";
+};
+export type HeadFootProps = DefaultProps | FlexProps;
+export declare const Header: (props: HeadFootProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Footer: (props: HeadFootProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,9 @@
+export { Aside } from "./aside/Aside";
+export { ErrorBoundary } from "./boundary/ErrorBoundary";
+export { Content } from "./content/Content";
+export { Footer, Header } from "./headfoot/HeadFoot";
+export { Page } from "./page/Page";
+export { Col, Container, Row } from "./responsive/Responsive";
+export { Section } from "./section/Section";
+export { ThemeProvider } from "./theme/ThemeProvider";
+export { Viewport } from "./viewport/Viewport";

package/dist/types/core/page/Page.d.ts

@@ -0,0 +1,23 @@
+import { type ChildrenProp, type IconProps, type TestProps } from "../../types";
+export interface PageProps extends IconProps, ChildrenProp, TestProps {
+    /**
+     * page title
+     */
+    title?: string;
+    /**
+     * title element className
+     */
+    titleClassName?: string;
+    /**
+     * paper style drop shadow
+     */
+    paper?: boolean;
+    /**
+     * loading indicator
+     */
+    loading?: boolean;
+}
+/**
+ * The page component used typically for routes, is a structured layout used within an application to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
+ */
+export declare const Page: ({ children, paper, title, titleClassName, icon, rtlFlip, iconBg, iconColor, loading, "data-testid": testId, "data-test-value": testValue, }: PageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/core/responsive/Responsive.d.ts

@@ -0,0 +1,53 @@
+import { type AriaProps, type ChildrenProp, type CssProp, type SizeTypeWithZero, type TestProps } from "../../types";
+export interface ContainerProps extends AriaProps, CssProp, ChildrenProp, TestProps {
+    /**
+     * use full width
+     */
+    fullWidth?: boolean;
+    /**
+     * gutter size
+     */
+    gutter?: SizeTypeWithZero;
+}
+export interface RowProps extends AriaProps, CssProp, ChildrenProp, TestProps {
+    /**
+     * no wrapping
+     */
+    noWrap?: boolean;
+    /**
+     * gutter size
+     */
+    gutter?: SizeTypeWithZero;
+    /**
+     * flex orientation
+     */
+    orient?: "row" | "row-reverse" | "col" | "col-reverse";
+    /**
+     * align items
+     */
+    align?: "start" | "end" | "center" | "stretch";
+    /**
+     * justify items
+     */
+    justify?: "start" | "end" | "center" | "between";
+}
+export interface ColProps extends AriaProps, CssProp, TestProps, Partial<ChildrenProp> {
+    /**
+     * align items
+     */
+    align?: "start" | "end" | "center" | "stretch";
+    /**
+     * column flex
+     */
+    flex?: "auto" | "fill" | "full";
+    /**
+     * stretch inner content
+     */
+    stretchContent?: boolean;
+}
+/**
+ * Responsive layout container
+ */
+export declare const Container: ({ children, fullWidth, className, gutter, ...aria }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Row: ({ children, gutter, noWrap, orient, align, justify, className, ...aria }: RowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Col: ({ children, flex, align, className, stretchContent, ...aria }: ColProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/core/section/Section.d.ts

@@ -0,0 +1,7 @@
+import { type ChildrenProp } from "../../types";
+/**
+ * The section component provides a structured layout used within a page to organize and display content in a sectioned format, ensuring a consistent and intuitive user experience.
+ */
+export declare const Section: ({ children, dir, }: ChildrenProp & {
+    dir?: "ltr" | "rtl";
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/types/core/theme/ThemeProvider.d.ts

@@ -0,0 +1,37 @@
+import { type ChildrenProp } from "../../types";
+export interface ThemeProps {
+    /**
+     * light/dark color scheme
+     */
+    colorScheme?: "light" | "dark";
+    /**
+     * branding css className
+     *
+     * .branding {
+     *  --primary: #color;
+     *  --accent: #color;
+     *  --tint: #color;
+     * }
+     */
+    branding?: string;
+    /**
+     * primary color
+     */
+    primaryColor?: string;
+    /**
+     * accent color
+     */
+    accentColor?: string;
+    /**
+     * tint mix color
+     */
+    tintColor?: string;
+    /**
+     * component rounding
+     */
+    rounding?: "minimal" | "normal" | "full";
+}
+/**
+ * Theme override
+ */
+export declare const ThemeProvider: ({ children, branding, primaryColor, accentColor, tintColor, colorScheme, rounding, }: ThemeProps & ChildrenProp) => import("react/jsx-runtime").JSX.Element;

package/dist/types/core/viewport/Viewport.d.ts

@@ -0,0 +1,5 @@
+import { type PropsWithChildren } from "react";
+/**
+ * The application viewport is the main container that defines the visible area where content is displayed and interacted with.
+ */
+export declare const Viewport: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export declare const useClientService: (clientApi: AnyObject, serverMock?: AnyObject) => any;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const useControlledValue: <T extends unknown = string>(value: T, defaultValue: T) => {
+    currentValue: T;
+    updateValue: import("react").Dispatch<import("react").SetStateAction<T>>;
+};