@krelborn/stylesui 0.0.0-stage → 0.9.0

package/dist/overlays/index.d.ts

@@ -0,0 +1,6 @@
+export { anchorNameFor } from "./anchorNameFor";
+export { mergeProps } from "./mergeProps";
+export type { OverlayDelay } from "./OverlayDelay";
+export type { OverlayPlacement } from "./OverlayPlacement";
+export { syncPopover } from "./syncPopover";
+export { useOverlay } from "./useOverlay";

package/dist/overlays/mergeProps.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Combines a consumer's own props with the props an overlay hook sets on the same element
+ *
+ * @param own the consumer's props, if any
+ * @param hook the props the hook sets
+ * @returns the consumer's props with the hook's added. Where both set a prop, both functions run, the consumer's
+ *   first; `aria-describedby` and `aria-labelledby` list the hook's ids before the consumer's; `style` objects merge,
+ *   the hook's properties winning except `anchorName`, which lists the hook's name before the consumer's when the
+ *   consumer's is a list of dashed idents, so one trigger can anchor two overlays, and otherwise takes the hook's name,
+ *   in place of a keyword such as `none` or `inherit`; and any other prop takes the hook's value. A hook value of
+ *   `undefined` keeps the consumer's.
+ */
+export declare function mergeProps<Own extends object, Hook extends object>(own: (Own & Partial<Hook>) | undefined, hook: Hook): Omit<Own, keyof Hook> & Hook;

package/dist/overlays/mergeProps.js

@@ -0,0 +1,29 @@
+// src/overlays/mergeProps.ts
+var e = /* @__PURE__ */ new Set(["aria-describedby", "aria-labelledby"]), t = /^--[-\w\u{80}-\u{10FFFF}]+$/u;
+function n(e, t) {
+	let n = { ...e };
+	for (let [e, i] of Object.entries(t)) n[e] = r(e, n[e], i);
+	return n;
+}
+function r(t, n, r) {
+	return n === void 0 ? r : r === void 0 ? n : o(n) && o(r) ? (e) => {
+		n(e), r(e);
+	} : e.has(t) ? `${String(r)} ${String(n)}` : t === "style" && s(n) && s(r) ? i(n, r) : r;
+}
+function i(e, t) {
+	let n = {
+		...e,
+		...t
+	};
+	return t.anchorName !== void 0 && a(e.anchorName) && (n.anchorName = `${t.anchorName}, ${e.anchorName}`), n;
+}
+function a(e) {
+	return e !== void 0 && e.split(",").every((e) => t.test(e.trim()));
+}
+function o(e) {
+	return typeof e == "function";
+}
+function s(e) {
+	return typeof e == "object" && !!e;
+}
+export { n as mergeProps };

package/dist/overlays/syncPopover.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Shows or hides a popover to match `open`, leaving it alone when it already matches. The browser refuses while it
+ * shows or hides another popover, so a refusal is tried again on the next task, unless the popover has left the
+ * document by then. A second refusal is thrown from the timer as a `PopoverRefusedError`, where it is reported without
+ * unmounting the app; any other error is thrown at once.
+ *
+ * @param popover the popover element
+ * @param open whether it should be shown
+ * @returns a function that cancels the retry, for an effect's cleanup
+ */
+export declare function syncPopover(popover: HTMLElement, open: boolean): () => void;

package/dist/overlays/syncPopover.js

@@ -0,0 +1,24 @@
+import { PopoverRefusedError as e } from "../errors/PopoverRefusedError.js";
+// src/overlays/syncPopover.ts
+function t(t, r) {
+	if (n(t, r) === null) return () => {};
+	let i = setTimeout(() => {
+		if (!t.isConnected) return;
+		let i = n(t, r);
+		if (i !== null) throw new e(t, r, i);
+	}, 0);
+	return () => {
+		clearTimeout(i);
+	};
+}
+function n(e, t) {
+	let n = e.matches(":popover-open");
+	try {
+		t && !n ? e.showPopover() : !t && n && e.hidePopover();
+	} catch (e) {
+		if (e instanceof DOMException && e.name === "InvalidStateError") return e;
+		throw e;
+	}
+	return null;
+}
+export { t as syncPopover };

package/dist/overlays/useOverlay.d.ts

@@ -0,0 +1,71 @@
+import type { OverlayDelay } from "./OverlayDelay";
+interface UseOverlayOptions {
+    /**
+     * Whether the overlay starts open when uncontrolled
+     */
+    defaultOpen: boolean;
+    /**
+     * Show and hide delays, in milliseconds
+     */
+    delay: Required<OverlayDelay>;
+    /**
+     * Called with the requested open state whenever the overlay asks to open or close
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Controls whether the overlay is open
+     */
+    open?: boolean;
+}
+/**
+ * An overlay's identity and open state, and the requests that change it. Each request cancels any pending one.
+ */
+interface OverlayState {
+    /**
+     * `anchor-name` that ties the overlay's position to its trigger
+     */
+    anchorName: string;
+    /**
+     * Cancels a pending delayed show or hide
+     */
+    cancelDelay: () => void;
+    /**
+     * Hides the overlay at once
+     */
+    hide: () => void;
+    /**
+     * Hides the overlay after the hide delay, unless another request comes first
+     */
+    hideAfterDelay: () => void;
+    /**
+     * The overlay element's `id`
+     */
+    id: string;
+    /**
+     * Whether the overlay is open
+     */
+    open: boolean;
+    /**
+     * Shows the overlay at once
+     */
+    show: () => void;
+    /**
+     * Shows the overlay after the show delay, unless another request comes first
+     */
+    showAfterDelay: () => void;
+    /**
+     * Shows the overlay once the current task has finished, unless another request comes first
+     */
+    showAfterTask: () => void;
+}
+/**
+ * Holds an overlay's open state, controlled or uncontrolled, and hides an open overlay on Escape. An Escape that
+ * hides the overlay has its default action prevented, so a dialog around the trigger stays open. Escape is left alone
+ * while it ends a text composition, and when the overlay cannot close because it is controlled with no `onOpenChange`.
+ *
+ * @param options the initial or controlled open state, the delays and the change callback
+ * @returns the overlay's id, the `anchor-name` that ties it to its trigger, whether it is open, and the requests that
+ *   change it
+ */
+export declare function useOverlay({ defaultOpen, delay, onOpenChange, open: controlledOpen, }: UseOverlayOptions): OverlayState;
+export {};

