@app-studio/web 0.8.73 → 0.8.76

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

@@ -0,0 +1,42 @@
+/**
+ * Input Styles
+ *
+ * Defines the styles for input components 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 { Shape, Size, Variant } from './Input.type';
+/**
+ * Shape styles for input components with consistent border radius
+ */
+export declare const Shapes: Record<Shape, ViewProps>;
+/**
+ * Label sizes following the 4px grid system
+ */
+export declare const LabelSizes: Record<Size, string>;
+/**
+ * Input variants with consistent styling
+ */
+export declare const InputVariants: Record<Variant, ViewProps>;
+/**
+ * Padding for input with label following the 4px grid system
+ */
+export declare const PadddingWithLabel: {
+    paddingTop: string;
+    paddingBottom: string;
+    paddingLeft: string;
+    paddingRight: string;
+};
+/**
+ * Padding for input without label following the 4px grid system
+ */
+export declare const PaddingWithoutLabel: {
+    paddingTop: string;
+    paddingBottom: string;
+    paddingLeft: string;
+    paddingRight: string;
+};

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

@@ -0,0 +1,7 @@
+export * from './FieldContainer/FieldContainer';
+export * from './FieldContent/FieldContent';
+export * from './FieldIcons/FieldIcons';
+export * from './FieldLabel/FieldLabel';
+export * from './FieldLayout/FieldLayout';
+export * from './FieldWrapper/FieldWrapper';
+export * from './HelperText/HelperText';

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

@@ -0,0 +1,185 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { MenubarItem, MenubarStyles, Orientation, Size, Variant } from './Menubar.type';
+export interface MenubarProps {
+    /**
+     * The items to display in the menubar
+     */
+    items: MenubarItem[];
+    /**
+     * The orientation of the menubar
+     */
+    orientation?: Orientation;
+    /**
+     * The size of the menubar items
+     */
+    size?: Size;
+    /**
+     * The visual style variant of the menubar
+     */
+    variant?: Variant;
+    /**
+     * The ID of the initially active menu
+     */
+    defaultActiveMenuId?: string | null;
+    /**
+     * The ID of the initially open menu
+     */
+    defaultOpenMenuId?: string | null;
+    /**
+     * Custom styles for different parts of the menubar
+     */
+    views?: MenubarStyles;
+    /**
+     * Additional props to be spread to the container element
+     */
+    [key: string]: any;
+}
+export interface MenubarRootProps {
+    /**
+     * The content of the menubar
+     */
+    children: React.ReactNode;
+    /**
+     * The orientation of the menubar
+     */
+    orientation?: Orientation;
+    /**
+     * The size of the menubar items
+     */
+    size?: Size;
+    /**
+     * The visual style variant of the menubar
+     */
+    variant?: Variant;
+    /**
+     * Custom styles for the menubar container
+     */
+    views?: {
+        container?: ViewProps;
+    };
+    /**
+     * Additional props to be spread to the container element
+     */
+    [key: string]: any;
+}
+export interface MenubarMenuProps {
+    /**
+     * The content of the menubar menu
+     */
+    children: React.ReactNode;
+    /**
+     * The ID of the menu
+     */
+    id: string;
+    /**
+     * Whether the menu is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Custom styles for the menu
+     */
+    views?: {
+        menu?: ViewProps;
+    };
+}
+export interface MenubarTriggerProps {
+    /**
+     * The content of the menubar trigger
+     */
+    children: React.ReactNode;
+    /**
+     * The ID of the menu this trigger belongs to
+     */
+    menuId: string;
+    /**
+     * Whether the trigger is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Custom styles for the trigger
+     */
+    views?: {
+        trigger?: ViewProps;
+        icon?: ViewProps;
+    };
+}
+export interface MenubarContentProps {
+    /**
+     * The content of the menubar dropdown
+     */
+    children: React.ReactNode;
+    /**
+     * The ID of the menu this content belongs to
+     */
+    menuId: string;
+    /**
+     * Custom styles for the content
+     */
+    views?: {
+        content?: ViewProps;
+    };
+}
+export interface MenubarItemProps {
+    /**
+     * The content of the menubar item
+     */
+    children: React.ReactNode;
+    /**
+     * The ID of the item
+     */
+    id: string;
+    /**
+     * The icon to display next to the item
+     */
+    icon?: React.ReactNode;
+    /**
+     * Whether the item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Callback when the item is clicked
+     */
+    onClick?: () => void;
+    /**
+     * Custom styles for the item
+     */
+    views?: {
+        item?: ViewProps;
+        icon?: ViewProps;
+    };
+}
+export interface MenubarSeparatorProps {
+    /**
+     * Custom styles for the separator
+     */
+    views?: {
+        separator?: ViewProps;
+    };
+}
+export interface MenubarType extends React.FC<MenubarProps> {
+    /**
+     * The root component for the menubar
+     */
+    Root: React.FC<MenubarRootProps>;
+    /**
+     * The menu component for the menubar
+     */
+    Menu: React.FC<MenubarMenuProps>;
+    /**
+     * The trigger component for menubar menus
+     */
+    Trigger: React.FC<MenubarTriggerProps>;
+    /**
+     * The content component for menubar menus
+     */
+    Content: React.FC<MenubarContentProps>;
+    /**
+     * The item component for menubar content
+     */
+    Item: React.FC<MenubarItemProps>;
+    /**
+     * The separator component for menubar content
+     */
+    Separator: React.FC<MenubarSeparatorProps>;
+}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const useMenubarState: (defaultActiveMenuId?: string | null, defaultOpenMenuId?: string | null) => {
+    activeMenuId: string | null;
+    setActiveMenuId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    openMenuId: string | null;
+    setOpenMenuId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    isMenuOpen: (menuId: string) => boolean;
+    toggleMenu: (menuId: string) => void;
+};

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

