@cck-ui/hooks 0.22.0 → 0.23.0

package/cjs/index.cjs

@@ -1,10 +1,14 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_use_focus_trap = require("./use-focus-trap/use-focus-trap.cjs");
 const require_use_timeout_fn = require("./use-timeout-fn/use-timeout-fn.cjs");
 const require_use_clipboard = require("./use-clipboard/use-clipboard.cjs");
+const require_use_disclosure = require("./use-disclosure/use-disclosure.cjs");
 const require_use_id = require("./use-id/use-id.cjs");
 const require_use_isomorphic_effect = require("./use-isomorphic-effect/use-isomorphic-effect.cjs");
 const require_use_splitter = require("./use-splitter/use-splitter.cjs");
 exports.useClipboard = require_use_clipboard.useClipboard;
+exports.useDisclosure = require_use_disclosure.useDisclosure;
+exports.useFocusTrap = require_use_focus_trap.useFocusTrap;
 exports.useId = require_use_id.useId;
 exports.useIsomorphicEffect = require_use_isomorphic_effect.useIsomorphicEffect;
 exports.useSplitter = require_use_splitter.useSplitter;

package/cjs/use-disclosure/use-disclosure.cjs

@@ -0,0 +1,38 @@
+"use client";
+let vue = require("vue");
+//#region packages/@cck-ui/hooks/src/use-disclosure/use-disclosure.ts
+function useDisclosure(initialState = false, options = {}) {
+	const state = (0, vue.ref)((0, vue.toValue)(initialState));
+	const getOptions = () => (0, vue.toValue)(options);
+	const open = () => {
+		if (!state.value) {
+			getOptions().onOpen?.();
+			state.value = true;
+		}
+	};
+	const close = () => {
+		if (state.value) {
+			getOptions().onClose?.();
+			state.value = false;
+		}
+	};
+	const toggle = () => {
+		state.value ? close() : open();
+	};
+	const set = (value) => {
+		state.value = value;
+	};
+	return {
+		state,
+		handlers: {
+			open,
+			close,
+			toggle,
+			set
+		}
+	};
+}
+//#endregion
+exports.useDisclosure = useDisclosure;
+
+//# sourceMappingURL=use-disclosure.cjs.map

package/cjs/use-disclosure/use-disclosure.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-disclosure.cjs","names":[],"sources":["../../src/use-disclosure/use-disclosure.ts"],"sourcesContent":["import { MaybeRefOrGetter, ref, Ref, toValue } from 'vue'\n\nexport interface UseDisclosureOptions {\n  /**\n   * @description Callback invoked when the state becomes true\n   */\n  onOpen?: () => void\n  /**\n   * @description Callback invoked when the state becomes false\n   */\n  onClose?: () => void\n}\n\nexport interface UseDisclosureHandlers {\n  /**\n   * Directly set the state without triggering callbacks\n   * @param value - The target boolean value.\n   */\n  set: (value: boolean) => void\n\n  /** Open the state (no-op if already open) */\n  open: () => void\n\n  /** Close the state (no-op if already closed) */\n  close: () => void\n\n  /** Toggle the current state */\n  toggle: () => void\n}\n\nexport type UseDisclosureReturnValue = { state: Ref<boolean>; handlers: UseDisclosureHandlers }\n\nexport function useDisclosure(\n  initialState: MaybeRefOrGetter<boolean> = false,\n  options: MaybeRefOrGetter<UseDisclosureOptions> = {}\n): UseDisclosureReturnValue {\n  const state = ref(toValue(initialState))\n\n  const getOptions = () => toValue(options)\n\n  const open = () => {\n    if (!state.value) {\n      const opts = getOptions()\n      opts.onOpen?.()\n      state.value = true\n    }\n  }\n\n  const close = () => {\n    if (state.value) {\n      const opts = getOptions()\n      opts.onClose?.()\n      state.value = false\n    }\n  }\n\n  const toggle = () => {\n    state.value ? close() : open()\n  }\n\n  const set = (value: boolean) => {\n    state.value = value\n  }\n\n  return {\n    state,\n    handlers: {\n      open,\n      close,\n      toggle,\n      set,\n    },\n  }\n}\n"],"mappings":";;;AAgCA,SAAgB,cACd,eAA0C,OAC1C,UAAkD,CAAC,GACzB;CAC1B,MAAM,SAAA,GAAA,IAAA,IAAA,EAAA,GAAA,IAAA,QAAA,CAAoB,YAAY,CAAC;CAEvC,MAAM,oBAAA,GAAA,IAAA,QAAA,CAA2B,OAAO;CAExC,MAAM,aAAa;EACjB,IAAI,CAAC,MAAM,OAAO;GAEhB,WAAG,CAAC,CAAC,SAAS;GACd,MAAM,QAAQ;EAChB;CACF;CAEA,MAAM,cAAc;EAClB,IAAI,MAAM,OAAO;GAEf,WAAG,CAAC,CAAC,UAAU;GACf,MAAM,QAAQ;EAChB;CACF;CAEA,MAAM,eAAe;EACnB,MAAM,QAAQ,MAAM,IAAI,KAAK;CAC/B;CAEA,MAAM,OAAO,UAAmB;EAC9B,MAAM,QAAQ;CAChB;CAEA,OAAO;EACL;EACA,UAAU;GACR;GACA;GACA;GACA;EACF;CACF;AACF"}

package/cjs/use-focus-trap/tabbable.cjs

