@xiping/react-components 1.0.26 → 1.0.28

package/dist/es/components/comic-text/ComicText.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+type ComicTextProps = {
+    children: string;
+    className?: string;
+    style?: CSSProperties;
+    fontSize?: number;
+};
+export declare function ComicText({ children, className, style, fontSize, }: ComicTextProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/es/components/comic-text/ComicText.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { cn as i } from "../../utils/utils.js";
+import { motion as p } from "motion/react";
+function m({
+  children: t,
+  className: o,
+  style: a,
+  fontSize: r = 5
+}) {
+  if (typeof t != "string")
+    throw new Error("children must be a string");
+  const e = "#EF4444";
+  return /* @__PURE__ */ n(
+    p.div,
+    {
+      className: i("select-none text-center", o),
+      style: {
+        fontSize: `${r}rem`,
+        fontFamily: "'Bangers', 'Comic Sans MS', 'Impact', sans-serif",
+        fontWeight: "900",
+        WebkitTextStroke: `${r * 0.35}px #000000`,
+        // Thick black outline
+        transform: "skewX(-10deg)",
+        textTransform: "uppercase",
+        filter: `
+          drop-shadow(5px 5px 0px #000000) 
+          drop-shadow(3px 3px 0px ${e})
+        `,
+        backgroundColor: "#FACC15",
+        backgroundImage: `radial-gradient(circle at 1px 1px, ${e} 1px, transparent 0)`,
+        backgroundSize: "8px 8px",
+        backgroundClip: "text",
+        WebkitBackgroundClip: "text",
+        WebkitTextFillColor: "transparent",
+        ...a
+      },
+      initial: { opacity: 0, scale: 0.8, rotate: -2 },
+      animate: { opacity: 1, scale: 1, rotate: 0 },
+      transition: {
+        duration: 0.6,
+        ease: [0.175, 0.885, 0.32, 1.275],
+        type: "spring"
+      },
+      children: t
+    }
+  );
+}
+export {
+  m as ComicText
+};

package/dist/es/components/comic-text/index.d.ts

@@ -0,0 +1 @@
+export * from './ComicText';

package/dist/es/components/flip-text/FlipText.d.ts

@@ -0,0 +1,20 @@
+import { Variants, MotionProps } from 'motion/react';
+import { ElementType, default as React } from 'react';
+interface FlipTextProps extends MotionProps {
+    /** The duration of the animation */
+    duration?: number;
+    /** The delay between each character */
+    delayMultiple?: number;
+    /** The variants of the animation */
+    framerProps?: Variants;
+    /** The class name of the component */
+    className?: string;
+    /** The element type of the component */
+    as?: ElementType;
+    /** The children of the component */
+    children: React.ReactNode;
+    /** The variants of the animation */
+    variants?: Variants;
+}
+export declare function FlipText({ children, duration, delayMultiple, className, as: Component, variants, ...props }: FlipTextProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/es/components/flip-text/FlipText.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import { motion as p, AnimatePresence as h } from "motion/react";
+import { cn as f } from "../../utils/utils.js";
+import x from "react";
+const u = {
+  hidden: { rotateX: -90, opacity: 0 },
+  visible: { rotateX: 0, opacity: 1 }
+};
+function w({
+  children: i,
+  duration: n = 0.5,
+  delayMultiple: a = 0.08,
+  className: o,
+  as: r = "span",
+  variants: s,
+  ...c
+}) {
+  const m = p.create(r), d = x.Children.toArray(i).join("").split("");
+  return /* @__PURE__ */ t("div", { className: "flex justify-center space-x-2", children: /* @__PURE__ */ t(h, { mode: "wait", children: d.map((l, e) => /* @__PURE__ */ t(
+    m,
+    {
+      initial: "hidden",
+      animate: "visible",
+      exit: "hidden",
+      variants: s || u,
+      transition: { duration: n, delay: e * a },
+      className: f("origin-center drop-shadow-sm", o),
+      ...c,
+      children: l
+    },
+    e
+  )) }) });
+}
+export {
+  w as FlipText
+};

package/dist/es/components/flip-text/index.d.ts

@@ -0,0 +1 @@
+export * from './FlipText';

package/dist/es/components/video-dialog/VideoDialog.d.ts

@@ -0,0 +1,10 @@
+type AnimationStyle = "from-bottom" | "from-center" | "from-top" | "from-left" | "from-right" | "fade" | "top-in-bottom-out" | "left-in-right-out";
+interface VideoProps {
+    animationStyle?: AnimationStyle;
+    videoSrc: string;
+    thumbnailSrc: string;
+    thumbnailAlt?: string;
+    className?: string;
+}
+export declare function VideoDialog({ animationStyle, videoSrc, thumbnailSrc, thumbnailAlt, className, }: VideoProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/es/components/video-dialog/VideoDialog.js

@@ -0,0 +1,127 @@
+"use client";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { useState as m } from "react";
+import { AnimatePresence as p, motion as t } from "motion/react";
+import { cn as u } from "../../utils/utils.js";
+import y from "../../node_modules/.pnpm/lucide-react@0.525.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/play.js";
+import f from "../../node_modules/.pnpm/lucide-react@0.525.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/x.js";
+const x = {
+  "from-bottom": {
+    initial: { y: "100%", opacity: 0 },
+    animate: { y: 0, opacity: 1 },
+    exit: { y: "100%", opacity: 0 }
+  },
+  "from-center": {
+    initial: { scale: 0.5, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    exit: { scale: 0.5, opacity: 0 }
+  },
+  "from-top": {
+    initial: { y: "-100%", opacity: 0 },
+    animate: { y: 0, opacity: 1 },
+    exit: { y: "-100%", opacity: 0 }
+  },
+  "from-left": {
+    initial: { x: "-100%", opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    exit: { x: "-100%", opacity: 0 }
+  },
+  "from-right": {
+    initial: { x: "100%", opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    exit: { x: "100%", opacity: 0 }
+  },
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 }
+  },
+  "top-in-bottom-out": {
+    initial: { y: "-100%", opacity: 0 },
+    animate: { y: 0, opacity: 1 },
+    exit: { y: "100%", opacity: 0 }
+  },
+  "left-in-right-out": {
+    initial: { x: "-100%", opacity: 0 },
+    animate: { x: 0, opacity: 1 },
+    exit: { x: "100%", opacity: 0 }
+  }
+};
+function k({
+  animationStyle: o = "from-center",
+  videoSrc: r,
+  thumbnailSrc: l,
+  thumbnailAlt: n = "Video thumbnail",
+  className: s
+}) {
+  const [c, a] = m(!1), d = x[o];
+  return /* @__PURE__ */ i("div", { className: u("relative", s), children: [
+    /* @__PURE__ */ i(
+      "div",
+      {
+        className: "group relative cursor-pointer",
+        onClick: () => a(!0),
+        children: [
+          /* @__PURE__ */ e(
+            "img",
+            {
+              src: l,
+              alt: n,
+              width: 1920,
+              height: 1080,
+              className: "w-full rounded-md border shadow-lg transition-all duration-200 ease-out group-hover:brightness-[0.8]"
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "absolute inset-0 flex scale-[0.9] items-center justify-center rounded-2xl transition-all duration-200 ease-out group-hover:scale-100", children: /* @__PURE__ */ e("div", { className: "flex size-28 items-center justify-center rounded-full bg-primary/10 backdrop-blur-md", children: /* @__PURE__ */ e(
+            "div",
+            {
+              className: "relative flex size-20 scale-100 items-center justify-center rounded-full bg-gradient-to-b from-primary/30 to-primary shadow-md transition-all duration-200 ease-out group-hover:scale-[1.2]",
+              children: /* @__PURE__ */ e(
+                y,
+                {
+                  className: "size-8 scale-100 fill-white text-white transition-transform duration-200 ease-out group-hover:scale-105",
+                  style: {
+                    filter: "drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06))"
+                  }
+                }
+              )
+            }
+          ) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(p, { children: c && /* @__PURE__ */ e(
+      t.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        onClick: () => a(!1),
+        exit: { opacity: 0 },
+        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-md",
+        children: /* @__PURE__ */ i(
+          t.div,
+          {
+            ...d,
+            transition: { type: "spring", damping: 30, stiffness: 300 },
+            className: "relative mx-4 aspect-video w-full max-w-4xl md:mx-0",
+            children: [
+              /* @__PURE__ */ e(t.button, { className: "absolute -top-16 right-0 rounded-full bg-neutral-900/50 p-2 text-xl text-white ring-1 backdrop-blur-md dark:bg-neutral-100/50 dark:text-black", children: /* @__PURE__ */ e(f, { className: "size-5" }) }),
+              /* @__PURE__ */ e("div", { className: "relative isolate z-[1] size-full overflow-hidden rounded-2xl border-2 border-white", children: /* @__PURE__ */ e(
+                "iframe",
+                {
+                  src: r,
+                  className: "size-full rounded-2xl",
+                  allowFullScreen: !0,
+                  allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                }
+              ) })
+            ]
+          }
+        )
+      }
+    ) })
+  ] });
+}
+export {
+  k as VideoDialog
+};

package/dist/es/components/video-dialog/index.d.ts

@@ -0,0 +1 @@
+export * from './VideoDialog';

package/dist/es/index.d.ts

@@ -17,3 +17,6 @@ export * from './hooks/useStayTimeReport';
 export * from './components/pointer';
 export * from './components/sparkles-text';
 export * from './components/blur-fade';
+export * from './components/video-dialog';
+export * from './components/comic-text';
+export * from './components/flip-text';

package/dist/es/index.js

@@ -2,16 +2,16 @@
 import { Button as t } from "./components/button/Button.js";
 import { TxtReader as f } from "./components/txt-reader/TxtReader.js";
 import { HyperText as x } from "./components/hyper-text/index.js";
-import { TypingAnimation as n } from "./components/typing-animation/index.js";
+import { TypingAnimation as i } from "./components/typing-animation/index.js";
 import { QRCode as d } from "./components/qr-code/index.js";
-import { Confetti as u, ConfettiButton as c } from "./components/confetti-button/index.js";
-import { useStayTimeReport as T } from "./hooks/useStayTimeReport.js";
+import { Confetti as u, ConfettiButton as l } from "./components/confetti-button/index.js";
+import { useStayTimeReport as c } from "./hooks/useStayTimeReport.js";
 import { default as g } from "./components/pinch-content/PinchContent.js";
 import { default as B } from "./components/image-viewer/ImageViewer.js";
-import { ShimmerButton as y } from "./components/shimmer-button/ShimmerButton.js";
-import { default as I } from "./components/image-compare/ImageCompare.js";
-import { TextAnimate as S } from "./components/text-animate/TextAnimate.js";
-import { Dock as F, DockIcon as P, dockVariants as V } from "./components/dock/Duck.js";
+import { ShimmerButton as h } from "./components/shimmer-button/ShimmerButton.js";
+import { default as F } from "./components/image-compare/ImageCompare.js";
+import { TextAnimate as R } from "./components/text-animate/TextAnimate.js";
+import { Dock as V, DockIcon as A, dockVariants as P } from "./components/dock/Duck.js";
 import { TxtEditor as E } from "./components/txt-editor/TxtEditor.js";
 import { Message as H } from "./components/message/Message.js";
 import { default as Q } from "./node_modules/.pnpm/react-force-graph-3d@1.28.0_react@19.1.0/node_modules/react-force-graph-3d/dist/react-force-graph-3d.js";
@@ -19,28 +19,34 @@ import { default as j } from "./node_modules/.pnpm/canvas-confetti@1.9.3/node_mo
 import { Pointer as v } from "./components/pointer/Pointer.js";
 import { SparklesText as J } from "./components/sparkles-text/SparklesText.js";
 import { BlurFade as L } from "./components/blur-fade/BlurFade.js";
+import { VideoDialog as O } from "./components/video-dialog/VideoDialog.js";
+import { ComicText as W } from "./components/comic-text/ComicText.js";
+import { FlipText as Y } from "./components/flip-text/FlipText.js";
 export {
   L as BlurFade,
   t as Button,
+  W as ComicText,
   u as Confetti,
-  c as ConfettiButton,
-  F as Dock,
-  P as DockIcon,
+  l as ConfettiButton,
+  V as Dock,
+  A as DockIcon,
+  Y as FlipText,
   Q as ForceGraph3D,
   x as HyperText,
-  I as ImageCompare,
+  F as ImageCompare,
   B as ImageViewer,
   H as Message,
   g as PinchContent,
   v as Pointer,
   d as QRCode,
-  y as ShimmerButton,
+  h as ShimmerButton,
   J as SparklesText,
-  S as TextAnimate,
+  R as TextAnimate,
   E as TxtEditor,
   f as TxtReader,
-  n as TypingAnimation,
+  i as TypingAnimation,
+  O as VideoDialog,
   j as confetti,
-  V as dockVariants,
-  T as useStayTimeReport
+  P as dockVariants,
+  c as useStayTimeReport
 };

package/dist/es/node_modules/.pnpm/lucide-react@0.525.0_react@19.1.0/node_modules/lucide-react/dist/esm/Icon.js

@@ -0,0 +1,41 @@
+import { forwardRef as l, createElement as o } from "react";
+import A from "./defaultAttributes.js";
+import { mergeClasses as b, hasA11yProp as c } from "./shared/src/utils.js";
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const h = l(
+  ({
+    color: m = "currentColor",
+    size: t = 24,
+    strokeWidth: e = 2,
+    absoluteStrokeWidth: s,
+    className: u = "",
+    children: r,
+    iconNode: f,
+    ...a
+  }, p) => o(
+    "svg",
+    {
+      ref: p,
+      ...A,
+      width: t,
+      height: t,
+      stroke: m,
+      strokeWidth: s ? Number(e) * 24 / Number(t) : e,
+      className: b("lucide", u),
+      ...!r && !c(a) && { "aria-hidden": "true" },
+      ...a
+    },
+    [
+      ...f.map(([i, d]) => o(i, d)),
+      ...Array.isArray(r) ? r : [r]
+    ]
+  )
+);
+export {
+  h as default
+};

package/dist/es/node_modules/.pnpm/lucide-react@0.525.0_react@19.1.0/node_modules/lucide-react/dist/esm/createLucideIcon.js

@@ -0,0 +1,27 @@
+import { forwardRef as m, createElement as l } from "react";
+import { mergeClasses as d, toKebabCase as f, toPascalCase as r } from "./shared/src/utils.js";
+import n from "./Icon.js";
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const C = (e, t) => {
+  const o = m(
+    ({ className: a, ...s }, c) => l(n, {
+      ref: c,
+      iconNode: t,
+      className: d(
+        `lucide-${f(r(e))}`,
+        `lucide-${e}`,
+        a
+      ),
+      ...s
+    })
+  );
+  return o.displayName = r(e), o;
+};
+export {
+  C as default
+};

package/dist/es/node_modules/.pnpm/lucide-react@0.525.0_react@19.1.0/node_modules/lucide-react/dist/esm/defaultAttributes.js

@@ -0,0 +1,20 @@
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+var t = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+export {
+  t as default
+};

package/dist/es/node_modules/.pnpm/lucide-react@0.525.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/play.js

@@ -0,0 +1,12 @@
+import o from "../createLucideIcon.js";
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const e = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]], a = o("play", e);
+export {
+  e as __iconNode,
+  a as default
+};

package/dist/es/node_modules/.pnpm/lucide-react@0.525.0_react@19.1.0/node_modules/lucide-react/dist/esm/icons/x.js

@@ -0,0 +1,15 @@
+import e from "../createLucideIcon.js";
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const o = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+], c = e("x", o);
+export {
+  o as __iconNode,
+  c as default
+};

package/dist/es/node_modules/.pnpm/lucide-react@0.525.0_react@19.1.0/node_modules/lucide-react/dist/esm/shared/src/utils.js

@@ -0,0 +1,24 @@
+/**
+ * @license lucide-react v0.525.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const s = (t) => t.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), a = (t) => t.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (e, o, r) => r ? r.toUpperCase() : o.toLowerCase()
+), n = (t) => {
+  const e = a(t);
+  return e.charAt(0).toUpperCase() + e.slice(1);
+}, c = (...t) => t.filter((e, o, r) => !!e && e.trim() !== "" && r.indexOf(e) === o).join(" ").trim(), i = (t) => {
+  for (const e in t)
+    if (e.startsWith("aria-") || e === "role" || e === "title")
+      return !0;
+};
+export {
+  i as hasA11yProp,
+  c as mergeClasses,
+  a as toCamelCase,
+  s as toKebabCase,
+  n as toPascalCase
+};