@stackone/malachite 2.21.0 → 2.22.0

package/dist/components/Skeleton.js

@@ -0,0 +1,106 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useRef as d } from "react";
+import { useAdoptedStyleSheet as c } from "./useAdoptedStyleSheet.js";
+const k = { small: 24, default: 32, large: 40 }, S = { small: 64, default: 96, large: 128 }, E = { small: 24, default: 32, large: 40 }, b = { small: 24, default: 32, large: 40 }, g = "malachite-skeleton-loading", u = "rgba(190, 190, 190, 0.2)", p = "rgba(129, 129, 129, 0.24)", y = `linear-gradient(90deg, ${u} 25%, ${p} 37%, ${u} 63%)`, f = `@keyframes ${g} { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }`, T = (e) => {
+  switch (e) {
+    case "round":
+    case "circle":
+      return 9999;
+    case "square":
+      return 0;
+    default:
+      return 6;
+  }
+}, m = (e) => ({
+  display: "inline-block",
+  verticalAlign: "middle",
+  background: e ? y : u,
+  backgroundSize: e ? "400% 100%" : void 0,
+  animation: e ? `${g} 1.4s ease infinite` : void 0,
+  flexShrink: 0
+}), A = ({
+  size: e = "default",
+  shape: r = "default",
+  block: n = !1,
+  active: l = !0,
+  className: t,
+  width: a,
+  height: o,
+  minWidth: s
+}) => {
+  const h = d(null);
+  return c(h, f, "malachite-skeleton-keyframes"), /* @__PURE__ */ i(
+    "span",
+    {
+      ref: h,
+      className: t,
+      "aria-busy": "true",
+      "aria-hidden": "true",
+      style: {
+        ...m(l),
+        width: n ? "100%" : a ?? S[e],
+        height: o ?? k[e],
+        minWidth: s,
+        borderRadius: T(r)
+      }
+    }
+  );
+}, R = ({
+  size: e = "default",
+  block: r = !1,
+  active: n = !0,
+  className: l,
+  width: t,
+  height: a,
+  minWidth: o
+}) => {
+  const s = d(null);
+  return c(s, f, "malachite-skeleton-keyframes"), /* @__PURE__ */ i(
+    "span",
+    {
+      ref: s,
+      className: l,
+      "aria-busy": "true",
+      "aria-hidden": "true",
+      style: {
+        ...m(n),
+        width: r ? "100%" : t ?? 160,
+        height: a ?? E[e],
+        minWidth: o,
+        borderRadius: 6
+      }
+    }
+  );
+}, I = ({
+  size: e = "default",
+  shape: r = "circle",
+  active: n = !0,
+  className: l
+}) => {
+  const t = d(null);
+  c(t, f, "malachite-skeleton-keyframes");
+  const a = typeof e == "number" ? e : b[e];
+  return /* @__PURE__ */ i(
+    "span",
+    {
+      ref: t,
+      className: l,
+      "aria-busy": "true",
+      "aria-hidden": "true",
+      style: {
+        ...m(n),
+        width: a,
+        height: a,
+        borderRadius: r === "circle" ? 9999 : 6
+      }
+    }
+  );
+}, B = {
+  Button: A,
+  Input: R,
+  Avatar: I
+};
+export {
+  B as default
+};
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../src/components/Skeleton.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { useAdoptedStyleSheet } from './useAdoptedStyleSheet';\n\ntype SkeletonSize = 'small' | 'default' | 'large';\ntype SkeletonShape = 'default' | 'round' | 'circle' | 'square';\n\ninterface BaseSkeletonProps {\n    active?: boolean;\n    className?: string;\n}\n\ninterface SkeletonButtonProps extends BaseSkeletonProps {\n    size?: SkeletonSize;\n    shape?: SkeletonShape;\n    block?: boolean;\n    width?: number | string;\n    height?: number | string;\n    minWidth?: number | string;\n}\n\ninterface SkeletonInputProps extends BaseSkeletonProps {\n    size?: SkeletonSize;\n    block?: boolean;\n    width?: number | string;\n    height?: number | string;\n    minWidth?: number | string;\n}\n\ninterface SkeletonAvatarProps extends BaseSkeletonProps {\n    size?: SkeletonSize | number;\n    shape?: 'circle' | 'square';\n}\n\nconst BUTTON_HEIGHT: Record<SkeletonSize, number> = { small: 24, default: 32, large: 40 };\nconst BUTTON_WIDTH: Record<SkeletonSize, number> = { small: 64, default: 96, large: 128 };\nconst INPUT_HEIGHT: Record<SkeletonSize, number> = { small: 24, default: 32, large: 40 };\nconst AVATAR_SIZE: Record<SkeletonSize, number> = { small: 24, default: 32, large: 40 };\n\nconst KEYFRAME_NAME = 'malachite-skeleton-loading';\nconst SKELETON_BASE = 'rgba(190, 190, 190, 0.2)';\nconst SKELETON_SHIMMER = 'rgba(129, 129, 129, 0.24)';\nconst SKELETON_GRADIENT = `linear-gradient(90deg, ${SKELETON_BASE} 25%, ${SKELETON_SHIMMER} 37%, ${SKELETON_BASE} 63%)`;\nconst KEYFRAMES_CSS = `@keyframes ${KEYFRAME_NAME} { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }`;\n\nconst getRadius = (shape: SkeletonShape): string | number => {\n    switch (shape) {\n        case 'round':\n        case 'circle':\n            return 9999;\n        case 'square':\n            return 0;\n        default:\n            return 6;\n    }\n};\n\nconst baseStyle = (active: boolean): React.CSSProperties => ({\n    display: 'inline-block',\n    verticalAlign: 'middle',\n    background: active ? SKELETON_GRADIENT : SKELETON_BASE,\n    backgroundSize: active ? '400% 100%' : undefined,\n    animation: active ? `${KEYFRAME_NAME} 1.4s ease infinite` : undefined,\n    flexShrink: 0,\n});\n\nconst SkeletonButton: React.FC<SkeletonButtonProps> = ({\n    size = 'default',\n    shape = 'default',\n    block = false,\n    active = true,\n    className,\n    width,\n    height,\n    minWidth,\n}) => {\n    const ref = useRef<HTMLSpanElement>(null);\n    useAdoptedStyleSheet(ref, KEYFRAMES_CSS, 'malachite-skeleton-keyframes');\n    return (\n        <span\n            ref={ref}\n            className={className}\n            aria-busy=\"true\"\n            aria-hidden=\"true\"\n            style={{\n                ...baseStyle(active),\n                width: block ? '100%' : (width ?? BUTTON_WIDTH[size]),\n                height: height ?? BUTTON_HEIGHT[size],\n                minWidth,\n                borderRadius: getRadius(shape),\n            }}\n        />\n    );\n};\n\nconst SkeletonInput: React.FC<SkeletonInputProps> = ({\n    size = 'default',\n    block = false,\n    active = true,\n    className,\n    width,\n    height,\n    minWidth,\n}) => {\n    const ref = useRef<HTMLSpanElement>(null);\n    useAdoptedStyleSheet(ref, KEYFRAMES_CSS, 'malachite-skeleton-keyframes');\n    return (\n        <span\n            ref={ref}\n            className={className}\n            aria-busy=\"true\"\n            aria-hidden=\"true\"\n            style={{\n                ...baseStyle(active),\n                width: block ? '100%' : (width ?? 160),\n                height: height ?? INPUT_HEIGHT[size],\n                minWidth,\n                borderRadius: 6,\n            }}\n        />\n    );\n};\n\nconst SkeletonAvatar: React.FC<SkeletonAvatarProps> = ({\n    size = 'default',\n    shape = 'circle',\n    active = true,\n    className,\n}) => {\n    const ref = useRef<HTMLSpanElement>(null);\n    useAdoptedStyleSheet(ref, KEYFRAMES_CSS, 'malachite-skeleton-keyframes');\n    const px = typeof size === 'number' ? size : AVATAR_SIZE[size];\n    return (\n        <span\n            ref={ref}\n            className={className}\n            aria-busy=\"true\"\n            aria-hidden=\"true\"\n            style={{\n                ...baseStyle(active),\n                width: px,\n                height: px,\n                borderRadius: shape === 'circle' ? 9999 : 6,\n            }}\n        />\n    );\n};\n\nconst Skeleton = {\n    Button: SkeletonButton,\n    Input: SkeletonInput,\n    Avatar: SkeletonAvatar,\n};\n\nexport default Skeleton;\n"],"names":["BUTTON_HEIGHT","BUTTON_WIDTH","INPUT_HEIGHT","AVATAR_SIZE","KEYFRAME_NAME","SKELETON_BASE","SKELETON_SHIMMER","SKELETON_GRADIENT","KEYFRAMES_CSS","getRadius","shape","baseStyle","active","SkeletonButton","size","block","className","width","height","minWidth","ref","useRef","useAdoptedStyleSheet","jsx","SkeletonInput","SkeletonAvatar","px","Skeleton"],"mappings":";;;AAiCA,MAAMA,IAA8C,EAAE,OAAO,IAAI,SAAS,IAAI,OAAO,GAAA,GAC/EC,IAA6C,EAAE,OAAO,IAAI,SAAS,IAAI,OAAO,IAAA,GAC9EC,IAA6C,EAAE,OAAO,IAAI,SAAS,IAAI,OAAO,GAAA,GAC9EC,IAA4C,EAAE,OAAO,IAAI,SAAS,IAAI,OAAO,GAAA,GAE7EC,IAAgB,8BAChBC,IAAgB,4BAChBC,IAAmB,6BACnBC,IAAoB,0BAA0BF,CAAa,SAASC,CAAgB,SAASD,CAAa,SAC1GG,IAAgB,cAAcJ,CAAa,mFAE3CK,IAAY,CAACC,MAA0C;AACzD,UAAQA,GAAA;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB,GAEMC,IAAY,CAACC,OAA0C;AAAA,EACzD,SAAS;AAAA,EACT,eAAe;AAAA,EACf,YAAYA,IAASL,IAAoBF;AAAA,EACzC,gBAAgBO,IAAS,cAAc;AAAA,EACvC,WAAWA,IAAS,GAAGR,CAAa,wBAAwB;AAAA,EAC5D,YAAY;AAChB,IAEMS,IAAgD,CAAC;AAAA,EACnD,MAAAC,IAAO;AAAA,EACP,OAAAJ,IAAQ;AAAA,EACR,OAAAK,IAAQ;AAAA,EACR,QAAAH,IAAS;AAAA,EACT,WAAAI;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AACJ,MAAM;AACF,QAAMC,IAAMC,EAAwB,IAAI;AACxC,SAAAC,EAAqBF,GAAKZ,GAAe,8BAA8B,GAEnE,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAH;AAAA,MACA,WAAAJ;AAAA,MACA,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,OAAO;AAAA,QACH,GAAGL,EAAUC,CAAM;AAAA,QACnB,OAAOG,IAAQ,SAAUE,KAAShB,EAAaa,CAAI;AAAA,QACnD,QAAQI,KAAUlB,EAAcc,CAAI;AAAA,QACpC,UAAAK;AAAA,QACA,cAAcV,EAAUC,CAAK;AAAA,MAAA;AAAA,IACjC;AAAA,EAAA;AAGZ,GAEMc,IAA8C,CAAC;AAAA,EACjD,MAAAV,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,QAAAH,IAAS;AAAA,EACT,WAAAI;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AACJ,MAAM;AACF,QAAMC,IAAMC,EAAwB,IAAI;AACxC,SAAAC,EAAqBF,GAAKZ,GAAe,8BAA8B,GAEnE,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAH;AAAA,MACA,WAAAJ;AAAA,MACA,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,OAAO;AAAA,QACH,GAAGL,EAAUC,CAAM;AAAA,QACnB,OAAOG,IAAQ,SAAUE,KAAS;AAAA,QAClC,QAAQC,KAAUhB,EAAaY,CAAI;AAAA,QACnC,UAAAK;AAAA,QACA,cAAc;AAAA,MAAA;AAAA,IAClB;AAAA,EAAA;AAGZ,GAEMM,IAAgD,CAAC;AAAA,EACnD,MAAAX,IAAO;AAAA,EACP,OAAAJ,IAAQ;AAAA,EACR,QAAAE,IAAS;AAAA,EACT,WAAAI;AACJ,MAAM;AACF,QAAMI,IAAMC,EAAwB,IAAI;AACxC,EAAAC,EAAqBF,GAAKZ,GAAe,8BAA8B;AACvE,QAAMkB,IAAK,OAAOZ,KAAS,WAAWA,IAAOX,EAAYW,CAAI;AAC7D,SACI,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAH;AAAA,MACA,WAAAJ;AAAA,MACA,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,OAAO;AAAA,QACH,GAAGL,EAAUC,CAAM;AAAA,QACnB,OAAOc;AAAA,QACP,QAAQA;AAAA,QACR,cAAchB,MAAU,WAAW,OAAO;AAAA,MAAA;AAAA,IAC9C;AAAA,EAAA;AAGZ,GAEMiB,IAAW;AAAA,EACb,QAAQd;AAAA,EACR,OAAOW;AAAA,EACP,QAAQC;AACZ;"}

