@sth87/shadcn-design-system 0.0.1

package/dist/esm/components/Interactive/CursorFollow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CursorFollow.js","sources":["../../../../src/components/Interactive/CursorFollow.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  motion,\n  useMotionValue,\n  useSpring,\n  AnimatePresence,\n  type HTMLMotionProps,\n  type SpringOptions,\n} from \"motion/react\";\n\nimport { cn } from \"@dsui/ui/index\";\n\n// Transition presets\ntype TransitionPreset = \"slow\" | \"normal\" | \"fast\" | \"realtime\";\n\nconst TRANSITION_PRESETS: Record<TransitionPreset, SpringOptions> = {\n  slow: { stiffness: 100, damping: 20, bounce: 0 },\n  normal: { stiffness: 500, damping: 50, bounce: 0 },\n  fast: { stiffness: 1000, damping: 80, bounce: 0 },\n  realtime: { stiffness: 2000, damping: 100, bounce: 0 },\n};\n\ntype CursorContextType = {\n  cursorPos: { x: number; y: number };\n  isActive: boolean;\n  containerRef: React.RefObject<HTMLDivElement | null>;\n  cursorRef: React.RefObject<HTMLDivElement | null>;\n};\n\nconst CursorContext = React.createContext<CursorContextType | undefined>(\n  undefined,\n);\n\nconst useCursor = (): CursorContextType => {\n  const context = React.useContext(CursorContext);\n  if (!context) {\n    throw new Error(\"useCursor must be used within a CursorProvider\");\n  }\n  return context;\n};\n\ntype Align =\n  | \"top\"\n  | \"top-left\"\n  | \"top-right\"\n  | \"bottom\"\n  | \"bottom-left\"\n  | \"bottom-right\"\n  | \"left\"\n  | \"right\"\n  | \"center\";\n\ntype CursorVariantKey = \"default\" | \"pointer\";\ntype CursorVariant = CursorVariantKey | React.ReactNode;\n\n// Predefined cursor variants\nconst cursorVariants: Record<CursorVariantKey, React.ReactNode> = {\n  default: null, // Use system cursor\n  pointer: (\n    <div className=\"h-5 w-5 rounded-full bg-white/30 border-2 border-white\" />\n  ),\n};\n\ntype CursorProviderProps = React.ComponentProps<\"div\"> & {\n  children: React.ReactNode;\n  /** Auto-setup cursor with variant (preset key or custom ReactNode) */\n  cursorType?: CursorVariant;\n  /** Auto-setup follow element with content */\n  followText?: React.ReactNode;\n  /** Show follow element (default: true when followText is provided) */\n  showFollow?: boolean;\n  /** Follow element alignment */\n  followAlign?: Align;\n  /** Follow element side offset */\n  followSideOffset?: number;\n  /** Follow element transition preset */\n  followTransition?: TransitionPreset;\n};\n\nfunction CursorProvider({\n  ref,\n  children,\n  cursorType = \"default\",\n  followText,\n  showFollow,\n  followAlign = \"bottom-right\",\n  followSideOffset = 15,\n  followTransition = \"normal\",\n  ...props\n}: CursorProviderProps) {\n  const [cursorPos, setCursorPos] = React.useState({ x: 0, y: 0 });\n  const [isActive, setIsActive] = React.useState(false);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const cursorRef = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(ref, () => containerRef.current as HTMLDivElement);\n\n  React.useEffect(() => {\n    if (!containerRef.current) return;\n\n    const parent = containerRef.current.parentElement;\n    if (!parent) return;\n\n    if (getComputedStyle(parent).position === \"static\") {\n      parent.style.position = \"relative\";\n    }\n\n    const handleMouseMove = (e: MouseEvent) => {\n      const rect = parent.getBoundingClientRect();\n      setCursorPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });\n      setIsActive(true);\n    };\n    const handleMouseLeave = () => setIsActive(false);\n\n    parent.addEventListener(\"mousemove\", handleMouseMove);\n    parent.addEventListener(\"mouseleave\", handleMouseLeave);\n\n    return () => {\n      parent.removeEventListener(\"mousemove\", handleMouseMove);\n      parent.removeEventListener(\"mouseleave\", handleMouseLeave);\n    };\n  }, []);\n\n  // Auto-setup: determine if we should show cursor and follow\n  const shouldShowCursor = cursorType !== undefined;\n  const shouldShowFollowElement = showFollow ?? followText !== undefined;\n\n  // Convert preset to SpringOptions\n  const transitionConfig = TRANSITION_PRESETS[followTransition];\n\n  return (\n    <CursorContext.Provider\n      value={{ cursorPos, isActive, containerRef, cursorRef }}\n    >\n      <div ref={containerRef} data-slot=\"cursor-provider\" {...props}>\n        {children}\n\n        {/* Auto-setup Cursor */}\n        {shouldShowCursor && <Cursor cursorType={cursorType} />}\n\n        {/* Auto-setup CursorFollow */}\n        {shouldShowFollowElement && (\n          <CursorFollow\n            followText={followText}\n            align={followAlign}\n            sideOffset={followSideOffset}\n            transition={transitionConfig}\n          />\n        )}\n      </div>\n    </CursorContext.Provider>\n  );\n}\n\ntype CursorProps = HTMLMotionProps<\"div\"> & {\n  children?: React.ReactNode;\n  cursorType?: CursorVariant;\n};\n\nfunction Cursor({\n  ref,\n  children,\n  cursorType = \"default\",\n  className,\n  style,\n  ...props\n}: CursorProps) {\n  const { cursorPos, isActive, containerRef, cursorRef } = useCursor();\n  React.useImperativeHandle(ref, () => cursorRef.current as HTMLDivElement);\n\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n\n  // Determine which content to render\n  const getCursorContent = () => {\n    if (children) return children;\n\n    // Check if cursorType is a preset key\n    if (typeof cursorType === \"string\" && cursorType in cursorVariants) {\n      return cursorVariants[cursorType as CursorVariantKey];\n    }\n\n    // Otherwise treat it as custom ReactNode\n    return cursorType;\n  };\n\n  const cursorContent = getCursorContent();\n\n  // Only hide system cursor if we have custom content to show\n  const shouldHideSystemCursor = cursorContent !== null;\n\n  React.useEffect(() => {\n    const parentElement = containerRef.current?.parentElement;\n\n    if (parentElement && isActive && shouldHideSystemCursor) {\n      parentElement.style.cursor = \"none\";\n    }\n\n    return () => {\n      if (parentElement) parentElement.style.cursor = \"default\";\n    };\n  }, [containerRef, isActive, shouldHideSystemCursor]);\n\n  React.useEffect(() => {\n    x.set(cursorPos.x);\n    y.set(cursorPos.y);\n  }, [cursorPos, x, y]);\n\n  // Only render if we have content to show\n  if (!cursorContent) return null;\n\n  return (\n    <AnimatePresence>\n      {isActive && (\n        <motion.div\n          ref={cursorRef}\n          data-slot=\"cursor\"\n          className={cn(\n            \"transform-[translate(-50%,-50%)] pointer-events-none z-[9999] absolute\",\n            className,\n          )}\n          style={{ top: y, left: x, ...style }}\n          initial={{ scale: 0, opacity: 0 }}\n          animate={{ scale: 1, opacity: 1 }}\n          exit={{ scale: 0, opacity: 0 }}\n          {...props}\n        >\n          {cursorContent}\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n\ntype CursorFollowProps = HTMLMotionProps<\"div\"> & {\n  sideOffset?: number;\n  align?: Align;\n  transition?: SpringOptions;\n  transitionPreset?: TransitionPreset;\n  children?: React.ReactNode;\n  followText?: React.ReactNode;\n};\n\nfunction CursorFollow({\n  ref,\n  sideOffset = 15,\n  align = \"bottom-right\",\n  children,\n  className,\n  style,\n  followText,\n  transition,\n  transitionPreset = \"normal\",\n  ...props\n}: CursorFollowProps) {\n  const { cursorPos, isActive, cursorRef } = useCursor();\n  const cursorFollowRef = React.useRef<HTMLDivElement>(null);\n  React.useImperativeHandle(\n    ref,\n    () => cursorFollowRef.current as HTMLDivElement,\n  );\n\n  const x = useMotionValue(0);\n  const y = useMotionValue(0);\n\n  // Use custom transition if provided, otherwise use preset\n  const finalTransition = transition || TRANSITION_PRESETS[transitionPreset];\n\n  const springX = useSpring(x, finalTransition);\n  const springY = useSpring(y, finalTransition);\n\n  const calculateOffset = React.useCallback(() => {\n    const rect = cursorFollowRef.current?.getBoundingClientRect();\n    const width = rect?.width ?? 0;\n    const height = rect?.height ?? 0;\n\n    let newOffset;\n\n    switch (align) {\n      case \"center\":\n        newOffset = { x: width / 2, y: height / 2 };\n        break;\n      case \"top\":\n        newOffset = { x: width / 2, y: height + sideOffset };\n        break;\n      case \"top-left\":\n        newOffset = { x: width + sideOffset, y: height + sideOffset };\n        break;\n      case \"top-right\":\n        newOffset = { x: -sideOffset, y: height + sideOffset };\n        break;\n      case \"bottom\":\n        newOffset = { x: width / 2, y: -sideOffset };\n        break;\n      case \"bottom-left\":\n        newOffset = { x: width + sideOffset, y: -sideOffset };\n        break;\n      case \"bottom-right\":\n        newOffset = { x: -sideOffset, y: -sideOffset };\n        break;\n      case \"left\":\n        newOffset = { x: width + sideOffset, y: height / 2 };\n        break;\n      case \"right\":\n        newOffset = { x: -sideOffset, y: height / 2 };\n        break;\n      default:\n        newOffset = { x: 0, y: 0 };\n    }\n\n    return newOffset;\n  }, [align, sideOffset]);\n\n  React.useEffect(() => {\n    const offset = calculateOffset();\n    const cursorRect = cursorRef.current?.getBoundingClientRect();\n    const cursorWidth = cursorRect?.width ?? 20;\n    const cursorHeight = cursorRect?.height ?? 20;\n\n    x.set(cursorPos.x - offset.x + cursorWidth / 2);\n    y.set(cursorPos.y - offset.y + cursorHeight / 2);\n  }, [calculateOffset, cursorPos, cursorRef, x, y]);\n\n  // Determine follow content based on children or followText\n  const getFollowContent = () => {\n    if (children) return children;\n\n    if (followText) {\n      // If followText is a string, wrap it with default styling\n      if (typeof followText === \"string\") {\n        return (\n          <div className=\"px-4 py-2 bg-white rounded-md shadow-lg text-sm font-medium\">\n            {followText}\n          </div>\n        );\n      }\n      // If it's a ReactNode, render it directly\n      return followText;\n    }\n\n    return null;\n  };\n\n  return (\n    <AnimatePresence>\n      {isActive && (\n        <motion.div\n          ref={cursorFollowRef}\n          data-slot=\"cursor-follow\"\n          className={cn(\n            \"transform-[translate(-50%,-50%)] pointer-events-none z-[9998] absolute\",\n            className,\n          )}\n          style={{ top: springY, left: springX, ...style }}\n          initial={{ scale: 0, opacity: 0 }}\n          animate={{ scale: 1, opacity: 1 }}\n          exit={{ scale: 0, opacity: 0 }}\n          {...props}\n        >\n          {getFollowContent()}\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n}\n\n// Hook for easy cursor setup (Method 2)\ntype useCursorFollowOptions = {\n  /** Cursor variant type (preset key or custom ReactNode) */\n  cursorType?: CursorVariant;\n  /** Follow element content */\n  followText?: React.ReactNode;\n  /** Show follow element */\n  showFollow?: boolean;\n  /** Follow element alignment */\n  align?: Align;\n  /** Follow element side offset */\n  sideOffset?: number;\n  /** Follow element transition preset */\n  transitionPreset?: TransitionPreset;\n  /** Additional className for the container */\n  className?: string;\n  /** Additional style for the container */\n  style?: React.CSSProperties;\n};\n\ntype UseCursorFollowType = {\n  ref: React.RefObject<HTMLDivElement | null>;\n  className: string;\n  style: React.CSSProperties;\n  \"data-cursor-container\": true;\n  children: (originalChildren: React.ReactNode) => React.ReactElement;\n};\n\nfunction useCursorFollow(\n  options: useCursorFollowOptions = {},\n): UseCursorFollowType {\n  const {\n    cursorType = \"default\",\n    followText,\n    showFollow,\n    align = \"bottom-right\",\n    sideOffset = 15,\n    transitionPreset = \"normal\",\n    className,\n    style,\n  } = options;\n\n  const [cursorPos, setCursorPos] = React.useState({ x: 0, y: 0 });\n  const [isActive, setIsActive] = React.useState(false);\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const cursorRef = React.useRef<HTMLDivElement>(null);\n\n  React.useEffect(() => {\n    if (!containerRef.current) return;\n\n    const element = containerRef.current;\n    if (getComputedStyle(element).position === \"static\") {\n      element.style.position = \"relative\";\n    }\n\n    const handleMouseMove = (e: MouseEvent) => {\n      const rect = element.getBoundingClientRect();\n      setCursorPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });\n      setIsActive(true);\n    };\n    const handleMouseLeave = () => setIsActive(false);\n\n    element.addEventListener(\"mousemove\", handleMouseMove);\n    element.addEventListener(\"mouseleave\", handleMouseLeave);\n\n    return () => {\n      element.removeEventListener(\"mousemove\", handleMouseMove);\n      element.removeEventListener(\"mouseleave\", handleMouseLeave);\n    };\n  }, []);\n\n  // Only hide system cursor if cursorType is not 'default'\n  const shouldHideSystemCursor = cursorType !== \"default\";\n\n  React.useEffect(() => {\n    if (!containerRef.current || !isActive || !shouldHideSystemCursor) return;\n    const element = containerRef.current;\n    element.style.cursor = \"none\";\n    return () => {\n      element.style.cursor = \"default\";\n    };\n  }, [isActive, shouldHideSystemCursor]);\n\n  // Render function for cursor elements\n  const renderCursorElements = React.useCallback(() => {\n    if (!isActive) return null;\n\n    return (\n      <CursorContext.Provider\n        value={{ cursorPos, isActive, containerRef, cursorRef }}\n      >\n        <Cursor cursorType={cursorType} />\n        {(showFollow ?? followText !== undefined) && (\n          <CursorFollow\n            followText={followText}\n            align={align}\n            sideOffset={sideOffset}\n            transitionPreset={transitionPreset}\n          />\n        )}\n      </CursorContext.Provider>\n    );\n  }, [\n    isActive,\n    cursorPos,\n    cursorType,\n    followText,\n    showFollow,\n    align,\n    sideOffset,\n    transitionPreset,\n  ]);\n\n  // Return props that can be spread on the container element\n  return {\n    ref: containerRef,\n    className: cn(\"relative\", className),\n    style: { ...style },\n    \"data-cursor-container\": true as const,\n    children: (originalChildren: React.ReactNode) => (\n      <>\n        {originalChildren}\n        {renderCursorElements()}\n      </>\n    ),\n  };\n}\n\nexport {\n  CursorProvider,\n  Cursor,\n  CursorFollow,\n  useCursor,\n  useCursorFollow,\n  TRANSITION_PRESETS,\n  type CursorContextType,\n  type CursorProviderProps,\n  type CursorProps,\n  type CursorFollowProps,\n  type CursorVariant,\n  type CursorVariantKey,\n  type Align,\n  type useCursorFollowOptions,\n  type TransitionPreset,\n};\n"],"names":["TRANSITION_PRESETS","CursorContext","React","useCursor","context","cursorVariants","jsx","CursorProvider","ref","children","cursorType","followText","showFollow","followAlign","followSideOffset","followTransition","props","cursorPos","setCursorPos","isActive","setIsActive","containerRef","cursorRef","parent","handleMouseMove","e","rect","handleMouseLeave","shouldShowCursor","shouldShowFollowElement","transitionConfig","Cursor","CursorFollow","className","style","x","useMotionValue","y","cursorContent","shouldHideSystemCursor","parentElement","AnimatePresence","motion","cn","sideOffset","align","transition","transitionPreset","cursorFollowRef","finalTransition","springX","useSpring","springY","calculateOffset","width","height","newOffset","offset","cursorRect","cursorWidth","cursorHeight","getFollowContent","useCursorFollow","options","element","renderCursorElements","jsxs","originalChildren","Fragment"],"mappings":"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"}

