@seekalfred/primitives 0.7.1 → 0.7.3

package/README.md

@@ -132,6 +132,34 @@ makes `description` **required** — React Aria associates the description
 for that role, so a confirmation built from a plain `Dialog` loses the
 sentence explaining what is about to happen.
 
+### Rich content: `body`
+
+`body` puts rich content between the description and the actions: a plan
+comparison, a before/after diff, a quoted reply, a field to fill in or a choice
+to make (a `RadioGroup`). It shares the description's edge and is in the
+dialog's tab order before the actions. `false`, `true` and `""` (as from
+`cond && <X />`) render no body.
+
+```tsx
+<AlertDialog
+  isOpen={open}
+  onOpenChange={setOpen}
+  title="Cancel subscription?"
+  description="You keep Pro until the end of the period, then move to Free."
+  body={<PlanSummary plan={plan} />}
+>
+  <AlertDialogCancel>Keep plan</AlertDialogCancel>
+  <AlertDialogAction onPress={cancel}>Cancel subscription</AlertDialogAction>
+</AlertDialog>
+```
+
+The body is not part of the accessible description: a screen reader announces
+only the `description` sentence with the title, and reads the body in place or
+as focus reaches its controls, each with its own label. So a field or a choice
+belongs in `body`, but the `description` must say everything needed to answer,
+including that something below is required ("Pick what happens to your
+recordings, then confirm.").
+
 ### Migrating from the legacy shadcn AlertDialog
 
 | legacy                     | Alfred                          |                                                     |
@@ -528,6 +556,28 @@ Padding is **block-only on the shell and inline-only on the sections**, which
 is what lets a divider or a full-bleed image run edge to edge. A single `p-6`
 on the shell would make that impossible.
 
+### Featured and flush cards
+
+```tsx
+<Card highlighted>…</Card>   {/* the one featured card in a view */}
+<Card flush>…</Card>         {/* a table, list or chart that meets the top and bottom */}
+```
+
+`highlighted` replaces the hairline with a brand gradient edge (secondary to
+tertiary, so it follows the theme) without changing the card's box. To repaint
+the edge, set the `--card-highlight` custom property on the card element itself
+(`className` or `style` on `Card`): the utility declares it on the card, so a
+value set on an ancestor does not reach it. Use it for one card per view and
+say in the content why it is featured: the edge is decoration. `flush` drops
+the shell's block padding and the gap between parts and clips the content to
+the rounded border, keeping the outline, radius, surface and shadow; a
+`className` padding still wins. The header and footer keep a 24px block
+inset, so their text clears the corner curve; the content stays block-flush.
+Every section keeps its inline padding, so text never sits in the corner, and
+a section's fill (`<CardContent className="bg-muted">`) still reaches the side
+edges because background paints the padding. Both default to `false`, and the two
+compose: a flush featured card keeps its gradient edge.
+
 ### Migrating from the legacy shadcn Card
 
 | legacy                   | Alfred                           |                                                                         |
@@ -682,6 +732,16 @@ What a list shows when it has nothing to show: one muted line, centred in a
 bordered box the width of the list. `action` is an optional next step under the
 text and is omitted from the DOM when absent.
 
+`image` is an optional illustration above the icon and the title (an `<img>`,
+an inline SVG or any element). It is centred, shrinks to fit a narrow box and
+keeps its aspect ratio; its size is the artwork's. The slot reserves no space,
+so set the artwork's intrinsic `width` and `height`, or the layout jumps when
+it loads. The slot does not hide it from assistive technology, so name it:
+give an `<img>` an `alt` (`alt=""` when the title already says it all), and an
+inline `<svg>` `role="img"` with an `aria-label`, or `aria-hidden="true"` when
+it is decorative. Omitted from the DOM when absent; `false` (from
+`cond && <img />`) counts as absent.
+
 ### Motion (EmptyState)
 
 New optional `icon` settles in once when the state first appears (small and transparent to rest over 480ms); a different icon component later swaps in place. A string message swaps as a whole when it changes and the message column follows its height on the smooth spring. The message now sits in an `empty-state-copy` frame.
@@ -1044,6 +1104,20 @@ default). Native input props apply to the input, and `className` goes to the
 input; `disabled` also disables the toggle, and `aria-invalid` gives the box its
 invalid border. The box shares the field look of `Input` and `Textarea`.
 