@@ -0,0 +1,62 @@
+"use client";
+//#region packages/@cck-ui/hooks/src/use-focus-trap/tabbable.ts
+const FOCUS_SELECTOR = "a, input, select, textarea, button, object, [tabindex]";
+function hidden(element) {
+	if (process.env.NODE_ENV === "test") return false;
+	return element.style.display === "none";
+}
+function visible(element) {
+	if (element.getAttribute("aria-hidden") || element.getAttribute("hidden") || element.getAttribute("type") === "hidden") return false;
+	let parent = element;
+	while (parent) {
+		if (parent === document.body || parent.nodeType === 11) break;
+		if (hidden(parent)) return false;
+		parent = parent.parentNode;
+	}
+	return true;
+}
+function getElementTabIndex(element) {
+	const tabIndex = element.getAttribute("tabindex");
+	return tabIndex === null ? NaN : parseInt(tabIndex, 10);
+}
+function focusable(element) {
+	const nodeName = element.nodeName.toLowerCase();
+	const isTabIndexNotNaN = !Number.isNaN(getElementTabIndex(element));
+	return ([
+		"input",
+		"select",
+		"textarea",
+		"button",
+		"object"
+	].includes(nodeName) && !element.disabled || (element instanceof HTMLAnchorElement ? element.href || isTabIndexNotNaN : isTabIndexNotNaN)) && visible(element);
+}
+function tabbable(element) {
+	const tabIndex = getElementTabIndex(element);
+	return (Number.isNaN(tabIndex) || tabIndex >= 0) && focusable(element);
+}
+function findTabbableDescendants(element) {
+	return Array.from(element.querySelectorAll(FOCUS_SELECTOR)).filter(tabbable);
+}
+function scopeTab(node, event) {
+	const tabbableElements = findTabbableDescendants(node);
+	if (!tabbableElements.length) {
+		event.preventDefault();
+		return;
+	}
+	const finalElement = tabbableElements[event.shiftKey ? 0 : tabbableElements.length - 1];
+	const root = node.getRootNode();
+	let leavingFinal = finalElement === root.activeElement || node === root.activeElement;
+	const activeEl = root.activeElement;
+	if (activeEl.tagName === "INPUT" && activeEl.getAttribute("type") === "radio") leavingFinal = tabbableElements.filter((el) => el.getAttribute("type") === "radio" && el.getAttribute("name") === activeEl.getAttribute("name")).includes(finalElement);
+	if (!leavingFinal) return;
+	event.preventDefault();
+	tabbableElements[event.shiftKey ? tabbableElements.length - 1 : 0]?.focus();
+}
+//#endregion
+exports.FOCUS_SELECTOR = FOCUS_SELECTOR;
+exports.findTabbableDescendants = findTabbableDescendants;
+exports.focusable = focusable;
+exports.scopeTab = scopeTab;
+exports.tabbable = tabbable;
+
+//# sourceMappingURL=tabbable.cjs.map

