@app-studio/web 0.8.73 → 0.8.76

package/dist/components/Command/Command/Command.type.d.ts

@@ -0,0 +1,114 @@
+import { ViewProps } from 'app-studio';
+import React from 'react';
+export declare type CommandSize = 'sm' | 'md' | 'lg';
+export declare type CommandVariant = 'default' | 'filled' | 'outline';
+export interface CommandItem {
+    /**
+     * Unique identifier for the command
+     */
+    id: string;
+    /**
+     * Display name for the command
+     */
+    name: string;
+    /**
+     * Optional description for the command
+     */
+    description?: string;
+    /**
+     * Optional icon to display with the command
+     */
+    icon?: React.ReactNode;
+    /**
+     * Optional keyboard shortcut for the command (e.g., "⌘K", "Ctrl+P")
+     */
+    shortcut?: string;
+    /**
+     * Function to execute when the command is selected
+     */
+    onSelect: () => void;
+    /**
+     * Optional keywords for improved search
+     */
+    keywords?: string[];
+    /**
+     * Optional disabled state
+     */
+    disabled?: boolean;
+}
+export interface CommandGroup {
+    /**
+     * Unique identifier for the group
+     */
+    id: string;
+    /**
+     * Display name for the group
+     */
+    name: string;
+    /**
+     * Commands in this group
+     */
+    commands: CommandItem[];
+}
+export interface CommandStyles {
+    /**
+     * Styles for the command dialog container
+     */
+    container?: ViewProps;
+    /**
+     * Styles for the search input
+     */
+    searchInput?: {
+        container?: ViewProps;
+        input?: ViewProps;
+    };
+    /**
+     * Styles for the command list container
+     */
+    list?: ViewProps;
+    /**
+     * Styles for the command group heading
+     */
+    groupHeading?: {
+        container?: ViewProps;
+        heading?: ViewProps;
+    };
+    /**
+     * Styles for each command item
+     */
+    item?: ViewProps;
+    /**
+     * Styles for the selected command item
+     */
+    selectedItem?: ViewProps;
+    /**
+     * Styles for the command item icon
+     */
+    icon?: ViewProps;
+    /**
+     * Styles for the command item content (name and description)
+     */
+    content?: ViewProps;
+    /**
+     * Styles for the command item name
+     */
+    name?: ViewProps;
+    /**
+     * Styles for the command item description
+     */
+    description?: ViewProps;
+    /**
+     * Styles for the command item shortcut
+     */
+    shortcut?: ViewProps;
+    /**
+     * Styles for the empty state
+     */
+    empty?: {
+        container?: ViewProps;
+    };
+    /**
+     * Styles for the footer
+     */
+    footer?: ViewProps;
+}

package/dist/components/Command/Command/Command.view.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { CommandProps, CommandInputProps, CommandListProps, CommandGroupProps, CommandItemProps, CommandEmptyProps } from './Command.props';
+import { CommandItem as CommandItemInterface } from './Command.type';
+interface CommandContextType {
+    search: string;
+    setSearch: (value: string) => void;
+    selectedIndex: number;
+    setSelectedIndex: (index: number) => void;
+    filteredCommands: CommandItemInterface[];
+    onSelect: (item: CommandItemInterface) => void;
+}
+export declare const useCommandContext: () => CommandContextType;
+export declare const CommandProvider: React.FC<{
+    value: CommandContextType;
+    children: React.ReactNode;
+}>;
+export declare const CommandInput: React.FC<CommandInputProps>;
+export declare const CommandList: React.FC<CommandListProps>;
+export declare const CommandGroup: React.FC<CommandGroupProps>;
+export declare const CommandItem: React.FC<CommandItemProps>;
+export declare const CommandEmpty: React.FC<CommandEmptyProps>;
+export declare const CommandView: React.FC<CommandProps & {
+    search: string;
+    setSearch: (value: string) => void;
+    selectedIndex: number;
+    setSelectedIndex: (index: number) => void;
+    filteredCommands: CommandItemInterface[];
+    filteredGroups: any[];
+    listRef: React.RefObject<HTMLDivElement>;
+}>;
+export {};

