@arun-dev/headless 4.13.0 → 4.14.0

package/dist/avatar/index.cjs

@@ -0,0 +1,218 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/avatar/index.ts
+var avatar_exports = {};
+__export(avatar_exports, {
+  Avatar: () => index_parts_exports
+});
+module.exports = __toCommonJS(avatar_exports);
+
+// src/avatar/index.parts.ts
+var index_parts_exports = {};
+__export(index_parts_exports, {
+  Fallback: () => AvatarFallback,
+  Image: () => AvatarImage,
+  Root: () => AvatarRoot
+});
+
+// src/avatar/AvatarRoot.tsx
+var import_react2 = require("react");
+
+// src/core/useRender.ts
+var import_react = require("react");
+
+// src/core/mergeProps.ts
+function isEventHandler(key) {
+  return key.length > 2 && key.startsWith("on") && key[2] === key[2]?.toUpperCase();
+}
+function mergeRefs(...refs) {
+  return (node) => {
+    const cleanups = refs.map((ref) => {
+      if (typeof ref === "function") {
+        const result = ref(node);
+        return typeof result === "function" ? result : () => ref(null);
+      }
+      if (ref && typeof ref === "object") {
+        ref.current = node;
+        return () => {
+          ref.current = null;
+        };
+      }
+      return void 0;
+    });
+    return () => {
+      cleanups.forEach((cleanup) => {
+        if (typeof cleanup === "function") cleanup();
+      });
+    };
+  };
+}
+function isSyntheticEvent(event) {
+  return typeof event === "object" && event !== null && "nativeEvent" in event;
+}
+function makeEventPreventable(event) {
+  if (Object.prototype.hasOwnProperty.call(event, "preventComponentHandler")) return;
+  const target = event;
+  target.preventComponentHandler = () => {
+    target.componentHandlerPrevented = true;
+  };
+}
+function isComponentHandlerPrevented(event) {
+  return typeof event === "object" && event !== null && event.componentHandlerPrevented === true;
+}
+function chainHandlers(earlier, value) {
+  return (...args) => {
+    const event = args[0];
+    if (isSyntheticEvent(event)) makeEventPreventable(event);
+    value(...args);
+    if (isComponentHandlerPrevented(event)) return;
+    earlier(...args);
+  };
+}
+function mergeProps(...objects) {
+  const merged = {};
+  for (const props of objects) {
+    if (!props) continue;
+    for (const key of Object.keys(props)) {
+      const value = props[key];
+      if (value === void 0) continue;
+      if (isEventHandler(key) && typeof value === "function") {
+        const earlier = merged[key];
+        merged[key] = typeof earlier === "function" ? chainHandlers(earlier, value) : value;
+      } else if (key === "className") {
+        merged.className = merged.className ? `${String(merged.className)} ${String(value)}` : value;
+      } else if (key === "style") {
+        merged.style = { ...merged.style, ...value };
+      } else if (key === "ref") {
+        merged.ref = merged.ref ? mergeRefs(merged.ref, value) : value;
+      } else {
+        merged[key] = value;
+      }
+    }
+  }
+  return merged;
+}
+
+// src/core/useRender.ts
+function useRender({
+  render,
+  defaultTagName,
+  props,
+  consumerProps
+}) {
+  const merged = mergeProps(props, consumerProps);
+  if ((0, import_react.isValidElement)(render)) {
+    return (0, import_react.cloneElement)(render, mergeProps(merged, render.props));
+  }
+  return (0, import_react.createElement)(defaultTagName, merged);
+}
+
+// src/avatar/AvatarRoot.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var AvatarContext = (0, import_react2.createContext)(null);
+function useAvatarContext(part) {
+  const context = (0, import_react2.useContext)(AvatarContext);
+  if (!context) throw new Error(`<Avatar.${part}> must be rendered inside <Avatar.Root>.`);
+  return context;
+}
+function AvatarRoot({ className, children, render, ...rest }) {
+  const [status, setStatus] = (0, import_react2.useState)("idle");
+  const context = (0, import_react2.useMemo)(() => ({ status, setStatus }), [status]);
+  const element = useRender({
+    render,
+    defaultTagName: "span",
+    props: { "data-image-status": status, className, children },
+    consumerProps: rest
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarContext.Provider, { value: context, children: element });
+}
+
+// src/avatar/AvatarImage.tsx
+var import_react3 = require("react");
+function AvatarImage({
+  src,
+  srcSet,
+  sizes,
+  crossOrigin,
+  referrerPolicy,
+  className,
+  render,
+  ...rest
+}) {
+  const { status, setStatus } = useAvatarContext("Image");
+  (0, import_react3.useLayoutEffect)(() => {
+    if (!src && !srcSet) {
+      setStatus("error");
+      return;
+    }
+    let active = true;
+    const image = new window.Image();
+    const settle = (next) => () => {
+      if (active) setStatus(next);
+    };
+    image.onload = settle("loaded");
+    image.onerror = settle("error");
+    if (crossOrigin !== void 0) image.crossOrigin = crossOrigin;
+    if (referrerPolicy) image.referrerPolicy = referrerPolicy;
+    if (sizes) image.sizes = sizes;
+    if (srcSet) image.srcset = srcSet;
+    if (src) image.src = src;
+    setStatus(image.complete && image.naturalWidth > 0 ? "loaded" : "loading");
+    return () => {
+      active = false;
+    };
+  }, [src, srcSet, sizes, crossOrigin, referrerPolicy, setStatus]);
+  const element = useRender({
+    render,
+    defaultTagName: "img",
+    props: { src, srcSet, sizes, crossOrigin, referrerPolicy, className },
+    consumerProps: rest
+  });
+  return status === "loaded" ? element : null;
+}
+
+// src/avatar/AvatarFallback.tsx
+var import_react4 = require("react");
+function AvatarFallback({
+  delay = 0,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const { status } = useAvatarContext("Fallback");
+  const [waited, setWaited] = (0, import_react4.useState)(delay === 0);
+  (0, import_react4.useEffect)(() => {
+    if (delay === 0) return;
+    const timer = setTimeout(() => setWaited(true), delay);
+    return () => clearTimeout(timer);
+  }, [delay]);
+  const element = useRender({
+    render,
+    defaultTagName: "span",
+    props: { className, children },
+    consumerProps: rest
+  });
+  return status !== "loaded" && waited ? element : null;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Avatar
+});

package/dist/avatar/index.d.cts

@@ -0,0 +1,52 @@
+import * as react from 'react';
+import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
+
+/** Where the Image is: none yet, on its way, shown, or failed for good. */
+type AvatarImageStatus = 'idle' | 'loading' | 'loaded' | 'error';
+type AvatarRootOwnProps = {
+    /** Element to render instead of the default `<span>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type AvatarRootProps = AvatarRootOwnProps & Omit<ComponentPropsWithRef<'span'>, keyof AvatarRootOwnProps>;
+/**
+ * A person's picture, or their initials until it loads (decision 17). Holds whether the Image
+ * has loaded; `data-image-status` carries it for styling.
+ */
+declare function AvatarRoot({ className, children, render, ...rest }: AvatarRootProps): react.JSX.Element;
+
+type AvatarImageOwnProps = {
+    /** Element to render instead of the default `<img>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type AvatarImageProps = AvatarImageOwnProps & Omit<ComponentPropsWithRef<'img'>, keyof AvatarImageOwnProps>;
+/**
+ * The picture. Loaded off-screen first, and rendered only once it has loaded, so a broken
+ * image never shows — the Fallback does instead. Give it an `alt`: the person's name.
+ */
+declare function AvatarImage({ src, srcSet, sizes, crossOrigin, referrerPolicy, className, render, ...rest }: AvatarImageProps): ReactElement<unknown, string | react.JSXElementConstructor<any>> | null;
+
+type AvatarFallbackOwnProps = {
+    /** Milliseconds to wait before showing, so a quick image does not flash the initials first. */
+    delay?: number;
+    /** Element to render instead of the default `<span>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type AvatarFallbackProps = AvatarFallbackOwnProps & Omit<ComponentPropsWithRef<'span'>, keyof AvatarFallbackOwnProps>;
+/**
+ * Initials or an icon, shown until the Image loads, and for good if it fails or there is none.
+ * Initials read out as letters; give the Root an `aria-label` with the name, or mark these
+ * `aria-hidden` beside a visible name.
+ */
+declare function AvatarFallback({ delay, className, children, render, ...rest }: AvatarFallbackProps): ReactElement<unknown, string | react.JSXElementConstructor<any>> | null;
+
+declare namespace index_parts {
+  export { AvatarFallback as Fallback, AvatarImage as Image, AvatarRoot as Root };
+}
+
+export { index_parts as Avatar, type AvatarFallbackProps, type AvatarImageProps, type AvatarImageStatus, type AvatarRootProps };

package/dist/avatar/index.d.ts

@@ -0,0 +1,52 @@
+import * as react from 'react';
+import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
+
+/** Where the Image is: none yet, on its way, shown, or failed for good. */
+type AvatarImageStatus = 'idle' | 'loading' | 'loaded' | 'error';
+type AvatarRootOwnProps = {
+    /** Element to render instead of the default `<span>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type AvatarRootProps = AvatarRootOwnProps & Omit<ComponentPropsWithRef<'span'>, keyof AvatarRootOwnProps>;
+/**
+ * A person's picture, or their initials until it loads (decision 17). Holds whether the Image
+ * has loaded; `data-image-status` carries it for styling.
+ */
+declare function AvatarRoot({ className, children, render, ...rest }: AvatarRootProps): react.JSX.Element;
+
+type AvatarImageOwnProps = {
+    /** Element to render instead of the default `<img>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type AvatarImageProps = AvatarImageOwnProps & Omit<ComponentPropsWithRef<'img'>, keyof AvatarImageOwnProps>;
+/**
+ * The picture. Loaded off-screen first, and rendered only once it has loaded, so a broken
+ * image never shows — the Fallback does instead. Give it an `alt`: the person's name.
+ */
+declare function AvatarImage({ src, srcSet, sizes, crossOrigin, referrerPolicy, className, render, ...rest }: AvatarImageProps): ReactElement<unknown, string | react.JSXElementConstructor<any>> | null;
+
+type AvatarFallbackOwnProps = {
+    /** Milliseconds to wait before showing, so a quick image does not flash the initials first. */
+    delay?: number;
+    /** Element to render instead of the default `<span>`. Props and ref are merged onto it. */
+    render?: ReactElement;
+    /** Ref to the rendered element. Merged with any ref on the `render` element. */
+    ref?: Ref<HTMLElement>;
+};
+type AvatarFallbackProps = AvatarFallbackOwnProps & Omit<ComponentPropsWithRef<'span'>, keyof AvatarFallbackOwnProps>;
+/**
+ * Initials or an icon, shown until the Image loads, and for good if it fails or there is none.
+ * Initials read out as letters; give the Root an `aria-label` with the name, or mark these
+ * `aria-hidden` beside a visible name.
+ */
+declare function AvatarFallback({ delay, className, children, render, ...rest }: AvatarFallbackProps): ReactElement<unknown, string | react.JSXElementConstructor<any>> | null;
+
+declare namespace index_parts {
+  export { AvatarFallback as Fallback, AvatarImage as Image, AvatarRoot as Root };
+}
+
+export { index_parts as Avatar, type AvatarFallbackProps, type AvatarImageProps, type AvatarImageStatus, type AvatarRootProps };

package/dist/avatar/index.js

@@ -0,0 +1,105 @@
+import {
+  __export,
+  useRender
+} from "../chunk-OQTWWZ4B.js";
+
+// src/avatar/index.parts.ts
+var index_parts_exports = {};
+__export(index_parts_exports, {
+  Fallback: () => AvatarFallback,
+  Image: () => AvatarImage,
+  Root: () => AvatarRoot
+});
+
+// src/avatar/AvatarRoot.tsx
+import { createContext, useContext, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var AvatarContext = createContext(null);
+function useAvatarContext(part) {
+  const context = useContext(AvatarContext);
+  if (!context) throw new Error(`<Avatar.${part}> must be rendered inside <Avatar.Root>.`);
+  return context;
+}
+function AvatarRoot({ className, children, render, ...rest }) {
+  const [status, setStatus] = useState("idle");
+  const context = useMemo(() => ({ status, setStatus }), [status]);
+  const element = useRender({
+    render,
+    defaultTagName: "span",
+    props: { "data-image-status": status, className, children },
+    consumerProps: rest
+  });
+  return /* @__PURE__ */ jsx(AvatarContext.Provider, { value: context, children: element });
+}
+
+// src/avatar/AvatarImage.tsx
+import { useLayoutEffect } from "react";
+function AvatarImage({
+  src,
+  srcSet,
+  sizes,
+  crossOrigin,
+  referrerPolicy,
+  className,
+  render,
+  ...rest
+}) {
+  const { status, setStatus } = useAvatarContext("Image");
+  useLayoutEffect(() => {
+    if (!src && !srcSet) {
+      setStatus("error");
+      return;
+    }
+    let active = true;
+    const image = new window.Image();
+    const settle = (next) => () => {
+      if (active) setStatus(next);
+    };
+    image.onload = settle("loaded");
+    image.onerror = settle("error");
+    if (crossOrigin !== void 0) image.crossOrigin = crossOrigin;
+    if (referrerPolicy) image.referrerPolicy = referrerPolicy;
+    if (sizes) image.sizes = sizes;
+    if (srcSet) image.srcset = srcSet;
+    if (src) image.src = src;
+    setStatus(image.complete && image.naturalWidth > 0 ? "loaded" : "loading");
+    return () => {
+      active = false;
+    };
+  }, [src, srcSet, sizes, crossOrigin, referrerPolicy, setStatus]);
+  const element = useRender({
+    render,
+    defaultTagName: "img",
+    props: { src, srcSet, sizes, crossOrigin, referrerPolicy, className },
+    consumerProps: rest
+  });
+  return status === "loaded" ? element : null;
+}
+
+// src/avatar/AvatarFallback.tsx
+import { useEffect, useState as useState2 } from "react";
+function AvatarFallback({
+  delay = 0,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const { status } = useAvatarContext("Fallback");
+  const [waited, setWaited] = useState2(delay === 0);
+  useEffect(() => {
+    if (delay === 0) return;
+    const timer = setTimeout(() => setWaited(true), delay);
+    return () => clearTimeout(timer);
+  }, [delay]);
+  const element = useRender({
+    render,
+    defaultTagName: "span",
+    props: { className, children },
+    consumerProps: rest
+  });
+  return status !== "loaded" && waited ? element : null;
+}
+export {
+  index_parts_exports as Avatar
+};

package/dist/chunk-36N5DD5K.js

@@ -0,0 +1,78 @@
+import {
+  byDocumentOrder,
+  rovingIndex
+} from "./chunk-2S4XG4VD.js";
+
+// src/core/rovingGroup.ts
+import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useState } from "react";
+var RovingGroupContext = createContext(null);
+function useRovingGroupContext() {
+  return useContext(RovingGroupContext);
+}
+function keyBelongsToField(event, orientation) {
+  const target = event.target;
+  if (!(target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)) return false;
+  if (target instanceof HTMLInputElement && !/^(text|search|url|tel|email|password|number)$/.test(target.type)) {
+    return false;
+  }
+  const { key } = event;
+  const along = orientation === "horizontal" ? ["ArrowLeft", "ArrowRight", "Home", "End"] : [];
+  if (!along.includes(key)) return false;
+  const start = target.selectionStart ?? 0;
+  const end = target.selectionEnd ?? 0;
+  const atStart = start === 0 && end === 0;
+  const atEnd = start === target.value.length && end === target.value.length;
+  const rtl = getComputedStyle(target).direction === "rtl";
+  const towardStart = key === (rtl ? "ArrowRight" : "ArrowLeft") || key === "Home";
+  return towardStart ? !atStart : !atEnd;
+}
+function useRovingGroup({ orientation }) {
+  const [items, setItems] = useState([]);
+  const register = useCallback((item) => {
+    setItems((current) => [...current, item].sort(byDocumentOrder));
+    return () => setItems((current) => current.filter((i) => i !== item));
+  }, []);
+  const [chosen, setTabStop] = useState(null);
+  const enabled = items.filter((item) => !item.disabled);
+  const tabStop = (
+    // Matched by element: an item re-registers when its props change.
+    chosen && enabled.find((item) => item.ref === chosen.ref) || enabled.find((item) => item.selected) || enabled[0] || null
+  );
+  const onKeyDown = useCallback(
+    (event) => {
+      if (event.defaultPrevented || keyBelongsToField(event, orientation)) return;
+      const current = enabled.findIndex((item2) => item2.ref.current?.contains(event.target));
+      const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
+      const next = rovingIndex(event.key, { count: enabled.length, current, orientation, rtl });
+      if (next === null) return;
+      const item = enabled[next];
+      if (!item) return;
+      event.preventDefault();
+      item.ref.current?.focus();
+      setTabStop(item);
+    },
+    [enabled, orientation]
+  );
+  const context = useMemo(() => ({ tabStop, register, setTabStop }), [tabStop, register]);
+  return { context, onKeyDown };
+}
+function useRovingItem(ref, disabled, selected = false) {
+  const group = useRovingGroupContext();
+  const item = useMemo(() => ({ ref, disabled, selected }), [ref, disabled, selected]);
+  const register = group?.register;
+  useLayoutEffect(() => register?.(item), [register, item]);
+  if (!group) return { tabIndex: void 0, onFocus: void 0 };
+  return {
+    tabIndex: group.tabStop?.ref === ref ? 0 : -1,
+    onFocus() {
+      group.setTabStop(item);
+    }
+  };
+}
+
+export {
+  RovingGroupContext,
+  useRovingGroupContext,
+  useRovingGroup,
+  useRovingItem
+};

package/dist/chunk-E4JBFRMM.js

@@ -0,0 +1,11 @@
+// src/toggle-group/ToggleGroupContext.ts
+import { createContext, useContext } from "react";
+var ToggleGroupContext = createContext(null);
+function useToggleGroupContext() {
+  return useContext(ToggleGroupContext);
+}
+
+export {
+  ToggleGroupContext,
+  useToggleGroupContext
+};

package/dist/combobox/index.js

@@ -1,12 +1,12 @@
-import {
-  byDocumentOrder,
-  rovingIndex
-} from "../chunk-2S4XG4VD.js";
 import {
   anchorNameFor,
   anchoredDataAttributes,
   anchoredPopupStyle
 } from "../chunk-HCOCPQXS.js";
+import {
+  byDocumentOrder,
+  rovingIndex
+} from "../chunk-2S4XG4VD.js";
 import {
   useControlled
 } from "../chunk-UEIB3I3T.js";

package/dist/menu/index.js

@@ -1,12 +1,12 @@
-import {
-  byDocumentOrder,
-  rovingIndex
-} from "../chunk-2S4XG4VD.js";
 import {
   anchorNameFor,
   anchoredDataAttributes,
   anchoredPopupStyle
 } from "../chunk-HCOCPQXS.js";
+import {
+  byDocumentOrder,
+  rovingIndex
+} from "../chunk-2S4XG4VD.js";
 import {
   useControlled
 } from "../chunk-UEIB3I3T.js";

package/dist/rovingFocus-BZB3yicE.d.cts

@@ -0,0 +1,11 @@
+/**
+ * Roving focus for composite widgets — one Tab stop for the group, arrow keys within it.
+ * Tabs first; Menu and Toolbar reuse it. Internal: shared between components, not exported
+ * (decision 9).
+ *
+ * The caller owns the list of items and which are enabled — from component props, never
+ * read back from the DOM (decision 10). This only answers "where does this key go".
+ */
+type Orientation = 'horizontal' | 'vertical';
+
+export type { Orientation as O };

package/dist/rovingFocus-BZB3yicE.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Roving focus for composite widgets — one Tab stop for the group, arrow keys within it.
+ * Tabs first; Menu and Toolbar reuse it. Internal: shared between components, not exported
+ * (decision 9).
+ *
+ * The caller owns the list of items and which are enabled — from component props, never
+ * read back from the DOM (decision 10). This only answers "where does this key go".
+ */
+type Orientation = 'horizontal' | 'vertical';
+
+export type { Orientation as O };

package/dist/tabs/index.d.cts

@@ -1,15 +1,6 @@
 import * as react from 'react';
 import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
-
-/**
- * Roving focus for composite widgets — one Tab stop for the group, arrow keys within it.
- * Tabs first; Menu and Toolbar reuse it. Internal: shared between components, not exported
- * (decision 9).
- *
- * The caller owns the list of items and which are enabled — from component props, never
- * read back from the DOM (decision 10). This only answers "where does this key go".
- */
-type Orientation = 'horizontal' | 'vertical';
+import { O as Orientation } from '../rovingFocus-BZB3yicE.cjs';
 
 type TabsActivationMode = 'automatic' | 'manual';
 /** The state Tabs.Root shares with its parts, and projects as `data-*` attributes. */

package/dist/tabs/index.d.ts

@@ -1,15 +1,6 @@
 import * as react from 'react';
 import { ReactElement, Ref, ComponentPropsWithRef } from 'react';
-
-/**
- * Roving focus for composite widgets — one Tab stop for the group, arrow keys within it.
- * Tabs first; Menu and Toolbar reuse it. Internal: shared between components, not exported
- * (decision 9).
- *
- * The caller owns the list of items and which are enabled — from component props, never
- * read back from the DOM (decision 10). This only answers "where does this key go".
- */
-type Orientation = 'horizontal' | 'vertical';
+import { O as Orientation } from '../rovingFocus-BZB3yicE.js';
 
 type TabsActivationMode = 'automatic' | 'manual';
 /** The state Tabs.Root shares with its parts, and projects as `data-*` attributes. */