package/cjs/use-focus-trap/tabbable.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabbable.cjs","names":[],"sources":["../../src/use-focus-trap/tabbable.ts"],"sourcesContent":["export const FOCUS_SELECTOR = 'a, input, select, textarea, button, object, [tabindex]'\n\nfunction hidden(element: HTMLElement) {\n  if (process.env.NODE_ENV === 'test') {\n    return false\n  }\n  return element.style.display === 'none'\n}\n\nfunction visible(element: HTMLElement) {\n  const isHidden =\n    element.getAttribute('aria-hidden') ||\n    element.getAttribute('hidden') ||\n    element.getAttribute('type') === 'hidden'\n  if (isHidden) {\n    return false\n  }\n  let parent: HTMLElement | null = element\n  while (parent) {\n    if (parent === document.body || parent.nodeType === 11) {\n      break\n    }\n    if (hidden(parent)) {\n      return false\n    }\n    parent = parent.parentNode as HTMLElement\n  }\n  return true\n}\n\nfunction getElementTabIndex(element: HTMLElement) {\n  const tabIndex = element.getAttribute('tabindex')\n  return tabIndex === null ? NaN : parseInt(tabIndex, 10)\n}\n\nexport function focusable(element: HTMLElement) {\n  const nodeName = element.nodeName.toLowerCase()\n  const isTabIndexNotNaN = !Number.isNaN(getElementTabIndex(element))\n  const res =\n    (['input', 'select', 'textarea', 'button', 'object'].includes(nodeName) &&\n      !(element as HTMLButtonElement).disabled) ||\n    (element instanceof HTMLAnchorElement ? element.href || isTabIndexNotNaN : isTabIndexNotNaN)\n  return res && visible(element)\n}\n\nexport function tabbable(element: HTMLElement) {\n  const tabIndex = getElementTabIndex(element)\n  const isTabIndexNaN = Number.isNaN(tabIndex)\n  return (isTabIndexNaN || tabIndex >= 0) && focusable(element)\n}\n\nexport function findTabbableDescendants(element: HTMLElement): HTMLElement[] {\n  return Array.from(element.querySelectorAll<HTMLElement>(FOCUS_SELECTOR)).filter(tabbable)\n}\n\nexport function scopeTab(node: HTMLElement, event: KeyboardEvent) {\n  const tabbableElements = findTabbableDescendants(node)\n  if (!tabbableElements.length) {\n    event.preventDefault()\n    return\n  }\n  const finalElement = tabbableElements[event.shiftKey ? 0 : tabbableElements.length - 1]\n  const root = node.getRootNode() as unknown as DocumentOrShadowRoot\n  let leavingFinal = finalElement === root.activeElement || node === root.activeElement\n\n  const activeEl = root.activeElement as Element\n  const isRadio = activeEl.tagName === 'INPUT' && activeEl.getAttribute('type') === 'radio'\n  if (isRadio) {\n    const radioGroup = tabbableElements.filter(\n      (el) =>\n        el.getAttribute('type') === 'radio' &&\n        el.getAttribute('name') === activeEl.getAttribute('name')\n    )\n    leavingFinal = radioGroup.includes(finalElement)\n  }\n\n  if (!leavingFinal) {\n    return\n  }\n\n  event.preventDefault()\n  const target = tabbableElements[event.shiftKey ? tabbableElements.length - 1 : 0]\n  target?.focus()\n}\n"],"mappings":";;AAAA,MAAa,iBAAiB;AAE9B,SAAS,OAAO,SAAsB;CACpC,IAAI,QAAQ,IAAI,aAAa,QAC3B,OAAO;CAET,OAAO,QAAQ,MAAM,YAAY;AACnC;AAEA,SAAS,QAAQ,SAAsB;CAKrC,IAHE,QAAQ,aAAa,aAAa,KAClC,QAAQ,aAAa,QAAQ,KAC7B,QAAQ,aAAa,MAAM,MAAM,UAEjC,OAAO;CAET,IAAI,SAA6B;CACjC,OAAO,QAAQ;EACb,IAAI,WAAW,SAAS,QAAQ,OAAO,aAAa,IAClD;EAEF,IAAI,OAAO,MAAM,GACf,OAAO;EAET,SAAS,OAAO;CAClB;CACA,OAAO;AACT;AAEA,SAAS,mBAAmB,SAAsB;CAChD,MAAM,WAAW,QAAQ,aAAa,UAAU;CAChD,OAAO,aAAa,OAAO,MAAM,SAAS,UAAU,EAAE;AACxD;AAEA,SAAgB,UAAU,SAAsB;CAC9C,MAAM,WAAW,QAAQ,SAAS,YAAY;CAC9C,MAAM,mBAAmB,CAAC,OAAO,MAAM,mBAAmB,OAAO,CAAC;CAKlE,QAHG;EAAC;EAAS;EAAU;EAAY;EAAU;CAAQ,CAAC,CAAC,SAAS,QAAQ,KACpE,CAAE,QAA8B,aACjC,mBAAmB,oBAAoB,QAAQ,QAAQ,mBAAmB,sBAC/D,QAAQ,OAAO;AAC/B;AAEA,SAAgB,SAAS,SAAsB;CAC7C,MAAM,WAAW,mBAAmB,OAAO;CAE3C,QADsB,OAAO,MAAM,QACf,KAAK,YAAY,MAAM,UAAU,OAAO;AAC9D;AAEA,SAAgB,wBAAwB,SAAqC;CAC3E,OAAO,MAAM,KAAK,QAAQ,iBAA8B,cAAc,CAAC,CAAC,CAAC,OAAO,QAAQ;AAC1F;AAEA,SAAgB,SAAS,MAAmB,OAAsB;CAChE,MAAM,mBAAmB,wBAAwB,IAAI;CACrD,IAAI,CAAC,iBAAiB,QAAQ;EAC5B,MAAM,eAAe;EACrB;CACF;CACA,MAAM,eAAe,iBAAiB,MAAM,WAAW,IAAI,iBAAiB,SAAS;CACrF,MAAM,OAAO,KAAK,YAAY;CAC9B,IAAI,eAAe,iBAAiB,KAAK,iBAAiB,SAAS,KAAK;CAExE,MAAM,WAAW,KAAK;CAEtB,IADgB,SAAS,YAAY,WAAW,SAAS,aAAa,MAAM,MAAM,SAOhF,eALmB,iBAAiB,QACjC,OACC,GAAG,aAAa,MAAM,MAAM,WAC5B,GAAG,aAAa,MAAM,MAAM,SAAS,aAAa,MAAM,CAEpC,CAAC,CAAC,SAAS,YAAY;CAGjD,IAAI,CAAC,cACH;CAGF,MAAM,eAAe;CAErB,iBADgC,MAAM,WAAW,iBAAiB,SAAS,IAAI,EACzE,EAAE,MAAM;AAChB"}

package/cjs/use-focus-trap/use-focus-trap.cjs

@@ -0,0 +1,50 @@
+"use client";
+const require_tabbable = require("./tabbable.cjs");
+let vue = require("vue");
+//#region packages/@cck-ui/hooks/src/use-focus-trap/use-focus-trap.ts
+function useFocusTrap(active = true) {
+	const trapRef = (0, vue.shallowRef)(null);
+	let cleanup = null;
+	const focusNode = (node) => {
+		let focusElement = node.querySelector("[data-autofocus]");
+		if (!focusElement) {
+			const children = Array.from(node.querySelectorAll(require_tabbable.FOCUS_SELECTOR));
+			focusElement = children.find(require_tabbable.tabbable) || children.find(require_tabbable.focusable) || null;
+			if (!focusElement && require_tabbable.focusable(node)) focusElement = node;
+		}
+		if (focusElement) focusElement.focus({ preventScroll: true });
+		else if (process.env.NODE_ENV === "development") console.warn("[CCK-UI/hooks/use-focus-trap] No focusable element found", node);
+	};
+	const activate = (node) => {
+		(0, vue.nextTick)(() => focusNode(node));
+		const handler = (event) => {
+			if (event.key === "Tab") require_tabbable.scopeTab(node, event);
+		};
+		document.addEventListener("keydown", handler);
+		return () => document.removeEventListener("keydown", handler);
+	};
+	const deactivate = () => {
+		if (cleanup) {
+			cleanup();
+			cleanup = null;
+		}
+	};
+	(0, vue.watchEffect)((onCleanup) => {
+		if (!(0, vue.toValue)(active)) {
+			deactivate();
+			return;
+		}
+		const node = trapRef.value;
+		if (node) {
+			deactivate();
+			cleanup = activate(node);
+		}
+		onCleanup(() => deactivate());
+	});
+	(0, vue.onBeforeUnmount)(deactivate);
+	return trapRef;
+}
+//#endregion
+exports.useFocusTrap = useFocusTrap;
+
+//# sourceMappingURL=use-focus-trap.cjs.map

