panelui-web 0.1.0 → 0.2.0

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

@@ -0,0 +1,107 @@
+/**
+ * Card — a surface that holds one thing: a plan, a setting, a summary.
+ *
+ * ```tsx
+ * <Card>
+ *   <Card.Header>
+ *     <Card.Title>Storage</Card.Title>
+ *     <Card.Description>Northwind Studio workspace</Card.Description>
+ *     <Card.Action><Button variant="ghost">Manage</Button></Card.Action>
+ *   </Card.Header>
+ *   <Card.Content>…</Card.Content>
+ *   <Card.Footer variant="panel">…</Card.Footer>
+ * </Card>
+ * ```
+ *
+ * ## The padding is on the parts
+ *
+ * The card itself draws a surface and nothing inside it, and every part
+ * carries its own padding. That is what lets a picture reach the card's
+ * corners with nothing but `overflow-hidden` on the card, and what lets a
+ * footer be a band set into the bottom of it rather than one more row.
+ *
+ * ## The action sits beside the heading
+ *
+ * `Card.Action` is placed in the header's top trailing corner whatever order
+ * it is written in, and the title and description keep the rest of the width.
+ * A button that belongs to the whole card goes there; one that belongs to the
+ * content goes in the content.
+ *
+ * ## It renders on the server
+ *
+ * No state, no effects, no handlers of its own: everything that changes with
+ * `size` or with the parts present is done in CSS, so a page of cards costs no
+ * JavaScript.
+ */
+import type { ComponentProps } from 'react';
+export interface CardProps extends ComponentProps<'div'> {
+    /** `sm` tightens the padding and the title, for a card in a dense grid. Default `default`. */
+    size?: 'default' | 'sm';
+    /**
+     * The element to render. `article` for a card that stands on its own, `li`
+     * for one in a list, `section` for one that groups a part of a page.
+     */
+    as?: 'div' | 'article' | 'section' | 'li';
+}
+declare function CardRoot({ size, as: Element, className, ...props }: CardProps): import("react").JSX.Element;
+declare namespace CardRoot {
+    var displayName: string;
+}
+export interface CardHeaderProps extends ComponentProps<'div'> {
+}
+/** The title, the line under it, and the action beside them. */
+declare function CardHeader({ className, ...props }: CardHeaderProps): import("react").JSX.Element;
+declare namespace CardHeader {
+    var displayName: string;
+}
+export interface CardTitleProps extends ComponentProps<'h3'> {
+    /** The heading level, to fit the page around the card. Default `h3`. */
+    as?: 'h2' | 'h3' | 'h4' | 'div';
+}
+/** What the card is about. A heading, so the page outline includes it. */
+declare function CardTitle({ as: Element, className, ...props }: CardTitleProps): import("react").JSX.Element;
+declare namespace CardTitle {
+    var displayName: string;
+}
+export interface CardDescriptionProps extends ComponentProps<'p'> {
+}
+/** A line under the title. */
+declare function CardDescription({ className, ...props }: CardDescriptionProps): import("react").JSX.Element;
+declare namespace CardDescription {
+    var displayName: string;
+}
+export interface CardActionProps extends ComponentProps<'div'> {
+}
+/** A control for the whole card, held in the header's top trailing corner. */
+declare function CardAction({ className, ...props }: CardActionProps): import("react").JSX.Element;
+declare namespace CardAction {
+    var displayName: string;
+}
+export interface CardContentProps extends ComponentProps<'div'> {
+}
+/** The body. */
+declare function CardContent({ className, ...props }: CardContentProps): import("react").JSX.Element;
+declare namespace CardContent {
+    var displayName: string;
+}
+export interface CardFooterProps extends ComponentProps<'div'> {
+    /**
+     * `plain` continues the card. `panel` is a darker band set into its bottom,
+     * for actions. Default `plain`.
+     */
+    variant?: 'plain' | 'panel';
+}
+/** The row at the bottom, usually the card's actions. */
+declare function CardFooter({ variant, className, ...props }: CardFooterProps): import("react").JSX.Element;
+declare namespace CardFooter {
+    var displayName: string;
+}
+export declare const Card: typeof CardRoot & {
+    Header: typeof CardHeader;
+    Title: typeof CardTitle;
+    Description: typeof CardDescription;
+    Action: typeof CardAction;
+    Content: typeof CardContent;
+    Footer: typeof CardFooter;
+};
+export { CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter };

package/dist/components/card/index.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { tv } from 'tailwind-variants';
+const cardVariants = tv({
+    slots: {
+        root: 'group/card flex flex-col rounded-2xl border bg-card text-card-foreground shadow-xs',
+        header: [
+            'grid auto-rows-min grid-cols-[minmax(0,1fr)] items-start gap-x-4 gap-y-1.5 p-6',
+            'has-data-[slot=card-action]:grid-cols-[minmax(0,1fr)_auto]',
+            'group-data-[size=sm]/card:gap-y-1 group-data-[size=sm]/card:p-4',
+        ],
+        title: 'text-lg font-semibold leading-tight tracking-[-0.01em] group-data-[size=sm]/card:text-base',
+        description: 'text-sm text-muted-foreground',
+        // Its own column, across both of the heading's rows, so a long title wraps
+        // beside it instead of underneath it.
+        action: 'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        // `first:` for a card with no header, which would otherwise start flush.
+        content: 'px-6 pb-6 first:pt-6 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pb-4 group-data-[size=sm]/card:first:pt-4',
+        footer: 'flex items-center gap-2',
+    },
+    variants: {
+        footer: {
+            /** Part of the card: same surface, continuing the content's padding. */
+            plain: {
+                footer: 'px-6 pb-6 first:pt-6 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:pb-4 group-data-[size=sm]/card:first:pt-4',
+            },
+            /**
+             * A band set into the bottom of the card: a rule across its top, a step
+             * darker, and the card's own bottom corners. For a footer that is what
+             * somebody does with the card, not more of what it says.
+             */
+            panel: {
+                footer: 'mt-auto rounded-b-[calc(var(--radius-2xl)-1px)] border-t bg-muted/60 px-6 py-4 group-data-[size=sm]/card:px-4 group-data-[size=sm]/card:py-3',
+            },
+        },
+    },
+});
+function CardRoot({ size = 'default', as: Element = 'div', className, ...props }) {
+    const slots = cardVariants();
+    const Tag = Element;
+    return _jsx(Tag, { "data-slot": "card", "data-size": size, className: slots.root({ className }), ...props });
+}
+CardRoot.displayName = 'Card';
+/** The title, the line under it, and the action beside them. */
+function CardHeader({ className, ...props }) {
+    const slots = cardVariants();
+    return _jsx("div", { "data-slot": "card-header", className: slots.header({ className }), ...props });
+}
+CardHeader.displayName = 'Card.Header';
+/** What the card is about. A heading, so the page outline includes it. */
+function CardTitle({ as: Element = 'h3', className, ...props }) {
+    const slots = cardVariants();
+    const Tag = Element;
+    return _jsx(Tag, { "data-slot": "card-title", className: slots.title({ className }), ...props });
+}
+CardTitle.displayName = 'Card.Title';
+/** A line under the title. */
+function CardDescription({ className, ...props }) {
+    const slots = cardVariants();
+    return _jsx("p", { "data-slot": "card-description", className: slots.description({ className }), ...props });
+}
+CardDescription.displayName = 'Card.Description';
+/** A control for the whole card, held in the header's top trailing corner. */
+function CardAction({ className, ...props }) {
+    const slots = cardVariants();
+    return _jsx("div", { "data-slot": "card-action", className: slots.action({ className }), ...props });
+}
+CardAction.displayName = 'Card.Action';
+/** The body. */
+function CardContent({ className, ...props }) {
+    const slots = cardVariants();
+    return _jsx("div", { "data-slot": "card-content", className: slots.content({ className }), ...props });
+}
+CardContent.displayName = 'Card.Content';
+/** The row at the bottom, usually the card's actions. */
+function CardFooter({ variant = 'plain', className, ...props }) {
+    const slots = cardVariants({ footer: variant });
+    return _jsx("div", { "data-slot": "card-footer", className: slots.footer({ className }), ...props });
+}
+CardFooter.displayName = 'Card.Footer';
+export const Card = Object.assign(CardRoot, {
+    Header: CardHeader,
+    Title: CardTitle,
+    Description: CardDescription,
+    Action: CardAction,
+    Content: CardContent,
+    Footer: CardFooter,
+});
+export { CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter };

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

