@stackone/malachite 2.21.0 → 2.23.0

package/dist/components/Surface.js

@@ -0,0 +1,143 @@
+import { jsx as o, jsxs as _ } from "react/jsx-runtime";
+import { FOCUS_RING_INSET as C } from "./focusRing.js";
+import { isRenderableNode as O } from "./renderableNode.js";
+import { FOREGROUND_RESET as $, SELECTED_TEXT_CONTEXT as k, SELECTED_ROW_ACCENT as D, SELECTED_ROW_FOREGROUND as j, SELECTED_ROW_BACKGROUND as S } from "./selectedRow.js";
+const A = "0px 0px 4px 0px rgba(0,0,0,0.08), 0px 4px 4px 0px rgba(0,0,0,0.08), 0px 4px 10px 0px rgba(0,0,0,0.05)", F = ({
+  children: t,
+  divider: m = !1,
+  disabled: a = !1,
+  onClick: e,
+  href: l,
+  selected: s,
+  selection: b,
+  trailing: u,
+  tone: h = "default",
+  role: r,
+  "aria-label": n,
+  "aria-labelledby": c,
+  className: E = "",
+  style: g
+}) => {
+  const p = !!(e || l), R = a && p ? "" : "transition-colors hover:bg-[var(--malachite-buttonlist-hover-background)]", N = h === "muted", w = [
+    "w-full text-left border-0",
+    N ? "bg-[var(--malachite-card-dimmed-background)]" : "",
+    m ? "border-b border-solid border-[var(--malachite-card-border)]" : "",
+    R
+  ].filter(Boolean).join(" "), f = [
+    p ? `appearance-none ${N ? "" : "bg-transparent"} p-0 ${C}` : "",
+    p && !a ? "cursor-pointer" : ""
+  ].filter(Boolean).join(" "), v = [w, f, E].filter(Boolean).join(" "), x = { ...s && (b ? b === "highlight" : r !== "checkbox") ? {
+    backgroundImage: `linear-gradient(${S}, ${S})`,
+    color: j,
+    boxShadow: `inset 2px 0 0 ${D}`,
+    ...k
+  } : {}, ...g }, i = r === "radio" || r === "checkbox" ? !!s : void 0, d = i === void 0 && s ? !0 : void 0, y = {
+    role: r,
+    "aria-checked": i,
+    "aria-current": d,
+    "aria-label": n,
+    "aria-labelledby": c,
+    "aria-disabled": r && a ? !0 : void 0
+  };
+  if (O(u)) {
+    const T = l && !a ? /* @__PURE__ */ o(
+      "a",
+      {
+        href: l,
+        onClick: e,
+        className: `${f} border-0 flex-1 min-w-0 text-left no-underline text-inherit`,
+        role: r,
+        "aria-checked": i,
+        "aria-current": d,
+        "aria-label": n,
+        "aria-labelledby": c,
+        children: t
+      }
+    ) : e ? /* @__PURE__ */ o(
+      "button",
+      {
+        type: "button",
+        onClick: e,
+        disabled: a,
+        className: `${f} border-0 flex-1 min-w-0 text-left`,
+        role: r,
+        "aria-checked": i,
+        "aria-current": d,
+        "aria-label": n,
+        "aria-labelledby": c,
+        children: t
+      }
+    ) : (
+      // The set goes here, not on the wrapper: `radio` and `checkbox` make their
+      // descendants presentational, which would bury a control in the trailing slot.
+      /* @__PURE__ */ o("div", { className: "flex-1 min-w-0", ...y, children: t })
+    );
+    return /* @__PURE__ */ _(
+      "div",
+      {
+        className: [w, "flex items-center", E].filter(Boolean).join(" "),
+        style: x,
+        children: [
+          T,
+          /* @__PURE__ */ o("div", { className: "shrink-0 flex items-center", children: u })
+        ]
+      }
+    );
+  }
+  return l && !a ? /* @__PURE__ */ o(
+    "a",
+    {
+      href: l,
+      onClick: e,
+      className: `${v} no-underline text-inherit`,
+      style: x,
+      role: r,
+      "aria-checked": i,
+      "aria-current": d,
+      "aria-label": n,
+      "aria-labelledby": c,
+      children: t
+    }
+  ) : e ? /* @__PURE__ */ o(
+    "button",
+    {
+      type: "button",
+      onClick: e,
+      disabled: a,
+      className: v,
+      style: x,
+      role: r,
+      "aria-checked": i,
+      "aria-current": d,
+      "aria-label": n,
+      "aria-labelledby": c,
+      children: t
+    }
+  ) : /* @__PURE__ */ o("div", { className: v, style: x, ...y, children: t });
+}, G = ({
+  children: t,
+  padding: m = !1,
+  overflow: a = "hidden",
+  role: e,
+  "aria-label": l,
+  "aria-labelledby": s,
+  className: b = "",
+  style: u
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    className: `w-full rounded-[var(--malachite-radius-xxl,14px)] ${a === "clip" ? "overflow-clip" : a === "visible" ? "overflow-visible" : "overflow-hidden"} bg-[var(--malachite-card-background)] border border-solid border-[var(--malachite-card-border)] ${m ? "py-3 px-4" : ""} ${b}`,
+    style: { boxShadow: A, ...$, ...u },
+    role: e,
+    "aria-label": l,
+    "aria-labelledby": s,
+    children: t
+  }
+);
+G.Row = F;
+export {
+  G as Surface,
+  F as SurfaceRow,
+  G as default
+};
+//# sourceMappingURL=Surface.js.map

