@stackone/malachite 2.21.0 → 2.23.0

package/dist/components/AppLogo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppLogo.js","sources":["../../src/components/AppLogo.tsx"],"sourcesContent":["import React from 'react';\nimport Avatar from './Avatar';\nimport Tag from './Tag';\nimport Typography from './Typography';\nimport { getFontSize, getFontWeight } from './Typography/textStyles';\nimport type { FontSize, FontWeight } from './Typography/Text';\n\nexport interface AppLogoProps {\n    /** Connector logo URL. Falls back to a coloured initial tile when missing or broken. */\n    src?: string;\n    /** Connector name — the accessible label, the fallback initial, and the visible text. */\n    name: string;\n    /** Renders the name beside the mark. Omit for a bare logo (e.g. inside a dense row). */\n    showName?: boolean;\n    /** Pixel size of the square mark. */\n    size?: number;\n    nameSize?: FontSize;\n    /** Defaults to `normal`. Raise it when the logo doubles as a page title. */\n    nameWeight?: FontWeight;\n    /** Rendered as a tag after the name, e.g. `v1.2.0` or `Legacy`. */\n    version?: string;\n    /** Truncates a long name with an ellipsis and reveals the full value on hover. */\n    truncate?: boolean;\n    className?: string;\n}\n\nconst AppLogo: React.FC<AppLogoProps> = ({\n    src,\n    name,\n    showName = true,\n    size = 24,\n    nameSize = 'medium',\n    nameWeight = 'normal',\n    version,\n    truncate = false,\n    className = '',\n}) => {\n    const gap = size <= 18 ? 'gap-2' : 'gap-3';\n\n    if (!showName) {\n        return <Avatar src={src} name={name} size={size} shape=\"square\" className={className} />;\n    }\n\n    return (\n        // `max-w-full` is what makes `truncate` work — without it the box is floored at the name's min-content width.\n        <span className={`inline-flex items-center ${gap} max-w-full ${className}`.trim()}>\n            <Avatar src={src} name={name} size={size} shape=\"square\" className=\"shrink-0\" />\n            <span className=\"inline-flex items-center gap-2 min-w-0\">\n                {truncate ? (\n                    <Typography.EllipsisText\n                        maxWidth=\"100%\"\n                        tooltip={name}\n                        style={{\n                            fontSize: getFontSize(nameSize),\n                            fontWeight: getFontWeight(nameWeight),\n                        }}\n                    >\n                        {name}\n                    </Typography.EllipsisText>\n                ) : (\n                    <Typography.Text size={nameSize} fontWeight={nameWeight}>\n                        {name}\n                    </Typography.Text>\n                )}\n                {version ? (\n                    <span className=\"shrink-0\">\n                        <Tag value={version} textTransform=\"none\" paddingSize=\"compact\" />\n                    </span>\n                ) : null}\n            </span>\n        </span>\n    );\n};\n\nexport default AppLogo;\n"],"names":["AppLogo","src","name","showName","size","nameSize","nameWeight","version","truncate","className","gap","jsxs","jsx","Avatar","Typography","getFontSize","getFontWeight","Tag"],"mappings":";;;;;AA0BA,MAAMA,IAAkC,CAAC;AAAA,EACrC,KAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa;AAAA,EACb,SAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC,IAAY;AAChB,MAAM;AACF,QAAMC,IAAMN,KAAQ,KAAK,UAAU;AAEnC,SAAKD;AAAA;AAAA,IAMD,gBAAAQ,EAAC,UAAK,WAAW,4BAA4BD,CAAG,eAAeD,CAAS,GAAG,KAAA,GACvE,UAAA;AAAA,MAAA,gBAAAG,EAACC,KAAO,KAAAZ,GAAU,MAAAC,GAAY,MAAAE,GAAY,OAAM,UAAS,WAAU,YAAW;AAAA,MAC9E,gBAAAO,EAAC,QAAA,EAAK,WAAU,0CACX,UAAA;AAAA,QAAAH,IACG,gBAAAI;AAAA,UAACE,EAAW;AAAA,UAAX;AAAA,YACG,UAAS;AAAA,YACT,SAASZ;AAAA,YACT,OAAO;AAAA,cACH,UAAUa,EAAYV,CAAQ;AAAA,cAC9B,YAAYW,EAAcV,CAAU;AAAA,YAAA;AAAA,YAGvC,UAAAJ;AAAA,UAAA;AAAA,QAAA,sBAGJY,EAAW,MAAX,EAAgB,MAAMT,GAAU,YAAYC,GACxC,UAAAJ,GACL;AAAA,QAEHK,IACG,gBAAAK,EAAC,QAAA,EAAK,WAAU,YACZ,UAAA,gBAAAA,EAACK,GAAA,EAAI,OAAOV,GAAS,eAAc,QAAO,aAAY,UAAA,CAAU,GACpE,IACA;AAAA,MAAA,EAAA,CACR;AAAA,IAAA,EAAA,CACJ;AAAA,wBA9BQM,GAAA,EAAO,KAAAZ,GAAU,MAAAC,GAAY,MAAAE,GAAY,OAAM,UAAS,WAAAK,GAAsB;AAgC9F;"}

package/dist/components/Avatar.js

@@ -0,0 +1,61 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useState as f } from "react";
+const c = (e) => {
+  let r = 0;
+  for (let t = 0; t < e.length; t += 1)
+    r = e.charCodeAt(t) + ((r << 5) - r);
+  return `hsl(${Math.abs(r) % 360}, 55%, 52%)`;
+}, g = ({
+  src: e,
+  name: r,
+  size: t = 24,
+  shape: l = "square",
+  className: i = ""
+}) => {
+  const [d, h] = f(void 0), o = (r == null ? void 0 : r.trim()) ?? "", n = l === "circle" ? "50%" : `${Math.round(t * 0.25)}px`;
+  return e && d !== e ? /* @__PURE__ */ a(
+    "img",
+    {
+      src: e,
+      alt: o,
+      loading: "lazy",
+      decoding: "async",
+      onError: () => h(e),
+      className: i,
+      style: {
+        width: `${t}px`,
+        height: `${t}px`,
+        borderRadius: n,
+        objectFit: "contain",
+        flexShrink: 0
+      }
+    }
+  ) : /* @__PURE__ */ a(
+    "div",
+    {
+      ...o ? { role: "img", "aria-label": o } : { "aria-hidden": !0 },
+      className: i,
+      style: {
+        width: `${t}px`,
+        height: `${t}px`,
+        flexShrink: 0,
+        borderRadius: n,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        background: c(o),
+        color: "#ffffff",
+        fontWeight: 600,
+        fontSize: `${Math.round(t * 0.45)}px`,
+        lineHeight: 1,
+        textTransform: "uppercase"
+      },
+      children: o.charAt(0) || "?"
+    }
+  );
+};
+export {
+  g as Avatar,
+  g as default
+};
+//# sourceMappingURL=Avatar.js.map

