@gunkin/uiify 0.0.10-alpha → 0.0.12-alpha

package/dist/components/header/use-header-scroll-state.js

@@ -1,83 +0,0 @@
-"use client";
-import { useEffect, useState } from "react";
-function isScrollBehavior(behavior) {
-  return behavior === "elevate-on-scroll" || behavior === "solid-on-scroll" || behavior === "hide-on-scroll-down";
-}
-function usesIntersectionObserver(behavior) {
-  return behavior === "elevate-on-scroll" || behavior === "solid-on-scroll";
-}
-function useHeaderScrollState(options = {}) {
-  const {
-    behavior = "none",
-    disabled = false,
-    scrollRoot: scrollRootProp,
-    scrollRootRef,
-    threshold = 0
-  } = options;
-  const scrollRoot = scrollRootProp ?? scrollRootRef?.current ?? null;
-  const [scrolled, setScrolled] = useState(false);
-  const [hidden, setHidden] = useState(false);
-  useEffect(() => {
-    if (disabled || typeof window === "undefined" || typeof document === "undefined") {
-      return;
-    }
-    if (!isScrollBehavior(behavior)) {
-      return;
-    }
-    if (scrollRootRef && !scrollRoot) {
-      return;
-    }
-    if (usesIntersectionObserver(behavior)) {
-      const sentinel = document.createElement("div");
-      sentinel.setAttribute("aria-hidden", "true");
-      sentinel.setAttribute("data-header-scroll-sentinel", "");
-      sentinel.style.cssText = "position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none;visibility:hidden";
-      if (scrollRoot) {
-        scrollRoot.insertBefore(sentinel, scrollRoot.firstChild);
-      } else {
-        document.body.prepend(sentinel);
-      }
-      const rootMargin = threshold > 0 ? `-${threshold}px 0px 0px 0px` : "0px";
-      const observer = new IntersectionObserver(
-        (entries) => {
-          const entry = entries[0];
-          if (!entry) return;
-          setScrolled(!entry.isIntersecting);
-        },
-        { root: scrollRoot, rootMargin, threshold: 0 }
-      );
-      observer.observe(sentinel);
-      return () => {
-        observer.disconnect();
-        sentinel.remove();
-      };
-    }
-    if (behavior === "hide-on-scroll-down") {
-      let lastScrollTop = scrollRoot ? scrollRoot.scrollTop : window.scrollY;
-      let ticking = false;
-      const readScrollTop = () => scrollRoot ? scrollRoot.scrollTop : window.scrollY;
-      const update = () => {
-        const currentScrollTop = readScrollTop();
-        const pastThreshold = currentScrollTop > threshold;
-        setScrolled(pastThreshold);
-        setHidden(pastThreshold && currentScrollTop > lastScrollTop);
-        lastScrollTop = currentScrollTop;
-        ticking = false;
-      };
-      const onScroll = () => {
-        if (ticking) return;
-        ticking = true;
-        requestAnimationFrame(update);
-      };
-      const target = scrollRoot ?? window;
-      target.addEventListener("scroll", onScroll, { passive: true });
-      return () => target.removeEventListener("scroll", onScroll);
-    }
-    return void 0;
-  }, [behavior, disabled, scrollRoot, scrollRootRef, threshold]);
-  return { hidden, scrolled };
-}
-export {
-  useHeaderScrollState
-};
-//# sourceMappingURL=use-header-scroll-state.js.map