package/dist/overlays/useOverlay.js

@@ -0,0 +1,49 @@
+import { anchorNameFor as e } from "./anchorNameFor.js";
+import { useEffect as t, useEffectEvent as n, useId as r, useRef as i, useState as a } from "react";
+// src/overlays/useOverlay.ts
+function o({ defaultOpen: o, delay: s, onOpenChange: c, open: l }) {
+	let u = r(), [d, f] = a(o), p = i(void 0), m = l ?? d;
+	function h() {
+		clearTimeout(p.current), p.current = void 0;
+	}
+	function g(e) {
+		l === void 0 && f(e), c?.(e);
+	}
+	function _(e, t) {
+		h(), e !== m && (t <= 0 ? g(e) : v(e, t));
+	}
+	function v(e, t) {
+		p.current = setTimeout(() => {
+			p.current = void 0, g(e);
+		}, t);
+	}
+	function y() {
+		h(), m || v(!0, 0);
+	}
+	let b = n((e) => {
+		let t = l === void 0 || c !== void 0;
+		e.key === "Escape" && !e.isComposing && t && (e.preventDefault(), _(!1, 0));
+	});
+	return t(() => {
+		if (!m) return;
+		function e(e) {
+			b(e);
+		}
+		return document.addEventListener("keydown", e), () => {
+			document.removeEventListener("keydown", e);
+		};
+	}, [m]), t(() => () => {
+		clearTimeout(p.current);
+	}, []), {
+		anchorName: e(u),
+		cancelDelay: h,
+		hide: () => _(!1, 0),
+		hideAfterDelay: () => _(!1, s.hide),
+		id: u,
+		open: m,
+		show: () => _(!0, 0),
+		showAfterDelay: () => _(!0, s.show),
+		showAfterTask: y
+	};
+}
+export { o as useOverlay };

package/dist/styles.css