package/dist/components/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../src/components/Avatar.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nexport type AvatarShape = 'square' | 'circle';\n\nexport interface AvatarProps {\n    /** Image URL (logo/photo). Falls back to the initial of `name` when missing or it fails to load. */\n    src?: string;\n    /** Used for the initial fallback and as the image alt / accessible label. */\n    name?: string;\n    /** Pixel size of the (square) avatar. */\n    size?: number;\n    shape?: AvatarShape;\n    className?: string;\n}\n\n// Deterministic, evenly-distributed hue from the label so the same entity always gets\n// the same colour. Saturation/lightness are fixed for a consistent, on-brand feel.\n// NOTE: avatar identity colours (this hue and the white text below) are intentionally\n// NOT theme tokens — they are a generated identity palette, an explicit exception to\n// the \"colours come from theme tokens\" rule (there is no avatar-colour token group).\nconst backgroundFor = (seed: string): string => {\n    let hash = 0;\n    for (let index = 0; index < seed.length; index += 1) {\n        hash = seed.charCodeAt(index) + ((hash << 5) - hash);\n    }\n    return `hsl(${Math.abs(hash) % 360}, 55%, 52%)`;\n};\n\n/**\n * A logo/initial avatar. Renders `src` when available, otherwise a coloured tile\n * with the first letter of `name`. Encapsulates the fallback colour so consumers\n * never hand-roll it.\n */\nconst Avatar: React.FC<AvatarProps> = ({\n    src,\n    name,\n    size = 24,\n    shape = 'square',\n    className = '',\n}) => {\n    // Track which src failed (not a boolean) so switching `src` to a new URL retries the\n    // image instead of staying stuck on the fallback.\n    const [failedSrc, setFailedSrc] = useState<string | undefined>(undefined);\n    const label = name?.trim() ?? '';\n    const borderRadius = shape === 'circle' ? '50%' : `${Math.round(size * 0.25)}px`;\n\n    if (src && failedSrc !== src) {\n        return (\n            <img\n                src={src}\n                alt={label}\n                loading=\"lazy\"\n                decoding=\"async\"\n                onError={() => setFailedSrc(src)}\n                className={className}\n                style={{\n                    width: `${size}px`,\n                    height: `${size}px`,\n                    borderRadius,\n                    objectFit: 'contain',\n                    flexShrink: 0,\n                }}\n            />\n        );\n    }\n\n    // With a label the tile is an image with an accessible name; without one it carries\n    // no information, so mark it decorative (aria-hidden, no role) to avoid an unnamed\n    // image in the accessibility tree.\n    return (\n        <div\n            {...(label ? { role: 'img', 'aria-label': label } : { 'aria-hidden': true })}\n            className={className}\n            style={{\n                width: `${size}px`,\n                height: `${size}px`,\n                flexShrink: 0,\n                borderRadius,\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                background: backgroundFor(label),\n                color: '#ffffff',\n                fontWeight: 600,\n                fontSize: `${Math.round(size * 0.45)}px`,\n                lineHeight: 1,\n                textTransform: 'uppercase',\n            }}\n        >\n            {label.charAt(0) || '?'}\n        </div>\n    );\n};\n\nexport default Avatar;\nexport { Avatar };\n"],"names":["backgroundFor","seed","hash","index","Avatar","src","name","size","shape","className","failedSrc","setFailedSrc","useState","label","borderRadius","jsx"],"mappings":";;AAoBA,MAAMA,IAAgB,CAACC,MAAyB;AAC5C,MAAIC,IAAO;AACX,WAASC,IAAQ,GAAGA,IAAQF,EAAK,QAAQE,KAAS;AAC9C,IAAAD,IAAOD,EAAK,WAAWE,CAAK,MAAMD,KAAQ,KAAKA;AAEnD,SAAO,OAAO,KAAK,IAAIA,CAAI,IAAI,GAAG;AACtC,GAOME,IAAgC,CAAC;AAAA,EACnC,KAAAC;AAAA,EACA,MAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAChB,MAAM;AAGF,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAA6B,MAAS,GAClEC,KAAQP,KAAA,gBAAAA,EAAM,WAAU,IACxBQ,IAAeN,MAAU,WAAW,QAAQ,GAAG,KAAK,MAAMD,IAAO,IAAI,CAAC;AAE5E,SAAIF,KAAOK,MAAcL,IAEjB,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAV;AAAA,MACA,KAAKQ;AAAA,MACL,SAAQ;AAAA,MACR,UAAS;AAAA,MACT,SAAS,MAAMF,EAAaN,CAAG;AAAA,MAC/B,WAAAI;AAAA,MACA,OAAO;AAAA,QACH,OAAO,GAAGF,CAAI;AAAA,QACd,QAAQ,GAAGA,CAAI;AAAA,QACf,cAAAO;AAAA,QACA,WAAW;AAAA,QACX,YAAY;AAAA,MAAA;AAAA,IAChB;AAAA,EAAA,IASR,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAIF,IAAQ,EAAE,MAAM,OAAO,cAAcA,EAAA,IAAU,EAAE,eAAe,GAAA;AAAA,MACrE,WAAAJ;AAAA,MACA,OAAO;AAAA,QACH,OAAO,GAAGF,CAAI;AAAA,QACd,QAAQ,GAAGA,CAAI;AAAA,QACf,YAAY;AAAA,QACZ,cAAAO;AAAA,QACA,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,YAAYd,EAAca,CAAK;AAAA,QAC/B,OAAO;AAAA,QACP,YAAY;AAAA,QACZ,UAAU,GAAG,KAAK,MAAMN,IAAO,IAAI,CAAC;AAAA,QACpC,YAAY;AAAA,QACZ,eAAe;AAAA,MAAA;AAAA,MAGlB,UAAAM,EAAM,OAAO,CAAC,KAAK;AAAA,IAAA;AAAA,EAAA;AAGhC;"}

package/dist/components/BaseFormComponent.js

@@ -0,0 +1,116 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { useId as z } from "react";
+import F from "./CustomIcons/ArrowUpRightIcon.js";
+import $ from "./CustomIcons/InfoFilledIcon.js";
+import { FormItem as w } from "./FormItem.js";
+import { Link as O } from "./Link.js";
+import { safeHref as _ } from "./safeHref.js";
+import x from "./Spacer.js";
+import k from "./Tooltip.js";
+import H from "./Typography/MarkdownBlock.js";
+import h from "./Typography/Text.js";
+import { FOCUS_RING as R } from "./focusRing.js";
+import { renderFormItemChildren as y, NO_FIELD_ERROR as L } from "./formItemState.js";
+const T = 0.5, q = ({
+  id: t,
+  label: r,
+  description: i,
+  hint: l,
+  helperText: a = !1
+}) => {
+  const o = `mal-${z().replace(/[^a-zA-Z0-9_-]/g, "")}-`, p = t ?? `${o}control`, f = r ? `${o}label` : void 0, n = i ? `${o}description` : void 0, m = l ? `${o}hint` : void 0, c = a ? `${o}helper` : void 0, d = [n, m, c].filter(Boolean).join(" ") || void 0;
+  return { controlId: p, labelId: f, descriptionId: n, hintId: m, helperTextId: c, describedBy: d };
+}, ee = ({
+  label: t,
+  hint: r,
+  rightSideContent: i,
+  tooltip: l,
+  name: a,
+  description: o,
+  required: p = !1,
+  requiredIndicator: f = "optional-suffix",
+  loading: n = !1,
+  formControl: m,
+  loadingComponent: c,
+  children: d,
+  controlId: u,
+  labelId: v,
+  descriptionId: I,
+  hintId: N,
+  fullWidth: b = !1
+}) => {
+  const g = m ? /* @__PURE__ */ e(w, { control: m, name: a, children: d }) : y(d, L);
+  return /* @__PURE__ */ s(x, { direction: "vertical", size: 6, align: "stretch", fullWidth: b, children: [
+    (t || r || o || i) && /* @__PURE__ */ s(x, { direction: "vertical", size: 4, align: "stretch", children: [
+      /* @__PURE__ */ s("div", { className: "flex justify-between items-start", children: [
+        /* @__PURE__ */ e(
+          E,
+          {
+            text: t,
+            required: p,
+            requiredIndicator: f,
+            tooltip: l,
+            id: v,
+            htmlFor: n ? void 0 : u
+          }
+        ),
+        (r || i) && /* @__PURE__ */ s("div", { className: "flex items-start gap-2", children: [
+          r && /* @__PURE__ */ e(B, { text: r, id: N }),
+          i && /* @__PURE__ */ e(j, { ...i })
+        ] })
+      ] }),
+      o && /* @__PURE__ */ e(D, { text: o, id: I })
+    ] }),
+    n ? c : g
+  ] });
+}, j = (t) => {
+  const r = _(t.href);
+  return r ? /* @__PURE__ */ s(
+    O,
+    {
+      href: r,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      color: "dimmed",
+      size: "xsmall",
+      underline: !1,
+      className: "shrink-0 whitespace-nowrap inline-flex items-center gap-1 relative top-[3px]",
+      children: [
+        t.text,
+        /* @__PURE__ */ e(F, { size: 13 })
+      ]
+    }
+  ) : null;
+}, B = ({ text: t, id: r }) => /* @__PURE__ */ e("span", { id: r, children: /* @__PURE__ */ e(h, { size: "xsmall", color: "dimmed", className: "pr-2 relative top-[3px]", children: t }) }), D = ({ text: t, id: r }) => /* @__PURE__ */ e("div", { className: "pl-2 text-left", id: r, children: /* @__PURE__ */ e(H, { color: "dimmed", size: "small", text: t ?? "", omitMargin: !0 }) }), E = ({
+  text: t,
+  required: r,
+  requiredIndicator: i,
+  tooltip: l,
+  id: a,
+  htmlFor: o
+}) => t ? /* @__PURE__ */ s("div", { className: "flex items-center", children: [
+  /* @__PURE__ */ e("label", { id: a, htmlFor: o, children: /* @__PURE__ */ e(h, { size: "xsmall", color: "primary", fontWeight: "semi-bold", className: "pl-2", children: t }) }),
+  i === "optional-suffix" && !r && /* @__PURE__ */ e("span", { "aria-hidden": "true", children: /* @__PURE__ */ e(h, { size: "xsmall", color: "dimmed", className: "ml-1", children: "(Optional)" }) }),
+  i === "asterisk" && r && /* @__PURE__ */ e(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: "ml-1 text-[var(--malachite-destructive-foreground,rgb(196,62,62))]",
+      children: "*"
+    }
+  ),
+  l && /* @__PURE__ */ e(k, { text: l, placement: "right", delay: T, children: /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      "aria-label": `More information about ${t}`,
+      className: `ml-1 -mt-[2px] inline-flex items-center text-[var(--malachite-text-dimmed)] cursor-help ${R}`,
+      children: /* @__PURE__ */ e($, { size: 14 })
+    }
+  ) })
+] }) : /* @__PURE__ */ e("div", {});
+export {
+  ee as default,
+  q as useFormFieldIds
+};
+//# sourceMappingURL=BaseFormComponent.js.map

