@jig-ui/react 0.1.0

package/dist/input/index.d.ts

@@ -0,0 +1,2 @@
+export { Input } from './input';
+export type { InputProps, InputSize } from './input';

package/dist/input/input.d.ts

@@ -0,0 +1,63 @@
+import { CSSProperties, InputHTMLAttributes, ReactNode, Ref } from 'react';
+export type InputSize = 'sm' | 'md' | 'lg';
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /**
+     * The field's label. Rendered as a real `<label>` bound to the control, so
+     * this is how the input gets its accessible name — an input without one is
+     * announced as unlabelled.
+     */
+    label?: ReactNode;
+    /** Hint text below the control, associated via `aria-describedby`. */
+    description?: ReactNode;
+    /**
+     * An error message from outside the component — a server response, or a form
+     * library. Passing it marks the field invalid and shows the message
+     * unconditionally. Leave it undefined to let the browser's own constraint
+     * validation (`required`, `type="email"`, `pattern`) drive the invalid state
+     * instead.
+     */
+    error?: ReactNode;
+    size?: InputSize;
+    /**
+     * Applied to the field wrapper, not the control.
+     *
+     * The wrapper is the element the surrounding layout sees — it is the flex or
+     * grid child, and it is what holds the label and the description as well as
+     * the input. Styling the control instead meant a `flexGrow` or a `gridColumn`
+     * landed on an element the parent layout never touches, and silently did
+     * nothing. `Slider` has always worked this way; Input was the outlier.
+     *
+     * Everything else spreads onto the control, so `placeholder`, `onChange`,
+     * `id` and the rest reach the `<input>` as they read.
+     */
+    className?: string;
+    /** Applied to the field wrapper, for the same reason as `className`. */
+    style?: CSSProperties;
+    /** The control — the element you would focus, select or measure. */
+    ref?: Ref<HTMLInputElement>;
+}
+/**
+ * A single-line text field.
+ *
+ * `label` is the accessible name and should always be set; it renders a real
+ * `<label>` bound to the control. `description` and `error` are wired to it
+ * with `aria-describedby` for you.
+ *
+ * Passing `error` marks the field invalid and shows the message
+ * unconditionally — use it for a server response or a form library. Leave it
+ * undefined to let native constraint validation (`required`, `type="email"`,
+ * `pattern`) drive the invalid state instead.
+ *
+ * `className` and `style` land on the field wrapper, which is the element the
+ * surrounding layout sees; every other prop reaches the `<input>`.
+ *
+ * @example
+ * <Input
+ *   label="Email"
+ *   type="email"
+ *   required
+ *   description="We'll only use this to sign you in."
+ *   error={serverError}
+ * />
+ */
+export declare function Input({ label, description, error, size, disabled, name, className, style, ...props }: InputProps): import("react/jsx-runtime").JSX.Element;

package/dist/layout.d.ts