package/dist/components/Spacer.js

@@ -0,0 +1,63 @@
+import { jsx as r } from "react/jsx-runtime";
+import n, { useMemo as s } from "react";
+const g = ({
+  direction: a = "horizontal",
+  size: c = 8,
+  children: l,
+  align: e,
+  justifyContent: t,
+  padding: i,
+  id: o,
+  fullHeight: u = !1,
+  fullWidth: d = !1,
+  className: f = ""
+}) => {
+  const h = a === "vertical" ? "column" : "row", m = s(() => {
+    switch (e) {
+      case "center":
+        return "center";
+      case "start":
+        return "flex-start";
+      case "end":
+        return "flex-end";
+      case "baseline":
+        return "baseline";
+      case "stretch":
+        return "stretch";
+      default:
+        return "center";
+    }
+  }, [e]), p = s(() => {
+    switch (t) {
+      case "space-between":
+        return "space-between";
+      case "center":
+        return "center";
+      case "end":
+        return "flex-end";
+      default:
+        return "flex-start";
+    }
+  }, [t]), x = n.Children.toArray(l);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      id: o,
+      className: `flex ${f}`.trim(),
+      style: {
+        flexDirection: h,
+        alignItems: m,
+        justifyContent: p,
+        gap: `${c}px`,
+        padding: i,
+        height: u ? "100%" : void 0,
+        width: d ? "100%" : void 0
+      },
+      children: x.map((w, y) => /* @__PURE__ */ r(n.Fragment, { children: w }, y))
+    }
+  );
+};
+export {
+  g as default
+};
+//# sourceMappingURL=Spacer.js.map

