@gunkin/uiify 0.0.1-alpha

package/dist/core/roving-focus.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useRef, useSyncExternalStore } from "react";
+import { useId, useIsomorphicLayoutEffect, useMergedRefs } from "@gunkin/uiify/hooks";
+import { composeEventHandlers } from "./compose-event-handlers.js";
+import { useDirection } from "./direction.js";
+import {
+  createRovingFocusStore
+} from "./roving-focus-store.js";
+import { useRenderElement } from "./use-render-element.js";
+const RovingFocusContext = createContext(null);
+function RovingFocusRoot(props) {
+  const {
+    as,
+    direction: localDirection,
+    loop = true,
+    orientation = "both",
+    render,
+    ...consumerProps
+  } = props;
+  const direction = useDirection(localDirection);
+  const storeRef = useRef(null);
+  storeRef.current ??= createRovingFocusStore({ direction, loop, orientation });
+  storeRef.current.updateConfig({ direction, loop, orientation });
+  const element = useRenderElement({
+    as,
+    defaultTag: "div",
+    props: {
+      ...consumerProps,
+      "data-orientation": orientation,
+      dir: direction
+    },
+    render,
+    state: { orientation }
+  });
+  return /* @__PURE__ */ jsx(RovingFocusContext, { value: storeRef.current, children: element });
+}
+RovingFocusRoot.displayName = "RovingFocusRoot";
+function RovingFocusItem(props) {
+  const {
+    as,
+    disabled = false,
+    id: providedId,
+    ref: consumerRef,
+    render,
+    textValue = "",
+    ...consumerProps
+  } = props;
+  const { onFocus: consumerOnFocus, onKeyDown: consumerOnKeyDown } = consumerProps;
+  const generatedId = useId();
+  const id = providedId ?? generatedId;
+  const store = useContext(RovingFocusContext);
+  if (!store) throw new Error("RovingFocusItem must be used inside RovingFocusRoot");
+  const elementRef = useRef(null);
+  const current = useSyncExternalStore(
+    (listener) => store.subscribeItem(id, listener),
+    () => store.getCurrentId() === id,
+    () => false
+  );
+  const setElement = useCallback(
+    (element) => store.setElement(id, element),
+    [id, store]
+  );
+  const mergedRef = useMergedRefs(elementRef, consumerRef, setElement);
+  useIsomorphicLayoutEffect(
+    () => store.register({
+      disabled,
+      element: elementRef.current,
+      id,
+      textValue: textValue || elementRef.current?.textContent?.trim() || ""
+    }),
+    [id, store]
+  );
+  useIsomorphicLayoutEffect(() => {
+    store.updateItem(id, {
+      disabled,
+      textValue: textValue || elementRef.current?.textContent?.trim() || ""
+    });
+  }, [disabled, id, store, textValue]);
+  const nativeButton = as === "button";
+  const handleFocus = () => {
+    if (!disabled) store.setCurrentId(id);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Home" || event.key === "End" || event.key.startsWith("Arrow")) {
+      if (store.move(id, event.key)) event.preventDefault();
+    } else if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {
+      store.search(event.key);
+    }
+  };
+  return useRenderElement({
+    as,
+    defaultTag: "div",
+    props: {
+      ...consumerProps,
+      id,
+      "aria-disabled": disabled || void 0,
+      "data-current": current ? "" : void 0,
+      "data-disabled": disabled ? "" : void 0,
+      ...nativeButton ? { disabled: disabled || void 0 } : {},
+      onFocus: composeEventHandlers(consumerOnFocus, handleFocus),
+      onKeyDown: composeEventHandlers(consumerOnKeyDown, handleKeyDown),
+      ref: mergedRef,
+      tabIndex: current && !disabled ? 0 : -1
+    },
+    render,
+    state: { current, disabled }
+  });
+}
+export {
+  RovingFocusItem,
+  RovingFocusRoot,
+  createRovingFocusStore
+};
+//# sourceMappingURL=roving-focus.js.map

package/dist/core/roving-focus.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/core/roving-focus.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useCallback, useContext, useRef, useSyncExternalStore } from \"react\";\nimport { useId, useIsomorphicLayoutEffect, useMergedRefs } from \"@gunkin/uiify/hooks\";\nimport type {\n  ElementType,\n  FocusEvent as ReactFocusEvent,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactElement,\n  Ref,\n} from \"react\";\nimport { composeEventHandlers } from \"./compose-event-handlers.js\";\nimport { useDirection, type Direction } from \"./direction.js\";\nimport type { RenderableProps } from \"./polymorphic.js\";\nimport {\n  createRovingFocusStore,\n  type RovingFocusOrientation,\n  type RovingFocusStore,\n} from \"./roving-focus-store.js\";\nimport { useRenderElement } from \"./use-render-element.js\";\n\nconst RovingFocusContext = createContext<RovingFocusStore | null>(null);\n\nexport interface RovingFocusRootOwnProps {\n  readonly direction?: Direction;\n  readonly loop?: boolean;\n  readonly orientation?: RovingFocusOrientation;\n}\n\nexport type RovingFocusRootProps<TAs extends ElementType = \"div\"> = RenderableProps<\n  TAs,\n  RovingFocusRootOwnProps,\n  { orientation: RovingFocusOrientation },\n  HTMLElement\n>;\n\nexport function RovingFocusRoot<TAs extends ElementType = \"div\">(\n  props: RovingFocusRootProps<TAs>,\n): ReactElement | null {\n  const {\n    as,\n    direction: localDirection,\n    loop = true,\n    orientation = \"both\",\n    render,\n    ...consumerProps\n  } = props as RovingFocusRootProps<ElementType>;\n  const direction = useDirection(localDirection);\n  const storeRef = useRef<RovingFocusStore | null>(null);\n  storeRef.current ??= createRovingFocusStore({ direction, loop, orientation });\n  storeRef.current.updateConfig({ direction, loop, orientation });\n\n  const element = useRenderElement({\n    as,\n    defaultTag: \"div\",\n    props: {\n      ...consumerProps,\n      \"data-orientation\": orientation,\n      dir: direction,\n    },\n    render,\n    state: { orientation },\n  });\n  return <RovingFocusContext value={storeRef.current}>{element}</RovingFocusContext>;\n}\nRovingFocusRoot.displayName = \"RovingFocusRoot\";\n\nexport interface RovingFocusItemOwnProps {\n  readonly disabled?: boolean;\n  readonly id?: string;\n  readonly textValue?: string;\n}\n\nexport type RovingFocusItemProps<TAs extends ElementType = \"div\"> = RenderableProps<\n  TAs,\n  RovingFocusItemOwnProps,\n  { current: boolean; disabled: boolean },\n  HTMLElement\n>;\n\nexport function RovingFocusItem<TAs extends ElementType = \"div\">(\n  props: RovingFocusItemProps<TAs>,\n): ReactElement | null {\n  const {\n    as,\n    disabled = false,\n    id: providedId,\n    ref: consumerRef,\n    render,\n    textValue = \"\",\n    ...consumerProps\n  } = props as RovingFocusItemProps<ElementType> & { ref?: Ref<HTMLElement> };\n  const { onFocus: consumerOnFocus, onKeyDown: consumerOnKeyDown } = consumerProps as {\n    onFocus?: (event: ReactFocusEvent<HTMLElement>) => void;\n    onKeyDown?: (event: ReactKeyboardEvent<HTMLElement>) => void;\n  };\n  const generatedId = useId();\n  const id = providedId ?? generatedId;\n  const store = useContext(RovingFocusContext);\n  if (!store) throw new Error(\"RovingFocusItem must be used inside RovingFocusRoot\");\n  const elementRef = useRef<HTMLElement | null>(null);\n  const current = useSyncExternalStore(\n    (listener) => store.subscribeItem(id, listener),\n    () => store.getCurrentId() === id,\n    () => false,\n  );\n  const setElement = useCallback(\n    (element: HTMLElement | null) => store.setElement(id, element),\n    [id, store],\n  );\n  const mergedRef = useMergedRefs(elementRef, consumerRef, setElement);\n\n  useIsomorphicLayoutEffect(\n    () =>\n      store.register({\n        disabled,\n        element: elementRef.current,\n        id,\n        textValue: textValue || elementRef.current?.textContent?.trim() || \"\",\n      }),\n    [id, store],\n  );\n  useIsomorphicLayoutEffect(() => {\n    store.updateItem(id, {\n      disabled,\n      textValue: textValue || elementRef.current?.textContent?.trim() || \"\",\n    });\n  }, [disabled, id, store, textValue]);\n\n  const nativeButton = as === \"button\";\n\n  const handleFocus = () => {\n    if (!disabled) store.setCurrentId(id);\n  };\n\n  const handleKeyDown = (event: ReactKeyboardEvent<HTMLElement>) => {\n    if (event.key === \"Home\" || event.key === \"End\" || event.key.startsWith(\"Arrow\")) {\n      if (store.move(id, event.key)) event.preventDefault();\n    } else if (event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey) {\n      store.search(event.key);\n    }\n  };\n\n  return useRenderElement({\n    as,\n    defaultTag: \"div\",\n    props: {\n      ...consumerProps,\n      id,\n      \"aria-disabled\": disabled || undefined,\n      \"data-current\": current ? \"\" : undefined,\n      \"data-disabled\": disabled ? \"\" : undefined,\n      ...(nativeButton ? { disabled: disabled || undefined } : {}),\n      onFocus: composeEventHandlers(consumerOnFocus, handleFocus),\n      onKeyDown: composeEventHandlers(consumerOnKeyDown, handleKeyDown),\n      ref: mergedRef,\n      tabIndex: current && !disabled ? 0 : -1,\n    },\n    render,\n    state: { current, disabled },\n  });\n}\n\nexport { createRovingFocusStore };\nexport type { RovingFocusOrientation, RovingFocusStore };\n"],"mappings":"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","names":[]}