@@ -0,0 +1,87 @@
+import { Responsive } from './responsive';
+/**
+ * Twenty-four is the whole grid, and it is fixed — a Grid always lays out on
+ * the same 24 tracks, so two grids of the same width share column positions
+ * without a shared template. Children say how much of it they occupy.
+ *
+ * Decided in apps/docs/decisions/0003-layout-children.html.
+ */
+export type GridSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
+/**
+ * The column counts a Grid can distribute its children across — the divisors
+ * of 24, and nothing else. `columns={5}` would need tracks of 4.8, so it is a
+ * type error rather than a silent rounding.
+ */
+export type GridColumns = 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24;
+/** The number of tracks in the grid. */
+export declare const GRID_COLUMNS = 24;
+export type LayoutAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type LayoutJustify = 'start' | 'center' | 'end' | 'between' | 'around';
+export type LayoutDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+export type LayoutSpacing = '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+/**
+ * The props that describe how a component sits inside its parent, rather than
+ * how it arranges its own children.
+ *
+ * Every layout primitive carries all three, because every layout primitive can
+ * be a child of any other — a Grid nested in a Grid, a Stack inside a Stack, a
+ * Box in either. Which of them does anything depends on the parent: `span`
+ * applies inside a Grid, `grow` inside a Stack, `alignSelf` in either. A prop
+ * that does not apply is inert rather than an error, which is the same
+ * contract `Box` has had since 0003.
+ *
+ * Deliberately not on content components. Button and Input still get their
+ * position from a layout wrapper; this is the line 0003 drew and it has not
+ * moved — what changed is that the containers are on the child side of it too.
+ */
+export interface LayoutChildProps {
+    /**
+     * How many of a parent Grid's 24 columns to occupy. Overrides the
+     * distribution the Grid set with `columns`.
+     *
+     * @example
+     * <Grid columns={3}>
+     *   <Stack span={16}>...</Stack>
+     *   <Box span={8}>...</Box>
+     * </Grid>
+     */
+    span?: Responsive<GridSpan>;
+    /** Take the space left over by siblings. Only meaningful inside a Stack. */
+    grow?: Responsive<boolean>;
+    /**
+     * Override the parent's `align` for this child alone. Works in both Stack
+     * and Grid.
+     *
+     * Stack's `align` defaults to `start`, so this is how a single child says it
+     * should fill the cross axis without changing the whole row. Note the pair
+     * on a container: `align` is what it does to its children, `alignSelf` is
+     * what it does to itself.
+     */
+    alignSelf?: Responsive<LayoutAlign>;
+}
+/** Sprinkles keys its span values by string; the prop reads better as a number. */
+export declare const toSpanKey: (value: Responsive<GridSpan>) => Responsive<`${GridSpan}`>;
+/** Sprinkles keys its values by string; `grow` reads better as a boolean. */
+export declare const toGrowKey: (value: Responsive<boolean>) => Responsive<"0" | "1">;
+/**
+ * `LayoutChildProps` with every key present and possibly undefined, which is
+ * what the props look like once a component has destructured them. The
+ * optional form would be rejected under `exactOptionalPropertyTypes`.
+ */
+type ChildLayoutValues = {
+    [K in keyof LayoutChildProps]-?: LayoutChildProps[K] | undefined;
+};
+/**
+ * The child-side props as arguments for `layoutSprinkles`, so each primitive
+ * folds them into the single sprinkles call it already makes rather than
+ * emitting a second class string.
+ *
+ * Returned as an argument fragment rather than a class name to keep this
+ * module free of a dependency on `layout.css.ts`.
+ */
+export declare const childLayout: ({ span, grow, alignSelf }: ChildLayoutValues) => {
+    alignSelf?: Responsive<LayoutAlign>;
+    flexGrow?: Responsive<"0" | "1">;
+    gridColumn?: Responsive<"1" | "2" | "3" | "14" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "13" | "15" | "16" | "17" | "18" | "19" | "20" | "21" | "22" | "23" | "24">;
+};
+export {};

package/dist/link/index.d.ts

@@ -0,0 +1,2 @@
+export { Link } from './link';
+export type { LinkProps, LinkVariant } from './link';

package/dist/link/link.d.ts

