@stackone/malachite 2.55.1 → 2.56.0

package/COMPONENTS.md

@@ -34,7 +34,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 ## Feedback & status
 
 - **`ChangeReview`** — Reviewing changes a machine made. `ChangeReview.Item` attaches to one changed thing: it names what changed with an `assistant` Tag, shows the value it displaced struck through, and offers approve and deny as two equally reachable icon buttons — a review affordance that made keeping easier than rejecting would not be one. Given `children`, it wraps the field the change is annotating: the tag/label/actions become a header band above it and the before/after line moves below, so "Was …" reads next to the value it describes instead of stacked with the header; without children it renders as the standalone card it always has. `ChangeReview.Summary` counts what is still undecided across the whole form, which is what a per-item control cannot do and what a caller gates a save on; at zero it either says so or collapses to nothing. `ChangeReview.Removed` is for something the assistant took out: a dashed, tinted card listing what would be lost, because a removal that simply vanished would leave nothing to reject. `ChangeReview.Jump` is a chip an assistant turn carries to point at a field it touched. _Key props:_ `Item`: `label`, `before`, `after`, `kind` (`changed` | `added` | `removed`), `origin`, `children`, `onApprove`, `onDeny`, `disabled`, `className`. `Summary`: `count`, `origin`, `onApproveAll`, `onDenyAll`, `disabled`, `settledMessage`, `className`. `Removed`: `title`, `details` (`{label, value}[]`), `onRestore`, `onDiscard`, `restoreLabel`, `discardLabel`, `origin`, `disabled`, `className`. `Jump`: `label`, `onClick`, `disabled`, `className`. `Item` also takes `onPreviewRevert(previewing)`, fired on hover and on focus.
-- **`Alert`** — Inline alert/callout. Four severities (info, success, warning, error) plus `assistant` — a violet, sparkle-marked ground that says a machine wrote the message rather than that anything is wrong, so provenance never has to borrow a severity colour. `action` puts a control at the end — the link or button that resolves what the alert reports — and `icon` replaces the status icon; an svg that paints with `currentColor` (a CustomIcon) is drawn in the colour and size of the built-in one. _Key props:_ `type`, `message`, `action`, `icon`, `hasMargin`, `children` (expandable body), `isExpanded`, `onToggle`, `className`.
+- **`Alert`** — Inline alert/callout. Four severities (info, success, warning, error) plus `assistant` — a violet, sparkle-marked ground that says a machine wrote the message rather than that anything is wrong, so provenance never has to borrow a severity colour. `action` puts a control at the end — the link or button that resolves what the alert reports — and `icon` replaces the status icon; an svg that paints with `currentColor` (a CustomIcon) is drawn in the colour and size of the built-in one. _Key props:_ `type`, `message`, `action`, `icon`, `hasMargin`, `live` (makes the message a live region — `role="alert"` for error/warning, announced as it mounts; `status` otherwise, announced when its `message` changes, so keep it mounted; off by default), `children` (expandable body), `isExpanded`, `onToggle`, `className`.
 - **`IconIndicator`** — A non-interactive icon that carries a meaning, such as a capability shown on a page that cannot switch it on. Same square as an icon-only `Button` at each `size`, so it lines up where a sibling view shows the button. Renders `role="img"`, named by `aria-label`; with a `tooltip` it takes focus so the tooltip is reachable by keyboard. Reach for it instead of a hand-sized `<span>` around an icon. _Key props:_ `icon`, `aria-label`, `tooltip`, `size`.
 - **`StatusBadge`** — Large status indicator (e.g. success checkmark) for terminal/confirmation screens. _Key props:_ `type`.
 - **`StatBadge`** — Pill showing a numeric value with a label (e.g. "3 accounts selected"). _Key props:_ `count`, `label`.
@@ -44,7 +44,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 - **`Progress`** — Progress bar.
 - **`LoadingBar`** — Indeterminate full-width loading line; the variant colour sweeps across a pale track for work of unknown duration. Toggle `active` rather than unmounting, so the reserved height prevents layout shift. _Key props:_ `active`, `LoadingBarVariant` (`default` | `warning` | `error`), `LoadingBarSize` (`small` | `medium` | `large`), `aria-label`, `aria-labelledby`, `className`, `style`.
 - **`Spinner`** — Loading spinner.
-- **`Skeleton`** — Loading placeholders. Includes `Skeleton.Avatar` and `Skeleton.Input`.
+- **`Skeleton`** — Loading placeholders. Includes `Skeleton.Avatar` and `Skeleton.Input`. The shimmer stops under `prefers-reduced-motion`, leaving the plain placeholder.
 - **`Tooltip`** — Hover/focus tooltip; also works on disabled controls (see CLAUDE.md). It describes its trigger once shown, so `describesTrigger={false}` where the same sentence is already on screen and referenced — otherwise a screen reader reads it twice. _Key props:_ `text`, `placement`, `delay`, `maxWidth`, `shouldShow`, `triggerAs`, `describesTrigger`, `isShrinkable`, `fill`, `wrapChildren`, `suppressed` (holds the tooltip back, e.g. while the popup its trigger opens is up), `showOnFocus` (false where script can move focus onto the trigger, e.g. an option a panel focuses on open), `focusableTrigger` (makes a trigger that cannot take focus — text, a static `Tag` — a tab stop, so the tooltip is not mouse-only; not for focusable children).
 - **`TruncatedTooltip`** — Shows a tooltip only when its text is truncated.
 - **`Confetti`** — Celebratory confetti burst for success moments. _Key props:_ `pieces`.
@@ -103,7 +103,7 @@ The catalog of components exported from `@stackone/malachite`. **Reach for one o
 ## Typography
 
 - **`ClampText`** — Clamps text to N lines; expands to full text on hover/focus with a height animation. Wrapping markdown? Pass `variant="flow"` to the `Typography.MarkdownBlock` inside it, or the clamp counts blocks instead of lines.
-- **`Typography`** — Text primitives — use these instead of raw colour tokens on `<span>`s. Includes `Typography.Text`, `Typography.SecondaryText`, `Typography.EllipsisText`, etc., with size/weight/color props. `Typography.Text` takes `font="sans" | "heading" | "body" | "mono"`; `Typography.CodeText` takes `variant="inline"` for a chip mid-sentence; `Typography.MarkdownBlock` takes `variant="flow"` for use inside `ClampText`, `variant="inline"` for one line of inline syntax set inside another component (no autolinks, images as alt text), `links="inert"` to draw links without an anchor inside a button, and `normalizeSource` for machine-generated descriptions that omit blank lines between blocks. `Typography.EllipsisText` takes a `size` so a truncating label can match the text beside it, and shows its `tooltip` on every hover unless `tooltipWhenTruncated` is set, which limits it to text that is actually cut off — for a tooltip that repeats the label, where a tooltip carrying something the label does not say should keep the default.
+- **`Typography`** — Text primitives — use these instead of raw colour tokens on `<span>`s. Includes `Typography.Text`, `Typography.SecondaryText`, `Typography.EllipsisText`, etc., with size/weight/color props. `Typography.Text` takes `font="sans" | "heading" | "body" | "mono"`, and `as` (`p`, `h1`–`h6`) for a heading or paragraph that keeps its look; `Typography.CodeText` takes `variant="inline"` for a chip mid-sentence; `Typography.MarkdownBlock` takes `variant="flow"` for use inside `ClampText`, `variant="inline"` for one line of inline syntax set inside another component (no autolinks, images as alt text), `links="inert"` to draw links without an anchor inside a button, and `normalizeSource` for machine-generated descriptions that omit blank lines between blocks. `Typography.EllipsisText` takes a `size` so a truncating label can match the text beside it, and shows its `tooltip` on every hover unless `tooltipWhenTruncated` is set, which limits it to text that is actually cut off — for a tooltip that repeats the label, where a tooltip carrying something the label does not say should keep the default.
 
 ## Data display
 

package/dist/components/Alert.js