package/dist/components/Spacer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spacer.js","sources":["../../src/components/Spacer.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\n\ninterface SpacerProps {\n    direction?: 'horizontal' | 'vertical';\n    size?: number;\n    align?: 'center' | 'start' | 'end' | 'baseline' | 'stretch';\n    justifyContent?: 'space-between' | 'end' | 'center';\n    padding?: string;\n    children: React.ReactNode;\n    id?: string;\n    fullHeight?: boolean;\n    fullWidth?: boolean;\n    className?: string;\n}\n\nconst Spacer: React.FC<SpacerProps> = ({\n    direction = 'horizontal',\n    size = 8,\n    children,\n    align,\n    justifyContent,\n    padding,\n    id,\n    fullHeight = false,\n    fullWidth = false,\n    className = '',\n}) => {\n    const flexDirection = direction === 'vertical' ? 'column' : 'row';\n\n    const alignItems = useMemo(() => {\n        switch (align) {\n            case 'center':\n                return 'center';\n            case 'start':\n                return 'flex-start';\n            case 'end':\n                return 'flex-end';\n            case 'baseline':\n                return 'baseline';\n            case 'stretch':\n                return 'stretch';\n            default:\n                return 'center';\n        }\n    }, [align]);\n\n    const justifyContentStyle = useMemo(() => {\n        switch (justifyContent) {\n            case 'space-between':\n                return 'space-between';\n            case 'center':\n                return 'center';\n            case 'end':\n                return 'flex-end';\n            default:\n                return 'flex-start';\n        }\n    }, [justifyContent]);\n\n    const childrenArray = React.Children.toArray(children);\n\n    return (\n        <div\n            id={id}\n            className={`flex ${className}`.trim()}\n            style={{\n                flexDirection,\n                alignItems,\n                justifyContent: justifyContentStyle,\n                gap: `${size}px`,\n                padding,\n                height: fullHeight ? '100%' : undefined,\n                width: fullWidth ? '100%' : undefined,\n            }}\n        >\n            {childrenArray.map((child, index) => (\n                <React.Fragment key={index}>{child}</React.Fragment>\n            ))}\n        </div>\n    );\n};\n\nexport default Spacer;\n"],"names":["Spacer","direction","size","children","align","justifyContent","padding","id","fullHeight","fullWidth","className","flexDirection","alignItems","useMemo","justifyContentStyle","childrenArray","React","jsx","child","index"],"mappings":";;AAeA,MAAMA,IAAgC,CAAC;AAAA,EACnC,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AAAA,EACA,IAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAChB,MAAM;AACF,QAAMC,IAAgBV,MAAc,aAAa,WAAW,OAEtDW,IAAaC,EAAQ,MAAM;AAC7B,YAAQT,GAAA;AAAA,MACJ,KAAK;AACD,eAAO;AAAA,MACX,KAAK;AACD,eAAO;AAAA,MACX,KAAK;AACD,eAAO;AAAA,MACX,KAAK;AACD,eAAO;AAAA,MACX,KAAK;AACD,eAAO;AAAA,MACX;AACI,eAAO;AAAA,IAAA;AAAA,EAEnB,GAAG,CAACA,CAAK,CAAC,GAEJU,IAAsBD,EAAQ,MAAM;AACtC,YAAQR,GAAA;AAAA,MACJ,KAAK;AACD,eAAO;AAAA,MACX,KAAK;AACD,eAAO;AAAA,MACX,KAAK;AACD,eAAO;AAAA,MACX;AACI,eAAO;AAAA,IAAA;AAAA,EAEnB,GAAG,CAACA,CAAc,CAAC,GAEbU,IAAgBC,EAAM,SAAS,QAAQb,CAAQ;AAErD,SACI,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,IAAAV;AAAA,MACA,WAAW,QAAQG,CAAS,GAAG,KAAA;AAAA,MAC/B,OAAO;AAAA,QACH,eAAAC;AAAA,QACA,YAAAC;AAAA,QACA,gBAAgBE;AAAA,QAChB,KAAK,GAAGZ,CAAI;AAAA,QACZ,SAAAI;AAAA,QACA,QAAQE,IAAa,SAAS;AAAA,QAC9B,OAAOC,IAAY,SAAS;AAAA,MAAA;AAAA,MAG/B,UAAAM,EAAc,IAAI,CAACG,GAAOC,MACvB,gBAAAF,EAACD,EAAM,UAAN,EAA4B,UAAAE,EAAA,GAARC,CAAc,CACtC;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/dist/components/Spinner.js

