@abuzareal/contour-ui 0.5.0 → 0.6.1

package/dist/components/ui/FloatingScope.js

@@ -0,0 +1,43 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef } from "react";
+/** Carry the anchor's inherited theme into a portal without changing its host. */
+export default function FloatingScope({ anchor, open, target, onDirectionChange, children, }) {
+    const scope = useRef(null);
+    useLayoutEffect(() => {
+        const root = scope.current;
+        const view = anchor?.ownerDocument.defaultView;
+        if (!open || !anchor || !root || !view)
+            return;
+        const synchronize = () => {
+            const computed = view.getComputedStyle(anchor);
+            for (let index = 0; index < computed.length; index++) {
+                const name = computed.item(index);
+                if (name.startsWith("--"))
+                    root.style.setProperty(name, computed.getPropertyValue(name));
+            }
+            root.dir = computed.direction;
+            root.style.fontFamily = computed.fontFamily;
+            root.style.color = computed.color;
+            onDirectionChange?.(computed.direction === "rtl" ? "rtl" : "ltr");
+        };
+        synchronize();
+        const observer = new view.MutationObserver(synchronize);
+        let ancestor = anchor;
+        while (ancestor) {
+            observer.observe(ancestor, {
+                attributes: true,
+                attributeFilter: [
+                    "style",
+                    "class",
+                    "dir",
+                    "data-theme",
+                    "data-contour-theme",
+                ],
+            });
+            ancestor = ancestor.parentElement;
+        }
+        return () => observer.disconnect();
+    }, [anchor, target, open, onDirectionChange]);
+    return (_jsx("span", { ref: scope, className: "contour-floating-root contour-root", style: { display: "contents" }, children: children }));
+}

package/dist/components/ui/Table.d.ts

@@ -0,0 +1,20 @@
+import { type TableHTMLAttributes, type ReactNode } from "react";
+import type { NativePartProps } from "../../lib/componentProps.js";
+export type TableProps = Omit<TableHTMLAttributes<HTMLTableElement>, "children"> & {
+    /** Accessible table name. The component owns the caption element. */
+    caption: string;
+    children: ReactNode;
+    /** Show the caption visually; it remains accessible when false. @default false */
+    showCaption?: boolean;
+    scrollProps?: NativePartProps<"div">;
+};
+/** Semantic table styling for application-owned rows, cells and table engines. */
+declare const Table: import("react").ForwardRefExoticComponent<Omit<TableHTMLAttributes<HTMLTableElement>, "children"> & {
+    /** Accessible table name. The component owns the caption element. */
+    caption: string;
+    children: ReactNode;
+    /** Show the caption visually; it remains accessible when false. @default false */
+    showCaption?: boolean;
+    scrollProps?: NativePartProps<"div">;
+} & import("react").RefAttributes<HTMLTableElement>>;
+export default Table;

package/dist/components/ui/Table.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { ccx } from "../../lib/classNames.js";
+/** Semantic table styling for application-owned rows, cells and table engines. */
+const Table = forwardRef(function Table({ caption, children, showCaption = false, scrollProps, className, ...rest }, ref) {
+    return (_jsx("div", { ...scrollProps, className: ccx("table-scroll", scrollProps?.className), tabIndex: scrollProps?.tabIndex ?? 0, role: scrollProps?.role ?? "region", "aria-label": scrollProps?.["aria-label"] ?? caption, children: _jsxs("table", { ...rest, ref: ref, className: ccx("data-table", className), children: [_jsx("caption", { className: showCaption ? undefined : ccx("visually-hidden"), children: caption }), children] }) }));
+});
+export default Table;

package/dist/hooks/useComboboxAnchor.d.ts

@@ -0,0 +1,17 @@
+import { type RefObject } from "react";
+/** Use public virtual-anchor/Rect extension points; keep upstream focus/selection and positioning. */
+export default function useComboboxAnchor(input: HTMLInputElement | null, floating: RefObject<HTMLDivElement | null>): {
+    anchor?: undefined;
+    collisionBoundary?: undefined;
+} | {
+    anchor: {
+        contextElement: HTMLElement;
+        getBoundingClientRect(): DOMRect;
+    };
+    collisionBoundary: {
+        readonly x: number;
+        readonly y: number;
+        readonly width: number;
+        readonly height: number;
+    };
+};

package/dist/hooks/useComboboxAnchor.js