package/cjs/use-focus-trap/use-focus-trap.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-focus-trap.cjs","names":["FOCUS_SELECTOR","tabbable","focusable"],"sources":["../../src/use-focus-trap/use-focus-trap.ts"],"sourcesContent":["import { MaybeRefOrGetter, nextTick, onBeforeUnmount, shallowRef, toValue, watchEffect } from 'vue'\nimport { FOCUS_SELECTOR, focusable, scopeTab, tabbable } from './tabbable'\n\nexport function useFocusTrap(active: MaybeRefOrGetter<boolean> = true) {\n  const trapRef = shallowRef<HTMLElement | null>(null)\n  let cleanup: (() => void) | null = null\n\n  const focusNode = (node: HTMLElement) => {\n    let focusElement: HTMLElement | null = node.querySelector('[data-autofocus]')\n    if (!focusElement) {\n      const children = Array.from(node.querySelectorAll<HTMLElement>(FOCUS_SELECTOR))\n      focusElement = children.find(tabbable) || children.find(focusable) || null\n      if (!focusElement && focusable(node)) {\n        focusElement = node\n      }\n    }\n    if (focusElement) {\n      focusElement.focus({ preventScroll: true })\n    } else if (process.env.NODE_ENV === 'development') {\n      console.warn('[CCK-UI/hooks/use-focus-trap] No focusable element found', node)\n    }\n  }\n\n  const activate = (node: HTMLElement) => {\n    nextTick(() => focusNode(node))\n    const handler = (event: KeyboardEvent) => {\n      if (event.key === 'Tab') {\n        scopeTab(node, event)\n      }\n    }\n    document.addEventListener('keydown', handler)\n    return () => document.removeEventListener('keydown', handler)\n  }\n\n  const deactivate = () => {\n    if (cleanup) {\n      cleanup()\n      cleanup = null\n    }\n  }\n\n  watchEffect((onCleanup) => {\n    const isActive = toValue(active)\n    if (!isActive) {\n      deactivate()\n      return\n    }\n    const node = trapRef.value\n    if (node) {\n      deactivate()\n      cleanup = activate(node)\n    }\n    onCleanup(() => deactivate())\n  })\n\n  onBeforeUnmount(deactivate)\n\n  return trapRef\n}\n"],"mappings":";;;;AAGA,SAAgB,aAAa,SAAoC,MAAM;CACrE,MAAM,WAAA,GAAA,IAAA,WAAA,CAAyC,IAAI;CACnD,IAAI,UAA+B;CAEnC,MAAM,aAAa,SAAsB;EACvC,IAAI,eAAmC,KAAK,cAAc,kBAAkB;EAC5E,IAAI,CAAC,cAAc;GACjB,MAAM,WAAW,MAAM,KAAK,KAAK,iBAA8BA,iBAAAA,cAAc,CAAC;GAC9E,eAAe,SAAS,KAAKC,iBAAAA,QAAQ,KAAK,SAAS,KAAKC,iBAAAA,SAAS,KAAK;GACtE,IAAI,CAAC,gBAAgBA,iBAAAA,UAAU,IAAI,GACjC,eAAe;EAEnB;EACA,IAAI,cACF,aAAa,MAAM,EAAE,eAAe,KAAK,CAAC;OACrC,IAAI,QAAQ,IAAI,aAAa,eAClC,QAAQ,KAAK,4DAA4D,IAAI;CAEjF;CAEA,MAAM,YAAY,SAAsB;EACtC,CAAA,GAAA,IAAA,SAAA,OAAe,UAAU,IAAI,CAAC;EAC9B,MAAM,WAAW,UAAyB;GACxC,IAAI,MAAM,QAAQ,OAChB,iBAAA,SAAS,MAAM,KAAK;EAExB;EACA,SAAS,iBAAiB,WAAW,OAAO;EAC5C,aAAa,SAAS,oBAAoB,WAAW,OAAO;CAC9D;CAEA,MAAM,mBAAmB;EACvB,IAAI,SAAS;GACX,QAAQ;GACR,UAAU;EACZ;CACF;CAEA,CAAA,GAAA,IAAA,YAAA,EAAa,cAAc;EAEzB,IAAI,EAAA,GAAA,IAAA,QAAA,CADqB,MACb,GAAG;GACb,WAAW;GACX;EACF;EACA,MAAM,OAAO,QAAQ;EACrB,IAAI,MAAM;GACR,WAAW;GACX,UAAU,SAAS,IAAI;EACzB;EACA,gBAAgB,WAAW,CAAC;CAC9B,CAAC;CAED,CAAA,GAAA,IAAA,gBAAA,CAAgB,UAAU;CAE1B,OAAO;AACT"}

package/esm/index.mjs

@@ -1,6 +1,8 @@
+import { useFocusTrap } from "./use-focus-trap/use-focus-trap.mjs";
 import { useTimeoutFn } from "./use-timeout-fn/use-timeout-fn.mjs";
 import { useClipboard } from "./use-clipboard/use-clipboard.mjs";
+import { useDisclosure } from "./use-disclosure/use-disclosure.mjs";
 import { useId } from "./use-id/use-id.mjs";
 import { useIsomorphicEffect } from "./use-isomorphic-effect/use-isomorphic-effect.mjs";
 import { useSplitter } from "./use-splitter/use-splitter.mjs";
-export { useClipboard, useId, useIsomorphicEffect, useSplitter, useTimeoutFn };
+export { useClipboard, useDisclosure, useFocusTrap, useId, useIsomorphicEffect, useSplitter, useTimeoutFn };

package/esm/use-disclosure/use-disclosure.mjs

@@ -0,0 +1,38 @@
+"use client";
+import { ref, toValue } from "vue";
+//#region packages/@cck-ui/hooks/src/use-disclosure/use-disclosure.ts
+function useDisclosure(initialState = false, options = {}) {
+	const state = ref(toValue(initialState));
+	const getOptions = () => toValue(options);
+	const open = () => {
+		if (!state.value) {
+			getOptions().onOpen?.();
+			state.value = true;
+		}
+	};
+	const close = () => {
+		if (state.value) {
+			getOptions().onClose?.();
+			state.value = false;
+		}
+	};
+	const toggle = () => {
+		state.value ? close() : open();
+	};
+	const set = (value) => {
+		state.value = value;
+	};
+	return {
+		state,
+		handlers: {
+			open,
+			close,
+			toggle,
+			set
+		}
+	};
+}
+//#endregion
+export { useDisclosure };
+
+//# sourceMappingURL=use-disclosure.mjs.map

