@app-studio/components 0.10.17

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

@@ -0,0 +1,145 @@
+import React, { createContext, useContext, useEffect } from 'react';
+import { View } from 'app-studio';
+import { Horizontal } from 'app-studio';
+import { Vertical } from 'app-studio';
+import { ResizableOrientations, getHandleSizeStyles, HandleVariants, HandleIconStyles, } from './Resizable.style';
+// Initializes the React Context for the Resizable component, providing default values for managing resizable panels' state and actions.
+const ResizableContext = createContext({
+    orientation: 'horizontal',
+    size: 'md',
+    variant: 'default',
+    isResizing: false,
+    setIsResizing: () => { },
+    registerPanel: () => { },
+    unregisterPanel: () => { },
+    getPanelSize: () => 0,
+    setPanelSize: () => { },
+    isPanelCollapsed: () => false,
+    togglePanelCollapse: () => { },
+    startResize: () => { },
+    onResize: () => { },
+    endResize: () => { },
+});
+// A custom hook to access the Resizable context, allowing child components to interact with the global state and functions of the resizable container.
+export const useResizableContext = () => useContext(ResizableContext);
+// Provides the Resizable context to its children, making the resizable state and functions available throughout the component tree.
+export const ResizableProvider = ({ value, children }) => {
+    return (<ResizableContext.Provider value={value}>
+      {children}
+    </ResizableContext.Provider>);
+};
+export const ResizablePanel = ({ children, id, defaultSize, minSize, maxSize, collapsible, defaultCollapsed, onCollapseChange, views, ...props }) => {
+    const { orientation, registerPanel, unregisterPanel, getPanelSize, isPanelCollapsed, togglePanelCollapse, } = useResizableContext();
+    const initialSize = typeof defaultSize === 'string' && defaultSize.endsWith('%')
+        ? 0
+        : typeof defaultSize === 'number'
+            ? defaultSize
+            : 0;
+    useEffect(() => {
+        registerPanel(id, initialSize, minSize, maxSize, collapsible);
+        return () => unregisterPanel(id);
+    }, [
+        id,
+        initialSize,
+        minSize,
+        maxSize,
+        collapsible,
+        registerPanel,
+        unregisterPanel,
+    ]);
+    const size = getPanelSize(id);
+    const isCollapsed = isPanelCollapsed(id);
+    useEffect(() => {
+        if (onCollapseChange && isCollapsed !== undefined) {
+            onCollapseChange(isCollapsed);
+        }
+    }, [isCollapsed, onCollapseChange]);
+    useEffect(() => {
+        if (collapsible && defaultCollapsed && !isCollapsed) {
+            togglePanelCollapse(id);
+        }
+    }, [id, collapsible, defaultCollapsed, isCollapsed, togglePanelCollapse]);
+    if (isCollapsed) {
+        return (<View flex="0 0 auto" width={orientation === 'horizontal' ? '10px' : '100%'} height={orientation === 'vertical' ? '10px' : '100%'} backgroundColor="color-gray-200" cursor="pointer" onClick={() => togglePanelCollapse(id)} aria-label={`Expand panel ${id}`} role="button" tabIndex={0} {...views?.collapsedPanel} {...props}/>);
+    }
+    return (<View flex={size > 0 ? '0 0 auto' : '1'} width={orientation === 'horizontal' ? `${size}px` : '100%'} height={orientation === 'vertical' ? `${size}px` : '100%'} overflow="auto" {...views?.panel} {...props}>
+      {children}
+    </View>);
+};
+export const ResizableHandle = ({ id, position = 'both', disabled = false, withVisualIndicator = true, withCollapseButton = false, collapseTarget, views, ...props }) => {
+    const { orientation, size, variant, startResize, isPanelCollapsed, togglePanelCollapse, } = useResizableContext();
+    const getPanelToCollapse = () => {
+        if (collapseTarget)
+            return collapseTarget;
+        const handleNumMatch = id.match(/\d+$/);
+        if (!handleNumMatch)
+            return '';
+        const handleIndex = parseInt(handleNumMatch[0], 10);
+        if (isNaN(handleIndex))
+            return '';
+        return `panel${handleIndex}`;
+    };
+    const panelToCollapse = getPanelToCollapse();
+    const isTargetPanelCollapsed = isPanelCollapsed(panelToCollapse);
+    const handleMouseDown = (e) => {
+        if (disabled)
+            return;
+        e.preventDefault();
+        const clientPosition = orientation === 'horizontal' ? e.clientX : e.clientY;
+        startResize(id, clientPosition);
+    };
+    const handleTouchStart = (e) => {
+        if (disabled || e.touches.length === 0)
+            return;
+        e.preventDefault();
+        const touch = e.touches[0];
+        const clientPosition = orientation === 'horizontal' ? touch.clientX : touch.clientY;
+        startResize(id, clientPosition);
+    };
+    const handleKeyDown = (e) => {
+        if (disabled)
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            const clientPosition = 0;
+            startResize(id, clientPosition);
+        }
+    };
+    const handleCollapseClick = (e) => {
+        e.stopPropagation();
+        if (panelToCollapse) {
+            togglePanelCollapse(panelToCollapse);
+        }
+    };
+    return (<View role="separator" aria-orientation={orientation} aria-valuemin={0} aria-valuemax={100} tabIndex={disabled ? -1 : 0} cursor={orientation === 'horizontal' ? 'col-resize' : 'row-resize'} display="flex" alignItems="center" justifyContent="center" position="relative" {...getHandleSizeStyles(size, orientation)} {...HandleVariants[variant]} onMouseDown={handleMouseDown} onTouchStart={handleTouchStart} onKeyDown={handleKeyDown} opacity={disabled ? 0.5 : 1} pointerEvents={disabled ? 'none' : 'auto'} {...views?.handle} {...props}>
+      {withVisualIndicator && (<View display="flex" alignItems="center" justifyContent="center" width={orientation === 'horizontal' ? '100%' : 'auto'} height={orientation === 'vertical' ? '100%' : 'auto'} pointerEvents="none" {...views?.handleIcon}>
+          {orientation === 'horizontal' ? (<Horizontal gap={1}>
+              <View {...HandleIconStyles.horizontal}/>
+              <View {...HandleIconStyles.horizontal}/>
+            </Horizontal>) : (<Vertical gap={1}>
+              <View {...HandleIconStyles.vertical}/>
+              <View {...HandleIconStyles.vertical}/>
+            </Vertical>)}
+        </View>)}
+      {withCollapseButton && panelToCollapse && (<View position="absolute" top={orientation === 'horizontal' ? '-20px' : '50%'} left={orientation === 'horizontal' ? '50%' : '-20px'} transform={orientation === 'horizontal'
+                ? 'translateX(-50%)'
+                : 'translateY(-50%)'} width="16px" height="16px" borderRadius="full" backgroundColor="color-gray-100" border="1px solid" borderColor="color-gray-300" display="flex" alignItems="center" justifyContent="center" cursor="pointer" zIndex={1} onClick={handleCollapseClick} aria-label={isTargetPanelCollapsed
+                ? `Expand panel ${panelToCollapse}`
+                : `Collapse panel ${panelToCollapse}`} role="button" tabIndex={0} pointerEvents="auto" _hover={{ backgroundColor: 'color-gray-200' }} {...views?.collapseIcon}>
+          
+          <View width="8px" height="8px" display="flex" alignItems="center" justifyContent="center">
+            {isTargetPanelCollapsed ? (<Horizontal>
+                <View width="6px" height="2px" backgroundColor="color-gray-600"/>
+                <View width="2px" height="6px" backgroundColor="color-gray-600" position="absolute"/>
+              </Horizontal>) : (<View width="6px" height="2px" backgroundColor="color-gray-600"/>)}
+          </View>
+        </View>)}
+    </View>);
+};
+export const ResizableView = ({ children, orientation = 'horizontal', size = 'md', variant = 'default', defaultSizes, minSize, maxSize, collapsible = false, containerRef, autoSaveId, keyboardResizeBy, onLayout, views, ...props }) => {
+    const Container = orientation === 'horizontal' ? Horizontal : Vertical;
+    return (<Container ref={containerRef} width="100%" height="100%" position="relative" overflow="hidden" {...ResizableOrientations[orientation]} {...views?.container} {...props}>
+      {children}
+    </Container>);
+};
+//# sourceMappingURL=Resizable.view.js.map

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

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

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ResizableProps, ResizablePanelProps, ResizableHandleProps } from './Resizable.props';
+import { ResizableContextType } from './Resizable.type';
+export declare const useResizableContext: () => ResizableContextType;
+export declare const ResizableProvider: React.FC<{
+    value: ResizableContextType;
+    children: React.ReactNode;
+}>;
+export declare const ResizablePanel: React.FC<ResizablePanelProps>;
+export declare const ResizableHandle: React.FC<ResizableHandleProps>;
+export declare const ResizableView: React.FC<ResizableProps & {
+    containerRef: React.RefObject<any>;
+}>;

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

