@abuzareal/contour-ui 0.3.0 → 0.5.0

package/dist/lib/layers.js

@@ -0,0 +1,128 @@
+import { createContext } from "react";
+export const LayerVisibility = createContext(true);
+export const LayerParent = createContext(undefined);
+const documents = new WeakMap();
+function descendant(layer, ancestor, layers) {
+    let parent = layer.parent;
+    const visited = new Set();
+    while (parent && !visited.has(parent)) {
+        if (parent === ancestor.id)
+            return true;
+        visited.add(parent);
+        parent = layers.find((entry) => entry.id === parent)?.parent;
+    }
+    return false;
+}
+function topLayer(layers) {
+    return [...layers]
+        .reverse()
+        .find((layer) => !layers.some((entry) => entry !== layer &&
+        (descendant(entry, layer, layers) ||
+            layer
+                .elements()
+                .some((root) => entry
+                .elements()
+                .some((child) => root && child && root !== child && root.contains(child))))));
+}
+export function layerOwnsFocus(doc, id) {
+    const layers = documents.get(doc)?.layers ?? [];
+    const owner = layers.find((layer) => layer.id === id);
+    return (!!owner &&
+        layers.some((layer) => (layer === owner || descendant(layer, owner, layers)) &&
+            layer
+                .elements()
+                .some((element) => element?.contains(doc.activeElement))));
+}
+/** Paint order follows dismissal order, including later-opened siblings and portaled children. */
+export function refreshLayerStack(doc) {
+    const registry = documents.get(doc);
+    if (!registry)
+        return;
+    const remaining = [...registry.layers];
+    const ordered = [];
+    while (remaining.length) {
+        const top = topLayer(remaining);
+        if (!top)
+            break;
+        ordered.unshift(top);
+        remaining.splice(remaining.indexOf(top), 1);
+    }
+    const active = new Set();
+    ordered.forEach((layer, index) => {
+        const panel = layer.floating?.();
+        if (panel) {
+            active.add(panel);
+            if (!registry.zStyles.has(panel))
+                registry.zStyles.set(panel, {
+                    value: panel.style.getPropertyValue("z-index"),
+                    priority: panel.style.getPropertyPriority("z-index"),
+                });
+            const value = `calc(var(--contour-z-overlay, 30) + ${index})`;
+            if (panel.style.zIndex !== value)
+                panel.style.zIndex = value;
+        }
+    });
+    for (const [element, old] of registry.zStyles)
+        if (!active.has(element)) {
+            if (old.value)
+                element.style.setProperty("z-index", old.value, old.priority);
+            else
+                element.style.removeProperty("z-index");
+            registry.zStyles.delete(element);
+        }
+}
+export function isTopLayer(doc, id) {
+    return topLayer(documents.get(doc)?.layers ?? [])?.id === id;
+}
+/** One bubble listener per owner document. Never stop propagation or cascade a dismissal. */
+export function registerLayer(doc, layer) {
+    let registry = documents.get(doc);
+    if (!registry) {
+        const layers = [];
+        const keydown = (event) => {
+            if (event.key !== "Escape" || event.defaultPrevented)
+                return;
+            const top = topLayer(layers);
+            if (!top)
+                return;
+            top.dismiss("escape", event);
+            // Suppress native modal cancellation after dispatching the chosen layer.
+            event.preventDefault();
+        };
+        const pointerdown = (event) => {
+            if (event.defaultPrevented || event.button > 0)
+                return;
+            const top = topLayer(layers);
+            if (!top?.outside)
+                return;
+            const path = event.composedPath();
+            if (top.elements().some((element) => element && path.includes(element)))
+                return;
+            top.dismiss("outside", event);
+        };
+        doc.addEventListener("keydown", keydown);
+        doc.addEventListener("pointerdown", pointerdown);
+        registry = {
+            layers,
+            zStyles: new Map(),
+            dispose: () => {
+                doc.removeEventListener("keydown", keydown);
+                doc.removeEventListener("pointerdown", pointerdown);
+            },
+        };
+        documents.set(doc, registry);
+    }
+    registry.layers.push(layer);
+    refreshLayerStack(doc);
+    const owned = registry;
+    return () => {
+        const index = owned.layers.indexOf(layer);
+        if (index !== -1)
+            owned.layers.splice(index, 1);
+        refreshLayerStack(doc);
+        if (owned.layers.length === 0) {
+            owned.dispose();
+            documents.delete(doc);
+        }
+    };
+}

