@publish.os/nextjs 0.0.1-alpha.2 → 0.0.1-alpha.3

package/dist/kernel/components/ui/tabs.cjs

@@ -0,0 +1,450 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__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: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/kernel/components/ui/tabs.tsx
+var tabs_exports = {};
+__export(tabs_exports, {
+  NavigationTabs: () => NavigationTabs,
+  NavigationTabsIndicator: () => NavigationTabsIndicator,
+  NavigationTabsLink: () => NavigationTabsLink,
+  NavigationTabsList: () => NavigationTabsList,
+  NavigationTabsTab: () => NavigationTabsTab,
+  Tabs: () => Tabs,
+  TabsIndicator: () => TabsIndicator,
+  TabsList: () => TabsList,
+  TabsPanel: () => TabsPanel,
+  TabsTab: () => TabsTab,
+  tabsIndicatorVariants: () => tabsIndicatorVariants,
+  tabsListVariants: () => tabsListVariants,
+  tabsTabVariants: () => tabsTabVariants
+});
+module.exports = __toCommonJS(tabs_exports);
+var import_tabs = require("@base-ui/react/tabs");
+
+// src/utils/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      z: [
+        "z-content",
+        "z-nav",
+        "z-overlay",
+        "z-modal",
+        "z-search",
+        "z-toast",
+        "z-progress"
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(inputs));
+}
+
+// src/kernel/components/ui/tabs.tsx
+var import_class_variance_authority = require("class-variance-authority");
+var import_link = __toESM(require("next/link"), 1);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var tabsListVariants = (0, import_class_variance_authority.cva)("relative inline-flex items-center", {
+  variants: {
+    variant: {
+      base: "flex-wrap gap-1 rounded-button border border-stroke-2 bg-surface-2 p-1",
+      button: "flex-wrap gap-1 rounded-button",
+      underline: "gap-5 border-stroke-3 data-[orientation=horizontal]:border-b data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[orientation=vertical]:border-r"
+    }
+  },
+  defaultVariants: {
+    variant: "base"
+  }
+});
+var tabsTabVariants = (0, import_class_variance_authority.cva)(
+  [
+    "relative inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap text-sm font-medium leading-none outline-none",
+    "!no-underline hover:!no-underline active:!no-underline",
+    "focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-focus-ring",
+    "disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        base: [
+          "rounded-[max(calc(var(--radius-button)_-_0.25rem),0px)] px-3 py-1.5 text-foreground-2 transition-colors duration-150 ease-out",
+          "hover:not-data-disabled:bg-surface-hover hover:not-data-disabled:text-foreground-1",
+          "active:not-data-disabled:bg-surface-active",
+          "data-active:bg-surface-active data-active:text-foreground-1",
+          "data-[state=path-active]:bg-surface-active data-[state=path-active]:text-foreground-1"
+        ].join(" "),
+        button: [
+          "h-8 rounded-button border border-transparent bg-transparent px-3 text-foreground-2 transition-[background-color,border-color,color,box-shadow] duration-150 ease-out",
+          "hover:not-data-disabled:bg-surface-hover hover:not-data-disabled:text-foreground-1",
+          "active:not-data-disabled:bg-surface-active",
+          "data-active:bg-accent-soft-hover data-active:text-accent-1",
+          "data-[state=path-active]:bg-accent-soft-hover data-[state=path-active]:text-accent-1"
+        ].join(" "),
+        underline: [
+          "rounded-button px-0 py-2 text-foreground-3 transition-colors duration-150 ease-out",
+          "hover:not-data-disabled:text-foreground-1 active:not-data-disabled:text-foreground-1",
+          "data-active:text-foreground-1 data-[state=path-active]:text-foreground-1",
+          "data-[orientation=vertical]:justify-start data-[orientation=vertical]:py-1.5 data-[orientation=vertical]:pr-4"
+        ].join(" ")
+      }
+    },
+    defaultVariants: {
+      variant: "base"
+    }
+  }
+);
+var tabsIndicatorVariants = (0, import_class_variance_authority.cva)("pointer-events-none absolute", {
+  variants: {
+    animation: {
+      grow: "",
+      slide: ""
+    },
+    variant: {
+      base: "hidden",
+      button: "hidden",
+      underline: "overflow-hidden rounded-full"
+    }
+  },
+  compoundVariants: [
+    {
+      animation: "slide",
+      className: [
+        "bg-[var(--tabs-indicator-color,var(--accent-1))]",
+        "transition-[clip-path] duration-200 ease-[cubic-bezier(0.77,0,0.175,1)] motion-reduce:transition-none",
+        "data-[orientation=horizontal]:inset-x-0 data-[orientation=horizontal]:bottom-0 data-[orientation=horizontal]:h-0.5",
+        "data-[orientation=vertical]:inset-y-0 data-[orientation=vertical]:right-0 data-[orientation=vertical]:w-0.5"
+      ].join(" "),
+      variant: "underline"
+    },
+    {
+      animation: "grow",
+      className: [
+        "data-[orientation=horizontal]:inset-x-0 data-[orientation=horizontal]:bottom-0 data-[orientation=horizontal]:h-0.5",
+        "data-[orientation=vertical]:inset-y-0 data-[orientation=vertical]:right-0 data-[orientation=vertical]:w-0.5"
+      ].join(" "),
+      variant: "underline"
+    }
+  ],
+  defaultVariants: {
+    animation: "slide",
+    variant: "base"
+  }
+});
+var tabsGrowIndicatorClassName = [
+  "absolute rounded-full bg-[var(--tabs-indicator-color,var(--accent-1))]",
+  "data-[orientation=horizontal]:bottom-0 data-[orientation=horizontal]:h-full",
+  "data-[orientation=vertical]:right-0 data-[orientation=vertical]:w-full"
+].join(" ");
+var TabsStyleContext = (0, import_react.createContext)(null);
+function useTabsStyle() {
+  return (0, import_react.use)(TabsStyleContext) ?? {
+    indicatorAnimation: "slide",
+    variant: "base"
+  };
+}
+function resolveTabsVariant(variant) {
+  return variant ?? "base";
+}
+function mergeBaseUiClassName(className, ...classes) {
+  if (typeof className === "function") {
+    return (state) => cn(...classes, className(state));
+  }
+  return cn(...classes, className);
+}
+function cssColorValue(color) {
+  if (!color) return void 0;
+  if (color === "accent") return "var(--accent-1)";
+  if (color === "current") return "currentColor";
+  if (color === "foreground") return "var(--foreground-1)";
+  if (color.startsWith("var(")) return color;
+  if (color.startsWith("--")) return `var(${color})`;
+  return color;
+}
+function mergeTabsStyle(style, indicatorColor) {
+  const color = cssColorValue(indicatorColor);
+  if (!color) return style;
+  if (typeof style === "function") {
+    return (state) => ({
+      ...style(state),
+      "--tabs-indicator-color": color
+    });
+  }
+  return {
+    ...style,
+    "--tabs-indicator-color": color
+  };
+}
+function tabsSlideClipPath(orientation) {
+  if (orientation === "vertical") {
+    return "inset(var(--active-tab-top) 0 calc(100% - var(--active-tab-top) - var(--active-tab-height)) 0)";
+  }
+  return "inset(0 calc(100% - var(--active-tab-left) - var(--active-tab-width)) 0 var(--active-tab-left))";
+}
+function mergeTabsIndicatorStyle(style, indicatorColor, indicatorAnimation) {
+  const mergedStyle = mergeTabsStyle(style, indicatorColor);
+  if (indicatorAnimation !== "slide") return mergedStyle;
+  if (typeof mergedStyle === "function") {
+    return (state) => ({
+      ...mergedStyle(state),
+      clipPath: tabsSlideClipPath(state.orientation)
+    });
+  }
+  return (state) => ({
+    ...mergedStyle,
+    clipPath: tabsSlideClipPath(state.orientation)
+  });
+}
+function mergeRel(rel) {
+  const values = new Set((rel ?? "").split(/\s+/).filter(Boolean));
+  values.add("noopener");
+  values.add("noreferrer");
+  return Array.from(values).join(" ");
+}
+function TabsGrowIndicator({
+  indicatorProps,
+  state
+}) {
+  const indicatorRef = (0, import_react.useRef)(null);
+  const activeLeft = state.activeTabPosition?.left;
+  const activeTop = state.activeTabPosition?.top;
+  const activeWidth = state.activeTabSize?.width;
+  const activeHeight = state.activeTabSize?.height;
+  (0, import_react.useLayoutEffect)(() => {
+    const indicator = indicatorRef.current;
+    if (!indicator || activeLeft == null || activeTop == null || activeWidth == null || activeHeight == null || typeof indicator.animate !== "function" || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+    const isVertical = state.orientation === "vertical";
+    const animation = indicator.animate(
+      [
+        {
+          opacity: 0.7,
+          transform: isVertical ? "scaleY(0.35)" : "scaleX(0.35)"
+        },
+        {
+          opacity: 1,
+          transform: isVertical ? "scaleY(1)" : "scaleX(1)"
+        }
+      ],
+      {
+        duration: 180,
+        easing: "cubic-bezier(0.23, 1, 0.32, 1)"
+      }
+    );
+    return () => {
+      animation.cancel();
+    };
+  }, [activeHeight, activeLeft, activeTop, activeWidth, state.orientation]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...indicatorProps, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: tabsGrowIndicatorClassName,
+      "data-orientation": state.orientation,
+      ref: indicatorRef,
+      style: state.orientation === "vertical" ? {
+        height: "var(--active-tab-height)",
+        top: "var(--active-tab-top)",
+        transformOrigin: "center"
+      } : {
+        left: "var(--active-tab-left)",
+        transformOrigin: "center",
+        width: "var(--active-tab-width)"
+      }
+    }
+  ) });
+}
+function Tabs({
+  children,
+  className,
+  indicatorAnimation = "slide",
+  indicatorColor,
+  style,
+  variant = "base",
+  ...props
+}) {
+  const resolvedVariant = resolveTabsVariant(variant);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    TabsStyleContext,
+    {
+      value: { indicatorAnimation, indicatorColor, variant: resolvedVariant },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_tabs.Tabs.Root,
+        {
+          className: mergeBaseUiClassName(className, "min-w-0"),
+          "data-slot": "tabs",
+          style: mergeTabsStyle(style, indicatorColor),
+          ...props,
+          children
+        }
+      )
+    }
+  );
+}
+function TabsList({ className, variant, ...props }) {
+  const styleContext = useTabsStyle();
+  const resolvedVariant = variant ?? styleContext.variant;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tabs.Tabs.List,
+    {
+      className: mergeBaseUiClassName(
+        className,
+        tabsListVariants({ variant: resolvedVariant })
+      ),
+      "data-slot": "tabs-list",
+      ...props
+    }
+  );
+}
+function TabsTab({ className, variant, ...props }) {
+  const styleContext = useTabsStyle();
+  const resolvedVariant = variant ?? styleContext.variant;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tabs.Tabs.Tab,
+    {
+      className: mergeBaseUiClassName(
+        className,
+        tabsTabVariants({ variant: resolvedVariant })
+      ),
+      "data-slot": "tabs-tab",
+      ...props
+    }
+  );
+}
+function TabsPanel({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tabs.Tabs.Panel,
+    {
+      className: mergeBaseUiClassName(
+        className,
+        "outline-none focus-visible:outline-2 focus-visible:outline-focus-ring"
+      ),
+      "data-slot": "tabs-panel",
+      ...props
+    }
+  );
+}
+function TabsIndicator({
+  className,
+  indicatorAnimation,
+  indicatorColor,
+  render,
+  style,
+  variant,
+  ...props
+}) {
+  const styleContext = useTabsStyle();
+  const resolvedVariant = variant ?? styleContext.variant;
+  const resolvedAnimation = indicatorAnimation ?? styleContext.indicatorAnimation;
+  const indicatorRender = render ?? (resolvedVariant === "underline" && resolvedAnimation === "grow" ? (indicatorProps, state) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsGrowIndicator, { indicatorProps, state }) : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_tabs.Tabs.Indicator,
+    {
+      className: mergeBaseUiClassName(
+        className,
+        tabsIndicatorVariants({
+          animation: resolvedAnimation,
+          variant: resolvedVariant
+        })
+      ),
+      "data-slot": "tabs-indicator",
+      render: indicatorRender,
+      style: mergeTabsIndicatorStyle(
+        style,
+        indicatorColor ?? styleContext.indicatorColor,
+        resolvedAnimation
+      ),
+      ...props
+    }
+  );
+}
+function NavigationTabs(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tabs, { "data-slot": "navigation-tabs", ...props });
+}
+function NavigationTabsList(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsList, { "data-slot": "navigation-tabs-list", ...props });
+}
+function NavigationTabsIndicator(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabsIndicator, { "data-slot": "navigation-tabs-indicator", ...props });
+}
+function NavigationTabsLink({
+  active,
+  children,
+  href,
+  rel,
+  render,
+  target,
+  ...props
+}) {
+  const { "aria-current": ariaCurrent, ...tabProps } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    TabsTab,
+    {
+      "aria-current": active ? "page" : ariaCurrent,
+      "data-slot": "navigation-tabs-link",
+      "data-state": active ? "path-active" : void 0,
+      nativeButton: false,
+      render: render ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_link.default,
+        {
+          href,
+          rel: target === "_blank" ? mergeRel(rel) : rel,
+          target
+        }
+      ),
+      ...tabProps,
+      children
+    }
+  );
+}
+function NavigationTabsTab(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationTabsLink, { ...props });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NavigationTabs,
+  NavigationTabsIndicator,
+  NavigationTabsLink,
+  NavigationTabsList,
+  NavigationTabsTab,
+  Tabs,
+  TabsIndicator,
+  TabsList,
+  TabsPanel,
+  TabsTab,
+  tabsIndicatorVariants,
+  tabsListVariants,
+  tabsTabVariants
+});