package/dist/components/BaseFormComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseFormComponent.js","sources":["../../src/components/BaseFormComponent.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport type { Control, FieldPath, FieldValues } from 'react-hook-form';\nimport ArrowUpRightIcon from './CustomIcons/ArrowUpRightIcon';\nimport InfoFilledIcon from './CustomIcons/InfoFilledIcon';\nimport FormItem from './FormItem';\nimport Link from './Link';\nimport { safeHref } from './safeHref';\nimport Spacer from './Spacer';\nimport Tooltip from './Tooltip';\nimport MarkdownBlock from './Typography/MarkdownBlock';\nimport Text from './Typography/Text';\nimport { FOCUS_RING } from './focusRing';\nimport { type FormItemChildren, NO_FIELD_ERROR, renderFormItemChildren } from './formItemState';\n\n/** Tooltip's own default of 1s reads as broken; 0.5 matches the rest of the library. */\nconst TOOLTIP_DELAY_SECONDS = 0.5;\n\n/** The ids that wire a form field's label / description / hint to its control. */\nexport interface FormFieldIds {\n    controlId: string;\n    labelId?: string;\n    descriptionId?: string;\n    hintId?: string;\n    helperTextId?: string;\n    describedBy?: string;\n}\n\ninterface FormFieldIdOptions {\n    /** A caller-supplied id always wins, so consumers can label the control themselves. */\n    id?: string;\n    label?: string;\n    description?: string;\n    hint?: string;\n    helperText?: boolean;\n}\n\n/**\n * Generates the stable ids a form field needs to be announced correctly. Shared by\n * `Input`, `TextArea`, `Dropdown` and `MultiSelect` so all four wire up identically.\n */\nexport const useFormFieldIds = ({\n    id,\n    label,\n    description,\n    hint,\n    helperText = false,\n}: FormFieldIdOptions): FormFieldIds => {\n    // useId() emits \":r0:\", and a colon is invalid in a CSS id selector, so a consumer's\n    // querySelector(`#${id}`) throws. Stripping only the delimiters keeps ids unique.\n    const generatedId = `mal-${useId().replace(/[^a-zA-Z0-9_-]/g, '')}-`;\n    const controlId = id ?? `${generatedId}control`;\n    const labelId = label ? `${generatedId}label` : undefined;\n    const descriptionId = description ? `${generatedId}description` : undefined;\n    const hintId = hint ? `${generatedId}hint` : undefined;\n    const helperTextId = helperText ? `${generatedId}helper` : undefined;\n    const describedBy =\n        [descriptionId, hintId, helperTextId].filter(Boolean).join(' ') || undefined;\n\n    return { controlId, labelId, descriptionId, hintId, helperTextId, describedBy };\n};\n\ninterface BaseFormComponentProps {\n    label?: string;\n    description?: string;\n    hint?: string;\n    rightSideContent?: RightSideContent;\n    tooltip?: string;\n    required?: boolean;\n    requiredIndicator?: RequiredIndicator;\n    name: FieldPath<FieldValues>;\n    defaultValue?: string;\n    loading?: boolean;\n    formControl?: Control<FieldValues, unknown>;\n    loadingComponent: React.ReactNode;\n    children?: FormItemChildren;\n    /** Accessibility wiring, from `useFormFieldIds` — see `FormFieldIds`. */\n    controlId?: string;\n    labelId?: string;\n    descriptionId?: string;\n    hintId?: string;\n    fullWidth?: boolean;\n}\n\nconst BaseFormComponent: React.FC<BaseFormComponentProps> = ({\n    label,\n    hint,\n    rightSideContent,\n    tooltip,\n    name,\n    description,\n    required = false,\n    requiredIndicator = 'optional-suffix',\n    loading = false,\n    formControl,\n    loadingComponent,\n    children,\n    controlId,\n    labelId,\n    descriptionId,\n    hintId,\n    fullWidth = false,\n}) => {\n    const finalComponent = formControl ? (\n        <FormItem control={formControl} name={name}>\n            {children}\n        </FormItem>\n    ) : (\n        renderFormItemChildren(children, NO_FIELD_ERROR)\n    );\n\n    const topHeader = () => (\n        <Spacer direction=\"vertical\" size={4} align=\"stretch\">\n            <div className=\"flex justify-between items-start\">\n                <Label\n                    text={label}\n                    required={required}\n                    requiredIndicator={requiredIndicator}\n                    tooltip={tooltip}\n                    id={labelId}\n                    // No control is rendered while loading, so an htmlFor would be an orphan.\n                    htmlFor={loading ? undefined : controlId}\n                />\n                {(hint || rightSideContent) && (\n                    <div className=\"flex items-start gap-2\">\n                        {hint && <Hint text={hint} id={hintId} />}\n                        {rightSideContent && <RightSide {...rightSideContent} />}\n                    </div>\n                )}\n            </div>\n            {description && <Description text={description} id={descriptionId} />}\n        </Spacer>\n    );\n\n    const showHeader = label || hint || description || rightSideContent;\n\n    return (\n        <Spacer direction=\"vertical\" size={6} align=\"stretch\" fullWidth={fullWidth}>\n            {showHeader && topHeader()}\n            {!loading ? finalComponent : loadingComponent}\n        </Spacer>\n    );\n};\n\n/**\n * What sits at the far end of a field's label row. Data rather than a node, so nothing\n * arbitrary reaches the row; discriminated so a further kind is additive. Plain text is\n * already `hint`.\n */\nexport type RightSideContent = {\n    type?: 'link';\n    text: string;\n    href: string;\n};\n\nconst RightSide = (content: RightSideContent) => {\n    const safe = safeHref(content.href);\n\n    if (!safe) {\n        return null;\n    }\n\n    return (\n        <Link\n            href={safe}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            color=\"dimmed\"\n            size=\"xsmall\"\n            underline={false}\n            className=\"shrink-0 whitespace-nowrap inline-flex items-center gap-1 relative top-[3px]\"\n        >\n            {content.text}\n            <ArrowUpRightIcon size={13} />\n        </Link>\n    );\n};\n\nconst Hint = ({ text, id }: { text?: string; id?: string }) => {\n    return (\n        <span id={id}>\n            <Text size=\"xsmall\" color=\"dimmed\" className=\"pr-2 relative top-[3px]\">\n                {text}\n            </Text>\n        </span>\n    );\n};\n\nconst Description = ({ text, id }: { text?: string; id?: string }) => {\n    return (\n        <div className=\"pl-2 text-left\" id={id}>\n            <MarkdownBlock color=\"dimmed\" size=\"small\" text={text ?? ''} omitMargin={true} />\n        </div>\n    );\n};\n\nexport type RequiredIndicator = 'optional-suffix' | 'asterisk' | 'none';\n\nconst Label = ({\n    text,\n    required,\n    requiredIndicator,\n    tooltip,\n    id,\n    htmlFor,\n}: {\n    text?: string;\n    required: boolean;\n    requiredIndicator: RequiredIndicator;\n    tooltip?: string;\n    id?: string;\n    htmlFor?: string;\n}) => {\n    return text ? (\n        <div className=\"flex items-center\">\n            <label id={id} htmlFor={htmlFor}>\n                <Text size=\"xsmall\" color=\"primary\" fontWeight=\"semi-bold\" className=\"pl-2\">\n                    {text}\n                </Text>\n            </label>\n            {/* Sibling of the <label>, not a child: Testing Library's getByLabelText matches\n                on textContent, so a marker inside it breaks getByLabelText('<label>'). */}\n            {requiredIndicator === 'optional-suffix' && !required && (\n                <span aria-hidden=\"true\">\n                    <Text size=\"xsmall\" color=\"dimmed\" className=\"ml-1\">\n                        (Optional)\n                    </Text>\n                </span>\n            )}\n            {requiredIndicator === 'asterisk' && required && (\n                <span\n                    aria-hidden=\"true\"\n                    className=\"ml-1 text-[var(--malachite-destructive-foreground,rgb(196,62,62))]\"\n                >\n                    *\n                </span>\n            )}\n            {tooltip && (\n                <Tooltip text={tooltip} placement=\"right\" delay={TOOLTIP_DELAY_SECONDS}>\n                    <button\n                        type=\"button\"\n                        aria-label={`More information about ${text}`}\n                        className={`ml-1 -mt-[2px] inline-flex items-center text-[var(--malachite-text-dimmed)] cursor-help ${FOCUS_RING}`}\n                    >\n                        <InfoFilledIcon size={14} />\n                    </button>\n                </Tooltip>\n            )}\n        </div>\n    ) : (\n        <div />\n    );\n};\n\nexport default BaseFormComponent;\n"],"names":["TOOLTIP_DELAY_SECONDS","useFormFieldIds","id","label","description","hint","helperText","generatedId","useId","controlId","labelId","descriptionId","hintId","helperTextId","describedBy","BaseFormComponent","rightSideContent","tooltip","name","required","requiredIndicator","loading","formControl","loadingComponent","children","fullWidth","finalComponent","jsx","FormItem","renderFormItemChildren","NO_FIELD_ERROR","jsxs","Spacer","Label","Hint","RightSide","Description","content","safe","safeHref","Link","ArrowUpRightIcon","text","Text","MarkdownBlock","htmlFor","Tooltip","FOCUS_RING","InfoFilledIcon"],"mappings":";;;;;;;;;;;;;AAeA,MAAMA,IAAwB,KAyBjBC,IAAkB,CAAC;AAAA,EAC5B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,YAAAC,IAAa;AACjB,MAAwC;AAGpC,QAAMC,IAAc,OAAOC,EAAA,EAAQ,QAAQ,mBAAmB,EAAE,CAAC,KAC3DC,IAAYP,KAAM,GAAGK,CAAW,WAChCG,IAAUP,IAAQ,GAAGI,CAAW,UAAU,QAC1CI,IAAgBP,IAAc,GAAGG,CAAW,gBAAgB,QAC5DK,IAASP,IAAO,GAAGE,CAAW,SAAS,QACvCM,IAAeP,IAAa,GAAGC,CAAW,WAAW,QACrDO,IACF,CAACH,GAAeC,GAAQC,CAAY,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAEvE,SAAO,EAAE,WAAAJ,GAAW,SAAAC,GAAS,eAAAC,GAAe,QAAAC,GAAQ,cAAAC,GAAc,aAAAC,EAAA;AACtE,GAwBMC,KAAsD,CAAC;AAAA,EACzD,OAAAZ;AAAA,EACA,MAAAE;AAAA,EACA,kBAAAW;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,aAAAd;AAAA,EACA,UAAAe,IAAW;AAAA,EACX,mBAAAC,IAAoB;AAAA,EACpB,SAAAC,IAAU;AAAA,EACV,aAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAf;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAa,IAAY;AAChB,MAAM;AACF,QAAMC,IAAiBJ,IACnB,gBAAAK,EAACC,GAAA,EAAS,SAASN,GAAa,MAAAJ,GAC3B,UAAAM,EAAA,CACL,IAEAK,EAAuBL,GAAUM,CAAc;AA4BnD,SACI,gBAAAC,EAACC,KAAO,WAAU,YAAW,MAAM,GAAG,OAAM,WAAU,WAAAP,GACjD,UAAA;AAAA,KAJUtB,KAASE,KAAQD,KAAeY,MAtB/C,gBAAAe,EAACC,GAAA,EAAO,WAAU,YAAW,MAAM,GAAG,OAAM,WACxC,UAAA;AAAA,MAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,oCACX,UAAA;AAAA,QAAA,gBAAAJ;AAAA,UAACM;AAAA,UAAA;AAAA,YACG,MAAM9B;AAAA,YACN,UAAAgB;AAAA,YACA,mBAAAC;AAAA,YACA,SAAAH;AAAA,YACA,IAAIP;AAAA,YAEJ,SAASW,IAAU,SAAYZ;AAAA,UAAA;AAAA,QAAA;AAAA,SAEjCJ,KAAQW,MACN,gBAAAe,EAAC,OAAA,EAAI,WAAU,0BACV,UAAA;AAAA,UAAA1B,KAAQ,gBAAAsB,EAACO,GAAA,EAAK,MAAM7B,GAAM,IAAIO,GAAQ;AAAA,UACtCI,KAAoB,gBAAAW,EAACQ,GAAA,EAAW,GAAGnB,EAAA,CAAkB;AAAA,QAAA,EAAA,CAC1D;AAAA,MAAA,GAER;AAAA,MACCZ,KAAe,gBAAAuB,EAACS,GAAA,EAAY,MAAMhC,GAAa,IAAIO,EAAA,CAAe;AAAA,IAAA,GACvE;AAAA,IAQMU,IAA2BE,IAAjBG;AAAA,EAAiB,GACjC;AAER,GAaMS,IAAY,CAACE,MAA8B;AAC7C,QAAMC,IAAOC,EAASF,EAAQ,IAAI;AAElC,SAAKC,IAKD,gBAAAP;AAAA,IAACS;AAAA,IAAA;AAAA,MACG,MAAMF;AAAA,MACN,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,OAAM;AAAA,MACN,MAAK;AAAA,MACL,WAAW;AAAA,MACX,WAAU;AAAA,MAET,UAAA;AAAA,QAAAD,EAAQ;AAAA,QACT,gBAAAV,EAACc,GAAA,EAAiB,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAdzB;AAiBf,GAEMP,IAAO,CAAC,EAAE,MAAAQ,GAAM,IAAAxC,QAEd,gBAAAyB,EAAC,QAAA,EAAK,IAAAzB,GACF,UAAA,gBAAAyB,EAACgB,GAAA,EAAK,MAAK,UAAS,OAAM,UAAS,WAAU,2BACxC,UAAAD,EAAA,CACL,GACJ,GAIFN,IAAc,CAAC,EAAE,MAAAM,GAAM,IAAAxC,0BAEpB,OAAA,EAAI,WAAU,kBAAiB,IAAAA,GAC5B,4BAAC0C,GAAA,EAAc,OAAM,UAAS,MAAK,SAAQ,MAAMF,KAAQ,IAAI,YAAY,IAAM,GACnF,GAMFT,IAAQ,CAAC;AAAA,EACX,MAAAS;AAAA,EACA,UAAAvB;AAAA,EACA,mBAAAC;AAAA,EACA,SAAAH;AAAA,EACA,IAAAf;AAAA,EACA,SAAA2C;AACJ,MAQWH,IACH,gBAAAX,EAAC,OAAA,EAAI,WAAU,qBACX,UAAA;AAAA,EAAA,gBAAAJ,EAAC,SAAA,EAAM,IAAAzB,GAAQ,SAAA2C,GACX,UAAA,gBAAAlB,EAACgB,KAAK,MAAK,UAAS,OAAM,WAAU,YAAW,aAAY,WAAU,QAChE,aACL,GACJ;AAAA,EAGCvB,MAAsB,qBAAqB,CAACD,KACzC,gBAAAQ,EAAC,UAAK,eAAY,QACd,UAAA,gBAAAA,EAACgB,GAAA,EAAK,MAAK,UAAS,OAAM,UAAS,WAAU,QAAO,wBAEpD,GACJ;AAAA,EAEHvB,MAAsB,cAAcD,KACjC,gBAAAQ;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,eAAY;AAAA,MACZ,WAAU;AAAA,MACb,UAAA;AAAA,IAAA;AAAA,EAAA;AAAA,EAIJV,uBACI6B,GAAA,EAAQ,MAAM7B,GAAS,WAAU,SAAQ,OAAOjB,GAC7C,UAAA,gBAAA2B;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,cAAY,0BAA0Be,CAAI;AAAA,MAC1C,WAAW,2FAA2FK,CAAU;AAAA,MAEhH,UAAA,gBAAApB,EAACqB,GAAA,EAAe,MAAM,GAAA,CAAI;AAAA,IAAA;AAAA,EAAA,EAC9B,CACJ;AAAA,EAAA,CAER,sBAEC,OAAA,EAAI;"}

package/dist/components/Breadcrumbs.js

@@ -0,0 +1,106 @@
+import { jsxs as u, jsx as a } from "react/jsx-runtime";
+import { Button as v } from "./Button.js";
+import N from "./CustomIcons/ArrowLeftIcon.js";
+import b from "./CustomIcons/CaretRightIcon.js";
+import B from "./Typography/Text.js";
+import { hasBackButton as $ } from "./breadcrumbsNav.js";
+import { FOCUS_RING as x } from "./focusRing.js";
+import { isSafeHref as y, safeHref as S } from "./safeHref.js";
+const A = `no-underline rounded-xs cursor-pointer transition-colors duration-200 ease-in-out hover:text-[var(--malachite-accent-foreground)] ${x}`, C = `flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--malachite-radius-10,10px)] no-underline bg-[var(--malachite-number-tag-background)] text-[var(--malachite-text-primary)] transition-colors duration-200 ease-in-out hover:bg-[var(--malachite-number-tag-emphasis-background)] ${x}`, g = (e, r) => y(e.href) ? r ? r(e) : /* @__PURE__ */ a("a", { ...e }) : e.children, f = (e, r) => typeof e == "string" ? /* @__PURE__ */ a(B, { size: "medium", fontWeight: "semi-bold", color: r, children: e }) : e, _ = ({
+  label: e,
+  onClick: r,
+  disabled: m,
+  variant: s,
+  icon: d,
+  href: h,
+  target: t,
+  tooltip: l,
+  tooltipPlacement: c
+}, i) => {
+  const n = S(h);
+  return /* @__PURE__ */ a(
+    v,
+    {
+      size: "small",
+      variant: s ?? "outline",
+      disabled: m,
+      icon: d,
+      tooltip: l,
+      tooltipPlacement: c,
+      href: n,
+      target: n ? t ?? "_blank" : void 0,
+      onClick: n ? void 0 : r,
+      children: e
+    },
+    `${i}-${e}`
+  );
+}, E = ({
+  links: e,
+  actions: r,
+  renderLink: m,
+  className: s = "",
+  style: d
+}) => {
+  if (e.length === 0 && !(r != null && r.length))
+    return null;
+  const h = e.length === 1 && !!e[0].isRoot, t = $(e) ? e[e.length - 2] : void 0, l = t == null ? void 0 : t.name, c = !!(r != null && r.length);
+  return /* @__PURE__ */ u(
+    "div",
+    {
+      className: `flex items-center ${c ? "justify-between" : ""} ${s}`,
+      style: d,
+      children: [
+        h ? f(e[0].name, "primary") : /* @__PURE__ */ u("div", { className: "flex items-center gap-4", children: [
+          (t == null ? void 0 : t.url) && g(
+            {
+              href: t.url,
+              "aria-label": typeof l == "string" ? `Back to ${l}` : "Go back",
+              className: C,
+              children: /* @__PURE__ */ a(N, { size: 12 })
+            },
+            m
+          ),
+          e.length > 0 && /* @__PURE__ */ a("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ a("ol", { className: "flex flex-wrap items-center gap-2 m-0 p-0 list-none", children: e.map((i, n) => {
+            const o = n === e.length - 1, p = o ? "primary" : "muted";
+            return /* @__PURE__ */ u(
+              "li",
+              {
+                className: "flex items-center gap-2",
+                "aria-current": o && !i.url ? "page" : void 0,
+                children: [
+                  i.url ? g(
+                    {
+                      href: i.url,
+                      "aria-current": o ? "page" : void 0,
+                      className: `${A} ${o ? "text-[var(--malachite-text-primary)]" : "text-[var(--malachite-text-muted)]"}`,
+                      children: f(
+                        i.name,
+                        "inherit"
+                      )
+                    },
+                    m
+                  ) : f(i.name, p),
+                  !o && /* @__PURE__ */ a(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: "flex items-center text-[var(--malachite-text-dimmed)]",
+                      children: /* @__PURE__ */ a(b, { size: 13 })
+                    }
+                  )
+                ]
+              },
+              `${i.url ?? ""}-${n}`
+            );
+          }) }) })
+        ] }),
+        c && /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: r == null ? void 0 : r.map(_) })
+      ]
+    }
+  );
+};
+export {
+  E as Breadcrumbs,
+  E as default
+};
+//# sourceMappingURL=Breadcrumbs.js.map

