denwa-web-shared 1.0.54 → 1.0.55

package/dist/client/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export * from './use-disable-scroll';
 export * from './use-is-client';
 export * from './use-view-port';
+export * from './use-appear-animation';

package/dist/client/hooks/use-appear-animation.d.ts

@@ -0,0 +1,17 @@
+import { MotionProps, Easing } from 'motion/react';
+type MarginValue = `${number}${'px' | '%'}`;
+export interface UseAppearAnimationProps {
+    once?: boolean;
+    margin?: MarginValue | `${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue} ${MarginValue}`;
+    delay?: number;
+    direction?: 'up' | 'down' | 'left' | 'right' | 'scale' | 'fade';
+    animationDistance?: number;
+    duration?: number;
+    ease?: Easing | Easing[];
+}
+export declare const useAppearAnimation: <T extends HTMLElement = HTMLElement>({ once, margin, delay, direction, animationDistance, duration, ease, }?: UseAppearAnimationProps) => {
+    ref: import('../../../node_modules/react').RefObject<T | null>;
+    isInView: boolean;
+    motionProps: Omit<MotionProps, "ref">;
+};
+export {};

package/dist/client/index.cjs.js

@@ -18,7 +18,28 @@ const useIsClient = () => {
   }, []);
   return isClient;
 };
+function on(obj) {
+  var args = [];
+  for (var _i = 1; _i < arguments.length; _i++) {
+    args[_i - 1] = arguments[_i];
+  }
+  if (obj && obj.addEventListener) {
+    obj.addEventListener.apply(obj, args);
+  }
+}
+function off(obj) {
+  var args = [];
+  for (var _i = 1; _i < arguments.length; _i++) {
+    args[_i - 1] = arguments[_i];
+  }
+  if (obj && obj.removeEventListener) {
+    obj.removeEventListener.apply(obj, args);
+  }
+}
 var isBrowser = typeof window !== "undefined";
