@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/components/navigation/sidebar/index.d.ts

@@ -0,0 +1,388 @@
+import { ForwardRefExoticComponent, HTMLAttributes as HTMLAttributes3, ReactNode as ReactNode4, RefAttributes } from "react";
+import { HTMLAttributes, MutableRefObject, ReactElement } from "react";
+import { VariantProps } from "class-variance-authority";
+import { ButtonHTMLAttributes, ReactNode as ReactNode2 } from "react";
+import { ComponentType } from "react";
+interface IconComponentProps {
+	size?: number | string;
+	strokeWidth?: number | string;
+	className?: string;
+}
+type IconComponent = ComponentType<IconComponentProps>;
+import { ClassProp as ClassProp_wz9o0r } from "class-variance-authority/types";
+declare const buttonVariants: (props?: ({
+	variant?: "primary" | "secondary" | "tertiary" | "ghost" | null | undefined;
+	size?: "default" | "compact" | "icon" | "icon-compact" | null | undefined;
+	iconLeft?: boolean | null | undefined;
+	iconRight?: boolean | null | undefined;
+} & ClassProp_wz9o0r) | undefined) => string;
+type ButtonSizeCanonical = "default" | "compact" | "icon" | "icon-compact";
+/** Public size values: the canonical two-size scale plus the pre-sizes-system
+*  aliases, kept so existing call sites keep compiling. Aliases resolve onto
+*  the canonical ladder (sm → compact; md/lg → default). */
+type ButtonSize = ButtonSizeCanonical | "sm" | "md" | "lg" | "icon-sm" | "icon-lg";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Omit<VariantProps<typeof buttonVariants>, "size"> {
+	/** Visual style of the button. Defaults to `"primary"`. */
+	variant?: "primary" | "secondary" | "tertiary" | "ghost";
+	/** Step on the size ladder (36px default, 28px compact — see Sizes): `"default"` | `"compact"` | `"icon"` | `"icon-compact"`. Omitted, the button follows the surrounding SizeProvider. Legacy sm/md/lg values resolve as aliases (sm → compact; md/lg → default; icon-sm → icon-compact; icon-lg → icon). */
+	size?: ButtonSize;
+	/** Merge props onto the child element instead of rendering a `<button>` — the single React-element child becomes the rendered element (slot-style). Defaults to `false`. */
+	asChild?: boolean;
+	/** Folds the button into a circle around a spinner and disables it; the button keeps its box, so nothing around it moves. Defaults to `false`. */
+	loading?: boolean;
+	/** Icon displayed before the label. */
+	leadingIcon?: IconComponent;
+	/** Icon displayed after the label. */
+	trailingIcon?: IconComponent;
+	/** Forces the pressed/held visual — e.g. while a dropdown or popover the button opened is showing. Defaults to `false`. */
+	active?: boolean;
+	/** Disables the button. Defaults to `false`. */
+	disabled?: boolean;
+	/** The label. With `size="icon"` / `"icon-compact"`, the icon itself (give the button an `aria-label`). */
+	children?: ReactNode2;
+}
+import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn2 } from "react";
+import { RefAttributes as RefAttributes_miuf562 } from "react";
+declare const SIDEBAR_COOKIE_NAME = "sidebar_state";
+declare const SIDEBAR_COOKIE_MAX_AGE: number;
+declare const SIDEBAR_WIDTH = "16rem";
+declare const SIDEBAR_WIDTH_MOBILE = "18rem";
+/** Bare-key toggle defaults: "[" for a left sidebar, "]" for a right one.
+*  Bare (no ⌘/Ctrl) so the browser's history shortcuts stay untouched. */
+declare const SIDEBAR_KEYBOARD_SHORTCUT = "[";
+declare const SIDEBAR_KEYBOARD_SHORTCUT_RIGHT = "]";
+/** Drag-resize clamp for the built-in rail handle (px). */
+declare const SIDEBAR_MIN_WIDTH = 160;
+declare const SIDEBAR_MAX_WIDTH = 360;
+type SidebarSide = "left" | "right";
+type SidebarVariant = "sidebar" | "floating" | "inset";
+type SidebarCollapsible = "offcanvas" | "none";
+interface SidebarContextValue {
+	/** What shows: expanded while kept open or open on hover. */
+	state: "expanded" | "collapsed";
+	/** Kept open. */
+	open: boolean;
+	setOpen: (open: boolean | ((prev: boolean) => boolean)) => void;
+	openMobile: boolean;
+	setOpenMobile: React.Dispatch<React.SetStateAction<boolean>>;
+	isMobile: boolean;
+	toggleSidebar: () => void;
+	/** Live rail width — the rail's drag-resize updates it. */
+	width: string;
+	setWidth: (width: string) => void;
+	widthMobile: string;
+	mobileBreakpoint: number;
+	/** Which edge the rendered Sidebar sits on (registered by <Sidebar/>). */
+	side: SidebarSide;
+	/** Internal: <Sidebar/> reports its side so the provider can resolve the
+	*  default shortcut and the rail can mirror. */
+	registerSide: (side: SidebarSide) => void;
+	/** The resolved toggle key ("[" / "]" / custom / null when disabled). */
+	shortcut: string | null;
+	/** The collapsed sidebar opens on hover (see the provider's prop). */
+	openOnHover: boolean;
+	/** True while the collapsed sidebar is open on hover. */
+	hoverOpen: boolean;
+	setHoverOpen: React.Dispatch<React.SetStateAction<boolean>>;
+	/** Internal: the shell and the triggers register their nodes; the hover
+	*  zone is measured off them. */
+	shellRef: MutableRefObject<HTMLElement | null>;
+	registerTrigger: (node: HTMLElement) => () => void;
+	/** Internal: true while the rail is being drag-resized (disables the
+	*  width spring so the panel tracks the pointer 1:1). */
+	isResizing: boolean;
+	setIsResizing: React.Dispatch<React.SetStateAction<boolean>>;
+}
+declare function useSidebar(): SidebarContextValue;
+interface SidebarProviderProps extends HTMLAttributes<HTMLDivElement> {
+	defaultOpen?: boolean;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+	/** Persist the desktop open state to the `sidebar_state` cookie so a server
+	*  layout can read it back into `defaultOpen`. Mobile state never persists. */
+	persist?: boolean;
+	/** Bare-key toggle shortcut. Defaults to "[" for a left sidebar and "]"
+	*  for a right one; `null` disables it. */
+	shortcut?: string | null;
+	/** Viewport width (px) below which the sidebar renders as a drawer. */
+	mobileBreakpoint?: number;
+	/** While collapsed, open the sidebar when the pointer reaches its edge or
+	*  the trigger beside it, and close it a beat after the pointer leaves.
+	*  `open` then says whether it is kept open, and the trigger switches
+	*  between the two. Hovering never writes the cookie. @default false */
+	openOnHover?: boolean;
+	width?: string;
+	widthMobile?: string;
+}
+declare const SidebarProvider: ForwardRefExoticComponent_tcubfn2<SidebarProviderProps & RefAttributes_miuf562<HTMLDivElement>>;
+type SidebarTriggerProps = ButtonProps;
+/** Ghost icon button calling toggleSidebar(). The icon mirrors the
+*  sidebar's side, and its tooltip names the action with the toggle
+*  keystroke by default. With `openOnHover` it switches between open and on
+*  hover (a dashed glyph), and the hover zone reaches its far side when it
+*  sits beside the sidebar's edge. */
+declare const SidebarTrigger: ForwardRefExoticComponent_tcubfn2<ButtonProps & RefAttributes_miuf562<HTMLButtonElement>>;
+interface SidebarRailProps extends HTMLAttributes<HTMLButtonElement> {
+	/** Pin the tooltip open/closed; `undefined` leaves it on hover. */
+	tooltipOpen?: boolean;
+}
+/** The grab strip on the sidebar's inner edge, rendered by default inside
+*  the desktop shell: drag it to resize (clamped), click it to collapse, and
+*  its tooltip explains both with the toggle keystroke. Hovering it
+*  brightens the edge border. */
+declare const SidebarRail: ForwardRefExoticComponent_tcubfn2<SidebarRailProps & RefAttributes_miuf562<HTMLButtonElement>>;
+type SidebarInsetProps = HTMLAttributes<HTMLElement>;
+declare const SidebarInset: ForwardRefExoticComponent_tcubfn2<SidebarInsetProps & RefAttributes_miuf562<HTMLElement>>;
+type SidebarInputProps = React.InputHTMLAttributes<HTMLInputElement>;
+declare const SidebarInput: ForwardRefExoticComponent_tcubfn2<SidebarInputProps & RefAttributes_miuf562<HTMLInputElement>>;
+type SidebarSectionProps = HTMLAttributes<HTMLDivElement>;
+declare const SidebarHeader: ForwardRefExoticComponent_tcubfn2<SidebarSectionProps & RefAttributes_miuf562<HTMLDivElement>>;
+declare const SidebarFooter: ForwardRefExoticComponent_tcubfn2<SidebarSectionProps & RefAttributes_miuf562<HTMLDivElement>>;
+declare const SidebarSeparator: ForwardRefExoticComponent_tcubfn2<SidebarSectionProps & RefAttributes_miuf562<HTMLDivElement>>;
+interface SidebarGroupProps extends SidebarSectionProps {
+	/** Makes the group's SidebarGroupLabel a toggle that collapses everything
+	*  rendered after it — a group-level accordion. Uncontrolled by default;
+	*  pass `open`/`onOpenChange` to control it. */
+	collapsible?: boolean;
+	open?: boolean;
+	defaultOpen?: boolean;
+	onOpenChange?: (open: boolean) => void;
+}
+declare const SidebarGroup: ForwardRefExoticComponent_tcubfn2<SidebarGroupProps & RefAttributes_miuf562<HTMLDivElement>>;
+interface SidebarGroupLabelProps extends HTMLAttributes<HTMLDivElement> {
+	render?: ReactElement;
+	asChild?: boolean;
+}
+declare const SidebarGroupLabel: ForwardRefExoticComponent_tcubfn2<SidebarGroupLabelProps & RefAttributes_miuf562<HTMLDivElement>>;
+interface SidebarGroupActionProps extends HTMLAttributes<HTMLButtonElement> {
+	render?: ReactElement;
+	asChild?: boolean;
+}
+declare const SidebarGroupAction: ForwardRefExoticComponent_tcubfn2<SidebarGroupActionProps & RefAttributes_miuf562<HTMLButtonElement>>;
+/** Header action cluster: 1–3 SidebarGroupActions laid out in a row over the
+*  group label's right edge. Use instead of a lone SidebarGroupAction when a
+*  section needs several controls. */
+type SidebarGroupActionsProps = HTMLAttributes<HTMLDivElement>;
+declare const SidebarGroupActions: ForwardRefExoticComponent_tcubfn2<SidebarGroupActionsProps & RefAttributes_miuf562<HTMLDivElement>>;
+declare const SidebarGroupContent: ForwardRefExoticComponent_tcubfn2<SidebarSectionProps & RefAttributes_miuf562<HTMLDivElement>>;
+import { VariantProps as VariantProps2 } from "class-variance-authority";
+import { AnchorHTMLAttributes, ButtonHTMLAttributes as ButtonHTMLAttributes2, HTMLAttributes as HTMLAttributes2, LiHTMLAttributes, ReactElement as ReactElement2 } from "react";
+type SizeVariant = "default" | "compact";
+import { Context as Context_rri5bl2 } from "react";
+import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn3 } from "react";
+import { RefAttributes as RefAttributes_miuf563 } from "react";
+import { ClassProp as ClassProp_wz9o0r2 } from "class-variance-authority/types";
+/** The selection a `Sidebar` holds for buttons that carry a `value`. */
+interface SidebarSelectionValue {
+	value: string | undefined;
+	select: (value: string) => void;
+}
+declare const SidebarSelection: Context_rri5bl2<SidebarSelectionValue | null>;
+interface SidebarMenuProps extends HTMLAttributes2<HTMLUListElement> {
+	/** Pins the menu's rows to one step of the size ladder. Omitted, they
+	*  follow the surrounding SizeProvider. */
+	size?: SizeVariant;
+	/** Draw the traveling keyboard focus ring. Off, keyboard focus moves the
+	*  hover background only. @default true */
+	focusRing?: boolean;
+}
+declare const SidebarMenu: ForwardRefExoticComponent_tcubfn3<SidebarMenuProps & RefAttributes_miuf563<HTMLUListElement>>;
+interface SidebarMenuItemProps extends LiHTMLAttributes<HTMLLIElement> {
+	/** The row folds a `SidebarMenuSub` under it: its button toggles the sub-menu and shows a chevron. */
+	collapsible?: boolean;
+	/** Controlled open state of a collapsible row's sub-menu. */
+	open?: boolean;
+	/** Initial open state of a collapsible row's sub-menu. */
+	defaultOpen?: boolean;
+	/** Called when a collapsible row opens or closes. */
+	onOpenChange?: (open: boolean) => void;
+}
+declare const SidebarMenuItem: ForwardRefExoticComponent_tcubfn3<SidebarMenuItemProps & RefAttributes_miuf563<HTMLLIElement>>;
+type SidebarMenuSubItemProps = LiHTMLAttributes<HTMLLIElement>;
+declare const SidebarMenuSubItem: ForwardRefExoticComponent_tcubfn3<SidebarMenuSubItemProps & RefAttributes_miuf563<HTMLLIElement>>;
+declare const sidebarMenuButtonVariants: (props?: ({
+	variant?: "default" | "outline" | null | undefined;
+} & ClassProp_wz9o0r2) | undefined) => string;
+interface SidebarMenuButtonProps extends ButtonHTMLAttributes2<HTMLButtonElement>, VariantProps2<typeof sidebarMenuButtonVariants> {
+	isActive?: boolean;
+	size?: "default" | "sm" | "lg";
+	icon?: IconComponent;
+	/** Semantic thread state for status-dot navigation. Drives the dot
+	*  visuals (`active`/`unread` → filled, `idle` → ring), stamps
+	*  `data-status` on the button, appends visually-hidden "unread" text for
+	*  screen readers, and `"active"` implies `isActive`. */
+	status?: "active" | "unread" | "idle";
+	/** Visual-only dot in the icon column — the escape hatch when the
+	*  semantic `status` vocabulary doesn't fit. Overrides the dot derived
+	*  from `status`. Ignored when `icon` is set. */
+	dot?: "filled" | "ring";
+	/** Selection key: the row is active while the surrounding `Sidebar`'s
+	*  `value` matches it, and pressing it selects it. With a `value`,
+	*  `status="active"` no longer implies the active row. */
+	value?: string;
+	render?: ReactElement2;
+	asChild?: boolean;
+}
+declare const SidebarMenuButton: ForwardRefExoticComponent_tcubfn3<SidebarMenuButtonProps & RefAttributes_miuf563<HTMLButtonElement>>;
+interface SidebarMenuActionProps extends ButtonHTMLAttributes2<HTMLButtonElement> {
+	showOnHover?: boolean;
+	render?: ReactElement2;
+	asChild?: boolean;
+}
+declare const SidebarMenuAction: ForwardRefExoticComponent_tcubfn3<SidebarMenuActionProps & RefAttributes_miuf563<HTMLButtonElement>>;
+interface SidebarMenuActionsProps extends HTMLAttributes2<HTMLDivElement> {
+	/** Hide the cluster until the row is hovered or focused. */
+	showOnHover?: boolean;
+}
+/** Row-level cluster for more than one SidebarMenuAction. It owns the
+*  positioning and publishes the whole count to the row, so the button
+*  reserves the exact gutter the cluster occupies. */
+declare const SidebarMenuActions: ForwardRefExoticComponent_tcubfn3<SidebarMenuActionsProps & RefAttributes_miuf563<HTMLDivElement>>;
+type SidebarMenuBadgeProps = HTMLAttributes2<HTMLDivElement>;
+declare const SidebarMenuBadge: ForwardRefExoticComponent_tcubfn3<SidebarMenuBadgeProps & RefAttributes_miuf563<HTMLDivElement>>;
+interface SidebarMenuSkeletonProps extends HTMLAttributes2<HTMLDivElement> {
+	showIcon?: boolean;
+}
+declare const SidebarMenuSkeleton: ForwardRefExoticComponent_tcubfn3<SidebarMenuSkeletonProps & RefAttributes_miuf563<HTMLDivElement>>;
+interface SidebarMenuSubProps extends HTMLAttributes2<HTMLUListElement> {
+	/** Built-in measured-height collapse. Omitted, the sub-menu follows its
+	*  `collapsible` row's state, or stays visible without one. */
+	open?: boolean;
+}
+declare const SidebarMenuSub: ForwardRefExoticComponent_tcubfn3<SidebarMenuSubProps & RefAttributes_miuf563<HTMLUListElement>>;
+interface SidebarMenuSubButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+	isActive?: boolean;
+	size?: "sm" | "md";
+	icon?: IconComponent;
+	/** Selection key, as on `SidebarMenuButton`. Without an `href` the row renders a button. */
+	value?: string;
+	render?: ReactElement2;
+	asChild?: boolean;
+}
+declare const SidebarMenuSubButton: ForwardRefExoticComponent_tcubfn3<SidebarMenuSubButtonProps & RefAttributes_miuf563<HTMLAnchorElement>>;
+interface SidebarProps extends Omit<HTMLAttributes3<HTMLDivElement>, "defaultValue" | "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration"> {
+	/** The edge it sits on; the shortcut key and the rail mirror it. Defaults to `'left'`. */
+	side?: "left" | "right";
+	/** `'sidebar'` sits flush with an inner border, `'floating'` lifts it onto its own card one surface level up, `'inset'` makes the main region the card. Defaults to `'sidebar'`. */
+	variant?: "sidebar" | "floating" | "inset";
+	/** `'offcanvas'` collapses it away (rail, trigger, shortcut, open on hover, mobile drawer); `'none'` pins it open, with no rail or drawer — for a sidebar inside a dialog. Defaults to `'offcanvas'`. */
+	collapsible?: "offcanvas" | "none";
+	/** The `sidebar` variant's inner-edge border. Defaults to `true`. */
+	bordered?: boolean;
+	/** Render the built-in resize/collapse rail on the inner edge. Defaults to `true`. */
+	rail?: boolean;
+	/** Pin the rail's tooltip open (`true`) or closed (`false`); left out, it shows on hover. Dragging always hides it. */
+	railTooltipOpen?: boolean;
+	/** Controlled selection: the menu button or sub-button whose `value` matches is the active row. */
+	value?: string;
+	/** Initial selection, for an uncontrolled sidebar. */
+	defaultValue?: string;
+	/** Called with the `value` of the row that was pressed. */
+	onValueChange?: (value: string) => void;
+	/** Extra classes for the sidebar column (`h-full` pins it to a bounded frame). */
+	className?: string;
+	/** The sidebar's parts: `Sidebar.Header`, `Sidebar.Content`, `Sidebar.Footer`. */
+	children?: ReactNode4;
+}
+type SidebarComponent = ForwardRefExoticComponent<SidebarProps & RefAttributes<HTMLDivElement>> & {
+	Provider: typeof SidebarProvider;
+	Trigger: typeof SidebarTrigger;
+	Rail: typeof SidebarRail;
+	Inset: typeof SidebarInset;
+	Input: typeof SidebarInput;
+	Header: typeof SidebarHeader;
+	Content: typeof SidebarContent;
+	Footer: typeof SidebarFooter;
+	Separator: typeof SidebarSeparator;
+	Group: typeof SidebarGroup;
+	GroupLabel: typeof SidebarGroupLabel;
+	GroupAction: typeof SidebarGroupAction;
+	GroupActions: typeof SidebarGroupActions;
+	GroupContent: typeof SidebarGroupContent;
+	Menu: typeof SidebarMenu;
+	MenuItem: typeof SidebarMenuItem;
+	MenuButton: typeof SidebarMenuButton;
+	MenuAction: typeof SidebarMenuAction;
+	MenuActions: typeof SidebarMenuActions;
+	MenuBadge: typeof SidebarMenuBadge;
+	MenuSkeleton: typeof SidebarMenuSkeleton;
+	MenuSub: typeof SidebarMenuSub;
+	MenuSubItem: typeof SidebarMenuSubItem;
+	MenuSubButton: typeof SidebarMenuSubButton;
+};
+/**
+* A sidebar built from composable parts. Drag its edge to resize, collapse it
+* away, and on mobile it becomes a drawer.
+*
+* Everything that moves here moves in the morph style (see Morph). The
+* active row and the hover highlight are liquid: a new selection melts
+* across from the old one, and the highlight drips from row to row, into a
+* row's sub-menu too. On mobile it is a `Sheet` growing out of its edge
+* that you swipe away. The menus in the header, the footer and on each row
+* are Dropdowns, and the tooltips are Tooltips, so they grow out of their
+* triggers too.
+*
+* Wrap the page in `Sidebar.Provider`, then put the `Sidebar` and a
+* `Sidebar.Inset` (the main region) inside it. The provider holds the open
+* state (`open` / `defaultOpen` / `onOpenChange`, kept in the `sidebar_state`
+* cookie unless `persist={false}`), the `width` and `widthMobile`, the
+* `mobileBreakpoint` under which it becomes a drawer, `openOnHover` (below)
+* and the bare `shortcut` key (`[` for a left sidebar,
+* `]` for a right one; `null` turns it off). It fills the viewport; pass
+* `className="h-full min-h-0"` to fill a bounded frame instead.
+*
+* Drag the rail on the inner edge to resize the sidebar (160–360px); throw
+* it at the edge to collapse, or click it. There is no icon-only rail on
+* purpose: a collapsed sidebar opens whole on hover instead.
+*
+* With `openOnHover`, collapsing leaves the sidebar on hover: it opens, in
+* flow, while the pointer is between its edge and the far side of a
+* `Sidebar.Trigger` beside it (or a thin strip at the edge), and closes a
+* beat after the pointer leaves. `open` is then whether it is kept open: the
+* trigger switches between the two and draws a dashed glyph while on hover,
+* and the rail collapses or resizes the hover without keeping it open.
+*
+* ## Rows
+*
+* - Two levels: `Sidebar.MenuButton` rows, each folding a
+*   `Sidebar.MenuSub` of `Sidebar.MenuSubButton` rows. A
+*   `Sidebar.MenuItem collapsible` toggles its sub-menu from its own button
+*   and draws the chevron.
+* - Give a button a `value` and the sidebar's `value` / `defaultValue` picks
+*   the active row; pressing a row selects it. `isActive` still forces a row
+*   active.
+* - `icon` puts a glyph in the leading slot; `status` (`'active'`,
+*   `'unread'`, `'idle'`) a thread's dot instead.
+* - `Sidebar.MenuBadge` keeps the rightmost slot; up to three
+*   `Sidebar.MenuAction`s (in a `Sidebar.MenuActions` cluster) sit beside
+*   it, `showOnHover` so the label keeps the room at rest.
+* - The rows share one fluid hover, one keyboard roving focus (arrows,
+*   Home, End) and one focus ring across both levels.
+*
+* ## Sections
+*
+* `Sidebar.Group` with a `Sidebar.GroupLabel` is a section; `collapsible`
+* makes the label fold everything under it. `Sidebar.GroupActions` holds
+* its `Sidebar.GroupAction` buttons over the label's right edge.
+*
+* Statics:
+* - `Sidebar.Provider`, `Sidebar.Inset`, `Sidebar.Trigger` (the ghost icon
+*   button with the shortcut in its tooltip), `Sidebar.Rail`.
+* - `Sidebar.Header`, `Sidebar.Content` (the scrolling region),
+*   `Sidebar.Footer`, `Sidebar.Separator`, `Sidebar.Input`.
+* - `Sidebar.Group`, `Sidebar.GroupLabel`, `Sidebar.GroupAction`,
+*   `Sidebar.GroupActions`, `Sidebar.GroupContent`.
+* - `Sidebar.Menu`, `Sidebar.MenuItem`, `Sidebar.MenuButton`,
+*   `Sidebar.MenuAction`, `Sidebar.MenuActions`, `Sidebar.MenuBadge`,
+*   `Sidebar.MenuSkeleton`, `Sidebar.MenuSub`, `Sidebar.MenuSubItem`,
+*   `Sidebar.MenuSubButton`.
+* - `useSidebar()` (named export) reads the provider's state.
+*
+* @example {@include ./examples.mdx}
+*/
+declare const Sidebar: SidebarComponent;
+interface SidebarContentProps extends HTMLAttributes3<HTMLDivElement> {
+	viewportClassName?: string;
+}
+declare const SidebarContent: ForwardRefExoticComponent<SidebarContentProps & RefAttributes<HTMLDivElement>>;
+export { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_KEYBOARD_SHORTCUT_RIGHT, SIDEBAR_MAX_WIDTH, SIDEBAR_MIN_WIDTH, SIDEBAR_WIDTH, SIDEBAR_WIDTH_MOBILE, Sidebar, SidebarCollapsible, SidebarContent, SidebarContentProps, SidebarContextValue, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupActionProps, SidebarGroupActions, SidebarGroupContent, SidebarGroupLabel, SidebarGroupLabelProps, SidebarHeader, SidebarInput, SidebarInputProps, SidebarInset, SidebarInsetProps, SidebarMenu, SidebarMenuAction, SidebarMenuActionProps, SidebarMenuActions, SidebarMenuBadge, SidebarMenuBadgeProps, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuItem, SidebarMenuItemProps, SidebarMenuProps, SidebarMenuSkeleton, SidebarMenuSkeletonProps, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubButtonProps, SidebarMenuSubItem, SidebarMenuSubItemProps, SidebarMenuSubProps, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarRailProps, SidebarSectionProps, SidebarSelection, SidebarSelectionValue, SidebarSeparator, SidebarSide, SidebarTrigger, SidebarTriggerProps, SidebarVariant, Sidebar as default, sidebarMenuButtonVariants, useSidebar };

