@yahoo/uds-mobile 2.9.0 → 2.10.0

package/dist/components/Tabs/tabTheme.js

@@ -0,0 +1,28 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+//#region src/components/Tabs/tabTheme.ts
+function tabComponentPath(visual, active, layer, state) {
+	return `tab/variant/${visual}/active/${active}/${layer === "rootText" ? "rootText" : layer}/${state}`;
+}
+/** Default tab dimensions / spacing from tokens (`tab/size/default/...`). */
+function getTabSizeLayerStyle(theme, layer) {
+	const path = `tab/size/default/${layer}/rest`;
+	const s = theme.components[path];
+	return s && typeof s === "object" ? s : {};
+}
+/** Variant + interaction layer (active on/off, pressed/rest). */
+function getTabLayerStyle(theme, visual, active, layer, state) {
+	const path = tabComponentPath(visual, active, layer, state);
+	const s = theme.components[path];
+	return s && typeof s === "object" ? s : {};
+}
+/** Size tokens + variant state (matches web stacking size + variant classes). */
+function getMergedTabLayerStyle(theme, visual, active, layer, state) {
+	return {
+		...getTabSizeLayerStyle(theme, layer === "rootText" ? "rootText" : layer === "icon" ? "icon" : "root"),
+		...getTabLayerStyle(theme, visual, active, layer, state)
+	};
+}
+//#endregion
+export { getMergedTabLayerStyle, getTabLayerStyle, getTabSizeLayerStyle };
+
+//# sourceMappingURL=tabTheme.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabTheme.js","names":[],"sources":["../../../src/components/Tabs/tabTheme.ts"],"sourcesContent":["import type { UniversalTabsVariant } from '@yahoo/uds-types';\nimport type { TextStyle, ViewStyle } from 'react-native';\n\ntype TabActiveState = 'on' | 'off';\ntype TabLayer = 'root' | 'rootText' | 'icon';\ntype InteractionState = 'rest' | 'pressed';\n\nfunction tabComponentPath(\n  visual: UniversalTabsVariant,\n  active: TabActiveState,\n  layer: TabLayer,\n  state: InteractionState,\n): string {\n  const layerKey = layer === 'rootText' ? 'rootText' : layer;\n  return `tab/variant/${visual}/active/${active}/${layerKey}/${state}`;\n}\n\n/** Default tab dimensions / spacing from tokens (`tab/size/default/...`). */\nexport function getTabSizeLayerStyle(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  theme: { components: Record<string, any> },\n  layer: 'root' | 'rootText' | 'icon',\n): ViewStyle | TextStyle {\n  const path = `tab/size/default/${layer}/rest`;\n  const s = theme.components[path];\n  return s && typeof s === 'object' ? s : {};\n}\n\n/** Variant + interaction layer (active on/off, pressed/rest). */\nexport function getTabLayerStyle(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  theme: { components: Record<string, any> },\n  visual: UniversalTabsVariant,\n  active: TabActiveState,\n  layer: TabLayer,\n  state: InteractionState,\n): ViewStyle | TextStyle {\n  const path = tabComponentPath(visual, active, layer, state);\n  const s = theme.components[path];\n  return s && typeof s === 'object' ? s : {};\n}\n\n/** Size tokens + variant state (matches web stacking size + variant classes). */\nexport function getMergedTabLayerStyle(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  theme: { components: Record<string, any> },\n  visual: UniversalTabsVariant,\n  active: TabActiveState,\n  layer: TabLayer,\n  state: InteractionState,\n): ViewStyle | TextStyle {\n  const sizeKey = layer === 'rootText' ? 'rootText' : layer === 'icon' ? 'icon' : 'root';\n  return {\n    ...(getTabSizeLayerStyle(theme, sizeKey) as object),\n    ...(getTabLayerStyle(theme, visual, active, layer, state) as object),\n  } as ViewStyle;\n}\n"],"mappings":";;AAOA,SAAS,iBACP,QACA,QACA,OACA,OACQ;AAER,QAAO,eAAe,OAAO,UAAU,OAAO,GAD7B,UAAU,aAAa,aAAa,MACK,GAAG;;;AAI/D,SAAgB,qBAEd,OACA,OACuB;CACvB,MAAM,OAAO,oBAAoB,MAAM;CACvC,MAAM,IAAI,MAAM,WAAW;AAC3B,QAAO,KAAK,OAAO,MAAM,WAAW,IAAI,EAAE;;;AAI5C,SAAgB,iBAEd,OACA,QACA,QACA,OACA,OACuB;CACvB,MAAM,OAAO,iBAAiB,QAAQ,QAAQ,OAAO,MAAM;CAC3D,MAAM,IAAI,MAAM,WAAW;AAC3B,QAAO,KAAK,OAAO,MAAM,WAAW,IAAI,EAAE;;;AAI5C,SAAgB,uBAEd,OACA,QACA,QACA,OACA,OACuB;AAEvB,QAAO;EACL,GAAI,qBAAqB,OAFX,UAAU,aAAa,aAAa,UAAU,SAAS,SAAS,OAEtC;EACxC,GAAI,iBAAiB,OAAO,QAAQ,QAAQ,OAAO,MAAM;EAC1D"}

package/dist/components/Tabs/tabsContexts.cjs

@@ -0,0 +1,91 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../../_virtual/_rolldown/runtime.cjs");
+let react = require("react");
+//#region src/components/Tabs/tabsContexts.tsx
+const TabsVisualContext = (0, react.createContext)({
+	variant: "primary",
+	reduceMotion: false
+});
+function useTabsVisualContext() {
+	return (0, react.useContext)(TabsVisualContext);
+}
+const TabSelectionContext = (0, react.createContext)(null);
+function useTabSelectionContext() {
+	const ctx = (0, react.useContext)(TabSelectionContext);
+	if (!ctx) throw new Error("Tab components must be used within <Tabs>");
+	return ctx;
+}
+function useTabSelectionState({ defaultSelectedId, selectedId: selectedIdProp, onSelectionChange }) {
+	const isControlled = selectedIdProp !== void 0;
+	const [internalSelectedId, setInternalSelectedId] = (0, react.useState)(defaultSelectedId ?? null);
+	const [registeredIds, setRegisteredIds] = (0, react.useState)([]);
+	const [tabLayouts, setTabLayouts] = (0, react.useState)(() => /* @__PURE__ */ new Map());
+	const selectedId = isControlled ? selectedIdProp : internalSelectedId;
+	const setSelectedId = (0, react.useCallback)((id) => {
+		if (!isControlled) setInternalSelectedId(id);
+		onSelectionChange?.(id);
+	}, [isControlled, onSelectionChange]);
+	const registerTab = (0, react.useCallback)((id) => {
+		setRegisteredIds((prev) => prev.includes(id) ? prev : [...prev, id]);
+	}, []);
+	const unregisterTab = (0, react.useCallback)((id) => {
+		setRegisteredIds((prev) => prev.filter((x) => x !== id));
+		setTabLayouts((prev) => {
+			const next = new Map(prev);
+			next.delete(id);
+			return next;
+		});
+	}, []);
+	const setTabLayout = (0, react.useCallback)((id, layout) => {
+		setTabLayouts((prev) => {
+			const cur = prev.get(id);
+			if (cur && cur.x === layout.x && cur.y === layout.y && cur.width === layout.width && cur.height === layout.height) return prev;
+			const next = new Map(prev);
+			next.set(id, layout);
+			return next;
+		});
+	}, []);
+	const clearTabLayout = (0, react.useCallback)((id) => {
+		setTabLayouts((prev) => {
+			if (!prev.has(id)) return prev;
+			const next = new Map(prev);
+			next.delete(id);
+			return next;
+		});
+	}, []);
+	(0, react.useEffect)(() => {
+		if (isControlled || defaultSelectedId !== void 0) return;
+		if (internalSelectedId !== null) return;
+		if (registeredIds.length === 0) return;
+		setInternalSelectedId(registeredIds[0]);
+	}, [
+		isControlled,
+		defaultSelectedId,
+		internalSelectedId,
+		registeredIds
+	]);
+	return (0, react.useMemo)(() => ({
+		selectedId,
+		setSelectedId,
+		registerTab,
+		unregisterTab,
+		tabLayouts,
+		setTabLayout,
+		clearTabLayout
+	}), [
+		selectedId,
+		setSelectedId,
+		registerTab,
+		unregisterTab,
+		tabLayouts,
+		setTabLayout,
+		clearTabLayout
+	]);
+}
+//#endregion
+exports.TabSelectionContext = TabSelectionContext;
+exports.TabsVisualContext = TabsVisualContext;
+exports.useTabSelectionContext = useTabSelectionContext;
+exports.useTabSelectionState = useTabSelectionState;
+exports.useTabsVisualContext = useTabsVisualContext;

