@stackone/malachite 2.20.1 → 2.22.0

package/dist/components/PageLayout/regularLayout.js

@@ -0,0 +1,177 @@
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import u from "../ActionMenu.js";
+import { Alert as $ } from "../Alert.js";
+import { Breadcrumbs as D } from "../Breadcrumbs.js";
+import { hasBackButton as O } from "../breadcrumbsNav.js";
+import { Button as M } from "../Button.js";
+import P from "../OverflowRow.js";
+import m from "../Skeleton.js";
+import j from "../Typography/PageTitle.js";
+import v from "../Typography/Text.js";
+import { safeHref as x } from "../safeHref.js";
+import { CARD_MIN_HEIGHT as G, CARD_RADIUS as L, CARD_CLASSES as z, HEADER_HEIGHT as U, DIVIDER_CLASSES as N, CONTENT_MIN_HEIGHT as V, CONTENT_INSET_VAR as K } from "./constants.js";
+const q = {
+  small: 8,
+  medium: 16,
+  large: 24,
+  xlarge: 40
+}, F = (l) => l.variant === "destructive" || l.variant === "error", J = (l) => {
+  const e = x(l.href);
+  return e ? () => window.open(e, l.target ?? "_blank", "noopener,noreferrer") : l.onClick;
+}, Q = (l) => l.flatMap((e, r) => {
+  const i = {
+    key: `${r}-${e.label}`,
+    label: e.label,
+    onClick: J(e),
+    disabled: e.disabled,
+    icon: e.icon,
+    tooltip: e.tooltip,
+    danger: F(e)
+  };
+  return e.dividerBefore && r > 0 ? [{ type: "divider", key: `divider-${r}-${e.label}` }, i] : [i];
+}), W = ({ buttons: l }) => l.length === 0 ? null : /* @__PURE__ */ a("div", { className: "min-w-0", children: /* @__PURE__ */ a(
+  P,
+  {
+    gap: 8,
+    justify: "end",
+    renderOverflow: (e) => /* @__PURE__ */ a(
+      u,
+      {
+        items: Q(
+          l.slice(Math.max(0, l.length - e))
+        )
+      }
+    ),
+    children: l.map((e, r) => {
+      const i = x(e.href);
+      return /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+        e.dividerBefore && r > 0 ? /* @__PURE__ */ a(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "h-4 w-px bg-[var(--malachite-card-border)]"
+          }
+        ) : null,
+        /* @__PURE__ */ a(
+          M,
+          {
+            variant: e.variant ?? "filled",
+            size: "medium",
+            disabled: e.disabled,
+            icon: e.icon,
+            tooltip: e.tooltip,
+            tooltipPlacement: e.tooltipPlacement,
+            href: i,
+            target: i ? e.target ?? "_blank" : void 0,
+            onClick: i ? void 0 : e.onClick,
+            children: e.label
+          }
+        )
+      ] }, `${r}-${e.label}`);
+    })
+  }
+) }), X = [], Y = [], de = ({
+  breadcrumbLinks: l = X,
+  breadcrumbActions: e,
+  renderLink: r,
+  title: i,
+  titleSuffix: y,
+  subtitle: c,
+  description: o,
+  buttons: t = Y,
+  loading: n = !1,
+  children: w,
+  centered: f = !1,
+  noPadding: h = !1,
+  contentGap: I = "small",
+  alert: d,
+  role: _,
+  "aria-label": T,
+  "aria-labelledby": A,
+  className: E = "",
+  style: S
+}) => {
+  const k = O(l), C = h ? 0 : f ? "5vh 14vw" : "40px", H = h ? "0px" : f ? "14vw" : "40px", B = !!(n || i || c || o || t.length > 0), p = c ? n ? /* @__PURE__ */ a(m.Input, { width: 120, height: 24 }) : /* @__PURE__ */ a(v, { color: "secondary", size: "small", children: c }) : null, g = n ? /* @__PURE__ */ a(m.Input, { width: 200, height: 40 }) : i ? /* @__PURE__ */ s("div", { className: "flex items-center", style: { gap: 12 }, children: [
+    /* @__PURE__ */ a(j, { children: i }),
+    y
+  ] }) : null, R = o ? n ? /* @__PURE__ */ a(m.Input, { width: 120, height: 24 }) : /* @__PURE__ */ a(v, { color: "secondary", style: { lineHeight: 1.6 }, children: o }) : null;
+  return /* @__PURE__ */ s(
+    "main",
+    {
+      className: `${z} ${E}`,
+      style: { borderRadius: L, minHeight: G, ...S },
+      role: _,
+      "aria-label": T,
+      "aria-labelledby": A,
+      "aria-busy": n || void 0,
+      children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: `flex items-center ${N}`,
+            style: {
+              height: U,
+              paddingInlineStart: k ? 16 : 28,
+              paddingInlineEnd: 16
+            },
+            children: /* @__PURE__ */ a(
+              D,
+              {
+                links: l,
+                actions: e,
+                renderLink: r,
+                className: "flex-1 min-w-0"
+              }
+            )
+          }
+        ),
+        d ? /* @__PURE__ */ a("div", { className: N, style: { padding: "10px 16px" }, children: /* @__PURE__ */ a($, { message: d.message, type: d.type, hasMargin: !1 }) }) : null,
+        /* @__PURE__ */ s(
+          "div",
+          {
+            className: "flex flex-col",
+            style: {
+              padding: C,
+              minHeight: V,
+              gap: q[I],
+              [K]: H
+            },
+            children: [
+              B ? /* @__PURE__ */ s("div", { className: "flex flex-col", style: { gap: 12 }, children: [
+                g || p || t.length > 0 ? /* @__PURE__ */ s(
+                  "div",
+                  {
+                    className: "flex flex-wrap items-center justify-between",
+                    style: { gap: 12 },
+                    children: [
+                      /* @__PURE__ */ s(
+                        "div",
+                        {
+                          className: "flex flex-col flex-auto min-w-0 overflow-hidden",
+                          style: { gap: 4 },
+                          children: [
+                            p,
+                            g
+                          ]
+                        }
+                      ),
+                      n ? null : /* @__PURE__ */ a(W, { buttons: t })
+                    ]
+                  }
+                ) : null,
+                R
+              ] }) : null,
+              w
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  W as PageActions,
+  de as RegularLayout,
+  de as default
+};
+//# sourceMappingURL=regularLayout.js.map

package/dist/components/PageLayout/regularLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"regularLayout.js","sources":["../../../src/components/PageLayout/regularLayout.tsx"],"sourcesContent":["import React from 'react';\nimport ActionMenu, { type ActionMenuItem } from '../ActionMenu';\nimport Alert, { type AlertType } from '../Alert';\nimport Breadcrumbs from '../Breadcrumbs';\nimport { hasBackButton } from '../breadcrumbsNav';\nimport Button from '../Button';\nimport OverflowRow from '../OverflowRow';\nimport Skeleton from '../Skeleton';\nimport PageTitle from '../Typography/PageTitle';\nimport Text from '../Typography/Text';\nimport { safeHref } from '../safeHref';\nimport {\n    CARD_CLASSES,\n    CARD_MIN_HEIGHT,\n    CARD_RADIUS,\n    CONTENT_INSET_VAR,\n    CONTENT_MIN_HEIGHT,\n    DIVIDER_CLASSES,\n    HEADER_HEIGHT,\n} from './constants';\nimport type { BreadcrumbLink, PageAction, RenderBreadcrumbLink } from './types';\n\nexport type PageContentGap = 'small' | 'medium' | 'large' | 'xlarge';\n\nexport interface RegularLayoutProps {\n    breadcrumbLinks?: BreadcrumbLink[];\n    breadcrumbActions?: PageAction[];\n    renderLink?: RenderBreadcrumbLink;\n    title?: React.ReactNode;\n    titleSuffix?: React.ReactNode;\n    subtitle?: string;\n    description?: React.ReactNode;\n    buttons?: PageAction[];\n    /**\n     * Hides the buttons and skeletons the title. `subtitle` and `description` are only\n     * skeletoned when those props are also passed.\n     */\n    loading?: boolean;\n    children: React.ReactNode;\n    centered?: boolean;\n    noPadding?: boolean;\n    contentGap?: PageContentGap;\n    alert?: { message: string; type?: AlertType };\n    /** Demotes the default `main` landmark — pass e.g. `region` when the app owns its own. */\n    role?: React.AriaRole;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst CONTENT_GAPS: Record<PageContentGap, number> = {\n    small: 8,\n    medium: 16,\n    large: 24,\n    xlarge: 40,\n};\n\nconst isDanger = (button: PageAction): boolean =>\n    button.variant === 'destructive' || button.variant === 'error';\n\n// ActionMenuItem has no link form, so a collapsed link action opens the tab itself.\nconst menuAction = (button: PageAction): (() => void) | undefined => {\n    const href = safeHref(button.href);\n    if (!href) {\n        return button.onClick;\n    }\n    return () => window.open(href, button.target ?? '_blank', 'noopener,noreferrer');\n};\n\nconst toMenuItems = (buttons: PageAction[]): ActionMenuItem[] =>\n    buttons.flatMap((button, index) => {\n        const item: ActionMenuItem = {\n            key: `${index}-${button.label}`,\n            label: button.label,\n            onClick: menuAction(button),\n            disabled: button.disabled,\n            icon: button.icon,\n            tooltip: button.tooltip,\n            danger: isDanger(button),\n        };\n        return button.dividerBefore && index > 0\n            ? [{ type: 'divider' as const, key: `divider-${index}-${button.label}` }, item]\n            : [item];\n    });\n\n// Not `ActionBar`: it measures by walking ancestors for `clientWidth`, and this chrome\n// mounts on every page. OverflowRow batches its measurement instead.\n// A divider must live in the same OverflowRow child as its button — a standalone child\n// would survive its hidden button and break the child-index-to-button mapping.\n/**\n * The page's action buttons, collapsing into an overflow menu as the row narrows. Exported so\n * a page that renders its own header block — e.g. one that scrolls the title away — keeps the\n * same behaviour instead of hand-rolling `buttons.map(...)` and losing the collapse, the\n * dividers and the href handling.\n */\nexport const PageActions: React.FC<{ buttons: PageAction[] }> = ({ buttons }) => {\n    if (buttons.length === 0) {\n        return null;\n    }\n\n    // min-w-0 gives OverflowRow a shrinkable container to collapse against.\n    return (\n        <div className=\"min-w-0\">\n            <OverflowRow\n                gap={8}\n                justify=\"end\"\n                renderOverflow={(hiddenCount) => (\n                    <ActionMenu\n                        items={toMenuItems(\n                            buttons.slice(Math.max(0, buttons.length - hiddenCount)),\n                        )}\n                    />\n                )}\n            >\n                {buttons.map((button, index) => {\n                    const href = safeHref(button.href);\n                    return (\n                        <div key={`${index}-${button.label}`} className=\"flex items-center gap-2\">\n                            {button.dividerBefore && index > 0 ? (\n                                <span\n                                    aria-hidden=\"true\"\n                                    className=\"h-4 w-px bg-[var(--malachite-card-border)]\"\n                                />\n                            ) : null}\n                            <Button\n                                variant={button.variant ?? 'filled'}\n                                size=\"medium\"\n                                disabled={button.disabled}\n                                icon={button.icon}\n                                tooltip={button.tooltip}\n                                tooltipPlacement={button.tooltipPlacement}\n                                href={href}\n                                target={href ? (button.target ?? '_blank') : undefined}\n                                onClick={href ? undefined : button.onClick}\n                            >\n                                {button.label}\n                            </Button>\n                        </div>\n                    );\n                })}\n            </OverflowRow>\n        </div>\n    );\n};\n\nconst NO_LINKS: BreadcrumbLink[] = [];\nconst NO_BUTTONS: PageAction[] = [];\n\nconst RegularLayout: React.FC<RegularLayoutProps> = ({\n    breadcrumbLinks = NO_LINKS,\n    breadcrumbActions,\n    renderLink,\n    title,\n    titleSuffix,\n    subtitle,\n    description,\n    buttons = NO_BUTTONS,\n    loading = false,\n    children,\n    centered = false,\n    noPadding = false,\n    contentGap = 'small',\n    alert,\n    role,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n    style,\n}) => {\n    const hasBack = hasBackButton(breadcrumbLinks);\n    const contentPadding = noPadding ? 0 : centered ? '5vh 14vw' : '40px';\n    // Published so a full-bleed child (CardStrip's bottom rule) can cancel it and re-apply\n    // it as its own padding, instead of hardcoding the gutter at the call site.\n    const contentInset = noPadding ? '0px' : centered ? '14vw' : '40px';\n    const hasHeaderBlock = Boolean(\n        loading || title || subtitle || description || buttons.length > 0,\n    );\n\n    const subtitleNode = subtitle ? (\n        loading ? (\n            <Skeleton.Input width={120} height={24} />\n        ) : (\n            <Text color=\"secondary\" size=\"small\">\n                {subtitle}\n            </Text>\n        )\n    ) : null;\n\n    const titleNode = loading ? (\n        <Skeleton.Input width={200} height={40} />\n    ) : title ? (\n        <div className=\"flex items-center\" style={{ gap: 12 }}>\n            <PageTitle>{title}</PageTitle>\n            {titleSuffix}\n        </div>\n    ) : null;\n\n    const descriptionNode = description ? (\n        loading ? (\n            <Skeleton.Input width={120} height={24} />\n        ) : (\n            <Text color=\"secondary\" style={{ lineHeight: 1.6 }}>\n                {description}\n            </Text>\n        )\n    ) : null;\n\n    return (\n        <main\n            className={`${CARD_CLASSES} ${className}`}\n            style={{ borderRadius: CARD_RADIUS, minHeight: CARD_MIN_HEIGHT, ...style }}\n            role={role}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            aria-busy={loading || undefined}\n        >\n            <div\n                className={`flex items-center ${DIVIDER_CLASSES}`}\n                style={{\n                    height: HEADER_HEIGHT,\n                    paddingInlineStart: hasBack ? 16 : 28,\n                    paddingInlineEnd: 16,\n                }}\n            >\n                <Breadcrumbs\n                    links={breadcrumbLinks}\n                    actions={breadcrumbActions}\n                    renderLink={renderLink}\n                    className=\"flex-1 min-w-0\"\n                />\n            </div>\n\n            {alert ? (\n                <div className={DIVIDER_CLASSES} style={{ padding: '10px 16px' }}>\n                    <Alert message={alert.message} type={alert.type} hasMargin={false} />\n                </div>\n            ) : null}\n\n            <div\n                className=\"flex flex-col\"\n                style={\n                    {\n                        padding: contentPadding,\n                        minHeight: CONTENT_MIN_HEIGHT,\n                        gap: CONTENT_GAPS[contentGap],\n                        [CONTENT_INSET_VAR]: contentInset,\n                    } as React.CSSProperties\n                }\n            >\n                {hasHeaderBlock ? (\n                    <div className=\"flex flex-col\" style={{ gap: 12 }}>\n                        {titleNode || subtitleNode || buttons.length > 0 ? (\n                            <div\n                                className=\"flex flex-wrap items-center justify-between\"\n                                style={{ gap: 12 }}\n                            >\n                                <div\n                                    className=\"flex flex-col flex-auto min-w-0 overflow-hidden\"\n                                    style={{ gap: 4 }}\n                                >\n                                    {subtitleNode}\n                                    {titleNode}\n                                </div>\n                                {loading ? null : <PageActions buttons={buttons} />}\n                            </div>\n                        ) : null}\n                        {descriptionNode}\n                    </div>\n                ) : null}\n                {children}\n            </div>\n        </main>\n    );\n};\n\nexport default RegularLayout;\nexport { RegularLayout };\n"],"names":["CONTENT_GAPS","isDanger","button","menuAction","href","safeHref","toMenuItems","buttons","index","item","PageActions","jsx","OverflowRow","hiddenCount","ActionMenu","jsxs","Button","NO_LINKS","NO_BUTTONS","RegularLayout","breadcrumbLinks","breadcrumbActions","renderLink","title","titleSuffix","subtitle","description","loading","children","centered","noPadding","contentGap","alert","role","ariaLabel","ariaLabelledBy","className","style","hasBack","hasBackButton","contentPadding","contentInset","hasHeaderBlock","subtitleNode","Skeleton","Text","titleNode","PageTitle","descriptionNode","CARD_CLASSES","CARD_RADIUS","CARD_MIN_HEIGHT","DIVIDER_CLASSES","HEADER_HEIGHT","Breadcrumbs","Alert","CONTENT_MIN_HEIGHT","CONTENT_INSET_VAR"],"mappings":"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"}

package/dist/components/PillButton.js

@@ -0,0 +1,70 @@
+import { jsxs as b, jsx as g } from "react/jsx-runtime";
+import { FOCUS_RING as I } from "./focusRing.js";
+const E = "inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap shrink-0 transition-colors duration-150 ease-in-out", _ = {
+  pill: "rounded-[var(--malachite-radius-10,10px)]",
+  tab: "rounded-b-[var(--malachite-radius-10,10px)] rounded-t-none"
+}, O = {
+  default: "border-0",
+  assistant: "border border-solid border-[var(--malachite-tag-assistant-border)]"
+}, x = "bg-[var(--malachite-card-background)] text-[var(--malachite-assistant-foreground)]", N = {
+  // For a row that labels other content rather than being read on its own — a context
+  // strip above a chat, say. The only size that drops below the 13px the others share.
+  xsmall: {
+    text: "text-[length:var(--malachite-font-size-xsmall,11px)] h-[22px] leading-none",
+    padding: "px-2",
+    paddingWithIcon: "pl-1 pr-1.5"
+  },
+  small: {
+    text: "text-[length:var(--malachite-font-size-small,13px)] h-[var(--malachite-control-height-small,28px)] leading-none",
+    padding: "px-2.5",
+    paddingWithIcon: "pl-1.5 pr-2"
+  },
+  medium: {
+    text: "text-[length:var(--malachite-font-size-small,13px)] h-[var(--malachite-control-height-medium,32px)] leading-none",
+    padding: "px-2.5",
+    paddingWithIcon: "pl-1.5 pr-2"
+  }
+}, T = "bg-[var(--malachite-pillbutton-static-background)] text-[var(--malachite-pillbutton-static-foreground)]", R = "active:opacity-60 cursor-pointer", j = {
+  default: {
+    base: "bg-[var(--malachite-pillbutton-background)] text-[var(--malachite-pillbutton-foreground)]",
+    selected: "bg-[var(--malachite-pillbutton-hover-background)] text-[var(--malachite-pillbutton-hover-foreground)]",
+    hover: "hover:bg-[var(--malachite-pillbutton-hover-background)] hover:text-[var(--malachite-pillbutton-hover-foreground)] active:bg-[var(--malachite-pillbutton-pressed-background)] active:text-[var(--malachite-pillbutton-pressed-foreground)]"
+  },
+  inverted: {
+    base: "bg-[var(--malachite-pillbutton-inverted-background)] text-[var(--malachite-pillbutton-inverted-foreground)]",
+    selected: "bg-[var(--malachite-pillbutton-inverted-hover-background)] text-[var(--malachite-pillbutton-inverted-hover-foreground)]",
+    hover: "hover:bg-[var(--malachite-pillbutton-inverted-hover-background)] hover:text-[var(--malachite-pillbutton-inverted-hover-foreground)] active:bg-[var(--malachite-pillbutton-inverted-pressed-background)] active:text-[var(--malachite-pillbutton-inverted-pressed-foreground)]"
+  }
+}, w = ({
+  label: o = "Label",
+  icon: a,
+  className: f = "",
+  selected: S = !1,
+  disabled: s = !1,
+  interactive: c = !0,
+  size: $ = "small",
+  variant: k = "default",
+  shape: A = "pill",
+  tone: d = "default",
+  trailingIcon: u,
+  onClick: h
+}) => {
+  const l = N[$], C = a ? l.paddingWithIcon : l.padding, e = j[k], n = c && !s, r = n && !!h, i = r ? ` ${R}` : "";
+  let t;
+  d === "assistant" ? t = r ? `${x}${i}` : x : c ? S ? t = n ? `${e.selected}${i}` : e.selected : n ? t = `${e.base} ${e.hover}${i}` : t = e.base : t = T;
+  const L = s ? "opacity-50 cursor-not-allowed pointer-events-none" : "", p = `${E} ${_[A]} ${l.text} ${C} ${O[d]} ${t} ${L} ${f}`, v = a ? /* @__PURE__ */ g("span", { className: "inline-flex items-center justify-center w-4 h-4 shrink-0 [&>img]:max-w-full [&>img]:max-h-full [&>img]:object-contain", children: a }) : null, m = u ? /* @__PURE__ */ g("span", { className: "inline-flex shrink-0 items-center justify-center", children: u }) : null;
+  return r ? /* @__PURE__ */ b("button", { type: "button", className: `${I} ${p}`, onClick: h, children: [
+    v,
+    o,
+    m
+  ] }) : /* @__PURE__ */ b("div", { className: p, children: [
+    v,
+    o,
+    m
+  ] });
+};
+export {
+  w as PillButton,
+  w as default
+};
+//# sourceMappingURL=PillButton.js.map

package/dist/components/PillButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillButton.js","sources":["../../src/components/PillButton.tsx"],"sourcesContent":["import React from 'react';\nimport { FOCUS_RING } from './focusRing';\n\ntype PillButtonSize = 'xsmall' | 'small' | 'medium';\ntype PillButtonVariant = 'default' | 'inverted';\n/**\n * `tab` squares the top corners so the pill reads as attached to whatever sits above it —\n * a row of controls hanging under an input, rather than free-floating pills.\n */\ntype PillButtonShape = 'pill' | 'tab';\n/**\n * `assistant` is the chrome for AI-authored chips (e.g. `ChangeReview.Jump`): a fixed\n * violet-on-white look with its own border, independent of `variant`/`selected`.\n */\ntype PillButtonTone = 'default' | 'assistant';\n\ninterface PillButtonProps {\n    label: string;\n    icon?: React.ReactNode;\n    className?: string;\n    selected?: boolean;\n    disabled?: boolean;\n    interactive?: boolean;\n    size?: PillButtonSize;\n    variant?: PillButtonVariant;\n    shape?: PillButtonShape;\n    tone?: PillButtonTone;\n    /** Sits after the label — a caret on a pill that opens a menu. */\n    trailingIcon?: React.ReactNode;\n    onClick?: () => void;\n}\n\nconst BASE_CLASSES =\n    'inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap shrink-0 transition-colors duration-150 ease-in-out';\n\nconst SHAPE_CLASSES: Record<PillButtonShape, string> = {\n    pill: 'rounded-[var(--malachite-radius-10,10px)]',\n    tab: 'rounded-b-[var(--malachite-radius-10,10px)] rounded-t-none',\n};\n\n// Box-sizing is border-box, so trading `border-0` for a 1px border only eats into the padding\n// box — it never grows the element past the `h-[...]` each size already fixes. Only one of these\n// ever applies per render, so there's no `border-0`/`border` class collision to referee.\nconst TONE_BORDER_CLASSES: Record<PillButtonTone, string> = {\n    default: 'border-0',\n    assistant: 'border border-solid border-[var(--malachite-tag-assistant-border)]',\n};\n\nconst ASSISTANT_COLORS =\n    'bg-[var(--malachite-card-background)] text-[var(--malachite-assistant-foreground)]';\n\nconst SIZE_CLASSES: Record<\n    PillButtonSize,\n    { text: string; padding: string; paddingWithIcon: string }\n> = {\n    // For a row that labels other content rather than being read on its own — a context\n    // strip above a chat, say. The only size that drops below the 13px the others share.\n    xsmall: {\n        text: 'text-[length:var(--malachite-font-size-xsmall,11px)] h-[22px] leading-none',\n        padding: 'px-2',\n        paddingWithIcon: 'pl-1 pr-1.5',\n    },\n    small: {\n        text: 'text-[length:var(--malachite-font-size-small,13px)] h-[var(--malachite-control-height-small,28px)] leading-none',\n        padding: 'px-2.5',\n        paddingWithIcon: 'pl-1.5 pr-2',\n    },\n    medium: {\n        text: 'text-[length:var(--malachite-font-size-small,13px)] h-[var(--malachite-control-height-medium,32px)] leading-none',\n        padding: 'px-2.5',\n        paddingWithIcon: 'pl-1.5 pr-2',\n    },\n};\n\nconst STATIC_COLORS =\n    'bg-[var(--malachite-pillbutton-static-background)] text-[var(--malachite-pillbutton-static-foreground)]';\n\nconst CLICKABLE_TAIL = 'active:opacity-60 cursor-pointer';\n\nconst VARIANT_COLORS: Record<PillButtonVariant, { base: string; selected: string; hover: string }> =\n    {\n        default: {\n            base: 'bg-[var(--malachite-pillbutton-background)] text-[var(--malachite-pillbutton-foreground)]',\n            selected:\n                'bg-[var(--malachite-pillbutton-hover-background)] text-[var(--malachite-pillbutton-hover-foreground)]',\n            hover: 'hover:bg-[var(--malachite-pillbutton-hover-background)] hover:text-[var(--malachite-pillbutton-hover-foreground)] active:bg-[var(--malachite-pillbutton-pressed-background)] active:text-[var(--malachite-pillbutton-pressed-foreground)]',\n        },\n        inverted: {\n            base: 'bg-[var(--malachite-pillbutton-inverted-background)] text-[var(--malachite-pillbutton-inverted-foreground)]',\n            selected:\n                'bg-[var(--malachite-pillbutton-inverted-hover-background)] text-[var(--malachite-pillbutton-inverted-hover-foreground)]',\n            hover: 'hover:bg-[var(--malachite-pillbutton-inverted-hover-background)] hover:text-[var(--malachite-pillbutton-inverted-hover-foreground)] active:bg-[var(--malachite-pillbutton-inverted-pressed-background)] active:text-[var(--malachite-pillbutton-inverted-pressed-foreground)]',\n        },\n    };\n\nexport const PillButton: React.FC<PillButtonProps> = ({\n    label = 'Label',\n    icon,\n    className = '',\n    selected = false,\n    disabled = false,\n    interactive = true,\n    size = 'small',\n    variant = 'default',\n    shape = 'pill',\n    tone = 'default',\n    trailingIcon,\n    onClick,\n}) => {\n    const sizeBlock = SIZE_CLASSES[size];\n    const padding = icon ? sizeBlock.paddingWithIcon : sizeBlock.padding;\n    const variantBlock = VARIANT_COLORS[variant];\n    const isInteractiveLook = interactive && !disabled;\n    const isClickable = isInteractiveLook && !!onClick;\n    const clickableTail = isClickable ? ` ${CLICKABLE_TAIL}` : '';\n\n    let colorClasses: string;\n    if (tone === 'assistant') {\n        // Assistant chips read the same in every interaction state — the click affordance is\n        // the shared `active:opacity-60` from `clickableTail`, not a colour swap.\n        colorClasses = isClickable ? `${ASSISTANT_COLORS}${clickableTail}` : ASSISTANT_COLORS;\n    } else if (!interactive) {\n        colorClasses = STATIC_COLORS;\n    } else if (selected) {\n        colorClasses = isInteractiveLook\n            ? `${variantBlock.selected}${clickableTail}`\n            : variantBlock.selected;\n    } else if (isInteractiveLook) {\n        colorClasses = `${variantBlock.base} ${variantBlock.hover}${clickableTail}`;\n    } else {\n        colorClasses = variantBlock.base;\n    }\n\n    const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : '';\n\n    const merged = `${BASE_CLASSES} ${SHAPE_CLASSES[shape]} ${sizeBlock.text} ${padding} ${TONE_BORDER_CLASSES[tone]} ${colorClasses} ${disabledClasses} ${className}`;\n\n    const iconSlot = icon ? (\n        <span className=\"inline-flex items-center justify-center w-4 h-4 shrink-0 [&>img]:max-w-full [&>img]:max-h-full [&>img]:object-contain\">\n            {icon}\n        </span>\n    ) : null;\n\n    const trailingSlot = trailingIcon ? (\n        <span className=\"inline-flex shrink-0 items-center justify-center\">{trailingIcon}</span>\n    ) : null;\n\n    if (isClickable) {\n        return (\n            <button type=\"button\" className={`${FOCUS_RING} ${merged}`} onClick={onClick}>\n                {iconSlot}\n                {label}\n                {trailingSlot}\n            </button>\n        );\n    }\n\n    return (\n        <div className={merged}>\n            {iconSlot}\n            {label}\n            {trailingSlot}\n        </div>\n    );\n};\n\nexport default PillButton;\n"],"names":["BASE_CLASSES","SHAPE_CLASSES","TONE_BORDER_CLASSES","ASSISTANT_COLORS","SIZE_CLASSES","STATIC_COLORS","CLICKABLE_TAIL","VARIANT_COLORS","PillButton","label","icon","className","selected","disabled","interactive","size","variant","shape","tone","trailingIcon","onClick","sizeBlock","padding","variantBlock","isInteractiveLook","isClickable","clickableTail","colorClasses","disabledClasses","merged","iconSlot","jsx","trailingSlot","jsxs","FOCUS_RING"],"mappings":";;AAgCA,MAAMA,IACF,qIAEEC,IAAiD;AAAA,EACnD,MAAM;AAAA,EACN,KAAK;AACT,GAKMC,IAAsD;AAAA,EACxD,SAAS;AAAA,EACT,WAAW;AACf,GAEMC,IACF,sFAEEC,IAGF;AAAA;AAAA;AAAA,EAGA,QAAQ;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,IACT,iBAAiB;AAAA,EAAA;AAAA,EAErB,OAAO;AAAA,IACH,MAAM;AAAA,IACN,SAAS;AAAA,IACT,iBAAiB;AAAA,EAAA;AAAA,EAErB,QAAQ;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,IACT,iBAAiB;AAAA,EAAA;AAEzB,GAEMC,IACF,2GAEEC,IAAiB,oCAEjBC,IACF;AAAA,EACI,SAAS;AAAA,IACL,MAAM;AAAA,IACN,UACI;AAAA,IACJ,OAAO;AAAA,EAAA;AAAA,EAEX,UAAU;AAAA,IACN,MAAM;AAAA,IACN,UACI;AAAA,IACJ,OAAO;AAAA,EAAA;AAEf,GAESC,IAAwC,CAAC;AAAA,EAClD,OAAAC,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC,IAAW;AAAA,EACX,UAAAC,IAAW;AAAA,EACX,aAAAC,IAAc;AAAA,EACd,MAAAC,IAAO;AAAA,EACP,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,cAAAC;AAAA,EACA,SAAAC;AACJ,MAAM;AACF,QAAMC,IAAYjB,EAAaW,CAAI,GAC7BO,IAAUZ,IAAOW,EAAU,kBAAkBA,EAAU,SACvDE,IAAehB,EAAeS,CAAO,GACrCQ,IAAoBV,KAAe,CAACD,GACpCY,IAAcD,KAAqB,CAAC,CAACJ,GACrCM,IAAgBD,IAAc,IAAInB,CAAc,KAAK;AAE3D,MAAIqB;AACJ,EAAIT,MAAS,cAGTS,IAAeF,IAAc,GAAGtB,CAAgB,GAAGuB,CAAa,KAAKvB,IAC7DW,IAEDF,IACPe,IAAeH,IACT,GAAGD,EAAa,QAAQ,GAAGG,CAAa,KACxCH,EAAa,WACZC,IACPG,IAAe,GAAGJ,EAAa,IAAI,IAAIA,EAAa,KAAK,GAAGG,CAAa,KAEzEC,IAAeJ,EAAa,OAR5BI,IAAetB;AAWnB,QAAMuB,IAAkBf,IAAW,sDAAsD,IAEnFgB,IAAS,GAAG7B,CAAY,IAAIC,EAAcgB,CAAK,CAAC,IAAII,EAAU,IAAI,IAAIC,CAAO,IAAIpB,EAAoBgB,CAAI,CAAC,IAAIS,CAAY,IAAIC,CAAe,IAAIjB,CAAS,IAE1JmB,IAAWpB,IACb,gBAAAqB,EAAC,UAAK,WAAU,yHACX,aACL,IACA,MAEEC,IAAeb,IACjB,gBAAAY,EAAC,UAAK,WAAU,oDAAoD,aAAa,IACjF;AAEJ,SAAIN,IAEI,gBAAAQ,EAAC,UAAA,EAAO,MAAK,UAAS,WAAW,GAAGC,CAAU,IAAIL,CAAM,IAAI,SAAAT,GACvD,UAAA;AAAA,IAAAU;AAAA,IACArB;AAAA,IACAuB;AAAA,EAAA,GACL,IAKJ,gBAAAC,EAAC,OAAA,EAAI,WAAWJ,GACX,UAAA;AAAA,IAAAC;AAAA,IACArB;AAAA,IACAuB;AAAA,EAAA,GACL;AAER;"}

package/dist/components/PreviewTree.js

@@ -0,0 +1,49 @@
+import { jsx as t, jsxs as m, Fragment as p } from "react/jsx-runtime";
+const f = ({
+  icon: e,
+  label: l,
+  tag: o,
+  highlighted: a = !1,
+  indented: x = !1,
+  onToggle: i,
+  expanded: n = !0
+}) => {
+  const r = typeof i == "function", s = `flex w-full items-center gap-2 ${x ? "pl-5" : ""}`, c = /* @__PURE__ */ m(p, { children: [
+    /* @__PURE__ */ t(
+      "span",
+      {
+        className: `flex size-[13px] shrink-0 items-center justify-center ${r ? "transition-transform duration-150" : ""} ${r && !n ? "-rotate-90" : ""} ${a ? "text-[var(--malachite-text-highlight)]" : "text-[var(--malachite-text-primary)]"}`,
+        children: e
+      }
+    ),
+    /* @__PURE__ */ t(
+      "span",
+      {
+        className: `block min-w-0 flex-1 truncate text-left font-medium text-sm tracking-[0.14px] ${a ? "text-[var(--malachite-text-highlight)]" : "text-[var(--malachite-text-primary)]"}`,
+        children: l
+      }
+    ),
+    /* @__PURE__ */ t(
+      "span",
+      {
+        className: `whitespace-nowrap text-right font-medium text-xs tracking-[0.12px] ${a ? "text-[var(--malachite-text-highlight)] opacity-85" : "text-[var(--malachite-text-muted)]"}`,
+        children: o
+      }
+    )
+  ] });
+  return r ? /* @__PURE__ */ t(
+    "button",
+    {
+      type: "button",
+      onClick: i,
+      "aria-expanded": n,
+      className: `${s} cursor-pointer border-0 bg-transparent p-0 transition-opacity hover:opacity-80`,
+      children: c
+    }
+  ) : /* @__PURE__ */ t("div", { className: s, children: c });
+}, u = ({ children: e }) => /* @__PURE__ */ t("div", { className: "flex w-full flex-col gap-4 rounded-2xl bg-white/10 p-5", children: e });
+export {
+  f as PreviewTreeRow,
+  u as default
+};
+//# sourceMappingURL=PreviewTree.js.map

package/dist/components/PreviewTree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewTree.js","sources":["../../src/components/PreviewTree.tsx"],"sourcesContent":["import React from 'react';\n\ninterface PreviewTreeRowProps {\n    icon: React.ReactNode;\n    label: string;\n    tag: string;\n    highlighted?: boolean;\n    indented?: boolean;\n    onToggle?: () => void;\n    expanded?: boolean;\n}\n\nexport const PreviewTreeRow: React.FC<PreviewTreeRowProps> = ({\n    icon,\n    label,\n    tag,\n    highlighted = false,\n    indented = false,\n    onToggle,\n    expanded = true,\n}) => {\n    const collapsible = typeof onToggle === 'function';\n    const rowClass = `flex w-full items-center gap-2 ${indented ? 'pl-5' : ''}`;\n    const content = (\n        <>\n            <span\n                className={`flex size-[13px] shrink-0 items-center justify-center ${\n                    collapsible ? 'transition-transform duration-150' : ''\n                } ${collapsible && !expanded ? '-rotate-90' : ''} ${\n                    highlighted\n                        ? 'text-[var(--malachite-text-highlight)]'\n                        : 'text-[var(--malachite-text-primary)]'\n                }`}\n            >\n                {icon}\n            </span>\n            <span\n                className={`block min-w-0 flex-1 truncate text-left font-medium text-sm tracking-[0.14px] ${\n                    highlighted\n                        ? 'text-[var(--malachite-text-highlight)]'\n                        : 'text-[var(--malachite-text-primary)]'\n                }`}\n            >\n                {label}\n            </span>\n            <span\n                className={`whitespace-nowrap text-right font-medium text-xs tracking-[0.12px] ${\n                    highlighted\n                        ? 'text-[var(--malachite-text-highlight)] opacity-85'\n                        : 'text-[var(--malachite-text-muted)]'\n                }`}\n            >\n                {tag}\n            </span>\n        </>\n    );\n\n    if (collapsible) {\n        return (\n            <button\n                type=\"button\"\n                onClick={onToggle}\n                aria-expanded={expanded}\n                className={`${rowClass} cursor-pointer border-0 bg-transparent p-0 transition-opacity hover:opacity-80`}\n            >\n                {content}\n            </button>\n        );\n    }\n\n    return <div className={rowClass}>{content}</div>;\n};\n\ninterface PreviewTreeProps {\n    children: React.ReactNode;\n}\n\n/** A translucent rounded card that groups {@link PreviewTreeRow}s into a tree preview. */\nconst PreviewTree: React.FC<PreviewTreeProps> = ({ children }) => (\n    <div className=\"flex w-full flex-col gap-4 rounded-2xl bg-white/10 p-5\">{children}</div>\n);\n\nexport default PreviewTree;\n"],"names":["PreviewTreeRow","icon","label","tag","highlighted","indented","onToggle","expanded","collapsible","rowClass","content","jsxs","Fragment","jsx","PreviewTree","children"],"mappings":";AAYO,MAAMA,IAAgD,CAAC;AAAA,EAC1D,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,UAAAC,IAAW;AACf,MAAM;AACF,QAAMC,IAAc,OAAOF,KAAa,YAClCG,IAAW,kCAAkCJ,IAAW,SAAS,EAAE,IACnEK,IACF,gBAAAC,EAAAC,GAAA,EACI,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,yDACPL,IAAc,sCAAsC,EACxD,IAAIA,KAAe,CAACD,IAAW,eAAe,EAAE,IAC5CH,IACM,2CACA,sCACV;AAAA,QAEC,UAAAH;AAAA,MAAA;AAAA,IAAA;AAAA,IAEL,gBAAAY;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,iFACPT,IACM,2CACA,sCACV;AAAA,QAEC,UAAAF;AAAA,MAAA;AAAA,IAAA;AAAA,IAEL,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,sEACPT,IACM,sDACA,oCACV;AAAA,QAEC,UAAAD;AAAA,MAAA;AAAA,IAAA;AAAA,EACL,GACJ;AAGJ,SAAIK,IAEI,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,SAASP;AAAA,MACT,iBAAeC;AAAA,MACf,WAAW,GAAGE,CAAQ;AAAA,MAErB,UAAAC;AAAA,IAAA;AAAA,EAAA,IAKN,gBAAAG,EAAC,OAAA,EAAI,WAAWJ,GAAW,UAAAC,GAAQ;AAC9C,GAOMI,IAA0C,CAAC,EAAE,UAAAC,QAC/C,gBAAAF,EAAC,OAAA,EAAI,WAAU,0DAA0D,UAAAE,EAAA,CAAS;"}

package/dist/components/Progress.js

@@ -0,0 +1,69 @@
+import { jsx as n } from "react/jsx-runtime";
+const w = "w-full overflow-hidden bg-[var(--malachite-card-dimmed-background)]", A = "h-full transition-[width] duration-200 ease-in-out bg-[var(--malachite-text-primary)]", g = "h-full transition-[width] duration-200 ease-in-out", C = {
+  default: "var(--malachite-text-primary)",
+  success: "var(--malachite-text-success)",
+  warning: "var(--malachite-text-warning)",
+  error: "var(--malachite-text-error)",
+  info: "var(--malachite-text-info)"
+}, E = "135deg", v = 2, M = 5, y = "var(--malachite-card-dimmed-background)", H = (t, a) => {
+  const r = C[t.variant ?? "default"], e = { width: `${a}%`, backgroundColor: r };
+  return t.fill !== "hatched" ? e : {
+    ...e,
+    backgroundImage: `repeating-linear-gradient(${E}, ${r} 0 ${v}px, ${y} ${v}px ${M}px)`
+  };
+}, L = (t) => t.reduce((a, r) => a + Math.max(0, r.value), 0), N = ({
+  value: t,
+  segments: a,
+  max: r,
+  color: e,
+  trackColor: o,
+  height: d = 4,
+  "aria-label": x,
+  "aria-labelledby": f,
+  "aria-valuetext": b,
+  className: S = "",
+  style: $ = {}
+}) => {
+  const s = Math.max(0, Math.min(100, t ?? 0)), p = Math.max(2, Math.round(d / 2)), u = (a == null ? void 0 : a.filter((i) => i.value > 0)) ?? [], l = a !== void 0, c = l ? L(u) : 0, h = Math.max(r ?? c, c), m = h > 0 ? h : 1;
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": l ? m : 100,
+      "aria-valuenow": l ? c : Math.round(s),
+      "aria-valuetext": b,
+      "aria-label": x,
+      "aria-labelledby": f,
+      className: `${w} ${S}`,
+      style: {
+        height: `${d}px`,
+        borderRadius: `${p}px`,
+        ...o && !l && { background: o },
+        ...$
+      },
+      children: l ? /* @__PURE__ */ n("div", { className: "flex h-full w-full", children: u.map((i, _) => /* @__PURE__ */ n(
+        "div",
+        {
+          className: g,
+          style: H(i, i.value / m * 100)
+        },
+        `${i.variant ?? "default"}-${_}`
+      )) }) : /* @__PURE__ */ n(
+        "div",
+        {
+          className: A,
+          style: {
+            width: `${s}%`,
+            ...e && { background: e }
+          }
+        }
+      )
+    }
+  );
+};
+export {
+  N as Progress,
+  N as default
+};
+//# sourceMappingURL=Progress.js.map

package/dist/components/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sources":["../../src/components/Progress.tsx"],"sourcesContent":["import React from 'react';\n\n/**\n * Semantic colour role for a segment. Colours come from theme tokens by design — unlike\n * `color`/`trackColor`, which predate that rule, there is no free-form colour here. To\n * restyle a role, override its token via `applyTheme` / `applyCustomTheme`.\n */\nexport type ProgressSegmentVariant = 'default' | 'success' | 'warning' | 'error' | 'info';\n\n/** `hatched` reads as claimed-but-unpaid-for — usage past an allowance, not more of it. */\nexport type ProgressSegmentFill = 'solid' | 'hatched';\n\nexport interface ProgressSegment {\n    /** Portion of `max` this segment covers, in the same units. */\n    value: number;\n    variant?: ProgressSegmentVariant;\n    fill?: ProgressSegmentFill;\n}\n\ninterface ProgressCommonProps {\n    height?: number;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    /** Spoken instead of the range, which reads as 100% once segments fill the track. */\n    'aria-valuetext'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\ninterface ProgressValueProps extends ProgressCommonProps {\n    value: number;\n    color?: string;\n    trackColor?: string;\n    segments?: never;\n    max?: never;\n}\n\ninterface ProgressSegmentsProps extends ProgressCommonProps {\n    segments: ProgressSegment[];\n    /** Scale the segments measure against. Defaults to their sum, and a larger sum wins. */\n    max?: number;\n    value?: never;\n    color?: never;\n    trackColor?: never;\n}\n\n/** One fill or a list of segments, never both — `color`/`trackColor` mean nothing to segments. */\nexport type ProgressProps = ProgressValueProps | ProgressSegmentsProps;\n\nconst TRACK_CLASSES = 'w-full overflow-hidden bg-[var(--malachite-card-dimmed-background)]';\nconst FILL_CLASSES =\n    'h-full transition-[width] duration-200 ease-in-out bg-[var(--malachite-text-primary)]';\nconst SEGMENT_CLASSES = 'h-full transition-[width] duration-200 ease-in-out';\n\nconst SEGMENT_COLOR: Record<ProgressSegmentVariant, string> = {\n    default: 'var(--malachite-text-primary)',\n    success: 'var(--malachite-text-success)',\n    warning: 'var(--malachite-text-warning)',\n    error: 'var(--malachite-text-error)',\n    info: 'var(--malachite-text-info)',\n};\n\n// Bands sit perpendicular to the gradient axis, so this draws them bottom-left to top-right.\nconst HATCH_AXIS_ANGLE = '135deg';\nconst HATCH_STRIPE_PX = 2;\nconst HATCH_PERIOD_PX = 5;\nconst HATCH_GAP_COLOR = 'var(--malachite-card-dimmed-background)';\n\nconst segmentStyle = (segment: ProgressSegment, widthPercent: number): React.CSSProperties => {\n    const color = SEGMENT_COLOR[segment.variant ?? 'default'];\n    const base: React.CSSProperties = { width: `${widthPercent}%`, backgroundColor: color };\n    if (segment.fill !== 'hatched') {\n        return base;\n    }\n    return {\n        ...base,\n        backgroundImage: `repeating-linear-gradient(${HATCH_AXIS_ANGLE}, ${color} 0 ${HATCH_STRIPE_PX}px, ${HATCH_GAP_COLOR} ${HATCH_STRIPE_PX}px ${HATCH_PERIOD_PX}px)`,\n    };\n};\n\nconst sumOf = (segments: ProgressSegment[]): number =>\n    segments.reduce((total, segment) => total + Math.max(0, segment.value), 0);\n\nconst Progress: React.FC<ProgressProps> = ({\n    value,\n    segments,\n    max,\n    color,\n    trackColor,\n    height = 4,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-valuetext': ariaValueText,\n    className = '',\n    style = {},\n}) => {\n    const clamped = Math.max(0, Math.min(100, value ?? 0));\n    const radius = Math.max(2, Math.round(height / 2));\n    const drawn = segments?.filter((segment) => segment.value > 0) ?? [];\n    const segmented = segments !== undefined;\n    const total = segmented ? sumOf(drawn) : 0;\n    // Only guards the division: flooring at 1 unconditionally would rescale a sub-1 max.\n    const requestedScale = Math.max(max ?? total, total);\n    const scale = requestedScale > 0 ? requestedScale : 1;\n\n    return (\n        <div\n            role=\"progressbar\"\n            aria-valuemin={0}\n            aria-valuemax={segmented ? scale : 100}\n            // Segment totals are arbitrary, so rounding one side could put it past the other.\n            aria-valuenow={segmented ? total : Math.round(clamped)}\n            aria-valuetext={ariaValueText}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            className={`${TRACK_CLASSES} ${className}`}\n            style={{\n                height: `${height}px`,\n                borderRadius: `${radius}px`,\n                ...(trackColor && !segmented && { background: trackColor }),\n                ...style,\n            }}\n        >\n            {segmented ? (\n                <div className=\"flex h-full w-full\">\n                    {drawn.map((segment, index) => (\n                        <div\n                            // Segments are a positional list with no identity of their own.\n                            key={`${segment.variant ?? 'default'}-${index}`}\n                            className={SEGMENT_CLASSES}\n                            style={segmentStyle(segment, (segment.value / scale) * 100)}\n                        />\n                    ))}\n                </div>\n            ) : (\n                <div\n                    className={FILL_CLASSES}\n                    style={{\n                        width: `${clamped}%`,\n                        ...(color && { background: color }),\n                    }}\n                />\n            )}\n        </div>\n    );\n};\n\nexport default Progress;\nexport { Progress };\n"],"names":["TRACK_CLASSES","FILL_CLASSES","SEGMENT_CLASSES","SEGMENT_COLOR","HATCH_AXIS_ANGLE","HATCH_STRIPE_PX","HATCH_PERIOD_PX","HATCH_GAP_COLOR","segmentStyle","segment","widthPercent","color","base","sumOf","segments","total","Progress","value","max","trackColor","height","ariaLabel","ariaLabelledBy","ariaValueText","className","style","clamped","radius","drawn","segmented","requestedScale","scale","jsx","index"],"mappings":";AAiDA,MAAMA,IAAgB,uEAChBC,IACF,yFACEC,IAAkB,sDAElBC,IAAwD;AAAA,EAC1D,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AACV,GAGMC,IAAmB,UACnBC,IAAkB,GAClBC,IAAkB,GAClBC,IAAkB,2CAElBC,IAAe,CAACC,GAA0BC,MAA8C;AAC1F,QAAMC,IAAQR,EAAcM,EAAQ,WAAW,SAAS,GAClDG,IAA4B,EAAE,OAAO,GAAGF,CAAY,KAAK,iBAAiBC,EAAA;AAChF,SAAIF,EAAQ,SAAS,YACVG,IAEJ;AAAA,IACH,GAAGA;AAAA,IACH,iBAAiB,6BAA6BR,CAAgB,KAAKO,CAAK,MAAMN,CAAe,OAAOE,CAAe,IAAIF,CAAe,MAAMC,CAAe;AAAA,EAAA;AAEnK,GAEMO,IAAQ,CAACC,MACXA,EAAS,OAAO,CAACC,GAAON,MAAYM,IAAQ,KAAK,IAAI,GAAGN,EAAQ,KAAK,GAAG,CAAC,GAEvEO,IAAoC,CAAC;AAAA,EACvC,OAAAC;AAAA,EACA,UAAAH;AAAA,EACA,KAAAI;AAAA,EACA,OAAAP;AAAA,EACA,YAAAQ;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,cAAcC;AAAA,EACd,mBAAmBC;AAAA,EACnB,kBAAkBC;AAAA,EAClB,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ,CAAA;AACZ,MAAM;AACF,QAAMC,IAAU,KAAK,IAAI,GAAG,KAAK,IAAI,KAAKT,KAAS,CAAC,CAAC,GAC/CU,IAAS,KAAK,IAAI,GAAG,KAAK,MAAMP,IAAS,CAAC,CAAC,GAC3CQ,KAAQd,KAAA,gBAAAA,EAAU,OAAO,CAACL,MAAYA,EAAQ,QAAQ,OAAM,CAAA,GAC5DoB,IAAYf,MAAa,QACzBC,IAAQc,IAAYhB,EAAMe,CAAK,IAAI,GAEnCE,IAAiB,KAAK,IAAIZ,KAAOH,GAAOA,CAAK,GAC7CgB,IAAQD,IAAiB,IAAIA,IAAiB;AAEpD,SACI,gBAAAE;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,iBAAe;AAAA,MACf,iBAAeH,IAAYE,IAAQ;AAAA,MAEnC,iBAAeF,IAAYd,IAAQ,KAAK,MAAMW,CAAO;AAAA,MACrD,kBAAgBH;AAAA,MAChB,cAAYF;AAAA,MACZ,mBAAiBC;AAAA,MACjB,WAAW,GAAGtB,CAAa,IAAIwB,CAAS;AAAA,MACxC,OAAO;AAAA,QACH,QAAQ,GAAGJ,CAAM;AAAA,QACjB,cAAc,GAAGO,CAAM;AAAA,QACvB,GAAIR,KAAc,CAACU,KAAa,EAAE,YAAYV,EAAA;AAAA,QAC9C,GAAGM;AAAA,MAAA;AAAA,MAGN,UAAAI,sBACI,OAAA,EAAI,WAAU,sBACV,UAAAD,EAAM,IAAI,CAACnB,GAASwB,MACjB,gBAAAD;AAAA,QAAC;AAAA,QAAA;AAAA,UAGG,WAAW9B;AAAA,UACX,OAAOM,EAAaC,GAAUA,EAAQ,QAAQsB,IAAS,GAAG;AAAA,QAAA;AAAA,QAFrD,GAAGtB,EAAQ,WAAW,SAAS,IAAIwB,CAAK;AAAA,MAAA,CAIpD,GACL,IAEA,gBAAAD;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAW/B;AAAA,UACX,OAAO;AAAA,YACH,OAAO,GAAGyB,CAAO;AAAA,YACjB,GAAIf,KAAS,EAAE,YAAYA,EAAA;AAAA,UAAM;AAAA,QACrC;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAIhB;"}