package/dist/components/Command/Command.d.ts

@@ -0,0 +1,2 @@
+import { CommandType } from './Command/Command.props';
+export declare const Command: CommandType;

package/dist/components/Command/examples/customized.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CustomizedCommand: () => React.JSX.Element;

package/dist/components/Command/examples/default.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DefaultCommand: () => React.JSX.Element;

package/dist/components/Command/examples/groups.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const GroupedCommand: () => React.JSX.Element;

package/dist/components/Command/examples/index.d.ts

@@ -0,0 +1,5 @@
+export * from './default';
+export * from './groups';
+export * from './variants';
+export * from './sizes';
+export * from './customized';

package/dist/components/Command/examples/sizes.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CommandSizes: () => React.JSX.Element;

package/dist/components/Command/examples/variants.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CommandVariants: () => React.JSX.Element;

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

@@ -0,0 +1 @@
+export * from './Command';

package/dist/components/ContextMenu/ContextMenu/ContextMenu.props.d.ts

@@ -0,0 +1,163 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { ButtonProps } from '../../Button/Button/Button.props';
+import { ContextMenuItem, ContextMenuStyles, Size, Variant, Position, Alignment } from './ContextMenu.type';
+export interface ContextMenuProps {
+    /**
+     * The content that will trigger the context menu on right-click
+     */
+    children: React.ReactNode;
+    /**
+     * The items to display in the context menu (for data-driven approach)
+     */
+    items?: ContextMenuItem[];
+    /**
+     * The size of the context menu items
+     */
+    size?: Size;
+    /**
+     * The visual style variant of the context menu
+     */
+    variant?: Variant;
+    /**
+     * Whether to disable the default browser context menu
+     */
+    disableNativeContextMenu?: boolean;
+    /**
+     * Callback fired when the menu open state changes
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Custom styles for different parts of the context menu
+     */
+    views?: ContextMenuStyles;
+    /**
+     * Additional props to be spread to the container element
+     */
+    [key: string]: any;
+}
+export interface ContextMenuTriggerProps {
+    /**
+     * The content that will trigger the context menu on right-click
+     */
+    children: React.ReactNode;
+    /**
+     * Whether to disable the default browser context menu
+     */
+    disableNativeContextMenu?: boolean;
+    /**
+     * If true, merges props onto the immediate child
+     */
+    asChild?: boolean;
+    /**
+     * Disables the trigger
+     */
+    isDisabled?: boolean;
+    /**
+     * Custom styles for the trigger container
+     */
+    views?: {
+        container?: ViewProps;
+    };
+}
+export interface ContextMenuContentProps extends Omit<ViewProps, 'position'> {
+    /**
+     * The items to display in the context menu (for data-driven approach)
+     */
+    items?: ContextMenuItem[];
+    /**
+     * The content of the menu (for compound component pattern)
+     */
+    children?: React.ReactNode;
+    /**
+     * The position of the context menu
+     */
+    position?: {
+        x: number;
+        y: number;
+    };
+    /**
+     * The preferred side to display the context menu
+     */
+    side?: Position;
+    /**
+     * The alignment of the context menu
+     */
+    align?: Alignment;
+    /**
+     * Custom styles for the context menu
+     */
+    views?: {
+        menu?: ViewProps;
+        content?: ViewProps;
+        item?: ViewProps;
+        divider?: ViewProps;
+        separator?: ViewProps;
+        icon?: ViewProps;
+        submenuIndicator?: ViewProps;
+    };
+}
+export interface ContextMenuItemProps extends Omit<ButtonProps, 'onPress' | 'onClick'> {
+    /**
+     * The item data (for data-driven approach)
+     */
+    item?: ContextMenuItem;
+    /**
+     * The content of the menu item (for compound component pattern)
+     */
+    children?: React.ReactNode;
+    /**
+     * Callback fired when the item is selected (clicked)
+     */
+    onSelect?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Disables interaction with the item
+     */
+    isDisabled?: boolean;
+    /**
+     * Custom styles for the item
+     */
+    views?: {
+        item?: ViewProps;
+        icon?: ViewProps;
+        submenuIndicator?: ViewProps;
+    };
+}
+export interface ContextMenuDividerProps {
+    /**
+     * Custom styles for the divider
+     */
+    views?: {
+        divider?: ViewProps;
+    };
+}
+export interface ContextMenuSeparatorProps extends ViewProps {
+    /**
+     * Custom styling for the separator
+     */
+    views?: {
+        separator?: ViewProps;
+    };
+}
+export interface ContextMenuType extends React.FC<ContextMenuProps> {
+    /**
+     * The trigger component for the context menu
+     */
+    Trigger: React.FC<ContextMenuTriggerProps>;
+    /**
+     * The content component for the context menu
+     */
+    Content: React.FC<ContextMenuContentProps>;
+    /**
+     * The item component for the context menu
+     */
+    Item: React.FC<ContextMenuItemProps>;
+    /**
+     * The divider component for the context menu
+     */
+    Divider: React.FC<ContextMenuDividerProps>;
+    /**
+     * The separator component for the context menu (alias for Divider)
+     */
+    Separator: React.FC<ContextMenuSeparatorProps>;
+}