@@ -0,0 +1,19 @@
+import { ViewProps } from 'app-studio';
+import { Orientation, Size, Variant } from './Menubar.type';
+export declare const MenubarSizes: Record<Size, ViewProps>;
+export declare const MenubarVariants: Record<Variant, ViewProps>;
+export declare const MenubarOrientations: Record<Orientation, ViewProps>;
+export declare const MenubarItemStates: {
+    active: {
+        backgroundColor: string;
+        fontWeight: string;
+    };
+    hover: {
+        backgroundColor: string;
+    };
+    disabled: {
+        opacity: number;
+        cursor: string;
+    };
+};
+export declare const getMenubarContentPosition: (orientation: Orientation) => ViewProps;

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

@@ -0,0 +1,35 @@
+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 Orientation = 'horizontal' | 'vertical';
+export interface MenubarItem {
+    id: string;
+    label: string;
+    icon?: React.ReactNode;
+    items?: MenubarItem[];
+    disabled?: boolean;
+    onClick?: () => void;
+    separator?: boolean;
+}
+export interface MenubarContextType {
+    activeMenuId: string | null;
+    setActiveMenuId: (id: string | null) => void;
+    openMenuId: string | null;
+    setOpenMenuId: (id: string | null) => void;
+    isMenuOpen: (id: string) => boolean;
+    toggleMenu: (id: string) => void;
+    orientation: Orientation;
+    size: Size;
+    variant: Variant;
+}
+export interface MenubarStyles {
+    container?: ViewProps;
+    menu?: ViewProps;
+    trigger?: ViewProps;
+    content?: ViewProps;
+    item?: ViewProps;
+    activeItem?: ViewProps;
+    separator?: ViewProps;
+    icon?: ViewProps;
+}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { MenubarContextType, MenubarItem as MenubarItemType, Orientation, Size, Variant } from './Menubar.type';
+import { MenubarRootProps, MenubarMenuProps, MenubarTriggerProps, MenubarContentProps, MenubarItemProps, MenubarSeparatorProps } from './Menubar.props';
+export declare const useMenubarContext: () => MenubarContextType;
+export declare const MenubarProvider: React.FC<{
+    value: MenubarContextType;
+    children: React.ReactNode;
+}>;
+export declare const MenubarRoot: React.FC<MenubarRootProps>;
+export declare const MenubarMenu: React.FC<MenubarMenuProps>;
+export declare const MenubarTrigger: React.FC<MenubarTriggerProps>;
+export declare const MenubarContent: React.FC<MenubarContentProps>;
+export declare const MenubarItem: React.FC<MenubarItemProps>;
+export declare const MenubarSeparator: React.FC<MenubarSeparatorProps>;
+export declare const MenubarView: React.FC<{
+    items: MenubarItemType[];
+    orientation: Orientation;
+    size: Size;
+    variant: Variant;
+    views?: any;
+}>;