@@ -0,0 +1,61 @@
+"use client";
+import { useMemo } from "react";
+import { platform } from "@floating-ui/dom";
+/** Fixed children of a zoomed body need anchor and viewport in the same local CSS units. */
+function windowScale(element) {
+    if (!element ||
+        platform.getOffsetParent?.(element) !== element.ownerDocument.defaultView)
+        return { x: 1, y: 1 };
+    const scale = platform.getScale?.(element);
+    if (!scale ||
+        !("x" in scale) ||
+        !("y" in scale) ||
+        !Number.isFinite(scale.x) ||
+        !Number.isFinite(scale.y) ||
+        scale.x <= 0 ||
+        scale.y <= 0)
+        return { x: 1, y: 1 };
+    return scale;
+}
+/** Use public virtual-anchor/Rect extension points; keep upstream focus/selection and positioning. */
+export default function useComboboxAnchor(input, floating) {
+    return useMemo(() => {
+        const source = input?.parentElement ?? input;
+        if (!source)
+            return {};
+        return {
+            anchor: {
+                contextElement: source,
+                getBoundingClientRect() {
+                    const rect = source.getBoundingClientRect(), scale = windowScale(floating.current);
+                    rect.x /= scale.x;
+                    rect.y /= scale.y;
+                    rect.width /= scale.x;
+                    rect.height /= scale.y;
+                    return rect;
+                },
+            },
+            // Getters are evaluated on each upstream update, including scroll, zoom and mobile viewport resize.
+            collisionBoundary: {
+                get x() {
+                    return ((source.ownerDocument.defaultView?.visualViewport?.offsetLeft ??
+                        0) / windowScale(floating.current).x);
+                },
+                get y() {
+                    return ((source.ownerDocument.defaultView?.visualViewport?.offsetTop ?? 0) /
+                        windowScale(floating.current).y);
+                },
+                get width() {
+                    return ((source.ownerDocument.defaultView?.visualViewport?.width ??
+                        source.ownerDocument.documentElement.clientWidth) /
+                        windowScale(floating.current).x);
+                },
+                get height() {
+                    return ((source.ownerDocument.defaultView?.visualViewport?.height ??
+                        source.ownerDocument.documentElement.clientHeight) /
+                        windowScale(floating.current).y);
+                },
+            },
+        };
+    }, [input, floating]);
+}

package/dist/hooks/useInitialHashScroll.js

@@ -24,6 +24,10 @@ export default function useInitialHashScroll() {
         align();
         userScrollEvents.forEach((event) => window.addEventListener(event, markScrolled, { passive: true }));
         document.fonts.ready.then(align);
-        return () => userScrollEvents.forEach((event) => window.removeEventListener(event, markScrolled));
+        return () => {
+            // Font readiness cannot be cancelled; an unmounted owner must not scroll a later page.
+            userScrolled = true;
+            userScrollEvents.forEach((event) => window.removeEventListener(event, markScrolled));
+        };
     }, []);
 }

package/dist/hooks/usePrintPreparation.js

@@ -6,7 +6,12 @@ export default function usePrintPreparation() {
         const root = document.documentElement;
         let expanded = [];
         let screenTheme;
+        let printing = false;
         const prepare = () => {
+            // Some browsers repeat beforeprint while the same print preview is open.
+            if (printing)
+                return;
+            printing = true;
             expanded = [
                 ...document.querySelectorAll("details:not([open])"),
             ];
@@ -15,9 +20,14 @@ export default function usePrintPreparation() {
             root.dataset.theme = "light";
         };
         const restore = () => {
+            if (!printing)
+                return;
+            printing = false;
             expanded.forEach((details) => (details.open = false));
             expanded = [];
-            if (screenTheme)
+            if (screenTheme === undefined)
+                delete root.dataset.theme;
+            else
                 root.dataset.theme = screenTheme;
         };
         window.addEventListener("beforeprint", prepare);
@@ -25,6 +35,7 @@ export default function usePrintPreparation() {
         return () => {
             window.removeEventListener("beforeprint", prepare);
             window.removeEventListener("afterprint", restore);
+            restore();
         };
     }, []);
 }

package/dist/hooks/useScrollSpy.js

