@hraness/design-kit 0.34.0 → 0.35.0

package/dist/{chunk-h4k7yv6x.js → chunk-fjf81bww.js}

@@ -1,3 +1,28 @@
+import {
+  highlightCode
+} from "./chunk-he8eznb1.js";
+
+// src/react/syntax-code.tsx
+import { jsx } from "react/jsx-runtime";
+function SyntaxCode({
+  className,
+  code,
+  language,
+  styles
+}) {
+  const highlighted = highlightCode(code, language, styles === undefined ? {} : {
+    styles
+  });
+  const classes = className === undefined ? highlighted.className : `${highlighted.className} ${className}`;
+  return /* @__PURE__ */ jsx("code", {
+    className: classes,
+    "data-language": highlighted.language,
+    dangerouslySetInnerHTML: {
+      __html: highlighted.html
+    }
+  });
+}
+
 // src/react/platform-install.stylex.ts
 import * as stylex from "@stylexjs/stylex";
 var ink = "var(--hraness-marketing-ink, var(--foreground, CanvasText))";
@@ -118,11 +143,12 @@ var platformInstallStyles = {
   },
   command: {
     kWkggS: "xvpcapb x9yvj25",
-    kVAM5u: "x1ls9zlr x1w1tqly",
+    kVAM5u: "xtxfw9o x1w1tqly",
     kaIpWk: "x1yt6v20",
     ksu8eU: "x1y0btm7",
     kMzoRj: "xmkeg23",
     kB7OPa: "x9f619",
+    kGVxlE: "x1s13key xwaqzdf",
     k1xSpc: "xrvj5dj",
     k7Eaqz: "xeuugli",
     kVQacm: "xb3r6kr",
@@ -365,4 +391,4 @@ function platformInstallClassName(parts, caller) {
   return [...hookNames, atoms, caller].filter(Boolean).join(" ");
 }
 
-export { platformInstallClassName };
+export { SyntaxCode, platformInstallClassName };

package/dist/chunk-gmea6p0d.js

@@ -0,0 +1,13 @@
+// src/diagrams.ts
+var diagramMetrics = Object.freeze({
+  labelSize: 20,
+  detailSize: 16,
+  strokeWidth: 1.5,
+  arrowheadSize: 6,
+  nodePadding: 24,
+  nodeGap: 48,
+  minimumCanvasWidth: 640,
+  fontFamily: '"Nebula Sans", ui-sans-serif, system-ui, sans-serif'
+});
+
+export { diagramMetrics };

package/dist/index.js

@@ -64,7 +64,10 @@ import {
   themeFor,
   typeScale,
   typography
-} from "./chunk-4d79eskk.js";
+} from "./chunk-c80g58j1.js";
+import {
+  diagramMetrics
+} from "./chunk-gmea6p0d.js";
 import {
   detectPlatform,
   isKnownPlatformId,
@@ -189,6 +192,7 @@ export {
   fontFallbacks,
   escapeArticleHtml,
   elevation,
+  diagramMetrics,
   detectPlatform,
   designThemes,
   designThemeStorageKey,

package/dist/mockups/client.js

@@ -335,7 +335,7 @@ function StepThrough({
           className: "hkm-tabs hkm-step-tabs",
           role: "tablist",
           children: steps.map((entry, position) => /* @__PURE__ */ jsxs("button", {
-            "aria-controls": `${id}-panel`,
+            "aria-controls": `${id}-panel-${entry.id}`,
             "aria-selected": position === current,
             className: "hkm-tab",
             "data-hkm-done": position < current ? "" : undefined,
@@ -363,32 +363,52 @@ function StepThrough({
         })
       }),
       /* @__PURE__ */ jsx("div", {
-        "aria-labelledby": `${id}-tab-${step.id}`,
-        className: "hkm-showcase-stage",
-        "data-hkm-animated": animated ? "" : undefined,
-        id: `${id}-panel`,
-        role: "tabpanel",
-        children: /* @__PURE__ */ jsx(FitToWidth, {
-          minWidth,
-          children: step.render({
-            animated,
-            theme
+        className: "hkm-showcase-stage hkm-step-stage",
+        children: steps.map((entry, position) => /* @__PURE__ */ jsx("div", {
+          "aria-hidden": position !== current,
+          "aria-labelledby": `${id}-tab-${entry.id}`,
+          className: "hkm-step-panel",
+          "data-hkm-animated": position === current && animated ? "" : undefined,
+          id: `${id}-panel-${entry.id}`,
+          inert: position !== current,
+          role: "tabpanel",
+          children: /* @__PURE__ */ jsx(FitToWidth, {
+            minWidth,
+            children: entry.render({
+              animated: position === current && animated,
+              theme
+            })
           })
-        })
+        }, entry.id))
       }),
       /* @__PURE__ */ jsxs("div", {
         className: "hkm-step-nav",
         children: [
           /* @__PURE__ */ jsx("button", {
+            "aria-label": "Back",
             className: "hkm-step-button",
             disabled: current === 0,
             onClick: () => go(current - 1),
             type: "button",
-            children: "Back"
+            children: /* @__PURE__ */ jsx("svg", {
+              "aria-hidden": "true",
+              focusable: "false",
+              height: "28",
+              viewBox: "0 0 24 24",
+              width: "28",
+              children: /* @__PURE__ */ jsx("path", {
+                d: "m14.5 5-7 7 7 7",
+                fill: "none",
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "1.75"
+              })
+            })
           }),
           /* @__PURE__ */ jsxs("span", {
             "aria-live": "polite",
-            className: "hkm-showcase-status",
+            className: "hkm-showcase-status hkm-step-announcement",
             children: [
               "Step ",
               current + 1,
@@ -398,12 +418,27 @@ function StepThrough({
             ]
           }),
           /* @__PURE__ */ jsx("button", {
+            "aria-label": "Next",
             className: "hkm-step-button",
             "data-hkm-primary": "",
             disabled: current === steps.length - 1,
             onClick: () => go(current + 1),
             type: "button",
-            children: "Next"
+            children: /* @__PURE__ */ jsx("svg", {
+              "aria-hidden": "true",
+              focusable: "false",
+              height: "28",
+              viewBox: "0 0 24 24",
+              width: "28",
+              children: /* @__PURE__ */ jsx("path", {
+                d: "m9.5 5 7 7-7 7",
+                fill: "none",
+                stroke: "currentColor",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: "1.75"
+              })
+            })
           })
         ]
       }),