@@ -0,0 +1,189 @@
+/**
+ * Frame — a widget shell: a panel of rows sitting in a tray, with the tray's
+ * one exposed strip along the top carrying the title.
+ *
+ * ```tsx
+ * <Frame>
+ *   <Frame.Header>
+ *     <Frame.Title>Deploys</Frame.Title>
+ *     <Frame.Action>Last 24 hours</Frame.Action>
+ *   </Frame.Header>
+ *   <Frame.Panel>
+ *     <Frame.Row>
+ *       <Frame.Media><RocketIcon /></Frame.Media>
+ *       <Frame.Content>
+ *         <Frame.Title>main · a41c2e9</Frame.Title>
+ *         <Frame.Description>Production · 2 minutes ago</Frame.Description>
+ *       </Frame.Content>
+ *       <Frame.Actions><Badge>Ready</Badge></Frame.Actions>
+ *     </Frame.Row>
+ *   </Frame.Panel>
+ * </Frame>
+ * ```
+ *
+ * ## Two surfaces, one exposed edge
+ *
+ * The panel sits flush against the shell's left, right and bottom, so the
+ * shell reads as something the panel is set into rather than as a border
+ * round it — and the strip left at the top is the header, which is why the
+ * header needs no rule under it and no background of its own. The panel's
+ * bottom corners are not drawn at all: the shell clips them to its own radius.
+ *
+ * ## Four ways to nest them
+ *
+ * `default` is the tray. `band` holds a bordered card in a thin muted band,
+ * with the band's top strip naming what is inside — the frame for a widget
+ * with one thing to show, a figure or a chart, rather than a list of rows.
+ * `inset` floats the panel clear of the shell on all four sides, at the radius
+ * that keeps the two curves concentric, and the band left round it is a recess
+ * — darker than the panel in a light theme and a dark one alike — that
+ * `Frame.Footer` puts its actions in. `plain` drops the shell, for a frame
+ * inside something that already draws an edge, where a second one just inside
+ * it reads as a double line.
+ *
+ * ## Rows divide themselves
+ *
+ * The panel draws the hairline between its children, so no row has to know
+ * whether it is first. A row with `href` is a link and one with `onClick` is a
+ * button, each with the hover and focus a pressable row should have, and
+ * `chevron` marks one that leads somewhere.
+ *
+ * ## It renders on the server
+ *
+ * The variant reaches the parts through a data attribute and CSS rather than
+ * through context, so a frame has no client JavaScript of its own.
+ */
+import type { ComponentProps, MouseEventHandler, ReactNode } from 'react';
+export type FrameVariant = 'default' | 'band' | 'inset' | 'plain';
+export interface FrameProps extends ComponentProps<'div'> {
+    /**
+     * `default` sets the panel in a tray. `band` holds a bordered card in a
+     * thin muted band, for a widget showing one figure or chart. `inset` floats
+     * the panel in a recessed band and gives `Frame.Footer` somewhere to sit.
+     * `plain` drops the shell, for a frame inside a container that already draws
+     * its own edge.
+     */
+    variant?: FrameVariant;
+}
+declare function FrameRoot({ variant, className, ...props }: FrameProps): import("react").JSX.Element;
+declare namespace FrameRoot {
+    var displayName: string;
+}
+export interface FrameHeaderProps extends ComponentProps<'div'> {
+}
+/**
+ * The strip of shell above the panel: a title, an optional description under
+ * it, and `Frame.Action` on the trailing side.
+ */
+declare function FrameHeader({ className, ...props }: FrameHeaderProps): import("react").JSX.Element;
+declare namespace FrameHeader {
+    var displayName: string;
+}
+export interface FrameTitleProps extends ComponentProps<'h3'> {
+    /** The heading level in a header. Default `h3`; a row title is always a `p`. */
+    as?: 'h2' | 'h3' | 'h4' | 'p';
+}
+/** A caption in the header; the subject line inside `Frame.Content`. */
+declare function FrameTitle({ as: Tag, className, ...props }: FrameTitleProps): import("react").JSX.Element;
+declare namespace FrameTitle {
+    var displayName: string;
+}
+export interface FrameDescriptionProps extends ComponentProps<'p'> {
+}
+/** A line under a title, in the header or in a row. */
+declare function FrameDescription({ className, ...props }: FrameDescriptionProps): import("react").JSX.Element;
+declare namespace FrameDescription {
+    var displayName: string;
+}
+export interface FrameActionProps extends ComponentProps<'div'> {
+}
+/** The header's trailing side: a short status, a link, a small button. */
+declare function FrameAction({ className, ...props }: FrameActionProps): import("react").JSX.Element;
+declare namespace FrameAction {
+    var displayName: string;
+}
+export interface FramePanelProps extends ComponentProps<'div'> {
+}
+/** The card the rows sit on. It draws the hairline between its children. */
+declare function FramePanel({ className, ...props }: FramePanelProps): import("react").JSX.Element;
+declare namespace FramePanel {
+    var displayName: string;
+}
+export interface FrameRowProps extends Omit<ComponentProps<'div'>, 'onClick'> {
+    /** Make the row a link to this address. */
+    href?: string;
+    /** Where a link row opens, as on an `<a>`. */
+    target?: string;
+    /** The relationship of a link row's target, as on an `<a>`. */
+    rel?: string;
+    /** Make the row a button that calls this. Ignored when `href` is set. */
+    onClick?: MouseEventHandler<HTMLElement>;
+    /** A trailing chevron, for a row that leads somewhere. */
+    chevron?: boolean;
+}
+/**
+ * One line of the panel: `Frame.Media`, `Frame.Content` and `Frame.Actions`
+ * side by side. With `href` it is a link and with `onClick` a button.
+ */
+declare function FrameRow({ className, children, chevron, href, target, rel, ...props }: FrameRowProps): import("react").JSX.Element;
+declare namespace FrameRow {
+    var displayName: string;
+}
+export interface FrameMediaProps extends ComponentProps<'div'> {
+}
+/** A row's leading icon, avatar or picture. Holds its size. */
+declare function FrameMedia({ className, ...props }: FrameMediaProps): import("react").JSX.Element;
+declare namespace FrameMedia {
+    var displayName: string;
+}
+export interface FrameContentProps extends ComponentProps<'div'> {
+}
+/**
+ * The flexible middle of a row, usually a title over a description. It takes
+ * what the media and actions leave and may shrink past its content, which is
+ * what keeps a long line from pushing the rest of the row off the edge.
+ */
+declare function FrameContent({ className, ...props }: FrameContentProps): import("react").JSX.Element;
+declare namespace FrameContent {
+    var displayName: string;
+}
+export interface FrameActionsProps extends ComponentProps<'div'> {
+}
+/** A row's trailing side: a badge, a value, a switch, a small button. Holds its size. */
+declare function FrameActions({ className, ...props }: FrameActionsProps): import("react").JSX.Element;
+declare namespace FrameActions {
+    var displayName: string;
+}
+export interface FrameSectionProps extends Omit<ComponentProps<'section'>, 'title'> {
+    /** The heading over the section's rows. */
+    title?: ReactNode;
+}
+/** A labelled group of rows, for a panel holding more than one. */
+declare function FrameSection({ title, className, children, ...props }: FrameSectionProps): import("react").JSX.Element;
+declare namespace FrameSection {
+    var displayName: string;
+}
+export interface FrameFooterProps extends ComponentProps<'div'> {
+}
+/**
+ * The strip below the panel. Under `inset` its children become equal pills in
+ * the recessed band, the shape a row of decisions takes.
+ */
+declare function FrameFooter({ className, ...props }: FrameFooterProps): import("react").JSX.Element;
+declare namespace FrameFooter {
+    var displayName: string;
+}
+export declare const Frame: typeof FrameRoot & {
+    Header: typeof FrameHeader;
+    Title: typeof FrameTitle;
+    Description: typeof FrameDescription;
+    Action: typeof FrameAction;
+    Panel: typeof FramePanel;
+    Row: typeof FrameRow;
+    Media: typeof FrameMedia;
+    Content: typeof FrameContent;
+    Actions: typeof FrameActions;
+    Section: typeof FrameSection;
+    Footer: typeof FrameFooter;
+};
+export { FrameHeader, FrameTitle, FrameDescription, FrameAction, FramePanel, FrameRow, FrameMedia, FrameContent, FrameActions, FrameSection, FrameFooter, };

