@tea-ui/core 0.1.0

package/dist/navigation/index.d.ts

@@ -0,0 +1,114 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { Accordion as Accordion$1, Collapsible as Collapsible$1, NavigationMenu as NavigationMenu$1, Tabs as Tabs$1, Toolbar as Toolbar$1 } from 'radix-ui';
+export { useControllableState } from '../internal/use-controllable-state.js';
+
+/**
+ * Tabs are for **peer views of the same subject**. If the things being switched
+ * between are not peers, they are navigation, and they belong in a sidebar —
+ * promoting peers into the top level is how information architecture collapses.
+ *
+ * The active indicator is a weight change as well as a colour change. A tab
+ * that is only distinguished by hue is unreadable to a user with a colour
+ * vision deficiency and invisible in a screenshot printed in greyscale.
+ */
+interface TabsProps extends Omit<React.ComponentPropsWithoutRef<typeof Tabs$1.Root>, "children"> {
+    children: React.ReactNode;
+}
+declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<Tabs$1.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Tabs$1.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<Tabs$1.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface CollapsibleProps extends Omit<React.ComponentPropsWithoutRef<typeof Collapsible$1.Root>, "defaultValue"> {
+    defaultOpen?: boolean | undefined;
+}
+/** Progressive disclosure. The trigger owns `aria-expanded` and `aria-controls`. */
+declare const Collapsible: React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<HTMLDivElement>>;
+declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<Collapsible$1.CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const CollapsibleContent: React.ForwardRefExoticComponent<Omit<Collapsible$1.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface AccordionProps extends Omit<React.ComponentProps<"div">, "children" | "color" | "dir"> {
+    type?: "single" | "multiple" | undefined;
+    /** Single type only: allow closing the open item. */
+    collapsible?: boolean | undefined;
+    defaultValue?: string | string[] | undefined;
+    value?: string | string[] | undefined;
+    onValueChange?: ((value: never) => void) | undefined;
+    children: React.ReactNode;
+}
+/**
+ * An accordion is a list of questions with answers that belong together. If the
+ * sections are unrelated, they are `<Collapsible>`s, not one accordion — a
+ * single-value accordion forces the user to close one answer to read the next,
+ * which only makes sense when the answers are alternatives.
+ */
+declare const Accordion: React.ForwardRefExoticComponent<Omit<AccordionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.ForwardRefExoticComponent<Omit<Accordion$1.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<Accordion$1.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React.ForwardRefExoticComponent<Omit<Accordion$1.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * A breadcrumb shows *where you are*; a back button shows *where you were*.
+ * Below three levels of hierarchy you need both, and neither alone.
+ */
+declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+interface BreadcrumbLinkProps extends React.ComponentProps<"a"> {
+    asChild?: boolean | undefined;
+}
+declare const BreadcrumbLink: React.ForwardRefExoticComponent<Omit<BreadcrumbLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+/** The current page. `aria-current` is what makes it announceable, not the style. */
+declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+/** Decorative by definition — the `<ol>` already conveys the hierarchy. */
+declare const BreadcrumbSeparator: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
+declare const paginationLinkVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+interface PaginationProps extends Omit<React.ComponentProps<"nav">, "onChange"> {
+    /** Current page, 1-based. */
+    page: number;
+    /** How many pages exist in total. */
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    /** Optional element describing what is being paginated. */
+    itemLabel?: string | undefined;
+    className?: string | undefined;
+}
+declare function Pagination({ page, pageCount, onPageChange, itemLabel, className, ...props }: PaginationProps): React.ReactElement;
+/**
+ * The first focusable element on every page. Neither source product had one.
+ *
+ * It is visually hidden until focused, and it is genuinely useful rather than
+ * ceremonial: a keyboard user arriving on a page with a 20-item sidebar would
+ * otherwise have to tab through all of it on every single page.
+ */
+interface SkipLinkProps extends React.ComponentProps<"a"> {
+    /** The id of the main region to jump to. */
+    targetId: string;
+}
+declare function SkipLink({ targetId, className, children, ...props }: SkipLinkProps): React.ReactElement;
+interface StepperProps extends Omit<React.ComponentProps<"ol">, "children"> {
+    /** Zero-based index of the current step. */
+    current: number;
+    children: React.ReactNode;
+}
+declare const Stepper: React.ForwardRefExoticComponent<Omit<StepperProps, "ref"> & React.RefAttributes<HTMLOListElement>>;
+interface StepProps extends React.ComponentProps<"li"> {
+    /** Index of this step. */
+    index: number;
+    /** Index of the current step. */
+    current: number;
+    /** Show a state label such as "Abgeschlossen". */
+    stateLabel?: string | undefined;
+}
+declare function Step({ index, current, stateLabel, className, children, ...props }: StepProps): React.ReactElement;
+declare function StepIndicator({ className, ...props }: React.ComponentProps<"span">): React.ReactElement;
+declare function StepSeparator({ className, ...props }: React.ComponentProps<"span">): React.ReactElement;
+declare const Toolbar: React.ForwardRefExoticComponent<Omit<Toolbar$1.ToolbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const NavigationMenu: React.ForwardRefExoticComponent<Omit<NavigationMenu$1.NavigationMenuProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const NavigationMenuList: React.ForwardRefExoticComponent<Omit<NavigationMenu$1.NavigationMenuListProps & React.RefAttributes<HTMLUListElement>, "ref"> & React.RefAttributes<HTMLUListElement>>;
+declare const NavigationMenuItem: React.ForwardRefExoticComponent<NavigationMenu$1.NavigationMenuItemProps & React.RefAttributes<HTMLLIElement>>;
+declare const NavigationMenuTrigger: React.ForwardRefExoticComponent<Omit<NavigationMenu$1.NavigationMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const NavigationMenuContent: React.ForwardRefExoticComponent<Omit<NavigationMenu$1.NavigationMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const NavigationMenuLink: React.ForwardRefExoticComponent<Omit<NavigationMenu$1.NavigationMenuLinkProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & {
+    asChild?: boolean | undefined;
+} & React.RefAttributes<HTMLAnchorElement>>;
+
+export { Accordion, AccordionContent, AccordionItem, type AccordionProps, AccordionTrigger, Breadcrumb, BreadcrumbItem, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbPage, BreadcrumbSeparator, Collapsible, CollapsibleContent, type CollapsibleProps, CollapsibleTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, Pagination, type PaginationProps, SkipLink, type SkipLinkProps, Step, StepIndicator, type StepProps, StepSeparator, Stepper, type StepperProps, Tabs, TabsContent, TabsList, type TabsProps, TabsTrigger, Toolbar, ToolbarButton, paginationLinkVariants };