@@ -0,0 +1,125 @@
+import { useRender } from '@base-ui/react/use-render';
+import { AnchorHTMLAttributes, Ref } from 'react';
+import { IconName } from '../icon';
+import { ButtonSize, ButtonVariant } from '../button';
+import { TypeStyles } from '../typography';
+/**
+ * How loud the link is.
+ *
+ * `text` is the ordinary underlined link in a sentence; the other five are
+ * Button's, and mean exactly what they mean there. One axis rather than two
+ * components, decided in apps/docs/decisions/0009-link.html (D1) — a caller
+ * who starts with a text link and later wants it to look like a button changes
+ * a prop, not a component.
+ */
+export type LinkVariant = 'text' | ButtonVariant;
+/** What Link owns, whichever variant is in play. */
+interface LinkOwnProps {
+    /**
+     * Required. A Link without a target is not a link — it is text, or a Button.
+     * There is deliberately no `disabled`: `:disabled` never matches an anchor,
+     * and an anchor without `href` is not focusable or activatable, so a
+     * "disabled link" can only be announced, never reached (0009, settled list).
+     */
+    href: string;
+    variant?: LinkVariant;
+    /**
+     * Sizes the five box variants. No effect on `variant="text"`, whose type
+     * comes from the parent or from `with` rather than from this ramp (0009 D3).
+     */
+    size?: ButtonSize;
+    /**
+     * Names a Typography preset, for a text link with no typographic parent to
+     * inherit from. When passed it beats the inherited type — an explicit prop
+     * at the call site outranks an ambient value the caller did not set (0009
+     * D3's outcome). Ignored by the box variants, which take Button's sizing.
+     */
+    with?: TypeStyles;
+    /**
+     * Underlines the text variant. On by default: with an inherited colour the
+     * underline is the only thing distinguishing a link from the words around
+     * it, so colour alone would be carrying the meaning (WCAG 1.4.1).
+     *
+     * `false` means never — there is no hover underline behind it. That makes it
+     * right for somewhere the link is already obviously a link (a nav row, a
+     * breadcrumb) and wrong in running text, which 0009 D5 accepted knowingly.
+     */
+    underline?: boolean;
+    /**
+     * Marks a link that leaves the app: the `arrow-square-out` glyph after the
+     * label, `target="_blank"`, `rel="noopener noreferrer"`, and a visually
+     * hidden "(opens in a new tab)" so the announcement matches what happens.
+     *
+     * The new tab is the component's opinion here, not the call site's — 0009 D6
+     * chose the whole convention over a marker alone, which means a caller who
+     * wants the glyph *without* a new tab wants `icon="arrow-square-out"` and
+     * `iconPosition="end"` instead.
+     */
+    external?: boolean;
+    /**
+     * An icon from the curated set, sized and spaced by the component rather
+     * than by the caller. Decorative — the label names the link.
+     */
+    icon?: IconName;
+    /** Which side of the label the icon sits on. */
+    iconPosition?: 'start' | 'end';
+    /**
+     * An element to render instead of the bare anchor — a router's link, so that
+     * client-side navigation works without Jig depending on a router.
+     *
+     * Not an `as` prop wearing a different hat. `as` asks a component to *be*
+     * another element and to take that element's prop types; this hands Link's
+     * own props and classes to an element the caller already constructed, and
+     * merges rather than overwrites, so Jig's `className` and the router's
+     * `onClick` both survive. Link is an anchor either way. Decided in 0009 D4.
+     */
+    render?: useRender.RenderProp;
+    ref?: Ref<HTMLAnchorElement>;
+}
+/** Attributes React declares that Link decides for itself. */
+type Reserved = keyof LinkOwnProps | 'color';
+/**
+ * `iconPosition="end"` is a type error alongside `external`, which owns that
+ * slot. A glyph at each end is legitimate, so `icon` at the default `start`
+ * still works — it is only the collision that is refused. Carried from 0009
+ * D6's outcome.
+ */
+type ExternalProps = {
+    external: true;
+    iconPosition?: 'start' | undefined;
+};
+type LocalProps = {
+    external?: false | undefined;
+    iconPosition?: 'start' | 'end' | undefined;
+};
+export type LinkProps = LinkOwnProps & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, Reserved | 'iconPosition'> & (ExternalProps | LocalProps);
+/**
+ * A link.
+ *
+ * `href` is required. Defaults to `variant="text"` — an underlined link that
+ * takes the colour and size of the text around it, so it fits whatever it is
+ * dropped into. Set `with` to name a type preset when there is no surrounding
+ * text to inherit from, or `underline={false}` where the link is already
+ * obviously one, such as a nav row.
+ *
+ * The other variants are Button's, for a call to action that navigates. It is
+ * still a link: announced as one, activated with Enter, and openable in a new
+ * tab.
+ *
+ * `external` marks a link that leaves the app — it adds a trailing icon, opens
+ * a new tab, and tells assistive technology that it will.
+ *
+ * Pass `render` to hand the markup to a router's own link component so
+ * client-side navigation works.
+ *
+ * @example
+ * <Typography as="p">
+ *   Released under the <Link href="https://opensource.org/license/mit" external>MIT licence</Link>.
+ * </Typography>
+ *
+ * <Link href="/dashboard" variant="primary" render={<NextLink href="/dashboard" />}>
+ *   Open dashboard
+ * </Link>
+ */
+export declare function Link({ href, variant, size, with: typeStyle, underline, external, icon, iconPosition, render, className, children, ref, ...props }: LinkProps): import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>;
+export {};

