@stackone/malachite 2.20.1 → 2.22.0

package/dist/components/Tag.js

@@ -0,0 +1,154 @@
+import { jsx as s, jsxs as W } from "react/jsx-runtime";
+import { useRef as S, useState as B, useCallback as D } from "react";
+import L from "./CustomIcons/DismissIcon.js";
+import { FOCUS_RING as A } 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) => {
+  switch (e) {
+    case "xsmall":
+      return "text-[length:var(--malachite-font-size-xsmall)]";
+    case "small":
+      return "text-[length:var(--malachite-font-size-small)]";
+    case "medium":
+      return "text-[length:var(--malachite-font-size-medium)]";
+    default:
+      return "text-xs";
+  }
+}, K = (e) => {
+  switch (e) {
+    case "large":
+      return "w-[88px]";
+    case "medium":
+      return "w-[44px]";
+    case "small":
+      return "w-[24px]";
+    case "xsmall":
+      return "w-[20px]";
+    default:
+      return "w-fit";
+  }
+}, U = (e) => e === "compact" ? "px-[6px] py-[1px]" : "px-2 py-1", _ = (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 = {
+    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 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 = ({
+  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,
+  className: N = ""
+}) => {
+  const x = f ? { color: E(f) } : void 0, m = S(null), c = S(null), [T, z] = B(!1), h = typeof e == "string" || typeof e == "number", $ = D((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")
+      return;
+    const I = () => {
+      c.current = null, t.clientWidth !== 0 && z((w) => {
+        const k = t.scrollWidth > t.clientWidth;
+        return w === k ? w : k;
+      });
+    }, v = () => {
+      c.current === null && (c.current = requestAnimationFrame(I));
+    };
+    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 ${A}` : `cursor-${R}`,
+    h ? "min-w-0 max-w-full" : "",
+    N
+  ].filter(Boolean).join(" "), F = J(r, o, i, g), b = /* @__PURE__ */ W(
+    "div",
+    {
+      className: O,
+      onClick: j,
+      tabIndex: a ? 0 : void 0,
+      onKeyDown: a ? (t) => P(t, a) : void 0,
+      style: F,
+      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(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Remove ${typeof e == "string" ? e : ""}`,
+            onClick: (t) => {
+              t.stopPropagation(), p(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(L, { size: 9 })
+          }
+        )
+      ]
+    }
+  );
+  return T ? /* @__PURE__ */ s(q, { text: e, placement: "top", wrapChildren: !1, isShrinkable: !0, children: b }) : b;
+};
+export {
+  ae as Tag,
+  ae as default
+};
+//# sourceMappingURL=Tag.js.map

package/dist/components/Tag.js.map

@@ -0,0 +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        <div\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        </div>\n    );\n\n    if (!isTruncated) {\n        return tag;\n    }\n\n    return (\n        <Tooltip text={value} placement=\"top\" wrapChildren={false} isShrinkable>\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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"}

package/dist/components/TextArea/TextArea.js

