@imfusion/web-ui 0.11.1-dev.33.gefbd75be → 0.11.1-dev.35.g0028b4dd

package/CHANGELOG.md

@@ -4,6 +4,12 @@
 
 ### Added
 
+- `TabNav` is a new row of links to routes with a bar under the current one, in the underline look of `Tabs`. `TabNav.Item`
+  renders an `<a>`, takes a router link as `render`, and sets `aria-current="page"` from `current`.
+  [TabNav](src/components/tab-nav/tab-nav.stories.tsx#InAProjectHeader) — Nikolaus Brunner <brunner@imfusion.com>
+- `Tabs.Root` takes `appearance`: `"boxed"` (the default, unchanged) or `"underline"`, with mono labels, a 2px bar under the
+  active tab on a hairline rule, and an unframed panel. Underline is horizontal only; a vertical Tabs stays boxed.
+  [Tabs](src/components/tabs/tabs.stories.tsx#Underline) — Nikolaus Brunner <brunner@imfusion.com>
 - `Textarea` is a new multi-line input adapted from Base UI, with the `Input` variants and sizes, a drag-to-resize corner, and
   validation state from `Field`. [Textarea](src/components/textarea/textarea.mdx)
   ([WEBSDK-244](https://imfusion.atlassian.net/browse/WEBSDK-244)) — Nikolaus Brunner <brunner@imfusion.com>

package/dist/components/tab-nav/index.d.ts

@@ -0,0 +1,2 @@
+export * as TabNav from './tab-nav';
+export { tabNavMeta } from './tab-nav.meta';

package/dist/components/tab-nav/tab-nav.d.ts

@@ -0,0 +1,26 @@
+import { useRender } from '@base-ui/react/use-render';
+interface RootProps extends React.ComponentProps<"nav"> {
+    /** Names the navigation for screen readers, such as "Project". */
+    "aria-label": string;
+}
+/**
+ * TabNav.Root — a `<nav>` of links that draws the hairline under its items. Give it an `aria-label` that names the
+ * navigation, such as "Project".
+ * Not based on any upstream component.
+ */
+export declare function Root(props: RootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Root {
+    var displayName: string;
+}
+type ItemProps = useRender.ComponentProps<"a"> & {
+    /** Marks the item as the page the user is on: sets `aria-current="page"` and `data-current`, and draws the bar. */
+    current?: boolean;
+};
+/**
+ * TabNav.Item — a link in the row. Renders an `<a>`; pass a router link as `render` to navigate without a page load.
+ */
+export declare function Item({ current, render, ...props }: ItemProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export declare namespace Item {
+    var displayName: string;
+}
+export {};

package/dist/components/tab-nav/tab-nav.meta.d.ts

@@ -0,0 +1,2 @@
+import { ComponentMeta } from '../../types/meta';
+export declare const tabNavMeta: ComponentMeta;

package/dist/components/tabs/tabs-underline.cva.d.ts

@@ -0,0 +1,6 @@
+/**
+ * The underline look shared by `Tabs` (appearance `"underline"`) and `TabNav`, which renders it on links. Keeping it here
+ * avoids cross-component imports between the two.
+ */
+export declare const tabsUnderlineRule: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const tabsUnderlineItem: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

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

@@ -2,18 +2,27 @@ import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
 import { VariantProps } from 'class-variance-authority';
 declare const tabsList: (props?: ({
     fill?: boolean | null | undefined;
+    appearance?: "underline" | "boxed" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type TabsAppearance = "boxed" | "underline";
+interface RootProps extends React.ComponentProps<typeof TabsPrimitive.Root> {
+    /**
+     * `"boxed"` outlines the active tab in a box that fuses into a framed panel. `"underline"` marks it with a bar under
+     * its label on a hairline rule, with an unframed panel. Underline is horizontal only: a vertical Tabs stays boxed.
+     */
+    appearance?: TabsAppearance;
+}
 /**
  * Tabs.Root — container that manages the active tab value and orientation context.
  *
  * @see https://base-ui.com/react/components/tabs
  * @llm https://base-ui.com/react/components/tabs.md
  */
-export declare function Root(props: React.ComponentProps<typeof TabsPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export declare function Root({ appearance, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Root {
     var displayName: string;
 }
-interface ListProps extends React.ComponentProps<typeof TabsPrimitive.List>, VariantProps<typeof tabsList> {
+interface ListProps extends React.ComponentProps<typeof TabsPrimitive.List>, Pick<VariantProps<typeof tabsList>, "fill"> {
     /**
      * Give every tab an equal share of the list's length (equal width when
      * horizontal). When vertical, this only takes effect if the list is stretched
@@ -32,7 +41,7 @@ export declare namespace Tab {
     var displayName: string;
 }
 /**
- * Tabs.Indicator — the bordered box marking the active tab, positioned via
+ * Tabs.Indicator — the bordered box (boxed) or bar (underline) marking the active tab, positioned via
  * the `--active-tab-*` CSS custom properties Base UI writes onto it. Render
  * once per Tabs.List, after the Tabs.Tab list.
  */
@@ -43,7 +52,7 @@ export declare namespace Indicator {
 /**
  * Tabs.PanelViewport — the shared frame Tabs.Panel elements render inside.
  * No Base UI equivalent exists; it's surfaced as a named part since its
- * hairline border is what Tabs.Indicator visually fuses into.
+ * hairline border is what the boxed Tabs.Indicator visually fuses into. The underline appearance draws no frame.
  */
 export declare function PanelViewport(props: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export declare namespace PanelViewport {

package/dist/index.d.ts

@@ -41,6 +41,7 @@ export { NavigationMenu, navigationMenuMeta } from './components/navigation-menu
 export { Skeleton, skeletonMeta } from './components/skeleton';
 export { Spinner, spinnerMeta } from './components/spinner';
 export { Table, tableMeta } from './components/table';
+export { TabNav, tabNavMeta } from './components/tab-nav';
 export { Tabs, tabsMeta } from './components/tabs';
 export { Toast, toastMeta } from './components/toast';
 export { Tooltip, tooltipMeta } from './components/tooltip';