@@ -0,0 +1,86 @@
+import { jsx as r, jsxs as c } from "react/jsx-runtime";
+const l = (e) => {
+  switch (e) {
+    case "xxxsmall":
+      return "w-3.5 h-3.5";
+    // 14px
+    case "xxsmall":
+      return "w-6 h-6";
+    // 24px (close to 25px)
+    case "xsmall":
+      return "w-12 h-12";
+    // 48px (close to 50px)
+    case "small":
+      return "w-24 h-24";
+    // 96px (close to 100px)
+    case "medium":
+      return "w-48 h-48";
+    // 192px (close to 200px)
+    case "large":
+      return "w-96 h-96";
+    // 384px (close to 400px)
+    default:
+      return "w-48 h-48";
+  }
+}, i = (e) => {
+  switch (e) {
+    case "xxxsmall":
+      return "min-h-[14px]";
+    case "xxsmall":
+      return "min-h-[25px]";
+    case "xsmall":
+      return "min-h-[50px]";
+    case "small":
+      return "min-h-[100px]";
+    case "medium":
+      return "min-h-[200px]";
+    case "large":
+      return "min-h-[400px]";
+    default:
+      return "min-h-[200px]";
+  }
+}, o = ({ size: e = "medium", className: s = "", style: t = {} }) => {
+  const a = l(e), n = i(e);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: `flex items-center justify-center ${n} ${s}`,
+      style: t,
+      children: /* @__PURE__ */ c(
+        "svg",
+        {
+          className: `animate-spin motion-reduce:animate-none ${a}`,
+          xmlns: "http://www.w3.org/2000/svg",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          style: { color: "var(--malachite-text-dimmed)" },
+          children: [
+            /* @__PURE__ */ r(
+              "circle",
+              {
+                className: "opacity-25 motion-reduce:opacity-100",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+              }
+            ),
+            /* @__PURE__ */ r(
+              "path",
+              {
+                className: "opacity-75 motion-reduce:opacity-0",
+                fill: "currentColor",
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  o as default
+};
+//# sourceMappingURL=Spinner.js.map

package/dist/components/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":["../../src/components/Spinner.tsx"],"sourcesContent":["import React from 'react';\n\ninterface SpinnerProps {\n    size?: 'xxxsmall' | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large';\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst getSizeClasses = (size: SpinnerProps['size']) => {\n    switch (size) {\n        case 'xxxsmall':\n            return 'w-3.5 h-3.5'; // 14px\n        case 'xxsmall':\n            return 'w-6 h-6'; // 24px (close to 25px)\n        case 'xsmall':\n            return 'w-12 h-12'; // 48px (close to 50px)\n        case 'small':\n            return 'w-24 h-24'; // 96px (close to 100px)\n        case 'medium':\n            return 'w-48 h-48'; // 192px (close to 200px)\n        case 'large':\n            return 'w-96 h-96'; // 384px (close to 400px)\n        default:\n            return 'w-48 h-48'; // 192px default\n    }\n};\n\nconst getContainerSize = (size: SpinnerProps['size']) => {\n    switch (size) {\n        case 'xxxsmall':\n            return 'min-h-[14px]';\n        case 'xxsmall':\n            return 'min-h-[25px]';\n        case 'xsmall':\n            return 'min-h-[50px]';\n        case 'small':\n            return 'min-h-[100px]';\n        case 'medium':\n            return 'min-h-[200px]';\n        case 'large':\n            return 'min-h-[400px]';\n        default:\n            return 'min-h-[200px]';\n    }\n};\n\nconst Spinner: React.FC<SpinnerProps> = ({ size = 'medium', className = '', style = {} }) => {\n    const sizeClasses = getSizeClasses(size);\n    const containerSizeClasses = getContainerSize(size);\n\n    return (\n        <div\n            className={`flex items-center justify-center ${containerSizeClasses} ${className}`}\n            style={style}\n        >\n            {/* Looping motion can cause nausea and dizziness for users with vestibular\n                disorders, and a spinner loops with nothing to look away from. Under reduced\n                motion the arc gives way to the full ring: still plainly busy, and a complete\n                circle rather than an arc frozen mid-turn, which would read as a stalled\n                animation. Same trade as LoadingBar's solid full-width line. */}\n            <svg\n                className={`animate-spin motion-reduce:animate-none ${sizeClasses}`}\n                xmlns=\"http://www.w3.org/2000/svg\"\n                fill=\"none\"\n                viewBox=\"0 0 24 24\"\n                style={{ color: 'var(--malachite-text-dimmed)' }}\n            >\n                <circle\n                    className=\"opacity-25 motion-reduce:opacity-100\"\n                    cx=\"12\"\n                    cy=\"12\"\n                    r=\"10\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"4\"\n                />\n                <path\n                    className=\"opacity-75 motion-reduce:opacity-0\"\n                    fill=\"currentColor\"\n                    d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n                />\n            </svg>\n        </div>\n    );\n};\n\nexport default Spinner;\n"],"names":["getSizeClasses","size","getContainerSize","Spinner","className","style","sizeClasses","containerSizeClasses","jsx","jsxs"],"mappings":";AAQA,MAAMA,IAAiB,CAACC,MAA+B;AACnD,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO;AAAA;AAAA,IACX,KAAK;AACD,aAAO;AAAA;AAAA,IACX,KAAK;AACD,aAAO;AAAA;AAAA,IACX,KAAK;AACD,aAAO;AAAA;AAAA,IACX,KAAK;AACD,aAAO;AAAA;AAAA,IACX,KAAK;AACD,aAAO;AAAA;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB,GAEMC,IAAmB,CAACD,MAA+B;AACrD,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,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,GAEME,IAAkC,CAAC,EAAE,MAAAF,IAAO,UAAU,WAAAG,IAAY,IAAI,OAAAC,IAAQ,CAAA,QAAS;AACzF,QAAMC,IAAcN,EAAeC,CAAI,GACjCM,IAAuBL,EAAiBD,CAAI;AAElD,SACI,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,oCAAoCD,CAAoB,IAAIH,CAAS;AAAA,MAChF,OAAAC;AAAA,MAOA,UAAA,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,WAAW,2CAA2CH,CAAW;AAAA,UACjE,OAAM;AAAA,UACN,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,OAAO,EAAE,OAAO,+BAAA;AAAA,UAEhB,UAAA;AAAA,YAAA,gBAAAE;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,WAAU;AAAA,gBACV,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAE;AAAA,gBACF,QAAO;AAAA,gBACP,aAAY;AAAA,cAAA;AAAA,YAAA;AAAA,YAEhB,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,WAAU;AAAA,gBACV,MAAK;AAAA,gBACL,GAAE;AAAA,cAAA;AAAA,YAAA;AAAA,UACN;AAAA,QAAA;AAAA,MAAA;AAAA,IACJ;AAAA,EAAA;AAGZ;"}

package/dist/components/SplitScreenLayout.js

@@ -0,0 +1,51 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import c from "./CustomIcons/DismissIcon.js";
+const r = ({
+  onClose: i,
+  className: s = ""
+}) => /* @__PURE__ */ e(
+  "button",
+  {
+    type: "button",
+    "aria-label": "Close",
+    onClick: i,
+    className: `flex cursor-pointer items-center justify-center border-0 bg-transparent p-0 transition-colors ${s}`,
+    children: /* @__PURE__ */ e(c, { size: 12 })
+  }
+), x = ({
+  left: i,
+  right: s,
+  logo: a,
+  onClose: l,
+  footer: n
+}) => /* @__PURE__ */ t("div", { className: "flex h-screen w-full overflow-hidden gap-3 bg-[var(--malachite-card-sunken-background)] p-3", children: [
+  /* @__PURE__ */ t("div", { className: "flex min-w-0 flex-1 flex-col items-center px-[60px] py-[40px]", children: [
+    /* @__PURE__ */ t("div", { className: "flex h-6 w-full shrink-0 items-center justify-between", children: [
+      /* @__PURE__ */ e("span", { className: "size-6 shrink-0", "aria-hidden": !0 }),
+      a ?? /* @__PURE__ */ e("span", { className: "size-6 shrink-0", "aria-hidden": !0 }),
+      /* @__PURE__ */ e("span", { className: "flex size-6 shrink-0 items-center justify-center", children: l ? /* @__PURE__ */ e(
+        r,
+        {
+          onClose: l,
+          className: "text-[var(--malachite-text-secondary)] hover:text-[var(--malachite-text-primary)] lg:hidden"
+        }
+      ) : null })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "flex w-full min-h-0 flex-1 flex-col overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: /* @__PURE__ */ e("div", { className: "m-auto flex w-full max-w-[380px] flex-col items-center py-10", children: i }) }),
+    /* @__PURE__ */ e("div", { className: "flex h-6 shrink-0 items-center justify-center", children: n })
+  ] }),
+  /* @__PURE__ */ t("div", { className: "relative hidden min-w-0 flex-1 flex-col items-center justify-center overflow-hidden rounded-[28px] bg-[#2b2b2b] px-[60px] py-[40px] lg:flex", children: [
+    l ? /* @__PURE__ */ e(
+      r,
+      {
+        onClose: l,
+        className: "absolute top-[40px] right-[60px] z-10 text-white/70 hover:text-white"
+      }
+    ) : null,
+    s
+  ] })
+] });
+export {
+  x as default
+};
+//# sourceMappingURL=SplitScreenLayout.js.map

package/dist/components/SplitScreenLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitScreenLayout.js","sources":["../../src/components/SplitScreenLayout.tsx"],"sourcesContent":["import React from 'react';\nimport DismissIcon from './CustomIcons/DismissIcon';\n\ninterface SplitScreenLayoutProps {\n    left: React.ReactNode;\n    right: React.ReactNode;\n    logo?: React.ReactNode;\n    onClose?: () => void;\n    footer?: React.ReactNode;\n}\n\nconst CloseButton: React.FC<{ onClose: () => void; className?: string }> = ({\n    onClose,\n    className = '',\n}) => (\n    <button\n        type=\"button\"\n        aria-label=\"Close\"\n        onClick={onClose}\n        className={`flex cursor-pointer items-center justify-center border-0 bg-transparent p-0 transition-colors ${className}`}\n    >\n        <DismissIcon size={12} />\n    </button>\n);\n\nconst SplitScreenLayout: React.FC<SplitScreenLayoutProps> = ({\n    left,\n    right,\n    logo,\n    onClose,\n    footer,\n}) => (\n    <div className=\"flex h-screen w-full overflow-hidden gap-3 bg-[var(--malachite-card-sunken-background)] p-3\">\n        <div className=\"flex min-w-0 flex-1 flex-col items-center px-[60px] py-[40px]\">\n            <div className=\"flex h-6 w-full shrink-0 items-center justify-between\">\n                <span className=\"size-6 shrink-0\" aria-hidden />\n                {logo ?? <span className=\"size-6 shrink-0\" aria-hidden />}\n                <span className=\"flex size-6 shrink-0 items-center justify-center\">\n                    {onClose ? (\n                        <CloseButton\n                            onClose={onClose}\n                            className=\"text-[var(--malachite-text-secondary)] hover:text-[var(--malachite-text-primary)] lg:hidden\"\n                        />\n                    ) : null}\n                </span>\n            </div>\n            <div className=\"flex w-full min-h-0 flex-1 flex-col overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\">\n                <div className=\"m-auto flex w-full max-w-[380px] flex-col items-center py-10\">\n                    {left}\n                </div>\n            </div>\n            <div className=\"flex h-6 shrink-0 items-center justify-center\">{footer}</div>\n        </div>\n        <div className=\"relative hidden min-w-0 flex-1 flex-col items-center justify-center overflow-hidden rounded-[28px] bg-[#2b2b2b] px-[60px] py-[40px] lg:flex\">\n            {onClose ? (\n                <CloseButton\n                    onClose={onClose}\n                    className=\"absolute top-[40px] right-[60px] z-10 text-white/70 hover:text-white\"\n                />\n            ) : null}\n            {right}\n        </div>\n    </div>\n);\n\nexport default SplitScreenLayout;\n"],"names":["CloseButton","onClose","className","jsx","DismissIcon","SplitScreenLayout","left","right","logo","footer","jsxs"],"mappings":";;AAWA,MAAMA,IAAqE,CAAC;AAAA,EACxE,SAAAC;AAAA,EACA,WAAAC,IAAY;AAChB,MACI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,MAAK;AAAA,IACL,cAAW;AAAA,IACX,SAASF;AAAA,IACT,WAAW,iGAAiGC,CAAS;AAAA,IAErH,UAAA,gBAAAC,EAACC,GAAA,EAAY,MAAM,GAAA,CAAI;AAAA,EAAA;AAC3B,GAGEC,IAAsD,CAAC;AAAA,EACzD,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAP;AAAA,EACA,QAAAQ;AACJ,MACI,gBAAAC,EAAC,OAAA,EAAI,WAAU,+FACX,UAAA;AAAA,EAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,iEACX,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,yDACX,UAAA;AAAA,MAAA,gBAAAP,EAAC,QAAA,EAAK,WAAU,mBAAkB,eAAW,IAAC;AAAA,MAC7CK,KAAQ,gBAAAL,EAAC,QAAA,EAAK,WAAU,mBAAkB,eAAW,IAAC;AAAA,MACvD,gBAAAA,EAAC,QAAA,EAAK,WAAU,oDACX,UAAAF,IACG,gBAAAE;AAAA,QAACH;AAAA,QAAA;AAAA,UACG,SAAAC;AAAA,UACA,WAAU;AAAA,QAAA;AAAA,MAAA,IAEd,KAAA,CACR;AAAA,IAAA,GACJ;AAAA,IACA,gBAAAE,EAAC,SAAI,WAAU,4GACX,4BAAC,OAAA,EAAI,WAAU,gEACV,UAAAG,EAAA,CACL,EAAA,CACJ;AAAA,IACA,gBAAAH,EAAC,OAAA,EAAI,WAAU,iDAAiD,UAAAM,EAAA,CAAO;AAAA,EAAA,GAC3E;AAAA,EACA,gBAAAC,EAAC,OAAA,EAAI,WAAU,+IACV,UAAA;AAAA,IAAAT,IACG,gBAAAE;AAAA,MAACH;AAAA,MAAA;AAAA,QACG,SAAAC;AAAA,QACA,WAAU;AAAA,MAAA;AAAA,IAAA,IAEd;AAAA,IACHM;AAAA,EAAA,EAAA,CACL;AAAA,EAAA,CACJ;"}

package/dist/components/StatBadge.js

@@ -0,0 +1,10 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+const s = ({ count: t, label: a, className: n = "" }) => /* @__PURE__ */ c("div", { className: `flex items-center gap-[6px] ${n}`, children: [
+  /* @__PURE__ */ e("span", { className: "min-w-[16px] h-[16px] px-[4px] rounded-md flex items-center justify-center text-[12px] font-mono font-semibold bg-[var(--malachite-accent-background-glass)] text-[var(--malachite-accent-foreground)]", children: t.toLocaleString() }),
+  /* @__PURE__ */ e("span", { className: "text-[13px] font-medium text-[var(--malachite-accent-foreground)]", children: a })
+] });
+export {
+  s as StatBadge,
+  s as default
+};
+//# sourceMappingURL=StatBadge.js.map

package/dist/components/StatBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatBadge.js","sources":["../../src/components/StatBadge.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface StatBadgeProps {\n    /** The numeric value shown in the pill. */\n    count: number;\n    /** Caption shown next to the pill. */\n    label: string;\n    className?: string;\n}\n\nconst StatBadge: React.FC<StatBadgeProps> = ({ count, label, className = '' }) => (\n    <div className={`flex items-center gap-[6px] ${className}`}>\n        <span className=\"min-w-[16px] h-[16px] px-[4px] rounded-md flex items-center justify-center text-[12px] font-mono font-semibold bg-[var(--malachite-accent-background-glass)] text-[var(--malachite-accent-foreground)]\">\n            {count.toLocaleString()}\n        </span>\n        <span className=\"text-[13px] font-medium text-[var(--malachite-accent-foreground)]\">\n            {label}\n        </span>\n    </div>\n);\n\nexport default StatBadge;\nexport { StatBadge };\n"],"names":["StatBadge","count","label","className","jsxs","jsx"],"mappings":";AAUA,MAAMA,IAAsC,CAAC,EAAE,OAAAC,GAAO,OAAAC,GAAO,WAAAC,IAAY,GAAA,MACrE,gBAAAC,EAAC,OAAA,EAAI,WAAW,+BAA+BD,CAAS,IACpD,UAAA;AAAA,EAAA,gBAAAE,EAAC,QAAA,EAAK,WAAU,0MACX,UAAAJ,EAAM,kBACX;AAAA,EACA,gBAAAI,EAAC,QAAA,EAAK,WAAU,qEACX,UAAAH,EAAA,CACL;AAAA,EAAA,CACJ;"}

package/dist/components/Statistic.js

@@ -0,0 +1,48 @@
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+const A = {
+  small: "text-[22px]",
+  medium: "text-[32px]",
+  large: "text-[40px]"
+}, E = {
+  left: "items-start text-left",
+  center: "items-center text-center",
+  right: "items-end text-right"
+}, L = "flex flex-col gap-[3px]", f = "text-[10px] font-semibold uppercase leading-none tracking-[0.06em] m-0 text-[var(--malachite-text-dimmed)]", g = "font-bold leading-none tracking-[-0.01em] m-0 text-[var(--malachite-text-primary)]", h = "text-[11px] font-medium leading-[1.3] m-0 text-[var(--malachite-text-dimmed)]", _ = ({
+  label: a,
+  value: n,
+  sub: t,
+  accent: s,
+  valueSize: l = "medium",
+  width: i,
+  minWidth: m,
+  padding: c = "0 16px",
+  align: r = "left",
+  className: x = "",
+  style: o = {}
+}) => {
+  const S = `${L} ${E[r]} ${x}`, d = `${g} ${A[l]}`;
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      className: S,
+      style: { width: i, minWidth: m, padding: c, ...o },
+      children: [
+        /* @__PURE__ */ e("span", { className: f, children: a }),
+        /* @__PURE__ */ e(
+          "span",
+          {
+            className: d,
+            style: s ? { color: s } : void 0,
+            children: n
+          }
+        ),
+        t != null && /* @__PURE__ */ e("span", { className: h, children: t })
+      ]
+    }
+  );
+};
+export {
+  _ as Statistic,
+  _ as default
+};
+//# sourceMappingURL=Statistic.js.map

package/dist/components/Statistic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Statistic.js","sources":["../../src/components/Statistic.tsx"],"sourcesContent":["import React from 'react';\n\nexport type StatisticValueSize = 'small' | 'medium' | 'large';\n\nexport interface StatisticProps {\n    label: string | React.ReactNode;\n    value: string | number | React.ReactNode;\n    sub?: string | React.ReactNode;\n    accent?: string;\n    valueSize?: StatisticValueSize;\n    width?: string | number;\n    minWidth?: string | number;\n    padding?: string;\n    align?: 'left' | 'center' | 'right';\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst VALUE_SIZE_CLASSES: Record<StatisticValueSize, string> = {\n    small: 'text-[22px]',\n    medium: 'text-[32px]',\n    large: 'text-[40px]',\n};\n\nconst ALIGN_CLASSES: Record<NonNullable<StatisticProps['align']>, string> = {\n    left: 'items-start text-left',\n    center: 'items-center text-center',\n    right: 'items-end text-right',\n};\n\nconst CONTAINER_CLASSES = 'flex flex-col gap-[3px]';\nconst LABEL_CLASSES =\n    'text-[10px] font-semibold uppercase leading-none tracking-[0.06em] m-0 text-[var(--malachite-text-dimmed)]';\nconst VALUE_BASE_CLASSES =\n    'font-bold leading-none tracking-[-0.01em] m-0 text-[var(--malachite-text-primary)]';\nconst SUB_CLASSES =\n    'text-[11px] font-medium leading-[1.3] m-0 text-[var(--malachite-text-dimmed)]';\n\nconst Statistic: React.FC<StatisticProps> = ({\n    label,\n    value,\n    sub,\n    accent,\n    valueSize = 'medium',\n    width,\n    minWidth,\n    padding = '0 16px',\n    align = 'left',\n    className = '',\n    style = {},\n}) => {\n    const containerClasses = `${CONTAINER_CLASSES} ${ALIGN_CLASSES[align]} ${className}`;\n    const valueClasses = `${VALUE_BASE_CLASSES} ${VALUE_SIZE_CLASSES[valueSize]}`;\n\n    return (\n        <div\n            className={containerClasses}\n            style={{ width, minWidth, padding, ...style }}\n        >\n            <span className={LABEL_CLASSES}>{label}</span>\n            <span\n                className={valueClasses}\n                style={accent ? { color: accent } : undefined}\n            >\n                {value}\n            </span>\n            {sub !== undefined && sub !== null && <span className={SUB_CLASSES}>{sub}</span>}\n        </div>\n    );\n};\n\nexport default Statistic;\nexport { Statistic };\n"],"names":["VALUE_SIZE_CLASSES","ALIGN_CLASSES","CONTAINER_CLASSES","LABEL_CLASSES","VALUE_BASE_CLASSES","SUB_CLASSES","Statistic","label","value","sub","accent","valueSize","width","minWidth","padding","align","className","style","containerClasses","valueClasses","jsxs","jsx"],"mappings":";AAkBA,MAAMA,IAAyD;AAAA,EAC3D,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACX,GAEMC,IAAsE;AAAA,EACxE,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACX,GAEMC,IAAoB,2BACpBC,IACF,8GACEC,IACF,sFACEC,IACF,iFAEEC,IAAsC,CAAC;AAAA,EACzC,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ,CAAA;AACZ,MAAM;AACF,QAAMC,IAAmB,GAAGhB,CAAiB,IAAID,EAAcc,CAAK,CAAC,IAAIC,CAAS,IAC5EG,IAAe,GAAGf,CAAkB,IAAIJ,EAAmBW,CAAS,CAAC;AAE3E,SACI,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWF;AAAA,MACX,OAAO,EAAE,OAAAN,GAAO,UAAAC,GAAU,SAAAC,GAAS,GAAGG,EAAA;AAAA,MAEtC,UAAA;AAAA,QAAA,gBAAAI,EAAC,QAAA,EAAK,WAAWlB,GAAgB,UAAAI,GAAM;AAAA,QACvC,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWF;AAAA,YACX,OAAOT,IAAS,EAAE,OAAOA,MAAW;AAAA,YAEnC,UAAAF;AAAA,UAAA;AAAA,QAAA;AAAA,QAEiBC,KAAQ,0BAAS,QAAA,EAAK,WAAWJ,GAAc,UAAAI,EAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGrF;"}

package/dist/components/StatusBadge.js

@@ -0,0 +1,56 @@
+import { jsx as r } from "react/jsx-runtime";
+const n = {
+  success: "var(--malachite-text-success, rgb(2, 122, 66))",
+  error: "var(--malachite-text-error, rgb(237, 53, 54))",
+  warning: "var(--malachite-text-warning, rgb(150, 88, 10))",
+  info: "var(--malachite-tag-primary-foreground, rgb(37, 130, 234))"
+}, s = {
+  success: /* @__PURE__ */ r("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" }),
+  error: /* @__PURE__ */ r("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }),
+  warning: /* @__PURE__ */ r("path", { d: "M10.75 5h2.5v9.5h-2.5zm0 11.5h2.5v2.5h-2.5z" }),
+  info: /* @__PURE__ */ r("path", { d: "M10.75 5h2.5v2.5h-2.5zm0 4.5h2.5v9.5h-2.5z" })
+}, c = {
+  default: 0.5,
+  bold: 1
+}, d = ({
+  type: e = "success",
+  size: t = 48,
+  glyph: l = "default",
+  className: o = "",
+  "aria-label": i
+}) => {
+  const a = Math.round(t * c[l]);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: `flex items-center justify-center rounded-full ${o}`,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "50%",
+        width: `${t}px`,
+        height: `${t}px`,
+        backgroundColor: n[e]
+      },
+      children: /* @__PURE__ */ r(
+        "svg",
+        {
+          width: a,
+          height: a,
+          viewBox: "0 0 24 24",
+          fill: "currentColor",
+          role: "img",
+          "aria-label": i ?? e,
+          style: { color: "#fff" },
+          children: s[e]
+        }
+      )
+    }
+  );
+};
+export {
+  d as StatusBadge,
+  d as default
+};
+//# sourceMappingURL=StatusBadge.js.map

