@app-studio/web 0.8.90 → 0.8.92

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

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import { ViewProps } from 'app-studio';
+import { CookieConsentPosition, CookieConsentStyles, CookieConsentVariant } from './CookieConsent.type';
+/**
+ * Props for the CookieConsent component
+ */
+export interface CookieConsentProps extends Omit<ViewProps, 'position'> {
+    /**
+     * Title of the cookie consent banner
+     */
+    title?: string;
+    /**
+     * Description text explaining cookie usage
+     */
+    description?: string | React.ReactNode;
+    /**
+     * Text for the accept button
+     */
+    acceptButtonText?: string;
+    /**
+     * Text for the customize button
+     */
+    customizeButtonText?: string;
+    /**
+     * Position of the banner on the screen
+     */
+    position?: CookieConsentPosition;
+    /**
+     * Visual variant of the banner
+     */
+    variant?: CookieConsentVariant;
+    /**
+     * Function called when user accepts cookies
+     */
+    onAccept?: () => void;
+    /**
+     * Function called when user wants to customize cookie preferences
+     */
+    onCustomize?: () => void;
+    /**
+     * Custom styles for the component
+     */
+    views?: CookieConsentStyles;
+    /**
+     * Whether to show the customize button
+     */
+    showCustomizeButton?: boolean;
+    /**
+     * Cookie expiration in days
+     */
+    cookieExpiration?: number;
+    /**
+     * Optional theme mode override ('light' or 'dark')
+     * If not provided, the component will use the theme mode from context
+     */
+    themeMode?: 'light' | 'dark';
+}

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+/**
+ * Custom hook to manage cookie consent state
+ * @param cookieExpiration Number of days until the cookie expires
+ * @returns State and functions for managing cookie consent
+ */
+export declare const useCookieConsentState: (cookieExpiration?: number) => {
+    isHovered: boolean;
+    setIsHovered: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    hasConsent: boolean | null;
+    acceptCookies: () => void;
+    resetConsent: () => void;
+};

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

@@ -0,0 +1,68 @@
+/**
+ * Get theme-based styles for the CookieConsent component
+ */
+export declare const getThemes: (themeMode: 'light' | 'dark') => {
+    default: {
+        container: {
+            backgroundColor: string;
+            borderColor: string;
+            boxShadow: string;
+        };
+        content: {
+            color: string;
+        };
+        acceptButton: {
+            backgroundColor: string;
+            color: string;
+            hoverBackgroundColor: string;
+        };
+        customizeButton: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hoverBackgroundColor: string;
+        };
+    };
+    info: {
+        container: {
+            backgroundColor: string;
+            borderColor: string;
+            boxShadow: string;
+        };
+        content: {
+            color: string;
+        };
+        acceptButton: {
+            backgroundColor: string;
+            color: string;
+            hoverBackgroundColor: string;
+        };
+        customizeButton: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hoverBackgroundColor: string;
+        };
+    };
+    primary: {
+        container: {
+            backgroundColor: string;
+            borderColor: string;
+            boxShadow: string;
+        };
+        content: {
+            color: string;
+        };
+        acceptButton: {
+            backgroundColor: string;
+            color: string;
+            hoverBackgroundColor: string;
+        };
+        customizeButton: {
+            backgroundColor: string;
+            color: string;
+            borderColor: string;
+            hoverBackgroundColor: string;
+        };
+    };
+};

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

@@ -0,0 +1,13 @@
+/**
+ * CookieConsent component types
+ */
+export declare type CookieConsentPosition = 'bottom' | 'top';
+export declare type CookieConsentVariant = 'default' | 'info' | 'primary';
+export declare type CookieConsentStyles = {
+    container?: any;
+    title?: any;
+    description?: any;
+    buttonGroup?: any;
+    acceptButton?: any;
+    customizeButton?: any;
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CookieConsentProps } from './CookieConsent.props';
+/**
+ * CookieConsent View Component
+ *
+ * Renders a cookie consent banner with customizable styling, position, and content.
+ */
+export declare const CookieConsentView: React.FC<CookieConsentProps>;

package/dist/components/CookieConsent/CookieConsent.d.ts

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

package/dist/components/CookieConsent/examples/custom.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Custom styled CookieConsent example
+ */
+export declare const CustomCookieConsent: () => React.JSX.Element;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Default CookieConsent example
+ */
+export declare const DefaultCookieConsent: () => React.JSX.Element;

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

@@ -0,0 +1,4 @@
+export * from './default';
+export * from './variants';
+export * from './positions';
+export * from './custom';

package/dist/components/CookieConsent/examples/positions.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * CookieConsent positions example
+ */
+export declare const CookieConsentPositions: () => React.JSX.Element;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * CookieConsent variants example
+ */
+export declare const CookieConsentVariants: () => React.JSX.Element;

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

