@app-studio/web 0.9.4 → 0.9.6

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

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import { ViewProps } from 'app-studio';
+/**
+ * Base Background component props
+ */
+export interface BackgroundProps extends ViewProps {
+    children?: ReactNode;
+    views?: {
+        container?: ViewProps;
+        content?: ViewProps;
+    };
+    themeMode?: 'light' | 'dark';
+}
+/**
+ * Aurora Background component props
+ */
+export interface AuroraBackgroundProps extends BackgroundProps {
+    showRadialGradient?: boolean;
+}
+/**
+ * Meteors component props
+ */
+export interface MeteorsProps extends ViewProps {
+    number?: number;
+}
+/**
+ * Wall component props
+ */
+export interface WallProps extends ViewProps {
+    rows?: number;
+    cols?: number;
+    squareSize?: number;
+}
+/**
+ * Background styles for customization
+ */
+export interface BackgroundStyles {
+    container?: ViewProps;
+    content?: ViewProps;
+    aurora?: ViewProps;
+    meteors?: ViewProps;
+}

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

@@ -0,0 +1,23 @@
+import { ViewProps } from 'app-studio';
+/**
+ * Default styles for Background components
+ */
+export declare const DefaultBackgroundStyles: {
+    container: ViewProps;
+    content: ViewProps;
+};
+/**
+ * Aurora background styles
+ */
+export declare const AuroraStyles: {
+    container: ViewProps;
+    gradient: ViewProps;
+};
+/**
+ * Meteors effect styles
+ */
+export declare const MeteorsStyles: {
+    container: ViewProps;
+    meteor: ViewProps;
+    meteorTail: ViewProps;
+};

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