@@ -0,0 +1 @@
+:root{--sui-black:#000;--sui-white:#fff;--sui-gray-100:#f3f4f6;--sui-gray-200:#e5e7eb;--sui-gray-300:#d1d5db;--sui-gray-400:#9ca3af;--sui-gray-500:#6b7280;--sui-gray-600:#4b5563;--sui-gray-700:#374151;--sui-gray-800:#1f2937;--sui-gray-900:#111827;--sui-red-100:#fee2e2;--sui-red-200:#fecaca;--sui-red-300:#fca5a5;--sui-red-400:#f87171;--sui-red-500:#ef4444;--sui-red-600:#dc2626;--sui-red-700:#b91c1c;--sui-red-800:#991b1b;--sui-red-900:#7f1d1d;--sui-orange-100:#ffedd5;--sui-orange-200:#fed7aa;--sui-orange-300:#fdba74;--sui-orange-400:#fb923c;--sui-orange-500:#f97316;--sui-orange-600:#ea580c;--sui-orange-700:#c2410c;--sui-orange-800:#9a3412;--sui-orange-900:#7c2d12;--sui-yellow-100:#fef9c3;--sui-yellow-200:#fef08a;--sui-yellow-300:#fde047;--sui-yellow-400:#facc15;--sui-yellow-500:#eab308;--sui-yellow-600:#ca8a04;--sui-yellow-700:#a16207;--sui-yellow-800:#854d0e;--sui-yellow-900:#713f12;--sui-green-100:#dcfce7;--sui-green-200:#bbf7d0;--sui-green-300:#86efac;--sui-green-400:#4ade80;--sui-green-500:#22c55e;--sui-green-600:#16a34a;--sui-green-700:#15803d;--sui-green-800:#166534;--sui-green-900:#14532d;--sui-blue-100:#dbeafe;--sui-blue-200:#bfdbfe;--sui-blue-300:#93c5fd;--sui-blue-400:#60a5fa;--sui-blue-500:#3b82f6;--sui-blue-600:#2563eb;--sui-blue-700:#1d4ed8;--sui-blue-800:#1e40af;--sui-blue-900:#1e3a8a;--sui-indigo-100:#e0e7ff;--sui-indigo-200:#c7d2fe;--sui-indigo-300:#a5b4fc;--sui-indigo-400:#818cf8;--sui-indigo-500:#6366f1;--sui-indigo-600:#4f46e5;--sui-indigo-700:#4338ca;--sui-indigo-800:#3730a3;--sui-indigo-900:#312e81;--sui-violet-100:#ede9fe;--sui-violet-200:#ddd6fe;--sui-violet-300:#c4b5fd;--sui-violet-400:#a78bfa;--sui-violet-500:#8b5cf6;--sui-violet-600:#7c3aed;--sui-violet-700:#6d28d9;--sui-violet-800:#5b21b6;--sui-violet-900:#4c1d95;--sui-pink-100:#fce7f3;--sui-pink-200:#fbcfe8;--sui-pink-300:#f9a8d4;--sui-pink-400:#f472b6;--sui-pink-500:#ec4899;--sui-pink-600:#db2777;--sui-pink-700:#be185d;--sui-pink-800:#9d174d;--sui-pink-900:#831843;--sui-font-size-xs:.75rem;--sui-font-size-sm:.875rem;--sui-font-size-md:1rem;--sui-font-size-lg:1.125rem;--sui-font-size-xl:1.25rem;--sui-font-size-2xl:1.5rem;--sui-font-size-3xl:1.875rem;--sui-font-weight-regular:400;--sui-font-weight-medium:500;--sui-font-weight-bold:700;--sui-line-height-tight:1.25;--sui-line-height-normal:1.5;--sui-width-prose:65ch;--sui-width-content:48rem;--sui-width-wide:72rem}:root,[data-sui-theme],[data-sui-palette]{--sui-space-1:calc(1 * var(--sui-space-unit));--sui-space-2:calc(2 * var(--sui-space-unit));--sui-space-3:calc(3 * var(--sui-space-unit));--sui-space-4:calc(4 * var(--sui-space-unit));--sui-space-5:calc(5 * var(--sui-space-unit));--sui-space-6:calc(6 * var(--sui-space-unit));--sui-space-7:calc(7 * var(--sui-space-unit));--sui-space-8:calc(8 * var(--sui-space-unit));--sui-color-control-border:color-mix(in srgb, var(--sui-color-ink) var(--sui-control-outline), transparent);--sui-color-shadow:color-mix(in srgb, var(--sui-color-shadow-hard) var(--sui-shadow-hardness), var(--sui-color-shadow-soft));--sui-shadow-sm:var(--sui-shadow-sm-offset) var(--sui-color-shadow)}:root,[data-sui-theme=default]{--sui-radius-sm:2px;--sui-radius-md:4px;--sui-radius-lg:8px;--sui-radius-full:9999px;--sui-radius-control:var(--sui-radius-md);--sui-border-width:1px;--sui-focus-ring-width:2px;--sui-icon-stroke-width:2;--sui-shadow-sm-offset:0 1px 3px;--sui-shadow-hardness:0%;--sui-control-depth:0px;--sui-control-outline:0%;--sui-motion-spring:.12s ease-out;--sui-space-unit:.25rem;--sui-font-body:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--sui-font-heading:system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--sui-font-mono:ui-monospace, SFMono-Regular, Menlo, monospace;--sui-font-weight-control:var(--sui-font-weight-medium)}[data-sui-theme=playful]{--sui-radius-sm:6px;--sui-radius-md:12px;--sui-radius-lg:20px;--sui-radius-full:9999px;--sui-radius-control:var(--sui-radius-full);--sui-border-width:2px;--sui-focus-ring-width:3px;--sui-icon-stroke-width:2;--sui-shadow-sm-offset:4px 4px 0;--sui-shadow-hardness:100%;--sui-control-depth:4px;--sui-control-outline:100%;--sui-motion-spring:.45s linear(0, .059 4%, .206 8%, .396 12%, .596 16%, .779 20%, .931 24%, 1.043 28%, 1.116 32%, 1.162 38%, 1.151 44%, 1.11 50%, 1.046 58%, .999 66%, .974 76%, .98 88%, 1);--sui-space-unit:.3rem;--sui-font-body:"Nunito Variable", "Nunito", ui-rounded, system-ui, sans-serif;--sui-font-heading:"Fredoka Variable", "Fredoka", ui-rounded, system-ui, sans-serif;--sui-font-mono:ui-monospace, SFMono-Regular, Menlo, monospace;--sui-font-weight-control:800}:where(:root,[data-sui-theme=default]),[data-sui-palette=bright]{--sui-color-primary:light-dark(var(--sui-blue-600),var(--sui-blue-400));--sui-color-primary-hover:light-dark(var(--sui-blue-700),var(--sui-blue-300));--sui-color-primary-subtle:light-dark(color-mix(in srgb, var(--sui-blue-100), var(--sui-white)),color-mix(in srgb, var(--sui-blue-900), var(--sui-gray-900)));--sui-color-on-primary:light-dark(var(--sui-white),var(--sui-gray-900));--sui-color-secondary:light-dark(var(--sui-gray-200),var(--sui-gray-700));--sui-color-secondary-hover:light-dark(var(--sui-gray-300),var(--sui-gray-600));--sui-color-secondary-subtle:light-dark(var(--sui-gray-100),var(--sui-gray-800));--sui-color-on-secondary:light-dark(var(--sui-gray-900),var(--sui-gray-100));--sui-color-background:light-dark(var(--sui-white),var(--sui-gray-900));--sui-color-surface:light-dark(var(--sui-gray-100),var(--sui-gray-800));--sui-color-field:light-dark(var(--sui-white),var(--sui-gray-900));--sui-color-overlay:light-dark(var(--sui-white),color-mix(in srgb, var(--sui-gray-800), var(--sui-gray-700)));--sui-color-sunken:light-dark(var(--sui-gray-100),var(--sui-gray-800));--sui-color-border:light-dark(var(--sui-gray-300),var(--sui-gray-700));--sui-color-ink:light-dark(var(--sui-gray-900),var(--sui-gray-900));--sui-color-input-border:light-dark(var(--sui-gray-500),var(--sui-gray-400));--sui-color-text:light-dark(var(--sui-gray-900),var(--sui-gray-100));--sui-color-text-muted:light-dark(var(--sui-gray-600),var(--sui-gray-400));--sui-color-tooltip:light-dark(var(--sui-gray-900),var(--sui-gray-100));--sui-color-on-tooltip:light-dark(var(--sui-white),var(--sui-gray-900));--sui-color-focus-ring:light-dark(var(--sui-blue-500),var(--sui-blue-300));--sui-color-shadow-soft:light-dark(#0000001f,#00000080);--sui-color-shadow-hard:light-dark(var(--sui-gray-900),var(--sui-gray-600));--sui-color-success:light-dark(var(--sui-green-700),var(--sui-green-400));--sui-color-success-hover:light-dark(var(--sui-green-800),var(--sui-green-300));--sui-color-on-success:light-dark(var(--sui-white),var(--sui-gray-900));--sui-color-success-text:light-dark(var(--sui-green-800),var(--sui-green-300));--sui-color-success-subtle:light-dark(color-mix(in srgb, var(--sui-green-100), var(--sui-white)),color-mix(in srgb, var(--sui-green-900), var(--sui-gray-900)));--sui-color-warning:light-dark(var(--sui-yellow-500),var(--sui-yellow-300));--sui-color-warning-hover:light-dark(var(--sui-yellow-400),var(--sui-yellow-200));--sui-color-on-warning:light-dark(var(--sui-gray-900),var(--sui-gray-900));--sui-color-warning-text:light-dark(var(--sui-yellow-800),var(--sui-yellow-300));--sui-color-warning-subtle:light-dark(color-mix(in srgb, var(--sui-yellow-100), var(--sui-white)),color-mix(in srgb, var(--sui-yellow-900), var(--sui-gray-900)));--sui-color-danger:light-dark(var(--sui-red-600),var(--sui-red-400));--sui-color-danger-hover:light-dark(var(--sui-red-700),var(--sui-red-300));--sui-color-on-danger:light-dark(var(--sui-white),var(--sui-gray-900));--sui-color-danger-text:light-dark(var(--sui-red-700),var(--sui-red-300));--sui-color-danger-subtle:light-dark(color-mix(in srgb, var(--sui-red-100), var(--sui-white)),color-mix(in srgb, var(--sui-red-900), var(--sui-gray-900)));--sui-color-info:light-dark(var(--sui-indigo-700),var(--sui-indigo-300));--sui-color-info-hover:light-dark(var(--sui-indigo-800),var(--sui-indigo-200));--sui-color-on-info:light-dark(var(--sui-white),var(--sui-gray-900));--sui-color-info-text:light-dark(var(--sui-indigo-700),var(--sui-indigo-300));--sui-color-info-subtle:light-dark(color-mix(in srgb, var(--sui-indigo-100), var(--sui-white)),color-mix(in srgb, var(--sui-indigo-900), var(--sui-gray-900)))}:where([data-sui-theme=playful]),[data-sui-palette=pop]{--_sui-ink:color-mix(in srgb, var(--sui-violet-900) 35%, var(--sui-black));--_sui-plum:color-mix(in srgb, var(--sui-violet-900) 45%, var(--sui-black));--sui-color-primary:light-dark(var(--sui-violet-600),var(--sui-violet-400));--sui-color-primary-hover:light-dark(var(--sui-violet-700),var(--sui-violet-300));--sui-color-primary-subtle:light-dark(color-mix(in srgb, var(--sui-violet-100), var(--sui-white)),color-mix(in srgb, var(--sui-violet-700) 55%, var(--sui-black)));--sui-color-on-primary:light-dark(var(--sui-white),var(--_sui-ink));--sui-color-secondary:light-dark(var(--sui-yellow-300),var(--sui-yellow-400));--sui-color-secondary-hover:light-dark(var(--sui-yellow-200),var(--sui-yellow-300));--sui-color-secondary-subtle:light-dark(color-mix(in srgb, var(--sui-yellow-100), var(--sui-white)),color-mix(in srgb, var(--sui-yellow-900) 40%, var(--_sui-plum)));--sui-color-on-secondary:light-dark(var(--_sui-ink),var(--_sui-ink));--sui-color-background:light-dark(color-mix(in srgb, var(--sui-orange-100) 40%, var(--sui-white)),var(--_sui-plum));--sui-color-surface:light-dark(var(--sui-white),color-mix(in srgb, var(--sui-violet-900) 70%, var(--sui-black)));--sui-color-field:light-dark(color-mix(in srgb, var(--sui-orange-100) 40%, var(--sui-white)),var(--_sui-plum));--sui-color-overlay:light-dark(color-mix(in srgb, var(--sui-orange-100) 40%, var(--sui-white)),var(--_sui-plum));--sui-color-sunken:light-dark(var(--sui-white),color-mix(in srgb, var(--sui-violet-900) 70%, var(--sui-black)));--sui-color-border:light-dark(var(--_sui-ink),var(--sui-violet-300));--sui-color-ink:light-dark(var(--_sui-ink),var(--_sui-ink));--sui-color-input-border:light-dark(var(--_sui-ink),var(--sui-violet-300));--sui-color-text:light-dark(var(--_sui-ink),color-mix(in srgb, var(--sui-violet-100), var(--sui-white)));--sui-color-text-muted:light-dark(color-mix(in srgb, var(--sui-violet-900) 60%, var(--sui-gray-500)),var(--sui-violet-200));--sui-color-tooltip:light-dark(var(--_sui-ink),color-mix(in srgb, var(--sui-violet-100), var(--sui-white)));--sui-color-on-tooltip:light-dark(color-mix(in srgb, var(--sui-orange-100) 40%, var(--sui-white)),var(--_sui-plum));--sui-color-focus-ring:light-dark(var(--sui-pink-600),var(--sui-yellow-300));--sui-color-shadow-soft:light-dark(#0000001f,#00000080);--sui-color-shadow-hard:light-dark(var(--_sui-ink),var(--sui-pink-600));--sui-color-success:light-dark(var(--sui-green-400),var(--sui-green-300));--sui-color-success-hover:light-dark(var(--sui-green-300),var(--sui-green-200));--sui-color-on-success:light-dark(var(--_sui-ink),var(--_sui-ink));--sui-color-success-text:light-dark(var(--sui-green-800),var(--sui-green-300));--sui-color-success-subtle:light-dark(color-mix(in srgb, var(--sui-green-100), var(--sui-white)),color-mix(in srgb, var(--sui-green-700) 55%, var(--sui-black)));--sui-color-warning:light-dark(var(--sui-yellow-400),var(--sui-yellow-300));--sui-color-warning-hover:light-dark(var(--sui-yellow-300),var(--sui-yellow-200));--sui-color-on-warning:light-dark(var(--_sui-ink),var(--_sui-ink));--sui-color-warning-text:light-dark(var(--sui-yellow-800),var(--sui-yellow-300));--sui-color-warning-subtle:light-dark(color-mix(in srgb, var(--sui-yellow-100), var(--sui-white)),color-mix(in srgb, var(--sui-yellow-700) 55%, var(--sui-black)));--sui-color-danger:light-dark(var(--sui-red-400),var(--sui-red-300));--sui-color-danger-hover:light-dark(var(--sui-red-300),var(--sui-red-200));--sui-color-on-danger:light-dark(var(--_sui-ink),var(--_sui-ink));--sui-color-danger-text:light-dark(var(--sui-red-700),var(--sui-red-300));--sui-color-danger-subtle:light-dark(color-mix(in srgb, var(--sui-red-100), var(--sui-white)),color-mix(in srgb, var(--sui-red-700) 55%, var(--sui-black)));--sui-color-info:light-dark(var(--sui-blue-400),var(--sui-blue-300));--sui-color-info-hover:light-dark(var(--sui-blue-300),var(--sui-blue-200));--sui-color-on-info:light-dark(var(--_sui-ink),var(--_sui-ink));--sui-color-info-text:light-dark(var(--sui-blue-700),var(--sui-blue-300));--sui-color-info-subtle:light-dark(color-mix(in srgb, var(--sui-blue-100), var(--sui-white)),color-mix(in srgb, var(--sui-blue-700) 55%, var(--sui-black)))}[data-sui-palette=mist]{--_sui-mist-page:#eef1f5;--_sui-mist-sunken:#e2e6ec;--_sui-mist-border:#d5dbe3;--_sui-mist-night:#0f141b;--_sui-mist-night-border:#2a3441;--sui-color-primary:light-dark(var(--sui-blue-700),var(--sui-blue-400));--sui-color-primary-hover:light-dark(var(--sui-blue-800),var(--sui-blue-300));--sui-color-primary-subtle:light-dark(#dfe8fb,#172a4a);--sui-color-on-primary:light-dark(var(--sui-white),var(--_sui-mist-night));--sui-color-secondary:light-dark(var(--_sui-mist-sunken),var(--_sui-mist-night-border));--sui-color-secondary-hover:light-dark(var(--_sui-mist-border),#344050);--sui-color-secondary-subtle:light-dark(var(--_sui-mist-sunken),#222b37);--sui-color-on-secondary:light-dark(var(--sui-gray-900),var(--_sui-mist-page));--sui-color-background:light-dark(var(--_sui-mist-page),var(--_sui-mist-night));--sui-color-surface:light-dark(var(--sui-white),#19212b);--sui-color-field:light-dark(var(--sui-white),#131a22);--sui-color-overlay:light-dark(var(--sui-white),#212a36);--sui-color-sunken:light-dark(var(--_sui-mist-sunken),#0a0e13);--sui-color-border:light-dark(var(--_sui-mist-border),var(--_sui-mist-night-border));--sui-color-ink:light-dark(var(--sui-gray-900),var(--sui-gray-900));--sui-color-input-border:light-dark(var(--sui-gray-500),#8b95a3);--sui-color-text:light-dark(var(--sui-gray-900),var(--_sui-mist-page));--sui-color-text-muted:light-dark(var(--sui-gray-600),#9aa4b2);--sui-color-tooltip:light-dark(var(--sui-gray-900),var(--_sui-mist-page));--sui-color-on-tooltip:light-dark(var(--_sui-mist-page),var(--_sui-mist-night));--sui-color-focus-ring:light-dark(var(--sui-blue-600),var(--sui-blue-300));--sui-color-shadow-soft:light-dark(#0000001f,#00000080);--sui-color-shadow-hard:light-dark(var(--sui-gray-900),var(--sui-gray-600));--sui-color-success:light-dark(var(--sui-green-700),var(--sui-green-400));--sui-color-success-hover:light-dark(var(--sui-green-800),var(--sui-green-300));--sui-color-on-success:light-dark(var(--sui-white),var(--sui-gray-900));--sui-color-success-text:light-dark(var(--sui-green-800),var(--sui-green-300));--sui-color-success-subtle:light-dark(color-mix(in srgb, var(--sui-green-100), var(--sui-white)),color-mix(in srgb, var(--sui-green-900), var(--_sui-mist-night)));--sui-color-warning:light-dark(var(--sui-yellow-500),var(--sui-yellow-300));--sui-color-warning-hover:light-dark(var(--sui-yellow-400),var(--sui-yellow-200));--sui-color-on-warning:light-dark(var(--sui-gray-900),var(--sui-gray-900));--sui-color-warning-text:light-dark(var(--sui-yellow-800),var(--sui-yellow-300));--sui-color-warning-subtle:light-dark(color-mix(in srgb, var(--sui-yellow-100), var(--sui-white)),color-mix(in srgb, var(--sui-yellow-900), var(--_sui-mist-night)));--sui-color-danger:light-dark(var(--sui-red-600),var(--sui-red-400));--sui-color-danger-hover:light-dark(var(--sui-red-700),var(--sui-red-300));--sui-color-on-danger:light-dark(var(--sui-white),var(--sui-gray-900));--sui-color-danger-text:light-dark(var(--sui-red-700),var(--sui-red-300));--sui-color-danger-subtle:light-dark(color-mix(in srgb, var(--sui-red-100), var(--sui-white)),color-mix(in srgb, var(--sui-red-900), var(--_sui-mist-night)));--sui-color-info:light-dark(var(--sui-indigo-700),var(--sui-indigo-300));--sui-color-info-hover:light-dark(var(--sui-indigo-800),var(--sui-indigo-200));--sui-color-on-info:light-dark(var(--sui-white),var(--sui-gray-900));--sui-color-info-text:light-dark(var(--sui-indigo-700),var(--sui-indigo-300));--sui-color-info-subtle:light-dark(color-mix(in srgb, var(--sui-indigo-100), var(--sui-white)),color-mix(in srgb, var(--sui-indigo-900), var(--_sui-mist-night)))}[data-sui-palette=paper]{--_sui-paper-page:#f4f1ea;--_sui-paper-surface:#fcfbf8;--_sui-paper-raised:#fefdfb;--_sui-paper-sunken:#e9e4da;--_sui-paper-border:#ddd6c9;--_sui-paper-ink:#1c1917;--_sui-paper-muted:#57534e;--_sui-paper-night:#1b1916;--_sui-paper-night-border:#3a352f;--_sui-paper-night-text:#f2eee6;--sui-color-primary:light-dark(var(--sui-blue-700),#7cb0f7);--sui-color-primary-hover:light-dark(var(--sui-blue-800),#a5c8fa);--sui-color-primary-subtle:light-dark(#e3e6f3,#22304a);--sui-color-on-primary:light-dark(var(--sui-white),var(--_sui-paper-night));--sui-color-secondary:light-dark(var(--_sui-paper-sunken),var(--_sui-paper-night-border));--sui-color-secondary-hover:light-dark(var(--_sui-paper-border),#46403a);--sui-color-secondary-subtle:light-dark(var(--_sui-paper-sunken),#302c27);--sui-color-on-secondary:light-dark(var(--_sui-paper-ink),var(--_sui-paper-night-text));--sui-color-background:light-dark(var(--_sui-paper-page),var(--_sui-paper-night));--sui-color-surface:light-dark(var(--_sui-paper-surface),#26231f);--sui-color-field:light-dark(var(--_sui-paper-raised),#1f1d1a);--sui-color-overlay:light-dark(var(--_sui-paper-raised),#2f2b26);--sui-color-sunken:light-dark(var(--_sui-paper-sunken),#141210);--sui-color-border:light-dark(var(--_sui-paper-border),var(--_sui-paper-night-border));--sui-color-ink:light-dark(var(--_sui-paper-ink),var(--_sui-paper-ink));--sui-color-input-border:light-dark(#78716c,#948d86);--sui-color-text:light-dark(var(--_sui-paper-ink),var(--_sui-paper-night-text));--sui-color-text-muted:light-dark(var(--_sui-paper-muted),#a8a29e);--sui-color-tooltip:light-dark(var(--_sui-paper-ink),var(--_sui-paper-night-text));--sui-color-on-tooltip:light-dark(var(--_sui-paper-page),var(--_sui-paper-night));--sui-color-focus-ring:light-dark(var(--sui-blue-600),var(--sui-blue-300));--sui-color-shadow-soft:light-dark(#0000001f,#00000080);--sui-color-shadow-hard:light-dark(var(--_sui-paper-ink),var(--_sui-paper-muted));--sui-color-success:light-dark(var(--sui-green-700),var(--sui-green-400));--sui-color-success-hover:light-dark(var(--sui-green-800),var(--sui-green-300));--sui-color-on-success:light-dark(var(--sui-white),var(--sui-gray-900));--sui-color-success-text:light-dark(var(--sui-green-800),var(--sui-green-300));--sui-color-success-subtle:light-dark(color-mix(in srgb, var(--sui-green-100), var(--_sui-paper-surface)),color-mix(in srgb, var(--sui-green-900), var(--_sui-paper-night)));--sui-color-warning:light-dark(var(--sui-yellow-500),var(--sui-yellow-300));--sui-color-warning-hover:light-dark(var(--sui-yellow-400),var(--sui-yellow-200));--sui-color-on-warning:light-dark(var(--sui-gray-900),var(--sui-gray-900));--sui-color-warning-text:light-dark(var(--sui-yellow-800),var(--sui-yellow-300));--sui-color-warning-subtle:light-dark(color-mix(in srgb, var(--sui-yellow-100), var(--_sui-paper-surface)),color-mix(in srgb, var(--sui-yellow-900), var(--_sui-paper-night)));--sui-color-danger:light-dark(var(--sui-red-600),var(--sui-red-400));--sui-color-danger-hover:light-dark(var(--sui-red-700),var(--sui-red-300));--sui-color-on-danger:light-dark(var(--sui-white),var(--sui-gray-900));--sui-color-danger-text:light-dark(var(--sui-red-700),var(--sui-red-300));--sui-color-danger-subtle:light-dark(color-mix(in srgb, var(--sui-red-100), var(--_sui-paper-surface)),color-mix(in srgb, var(--sui-red-900), var(--_sui-paper-night)));--sui-color-info:light-dark(var(--sui-indigo-700),var(--sui-indigo-300));--sui-color-info-hover:light-dark(var(--sui-indigo-800),var(--sui-indigo-200));--sui-color-on-info:light-dark(var(--sui-white),var(--sui-gray-900));--sui-color-info-text:light-dark(var(--sui-indigo-700),var(--sui-indigo-300));--sui-color-info-subtle:light-dark(color-mix(in srgb, var(--sui-indigo-100), var(--_sui-paper-surface)),color-mix(in srgb, var(--sui-indigo-900), var(--_sui-paper-night)))}[data-sui-palette=dusk]{--_sui-dusk-page:#e2e5e9;--_sui-dusk-surface:#eceef1;--_sui-dusk-raised:#f4f5f7;--_sui-dusk-sunken:#d6dae0;--_sui-dusk-border:#c5cbd3;--_sui-dusk-ink:#0f141a;--_sui-dusk-night:#23282f;--_sui-dusk-night-raised:#363d46;--_sui-dusk-night-border:#444c56;--_sui-dusk-night-text:#ccd4dc;--_sui-dusk-night-blue:#96d0ff;--sui-color-primary:light-dark(var(--sui-blue-800),#6cb6ff);--sui-color-primary-hover:light-dark(var(--sui-blue-900),var(--_sui-dusk-night-blue));--sui-color-primary-subtle:light-dark(#d3dbec,#26364d);--sui-color-on-primary:light-dark(var(--sui-white),var(--_sui-dusk-night));--sui-color-secondary:light-dark(var(--_sui-dusk-sunken),var(--_sui-dusk-night-border));--sui-color-secondary-hover:light-dark(var(--_sui-dusk-border),#4f5864);--sui-color-secondary-subtle:light-dark(var(--_sui-dusk-sunken),var(--_sui-dusk-night-raised));--sui-color-on-secondary:light-dark(var(--_sui-dusk-ink),var(--_sui-dusk-night-text));--sui-color-background:light-dark(var(--_sui-dusk-page),var(--_sui-dusk-night));--sui-color-surface:light-dark(var(--_sui-dusk-surface),#2c323a);--sui-color-field:light-dark(var(--_sui-dusk-raised),#272c33);--sui-color-overlay:light-dark(var(--_sui-dusk-raised),var(--_sui-dusk-night-raised));--sui-color-sunken:light-dark(var(--_sui-dusk-sunken),#1c2026);--sui-color-border:light-dark(var(--_sui-dusk-border),var(--_sui-dusk-night-border));--sui-color-ink:light-dark(var(--_sui-dusk-ink),var(--_sui-dusk-ink));--sui-color-input-border:light-dark(#5f6773,#8b96a3);--sui-color-text:light-dark(var(--_sui-dusk-ink),var(--_sui-dusk-night-text));--sui-color-text-muted:light-dark(#424a55,#a4aeb9);--sui-color-tooltip:light-dark(var(--_sui-dusk-ink),var(--_sui-dusk-night-text));--sui-color-on-tooltip:light-dark(var(--_sui-dusk-page),var(--_sui-dusk-night));--sui-color-focus-ring:light-dark(var(--sui-blue-600),var(--_sui-dusk-night-blue));--sui-color-shadow-soft:light-dark(#0000001f,#00000080);--sui-color-shadow-hard:light-dark(var(--_sui-dusk-ink),var(--sui-gray-600));--sui-color-success:light-dark(var(--sui-green-700),var(--sui-green-400));--sui-color-success-hover:light-dark(var(--sui-green-800),var(--sui-green-300));--sui-color-on-success:light-dark(var(--sui-white),var(--sui-gray-900));--sui-color-success-text:light-dark(var(--sui-green-800),var(--sui-green-300));--sui-color-success-subtle:light-dark(color-mix(in srgb, var(--sui-green-100), var(--_sui-dusk-surface)),color-mix(in srgb, var(--sui-green-900), var(--_sui-dusk-night)));--sui-color-warning:light-dark(var(--sui-yellow-500),var(--sui-yellow-300));--sui-color-warning-hover:light-dark(var(--sui-yellow-400),var(--sui-yellow-200));--sui-color-on-warning:light-dark(var(--sui-gray-900),var(--sui-gray-900));--sui-color-warning-text:light-dark(var(--sui-yellow-800),var(--sui-yellow-300));--sui-color-warning-subtle:light-dark(color-mix(in srgb, var(--sui-yellow-100), var(--_sui-dusk-surface)),color-mix(in srgb, var(--sui-yellow-900), var(--_sui-dusk-night)));--sui-color-danger:light-dark(var(--sui-red-600),var(--sui-red-400));--sui-color-danger-hover:light-dark(var(--sui-red-700),var(--sui-red-300));--sui-color-on-danger:light-dark(var(--sui-white),var(--sui-gray-900));--sui-color-danger-text:light-dark(var(--sui-red-700),var(--sui-red-300));--sui-color-danger-subtle:light-dark(color-mix(in srgb, var(--sui-red-100), var(--_sui-dusk-surface)),color-mix(in srgb, var(--sui-red-900), var(--_sui-dusk-night)));--sui-color-info:light-dark(var(--sui-indigo-700),var(--sui-indigo-300));--sui-color-info-hover:light-dark(var(--sui-indigo-800),var(--sui-indigo-200));--sui-color-on-info:light-dark(var(--sui-white),var(--sui-gray-900));--sui-color-info-text:light-dark(var(--sui-indigo-700),var(--sui-indigo-300));--sui-color-info-subtle:light-dark(color-mix(in srgb, var(--sui-indigo-100), var(--_sui-dusk-surface)),color-mix(in srgb, var(--sui-indigo-900), var(--_sui-dusk-night)))}:root,[data-sui-mode=system]{color-scheme:light dark}[data-sui-mode=light]{color-scheme:light}[data-sui-mode=dark]{color-scheme:dark}:where([data-sui-theme],[data-sui-mode],[data-sui-palette]){background-color:var(--sui-color-background);color:var(--sui-color-text);font-family:var(--sui-font-body)}*,:before,:after{box-sizing:border-box}*{margin:0}body{background-color:var(--sui-color-background);color:var(--sui-color-text);font-family:var(--sui-font-body);line-height:var(--sui-line-height-normal);-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}

package/fonts/playful.css

@@ -0,0 +1,3 @@
+/* Published as is, not built: Vite's library mode would inline every font file as base64 */
+@import "@fontsource-variable/fredoka/wght.css";
+@import "@fontsource-variable/nunito/wght.css";

package/package.json

@@ -1,6 +1,106 @@
 {
   "name": "@krelborn/stylesui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.9.0",
+  "description": "Tree-shakable React 19 component library styled with CSS modules and custom properties, with themes, palettes, light and dark modes, and accessibility tests against WCAG 2.2 AA.",
+  "keywords": [
+    "accessibility",
+    "component-library",
+    "css-custom-properties",
+    "css-modules",
+    "dark-mode",
+    "design-system",
+    "react",
+    "react-components",
+    "theming",
+    "ui-library",
+    "wcag"
+  ],
+  "homepage": "https://github.com/Krelborn/StylesUI#readme",
+  "bugs": {
+    "url": "https://github.com/Krelborn/StylesUI/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Krelborn/StylesUI.git"
+  },
+  "files": [
+    "dist",
+    "fonts"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./fonts/playful.css": "./fonts/playful.css"
+  },
+  "publishConfig": {
+    "@krelborn:registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "dependencies": {
+    "@fontsource-variable/fredoka": "^5.3.0",
+    "@fontsource-variable/nunito": "^5.3.0",
+    "clsx": "^2.1.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^8.0.6",
+    "@rolldown/plugin-babel": "^0.2.4",
+    "@storybook/addon-a11y": "^10.6.7",
+    "@storybook/addon-docs": "^10.6.7",
+    "@storybook/addon-vitest": "^10.6.7",
+    "@storybook/react-vite": "^10.6.7",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.7",
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^26.6.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
+    "@vitest/browser-playwright": "^5.1.0",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "husky": "^9.1.7",
+    "jsdom": "^31.0.1",
+    "lint-staged": "^17.5.1",
+    "lucide-static": "^1.54.0",
+    "oxfmt": "^0.70.0",
+    "oxlint": "^1.85.0",
+    "playwright": "^1.63.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "storybook": "^10.6.7",
+    "typescript": "~7.0.2",
+    "vite": "^8.3.8",
+    "vite-plugin-lib-inject-css": "^2.2.2",
+    "vitest": "^5.1.0"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "typecheck": "tsc -b",
+    "lint": "oxlint",
+    "test": "vitest run",
+    "test:unit": "vitest run --project=unit",
+    "test:storybook": "vitest run --project=\"storybook*\"",
+    "test:watch": "vitest",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test:hooks": "node --test \".claude/hooks/*.test.mjs\"",
+    "format": "oxfmt",
+    "format:check": "oxfmt --check",
+    "verify": "pnpm lint && pnpm format:check && pnpm typecheck && pnpm test"
+  }
 }