package/dist/core/split-ref.d.ts

@@ -0,0 +1,9 @@
+import type { Ref } from "react";
+/**
+ * Take `ref` out of a consumer props object without mutating it.
+ *
+ * Replaces the `{ ...props }` + `delete` dance repeated across the client
+ * compounds, which had to cast twice and left a mutated copy behind.
+ */
+export declare function splitRef<TElement, TProps extends object>(props: TProps): readonly [Ref<TElement> | undefined, Omit<TProps, "ref">];
+//# sourceMappingURL=split-ref.d.ts.map

package/dist/core/split-ref.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-ref.d.ts","sourceRoot":"","sources":["../../src/core/split-ref.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,QAAQ,EAAE,MAAM,SAAS,MAAM,EACtD,KAAK,EAAE,MAAM,GACZ,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAG3D"}

package/dist/core/split-ref.js

@@ -0,0 +1,8 @@
+function splitRef(props) {
+  const { ref, ...rest } = props;
+  return [ref, rest];
+}
+export {
+  splitRef
+};
+//# sourceMappingURL=split-ref.js.map

package/dist/core/split-ref.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/core/split-ref.ts"],"sourcesContent":["import type { Ref } from \"react\";\n\n/**\n * Take `ref` out of a consumer props object without mutating it.\n *\n * Replaces the `{ ...props }` + `delete` dance repeated across the client\n * compounds, which had to cast twice and left a mutated copy behind.\n */\nexport function splitRef<TElement, TProps extends object>(\n  props: TProps,\n): readonly [Ref<TElement> | undefined, Omit<TProps, \"ref\">] {\n  const { ref, ...rest } = props as TProps & { ref?: Ref<TElement> };\n  return [ref, rest as Omit<TProps, \"ref\">] as const;\n}\n"],"mappings":"AAQO,SAAS,SACd,OAC2D;AAC3D,QAAM,EAAE,KAAK,GAAG,KAAK,IAAI;AACzB,SAAO,CAAC,KAAK,IAA2B;AAC1C;","names":[]}

package/dist/core/tabbable.d.ts

@@ -0,0 +1,8 @@
+interface TabbableOptions {
+    readonly includeContainer?: boolean;
+}
+export declare function isFocusable(element: Element): element is HTMLElement;
+export declare function isTabbable(element: Element): element is HTMLElement;
+export declare function getTabbableCandidates(container: HTMLElement, { includeContainer }?: TabbableOptions): HTMLElement[];
+export {};
+//# sourceMappingURL=tabbable.d.ts.map

package/dist/core/tabbable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabbable.d.ts","sourceRoot":"","sources":["../../src/core/tabbable.ts"],"names":[],"mappings":"AAgBA,UAAU,eAAe;IACvB,QAAQ,CAAC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CACrC;AA+CD,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI,WAAW,CASpE;AAED,wBAAgB,UAAU,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI,WAAW,CAGnE;AAmBD,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,WAAW,EACtB,EAAE,gBAAwB,EAAE,GAAE,eAAoB,GACjD,WAAW,EAAE,CAiBf"}

package/dist/core/tabbable.js

