@app-studio/components 0.10.17

package/dist/native/components/ShareButton/ShareButton/ShareButton.props.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ButtonProps } from '../../Button/Button/Button.props';
+export type NavigatorShareData = Parameters<Navigator['share']>[0];
+export interface ShareButtonProps extends Omit<ButtonProps, 'onClick'> {
+    shareData: NavigatorShareData;
+    label?: React.ReactNode;
+    onShareStart?: () => void;
+    onShareSuccess?: () => void;
+    onShareCancel?: () => void;
+    onShareError?: (error: unknown) => void;
+    onUnsupported?: () => void;
+    disableWhenUnsupported?: boolean;
+    onClick?: ButtonProps['onClick'];
+}
+export interface ShareButtonViewProps extends Omit<ShareButtonProps, 'shareData' | 'onShareStart' | 'onShareSuccess' | 'onShareCancel' | 'onShareError' | 'onUnsupported' | 'onClick'> {
+    isSupported: boolean;
+    isSharing: boolean;
+    onShare: ButtonProps['onClick'];
+}

package/dist/native/components/ShareButton/ShareButton/ShareButton.props.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ShareButton.props.js.map

package/dist/native/components/ShareButton/ShareButton/ShareButton.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShareButton.props.js","sourceRoot":"","sources":["../../../../../src/components/ShareButton/ShareButton/ShareButton.props.ts"],"names":[],"mappings":""}

package/dist/native/components/ShareButton/ShareButton/ShareButton.state.d.ts

@@ -0,0 +1,6 @@
+import { ShareButtonProps } from './ShareButton.props';
+export declare const useShareButton: (props: ShareButtonProps) => {
+    isSupported: any;
+    isSharing: boolean;
+    handleShare: (...args: unknown[]) => void;
+};

package/dist/native/components/ShareButton/ShareButton/ShareButton.state.js

@@ -0,0 +1,90 @@
+import React from 'react';
+// This file manages the state and logic for the ShareButton component, including browser Web Share API feature detection, handling sharing operations, and managing various sharing outcomes and states.
+const getNavigator = () => typeof navigator === 'undefined' ? undefined : navigator;
+const canShareData = (nav, data) => {
+    if (!nav || typeof nav.share !== 'function') {
+        return false;
+    }
+    if (typeof nav.canShare === 'function') {
+        try {
+            return nav.canShare(data);
+        }
+        catch {
+            return false;
+        }
+    }
+    return true;
+};
+const getErrorName = (error) => {
+    if (typeof error === 'object' && error !== null && 'name' in error) {
+        return String(error.name);
+    }
+    return undefined;
+};
+export const useShareButton = (props) => {
+    const { shareData, onClick, onUnsupported, onShareStart, onShareSuccess, onShareCancel, onShareError, } = props;
+    const [isSharing, setIsSharing] = React.useState(false);
+    const isSupported = React.useMemo(() => canShareData(getNavigator(), shareData), [shareData]);
+    const handleShare = React.useCallback((...args) => {
+        onClick?.(...args);
+        const nav = getNavigator();
+        if (!nav || typeof nav.share !== 'function') {
+            onUnsupported?.();
+            return;
+        }
+        if (isSharing) {
+            return;
+        }
+        if (typeof nav.canShare === 'function') {
+            try {
+                if (!nav.canShare(shareData)) {
+                    onUnsupported?.();
+                    return;
+                }
+            }
+            catch (error) {
+                onShareError?.(error);
+                return;
+            }
+        }
+        setIsSharing(true);
+        onShareStart?.();
+        try {
+            void nav
+                .share(shareData)
+                .then(() => {
+                onShareSuccess?.();
+            })
+                .catch((error) => {
+                const errorName = getErrorName(error);
+                if (errorName === 'AbortError') {
+                    onShareCancel?.();
+                    return;
+                }
+                onShareError?.(error);
+            })
+                .finally(() => {
+                setIsSharing(false);
+            });
+        }
+        catch (error) {
+            setIsSharing(false);
+            onShareError?.(error);
+        }
+    }, [
+        isSharing,
+        onClick,
+        onShareCancel,
+        onShareError,
+        onShareStart,
+        onShareSuccess,
+        onUnsupported,
+        shareData,
+    ]);
+    return {
+        isSupported,
+        isSharing,
+        handleShare,
+    };
+};
+//# sourceMappingURL=ShareButton.state.js.map

package/dist/native/components/ShareButton/ShareButton/ShareButton.state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShareButton.state.js","sourceRoot":"","sources":["../../../../../src/components/ShareButton/ShareButton/ShareButton.state.ts"],"names":[],"mappings":"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"}