package/dist/components/Tabs/tabsContexts.d.cts

@@ -0,0 +1,35 @@
+
+import { UniversalTabsVariant } from "../../types/dist/index.cjs";
+import * as _$react from "react";
+import { LayoutRectangle } from "react-native";
+
+//#region src/components/Tabs/tabsContexts.d.ts
+interface TabsVisualContextValue {
+  variant: UniversalTabsVariant;
+  reduceMotion: boolean;
+}
+declare const TabsVisualContext: _$react.Context<TabsVisualContextValue>;
+declare function useTabsVisualContext(): TabsVisualContextValue;
+interface TabSelectionContextValue {
+  selectedId: string | null | undefined;
+  setSelectedId: (id: string) => void;
+  registerTab: (id: string) => void;
+  unregisterTab: (id: string) => void;
+  tabLayouts: ReadonlyMap<string, LayoutRectangle>;
+  setTabLayout: (id: string, layout: LayoutRectangle) => void;
+  clearTabLayout: (id: string) => void;
+}
+declare const TabSelectionContext: _$react.Context<TabSelectionContextValue | null>;
+declare function useTabSelectionContext(): TabSelectionContextValue;
+declare function useTabSelectionState({
+  defaultSelectedId,
+  selectedId: selectedIdProp,
+  onSelectionChange
+}: {
+  defaultSelectedId?: string;
+  selectedId?: string | null;
+  onSelectionChange?: (selectedId: string | null | undefined) => void;
+}): TabSelectionContextValue;
+//#endregion
+export { TabSelectionContext, TabSelectionContextValue, TabsVisualContext, TabsVisualContextValue, useTabSelectionContext, useTabSelectionState, useTabsVisualContext };
+//# sourceMappingURL=tabsContexts.d.cts.map

package/dist/components/Tabs/tabsContexts.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabsContexts.d.cts","names":[],"sources":["../../../src/components/Tabs/tabsContexts.tsx"],"mappings":";;;;;;UAIiB,sBAAA;EACf,OAAA,EAAS,oBAAA;EACT,YAAA;AAAA;AAAA,cAGW,iBAAA,EAAiB,OAAA,CAAA,OAAA,CAAA,sBAAA;AAAA,iBAKd,oBAAA,CAAA,GAAwB,sBAAA;AAAA,UAIvB,wBAAA;EACf,UAAA;EACA,aAAA,GAAgB,EAAA;EAChB,WAAA,GAAc,EAAA;EACd,aAAA,GAAgB,EAAA;EAChB,UAAA,EAAY,WAAA,SAAoB,eAAA;EAChC,YAAA,GAAe,EAAA,UAAY,MAAA,EAAQ,eAAA;EACnC,cAAA,GAAiB,EAAA;AAAA;AAAA,cAGN,mBAAA,EAAmB,OAAA,CAAA,OAAA,CAAA,wBAAA;AAAA,iBAEhB,sBAAA,CAAA,GAA0B,wBAAA;AAAA,iBAQ1B,oBAAA,CAAA;EACd,iBAAA;EACA,UAAA,EAAY,cAAA;EACZ;AAAA;EAEA,iBAAA;EACA,UAAA;EACA,iBAAA,IAAqB,UAAA;AAAA,IACnB,wBAAA"}

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

@@ -0,0 +1,35 @@
+
+import { UniversalTabsVariant } from "../../types/dist/index.js";
+import * as _$react from "react";
+import { LayoutRectangle } from "react-native";
+
+//#region src/components/Tabs/tabsContexts.d.ts
+interface TabsVisualContextValue {
+  variant: UniversalTabsVariant;
+  reduceMotion: boolean;
+}
+declare const TabsVisualContext: _$react.Context<TabsVisualContextValue>;
+declare function useTabsVisualContext(): TabsVisualContextValue;
+interface TabSelectionContextValue {
+  selectedId: string | null | undefined;
+  setSelectedId: (id: string) => void;
+  registerTab: (id: string) => void;
+  unregisterTab: (id: string) => void;
+  tabLayouts: ReadonlyMap<string, LayoutRectangle>;
+  setTabLayout: (id: string, layout: LayoutRectangle) => void;
+  clearTabLayout: (id: string) => void;
+}
+declare const TabSelectionContext: _$react.Context<TabSelectionContextValue | null>;
+declare function useTabSelectionContext(): TabSelectionContextValue;
+declare function useTabSelectionState({
+  defaultSelectedId,
+  selectedId: selectedIdProp,
+  onSelectionChange
+}: {
+  defaultSelectedId?: string;
+  selectedId?: string | null;
+  onSelectionChange?: (selectedId: string | null | undefined) => void;
+}): TabSelectionContextValue;
+//#endregion
+export { TabSelectionContext, TabSelectionContextValue, TabsVisualContext, TabsVisualContextValue, useTabSelectionContext, useTabSelectionState, useTabsVisualContext };
+//# sourceMappingURL=tabsContexts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabsContexts.d.ts","names":[],"sources":["../../../src/components/Tabs/tabsContexts.tsx"],"mappings":";;;;;;UAIiB,sBAAA;EACf,OAAA,EAAS,oBAAA;EACT,YAAA;AAAA;AAAA,cAGW,iBAAA,EAAiB,OAAA,CAAA,OAAA,CAAA,sBAAA;AAAA,iBAKd,oBAAA,CAAA,GAAwB,sBAAA;AAAA,UAIvB,wBAAA;EACf,UAAA;EACA,aAAA,GAAgB,EAAA;EAChB,WAAA,GAAc,EAAA;EACd,aAAA,GAAgB,EAAA;EAChB,UAAA,EAAY,WAAA,SAAoB,eAAA;EAChC,YAAA,GAAe,EAAA,UAAY,MAAA,EAAQ,eAAA;EACnC,cAAA,GAAiB,EAAA;AAAA;AAAA,cAGN,mBAAA,EAAmB,OAAA,CAAA,OAAA,CAAA,wBAAA;AAAA,iBAEhB,sBAAA,CAAA,GAA0B,wBAAA;AAAA,iBAQ1B,oBAAA,CAAA;EACd,iBAAA;EACA,UAAA,EAAY,cAAA;EACZ;AAAA;EAEA,iBAAA;EACA,UAAA;EACA,iBAAA,IAAqB,UAAA;AAAA,IACnB,wBAAA"}

