@app-studio/web 0.8.74 → 0.8.76

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

@@ -0,0 +1,37 @@
+/**
+ * Toast Styles
+ *
+ * Defines the styles for the Toast component following the design guidelines:
+ * - Typography: Inter/Geist font, specific sizes/weights
+ * - Spacing: 4px grid system
+ * - Colors: Neutral palette with semantic colors
+ * - Rounded corners: Consistent border radius
+ * - Transitions: Subtle animations
+ */
+import { ViewProps } from 'app-studio';
+import { ToastPosition, ThemesType } from './Toast.type';
+/**
+ * Theme configurations for the Toast component
+ * Following the design system color palette
+ */
+export declare const Themes: ThemesType;
+/**
+ * Animation configurations for the Toast component
+ */
+export declare const ToastAnimations: {
+    enter: {
+        opacity: number[];
+        transform: string[];
+        transition: string;
+    };
+    exit: {
+        opacity: number[];
+        transform: string[];
+        transition: string;
+    };
+};
+/**
+ * Position configurations for the Toast component
+ * Following the 4px grid system
+ */
+export declare const ToastPositions: Record<ToastPosition, ViewProps>;

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

@@ -0,0 +1,63 @@
+/// <reference types="react" />
+import { ViewProps } from 'app-studio';
+export declare type ToastVariant = 'info' | 'success' | 'warning' | 'error';
+export declare type ToastPosition = 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left';
+export interface Theme {
+    container: {
+        backgroundColor: string;
+        border: string;
+    };
+    content: {
+        color: string;
+    };
+    icon: {
+        color: string;
+    };
+}
+export declare type ThemesType = {
+    info: Theme;
+    success: Theme;
+    error: Theme;
+    warning: Theme;
+};
+export interface ToastStyles {
+    container?: ViewProps;
+    title?: ViewProps;
+    description?: ViewProps;
+    icon?: ViewProps;
+    closeButton?: ViewProps;
+    actionButton?: ViewProps;
+}
+export interface ToastOptions {
+    id?: string;
+    duration?: number;
+    position?: ToastPosition;
+    isClosable?: boolean;
+    onClose?: () => void;
+    action?: () => void;
+    actionText?: string;
+    showIcon?: boolean;
+    views?: ToastStyles;
+    /**
+     * Custom render function for complete control over toast appearance
+     */
+    render?: (props: {
+        id: string;
+        onClose: () => void;
+    }) => React.ReactNode;
+    /**
+     * Custom icon to display instead of the default variant icon
+     */
+    icon?: React.ReactNode;
+}
+export interface ToastItem extends ToastOptions {
+    id: string;
+    variant: ToastVariant;
+    title: string;
+    description?: string;
+    createdAt: number;
+    /**
+     * Whether the toast is visible (for animation purposes)
+     */
+    isVisible?: boolean;
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ToastProps, ToastContainerProps } from './Toast.props';
+export declare const ToastView: React.FC<ToastProps>;
+export declare const ToastContainer: React.FC<ToastContainerProps>;

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ToastProps, ToastContainerProps } from './Toast/Toast.props';
+declare const Toast: React.FC<ToastProps> & {
+    Container: (props: ToastContainerProps) => React.JSX.Element;
+    show: (variant: import("./Toast/Toast.type").ToastVariant, title: string, description?: string | undefined, options?: import("./Toast/Toast.type").ToastOptions | undefined) => any;
+    info: (title: string, description?: string | undefined, options?: import("./Toast/Toast.type").ToastOptions | undefined) => any;
+    success: (title: string, description?: string | undefined, options?: import("./Toast/Toast.type").ToastOptions | undefined) => any;
+    warning: (title: string, description?: string | undefined, options?: import("./Toast/Toast.type").ToastOptions | undefined) => any;
+    error: (title: string, description?: string | undefined, options?: import("./Toast/Toast.type").ToastOptions | undefined) => any;
+    remove: (id: string) => void;
+    removeAll: () => void;
+};
+export declare const useToast: () => {
+    toast: (variant: import("./Toast/Toast.type").ToastVariant, title: string, description?: string | undefined, options?: import("./Toast/Toast.type").ToastOptions | undefined) => any;
+    info: (title: string, description?: string | undefined, options?: import("./Toast/Toast.type").ToastOptions | undefined) => any;
+    success: (title: string, description?: string | undefined, options?: import("./Toast/Toast.type").ToastOptions | undefined) => any;
+    warning: (title: string, description?: string | undefined, options?: import("./Toast/Toast.type").ToastOptions | undefined) => any;
+    error: (title: string, description?: string | undefined, options?: import("./Toast/Toast.type").ToastOptions | undefined) => any;
+    remove: (id: string) => void;
+    removeAll: () => void;
+};
+export { Toast };

package/dist/components/Toast/examples/actions.d.ts

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

package/dist/components/Toast/examples/customization.d.ts

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

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

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