package/dist/components/frame/index.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { tv } from 'tailwind-variants';
+/*
+ * `inset` geometry. The panel's radius is the shell's less the shell's padding,
+ * so the two curves are concentric — a panel radius that ignored the band
+ * would leave a crescent of shell thicker at the corners than along the sides.
+ */
+const frameVariants = tv({
+    slots: {
+        root: 'group/frame flex flex-col text-foreground',
+        header: [
+            'grid grid-cols-[minmax(0,1fr)] items-center gap-x-3 gap-y-0.5 px-4 pt-2.5 pb-3',
+            'has-data-[slot=frame-action]:grid-cols-[minmax(0,1fr)_auto]',
+            'group-data-[variant=inset]/frame:px-3 group-data-[variant=inset]/frame:pt-1 group-data-[variant=inset]/frame:pb-2.5',
+            'group-data-[variant=plain]/frame:px-1',
+            'group-data-[variant=band]/frame:px-3.5 group-data-[variant=band]/frame:py-2.5',
+        ],
+        /*
+         * One part in two places. In the header it labels the tray, so it stays
+         * quiet; inside a row's content it is the row's subject, so it takes the
+         * foreground and the weight, and truncates rather than pushing the row's
+         * trailing slot out of view.
+         */
+        title: [
+            'text-sm font-medium text-muted-foreground',
+            'in-data-[slot=frame-content]:truncate in-data-[slot=frame-content]:text-foreground',
+            // A band names one thing rather than captioning a list, so its title reads first.
+            'group-data-[variant=band]/frame:text-foreground',
+        ],
+        description: 'text-sm text-muted-foreground in-data-[slot=frame-content]:truncate',
+        action: 'col-start-2 row-span-2 row-start-1 text-sm text-muted-foreground',
+        // The panel's shape follows the root's variant, read from its data attribute.
+        panel: [
+            'flex flex-col divide-y overflow-hidden bg-card text-card-foreground',
+            'group-data-[variant=default]/frame:rounded-t-2xl group-data-[variant=default]/frame:border-t',
+            'group-data-[variant=plain]/frame:rounded-3xl group-data-[variant=plain]/frame:border group-data-[variant=plain]/frame:shadow-xs',
+            'group-data-[variant=inset]/frame:rounded-[30px] group-data-[variant=inset]/frame:bg-popover group-data-[variant=inset]/frame:text-popover-foreground group-data-[variant=inset]/frame:shadow-xs',
+            // 18px is the band's 24 less its 6px of padding: one corner, two curves.
+            'group-data-[variant=band]/frame:rounded-[1.125rem] group-data-[variant=band]/frame:border group-data-[variant=band]/frame:shadow-xs',
+        ],
+        row: 'flex w-full items-center gap-3 px-4 py-3 text-start',
+        rowPressable: [
+            'cursor-pointer outline-none transition-colors hover:bg-muted/60',
+            'focus-visible:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
+        ],
+        chevron: 'size-4 shrink-0 text-muted-foreground/70 rtl:-scale-x-100',
+        media: 'flex shrink-0 items-center justify-center',
+        content: 'flex min-w-0 flex-1 flex-col gap-0.5',
+        actions: 'flex shrink-0 items-center gap-1.5',
+        section: 'flex flex-col divide-y',
+        sectionTitle: 'bg-muted/40 px-4 pt-2.5 pb-1.5 text-xs font-medium uppercase tracking-wider text-muted-foreground',
+        footer: [
+            'flex items-center gap-2 px-4 pt-3 pb-3.5',
+            // Under `inset` the band is a row of equal decisions: equal widths, full pills.
+            'group-data-[variant=inset]/frame:gap-3.5 group-data-[variant=inset]/frame:px-[18px] group-data-[variant=inset]/frame:pt-4 group-data-[variant=inset]/frame:pb-2.5',
+            'group-data-[variant=inset]/frame:*:h-11 group-data-[variant=inset]/frame:*:flex-1 group-data-[variant=inset]/frame:*:rounded-full',
+            'group-data-[variant=plain]/frame:px-1',
+            'group-data-[variant=band]/frame:px-3.5 group-data-[variant=band]/frame:pt-2.5 group-data-[variant=band]/frame:pb-1',
+        ],
+    },
+    variants: {
+        variant: {
+            default: {
+                // `overflow-hidden` is what gives the panel the shell's bottom corners.
+                root: 'overflow-hidden rounded-3xl border bg-muted',
+            },
+            plain: {},
+            band: {
+                root: 'rounded-3xl bg-muted p-1.5',
+            },
+            inset: {
+                // The band is the popover surface with black mixed in, so it is the
+                // darker of the two in either theme, which a step on a grey scale
+                // cannot promise: those run darker one way and lighter the other.
+                root: [
+                    'rounded-[38px] p-2 ring-1 ring-foreground/[0.06]',
+                    'bg-[color-mix(in_oklab,var(--popover),black_5%)] dark:bg-[color-mix(in_oklab,var(--popover),black_14%)]',
+                ],
+            },
+        },
+    },
+    defaultVariants: { variant: 'default' },
+});
+function FrameRoot({ variant = 'default', className, ...props }) {
+    const slots = frameVariants({ variant });
+    return _jsx("div", { "data-slot": "frame", "data-variant": variant, className: slots.root({ className }), ...props });
+}
+FrameRoot.displayName = 'Frame';
+/**
+ * The strip of shell above the panel: a title, an optional description under
+ * it, and `Frame.Action` on the trailing side.
+ */
+function FrameHeader({ className, ...props }) {
+    return _jsx("div", { "data-slot": "frame-header", className: frameVariants().header({ className }), ...props });
+}
+FrameHeader.displayName = 'Frame.Header';
+/** A caption in the header; the subject line inside `Frame.Content`. */
+function FrameTitle({ as: Tag = 'h3', className, ...props }) {
+    return _jsx(Tag, { "data-slot": "frame-title", className: frameVariants().title({ className }), ...props });
+}
+FrameTitle.displayName = 'Frame.Title';
+/** A line under a title, in the header or in a row. */
+function FrameDescription({ className, ...props }) {
+    return (_jsx("p", { "data-slot": "frame-description", className: frameVariants().description({ className }), ...props }));
+}
+FrameDescription.displayName = 'Frame.Description';
+/** The header's trailing side: a short status, a link, a small button. */
+function FrameAction({ className, ...props }) {
+    return _jsx("div", { "data-slot": "frame-action", className: frameVariants().action({ className }), ...props });
+}
+FrameAction.displayName = 'Frame.Action';
+/** The card the rows sit on. It draws the hairline between its children. */
+function FramePanel({ className, ...props }) {
+    return _jsx("div", { "data-slot": "frame-panel", className: frameVariants().panel({ className }), ...props });
+}
+FramePanel.displayName = 'Frame.Panel';
+const Chevron = ({ className }) => (_jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": true, className: className, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m9 6 6 6-6 6" }) }));
+/**
+ * One line of the panel: `Frame.Media`, `Frame.Content` and `Frame.Actions`
+ * side by side. With `href` it is a link and with `onClick` a button.
+ */
+function FrameRow({ className, children, chevron = false, href, target, rel, ...props }) {
+    const slots = frameVariants();
+    const inside = (_jsxs(_Fragment, { children: [children, chevron ? _jsx(Chevron, { className: slots.chevron() }) : null] }));
+    if (href !== undefined) {
+        return (_jsx("a", { "data-slot": "frame-row", href: href, target: target, rel: rel, className: slots.row({ className: [slots.rowPressable(), className] }), ...props, children: inside }));
+    }
+    // `onClick` stays in `props`, so it reaches whichever element is rendered.
+    if (props.onClick !== undefined) {
+        return (_jsx("button", { type: "button", "data-slot": "frame-row", className: slots.row({ className: [slots.rowPressable(), className] }), ...props, children: inside }));
+    }
+    return (_jsx("div", { "data-slot": "frame-row", className: slots.row({ className }), ...props, children: inside }));
+}
+FrameRow.displayName = 'Frame.Row';
+/** A row's leading icon, avatar or picture. Holds its size. */
+function FrameMedia({ className, ...props }) {
+    return _jsx("div", { "data-slot": "frame-media", className: frameVariants().media({ className }), ...props });
+}
+FrameMedia.displayName = 'Frame.Media';
+/**
+ * The flexible middle of a row, usually a title over a description. It takes
+ * what the media and actions leave and may shrink past its content, which is
+ * what keeps a long line from pushing the rest of the row off the edge.
+ */
+function FrameContent({ className, ...props }) {
+    return _jsx("div", { "data-slot": "frame-content", className: frameVariants().content({ className }), ...props });
+}
+FrameContent.displayName = 'Frame.Content';
+/** A row's trailing side: a badge, a value, a switch, a small button. Holds its size. */
+function FrameActions({ className, ...props }) {
+    return _jsx("div", { "data-slot": "frame-actions", className: frameVariants().actions({ className }), ...props });
+}
+FrameActions.displayName = 'Frame.Actions';
+/** A labelled group of rows, for a panel holding more than one. */
+function FrameSection({ title, className, children, ...props }) {
+    const slots = frameVariants();
+    return (_jsxs("section", { "data-slot": "frame-section", className: slots.section({ className }), ...props, children: [title !== undefined ? _jsx("h4", { className: slots.sectionTitle(), children: title }) : null, children] }));
+}
+FrameSection.displayName = 'Frame.Section';
+/**
+ * The strip below the panel. Under `inset` its children become equal pills in
+ * the recessed band, the shape a row of decisions takes.
+ */
+function FrameFooter({ className, ...props }) {
+    return _jsx("div", { "data-slot": "frame-footer", className: frameVariants().footer({ className }), ...props });
+}
+FrameFooter.displayName = 'Frame.Footer';
+export const Frame = Object.assign(FrameRoot, {
+    Header: FrameHeader,
+    Title: FrameTitle,
+    Description: FrameDescription,
+    Action: FrameAction,
+    Panel: FramePanel,
+    Row: FrameRow,
+    Media: FrameMedia,
+    Content: FrameContent,
+    Actions: FrameActions,
+    Section: FrameSection,
+    Footer: FrameFooter,
+});
+export { FrameHeader, FrameTitle, FrameDescription, FrameAction, FramePanel, FrameRow, FrameMedia, FrameContent, FrameActions, FrameSection, FrameFooter, };

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