package/dist/esm/components/Marquee/Marquee.js

@@ -0,0 +1,419 @@
+import { jsx as z, jsxs as I, Fragment as W } from "react/jsx-runtime";
+import { Slot as V, cn as O, useComposedRefs as _ } from "@dsui/ui/index";
+import { cva as $ } from "class-variance-authority";
+import * as u from "react";
+const G = "Marquee", J = "MarqueeContent";
+function L() {
+  const i = /* @__PURE__ */ new Set();
+  let t = null;
+  const s = /* @__PURE__ */ new Map(), o = /* @__PURE__ */ new Map(), f = typeof ResizeObserver < "u";
+  let c = !1;
+  const b = /* @__PURE__ */ new WeakMap();
+  function e() {
+    c || (c = !0, queueMicrotask(() => {
+      c = !1;
+      for (const r of i)
+        r();
+    }));
+  }
+  function q() {
+    t && (t.disconnect(), t = null), s.clear(), o.clear();
+  }
+  function g(r) {
+    return i.add(r), () => {
+      i.delete(r), i.size === 0 && q();
+    };
+  }
+  function p(r, n, d) {
+    if (!r || !n) return null;
+    const a = s.get(r), l = s.get(n);
+    if (!a || !l) return null;
+    const m = d === "vertical" ? a.height : a.width, R = d === "vertical" ? l.height : l.width;
+    let v = b.get(r);
+    v || (v = /* @__PURE__ */ new WeakMap(), b.set(r, v));
+    let h = v.get(n);
+    h || (h = {
+      horizontal: { rootSize: -1, contentSize: -1 },
+      vertical: { rootSize: -1, contentSize: -1 }
+    }, v.set(n, h));
+    const w = h[d];
+    if (w.rootSize === m && w.contentSize === R)
+      return w;
+    const x = { rootSize: m, contentSize: R };
+    return h[d] = x, x;
+  }
+  function C(r, n) {
+    if (!f || !r || !n) return;
+    t || (t = new ResizeObserver((R) => {
+      let v = !1;
+      for (const h of R) {
+        const w = h.target, { width: x, height: N } = h.contentRect, y = s.get(w);
+        (!y || y.width !== x || y.height !== N) && (s.set(w, { width: x, height: N }), v = !0);
+      }
+      v && e();
+    })), o.set(r, (o.get(r) ?? 0) + 1), o.set(n, (o.get(n) ?? 0) + 1), t.observe(r), t.observe(n);
+    const d = r.getBoundingClientRect(), a = n.getBoundingClientRect(), l = { width: d.width, height: d.height }, m = {
+      width: a.width,
+      height: a.height
+    };
+    s.set(r, l), s.set(n, m), l.width > 0 && l.height > 0 && m.width > 0 && m.height > 0 && e();
+  }
+  function M(r, n) {
+    if (!t || !r || !n) return;
+    const d = (o.get(r) ?? 1) - 1, a = (o.get(n) ?? 1) - 1;
+    d <= 0 ? (t.unobserve(r), s.delete(r), o.delete(r)) : o.set(r, d), a <= 0 ? (t.unobserve(n), s.delete(n), o.delete(n)) : o.set(n, a);
+  }
+  return {
+    subscribe: g,
+    getSnapshot: p,
+    observe: C,
+    unobserve: M
+  };
+}
+const P = L();
+function A(i, t, s) {
+  const o = u.useCallback(
+    (c) => P.subscribe(c),
+    []
+  ), f = u.useCallback(
+    () => P.getSnapshot(
+      i.current,
+      t.current,
+      s
+    ),
+    [i, t, s]
+  );
+  return u.useSyncExternalStore(o, f, f);
+}
+const Q = u.createContext(void 0);
+function U(i) {
+  const t = u.useContext(Q);
+  return i ?? t ?? "ltr";
+}
+const K = u.createContext(null);
+function X(i) {
+  const t = u.useContext(K);
+  if (!t)
+    throw new Error(`\`${i}\` must be used within \`${G}\``);
+  return t;
+}
+function te(i) {
+  const {
+    side: t = "left",
+    dir: s,
+    speed: o = 50,
+    delay: f = 0,
+    loopCount: c = 0,
+    gap: b = "1rem",
+    asChild: e,
+    autoFill: q = !1,
+    pauseOnHover: g = !1,
+    pauseOnKeyboard: p = !1,
+    reverse: C = !1,
+    className: M,
+    style: r,
+    ref: n,
+    ...d
+  } = i, a = t === "top" || t === "bottom" ? "vertical" : "horizontal", l = U(s), m = u.useRef(null), R = u.useRef(null), v = _(n, m), [h, w] = u.useState(!1), x = u.useCallback(
+    (S) => {
+      p && S.key === " " && (S.preventDefault(), w((D) => !D));
+    },
+    [p]
+  ), N = A(m, R, a), y = u.useMemo(() => {
+    const S = Math.max(1e-3, o);
+    if (!N)
+      return (q ? 1e3 : 2e3) / S;
+    const { rootSize: D, contentSize: k } = N;
+    if (q) {
+      const H = k < D ? Math.ceil(D / k) : 1;
+      return k * H / S;
+    } else
+      return k < D ? D / S : k / S;
+  }, [N, o, q]), T = u.useMemo(
+    () => ({
+      "--marquee-duration": `${y}s`,
+      "--marquee-gap": b,
+      "--marquee-delay": `${f}s`,
+      "--marquee-loop-count": c === 0 || c === 1 / 0 ? "infinite" : c.toString(),
+      ...r
+    }),
+    [y, b, f, c, r]
+  ), j = u.useMemo(
+    () => ({
+      side: t,
+      orientation: a,
+      dir: l,
+      speed: o,
+      loopCount: c,
+      contentRef: R,
+      rootRef: m,
+      autoFill: q,
+      paused: h,
+      pauseOnHover: g,
+      pauseOnKeyboard: p,
+      reverse: C
+    }),
+    [
+      t,
+      a,
+      l,
+      o,
+      c,
+      q,
+      h,
+      g,
+      p,
+      C
+    ]
+  ), B = e ? V : "div";
+  return /* @__PURE__ */ z(K.Provider, { value: j, children: /* @__PURE__ */ z("div", { "data-slot": "marquee-wrapper", className: "grid", children: /* @__PURE__ */ z(
+    B,
+    {
+      role: "marquee",
+      "aria-live": "off",
+      "data-orientation": a,
+      "data-slot": "marquee",
+      dir: l,
+      tabIndex: p ? 0 : void 0,
+      ...d,
+      ref: v,
+      className: O(
+        "relative flex overflow-hidden motion-reduce:animate-none",
+        a === "vertical" && "h-full flex-col",
+        a === "horizontal" && "w-full",
+        h && "[&_*]:[animation-play-state:paused]",
+        g && "group",
+        p && "rounded-md focus-visible:border-ring focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        M
+      ),
+      style: T,
+      onKeyDown: p ? x : void 0
+    }
+  ) }) });
+}
+const F = $(
+  "flex min-w-full shrink-0 gap-(--marquee-gap)",
+  {
+    variants: {
+      side: {
+        left: "animate-marquee-left",
+        right: "animate-marquee-right",
+        top: "min-h-full min-w-auto animate-marquee-up flex-col",
+        bottom: "min-h-full min-w-auto animate-marquee-down flex-col"
+      },
+      dir: {
+        ltr: "",
+        rtl: ""
+      },
+      pauseOnHover: {
+        true: "group-hover:[animation-play-state:paused]",
+        false: ""
+      },
+      reverse: {
+        true: "[animation-direction:reverse]",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        side: "left",
+        dir: "rtl",
+        className: "animate-marquee-left-rtl"
+      },
+      {
+        side: "right",
+        dir: "rtl",
+        className: "animate-marquee-right-rtl"
+      }
+    ],
+    defaultVariants: {
+      side: "left",
+      dir: "ltr",
+      pauseOnHover: !1,
+      reverse: !1
+    }
+  }
+);
+function re(i) {
+  const {
+    className: t,
+    asChild: s,
+    ref: o,
+    children: f,
+    style: c,
+    ...b
+  } = i, e = X(J), q = _(o, e.contentRef), g = e.orientation === "vertical", p = e.dir === "rtl", C = A(
+    e.rootRef,
+    e.contentRef,
+    e.orientation
+  );
+  u.useEffect(() => {
+    if (e.rootRef.current && e.contentRef.current)
+      return P.observe(
+        e.rootRef.current,
+        e.contentRef.current
+      ), () => {
+        P.unobserve(
+          e.rootRef.current,
+          e.contentRef.current
+        );
+      };
+  }, [e.rootRef, e.contentRef]);
+  const M = u.useMemo(() => {
+    if (!e.autoFill || !C) return 1;
+    const { rootSize: a, contentSize: l } = C;
+    return l === 0 ? 1 : l < a ? Math.ceil(a / l) : 1;
+  }, [e.autoFill, C]), r = u.useCallback(
+    (a) => Array.from({ length: Math.max(0, a) }).map((l, m) => /* @__PURE__ */ z(u.Fragment, { children: f }, m)),
+    [f]
+  ), n = u.useMemo(
+    () => ({
+      ...c,
+      animationDuration: "var(--marquee-duration)",
+      animationDelay: "var(--marquee-delay)",
+      animationIterationCount: "var(--marquee-loop-count)",
+      animationDirection: e.reverse ? "reverse" : "normal"
+    }),
+    [c, e.reverse]
+  ), d = s ? V : "div";
+  return /* @__PURE__ */ I(W, { children: [
+    /* @__PURE__ */ I(
+      d,
+      {
+        "data-orientation": e.orientation,
+        "data-slot": "marquee-content",
+        ...b,
+        style: n,
+        className: O(
+          F({
+            side: e.side,
+            dir: e.dir,
+            pauseOnHover: e.pauseOnHover,
+            reverse: e.reverse,
+            className: t
+          }),
+          g && "flex-col",
+          g ? "mb-(--marquee-gap)" : p ? "ml-(--marquee-gap)" : "mr-(--marquee-gap)"
+        ),
+        children: [
+          /* @__PURE__ */ z(
+            "div",
+            {
+              ref: q,
+              className: O(
+                "flex shrink-0 gap-(--marquee-gap)",
+                g && "flex-col"
+              ),
+              children: f
+            }
+          ),
+          r(M - 1)
+        ]
+      }
+    ),
+    /* @__PURE__ */ z(
+      d,
+      {
+        role: "presentation",
+        "aria-hidden": "true",
+        ...b,
+        style: n,
+        className: O(
+          F({
+            side: e.side,
+            dir: e.dir,
+            pauseOnHover: e.pauseOnHover,
+            reverse: e.reverse,
+            className: t
+          }),
+          g && "flex-col"
+        ),
+        children: r(M)
+      }
+    )
+  ] });
+}
+function oe(i) {
+  const { className: t, asChild: s, ...o } = i;
+  return /* @__PURE__ */ z(
+    s ? V : "div",
+    {
+      "data-slot": "marquee-item",
+      ...o,
+      className: O("shrink-0", t)
+    }
+  );
+}
+const Y = $("pointer-events-none absolute z-10", {
+  variants: {
+    side: {
+      left: "top-0 left-0 h-full bg-gradient-to-r from-background to-transparent",
+      right: "top-0 right-0 h-full bg-gradient-to-l from-background to-transparent",
+      top: "top-0 left-0 w-full bg-gradient-to-b from-background to-transparent",
+      bottom: "bottom-0 left-0 w-full bg-gradient-to-t from-background to-transparent"
+    },
+    size: {
+      default: "",
+      sm: "",
+      lg: ""
+    }
+  },
+  compoundVariants: [
+    {
+      side: ["left", "right"],
+      size: "default",
+      className: "w-1/4"
+    },
+    {
+      side: ["left", "right"],
+      size: "sm",
+      className: "w-1/6"
+    },
+    {
+      side: ["left", "right"],
+      size: "lg",
+      className: "w-1/3"
+    },
+    {
+      side: ["top", "bottom"],
+      size: "default",
+      className: "h-1/4"
+    },
+    {
+      side: ["top", "bottom"],
+      size: "sm",
+      className: "h-1/6"
+    },
+    {
+      side: ["top", "bottom"],
+      size: "lg",
+      className: "h-1/3"
+    }
+  ],
+  defaultVariants: {
+    size: "default"
+  }
+});
+function ne(i) {
+  const { side: t, size: s, className: o, asChild: f, ...c } = i;
+  return /* @__PURE__ */ z(
+    f ? V : "div",
+    {
+      "data-size": s,
+      "data-slot": "marquee-edge",
+      ...c,
+      className: O(Y({ side: t, size: s, className: o }))
+    }
+  );
+}
+export {
+  re as Content,
+  ne as Edge,
+  oe as Item,
+  te as Marquee,
+  re as MarqueeContent,
+  ne as MarqueeEdge,
+  oe as MarqueeItem,
+  te as Root
+};
+//# sourceMappingURL=Marquee.js.map