@@ -0,0 +1,98 @@
+import React, { createContext, useContext, useEffect } from 'react';
+import { View, Horizontal, Vertical } from 'app-studio';
+import { ResizableOrientations, HandleVariants, HandleIconStyles, } from './Resizable.style';
+const ResizableContext = createContext({
+    orientation: 'horizontal',
+    size: 'md',
+    variant: 'default',
+    isResizing: false,
+    setIsResizing: () => { },
+    registerPanel: () => { },
+    unregisterPanel: () => { },
+    getPanelSize: () => 0,
+    setPanelSize: () => { },
+    isPanelCollapsed: () => false,
+    togglePanelCollapse: () => { },
+    startResize: () => { },
+    onResize: () => { },
+    endResize: () => { },
+});
+export const useResizableContext = () => useContext(ResizableContext);
+export const ResizableProvider = ({ value, children }) => {
+    return (<ResizableContext.Provider value={value}>
+      {children}
+    </ResizableContext.Provider>);
+};
+export const ResizablePanel = ({ children, id, defaultSize, minSize, maxSize, collapsible, defaultCollapsed, onCollapseChange, views, ...props }) => {
+    const { orientation, registerPanel, unregisterPanel, getPanelSize, isPanelCollapsed, togglePanelCollapse, } = useResizableContext();
+    const initialSize = typeof defaultSize === 'string' && defaultSize.endsWith('%')
+        ? 0
+        : typeof defaultSize === 'number'
+            ? defaultSize
+            : 0;
+    useEffect(() => {
+        registerPanel(id, initialSize, minSize, maxSize, collapsible);
+        return () => unregisterPanel(id);
+    }, [id, initialSize, minSize, maxSize, collapsible, registerPanel, unregisterPanel]);
+    const size = getPanelSize(id);
+    const isCollapsed = isPanelCollapsed(id);
+    useEffect(() => {
+        if (onCollapseChange && isCollapsed !== undefined) {
+            onCollapseChange(isCollapsed);
+        }
+    }, [isCollapsed, onCollapseChange]);
+    useEffect(() => {
+        if (collapsible && defaultCollapsed && !isCollapsed) {
+            togglePanelCollapse(id);
+        }
+    }, [id, collapsible, defaultCollapsed, isCollapsed, togglePanelCollapse]);
+    if (isCollapsed) {
+        return (<View width={orientation === 'horizontal' ? 10 : '100%'} height={orientation === 'vertical' ? 10 : '100%'} backgroundColor="color-gray-200" onPress={() => togglePanelCollapse(id)} onClick={() => togglePanelCollapse(id)} {...views?.collapsedPanel} {...props}/>);
+    }
+    return (<View flex={size > 0 ? 0 : 1} width={orientation === 'horizontal' ? size : '100%'} height={orientation === 'vertical' ? size : '100%'} overflow="hidden" {...views?.panel} {...props}>
+      {children}
+    </View>);
+};
+export const ResizableHandle = ({ id, position = 'both', disabled = false, withVisualIndicator = true, withCollapseButton = false, collapseTarget, views, ...props }) => {
+    const { orientation, variant, startResize, isPanelCollapsed, togglePanelCollapse, } = useResizableContext();
+    const getPanelToCollapse = () => {
+        if (collapseTarget)
+            return collapseTarget;
+        const handleNumMatch = id.match(/\d+$/);
+        if (!handleNumMatch)
+            return '';
+        const handleIndex = parseInt(handleNumMatch[0], 10);
+        if (isNaN(handleIndex))
+            return '';
+        return `panel${handleIndex}`;
+    };
+    const panelToCollapse = getPanelToCollapse();
+    const handleTouchStart = (e) => {
+        if (disabled)
+            return;
+        const touch = e.nativeEvent?.touches?.[0];
+        if (!touch)
+            return;
+        const clientPosition = orientation === 'horizontal' ? touch.pageX : touch.pageY;
+        startResize(id, clientPosition);
+    };
+    return (<View alignItems="center" justifyContent="center" position="relative" {...HandleVariants[variant]} onTouchStart={handleTouchStart} opacity={disabled ? 0.5 : 1} {...views?.handle} {...props}>
+      {withVisualIndicator && (<View alignItems="center" justifyContent="center" width={orientation === 'horizontal' ? '100%' : 'auto'} height={orientation === 'vertical' ? '100%' : 'auto'} {...views?.handleIcon}>
+          {orientation === 'horizontal' ? (<Horizontal gap={1}>
+              <View {...HandleIconStyles.horizontal}/>
+              <View {...HandleIconStyles.horizontal}/>
+            </Horizontal>) : (<Vertical gap={1}>
+              <View {...HandleIconStyles.vertical}/>
+              <View {...HandleIconStyles.vertical}/>
+            </Vertical>)}
+        </View>)}
+      {withCollapseButton && panelToCollapse && (<View position="absolute" width={16} height={16} borderRadius={9999} backgroundColor="color-gray-100" borderWidth={1} borderColor="color-gray-300" alignItems="center" justifyContent="center" onPress={() => togglePanelCollapse(panelToCollapse)} onClick={() => togglePanelCollapse(panelToCollapse)} {...views?.collapseIcon}/>)}
+    </View>);
+};
+export const ResizableView = ({ children, orientation = 'horizontal', size = 'md', variant = 'default', containerRef, views, ...props }) => {
+    const Container = orientation === 'horizontal' ? Horizontal : Vertical;
+    return (<Container ref={containerRef} width="100%" height="100%" position="relative" overflow="hidden" {...ResizableOrientations[orientation]} {...views?.container} {...props}>
+      {children}
+    </Container>);
+};
+//# sourceMappingURL=Resizable.view.native.js.map

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

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

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

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

