@app-studio/web 0.8.74 → 0.8.77

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

@@ -0,0 +1,9 @@
+export * from './default';
+export * from './vertical';
+export * from './nested';
+export * from './variants';
+export * from './sizes';
+export * from './codeEditor';
+export * from './controlled';
+export * from './collapsible';
+export * from './test';

package/dist/components/Resizable/examples/nested.d.ts

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

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

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

package/dist/components/Resizable/examples/test.d.ts

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

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

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

package/dist/components/Resizable/examples/vertical.d.ts

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

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

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

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

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { ViewProps } from 'app-studio';
+import { Orientation, Variant, Thickness, SeparatorStyles } from './Separator.type';
+export interface SeparatorProps extends ViewProps {
+    /**
+     * The orientation of the separator
+     */
+    orientation?: Orientation;
+    /**
+     * The visual style variant of the separator
+     */
+    variant?: Variant;
+    /**
+     * The thickness of the separator
+     */
+    thickness?: Thickness;
+    /**
+     * The color of the separator
+     */
+    color?: string;
+    /**
+     * The spacing around the separator
+     */
+    spacing?: number | string;
+    /**
+     * Optional label to display in the middle of the separator
+     */
+    label?: React.ReactNode;
+    /**
+     * Whether the separator has decorative purpose only
+     * If true, the separator will be hidden from screen readers
+     */
+    decorative?: boolean;
+    /**
+     * Custom styles for different parts of the separator
+     */
+    views?: SeparatorStyles;
+}

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

@@ -0,0 +1,38 @@
+/**
+ * Separator Styles
+ *
+ * Defines the styles for the Separator component following the design guidelines:
+ * - Typography: Inter/Geist font, specific sizes/weights
+ * - Spacing: 4px grid system
+ * - Colors: Neutral palette with semantic colors
+ * - Transitions: Subtle animations
+ */
+import { ViewProps } from 'app-studio';
+import { Orientation, Variant, Thickness } from './Separator.type';
+/**
+ * Orientation configurations for the Separator component
+ */
+export declare const SeparatorOrientations: Record<Orientation, ViewProps>;
+/**
+ * Variant configurations for the Separator component
+ */
+export declare const SeparatorVariants: Record<Variant, string>;
+/**
+ * Thickness configurations for the Separator component
+ * Following the 4px grid system
+ */
+export declare const SeparatorThicknesses: Record<Thickness, string>;
+/**
+ * Default styles for the Separator component
+ */
+export declare const DefaultSeparatorStyles: {
+    container: {
+        transition: string;
+    };
+    label: {
+        fontSize: string;
+        color: string;
+        paddingHorizontal: string;
+        transition: string;
+    };
+};

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

@@ -0,0 +1,8 @@
+import { ViewProps } from 'app-studio';
+export declare type Orientation = 'horizontal' | 'vertical';
+export declare type Variant = 'solid' | 'dashed' | 'dotted';
+export declare type Thickness = 'thin' | 'medium' | 'thick';
+export interface SeparatorStyles {
+    container?: ViewProps;
+    label?: ViewProps;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * Separator View Component
+ *
+ * Renders a separator with various styles and states
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { SeparatorProps } from './Separator.props';
+export declare const SeparatorView: React.FC<SeparatorProps>;

package/dist/components/Separator/Separator.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SeparatorProps } from './Separator/Separator.props';
+export declare const Separator: React.FC<SeparatorProps>;
+export declare const Divider: React.FC<SeparatorProps>;

package/dist/components/Separator/examples/colors.d.ts

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

package/dist/components/Separator/examples/customized.d.ts

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

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

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

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

