@zuzjs/ui 1.0.12 → 1.0.14

package/dist/index.d.cts

@@ -428,12 +428,7 @@ declare const SPINNER: {
 };
 type SpinnerProps = BoxProps & {
     type?: ValueOf<typeof SPINNER>;
-    variant?: ValueOf<typeof Variant> | number;
-    width?: number;
-    color?: string;
-    background?: string;
-    foreground?: string;
-    speed?: number;
+    variant?: ValueOf<typeof Variant>;
 };
 
 type ButtonProps = Props<`button`> & {
@@ -445,6 +440,7 @@ type ButtonProps = Props<`button`> & {
     state?: ButtonState;
     variant?: ValueOf<typeof Variant>;
     reset?: boolean;
+    kind?: `solid` | `subtle` | `surface` | `outline` | `ghost` | `plain`;
 };
 interface ButtonHandler extends HTMLButtonElement {
     reset: () => void;
@@ -596,34 +592,80 @@ type ColorSchemeProps = Omit<SegmentProps, `items`> & {
 
 declare const ColorScheme$1: react.ForwardRefExoticComponent<Omit<ColorSchemeProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Represents a single menu item in the context menu.
+ */
 interface ContextItem {
+    /** The display text for the menu item */
     label: string;
+    /** Optional color for the label text */
     labelColor?: string;
+    /** Optional icon identifier or class name */
     icon?: string;
+    /** Optional color for the icon */
     iconColor?: string;
+    /** Optional CSS class to apply to the menu item */
     className?: string;
+    /** Whether the menu item is enabled and selectable */
     enabled?: boolean;
-    onSelect: () => void;
+    /** Callback function invoked when the menu item is selected */
+    onSelect?: (item: ContextItem) => void;
 }
+/**
+ * Props for the ContextMenu component.
+ * Extends the BoxProps interface with context menu specific properties.
+ */
 type ContextMenuProps = BoxProps & {
+    /** Unique identifier for the context menu instance */
     id?: number;
+    /** The mouse or touch event that triggered the context menu */
     event?: MouseEvent$1<Element, MouseEvent> | TouchEvent;
+    /** Reference to the parent HTML element */
     parent?: RefObject<HTMLElement | null>;
+    /** The origin point for positioning the context menu */
     origin?: ValueOf<typeof ORIGIN>;
+    /** Array of menu items to display */
     items?: ContextItem[];
+    /** Horizontal offset in pixels from the trigger point */
     offsetX?: number;
+    /** Vertical offset in pixels from the trigger point */
     offsetY?: number;
+    /** Optional header component or ReactNode to display at the top */
     header?: ReactNode | FC;
+    /** Optional footer component or ReactNode to display at the bottom */
     footer?: ReactNode | FC;
+    /** Conditional flag to control whether the context menu is displayed */
     when?: boolean;
+    /** Arrow */
+    arrow?: boolean;
+    /** Callback invoked when the context menu is closed with its id */
     onClose?: (id: number) => void;
 };
+/**
+ * Props for individual MenuItem components.
+ * Extends ContextItem with additional rendering properties.
+ */
 type MenuItemProps = ContextItem & {
+    /** Index position of the menu item in the menu list */
     index: number;
+    /** CSS class name to apply to the menu item element */
     className: string;
 };
+/**
+ * Handler interface for imperative control of the ContextMenu component.
+ * Used with useRef and forwardRef for programmatic visibility control.
+ */
 interface ContextMenuHandler {
+    /**
+     * Display the context menu at the position of the provided event.
+     * @param e - The mouse or touch event that triggered the menu
+     * @param items - Optional array of menu items to display
+     */
     show: (e: MouseEvent$1<Element, MouseEvent> | TouchEvent, items?: ContextItem[]) => void;
+    /**
+     * Hide/close the context menu.
+     * @param e - The mouse or touch event that triggered the close action
+     */
     hide: (e: MouseEvent$1 | TouchEvent) => void;
 }
 
@@ -854,7 +896,7 @@ declare const Sheet: react.ForwardRefExoticComponent<ZuzProps & {
     onHide?: () => void;
 } & react.RefAttributes<SheetHandler>>;
 
-type FormProps = BoxProps & {
+type FormProps = Omit<BoxProps, `ref`> & {
     /** Name of form, will be appended to --form-{name} in className
      * whitespace will be replaced with dash (-)
     */
@@ -906,9 +948,15 @@ interface FormHandler {
  * @param props - Properties to configure form behavior, validation messages, submission handling, and visual feedback.
  * @param ref - Reference to the {@link FormHandler} interface, exposing methods to control loading and error states from the parent.
  */
-declare const Form: react.ForwardRefExoticComponent<Omit<FormProps, "ref"> & react.RefAttributes<FormHandler>>;
+declare const Form: {
+    ({ ref, ...props }: FormProps & {
+        ref?: Ref<FormHandler>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 type GroupProps = BoxProps & {
+    when?: boolean;
     fxDelay?: number;
     fxStep?: number;
     classToIgnore?: string;
@@ -1701,9 +1749,7 @@ interface ThemeConfig {
     /**
      * App Level Spinner Conf
      */
-    spinner?: {
-        type?: ValueOf<typeof SPINNER>;
-    };
+    spinner?: SpinnerProps;
     toast?: {
         curve?: ValueOf<typeof TRANSITION_CURVES>;
         duration?: number;
@@ -1781,7 +1827,18 @@ declare const useMorph: (sourceRef: RefObject<HTMLElement | null>, active: boole
 
 declare const useContextMenu: () => {
     showContextMenu: (e: MouseEvent$1<Element, MouseEvent> | TouchEvent, items: ContextItem[], origin?: ValueOf<typeof ORIGIN>) => void;
-    showMenu: (ref: RefObject<HTMLElement | null>, items: ContextItem[], origin?: ValueOf<typeof ORIGIN>) => void;
+    showMenu: (ref: RefObject<HTMLElement | null>, { items, origin, offsetX, offsetY, transition, curve, arrow, duration, header, footer }: {
+        transition?: ValueOf<typeof TRANSITIONS>;
+        curve?: ValueOf<typeof TRANSITION_CURVES>;
+        arrow?: boolean;
+        duration?: number;
+        offsetX?: number;
+        offsetY?: number;
+        items: ContextItem[];
+        origin?: ValueOf<typeof ORIGIN>;
+        header?: ReactNode | FC;
+        footer?: ReactNode | FC;
+    }) => void;
     hide: () => void;
 };
 

package/dist/index.d.ts

@@ -428,12 +428,7 @@ declare const SPINNER: {
 };
 type SpinnerProps = BoxProps & {
     type?: ValueOf<typeof SPINNER>;
-    variant?: ValueOf<typeof Variant> | number;
-    width?: number;
-    color?: string;
-    background?: string;
-    foreground?: string;
-    speed?: number;
+    variant?: ValueOf<typeof Variant>;
 };
 
 type ButtonProps = Props<`button`> & {
@@ -445,6 +440,7 @@ type ButtonProps = Props<`button`> & {
     state?: ButtonState;
     variant?: ValueOf<typeof Variant>;
     reset?: boolean;
+    kind?: `solid` | `subtle` | `surface` | `outline` | `ghost` | `plain`;
 };
 interface ButtonHandler extends HTMLButtonElement {
     reset: () => void;
@@ -596,34 +592,80 @@ type ColorSchemeProps = Omit<SegmentProps, `items`> & {
 
 declare const ColorScheme$1: react.ForwardRefExoticComponent<Omit<ColorSchemeProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Represents a single menu item in the context menu.
+ */
 interface ContextItem {
+    /** The display text for the menu item */
     label: string;
+    /** Optional color for the label text */
     labelColor?: string;
+    /** Optional icon identifier or class name */
     icon?: string;
+    /** Optional color for the icon */
     iconColor?: string;
+    /** Optional CSS class to apply to the menu item */
     className?: string;
+    /** Whether the menu item is enabled and selectable */
     enabled?: boolean;
-    onSelect: () => void;
+    /** Callback function invoked when the menu item is selected */
+    onSelect?: (item: ContextItem) => void;
 }
+/**
+ * Props for the ContextMenu component.
+ * Extends the BoxProps interface with context menu specific properties.
+ */
 type ContextMenuProps = BoxProps & {
+    /** Unique identifier for the context menu instance */
     id?: number;
+    /** The mouse or touch event that triggered the context menu */
     event?: MouseEvent$1<Element, MouseEvent> | TouchEvent;
+    /** Reference to the parent HTML element */
     parent?: RefObject<HTMLElement | null>;
+    /** The origin point for positioning the context menu */
     origin?: ValueOf<typeof ORIGIN>;
+    /** Array of menu items to display */
     items?: ContextItem[];
+    /** Horizontal offset in pixels from the trigger point */
     offsetX?: number;
+    /** Vertical offset in pixels from the trigger point */
     offsetY?: number;
+    /** Optional header component or ReactNode to display at the top */
     header?: ReactNode | FC;
+    /** Optional footer component or ReactNode to display at the bottom */
     footer?: ReactNode | FC;
+    /** Conditional flag to control whether the context menu is displayed */
     when?: boolean;
+    /** Arrow */
+    arrow?: boolean;
+    /** Callback invoked when the context menu is closed with its id */
     onClose?: (id: number) => void;
 };
+/**
+ * Props for individual MenuItem components.
+ * Extends ContextItem with additional rendering properties.
+ */
 type MenuItemProps = ContextItem & {
+    /** Index position of the menu item in the menu list */
     index: number;
+    /** CSS class name to apply to the menu item element */
     className: string;
 };
+/**
+ * Handler interface for imperative control of the ContextMenu component.
+ * Used with useRef and forwardRef for programmatic visibility control.
+ */
 interface ContextMenuHandler {
+    /**
+     * Display the context menu at the position of the provided event.
+     * @param e - The mouse or touch event that triggered the menu
+     * @param items - Optional array of menu items to display
+     */
     show: (e: MouseEvent$1<Element, MouseEvent> | TouchEvent, items?: ContextItem[]) => void;
+    /**
+     * Hide/close the context menu.
+     * @param e - The mouse or touch event that triggered the close action
+     */
     hide: (e: MouseEvent$1 | TouchEvent) => void;
 }
 
@@ -854,7 +896,7 @@ declare const Sheet: react.ForwardRefExoticComponent<ZuzProps & {
     onHide?: () => void;
 } & react.RefAttributes<SheetHandler>>;
 
-type FormProps = BoxProps & {
+type FormProps = Omit<BoxProps, `ref`> & {
     /** Name of form, will be appended to --form-{name} in className
      * whitespace will be replaced with dash (-)
     */
@@ -906,9 +948,15 @@ interface FormHandler {
  * @param props - Properties to configure form behavior, validation messages, submission handling, and visual feedback.
  * @param ref - Reference to the {@link FormHandler} interface, exposing methods to control loading and error states from the parent.
  */
-declare const Form: react.ForwardRefExoticComponent<Omit<FormProps, "ref"> & react.RefAttributes<FormHandler>>;
+declare const Form: {
+    ({ ref, ...props }: FormProps & {
+        ref?: Ref<FormHandler>;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 type GroupProps = BoxProps & {
+    when?: boolean;
     fxDelay?: number;
     fxStep?: number;
     classToIgnore?: string;
@@ -1701,9 +1749,7 @@ interface ThemeConfig {
     /**
      * App Level Spinner Conf
      */
-    spinner?: {
-        type?: ValueOf<typeof SPINNER>;
-    };
+    spinner?: SpinnerProps;
     toast?: {
         curve?: ValueOf<typeof TRANSITION_CURVES>;
         duration?: number;
@@ -1781,7 +1827,18 @@ declare const useMorph: (sourceRef: RefObject<HTMLElement | null>, active: boole
 
 declare const useContextMenu: () => {
     showContextMenu: (e: MouseEvent$1<Element, MouseEvent> | TouchEvent, items: ContextItem[], origin?: ValueOf<typeof ORIGIN>) => void;
-    showMenu: (ref: RefObject<HTMLElement | null>, items: ContextItem[], origin?: ValueOf<typeof ORIGIN>) => void;
+    showMenu: (ref: RefObject<HTMLElement | null>, { items, origin, offsetX, offsetY, transition, curve, arrow, duration, header, footer }: {
+        transition?: ValueOf<typeof TRANSITIONS>;
+        curve?: ValueOf<typeof TRANSITION_CURVES>;
+        arrow?: boolean;
+        duration?: number;
+        offsetX?: number;
+        offsetY?: number;
+        items: ContextItem[];
+        origin?: ValueOf<typeof ORIGIN>;
+        header?: ReactNode | FC;
+        footer?: ReactNode | FC;
+    }) => void;
     hide: () => void;
 };