@app-studio/web 0.8.74 → 0.8.77

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

@@ -0,0 +1,162 @@
+import { ViewProps } from 'app-studio';
+import React from 'react';
+import { CommandGroup, CommandItem, CommandSize, CommandStyles, CommandVariant } from './Command.type';
+export interface CommandProps {
+    /**
+     * Whether the command palette is open
+     */
+    open: boolean;
+    /**
+     * Callback when the open state changes
+     */
+    onOpenChange: (open: boolean) => void;
+    /**
+     * Command groups to display
+     */
+    groups?: CommandGroup[];
+    /**
+     * Flat list of commands (alternative to groups)
+     */
+    commands?: CommandItem[];
+    /**
+     * Placeholder text for the search input
+     */
+    placeholder?: string;
+    /**
+     * Size of the command palette
+     */
+    size?: CommandSize;
+    /**
+     * Visual variant of the command palette
+     */
+    variant?: CommandVariant;
+    /**
+     * Custom filter function for searching commands
+     */
+    filter?: (value: string, item: CommandItem) => boolean;
+    /**
+     * Custom empty state when no commands match the search
+     */
+    emptyState?: React.ReactNode;
+    /**
+     * Custom footer content
+     */
+    footer?: React.ReactNode;
+    /**
+     * Custom styles for different parts of the command palette
+     */
+    views?: CommandStyles;
+    /**
+     * Additional props to be spread to the container element
+     */
+    [key: string]: any;
+}
+export interface CommandInputProps {
+    /**
+     * Value of the search input
+     */
+    value: string;
+    /**
+     * Callback when the value changes
+     */
+    onValueChange: (value: string) => void;
+    /**
+     * Placeholder text for the search input
+     */
+    placeholder?: string;
+    /**
+     * Custom styles for the input
+     */
+    views?: {
+        container?: ViewProps;
+        input?: ViewProps;
+    };
+}
+export interface CommandListProps {
+    /**
+     * Children to render in the list
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styles for the list
+     */
+    views?: {
+        container?: ViewProps;
+    };
+}
+export interface CommandGroupProps {
+    /**
+     * Heading for the group
+     */
+    heading: string;
+    /**
+     * Children to render in the group
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styles for the group
+     */
+    views?: {
+        container?: ViewProps;
+        heading?: ViewProps;
+    };
+}
+export interface CommandItemProps {
+    /**
+     * Command item data
+     */
+    item: CommandItem;
+    /**
+     * Whether the item is selected
+     */
+    selected?: boolean;
+    /**
+     * Callback when the item is selected
+     */
+    onSelect?: () => void;
+    /**
+     * Custom styles for the item
+     */
+    views?: {
+        container?: ViewProps;
+        icon?: ViewProps;
+        content?: ViewProps;
+        name?: ViewProps;
+        description?: ViewProps;
+        shortcut?: ViewProps;
+    };
+}
+export interface CommandEmptyProps {
+    /**
+     * Children to render in the empty state
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom styles for the empty state
+     */
+    views?: {
+        container?: ViewProps;
+    };
+}
+export interface CommandType extends React.FC<CommandProps> {
+    /**
+     * Input component for the command palette
+     */
+    Input: React.FC<CommandInputProps>;
+    /**
+     * List component for the command palette
+     */
+    List: React.FC<CommandListProps>;
+    /**
+     * Group component for the command palette
+     */
+    Group: React.FC<CommandGroupProps>;
+    /**
+     * Item component for the command palette
+     */
+    Item: React.FC<CommandItemProps>;
+    /**
+     * Empty component for the command palette
+     */
+    Empty: React.FC<CommandEmptyProps>;
+}

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { CommandGroup, CommandItem } from './Command.type';
+export interface CommandStateProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    groups?: CommandGroup[];
+    commands?: CommandItem[];
+    filter?: (value: string, item: CommandItem) => boolean;
+}
+export declare const useCommandState: ({ open, onOpenChange, groups, commands, filter, }: CommandStateProps) => {
+    search: string;
+    setSearch: import("react").Dispatch<import("react").SetStateAction<string>>;
+    selectedIndex: number;
+    setSelectedIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
+    filteredCommands: CommandItem[];
+    filteredGroups: CommandGroup[];
+    listRef: import("react").RefObject<HTMLDivElement>;
+};

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

@@ -0,0 +1,18 @@
+import { ViewProps } from 'app-studio';
+import { CommandSize, CommandVariant } from './Command.type';
+export declare const CommandSizes: Record<CommandSize, ViewProps>;
+export declare const CommandVariants: Record<CommandVariant, ViewProps>;
+export declare const CommandInputStyles: ViewProps;
+export declare const CommandListStyles: ViewProps;
+export declare const CommandGroupStyles: ViewProps;
+export declare const CommandGroupHeadingStyles: ViewProps;
+export declare const CommandItemStyles: ViewProps;
+export declare const CommandItemSelectedStyles: ViewProps;
+export declare const CommandItemDisabledStyles: ViewProps;
+export declare const CommandItemIconStyles: ViewProps;
+export declare const CommandItemContentStyles: ViewProps;
+export declare const CommandItemNameStyles: ViewProps;
+export declare const CommandItemDescriptionStyles: ViewProps;
+export declare const CommandItemShortcutStyles: ViewProps;
+export declare const CommandEmptyStyles: ViewProps;
+export declare const CommandFooterStyles: ViewProps;

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