package/dist/components/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","sources":["../../src/components/Breadcrumbs.tsx"],"sourcesContent":["import React from 'react';\nimport Button from './Button';\nimport ArrowLeftIcon from './CustomIcons/ArrowLeftIcon';\nimport CaretRightIcon from './CustomIcons/CaretRightIcon';\nimport type { BreadcrumbLink, PageAction, RenderBreadcrumbLink } from './PageLayout/types';\nimport Text, { type TextColor } from './Typography/Text';\nimport { hasBackButton } from './breadcrumbsNav';\nimport { FOCUS_RING } from './focusRing';\nimport { isSafeHref, safeHref } from './safeHref';\n\nexport interface BreadcrumbsProps {\n    links: BreadcrumbLink[];\n    actions?: PageAction[];\n    renderLink?: RenderBreadcrumbLink;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst CRUMB_LINK_CLASSES = `no-underline rounded-xs cursor-pointer transition-colors duration-200 ease-in-out hover:text-[var(--malachite-accent-foreground)] ${FOCUS_RING}`;\n\nconst BACK_BUTTON_CLASSES = `flex h-6 w-6 shrink-0 items-center justify-center rounded-[var(--malachite-radius-10,10px)] no-underline bg-[var(--malachite-number-tag-background)] text-[var(--malachite-text-primary)] transition-colors duration-200 ease-in-out hover:bg-[var(--malachite-number-tag-emphasis-background)] ${FOCUS_RING}`;\n\ntype LinkProps = Parameters<RenderBreadcrumbLink>[0];\n\nconst renderCrumbLink = (props: LinkProps, renderLink?: RenderBreadcrumbLink): React.ReactNode => {\n    // An unsafe url degrades to plain text rather than a link that could run a script.\n    if (!isSafeHref(props.href)) {\n        return props.children;\n    }\n    return renderLink ? renderLink(props) : <a {...props} />;\n};\n\nconst renderCrumbName = (name: React.ReactNode, color: TextColor): React.ReactNode =>\n    typeof name === 'string' ? (\n        <Text size=\"medium\" fontWeight=\"semi-bold\" color={color}>\n            {name}\n        </Text>\n    ) : (\n        name\n    );\n\nconst renderAction = (\n    {\n        label,\n        onClick,\n        disabled,\n        variant,\n        icon,\n        href,\n        target,\n        tooltip,\n        tooltipPlacement,\n    }: PageAction,\n    index: number,\n) => {\n    const safe = safeHref(href);\n    return (\n        <Button\n            key={`${index}-${label}`}\n            size=\"small\"\n            variant={variant ?? 'outline'}\n            disabled={disabled}\n            icon={icon}\n            tooltip={tooltip}\n            tooltipPlacement={tooltipPlacement}\n            href={safe}\n            target={safe ? (target ?? '_blank') : undefined}\n            onClick={safe ? undefined : onClick}\n        >\n            {label}\n        </Button>\n    );\n};\n\nconst Breadcrumbs: React.FC<BreadcrumbsProps> = ({\n    links,\n    actions,\n    renderLink,\n    className = '',\n    style,\n}) => {\n    // PageLayout mounts this unconditionally, so returning markup would leave an empty\n    // navigation landmark on every page without crumbs.\n    if (links.length === 0 && !actions?.length) {\n        return null;\n    }\n\n    const isTitle = links.length === 1 && Boolean(links[0].isRoot);\n    const parentCrumb = hasBackButton(links) ? links[links.length - 2] : undefined;\n    const parentName = parentCrumb?.name;\n    const hasActions = Boolean(actions?.length);\n\n    return (\n        <div\n            className={`flex items-center ${hasActions ? 'justify-between' : ''} ${className}`}\n            style={style}\n        >\n            {isTitle ? (\n                renderCrumbName(links[0].name, 'primary')\n            ) : (\n                <div className=\"flex items-center gap-4\">\n                    {parentCrumb?.url &&\n                        renderCrumbLink(\n                            {\n                                href: parentCrumb.url,\n                                'aria-label':\n                                    typeof parentName === 'string'\n                                        ? `Back to ${parentName}`\n                                        : 'Go back',\n                                className: BACK_BUTTON_CLASSES,\n                                children: <ArrowLeftIcon size={12} />,\n                            },\n                            renderLink,\n                        )}\n                    {links.length > 0 && (\n                        <nav aria-label=\"Breadcrumb\">\n                            <ol className=\"flex flex-wrap items-center gap-2 m-0 p-0 list-none\">\n                                {links.map((link, index) => {\n                                    const isLast = index === links.length - 1;\n                                    const color: TextColor = isLast ? 'primary' : 'muted';\n\n                                    return (\n                                        <li\n                                            key={`${link.url ?? ''}-${index}`}\n                                            className=\"flex items-center gap-2\"\n                                            aria-current={isLast && !link.url ? 'page' : undefined}\n                                        >\n                                            {link.url\n                                                ? renderCrumbLink(\n                                                      {\n                                                          href: link.url,\n                                                          'aria-current': isLast\n                                                              ? 'page'\n                                                              : undefined,\n                                                          className: `${CRUMB_LINK_CLASSES} ${\n                                                              isLast\n                                                                  ? 'text-[var(--malachite-text-primary)]'\n                                                                  : 'text-[var(--malachite-text-muted)]'\n                                                          }`,\n                                                          children: renderCrumbName(\n                                                              link.name,\n                                                              'inherit',\n                                                          ),\n                                                      },\n                                                      renderLink,\n                                                  )\n                                                : renderCrumbName(link.name, color)}\n                                            {!isLast && (\n                                                <span\n                                                    aria-hidden=\"true\"\n                                                    className=\"flex items-center text-[var(--malachite-text-dimmed)]\"\n                                                >\n                                                    <CaretRightIcon size={13} />\n                                                </span>\n                                            )}\n                                        </li>\n                                    );\n                                })}\n                            </ol>\n                        </nav>\n                    )}\n                </div>\n            )}\n            {hasActions && (\n                <div className=\"flex items-center gap-2\">{actions?.map(renderAction)}</div>\n            )}\n        </div>\n    );\n};\n\nexport { Breadcrumbs };\nexport default Breadcrumbs;\n"],"names":["CRUMB_LINK_CLASSES","FOCUS_RING","BACK_BUTTON_CLASSES","renderCrumbLink","props","renderLink","isSafeHref","jsx","renderCrumbName","name","color","Text","renderAction","label","onClick","disabled","variant","icon","href","target","tooltip","tooltipPlacement","index","safe","safeHref","Button","Breadcrumbs","links","actions","className","style","isTitle","parentCrumb","hasBackButton","parentName","hasActions","jsxs","ArrowLeftIcon","link","isLast","CaretRightIcon"],"mappings":"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"}

package/dist/components/Button.js

@@ -0,0 +1,227 @@
+import { jsx as r, jsxs as c, Fragment as h } from "react/jsx-runtime";
+import { forwardRef as B } from "react";
+import I from "./Tooltip.js";
+const R = (t) => {
+  switch (t) {
+    // Figma has no text X-Small button, only the icon-only square — nothing to align to.
+    case "xsmall":
+      return "px-2 py-1 text-xs";
+    case "small":
+      return "min-h-[var(--malachite-control-height-small,28px)] px-[10px] text-[length:var(--malachite-font-size-small,13px)] leading-[16px] whitespace-nowrap";
+    case "medium":
+      return "min-h-[var(--malachite-control-height-medium,32px)] px-[10px] text-[length:var(--malachite-font-size-small,13px)] leading-[16px] whitespace-nowrap";
+    case "large":
+      return "min-h-[var(--malachite-control-height-large,42px)] px-[12px] text-[length:var(--malachite-font-size-15,15px)] leading-[18px] whitespace-nowrap";
+    default:
+      return "min-h-[var(--malachite-control-height-large,42px)] px-[12px] text-[length:var(--malachite-font-size-15,15px)] leading-[18px] whitespace-nowrap";
+  }
+}, F = (t) => {
+  switch (t) {
+    case "xsmall":
+      return "size-[20px] shrink-0";
+    case "small":
+      return "size-[28px] shrink-0";
+    case "medium":
+      return "size-[32px] shrink-0";
+    default:
+      return "size-[42px] shrink-0";
+  }
+}, L = (t, s) => {
+  switch (t) {
+    // Only the square rounds at 8px — text buttons at this size keep their 6px corner.
+    case "xsmall":
+      return s ? "rounded-lg" : "rounded-md";
+    case "small":
+      return "rounded-[var(--malachite-radius-10,10px)]";
+    case "medium":
+      return "rounded-xl";
+    case "large":
+      return "rounded-[var(--malachite-radius-xxl,14px)]";
+    default:
+      return "rounded-[var(--malachite-radius-xxl,14px)]";
+  }
+}, z = (t, s) => {
+  const e = s === "start";
+  switch (t) {
+    case "small":
+    case "medium":
+      return e ? "mr-[6px]" : "ml-[6px]";
+    default:
+      return e ? "mr-2" : "ml-2";
+  }
+}, O = (t) => {
+  switch (t) {
+    case "xsmall":
+      return "[&_svg]:size-[var(--malachite-icon-size-xsmall)]!";
+    case "small":
+      return "[&_svg]:size-[var(--malachite-icon-size-small)]!";
+    case "medium":
+      return "[&_svg]:size-[var(--malachite-icon-size-medium)]!";
+    case "large":
+      return "[&_svg]:size-[var(--malachite-icon-size-large)]!";
+    default:
+      return "[&_svg]:size-[var(--malachite-icon-size-large)]!";
+  }
+}, T = (t) => {
+  switch (t) {
+    case "md":
+      return "rounded-md";
+    case "lg":
+      return "rounded-lg";
+    case "xl":
+      return "rounded-xl";
+    default:
+      return "rounded-xl";
+  }
+}, U = (t, s) => {
+  if (s !== "_blank") return t;
+  const e = new Set(t == null ? void 0 : t.split(/\s+/).filter(Boolean));
+  return e.add("noopener"), e.add("noreferrer"), [...e].join(" ");
+}, a = {
+  neutral: "focus-visible:[outline:2px_solid_var(--malachite-text-primary)]",
+  destructive: "focus-visible:[outline:2px_solid_var(--malachite-text-destructive)]",
+  success: "focus-visible:[outline:2px_solid_var(--malachite-text-success)]",
+  warning: "focus-visible:[outline:2px_solid_var(--malachite-text-warning)]",
+  error: "focus-visible:[outline:2px_solid_var(--malachite-text-error)]",
+  assistant: "focus-visible:[outline:2px_solid_var(--malachite-assistant-foreground)]"
+}, V = (t, s) => {
+  const e = `font-medium transition-[color,background-color,border-color,opacity,box-shadow] duration-200 ease-in-out outline-none focus-visible:outline-offset-2 border border-solid ${s} cursor-pointer`;
+  switch (t) {
+    case "filled":
+      return `${e} ${a.neutral} btn-filled shadow-default`;
+    case "outline":
+      return `${e} ${a.neutral} btn-outline shadow-default`;
+    case "surface":
+      return `${e} ${a.neutral} btn-surface shadow-default`;
+    case "assistant":
+      return `${e} ${a.assistant} btn-assistant shadow-default`;
+    case "destructive":
+      return `${e} ${a.destructive} btn-destructive`;
+    case "success":
+      return `${e} ${a.success} btn-glass-success`;
+    case "warning":
+      return `${e} ${a.warning} btn-glass-warning`;
+    case "error":
+      return `${e} ${a.error} btn-glass-error`;
+    case "ghost":
+      return `${e} ${a.neutral} btn-ghost`;
+    case "no-style":
+      return `${e} ${a.neutral} btn-no-style border-none`;
+    default:
+      return `${e} ${a.neutral} btn-filled shadow-default`;
+  }
+}, W = () => /* @__PURE__ */ c(
+  "svg",
+  {
+    className: "animate-spin -ml-1 mr-2 h-4 w-4",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    children: [
+      /* @__PURE__ */ r(
+        "circle",
+        {
+          className: "opacity-25",
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "4"
+        }
+      ),
+      /* @__PURE__ */ r(
+        "path",
+        {
+          className: "opacity-75",
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        }
+      )
+    ]
+  }
+), A = B(
+  ({
+    variant: t,
+    size: s = "large",
+    radius: e,
+    loading: x = !1,
+    disabled: C = !1,
+    icon: i,
+    iconPosition: p = "start",
+    flexGrow: o = !1,
+    fill: k = !1,
+    tooltip: u,
+    tooltipPlacement: y = "top",
+    iconOnly: f = !1,
+    children: n,
+    className: N = "",
+    href: g,
+    target: v,
+    rel: S,
+    ...w
+  }, $) => {
+    const j = e ? T(e) : L(s, f), l = C || x, b = [
+      "flex items-center justify-center",
+      f ? `p-0 ${F(s)}` : R(s),
+      V(t, j),
+      o ? "w-full" : "",
+      k ? "max-w-full" : "",
+      l ? "cursor-not-allowed" : "",
+      u && l ? "pointer-events-none" : "",
+      N
+    ].filter(Boolean).join(" "), _ = () => {
+      if (x)
+        return /* @__PURE__ */ c(h, { children: [
+          /* @__PURE__ */ r(W, {}),
+          n
+        ] });
+      const m = `inline-flex items-center shrink-0 ${O(s)}`;
+      return i && p === "start" ? /* @__PURE__ */ c(h, { children: [
+        /* @__PURE__ */ r(
+          "span",
+          {
+            className: `${m}${n ? ` ${z(s, "start")}` : ""}`,
+            children: i
+          }
+        ),
+        n
+      ] }) : i && p === "end" ? /* @__PURE__ */ c(h, { children: [
+        n,
+        /* @__PURE__ */ r(
+          "span",
+          {
+            className: `${m}${n ? ` ${z(s, "end")}` : ""}`,
+            children: i
+          }
+        )
+      ] }) : n;
+    }, d = g && !l ? /* @__PURE__ */ r(
+      "a",
+      {
+        ref: $,
+        href: g,
+        target: v,
+        rel: U(S, v),
+        className: b,
+        ...w,
+        children: _()
+      }
+    ) : /* @__PURE__ */ r(
+      "button",
+      {
+        ref: $,
+        disabled: l,
+        className: b,
+        ...w,
+        children: _()
+      }
+    );
+    return u ? /* @__PURE__ */ r(I, { text: u, placement: y, fill: o, children: l ? /* @__PURE__ */ r("span", { className: `inline-flex cursor-not-allowed${o ? " w-full" : ""}`, children: d }) : d }) : d;
+  }
+);
+A.displayName = "Button";
+export {
+  A as Button,
+  A as default
+};
+//# sourceMappingURL=Button.js.map

package/dist/components/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../src/components/Button.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport Tooltip from './Tooltip';\n\n// Button variant types matching the old component\nexport type ButtonVariant =\n    | 'filled'\n    | 'outline'\n    /**\n     * `outline`'s geometry on a ground of its own. For a button sitting on a tinted or\n     * patterned surface, where `outline`'s transparent background lets that surface through\n     * and the control stops reading as a button.\n     */\n    | 'surface'\n    /**\n     * The violet the assistant is named in elsewhere — for a control that hands work to it, or\n     * acts on what it produced. Provenance, not a severity: it says who is being asked, not\n     * that anything is wrong.\n     */\n    | 'assistant'\n    | 'destructive'\n    | 'success'\n    | 'warning'\n    | 'error'\n    | 'ghost'\n    | 'no-style';\n\nexport type ButtonSize = 'xsmall' | 'small' | 'medium' | 'large';\n\nexport type ButtonRadius = 'md' | 'lg' | 'xl';\n\ninterface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n    variant: ButtonVariant;\n    size?: ButtonSize;\n    radius?: ButtonRadius;\n    loading?: boolean;\n    disabled?: boolean;\n    icon?: React.ReactNode;\n    iconPosition?: 'start' | 'end';\n    flexGrow?: boolean;\n    fill?: boolean;\n    tooltip?: string;\n    tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';\n    iconOnly?: boolean;\n    children?: React.ReactNode;\n    onClick?: React.MouseEventHandler<HTMLButtonElement & HTMLAnchorElement>;\n    /** Renders the button as a real anchor, so a link action is never an <a> nested in a <button>. */\n    href?: string;\n    target?: React.HTMLAttributeAnchorTarget;\n    rel?: string;\n}\n\n// Geometry from the Figma component library, which is variant-independent.\n// `min-h` not `h`: Tailwind emits `h-*` after `min-h-*`, so a hard height would beat a\n// consumer's own `h-*`. Paired with `whitespace-nowrap` (as Figma has it) so a long label\n// cannot wrap into a line the height would clip.\nconst getSizeClasses = (size: ButtonSize) => {\n    switch (size) {\n        // Figma has no text X-Small button, only the icon-only square — nothing to align to.\n        case 'xsmall':\n            return 'px-2 py-1 text-xs';\n        case 'small':\n            return 'min-h-[var(--malachite-control-height-small,28px)] px-[10px] text-[length:var(--malachite-font-size-small,13px)] leading-[16px] whitespace-nowrap';\n        case 'medium':\n            return 'min-h-[var(--malachite-control-height-medium,32px)] px-[10px] text-[length:var(--malachite-font-size-small,13px)] leading-[16px] whitespace-nowrap';\n        case 'large':\n            return 'min-h-[var(--malachite-control-height-large,42px)] px-[12px] text-[length:var(--malachite-font-size-15,15px)] leading-[18px] whitespace-nowrap';\n        default:\n            return 'min-h-[var(--malachite-control-height-large,42px)] px-[12px] text-[length:var(--malachite-font-size-15,15px)] leading-[18px] whitespace-nowrap';\n    }\n};\n\n/** An icon-only button is a square on the control ladder; without this it collapses to the\n *  glyph plus its border. */\nconst getIconOnlySizeClasses = (size: ButtonSize): string => {\n    switch (size) {\n        case 'xsmall':\n            return 'size-[20px] shrink-0';\n        case 'small':\n            return 'size-[28px] shrink-0';\n        case 'medium':\n            return 'size-[32px] shrink-0';\n        default:\n            return 'size-[42px] shrink-0';\n    }\n};\n\n// `rounded-*` reads the malachite radius tokens via `@theme`, so these follow the theme.\n// An explicit `radius` prop still wins, via getRadiusClass.\nconst getDefaultRadiusClass = (size: ButtonSize, iconOnly: boolean): string => {\n    switch (size) {\n        // Only the square rounds at 8px — text buttons at this size keep their 6px corner.\n        case 'xsmall':\n            return iconOnly ? 'rounded-lg' : 'rounded-md';\n        case 'small':\n            return 'rounded-[var(--malachite-radius-10,10px)]';\n        case 'medium':\n            return 'rounded-xl';\n        case 'large':\n            return 'rounded-[var(--malachite-radius-xxl,14px)]';\n        default:\n            return 'rounded-[var(--malachite-radius-xxl,14px)]';\n    }\n};\n\n// Figma pairs a 6px icon gap with the 13px tiers and 8px with the 15px tier.\nconst getIconGapClass = (size: ButtonSize, position: 'start' | 'end'): string => {\n    const start = position === 'start';\n    switch (size) {\n        case 'small':\n        case 'medium':\n            return start ? 'mr-[6px]' : 'ml-[6px]';\n        default:\n            return start ? 'mr-2' : 'ml-2';\n    }\n};\n\nconst getIconSizeClass = (size: ButtonSize): string => {\n    switch (size) {\n        case 'xsmall':\n            return '[&_svg]:size-[var(--malachite-icon-size-xsmall)]!';\n        case 'small':\n            return '[&_svg]:size-[var(--malachite-icon-size-small)]!';\n        case 'medium':\n            return '[&_svg]:size-[var(--malachite-icon-size-medium)]!';\n        case 'large':\n            return '[&_svg]:size-[var(--malachite-icon-size-large)]!';\n        default:\n            return '[&_svg]:size-[var(--malachite-icon-size-large)]!';\n    }\n};\n\nconst getRadiusClass = (radius: ButtonRadius): string => {\n    switch (radius) {\n        case 'md':\n            return 'rounded-md';\n        case 'lg':\n            return 'rounded-lg';\n        case 'xl':\n            return 'rounded-xl';\n        default:\n            return 'rounded-xl';\n    }\n};\n\n// Merged, never replaced: a caller's own `rel` must not drop `_blank`'s noopener/noreferrer.\nconst resolveRel = (\n    rel: string | undefined,\n    target: React.HTMLAttributeAnchorTarget | undefined,\n): string | undefined => {\n    if (target !== '_blank') return rel;\n\n    const tokens = new Set(rel?.split(/\\s+/).filter(Boolean));\n    tokens.add('noopener');\n    tokens.add('noreferrer');\n    return [...tokens].join(' ');\n};\n\n// Focus ring: a `focus-visible` outline (keyboard only), coloured to match the variant.\n// Uses `outline` rather than Tailwind's `ring-*` because ring composes `--tw-ring-*`\n// custom properties via box-shadow that rely on document-level @property registration\n// and silently don't paint inside a shadow root (same class of issue as transform\n// utilities). The classes are full literals so Tailwind's JIT can generate them.\nconst FOCUS_OUTLINE = {\n    neutral: 'focus-visible:[outline:2px_solid_var(--malachite-text-primary)]',\n    destructive: 'focus-visible:[outline:2px_solid_var(--malachite-text-destructive)]',\n    success: 'focus-visible:[outline:2px_solid_var(--malachite-text-success)]',\n    warning: 'focus-visible:[outline:2px_solid_var(--malachite-text-warning)]',\n    error: 'focus-visible:[outline:2px_solid_var(--malachite-text-error)]',\n    assistant: 'focus-visible:[outline:2px_solid_var(--malachite-assistant-foreground)]',\n};\n\nconst getVariantClasses = (variant: ButtonVariant, radiusClass: string): string => {\n    const baseClasses = `font-medium transition-[color,background-color,border-color,opacity,box-shadow] duration-200 ease-in-out outline-none focus-visible:outline-offset-2 border border-solid ${radiusClass} cursor-pointer`;\n\n    switch (variant) {\n        case 'filled':\n            return `${baseClasses} ${FOCUS_OUTLINE.neutral} btn-filled shadow-default`;\n\n        case 'outline':\n            return `${baseClasses} ${FOCUS_OUTLINE.neutral} btn-outline shadow-default`;\n\n        case 'surface':\n            return `${baseClasses} ${FOCUS_OUTLINE.neutral} btn-surface shadow-default`;\n\n        case 'assistant':\n            return `${baseClasses} ${FOCUS_OUTLINE.assistant} btn-assistant shadow-default`;\n\n        case 'destructive':\n            return `${baseClasses} ${FOCUS_OUTLINE.destructive} btn-destructive`;\n\n        case 'success':\n            return `${baseClasses} ${FOCUS_OUTLINE.success} btn-glass-success`;\n\n        case 'warning':\n            return `${baseClasses} ${FOCUS_OUTLINE.warning} btn-glass-warning`;\n\n        case 'error':\n            return `${baseClasses} ${FOCUS_OUTLINE.error} btn-glass-error`;\n\n        case 'ghost':\n            return `${baseClasses} ${FOCUS_OUTLINE.neutral} btn-ghost`;\n\n        case 'no-style':\n            return `${baseClasses} ${FOCUS_OUTLINE.neutral} btn-no-style border-none`;\n\n        default:\n            return `${baseClasses} ${FOCUS_OUTLINE.neutral} btn-filled shadow-default`;\n    }\n};\n\nconst LoadingSpinner = () => (\n    <svg\n        className=\"animate-spin -ml-1 mr-2 h-4 w-4\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n    >\n        <circle\n            className=\"opacity-25\"\n            cx=\"12\"\n            cy=\"12\"\n            r=\"10\"\n            stroke=\"currentColor\"\n            strokeWidth=\"4\"\n        />\n        <path\n            className=\"opacity-75\"\n            fill=\"currentColor\"\n            d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n        />\n    </svg>\n);\n\nexport const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonProps>(\n    (\n        {\n            variant,\n            size = 'large',\n            radius,\n            loading = false,\n            disabled = false,\n            icon,\n            iconPosition = 'start',\n            flexGrow = false,\n            fill = false,\n            tooltip,\n            tooltipPlacement = 'top',\n            iconOnly = false,\n            children,\n            className = '',\n            href,\n            target,\n            rel,\n            ...props\n        },\n        ref,\n    ) => {\n        const radiusClass = radius ? getRadiusClass(radius) : getDefaultRadiusClass(size, iconOnly);\n        const isInactive = disabled || loading;\n        const baseClasses = [\n            'flex items-center justify-center',\n            iconOnly ? `p-0 ${getIconOnlySizeClasses(size)}` : getSizeClasses(size),\n            getVariantClasses(variant, radiusClass),\n            flexGrow ? 'w-full' : '',\n            fill ? 'max-w-full' : '',\n            isInactive ? 'cursor-not-allowed' : '',\n            tooltip && isInactive ? 'pointer-events-none' : '',\n            className,\n        ]\n            .filter(Boolean)\n            .join(' ');\n\n        const renderContent = () => {\n            if (loading) {\n                return (\n                    <>\n                        <LoadingSpinner />\n                        {children}\n                    </>\n                );\n            }\n\n            const iconWrapperClasses = `inline-flex items-center shrink-0 ${getIconSizeClass(size)}`;\n\n            if (icon && iconPosition === 'start') {\n                return (\n                    <>\n                        <span\n                            className={`${iconWrapperClasses}${children ? ` ${getIconGapClass(size, 'start')}` : ''}`}\n                        >\n                            {icon}\n                        </span>\n                        {children}\n                    </>\n                );\n            }\n\n            if (icon && iconPosition === 'end') {\n                return (\n                    <>\n                        {children}\n                        <span\n                            className={`${iconWrapperClasses}${children ? ` ${getIconGapClass(size, 'end')}` : ''}`}\n                        >\n                            {icon}\n                        </span>\n                    </>\n                );\n            }\n\n            return children;\n        };\n\n        // An anchor cannot be disabled, so an inactive link still renders as a <button>.\n        const button =\n            href && !isInactive ? (\n                <a\n                    ref={ref as React.Ref<HTMLAnchorElement>}\n                    href={href}\n                    target={target}\n                    rel={resolveRel(rel, target)}\n                    className={baseClasses}\n                    {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n                >\n                    {renderContent()}\n                </a>\n            ) : (\n                <button\n                    ref={ref as React.Ref<HTMLButtonElement>}\n                    disabled={isInactive}\n                    className={baseClasses}\n                    {...props}\n                >\n                    {renderContent()}\n                </button>\n            );\n\n        if (tooltip) {\n            const trigger = isInactive ? (\n                <span className={`inline-flex cursor-not-allowed${flexGrow ? ' w-full' : ''}`}>\n                    {button}\n                </span>\n            ) : (\n                button\n            );\n            return (\n                <Tooltip text={tooltip} placement={tooltipPlacement} fill={flexGrow}>\n                    {trigger}\n                </Tooltip>\n            );\n        }\n\n        return button;\n    },\n);\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"names":["getSizeClasses","size","getIconOnlySizeClasses","getDefaultRadiusClass","iconOnly","getIconGapClass","position","start","getIconSizeClass","getRadiusClass","radius","resolveRel","rel","target","tokens","FOCUS_OUTLINE","getVariantClasses","variant","radiusClass","baseClasses","LoadingSpinner","jsxs","jsx","Button","forwardRef","loading","disabled","icon","iconPosition","flexGrow","fill","tooltip","tooltipPlacement","children","className","href","props","ref","isInactive","renderContent","Fragment","iconWrapperClasses","button","Tooltip"],"mappings":"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"}