package/esm/use-disclosure/use-disclosure.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-disclosure.mjs","names":[],"sources":["../../src/use-disclosure/use-disclosure.ts"],"sourcesContent":["import { MaybeRefOrGetter, ref, Ref, toValue } from 'vue'\n\nexport interface UseDisclosureOptions {\n  /**\n   * @description Callback invoked when the state becomes true\n   */\n  onOpen?: () => void\n  /**\n   * @description Callback invoked when the state becomes false\n   */\n  onClose?: () => void\n}\n\nexport interface UseDisclosureHandlers {\n  /**\n   * Directly set the state without triggering callbacks\n   * @param value - The target boolean value.\n   */\n  set: (value: boolean) => void\n\n  /** Open the state (no-op if already open) */\n  open: () => void\n\n  /** Close the state (no-op if already closed) */\n  close: () => void\n\n  /** Toggle the current state */\n  toggle: () => void\n}\n\nexport type UseDisclosureReturnValue = { state: Ref<boolean>; handlers: UseDisclosureHandlers }\n\nexport function useDisclosure(\n  initialState: MaybeRefOrGetter<boolean> = false,\n  options: MaybeRefOrGetter<UseDisclosureOptions> = {}\n): UseDisclosureReturnValue {\n  const state = ref(toValue(initialState))\n\n  const getOptions = () => toValue(options)\n\n  const open = () => {\n    if (!state.value) {\n      const opts = getOptions()\n      opts.onOpen?.()\n      state.value = true\n    }\n  }\n\n  const close = () => {\n    if (state.value) {\n      const opts = getOptions()\n      opts.onClose?.()\n      state.value = false\n    }\n  }\n\n  const toggle = () => {\n    state.value ? close() : open()\n  }\n\n  const set = (value: boolean) => {\n    state.value = value\n  }\n\n  return {\n    state,\n    handlers: {\n      open,\n      close,\n      toggle,\n      set,\n    },\n  }\n}\n"],"mappings":";;;AAgCA,SAAgB,cACd,eAA0C,OAC1C,UAAkD,CAAC,GACzB;CAC1B,MAAM,QAAQ,IAAI,QAAQ,YAAY,CAAC;CAEvC,MAAM,mBAAmB,QAAQ,OAAO;CAExC,MAAM,aAAa;EACjB,IAAI,CAAC,MAAM,OAAO;GAEhB,WAAG,CAAC,CAAC,SAAS;GACd,MAAM,QAAQ;EAChB;CACF;CAEA,MAAM,cAAc;EAClB,IAAI,MAAM,OAAO;GAEf,WAAG,CAAC,CAAC,UAAU;GACf,MAAM,QAAQ;EAChB;CACF;CAEA,MAAM,eAAe;EACnB,MAAM,QAAQ,MAAM,IAAI,KAAK;CAC/B;CAEA,MAAM,OAAO,UAAmB;EAC9B,MAAM,QAAQ;CAChB;CAEA,OAAO;EACL;EACA,UAAU;GACR;GACA;GACA;GACA;EACF;CACF;AACF"}

package/esm/use-focus-trap/tabbable.mjs

@@ -0,0 +1,57 @@
+"use client";
+//#region packages/@cck-ui/hooks/src/use-focus-trap/tabbable.ts
+const FOCUS_SELECTOR = "a, input, select, textarea, button, object, [tabindex]";
+function hidden(element) {
+	return element.style.display === "none";
+}
+function visible(element) {
+	if (element.getAttribute("aria-hidden") || element.getAttribute("hidden") || element.getAttribute("type") === "hidden") return false;
+	let parent = element;
+	while (parent) {
+		if (parent === document.body || parent.nodeType === 11) break;
+		if (hidden(parent)) return false;
+		parent = parent.parentNode;
+	}
+	return true;
+}
+function getElementTabIndex(element) {
+	const tabIndex = element.getAttribute("tabindex");
+	return tabIndex === null ? NaN : parseInt(tabIndex, 10);
+}
+function focusable(element) {
+	const nodeName = element.nodeName.toLowerCase();
+	const isTabIndexNotNaN = !Number.isNaN(getElementTabIndex(element));
+	return ([
+		"input",
+		"select",
+		"textarea",
+		"button",
+		"object"
+	].includes(nodeName) && !element.disabled || (element instanceof HTMLAnchorElement ? element.href || isTabIndexNotNaN : isTabIndexNotNaN)) && visible(element);
+}
+function tabbable(element) {
+	const tabIndex = getElementTabIndex(element);
+	return (Number.isNaN(tabIndex) || tabIndex >= 0) && focusable(element);
+}
+function findTabbableDescendants(element) {
+	return Array.from(element.querySelectorAll(FOCUS_SELECTOR)).filter(tabbable);
+}
+function scopeTab(node, event) {
+	const tabbableElements = findTabbableDescendants(node);
+	if (!tabbableElements.length) {
+		event.preventDefault();
+		return;
+	}
+	const finalElement = tabbableElements[event.shiftKey ? 0 : tabbableElements.length - 1];
+	const root = node.getRootNode();
+	let leavingFinal = finalElement === root.activeElement || node === root.activeElement;
+	const activeEl = root.activeElement;
+	if (activeEl.tagName === "INPUT" && activeEl.getAttribute("type") === "radio") leavingFinal = tabbableElements.filter((el) => el.getAttribute("type") === "radio" && el.getAttribute("name") === activeEl.getAttribute("name")).includes(finalElement);
+	if (!leavingFinal) return;
+	event.preventDefault();
+	tabbableElements[event.shiftKey ? tabbableElements.length - 1 : 0]?.focus();
+}
+//#endregion
+export { FOCUS_SELECTOR, findTabbableDescendants, focusable, scopeTab, tabbable };
+
+//# sourceMappingURL=tabbable.mjs.map