package/dist/native/components/ShareButton/ShareButton/ShareButton.view.d.ts

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

package/dist/native/components/ShareButton/ShareButton/ShareButton.view.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Button } from '../../Button/Button';
+import { ShareIcon } from '../../Icon/Icon';
+// Defines a mapping from different size categories (extra-small, small, medium, large, extra-large) to their corresponding numerical pixel dimensions for icons.
+const ICON_SIZE_MAP = {
+    xs: 12,
+    sm: 14,
+    md: 16,
+    lg: 18,
+    xl: 20,
+};
+// Renders the visual representation of the ShareButton component. It accepts various props to control its appearance, state, and behavior.
+const ShareButtonView = ({ 
+// Indicates whether the Web Share API is supported in the current browser environment.
+isSupported, 
+// A boolean flag indicating if a sharing operation is currently active or in progress.
+isSharing, 
+// The callback function to be executed when the share button is clicked, typically initiating the sharing process.
+onShare, 
+// The text label to display on the button, which can be overridden by 'children'.
+label, 
+// React children to be rendered inside the button, providing a flexible way to add content and overriding the 'label' prop.
+children, 
+// A custom icon component to render within the button. If not provided, a default ShareIcon will be used.
+icon, 
+// Specifies the predefined size of the button and its default icon (e.g., 'xs', 'sm', 'md', 'lg', 'xl').
+size, 
+// A boolean prop that explicitly disables the button, preventing user interaction.
+isDisabled, 
+// A boolean prop that, when true, displays a loading spinner within the button.
+isLoading, 
+// Determines the placement of the icon relative to the button's text (e.g., 'left' or 'right').
+iconPosition, 
+// A boolean flag that, if true, will automatically disable the button when the Web Share API is not supported.
+disableWhenUnsupported = true, ...rest }) => {
+    // Determines the effective size for the button, defaulting to 'md' if no size is explicitly provided via props.
+    const resolvedSize = size ?? 'md';
+    // Determines the icon component to be displayed. If no custom icon is provided, it defaults to a ShareIcon with dimensions based on the resolved size.
+    const resolvedIcon = icon ?? (<ShareIcon widthHeight={ICON_SIZE_MAP[resolvedSize]} strokeWidth={1.5} filled={false}/>);
+    // Calculates the final disabled state of the button, considering explicit `isDisabled` and whether the share functionality is unsupported and `disableWhenUnsupported` is active.
+    const shouldDisable = Boolean(isDisabled) || (!isSupported && disableWhenUnsupported);
+    // Determines if the button should display a loading state, either due to an explicit `isLoading` prop or if a sharing operation is currently in progress.
+    const shouldShowLoader = Boolean(isLoading) || isSharing;
+    return (<Button {...rest} size={resolvedSize} icon={resolvedIcon} iconPosition={iconPosition ?? 'left'} isDisabled={shouldDisable} isLoading={shouldShowLoader} onClick={onShare}>
+      {children ?? label ?? 'Share'}
+    </Button>);
+};
+export default ShareButtonView;
+//# sourceMappingURL=ShareButton.view.js.map