@@ -0,0 +1,12 @@
+/**
+ * Separator Examples - Design System
+ *
+ * Showcases the Separator 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 DesignSystemSeparator: () => React.JSX.Element;

package/dist/components/Separator/examples/inCard.d.ts

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

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

@@ -0,0 +1,9 @@
+export * from './default';
+export * from './designSystem';
+export * from './variants';
+export * from './thicknesses';
+export * from './orientations';
+export * from './colors';
+export * from './withLabel';
+export * from './inCard';
+export * from './customized';

package/dist/components/Separator/examples/orientations.d.ts

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

package/dist/components/Separator/examples/thicknesses.d.ts

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

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

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

package/dist/components/Separator/examples/withLabel.d.ts

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

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

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

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

@@ -0,0 +1,153 @@
+import { ViewProps } from 'app-studio';
+import React from 'react';
+import { Position, Size, Variant, BreakpointBehavior, SidebarStyles, Elevation, TransitionPreset, SidebarContextType } from './Sidebar.type';
+export interface SidebarProps {
+    /**
+     * The content of the sidebar
+     */
+    children: React.ReactNode;
+    /**
+     * The position of the sidebar
+     */
+    position?: Position;
+    /**
+     * The size of the sidebar
+     */
+    size?: Size;
+    /**
+     * The visual style variant of the sidebar
+     */
+    variant?: Variant;
+    /**
+     * Whether the sidebar is initially expanded
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Whether the sidebar is expanded (controlled)
+     */
+    expanded?: boolean;
+    /**
+     * Callback when the expanded state changes
+     */
+    onExpandedChange?: (expanded: boolean) => void;
+    /**
+     * Whether the sidebar is fixed (always visible) or floating
+     */
+    fixed?: boolean;
+    /**
+     * Whether to show a backdrop when the sidebar is expanded in mobile view
+     */
+    hasBackdrop?: boolean;
+    /**
+     * Whether to show a toggle button
+     */
+    showToggleButton?: boolean;
+    /**
+     * The width of the sidebar when expanded
+     */
+    expandedWidth?: string | number;
+    /**
+     * The width of the sidebar when collapsed
+     */
+    collapsedWidth?: string | number;
+    /**
+     * The breakpoint at which the sidebar changes behavior
+     */
+    breakpoint?: number;
+    /**
+     * The behavior of the sidebar at the breakpoint
+     */
+    breakpointBehavior?: BreakpointBehavior;
+    /**
+     * The elevation level of the sidebar (shadow depth)
+     */
+    elevation?: Elevation;
+    /**
+     * The transition preset for the sidebar animations
+     */
+    transitionPreset?: TransitionPreset;
+    /**
+     * ARIA label for the sidebar for accessibility
+     */
+    ariaLabel?: string;
+    /**
+     * Custom styles for different parts of the sidebar
+     */
+    views?: SidebarStyles;
+    /**
+     * Additional props to be spread to the container element
+     */
+    [key: string]: any;
+}
+export interface SidebarHeaderProps {
+    /**
+     * The content of the sidebar header
+     */
+    children: React.ReactNode;
+    /**
+     * Whether to show the toggle button in the header
+     */
+    showToggleButton?: boolean;
+    /**
+     * Custom styles for the header
+     */
+    views?: {
+        header?: ViewProps;
+        toggleButton?: ViewProps;
+        toggleButtonIcon?: ViewProps;
+    };
+    /**
+     * Additional props to be spread to the header element
+     */
+    [key: string]: any;
+}
+export interface SidebarContentProps {
+    /**
+     * The content of the sidebar content area
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styles for the content area
+     */
+    views?: {
+        content?: ViewProps;
+    };
+    /**
+     * Additional props to be spread to the content element
+     */
+    [key: string]: any;
+}
+export interface SidebarFooterProps {
+    /**
+     * The content of the sidebar footer
+     */
+    children: React.ReactNode;
+    /**
+     * Custom styles for the footer
+     */
+    views?: {
+        footer?: ViewProps;
+    };
+    /**
+     * Additional props to be spread to the footer element
+     */
+    [key: string]: any;
+}
+export interface SidebarType extends React.FC<SidebarProps> {
+    /**
+     * The header component for the sidebar
+     */
+    Header: React.FC<SidebarHeaderProps>;
+    /**
+     * The content component for the sidebar
+     */
+    Content: React.FC<SidebarContentProps>;
+    /**
+     * The footer component for the sidebar
+     */
+    Footer: React.FC<SidebarFooterProps>;
+    /**
+     * Hook to access the sidebar context
+     */
+    useContext: () => SidebarContextType;
+}

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

