@app-studio/web 0.9.6 → 0.9.8

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

@@ -31,6 +31,33 @@ export interface WallProps extends ViewProps {
     cols?: number;
     squareSize?: number;
 }
+/**
+ * Particles component props
+ */
+export interface ParticlesProps extends Omit<ViewProps, 'colors'> {
+    count?: number;
+    colors?: string[];
+    speed?: 'slow' | 'medium' | 'fast';
+    shapes?: ('circle' | 'square' | 'triangle')[];
+}
+/**
+ * Grid component props
+ */
+export interface GridProps extends ViewProps {
+    gridSize?: number;
+    lineColor?: string;
+    pulseColor?: string;
+    animationSpeed?: 'slow' | 'medium' | 'fast';
+}
+/**
+ * Ripples component props
+ */
+export interface RipplesProps extends Omit<ViewProps, 'colors'> {
+    rippleCount?: number;
+    colors?: string[];
+    maxSize?: number;
+    frequency?: number;
+}
 /**
  * Background styles for customization
  */

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BackgroundProps, AuroraBackgroundProps, MeteorsProps, WallProps } from './Background.props';
+import { BackgroundProps, AuroraBackgroundProps, MeteorsProps, WallProps, ParticlesProps, GridProps, RipplesProps } from './Background.props';
 /**
  * Main Background View Component with compound pattern
  */
@@ -7,6 +7,9 @@ interface BackgroundViewComponent extends React.FC<BackgroundProps> {
     Aurora: React.FC<AuroraBackgroundProps>;
     Meteors: React.FC<MeteorsProps>;
     Wall: React.FC<WallProps>;
+    Particles: React.FC<ParticlesProps>;
+    Grid: React.FC<GridProps>;
+    Ripples: React.FC<RipplesProps>;
 }
 export declare const BackgroundView: BackgroundViewComponent;
 export {};

package/dist/components/Background/Background.d.ts

@@ -10,4 +10,7 @@ export declare const Background: React.ForwardRefExoticComponent<Pick<Background
     Aurora: React.FC<import("./Background/Background.props").AuroraBackgroundProps>;
     Meteors: React.FC<import("./Background/Background.props").MeteorsProps>;
     Wall: React.FC<import("./Background/Background.props").WallProps>;
+    Particles: React.FC<import("./Background/Background.props").ParticlesProps>;
+    Grid: React.FC<import("./Background/Background.props").GridProps>;
+    Ripples: React.FC<import("./Background/Background.props").RipplesProps>;
 };

package/dist/components/Background/examples/grid.d.ts

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

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

@@ -2,4 +2,7 @@ export { DefaultDemo } from './default';
 export { AuroraDemo } from './aurora';
 export { MeteorsDemo } from './meteors';
 export { WallDemo } from './wall';
+export { ParticlesDemo } from './particles';
+export { GridDemo } from './grid';
+export { RipplesDemo } from './ripples';
 export { CombinedEffectsDemo } from './combinedEffects';

package/dist/components/Background/examples/particles.d.ts

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

package/dist/components/Background/examples/ripples.d.ts

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

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

@@ -1,3 +1,3 @@
 export { Background } from './Background';
-export type { BackgroundProps, AuroraBackgroundProps, MeteorsProps, BackgroundStyles, } from './Background/Background.props';
+export type { BackgroundProps, AuroraBackgroundProps, MeteorsProps, WallProps, ParticlesProps, GridProps, RipplesProps, BackgroundStyles, } from './Background/Background.props';
 export type { BackgroundEffect, AuroraDirection, MeteorTiming, BorderAnimationStyles, StrokeAnimationStyles, BackgroundContextType, } from './Background/Background.type';

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