package/dist/components/header/use-header-scroll-state.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/header/use-header-scroll-state.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useState } from \"react\";\nimport type {\n  HeaderBehavior,\n  UseHeaderScrollStateOptions,\n  UseHeaderScrollStateReturn,\n} from \"./types.js\";\n\nexport type {\n  HeaderBehavior,\n  UseHeaderScrollStateOptions,\n  UseHeaderScrollStateReturn,\n} from \"./types.js\";\n\nfunction isScrollBehavior(behavior: HeaderBehavior): boolean {\n  return (\n    behavior === \"elevate-on-scroll\" ||\n    behavior === \"solid-on-scroll\" ||\n    behavior === \"hide-on-scroll-down\"\n  );\n}\n\nfunction usesIntersectionObserver(behavior: HeaderBehavior): boolean {\n  return behavior === \"elevate-on-scroll\" || behavior === \"solid-on-scroll\";\n}\n\nexport function useHeaderScrollState(\n  options: UseHeaderScrollStateOptions = {},\n): UseHeaderScrollStateReturn {\n  const {\n    behavior = \"none\",\n    disabled = false,\n    scrollRoot: scrollRootProp,\n    scrollRootRef,\n    threshold = 0,\n  } = options;\n  const scrollRoot = scrollRootProp ?? scrollRootRef?.current ?? null;\n  const [scrolled, setScrolled] = useState(false);\n  const [hidden, setHidden] = useState(false);\n\n  useEffect(() => {\n    if (disabled || typeof window === \"undefined\" || typeof document === \"undefined\") {\n      return;\n    }\n\n    if (!isScrollBehavior(behavior)) {\n      return;\n    }\n\n    if (scrollRootRef && !scrollRoot) {\n      return;\n    }\n\n    if (usesIntersectionObserver(behavior)) {\n      const sentinel = document.createElement(\"div\");\n      sentinel.setAttribute(\"aria-hidden\", \"true\");\n      sentinel.setAttribute(\"data-header-scroll-sentinel\", \"\");\n      sentinel.style.cssText =\n        \"position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none;visibility:hidden\";\n\n      if (scrollRoot) {\n        scrollRoot.insertBefore(sentinel, scrollRoot.firstChild);\n      } else {\n        document.body.prepend(sentinel);\n      }\n\n      const rootMargin = threshold > 0 ? `-${threshold}px 0px 0px 0px` : \"0px\";\n      const observer = new IntersectionObserver(\n        (entries) => {\n          const entry = entries[0];\n          if (!entry) return;\n          setScrolled(!entry.isIntersecting);\n        },\n        { root: scrollRoot, rootMargin, threshold: 0 },\n      );\n      observer.observe(sentinel);\n\n      return () => {\n        observer.disconnect();\n        sentinel.remove();\n      };\n    }\n\n    if (behavior === \"hide-on-scroll-down\") {\n      let lastScrollTop = scrollRoot ? scrollRoot.scrollTop : window.scrollY; // banned-read-ok: scroll handler, batched in rAF\n      let ticking = false;\n\n      const readScrollTop = (): number => (scrollRoot ? scrollRoot.scrollTop : window.scrollY); // banned-read-ok: scroll handler, batched in rAF\n\n      const update = () => {\n        const currentScrollTop = readScrollTop();\n        const pastThreshold = currentScrollTop > threshold;\n        setScrolled(pastThreshold);\n        setHidden(pastThreshold && currentScrollTop > lastScrollTop);\n        lastScrollTop = currentScrollTop;\n        ticking = false;\n      };\n\n      const onScroll = () => {\n        if (ticking) return;\n        ticking = true;\n        requestAnimationFrame(update);\n      };\n\n      const target: HTMLElement | Window = scrollRoot ?? window;\n      target.addEventListener(\"scroll\", onScroll, { passive: true });\n      return () => target.removeEventListener(\"scroll\", onScroll);\n    }\n\n    return undefined;\n  }, [behavior, disabled, scrollRoot, scrollRootRef, threshold]);\n\n  return { hidden, scrolled };\n}\n"],"mappings":";AAEA,SAAS,WAAW,gBAAgB;AAapC,SAAS,iBAAiB,UAAmC;AAC3D,SACE,aAAa,uBACb,aAAa,qBACb,aAAa;AAEjB;AAEA,SAAS,yBAAyB,UAAmC;AACnE,SAAO,aAAa,uBAAuB,aAAa;AAC1D;AAEO,SAAS,qBACd,UAAuC,CAAC,GACZ;AAC5B,QAAM;AAAA,IACJ,WAAW;AAAA,IACX,WAAW;AAAA,IACX,YAAY;AAAA,IACZ;AAAA,IACA,YAAY;AAAA,EACd,IAAI;AACJ,QAAM,aAAa,kBAAkB,eAAe,WAAW;AAC/D,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,YAAU,MAAM;AACd,QAAI,YAAY,OAAO,WAAW,eAAe,OAAO,aAAa,aAAa;AAChF;AAAA,IACF;AAEA,QAAI,CAAC,iBAAiB,QAAQ,GAAG;AAC/B;AAAA,IACF;AAEA,QAAI,iBAAiB,CAAC,YAAY;AAChC;AAAA,IACF;AAEA,QAAI,yBAAyB,QAAQ,GAAG;AACtC,YAAM,WAAW,SAAS,cAAc,KAAK;AAC7C,eAAS,aAAa,eAAe,MAAM;AAC3C,eAAS,aAAa,+BAA+B,EAAE;AACvD,eAAS,MAAM,UACb;AAEF,UAAI,YAAY;AACd,mBAAW,aAAa,UAAU,WAAW,UAAU;AAAA,MACzD,OAAO;AACL,iBAAS,KAAK,QAAQ,QAAQ;AAAA,MAChC;AAEA,YAAM,aAAa,YAAY,IAAI,IAAI,SAAS,mBAAmB;AACnE,YAAM,WAAW,IAAI;AAAA,QACnB,CAAC,YAAY;AACX,gBAAM,QAAQ,QAAQ,CAAC;AACvB,cAAI,CAAC,MAAO;AACZ,sBAAY,CAAC,MAAM,cAAc;AAAA,QACnC;AAAA,QACA,EAAE,MAAM,YAAY,YAAY,WAAW,EAAE;AAAA,MAC/C;AACA,eAAS,QAAQ,QAAQ;AAEzB,aAAO,MAAM;AACX,iBAAS,WAAW;AACpB,iBAAS,OAAO;AAAA,MAClB;AAAA,IACF;AAEA,QAAI,aAAa,uBAAuB;AACtC,UAAI,gBAAgB,aAAa,WAAW,YAAY,OAAO;AAC/D,UAAI,UAAU;AAEd,YAAM,gBAAgB,MAAe,aAAa,WAAW,YAAY,OAAO;AAEhF,YAAM,SAAS,MAAM;AACnB,cAAM,mBAAmB,cAAc;AACvC,cAAM,gBAAgB,mBAAmB;AACzC,oBAAY,aAAa;AACzB,kBAAU,iBAAiB,mBAAmB,aAAa;AAC3D,wBAAgB;AAChB,kBAAU;AAAA,MACZ;AAEA,YAAM,WAAW,MAAM;AACrB,YAAI,QAAS;AACb,kBAAU;AACV,8BAAsB,MAAM;AAAA,MAC9B;AAEA,YAAM,SAA+B,cAAc;AACnD,aAAO,iBAAiB,UAAU,UAAU,EAAE,SAAS,KAAK,CAAC;AAC7D,aAAO,MAAM,OAAO,oBAAoB,UAAU,QAAQ;AAAA,IAC5D;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,UAAU,YAAY,eAAe,SAAS,CAAC;AAE7D,SAAO,EAAE,QAAQ,SAAS;AAC5B;","names":[]}

