@hanzogui/tabs 3.0.2 → 7.0.0

package/dist/cjs/StyledContext.cjs

@@ -1,31 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-    return to;
-  };
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
-}), mod);
-var StyledContext_exports = {};
-__export(StyledContext_exports, {
-  TabsProvider: () => TabsProvider,
-  useTabsContext: () => useTabsContext
-});
-module.exports = __toCommonJS(StyledContext_exports);
-var import_gui_core = require("@hanzogui/core");
-const {
-  Provider: TabsProvider,
-  useStyledContext: useTabsContext
-} = (0, import_gui_core.createStyledContext)();

package/dist/cjs/StyledContext.native.js

@@ -1,34 +0,0 @@
-"use strict";
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-    return to;
-  };
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
-}), mod);
-var StyledContext_exports = {};
-__export(StyledContext_exports, {
-  TabsProvider: () => TabsProvider,
-  useTabsContext: () => useTabsContext
-});
-module.exports = __toCommonJS(StyledContext_exports);
-var import_gui_core = require("@hanzogui/core"),
-  {
-    Provider: TabsProvider,
-    useStyledContext: useTabsContext
-  } = (0, import_gui_core.createStyledContext)();
-//# sourceMappingURL=StyledContext.native.js.map

package/dist/cjs/StyledContext.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","StyledContext_exports","__export","TabsProvider","useTabsContext","module","exports","import_gui_core","require","Provider","useStyledContext","createStyledContext"],"sources":["../../src/StyledContext.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,qBAAA;AAAAC,QAAA,CAAAD,qBAAA;EAAAE,YAAA,EAAAA,CAAA,KAAAA,YAAA;EAAAC,cAAA,EAAAA,CAAA,KAAAA;AAAA;AACAC,MAAA,CAAAC,OAAA,GAAAV,YAAoC,CAAAK,qBAAA;AAgB7B,IAAAM,eAAkB,GAAAC,OAAA,kBAAc;EAAkB;IAAAC,QAAA,EAAAN,YACvD;IAAAO,gBAAA,EAAAN;EAAA,CAAsC,OAAAG,eAAA,CAAAI,mBAAA","ignoreList":[]}

package/dist/cjs/Tabs.cjs

@@ -1,81 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-    return to;
-  };
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
-}), mod);
-var Tabs_exports = {};
-__export(Tabs_exports, {
-  DefaultTabsContentFrame: () => DefaultTabsContentFrame,
-  DefaultTabsFrame: () => DefaultTabsFrame,
-  DefaultTabsTabFrame: () => DefaultTabsTabFrame
-});
-module.exports = __toCommonJS(Tabs_exports);
-var import_gui_core = require("@hanzogui/core"),
-  import_gui_get_button_sized = require("@hanzogui/get-button-sized"),
-  import_gui_stacks = require("@hanzogui/stacks");
-const TABS_NAME = "Tabs",
-  DefaultTabsFrame = (0, import_gui_core.styled)(import_gui_stacks.SizableStack, {
-    name: TABS_NAME
-  }),
-  TRIGGER_NAME = "TabsTrigger",
-  DefaultTabsTabFrame = (0, import_gui_core.styled)(import_gui_core.View, {
-    name: TRIGGER_NAME,
-    role: "tab",
-    variants: {
-      size: {
-        "...size": import_gui_get_button_sized.getButtonSized
-      },
-      disabled: {
-        true: {
-          pointerEvents: "none"
-        }
-      },
-      unstyled: {
-        false: {
-          borderWidth: 0,
-          backgroundColor: "$background",
-          userSelect: "none",
-          justifyContent: "center",
-          alignItems: "center",
-          flexWrap: "nowrap",
-          flexDirection: "row",
-          cursor: "pointer",
-          pressStyle: {
-            backgroundColor: "$backgroundPress"
-          },
-          focusVisibleStyle: {
-            outlineColor: "$outlineColor",
-            outlineWidth: 2,
-            outlineStyle: "solid",
-            zIndex: 10
-          }
-        }
-      }
-    },
-    defaultVariants: {
-      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
-    }
-  }, {
-    accept: {
-      activeStyle: "style"
-    }
-  }),
-  CONTENT_NAME = "TabsContent",
-  DefaultTabsContentFrame = (0, import_gui_core.styled)(import_gui_stacks.ThemeableStack, {
-    name: CONTENT_NAME
-  });