package/dist/components/Toast/examples/designSystem.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Toast Examples - Design System
+ *
+ * Showcases the Toast component following the design guidelines:
+ * - Typography: Inter/Geist font, specific sizes/weights
+ * - Spacing: 4px grid system
+ * - Colors: Neutral palette with semantic colors
+ * - Rounded corners: Consistent border radius
+ * - Transitions: Subtle animations
+ */
+import React from 'react';
+export declare const DesignSystemToast: () => React.JSX.Element;

package/dist/components/Toast/examples/duration.d.ts

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

package/dist/components/Toast/examples/hookUsage.d.ts

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

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

@@ -0,0 +1,8 @@
+export * from './default';
+export * from './designSystem';
+export * from './variants';
+export * from './positions';
+export * from './duration';
+export * from './actions';
+export * from './customization';
+export * from './hookUsage';

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

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

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

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

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

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

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

@@ -0,0 +1,108 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { Position, Alignment, Size, Variant, TooltipStyles } from './Tooltip.type';
+export interface TooltipProps {
+    /**
+     * The content to display in the tooltip
+     */
+    content: React.ReactNode;
+    /**
+     * The element that triggers the tooltip
+     */
+    children: React.ReactNode;
+    /**
+     * The preferred position of the tooltip
+     * @default 'top'
+     */
+    position?: Position;
+    /**
+     * The alignment of the tooltip relative to the trigger
+     * @default 'center'
+     */
+    align?: Alignment;
+    /**
+     * The size of the tooltip
+     * @default 'md'
+     */
+    size?: Size;
+    /**
+     * The visual style variant of the tooltip
+     * @default 'default'
+     */
+    variant?: Variant;
+    /**
+     * Delay in milliseconds before the tooltip opens on hover
+     * @default 200
+     */
+    openDelay?: number;
+    /**
+     * Delay in milliseconds before the tooltip closes after hover stops
+     * @default 200
+     */
+    closeDelay?: number;
+    /**
+     * Whether to show an arrow pointing to the trigger
+     * @default true
+     */
+    showArrow?: boolean;
+    /**
+     * Whether the tooltip is initially open
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Whether the tooltip is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Custom styles for different parts of the tooltip
+     */
+    views?: TooltipStyles;
+    /**
+     * Additional props to be spread to the container element
+     */
+    [key: string]: any;
+}
+export interface TooltipTriggerProps {
+    /**
+     * The element that triggers the tooltip
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styles for the trigger container
+     */
+    views?: {
+        container?: ViewProps;
+    };
+    /**
+     * Whether to preserve the child element's props
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Additional props to be spread to the container element
+     */
+    [key: string]: any;
+}
+export interface TooltipContentProps {
+    /**
+     * The content to display in the tooltip
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styles for the content container
+     */
+    views?: {
+        container?: ViewProps;
+        arrow?: ViewProps;
+    };
+    /**
+     * Additional props to be spread to the container element
+     */
+    [key: string]: any;
+}
+export interface TooltipType extends React.FC<TooltipProps> {
+    Trigger: React.FC<TooltipTriggerProps>;
+    Content: React.FC<TooltipContentProps>;
+}

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+interface TooltipStateProps {
+    defaultOpen?: boolean;
+    openDelay?: number;
+    closeDelay?: number;
+    isDisabled?: boolean;
+}
+export declare const useTooltipState: ({ defaultOpen, openDelay, closeDelay, isDisabled, }?: TooltipStateProps) => {
+    isOpen: boolean;
+    openTooltip: () => void;
+    closeTooltip: () => void;
+    cancelCloseTimer: () => void;
+    triggerRef: import("react").RefObject<HTMLElement>;
+    contentRef: import("react").RefObject<HTMLElement>;
+    triggerId: string;
+    contentId: string;
+};
+export {};

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

@@ -0,0 +1,6 @@
+import { ViewProps } from 'app-studio';
+import { Size, Variant, Position, Alignment } from './Tooltip.type';
+export declare const TooltipSizes: Record<Size, ViewProps>;
+export declare const TooltipVariants: Record<Variant, ViewProps>;
+export declare const getTooltipPositionStyles: (position: Position, align: Alignment) => ViewProps;
+export declare const getArrowStyles: (position: Position) => ViewProps;

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

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { ViewProps, TextProps } from 'app-studio';
+export declare type Position = 'top' | 'right' | 'bottom' | 'left';
+export declare type Alignment = 'start' | 'center' | 'end';
+export declare type Size = 'sm' | 'md' | 'lg';
+export declare type Variant = 'default' | 'light' | 'dark';
+export interface TooltipContextType {
+    isOpen: boolean;
+    openTooltip: () => void;
+    closeTooltip: () => void;
+    triggerRef: React.RefObject<HTMLElement>;
+    contentRef: React.RefObject<HTMLElement>;
+    contentId: string;
+    triggerId: string;
+}
+export interface TooltipStyles {
+    container?: ViewProps;
+    content?: ViewProps;
+    arrow?: ViewProps;
+    text?: TextProps;
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TooltipContextType, Position, Alignment } from './Tooltip.type';
+import { TooltipTriggerProps, TooltipContentProps } from './Tooltip.props';
+export declare const useTooltipContext: () => TooltipContextType;
+export declare const TooltipProvider: React.FC<{
+    value: TooltipContextType;
+    children: React.ReactNode;
+}>;
+export declare const TooltipTrigger: React.FC<TooltipTriggerProps>;
+export declare const TooltipContent: React.FC<TooltipContentProps>;
+export declare const TooltipView: React.FC<{
+    content: React.ReactNode;
+    children: React.ReactNode;
+    position?: Position;
+    align?: Alignment;
+    size?: string;
+    variant?: string;
+    showArrow?: boolean;
+    views?: any;
+}>;