@@ -0,0 +1,289 @@
+import { jsx as a, jsxs as h, Fragment as fe } from "react/jsx-runtime";
+import { useState as ue, useRef as pe, useCallback as ge, useLayoutEffect as be } from "react";
+import we, { useFormFieldIds as ye } from "../BaseFormComponent.js";
+import { Button as Ne } from "../Button.js";
+import Ie from "../CustomIcons/CopyIcon.js";
+import He from "../CustomIcons/InfoIcon.js";
+import { FieldMessage as je } from "../FieldMessage.js";
+import { paintedFieldValue as ke } from "../devWarning.js";
+const ze = (t) => {
+  switch (t) {
+    case "small":
+      return "text-sm";
+    case "medium":
+      return "text-[length:var(--malachite-font-size-15,15px)] leading-[1.4]";
+    case "large":
+      return "text-base";
+    default:
+      return "text-[length:var(--malachite-font-size-15,15px)] leading-[1.4]";
+  }
+}, Ce = (t, e) => t ? "focus-within:border-[var(--malachite-destructive-border-hover)] hover:border-[var(--malachite-destructive-border-hover)]" : e === "assistant" ? "focus-within:border-[var(--malachite-assistant-foreground)] hover:border-[var(--malachite-assistant-foreground)]" : "focus-within:border-[var(--malachite-control-border-hover)] hover:border-[var(--malachite-control-border-hover)]", Q = (t, e) => ({
+  small: 20,
+  medium: 22,
+  large: 24
+})[t] * e + 24, R = (t, e) => `${Q(t, e)}px`, Ge = ({
+  label: t,
+  hint: e,
+  tooltip: l,
+  placeholder: o,
+  icon: A,
+  name: f,
+  required: M,
+  requiredIndicator: U,
+  error: T,
+  description: $,
+  loading: V = !1,
+  readOnly: L = !1,
+  size: d = "medium",
+  defaultValue: P,
+  disabled: c,
+  prefixValue: u,
+  prefixSecondaryValue: p,
+  // ellipsis = false,
+  formControl: B,
+  buttons: x,
+  onCopyClick: E,
+  onChange: g,
+  onKeyDown: W,
+  inFieldAction: b,
+  tone: X = "default",
+  value: w,
+  onBlur: y,
+  helperText: N,
+  rows: I = 4,
+  maxRows: H,
+  maxLength: Z,
+  resize: j = "vertical",
+  wrap: S = !0,
+  id: _,
+  "aria-label": O,
+  "aria-labelledby": F
+}) => {
+  const { controlId: Y, labelId: ee, descriptionId: q, hintId: D, helperTextId: k } = ye({
+    id: _,
+    label: t,
+    description: $,
+    hint: e,
+    helperText: !0
+  }), [te, re] = ue(P || ""), G = pe(null), z = ge(() => {
+    const r = G.current;
+    if (!r || H === void 0)
+      return;
+    const s = Q(d, H);
+    r.style.height = "auto";
+    const i = Math.min(r.scrollHeight, s);
+    r.style.height = `${i}px`, r.style.overflowY = r.scrollHeight > s ? "auto" : "hidden";
+  }, [H, d]);
+  be(() => {
+    z();
+  }, [z, w]);
+  const ae = w !== void 0, ie = (r) => ke({
+    component: "TextArea",
+    name: f,
+    value: w,
+    formValue: r,
+    defaultValue: P,
+    bound: !!B,
+    uncontrolledValue: te
+  }), le = (r) => (s) => {
+    const i = s.target.value;
+    ae || re(i), z(), g == null || g(i), r == null || r(i);
+  }, se = A || u || p, J = `${k}-error`, ne = (r, s, i, m, v, C) => {
+    const n = ie(C), K = r && !v, ce = K || E && c && n || (x == null ? void 0 : x.length), me = [
+      q,
+      D,
+      s ? k : void 0,
+      v ? J : void 0
+    ].filter(Boolean).join(" ") || void 0, he = [
+      "relative",
+      "flex",
+      "w-full",
+      "rounded-xl",
+      "border border-solid",
+      c ? "bg-[var(--malachite-card-dimmed-background)]" : "bg-[var(--malachite-card-background)]",
+      "transition-colors duration-200 ease-in-out",
+      r ? "shadow-error" : "shadow-default",
+      r ? "border-[var(--malachite-destructive-border)]" : "border-[var(--malachite-card-border)]",
+      // One border-hover colour, not two overlapping utilities for the same states: a
+      // duplicate pair used to sit above this one, fixed at the default accent — since
+      // it targeted the identical `focus-within`/`hover` selectors, a `tone` swap here
+      // would otherwise leave a second, conflicting colour in the class list.
+      //
+      // No separate ring on top of it: the recoloured border IS this field's focus
+      // indicator, the same as the default tone's. Adding a ring here drew a second,
+      // concentric outline around the first on `assistant` — the field already has one,
+      // it only needed to change colour.
+      c ? "" : Ce(r, X)
+    ].filter(Boolean).join(" "), xe = [
+      "flex-1",
+      "bg-transparent",
+      "border-none",
+      "outline-none",
+      "text-[var(--malachite-text-primary)]",
+      "placeholder:text-[var(--malachite-text-placeholder)]",
+      "disabled:text-[var(--malachite-text-dimmed)]",
+      "disabled:cursor-not-allowed",
+      ze(d),
+      // Emitted as one side each when an action sits in the field: `px` and `pr` are
+      // the same specificity, so which wins would rest on Tailwind's output order.
+      b ? "pl-[16px] pr-[52px]" : "px-[16px]",
+      "py-[12px]",
+      j === "none" ? "resize-none" : j === "vertical" ? "resize-y" : j === "horizontal" ? "resize-x" : "resize",
+      S ? "" : "whitespace-pre overflow-x-auto min-w-0"
+    ].filter(Boolean).join(" "), ve = /* @__PURE__ */ a(
+      "textarea",
+      {
+        ref: G,
+        id: Y,
+        placeholder: o,
+        value: n,
+        onChange: le(i),
+        onBlur: () => {
+          y == null || y(), m == null || m();
+        },
+        onKeyDown: W,
+        "aria-label": O,
+        "aria-labelledby": F,
+        "aria-invalid": r || void 0,
+        "aria-required": M || void 0,
+        "aria-describedby": me,
+        disabled: c || !!u || !!p || L,
+        readOnly: L,
+        wrap: S ? void 0 : "off",
+        rows: I,
+        maxLength: Z,
+        style: { minHeight: R(d, I) },
+        className: xe,
+        name: f
+      }
+    );
+    return /* @__PURE__ */ h("div", { className: he, children: [
+      se && /* @__PURE__ */ a("div", { className: "flex pt-3 pl-3 pr-1 flex-shrink-0 pointer-events-none", children: /* @__PURE__ */ a(
+        Me,
+        {
+          prefixValue: u,
+          prefixSecondaryValue: p,
+          icon: A
+        }
+      ) }),
+      ve,
+      b && /* @__PURE__ */ a("div", { className: "absolute bottom-2 right-2 flex items-center", children: b }),
+      ce && /* @__PURE__ */ h("div", { className: "flex pt-3 pl-1 pr-3 flex-shrink-0", children: [
+        /* @__PURE__ */ a(
+          Te,
+          {
+            error: K,
+            disabled: c,
+            defaultValue: n,
+            onCopyClick: E
+          }
+        ),
+        /* @__PURE__ */ a($e, { buttons: x })
+      ] })
+    ] });
+  }, oe = () => N ? /* @__PURE__ */ a(
+    "div",
+    {
+      id: k,
+      className: "text-[length:var(--malachite-font-size-small,13px)] text-left pl-2 text-[var(--malachite-text-dimmed,rgb(161,161,161))]",
+      children: N
+    }
+  ) : null, de = (r) => /* @__PURE__ */ a(je, { id: J, message: r, spaced: !0 });
+  return /* @__PURE__ */ a(
+    we,
+    {
+      label: t,
+      hint: e,
+      tooltip: l,
+      name: f,
+      required: M,
+      requiredIndicator: U,
+      loading: V,
+      formControl: B,
+      description: $,
+      controlId: Y,
+      labelId: ee,
+      descriptionId: q,
+      hintId: D,
+      loadingComponent: /* @__PURE__ */ a(Ae, { size: d, rows: I }),
+      children: ({ error: r, message: s, onFieldChange: i, onFieldBlur: m, value: v }) => {
+        const C = T ?? r, n = T === !1 ? void 0 : s;
+        return /* @__PURE__ */ h(fe, { children: [
+          ne(
+            C,
+            N,
+            i,
+            m,
+            n,
+            v
+          ),
+          oe(),
+          de(n)
+        ] });
+      }
+    }
+  );
+}, Ae = ({
+  size: t = "medium",
+  rows: e = 4
+}) => (
+  // Decorative height placeholder — kept out of the a11y tree so it is not announced
+  // as an unlabelled box (same as Skeleton and LoadingInput).
+  /* @__PURE__ */ a(
+    "div",
+    {
+      "aria-busy": "true",
+      "aria-hidden": "true",
+      className: "w-full rounded-xl border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-border)] flex items-center justify-center shadow-[var(--malachite-shadow-default)]",
+      style: { minHeight: R(t, e) }
+    }
+  )
+), Me = ({ prefixValue: t, prefixSecondaryValue: e, icon: l }) => /* @__PURE__ */ h("div", { className: "flex items-start gap-1", children: [
+  l && /* @__PURE__ */ a("span", { className: "flex items-center justify-center text-[var(--malachite-text-dimmed)] w-4 h-4 flex-shrink-0 mt-1", children: l }),
+  t && /* @__PURE__ */ a("span", { className: "text-[length:var(--malachite-font-size-15,15px)] leading-[1.4] text-[var(--malachite-text-dimmed)] whitespace-nowrap", children: t }),
+  e && /* @__PURE__ */ a("span", { className: "text-[length:var(--malachite-font-size-15,15px)] leading-[1.4] text-[var(--malachite-text-dimmed)] whitespace-nowrap", children: e })
+] }), Te = ({ error: t, disabled: e, defaultValue: l, onCopyClick: o }) => /* @__PURE__ */ h("div", { className: "flex items-start gap-1", children: [
+  t && // Decorative: the rejection is carried by the message beneath the field.
+  /* @__PURE__ */ a(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "flex items-center justify-center w-5 h-5 flex-shrink-0 mt-1",
+      children: /* @__PURE__ */ a(
+        He,
+        {
+          size: 16,
+          className: "text-[var(--malachite-destructive-foreground,rgb(196,62,62))]"
+        }
+      )
+    }
+  ),
+  o && e && l && /* @__PURE__ */ a(
+    "button",
+    {
+      onClick: () => {
+        navigator.clipboard.writeText(l), o();
+      },
+      type: "button",
+      "aria-label": "Copy to clipboard",
+      className: "flex items-center justify-center w-5 h-5 hover:bg-[var(--malachite-primary-border)] rounded transition-colors flex-shrink-0 mt-1",
+      children: /* @__PURE__ */ a(Ie, { size: 16 })
+    }
+  )
+] }), $e = ({ buttons: t }) => t != null && t.length ? /* @__PURE__ */ a("div", { className: "flex flex-col gap-1 mt-1", children: t.map((e) => /* @__PURE__ */ a(
+  Ne,
+  {
+    variant: e.danger ? "destructive" : "outline",
+    size: "small",
+    disabled: e.disabled,
+    icon: e.icon,
+    tooltip: e.tooltip,
+    onClick: e.onClick,
+    children: e.label
+  },
+  e.label
+)) }) : null;
+export {
+  Ge as default
+};
+//# sourceMappingURL=TextArea.js.map