@@ -0,0 +1,148 @@
+import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
+/** Where the sheet rises from, which is also the direction it leaves in. */
+export type SheetSide = 'bottom' | 'top' | 'left' | 'right';
+export interface SheetProps {
+    children?: ReactNode;
+    /** Whether the sheet is open, when the caller holds that. */
+    open?: boolean;
+    /** Called when the sheet asks to open or close. */
+    onOpenChange?: (open: boolean) => void;
+    /** Whether it starts open, when the caller does not hold it. */
+    defaultOpen?: boolean;
+    /** The edge it rises from and is swiped back to. Default `bottom`. */
+    side?: SheetSide;
+    /**
+     * Whether a click outside, a swipe or Escape closes it. Turn it off for a
+     * sheet that must be answered; `Sheet.Close` still works.
+     */
+    dismissible?: boolean;
+}
+declare function SheetRoot({ children, open, onOpenChange, defaultOpen, side, dismissible, }: SheetProps): import("react").JSX.Element;
+declare namespace SheetRoot {
+    var displayName: string;
+}
+export interface SheetTriggerProps extends Omit<ComponentProps<'button'>, 'children'> {
+    children?: ReactNode;
+    /**
+     * Your own element to be the trigger, such as a styled button. It is given
+     * the click handler and the attributes that tie it to the sheet.
+     */
+    render?: ReactElement;
+}
+/** What opens the sheet. A plain button unless `render` supplies one. */
+declare function SheetTrigger({ render, children, ...props }: SheetTriggerProps): import("react").JSX.Element;
+declare namespace SheetTrigger {
+    var displayName: string;
+}
+export interface SheetContentProps extends Omit<ComponentProps<'div'>, 'children'> {
+    children?: ReactNode;
+    /**
+     * Stand clear of the screen edges with every corner rounded. On by default;
+     * off, the sheet meets the edges it rises from.
+     */
+    detached?: boolean;
+    /**
+     * How tall a top or bottom sheet is. `auto` fits the content; `half` and
+     * `full` take that share of the screen, and `full` meets the edges.
+     */
+    size?: 'auto' | 'half' | 'full';
+    /** Show the grabber. On by default for a top or bottom sheet. */
+    showGrabber?: boolean;
+    /** Show the round close button in the top trailing corner. Default true. */
+    showClose?: boolean;
+    /** Frost the page behind the sheet instead of only dimming it. */
+    blur?: boolean;
+    /**
+     * Draw the sheet in the page instead of over it: no backdrop, no trigger,
+     * always there. For previews and for a layout that shows the sheet as part
+     * of a screen.
+     */
+    inline?: boolean;
+}
+/** The sheet itself, with the backdrop behind it. */
+declare function SheetContent({ children, detached, size, showGrabber, showClose, blur, inline, className, ...props }: SheetContentProps): import("react").JSX.Element;
+declare namespace SheetContent {
+    var displayName: string;
+}
+export interface SheetHeaderProps extends Omit<ComponentProps<'div'>, 'title'> {
+    /** The heading. In an open sheet it is also what the sheet is announced as. */
+    title?: ReactNode;
+    /** A line under the heading. */
+    description?: ReactNode;
+}
+/**
+ * The heading block. It leaves room for the close button beside the title,
+ * so the two share the top line instead of stacking.
+ */
+declare function SheetHeader({ title, description, className, children, ...props }: SheetHeaderProps): import("react").JSX.Element;
+declare namespace SheetHeader {
+    var displayName: string;
+}
+export interface SheetTitleProps extends ComponentProps<'h2'> {
+}
+/** The sheet's name, announced when it opens. */
+declare function SheetTitle({ className, ...props }: SheetTitleProps): import("react").JSX.Element;
+declare namespace SheetTitle {
+    var displayName: string;
+}
+export interface SheetDescriptionProps extends ComponentProps<'p'> {
+}
+/** A sentence under the title, read out after it. */
+declare function SheetDescription({ className, ...props }: SheetDescriptionProps): import("react").JSX.Element;
+declare namespace SheetDescription {
+    var displayName: string;
+}
+export interface SheetBodyProps extends ComponentProps<'div'> {
+}
+/**
+ * The part that scrolls. The header and footer stay put while it moves, and
+ * the scrollbar is a thin drawn thumb that shows while the content is moving.
+ */
+declare function SheetBody({ className, children, ...props }: SheetBodyProps): import("react").JSX.Element;
+declare namespace SheetBody {
+    var displayName: string;
+}
+export interface SheetFooterProps extends ComponentProps<'div'> {
+}
+/** The actions, stacked full width at the bottom of the sheet. */
+declare function SheetFooter({ className, ...props }: SheetFooterProps): import("react").JSX.Element;
+declare namespace SheetFooter {
+    var displayName: string;
+}
+export interface SheetCloseProps extends ComponentProps<'button'> {
+    /**
+     * Your own element to close the sheet with, such as a Cancel button.
+     * Without it, and without children, this is the round close button.
+     */
+    render?: ReactElement;
+    /** Draw the cross glyph. Set for you on the built-in close button. */
+    icon?: boolean;
+}
+/** Closes the sheet. Works even when `dismissible` is off. */
+declare function SheetClose({ render, icon, children, ...props }: SheetCloseProps): import("react").JSX.Element;
+declare namespace SheetClose {
+    var displayName: string;
+}
+export interface SheetStageProps extends ComponentProps<'div'> {
+}
+/**
+ * Wrap the app — or the part of the page a sheet belongs to — in this, and
+ * the page steps back slightly while a sheet is open. Sheets opened anywhere
+ * inside it take part.
+ */
+declare function SheetStage({ className, children, ...props }: SheetStageProps): import("react").JSX.Element;
+declare namespace SheetStage {
+    var displayName: string;
+}
+export declare const Sheet: typeof SheetRoot & {
+    Trigger: typeof SheetTrigger;
+    Content: typeof SheetContent;
+    Header: typeof SheetHeader;
+    Title: typeof SheetTitle;
+    Description: typeof SheetDescription;
+    Body: typeof SheetBody;
+    Footer: typeof SheetFooter;
+    Close: typeof SheetClose;
+    Stage: typeof SheetStage;
+};
+export { SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, };