package/dist/components/header/use-header.d.ts

@@ -1,4 +0,0 @@
-import type { UseHeaderOptions, UseHeaderReturn } from "./types.js";
-export type { HeaderMobileMode, UseHeaderOptions, UseHeaderReturn } from "./types.js";
-export declare function useHeader(options?: UseHeaderOptions): UseHeaderReturn;
-//# sourceMappingURL=use-header.d.ts.map

package/dist/components/header/use-header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-header.d.ts","sourceRoot":"","sources":["../../../src/components/header/use-header.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAoB,gBAAgB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAEtF,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAatF,wBAAgB,SAAS,CAAC,OAAO,GAAE,gBAAqB,GAAG,eAAe,CAuEzE"}

package/dist/components/header/use-header.js

@@ -1,80 +0,0 @@
-"use client";
-import { useCallback, useMemo } from "react";
-import { useControllableState, useId } from "@gunkin/uiify/hooks";
-function isDrawerMobileMode(mobileMode) {
-  return mobileMode === "drawer" || mobileMode === "sheet" || mobileMode === "fullscreen";
-}
-function exposesNavControls(mobileMode, open) {
-  if (mobileMode === "none") return false;
-  if (isDrawerMobileMode(mobileMode)) return true;
-  if (mobileMode === "collapse") return true;
-  return open;
-}
-function useHeader(options = {}) {
-  const {
-    closeOnSelect = true,
-    defaultOpen = false,
-    mobileMode = "none",
-    onOpenChange,
-    open: controlledOpen
-  } = options;
-  const navId = useId();
-  const toggleId = useId();
-  const [open, setOpen] = useControllableState({
-    defaultValue: defaultOpen,
-    onChange: onOpenChange,
-    value: controlledOpen
-  });
-  const toggle = useCallback(() => {
-    setOpen((current) => !current);
-  }, [setOpen]);
-  const close = useCallback(() => {
-    setOpen(false);
-  }, [setOpen]);
-  const getToggleProps = useCallback(
-    (props) => ({
-      ...props,
-      id: toggleId,
-      ...exposesNavControls(mobileMode, open) ? { "aria-controls": navId } : {},
-      "aria-expanded": open
-    }),
-    [mobileMode, navId, open, toggleId]
-  );
-  const getMobileNavProps = useCallback(
-    (props) => ({
-      ...props,
-      id: navId
-    }),
-    [navId]
-  );
-  return useMemo(
-    () => ({
-      close,
-      closeOnSelect,
-      getMobileNavProps,
-      getToggleProps,
-      mobileMode,
-      navId,
-      open,
-      setOpen,
-      toggle,
-      toggleId
-    }),
-    [
-      close,
-      closeOnSelect,
-      getMobileNavProps,
-      getToggleProps,
-      mobileMode,
-      navId,
-      open,
-      setOpen,
-      toggle,
-      toggleId
-    ]
-  );
-}
-export {
-  useHeader
-};
-//# sourceMappingURL=use-header.js.map