package/dist/listitem/index.d.ts

@@ -0,0 +1,2 @@
+export { ListItem } from './listitem';
+export type { ListItemProps, ListItemOwnProps, ListItemElement, ListItemSize } from './listitem';

package/dist/listitem/listitem.d.ts

@@ -0,0 +1,92 @@
+import { MouseEventHandler, ReactNode } from 'react';
+import { IconName } from '../icon';
+import { PolymorphicProps } from '../polymorphic';
+/**
+ * The elements a ListItem is willing to render as.
+ *
+ * Two, and only two. `li` is the default because a nav list is the case that
+ * needs the semantics: a real `li` inside a list gets its position and count
+ * computed by the browser, which is what produces "3 of 8". `div` is the
+ * escape hatch for a row that is not in a list — a settings row, a card body —
+ * and a caller who takes it owns `aria-setsize` and `aria-posinset` from then
+ * on.
+ *
+ * This union is why `ListItem` has an `as` prop at all when the rule is that
+ * polymorphism stays on layout and typography components. Decided in
+ * apps/docs/decisions/0014-sidebar-navigation.html (D2), which amends that
+ * rule to "layout and typography components, plus ListItem".
+ */
+export type ListItemElement = 'li' | 'div';
+export type ListItemSize = 'sm' | 'md' | 'lg';
+/** ListItem's own props. The element's own attributes are added by PolymorphicProps. */
+export interface ListItemOwnProps {
+    /** The row's text. Truncates rather than wrapping. */
+    children?: ReactNode;
+    /**
+     * Content before the label — an icon, an avatar, an image, a swatch.
+     *
+     * **Non-interactive only.** It renders inside the row's anchor or button, so
+     * a checkbox or a button here would be an interactive descendant of one,
+     * which HTML forbids and browsers handle by making one of the two
+     * unreachable. Put interactive content in `end`, which is a sibling.
+     * Decided in 0014 D1.
+     */
+    start?: ReactNode;
+    /**
+     * Content after the label, outside the row's control — a count, a Token, an
+     * IconButton, an overflow menu. The only slot that may hold something
+     * interactive.
+     */
+    end?: ReactNode;
+    /**
+     * Makes the row a link. The anchor covers the indicator, `start`, the label
+     * and the row's padding — everything except `end`.
+     */
+    href?: string;
+    /** Makes the row a button. Ignored when `href` is set. */
+    onClick?: MouseEventHandler<HTMLElement>;
+    size?: ListItemSize;
+    /**
+     * Marks the row as the current one: the ghost active fill, plus
+     * `aria-current="page"` on the link when there is one.
+     */
+    selected?: boolean;
+    /**
+     * An icon shown only while the row is selected, in a gutter at the leading
+     * edge that every row reserves whether selected or not — so the labels form
+     * one column instead of shifting as the selection moves.
+     *
+     * **Set it consistently across a list.** The gutter is reserved per row, so
+     * a list where only some rows pass it will not line up. Nothing in the type
+     * can enforce that. Decided in 0014 D3.
+     */
+    selectedIcon?: IconName | false;
+    /** Disables a button row. Has no effect on a link — see Link's note (0009). */
+    disabled?: boolean;
+}
+export type ListItemProps<E extends ListItemElement = 'li'> = PolymorphicProps<E, ListItemOwnProps>;
+/**
+ * A row: `start`, a label, and `end`.
+ *
+ * The whole row is the link when `href` is set — everything except the `end`
+ * slot, which sits outside it so it can hold a button. That split is the
+ * component's central rule: **`start` takes non-interactive content, `end` is
+ * the interactive one.** Nesting a button inside a link is invalid HTML and
+ * leaves one of the two unreachable.
+ *
+ * `selected` marks the current row. Pair it with `selectedIcon` for a tick in
+ * a reserved leading gutter, set consistently across the list so the labels
+ * line up.
+ *
+ * Renders an `<li>`, for a list. Pass `as="div"` for a row that is not in one.
+ *
+ * @example
+ * <ListItem href="/docs/tokens" start={<Icon icon="star" />} selected selectedIcon="check">
+ *   Tokens
+ * </ListItem>
+ *
+ * <ListItem start={<Icon icon="bell" />} end={<IconButton icon="x" label="Dismiss" />}>
+ *   Notifications
+ * </ListItem>
+ */
+export declare function ListItem<E extends ListItemElement = 'li'>({ as, children, start, end, href, onClick, size, selected, selectedIcon, disabled, className, ...props }: ListItemProps<E>): import("react/jsx-runtime").JSX.Element;