@@ -0,0 +1,94 @@
+import { supportsCheckVisibility } from "./platform.js";
+const candidateSelector = [
+  "a[href]",
+  "area[href]",
+  "button",
+  "input",
+  "select",
+  "textarea",
+  "summary",
+  "audio[controls]",
+  "video[controls]",
+  "[contenteditable]:not([contenteditable='false'])",
+  "[tabindex]"
+].join(",");
+function isElementDisabled(element) {
+  if ("disabled" in element && element.disabled) return true;
+  const fieldset = element.closest("fieldset[disabled]");
+  if (!fieldset) return false;
+  const firstLegend = fieldset.querySelector(":scope > legend");
+  return !firstLegend?.contains(element);
+}
+function isInClosedDetails(element) {
+  const details = element.closest("details:not([open])");
+  const summary = details?.querySelector(":scope > summary");
+  return details !== null && !summary?.contains(element);
+}
+function isStructurallyVisible(element) {
+  let current = element;
+  while (current instanceof HTMLElement) {
+    if (current.hidden || current.getAttribute("aria-hidden") === "true") return false;
+    const root = current.getRootNode();
+    current = current.parentElement ?? (root instanceof ShadowRoot ? root.host : null);
+  }
+  return true;
+}
+function isVisible(element) {
+  if (element.closest("[hidden], [inert]")) return false;
+  if (supportsCheckVisibility()) {
+    return element.checkVisibility({
+      checkOpacity: true,
+      checkVisibilityCSS: true
+    });
+  }
+  return isStructurallyVisible(element);
+}
+function isRadioTabbable(element) {
+  if (element.type !== "radio" || !element.name || element.checked) return true;
+  const root = element.form ?? element.ownerDocument;
+  const escaped = typeof CSS !== "undefined" && typeof CSS.escape === "function" ? CSS.escape(element.name) : element.name.replaceAll('"', '\\"');
+  return !root.querySelector(`input[type="radio"][name="${escaped}"]:checked`);
+}
+function isFocusable(element) {
+  return element instanceof HTMLElement && element.matches(candidateSelector) && element.isConnected && !isElementDisabled(element) && !isInClosedDetails(element) && isVisible(element);
+}
+function isTabbable(element) {
+  if (!isFocusable(element) || element.tabIndex < 0) return false;
+  return !(element instanceof HTMLInputElement) || isRadioTabbable(element);
+}
+function collectCandidates(root, result) {
+  if (root instanceof Element && root.shadowRoot) {
+    collectCandidates(root.shadowRoot, result);
+  }
+  for (const element of root.querySelectorAll("*")) {
+    if (element.matches(candidateSelector) && isTabbable(element)) {
+      result.push(element);
+    }
+    if (element.shadowRoot) collectCandidates(element.shadowRoot, result);
+    if (element instanceof HTMLSlotElement) {
+      for (const assigned of element.assignedElements({ flatten: true })) {
+        if (isTabbable(assigned)) result.push(assigned);
+      }
+    }
+  }
+}
+function getTabbableCandidates(container, { includeContainer = false } = {}) {
+  const candidates = [];
+  if (includeContainer && isTabbable(container)) candidates.push(container);
+  collectCandidates(container, candidates);
+  return [...new Set(candidates)].map((element, order) => ({ element, order, tabIndex: element.tabIndex })).sort((left, right) => {
+    const leftPositive = left.tabIndex > 0;
+    const rightPositive = right.tabIndex > 0;
+    if (leftPositive !== rightPositive) return leftPositive ? -1 : 1;
+    if (leftPositive && left.tabIndex !== right.tabIndex) {
+      return left.tabIndex - right.tabIndex;
+    }
+    return left.order - right.order;
+  }).map(({ element }) => element);
+}
+export {
+  getTabbableCandidates,
+  isFocusable,
+  isTabbable
+};
+//# sourceMappingURL=tabbable.js.map

package/dist/core/tabbable.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/core/tabbable.ts"],"sourcesContent":["import { supportsCheckVisibility } from \"./platform.js\";\n\nconst candidateSelector = [\n  \"a[href]\",\n  \"area[href]\",\n  \"button\",\n  \"input\",\n  \"select\",\n  \"textarea\",\n  \"summary\",\n  \"audio[controls]\",\n  \"video[controls]\",\n  \"[contenteditable]:not([contenteditable='false'])\",\n  \"[tabindex]\",\n].join(\",\");\n\ninterface TabbableOptions {\n  readonly includeContainer?: boolean;\n}\n\nfunction isElementDisabled(element: Element): boolean {\n  if (\"disabled\" in element && (element as HTMLButtonElement).disabled) return true;\n  const fieldset = element.closest(\"fieldset[disabled]\");\n  if (!fieldset) return false;\n  const firstLegend = fieldset.querySelector(\":scope > legend\");\n  return !firstLegend?.contains(element);\n}\n\nfunction isInClosedDetails(element: Element): boolean {\n  const details = element.closest(\"details:not([open])\");\n  const summary = details?.querySelector(\":scope > summary\");\n  return details !== null && !summary?.contains(element);\n}\n\nfunction isStructurallyVisible(element: HTMLElement): boolean {\n  let current: Element | null = element;\n  while (current instanceof HTMLElement) {\n    if (current.hidden || current.getAttribute(\"aria-hidden\") === \"true\") return false;\n    const root = current.getRootNode();\n    current = current.parentElement ?? (root instanceof ShadowRoot ? root.host : null);\n  }\n  return true;\n}\n\nfunction isVisible(element: HTMLElement): boolean {\n  if (element.closest(\"[hidden], [inert]\")) return false;\n  if (supportsCheckVisibility()) {\n    return element.checkVisibility({\n      checkOpacity: true,\n      checkVisibilityCSS: true,\n    });\n  }\n  return isStructurallyVisible(element);\n}\n\nfunction isRadioTabbable(element: HTMLInputElement): boolean {\n  if (element.type !== \"radio\" || !element.name || element.checked) return true;\n  const root = element.form ?? element.ownerDocument;\n  const escaped =\n    typeof CSS !== \"undefined\" && typeof CSS.escape === \"function\"\n      ? CSS.escape(element.name)\n      : element.name.replaceAll('\"', '\\\\\"');\n  return !root.querySelector(`input[type=\"radio\"][name=\"${escaped}\"]:checked`);\n}\n\nexport function isFocusable(element: Element): element is HTMLElement {\n  return (\n    element instanceof HTMLElement &&\n    element.matches(candidateSelector) &&\n    element.isConnected &&\n    !isElementDisabled(element) &&\n    !isInClosedDetails(element) &&\n    isVisible(element)\n  );\n}\n\nexport function isTabbable(element: Element): element is HTMLElement {\n  if (!isFocusable(element) || element.tabIndex < 0) return false;\n  return !(element instanceof HTMLInputElement) || isRadioTabbable(element);\n}\n\nfunction collectCandidates(root: Element | ShadowRoot, result: HTMLElement[]): void {\n  if (root instanceof Element && root.shadowRoot) {\n    collectCandidates(root.shadowRoot, result);\n  }\n  for (const element of root.querySelectorAll<HTMLElement>(\"*\")) {\n    if (element.matches(candidateSelector) && isTabbable(element)) {\n      result.push(element);\n    }\n    if (element.shadowRoot) collectCandidates(element.shadowRoot, result);\n    if (element instanceof HTMLSlotElement) {\n      for (const assigned of element.assignedElements({ flatten: true })) {\n        if (isTabbable(assigned)) result.push(assigned);\n      }\n    }\n  }\n}\n\nexport function getTabbableCandidates(\n  container: HTMLElement,\n  { includeContainer = false }: TabbableOptions = {},\n): HTMLElement[] {\n  const candidates: HTMLElement[] = [];\n  if (includeContainer && isTabbable(container)) candidates.push(container);\n  collectCandidates(container, candidates);\n\n  return [...new Set(candidates)]\n    .map((element, order) => ({ element, order, tabIndex: element.tabIndex }))\n    .sort((left, right) => {\n      const leftPositive = left.tabIndex > 0;\n      const rightPositive = right.tabIndex > 0;\n      if (leftPositive !== rightPositive) return leftPositive ? -1 : 1;\n      if (leftPositive && left.tabIndex !== right.tabIndex) {\n        return left.tabIndex - right.tabIndex;\n      }\n      return left.order - right.order;\n    })\n    .map(({ element }) => element);\n}\n"],"mappings":"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","names":[]}

