@viax.io/uxm 4.36.0

package/dist/previews/composite/login-page-preview.js

@@ -0,0 +1,199 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { ButtonPrimary, ButtonTertiary } from "../../ui/index.js";
+import { FormField } from "../../ui/index.js";
+import { TextInput } from "../../ui/index.js";
+function LoginPagePreview({ styles, variants, shell }) {
+  const brand = shell?.brand ?? {};
+  const theme = shell?.theme ?? "light";
+  const variant = variants.background ?? "solid";
+  const bgColor = styles.bgColor;
+  const patternColor = styles.patternColor;
+  const patternSize = styles.patternSize;
+  const imageUrl = styles.imageUrl;
+  const imageFit = styles.imageFit ?? "cover";
+  const fileRef = useRef(null);
+  const [uploading, setUploading] = useState(false);
+  const [uploadError, setUploadError] = useState(null);
+  const [uploadNotice, setUploadNotice] = useState(null);
+  const upload = async (file) => {
+    if (!shell?.uploadAsset) return;
+    setUploading(true);
+    setUploadError(null);
+    setUploadNotice(null);
+    try {
+      const data = await shell.uploadAsset(file, "logo");
+      if (!data?.url) throw new Error("Upload failed");
+      navigator.clipboard?.writeText(data.url).catch(() => {
+      });
+      setUploadNotice("Uploaded \u2014 URL copied to clipboard");
+    } catch (e) {
+      setUploadError(e instanceof Error ? e.message : "Upload failed");
+    } finally {
+      setUploading(false);
+    }
+  };
+  let backgroundStyle = { backgroundColor: bgColor };
+  if (variant === "dots") {
+    backgroundStyle = {
+      ...backgroundStyle,
+      backgroundImage: `radial-gradient(circle, ${patternColor} 1px, transparent 1px)`,
+      backgroundSize: `${patternSize}px ${patternSize}px`
+    };
+  } else if (variant === "stripes") {
+    backgroundStyle = {
+      ...backgroundStyle,
+      backgroundImage: `repeating-linear-gradient(45deg, ${patternColor} 0 1px, transparent 1px ${patternSize}px)`
+    };
+  } else if (variant === "image" && imageUrl) {
+    backgroundStyle = imageFit === "repeat" ? {
+      ...backgroundStyle,
+      backgroundImage: `url("${imageUrl}")`,
+      backgroundRepeat: "repeat"
+    } : {
+      ...backgroundStyle,
+      backgroundImage: `url("${imageUrl}")`,
+      backgroundSize: imageFit,
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat"
+    };
+  }
+  const cardShadow = styles.cardShadow;
+  const cardMaxWidth = styles.cardMaxWidth;
+  const cardPadding = styles.cardPadding;
+  const logoSize = styles.logoSize;
+  const logoSrc = theme === "dark" ? brand.logoUrlDark || brand.logoUrl || "/viax-logo.svg" : brand.logoUrl || "/viax-logo.svg";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        ...backgroundStyle,
+        width: 720,
+        minHeight: 480,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 32,
+        borderRadius: 12,
+        position: "relative"
+      },
+      children: [
+        variant === "image" && !imageUrl && /* @__PURE__ */ jsxs("div", { style: {
+          position: "absolute",
+          top: 12,
+          right: 12,
+          display: "flex",
+          gap: 6,
+          alignItems: "center",
+          padding: "4px 8px",
+          backgroundColor: "var(--color-card)",
+          border: "1px dashed var(--color-border)",
+          borderRadius: 6,
+          fontSize: 11,
+          color: "var(--color-text-muted)"
+        }, children: [
+          "No image set",
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => fileRef.current?.click(),
+              disabled: uploading,
+              style: {
+                fontSize: 11,
+                padding: "2px 8px",
+                borderRadius: 4,
+                background: "var(--color-accent-bold)",
+                color: "var(--color-text-inverse)",
+                border: "none",
+                cursor: "pointer"
+              },
+              children: uploading ? "Uploading\u2026" : "Upload"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileRef,
+              type: "file",
+              accept: "image/png,image/jpeg,image/webp,image/svg+xml",
+              hidden: true,
+              onChange: (e) => e.target.files?.[0] && upload(e.target.files[0])
+            }
+          ),
+          uploadError && /* @__PURE__ */ jsx("span", { style: { color: "var(--color-danger-text)" }, children: uploadError }),
+          uploadNotice && /* @__PURE__ */ jsx("span", { style: { color: "var(--color-success-text)" }, children: uploadNotice })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              width: "100%",
+              maxWidth: cardMaxWidth,
+              backgroundColor: styles.cardBg,
+              border: `${styles.cardBorderWidth}px solid ${styles.cardBorderColor}`,
+              borderRadius: styles.cardRadius,
+              padding: cardPadding,
+              boxShadow: cardShadow ? "var(--shadow-xl)" : "none"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: logoSrc,
+                  alt: "Brand logo",
+                  style: { height: logoSize, maxWidth: "70%", objectFit: "contain", display: "block", marginBottom: 16 },
+                  onError: (e) => {
+                    e.currentTarget.style.display = "none";
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx("h1", { style: {
+                fontSize: styles.titleSize,
+                fontWeight: 600,
+                color: styles.titleColor,
+                margin: 0
+              }, children: "Welcome back" }),
+              /* @__PURE__ */ jsx("p", { style: {
+                fontSize: styles.subtitleSize,
+                color: styles.subtitleColor,
+                margin: "4px 0 24px"
+              }, children: "Sign in to your viax workspace" }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, marginBottom: 18 }, children: [
+                /* @__PURE__ */ jsx(FormField, { label: "Email", children: /* @__PURE__ */ jsx(TextInput, { type: "email", placeholder: "you@company.com" }) }),
+                /* @__PURE__ */ jsx(FormField, { label: "Password", children: /* @__PURE__ */ jsx(TextInput, { type: "password", placeholder: "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" }) })
+              ] }),
+              /* @__PURE__ */ jsx(ButtonPrimary, { style: { width: "100%" }, children: "Sign in" }),
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, margin: "16px 0 12px" }, children: [
+                /* @__PURE__ */ jsx("span", { style: { flex: 1, height: 1, backgroundColor: "var(--color-border)" } }),
+                /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--color-text-muted)", letterSpacing: 0.5, textTransform: "uppercase" }, children: "or" }),
+                /* @__PURE__ */ jsx("span", { style: { flex: 1, height: 1, backgroundColor: "var(--color-border)" } })
+              ] }),
+              /* @__PURE__ */ jsxs(ButtonTertiary, { style: { width: "100%" }, children: [
+                /* @__PURE__ */ jsx(GoogleIcon, {}),
+                "Continue with Google"
+              ] }),
+              /* @__PURE__ */ jsxs("p", { style: { marginTop: 16, fontSize: 12, color: "var(--color-text-muted)", textAlign: "center" }, children: [
+                "Forgot your password?",
+                " ",
+                /* @__PURE__ */ jsx("span", { style: { color: "var(--color-accent-bold)", fontWeight: 500, cursor: "pointer" }, children: "Reset" })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function GoogleIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: 16, height: 16, viewBox: "0 0 48 48", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx("path", { fill: "#FFC107", d: "M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#FF3D00", d: "m6.306 14.691 6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#4CAF50", d: "M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238C29.211 35.091 26.715 36 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z" }),
+    /* @__PURE__ */ jsx("path", { fill: "#1976D2", d: "M43.611 20.083H42V20H24v8h11.303c-.792 2.237-2.231 4.166-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z" })
+  ] });
+}
+export {
+  LoginPagePreview
+};
+//# sourceMappingURL=login-page-preview.js.map