package/dist/cjs/Tabs.native.js

@@ -1,84 +0,0 @@
-"use strict";
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-    return to;
-  };
-var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-  value: !0
-}), mod);
-var Tabs_exports = {};
-__export(Tabs_exports, {
-  DefaultTabsContentFrame: () => DefaultTabsContentFrame,
-  DefaultTabsFrame: () => DefaultTabsFrame,
-  DefaultTabsTabFrame: () => DefaultTabsTabFrame
-});
-module.exports = __toCommonJS(Tabs_exports);
-var import_gui_core = require("@hanzogui/core"),
-  import_gui_get_button_sized = require("@hanzogui/get-button-sized"),
-  import_gui_stacks = require("@hanzogui/stacks"),
-  TABS_NAME = "Tabs",
-  DefaultTabsFrame = (0, import_gui_core.styled)(import_gui_stacks.SizableStack, {
-    name: TABS_NAME
-  }),
-  TRIGGER_NAME = "TabsTrigger",
-  DefaultTabsTabFrame = (0, import_gui_core.styled)(import_gui_core.View, {
-    name: TRIGGER_NAME,
-    role: "tab",
-    variants: {
-      size: {
-        "...size": import_gui_get_button_sized.getButtonSized
-      },
-      disabled: {
-        true: {
-          pointerEvents: "none"
-        }
-      },
-      unstyled: {
-        false: {
-          borderWidth: 0,
-          backgroundColor: "$background",
-          userSelect: "none",
-          justifyContent: "center",
-          alignItems: "center",
-          flexWrap: "nowrap",
-          flexDirection: "row",
-          cursor: "pointer",
-          pressStyle: {
-            backgroundColor: "$backgroundPress"
-          },
-          focusVisibleStyle: {
-            outlineColor: "$outlineColor",
-            outlineWidth: 2,
-            outlineStyle: "solid",
-            zIndex: 10
-          }
-        }
-      }
-    },
-    defaultVariants: {
-      unstyled: process.env.HANZO_GUI_HEADLESS === "1"
-    }
-  }, {
-    accept: {
-      activeStyle: "style"
-    }
-  }),
-  CONTENT_NAME = "TabsContent",
-  DefaultTabsContentFrame = (0, import_gui_core.styled)(import_gui_stacks.ThemeableStack, {
-    name: CONTENT_NAME
-  });
-//# sourceMappingURL=Tabs.native.js.map