package/dist/core/use-anchor-position.d.ts

@@ -0,0 +1,4 @@
+import type { UseAnchorPositionOptions, UseAnchorPositionReturn } from "./anchor-position/types.js";
+/** Thin hook — emits CSS anchor attributes only; no layout reads or DOM wiring. */
+export declare function useAnchorPosition({ align, anchorName: anchorNameProp, side, }?: UseAnchorPositionOptions): UseAnchorPositionReturn;
+//# sourceMappingURL=use-anchor-position.d.ts.map

package/dist/core/use-anchor-position.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-anchor-position.d.ts","sourceRoot":"","sources":["../../src/core/use-anchor-position.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,4BAA4B,CAAC;AAIpG,mFAAmF;AACnF,wBAAgB,iBAAiB,CAAC,EAChC,KAAgB,EAChB,UAAU,EAAE,cAAc,EAC1B,IAAe,GAChB,GAAE,wBAA6B,GAAG,uBAAuB,CAUzD"}

package/dist/core/use-anchor-position.js

@@ -0,0 +1,24 @@
+"use client";
+import { useId } from "@gunkin/uiify/hooks";
+import { createAnchorPositionerProps, createAnchorTriggerProps } from "./anchor-position/props.js";
+const noopRef = () => {
+};
+function useAnchorPosition({
+  align = "center",
+  anchorName: anchorNameProp,
+  side = "bottom"
+} = {}) {
+  const generated = `--${useId(void 0, "ui")}`;
+  const anchorName = anchorNameProp ?? generated;
+  return {
+    anchorProps: createAnchorTriggerProps(anchorName),
+    anchorRef: noopRef,
+    positionerProps: createAnchorPositionerProps({ align, anchorName, side }),
+    positionerRef: noopRef,
+    positioning: "native"
+  };
+}
+export {
+  useAnchorPosition
+};
+//# sourceMappingURL=use-anchor-position.js.map

package/dist/core/use-anchor-position.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/core/use-anchor-position.ts"],"sourcesContent":["\"use client\";\n\nimport { useId } from \"@gunkin/uiify/hooks\";\nimport type { RefCallback } from \"react\";\nimport { createAnchorPositionerProps, createAnchorTriggerProps } from \"./anchor-position/props.js\";\nimport type { UseAnchorPositionOptions, UseAnchorPositionReturn } from \"./anchor-position/types.js\";\n\nconst noopRef: RefCallback<HTMLElement> = () => {};\n\n/** Thin hook — emits CSS anchor attributes only; no layout reads or DOM wiring. */\nexport function useAnchorPosition({\n  align = \"center\",\n  anchorName: anchorNameProp,\n  side = \"bottom\",\n}: UseAnchorPositionOptions = {}): UseAnchorPositionReturn {\n  const generated = `--${useId(undefined, \"ui\")}`;\n  const anchorName = anchorNameProp ?? generated;\n  return {\n    anchorProps: createAnchorTriggerProps(anchorName),\n    anchorRef: noopRef,\n    positionerProps: createAnchorPositionerProps({ align, anchorName, side }),\n    positionerRef: noopRef,\n    positioning: \"native\",\n  };\n}\n"],"mappings":";AAEA,SAAS,aAAa;AAEtB,SAAS,6BAA6B,gCAAgC;AAGtE,MAAM,UAAoC,MAAM;AAAC;AAG1C,SAAS,kBAAkB;AAAA,EAChC,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,OAAO;AACT,IAA8B,CAAC,GAA4B;AACzD,QAAM,YAAY,KAAK,MAAM,QAAW,IAAI,CAAC;AAC7C,QAAM,aAAa,kBAAkB;AACrC,SAAO;AAAA,IACL,aAAa,yBAAyB,UAAU;AAAA,IAChD,WAAW;AAAA,IACX,iBAAiB,4BAA4B,EAAE,OAAO,YAAY,KAAK,CAAC;AAAA,IACxE,eAAe;AAAA,IACf,aAAa;AAAA,EACf;AACF;","names":[]}

package/dist/core/use-controllable-open-change.d.ts

@@ -0,0 +1,13 @@
+import { type OpenChangeDetails, type OpenChangeReason } from "./open-change-details.js";
+export interface UseControllableOpenChangeOptions {
+    readonly defaultOpen?: boolean;
+    readonly onOpenChange?: ((open: boolean, details: OpenChangeDetails) => void) | undefined;
+    readonly open?: boolean | undefined;
+}
+export interface UseControllableOpenChangeReturn {
+    readonly open: boolean;
+    readonly requestChange: (next: boolean, reason: OpenChangeReason, event?: Event | null) => boolean;
+}
+/** Shared controllable open state with cancellable `OpenChangeDetails`. */
+export declare function useControllableOpenChange({ defaultOpen, onOpenChange, open: controlledOpen, }?: UseControllableOpenChangeOptions): UseControllableOpenChangeReturn;
+//# sourceMappingURL=use-controllable-open-change.d.ts.map

package/dist/core/use-controllable-open-change.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-controllable-open-change.d.ts","sourceRoot":"","sources":["../../src/core/use-controllable-open-change.ts"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EACtB,MAAM,0BAA0B,CAAC;AAElC,MAAM,WAAW,gCAAgC;IAC/C,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,iBAAiB,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC1F,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CACrC;AAED,MAAM,WAAW,+BAA+B;IAC9C,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,aAAa,EAAE,CACtB,IAAI,EAAE,OAAO,EACb,MAAM,EAAE,gBAAgB,EACxB,KAAK,CAAC,EAAE,KAAK,GAAG,IAAI,KACjB,OAAO,CAAC;CACd;AAED,2EAA2E;AAC3E,wBAAgB,yBAAyB,CAAC,EACxC,WAAmB,EACnB,YAAY,EACZ,IAAI,EAAE,cAAc,GACrB,GAAE,gCAAqC,GAAG,+BAA+B,CAmBzE"}

package/dist/core/use-controllable-open-change.js

@@ -0,0 +1,33 @@
+"use client";
+import { useCallback } from "react";
+import { useControllableState, useEventCallback } from "@gunkin/uiify/hooks";
+import {
+  createOpenChangeDetails
+} from "./open-change-details.js";
+function useControllableOpenChange({
+  defaultOpen = false,
+  onOpenChange,
+  open: controlledOpen
+} = {}) {
+  const [open, setOpen] = useControllableState({
+    value: controlledOpen,
+    defaultValue: defaultOpen
+  });
+  const emitChange = useEventCallback((next, details) => {
+    onOpenChange?.(next, details);
+    if (!details.isCanceled) setOpen(next);
+  });
+  const requestChange = useCallback(
+    (next, reason, event = null) => {
+      const details = createOpenChangeDetails(reason, event);
+      emitChange(next, details);
+      return !details.isCanceled;
+    },
+    [emitChange]
+  );
+  return { open, requestChange };
+}
+export {
+  useControllableOpenChange
+};
+//# sourceMappingURL=use-controllable-open-change.js.map