package/dist/polymorphic.d.ts

@@ -0,0 +1,31 @@
+import { ComponentPropsWithoutRef, ComponentRef, ElementType, Ref } from 'react';
+/**
+ * Props for a component that renders as one of a *restricted* set of elements.
+ *
+ * `E` is deliberately constrained by each component to its own union of
+ * legitimate tags rather than left open as `ElementType`. Arbitrary
+ * polymorphism would let a Stack render as a `<span>` or Adorn as a `<div>`,
+ * and would promise a flexibility the implementation never had.
+ *
+ * What this adds over declaring `as`, `HTMLAttributes<HTMLElement>` and `ref`
+ * by hand is *correlation*: the props and the ref follow the chosen element.
+ * `Typography as="label"` accepts `htmlFor`, `as="blockquote"` accepts `cite`,
+ * `Stack as="ol"` accepts `start` and `reversed`, and each gets a precise ref
+ * (`HTMLLabelElement`, `HTMLQuoteElement`, `HTMLOListElement`) instead of a
+ * blanket `HTMLElement`. All of those were type errors under the previous
+ * hand-declared pattern.
+ *
+ * `Own` wins on collision — `Omit`ting it from the element's attributes is
+ * what lets Stack define its own `spacing` without `HTMLAttributes` fighting
+ * it. `as` is omitted from the same side so it cannot be doubly declared.
+ *
+ * @example
+ * export type StackProps<E extends StackElement = 'div'> =
+ *   PolymorphicProps<E, StackOwnProps>;
+ *
+ * export function Stack<E extends StackElement = 'div'>(props: StackProps<E>) {}
+ */
+export type PolymorphicProps<E extends ElementType, Own> = Own & Omit<ComponentPropsWithoutRef<E>, keyof Own | 'as'> & {
+    as?: E;
+    ref?: Ref<ComponentRef<E>>;
+};

package/dist/reset.css

@@ -0,0 +1,4 @@
+@layer jig.reset, jig.tokens, jig.base, jig.components;
+
+@layer jig.reset{:root{box-sizing:border-box}html,body{margin:0;padding:0}h1,h2,h3,h4,h5,h6,p{font-weight:400;font-size:inherit;margin:0;padding:0;font-style:normal}}
+/*$vite$:1*/

package/dist/responsive.d.ts

