@lab206/ui 0.1.0

package/src/styles/utilities.css

@@ -0,0 +1,216 @@
+/**
+ * Powers layout utilities (optional Layer 3)
+ * --------------------------------------------
+ * BEM-flavored, token-mapped only. Not a Tailwind clone.
+ *
+ * Naming:
+ *   pu-<block>
+ *   pu-<block>--<modifier>
+ *   pu-gap-<n>   → var(--pu-space-n)
+ *
+ * Prefer primitives (Button, Stack, …) when you can.
+ * Use utilities for one-off layout without inventing CSS files.
+ */
+
+/* ---- Display / flex ---- */
+.pu-flex { display: flex; }
+.pu-inline-flex { display: inline-flex; }
+.pu-grid { display: grid; }
+.pu-block { display: block; }
+.pu-hidden { display: none !important; }
+
+.pu-flex--row { flex-direction: row; }
+.pu-flex--col { flex-direction: column; }
+.pu-flex--wrap { flex-wrap: wrap; }
+.pu-flex--center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pu-items-start { align-items: flex-start; }
+.pu-items-center { align-items: center; }
+.pu-items-end { align-items: flex-end; }
+.pu-items-stretch { align-items: stretch; }
+
+.pu-justify-start { justify-content: flex-start; }
+.pu-justify-center { justify-content: center; }
+.pu-justify-end { justify-content: flex-end; }
+.pu-justify-between { justify-content: space-between; }
+
+.pu-flex-1 { flex: 1 1 0%; min-width: 0; }
+.pu-flex-none { flex: none; }
+
+/* ---- Gap (token scale) ---- */
+.pu-gap-0 { gap: var(--pu-space-0); }
+.pu-gap-1 { gap: var(--pu-space-1); }
+.pu-gap-2 { gap: var(--pu-space-2); }
+.pu-gap-3 { gap: var(--pu-space-3); }
+.pu-gap-4 { gap: var(--pu-space-4); }
+.pu-gap-5 { gap: var(--pu-space-5); }
+.pu-gap-6 { gap: var(--pu-space-6); }
+.pu-gap-8 { gap: var(--pu-space-8); }
+
+/* ---- Padding / margin (token scale, common axes) ---- */
+.pu-p-0 { padding: var(--pu-space-0); }
+.pu-p-2 { padding: var(--pu-space-2); }
+.pu-p-3 { padding: var(--pu-space-3); }
+.pu-p-4 { padding: var(--pu-space-4); }
+.pu-p-5 { padding: var(--pu-space-5); }
+.pu-p-6 { padding: var(--pu-space-6); }
+.pu-p-8 { padding: var(--pu-space-8); }
+
+.pu-px-3 { padding-inline: var(--pu-space-3); }
+.pu-px-4 { padding-inline: var(--pu-space-4); }
+.pu-px-6 { padding-inline: var(--pu-space-6); }
+.pu-py-2 { padding-block: var(--pu-space-2); }
+.pu-py-3 { padding-block: var(--pu-space-3); }
+.pu-py-4 { padding-block: var(--pu-space-4); }
+.pu-py-6 { padding-block: var(--pu-space-6); }
+.pu-py-8 { padding-block: var(--pu-space-8); }
+
+.pu-m-0 { margin: 0; }
+.pu-mt-2 { margin-top: var(--pu-space-2); }
+.pu-mt-3 { margin-top: var(--pu-space-3); }
+.pu-mt-4 { margin-top: var(--pu-space-4); }
+.pu-mt-6 { margin-top: var(--pu-space-6); }
+.pu-mb-2 { margin-bottom: var(--pu-space-2); }
+.pu-mb-3 { margin-bottom: var(--pu-space-3); }
+.pu-mb-4 { margin-bottom: var(--pu-space-4); }
+.pu-mb-6 { margin-bottom: var(--pu-space-6); }
+
+/* ---- Width ---- */
+.pu-w-full { width: 100%; }
+.pu-min-w-0 { min-width: 0; }
+.pu-max-w-prose { max-width: 40rem; }
+.pu-max-w-md { max-width: 28rem; }
+.pu-max-w-lg { max-width: 48rem; }
+.pu-mx-auto { margin-inline: auto; }
+
+/* ---- Text helpers ---- */
+.pu-text-muted { color: var(--pu-color-text-muted); }
+.pu-text-accent { color: var(--pu-color-accent); }
+.pu-text-center { text-align: center; }
+.pu-text-sm { font-size: var(--pu-text-sm); }
+.pu-text-xs { font-size: var(--pu-text-xs); }
+.pu-font-medium { font-weight: var(--pu-font-medium); }
+.pu-font-semibold { font-weight: var(--pu-font-semibold); }
+.pu-font-bold { font-weight: var(--pu-font-bold); }
+.pu-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ---- Surfaces ---- */
+.pu-surface {
+  background: var(--pu-color-surface);
+  color: var(--pu-color-text);
+}
+.pu-surface-2 {
+  background: var(--pu-color-surface-2);
+  color: var(--pu-color-text);
+}
+.pu-surface-elevated {
+  background: var(--pu-color-surface-elevated);
+  color: var(--pu-color-text);
+}
+.pu-surface-sunken {
+  background: var(--pu-color-surface-sunken);
+  color: var(--pu-color-text);
+}
+.pu-border {
+  border: 1px solid var(--pu-color-border);
+}
+.pu-border-t {
+  border-top: 1px solid var(--pu-color-border);
+}
+.pu-rounded-sm { border-radius: var(--pu-radius-sm); }
+.pu-rounded-md { border-radius: var(--pu-radius-md); }
+.pu-rounded-lg { border-radius: var(--pu-radius-lg); }
+.pu-rounded-xl { border-radius: var(--pu-radius-xl); }
+.pu-rounded-full { border-radius: var(--pu-radius-full); }
+.pu-shadow-sm { box-shadow: var(--pu-shadow-sm); }
+.pu-shadow-md { box-shadow: var(--pu-shadow-md); }
+.pu-shadow-lg { box-shadow: var(--pu-shadow-lg); }
+
+/* Glass surface utility (frosted layer) */
+.pu-glass {
+  background: var(--pu-glass-bg);
+  border: 1px solid var(--pu-glass-border);
+  backdrop-filter: blur(var(--pu-glass-blur)) saturate(1.15);
+  -webkit-backdrop-filter: blur(var(--pu-glass-blur)) saturate(1.15);
+}
+
+/* ---- Simple panel (utility composition target) ---- */
+.pu-panel {
+  background: var(--pu-color-surface);
+  border: 1px solid var(--pu-color-border);
+  border-radius: var(--pu-radius-lg);
+  padding: var(--pu-space-5);
+  box-shadow: var(--pu-shadow-sm);
+}
+.pu-panel--glass {
+  background: var(--pu-glass-bg);
+  border-color: var(--pu-glass-border);
+  backdrop-filter: blur(var(--pu-glass-blur)) saturate(1.15);
+  -webkit-backdrop-filter: blur(var(--pu-glass-blur)) saturate(1.15);
+  box-shadow: var(--pu-shadow-md);
+}
+.pu-panel--elevated {
+  box-shadow: var(--pu-shadow-md);
+  border-color: color-mix(in srgb, var(--pu-color-border) 70%, transparent);
+}
+
+/* Bento grid — modular product layouts (Apple-style compartments) */
+.pu-bento {
+  display: grid;
+  gap: var(--pu-space-4);
+  grid-template-columns: 1fr;
+}
+@media (min-width: 720px) {
+  .pu-bento {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .pu-bento--3 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .pu-bento__span-2 {
+    grid-column: span 2;
+  }
+  .pu-bento__span-row-2 {
+    grid-row: span 2;
+  }
+}
+@media (min-width: 1024px) {
+  .pu-bento {
+    gap: var(--pu-space-5);
+  }
+}
+
+/* Display type helpers */
+.pu-display {
+  font-size: var(--pu-text-3xl);
+  font-weight: var(--pu-font-bold);
+  letter-spacing: var(--pu-tracking-display);
+  line-height: var(--pu-leading-tight);
+}
+
+/* ---- Position / overflow ---- */
+.pu-relative { position: relative; }
+.pu-absolute { position: absolute; }
+.pu-sticky { position: sticky; }
+.pu-inset-0 { inset: 0; }
+.pu-overflow-auto { overflow: auto; }
+.pu-overflow-hidden { overflow: hidden; }
+
+/* ---- Visibility helpers ---- */
+.pu-opacity-50 { opacity: 0.5; }
+.pu-opacity-75 { opacity: 0.75; }
+.pu-pointer-none { pointer-events: none; }
+.pu-select-none { user-select: none; }
+
+/* ---- Stacking ---- */
+.pu-z-10 { z-index: 10; }
+.pu-z-20 { z-index: 20; }
+.pu-z-50 { z-index: 50; }

package/src/styles.ts

@@ -0,0 +1,52 @@
+/**
+ * Inject a component stylesheet once per document.
+ * Use this when writing new primitives — 3 lines of setup.
+ *
+ * @example
+ * ```ts
+ * const ensure = createStyleSheet("my-thing", `.pu-my { color: var(--pu-color-accent); }`);
+ * export const MyThing = component((props) => {
+ *   ensure();
+ *   return <div class="pu-my" ref={(el) => ensure(el.ownerDocument)}>{props.children}</div>;
+ * });
+ * ```
+ *
+ * **Customize without forking:** override CSS variables on a wrapper
+ * (`style={{ "--pu-color-accent": "#69BE28" }}`) or restyle via
+ * `[data-pu-ui="my-thing"]` rules / class props.
+ */
+export function createStyleSheet(id: string, css: string) {
+  return function ensure(doc: Document = document): void {
+    if (typeof doc === "undefined") return;
+    if (doc.querySelector(`style[data-pu-ui="${id}"]`)) return;
+    const el = doc.createElement("style");
+    el.setAttribute("data-pu-ui", id);
+    el.textContent = css;
+    doc.head.appendChild(el);
+  };
+}
+
+/**
+ * Build a style object of CSS custom properties for the `style` prop.
+ * Keys may omit the leading `--` (both `"pu-color-accent"` and `"--pu-x"` work).
+ *
+ * @example
+ * ```tsx
+ * <Card style={styleVars({ "pu-color-accent": "#69BE28", "pu-radius-md": "12px" })} />
+ * ```
+ */
+export function styleVars(
+  vars: Record<string, string | number | undefined | null>,
+): Record<string, string | number> {
+  const out: Record<string, string | number> = {};
+  for (const [key, value] of Object.entries(vars)) {
+    if (value == null || value === "") continue;
+    const name = key.startsWith("--")
+      ? key
+      : key.startsWith("pu-")
+        ? `--${key}`
+        : `--${key}`;
+    out[name] = value;
+  }
+  return out;
+}

package/src/theme.ts

@@ -0,0 +1,48 @@
+import { signal, type Signal } from "@lab206/core";
+import { effect } from "@lab206/core";
+
+export type ThemeMode = "light" | "dark";
+
+export interface ThemeController {
+  /** Current mode signal */
+  mode: Signal<ThemeMode>;
+  setMode(mode: ThemeMode): void;
+  toggle(): void;
+  /** Apply `data-pu-theme` on an element (default: document.documentElement) */
+  bind(target?: Element): () => void;
+}
+
+/**
+ * Create a theme controller. Tokens switch via `data-pu-theme` on the root.
+ *
+ * @example
+ * ```ts
+ * const theme = createTheme("dark");
+ * theme.bind(); // <html data-pu-theme="dark">
+ * theme.toggle();
+ * ```
+ */
+export function createTheme(initial: ThemeMode = "light"): ThemeController {
+  const mode = signal<ThemeMode>(initial);
+
+  function setMode(next: ThemeMode) {
+    mode.set(next);
+  }
+
+  function toggle() {
+    mode.update((m) => (m === "light" ? "dark" : "light"));
+  }
+
+  function bind(target?: Element) {
+    const el =
+      target ??
+      (typeof document !== "undefined" ? document.documentElement : null);
+    if (!el) return () => {};
+
+    return effect(() => {
+      el.setAttribute("data-pu-theme", mode());
+    });
+  }
+
+  return { mode, setMode, toggle, bind };
+}

package/src/utils.ts

@@ -0,0 +1,25 @@
+/** Join class names, skipping falsy. */
+export function cx(
+  ...parts: Array<string | false | null | undefined | Record<string, boolean | undefined | null>>
+): string {
+  const out: string[] = [];
+  for (const p of parts) {
+    if (!p) continue;
+    if (typeof p === "string") {
+      out.push(p);
+      continue;
+    }
+    for (const key of Object.keys(p)) {
+      if (p[key]) out.push(key);
+    }
+  }
+  return out.join(" ");
+}
+
+let uidSeq = 0;
+
+/** Stable-enough unique id for a11y wiring (dialog titles, field labels, …). */
+export function puId(prefix = "pu"): string {
+  uidSeq += 1;
+  return `${prefix}-${uidSeq.toString(36)}`;
+}