@app-studio/web 0.8.74 → 0.8.76

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

@@ -1,11 +1,16 @@
 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
+     * The items to display in the navigation menu (for data-driven approach)
      */
-    items: NavigationItem[];
+    items?: NavigationItem[];
+    /**
+     * The content of the navigation menu (for compound component pattern)
+     */
+    children?: React.ReactNode;
     /**
      * The orientation of the navigation menu
      */
@@ -55,7 +60,19 @@ export interface NavigationMenuItemProps {
     /**
      * The navigation item data
      */
-    item: NavigationItem;
+    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
      */
@@ -71,7 +88,7 @@ export interface NavigationMenuTriggerProps {
     /**
      * The content of the navigation menu trigger
      */
-    children: React.ReactNode;
+    children: React.ReactNode | React.ReactElement;
     /**
      * The ID of the item this trigger belongs to
      */
@@ -106,6 +123,23 @@ export interface NavigationMenuContentProps {
         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
@@ -123,4 +157,8 @@ export interface NavigationMenuType extends React.FC<NavigationMenuProps> {
      * 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.style.d.ts

@@ -1,18 +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;
+    };
+};

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

@@ -7,11 +7,17 @@ export declare const NavigationMenuProvider: React.FC<{
 }>;
 export declare const useNavigationMenuContext: () => NavigationMenuContextType;
 export declare const NavigationMenuList: React.FC<NavigationMenuListProps>;
+export declare const useNavigationMenuItemContext: () => {
+    itemValue: string | null;
+    isDisabled: boolean;
+};
 export declare const NavigationMenuItem: React.FC<NavigationMenuItemProps>;
 export declare const NavigationMenuTrigger: React.FC<NavigationMenuTriggerProps>;
 export declare const NavigationMenuContent: React.FC<NavigationMenuContentProps>;
+import { NavigationMenuLinkProps } from './NavigationMenu.props';
+export declare const NavigationMenuLink: React.FC<NavigationMenuLinkProps>;
 export declare const NavigationMenuView: React.FC<{
-    items: NavigationItem[];
+    items?: NavigationItem[];
     orientation: Orientation;
     size: Size;
     variant: Variant;

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

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

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

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

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

@@ -1,4 +1,6 @@
 export * from './default';
+export * from './designSystem';
 export * from './horizontal';
 export * from './variants';
 export * from './sizes';
+export * from './compound';

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

@@ -0,0 +1,142 @@
+import { InputProps, Shadow, ViewProps } from 'app-studio';
+import { Elevation } from '../../../utils/elevation';
+import { Shape, Size, Variant } from '../../Input/Input.type';
+import { OTPInputStyles, OTPInputType } from './OTPInput.type';
+export interface OTPInputProps extends Omit<InputProps, 'size'> {
+    /**
+     * Unique identifier for the OTP input
+     */
+    id?: string;
+    /**
+     * Error state for validation
+     */
+    error?: any;
+    /**
+     * Helper text displayed below the input
+     */
+    helperText?: string;
+    /**
+     * Name attribute for form submission
+     */
+    name?: string;
+    /**
+     * Label text for the input
+     */
+    label?: string;
+    /**
+     * Number of OTP input fields
+     */
+    length?: number;
+    /**
+     * Placeholder text for each input field
+     */
+    placeholder?: string;
+    /**
+     * Whether the input is read-only
+     */
+    isReadOnly?: boolean;
+    /**
+     * Whether the input is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the first input should be auto-focused
+     */
+    isAutoFocus?: boolean;
+    /**
+     * The type of input to display
+     * - 'text': Regular text input (default)
+     * - 'password': Masked input for secure entry
+     * - 'number': Numeric input (uses text with inputMode="numeric" for better UX)
+     */
+    type?: OTPInputType;
+    /**
+     * Callback fired when all input boxes have been filled
+     * Receives the complete OTP string
+     */
+    onComplete?: (value: string) => void;
+    /**
+     * Callback when the OTP value changes
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Callback when the OTP text changes
+     */
+    onChangeText?: (value: string) => void;
+    /**
+     * Callback when an input field loses focus
+     */
+    onBlur?: (value: any) => void;
+    /**
+     * Callback when an input field is clicked
+     */
+    onClick?: () => void;
+    /**
+     * Callback when an input field gains focus
+     */
+    onFocus?: () => void;
+    /**
+     * Pattern for input validation
+     * Can be a RegExp or a string pattern
+     */
+    pattern?: RegExp | string;
+    /**
+     * Function to transform pasted content
+     */
+    pasteTransformer?: (pasted: string) => string;
+    /**
+     * Specific values that the OTP input can take
+     * Used for step-based OTP input
+     */
+    stepValues?: number[];
+    /**
+     * Size of the input fields
+     */
+    size?: Size;
+    /**
+     * Shadow effect for the input fields
+     */
+    shadow?: Shadow | Elevation | ViewProps;
+    /**
+     * Shape of the input fields
+     */
+    shape?: Shape;
+    /**
+     * Variant of the input fields
+     */
+    variant?: Variant;
+    /**
+     * Gap between input fields
+     */
+    gap?: number;
+    /**
+     * Custom styling for the component
+     */
+    views?: OTPInputStyles;
+}
+export interface OTPInputViewProps extends OTPInputProps {
+    /**
+     * Current OTP value
+     */
+    value: string;
+    /**
+     * Whether the input is focused
+     */
+    isFocused: boolean;
+    /**
+     * Whether the input is hovered
+     */
+    isHovered: boolean;
+    /**
+     * Setter for the OTP value
+     */
+    setValue: (value: string) => void;
+    /**
+     * Setter for the focused state
+     */
+    setIsFocused: (isFocused: boolean) => void;
+    /**
+     * Setter for the hovered state
+     */
+    setIsHovered: (isHovered: boolean) => void;
+}

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

@@ -0,0 +1,22 @@
+import { ClipboardEvent, KeyboardEvent, ChangeEvent } from 'react';
+import { OTPInputProps } from './OTPInput.props';
+export declare const useOTPInputState: ({ value: controlledValue, defaultValue, length, onChange, onChangeText, onComplete, pattern, stepValues, pasteTransformer, }: OTPInputProps) => {
+    value: string;
+    setValue: (newValue: string) => void;
+    isFocused: boolean;
+    setIsFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    isHovered: boolean;
+    setIsHovered: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    inputRef: import("react").RefObject<HTMLInputElement>;
+    containerRef: import("react").RefObject<HTMLDivElement>;
+    mirrorSelectionStart: number | null;
+    mirrorSelectionEnd: number | null;
+    setMirrorSelectionStart: import("react").Dispatch<import("react").SetStateAction<number | null>>;
+    setMirrorSelectionEnd: import("react").Dispatch<import("react").SetStateAction<number | null>>;
+    setInputRef: (ref: HTMLInputElement | null) => void;
+    handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    handleKeyDown: (_: KeyboardEvent<HTMLInputElement>) => void;
+    handlePaste: (e: ClipboardEvent<HTMLInputElement>) => void;
+};

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

@@ -0,0 +1,16 @@
+import { ViewProps } from 'app-studio';
+/**
+ * Type of input for OTP fields
+ */
+export declare type OTPInputType = 'text' | 'password' | 'number';
+/**
+ * Styles for different parts of the OTP input component
+ */
+export declare type OTPInputStyles = {
+    container?: ViewProps;
+    input?: ViewProps;
+    box?: ViewProps;
+    text?: ViewProps;
+    label?: ViewProps;
+    helperText?: ViewProps;
+};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { OTPInputViewProps } from './OTPInput.props';
+export declare const OTPInputContext: React.Context<{
+    slots: Array<{
+        char: string | null;
+        placeholderChar: string | null;
+        isActive: boolean;
+        hasFakeCaret: boolean;
+    }>;
+    isFocused: boolean;
+    isHovering: boolean;
+}>;
+declare const OTPInputView: React.FC<OTPInputViewProps & {
+    setInputRef: (ref: HTMLInputElement | null) => void;
+    inputRef: React.RefObject<HTMLInputElement>;
+    containerRef: React.RefObject<HTMLDivElement>;
+    mirrorSelectionStart: number | null;
+    mirrorSelectionEnd: number | null;
+    setMirrorSelectionStart: (value: number | null) => void;
+    setMirrorSelectionEnd: (value: number | null) => void;
+    handlePaste: (e: React.ClipboardEvent<HTMLInputElement>) => void;
+    handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    stepValues?: number[];
+}>;
+export default OTPInputView;

package/dist/components/OTPInput/OTPInput/sync-timeouts.d.ts

@@ -0,0 +1 @@
+export declare function syncTimeouts(cb: (...args: any[]) => unknown): any[];

package/dist/components/OTPInput/OTPInput.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { OTPInputProps } from './OTPInput/OTPInput.props';
+export declare const OTPInput: React.FC<OTPInputProps>;

package/dist/components/OTPInput/examples/Default.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const DefaultOTPInput: () => React.JSX.Element;
+export declare const CustomizedOTPInput: () => React.JSX.Element;
+export declare const OTPInputWithLabel: () => React.JSX.Element;

package/dist/components/OTPInput/examples/OnComplete.d.ts

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

package/dist/components/OTPInput/examples/PasswordOTP.d.ts

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

package/dist/components/OTPInput/examples/StepValues.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const StepValuesOTPInput: () => React.JSX.Element;
+export declare const FormikStepValuesOTPInput: () => null;

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

@@ -0,0 +1,4 @@
+export * from './Default';
+export * from './PasswordOTP';
+export * from './StepValues';
+export * from './OnComplete';

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

@@ -0,0 +1,60 @@
+import { ViewProps } from 'app-studio';
+import { PaginationStyles, PageSizeOption, Size, Variant, Shape } from './Pagination.type';
+export interface PaginationProps extends ViewProps {
+    /**
+     * The current page number (1-based)
+     */
+    currentPage: number;
+    /**
+     * The total number of pages
+     */
+    totalPages: number;
+    /**
+     * Callback function when page changes
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * The number of items per page
+     */
+    pageSize?: number;
+    /**
+     * Available page size options
+     */
+    pageSizeOptions?: PageSizeOption[];
+    /**
+     * Callback function when page size changes
+     */
+    onPageSizeChange?: (pageSize: number) => void;
+    /**
+     * Whether to show the page size selector
+     */
+    showPageSizeSelector?: boolean;
+    /**
+     * Whether to show the page information text (e.g., "Page 1 of 10")
+     */
+    showPageInfo?: boolean;
+    /**
+     * The maximum number of page buttons to show
+     */
+    maxPageButtons?: number;
+    /**
+     * Whether to show the first and last page buttons
+     */
+    showFirstLastButtons?: boolean;
+    /**
+     * The size of the pagination component
+     */
+    size?: Size;
+    /**
+     * The visual style variant of the pagination component
+     */
+    variant?: Variant;
+    /**
+     * The shape of the pagination buttons
+     */
+    shape?: Shape;
+    /**
+     * Custom styles for different parts of the pagination component
+     */
+    views?: PaginationStyles;
+}

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

@@ -0,0 +1,3 @@
+export declare const usePaginationState: (currentPage: number, totalPages: number, maxPageButtons: number) => {
+    visiblePageNumbers: (string | number)[];
+};

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

@@ -0,0 +1,7 @@
+import { ViewProps } from 'app-studio';
+import { Size, Variant, Shape } from './Pagination.type';
+export declare const PaginationSizes: Record<Size, ViewProps>;
+export declare const PaginationVariants: Record<Variant, ViewProps>;
+export declare const PaginationShapes: Record<Shape, ViewProps>;
+export declare const ActivePageButtonStyles: ViewProps;
+export declare const DisabledButtonStyles: ViewProps;