@@ -0,0 +1,10 @@
+import { Breakpoint } from './breakpoints';
+/**
+ * A responsive prop value — either a plain value applied at all breakpoints,
+ * or an object mapping breakpoints to values (mobile-first, min-width).
+ *
+ * @example
+ * direction="column"
+ * direction={{ xs: 'column', lg: 'row' }}
+ */
+export type Responsive<T> = T | Partial<Record<Breakpoint, T>>;

package/dist/scrollarea/index.d.ts

@@ -0,0 +1,2 @@
+export { ScrollArea } from './scrollarea';
+export type { ScrollAreaProps } from './scrollarea';

package/dist/scrollarea/scrollarea.d.ts

@@ -0,0 +1,26 @@
+import { HTMLAttributes, ReactNode, Ref } from 'react';
+export interface ScrollAreaProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className'> {
+    /** The scrolling content. */
+    children?: ReactNode;
+    /** Applied to the root — the element whose height constrains the scroll. */
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A region that scrolls, with a styled scrollbar in place of the platform's.
+ *
+ * The height is yours to set: it only scrolls once something constrains it, so
+ * give it a `maxHeight`, or put it in a flex or grid parent that bounds it
+ * (remembering `min-height: 0` on the flex child above it).
+ *
+ * No chrome at rest. The scrollbar appears on hover, on focus within, and
+ * while scrolling; a gradient mask at the cropped edges shows there is more in
+ * the meantime. Space for the scrollbar is always reserved, so content does not
+ * shift when it appears.
+ *
+ * @example
+ * <ScrollArea style={{ maxHeight: '20rem' }}>
+ *   {messages.map((m) => <Message key={m.id} {...m} />)}
+ * </ScrollArea>
+ */
+export declare function ScrollArea({ className, children, ref, ...props }: ScrollAreaProps): import("react/jsx-runtime").JSX.Element;

package/dist/separator/index.d.ts

@@ -0,0 +1,2 @@
+export { Separator } from './separator';
+export type { SeparatorProps, SeparatorOrientation } from './separator';

package/dist/separator/separator.d.ts