package/dist/components/Tabs/tabsContexts.js

@@ -0,0 +1,87 @@
+/*! © 2026 Yahoo, Inc. UDS Mobile v0.0.0-development */
+import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+//#region src/components/Tabs/tabsContexts.tsx
+const TabsVisualContext = createContext({
+	variant: "primary",
+	reduceMotion: false
+});
+function useTabsVisualContext() {
+	return useContext(TabsVisualContext);
+}
+const TabSelectionContext = createContext(null);
+function useTabSelectionContext() {
+	const ctx = useContext(TabSelectionContext);
+	if (!ctx) throw new Error("Tab components must be used within <Tabs>");
+	return ctx;
+}
+function useTabSelectionState({ defaultSelectedId, selectedId: selectedIdProp, onSelectionChange }) {
+	const isControlled = selectedIdProp !== void 0;
+	const [internalSelectedId, setInternalSelectedId] = useState(defaultSelectedId ?? null);
+	const [registeredIds, setRegisteredIds] = useState([]);
+	const [tabLayouts, setTabLayouts] = useState(() => /* @__PURE__ */ new Map());
+	const selectedId = isControlled ? selectedIdProp : internalSelectedId;
+	const setSelectedId = useCallback((id) => {
+		if (!isControlled) setInternalSelectedId(id);
+		onSelectionChange?.(id);
+	}, [isControlled, onSelectionChange]);
+	const registerTab = useCallback((id) => {
+		setRegisteredIds((prev) => prev.includes(id) ? prev : [...prev, id]);
+	}, []);
+	const unregisterTab = useCallback((id) => {
+		setRegisteredIds((prev) => prev.filter((x) => x !== id));
+		setTabLayouts((prev) => {
+			const next = new Map(prev);
+			next.delete(id);
+			return next;
+		});
+	}, []);
+	const setTabLayout = useCallback((id, layout) => {
+		setTabLayouts((prev) => {
+			const cur = prev.get(id);
+			if (cur && cur.x === layout.x && cur.y === layout.y && cur.width === layout.width && cur.height === layout.height) return prev;
+			const next = new Map(prev);
+			next.set(id, layout);
+			return next;
+		});
+	}, []);
+	const clearTabLayout = useCallback((id) => {
+		setTabLayouts((prev) => {
+			if (!prev.has(id)) return prev;
+			const next = new Map(prev);
+			next.delete(id);
+			return next;
+		});
+	}, []);
+	useEffect(() => {
+		if (isControlled || defaultSelectedId !== void 0) return;
+		if (internalSelectedId !== null) return;
+		if (registeredIds.length === 0) return;
+		setInternalSelectedId(registeredIds[0]);
+	}, [
+		isControlled,
+		defaultSelectedId,
+		internalSelectedId,
+		registeredIds
+	]);
+	return useMemo(() => ({
+		selectedId,
+		setSelectedId,
+		registerTab,
+		unregisterTab,
+		tabLayouts,
+		setTabLayout,
+		clearTabLayout
+	}), [
+		selectedId,
+		setSelectedId,
+		registerTab,
+		unregisterTab,
+		tabLayouts,
+		setTabLayout,
+		clearTabLayout
+	]);
+}
+//#endregion
+export { TabSelectionContext, TabsVisualContext, useTabSelectionContext, useTabSelectionState, useTabsVisualContext };
+
+//# sourceMappingURL=tabsContexts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabsContexts.js","names":[],"sources":["../../../src/components/Tabs/tabsContexts.tsx"],"sourcesContent":["import type { UniversalTabsVariant } from '@yahoo/uds-types';\nimport { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';\nimport type { LayoutRectangle } from 'react-native';\n\nexport interface TabsVisualContextValue {\n  variant: UniversalTabsVariant;\n  reduceMotion: boolean;\n}\n\nexport const TabsVisualContext = createContext<TabsVisualContextValue>({\n  variant: 'primary',\n  reduceMotion: false,\n});\n\nexport function useTabsVisualContext(): TabsVisualContextValue {\n  return useContext(TabsVisualContext);\n}\n\nexport interface TabSelectionContextValue {\n  selectedId: string | null | undefined;\n  setSelectedId: (id: string) => void;\n  registerTab: (id: string) => void;\n  unregisterTab: (id: string) => void;\n  tabLayouts: ReadonlyMap<string, LayoutRectangle>;\n  setTabLayout: (id: string, layout: LayoutRectangle) => void;\n  clearTabLayout: (id: string) => void;\n}\n\nexport const TabSelectionContext = createContext<TabSelectionContextValue | null>(null);\n\nexport function useTabSelectionContext(): TabSelectionContextValue {\n  const ctx = useContext(TabSelectionContext);\n  if (!ctx) {\n    throw new Error('Tab components must be used within <Tabs>');\n  }\n  return ctx;\n}\n\nexport function useTabSelectionState({\n  defaultSelectedId,\n  selectedId: selectedIdProp,\n  onSelectionChange,\n}: {\n  defaultSelectedId?: string;\n  selectedId?: string | null;\n  onSelectionChange?: (selectedId: string | null | undefined) => void;\n}): TabSelectionContextValue {\n  const isControlled = selectedIdProp !== undefined;\n  const [internalSelectedId, setInternalSelectedId] = useState<string | null>(\n    defaultSelectedId ?? null,\n  );\n  const [registeredIds, setRegisteredIds] = useState<string[]>([]);\n  const [tabLayouts, setTabLayouts] = useState<Map<string, LayoutRectangle>>(() => new Map());\n\n  const selectedId = isControlled ? selectedIdProp : internalSelectedId;\n\n  const setSelectedId = useCallback(\n    (id: string) => {\n      if (!isControlled) {\n        setInternalSelectedId(id);\n      }\n      onSelectionChange?.(id);\n    },\n    [isControlled, onSelectionChange],\n  );\n\n  const registerTab = useCallback((id: string) => {\n    setRegisteredIds((prev) => (prev.includes(id) ? prev : [...prev, id]));\n  }, []);\n\n  const unregisterTab = useCallback((id: string) => {\n    setRegisteredIds((prev) => prev.filter((x) => x !== id));\n    setTabLayouts((prev) => {\n      const next = new Map(prev);\n      next.delete(id);\n      return next;\n    });\n  }, []);\n\n  const setTabLayout = useCallback((id: string, layout: LayoutRectangle) => {\n    setTabLayouts((prev) => {\n      const cur = prev.get(id);\n      if (\n        cur &&\n        cur.x === layout.x &&\n        cur.y === layout.y &&\n        cur.width === layout.width &&\n        cur.height === layout.height\n      ) {\n        return prev;\n      }\n      const next = new Map(prev);\n      next.set(id, layout);\n      return next;\n    });\n  }, []);\n\n  const clearTabLayout = useCallback((id: string) => {\n    setTabLayouts((prev) => {\n      if (!prev.has(id)) {\n        return prev;\n      }\n      const next = new Map(prev);\n      next.delete(id);\n      return next;\n    });\n  }, []);\n\n  useEffect(() => {\n    if (isControlled || defaultSelectedId !== undefined) {\n      return;\n    }\n    if (internalSelectedId !== null) {\n      return;\n    }\n    if (registeredIds.length === 0) {\n      return;\n    }\n    setInternalSelectedId(registeredIds[0]!);\n  }, [isControlled, defaultSelectedId, internalSelectedId, registeredIds]);\n\n  return useMemo(\n    () => ({\n      selectedId,\n      setSelectedId,\n      registerTab,\n      unregisterTab,\n      tabLayouts,\n      setTabLayout,\n      clearTabLayout,\n    }),\n    [\n      selectedId,\n      setSelectedId,\n      registerTab,\n      unregisterTab,\n      tabLayouts,\n      setTabLayout,\n      clearTabLayout,\n    ],\n  );\n}\n"],"mappings":";;;AASA,MAAa,oBAAoB,cAAsC;CACrE,SAAS;CACT,cAAc;CACf,CAAC;AAEF,SAAgB,uBAA+C;AAC7D,QAAO,WAAW,kBAAkB;;AAatC,MAAa,sBAAsB,cAA+C,KAAK;AAEvF,SAAgB,yBAAmD;CACjE,MAAM,MAAM,WAAW,oBAAoB;AAC3C,KAAI,CAAC,IACH,OAAM,IAAI,MAAM,4CAA4C;AAE9D,QAAO;;AAGT,SAAgB,qBAAqB,EACnC,mBACA,YAAY,gBACZ,qBAK2B;CAC3B,MAAM,eAAe,mBAAmB,KAAA;CACxC,MAAM,CAAC,oBAAoB,yBAAyB,SAClD,qBAAqB,KACtB;CACD,MAAM,CAAC,eAAe,oBAAoB,SAAmB,EAAE,CAAC;CAChE,MAAM,CAAC,YAAY,iBAAiB,+BAA6C,IAAI,KAAK,CAAC;CAE3F,MAAM,aAAa,eAAe,iBAAiB;CAEnD,MAAM,gBAAgB,aACnB,OAAe;AACd,MAAI,CAAC,aACH,uBAAsB,GAAG;AAE3B,sBAAoB,GAAG;IAEzB,CAAC,cAAc,kBAAkB,CAClC;CAED,MAAM,cAAc,aAAa,OAAe;AAC9C,oBAAkB,SAAU,KAAK,SAAS,GAAG,GAAG,OAAO,CAAC,GAAG,MAAM,GAAG,CAAE;IACrE,EAAE,CAAC;CAEN,MAAM,gBAAgB,aAAa,OAAe;AAChD,oBAAkB,SAAS,KAAK,QAAQ,MAAM,MAAM,GAAG,CAAC;AACxD,iBAAe,SAAS;GACtB,MAAM,OAAO,IAAI,IAAI,KAAK;AAC1B,QAAK,OAAO,GAAG;AACf,UAAO;IACP;IACD,EAAE,CAAC;CAEN,MAAM,eAAe,aAAa,IAAY,WAA4B;AACxE,iBAAe,SAAS;GACtB,MAAM,MAAM,KAAK,IAAI,GAAG;AACxB,OACE,OACA,IAAI,MAAM,OAAO,KACjB,IAAI,MAAM,OAAO,KACjB,IAAI,UAAU,OAAO,SACrB,IAAI,WAAW,OAAO,OAEtB,QAAO;GAET,MAAM,OAAO,IAAI,IAAI,KAAK;AAC1B,QAAK,IAAI,IAAI,OAAO;AACpB,UAAO;IACP;IACD,EAAE,CAAC;CAEN,MAAM,iBAAiB,aAAa,OAAe;AACjD,iBAAe,SAAS;AACtB,OAAI,CAAC,KAAK,IAAI,GAAG,CACf,QAAO;GAET,MAAM,OAAO,IAAI,IAAI,KAAK;AAC1B,QAAK,OAAO,GAAG;AACf,UAAO;IACP;IACD,EAAE,CAAC;AAEN,iBAAgB;AACd,MAAI,gBAAgB,sBAAsB,KAAA,EACxC;AAEF,MAAI,uBAAuB,KACzB;AAEF,MAAI,cAAc,WAAW,EAC3B;AAEF,wBAAsB,cAAc,GAAI;IACvC;EAAC;EAAc;EAAmB;EAAoB;EAAc,CAAC;AAExE,QAAO,eACE;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF"}

