@app-studio/web 0.8.74 → 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

@@ -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>;

package/dist/components/Form/Checkbox/examples/designSystem.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Checkbox Examples - Design System
+ *
+ * Showcases 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 React from 'react';
+export declare const DesignSystemCheckboxes: () => React.JSX.Element;

package/dist/components/Form/Checkbox/examples/index.d.ts

@@ -1,5 +1,6 @@
 export * from './ColorScheme';
 export * from './Default';
+export * from './designSystem';
 export * from './DisabledInput';
 export * from './ErrorCheckbox';
 export * from './FormCheckout';

package/dist/components/Form/Radio/Radio/Radio.props.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Radio Props
+ *
+ * Defines the props for the Radio component following the design guidelines.
+ */
+import React from 'react';
+import { Elevation } from '../../../../utils/elevation';
+import { InputProps, Shadow } from 'app-studio';
+import { RadioStyles, Size } from './Radio.type';
+import { ViewProps } from 'app-studio';
+/**
+ * Props for the Radio component
+ */
+export interface RadioProps extends Omit<InputProps, 'size'> {
+    /**
+     * Optional identifier for the radio element
+     */
+    id?: string;
+    /**
+     * Optional custom icon for the radio element
+     */
+    icon?: React.ReactNode;
+    /**
+     * Optional error message or state
+     */
+    error?: any;
+    /**
+     * Optional name attribute for the radio element
+     */
+    name?: string;
+    /**
+     * Optional label text for the radio element
+     */
+    label?: string;
+    /**
+     * Optional value for the radio element
+     */
+    value?: string;
+    /**
+     * Optional checked state for the radio element
+     */
+    isChecked?: boolean;
+    /**
+     * Optional default selected state for the radio element
+     */
+    defaultIsSelected?: boolean;
+    /**
+     * Optional read-only state for the radio element
+     */
+    isReadOnly?: boolean;
+    /**
+     * Optional disabled state for the radio element
+     */
+    isDisabled?: boolean;
+    /**
+     * Optional position for the label
+     */
+    labelPosition?: 'left' | 'right';
+    /**
+     * Optional callback for change events
+     */
+    onChange?: Function;
+    /**
+     * Optional callback for value change events
+     */
+    onValueChange?: Function;
+    /**
+     * Optional custom styles for the radio element
+     */
+    views?: RadioStyles;
+    /**
+     * Optional size for the radio element
+     */
+    size?: Size;
+    /**
+     * Optional shadow for the radio element
+     */
+    shadow?: Shadow | Elevation | ViewProps;
+    /**
+     * Optional info text for the radio element
+     */
+    infoText?: string;
+}
+/**
+ * Props for the Radio view component
+ */
+export interface RadioViewProps extends RadioProps {
+    /**
+     * Optional hover state for the radio element
+     */
+    isHovered?: boolean;
+    /**
+     * Optional setter for the hover state
+     */
+    setIsHovered?: (hovered: boolean) => void;
+    /**
+     * Optional selected state for the radio element
+     */
+    isSelected?: boolean;
+    /**
+     * Optional setter for the selected state
+     */
+    setIsSelected?: (selected: boolean) => void;
+}

package/dist/components/Form/Radio/Radio/Radio.state.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Radio State
+ *
+ * Manages the state for the Radio component.
+ */
+import React from 'react';
+import { RadioProps } from './Radio.props';
+/**
+ * Custom hook to manage the state of the Radio component
+ */
+export declare const useRadioState: ({ defaultIsSelected, isChecked, }: RadioProps) => {
+    isHovered: boolean;
+    setIsHovered: React.Dispatch<React.SetStateAction<boolean>>;
+    isSelected: boolean;
+    setIsSelected: React.Dispatch<React.SetStateAction<boolean>>;
+};