@@ -88,6 +88,28 @@ export interface ChatInputProps extends ViewProps {
      * Callback function when a prompt example is selected
      */
     onPromptExampleSelect?: (example: PromptExample) => void;
+    /**
+     * Data for mention auto-completion
+     */
+    mentionData?: Array<{
+        id: string;
+        name: string;
+        avatar?: string;
+        description?: string;
+    }>;
+    /**
+     * Trigger character for mentions (default: '@')
+     */
+    mentionTrigger?: string;
+    /**
+     * Callback function when a mention is selected
+     */
+    onMentionSelect?: (mention: {
+        id: string;
+        name: string;
+        avatar?: string;
+        description?: string;
+    }) => void;
     /**
      * Whether to show the reference image button
      */
@@ -145,6 +167,8 @@ export interface ChatInputViewProps extends ChatInputProps {
      * Whether files are being uploaded
      */
     isUploading: boolean;
+    leftButtons?: React.ReactNode;
+    rightButtons?: React.ReactNode;
     /**
      * Whether the user is dragging files over the input
      */

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

@@ -6,7 +6,7 @@ export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
  * Shape options for the ChatInput component
  */
-export declare type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
+export declare type Shape = 'default' | 'sharp' | 'rounded';
 /**
  * Variant options for the ChatInput component
  */

package/dist/components/ChatInput/EditableInput.d.ts

@@ -1,14 +1,37 @@
 import React from 'react';
+interface Suggestion {
+    id: string;
+    text: string;
+    description?: string;
+}
+interface MentionData {
+    id: string;
+    name: string;
+    avatar?: string;
+    description?: string;
+}
 interface EditableInputProps {
     value: string;
     onChange: (value: string) => void;
-    onSubmit: (e: React.FormEvent) => void;
     placeholder?: string;
     disabled?: boolean;
     autoFocus?: boolean;
+    suggestions?: Suggestion[];
+    onSuggestionSelect?: (suggestion: Suggestion) => void;
+    showSuggestions?: boolean;
+    mentionData?: MentionData[];
+    mentionTrigger?: string;
+    onMentionSelect?: (mention: MentionData) => void;
+    maxHeight?: string;
+    minHeight?: string;
     views?: {
         container?: any;
         input?: any;
+        placeholder?: any;
+        suggestionsContainer?: any;
+        suggestionItem?: any;
+        mentionContainer?: any;
+        mentionItem?: any;
     };
 }
 export declare const EditableInput: React.ForwardRefExoticComponent<EditableInputProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ChatInput/examples/EnhancedEditableInput.d.ts

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

package/dist/components/ChatInput/examples/MentionEditableInput.d.ts

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

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

@@ -1,5 +1,5 @@
 import { ViewProps } from 'app-studio';
-import { Size, Variant, Position, Alignment } from './ContextMenu.type';
+import { Size, Variant } from './ContextMenu.type';
 export declare const ContextMenuSizes: Record<Size, ViewProps>;
 export declare const ContextMenuVariants: Record<Variant, ViewProps>;
 export declare const ContextMenuItemStates: {
@@ -14,7 +14,3 @@ export declare const ContextMenuItemStates: {
         cursor: string;
     };
 };
-export declare const calculateMenuPosition: (x: number, y: number, menuWidth: number, menuHeight: number, windowWidth: number, windowHeight: number, side?: Position, align?: Alignment) => {
-    x: number;
-    y: number;
-};

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

@@ -20,6 +20,7 @@ export interface DropdownMenuContextType {
     setActiveSubmenuId: (id: string | null) => void;
     size: Size;
     variant: Variant;
+    triggerRef: React.RefObject<HTMLElement>;
 }
 export interface DropdownMenuStyles {
     container?: ViewProps;

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

@@ -0,0 +1,190 @@
+import React from 'react';
+import { InputProps, Shadow, ViewProps } from 'app-studio';
+import { Elevation } from '../../../../utils/elevation';
+import { Shape, Size, TagInputStyles, Variant, Tag, TagSeparator } from './TagInput.type';
+/**
+ * Props interface for the TagInput component
+ */
+export interface TagInputProps extends Omit<InputProps, 'size' | 'value' | 'onChange'> {
+    /**
+     * Unique identifier for the TagInput
+     */
+    id?: string;
+    /**
+     * Name attribute for form submission
+     */
+    name?: string;
+    /**
+     * Label text for the input field
+     */
+    label?: string;
+    /**
+     * Helper text displayed below the input
+     */
+    helperText?: string;
+    /**
+     * Error message or boolean indicating error state
+     */
+    error?: string | boolean;
+    /**
+     * Placeholder text shown when input is empty
+     */
+    placeholder?: string;
+    /**
+     * Array of tags
+     */
+    tags?: string[];
+    /**
+     * Default tags for uncontrolled component
+     */
+    defaultTags?: string[];
+    /**
+     * Callback fired when tags change
+     */
+    onTagsChange?: (tags: string[]) => void;
+    /**
+     * Callback fired when a tag is added
+     */
+    onTagAdd?: (tag: string) => void;
+    /**
+     * Callback fired when a tag is removed
+     */
+    onTagRemove?: (tag: string, index: number) => void;
+    /**
+     * Maximum number of tags allowed
+     */
+    maxTags?: number;
+    /**
+     * Minimum length for each tag
+     */
+    minTagLength?: number;
+    /**
+     * Maximum length for each tag
+     */
+    maxTagLength?: number;
+    /**
+     * Whether to allow duplicate tags
+     */
+    allowDuplicates?: boolean;
+    /**
+     * Characters that trigger tag creation
+     */
+    separators?: TagSeparator[];
+    /**
+     * Whether the input is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the input is read-only
+     */
+    isReadOnly?: boolean;
+    /**
+     * Whether to auto-focus the input
+     */
+    isAutoFocus?: boolean;
+    /**
+     * Whether tags can be removed
+     */
+    isRemovable?: boolean;
+    /**
+     * Size of the component
+     */
+    size?: Size;
+    /**
+     * Shape/border radius of the component
+     */
+    shape?: Shape;
+    /**
+     * Visual variant of the component
+     */
+    variant?: Variant;
+    /**
+     * Shadow properties
+     */
+    shadow?: Shadow | Elevation | ViewProps;
+    /**
+     * Custom styling for different parts of the component
+     */
+    views?: TagInputStyles;
+    /**
+     * React node to render on the left side
+     */
+    left?: React.ReactNode;
+    /**
+     * React node to render on the right side
+     */
+    right?: React.ReactNode;
+    /**
+     * Callback fired when input gains focus
+     */
+    onFocus?: () => void;
+    /**
+     * Callback fired when input loses focus
+     */
+    onBlur?: () => void;
+    /**
+     * Callback fired when input is clicked
+     */
+    onClick?: () => void;
+}
+/**
+ * Props interface for the TagInput view component
+ */
+export interface TagInputViewProps extends Omit<TagInputProps, 'tags'> {
+    /**
+     * Current input value for new tag
+     */
+    inputValue?: string;
+    /**
+     * Function to set input value
+     */
+    setInputValue?: (value: string) => void;
+    /**
+     * Array of tag objects (internal representation)
+     */
+    tags?: Tag[];
+    /**
+     * Function to set tags
+     */
+    setTags?: (tags: Tag[]) => void;
+    /**
+     * Whether the input is currently focused
+     */
+    isFocused?: boolean;
+    /**
+     * Function to set focus state
+     */
+    setIsFocused?: (focused: boolean) => void;
+    /**
+     * Whether the input is currently hovered
+     */
+    isHovered?: boolean;
+    /**
+     * Function to set hover state
+     */
+    setIsHovered?: (hovered: boolean) => void;
+    /**
+     * Function to add a tag
+     */
+    addTag?: (tag: string) => void;
+    /**
+     * Function to remove a tag
+     */
+    removeTag?: (index: number) => void;
+    /**
+     * Function to handle input key events
+     */
+    handleKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    /**
+     * Function to handle input change
+     */
+    handleInputChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Function to handle input focus
+     */
+    handleFocus?: () => void;
+    /**
+     * Function to handle input blur
+     */
+    handleBlur?: () => void;
+}

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { TagInputProps } from './TagInput.props';
+import { Tag } from './TagInput.type';
+/**
+ * Custom hook for managing TagInput state
+ */
+export declare const useTagInputState: (props: TagInputProps) => {
+    inputValue: string;
+    setInputValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    tags: {
+        id: string;
+        value: string;
+    }[];
+    setTags: import("react").Dispatch<import("react").SetStateAction<Tag[]>>;
+    isFocused: boolean;
+    setIsFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    isHovered: boolean;
+    setIsHovered: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    addTag: (tag: string) => void;
+    removeTag: (index: number) => void;
+    handleInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    handleKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    handleFocus: () => void;
+    handleBlur: () => void;
+    validateTag: (tag: string) => boolean;
+};

package/dist/components/Form/TagInput/TagInput/TagInput.type.d.ts

@@ -0,0 +1,79 @@
+import { ViewProps } from 'app-studio';
+/**
+ * Size options for the TagInput component
+ */
+export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * Shape options for the TagInput component
+ */
+export declare type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
+/**
+ * Variant options for the TagInput component
+ */
+export declare type Variant = 'outline' | 'default' | 'none';
+/**
+ * Tag separator options
+ */
+export declare type TagSeparator = 'enter' | 'comma' | 'space' | 'tab';
+/**
+ * Individual tag object
+ */
+export interface Tag {
+    /**
+     * Unique identifier for the tag
+     */
+    id: string;
+    /**
+     * The tag value/text
+     */
+    value: string;
+}
+/**
+ * Styles for different parts of the TagInput component
+ */
+export declare type TagInputStyles = {
+    /**
+     * Styles for the main input container
+     */
+    inputContainer?: ViewProps;
+    /**
+     * Styles for the tags container
+     */
+    tagsContainer?: ViewProps;
+    /**
+     * Styles for individual tag chips
+     */
+    tag?: ViewProps;
+    /**
+     * Styles for tag text
+     */
+    tagText?: ViewProps;
+    /**
+     * Styles for tag remove button
+     */
+    tagRemove?: ViewProps;
+    /**
+     * Styles for the input field
+     */
+    input?: ViewProps;
+    /**
+     * Styles for the label
+     */
+    label?: ViewProps;
+    /**
+     * Styles for helper text
+     */
+    helperText?: ViewProps;
+    /**
+     * Styles for error text
+     */
+    error?: ViewProps;
+    /**
+     * Styles for the container
+     */
+    container?: ViewProps;
+    /**
+     * Styles for placeholder text
+     */
+    placeholder?: ViewProps;
+};

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

@@ -0,0 +1,13 @@
+/**
+ * TagInput View Component
+ *
+ * Renders a tags input field with chips for each tag
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { TagInputViewProps } from './TagInput.props';
+/**
+ * Main TagInput view component
+ */
+declare const TagInputView: React.FC<TagInputViewProps>;
+export default TagInputView;

package/dist/components/Form/TagInput/TagInput/index.d.ts

@@ -0,0 +1,4 @@
+export * from './TagInput.props';
+export * from './TagInput.type';
+export * from './TagInput.state';
+export { default as TagInputView } from './TagInput.view';

package/dist/components/Form/TagInput/TagInput.d.ts

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

package/dist/components/Form/TagInput/examples/Default.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+/**
+ * Default TagInput example
+ */
+export declare const DefaultTagInput: () => React.JSX.Element;
+/**
+ * TagInput with custom separators
+ */
+export declare const CustomSeparatorsTagInput: () => React.JSX.Element;
+/**
+ * TagInput with maximum limit
+ */
+export declare const LimitedTagInput: () => React.JSX.Element;
+/**
+ * TagInput with validation
+ */
+export declare const ValidatedTagInput: () => React.JSX.Element;
+/**
+ * Disabled and ReadOnly states
+ */
+export declare const DisabledTagInput: () => React.JSX.Element;
+/**
+ * Custom styled TagInput
+ */
+export declare const StyledTagInput: () => React.JSX.Element;

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

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

package/dist/components/Form/TagInput/index.d.ts

@@ -0,0 +1,2 @@
+export { TagInput } from './TagInput';
+export type { TagInputProps } from './TagInput/TagInput.props';

package/dist/components/Formik/Formik.TagInput.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TagInputProps } from '../Form/TagInput/TagInput/TagInput.props';
+/**
+ * TagInput allows users to add and manage a list of tags.
+ * Integrated with Formik for form validation and state management.
+ */
+export declare const FormikTagInput: React.FC<TagInputProps>;

package/dist/components/Formik/examples/FormikTagInput.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+/**
+ * Basic Formik TagInput example
+ */
+export declare const FormikTagInputExample: () => React.JSX.Element;
+/**
+ * Advanced Formik TagInput example with custom styling
+ */
+export declare const FormikTagInputAdvanced: () => React.JSX.Element;

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

@@ -3,6 +3,7 @@ export * from './FormikColorInput';
 export * from './FormikComboBox';
 export * from './FormikCountryPicker';
 export * from './FormikDatePicker';
+export * from './FormikTagInput';
 export * from './FormikOTPInput';
 export * from './FormikPassword';
 export * from './FormikSelect';

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

@@ -6,4 +6,4 @@
  */
 import React from 'react';
 import { ContainerProps } from './FieldContainer/FieldContainer.props';
-export declare const FieldContainer: React.FC<ContainerProps>;
+export declare const FieldContainer: React.ForwardRefExoticComponent<Pick<ContainerProps, string | number> & React.RefAttributes<HTMLDivElement>>;

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

@@ -22,6 +22,7 @@ export interface MenubarContextType {
     orientation: Orientation;
     size: Size;
     variant: Variant;
+    triggerRefs: React.MutableRefObject<Record<string, HTMLElement | null>>;
 }
 export interface MenubarStyles {
     container?: ViewProps;

package/dist/components/index.d.ts

@@ -21,6 +21,7 @@ export * from './Form/CountryPicker/CountryPicker';
 export * from './Form/DatePicker/DatePicker';
 export * from './Form/Password/Password';
 export * from './Form/ComboBox/ComboBox';
+export * from './Form/TagInput/TagInput';
 export * from './OTPInput/OTPInput';
 export * from './Formik';
 export * from './Slider';

package/dist/pages/positioning-test.page.d.ts

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

package/dist/pages/tags.page.d.ts

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