@nanisoft/prism-ui 0.10.2 → 0.15.0

package/dist/components/ui/accordion.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
 import { ChevronDownIcon } from 'lucide-react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 /**
  * A stack of headers that each reveal a panel.
  *
@@ -21,10 +21,17 @@ function AccordionItem({ className, ...props }) {
 }
 /** The button that opens and closes its panel. */
 function AccordionTrigger({ className, children, ...props }) {
-    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn('focus-visible:border-ring focus-visible:ring-ring flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium outline-none', 'transition-[color,box-shadow] duration-fast ease-out hover:underline focus-visible:ring-[3px]', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-base ease-out data-[panel-open]:rotate-180" })] }) }));
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn('focus-visible:border-ring focus-visible:ring-ring flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium outline-none', 'transition-[color,box-shadow] duration-fast ease-out hover:underline focus-visible:ring-[3px]', 'data-[disabled]:pointer-events-none data-[disabled]:opacity-50', className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-slow ease-out data-[panel-open]:rotate-180" })] }) }));
 }
 /** The panel an AccordionTrigger reveals. */
 function AccordionContent({ className, ...props }) {
-    return (_jsx(AccordionPrimitive.Panel, { "data-slot": "accordion-content", className: cn('h-(--accordion-panel-height) overflow-hidden text-sm', 'transition-[height] duration-base ease-out data-[starting-style]:h-0 data-[ending-style]:h-0', className), ...props, children: _jsx("div", { className: "pt-0 pb-4", children: props.children }) }));
+    return (_jsx(AccordionPrimitive.Panel, { "data-slot": "accordion-content", className: cn('h-(--accordion-panel-height) overflow-hidden text-sm', 
+        // `duration-slow` and not `duration-base`, because this is the disclosure the
+        // motion scale in `DESIGN.md` names as the case `slow` exists for: "transform
+        // or layout state such as a disclosure". The chevron above carries the same
+        // step rather than `base`, because a 160ms icon against a 280ms panel reads
+        // as two events and a reader is looking at both at once. The rest of this
+        // Component stays on `fast` and `base` because the rest of it is colour.
+        'transition-[height] duration-slow ease-out data-[starting-style]:h-0 data-[ending-style]:h-0', className), ...props, children: _jsx("div", { className: "pt-0 pb-4", children: props.children }) }));
 }
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/components/ui/alert-dialog.d.ts

@@ -0,0 +1,119 @@
+import type { ComponentProps } from 'react';
+/**
+ * The props the AlertDialog root forwards to Base UI.
+ *
+ * Declared here rather than re-exported from Base UI so no upstream type
+ * crosses the package seam (ticket 07 section 6).
+ *
+ * `modal` and `disablePointerDismissal` are absent on purpose, and their absence
+ * is the Component rather than an oversight. Base UI hard-wires both to true for
+ * an alert dialog and omits them from the root's prop type, so there is no value
+ * a caller can pass that turns a must-answer decision into something a stray
+ * click can wave through. A caller who wants a dismissible surface is asking for
+ * a Dialog, and the type is how they are told so.
+ */
+export interface AlertDialogProps {
+    /** The controlled open state. */
+    open?: boolean;
+    /** The initially open state, for an uncontrolled alert dialog. */
+    defaultOpen?: boolean;
+    /** Called when the open state changes. */
+    onOpenChange?: (open: boolean) => void;
+    /** The trigger and content. */
+    children?: React.ReactNode;
+}
+/** The props AlertDialogTrigger forwards to Base UI. */
+export interface AlertDialogTriggerProps extends ComponentProps<'button'> {
+}
+/**
+ * The props AlertDialogContent forwards to Base UI.
+ *
+ * Declared here rather than re-exported from Base UI so no upstream type
+ * crosses the package seam (ticket 07 section 6).
+ */
+export interface AlertDialogContentProps extends ComponentProps<'div'> {
+}
+/** The props AlertDialogHeader forwards to a plain container. */
+export interface AlertDialogHeaderProps extends ComponentProps<'div'> {
+}
+/** The props AlertDialogFooter forwards to a plain container. */
+export interface AlertDialogFooterProps extends ComponentProps<'div'> {
+}
+/** The props AlertDialogTitle forwards to Base UI. */
+export interface AlertDialogTitleProps extends ComponentProps<'h2'> {
+}
+/** The props AlertDialogDescription forwards to Base UI. */
+export interface AlertDialogDescriptionProps extends ComponentProps<'p'> {
+}
+/**
+ * The action, which is the one button that must exist.
+ *
+ * It is styled rather than left bare because a caller who forgets to style it
+ * ships the one control a reader is about to press as unlabelled text, and the
+ * default is `destructive` because an alert dialog whose action is not
+ * destructive had no reason to interrupt in the first place. Pass
+ * `variant="default"` and reconsider whether the decision needed to interrupt.
+ */
+export interface AlertDialogActionProps extends ComponentProps<'button'> {
+    /** How the action reads against the decision it confirms. @defaultValue destructive */
+    variant?: 'default' | 'destructive';
+}
+/** The props AlertDialogCancel forwards to Base UI. */
+export interface AlertDialogCancelProps extends ComponentProps<'button'> {
+}
+/**
+ * A dialog that interrupts, and will not let the reader out of it by accident.
+ *
+ * **The difference from a Dialog is the whole Component.** A Dialog closes on an
+ * outside press, because a reader who clicks away from a task has said "not now"
+ * and the task is still there when they come back. An alert dialog exists for a
+ * decision that a mis-click would answer: deleting a project, discarding a draft,
+ * ending a session. An outside press there is a stray gesture that silently
+ * chooses for the reader, so Base UI hard-wires dismissal off and this Component
+ * does not expose a prop that could turn it back on. Escape still closes it,
+ * because a keyboard reader must always have a way out, and a reader who
+ * presses Escape has said the same thing deliberately.
+ *
+ * **The two buttons are the only other way out, and the action is required.**
+ * There is no dismiss control in the corner: an X on a surface whose subject is a
+ * decision is a third answer to a question the reader was told has two. Give it
+ * an `AlertDialogCancel` and an `AlertDialogAction`, always in that order, with
+ * the action last so it is the one a keyboard reader lands on second and the
+ * destructive one styled as such.
+ *
+ * **Always give it an `AlertDialogTitle`.** It names the dialog for every
+ * reader, and it is what the surface is announced as. Use a Dialog for a short
+ * task; use an AlertDialog only where the answer is not safely deferrable.
+ */
+declare function AlertDialog({ ...props }: AlertDialogProps): import("react").JSX.Element;
+/** The element that opens the alert dialog. */
+declare function AlertDialogTrigger({ className, ...props }: AlertDialogTriggerProps): import("react").JSX.Element;
+/** The alert dialog panel, its backdrop and its portal. */
+declare function AlertDialogContent({ className, ...props }: AlertDialogContentProps): import("react").JSX.Element;
+/** The alert dialog's heading area, above the body. */
+declare function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): import("react").JSX.Element;
+/** The alert dialog's two buttons, side by side. */
+declare function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps): import("react").JSX.Element;
+/** The alert dialog's heading. It names the dialog for assistive technology. */
+declare function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps): import("react").JSX.Element;
+/**
+ * The consequence, in the reader's words, before the buttons.
+ *
+ * This is where the answerable question goes: what happens, to what, and whether
+ * it can be taken back. A description that only restates the title gives the
+ * reader a decision with nothing to decide on.
+ */
+declare function AlertDialogDescription({ className, ...props }: AlertDialogDescriptionProps): import("react").JSX.Element;
+/**
+ * The button that carries out the decision, and closes the dialog with it.
+ *
+ * It is styled rather than left bare because a caller who forgets to style it
+ * ships the one control a reader is about to press as unlabelled text, and the
+ * default is `destructive` because an alert dialog whose action is not
+ * destructive had no reason to interrupt in the first place.
+ */
+declare function AlertDialogAction({ className, variant, ...props }: AlertDialogActionProps): import("react").JSX.Element;
+/** The button that leaves the decision unmade, and closes the dialog. */
+declare function AlertDialogCancel({ className, ...props }: AlertDialogCancelProps): import("react").JSX.Element;
+export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };
+//# sourceMappingURL=alert-dialog.d.ts.map