package/dist/previews/composite/login-page-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/previews/composite/login-page-preview.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { ButtonPrimary, ButtonTertiary } from '@/ui';\nimport { FormField } from '@/ui';\nimport { TextInput } from '@/ui';\n\nexport function LoginPagePreview({ styles, variants, shell }: PreviewProps) {\n  const brand = shell?.brand ?? {};\n  const theme = shell?.theme ?? 'light';\n  const variant = (variants.background as string) ?? 'solid';\n  const bgColor = styles.bgColor as string;\n  const patternColor = styles.patternColor as string;\n  const patternSize = styles.patternSize as number;\n  const imageUrl = styles.imageUrl as string;\n  const imageFit = (styles.imageFit as string) ?? 'cover';\n\n  const fileRef = useRef<HTMLInputElement>(null);\n  const [uploading, setUploading] = useState(false);\n  const [uploadError, setUploadError] = useState<string | null>(null);\n  const [uploadNotice, setUploadNotice] = useState<string | null>(null);\n\n  const upload = async (file: File) => {\n    if (!shell?.uploadAsset) return;\n    setUploading(true);\n    setUploadError(null);\n    setUploadNotice(null);\n    try {\n      const data = await shell.uploadAsset(file, 'logo');\n      if (!data?.url) throw new Error('Upload failed');\n      // Surface the new URL by copying it to the clipboard and showing an inline\n      // notice — preview reads styles.imageUrl but has no direct setter here, so\n      // the designer pastes the copied URL into the Image URL field.\n      navigator.clipboard?.writeText(data.url).catch(() => {});\n      setUploadNotice('Uploaded — URL copied to clipboard');\n    } catch (e) {\n      setUploadError(e instanceof Error ? e.message : 'Upload failed');\n    } finally {\n      setUploading(false);\n    }\n  };\n\n  let backgroundStyle: React.CSSProperties = { backgroundColor: bgColor };\n  if (variant === 'dots') {\n    backgroundStyle = {\n      ...backgroundStyle,\n      backgroundImage: `radial-gradient(circle, ${patternColor} 1px, transparent 1px)`,\n      backgroundSize: `${patternSize}px ${patternSize}px`,\n    };\n  } else if (variant === 'stripes') {\n    backgroundStyle = {\n      ...backgroundStyle,\n      backgroundImage: `repeating-linear-gradient(45deg, ${patternColor} 0 1px, transparent 1px ${patternSize}px)`,\n    };\n  } else if (variant === 'image' && imageUrl) {\n    backgroundStyle = imageFit === 'repeat'\n      ? {\n          ...backgroundStyle,\n          backgroundImage: `url(\"${imageUrl}\")`,\n          backgroundRepeat: 'repeat',\n        }\n      : {\n          ...backgroundStyle,\n          backgroundImage: `url(\"${imageUrl}\")`,\n          backgroundSize: imageFit,\n          backgroundPosition: 'center',\n          backgroundRepeat: 'no-repeat',\n        };\n  }\n\n  const cardShadow = styles.cardShadow as boolean;\n  const cardMaxWidth = styles.cardMaxWidth as number;\n  const cardPadding = styles.cardPadding as number;\n  const logoSize = styles.logoSize as number;\n  const logoSrc =\n    theme === 'dark'\n      ? brand.logoUrlDark || brand.logoUrl || '/viax-logo.svg'\n      : brand.logoUrl || '/viax-logo.svg';\n\n  return (\n    <div\n      style={{\n        ...backgroundStyle,\n        width: 720,\n        minHeight: 480,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        padding: 32,\n        borderRadius: 12,\n        position: 'relative',\n      }}\n    >\n      {variant === 'image' && !imageUrl && (\n        <div style={{\n          position: 'absolute', top: 12, right: 12,\n          display: 'flex', gap: 6, alignItems: 'center',\n          padding: '4px 8px',\n          backgroundColor: 'var(--color-card)',\n          border: '1px dashed var(--color-border)',\n          borderRadius: 6,\n          fontSize: 11, color: 'var(--color-text-muted)',\n        }}>\n          No image set\n          <button\n            type=\"button\"\n            onClick={() => fileRef.current?.click()}\n            disabled={uploading}\n            style={{\n              fontSize: 11, padding: '2px 8px', borderRadius: 4,\n              background: 'var(--color-accent-bold)', color: 'var(--color-text-inverse)',\n              border: 'none', cursor: 'pointer',\n            }}\n          >\n            {uploading ? 'Uploading…' : 'Upload'}\n          </button>\n          <input\n            ref={fileRef}\n            type=\"file\"\n            accept=\"image/png,image/jpeg,image/webp,image/svg+xml\"\n            hidden\n            onChange={(e) => e.target.files?.[0] && upload(e.target.files[0])}\n          />\n          {uploadError && (\n            <span style={{ color: 'var(--color-danger-text)' }}>{uploadError}</span>\n          )}\n          {uploadNotice && (\n            <span style={{ color: 'var(--color-success-text)' }}>{uploadNotice}</span>\n          )}\n        </div>\n      )}\n\n      <div\n        style={{\n          width: '100%',\n          maxWidth: cardMaxWidth,\n          backgroundColor: styles.cardBg as string,\n          border: `${styles.cardBorderWidth}px solid ${styles.cardBorderColor}`,\n          borderRadius: styles.cardRadius as number,\n          padding: cardPadding,\n          boxShadow: cardShadow ? 'var(--shadow-xl)' : 'none',\n        }}\n      >\n        {/* Logo */}\n        <img\n          src={logoSrc}\n          alt=\"Brand logo\"\n          style={{ height: logoSize, maxWidth: '70%', objectFit: 'contain', display: 'block', marginBottom: 16 }}\n          onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = 'none'; }}\n        />\n\n        <h1 style={{\n          fontSize: styles.titleSize as number, fontWeight: 600,\n          color: styles.titleColor as string,\n          margin: 0,\n        }}>\n          Welcome back\n        </h1>\n        <p style={{\n          fontSize: styles.subtitleSize as number,\n          color: styles.subtitleColor as string,\n          margin: '4px 0 24px',\n        }}>\n          Sign in to your viax workspace\n        </p>\n\n        {/* Email + Password — real atomic composition. Label theming\n            flows from FormField's registry; input shape / state visuals\n            flow from TextInput's. No hardcoded inline styles. */}\n        <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 18 }}>\n          <FormField label=\"Email\">\n            <TextInput type=\"email\" placeholder=\"you@company.com\" />\n          </FormField>\n          <FormField label=\"Password\">\n            <TextInput type=\"password\" placeholder=\"••••••••\" />\n          </FormField>\n        </div>\n\n        <ButtonPrimary style={{ width: '100%' }}>Sign in</ButtonPrimary>\n\n        {/* \"or\" divider */}\n        <div style={{ display: 'flex', alignItems: 'center', gap: 10, margin: '16px 0 12px' }}>\n          <span style={{ flex: 1, height: 1, backgroundColor: 'var(--color-border)' }} />\n          <span style={{ fontSize: 11, color: 'var(--color-text-muted)', letterSpacing: 0.5, textTransform: 'uppercase' }}>or</span>\n          <span style={{ flex: 1, height: 1, backgroundColor: 'var(--color-border)' }} />\n        </div>\n\n        {/* Google sign-in */}\n        <ButtonTertiary style={{ width: '100%' }}>\n          <GoogleIcon />\n          Continue with Google\n        </ButtonTertiary>\n\n        <p style={{ marginTop: 16, fontSize: 12, color: 'var(--color-text-muted)', textAlign: 'center' }}>\n          Forgot your password?{' '}\n          <span style={{ color: 'var(--color-accent-bold)', fontWeight: 500, cursor: 'pointer' }}>\n            Reset\n          </span>\n        </p>\n      </div>\n    </div>\n  );\n}\n\nfunction GoogleIcon() {\n  return (\n    <svg width={16} height={16} viewBox=\"0 0 48 48\" aria-hidden>\n      <path fill=\"#FFC107\" d=\"M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z\" />\n      <path fill=\"#FF3D00\" d=\"m6.306 14.691 6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z\" />\n      <path fill=\"#4CAF50\" d=\"M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238C29.211 35.091 26.715 36 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z\" />\n      <path fill=\"#1976D2\" d=\"M43.611 20.083H42V20H24v8h11.303c-.792 2.237-2.231 4.166-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z\" />\n    </svg>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/previews/composite/multirow-form-preview.cjs

@@ -0,0 +1,97 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var multirow_form_preview_exports = {};
+__export(multirow_form_preview_exports, {
+  MultirowFormPreview: () => MultirowFormPreview
+});
+module.exports = __toCommonJS(multirow_form_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+var import_ui2 = require("../../ui/index.cjs");
+var import_ui3 = require("../../ui/index.cjs");
+function MultirowFormPreview({ styles, variants }) {
+  const cols = variants.columns ?? "2";
+  const isTwoCol = cols === "2";
+  const gridStyle = {
+    display: "grid",
+    gridTemplateColumns: isTwoCol ? "1fr 1fr" : "1fr",
+    gap: styles.fieldGap
+  };
+  const fullSpan = isTwoCol ? { gridColumn: "1 / -1" } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      style: {
+        width: 520,
+        backgroundColor: styles.backgroundColor,
+        border: `1px solid ${styles.borderColor}`,
+        borderRadius: styles.borderRadius,
+        padding: styles.padding
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { style: { fontSize: 17, fontWeight: 600, color: "var(--color-text)", margin: "0 0 4px" }, children: "Create Account" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 12, color: "var(--color-text-muted)", margin: "0 0 24px" }, children: "Fill in your personal details." }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: styles.sectionGap }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--color-text-muted)", marginBottom: 12 }, children: "Personal Information" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: gridStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.FormField, { label: "First Name", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui3.TextInput, { placeholder: "John" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.FormField, { label: "Last Name", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui3.TextInput, { placeholder: "Doe" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.FormField, { label: "Email", style: fullSpan, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui3.TextInput, { type: "email", placeholder: "john@example.com" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.FormField, { label: "Phone", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui3.TextInput, { placeholder: "+1 (555) 000-0000" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.FormField, { label: "Role", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui3.Select, { defaultValue: "", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", disabled: true, children: "Select role" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "Admin" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "Editor" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "Viewer" })
+            ] }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: styles.sectionGap }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--color-text-muted)", marginBottom: 12 }, children: "Address" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: gridStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.FormField, { label: "Street", style: fullSpan, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui3.TextInput, { placeholder: "123 Main St" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.FormField, { label: "City", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui3.TextInput, { placeholder: "New York" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.FormField, { label: "State", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui3.Select, { defaultValue: "", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", disabled: true, children: "Select state" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "NY" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "CA" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "TX" })
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.FormField, { label: "ZIP", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui3.TextInput, { placeholder: "10001" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.FormField, { label: "Country", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ui3.Select, { defaultValue: "", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", disabled: true, children: "Select country" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "United States" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "United Kingdom" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { children: "Germany" })
+            ] }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", justifyContent: "flex-end", gap: 10 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.ButtonTertiary, { children: "Cancel" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.ButtonPrimary, { children: "Create Account" })
+        ] })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MultirowFormPreview
+});
+//# sourceMappingURL=multirow-form-preview.cjs.map