package/dist/components/StatusBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.js","sources":["../../src/components/StatusBadge.tsx"],"sourcesContent":["import React from 'react';\n\nexport type StatusBadgeType = 'success' | 'error' | 'warning' | 'info';\n\n/**\n * How much of the badge the glyph fills.\n *\n * `default` is half the diameter, which is the right proportion at the sizes a badge is\n * usually drawn. `bold` is for the small end: at the 14px a table row gives it, half a\n * badge is a mark under 3px tall, and the tone is doing all the work.\n *\n * `bold` takes the glyph's box to the full diameter rather than merely most of it, so the\n * box and the badge share an edge. Anything short of that leaves a fractional margin at odd\n * sizes (13px inside 14px), which the browser rounds onto one side and draws off centre.\n * Nothing collides with the edge: the furthest point of any glyph is the tick's, at 86% of\n * the radius.\n */\nexport type StatusBadgeGlyph = 'default' | 'bold';\n\nexport interface StatusBadgeProps {\n    type?: StatusBadgeType;\n    size?: number;\n    glyph?: StatusBadgeGlyph;\n    className?: string;\n    'aria-label'?: string;\n}\n\n// Use the same foreground hues as the matching text tokens so the badge reads as\n// the same green/red/etc. as the copy beside it (the *-background tokens are blown\n// out in dark mode).\nconst BACKGROUNDS: Record<StatusBadgeType, string> = {\n    success: 'var(--malachite-text-success, rgb(2, 122, 66))',\n    error: 'var(--malachite-text-error, rgb(237, 53, 54))',\n    warning: 'var(--malachite-text-warning, rgb(150, 88, 10))',\n    info: 'var(--malachite-tag-primary-foreground, rgb(37, 130, 234))',\n};\n\n// Filled glyphs on a 24×24 grid. They must be filled shapes rather than strokes: the svg\n// sets `fill=\"currentColor\"` and the paths inherit it, so `color` is what paints them.\n//\n// All four span y 5 to 19, so no type reads as a smaller badge than another. The bar and\n// dot of `warning`/`info` are drawn slightly wider than the diagonal stroke of the other\n// two, because an upright shape of the same thickness reads lighter than a diagonal one.\nconst GLYPHS: Record<StatusBadgeType, React.ReactNode> = {\n    success: <path d=\"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z\" />,\n    error: (\n        <path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\" />\n    ),\n    warning: <path d=\"M10.75 5h2.5v9.5h-2.5zm0 11.5h2.5v2.5h-2.5z\" />,\n    info: <path d=\"M10.75 5h2.5v2.5h-2.5zm0 4.5h2.5v9.5h-2.5z\" />,\n};\n\n/** How much of the badge's diameter the glyph's box takes, per `glyph`. */\nconst GLYPH_SCALES: Record<StatusBadgeGlyph, number> = {\n    default: 0.5,\n    bold: 1,\n};\n\nconst StatusBadge: React.FC<StatusBadgeProps> = ({\n    type = 'success',\n    size = 48,\n    glyph = 'default',\n    className = '',\n    'aria-label': ariaLabel,\n}) => {\n    const iconSize = Math.round(size * GLYPH_SCALES[glyph]);\n\n    return (\n        <div\n            className={`flex items-center justify-center rounded-full ${className}`}\n            // The circle and the centring are repeated inline rather than left to the\n            // Tailwind above, so the badge survives outside a shadow root. A consumer that\n            // drops one in beside ordinary page markup would otherwise get a square with\n            // the glyph jammed in a corner, and be forced to wrap it in a `ThemeScope` or\n            // `MalachiteContext` purely to get its shape back.\n            style={{\n                display: 'flex',\n                alignItems: 'center',\n                justifyContent: 'center',\n                borderRadius: '50%',\n                width: `${size}px`,\n                height: `${size}px`,\n                backgroundColor: BACKGROUNDS[type],\n            }}\n        >\n            <svg\n                width={iconSize}\n                height={iconSize}\n                viewBox=\"0 0 24 24\"\n                // Stated here rather than left to the library's `svg path` rule, which is\n                // scoped to the shadow root: outside one the paths fall back to their\n                // initial black and the glyph disappears into a dark badge.\n                fill=\"currentColor\"\n                // `role=\"img\"` with `aria-label` names the badge without an SVG `<title>`,\n                // which browsers render as a native tooltip: on a badge that a consumer has\n                // already wrapped in a real one, that fired a second square-edged box\n                // alongside it and read the tone name out as its text.\n                role=\"img\"\n                aria-label={ariaLabel ?? type}\n                style={{ color: '#fff' }}\n            >\n                {GLYPHS[type]}\n            </svg>\n        </div>\n    );\n};\n\nexport default StatusBadge;\nexport { StatusBadge };\n"],"names":["BACKGROUNDS","GLYPHS","jsx","GLYPH_SCALES","StatusBadge","type","size","glyph","className","ariaLabel","iconSize"],"mappings":";AA8BA,MAAMA,IAA+C;AAAA,EACjD,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACV,GAQMC,IAAmD;AAAA,EACrD,SAAS,gBAAAC,EAAC,QAAA,EAAK,GAAE,oDAAA,CAAoD;AAAA,EACrE,OACI,gBAAAA,EAAC,QAAA,EAAK,GAAE,wGAAA,CAAwG;AAAA,EAEpH,SAAS,gBAAAA,EAAC,QAAA,EAAK,GAAE,8CAAA,CAA8C;AAAA,EAC/D,MAAM,gBAAAA,EAAC,QAAA,EAAK,GAAE,6CAAA,CAA6C;AAC/D,GAGMC,IAAiD;AAAA,EACnD,SAAS;AAAA,EACT,MAAM;AACV,GAEMC,IAA0C,CAAC;AAAA,EAC7C,MAAAC,IAAO;AAAA,EACP,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,cAAcC;AAClB,MAAM;AACF,QAAMC,IAAW,KAAK,MAAMJ,IAAOH,EAAaI,CAAK,CAAC;AAEtD,SACI,gBAAAL;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW,iDAAiDM,CAAS;AAAA,MAMrE,OAAO;AAAA,QACH,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,cAAc;AAAA,QACd,OAAO,GAAGF,CAAI;AAAA,QACd,QAAQ,GAAGA,CAAI;AAAA,QACf,iBAAiBN,EAAYK,CAAI;AAAA,MAAA;AAAA,MAGrC,UAAA,gBAAAH;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,OAAOQ;AAAA,UACP,QAAQA;AAAA,UACR,SAAQ;AAAA,UAIR,MAAK;AAAA,UAKL,MAAK;AAAA,UACL,cAAYD,KAAaJ;AAAA,UACzB,OAAO,EAAE,OAAO,OAAA;AAAA,UAEf,YAAOA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IAChB;AAAA,EAAA;AAGZ;"}