package/dist/native/components/Resizable/Resizable.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useResizableState } from './Resizable/Resizable.state';
+import { ResizableProvider, ResizablePanel, ResizableHandle, ResizableView, } from './Resizable/Resizable.view';
+// This file defines the main `Resizable` component, which orchestrates the functionality for resizable panels. It utilizes the `useResizableState` hook to manage all resizing logic and state, then exposes this context through `ResizableProvider` to its sub-components. The visual layout is rendered by `ResizableView`, and convenience sub-components like `Resizable.Panel` and `Resizable.Handle` are attached for structured usage.
+const ResizableComponent = ({ children, orientation = 'horizontal', size = 'md', variant = 'default', defaultSizes, onSizesChange, minSize = 50, maxSize, collapsible = false, autoSaveId, storage, keyboardResizeBy = 10, views, ...props }) => {
+    const { isResizing, setIsResizing, containerRef, registerPanel, unregisterPanel, getPanelSize, setPanelSize, isPanelCollapsed, togglePanelCollapse, startResize, onResize, endResize, } = useResizableState(orientation, defaultSizes, onSizesChange, minSize, maxSize, collapsible, autoSaveId, storage, keyboardResizeBy);
+    return (<ResizableProvider value={{
+            orientation,
+            size,
+            variant,
+            isResizing,
+            setIsResizing,
+            registerPanel,
+            unregisterPanel,
+            getPanelSize,
+            setPanelSize,
+            isPanelCollapsed,
+            togglePanelCollapse,
+            startResize,
+            onResize,
+            endResize,
+        }}>
+      <ResizableView orientation={orientation} size={size} variant={variant} defaultSizes={defaultSizes} minSize={minSize} maxSize={maxSize} collapsible={collapsible} autoSaveId={autoSaveId} keyboardResizeBy={keyboardResizeBy} containerRef={containerRef} views={views} {...props}>
+        {children}
+      </ResizableView>
+    </ResizableProvider>);
+};
+export const Resizable = ResizableComponent;
+Resizable.Panel = ResizablePanel;
+Resizable.Handle = ResizableHandle;
+//# sourceMappingURL=Resizable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Resizable.js","sourceRoot":"","sources":["../../../../src/components/Resizable/Resizable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EACL,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,aAAa,GACd,MAAM,4BAA4B,CAAC;AACpC,+aAA+a;AAC/a,MAAM,kBAAkB,GAA6B,CAAC,EACpD,QAAQ,EACR,WAAW,GAAG,YAAY,EAC1B,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,YAAY,EACZ,aAAa,EACb,OAAO,GAAG,EAAE,EACZ,OAAO,EACP,WAAW,GAAG,KAAK,EACnB,UAAU,EACV,OAAO,EACP,gBAAgB,GAAG,EAAE,EACrB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,EACJ,UAAU,EACV,aAAa,EACb,YAAY,EACZ,aAAa,EACb,eAAe,EACf,YAAY,EACZ,YAAY,EACZ,gBAAgB,EAChB,mBAAmB,EACnB,WAAW,EACX,QAAQ,EACR,SAAS,GACV,GAAG,iBAAiB,CACnB,WAAW,EACX,YAAY,EACZ,aAAa,EACb,OAAO,EACP,OAAO,EACP,WAAW,EACX,UAAU,EACV,OAAO,EACP,gBAAgB,CACjB,CAAC;IACF,OAAO,CACL,CAAC,iBAAiB,CAChB,KAAK,CAAC,CAAC;YACL,WAAW;YACX,IAAI;YACJ,OAAO;YACP,UAAU;YACV,aAAa;YACb,aAAa;YACb,eAAe;YACf,YAAY;YACZ,YAAY;YACZ,gBAAgB;YAChB,mBAAmB;YACnB,WAAW;YACX,QAAQ;YACR,SAAS;SACV,CAAC,CAEF;MAAA,CAAC,aAAa,CACZ,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,UAAU,CAAC,CAAC,UAAU,CAAC,CACvB,gBAAgB,CAAC,CAAC,gBAAgB,CAAC,CACnC,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,IAAI,KAAK,CAAC,CAEV;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,aAAa,CACjB;IAAA,EAAE,iBAAiB,CAAC,CACrB,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,SAAS,GAAG,kBAAmC,CAAC;AAC7D,SAAS,CAAC,KAAK,GAAG,cAAc,CAAC;AACjC,SAAS,CAAC,MAAM,GAAG,eAAe,CAAC"}

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

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

