@abuzareal/contour-ui 0.2.1 → 0.3.0

package/dist/hooks/useControlRef.js

@@ -6,8 +6,8 @@ export default function useControlRef(forwarded) {
     useImperativeHandle(forwarded, () => {
         const element = ref.current;
         if (!element)
-            throw new Error("The field control must be mounted before exposing its ref.");
+            throw new Error("The native target must be mounted before exposing its ref.");
         return element;
-    });
+    }, []);
     return { ref, attach: ref };
 }

package/dist/hooks/useTabRefs.d.ts

@@ -0,0 +1,4 @@
+import { type RefObject } from "react";
+import type { TabItem } from "../components/ui/Tabs.js";
+/** Keep ID-based internal focus targets and caller button refs in the same lifecycle. */
+export default function useTabRefs(tabs: TabItem[], targets: RefObject<Map<string, HTMLButtonElement>>): import("react").RefCallback<HTMLButtonElement>[];

package/dist/hooks/useTabRefs.js

@@ -0,0 +1,12 @@
+"use client";
+import { useMemo } from "react";
+import { composeRefs } from "../lib/composeRefs.js";
+/** Keep ID-based internal focus targets and caller button refs in the same lifecycle. */
+export default function useTabRefs(tabs, targets) {
+    return useMemo(() => tabs.map((tab) => composeRefs((element) => {
+        if (element)
+            targets.current?.set(tab.id, element);
+        else
+            targets.current?.delete(tab.id);
+    }, tab.buttonProps?.ref)), [tabs, targets]);
+}

package/dist/lib/componentProps.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentPropsWithRef, JSX } from "react";
+/** Props customize existing owned DOM parts; children and raw markup stay component-owned. */
+export type NativePartProps<Tag extends keyof JSX.IntrinsicElements> = Omit<ComponentPropsWithRef<Tag>, "children" | "dangerouslySetInnerHTML"> & {
+    [name: `data-${string}`]: string | number | boolean | undefined;
+};

package/dist/lib/componentProps.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/composeEventHandlers.d.ts

@@ -0,0 +1,4 @@
+/** Caller vetoes an internal action without replacing required state/ARIA wiring. */
+export declare function composeEventHandlers<Event extends {
+    defaultPrevented: boolean;
+}>(caller: ((event: Event) => void) | undefined, internal: (event: Event) => void): (event: Event) => void;

package/dist/lib/composeEventHandlers.js

@@ -0,0 +1,8 @@
+/** Caller vetoes an internal action without replacing required state/ARIA wiring. */
+export function composeEventHandlers(caller, internal) {
+    return (event) => {
+        caller?.(event);
+        if (!event.defaultPrevented)
+            internal(event);
+    };
+}

package/dist/lib/composeRefs.d.ts

@@ -0,0 +1,3 @@
+import type { Ref, RefCallback } from "react";
+/** Retain internal nodes and caller refs, honoring React 19 cleanup callbacks on detach. */
+export declare function composeRefs<Element>(...refs: (Ref<Element> | undefined)[]): RefCallback<Element>;

package/dist/lib/composeRefs.js

@@ -0,0 +1,24 @@
+/** Retain internal nodes and caller refs, honoring React 19 cleanup callbacks on detach. */
+export function composeRefs(...refs) {
+    let cleanups = [];
+    return (element) => {
+        for (const cleanup of cleanups)
+            cleanup();
+        cleanups = [];
+        if (element === null)
+            return;
+        for (const ref of refs) {
+            if (typeof ref === "function") {
+                const cleanup = ref(element);
+                cleanups.push(typeof cleanup === "function" ? () => cleanup() : () => ref(null));
+            }
+            else if (ref) {
+                // RefObject is read-only in React 18's consumer types; assigning is React's ref contract.
+                Object.assign(ref, { current: element });
+                cleanups.push(() => {
+                    Object.assign(ref, { current: null });
+                });
+            }
+        }
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abuzareal/contour-ui",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "private": false,
   "description": "Editorial React components, themes, restrained motion, and optional Three.js objects.",
   "type": "module",
@@ -15,7 +15,8 @@
     "CODE_OF_CONDUCT.md",
     "NEXTJS.md",
     "CONTRACTS.md",
-    "PUBLIC-API.md"
+    "PUBLIC-API.md",
+    "COMPOSITION.md"
   ],
   "sideEffects": [
     "**/*.css"