@@ -0,0 +1,7 @@
+export declare const useSidebarState: (defaultExpanded?: boolean, expanded?: boolean | undefined, onExpandedChange?: ((expanded: boolean) => void) | undefined, breakpoint?: number | undefined) => {
+    isExpanded: boolean;
+    toggleExpanded: () => void;
+    expand: () => void;
+    collapse: () => void;
+    isMobile: boolean;
+};

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

@@ -0,0 +1,44 @@
+/**
+ * Sidebar Styles
+ *
+ * Defines the styles for the Sidebar 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 { Position, Size, Variant, Elevation, TransitionPreset } from './Sidebar.type';
+/**
+ * Size configurations for the Sidebar component
+ * Following the 4px grid system
+ */
+export declare const SidebarSizes: Record<Size, {
+    expandedWidth: string;
+    collapsedWidth: string;
+}>;
+/**
+ * Variant styles for the Sidebar component
+ */
+export declare const SidebarVariants: Record<Variant, ViewProps>;
+/**
+ * Position styles for the Sidebar component
+ */
+export declare const SidebarPositions: Record<Position, ViewProps>;
+/**
+ * Elevation styles for the Sidebar component
+ */
+export declare const SidebarElevations: Record<Elevation, ViewProps>;
+/**
+ * Transition presets for the Sidebar component
+ */
+export declare const SidebarTransitions: Record<TransitionPreset, string>;
+/**
+ * Active item styles for the Sidebar navigation items
+ */
+export declare const SidebarItemActive: ViewProps;
+/**
+ * Hover styles for the Sidebar navigation items
+ */
+export declare const SidebarItemHover: ViewProps;

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

@@ -0,0 +1,32 @@
+import { ViewProps } from 'app-studio';
+export declare type Position = 'left' | 'right';
+export declare type Size = 'sm' | 'md' | 'lg' | 'xl';
+export declare type Variant = 'default' | 'filled' | 'outline' | 'subtle' | 'elevated';
+export declare type BreakpointBehavior = 'collapse' | 'overlay' | 'hide';
+export declare type Elevation = 'none' | 'low' | 'medium' | 'high';
+export declare type TransitionPreset = 'fast' | 'normal' | 'slow' | 'bounce';
+export interface SidebarContextType {
+    isExpanded: boolean;
+    toggleExpanded: () => void;
+    expand: () => void;
+    collapse: () => void;
+    position: Position;
+    size: Size;
+    variant: Variant;
+    views?: SidebarStyles;
+}
+export interface SidebarStyles {
+    container?: ViewProps;
+    header?: ViewProps;
+    content?: ViewProps;
+    footer?: ViewProps;
+    backdrop?: ViewProps;
+    toggleButton?: ViewProps;
+    toggleButtonIcon?: ViewProps;
+    divider?: ViewProps;
+    navItem?: ViewProps;
+    navItemActive?: ViewProps;
+    navItemIcon?: ViewProps;
+    navItemText?: ViewProps;
+    navItemBagde?: ViewProps;
+}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { SidebarProps, SidebarHeaderProps, SidebarContentProps, SidebarFooterProps } from './Sidebar.props';
+import { SidebarContextType } from './Sidebar.type';
+export declare const useSidebarContext: () => SidebarContextType;
+export declare const SidebarProvider: React.FC<{
+    value: SidebarContextType;
+    children: React.ReactNode;
+}>;
+export declare const SidebarHeader: React.FC<SidebarHeaderProps>;
+export declare const SidebarContent: React.FC<SidebarContentProps>;
+export declare const SidebarFooter: React.FC<SidebarFooterProps>;
+export declare const SidebarView: React.FC<SidebarProps>;
+interface SideBarNavItemProps {
+    icon: React.ReactNode;
+    label: string;
+    isActive?: boolean;
+    ariaLabel?: string;
+    badge?: number;
+}
+export declare const SideBarNavItem: ({ icon, label, isActive, badge, views, ...props }: SideBarNavItemProps & any) => React.JSX.Element;
+export {};

package/dist/components/Sidebar/Sidebar.d.ts

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

package/dist/components/Sidebar/examples/accessibleSidebar.d.ts

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

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

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

package/dist/components/Sidebar/examples/customized.d.ts

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

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

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

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

