@szum-tech/design-system 3.9.0 → 3.10.1

package/dist/chunk-K5AURCK5.js

@@ -0,0 +1,183 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import * as React from 'react';
+import { useInView, motion } from 'motion/react';
+import { jsx } from 'react/jsx-runtime';
+
+function WordRotate({
+  words,
+  duration = 1500,
+  animationStyle = "fade",
+  loop = true,
+  className,
+  containerClassName,
+  pauseDuration = 300,
+  startOnView = true,
+  once = false,
+  inViewMargin,
+  ...props
+}) {
+  const ref = React.useRef(null);
+  const isInView = useInView(ref, { once, margin: inViewMargin });
+  const [hasAnimated, setHasAnimated] = React.useState(false);
+  const [currentWord, setCurrentWord] = React.useState(0);
+  const [show, setShow] = React.useState(true);
+  const variants = {
+    fade: {
+      initial: { opacity: 0 },
+      animate: {
+        opacity: 1,
+        transition: {
+          duration: 0.4,
+          ease: [0.4, 0, 0.2, 1]
+          // Custom cubic-bezier for smooth fade
+        }
+      },
+      exit: {
+        opacity: 0,
+        transition: {
+          duration: 0.3,
+          ease: [0.4, 0, 1, 1]
+          // Faster exit
+        }
+      }
+    },
+    "slide-up": {
+      initial: { opacity: 0, y: 24 },
+      animate: {
+        opacity: 1,
+        y: 0,
+        transition: {
+          type: "spring",
+          stiffness: 300,
+          damping: 25,
+          mass: 0.8
+        }
+      },
+      exit: {
+        opacity: 0,
+        y: -24,
+        transition: {
+          duration: 0.25,
+          ease: [0.4, 0, 1, 1]
+        }
+      }
+    },
+    "slide-down": {
+      initial: { opacity: 0, y: -24 },
+      animate: {
+        opacity: 1,
+        y: 0,
+        transition: {
+          type: "spring",
+          stiffness: 300,
+          damping: 25,
+          mass: 0.8
+        }
+      },
+      exit: {
+        opacity: 0,
+        y: 24,
+        transition: {
+          duration: 0.25,
+          ease: [0.4, 0, 1, 1]
+        }
+      }
+    },
+    scale: {
+      initial: { opacity: 0, scale: 0.8 },
+      animate: {
+        opacity: 1,
+        scale: 1,
+        transition: {
+          type: "spring",
+          stiffness: 400,
+          damping: 30,
+          mass: 0.6
+        }
+      },
+      exit: {
+        opacity: 0,
+        scale: 0.9,
+        transition: {
+          duration: 0.2,
+          ease: [0.4, 0, 1, 1]
+        }
+      }
+    },
+    flip: {
+      initial: { opacity: 0, rotateX: 90 },
+      animate: {
+        opacity: 1,
+        rotateX: 0,
+        transition: {
+          type: "spring",
+          stiffness: 200,
+          damping: 20,
+          mass: 1
+        }
+      },
+      exit: {
+        opacity: 0,
+        rotateX: -90,
+        transition: {
+          duration: 0.3,
+          ease: [0.4, 0, 1, 1]
+        }
+      }
+    }
+  };
+  const shouldStart = !startOnView || isInView && (!once || !hasAnimated);
+  React.useEffect(() => {
+    if (!shouldStart) return;
+    if (words.length === 0) return;
+    let intervalId;
+    let timeoutId;
+    intervalId = setInterval(() => {
+      setShow(false);
+      timeoutId = setTimeout(() => {
+        setCurrentWord((prev) => {
+          const nextIndex = prev + 1;
+          if (!loop && nextIndex >= words.length) {
+            clearInterval(intervalId);
+            clearTimeout(timeoutId);
+            return prev;
+          }
+          return loop ? nextIndex % words.length : nextIndex;
+        });
+        setShow(true);
+        setHasAnimated(true);
+      }, pauseDuration);
+    }, duration + pauseDuration);
+    return () => {
+      clearInterval(intervalId);
+      clearTimeout(timeoutId);
+    };
+  }, [shouldStart, duration, pauseDuration, words.length, loop, once, hasAnimated]);
+  return /* @__PURE__ */ jsx(
+    motion.span,
+    {
+      ref,
+      "data-slot": "word-rotate",
+      className: cn("inline-block overflow-hidden align-bottom leading-none", containerClassName),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          initial: "initial",
+          animate: show ? "animate" : "exit",
+          exit: "exit",
+          variants: variants[animationStyle],
+          transition: { duration: 0.5 },
+          style: {
+            perspective: animationStyle === "flip" ? 1e3 : void 0
+          },
+          className: cn("inline-block", className),
+          children: words[currentWord]
+        },
+        currentWord
+      )
+    }
+  );
+}
+
+export { WordRotate };