package/dist/core/use-controllable-open-change.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/core/use-controllable-open-change.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback } from \"react\";\nimport { useControllableState, useEventCallback } from \"@gunkin/uiify/hooks\";\nimport {\n  createOpenChangeDetails,\n  type OpenChangeDetails,\n  type OpenChangeReason,\n} from \"./open-change-details.js\";\n\nexport interface UseControllableOpenChangeOptions {\n  readonly defaultOpen?: boolean;\n  readonly onOpenChange?: ((open: boolean, details: OpenChangeDetails) => void) | undefined;\n  readonly open?: boolean | undefined;\n}\n\nexport interface UseControllableOpenChangeReturn {\n  readonly open: boolean;\n  readonly requestChange: (\n    next: boolean,\n    reason: OpenChangeReason,\n    event?: Event | null,\n  ) => boolean;\n}\n\n/** Shared controllable open state with cancellable `OpenChangeDetails`. */\nexport function useControllableOpenChange({\n  defaultOpen = false,\n  onOpenChange,\n  open: controlledOpen,\n}: UseControllableOpenChangeOptions = {}): UseControllableOpenChangeReturn {\n  const [open, setOpen] = useControllableState({\n    value: controlledOpen,\n    defaultValue: defaultOpen,\n  });\n  const emitChange = useEventCallback((next: boolean, details: OpenChangeDetails) => {\n    onOpenChange?.(next, details);\n    if (!details.isCanceled) setOpen(next);\n  });\n  const requestChange = useCallback(\n    (next: boolean, reason: OpenChangeReason, event: Event | null = null) => {\n      const details = createOpenChangeDetails(reason, event);\n      emitChange(next, details);\n      return !details.isCanceled;\n    },\n    [emitChange],\n  );\n\n  return { open, requestChange };\n}\n"],"mappings":";AAEA,SAAS,mBAAmB;AAC5B,SAAS,sBAAsB,wBAAwB;AACvD;AAAA,EACE;AAAA,OAGK;AAkBA,SAAS,0BAA0B;AAAA,EACxC,cAAc;AAAA,EACd;AAAA,EACA,MAAM;AACR,IAAsC,CAAC,GAAoC;AACzE,QAAM,CAAC,MAAM,OAAO,IAAI,qBAAqB;AAAA,IAC3C,OAAO;AAAA,IACP,cAAc;AAAA,EAChB,CAAC;AACD,QAAM,aAAa,iBAAiB,CAAC,MAAe,YAA+B;AACjF,mBAAe,MAAM,OAAO;AAC5B,QAAI,CAAC,QAAQ,WAAY,SAAQ,IAAI;AAAA,EACvC,CAAC;AACD,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAAe,QAA0B,QAAsB,SAAS;AACvE,YAAM,UAAU,wBAAwB,QAAQ,KAAK;AACrD,iBAAW,MAAM,OAAO;AACxB,aAAO,CAAC,QAAQ;AAAA,IAClB;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,SAAO,EAAE,MAAM,cAAc;AAC/B;","names":[]}

package/dist/core/use-dialog.d.ts

@@ -0,0 +1,16 @@
+import type { DialogHTMLAttributes, RefCallback } from "react";
+import { type UseControllableOpenChangeOptions } from "./use-controllable-open-change.js";
+export type DialogChangeHandler = UseControllableOpenChangeOptions["onOpenChange"];
+export interface UseDialogOptions extends UseControllableOpenChangeOptions {
+    readonly modal?: boolean;
+}
+export interface UseDialogReturn {
+    readonly close: (returnValue?: string) => void;
+    readonly dialogProps: DialogHTMLAttributes<HTMLDialogElement>;
+    readonly dialogRef: RefCallback<HTMLDialogElement>;
+    readonly open: boolean;
+    readonly openDialog: () => void;
+    readonly returnValue: string;
+}
+export declare function useDialog({ defaultOpen, modal, onOpenChange, open: controlledOpen, }?: UseDialogOptions): UseDialogReturn;
+//# sourceMappingURL=use-dialog.d.ts.map

package/dist/core/use-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dialog.d.ts","sourceRoot":"","sources":["../../src/core/use-dialog.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,WAAW,EAAkB,MAAM,OAAO,CAAC;AAI/E,OAAO,EAEL,KAAK,gCAAgC,EACtC,MAAM,mCAAmC,CAAC;AAE3C,MAAM,MAAM,mBAAmB,GAAG,gCAAgC,CAAC,cAAc,CAAC,CAAC;AAEnF,MAAM,WAAW,gBAAiB,SAAQ,gCAAgC;IACxE,QAAQ,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,KAAK,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,WAAW,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAC9D,QAAQ,CAAC,SAAS,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;IACnD,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,UAAU,EAAE,MAAM,IAAI,CAAC;IAChC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;CAC9B;AAED,wBAAgB,SAAS,CAAC,EACxB,WAAmB,EACnB,KAAY,EACZ,YAAY,EACZ,IAAI,EAAE,cAAc,GACrB,GAAE,gBAAqB,GAAG,eAAe,CA0EzC"}

package/dist/core/use-dialog.js