@@ -1,5 +1,6 @@
 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 {
     /**
@@ -7,9 +8,9 @@ export interface ContextMenuProps {
      */
     children: React.ReactNode;
     /**
-     * The items to display in the context menu
+     * The items to display in the context menu (for data-driven approach)
      */
-    items: ContextMenuItem[];
+    items?: ContextMenuItem[];
     /**
      * The size of the context menu items
      */
@@ -22,6 +23,10 @@ export interface ContextMenuProps {
      * 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
      */
@@ -40,6 +45,14 @@ export interface ContextMenuTriggerProps {
      * 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
      */
@@ -47,11 +60,15 @@ export interface ContextMenuTriggerProps {
         container?: ViewProps;
     };
 }
-export interface ContextMenuContentProps {
+export interface ContextMenuContentProps extends Omit<ViewProps, 'position'> {
     /**
-     * The items to display in the context menu
+     * The items to display in the context menu (for data-driven approach)
      */
-    items: ContextMenuItem[];
+    items?: ContextMenuItem[];
+    /**
+     * The content of the menu (for compound component pattern)
+     */
+    children?: React.ReactNode;
     /**
      * The position of the context menu
      */
@@ -72,17 +89,31 @@ export interface ContextMenuContentProps {
      */
     views?: {
         menu?: ViewProps;
+        content?: ViewProps;
         item?: ViewProps;
         divider?: ViewProps;
+        separator?: ViewProps;
         icon?: ViewProps;
         submenuIndicator?: ViewProps;
     };
 }
-export interface ContextMenuItemProps {
+export interface ContextMenuItemProps extends Omit<ButtonProps, 'onPress' | 'onClick'> {
     /**
-     * The item data
+     * The item data (for data-driven approach)
      */
-    item: ContextMenuItem;
+    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
      */
@@ -100,6 +131,14 @@ export interface ContextMenuDividerProps {
         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
@@ -117,4 +156,8 @@ export interface ContextMenuType extends React.FC<ContextMenuProps> {
      * 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

@@ -1,15 +1,26 @@
-/// <reference types="react" />
-export declare const useContextMenuState: () => {
+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: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
     position: {
         x: number;
         y: number;
     };
-    setPosition: import("react").Dispatch<import("react").SetStateAction<{
+    setPosition: React.Dispatch<React.SetStateAction<{
         x: number;
         y: number;
     }>>;
     activeSubmenuId: string | null;
-    setActiveSubmenuId: import("react").Dispatch<import("react").SetStateAction<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.type.d.ts

@@ -1,4 +1,5 @@
 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';
@@ -28,13 +29,23 @@ export interface ContextMenuContextType {
     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;
-    item?: 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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ContextMenuContextType, Size, Variant, ContextMenuItem as ContextMenuItemType } from './ContextMenu.type';
-import { ContextMenuTriggerProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuDividerProps } from './ContextMenu.props';
+import { ContextMenuTriggerProps, ContextMenuContentProps, ContextMenuItemProps, ContextMenuDividerProps, ContextMenuSeparatorProps } from './ContextMenu.props';
 export declare const ContextMenuProvider: React.FC<{
     children: React.ReactNode;
     value: ContextMenuContextType;
@@ -10,11 +10,12 @@ 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;
+    items?: ContextMenuItemType[];
+    size?: Size;
+    variant?: Variant;
     disableNativeContextMenu?: boolean;
     views?: any;
 }>;

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/index.d.ts

@@ -2,3 +2,4 @@ export * from './default';
 export * from './variants';
 export * from './sizes';
 export * from './custom';
+export * from './compound';

package/dist/components/Form/Checkbox/Checkbox/Checkbox.style.d.ts

@@ -1,4 +1,73 @@
+/**
+ * Checkbox Styles
+ *
+ * Defines the styles for the Checkbox component following the design guidelines:
+ * - Typography: Inter/Geist font, specific sizes/weights
+ * - Spacing: 4px grid system
+ * - Colors: Neutral palette with semantic colors
+ * - Rounded corners: Consistent border radius
+ * - Transitions: Subtle animations
+ */
 import { ViewProps } from 'app-studio';
-import { Size } from './Checkbox.type';
+import { Size, Variant } from './Checkbox.type';
+/**
+ * Size configurations for the Checkbox component
+ * Following the 4px grid system
+ */
 export declare const Sizes: Record<Size, ViewProps>;
+/**
+ * Icon sizes for the Checkbox component
+ * Proportional to the component size
+ */
 export declare const IconSizes: Record<Size, number>;
+/**
+ * Variant styles for the Checkbox component
+ */
+export declare const VariantStyles: Record<Variant, ViewProps>;
+/**
+ * State styles for the Checkbox component
+ */
+export declare const StateStyles: {
+    hover: {
+        selected: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        unselected: {
+            borderColor: string;
+        };
+        indeterminate: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+    disabled: {
+        selected: {
+            backgroundColor: string;
+            borderColor: string;
+            opacity: number;
+        };
+        unselected: {
+            borderColor: string;
+            opacity: number;
+        };
+        indeterminate: {
+            backgroundColor: string;
+            borderColor: string;
+            opacity: number;
+        };
+    };
+    error: {
+        selected: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+        unselected: {
+            borderColor: string;
+        };
+        indeterminate: {
+            backgroundColor: string;
+            borderColor: string;
+        };
+    };
+};

package/dist/components/Form/Checkbox/Checkbox/Checkbox.view.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Checkbox View Component
+ *
+ * Renders a checkbox with various styles and states
+ * according to the design guidelines.
+ */
 import React from 'react';
 import { CheckboxViewProps } from './Checkbox.props';
 declare const CheckboxView: React.FC<CheckboxViewProps>;