@@ -5,10 +5,13 @@ import { useEffect, useState } from "react";
 const activationLine = 0.3;
 export default function useScrollSpy(ids) {
     const [activeId, setActiveId] = useState("");
-    const key = ids.join("|");
+    const key = JSON.stringify(ids);
     useEffect(() => {
-        const elements = key
-            .split("|")
+        const parsed = JSON.parse(key);
+        if (!Array.isArray(parsed) ||
+            !parsed.every((id) => typeof id === "string"))
+            return;
+        const elements = parsed
             .map((id) => document.getElementById(id))
             .filter((element) => element !== null);
         let frame = 0;

package/dist/index.d.ts

@@ -132,3 +132,5 @@ export type * from "./components/ui/ThemeScope.js";
 export type { FloatingOptions } from "./hooks/useFloatingPanel.js";
 export type { PanelFocusOptions } from "./hooks/usePanelFocus.js";
 export type { DismissReason } from "./lib/layers.js";
+export { default as Table, type TableProps } from "./components/ui/Table.js";
+export { default as Combobox, type ComboboxProps, type ComboboxOption, } from "./components/ui/Combobox.js";

package/dist/index.js

@@ -67,3 +67,5 @@ export * from "./lib/motion.js";
 export { default as SceneBoundary } from "./components/hero/SceneBoundary.js";
 export { safeHref } from "./lib/safeHref.js";
 export { default as ThemeScope } from "./components/ui/ThemeScope.js";
+export { default as Table } from "./components/ui/Table.js";
+export { default as Combobox, } from "./components/ui/Combobox.js";

package/dist/kit/data-display.css

@@ -277,12 +277,18 @@
 }
 
 .data-table {
+  color: var(--fg);
   width: 100%;
   min-width: 560px;
   border-collapse: collapse;
   font-size: 14px;
 }
 
+.data-table caption {
+  color: inherit;
+  text-align: left;
+}
+
 .data-table th {
   padding: 14px 16px 14px 0;
   border-bottom: 1px solid var(--line);

package/dist/kit/forms.css

@@ -370,3 +370,37 @@ textarea {
     var(--line-strong) var(--progress)
   );
 }
+
+/* Combobox uses the same native field frame; the popup is an allowed-value list. */
+.combobox { min-width: 0; }
+.combobox-control { display: flex; align-items: center; gap: 8px; }
+.combobox-control input { min-width: 0; flex: 1; }
+.combobox-trigger, .combobox-retry {
+  border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
+}
+.combobox-trigger { display: grid; place-items: center; min-width: 36px; min-height: 36px; flex: none; }
+.combobox-trigger:disabled { cursor: default; opacity: .45; }
+.combobox-positioner { z-index: 30; }
+.combobox-popup {
+  width: var(--anchor-width, 16rem);
+  max-width: var(--available-width, calc(100vw - 16px));
+  max-height: min(320px, var(--available-height, 320px));
+  overflow: auto; overscroll-behavior: contain;
+  border: 1px solid var(--line); border-radius: var(--radius-sm);
+  background: var(--bg); color: var(--fg); padding: 4px;
+  box-shadow: 0 8px 28px rgb(0 0 0 / .12);
+}
+.combobox-list { outline: none; }
+.combobox-option { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; overflow-wrap: anywhere; cursor: default; }
+.combobox-option[data-highlighted] { background: var(--invert-bg); color: var(--invert-fg); outline: 2px solid currentColor; outline-offset: -2px; }
+.combobox-option[data-disabled] { opacity: .45; }
+.combobox-status { padding: 12px; font-size: 14px; }
+.combobox-retry { padding: 10px 12px; text-decoration: underline; }
+.combobox-trigger:focus-visible, .combobox-retry:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+@media (forced-colors: active) {
+  .combobox-popup { border-color: CanvasText; background: Canvas; color: CanvasText; }
+  .combobox-option[data-highlighted] { background: Highlight; color: HighlightText; }
+  .combobox-option[data-disabled] { color: GrayText; opacity: 1; }
+}
+/* Keep the live region mounted without a blank row when there is no message. */
+.combobox-status:empty { padding: 0; }

package/dist/lib/componentClasses.js

@@ -1,2 +1,2 @@
 // Generated compatibility aliases; unknown consumer classes pass through unchanged.
-export const componentClasses = new Set(["alert", "alert-accent", "alert-action", "alert-banner", "alert-body", "alert-content", "alert-danger", "alert-dismiss", "alert-icon", "alert-info", "alert-success", "alert-title", "alert-warning", "avatar", "avatar-group", "avatar-initials", "avatar-lg", "avatar-sm", "avatar-status", "avatar-status-away", "avatar-status-online", "avatar-xl", "badge", "badge-danger", "badge-dot", "badge-info", "badge-invert", "badge-neutral", "badge-success", "badge-warning", "brand", "breadcrumbs", "button", "button-accent", "button-danger", "button-ghost", "button-icon", "button-lg", "button-secondary", "button-sm", "card", "card-acid", "card-body", "card-footer", "card-icon", "card-ink", "card-interactive", "card-title", "card-top", "choice", "choice-box", "choice-control", "choice-description", "choice-error", "choice-input", "choice-invalid", "choice-label", "choice-radio", "choice-text", "count-up", "css", "data-table", "data-table-idle", "depth-button", "depth-button-face", "dialog", "dialog-body", "dialog-close", "dialog-description", "dialog-footer", "dialog-header", "dialog-left", "dialog-panel", "dialog-right", "disclosure", "disclosure-icon", "divider", "divider-labelled", "empty-state", "empty-state-icon", "field", "field-chevron", "field-control", "field-counter", "field-disabled", "field-error", "field-footer", "field-icon", "field-invalid", "field-label", "field-required", "field-select", "field-trailing", "flip-back", "flip-card", "flip-face", "flip-front", "flip-stage", "flip-toggle", "hero-letter", "icon-button", "icon-button-accent", "icon-button-lg", "icon-button-sm", "icon-button-solid", "icon-button-spin", "inline-link", "is-flipped", "is-open", "is-visible", "kbd", "magnetic", "marquee", "marquee-inner", "marquee-track", "menu", "menu-chevron", "menu-end", "menu-item", "menu-item-danger", "menu-list", "menu-start", "menu-trigger", "mono", "opening-sequence", "page-width", "pagination", "pagination-gap", "pagination-page", "pagination-step", "popover", "popover-end", "popover-panel", "popover-start", "popover-title", "progress", "progress-accent", "progress-danger", "progress-fill", "progress-header", "progress-indeterminate", "progress-success", "progress-track", "radio-group", "radio-group-inline", "reveal", "scroll-progress", "sculpture-canvas", "section-label", "segmented", "segmented-option", "site-shell", "skeleton", "skeleton-block", "skeleton-circle", "skeleton-line", "skip-link", "slider", "slider-header", "spinner", "stage-canvas", "stat", "stat-suffix", "stepper", "stepper-complete", "stepper-current", "stepper-description", "stepper-label", "stepper-marker", "stepper-step", "stepper-text", "stepper-upcoming", "switch", "switch-thumb", "switch-track", "table-scroll", "tabs", "tabs-list", "tabs-panel", "tabs-tab", "tag", "tag-removable", "tag-remove", "text-link", "theme-fading", "theme-icon-moon", "theme-icon-sun", "theme-toggle", "tilt-card", "tilt-glare", "tilt-stage", "timeline", "timeline-body", "timeline-current", "timeline-date", "timeline-entry", "timeline-title", "toast", "toast-bar", "toast-close", "toast-content", "toast-danger", "toast-info", "toast-success", "toast-viewport", "toast-warning", "tooltip", "tooltip-anchor", "tooltip-bottom", "tooltip-left", "tooltip-right", "tooltip-top", "ts", "type-line", "type-run", "visually-hidden"]);
+export const componentClasses = new Set(["alert", "alert-accent", "alert-action", "alert-banner", "alert-body", "alert-content", "alert-danger", "alert-dismiss", "alert-icon", "alert-info", "alert-success", "alert-title", "alert-warning", "avatar", "avatar-group", "avatar-initials", "avatar-lg", "avatar-sm", "avatar-status", "avatar-status-away", "avatar-status-online", "avatar-xl", "badge", "badge-danger", "badge-dot", "badge-info", "badge-invert", "badge-neutral", "badge-success", "badge-warning", "brand", "breadcrumbs", "button", "button-accent", "button-danger", "button-ghost", "button-icon", "button-lg", "button-secondary", "button-sm", "card", "card-acid", "card-body", "card-footer", "card-icon", "card-ink", "card-interactive", "card-title", "card-top", "choice", "choice-box", "choice-control", "choice-description", "choice-error", "choice-input", "choice-invalid", "choice-label", "choice-radio", "choice-text", "combobox", "combobox-control", "combobox-list", "combobox-option", "combobox-popup", "combobox-positioner", "combobox-retry", "combobox-status", "combobox-trigger", "count-up", "css", "data-table", "data-table-idle", "depth-button", "depth-button-face", "dialog", "dialog-body", "dialog-close", "dialog-description", "dialog-footer", "dialog-header", "dialog-left", "dialog-panel", "dialog-right", "disclosure", "disclosure-icon", "divider", "divider-labelled", "empty-state", "empty-state-icon", "field", "field-chevron", "field-control", "field-counter", "field-disabled", "field-error", "field-footer", "field-icon", "field-invalid", "field-label", "field-required", "field-select", "field-trailing", "flip-back", "flip-card", "flip-face", "flip-front", "flip-stage", "flip-toggle", "hero-letter", "icon-button", "icon-button-accent", "icon-button-lg", "icon-button-sm", "icon-button-solid", "icon-button-spin", "inline-link", "is-flipped", "is-open", "is-visible", "kbd", "magnetic", "marquee", "marquee-inner", "marquee-track", "menu", "menu-chevron", "menu-end", "menu-item", "menu-item-danger", "menu-list", "menu-start", "menu-trigger", "mono", "opening-sequence", "page-width", "pagination", "pagination-gap", "pagination-page", "pagination-step", "popover", "popover-end", "popover-panel", "popover-start", "popover-title", "progress", "progress-accent", "progress-danger", "progress-fill", "progress-header", "progress-indeterminate", "progress-success", "progress-track", "radio-group", "radio-group-inline", "reveal", "scroll-progress", "sculpture-canvas", "section-label", "segmented", "segmented-option", "site-shell", "skeleton", "skeleton-block", "skeleton-circle", "skeleton-line", "skip-link", "slider", "slider-header", "spinner", "stage-canvas", "stat", "stat-suffix", "stepper", "stepper-complete", "stepper-current", "stepper-description", "stepper-label", "stepper-marker", "stepper-step", "stepper-text", "stepper-upcoming", "switch", "switch-thumb", "switch-track", "table-scroll", "tabs", "tabs-list", "tabs-panel", "tabs-tab", "tag", "tag-removable", "tag-remove", "text-link", "theme-fading", "theme-icon-moon", "theme-icon-sun", "theme-toggle", "tilt-card", "tilt-glare", "tilt-stage", "timeline", "timeline-body", "timeline-current", "timeline-date", "timeline-entry", "timeline-title", "toast", "toast-bar", "toast-close", "toast-content", "toast-danger", "toast-info", "toast-success", "toast-viewport", "toast-warning", "tooltip", "tooltip-anchor", "tooltip-bottom", "tooltip-left", "tooltip-right", "tooltip-top", "ts", "type-line", "type-run", "visually-hidden"]);

package/dist/scoped/kit/data-display.css

@@ -273,12 +273,18 @@
 }
 
 .contour-data-table {
+  color: var(--contour-fg);
   width: 100%;
   min-width: 560px;
   border-collapse: collapse;
   font-size: 14px;
 }
 
+.contour-data-table caption {
+  color: inherit;
+  text-align: start;
+}
+
 .contour-data-table th {
   padding: 14px 16px 14px 0;
   border-bottom: 1px solid var(--contour-line);

package/dist/scoped/kit/forms.css

@@ -368,3 +368,37 @@
     var(--contour-line-strong) var(--contour-progress, var(--progress))
   );
 }
