@app-studio/web 0.8.74 → 0.8.76

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

@@ -0,0 +1,37 @@
+/**
+ * Gradient Types
+ *
+ * Defines the types for the Gradient component following the design guidelines.
+ */
+import { ViewProps } from 'app-studio';
+/**
+ * Gradient type - linear or radial
+ */
+export declare type GradientType = 'linear' | 'radial' | 'conic';
+/**
+ * Direction for linear gradients
+ * Can be a predefined direction or a custom angle in degrees
+ */
+export declare type LinearDirection = 'to-right' | 'to-left' | 'to-bottom' | 'to-top' | 'to-top-right' | 'to-top-left' | 'to-bottom-right' | 'to-bottom-left' | string;
+/**
+ * Shape for radial gradients
+ */
+export declare type RadialShape = 'circle' | 'ellipse';
+/**
+ * Position for radial gradients
+ */
+export declare type RadialPosition = 'center' | 'top' | 'right' | 'bottom' | 'left' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | string;
+/**
+ * Color stop for gradients
+ */
+export interface ColorStop {
+    color: string;
+    position?: string | number;
+}
+/**
+ * Styles for the Gradient component
+ */
+export interface GradientStyles {
+    container?: ViewProps;
+    content?: ViewProps;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * Gradient View Component
+ *
+ * Renders a gradient with various styles and states
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { GradientProps } from './Gradient.props';
+export declare const GradientView: React.FC<GradientProps>;

package/dist/components/Gradient/Gradient.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Gradient Component
+ *
+ * A component for creating and displaying various types of gradients
+ * following the design system guidelines.
+ */
+import React from 'react';
+import { GradientProps } from './Gradient/Gradient.props';
+/**
+ * Gradient Component
+ *
+ * @example
+ * // Basic linear gradient
+ * <Gradient from="blue.500" to="purple.500" height="200px" width="100%" />
+ *
+ * @example
+ * // Radial gradient with content
+ * <Gradient
+ *   type="radial"
+ *   colors={[
+ *     { color: 'red.500', position: '0%' },
+ *     { color: 'orange.500', position: '50%' },
+ *     { color: 'yellow.500', position: '100%' }
+ *   ]}
+ *   height="200px"
+ * >
+ *   <Text color="white">Content inside gradient</Text>
+ * </Gradient>
+ */
+export declare const Gradient: React.FC<GradientProps>;

package/dist/components/Gradient/examples/animated.d.ts

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

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

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

package/dist/components/Gradient/examples/designSystem.d.ts

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

package/dist/components/Gradient/examples/directions.d.ts

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

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

@@ -0,0 +1,7 @@
+export * from './default';
+export * from './types';
+export * from './directions';
+export * from './multicolor';
+export * from './animated';
+export * from './withContent';
+export * from './designSystem';

package/dist/components/Gradient/examples/multicolor.d.ts

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

package/dist/components/Gradient/examples/types.d.ts

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

package/dist/components/Gradient/examples/withContent.d.ts

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

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

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

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

@@ -12,6 +12,16 @@ export interface HoverCardProps {
         container?: ViewProps;
         content?: ViewProps;
     };
+    /**
+     * Delay in milliseconds before the card opens on hover
+     * @default 200
+     */
+    openDelay?: number;
+    /**
+     * Delay in milliseconds before the card closes after hover stops
+     * @default 300
+     */
+    closeDelay?: number;
 }
 export interface HoverCardTriggerProps {
     /**
@@ -24,6 +34,12 @@ export interface HoverCardTriggerProps {
     views?: {
         container?: ViewProps;
     };
+    /**
+     * When true, the trigger will be rendered as a child element instead of a wrapper
+     * Child must accept forwarded ref and spread props
+     * @default false
+     */
+    asChild?: boolean;
     /**
      * Additional props to be spread to the trigger element
      */
@@ -48,6 +64,11 @@ export interface HoverCardContentProps {
      * The alignment of the content relative to the trigger
      */
     align?: 'start' | 'center' | 'end';
+    /**
+     * Distance in pixels between the trigger and the content
+     * @default 8
+     */
+    sideOffset?: number;
     /**
      * Additional props to be spread to the content element
      */

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

@@ -1,5 +1,12 @@
 /// <reference types="react" />
-export declare const useHoverCardState: () => {
+import { HoverCardProps } from './HoverCard.props';
+export declare const useHoverCardState: ({ openDelay, closeDelay, }?: Pick<HoverCardProps, 'openDelay' | 'closeDelay'>) => {
     isOpen: boolean;
-    setIsOpen: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    openCard: () => void;
+    closeCard: () => void;
+    cancelCloseTimer: () => void;
+    triggerRef: import("react").RefObject<HTMLDivElement>;
+    contentRef: import("react").RefObject<HTMLDivElement>;
+    contentId: string;
+    triggerId: string;
 };

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

@@ -1,3 +1,5 @@
 import { ViewProps } from 'app-studio';
+import { CSSProperties } from 'react';
 import { Alignment, Side } from './HoverCard.type';
-export declare const ContentPositions: Record<Side, (align: Alignment) => ViewProps>;
+export declare const ContentPositions: Record<Side, (align: Alignment, sideOffset?: number) => ViewProps>;
+export declare const getContentPositionStyles: (triggerRect: DOMRect | null, side?: Side, align?: Alignment, sideOffset?: number) => CSSProperties;

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

@@ -1,6 +1,13 @@
+/// <reference types="react" />
 export declare type Side = 'top' | 'right' | 'bottom' | 'left';
 export declare type Alignment = 'start' | 'center' | 'end';
 export interface HoverCardContextType {
     isOpen: boolean;
-    setIsOpen: (isOpen: boolean) => void;
+    openCard: () => void;
+    closeCard: () => void;
+    cancelCloseTimer: () => void;
+    triggerRef: React.RefObject<HTMLDivElement>;
+    contentRef: React.RefObject<HTMLDivElement>;
+    contentId: string;
+    triggerId: string;
 }

package/dist/components/HoverCard/examples/delays.d.ts

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

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

@@ -1 +1,2 @@
 export * from './default';
+export * from './delays';

package/dist/components/Icon/Icon.d.ts

@@ -80,3 +80,5 @@ export declare const ZoomOutIcon: React.FC<IconProps>;
 export declare const TextIcon: React.FC<IconProps>;
 export declare const ShapeIcon: React.FC<IconProps>;
 export declare const RotateIcon: React.FC<IconProps>;
+export declare const DocumentIcon: React.FC<IconProps>;
+export declare const ChartIcon: React.FC<IconProps>;

package/dist/components/{Layout/Input → Input}/FieldContainer/FieldContainer/FieldContainer.props.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextFieldStyles } from '../../../../Layout/configs/Input.type';
+import { TextFieldStyles } from '../../Input.type';
 import { ViewProps } from 'app-studio';
 export interface ContainerProps extends ViewProps {
     /**

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

@@ -0,0 +1,9 @@
+/**
+ * FieldContainer Component
+ *
+ * Renders a container for a form field with helper text and error handling
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { ContainerProps } from './FieldContainer/FieldContainer.props';
+export declare const FieldContainer: React.FC<ContainerProps>;

package/dist/components/{Layout/Input → Input}/FieldContent/FieldContent/FieldContent.props.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Shape, Size, TextFieldStyles, Variant } from '../../../../Layout/configs/Input.type';
-import { Elevation } from '../../../../../utils/elevation';
-import { Shadow, ViewProps } from 'app-studio';
+import { Shape, Size, TextFieldStyles, Variant } from '../../Input.type';
+import { ViewProps } from 'app-studio';
 export interface ContentProps extends Omit<ViewProps, 'size'> {
     /**
      * The color of the Content component.
@@ -18,7 +17,7 @@ export interface ContentProps extends Omit<ViewProps, 'size'> {
     /**
      * Indicates whether the field has label
      */
-    isWithLabel?: boolean;
+    showLabel?: boolean;
     /**
      * Determines whether the Content component is disabled. Default value is false.
      */
@@ -59,8 +58,4 @@ export interface ContentProps extends Omit<ViewProps, 'size'> {
      * CSS styles applied to the Content component. Default value is an empty object.
      */
     views?: TextFieldStyles;
-    /**
-     * The shadow effect applied to the Content component.
-     */
-    shadow?: Shadow | Elevation | ViewProps;
 }

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

@@ -0,0 +1,9 @@
+/**
+ * FieldContent Component
+ *
+ * Renders the content area of a form field with various styles and states
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { ContentProps } from './FieldContent/FieldContent.props';
+export declare const FieldContent: React.FC<ContentProps>;

package/dist/components/{Layout/Input → Input}/FieldLabel/FieldLabel/FieldLabel.props.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Size } from '../../../../Layout/configs/Input.type';
+import { Size } from '../../Input.type';
 import { ViewProps } from 'app-studio';
 export interface LabelProps extends Omit<ViewProps, 'size'> {
     /**

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

@@ -0,0 +1,9 @@
+/**
+ * FieldLabel Component
+ *
+ * Renders a label for a form field with various styles and states
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { LabelProps } from './FieldLabel/FieldLabel.props';
+export declare const FieldLabel: React.FC<LabelProps>;

package/dist/components/{Layout/Input → Input}/FieldLayout/FieldLayout/FieldLayout.props.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Size, TextFieldStyles } from '../../../../Layout/configs/Input.type';
+import { Size, TextFieldStyles } from '../../Input.type';
 import { ViewProps } from 'app-studio';
 export interface FieldProps extends Omit<ViewProps, 'size'> {
     /**

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

@@ -0,0 +1,9 @@
+/**
+ * FieldWrapper Component
+ *
+ * Renders a wrapper for form field content with appropriate styling
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { WrapperFieldProps } from './FieldWrapper.props';
+export declare const FieldWrapper: React.FC<WrapperFieldProps>;

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

@@ -0,0 +1,9 @@
+/**
+ * HelperText Component
+ *
+ * Renders helper text for form fields with appropriate styling
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { HelperTextProps } from './HelperText.props';
+export declare const HelperText: React.FC<HelperTextProps>;

package/dist/components/{Layout/Input → Input}/HelperText/HelperText.props.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TextFieldStyles } from '../../../Layout/configs/Input.type';
+import { TextFieldStyles } from '../Input.type';
 import { ViewProps } from 'app-studio';
 export interface HelperTextProps extends ViewProps {
     /**

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;
+}