package/dist/native/components/Resizable/index.js

@@ -0,0 +1,3 @@
+// This file serves as the main entry point for the Resizable component, re-exporting its primary exports to simplify module imports.
+export * from './Resizable';
+//# sourceMappingURL=index.js.map

package/dist/native/components/Resizable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Resizable/index.ts"],"names":[],"mappings":"AAAA,qIAAqI;AACrI,cAAc,aAAa,CAAC"}

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

@@ -0,0 +1,12 @@
+import { ViewProps } from 'app-studio';
+import { Orientation, Variant, Thickness, SeparatorStyles } from './Separator.type';
+export interface SeparatorProps extends ViewProps {
+    orientation?: Orientation;
+    variant?: Variant;
+    thickness?: Thickness;
+    color?: string;
+    spacing?: number | string;
+    label?: React.ReactNode;
+    decorative?: boolean;
+    views?: SeparatorStyles;
+}

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

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

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

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

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

@@ -0,0 +1,23 @@
+import { ViewProps } from 'app-studio';
+import { Orientation, Variant, Thickness } from './Separator.type';
+export declare const SeparatorOrientations: Record<Orientation, ViewProps>;
+export declare const getSeparator: (themeMode: string) => Record<Variant, string>;
+export declare const SeparatorVariants: Record<Variant, string>;
+export declare const SeparatorThicknesses: Record<Thickness, string>;
+export declare const DefaultSeparatorStyles: {
+    container: {
+        transition: string;
+    };
+    line: {
+        backgroundColor: string;
+        transition: string;
+    };
+    label: {
+        fontSize: string;
+        fontWeight: string;
+        color: string;
+        paddingHorizontal: string;
+        backgroundColor: string;
+        transition: string;
+    };
+};

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

