neatkit 0.7.0 → 0.9.0

package/dist/components/Popover/Popover.d.ts

@@ -32,10 +32,8 @@ export type PopoverProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "de
     onPointerDownOutside?: (event: PointerEvent) => void;
     /** The controlled open state of the Popover. */
     open?: boolean;
-    /** The preferred placement before viewport collision handling. */
+    /** The preferred placement before collision handling. */
     placement?: PopoverPlacement;
-    /** The optional element receiving the Popover portal. */
-    portalContainer?: Element | null;
     /** Whether focus returns to the trigger after non-outside closure. */
     restoreFocus?: boolean;
     /** Whether keyboard and programmatic focus remain inside the Popover. */
@@ -85,10 +83,8 @@ declare const Popover: import("react").ForwardRefExoticComponent<Omit<HTMLAttrib
     onPointerDownOutside?: (event: PointerEvent) => void;
     /** The controlled open state of the Popover. */
     open?: boolean;
-    /** The preferred placement before viewport collision handling. */
+    /** The preferred placement before collision handling. */
     placement?: PopoverPlacement;
-    /** The optional element receiving the Popover portal. */
-    portalContainer?: Element | null;
     /** Whether focus returns to the trigger after non-outside closure. */
     restoreFocus?: boolean;
     /** Whether keyboard and programmatic focus remain inside the Popover. */

package/dist/components/Portal/Portal.d.ts

@@ -3,17 +3,20 @@ import { type ReactNode } from "react";
 type PortalProps = {
     /** The content rendered outside its React layout parent. */
     children: ReactNode;
-    /** The optional element receiving the portal content. */
-    container?: Element | null;
-    /** The optional element whose inherited Neatkit variables are preserved. */
-    inheritFrom?: HTMLElement | null;
 };
 /**
- * Renders content into a browser-owned container after hydration.
+ * Renders content into its boundary after hydration.
  *
- * @param props - The portal destination, design source, and content.
+ * Portalling inside the boundary keeps design tokens inheriting through the
+ * cascade, so the portalled subtree needs no copied design context. The
+ * destination is never configurable, and the boundary is required rather
+ * than preferred: overlay coordinates are measured as offsets from it, so a
+ * portal that quietly fell back to the document would position its content
+ * wrongly instead of reporting the mistake.
  *
- * @returns A server-safe source marker and the mounted browser portal.
+ * @param props - The portalled content.
+ *
+ * @returns The mounted browser portal.
  */
-export default function Portal(props: PortalProps): import("react").JSX.Element;
+export default function Portal(props: PortalProps): import("react").ReactPortal | null;
 export {};

package/dist/components/Portal/hooks/useDismissableLayer.d.ts

