@app-studio/components 0.10.17

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

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TabsViewProps, TabsListProps, TabsTriggerProps, TabsContentProps } from './Tabs.props';
+import { TabsContextType } from './Tabs.type';
+/**
+ * The presentation component for Tabs. Renders the UI based on props.
+ */
+export declare const TabsView: React.FC<TabsViewProps>;
+export declare const TabsContext: React.Context<TabsContextType | null>;
+export declare const useTabsContext: () => TabsContextType;
+export declare const TabsList: React.FC<TabsListProps>;
+export declare const TabsTrigger: React.FC<TabsTriggerProps>;
+export declare const TabsContent: React.FC<TabsContentProps>;

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

@@ -0,0 +1,230 @@
+import React, { createContext, useCallback, useContext } from 'react';
+import { View, Horizontal, Vertical, useTheme } from 'app-studio';
+import { TabHeader } from './TabHeader';
+import { deepMerge, useDesignSystemComponentProps } from '../../../design-system';
+const getTabsVariantStyles = (variant, themeMode) => {
+    const isDark = themeMode === 'dark';
+    if (variant === 'segmented') {
+        return {
+            header: {
+                width: 'fit-content',
+                alignSelf: 'flex-start',
+                gap: 6,
+                padding: 6,
+                borderRadius: 16, // radius-xl
+                backgroundColor: isDark ? 'color-gray-800' : 'color-gray-100',
+            },
+            tab: {
+                minHeight: 44,
+                padding: '0 22px',
+                borderRadius: 12, // radius-lg
+                color: isDark ? 'color-gray-300' : 'color-gray-600',
+                borderWidth: 1,
+                borderStyle: 'solid',
+                borderColor: isDark ? 'color-gray-800' : 'color-gray-100',
+                style: { backgroundColor: 'transparent' },
+            },
+            activeTab: {
+                backgroundColor: isDark ? 'color-gray-700' : 'color-white',
+                color: isDark ? 'color-white' : 'color-gray-900',
+                boxShadow: isDark
+                    ? '0 1px 3px rgba(0, 0, 0, 0.35)'
+                    : '0 1px 2px rgba(0, 0, 0, 0.06)',
+            },
+            text: {
+                fontSize: 14,
+                lineHeight: '20px',
+                letterSpacing: '-0.01em',
+            },
+            activeText: {},
+            content: {
+                width: '100%',
+            },
+        };
+    }
+    if (variant === 'pill') {
+        return {
+            header: {
+                width: '100%',
+                flexWrap: 'wrap',
+                gap: 12,
+            },
+            tab: {
+                minHeight: 44,
+                padding: '0 22px',
+                borderRadius: '999px',
+                backgroundColor: isDark ? 'color-gray-900' : 'color-white',
+                color: isDark ? 'color-gray-200' : 'color-gray-600',
+                borderWidth: 1,
+                borderStyle: 'solid',
+                borderColor: isDark ? 'color-gray-700' : 'color-gray-200',
+            },
+            activeTab: {
+                backgroundColor: 'theme-primary',
+                color: 'color-white',
+                borderColor: 'theme-primary',
+            },
+            text: {
+                fontSize: 14,
+                lineHeight: '20px',
+                letterSpacing: '-0.01em',
+                color: 'inherit',
+            },
+            activeText: {
+                color: 'inherit',
+            },
+            content: {
+                width: '100%',
+            },
+        };
+    }
+    return {
+        header: {
+            width: '100%',
+            gap: 20,
+            borderBottom: 'none',
+        },
+        tab: {
+            minHeight: 44,
+            padding: '0 4px',
+            borderRadius: 0,
+            color: isDark ? 'color-gray-400' : 'color-gray-500',
+            borderBottom: '3px solid',
+            borderColor: isDark ? 'color-gray-900' : 'color-white',
+            style: { backgroundColor: 'transparent' },
+        },
+        activeTab: {
+            color: 'theme-primary',
+            borderColor: 'theme-primary',
+        },
+        text: {
+            fontSize: 14,
+            lineHeight: '20px',
+            letterSpacing: '-0.01em',
+            color: 'inherit',
+        },
+        activeText: {
+            color: 'inherit',
+        },
+        content: {
+            width: '100%',
+            paddingTop: 12,
+        },
+    };
+};
+/**
+ * The presentation component for Tabs. Renders the UI based on props.
+ */
+export const TabsView = ({ tabs = [], // Default to empty array
+activeTab, handleTabClick, views = {}, // Default to empty object
+renderTab, renderContent, variant = 'underline', iconPosition = 'left', // Default to left
+ }) => {
+    const { themeMode } = useTheme();
+    const variantStyles = getTabsVariantStyles(variant, themeMode);
+    // If there's no active tab (e.g., tabs array is empty), render nothing or a placeholder
+    if (!activeTab) {
+        // Optionally render a placeholder when no tabs are active/available
+        // return <View {...views.container}><Text>No tabs available.</Text></View>;
+        return null; // Or simply render nothing
+    }
+    return (
+    // Use Vertical layout for overall structure (tabs header above content)
+    <Vertical width="100%" height={'100%'} {...views.container}>
+      {/* Horizontal layout for the tab headers/buttons */}
+      <Horizontal alignItems="center" {...variantStyles.header} {...views.headerTabs}>
+        {tabs.map((tab) => {
+            // Determine if the current tab in the loop is the active one
+            const isActive = (tab.value !== undefined ? tab.value : tab.title) ===
+                (activeTab.value !== undefined ? activeTab.value : activeTab.title);
+            // Prepare the onClick handler for this specific tab
+            const onClick = () => handleTabClick(tab);
+            // Use the custom renderTab function if provided
+            if (renderTab) {
+                return renderTab(tab, isActive, onClick);
+            }
+            // Default rendering for a tab using our custom TabHeader component
+            return (<TabHeader key={tab.title} // Use the unique title as the key
+             tab={tab} isActive={isActive} onClick={onClick} iconPosition={iconPosition} tabStyles={{
+                    ...variantStyles.tab,
+                    ...views.tab,
+                    ...(isActive ? variantStyles.activeTab : {}),
+                    ...(isActive ? views.activeTab : {}),
+                }} textStyles={{
+                    ...variantStyles.text,
+                    ...views.title,
+                    ...(isActive ? variantStyles.activeText : {}),
+                    ...(isActive ? views.activeText : {}),
+                }}/>);
+        })}
+      </Horizontal>
+
+      {/* Content area */}
+      <View height="100%" {...variantStyles.content} {...views.content}>
+        {/* Use the custom renderContent function if provided */}
+        {renderContent
+            ? renderContent(activeTab)
+            : // Otherwise, render the content property from the active tab object
+                activeTab.content}
+      </View>
+    </Vertical>);
+};
+// Context for compound components
+export const TabsContext = createContext(null);
+// Hook to use the Tabs context
+export const useTabsContext = () => {
+    const context = useContext(TabsContext);
+    if (!context) {
+        throw new Error('useTabsContext must be used within a Tabs component');
+    }
+    return context;
+};
+// TabsList compound component
+export const TabsList = React.memo(({ children, views }) => {
+    const { themeMode } = useTheme();
+    const { variant = 'underline' } = useTabsContext();
+    const variantStyles = getTabsVariantStyles(variant, themeMode);
+    const designSystemTabs = useDesignSystemComponentProps('tabs');
+    const mergedViews = deepMerge({
+        container: designSystemTabs.views?.headerTabs,
+    }, views);
+    return (<Horizontal alignItems="center" {...variantStyles.header} {...mergedViews?.container}>
+        {children}
+      </Horizontal>);
+});
+// TabsTrigger compound component
+export const TabsTrigger = React.memo(({ value, children, disabled = false, views }) => {
+    const { themeMode } = useTheme();
+    const { activeValue, setActiveValue, variant = 'underline', } = useTabsContext();
+    const isActive = activeValue === value;
+    const variantStyles = getTabsVariantStyles(variant, themeMode);
+    const designSystemTabs = useDesignSystemComponentProps('tabs');
+    const mergedViews = deepMerge({
+        trigger: designSystemTabs.views?.tab,
+        activeState: designSystemTabs.views?.activeTab,
+    }, views);
+    const handleClick = useCallback(() => {
+        if (!disabled) {
+            setActiveValue(value);
+        }
+    }, [disabled, value, setActiveValue]);
+    return (<View cursor={disabled ? 'not-allowed' : 'pointer'} opacity={disabled ? 0.6 : 1} display="flex" alignItems="center" justifyContent="center" transition="all 0.2s ease-in-out" {...variantStyles.tab} {...(isActive ? variantStyles.activeTab : {})} _hover={!disabled
+            ? variant === 'underline'
+                ? { color: 'theme-primary' }
+                : { opacity: 0.9 }
+            : {}} onClick={handleClick} {...mergedViews?.trigger} {...(isActive ? mergedViews?.activeState : {})}>
+        <View {...variantStyles.text} {...(isActive ? variantStyles.activeText : {})}>
+          {children}
+        </View>
+      </View>);
+});
+// TabsContent compound component
+export const TabsContent = React.memo(({ value, children, views }) => {
+    const { activeValue } = useTabsContext();
+    if (activeValue !== value) {
+        return null;
+    }
+    return (<View width="100%" padding="24px" {...views?.content}>
+        {children}
+      </View>);
+});
+//# sourceMappingURL=Tabs.view.js.map

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

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

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TabsViewProps, TabsListProps, TabsTriggerProps, TabsContentProps } from './Tabs.props';
+import { TabsContextType } from './Tabs.type';
+export declare const TabsView: React.FC<TabsViewProps>;
+export declare const TabsContext: React.Context<TabsContextType | null>;
+export declare const useTabsContext: () => TabsContextType;
+export declare const TabsList: React.FC<TabsListProps>;
+export declare const TabsTrigger: React.FC<TabsTriggerProps>;
+export declare const TabsContent: React.FC<TabsContentProps>;

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