package/dist/components/navigation/sidebar/index.js

@@ -0,0 +1,99 @@
+import {
+  SIDEBAR_COOKIE_NAME2,
+  SIDEBAR_COOKIE_MAX_AGE2,
+  SIDEBAR_WIDTH2,
+  SIDEBAR_WIDTH_MOBILE2,
+  SIDEBAR_KEYBOARD_SHORTCUT2,
+  SIDEBAR_KEYBOARD_SHORTCUT_RIGHT2,
+  SIDEBAR_MIN_WIDTH2,
+  SIDEBAR_MAX_WIDTH2,
+  useSidebar2,
+  SidebarProvider2,
+  SidebarTrigger2,
+  SidebarRail2,
+  SidebarInset2,
+  SidebarInput2,
+  SidebarHeader2,
+  SidebarFooter2,
+  SidebarSeparator2,
+  SidebarGroup2,
+  SidebarGroupLabel2,
+  SidebarGroupAction2,
+  SidebarGroupActions2,
+  SidebarGroupContent2,
+  SidebarSelection2,
+  SidebarMenu2,
+  SidebarMenuItem2,
+  SidebarMenuSubItem2,
+  sidebarMenuButtonVariants2,
+  SidebarMenuButton2,
+  SidebarMenuAction2,
+  SidebarMenuActions2,
+  SidebarMenuBadge2,
+  SidebarMenuSkeleton2,
+  SidebarMenuSub2,
+  SidebarMenuSubButton2,
+  Sidebar2,
+  SidebarContent2,
+  sidebar_default
+} from "../../../shared/components-ca2c898n.js";
+import"../../../shared/components-c6s6b43g.js";
+import"../../../shared/components-mhd39z7x.js";
+import"../../../shared/components-ng72k97e.js";
+import"../../../shared/components-rr7a6ja9.js";
+import"../../../shared/components-zfnmn5d4.js";
+import"../../../shared/components-3ky44908.js";
+import"../../../shared/components-zrkzcayz.js";
+import"../../../shared/components-0q0sqfh4.js";
+import"../../../shared/components-kvr7f9hy.js";
+import"../../../shared/components-59efxjd9.js";
+import"../../../shared/components-chacnk61.js";
+import"../../../shared/components-hqeq3w9q.js";
+import"../../../shared/components-jjw69c4c.js";
+import"../../../shared/components-b2wyq2cq.js";
+import"../../../shared/components-n7mjr357.js";
+import"../../../shared/components-men63rwj.js";
+import"../../../shared/components-0sn7ypjw.js";
+import"../../../shared/components-hawvy2qz.js";
+import"../../../shared/components-cv16mryv.js";
+import"../../../shared/components-zx6b6yby.js";
+import"../../../shared/components-ezxhrmer.js";
+export {
+  SIDEBAR_COOKIE_MAX_AGE2 as SIDEBAR_COOKIE_MAX_AGE,
+  SIDEBAR_COOKIE_NAME2 as SIDEBAR_COOKIE_NAME,
+  SIDEBAR_KEYBOARD_SHORTCUT2 as SIDEBAR_KEYBOARD_SHORTCUT,
+  SIDEBAR_KEYBOARD_SHORTCUT_RIGHT2 as SIDEBAR_KEYBOARD_SHORTCUT_RIGHT,
+  SIDEBAR_MAX_WIDTH2 as SIDEBAR_MAX_WIDTH,
+  SIDEBAR_MIN_WIDTH2 as SIDEBAR_MIN_WIDTH,
+  SIDEBAR_WIDTH2 as SIDEBAR_WIDTH,
+  SIDEBAR_WIDTH_MOBILE2 as SIDEBAR_WIDTH_MOBILE,
+  Sidebar2 as Sidebar,
+  SidebarContent2 as SidebarContent,
+  SidebarFooter2 as SidebarFooter,
+  SidebarGroup2 as SidebarGroup,
+  SidebarGroupAction2 as SidebarGroupAction,
+  SidebarGroupActions2 as SidebarGroupActions,
+  SidebarGroupContent2 as SidebarGroupContent,
+  SidebarGroupLabel2 as SidebarGroupLabel,
+  SidebarHeader2 as SidebarHeader,
+  SidebarInput2 as SidebarInput,
+  SidebarInset2 as SidebarInset,
+  SidebarMenu2 as SidebarMenu,
+  SidebarMenuAction2 as SidebarMenuAction,
+  SidebarMenuActions2 as SidebarMenuActions,
+  SidebarMenuBadge2 as SidebarMenuBadge,
+  SidebarMenuButton2 as SidebarMenuButton,
+  SidebarMenuItem2 as SidebarMenuItem,
+  SidebarMenuSkeleton2 as SidebarMenuSkeleton,
+  SidebarMenuSub2 as SidebarMenuSub,
+  SidebarMenuSubButton2 as SidebarMenuSubButton,
+  SidebarMenuSubItem2 as SidebarMenuSubItem,
+  SidebarProvider2 as SidebarProvider,
+  SidebarRail2 as SidebarRail,
+  SidebarSelection2 as SidebarSelection,
+  SidebarSeparator2 as SidebarSeparator,
+  SidebarTrigger2 as SidebarTrigger,
+  sidebar_default as default,
+  sidebarMenuButtonVariants2 as sidebarMenuButtonVariants,
+  useSidebar2 as useSidebar
+};

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