@@ -0,0 +1,46 @@
+// Defines predefined styles for separator orientations (horizontal and vertical), specifying their width and height properties.
+export const SeparatorOrientations = {
+    horizontal: {
+        width: '100%',
+        height: 'auto',
+    },
+    vertical: {
+        width: 'auto',
+        height: '100%',
+    },
+};
+// A function that returns an object mapping separator variants (solid, dashed, dotted) to their corresponding CSS border styles. The `themeMode` parameter is currently not utilized.
+export const getSeparator = (themeMode) => {
+    return {
+        solid: 'solid',
+        dashed: 'dashed',
+        dotted: 'dotted',
+    };
+};
+// An object containing predefined separator variant styles (solid, dashed, dotted), derived from the `getSeparator` function.
+export const SeparatorVariants = getSeparator('light');
+// Defines standard thickness values for the separator component, allowing for thin, medium, and thick options.
+export const SeparatorThicknesses = {
+    thin: '1px',
+    medium: '2px',
+    thick: '4px',
+};
+// Specifies the default inline styles for different parts of the Separator component: the container, the dividing line, and an optional label.
+export const DefaultSeparatorStyles = {
+    container: {
+        transition: 'opacity 0.15s ease',
+    },
+    line: {
+        backgroundColor: 'color-gray-200',
+        transition: 'background-color 0.15s ease',
+    },
+    label: {
+        fontSize: '14px',
+        fontWeight: '500',
+        color: 'color-gray-600',
+        paddingHorizontal: '8px',
+        backgroundColor: 'color-white',
+        transition: 'color 0.15s ease',
+    },
+};
+//# sourceMappingURL=Separator.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.style.js","sourceRoot":"","sources":["../../../../../src/components/Separator/Separator/Separator.style.ts"],"names":[],"mappings":"AAEA,gIAAgI;AAChI,MAAM,CAAC,MAAM,qBAAqB,GAAmC;IACnE,UAAU,EAAE;QACV,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;IACD,QAAQ,EAAE;QACR,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf;CACF,CAAC;AACF,sLAAsL;AACtL,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,SAAiB,EAA2B,EAAE;IACzE,OAAO;QACL,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,QAAQ;QAChB,MAAM,EAAE,QAAQ;KACjB,CAAC;AACJ,CAAC,CAAC;AACF,8HAA8H;AAC9H,MAAM,CAAC,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;AACvD,+GAA+G;AAC/G,MAAM,CAAC,MAAM,oBAAoB,GAA8B;IAC7D,IAAI,EAAE,KAAK;IACX,MAAM,EAAE,KAAK;IACb,KAAK,EAAE,KAAK;CACb,CAAC;AACF,+IAA+I;AAC/I,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,SAAS,EAAE;QACT,UAAU,EAAE,oBAAoB;KACjC;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,gBAAgB;QACjC,UAAU,EAAE,6BAA6B;KAC1C;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,KAAK;QACjB,KAAK,EAAE,gBAAgB;QACvB,iBAAiB,EAAE,KAAK;QACxB,eAAe,EAAE,aAAa;QAC9B,UAAU,EAAE,kBAAkB;KAC/B;CACF,CAAC"}

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

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

