@app-studio/components 0.10.17

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

@@ -0,0 +1,176 @@
+/**
+ * Table Styles
+ *
+ * Defines the styles for the Table component following the design guidelines:
+ * - Typography: Inter/Geist font, specific sizes/weights
+ * - Spacing: 4px grid system
+ * - Colors: Neutral palette with semantic colors
+ * - Rounded corners: Consistent border radius
+ * - Transitions: Subtle animations
+ */
+/**
+ * Default table styles following the design system
+ * Matching shadcn/ui patterns with subtle shadows and transitions
+ */
+export const DefaultTableStyles = {
+    table: {
+        width: '100%',
+        color: 'inherit',
+        borderRadius: '8px', // 2 × 4px grid
+        overflow: 'hidden',
+        boxShadow: '0px 1px 3px rgba(0, 0, 0, 0.06), 0px 1px 2px rgba(0, 0, 0, 0.04)',
+        border: '1px solid',
+        borderColor: 'color-gray-200',
+        transition: 'box-shadow 0.2s ease',
+        media: {
+            mobile: {
+                overflowX: 'auto', // Enable horizontal scroll on mobile
+                display: 'block',
+                borderRadius: '4px',
+            },
+        },
+    },
+    thead: {
+        backgroundColor: 'color-gray-50',
+        borderBottom: '1px solid',
+        borderColor: 'color-gray-200',
+    },
+    th: {
+        padding: '12px 16px', // 3 × 4px and 4 × 4px grid
+        fontWeight: '600',
+        fontSize: '14px',
+        color: 'inherit',
+        opacity: 0.72,
+        textAlign: 'left',
+        media: {
+            mobile: {
+                padding: '8px 12px', // Smaller padding on mobile
+                fontSize: '12px',
+            },
+        },
+    },
+    td: {
+        padding: '12px 16px', // 3 × 4px and 4 × 4px grid
+        fontSize: '14px',
+        borderBottom: '1px solid',
+        borderColor: 'color-gray-100',
+        color: 'inherit',
+        media: {
+            mobile: {
+                padding: '8px 12px', // Smaller padding on mobile
+                fontSize: '12px',
+            },
+        },
+    },
+    tr: {
+        transition: 'background-color 0.15s ease',
+        _hover: {
+            backgroundColor: 'color-gray-50',
+        },
+        _focus: {
+            outline: 'none',
+            backgroundColor: 'color-gray-100',
+        },
+    },
+    tfoot: {
+        backgroundColor: 'color-gray-50',
+        fontWeight: '600',
+        borderTop: '2px solid',
+        borderColor: 'color-gray-200',
+    },
+    caption: {
+        margin: '8px 0', // 2 × 4px grid
+        color: 'inherit',
+        opacity: 0.62,
+        fontSize: '14px',
+        fontStyle: 'italic',
+        media: {
+            mobile: {
+                fontSize: '12px',
+            },
+        },
+    },
+};
+/**
+ * Compact table styles
+ */
+export const CompactTableStyles = {
+    ...DefaultTableStyles,
+    th: {
+        ...DefaultTableStyles.th,
+        padding: '8px 12px', // 2 × 4px and 3 × 4px grid
+        fontSize: '12px',
+    },
+    td: {
+        ...DefaultTableStyles.td,
+        padding: '8px 12px', // 2 × 4px and 3 × 4px grid
+        fontSize: '12px',
+    },
+};
+/**
+ * Striped table styles
+ */
+export const StripedTableStyles = {
+    ...DefaultTableStyles,
+    tr: {
+        ...DefaultTableStyles.tr,
+        _even: {
+            backgroundColor: 'color-gray-50',
+        },
+    },
+};
+/**
+ * Bordered table styles
+ */
+export const BorderedTableStyles = {
+    ...DefaultTableStyles,
+    td: {
+        ...DefaultTableStyles.td,
+        borderRight: '1px solid',
+        borderColor: 'color-gray-100',
+    },
+    th: {
+        ...DefaultTableStyles.th,
+        borderRight: '1px solid',
+        borderColor: 'color-gray-200',
+    },
+};
+/**
+ * Dark theme table styles
+ */
+export const DarkTableStyles = {
+    table: {
+        ...DefaultTableStyles.table,
+        backgroundColor: 'color-gray-800',
+        borderColor: 'color-gray-700',
+    },
+    thead: {
+        backgroundColor: 'color-gray-900',
+        borderColor: 'color-gray-700',
+    },
+    th: {
+        ...DefaultTableStyles.th,
+        color: 'color-gray-100',
+    },
+    td: {
+        ...DefaultTableStyles.td,
+        color: 'color-gray-300',
+        borderColor: 'color-gray-700',
+    },
+    tr: {
+        ...DefaultTableStyles.tr,
+        _hover: {
+            backgroundColor: 'color-gray-700',
+        },
+    },
+    tfoot: {
+        ...DefaultTableStyles.tfoot,
+        backgroundColor: 'color-gray-900',
+        borderColor: 'color-gray-700',
+    },
+    caption: {
+        ...DefaultTableStyles.caption,
+        color: 'color-gray-400',
+    },
+};
+//# sourceMappingURL=Table.style.js.map

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

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

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