@@ -1,16 +1,16 @@
-import { jsxs as n, jsx as e, Fragment as k } from "react/jsx-runtime";
-import { useState as _ } from "react";
-import { Button as j } from "./Button.js";
-import B from "./CustomIcons/CaretDownIcon.js";
-import E from "./CustomIcons/CaretUpIcon.js";
-import F from "./CustomIcons/CheckCircleFilled.js";
-import S from "./CustomIcons/ErrorCircleFilled.js";
-import O from "./CustomIcons/InfoCircleFilled.js";
-import z from "./CustomIcons/SparkleIcon.js";
-import A from "./CustomIcons/WarningCircleFilled.js";
-import W from "./Typography/MarkdownBlock.js";
-import { getTextColor as H } from "./Typography/textStyles.js";
-const v = (r) => {
+import { jsxs as i, jsx as e, Fragment as j } from "react/jsx-runtime";
+import { useState as B } from "react";
+import { Button as E } from "./Button.js";
+import F from "./CustomIcons/CaretDownIcon.js";
+import S from "./CustomIcons/CaretUpIcon.js";
+import O from "./CustomIcons/CheckCircleFilled.js";
+import z from "./CustomIcons/ErrorCircleFilled.js";
+import A from "./CustomIcons/InfoCircleFilled.js";
+import R from "./CustomIcons/SparkleIcon.js";
+import W from "./CustomIcons/WarningCircleFilled.js";
+import H from "./Typography/MarkdownBlock.js";
+import { getTextColor as L } from "./Typography/textStyles.js";
+const g = (r) => {
   switch (r) {
     case "info":
       return "primary";
@@ -31,108 +31,109 @@ const v = (r) => {
   width: "13px",
   height: "13px",
   flexShrink: 0
-}, i = {
+}, n = {
   info: "var(--malachite-alert-info-foreground)",
   success: "var(--malachite-alert-success-foreground)",
   error: "var(--malachite-alert-error-foreground)",
   warning: "var(--malachite-alert-warning-foreground)",
   assistant: "var(--malachite-alert-assistant-foreground)"
-}, L = {
+}, M = {
   info: /* @__PURE__ */ e(
-    O,
+    A,
     {
-      style: { ...s, color: i.info }
+      style: { ...s, color: n.info }
     }
   ),
   success: /* @__PURE__ */ e(
-    F,
+    O,
     {
-      style: { ...s, color: i.success }
+      style: { ...s, color: n.success }
     }
   ),
   error: /* @__PURE__ */ e(
-    S,
+    z,
     {
-      style: { ...s, color: i.error }
+      style: { ...s, color: n.error }
     }
   ),
   warning: /* @__PURE__ */ e(
-    A,
+    W,
     {
-      style: { ...s, color: i.warning }
+      style: { ...s, color: n.warning }
     }
   ),
   // The same sparkle the control that produced the message carries, so the two read as
   // one thread rather than two unrelated affordances.
   assistant: /* @__PURE__ */ e(
-    z,
+    R,
     {
-      style: { ...s, color: i.assistant }
+      style: { ...s, color: n.assistant }
     }
   )
-}, h = (r, l) => l ? /* @__PURE__ */ e(
+}, p = (r, l) => l ? /* @__PURE__ */ e(
   "span",
   {
     className: "alert-status-icon inline-flex shrink-0 [&_svg]:size-full!",
-    style: { ...s, color: i[r] },
+    style: { ...s, color: n[r] },
     children: l
   }
-) : L[r], u = ({ text: r, type: l }) => /* @__PURE__ */ e(W, { text: r, color: v(l), size: "small", omitMargin: !0 }), Q = ({
+) : M[r], v = ({ text: r, type: l }) => /* @__PURE__ */ e(H, { text: r, color: g(l), size: "small", omitMargin: !0 }), Z = ({
   type: r = "info",
   message: l,
-  hasMargin: g = !0,
-  className: w,
+  hasMargin: w = !0,
+  className: C,
   children: m,
   isExpanded: c,
   onToggle: d,
   action: o,
-  icon: f
+  icon: f,
+  live: N = !1
 }) => {
-  const t = !!m, [C, N] = _(!1), a = c !== void 0 ? c : C, b = () => {
-    const p = !a;
-    c === void 0 && N(p), d == null || d(p);
-  }, x = [
+  const t = !!m, x = N ? r === "error" || r === "warning" ? "alert" : "status" : void 0, [b, I] = B(!1), a = c !== void 0 ? c : b, k = () => {
+    const h = !a;
+    c === void 0 && I(h), d == null || d(h);
+  }, u = [
     "alert-base",
     `alert-${r}`,
     "flex",
     "w-full",
     // Ensure full width
     t && a ? "flex-col" : "gap-2 items-center min-h-[2rem]",
-    g ? "" : "alert-no-margin",
+    w ? "" : "alert-no-margin",
     "text-left",
     t ? "rounded-xl !p-0" : "!px-2.5 !py-1.5",
     // Slightly more vertical padding for centering
-    w
+    C
   ].filter(Boolean).join(" "), y = [
     "flex items-center justify-between w-full",
     t ? "gap-2 px-2.5 py-1" : "gap-2",
     t && a ? "rounded-t-xl" : t ? "rounded-xl" : ""
-  ].filter(Boolean).join(" "), I = ["w-full", "overflow-hidden"].filter(Boolean).join(" ");
-  return t ? /* @__PURE__ */ n("div", { className: `${x} alert-expandable`, children: [
-    /* @__PURE__ */ n("div", { className: y, children: [
-      /* @__PURE__ */ n("div", { className: "flex-1 flex gap-2 items-center", children: [
-        h(r, f),
-        /* @__PURE__ */ e("div", { className: "flex-1 flex items-center", children: /* @__PURE__ */ e("div", { className: "[&>div]:mb-0", children: /* @__PURE__ */ e(u, { text: l, type: r }) }) })
+  ].filter(Boolean).join(" "), _ = ["w-full", "overflow-hidden"].filter(Boolean).join(" ");
+  return t ? /* @__PURE__ */ i("div", { className: `${u} alert-expandable`, children: [
+    /* @__PURE__ */ i("div", { className: y, children: [
+      /* @__PURE__ */ i("div", { className: "flex-1 flex gap-2 items-center", children: [
+        p(r, f),
+        /* @__PURE__ */ e("div", { className: "flex-1 flex items-center", children: /* @__PURE__ */ e("div", { className: "[&>div]:mb-0", role: x, children: /* @__PURE__ */ e(v, { text: l, type: r }) }) })
       ] }),
-      /* @__PURE__ */ n("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
         o && /* @__PURE__ */ e("div", { className: "alert-action flex items-center", children: o }),
         /* @__PURE__ */ e(
-          j,
+          E,
           {
             variant: "no-style",
             size: "xsmall",
-            onClick: b,
+            onClick: k,
             "aria-label": a ? "Collapse" : "Expand",
             style: {
-              color: H(v(r))
+              color: L(g(r))
             },
             children: a ? /* @__PURE__ */ e(
-              E,
+              S,
               {
                 style: { minWidth: "13px", minHeight: "13px" }
               }
             ) : /* @__PURE__ */ e(
-              B,
+              F,
               {
                 style: { minWidth: "13px", minHeight: "13px" }
               }
@@ -141,15 +142,15 @@ const v = (r) => {
         )
       ] })
     ] }),
-    a && /* @__PURE__ */ e(k, { children: /* @__PURE__ */ e("div", { className: I, children: /* @__PURE__ */ e("div", { className: "bg-white rounded-[var(--malachite-radius-10,10px)] shadow-[0px_1px_0px_0px_rgba(0,0,0,0.15)] border border-[#e8e8e8] border-solid mx-2 mb-2 max-h-[553px] overflow-y-auto", children: m }) }) })
-  ] }) : /* @__PURE__ */ n("div", { className: x, children: [
-    h(r, f),
-    /* @__PURE__ */ e("div", { className: "flex-1 flex items-center", children: /* @__PURE__ */ e("div", { className: "[&>div]:mb-0", children: /* @__PURE__ */ e(u, { text: l, type: r }) }) }),
+    a && /* @__PURE__ */ e(j, { children: /* @__PURE__ */ e("div", { className: _, children: /* @__PURE__ */ e("div", { className: "bg-white rounded-[var(--malachite-radius-10,10px)] shadow-[0px_1px_0px_0px_rgba(0,0,0,0.15)] border border-[#e8e8e8] border-solid mx-2 mb-2 max-h-[553px] overflow-y-auto", children: m }) }) })
+  ] }) : /* @__PURE__ */ i("div", { className: u, children: [
+    p(r, f),
+    /* @__PURE__ */ e("div", { className: "flex-1 flex items-center", children: /* @__PURE__ */ e("div", { className: "[&>div]:mb-0", role: x, children: /* @__PURE__ */ e(v, { text: l, type: r }) }) }),
     o && /* @__PURE__ */ e("div", { className: "alert-action shrink-0 flex items-center", children: o })
   ] });
 };
 export {
-  Q as Alert,
-  Q as default
+  Z as Alert,
+  Z as default
 };
 //# sourceMappingURL=Alert.js.map

package/dist/components/Alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../src/components/Alert.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Button, ButtonVariant } from './Button';\nimport CaretDownIcon from './CustomIcons/CaretDownIcon';\nimport CaretUpIcon from './CustomIcons/CaretUpIcon';\nimport CheckCircleFilled from './CustomIcons/CheckCircleFilled';\nimport ErrorCircleFilled from './CustomIcons/ErrorCircleFilled';\nimport InfoCircleFilled from './CustomIcons/InfoCircleFilled';\nimport SparkleIcon from './CustomIcons/SparkleIcon';\nimport WarningCircleFilled from './CustomIcons/WarningCircleFilled';\nimport MarkdownBlock from './Typography/MarkdownBlock';\nimport type { TextColor } from './Typography/Text';\nimport { getTextColor } from './Typography/textStyles';\n\nexport type AlertType = 'info' | 'success' | 'error' | 'warning' | 'assistant';\n\ninterface AlertButtonConfig {\n    label: string;\n    onClick: () => void;\n    variant?: ButtonVariant;\n    icon?: React.ReactNode;\n}\n\ninterface AlertProps {\n    type?: AlertType;\n    message: string;\n    hasMargin?: boolean;\n    className?: string;\n    children?: React.ReactNode;\n    isExpanded?: boolean;\n    onToggle?: (expanded: boolean) => void;\n    /** A control at the end of the alert — a link or button that resolves what it reports. */\n    action?: React.ReactNode;\n    /** Replaces the type's status icon: an svg painting with `currentColor`, such as a CustomIcon,\n     *  is drawn in the type's colour at the same size. */\n    icon?: React.ReactNode;\n}\n\n// Distinct from the imported `getTextColor`, which maps a TextColor to a CSS variable.\n// This maps an AlertType to a TextColor token; both are used in this file.\nconst getAlertTextColor = (alertType: AlertType): TextColor => {\n    switch (alertType) {\n        case 'info':\n            return 'primary';\n        case 'success':\n            return 'success';\n        case 'error':\n            return 'error';\n        case 'warning':\n            return 'warning';\n        // The violet is on `.alert-assistant` itself; inheriting it keeps one definition\n        // rather than a TextColor token that only this alert would ever name.\n        case 'assistant':\n            return 'inherit';\n        default:\n            return 'primary';\n    }\n};\n\nconst ICON_STYLE = {\n    width: '13px',\n    height: '13px',\n    flexShrink: 0,\n};\n\nconst ICON_COLOR: Record<AlertType, string> = {\n    info: 'var(--malachite-alert-info-foreground)',\n    success: 'var(--malachite-alert-success-foreground)',\n    error: 'var(--malachite-alert-error-foreground)',\n    warning: 'var(--malachite-alert-warning-foreground)',\n    assistant: 'var(--malachite-alert-assistant-foreground)',\n};\n\nconst AlertIcon = {\n    info: (\n        <InfoCircleFilled\n            style={{ ...ICON_STYLE, color: ICON_COLOR.info }}\n        />\n    ),\n    success: (\n        <CheckCircleFilled\n            style={{ ...ICON_STYLE, color: ICON_COLOR.success }}\n        />\n    ),\n    error: (\n        <ErrorCircleFilled\n            style={{ ...ICON_STYLE, color: ICON_COLOR.error }}\n        />\n    ),\n    warning: (\n        <WarningCircleFilled\n            style={{ ...ICON_STYLE, color: ICON_COLOR.warning }}\n        />\n    ),\n    // The same sparkle the control that produced the message carries, so the two read as\n    // one thread rather than two unrelated affordances.\n    assistant: (\n        <SparkleIcon\n            style={{ ...ICON_STYLE, color: ICON_COLOR.assistant }}\n        />\n    ),\n};\n\nconst statusIcon = (type: AlertType, icon: React.ReactNode) =>\n    icon ? (\n        <span\n            className=\"alert-status-icon inline-flex shrink-0 [&_svg]:size-full!\"\n            style={{ ...ICON_STYLE, color: ICON_COLOR[type] }}\n        >\n            {icon}\n        </span>\n    ) : (\n        AlertIcon[type]\n    );\n\nconst SimpleTextRenderer: React.FC<{ text: string; type: AlertType }> = ({ text, type }) => {\n    return <MarkdownBlock text={text} color={getAlertTextColor(type)} size=\"small\" omitMargin />;\n};\n\nconst Alert: React.FC<AlertProps> = ({\n    type = 'info',\n    message,\n    hasMargin = true,\n    className,\n    children,\n    isExpanded,\n    onToggle,\n    action,\n    icon,\n}) => {\n    const isExpandable = !!children;\n    const [internalExpanded, setInternalExpanded] = useState(false);\n\n    // Use controlled state if isExpanded is provided, otherwise use internal state\n    const expanded = isExpanded !== undefined ? isExpanded : internalExpanded;\n\n    const handleToggle = () => {\n        const newExpanded = !expanded;\n        if (isExpanded === undefined) {\n            // Uncontrolled mode\n            setInternalExpanded(newExpanded);\n        }\n        // Call onToggle if provided (for both controlled and uncontrolled)\n        onToggle?.(newExpanded);\n    };\n\n    const alertClasses = [\n        'alert-base',\n        `alert-${type}`,\n        'flex',\n        'w-full', // Ensure full width\n        isExpandable && expanded ? 'flex-col' : 'gap-2 items-center min-h-[2rem]',\n        !hasMargin ? 'alert-no-margin' : '',\n        'text-left',\n        isExpandable ? 'rounded-xl !p-0' : '!px-2.5 !py-1.5', // Slightly more vertical padding for centering\n        className,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const headerClasses = [\n        'flex items-center justify-between w-full',\n        isExpandable ? 'gap-2 px-2.5 py-1' : 'gap-2',\n        isExpandable && expanded ? 'rounded-t-xl' : isExpandable ? 'rounded-xl' : '',\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const expandableContentClasses = ['w-full', 'overflow-hidden'].filter(Boolean).join(' ');\n\n    // Non-expandable alert (original behavior)\n    if (!isExpandable) {\n        return (\n            <div className={alertClasses}>\n                {statusIcon(type, icon)}\n                <div className=\"flex-1 flex items-center\">\n                    <div className=\"[&>div]:mb-0\">\n                        <SimpleTextRenderer text={message} type={type} />\n                    </div>\n                </div>\n                {action && <div className=\"alert-action shrink-0 flex items-center\">{action}</div>}\n            </div>\n        );\n    }\n\n    // Expandable alert\n    return (\n        <div className={`${alertClasses} alert-expandable`}>\n            {/* Header section with title and expand/collapse button */}\n            <div className={headerClasses}>\n                <div className=\"flex-1 flex gap-2 items-center\">\n                    {statusIcon(type, icon)}\n                    <div className=\"flex-1 flex items-center\">\n                        <div className=\"[&>div]:mb-0\">\n                            <SimpleTextRenderer text={message} type={type} />\n                        </div>\n                    </div>\n                </div>\n\n                {/* Right side buttons container */}\n                <div className=\"flex items-center gap-2\">\n                    {action && <div className=\"alert-action flex items-center\">{action}</div>}\n                    {/* Expand/collapse button */}\n                    <Button\n                        variant=\"no-style\"\n                        size=\"xsmall\"\n                        onClick={handleToggle}\n                        aria-label={expanded ? 'Collapse' : 'Expand'}\n                        style={{\n                            color: getTextColor(getAlertTextColor(type)),\n                        }}\n                    >\n                        {expanded ? (\n                            <CaretUpIcon\n                                style={{ minWidth: '13px', minHeight: '13px' }}\n                            />\n                        ) : (\n                            <CaretDownIcon\n                                style={{ minWidth: '13px', minHeight: '13px' }}\n                            />\n                        )}\n                    </Button>\n                </div>\n            </div>\n\n            {/* Expandable content */}\n            {expanded && (\n                <>\n                    <div className={expandableContentClasses}>\n                        <div className=\"bg-white rounded-[var(--malachite-radius-10,10px)] shadow-[0px_1px_0px_0px_rgba(0,0,0,0.15)] border border-[#e8e8e8] border-solid mx-2 mb-2 max-h-[553px] overflow-y-auto\">\n                            {children}\n                        </div>\n                    </div>\n                </>\n            )}\n        </div>\n    );\n};\n\nexport default Alert;\nexport { Alert };\nexport type { AlertButtonConfig };\n"],"names":["getAlertTextColor","alertType","ICON_STYLE","ICON_COLOR","AlertIcon","jsx","InfoCircleFilled","CheckCircleFilled","ErrorCircleFilled","WarningCircleFilled","SparkleIcon","statusIcon","type","icon","SimpleTextRenderer","text","MarkdownBlock","Alert","message","hasMargin","className","children","isExpanded","onToggle","action","isExpandable","internalExpanded","setInternalExpanded","useState","expanded","handleToggle","newExpanded","alertClasses","headerClasses","expandableContentClasses","jsxs","Button","getTextColor","CaretUpIcon","CaretDownIcon","Fragment"],"mappings":"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"}
+{"version":3,"file":"Alert.js","sources":["../../src/components/Alert.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Button, ButtonVariant } from './Button';\nimport CaretDownIcon from './CustomIcons/CaretDownIcon';\nimport CaretUpIcon from './CustomIcons/CaretUpIcon';\nimport CheckCircleFilled from './CustomIcons/CheckCircleFilled';\nimport ErrorCircleFilled from './CustomIcons/ErrorCircleFilled';\nimport InfoCircleFilled from './CustomIcons/InfoCircleFilled';\nimport SparkleIcon from './CustomIcons/SparkleIcon';\nimport WarningCircleFilled from './CustomIcons/WarningCircleFilled';\nimport MarkdownBlock from './Typography/MarkdownBlock';\nimport type { TextColor } from './Typography/Text';\nimport { getTextColor } from './Typography/textStyles';\n\nexport type AlertType = 'info' | 'success' | 'error' | 'warning' | 'assistant';\n\ninterface AlertButtonConfig {\n    label: string;\n    onClick: () => void;\n    variant?: ButtonVariant;\n    icon?: React.ReactNode;\n}\n\ninterface AlertProps {\n    type?: AlertType;\n    message: string;\n    hasMargin?: boolean;\n    className?: string;\n    children?: React.ReactNode;\n    isExpanded?: boolean;\n    onToggle?: (expanded: boolean) => void;\n    /** A control at the end of the alert — a link or button that resolves what it reports. */\n    action?: React.ReactNode;\n    /** Replaces the type's status icon: an svg painting with `currentColor`, such as a CustomIcon,\n     *  is drawn in the type's colour at the same size. */\n    icon?: React.ReactNode;\n    /** Makes its message a live region: `role=\"alert\"` for error and warning, `status` otherwise.\n     *  Screen readers reliably announce an `alert` as it mounts; a `status` is read when its\n     *  `message` changes, so keep a live info or success alert mounted. Off by default. */\n    live?: boolean;\n}\n\n// Distinct from the imported `getTextColor`, which maps a TextColor to a CSS variable.\n// This maps an AlertType to a TextColor token; both are used in this file.\nconst getAlertTextColor = (alertType: AlertType): TextColor => {\n    switch (alertType) {\n        case 'info':\n            return 'primary';\n        case 'success':\n            return 'success';\n        case 'error':\n            return 'error';\n        case 'warning':\n            return 'warning';\n        // The violet is on `.alert-assistant` itself; inheriting it keeps one definition\n        // rather than a TextColor token that only this alert would ever name.\n        case 'assistant':\n            return 'inherit';\n        default:\n            return 'primary';\n    }\n};\n\nconst ICON_STYLE = {\n    width: '13px',\n    height: '13px',\n    flexShrink: 0,\n};\n\nconst ICON_COLOR: Record<AlertType, string> = {\n    info: 'var(--malachite-alert-info-foreground)',\n    success: 'var(--malachite-alert-success-foreground)',\n    error: 'var(--malachite-alert-error-foreground)',\n    warning: 'var(--malachite-alert-warning-foreground)',\n    assistant: 'var(--malachite-alert-assistant-foreground)',\n};\n\nconst AlertIcon = {\n    info: (\n        <InfoCircleFilled\n            style={{ ...ICON_STYLE, color: ICON_COLOR.info }}\n        />\n    ),\n    success: (\n        <CheckCircleFilled\n            style={{ ...ICON_STYLE, color: ICON_COLOR.success }}\n        />\n    ),\n    error: (\n        <ErrorCircleFilled\n            style={{ ...ICON_STYLE, color: ICON_COLOR.error }}\n        />\n    ),\n    warning: (\n        <WarningCircleFilled\n            style={{ ...ICON_STYLE, color: ICON_COLOR.warning }}\n        />\n    ),\n    // The same sparkle the control that produced the message carries, so the two read as\n    // one thread rather than two unrelated affordances.\n    assistant: (\n        <SparkleIcon\n            style={{ ...ICON_STYLE, color: ICON_COLOR.assistant }}\n        />\n    ),\n};\n\nconst statusIcon = (type: AlertType, icon: React.ReactNode) =>\n    icon ? (\n        <span\n            className=\"alert-status-icon inline-flex shrink-0 [&_svg]:size-full!\"\n            style={{ ...ICON_STYLE, color: ICON_COLOR[type] }}\n        >\n            {icon}\n        </span>\n    ) : (\n        AlertIcon[type]\n    );\n\nconst SimpleTextRenderer: React.FC<{ text: string; type: AlertType }> = ({ text, type }) => {\n    return <MarkdownBlock text={text} color={getAlertTextColor(type)} size=\"small\" omitMargin />;\n};\n\nconst Alert: React.FC<AlertProps> = ({\n    type = 'info',\n    message,\n    hasMargin = true,\n    className,\n    children,\n    isExpanded,\n    onToggle,\n    action,\n    icon,\n    live = false,\n}) => {\n    const isExpandable = !!children;\n    const urgent = type === 'error' || type === 'warning';\n    const liveRole = live ? (urgent ? 'alert' : 'status') : undefined;\n    const [internalExpanded, setInternalExpanded] = useState(false);\n\n    // Use controlled state if isExpanded is provided, otherwise use internal state\n    const expanded = isExpanded !== undefined ? isExpanded : internalExpanded;\n\n    const handleToggle = () => {\n        const newExpanded = !expanded;\n        if (isExpanded === undefined) {\n            // Uncontrolled mode\n            setInternalExpanded(newExpanded);\n        }\n        // Call onToggle if provided (for both controlled and uncontrolled)\n        onToggle?.(newExpanded);\n    };\n\n    const alertClasses = [\n        'alert-base',\n        `alert-${type}`,\n        'flex',\n        'w-full', // Ensure full width\n        isExpandable && expanded ? 'flex-col' : 'gap-2 items-center min-h-[2rem]',\n        !hasMargin ? 'alert-no-margin' : '',\n        'text-left',\n        isExpandable ? 'rounded-xl !p-0' : '!px-2.5 !py-1.5', // Slightly more vertical padding for centering\n        className,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const headerClasses = [\n        'flex items-center justify-between w-full',\n        isExpandable ? 'gap-2 px-2.5 py-1' : 'gap-2',\n        isExpandable && expanded ? 'rounded-t-xl' : isExpandable ? 'rounded-xl' : '',\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const expandableContentClasses = ['w-full', 'overflow-hidden'].filter(Boolean).join(' ');\n\n    // Non-expandable alert (original behavior)\n    if (!isExpandable) {\n        return (\n            <div className={alertClasses}>\n                {statusIcon(type, icon)}\n                <div className=\"flex-1 flex items-center\">\n                    <div className=\"[&>div]:mb-0\" role={liveRole}>\n                        <SimpleTextRenderer text={message} type={type} />\n                    </div>\n                </div>\n                {action && <div className=\"alert-action shrink-0 flex items-center\">{action}</div>}\n            </div>\n        );\n    }\n\n    // Expandable alert\n    return (\n        <div className={`${alertClasses} alert-expandable`}>\n            {/* Header section with title and expand/collapse button */}\n            <div className={headerClasses}>\n                <div className=\"flex-1 flex gap-2 items-center\">\n                    {statusIcon(type, icon)}\n                    <div className=\"flex-1 flex items-center\">\n                        <div className=\"[&>div]:mb-0\" role={liveRole}>\n                            <SimpleTextRenderer text={message} type={type} />\n                        </div>\n                    </div>\n                </div>\n\n                {/* Right side buttons container */}\n                <div className=\"flex items-center gap-2\">\n                    {action && <div className=\"alert-action flex items-center\">{action}</div>}\n                    {/* Expand/collapse button */}\n                    <Button\n                        variant=\"no-style\"\n                        size=\"xsmall\"\n                        onClick={handleToggle}\n                        aria-label={expanded ? 'Collapse' : 'Expand'}\n                        style={{\n                            color: getTextColor(getAlertTextColor(type)),\n                        }}\n                    >\n                        {expanded ? (\n                            <CaretUpIcon\n                                style={{ minWidth: '13px', minHeight: '13px' }}\n                            />\n                        ) : (\n                            <CaretDownIcon\n                                style={{ minWidth: '13px', minHeight: '13px' }}\n                            />\n                        )}\n                    </Button>\n                </div>\n            </div>\n\n            {/* Expandable content */}\n            {expanded && (\n                <>\n                    <div className={expandableContentClasses}>\n                        <div className=\"bg-white rounded-[var(--malachite-radius-10,10px)] shadow-[0px_1px_0px_0px_rgba(0,0,0,0.15)] border border-[#e8e8e8] border-solid mx-2 mb-2 max-h-[553px] overflow-y-auto\">\n                            {children}\n                        </div>\n                    </div>\n                </>\n            )}\n        </div>\n    );\n};\n\nexport default Alert;\nexport { Alert };\nexport type { AlertButtonConfig };\n"],"names":["getAlertTextColor","alertType","ICON_STYLE","ICON_COLOR","AlertIcon","jsx","InfoCircleFilled","CheckCircleFilled","ErrorCircleFilled","WarningCircleFilled","SparkleIcon","statusIcon","type","icon","SimpleTextRenderer","text","MarkdownBlock","Alert","message","hasMargin","className","children","isExpanded","onToggle","action","live","isExpandable","liveRole","internalExpanded","setInternalExpanded","useState","expanded","handleToggle","newExpanded","alertClasses","headerClasses","expandableContentClasses","jsxs","Button","getTextColor","CaretUpIcon","CaretDownIcon","Fragment"],"mappings":"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"}

package/dist/components/Skeleton.js

@@ -1,7 +1,9 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import { useRef as d } from "react";
-import { useAdoptedStyleSheet as c } from "./useAdoptedStyleSheet.js";
-const k = { small: 24, default: 32, large: 40 }, S = { small: 64, default: 96, large: 128 }, E = { small: 24, default: 32, large: 40 }, b = { small: 24, default: 32, large: 40 }, g = "malachite-skeleton-loading", u = "rgba(190, 190, 190, 0.2)", p = "rgba(129, 129, 129, 0.24)", y = `linear-gradient(90deg, ${u} 25%, ${p} 37%, ${u} 63%)`, f = `@keyframes ${g} { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }`, T = (e) => {
+import { useAdoptedStyleSheet as u } from "./useAdoptedStyleSheet.js";
+const E = { small: 24, default: 32, large: 40 }, S = { small: 64, default: 96, large: 128 }, T = { small: 24, default: 32, large: 40 }, b = { small: 24, default: 32, large: 40 }, g = "malachite-skeleton-loading", s = "rgba(190, 190, 190, 0.2)", p = "rgba(129, 129, 129, 0.24)", A = `linear-gradient(90deg, ${s} 25%, ${p} 37%, ${s} 63%)`, k = "data-malachite-skeleton-active", m = `@keyframes ${g} { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
+[${k}] { background-image: ${A}; background-size: 400% 100%; animation: ${g} 1.4s ease infinite; }
+@media (prefers-reduced-motion: reduce) { [${k}] { animation: none; background-image: none; } }`, _ = (e) => {
   switch (e) {
     case "round":
     case "circle":
@@ -11,93 +13,94 @@ const k = { small: 24, default: 32, large: 40 }, S = { small: 64, default: 96, l
     default:
       return 6;
   }
-}, m = (e) => ({
+}, f = {
   display: "inline-block",
   verticalAlign: "middle",
-  background: e ? y : u,
-  backgroundSize: e ? "400% 100%" : void 0,
-  animation: e ? `${g} 1.4s ease infinite` : void 0,
+  backgroundColor: s,
   flexShrink: 0
-}), A = ({
+}, v = ({
   size: e = "default",
-  shape: r = "default",
-  block: n = !1,
-  active: l = !0,
+  shape: n = "default",
+  block: r = !1,
+  active: o = !0,
   className: t,
   width: a,
-  height: o,
-  minWidth: s
+  height: i,
+  minWidth: l
 }) => {
   const h = d(null);
-  return c(h, f, "malachite-skeleton-keyframes"), /* @__PURE__ */ i(
+  return u(h, m, "malachite-skeleton"), /* @__PURE__ */ c(
     "span",
     {
       ref: h,
       className: t,
+      "data-malachite-skeleton-active": o ? "" : void 0,
       "aria-busy": "true",
       "aria-hidden": "true",
       style: {
-        ...m(l),
-        width: n ? "100%" : a ?? S[e],
-        height: o ?? k[e],
-        minWidth: s,
-        borderRadius: T(r)
+        ...f,
+        width: r ? "100%" : a ?? S[e],
+        height: i ?? E[e],
+        minWidth: l,
+        borderRadius: _(n)
       }
     }
   );
-}, R = ({
+}, y = ({
   size: e = "default",
-  block: r = !1,
-  active: n = !0,
-  className: l,
+  block: n = !1,
+  active: r = !0,
+  className: o,
   width: t,
   height: a,
-  minWidth: o
+  minWidth: i
 }) => {
-  const s = d(null);
-  return c(s, f, "malachite-skeleton-keyframes"), /* @__PURE__ */ i(
+  const l = d(null);
+  return u(l, m, "malachite-skeleton"), /* @__PURE__ */ c(
     "span",
     {
-      ref: s,
-      className: l,
+      ref: l,
+      className: o,
+      "data-malachite-skeleton-active": r ? "" : void 0,
       "aria-busy": "true",
       "aria-hidden": "true",
       style: {
-        ...m(n),
-        width: r ? "100%" : t ?? 160,
-        height: a ?? E[e],
-        minWidth: o,
+        ...f,
+        width: n ? "100%" : t ?? 160,
+        height: a ?? T[e],
+        minWidth: i,
         borderRadius: 6
       }
     }
   );
 }, I = ({
   size: e = "default",
-  shape: r = "circle",
-  active: n = !0,
-  className: l
+  shape: n = "circle",
+  active: r = !0,
+  className: o
 }) => {
   const t = d(null);
-  c(t, f, "malachite-skeleton-keyframes");
+  u(t, m, "malachite-skeleton");
   const a = typeof e == "number" ? e : b[e];
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ c(
     "span",
     {
       ref: t,
-      className: l,
+      className: o,
+      "data-malachite-skeleton-active": r ? "" : void 0,
       "aria-busy": "true",
       "aria-hidden": "true",
       style: {
-        ...m(n),
+        ...f,
         width: a,
         height: a,
-        borderRadius: r === "circle" ? 9999 : 6
+        borderRadius: n === "circle" ? 9999 : 6
       }
     }
   );
 }, B = {
-  Button: A,
-  Input: R,
+  Button: v,
+  Input: y,
   Avatar: I
 };
 export {

package/dist/components/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../../src/components/Skeleton.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { useAdoptedStyleSheet } from './useAdoptedStyleSheet';\n\ntype SkeletonSize = 'small' | 'default' | 'large';\ntype SkeletonShape = 'default' | 'round' | 'circle' | 'square';\n\ninterface BaseSkeletonProps {\n    active?: boolean;\n    className?: string;\n}\n\ninterface SkeletonButtonProps extends BaseSkeletonProps {\n    size?: SkeletonSize;\n    shape?: SkeletonShape;\n    block?: boolean;\n    width?: number | string;\n    height?: number | string;\n    minWidth?: number | string;\n}\n\ninterface SkeletonInputProps extends BaseSkeletonProps {\n    size?: SkeletonSize;\n    block?: boolean;\n    width?: number | string;\n    height?: number | string;\n    minWidth?: number | string;\n}\n\ninterface SkeletonAvatarProps extends BaseSkeletonProps {\n    size?: SkeletonSize | number;\n    shape?: 'circle' | 'square';\n}\n\nconst BUTTON_HEIGHT: Record<SkeletonSize, number> = { small: 24, default: 32, large: 40 };\nconst BUTTON_WIDTH: Record<SkeletonSize, number> = { small: 64, default: 96, large: 128 };\nconst INPUT_HEIGHT: Record<SkeletonSize, number> = { small: 24, default: 32, large: 40 };\nconst AVATAR_SIZE: Record<SkeletonSize, number> = { small: 24, default: 32, large: 40 };\n\nconst KEYFRAME_NAME = 'malachite-skeleton-loading';\nconst SKELETON_BASE = 'rgba(190, 190, 190, 0.2)';\nconst SKELETON_SHIMMER = 'rgba(129, 129, 129, 0.24)';\nconst SKELETON_GRADIENT = `linear-gradient(90deg, ${SKELETON_BASE} 25%, ${SKELETON_SHIMMER} 37%, ${SKELETON_BASE} 63%)`;\nconst KEYFRAMES_CSS = `@keyframes ${KEYFRAME_NAME} { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }`;\n\nconst getRadius = (shape: SkeletonShape): string | number => {\n    switch (shape) {\n        case 'round':\n        case 'circle':\n            return 9999;\n        case 'square':\n            return 0;\n        default:\n            return 6;\n    }\n};\n\nconst baseStyle = (active: boolean): React.CSSProperties => ({\n    display: 'inline-block',\n    verticalAlign: 'middle',\n    background: active ? SKELETON_GRADIENT : SKELETON_BASE,\n    backgroundSize: active ? '400% 100%' : undefined,\n    animation: active ? `${KEYFRAME_NAME} 1.4s ease infinite` : undefined,\n    flexShrink: 0,\n});\n\nconst SkeletonButton: React.FC<SkeletonButtonProps> = ({\n    size = 'default',\n    shape = 'default',\n    block = false,\n    active = true,\n    className,\n    width,\n    height,\n    minWidth,\n}) => {\n    const ref = useRef<HTMLSpanElement>(null);\n    useAdoptedStyleSheet(ref, KEYFRAMES_CSS, 'malachite-skeleton-keyframes');\n    return (\n        <span\n            ref={ref}\n            className={className}\n            aria-busy=\"true\"\n            aria-hidden=\"true\"\n            style={{\n                ...baseStyle(active),\n                width: block ? '100%' : (width ?? BUTTON_WIDTH[size]),\n                height: height ?? BUTTON_HEIGHT[size],\n                minWidth,\n                borderRadius: getRadius(shape),\n            }}\n        />\n    );\n};\n\nconst SkeletonInput: React.FC<SkeletonInputProps> = ({\n    size = 'default',\n    block = false,\n    active = true,\n    className,\n    width,\n    height,\n    minWidth,\n}) => {\n    const ref = useRef<HTMLSpanElement>(null);\n    useAdoptedStyleSheet(ref, KEYFRAMES_CSS, 'malachite-skeleton-keyframes');\n    return (\n        <span\n            ref={ref}\n            className={className}\n            aria-busy=\"true\"\n            aria-hidden=\"true\"\n            style={{\n                ...baseStyle(active),\n                width: block ? '100%' : (width ?? 160),\n                height: height ?? INPUT_HEIGHT[size],\n                minWidth,\n                borderRadius: 6,\n            }}\n        />\n    );\n};\n\nconst SkeletonAvatar: React.FC<SkeletonAvatarProps> = ({\n    size = 'default',\n    shape = 'circle',\n    active = true,\n    className,\n}) => {\n    const ref = useRef<HTMLSpanElement>(null);\n    useAdoptedStyleSheet(ref, KEYFRAMES_CSS, 'malachite-skeleton-keyframes');\n    const px = typeof size === 'number' ? size : AVATAR_SIZE[size];\n    return (\n        <span\n            ref={ref}\n            className={className}\n            aria-busy=\"true\"\n            aria-hidden=\"true\"\n            style={{\n                ...baseStyle(active),\n                width: px,\n                height: px,\n                borderRadius: shape === 'circle' ? 9999 : 6,\n            }}\n        />\n    );\n};\n\nconst Skeleton = {\n    Button: SkeletonButton,\n    Input: SkeletonInput,\n    Avatar: SkeletonAvatar,\n};\n\nexport default Skeleton;\n"],"names":["BUTTON_HEIGHT","BUTTON_WIDTH","INPUT_HEIGHT","AVATAR_SIZE","KEYFRAME_NAME","SKELETON_BASE","SKELETON_SHIMMER","SKELETON_GRADIENT","KEYFRAMES_CSS","getRadius","shape","baseStyle","active","SkeletonButton","size","block","className","width","height","minWidth","ref","useRef","useAdoptedStyleSheet","jsx","SkeletonInput","SkeletonAvatar","px","Skeleton"],"mappings":"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"}
+{"version":3,"file":"Skeleton.js","sources":["../../src/components/Skeleton.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { useAdoptedStyleSheet } from './useAdoptedStyleSheet';\n\ntype SkeletonSize = 'small' | 'default' | 'large';\ntype SkeletonShape = 'default' | 'round' | 'circle' | 'square';\n\ninterface BaseSkeletonProps {\n    active?: boolean;\n    className?: string;\n}\n\ninterface SkeletonButtonProps extends BaseSkeletonProps {\n    size?: SkeletonSize;\n    shape?: SkeletonShape;\n    block?: boolean;\n    width?: number | string;\n    height?: number | string;\n    minWidth?: number | string;\n}\n\ninterface SkeletonInputProps extends BaseSkeletonProps {\n    size?: SkeletonSize;\n    block?: boolean;\n    width?: number | string;\n    height?: number | string;\n    minWidth?: number | string;\n}\n\ninterface SkeletonAvatarProps extends BaseSkeletonProps {\n    size?: SkeletonSize | number;\n    shape?: 'circle' | 'square';\n}\n\nconst BUTTON_HEIGHT: Record<SkeletonSize, number> = { small: 24, default: 32, large: 40 };\nconst BUTTON_WIDTH: Record<SkeletonSize, number> = { small: 64, default: 96, large: 128 };\nconst INPUT_HEIGHT: Record<SkeletonSize, number> = { small: 24, default: 32, large: 40 };\nconst AVATAR_SIZE: Record<SkeletonSize, number> = { small: 24, default: 32, large: 40 };\n\nconst KEYFRAME_NAME = 'malachite-skeleton-loading';\nconst SKELETON_BASE = 'rgba(190, 190, 190, 0.2)';\nconst SKELETON_SHIMMER = 'rgba(129, 129, 129, 0.24)';\nconst SKELETON_GRADIENT = `linear-gradient(90deg, ${SKELETON_BASE} 25%, ${SKELETON_SHIMMER} 37%, ${SKELETON_BASE} 63%)`;\nconst ACTIVE_ATTR = 'data-malachite-skeleton-active';\n// The shimmer lives in the sheet, not inline, so the reduced-motion query can switch it off.\nconst SKELETON_CSS = `@keyframes ${KEYFRAME_NAME} { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }\n[${ACTIVE_ATTR}] { background-image: ${SKELETON_GRADIENT}; background-size: 400% 100%; animation: ${KEYFRAME_NAME} 1.4s ease infinite; }\n@media (prefers-reduced-motion: reduce) { [${ACTIVE_ATTR}] { animation: none; background-image: none; } }`;\n\nconst getRadius = (shape: SkeletonShape): string | number => {\n    switch (shape) {\n        case 'round':\n        case 'circle':\n            return 9999;\n        case 'square':\n            return 0;\n        default:\n            return 6;\n    }\n};\n\nconst BASE_STYLE: React.CSSProperties = {\n    display: 'inline-block',\n    verticalAlign: 'middle',\n    backgroundColor: SKELETON_BASE,\n    flexShrink: 0,\n};\n\nconst SkeletonButton: React.FC<SkeletonButtonProps> = ({\n    size = 'default',\n    shape = 'default',\n    block = false,\n    active = true,\n    className,\n    width,\n    height,\n    minWidth,\n}) => {\n    const ref = useRef<HTMLSpanElement>(null);\n    useAdoptedStyleSheet(ref, SKELETON_CSS, 'malachite-skeleton');\n    return (\n        <span\n            ref={ref}\n            className={className}\n            data-malachite-skeleton-active={active ? '' : undefined}\n            aria-busy=\"true\"\n            aria-hidden=\"true\"\n            style={{\n                ...BASE_STYLE,\n                width: block ? '100%' : (width ?? BUTTON_WIDTH[size]),\n                height: height ?? BUTTON_HEIGHT[size],\n                minWidth,\n                borderRadius: getRadius(shape),\n            }}\n        />\n    );\n};\n\nconst SkeletonInput: React.FC<SkeletonInputProps> = ({\n    size = 'default',\n    block = false,\n    active = true,\n    className,\n    width,\n    height,\n    minWidth,\n}) => {\n    const ref = useRef<HTMLSpanElement>(null);\n    useAdoptedStyleSheet(ref, SKELETON_CSS, 'malachite-skeleton');\n    return (\n        <span\n            ref={ref}\n            className={className}\n            data-malachite-skeleton-active={active ? '' : undefined}\n            aria-busy=\"true\"\n            aria-hidden=\"true\"\n            style={{\n                ...BASE_STYLE,\n                width: block ? '100%' : (width ?? 160),\n                height: height ?? INPUT_HEIGHT[size],\n                minWidth,\n                borderRadius: 6,\n            }}\n        />\n    );\n};\n\nconst SkeletonAvatar: React.FC<SkeletonAvatarProps> = ({\n    size = 'default',\n    shape = 'circle',\n    active = true,\n    className,\n}) => {\n    const ref = useRef<HTMLSpanElement>(null);\n    useAdoptedStyleSheet(ref, SKELETON_CSS, 'malachite-skeleton');\n    const px = typeof size === 'number' ? size : AVATAR_SIZE[size];\n    return (\n        <span\n            ref={ref}\n            className={className}\n            data-malachite-skeleton-active={active ? '' : undefined}\n            aria-busy=\"true\"\n            aria-hidden=\"true\"\n            style={{\n                ...BASE_STYLE,\n                width: px,\n                height: px,\n                borderRadius: shape === 'circle' ? 9999 : 6,\n            }}\n        />\n    );\n};\n\nconst Skeleton = {\n    Button: SkeletonButton,\n    Input: SkeletonInput,\n    Avatar: SkeletonAvatar,\n};\n\nexport default Skeleton;\n"],"names":["BUTTON_HEIGHT","BUTTON_WIDTH","INPUT_HEIGHT","AVATAR_SIZE","KEYFRAME_NAME","SKELETON_BASE","SKELETON_SHIMMER","SKELETON_GRADIENT","ACTIVE_ATTR","SKELETON_CSS","getRadius","shape","BASE_STYLE","SkeletonButton","size","block","active","className","width","height","minWidth","ref","useRef","useAdoptedStyleSheet","jsx","SkeletonInput","SkeletonAvatar","px","Skeleton"],"mappings":";;;AAiCA,MAAMA,IAA8C,EAAE,OAAO,IAAI,SAAS,IAAI,OAAO,GAAA,GAC/EC,IAA6C,EAAE,OAAO,IAAI,SAAS,IAAI,OAAO,IAAA,GAC9EC,IAA6C,EAAE,OAAO,IAAI,SAAS,IAAI,OAAO,GAAA,GAC9EC,IAA4C,EAAE,OAAO,IAAI,SAAS,IAAI,OAAO,GAAA,GAE7EC,IAAgB,8BAChBC,IAAgB,4BAChBC,IAAmB,6BACnBC,IAAoB,0BAA0BF,CAAa,SAASC,CAAgB,SAASD,CAAa,SAC1GG,IAAc,kCAEdC,IAAe,cAAcL,CAAa;AAAA,GAC7CI,CAAW,yBAAyBD,CAAiB,4CAA4CH,CAAa;AAAA,6CACpEI,CAAW,oDAElDE,IAAY,CAACC,MAA0C;AACzD,UAAQA,GAAA;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB,GAEMC,IAAkC;AAAA,EACpC,SAAS;AAAA,EACT,eAAe;AAAA,EACf,iBAAiBP;AAAA,EACjB,YAAY;AAChB,GAEMQ,IAAgD,CAAC;AAAA,EACnD,MAAAC,IAAO;AAAA,EACP,OAAAH,IAAQ;AAAA,EACR,OAAAI,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AACJ,MAAM;AACF,QAAMC,IAAMC,EAAwB,IAAI;AACxC,SAAAC,EAAqBF,GAAKZ,GAAc,oBAAoB,GAExD,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAH;AAAA,MACA,WAAAJ;AAAA,MACA,kCAAgCD,IAAS,KAAK;AAAA,MAC9C,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,OAAO;AAAA,QACH,GAAGJ;AAAA,QACH,OAAOG,IAAQ,SAAUG,KAASjB,EAAaa,CAAI;AAAA,QACnD,QAAQK,KAAUnB,EAAcc,CAAI;AAAA,QACpC,UAAAM;AAAA,QACA,cAAcV,EAAUC,CAAK;AAAA,MAAA;AAAA,IACjC;AAAA,EAAA;AAGZ,GAEMc,IAA8C,CAAC;AAAA,EACjD,MAAAX,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,QAAAC,IAAS;AAAA,EACT,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AACJ,MAAM;AACF,QAAMC,IAAMC,EAAwB,IAAI;AACxC,SAAAC,EAAqBF,GAAKZ,GAAc,oBAAoB,GAExD,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAH;AAAA,MACA,WAAAJ;AAAA,MACA,kCAAgCD,IAAS,KAAK;AAAA,MAC9C,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,OAAO;AAAA,QACH,GAAGJ;AAAA,QACH,OAAOG,IAAQ,SAAUG,KAAS;AAAA,QAClC,QAAQC,KAAUjB,EAAaY,CAAI;AAAA,QACnC,UAAAM;AAAA,QACA,cAAc;AAAA,MAAA;AAAA,IAClB;AAAA,EAAA;AAGZ,GAEMM,IAAgD,CAAC;AAAA,EACnD,MAAAZ,IAAO;AAAA,EACP,OAAAH,IAAQ;AAAA,EACR,QAAAK,IAAS;AAAA,EACT,WAAAC;AACJ,MAAM;AACF,QAAMI,IAAMC,EAAwB,IAAI;AACxC,EAAAC,EAAqBF,GAAKZ,GAAc,oBAAoB;AAC5D,QAAMkB,IAAK,OAAOb,KAAS,WAAWA,IAAOX,EAAYW,CAAI;AAC7D,SACI,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAH;AAAA,MACA,WAAAJ;AAAA,MACA,kCAAgCD,IAAS,KAAK;AAAA,MAC9C,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,OAAO;AAAA,QACH,GAAGJ;AAAA,QACH,OAAOe;AAAA,QACP,QAAQA;AAAA,QACR,cAAchB,MAAU,WAAW,OAAO;AAAA,MAAA;AAAA,IAC9C;AAAA,EAAA;AAGZ,GAEMiB,IAAW;AAAA,EACb,QAAQf;AAAA,EACR,OAAOY;AAAA,EACP,QAAQC;AACZ;"}

package/dist/components/Typography/Text.js

@@ -1,6 +1,6 @@
-import { jsx as p } from "react/jsx-runtime";
-import { getFontWeight as y, getFontFamily as c, getFontSize as d, getTextColor as g } from "./textStyles.js";
-const u = ({
+import { jsx as y } from "react/jsx-runtime";
+import { getFontWeight as c, getFontFamily as d, getFontSize as g, getTextColor as x } from "./textStyles.js";
+const S = ({
   underline: e = !1,
   children: i,
   color: l = "primary",
@@ -9,23 +9,24 @@ const u = ({
   fontWeight: r = "normal",
   tooltip: a,
   textAlign: o,
-  className: s = "",
-  style: m = {}
+  as: s = "span",
+  className: m = "",
+  style: f = {}
 }) => {
-  const f = {
-    color: g(l),
-    fontSize: d(n),
+  const p = {
+    color: x(l),
+    fontSize: g(n),
     // Left unset when not asked for, so Text keeps inheriting whatever the surrounding context…
-    fontFamily: t ? c(t) : void 0,
-    fontWeight: y(r),
+    fontFamily: t ? d(t) : void 0,
+    fontWeight: c(r),
     textAlign: o,
     textDecoration: e ? "underline" : "none",
     display: o ? "block" : void 0,
-    ...m
+    ...f
   };
-  return /* @__PURE__ */ p("span", { className: s, style: f, title: a, children: i });
+  return /* @__PURE__ */ y(s, { className: m, style: p, title: a, children: i });
 };
 export {
-  u as default
+  S as default
 };
 //# sourceMappingURL=Text.js.map

package/dist/components/Typography/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../../../src/components/Typography/Text.tsx"],"sourcesContent":["import React from 'react';\nimport type { FontFamily, FontSize, FontWeight, TextColor } from './textStyles';\nimport { getFontFamily, getFontSize, getFontWeight, getTextColor } from './textStyles';\n\n// Types only: a value re-export would put the non-component exports back in this file.\nexport type { FontSize, FontFamily, FontWeight, TextColor } from './textStyles';\n\nexport interface TextProps {\n    color?: TextColor;\n    size?: FontSize;\n    /**\n     * Typeface. Defaults to `sans` (Inter), the library's body face. `heading` is Stack Sans\n     * Text and `body` is Geist — both are loaded on mount and declared in the theme.\n     */\n    font?: FontFamily;\n    underline?: boolean;\n    fontWeight?: FontWeight;\n    children: React.ReactNode;\n    tooltip?: string;\n    textAlign?: 'left' | 'center' | 'right' | 'justify';\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst Text: React.FC<TextProps> = ({\n    underline = false,\n    children,\n    color = 'primary',\n    size = 'small',\n    font,\n    fontWeight = 'normal',\n    tooltip,\n    textAlign,\n    className = '',\n    style = {},\n}) => {\n    const textStyles: React.CSSProperties = {\n        color: getTextColor(color),\n        fontSize: getFontSize(size),\n        // Left unset when not asked for, so Text keeps inheriting whatever the surrounding context…\n        fontFamily: font ? getFontFamily(font) : undefined,\n        fontWeight: getFontWeight(fontWeight),\n        textAlign,\n        textDecoration: underline ? 'underline' : 'none',\n        display: textAlign ? 'block' : undefined,\n        ...style,\n    };\n\n    return (\n        <span className={className} style={textStyles} title={tooltip}>\n            {children}\n        </span>\n    );\n};\n\nexport default Text;\n"],"names":["Text","underline","children","color","size","font","fontWeight","tooltip","textAlign","className","style","textStyles","getTextColor","getFontSize","getFontFamily","getFontWeight"],"mappings":";;AAwBA,MAAMA,IAA4B,CAAC;AAAA,EAC/B,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ,CAAA;AACZ,MAAM;AACF,QAAMC,IAAkC;AAAA,IACpC,OAAOC,EAAaT,CAAK;AAAA,IACzB,UAAUU,EAAYT,CAAI;AAAA;AAAA,IAE1B,YAAYC,IAAOS,EAAcT,CAAI,IAAI;AAAA,IACzC,YAAYU,EAAcT,CAAU;AAAA,IACpC,WAAAE;AAAA,IACA,gBAAgBP,IAAY,cAAc;AAAA,IAC1C,SAASO,IAAY,UAAU;AAAA,IAC/B,GAAGE;AAAA,EAAA;AAGP,2BACK,QAAA,EAAK,WAAAD,GAAsB,OAAOE,GAAY,OAAOJ,GACjD,UAAAL,GACL;AAER;"}
+{"version":3,"file":"Text.js","sources":["../../../src/components/Typography/Text.tsx"],"sourcesContent":["import React from 'react';\nimport type { FontFamily, FontSize, FontWeight, TextColor, TextElement } from './textStyles';\nimport { getFontFamily, getFontSize, getFontWeight, getTextColor } from './textStyles';\n\n// Types only: a value re-export would put the non-component exports back in this file.\nexport type { FontSize, FontFamily, FontWeight, TextColor, TextElement } from './textStyles';\n\nexport interface TextProps {\n    color?: TextColor;\n    size?: FontSize;\n    /**\n     * Typeface. Defaults to `sans` (Inter), the library's body face. `heading` is Stack Sans\n     * Text and `body` is Geist — both are loaded on mount and declared in the theme.\n     */\n    font?: FontFamily;\n    underline?: boolean;\n    fontWeight?: FontWeight;\n    children: React.ReactNode;\n    tooltip?: string;\n    textAlign?: 'left' | 'center' | 'right' | 'justify';\n    /** The element it renders, for a heading or paragraph that keeps Text's look. */\n    as?: TextElement;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst Text: React.FC<TextProps> = ({\n    underline = false,\n    children,\n    color = 'primary',\n    size = 'small',\n    font,\n    fontWeight = 'normal',\n    tooltip,\n    textAlign,\n    as: Element = 'span',\n    className = '',\n    style = {},\n}) => {\n    const textStyles: React.CSSProperties = {\n        color: getTextColor(color),\n        fontSize: getFontSize(size),\n        // Left unset when not asked for, so Text keeps inheriting whatever the surrounding context…\n        fontFamily: font ? getFontFamily(font) : undefined,\n        fontWeight: getFontWeight(fontWeight),\n        textAlign,\n        textDecoration: underline ? 'underline' : 'none',\n        display: textAlign ? 'block' : undefined,\n        ...style,\n    };\n\n    return (\n        <Element className={className} style={textStyles} title={tooltip}>\n            {children}\n        </Element>\n    );\n};\n\nexport default Text;\n"],"names":["Text","underline","children","color","size","font","fontWeight","tooltip","textAlign","Element","className","style","textStyles","getTextColor","getFontSize","getFontFamily","getFontWeight"],"mappings":";;AA0BA,MAAMA,IAA4B,CAAC;AAAA,EAC/B,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAIC,IAAU;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ,CAAA;AACZ,MAAM;AACF,QAAMC,IAAkC;AAAA,IACpC,OAAOC,EAAaV,CAAK;AAAA,IACzB,UAAUW,EAAYV,CAAI;AAAA;AAAA,IAE1B,YAAYC,IAAOU,EAAcV,CAAI,IAAI;AAAA,IACzC,YAAYW,EAAcV,CAAU;AAAA,IACpC,WAAAE;AAAA,IACA,gBAAgBP,IAAY,cAAc;AAAA,IAC1C,SAASO,IAAY,UAAU;AAAA,IAC/B,GAAGG;AAAA,EAAA;AAGP,2BACKF,GAAA,EAAQ,WAAAC,GAAsB,OAAOE,GAAY,OAAOL,GACpD,UAAAL,GACL;AAER;"}

package/dist/components/Typography/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Typography/index.tsx"],"sourcesContent":["import { default as CodeText } from './CodeText';\nimport { default as EllipsisText } from './EllipsisText';\nimport { default as FormSectionTitle } from './FormSectionTitle';\nimport { default as LinkText } from './LinkText';\nimport { default as MarkdownBlock } from './MarkdownBlock';\nimport { default as PageTitle } from './PageTitle';\nimport { default as SecondaryText } from './SecondaryText';\nimport { default as SectionTitle } from './SectionTitle';\nimport { default as StatisticLabel } from './StatisticLabel';\nimport { default as StatisticValue } from './StatisticValue';\nimport { default as TerminalText } from './TerminalText';\nimport { default as Text } from './Text';\n\nexport type { CodeTextProps, CodeTextVariant } from './CodeText';\nexport type { MarkdownLinks, MarkdownProps, MarkdownVariant } from './MarkdownBlock';\nexport type { FontSize, FontWeight, TextColor, TextProps } from './Text';\n\nexport const Typography = {\n    CodeText,\n    EllipsisText,\n    FormSectionTitle,\n    LinkText,\n    MarkdownBlock,\n    PageTitle,\n    SecondaryText,\n    SectionTitle,\n    StatisticLabel,\n    StatisticValue,\n    TerminalText,\n    Text,\n};\n\nexport default Typography;\n"],"names":["Typography","CodeText","EllipsisText","FormSectionTitle","LinkText","MarkdownBlock","PageTitle","SecondaryText","SectionTitle","StatisticLabel","StatisticValue","TerminalText","Text"],"mappings":";;;;;;;;;;;;AAiBO,MAAMA,IAAa;AAAA,EACtB,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AACJ;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Typography/index.tsx"],"sourcesContent":["import { default as CodeText } from './CodeText';\nimport { default as EllipsisText } from './EllipsisText';\nimport { default as FormSectionTitle } from './FormSectionTitle';\nimport { default as LinkText } from './LinkText';\nimport { default as MarkdownBlock } from './MarkdownBlock';\nimport { default as PageTitle } from './PageTitle';\nimport { default as SecondaryText } from './SecondaryText';\nimport { default as SectionTitle } from './SectionTitle';\nimport { default as StatisticLabel } from './StatisticLabel';\nimport { default as StatisticValue } from './StatisticValue';\nimport { default as TerminalText } from './TerminalText';\nimport { default as Text } from './Text';\n\nexport type { CodeTextProps, CodeTextVariant } from './CodeText';\nexport type { MarkdownLinks, MarkdownProps, MarkdownVariant } from './MarkdownBlock';\nexport type { FontSize, FontWeight, TextColor, TextElement, TextProps } from './Text';\n\nexport const Typography = {\n    CodeText,\n    EllipsisText,\n    FormSectionTitle,\n    LinkText,\n    MarkdownBlock,\n    PageTitle,\n    SecondaryText,\n    SectionTitle,\n    StatisticLabel,\n    StatisticValue,\n    TerminalText,\n    Text,\n};\n\nexport default Typography;\n"],"names":["Typography","CodeText","EllipsisText","FormSectionTitle","LinkText","MarkdownBlock","PageTitle","SecondaryText","SectionTitle","StatisticLabel","StatisticValue","TerminalText","Text"],"mappings":";;;;;;;;;;;;AAiBO,MAAMA,IAAa;AAAA,EACtB,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAAC;AACJ;"}

package/dist/components/Typography/textStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"textStyles.js","sources":["../../../src/components/Typography/textStyles.ts"],"sourcesContent":["export type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';\n/** Which theme typeface to render in. Defaults to the sans body face. */\nexport type FontFamily = 'sans' | 'heading' | 'body' | 'mono';\nexport type FontWeight = 'normal' | 'semi-bold' | 'bold';\nexport type TextColor =\n    | 'primary'\n    | 'secondary'\n    | 'dimmed'\n    | 'placeholder'\n    | 'emphasis'\n    | 'muted'\n    | 'destructive'\n    | 'success'\n    | 'highlight'\n    | 'warning'\n    | 'error'\n    | 'info'\n    | 'link'\n    /** Machine-authored text — what an assistant wrote, or what it is proposing. */\n    | 'assistant'\n    // Takes the surrounding colour instead of pinning a token.\n    | 'inherit';\n\nexport const getTextColor = (color: TextColor): string => {\n    switch (color) {\n        case 'inherit':\n            return 'inherit';\n        case 'primary':\n            // Chained so an ancestor (a selected Table row) can recolour text without setting…\n            return 'var(--malachite-ctx-text-primary, var(--malachite-text-primary))';\n        case 'assistant':\n            return 'var(--malachite-assistant-foreground)';\n        case 'secondary':\n            return 'var(--malachite-text-secondary)';\n        case 'dimmed':\n            return 'var(--malachite-text-dimmed)';\n        case 'placeholder':\n            return 'var(--malachite-text-placeholder)';\n        case 'emphasis':\n            return 'var(--malachite-text-emphasis)';\n        case 'muted':\n            return 'var(--malachite-text-muted)';\n        case 'destructive':\n            return 'var(--malachite-text-destructive)';\n        case 'success':\n            return 'var(--malachite-text-success)';\n        case 'highlight':\n            return 'var(--malachite-text-highlight)';\n        case 'warning':\n            return 'var(--malachite-text-warning)';\n        case 'error':\n            return 'var(--malachite-text-error)';\n        case 'info':\n            return 'var(--malachite-text-info)';\n        case 'link':\n            return 'var(--malachite-text-link-foreground)';\n        default:\n            // Reachable from a non-TextColor argument (Alert passes an AlertType); keep it on the same…\n            return 'var(--malachite-ctx-text-primary, var(--malachite-text-primary))';\n    }\n};\n\n// Fallbacks only — the theme var wins, so overriding `fontSizes` moves Text with it. Text's\n// OWN scale: SecondaryText, CodeText and TerminalText each keep a different local getFontSize.\nconst FONT_SIZE_FALLBACKS: Record<FontSize, string> = {\n    xsmall: '11px',\n    small: '13px',\n    medium: '14px',\n    large: '16px',\n    xlarge: '18px',\n    xxlarge: '22px',\n};\n\nexport const getFontSize = (size: FontSize): string =>\n    `var(--malachite-font-size-${size}, ${FONT_SIZE_FALLBACKS[size] ?? FONT_SIZE_FALLBACKS.small})`;\n\nconst FONT_FAMILY_VARS: Record<FontFamily, string> = {\n    sans: 'var(--font-sans)',\n    heading: 'var(--font-heading)',\n    body: 'var(--font-body)',\n    mono: 'var(--font-mono)',\n};\n\nexport const getFontFamily = (font: FontFamily): string => FONT_FAMILY_VARS[font];\n\nexport const getFontWeight = (weight: FontWeight): number => {\n    switch (weight) {\n        case 'normal':\n            return 400;\n        case 'semi-bold':\n            return 500;\n        case 'bold':\n            return 600;\n        default:\n            return 400;\n    }\n};\n\n"],"names":["getTextColor","color","FONT_SIZE_FALLBACKS","getFontSize","size","FONT_FAMILY_VARS","getFontFamily","font","getFontWeight","weight"],"mappings":"AAuBO,MAAMA,IAAe,CAACC,MAA6B;AACtD,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AAED,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX;AAEI,aAAO;AAAA,EAAA;AAEnB,GAIMC,IAAgD;AAAA,EAClD,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AACb,GAEaC,IAAc,CAACC,MACxB,6BAA6BA,CAAI,KAAKF,EAAoBE,CAAI,KAAKF,EAAoB,KAAK,KAE1FG,IAA+C;AAAA,EACjD,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AACV,GAEaC,IAAgB,CAACC,MAA6BF,EAAiBE,CAAI,GAEnEC,IAAgB,CAACC,MAA+B;AACzD,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB;"}
+{"version":3,"file":"textStyles.js","sources":["../../../src/components/Typography/textStyles.ts"],"sourcesContent":["export type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';\n/** Which theme typeface to render in. Defaults to the sans body face. */\nexport type FontFamily = 'sans' | 'heading' | 'body' | 'mono';\nexport type FontWeight = 'normal' | 'semi-bold' | 'bold';\nexport type TextColor =\n    | 'primary'\n    | 'secondary'\n    | 'dimmed'\n    | 'placeholder'\n    | 'emphasis'\n    | 'muted'\n    | 'destructive'\n    | 'success'\n    | 'highlight'\n    | 'warning'\n    | 'error'\n    | 'info'\n    | 'link'\n    /** Machine-authored text — what an assistant wrote, or what it is proposing. */\n    | 'assistant'\n    // Takes the surrounding colour instead of pinning a token.\n    | 'inherit';\n\nexport const getTextColor = (color: TextColor): string => {\n    switch (color) {\n        case 'inherit':\n            return 'inherit';\n        case 'primary':\n            // Chained so an ancestor (a selected Table row) can recolour text without setting…\n            return 'var(--malachite-ctx-text-primary, var(--malachite-text-primary))';\n        case 'assistant':\n            return 'var(--malachite-assistant-foreground)';\n        case 'secondary':\n            return 'var(--malachite-text-secondary)';\n        case 'dimmed':\n            return 'var(--malachite-text-dimmed)';\n        case 'placeholder':\n            return 'var(--malachite-text-placeholder)';\n        case 'emphasis':\n            return 'var(--malachite-text-emphasis)';\n        case 'muted':\n            return 'var(--malachite-text-muted)';\n        case 'destructive':\n            return 'var(--malachite-text-destructive)';\n        case 'success':\n            return 'var(--malachite-text-success)';\n        case 'highlight':\n            return 'var(--malachite-text-highlight)';\n        case 'warning':\n            return 'var(--malachite-text-warning)';\n        case 'error':\n            return 'var(--malachite-text-error)';\n        case 'info':\n            return 'var(--malachite-text-info)';\n        case 'link':\n            return 'var(--malachite-text-link-foreground)';\n        default:\n            // Reachable from a non-TextColor argument (Alert passes an AlertType); keep it on the same…\n            return 'var(--malachite-ctx-text-primary, var(--malachite-text-primary))';\n    }\n};\n\n// Fallbacks only — the theme var wins, so overriding `fontSizes` moves Text with it. Text's\n// OWN scale: SecondaryText, CodeText and TerminalText each keep a different local getFontSize.\nconst FONT_SIZE_FALLBACKS: Record<FontSize, string> = {\n    xsmall: '11px',\n    small: '13px',\n    medium: '14px',\n    large: '16px',\n    xlarge: '18px',\n    xxlarge: '22px',\n};\n\nexport const getFontSize = (size: FontSize): string =>\n    `var(--malachite-font-size-${size}, ${FONT_SIZE_FALLBACKS[size] ?? FONT_SIZE_FALLBACKS.small})`;\n\nconst FONT_FAMILY_VARS: Record<FontFamily, string> = {\n    sans: 'var(--font-sans)',\n    heading: 'var(--font-heading)',\n    body: 'var(--font-body)',\n    mono: 'var(--font-mono)',\n};\n\nexport const getFontFamily = (font: FontFamily): string => FONT_FAMILY_VARS[font];\n\nexport const getFontWeight = (weight: FontWeight): number => {\n    switch (weight) {\n        case 'normal':\n            return 400;\n        case 'semi-bold':\n            return 500;\n        case 'bold':\n            return 600;\n        default:\n            return 400;\n    }\n};\n\nexport type TextElement = 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n"],"names":["getTextColor","color","FONT_SIZE_FALLBACKS","getFontSize","size","FONT_FAMILY_VARS","getFontFamily","font","getFontWeight","weight"],"mappings":"AAuBO,MAAMA,IAAe,CAACC,MAA6B;AACtD,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AAED,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX;AAEI,aAAO;AAAA,EAAA;AAEnB,GAIMC,IAAgD;AAAA,EAClD,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AACb,GAEaC,IAAc,CAACC,MACxB,6BAA6BA,CAAI,KAAKF,EAAoBE,CAAI,KAAKF,EAAoB,KAAK,KAE1FG,IAA+C;AAAA,EACjD,MAAM;AAAA,EACN,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AACV,GAEaC,IAAgB,CAACC,MAA6BF,EAAiBE,CAAI,GAEnEC,IAAgB,CAACC,MAA+B;AACzD,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB;"}

package/dist/index.d.ts

@@ -170,6 +170,10 @@ declare interface AlertProps {
     /** Replaces the type's status icon: an svg painting with `currentColor`, such as a CustomIcon,
      *  is drawn in the type's colour at the same size. */
     icon?: default_2.ReactNode;
+    /** Makes its message a live region: `role="alert"` for error and warning, `status` otherwise.
+     *  Screen readers reliably announce an `alert` as it mounts; a `status` is read when its
+     *  `message` changes, so keep a live info or success alert mounted. Off by default. */
+    live?: boolean;
 }
 
 export declare type AlertType = 'info' | 'success' | 'error' | 'warning' | 'assistant';
@@ -4954,6 +4958,8 @@ export declare type TextColor = 'primary' | 'secondary' | 'dimmed' | 'placeholde
 /** Machine-authored text — what an assistant wrote, or what it is proposing. */
 | 'assistant' | 'inherit';
 
+export declare type TextElement = 'span' | 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
 export declare interface TextProps {
     color?: TextColor;
     size?: FontSize;
@@ -4967,6 +4973,8 @@ export declare interface TextProps {
     children: default_2.ReactNode;
     tooltip?: string;
     textAlign?: 'left' | 'center' | 'right' | 'justify';
+    /** The element it renders, for a heading or paragraph that keeps Text's look. */
+    as?: TextElement;
     className?: string;
     style?: default_2.CSSProperties;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackone/malachite",
-  "version": "2.55.1",
+  "version": "2.56.0",
   "description": "StackOne's themeable React component library — Shadow DOM isolated, scoped Tailwind, theme-token driven.",
   "license": "MIT",
   "author": "StackOne",