@@ -0,0 +1,151 @@
+import React, { createContext, useCallback, useContext } from 'react';
+import { View, Horizontal, Vertical, Text, useTheme } from 'app-studio';
+import { deepMerge, useDesignSystemComponentProps } from '../../../design-system';
+const getTabsVariantStyles = (variant, themeMode) => {
+    const isDark = themeMode === 'dark';
+    if (variant === 'segmented') {
+        return {
+            header: {
+                alignSelf: 'flex-start',
+                gap: 6,
+                padding: 6,
+                borderRadius: 16,
+                backgroundColor: isDark ? 'color-gray-800' : 'color-gray-100',
+            },
+            tab: {
+                minHeight: 44,
+                paddingHorizontal: 22,
+                borderRadius: 12,
+                color: isDark ? 'color-gray-300' : 'color-gray-600',
+                borderWidth: 1,
+                borderStyle: 'solid',
+                borderColor: isDark ? 'color-gray-800' : 'color-gray-100',
+            },
+            activeTab: {
+                backgroundColor: isDark ? 'color-gray-700' : 'color-white',
+                color: isDark ? 'color-white' : 'color-gray-900',
+            },
+            text: { fontSize: 14, lineHeight: 20 },
+            activeText: {},
+            content: { width: '100%' },
+        };
+    }
+    if (variant === 'pill') {
+        return {
+            header: {
+                width: '100%',
+                flexWrap: 'wrap',
+                gap: 12,
+            },
+            tab: {
+                minHeight: 44,
+                paddingHorizontal: 22,
+                borderRadius: 999,
+                backgroundColor: isDark ? 'color-gray-900' : 'color-white',
+                color: isDark ? 'color-gray-200' : 'color-gray-600',
+                borderWidth: 1,
+                borderStyle: 'solid',
+                borderColor: isDark ? 'color-gray-700' : 'color-gray-200',
+            },
+            activeTab: {
+                backgroundColor: 'theme-primary',
+                color: 'color-white',
+                borderColor: 'theme-primary',
+            },
+            text: { fontSize: 14, lineHeight: 20 },
+            activeText: {},
+            content: { width: '100%' },
+        };
+    }
+    return {
+        header: { width: '100%', gap: 20 },
+        tab: {
+            minHeight: 44,
+            paddingHorizontal: 4,
+            borderRadius: 0,
+            color: isDark ? 'color-gray-400' : 'color-gray-500',
+            borderBottomWidth: 3,
+            borderBottomColor: isDark ? 'color-gray-900' : 'color-white',
+        },
+        activeTab: {
+            color: 'theme-primary',
+            borderBottomColor: 'theme-primary',
+        },
+        text: { fontSize: 14, lineHeight: 20 },
+        activeText: {},
+        content: { width: '100%', paddingTop: 12 },
+    };
+};
+export const TabsView = ({ tabs = [], activeTab, handleTabClick, views = {}, renderTab, renderContent, variant = 'underline', iconPosition = 'left', }) => {
+    const { themeMode } = useTheme();
+    const variantStyles = getTabsVariantStyles(variant, themeMode);
+    if (!activeTab)
+        return null;
+    return (<Vertical width="100%" height={'100%'} {...views.container}>
+      <Horizontal alignItems="center" {...variantStyles.header} {...views.headerTabs}>
+        {tabs.map((tab) => {
+            const isActive = (tab.value !== undefined ? tab.value : tab.title) ===
+                (activeTab.value !== undefined ? activeTab.value : activeTab.title);
+            const onPress = () => handleTabClick(tab);
+            if (renderTab) {
+                return renderTab(tab, isActive, onPress);
+            }
+            return (<View key={tab.title} onPress={onPress} onClick={onPress} alignItems="center" justifyContent="center" {...variantStyles.tab} {...views.tab} {...(isActive ? variantStyles.activeTab : {})} {...(isActive ? views.activeTab : {})}>
+              <Text {...variantStyles.text} {...views.title} {...(isActive ? variantStyles.activeText : {})} {...(isActive ? views.activeText : {})}>
+                {tab.title}
+              </Text>
+            </View>);
+        })}
+      </Horizontal>
+      <View height="100%" {...variantStyles.content} {...views.content}>
+        {renderContent ? renderContent(activeTab) : activeTab.content}
+      </View>
+    </Vertical>);
+};
+export const TabsContext = createContext(null);
+export const useTabsContext = () => {
+    const context = useContext(TabsContext);
+    if (!context) {
+        throw new Error('useTabsContext must be used within a Tabs component');
+    }
+    return context;
+};
+export const TabsList = React.memo(({ children, views }) => {
+    const { themeMode } = useTheme();
+    const { variant = 'underline' } = useTabsContext();
+    const variantStyles = getTabsVariantStyles(variant, themeMode);
+    const designSystemTabs = useDesignSystemComponentProps('tabs');
+    const mergedViews = deepMerge({ container: designSystemTabs.views?.headerTabs }, views);
+    return (<Horizontal alignItems="center" {...variantStyles.header} {...mergedViews?.container}>
+        {children}
+      </Horizontal>);
+});
+export const TabsTrigger = React.memo(({ value, children, disabled = false, views }) => {
+    const { themeMode } = useTheme();
+    const { activeValue, setActiveValue, variant = 'underline' } = useTabsContext();
+    const isActive = activeValue === value;
+    const variantStyles = getTabsVariantStyles(variant, themeMode);
+    const designSystemTabs = useDesignSystemComponentProps('tabs');
+    const mergedViews = deepMerge({
+        trigger: designSystemTabs.views?.tab,
+        activeState: designSystemTabs.views?.activeTab,
+    }, views);
+    const handlePress = useCallback(() => {
+        if (!disabled)
+            setActiveValue(value);
+    }, [disabled, value, setActiveValue]);
+    return (<View opacity={disabled ? 0.6 : 1} alignItems="center" justifyContent="center" {...variantStyles.tab} {...(isActive ? variantStyles.activeTab : {})} onPress={handlePress} onClick={handlePress} {...mergedViews?.trigger} {...(isActive ? mergedViews?.activeState : {})}>
+        <View {...variantStyles.text} {...(isActive ? variantStyles.activeText : {})}>
+          {children}
+        </View>
+      </View>);
+});
+export const TabsContent = React.memo(({ value, children, views }) => {
+    const { activeValue } = useTabsContext();
+    if (activeValue !== value)
+        return null;
+    return (<View width="100%" padding={24} {...views?.content}>
+        {children}
+      </View>);
+});
+//# sourceMappingURL=Tabs.view.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.view.native.js","sourceRoot":"","sources":["../../../../../src/components/Tabs/Tabs/Tabs.view.native.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAa,MAAM,YAAY,CAAC;AAQnF,OAAO,EAAE,SAAS,EAAE,6BAA6B,EAAE,MAAM,mBAAmB,CAAC;AAE7E,MAAM,oBAAoB,GAAG,CAC3B,OAAoB,EACpB,SAAiB,EAQjB,EAAE;IACF,MAAM,MAAM,GAAG,SAAS,KAAK,MAAM,CAAC;IACpC,IAAI,OAAO,KAAK,WAAW,EAAE,CAAC;QAC5B,OAAO;YACL,MAAM,EAAE;gBACN,SAAS,EAAE,YAAY;gBACvB,GAAG,EAAE,CAAC;gBACN,OAAO,EAAE,CAAC;gBACV,YAAY,EAAE,EAAE;gBAChB,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB;aAC9D;YACD,GAAG,EAAE;gBACH,SAAS,EAAE,EAAE;gBACb,iBAAiB,EAAE,EAAE;gBACrB,YAAY,EAAE,EAAE;gBAChB,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB;gBACnD,WAAW,EAAE,CAAC;gBACd,WAAW,EAAE,OAAO;gBACpB,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB;aAC1D;YACD,SAAS,EAAE;gBACT,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa;gBAC1D,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB;aACjD;YACD,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;YACtC,UAAU,EAAE,EAAE;YACd,OAAO,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;SAC3B,CAAC;IACJ,CAAC;IACD,IAAI,OAAO,KAAK,MAAM,EAAE,CAAC;QACvB,OAAO;YACL,MAAM,EAAE;gBACN,KAAK,EAAE,MAAM;gBACb,QAAQ,EAAE,MAAM;gBAChB,GAAG,EAAE,EAAE;aACR;YACD,GAAG,EAAE;gBACH,SAAS,EAAE,EAAE;gBACb,iBAAiB,EAAE,EAAE;gBACrB,YAAY,EAAE,GAAG;gBACjB,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa;gBAC1D,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB;gBACnD,WAAW,EAAE,CAAC;gBACd,WAAW,EAAE,OAAO;gBACpB,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB;aAC1D;YACD,SAAS,EAAE;gBACT,eAAe,EAAE,eAAe;gBAChC,KAAK,EAAE,aAAa;gBACpB,WAAW,EAAE,eAAe;aAC7B;YACD,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;YACtC,UAAU,EAAE,EAAE;YACd,OAAO,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;SAC3B,CAAC;IACJ,CAAC;IACD,OAAO;QACL,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAE;QAClC,GAAG,EAAE;YACH,SAAS,EAAE,EAAE;YACb,iBAAiB,EAAE,CAAC;YACpB,YAAY,EAAE,CAAC;YACf,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,gBAAgB;YACnD,iBAAiB,EAAE,CAAC;YACpB,iBAAiB,EAAE,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,aAAa;SAC7D;QACD,SAAS,EAAE;YACT,KAAK,EAAE,eAAe;YACtB,iBAAiB,EAAE,eAAe;SACnC;QACD,IAAI,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;QACtC,UAAU,EAAE,EAAE;QACd,OAAO,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,EAAE;KAC3C,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,IAAI,GAAG,EAAE,EACT,SAAS,EACT,cAAc,EACd,KAAK,GAAG,EAAE,EACV,SAAS,EACT,aAAa,EACb,OAAO,GAAG,WAAW,EACrB,YAAY,GAAG,MAAM,GACtB,EAAE,EAAE;IACH,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,CAAC;IACjC,MAAM,aAAa,GAAG,oBAAoB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IAC/D,IAAI,CAAC,SAAS;QAAE,OAAO,IAAI,CAAC;IAC5B,OAAO,CACL,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,SAAS,CAAC,CACzD;MAAA,CAAC,UAAU,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,KAAK,CAAC,UAAU,CAAC,CAC7E;QAAA,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE;YAChB,MAAM,QAAQ,GACZ,CAAC,GAAG,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC;gBACjD,CAAC,SAAS,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;YACtE,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;YAC1C,IAAI,SAAS,EAAE,CAAC;gBACd,OAAO,SAAS,CAAC,GAAG,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;YAC3C,CAAC;YACD,OAAO,CACL,CAAC,IAAI,CACH,GAAG,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CACf,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,OAAO,CAAC,CAAC,OAAO,CAAC,CACjB,UAAU,CAAC,QAAQ,CACnB,cAAc,CAAC,QAAQ,CACvB,IAAI,aAAa,CAAC,GAAG,CAAC,CACtB,IAAI,KAAK,CAAC,GAAG,CAAC,CACd,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAC9C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAEtC;cAAA,CAAC,IAAI,CACH,IAAI,aAAa,CAAC,IAAI,CAAC,CACvB,IAAI,KAAK,CAAC,KAAK,CAAC,CAChB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAC/C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAEvC;gBAAA,CAAC,GAAG,CAAC,KAAK,CACZ;cAAA,EAAE,IAAI,CACR;YAAA,EAAE,IAAI,CAAC,CACR,CAAC;QACJ,CAAC,CAAC,CACJ;MAAA,EAAE,UAAU,CACZ;MAAA,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK,CAAC,OAAO,CAAC,CAC/D;QAAA,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,OAAO,CAC/D;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,QAAQ,CAAC,CACZ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAyB,IAAI,CAAC,CAAC;AAEvE,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;IACxC,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;IACzE,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAA4B,KAAK,CAAC,IAAI,CACzD,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IACtB,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,CAAC;IACjC,MAAM,EAAE,OAAO,GAAG,WAAW,EAAE,GAAG,cAAc,EAAE,CAAC;IACnD,MAAM,aAAa,GAAG,oBAAoB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IAC/D,MAAM,gBAAgB,GAAG,6BAA6B,CAAC,MAAM,CAAC,CAAC;IAC/D,MAAM,WAAW,GAAG,SAAS,CAC3B,EAAE,SAAS,EAAE,gBAAgB,CAAC,KAAK,EAAE,UAAU,EAAE,EACjD,KAAK,CACN,CAAC;IACF,OAAO,CACL,CAAC,UAAU,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,aAAa,CAAC,MAAM,CAAC,CAAC,IAAI,WAAW,EAAE,SAAS,CAAC,CACnF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,UAAU,CAAC,CACd,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAA+B,KAAK,CAAC,IAAI,CAC/D,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE;IAC/C,MAAM,EAAE,SAAS,EAAE,GAAG,QAAQ,EAAE,CAAC;IACjC,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,OAAO,GAAG,WAAW,EAAE,GAAG,cAAc,EAAE,CAAC;IAChF,MAAM,QAAQ,GAAG,WAAW,KAAK,KAAK,CAAC;IACvC,MAAM,aAAa,GAAG,oBAAoB,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;IAC/D,MAAM,gBAAgB,GAAG,6BAA6B,CAAC,MAAM,CAAC,CAAC;IAC/D,MAAM,WAAW,GAAG,SAAS,CAC3B;QACE,OAAO,EAAE,gBAAgB,CAAC,KAAK,EAAE,GAAG;QACpC,WAAW,EAAE,gBAAgB,CAAC,KAAK,EAAE,SAAS;KAC/C,EACD,KAAK,CACN,CAAC;IACF,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,CAAC,QAAQ;YAAE,cAAc,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC;IACtC,OAAO,CACL,CAAC,IAAI,CACH,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAC5B,UAAU,CAAC,QAAQ,CACnB,cAAc,CAAC,QAAQ,CACvB,IAAI,aAAa,CAAC,GAAG,CAAC,CACtB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAC9C,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,IAAI,WAAW,EAAE,OAAO,CAAC,CACzB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAE/C;QAAA,CAAC,IAAI,CAAC,IAAI,aAAa,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAC3E;UAAA,CAAC,QAAQ,CACX;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAA+B,KAAK,CAAC,IAAI,CAC/D,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7B,MAAM,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAAC;IACzC,IAAI,WAAW,KAAK,KAAK;QAAE,OAAO,IAAI,CAAC;IACvC,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC,IAAI,KAAK,EAAE,OAAO,CAAC,CACjD;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC,CACF,CAAC"}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TabsProps } from './Tabs/Tabs.props';
+import { TabsList, TabsTrigger, TabsContent } from './Tabs/Tabs.view';
+interface TabsType extends React.FC<TabsProps> {
+    List: typeof TabsList;
+    Trigger: typeof TabsTrigger;
+    Content: typeof TabsContent;
+}
+export declare const Tabs: TabsType;
+export {};