@@ -0,0 +1,70 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { ComponentPropsWithoutRef, ForwardRefExoticComponent, ReactNode as ReactNode2, RefAttributes } from "react";
+import { ComponentType } from "react";
+interface IconComponentProps {
+	size?: number | string;
+	strokeWidth?: number | string;
+	className?: string;
+}
+type IconComponent = ComponentType<IconComponentProps>;
+type SizeVariant = "default" | "compact";
+import { TabsListProps as TabsListProps_6iqhkk } from "@base-ui/react";
+interface TabsProps extends Omit<ComponentPropsWithoutRef<typeof TabsPrimitive.Root>, "onValueChange" | "value" | "defaultValue" | "onSelect"> {
+	/** Controlled active tab value. Takes precedence over selectedIndex. */
+	value?: string;
+	/** Called when the active tab changes. */
+	onValueChange?: (value: string) => void;
+	/** Index-based controlled alternative. */
+	selectedIndex?: number;
+	/** Called with the new index when the active tab changes. */
+	onSelect?: (index: number) => void;
+	/** Default active tab for uncontrolled usage. Defaults to the first tab. */
+	defaultValue?: string;
+	/** Index-based uncontrolled alternative: the tab active on first render. Ignored when `defaultValue` is set. */
+	defaultSelectedIndex?: number;
+	/** Pins the segmented control to one step of the size ladder (default 36px outer, compact 28px). Defaults to the surrounding SizeProvider. */
+	size?: SizeVariant;
+	/** Tabs.List and Tabs.Panel children. */
+	children?: ReactNode2;
+}
+type TabsComponent = ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>> & {
+	List: typeof TabsList;
+	Item: typeof TabItem;
+	Panel: typeof TabPanel;
+};
+/**
+* Segmented control tabs with sliding active indicator, fluid hover, and
+* spring animations.
+*
+* Built on Base UI Tabs: `Tabs` owns the selection, `Tabs.List` draws the
+* segmented track with an elevated indicator that melts toward the active tab
+* like a drop (lifted three surface levels above whatever it sits on; see the
+* liquid indicators in Morph) and a translucent hover pill that drips out of
+* it, and `Tabs.Panel` shows the content of the active tab. Arrow keys
+* move and activate. Select by value — `defaultValue` uncontrolled, `value` +
+* `onValueChange` controlled — or by index with `defaultSelectedIndex` /
+* `selectedIndex` + `onSelect`.
+*
+* Statics:
+* - `Tabs.List` — the segmented track holding the tabs.
+* - `Tabs.Item` — one tab: `value`, `label`, optional `icon`.
+* - `Tabs.Panel` — content shown while the tab with the same `value` is active.
+*
+* @example {@include ./examples.mdx}
+*/
+declare const Tabs: TabsComponent;
+type TabsListProps = ComponentPropsWithoutRef<typeof TabsPrimitive.List>;
+declare const TabsList: ForwardRefExoticComponent<Omit<Omit<TabsListProps_6iqhkk, "ref"> & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
+interface TabItemProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.Tab> {
+	value: string;
+	icon?: IconComponent;
+	label: string;
+	/** @internal Auto-assigned by TabsList. */
+	_index?: number;
+}
+declare const TabItem: ForwardRefExoticComponent<TabItemProps & RefAttributes<HTMLButtonElement>>;
+interface TabPanelProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.Panel> {
+	value: string;
+}
+declare const TabPanel: ForwardRefExoticComponent<TabPanelProps & RefAttributes<HTMLDivElement>>;
+export { TabItem, TabItemProps, TabPanel, TabPanelProps, Tabs, TabsList, TabsListProps, TabsProps, Tabs as default };