package/dist/components/sheet/index.js

@@ -0,0 +1,330 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Sheet — a panel that rises over the page from one of its edges, floating
+ * clear of them, and leaves with a swipe.
+ *
+ * ```tsx
+ * <Sheet>
+ *   <Sheet.Trigger render={<Button />}>Edit profile</Sheet.Trigger>
+ *   <Sheet.Content>
+ *     <Sheet.Header title="Edit profile" description="Shown on your public page." />
+ *     <Sheet.Body>…</Sheet.Body>
+ *     <Sheet.Footer>
+ *       <Button>Save</Button>
+ *       <Sheet.Close render={<Button variant="ghost" />}>Cancel</Sheet.Close>
+ *     </Sheet.Footer>
+ *   </Sheet.Content>
+ * </Sheet>
+ * ```
+ *
+ * ## It floats
+ *
+ * A sheet that holds a task for the page is a card laid over it, so by
+ * default it stands a few pixels off every edge with all four corners rounded.
+ * The corners are large and concentric with the gap around them, which is what
+ * makes the card read as belonging to the screen it sits in rather than as a
+ * box dropped onto it. `size="full"` or `detached={false}` gives the gap up and
+ * meets the edges, for a sheet that needs every pixel.
+ *
+ * ## Sheets stack
+ *
+ * A sheet opened from inside another slides over it from the same edge, and
+ * the one underneath steps back: a little smaller, pushed inward so its edge
+ * still shows, and dimmed. Only the first sheet darkens the page, so two open
+ * sheets do not stack two shades of black.
+ *
+ * ## The hand decides
+ *
+ * Every sheet follows a drag and leaves on a flick toward its own edge. The
+ * grabber on a top or bottom sheet says so before anybody tries.
+ */
+import { Drawer } from '@base-ui/react/drawer';
+import { ScrollArea } from '@base-ui/react/scroll-area';
+import { createContext, useContext, useMemo, } from 'react';
+import { tv } from 'tailwind-variants';
+/*
+ * One curve for every movement: the sheet arriving, the one behind it stepping
+ * back, the page receding. A fast start that eases into place reads as weight,
+ * where a symmetric ease reads as a slide show.
+ */
+const MOVE = '[transition:transform_450ms_cubic-bezier(0.32,0.72,0,1),border-radius_450ms_cubic-bezier(0.32,0.72,0,1),margin_450ms_cubic-bezier(0.32,0.72,0,1)]';
+const sheetVariants = tv({
+    slots: {
+        backdrop: [
+            'fixed inset-0 z-50 bg-black opacity-[calc(var(--sheet-dim)*(1-var(--drawer-swipe-progress,0)))]',
+            '[--sheet-dim:0.28] dark:[--sheet-dim:0.5]',
+            'transition-opacity duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] data-swiping:duration-0',
+            'data-starting-style:opacity-0 data-ending-style:opacity-0',
+            'data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*400ms)] motion-reduce:transition-none',
+        ],
+        /*
+         * The viewport holds the gap. The sheet is laid out inside it, so the
+         * distance to every edge is one number, and the corner radius below is
+         * that number's companion.
+         */
+        viewport: 'pointer-events-none fixed inset-0 z-50 flex [--sheet-gap:0.5rem] sm:[--sheet-gap:0.75rem]',
+        popup: [
+            'group/sheet pointer-events-auto relative flex min-h-0 flex-col bg-popover text-popover-foreground outline-none',
+            'shadow-[0_24px_64px_-16px_rgb(0_0_0/0.3)] ring-1 ring-foreground/[0.06] dark:ring-foreground/10',
+            MOVE,
+            'data-swiping:select-none data-swiping:duration-0 data-nested-drawer-swiping:duration-0',
+            'data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*400ms)]',
+            'motion-reduce:transition-none',
+            /*
+             * The stack. Each sheet behind the front one is 4% smaller and pushed
+             * 14px inward from its edge, so a strip of it shows past the one in front
+             * and the depth can be counted. It scales about its inner edge, so the
+             * strip stays put while it shrinks.
+             */
+            '[--sheet-scale:calc(1-var(--nested-drawers,0)*0.04)] [--sheet-push:calc(var(--nested-drawers,0)*14px)]',
+            // A veil in the sheet's own colour: what is on the sheet behind fades, the
+            // same way in either theme, instead of going grey under a black tint.
+            "after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-popover after:opacity-0 after:transition-opacity after:duration-[450ms] after:content-['']",
+            'data-nested-drawer-open:after:opacity-50',
+        ],
+        grabber: [
+            'pointer-events-none absolute inset-x-0 z-10 mx-auto flex h-6 w-24 justify-center',
+            'before:h-[5px] before:w-9 before:rounded-full before:bg-muted-foreground/35',
+        ],
+        close: [
+            'absolute end-4 top-4 z-10 inline-flex size-8 cursor-pointer items-center justify-center rounded-full',
+            'bg-muted text-muted-foreground outline-none transition-[background-color,color,scale] duration-150',
+            'after:absolute after:-inset-1.5 hover:bg-foreground/10 hover:text-foreground active:scale-95',
+            'focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none',
+        ],
+        header: 'flex shrink-0 flex-col gap-1 px-6 pt-6 pb-3',
+        title: 'text-[19px] font-semibold leading-6 tracking-[-0.01em]',
+        description: 'text-[15px] leading-5 text-muted-foreground',
+        body: 'relative flex min-h-0 flex-1 flex-col',
+        bodyViewport: 'min-h-0 flex-1 overscroll-contain outline-none',
+        bodyContent: 'px-6 pb-2',
+        scrollbar: 'my-3 me-1 flex w-1.5 opacity-0 transition-opacity delay-300 data-hovering:opacity-100 data-hovering:delay-0 data-scrolling:opacity-100 data-scrolling:delay-0',
+        thumb: 'relative flex-1 rounded-full bg-foreground/20',
+        footer: 'flex shrink-0 flex-col gap-2 px-6 pt-3 pb-6',
+        /*
+         * The page behind steps back by 3%, not more: enough to read as a layer
+         * underneath, not so much that the page looks like it shrank. It keeps its
+         * own colours and draws no outline of its own: the only edge is the strip
+         * of the surface it steps back onto, which is the muted tone of the theme
+         * rather than black, so it is quiet in light and dark alike. A rim on top
+         * of that strip doubles every border the page sits inside.
+         *
+         * It shrinks about its centre, so the strip is the same width on every
+         * side, and its corners take `--stage-radius`: set that to the radius of
+         * whatever the stage sits in, less the strip, and the two outlines are
+         * concentric instead of a second, tighter curve inside the first.
+         */
+        stage: 'relative isolate overflow-hidden [--stage-radius:1rem]',
+        stageBackground: 'absolute inset-0 -z-10 bg-muted',
+        stagePage: [
+            'relative h-full origin-center bg-background will-change-transform',
+            'transition-[transform,border-radius] duration-[450ms] ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none',
+            '[--stage-progress:calc(1-var(--drawer-swipe-progress,0))]',
+            'data-active:[transform:scale(calc(1-0.03*var(--stage-progress)))]',
+            'data-active:overflow-hidden data-active:rounded-[calc(var(--stage-radius)*var(--stage-progress))]',
+        ],
+    },
+    variants: {
+        side: {
+            bottom: {
+                grabber: 'top-0 items-start pt-1.5',
+                viewport: 'items-end justify-center px-(--sheet-gap) pt-12 pb-[max(var(--sheet-gap),env(safe-area-inset-bottom))]',
+                popup: [
+                    'max-h-full w-full max-w-lg origin-[50%_0] rounded-[32px]',
+                    '[transform:translateY(calc(var(--drawer-swipe-movement-y,0px)-var(--sheet-push)))_scale(var(--sheet-scale))]',
+                    'data-starting-style:[transform:translateY(calc(100%+var(--sheet-gap)+2rem))]',
+                    'data-ending-style:[transform:translateY(calc(100%+var(--sheet-gap)+2rem))]',
+                ],
+            },
+            top: {
+                // Swiped up, so the grabber sits on the edge the hand pushes.
+                grabber: 'bottom-0 items-end pb-1.5',
+                viewport: 'items-start justify-center px-(--sheet-gap) pb-12 pt-[max(var(--sheet-gap),env(safe-area-inset-top))]',
+                popup: [
+                    'max-h-full w-full max-w-lg origin-[50%_100%] rounded-[32px]',
+                    '[transform:translateY(calc(var(--drawer-swipe-movement-y,0px)+var(--sheet-push)))_scale(var(--sheet-scale))]',
+                    'data-starting-style:[transform:translateY(calc(-100%-var(--sheet-gap)-2rem))]',
+                    'data-ending-style:[transform:translateY(calc(-100%-var(--sheet-gap)-2rem))]',
+                ],
+            },
+            left: {
+                viewport: 'items-stretch justify-start p-(--sheet-gap)',
+                popup: [
+                    'h-full w-[min(24rem,calc(100vw-2*var(--sheet-gap)))] origin-[100%_50%] rounded-[28px]',
+                    '[transform:translateX(calc(var(--drawer-swipe-movement-x,0px)+var(--sheet-push)))_scale(var(--sheet-scale))]',
+                    'data-starting-style:[transform:translateX(calc(-100%-var(--sheet-gap)-2rem))]',
+                    'data-ending-style:[transform:translateX(calc(-100%-var(--sheet-gap)-2rem))]',
+                ],
+            },
+            right: {
+                viewport: 'items-stretch justify-end p-(--sheet-gap)',
+                popup: [
+                    'h-full w-[min(24rem,calc(100vw-2*var(--sheet-gap)))] origin-[0_50%] rounded-[28px]',
+                    '[transform:translateX(calc(var(--drawer-swipe-movement-x,0px)-var(--sheet-push)))_scale(var(--sheet-scale))]',
+                    'data-starting-style:[transform:translateX(calc(100%+var(--sheet-gap)+2rem))]',
+                    'data-ending-style:[transform:translateX(calc(100%+var(--sheet-gap)+2rem))]',
+                ],
+            },
+        },
+        size: {
+            auto: {},
+            half: { popup: 'h-[min(50dvh,100%)]' },
+            full: { popup: 'h-full' },
+        },
+        // Meets the edges it rises from instead of standing clear of them.
+        attached: {
+            true: {},
+        },
+        blur: {
+            true: { backdrop: 'backdrop-blur-sm [--sheet-dim:0.16] dark:[--sheet-dim:0.36]' },
+        },
+    },
+    compoundVariants: [
+        {
+            side: 'bottom',
+            attached: true,
+            class: {
+                popup: '-mx-(--sheet-gap) -mb-[max(var(--sheet-gap),env(safe-area-inset-bottom))] max-w-[calc(100%+2*var(--sheet-gap))] rounded-b-none pb-[env(safe-area-inset-bottom)] sm:mx-0 sm:max-w-2xl',
+            },
+        },
+        {
+            side: 'top',
+            attached: true,
+            class: {
+                popup: '-mx-(--sheet-gap) -mt-[max(var(--sheet-gap),env(safe-area-inset-top))] max-w-[calc(100%+2*var(--sheet-gap))] rounded-t-none sm:mx-0 sm:max-w-2xl',
+            },
+        },
+        { side: 'left', attached: true, class: { popup: '-my-(--sheet-gap) -ms-(--sheet-gap) rounded-s-none' } },
+        { side: 'right', attached: true, class: { popup: '-my-(--sheet-gap) -me-(--sheet-gap) rounded-e-none' } },
+    ],
+    defaultVariants: { side: 'bottom', size: 'auto' },
+});
+const SWIPE = {
+    bottom: 'down',
+    top: 'up',
+    left: 'left',
+    right: 'right',
+};
+const SheetContext = createContext(null);
+function useSheet(part) {
+    const context = useContext(SheetContext);
+    if (!context)
+        throw new Error(`${part} must be used inside a <Sheet>.`);
+    return context;
+}
+function SheetRoot({ children, open, onOpenChange, defaultOpen = false, side = 'bottom', dismissible = true, }) {
+    // A sheet inside another sheet's content finds that sheet's context.
+    const parent = useContext(SheetContext);
+    const context = useMemo(() => ({ side, nested: parent !== null && !parent.inline, inline: false, showClose: true }), [side, parent]);
+    return (_jsx(SheetContext.Provider, { value: context, children: _jsx(Drawer.Root, { open: open, defaultOpen: defaultOpen, swipeDirection: SWIPE[side], disablePointerDismissal: !dismissible, onOpenChange: (next, details) => {
+                // The primitive has a switch for a press outside and none for
+                // Escape or a swipe, so those are refused here.
+                if (!next &&
+                    !dismissible &&
+                    details.reason !== 'close-press' &&
+                    details.reason !== 'imperative-action') {
+                    return;
+                }
+                onOpenChange?.(next);
+            }, children: children }) }));
+}
+SheetRoot.displayName = 'Sheet';
+/** What opens the sheet. A plain button unless `render` supplies one. */
+function SheetTrigger({ render, children, ...props }) {
+    return (_jsx(Drawer.Trigger, { render: render, ...props, children: children }));
+}
+SheetTrigger.displayName = 'Sheet.Trigger';
+/** The sheet itself, with the backdrop behind it. */
+function SheetContent({ children, detached = true, size = 'auto', showGrabber, showClose = true, blur = false, inline = false, className, ...props }) {
+    const sheet = useSheet('Sheet.Content');
+    const vertical = sheet.side === 'bottom' || sheet.side === 'top';
+    const slots = sheetVariants({
+        side: sheet.side,
+        size: vertical ? size : undefined,
+        attached: !detached || (vertical && size === 'full'),
+        blur,
+    });
+    const context = useMemo(() => ({ ...sheet, inline, showClose }), [sheet, inline, showClose]);
+    const inside = (_jsxs(_Fragment, { children: [(showGrabber ?? vertical) ? _jsx("div", { "aria-hidden": true, className: slots.grabber() }) : null, showClose ? _jsx(SheetClose, { "aria-label": "Close", className: slots.close(), icon: true }) : null, children] }));
+    if (inline) {
+        return (_jsx(SheetContext.Provider, { value: context, children: _jsx("div", { className: slots.popup({ className: ['[transform:none]', className] }), ...props, children: inside }) }));
+    }
+    return (_jsxs(Drawer.Portal, { children: [sheet.nested ? null : _jsx(Drawer.Backdrop, { className: slots.backdrop() }), _jsx(Drawer.Viewport, { className: slots.viewport(), children: _jsx(Drawer.Popup, { className: slots.popup({ className }), ...props, children: _jsx(SheetContext.Provider, { value: context, children: inside }) }) })] }));
+}
+SheetContent.displayName = 'Sheet.Content';
+/**
+ * The heading block. It leaves room for the close button beside the title,
+ * so the two share the top line instead of stacking.
+ */
+function SheetHeader({ title, description, className, children, ...props }) {
+    const { showClose } = useSheet('Sheet.Header');
+    const slots = sheetVariants();
+    return (_jsxs("div", { className: slots.header({ className: [showClose && 'pe-14', className] }), ...props, children: [title !== undefined ? _jsx(SheetTitle, { children: title }) : null, description !== undefined ? _jsx(SheetDescription, { children: description }) : null, children] }));
+}
+SheetHeader.displayName = 'Sheet.Header';
+/** The sheet's name, announced when it opens. */
+function SheetTitle({ className, ...props }) {
+    const { inline } = useSheet('Sheet.Title');
+    const slots = sheetVariants();
+    if (inline)
+        return _jsx("h2", { className: slots.title({ className }), ...props });
+    return _jsx(Drawer.Title, { className: slots.title({ className }), ...props });
+}
+SheetTitle.displayName = 'Sheet.Title';
+/** A sentence under the title, read out after it. */
+function SheetDescription({ className, ...props }) {
+    const { inline } = useSheet('Sheet.Description');
+    const slots = sheetVariants();
+    if (inline)
+        return _jsx("p", { className: slots.description({ className }), ...props });
+    return _jsx(Drawer.Description, { className: slots.description({ className }), ...props });
+}
+SheetDescription.displayName = 'Sheet.Description';
+/**
+ * The part that scrolls. The header and footer stay put while it moves, and
+ * the scrollbar is a thin drawn thumb that shows while the content is moving.
+ */
+function SheetBody({ className, children, ...props }) {
+    const slots = sheetVariants();
+    return (_jsxs(ScrollArea.Root, { className: slots.body(), children: [_jsx(ScrollArea.Viewport, { className: slots.bodyViewport(), children: _jsx(ScrollArea.Content, { className: slots.bodyContent({ className }), ...props, children: children }) }), _jsx(ScrollArea.Scrollbar, { orientation: "vertical", className: slots.scrollbar(), children: _jsx(ScrollArea.Thumb, { className: slots.thumb() }) })] }));
+}
+SheetBody.displayName = 'Sheet.Body';
+/** The actions, stacked full width at the bottom of the sheet. */
+function SheetFooter({ className, ...props }) {
+    const slots = sheetVariants();
+    return _jsx("div", { className: slots.footer({ className }), ...props });
+}
+SheetFooter.displayName = 'Sheet.Footer';
+/** Closes the sheet. Works even when `dismissible` is off. */
+function SheetClose({ render, icon = false, children, ...props }) {
+    const { inline } = useSheet('Sheet.Close');
+    const content = icon ? (_jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": true, className: "size-4", fill: "none", stroke: "currentColor", strokeWidth: 2.4, strokeLinecap: "round", children: _jsx("path", { d: "M6 6l12 12M18 6L6 18" }) })) : (children);
+    if (inline) {
+        return (_jsx("button", { type: "button", ...props, children: content }));
+    }
+    return (_jsx(Drawer.Close, { render: render, ...props, children: content }));
+}
+SheetClose.displayName = 'Sheet.Close';
+/**
+ * Wrap the app — or the part of the page a sheet belongs to — in this, and
+ * the page steps back slightly while a sheet is open. Sheets opened anywhere
+ * inside it take part.
+ */
+function SheetStage({ className, children, ...props }) {
+    const slots = sheetVariants();
+    return (_jsx(Drawer.Provider, { children: _jsxs("div", { className: slots.stage({ className }), ...props, children: [_jsx(Drawer.IndentBackground, { className: slots.stageBackground() }), _jsx(Drawer.Indent, { className: slots.stagePage(), children: children })] }) }));
+}
+SheetStage.displayName = 'Sheet.Stage';
+export const Sheet = Object.assign(SheetRoot, {
+    Trigger: SheetTrigger,
+    Content: SheetContent,
+    Header: SheetHeader,
+    Title: SheetTitle,
+    Description: SheetDescription,
+    Body: SheetBody,
+    Footer: SheetFooter,
+    Close: SheetClose,
+    Stage: SheetStage,
+});
+export { SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, };

package/dist/index.d.ts

@@ -2,6 +2,9 @@ export { cn } from './lib/cn.js';
 export { RollingNumber, type RollingNumberProps } from './components/rolling-number/index.js';
 export { Planet, PlanetGlobe, PlanetMarker, PlanetControls, type PlanetProps, type PlanetHandle, type PlanetRotation, type PlanetGlobeProps, type PlanetMarkerProps, type PlanetMarkerColor, type PlanetControlsProps, } from './components/planet/index.js';
 export { Feedback, FeedbackTrigger, FeedbackContent, FeedbackPanel, FeedbackTitle, FeedbackClose, FeedbackField, FeedbackFooter, FeedbackCancel, FeedbackSubmit, type FeedbackProps, type FeedbackTriggerProps, type FeedbackContentProps, type FeedbackPanelProps, type FeedbackTitleProps, type FeedbackCloseProps, type FeedbackFieldProps, type FeedbackFooterProps, type FeedbackActionProps, type FeedbackSubmitProps, } from './components/feedback/index.js';
+export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, type CardProps, type CardHeaderProps, type CardTitleProps, type CardDescriptionProps, type CardActionProps, type CardContentProps, type CardFooterProps, } from './components/card/index.js';
+export { Frame, FrameHeader, FrameTitle, FrameDescription, FrameAction, FramePanel, FrameRow, FrameMedia, FrameContent, FrameActions, FrameSection, FrameFooter, type FrameProps, type FrameVariant, type FrameHeaderProps, type FrameTitleProps, type FrameDescriptionProps, type FrameActionProps, type FramePanelProps, type FrameRowProps, type FrameMediaProps, type FrameContentProps, type FrameActionsProps, type FrameSectionProps, type FrameFooterProps, } from './components/frame/index.js';
+export { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, type SheetProps, type SheetSide, type SheetTriggerProps, type SheetContentProps, type SheetHeaderProps, type SheetTitleProps, type SheetDescriptionProps, type SheetBodyProps, type SheetFooterProps, type SheetCloseProps, type SheetStageProps, } from './components/sheet/index.js';
 export { DayGrid, DayGridLegend, type DayGridProps, type DayGridLegendProps, type DayGridColor, type DayCell, type DayLevel, } from './components/day-grid/index.js';
 export { RangeMeter, type RangeMeterProps, type RangeMeterColor, } from './components/range-meter/index.js';
 export { BarPicker, type BarPickerProps, type BarPickerBar, type BarPickerColor, } from './components/bar-picker/index.js';

