@udixio/ui-react 2.9.4 → 2.9.6

package/dist/lib/components/Tab.d.ts

@@ -4,5 +4,5 @@ import { ReactProps } from '../utils/component';
  * @status beta
  * @parent Tabs
  */
-export declare const Tab: ({ className, onClick, label, variant, href, icon, selectedTab, setSelectedTab, tabsId, index, onTabSelected, scrollable, selected, ref, ...restProps }: ReactProps<TabInterface>) => import("react/jsx-runtime").JSX.Element;
+export declare const Tab: ({ className, onClick, label: labelProp, variant, href, icon, selectedTab, setSelectedTab, tabsId, index, onTabSelected, scrollable, selected, children, ref, ...restProps }: ReactProps<TabInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Tab.d.ts.map

package/dist/lib/components/Tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tab.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD;;;GAGG;AACH,eAAO,MAAM,GAAG,GAAI,wJAgBjB,UAAU,CAAC,YAAY,CAAC,4CAoF1B,CAAC"}
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tab.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD;;;GAGG;AACH,eAAO,MAAM,GAAG,GAAI,6KAiBjB,UAAU,CAAC,YAAY,CAAC,4CAuF1B,CAAC"}

package/dist/lib/components/TabGroup.d.ts

@@ -0,0 +1,9 @@
+import { TabGroupInterface } from '../interfaces/tab-group.interface';
+import { ReactProps } from '../utils/component';
+/**
+ * TabGroup provides shared state for Tabs and TabPanels
+ * @status beta
+ * @category Navigation
+ */
+export declare const TabGroup: ({ children, selectedTab: externalSelectedTab, setSelectedTab: externalSetSelectedTab, defaultTab, }: ReactProps<TabGroupInterface>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TabGroup.d.ts.map

package/dist/lib/components/TabGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabGroup.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TabGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,qGAKtB,UAAU,CAAC,iBAAiB,CAAC,4CA2C/B,CAAC"}

package/dist/lib/components/TabGroupContext.d.ts

@@ -0,0 +1,10 @@
+import { Dispatch, SetStateAction } from 'react';
+export interface TabGroupContextValue {
+    selectedTab: number | null;
+    setSelectedTab: Dispatch<SetStateAction<number | null>>;
+    previousTab: number | null;
+    direction: number;
+    tabsId: string;
+}
+export declare const TabGroupContext: import('react').Context<TabGroupContextValue | null>;
+//# sourceMappingURL=TabGroupContext.d.ts.map

package/dist/lib/components/TabGroupContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabGroupContext.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TabGroupContext.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiB,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEhE,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACxD,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,eAAe,sDAAmD,CAAC"}

package/dist/lib/components/TabPanel.d.ts

@@ -0,0 +1,10 @@
+import { TabPanelInterface } from '../interfaces/tab-panels.interface';
+import { ReactProps } from '../utils/component';
+/**
+ * TabPanel contains the content for a single tab
+ * Must be used within TabPanels
+ * @status beta
+ * @category Navigation
+ */
+export declare const TabPanel: ({ children, className, isSelected, }: ReactProps<TabPanelInterface>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TabPanel.d.ts.map

package/dist/lib/components/TabPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TabPanel.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oCAAoC,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGhD;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,GAAI,sCAItB,UAAU,CAAC,iBAAiB,CAAC,4CAQ/B,CAAC"}

package/dist/lib/components/TabPanels.d.ts

@@ -0,0 +1,10 @@
+import { TabPanelsInterface } from '../interfaces/tab-panels.interface';
+import { ReactProps } from '../utils/component';
+/**
+ * TabPanels renders the content panels with slide animation
+ * Must be used within a TabGroup
+ * @status beta
+ * @category Navigation
+ */
+export declare const TabPanels: ({ children, className, }: ReactProps<TabPanelsInterface>) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=TabPanels.d.ts.map

package/dist/lib/components/TabPanels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabPanels.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TabPanels.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AACxE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIhD;;;;;GAKG;AACH,eAAO,MAAM,SAAS,GAAI,0BAGvB,UAAU,CAAC,kBAAkB,CAAC,mDAqDhC,CAAC"}

package/dist/lib/components/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAG7D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIhD;;;;GAIG;AACH,eAAO,MAAM,IAAI,GAAI,wIAQlB,UAAU,CAAC,aAAa,CAAC,4CAmE3B,CAAC"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAG7D,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAKhD;;;;GAIG;AACH,eAAO,MAAM,IAAI,GAAI,wIAQlB,UAAU,CAAC,aAAa,CAAC,4CA6E3B,CAAC"}

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

@@ -17,6 +17,9 @@ export * from './Snackbar';
 export * from './Switch';
 export * from './Tab';
 export * from './Tabs';
+export * from './TabGroup';
+export * from './TabPanels';
+export * from './TabPanel';
 export * from './TextField';
 export * from './NavigationRailItem';
 export * from './NavigationRail';

package/dist/lib/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,OAAO,CAAC;AACtB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC"}

package/dist/lib/interfaces/index.d.ts

@@ -15,6 +15,8 @@ export * from './snackbar.interface';
 export * from './switch.interface';
 export * from './tab.interface';
 export * from './tabs.interface';
+export * from './tab-group.interface';
+export * from './tab-panels.interface';
 export * from './text-field.interface';
 export * from './navigation-rail-item.interface';
 export * from './tooltip.interface';

package/dist/lib/interfaces/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kCAAkC,CAAC;AACjD,cAAc,qBAAqB,CAAC"}

package/dist/lib/interfaces/tab-group.interface.d.ts

@@ -0,0 +1,13 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+export interface TabGroupInterface {
+    type: 'div';
+    props: {
+        children: ReactNode;
+        selectedTab?: number | null;
+        setSelectedTab?: Dispatch<SetStateAction<number | null>>;
+        defaultTab?: number;
+    };
+    states: object;
+    elements: ['tabGroup'];
+}
+//# sourceMappingURL=tab-group.interface.d.ts.map

package/dist/lib/interfaces/tab-group.interface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-group.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/tab-group.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5D,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE;QACL,QAAQ,EAAE,SAAS,CAAC;QACpB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QAC5B,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;QACzD,UAAU,CAAC,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,UAAU,CAAC,CAAC;CACxB"}

package/dist/lib/interfaces/tab-panels.interface.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export interface TabPanelsInterface {
+    type: 'div';
+    props: {
+        children: ReactNode;
+    };
+    states: object;
+    elements: ['tabPanels'];
+}
+export interface TabPanelInterface {
+    type: 'div';
+    props: {
+        children: ReactNode;
+    };
+    states: {
+        isSelected: boolean;
+    };
+    elements: ['tabPanel'];
+}
+//# sourceMappingURL=tab-panels.interface.d.ts.map

package/dist/lib/interfaces/tab-panels.interface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panels.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/tab-panels.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE;QACL,QAAQ,EAAE,SAAS,CAAC;KACrB,CAAC;IACF,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,WAAW,CAAC,CAAC;CACzB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE;QACL,QAAQ,EAAE,SAAS,CAAC;KACrB,CAAC;IACF,MAAM,EAAE;QACN,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;IACF,QAAQ,EAAE,CAAC,UAAU,CAAC,CAAC;CACxB"}

package/dist/lib/interfaces/tab.interface.d.ts

@@ -1,6 +1,6 @@
 import { ActionOrLink } from '../utils/component';
 import { TabsVariant } from './tabs.interface';
-import { Dispatch, RefObject, SetStateAction } from 'react';
+import { Dispatch, ReactNode, RefObject, SetStateAction } from 'react';
 import { Icon } from '../icon';
 export type TabProps = {
     selected?: boolean;
@@ -17,6 +17,7 @@ export type TabProps = {
     }) => void;
     index?: number;
     scrollable?: boolean;
+    children?: ReactNode;
 };
 type Elements = ['tab', 'stateLayer', 'icon', 'label', 'content', 'underline'];
 export type TabInterface = ActionOrLink<TabProps> & {

package/dist/lib/interfaces/tab.interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/tab.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,CACd,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;QACzD,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;KACrB,KACA,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,QAAQ,GAAG,CAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;AAE/E,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,QAAQ,CAAC,GAAG;IAClD,MAAM,EAAE;QACN,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;IACF,QAAQ,EAAE,QAAQ,CAAC;CACpB,CAAC"}
+{"version":3,"file":"tab.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/tab.interface.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,MAAM,QAAQ,GAAG;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,CACd,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;QACzD,GAAG,EAAE,SAAS,CAAC,GAAG,CAAC,CAAC;KACrB,KACA,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,KAAK,QAAQ,GAAG,CAAC,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC;AAE/E,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,QAAQ,CAAC,GAAG;IAClD,MAAM,EAAE;QACN,UAAU,EAAE,OAAO,CAAC;KACrB,CAAC;IACF,QAAQ,EAAE,QAAQ,CAAC;CACpB,CAAC"}

package/dist/lib/styles/index.d.ts

@@ -15,6 +15,7 @@ export * from './snackbar.style';
 export * from './switch.style';
 export * from './tab.style';
 export * from './tabs.style';
+export * from './tab-panels.style';
 export * from './text-field.style';
 export * from './tooltip.style';
 export { useButtonStyle } from './button.style';

package/dist/lib/styles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/lib/styles/tab-panels.style.d.ts

@@ -0,0 +1,31 @@
+import { TabPanelsInterface, TabPanelInterface } from '../interfaces';
+import { ClassNameComponent } from '../utils';
+export declare const tabPanelsStyle: (states: {
+    children: any;
+} & {
+    children: import('react').ReactNode;
+} & object & {
+    className: string | ClassNameComponent<TabPanelsInterface> | undefined;
+}) => Record<"tabPanels", string>;
+export declare const useTabPanelsStyle: (states: object & {
+    children: import('react').ReactNode;
+} & {
+    className?: string | ClassNameComponent<TabPanelsInterface> | undefined;
+}) => Record<"tabPanels", string>;
+export declare const tabPanelStyle: (states: {
+    children: any;
+} & {
+    children: import('react').ReactNode;
+} & {
+    isSelected: boolean;
+} & {
+    className: string | ClassNameComponent<TabPanelInterface> | undefined;
+}) => Record<"tabPanel", string>;
+export declare const useTabPanelStyle: (states: {
+    isSelected: boolean;
+} & {
+    children: import('react').ReactNode;
+} & {
+    className?: string | ClassNameComponent<TabPanelInterface> | undefined;
+}) => Record<"tabPanel", string>;
+//# sourceMappingURL=tab-panels.style.d.ts.map

package/dist/lib/styles/tab-panels.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tab-panels.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/tab-panels.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACtE,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAMlB,eAAO,MAAM,cAAc;;;;;;iCAG1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;iCAG7B,CAAC;AAMF,eAAO,MAAM,aAAa;;;;;;;;gCAGzB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;gCAG5B,CAAC"}

package/dist/lib/styles/tab.style.d.ts

@@ -11,6 +11,7 @@ export declare const tabStyle: (states: (({
     onTabSelected: any;
     index: any;
     scrollable: any;
+    children: any;
     href: any;
 } | {
     selected: any;
@@ -23,6 +24,7 @@ export declare const tabStyle: (states: (({
     onTabSelected: any;
     index: any;
     scrollable: any;
+    children: any;
     href: any;
 }) & ((import('..').TabProps & {
     href?: string;

package/dist/lib/styles/tab.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/tab.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAqE7C,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uFAAoD,CAAC;AAE1E,eAAO,MAAM,WAAW;;;;;;;;wFAAsD,CAAC"}
+{"version":3,"file":"tab.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/tab.style.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAqE7C,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uFAAoD,CAAC;AAE1E,eAAO,MAAM,WAAW;;;;;;;;wFAAsD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "2.9.4",
+  "version": "2.9.6",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -36,8 +36,8 @@
   "devDependencies": {
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "@udixio/theme": "2.1.7",
-    "@udixio/tailwind": "2.4.5"
+    "@udixio/theme": "2.1.9",
+    "@udixio/tailwind": "2.4.7"
   },
   "repository": {
     "type": "git",

package/src/lib/components/Tab.tsx

@@ -14,7 +14,7 @@ import { State } from '../effects';
 export const Tab = ({
   className,
   onClick,
-  label,
+  label: labelProp,
   variant = 'primary',
   href,
   icon,
@@ -25,12 +25,16 @@ export const Tab = ({
   onTabSelected,
   scrollable = false,
   selected = false,
+  children,
   ref,
   ...restProps
 }: ReactProps<TabInterface>) => {
   const defaultRef = useRef(null);
   const resolvedRef = ref || defaultRef;
 
+  // children (string) peut être utilisé comme alternative à label prop
+  const label = labelProp ?? (typeof children === 'string' ? children : undefined);
+
   const [isSelected, setIsSelected] = useState<boolean>(selected);
 
   useEffect(() => {

package/src/lib/components/TabGroup.tsx

@@ -0,0 +1,60 @@
+import React, { useMemo, useRef, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { TabGroupContext, TabGroupContextValue } from './TabGroupContext';
+import { TabGroupInterface } from '../interfaces/tab-group.interface';
+import { ReactProps } from '../utils/component';
+
+/**
+ * TabGroup provides shared state for Tabs and TabPanels
+ * @status beta
+ * @category Navigation
+ */
+export const TabGroup = ({
+  children,
+  selectedTab: externalSelectedTab,
+  setSelectedTab: externalSetSelectedTab,
+  defaultTab = 0,
+}: ReactProps<TabGroupInterface>) => {
+  const [internalSelectedTab, internalSetSelectedTab] = useState<number | null>(
+    defaultTab,
+  );
+  const previousTabRef = useRef<number | null>(null);
+
+  // Priorité : props externes > état interne
+  const selectedTab =
+    externalSelectedTab !== undefined ? externalSelectedTab : internalSelectedTab;
+
+  const setSelectedTab = externalSetSelectedTab ?? internalSetSelectedTab;
+
+  // Calculer la direction du slide
+  const direction =
+    previousTabRef.current !== null && selectedTab !== null
+      ? selectedTab > previousTabRef.current
+        ? 1
+        : -1
+      : 0;
+
+  // Mettre à jour la référence précédente
+  if (selectedTab !== previousTabRef.current) {
+    previousTabRef.current = selectedTab;
+  }
+
+  const tabsId = useMemo(() => uuidv4(), []);
+
+  const contextValue: TabGroupContextValue = useMemo(
+    () => ({
+      selectedTab,
+      setSelectedTab,
+      previousTab: previousTabRef.current,
+      direction,
+      tabsId,
+    }),
+    [selectedTab, setSelectedTab, direction, tabsId],
+  );
+
+  return (
+    <TabGroupContext.Provider value={contextValue}>
+      {children}
+    </TabGroupContext.Provider>
+  );
+};

package/src/lib/components/TabGroupContext.tsx

@@ -0,0 +1,11 @@
+import { createContext, Dispatch, SetStateAction } from 'react';
+
+export interface TabGroupContextValue {
+  selectedTab: number | null;
+  setSelectedTab: Dispatch<SetStateAction<number | null>>;
+  previousTab: number | null;
+  direction: number;
+  tabsId: string;
+}
+
+export const TabGroupContext = createContext<TabGroupContextValue | null>(null);

package/src/lib/components/TabPanel.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { TabPanelInterface } from '../interfaces/tab-panels.interface';
+import { ReactProps } from '../utils/component';
+import { useTabPanelStyle } from '../styles/tab-panels.style';
+
+/**
+ * TabPanel contains the content for a single tab
+ * Must be used within TabPanels
+ * @status beta
+ * @category Navigation
+ */
+export const TabPanel = ({
+  children,
+  className,
+  isSelected = false,
+}: ReactProps<TabPanelInterface>) => {
+  const styles = useTabPanelStyle({
+    children,
+    className,
+    isSelected,
+  });
+
+  return <div className={styles.tabPanel}>{children}</div>;
+};

package/src/lib/components/TabPanels.tsx

@@ -0,0 +1,71 @@
+import React, { useContext } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { TabGroupContext } from './TabGroupContext';
+import { TabPanelsInterface } from '../interfaces/tab-panels.interface';
+import { ReactProps } from '../utils/component';
+import { useTabPanelsStyle } from '../styles/tab-panels.style';
+import { TabPanel } from './TabPanel';
+
+/**
+ * TabPanels renders the content panels with slide animation
+ * Must be used within a TabGroup
+ * @status beta
+ * @category Navigation
+ */
+export const TabPanels = ({
+  children,
+  className,
+}: ReactProps<TabPanelsInterface>) => {
+  const context = useContext(TabGroupContext);
+
+  if (!context) {
+    console.warn('TabPanels must be used within a TabGroup');
+    return null;
+  }
+
+  const { selectedTab, direction, tabsId } = context;
+
+  const panelChildren = React.Children.toArray(children).filter(
+    (child) => React.isValidElement(child) && child.type === TabPanel,
+  ) as React.ReactElement[];
+
+  const styles = useTabPanelsStyle({
+    children,
+    className,
+  });
+
+  return (
+    <div className={styles.tabPanels}>
+      <AnimatePresence initial={false} custom={direction} mode="popLayout">
+        {panelChildren.map(
+          (child, index) =>
+            selectedTab === index && (
+              <motion.div
+                key={index}
+                custom={direction}
+                variants={{
+                  enter: (dir: number) => ({
+                    x: dir * 100 + '%',
+                    opacity: 1,
+                  }),
+                  center: { x: 0, opacity: 1 },
+                  exit: (dir: number) => ({
+                    x: dir * -100 + '%',
+                    opacity: 1,
+                  }),
+                }}
+                initial="enter"
+                animate="center"
+                exit="exit"
+                transition={{ type: 'spring', stiffness: 400, damping: 40 }}
+                role="tabpanel"
+                aria-labelledby={`tab-${tabsId}-${index}`}
+              >
+                {React.cloneElement(child, { isSelected: true })}
+              </motion.div>
+            ),
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};

package/src/lib/components/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { TabsInterface } from '../interfaces/tabs.interface';
 
@@ -6,6 +6,7 @@ import { useTabsStyle } from '../styles/tabs.style';
 import { ReactProps } from '../utils/component';
 import { TabProps } from '../interfaces/tab.interface';
 import { Tab } from './Tab';
+import { TabGroupContext } from './TabGroupContext';
 
 /**
  * Tabs organize content across different screens and views
@@ -21,22 +22,28 @@ export const Tabs = ({
   setSelectedTab: externalSetSelectedTab,
   scrollable = false,
 }: ReactProps<TabsInterface>) => {
+  const tabGroupContext = useContext(TabGroupContext);
+
   const [internalSelectedTab, internalSetSelectedTab] = useState<number | null>(
     null,
   );
 
+  // Priorité : props > context > état interne
   let selectedTab: number | null;
-  if (externalSelectedTab == 0 || externalSelectedTab != undefined) {
+  if (externalSelectedTab === 0 || externalSelectedTab != undefined) {
     selectedTab = externalSelectedTab;
+  } else if (tabGroupContext) {
+    selectedTab = tabGroupContext.selectedTab;
   } else {
     selectedTab = internalSelectedTab;
   }
 
-  const setSelectedTab = externalSetSelectedTab || internalSetSelectedTab;
+  const setSelectedTab =
+    externalSetSelectedTab ?? tabGroupContext?.setSelectedTab ?? internalSetSelectedTab;
 
   const tabChildren = React.Children.toArray(children).filter(
     (child) => React.isValidElement(child) && child.type === Tab,
-  );
+  ) as React.ReactElement<TabProps>[];
 
   const ref = React.useRef<HTMLDivElement | null>(null);
 
@@ -60,7 +67,10 @@ export const Tabs = ({
     }
   };
 
-  const tabsId = useMemo(() => uuidv4(), []);
+  const tabsId = useMemo(
+    () => tabGroupContext?.tabsId ?? uuidv4(),
+    [tabGroupContext?.tabsId],
+  );
 
   const styles = useTabsStyle({
     children,
@@ -71,10 +81,11 @@ export const Tabs = ({
     className,
     variant,
   });
+
   return (
     <div ref={ref} role="tablist" className={styles.tabs}>
       {tabChildren.map((child, index) => {
-        return React.cloneElement(child as React.ReactElement<TabProps>, {
+        return React.cloneElement(child, {
           key: index,
           index,
           variant: variant,

package/src/lib/components/index.ts

@@ -17,6 +17,9 @@ export * from './Snackbar';
 export * from './Switch';
 export * from './Tab';
 export * from './Tabs';
+export * from './TabGroup';
+export * from './TabPanels';
+export * from './TabPanel';
 export * from './TextField';
 export * from './NavigationRailItem';
 export * from './NavigationRail';

package/src/lib/interfaces/index.ts

@@ -15,6 +15,8 @@ export * from './snackbar.interface';
 export * from './switch.interface';
 export * from './tab.interface';
 export * from './tabs.interface';
+export * from './tab-group.interface';
+export * from './tab-panels.interface';
 export * from './text-field.interface';
 export * from './navigation-rail-item.interface';
 export * from './tooltip.interface';

package/src/lib/interfaces/tab-group.interface.ts

@@ -0,0 +1,13 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+
+export interface TabGroupInterface {
+  type: 'div';
+  props: {
+    children: ReactNode;
+    selectedTab?: number | null;
+    setSelectedTab?: Dispatch<SetStateAction<number | null>>;
+    defaultTab?: number;
+  };
+  states: object;
+  elements: ['tabGroup'];
+}

package/src/lib/interfaces/tab-panels.interface.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+export interface TabPanelsInterface {
+  type: 'div';
+  props: {
+    children: ReactNode;
+  };
+  states: object;
+  elements: ['tabPanels'];
+}
+
+export interface TabPanelInterface {
+  type: 'div';
+  props: {
+    children: ReactNode;
+  };
+  states: {
+    isSelected: boolean;
+  };
+  elements: ['tabPanel'];
+}

package/src/lib/interfaces/tab.interface.ts

@@ -1,6 +1,6 @@
 import { ActionOrLink } from '../utils/component';
 import { TabsVariant } from './tabs.interface';
-import { Dispatch, RefObject, SetStateAction } from 'react';
+import { Dispatch, ReactNode, RefObject, SetStateAction } from 'react';
 import { Icon } from '../icon';
 
 export type TabProps = {
@@ -18,6 +18,7 @@ export type TabProps = {
   ) => void;
   index?: number;
   scrollable?: boolean;
+  children?: ReactNode;
 };
 
 type Elements = ['tab', 'stateLayer', 'icon', 'label', 'content', 'underline'];

package/src/lib/styles/index.ts

@@ -15,6 +15,7 @@ export * from './snackbar.style';
 export * from './switch.style';
 export * from './tab.style';
 export * from './tabs.style';
+export * from './tab-panels.style';
 export * from './text-field.style';
 export * from './tooltip.style';
 export { useButtonStyle } from './button.style';