+`error` is `Input`'s prop: error text under the field, announced as an alert,
+that sets `aria-invalid` and is named in `aria-describedby`. `isRequired` makes
+the input `required` and shows a required marker (an asterisk, hidden from
+assistive technology, which hears the input's own `required`) after the label.
+
+```tsx
+<PasswordField
+  label="API secret"
+  isRequired
+  error={errors.secret?.message}
+  {...register("secret")}
+/>
+```
+
 **The toggle's name changes with its state and it is also `aria-pressed`**, so a
 screen reader may announce both ("Hide password, pressed"); this is not tested
 with a screen reader. Reduced motion drops every transition and the press.
@@ -1135,9 +1209,18 @@ and no number. `formatOptions` reaches it too, so a currency or "3 of 7" needs n
 second prop. `trackClassName` and `fillClassName` are escape hatches for a colour
 no tone covers.
 
+`isIndeterminate` draws a segment 40% of the track wide that sweeps across it
+from the start edge on a loop (right to left in RTL), and announces no value.
+With `labelHidden` and no `showValue` nothing is printed above the track, so the
+6px header gap collapses and the bar sits at the top of its box.
+
+`showCompletion={false}` keeps a bar from saying "done" at 100%: the fill keeps
+its tone and no check lands. Use it for a timer-driven estimate that can reach
+100% before the work finishes.
+
 ### Motion (Progress)
 
-The fill follows the value on the smooth spring (it was a 200ms ease) and the printed percentage counts to the new number on the same spring, so the number always matches the bar. When a default-toned bar completes it eases to the success colour (after 200ms) and a check lands beside the count; an explicit `tone` is never overridden, and a bar that is full at mount shows its check with no motion. A value that is not a percentage (a price) is shown as it is. A changed string label swaps as a whole.
+The fill follows the value on the smooth spring (it was a 200ms ease) and the printed percentage counts to the new number on the same spring, so the number always matches the bar. When a default-toned bar completes it eases to the success colour (after 200ms) and a check lands beside the count; an explicit `tone` is never overridden, `showCompletion={false}` turns both off, and a bar that is full at mount shows its check with no motion. An indeterminate segment sweeps the track every 1.6s; under reduced motion it does not travel, and the fill spans the track and pulses slowly instead. A value that is not a percentage (a price) is shown as it is. A changed string label swaps as a whole.
 
 ## RadioGroup
 
@@ -1148,6 +1231,32 @@ The fill follows the value on the smooth spring (it was a 200ms ease) and the pr
 </RadioGroup>
 ```
 
+### Card variant
+
+`variant="card"` draws each choice as a selectable card: the whole card is the
+target, the title is `children`, and each `Radio` can take a `description` and
+a decorative `icon`. The group becomes a grid, so the caller sets the columns.
+
+```tsx
+<RadioGroup variant="card" value={mode} onChange={setMode} aria-label="How to run" className="sm:grid-cols-2">
+  <Radio value="draft" icon={<DraftIcon />} description="Save as a draft and review it first.">
+    Draft only
+  </Radio>
+  <Radio value="everywhere" description="Apply to every category now.">
+    Run everywhere
+  </Radio>
+</RadioGroup>
+```
+
+- The title alone is the option's name; the description is wired as its
+  description (`aria-describedby`), so a screen reader does not run the two
+  together. The icon is `aria-hidden`.
+- Selected shows twice: a `primary-strong` edge (StatCard's selected pair) and
+  the same dot as the default radio, so it never rests on colour alone.
+- Keyboard is unchanged: one tab stop, arrow keys move and select. The focus
+  ring is drawn on the card, not the dot.
+- `description` and `icon` are ignored by the default variant.
+
 ### Migrating from the legacy RadioGroup
 
 | legacy                              | Alfred                    |                                        |
@@ -1192,6 +1301,8 @@ New opt-in `fade` (px, default `0` = off, so an area is unchanged) fades the con
 
 ```tsx
 <SearchField label="Search contacts" value={query} onValueChange={setQuery} />
+<SearchField label="Search tickets" labelHidden size="sm" placeholder="Search tickets"
+             value={query} onValueChange={setQuery} />
 ```
 
 A search input with a clear button. It is controlled: `value` and
@@ -1205,7 +1316,13 @@ animation, and while the button leaves it cannot be pressed or focused. The
 magnifier is muted at rest and takes full contrast while the field has focus or
 a value.
 
-`label` is required and visible; `clearLabel` renames the button (default "Clear
+`label` is required and visible unless `labelHidden` is set, which keeps it as
+the input's accessible name (`aria-label`) without printing it — for a toolbar
+search whose purpose the surrounding UI already shows. That holds inside a
+React Aria `TextField` too, including one with no `Label` child. `size` (`sm` · `md` ·
+`lg`, default `md`) takes the same `--density-control-*` height and padding as
+Input, Select and Button, and `sm` takes Input's 14px text (16px on a touch
+screen). `clearLabel` renames the button (default "Clear
 search"). Native input props apply to the input, `className` goes to the input,
 and `disabled` also disables the clear button. The browser's own clear button
 and search decoration are hidden. The box shares the field look of `Input`.
@@ -1270,17 +1387,26 @@ only — WCAG 1.4.1. The message is wired into `aria-describedby` for you.
 ```tsx
 <Separator />
 <Separator orientation="vertical" />
+<Separator orientation="vertical" decorative />
 ```
 
 React Aria renders an `<hr>` horizontally and a `<div role="separator">`
-vertically.
+vertically. The line is painted with `--color-separator`, the hairline between
+rows and groups inside a surface, not `--color-border`, which is the surface's
+own outline.
+
+`decorative` draws the same line as a plain `aria-hidden` div, for a rule that
+only spaces inline items (a metadata row) where announcing "separator" between
+each pair is noise. Leave it off for a line between two groups of content.
+Other props (`id`, `data-*`, handlers) reach the div in this mode too; a name
+(`aria-label`, `aria-labelledby`) is dropped.
 
 ### Migrating from the legacy Separator
 
 | legacy        | Alfred          |                                                              |
 | ------------- | --------------- | ------------------------------------------------------------ |
 | `orientation` | `orientation`   | unchanged                                                     |
-| `decorative`  | *no equivalent* | zero call sites; see below                                    |
+| `decorative`  | `decorative`    | default flipped to `false`; see below                         |
 
 **This changes the semantics of all six existing uses.** The legacy defaulted
 to `decorative: true`, rendering `role="none"` — so every divider in the app
@@ -1635,6 +1761,28 @@ builds a `Time` at runtime, so the peer dependency is a real import here.
 (1, 5, 10, 15 or 30; a time between steps is added to the list so it is never lost),
 and `hourCycle` chooses 12 or 24 hour times.
 
+**In a form**: `id` goes on the trigger (so an outside `<label htmlFor>` or a form
+library reaches it), `name` submits the time as `"HH:MM"` in 24-hour time, as
+`<input type="time">` does, and `onBlur` fires when focus leaves the trigger.
+`isInvalid` paints the invalid border and `errorMessage` shows under the control
+while it is invalid, named in `aria-describedby`, as on `Select`. With
+react-hook-form, wire them from a `Controller`. Pass `field.value ?? null`, not
+`field.value`: `undefined` makes the picker uncontrolled, so a form reset to
+`undefined` would leave the last time on screen, while `null` clears it. With no
+time chosen, `name` submits an empty string.
+
+```tsx
+<Controller
+  name="syncTime"
+  control={control}
+  render={({ field, fieldState }) => (
+    <TimePicker label="Sync time" id={field.name} name={field.name}
+                value={field.value ?? null} onChange={field.onChange} onBlur={field.onBlur}
+                isInvalid={!!fieldState.error} errorMessage={fieldState.error?.message} />
+  )}
+/>
+```
+
 **Motion** (plain CSS and a little plain React, no animation library): the shown
 time rolls like a clock face (a later time rises in from below, an earlier one
 drops in from above, and the old one lifts away); the chevron turns half a turn on
@@ -1707,3 +1855,46 @@ inherits from the document. Set both if you support RTL.
 
 A tooltip rises 3px from its trigger and settles from .97 over 160ms (offset follows the side it opens on), and leaves in 120ms. While any tooltip is open, and for 300ms after the last one closes, the next one only fades in (no travel). The open delay stays 0. Reduced motion fades only. **DOM:** an empty hidden `span` inside the tooltip marks the warm case. Not ported: the crossfade and size spring when a string tooltip's text changes while open.
 
+
+## UsageMeter
+
+```tsx
+<UsageMeter label="Workspace storage" segments={segments} limit={10} unit="GB" />
+```
+
+The meter works its state out from the numbers: almost full from `warnAt` (a
+share of the limit, 0.9 by default), over once the total passes the limit.
+
+### A status from the backend
+
+When the product decides the state, pass `status` and the meter shows that
+instead of its own reading (badge, `data-status`, the bar's name and the
+announcement). The bar and legend agree with it:
+
+- `full` and `exhausted` under the limit mean the allowance is used up, so
+  there is no free share: the bar spans what is used and the free item reads 0.
+  The headline still states the plan size ("7.7 GB of 10 GB used").
+- Past the limit, `ok` and `warn` give way to the meter's own over state, since
+  the hatch already shows the overage. `full` and `exhausted` keep their words.
+
+| `status`    | meaning                     | badge           | `data-status` |
+| ----------- | --------------------------- | --------------- | ------------- |
+| `ok`        | under the limit             | "N free"        | `ok`          |
+| `warn`      | almost full                 | "Almost full"   | `near`        |
+| `full`      | allowance used up           | "Limit reached" | `full`        |
+| `exhausted` | nothing left to draw on     | "None left"     | `exhausted`   |
+
+`statusLabel` is the product's own words for the status ("Credits paused"). It
+replaces the badge's words in every mode (including "Unlimited"), the status in
+the bar's name and the announcement; the tone and icon still follow the status.
+
+### Unlimited
+
+`unlimited` is a plan with no limit. The badge reads "Unlimited" (unless
+`statusLabel` is set), the bar shows
+each category's share of what is used, and there is no free share, limit marker
+or overflow hatch. `limit`, `warnAt` and `status` are ignored.
+
+```tsx
+<UsageMeter label="Keyword slots" segments={segments} limit={0} unlimited />
+```

package/dist/alert/alert.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from "class-variance-authority";
-import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { AriaRole, ComponentPropsWithoutRef, ReactNode, SVGProps } from "react";
 //#region src/alert/alert.d.ts
 /**
  * Alert, ported from the legacy shadcn component.
@@ -24,14 +24,42 @@ import { ComponentPropsWithoutRef, ReactNode } from "react";
  * problems rather than porting them.
  */
 export declare const alertVariants: (props?: ({
-  variant?: "success" | "warning" | "destructive" | "default" | null | undefined;
+  variant?: "destructive" | "success" | "warning" | "default" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * The icon's colour: the state's own hue on every variant. Inside an Alert the
+ * destructive red is also the whole alert's text colour, so it changes nothing
+ * there; outside one it is what colours the icon.
+ *
+ * Exported with the status icons so a notice that is not an `Alert` (a row, a
+ * banner of the app's own) can show a tone the same way the alert does.
+ */
+export declare const alertIconVariants: (props?: ({
+  variant?: "destructive" | "success" | "warning" | "default" | "info" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * The built-in glyph of each variant, drawn with currentColor so the icon
+ * wrapper's colour paints it. Each is its own component so a variant change
+ * crossfades the icon (see iconKey).
+ *
+ * Exported as AlertInfoIcon, AlertSuccessIcon, AlertWarningIcon and
+ * AlertDestructiveIcon. They are decorative (`aria-hidden`) and `--icon-sm`
+ * by default; extra props, such as a `className` with a size, land on the svg.
+ * Given an `aria-label` or `aria-labelledby` (with `role="img"`), an icon is
+ * no longer hidden, and an explicit `aria-hidden` always wins.
+ */
+type StatusIconProps = Omit<SVGProps<SVGSVGElement>, "children">;
+declare function InfoGlyph(props: StatusIconProps): import("react").JSX.Element;
+declare function SuccessGlyph(props: StatusIconProps): import("react").JSX.Element;
+declare function WarningGlyph(props: StatusIconProps): import("react").JSX.Element;
+declare function DestructiveGlyph(props: StatusIconProps): import("react").JSX.Element;
 /**
  * An inline status message.
  *
  * Announced by assistive technology the moment it renders, via `role="alert"`.
- * That makes it the wrong component for content that is present on load and
- * merely styled as a notice -- use a plain region for those.
+ * That makes it the wrong default for content that is present on load and
+ * merely styled as a notice -- pass `role="note"` for those, or
+ * `role="status"` for an outcome that should be announced politely.
  *
  * @example
  * <Alert variant="destructive" icon={<WarningIcon aria-hidden />} title="Save failed">
@@ -80,7 +108,24 @@ export interface AlertProps extends Omit<ComponentPropsWithoutRef<"div">, "title
   onDismiss?: () => void;
   /** The Dismiss button's accessible name. @default "Dismiss" */
   dismissLabel?: string;
+  /**
+   * How assistive technology treats the message.
+   *
+   * - `alert`: announced assertively the moment it renders. For an error or a
+   *   warning that appears after the user did something.
+   * - `status`: a live region announced politely, after what the user is
+   *   hearing. For an outcome reported after an action ("Saved").
+   * - `note`: not live. For a notice that is simply there when the page loads;
+   *   an alert there would interrupt the page's own announcement.
+   *
+   * Typed as any ARIA role, as the inherited `role` was, so existing callers
+   * still compile; those three are the ones an inline notice should use.
+   *
+   * @default "alert"
+   */
+  role?: "alert" | "status" | "note" | AriaRole;
 }
 export declare const Alert: import("react").ForwardRefExoticComponent<AlertProps & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion
+export { DestructiveGlyph as AlertDestructiveIcon, InfoGlyph as AlertInfoIcon, type StatusIconProps as AlertStatusIconProps, SuccessGlyph as AlertSuccessIcon, WarningGlyph as AlertWarningIcon };
 //# sourceMappingURL=alert.d.ts.map

package/dist/alert/alert.js

@@ -9,6 +9,17 @@ import { Button } from "react-aria-components";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/alert/alert.tsx
 /**
+* `info` is `default` said by name: a call site that means "information" should
+* not depend on `default` happening to look like it. Every per-variant map below
+* derives `info` here, from its `default`, so the two cannot drift.
+*/
+function withInfo(map) {
+	return {
+		...map,
+		info: map.default
+	};
+}
+/**
 * Alert, ported from the legacy shadcn component.
 *
 * There is no React Aria base: RAC ships no static inline alert (its Toast
@@ -35,71 +46,88 @@ const alertVariants = cva([
 	"rounded-panel border-(length:--border-width) p-(--density-control-pad-md)",
 	"font-sans text-sm leading-(--leading-normal)"
 ], {
-	variants: { variant: {
+	variants: { variant: withInfo({
 		default: "bg-surface text-foreground border-border",
 		success: "bg-surface text-foreground border-border",
 		warning: "bg-surface text-foreground border-border",
 		destructive: "bg-surface text-destructive-strong border-destructive-strong"
-	} },
+	}) },
 	defaultVariants: { variant: "default" }
 });
-/** The icon's colour: the state's own hue, on the status variants. Destructive keeps its whole-alert red. */
+/**
+* The icon's colour: the state's own hue on every variant. Inside an Alert the
+* destructive red is also the whole alert's text colour, so it changes nothing
+* there; outside one it is what colours the icon.
+*
+* Exported with the status icons so a notice that is not an `Alert` (a row, a
+* banner of the app's own) can show a tone the same way the alert does.
+*/
 const alertIconVariants = cva("flex h-lh shrink-0 items-center [&_svg]:block [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-(--icon-sm)", {
-	variants: { variant: {
+	variants: { variant: withInfo({
 		default: "text-info-strong",
 		success: "text-success-strong",
 		warning: "text-warning-strong",
-		destructive: ""
-	} },
+		destructive: "text-destructive-strong"
+	}) },
 	defaultVariants: { variant: "default" }
 });
-/**
-* The built-in glyph of each variant, drawn with currentColor so the icon
-* wrapper's colour paints it. Each is its own component so a variant change
-* crossfades the icon (see iconKey).
-*/
-function StatusGlyph({ children }) {
+function StatusGlyph({ children, className, ...props }) {
+	const labelled = props["aria-label"] !== void 0 || props["aria-labelledby"] !== void 0;
 	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": labelled ? void 0 : "true",
+		...props,
+		className: cn("size-(--icon-sm)", className),
 		viewBox: "0 0 16 16",
 		fill: "none",
 		stroke: "currentColor",
 		strokeWidth: "1.5",
 		strokeLinecap: "round",
 		strokeLinejoin: "round",
-		"aria-hidden": "true",
 		children
 	});
 }
-function InfoGlyph() {
-	return /* @__PURE__ */ jsxs(StatusGlyph, { children: [/* @__PURE__ */ jsx("circle", {
-		cx: "8",
-		cy: "8",
-		r: "6.25"
-	}), /* @__PURE__ */ jsx("path", { d: "M8 7.25v3.5M8 5h.01" })] });
+function InfoGlyph(props) {
+	return /* @__PURE__ */ jsxs(StatusGlyph, {
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "6.25"
+		}), /* @__PURE__ */ jsx("path", { d: "M8 7.25v3.5M8 5h.01" })]
+	});
 }
-function SuccessGlyph() {
-	return /* @__PURE__ */ jsxs(StatusGlyph, { children: [/* @__PURE__ */ jsx("circle", {
-		cx: "8",
-		cy: "8",
-		r: "6.25"
-	}), /* @__PURE__ */ jsx("path", { d: "m5.25 8.25 1.9 1.9 3.6-3.9" })] });
+function SuccessGlyph(props) {
+	return /* @__PURE__ */ jsxs(StatusGlyph, {
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "6.25"
+		}), /* @__PURE__ */ jsx("path", { d: "m5.25 8.25 1.9 1.9 3.6-3.9" })]
+	});
 }
-function WarningGlyph() {
-	return /* @__PURE__ */ jsxs(StatusGlyph, { children: [/* @__PURE__ */ jsx("path", { d: "M6.9 2.6 1.9 11.4a1.2 1.2 0 0 0 1 1.8h10.2a1.2 1.2 0 0 0 1-1.8L9.1 2.6a1.2 1.2 0 0 0-2.2 0Z" }), /* @__PURE__ */ jsx("path", { d: "M8 6.4v2.6M8 11.2h.01" })] });
+function WarningGlyph(props) {
+	return /* @__PURE__ */ jsxs(StatusGlyph, {
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M6.9 2.6 1.9 11.4a1.2 1.2 0 0 0 1 1.8h10.2a1.2 1.2 0 0 0 1-1.8L9.1 2.6a1.2 1.2 0 0 0-2.2 0Z" }), /* @__PURE__ */ jsx("path", { d: "M8 6.4v2.6M8 11.2h.01" })]
+	});
 }
-function DestructiveGlyph() {
-	return /* @__PURE__ */ jsxs(StatusGlyph, { children: [/* @__PURE__ */ jsx("circle", {
-		cx: "8",
-		cy: "8",
-		r: "6.25"
-	}), /* @__PURE__ */ jsx("path", { d: "m6 6 4 4M10 6l-4 4" })] });
+function DestructiveGlyph(props) {
+	return /* @__PURE__ */ jsxs(StatusGlyph, {
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "8",
+			cy: "8",
+			r: "6.25"
+		}), /* @__PURE__ */ jsx("path", { d: "m6 6 4 4M10 6l-4 4" })]
+	});
 }
-const statusGlyphs = {
+const statusGlyphs = withInfo({
 	default: /* @__PURE__ */ jsx(InfoGlyph, {}),
 	success: /* @__PURE__ */ jsx(SuccessGlyph, {}),
 	warning: /* @__PURE__ */ jsx(WarningGlyph, {}),
 	destructive: /* @__PURE__ */ jsx(DestructiveGlyph, {})
-};
+});
 /** A string title or description swaps as a whole when its text changes. */
 function Swappable({ value, children }) {
 	if (typeof value !== "string" && typeof value !== "number") return /* @__PURE__ */ jsx(Fragment$1, { children });
@@ -127,7 +155,7 @@ function DismissGlyph() {
 		children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" })
 	});
 }
-const Alert = forwardRef(function Alert({ className, variant, icon: iconProp, title, headingLevel = 3, children, open, onDismiss, dismissLabel = "Dismiss", ...props }, ref) {
+const Alert = forwardRef(function Alert({ className, variant, icon: iconProp, title, headingLevel = 3, children, open, onDismiss, dismissLabel = "Dismiss", role = "alert", ...props }, ref) {
 	const Title = `h${headingLevel}`;
 	const icon = iconProp === void 0 ? statusGlyphs[variant ?? "default"] : iconProp;
 	const frame = useRef(null);
@@ -163,7 +191,7 @@ const Alert = forwardRef(function Alert({ className, variant, icon: iconProp, ti
 	const alert = /* @__PURE__ */ jsxs("div", {
 		ref,
 		...props,
-		role: "alert",
+		role,
 		"data-slot": "alert",
 		className: cn(alertVariants({ variant }), className),
 		children: [
@@ -221,6 +249,6 @@ const Alert = forwardRef(function Alert({ className, variant, icon: iconProp, ti
 	});
 });
 //#endregion
-export { Alert, alertVariants };
+export { Alert, DestructiveGlyph as AlertDestructiveIcon, InfoGlyph as AlertInfoIcon, SuccessGlyph as AlertSuccessIcon, WarningGlyph as AlertWarningIcon, alertIconVariants, alertVariants };
 
 //# sourceMappingURL=alert.js.map

package/dist/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":["AriaButton"],"sources":["../../src/alert/alert.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\n\nimport { Button as AriaButton } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * Alert, ported from the legacy shadcn component.\n *\n * There is no React Aria base: RAC ships no static inline alert (its Toast\n * API is transient and queue-driven), so this is a styled div with\n * role=\"alert\". Because it is not RAC-backed, its props follow\n * ARCHITECTURE section 7 rule 1 -- VariantProps & ComponentPropsWithoutRef --\n * rather than the Button's Omit-from-React-Aria departure, which exists only\n * to stop RAC-ignored props being advertised.\n *\n * Every string below is a STATIC literal. Tailwind scans source text, so a\n * class assembled at runtime is invisible to it and would never be emitted.\n *\n * THE LAYOUT IS THE BIGGEST CHANGE. The legacy component positioned its icon\n * with `[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4`, pushed the text over\n * with `[&>svg~*]:pl-7`, and nudged it back with `[&>svg+div]:translate-y-[-3px]`.\n * All three are physical properties or magic numbers: `left` and `pl` do not\n * mirror in RTL, so the icon stayed left while the text indented the wrong\n * side, and `translate-y-[-3px]` is a bracket value that `check:hardcoding`\n * rejects outright. Flex with an explicit `icon` prop deletes all three\n * problems rather than porting them.\n */\nexport const alertVariants = cva(\n  [\n    // box-border is not boilerplate. Tailwind Preflight sets box-sizing\n    // globally and the legacy app had it; this library's reset is OPT-IN, so\n    // a consumer may load none and the browser default content-box applies.\n    // w-full is width:100%, so the padding and border are then ADDED to it\n    // and the alert overflows its container by exactly 46px at comfortable\n    // density. Measured, not theorised: 346px inside a 300px parent.\n    \"box-border flex w-full items-start gap-(--density-control-gap)\",\n    \"rounded-panel border-(length:--border-width) p-(--density-control-pad-md)\",\n    // font-sans is load-bearing. The library does not style the consumer's\n    // page, so anything that does not set its own face inherits the host's\n    // default -- which is a serif in an unstyled document. The accordion\n    // panel shipped exactly that way and it was caught by eye, not by a test.\n    \"font-sans text-sm leading-(--leading-normal)\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"bg-surface text-foreground border-border\",\n        // The status variants paint only their icon; the card stays neutral\n        // (dark title, grey description, light border), like the reference\n        // Sync status alert. See alertIconVariants.\n        success: \"bg-surface text-foreground border-border\",\n        warning: \"bg-surface text-foreground border-border\",\n        // destructive-STRONG, not destructive. The fill token is 4.04:1 on\n        // the dark page; this role exists so the text and border clear the\n        // 4.5 floor in both themes. The legacy `border-destructive/50` was\n        // also an opacity modifier, which cannot be contrast-checked at all\n        // because the result depends on whatever sits behind it.\n        destructive: \"bg-surface text-destructive-strong border-destructive-strong\",\n      },\n    },\n    defaultVariants: { variant: \"default\" },\n  },\n);\n\n/** The icon's colour: the state's own hue, on the status variants. Destructive keeps its whole-alert red. */\nconst alertIconVariants = cva(\n  \"flex h-lh shrink-0 items-center [&_svg]:block [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  {\n    variants: {\n      variant: {\n        default: \"text-info-strong\",\n        success: \"text-success-strong\",\n        warning: \"text-warning-strong\",\n        destructive: \"\",\n      },\n    },\n    defaultVariants: { variant: \"default\" },\n  },\n);\n\n/**\n * The built-in glyph of each variant, drawn with currentColor so the icon\n * wrapper's colour paints it. Each is its own component so a variant change\n * crossfades the icon (see iconKey).\n */\nfunction StatusGlyph({ children }: { children: ReactNode }) {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      {children}\n    </svg>\n  );\n}\nfunction InfoGlyph() {\n  return (\n    <StatusGlyph>\n      <circle cx=\"8\" cy=\"8\" r=\"6.25\" />\n      <path d=\"M8 7.25v3.5M8 5h.01\" />\n    </StatusGlyph>\n  );\n}\nfunction SuccessGlyph() {\n  return (\n    <StatusGlyph>\n      <circle cx=\"8\" cy=\"8\" r=\"6.25\" />\n      <path d=\"m5.25 8.25 1.9 1.9 3.6-3.9\" />\n    </StatusGlyph>\n  );\n}\nfunction WarningGlyph() {\n  return (\n    <StatusGlyph>\n      <path d=\"M6.9 2.6 1.9 11.4a1.2 1.2 0 0 0 1 1.8h10.2a1.2 1.2 0 0 0 1-1.8L9.1 2.6a1.2 1.2 0 0 0-2.2 0Z\" />\n      <path d=\"M8 6.4v2.6M8 11.2h.01\" />\n    </StatusGlyph>\n  );\n}\nfunction DestructiveGlyph() {\n  return (\n    <StatusGlyph>\n      <circle cx=\"8\" cy=\"8\" r=\"6.25\" />\n      <path d=\"m6 6 4 4M10 6l-4 4\" />\n    </StatusGlyph>\n  );\n}\nconst statusGlyphs = {\n  default: <InfoGlyph />,\n  success: <SuccessGlyph />,\n  warning: <WarningGlyph />,\n  destructive: <DestructiveGlyph />,\n} as const;\n\n/**\n * An inline status message.\n *\n * Announced by assistive technology the moment it renders, via `role=\"alert\"`.\n * That makes it the wrong component for content that is present on load and\n * merely styled as a notice -- use a plain region for those.\n *\n * @example\n * <Alert variant=\"destructive\" icon={<WarningIcon aria-hidden />} title=\"Save failed\">\n *   Your changes were not saved.\n * </Alert>\n */\nexport interface AlertProps\n  // The native `title` attribute is omitted so this component can use the\n  // name for its heading. That attribute renders a browser tooltip, which is\n  // not keyboard reachable and is not announced reliably -- on a role=\"alert\"\n  // it is worth nothing, and silently shadowing it with a ReactNode would be\n  // a type error waiting for the first consumer who tried both.\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\">, VariantProps<typeof alertVariants> {\n  /**\n   * Leading glyph. Mark it `aria-hidden` -- the message text is the\n   * announcement, and an unhidden graphic makes the alert announce twice.\n   *\n   * Left out, the alert shows its variant's own icon (info, check, warning\n   * triangle, cross), coloured for the state and centred on the first line of\n   * text. Pass `null` for no icon, or your own glyph to replace it.\n   *\n   * A prop rather than a positioned child: the legacy `[&>svg]` selectors\n   * only worked when the icon was the first element, and broke in RTL.\n   */\n  icon?: ReactNode;\n  /**\n   * Optional heading. Replaces the legacy `AlertTitle` part.\n   *\n   * Omit it for a single-line alert; most call sites do.\n   */\n  title?: ReactNode;\n  /**\n   * Heading level for {@link AlertProps.title}.\n   *\n   * The legacy `AlertTitle` was always an `<h5>`, which breaks the document\n   * outline anywhere the alert is not nested five deep.\n   *\n   * @default 3\n   */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n  /**\n   * Whether the alert is shown. Controlled: hiding it collapses its height and\n   * fades it out, and showing it again grows it back. An alert that is open on\n   * first render does not animate. Leave it out for an alert that is always there.\n   */\n  open?: boolean;\n  /**\n   * Adds a Dismiss button. Pressed, a controlled alert (`open` given) only calls\n   * this and waits to be told `open={false}`; an uncontrolled alert (no `open`)\n   * collapses first and then calls it.\n   */\n  onDismiss?: () => void;\n  /** The Dismiss button's accessible name. @default \"Dismiss\" */\n  dismissLabel?: string;\n}\n\n/** A string title or description swaps as a whole when its text changes. */\nfunction Swappable({ value, children }: { value: ReactNode; children: ReactNode }) {\n  if (typeof value !== \"string\" && typeof value !== \"number\") return <>{children}</>;\n  return (\n    <SwapText swapKey={String(value)} className=\"block\">\n      {children}\n    </SwapText>\n  );\n}\n\n/** The name an icon swaps under: a different icon component crossfades; the same one re-rendering stays still. */\nfunction iconKey(icon: ReactNode) {\n  if (!isValidElement(icon)) return \"icon\";\n  const type = icon.type as string | { displayName?: string; name?: string };\n  return typeof type === \"string\" ? type : (type.displayName ?? type.name ?? \"icon\");\n}\n\nfunction DismissGlyph() {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.75\"\n      strokeLinecap=\"round\"\n      aria-hidden=\"true\"\n      className=\"size-4\"\n    >\n      <path d=\"M4 4l8 8M12 4l-8 8\" />\n    </svg>\n  );\n}\n\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\n  {\n    className,\n    variant,\n    icon: iconProp,\n    title,\n    headingLevel = 3,\n    children,\n    open,\n    onDismiss,\n    dismissLabel = \"Dismiss\",\n    ...props\n  },\n  ref,\n) {\n  const Title = `h${headingLevel}` as const;\n  const icon = iconProp === undefined ? statusGlyphs[variant ?? \"default\"] : iconProp;\n  const frame = useRef<HTMLDivElement>(null);\n  const content = useRef<HTMLDivElement>(null);\n  const text = typeof children === \"string\" || typeof children === \"number\" ? String(children) : \"\";\n  useHeightFollow(\n    frame,\n    content,\n    `${typeof title === \"string\" ? title : \"\"}\\n${children === undefined ? \"\" : \"details\"}\\n${text}`,\n  );\n\n  // Presence. Without `open` or `onDismiss` the alert is simply there.\n  const managed = open !== undefined || onDismiss !== undefined;\n  const [dismissed, setDismissed] = useState(false);\n  const wanted = open ?? !dismissed;\n  const [rendered, setRendered] = useState(wanted);\n  const [shown, setShown] = useState(wanted);\n  if (wanted && !rendered) setRendered(true);\n  if (!wanted && shown) setShown(false);\n  useEffect(() => {\n    // A newly shown alert mounts collapsed and opens a frame later, so it grows rather than appears.\n    if (wanted && rendered && !shown) {\n      const frameId = requestAnimationFrame(() => setShown(true));\n      return () => cancelAnimationFrame(frameId);\n    }\n  }, [wanted, rendered, shown]);\n  const leaving = rendered && !wanted;\n  const finish = useCallback(() => {\n    setRendered(false);\n    if (open === undefined) onDismiss?.();\n  }, [onDismiss, open]);\n  useExitBackstop(leaving, finish, 900);\n  useIsomorphicLayoutEffect(() => {\n    if (leaving && prefersReducedMotion()) finish();\n  }, [leaving, finish]);\n  if (managed && !rendered) return null;\n\n  const alert = (\n    <div\n      ref={ref}\n      {...props}\n      role=\"alert\"\n      data-slot=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n    >\n      {/*\n        The icon is decorative or labelled by the consumer; this wrapper adds\n        no name. It keeps the icon from shrinking and sizes a bare svg to the\n        icon scale, unless the consumer sized it themselves.\n      */}\n      {icon === null || icon === false ? null : (\n        <span data-slot=\"alert-icon\" className={alertIconVariants({ variant })}>\n          <SwapText swapKey={iconKey(icon)} motion=\"glyph\" className=\"grid place-items-center\">\n            {icon}\n          </SwapText>\n        </span>\n      )}\n      {/* The copy column follows its content's height, so longer or shorter text never snaps the alert. */}\n      <div ref={frame} data-slot=\"alert-body\" className=\"height-follow min-w-0 flex-1\">\n        <div ref={content}>\n          {title === undefined ? null : (\n            <Title\n              data-slot=\"alert-title\"\n              className=\"m-0 mb-1 text-sm leading-(--leading-normal) font-medium\"\n            >\n              <Swappable value={title}>{title}</Swappable>\n            </Title>\n          )}\n          {children === undefined ? null : (\n            <div\n              data-slot=\"alert-description\"\n              className={title === undefined ? undefined : \"text-xs leading-(--leading-normal) text-text-secondary\"}\n            >\n              <Swappable value={children}>{children}</Swappable>\n            </div>\n          )}\n        </div>\n      </div>\n      {onDismiss ? (\n        <AriaButton\n          data-slot=\"alert-dismiss\"\n          aria-label={typeof title === \"string\" ? `${dismissLabel}: ${title}` : dismissLabel}\n          onPress={() => (open === undefined ? setDismissed(true) : onDismiss())}\n          className=\"calendar-nav-motion -my-1 -me-1.5 grid size-7 shrink-0 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-muted-foreground outline-none data-[hovered]:bg-muted data-[hovered]:text-foreground data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)\"\n        >\n          <DismissGlyph />\n        </AriaButton>\n      ) : null}\n    </div>\n  );\n  if (!managed) return alert;\n  return (\n    <div\n      data-slot=\"alert-presence\"\n      data-shown={shown || undefined}\n      onTransitionEnd={(event) => {\n        if (leaving && event.target === event.currentTarget && event.propertyName === \"grid-template-rows\")\n          finish();\n      }}\n      className=\"alert-presence\"\n    >\n      <div>{alert}</div>\n    </div>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"alert.js","names":["AriaButton"],"sources":["../../src/alert/alert.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type AriaRole,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  type SVGProps,\n} from \"react\";\n\nimport { Button as AriaButton } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * `info` is `default` said by name: a call site that means \"information\" should\n * not depend on `default` happening to look like it. Every per-variant map below\n * derives `info` here, from its `default`, so the two cannot drift.\n */\nfunction withInfo<T extends { default: unknown }>(map: T): T & { info: T[\"default\"] } {\n  return { ...map, info: map.default };\n}\n\n/**\n * Alert, ported from the legacy shadcn component.\n *\n * There is no React Aria base: RAC ships no static inline alert (its Toast\n * API is transient and queue-driven), so this is a styled div with\n * role=\"alert\". Because it is not RAC-backed, its props follow\n * ARCHITECTURE section 7 rule 1 -- VariantProps & ComponentPropsWithoutRef --\n * rather than the Button's Omit-from-React-Aria departure, which exists only\n * to stop RAC-ignored props being advertised.\n *\n * Every string below is a STATIC literal. Tailwind scans source text, so a\n * class assembled at runtime is invisible to it and would never be emitted.\n *\n * THE LAYOUT IS THE BIGGEST CHANGE. The legacy component positioned its icon\n * with `[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4`, pushed the text over\n * with `[&>svg~*]:pl-7`, and nudged it back with `[&>svg+div]:translate-y-[-3px]`.\n * All three are physical properties or magic numbers: `left` and `pl` do not\n * mirror in RTL, so the icon stayed left while the text indented the wrong\n * side, and `translate-y-[-3px]` is a bracket value that `check:hardcoding`\n * rejects outright. Flex with an explicit `icon` prop deletes all three\n * problems rather than porting them.\n */\nexport const alertVariants = cva(\n  [\n    // box-border is not boilerplate. Tailwind Preflight sets box-sizing\n    // globally and the legacy app had it; this library's reset is OPT-IN, so\n    // a consumer may load none and the browser default content-box applies.\n    // w-full is width:100%, so the padding and border are then ADDED to it\n    // and the alert overflows its container by exactly 46px at comfortable\n    // density. Measured, not theorised: 346px inside a 300px parent.\n    \"box-border flex w-full items-start gap-(--density-control-gap)\",\n    \"rounded-panel border-(length:--border-width) p-(--density-control-pad-md)\",\n    // font-sans is load-bearing. The library does not style the consumer's\n    // page, so anything that does not set its own face inherits the host's\n    // default -- which is a serif in an unstyled document. The accordion\n    // panel shipped exactly that way and it was caught by eye, not by a test.\n    \"font-sans text-sm leading-(--leading-normal)\",\n  ],\n  {\n    variants: {\n      variant: withInfo({\n        default: \"bg-surface text-foreground border-border\",\n        // The status variants paint only their icon; the card stays neutral\n        // (dark title, grey description, light border), like the reference\n        // Sync status alert. See alertIconVariants.\n        success: \"bg-surface text-foreground border-border\",\n        warning: \"bg-surface text-foreground border-border\",\n        // destructive-STRONG, not destructive. The fill token is 4.04:1 on\n        // the dark page; this role exists so the text and border clear the\n        // 4.5 floor in both themes. The legacy `border-destructive/50` was\n        // also an opacity modifier, which cannot be contrast-checked at all\n        // because the result depends on whatever sits behind it.\n        destructive: \"bg-surface text-destructive-strong border-destructive-strong\",\n      }),\n    },\n    defaultVariants: { variant: \"default\" },\n  },\n);\n\n/**\n * The icon's colour: the state's own hue on every variant. Inside an Alert the\n * destructive red is also the whole alert's text colour, so it changes nothing\n * there; outside one it is what colours the icon.\n *\n * Exported with the status icons so a notice that is not an `Alert` (a row, a\n * banner of the app's own) can show a tone the same way the alert does.\n */\nexport const alertIconVariants = cva(\n  \"flex h-lh shrink-0 items-center [&_svg]:block [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  {\n    variants: {\n      variant: withInfo({\n        default: \"text-info-strong\",\n        success: \"text-success-strong\",\n        warning: \"text-warning-strong\",\n        destructive: \"text-destructive-strong\",\n      }),\n    },\n    defaultVariants: { variant: \"default\" },\n  },\n);\n\n/**\n * The built-in glyph of each variant, drawn with currentColor so the icon\n * wrapper's colour paints it. Each is its own component so a variant change\n * crossfades the icon (see iconKey).\n *\n * Exported as AlertInfoIcon, AlertSuccessIcon, AlertWarningIcon and\n * AlertDestructiveIcon. They are decorative (`aria-hidden`) and `--icon-sm`\n * by default; extra props, such as a `className` with a size, land on the svg.\n * Given an `aria-label` or `aria-labelledby` (with `role=\"img\"`), an icon is\n * no longer hidden, and an explicit `aria-hidden` always wins.\n */\ntype StatusIconProps = Omit<SVGProps<SVGSVGElement>, \"children\">;\nfunction StatusGlyph({\n  children,\n  className,\n  ...props\n}: StatusIconProps & { children: ReactNode }) {\n  const labelled = props[\"aria-label\"] !== undefined || props[\"aria-labelledby\"] !== undefined;\n  return (\n    <svg\n      // Before the spread, so a caller's own aria-hidden wins; a labelled icon\n      // is meant to be read, so it is not hidden by default.\n      aria-hidden={labelled ? undefined : \"true\"}\n      {...props}\n      // Sized on its own, so an exported icon outside an alert is not 0x0; the\n      // same --icon-sm the alert's icon slot gives an unsized svg. A caller's\n      // size class wins.\n      className={cn(\"size-(--icon-sm)\", className)}\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      {children}\n    </svg>\n  );\n}\nfunction InfoGlyph(props: StatusIconProps) {\n  return (\n    <StatusGlyph {...props}>\n      <circle cx=\"8\" cy=\"8\" r=\"6.25\" />\n      <path d=\"M8 7.25v3.5M8 5h.01\" />\n    </StatusGlyph>\n  );\n}\nfunction SuccessGlyph(props: StatusIconProps) {\n  return (\n    <StatusGlyph {...props}>\n      <circle cx=\"8\" cy=\"8\" r=\"6.25\" />\n      <path d=\"m5.25 8.25 1.9 1.9 3.6-3.9\" />\n    </StatusGlyph>\n  );\n}\nfunction WarningGlyph(props: StatusIconProps) {\n  return (\n    <StatusGlyph {...props}>\n      <path d=\"M6.9 2.6 1.9 11.4a1.2 1.2 0 0 0 1 1.8h10.2a1.2 1.2 0 0 0 1-1.8L9.1 2.6a1.2 1.2 0 0 0-2.2 0Z\" />\n      <path d=\"M8 6.4v2.6M8 11.2h.01\" />\n    </StatusGlyph>\n  );\n}\nfunction DestructiveGlyph(props: StatusIconProps) {\n  return (\n    <StatusGlyph {...props}>\n      <circle cx=\"8\" cy=\"8\" r=\"6.25\" />\n      <path d=\"m6 6 4 4M10 6l-4 4\" />\n    </StatusGlyph>\n  );\n}\nexport {\n  InfoGlyph as AlertInfoIcon,\n  SuccessGlyph as AlertSuccessIcon,\n  WarningGlyph as AlertWarningIcon,\n  DestructiveGlyph as AlertDestructiveIcon,\n};\nexport type { StatusIconProps as AlertStatusIconProps };\n\nconst statusGlyphs = withInfo({\n  default: <InfoGlyph />,\n  success: <SuccessGlyph />,\n  warning: <WarningGlyph />,\n  destructive: <DestructiveGlyph />,\n});\n\n/**\n * An inline status message.\n *\n * Announced by assistive technology the moment it renders, via `role=\"alert\"`.\n * That makes it the wrong default for content that is present on load and\n * merely styled as a notice -- pass `role=\"note\"` for those, or\n * `role=\"status\"` for an outcome that should be announced politely.\n *\n * @example\n * <Alert variant=\"destructive\" icon={<WarningIcon aria-hidden />} title=\"Save failed\">\n *   Your changes were not saved.\n * </Alert>\n */\nexport interface AlertProps\n  // The native `title` attribute is omitted so this component can use the\n  // name for its heading. That attribute renders a browser tooltip, which is\n  // not keyboard reachable and is not announced reliably -- on a role=\"alert\"\n  // it is worth nothing, and silently shadowing it with a ReactNode would be\n  // a type error waiting for the first consumer who tried both.\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\">, VariantProps<typeof alertVariants> {\n  /**\n   * Leading glyph. Mark it `aria-hidden` -- the message text is the\n   * announcement, and an unhidden graphic makes the alert announce twice.\n   *\n   * Left out, the alert shows its variant's own icon (info, check, warning\n   * triangle, cross), coloured for the state and centred on the first line of\n   * text. Pass `null` for no icon, or your own glyph to replace it.\n   *\n   * A prop rather than a positioned child: the legacy `[&>svg]` selectors\n   * only worked when the icon was the first element, and broke in RTL.\n   */\n  icon?: ReactNode;\n  /**\n   * Optional heading. Replaces the legacy `AlertTitle` part.\n   *\n   * Omit it for a single-line alert; most call sites do.\n   */\n  title?: ReactNode;\n  /**\n   * Heading level for {@link AlertProps.title}.\n   *\n   * The legacy `AlertTitle` was always an `<h5>`, which breaks the document\n   * outline anywhere the alert is not nested five deep.\n   *\n   * @default 3\n   */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n  /**\n   * Whether the alert is shown. Controlled: hiding it collapses its height and\n   * fades it out, and showing it again grows it back. An alert that is open on\n   * first render does not animate. Leave it out for an alert that is always there.\n   */\n  open?: boolean;\n  /**\n   * Adds a Dismiss button. Pressed, a controlled alert (`open` given) only calls\n   * this and waits to be told `open={false}`; an uncontrolled alert (no `open`)\n   * collapses first and then calls it.\n   */\n  onDismiss?: () => void;\n  /** The Dismiss button's accessible name. @default \"Dismiss\" */\n  dismissLabel?: string;\n  /**\n   * How assistive technology treats the message.\n   *\n   * - `alert`: announced assertively the moment it renders. For an error or a\n   *   warning that appears after the user did something.\n   * - `status`: a live region announced politely, after what the user is\n   *   hearing. For an outcome reported after an action (\"Saved\").\n   * - `note`: not live. For a notice that is simply there when the page loads;\n   *   an alert there would interrupt the page's own announcement.\n   *\n   * Typed as any ARIA role, as the inherited `role` was, so existing callers\n   * still compile; those three are the ones an inline notice should use.\n   *\n   * @default \"alert\"\n   */\n  role?: \"alert\" | \"status\" | \"note\" | AriaRole;\n}\n\n/** A string title or description swaps as a whole when its text changes. */\nfunction Swappable({ value, children }: { value: ReactNode; children: ReactNode }) {\n  if (typeof value !== \"string\" && typeof value !== \"number\") return <>{children}</>;\n  return (\n    <SwapText swapKey={String(value)} className=\"block\">\n      {children}\n    </SwapText>\n  );\n}\n\n/** The name an icon swaps under: a different icon component crossfades; the same one re-rendering stays still. */\nfunction iconKey(icon: ReactNode) {\n  if (!isValidElement(icon)) return \"icon\";\n  const type = icon.type as string | { displayName?: string; name?: string };\n  return typeof type === \"string\" ? type : (type.displayName ?? type.name ?? \"icon\");\n}\n\nfunction DismissGlyph() {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.75\"\n      strokeLinecap=\"round\"\n      aria-hidden=\"true\"\n      className=\"size-4\"\n    >\n      <path d=\"M4 4l8 8M12 4l-8 8\" />\n    </svg>\n  );\n}\n\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\n  {\n    className,\n    variant,\n    icon: iconProp,\n    title,\n    headingLevel = 3,\n    children,\n    open,\n    onDismiss,\n    dismissLabel = \"Dismiss\",\n    role = \"alert\",\n    ...props\n  },\n  ref,\n) {\n  const Title = `h${headingLevel}` as const;\n  const icon = iconProp === undefined ? statusGlyphs[variant ?? \"default\"] : iconProp;\n  const frame = useRef<HTMLDivElement>(null);\n  const content = useRef<HTMLDivElement>(null);\n  const text = typeof children === \"string\" || typeof children === \"number\" ? String(children) : \"\";\n  useHeightFollow(\n    frame,\n    content,\n    `${typeof title === \"string\" ? title : \"\"}\\n${children === undefined ? \"\" : \"details\"}\\n${text}`,\n  );\n\n  // Presence. Without `open` or `onDismiss` the alert is simply there.\n  const managed = open !== undefined || onDismiss !== undefined;\n  const [dismissed, setDismissed] = useState(false);\n  const wanted = open ?? !dismissed;\n  const [rendered, setRendered] = useState(wanted);\n  const [shown, setShown] = useState(wanted);\n  if (wanted && !rendered) setRendered(true);\n  if (!wanted && shown) setShown(false);\n  useEffect(() => {\n    // A newly shown alert mounts collapsed and opens a frame later, so it grows rather than appears.\n    if (wanted && rendered && !shown) {\n      const frameId = requestAnimationFrame(() => setShown(true));\n      return () => cancelAnimationFrame(frameId);\n    }\n  }, [wanted, rendered, shown]);\n  const leaving = rendered && !wanted;\n  const finish = useCallback(() => {\n    setRendered(false);\n    if (open === undefined) onDismiss?.();\n  }, [onDismiss, open]);\n  useExitBackstop(leaving, finish, 900);\n  useIsomorphicLayoutEffect(() => {\n    if (leaving && prefersReducedMotion()) finish();\n  }, [leaving, finish]);\n  if (managed && !rendered) return null;\n\n  const alert = (\n    <div\n      ref={ref}\n      {...props}\n      role={role}\n      data-slot=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n    >\n      {/*\n        The icon is decorative or labelled by the consumer; this wrapper adds\n        no name. It keeps the icon from shrinking and sizes a bare svg to the\n        icon scale, unless the consumer sized it themselves.\n      */}\n      {icon === null || icon === false ? null : (\n        <span data-slot=\"alert-icon\" className={alertIconVariants({ variant })}>\n          <SwapText swapKey={iconKey(icon)} motion=\"glyph\" className=\"grid place-items-center\">\n            {icon}\n          </SwapText>\n        </span>\n      )}\n      {/* The copy column follows its content's height, so longer or shorter text never snaps the alert. */}\n      <div ref={frame} data-slot=\"alert-body\" className=\"height-follow min-w-0 flex-1\">\n        <div ref={content}>\n          {title === undefined ? null : (\n            <Title\n              data-slot=\"alert-title\"\n              className=\"m-0 mb-1 text-sm leading-(--leading-normal) font-medium\"\n            >\n              <Swappable value={title}>{title}</Swappable>\n            </Title>\n          )}\n          {children === undefined ? null : (\n            <div\n              data-slot=\"alert-description\"\n              className={title === undefined ? undefined : \"text-xs leading-(--leading-normal) text-text-secondary\"}\n            >\n              <Swappable value={children}>{children}</Swappable>\n            </div>\n          )}\n        </div>\n      </div>\n      {onDismiss ? (\n        <AriaButton\n          data-slot=\"alert-dismiss\"\n          aria-label={typeof title === \"string\" ? `${dismissLabel}: ${title}` : dismissLabel}\n          onPress={() => (open === undefined ? setDismissed(true) : onDismiss())}\n          className=\"calendar-nav-motion -my-1 -me-1.5 grid size-7 shrink-0 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-muted-foreground outline-none data-[hovered]:bg-muted data-[hovered]:text-foreground data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)\"\n        >\n          <DismissGlyph />\n        </AriaButton>\n      ) : null}\n    </div>\n  );\n  if (!managed) return alert;\n  return (\n    <div\n      data-slot=\"alert-presence\"\n      data-shown={shown || undefined}\n      onTransitionEnd={(event) => {\n        if (leaving && event.target === event.currentTarget && event.propertyName === \"grid-template-rows\")\n          finish();\n      }}\n      className=\"alert-presence\"\n    >\n      <div>{alert}</div>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/alert/index.d.ts

@@ -1,2 +1,2 @@
-import { Alert, AlertProps, alertVariants } from "./alert.js";
-export { Alert, type AlertProps, alertVariants };
+import { Alert, AlertDestructiveIcon as DestructiveGlyph, AlertInfoIcon as InfoGlyph, AlertProps, AlertStatusIconProps as StatusIconProps, AlertSuccessIcon as SuccessGlyph, AlertWarningIcon as WarningGlyph, alertIconVariants, alertVariants } from "./alert.js";
+export { Alert, DestructiveGlyph as AlertDestructiveIcon, InfoGlyph as AlertInfoIcon, type AlertProps, type StatusIconProps as AlertStatusIconProps, SuccessGlyph as AlertSuccessIcon, WarningGlyph as AlertWarningIcon, alertIconVariants, alertVariants };

package/dist/alert/index.js

@@ -1,2 +1,2 @@
-import { Alert, alertVariants } from "./alert.js";
-export { Alert, alertVariants };
+import { Alert, AlertDestructiveIcon as DestructiveGlyph, AlertInfoIcon as InfoGlyph, AlertSuccessIcon as SuccessGlyph, AlertWarningIcon as WarningGlyph, alertIconVariants, alertVariants } from "./alert.js";
+export { Alert, DestructiveGlyph as AlertDestructiveIcon, InfoGlyph as AlertInfoIcon, SuccessGlyph as AlertSuccessIcon, WarningGlyph as AlertWarningIcon, alertIconVariants, alertVariants };