package/dist/components/Menubar/Menubar.d.ts

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

package/dist/components/Menubar/examples/composite.d.ts

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

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

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

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

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

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

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

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

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

package/dist/components/Menubar/examples/vertical.d.ts

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

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

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

package/dist/components/Modal/Examples/designSystem.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Modal Examples - Design System
+ *
+ * Showcases the Modal 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 DesignSystemModal: () => React.JSX.Element;

package/dist/components/Modal/Examples/index.d.ts

@@ -1,6 +1,7 @@
 export * from '../../Modal/Examples/BlurModal';
 export * from '../../Modal/Examples/CloseButtonModal';
 export * from '../../Modal/Examples/DefaultModal';
+export * from './designSystem';
 export * from '../../Modal/Examples/FullScreenModal';
 export * from '../../Modal/Examples/ModalPosition';
 export * from '../../Modal/Examples/PreventCloseModal';

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

@@ -1,5 +1,58 @@
+/**
+ * Modal Styles
+ *
+ * Defines the styles for the Modal 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 { Shape, Size } from './Modal.type';
+/**
+ * Container shape configurations for the Modal component
+ * Following the 4px grid system
+ */
 export declare const ContainerShapes: Record<Shape, ViewProps>;
+/**
+ * Overlay alignment configurations for the Modal component
+ */
 export declare const OverlayAlignments: Record<string, ViewProps>;
+/**
+ * Header icon size configurations for the Modal component
+ * Following the 4px grid system
+ */
 export declare const HeaderIconSizes: Record<Size, number>;
+/**
+ * Animation configurations for the Modal component
+ */
+export declare const ModalAnimations: {
+    enter: {
+        opacity: number[];
+        transform: string[];
+        transition: string;
+    };
+    exit: {
+        opacity: number[];
+        transform: string[];
+        transition: string;
+    };
+};
+/**
+ * Typography configurations for the Modal component
+ */
+export declare const ModalTypography: {
+    title: {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        color: string;
+    };
+    body: {
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        color: string;
+    };
+};

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

@@ -1,3 +1,9 @@
+/**
+ * Modal View Component
+ *
+ * Renders a modal dialog with various styles and states
+ * according to the design guidelines.
+ */
 import React from 'react';
 import { ViewProps } from 'app-studio';
 import { BodyProps, ContainerProps, FooterProps, HeaderProps } from '../Modal/Modal.props';

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