package/esm/use-focus-trap/tabbable.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabbable.mjs","names":[],"sources":["../../src/use-focus-trap/tabbable.ts"],"sourcesContent":["export const FOCUS_SELECTOR = 'a, input, select, textarea, button, object, [tabindex]'\n\nfunction hidden(element: HTMLElement) {\n  if (process.env.NODE_ENV === 'test') {\n    return false\n  }\n  return element.style.display === 'none'\n}\n\nfunction visible(element: HTMLElement) {\n  const isHidden =\n    element.getAttribute('aria-hidden') ||\n    element.getAttribute('hidden') ||\n    element.getAttribute('type') === 'hidden'\n  if (isHidden) {\n    return false\n  }\n  let parent: HTMLElement | null = element\n  while (parent) {\n    if (parent === document.body || parent.nodeType === 11) {\n      break\n    }\n    if (hidden(parent)) {\n      return false\n    }\n    parent = parent.parentNode as HTMLElement\n  }\n  return true\n}\n\nfunction getElementTabIndex(element: HTMLElement) {\n  const tabIndex = element.getAttribute('tabindex')\n  return tabIndex === null ? NaN : parseInt(tabIndex, 10)\n}\n\nexport function focusable(element: HTMLElement) {\n  const nodeName = element.nodeName.toLowerCase()\n  const isTabIndexNotNaN = !Number.isNaN(getElementTabIndex(element))\n  const res =\n    (['input', 'select', 'textarea', 'button', 'object'].includes(nodeName) &&\n      !(element as HTMLButtonElement).disabled) ||\n    (element instanceof HTMLAnchorElement ? element.href || isTabIndexNotNaN : isTabIndexNotNaN)\n  return res && visible(element)\n}\n\nexport function tabbable(element: HTMLElement) {\n  const tabIndex = getElementTabIndex(element)\n  const isTabIndexNaN = Number.isNaN(tabIndex)\n  return (isTabIndexNaN || tabIndex >= 0) && focusable(element)\n}\n\nexport function findTabbableDescendants(element: HTMLElement): HTMLElement[] {\n  return Array.from(element.querySelectorAll<HTMLElement>(FOCUS_SELECTOR)).filter(tabbable)\n}\n\nexport function scopeTab(node: HTMLElement, event: KeyboardEvent) {\n  const tabbableElements = findTabbableDescendants(node)\n  if (!tabbableElements.length) {\n    event.preventDefault()\n    return\n  }\n  const finalElement = tabbableElements[event.shiftKey ? 0 : tabbableElements.length - 1]\n  const root = node.getRootNode() as unknown as DocumentOrShadowRoot\n  let leavingFinal = finalElement === root.activeElement || node === root.activeElement\n\n  const activeEl = root.activeElement as Element\n  const isRadio = activeEl.tagName === 'INPUT' && activeEl.getAttribute('type') === 'radio'\n  if (isRadio) {\n    const radioGroup = tabbableElements.filter(\n      (el) =>\n        el.getAttribute('type') === 'radio' &&\n        el.getAttribute('name') === activeEl.getAttribute('name')\n    )\n    leavingFinal = radioGroup.includes(finalElement)\n  }\n\n  if (!leavingFinal) {\n    return\n  }\n\n  event.preventDefault()\n  const target = tabbableElements[event.shiftKey ? tabbableElements.length - 1 : 0]\n  target?.focus()\n}\n"],"mappings":";;AAAA,MAAa,iBAAiB;AAE9B,SAAS,OAAO,SAAsB;CAIpC,OAAO,QAAQ,MAAM,YAAY;AACnC;AAEA,SAAS,QAAQ,SAAsB;CAKrC,IAHE,QAAQ,aAAa,aAAa,KAClC,QAAQ,aAAa,QAAQ,KAC7B,QAAQ,aAAa,MAAM,MAAM,UAEjC,OAAO;CAET,IAAI,SAA6B;CACjC,OAAO,QAAQ;EACb,IAAI,WAAW,SAAS,QAAQ,OAAO,aAAa,IAClD;EAEF,IAAI,OAAO,MAAM,GACf,OAAO;EAET,SAAS,OAAO;CAClB;CACA,OAAO;AACT;AAEA,SAAS,mBAAmB,SAAsB;CAChD,MAAM,WAAW,QAAQ,aAAa,UAAU;CAChD,OAAO,aAAa,OAAO,MAAM,SAAS,UAAU,EAAE;AACxD;AAEA,SAAgB,UAAU,SAAsB;CAC9C,MAAM,WAAW,QAAQ,SAAS,YAAY;CAC9C,MAAM,mBAAmB,CAAC,OAAO,MAAM,mBAAmB,OAAO,CAAC;CAKlE,QAHG;EAAC;EAAS;EAAU;EAAY;EAAU;CAAQ,CAAC,CAAC,SAAS,QAAQ,KACpE,CAAE,QAA8B,aACjC,mBAAmB,oBAAoB,QAAQ,QAAQ,mBAAmB,sBAC/D,QAAQ,OAAO;AAC/B;AAEA,SAAgB,SAAS,SAAsB;CAC7C,MAAM,WAAW,mBAAmB,OAAO;CAE3C,QADsB,OAAO,MAAM,QACf,KAAK,YAAY,MAAM,UAAU,OAAO;AAC9D;AAEA,SAAgB,wBAAwB,SAAqC;CAC3E,OAAO,MAAM,KAAK,QAAQ,iBAA8B,cAAc,CAAC,CAAC,CAAC,OAAO,QAAQ;AAC1F;AAEA,SAAgB,SAAS,MAAmB,OAAsB;CAChE,MAAM,mBAAmB,wBAAwB,IAAI;CACrD,IAAI,CAAC,iBAAiB,QAAQ;EAC5B,MAAM,eAAe;EACrB;CACF;CACA,MAAM,eAAe,iBAAiB,MAAM,WAAW,IAAI,iBAAiB,SAAS;CACrF,MAAM,OAAO,KAAK,YAAY;CAC9B,IAAI,eAAe,iBAAiB,KAAK,iBAAiB,SAAS,KAAK;CAExE,MAAM,WAAW,KAAK;CAEtB,IADgB,SAAS,YAAY,WAAW,SAAS,aAAa,MAAM,MAAM,SAOhF,eALmB,iBAAiB,QACjC,OACC,GAAG,aAAa,MAAM,MAAM,WAC5B,GAAG,aAAa,MAAM,MAAM,SAAS,aAAa,MAAM,CAEpC,CAAC,CAAC,SAAS,YAAY;CAGjD,IAAI,CAAC,cACH;CAGF,MAAM,eAAe;CAErB,iBADgC,MAAM,WAAW,iBAAiB,SAAS,IAAI,EACzE,EAAE,MAAM;AAChB"}