package/dist/jest/mocks/styles.cjs

@@ -13,6 +13,7 @@ var styles_exports = /* @__PURE__ */ require("../../_virtual/_rolldown/runtime.c
 	radioStyles: () => radioStyles,
 	styles: () => styles,
 	switchStyles: () => switchStyles,
+	tabsStyles: () => tabsStyles,
 	textStyles: () => textStyles
 });
 /**
@@ -303,6 +304,11 @@ const iconButtonStyles = createComponentStyles({
 		color: "#000000"
 	}
 });
+const tabsStyles = createComponentStyles({ root: {
+	flexDirection: "row",
+	alignItems: "center",
+	gap: 8
+} });
 //#endregion
 exports.avatarStyles = avatarStyles;
 exports.badgeStyles = badgeStyles;
@@ -321,4 +327,5 @@ Object.defineProperty(exports, "styles_exports", {
 	}
 });
 exports.switchStyles = switchStyles;
+exports.tabsStyles = tabsStyles;
 exports.textStyles = textStyles;

package/dist/jest/mocks/styles.d.cts

@@ -1,6 +1,6 @@
 
 declare namespace styles_d_exports {
-  export { StyleProps, avatarStyles, badgeStyles, buttonStyles, checkboxStyles, chipStyles, iconButtonStyles, inputStyles, linkStyles, radioStyles, styles, switchStyles, textStyles };
+  export { StyleProps, avatarStyles, badgeStyles, buttonStyles, checkboxStyles, chipStyles, iconButtonStyles, inputStyles, linkStyles, radioStyles, styles, switchStyles, tabsStyles, textStyles };
 }
 /**
  * Jest mock for generated/styles.
@@ -20,6 +20,7 @@ declare const chipStyles: Record<string, unknown>;
 declare const linkStyles: Record<string, unknown>;
 declare const radioStyles: Record<string, unknown>;
 declare const iconButtonStyles: Record<string, unknown>;
+declare const tabsStyles: Record<string, unknown>;
 interface StyleProps {
   color?: string;
   backgroundColor?: string;
@@ -29,5 +30,5 @@ interface StyleProps {
   [key: string]: unknown;
 }
 //#endregion
-export { StyleProps, avatarStyles, badgeStyles, buttonStyles, checkboxStyles, chipStyles, iconButtonStyles, inputStyles, linkStyles, radioStyles, styles, styles_d_exports, switchStyles, textStyles };
+export { StyleProps, avatarStyles, badgeStyles, buttonStyles, checkboxStyles, chipStyles, iconButtonStyles, inputStyles, linkStyles, radioStyles, styles, styles_d_exports, switchStyles, tabsStyles, textStyles };
 //# sourceMappingURL=styles.d.cts.map

package/dist/jest/mocks/styles.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.cts","names":[],"sources":["../../../src/jest/mocks/styles.ts"],"mappings":";;;;;;;;;;cAyGa,MAAA,EAAM,MAAA;AAAA,cAKN,YAAA,EAAY,MAAA;AAAA,cAgCZ,UAAA,EAAU,MAAA;AAAA,cAUV,WAAA,EAAW,MAAA;AAAA,cAuCX,cAAA,EAAc,MAAA;AAAA,cAwBd,YAAA,EAAY,MAAA;AAAA,cA4BZ,YAAA,EAAY,MAAA;AAAA,cAqBZ,WAAA,EAAW,MAAA;AAAA,cAmBX,UAAA,EAAU,MAAA;AAAA,cAsBV,UAAA,EAAU,MAAA;AAAA,cAgBV,WAAA,EAAW,MAAA;AAAA,cA8BX,gBAAA,EAAgB,MAAA;AAAA,UAeZ,UAAA;EACf,KAAA;EACA,eAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EAAA,CACC,GAAA;AAAA"}
+{"version":3,"file":"styles.d.cts","names":[],"sources":["../../../src/jest/mocks/styles.ts"],"mappings":";;;;;;;;;;cAyGa,MAAA,EAAM,MAAA;AAAA,cAKN,YAAA,EAAY,MAAA;AAAA,cAgCZ,UAAA,EAAU,MAAA;AAAA,cAUV,WAAA,EAAW,MAAA;AAAA,cAuCX,cAAA,EAAc,MAAA;AAAA,cAwBd,YAAA,EAAY,MAAA;AAAA,cA4BZ,YAAA,EAAY,MAAA;AAAA,cAqBZ,WAAA,EAAW,MAAA;AAAA,cAmBX,UAAA,EAAU,MAAA;AAAA,cAsBV,UAAA,EAAU,MAAA;AAAA,cAgBV,WAAA,EAAW,MAAA;AAAA,cA8BX,gBAAA,EAAgB,MAAA;AAAA,cAehB,UAAA,EAAU,MAAA;AAAA,UASN,UAAA;EACf,KAAA;EACA,eAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EAAA,CACC,GAAA;AAAA"}

package/dist/jest/mocks/styles.d.ts

@@ -1,6 +1,6 @@
 
 declare namespace styles_d_exports {
-  export { StyleProps, avatarStyles, badgeStyles, buttonStyles, checkboxStyles, chipStyles, iconButtonStyles, inputStyles, linkStyles, radioStyles, styles, switchStyles, textStyles };
+  export { StyleProps, avatarStyles, badgeStyles, buttonStyles, checkboxStyles, chipStyles, iconButtonStyles, inputStyles, linkStyles, radioStyles, styles, switchStyles, tabsStyles, textStyles };
 }
 /**
  * Jest mock for generated/styles.
@@ -20,6 +20,7 @@ declare const chipStyles: Record<string, unknown>;
 declare const linkStyles: Record<string, unknown>;
 declare const radioStyles: Record<string, unknown>;
 declare const iconButtonStyles: Record<string, unknown>;
+declare const tabsStyles: Record<string, unknown>;
 interface StyleProps {
   color?: string;
   backgroundColor?: string;
@@ -29,5 +30,5 @@ interface StyleProps {
   [key: string]: unknown;
 }
 //#endregion
-export { StyleProps, avatarStyles, badgeStyles, buttonStyles, checkboxStyles, chipStyles, iconButtonStyles, inputStyles, linkStyles, radioStyles, styles, styles_d_exports, switchStyles, textStyles };
+export { StyleProps, avatarStyles, badgeStyles, buttonStyles, checkboxStyles, chipStyles, iconButtonStyles, inputStyles, linkStyles, radioStyles, styles, styles_d_exports, switchStyles, tabsStyles, textStyles };
 //# sourceMappingURL=styles.d.ts.map

package/dist/jest/mocks/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","names":[],"sources":["../../../src/jest/mocks/styles.ts"],"mappings":";;;;;;;;;;cAyGa,MAAA,EAAM,MAAA;AAAA,cAKN,YAAA,EAAY,MAAA;AAAA,cAgCZ,UAAA,EAAU,MAAA;AAAA,cAUV,WAAA,EAAW,MAAA;AAAA,cAuCX,cAAA,EAAc,MAAA;AAAA,cAwBd,YAAA,EAAY,MAAA;AAAA,cA4BZ,YAAA,EAAY,MAAA;AAAA,cAqBZ,WAAA,EAAW,MAAA;AAAA,cAmBX,UAAA,EAAU,MAAA;AAAA,cAsBV,UAAA,EAAU,MAAA;AAAA,cAgBV,WAAA,EAAW,MAAA;AAAA,cA8BX,gBAAA,EAAgB,MAAA;AAAA,UAeZ,UAAA;EACf,KAAA;EACA,eAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EAAA,CACC,GAAA;AAAA"}
+{"version":3,"file":"styles.d.ts","names":[],"sources":["../../../src/jest/mocks/styles.ts"],"mappings":";;;;;;;;;;cAyGa,MAAA,EAAM,MAAA;AAAA,cAKN,YAAA,EAAY,MAAA;AAAA,cAgCZ,UAAA,EAAU,MAAA;AAAA,cAUV,WAAA,EAAW,MAAA;AAAA,cAuCX,cAAA,EAAc,MAAA;AAAA,cAwBd,YAAA,EAAY,MAAA;AAAA,cA4BZ,YAAA,EAAY,MAAA;AAAA,cAqBZ,WAAA,EAAW,MAAA;AAAA,cAmBX,UAAA,EAAU,MAAA;AAAA,cAsBV,UAAA,EAAU,MAAA;AAAA,cAgBV,WAAA,EAAW,MAAA;AAAA,cA8BX,gBAAA,EAAgB,MAAA;AAAA,cAehB,UAAA,EAAU,MAAA;AAAA,UASN,UAAA;EACf,KAAA;EACA,eAAA;EACA,WAAA;EACA,WAAA;EACA,YAAA;EAAA,CACC,GAAA;AAAA"}

package/dist/jest/mocks/styles.js

@@ -13,6 +13,7 @@ var styles_exports = /* @__PURE__ */ __exportAll({
 	radioStyles: () => radioStyles,
 	styles: () => styles,
 	switchStyles: () => switchStyles,
+	tabsStyles: () => tabsStyles,
 	textStyles: () => textStyles
 });
 /**
@@ -303,7 +304,12 @@ const iconButtonStyles = createComponentStyles({
 		color: "#000000"
 	}
 });
+const tabsStyles = createComponentStyles({ root: {
+	flexDirection: "row",
+	alignItems: "center",
+	gap: 8
+} });
 //#endregion
-export { avatarStyles, badgeStyles, buttonStyles, checkboxStyles, chipStyles, iconButtonStyles, inputStyles, linkStyles, radioStyles, styles, styles_exports, switchStyles, textStyles };
+export { avatarStyles, badgeStyles, buttonStyles, checkboxStyles, chipStyles, iconButtonStyles, inputStyles, linkStyles, radioStyles, styles, styles_exports, switchStyles, tabsStyles, textStyles };
 
 //# sourceMappingURL=styles.js.map

package/dist/jest/mocks/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":[],"sources":["../../../src/jest/mocks/styles.ts"],"sourcesContent":["/**\n * Jest mock for generated/styles.\n *\n * Provides proxy-based mocks for the generated style objects\n * (styles, buttonStyles, etc.) with useVariants as a no-op.\n */\n\n/// <reference types=\"jest\" />\n\n// Default style values for foundation\nconst defaultFoundation = {\n  // Layout\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'stretch',\n  justifyContent: 'flex-start',\n  // Spacing\n  padding: 0,\n  paddingHorizontal: 0,\n  paddingVertical: 0,\n  margin: 0,\n  gap: 0,\n  // Colors\n  backgroundColor: 'transparent',\n  color: '#000000',\n  borderColor: 'transparent',\n  // Border\n  borderWidth: 0,\n  borderRadius: 0,\n  // Typography\n  fontFamily: 'System',\n  fontSize: 14,\n  lineHeight: 20,\n  fontWeight: 'regular',\n  // Effects\n  opacity: 1,\n  boxShadow: '',\n};\n\n// Create a style object with useVariants attached\nfunction createStyleObject(baseStyles: Record<string, unknown> = {}) {\n  const proxy = new Proxy(\n    { ...defaultFoundation, ...baseStyles, useVariants: jest.fn() },\n    {\n      get(target, prop) {\n        if (prop === 'useVariants') {\n          return jest.fn();\n        }\n        if (prop in target) {\n          return target[prop as keyof typeof target];\n        }\n        // Return sensible defaults for unknown properties\n        if (typeof prop === 'string') {\n          if (prop.includes('color') || prop.includes('Color')) {\n            return '#000000';\n          }\n          if (prop.includes('width') || prop.includes('Width')) {\n            return 0;\n          }\n          if (prop.includes('radius') || prop.includes('Radius')) {\n            return 0;\n          }\n          if (prop.includes('size') || prop.includes('Size')) {\n            return 16;\n          }\n          if (prop.includes('spacing') || prop.includes('Spacing')) {\n            return 0;\n          }\n          if (prop.includes('gap') || prop.includes('Gap')) {\n            return 0;\n          }\n        }\n        return undefined;\n      },\n    },\n  );\n  return proxy;\n}\n\n// Create a component style object (like buttonStyles) with multiple style keys\nfunction createComponentStyles(styleKeys: Record<string, Record<string, unknown>>) {\n  const result: Record<string, unknown> = { useVariants: jest.fn() };\n\n  for (const [key, baseStyles] of Object.entries(styleKeys)) {\n    result[key] = createStyleObject(baseStyles);\n  }\n\n  return new Proxy(result, {\n    get(target, prop) {\n      if (prop === 'useVariants') {\n        return jest.fn();\n      }\n      if (prop in target) {\n        return target[prop as keyof typeof target];\n      }\n      // Return a default style object for any unknown key\n      if (typeof prop === 'string') {\n        return createStyleObject();\n      }\n      return undefined;\n    },\n  });\n}\n\n// Main styles export\nexport const styles = createComponentStyles({\n  foundation: defaultFoundation,\n});\n\n// Button styles\nexport const buttonStyles = createComponentStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: 8,\n    paddingHorizontal: 16,\n    paddingVertical: 10,\n    backgroundColor: '#6001D2',\n    borderRadius: 8,\n    borderWidth: 0,\n    borderColor: 'transparent',\n    opacity: 1,\n    boxShadow: '',\n  },\n  text: {\n    fontFamily: 'YahooProductSans-Medium',\n    fontSize: 14,\n    letterSpacing: 0,\n    lineHeight: 20,\n    color: '#FFFFFF',\n  },\n  icon: {\n    fontSize: 16,\n    iconSizeToken: 'sm',\n    lineHeight: 16,\n    color: '#FFFFFF',\n  },\n});\n\n// Text styles\nexport const textStyles = createComponentStyles({\n  root: {\n    fontFamily: 'YahooProductSans-Regular',\n    fontSize: 14,\n    lineHeight: 20,\n    color: '#000000',\n  },\n});\n\n// Input styles\nexport const inputStyles = createComponentStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 4,\n  },\n  label: {\n    fontFamily: 'YahooProductSans-Medium',\n    fontSize: 14,\n    lineHeight: 20,\n    color: '#000000',\n  },\n  inputContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingHorizontal: 12,\n    paddingVertical: 10,\n    backgroundColor: '#FFFFFF',\n    borderRadius: 8,\n    borderWidth: 1,\n    borderColor: '#E0E0E0',\n  },\n  input: {\n    flex: 1,\n    fontFamily: 'YahooProductSans-Regular',\n    fontSize: 16,\n    lineHeight: 24,\n    color: '#000000',\n  },\n  helperText: {\n    fontFamily: 'YahooProductSans-Regular',\n    fontSize: 12,\n    lineHeight: 16,\n    color: '#666666',\n  },\n});\n\n// Checkbox styles\nexport const checkboxStyles = createComponentStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 8,\n  },\n  box: {\n    width: 20,\n    height: 20,\n    borderRadius: 4,\n    borderWidth: 2,\n    borderColor: '#6001D2',\n    backgroundColor: 'transparent',\n  },\n  label: {\n    fontFamily: 'YahooProductSans-Regular',\n    fontSize: 14,\n    lineHeight: 20,\n    color: '#000000',\n  },\n});\n\n// Switch styles\nexport const switchStyles = createComponentStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 8,\n  },\n  track: {\n    width: 48,\n    height: 28,\n    borderRadius: 14,\n    backgroundColor: '#E0E0E0',\n  },\n  thumb: {\n    width: 24,\n    height: 24,\n    borderRadius: 12,\n    backgroundColor: '#FFFFFF',\n  },\n  label: {\n    fontFamily: 'YahooProductSans-Regular',\n    fontSize: 14,\n    lineHeight: 20,\n    color: '#000000',\n  },\n});\n\n// Avatar styles\nexport const avatarStyles = createComponentStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 9999,\n    backgroundColor: '#E0E0E0',\n    overflow: 'hidden',\n  },\n  image: {\n    width: '100%',\n    height: '100%',\n  },\n  initials: {\n    fontFamily: 'YahooProductSans-Medium',\n    fontSize: 14,\n    color: '#000000',\n  },\n});\n\n// Badge styles\nexport const badgeStyles = createComponentStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingHorizontal: 8,\n    paddingVertical: 2,\n    borderRadius: 4,\n    backgroundColor: '#E0E0E0',\n  },\n  text: {\n    fontFamily: 'YahooProductSans-Medium',\n    fontSize: 12,\n    lineHeight: 16,\n    color: '#000000',\n  },\n});\n\n// Chip styles\nexport const chipStyles = createComponentStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 4,\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n    borderRadius: 16,\n    backgroundColor: '#F5F5F5',\n    borderWidth: 1,\n    borderColor: '#E0E0E0',\n  },\n  text: {\n    fontFamily: 'YahooProductSans-Medium',\n    fontSize: 14,\n    lineHeight: 20,\n    color: '#000000',\n  },\n});\n\n// Link styles\nexport const linkStyles = createComponentStyles({\n  root: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 4,\n  },\n  text: {\n    fontFamily: 'YahooProductSans-Regular',\n    fontSize: 14,\n    lineHeight: 20,\n    color: '#6001D2',\n    textDecorationLine: 'underline',\n  },\n});\n\n// Radio styles\nexport const radioStyles = createComponentStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 8,\n  },\n  circle: {\n    width: 20,\n    height: 20,\n    borderRadius: 10,\n    borderWidth: 2,\n    borderColor: '#6001D2',\n    backgroundColor: 'transparent',\n  },\n  dot: {\n    width: 10,\n    height: 10,\n    borderRadius: 5,\n    backgroundColor: '#6001D2',\n  },\n  label: {\n    fontFamily: 'YahooProductSans-Regular',\n    fontSize: 14,\n    lineHeight: 20,\n    color: '#000000',\n  },\n});\n\n// IconButton styles\nexport const iconButtonStyles = createComponentStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 8,\n    backgroundColor: 'transparent',\n  },\n  icon: {\n    fontSize: 24,\n    color: '#000000',\n  },\n});\n\n// Type for StyleProps\nexport interface StyleProps {\n  color?: string;\n  backgroundColor?: string;\n  borderColor?: string;\n  borderWidth?: number;\n  borderRadius?: number;\n  [key: string]: unknown;\n}\n"],"mappings":"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"}
+{"version":3,"file":"styles.js","names":[],"sources":["../../../src/jest/mocks/styles.ts"],"sourcesContent":["/**\n * Jest mock for generated/styles.\n *\n * Provides proxy-based mocks for the generated style objects\n * (styles, buttonStyles, etc.) with useVariants as a no-op.\n */\n\n/// <reference types=\"jest\" />\n\n// Default style values for foundation\nconst defaultFoundation = {\n  // Layout\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'stretch',\n  justifyContent: 'flex-start',\n  // Spacing\n  padding: 0,\n  paddingHorizontal: 0,\n  paddingVertical: 0,\n  margin: 0,\n  gap: 0,\n  // Colors\n  backgroundColor: 'transparent',\n  color: '#000000',\n  borderColor: 'transparent',\n  // Border\n  borderWidth: 0,\n  borderRadius: 0,\n  // Typography\n  fontFamily: 'System',\n  fontSize: 14,\n  lineHeight: 20,\n  fontWeight: 'regular',\n  // Effects\n  opacity: 1,\n  boxShadow: '',\n};\n\n// Create a style object with useVariants attached\nfunction createStyleObject(baseStyles: Record<string, unknown> = {}) {\n  const proxy = new Proxy(\n    { ...defaultFoundation, ...baseStyles, useVariants: jest.fn() },\n    {\n      get(target, prop) {\n        if (prop === 'useVariants') {\n          return jest.fn();\n        }\n        if (prop in target) {\n          return target[prop as keyof typeof target];\n        }\n        // Return sensible defaults for unknown properties\n        if (typeof prop === 'string') {\n          if (prop.includes('color') || prop.includes('Color')) {\n            return '#000000';\n          }\n          if (prop.includes('width') || prop.includes('Width')) {\n            return 0;\n          }\n          if (prop.includes('radius') || prop.includes('Radius')) {\n            return 0;\n          }\n          if (prop.includes('size') || prop.includes('Size')) {\n            return 16;\n          }\n          if (prop.includes('spacing') || prop.includes('Spacing')) {\n            return 0;\n          }\n          if (prop.includes('gap') || prop.includes('Gap')) {\n            return 0;\n          }\n        }\n        return undefined;\n      },\n    },\n  );\n  return proxy;\n}\n\n// Create a component style object (like buttonStyles) with multiple style keys\nfunction createComponentStyles(styleKeys: Record<string, Record<string, unknown>>) {\n  const result: Record<string, unknown> = { useVariants: jest.fn() };\n\n  for (const [key, baseStyles] of Object.entries(styleKeys)) {\n    result[key] = createStyleObject(baseStyles);\n  }\n\n  return new Proxy(result, {\n    get(target, prop) {\n      if (prop === 'useVariants') {\n        return jest.fn();\n      }\n      if (prop in target) {\n        return target[prop as keyof typeof target];\n      }\n      // Return a default style object for any unknown key\n      if (typeof prop === 'string') {\n        return createStyleObject();\n      }\n      return undefined;\n    },\n  });\n}\n\n// Main styles export\nexport const styles = createComponentStyles({\n  foundation: defaultFoundation,\n});\n\n// Button styles\nexport const buttonStyles = createComponentStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: 8,\n    paddingHorizontal: 16,\n    paddingVertical: 10,\n    backgroundColor: '#6001D2',\n    borderRadius: 8,\n    borderWidth: 0,\n    borderColor: 'transparent',\n    opacity: 1,\n    boxShadow: '',\n  },\n  text: {\n    fontFamily: 'YahooProductSans-Medium',\n    fontSize: 14,\n    letterSpacing: 0,\n    lineHeight: 20,\n    color: '#FFFFFF',\n  },\n  icon: {\n    fontSize: 16,\n    iconSizeToken: 'sm',\n    lineHeight: 16,\n    color: '#FFFFFF',\n  },\n});\n\n// Text styles\nexport const textStyles = createComponentStyles({\n  root: {\n    fontFamily: 'YahooProductSans-Regular',\n    fontSize: 14,\n    lineHeight: 20,\n    color: '#000000',\n  },\n});\n\n// Input styles\nexport const inputStyles = createComponentStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: 4,\n  },\n  label: {\n    fontFamily: 'YahooProductSans-Medium',\n    fontSize: 14,\n    lineHeight: 20,\n    color: '#000000',\n  },\n  inputContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingHorizontal: 12,\n    paddingVertical: 10,\n    backgroundColor: '#FFFFFF',\n    borderRadius: 8,\n    borderWidth: 1,\n    borderColor: '#E0E0E0',\n  },\n  input: {\n    flex: 1,\n    fontFamily: 'YahooProductSans-Regular',\n    fontSize: 16,\n    lineHeight: 24,\n    color: '#000000',\n  },\n  helperText: {\n    fontFamily: 'YahooProductSans-Regular',\n    fontSize: 12,\n    lineHeight: 16,\n    color: '#666666',\n  },\n});\n\n// Checkbox styles\nexport const checkboxStyles = createComponentStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 8,\n  },\n  box: {\n    width: 20,\n    height: 20,\n    borderRadius: 4,\n    borderWidth: 2,\n    borderColor: '#6001D2',\n    backgroundColor: 'transparent',\n  },\n  label: {\n    fontFamily: 'YahooProductSans-Regular',\n    fontSize: 14,\n    lineHeight: 20,\n    color: '#000000',\n  },\n});\n\n// Switch styles\nexport const switchStyles = createComponentStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 8,\n  },\n  track: {\n    width: 48,\n    height: 28,\n    borderRadius: 14,\n    backgroundColor: '#E0E0E0',\n  },\n  thumb: {\n    width: 24,\n    height: 24,\n    borderRadius: 12,\n    backgroundColor: '#FFFFFF',\n  },\n  label: {\n    fontFamily: 'YahooProductSans-Regular',\n    fontSize: 14,\n    lineHeight: 20,\n    color: '#000000',\n  },\n});\n\n// Avatar styles\nexport const avatarStyles = createComponentStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 9999,\n    backgroundColor: '#E0E0E0',\n    overflow: 'hidden',\n  },\n  image: {\n    width: '100%',\n    height: '100%',\n  },\n  initials: {\n    fontFamily: 'YahooProductSans-Medium',\n    fontSize: 14,\n    color: '#000000',\n  },\n});\n\n// Badge styles\nexport const badgeStyles = createComponentStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingHorizontal: 8,\n    paddingVertical: 2,\n    borderRadius: 4,\n    backgroundColor: '#E0E0E0',\n  },\n  text: {\n    fontFamily: 'YahooProductSans-Medium',\n    fontSize: 12,\n    lineHeight: 16,\n    color: '#000000',\n  },\n});\n\n// Chip styles\nexport const chipStyles = createComponentStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 4,\n    paddingHorizontal: 12,\n    paddingVertical: 6,\n    borderRadius: 16,\n    backgroundColor: '#F5F5F5',\n    borderWidth: 1,\n    borderColor: '#E0E0E0',\n  },\n  text: {\n    fontFamily: 'YahooProductSans-Medium',\n    fontSize: 14,\n    lineHeight: 20,\n    color: '#000000',\n  },\n});\n\n// Link styles\nexport const linkStyles = createComponentStyles({\n  root: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 4,\n  },\n  text: {\n    fontFamily: 'YahooProductSans-Regular',\n    fontSize: 14,\n    lineHeight: 20,\n    color: '#6001D2',\n    textDecorationLine: 'underline',\n  },\n});\n\n// Radio styles\nexport const radioStyles = createComponentStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 8,\n  },\n  circle: {\n    width: 20,\n    height: 20,\n    borderRadius: 10,\n    borderWidth: 2,\n    borderColor: '#6001D2',\n    backgroundColor: 'transparent',\n  },\n  dot: {\n    width: 10,\n    height: 10,\n    borderRadius: 5,\n    backgroundColor: '#6001D2',\n  },\n  label: {\n    fontFamily: 'YahooProductSans-Regular',\n    fontSize: 14,\n    lineHeight: 20,\n    color: '#000000',\n  },\n});\n\n// IconButton styles\nexport const iconButtonStyles = createComponentStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    borderRadius: 8,\n    backgroundColor: 'transparent',\n  },\n  icon: {\n    fontSize: 24,\n    color: '#000000',\n  },\n});\n\n// Tabs (tab list chrome)\nexport const tabsStyles = createComponentStyles({\n  root: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 8,\n  },\n});\n\n// Type for StyleProps\nexport interface StyleProps {\n  color?: string;\n  backgroundColor?: string;\n  borderColor?: string;\n  borderWidth?: number;\n  borderRadius?: number;\n  [key: string]: unknown;\n}\n"],"mappings":"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"}