package/dist/cjs/Tabs.native.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","Tabs_exports","__export","DefaultTabsContentFrame","DefaultTabsFrame","DefaultTabsTabFrame","module","exports","import_gui_core","require","import_gui_get_button_sized","import_gui_stacks","TABS_NAME","styled","SizableStack","name","TRIGGER_NAME","View","role","variants","size","getButtonSized","disabled","true","pointerEvents","unstyled","false","borderWidth","backgroundColor","userSelect","justifyContent","alignItems","flexWrap","flexDirection","cursor","pressStyle","focusVisibleStyle","outlineColor","outlineWidth","outlineStyle","zIndex","defaultVariants","process","env","HANZO_GUI_HEADLESS","accept","activeStyle","CONTENT_NAME","ThemeableStack"],"sources":["../../src/Tabs.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,YAAA;AAAAC,QAAA,CAAAD,YAAA;EAAAE,uBAAA,EAAAA,CAAA,KAAAA,uBAAA;EAAAC,gBAAA,EAAAA,CAAA,KAAAA,gBAAA;EAAAC,mBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAAAX,YAA6B,CAAAK,YAAA;AAI7B,IAAAO,eAAkB,GAAAC,OACL;EAAmBC,2BAAO,GAAAD,OAAA,8BAAc;EAAAE,iBAAA,GAAAF,OAAA;EAAAG,SAAA;EAAAR,gBAAA,OAAAI,eAAA,CAAAK,MAAA,EAAAF,iBAAA,CAAAG,YAAA;IACnDC,IAAA,EAAMH;EACR,CAAC;EAEKI,YAAA,GAAe;EAERX,mBAAA,OAAsBG,eAAA,CAAAK,MAAA,EAAAL,eAAA,CAAAS,IAAA;IACjCF,IAAA,EAAAC,YAAA;IACAE,IAAA;IAAAC,QACQ;MACNC,IAAA,EAAM;QAEN,SAAU,EAAAV,2BAAA,CAAAW;MAAA;MACFC,QACJ;QACFC,IAAA;UAEAC,aAAU;QAAA;MACF;MACWC,QACjB;QACFC,KAAA;UAEAC,WAAU;UACRC,eAAO;UAAAC,UACL,QAAa;UAAAC,cACb,UAAiB;UAAAC,UACjB,UAAY;UAAAC,QACZ,UAAgB;UAAAC,aAChB,EAAY;UAAAC,MACZ,WAAU;UAAAC,UACV;YACAP,eAAQ;UAAA;UAEIQ,iBACV;YACFC,YAAA;YAEAC,YAAA;YAAmBC,YACjB,SAAc;YAAAC,MACd;UAAc;QACA;MACN;IACV;IACFC,eACF;MACFhB,QAAA,EAAAiB,OAAA,CAAAC,GAAA,CAAAC,kBAAA;IAAA;EAEiB;IAC8BC,MAC/C;MACFC,WAAA;IACA;EAAA;EACEC,YAAQ;EAAA5C,uBAAA,OAAAK,eAAA,CAAAK,MAAA,EAAAF,iBAAA,CAAAqC,cAAA;IAAAjC,IACN,EAAAgC;EAAa","ignoreList":[]}

package/dist/cjs/createTabs.cjs

