@sableui/react 0.0.0-stage → 0.1.1

package/dist/chunk-RWP4XBSK.js

@@ -0,0 +1,139 @@
+import { StatusIcons } from './chunk-NEQNXI2G.js';
+import { cn } from './chunk-SRQWQUTW.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function Phone({ statusBar = true, systemChrome = true, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        // Hardware is the one surface no preset or mode repaints: a titanium
+        // body and band, not a theme's scrim (`overlay` is translucent in some
+        // presets, which drew a grey, see-through phone).
+        // design-lint-disable-next-line inline-color -- fixed device material, deliberately unthemed
+        "@container relative mx-auto w-[280px] [--phone-body:oklch(18%_0.004_265)] [--phone-band:oklch(48%_0.006_265)]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute -start-[0.6cqi] top-[18%] h-[4.5%] w-[0.8cqi] rounded-s-full bg-(--phone-band)" }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute -start-[0.6cqi] top-[25.5%] h-[7%] w-[0.8cqi] rounded-s-full bg-(--phone-band)" }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute -start-[0.6cqi] top-[34%] h-[7%] w-[0.8cqi] rounded-s-full bg-(--phone-band)" }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute -end-[0.6cqi] top-[27%] h-[10.5%] w-[0.8cqi] rounded-e-full bg-(--phone-band)" }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute -end-[0.4cqi] top-[55%] h-[6%] w-[0.6cqi] rounded-e-full bg-(--phone-band)" }),
+        /* @__PURE__ */ jsx("div", { className: "relative rounded-[18cqi] bg-(--phone-body) p-[3.7cqi] shadow-xl ring-[0.5cqi] ring-(--phone-band) ring-inset", children: /* @__PURE__ */ jsxs("div", { className: "relative aspect-[402/874] overflow-hidden rounded-[14.3cqi] bg-background text-foreground", children: [
+          /* @__PURE__ */ jsx("div", { className: cn("h-full overflow-auto overscroll-contain scrollbar-hidden", statusBar && "pt-[14.3cqi]"), children }),
+          statusBar ? /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "aria-hidden": true,
+              className: "absolute inset-x-0 top-0 grid h-[14.3cqi] grid-cols-[1fr_19cqi_1fr] grid-rows-[8cqi] content-start items-center bg-background px-[4cqi] pt-[2.6cqi]",
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "justify-self-center text-label-md tabular-nums", children: "9:41" }),
+                /* @__PURE__ */ jsx("span", {}),
+                /* @__PURE__ */ jsx(StatusIcons, { className: "flex items-center gap-[1.15cqi] justify-self-center [&_svg]:h-[2.8cqi] [&_svg]:w-auto" })
+              ]
+            }
+          ) : null,
+          systemChrome ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 top-[2.6cqi] mx-auto h-[8cqi] w-[19cqi] rounded-full bg-(--phone-body)" }),
+            /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "absolute inset-x-0 bottom-[1.85cqi] mx-auto h-[1.15cqi] min-h-1 w-[35%] rounded-full bg-foreground" })
+          ] }) : null
+        ] }) })
+      ]
+    }
+  );
+}
+Phone.displayName = "Phone";
+
+// src/components/phone/phone.meta.ts
+var phoneMeta = {
+  name: "Phone",
+  summary: "A current smartphone frame at iPhone proportions: a dark body with a titanium band, thin bezels, an island, an optional status bar and a scrollable screen.",
+  status: "stable",
+  keywords: [
+    "phone",
+    "device mockup",
+    "mobile preview",
+    "frame"
+  ],
+  usage: {
+    description: "Use Phone to frame a mobile product preview when the device context is useful.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use it for mobile UI demos, screenshots, and responsive previews."
+      },
+      {
+        guidance: "do",
+        description: "Keep the framed content legible and avoid stuffing full desktop layouts into the phone frame."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use Phone as a generic panel, card, or production app shell."
+      },
+      {
+        guidance: "dont",
+        description: "Do not use it to test responsive behaviour. The frame is a fixed aspect box, not a viewport, so media queries inside key off the real window."
+      }
+    ]
+  },
+  related: {
+    components: [
+      "Browser"
+    ]
+  },
+  props: [
+    {
+      name: "children",
+      type: "ReactNode",
+      description: "Content rendered inside the scrollable screen region."
+    },
+    {
+      name: "statusBar",
+      type: "boolean",
+      default: "true",
+      description: "Draw a status bar (time, signal, battery) across the top of the screen. Turn it off to frame a screenshot that already has one."
+    },
+    {
+      name: "systemChrome",
+      type: "boolean",
+      default: "true",
+      description: "Draw the camera pill and home indicator. Turn it off when the content draws its own system chrome, such as an iOS prototype framed by PhoneFrame from @sableui/react/ios/preview."
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "Additional classes merged onto the outer wrapper (set the width here; the screen keeps its proportions)."
+    }
+  ],
+  tokensUsed: ["background", "foreground"],
+  a11y: [
+    "Purely presentational frame; the screen region scrolls when content overflows. Add headings/landmarks in the content as needed.",
+    "The frame's chrome (status bar, camera, buttons) is aria-hidden, so the content inside carries the entire accessible meaning. A screenshot with no alt text makes the whole mockup announce as nothing at all."
+  ],
+  examples: [
+    {
+      label: "Framing a mobile layout",
+      code: '<Phone><div className="p-4"><h2 className="text-title-lg">Activity</h2><p className="text-body-sm text-muted-foreground">3 new collects today.</p></div></Phone>'
+    },
+    {
+      label: "Mockup, not a responsive preview",
+      code: `// Phone is DECORATIVE framing for a mobile screenshot on a marketing surface.
+
+<Phone>
+  <img src="/screenshots/mobile.png" alt="The mobile app" />
+</Phone>
+
+// \u2717 Using it to test responsive layout. The frame is a fixed aspect box, not a
+//   viewport \u2014 media queries inside it key off the real window, so what you see
+//   is not what a phone renders. Resize the browser, or use device emulation.
+// \u2717 Wrapping live, interactive app UI (forms, buttons that act). Same as Browser: the frame says "picture of
+//   software", so real controls inside it read as a screenshot that moves. Static composed content is fine.
+//   The exception is a clickable iOS prototype: PhoneFrame (@sableui/react/ios/preview)
+//   frames a whole phone-sized document in an iframe, where the frame is the device.`
+    }
+  ]
+};
+
+export { Phone, phoneMeta };