package/esm/use-focus-trap/use-focus-trap.mjs

@@ -0,0 +1,50 @@
+"use client";
+import { FOCUS_SELECTOR, focusable, scopeTab, tabbable } from "./tabbable.mjs";
+import { nextTick, onBeforeUnmount, shallowRef, toValue, watchEffect } from "vue";
+//#region packages/@cck-ui/hooks/src/use-focus-trap/use-focus-trap.ts
+function useFocusTrap(active = true) {
+	const trapRef = shallowRef(null);
+	let cleanup = null;
+	const focusNode = (node) => {
+		let focusElement = node.querySelector("[data-autofocus]");
+		if (!focusElement) {
+			const children = Array.from(node.querySelectorAll(FOCUS_SELECTOR));
+			focusElement = children.find(tabbable) || children.find(focusable) || null;
+			if (!focusElement && focusable(node)) focusElement = node;
+		}
+		if (focusElement) focusElement.focus({ preventScroll: true });
+		else console.warn("[CCK-UI/hooks/use-focus-trap] No focusable element found", node);
+	};
+	const activate = (node) => {
+		nextTick(() => focusNode(node));
+		const handler = (event) => {
+			if (event.key === "Tab") scopeTab(node, event);
+		};
+		document.addEventListener("keydown", handler);
+		return () => document.removeEventListener("keydown", handler);
+	};
+	const deactivate = () => {
+		if (cleanup) {
+			cleanup();
+			cleanup = null;
+		}
+	};
+	watchEffect((onCleanup) => {
+		if (!toValue(active)) {
+			deactivate();
+			return;
+		}
+		const node = trapRef.value;
+		if (node) {
+			deactivate();
+			cleanup = activate(node);
+		}
+		onCleanup(() => deactivate());
+	});
+	onBeforeUnmount(deactivate);
+	return trapRef;
+}
+//#endregion
+export { useFocusTrap };
+
+//# sourceMappingURL=use-focus-trap.mjs.map

package/esm/use-focus-trap/use-focus-trap.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-focus-trap.mjs","names":[],"sources":["../../src/use-focus-trap/use-focus-trap.ts"],"sourcesContent":["import { MaybeRefOrGetter, nextTick, onBeforeUnmount, shallowRef, toValue, watchEffect } from 'vue'\nimport { FOCUS_SELECTOR, focusable, scopeTab, tabbable } from './tabbable'\n\nexport function useFocusTrap(active: MaybeRefOrGetter<boolean> = true) {\n  const trapRef = shallowRef<HTMLElement | null>(null)\n  let cleanup: (() => void) | null = null\n\n  const focusNode = (node: HTMLElement) => {\n    let focusElement: HTMLElement | null = node.querySelector('[data-autofocus]')\n    if (!focusElement) {\n      const children = Array.from(node.querySelectorAll<HTMLElement>(FOCUS_SELECTOR))\n      focusElement = children.find(tabbable) || children.find(focusable) || null\n      if (!focusElement && focusable(node)) {\n        focusElement = node\n      }\n    }\n    if (focusElement) {\n      focusElement.focus({ preventScroll: true })\n    } else if (process.env.NODE_ENV === 'development') {\n      console.warn('[CCK-UI/hooks/use-focus-trap] No focusable element found', node)\n    }\n  }\n\n  const activate = (node: HTMLElement) => {\n    nextTick(() => focusNode(node))\n    const handler = (event: KeyboardEvent) => {\n      if (event.key === 'Tab') {\n        scopeTab(node, event)\n      }\n    }\n    document.addEventListener('keydown', handler)\n    return () => document.removeEventListener('keydown', handler)\n  }\n\n  const deactivate = () => {\n    if (cleanup) {\n      cleanup()\n      cleanup = null\n    }\n  }\n\n  watchEffect((onCleanup) => {\n    const isActive = toValue(active)\n    if (!isActive) {\n      deactivate()\n      return\n    }\n    const node = trapRef.value\n    if (node) {\n      deactivate()\n      cleanup = activate(node)\n    }\n    onCleanup(() => deactivate())\n  })\n\n  onBeforeUnmount(deactivate)\n\n  return trapRef\n}\n"],"mappings":";;;;AAGA,SAAgB,aAAa,SAAoC,MAAM;CACrE,MAAM,UAAU,WAA+B,IAAI;CACnD,IAAI,UAA+B;CAEnC,MAAM,aAAa,SAAsB;EACvC,IAAI,eAAmC,KAAK,cAAc,kBAAkB;EAC5E,IAAI,CAAC,cAAc;GACjB,MAAM,WAAW,MAAM,KAAK,KAAK,iBAA8B,cAAc,CAAC;GAC9E,eAAe,SAAS,KAAK,QAAQ,KAAK,SAAS,KAAK,SAAS,KAAK;GACtE,IAAI,CAAC,gBAAgB,UAAU,IAAI,GACjC,eAAe;EAEnB;EACA,IAAI,cACF,aAAa,MAAM,EAAE,eAAe,KAAK,CAAC;OAE1C,QAAQ,KAAK,4DAA4D,IAAI;CAEjF;CAEA,MAAM,YAAY,SAAsB;EACtC,eAAe,UAAU,IAAI,CAAC;EAC9B,MAAM,WAAW,UAAyB;GACxC,IAAI,MAAM,QAAQ,OAChB,SAAS,MAAM,KAAK;EAExB;EACA,SAAS,iBAAiB,WAAW,OAAO;EAC5C,aAAa,SAAS,oBAAoB,WAAW,OAAO;CAC9D;CAEA,MAAM,mBAAmB;EACvB,IAAI,SAAS;GACX,QAAQ;GACR,UAAU;EACZ;CACF;CAEA,aAAa,cAAc;EAEzB,IAAI,CADa,QAAQ,MACb,GAAG;GACb,WAAW;GACX;EACF;EACA,MAAM,OAAO,QAAQ;EACrB,IAAI,MAAM;GACR,WAAW;GACX,UAAU,SAAS,IAAI;EACzB;EACA,gBAAgB,WAAW,CAAC;CAC9B,CAAC;CAED,gBAAgB,UAAU;CAE1B,OAAO;AACT"}