package/dist/components/header/use-header.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/header/use-header.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useMemo } from \"react\";\nimport type { ButtonHTMLAttributes, HTMLAttributes } from \"react\";\nimport { useControllableState, useId } from \"@gunkin/uiify/hooks\";\nimport type { HeaderMobileMode, UseHeaderOptions, UseHeaderReturn } from \"./types.js\";\n\nexport type { HeaderMobileMode, UseHeaderOptions, UseHeaderReturn } from \"./types.js\";\n\nfunction isDrawerMobileMode(mobileMode: HeaderMobileMode): boolean {\n  return mobileMode === \"drawer\" || mobileMode === \"sheet\" || mobileMode === \"fullscreen\";\n}\n\nfunction exposesNavControls(mobileMode: HeaderMobileMode, open: boolean): boolean {\n  if (mobileMode === \"none\") return false;\n  if (isDrawerMobileMode(mobileMode)) return true;\n  if (mobileMode === \"collapse\") return true;\n  return open;\n}\n\nexport function useHeader(options: UseHeaderOptions = {}): UseHeaderReturn {\n  const {\n    closeOnSelect = true,\n    defaultOpen = false,\n    mobileMode = \"none\",\n    onOpenChange,\n    open: controlledOpen,\n  } = options;\n\n  const navId = useId();\n  const toggleId = useId();\n  const [open, setOpen] = useControllableState({\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n    value: controlledOpen,\n  });\n\n  const toggle = useCallback(() => {\n    setOpen((current) => !current);\n  }, [setOpen]);\n\n  const close = useCallback(() => {\n    setOpen(false);\n  }, [setOpen]);\n\n  const getToggleProps = useCallback(\n    <T extends ButtonHTMLAttributes<HTMLButtonElement>>(props?: T): T =>\n      ({\n        ...props,\n        id: toggleId,\n        ...(exposesNavControls(mobileMode, open) ? { \"aria-controls\": navId } : {}),\n        \"aria-expanded\": open,\n      }) as T,\n    [mobileMode, navId, open, toggleId],\n  );\n\n  const getMobileNavProps = useCallback(\n    <T extends HTMLAttributes<HTMLElement>>(props?: T): T =>\n      ({\n        ...props,\n        id: navId,\n      }) as T,\n    [navId],\n  );\n\n  return useMemo(\n    () => ({\n      close,\n      closeOnSelect,\n      getMobileNavProps,\n      getToggleProps,\n      mobileMode,\n      navId,\n      open,\n      setOpen,\n      toggle,\n      toggleId,\n    }),\n    [\n      close,\n      closeOnSelect,\n      getMobileNavProps,\n      getToggleProps,\n      mobileMode,\n      navId,\n      open,\n      setOpen,\n      toggle,\n      toggleId,\n    ],\n  );\n}\n"],"mappings":";AAEA,SAAS,aAAa,eAAe;AAErC,SAAS,sBAAsB,aAAa;AAK5C,SAAS,mBAAmB,YAAuC;AACjE,SAAO,eAAe,YAAY,eAAe,WAAW,eAAe;AAC7E;AAEA,SAAS,mBAAmB,YAA8B,MAAwB;AAChF,MAAI,eAAe,OAAQ,QAAO;AAClC,MAAI,mBAAmB,UAAU,EAAG,QAAO;AAC3C,MAAI,eAAe,WAAY,QAAO;AACtC,SAAO;AACT;AAEO,SAAS,UAAU,UAA4B,CAAC,GAAoB;AACzE,QAAM;AAAA,IACJ,gBAAgB;AAAA,IAChB,cAAc;AAAA,IACd,aAAa;AAAA,IACb;AAAA,IACA,MAAM;AAAA,EACR,IAAI;AAEJ,QAAM,QAAQ,MAAM;AACpB,QAAM,WAAW,MAAM;AACvB,QAAM,CAAC,MAAM,OAAO,IAAI,qBAAqB;AAAA,IAC3C,cAAc;AAAA,IACd,UAAU;AAAA,IACV,OAAO;AAAA,EACT,CAAC;AAED,QAAM,SAAS,YAAY,MAAM;AAC/B,YAAQ,CAAC,YAAY,CAAC,OAAO;AAAA,EAC/B,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,QAAQ,YAAY,MAAM;AAC9B,YAAQ,KAAK;AAAA,EACf,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,iBAAiB;AAAA,IACrB,CAAoD,WACjD;AAAA,MACC,GAAG;AAAA,MACH,IAAI;AAAA,MACJ,GAAI,mBAAmB,YAAY,IAAI,IAAI,EAAE,iBAAiB,MAAM,IAAI,CAAC;AAAA,MACzE,iBAAiB;AAAA,IACnB;AAAA,IACF,CAAC,YAAY,OAAO,MAAM,QAAQ;AAAA,EACpC;AAEA,QAAM,oBAAoB;AAAA,IACxB,CAAwC,WACrC;AAAA,MACC,GAAG;AAAA,MACH,IAAI;AAAA,IACN;AAAA,IACF,CAAC,KAAK;AAAA,EACR;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;","names":[]}