@@ -0,0 +1,48 @@
+import { CSSProperties, Ref } from 'react';
+export type SeparatorOrientation = 'horizontal' | 'vertical';
+export interface SeparatorProps {
+    /**
+     * Which way the rule runs. A vertical separator takes its length from the
+     * flex or grid row it sits in, so it renders as nothing outside one.
+     */
+    orientation?: SeparatorOrientation;
+    /**
+     * Hides the rule from assistive technology, for a divider that is decoration
+     * rather than a boundary.
+     *
+     * Reach for it wherever the structure already exists in the markup — between
+     * buttons in a labelled toolbar, or between items in a list. Leave it off
+     * where the rule itself is the only thing marking a boundary, which is when
+     * a screen reader user needs to hear about it.
+     */
+    decorative?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A rule that divides content.
+ *
+ * `orientation="vertical"` takes its length from the flex or grid row it sits
+ * in — it has no height of its own, so give it a parent that has one.
+ *
+ * By default it is announced as a separator. Pass `decorative` where the rule
+ * is only visual and the structure is already carried by a labelled group, a
+ * list or a heading, so it is not read out as noise.
+ *
+ * Spacing around it comes from the parent, like every other component.
+ *
+ * @example
+ * <Stack spacing="500">
+ *   <Typography as="h2" with="heading04">Ingredients</Typography>
+ *   <Separator />
+ *   <Typography as="h2" with="heading04">Method</Typography>
+ * </Stack>
+ *
+ * <Stack direction="row" spacing="300" align="center">
+ *   <ToggleButton value="bold" isIconOnly icon="star" label="Bold" />
+ *   <Separator orientation="vertical" decorative />
+ *   <ToggleButton value="italic" isIconOnly icon="heart" label="Italic" />
+ * </Stack>
+ */
+export declare function Separator({ orientation, decorative, className, style, ref, }: SeparatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/sidenav/index.d.ts

@@ -0,0 +1,2 @@
+export { SideNav } from './sidenav';
+export type { SideNavProps } from './sidenav';

package/dist/sidenav/sidenav.d.ts

@@ -0,0 +1,35 @@
+import { HTMLAttributes, ReactNode, Ref } from 'react';
+export interface SideNavProps extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'title'> {
+    /** The sections and rows. Normally `SideNavSection`s. */
+    children?: ReactNode;
+    /** Pinned above the scrolling area — a product mark, a search field. */
+    header?: ReactNode;
+    /** Pinned below it — an account row, a theme switch. */
+    footer?: ReactNode;
+    /**
+     * The accessible name. Required in practice: a page with two navigation
+     * landmarks and no names leaves a screen reader user choosing between
+     * "navigation" and "navigation". A missing one logs a development warning.
+     */
+    'aria-label'?: string;
+    className?: string;
+    ref?: Ref<HTMLElement>;
+}
+/**
+ * A sidebar navigation region.
+ *
+ * Renders a `<nav>` and takes its accessible name from `aria-label`. `header`
+ * and `footer` are pinned; whatever is between them scrolls in a `ScrollArea`
+ * when it overflows.
+ *
+ * It has no width of its own — that belongs to the layout around it, so give
+ * it one with `style` or a parent grid column.
+ *
+ * @example
+ * <SideNav aria-label="Docs" header={<Search />} footer={<AccountRow />} style={{ width: '16rem' }}>
+ *   <SideNavSection label="Getting started" collapsible defaultOpen>
+ *     <ListItem href="/docs/install">Installation</ListItem>
+ *   </SideNavSection>
+ * </SideNav>
+ */
+export declare function SideNav({ children, header, footer, className, ref, ...props }: SideNavProps): import("react/jsx-runtime").JSX.Element;

package/dist/sidenavsection/index.d.ts

@@ -0,0 +1,2 @@
+export { SideNavSection } from './sidenavsection';
+export type { SideNavSectionProps } from './sidenavsection';

package/dist/sidenavsection/sidenavsection.d.ts

@@ -0,0 +1,44 @@
+import { CSSProperties, HTMLAttributes, ReactNode, Ref } from 'react';
+export interface SideNavSectionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style' | 'children'> {
+    /**
+     * The section's heading. Optional — a section with no label is just a
+     * grouped list, which is how ungrouped items get their list semantics.
+     */
+    label?: ReactNode;
+    /** The rows. Normally `ListItem`s. */
+    children?: ReactNode;
+    /**
+     * Lets the section be folded away. Requires `label`, which becomes the
+     * disclosure trigger — there is nothing else to press.
+     *
+     * Uses `Collapsible` rather than a disclosure of its own (0014 D4), so it
+     * inherits the measured-height animation, the reduced-motion guard and the
+     * `plus`/`minus` indicator 0013 D3 chose.
+     */
+    collapsible?: boolean;
+    /** Open state for a collapsing section. Omit to let it manage its own. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+    style?: CSSProperties;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * A labelled group of rows inside a `SideNav`.
+ *
+ * `label` is optional; without one the section is a bare list, which is how a
+ * run of ungrouped items still gets its list semantics. With `collapsible` the
+ * label becomes a disclosure trigger and the rows fold away.
+ *
+ * The rows are wrapped in a `<ul role="list">` — the role as well as the
+ * element, because WebKit drops list semantics from a `ul` styled with
+ * `list-style: none`.
+ *
+ * @example
+ * <SideNavSection label="Components" collapsible defaultOpen>
+ *   <ListItem href="/docs/button">Button</ListItem>
+ *   <ListItem href="/docs/combobox">Combobox</ListItem>
+ * </SideNavSection>
+ */
+export declare function SideNavSection({ label, children, collapsible, open, defaultOpen, onOpenChange, className, style, ref, ...props }: SideNavSectionProps): import("react/jsx-runtime").JSX.Element;

package/dist/slider/index.d.ts

@@ -0,0 +1,2 @@
+export { Slider } from './slider';
+export type { SliderProps, SliderSize } from './slider';