@payfit/unity-components 3.4.8 → 3.4.10

package/dist/esm/core/components/tabs/Tabs.context.d.ts

@@ -4,8 +4,9 @@ import { tabsVariant } from './Tabs.variant.js';
 interface TabsContextValue {
     variant: VariantProps<typeof tabsVariant>['variant'];
     scrollable: boolean;
+    layout: NonNullable<VariantProps<typeof tabsVariant>['layout']>;
 }
 export declare const TabsContext: import('react').Context<TabsContextValue>;
-export declare function TabsProvider({ children, variant, scrollable, }: PropsWithChildren<TabsContextValue>): import('react/jsx-runtime').JSX.Element;
+export declare function TabsProvider({ children, variant, scrollable, layout, }: PropsWithChildren<TabsContextValue>): import('react/jsx-runtime').JSX.Element;
 export declare function useTabsContext(): TabsContextValue;
 export {};

package/dist/esm/core/components/tabs/Tabs.context.js

@@ -3,13 +3,15 @@ import { jsx as n } from "react/jsx-runtime";
 //#region src/core/components/tabs/Tabs.context.tsx
 var r = e({
 	variant: "primary",
-	scrollable: !1
+	scrollable: !1,
+	layout: "compact"
 });
-function i({ children: e, variant: t, scrollable: i }) {
+function i({ children: e, variant: t, scrollable: i, layout: a }) {
 	return /* @__PURE__ */ n(r.Provider, {
 		value: {
 			variant: t,
-			scrollable: i
+			scrollable: i,
+			layout: a
 		},
 		children: e
 	});

package/dist/esm/core/components/tabs/Tabs.d.ts

@@ -1,9 +1,18 @@
 import { VariantProps } from '@payfit/unity-themes';
 import { TabsProps as AriaTabsProps } from 'react-aria-components/Tabs';
 import { tabsVariant } from './Tabs.variant.js';
+type TabsLayout = NonNullable<VariantProps<typeof tabsVariant>['layout']>;
 export interface TabsProps extends Omit<AriaTabsProps, 'isDisabled' | 'orientation' | 'className' | 'style' | 'disabledKeys' | 'keyboardActivation' | 'slot'>, VariantProps<typeof tabsVariant> {
     /** set to true to make the tabs scrollable */
     scrollable?: boolean;
+    /**
+     * Controls how tabs use the available width.
+     * @default 'compact'
+     * @remarks
+     * - `compact` sizes each tab to its content.
+     * - `full` distributes the available tab-list width evenly across tabs.
+     */
+    layout?: TabsLayout;
 }
 /**
  * Use these tabs when switching between sections without changing the URL.
@@ -45,6 +54,15 @@ export interface TabsProps extends Omit<AriaTabsProps, 'isDisabled' | 'orientati
  *   </TabPanels>
  * </Tabs>
  * ```
+ * @example Full-width layout
+ * ```tsx
+ * <Tabs layout="full">
+ *   <TabList aria-label="Account">
+ *     <RawTab id="profile">Profile</RawTab>
+ *     <RawTab id="settings">Settings</RawTab>
+ *   </TabList>
+ * </Tabs>
+ * ```
  */
 declare const Tabs: import('react').ForwardRefExoticComponent<TabsProps & import('react').RefAttributes<HTMLDivElement>>;
 export { Tabs };

package/dist/esm/core/components/tabs/Tabs.js

@@ -4,19 +4,21 @@ import { forwardRef as n } from "react";
 import { jsx as r } from "react/jsx-runtime";
 import { Tabs as i } from "react-aria-components/Tabs";
 //#region src/core/components/tabs/Tabs.tsx
-var a = n(({ children: n, variant: a, scrollable: o = !1, ...s }, c) => {
-	let { base: l } = t({
+var a = n(({ children: n, variant: a, scrollable: o = !1, layout: s = "compact", ...c }, l) => {
+	let { base: u } = t({
 		variant: a,
-		scrollable: o
+		scrollable: o,
+		layout: s
 	});
 	return /* @__PURE__ */ r(e, {
 		variant: a,
 		scrollable: o,
+		layout: s,
 		children: /* @__PURE__ */ r(i, {
 			"data-dd-privacy": "allow",
-			ref: c,
-			className: l(),
-			...s,
+			ref: l,
+			className: u(),
+			...c,
 			children: n
 		})
 	});

package/dist/esm/core/components/tabs/Tabs.variant.d.ts

@@ -16,6 +16,13 @@ export declare const tabsVariant: import('tailwind-variants').TVReturnType<{
             scroller: string;
         };
     };
+    layout: {
+        compact: {};
+        full: {
+            tabList: string;
+            tab: string;
+        };
+    };
 }, {
     base: string;
     tabList: string;
@@ -39,6 +46,13 @@ export declare const tabsVariant: import('tailwind-variants').TVReturnType<{
             scroller: string;
         };
     };
+    layout: {
+        compact: {};
+        full: {
+            tabList: string;
+            tab: string;
+        };
+    };
 }, {
     base: string;
     tabList: string;
@@ -62,6 +76,13 @@ export declare const tabsVariant: import('tailwind-variants').TVReturnType<{
             scroller: string;
         };
     };
+    layout: {
+        compact: {};
+        full: {
+            tabList: string;
+            tab: string;
+        };
+    };
 }, {
     base: string;
     tabList: string;

package/dist/esm/core/components/tabs/Tabs.variant.js

@@ -25,11 +25,19 @@ var t = e({
 				base: "",
 				scroller: ""
 			}
+		},
+		layout: {
+			compact: {},
+			full: {
+				tabList: "uy:w-full",
+				tab: "uy:flex-1 uy:min-w-0"
+			}
 		}
 	},
 	defaultVariants: {
 		variant: "primary",
-		scrollable: !1
+		scrollable: !1,
+		layout: "compact"
 	}
 });
 //#endregion

package/dist/esm/core/components/tabs/parts/RawTab.js

@@ -5,15 +5,16 @@ import { jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Tab as a } from "react-aria-components/Tabs";
 //#region src/core/components/tabs/parts/RawTab.tsx
 var o = n(({ children: n, suffix: o, id: s, ...c }, l) => {
-	let { variant: u, scrollable: d } = e(), { tab: f } = t({
+	let { variant: u, scrollable: d, layout: f } = e(), { tab: p } = t({
 		variant: u,
-		scrollable: d
+		scrollable: d,
+		layout: f
 	});
 	return /* @__PURE__ */ i(a, {
 		...c,
 		ref: l,
 		id: s,
-		className: f(),
+		className: p(),
 		children: [n, o ? /* @__PURE__ */ r("span", { children: o }) : null]
 	});
 });

package/dist/esm/core/components/tabs/parts/TabList.js

@@ -7,21 +7,22 @@ import { useResizeObserver as l } from "usehooks-ts";
 import { TabList as u } from "react-aria-components/Tabs";
 //#region src/core/components/tabs/parts/TabList.tsx
 var d = r(function({ children: r, ...d }, f) {
-	let p = a(null), [m, h] = o(!1), [g, _] = o(!1), { variant: v, scrollable: y } = e(), { tabList: b, scroller: x } = t({
+	let p = a(null), [m, h] = o(!1), [g, _] = o(!1), { variant: v, scrollable: y, layout: b } = e(), { tabList: x, scroller: S } = t({
 		variant: v,
-		scrollable: y
-	}), S = i(() => {
+		scrollable: y,
+		layout: b
+	}), C = i(() => {
 		if (!p.current) return;
 		let { scrollLeft: e, scrollWidth: t, clientWidth: n } = p.current;
 		h(e > 0), _(e + n < t);
 	}, []);
 	l({
 		ref: p,
-		onResize: S
+		onResize: C
 	});
-	let C = () => {
-		S();
-	}, w = () => {
+	let w = () => {
+		C();
+	}, T = () => {
 		let e = p.current?.querySelectorAll("[role=tab]");
 		if (!p.current || !e) return 0;
 		let { scrollLeft: t } = p.current, n = Array.from(e);
@@ -30,7 +31,7 @@ var d = r(function({ children: r, ...d }, f) {
 			if (r.offsetLeft < t) return -r.offsetWidth;
 		}
 		return 0;
-	}, T = () => {
+	}, E = () => {
 		let e = p.current?.querySelectorAll("[role=tab]");
 		if (!p.current || !e) return 0;
 		let { scrollLeft: t, clientWidth: n } = p.current, r = Array.from(e), i = t + n;
@@ -39,7 +40,12 @@ var d = r(function({ children: r, ...d }, f) {
 			if (n > i || n < i) return t.offsetWidth;
 		}
 		return 0;
-	};
+	}, D = /* @__PURE__ */ s(u, {
+		...d,
+		ref: f,
+		className: x(),
+		children: r
+	});
 	return y ? /* @__PURE__ */ c("div", {
 		className: "uy:relative",
 		children: [
@@ -48,38 +54,28 @@ var d = r(function({ children: r, ...d }, f) {
 				onPress: () => {
 					p.current?.scrollBy({
 						behavior: "smooth",
-						left: w()
+						left: T()
 					});
 				}
 			}),
 			/* @__PURE__ */ s("div", {
 				ref: p,
 				"data-testid": "scrollable-tab-list",
-				className: x(),
-				onScroll: C,
-				children: /* @__PURE__ */ s(u, {
-					...d,
-					ref: f,
-					className: b(),
-					children: r
-				})
+				className: S(),
+				onScroll: w,
+				children: D
 			}),
 			g && /* @__PURE__ */ s(n, {
 				direction: "right",
 				onPress: () => {
 					p.current?.scrollBy({
 						behavior: "smooth",
-						left: T()
+						left: E()
 					});
 				}
 			})
 		]
-	}) : /* @__PURE__ */ s(u, {
-		...d,
-		ref: f,
-		className: b(),
-		children: r
-	});
+	}) : D;
 });
 d.displayName = "TabList";
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "3.4.8",
+  "version": "3.4.10",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -103,7 +103,7 @@
     "@formatjs/intl": "4.1.12",
     "@internationalized/date": "3.12.4",
     "minimatch": "10.2.5",
-    "@payfit/unity-illustrations": "3.4.8",
+    "@payfit/unity-illustrations": "3.4.10",
     "@radix-ui/react-avatar": "1.2.6",
     "@radix-ui/react-slot": "1.3.3",
     "@react-aria/interactions": "3.28.1",
@@ -132,8 +132,8 @@
     "zod": "4.6.5"
   },
   "peerDependencies": {
-    "@payfit/unity-icons": "3.4.8",
-    "@payfit/unity-themes": "3.4.8",
+    "@payfit/unity-icons": "3.4.10",
+    "@payfit/unity-themes": "3.4.10",
     "@storybook/react-vite": "^10",
     "@tanstack/react-query": "^5",
     "@tanstack/form-core": "1.33.5",
@@ -156,9 +156,9 @@
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-addon-datadog-rum": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "3.4.8",
-    "@payfit/unity-illustrations": "3.4.8",
-    "@payfit/unity-themes": "3.4.8",
+    "@payfit/unity-icons": "3.4.10",
+    "@payfit/unity-illustrations": "3.4.10",
+    "@payfit/unity-themes": "3.4.10",
     "@payfit/vite-configs": "0.0.0-use.local",
     "@storybook/addon-a11y": "10.6.0",
     "@storybook/addon-designs": "11.1.4",