package/dist/lib/themeScope.d.ts

@@ -0,0 +1,5 @@
+import type { Theme } from "../hooks/useTheme.js";
+export declare const ThemeScopeContext: import("react").Context<{
+    theme: Theme;
+    onThemeChange?: (theme: Theme) => void;
+} | null>;

package/dist/lib/themeScope.js

@@ -0,0 +1,3 @@
+"use client";
+import { createContext } from "react";
+export const ThemeScopeContext = createContext(null);

package/dist/minimal-reset.css

@@ -0,0 +1,6 @@
+/* Optional global normalization. Page layout, colors and typography belong to the application. */
+*, ::before, ::after { box-sizing: border-box; }
+html { -webkit-text-size-adjust: 100%; }
+body { margin: 0; }
+button, input, select, textarea { font: inherit; }
+[hidden]:where(:not([hidden="until-found"])) { display: none; }

package/dist/navigation.css

@@ -0,0 +1,5 @@
+@import "./scoped/tokens.css";
+@import "./scoped/base.css";
+@import "./scoped/utilities.css";
+@import "./scoped/ui.css";
+@import "./scoped/kit/navigation.css";

package/dist/overlays.css

@@ -0,0 +1,5 @@
+@import "./scoped/tokens.css";
+@import "./scoped/base.css";
+@import "./scoped/utilities.css";
+@import "./scoped/ui.css";
+@import "./scoped/kit/overlays.css";

package/dist/scoped/base.css