@@ -0,0 +1,85 @@
+"use client";
+import { useRef } from "react";
+import { useIsomorphicLayoutEffect } from "@gunkin/uiify/hooks";
+import { supportsDialogRequestClose } from "./platform.js";
+import {
+  useControllableOpenChange
+} from "./use-controllable-open-change.js";
+function useDialog({
+  defaultOpen = false,
+  modal = true,
+  onOpenChange,
+  open: controlledOpen
+} = {}) {
+  const { open, requestChange } = useControllableOpenChange({
+    defaultOpen,
+    onOpenChange,
+    open: controlledOpen
+  });
+  const elementRef = useRef(null);
+  const pendingCloseReasonRef = useRef(null);
+  const returnValueRef = useRef("");
+  const suppressCloseSyncRef = useRef(false);
+  useIsomorphicLayoutEffect(() => {
+    const dialog = elementRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) {
+      if (modal) dialog.showModal();
+      else dialog.show();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [modal, open]);
+  return {
+    close(returnValue = "") {
+      const dialog = elementRef.current;
+      if (!dialog) {
+        requestChange(false, "programmatic");
+        return;
+      }
+      returnValueRef.current = returnValue;
+      if (supportsDialogRequestClose()) {
+        pendingCloseReasonRef.current = "programmatic";
+        dialog.requestClose(returnValue);
+      } else if (requestChange(false, "programmatic")) {
+        suppressCloseSyncRef.current = true;
+        dialog.close(returnValue);
+      }
+    },
+    dialogProps: {
+      onCancel(event) {
+        event.preventDefault();
+        const reason = pendingCloseReasonRef.current ?? "escape-key";
+        pendingCloseReasonRef.current = null;
+        const allowed = requestChange(false, reason, event.nativeEvent);
+        if (allowed) {
+          const dialog = event.currentTarget;
+          suppressCloseSyncRef.current = true;
+          dialog.close();
+        }
+      },
+      onClose(event) {
+        returnValueRef.current = event.currentTarget.returnValue;
+        if (suppressCloseSyncRef.current) {
+          suppressCloseSyncRef.current = false;
+          return;
+        }
+        if (open) requestChange(false, "native-toggle", event.nativeEvent);
+      }
+    },
+    dialogRef(element) {
+      elementRef.current = element;
+    },
+    open,
+    openDialog() {
+      requestChange(true, "trigger-press");
+    },
+    get returnValue() {
+      return returnValueRef.current;
+    }
+  };
+}
+export {
+  useDialog
+};
+//# sourceMappingURL=use-dialog.js.map

package/dist/core/use-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/core/use-dialog.ts"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport type { DialogHTMLAttributes, RefCallback, SyntheticEvent } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@gunkin/uiify/hooks\";\nimport type { OpenChangeReason } from \"./open-change-details.js\";\nimport { supportsDialogRequestClose } from \"./platform.js\";\nimport {\n  useControllableOpenChange,\n  type UseControllableOpenChangeOptions,\n} from \"./use-controllable-open-change.js\";\n\nexport type DialogChangeHandler = UseControllableOpenChangeOptions[\"onOpenChange\"];\n\nexport interface UseDialogOptions extends UseControllableOpenChangeOptions {\n  readonly modal?: boolean;\n}\n\nexport interface UseDialogReturn {\n  readonly close: (returnValue?: string) => void;\n  readonly dialogProps: DialogHTMLAttributes<HTMLDialogElement>;\n  readonly dialogRef: RefCallback<HTMLDialogElement>;\n  readonly open: boolean;\n  readonly openDialog: () => void;\n  readonly returnValue: string;\n}\n\nexport function useDialog({\n  defaultOpen = false,\n  modal = true,\n  onOpenChange,\n  open: controlledOpen,\n}: UseDialogOptions = {}): UseDialogReturn {\n  const { open, requestChange } = useControllableOpenChange({\n    defaultOpen,\n    onOpenChange,\n    open: controlledOpen,\n  });\n  const elementRef = useRef<HTMLDialogElement | null>(null);\n  const pendingCloseReasonRef = useRef<OpenChangeReason | null>(null);\n  const returnValueRef = useRef(\"\");\n  const suppressCloseSyncRef = useRef(false);\n\n  useIsomorphicLayoutEffect(() => {\n    const dialog = elementRef.current;\n    if (!dialog) return;\n    if (open && !dialog.open) {\n      if (modal) dialog.showModal();\n      else dialog.show();\n    } else if (!open && dialog.open) {\n      dialog.close();\n    }\n  }, [modal, open]);\n\n  return {\n    close(returnValue = \"\") {\n      const dialog = elementRef.current;\n      if (!dialog) {\n        requestChange(false, \"programmatic\");\n        return;\n      }\n      returnValueRef.current = returnValue;\n      if (supportsDialogRequestClose()) {\n        pendingCloseReasonRef.current = \"programmatic\";\n        (\n          dialog as HTMLDialogElement & {\n            requestClose(value?: string): void;\n          }\n        ).requestClose(returnValue);\n      } else if (requestChange(false, \"programmatic\")) {\n        suppressCloseSyncRef.current = true;\n        dialog.close(returnValue);\n      }\n    },\n    dialogProps: {\n      onCancel(event: SyntheticEvent<HTMLDialogElement>) {\n        event.preventDefault();\n        const reason = pendingCloseReasonRef.current ?? \"escape-key\";\n        pendingCloseReasonRef.current = null;\n        const allowed = requestChange(false, reason, event.nativeEvent);\n        if (allowed) {\n          const dialog = event.currentTarget;\n          suppressCloseSyncRef.current = true;\n          dialog.close();\n        }\n      },\n      onClose(event: SyntheticEvent<HTMLDialogElement>) {\n        returnValueRef.current = event.currentTarget.returnValue;\n        if (suppressCloseSyncRef.current) {\n          suppressCloseSyncRef.current = false;\n          return;\n        }\n        if (open) requestChange(false, \"native-toggle\", event.nativeEvent);\n      },\n    },\n    dialogRef(element) {\n      elementRef.current = element;\n    },\n    open,\n    openDialog() {\n      requestChange(true, \"trigger-press\");\n    },\n    get returnValue() {\n      return returnValueRef.current;\n    },\n  };\n}\n"],"mappings":";AAEA,SAAS,cAAc;AAEvB,SAAS,iCAAiC;AAE1C,SAAS,kCAAkC;AAC3C;AAAA,EACE;AAAA,OAEK;AAiBA,SAAS,UAAU;AAAA,EACxB,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA,MAAM;AACR,IAAsB,CAAC,GAAoB;AACzC,QAAM,EAAE,MAAM,cAAc,IAAI,0BAA0B;AAAA,IACxD;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR,CAAC;AACD,QAAM,aAAa,OAAiC,IAAI;AACxD,QAAM,wBAAwB,OAAgC,IAAI;AAClE,QAAM,iBAAiB,OAAO,EAAE;AAChC,QAAM,uBAAuB,OAAO,KAAK;AAEzC,4BAA0B,MAAM;AAC9B,UAAM,SAAS,WAAW;AAC1B,QAAI,CAAC,OAAQ;AACb,QAAI,QAAQ,CAAC,OAAO,MAAM;AACxB,UAAI,MAAO,QAAO,UAAU;AAAA,UACvB,QAAO,KAAK;AAAA,IACnB,WAAW,CAAC,QAAQ,OAAO,MAAM;AAC/B,aAAO,MAAM;AAAA,IACf;AAAA,EACF,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,SAAO;AAAA,IACL,MAAM,cAAc,IAAI;AACtB,YAAM,SAAS,WAAW;AAC1B,UAAI,CAAC,QAAQ;AACX,sBAAc,OAAO,cAAc;AACnC;AAAA,MACF;AACA,qBAAe,UAAU;AACzB,UAAI,2BAA2B,GAAG;AAChC,8BAAsB,UAAU;AAChC,QACE,OAGA,aAAa,WAAW;AAAA,MAC5B,WAAW,cAAc,OAAO,cAAc,GAAG;AAC/C,6BAAqB,UAAU;AAC/B,eAAO,MAAM,WAAW;AAAA,MAC1B;AAAA,IACF;AAAA,IACA,aAAa;AAAA,MACX,SAAS,OAA0C;AACjD,cAAM,eAAe;AACrB,cAAM,SAAS,sBAAsB,WAAW;AAChD,8BAAsB,UAAU;AAChC,cAAM,UAAU,cAAc,OAAO,QAAQ,MAAM,WAAW;AAC9D,YAAI,SAAS;AACX,gBAAM,SAAS,MAAM;AACrB,+BAAqB,UAAU;AAC/B,iBAAO,MAAM;AAAA,QACf;AAAA,MACF;AAAA,MACA,QAAQ,OAA0C;AAChD,uBAAe,UAAU,MAAM,cAAc;AAC7C,YAAI,qBAAqB,SAAS;AAChC,+BAAqB,UAAU;AAC/B;AAAA,QACF;AACA,YAAI,KAAM,eAAc,OAAO,iBAAiB,MAAM,WAAW;AAAA,MACnE;AAAA,IACF;AAAA,IACA,UAAU,SAAS;AACjB,iBAAW,UAAU;AAAA,IACvB;AAAA,IACA;AAAA,IACA,aAAa;AACX,oBAAc,MAAM,eAAe;AAAA,IACrC;AAAA,IACA,IAAI,cAAc;AAChB,aAAO,eAAe;AAAA,IACxB;AAAA,EACF;AACF;","names":[]}

