@nanisoft/prism-ui 0.10.2 → 0.15.0

package/dist/components/ui/diff.d.ts

@@ -0,0 +1,105 @@
+import type { ComponentProps, ReactNode } from 'react';
+/** What happened to one line. */
+export type DiffLineKind = 'context' | 'added' | 'removed';
+/** One line of a change. */
+export type DiffLine = {
+    /** What happened to it. @defaultValue 'context' */
+    kind?: DiffLineKind;
+    /**
+     * The number this line had before the change.
+     *
+     * A removed line has one and no new number, an added line the reverse, and a
+     * context line both. That asymmetry is the structural signal that says which
+     * side a line is on, and it is why the line numbers are the first thing in the
+     * markup rather than decoration beside the content.
+     */
+    oldNumber?: number;
+    /** The number this line has after the change. */
+    newNumber?: number;
+    /** The line's text, exactly as it is in the file. */
+    content: string;
+    /**
+     * The character ranges within `content` that actually changed.
+     *
+     * Optional, and a line with none is drawn whole. This is what separates a diff
+     * that shows a line changed from one that shows what changed inside it, and it
+     * is the difference between reading a change and scanning for it.
+     */
+    changed?: readonly (readonly [number, number])[];
+};
+/** The words a reader is told for each kind, because the Component ships none. */
+export type DiffLabels = {
+    /** Read for a line that was added. */
+    added: string;
+    /** Read for a line that was removed. */
+    removed: string;
+    /** Read for a line that did not change. */
+    context: string;
+};
+/** The props the Diff accepts. */
+export interface DiffProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /** The lines, in file order. */
+    lines: readonly DiffLine[];
+    /**
+     * The accessible name of the change, read before its lines.
+     *
+     * Required rather than defaulted, because a page with two diffs is a page where
+     * a reader cannot tell which change they are in, and the name is the caller's
+     * word.
+     */
+    label: string;
+    /**
+     * The words for each kind of line.
+     *
+     * Required, and the reason is the same one that makes a Dialog's close label a
+     * prop: a diff that announced "added" and "removed" in English would be a diff
+     * every consumer inherits in a language they did not choose. A shared library
+     * cannot know whether the word for this is "added" or "ajoute" or "hinzugefugt".
+     */
+    labels: DiffLabels;
+    /** The name of the thing that changed, shown above the lines. */
+    file?: string;
+    /**
+     * A summary of the change, shown beside the file name.
+     *
+     * The caller's words, because a diff that computed "3 additions, 1 deletion"
+     * would be shipping a sentence. What it counts is left to the caller for the
+     * same reason, and because a diff of a rename has no additions at all.
+     */
+    summary?: ReactNode;
+    /** Layout only. */
+    className?: string;
+    /** What a reader is told when there is nothing to show. */
+    empty?: ReactNode;
+}
+/**
+ * A change, as lines with the numbers they had and the numbers they have.
+ *
+ * **The bar is change density, not a side marker.** A diff conventionally marks
+ * each line with a coloured wash and a rail, which tells a reader that a line
+ * changed and nothing about how much. Rewriting one identifier in a long line
+ * leaves the same mark as replacing the whole line, so the reader's eye, which is
+ * fast at finding saturated bands, is drawn to the least interesting change in the
+ * file. Here the bar's width is the fraction of the line that actually changed, so
+ * the eye goes to the line that was rewritten rather than the line that was
+ * touched, and the marks that used to be a wash become a measurement.
+ *
+ * **The line numbers carry the side, not the colour.** An added line has a new
+ * number and no old one; a removed line the reverse. That asymmetry is structural,
+ * it is how every diff reader a developer has ever used distinguishes the two, and
+ * it does not depend on distinguishing red from green. The colour is redundant on
+ * top of it, which is the right way round: the shape carries the meaning and the
+ * colour reinforces it.
+ *
+ * **It is a table, because a diff is two columns of numbers beside a column of
+ * text.** Row and column navigation, the count of lines, and the association
+ * between a line and its number all come from the semantics rather than from a
+ * grid of divs, and a reader moving by row hears the file the way they read it.
+ *
+ * **The changed words are emphasised by weight.** See the note on the helper: a
+ * diff that tinted them would spend the two hues a reader is most likely to be
+ * unable to tell apart, and weight survives greyscale.
+ */
+declare function Diff({ lines, label, labels, file, summary, className, empty, ...props }: DiffProps): import("react").JSX.Element;
+export { Diff };
+//# sourceMappingURL=diff.d.ts.map