@@ -0,0 +1,19 @@
+import { ViewProps } from 'app-studio';
+export type TableViewStyles = {
+    table?: ViewProps;
+    thead?: ViewProps;
+    tfoot?: ViewProps;
+    tbody?: ViewProps;
+    tr?: ViewProps;
+    td?: ViewProps;
+    th?: ViewProps;
+    caption?: ViewProps;
+};
+export interface Column {
+    title: string;
+    field: string;
+}
+export interface FooterCell {
+    value: string;
+    props?: ViewProps;
+}

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

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

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

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

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

@@ -0,0 +1,20 @@
+/**
+ * Table View Component
+ *
+ * Renders a table with various styles and states
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { ViewProps } from 'app-studio';
+import { TableViewProps } from './Table.props';
+export declare const TableContainer: React.FC<ViewProps>;
+export declare const TableHead: React.FC<ViewProps>;
+export declare const TableHeadCell: React.FC<ViewProps>;
+export declare const TableRow: React.FC<ViewProps>;
+export declare const TableCell: React.FC<ViewProps & {
+    isFirstColumn?: boolean;
+}>;
+export declare const TableBody: React.FC<ViewProps>;
+export declare const TableFooter: React.FC<ViewProps>;
+export declare const TableCaption: React.FC<ViewProps>;
+export declare const TableView: React.FC<TableViewProps>;

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

@@ -0,0 +1,70 @@
+/**
+ * Table View Component
+ *
+ * Renders a table with various styles and states
+ * according to the design guidelines.
+ */
+import React from 'react';
+import { Element } from 'app-studio';
+import { useTableContext } from './Table.context';
+import { DefaultTableStyles } from './Table.style';
+export const TableContainer = (props) => {
+    const { views } = useTableContext();
+    return (<Element as="table" {...DefaultTableStyles.table} {...views?.table} {...props} style={{
+            borderCollapse: 'collapse',
+            ...(props.style || {}),
+        }}/>);
+};
+export const TableHead = (props) => {
+    const { views } = useTableContext();
+    return (<Element as="thead" textAlign="left" {...DefaultTableStyles.thead} {...views?.thead} {...props}/>);
+};
+export const TableHeadCell = (props) => {
+    const { views } = useTableContext();
+    return (<Element as="th" whiteSpace="nowrap" {...DefaultTableStyles.th} {...views?.th} {...props}/>);
+};
+export const TableRow = (props) => {
+    const { views, onRowClick } = useTableContext();
+    return (<Element as="tr" {...DefaultTableStyles.tr} {...views?.tr} onClick={onRowClick} {...props}/>);
+};
+export const TableCell = ({ isFirstColumn, ...props }) => {
+    const { views } = useTableContext();
+    return (<Element as="td" whiteSpace="nowrap" fontWeight={isFirstColumn ? '500' : '400'} {...DefaultTableStyles.td} {...views?.td} {...props}/>);
+};
+export const TableBody = (props) => {
+    const { views } = useTableContext();
+    return (<Element as="tbody" {...DefaultTableStyles.tbody} {...views?.tbody} {...props}/>);
+};
+export const TableFooter = (props) => {
+    const { views } = useTableContext();
+    return (<Element as="tfoot" {...DefaultTableStyles.tfoot} {...views?.tfoot} {...props}/>);
+};
+export const TableCaption = (props) => {
+    const { views } = useTableContext();
+    return (<Element as="caption" {...DefaultTableStyles.caption} {...views?.caption} {...props}/>);
+};
+export const TableView = ({ data, columns, footer, caption, themeMode: elementMode, }) => {
+    return (<TableContainer role="Table">
+      {caption && <TableCaption>{caption}</TableCaption>}
+      <TableHead>
+        <TableRow>
+          {columns.map((column) => (<TableHeadCell key={column.field}>{column.title}</TableHeadCell>))}
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {data.map((row, index) => (<TableRow key={index}>
+            {columns.map((column, columnIndex) => (<TableCell key={column.field} isFirstColumn={columnIndex === 0}>
+                {row[column.field]}
+              </TableCell>))}
+          </TableRow>))}
+      </TableBody>
+      {footer && (<TableFooter>
+          <TableRow>
+            {footer.map((cell, index) => (<TableCell key={index} {...cell.props}>
+                {cell.value}
+              </TableCell>))}
+          </TableRow>
+        </TableFooter>)}
+    </TableContainer>);
+};
+//# sourceMappingURL=Table.view.js.map

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

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

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { TableLayoutProps } from './Table/Table.props';
+export declare const Table: {
+    ({ children, views, onClick }: TableLayoutProps): React.JSX.Element;
+    Head: React.FC<import("app-studio").ViewProps>;
+    HeadCell: React.FC<import("app-studio").ViewProps>;
+    Body: React.FC<import("app-studio").ViewProps>;
+    Row: React.FC<import("app-studio").ViewProps>;
+    Cell: React.FC<import("app-studio").ViewProps & {
+        isFirstColumn?: boolean;
+    }>;
+    Footer: React.FC<import("app-studio").ViewProps>;
+    Caption: React.FC<import("app-studio").ViewProps>;
+    Container: React.FC<import("app-studio").ViewProps>;
+    Template: React.FC<import("./Table/Table.props").TableViewProps>;
+};