package/dist/native/components/ShareButton/ShareButton/ShareButton.view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShareButton.view.js","sourceRoot":"","sources":["../../../../../src/components/ShareButton/ShareButton/ShareButton.view.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,iKAAiK;AACjK,MAAM,aAAa,GAAqD;IACtE,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;CACP,CAAC;AACF,2IAA2I;AAC3I,MAAM,eAAe,GAAmC,CAAC;AACvD,uFAAuF;AACvF,WAAW;AACX,uFAAuF;AACvF,SAAS;AACT,mHAAmH;AACnH,OAAO;AACP,kFAAkF;AAClF,KAAK;AACL,4HAA4H;AAC5H,QAAQ;AACR,0GAA0G;AAC1G,IAAI;AACJ,yGAAyG;AACzG,IAAI;AACJ,mFAAmF;AACnF,UAAU;AACV,gFAAgF;AAChF,SAAS;AACT,gGAAgG;AAChG,YAAY;AACZ,+GAA+G;AAC/G,sBAAsB,GAAG,IAAI,EAC7B,GAAG,IAAI,EACR,EAAE,EAAE;IACH,gHAAgH;IAChH,MAAM,YAAY,GAAG,IAAI,IAAI,IAAI,CAAC;IAClC,uJAAuJ;IACvJ,MAAM,YAAY,GAAG,IAAI,IAAI,CAC3B,CAAC,SAAS,CACR,WAAW,CAAC,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CACzC,WAAW,CAAC,CAAC,GAAG,CAAC,CACjB,MAAM,CAAC,CAAC,KAAK,CAAC,EACd,CACH,CAAC;IACF,kLAAkL;IAClL,MAAM,aAAa,GACjB,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,WAAW,IAAI,sBAAsB,CAAC,CAAC;IAClE,0JAA0J;IAC1J,MAAM,gBAAgB,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,SAAS,CAAC;IACzD,OAAO,CACL,CAAC,MAAM,CACL,IAAI,IAAI,CAAC,CACT,IAAI,CAAC,CAAC,YAAY,CAAC,CACnB,IAAI,CAAC,CAAC,YAAY,CAAC,CACnB,YAAY,CAAC,CAAC,YAAY,IAAI,MAAM,CAAC,CACrC,UAAU,CAAC,CAAC,aAAa,CAAC,CAC1B,SAAS,CAAC,CAAC,gBAAgB,CAAC,CAC5B,OAAO,CAAC,CAAC,OAAO,CAAC,CAEjB;MAAA,CAAC,QAAQ,IAAI,KAAK,IAAI,OAAO,CAC/B;IAAA,EAAE,MAAM,CAAC,CACV,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,eAAe,CAAC"}

package/dist/native/components/ShareButton/ShareButton.d.ts

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

package/dist/native/components/ShareButton/ShareButton.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ShareButtonView from './ShareButton/ShareButton.view';
+import { useShareButton } from './ShareButton/ShareButton.state';
+const ShareButtonComponent = (props) => {
+    const { isSupported, isSharing, handleShare } = useShareButton(props);
+    const { shareData: _shareData, onShareStart: _onShareStart, onShareSuccess: _onShareSuccess, onShareCancel: _onShareCancel, onShareError: _onShareError, onUnsupported: _onUnsupported, onClick: _onClick, ...viewProps } = props;
+    return (<ShareButtonView {...viewProps} isSupported={isSupported} isSharing={isSharing} onShare={handleShare}/>);
+};
+// This file defines the `ShareButton` component, serving as a smart container that integrates browser sharing logic using the `useShareButton` hook and renders its visual representation via `ShareButtonView`.
+export const ShareButton = ShareButtonComponent;
+//# sourceMappingURL=ShareButton.js.map

package/dist/native/components/ShareButton/ShareButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShareButton.js","sourceRoot":"","sources":["../../../../src/components/ShareButton/ShareButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,eAAe,MAAM,gCAAgC,CAAC;AAE7D,OAAO,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAC;AACjE,MAAM,oBAAoB,GAA+B,CAAC,KAAK,EAAE,EAAE;IACjE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;IACtE,MAAM,EACJ,SAAS,EAAE,UAAU,EACrB,YAAY,EAAE,aAAa,EAC3B,cAAc,EAAE,eAAe,EAC/B,aAAa,EAAE,cAAc,EAC7B,YAAY,EAAE,aAAa,EAC3B,aAAa,EAAE,cAAc,EAC7B,OAAO,EAAE,QAAQ,EACjB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IACV,OAAO,CACL,CAAC,eAAe,CACd,IAAI,SAAS,CAAC,CACd,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,OAAO,CAAC,CAAC,WAAW,CAAC,EACrB,CACH,CAAC;AACJ,CAAC,CAAC;AACF,iNAAiN;AACjN,MAAM,CAAC,MAAM,WAAW,GAAG,oBAAoB,CAAC"}

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

@@ -0,0 +1,54 @@
+import { ViewProps } from 'app-studio';
+import React from 'react';
+import { Position, Size, Variant, BreakpointBehavior, SidebarStyles, Elevation, TransitionPreset, SidebarContextType } from './Sidebar.type';
+export interface SidebarProps {
+    children: React.ReactNode;
+    position?: Position;
+    size?: Size;
+    variant?: Variant;
+    defaultExpanded?: boolean;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    fixed?: boolean;
+    hasBackdrop?: boolean;
+    showToggleButton?: boolean;
+    expandedWidth?: string | number;
+    collapsedWidth?: string | number;
+    breakpoint?: number;
+    breakpointBehavior?: BreakpointBehavior;
+    elevation?: Elevation;
+    transitionPreset?: TransitionPreset;
+    ariaLabel?: string;
+    views?: SidebarStyles;
+    [key: string]: any;
+}
+export interface SidebarHeaderProps {
+    children: React.ReactNode;
+    showToggleButton?: boolean;
+    views?: {
+        header?: ViewProps;
+        toggleButton?: ViewProps;
+        toggleButtonIcon?: ViewProps;
+    };
+    [key: string]: any;
+}
+export interface SidebarContentProps {
+    children: React.ReactNode;
+    views?: {
+        content?: ViewProps;
+    };
+    [key: string]: any;
+}
+export interface SidebarFooterProps {
+    children: React.ReactNode;
+    views?: {
+        footer?: ViewProps;
+    };
+    [key: string]: any;
+}
+export interface SidebarType extends React.FC<SidebarProps> {
+    Header: React.FC<SidebarHeaderProps>;
+    Content: React.FC<SidebarContentProps>;
+    Footer: React.FC<SidebarFooterProps>;
+    useContext: () => SidebarContextType;
+}