package/dist/components/navigation/tabs/index.js

@@ -0,0 +1,23 @@
+import {
+  Tabs2,
+  TabsList2,
+  TabItem2,
+  TabPanel2,
+  tabs_default
+} from "../../../shared/components-tqvarbfv.js";
+import"../../../shared/components-59efxjd9.js";
+import"../../../shared/components-chacnk61.js";
+import"../../../shared/components-hqeq3w9q.js";
+import"../../../shared/components-jjw69c4c.js";
+import"../../../shared/components-men63rwj.js";
+import"../../../shared/components-0sn7ypjw.js";
+import"../../../shared/components-cv16mryv.js";
+import"../../../shared/components-zx6b6yby.js";
+import"../../../shared/components-ezxhrmer.js";
+export {
+  TabItem2 as TabItem,
+  TabPanel2 as TabPanel,
+  Tabs2 as Tabs,
+  TabsList2 as TabsList,
+  tabs_default as default
+};

package/dist/components/navigation/tabs-subtle/index.d.ts

@@ -0,0 +1,73 @@
+import { ForwardRefExoticComponent, HTMLAttributes, ReactNode as ReactNode2, RefAttributes } from "react";
+import { ComponentType } from "react";
+interface IconComponentProps {
+	size?: number | string;
+	strokeWidth?: number | string;
+	className?: string;
+}
+type IconComponent = ComponentType<IconComponentProps>;
+type SizeVariant = "default" | "compact";
+interface TabsSubtleProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
+	/** TabsSubtle.Item children, and optionally the TabsSubtle.Panel children they select. */
+	children: ReactNode2;
+	/** Index of the currently selected tab. Controlled — pair it with `onSelect`. */
+	selectedIndex?: number;
+	/** Selected tab on first render when uncontrolled. Defaults to `0`. */
+	defaultSelectedIndex?: number;
+	/** Called when a tab is selected. */
+	onSelect?: (index: number) => void;
+	/** Prefix for ARIA IDs linking tabs to panels. Defaults to a generated one when panels are nested inside. */
+	idPrefix?: string;
+	/** When true, only the selected tab shows its text label. Requires icons on tabs. Defaults to `false`. */
+	activeLabel?: boolean;
+	/** Pins the tabs to one step of the size ladder (default 36px, compact 28px). Defaults to the surrounding SizeProvider. */
+	size?: SizeVariant;
+}
+type TabsSubtleComponent = ForwardRefExoticComponent<TabsSubtleProps & RefAttributes<HTMLDivElement>> & {
+	Item: typeof TabsSubtleItem;
+	Panel: typeof TabsSubtlePanel;
+};
+/**
+* Tab navigation with smooth pill animations.
+*
+* A borderless tab strip: the selected pill melts from tab to tab like a drop
+* (the liquid indicators in Morph), a lighter hover pill previews the next one, and the active label animates to semibold
+* without shifting. With `activeLabel`, tabs collapse to their icon and the
+* selected one expands its label to a measured width. Base UI owns
+* `role="tablist"`, the roving tabindex and Arrow/Home/End navigation
+* (manual activation — arrows move, Enter or Space selects). Uncontrolled with
+* `defaultSelectedIndex`, or controlled with `selectedIndex` + `onSelect`.
+*
+* The root element is the tab list itself, so nested `TabsSubtle.Panel`
+* children are lifted out and rendered as its siblings, wired to the tabs
+* through a generated id prefix; panels rendered outside still take
+* `selectedIndex` and `idPrefix` as props.
+*
+* Statics:
+* - `TabsSubtle.Item` — one tab: `index`, `label`, optional `icon`.
+* - `TabsSubtle.Panel` — content for the tab with the same `index`.
+*
+* @example {@include ./examples.mdx}
+*/
+declare const TabsSubtle: TabsSubtleComponent;
+interface TabsSubtleItemProps extends HTMLAttributes<HTMLButtonElement> {
+	/** Icon displayed in the tab. */
+	icon?: IconComponent;
+	/** Text label for the tab. */
+	label: string;
+	/** Position index within the tab list. */
+	index: number;
+}
+declare const TabsSubtleItem: ForwardRefExoticComponent<TabsSubtleItemProps & RefAttributes<HTMLButtonElement>>;
+interface TabsSubtlePanelProps extends HTMLAttributes<HTMLDivElement> {
+	/** Index of this panel; rendered only when it matches the selected tab. */
+	index: number;
+	/** Currently selected tab index. Defaults to the enclosing TabsSubtle's selection. */
+	selectedIndex?: number;
+	/** Must match the TabsSubtle idPrefix. Defaults to the enclosing TabsSubtle's prefix. */
+	idPrefix?: string;
+	/** Panel content, only rendered when selected. */
+	children: ReactNode2;
+}
+declare const TabsSubtlePanel: ForwardRefExoticComponent<TabsSubtlePanelProps & RefAttributes<HTMLDivElement>>;
+export { TabsSubtle, TabsSubtleItem, TabsSubtleItemProps, TabsSubtlePanel, TabsSubtlePanelProps, TabsSubtleProps, TabsSubtle as default };