package/dist/native/components/Table/Table.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { TableContainer, TableHead, TableBody, TableRow, TableCell, TableFooter, TableCaption, TableView, TableHeadCell, } from './Table/Table.view';
+import { TableProvider } from './Table/Table.context';
+import { useMergedDesignSystemComponentProps } from '../../design-system';
+export const Table = ({ children, views, onClick }) => {
+    const mergedProps = useMergedDesignSystemComponentProps('table', {
+        views,
+        onClick,
+    });
+    return (<TableProvider views={mergedProps.views} onRowClick={mergedProps.onClick}>
+      {children}
+    </TableProvider>);
+};
+Table.Head = TableHead;
+Table.HeadCell = TableHeadCell;
+Table.Body = TableBody;
+Table.Row = TableRow;
+Table.Cell = TableCell;
+Table.Footer = TableFooter;
+Table.Caption = TableCaption;
+Table.Container = TableContainer;
+Table.Template = TableView;
+//# sourceMappingURL=Table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../../../src/components/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,cAAc,EACd,SAAS,EACT,SAAS,EACT,QAAQ,EACR,SAAS,EACT,WAAW,EACX,YAAY,EACZ,SAAS,EACT,aAAa,GACd,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,OAAO,EAAE,mCAAmC,EAAE,MAAM,mBAAmB,CAAC;AAExE,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAoB,EAAE,EAAE;IACtE,MAAM,WAAW,GAAG,mCAAmC,CAAC,OAAO,EAAE;QAC/D,KAAK;QACL,OAAO;KACR,CAAC,CAAC;IAEH,OAAO,CACL,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,CACvE;MAAA,CAAC,QAAQ,CACX;IAAA,EAAE,aAAa,CAAC,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC;AACvB,KAAK,CAAC,QAAQ,GAAG,aAAa,CAAC;AAC/B,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC;AACvB,KAAK,CAAC,GAAG,GAAG,QAAQ,CAAC;AACrB,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC;AACvB,KAAK,CAAC,MAAM,GAAG,WAAW,CAAC;AAC3B,KAAK,CAAC,OAAO,GAAG,YAAY,CAAC;AAC7B,KAAK,CAAC,SAAS,GAAG,cAAc,CAAC;AACjC,KAAK,CAAC,QAAQ,GAAG,SAAS,CAAC"}

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

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

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Element, Text } from 'app-studio';
+/**
+ * TabHeader component renders a single tab in the tab navigation.
+ * It's designed to be a lightweight alternative to using Button components.
+ */
+export const TabHeader = React.memo(({ tab, isActive, onClick, iconPosition = 'left', tabStyles, textStyles, }) => {
+    // Determine the flex direction based on icon position
+    const getFlexDirection = () => {
+        switch (iconPosition) {
+            case 'top':
+                return 'column';
+            case 'bottom':
+                return 'column-reverse';
+            case 'right':
+                return 'row-reverse';
+            case 'left':
+            default:
+                return 'row';
+        }
+    };
+    // Determine the gap based on icon position
+    const getGap = () => {
+        return ['top', 'bottom'].includes(iconPosition) ? '4px' : '8px';
+    };
+    // Clone icon to apply active styles (e.g. bold stroke) if valid.
+    // Use isValidElement's generic to give `tab.icon.props` a concrete shape
+    // (React 19 types it as `unknown` by default).
+    const iconElement = tab.icon && React.isValidElement(tab.icon)
+        ? React.cloneElement(tab.icon, {
+            strokeWidth: isActive ? 2.5 : 2,
+        })
+        : tab.icon;
+    return (<Element as="div" role="tab" aria-selected={isActive} tabIndex={isActive ? 0 : -1} display="flex" alignItems="center" justifyContent="center" cursor="pointer" transition="background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease" {...tabStyles} flexDirection={getFlexDirection()} gap={getGap()} onClick={onClick} data-state={isActive ? 'active' : 'inactive'}>
+        {/*
+        Force icon remount when active state changes to ensure strokeWidth prop is applied
+        even if the Icon component doesn't handle prop updates correctly.
+      */}
+        {iconElement && (<Element key={isActive ? 'active-icon' : 'inactive-icon'}>
+            {iconElement}
+          </Element>)}
+
+        {/* Grid wrapper to prevent layout shift when font weight changes */}
+        <Element display="grid" alignItems="center" justifyContent="center">
+          {/* Invisible bold text to reserve space */}
+          <Text {...textStyles} fontWeight="600" visibility="hidden" gridColumn="1" gridRow="1" aria-hidden="true">
+            {tab.title}
+          </Text>
+          {/* Visible text */}
+          <Text {...textStyles} fontWeight={isActive ? '600' : '500'} gridColumn="1" gridRow="1">
+            {tab.title}
+          </Text>
+        </Element>
+      </Element>);
+});
+//# sourceMappingURL=TabHeader.js.map

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

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

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import { TabsStyles, TabsVariant, Tab } from './Tabs.type';
+import { ViewProps } from 'app-studio';
+/**
+ * Props for the main Tabs component (External API).
+ * Supports both data-driven approach (with tabs prop) and compound component pattern.
+ */
+export interface TabsProps {
+    /** Array of tab objects to be displayed. Each tab needs a unique `value`. (Data-driven approach) */
+    tabs?: Tab[];
+    /** Optional value of the tab to be active initially. Defaults to the first tab if not provided or not found. */
+    defaultValue?: string | number;
+    /** Optional callback function triggered when the active tab changes. Receives the newly active tab object. */
+    onTabChange?: (activeTab: Tab) => void;
+    /** Optional styles object to customize the appearance of the tabs container, headers, text, and content area. */
+    views?: TabsStyles;
+    /** Visual presentation style for the tab list. */
+    variant?: TabsVariant;
+    /** Optional position of the icon relative to the text in tab headers. */
+    iconPosition?: 'left' | 'right' | 'top' | 'bottom';
+    /**
+     * Optional custom renderer for a single tab header.
+     * Receives the tab data, whether it's currently active, and an onClick handler to activate the tab.
+     */
+    renderTab?: (tab: Tab, isActive: boolean, onClick: () => void) => React.ReactNode;
+    /**
+     * Optional custom renderer for the content area.
+     * Receives the currently active tab object.
+     * If not provided, the `content` property from the active tab object will be rendered.
+     */
+    renderContent?: (activeTab: Tab) => React.ReactNode;
+    /** Current value for controlled compound component pattern */
+    value?: string | number;
+    /** Callback when tab value changes in compound component pattern */
+    onValueChange?: (value: any) => void;
+    /** Children for compound component pattern */
+    children?: React.ReactNode;
+}
+/**
+ * Props specifically for the TabsView component (Internal).
+ * These props are derived or passed down from the main Tabs component.
+ */
+export interface TabsViewProps {
+    variant?: TabsVariant;
+    iconPosition?: 'left' | 'right' | 'bottom' | 'top';
+    /** The original array of tab objects. */
+    tabs: Tab[];
+    /** The currently active tab object, or undefined if none is active. */
+    activeTab: Tab | undefined;
+    /** Callback function to handle clicking on a tab header/button. */
+    handleTabClick: (tab: Tab) => void;
+    /** Optional styles object. */
+    views?: TabsStyles;
+    /** Optional custom renderer for a tab button/header. */
+    renderTab?: (tab: Tab, isActive: boolean, onClick: () => void) => React.ReactNode;
+    /** Optional custom renderer for the content area. */
+    renderContent?: (activeTab: Tab) => React.ReactNode;
+}
+/**
+ * Props for TabsList compound component
+ */
+export interface TabsListProps {
+    /** Children (TabsTrigger components) */
+    children: React.ReactNode;
+    /** Custom styles for the list container */
+    views?: {
+        container?: ViewProps;
+    };
+}
+/**
+ * Props for TabsTrigger compound component
+ */
+export interface TabsTriggerProps {
+    /** Unique value for this tab */
+    value: string;
+    /** Children content for the trigger */
+    children: React.ReactNode;
+    /** Whether this trigger is disabled */
+    disabled?: boolean;
+    /** Custom styles for the trigger */
+    views?: {
+        trigger?: ViewProps;
+        activeState?: ViewProps;
+    };
+}
+/**
+ * Props for TabsContent compound component
+ */
+export interface TabsContentProps {
+    /** Value that this content corresponds to */
+    value: string;
+    /** Children content to display when this tab is active */
+    children: React.ReactNode;
+    /** Custom styles for the content */
+    views?: {
+        content?: ViewProps;
+    };
+}

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

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

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

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

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