@@ -9,6 +9,8 @@ type DismissableLayerOptions = {
     dismissOnPointerDownOutside?: boolean;
     /** The boundaries considered part of the layer. */
     boundaries: readonly RefObject<HTMLElement | null>[];
+    /** The boundary owning the layer's overlay stack. */
+    boundary: Element | null;
     /** The stable overlay stack identifier for the layer. */
     layerId: symbol;
     /** The document owning the layer and its event listeners. */

package/dist/components/Portal/hooks/useFloatingPosition.d.ts

@@ -1,12 +1,13 @@
 import { type FloatingPlacement, type FloatingPosition } from "../utils/floating-position";
 /**
- * Keeps anchored floating content aligned and inside its viewport.
+ * Keeps anchored floating content aligned and inside its boundary.
  *
  * @param active - Whether positioning observers should remain active.
  * @param placement - The preferred floating placement.
  * @param trigger - The element anchoring the floating panel.
  * @param panel - The mounted floating panel.
+ * @param boundary - The boundary the panel is positioned within.
  *
- * @returns The current fixed-position coordinates and resolved placement.
+ * @returns The boundary-relative coordinates and resolved placement.
  */
-export declare function useFloatingPosition(active: boolean, placement: FloatingPlacement, trigger: HTMLElement | null, panel: HTMLElement | null): FloatingPosition | null;
+export declare function useFloatingPosition(active: boolean, placement: FloatingPlacement, trigger: HTMLElement | null, panel: HTMLElement | null, boundary: HTMLElement | null): FloatingPosition | null;

package/dist/components/Portal/hooks/useFocusTrap.d.ts

@@ -6,6 +6,8 @@ type FocusTrapOptions = {
     active: boolean;
     /** Whether focus moves inside the trap when it activates. */
     autoFocus?: boolean;
+    /** The boundary owning the trapped layer's overlay stack. */
+    boundary: Element | null;
     /** The element containing focus while the trap is active. */
     container: HTMLElement | null;
     /** The optional preferred element focused when the trap opens. */

package/dist/components/Portal/hooks/useScrollLock.d.ts

@@ -1,7 +1,13 @@
 /**
- * Locks document scrolling while compensating for the removed scrollbar.
+ * Locks the scroller enclosing a boundary while compensating its scrollbar.
+ *
+ * The lock follows the boundary like every other overlay concern. A boundary
+ * occupying the page locks the page, and a boundary embedded in its own
+ * scroller locks only that scroller, so an overlay never freezes a host
+ * interface it does not own. `lockScroll` disables it entirely.
  *
  * @param active - Whether the lock should currently apply.
- * @param ownerDocument - The document whose body scrolling is controlled.
+ * @param ownerDocument - The document containing the boundary.
+ * @param boundary - The boundary owning the overlay requesting the lock.
  */
-export declare function useScrollLock(active: boolean, ownerDocument: Document | null): void;
+export declare function useScrollLock(active: boolean, ownerDocument: Document | null, boundary: Element | null): void;

package/dist/components/Portal/utils/boundary-focus.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Determines whether an overlay outside this layer's boundary owns focus.
+ *
+ * @param ownerDocument - The document owning the focused element.
+ * @param boundary - The boundary owning the inspected layer.
+ *
+ * @returns Whether a competing overlay currently owns focus.
+ */
+export declare function isFocusInsideAnotherOverlay(ownerDocument: Document, boundary: Element): boolean;
+/**
+ * Determines whether an overlay outside this layer's boundary owns a press.
+ *
+ * Pointer ownership cannot be resolved through the focused element, because a
+ * capture-phase pointer press runs before focus moves to the pressed target.
+ * A layer reading focus here would still see its own content and claim a
+ * press that belongs to a competing boundary, so the pressed node decides.
+ *
+ * @param target - The node receiving the pointer press.
+ * @param boundary - The boundary owning the inspected layer.
+ *
+ * @returns Whether a competing overlay currently owns the press.
+ */
+export declare function isPointerInsideAnotherOverlay(target: Node | null, boundary: Element): boolean;

package/dist/components/Portal/utils/floating-position.d.ts

@@ -4,23 +4,57 @@ export type FloatingPlacement = "bottom" | "left" | "right" | "top";
 export type FloatingPosition = {
     /** The cross-axis offset at which the arrow points to the trigger. */
     arrowOffset: number;
-    /** The resolved placement after viewport collision handling. */
+    /** The resolved placement after boundary collision handling. */
     placement: FloatingPlacement;
-    /** The viewport-relative horizontal position. */
+    /** The boundary-relative horizontal position. */
     left: number;
-    /** The viewport-relative vertical position. */
+    /** The boundary-relative vertical position. */
     top: number;
 };
 /**
- * Calculates collision-aware floating coordinates within a viewport.
+ * A type representing the edges a rectangle is fitted against.
+ *
+ * Only edges are ever read, and describing them structurally keeps the
+ * geometry independent of any realm: a `DOMRect` from any document
+ * satisfies it, and a fitted result needs no constructor to build.
+ */
+export type EdgeBounds = {
+    /** The distance from the coordinate space's top to the lower edge. */
+    bottom: number;
+    /** The distance from the coordinate space's left to the leading edge. */
+    left: number;
+    /** The distance from the coordinate space's left to the trailing edge. */
+    right: number;
+    /** The distance from the coordinate space's top to the upper edge. */
+    top: number;
+};
+/**
+ * Narrows a boundary to the part of it the viewer can actually see.
+ *
+ * A boundary taller or wider than the viewport still reports its full size,
+ * so fitting against it alone can place a panel in boundary space that is
+ * scrolled out of view. Collision detection therefore runs against the
+ * visible intersection, while coordinates stay relative to the boundary.
+ *
+ * @param boundaryBounds - The boundary bounds in viewport coordinates.
+ * @param viewportWidth - The visible viewport width in CSS pixels.
+ * @param viewportHeight - The visible viewport height in CSS pixels.
+ *
+ * @returns The visible region, or the boundary when nothing intersects.
+ */
+export declare function getVisibleBounds(boundaryBounds: EdgeBounds, viewportWidth: number, viewportHeight: number): EdgeBounds;
+/**
+ * Calculates collision-aware floating coordinates within a boundary.
+ *
+ * Every rectangle is expressed in the same coordinate space, so the returned
+ * coordinates share that space and callers convert them once.
  *
  * @param placement - The preferred floating placement.
- * @param spacing - The minimum distance from triggers and viewport edges.
- * @param triggerBounds - The viewport bounds of the anchoring trigger.
+ * @param spacing - The minimum distance from triggers and boundary edges.
+ * @param triggerBounds - The bounds of the anchoring trigger.
  * @param panelBounds - The measured bounds of the floating panel.
- * @param viewportWidth - The available viewport width.
- * @param viewportHeight - The available viewport height.
+ * @param boundaryBounds - The bounds the panel must remain inside.
  *
  * @returns The fitted coordinates and resolved floating placement.
  */
-export declare function calculateFloatingPosition(placement: FloatingPlacement, spacing: number, triggerBounds: DOMRect, panelBounds: DOMRect, viewportWidth: number, viewportHeight: number): FloatingPosition;
+export declare function calculateFloatingPosition(placement: FloatingPlacement, spacing: number, triggerBounds: DOMRect, panelBounds: DOMRect, boundaryBounds: EdgeBounds): FloatingPosition;

package/dist/components/Portal/utils/overlay-stack.d.ts

@@ -6,23 +6,35 @@ export type OverlayLayer = {
     zIndex: number;
 };
 /**
- * Registers an active layer in its owning document's overlay stack.
+ * Registers an active layer in its owning boundary's overlay stack.
  *
  * @param active - Whether the layer currently participates in the stack.
- * @param ownerDocument - The document owning the layer.
+ * @param boundaryElement - The boundary owning the layer.
  *
  * @returns The stable layer identifier and its current z-index.
  */
-export declare function useOverlayLayer(active: boolean, ownerDocument: Document | null): OverlayLayer;
+export declare function useOverlayLayer(active: boolean, boundaryElement: Element | null): OverlayLayer;
 /**
- * Determines whether a layer is uppermost in its document.
+ * Determines whether a layer is uppermost in its boundary.
  *
- * @param ownerDocument - The document owning the overlay layer.
+ * @param boundaryElement - The boundary owning the overlay layer.
  * @param layerIdentifier - The layer identifier being inspected.
  *
  * @returns Whether the layer is the last active stack entry.
  */
-export declare function isTopmostOverlayLayer(ownerDocument: Document, layerIdentifier: symbol): boolean;
+export declare function isTopmostOverlayLayer(boundaryElement: Element, layerIdentifier: symbol): boolean;
+/**
+ * Determines whether a boundary currently owns any active overlay layer.
+ *
+ * The lookup deliberately avoids creating an entry, because this answers a
+ * question about boundaries the caller does not own, and creating one for
+ * every boundary inspected would populate the map with empty stacks.
+ *
+ * @param boundaryElement - The boundary whose overlay stack is inspected.
+ *
+ * @returns Whether the boundary holds at least one registered layer.
+ */
+export declare function hasActiveOverlayLayer(boundaryElement: Element): boolean;
 /**
  * Registers whether an overlay layer currently owns focus containment.
  *
@@ -30,16 +42,16 @@ export declare function isTopmostOverlayLayer(ownerDocument: Document, layerIden
  * a non-trapping child layer cannot suspend its enclosing focus trap.
  *
  * @param active - Whether the layer currently contains focus.
- * @param ownerDocument - The document owning the layer.
+ * @param boundaryElement - The boundary owning the layer.
  * @param layerIdentifier - The layer identifier registered in the stack.
  */
-export declare function useOverlayFocusLayer(active: boolean, ownerDocument: Document | null, layerIdentifier: symbol): void;
+export declare function useOverlayFocusLayer(active: boolean, boundaryElement: Element | null, layerIdentifier: symbol): void;
 /**
  * Determines whether a layer is the uppermost focus-containing overlay.
  *
- * @param ownerDocument - The document owning the overlay layer.
+ * @param boundaryElement - The boundary owning the overlay layer.
  * @param layerIdentifier - The layer identifier being inspected.
  *
  * @returns Whether no later visual layer also owns focus containment.
  */
-export declare function isTopmostFocusLayer(ownerDocument: Document, layerIdentifier: symbol): boolean;
+export declare function isTopmostFocusLayer(boundaryElement: Element, layerIdentifier: symbol): boolean;

package/dist/components/Portal/utils/scroll-container.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Resolves the nearest scroller an overlay should lock within its Boundary.
+ *
+ * An overlay is positioned within its boundary rather than the viewport, so
+ * it travels with the content behind it, and locking nothing is correct when
+ * no scroller lies in between.
+ *
+ * @param boundary - The boundary owning the overlay requesting the lock.
+ * @param ownerDocument - The document containing the boundary.
+ *
+ * @returns The enclosing scroller, or null when the overlay locks nothing.
+ */
+export declare function resolveScrollContainer(boundary: Element | null, ownerDocument: Document): Element | Document | null;

package/dist/components/Radio/Radio.d.ts

@@ -1,4 +1,5 @@
 import { type CSSProperties, type InputHTMLAttributes, type ReactNode } from "react";
+import RadioGroup from "./components/RadioGroup";
 import "./styles/radio.css";
 /** A type representing properties for the Radio component. */
 export type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, "checked" | "children" | "className" | "defaultChecked" | "name" | "onChange" | "required" | "style" | "type" | "value"> & {
@@ -19,7 +20,7 @@ export type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, "checked" |
  *
  * @returns The rendered Radio option.
  */
-declare const Radio: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "className" | "style" | "children" | "onChange" | "name" | "type" | "value" | "required" | "checked"> & {
+declare const RadioRoot: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "defaultChecked" | "className" | "style" | "children" | "onChange" | "name" | "type" | "value" | "required" | "checked"> & {
     /** The clickable and accessible label for the Radio option. */
     children: ReactNode;
     /** The additional class name applied to the Radio label root. */
@@ -29,4 +30,11 @@ declare const Radio: import("react").ForwardRefExoticComponent<Omit<InputHTMLAtt
     /** The string submitted when the Radio option is selected. */
     value: string;
 } & import("react").RefAttributes<HTMLInputElement>>;
+/** A type representing the complete compound Radio component. */
+type RadioComponent = typeof RadioRoot & {
+    /** A labelled set of mutually exclusive Radio options. */
+    Group: typeof RadioGroup;
+};
+/** The compound Radio component and its grouping form. */
+declare const Radio: RadioComponent;
 export default Radio;

package/dist/components/{RadioGroup → Radio/components}/RadioGroup.d.ts

@@ -1,8 +1,8 @@
 import { type ChangeEventHandler, type HTMLAttributes, type ReactNode } from "react";
-import "./styles/radio-group.css";
+import "../styles/radio-group.css";
 /** A type representing the visual direction of Radio options. */
 export type RadioGroupOrientation = "horizontal" | "vertical";
-/** A type representing properties for the RadioGroup component. */
+/** A type representing properties for the Radio.Group component. */
 export type RadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "children" | "defaultValue" | "onChange"> & {
     /** The Radio options belonging to the group. */
     children: ReactNode;
@@ -26,6 +26,13 @@ export type RadioGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "children" |
 /**
  * Renders a native radio group with shared form and validation state.
  *
+ * @note Radio children are deliberately not validated, unlike Checkbox.Group.
+ * The browser groups radios by their shared `name` and enforces `required`
+ * across that group, so this component never reads its children and content
+ * may be wrapped or arranged freely. Checkbox.Group has no such native
+ * primitive and must inspect each option during render, which is why it
+ * rejects wrappers. The divergence follows the platform, not a preference.
+ *
  * @param props - The properties that configure the RadioGroup.
  * @param forwardedReference - The reference assigned to the group root.
  *

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

@@ -1,2 +1,3 @@
 export { default } from "./Radio";
 export type { RadioProps } from "./Radio";
+export type { RadioGroupOrientation, RadioGroupProps, } from "./components/RadioGroup";

package/dist/components/Select/Select.d.ts

@@ -62,8 +62,6 @@ export type CustomSelectProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "c
     options: readonly SelectOption[];
     /** The guidance displayed when no option is selected. */
     placeholder?: string;
-    /** The optional element receiving the listbox portal. */
-    portalContainer?: Element | null;
     /** The inline styles applied to the composite Select root. */
     style?: CSSProperties;
     /** Whether the custom Select communicates that a value is required. */

package/dist/components/Select/utils/listbox-position.d.ts

@@ -0,0 +1,28 @@
+import type { EdgeBounds } from "../../Portal/utils/floating-position";
+/** A type representing the fitted position of a Select listbox. */
+export type ListboxPosition = {
+    /** The boundary-relative horizontal position. */
+    left: number;
+    /** The maximum height available in the selected vertical direction. */
+    maxHeight: number;
+    /** The minimum width inherited from the trigger. */
+    minWidth: number;
+    /** The boundary-relative vertical position. */
+    top: number;
+};
+/**
+ * Calculates the listbox position and height fitted inside a boundary.
+ *
+ * Every rectangle is expressed in the same coordinate space, so the returned
+ * coordinates share that space and callers convert them once.
+ *
+ * A boundary shorter than the readable minimum is deliberately exceeded,
+ * because a listbox collapsed to a few pixels shows nothing at all.
+ *
+ * @param triggerBounds - The bounds of the trigger anchoring the listbox.
+ * @param listboxBounds - The measured listbox bounds, when it is mounted.
+ * @param boundaryBounds - The bounds the listbox must remain inside.
+ *
+ * @returns The fitted listbox coordinates and size constraints.
+ */
+export declare function calculateListboxPosition(triggerBounds: DOMRect, listboxBounds: DOMRect | undefined, boundaryBounds: EdgeBounds): ListboxPosition;

package/dist/components/Sidebar/Sidebar.d.ts

@@ -0,0 +1,113 @@
+import { type HTMLAttributes, type ReactNode, type RefObject } from "react";
+import SidebarFooter from "./components/SidebarFooter";
+import SidebarGroup from "./components/SidebarGroup";
+import SidebarHeader from "./components/SidebarHeader";
+import SidebarItem from "./components/SidebarItem";
+import { type SidebarSide, type SidebarStyle } from "./components/SidebarPanel";
+import SidebarTrigger from "./components/SidebarTrigger";
+import SidebarUser from "./components/SidebarUser";
+import { type SidebarOpenChangeReason, type SidebarVariant } from "./utils/state";
+import "./styles/sidebar.css";
+export type { SidebarFooterProps } from "./components/SidebarFooter";
+export type { SidebarGroupProps } from "./components/SidebarGroup";
+export type { SidebarHeaderProps } from "./components/SidebarHeader";
+export type { SidebarItemProps } from "./components/SidebarItem";
+export type { SidebarSide } from "./components/SidebarPanel";
+export type { SidebarTriggerProps } from "./components/SidebarTrigger";
+export type { SidebarUserAction, SidebarUserProps, } from "./components/SidebarUser";
+export type { SidebarPresentation } from "./utils/presentation";
+export type { SidebarOpenChangeReason, SidebarVariant } from "./utils/state";
+/** A type representing the complete compound Sidebar component. */
+type SidebarComponent = typeof SidebarRoot & {
+    /** The region pinned to the bottom of the Sidebar. */
+    Footer: typeof SidebarFooter;
+    /** A related set of Sidebar items forming one navigation region. */
+    Group: typeof SidebarGroup;
+    /** The region rendered at the top of the Sidebar. */
+    Header: typeof SidebarHeader;
+    /** One navigation destination or action inside a group. */
+    Item: typeof SidebarItem;
+    /** The control disclosing an overlay Sidebar. */
+    Trigger: typeof SidebarTrigger;
+    /** A person's avatar, name, and optional trailing control. */
+    User: typeof SidebarUser;
+};
+/** A type representing properties for the Sidebar component. */
+export type SidebarProps = Omit<HTMLAttributes<HTMLElement>, "children" | "id" | "role" | "style" | "tabIndex"> & {
+    /** The regions and groups composing the Sidebar. */
+    children?: ReactNode;
+    /** Whether an uncontrolled overlay Sidebar is initially open. */
+    defaultOpen?: boolean;
+    /** The preferred element focused when the overlay Sidebar opens. */
+    initialFocusReference?: RefObject<HTMLElement | null>;
+    /** The distance the inline Sidebar is pinned below its scroll container. */
+    top?: string;
+    /** Whether document scrolling is locked while the overlay is open. */
+    lockScroll?: boolean;
+    /** The controlled open state of the overlay Sidebar. */
+    open?: boolean;
+    /** Whether focus returns to the Trigger after the overlay closes. */
+    restoreFocus?: boolean;
+    /** The edge the overlay Sidebar occupies. */
+    side?: SidebarSide;
+    /** The styles applied to the Sidebar panel. */
+    style?: SidebarStyle;
+    /** The responsive behavior selecting the Sidebar presentation. */
+    variant?: SidebarVariant;
+    /** The width of the Sidebar as a valid CSS length. */
+    width?: string;
+    /** The callback invoked when an interaction requests a changed state. */
+    onOpenChange?: (open: boolean, reason: SidebarOpenChangeReason) => void;
+};
+/**
+ * Renders a navigation panel beside content or as a disclosed overlay.
+ *
+ * An overlay Sidebar is always dismissable through Escape and an outside
+ * press, because it traps focus behind a modal dialog that renders no close
+ * control of its own.
+ *
+ * The panel advertises its own state for styling, and those attributes are
+ * part of the public contract: `data-variant` reports the presentation as
+ * `inline` or `overlay`, `data-side` the edge it occupies, and `data-state`
+ * whether a disclosed panel is `open` or `closing`. Select them beside a
+ * consumer class to style one presentation without a prop for each.
+ *
+ * The Sidebar publishes its state to the surrounding boundary, so a
+ * Trigger placed anywhere inside that boundary can disclose it. The boundary
+ * is also what the responsive presentation measures, so a narrow Boundary
+ * presents an overlay even on a wide display.
+ *
+ * @param props - The properties that configure the Sidebar.
+ * @param forwardedReference - The reference assigned to the panel element.
+ *
+ * @returns The inline, disclosed, or unmounted Sidebar panel.
+ */
+declare const SidebarRoot: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLElement>, "id" | "style" | "tabIndex" | "role" | "children"> & {
+    /** The regions and groups composing the Sidebar. */
+    children?: ReactNode;
+    /** Whether an uncontrolled overlay Sidebar is initially open. */
+    defaultOpen?: boolean;
+    /** The preferred element focused when the overlay Sidebar opens. */
+    initialFocusReference?: RefObject<HTMLElement | null>;
+    /** The distance the inline Sidebar is pinned below its scroll container. */
+    top?: string;
+    /** Whether document scrolling is locked while the overlay is open. */
+    lockScroll?: boolean;
+    /** The controlled open state of the overlay Sidebar. */
+    open?: boolean;
+    /** Whether focus returns to the Trigger after the overlay closes. */
+    restoreFocus?: boolean;
+    /** The edge the overlay Sidebar occupies. */
+    side?: SidebarSide;
+    /** The styles applied to the Sidebar panel. */
+    style?: SidebarStyle;
+    /** The responsive behavior selecting the Sidebar presentation. */
+    variant?: SidebarVariant;
+    /** The width of the Sidebar as a valid CSS length. */
+    width?: string;
+    /** The callback invoked when an interaction requests a changed state. */
+    onOpenChange?: (open: boolean, reason: SidebarOpenChangeReason) => void;
+} & import("react").RefAttributes<HTMLElement>>;
+/** The compound Sidebar component and its composable regions. */
+declare const Sidebar: SidebarComponent;
+export default Sidebar;

package/dist/components/Sidebar/components/SidebarFooter.d.ts

@@ -0,0 +1,24 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type SidebarPresentation } from "../utils/presentation";
+/** A type representing properties for the Sidebar.Footer component. */
+export type SidebarFooterProps = HTMLAttributes<HTMLDivElement> & {
+    /** The content pinned to the bottom of the Sidebar. */
+    children?: ReactNode;
+    /** The presentations the footer is rendered in. */
+    presentation?: SidebarPresentation;
+};
+/**
+ * Renders the region pinned to the bottom of a Sidebar.
+ *
+ * @param props - The native properties that configure the footer.
+ * @param forwardedReference - The reference assigned to the footer element.
+ *
+ * @returns The rendered Sidebar footer.
+ */
+declare const SidebarFooter: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** The content pinned to the bottom of the Sidebar. */
+    children?: ReactNode;
+    /** The presentations the footer is rendered in. */
+    presentation?: SidebarPresentation;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default SidebarFooter;

package/dist/components/Sidebar/components/SidebarGroup.d.ts

@@ -0,0 +1,31 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type SidebarPresentation } from "../utils/presentation";
+/** A type representing properties for the Sidebar.Group component. */
+export type SidebarGroupProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** The Sidebar items rendered inside the group. */
+    children?: ReactNode;
+    /** The visible heading naming the group's navigation region. */
+    label?: ReactNode;
+    /** The presentations the group is rendered in. */
+    presentation?: SidebarPresentation;
+};
+/**
+ * Renders a related set of Sidebar items as one navigation region.
+ *
+ * A group becomes a navigation landmark only when it carries an accessible
+ * name, because repeated unnamed landmarks cannot be told apart.
+ *
+ * @param props - The label and native properties that configure the group.
+ * @param forwardedReference - The reference assigned to the group element.
+ *
+ * @returns The rendered Sidebar group.
+ */
+declare const SidebarGroup: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** The Sidebar items rendered inside the group. */
+    children?: ReactNode;
+    /** The visible heading naming the group's navigation region. */
+    label?: ReactNode;
+    /** The presentations the group is rendered in. */
+    presentation?: SidebarPresentation;
+} & import("react").RefAttributes<HTMLElement>>;
+export default SidebarGroup;

package/dist/components/Sidebar/components/SidebarHeader.d.ts

@@ -0,0 +1,29 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import { type SidebarPresentation } from "../utils/presentation";
+/** A type representing properties for the Sidebar.Header component. */
+export type SidebarHeaderProps = HTMLAttributes<HTMLDivElement> & {
+    /** The content rendered at the top of the Sidebar. */
+    children?: ReactNode;
+    /** The presentations the header is rendered in. */
+    presentation?: SidebarPresentation;
+};
+/**
+ * Renders the region at the top of a Sidebar.
+ *
+ * The region holds whatever identifies the interface, such as a logo or a
+ * workspace switcher, and scrolls away with the navigation rather than
+ * pinning like the footer. Giving it an `id` and passing that to the
+ * Sidebar's `aria-labelledby` names the panel after the content shown here.
+ *
+ * @param props - The native properties that configure the header.
+ * @param forwardedReference - The reference assigned to the header element.
+ *
+ * @returns The rendered Sidebar header.
+ */
+declare const SidebarHeader: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    /** The content rendered at the top of the Sidebar. */
+    children?: ReactNode;
+    /** The presentations the header is rendered in. */
+    presentation?: SidebarPresentation;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export default SidebarHeader;

package/dist/components/Sidebar/components/SidebarItem.d.ts

@@ -0,0 +1,46 @@
+import { type ComponentPropsWithRef, type ComponentPropsWithoutRef, type ElementType, type ReactElement, type ReactNode } from "react";
+import { type IconType } from "../../Icon";
+import { type SidebarPresentation } from "../utils/presentation";
+/** A type representing properties owned by the Sidebar.Item component. */
+type SidebarItemOwnProps = {
+    /** Whether the item represents the current page or view. */
+    active?: boolean;
+    /** The label displayed inside the item. */
+    children?: ReactNode;
+    /** Whether the item is present but unavailable. */
+    disabled?: boolean;
+    /** The icon displayed before the item label. */
+    icon?: IconType;
+    /** The presentations the item is rendered in. */
+    presentation?: SidebarPresentation;
+};
+/** A type representing the reference accepted by a polymorphic element. */
+type SidebarItemReference<Component extends ElementType> = ComponentPropsWithRef<Component>["ref"];
+/** A type representing properties for a polymorphic Sidebar item. */
+export type SidebarItemProps<Component extends ElementType = "button"> = SidebarItemOwnProps & {
+    /**
+     * The intrinsic element or custom component used as the item control.
+     *
+     * Custom components own their native semantics and must forward the
+     * class name, reference, event handlers, and ARIA properties to their
+     * interactive root.
+     */
+    as?: Component;
+} & Omit<ComponentPropsWithoutRef<Component>, keyof SidebarItemOwnProps | "as">;
+/** A type representing the public polymorphic Sidebar item component. */
+type SidebarItemComponent = <Component extends ElementType = "button">(props: SidebarItemProps<Component> & {
+    ref?: SidebarItemReference<Component>;
+}) => ReactElement | null;
+/**
+ * Renders one navigation destination or action inside a Sidebar group.
+ *
+ * Items carrying a navigation target report the current page, while action
+ * items report the current selection instead.
+ *
+ * @param props - The properties that configure the item and its element.
+ * @param forwardedReference - The reference assigned to the item control.
+ *
+ * @returns The rendered Sidebar item and its list container.
+ */
+declare const SidebarItem: SidebarItemComponent;
+export default SidebarItem;