@@ -0,0 +1,12 @@
+/**
+ * Sidebar Examples - Design System
+ *
+ * Showcases the Sidebar 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 DesignSystemSidebar: () => React.JSX.Element;

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

@@ -0,0 +1,8 @@
+export * from './default';
+export * from './designSystem';
+export * from './variants';
+export * from './positions';
+export * from './sizes';
+export * from './controlled';
+export * from './customized';
+export * from './accessibleSidebar';

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,12 @@
+export * from './default';
+export * from './sizes';
+export * from './variants';
+export * from './disabled';
+export * from './custom';
+export * from './range';
+export * from './stepValues';
+export * from './vertical';
+export * from './tooltip';
+export * from './controlled';
+export * from './shapes';
+export * from './tooltipIntegration';

package/dist/components/Slider/examples/tooltipIntegration.d.ts

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

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

@@ -0,0 +1,31 @@
+/**
+ * Table Styles
+ *
+ * Defines the styles for the Table 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 { TableViewStyles } from './Table.type';
+/**
+ * Default table styles following the design system
+ */
+export declare const DefaultTableStyles: TableViewStyles;
+/**
+ * Compact table styles
+ */
+export declare const CompactTableStyles: TableViewStyles;
+/**
+ * Striped table styles
+ */
+export declare const StripedTableStyles: TableViewStyles;
+/**
+ * Bordered table styles
+ */
+export declare const BorderedTableStyles: TableViewStyles;
+/**
+ * Dark theme table styles
+ */
+export declare const DarkTableStyles: TableViewStyles;

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

@@ -1,3 +1,9 @@
+/**
+ * Table View Component
+ *
+ * Renders a table with various styles and states
+ * according to the design guidelines.
+ */
 import React from 'react';
 import { ViewProps } from 'app-studio';
 import { TableViewProps } from './Table.props';

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

@@ -0,0 +1,12 @@
+/**
+ * Table Examples - Design System
+ *
+ * Showcases the Table 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 DesignSystemTable: () => React.JSX.Element;

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

@@ -1,5 +1,6 @@
 export * from './caption';
 export * from './default';
+export * from './designSystem';
 export * from './footer';
 export * from './styles';
 export * from './data';

package/dist/components/Tabs/Tabs/TabHeader.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { Tab } from './Tabs.type';
+export interface TabHeaderProps {
+    /** The tab data */
+    tab: Tab;
+    /** Whether this tab is currently active */
+    isActive: boolean;
+    /** Handler for when the tab is clicked */
+    onClick: () => void;
+    /** Position of the icon relative to the text */
+    iconPosition?: 'left' | 'right' | 'top' | 'bottom';
+    /** Custom styles for the tab header */
+    tabStyles?: ViewProps;
+    /** Custom styles for the tab text */
+    textStyles?: ViewProps;
+}
+/**
+ * TabHeader component renders a single tab in the tab navigation.
+ * It's designed to be a lightweight alternative to using Button components.
+ */
+export declare const TabHeader: React.FC<TabHeaderProps>;

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

@@ -10,10 +10,12 @@ export interface TabsProps {
     initialTabValue?: string | number;
     /** Optional callback function triggered when the active tab changes. Receives the newly active tab object. */
     onTabChange?: (activeTab: Tab) => void;
-    /** Optional styles object to customize the appearance of the tabs container, headers, buttons, text, and content area. */
+    /** Optional styles object to customize the appearance of the tabs container, headers, text, and content area. */
     views?: TabsStyles;
+    /** Optional position of the icon relative to the text in tab headers. */
+    iconPosition?: 'left' | 'right' | 'top' | 'bottom';
     /**
-     * Optional custom renderer for a single tab button/header.
+     * Optional custom renderer for a single tab header.
      * Receives the tab data, whether it's currently active, and an onClick handler to activate the tab.
      */
     renderTab?: (tab: Tab, isActive: boolean, onClick: () => void) => React.ReactNode;

package/dist/components/Tabs/examples/customHeader.d.ts

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

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

@@ -1,2 +1,3 @@
 export * from './default';
 export * from './styles';
+export * from './customHeader';