package/dist/native/components/Sidebar/Sidebar/Sidebar.props.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Sidebar.props.js.map

package/dist/native/components/Sidebar/Sidebar/Sidebar.props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.props.js","sourceRoot":"","sources":["../../../../../src/components/Sidebar/Sidebar/Sidebar.props.ts"],"names":[],"mappings":""}

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

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

package/dist/native/components/Sidebar/Sidebar/Sidebar.state.js

@@ -0,0 +1,44 @@
+import { useState, useEffect } from 'react';
+import { useResponsive } from 'app-studio';
+// This file defines the `useSidebarState` custom hook, which encapsulates the logic for managing the expanded state of a sidebar component, including state initialization, controlled component synchronization via props, and methods to toggle, expand, or collapse the sidebar, alongside responsive behavior for mobile devices.
+export const useSidebarState = (defaultExpanded = true, expanded, onExpandedChange, breakpoint) => {
+    const { on } = useResponsive();
+    const isMobile = on('mobile');
+    const [isExpanded, setIsExpanded] = useState(expanded !== undefined ? expanded : defaultExpanded);
+    useEffect(() => {
+        if (expanded !== undefined) {
+            setIsExpanded(expanded);
+        }
+    }, [expanded]);
+    const toggleExpanded = () => {
+        const newExpanded = !isExpanded;
+        setIsExpanded(newExpanded);
+        if (onExpandedChange) {
+            onExpandedChange(newExpanded);
+        }
+    };
+    const expand = () => {
+        if (!isExpanded) {
+            setIsExpanded(true);
+            if (onExpandedChange) {
+                onExpandedChange(true);
+            }
+        }
+    };
+    const collapse = () => {
+        if (isExpanded) {
+            setIsExpanded(false);
+            if (onExpandedChange) {
+                onExpandedChange(false);
+            }
+        }
+    };
+    return {
+        isExpanded,
+        toggleExpanded,
+        expand,
+        collapse,
+        isMobile,
+    };
+};
+//# sourceMappingURL=Sidebar.state.js.map

package/dist/native/components/Sidebar/Sidebar/Sidebar.state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.state.js","sourceRoot":"","sources":["../../../../../src/components/Sidebar/Sidebar/Sidebar.state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,sUAAsU;AACtU,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,kBAA2B,IAAI,EAC/B,QAAkB,EAClB,gBAA8C,EAC9C,UAAmB,EACnB,EAAE;IACF,MAAM,EAAE,EAAE,EAAE,GAAG,aAAa,EAAE,CAAC;IAC/B,MAAM,QAAQ,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC;IAC9B,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAC1C,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CACpD,CAAC;IACF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC3B,aAAa,CAAC,QAAQ,CAAC,CAAC;QAC1B,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACf,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,MAAM,WAAW,GAAG,CAAC,UAAU,CAAC;QAChC,aAAa,CAAC,WAAW,CAAC,CAAC;QAC3B,IAAI,gBAAgB,EAAE,CAAC;YACrB,gBAAgB,CAAC,WAAW,CAAC,CAAC;QAChC,CAAC;IACH,CAAC,CAAC;IACF,MAAM,MAAM,GAAG,GAAG,EAAE;QAClB,IAAI,CAAC,UAAU,EAAE,CAAC;YAChB,aAAa,CAAC,IAAI,CAAC,CAAC;YACpB,IAAI,gBAAgB,EAAE,CAAC;gBACrB,gBAAgB,CAAC,IAAI,CAAC,CAAC;YACzB,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IACF,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,IAAI,UAAU,EAAE,CAAC;YACf,aAAa,CAAC,KAAK,CAAC,CAAC;YACrB,IAAI,gBAAgB,EAAE,CAAC;gBACrB,gBAAgB,CAAC,KAAK,CAAC,CAAC;YAC1B,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IACF,OAAO;QACL,UAAU;QACV,cAAc;QACd,MAAM;QACN,QAAQ;QACR,QAAQ;KACT,CAAC;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,13 @@
+import { ViewProps } from 'app-studio';
+import { Position, Size, Variant, Elevation, TransitionPreset } from './Sidebar.type';
+export declare const SidebarSizes: Record<Size, {
+    expandedWidth: string;
+    collapsedWidth: string;
+}>;
+export declare const getSidebar: (themeMode: string) => Record<Variant, ViewProps>;
+export declare const SidebarVariants: Record<Variant, ViewProps>;
+export declare const SidebarPositions: Record<Position, ViewProps>;
+export declare const SidebarElevations: Record<Elevation, ViewProps>;
+export declare const SidebarTransitions: Record<TransitionPreset, string>;
+export declare const SidebarItemActive: ViewProps;
+export declare const SidebarItemHover: ViewProps;