@@ -0,0 +1,42 @@
+import { ViewProps } from 'app-studio';
+/**
+ * Background effect types
+ */
+export declare type BackgroundEffect = 'aurora' | 'meteors' | 'borderMoving' | 'animatedStroke';
+/**
+ * Aurora gradient direction options
+ */
+export declare type AuroraDirection = 'horizontal' | 'vertical' | 'diagonal';
+/**
+ * Meteor animation timing options
+ */
+export declare type MeteorTiming = {
+    delay: string;
+    duration: string;
+    target: string;
+};
+/**
+ * Border animation styles
+ */
+export declare type BorderAnimationStyles = {
+    container?: ViewProps;
+    svg?: ViewProps;
+    button?: ViewProps;
+};
+/**
+ * Stroke animation styles
+ */
+export declare type StrokeAnimationStyles = {
+    container?: ViewProps;
+    svg?: ViewProps;
+    rect?: ViewProps;
+    text?: ViewProps;
+};
+/**
+ * Background context type for compound components
+ */
+export interface BackgroundContextType {
+    effect?: BackgroundEffect;
+    isAnimated?: boolean;
+    duration?: number;
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { BackgroundProps, AuroraBackgroundProps, MeteorsProps, WallProps } from './Background.props';
+/**
+ * Main Background View Component with compound pattern
+ */
+interface BackgroundViewComponent extends React.FC<BackgroundProps> {
+    Aurora: React.FC<AuroraBackgroundProps>;
+    Meteors: React.FC<MeteorsProps>;
+    Wall: React.FC<WallProps>;
+}
+export declare const BackgroundView: BackgroundViewComponent;
+export {};

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

@@ -0,0 +1,13 @@
+/**
+ * Background Component
+ *
+ * A collection of animated background effects including Aurora, Meteors,
+ * and animated border effects following the design system guidelines.
+ */
+import React from 'react';
+import { BackgroundProps } from './Background/Background.props';
+export declare const Background: React.ForwardRefExoticComponent<Pick<BackgroundProps, string | number> & React.RefAttributes<HTMLDivElement>> & {
+    Aurora: React.FC<import("./Background/Background.props").AuroraBackgroundProps>;
+    Meteors: React.FC<import("./Background/Background.props").MeteorsProps>;
+    Wall: React.FC<import("./Background/Background.props").WallProps>;
+};

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+export { DefaultDemo } from './default';
+export { AuroraDemo } from './aurora';
+export { MeteorsDemo } from './meteors';
+export { WallDemo } from './wall';
+export { CombinedEffectsDemo } from './combinedEffects';

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

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

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

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

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

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

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

@@ -22,6 +22,10 @@ export interface ButtonProps extends Omit<$ButtonProps, 'size'> {
     ariaLabel?: string;
     variant?: Variant;
     color?: string;
+    borderMovingDuration?: number;
+    borderMovingGradientColors?: string[];
+    animatedStrokeAccentColor?: string;
+    animatedStrokeTextColor?: string;
     views?: {
         container?: ViewProps;
         content?: ViewProps;

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

@@ -22,3 +22,7 @@ export declare const ButtonShapes: Record<Shape, number | string>;
  */
 export declare const IconSizes: Record<Size, ViewProps>;
 export declare const getButtonVariants: (color: string, isLight: boolean) => Record<Variant, ViewProps>;
+/**
+ * Generate offset path for border animation
+ */
+export declare function generateOffsetPath(width: number, height: number, borderRadius: number | string): string;

package/dist/components/Button/examples/animatedStroke.d.ts

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

package/dist/components/Button/examples/borderMoving.d.ts

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

package/dist/components/Button/examples/effectsTest.d.ts

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

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

@@ -1,4 +1,6 @@
+export * from './animatedStroke';
 export * from './autofocus';
+export * from './borderMoving';
 export * from './default';
 export * from './designSystem';
 export * from './icon';

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

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+import { ViewProps } from 'app-studio';
+import { Variant, Shape, Size, ColorPickerStyles, ColorFormat, PredefinedColor } from './ColorPicker.type';
+export interface ColorPickerProps extends ViewProps {
+    id?: string;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    helperText?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (color: string) => void;
+    onChangeComplete?: (color: string) => void;
+    views?: ColorPickerStyles;
+    size?: Size;
+    shape?: Shape;
+    variant?: Variant;
+    error?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    predefinedColors?: PredefinedColor[];
+    showCustomInput?: boolean;
+    showRecentColors?: boolean;
+    colorFormat?: ColorFormat;
+    maxRecentColors?: number;
+    isOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    closeOnSelect?: boolean;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+}
+export interface ColorPickerViewProps extends ColorPickerProps {
+    isOpen: boolean;
+    selectedColor: string;
+    recentColors: string[];
+    customColor: string;
+    handleToggle: () => void;
+    handleColorSelect: (color: string) => void;
+    handleCustomColorChange: (color: string) => void;
+    handleCustomColorSubmit: () => void;
+    handleClose: () => void;
+    triggerRef: React.RefObject<HTMLDivElement>;
+    dropdownRef: React.RefObject<HTMLDivElement>;
+}

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ColorPickerProps } from './ColorPicker.props';
+export declare const useColorPickerState: (props: ColorPickerProps) => {
+    isOpen: boolean;
+    selectedColor: string;
+    recentColors: string[];
+    customColor: string;
+    handleToggle: () => void;
+    handleColorSelect: (color: string) => void;
+    handleCustomColorChange: (color: string) => void;
+    handleCustomColorSubmit: () => void;
+    handleClose: () => void;
+    triggerRef: import("react").RefObject<HTMLDivElement>;
+    dropdownRef: import("react").RefObject<HTMLDivElement>;
+};

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

@@ -0,0 +1,34 @@
+import { ViewProps } from 'app-studio';
+import { Size, Variant, Shape } from './ColorPicker.type';
+/**
+ * Default styles for the ColorPicker component
+ */
+export declare const DefaultColorPickerStyles: {
+    container: ViewProps;
+    trigger: ViewProps;
+    dropdown: ViewProps;
+    colorGrid: ViewProps;
+    colorSwatch: ViewProps;
+    customInput: ViewProps;
+    recentColors: ViewProps;
+};
+/**
+ * Size styles for the ColorPicker component
+ */
+export declare const Sizes: Record<Size, ViewProps>;
+/**
+ * Shape styles for the ColorPicker component
+ */
+export declare const Shapes: Record<Shape, ViewProps>;
+/**
+ * Variant styles for the ColorPicker component
+ */
+export declare const Variants: Record<Variant, ViewProps>;
+/**
+ * Predefined color palette based on the design system
+ */
+export declare const DefaultColorPalette: {
+    name: string;
+    value: string;
+    category: string;
+}[];

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

@@ -0,0 +1,34 @@
+import { ViewProps } from 'app-studio';
+export declare type Variant = 'outline' | 'default' | 'filled';
+export declare type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
+export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare type ColorPickerStyles = {
+    container?: ViewProps;
+    trigger?: ViewProps;
+    dropdown?: ViewProps;
+    colorGrid?: ViewProps;
+    colorSwatch?: ViewProps;
+    customInput?: ViewProps;
+    recentColors?: ViewProps;
+    label?: ViewProps;
+    helperText?: ViewProps;
+};
+export declare type ColorFormat = 'hex' | 'rgb' | 'hsl';
+export declare type ColorValue = {
+    hex: string;
+    rgb: {
+        r: number;
+        g: number;
+        b: number;
+    };
+    hsl: {
+        h: number;
+        s: number;
+        l: number;
+    };
+};
+export declare type PredefinedColor = {
+    name: string;
+    value: string;
+    category?: string;
+};

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ColorPickerViewProps } from './ColorPicker.props';
+declare const ColorPickerView: React.FC<ColorPickerViewProps>;
+export default ColorPickerView;

package/dist/components/ColorPicker/ColorPicker.d.ts

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

package/dist/components/ColorPicker/examples/controlled.d.ts

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

package/dist/components/ColorPicker/examples/customColors.d.ts

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

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

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

package/dist/components/ColorPicker/examples/formIntegration.d.ts

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

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

@@ -0,0 +1,7 @@
+export * from './default';
+export * from './variants';
+export * from './sizes';
+export * from './shapes';
+export * from './customColors';
+export * from './formIntegration';
+export * from './controlled';

package/dist/components/ColorPicker/examples/shapes.d.ts

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

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

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

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

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

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

@@ -0,0 +1,48 @@
+/// <reference types="react" />
+import { ViewProps } from 'app-studio';
+import { Variant, Shape, Size, EmojiPickerStyles, EmojiCategory, Emoji } from './EmojiPicker.type';
+export interface EmojiPickerProps extends ViewProps {
+    id?: string;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    helperText?: string;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (emoji: string) => void;
+    onEmojiSelect?: (emoji: Emoji) => void;
+    views?: EmojiPickerStyles;
+    size?: Size;
+    shape?: Shape;
+    variant?: Variant;
+    error?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    showSearch?: boolean;
+    showCategories?: boolean;
+    showRecentEmojis?: boolean;
+    maxRecentEmojis?: number;
+    enabledCategories?: EmojiCategory[];
+    customEmojis?: Emoji[];
+    isOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    closeOnSelect?: boolean;
+    'aria-label'?: string;
+    'aria-describedby'?: string;
+}
+export interface EmojiPickerViewProps extends EmojiPickerProps {
+    isOpen: boolean;
+    selectedEmoji: string;
+    recentEmojis: Emoji[];
+    searchQuery: string;
+    activeCategory: EmojiCategory;
+    filteredEmojis: Emoji[];
+    handleToggle: () => void;
+    handleEmojiSelect: (emoji: Emoji) => void;
+    handleSearchChange: (query: string) => void;
+    handleCategoryChange: (category: EmojiCategory) => void;
+    handleClose: () => void;
+    triggerRef: React.RefObject<HTMLDivElement>;
+    dropdownRef: React.RefObject<HTMLDivElement>;
+}

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { EmojiPickerProps } from './EmojiPicker.props';
+import { Emoji, EmojiCategory } from './EmojiPicker.type';
+export declare const useEmojiPickerState: (props: EmojiPickerProps) => {
+    isOpen: boolean;
+    selectedEmoji: string;
+    recentEmojis: Emoji[];
+    searchQuery: string;
+    activeCategory: EmojiCategory;
+    filteredEmojis: Emoji[];
+    handleToggle: () => void;
+    handleEmojiSelect: (emoji: Emoji) => void;
+    handleSearchChange: (query: string) => void;
+    handleCategoryChange: (category: EmojiCategory) => void;
+    handleClose: () => void;
+    triggerRef: import("react").RefObject<HTMLDivElement>;
+    dropdownRef: import("react").RefObject<HTMLDivElement>;
+};

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

@@ -0,0 +1,36 @@
+import { ViewProps } from 'app-studio';
+import { Size, Variant, Shape, EmojiCategory, Emoji } from './EmojiPicker.type';
+/**
+ * Default styles for the EmojiPicker component
+ */
+export declare const DefaultEmojiPickerStyles: {
+    container: ViewProps;
+    trigger: ViewProps;
+    dropdown: ViewProps;
+    searchInput: ViewProps;
+    categoryTabs: ViewProps;
+    categoryTab: ViewProps;
+    emojiGrid: ViewProps;
+    emoji: ViewProps;
+    recentEmojis: ViewProps;
+};
+/**
+ * Size styles for the EmojiPicker component
+ */
+export declare const Sizes: Record<Size, ViewProps>;
+/**
+ * Shape styles for the EmojiPicker component
+ */
+export declare const Shapes: Record<Shape, ViewProps>;
+/**
+ * Variant styles for the EmojiPicker component
+ */
+export declare const Variants: Record<Variant, ViewProps>;
+/**
+ * Category labels for display
+ */
+export declare const CategoryLabels: Record<EmojiCategory, string>;
+/**
+ * Default emoji data - a subset of popular emojis
+ */
+export declare const DefaultEmojiData: Emoji[];

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

@@ -0,0 +1,28 @@
+import { ViewProps } from 'app-studio';
+export declare type Variant = 'outline' | 'default' | 'filled';
+export declare type Shape = 'default' | 'sharp' | 'rounded' | 'pillShaped';
+export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare type EmojiPickerStyles = {
+    container?: ViewProps;
+    trigger?: ViewProps;
+    dropdown?: ViewProps;
+    searchInput?: ViewProps;
+    categoryTabs?: ViewProps;
+    categoryTab?: ViewProps;
+    emojiGrid?: ViewProps;
+    emoji?: ViewProps;
+    recentEmojis?: ViewProps;
+    label?: ViewProps;
+    helperText?: ViewProps;
+};
+export declare type EmojiCategory = 'recent' | 'smileys' | 'people' | 'animals' | 'food' | 'activities' | 'travel' | 'objects' | 'symbols' | 'flags';
+export declare type Emoji = {
+    emoji: string;
+    name: string;
+    category: EmojiCategory;
+    keywords: string[];
+    skinTones?: string[];
+};
+export declare type EmojiData = {
+    [key in EmojiCategory]?: Emoji[];
+};

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { EmojiPickerViewProps } from './EmojiPicker.props';
+declare const EmojiPickerView: React.FC<EmojiPickerViewProps>;
+export default EmojiPickerView;

package/dist/components/EmojiPicker/EmojiPicker.d.ts

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

package/dist/components/EmojiPicker/examples/controlled.d.ts

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

package/dist/components/EmojiPicker/examples/customEmojis.d.ts

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

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

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

package/dist/components/EmojiPicker/examples/formIntegration.d.ts

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

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

@@ -0,0 +1,7 @@
+export * from './default';
+export * from './variants';
+export * from './sizes';
+export * from './shapes';
+export * from './customEmojis';
+export * from './formIntegration';
+export * from './controlled';

package/dist/components/EmojiPicker/examples/shapes.d.ts

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

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

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

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

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

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { InputProps, Shadow, ViewProps } from 'app-studio';
+import { Elevation } from '../../../../utils/elevation';
+import { Shape, Size, ColorInputStyles, Variant, PredefinedColor, ColorFormat } from './ColorInput.type';
+export interface ColorInputProps extends Omit<InputProps, 'size'> {
+    id?: string;
+    error?: any;
+    helperText?: string;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    isAutoFocus?: boolean;
+    onChange?: (value: string) => void;
+    onBlur?: (value: any) => void;
+    onClick?: () => void;
+    onFocus?: () => void;
+    size?: Size;
+    shadow?: Shadow | Elevation | ViewProps;
+    shape?: Shape;
+    views?: ColorInputStyles;
+    value?: string;
+    defaultValue?: string;
+    variant?: Variant;
+    predefinedColors?: PredefinedColor[];
+    showCustomInput?: boolean;
+    showRecentColors?: boolean;
+    colorFormat?: ColorFormat;
+    maxRecentColors?: number;
+    closeOnSelect?: boolean;
+    onChangeComplete?: (color: string) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+export interface ColorInputViewProps extends ColorInputProps {
+    isFocused?: boolean;
+    setIsFocused?: Function;
+    isHovered?: boolean;
+    setIsHovered?: Function;
+    value?: string;
+    setValue?: Function;
+    isOpen?: boolean;
+    selectedColor?: string;
+    recentColors?: string[];
+    customColor?: string;
+    handleToggle?: () => void;
+    handleColorSelect?: (color: string) => void;
+    handleCustomColorChange?: (color: string) => void;
+    handleCustomColorSubmit?: () => void;
+    handleClose?: () => void;
+    triggerRef?: React.RefObject<HTMLDivElement>;
+    dropdownRef?: React.RefObject<HTMLDivElement>;
+}