@proyecto-viviana/ui 0.5.0 → 0.6.1

package/dist/_chunk/Tabs.jsx

@@ -0,0 +1,1023 @@
+import { t as mergeStyles } from "./runtime.jsx";
+import { useProviderProps, useTheme } from "../provider/index.jsx";
+import { a as mergeContextUnsafeStyle, i as mergeContextStyles, n as getSlottedContextProps, r as mergeContextRefs } from "./spectrum-context.jsx";
+import { centerBaseline } from "../icon/center-baseline.jsx";
+import { t as IconContext } from "./spectrum-icon.jsx";
+import { NotificationBadgeContext } from "../notificationbadge/index.jsx";
+import { c as TextContext } from "./text.jsx";
+import { o as menuItemCheckmark, p as menuItemLabel, r as menuItem, u as menuItemIcon } from "./s2-menu-styles.jsx";
+import { t as Checkmark } from "./Checkmark.jsx";
+import { t as Chevron } from "./Chevron.jsx";
+import { For, Show, createContext, createEffect, createMemo, createSignal, createUniqueId, mergeProps, onCleanup, splitProps, useContext } from "solid-js";
+import { createFocusRing, createTabPanel } from "@proyecto-viviana/solidaria";
+import { Collection, Popover, Select, SelectContext, SelectListBox, SelectOption, SelectTrigger, SelectValue, SelectionIndicator, Tab, TabList, TabPanels, Tabs, TabsStateContext } from "@proyecto-viviana/solidaria-components";
+//#region src/tabs/TabsPicker.tsx
+const tabsPickerRoot = " sc151";
+const tabsPickerButton = function anonymous(props) {
+	let rules = " ";
+	if (props.isFocusVisible) rules += " _Lf151";
+	else rules += " _Le151";
+	rules += " O8KaFke151";
+	rules += " Olc151";
+	rules += " _Mc151";
+	rules += " _Kd151";
+	rules += " zXcEWr151";
+	rules += " yXcEWr151";
+	rules += " BXcEWr151";
+	rules += " AXcEWr151";
+	if (props.size === "XL") rules += " Nl151";
+	else if (props.size === "L") rules += " Nj151";
+	else if (props.size === "S") rules += " Nf151";
+	else if (props.size === "XS") rules += " Ne151";
+	else rules += " Nk151";
+	if (props.isQuiet) rules += " _qd151";
+	else rules += " _qtb151";
+	if (props.size === "XL") rules += " -Anxdcc-Zt151";
+	else if (props.size === "L") rules += " -Anxdcc-ZStdtne151";
+	else if (props.size === "S") rules += " -Anxdcc-Zr151";
+	else rules += " -Anxdcc-Z3fn9H151";
+	rules += " __v6TNLWb151";
+	rules += " _Pc151";
+	rules += " uxe7h4151";
+	rules += " -_6BNtrc-c151";
+	rules += " vx151";
+	rules += " xb151";
+	rules += " _xa151";
+	rules += " _Fd151";
+	rules += " _FnuYUweb151";
+	if (props.isDisabled) rules += " pUvnvv151";
+	else if (props.isPressed) rules += " pMwyHo151";
+	else if (props.isFocusVisible) rules += " pMwyHo151";
+	else if (props.isHovered) rules += " pMwyHo151";
+	else rules += " pHKLAu151";
+	rules += " sd151";
+	rules += " _Wd151";
+	rules += " _je151";
+	rules += " oa151";
+	rules += " na151";
+	rules += " ka151";
+	rules += " ja151";
+	rules += " eb151";
+	rules += " Yd151";
+	rules += " Xb151";
+	rules += " _2b151";
+	rules += " qc151";
+	rules += " qsd151";
+	rules += " SMBFGYc151";
+	rules += " RfBFGYc151";
+	rules += " g9151";
+	rules += " Ln151";
+	rules += " __ca151";
+	if (props.density === "compact") rules += " Fx151";
+	else rules += " Fz151";
+	rules += " _oa151";
+	rules += " -S_-Sd151";
+	rules += " -R_-Rd151";
+	return rules;
+};
+const tabsPickerValue = " _ua151 _Nc151 Pc151 _Yb151 _7c151 sd151 eb151 Fb151";
+const tabsPickerValueText = function anonymous(props) {
+	let rules = " ";
+	if (props.labelBehavior === "hide") rules += " sk151";
+	else rules += " sb151";
+	rules += " _ub151";
+	rules += " _Nc151";
+	rules += " Pc151";
+	rules += " _Yb151";
+	rules += " _7c151";
+	return rules;
+};
+const tabsPickerChevron = " _va151 _Sd151 -_8sjo0b-t5ZbAob151";
+const tabsPickerMenu = function anonymous(props) {
+	let rules = " ";
+	rules += " _Le151";
+	rules += " se151";
+	rules += " Deb5jcb151";
+	rules += " _oa151";
+	rules += " Za151";
+	rules += " K40ub4c151";
+	rules += " _Na151";
+	rules += " Pa151";
+	rules += " Tt151";
+	rules += " Qt151";
+	rules += " St151";
+	rules += " Rt151";
+	rules += " uk151";
+	rules += " ucJ9TBTb151";
+	rules += " ud3Euai151";
+	rules += " uea151";
+	rules += " ugb151";
+	rules += " uhd151";
+	rules += " uje151";
+	rules += " u2NhKxcl151";
+	rules += " uic151";
+	if (props.size === "XL") {
+		rules += " -_6BNtrc-e151";
+		rules += " vx151";
+	} else if (props.size === "L") {
+		rules += " -_6BNtrc-d151";
+		rules += " vx151";
+	} else if (props.size === "S") {
+		rules += " -_6BNtrc-b151";
+		rules += " vx151";
+	} else if (props.size === "XS") {
+		rules += " -_6BNtrc-a151";
+		rules += " vx151";
+	} else {
+		rules += " -_6BNtrc-c151";
+		rules += " vx151";
+	}
+	rules += " Jy151";
+	rules += " Gy151";
+	rules += " Iy151";
+	rules += " Hy151";
+	rules += " _Gc151";
+	return rules;
+};
+const tabsPickerPopover = function anonymous(props) {
+	let rules = " ";
+	if (props.colorScheme === "dark") rules += " -ICUGx-_pa151";
+	else if (props.colorScheme === "light") rules += " -ICUGx-_pb151";
+	else if (props.colorScheme === "light dark") rules += " -ICUGx-_pc151";
+	rules += " _pK8eoyd151";
+	if (props.colorScheme === "dark") rules += " -NvXmrd-_ZLmU151";
+	else if (props.colorScheme === "light") rules += " -NvXmrd-_ZN8Gi4c151";
+	else if (props.colorScheme === "light dark") {
+		rules += " -NvXmrd-_ZN8Gi4c151";
+		rules += " -NvXmrd-D1v0V_ZLmU151";
+	}
+	if (props.colorScheme === "dark") rules += " -j9blY-_ZN8Gi4c151";
+	else if (props.colorScheme === "light") rules += " -j9blY-_ZLmU151";
+	else if (props.colorScheme === "light dark") {
+		rules += " -j9blY-_ZLmU151";
+		rules += " -j9blY-D1v0V_ZN8Gi4c151";
+	}
+	rules += " -Ovbhqd-g9ORGnd151";
+	rules += " -Ovbhqd-lga151";
+	rules += " gEzkoQe151";
+	rules += " -Jvcevd-Nbc1hc151";
+	rules += " _nfRoCnb151";
+	rules += " oY4qurc151";
+	rules += " nY4qurc151";
+	rules += " kY4qurc151";
+	rules += " jY4qurc151";
+	rules += " sd151";
+	rules += " Td151";
+	rules += " Qd151";
+	rules += " Sd151";
+	rules += " Rd151";
+	rules += " Ma151";
+	rules += " _Ne151";
+	rules += " Pe151";
+	rules += " _oa151";
+	rules += " _Bb151";
+	rules += " _Lf151";
+	rules += " _Mb151";
+	rules += " OLNnmzc151";
+	rules += " Ola151";
+	return rules;
+};
+const tabsPickerFrame = " sd151 Za151 Fb151";
+const tabsPickerLine = function anonymous(props) {
+	let rules = " ";
+	if (props.isDisabled) rules += " gkDWoNd151";
+	else rules += " gHKLAu151";
+	if (props.isDisabled) rules += " gld151";
+	else rules += " gle151";
+	rules += " FLvNfn151";
+	rules += " _je151";
+	rules += " og151";
+	rules += " ng151";
+	rules += " kg151";
+	rules += " jg151";
+	rules += " Jk7Otrc151";
+	rules += " Xa151";
+	rules += " _2b151";
+	return rules;
+};
+const tabsPickerIconCenterWrapper = function anonymous(props) {
+	let rules = " ";
+	rules += " sd151";
+	rules += " z2U5Crc151";
+	rules += " y2U5Crc151";
+	rules += " B2U5Crc151";
+	rules += " A2U5Crc151";
+	if (props.labelBehavior === "hide") rules += " S1DOfn151";
+	return rules;
+};
+function selectedText(item) {
+	return item?.textValue ?? "";
+}
+function TabsPickerPopover(props) {
+	const theme = useTheme();
+	const selectContext = useContext(SelectContext);
+	const triggerRef = () => selectContext?.triggerRef?.() ?? selectContext?.rootRef?.()?.querySelector("button[aria-haspopup='listbox']") ?? null;
+	const [triggerWidth, setTriggerWidth] = createSignal();
+	const updateTriggerWidth = () => {
+		const trigger = triggerRef();
+		setTriggerWidth(trigger ? `${trigger.getBoundingClientRect().width}px` : void 0);
+	};
+	createEffect(() => {
+		const trigger = triggerRef();
+		if (!trigger) {
+			setTriggerWidth(void 0);
+			return;
+		}
+		updateTriggerWidth();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(updateTriggerWidth);
+		observer.observe(trigger);
+		onCleanup(() => observer.disconnect());
+	});
+	const width = () => triggerWidth() ? `calc(${triggerWidth()} - 24px)` : void 0;
+	return <Popover trigger="Select" triggerRef={triggerRef} isOpen={selectContext?.isOpen?.() ?? false} onOpenChange={(open) => {
+		if (!open) selectContext?.state?.close?.();
+	}} placement="bottom start" offset={6} crossOffset={-12} shouldFlip autoFocus={false} class={(renderProps) => tabsPickerPopover({
+		...renderProps,
+		colorScheme: theme.colorScheme,
+		isArrowShown: false,
+		isSubmenu: false
+	})} style={() => ({
+		minWidth: "192px",
+		width: width()
+	})}>
+      <div class={tabsPickerFrame}>{props.children}</div>
+    </Popover>;
+}
+function TabsPickerOption(props) {
+	const [local, headlessProps] = splitProps(props, ["children"]);
+	const iconContextValue = {
+		slot: "icon",
+		render: centerBaseline({
+			slot: "icon",
+			styles: tabsPickerIconCenterWrapper({})
+		}),
+		styles: menuItemIcon
+	};
+	const textContextValue = {
+		styles: menuItemLabel({ size: "M" }),
+		"data-rsp-slot": "text"
+	};
+	const optionClass = (renderProps) => menuItem({
+		...renderProps,
+		size: "M",
+		isLink: false
+	});
+	return <SelectOption {...headlessProps} class={optionClass}>
+      {(renderProps) => <IconContext.Provider value={iconContextValue}>
+          <TextContext.Provider value={textContextValue}>
+            <Checkmark size="M" class={menuItemCheckmark({
+		isSelected: renderProps.isSelected,
+		isDisabled: renderProps.isDisabled
+	})} aria-hidden="true" />
+            <Show when={typeof local.children === "string" || typeof local.children === "number"} fallback={local.children}>
+              <span class={menuItemLabel({ size: "M" })} data-rsp-slot="text">
+                {local.children}
+              </span>
+            </Show>
+          </TextContext.Provider>
+        </IconContext.Provider>}
+    </SelectOption>;
+}
+function TabsPicker(props) {
+	const disabledKeys = createMemo(() => {
+		const result = new Set(props.disabledKeys ?? []);
+		for (const item of props.items) if (item.isDisabled) result.add(item.id);
+		return result;
+	});
+	const selectedItem = createMemo(() => props.items.find((item) => item.id === props.selectedKey));
+	const labelledBy = () => [props.labelBehavior === "hide" ? props.valueId : void 0, props["aria-labelledby"]].filter(Boolean).join(" ") || void 0;
+	return <div>
+      <Select id={props.id} items={props.items} getKey={(item) => item.id} getTextValue={(item) => item.textValue} getDisabled={(item) => item.isDisabled ?? false} disabledKeys={disabledKeys()} selectedKey={props.selectedKey ?? null} onSelectionChange={props.onSelectionChange} isDisabled={props.isDisabled} aria-label={props["aria-label"]} aria-labelledby={labelledBy()} aria-describedby={props["aria-describedby"]} aria-details={props["aria-details"]} class={tabsPickerRoot}>
+        {() => <>
+            <SelectTrigger class={(triggerProps) => tabsPickerButton({
+		...triggerProps,
+		density: props.density,
+		isOpen: triggerProps.isOpen
+	})}>
+              {(triggerProps) => <>
+                  <SelectValue class={tabsPickerValue}>
+                    {() => <span class={tabsPickerValueText({ labelBehavior: props.labelBehavior })} data-rsp-slot="text">
+                        {selectedText(selectedItem())}
+                      </span>}
+                  </SelectValue>
+                  <Chevron size="M" styles={tabsPickerChevron} aria-hidden="true" data-open={triggerProps.isOpen ? "true" : void 0} />
+                </>}
+            </SelectTrigger>
+            <TabsPickerPopover>
+              <SelectListBox isInPopover class={tabsPickerMenu}>
+                {(item) => <TabsPickerOption id={item.id} item={item} textValue={item.textValue}>
+                    {item.label}
+                  </TabsPickerOption>}
+              </SelectListBox>
+            </TabsPickerPopover>
+          </>}
+      </Select>
+      <div class={tabsPickerLine({ isDisabled: props.isDisabled })} />
+    </div>;
+}
+//#endregion
+//#region src/tabs/index.tsx
+const TabsContext = createContext(null);
+const InternalTabsContext = createContext({
+	density: "regular",
+	labelBehavior: "show",
+	orientation: "horizontal",
+	variant: "line",
+	ariaLabel: void 0,
+	ariaLabelledBy: void 0,
+	showTabs: () => true,
+	setShowTabs: () => void 0,
+	menuId: "",
+	menuButtonId: "",
+	menuValueId: ""
+});
+const tabsRoot = function anonymous(props) {
+	let rules = " ";
+	rules += " _Pc151";
+	rules += " sd151";
+	rules += " _va151";
+	if (props.orientation === "vertical") rules += " _tc151";
+	else if (props.orientation === "horizontal") rules += " _ta151";
+	rules += " uxe7h4151";
+	rules += " -_6BNtrc-c151";
+	rules += " vx151";
+	rules += " xb151";
+	rules += " _xa151";
+	rules += " _Fd151";
+	rules += " _FnuYUweb151";
+	rules += " pHKLAu151";
+	return rules;
+};
+const tabList = function anonymous(props) {
+	let rules = " ";
+	rules += " sd151";
+	if (props.orientation === "vertical") rules += " _ta151";
+	else if (props.orientation === "horizontal") rules += " _tc151";
+	rules += " _va151";
+	if (props.variant === "pill") rules += " Uh151";
+	else if (props.variant === "line") {
+		if (props.orientation === "vertical") rules += " U1DOfn151";
+		else if (props.orientation === "horizontal") {
+			if (props.density === "regular") rules += " Up151";
+			else if (props.density === "compact") rules += " Uj151";
+			else if (props.isLabelHidden) {}
+		}
+	}
+	if (props.variant === "pill") rules += " qh151";
+	else if (props.variant === "line") {
+		if (props.orientation === "vertical") rules += " q1DOfn151";
+		else if (props.orientation === "horizontal") {
+			if (props.density === "regular") rules += " qp151";
+			else if (props.density === "compact") rules += " qj151";
+			else if (props.isLabelHidden) {}
+		}
+	}
+	if (props.orientation === "vertical") rules += " Hz151";
+	rules += " Nq151";
+	if (props.variant === "pill") rules += " _Cd151";
+	if (props.variant === "pill") rules += " gNU7lMd151";
+	if (props.variant === "pill") rules += " -Jvcevd-xkGPz151";
+	if (props.variant === "pill") rules += " _kb151";
+	if (props.variant === "pill") rules += " hb151";
+	if (props.variant === "pill") rules += " mb151";
+	if (props.variant === "pill") rules += " lb151";
+	if (props.variant === "pill") rules += " _jf151";
+	if (props.variant === "pill") rules += " irHHOgb151";
+	if (props.variant === "pill") rules += " og151";
+	if (props.variant === "pill") rules += " ng151";
+	if (props.variant === "pill") rules += " kg151";
+	if (props.variant === "pill") rules += " jg151";
+	if (props.variant === "pill") rules += " _nfRoCnb151";
+	if (props.variant === "pill") rules += " Tt151";
+	if (props.variant === "pill") rules += " Qt151";
+	if (props.variant === "pill") rules += " SIWpurc151";
+	if (props.variant === "pill") rules += " RIWpurc151";
+	return rules;
+};
+const tabListWrapper = " _Pc151 Na151 _va151 _ua151";
+const hiddenTabListFrame = " _Pa151 Wr151 _Ar151 ZK151 _6b151 _Ne151 Pe151 _Ia151 _Ob151";
+const hiddenTabList = " _6b151 _Ne151 Pe151 _Ia151";
+const tabsOverflowGateStyles = (scopeId) => `
+.solidaria-Tabs[data-tabs-overflow-scope="${scopeId}"][data-tabs-overflow-state="menu"]
+  [data-tabs-overflow-owner="${scopeId}"] > .solidaria-Tabs-overflowTabList {
+  display: none !important;
+}
+
+.solidaria-Tabs[data-tabs-overflow-scope="${scopeId}"][data-tabs-overflow-state="tabs"]
+  [data-tabs-overflow-owner="${scopeId}"] > .solidaria-Tabs-overflowMenu {
+  display: none !important;
+}
+`;
+const tabsOverflowTabListClass = "solidaria-Tabs-overflowTabList";
+const tabsOverflowMenuClass = "solidaria-Tabs-overflowMenu";
+const tabsMenuWrapper = function anonymous(props) {
+	let rules = " ";
+	rules += " sd151";
+	rules += " _va151";
+	rules += " eb151";
+	if (props.density === "regular") rules += " Fz151";
+	else if (props.density === "compact") rules += " Fx151";
+	return rules;
+};
+const tab = function anonymous(props) {
+	let rules = " ";
+	if (props.isFocusVisible) rules += " _Lf151";
+	else rules += " _Le151";
+	rules += " O8KaFke151";
+	rules += " Olc151";
+	rules += " _Mc151";
+	rules += " _Kd151";
+	rules += " _Pc151";
+	rules += " sd151";
+	rules += " eb151";
+	if (props.variant === "pill") rules += " _ta151";
+	if (props.variant === "pill") rules += " _Ca151";
+	if (props.variant === "pill") rules += " Nrav34c151";
+	if (props.orientation === "horizontal") {
+		if (props.variant === "line") {
+			if (props.density === "regular") rules += " Fz151";
+			else if (props.density === "compact") rules += " Fx151";
+		}
+	}
+	if (props.orientation === "vertical") rules += " Mi151";
+	if (props.orientation === "vertical") rules += " SIWpurc151";
+	else if (props.isLabelHidden) rules += " S1DOfn151";
+	if (props.orientation === "vertical") rules += " RIWpurc151";
+	else if (props.isLabelHidden) rules += " R1DOfn151";
+	rules += " of151";
+	rules += " nf151";
+	rules += " kf151";
+	rules += " jf151";
+	if (props.variant === "pill") rules += " UkNNfn151";
+	else {
+		rules += " Uc151";
+		rules += " Usd151";
+	}
+	if (props.variant === "pill") rules += " qkNNfn151";
+	else {
+		rules += " qc151";
+		rules += " qsd151";
+	}
+	if (props.isDisabled) rules += " pUvnvv151";
+	else if (props.isSelected) if (props.isPressed) rules += " pOzYCcc151";
+	else if (props.isFocusVisible) rules += " pOzYCcc151";
+	else if (props.isHovered) rules += " pOzYCcc151";
+	else rules += " p5dxOg151";
+	else if (props.isPressed) rules += " pQKeKoe151";
+	else if (props.isFocusVisible) rules += " pQKeKoe151";
+	else if (props.isHovered) rules += " pQKeKoe151";
+	else rules += " pUUi0Fe151";
+	if (props.isDisabled) rules += " plc151";
+	else if (props.isSelected) rules += " pld151";
+	rules += " ri151";
+	rules += " _Xa151";
+	rules += " _va151";
+	rules += " Yd151";
+	rules += " Xb151";
+	rules += " _2b151";
+	rules += " __ca151";
+	return rules;
+};
+const tabText = function anonymous(props) {
+	let rules = " ";
+	rules += " _Jb151";
+	if (props.isLabelHidden) rules += " sk151";
+	if (props.orientation === "vertical") rules += " vQvqurc151";
+	else if (props.variant === "pill") rules += " vIWpurc151";
+	if (props.orientation === "vertical") {
+		rules += " xg151";
+		rules += " _xa151";
+	} else if (props.variant === "pill") {
+		rules += " xd151";
+		rules += " _xa151";
+		rules += " xX0cczbc151";
+		rules += " _xX0cczba151";
+	}
+	if (props.variant === "pill") rules += " -sKUDed-iH4cn151";
+	if (props.variant === "pill") rules += " _FWDMfn151";
+	return rules;
+};
+const tabIndicator = function anonymous(props) {
+	let rules = " ";
+	rules += " _Pa151";
+	rules += " _Ob151";
+	if (props.isDisabled) rules += " gkDWoNd151";
+	else rules += " gdeCgNc151";
+	if (props.isDisabled) rules += " gld151";
+	else rules += " gle151";
+	rules += " og151";
+	rules += " ng151";
+	rules += " kg151";
+	rules += " jg151";
+	rules += " _qg151";
+	rules += " YIRyJjb151";
+	rules += " Ydklsgce151";
+	rules += " Xc151";
+	rules += " _2a151";
+	if (props.orientation === "vertical") rules += " _lK151";
+	else if (props.orientation === "horizontal") rules += " _lr151";
+	if (props.orientation === "vertical") rules += " Wr151";
+	else if (props.orientation === "horizontal") rules += " WL151";
+	if (props.orientation === "vertical") rules += " _Ea151";
+	else if (props.orientation === "horizontal") rules += " _Er151";
+	if (props.orientation === "vertical") rules += " _RK151";
+	else if (props.orientation === "horizontal") rules += " _Rr151";
+	if (props.orientation === "vertical") rules += " Zf151";
+	else if (props.orientation === "horizontal") rules += " Za151";
+	if (props.orientation === "vertical") rules += " Fb151";
+	else if (props.orientation === "horizontal") rules += " FlAZvq151";
+	return rules;
+};
+const tabCaret = function anonymous(props) {
+	let rules = " ";
+	rules += " _Ja151";
+	rules += " _va151";
+	rules += " Zk151";
+	rules += " uxe7h4151";
+	rules += " vQvqurc151";
+	rules += " xg151";
+	rules += " _xa151";
+	rules += " _FWDMfn151";
+	if (props.isDisabled) rules += " pUvnvv151";
+	else rules += " p5dxOg151";
+	if (props.isDisabled) rules += " plc151";
+	else rules += " pld151";
+	if (props.isSelected) rules += " _Ib151";
+	else if (props.isHovered) rules += " _Itvfurc151";
+	else rules += " _Ia151";
+	rules += " Yd151";
+	rules += " Xb151";
+	rules += " _2b151";
+	return rules;
+};
+const tabBadgeStyles = " _J3mU151 IM151";
+const tabPanels = " Na151 Ma151";
+const tabPanel = function anonymous(props) {
+	let rules = " ";
+	if (props.isFocusVisible) rules += " _Lf151";
+	else rules += " _Le151";
+	rules += " O8KaFke151";
+	rules += " Olc151";
+	rules += " _Mc151";
+	rules += " _Kd151";
+	rules += " pHKLAu151";
+	rules += " Na151";
+	rules += " Ma151";
+	rules += " _ub151";
+	if (props.isInert) rules += " sk151";
+	else rules += " sb151";
+	rules += " Js151";
+	return rules;
+};
+const iconStyles = " sb151 _va151 -_8sjo0b-t5ZbAob151";
+const iconRenderStyles = " _Ja151";
+function requireTabsLabel(props) {
+	if (!props["aria-label"] && !props["aria-labelledby"]) throw new Error("Tabs requires either an aria-label or aria-labelledby prop.");
+}
+function resolveChildAccessor(value) {
+	let next = value;
+	while (typeof next === "function" && next.length === 0) next = next();
+	return Array.isArray(next) ? next.map((child) => resolveChildAccessor(child)) : next;
+}
+/**
+* Tabs organize related content into sections where one panel is visible at a time.
+*/ function Tabs$1(props) {
+	const providerProps = useProviderProps(props);
+	const contextProps = getSlottedContextProps(useContext(TabsContext), props.slot);
+	const [local, labelProps, headlessProps] = splitProps(mergeProps(providerProps, contextProps ?? {}, props), [
+		"children",
+		"density",
+		"labelBehavior",
+		"variant",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class",
+		"slot",
+		"ref"
+	], ["aria-label", "aria-labelledby"]);
+	const density = () => local.density ?? "regular";
+	const labelBehavior = () => local.labelBehavior ?? "show";
+	const variant = () => local.variant ?? "line";
+	const orientation = () => headlessProps.orientation ?? "horizontal";
+	const [showTabs, setShowTabsSignal] = createSignal(true);
+	const menuId = createUniqueId();
+	const menuButtonId = `${menuId}-button`;
+	const menuValueId = `${menuId}-value`;
+	const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
+	const mergedUnsafeStyle = () => mergeContextUnsafeStyle(contextProps?.UNSAFE_style, props.UNSAFE_style);
+	const assignRef = mergeContextRefs(contextProps?.ref, props.ref);
+	const internalContext = {
+		get density() {
+			return density();
+		},
+		get labelBehavior() {
+			return labelBehavior();
+		},
+		get orientation() {
+			return orientation();
+		},
+		get variant() {
+			return variant();
+		},
+		get ariaLabel() {
+			return labelProps["aria-label"];
+		},
+		get ariaLabelledBy() {
+			return labelProps["aria-labelledby"];
+		},
+		showTabs,
+		setShowTabs(value) {
+			setShowTabsSignal(orientation() === "vertical" || variant() === "pill" ? true : value);
+		},
+		menuId,
+		menuButtonId,
+		menuValueId
+	};
+	const className = (renderProps) => [
+		"solidaria-Tabs",
+		contextProps?.UNSAFE_className,
+		props.UNSAFE_className,
+		props.class,
+		mergeStyles(tabsRoot({
+			orientation: renderProps.orientation,
+			density: density(),
+			isDisabled: renderProps.isDisabled
+		}), mergedStyles())
+	].filter(Boolean).join(" ");
+	requireTabsLabel(labelProps);
+	createEffect(() => {
+		if (orientation() === "vertical" || variant() === "pill") setShowTabsSignal(true);
+	});
+	return <InternalTabsContext.Provider value={internalContext}>
+      <Tabs {...headlessProps} ref={(element) => assignRef(element)} slot={local.slot ?? void 0} class={className} style={mergedUnsafeStyle()} data-density={density()} data-label-behavior={labelBehavior()} data-variant={variant()} data-tabs-overflow-scope={menuId} data-tabs-overflow-state={showTabs() ? "tabs" : "menu"}>
+        <style>{tabsOverflowGateStyles(menuId)}</style>
+        {local.children}
+      </Tabs>
+    </InternalTabsContext.Provider>;
+}
+/**
+* A TabList contains the tabs for a Tabs group.
+*/ function TabList$1(props) {
+	const context = useContext(InternalTabsContext);
+	const state = useContext(TabsStateContext);
+	let wrapperElement;
+	const [wrapperRef, setWrapperRef] = createSignal();
+	const [local, headlessProps] = splitProps(props, [
+		"children",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class",
+		"slot"
+	]);
+	const className = (isHidden = false) => (renderProps) => [
+		"solidaria-TabList",
+		isHidden ? void 0 : tabsOverflowTabListClass,
+		local.UNSAFE_className,
+		local.class,
+		mergeStyles(tabList({
+			orientation: renderProps.orientation,
+			density: context.density,
+			variant: context.variant,
+			isDisabled: renderProps.isDisabled,
+			isLabelHidden: context.labelBehavior === "hide"
+		}), isHidden ? hiddenTabList : void 0, local.styles)
+	].filter(Boolean).join(" ");
+	const collectionItems = createMemo(() => {
+		const collection = state?.collection();
+		if (!collection) return [];
+		return Array.from(collection).filter((item) => item.type === "item").map((item) => ({
+			key: item.key,
+			textValue: item.textValue ?? String(item.key),
+			isDisabled: item.isDisabled
+		}));
+	});
+	const [cachedItems, setCachedItems] = createSignal([]);
+	const measuringItems = createMemo(() => {
+		const items = collectionItems();
+		return items.length > 0 ? items : cachedItems();
+	});
+	const pickerItems = createMemo(() => measuringItems().map((item) => ({
+		id: item.key,
+		textValue: item.textValue,
+		label: item.textValue,
+		isDisabled: Boolean(item.isDisabled || state?.isKeyDisabled(item.key))
+	})));
+	const disabledKeys = createMemo(() => {
+		const result = new Set(state?.disabledKeys() ?? []);
+		for (const item of pickerItems()) if (item.isDisabled) result.add(item.id);
+		return result;
+	});
+	const measurementListClass = () => [
+		"solidaria-TabList",
+		local.UNSAFE_className,
+		local.class,
+		mergeStyles(tabList({
+			orientation: context.orientation,
+			density: context.density,
+			variant: context.variant,
+			isDisabled: state?.isDisabled() ?? false,
+			isLabelHidden: context.labelBehavior === "hide"
+		}), hiddenTabList, local.styles)
+	].filter(Boolean).join(" ");
+	const measurementTabClass = () => ["solidaria-Tab", tab({
+		orientation: context.orientation,
+		density: context.density,
+		variant: context.variant,
+		isLabelHidden: context.labelBehavior === "hide"
+	})].filter(Boolean).join(" ");
+	const tabListElement = () => {
+		const wrapper = wrapperElement;
+		if (!wrapper) return null;
+		return context.showTabs() ? wrapper.querySelector("[role=\"tablist\"]") : wrapper.querySelector("[data-tabs-measure-list]");
+	};
+	const measurementListElement = () => wrapperElement?.querySelector("[data-tabs-measure-list]") ?? null;
+	const updateOverflow = () => {
+		if (context.orientation === "vertical" || context.variant === "pill") {
+			context.setShowTabs(true);
+			return;
+		}
+		const wrapper = wrapperElement;
+		const list = tabListElement();
+		if (!wrapper || !list) return;
+		const tabs = list.querySelectorAll("[role=\"tab\"], [data-tabs-measure-tab]");
+		const lastTab = tabs[tabs.length - 1];
+		if (!lastTab) {
+			if (context.showTabs()) context.setShowTabs(true);
+			return;
+		}
+		const wrapperRect = wrapper.getBoundingClientRect();
+		const lastTabRect = lastTab.getBoundingClientRect();
+		const fits = (typeof window === "undefined" ? "ltr" : window.getComputedStyle(wrapper).direction) === "rtl" ? lastTabRect.left >= wrapperRect.left : lastTabRect.right <= wrapperRect.right;
+		context.setShowTabs(fits);
+	};
+	const queueOverflowUpdate = () => {
+		if (typeof window === "undefined") return;
+		queueMicrotask(updateOverflow);
+		window.requestAnimationFrame(updateOverflow);
+	};
+	createEffect(() => {
+		context.orientation;
+		context.density;
+		context.labelBehavior;
+		queueOverflowUpdate();
+	});
+	createEffect(() => {
+		context.showTabs();
+		queueOverflowUpdate();
+	});
+	createEffect(() => {
+		const items = collectionItems();
+		if (items.length > 0) setCachedItems(items);
+	});
+	createEffect(() => {
+		measuringItems();
+		queueOverflowUpdate();
+	});
+	createEffect(() => {
+		const wrapper = wrapperRef();
+		queueOverflowUpdate();
+		if (!wrapper || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(queueOverflowUpdate);
+		observer.observe(wrapper);
+		if (wrapper.parentElement) observer.observe(wrapper.parentElement);
+		const list = measurementListElement();
+		if (list) observer.observe(list);
+		window.addEventListener("resize", queueOverflowUpdate);
+		onCleanup(() => observer.disconnect());
+		onCleanup(() => window.removeEventListener("resize", queueOverflowUpdate));
+	});
+	createEffect(() => {
+		(typeof document === "undefined" ? void 0 : document.fonts)?.ready.then(queueOverflowUpdate);
+	});
+	return <div ref={(element) => {
+		wrapperElement = element;
+		setWrapperRef(element);
+	}} class={tabListWrapper} data-tabs-overflow-owner={context.menuId}>
+      <div class={hiddenTabListFrame} aria-hidden="true" inert>
+        <div class={measurementListClass()} style={local.UNSAFE_style} data-tabs-measure-list>
+          <For each={measuringItems()}>
+            {(item) => <div class={measurementTabClass()} data-tabs-measure-tab>
+                <span class={tabText({
+		orientation: context.orientation,
+		density: context.density,
+		variant: context.variant,
+		isLabelHidden: context.labelBehavior === "hide"
+	})} data-rsp-slot="text">
+                  {item.textValue}
+                </span>
+              </div>}
+          </For>
+        </div>
+      </div>
+      <TabList {...headlessProps} aria-label={headlessProps["aria-label"] ?? context.ariaLabel} aria-labelledby={headlessProps["aria-labelledby"] ?? context.ariaLabelledBy} slot={local.slot ?? void 0} class={className(false)} style={local.UNSAFE_style}>
+        {local.children}
+      </TabList>
+      <TabsMenu items={pickerItems()} disabledKeys={disabledKeys()} />
+    </div>;
+}
+function TabsMenu(props) {
+	const context = useContext(InternalTabsContext);
+	const state = useContext(TabsStateContext);
+	const allKeysDisabled = () => props.items.length > 0 && props.items.every((item) => props.disabledKeys.has(item.id));
+	const isDisabled = () => Boolean(state?.isDisabled() || allKeysDisabled());
+	return <div class={[tabsOverflowMenuClass, tabsMenuWrapper({
+		orientation: context.orientation,
+		density: context.density
+	})].filter(Boolean).join(" ")}>
+      <TabsPicker id={context.menuId} valueId={context.menuValueId} aria-label={context.ariaLabel} aria-labelledby={context.ariaLabelledBy} density={context.density} labelBehavior={context.labelBehavior} items={props.items} disabledKeys={props.disabledKeys} selectedKey={state?.selectedKey() ?? null} isDisabled={isDisabled()} onSelectionChange={(key) => {
+		if (key != null) state?.setSelectedKey(key);
+	}} />
+    </div>;
+}
+/**
+* A Tab represents a selectable section in a Tabs group.
+*/ function Tab$1(props) {
+	const context = useContext(InternalTabsContext);
+	const contentId = createUniqueId();
+	const [local, headlessProps] = splitProps(props, [
+		"children",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class",
+		"slot"
+	]);
+	const labelHidden = () => context.labelBehavior === "hide";
+	const textStyleState = () => ({
+		orientation: context.orientation,
+		density: context.density,
+		variant: context.variant,
+		isLabelHidden: labelHidden()
+	});
+	const className = (renderProps) => [
+		"solidaria-Tab",
+		local.UNSAFE_className,
+		local.class,
+		mergeStyles(tab({
+			...renderProps,
+			orientation: context.orientation,
+			density: context.density,
+			variant: context.variant,
+			isLabelHidden: labelHidden()
+		}), local.styles)
+	].filter(Boolean).join(" ");
+	const textContextValue = {
+		id: contentId,
+		get styles() {
+			return tabText(textStyleState());
+		},
+		"data-rsp-slot": "text"
+	};
+	const iconContextValue = {
+		slot: "icon",
+		render: centerBaseline({
+			slot: "icon",
+			styles: iconRenderStyles
+		}),
+		styles: iconStyles
+	};
+	const badgeContextValue = { styles: tabBadgeStyles };
+	function TabContent(renderProps) {
+		function ResolvedTabContent() {
+			const rawChildren = local.children;
+			const value = resolveChildAccessor(typeof rawChildren === "function" && rawChildren.length > 0 ? rawChildren(renderProps) : rawChildren);
+			return typeof value === "string" ? <span id={contentId} class={tabText(textStyleState())} data-rsp-slot="text">
+          {value}
+        </span> : value;
+		}
+		return <>
+        <Show when={context.orientation !== "vertical" && context.variant !== "pill"}>
+          <SelectionIndicator class={tabIndicator({
+			orientation: context.orientation,
+			density: context.density,
+			isDisabled: renderProps.isDisabled
+		})} data-rsp-slot="selection-indicator" />
+        </Show>
+        <Show when={context.orientation === "vertical" && context.variant === "line"}>
+          <span aria-hidden="true" data-rsp-slot="tab-caret" class={tabCaret({
+			orientation: context.orientation,
+			density: context.density,
+			variant: context.variant,
+			isDisabled: renderProps.isDisabled,
+			isHovered: renderProps.isHovered,
+			isSelected: renderProps.isSelected
+		})}>
+            {">"}
+          </span>
+        </Show>
+        <IconContext.Provider value={iconContextValue}>
+          <TextContext.Provider value={textContextValue}>
+            <NotificationBadgeContext.Provider value={badgeContextValue}>
+              <ResolvedTabContent />
+            </NotificationBadgeContext.Provider>
+          </TextContext.Provider>
+        </IconContext.Provider>
+      </>;
+	}
+	return <Tab {...headlessProps} aria-labelledby={[labelHidden() ? contentId : void 0, headlessProps["aria-labelledby"]].filter(Boolean).join(" ") || void 0} slot={local.slot ?? void 0} class={className} style={local.UNSAFE_style}>
+      {(renderProps) => <TabContent {...renderProps} />}
+    </Tab>;
+}
+/**
+* A TabPanels groups TabPanel elements for compatibility with older composition.
+*/ function TabPanels$1(props) {
+	const [local, headlessProps] = splitProps(props, [
+		"children",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class",
+		"slot"
+	]);
+	const className = () => [
+		"solidaria-TabPanels",
+		local.UNSAFE_className,
+		local.class,
+		mergeStyles(tabPanels, local.styles)
+	].filter(Boolean).join(" ");
+	return <TabPanels {...headlessProps} slot={local.slot ?? void 0} class={className()} style={local.UNSAFE_style}>
+      {local.children}
+    </TabPanels>;
+}
+/**
+* A TabPanel contains the content associated with a Tab.
+*/ function TabPanel(props) {
+	const context = useContext(InternalTabsContext);
+	const state = useContext(TabsStateContext);
+	const [local, headlessProps] = splitProps(props, [
+		"children",
+		"styles",
+		"UNSAFE_className",
+		"UNSAFE_style",
+		"class",
+		"slot",
+		"shouldForceMount"
+	]);
+	const ariaProps = headlessProps;
+	const { tabPanelProps, isSelected } = createTabPanel(ariaProps, state);
+	const { isFocused, isFocusVisible, focusProps } = createFocusRing();
+	const isInert = () => Boolean(local.shouldForceMount && ariaProps.id !== void 0 && !isSelected());
+	const isEntering = () => false;
+	const isExiting = () => false;
+	const className = (renderProps) => [
+		"solidaria-TabPanel",
+		local.UNSAFE_className,
+		local.class,
+		mergeStyles(tabPanel({
+			...renderProps,
+			orientation: context.orientation,
+			density: context.density
+		}), local.styles)
+	].filter(Boolean).join(" ");
+	const renderValues = createMemo(() => ({
+		isSelected: isSelected(),
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isInert: isInert(),
+		isEntering: isEntering(),
+		isExiting: isExiting(),
+		state
+	}));
+	const collapsedRenderProps = createMemo(() => ({
+		isSelected: true,
+		isFocused: isFocused(),
+		isFocusVisible: isFocusVisible(),
+		isInert: false,
+		isEntering: false,
+		isExiting: false,
+		state
+	}));
+	const activeRenderProps = () => context.showTabs() ? renderValues() : collapsedRenderProps();
+	const shouldRenderCollapsedPanel = () => {
+		if (ariaProps.id === void 0) return state ? state.selectedKey() !== null : true;
+		return state?.selectedKey() === ariaProps.id;
+	};
+	const shouldRender = () => {
+		if (!context.showTabs()) return shouldRenderCollapsedPanel();
+		if (local.shouldForceMount) return true;
+		if (ariaProps.id === void 0) return state ? state.selectedKey() !== null : true;
+		return isSelected();
+	};
+	const renderedChildren = () => {
+		const rawChildren = local.children;
+		return typeof rawChildren === "function" ? rawChildren(activeRenderProps()) : rawChildren;
+	};
+	const menuLabelledBy = () => [context.menuButtonId, context.menuValueId].filter(Boolean).join(" ") || void 0;
+	const hasTabPanelSemantics = () => context.showTabs() && !isInert();
+	return <Show when={shouldRender()}>
+      <div id={hasTabPanelSemantics() ? tabPanelProps.id : void 0} role={context.showTabs() ? isInert() ? void 0 : tabPanelProps.role : "group"} aria-labelledby={context.showTabs() ? hasTabPanelSemantics() ? tabPanelProps["aria-labelledby"] : void 0 : menuLabelledBy()} aria-label={hasTabPanelSemantics() ? tabPanelProps["aria-label"] : void 0} aria-describedby={hasTabPanelSemantics() ? tabPanelProps["aria-describedby"] : void 0} tabIndex={context.showTabs() && isInert() ? void 0 : tabPanelProps.tabIndex} slot={local.slot ?? void 0} class={className(activeRenderProps())} style={local.UNSAFE_style} onFocus={focusProps.onFocus} onBlur={focusProps.onBlur} data-focused={isFocused() || void 0} data-focus-visible={isFocusVisible() || void 0} inert={context.showTabs() && isInert() ? true : void 0} data-inert={context.showTabs() && isInert() ? true : void 0} data-entering={context.showTabs() && isEntering() ? true : void 0} data-exiting={context.showTabs() && isExiting() ? true : void 0} hidden={context.showTabs() && ariaProps.id !== void 0 && !isSelected() && !local.shouldForceMount ? true : void 0}>
+        {renderedChildren()}
+      </div>
+    </Show>;
+}
+Tabs$1.List = TabList$1;
+Tabs$1.Tab = Tab$1;
+Tabs$1.Panels = TabPanels$1;
+Tabs$1.Panel = TabPanel;
+//#endregion
+export { TabPanels$1 as a, TabPanel as i, Tab$1 as n, Tabs$1 as o, TabList$1 as r, TabsContext as s, Collection as t };
+
+//# sourceMappingURL=Tabs.jsx.map