package/dist/components/StepTabs.js

@@ -0,0 +1,52 @@
+import { jsx as e, jsxs as p } from "react/jsx-runtime";
+import u from "./CustomIcons/CheckIcon.js";
+import b from "./CustomIcons/StepCurrentIcon.js";
+import h from "./CustomIcons/StepUpcomingIcon.js";
+import { FOCUS_RING as x } from "./focusRing.js";
+const f = {
+  current: "shadow-default border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] text-[var(--malachite-text-primary)]",
+  complete: "border-transparent bg-[var(--malachite-success-background-glass)] text-[var(--malachite-text-success)]",
+  upcoming: "border-transparent bg-[var(--malachite-card-dimmed-background)] text-[var(--malachite-text-secondary)]"
+}, g = ({ state: a }) => a === "complete" ? /* @__PURE__ */ e(u, { size: 14 }) : a === "current" ? /* @__PURE__ */ e(b, { size: 14 }) : /* @__PURE__ */ e(h, { size: 14 }), w = ({
+  items: a,
+  activeKey: n,
+  completedKeys: l = [],
+  onChange: c,
+  "aria-label": o,
+  "aria-labelledby": s,
+  className: i = ""
+}) => {
+  const d = new Set(l);
+  return /* @__PURE__ */ e(
+    "ol",
+    {
+      "aria-label": o,
+      "aria-labelledby": s,
+      className: `m-0 flex list-none gap-2 p-0 ${i}`.trim(),
+      children: a.map((r, m) => {
+        const t = r.key === n ? "current" : d.has(r.key) ? "complete" : "upcoming";
+        return /* @__PURE__ */ e("li", { className: "min-w-0 flex-1", children: /* @__PURE__ */ p(
+          "button",
+          {
+            type: "button",
+            disabled: r.disabled,
+            "aria-current": t === "current" ? "step" : void 0,
+            onClick: () => c(r.key),
+            className: `${x} flex w-full cursor-pointer items-center gap-2 overflow-hidden rounded-lg border px-3 py-2.5 text-left text-[13px] font-semibold transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${f[t]}`,
+            children: [
+              /* @__PURE__ */ e("span", { "aria-hidden": "true", className: "flex shrink-0 items-center", children: /* @__PURE__ */ e(g, { state: t }) }),
+              /* @__PURE__ */ e("span", { className: "min-w-0 flex-1 truncate", children: r.label }),
+              t === "complete" && /* @__PURE__ */ e("span", { className: "sr-only", children: "Completed" }),
+              /* @__PURE__ */ e("span", { className: "shrink-0 font-normal text-[var(--malachite-text-secondary)]", children: r.hint ?? `Step ${m + 1}` })
+            ]
+          }
+        ) }, r.key);
+      })
+    }
+  );
+};
+export {
+  w as StepTabs,
+  w as default
+};
+//# sourceMappingURL=StepTabs.js.map