@@ -0,0 +1,164 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { LinkProps } from '../../Link/Link/Link.props';
+import { NavigationItem, NavigationMenuStyles, Orientation, Size, Variant } from './NavigationMenu.type';
+export interface NavigationMenuProps {
+    /**
+     * The items to display in the navigation menu (for data-driven approach)
+     */
+    items?: NavigationItem[];
+    /**
+     * The content of the navigation menu (for compound component pattern)
+     */
+    children?: React.ReactNode;
+    /**
+     * The orientation of the navigation menu
+     */
+    orientation?: Orientation;
+    /**
+     * The size of the navigation menu items
+     */
+    size?: Size;
+    /**
+     * The visual style variant of the navigation menu
+     */
+    variant?: Variant;
+    /**
+     * The ID of the initially active item
+     */
+    defaultActiveItemId?: string;
+    /**
+     * The IDs of the initially expanded items (for items with sub-items)
+     */
+    defaultExpandedItemIds?: string[];
+    /**
+     * Callback when an item is activated
+     */
+    onItemActivate?: (itemId: string) => void;
+    /**
+     * Custom styles for different parts of the navigation menu
+     */
+    views?: NavigationMenuStyles;
+    /**
+     * Additional props to be spread to the container element
+     */
+    [key: string]: any;
+}
+export interface NavigationMenuListProps {
+    /**
+     * The content of the navigation menu list
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styles for the list
+     */
+    views?: {
+        container?: ViewProps;
+    };
+}
+export interface NavigationMenuItemProps {
+    /**
+     * The navigation item data
+     */
+    item?: NavigationItem;
+    /**
+     * The unique value for the item (used for compound component pattern)
+     */
+    value?: string;
+    /**
+     * Whether the item is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * The content of the item (used for compound component pattern)
+     */
+    children?: React.ReactNode;
+    /**
+     * Custom styles for the item
+     */
+    views?: {
+        item?: ViewProps;
+        trigger?: ViewProps;
+        content?: ViewProps;
+        icon?: ViewProps;
+        indicator?: ViewProps;
+    };
+}
+export interface NavigationMenuTriggerProps {
+    /**
+     * The content of the navigation menu trigger
+     */
+    children: React.ReactNode | React.ReactElement;
+    /**
+     * The ID of the item this trigger belongs to
+     */
+    itemId: string;
+    /**
+     * Whether the item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Custom styles for the trigger
+     */
+    views?: {
+        container?: ViewProps;
+        icon?: ViewProps;
+        trigger?: ViewProps;
+        indicator?: ViewProps;
+    };
+}
+export interface NavigationMenuContentProps {
+    /**
+     * The content to be displayed
+     */
+    children: React.ReactNode;
+    /**
+     * The ID of the item this content belongs to
+     */
+    itemId: string;
+    /**
+     * Custom styles for the content
+     */
+    views?: {
+        container?: ViewProps;
+    };
+}
+export interface NavigationMenuLinkProps extends Omit<LinkProps, 'to'> {
+    /**
+     * The URL the link points to
+     */
+    href?: string;
+    /**
+     * The content of the link
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styles for the link
+     */
+    views?: {
+        container?: ViewProps;
+        icon?: ViewProps;
+    };
+}
+export interface NavigationMenuType extends React.FC<NavigationMenuProps> {
+    /**
+     * The list component for the navigation menu
+     */
+    List: React.FC<NavigationMenuListProps>;
+    /**
+     * The item component for the navigation menu
+     */
+    Item: React.FC<NavigationMenuItemProps>;
+    /**
+     * The trigger component for navigation menu items with sub-items
+     */
+    Trigger: React.FC<NavigationMenuTriggerProps>;
+    /**
+     * The content component for navigation menu items with sub-items
+     */
+    Content: React.FC<NavigationMenuContentProps>;
+    /**
+     * The link component for navigation menu items
+     */
+    Link: React.FC<NavigationMenuLinkProps>;
+}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const useNavigationMenuState: (defaultActiveItemId?: string | null, defaultExpandedItemIds?: string[]) => {
+    activeItemId: string | null;
+    setActiveItemId: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    expandedItemIds: string[];
+    toggleExpandedItem: (itemId: string) => void;
+    isItemExpanded: (itemId: string) => boolean;
+};

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

@@ -0,0 +1,59 @@
+/**
+ * NavigationMenu Styles
+ *
+ * Defines the styles for the NavigationMenu 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 { Orientation, Size, Variant } from './NavigationMenu.type';
+/**
+ * Size configurations for the NavigationMenu component
+ * Following the 4px grid system
+ */
+export declare const NavigationMenuSizes: Record<Size, ViewProps>;
+/**
+ * Variant styles for the NavigationMenu component
+ */
+export declare const NavigationMenuVariants: Record<Variant, ViewProps>;
+/**
+ * Orientation styles for the NavigationMenu component
+ */
+export declare const NavigationMenuOrientations: Record<Orientation, ViewProps>;
+/**
+ * State styles for the NavigationMenu items
+ */
+export declare const NavigationMenuItemStates: {
+    active: {
+        backgroundColor: string;
+        color: string;
+        fontWeight: string;
+        borderLeftWidth: number;
+        borderLeftStyle: "solid";
+        borderLeftColor: string;
+    };
+    hover: {
+        backgroundColor: string;
+        transition: string;
+    };
+    disabled: {
+        opacity: number;
+        cursor: string;
+    };
+};
+/**
+ * Icon styles for the NavigationMenu component
+ */
+export declare const NavigationMenuIconStyles: {
+    default: {
+        color: string;
+        transition: string;
+    };
+    active: {
+        color: string;
+        transition: string;
+    };
+};