package/dist/esm/components/Marquee/Marquee.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Marquee.js","sources":["../../../../src/components/Marquee/Marquee.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn, Slot, useComposedRefs } from \"@dsui/ui/index\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\n\nconst ROOT_NAME = \"Marquee\";\nconst CONTENT_NAME = \"MarqueeContent\";\n\ntype Side = \"left\" | \"right\" | \"top\" | \"bottom\";\ntype Orientation = \"horizontal\" | \"vertical\";\ntype Direction = \"ltr\" | \"rtl\";\n\ntype RootElement = React.ComponentRef<typeof MarqueeRoot>;\ntype ContentElement = React.ComponentRef<typeof MarqueeContent>;\n\ninterface Dimensions {\n  width: number;\n  height: number;\n}\n\ninterface ElementDimensions {\n  rootSize: number;\n  contentSize: number;\n}\n\nfunction createResizeObserverStore() {\n  const listeners = new Set<() => void>();\n  let observer: ResizeObserver | null = null;\n  const elements = new Map<Element, Dimensions>();\n  const refCounts = new Map<Element, number>();\n  const isSupported = typeof ResizeObserver !== \"undefined\";\n  let notificationScheduled = false;\n\n  const snapshotCache = new WeakMap<\n    Element,\n    WeakMap<\n      Element,\n      { horizontal: ElementDimensions; vertical: ElementDimensions }\n    >\n  >();\n\n  function notify() {\n    if (notificationScheduled) return;\n    notificationScheduled = true;\n    queueMicrotask(() => {\n      notificationScheduled = false;\n      for (const callback of listeners) {\n        callback();\n      }\n    });\n  }\n\n  function cleanup() {\n    if (observer) {\n      observer.disconnect();\n      observer = null;\n    }\n    elements.clear();\n    refCounts.clear();\n  }\n\n  function subscribe(callback: () => void) {\n    listeners.add(callback);\n    return () => {\n      listeners.delete(callback);\n      if (listeners.size === 0) {\n        cleanup();\n      }\n    };\n  }\n\n  function getSnapshot(\n    rootElement: RootElement | null,\n    contentElement: ContentElement | null,\n    orientation: Orientation,\n  ): ElementDimensions | null {\n    if (!rootElement || !contentElement) return null;\n\n    const rootDims = elements.get(rootElement);\n    const contentDims = elements.get(contentElement);\n\n    if (!rootDims || !contentDims) return null;\n\n    const rootSize =\n      orientation === \"vertical\" ? rootDims.height : rootDims.width;\n    const contentSize =\n      orientation === \"vertical\" ? contentDims.height : contentDims.width;\n\n    let rootCache = snapshotCache.get(rootElement);\n    if (!rootCache) {\n      rootCache = new WeakMap();\n      snapshotCache.set(rootElement, rootCache);\n    }\n\n    let contentCache = rootCache.get(contentElement);\n    if (!contentCache) {\n      contentCache = {\n        horizontal: { rootSize: -1, contentSize: -1 },\n        vertical: { rootSize: -1, contentSize: -1 },\n      };\n      rootCache.set(contentElement, contentCache);\n    }\n\n    const cached = contentCache[orientation];\n    if (cached.rootSize === rootSize && cached.contentSize === contentSize) {\n      return cached;\n    }\n\n    const snapshot = { rootSize, contentSize };\n    contentCache[orientation] = snapshot;\n    return snapshot;\n  }\n\n  function observe(\n    rootElement: RootElement | null,\n    contentElement: Element | null,\n  ) {\n    if (!isSupported || !rootElement || !contentElement) return;\n\n    if (!observer) {\n      observer = new ResizeObserver((entries) => {\n        let hasChanged = false;\n\n        for (const entry of entries) {\n          const element = entry.target;\n          const { width, height } = entry.contentRect;\n\n          const currentData = elements.get(element);\n\n          if (\n            !currentData ||\n            currentData.width !== width ||\n            currentData.height !== height\n          ) {\n            elements.set(element, { width, height });\n            hasChanged = true;\n          }\n        }\n\n        if (hasChanged) {\n          notify();\n        }\n      });\n    }\n\n    refCounts.set(rootElement, (refCounts.get(rootElement) ?? 0) + 1);\n    refCounts.set(contentElement, (refCounts.get(contentElement) ?? 0) + 1);\n\n    observer.observe(rootElement);\n    observer.observe(contentElement);\n\n    const rootRect = rootElement.getBoundingClientRect();\n    const contentRect = contentElement.getBoundingClientRect();\n\n    const rootData = { width: rootRect.width, height: rootRect.height };\n    const contentData = {\n      width: contentRect.width,\n      height: contentRect.height,\n    };\n\n    elements.set(rootElement, rootData);\n    elements.set(contentElement, contentData);\n\n    if (\n      rootData.width > 0 &&\n      rootData.height > 0 &&\n      contentData.width > 0 &&\n      contentData.height > 0\n    ) {\n      notify();\n    }\n  }\n\n  function unobserve(\n    rootElement: RootElement | null,\n    contentElement: Element | null,\n  ) {\n    if (!observer || !rootElement || !contentElement) return;\n\n    const rootCount = (refCounts.get(rootElement) ?? 1) - 1;\n    const contentCount = (refCounts.get(contentElement) ?? 1) - 1;\n\n    if (rootCount <= 0) {\n      observer.unobserve(rootElement);\n      elements.delete(rootElement);\n      refCounts.delete(rootElement);\n    } else {\n      refCounts.set(rootElement, rootCount);\n    }\n\n    if (contentCount <= 0) {\n      observer.unobserve(contentElement);\n      elements.delete(contentElement);\n      refCounts.delete(contentElement);\n    } else {\n      refCounts.set(contentElement, contentCount);\n    }\n  }\n\n  return {\n    subscribe,\n    getSnapshot,\n    observe,\n    unobserve,\n  };\n}\n\nconst resizeObserverStore = createResizeObserverStore();\n\nfunction useResizeObserverStore(\n  rootRef: React.RefObject<RootElement | null>,\n  contentRef: React.RefObject<ContentElement | null>,\n  orientation: Orientation,\n) {\n  const onSubscribe = React.useCallback(\n    (callback: () => void) => resizeObserverStore.subscribe(callback),\n    [],\n  );\n\n  const getSnapshot = React.useCallback(\n    () =>\n      resizeObserverStore.getSnapshot(\n        rootRef.current,\n        contentRef.current,\n        orientation,\n      ),\n    [rootRef, contentRef, orientation],\n  );\n\n  return React.useSyncExternalStore(onSubscribe, getSnapshot, getSnapshot);\n}\n\nconst DirectionContext = React.createContext<Direction | undefined>(undefined);\n\nfunction useDirection(dir?: Direction): Direction {\n  const contextDir = React.useContext(DirectionContext);\n  return dir ?? contextDir ?? \"ltr\";\n}\n\ninterface DivProps extends React.ComponentProps<\"div\"> {\n  asChild?: boolean;\n}\n\ninterface MarqueeContextValue {\n  side: Side;\n  orientation: Orientation;\n  dir: Direction;\n  speed: number;\n  loopCount: number;\n  contentRef: React.RefObject<ContentElement | null>;\n  rootRef: React.RefObject<RootElement | null>;\n  autoFill: boolean;\n  pauseOnHover: boolean;\n  pauseOnKeyboard: boolean;\n  reverse: boolean;\n  paused: boolean;\n}\n\nconst MarqueeContext = React.createContext<MarqueeContextValue | null>(null);\n\nfunction useMarqueeContext(consumerName: string) {\n  const context = React.useContext(MarqueeContext);\n  if (!context) {\n    throw new Error(`\\`${consumerName}\\` must be used within \\`${ROOT_NAME}\\``);\n  }\n  return context;\n}\n\ninterface MarqueeRootProps extends DivProps {\n  side?: Side;\n  dir?: Direction;\n  speed?: number;\n  delay?: number;\n  loopCount?: number;\n  gap?: string | number;\n  autoFill?: boolean;\n  pauseOnHover?: boolean;\n  pauseOnKeyboard?: boolean;\n  reverse?: boolean;\n}\n\nfunction MarqueeRoot(props: MarqueeRootProps) {\n  const {\n    side = \"left\",\n    dir: dirProp,\n    speed = 50,\n    delay = 0,\n    loopCount = 0,\n    gap = \"1rem\",\n    asChild,\n    autoFill = false,\n    pauseOnHover = false,\n    pauseOnKeyboard = false,\n    reverse = false,\n    className,\n    style: styleProp,\n    ref,\n    ...marqueeProps\n  } = props;\n\n  const orientation: Orientation =\n    side === \"top\" || side === \"bottom\" ? \"vertical\" : \"horizontal\";\n\n  const dir = useDirection(dirProp);\n\n  const rootRef = React.useRef<RootElement>(null);\n  const contentRef = React.useRef<ContentElement>(null);\n  const composedRef = useComposedRefs(ref, rootRef);\n\n  const [paused, setPaused] = React.useState(false);\n\n  const onKeyDown = React.useCallback(\n    (event: React.KeyboardEvent) => {\n      if (pauseOnKeyboard && event.key === \" \") {\n        event.preventDefault();\n        setPaused((prev) => !prev);\n      }\n    },\n    [pauseOnKeyboard],\n  );\n\n  const dimensions = useResizeObserverStore(rootRef, contentRef, orientation);\n\n  const duration = React.useMemo(() => {\n    const safeSpeed = Math.max(0.001, speed);\n\n    if (!dimensions) {\n      const defaultDistance = autoFill ? 1000 : 2000;\n      return defaultDistance / safeSpeed;\n    }\n\n    const { rootSize, contentSize } = dimensions;\n\n    if (autoFill) {\n      const multiplier =\n        contentSize < rootSize ? Math.ceil(rootSize / contentSize) : 1;\n      return (contentSize * multiplier) / safeSpeed;\n    } else {\n      return contentSize < rootSize\n        ? rootSize / safeSpeed\n        : contentSize / safeSpeed;\n    }\n  }, [dimensions, speed, autoFill]);\n\n  const style = React.useMemo<React.CSSProperties>(\n    () => ({\n      \"--marquee-duration\": `${duration}s`,\n      \"--marquee-gap\": gap,\n      \"--marquee-delay\": `${delay}s`,\n      \"--marquee-loop-count\":\n        loopCount === 0 || loopCount === Infinity\n          ? \"infinite\"\n          : loopCount.toString(),\n      ...styleProp,\n    }),\n    [duration, gap, delay, loopCount, styleProp],\n  );\n\n  const contextValue = React.useMemo<MarqueeContextValue>(\n    () => ({\n      side,\n      orientation,\n      dir,\n      speed,\n      loopCount,\n      contentRef,\n      rootRef,\n      autoFill,\n      paused,\n      pauseOnHover,\n      pauseOnKeyboard,\n      reverse,\n    }),\n    [\n      side,\n      orientation,\n      dir,\n      speed,\n      loopCount,\n      autoFill,\n      paused,\n      pauseOnHover,\n      pauseOnKeyboard,\n      reverse,\n    ],\n  );\n\n  const MarqueePrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <MarqueeContext.Provider value={contextValue}>\n      <div data-slot=\"marquee-wrapper\" className=\"grid\">\n        <MarqueePrimitive\n          role=\"marquee\"\n          aria-live=\"off\"\n          data-orientation={orientation}\n          data-slot=\"marquee\"\n          dir={dir}\n          tabIndex={pauseOnKeyboard ? 0 : undefined}\n          {...marqueeProps}\n          ref={composedRef}\n          className={cn(\n            \"relative flex overflow-hidden motion-reduce:animate-none\",\n            orientation === \"vertical\" && \"h-full flex-col\",\n            orientation === \"horizontal\" && \"w-full\",\n            paused && \"[&_*]:[animation-play-state:paused]\",\n            pauseOnHover && \"group\",\n            pauseOnKeyboard &&\n              \"rounded-md focus-visible:border-ring focus-visible:outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n            className,\n          )}\n          style={style}\n          onKeyDown={pauseOnKeyboard ? onKeyDown : undefined}\n        />\n      </div>\n    </MarqueeContext.Provider>\n  );\n}\n\nconst marqueeContentVariants = cva(\n  \"flex min-w-full shrink-0 gap-(--marquee-gap)\",\n  {\n    variants: {\n      side: {\n        left: \"animate-marquee-left\",\n        right: \"animate-marquee-right\",\n        top: \"min-h-full min-w-auto animate-marquee-up flex-col\",\n        bottom: \"min-h-full min-w-auto animate-marquee-down flex-col\",\n      },\n      dir: {\n        ltr: \"\",\n        rtl: \"\",\n      },\n      pauseOnHover: {\n        true: \"group-hover:[animation-play-state:paused]\",\n        false: \"\",\n      },\n      reverse: {\n        true: \"[animation-direction:reverse]\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        side: \"left\",\n        dir: \"rtl\",\n        className: \"animate-marquee-left-rtl\",\n      },\n      {\n        side: \"right\",\n        dir: \"rtl\",\n        className: \"animate-marquee-right-rtl\",\n      },\n    ],\n    defaultVariants: {\n      side: \"left\",\n      dir: \"ltr\",\n      pauseOnHover: false,\n      reverse: false,\n    },\n  },\n);\n\nfunction MarqueeContent(props: DivProps) {\n  const {\n    className,\n    asChild,\n    ref,\n    children,\n    style: styleProp,\n    ...contentProps\n  } = props;\n\n  const context = useMarqueeContext(CONTENT_NAME);\n  const composedRef = useComposedRefs(ref, context.contentRef);\n\n  const isVertical = context.orientation === \"vertical\";\n  const isRtl = context.dir === \"rtl\";\n\n  const dimensions = useResizeObserverStore(\n    context.rootRef,\n    context.contentRef,\n    context.orientation,\n  );\n\n  React.useEffect(() => {\n    if (context.rootRef.current && context.contentRef.current) {\n      resizeObserverStore.observe(\n        context.rootRef.current,\n        context.contentRef.current,\n      );\n\n      return () => {\n        resizeObserverStore.unobserve(\n          context.rootRef.current,\n          context.contentRef.current,\n        );\n      };\n    }\n  }, [context.rootRef, context.contentRef]);\n\n  const multiplier = React.useMemo(() => {\n    if (!context.autoFill || !dimensions) return 1;\n\n    const { rootSize, contentSize } = dimensions;\n    if (contentSize === 0) return 1;\n\n    return contentSize < rootSize ? Math.ceil(rootSize / contentSize) : 1;\n  }, [context.autoFill, dimensions]);\n\n  const onMultipliedChildrenRender = React.useCallback(\n    (count: number) => {\n      return Array.from({ length: Math.max(0, count) }).map((_, i) => (\n        <React.Fragment key={i}>{children}</React.Fragment>\n      ));\n    },\n    [children],\n  );\n\n  const style = React.useMemo(\n    () => ({\n      ...styleProp,\n      animationDuration: \"var(--marquee-duration)\",\n      animationDelay: \"var(--marquee-delay)\",\n      animationIterationCount: \"var(--marquee-loop-count)\",\n      animationDirection: context.reverse ? \"reverse\" : \"normal\",\n    }),\n    [styleProp, context.reverse],\n  );\n\n  const ContentPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <>\n      <ContentPrimitive\n        data-orientation={context.orientation}\n        data-slot=\"marquee-content\"\n        {...contentProps}\n        style={style}\n        className={cn(\n          marqueeContentVariants({\n            side: context.side,\n            dir: context.dir,\n            pauseOnHover: context.pauseOnHover,\n            reverse: context.reverse,\n            className,\n          }),\n          isVertical && \"flex-col\",\n          isVertical\n            ? \"mb-(--marquee-gap)\"\n            : isRtl\n              ? \"ml-(--marquee-gap)\"\n              : \"mr-(--marquee-gap)\",\n        )}\n      >\n        <div\n          ref={composedRef}\n          className={cn(\n            \"flex shrink-0 gap-(--marquee-gap)\",\n            isVertical && \"flex-col\",\n          )}\n        >\n          {children}\n        </div>\n        {onMultipliedChildrenRender(multiplier - 1)}\n      </ContentPrimitive>\n      <ContentPrimitive\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        {...contentProps}\n        style={style}\n        className={cn(\n          marqueeContentVariants({\n            side: context.side,\n            dir: context.dir,\n            pauseOnHover: context.pauseOnHover,\n            reverse: context.reverse,\n            className,\n          }),\n          isVertical && \"flex-col\",\n        )}\n      >\n        {onMultipliedChildrenRender(multiplier)}\n      </ContentPrimitive>\n    </>\n  );\n}\n\nfunction MarqueeItem(props: DivProps) {\n  const { className, asChild, ...itemProps } = props;\n\n  const ItemPrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <ItemPrimitive\n      data-slot=\"marquee-item\"\n      {...itemProps}\n      className={cn(\"shrink-0\", className)}\n    />\n  );\n}\n\nconst marqueeEdgeVariants = cva(\"pointer-events-none absolute z-10\", {\n  variants: {\n    side: {\n      left: \"top-0 left-0 h-full bg-gradient-to-r from-background to-transparent\",\n      right:\n        \"top-0 right-0 h-full bg-gradient-to-l from-background to-transparent\",\n      top: \"top-0 left-0 w-full bg-gradient-to-b from-background to-transparent\",\n      bottom:\n        \"bottom-0 left-0 w-full bg-gradient-to-t from-background to-transparent\",\n    },\n    size: {\n      default: \"\",\n      sm: \"\",\n      lg: \"\",\n    },\n  },\n  compoundVariants: [\n    {\n      side: [\"left\", \"right\"],\n      size: \"default\",\n      className: \"w-1/4\",\n    },\n    {\n      side: [\"left\", \"right\"],\n      size: \"sm\",\n      className: \"w-1/6\",\n    },\n    {\n      side: [\"left\", \"right\"],\n      size: \"lg\",\n      className: \"w-1/3\",\n    },\n    {\n      side: [\"top\", \"bottom\"],\n      size: \"default\",\n      className: \"h-1/4\",\n    },\n    {\n      side: [\"top\", \"bottom\"],\n      size: \"sm\",\n      className: \"h-1/6\",\n    },\n    {\n      side: [\"top\", \"bottom\"],\n      size: \"lg\",\n      className: \"h-1/3\",\n    },\n  ],\n  defaultVariants: {\n    size: \"default\",\n  },\n});\n\ninterface MarqueeEdgeProps\n  extends VariantProps<typeof marqueeEdgeVariants>, DivProps {}\n\nfunction MarqueeEdge(props: MarqueeEdgeProps) {\n  const { side, size, className, asChild, ...edgeProps } = props;\n\n  const EdgePrimitive = asChild ? Slot : \"div\";\n\n  return (\n    <EdgePrimitive\n      data-size={size}\n      data-slot=\"marquee-edge\"\n      {...edgeProps}\n      className={cn(marqueeEdgeVariants({ side, size, className }))}\n    />\n  );\n}\n\nexport {\n  MarqueeRoot as Root,\n  MarqueeContent as Content,\n  MarqueeItem as Item,\n  MarqueeEdge as Edge,\n  //\n  MarqueeRoot as Marquee,\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeEdge,\n  // types\n  type MarqueeRootProps,\n  type MarqueeEdgeProps,\n};\n"],"names":["ROOT_NAME","CONTENT_NAME","createResizeObserverStore","listeners","observer","elements","refCounts","isSupported","notificationScheduled","snapshotCache","notify","callback","cleanup","subscribe","getSnapshot","rootElement","contentElement","orientation","rootDims","contentDims","rootSize","contentSize","rootCache","contentCache","cached","snapshot","observe","entries","hasChanged","entry","element","width","height","currentData","rootRect","contentRect","rootData","contentData","unobserve","rootCount","contentCount","resizeObserverStore","useResizeObserverStore","rootRef","contentRef","onSubscribe","React","DirectionContext","useDirection","dir","contextDir","MarqueeContext","useMarqueeContext","consumerName","context","MarqueeRoot","props","side","dirProp","speed","delay","loopCount","gap","asChild","autoFill","pauseOnHover","pauseOnKeyboard","reverse","className","styleProp","ref","marqueeProps","composedRef","useComposedRefs","paused","setPaused","onKeyDown","event","prev","dimensions","duration","safeSpeed","multiplier","style","contextValue","MarqueePrimitive","Slot","jsx","cn","marqueeContentVariants","cva","MarqueeContent","children","contentProps","isVertical","isRtl","onMultipliedChildrenRender","count","_","i","ContentPrimitive","jsxs","Fragment","MarqueeItem","itemProps","marqueeEdgeVariants","MarqueeEdge","size","edgeProps"],"mappings":"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"}