package/dist/native/components/Sidebar/Sidebar/Sidebar.style.js

@@ -0,0 +1,106 @@
+// Defines a map for various sidebar sizes (sm, md, lg, xl), specifying their `expandedWidth` and `collapsedWidth` properties.
+export const SidebarSizes = {
+    sm: {
+        expandedWidth: '240px',
+        collapsedWidth: '64px',
+    },
+    md: {
+        expandedWidth: '280px',
+        collapsedWidth: '72px',
+    },
+    lg: {
+        expandedWidth: '320px',
+        collapsedWidth: '80px',
+    },
+    xl: {
+        expandedWidth: '360px',
+        collapsedWidth: '88px',
+    },
+};
+// Generates a set of `ViewProps` for the sidebar based on its `Variant` (default, filled, outline, subtle, elevated) and the current `themeMode` (light/dark).
+export const getSidebar = (themeMode) => {
+    const isDark = themeMode === 'dark';
+    return {
+        default: {
+            backgroundColor: isDark ? 'color-gray-900' : 'color-white',
+            color: isDark ? 'color-gray-100' : 'color-gray-800',
+            transition: 'background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease',
+        },
+        filled: {
+            backgroundColor: isDark ? 'color-gray-800' : 'color-gray-100',
+            color: isDark ? 'color-gray-100' : 'color-gray-800',
+            transition: 'background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease',
+        },
+        outline: {
+            backgroundColor: isDark ? 'color-gray-900' : 'color-white',
+            borderWidth: '1px',
+            borderStyle: 'solid',
+            borderColor: isDark ? 'color-gray-700' : 'color-gray-200',
+            color: isDark ? 'color-gray-100' : 'color-gray-800',
+            transition: 'background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease',
+        },
+        subtle: {
+            backgroundColor: isDark ? 'color-gray-800' : 'color-gray-50',
+            color: isDark ? 'color-gray-100' : 'color-gray-800',
+            transition: 'background-color 0.2s ease, color 0.2s ease',
+        },
+        elevated: {
+            backgroundColor: isDark ? 'color-gray-900' : 'color-white',
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+            color: isDark ? 'color-gray-100' : 'color-gray-800',
+            transition: 'all 0.2s ease-in-out',
+        },
+    };
+};
+// Exports the default sidebar variants, pre-configured using the `getSidebar` function for a 'light' theme.
+export const SidebarVariants = getSidebar('light');
+// Defines styling configurations for the sidebar based on its `Position` (left or right), including border styles.
+export const SidebarPositions = {
+    left: {
+        left: 0,
+        borderRightWidth: '1px',
+        borderRightStyle: 'solid',
+        borderRightColor: 'color-gray-200',
+    },
+    right: {
+        right: 0,
+        borderLeftWidth: '1px',
+        borderLeftStyle: 'solid',
+        borderLeftColor: 'color-gray-200',
+    },
+};
+// Specifies shadow properties for different `Elevation` levels (none, low, medium, high) to be applied to the sidebar.
+export const SidebarElevations = {
+    none: {},
+    low: {
+        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1)',
+    },
+    medium: {
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.12)',
+    },
+    high: {
+        boxShadow: '0 10px 30px rgba(0, 0, 0, 0.15)',
+    },
+};
+// Provides predefined CSS transition strings for various animation speed `TransitionPreset` options (fast, normal, slow, bounce).
+export const SidebarTransitions = {
+    fast: 'all 0.2s ease-in-out',
+    normal: 'all 0.3s ease-in-out',
+    slow: 'all 0.5s ease-in-out',
+    bounce: 'all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55)',
+};
+// Defines the visual styles to apply when a sidebar item is in an active state, including background color, text color, font weight, and a left border.
+export const SidebarItemActive = {
+    backgroundColor: 'theme-primary-100',
+    color: 'theme-primary',
+    fontWeight: '600',
+    borderLeftWidth: '2px',
+    borderLeftStyle: 'solid',
+    borderLeftColor: 'theme-primary',
+};
+// Specifies the visual styles to apply when a user hovers over a sidebar item, primarily changing the background color with a transition.
+export const SidebarItemHover = {
+    backgroundColor: 'color-gray-100',
+    transition: 'all 0.2s ease-in-out',
+};
+//# sourceMappingURL=Sidebar.style.js.map