package/dist/navigation/index.js

@@ -0,0 +1,523 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import {
+  Accordion as AccordionPrimitive,
+  Collapsible as CollapsiblePrimitive,
+  NavigationMenu as NavigationMenuPrimitive,
+  Tabs as TabsPrimitive,
+  Toolbar as ToolbarPrimitive
+} from "radix-ui";
+import { ChevronDown, ChevronsLeft, ChevronsRight } from "@tea-ui/icons";
+import { cn, cva } from "@tea-ui/utils";
+import { COPY } from "@tea-ui/ux-standards";
+import { dataSlot, useControllableState } from "../internal/index.js";
+import { Button } from "../inputs/button.js";
+const Tabs = React.forwardRef(function Tabs2({ children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(TabsPrimitive.Root, { ref, ...props, ...dataSlot("tabs"), children });
+});
+const TabsList = React.forwardRef(function TabsList2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.List,
+    {
+      ref,
+      className: cn(
+        "inline-flex items-center gap-0 border-b border-line",
+        "data-[orientation=vertical]:flex-col data-[orientation=vertical]:border-b-0 data-[orientation=vertical]:border-e",
+        className
+      ),
+      ...dataSlot("tabs", "list"),
+      ...props
+    }
+  );
+});
+const TabsTrigger = React.forwardRef(function TabsTrigger2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      ref,
+      className: cn(
+        "relative control-h border-0 bg-transparent px-3 text-ui text-fg-muted",
+        "border-b-2 border-transparent transition-colors duration-fast ease-standard",
+        "hover:text-fg",
+        "data-[state=active]:border-primary data-[state=active]:text-primary data-[state=active]:font-medium",
+        "data-[orientation=vertical]:w-full data-[orientation=vertical]:border-e-0 data-[orientation=vertical]:border-s-2 data-[orientation=vertical]:text-start",
+        className
+      ),
+      "data-tea-touch": true,
+      ...dataSlot("tabs", "trigger"),
+      ...props
+    }
+  );
+});
+const TabsContent = React.forwardRef(function TabsContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      ref,
+      className: cn("focus-visible:outline-none", className),
+      tabIndex: 0,
+      ...dataSlot("tabs", "content"),
+      ...props
+    }
+  );
+});
+const Collapsible = React.forwardRef(function Collapsible2({ defaultOpen = false, ...props }, ref) {
+  return /* @__PURE__ */ jsx(CollapsiblePrimitive.Root, { ref, defaultOpen, ...dataSlot("collapsible"), ...props });
+});
+const CollapsibleTrigger = React.forwardRef(function CollapsibleTrigger2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    CollapsiblePrimitive.CollapsibleTrigger,
+    {
+      ref,
+      className: cn(
+        "group flex w-full items-center justify-between gap-2 text-start text-ui font-medium text-fg",
+        className
+      ),
+      "data-tea-touch": true,
+      ...dataSlot("collapsible", "trigger"),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            size: 16,
+            "aria-hidden": "true",
+            className: "shrink-0 text-fg-muted transition-transform duration-fast group-data-[state=open]:rotate-180"
+          }
+        )
+      ]
+    }
+  );
+});
+const CollapsibleContent = React.forwardRef(function CollapsibleContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    CollapsiblePrimitive.CollapsibleContent,
+    {
+      ref,
+      className: cn(
+        "overflow-hidden",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top",
+        className
+      ),
+      ...dataSlot("collapsible", "content"),
+      ...props
+    }
+  );
+});
+const AccordionRootPrimitive = AccordionPrimitive.Root;
+const Accordion = React.forwardRef(function Accordion2({ type = "single", collapsible = true, defaultValue, value, onValueChange, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    AccordionRootPrimitive,
+    {
+      ref,
+      type,
+      collapsible: type === "single" ? collapsible : void 0,
+      defaultValue,
+      value,
+      onValueChange,
+      className: cn("border-t border-line", className),
+      ...dataSlot("accordion"),
+      ...props,
+      children
+    }
+  );
+});
+const AccordionItem = React.forwardRef(function AccordionItem2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Item, { ref, className: cn("border-b border-line", className), ...dataSlot("accordion", "item"), ...props });
+});
+const AccordionTrigger = React.forwardRef(function AccordionTrigger2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Trigger,
+    {
+      ref,
+      className: cn(
+        "group flex flex-1 items-center justify-between gap-3 py-3 text-start text-ui font-medium text-fg",
+        className
+      ),
+      "data-tea-touch": true,
+      ...dataSlot("accordion", "trigger"),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            size: 16,
+            "aria-hidden": "true",
+            className: "shrink-0 text-fg-muted transition-transform duration-fast group-data-[state=open]:rotate-180"
+          }
+        )
+      ]
+    }
+  ) });
+});
+const AccordionContent = React.forwardRef(function AccordionContent2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "overflow-hidden text-ui text-fg-muted",
+        "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-top",
+        className
+      ),
+      ...dataSlot("accordion", "content"),
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "pb-3 pe-8", children })
+    }
+  );
+});
+const Breadcrumb = React.forwardRef(function Breadcrumb2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx("nav", { ref, "aria-label": COPY.navigation.breadcrumb, className: cn(className), ...dataSlot("breadcrumb"), ...props, children: /* @__PURE__ */ jsx("ol", { className: "flex flex-wrap items-center gap-1 text-micro text-fg-muted", children }) });
+});
+const BreadcrumbItem = React.forwardRef(
+  function BreadcrumbItem2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("li", { ref, className: cn("flex items-center gap-1", className), ...dataSlot("breadcrumb", "item"), ...props });
+  }
+);
+const BreadcrumbLink = React.forwardRef(
+  function BreadcrumbLink2({ className, asChild = false, children, ...props }, ref) {
+    const Component = asChild ? Slot.Root : "a";
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        className: cn("transition-colors hover:text-fg", className),
+        ...dataSlot("breadcrumb", "link"),
+        ...props,
+        children
+      }
+    );
+  }
+);
+const BreadcrumbPage = React.forwardRef(
+  function BreadcrumbPage2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-current": "page",
+        className: cn("font-medium text-fg", className),
+        ...dataSlot("breadcrumb", "page"),
+        ...props
+      }
+    );
+  }
+);
+const BreadcrumbSeparator = React.forwardRef(
+  function BreadcrumbSeparator2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx("li", { ref, "aria-hidden": "true", className: cn("text-fg-subtle", className), ...dataSlot("breadcrumb", "separator"), ...props, children: children ?? "/" });
+  }
+);
+const paginationLinkVariants = cva(
+  "inline-flex min-w-8 items-center justify-center gap-1 border border-line px-2 text-ui text-fg-muted transition-colors hover:border-line-strong hover:text-fg aria-[current=page]:border-primary aria-[current=page]:text-primary"
+);
+function Pagination({
+  page,
+  pageCount,
+  onPageChange,
+  itemLabel,
+  className,
+  ...props
+}) {
+  const go = (next) => onPageChange(Math.min(pageCount, Math.max(1, next)));
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": COPY.a11y.page,
+      className: cn("flex flex-wrap items-center justify-between gap-3", className),
+      ...dataSlot("pagination"),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(PaginationSummary, { page, pageCount, itemLabel }),
+        /* @__PURE__ */ jsxs("ul", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(PaginationPrevious, { page, onPageChange: go }) }),
+          pageWindow(page, pageCount).map(
+            (entry, index) => entry === "ellipsis" ? /* @__PURE__ */ jsx("li", { "aria-hidden": "true", className: "px-1 text-fg-subtle", children: "\u2026" }, `gap-${index}`) : /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(PaginationLink, { page: entry, onPageChange: go }) }, entry)
+          ),
+          /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(PaginationNext, { page, pageCount, onPageChange: go }) })
+        ] })
+      ]
+    }
+  );
+}
+function PaginationSummary({
+  page,
+  pageCount,
+  itemLabel
+}) {
+  return /* @__PURE__ */ jsxs("p", { className: "text-micro text-fg-muted", children: [
+    COPY.a11y.page,
+    " ",
+    page,
+    " ",
+    COPY.a11y.of,
+    " ",
+    pageCount,
+    itemLabel ? ` \xB7 ${itemLabel}` : null
+  ] });
+}
+function PaginationLink({ page, onPageChange }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => onPageChange(page),
+      "aria-current": "page",
+      "aria-label": `${COPY.a11y.page} ${page}`,
+      className: paginationLinkVariants(),
+      "data-tea-touch": true,
+      children: page
+    }
+  );
+}
+function PaginationPrevious({
+  page,
+  onPageChange
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => onPageChange(page - 1),
+      disabled: page <= 1,
+      "aria-label": COPY.actions.back,
+      className: cn(paginationLinkVariants(), "disabled:pointer-events-none disabled:opacity-50"),
+      "data-tea-touch": true,
+      children: /* @__PURE__ */ jsx(ChevronsLeft, { size: 14, "aria-hidden": "true" })
+    }
+  );
+}
+function PaginationNext({
+  page,
+  pageCount,
+  onPageChange
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => onPageChange(page + 1),
+      disabled: page >= pageCount,
+      "aria-label": COPY.actions.next,
+      className: cn(paginationLinkVariants(), "disabled:pointer-events-none disabled:opacity-50"),
+      "data-tea-touch": true,
+      children: /* @__PURE__ */ jsx(ChevronsRight, { size: 14, "aria-hidden": "true" })
+    }
+  );
+}
+function pageWindow(page, pageCount) {
+  if (pageCount <= 7) return Array.from({ length: pageCount }, (_, index) => index + 1);
+  const entries = [1];
+  const start = Math.max(2, page - 1);
+  const end = Math.min(pageCount - 1, page + 1);
+  if (start > 2) entries.push("ellipsis");
+  for (let index = start; index <= end; index += 1) entries.push(index);
+  if (end < pageCount - 1) entries.push("ellipsis");
+  entries.push(pageCount);
+  return entries;
+}
+function SkipLink({ targetId, className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: `#${targetId}`,
+      className: cn(
+        "sr-only z-max focus:not-sr-only",
+        "focus:fixed focus:start-3 focus:top-3 focus:border focus:border-primary focus:bg-primary focus:px-3 focus:py-2 focus:text-ui focus:font-medium focus:text-primary-fg",
+        className
+      ),
+      ...dataSlot("skip-link"),
+      ...props,
+      children: children ?? COPY.navigation.skipToContent
+    }
+  );
+}
+const Stepper = React.forwardRef(function Stepper2({ current, children, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "ol",
+    {
+      ref,
+      className: cn("flex w-full items-center gap-2", className),
+      "data-current-step": current,
+      ...dataSlot("stepper"),
+      ...props,
+      children
+    }
+  );
+});
+function Step({ index, current, stateLabel, className, children, ...props }) {
+  const state = index < current ? "complete" : index === current ? "current" : "upcoming";
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "aria-current": state === "current" ? "step" : void 0,
+      "data-state": state,
+      className: cn("flex min-w-0 flex-1 items-center gap-2", className),
+      ...dataSlot("stepper", "step"),
+      ...props,
+      children: [
+        children,
+        stateLabel ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: stateLabel }) : null
+      ]
+    }
+  );
+}
+function StepIndicator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "flex size-6 shrink-0 items-center justify-center border border-line text-micro font-semibold text-fg-muted",
+        "group-data-[state=complete]:border-positive group-data-[state=complete]:bg-positive-subtle group-data-[state=complete]:text-positive",
+        "group-data-[state=current]:border-primary group-data-[state=current]:text-primary",
+        className
+      ),
+      ...dataSlot("stepper", "indicator"),
+      ...props
+    }
+  );
+}
+function StepSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("h-px flex-1 bg-line", className), ...dataSlot("stepper", "separator"), ...props });
+}
+const Toolbar = React.forwardRef(function Toolbar2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.Root,
+    {
+      ref,
+      className: cn("flex items-center gap-2 border-b border-line px-3 py-2", className),
+      "data-tea-touch": true,
+      ...dataSlot("toolbar"),
+      ...props
+    }
+  );
+});
+const ToolbarButton = React.forwardRef(
+  function ToolbarButton2({ className, type = "button", ...props }, ref) {
+    return /* @__PURE__ */ jsx(Button, { ref, type, variant: "ghost", size: "sm", className, ...props });
+  }
+);
+const NavigationMenu = React.forwardRef(function NavigationMenu2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    NavigationMenuPrimitive.Root,
+    {
+      ref,
+      className: cn("relative flex items-center", className),
+      ...dataSlot("navigation-menu"),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(NavigationMenuViewport, {})
+      ]
+    }
+  );
+});
+const NavigationMenuList = React.forwardRef(function NavigationMenuList2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenuPrimitive.List,
+    {
+      ref,
+      className: cn("flex items-center gap-1", className),
+      ...dataSlot("navigation-menu", "list"),
+      ...props
+    }
+  );
+});
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
+const NavigationMenuTrigger = React.forwardRef(function NavigationMenuTrigger2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    NavigationMenuPrimitive.Trigger,
+    {
+      ref,
+      className: cn("group control-h px-3 text-ui text-fg-muted hover:text-fg", className),
+      "data-tea-touch": true,
+      ...dataSlot("navigation-menu", "trigger"),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronDown, { size: 14, "aria-hidden": "true", className: "ms-1 transition-transform group-data-[state=open]:rotate-180" })
+      ]
+    }
+  );
+});
+const NavigationMenuContent = React.forwardRef(function NavigationMenuContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenuPrimitive.Content,
+    {
+      ref,
+      className: cn("p-2", className),
+      ...dataSlot("navigation-menu", "content"),
+      ...props
+    }
+  );
+});
+const NavigationMenuLink = React.forwardRef(function NavigationMenuLink2({ className, asChild = false, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    NavigationMenuPrimitive.Link,
+    {
+      ref,
+      asChild,
+      className: cn(
+        "block select-none rounded-none p-2 text-ui text-fg no-underline outline-none transition-colors",
+        "data-[active]:bg-accent-subtle data-[active]:text-fg",
+        "focus-visible:bg-accent-subtle",
+        className
+      ),
+      ...dataSlot("navigation-menu", "link"),
+      ...props
+    }
+  );
+});
+function NavigationMenuViewport() {
+  return /* @__PURE__ */ jsx(
+    NavigationMenuPrimitive.Viewport,
+    {
+      className: cn(
+        "absolute start-0 top-full z-dropdown mt-1 w-[min(40rem,90vw)] origin-top border border-line bg-surface-2 p-2 shadow-overlay",
+        "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
+      ),
+      ...dataSlot("navigation-menu", "viewport")
+    }
+  );
+}
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  Pagination,
+  SkipLink,
+  Step,
+  StepIndicator,
+  StepSeparator,
+  Stepper,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Toolbar,
+  ToolbarButton,
+  paginationLinkVariants,
+  useControllableState
+};
+//# sourceMappingURL=index.js.map