package/dist/components/Surface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Surface.js","sources":["../../src/components/Surface.tsx"],"sourcesContent":["import React from 'react';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { isRenderableNode } from './renderableNode';\nimport {\n    FOREGROUND_RESET,\n    SELECTED_ROW_ACCENT,\n    SELECTED_ROW_BACKGROUND,\n    SELECTED_ROW_FOREGROUND,\n    SELECTED_TEXT_CONTEXT,\n} from './selectedRow';\n\nexport interface SurfaceProps {\n    children?: React.ReactNode;\n    padding?: boolean;\n    /**\n     * Content overflow. Defaults to `hidden` so children are clipped to the rounded\n     * corners. Use `clip` to keep the rounded clipping WITHOUT creating a scroll\n     * container — so a `position: sticky` descendant still pins (unlike `hidden`,\n     * which traps it). `visible` disables clipping entirely.\n     */\n    overflow?: 'hidden' | 'visible' | 'clip';\n    role?: React.AriaRole;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nexport interface SurfaceRowProps {\n    children?: React.ReactNode;\n    /** Renders a bottom divider — omit on the last row in a Surface. */\n    divider?: boolean;\n    /** Removes the hover affordance / disables the control (e.g. while loading/busy). */\n    disabled?: boolean;\n    /**\n     * When provided, the whole row becomes clickable: it renders as a `<button>`\n     * (or `<a>` when `href` is set), so the entire row is the click target with\n     * native focus + Enter/Space — no manual tabIndex/key handlers. For a\n     * selectable row, put a presentational `<Radio>`/`<Checkbox>` inside as the\n     * visual indicator; do NOT nest an interactive control (invalid + double tab stop).\n     */\n    onClick?: (event: React.MouseEvent) => void;\n    /** Renders the clickable row as an anchor instead of a button. */\n    href?: string;\n    /** Announces the row as selected — `aria-checked` under a `radio`/`checkbox` role,\n     *  `aria-current` otherwise — and paints `Table`'s selected treatment unless `selection`\n     *  says not to. */\n    selected?: boolean;\n    /** How a `selected` row shows it. `highlight` paints the treatment; `announce` leaves the\n     *  visual to a control inside the row and only sets the ARIA state. Defaults to `announce`\n     *  under `role=\"checkbox\"` and `highlight` otherwise. */\n    selection?: 'highlight' | 'announce';\n    /** Content pinned right, outside the row button, so it may hold its own control. */\n    trailing?: React.ReactNode;\n    /** `muted` tints a row whose subject is inactive — not disabled: it stays interactive. */\n    tone?: 'default' | 'muted';\n    /** ARIA role for a clickable row, e.g. `radio`/`checkbox` (wrap the list in a `radiogroup`). */\n    role?: React.AriaRole;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst TRIPLE_SHADOW =\n    '0px 0px 4px 0px rgba(0,0,0,0.08), 0px 4px 4px 0px rgba(0,0,0,0.08), 0px 4px 10px 0px rgba(0,0,0,0.05)';\n\n/**\n * A single full-bleed row inside a <Surface>. Owns the row chrome — hover\n * highlight, colour transition and an optional bottom divider — so consumers\n * compose their own content inside without re-implementing design-system styling.\n * Pass `onClick`/`href` to make the entire row clickable (rendered as a real\n * button/anchor, so keyboard navigation works natively).\n */\nconst SurfaceRow: React.FC<SurfaceRowProps> = ({\n    children,\n    divider = false,\n    disabled = false,\n    onClick,\n    href,\n    selected,\n    selection,\n    trailing,\n    tone = 'default',\n    role,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n    style,\n}) => {\n    const interactive = Boolean(onClick || href);\n    const hover =\n        disabled && interactive\n            ? ''\n            : 'transition-colors hover:bg-[var(--malachite-buttonlist-hover-background)]';\n\n    // A class, not an inline colour, which would outrank the hover utility. It replaces the\n    // button reset's `bg-transparent` rather than joining it: same specificity, so the winner\n    // would be whichever Tailwind emitted last.\n    const muted = tone === 'muted';\n    const toneClass = muted ? 'bg-[var(--malachite-card-dimmed-background)]' : '';\n\n    const chromeClasses = [\n        'w-full text-left border-0',\n        toneClass,\n        divider ? 'border-b border-solid border-[var(--malachite-card-border)]' : '',\n        hover,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const controlClasses = [\n        interactive\n            ? `appearance-none ${muted ? '' : 'bg-transparent'} p-0 ${FOCUS_RING_INSET}`\n            : '',\n        interactive && !disabled ? 'cursor-pointer' : '',\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const classes = [chromeClasses, controlClasses, className].filter(Boolean).join(' ');\n\n    const paints = selection ? selection === 'highlight' : role !== 'checkbox';\n\n    // A gradient layer so the tint composites over hover, and an inset shadow because\n    // `ring-*` silently doesn't paint in a shadow root.\n    const selectedStyle: React.CSSProperties =\n        selected && paints\n            ? {\n                  backgroundImage: `linear-gradient(${SELECTED_ROW_BACKGROUND}, ${SELECTED_ROW_BACKGROUND})`,\n                  color: SELECTED_ROW_FOREGROUND,\n                  boxShadow: `inset 2px 0 0 ${SELECTED_ROW_ACCENT}`,\n                  ...SELECTED_TEXT_CONTEXT,\n              }\n            : {};\n\n    const rowStyle = { ...selectedStyle, ...style };\n\n    const ariaChecked = role === 'radio' || role === 'checkbox' ? Boolean(selected) : undefined;\n    // `aria-current`, not `aria-pressed`: a selected row is one of many choices, not a toggle\n    // (same call as `Dropdown`'s options). A role that carries its own state uses that instead.\n    const ariaCurrent = ariaChecked === undefined && selected ? true : undefined;\n\n    // Everything a control would have carried, for the branches that render none: the row\n    // element is then the only thing assistive tech sees. `aria-disabled` because there is no\n    // control to be natively disabled — and it is inert without a role, like the name.\n    const rowFallbackAria = {\n        role,\n        'aria-checked': ariaChecked,\n        'aria-current': ariaCurrent,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        'aria-disabled': role && disabled ? true : undefined,\n    };\n\n    if (isRenderableNode(trailing)) {\n        const control =\n            href && !disabled ? (\n                <a\n                    href={href}\n                    onClick={onClick}\n                    className={`${controlClasses} border-0 flex-1 min-w-0 text-left no-underline text-inherit`}\n                    role={role}\n                    aria-checked={ariaChecked}\n                    aria-current={ariaCurrent}\n                    aria-label={ariaLabel}\n                    aria-labelledby={ariaLabelledBy}\n                >\n                    {children}\n                </a>\n            ) : onClick ? (\n                <button\n                    type=\"button\"\n                    onClick={onClick}\n                    disabled={disabled}\n                    className={`${controlClasses} border-0 flex-1 min-w-0 text-left`}\n                    role={role}\n                    aria-checked={ariaChecked}\n                    aria-current={ariaCurrent}\n                    aria-label={ariaLabel}\n                    aria-labelledby={ariaLabelledBy}\n                >\n                    {children}\n                </button>\n            ) : (\n                // The set goes here, not on the wrapper: `radio` and `checkbox` make their\n                // descendants presentational, which would bury a control in the trailing slot.\n                <div className=\"flex-1 min-w-0\" {...rowFallbackAria}>\n                    {children}\n                </div>\n            );\n\n        return (\n            <div\n                className={[chromeClasses, 'flex items-center', className]\n                    .filter(Boolean)\n                    .join(' ')}\n                style={rowStyle}\n            >\n                {control}\n                <div className=\"shrink-0 flex items-center\">{trailing}</div>\n            </div>\n        );\n    }\n\n    if (href && !disabled) {\n        return (\n            <a\n                href={href}\n                onClick={onClick}\n                className={`${classes} no-underline text-inherit`}\n                style={rowStyle}\n                role={role}\n                aria-checked={ariaChecked}\n                aria-current={ariaCurrent}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n            >\n                {children}\n            </a>\n        );\n    }\n\n    if (onClick) {\n        return (\n            <button\n                type=\"button\"\n                onClick={onClick}\n                disabled={disabled}\n                className={classes}\n                style={rowStyle}\n                role={role}\n                aria-checked={ariaChecked}\n                aria-current={ariaCurrent}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledBy}\n            >\n                {children}\n            </button>\n        );\n    }\n\n    return (\n        <div className={classes} style={rowStyle} {...rowFallbackAria}>\n            {children}\n        </div>\n    );\n};\n\ninterface SurfaceComponent extends React.FC<SurfaceProps> {\n    Row: React.FC<SurfaceRowProps>;\n}\n\nconst Surface = (({\n    children,\n    padding = false,\n    overflow = 'hidden',\n    role,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n    style,\n}: SurfaceProps) => {\n    // Literal class names (not interpolated) so Tailwind's JIT emits them.\n    const overflowClass =\n        overflow === 'clip'\n            ? 'overflow-clip'\n            : overflow === 'visible'\n              ? 'overflow-visible'\n              : 'overflow-hidden';\n    return (\n        <div\n            className={`w-full rounded-[var(--malachite-radius-xxl,14px)] ${overflowClass} bg-[var(--malachite-card-background)] border border-solid border-[var(--malachite-card-border)] ${padding ? 'py-3 px-4' : ''} ${className}`}\n            style={{ boxShadow: TRIPLE_SHADOW, ...FOREGROUND_RESET, ...style }}\n            role={role}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n        >\n            {children}\n        </div>\n    );\n}) as SurfaceComponent;\n\nSurface.Row = SurfaceRow;\n\nexport default Surface;\nexport { Surface, SurfaceRow };\n"],"names":["TRIPLE_SHADOW","SurfaceRow","children","divider","disabled","onClick","href","selected","selection","trailing","tone","role","ariaLabel","ariaLabelledBy","className","style","interactive","hover","muted","chromeClasses","controlClasses","FOCUS_RING_INSET","classes","rowStyle","SELECTED_ROW_BACKGROUND","SELECTED_ROW_FOREGROUND","SELECTED_ROW_ACCENT","SELECTED_TEXT_CONTEXT","ariaChecked","ariaCurrent","rowFallbackAria","isRenderableNode","control","jsx","jsxs","Surface","padding","overflow","FOREGROUND_RESET"],"mappings":"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"}

package/dist/components/Swatch.js

@@ -0,0 +1,44 @@
+import { jsx as d } from "react/jsx-runtime";
+const b = "inline-flex items-center justify-center flex-none transition-opacity duration-150 p-0", S = "border-[1.5px] border-solid border-[var(--malachite-card-border)] bg-transparent", f = "border-0", m = ({
+  color: t,
+  size: r = 14,
+  on: a = !0,
+  radius: l = 3,
+  children: s,
+  onClick: e,
+  "aria-label": n,
+  "aria-pressed": c,
+  className: p = "",
+  style: u = {}
+}) => {
+  const i = [
+    b,
+    !t ? S : f,
+    e ? "cursor-pointer" : "cursor-default",
+    p
+  ].filter(Boolean).join(" "), o = {
+    width: `${r}px`,
+    height: `${r}px`,
+    borderRadius: `${l}px`,
+    opacity: a ? 1 : 0.3,
+    ...t && { background: t },
+    ...u
+  };
+  return e ? /* @__PURE__ */ d(
+    "button",
+    {
+      type: "button",
+      onClick: e,
+      "aria-label": n,
+      "aria-pressed": c ?? a,
+      className: i,
+      style: o,
+      children: s
+    }
+  ) : /* @__PURE__ */ d("span", { className: i, style: o, "aria-label": n, children: s });
+};
+export {
+  m as Swatch,
+  m as default
+};
+//# sourceMappingURL=Swatch.js.map

package/dist/components/Swatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Swatch.js","sources":["../../src/components/Swatch.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface SwatchProps {\n    color?: string;\n    size?: number;\n    on?: boolean;\n    radius?: number;\n    children?: React.ReactNode;\n    onClick?: () => void;\n    'aria-label'?: string;\n    'aria-pressed'?: boolean;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst BASE_CLASSES =\n    'inline-flex items-center justify-center flex-none transition-opacity duration-150 p-0';\nconst OUTLINED_CLASSES =\n    'border-[1.5px] border-solid border-[var(--malachite-card-border)] bg-transparent';\nconst FILLED_CLASSES = 'border-0';\n\nconst Swatch: React.FC<SwatchProps> = ({\n    color,\n    size = 14,\n    on = true,\n    radius = 3,\n    children,\n    onClick,\n    'aria-label': ariaLabel,\n    'aria-pressed': ariaPressed,\n    className = '',\n    style = {},\n}) => {\n    const isOutlined = !color;\n\n    const classes = [\n        BASE_CLASSES,\n        isOutlined ? OUTLINED_CLASSES : FILLED_CLASSES,\n        onClick ? 'cursor-pointer' : 'cursor-default',\n        className,\n    ]\n        .filter(Boolean)\n        .join(' ');\n\n    const dynamicStyle: React.CSSProperties = {\n        width: `${size}px`,\n        height: `${size}px`,\n        borderRadius: `${radius}px`,\n        opacity: on ? 1 : 0.3,\n        ...(color && { background: color }),\n        ...style,\n    };\n\n    if (onClick) {\n        return (\n            <button\n                type=\"button\"\n                onClick={onClick}\n                aria-label={ariaLabel}\n                aria-pressed={ariaPressed ?? on}\n                className={classes}\n                style={dynamicStyle}\n            >\n                {children}\n            </button>\n        );\n    }\n\n    return (\n        <span className={classes} style={dynamicStyle} aria-label={ariaLabel}>\n            {children}\n        </span>\n    );\n};\n\nexport default Swatch;\nexport { Swatch };\n"],"names":["BASE_CLASSES","OUTLINED_CLASSES","FILLED_CLASSES","Swatch","color","size","on","radius","children","onClick","ariaLabel","ariaPressed","className","style","classes","dynamicStyle","jsx"],"mappings":";AAeA,MAAMA,IACF,yFACEC,IACF,oFACEC,IAAiB,YAEjBC,IAAgC,CAAC;AAAA,EACnC,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,IAAAC,IAAK;AAAA,EACL,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,cAAcC;AAAA,EACd,gBAAgBC;AAAA,EAChB,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ,CAAA;AACZ,MAAM;AAGF,QAAMC,IAAU;AAAA,IACZd;AAAA,IAHe,CAACI,IAIHH,IAAmBC;AAAA,IAChCO,IAAU,mBAAmB;AAAA,IAC7BG;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG,GAEPG,IAAoC;AAAA,IACtC,OAAO,GAAGV,CAAI;AAAA,IACd,QAAQ,GAAGA,CAAI;AAAA,IACf,cAAc,GAAGE,CAAM;AAAA,IACvB,SAASD,IAAK,IAAI;AAAA,IAClB,GAAIF,KAAS,EAAE,YAAYA,EAAA;AAAA,IAC3B,GAAGS;AAAA,EAAA;AAGP,SAAIJ,IAEI,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,SAAAP;AAAA,MACA,cAAYC;AAAA,MACZ,gBAAcC,KAAeL;AAAA,MAC7B,WAAWQ;AAAA,MACX,OAAOC;AAAA,MAEN,UAAAP;AAAA,IAAA;AAAA,EAAA,IAMT,gBAAAQ,EAAC,UAAK,WAAWF,GAAS,OAAOC,GAAc,cAAYL,GACtD,UAAAF,GACL;AAER;"}