package/dist/index.js

@@ -2,6 +2,9 @@ export { cn } from './lib/cn.js';
 export { RollingNumber } from './components/rolling-number/index.js';
 export { Planet, PlanetGlobe, PlanetMarker, PlanetControls, } from './components/planet/index.js';
 export { Feedback, FeedbackTrigger, FeedbackContent, FeedbackPanel, FeedbackTitle, FeedbackClose, FeedbackField, FeedbackFooter, FeedbackCancel, FeedbackSubmit, } from './components/feedback/index.js';
+export { Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter, } from './components/card/index.js';
+export { Frame, FrameHeader, FrameTitle, FrameDescription, FrameAction, FramePanel, FrameRow, FrameMedia, FrameContent, FrameActions, FrameSection, FrameFooter, } from './components/frame/index.js';
+export { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription, SheetBody, SheetFooter, SheetClose, SheetStage, } from './components/sheet/index.js';
 export { DayGrid, DayGridLegend, } from './components/day-grid/index.js';
 export { RangeMeter, } from './components/range-meter/index.js';
 export { BarPicker, } from './components/bar-picker/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "panelui-web",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "PanelUI for the web: animated, data-rich React components styled with Tailwind CSS on shadcn tokens.",
   "type": "module",
   "sideEffects": false,