package/dist/chunk-OCOCENE6.js

@@ -0,0 +1,42 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import { Tabs as Tabs$1 } from 'radix-ui';
+import { jsx } from 'react/jsx-runtime';
+
+function Tabs({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Tabs$1.Root, { "data-slot": "tabs", className: cn("flex flex-col gap-2", className), ...props });
+}
+function TabsList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.List,
+    {
+      "data-slot": "tabs-list",
+      className: cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded p-0.75",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Tabs$1.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow]",
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:shadow-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:outline-1",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(Tabs$1.Content, { "data-slot": "tabs-content", className: cn("flex-1 outline-none", className), ...props });
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/chunk-P4JIMFSL.js

@@ -0,0 +1,51 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import * as React from 'react';
+import { useInView, useMotionValue, animate, motion } from 'motion/react';
+import { jsx } from 'react/jsx-runtime';
+
+function CountingNumber({
+  from = 0,
+  to = 100,
+  duration = 2,
+  delay = 0,
+  className,
+  startOnView = true,
+  once = false,
+  inViewMargin,
+  onComplete,
+  format,
+  ...props
+}) {
+  const ref = React.useRef(null);
+  const isInView = useInView(ref, { once, margin: inViewMargin });
+  const [hasAnimated, setHasAnimated] = React.useState(false);
+  const [display, setDisplay] = React.useState(from);
+  const motionValue = useMotionValue(from);
+  const shouldStart = !startOnView || isInView && (!once || !hasAnimated);
+  React.useEffect(
+    function() {
+      if (!shouldStart) {
+        return;
+      }
+      setHasAnimated(true);
+      const timeout = setTimeout(function() {
+        const controls = animate(motionValue, to, {
+          duration,
+          onUpdate: (v) => setDisplay(v),
+          onComplete
+        });
+        return function() {
+          controls.stop();
+        };
+      }, delay);
+      return function() {
+        clearTimeout(timeout);
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [shouldStart, from, to, duration, delay]
+  );
+  return /* @__PURE__ */ jsx(motion.span, { ref, "data-slot": "counting-number", className: cn("inline-block", className), ...props, children: format ? format(display) : Math.round(display) });
+}
+
+export { CountingNumber };

package/dist/chunk-R65CJGEQ.js

@@ -0,0 +1,48 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import { Accordion as Accordion$1 } from 'radix-ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChevronDownIcon } from 'lucide-react';
+
+function Accordion({ ...props }) {
+  return /* @__PURE__ */ jsx(Accordion$1.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Content,
+    {
+      "data-slot": "accordion-content",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: cn("pt-0 pb-4", className), children })
+    }
+  );
+}
+function AccordionTrigger({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(Accordion$1.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+    Accordion$1.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+      ]
+    }
+  ) });
+}
+function AccordionItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Accordion$1.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn("border-b last:border-b-0", className),
+      ...props
+    }
+  );
+}
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/chunk-USIW3VT5.cjs