package/dist/types/dist/index.d.cts

@@ -311,6 +311,57 @@ interface UniversalBannerProps<IconSlotType = UniversalIconSlot> {
   /** Actions (Button, Link) or BannerContent + actions. */
   children?: ReactNode;
 }
+type UniversalTabsVariant = 'primary' | 'secondary';
+interface UniversalTabsProps {
+  /** The TabList and TabPanel elements. */
+  children: ReactNode;
+  /** Visual style variant for the tab list and indicators. @default 'primary' */
+  variant?: UniversalTabsVariant;
+  /**
+   * When true, the sliding selection indicator motion is reduced and selection chrome is
+   * applied per tab without sliding motion. When false (default), the underline / pill is a single
+   * layer that slides between tabs (240ms, same easing as the design reference). @default false
+   */
+  reduceMotion?: boolean;
+  /** The id of the tab selected by default (uncontrolled). */
+  defaultSelectedId?: string;
+  /** The controlled selected tab id. `null` represents no selected tab. */
+  selectedId?: string | null;
+  /** Callback when the selected tab changes. */
+  onSelectionChange?: (selectedId: string | null | undefined) => void;
+}
+interface UniversalTabListProps extends React.AriaAttributes {
+  /** Tab items rendered within the list. */
+  children: ReactNode;
+  /** Enables horizontal scrolling when tabs overflow. */
+  scrollable?: boolean;
+  /** Optional class name for custom styling. */
+  className?: string;
+}
+interface UniversalTabPanelProps {
+  /** The id of the associated tab. */
+  tabId: string;
+  /** Content shown when the associated tab is selected. */
+  children: ReactNode;
+  /** Optional class name for custom styling. */
+  className?: string;
+}
+interface UniversalTabProps {
+  /** Unique identifier for this tab, used to connect with a TabPanel. When omitted, one is auto-generated. */
+  value?: string;
+  /** Tab content, typically a text label. */
+  children: ReactNode;
+  /** Icon rendered before the label. */
+  startIcon?: UniversalIconSlot;
+  /** Icon rendered after the label. */
+  endIcon?: UniversalIconSlot;
+  /** Disables the tab. */
+  disabled?: boolean;
+  /** Merge props onto the immediate child element instead of rendering a wrapper. */
+  asChild?: boolean;
+  /** Optional class name for custom styling. */
+  className?: string;
+}
 //#endregion
-export { type BadgeSize, type BadgeVariant, type BannerVariant, type ButtonSize, type ButtonVariantFlat, type ChipSize, type ChipVariant, type ElevationLevel, type IconButtonSize, type IconSize, type IconVariant, type MotionConfig, type MotionVariantValues, type UniversalBannerProps, type UniversalCheckboxProps, type UniversalImageProps, type UniversalInputProps, type UniversalLinkProps, type UniversalRadioProps, type UniversalSwitchProps };
+export { type BadgeSize, type BadgeVariant, type BannerVariant, type ButtonSize, type ButtonVariantFlat, type ChipSize, type ChipVariant, type ElevationLevel, type IconButtonSize, type IconSize, type IconVariant, type MotionConfig, type MotionVariantValues, type UniversalBannerProps, type UniversalCheckboxProps, type UniversalImageProps, type UniversalInputProps, type UniversalLinkProps, type UniversalRadioProps, type UniversalSwitchProps, type UniversalTabListProps, type UniversalTabPanelProps, type UniversalTabProps, type UniversalTabsProps, type UniversalTabsVariant };
 //# sourceMappingURL=index.d.cts.map