package/dist/components/ui/alert-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/alert-dialog.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,gBAAgB;IAC/B,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,kEAAkE;IAClE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,wDAAwD;AACxD,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAAC,QAAQ,CAAC;CAAG;AAE5E;;;;;GAKG;AACH,MAAM,WAAW,uBAAwB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAEzE,iEAAiE;AACjE,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAExE,iEAAiE;AACjE,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAExE,sDAAsD;AACtD,MAAM,WAAW,qBAAsB,SAAQ,cAAc,CAAC,IAAI,CAAC;CAAG;AAEtE,4DAA4D;AAC5D,MAAM,WAAW,2BAA4B,SAAQ,cAAc,CAAC,GAAG,CAAC;CAAG;AAE3E;;;;;;;;GAQG;AACH,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,QAAQ,CAAC;IACtE,uFAAuF;IACvF,OAAO,CAAC,EAAE,SAAS,GAAG,aAAa,CAAA;CACpC;AAED,uDAAuD;AACvD,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,QAAQ,CAAC;CAAG;AAQ3E;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,iBAAS,WAAW,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAElD;AAED,+CAA+C;AAC/C,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,+BAoB3E;AAED,2DAA2D;AAC3D,iBAAS,kBAAkB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,+BAuB3E;AAED,uDAAuD;AACvD,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,+BAQzE;AAED,oDAAoD;AACpD,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,+BAQzE;AAED,gFAAgF;AAChF,iBAAS,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,qBAAqB,+BAQvE;AAED;;;;;;GAMG;AACH,iBAAS,sBAAsB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,2BAA2B,+BAQnF;AAED;;;;;;;GAOG;AACH,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,OAAuB,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,+BAsBlG;AAED,yEAAyE;AACzE,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,+BAoBzE;AAED,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,GAClB,CAAA"}