package/dist/native/components/Tabs/Tabs.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useTabsState, useTabsCompoundState } from './Tabs/Tabs.state';
+import { TabsView, TabsContext, TabsList, TabsTrigger, TabsContent, } from './Tabs/Tabs.view';
+import { useMergedDesignSystemComponentProps } from '../../design-system';
+/**
+ * Tabs component allows users to navigate between different sections of content.
+ * Supports both data-driven approach (with tabs prop) and compound component pattern.
+ */
+const TabsComponent = (props) => {
+    const mergedProps = useMergedDesignSystemComponentProps('tabs', props);
+    const { tabs, views, defaultValue, onTabChange, renderTab, renderContent, variant = 'underline', iconPosition = 'left', value, onValueChange, children, } = mergedProps;
+    // For compound component pattern
+    const compoundState = useTabsCompoundState(defaultValue, value, onValueChange);
+    // For data-driven pattern
+    const dataState = useTabsState(tabs || [], defaultValue, value);
+    // If using compound component pattern (children provided)
+    if (children) {
+        return (<TabsContext.Provider value={{ ...compoundState, variant }}>
+        {children}
+      </TabsContext.Provider>);
+    }
+    // If using data-driven pattern (tabs provided)
+    if (tabs) {
+        // Handler function to change the active tab and trigger the callback
+        const handleTabClick = (tab) => {
+            const getTabId = (t) => (t.value !== undefined ? t.value : t.title);
+            // Only update state and call callback if the clicked tab is different from the current one
+            if (!dataState.activeTab ||
+                getTabId(dataState.activeTab) !== getTabId(tab)) {
+                dataState.setActiveTab(tab);
+                // Call the onTabChange callback if provided
+                if (onTabChange) {
+                    onTabChange(tab);
+                }
+            }
+        };
+        // Render the presentation component with the necessary props
+        return (<TabsView tabs={tabs} views={views} activeTab={dataState.activeTab} // Pass the activeTab object from state
+         handleTabClick={handleTabClick} // Pass the click handler
+         renderTab={renderTab} renderContent={renderContent} variant={variant} iconPosition={iconPosition}/>);
+    }
+    // If neither tabs nor children are provided, return null
+    return null;
+};
+// Export the component wrapped in React.memo for performance optimization
+const TabsMemoized = React.memo(TabsComponent);
+// Create the compound component with proper typing
+export const Tabs = TabsMemoized;
+// Assign the sub-components to the main component
+Tabs.List = TabsList;
+Tabs.Trigger = TabsTrigger;
+Tabs.Content = TabsContent;
+//# sourceMappingURL=Tabs.js.map

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

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

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