package/dist/chunk-SRQWQUTW.js

@@ -0,0 +1,63 @@
+import { clsx } from 'clsx';
+import { extendTailwindMerge, validators } from 'tailwind-merge';
+
+// src/lib/cn.ts
+var dsTypographyTokens = [
+  "display-4xl",
+  "display-3xl",
+  "display-2xl",
+  "display-xl",
+  "display-lg",
+  "heading-1",
+  "heading-2",
+  "heading-3",
+  "heading-4",
+  "title-lg",
+  "title-sm",
+  "body-lg",
+  "body-md",
+  "body-sm",
+  "body-xs",
+  "label-lg",
+  "label-md",
+  "label-sm",
+  "label-xs",
+  "caption",
+  "mono-xl",
+  "mono-lg",
+  "mono-md",
+  "mono-caption",
+  "mono-sm",
+  // UI tier — the workspace register's chrome typography. Registering these is
+  // not optional bookkeeping: an unrecognised `text-*` class lands in
+  // tailwind-merge's COLOUR group, so `cn("text-ui-md", "text-primary-foreground")`
+  // would drop the colour and render, for instance, white text on a white button.
+  "ui-md",
+  "ui-sm",
+  "ui-body",
+  "ui-section",
+  "ui-micro",
+  "ui-num"
+];
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "ds-typography": [{ text: dsTypographyTokens }],
+      // `rounded-concentric-<outer>/<inset>` (styles.css) is a border-radius.
+      // Unregistered, tailwind-merge kept it AND a component's own
+      // `rounded-sm`, so which radius won depended on stylesheet order — a
+      // concentric override on a pill tab inside a card silently lost.
+      "ds-concentric": [{ "rounded-concentric": [validators.isAny] }]
+    },
+    conflictingClassGroups: {
+      "ds-typography": ["font-size", "leading", "font-weight", "tracking"],
+      "ds-concentric": ["rounded"],
+      rounded: ["ds-concentric"]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export { cn };

package/dist/chunk-YXBOYWBN.js

@@ -0,0 +1,15 @@
+// src/themes/atelier/index.ts
+var atelierTheme = {
+  id: "atelier",
+  label: "Atelier",
+  deprecated: { replacement: "base" },
+  modes: ["light", "dark"],
+  defaultMode: "light",
+  fonts: {
+    sans: '"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    mono: '"Martian Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace'
+  }
+};
+var atelier_default = atelierTheme;
+
+export { atelierTheme, atelier_default };

package/dist/foundations/index.d.ts

@@ -0,0 +1,88 @@
+/**
+ * Foundations — the system's rules as typed data.
+ *
+ * Typography, motion, spacing, shape, surfaces, scrolling and accessibility
+ * rules used to live as prose spread across AGENTS.md and DESIGN.md, which is
+ * where agents least often read and where they drifted from the docs pages.
+ * Each foundation is now ONE object, rendered three ways from the same source:
+ *
+ *   - the docs site's foundation pages (rules, no-gos and demos)
+ *   - `llms/foundations/<slug>.md`, served as `sable docs <slug>`
+ *   - `registry.json → foundations`
+ *
+ * `build-registry` generates the second and third, so a rule cannot say one
+ * thing on the site and another to an agent.
+ *
+ * Every rule is short enough to obey without reading the rationale; `why` is
+ * there for when a rule seems wrong. `enforcedBy` names the gate that checks it
+ * (a `sable-lint` rule id, a test, or the registry build). A rule with no gate
+ * is a judgment call, and should read like one.
+ */
+/** One entry of a closed vocabulary — a type tier, a duration, a radius step. */
+interface FoundationTerm {
+    /** The name an author writes: a utility, a token, a recipe. */
+    name: string;
+    /** The value it carries in the default theme, as a reader would say it. */
+    value: string;
+    /** When to reach for it. One line. */
+    use: string;
+}
+interface FoundationVocabulary {
+    title: string;
+    /** Optional one-line framing shown above the table. */
+    note?: string;
+    terms: readonly FoundationTerm[];
+}
+interface FoundationRule {
+    rule: string;
+    why: string;
+    /** The gate that checks it: a sable-lint rule id, a test file, or "build-registry". */
+    enforcedBy?: string;
+}
+interface FoundationNoGo {
+    never: string;
+    instead: string;
+    why: string;
+    enforcedBy?: string;
+}
+/** A small, measurable detail, shown as before/after code. */
+interface FoundationDetail {
+    title: string;
+    before: string;
+    after: string;
+    why: string;
+}
+interface Foundation {
+    slug: string;
+    title: string;
+    /** One sentence: what this foundation governs. */
+    summary: string;
+    /** The headline count, e.g. "6 families · 2 text colors · 1 utility per node". */
+    headline: string;
+    vocabularies: readonly FoundationVocabulary[];
+    rules: readonly FoundationRule[];
+    noGos: readonly FoundationNoGo[];
+    details: readonly FoundationDetail[];
+    /** Other foundation slugs, docs slugs, or CLI commands worth reading next. */
+    related: readonly string[];
+}
+
+declare const accessibility: Foundation;
+
+declare const motion: Foundation;
+
+declare const scrolling: Foundation;
+
+declare const shape: Foundation;
+
+declare const spacing: Foundation;
+
+declare const surfaces: Foundation;
+
+declare const typography: Foundation;
+
+/** Reading order. `build-registry` emits the same order into llms/foundations. */
+declare const FOUNDATIONS: readonly [Foundation, Foundation, Foundation, Foundation, Foundation, Foundation, Foundation];
+declare const FOUNDATIONS_BY_SLUG: Record<string, Foundation>;
+
+export { FOUNDATIONS, FOUNDATIONS_BY_SLUG, type Foundation, type FoundationDetail, type FoundationNoGo, type FoundationRule, type FoundationTerm, type FoundationVocabulary, accessibility, motion, scrolling, shape, spacing, surfaces, typography };