@@ -0,0 +1,22 @@
+import { Tab } from './Tabs.type';
+/**
+ * Custom hook to manage the state of the active tab.
+ * @param propTabs - The array of tab objects provided as props.
+ * @param defaultValue - The optional title of the tab to be initially active.
+ * @returns An object containing the current activeTab and a function to update it.
+ */
+export declare const useTabsState: (propTabs: Tab[], defaultValue?: string | number, value?: string | number) => {
+    activeTab: Tab | undefined;
+    setActiveTab: (tab: Tab) => void;
+};
+/**
+ * Custom hook to manage the state for compound component pattern.
+ * @param defaultValue - The default value for the active tab (uncontrolled)
+ * @param value - The current value for the active tab (controlled)
+ * @param onValueChange - Callback when the active value changes
+ * @returns An object containing the current activeValue and a function to update it.
+ */
+export declare const useTabsCompoundState: (defaultValue?: string | number, value?: string | number, onValueChange?: (value: string | number) => void) => {
+    activeValue: string | number | null;
+    setActiveValue: (newValue: string | number) => void;
+};

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

@@ -0,0 +1,88 @@
+import { useState, useEffect } from 'react';
+/**
+ * Custom hook to manage the state of the active tab.
+ * @param propTabs - The array of tab objects provided as props.
+ * @param defaultValue - The optional title of the tab to be initially active.
+ * @returns An object containing the current activeTab and a function to update it.
+ */
+export const useTabsState = (propTabs, defaultValue, value) => {
+    // Helper to extract the identifier (value or title) from a tab
+    const getTabId = (tab) => tab.value !== undefined ? tab.value : tab.title;
+    // Find the initial tab based on defaultValue, or default to the first tab.
+    const findInitialTab = () => {
+        if (!propTabs || propTabs.length === 0) {
+            return undefined;
+        }
+        if (defaultValue !== undefined) {
+            const foundTab = propTabs.find((tab) => getTabId(tab) === defaultValue);
+            if (foundTab) {
+                return foundTab;
+            }
+        }
+        return propTabs[0];
+    };
+    const [internalActiveTab, setInternalActiveTab] = useState(findInitialTab());
+    // Determine the effective active tab
+    // In controlled mode (value provided), find the tab matching value.
+    // In uncontrolled mode, use internal state.
+    const activeTab = value !== undefined
+        ? propTabs.find((tab) => getTabId(tab) === value)
+        : internalActiveTab;
+    const setActiveTab = (tab) => {
+        // Only update internal state if uncontrolled
+        if (value === undefined) {
+            setInternalActiveTab(tab);
+        }
+    };
+    // Effect to update internal active tab if defaultValue changes or tabs change
+    useEffect(() => {
+        if (value !== undefined)
+            return; // Skip logic if controlled
+        const newInitialTab = findInitialTab();
+        const currentActiveTabStillValid = internalActiveTab &&
+            propTabs.some((t) => getTabId(t) === getTabId(internalActiveTab));
+        // If current tab is invalid, or if defaultValue changed and suggests a different tab
+        // (Note: The original logic forced reset on defaultValue change, we keep that behavior)
+        if (newInitialTab &&
+            (!currentActiveTabStillValid ||
+                (defaultValue !== undefined &&
+                    internalActiveTab &&
+                    getTabId(internalActiveTab) !== defaultValue))) {
+            setInternalActiveTab(newInitialTab);
+        }
+        else if (!newInitialTab && internalActiveTab) {
+            setInternalActiveTab(undefined);
+        }
+    }, [propTabs, defaultValue]); // Remove internalActiveTab dependency to avoid loops, though it shouldn't cause one if guarded
+    return {
+        activeTab,
+        setActiveTab,
+    };
+};
+/**
+ * Custom hook to manage the state for compound component pattern.
+ * @param defaultValue - The default value for the active tab (uncontrolled)
+ * @param value - The current value for the active tab (controlled)
+ * @param onValueChange - Callback when the active value changes
+ * @returns An object containing the current activeValue and a function to update it.
+ */
+export const useTabsCompoundState = (defaultValue, value, onValueChange) => {
+    const [internalValue, setInternalValue] = useState(defaultValue || null);
+    // Use controlled value if provided, otherwise use internal state
+    const activeValue = value !== undefined ? value : internalValue;
+    const setActiveValue = (newValue) => {
+        // Only update internal state if not controlled
+        if (value === undefined) {
+            setInternalValue(newValue);
+        }
+        // Always call the callback
+        if (onValueChange) {
+            onValueChange(newValue);
+        }
+    };
+    return {
+        activeValue,
+        setActiveValue,
+    };
+};
+//# sourceMappingURL=Tabs.state.js.map