package/dist/components/ui/diff.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diff.d.ts","sourceRoot":"","sources":["../../../src/components/ui/diff.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD,iCAAiC;AACjC,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAA;AAE1D,4BAA4B;AAC5B,MAAM,MAAM,QAAQ,GAAG;IACrB,mDAAmD;IACnD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qDAAqD;IACrD,OAAO,EAAE,MAAM,CAAA;IACf;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,EAAE,CAAA;CACjD,CAAA;AAED,kFAAkF;AAClF,MAAM,MAAM,UAAU,GAAG;IACvB,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,wCAAwC;IACxC,OAAO,EAAE,MAAM,CAAA;IACf,2CAA2C;IAC3C,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,kCAAkC;AAClC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACxE,gCAAgC;IAChC,KAAK,EAAE,SAAS,QAAQ,EAAE,CAAA;IAC1B;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;;OAOG;IACH,MAAM,EAAE,UAAU,CAAA;IAClB,iEAAiE;IACjE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB;AAgED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,iBAAS,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,+BA6H3F;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/components/ui/diff.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+/** The bar and the text tint for each kind, from the existing semantic roles. */
+const KIND_BAR = {
+    // A context line has no bar at all rather than an empty one: a zero-width mark
+    // beside an unchanged line reads as "this changed a little", which is a claim
+    // about a line the diff is saying did not change.
+    context: 'bg-transparent',
+    added: 'bg-brand-ink',
+    removed: 'bg-destructive',
+};
+const KIND_TEXT = {
+    context: 'text-muted-foreground',
+    added: 'text-foreground',
+    removed: 'text-foreground',
+};
+/** How much of a line changed, as a fraction, clamped to the line it is on. */
+function density(line) {
+    if (line.changed === undefined || line.content.length === 0)
+        return 0;
+    const covered = line.changed.reduce((total, [start, end]) => {
+        const from = Math.max(0, Math.min(start, line.content.length));
+        const to = Math.max(0, Math.min(end, line.content.length));
+        return total + Math.max(0, to - from);
+    }, 0);
+    // Clamped, because two ranges that overlap would otherwise report more than the
+    // whole line changed and a bar past the end of its own gutter says nothing.
+    return Math.min(covered / line.content.length, 1);
+}
+/**
+ * The line's text with its changed runs emphasised, and the rest left alone.
+ *
+ * The emphasis is weight, not colour. A diff that tinted its changed words green
+ * and red would be leaning on the two hues a reader is most likely to be unable to
+ * distinguish, and the tint would also fight the line's own state colour. A bolder
+ * weight inside a line that is already marked as added or removed says what
+ * changed without adding a second colour channel, and it survives greyscale,
+ * which is the condition any encoding here has to survive eventually.
+ */
+function emphasised(line) {
+    const ranges = (line.changed ?? [])
+        .map(([start, end]) => [Math.max(0, start), Math.min(end, line.content.length)])
+        .filter(([start, end]) => end > start)
+        .sort((a, b) => a[0] - b[0]);
+    if (ranges.length === 0)
+        return line.content;
+    const parts = [];
+    let at = 0;
+    ranges.forEach(([start, end], index) => {
+        if (start > at)
+            parts.push(line.content.slice(at, start));
+        parts.push(_jsx("strong", { className: "font-semibold", children: line.content.slice(start, end) }, `${start}-${end}-${index}`));
+        at = end;
+    });
+    if (at < line.content.length)
+        parts.push(line.content.slice(at));
+    return parts;
+}
+/**
+ * A change, as lines with the numbers they had and the numbers they have.
+ *
+ * **The bar is change density, not a side marker.** A diff conventionally marks
+ * each line with a coloured wash and a rail, which tells a reader that a line
+ * changed and nothing about how much. Rewriting one identifier in a long line
+ * leaves the same mark as replacing the whole line, so the reader's eye, which is
+ * fast at finding saturated bands, is drawn to the least interesting change in the
+ * file. Here the bar's width is the fraction of the line that actually changed, so
+ * the eye goes to the line that was rewritten rather than the line that was
+ * touched, and the marks that used to be a wash become a measurement.
+ *
+ * **The line numbers carry the side, not the colour.** An added line has a new
+ * number and no old one; a removed line the reverse. That asymmetry is structural,
+ * it is how every diff reader a developer has ever used distinguishes the two, and
+ * it does not depend on distinguishing red from green. The colour is redundant on
+ * top of it, which is the right way round: the shape carries the meaning and the
+ * colour reinforces it.
+ *
+ * **It is a table, because a diff is two columns of numbers beside a column of
+ * text.** Row and column navigation, the count of lines, and the association
+ * between a line and its number all come from the semantics rather than from a
+ * grid of divs, and a reader moving by row hears the file the way they read it.
+ *
+ * **The changed words are emphasised by weight.** See the note on the helper: a
+ * diff that tinted them would spend the two hues a reader is most likely to be
+ * unable to tell apart, and weight survives greyscale.
+ */
+function Diff({ lines, label, labels, file, summary, className, empty, ...props }) {
+    if (lines.length === 0) {
+        // A diff with nothing in it is a state a caller reaches, and an empty grid
+        // with no words in it is a gap rather than a state.
+        return (_jsx("div", { "data-slot": "diff-empty", className: cn('text-muted-foreground text-sm', className), children: empty ?? null }));
+    }
+    const added = lines.filter((line) => (line.kind ?? 'context') === 'added').length;
+    const removed = lines.filter((line) => line.kind === 'removed').length;
+    return (_jsxs("div", { "data-slot": "diff", className: cn('border-border flex flex-col overflow-hidden rounded-md border', className), ...props, children: [_jsxs("div", { "data-slot": "diff-header", className: "border-border bg-muted/40 flex items-baseline justify-between gap-3 border-b px-3 py-2", children: [_jsx("span", { "data-slot": "diff-file", className: "text-foreground min-w-0 truncate text-sm font-medium", children: file ?? null }), summary === undefined ? (_jsx("span", { "data-slot": "diff-summary", className: "text-muted-foreground shrink-0 text-xs tabular-nums", "data-added": added, "data-removed": removed })) : (_jsx("span", { "data-slot": "diff-summary", className: "text-muted-foreground shrink-0 text-xs tabular-nums", children: summary }))] }), _jsx("table", { "data-slot": "diff-table", "aria-label": label, className: "w-full table-fixed border-collapse", children: _jsx("tbody", { children: lines.map((line, index) => {
+                        const kind = line.kind ?? 'context';
+                        const share = density(line);
+                        return (_jsxs("tr", { "data-kind": kind, children: [_jsx("td", { "data-slot": "diff-old-number", className: "text-muted-foreground w-10 border-r border-transparent px-2 text-right align-top text-xs tabular-nums select-none", children: line.oldNumber ?? null }), _jsx("td", { "data-slot": "diff-new-number", className: "text-muted-foreground w-10 border-r border-transparent px-2 text-right align-top text-xs tabular-nums select-none", children: line.newNumber ?? null }), _jsx("td", { "data-slot": "diff-gutter", className: "w-1.5 border-r border-transparent p-0 align-stretch", children: kind === 'context' ? null : (_jsx("span", { "data-slot": "diff-bar", "aria-hidden": "true", className: cn('block h-full min-h-5 w-full', KIND_BAR[kind]), 
+                                        /*
+                                         * The floor applies only when the density is unknown, which is
+                                         * a changed line the caller gave no ranges for. It does not
+                                         * apply to a measured density, because a floor on a real
+                                         * measurement overstates it: a one-character change in a long
+                                         * line is half a percent, and drawing it at twelve percent
+                                         * would have the bar claim something the data does not say,
+                                         * which is the one thing a measurement is not allowed to do.
+                                         * The floor exists to keep a line with no reported ranges
+                                         * findable, and that is the only case it serves.
+                                         */
+                                        style: { width: `${(share > 0 ? share : 0.12) * 100}%` } })) }), _jsx("td", { "data-slot": "diff-content", "aria-label": labels[kind], className: cn('px-3 py-0.5 text-left font-mono text-xs leading-relaxed', KIND_TEXT[kind]), children: emphasised(line) })] }, `${kind}-${line.oldNumber ?? 'x'}-${line.newNumber ?? 'x'}-${index}`));
+                    }) }) })] }));
+}
+export { Diff };