package/dist/native/components/Sidebar/Sidebar/Sidebar.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.style.js","sourceRoot":"","sources":["../../../../../src/components/Sidebar/Sidebar/Sidebar.style.ts"],"names":[],"mappings":"AAQA,8HAA8H;AAC9H,MAAM,CAAC,MAAM,YAAY,GAGrB;IACF,EAAE,EAAE;QACF,aAAa,EAAE,OAAO;QACtB,cAAc,EAAE,MAAM;KACvB;IACD,EAAE,EAAE;QACF,aAAa,EAAE,OAAO;QACtB,cAAc,EAAE,MAAM;KACvB;IACD,EAAE,EAAE;QACF,aAAa,EAAE,OAAO;QACtB,cAAc,EAAE,MAAM;KACvB;IACD,EAAE,EAAE;QACF,aAAa,EAAE,OAAO;QACtB,cAAc,EAAE,MAAM;KACvB;CACF,CAAC;AACF,+JAA+J;AAC/J,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,SAAiB,EAA8B,EAAE;IAC1E,MAAM,MAAM,GAAG,SAAS,KAAK,MAAM,CAAC;IACpC,OAAO;QACL,OAAO,EAAE;YACP,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa;YAC1D,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB;YACnD,UAAU,EACR,mEAAmE;SACtE;QACD,MAAM,EAAE;YACN,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB;YAC7D,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB;YACnD,UAAU,EACR,mEAAmE;SACtE;QACD,OAAO,EAAE;YACP,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa;YAC1D,WAAW,EAAE,KAAK;YAClB,WAAW,EAAE,OAAO;YACpB,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB;YACzD,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB;YACnD,UAAU,EACR,qEAAqE;SACxE;QACD,MAAM,EAAE;YACN,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,eAAe;YAC5D,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB;YACnD,UAAU,EAAE,6CAA6C;SAC1D;QACD,QAAQ,EAAE;YACR,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa;YAC1D,SAAS,EAAE,+BAA+B;YAC1C,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB;YACnD,UAAU,EAAE,sBAAsB;SACnC;KACF,CAAC;AACJ,CAAC,CAAC;AACF,4GAA4G;AAC5G,MAAM,CAAC,MAAM,eAAe,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC;AACnD,mHAAmH;AACnH,MAAM,CAAC,MAAM,gBAAgB,GAAgC;IAC3D,IAAI,EAAE;QACJ,IAAI,EAAE,CAAC;QACP,gBAAgB,EAAE,KAAK;QACvB,gBAAgB,EAAE,OAAO;QACzB,gBAAgB,EAAE,gBAAgB;KACnC;IACD,KAAK,EAAE;QACL,KAAK,EAAE,CAAC;QACR,eAAe,EAAE,KAAK;QACtB,eAAe,EAAE,OAAO;QACxB,eAAe,EAAE,gBAAgB;KAClC;CACF,CAAC;AACF,uHAAuH;AACvH,MAAM,CAAC,MAAM,iBAAiB,GAAiC;IAC7D,IAAI,EAAE,EAAE;IACR,GAAG,EAAE;QACH,SAAS,EAAE,8BAA8B;KAC1C;IACD,MAAM,EAAE;QACN,SAAS,EAAE,gCAAgC;KAC5C;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,iCAAiC;KAC7C;CACF,CAAC;AACF,kIAAkI;AAClI,MAAM,CAAC,MAAM,kBAAkB,GAAqC;IAClE,IAAI,EAAE,sBAAsB;IAC5B,MAAM,EAAE,sBAAsB;IAC9B,IAAI,EAAE,sBAAsB;IAC5B,MAAM,EAAE,gDAAgD;CACzD,CAAC;AACF,wJAAwJ;AACxJ,MAAM,CAAC,MAAM,iBAAiB,GAAc;IAC1C,eAAe,EAAE,mBAAmB;IACpC,KAAK,EAAE,eAAe;IACtB,UAAU,EAAE,KAAK;IACjB,eAAe,EAAE,KAAK;IACtB,eAAe,EAAE,OAAO;IACxB,eAAe,EAAE,eAAe;CACjC,CAAC;AACF,0IAA0I;AAC1I,MAAM,CAAC,MAAM,gBAAgB,GAAc;IACzC,eAAe,EAAE,gBAAgB;IACjC,UAAU,EAAE,sBAAsB;CACnC,CAAC"}

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