package/dist/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,2 @@
+import { TooltipType } from './Tooltip/Tooltip.props';
+export declare const Tooltip: TooltipType;

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

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

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

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

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

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

package/dist/components/Tooltip/examples/integration.d.ts

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

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

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

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

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

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

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

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

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

package/dist/components/index.d.ts

@@ -4,6 +4,9 @@ export * from './AspectRatio/AspectRatio';
 export * from './Avatar/Avatar';
 export * from './Badge/Badge';
 export * from './Button/Button';
+export * from './Card/Card';
+export * from './Carousel/Carousel';
+export * from './Chart/Chart';
 export * from './ContextMenu/ContextMenu';
 export * from './File/File';
 export * from './Form/Select/Select';
@@ -16,12 +19,9 @@ export * from './Form/CountryPicker/CountryPicker';
 export * from './Form/DatePicker/DatePicker';
 export * from './Form/Password/Password';
 export * from './Form/ComboBox/ComboBox';
+export * from './OTPInput/OTPInput';
 export * from './Formik';
 export * from './Slider';
-export * from './Layout/Center/Center';
-export * from './Layout/Horizontal/Horizontal';
-export * from './Layout/Vertical/Vertical';
-export * from './Layout/View/View';
 export * from './Link/Link';
 export * from './Loader/Loader';
 export * from './Uploader/Uploader';
@@ -38,12 +38,23 @@ export * from './ToggleGroup/ToggleGroup';
 export * from './DragAndDrop/DragAndDrop';
 export * from './DropdownMenu/DropdownMenu';
 export * from './HoverCard/HoverCard';
+export * from './Menubar/Menubar';
+export * from './Pagination/Pagination';
+export * from './Separator/Separator';
+export * from './Sidebar/Sidebar';
+export * from './Resizable/Resizable';
+export * from './Toast/Toast';
+export * from './Command/Command';
+export * from './Tooltip/Tooltip';
 export * from './Accordion/Accordion/Accordion.props';
 export * from './Alert/Alert/Alert.props';
 export * from './AspectRatio/AspectRatio/AspectRatio.props';
 export * from './Avatar/Avatar/Avatar.props';
 export * from './Badge/Badge/Badge.props';
 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 './ContextMenu/ContextMenu/ContextMenu.props';
 export * from './Form/Select/Select/Select.props';
 export * from './Form/Switch/Switch/Switch.props';
@@ -55,9 +66,7 @@ export * from './Form/CountryPicker/CountryPicker/CountryPicker.props';
 export * from './Form/DatePicker/DatePicker/DatePicker.props';
 export * from './Form/Password/Password/Password.props';
 export * from './Form/ComboBox/ComboBox/ComboBox.props';
-export * from './Layout/Center/Center.props';
-export * from './Layout/Horizontal/Horizontal.props';
-export * from './Layout/Vertical/Vertical.props';
+export * from './OTPInput/OTPInput/OTPInput.props';
 export * from './Link/Link/Link.props';
 export * from './Loader/Loader/Loader.props';
 export * from './Message/Message/Message.props';
@@ -71,3 +80,11 @@ export * from './ToggleGroup/ToggleGroup/ToggleGroup.props';
 export * from './HoverCard/HoverCard/HoverCard.props';
 export * from './NavigationMenu/NavigationMenu/NavigationMenu.props';
 export * from './DropdownMenu/DropdownMenu/DropdownMenu.props';
+export * from './Menubar/Menubar/Menubar.props';
+export * from './Pagination/Pagination/Pagination.props';
+export * from './Separator/Separator/Separator.props';
+export * from './Sidebar/Sidebar/Sidebar.props';
+export * from './Resizable/Resizable/Resizable.props';
+export * from './Toast/Toast/Toast.props';
+export * from './Command/Command/Command.props';
+export * from './Tooltip/Tooltip/Tooltip.props';

package/dist/hooks/useRect.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+/**
+ * A hook that returns the DOMRect of an element.
+ * @param ref React ref object for the element to measure
+ * @returns DOMRect of the element or null if the element is not available
+ */
+export declare const useRect: <T extends HTMLElement>(ref: import("react").RefObject<T>) => DOMRect | null;

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

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

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

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

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

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

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AIChatPage: React.FC;
+export default AIChatPage;

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function RadioPage(): React.JSX.Element;

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/utils/generateId.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generates a random ID string
+ * @returns A random string that can be used as an ID
+ */
+export declare const generateId: () => string;

package/dist/utils/id.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Generates a unique ID with an optional prefix
+ * @param prefix Optional prefix for the ID
+ * @returns A unique string ID
+ */
+export declare const generateId: (prefix?: string) => string;