package/dist/core/use-popover.d.ts

@@ -0,0 +1,20 @@
+import type { ButtonHTMLAttributes, HTMLAttributes, RefCallback } from "react";
+import { type UseControllableOpenChangeOptions } from "./use-controllable-open-change.js";
+export type PopoverMode = "auto" | "manual" | "hint";
+export type PopoverChangeHandler = UseControllableOpenChangeOptions["onOpenChange"];
+export interface UsePopoverOptions extends UseControllableOpenChangeOptions {
+    readonly mode?: PopoverMode;
+}
+export interface UsePopoverReturn {
+    readonly close: () => void;
+    readonly isNative: boolean;
+    readonly open: boolean;
+    readonly openPopover: () => void;
+    readonly popupProps: HTMLAttributes<HTMLElement>;
+    readonly popupRef: RefCallback<HTMLElement>;
+    readonly toggle: () => void;
+    readonly triggerProps: ButtonHTMLAttributes<HTMLButtonElement>;
+    readonly triggerRef: RefCallback<HTMLButtonElement>;
+}
+export declare function usePopover({ defaultOpen, mode, onOpenChange, open: controlledOpen, }?: UsePopoverOptions): UsePopoverReturn;
+//# sourceMappingURL=use-popover.d.ts.map

package/dist/core/use-popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-popover.d.ts","sourceRoot":"","sources":["../../src/core/use-popover.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,oBAAoB,EACpB,cAAc,EAEd,WAAW,EACZ,MAAM,OAAO,CAAC;AAGf,OAAO,EAEL,KAAK,gCAAgC,EACtC,MAAM,mCAAmC,CAAC;AAE3C,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AACrD,MAAM,MAAM,oBAAoB,GAAG,gCAAgC,CAAC,cAAc,CAAC,CAAC;AAEpF,MAAM,WAAW,iBAAkB,SAAQ,gCAAgC;IACzE,QAAQ,CAAC,IAAI,CAAC,EAAE,WAAW,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,WAAW,EAAE,MAAM,IAAI,CAAC;IACjC,QAAQ,CAAC,UAAU,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IACjD,QAAQ,CAAC,QAAQ,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAC5C,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,CAAC,YAAY,EAAE,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;IAC/D,QAAQ,CAAC,UAAU,EAAE,WAAW,CAAC,iBAAiB,CAAC,CAAC;CACrD;AAMD,wBAAgB,UAAU,CAAC,EACzB,WAAmB,EACnB,IAAa,EACb,YAAY,EACZ,IAAI,EAAE,cAAc,GACrB,GAAE,iBAAsB,GAAG,gBAAgB,CAqE3C"}

package/dist/core/use-popover.js

@@ -0,0 +1,80 @@
+"use client";
+import { useRef, useState, useSyncExternalStore } from "react";
+import { useId, useIsomorphicLayoutEffect } from "@gunkin/uiify/hooks";
+import { supportsPopover } from "./platform.js";
+import {
+  useControllableOpenChange
+} from "./use-controllable-open-change.js";
+function usePopover({
+  defaultOpen = false,
+  mode = "auto",
+  onOpenChange,
+  open: controlledOpen
+} = {}) {
+  const id = useId();
+  const [popup, setPopup] = useState(null);
+  const { open, requestChange } = useControllableOpenChange({
+    defaultOpen,
+    onOpenChange,
+    open: controlledOpen
+  });
+  const openRef = useRef(open);
+  openRef.current = open;
+  const isNative = useSyncExternalStore(
+    () => () => {
+    },
+    () => supportsPopover(),
+    () => true
+  );
+  useIsomorphicLayoutEffect(() => {
+    if (!popup || !isNative) return;
+    const onBeforeToggle = (event) => {
+      const next = event.newState === "open";
+      if (next !== openRef.current && !requestChange(next, "native-toggle", event)) {
+        event.preventDefault();
+      }
+    };
+    popup.addEventListener("beforetoggle", onBeforeToggle);
+    return () => popup.removeEventListener("beforetoggle", onBeforeToggle);
+  }, [isNative, popup, requestChange]);
+  useIsomorphicLayoutEffect(() => {
+    if (!popup || !isNative) return;
+    try {
+      if (open && !popup.matches(":popover-open")) popup.showPopover();
+      if (!open && popup.matches(":popover-open")) popup.hidePopover();
+    } catch {
+    }
+  }, [isNative, open, popup]);
+  const triggerProps = {
+    "aria-controls": id,
+    "aria-expanded": open,
+    onClick(event) {
+      if (!isNative) requestChange(!open, "trigger-press", event.nativeEvent);
+    },
+    type: "button",
+    ...isNative ? { command: "toggle-popover", commandfor: id } : {}
+  };
+  const popupProps = {
+    "data-native": isNative ? "" : void 0,
+    hidden: isNative ? void 0 : !open,
+    id,
+    ...isNative ? { popover: mode } : {},
+    ...isNative && open ? { open: true } : {}
+  };
+  return {
+    close: () => requestChange(false, "programmatic"),
+    isNative,
+    open,
+    openPopover: () => requestChange(true, "programmatic"),
+    popupProps,
+    popupRef: setPopup,
+    toggle: () => requestChange(!open, "programmatic"),
+    triggerProps,
+    triggerRef() {
+    }
+  };
+}
+export {
+  usePopover
+};
+//# sourceMappingURL=use-popover.js.map