@@ -0,0 +1,32 @@
+import { ViewProps } from 'app-studio';
+export type Position = 'left' | 'right';
+export type Size = 'sm' | 'md' | 'lg' | 'xl';
+export type Variant = 'default' | 'filled' | 'outline' | 'subtle' | 'elevated';
+export type BreakpointBehavior = 'collapse' | 'overlay' | 'hide';
+export type Elevation = 'none' | 'low' | 'medium' | 'high';
+export 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/native/components/Sidebar/Sidebar/Sidebar.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Sidebar.type.js.map

package/dist/native/components/Sidebar/Sidebar/Sidebar.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.type.js","sourceRoot":"","sources":["../../../../../src/components/Sidebar/Sidebar/Sidebar.type.ts"],"names":[],"mappings":""}

package/dist/native/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, isDisabled, badge, views, ariaLabel, ...props }: SideBarNavItemProps & any) => React.JSX.Element;
+export {};

package/dist/native/components/Sidebar/Sidebar/Sidebar.view.js

@@ -0,0 +1,95 @@
+import React, { createContext, useContext } from 'react';
+import { View } from 'app-studio';
+import { Vertical } from 'app-studio';
+import { Horizontal } from 'app-studio';
+import { Text } from 'app-studio';
+import { ChevronIcon } from '../../Icon/Icon';
+import { SidebarSizes, SidebarVariants, SidebarPositions, SidebarElevations, SidebarTransitions, } from './Sidebar.style';
+import { Badge } from '../../Badge/Badge';
+// Initializes the React context for the Sidebar component, providing a way to share the sidebar's state and functions throughout the component tree with default values.
+const SidebarContext = createContext({
+    isExpanded: true,
+    toggleExpanded: () => { },
+    expand: () => { },
+    collapse: () => { },
+    position: 'left',
+    size: 'md',
+    variant: 'default',
+});
+// Custom hook that allows components to easily consume the `SidebarContext` and access its shared values like `isExpanded` and `toggleExpanded`.
+export const useSidebarContext = () => useContext(SidebarContext);
+// Provides the `SidebarContext` value to its children, making the sidebar's state and actions available to all descendant components within its scope.
+export const SidebarProvider = ({ value, children }) => {
+    return (<SidebarContext.Provider value={value}>{children}</SidebarContext.Provider>);
+};
+// Renders the header section of the Sidebar, optionally including a toggle button to expand or collapse the sidebar based on its current state.
+export const SidebarHeader = ({ children, showToggleButton = true, views, ...props }) => {
+    // Retrieves the current expansion state, toggle function, and position from the `SidebarContext` to control the header's appearance and behavior.
+    const { isExpanded, toggleExpanded, position } = useSidebarContext();
+    return (<Horizontal width="100%" padding="16px" borderBottomWidth="1px" borderBottomStyle="solid" borderBottomColor="color-gray-200" alignItems="center" justifyContent="space-between" {...views?.header} {...props}>
+      {isExpanded ? (<Horizontal width="100%" alignItems="center" justifyContent="space-between">
+          {children}
+          {showToggleButton && (<View as="button" display="flex" alignItems="center" justifyContent="center" width="32px" height="32px" borderWidth="1px" borderStyle="solid" borderColor="color-gray-200" borderRadius="4px" backgroundColor="transparent" cursor="pointer" _hover={{ backgroundColor: 'color-gray-100' }} onClick={toggleExpanded} aria-label={isExpanded ? 'Collapse sidebar' : 'Expand sidebar'} {...views?.toggleButton}>
+              <ChevronIcon orientation={position === 'left' ? 'left' : 'right'} widthHeight={16} {...views?.toggleButtonIcon}/>
+            </View>)}
+        </Horizontal>) : (<View width="100%" display="flex" alignItems="center" justifyContent="center">
+          {showToggleButton && (<View as="button" display="flex" alignItems="center" justifyContent="center" width="32px" height="32px" borderWidth="1px" borderStyle="solid" borderColor="color-gray-200" borderRadius="4px" backgroundColor="transparent" cursor="pointer" _hover={{ backgroundColor: 'color-gray-100' }} onClick={toggleExpanded} aria-label={isExpanded ? 'Collapse sidebar' : 'Expand sidebar'} {...views?.toggleButton}>
+              <ChevronIcon orientation={position === 'left' ? 'right' : 'left'} widthHeight={16} {...views?.toggleButtonIcon}/>
+            </View>)}
+        </View>)}
+    </Horizontal>);
+};
+export const SidebarContent = ({ children, views, ...props }) => {
+    const { isExpanded } = useSidebarContext();
+    return (<View flex="1" width="100%" overflowY="auto" overflowX="hidden" padding={isExpanded ? '16px' : '8px'} {...views?.content} {...props}>
+      {children}
+    </View>);
+};
+export const SidebarFooter = ({ children, views, ...props }) => {
+    const { isExpanded } = useSidebarContext();
+    return (<View width="100%" padding="16px" borderTopWidth="1px" borderTopStyle="solid" borderTopColor="color-gray-200" {...views?.footer} {...props}>
+      {isExpanded ? children : null}
+    </View>);
+};
+export const SidebarView = ({ children, position = 'left', size = 'md', variant = 'default', fixed = false, hasBackdrop = true, expandedWidth, collapsedWidth, breakpoint, breakpointBehavior = 'overlay', elevation = 'none', transitionPreset = 'normal', ariaLabel = 'Sidebar navigation', showToggleButton, toggleExpanded, expand, isExpanded, isMobile, collapse, views, themeMode: elementMode, ...props }) => {
+    const sizeConfig = SidebarSizes[size];
+    const width = isExpanded
+        ? expandedWidth || sizeConfig.expandedWidth
+        : collapsedWidth || sizeConfig.collapsedWidth;
+    const isVisible = !isMobile || (isMobile && breakpointBehavior !== 'hide');
+    const position_type = fixed || (isMobile && breakpointBehavior === 'overlay')
+        ? 'fixed'
+        : 'relative';
+    const showBackdrop = hasBackdrop && isMobile && isExpanded && breakpointBehavior === 'overlay';
+    return (<>
+      
+      {showBackdrop && (<View position="fixed" top={0} left={0} width="100vw" height="100vh" backgroundColor="color-blackAlpha-500" zIndex={998} onClick={collapse} {...views?.backdrop}/>)}
+      
+      {isVisible && (<Vertical position={position_type} top={0} height="100vh" width={width} zIndex={999} transition={SidebarTransitions[transitionPreset]} transform={isMobile && breakpointBehavior === 'overlay' && !isExpanded
+                ? `translateX(${position === 'left' ? '-100%' : '100%'})`
+                : 'translateX(0)'} role="navigation" aria-label={ariaLabel} {...SidebarVariants[variant]} {...SidebarPositions[position]} {...SidebarElevations[elevation]} {...views?.container} {...props}>
+          {React.Children.map(children, (child) => {
+                return child;
+            })}
+        </Vertical>)}
+    </>);
+};
+export const SideBarNavItem = ({ icon, label, isActive = false, isDisabled = false, badge, views, ariaLabel, ...props }) => {
+    const { isExpanded } = useSidebarContext();
+    return (<Horizontal alignItems="center" justifyContent={!isExpanded ? 'center' : undefined} gap={12} padding="8px 12px" borderRadius="4px" backgroundColor={isActive ? 'color-blue-50' : 'transparent'} color={isDisabled
+            ? 'color-gray-400'
+            : isActive
+                ? 'color-blue-600'
+                : 'color-gray-700'} fontWeight={isActive ? 'bold' : 'normal'} cursor={isDisabled ? 'not-allowed' : 'pointer'} opacity={isDisabled ? 0.6 : 1} aria-label={ariaLabel} aria-disabled={isDisabled || undefined} on={{
+            hover: isDisabled
+                ? {}
+                : {
+                    backgroundColor: isActive ? 'color-blue-50' : 'color-gray-100',
+                },
+        }} {...props}>
+      {icon}
+      {isExpanded && <Text>{label}</Text>}
+      {isExpanded && badge && <Badge {...views?.navItemBagde}>{badge}</Badge>}
+    </Horizontal>);
+};
+//# sourceMappingURL=Sidebar.view.js.map