+
+/* Combobox uses the same native field frame; the popup is an allowed-value list. */
+.contour-combobox { min-width: 0; }
+.contour-combobox-control { display: flex; align-items: center; gap: 8px; }
+.contour-combobox-control input { min-width: 0; flex: 1; }
+.contour-combobox-trigger, .contour-combobox-retry {
+  border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer;
+}
+.contour-combobox-trigger { display: grid; place-items: center; min-width: 36px; min-height: 36px; flex: none; }
+.contour-combobox-trigger:disabled { cursor: default; opacity: .45; }
+.contour-combobox-positioner { z-index: 30; }
+.contour-combobox-popup {
+  width: var(--anchor-width, 16rem);
+  max-width: var(--available-width, calc(100vw - 16px));
+  max-height: min(320px, var(--available-height, 320px));
+  overflow: auto; overscroll-behavior: contain;
+  border: 1px solid var(--contour-line); border-radius: var(--contour-radius-sm);
+  background: var(--contour-bg); color: var(--contour-fg); padding: 4px;
+  box-shadow: 0 8px 28px rgb(0 0 0 / .12);
+}
+.contour-combobox-list { outline: none; }
+.contour-combobox-option { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; overflow-wrap: anywhere; cursor: default; }
+.contour-combobox-option[data-highlighted] { background: var(--contour-invert-bg); color: var(--contour-invert-fg); outline: 2px solid currentColor; outline-offset: -2px; }
+.contour-combobox-option[data-disabled] { opacity: .45; }
+.contour-combobox-status { padding: 12px; font-size: 14px; }
+.contour-combobox-retry { padding: 10px 12px; text-decoration: underline; }
+.contour-combobox-trigger:focus-visible, .contour-combobox-retry:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+@media (forced-colors: active) {
+  .contour-combobox-popup { border-color: CanvasText; background: Canvas; color: CanvasText; }
+  .contour-combobox-option[data-highlighted] { background: Highlight; color: HighlightText; }
+  .contour-combobox-option[data-disabled] { color: GrayText; opacity: 1; }
+}
+/* Keep the live region mounted without a blank row when there is no message. */
+.contour-combobox-status:empty { padding: 0; }