package/dist/components/ContextMenu/ContextMenu/ContextMenu.state.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export declare const useContextMenuState: (props?: {
+    size?: "sm" | "md" | "lg" | undefined;
+    variant?: "default" | "filled" | "outline" | undefined;
+    onOpenChange?: ((isOpen: boolean) => void) | undefined;
+} | undefined) => {
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    position: {
+        x: number;
+        y: number;
+    };
+    setPosition: React.Dispatch<React.SetStateAction<{
+        x: number;
+        y: number;
+    }>>;
+    activeSubmenuId: string | null;
+    setActiveSubmenuId: React.Dispatch<React.SetStateAction<string | null>>;
+    size: "sm" | "md" | "lg" | undefined;
+    variant: "default" | "filled" | "outline" | undefined;
+    triggerRef: React.RefObject<HTMLElement>;
+    contentRef: React.RefObject<HTMLDivElement>;
+    contentId: string;
+    openMenu: (event: React.MouseEvent) => void;
+    closeMenu: () => void;
+};

package/dist/components/ContextMenu/ContextMenu/ContextMenu.style.d.ts

@@ -0,0 +1,20 @@
+import { ViewProps } from 'app-studio';
+import { Size, Variant, Position, Alignment } from './ContextMenu.type';
+export declare const ContextMenuSizes: Record<Size, ViewProps>;
+export declare const ContextMenuVariants: Record<Variant, ViewProps>;
+export declare const ContextMenuItemStates: {
+    hover: {
+        backgroundColor: string;
+    };
+    active: {
+        backgroundColor: string;
+    };
+    disabled: {
+        opacity: number;
+        cursor: string;
+    };
+};
+export declare const calculateMenuPosition: (x: number, y: number, menuWidth: number, menuHeight: number, windowWidth: number, windowHeight: number, side?: Position, align?: Alignment) => {
+    x: number;
+    y: number;
+};

package/dist/components/ContextMenu/ContextMenu/ContextMenu.type.d.ts

@@ -0,0 +1,52 @@
+import { ViewProps } from 'app-studio';
+import { ButtonProps } from '../../Button/Button/Button.props';
+import React from 'react';
+export declare type Size = 'sm' | 'md' | 'lg';
+export declare type Variant = 'default' | 'filled' | 'outline';
+export declare type Position = 'top' | 'right' | 'bottom' | 'left';
+export declare type Alignment = 'start' | 'center' | 'end';
+export interface ContextMenuItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    items?: ContextMenuItem[];
+    divider?: boolean;
+}
+export interface ContextMenuContextType {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    position: {
+        x: number;
+        y: number;
+    };
+    setPosition: (position: {
+        x: number;
+        y: number;
+    }) => void;
+    activeSubmenuId: string | null;
+    setActiveSubmenuId: (id: string | null) => void;
+    size: Size;
+    variant: Variant;
+    triggerRef?: React.RefObject<HTMLElement>;
+    contentRef?: React.RefObject<HTMLDivElement>;
+    contentId?: string;
+    closeMenu?: () => void;
+    openMenu?: (event: React.MouseEvent) => void;
+    styles?: ContextMenuStyles;
+}
+export interface ContextMenuStyles {
+    container?: ViewProps;
+    menu?: ViewProps;
+    content?: ViewProps;
+    item?: ButtonProps & {
+        _disabled?: ButtonProps;
+    };
+    activeItem?: ViewProps;
+    divider?: ViewProps;
+    separator?: ViewProps;
+    icon?: ViewProps;
+    submenuIndicator?: ViewProps;
+    submenu?: ViewProps;
+}