package/dist/esm/components/Marquee/MarqueeWrapper.js

@@ -0,0 +1,25 @@
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import * as f from "react";
+import { Root as c, Content as p, Item as q, Edge as l } from "./Marquee.js";
+function b({
+  items: r,
+  fade: o,
+  children: n,
+  side: t = "left",
+  ...a
+}) {
+  const i = r && r.length > 0, m = f.Children.count(n) > 0;
+  i && m && console.warn(
+    "Marquee: Both 'items' and 'children' are provided. 'items' will be used."
+  );
+  const s = t === "top" || t === "bottom" ? ["top", "bottom"] : ["left", "right"];
+  return i ? /* @__PURE__ */ h(c, { ...a, side: t, children: [
+    /* @__PURE__ */ e(p, { children: r.map((d, u) => /* @__PURE__ */ e(q, { children: d }, u)) }),
+    o && /* @__PURE__ */ e(l, { side: s[0] }),
+    o && /* @__PURE__ */ e(l, { side: s[1] })
+  ] }) : /* @__PURE__ */ e(c, { ...a, side: t, children: n });
+}
+export {
+  b as MarqueeWrapper
+};
+//# sourceMappingURL=MarqueeWrapper.js.map

package/dist/esm/components/Marquee/MarqueeWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarqueeWrapper.js","sources":["../../../../src/components/Marquee/MarqueeWrapper.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Root, Content, Item, Edge } from \"./Marquee\";\nimport type { MarqueeRootProps } from \"./Marquee\";\n\ninterface MarqueeWrapperProps extends MarqueeRootProps {\n  items?: React.ReactNode[];\n  fade?: boolean;\n}\n\nfunction MarqueeWrapper({\n  items,\n  fade,\n  children,\n  side = \"left\",\n  ...props\n}: MarqueeWrapperProps) {\n  const hasItems = items && items.length > 0;\n  const hasChildren = React.Children.count(children) > 0;\n\n  if (hasItems && hasChildren) {\n    console.warn(\n      \"Marquee: Both 'items' and 'children' are provided. 'items' will be used.\",\n    );\n  }\n\n  const isVertical = side === \"top\" || side === \"bottom\";\n  const fadeSides = isVertical ? [\"top\", \"bottom\"] : [\"left\", \"right\"];\n\n  if (hasItems) {\n    return (\n      <Root {...props} side={side}>\n        <Content>\n          {items.map((item, index) => (\n            <Item key={index}>{item}</Item>\n          ))}\n        </Content>\n        {fade && (\n          <Edge side={fadeSides[0] as \"left\" | \"right\" | \"top\" | \"bottom\"} />\n        )}\n        {fade && (\n          <Edge side={fadeSides[1] as \"left\" | \"right\" | \"top\" | \"bottom\"} />\n        )}\n      </Root>\n    );\n  }\n\n  return (\n    <Root {...props} side={side}>\n      {children}\n    </Root>\n  );\n}\n\nexport { MarqueeWrapper };\nexport type { MarqueeWrapperProps };\n"],"names":["MarqueeWrapper","items","fade","children","side","props","hasItems","hasChildren","React","fadeSides","jsxs","Root","jsx","Content","item","index","Item","Edge"],"mappings":";;;AAWA,SAASA,EAAe;AAAA,EACtB,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GAAwB;AACtB,QAAMC,IAAWL,KAASA,EAAM,SAAS,GACnCM,IAAcC,EAAM,SAAS,MAAML,CAAQ,IAAI;AAErD,EAAIG,KAAYC,KACd,QAAQ;AAAA,IACN;AAAA,EAAA;AAKJ,QAAME,IADaL,MAAS,SAASA,MAAS,WACf,CAAC,OAAO,QAAQ,IAAI,CAAC,QAAQ,OAAO;AAEnE,SAAIE,IAEA,gBAAAI,EAACC,GAAA,EAAM,GAAGN,GAAO,MAAAD,GACf,UAAA;AAAA,IAAA,gBAAAQ,EAACC,GAAA,EACE,UAAAZ,EAAM,IAAI,CAACa,GAAMC,MAChB,gBAAAH,EAACI,GAAA,EAAkB,UAAAF,EAAA,GAARC,CAAa,CACzB,GACH;AAAA,IACCb,KACC,gBAAAU,EAACK,GAAA,EAAK,MAAMR,EAAU,CAAC,GAA0C;AAAA,IAElEP,KACC,gBAAAU,EAACK,GAAA,EAAK,MAAMR,EAAU,CAAC,EAAA,CAA0C;AAAA,EAAA,GAErE,IAKF,gBAAAG,EAACD,GAAA,EAAM,GAAGN,GAAO,MAAAD,GACd,UAAAD,GACH;AAEJ;"}