package/dist/components/StepTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepTabs.js","sources":["../../src/components/StepTabs.tsx"],"sourcesContent":["import React from 'react';\nimport CheckIcon from './CustomIcons/CheckIcon';\nimport StepCurrentIcon from './CustomIcons/StepCurrentIcon';\nimport StepUpcomingIcon from './CustomIcons/StepUpcomingIcon';\nimport { FOCUS_RING } from './focusRing';\n\nexport interface StepTabItem {\n    key: string;\n    label: string;\n    /** Position marker shown at the trailing edge. Defaults to `Step ${index + 1}`. */\n    hint?: string;\n    disabled?: boolean;\n}\n\nexport interface StepTabsProps {\n    items: StepTabItem[];\n    activeKey: string;\n    /** Steps already satisfied. They render a check and stay reachable, so a user can go back. */\n    completedKeys?: string[];\n    onChange: (key: string) => void;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    className?: string;\n}\n\ntype StepState = 'current' | 'complete' | 'upcoming';\n\nconst STATE_CLASSES: Record<StepState, string> = {\n    current:\n        'shadow-default border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] text-[var(--malachite-text-primary)]',\n    complete:\n        'border-transparent bg-[var(--malachite-success-background-glass)] text-[var(--malachite-text-success)]',\n    upcoming:\n        'border-transparent bg-[var(--malachite-card-dimmed-background)] text-[var(--malachite-text-secondary)]',\n};\n\nconst StepIcon: React.FC<{ state: StepState }> = ({ state }) => {\n    if (state === 'complete') {\n        return <CheckIcon size={14} />;\n    }\n    if (state === 'current') {\n        return <StepCurrentIcon size={14} />;\n    }\n    return <StepUpcomingIcon size={14} />;\n};\n\n/**\n * A horizontal step navigator whose steps are destinations, unlike the read-only `Stepper`.\n * Each step is a button with `aria-current=\"step\"`, not a tab.\n */\nexport const StepTabs: React.FC<StepTabsProps> = ({\n    items,\n    activeKey,\n    completedKeys = [],\n    onChange,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    className = '',\n}) => {\n    const completed = new Set(completedKeys);\n\n    return (\n        <ol\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            className={`m-0 flex list-none gap-2 p-0 ${className}`.trim()}\n        >\n            {items.map((item, index) => {\n                const state: StepState =\n                    item.key === activeKey\n                        ? 'current'\n                        : completed.has(item.key)\n                          ? 'complete'\n                          : 'upcoming';\n\n                return (\n                    <li key={item.key} className=\"min-w-0 flex-1\">\n                        <button\n                            type=\"button\"\n                            disabled={item.disabled}\n                            aria-current={state === 'current' ? 'step' : undefined}\n                            onClick={() => onChange(item.key)}\n                            className={`${FOCUS_RING} flex w-full cursor-pointer items-center gap-2 overflow-hidden rounded-lg border px-3 py-2.5 text-left text-[13px] font-semibold transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${STATE_CLASSES[state]}`}\n                        >\n                            <span aria-hidden=\"true\" className=\"flex shrink-0 items-center\">\n                                <StepIcon state={state} />\n                            </span>\n                            <span className=\"min-w-0 flex-1 truncate\">{item.label}</span>\n                            {/* The state is otherwise carried only by colour and an aria-hidden icon. */}\n                            {state === 'complete' && <span className=\"sr-only\">Completed</span>}\n                            <span className=\"shrink-0 font-normal text-[var(--malachite-text-secondary)]\">\n                                {item.hint ?? `Step ${index + 1}`}\n                            </span>\n                        </button>\n                    </li>\n                );\n            })}\n        </ol>\n    );\n};\n\nexport default StepTabs;\n"],"names":["STATE_CLASSES","StepIcon","state","jsx","CheckIcon","StepCurrentIcon","StepUpcomingIcon","StepTabs","items","activeKey","completedKeys","onChange","ariaLabel","ariaLabelledBy","className","completed","item","index","jsxs","FOCUS_RING"],"mappings":";;;;;AA2BA,MAAMA,IAA2C;AAAA,EAC7C,SACI;AAAA,EACJ,UACI;AAAA,EACJ,UACI;AACR,GAEMC,IAA2C,CAAC,EAAE,OAAAC,QAC5CA,MAAU,aACH,gBAAAC,EAACC,GAAA,EAAU,MAAM,GAAA,CAAI,IAE5BF,MAAU,YACH,gBAAAC,EAACE,GAAA,EAAgB,MAAM,GAAA,CAAI,IAE/B,gBAAAF,EAACG,GAAA,EAAiB,MAAM,GAAA,CAAI,GAO1BC,IAAoC,CAAC;AAAA,EAC9C,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,eAAAC,IAAgB,CAAA;AAAA,EAChB,UAAAC;AAAA,EACA,cAAcC;AAAA,EACd,mBAAmBC;AAAA,EACnB,WAAAC,IAAY;AAChB,MAAM;AACF,QAAMC,IAAY,IAAI,IAAIL,CAAa;AAEvC,SACI,gBAAAP;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAYS;AAAA,MACZ,mBAAiBC;AAAA,MACjB,WAAW,gCAAgCC,CAAS,GAAG,KAAA;AAAA,MAEtD,UAAAN,EAAM,IAAI,CAACQ,GAAMC,MAAU;AACxB,cAAMf,IACFc,EAAK,QAAQP,IACP,YACAM,EAAU,IAAIC,EAAK,GAAG,IACpB,aACA;AAEZ,eACI,gBAAAb,EAAC,MAAA,EAAkB,WAAU,kBACzB,UAAA,gBAAAe;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,UAAUF,EAAK;AAAA,YACf,gBAAcd,MAAU,YAAY,SAAS;AAAA,YAC7C,SAAS,MAAMS,EAASK,EAAK,GAAG;AAAA,YAChC,WAAW,GAAGG,CAAU,sMAAsMnB,EAAcE,CAAK,CAAC;AAAA,YAElP,UAAA;AAAA,cAAA,gBAAAC,EAAC,QAAA,EAAK,eAAY,QAAO,WAAU,8BAC/B,UAAA,gBAAAA,EAACF,GAAA,EAAS,OAAAC,GAAc,EAAA,CAC5B;AAAA,cACA,gBAAAC,EAAC,QAAA,EAAK,WAAU,2BAA2B,YAAK,OAAM;AAAA,cAErDD,MAAU,cAAc,gBAAAC,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,aAAS;AAAA,cAC5D,gBAAAA,EAAC,UAAK,WAAU,+DACX,YAAK,QAAQ,QAAQc,IAAQ,CAAC,GAAA,CACnC;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA,EACJ,GAjBKD,EAAK,GAkBd;AAAA,MAER,CAAC;AAAA,IAAA;AAAA,EAAA;AAGb;"}

package/dist/components/Stepper.js

@@ -0,0 +1,40 @@
+import { jsx as e } from "react/jsx-runtime";
+const f = ({
+  steps: i,
+  active: t,
+  onChange: o,
+  className: p = "",
+  "aria-label": l,
+  "aria-labelledby": s
+}) => {
+  const m = Array.from({ length: Math.max(0, i) }, (r, a) => a);
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      role: !!(l ?? s) ? "group" : void 0,
+      "aria-label": l,
+      "aria-labelledby": s,
+      className: `flex gap-[4px] ${p}`,
+      children: m.map((r) => {
+        const a = r === t, u = r < t, c = a ? "var(--malachite-accent-foreground)" : u ? "color-mix(in srgb, var(--malachite-accent-foreground), white 50%)" : "var(--malachite-card-border)", n = `h-[8px] rounded-full transition-all ${a ? "w-[28px]" : "w-[16px]"}`;
+        return o ? /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Go to step ${r + 1}`,
+            "aria-current": a ? "step" : void 0,
+            onClick: () => o(r),
+            className: `${n} border-0 p-0 cursor-pointer`,
+            style: { backgroundColor: c }
+          },
+          r
+        ) : /* @__PURE__ */ e("span", { className: n, style: { backgroundColor: c } }, r);
+      })
+    }
+  );
+};
+export {
+  f as Stepper,
+  f as default
+};
+//# sourceMappingURL=Stepper.js.map

package/dist/components/Stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stepper.js","sources":["../../src/components/Stepper.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface StepperProps {\n    /** Total number of steps. */\n    steps: number;\n    /** Active step index (0-based). */\n    active: number;\n    /** When provided, each step becomes a clickable control. */\n    onChange?: (index: number) => void;\n    className?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n}\n\nconst Stepper: React.FC<StepperProps> = ({\n    steps,\n    active,\n    onChange,\n    className = '',\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n}) => {\n    const segments = Array.from({ length: Math.max(0, steps) }, (_, index) => index);\n    // A role is what makes aria-label apply at all, but an unnamed group is pure noise\n    // in the a11y tree, so the role only appears alongside a name. progressbar would be\n    // wrong either way: its contents are presentational and cannot expose the step buttons.\n    const isNamed = Boolean(ariaLabel ?? ariaLabelledBy);\n\n    return (\n        <div\n            role={isNamed ? 'group' : undefined}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            className={`flex gap-[4px] ${className}`}\n        >\n            {segments.map((index) => {\n                const isActive = index === active;\n                const isCompleted = index < active;\n                // Completed steps get a lightened accent, the active step the full accent,\n                // upcoming steps a neutral border colour.\n                const backgroundColor = isActive\n                    ? 'var(--malachite-accent-foreground)'\n                    : isCompleted\n                      ? 'color-mix(in srgb, var(--malachite-accent-foreground), white 50%)'\n                      : 'var(--malachite-card-border)';\n                const base = `h-[8px] rounded-full transition-all ${isActive ? 'w-[28px]' : 'w-[16px]'}`;\n\n                if (!onChange) {\n                    return <span key={index} className={base} style={{ backgroundColor }} />;\n                }\n\n                return (\n                    <button\n                        key={index}\n                        type=\"button\"\n                        aria-label={`Go to step ${index + 1}`}\n                        aria-current={isActive ? 'step' : undefined}\n                        onClick={() => onChange(index)}\n                        className={`${base} border-0 p-0 cursor-pointer`}\n                        style={{ backgroundColor }}\n                    />\n                );\n            })}\n        </div>\n    );\n};\n\nexport default Stepper;\nexport { Stepper };\n"],"names":["Stepper","steps","active","onChange","className","ariaLabel","ariaLabelledBy","segments","_","index","jsx","isActive","isCompleted","backgroundColor","base"],"mappings":";AAcA,MAAMA,IAAkC,CAAC;AAAA,EACrC,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,cAAcC;AAAA,EACd,mBAAmBC;AACvB,MAAM;AACF,QAAMC,IAAW,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAGN,CAAK,EAAA,GAAK,CAACO,GAAGC,MAAUA,CAAK;AAM/E,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAJQ,GAAQL,KAAaC,KAIb,UAAU;AAAA,MAC1B,cAAYD;AAAA,MACZ,mBAAiBC;AAAA,MACjB,WAAW,kBAAkBF,CAAS;AAAA,MAErC,UAAAG,EAAS,IAAI,CAACE,MAAU;AACrB,cAAME,IAAWF,MAAUP,GACrBU,IAAcH,IAAQP,GAGtBW,IAAkBF,IAClB,uCACAC,IACE,sEACA,gCACFE,IAAO,uCAAuCH,IAAW,aAAa,UAAU;AAEtF,eAAKR,IAKD,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YAEG,MAAK;AAAA,YACL,cAAY,cAAcD,IAAQ,CAAC;AAAA,YACnC,gBAAcE,IAAW,SAAS;AAAA,YAClC,SAAS,MAAMR,EAASM,CAAK;AAAA,YAC7B,WAAW,GAAGK,CAAI;AAAA,YAClB,OAAO,EAAE,iBAAAD,EAAA;AAAA,UAAgB;AAAA,UANpBJ;AAAA,QAAA,IALF,gBAAAC,EAAC,UAAiB,WAAWI,GAAM,OAAO,EAAE,iBAAAD,OAAjCJ,CAAoD;AAAA,MAc9E,CAAC;AAAA,IAAA;AAAA,EAAA;AAGb;"}