package/dist/previews/composite/multirow-form-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/previews/composite/multirow-form-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { ButtonPrimary, ButtonTertiary } from '@/ui';\nimport { FormField } from '@/ui';\nimport { Select, TextInput } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\n/**\n * Multi-section form composite. Real atomic composition: every field is\n * `<FormField><TextInput|Select /></FormField>`. Always top labels —\n * side labels combined with multi-section + multi-column gets cramped\n * (label width eats input width), so this composite doesn't expose a\n * labelPosition variant. Open FormField's own editor to preview side\n * labels in isolation.\n *\n * What this composite owns:\n *   - Form card shape (background, border, radius, padding)\n *   - Field grid layout (columns variant: 1 / 2)\n *   - Field gap + section gap\n *\n * What other atoms own:\n *   - Input shape / state visuals → TextInput / Select registries\n *   - Label theming → FormField registry\n *\n * Span-2 fields (Email, Street in the 2-column variant) span both\n * columns by passing `gridColumn: \"1 / -1\"` to FormField via `style`.\n */\nexport function MultirowFormPreview({ styles, variants }: PreviewProps) {\n  const cols = (variants.columns as string) ?? '2';\n  const isTwoCol = cols === '2';\n\n  const gridStyle: CSSProperties = {\n    display: 'grid',\n    gridTemplateColumns: isTwoCol ? '1fr 1fr' : '1fr',\n    gap: styles.fieldGap as number,\n  };\n  // Span both columns when 2-column layout is active. In 1-column the\n  // grid only has one column so the span style is harmless / no-op.\n  const fullSpan: CSSProperties | undefined = isTwoCol ? { gridColumn: '1 / -1' } : undefined;\n\n  return (\n    <div\n      style={{\n        width: 520,\n        backgroundColor: styles.backgroundColor as string,\n        border: `1px solid ${styles.borderColor}`,\n        borderRadius: styles.borderRadius as number,\n        padding: styles.padding as number,\n      }}\n    >\n      <h3 style={{ fontSize: 17, fontWeight: 600, color: 'var(--color-text)', margin: '0 0 4px' }}>\n        Create Account\n      </h3>\n      <p style={{ fontSize: 12, color: 'var(--color-text-muted)', margin: '0 0 24px' }}>\n        Fill in your personal details.\n      </p>\n\n      {/* Section 1: Personal */}\n      <div style={{ marginBottom: styles.sectionGap as number }}>\n        <p style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--color-text-muted)', marginBottom: 12 }}>\n          Personal Information\n        </p>\n        <div style={gridStyle}>\n          <FormField label=\"First Name\">\n            <TextInput placeholder=\"John\" />\n          </FormField>\n          <FormField label=\"Last Name\">\n            <TextInput placeholder=\"Doe\" />\n          </FormField>\n          <FormField label=\"Email\" style={fullSpan}>\n            <TextInput type=\"email\" placeholder=\"john@example.com\" />\n          </FormField>\n          <FormField label=\"Phone\">\n            <TextInput placeholder=\"+1 (555) 000-0000\" />\n          </FormField>\n          <FormField label=\"Role\">\n            <Select defaultValue=\"\">\n              <option value=\"\" disabled>Select role</option>\n              <option>Admin</option>\n              <option>Editor</option>\n              <option>Viewer</option>\n            </Select>\n          </FormField>\n        </div>\n      </div>\n\n      {/* Section 2: Address */}\n      <div style={{ marginBottom: styles.sectionGap as number }}>\n        <p style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--color-text-muted)', marginBottom: 12 }}>\n          Address\n        </p>\n        <div style={gridStyle}>\n          <FormField label=\"Street\" style={fullSpan}>\n            <TextInput placeholder=\"123 Main St\" />\n          </FormField>\n          <FormField label=\"City\">\n            <TextInput placeholder=\"New York\" />\n          </FormField>\n          <FormField label=\"State\">\n            <Select defaultValue=\"\">\n              <option value=\"\" disabled>Select state</option>\n              <option>NY</option>\n              <option>CA</option>\n              <option>TX</option>\n            </Select>\n          </FormField>\n          <FormField label=\"ZIP\">\n            <TextInput placeholder=\"10001\" />\n          </FormField>\n          <FormField label=\"Country\">\n            <Select defaultValue=\"\">\n              <option value=\"\" disabled>Select country</option>\n              <option>United States</option>\n              <option>United Kingdom</option>\n              <option>Germany</option>\n            </Select>\n          </FormField>\n        </div>\n      </div>\n\n      {/* Actions */}\n      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10 }}>\n        <ButtonTertiary>Cancel</ButtonTertiary>\n        <ButtonPrimary>Create Account</ButtonPrimary>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["import_ui"]}

package/dist/previews/composite/multirow-form-preview.d.ts

@@ -0,0 +1,23 @@
+import type { PreviewProps } from '../../previews/types.js';
+/**
+ * Multi-section form composite. Real atomic composition: every field is
+ * `<FormField><TextInput|Select /></FormField>`. Always top labels —
+ * side labels combined with multi-section + multi-column gets cramped
+ * (label width eats input width), so this composite doesn't expose a
+ * labelPosition variant. Open FormField's own editor to preview side
+ * labels in isolation.
+ *
+ * What this composite owns:
+ *   - Form card shape (background, border, radius, padding)
+ *   - Field grid layout (columns variant: 1 / 2)
+ *   - Field gap + section gap
+ *
+ * What other atoms own:
+ *   - Input shape / state visuals → TextInput / Select registries
+ *   - Label theming → FormField registry
+ *
+ * Span-2 fields (Email, Street in the 2-column variant) span both
+ * columns by passing `gridColumn: "1 / -1"` to FormField via `style`.
+ */
+export declare function MultirowFormPreview({ styles, variants }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=multirow-form-preview.d.ts.map

package/dist/previews/composite/multirow-form-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multirow-form-preview.d.ts","sourceRoot":"","sources":["../../../src/previews/composite/multirow-form-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAOrD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CAoGrE"}

package/dist/previews/composite/multirow-form-preview.js

@@ -0,0 +1,73 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ButtonPrimary, ButtonTertiary } from "../../ui/index.js";
+import { FormField } from "../../ui/index.js";
+import { Select, TextInput } from "../../ui/index.js";
+function MultirowFormPreview({ styles, variants }) {
+  const cols = variants.columns ?? "2";
+  const isTwoCol = cols === "2";
+  const gridStyle = {
+    display: "grid",
+    gridTemplateColumns: isTwoCol ? "1fr 1fr" : "1fr",
+    gap: styles.fieldGap
+  };
+  const fullSpan = isTwoCol ? { gridColumn: "1 / -1" } : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width: 520,
+        backgroundColor: styles.backgroundColor,
+        border: `1px solid ${styles.borderColor}`,
+        borderRadius: styles.borderRadius,
+        padding: styles.padding
+      },
+      children: [
+        /* @__PURE__ */ jsx("h3", { style: { fontSize: 17, fontWeight: 600, color: "var(--color-text)", margin: "0 0 4px" }, children: "Create Account" }),
+        /* @__PURE__ */ jsx("p", { style: { fontSize: 12, color: "var(--color-text-muted)", margin: "0 0 24px" }, children: "Fill in your personal details." }),
+        /* @__PURE__ */ jsxs("div", { style: { marginBottom: styles.sectionGap }, children: [
+          /* @__PURE__ */ jsx("p", { style: { fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--color-text-muted)", marginBottom: 12 }, children: "Personal Information" }),
+          /* @__PURE__ */ jsxs("div", { style: gridStyle, children: [
+            /* @__PURE__ */ jsx(FormField, { label: "First Name", children: /* @__PURE__ */ jsx(TextInput, { placeholder: "John" }) }),
+            /* @__PURE__ */ jsx(FormField, { label: "Last Name", children: /* @__PURE__ */ jsx(TextInput, { placeholder: "Doe" }) }),
+            /* @__PURE__ */ jsx(FormField, { label: "Email", style: fullSpan, children: /* @__PURE__ */ jsx(TextInput, { type: "email", placeholder: "john@example.com" }) }),
+            /* @__PURE__ */ jsx(FormField, { label: "Phone", children: /* @__PURE__ */ jsx(TextInput, { placeholder: "+1 (555) 000-0000" }) }),
+            /* @__PURE__ */ jsx(FormField, { label: "Role", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "", children: [
+              /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select role" }),
+              /* @__PURE__ */ jsx("option", { children: "Admin" }),
+              /* @__PURE__ */ jsx("option", { children: "Editor" }),
+              /* @__PURE__ */ jsx("option", { children: "Viewer" })
+            ] }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { marginBottom: styles.sectionGap }, children: [
+          /* @__PURE__ */ jsx("p", { style: { fontSize: 11, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em", color: "var(--color-text-muted)", marginBottom: 12 }, children: "Address" }),
+          /* @__PURE__ */ jsxs("div", { style: gridStyle, children: [
+            /* @__PURE__ */ jsx(FormField, { label: "Street", style: fullSpan, children: /* @__PURE__ */ jsx(TextInput, { placeholder: "123 Main St" }) }),
+            /* @__PURE__ */ jsx(FormField, { label: "City", children: /* @__PURE__ */ jsx(TextInput, { placeholder: "New York" }) }),
+            /* @__PURE__ */ jsx(FormField, { label: "State", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "", children: [
+              /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select state" }),
+              /* @__PURE__ */ jsx("option", { children: "NY" }),
+              /* @__PURE__ */ jsx("option", { children: "CA" }),
+              /* @__PURE__ */ jsx("option", { children: "TX" })
+            ] }) }),
+            /* @__PURE__ */ jsx(FormField, { label: "ZIP", children: /* @__PURE__ */ jsx(TextInput, { placeholder: "10001" }) }),
+            /* @__PURE__ */ jsx(FormField, { label: "Country", children: /* @__PURE__ */ jsxs(Select, { defaultValue: "", children: [
+              /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: "Select country" }),
+              /* @__PURE__ */ jsx("option", { children: "United States" }),
+              /* @__PURE__ */ jsx("option", { children: "United Kingdom" }),
+              /* @__PURE__ */ jsx("option", { children: "Germany" })
+            ] }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: 10 }, children: [
+          /* @__PURE__ */ jsx(ButtonTertiary, { children: "Cancel" }),
+          /* @__PURE__ */ jsx(ButtonPrimary, { children: "Create Account" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  MultirowFormPreview
+};
+//# sourceMappingURL=multirow-form-preview.js.map

package/dist/previews/composite/multirow-form-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/previews/composite/multirow-form-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { ButtonPrimary, ButtonTertiary } from '@/ui';\nimport { FormField } from '@/ui';\nimport { Select, TextInput } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\n/**\n * Multi-section form composite. Real atomic composition: every field is\n * `<FormField><TextInput|Select /></FormField>`. Always top labels —\n * side labels combined with multi-section + multi-column gets cramped\n * (label width eats input width), so this composite doesn't expose a\n * labelPosition variant. Open FormField's own editor to preview side\n * labels in isolation.\n *\n * What this composite owns:\n *   - Form card shape (background, border, radius, padding)\n *   - Field grid layout (columns variant: 1 / 2)\n *   - Field gap + section gap\n *\n * What other atoms own:\n *   - Input shape / state visuals → TextInput / Select registries\n *   - Label theming → FormField registry\n *\n * Span-2 fields (Email, Street in the 2-column variant) span both\n * columns by passing `gridColumn: \"1 / -1\"` to FormField via `style`.\n */\nexport function MultirowFormPreview({ styles, variants }: PreviewProps) {\n  const cols = (variants.columns as string) ?? '2';\n  const isTwoCol = cols === '2';\n\n  const gridStyle: CSSProperties = {\n    display: 'grid',\n    gridTemplateColumns: isTwoCol ? '1fr 1fr' : '1fr',\n    gap: styles.fieldGap as number,\n  };\n  // Span both columns when 2-column layout is active. In 1-column the\n  // grid only has one column so the span style is harmless / no-op.\n  const fullSpan: CSSProperties | undefined = isTwoCol ? { gridColumn: '1 / -1' } : undefined;\n\n  return (\n    <div\n      style={{\n        width: 520,\n        backgroundColor: styles.backgroundColor as string,\n        border: `1px solid ${styles.borderColor}`,\n        borderRadius: styles.borderRadius as number,\n        padding: styles.padding as number,\n      }}\n    >\n      <h3 style={{ fontSize: 17, fontWeight: 600, color: 'var(--color-text)', margin: '0 0 4px' }}>\n        Create Account\n      </h3>\n      <p style={{ fontSize: 12, color: 'var(--color-text-muted)', margin: '0 0 24px' }}>\n        Fill in your personal details.\n      </p>\n\n      {/* Section 1: Personal */}\n      <div style={{ marginBottom: styles.sectionGap as number }}>\n        <p style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--color-text-muted)', marginBottom: 12 }}>\n          Personal Information\n        </p>\n        <div style={gridStyle}>\n          <FormField label=\"First Name\">\n            <TextInput placeholder=\"John\" />\n          </FormField>\n          <FormField label=\"Last Name\">\n            <TextInput placeholder=\"Doe\" />\n          </FormField>\n          <FormField label=\"Email\" style={fullSpan}>\n            <TextInput type=\"email\" placeholder=\"john@example.com\" />\n          </FormField>\n          <FormField label=\"Phone\">\n            <TextInput placeholder=\"+1 (555) 000-0000\" />\n          </FormField>\n          <FormField label=\"Role\">\n            <Select defaultValue=\"\">\n              <option value=\"\" disabled>Select role</option>\n              <option>Admin</option>\n              <option>Editor</option>\n              <option>Viewer</option>\n            </Select>\n          </FormField>\n        </div>\n      </div>\n\n      {/* Section 2: Address */}\n      <div style={{ marginBottom: styles.sectionGap as number }}>\n        <p style={{ fontSize: 11, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--color-text-muted)', marginBottom: 12 }}>\n          Address\n        </p>\n        <div style={gridStyle}>\n          <FormField label=\"Street\" style={fullSpan}>\n            <TextInput placeholder=\"123 Main St\" />\n          </FormField>\n          <FormField label=\"City\">\n            <TextInput placeholder=\"New York\" />\n          </FormField>\n          <FormField label=\"State\">\n            <Select defaultValue=\"\">\n              <option value=\"\" disabled>Select state</option>\n              <option>NY</option>\n              <option>CA</option>\n              <option>TX</option>\n            </Select>\n          </FormField>\n          <FormField label=\"ZIP\">\n            <TextInput placeholder=\"10001\" />\n          </FormField>\n          <FormField label=\"Country\">\n            <Select defaultValue=\"\">\n              <option value=\"\" disabled>Select country</option>\n              <option>United States</option>\n              <option>United Kingdom</option>\n              <option>Germany</option>\n            </Select>\n          </FormField>\n        </div>\n      </div>\n\n      {/* Actions */}\n      <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10 }}>\n        <ButtonTertiary>Cancel</ButtonTertiary>\n        <ButtonPrimary>Create Account</ButtonPrimary>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/previews/demo-row-actions.cjs

@@ -0,0 +1,34 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var demo_row_actions_exports = {};
+__export(demo_row_actions_exports, {
+  DemoRowActions: () => DemoRowActions
+});
+module.exports = __toCommonJS(demo_row_actions_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../ui/index.cjs");
+const DemoRowActions = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.IconButton, { "aria-label": "Edit", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "pencil", size: 14 }) }),
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.IconButton, { "aria-label": "Delete", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Icon, { glyph: "trash", size: 14 }) })
+] });
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DemoRowActions
+});
+//# sourceMappingURL=demo-row-actions.cjs.map

package/dist/previews/demo-row-actions.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/previews/demo-row-actions.tsx"],"sourcesContent":["import { Icon, IconButton } from '@/ui';\n\n/**\n * Sample hover-revealed row actions (edit / delete) shared by the tree-row\n * previews (`SegmentRow`, `ComponentRow`), so the demo stays in one\n * place. A static element is fine to reuse across multiple rows — it's an\n * immutable element description, not shared mutable state.\n */\nexport const DemoRowActions = (\n  <>\n    <IconButton aria-label=\"Edit\">\n      <Icon glyph=\"pencil\" size={14} />\n    </IconButton>\n    <IconButton aria-label=\"Delete\">\n      <Icon glyph=\"trash\" size={14} />\n    </IconButton>\n  </>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AASE;AATF,gBAAiC;AAQ1B,MAAM,iBACX,4EACE;AAAA,8CAAC,wBAAW,cAAW,QACrB,sDAAC,kBAAK,OAAM,UAAS,MAAM,IAAI,GACjC;AAAA,EACA,4CAAC,wBAAW,cAAW,UACrB,sDAAC,kBAAK,OAAM,SAAQ,MAAM,IAAI,GAChC;AAAA,GACF;","names":[]}

package/dist/previews/demo-row-actions.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Sample hover-revealed row actions (edit / delete) shared by the tree-row
+ * previews (`SegmentRow`, `ComponentRow`), so the demo stays in one
+ * place. A static element is fine to reuse across multiple rows — it's an
+ * immutable element description, not shared mutable state.
+ */
+export declare const DemoRowActions: import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=demo-row-actions.d.ts.map

package/dist/previews/demo-row-actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"demo-row-actions.d.ts","sourceRoot":"","sources":["../../src/previews/demo-row-actions.tsx"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,cAAc,yCAS1B,CAAC"}

package/dist/previews/demo-row-actions.js

@@ -0,0 +1,10 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Icon, IconButton } from "../ui/index.js";
+const DemoRowActions = /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(IconButton, { "aria-label": "Edit", children: /* @__PURE__ */ jsx(Icon, { glyph: "pencil", size: 14 }) }),
+  /* @__PURE__ */ jsx(IconButton, { "aria-label": "Delete", children: /* @__PURE__ */ jsx(Icon, { glyph: "trash", size: 14 }) })
+] });
+export {
+  DemoRowActions
+};
+//# sourceMappingURL=demo-row-actions.js.map

package/dist/previews/demo-row-actions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/previews/demo-row-actions.tsx"],"sourcesContent":["import { Icon, IconButton } from '@/ui';\n\n/**\n * Sample hover-revealed row actions (edit / delete) shared by the tree-row\n * previews (`SegmentRow`, `ComponentRow`), so the demo stays in one\n * place. A static element is fine to reuse across multiple rows — it's an\n * immutable element description, not shared mutable state.\n */\nexport const DemoRowActions = (\n  <>\n    <IconButton aria-label=\"Edit\">\n      <Icon glyph=\"pencil\" size={14} />\n    </IconButton>\n    <IconButton aria-label=\"Delete\">\n      <Icon glyph=\"trash\" size={14} />\n    </IconButton>\n  </>\n);\n"],"mappings":"AASE,mBAEI,KAFJ;AATF,SAAS,MAAM,kBAAkB;AAQ1B,MAAM,iBACX,iCACE;AAAA,sBAAC,cAAW,cAAW,QACrB,8BAAC,QAAK,OAAM,UAAS,MAAM,IAAI,GACjC;AAAA,EACA,oBAAC,cAAW,cAAW,UACrB,8BAAC,QAAK,OAAM,SAAQ,MAAM,IAAI,GAChC;AAAA,GACF;","names":[]}