package/dist/components/ui/drawer.d.ts

@@ -0,0 +1,270 @@
+import type { ComponentProps } from 'react';
+/**
+ * The edges a Drawer may be anchored to, and why there are three of them.
+ *
+ * `top` is not on this list and that is a decision rather than an omission. A
+ * panel that arrives from above the reader is a shade rather than a task
+ * surface, and the gesture that dismisses it is a pull towards the thing the
+ * reader was already looking at, which is the opposite of a dismissal. A Sheet
+ * carries all four edges because a Sheet has no gesture and the top edge is a
+ * legitimate place for a filter set. Exported because the union is the whole of
+ * what `DrawerContent` accepts and a caller building a wrapper wants to name it
+ * rather than repeat it.
+ */
+export type DrawerSide = 'bottom' | 'left' | 'right';
+/**
+ * The props the Drawer root forwards to its Base UI root.
+ *
+ * Declared here rather than re-exported from Base UI so no upstream type
+ * crosses the package seam, which is the same rule `Dialog` states.
+ */
+export interface DrawerProps {
+    /** The controlled open state. */
+    open?: boolean;
+    /** The initially open state, for an uncontrolled drawer. */
+    defaultOpen?: boolean;
+    /** Called when the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Whether the drawer is modal.
+     *
+     * `true` traps focus inside the panel, locks page scroll and makes the rest of
+     * the document inert to the pointer. `'trap-focus'` traps focus and leaves the
+     * page scrollable, which is the arrangement for a panel the reader has to be
+     * able to scroll away from. `false` closes nothing and traps nothing, and is
+     * for a panel sitting beside live work on a wide viewport.
+     *
+     * @defaultValue true
+     */
+    modal?: boolean | 'trap-focus';
+    /** The trigger and the panel. */
+    children?: React.ReactNode;
+}
+/** The props the DrawerTrigger forwards to Base UI. */
+export interface DrawerTriggerProps extends ComponentProps<'button'> {
+}
+/**
+ * The props the DrawerContent forwards to Base UI.
+ *
+ * `side` is not defaulted, for the reason `SheetContent` does not default
+ * `side`: a panel has an edge and the edge is a decision the caller has to make.
+ * Base UI's own default is the bottom sheet, which is a good default for Base UI
+ * and the wrong one here, because a default nobody chose is how a side panel
+ * arrives as a bottom sheet in a product that believes it shipped a drawer on
+ * the right.
+ */
+export interface DrawerContentProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /** Which edge of the viewport the panel is anchored to. */
+    side: DrawerSide;
+    /**
+     * Whether the built-in close control is rendered. @defaultValue true
+     *
+     * On by default even though the panel can be dismissed by a drag, because the
+     * drag is not available to everyone: a reader with a switch device, a keyboard
+     * and no pointer gets the grip as a decorative bar, and a panel whose only
+     * visible way out is that bar is a panel some readers cannot leave.
+     */
+    showCloseButton?: boolean;
+    /**
+     * The accessible name of the built-in close control, and required.
+     *
+     * Required rather than defaulted, on the reasoning `Lightbox` states at
+     * length: a hardcoded accessible name is a sentence a consumer cannot
+     * localise, so a product in any language but English inherits an English
+     * control in the middle of its own interface, and the only fix is a fork. It
+     * is required even when `showCloseButton` is false, which looks like friction
+     * and is the same friction `Lightbox` accepts: a required prop is a question
+     * asked at build time, and an optional one is a question nobody asks. It also
+     * keeps the prop set stable, so turning the control on later is not a breaking
+     * change.
+     */
+    closeLabel: string;
+    /** The panel's own contents. */
+    children?: React.ReactNode;
+}
+/** The props DrawerHeader forwards to a plain container. */
+export interface DrawerHeaderProps extends ComponentProps<'div'> {
+}
+/** The props DrawerBody forwards to a plain container. */
+export interface DrawerBodyProps extends ComponentProps<'div'> {
+}
+/** The props DrawerFooter forwards to a plain container. */
+export interface DrawerFooterProps extends ComponentProps<'div'> {
+}
+/** The props DrawerTitle forwards to Base UI. */
+export interface DrawerTitleProps extends ComponentProps<'h2'> {
+}
+/** The props DrawerDescription forwards to Base UI. */
+export interface DrawerDescriptionProps extends ComponentProps<'p'> {
+}
+/** The props DrawerHandle forwards to a plain container. */
+export interface DrawerHandleProps extends ComponentProps<'div'> {
+}
+/** The props DrawerClose forwards to Base UI. */
+export interface DrawerCloseProps extends ComponentProps<'button'> {
+}
+/**
+ * A panel anchored to an edge of the viewport that the reader can push away.
+ *
+ * **The distinction from `Sheet` is a gesture and nothing else, and it is worth
+ * stating plainly because the two read as synonyms.** Prism's `Sheet` is
+ * `Dialog` with a named edge: the same focus trap, the same Escape key, the same
+ * outside press, the same portal, and a panel the reader leaves by pressing a
+ * key, pressing outside, or pressing a control. A Drawer is a panel the reader
+ * can also leave by dragging it off the edge with their thumb, and it says so: it
+ * draws a grip, its exit is driven by pointer movement, and its own content
+ * region is marked so that selecting text with a mouse does not read as the
+ * start of a drag. Base UI, which supplies both, draws the same line: a Drawer
+ * extends Dialog and adds gesture support, and a panel that slides in from the
+ * edge and needs no gesture is a positioned Dialog, which is what `Sheet` is. So
+ * the rule for a caller is short. **If the reader can throw it away, use a
+ * Drawer. If the reader dismisses it, use a Sheet.**
+ *
+ * **The gesture is never the only way out.** Every dismissal it offers is also
+ * available without a pointer: Escape closes the panel, and the close control is
+ * on by default. That is not politeness, it is the accessibility floor. A panel
+ * whose grip is the only visible affordance is a panel a switch-device user and a
+ * keyboard user cannot leave, and the grip is drawn from `bg-muted`, so it is a
+ * grey bar carrying no name and no role.
+ *
+ * **The focus trap, the Escape key, the scroll lock and the portal are Base UI's,
+ * and they are inherited rather than re-derived.** Five behaviours that are
+ * already correct and are each wrong more often than right when hand-rolled: an
+ * overlay built on a `div` and a `keydown` listener gets Escape and no trap, so a
+ * keyboard reader tabs behind the panel into a page they cannot see. `modal`
+ * defaults to `true`, which traps focus, locks page scroll and makes the rest of
+ * the document inert to the pointer. Focus moves into the panel on open and
+ * returns to whatever opened it on close. Escape closes it. There is deliberately
+ * no prop that turns any of that off: a panel a reader cannot leave by the
+ * keyboard is a trap in both the ordinary and the technical sense, and the case
+ * for a panel that refuses a stray press is an `AlertDialog`, which is what
+ * `Sheet` says in its own documentation.
+ *
+ * **A wide viewport gets a narrower panel, not a different Component.** The
+ * cross-axis extent is capped, so a side drawer is `w-3/4` bounded by
+ * `max-w-overlay-panel`
+ * and a bottom drawer is full width with `max-h-[85vh]`: at 64rem the panel is a
+ * panel beside the work rather than a wall across it. What Prism will not do is
+ * swap the Drawer for a Dialog at a breakpoint. A surface that changes shape with
+ * the viewport is two Components under one name with a media query deciding
+ * which one the reader got, and the caller's own `onOpenChange` cannot tell which
+ * fired, so a drawer that became a dialog on a desktop would be a component whose
+ * behaviour is a function of somebody else's window size. A product that wants a
+ * centred modal on a wide screen and a drawer on a phone renders both and chooses.
+ * The cost is real and it is this Component's: that choice is the caller's to
+ * write, and a caller who wanted one name for it does not get one here.
+ *
+ * **Snap points are deliberately left off, and that is the largest omission in
+ * this Component.** Base UI's Drawer can stop at preset heights, which is what a
+ * half-expanded bottom sheet is, and that is the shape most mobile task panels
+ * want. Expressing one honestly takes two numbers that must agree: the snap
+ * point, and the panel's own height at that point, because Base UI hands over the
+ * offset in pixels and leaves the height to whoever styles the panel. Prism has no
+ * token for a height in the world, so the caller's half of the pair would be an
+ * arbitrary `h-[...]` in a `className`, kept in step by hand with a prop on the
+ * root. Two numbers that have to agree, one of them authored outside the token
+ * tier, is a second source of truth, and this package has spent a migration
+ * unpicking exactly that. So the feature is off rather than half shipped, and
+ * what it costs is named: a half-expanded bottom sheet is not available here, and
+ * a consumer who needs one asks for it upstream rather than assembling it from a
+ * `className` that only half works. The nested-drawer stack and the indent effect
+ * Base UI also adds are left off for the same reason and for a second one: both
+ * are about drawers inside drawers, which is a shape no consumer of this package
+ * ships.
+ *
+ * **The entrance is a spatial move, and the whole of it is stopped under reduced
+ * motion.** A panel crossing the whole width of a viewport is the largest movement
+ * in the shipped surface, and a reader who has asked for less motion gets the panel
+ * already open, with no fade either, because the panel's resting state is its full
+ * form and there is nothing to lose. That used to be this Component's own decision,
+ * spelled in a `motion-safe:` on the panel and left off the backdrop so the backdrop
+ * could still fade; it is now `packages/ui/src/styles.css`'s, in one unlayered rule
+ * that stops every transition in the package, which is both the fade and the travel
+ * and every other one. Nothing here is guarded per call site any more, and a guard
+ * that sits beside an unguarded `transition-transform` never stopped anything:
+ * Tailwind's variant adds a rule rather than removing one.
+ *
+ * **The release from a flick is not velocity-matched, and that is the price of
+ * the token.** Base UI's own examples scale the dismissal duration by the swipe
+ * velocity, which is the right feel and is written as a computed millisecond
+ * value in the component. Prism names `duration-slow` and nothing else, so a
+ * reader who throws the panel off the edge hard watches it complete over the same
+ * 280ms as a reader who barely nudged it. A flick that ought to feel like the
+ * panel was flicked instead feels like the panel agreed to go. The alternative
+ * was a duration computed in a class string, and the compositor rule and the
+ * motion law are worth more than the velocity curve.
+ *
+ * It is a client Component, and the reason is the gesture and the portal rather
+ * than the panel: a drag is a stream of pointer events and a portal needs the
+ * document.
+ */
+declare function Drawer({ ...props }: DrawerProps): import("react").JSX.Element;
+/** The element that opens the drawer. */
+declare function DrawerTrigger({ className, ...props }: DrawerTriggerProps): import("react").JSX.Element;
+/**
+ * The panel, its backdrop, its layer and its portal, over Base UI's four parts.
+ *
+ * The parts are internal rather than exported for the reason `Dialog` keeps its
+ * backdrop and viewport internal: a consumer who composes them has to know the
+ * order they go in, and a panel drawn in the wrong order is a panel that traps
+ * focus in an element that is not on screen. `DrawerContent` is the only way in,
+ * and the header, body, footer and title are slots inside it.
+ */
+declare function DrawerContent({ className, side, showCloseButton, closeLabel, children, ...props }: DrawerContentProps): import("react").JSX.Element;
+/**
+ * The panel's heading area, above the body.
+ *
+ * Sits above the body rather than inside it, so a reader who has scrolled a long
+ * task to its last field still sees what the panel is. The panel's own scroll is
+ * the body's, not this element's, which is the difference between a header that
+ * travels with the work and one that stays.
+ */
+declare function DrawerHeader({ className, ...props }: DrawerHeaderProps): import("react").JSX.Element;
+/**
+ * The part of the panel that scrolls.
+ *
+ * The one element with `min-h-0` and the only one with an overflow, and both are
+ * load bearing. The popup is a flex column with a capped height, so the body has
+ * to be allowed to be shorter than its content, and `min-h-0` is what makes that
+ * possible in a flex column: without it a flex item's automatic minimum size is
+ * its content, the body refuses to shrink, and a panel with a long form grows
+ * past the cap and off the screen with the footer unreachable. `overscroll-contain`
+ * is the other half, because a reader who has reached the end of the task and
+ * keeps scrolling should not drag the page behind the panel along with it.
+ */
+declare function DrawerBody({ className, ...props }: DrawerBodyProps): import("react").JSX.Element;
+/**
+ * The panel's action area, below the body.
+ *
+ * On the muted surface and above a rule, for the reason a `FilterPanel`'s footer
+ * is: it is the one band that does not scroll with the work above it, and a
+ * reader part way through a task has to reach the control that commits it without
+ * scrolling back to a field they have already filled. Stacked with the caller's
+ * first child at the bottom on a narrow screen and beside the rest from `sm` up,
+ * which puts the primary action under the same thumb either way.
+ */
+declare function DrawerFooter({ className, ...props }: DrawerFooterProps): import("react").JSX.Element;
+/** The panel's heading. It names the panel for assistive technology. */
+declare function DrawerTitle({ className, ...props }: DrawerTitleProps): import("react").JSX.Element;
+/**
+ * A supporting line under the title.
+ *
+ * The panel is named by the title and described by this, and both are the
+ * caller's words. A drawer on a narrow screen is read by a reader who has just
+ * interrupted something, so the description is where the panel says what will be
+ * lost by putting it away, and only the consumer knows that.
+ */
+declare function DrawerDescription({ className, ...props }: DrawerDescriptionProps): import("react").JSX.Element;
+/**
+ * The bar that says the panel can be pushed away.
+ *
+ * A caller reaching for this is usually a caller who wants a panel on an edge
+ * where no drag exits, which is a grip that promises something the panel will not
+ * do. It is here so that `DrawerContent` can draw it without inventing a slot,
+ * and it takes layout through `className` like every other part.
+ */
+declare function DrawerHandle({ className, ...props }: DrawerHandleProps): import("react").JSX.Element;
+/** A control that closes the drawer from inside its content. */
+declare function DrawerClose({ className, ...props }: DrawerCloseProps): import("react").JSX.Element;
+export { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerTitle, DrawerDescription, DrawerHandle, DrawerClose, };
+//# sourceMappingURL=drawer.d.ts.map