@@ -0,0 +1,22 @@
+/**
+ * TextArea Component
+ *
+ * A simple textarea component with styling.
+ */
+import React from 'react';
+export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /**
+     * Number of rows to display
+     */
+    rows?: number;
+    /**
+     * Whether the textarea is disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the textarea has an error
+     */
+    hasError?: boolean;
+}
+export declare const TextArea: React.FC<TextAreaProps>;
+export default TextArea;

package/dist/native/components/TextArea/TextArea.js

@@ -0,0 +1,31 @@
+/**
+ * TextArea Component
+ *
+ * A simple textarea component with styling.
+ */
+import React from 'react';
+import { View } from 'app-studio';
+export const TextArea = ({ rows = 3, isDisabled, hasError, className, style, ...props }) => {
+    return (<View as="textarea" rows={rows} disabled={isDisabled} className={className} style={{
+            width: '100%',
+            padding: '12px 16px',
+            borderRadius: '8px',
+            border: `1px solid ${hasError ? 'color-red-500' : 'color-gray-200'}`,
+            fontSize: '14px',
+            lineHeight: '20px',
+            resize: 'vertical',
+            outline: 'none',
+            transition: 'border-color 0.2s ease, box-shadow 0.2s ease',
+            backgroundColor: isDisabled ? 'color-gray-50' : 'color-white',
+            color: isDisabled ? 'color-gray-400' : 'inherit',
+            ...style,
+        }} _focus={{
+            borderColor: hasError ? 'color-red-500' : 'theme-primary',
+            boxShadow: `0 0 0 2px white, 0 0 0 4px ${hasError ? 'color-red-500' : 'theme-primary'}`,
+        }} _focusVisible={{
+            borderColor: hasError ? 'color-red-500' : 'theme-primary',
+            boxShadow: `0 0 0 2px white, 0 0 0 4px ${hasError ? 'color-red-500' : 'theme-primary'}`,
+        }} {...props}/>);
+};
+export default TextArea;
+//# sourceMappingURL=TextArea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../../src/components/TextArea/TextArea.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAoBlC,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,IAAI,GAAG,CAAC,EACR,UAAU,EACV,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,EAAE;IACH,OAAO,CACL,CAAC,IAAI,CACH,EAAE,CAAC,UAAU,CACb,IAAI,CAAC,CAAC,IAAI,CAAC,CACX,QAAQ,CAAC,CAAC,UAAU,CAAC,CACrB,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,KAAK,CAAC,CAAC;YACL,KAAK,EAAE,MAAM;YACb,OAAO,EAAE,WAAW;YACpB,YAAY,EAAE,KAAK;YACnB,MAAM,EAAE,aAAa,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,EAAE;YACpE,QAAQ,EAAE,MAAM;YAChB,UAAU,EAAE,MAAM;YAClB,MAAM,EAAE,UAAU;YAClB,OAAO,EAAE,MAAM;YACf,UAAU,EAAE,8CAA8C;YAC1D,eAAe,EAAE,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa;YAC7D,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS;YAChD,GAAG,KAAK;SACT,CAAC,CACF,MAAM,CAAC,CAAC;YACN,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe;YACzD,SAAS,EAAE,8BACT,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAC/B,EAAE;SACH,CAAC,CACF,aAAa,CAAC,CAAC;YACb,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAAe;YACzD,SAAS,EAAE,8BACT,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,eAC/B,EAAE;SACH,CAAC,CACF,IAAI,KAAK,CAAC,EACV,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/native/components/Title/Title/SlideEffect.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface SlideEffectProps {
+    text: string;
+    duration?: number;
+    direction?: 'up' | 'down';
+    stagger?: number;
+    sequential?: boolean;
+    textStyle?: React.CSSProperties;
+    as?: React.ElementType;
+    wordProps?: any;
+    backgroundColor?: string;
+    textComponent?: any;
+    [key: string]: any;
+}
+export declare const SlideEffect: React.FC<SlideEffectProps>;
+export default SlideEffect;