@@ -0,0 +1,183 @@
+/* Owned component defaults; no page shell, global theme mutation or foreign element reset. */
+:where(.contour-root, [class*="contour-"]) {
+  box-sizing: border-box;
+}
+.contour-root {
+  color: var(--contour-fg);
+  background: var(--contour-bg);
+  font-family: var(--contour-font-sans);
+  line-height: 1.5;
+}
+button:where([class*="contour-"]) {
+  font: inherit;
+  font-family: var(--contour-font-sans);
+  color: inherit;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: 0 solid;
+  text-transform: none;
+  cursor: pointer;
+}
+button:where([class*="contour-"]):disabled {
+  cursor: default;
+}
+:where([class*="contour-"])[hidden] {
+  display: none;
+}
+:where([class*="contour-"]):focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 4px;
+}
+.contour-root :where(h1, h2, h3, p, dl, dd, figure, ul, ol) {
+  margin: 0;
+}
+.contour-root :where(ul, ol) {
+  padding: 0;
+  list-style: none;
+}
+.contour-root :where(img, svg, canvas) {
+  display: block;
+  vertical-align: middle;
+}
+.contour-root :where(svg) {
+  flex-shrink: 0;
+}
+.contour-root :where(a) {
+  color: inherit;
+}
+.contour-menu-list,
+.contour-popover-panel,
+.contour-dialog {
+  color: var(--contour-fg);
+  font-family: var(--contour-font-sans);
+}
+.contour-tooltip {
+  background: var(--contour-invert-bg);
+  color: var(--contour-invert-fg);
+}
+.contour-field-control :where(input, select, textarea),
+.contour-choice-input {
+  font-family: var(--contour-font-sans);
+}
+.contour-button,
+.contour-menu-trigger,
+.contour-field,
+.contour-tabs,
+.contour-data-table {
+  max-inline-size: 100%;
+}
+.contour-button,
+.contour-menu-trigger {
+  overflow-wrap: anywhere;
+}
+.contour-dialog-header h2 {
+  margin: 0;
+  font-family: var(--contour-font-display);
+  font-weight: 500;
+}
+@media (prefers-reduced-motion: reduce) {
+  :where([class*="contour-"]) {
+    animation: none !important;
+    transition: none !important;
+    scroll-behavior: auto !important;
+  }
+  :where(.contour-reveal, .contour-type-run) {
+    opacity: 1;
+    transform: none;
+  }
+}
+[data-motion="off"] :where([class*="contour-"]) {
+  animation: none !important;
+  transition: none !important;
+}
+@media (forced-colors: active) {
+  :where(
+    .contour-button,
+    .contour-menu-trigger,
+    .contour-card,
+    .contour-dialog,
+    .contour-popover-panel,
+    .contour-menu-list,
+    .contour-field-control,
+    .contour-switch,
+    .contour-segmented-option
+  ) {
+    border: 1px solid ButtonText !important;
+  }
+  :where(
+    .contour-button,
+    .contour-menu-item,
+    .contour-tabs-tab,
+    .contour-segmented-option
+  ):focus-visible {
+    outline: 2px solid Highlight !important;
+    outline-offset: 3px;
+  }
+  :where(
+    .contour-tabs-tab[aria-selected="true"],
+    .contour-segmented-option[aria-checked="true"],
+    .contour-switch-track[aria-checked="true"]
+  ) {
+    outline: 2px solid Highlight !important;
+  }
+  .contour-field-error,
+  .contour-choice-error {
+    color: CanvasText !important;
+  }
+  .contour-tooltip {
+    border: 1px solid CanvasText;
+  }
+}
+
+.contour-data-table :where(button) {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+}
+
+@media (forced-colors: active) {
+  .contour-choice-input:checked + .contour-choice-box,
+  .contour-choice-input:indeterminate + .contour-choice-box {
+    outline: 2px solid Highlight;
+    outline-offset: 1px;
+  }
+  .contour-choice-radio
+    .contour-choice-input:checked
+    + .contour-choice-box::after {
+    content: "";
+    inline-size: 8px;
+    block-size: 8px;
+    background: CanvasText;
+    forced-color-adjust: none;
+    border-radius: 50%;
+  }
+  .contour-switch-thumb {
+    background: ButtonText !important;
+    forced-color-adjust: none;
+  }
+  .contour-switch-track {
+    border: 1px solid ButtonText !important;
+  }
+  .contour-field-control:has([aria-invalid="true"]) {
+    border-block-end: 2px dashed CanvasText !important;
+  }
+  .contour-slider input[type="range"] {
+    appearance: auto !important;
+  }
+}
+
+.contour-tabs {
+  background: transparent;
+}
+.contour-menu,
+.contour-popover {
+  color: var(--contour-fg);
+}
+.contour-menu-trigger > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}

package/dist/scoped/kit/actions.css