package/dist/components/TextArea/TextArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextArea.js","sources":["../../../src/components/TextArea/TextArea.tsx"],"sourcesContent":["import React, { useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport type { Control, FieldPath, FieldValues } from 'react-hook-form';\nimport BaseFormComponent, { type RequiredIndicator, useFormFieldIds } from '../BaseFormComponent';\nimport { Button } from '../Button';\nimport CopyIcon from '../CustomIcons/CopyIcon';\nimport InfoIcon from '../CustomIcons/InfoIcon';\nimport FieldMessage from '../FieldMessage';\nimport { paintedFieldValue } from '../devWarning';\nimport type { ButtonDefinition, TextAreaSize } from './types';\n\n/**\n * `assistant` is the chrome for a field sitting in an AI context (e.g. `Chat.Composer`'s\n * policy-assistant tone): the field's own focus border recolours to the assistant violet\n * instead of the default accent — same indicator, different colour, not an extra one. Same\n * naming precedent as `PillButton`'s own `tone`.\n */\ntype TextAreaTone = 'default' | 'assistant';\n\ninterface TextAreaProps {\n    label?: string;\n    hint?: string;\n    tooltip?: string;\n    placeholder?: string;\n    icon?: React.ReactNode;\n    readOnly?: boolean;\n    name: FieldPath<FieldValues> | string;\n    description?: string;\n    size?: TextAreaSize;\n    required?: boolean;\n    requiredIndicator?: RequiredIndicator;\n    error?: boolean;\n    loading?: boolean;\n    defaultValue?: string;\n    disabled?: boolean;\n    prefixValue?: string;\n    prefixSecondaryValue?: string;\n    ellipsis?: boolean;\n    formControl?: Control<FieldValues, unknown>;\n    buttons?: ButtonDefinition[];\n    onCopyClick?: () => void;\n    onChange?: (value: string) => void;\n    value?: string;\n    onBlur?: () => void;\n    /** Key handling the control cannot own, e.g. Enter-to-submit in a chat composer. */\n    onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n    /**\n     * A control that belongs inside the field, pinned bottom-right — a chat composer's send.\n     * The field reserves room for it, so text cannot run underneath.\n     */\n    inFieldAction?: React.ReactNode;\n    /** See `TextAreaTone`. Defaults to `'default'`, so no existing field changes. */\n    tone?: TextAreaTone;\n    helperText?: string;\n    rows?: number;\n    /**\n     * Grows the field from `rows` up to this many lines as content is typed, then scrolls\n     * internally rather than growing further. Omitted keeps the field at a fixed `rows`\n     * height, the pre-existing behaviour.\n     */\n    maxRows?: number;\n    maxLength?: number;\n    resize?: 'none' | 'vertical' | 'horizontal' | 'both';\n    /**\n     * When false, lines are not soft-wrapped — long content scrolls horizontally\n     * instead of wrapping (native `wrap=\"off\"`). Useful for one-value-per-line\n     * content like URLs. Defaults to true.\n     */\n    wrap?: boolean;\n    id?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n}\n\nconst getSizeClasses = (size: TextAreaSize): string => {\n    switch (size) {\n        case 'small':\n            return 'text-sm';\n        case 'medium':\n            return 'text-[length:var(--malachite-font-size-15,15px)] leading-[1.4]';\n        case 'large':\n            return 'text-base';\n        default:\n            return 'text-[length:var(--malachite-font-size-15,15px)] leading-[1.4]';\n    }\n};\n\n/**\n * A rejection always wins the border colour, regardless of `tone`: a field the caller has\n * flagged invalid stays destructive-red on focus even inside an assistant surface.\n *\n * Each branch spells its two classes out in full rather than interpolating a shared colour\n * variable into them. Tailwind extracts candidates by scanning source text, so a class built\n * at runtime is one Tailwind never sees — and the CSS is simply absent, with no build error.\n * The assistant pair was surviving only because the same literal appears in a spec's\n * assertion, which the content glob also scans: rewording that assertion would have silently\n * dropped the violet focus border.\n */\nconst focusBorderClasses = (isError: boolean, tone: TextAreaTone): string => {\n    if (isError) {\n        return 'focus-within:border-[var(--malachite-destructive-border-hover)] hover:border-[var(--malachite-destructive-border-hover)]';\n    }\n\n    if (tone === 'assistant') {\n        return 'focus-within:border-[var(--malachite-assistant-foreground)] hover:border-[var(--malachite-assistant-foreground)]';\n    }\n\n    return 'focus-within:border-[var(--malachite-control-border-hover)] hover:border-[var(--malachite-control-border-hover)]';\n};\n\n// Shared by the static min-height and the auto-grow ceiling, so a field's grown height\n// lines up with the same row metrics its resting height already used.\nconst rowHeightPx = (size: TextAreaSize, rows: number): number => {\n    const baseHeight = {\n        small: 20,\n        medium: 22,\n        large: 24,\n    }[size];\n\n    // Every size renders `py-[12px]`, so the vertical padding is 24 regardless of size.\n    const padding = 24;\n\n    return baseHeight * rows + padding;\n};\n\nconst getMinHeight = (size: TextAreaSize, rows: number): string => `${rowHeightPx(size, rows)}px`;\n\nconst TextArea: React.FC<TextAreaProps> = ({\n    label,\n    hint,\n    tooltip,\n    placeholder,\n    icon,\n    name,\n    required,\n    requiredIndicator,\n    error,\n    description,\n    loading = false,\n    readOnly = false,\n    size = 'medium',\n    defaultValue,\n    disabled,\n    prefixValue,\n    prefixSecondaryValue,\n    // ellipsis = false,\n    formControl,\n    buttons,\n    onCopyClick,\n    onChange,\n    onKeyDown,\n    inFieldAction,\n    tone = 'default',\n    value,\n    onBlur,\n    helperText,\n    rows = 4,\n    maxRows,\n    maxLength,\n    resize = 'vertical',\n    wrap = true,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n}) => {\n    const { controlId, labelId, descriptionId, hintId, helperTextId } = useFormFieldIds({\n        id,\n        label,\n        description,\n        hint,\n        helperText: true,\n    });\n    const [internalValue, setInternalValue] = useState(defaultValue || '');\n    const textareaRef = useRef<HTMLTextAreaElement | null>(null);\n\n    // Reset-then-measure rather than growing incrementally: `scrollHeight` on a field already\n    // taller than its content stays stuck at that height, so the reset is what lets a paste\n    // followed by a delete shrink the field back down, not just grow it. Mutates the DOM\n    // directly instead of round-tripping through React state, so typing a character never\n    // re-renders this component just to change its own height.\n    const resizeToFit = useCallback(() => {\n        const el = textareaRef.current;\n        if (!el || maxRows === undefined) {\n            return;\n        }\n\n        const maxHeight = rowHeightPx(size, maxRows);\n        el.style.height = 'auto';\n        const nextHeight = Math.min(el.scrollHeight, maxHeight);\n        el.style.height = `${nextHeight}px`;\n        el.style.overflowY = el.scrollHeight > maxHeight ? 'auto' : 'hidden';\n    }, [maxRows, size]);\n\n    // Catches every change `onChange` on the element itself would miss: the initial mount,\n    // and a value the parent sets from outside (e.g. clearing the composer after send).\n    // biome-ignore lint/correctness/useExhaustiveDependencies: `value` is not read in the body, but a controlled `value` changing from outside is exactly the case `onChange` cannot see, so the effect has to re-run on it anyway.\n    useLayoutEffect(() => {\n        resizeToFit();\n    }, [resizeToFit, value]);\n\n    const isControlled = value !== undefined;\n    const paintedValue = (formValue: unknown): string =>\n        paintedFieldValue({\n            component: 'TextArea',\n            name,\n            value,\n            formValue,\n            defaultValue,\n            bound: !!formControl,\n            uncontrolledValue: internalValue,\n        });\n\n    const handleChange =\n        (reportToForm?: (value: unknown) => void) =>\n        (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n            const newValue = e.target.value;\n            if (!isControlled) {\n                setInternalValue(newValue);\n            }\n            // The browser has already applied the keystroke to the element by the time this\n            // fires, so `scrollHeight` already reflects it — no need to wait for a re-render.\n            resizeToFit();\n            onChange?.(newValue);\n            reportToForm?.(newValue);\n        };\n\n    const hasPrefix = icon || prefixValue || prefixSecondaryValue;\n\n    const errorMessageId = `${helperTextId}-error`;\n\n    const renderTextArea = (\n        isError: boolean,\n        resolvedHelperText?: string,\n        onFieldChange?: (value: unknown) => void,\n        onFieldBlur?: () => void,\n        errorMessage?: string,\n        formValue?: unknown,\n    ) => {\n        const textAreaValue = paintedValue(formValue);\n        // The icon is the only signal a consumer-forced `error` has; beside a message it is\n        // duplication, and it crowds the suffix next to a reveal or copy control.\n        const showErrorIcon = isError && !errorMessage;\n        const hasSuffix =\n            showErrorIcon || (onCopyClick && disabled && textAreaValue) || buttons?.length;\n        const describedBy =\n            [\n                descriptionId,\n                hintId,\n                resolvedHelperText ? helperTextId : undefined,\n                errorMessage ? errorMessageId : undefined,\n            ]\n                .filter(Boolean)\n                .join(' ') || undefined;\n        const wrapperClasses = [\n            'relative',\n            'flex',\n            'w-full',\n            'rounded-xl',\n            'border border-solid',\n            disabled\n                ? 'bg-[var(--malachite-card-dimmed-background)]'\n                : 'bg-[var(--malachite-card-background)]',\n            'transition-colors duration-200 ease-in-out',\n            isError ? 'shadow-error' : 'shadow-default',\n            isError\n                ? 'border-[var(--malachite-destructive-border)]'\n                : 'border-[var(--malachite-card-border)]',\n            // One border-hover colour, not two overlapping utilities for the same states: a\n            // duplicate pair used to sit above this one, fixed at the default accent — since\n            // it targeted the identical `focus-within`/`hover` selectors, a `tone` swap here\n            // would otherwise leave a second, conflicting colour in the class list.\n            //\n            // No separate ring on top of it: the recoloured border IS this field's focus\n            // indicator, the same as the default tone's. Adding a ring here drew a second,\n            // concentric outline around the first on `assistant` — the field already has one,\n            // it only needed to change colour.\n            disabled ? '' : focusBorderClasses(isError, tone),\n        ]\n            .filter(Boolean)\n            .join(' ');\n\n        const textAreaClasses = [\n            'flex-1',\n            'bg-transparent',\n            'border-none',\n            'outline-none',\n            'text-[var(--malachite-text-primary)]',\n            'placeholder:text-[var(--malachite-text-placeholder)]',\n            'disabled:text-[var(--malachite-text-dimmed)]',\n            'disabled:cursor-not-allowed',\n            getSizeClasses(size),\n            // Emitted as one side each when an action sits in the field: `px` and `pr` are\n            // the same specificity, so which wins would rest on Tailwind's output order.\n            inFieldAction ? 'pl-[16px] pr-[52px]' : 'px-[16px]',\n            'py-[12px]',\n            resize === 'none'\n                ? 'resize-none'\n                : resize === 'vertical'\n                  ? 'resize-y'\n                  : resize === 'horizontal'\n                    ? 'resize-x'\n                    : 'resize',\n            wrap ? '' : 'whitespace-pre overflow-x-auto min-w-0',\n        ]\n            .filter(Boolean)\n            .join(' ');\n\n        const textAreaElement = (\n            <textarea\n                ref={textareaRef}\n                id={controlId}\n                placeholder={placeholder}\n                value={textAreaValue}\n                onChange={handleChange(onFieldChange)}\n                onBlur={() => {\n                    onBlur?.();\n                    onFieldBlur?.();\n                }}\n                onKeyDown={onKeyDown}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n                aria-invalid={isError || undefined}\n                aria-required={required || undefined}\n                aria-describedby={describedBy}\n                disabled={disabled || !!prefixValue || !!prefixSecondaryValue || readOnly}\n                readOnly={readOnly}\n                wrap={wrap ? undefined : 'off'}\n                rows={rows}\n                maxLength={maxLength}\n                style={{ minHeight: getMinHeight(size, rows) }}\n                className={textAreaClasses}\n                name={name}\n            />\n        );\n\n        return (\n            <div className={wrapperClasses}>\n                {hasPrefix && (\n                    <div className=\"flex pt-3 pl-3 pr-1 flex-shrink-0 pointer-events-none\">\n                        <CompositeIcon\n                            prefixValue={prefixValue}\n                            prefixSecondaryValue={prefixSecondaryValue}\n                            icon={icon}\n                        />\n                    </div>\n                )}\n\n                {textAreaElement}\n\n                {inFieldAction && (\n                    <div className=\"absolute bottom-2 right-2 flex items-center\">\n                        {inFieldAction}\n                    </div>\n                )}\n\n                {hasSuffix && (\n                    <div className=\"flex pt-3 pl-1 pr-3 flex-shrink-0\">\n                        <Suffix\n                            error={showErrorIcon}\n                            disabled={disabled}\n                            defaultValue={textAreaValue}\n                            onCopyClick={onCopyClick}\n                        />\n                        <TextAreaButtons buttons={buttons} />\n                    </div>\n                )}\n            </div>\n        );\n    };\n\n    const renderHelperText = () =>\n        helperText ? (\n            <div\n                id={helperTextId}\n                className=\"text-[length:var(--malachite-font-size-small,13px)] text-left pl-2 text-[var(--malachite-text-dimmed,rgb(161,161,161))]\"\n            >\n                {helperText}\n            </div>\n        ) : null;\n\n    const renderErrorMessage = (errorMessage?: string) => (\n        <FieldMessage id={errorMessageId} message={errorMessage} spaced />\n    );\n\n    return (\n        <BaseFormComponent\n            label={label}\n            hint={hint}\n            tooltip={tooltip}\n            name={name}\n            required={required}\n            requiredIndicator={requiredIndicator}\n            loading={loading}\n            formControl={formControl}\n            description={description}\n            controlId={controlId}\n            labelId={labelId}\n            descriptionId={descriptionId}\n            hintId={hintId}\n            loadingComponent={<LoadingTextArea size={size} rows={rows} />}\n        >\n            {({ error: fieldError, message, onFieldChange, onFieldBlur, value: formValue }) => {\n                const isError = error ?? fieldError;\n                // `error={false}` opts out of the resolver entirely, message included: a\n                // screen that has dealt with the rejection its own way would otherwise keep\n                // reporting it in destructive text and through `aria-describedby`.\n\n                // The message is its own line rather than a replacement for the helper text:\n                // a field that explains what it wants still has to say why what was typed was\n                // rejected, and dropping one for the other left the field marked red with\n                // nothing anywhere saying what was wrong.\n                const errorMessage = error === false ? undefined : message;\n\n                return (\n                    <>\n                        {renderTextArea(\n                            isError,\n                            helperText,\n                            onFieldChange,\n                            onFieldBlur,\n                            errorMessage,\n                            formValue,\n                        )}\n                        {renderHelperText()}\n                        {renderErrorMessage(errorMessage)}\n                    </>\n                );\n            }}\n        </BaseFormComponent>\n    );\n};\n\nconst LoadingTextArea: React.FC<{ size?: TextAreaSize; rows?: number }> = ({\n    size = 'medium',\n    rows = 4,\n}) => {\n    return (\n        // Decorative height placeholder — kept out of the a11y tree so it is not announced\n        // as an unlabelled box (same as Skeleton and LoadingInput).\n        <div\n            aria-busy=\"true\"\n            aria-hidden=\"true\"\n            className=\"w-full rounded-xl border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-border)] flex items-center justify-center shadow-[var(--malachite-shadow-default)]\"\n            style={{ minHeight: getMinHeight(size, rows) }}\n        />\n    );\n};\n\nconst CompositeIcon: React.FC<{\n    prefixValue?: string;\n    prefixSecondaryValue?: string;\n    icon?: React.ReactNode;\n}> = ({ prefixValue, prefixSecondaryValue, icon }) => {\n    return (\n        <div className=\"flex items-start gap-1\">\n            {icon && (\n                <span className=\"flex items-center justify-center text-[var(--malachite-text-dimmed)] w-4 h-4 flex-shrink-0 mt-1\">\n                    {icon}\n                </span>\n            )}\n            {prefixValue && (\n                <span className=\"text-[length:var(--malachite-font-size-15,15px)] leading-[1.4] text-[var(--malachite-text-dimmed)] whitespace-nowrap\">\n                    {prefixValue}\n                </span>\n            )}\n            {prefixSecondaryValue && (\n                <span className=\"text-[length:var(--malachite-font-size-15,15px)] leading-[1.4] text-[var(--malachite-text-dimmed)] whitespace-nowrap\">\n                    {prefixSecondaryValue}\n                </span>\n            )}\n        </div>\n    );\n};\n\nconst Suffix: React.FC<{\n    error?: boolean;\n    disabled?: boolean;\n    defaultValue?: string;\n    onCopyClick?: () => void;\n}> = ({ error, disabled, defaultValue, onCopyClick }) => {\n    return (\n        <div className=\"flex items-start gap-1\">\n            {error && (\n                // Decorative: the rejection is carried by the message beneath the field.\n                <div\n                    aria-hidden=\"true\"\n                    className=\"flex items-center justify-center w-5 h-5 flex-shrink-0 mt-1\"\n                >\n                    <InfoIcon\n                        size={16}\n                        className=\"text-[var(--malachite-destructive-foreground,rgb(196,62,62))]\"\n                    />\n                </div>\n            )}\n            {onCopyClick && disabled && defaultValue && (\n                <button\n                    onClick={() => {\n                        navigator.clipboard.writeText(defaultValue);\n                        onCopyClick();\n                    }}\n                    type=\"button\"\n                    aria-label=\"Copy to clipboard\"\n                    className=\"flex items-center justify-center w-5 h-5 hover:bg-[var(--malachite-primary-border)] rounded transition-colors flex-shrink-0 mt-1\"\n                >\n                    <CopyIcon size={16} />\n                </button>\n            )}\n        </div>\n    );\n};\n\nconst TextAreaButtons: React.FC<{\n    buttons?: ButtonDefinition[];\n}> = ({ buttons }) => {\n    if (!buttons?.length) {\n        return null;\n    }\n\n    return (\n        <div className=\"flex flex-col gap-1 mt-1\">\n            {buttons.map((button) => (\n                <Button\n                    key={button.label}\n                    variant={button.danger ? 'destructive' : 'outline'}\n                    size=\"small\"\n                    disabled={button.disabled}\n                    icon={button.icon}\n                    tooltip={button.tooltip}\n                    onClick={button.onClick}\n                >\n                    {button.label}\n                </Button>\n            ))}\n        </div>\n    );\n};\n\nexport default TextArea;\n"],"names":["getSizeClasses","size","focusBorderClasses","isError","tone","rowHeightPx","rows","getMinHeight","TextArea","label","hint","tooltip","placeholder","icon","name","required","requiredIndicator","error","description","loading","readOnly","defaultValue","disabled","prefixValue","prefixSecondaryValue","formControl","buttons","onCopyClick","onChange","onKeyDown","inFieldAction","value","onBlur","helperText","maxRows","maxLength","resize","wrap","id","ariaLabel","ariaLabelledBy","controlId","labelId","descriptionId","hintId","helperTextId","useFormFieldIds","internalValue","setInternalValue","useState","textareaRef","useRef","resizeToFit","useCallback","el","maxHeight","nextHeight","useLayoutEffect","isControlled","paintedValue","formValue","paintedFieldValue","handleChange","reportToForm","e","newValue","hasPrefix","errorMessageId","renderTextArea","resolvedHelperText","onFieldChange","onFieldBlur","errorMessage","textAreaValue","showErrorIcon","hasSuffix","describedBy","wrapperClasses","textAreaClasses","textAreaElement","jsx","jsxs","CompositeIcon","Suffix","TextAreaButtons","renderHelperText","renderErrorMessage","FieldMessage","BaseFormComponent","LoadingTextArea","fieldError","message","Fragment","InfoIcon","CopyIcon","button","Button"],"mappings":"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"}

package/dist/components/ThemeScope.js

@@ -0,0 +1,14 @@
+import { jsx as e } from "react/jsx-runtime";
+import { ShadowRootWrapper as d } from "../ShadowRootWrapper.js";
+const p = ({
+  mode: o = "dark",
+  fontFamily: t,
+  className: r = "",
+  style: n,
+  children: s
+}) => /* @__PURE__ */ e(d, { theme: o, hostStyle: { width: "100%" }, children: /* @__PURE__ */ e("div", { className: r, style: { marginInline: "auto", ...t ? { fontFamily: t, "--font-sans": t } : void 0, ...n }, children: s }) });
+export {
+  p as ThemeScope,
+  p as default
+};
+//# sourceMappingURL=ThemeScope.js.map

package/dist/components/ThemeScope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeScope.js","sources":["../../src/components/ThemeScope.tsx"],"sourcesContent":["import React from 'react';\nimport { ShadowRootWrapper } from '../ShadowRootWrapper';\nimport type { ThemeMode } from '../theme';\n\nexport interface ThemeScopeProps {\n    mode?: ThemeMode;\n    fontFamily?: string;\n    className?: string;\n    style?: React.CSSProperties;\n    children?: React.ReactNode;\n}\n\n/**\n * Pins a subtree to a fixed Malachite theme via its own shadow root — a themed island (e.g. a dark\n * panel in a light app). The dedicated root is required: theme tokens are scoped per shadow root.\n */\nconst ThemeScope: React.FC<ThemeScopeProps> = ({\n    mode = 'dark',\n    fontFamily,\n    className = '',\n    style,\n    children,\n}) => {\n    const fontStyle = fontFamily\n        ? ({ fontFamily, '--font-sans': fontFamily } as React.CSSProperties)\n        : undefined;\n    return (\n        <ShadowRootWrapper theme={mode} hostStyle={{ width: '100%' }}>\n            <div className={className} style={{ marginInline: 'auto', ...fontStyle, ...style }}>\n                {children}\n            </div>\n        </ShadowRootWrapper>\n    );\n};\n\nexport default ThemeScope;\nexport { ThemeScope };\n"],"names":["ThemeScope","mode","fontFamily","className","style","children","jsx","ShadowRootWrapper"],"mappings":";;AAgBA,MAAMA,IAAwC,CAAC;AAAA,EAC3C,MAAAC,IAAO;AAAA,EACP,YAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AACJ,MAKQ,gBAAAC,EAACC,KAAkB,OAAON,GAAM,WAAW,EAAE,OAAO,UAChD,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAAH,GAAsB,OAAO,EAAE,cAAc,QAAQ,GALhDD,IACX,EAAE,YAAAA,GAAY,eAAeA,MAC9B,QAG0E,GAAGE,EAAA,GACtE,UAAAC,EAAA,CACL,EAAA,CACJ;"}