@stackone/malachite 2.47.2 → 2.48.1

package/dist/components/Tag.js

@@ -1,11 +1,11 @@
-import { jsx as s, jsxs as W } from "react/jsx-runtime";
-import { useRef as S, useState as A, useCallback as B } from "react";
-import D from "./CustomIcons/DismissIcon.js";
-import { FOCUS_RING as L } from "./focusRing.js";
-import { activateOnEnterOrSpace as P } from "./keyboardActivation.js";
-import q from "./Tooltip.js";
-import { getTextColor as E } from "./Typography/textStyles.js";
-const G = (e) => {
+import { jsx as n, jsxs as F } from "react/jsx-runtime";
+import { useRef as C, useState as L, useCallback as W } from "react";
+import A from "./CustomIcons/DismissIcon.js";
+import { FOCUS_RING as B } from "./focusRing.js";
+import { activateOnEnterOrSpace as U } from "./keyboardActivation.js";
+import E from "./Tooltip.js";
+import { getTextColor as G } from "./Typography/textStyles.js";
+const P = (e) => {
   switch (e) {
     case "xsmall":
       return "text-[length:var(--malachite-font-size-xsmall)]";
@@ -16,7 +16,7 @@ const G = (e) => {
     default:
       return "text-xs";
   }
-}, K = (e) => {
+}, _ = (e) => {
   switch (e) {
     case "large":
       return "w-[88px]";
@@ -29,126 +29,122 @@ const G = (e) => {
     default:
       return "w-fit";
   }
-}, U = (e) => e === "compact" ? "px-[6px] py-[1px]" : "px-2 py-1", _ = (e) => ({
+}, q = (e) => e === "compact" ? "px-[6px] py-[1px]" : "px-2 py-1", K = (e) => ({
   borderRadius: e === "compact" ? "var(--malachite-radius-md)" : "var(--malachite-radius-lg)"
-}), H = (e, n, r) => {
-  const o = `inline-flex items-center justify-center ${U(n)} ${G(r)} font-medium leading-normal tracking-[0.11px]`, i = {
+}), H = (e, o, a) => {
+  const l = `inline-flex items-center justify-center ${q(o)} ${P(a)} font-medium leading-normal tracking-[0.11px]`, s = {
     primary: {
-      bg: "bg-[var(--malachite-tag-primary-background)]",
       text: "text-[var(--malachite-tag-primary-foreground)]"
     },
     secondary: {
-      bg: "bg-[var(--malachite-tag-secondary-background)]",
       text: "text-[var(--malachite-tag-secondary-foreground)]"
     },
     default: {
-      bg: "bg-[var(--malachite-tag-default-background)]",
       text: "text-[var(--malachite-tag-default-foreground)]"
     },
     error: {
-      bg: "bg-[var(--malachite-tag-error-background)]",
       text: "text-[var(--malachite-tag-error-foreground)]"
     },
     warning: {
-      bg: "bg-[var(--malachite-tag-warning-background)]",
       text: "text-[var(--malachite-tag-warning-foreground)]"
     },
     success: {
-      bg: "bg-[var(--malachite-tag-success-background)]",
       text: "text-[var(--malachite-tag-success-foreground)]"
     },
     emphasis: {
-      bg: "bg-[var(--malachite-tag-emphasis-background)]",
       text: "text-[var(--malachite-tag-emphasis-foreground)]"
     },
     info: {
-      bg: "bg-[var(--malachite-tag-info-background)]",
       text: "text-[var(--malachite-tag-info-foreground)]"
     },
     assistant: {
-      bg: "bg-[var(--malachite-tag-assistant-background)]",
       text: "text-[var(--malachite-tag-assistant-foreground)]"
     }
   }[e];
-  return [o, i.bg, i.text].filter(Boolean).join(" ");
-}, J = (e, n, r, o) => {
-  const a = {
-    ..._(o)
+  return [l, s.text].filter(Boolean).join(" ");
+}, J = "var(--malachite-ctx-tag-ground, transparent)", M = "var(--malachite-ctx-tag-cursor, default)", Q = (e, o, a, l) => {
+  const r = `var(--malachite-tag-${e}-background)`, s = {
+    ...K(l),
+    backgroundColor: J,
+    backgroundImage: `linear-gradient(${r}, ${r})`
   };
-  return n && (a.border = `2px solid var(--malachite-tag-${e}-border)`), e === "emphasis" ? a.boxShadow = "0px 0px 10px 0px var(--malachite-tag-emphasis-shadow)" : r && (a.boxShadow = `0 10px 15px -3px var(--malachite-tag-${e}-shadow)`), a;
-}, M = (e, n) => {
-  const r = new ResizeObserver(n);
-  return r.observe(e), r;
-}, ae = ({
+  return o && (s.border = `2px solid var(--malachite-tag-${e}-border)`), e === "emphasis" ? s.boxShadow = "0px 0px 10px 0px var(--malachite-tag-emphasis-shadow)" : a && (s.boxShadow = `0 10px 15px -3px var(--malachite-tag-${e}-shadow)`), s;
+}, V = (e, o) => {
+  const a = new ResizeObserver(o);
+  return a.observe(e), a;
+}, se = ({
   value: e,
-  fontSize: n,
-  type: r = "default",
-  bordered: o = !1,
-  onClick: a,
-  shadow: i = !1,
-  textTransform: u = "uppercase",
-  width: C,
-  paddingSize: g = "default",
-  icon: l,
-  iconPosition: d = "left",
-  iconColor: f,
-  pointerType: R = "default",
-  onRemove: p,
+  fontSize: o,
+  type: a = "default",
+  bordered: l = !1,
+  onClick: r,
+  shadow: s = !1,
+  textTransform: f = "uppercase",
+  width: $,
+  paddingSize: d = "default",
+  icon: i,
+  iconPosition: p = "left",
+  iconColor: x,
+  pointerType: m,
+  onRemove: g,
   className: N = ""
 }) => {
-  const x = f ? { color: E(f) } : void 0, m = S(null), c = S(null), [T, z] = A(!1), h = typeof e == "string" || typeof e == "number", $ = B((t) => {
-    var y;
-    if ((y = m.current) == null || y.disconnect(), m.current = null, c.current !== null && (cancelAnimationFrame(c.current), c.current = null), !t || typeof ResizeObserver > "u")
+  const h = x ? { color: G(x) } : void 0, u = C(null), c = C(null), [z, O] = L(!1), b = typeof e == "string" || typeof e == "number", j = W((t) => {
+    var w;
+    if ((w = u.current) == null || w.disconnect(), u.current = null, c.current !== null && (cancelAnimationFrame(c.current), c.current = null), !t || typeof ResizeObserver > "u")
       return;
-    const I = () => {
-      c.current = null, t.clientWidth !== 0 && z((w) => {
-        const k = t.scrollWidth > t.clientWidth;
-        return w === k ? w : k;
+    const D = () => {
+      c.current = null, t.clientWidth !== 0 && O((S) => {
+        const R = t.scrollWidth > t.clientWidth;
+        return S === R ? S : R;
       });
     }, v = () => {
-      c.current === null && (c.current = requestAnimationFrame(I));
+      c.current === null && (c.current = requestAnimationFrame(D));
     };
-    v(), m.current = M(t, v);
-  }, []), j = (t) => {
-    a && (t.stopPropagation(), t.preventDefault(), a());
-  }, O = [
-    K(C),
-    H(r, g, n),
-    u === "uppercase" ? "uppercase" : "normal-case",
-    a ? `cursor-pointer ${L}` : `cursor-${R}`,
-    h ? "min-w-0 max-w-full" : "",
+    v(), u.current = V(t, v);
+  }, []), k = (t) => {
+    r && (t.stopPropagation(), t.preventDefault(), r());
+  }, I = [
+    _($),
+    H(a, d, o),
+    f === "uppercase" ? "uppercase" : "normal-case",
+    r ? `cursor-pointer ${B}` : m ? `cursor-${m}` : "",
+    b ? "min-w-0 max-w-full" : "",
     N
-  ].filter(Boolean).join(" "), F = J(r, o, i, g), b = /* @__PURE__ */ W(
+  ].filter(Boolean).join(" "), T = {
+    ...Q(a, l, s, d),
+    ...!r && !m && { cursor: M }
+  }, y = /* @__PURE__ */ F(
     "span",
     {
-      className: O,
-      onClick: j,
-      tabIndex: a ? 0 : void 0,
-      onKeyDown: a ? (t) => P(t, a) : void 0,
-      style: F,
+      className: I,
+      onClick: k,
+      tabIndex: r ? 0 : void 0,
+      onKeyDown: r ? (t) => U(t, r) : void 0,
+      style: T,
       children: [
-        l && d === "left" && /* @__PURE__ */ s("span", { className: "mr-1 flex items-center", style: x, children: l }),
-        h ? /* @__PURE__ */ s("span", { className: "flex items-center min-w-0", children: /* @__PURE__ */ s("span", { ref: $, className: "block min-w-0 truncate", children: e }, String(e)) }) : /* @__PURE__ */ s("span", { className: "flex items-center", children: e }),
-        l && d === "right" && /* @__PURE__ */ s("span", { className: "ml-1 flex items-center", style: x, children: l }),
-        p && /* @__PURE__ */ s(
+        i && p === "left" && /* @__PURE__ */ n("span", { className: "mr-1 flex items-center", style: h, children: i }),
+        b ? /* @__PURE__ */ n("span", { className: "flex items-center min-w-0", children: /* @__PURE__ */ n("span", { ref: j, className: "block min-w-0 truncate", children: e }, String(e)) }) : /* @__PURE__ */ n("span", { className: "flex items-center", children: e }),
+        i && p === "right" && /* @__PURE__ */ n("span", { className: "ml-1 flex items-center", style: h, children: i }),
+        g && /* @__PURE__ */ n(
           "button",
           {
             type: "button",
             "aria-label": `Remove ${typeof e == "string" ? e : ""}`,
             onClick: (t) => {
-              t.stopPropagation(), p(t);
+              t.stopPropagation(), g(t);
             },
             className: "ml-0.5 flex items-center justify-center shrink-0 border-none bg-transparent text-current cursor-pointer p-0 leading-none opacity-70 hover:opacity-100",
-            children: /* @__PURE__ */ s(D, { size: 9 })
+            children: /* @__PURE__ */ n(A, { size: 9 })
           }
         )
       ]
     }
   );
-  return T ? /* @__PURE__ */ s(q, { text: e, placement: "top", wrapChildren: !1, isShrinkable: !0, triggerAs: "span", children: b }) : b;
+  return z ? /* @__PURE__ */ n(E, { text: e, placement: "top", wrapChildren: !1, isShrinkable: !0, triggerAs: "span", children: y }) : y;
 };
 export {
-  ae as Tag,
-  ae as default
+  se as Tag,
+  se as default
 };
 //# sourceMappingURL=Tag.js.map

package/dist/components/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../src/components/Tag.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from 'react';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport { FOCUS_RING } from './focusRing';\nimport { activateOnEnterOrSpace } from './keyboardActivation';\nimport Tooltip from './Tooltip';\nimport type { TextColor } from './Typography/Text';\nimport { getTextColor } from './Typography/textStyles';\n\nexport type TagType =\n    | 'primary'\n    | 'secondary'\n    | 'default'\n    | 'error'\n    | 'warning'\n    | 'success'\n    | 'emphasis'\n    | 'info'\n    /** Marks content a machine produced rather than a person — provenance, not severity. */\n    | 'assistant';\n\nexport type WidthSize = 'large' | 'medium' | 'small' | 'xsmall';\n\nexport type PaddingSize = 'default' | 'compact';\n\ntype TagFontSize = 'xsmall' | 'small' | 'medium';\n\ninterface TagProps {\n    value: string | number | React.ReactNode;\n    /** Defaults to 12px. Use `xsmall` for a secondary badge beside a primary one. */\n    fontSize?: TagFontSize;\n    type?: TagType;\n    bordered?: boolean;\n    shadow?: boolean;\n    textTransform?: 'none' | 'uppercase';\n    width?: WidthSize;\n    paddingSize?: PaddingSize;\n    icon?: React.ReactNode;\n    iconPosition?: 'left' | 'right';\n    iconColor?: TextColor;\n    pointerType?: 'pointer' | 'default';\n    onClick?: () => void;\n    onRemove?: (e: React.MouseEvent) => void;\n    className?: string;\n}\n\nconst getFontSizeClass = (fontSize?: TagFontSize): string => {\n    switch (fontSize) {\n        case 'xsmall':\n            return 'text-[length:var(--malachite-font-size-xsmall)]';\n        case 'small':\n            return 'text-[length:var(--malachite-font-size-small)]';\n        case 'medium':\n            return 'text-[length:var(--malachite-font-size-medium)]';\n        default:\n            return 'text-xs';\n    }\n};\n\nconst getWidthClasses = (width?: WidthSize): string => {\n    switch (width) {\n        case 'large':\n            return 'w-[88px]';\n        case 'medium':\n            return 'w-[44px]';\n        case 'small':\n            return 'w-[24px]';\n        case 'xsmall':\n            return 'w-[20px]';\n        default:\n            return 'w-fit';\n    }\n};\n\nconst getPaddingClasses = (paddingSize?: PaddingSize): string => {\n    return paddingSize === 'compact' ? 'px-[6px] py-[1px]' : 'px-2 py-1';\n};\n\nconst getBorderRadiusClasses = (paddingSize?: PaddingSize): React.CSSProperties => {\n    return {\n        borderRadius:\n            paddingSize === 'compact' ? 'var(--malachite-radius-md)' : 'var(--malachite-radius-lg)',\n    };\n};\n\nconst getTypeClasses = (\n    type: TagType,\n    paddingSize?: PaddingSize,\n    fontSize?: TagFontSize,\n) => {\n    const baseClasses = `inline-flex items-center justify-center ${getPaddingClasses(paddingSize)} ${getFontSizeClass(fontSize)} font-medium leading-normal tracking-[0.11px]`;\n\n    const typeStyles = {\n        primary: {\n            bg: 'bg-[var(--malachite-tag-primary-background)]',\n            text: 'text-[var(--malachite-tag-primary-foreground)]',\n        },\n        secondary: {\n            bg: 'bg-[var(--malachite-tag-secondary-background)]',\n            text: 'text-[var(--malachite-tag-secondary-foreground)]',\n        },\n        default: {\n            bg: 'bg-[var(--malachite-tag-default-background)]',\n            text: 'text-[var(--malachite-tag-default-foreground)]',\n        },\n        error: {\n            bg: 'bg-[var(--malachite-tag-error-background)]',\n            text: 'text-[var(--malachite-tag-error-foreground)]',\n        },\n        warning: {\n            bg: 'bg-[var(--malachite-tag-warning-background)]',\n            text: 'text-[var(--malachite-tag-warning-foreground)]',\n        },\n        success: {\n            bg: 'bg-[var(--malachite-tag-success-background)]',\n            text: 'text-[var(--malachite-tag-success-foreground)]',\n        },\n        emphasis: {\n            bg: 'bg-[var(--malachite-tag-emphasis-background)]',\n            text: 'text-[var(--malachite-tag-emphasis-foreground)]',\n        },\n        info: {\n            bg: 'bg-[var(--malachite-tag-info-background)]',\n            text: 'text-[var(--malachite-tag-info-foreground)]',\n        },\n        assistant: {\n            bg: 'bg-[var(--malachite-tag-assistant-background)]',\n            text: 'text-[var(--malachite-tag-assistant-foreground)]',\n        },\n    };\n\n    const style = typeStyles[type];\n    const classes = [baseClasses, style.bg, style.text].filter(Boolean);\n\n    return classes.join(' ');\n};\n\nconst getTypeStyles = (\n    type: TagType,\n    bordered?: boolean,\n    shadow?: boolean,\n    paddingSize?: PaddingSize,\n): React.CSSProperties => {\n    const styles: React.CSSProperties = {\n        ...getBorderRadiusClasses(paddingSize),\n    };\n\n    if (bordered) {\n        styles.border = `2px solid var(--malachite-tag-${type}-border)`;\n    }\n\n    if (type === 'emphasis') {\n        styles.boxShadow = '0px 0px 10px 0px var(--malachite-tag-emphasis-shadow)';\n    } else if (shadow) {\n        styles.boxShadow = `0 10px 15px -3px var(--malachite-tag-${type}-shadow)`;\n    }\n\n    return styles;\n};\n\nconst observeLabelSize = (el: HTMLSpanElement, onResize: () => void): ResizeObserver => {\n    const observer = new ResizeObserver(onResize);\n    observer.observe(el);\n    return observer;\n};\n\nconst Tag: React.FC<TagProps> = ({\n    value,\n    fontSize,\n    type = 'default',\n    bordered = false,\n    onClick,\n    shadow = false,\n    textTransform = 'uppercase',\n    width,\n    paddingSize = 'default',\n    icon,\n    iconPosition = 'left',\n    iconColor,\n    pointerType = 'default',\n    onRemove,\n    className = '',\n}) => {\n    const iconColorStyle = iconColor ? { color: getTextColor(iconColor) } : undefined;\n    const observerRef = useRef<ResizeObserver | null>(null);\n    const frameRef = useRef<number | null>(null);\n    const [isTruncated, setIsTruncated] = useState(false);\n\n    // Truncation applies to plain text labels; ReactNode values render untouched.\n    const isTextLabel = typeof value === 'string' || typeof value === 'number';\n\n    // Memoized so the ref keeps a stable identity. An inline ref callback would be\n    // re-invoked (null, then the node) on every render, tearing down and recreating\n    // the ResizeObserver each time; this way it only runs on mount/unmount.\n    const setLabelRef = useCallback((el: HTMLSpanElement | null) => {\n        observerRef.current?.disconnect();\n        observerRef.current = null;\n        if (frameRef.current !== null) {\n            cancelAnimationFrame(frameRef.current);\n            frameRef.current = null;\n        }\n        if (!el || typeof ResizeObserver === 'undefined') {\n            return;\n        }\n        const measure = (): void => {\n            frameRef.current = null;\n            if (el.clientWidth === 0) {\n                return;\n            }\n            setIsTruncated((prev) => {\n                const next = el.scrollWidth > el.clientWidth;\n                return prev === next ? prev : next;\n            });\n        };\n        const check = (): void => {\n            if (frameRef.current !== null) {\n                return;\n            }\n            frameRef.current = requestAnimationFrame(measure);\n        };\n        check();\n        observerRef.current = observeLabelSize(el, check);\n    }, []);\n\n    const handleClick = (e: React.MouseEvent) => {\n        if (onClick) {\n            e.stopPropagation();\n            e.preventDefault();\n            onClick();\n        }\n    };\n\n    const baseClasses = [\n        getWidthClasses(width),\n        getTypeClasses(type, paddingSize, fontSize),\n        textTransform === 'uppercase' ? 'uppercase' : 'normal-case',\n        onClick ? `cursor-pointer ${FOCUS_RING}` : `cursor-${pointerType}`,\n        isTextLabel ? 'min-w-0 max-w-full' : '',\n        className,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const typeStyles = getTypeStyles(type, bordered, shadow, paddingSize);\n\n    const tag = (\n        <span\n            className={baseClasses}\n            onClick={handleClick}\n            // No `role=\"button\"`: it takes presentational children, so a Tag carrying an\n            // `onRemove` close button would hide that button from assistive tech.\n            tabIndex={onClick ? 0 : undefined}\n            onKeyDown={onClick ? (event) => activateOnEnterOrSpace(event, onClick) : undefined}\n            style={typeStyles}\n        >\n            {icon && iconPosition === 'left' && (\n                <span className=\"mr-1 flex items-center\" style={iconColorStyle}>\n                    {icon}\n                </span>\n            )}\n            {isTextLabel ? (\n                <span className=\"flex items-center min-w-0\">\n                    <span key={String(value)} ref={setLabelRef} className=\"block min-w-0 truncate\">\n                        {value}\n                    </span>\n                </span>\n            ) : (\n                <span className=\"flex items-center\">{value}</span>\n            )}\n            {icon && iconPosition === 'right' && (\n                <span className=\"ml-1 flex items-center\" style={iconColorStyle}>\n                    {icon}\n                </span>\n            )}\n            {onRemove && (\n                <button\n                    type=\"button\"\n                    aria-label={`Remove ${typeof value === 'string' ? value : ''}`}\n                    onClick={(e) => {\n                        e.stopPropagation();\n                        onRemove(e);\n                    }}\n                    className=\"ml-0.5 flex items-center justify-center shrink-0 border-none bg-transparent text-current cursor-pointer p-0 leading-none opacity-70 hover:opacity-100\"\n                >\n                    {/* A bare cross, not `CloseIcon`'s circled one: this sits inside the chip\n                        it removes, where a second enclosing ring reads as an object of its own\n                        rather than as part of the label. */}\n                    <DismissIcon size={9} />\n                </button>\n            )}\n        </span>\n    );\n\n    if (!isTruncated) {\n        return tag;\n    }\n\n    return (\n        <Tooltip text={value} placement=\"top\" wrapChildren={false} isShrinkable triggerAs=\"span\">\n            {tag}\n        </Tooltip>\n    );\n};\n\nexport default Tag;\nexport { Tag };\nexport type { TagProps };\n"],"names":["getFontSizeClass","fontSize","getWidthClasses","width","getPaddingClasses","paddingSize","getBorderRadiusClasses","getTypeClasses","type","baseClasses","style","getTypeStyles","bordered","shadow","styles","observeLabelSize","el","onResize","observer","Tag","value","onClick","textTransform","icon","iconPosition","iconColor","pointerType","onRemove","className","iconColorStyle","getTextColor","observerRef","useRef","frameRef","isTruncated","setIsTruncated","useState","isTextLabel","setLabelRef","useCallback","_a","measure","prev","next","check","handleClick","e","FOCUS_RING","typeStyles","tag","jsxs","event","activateOnEnterOrSpace","jsx","DismissIcon","Tooltip"],"mappings":"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"}
+{"version":3,"file":"Tag.js","sources":["../../src/components/Tag.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from 'react';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport { FOCUS_RING } from './focusRing';\nimport { activateOnEnterOrSpace } from './keyboardActivation';\nimport Tooltip from './Tooltip';\nimport type { TextColor } from './Typography/Text';\nimport { getTextColor } from './Typography/textStyles';\n\nexport type TagType =\n    | 'primary'\n    | 'secondary'\n    | 'default'\n    | 'error'\n    | 'warning'\n    | 'success'\n    | 'emphasis'\n    | 'info'\n    /** Marks content a machine produced rather than a person — provenance, not severity. */\n    | 'assistant';\n\nexport type WidthSize = 'large' | 'medium' | 'small' | 'xsmall';\n\nexport type PaddingSize = 'default' | 'compact';\n\ntype TagFontSize = 'xsmall' | 'small' | 'medium';\n\ninterface TagProps {\n    value: string | number | React.ReactNode;\n    /** Defaults to 12px. Use `xsmall` for a secondary badge beside a primary one. */\n    fontSize?: TagFontSize;\n    type?: TagType;\n    bordered?: boolean;\n    shadow?: boolean;\n    textTransform?: 'none' | 'uppercase';\n    width?: WidthSize;\n    paddingSize?: PaddingSize;\n    icon?: React.ReactNode;\n    iconPosition?: 'left' | 'right';\n    iconColor?: TextColor;\n    /** The cursor over a tag that is not clickable. Unset, it is whatever an ancestor sets\n     *  through `--malachite-ctx-tag-cursor` (a `NavItem` row sets its pointer), else the arrow. */\n    pointerType?: 'pointer' | 'default';\n    onClick?: () => void;\n    onRemove?: (e: React.MouseEvent) => void;\n    className?: string;\n}\n\nconst getFontSizeClass = (fontSize?: TagFontSize): string => {\n    switch (fontSize) {\n        case 'xsmall':\n            return 'text-[length:var(--malachite-font-size-xsmall)]';\n        case 'small':\n            return 'text-[length:var(--malachite-font-size-small)]';\n        case 'medium':\n            return 'text-[length:var(--malachite-font-size-medium)]';\n        default:\n            return 'text-xs';\n    }\n};\n\nconst getWidthClasses = (width?: WidthSize): string => {\n    switch (width) {\n        case 'large':\n            return 'w-[88px]';\n        case 'medium':\n            return 'w-[44px]';\n        case 'small':\n            return 'w-[24px]';\n        case 'xsmall':\n            return 'w-[20px]';\n        default:\n            return 'w-fit';\n    }\n};\n\nconst getPaddingClasses = (paddingSize?: PaddingSize): string => {\n    return paddingSize === 'compact' ? 'px-[6px] py-[1px]' : 'px-2 py-1';\n};\n\nconst getBorderRadiusClasses = (paddingSize?: PaddingSize): React.CSSProperties => {\n    return {\n        borderRadius:\n            paddingSize === 'compact' ? 'var(--malachite-radius-md)' : 'var(--malachite-radius-lg)',\n    };\n};\n\nconst getTypeClasses = (\n    type: TagType,\n    paddingSize?: PaddingSize,\n    fontSize?: TagFontSize,\n) => {\n    const baseClasses = `inline-flex items-center justify-center ${getPaddingClasses(paddingSize)} ${getFontSizeClass(fontSize)} font-medium leading-normal tracking-[0.11px]`;\n\n    const typeStyles = {\n        primary: {\n            text: 'text-[var(--malachite-tag-primary-foreground)]',\n        },\n        secondary: {\n            text: 'text-[var(--malachite-tag-secondary-foreground)]',\n        },\n        default: {\n            text: 'text-[var(--malachite-tag-default-foreground)]',\n        },\n        error: {\n            text: 'text-[var(--malachite-tag-error-foreground)]',\n        },\n        warning: {\n            text: 'text-[var(--malachite-tag-warning-foreground)]',\n        },\n        success: {\n            text: 'text-[var(--malachite-tag-success-foreground)]',\n        },\n        emphasis: {\n            text: 'text-[var(--malachite-tag-emphasis-foreground)]',\n        },\n        info: {\n            text: 'text-[var(--malachite-tag-info-foreground)]',\n        },\n        assistant: {\n            text: 'text-[var(--malachite-tag-assistant-foreground)]',\n        },\n    };\n\n    const style = typeStyles[type];\n    const classes = [baseClasses, style.text].filter(Boolean);\n\n    return classes.join(' ');\n};\n\n/*\n * Context channels, not theme tokens: no palette value, not settable through `applyTheme`,\n * absent from `getCurrentTheme`. The ground goes under the tint, which is translucent and on\n * its own takes the colour of whatever is behind the tag, a row's hover or current tint included.\n */\nconst GROUND = 'var(--malachite-ctx-tag-ground, transparent)';\nconst IDLE_CURSOR = 'var(--malachite-ctx-tag-cursor, default)';\n\nconst getTypeStyles = (\n    type: TagType,\n    bordered?: boolean,\n    shadow?: boolean,\n    paddingSize?: PaddingSize,\n): React.CSSProperties => {\n    const tint = `var(--malachite-tag-${type}-background)`;\n    const styles: React.CSSProperties = {\n        ...getBorderRadiusClasses(paddingSize),\n        backgroundColor: GROUND,\n        backgroundImage: `linear-gradient(${tint}, ${tint})`,\n    };\n\n    if (bordered) {\n        styles.border = `2px solid var(--malachite-tag-${type}-border)`;\n    }\n\n    if (type === 'emphasis') {\n        styles.boxShadow = '0px 0px 10px 0px var(--malachite-tag-emphasis-shadow)';\n    } else if (shadow) {\n        styles.boxShadow = `0 10px 15px -3px var(--malachite-tag-${type}-shadow)`;\n    }\n\n    return styles;\n};\n\nconst observeLabelSize = (el: HTMLSpanElement, onResize: () => void): ResizeObserver => {\n    const observer = new ResizeObserver(onResize);\n    observer.observe(el);\n    return observer;\n};\n\nconst Tag: React.FC<TagProps> = ({\n    value,\n    fontSize,\n    type = 'default',\n    bordered = false,\n    onClick,\n    shadow = false,\n    textTransform = 'uppercase',\n    width,\n    paddingSize = 'default',\n    icon,\n    iconPosition = 'left',\n    iconColor,\n    pointerType,\n    onRemove,\n    className = '',\n}) => {\n    const iconColorStyle = iconColor ? { color: getTextColor(iconColor) } : undefined;\n    const observerRef = useRef<ResizeObserver | null>(null);\n    const frameRef = useRef<number | null>(null);\n    const [isTruncated, setIsTruncated] = useState(false);\n\n    // Truncation applies to plain text labels; ReactNode values render untouched.\n    const isTextLabel = typeof value === 'string' || typeof value === 'number';\n\n    // Memoized so the ref keeps a stable identity. An inline ref callback would be\n    // re-invoked (null, then the node) on every render, tearing down and recreating\n    // the ResizeObserver each time; this way it only runs on mount/unmount.\n    const setLabelRef = useCallback((el: HTMLSpanElement | null) => {\n        observerRef.current?.disconnect();\n        observerRef.current = null;\n        if (frameRef.current !== null) {\n            cancelAnimationFrame(frameRef.current);\n            frameRef.current = null;\n        }\n        if (!el || typeof ResizeObserver === 'undefined') {\n            return;\n        }\n        const measure = (): void => {\n            frameRef.current = null;\n            if (el.clientWidth === 0) {\n                return;\n            }\n            setIsTruncated((prev) => {\n                const next = el.scrollWidth > el.clientWidth;\n                return prev === next ? prev : next;\n            });\n        };\n        const check = (): void => {\n            if (frameRef.current !== null) {\n                return;\n            }\n            frameRef.current = requestAnimationFrame(measure);\n        };\n        check();\n        observerRef.current = observeLabelSize(el, check);\n    }, []);\n\n    const handleClick = (e: React.MouseEvent) => {\n        if (onClick) {\n            e.stopPropagation();\n            e.preventDefault();\n            onClick();\n        }\n    };\n\n    const baseClasses = [\n        getWidthClasses(width),\n        getTypeClasses(type, paddingSize, fontSize),\n        textTransform === 'uppercase' ? 'uppercase' : 'normal-case',\n        onClick ? `cursor-pointer ${FOCUS_RING}` : pointerType ? `cursor-${pointerType}` : '',\n        isTextLabel ? 'min-w-0 max-w-full' : '',\n        className,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const typeStyles = {\n        ...getTypeStyles(type, bordered, shadow, paddingSize),\n        ...(!onClick && !pointerType && { cursor: IDLE_CURSOR }),\n    };\n\n    const tag = (\n        <span\n            className={baseClasses}\n            onClick={handleClick}\n            // No `role=\"button\"`: it takes presentational children, so a Tag carrying an\n            // `onRemove` close button would hide that button from assistive tech.\n            tabIndex={onClick ? 0 : undefined}\n            onKeyDown={onClick ? (event) => activateOnEnterOrSpace(event, onClick) : undefined}\n            style={typeStyles}\n        >\n            {icon && iconPosition === 'left' && (\n                <span className=\"mr-1 flex items-center\" style={iconColorStyle}>\n                    {icon}\n                </span>\n            )}\n            {isTextLabel ? (\n                <span className=\"flex items-center min-w-0\">\n                    <span key={String(value)} ref={setLabelRef} className=\"block min-w-0 truncate\">\n                        {value}\n                    </span>\n                </span>\n            ) : (\n                <span className=\"flex items-center\">{value}</span>\n            )}\n            {icon && iconPosition === 'right' && (\n                <span className=\"ml-1 flex items-center\" style={iconColorStyle}>\n                    {icon}\n                </span>\n            )}\n            {onRemove && (\n                <button\n                    type=\"button\"\n                    aria-label={`Remove ${typeof value === 'string' ? value : ''}`}\n                    onClick={(e) => {\n                        e.stopPropagation();\n                        onRemove(e);\n                    }}\n                    className=\"ml-0.5 flex items-center justify-center shrink-0 border-none bg-transparent text-current cursor-pointer p-0 leading-none opacity-70 hover:opacity-100\"\n                >\n                    {/* A bare cross, not `CloseIcon`'s circled one: this sits inside the chip\n                        it removes, where a second enclosing ring reads as an object of its own\n                        rather than as part of the label. */}\n                    <DismissIcon size={9} />\n                </button>\n            )}\n        </span>\n    );\n\n    if (!isTruncated) {\n        return tag;\n    }\n\n    return (\n        <Tooltip text={value} placement=\"top\" wrapChildren={false} isShrinkable triggerAs=\"span\">\n            {tag}\n        </Tooltip>\n    );\n};\n\nexport default Tag;\nexport { Tag };\nexport type { TagProps };\n"],"names":["getFontSizeClass","fontSize","getWidthClasses","width","getPaddingClasses","paddingSize","getBorderRadiusClasses","getTypeClasses","type","baseClasses","style","GROUND","IDLE_CURSOR","getTypeStyles","bordered","shadow","tint","styles","observeLabelSize","el","onResize","observer","Tag","value","onClick","textTransform","icon","iconPosition","iconColor","pointerType","onRemove","className","iconColorStyle","getTextColor","observerRef","useRef","frameRef","isTruncated","setIsTruncated","useState","isTextLabel","setLabelRef","useCallback","_a","measure","prev","next","check","handleClick","e","FOCUS_RING","typeStyles","tag","jsxs","event","activateOnEnterOrSpace","jsx","DismissIcon","Tooltip"],"mappings":";;;;;;;AA+CA,MAAMA,IAAmB,CAACC,MAAmC;AACzD,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB,GAEMC,IAAkB,CAACC,MAA8B;AACnD,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB,GAEMC,IAAoB,CAACC,MAChBA,MAAgB,YAAY,sBAAsB,aAGvDC,IAAyB,CAACD,OACrB;AAAA,EACH,cACIA,MAAgB,YAAY,+BAA+B;AAAA,IAIjEE,IAAiB,CACnBC,GACAH,GACAJ,MACC;AACD,QAAMQ,IAAc,2CAA2CL,EAAkBC,CAAW,CAAC,IAAIL,EAAiBC,CAAQ,CAAC,iDAgCrHS,IA9Ba;AAAA,IACf,SAAS;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,IAEV,WAAW;AAAA,MACP,MAAM;AAAA,IAAA;AAAA,IAEV,SAAS;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,IAEV,OAAO;AAAA,MACH,MAAM;AAAA,IAAA;AAAA,IAEV,SAAS;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,IAEV,SAAS;AAAA,MACL,MAAM;AAAA,IAAA;AAAA,IAEV,UAAU;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,IAEV,MAAM;AAAA,MACF,MAAM;AAAA,IAAA;AAAA,IAEV,WAAW;AAAA,MACP,MAAM;AAAA,IAAA;AAAA,EACV,EAGqBF,CAAI;AAG7B,SAFgB,CAACC,GAAaC,EAAM,IAAI,EAAE,OAAO,OAAO,EAEzC,KAAK,GAAG;AAC3B,GAOMC,IAAS,gDACTC,IAAc,4CAEdC,IAAgB,CAClBL,GACAM,GACAC,GACAV,MACsB;AACtB,QAAMW,IAAO,uBAAuBR,CAAI,gBAClCS,IAA8B;AAAA,IAChC,GAAGX,EAAuBD,CAAW;AAAA,IACrC,iBAAiBM;AAAA,IACjB,iBAAiB,mBAAmBK,CAAI,KAAKA,CAAI;AAAA,EAAA;AAGrD,SAAIF,MACAG,EAAO,SAAS,iCAAiCT,CAAI,aAGrDA,MAAS,aACTS,EAAO,YAAY,0DACZF,MACPE,EAAO,YAAY,wCAAwCT,CAAI,aAG5DS;AACX,GAEMC,IAAmB,CAACC,GAAqBC,MAAyC;AACpF,QAAMC,IAAW,IAAI,eAAeD,CAAQ;AAC5C,SAAAC,EAAS,QAAQF,CAAE,GACZE;AACX,GAEMC,KAA0B,CAAC;AAAA,EAC7B,OAAAC;AAAA,EACA,UAAAtB;AAAA,EACA,MAAAO,IAAO;AAAA,EACP,UAAAM,IAAW;AAAA,EACX,SAAAU;AAAA,EACA,QAAAT,IAAS;AAAA,EACT,eAAAU,IAAgB;AAAA,EAChB,OAAAtB;AAAA,EACA,aAAAE,IAAc;AAAA,EACd,MAAAqB;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAChB,MAAM;AACF,QAAMC,IAAiBJ,IAAY,EAAE,OAAOK,EAAaL,CAAS,MAAM,QAClEM,IAAcC,EAA8B,IAAI,GAChDC,IAAWD,EAAsB,IAAI,GACrC,CAACE,GAAaC,CAAc,IAAIC,EAAS,EAAK,GAG9CC,IAAc,OAAOjB,KAAU,YAAY,OAAOA,KAAU,UAK5DkB,IAAcC,EAAY,CAACvB,MAA+B;;AAO5D,SANAwB,IAAAT,EAAY,YAAZ,QAAAS,EAAqB,cACrBT,EAAY,UAAU,MAClBE,EAAS,YAAY,SACrB,qBAAqBA,EAAS,OAAO,GACrCA,EAAS,UAAU,OAEnB,CAACjB,KAAM,OAAO,iBAAmB;AACjC;AAEJ,UAAMyB,IAAU,MAAY;AAExB,MADAR,EAAS,UAAU,MACfjB,EAAG,gBAAgB,KAGvBmB,EAAe,CAACO,MAAS;AACrB,cAAMC,IAAO3B,EAAG,cAAcA,EAAG;AACjC,eAAO0B,MAASC,IAAOD,IAAOC;AAAA,MAClC,CAAC;AAAA,IACL,GACMC,IAAQ,MAAY;AACtB,MAAIX,EAAS,YAAY,SAGzBA,EAAS,UAAU,sBAAsBQ,CAAO;AAAA,IACpD;AACA,IAAAG,EAAA,GACAb,EAAY,UAAUhB,EAAiBC,GAAI4B,CAAK;AAAA,EACpD,GAAG,CAAA,CAAE,GAECC,IAAc,CAACC,MAAwB;AACzC,IAAIzB,MACAyB,EAAE,gBAAA,GACFA,EAAE,eAAA,GACFzB,EAAA;AAAA,EAER,GAEMf,IAAc;AAAA,IAChBP,EAAgBC,CAAK;AAAA,IACrBI,EAAeC,GAAMH,GAAaJ,CAAQ;AAAA,IAC1CwB,MAAkB,cAAc,cAAc;AAAA,IAC9CD,IAAU,kBAAkB0B,CAAU,KAAKrB,IAAc,UAAUA,CAAW,KAAK;AAAA,IACnFW,IAAc,uBAAuB;AAAA,IACrCT;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAEPoB,IAAa;AAAA,IACf,GAAGtC,EAAcL,GAAMM,GAAUC,GAAQV,CAAW;AAAA,IACpD,GAAI,CAACmB,KAAW,CAACK,KAAe,EAAE,QAAQjB,EAAA;AAAA,EAAY,GAGpDwC,IACF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW5C;AAAA,MACX,SAASuC;AAAA,MAGT,UAAUxB,IAAU,IAAI;AAAA,MACxB,WAAWA,IAAU,CAAC8B,MAAUC,EAAuBD,GAAO9B,CAAO,IAAI;AAAA,MACzE,OAAO2B;AAAA,MAEN,UAAA;AAAA,QAAAzB,KAAQC,MAAiB,UACtB,gBAAA6B,EAAC,QAAA,EAAK,WAAU,0BAAyB,OAAOxB,GAC3C,UAAAN,EAAA,CACL;AAAA,QAEHc,sBACI,QAAA,EAAK,WAAU,6BACZ,UAAA,gBAAAgB,EAAC,QAAA,EAAyB,KAAKf,GAAa,WAAU,0BACjD,UAAAlB,EAAA,GADM,OAAOA,CAAK,CAEvB,EAAA,CACJ,IAEA,gBAAAiC,EAAC,QAAA,EAAK,WAAU,qBAAqB,UAAAjC,EAAA,CAAM;AAAA,QAE9CG,KAAQC,MAAiB,WACtB,gBAAA6B,EAAC,UAAK,WAAU,0BAAyB,OAAOxB,GAC3C,UAAAN,EAAA,CACL;AAAA,QAEHI,KACG,gBAAA0B;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,cAAY,UAAU,OAAOjC,KAAU,WAAWA,IAAQ,EAAE;AAAA,YAC5D,SAAS,CAAC0B,MAAM;AACZ,cAAAA,EAAE,gBAAA,GACFnB,EAASmB,CAAC;AAAA,YACd;AAAA,YACA,WAAU;AAAA,YAKV,UAAA,gBAAAO,EAACC,GAAA,EAAY,MAAM,EAAA,CAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MAC1B;AAAA,IAAA;AAAA,EAAA;AAKZ,SAAKpB,IAKD,gBAAAmB,EAACE,GAAA,EAAQ,MAAMnC,GAAO,WAAU,OAAM,cAAc,IAAO,cAAY,IAAC,WAAU,QAC7E,UAAA6B,GACL,IANOA;AAQf;"}

package/dist/components/buttonSizing.js

@@ -0,0 +1,30 @@
+const s = (e) => {
+  switch (e) {
+    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";
+  }
+}, a = (e) => {
+  switch (e) {
+    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)]!";
+  }
+};
+export {
+  s as getIconOnlySizeClasses,
+  a as getIconSizeClass
+};
+//# sourceMappingURL=buttonSizing.js.map

package/dist/components/buttonSizing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buttonSizing.js","sources":["../../src/components/buttonSizing.ts"],"sourcesContent":["import type { ButtonSize } from './Button';\n\n/** An icon-only button is a square on the control ladder; without this it collapses to the\n *  glyph plus its border. */\nexport const 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\nexport const 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"],"names":["getIconOnlySizeClasses","size","getIconSizeClass"],"mappings":"AAIO,MAAMA,IAAyB,CAACC,MAA6B;AAChE,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB,GAEaC,IAAmB,CAACD,MAA6B;AAC1D,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB;"}

package/dist/index.d.ts

@@ -1420,8 +1420,10 @@ export declare interface DropdownItem {
     rightSideText?: string;
     rightSideTextVariant?: 'muted' | 'primary';
     rightSideTextAlignment?: 'left' | 'right';
-    /** Right-aligned badge shown in the open menu only (not in the trigger or the search input). */
+    /** Badge shown in the open menu only (not in the trigger or the search input). */
     badge?: default_2.ReactNode;
+    /** Where the badge sits: the option's right end (default), or right after its label. */
+    badgePlacement?: 'end' | 'label';
 }
 
 export declare type DropdownProps = DropdownBaseProps & DropdownTriggerModeProps;
@@ -1720,6 +1722,19 @@ export declare function getCurrentThemeMode(): 'light' | 'dark';
 
 export declare const GlobeIcon: React.FC<IconProps_56>;
 
+/** A non-interactive icon carrying a meaning, for where an icon button would offer nothing to do. */
+export declare const IconIndicator: default_2.FC<IconIndicatorProps>;
+
+export declare interface IconIndicatorProps {
+    icon: default_2.ReactNode;
+    /** The indicator's only text for assistive tech; it renders as `role="img"`. */
+    'aria-label': string;
+    tooltip?: string;
+    /** Matches `Button`'s `iconOnly` square, so an indicator lines up with icon buttons beside it. */
+    size?: ButtonSize;
+    className?: string;
+}
+
 declare interface IconProps {
     size?: number | string;
     className?: string;
@@ -4750,6 +4765,8 @@ export declare interface TagProps {
     icon?: default_2.ReactNode;
     iconPosition?: 'left' | 'right';
     iconColor?: TextColor;
+    /** The cursor over a tag that is not clickable. Unset, it is whatever an ancestor sets
+     *  through `--malachite-ctx-tag-cursor` (a `NavItem` row sets its pointer), else the arrow. */
     pointerType?: 'pointer' | 'default';
     onClick?: () => void;
     onRemove?: (e: default_2.MouseEvent) => void;