@@ -6,7 +6,7 @@ export interface IconProps extends ViewProps {
     orientation?: 'left' | 'right' | 'up' | 'down';
 }
 export declare const UserIcon: React.FC<IconProps>;
-export declare const HelpIcon: ({ widthHeight, color, filled, strokeWidth, ...props }: IconProps) => React.JSX.Element;
+export declare const HelpIcon: React.FC<IconProps>;
 export declare const ChevronIcon: React.FC<IconProps>;
 export declare const DragHandleIcon: React.FC<IconProps>;
 export declare const FileIcon: React.FC<IconProps>;
@@ -82,3 +82,6 @@ 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>;
+export declare const GiftIcon: React.FC<IconProps>;
+export declare const ShieldIcon: React.FC<IconProps>;
+export declare const CheckIcon: React.FC<IconProps>;

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

@@ -0,0 +1,88 @@
+/// <reference types="react" />
+import { ViewProps } from 'app-studio';
+import { HighlightStyle, TitleSize, TitleStyles } from './Title.type';
+import { AnimationProps } from 'app-studio/dist/utils/constants';
+/**
+ * Props for the Title component
+ */
+export interface TitleProps extends ViewProps {
+    /**
+     * Internal prop to indicate if the component is in view
+     * @internal
+     */
+    _isInView?: boolean;
+    /**
+     * The main text content of the title
+     */
+    children: React.ReactNode;
+    /**
+     * Text to be highlighted within the title
+     * If not provided, no highlighting will be applied
+     */
+    highlightText?: string | string[];
+    /**
+     * Array of strings to cycle through, replacing the text specified in highlightText
+     * Used with alternateAnimation to create an infinite loop of changing words
+     */
+    alternateHighlightText?: string[];
+    /**
+     * Animation for the highlighted text
+     * This can be a single animation object or an array of animation objects
+     * for multiple highlighted words
+     */
+    highlightAnimate?: AnimationProps | AnimationProps[];
+    /**
+     * Whether to apply a typewriter effect to the highlighted text
+     * @default false
+     */
+    highlightTypewriter?: boolean;
+    /**
+     * Duration in milliseconds for the typewriter effect on highlighted text
+     * @default 1500
+     */
+    highlightTypewriterDuration?: number;
+    /**
+     * Style of the highlight effect
+     * @default 'background'
+     */
+    highlightStyle?: HighlightStyle;
+    /**
+     * Color for the highlight effect
+     * @default 'theme.primary'
+     */
+    highlightColor?: string;
+    /**
+     * Secondary color for gradient highlights
+     * @default 'theme.secondary'
+     */
+    highlightSecondaryColor?: string;
+    /**
+     * Animation for the title
+     * This should be an animation object with properties like from, to, duration, etc.
+     */
+    animate?: AnimationProps | AnimationProps[];
+    /**
+     * Size of the title
+     * @default 'xl'
+     */
+    size?: TitleSize;
+    /**
+     * Whether to center the title
+     * @default false
+     */
+    centered?: boolean;
+    /**
+     * Custom styles for different parts of the component
+     */
+    views?: TitleStyles;
+    /**
+     * Whether to animate the alternating highlight text
+     * @default false
+     */
+    alternateAnimation?: boolean;
+    /**
+     * Duration in milliseconds for each alternating highlight text
+     * @default 3000
+     */
+    alternateDuration?: number;
+}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TitleProps } from './Title.props';
+/**
+ * Custom hook for managing Title component state
+ */
+export declare const useTitleState: (props: TitleProps) => {
+    finalDisplayedText: import("react").ReactNode;
+    activeHighlightTarget: string | string[] | undefined;
+    highlightTypewriter: boolean;
+};

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

@@ -0,0 +1,25 @@
+import { ViewProps } from 'app-studio';
+import { TitleSize, HighlightStyle } from './Title.type';
+/**
+ * Font sizes for different title sizes
+ */
+export declare const TitleSizes: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+    '3xl': number;
+    '4xl': number;
+    '5xl': number;
+    '6xl': number;
+};
+/**
+ * Line heights for different title sizes
+ */
+export declare const LineHeights: Record<TitleSize, number>;
+/**
+ * Default styles for different highlight types
+ */
+export declare const HighlightStyles: Record<HighlightStyle, (color: string, secondaryColor?: string) => ViewProps>;

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

@@ -0,0 +1,17 @@
+import { ViewProps } from 'app-studio';
+/**
+ * Highlight style options for the Title component
+ */
+export declare type HighlightStyle = 'underline' | 'background' | 'gradient' | 'outline' | 'glow';
+/**
+ * Title size options
+ */
+export declare type TitleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+/**
+ * Title styles for customization
+ */
+export declare type TitleStyles = {
+    container?: ViewProps;
+    text?: ViewProps;
+    highlight?: ViewProps;
+};

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

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