@@ -1,262 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf,
-  __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-    for (var name in all) __defProp(target, name, {
-      get: all[name],
-      enumerable: !0
-    });
-  },
-  __copyProps = (to, from, except, desc) => {
-    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
-      get: () => from[key],
-      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
-    });
-    return to;
-  };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-    value: mod,
-    enumerable: !0
-  }) : target, mod)),
-  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
-    value: !0
-  }), mod);
-var createTabs_exports = {};
-__export(createTabs_exports, {
-  createTabs: () => createTabs
-});
-module.exports = __toCommonJS(createTabs_exports);
-var import_gui_compose_refs = require("@hanzogui/compose-refs"),
-  import_gui_constants = require("@hanzogui/constants"),
-  import_gui_group = require("@hanzogui/group"),
-  import_gui_helpers = require("@hanzogui/helpers"),
-  import_gui_roving_focus = require("@hanzogui/roving-focus"),
-  import_gui_sizable_context = require("@hanzogui/sizable-context"),
-  import_gui_use_controllable_state = require("@hanzogui/use-controllable-state"),
-  import_gui_use_direction = require("@hanzogui/use-direction"),
-  import_gui_web = require("@hanzogui/web"),
-  React = __toESM(require("react"), 1),
-  import_StyledContext = require("./StyledContext.cjs"),
-  import_Tabs = require("./Tabs.cjs"),
-  import_jsx_runtime = require("react/jsx-runtime");
-function createTabs(createProps) {
-  const {
-      ContentFrame = import_Tabs.DefaultTabsContentFrame,
-      TabFrame = import_Tabs.DefaultTabsTabFrame,
-      TabsFrame = import_Tabs.DefaultTabsFrame
-    } = createProps,
-    TABS_CONTEXT = "TabsContext",
-    TAB_LIST_NAME = "TabsList",
-    TabsList = React.forwardRef((props, forwardedRef) => {
-      const {
-          __scopeTabs,
-          loop = !0,
-          children,
-          ...listProps
-        } = props,
-        context = (0, import_StyledContext.useTabsContext)(__scopeTabs);
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_roving_focus.RovingFocusGroup, {
-        __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,
-        orientation: context.orientation,
-        dir: context.dir,
-        loop,
-        asChild: !0,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_group.Group, {
-          role: "tablist",
-          componentName: TAB_LIST_NAME,
-          "aria-orientation": context.orientation,
-          ref: forwardedRef,
-          orientation: context.orientation,
-          ...listProps,
-          children
-        })
-      });
-    });
-  TabsList.displayName = TAB_LIST_NAME;
-  const TRIGGER_NAME = "TabsTrigger",
-    TabsTrigger = TabFrame.styleable((props, forwardedRef) => {
-      const {
-          __scopeTabs,
-          value,
-          disabled = !1,
-          onInteraction,
-          activeStyle,
-          activeTheme,
-          unstyled = !1,
-          ...triggerProps
-        } = props,
-        context = (0, import_StyledContext.useTabsContext)(__scopeTabs),
-        triggerId = makeTriggerId(context.baseId, value),
-        contentId = makeContentId(context.baseId, value),
-        isSelected = value === context.value,
-        [layout, setLayout] = React.useState(null),
-        triggerRef = React.useRef(null),
-        groupItemProps = (0, import_gui_group.useGroupItem)({
-          disabled: !!disabled
-        });
-      return React.useEffect(() => (context.registerTrigger(), () => context.unregisterTrigger()), []), React.useEffect(() => {
-        if (!triggerRef.current || !import_gui_constants.isWeb) return;
-        const el = triggerRef.current;
-        function getTriggerSize() {
-          el && setLayout({
-            width: el.offsetWidth,
-            height: el.offsetHeight,
-            x: el.offsetLeft,
-            y: el.offsetTop
-          });
-        }
-        getTriggerSize();
-        const observer = new ResizeObserver(getTriggerSize);
-        return observer.observe(el), () => {
-          observer.unobserve(el);
-        };
-      }, [context.triggersCount]), React.useEffect(() => {
-        isSelected && layout && onInteraction?.("select", layout);
-      }, [isSelected, value, layout]), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_roving_focus.RovingFocusGroup.Item, {
-        __scopeRovingFocusGroup: __scopeTabs || TABS_CONTEXT,
-        asChild: !0,
-        focusable: !disabled,
-        active: isSelected,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabFrame, {
-          onMouseEnter: (0, import_gui_helpers.composeEventHandlers)(props.onMouseEnter, () => {
-            layout && onInteraction?.("hover", layout);
-          }),
-          onMouseLeave: (0, import_gui_helpers.composeEventHandlers)(props.onMouseLeave, () => {
-            onInteraction?.("hover", null);
-          }),
-          role: "tab",
-          "aria-selected": isSelected,
-          "aria-controls": contentId,
-          "data-state": isSelected ? "active" : "inactive",
-          "data-disabled": disabled ? "" : void 0,
-          id: triggerId,
-          theme: activeTheme ?? null,
-          unstyled,
-          ...(!unstyled && {
-            size: context.size
-          }),
-          ...(isSelected && {
-            ...(!unstyled && !activeStyle && {
-              backgroundColor: "$backgroundActive"
-            }),
-            ...activeStyle
-          }),
-          ...groupItemProps,
-          disabled: disabled ?? groupItemProps.disabled,
-          ...triggerProps,
-          ref: (0, import_gui_compose_refs.composeRefs)(forwardedRef, triggerRef),
-          onPress: (0, import_gui_helpers.composeEventHandlers)(props.onPress ?? void 0, event => {
-            const webChecks = !import_gui_constants.isWeb || event.button === 0 && event.ctrlKey === !1;
-            !disabled && !isSelected && webChecks && context.onChange(value);
-          }),
-          ...(import_gui_constants.isWeb && {
-            onKeyDown: (0, import_gui_helpers.composeEventHandlers)(props.onKeyDown, event => {
-              [" ", "Enter"].includes(event.key) && (context.onChange(value), event.preventDefault());
-            }),
-            onFocus: (0, import_gui_helpers.composeEventHandlers)(props.onFocus, event => {
-              layout && onInteraction?.("focus", layout);
-              const isAutomaticActivation = context.activationMode !== "manual";
-              !isSelected && !disabled && isAutomaticActivation && context.onChange(value);
-            }),
-            onBlur: (0, import_gui_helpers.composeEventHandlers)(props.onBlur, () => {
-              onInteraction?.("focus", null);
-            })
-          })
-        })
-      });
-    });
-  TabsTrigger.displayName = TRIGGER_NAME;
-  const TabsContent = ContentFrame.styleable(function (props, forwardedRef) {
-      const {
-          __scopeTabs,
-          value,
-          forceMount,
-          children,
-          ...contentProps
-        } = props,
-        context = (0, import_StyledContext.useTabsContext)(__scopeTabs),
-        isSelected = value === context.value,
-        show = forceMount || isSelected,
-        triggerId = makeTriggerId(context.baseId, value),
-        contentId = makeContentId(context.baseId, value);
-      return show ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(ContentFrame, {
-        "data-state": isSelected ? "active" : "inactive",
-        "data-orientation": context.orientation,
-        role: "tabpanel",
-        "aria-labelledby": triggerId,
-        hidden: !show,
-        id: contentId,
-        tabIndex: 0,
-        ...contentProps,
-        ref: forwardedRef,
-        children
-      }, value) : null;
-    }),
-    TabsComponent = TabsFrame.styleable(function (props, forwardedRef) {
-      const {
-          __scopeTabs,
-          value: valueProp,
-          onValueChange,
-          defaultValue,
-          orientation = "horizontal",
-          dir,
-          activationMode = "manual",
-          size = "$true",
-          ...tabsProps
-        } = props,
-        direction = (0, import_gui_use_direction.useDirection)(dir),
-        [value, setValue] = (0, import_gui_use_controllable_state.useControllableState)({
-          prop: valueProp,
-          onChange: onValueChange,
-          defaultProp: defaultValue ?? ""
-        }),
-        [triggersCount, setTriggersCount] = React.useState(0),
-        registerTrigger = (0, import_gui_web.useEvent)(() => setTriggersCount(v => v + 1)),
-        unregisterTrigger = (0, import_gui_web.useEvent)(() => setTriggersCount(v => v - 1));
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui_sizable_context.SizableContext.Provider, {
-        size,
-        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_StyledContext.TabsProvider, {
-          scope: __scopeTabs,
-          baseId: React.useId(),
-          value,
-          onChange: setValue,
-          orientation,
-          dir: direction,
-          activationMode,
-          size,
-          registerTrigger,
-          triggersCount,
-          unregisterTrigger,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(TabsFrame, {
-            direction,
-            "data-orientation": orientation,
-            ...tabsProps,
-            ref: forwardedRef
-          })
-        })
-      });
-    });
-  return (0, import_gui_helpers.withStaticProperties)(TabsComponent, {
-    List: TabsList,
-    /**
-     * @deprecated Use Tabs.Tab instead
-     */
-    Trigger: TabsTrigger,
-    Tab: TabsTrigger,
-    Content: TabsContent
-  });
-}
-function makeTriggerId(baseId, value) {
-  return `${baseId}-trigger-${value}`;
-}
-function makeContentId(baseId, value) {
-  return `${baseId}-content-${value}`;
-}