package/dist/components/ContextMenu/ContextMenu/ContextMenu.view.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ContextMenuContextType, Size, Variant, ContextMenuItem as ContextMenuItemType } from './ContextMenu.type';
+import { ContextMenuTriggerProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuDividerProps, ContextMenuSeparatorProps } from './ContextMenu.props';
+export declare const ContextMenuProvider: React.FC<{
+    children: React.ReactNode;
+    value: ContextMenuContextType;
+}>;
+export declare const useContextMenuContext: () => ContextMenuContextType;
+export declare const ContextMenuTrigger: React.FC<ContextMenuTriggerProps>;
+export declare const ContextMenuContent: React.FC<ContextMenuContentProps>;
+export declare const ContextMenuItem: React.FC<ContextMenuItemProps>;
+export declare const ContextMenuDivider: React.FC<ContextMenuDividerProps>;
+export declare const ContextMenuSeparator: React.FC<ContextMenuSeparatorProps>;
+export declare const ContextMenuView: React.FC<{
+    children: React.ReactNode;
+    items?: ContextMenuItemType[];
+    size?: Size;
+    variant?: Variant;
+    disableNativeContextMenu?: boolean;
+    views?: any;
+}>;

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

@@ -0,0 +1,2 @@
+import { ContextMenuType } from './ContextMenu/ContextMenu.props';
+export declare const ContextMenu: ContextMenuType;

package/dist/components/ContextMenu/examples/compound.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CompoundContextMenu: () => React.JSX.Element;

package/dist/components/ContextMenu/examples/custom.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CustomContextMenu: () => React.JSX.Element;

package/dist/components/ContextMenu/examples/default.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DefaultContextMenu: () => React.JSX.Element;

package/dist/components/ContextMenu/examples/index.d.ts

@@ -0,0 +1,5 @@
+export * from './default';
+export * from './variants';
+export * from './sizes';
+export * from './custom';
+export * from './compound';

package/dist/components/ContextMenu/examples/sizes.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ContextMenuSizes: () => React.JSX.Element;

package/dist/components/ContextMenu/examples/variants.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ContextMenuVariants: () => React.JSX.Element;

package/dist/components/DropdownMenu/DropdownMenu/DropdownMenu.props.d.ts

