@app-studio/web 0.9.10 → 0.9.12

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

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
 import { ViewProps } from 'app-studio';
+import { GradientProps } from '../../Gradient/Gradient/Gradient.props';
+import { BackgroundSize, BackgroundPosition, BackgroundRepeat, BlendMode } from './Background.type';
 /**
  * Base Background component props
  */
@@ -58,6 +60,64 @@ export interface RipplesProps extends Omit<ViewProps, 'colors'> {
     maxSize?: number;
     frequency?: number;
 }
+/**
+ * Background Image component props
+ */
+export interface BackgroundImageProps extends Omit<BackgroundProps, 'position'> {
+    /**
+     * Image source URL
+     */
+    src: string;
+    /**
+     * Background size
+     * @default 'cover'
+     */
+    backgroundSize?: BackgroundSize;
+    /**
+     * Background position
+     * @default 'center'
+     */
+    backgroundPosition?: BackgroundPosition;
+    /**
+     * Background repeat
+     * @default 'no-repeat'
+     */
+    backgroundRepeat?: BackgroundRepeat;
+    /**
+     * Background attachment
+     * @default 'scroll'
+     */
+    backgroundAttachment?: 'scroll' | 'fixed' | 'local';
+    /**
+     * Image opacity
+     * @default 1
+     */
+    imageOpacity?: number;
+    /**
+     * Overlay color to blend with image
+     */
+    overlay?: string;
+    /**
+     * Blend mode for overlay
+     * @default 'normal'
+     */
+    blendMode?: BlendMode;
+    /**
+     * Custom views for styling
+     */
+    views?: {
+        container?: ViewProps;
+        content?: ViewProps;
+        image?: ViewProps;
+        overlay?: ViewProps;
+    };
+}
+/**
+ * Background Gradient component props
+ * Extends GradientProps and adds Background-specific functionality
+ */
+export interface BackgroundGradientProps extends GradientProps {
+}
 /**
  * Background styles for customization
  */
@@ -66,4 +126,6 @@ export interface BackgroundStyles {
     content?: ViewProps;
     aurora?: ViewProps;
     meteors?: ViewProps;
+    image?: ViewProps;
+    gradient?: ViewProps;
 }

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

@@ -13,6 +13,15 @@ export declare const AuroraStyles: {
     container: ViewProps;
     gradient: ViewProps;
 };
+/**
+ * Background Image styles
+ */
+export declare const BackgroundImageStyles: {
+    container: ViewProps;
+    image: ViewProps;
+    overlay: ViewProps;
+    content: ViewProps;
+};
 /**
  * Meteors effect styles
  */

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

@@ -2,7 +2,7 @@ import { ViewProps } from 'app-studio';
 /**
  * Background effect types
  */
-export declare type BackgroundEffect = 'aurora' | 'meteors' | 'borderMoving' | 'animatedStroke';
+export declare type BackgroundEffect = 'aurora' | 'meteors' | 'particles' | 'grid' | 'ripples' | 'wall' | 'image' | 'gradient' | 'borderMoving' | 'animatedStroke';
 /**
  * Aurora gradient direction options
  */
@@ -32,6 +32,22 @@ export declare type StrokeAnimationStyles = {
     rect?: ViewProps;
     text?: ViewProps;
 };
+/**
+ * Background image sizing options
+ */
+export declare type BackgroundSize = 'auto' | 'cover' | 'contain' | string;
+/**
+ * Background image positioning options
+ */
+export declare type BackgroundPosition = 'center' | 'top' | 'right' | 'bottom' | 'left' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | string;
+/**
+ * Background image repeat options
+ */
+export declare type BackgroundRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round';
+/**
+ * CSS blend mode options for overlays
+ */
+export declare type BlendMode = 'normal' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion';
 /**
  * Background context type for compound components
  */

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

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

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

@@ -1,8 +1,10 @@
 /**
  * Background Component
  *
- * A collection of animated background effects including Aurora, Meteors,
- * and animated border effects following the design system guidelines.
+ * A comprehensive collection of background effects including animated backgrounds
+ * (Aurora, Meteors, Particles, Grid, Ripples, Wall), background images with overlays,
+ * and gradient backgrounds. All components follow the design system guidelines and
+ * integrate seamlessly with the app-studio theme system.
  */
 import React from 'react';
 import { BackgroundProps } from './Background/Background.props';
@@ -13,4 +15,6 @@ export declare const Background: React.ForwardRefExoticComponent<Pick<Background
     Particles: React.FC<import("./Background/Background.props").ParticlesProps>;
     Grid: React.FC<import("./Background/Background.props").GridProps>;
     Ripples: React.FC<import("./Background/Background.props").RipplesProps>;
+    Image: React.FC<import("./Background/Background.props").BackgroundImageProps>;
+    Gradient: React.FC<import("./Background/Background.props").BackgroundGradientProps>;
 };

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

@@ -1,3 +1,3 @@
 export { Background } from './Background';
-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';
+export type { BackgroundProps, AuroraBackgroundProps, MeteorsProps, WallProps, ParticlesProps, GridProps, RipplesProps, BackgroundImageProps, BackgroundGradientProps, BackgroundStyles, } from './Background/Background.props';
+export type { BackgroundEffect, AuroraDirection, MeteorTiming, BorderAnimationStyles, StrokeAnimationStyles, BackgroundContextType, BackgroundSize, BackgroundPosition, BackgroundRepeat, BlendMode, } from './Background/Background.type';

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ChatInputProps } from '../ChatInput/ChatInput/ChatInput.props';
+interface FormikChatInputProps extends Omit<ChatInputProps, 'value' | 'onChange' | 'onSubmit' | 'getPendingFiles' | 'clearPendingFiles'> {
+    name: string;
+    onSubmit?: (message: string, options?: any) => void;
+}
+/**
+ * ChatInput is a component used to create a chat input field with file upload support,
+ * auto-completion, mentions, and other advanced features, integrated with Formik.
+ */
+export declare const FormikChatInput: React.FC<FormikChatInputProps>;
+export {};

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

@@ -4,4 +4,6 @@ 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>;
+export declare const FormikTagInput: React.FC<TagInputProps & {
+    name: string;
+}>;

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

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

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

@@ -1,4 +1,5 @@
 export * from './FormikCheckbox';
+export * from './FormikChatInput';
 export * from './FormikColorInput';
 export * from './FormikComboBox';
 export * from './FormikCountryPicker';

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

@@ -1,9 +1,11 @@
 export { FormikCheckbox } from './Formik.Checkbox';
+export { FormikChatInput } from './Formik.ChatInput';
 export { FormikColorInput } from './Formik.ColorInput';
 export { FormikDatePicker } from './Formik.DatePicker';
 export { FormikCountryPicker } from './Formik.CountryPicker';
 export { FormikSelect } from './Formik.Select';
 export { FormikSwitch } from './Formik.Switch';
+export { FormikTagInput } from './Formik.TagInput';
 export { FormikTextArea } from './Formik.TextArea';
 export { FormikTextField } from './Formik.TextField';
 export { FormikPassword } from './Formik.Password';