@app-studio/web 0.8.90 → 0.8.91

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,89 @@
+/// <reference types="react" />
+import { ViewProps } from 'app-studio';
+import { HighlightStyle, TitleAnimation, AnimationDirection, TitleSize, TitleStyles } from './Title.type';
+/**
+ * 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[];
+    /**
+     * Enable alternating animation that replaces the highlightText with words from alternateHighlightText
+     * When enabled, the component will replace the text specified in highlightText with each word
+     * from alternateHighlightText in sequence, creating an infinite loop animation
+     * @default false
+     */
+    alternateAnimation?: boolean;
+    /**
+     * Duration for each alternation cycle in milliseconds
+     * Controls how long each word from alternateHighlightText is displayed before switching to the next
+     * @default 3000
+     */
+    alternateDuration?: 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 type for the title
+     * @default 'none'
+     */
+    animation?: TitleAnimation;
+    /**
+     * Direction for slide animations
+     * @default 'left'
+     */
+    animationDirection?: AnimationDirection;
+    /**
+     * Duration of the animation in seconds
+     * @default '1s'
+     */
+    animationDuration?: string;
+    /**
+     * Delay before animation starts in seconds
+     * @default '0s'
+     */
+    animationDelay?: string;
+    /**
+     * 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;
+}

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

@@ -0,0 +1,124 @@
+/// <reference types="react" />
+import { TitleProps } from './Title.props';
+/**
+ * Custom hook for managing Title component state and animations
+ */
+export declare const useTitleState: (props: TitleProps) => {
+    displayText: string;
+    getAnimation: () => {
+        from: {
+            opacity: number;
+            transform?: undefined;
+            backgroundSize?: undefined;
+            clipPath?: undefined;
+        };
+        to: {
+            opacity: number;
+            transform?: undefined;
+            backgroundSize?: undefined;
+            clipPath?: undefined;
+        };
+        duration: string;
+        delay: string;
+        direction: string;
+        '20%'?: undefined;
+        '40%'?: undefined;
+        '60%'?: undefined;
+        '80%'?: undefined;
+        iterationCount?: undefined;
+    } | {
+        from: {
+            transform: string;
+            opacity?: undefined;
+            backgroundSize?: undefined;
+            clipPath?: undefined;
+        };
+        to: {
+            transform: string;
+            opacity?: undefined;
+            backgroundSize?: undefined;
+            clipPath?: undefined;
+        };
+        duration: string;
+        delay: string;
+        direction: string;
+        '20%'?: undefined;
+        '40%'?: undefined;
+        '60%'?: undefined;
+        '80%'?: undefined;
+        iterationCount?: undefined;
+    } | {
+        from: {
+            transform: string;
+            opacity?: undefined;
+            backgroundSize?: undefined;
+            clipPath?: undefined;
+        };
+        '20%': {
+            transform: string;
+        };
+        '40%': {
+            transform: string;
+        };
+        '60%': {
+            transform: string;
+        };
+        '80%': {
+            transform: string;
+        };
+        to: {
+            transform: string;
+            opacity?: undefined;
+            backgroundSize?: undefined;
+            clipPath?: undefined;
+        };
+        duration: string;
+        delay: string;
+        iterationCount: string;
+        direction?: undefined;
+    } | {
+        from: {
+            backgroundSize: string;
+            opacity?: undefined;
+            transform?: undefined;
+            clipPath?: undefined;
+        };
+        to: {
+            backgroundSize: string;
+            opacity?: undefined;
+            transform?: undefined;
+            clipPath?: undefined;
+        };
+        duration: string;
+        delay: string;
+        direction?: undefined;
+        '20%'?: undefined;
+        '40%'?: undefined;
+        '60%'?: undefined;
+        '80%'?: undefined;
+        iterationCount?: undefined;
+    } | {
+        from: {
+            clipPath: string;
+            opacity?: undefined;
+            transform?: undefined;
+            backgroundSize?: undefined;
+        };
+        to: {
+            clipPath: string;
+            opacity?: undefined;
+            transform?: undefined;
+            backgroundSize?: undefined;
+        };
+        duration: string;
+        delay: string;
+        direction?: undefined;
+        '20%'?: undefined;
+        '40%'?: undefined;
+        '60%'?: undefined;
+        '80%'?: undefined;
+        iterationCount?: undefined;
+    } | undefined;
+    currentHighlightText: string | string[] | undefined;
+    alternatingContent: import("react").ReactNode;
+};

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,25 @@
+import { ViewProps } from 'app-studio';
+/**
+ * Highlight style options for the Title component
+ */
+export declare type HighlightStyle = 'underline' | 'background' | 'gradient' | 'outline' | 'glow';
+/**
+ * Animation type for the Title component
+ */
+export declare type TitleAnimation = 'fadeIn' | 'slideIn' | 'typewriter' | 'highlight' | 'reveal' | 'bounce' | 'alternate' | 'none';
+/**
+ * Animation direction for slide animations
+ */
+export declare type AnimationDirection = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * Title size options
+ */
+export declare type TitleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/**
+ * 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,9 @@
+import React from 'react';
+import { TitleProps } from './Title.props';
+/**
+ * Title View Component
+ *
+ * Renders a title with optional highlighting and animations for hero sections.
+ */
+declare const TitleView: React.FC<TitleProps>;
+export default TitleView;

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';
+/**
+ * Example of Title component with alternating highlighted 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 component with different animations
+ */
+export declare const AnimatedTitle: () => React.JSX.Element;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Test component to verify Animation object works correctly
+ */
+export declare const AnimationTest: () => React.JSX.Element;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Example of Title component with custom styling
+ */
+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
+ */
+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 direct animation without using Animation object
+ */
+export declare const DirectAnimationExample: () => React.JSX.Element;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Test for gradient highlighting in Title component
+ */
+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 component in a hero section context
+ */
+export declare const HeroTitle: () => React.JSX.Element;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Test for highlighting issues in Title component
+ */
+export declare const HighlightTest: () => React.JSX.Element;

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

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

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

@@ -0,0 +1,10 @@
+export * from './default';
+export * from './highlighted';
+export * from './animated';
+export * from './hero';
+export * from './responsive';
+export * from './custom';
+export * from './directAnimation';
+export * from './gradientTest';
+export * from './highlightTest';
+export * from './alternating';

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

@@ -0,0 +1,5 @@
+import React from 'react';
+/**
+ * Example of Title component with responsive behavior
+ */
+export declare const ResponsiveTitle: () => 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;