package/dist/kernel/components/ui/tabs.d.cts

@@ -0,0 +1,82 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
+import { VariantProps } from 'class-variance-authority';
+import { LinkProps } from 'next/link';
+import { ComponentPropsWithoutRef } from 'react';
+
+declare const tabsListVariants: (props?: ({
+    variant?: "base" | "button" | "underline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const tabsTabVariants: (props?: ({
+    variant?: "base" | "button" | "underline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const tabsIndicatorVariants: (props?: ({
+    animation?: "grow" | "slide" | null | undefined;
+    variant?: "base" | "button" | "underline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TabsVariantProps = VariantProps<typeof tabsListVariants>;
+type TabsVariant = NonNullable<TabsVariantProps["variant"]>;
+type TabsIndicatorAnimation = "grow" | "slide";
+type TabsIndicatorColor = "accent" | "current" | "foreground" | (string & {});
+type TabsProps = ComponentPropsWithoutRef<typeof Tabs$1.Root> & TabsVariantProps & {
+    /**
+     * Sets the underline indicator animation.
+     *
+     * `slide` tracks the active tab with a clipped underline.
+     * `grow` redraws the underline from the active tab center.
+     *
+     * @default "slide"
+     */
+    indicatorAnimation?: TabsIndicatorAnimation;
+    /**
+     * Sets the underline indicator color for this tabs tree.
+     *
+     * Pass a CSS color, a CSS variable name like `--accent-1`, or one of the
+     * named design tokens.
+     *
+     * @default "accent"
+     */
+    indicatorColor?: TabsIndicatorColor;
+};
+type TabsListProps = ComponentPropsWithoutRef<typeof Tabs$1.List> & TabsVariantProps;
+type TabsTabProps = ComponentPropsWithoutRef<typeof Tabs$1.Tab> & TabsVariantProps;
+type TabsPanelProps = ComponentPropsWithoutRef<typeof Tabs$1.Panel>;
+type TabsIndicatorProps = ComponentPropsWithoutRef<typeof Tabs$1.Indicator> & TabsVariantProps & {
+    /**
+     * Overrides the underline indicator animation for this indicator.
+     *
+     * @default inherited from `Tabs`
+     */
+    indicatorAnimation?: TabsIndicatorAnimation;
+    /**
+     * Overrides the underline indicator color for this indicator.
+     *
+     * @default inherited from `Tabs`
+     */
+    indicatorColor?: TabsIndicatorColor;
+};
+declare function Tabs({ children, className, indicatorAnimation, indicatorColor, style, variant, ...props }: TabsProps): react_jsx_runtime.JSX.Element;
+declare function TabsList({ className, variant, ...props }: TabsListProps): react_jsx_runtime.JSX.Element;
+declare function TabsTab({ className, variant, ...props }: TabsTabProps): react_jsx_runtime.JSX.Element;
+declare function TabsPanel({ className, ...props }: TabsPanelProps): react_jsx_runtime.JSX.Element;
+declare function TabsIndicator({ className, indicatorAnimation, indicatorColor, render, style, variant, ...props }: TabsIndicatorProps): react_jsx_runtime.JSX.Element;
+type NavigationTabsProps = TabsProps;
+type NavigationTabsListProps = TabsListProps;
+type NavigationTabsIndicatorProps = TabsIndicatorProps;
+type NavigationTabsLinkProps = Omit<TabsTabProps, "nativeButton" | "render"> & Pick<ComponentPropsWithoutRef<"a">, "rel" | "target"> & {
+    active?: boolean;
+    href: LinkProps["href"];
+    /**
+     * Override the rendered link element. Use this for router links that are not
+     * covered by Next.js `Link`.
+     */
+    render?: TabsTabProps["render"];
+};
+declare function NavigationTabs(props: NavigationTabsProps): react_jsx_runtime.JSX.Element;
+declare function NavigationTabsList(props: NavigationTabsListProps): react_jsx_runtime.JSX.Element;
+declare function NavigationTabsIndicator(props: NavigationTabsIndicatorProps): react_jsx_runtime.JSX.Element;
+declare function NavigationTabsLink({ active, children, href, rel, render, target, ...props }: NavigationTabsLinkProps): react_jsx_runtime.JSX.Element;
+declare function NavigationTabsTab(props: NavigationTabsLinkProps): react_jsx_runtime.JSX.Element;
+
+export { NavigationTabs, NavigationTabsIndicator, type NavigationTabsIndicatorProps, NavigationTabsLink, type NavigationTabsLinkProps, NavigationTabsList, type NavigationTabsListProps, type NavigationTabsProps, NavigationTabsTab, Tabs, TabsIndicator, type TabsIndicatorAnimation, type TabsIndicatorColor, type TabsIndicatorProps, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, type TabsProps, TabsTab, type TabsTabProps, type TabsVariant, type TabsVariantProps, tabsIndicatorVariants, tabsListVariants, tabsTabVariants };

package/dist/kernel/components/ui/tabs.d.ts

@@ -0,0 +1,82 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
+import { VariantProps } from 'class-variance-authority';
+import { LinkProps } from 'next/link';
+import { ComponentPropsWithoutRef } from 'react';
+
+declare const tabsListVariants: (props?: ({
+    variant?: "base" | "button" | "underline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const tabsTabVariants: (props?: ({
+    variant?: "base" | "button" | "underline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const tabsIndicatorVariants: (props?: ({
+    animation?: "grow" | "slide" | null | undefined;
+    variant?: "base" | "button" | "underline" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TabsVariantProps = VariantProps<typeof tabsListVariants>;
+type TabsVariant = NonNullable<TabsVariantProps["variant"]>;
+type TabsIndicatorAnimation = "grow" | "slide";
+type TabsIndicatorColor = "accent" | "current" | "foreground" | (string & {});
+type TabsProps = ComponentPropsWithoutRef<typeof Tabs$1.Root> & TabsVariantProps & {
+    /**
+     * Sets the underline indicator animation.
+     *
+     * `slide` tracks the active tab with a clipped underline.
+     * `grow` redraws the underline from the active tab center.
+     *
+     * @default "slide"
+     */
+    indicatorAnimation?: TabsIndicatorAnimation;
+    /**
+     * Sets the underline indicator color for this tabs tree.
+     *
+     * Pass a CSS color, a CSS variable name like `--accent-1`, or one of the
+     * named design tokens.
+     *
+     * @default "accent"
+     */
+    indicatorColor?: TabsIndicatorColor;
+};
+type TabsListProps = ComponentPropsWithoutRef<typeof Tabs$1.List> & TabsVariantProps;
+type TabsTabProps = ComponentPropsWithoutRef<typeof Tabs$1.Tab> & TabsVariantProps;
+type TabsPanelProps = ComponentPropsWithoutRef<typeof Tabs$1.Panel>;
+type TabsIndicatorProps = ComponentPropsWithoutRef<typeof Tabs$1.Indicator> & TabsVariantProps & {
+    /**
+     * Overrides the underline indicator animation for this indicator.
+     *
+     * @default inherited from `Tabs`
+     */
+    indicatorAnimation?: TabsIndicatorAnimation;
+    /**
+     * Overrides the underline indicator color for this indicator.
+     *
+     * @default inherited from `Tabs`
+     */
+    indicatorColor?: TabsIndicatorColor;
+};
+declare function Tabs({ children, className, indicatorAnimation, indicatorColor, style, variant, ...props }: TabsProps): react_jsx_runtime.JSX.Element;
+declare function TabsList({ className, variant, ...props }: TabsListProps): react_jsx_runtime.JSX.Element;
+declare function TabsTab({ className, variant, ...props }: TabsTabProps): react_jsx_runtime.JSX.Element;
+declare function TabsPanel({ className, ...props }: TabsPanelProps): react_jsx_runtime.JSX.Element;
+declare function TabsIndicator({ className, indicatorAnimation, indicatorColor, render, style, variant, ...props }: TabsIndicatorProps): react_jsx_runtime.JSX.Element;
+type NavigationTabsProps = TabsProps;
+type NavigationTabsListProps = TabsListProps;
+type NavigationTabsIndicatorProps = TabsIndicatorProps;
+type NavigationTabsLinkProps = Omit<TabsTabProps, "nativeButton" | "render"> & Pick<ComponentPropsWithoutRef<"a">, "rel" | "target"> & {
+    active?: boolean;
+    href: LinkProps["href"];
+    /**
+     * Override the rendered link element. Use this for router links that are not
+     * covered by Next.js `Link`.
+     */
+    render?: TabsTabProps["render"];
+};
+declare function NavigationTabs(props: NavigationTabsProps): react_jsx_runtime.JSX.Element;
+declare function NavigationTabsList(props: NavigationTabsListProps): react_jsx_runtime.JSX.Element;
+declare function NavigationTabsIndicator(props: NavigationTabsIndicatorProps): react_jsx_runtime.JSX.Element;
+declare function NavigationTabsLink({ active, children, href, rel, render, target, ...props }: NavigationTabsLinkProps): react_jsx_runtime.JSX.Element;
+declare function NavigationTabsTab(props: NavigationTabsLinkProps): react_jsx_runtime.JSX.Element;
+
+export { NavigationTabs, NavigationTabsIndicator, type NavigationTabsIndicatorProps, NavigationTabsLink, type NavigationTabsLinkProps, NavigationTabsList, type NavigationTabsListProps, type NavigationTabsProps, NavigationTabsTab, Tabs, TabsIndicator, type TabsIndicatorAnimation, type TabsIndicatorColor, type TabsIndicatorProps, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, type TabsProps, TabsTab, type TabsTabProps, type TabsVariant, type TabsVariantProps, tabsIndicatorVariants, tabsListVariants, tabsTabVariants };