package/dist/native/components/Separator/Separator/Separator.type.js

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

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

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

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

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

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import { View } from 'app-studio';
+import { Horizontal } from 'app-studio';
+import { Text } from 'app-studio';
+import { useTheme } from 'app-studio';
+import { SeparatorVariants, SeparatorThicknesses, DefaultSeparatorStyles, } from './Separator.style';
+const isRawCssColor = (value) => typeof value === 'string' &&
+    (/^(#|rgb\(|rgba\(|hsl\(|hsla\(|var\()/.test(value) ||
+        ['black', 'currentColor', 'inherit', 'transparent', 'white'].includes(value));
+// Defines the `SeparatorView` functional component, responsible for rendering a visual separator with various styles and orientations.
+export const SeparatorView = ({ orientation = 'horizontal', variant = 'solid', thickness = 'thin', color, spacing = '0px', label, decorative = false, views, themeMode: elementMode, ...props }) => {
+    // Retrieves the current theme mode from the application's theme context.
+    const { themeMode } = useTheme();
+    // Determines the color of the separator, defaulting to 'color-gray-200' if no specific color is provided via props.
+    const separatorColor = color || 'color-gray-200';
+    // Selects the appropriate border style (e.g., solid, dashed) for the separator based on the `variant` prop.
+    const borderStyle = SeparatorVariants[variant];
+    // Sets the thickness of the separator line based on the `thickness` prop.
+    const borderWidth = SeparatorThicknesses[thickness];
+    // Prepares ARIA accessibility attributes: if `decorative` is true, the separator is hidden from accessibility trees; otherwise, it's assigned a 'separator' role and `aria-orientation`.
+    const ariaProps = decorative
+        ? { 'aria-hidden': true }
+        : { role: 'separator', 'aria-orientation': orientation };
+    const lineColorProps = isRawCssColor(separatorColor)
+        ? { style: { borderColor: separatorColor } }
+        : { borderColor: separatorColor };
+    // Conditional rendering block for a horizontal separator that includes a text label.
+    if (label && orientation === 'horizontal') {
+        return (<Horizontal alignItems="center" justifyContent="center" width="100%" padding={spacing} {...ariaProps} {...props}>
+        <View height="0px" flexGrow={1} borderTop={`${borderWidth} ${borderStyle}`} {...lineColorProps} {...DefaultSeparatorStyles.container} {...views?.container}/>
+        <Text {...DefaultSeparatorStyles.label} {...views?.label}>
+          {label}
+        </Text>
+        <View height="0px" flexGrow={1} borderTop={`${borderWidth} ${borderStyle}`} {...lineColorProps} {...DefaultSeparatorStyles.container} {...views?.container}/>
+      </Horizontal>);
+    }
+    if (orientation === 'horizontal') {
+        return (<View height="0px" width="100%" borderTop={`${borderWidth} ${borderStyle}`} padding={spacing} {...lineColorProps} {...DefaultSeparatorStyles.container} {...ariaProps} {...views?.container} {...props}/>);
+    }
+    return (<View width="0px" height="100%" borderLeft={`${borderWidth} ${borderStyle}`} padding={spacing} {...lineColorProps} {...DefaultSeparatorStyles.container} {...ariaProps} {...views?.container} {...props}/>);
+};
+//# sourceMappingURL=Separator.view.js.map

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

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

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

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

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { View, Horizontal, Text } from 'app-studio';
+import { SeparatorThicknesses, DefaultSeparatorStyles, } from './Separator.style';
+const parseThickness = (val) => {
+    if (typeof val === 'number')
+        return val;
+    if (typeof val === 'string') {
+        const n = parseFloat(val);
+        return Number.isFinite(n) ? n : 1;
+    }
+    return 1;
+};
+export const SeparatorView = ({ orientation = 'horizontal', variant = 'solid', thickness = 'thin', color, spacing, label, decorative = false, views, themeMode: elementMode, ...props }) => {
+    const separatorColor = color || 'color-gray-200';
+    const borderWidth = parseThickness(SeparatorThicknesses[thickness]);
+    if (label && orientation === 'horizontal') {
+        return (<Horizontal alignItems="center" justifyContent="center" width="100%" padding={spacing} {...props}>
+        <View height={0} flexGrow={1} borderTopWidth={borderWidth} borderTopColor={separatorColor} {...DefaultSeparatorStyles.container} {...views?.container}/>
+        <Text {...DefaultSeparatorStyles.label} {...views?.label}>
+          {label}
+        </Text>
+        <View height={0} flexGrow={1} borderTopWidth={borderWidth} borderTopColor={separatorColor} {...DefaultSeparatorStyles.container} {...views?.container}/>
+      </Horizontal>);
+    }
+    if (orientation === 'horizontal') {
+        return (<View height={0} width="100%" borderTopWidth={borderWidth} borderTopColor={separatorColor} padding={spacing} {...DefaultSeparatorStyles.container} {...views?.container} {...props}/>);
+    }
+    return (<View width={0} height="100%" borderLeftWidth={borderWidth} borderLeftColor={separatorColor} padding={spacing} {...DefaultSeparatorStyles.container} {...views?.container} {...props}/>);
+};
+//# sourceMappingURL=Separator.view.native.js.map

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

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

package/dist/native/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/native/components/Separator/Separator.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { SeparatorView } from './Separator/Separator.view';
+import { useMergedDesignSystemComponentProps } from '../../design-system';
+// Defines the primary Separator functional component, which acts as a simple wrapper to render the SeparatorView, and is also exported as Divider.
+const SeparatorComponent = (props) => {
+    const mergedProps = useMergedDesignSystemComponentProps('separator', props);
+    return <SeparatorView {...mergedProps}/>;
+};
+export const Separator = SeparatorComponent;
+export const Divider = SeparatorComponent;
+//# sourceMappingURL=Separator.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../../../src/components/Separator/Separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,mCAAmC,EAAE,MAAM,mBAAmB,CAAC;AACxE,mJAAmJ;AACnJ,MAAM,kBAAkB,GAA6B,CAAC,KAAK,EAAE,EAAE;IAC7D,MAAM,WAAW,GAAG,mCAAmC,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAC5E,OAAO,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,EAAG,CAAC;AAC5C,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,SAAS,GAAG,kBAAkB,CAAC;AAC5C,MAAM,CAAC,MAAM,OAAO,GAAG,kBAAkB,CAAC"}

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

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

package/dist/native/components/Separator/index.js

@@ -0,0 +1,3 @@
+// This line re-exports all named exports from the `Separator` module, establishing `index.ts` as a convenient single entry point for importing the Separator component.
+export * from './Separator';
+//# sourceMappingURL=index.js.map

package/dist/native/components/Separator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Separator/index.ts"],"names":[],"mappings":"AAAA,wKAAwK;AACxK,cAAc,aAAa,CAAC"}