package/dist/core/use-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/core/use-popover.ts"],"sourcesContent":["\"use client\";\n\nimport { useRef, useState, useSyncExternalStore } from \"react\";\nimport type {\n  ButtonHTMLAttributes,\n  HTMLAttributes,\n  MouseEvent as ReactMouseEvent,\n  RefCallback,\n} from \"react\";\nimport { useId, useIsomorphicLayoutEffect } from \"@gunkin/uiify/hooks\";\nimport { supportsPopover } from \"./platform.js\";\nimport {\n  useControllableOpenChange,\n  type UseControllableOpenChangeOptions,\n} from \"./use-controllable-open-change.js\";\n\nexport type PopoverMode = \"auto\" | \"manual\" | \"hint\";\nexport type PopoverChangeHandler = UseControllableOpenChangeOptions[\"onOpenChange\"];\n\nexport interface UsePopoverOptions extends UseControllableOpenChangeOptions {\n  readonly mode?: PopoverMode;\n}\n\nexport interface UsePopoverReturn {\n  readonly close: () => void;\n  readonly isNative: boolean;\n  readonly open: boolean;\n  readonly openPopover: () => void;\n  readonly popupProps: HTMLAttributes<HTMLElement>;\n  readonly popupRef: RefCallback<HTMLElement>;\n  readonly toggle: () => void;\n  readonly triggerProps: ButtonHTMLAttributes<HTMLButtonElement>;\n  readonly triggerRef: RefCallback<HTMLButtonElement>;\n}\n\ninterface ToggleEventLike extends Event {\n  readonly newState?: \"closed\" | \"open\";\n}\n\nexport function usePopover({\n  defaultOpen = false,\n  mode = \"auto\",\n  onOpenChange,\n  open: controlledOpen,\n}: UsePopoverOptions = {}): UsePopoverReturn {\n  const id = useId();\n  const [popup, setPopup] = useState<HTMLElement | null>(null);\n  const { open, requestChange } = useControllableOpenChange({\n    defaultOpen,\n    onOpenChange,\n    open: controlledOpen,\n  });\n  const openRef = useRef(open);\n  openRef.current = open;\n  // SSR markup matches the initial open state so pre-hydration toggling works.\n  const isNative = useSyncExternalStore(\n    () => () => {},\n    () => supportsPopover(),\n    () => true,\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!popup || !isNative) return;\n\n    const onBeforeToggle = (event: Event) => {\n      const next = (event as ToggleEventLike).newState === \"open\";\n      if (next !== openRef.current && !requestChange(next, \"native-toggle\", event)) {\n        event.preventDefault();\n      }\n    };\n    popup.addEventListener(\"beforetoggle\", onBeforeToggle);\n    return () => popup.removeEventListener(\"beforetoggle\", onBeforeToggle);\n  }, [isNative, popup, requestChange]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!popup || !isNative) return;\n    try {\n      if (open && !popup.matches(\":popover-open\")) popup.showPopover();\n      if (!open && popup.matches(\":popover-open\")) popup.hidePopover();\n    } catch {\n      // The node may have disconnected between render and layout effect.\n    }\n  }, [isNative, open, popup]);\n\n  const triggerProps = {\n    \"aria-controls\": id,\n    \"aria-expanded\": open,\n    onClick(event: ReactMouseEvent<HTMLButtonElement>) {\n      if (!isNative) requestChange(!open, \"trigger-press\", event.nativeEvent);\n    },\n    type: \"button\",\n    ...(isNative ? { command: \"toggle-popover\", commandfor: id } : {}),\n  } as ButtonHTMLAttributes<HTMLButtonElement>;\n\n  const popupProps = {\n    \"data-native\": isNative ? \"\" : undefined,\n    hidden: isNative ? undefined : !open,\n    id,\n    ...(isNative ? { popover: mode } : {}),\n    ...(isNative && open ? { open: true } : {}),\n  } as HTMLAttributes<HTMLElement>;\n\n  return {\n    close: () => requestChange(false, \"programmatic\"),\n    isNative,\n    open,\n    openPopover: () => requestChange(true, \"programmatic\"),\n    popupProps,\n    popupRef: setPopup,\n    toggle: () => requestChange(!open, \"programmatic\"),\n    triggerProps,\n    triggerRef() {},\n  };\n}\n"],"mappings":";AAEA,SAAS,QAAQ,UAAU,4BAA4B;AAOvD,SAAS,OAAO,iCAAiC;AACjD,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,OAEK;AAyBA,SAAS,WAAW;AAAA,EACzB,cAAc;AAAA,EACd,OAAO;AAAA,EACP;AAAA,EACA,MAAM;AACR,IAAuB,CAAC,GAAqB;AAC3C,QAAM,KAAK,MAAM;AACjB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA6B,IAAI;AAC3D,QAAM,EAAE,MAAM,cAAc,IAAI,0BAA0B;AAAA,IACxD;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACR,CAAC;AACD,QAAM,UAAU,OAAO,IAAI;AAC3B,UAAQ,UAAU;AAElB,QAAM,WAAW;AAAA,IACf,MAAM,MAAM;AAAA,IAAC;AAAA,IACb,MAAM,gBAAgB;AAAA,IACtB,MAAM;AAAA,EACR;AAEA,4BAA0B,MAAM;AAC9B,QAAI,CAAC,SAAS,CAAC,SAAU;AAEzB,UAAM,iBAAiB,CAAC,UAAiB;AACvC,YAAM,OAAQ,MAA0B,aAAa;AACrD,UAAI,SAAS,QAAQ,WAAW,CAAC,cAAc,MAAM,iBAAiB,KAAK,GAAG;AAC5E,cAAM,eAAe;AAAA,MACvB;AAAA,IACF;AACA,UAAM,iBAAiB,gBAAgB,cAAc;AACrD,WAAO,MAAM,MAAM,oBAAoB,gBAAgB,cAAc;AAAA,EACvE,GAAG,CAAC,UAAU,OAAO,aAAa,CAAC;AAEnC,4BAA0B,MAAM;AAC9B,QAAI,CAAC,SAAS,CAAC,SAAU;AACzB,QAAI;AACF,UAAI,QAAQ,CAAC,MAAM,QAAQ,eAAe,EAAG,OAAM,YAAY;AAC/D,UAAI,CAAC,QAAQ,MAAM,QAAQ,eAAe,EAAG,OAAM,YAAY;AAAA,IACjE,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAC,UAAU,MAAM,KAAK,CAAC;AAE1B,QAAM,eAAe;AAAA,IACnB,iBAAiB;AAAA,IACjB,iBAAiB;AAAA,IACjB,QAAQ,OAA2C;AACjD,UAAI,CAAC,SAAU,eAAc,CAAC,MAAM,iBAAiB,MAAM,WAAW;AAAA,IACxE;AAAA,IACA,MAAM;AAAA,IACN,GAAI,WAAW,EAAE,SAAS,kBAAkB,YAAY,GAAG,IAAI,CAAC;AAAA,EAClE;AAEA,QAAM,aAAa;AAAA,IACjB,eAAe,WAAW,KAAK;AAAA,IAC/B,QAAQ,WAAW,SAAY,CAAC;AAAA,IAChC;AAAA,IACA,GAAI,WAAW,EAAE,SAAS,KAAK,IAAI,CAAC;AAAA,IACpC,GAAI,YAAY,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;AAAA,EAC3C;AAEA,SAAO;AAAA,IACL,OAAO,MAAM,cAAc,OAAO,cAAc;AAAA,IAChD;AAAA,IACA;AAAA,IACA,aAAa,MAAM,cAAc,MAAM,cAAc;AAAA,IACrD;AAAA,IACA,UAAU;AAAA,IACV,QAAQ,MAAM,cAAc,CAAC,MAAM,cAAc;AAAA,IACjD;AAAA,IACA,aAAa;AAAA,IAAC;AAAA,EAChB;AACF;","names":[]}

package/dist/core/use-render-element.d.ts

@@ -0,0 +1,11 @@
+import type { ElementType, ReactElement } from "react";
+interface UseRenderElementOptions<TState> {
+    readonly as?: ElementType | undefined;
+    readonly defaultTag: ElementType;
+    readonly props: Record<string, unknown>;
+    readonly render?: ((props: Record<string, unknown>, state: TState) => ReactElement | null) | undefined;
+    readonly state: TState;
+}
+export declare function useRenderElement<TState>({ as, defaultTag, props, render, state, }: UseRenderElementOptions<TState>): ReactElement | null;
+export {};
+//# sourceMappingURL=use-render-element.d.ts.map