package/dist/esm/components/Marquee/index.js

@@ -0,0 +1,15 @@
+import { Edge as e, Item as t, Content as r } from "./Marquee.js";
+import { MarqueeWrapper as a } from "./MarqueeWrapper.js";
+const m = Object.assign(a, {
+  Content: r,
+  Item: t,
+  Edge: e,
+  //
+  MarqueeContent: r,
+  MarqueeItem: t,
+  MarqueeEdge: e
+});
+export {
+  m as Marquee
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Marquee/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/Marquee/index.ts"],"sourcesContent":["import {\n  Content,\n  Item,\n  Edge,\n  //\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeEdge,\n  // types\n  type MarqueeRootProps,\n  type MarqueeEdgeProps,\n} from \"./Marquee\";\nimport { MarqueeWrapper } from \"./MarqueeWrapper\";\n\nconst Marquee = Object.assign(MarqueeWrapper, {\n  Content,\n  Item,\n  Edge,\n  //\n  MarqueeContent,\n  MarqueeItem,\n  MarqueeEdge,\n});\n\nexport { Marquee };\nexport type { MarqueeRootProps, MarqueeEdgeProps };\n"],"names":["Marquee","MarqueeWrapper","Content","Item","Edge","MarqueeContent","MarqueeItem","MarqueeEdge"],"mappings":";;AAcA,MAAMA,IAAU,OAAO,OAAOC,GAAgB;AAAA,EAAA,SAC5CC;AAAAA,EAAA,MACAC;AAAAA,EAAA,MACAC;AAAAA;AAAAA,EAEA,gBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AACF,CAAC;"}