package/lib/index.d.mts

@@ -1,6 +1,9 @@
+export { useFocusTrap } from './use-focus-trap/use-focus-trap';
 export { useClipboard } from './use-clipboard/use-clipboard';
+export { useDisclosure } from './use-disclosure/use-disclosure';
 export { useId } from './use-id/use-id';
 export { useIsomorphicEffect } from './use-isomorphic-effect/use-isomorphic-effect';
 export { useSplitter } from './use-splitter/use-splitter';
 export { useTimeoutFn } from './use-timeout-fn/use-timeout-fn';
+export type { UseDisclosureHandlers, UseDisclosureOptions, UseDisclosureReturnValue, } from './use-disclosure/use-disclosure';
 export type { UseSplitterPanel, UseSplitterOptions, UseSplitterReturnValue, UseSplitterRedistributeInput, UseSplitterRedistributeFn, UseSplitterResolvedPanel, SplitterPaneSize, SplitterStep, } from './use-splitter/use-splitter';

package/lib/index.d.ts

@@ -1,6 +1,9 @@
+export { useFocusTrap } from './use-focus-trap/use-focus-trap';
 export { useClipboard } from './use-clipboard/use-clipboard';
+export { useDisclosure } from './use-disclosure/use-disclosure';
 export { useId } from './use-id/use-id';
 export { useIsomorphicEffect } from './use-isomorphic-effect/use-isomorphic-effect';
 export { useSplitter } from './use-splitter/use-splitter';
 export { useTimeoutFn } from './use-timeout-fn/use-timeout-fn';
+export type { UseDisclosureHandlers, UseDisclosureOptions, UseDisclosureReturnValue, } from './use-disclosure/use-disclosure';
 export type { UseSplitterPanel, UseSplitterOptions, UseSplitterReturnValue, UseSplitterRedistributeInput, UseSplitterRedistributeFn, UseSplitterResolvedPanel, SplitterPaneSize, SplitterStep, } from './use-splitter/use-splitter';

package/lib/use-disclosure/use-disclosure.d.ts

@@ -0,0 +1,29 @@
+import { MaybeRefOrGetter, Ref } from 'vue';
+export interface UseDisclosureOptions {
+    /**
+     * @description Callback invoked when the state becomes true
+     */
+    onOpen?: () => void;
+    /**
+     * @description Callback invoked when the state becomes false
+     */
+    onClose?: () => void;
+}
+export interface UseDisclosureHandlers {
+    /**
+     * Directly set the state without triggering callbacks
+     * @param value - The target boolean value.
+     */
+    set: (value: boolean) => void;
+    /** Open the state (no-op if already open) */
+    open: () => void;
+    /** Close the state (no-op if already closed) */
+    close: () => void;
+    /** Toggle the current state */
+    toggle: () => void;
+}
+export type UseDisclosureReturnValue = {
+    state: Ref<boolean>;
+    handlers: UseDisclosureHandlers;
+};
+export declare function useDisclosure(initialState?: MaybeRefOrGetter<boolean>, options?: MaybeRefOrGetter<UseDisclosureOptions>): UseDisclosureReturnValue;

package/lib/use-disclosure/use-disclosure.test.d.ts

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

package/lib/use-focus-trap/tabbable.d.ts

@@ -0,0 +1,5 @@
+export declare const FOCUS_SELECTOR = "a, input, select, textarea, button, object, [tabindex]";
+export declare function focusable(element: HTMLElement): boolean | "";
+export declare function tabbable(element: HTMLElement): boolean | "";
+export declare function findTabbableDescendants(element: HTMLElement): HTMLElement[];
+export declare function scopeTab(node: HTMLElement, event: KeyboardEvent): void;

package/lib/use-focus-trap/use-focus-trap.d.ts

@@ -0,0 +1,2 @@
+import { MaybeRefOrGetter } from 'vue';
+export declare function useFocusTrap(active?: MaybeRefOrGetter<boolean>): import("vue").ShallowRef<HTMLElement | null, HTMLElement | null>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cck-ui/hooks",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "description": "A collection of hooks for state and UI management",
   "homepage": "https://cck-ui.jackatlas.xyz",
   "license": "ISC",