@@ -0,0 +1,209 @@
+/* Kit — actions: buttons, icon buttons, segmented control, and the magnetic wrapper. */
+
+.contour-button {
+  --contour-button-bg: var(--contour-invert-bg);
+  --contour-button-fg: var(--contour-invert-fg);
+  --contour-button-border: transparent;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  height: 44px;
+  padding-inline: 22px;
+  border: 1px solid var(--contour-button-border);
+  border-radius: var(--contour-radius-pill);
+  background: var(--contour-button-bg);
+  color: var(--contour-button-fg);
+  font-size: 13px;
+  font-weight: 500;
+  white-space: nowrap;
+  transition:
+    background var(--contour-duration-fast),
+    color var(--contour-duration-fast),
+    border-color var(--contour-duration-fast),
+    transform var(--contour-duration-base) var(--contour-ease);
+}
+
+.contour-button:hover:not(:disabled) {
+  --contour-button-bg: var(--contour-acid);
+  --contour-button-fg: var(--contour-ink);
+  --contour-button-border: var(--contour-acid);
+}
+
+.contour-button:active:not(:disabled) {
+  transform: scale(0.97);
+}
+
+.contour-button:disabled {
+  opacity: 0.45;
+}
+
+/* Link inside running text: a hairline that thickens into an acid underline on hover. */
+.contour-inline-link {
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.22em;
+  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
+  transition:
+    text-decoration-color var(--contour-duration-fast),
+    text-decoration-thickness var(--contour-duration-fast);
+}
+
+.contour-inline-link:hover {
+  text-decoration-color: var(--contour-olive);
+  text-decoration-thickness: 3px;
+}
+
+.contour-button[aria-busy="true"] {
+  opacity: 0.8;
+}
+
+.contour-button-icon {
+  display: inline-flex;
+  transition: transform var(--contour-duration-base) var(--contour-ease);
+}
+
+.contour-button:hover:not(:disabled) .contour-button-icon {
+  transform: translateX(3px);
+}
+
+.contour-button-accent {
+  --contour-button-bg: var(--contour-acid);
+  --contour-button-fg: var(--contour-ink);
+}
+
+.contour-button-accent:hover:not(:disabled) {
+  --contour-button-bg: var(--contour-invert-bg);
+  --contour-button-fg: var(--contour-invert-fg);
+  --contour-button-border: var(--contour-invert-bg);
+}
+
+.contour-button-secondary {
+  --contour-button-bg: transparent;
+  --contour-button-fg: var(--contour-fg);
+  --contour-button-border: color-mix(in srgb, currentColor 32%, transparent);
+}
+
+.contour-button-ghost {
+  --contour-button-bg: transparent;
+  --contour-button-fg: var(--contour-fg);
+}
+
+.contour-button-danger {
+  --contour-button-bg: var(--contour-danger);
+  --contour-button-fg: var(--contour-bg);
+}
+
+.contour-button-danger:hover:not(:disabled) {
+  --contour-button-bg: var(--contour-fg);
+  --contour-button-fg: var(--contour-bg);
+  --contour-button-border: var(--contour-fg);
+}
+
+.contour-button-sm {
+  height: 34px;
+  padding-inline: 16px;
+  font-size: 12px;
+}
+
+.contour-button-lg {
+  height: 54px;
+  padding-inline: 28px;
+  font-size: 14px;
+}
+
+.contour-icon-button {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 42px;
+  height: 42px;
+  border: 1px solid color-mix(in srgb, currentColor 32%, transparent);
+  border-radius: 50%;
+  transition:
+    background var(--contour-duration-fast),
+    color var(--contour-duration-fast),
+    border-color var(--contour-duration-fast),
+    transform var(--contour-duration-base) var(--contour-ease);
+}
+
+.contour-icon-button:hover:not(:disabled) {
+  background: var(--contour-acid);
+  border-color: var(--contour-acid);
+  color: var(--contour-ink);
+}
+
+.contour-icon-button:disabled {
+  opacity: 0.45;
+}
+
+.contour-icon-button-spin:hover:not(:disabled) {
+  transform: rotate(45deg);
+}
+
+.contour-icon-button-solid {
+  background: var(--contour-invert-bg);
+  border-color: var(--contour-invert-bg);
+  color: var(--contour-invert-fg);
+}
+
+.contour-icon-button-accent {
+  background: var(--contour-acid);
+  border-color: var(--contour-acid);
+  color: var(--contour-ink);
+}
+
+.contour-icon-button-accent:hover:not(:disabled) {
+  background: var(--contour-invert-bg);
+  border-color: var(--contour-invert-bg);
+  color: var(--contour-invert-fg);
+}
+
+.contour-icon-button-sm {
+  width: 32px;
+  height: 32px;
+}
+
+.contour-icon-button-lg {
+  width: 56px;
+  height: 56px;
+}
+
+.contour-segmented {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 4px;
+  border: 1px solid var(--contour-line);
+  border-radius: var(--contour-radius-pill);
+}
+
+.contour-segmented-option {
+  height: 32px;
+  padding-inline: 16px;
+  border-radius: var(--contour-radius-pill);
+  font-size: 12px;
+  color: var(--contour-muted);
+  transition:
+    background var(--contour-duration-fast),
+    color var(--contour-duration-fast);
+}
+
+.contour-segmented-option:hover {
+  color: var(--contour-fg);
+}
+
+.contour-segmented-option[aria-checked="true"] {
+  background: var(--contour-invert-bg);
+  color: var(--contour-invert-fg);
+}
+
+.contour-segmented-option:focus-visible {
+  outline-offset: 2px;
+}
+
+.contour-magnetic {
+  display: inline-block;
+  transform: translate(var(--magnet, 0, 0));
+  transition: transform 450ms var(--contour-ease);
+}