package/dist/components/Title/Title/TypewriterEffect.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface TypewriterEffectProps {
+    text: string | string[];
+    typingSpeed?: number;
+    pauseTime?: number;
+    onComplete?: () => void;
+    showCursor?: boolean;
+    cursorColor?: string;
+    textStyle?: React.CSSProperties;
+    as?: React.ElementType;
+    [key: string]: any;
+}
+/**
+ * A component that creates a typewriter effect for text
+ */
+export declare const TypewriterEffect: React.FC<TypewriterEffectProps>;
+export default TypewriterEffect;

package/dist/components/Title/Title/useInView.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+/**
+ * Custom hook to detect when an element is in the viewport
+ * @returns An object with a ref to attach to the element and a boolean indicating if the element is in view
+ */
+export declare const useInView: () => {
+    ref: import("react").MutableRefObject<HTMLElement | null>;
+    isInView: boolean;
+};

package/dist/components/Title/Title.d.ts

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

package/dist/components/Title/examples/alternating.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Examples of Title with alternating highlight text
+ */
+export declare const AlternatingTitle: () => React.JSX.Element;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Examples of Title with different animation types
+ */
+export declare const AnimatedTitle: () => React.JSX.Element;

package/dist/components/Title/examples/custom.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Example of Title with custom styling using the views prop
+ */
+export declare const CustomTitle: () => React.JSX.Element;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Default Title examples showing different sizes
+ */
+export declare const DefaultTitle: () => React.JSX.Element;

package/dist/components/Title/examples/directAnimation.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Example of Title with direct animation props
+ */
+export declare const DirectAnimationExample: () => React.JSX.Element;

package/dist/components/Title/examples/gradient.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Examples of Title with gradient highlight styles
+ */
+export declare const GradientTest: () => React.JSX.Element;

package/dist/components/Title/examples/hero.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Example of Title in a hero section context
+ */
+export declare const HeroTitle: () => React.JSX.Element;

package/dist/components/Title/examples/highlight.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Examples of Title with different highlight animations
+ */
+export declare const HighlightTest: () => React.JSX.Element;

package/dist/components/Title/examples/highlightStyles.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Examples of Title with different highlight styles applied to the entire title
+ */
+export declare const HighlightStylesDemo: () => React.JSX.Element;

package/dist/components/Title/examples/highlighted.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Examples of Title with different highlight styles
+ */
+export declare const HighlightedTitle: () => React.JSX.Element;

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

@@ -0,0 +1,12 @@
+export * from './default';
+export * from './highlighted';
+export * from './animated';
+export * from './hero';
+export * from './responsive';
+export * from './custom';
+export * from './directAnimation';
+export * from './gradient';
+export * from './highlight';
+export * from './alternating';
+export * from './highlightStyles';
+export * from './typewriterHighlight';

package/dist/components/Title/examples/responsive.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Example of responsive Title using media queries
+ */
+export declare const ResponsiveTitle: () => React.JSX.Element;

package/dist/components/Title/examples/typewriterHighlight.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Examples of Title with typewriter effect on highlighted text
+ */
+export declare const TypewriterHighlightDemo: () => React.JSX.Element;

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

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

package/dist/components/index.d.ts

@@ -7,6 +7,7 @@ export * from './Button/Button';
 export * from './Card/Card';
 export * from './Carousel/Carousel';
 export * from './Chart/Chart';
+export * from './CookieConsent/CookieConsent';
 export * from './ContextMenu/ContextMenu';
 export * from './File/File';
 export * from './Form/Select/Select';
@@ -31,6 +32,7 @@ export * from './NavigationMenu/NavigationMenu';
 export * from './Table/Table';
 export * from './Tabs/Tabs';
 export * from './Text/Text';
+export * from './Title/Title';
 export * from './Icon/Icon';
 export * as Icon from './Icon/Icon';
 export * from './Toggle/Toggle';
@@ -55,6 +57,7 @@ export * from './Button/Button/Button.props';
 export * from './Card/Card/Card.props';
 export * from './Carousel/Carousel/Carousel.props';
 export * from './Chart/Chart/Chart.props';
+export * from './CookieConsent/CookieConsent/CookieConsent.props';
 export * from './ContextMenu/ContextMenu/ContextMenu.props';
 export * from './Form/Select/Select/Select.props';
 export * from './Form/Switch/Switch/Switch.props';
@@ -75,6 +78,7 @@ export * from './Uploader/Uploader/Uploader.props';
 export * from './Table/Table/Table.props';
 export * from './Tabs/Tabs/Tabs.props';
 export * from './Text/Text/Text.props';
+export * from './Title/Title/Title.props';
 export * from './Toggle/Toggle/Toggle.props';
 export * from './ToggleGroup/ToggleGroup/ToggleGroup.props';
 export * from './HoverCard/HoverCard/HoverCard.props';

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

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * CookieConsent component showcase page
+ */
+declare const CookieConsentPage: () => React.JSX.Element;
+export default CookieConsentPage;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Title component showcase page
+ */
+declare const TitlePage: () => React.JSX.Element;
+export default TitlePage;