@nanisoft/prism-ui 0.10.2 → 0.15.0

package/dist/components/ui/drawer.js

@@ -0,0 +1,241 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Drawer as DrawerPrimitive } from '@base-ui/react/drawer';
+import { XIcon } from 'lucide-react';
+import { cn } from '../../lib/utils.js';
+/**
+ * The layer the panel is placed in, per edge, and the only thing an edge changes
+ * about it.
+ *
+ * A viewport is a fixed inset with a flex alignment, so the panel's own class
+ * never has to know how it is centred. That keeps the per-edge record to two
+ * facts, an alignment and a direction, and it means a caller adding an edge adds
+ * one entry here rather than reasoning about three breakpoints.
+ */
+const VIEWPORT = {
+    bottom: 'fixed inset-0 z-50 flex items-end justify-center',
+    left: 'fixed inset-0 z-50 flex items-stretch',
+    right: 'fixed inset-0 z-50 flex items-stretch justify-end',
+};
+/**
+ * The panel's shape and its resting transform, per edge.
+ *
+ * **The transform reads the swipe movement variable rather than being a fixed
+ * offset, because the movement is written by the gesture and the panel has to
+ * follow the finger that is moving it.** Base UI writes
+ * `--drawer-swipe-movement-y` or `--drawer-swipe-movement-x` as a CSS length on
+ * every pointer move while a drag is in progress; a panel whose transform was a
+ * constant would stay put under a moving thumb and then jump when the drag
+ * released, which is the one behaviour that makes a drag feel like a bug. So the
+ * resting value is the movement, and the starting and ending values are the same
+ * movement plus one whole panel of travel, which is where the panel is when the
+ * reader is not looking at it.
+ *
+ * The `fallback` on each variable is `0px` rather than `0` because the variable
+ * is a length and a transform that adds a percentage to a unitless zero is a
+ * different calculation from one that adds a percentage to a length.
+ */
+const PANEL = {
+    bottom: 'w-full max-h-[85vh] rounded-t-xl border-x border-t [transform:translateY(calc(var(--drawer-swipe-movement-y,0px)+100%))] data-[starting-style]:[transform:translateY(calc(var(--drawer-swipe-movement-y,0px)+100%))] data-[ending-style]:[transform:translateY(calc(var(--drawer-swipe-movement-y,0px)+100%))]',
+    left: 'h-full w-3/4 max-w-overlay-panel rounded-r-xl border-y border-r [transform:translateX(calc(var(--drawer-swipe-movement-x,0px)-100%))] data-[starting-style]:[transform:translateX(calc(var(--drawer-swipe-movement-x,0px)-100%))] data-[ending-style]:[transform:translateX(calc(var(--drawer-swipe-movement-x,0px)-100%))]',
+    right: 'h-full w-3/4 max-w-overlay-panel rounded-l-xl border-y border-l [transform:translateX(calc(var(--drawer-swipe-movement-x,0px)+100%))] data-[starting-style]:[transform:translateX(calc(var(--drawer-swipe-movement-x,0px)+100%))] data-[ending-style]:[transform:translateX(calc(var(--drawer-swipe-movement-x,0px)+100%))]',
+};
+/**
+ * The classes every control in this Component draws.
+ *
+ * One string rather than four, because a control bar where the close control has
+ * its own metrics and the rest share another is a bar a reader moving by Tab
+ * finds unevenly spaced, and the difference is invisible in review.
+ */
+const CONTROL = 'text-muted-foreground hover:text-foreground inline-flex size-9 items-center justify-center rounded-md outline-none transition-colors duration-fast ease-out disabled:pointer-events-none disabled:opacity-50 focus-visible:ring-ring focus-visible:ring-[3px]' +
+    // The coarse-pointer floor, as a step. The drawer's own close control is a flow
+    // child at the foot of the panel rather than a corner overlay, so the reason
+    // `dialog.tsx` gives for stepping rather than banding does not apply here and
+    // neither does the reason it gives for banding: there is no inset to overhang and
+    // no corner to be clipped by the screen. Growing it adds eight pixels to the foot
+    // row of the panel and nothing else. See DESIGN.md, The coarse-pointer floor.
+    ' pointer-coarse:size-11';
+/**
+ * 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.
+ */
+function Drawer({ ...props }) {
+    return _jsx(DrawerPrimitive.Root, { ...props });
+}
+/** The element that opens the drawer. */
+function DrawerTrigger({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Trigger, { "data-slot": "drawer-trigger", className: cn(CONTROL, className), ...props }));
+}
+/**
+ * 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.
+ */
+function DrawerContent({ className, side, showCloseButton = true, closeLabel, children, ...props }) {
+    return (_jsxs(DrawerPrimitive.Portal, { children: [_jsx(DrawerPrimitive.Backdrop, { "data-slot": "drawer-backdrop", className: "bg-background/80 fixed inset-0 z-50 backdrop-blur-sm transition-opacity duration-base ease-out data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-swiping:transition-none" }), _jsx(DrawerPrimitive.Viewport, { "data-slot": "drawer-viewport", className: VIEWPORT[side], children: _jsxs(DrawerPrimitive.Popup, { "data-slot": "drawer-popup", className: cn('bg-background text-foreground shadow-md flex flex-col outline-none', 'focus-visible:ring-ring focus-visible:ring-[3px]', 'transition-transform duration-slow ease-out', 'data-swiping:transition-none', PANEL[side], className), ...props, children: [side === 'bottom' ? _jsx(DrawerHandle, {}) : null, _jsx(DrawerPrimitive.Content, { "data-slot": "drawer-content", className: "contents", children: children }), showCloseButton ? (_jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close", "aria-label": closeLabel, className: CONTROL, children: _jsx(XIcon, { className: "size-4", "aria-hidden": "true" }) })) : null] }) })] }));
+}
+/**
+ * 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.
+ */
+function DrawerHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-header", className: cn('flex flex-col gap-1.5 px-6 pt-4 pb-4', className), ...props }));
+}
+/**
+ * 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.
+ */
+function DrawerBody({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-body", className: cn('min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-4', className), ...props }));
+}
+/**
+ * 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.
+ */
+function DrawerFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-footer", className: cn('bg-muted/40 flex flex-col-reverse gap-2 border-t px-6 py-4 sm:flex-row sm:justify-end', className), ...props }));
+}
+/** The panel's heading. It names the panel for assistive technology. */
+function DrawerTitle({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Title, { "data-slot": "drawer-title", className: cn('text-lg leading-none font-semibold tracking-tight', className), ...props }));
+}
+/**
+ * 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.
+ */
+function DrawerDescription({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Description, { "data-slot": "drawer-description", className: cn('text-muted-foreground text-sm', className), ...props }));
+}
+/**
+ * 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.
+ */
+function DrawerHandle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "drawer-handle", "aria-hidden": "true", className: cn('bg-muted mx-auto mt-3 mb-1 h-1 w-10 shrink-0 rounded-full', className), ...props }));
+}
+/** A control that closes the drawer from inside its content. */
+function DrawerClose({ className, ...props }) {
+    return (_jsx(DrawerPrimitive.Close, { "data-slot": "drawer-close", className: cn(CONTROL, className), ...props }));
+}
+export { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerBody, DrawerFooter, DrawerTitle, DrawerDescription, DrawerHandle, DrawerClose, };

package/dist/components/ui/dropdown-menu.d.ts

@@ -43,6 +43,24 @@ export interface DropdownMenuContentProps extends ComponentProps<'div'> {
  * crosses the package seam (ticket 07 section 6).
  */
 export interface DropdownMenuItemProps extends ComponentProps<'div'> {
+    /**
+     * The element the item is rendered as.
+     *
+     * Declared here rather than re-exported from Base UI so no upstream type crosses
+     * the package seam (ticket 07 section 6), and narrowed to the element form of
+     * the two Base UI accepts. The narrowing is stated because it is a narrowing:
+     * Base UI also takes a function of the props and the component's state, and that
+     * form is not forwarded, because typing it means naming Base UI's own prop and
+     * event types in a declaration a consumer reads. The element form is the one a
+     * menu of links needs, since the attributes that make a row a destination are
+     * the attributes of the anchor itself.
+     *
+     * It is here because a menu item is not always a command: an item that navigates
+     * has to BE the link, because a link nested inside a focusable item is two tab
+     * stops for one row, and a reader who middle-clicks a row that only looks like a
+     * link gets nothing.
+     */
+    render?: React.ReactElement;
     /** Whether the item aligns with the labels above it. @defaultValue false */
     inset?: boolean;
     /** Whether the item reads as a destructive action. @defaultValue default */

package/dist/components/ui/dropdown-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dropdown-menu.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;GAKG;AACH,MAAM,WAAW,iBAAiB;IAChC,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,0DAA0D;IAC1D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,yDAAyD;AACzD,MAAM,WAAW,wBAAyB,SAAQ,cAAc,CAAC,QAAQ,CAAC;CAAG;AAE7E;;;;;GAKG;AACH,MAAM,WAAW,wBAAyB,SAAQ,cAAc,CAAC,KAAK,CAAC;IACrE,4EAA4E;IAC5E,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC1C,mEAAmE;IACnE,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,+EAA+E;IAC/E,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,qEAAqE;IACrE,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED;;;;;GAKG;AACH,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAClE,4EAA4E;IAC5E,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,4EAA4E;IAC5E,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;IACnC,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED;;;;;GAKG;AACH,MAAM,WAAW,6BAA8B,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC5F,mCAAmC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4DAA4D;IAC5D,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,4CAA4C;IAC5C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC1F,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;GAKG;AACH,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACzF,0DAA0D;IAC1D,KAAK,EAAE,MAAM,CAAA;IACb,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED,uDAAuD;AACvD,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,KAAK,CAAC;IACnE,uFAAuF;IACvF,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB;AAED,2DAA2D;AAC3D,MAAM,WAAW,0BAA2B,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAE5E,uDAAuD;AACvD,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAExE,qDAAqD;AACrD,MAAM,WAAW,oBAAoB;IACnC,gDAAgD;IAChD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,+CAA+C;IAC/C,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED;;;;;GAKG;AACH,MAAM,WAAW,2BAA4B,SAAQ,cAAc,CAAC,KAAK,CAAC;IACxE,+EAA+E;IAC/E,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;GAKG;AACH,MAAM,WAAW,2BAA4B,SAAQ,cAAc,CAAC,KAAK,CAAC;IACxE,0DAA0D;IAC1D,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC1C,sEAAsE;IACtE,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAA;IAClC,kFAAkF;IAClF,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAQD;;;;;;;GAOG;AACH,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAEpD;AAED,uCAAuC;AACvC,iBAAS,mBAAmB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,wBAAwB,+BAc7E;AAED,iCAAiC;AACjC,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,IAAe,EACf,KAAe,EACf,UAAc,EACd,WAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,wBAAwB,+BAmB1B;AAED,+BAA+B;AAC/B,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,KAAK,EACL,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAcvB;AAED,oDAAoD;AACpD,iBAAS,wBAAwB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EAAE,6BAA6B,+BAc/B;AAED,2DAA2D;AAC3D,iBAAS,sBAAsB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,2BAA2B,+BAQnF;AAED,uEAAuE;AACvE,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,0BAA0B,+BAa5B;AAED,qDAAqD;AACrD,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,+BAQhF;AAED,yCAAyC;AACzC,iBAAS,qBAAqB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,0BAA0B,+BAQjF;AAED,0CAA0C;AAC1C,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,+BAIzE;AAED,wCAAwC;AACxC,iBAAS,eAAe,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,+BAE1D;AAED,qCAAqC;AACrC,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,2BAA2B,+BAW7B;AAED,+BAA+B;AAC/B,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,KAAe,EACf,UAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,2BAA2B,+BAc7B;AAED,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,wBAAwB,EACxB,sBAAsB,EACtB,qBAAqB,EACrB,iBAAiB,EACjB,qBAAqB,EACrB,iBAAiB,EACjB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,GACvB,CAAA"}
+{"version":3,"file":"dropdown-menu.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dropdown-menu.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/dropdown-menu.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Menu as MenuPrimitive } from '@base-ui/react/menu';
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 const POPUP = 'bg-popover text-popover-foreground z-50 max-h-(--available-height) min-w-36 overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md outline-none transition-[opacity,transform] duration-fast ease-out data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0';
 const ITEM = 'focus:bg-accent focus:text-accent-foreground data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4';
 /**
@@ -18,7 +18,12 @@ function DropdownMenu({ ...props }) {
 }
 /** The element that opens the menu. */
 function DropdownMenuTrigger({ className, ...props }) {
-    return (_jsx(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", className: cn('bg-background shadow-xs inline-flex h-9 items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium outline-none', 'transition-[color,box-shadow,background-color] duration-fast ease-out', 'hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:opacity-50', className), ...props }));
+    return (_jsx(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", className: cn('bg-background shadow-xs inline-flex h-9 items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium outline-none', 'transition-[color,box-shadow,background-color] duration-fast ease-out', 'hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:opacity-50', 
+        // The coarse-pointer floor, as a step, and the same string `popover.tsx` and
+        // `alert-dialog.tsx` draw on theirs: a trigger that opens a popup is a button,
+        // and a band would overhang a trigger the caller sized themselves. See
+        // DESIGN.md, The coarse-pointer floor.
+        'pointer-coarse:h-11', className), ...props }));
 }
 /** The floating menu surface. */
 function DropdownMenuContent({ className, side = 'bottom', align = 'start', sideOffset = 4, alignOffset = 0, children, ...props }) {

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

@@ -0,0 +1,147 @@
+import { type LucideIcon } from 'lucide-react';
+import { type ReactNode } from 'react';
+/** The props the Dropzone accepts. */
+export interface DropzoneProps {
+    /**
+     * Called with the files the reader chose or dropped.
+     *
+     * Required, and it takes the files rather than a count or a promise: what
+     * happens to them next is the caller's, and this Component never uploads,
+     * reads or stores a byte. The list is a fresh array, so a caller may keep it,
+     * sort it or clear it without going back to the input.
+     */
+    onFiles: (files: File[]) => void;
+    /**
+     * The file types the platform's own picker offers, as the HTML `accept`
+     * attribute's value.
+     *
+     * A hint, and only to the picker: the browser applies it to the dialog it
+     * opens and to nothing else, so files dragged onto this target arrive whatever
+     * they are. A caller that needs a type check does it in `onFiles`, where the
+     * caller's own rules are, rather than here.
+     */
+    accept?: string;
+    /**
+     * Whether the reader may hand over more than one file at a time.
+     *
+     * Defaults to true, because a target that silently keeps the first of four
+     * dropped files is a worse surprise than one that hands over all four and lets
+     * the caller take one. @defaultValue true
+     */
+    multiple?: boolean;
+    /**
+     * Whether the target refuses files.
+     *
+     * Drawn rather than set: the control keeps its focus ring and its place in the
+     * tab order, and announces itself as unavailable. See the note on the
+     * Component below for why.
+     */
+    disabled?: boolean;
+    /**
+     * The instruction the reader sees on the target.
+     *
+     * Required, and required as this Component's own visible text rather than as a
+     * default it falls back to. The words are a claim about the reader's task in
+     * the reader's language, and a target that says "Drop files here" in a product
+     * whose interface is in another language is a sentence this package wrote on
+     * somebody's behalf.
+     */
+    label: ReactNode;
+    /**
+     * A second line under the instruction, for the part of the sentence the label
+     * has no room for.
+     *
+     * What the reader may do is a `label`; what happens to the file afterwards is
+     * a `description`, and putting both in one string is how a target ends up
+     * reading as a paragraph in the middle of a form.
+     */
+    description?: ReactNode;
+    /**
+     * The mark above the instruction.
+     *
+     * Defaults to an upward arrow into a tray, which is a drawing of a gesture and
+     * not a word, so the one picture this Component does ship says nothing in any
+     * language. Pass any Lucide icon to replace it.
+     */
+    icon?: LucideIcon;
+    /**
+     * The accepted types line, under everything else.
+     *
+     * A node, because the useful half of it is the caller's: "PDF or PNG, up to
+     * 10 MB" is a claim about the caller's product and its limits, and
+     * "3 files maximum" is a claim about a rule only the caller has. Prism draws the
+     * line and reads no file type of its own.
+     */
+    hint?: ReactNode;
+    /** Layout only. */
+    className?: string;
+}
+/**
+ * A target the reader drops files onto, which is also a button that opens the
+ * platform's file picker.
+ *
+ * **It is a `<button>`, and not a `<div>` with handlers on it.** A div is not
+ * reachable by keyboard, cannot be pressed with Enter or Space, and has no
+ * accessible name until one is invented for it out of `aria-label` and no
+ * border to draw a focus ring on. The result is a control that looks usable,
+ * works with a mouse, and is invisible to the reader the gate on focus
+ * indicators exists for. That gate is not a formality here: it is the gate that
+ * says an element which claims to be operable has to draw its own indicator, and
+ * a claim of operability that is not real is exactly what it is looking for. A
+ * dropzone built on a div also cannot be a form control, so it cannot take a
+ * name, cannot be submitted and cannot be reached by a reader who never moves a
+ * mouse at all.
+ *
+ * **The visible label is the caller's, and there is no default.** A drop target
+ * that says "Drop files here" in a consumer's product is a claim in a language
+ * the consumer did not choose, in the one place on the page where a reader is
+ * about to act, and it is the sentence a translation tool is least likely to
+ * catch because it is inside a design system rather than inside a product's copy.
+ * The mark is the one thing this Component draws, and it is a drawing of a
+ * gesture, so it says nothing in any language.
+ *
+ * **Disabled means `aria-disabled`, and the control stays in the tab order.** A
+ * removed focus target is a keyboard reader's dead end: the reader tabs onto it,
+ * presses Enter or Space, and nothing at all happens, with no announcement to say
+ * why. They cannot tell the control is unavailable, they cannot find out what
+ * would make it available, and there is nothing on the page pointing at the
+ * thing that does. So the control keeps its ring and its place in the order, is
+ * marked `aria-disabled` so it announces itself as unavailable, is dimmed so the
+ * state is visible as well as spoken, and refuses both the click and the drop
+ * without ever being removed. The cost is one tab stop that does nothing, which
+ * is the same price every disabled control in every system pays and the reason
+ * disabled controls are written rather than omitted.
+ *
+ * **A drop is refused by not calling `preventDefault` on the dragover, and not
+ * by swallowing the drop afterwards.** The platform offers a drop only where a
+ * dragover handler prevents the default, so a disabled target that skipped that
+ * one call would still show the platform's own no-drop cursor over itself while
+ * quietly discarding the files. A target that refuses has to refuse in the place
+ * the cursor is decided.
+ *
+ * **The drag state is counted, not toggled.** A drag enters and leaves every
+ * child it crosses, so a boolean that follows the events flickers as the pointer
+ * moves over the mark and the instruction. A depth counter is four lines and it
+ * is the difference between a target that lights up once and one that strobes.
+ *
+ * **The input is cleared after every pick.** Browsers do not fire a change event
+ * for a file that is already selected, so a reader who picks the same file twice
+ * in a row would get one call to `onFiles` and no way to ask again. Setting the
+ * value back to empty after reading it is what makes the second pick an event.
+ *
+ * **The only motion is the drag-over colour.** It is a state feedback, it is the
+ * one moment the target has something new to say, and under reduced motion it
+ * arrives instantly rather than never, because the reduced-motion rule at the foot
+ * of `packages/ui/src/styles.css` stops every transition rather than sparing the
+ * ones that are not movement. A dropzone that faded, grew or drew an arrow
+ * travelling into itself would be performing, and a target that performs is a
+ * target a reader waits to finish before they know whether their file was
+ * accepted.
+ *
+ * It needs the client directive for the drag state, for the click that opens the
+ * picker and for the ref that reaches the input. None of the three can be known
+ * at a server render.
+ */
+declare function Dropzone({ onFiles, accept, multiple, disabled, label, description, icon: Mark, hint, className, }: DropzoneProps): import("react").JSX.Element;
+export { Dropzone };
+//# sourceMappingURL=dropzone.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropzone.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dropzone.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,KAAK,UAAU,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAId,sCAAsC;AACtC,MAAM,WAAW,aAAa;IAC5B;;;;;;;OAOG;IACH,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAA;IAChC;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;OAQG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAkBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiEG;AACH,iBAAS,QAAQ,CAAC,EAChB,OAAO,EACP,MAAM,EACN,QAAe,EACf,QAAgB,EAChB,KAAK,EACL,WAAW,EACX,IAAI,EAAE,IAAiB,EACvB,IAAI,EACJ,SAAS,GACV,EAAE,aAAa,+BA8Gf;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/components/ui/dropzone.js

@@ -0,0 +1,141 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { UploadIcon } from 'lucide-react';
+import { useRef, useState, } from 'react';
+import { cn } from '../../lib/utils.js';
+/** `dataTransfer.types` has spelled this one in both cases over the years. */
+const CARRIES_FILES = 'files';
+/**
+ * Whether a drag has files on it at all.
+ *
+ * Without this the target lights up for a dragged link, a dragged image out of
+ * another application and a dragged run of selected text, and each of those is a
+ * promise the drop will not keep. The comparison is case-folded because the HTML
+ * specification and the engines that shipped against it disagreed on the casing
+ * for years, and a target that ignores a real file drag over a difference of
+ * case is the worse of the two failures.
+ */
+const carriesFiles = (event) => Array.from(event.dataTransfer.types).some((type) => type.toLowerCase() === CARRIES_FILES);
+/**
+ * A target the reader drops files onto, which is also a button that opens the
+ * platform's file picker.
+ *
+ * **It is a `<button>`, and not a `<div>` with handlers on it.** A div is not
+ * reachable by keyboard, cannot be pressed with Enter or Space, and has no
+ * accessible name until one is invented for it out of `aria-label` and no
+ * border to draw a focus ring on. The result is a control that looks usable,
+ * works with a mouse, and is invisible to the reader the gate on focus
+ * indicators exists for. That gate is not a formality here: it is the gate that
+ * says an element which claims to be operable has to draw its own indicator, and
+ * a claim of operability that is not real is exactly what it is looking for. A
+ * dropzone built on a div also cannot be a form control, so it cannot take a
+ * name, cannot be submitted and cannot be reached by a reader who never moves a
+ * mouse at all.
+ *
+ * **The visible label is the caller's, and there is no default.** A drop target
+ * that says "Drop files here" in a consumer's product is a claim in a language
+ * the consumer did not choose, in the one place on the page where a reader is
+ * about to act, and it is the sentence a translation tool is least likely to
+ * catch because it is inside a design system rather than inside a product's copy.
+ * The mark is the one thing this Component draws, and it is a drawing of a
+ * gesture, so it says nothing in any language.
+ *
+ * **Disabled means `aria-disabled`, and the control stays in the tab order.** A
+ * removed focus target is a keyboard reader's dead end: the reader tabs onto it,
+ * presses Enter or Space, and nothing at all happens, with no announcement to say
+ * why. They cannot tell the control is unavailable, they cannot find out what
+ * would make it available, and there is nothing on the page pointing at the
+ * thing that does. So the control keeps its ring and its place in the order, is
+ * marked `aria-disabled` so it announces itself as unavailable, is dimmed so the
+ * state is visible as well as spoken, and refuses both the click and the drop
+ * without ever being removed. The cost is one tab stop that does nothing, which
+ * is the same price every disabled control in every system pays and the reason
+ * disabled controls are written rather than omitted.
+ *
+ * **A drop is refused by not calling `preventDefault` on the dragover, and not
+ * by swallowing the drop afterwards.** The platform offers a drop only where a
+ * dragover handler prevents the default, so a disabled target that skipped that
+ * one call would still show the platform's own no-drop cursor over itself while
+ * quietly discarding the files. A target that refuses has to refuse in the place
+ * the cursor is decided.
+ *
+ * **The drag state is counted, not toggled.** A drag enters and leaves every
+ * child it crosses, so a boolean that follows the events flickers as the pointer
+ * moves over the mark and the instruction. A depth counter is four lines and it
+ * is the difference between a target that lights up once and one that strobes.
+ *
+ * **The input is cleared after every pick.** Browsers do not fire a change event
+ * for a file that is already selected, so a reader who picks the same file twice
+ * in a row would get one call to `onFiles` and no way to ask again. Setting the
+ * value back to empty after reading it is what makes the second pick an event.
+ *
+ * **The only motion is the drag-over colour.** It is a state feedback, it is the
+ * one moment the target has something new to say, and under reduced motion it
+ * arrives instantly rather than never, because the reduced-motion rule at the foot
+ * of `packages/ui/src/styles.css` stops every transition rather than sparing the
+ * ones that are not movement. A dropzone that faded, grew or drew an arrow
+ * travelling into itself would be performing, and a target that performs is a
+ * target a reader waits to finish before they know whether their file was
+ * accepted.
+ *
+ * It needs the client directive for the drag state, for the click that opens the
+ * picker and for the ref that reaches the input. None of the three can be known
+ * at a server render.
+ */
+function Dropzone({ onFiles, accept, multiple = true, disabled = false, label, description, icon: Mark = UploadIcon, hint, className, }) {
+    const inputRef = useRef(null);
+    // The number of drag events currently inside the target. A leave event fires
+    // for every child the pointer leaves as well as for the target itself, so the
+    // depth rather than a boolean is what says whether the pointer is still over it.
+    const depth = useRef(0);
+    const [over, setOver] = useState(false);
+    const take = (list) => {
+        if (list === null)
+            return;
+        const files = Array.from(list);
+        if (files.length === 0)
+            return;
+        onFiles(multiple ? files : files.slice(0, 1));
+    };
+    const onPick = (event) => {
+        take(event.target.files);
+        event.target.value = '';
+    };
+    const onActivate = () => {
+        if (disabled)
+            return;
+        inputRef.current?.click();
+    };
+    const onDragEnter = (event) => {
+        if (disabled || !carriesFiles(event))
+            return;
+        event.preventDefault();
+        depth.current += 1;
+        setOver(true);
+    };
+    const onDragOver = (event) => {
+        // The one handler that decides whether a drop is offered at all. Leaving the
+        // default unprevented here is what makes a disabled target refuse the drop
+        // rather than accept it and throw it away.
+        if (disabled || !carriesFiles(event))
+            return;
+        event.preventDefault();
+        setOver(true);
+    };
+    const onDragLeave = (event) => {
+        event.preventDefault();
+        depth.current = Math.max(0, depth.current - 1);
+        if (depth.current === 0)
+            setOver(false);
+    };
+    const onDrop = (event) => {
+        event.preventDefault();
+        depth.current = 0;
+        setOver(false);
+        if (disabled)
+            return;
+        take(event.dataTransfer.files);
+    };
+    return (_jsxs("div", { "data-slot": "dropzone", className: cn('relative flex w-full flex-col', className), children: [_jsx("input", { ref: inputRef, type: "file", "data-slot": "dropzone-input", className: "sr-only", tabIndex: -1, multiple: multiple, ...(accept === undefined ? null : { accept }), onChange: onPick }), _jsxs("button", { type: "button", "data-slot": "dropzone-target", "data-dragging": over || undefined, "aria-disabled": disabled || undefined, onClick: onActivate, onDragEnter: onDragEnter, onDragOver: onDragOver, onDragLeave: onDragLeave, onDrop: onDrop, className: cn('border-input bg-background text-foreground flex w-full cursor-pointer flex-col items-center justify-center gap-1.5 rounded-lg border border-dashed px-6 py-8 text-center outline-none', 'transition-colors duration-fast', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'aria-disabled:cursor-not-allowed aria-disabled:opacity-50', over && 'border-primary bg-accent text-accent-foreground'), children: [_jsx(Mark, { className: "text-muted-foreground size-6", "aria-hidden": "true" }), _jsx("span", { "data-slot": "dropzone-label", className: "text-sm font-medium", children: label }), description === undefined ? null : (_jsx("span", { "data-slot": "dropzone-description", className: "text-muted-foreground text-sm", children: description })), hint === undefined ? null : (_jsx("span", { "data-slot": "dropzone-hint", className: "text-muted-foreground text-xs", children: hint }))] })] }));
+}
+export { Dropzone };