@backmatter/studio 0.0.1

package/dist/chunks/UiKitPage-CgNMOqfE.js

@@ -0,0 +1,172 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useState as y } from "react";
+import { u as S, T as l, B as p, a as c, S as m, P as o, b as z, F as x, I as b, c as N, d as w, e as $, f as g, g as h, p as L } from "./WorkspaceRoutes-DgRtdie8.js";
+import { L as q, a as k } from "./dashboard-XKKZuJGm.js";
+const T = ["primary", "secondary", "ghost", "danger"];
+function V() {
+  const {
+    preference: s,
+    resolved: r,
+    setPreference: u
+  } = S(), [f, v] = y("en");
+  return /* @__PURE__ */ i("div", { className: "x1ov3xa9 x1uedy8c xvueqy4 xm8shrt x198e4go", children: [
+    /* @__PURE__ */ i("header", { className: "x78zum5 x1a02dak x1cy8zhl x1qughib x11cgr9k x1y5o9j5", children: [
+      /* @__PURE__ */ i("div", { children: [
+        /* @__PURE__ */ e(l, { as: "p", size: "xs", tone: "muted", weight: "semibold", children: "DEV ONLY · /__ui" }),
+        /* @__PURE__ */ e(l, { as: "h1", size: "display", weight: "semibold", children: "UI kit" }),
+        /* @__PURE__ */ i(l, { tone: "muted", size: "sm", children: [
+          "StyleX + Base UI primitives. Theme is ",
+          s,
+          " (resolved",
+          " ",
+          r,
+          ")."
+        ] }),
+        /* @__PURE__ */ e("div", { className: "x1g7u8ds", children: /* @__PURE__ */ e(p, { to: "/", children: "← Back to app" }) })
+      ] }),
+      /* @__PURE__ */ i("div", { className: "x78zum5 x1a02dak x3smv4v", children: [
+        /* @__PURE__ */ e(c, { variant: s === "system" ? "primary" : "secondary", onClick: () => u("system"), children: "System" }),
+        /* @__PURE__ */ e(c, { variant: s === "light" ? "primary" : "secondary", onClick: () => u("light"), children: "Light" }),
+        /* @__PURE__ */ e(c, { variant: s === "dark" ? "primary" : "secondary", onClick: () => u("dark"), children: "Dark" })
+      ] })
+    ] }),
+    /* @__PURE__ */ i(m, { gap: "lg", children: [
+      /* @__PURE__ */ i("section", { className: "x78zum5 xdt5ytf x3smv4v", children: [
+        /* @__PURE__ */ e(n, { children: "Buttons" }),
+        /* @__PURE__ */ e(o, { children: /* @__PURE__ */ e(m, { gap: "md", children: T.map((a) => /* @__PURE__ */ i(j, { label: a, children: [
+          /* @__PURE__ */ e(c, { variant: a, children: a }),
+          /* @__PURE__ */ e(c, { variant: a, disabled: !0, children: "disabled" }),
+          /* @__PURE__ */ e(z, { variant: a, to: "/__ui", children: "link" })
+        ] }, a)) }) })
+      ] }),
+      /* @__PURE__ */ i("section", { className: "x78zum5 xdt5ytf x3smv4v", children: [
+        /* @__PURE__ */ e(n, { children: "Fields" }),
+        /* @__PURE__ */ e(o, { children: /* @__PURE__ */ i(m, { children: [
+          /* @__PURE__ */ e(x, { label: "Text", hint: "Functional note under the field.", children: /* @__PURE__ */ e(b, { defaultValue: "Ada Lovelace", autoComplete: "off", spellCheck: !1 }) }),
+          /* @__PURE__ */ e(x, { label: "Disabled", children: /* @__PURE__ */ e(b, { defaultValue: "Locked", disabled: !0 }) }),
+          /* @__PURE__ */ e(x, { label: "Select", children: /* @__PURE__ */ e(N, { "aria-label": "Locale", value: f, onValueChange: (a) => v(a ?? "en"), options: [{
+            value: "en",
+            label: "English (en)"
+          }, {
+            value: "da",
+            label: "Dansk (da)"
+          }] }) }),
+          /* @__PURE__ */ e(x, { label: "Body (mono)", children: /* @__PURE__ */ e(w, { mono: !0, rows: 4, defaultValue: `---
+title: Hello
+---
+
+Paragraph.` }) })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ i("section", { className: "x78zum5 xdt5ytf x3smv4v", children: [
+        /* @__PURE__ */ e(n, { children: "Text" }),
+        /* @__PURE__ */ e(o, { children: /* @__PURE__ */ i(m, { gap: "sm", children: [
+          /* @__PURE__ */ e(l, { size: "display", weight: "semibold", children: "Display · 20px" }),
+          /* @__PURE__ */ e(l, { size: "xl", weight: "semibold", children: "Title · 16px" }),
+          /* @__PURE__ */ e(l, { size: "lg", weight: "medium", children: "Heading · 14px" }),
+          /* @__PURE__ */ e(l, { children: "Body · 13px" }),
+          /* @__PURE__ */ e(l, { size: "sm", tone: "muted", children: "Muted · 12px" }),
+          /* @__PURE__ */ e(l, { size: "xs", tone: "muted", weight: "semibold", children: "OVERLINE" }),
+          /* @__PURE__ */ e(l, { tone: "danger", children: "Danger" }),
+          /* @__PURE__ */ e(l, { tone: "success", children: "Success" }),
+          /* @__PURE__ */ e(l, { mono: !0, size: "sm", children: "Geist Mono / content/en/blog/hello.mdx" })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ i("section", { className: "x78zum5 xdt5ytf x3smv4v", children: [
+        /* @__PURE__ */ e(n, { children: "List + page chrome" }),
+        /* @__PURE__ */ i(o, { children: [
+          /* @__PURE__ */ e($, { kicker: /* @__PURE__ */ e(p, { to: "/__ui", children: "← Kit" }), title: "Documents", description: "Sample page header with action.", action: /* @__PURE__ */ e(c, { children: "New" }) }),
+          /* @__PURE__ */ i(q, { children: [
+            /* @__PURE__ */ e(k, { to: "/__ui", title: "hello-world", meta: "en", trailing: "modified" }),
+            /* @__PURE__ */ e(k, { to: "/__ui", title: "about", meta: "da", trailing: "new" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ i("section", { className: "x78zum5 xdt5ytf x3smv4v", children: [
+        /* @__PURE__ */ e(n, { children: "Top bar" }),
+        /* @__PURE__ */ e(o, { children: /* @__PURE__ */ i("div", { className: "x78zum5 xdt5ytf x1ndbd79 xb3r6kr x13oidi xmkeg23 x1y0btm7 x1j0qoeq", children: [
+          /* @__PURE__ */ i(g, { children: [
+            /* @__PURE__ */ e(h, { children: "main" }),
+            /* @__PURE__ */ e(h, { children: "2 uncommitted" })
+          ] }),
+          /* @__PURE__ */ i(g, { children: [
+            /* @__PURE__ */ e(h, { children: "feat/sale" }),
+            /* @__PURE__ */ e(h, { children: "Unsaved" })
+          ] }),
+          /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(h, { tone: "danger", children: "Save failed" }) })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ i("section", { className: "x78zum5 xdt5ytf x3smv4v", children: [
+        /* @__PURE__ */ e(n, { children: "Surfaces" }),
+        /* @__PURE__ */ i("div", { className: "xrvj5dj x1g5i94c x1ndbd79", children: [
+          /* @__PURE__ */ e(t, { label: "bgApp", fill: d.bgApp }),
+          /* @__PURE__ */ e(t, { label: "bgSidebar", fill: d.bgSidebar }),
+          /* @__PURE__ */ e(t, { label: "bgSurface", fill: d.bgSurface }),
+          /* @__PURE__ */ e(t, { label: "accent", fill: d.accent }),
+          /* @__PURE__ */ e(t, { label: "danger", fill: d.dangerFill }),
+          /* @__PURE__ */ e(t, { label: "success", fill: d.successFill })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function n({
+  children: s
+}) {
+  return /* @__PURE__ */ e(l, { as: "h2", size: "xs", tone: "muted", weight: "semibold", children: s });
+}
+function j({
+  label: s,
+  children: r
+}) {
+  return /* @__PURE__ */ i("div", { className: "x78zum5 x1a02dak x6s0dn4 x11cgr9k", children: [
+    /* @__PURE__ */ e("span", { className: "x29ncy0 x2lah0s x10qp4ay x1s688f x1vyo3qp xtvhhri x111yfic", children: s }),
+    /* @__PURE__ */ e("div", { className: "x78zum5 x1a02dak x6s0dn4 x3smv4v", children: r })
+  ] });
+}
+function t({
+  label: s,
+  fill: r
+}) {
+  return /* @__PURE__ */ i("div", { className: "x78zum5 xdt5ytf x3smv4v", children: [
+    /* @__PURE__ */ e("div", { ...L(d.chip, r) }),
+    /* @__PURE__ */ e(l, { size: "xs", tone: "muted", mono: !0, children: s })
+  ] });
+}
+const d = {
+  chip: {
+    kZKoxP: "x1vqgdyp",
+    kaIpWk: "x13oidi",
+    kMzoRj: "xmkeg23",
+    ksu8eU: "x1y0btm7",
+    kVAM5u: "x1j0qoeq",
+    $$css: !0
+  },
+  bgApp: {
+    kWkggS: "x86kjsi",
+    $$css: !0
+  },
+  bgSidebar: {
+    kWkggS: "x1jtkcfc",
+    $$css: !0
+  },
+  bgSurface: {
+    kWkggS: "x1hb2obb",
+    $$css: !0
+  },
+  accent: {
+    kWkggS: "xrb6rkd",
+    $$css: !0
+  },
+  dangerFill: {
+    kWkggS: "x1qc5ydl",
+    $$css: !0
+  },
+  successFill: {
+    kWkggS: "x1c15u7q",
+    $$css: !0
+  }
+};
+export {
+  V as UiKitPage
+};