@forte-ui/react 1.0.0-alpha.1

package/dist/components/menubar/Menubar.d.ts

@@ -0,0 +1,104 @@
+import { Menubar as BaseMenubar } from '@base-ui/react/menubar';
+import * as React from "react";
+export type MenubarVariant = "plain" | "contained";
+export type MenubarOrientation = "horizontal" | "vertical";
+type BaseMenubarProps = React.ComponentPropsWithoutRef<typeof BaseMenubar>;
+export interface MenubarProps extends Omit<BaseMenubarProps, "className"> {
+    /**
+     * The `<Menu.Root>`s that make up the bar, and any
+     * `<Menu.Separator orientation="vertical">` between them.
+     */
+    children?: React.ReactNode;
+    /**
+     * How loud the bar itself is. `plain` draws nothing — the strip is the
+     * menus, which is what an application menu bar sitting under a title bar
+     * should look like. `contained` puts it on a panel with a hairline, for a
+     * bar that has to read as its own toolbar inside a busier page.
+     * @default "plain"
+     */
+    variant?: MenubarVariant;
+    /**
+     * Which way the bar runs. `vertical` is a sidebar of menus, and each one
+     * still opens below its trigger — pass `side="inline-end"` to the popups if
+     * they should open alongside instead.
+     *
+     * It is also what Base UI reports as `aria-orientation`, and it decides
+     * which arrow keys move between triggers.
+     * @default "horizontal"
+     */
+    orientation?: MenubarOrientation;
+    /**
+     * Whether an open menu locks page scroll and blocks pointer interaction
+     * with the rest of the document. On by default, which is what a desktop
+     * menu bar does — and what makes clicking anywhere else close the menu
+     * rather than act.
+     * @default true
+     */
+    modal?: BaseMenubarProps["modal"];
+    /**
+     * Whether every menu in the bar ignores user interaction. Base UI hands
+     * this down to each `<Menu.Trigger>`, so they all report `data-disabled`
+     * without being given the prop individually.
+     * @default false
+     */
+    disabled?: BaseMenubarProps["disabled"];
+    /**
+     * Whether the arrow keys wrap from the last trigger back to the first.
+     * @default true
+     */
+    loopFocus?: BaseMenubarProps["loopFocus"];
+    /**
+     * Replaces the rendered `<div>` with another element or component — a
+     * `<header>` for an application chrome bar, say. Base UI still applies
+     * `role="menubar"` and the keyboard behaviour to whatever comes back.
+     */
+    render?: BaseMenubarProps["render"];
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A row of menus that behave as one strip, built on Base UI's `Menubar`
+ * primitive.
+ *
+ * It has no parts of its own: the menus inside it are ordinary
+ * [`Menu`](/components/menu) components, which is Base UI's own anatomy and
+ * is what makes every Menu feature — submenus, checkable rows, shortcuts,
+ * `render` on the trigger — available here without a second set of
+ * components to learn.
+ *
+ * ```tsx
+ * <Menubar>
+ *   <Menu.Root>
+ *     <Menu.Trigger>File</Menu.Trigger>
+ *     <Menu.Popup>
+ *       <Menu.Item>New document</Menu.Item>
+ *       <Menu.Item>Open…</Menu.Item>
+ *     </Menu.Popup>
+ *   </Menu.Root>
+ *   <Menu.Root>
+ *     <Menu.Trigger>Edit</Menu.Trigger>
+ *     <Menu.Popup>
+ *       <Menu.Item>Undo</Menu.Item>
+ *     </Menu.Popup>
+ *   </Menu.Root>
+ * </Menubar>
+ * ```
+ *
+ * Being in the bar is what changes the menus' behaviour, and Base UI does all
+ * of it: `Tab` reaches the bar once and the arrow keys move between triggers
+ * from there, and once one menu is open the others take over on hover, so the
+ * whole row reads as a single control rather than a line of buttons. The
+ * library's contribution is the look — a `<Menu.Trigger>` inside a `Menubar`
+ * drops its standalone button chrome for the flat strip item the bar wants.
+ * A trigger given `render` keeps whatever it was rendered as.
+ *
+ * Every visual decision is a `--forte-menubar-*` custom property declared on
+ * this element, including the ones the triggers read, so a bar can be
+ * re-skinned from plain CSS or targeted with Tailwind arbitrary variants
+ * (`data-[variant=contained]:...`) without wrapping.
+ */
+export declare const Menubar: React.ForwardRefExoticComponent<MenubarProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/menubar/Menubar.js

@@ -0,0 +1,3 @@
+"use client";
+import { t as e } from "../../Menubar-Dax027Db.js";
+export { e as Menubar };

package/dist/components/menubar/index.d.ts

@@ -0,0 +1,2 @@
+export { Menubar } from './Menubar';
+export type { MenubarProps, MenubarVariant, MenubarOrientation, } from './Menubar';

package/dist/components/menubar/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../Menubar-Dax027Db.js";
+export { e as Menubar };

package/dist/components/nav-list/NavList.d.ts

@@ -0,0 +1,290 @@
+import { Collapsible as BaseCollapsible } from '@base-ui/react/collapsible';
+import { useRender } from '@base-ui/react/use-render';
+import * as React from "react";
+export type NavListSize = "sm" | "md" | "lg";
+export type NavListMarker = "fill" | "rail";
+type BaseGroupProps = React.ComponentPropsWithoutRef<typeof BaseCollapsible.Root>;
+type BaseGroupTriggerProps = React.ComponentPropsWithoutRef<typeof BaseCollapsible.Trigger>;
+type BaseGroupPanelProps = React.ComponentPropsWithoutRef<typeof BaseCollapsible.Panel>;
+export interface NavListRootProps extends Omit<React.ComponentPropsWithoutRef<"nav">, "className"> {
+    /**
+     * Row height and text size for every link and group trigger inside.
+     * @default "md"
+     */
+    size?: NavListSize;
+    /**
+     * How the current item is marked. `"fill"` is a tinted row. `"rail"` adds a
+     * short accent bar along the row's inline-start edge on top of the fill —
+     * the classic sidebar treatment, and a second, non-colour-only cue.
+     * @default "fill"
+     */
+    marker?: NavListMarker;
+    /**
+     * Replaces the rendered `<nav>` with another element or component — pass
+     * `render={<div />}` when the list sits inside a `<nav>` landmark you
+     * already own, so the page does not grow a second one.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The list container. Renders a `<nav>` landmark.
+ *
+ * ```tsx
+ * <NavList.Root aria-label="Documentation">
+ *   <NavList.Section>
+ *     <NavList.SectionLabel>Guides</NavList.SectionLabel>
+ *     <NavList.List>
+ *       <NavList.Item>
+ *         <NavList.Link href="/intro" active>Introduction</NavList.Link>
+ *       </NavList.Item>
+ *     </NavList.List>
+ *   </NavList.Section>
+ * </NavList.Root>
+ * ```
+ *
+ * Give it an `aria-label` (or `aria-labelledby`): a page routinely carries
+ * more than one navigation landmark — a header, a sidebar, a table of
+ * contents — and an unnamed one cannot be told from the others in a screen
+ * reader's landmark list.
+ *
+ * Which item is current is the consumer's call, made per `Link` through its
+ * `active` prop. The component deliberately does not read a router: matching
+ * an href against a location is the app's business, and every framework does
+ * it differently.
+ */
+export declare const NavListRoot: React.ForwardRefExoticComponent<NavListRootProps & React.RefAttributes<HTMLElement>>;
+export interface NavListSectionProps extends Omit<React.ComponentPropsWithoutRef<"div">, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * One titled block of the list: a `SectionLabel` and a `List`. Renders a
+ * `<div role="group">`, named by its label once one is present — which is
+ * what lets a screen reader report "Components, group" instead of a run of
+ * links with a stray line of text above them.
+ *
+ * Purely structural: sections do not collapse. For a block the reader can
+ * fold away, use `NavList.Group` inside a `List` instead.
+ */
+export declare const NavListSection: React.ForwardRefExoticComponent<NavListSectionProps & React.RefAttributes<HTMLDivElement>>;
+export interface NavListSectionLabelProps extends Omit<React.ComponentPropsWithoutRef<"div">, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The section's title. Renders a `<div>` — deliberately not a heading:
+ * sidebars sit beside a document with its own outline, and a run of `<h2>`s
+ * in the chrome would interleave with the page's real headings in a screen
+ * reader's outline view. The enclosing `Section` picks the text up as its
+ * accessible name instead, which conveys the same structure in the right
+ * channel.
+ */
+export declare const NavListSectionLabel: React.ForwardRefExoticComponent<NavListSectionLabelProps & React.RefAttributes<HTMLDivElement>>;
+export interface NavListListProps extends Omit<React.ComponentPropsWithoutRef<"ul">, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The `<ul>` holding the rows. A real list on purpose: screen readers
+ * announce "list, N items", which is the count a reader wants before deciding
+ * whether to walk it.
+ *
+ * Nest one inside a `GroupPanel` — or inside an `Item`, after its `Link` —
+ * and it indents itself and draws the guide line. Depth is expressed by
+ * nesting alone; there is no `level` prop to keep in sync with the markup.
+ */
+export declare const NavListList: React.ForwardRefExoticComponent<NavListListProps & React.RefAttributes<HTMLUListElement>>;
+export interface NavListItemProps extends Omit<React.ComponentPropsWithoutRef<"li">, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * One row's `<li>`. Structural — the interactive element is the `Link` (or
+ * `Group`) inside it. It exists as its own part rather than being fused into
+ * `Link` so a row can hold more than a link: a link plus a nested `List` is
+ * how a subtree with a navigable parent is written.
+ */
+export declare const NavListItem: React.ForwardRefExoticComponent<NavListItemProps & React.RefAttributes<HTMLLIElement>>;
+export interface NavListLinkProps extends Omit<React.ComponentPropsWithoutRef<"a">, "className"> {
+    /**
+     * Whether this row is where the reader currently is. Publishes
+     * `data-active` for styling and `aria-current="page"`, so the cue is never
+     * colour alone. For a same-page target — a table of contents — pass your
+     * own `aria-current="location"` alongside it; an explicit value wins over
+     * the derived one.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Disables the row. The default `<a>` drops its `href` (an anchor without
+     * one is unfocusable and inert), `aria-disabled` is set, and clicks are
+     * swallowed — which is also what covers an element supplied through
+     * `render`, whose own `href` this component cannot remove.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Replaces the rendered `<a>` with another element or component —
+     * `render={<Link href="/pricing" />}` is how a framework's router link goes
+     * in without losing the row's styling and states.
+     */
+    render?: useRender.RenderProp;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The navigable row. Renders an `<a>`.
+ *
+ * Children lay out on a flex row, so an icon in front of the text and a
+ * `NavList.Badge` after it need no wrapper — the badge floats itself to the
+ * inline-end edge.
+ */
+export declare const NavListLink: React.ForwardRefExoticComponent<NavListLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export interface NavListGroupProps extends Omit<BaseGroupProps, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A collapsible subtree: a `GroupTrigger` and a `GroupPanel` holding a nested
+ * `List`. Built on Base UI's `Collapsible`, so it takes the same state props —
+ * `defaultOpen` uncontrolled, `open` plus `onOpenChange` controlled, and
+ * `disabled`.
+ *
+ * Renders an `<li>` (via `render`, which you can still override), so it sits
+ * in a `List` as a sibling of ordinary `Item`s.
+ */
+export declare const NavListGroup: React.ForwardRefExoticComponent<NavListGroupProps & React.RefAttributes<HTMLLIElement>>;
+export interface NavListGroupTriggerProps extends Omit<BaseGroupTriggerProps, "className"> {
+    /**
+     * Whether the reader is currently somewhere INSIDE this group — the cue
+     * that keeps the current location visible while the group is closed over
+     * it. Styling only (`data-active`): no `aria-current`, because the current
+     * page is a link, and this is the button that reveals it.
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * The marker at the inline-end edge. Defaults to a chevron that rotates as
+     * the panel opens. Pass your own node — it goes in the same rotating,
+     * `aria-hidden` box — or `null` to drop it.
+     * @default a chevron
+     */
+    icon?: React.ReactNode;
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The row that opens and closes its group. Renders a `<button>` styled like a
+ * `Link`, carrying `aria-expanded` and an `aria-controls` pointing at the
+ * panel.
+ *
+ * Keep the text as the accessible name — `aria-expanded` already announces
+ * open and closed, so the label needs no "show/hide" of its own.
+ */
+export declare const NavListGroupTrigger: React.ForwardRefExoticComponent<NavListGroupTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+export interface NavListGroupPanelProps extends Omit<BaseGroupPanelProps, "className"> {
+    /**
+     * Keep the panel in the DOM while closed. On by default — the opposite of
+     * Base UI's — because these are NAVIGATION links: unmounted, they are
+     * invisible to crawlers and to find-in-page, and a closed group is exactly
+     * where the page a crawler wants usually is. `hidden` keeps the closed
+     * copy out of the accessibility tree and the tab order either way.
+     * @default true
+     */
+    keepMounted?: BaseGroupPanelProps["keepMounted"];
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * The collapsible region under a `GroupTrigger` — put a `NavList.List` in it.
+ * Base UI measures it and publishes `--collapsible-panel-height`, which the
+ * stylesheet transitions.
+ */
+export declare const NavListGroupPanel: React.ForwardRefExoticComponent<NavListGroupPanelProps & React.RefAttributes<HTMLDivElement>>;
+export interface NavListBadgeProps extends Omit<React.ComponentPropsWithoutRef<"span">, "className"> {
+    /**
+     * Additional class name(s). Applied after the internal styles so consumer
+     * utilities (e.g. Tailwind) win without needing `!important`.
+     */
+    className?: string;
+}
+/**
+ * A small pill at the row's inline-end edge — "New", "Beta", a count. Drop it
+ * inside a `Link` or `GroupTrigger` after the text; `margin-inline-start:
+ * auto` walks it to the far edge on its own.
+ *
+ * It reads in the row's flow, so a screen reader announces "Changelog, New" —
+ * no extra wiring. Drawn from the secondary ramp rather than the accent, so
+ * it stays legible sitting on the active row's accent fill.
+ */
+export declare const NavListBadge: React.ForwardRefExoticComponent<NavListBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * A sidebar-style list of navigation links: titled sections, collapsible
+ * groups, nested levels with a guide line, and a controlled notion of "where
+ * you are".
+ *
+ * ```tsx
+ * <NavList.Root aria-label="Documentation">
+ *   <NavList.Section>
+ *     <NavList.SectionLabel>Components</NavList.SectionLabel>
+ *     <NavList.List>
+ *       <NavList.Item>
+ *         <NavList.Link href="/button" active>Button</NavList.Link>
+ *       </NavList.Item>
+ *       <NavList.Group defaultOpen>
+ *         <NavList.GroupTrigger>Forms</NavList.GroupTrigger>
+ *         <NavList.GroupPanel>
+ *           <NavList.List>…</NavList.List>
+ *         </NavList.GroupPanel>
+ *       </NavList.Group>
+ *     </NavList.List>
+ *   </NavList.Section>
+ * </NavList.Root>
+ * ```
+ *
+ * Styling is driven entirely by `data-*` attributes and `--forte-nav-list-*`
+ * custom properties, so it can be re-skinned from plain CSS or targeted with
+ * Tailwind arbitrary variants (`data-[active]:...`) without wrapping.
+ */
+export declare const NavList: {
+    Root: React.ForwardRefExoticComponent<NavListRootProps & React.RefAttributes<HTMLElement>>;
+    Section: React.ForwardRefExoticComponent<NavListSectionProps & React.RefAttributes<HTMLDivElement>>;
+    SectionLabel: React.ForwardRefExoticComponent<NavListSectionLabelProps & React.RefAttributes<HTMLDivElement>>;
+    List: React.ForwardRefExoticComponent<NavListListProps & React.RefAttributes<HTMLUListElement>>;
+    Item: React.ForwardRefExoticComponent<NavListItemProps & React.RefAttributes<HTMLLIElement>>;
+    Link: React.ForwardRefExoticComponent<NavListLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+    Group: React.ForwardRefExoticComponent<NavListGroupProps & React.RefAttributes<HTMLLIElement>>;
+    GroupTrigger: React.ForwardRefExoticComponent<NavListGroupTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    GroupPanel: React.ForwardRefExoticComponent<NavListGroupPanelProps & React.RefAttributes<HTMLDivElement>>;
+    Badge: React.ForwardRefExoticComponent<NavListBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+};
+export {};

package/dist/components/nav-list/NavList.js

@@ -0,0 +1,3 @@
+"use client";
+import { a as e, c as t, d as n, i as r, l as i, n as a, o, r as s, s as c, t as l, u } from "../../NavList-DGvcIoJm.js";
+export { l as NavList, a as NavListBadge, s as NavListGroup, r as NavListGroupPanel, e as NavListGroupTrigger, o as NavListItem, c as NavListLink, t as NavListList, i as NavListRoot, u as NavListSection, n as NavListSectionLabel };

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

@@ -0,0 +1,2 @@
+export { NavList } from './NavList';
+export type { NavListSize, NavListMarker, NavListRootProps, NavListSectionProps, NavListSectionLabelProps, NavListListProps, NavListItemProps, NavListLinkProps, NavListGroupProps, NavListGroupTriggerProps, NavListGroupPanelProps, NavListBadgeProps, } from './NavList';

package/dist/components/nav-list/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../NavList-DGvcIoJm.js";
+export { e as NavList };