+var useEffectOnce = function(effect) {
+  React.useEffect(effect, []);
+};
 var useIntersection = function(ref, options) {
   var _a = React.useState(null), intersectionObserverEntry = _a[0], setIntersectionObserverEntry = _a[1];
   React.useEffect(function() {
@@ -67,6 +88,57 @@ var useMedia = function(query, defaultState) {
   }, [query]);
   return state;
 };
+var useUnmount = function(fn) {
+  var fnRef = React.useRef(fn);
+  fnRef.current = fn;
+  useEffectOnce(function() {
+    return function() {
+      return fnRef.current();
+    };
+  });
+};
+var useRafState = function(initialState) {
+  var frame = React.useRef(0);
+  var _a = React.useState(initialState), state = _a[0], setState = _a[1];
+  var setRafState = React.useCallback(function(value) {
+    cancelAnimationFrame(frame.current);
+    frame.current = requestAnimationFrame(function() {
+      setState(value);
+    });
+  }, []);
+  useUnmount(function() {
+    cancelAnimationFrame(frame.current);
+  });
+  return [state, setRafState];
+};
+var useWindowScroll = function() {
+  var _a = useRafState(function() {
+    return {
+      x: isBrowser ? window.pageXOffset : 0,
+      y: isBrowser ? window.pageYOffset : 0
+    };
+  }), state = _a[0], setState = _a[1];
+  React.useEffect(function() {
+    var handler = function() {
+      setState(function(state2) {
+        var pageXOffset = window.pageXOffset, pageYOffset = window.pageYOffset;
+        return state2.x !== pageXOffset || state2.y !== pageYOffset ? {
+          x: pageXOffset,
+          y: pageYOffset
+        } : state2;
+      });
+    };
+    handler();
+    on(window, "scroll", handler, {
+      capture: false,
+      passive: true
+    });
+    return function() {
+      off(window, "scroll", handler);
+    };
+  }, []);
+  return state;
+};
 const THEME = {
   VIEW_PORT: {
     SMALL: 320,
@@ -125,6 +197,126 @@ const useSmallViewPort = () => {
     isSmallMaxWidth
   };
 };
+function resolveElements(elementOrSelector, scope, selectorCache) {
+  if (elementOrSelector == null) {
+    return [];
+  }
+  if (elementOrSelector instanceof EventTarget) {
+    return [elementOrSelector];
+  } else if (typeof elementOrSelector === "string") {
+    let root = document;
+    const elements = root.querySelectorAll(elementOrSelector);
+    return elements ? Array.from(elements) : [];
+  }
+  return Array.from(elementOrSelector).filter((element) => element != null);
+}
+const thresholds = {
+  some: 0,
+  all: 1
+};
+function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "some" } = {}) {
+  const elements = resolveElements(elementOrSelector);
+  const activeIntersections = /* @__PURE__ */ new WeakMap();
+  const onIntersectionChange = (entries) => {
+    entries.forEach((entry) => {
+      const onEnd = activeIntersections.get(entry.target);
+      if (entry.isIntersecting === Boolean(onEnd))
+        return;
+      if (entry.isIntersecting) {
+        const newOnEnd = onStart(entry.target, entry);
+        if (typeof newOnEnd === "function") {
+          activeIntersections.set(entry.target, newOnEnd);
+        } else {
+          observer.unobserve(entry.target);
+        }
+      } else if (typeof onEnd === "function") {
+        onEnd(entry);
+        activeIntersections.delete(entry.target);
+      }
+    });
+  };
+  const observer = new IntersectionObserver(onIntersectionChange, {
+    root,
+    rootMargin,
+    threshold: typeof amount === "number" ? amount : thresholds[amount]
+  });
+  elements.forEach((element) => observer.observe(element));
+  return () => observer.disconnect();
+}
+function useInView(ref, { root, margin, amount, once = false, initial = false } = {}) {
+  const [isInView, setInView] = React.useState(initial);
+  React.useEffect(() => {
+    if (!ref.current || once && isInView)
+      return;
+    const onEnter = () => {
+      setInView(true);
+      return once ? void 0 : () => setInView(false);
+    };
+    const options = {
+      root: root && root.current || void 0,
+      margin,
+      amount
+    };
+    return inView(ref.current, onEnter, options);
+  }, [root, ref, margin, once, amount]);
+  return isInView;
+}
+const useAppearAnimation = ({
+  once = true,
+  margin = "-100px",
+  delay = 0.1,
+  direction = "up",
+  animationDistance = 50,
+  duration = 0.8,
+  ease = "easeOut"
+} = {}) => {
+  const ref = React.useRef(null);
+  const isInView = useInView(ref, { once, margin });
+  const getInitialState2 = () => {
+    switch (direction) {
+      case "up":
+        return { opacity: 0, y: animationDistance };
+      case "down":
+        return { opacity: 0, y: -animationDistance };
+      case "left":
+        return { opacity: 0, x: animationDistance };
+      case "right":
+        return { opacity: 0, x: -animationDistance };
+      case "scale":
+        return { opacity: 0, scale: 0.8 };
+      case "fade":
+        return { opacity: 0 };
+      default:
+        return { opacity: 0, y: animationDistance };
+    }
+  };
+  const getAnimateState = () => {
+    switch (direction) {
+      case "up":
+      case "down":
+        return { opacity: 1, y: 0 };
+      case "left":
+      case "right":
+        return { opacity: 1, x: 0 };
+      case "scale":
+        return { opacity: 1, scale: 1 };
+      case "fade":
+        return { opacity: 1 };
+      default:
+        return { opacity: 1, y: 0 };
+    }
+  };
+  const motionProps = {
+    initial: getInitialState2(),
+    animate: isInView ? getAnimateState() : void 0,
+    transition: {
+      duration,
+      ease,
+      delay
+    }
+  };
+  return { ref, isInView, motionProps };
+};
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -3093,6 +3285,28 @@ const twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+const HeaderWrapper = ({
+  children,
+  className,
+  hideClassName,
+  scrollPosition = 100,
+  hideBackgroundOnScroll = true
+}) => {
+  const { y } = useWindowScroll();
+  const isClient = useIsClient();
+  const isHiddenBackground = hideBackgroundOnScroll && y > scrollPosition && isClient;
+  const headerClass = cn(
+    "fixed z-30 w-full transition bg-background",
+    className,
+    {
+      "bg-transparent": isHiddenBackground
+    },
+    {
+      hideClassName: isHiddenBackground && hideClassName
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx("header", { className: headerClass, children });
+};
 const InfinityList = ({
   children,
   intersectionElementClassName,
@@ -3124,7 +3338,9 @@ const InfinityList = ({
     )
   ] });
 };
+exports.HeaderWrapper = HeaderWrapper;
 exports.InfinityList = InfinityList;
+exports.useAppearAnimation = useAppearAnimation;
 exports.useDisableScroll = useDisableScroll;
 exports.useExtraMediumViewPort = useExtraMediumViewPort;
 exports.useIsClient = useIsClient;

package/dist/client/index.es.js

@@ -1,5 +1,5 @@
-import { useEffect, useState, useRef } from "react";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { useEffect, useState, useRef, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 const useDisableScroll = (isDisableScroll) => {
   useEffect(() => {
     if (!isDisableScroll) return;
@@ -16,7 +16,28 @@ const useIsClient = () => {
   }, []);
   return isClient;
 };
+function on(obj) {
+  var args = [];
+  for (var _i = 1; _i < arguments.length; _i++) {
+    args[_i - 1] = arguments[_i];
+  }
+  if (obj && obj.addEventListener) {
+    obj.addEventListener.apply(obj, args);
+  }
+}
+function off(obj) {
+  var args = [];
+  for (var _i = 1; _i < arguments.length; _i++) {
+    args[_i - 1] = arguments[_i];
+  }
+  if (obj && obj.removeEventListener) {
+    obj.removeEventListener.apply(obj, args);
+  }
+}
 var isBrowser = typeof window !== "undefined";
+var useEffectOnce = function(effect) {
+  useEffect(effect, []);
+};
 var useIntersection = function(ref, options) {
   var _a = useState(null), intersectionObserverEntry = _a[0], setIntersectionObserverEntry = _a[1];
   useEffect(function() {
@@ -65,6 +86,57 @@ var useMedia = function(query, defaultState) {
   }, [query]);
   return state;
 };
+var useUnmount = function(fn) {
+  var fnRef = useRef(fn);
+  fnRef.current = fn;
+  useEffectOnce(function() {
+    return function() {
+      return fnRef.current();
+    };
+  });
+};
+var useRafState = function(initialState) {
+  var frame = useRef(0);
+  var _a = useState(initialState), state = _a[0], setState = _a[1];
+  var setRafState = useCallback(function(value) {
+    cancelAnimationFrame(frame.current);
+    frame.current = requestAnimationFrame(function() {
+      setState(value);
+    });
+  }, []);
+  useUnmount(function() {
+    cancelAnimationFrame(frame.current);
+  });
+  return [state, setRafState];
+};
+var useWindowScroll = function() {
+  var _a = useRafState(function() {
+    return {
+      x: isBrowser ? window.pageXOffset : 0,
+      y: isBrowser ? window.pageYOffset : 0
+    };
+  }), state = _a[0], setState = _a[1];
+  useEffect(function() {
+    var handler = function() {
+      setState(function(state2) {
+        var pageXOffset = window.pageXOffset, pageYOffset = window.pageYOffset;
+        return state2.x !== pageXOffset || state2.y !== pageYOffset ? {
+          x: pageXOffset,
+          y: pageYOffset
+        } : state2;
+      });
+    };
+    handler();
+    on(window, "scroll", handler, {
+      capture: false,
+      passive: true
+    });
+    return function() {
+      off(window, "scroll", handler);
+    };
+  }, []);
+  return state;
+};
 const THEME = {
   VIEW_PORT: {
     SMALL: 320,
@@ -123,6 +195,126 @@ const useSmallViewPort = () => {
     isSmallMaxWidth
   };
 };
+function resolveElements(elementOrSelector, scope, selectorCache) {
+  if (elementOrSelector == null) {
+    return [];
+  }
+  if (elementOrSelector instanceof EventTarget) {
+    return [elementOrSelector];
+  } else if (typeof elementOrSelector === "string") {
+    let root = document;
+    const elements = root.querySelectorAll(elementOrSelector);
+    return elements ? Array.from(elements) : [];
+  }
+  return Array.from(elementOrSelector).filter((element) => element != null);
+}
+const thresholds = {
+  some: 0,
+  all: 1
+};
+function inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = "some" } = {}) {
+  const elements = resolveElements(elementOrSelector);
+  const activeIntersections = /* @__PURE__ */ new WeakMap();
+  const onIntersectionChange = (entries) => {
+    entries.forEach((entry) => {
+      const onEnd = activeIntersections.get(entry.target);
+      if (entry.isIntersecting === Boolean(onEnd))
+        return;
+      if (entry.isIntersecting) {
+        const newOnEnd = onStart(entry.target, entry);
+        if (typeof newOnEnd === "function") {
+          activeIntersections.set(entry.target, newOnEnd);
+        } else {
+          observer.unobserve(entry.target);
+        }
+      } else if (typeof onEnd === "function") {
+        onEnd(entry);
+        activeIntersections.delete(entry.target);
+      }
+    });
+  };
+  const observer = new IntersectionObserver(onIntersectionChange, {
+    root,
+    rootMargin,
+    threshold: typeof amount === "number" ? amount : thresholds[amount]
+  });
+  elements.forEach((element) => observer.observe(element));
+  return () => observer.disconnect();
+}
+function useInView(ref, { root, margin, amount, once = false, initial = false } = {}) {
+  const [isInView, setInView] = useState(initial);
+  useEffect(() => {
+    if (!ref.current || once && isInView)
+      return;
+    const onEnter = () => {
+      setInView(true);
+      return once ? void 0 : () => setInView(false);
+    };
+    const options = {
+      root: root && root.current || void 0,
+      margin,
+      amount
+    };
+    return inView(ref.current, onEnter, options);
+  }, [root, ref, margin, once, amount]);
+  return isInView;
+}
+const useAppearAnimation = ({
+  once = true,
+  margin = "-100px",
+  delay = 0.1,
+  direction = "up",
+  animationDistance = 50,
+  duration = 0.8,
+  ease = "easeOut"
+} = {}) => {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once, margin });
+  const getInitialState2 = () => {
+    switch (direction) {
+      case "up":
+        return { opacity: 0, y: animationDistance };
+      case "down":
+        return { opacity: 0, y: -animationDistance };
+      case "left":
+        return { opacity: 0, x: animationDistance };
+      case "right":
+        return { opacity: 0, x: -animationDistance };
+      case "scale":
+        return { opacity: 0, scale: 0.8 };
+      case "fade":
+        return { opacity: 0 };
+      default:
+        return { opacity: 0, y: animationDistance };
+    }
+  };
+  const getAnimateState = () => {
+    switch (direction) {
+      case "up":
+      case "down":
+        return { opacity: 1, y: 0 };
+      case "left":
+      case "right":
+        return { opacity: 1, x: 0 };
+      case "scale":
+        return { opacity: 1, scale: 1 };
+      case "fade":
+        return { opacity: 1 };
+      default:
+        return { opacity: 1, y: 0 };
+    }
+  };
+  const motionProps = {
+    initial: getInitialState2(),
+    animate: isInView ? getAnimateState() : void 0,
+    transition: {
+      duration,
+      ease,
+      delay
+    }
+  };
+  return { ref, isInView, motionProps };
+};
 function r(e) {
   var t, f, n = "";
   if ("string" == typeof e || "number" == typeof e) n += e;
@@ -3091,6 +3283,28 @@ const twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
+const HeaderWrapper = ({
+  children,
+  className,
+  hideClassName,
+  scrollPosition = 100,
+  hideBackgroundOnScroll = true
+}) => {
+  const { y } = useWindowScroll();
+  const isClient = useIsClient();
+  const isHiddenBackground = hideBackgroundOnScroll && y > scrollPosition && isClient;
+  const headerClass = cn(
+    "fixed z-30 w-full transition bg-background",
+    className,
+    {
+      "bg-transparent": isHiddenBackground
+    },
+    {
+      hideClassName: isHiddenBackground && hideClassName
+    }
+  );
+  return /* @__PURE__ */ jsx("header", { className: headerClass, children });
+};
 const InfinityList = ({
   children,
   intersectionElementClassName,
@@ -3123,7 +3337,9 @@ const InfinityList = ({
   ] });
 };
 export {
+  HeaderWrapper,
   InfinityList,
+  useAppearAnimation,
   useDisableScroll,
   useExtraMediumViewPort,
   useIsClient,

package/dist/client/ui/animated-div.d.ts

@@ -0,0 +1,8 @@
+import { MotionProps } from 'motion/react';
+import { FC } from '../../../node_modules/react';
+import { UseAppearAnimationProps } from '../hooks/use-appear-animation';
+type AnimatedDivProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & MotionProps & {
+    animationConfig?: Partial<UseAppearAnimationProps>;
+};
+export declare const AnimatedDiv: FC<AnimatedDivProps>;
+export {};

package/dist/client/ui/header-wrapper.d.ts

@@ -0,0 +1,10 @@
+import { FC } from '../../../node_modules/react';
+interface HeaderWrapperProps {
+    children: React.ReactNode;
+    className?: string;
+    hideClassName?: string;
+    scrollPosition?: number;
+    hideBackgroundOnScroll?: boolean;
+}
+export declare const HeaderWrapper: FC<HeaderWrapperProps>;
+export {};

package/dist/client/ui/index.d.ts

@@ -1 +1,2 @@
+export * from './header-wrapper';
 export * from './infinity-list';

package/dist/server/denwa-web-shared.css

@@ -0,0 +1,53 @@
+html,
+body {
+  max-width: 100vw;
+  min-width: 280px;
+  margin: 0;
+  font-size: 16px;
+  font-weight: 400;
+  font-style: normal;
+  font-family: 'Inter', system-ui;
+}
+
+@media (max-width: 280px) {
+  body {
+    overflow-x: auto;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+.hyphens {
+  -webkit-hyphens: auto;
+  -webkit-hyphenate-limit-before: 3;
+  -webkit-hyphenate-limit-after: 3;
+  -webkit-hyphenate-limit-chars: 6 3 3;
+  -webkit-hyphenate-limit-lines: 2;
+  -webkit-hyphenate-limit-last: always;
+  -webkit-hyphenate-limit-zone: 8%;
+
+  -moz-hyphens: auto;
+  -moz-hyphenate-limit-chars: 6 3 3;
+  -moz-hyphenate-limit-lines: 2;
+  -moz-hyphenate-limit-last: always;
+  -moz-hyphenate-limit-zone: 8%;
+
+  -ms-hyphens: auto;
+  -ms-hyphenate-limit-chars: 6 3 3;
+  -ms-hyphenate-limit-lines: 2;
+  -ms-hyphenate-limit-last: always;
+  -ms-hyphenate-limit-zone: 8%;
+
+  hyphens: auto;
+  hyphenate-limit-chars: 6 3 3;
+  hyphenate-limit-lines: 2;
+  hyphenate-limit-last: always;
+  hyphenate-limit-zone: 8%;
+}