@@ -0,0 +1,117 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { DropdownMenuItem, DropdownMenuStyles, Size, Variant, Position, Alignment } from './DropdownMenu.type';
+export interface DropdownMenuProps {
+    /**
+     * The trigger element that will open the dropdown menu when clicked
+     */
+    trigger: React.ReactNode;
+    /**
+     * The items to display in the dropdown menu
+     */
+    items: DropdownMenuItem[];
+    /**
+     * The size of the dropdown menu items
+     */
+    size?: Size;
+    /**
+     * The visual style variant of the dropdown menu
+     */
+    variant?: Variant;
+    /**
+     * The preferred side to display the dropdown menu
+     */
+    side?: Position;
+    /**
+     * The alignment of the dropdown menu
+     */
+    align?: Alignment;
+    /**
+     * Whether the dropdown menu is initially open
+     */
+    defaultOpen?: boolean;
+    /**
+     * Custom styles for different parts of the dropdown menu
+     */
+    views?: DropdownMenuStyles;
+    /**
+     * Additional props to be spread to the container element
+     */
+    [key: string]: any;
+}
+export interface DropdownMenuTriggerProps {
+    /**
+     * The content that will trigger the dropdown menu on click
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styles for the trigger container
+     */
+    views?: {
+        container?: ViewProps;
+    };
+}
+export interface DropdownMenuContentProps {
+    /**
+     * The items to display in the dropdown menu
+     */
+    items: DropdownMenuItem[];
+    /**
+     * The preferred side to display the dropdown menu
+     */
+    side?: Position;
+    /**
+     * The alignment of the dropdown menu
+     */
+    align?: Alignment;
+    /**
+     * Custom styles for the dropdown menu
+     */
+    views?: {
+        menu?: ViewProps;
+        item?: ViewProps;
+        divider?: ViewProps;
+        icon?: ViewProps;
+        submenuIndicator?: ViewProps;
+    };
+}
+export interface DropdownMenuItemProps {
+    /**
+     * The item data
+     */
+    item: DropdownMenuItem;
+    /**
+     * Custom styles for the item
+     */
+    views?: {
+        item?: ViewProps;
+        icon?: ViewProps;
+        submenuIndicator?: ViewProps;
+    };
+}
+export interface DropdownMenuDividerProps {
+    /**
+     * Custom styles for the divider
+     */
+    views?: {
+        divider?: ViewProps;
+    };
+}
+export interface DropdownMenuType extends React.FC<DropdownMenuProps> {
+    /**
+     * The trigger component for the dropdown menu
+     */
+    Trigger: React.FC<DropdownMenuTriggerProps>;
+    /**
+     * The content component for the dropdown menu
+     */
+    Content: React.FC<DropdownMenuContentProps>;
+    /**
+     * The item component for the dropdown menu
+     */
+    Item: React.FC<DropdownMenuItemProps>;
+    /**
+     * The divider component for the dropdown menu
+     */
+    Divider: React.FC<DropdownMenuDividerProps>;
+}

package/dist/components/DropdownMenu/DropdownMenu/DropdownMenu.state.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const useDropdownMenuState: (defaultOpen?: boolean) => {
+    isOpen: boolean;
+    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    activeSubmenuId: string | null;
+    setActiveSubmenuId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+};

package/dist/components/DropdownMenu/DropdownMenu/DropdownMenu.style.d.ts

@@ -0,0 +1,17 @@
+import { ViewProps } from 'app-studio';
+import { Size, Variant, Position, Alignment } from './DropdownMenu.type';
+export declare const DropdownMenuSizes: Record<Size, ViewProps>;
+export declare const DropdownMenuVariants: Record<Variant, ViewProps>;
+export declare const DropdownMenuItemStates: {
+    hover: {
+        backgroundColor: string;
+    };
+    active: {
+        backgroundColor: string;
+    };
+    disabled: {
+        opacity: number;
+        cursor: string;
+    };
+};
+export declare const getDropdownPosition: (side?: Position, align?: Alignment) => ViewProps;

package/dist/components/DropdownMenu/DropdownMenu/DropdownMenu.type.d.ts

@@ -0,0 +1,34 @@
+import { ViewProps } from 'app-studio';
+import React from 'react';
+export declare type Size = 'sm' | 'md' | 'lg';
+export declare type Variant = 'default' | 'filled' | 'outline';
+export declare type Position = 'top' | 'right' | 'bottom' | 'left';
+export declare type Alignment = 'start' | 'center' | 'end';
+export interface DropdownMenuItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    items?: DropdownMenuItem[];
+    divider?: boolean;
+}
+export interface DropdownMenuContextType {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    activeSubmenuId: string | null;
+    setActiveSubmenuId: (id: string | null) => void;
+    size: Size;
+    variant: Variant;
+}
+export interface DropdownMenuStyles {
+    container?: ViewProps;
+    trigger?: ViewProps;
+    menu?: ViewProps;
+    item?: ViewProps;
+    activeItem?: ViewProps;
+    divider?: ViewProps;
+    icon?: ViewProps;
+    submenuIndicator?: ViewProps;
+    submenu?: ViewProps;
+}