@@ -0,0 +1,73 @@
+'use strict';
+
+var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
+var React = require('react');
+var react = require('motion/react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function CountingNumber({
+  from = 0,
+  to = 100,
+  duration = 2,
+  delay = 0,
+  className,
+  startOnView = true,
+  once = false,
+  inViewMargin,
+  onComplete,
+  format,
+  ...props
+}) {
+  const ref = React__namespace.useRef(null);
+  const isInView = react.useInView(ref, { once, margin: inViewMargin });
+  const [hasAnimated, setHasAnimated] = React__namespace.useState(false);
+  const [display, setDisplay] = React__namespace.useState(from);
+  const motionValue = react.useMotionValue(from);
+  const shouldStart = !startOnView || isInView && (!once || !hasAnimated);
+  React__namespace.useEffect(
+    function() {
+      if (!shouldStart) {
+        return;
+      }
+      setHasAnimated(true);
+      const timeout = setTimeout(function() {
+        const controls = react.animate(motionValue, to, {
+          duration,
+          onUpdate: (v) => setDisplay(v),
+          onComplete
+        });
+        return function() {
+          controls.stop();
+        };
+      }, delay);
+      return function() {
+        clearTimeout(timeout);
+      };
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [shouldStart, from, to, duration, delay]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(react.motion.span, { ref, "data-slot": "counting-number", className: chunkH2BWO3SI_cjs.cn("inline-block", className), ...props, children: format ? format(display) : Math.round(display) });
+}
+
+exports.CountingNumber = CountingNumber;

package/dist/chunk-WMGJCB7O.js

@@ -0,0 +1,157 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import * as React from 'react';
+import { useInView, motion } from 'motion/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var cursorVariants = {
+  blinking: {
+    opacity: [0, 0, 1, 1],
+    transition: {
+      duration: 1,
+      repeat: Infinity,
+      repeatDelay: 0,
+      ease: "linear",
+      times: [0, 0.5, 0.5, 1]
+    }
+  }
+};
+var animationVariants = {
+  fadeIn: {
+    hidden: { opacity: 0, y: 10 },
+    show: { opacity: 1, y: 0 },
+    exit: { opacity: 0 }
+  },
+  blurIn: {
+    hidden: { opacity: 0, filter: "blur(4px)" },
+    show: { opacity: 1, filter: "blur(0px)" },
+    exit: { opacity: 0, filter: "blur(4px)" }
+  },
+  blurInUp: {
+    hidden: { opacity: 0, y: 20, filter: "blur(4px)" },
+    show: { opacity: 1, y: 0, filter: "blur(0px)" },
+    exit: { opacity: 0, y: -20, filter: "blur(4px)" }
+  },
+  blurInDown: {
+    hidden: { opacity: 0, y: -20, filter: "blur(4px)" },
+    show: { opacity: 1, y: 0, filter: "blur(0px)" },
+    exit: { opacity: 0, y: 20, filter: "blur(4px)" }
+  },
+  slideUp: {
+    hidden: { opacity: 0, y: 20 },
+    show: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: -20 }
+  },
+  slideDown: {
+    hidden: { opacity: 0, y: -20 },
+    show: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: 20 }
+  },
+  slideLeft: {
+    hidden: { opacity: 0, x: 20 },
+    show: { opacity: 1, x: 0 },
+    exit: { opacity: 0, x: -20 }
+  },
+  slideRight: {
+    hidden: { opacity: 0, x: -20 },
+    show: { opacity: 1, x: 0 },
+    exit: { opacity: 0, x: 20 }
+  },
+  scaleUp: {
+    hidden: { opacity: 0, scale: 0.8 },
+    show: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 1.2 }
+  },
+  scaleDown: {
+    hidden: { opacity: 0, scale: 1.2 },
+    show: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.8 }
+  }
+};
+function TypingText({
+  text,
+  texts,
+  speed = 100,
+  delay = 0,
+  showCursor = true,
+  cursorClassName = "",
+  cursor = "|",
+  loop = false,
+  pauseDuration = 2e3,
+  className,
+  onComplete,
+  startOnView = true,
+  once = false,
+  animation = "fadeIn",
+  inViewMargin,
+  ...props
+}) {
+  const ref = React.useRef(null);
+  const isInView = useInView(ref, { once, margin: inViewMargin });
+  const [hasAnimated, setHasAnimated] = React.useState(false);
+  const [displayText, setDisplayText] = React.useState("");
+  const [currentIndex, setCurrentIndex] = React.useState(0);
+  const [isTyping, setIsTyping] = React.useState(false);
+  const [currentTextIndex, setCurrentTextIndex] = React.useState(0);
+  const shouldStart = !startOnView || isInView && (!once || !hasAnimated);
+  const textArray = texts && texts.length > 0 ? texts : [text];
+  const currentText = textArray[currentTextIndex] ?? "";
+  React.useEffect(() => {
+    if (!shouldStart) return;
+    const timeout = setTimeout(() => {
+      setIsTyping(true);
+      setHasAnimated(true);
+    }, delay);
+    return () => clearTimeout(timeout);
+  }, [delay, shouldStart]);
+  React.useEffect(() => {
+    if (!isTyping) return;
+    if (currentIndex < currentText.length) {
+      const timeout = setTimeout(() => {
+        setDisplayText(currentText.slice(0, currentIndex + 1));
+        setCurrentIndex(currentIndex + 1);
+      }, speed);
+      return () => clearTimeout(timeout);
+    } else {
+      onComplete?.();
+      if (loop && texts && texts.length > 1) {
+        const timeout = setTimeout(() => {
+          setDisplayText("");
+          setCurrentIndex(0);
+          setCurrentTextIndex((prev) => (prev + 1) % texts.length);
+        }, pauseDuration);
+        return () => clearTimeout(timeout);
+      }
+    }
+  }, [currentIndex, currentText, isTyping, speed, loop, texts, pauseDuration, onComplete]);
+  const selectedVariants = animationVariants[animation];
+  const MotionComponent = motion.span;
+  return /* @__PURE__ */ jsx(
+    MotionComponent,
+    {
+      ref,
+      variants: selectedVariants,
+      initial: "hidden",
+      whileInView: startOnView ? "show" : void 0,
+      animate: startOnView ? void 0 : "show",
+      exit: "exit",
+      className: cn("whitespace-pre-wrap", className),
+      viewport: { once },
+      "data-slot": "typing-text",
+      ...props,
+      children: /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center" }, children: [
+        displayText,
+        showCursor && /* @__PURE__ */ jsx(
+          motion.span,
+          {
+            variants: cursorVariants,
+            animate: "blinking",
+            className: cn("text-foreground ms-1 inline-block w-px font-normal select-none", cursorClassName),
+            children: cursor
+          }
+        )
+      ] })
+    }
+  );
+}
+
+export { TypingText };

package/dist/chunk-YEFLGE3L.cjs

@@ -0,0 +1,47 @@
+'use strict';
+
+var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
+var radixUi = require('radix-ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+function Tabs({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tabs.Root, { "data-slot": "tabs", className: chunkH2BWO3SI_cjs.cn("flex flex-col gap-2", className), ...props });
+}
+function TabsList({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Tabs.List,
+    {
+      "data-slot": "tabs-list",
+      className: chunkH2BWO3SI_cjs.cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded p-0.75",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Tabs.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: chunkH2BWO3SI_cjs.cn(
+        "text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow]",
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:shadow-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring focus-visible:ring-[3px] focus-visible:outline-1",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Tabs.Content, { "data-slot": "tabs-content", className: chunkH2BWO3SI_cjs.cn("flex-1 outline-none", className), ...props });
+}
+
+exports.Tabs = Tabs;
+exports.TabsContent = TabsContent;
+exports.TabsList = TabsList;
+exports.TabsTrigger = TabsTrigger;