package/dist/components/ui/alert-dialog.js

@@ -0,0 +1,100 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+import { cn } from '../../lib/utils.js';
+/** The action's own button treatment, because the one button that must exist is this one. */
+const ACTION_VARIANTS = {
+    default: 'bg-background text-foreground hover:bg-accent hover:text-accent-foreground',
+    destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+};
+/**
+ * A dialog that interrupts, and will not let the reader out of it by accident.
+ *
+ * **The difference from a Dialog is the whole Component.** A Dialog closes on an
+ * outside press, because a reader who clicks away from a task has said "not now"
+ * and the task is still there when they come back. An alert dialog exists for a
+ * decision that a mis-click would answer: deleting a project, discarding a draft,
+ * ending a session. An outside press there is a stray gesture that silently
+ * chooses for the reader, so Base UI hard-wires dismissal off and this Component
+ * does not expose a prop that could turn it back on. Escape still closes it,
+ * because a keyboard reader must always have a way out, and a reader who
+ * presses Escape has said the same thing deliberately.
+ *
+ * **The two buttons are the only other way out, and the action is required.**
+ * There is no dismiss control in the corner: an X on a surface whose subject is a
+ * decision is a third answer to a question the reader was told has two. Give it
+ * an `AlertDialogCancel` and an `AlertDialogAction`, always in that order, with
+ * the action last so it is the one a keyboard reader lands on second and the
+ * destructive one styled as such.
+ *
+ * **Always give it an `AlertDialogTitle`.** It names the dialog for every
+ * reader, and it is what the surface is announced as. Use a Dialog for a short
+ * task; use an AlertDialog only where the answer is not safely deferrable.
+ */
+function AlertDialog({ ...props }) {
+    return _jsx(AlertDialogPrimitive.Root, { ...props });
+}
+/** The element that opens the alert dialog. */
+function AlertDialogTrigger({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Trigger, { "data-slot": "alert-dialog-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, 
+        // The coarse-pointer floor, as a step. The trigger opens a dialog and the pair in the
+        // footer confirm and dismiss it, so all three are buttons a finger has to hit, and a
+        // band would overhang a footer button the caller placed in its own row. The cost is a
+        // 44 tall footer on touch rather than a 36 one, which is what the platform's own
+        // dialogs use. See DESIGN.md, The coarse-pointer floor.
+        'pointer-coarse:h-11'), ...props }));
+}
+/** The alert dialog panel, its backdrop and its portal. */
+function AlertDialogContent({ className, ...props }) {
+    return (_jsxs(AlertDialogPrimitive.Portal, { children: [_jsx(AlertDialogPrimitive.Backdrop, { "data-slot": "alert-dialog-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" }), _jsx(AlertDialogPrimitive.Viewport, { className: "fixed inset-0 z-50 flex items-center justify-center p-4", children: _jsx(AlertDialogPrimitive.Popup, { "data-slot": "alert-dialog-content", className: cn('bg-background shadow-md relative grid w-full max-w-overlay-dialog gap-4 rounded-xl border p-6 outline-none', 'transition-[opacity,transform] duration-base ease-out', 'focus-visible:ring-ring focus-visible:ring-[3px]', 'data-[starting-style]:scale-95 data-[starting-style]:opacity-0', 'data-[ending-style]:scale-95 data-[ending-style]:opacity-0', className), ...props }) })] }));
+}
+/** The alert dialog's heading area, above the body. */
+function AlertDialogHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-header", className: cn('flex flex-col gap-2 text-center sm:text-left', className), ...props }));
+}
+/** The alert dialog's two buttons, side by side. */
+function AlertDialogFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "alert-dialog-footer", className: cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className), ...props }));
+}
+/** The alert dialog's heading. It names the dialog for assistive technology. */
+function AlertDialogTitle({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Title, { "data-slot": "alert-dialog-title", className: cn('text-lg leading-none font-semibold tracking-tight', className), ...props }));
+}
+/**
+ * The consequence, in the reader's words, before the buttons.
+ *
+ * This is where the answerable question goes: what happens, to what, and whether
+ * it can be taken back. A description that only restates the title gives the
+ * reader a decision with nothing to decide on.
+ */
+function AlertDialogDescription({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Description, { "data-slot": "alert-dialog-description", className: cn('text-muted-foreground text-sm', className), ...props }));
+}
+/**
+ * The button that carries out the decision, and closes the dialog with it.
+ *
+ * It is styled rather than left bare because a caller who forgets to style it
+ * ships the one control a reader is about to press as unlabelled text, and the
+ * default is `destructive` because an alert dialog whose action is not
+ * destructive had no reason to interrupt in the first place.
+ */
+function AlertDialogAction({ className, variant = 'destructive', ...props }) {
+    return (_jsx(AlertDialogPrimitive.Close, { "data-slot": "alert-dialog-action", "data-variant": variant, className: cn('inline-flex h-9 items-center justify-center gap-2 rounded-md px-4 text-sm font-medium whitespace-nowrap outline-none', 'transition-[color,box-shadow,background-color] duration-fast ease-out', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:opacity-50', ACTION_VARIANTS[variant], className, 
+        // The coarse-pointer floor, as a step. The trigger opens a dialog and the pair in the
+        // footer confirm and dismiss it, so all three are buttons a finger has to hit, and a
+        // band would overhang a footer button the caller placed in its own row. The cost is a
+        // 44 tall footer on touch rather than a 36 one, which is what the platform's own
+        // dialogs use. See DESIGN.md, The coarse-pointer floor.
+        'pointer-coarse:h-11'), ...props }));
+}
+/** The button that leaves the decision unmade, and closes the dialog. */
+function AlertDialogCancel({ className, ...props }) {
+    return (_jsx(AlertDialogPrimitive.Close, { "data-slot": "alert-dialog-cancel", className: cn('bg-background inline-flex h-9 items-center justify-center gap-2 rounded-md border px-4 text-sm font-medium whitespace-nowrap 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, 
+        // The coarse-pointer floor, as a step. The trigger opens a dialog and the pair in the
+        // footer confirm and dismiss it, so all three are buttons a finger has to hit, and a
+        // band would overhang a footer button the caller placed in its own row. The cost is a
+        // 44 tall footer on touch rather than a 36 one, which is what the platform's own
+        // dialogs use. See DESIGN.md, The coarse-pointer floor.
+        'pointer-coarse:h-11'), ...props }));
+}
+export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/components/ui/alert.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cva } from 'class-variance-authority';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 const alertVariants = cva('relative grid w-full items-start gap-x-3 gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] [&>svg]:size-4 [&>svg]:translate-y-0.5', {
     variants: {
         variant: {

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

@@ -0,0 +1,169 @@
+import { type VariantProps } from 'class-variance-authority';
+import { type ComponentProps, type ReactNode } from 'react';
+/**
+ * The surface and the five tones, and nothing else.
+ *
+ * **Every tone states its own fill AND its own ink, which is the Stated Ink Rule
+ * and not a style preference.** An announcement is a bar of body text sitting on
+ * a coloured surface, and a bar is a surface, so an ink left to be inherited is
+ * not the page's foreground by accident: it is whatever happened to be behind the
+ * viewport, and the failure `Cta01` measured was 1.01:1 on a filled `bg-primary`
+ * band. That number is the whole argument. A tone that set only a fill would be
+ * the same bar in a different colour, and no gate in this repository could see
+ * it, because the token gate measures token pairs rather than what a Component
+ * leaves out.
+ *
+ * The five are the five the semantic contract publishes, and each is a fill with a
+ * matched ink rather than a colour chosen to look right: `neutral` is the muted
+ * surface, `info` is the pack's own primary, and `success`, `warning` and
+ * `destructive` are the three status roles. `info` using the pack's brand hue is
+ * the decision worth naming, because a reader has been trained to read a saturated
+ * brand bar as a brand, and an informational notice is the one message in this
+ * package that is not about the brand. It is a notification rather than a
+ * decoration, the pack hue is the strongest ink the contract offers on a coloured
+ * surface, and the alternative, a blue that exists in no token, is a colour this
+ * package would have to hold rather than inherit.
+ */
+declare const announcementVariants: (props?: ({
+    variant?: "destructive" | "success" | "warning" | "neutral" | "info" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The five tones an announcement carries, and the five the contract publishes. */
+export type AnnouncementTone = NonNullable<VariantProps<typeof announcementVariants>['variant']>;
+/** The props an `Announcement` takes. */
+export type AnnouncementProps = Omit<ComponentProps<'div'>, 'children'> & {
+    /**
+     * The message itself: the one sentence, or the short block, the reader has to
+     * act on or know about.
+     *
+     * Required, because an announcement with no message is a coloured bar, and a
+     * coloured bar across the top of a page is a thing a reader stops trusting the
+     * moment it appears for no reason. It is a `ReactNode` rather than a `string`
+     * so the caller can put an emphasis or a link inside it, and it is the reason
+     * the native `title` attribute is removed from the pass-through rather than
+     * forwarded: the two names are the same words with opposite consequences, and an
+     * announcement forwarding both would say the sentence twice to a mouse reader
+     * and once to a keyboard reader, in a surface whose whole job is to say one
+     * thing.
+     */
+    message: ReactNode;
+    /**
+     * The action the reader can take about the message, as a slot.
+     *
+     * A slot and not a label and a handler, and the reason is the same one
+     * `Toast` gives: the action is never the only route to what it does. A bar at
+     * the top of a page that a reader can dismiss, scroll past, or never see at all
+     * is the wrong place for the only link to the thing it is about. So the caller
+     * supplies their own real element, with their own destination, and whatever
+     * that action leads to has to be reachable from the page the reader is already
+     * on. A slot is also what makes the caller's word the word: this package ships
+     * in at least two languages and it will not ship an action's label.
+     */
+    action?: ReactNode;
+    /**
+     * The accessible name of the dismiss control.
+     *
+     * Required whenever the bar is dismissible, and not defaulted, for the reason
+     * every accessible name in this package is a prop: an icon-only control a
+     * reader reaches towards has to say what it is before they press it, and a
+     * default of "Close" is a sentence four consumer products in two languages
+     * cannot all be given.
+     */
+    dismissLabel?: string;
+    /**
+     * Whether the bar can be dismissed at all.
+     *
+     * Off by default. An announcement a reader cannot dismiss is a notice, which is
+     * a real thing to want; an announcement a reader can dismiss but whose
+     * dismissal goes away on the next page load is a bar that lies about having
+     * been read, which is why `onDismiss` exists.
+     *
+     * @defaultValue false
+     */
+    dismissible?: boolean;
+    /**
+     * Called when the reader dismisses the bar, so the caller can take it off the
+     * page for good: remove it from their state, record it against the message it
+     * was about, or stop rendering it.
+     *
+     * The bar hides itself either way; this is the caller's half of the dismissal
+     * and the part that outlives the page. See the JSDoc on the Component for why
+     * Prism does not do it.
+     */
+    onDismiss?: () => void;
+    /**
+     * Which of the five tones the bar carries. @defaultValue 'neutral'
+     */
+    tone?: AnnouncementTone;
+    /** Layout only, exactly as on every Component. */
+    className?: string;
+} & ({
+    /** A dismissible bar, which therefore owes its dismiss control a name. */
+    dismissible: true;
+    dismissLabel: string;
+} | {
+    /**
+     * A bar that cannot be dismissed, and so owes no name to a control it does
+     * not render.
+     */
+    dismissible?: false;
+    dismissLabel?: never;
+});
+/**
+ * A page-level message bar, with an optional action and an optional dismiss.
+ *
+ * **The order is message, then action, then dismiss, and the order is a decision
+ * about where the eye goes rather than about the markup.** The message comes
+ * first because it is the reason the bar exists: a reader who reads nothing else
+ * has still got the thing they needed to know. The action comes second because it
+ * is what to do about the message, and a reader who wants to act should not have
+ * to find the control. The dismiss comes last because it is the one control in
+ * the bar that is about the bar rather than about the message, and a reader who
+ * reaches for it has already read the message. Reversing the last two is the
+ * mistake a flex row makes by accident, and it costs a reader who wanted to act:
+ * they reach for what they read as the close control and dismiss the thing they
+ * came to read. The cost of the order is that on a narrow screen the three parts
+ * compete for one line, which is why the action is a slot the caller can keep to
+ * one word.
+ *
+ * **Every tone states its own fill and its own ink, and the reason is a measured
+ * failure rather than a preference.** This is a coloured surface with body text
+ * on it, so an inherited ink is not the page's foreground by accident: it is
+ * whatever was behind the viewport, and `Cta01` measured 1.01:1 on exactly that
+ * arrangement. The variant table above sets both halves of every tone, and the
+ * cost of that is a longer string per tone than a fill alone would need, which is
+ * a fair trade for a bar that cannot become unreadable by being moved.
+ *
+ * **The region is a `status` and not an `alert`, and the difference is whether the
+ * reader is interrupted.** An announcement is in the document rather than arriving
+ * into it: it is there on first paint, a reader can find it by browsing, and it
+ * is not a consequence of the thing they were doing a moment ago. `role="alert"`
+ * is an assertive live region, which cuts across whatever the reader was reading
+ * and reads it out immediately, and that is right for a failure the reader caused
+ * and has to fix, which is an `Alert` beside the control or a `Dialog` when it
+ * blocks. An announcement is a notice, and a notice that interrupts is a notice
+ * the reader stops reading. The cost is real: a reader who arrives mid-page and
+ * never looks up misses the bar entirely, and the fix for that is the caller's
+ * placement, not a louder role.
+ *
+ * **A dismissed bar hides itself, and Prism does not persist that.** The state is
+ * local to the mounted bar, so a reload brings the message back, which is the
+ * honest behaviour for a notice about something that is still true. A stored
+ * dismissal is a different thing and a deliberate act: it is a record in a
+ * consumer's storage that says this reader has already been told, and that record
+ * outlives the message. When it expires, when it is scoped to a message id rather
+ * than a page, whether a notice about an incident is dismissible at all, and
+ * whether a reader who changes a setting should be told again, are four decisions
+ * about the consumer's product and its data, and Prism will not make any of them
+ * from inside a bar. So `onDismiss` is the seam: the bar hides itself so the
+ * reader is not looking at a thing they dismissed, and the caller is told so the
+ * half that outlives the page is theirs. The cost is that a caller who wants a
+ * dismissible-once notice writes the storage themselves, and a caller who writes
+ * nothing gets a notice that comes back, which is the safe default.
+ *
+ * It is a client Component, and the state is the whole reason. Hiding the bar on
+ * dismiss is one piece of state; there is no clock, no effect and no timer, so
+ * the client cost is the bar and not a running loop.
+ */
+declare function Announcement({ message, action, dismissLabel, dismissible, onDismiss, tone, className, ...props }: AnnouncementProps): import("react").JSX.Element | null;
+export { Announcement };
+//# sourceMappingURL=announcement.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"announcement.d.ts","sourceRoot":"","sources":["../../../src/components/ui/announcement.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAY,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKrE;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,QAAA,MAAM,oBAAoB;;8EAczB,CAAA;AAED,mFAAmF;AACnF,MAAM,MAAM,gBAAgB,GAAG,WAAW,CACxC,YAAY,CAAC,OAAO,oBAAoB,CAAC,CAAC,SAAS,CAAC,CACrD,CAAA;AAED,yCAAyC;AACzC,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACxE;;;;;;;;;;;;;OAaG;IACH,OAAO,EAAE,SAAS,CAAA;IAClB;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;;;;;OASG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,CACA;IACE,0EAA0E;IAC1E,WAAW,EAAE,IAAI,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;CACrB,GACD;IACE;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,YAAY,CAAC,EAAE,KAAK,CAAA;CACrB,CACJ,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,iBAAS,YAAY,CAAC,EACpB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,WAAmB,EACnB,SAAS,EACT,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,iBAAiB,sCAqDnB;AAED,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/components/ui/announcement.js

@@ -0,0 +1,123 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { XIcon } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from './button.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The surface and the five tones, and nothing else.
+ *
+ * **Every tone states its own fill AND its own ink, which is the Stated Ink Rule
+ * and not a style preference.** An announcement is a bar of body text sitting on
+ * a coloured surface, and a bar is a surface, so an ink left to be inherited is
+ * not the page's foreground by accident: it is whatever happened to be behind the
+ * viewport, and the failure `Cta01` measured was 1.01:1 on a filled `bg-primary`
+ * band. That number is the whole argument. A tone that set only a fill would be
+ * the same bar in a different colour, and no gate in this repository could see
+ * it, because the token gate measures token pairs rather than what a Component
+ * leaves out.
+ *
+ * The five are the five the semantic contract publishes, and each is a fill with a
+ * matched ink rather than a colour chosen to look right: `neutral` is the muted
+ * surface, `info` is the pack's own primary, and `success`, `warning` and
+ * `destructive` are the three status roles. `info` using the pack's brand hue is
+ * the decision worth naming, because a reader has been trained to read a saturated
+ * brand bar as a brand, and an informational notice is the one message in this
+ * package that is not about the brand. It is a notification rather than a
+ * decoration, the pack hue is the strongest ink the contract offers on a coloured
+ * surface, and the alternative, a blue that exists in no token, is a colour this
+ * package would have to hold rather than inherit.
+ */
+const announcementVariants = cva('relative flex w-full items-center gap-3 rounded-lg border px-4 py-2.5 text-sm', {
+    variants: {
+        variant: {
+            neutral: 'border-border bg-muted text-foreground',
+            info: 'border-transparent bg-primary text-primary-foreground',
+            success: 'border-transparent bg-success text-success-foreground',
+            warning: 'border-transparent bg-warning text-warning-foreground',
+            destructive: 'border-transparent bg-destructive text-destructive-foreground',
+        },
+    },
+    defaultVariants: { variant: 'neutral' },
+});
+/**
+ * A page-level message bar, with an optional action and an optional dismiss.
+ *
+ * **The order is message, then action, then dismiss, and the order is a decision
+ * about where the eye goes rather than about the markup.** The message comes
+ * first because it is the reason the bar exists: a reader who reads nothing else
+ * has still got the thing they needed to know. The action comes second because it
+ * is what to do about the message, and a reader who wants to act should not have
+ * to find the control. The dismiss comes last because it is the one control in
+ * the bar that is about the bar rather than about the message, and a reader who
+ * reaches for it has already read the message. Reversing the last two is the
+ * mistake a flex row makes by accident, and it costs a reader who wanted to act:
+ * they reach for what they read as the close control and dismiss the thing they
+ * came to read. The cost of the order is that on a narrow screen the three parts
+ * compete for one line, which is why the action is a slot the caller can keep to
+ * one word.
+ *
+ * **Every tone states its own fill and its own ink, and the reason is a measured
+ * failure rather than a preference.** This is a coloured surface with body text
+ * on it, so an inherited ink is not the page's foreground by accident: it is
+ * whatever was behind the viewport, and `Cta01` measured 1.01:1 on exactly that
+ * arrangement. The variant table above sets both halves of every tone, and the
+ * cost of that is a longer string per tone than a fill alone would need, which is
+ * a fair trade for a bar that cannot become unreadable by being moved.
+ *
+ * **The region is a `status` and not an `alert`, and the difference is whether the
+ * reader is interrupted.** An announcement is in the document rather than arriving
+ * into it: it is there on first paint, a reader can find it by browsing, and it
+ * is not a consequence of the thing they were doing a moment ago. `role="alert"`
+ * is an assertive live region, which cuts across whatever the reader was reading
+ * and reads it out immediately, and that is right for a failure the reader caused
+ * and has to fix, which is an `Alert` beside the control or a `Dialog` when it
+ * blocks. An announcement is a notice, and a notice that interrupts is a notice
+ * the reader stops reading. The cost is real: a reader who arrives mid-page and
+ * never looks up misses the bar entirely, and the fix for that is the caller's
+ * placement, not a louder role.
+ *
+ * **A dismissed bar hides itself, and Prism does not persist that.** The state is
+ * local to the mounted bar, so a reload brings the message back, which is the
+ * honest behaviour for a notice about something that is still true. A stored
+ * dismissal is a different thing and a deliberate act: it is a record in a
+ * consumer's storage that says this reader has already been told, and that record
+ * outlives the message. When it expires, when it is scoped to a message id rather
+ * than a page, whether a notice about an incident is dismissible at all, and
+ * whether a reader who changes a setting should be told again, are four decisions
+ * about the consumer's product and its data, and Prism will not make any of them
+ * from inside a bar. So `onDismiss` is the seam: the bar hides itself so the
+ * reader is not looking at a thing they dismissed, and the caller is told so the
+ * half that outlives the page is theirs. The cost is that a caller who wants a
+ * dismissible-once notice writes the storage themselves, and a caller who writes
+ * nothing gets a notice that comes back, which is the safe default.
+ *
+ * It is a client Component, and the state is the whole reason. Hiding the bar on
+ * dismiss is one piece of state; there is no clock, no effect and no timer, so
+ * the client cost is the bar and not a running loop.
+ */
+function Announcement({ message, action, dismissLabel, dismissible = false, onDismiss, tone, className, ...props }) {
+    const [open, setOpen] = useState(true);
+    if (!open)
+        return null;
+    return (_jsxs("div", { "data-slot": "announcement", role: "status", className: cn(announcementVariants({ variant: tone }), className), ...props, children: [_jsx("div", { "data-slot": "announcement-message", className: "min-w-0 flex-1 text-pretty", children: message }), action === undefined ? null : (_jsx("div", { "data-slot": "announcement-action", className: "flex shrink-0 items-center", children: action })), dismissible ? (_jsx(Button, { type: "button", "data-slot": "announcement-dismiss", variant: "ghost", size: "icon", "aria-label": dismissLabel, onClick: () => {
+                    setOpen(false);
+                    onDismiss?.();
+                }, 
+                /*
+                 * The ghost variant's two hover declarations are replaced rather than
+                 * kept, and this is the Stated Ink Rule applied one level in. A ghost
+                 * button inherits its ink, so on this bar it inherits the tone's ink,
+                 * and `hover:bg-accent` with `hover:text-accent-foreground` would put
+                 * that ink on the accent surface instead of the tone's. So the hover
+                 * changes the opacity and nothing else: the fill and the ink that were
+                 * measured together stay exactly as they were, and the reader still gets
+                 * the press feedback. `text-inherit` is how that is spelled, and it
+                 * resolves to the bar's own tone ink rather than to a second one.
+                 * `size-7` is below the 9 the icon variant draws, and the coarse-pointer
+                 * size above it is left alone, so a finger still gets 44px.
+                 */
+                className: "hover:bg-transparent hover:text-inherit opacity-70 transition-opacity duration-fast ease-out hover:opacity-100 size-7 shrink-0", children: _jsx(XIcon, { "aria-hidden": "true", className: "size-4" }) })) : null] }));
+}
+export { Announcement };

package/dist/components/ui/aspect-ratio.d.ts

@@ -0,0 +1,60 @@
+import type { ComponentProps } from 'react';
+/** The props the AspectRatio accepts. */
+export interface AspectRatioProps extends ComponentProps<'div'> {
+    /**
+     * The ratio to hold, as CSS's `aspect-ratio` value: width over height.
+     *
+     * A number rather than a pair, and not a keyword. `16 / 9` is the shape the
+     * CSS property takes and the shape a designer writes, and the keyword set
+     * (`square`, `video`) is closed and short of every ratio a caller actually has.
+     */
+    ratio?: number;
+    /** Layout only. */
+    className?: string;
+}
+/**
+ * A box whose height follows its width at a stated ratio.
+ *
+ * **Why this is a Component and not a class.** The instinct is `className="aspect-video"`
+ * and a caller who has run out of keywords writes `className="aspect-[4/3]"`. Neither
+ * reaches a consumer's browser. Prism's stylesheet scans Prism's own source and
+ * nothing else, because Tailwind is an internal build dependency of this package
+ * and never the consumer's, so a utility that appears in no Prism source file is
+ * a utility no consumer's stylesheet contains. An arbitrary value typed by a
+ * consumer is therefore not a layout decision, it is a silently missing rule and
+ * a box at whatever ratio its content happens to have. `ratio` is a prop so the
+ * ratio is a number this package reads and applies, not a name this package
+ * cannot see.
+ *
+ * **It is not the Diagram's canvas, and the two do not overlap.** The Diagram
+ * draws nodes and the relations between them into a fixed 640 by 400 coordinate
+ * space, fitting whatever coordinates a caller gives it into that space with their
+ * aspect ratio kept, and its own ratio is a consequence of the canvas it draws
+ * into rather than a thing the caller chooses. It is also `role="img"`: the whole
+ * subtree is presentational, and the caller's sentence is what a screen reader
+ * gets. This Component holds arbitrary content at a caller's ratio and keeps that
+ * content in the accessibility tree, so a video, a screenshot, a map or a
+ * placeholder that has not loaded can sit in one without being turned into a
+ * picture of itself. A Diagram cannot be used for any of those, and this cannot
+ * draw a relation.
+ *
+ * **The content is clipped.** A ratio that is only a ratio leaves the content free
+ * to overflow it, and a box whose height is fixed by its width with content
+ * spilling out of the bottom is a box that has failed at the one job it has. A
+ * caller whose content should escape passes `overflow-visible` through
+ * `className`, which is the only override the Component has and which is a
+ * decision a caller makes about their own content rather than about the ratio.
+ *
+ * **A ratio that cannot be drawn falls back rather than collapsing.** A caller
+ * computing a ratio from data that has not arrived passes `NaN` or `0`, and
+ * `aspect-ratio: 0` is a box with no height at all, which looks like a failed
+ * image rather than a missing number. The default ratio is drawn instead and the
+ * value the caller passed is carried on the element as `data-ratio`, so the
+ * substitution is visible in the markup rather than only in the screenshot.
+ *
+ * It is a server Component. It holds no state and reads nothing, so a hundred
+ * media placeholders cost no JavaScript.
+ */
+declare function AspectRatio({ ratio, className, style, ...props }: AspectRatioProps): import("react").JSX.Element;
+export { AspectRatio };
+//# sourceMappingURL=aspect-ratio.d.ts.map

package/dist/components/ui/aspect-ratio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"aspect-ratio.d.ts","sourceRoot":"","sources":["../../../src/components/ui/aspect-ratio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAgB3C,yCAAyC;AACzC,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC7D;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,iBAAS,WAAW,CAAC,EAAE,KAAsB,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAc5F;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}