package/dist/components/ui/drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.d.ts","sourceRoot":"","sources":["../../../src/components/ui/drawer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;;;;;;;GAWG;AACH,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAEpD;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,YAAY,CAAA;IAC9B,iCAAiC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,uDAAuD;AACvD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,QAAQ,CAAC;CAAG;AAEvE;;;;;;;;;GASG;AACH,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACjF,2DAA2D;IAC3D,IAAI,EAAE,UAAU,CAAA;IAChB;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;;;;;;;;;OAYG;IACH,UAAU,EAAE,MAAM,CAAA;IAClB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,4DAA4D;AAC5D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAEnE,0DAA0D;AAC1D,MAAM,WAAW,eAAgB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAEjE,4DAA4D;AAC5D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAEnE,iDAAiD;AACjD,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,IAAI,CAAC;CAAG;AAEjE,uDAAuD;AACvD,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,GAAG,CAAC;CAAG;AAEtE,4DAA4D;AAC5D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAEnE,iDAAiD;AACjD,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,QAAQ,CAAC;CAAG;AA6DrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AACH,iBAAS,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BAExC;AAED,yCAAyC;AACzC,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,+BAQjE;AAED;;;;;;;;GAQG;AACH,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAI,EACJ,eAAsB,EACtB,UAAU,EACV,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,+BA0DpB;AAED;;;;;;;GAOG;AACH,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAQ/D;AAED;;;;;;;;;;;GAWG;AACH,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAQ3D;AAED;;;;;;;;;GASG;AACH,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAW/D;AAED,wEAAwE;AACxE,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAQ7D;AAED;;;;;;;GAOG;AACH,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,+BAQzE;AAED;;;;;;;GAOG;AACH,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAS/D;AAED,gEAAgE;AAChE,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAQ7D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,aAAa,EACb,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,WAAW,GACZ,CAAA"}