@szum-tech/design-system 3.8.1 → 3.10.0

package/dist/chunk-TKZOB6C3.cjs

@@ -0,0 +1,70 @@
+'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(() => {
+    if (!shouldStart) return;
+    setHasAnimated(true);
+    motionValue.set(from);
+    setDisplay(from);
+    let controls;
+    const timeout = setTimeout(() => {
+      controls = react.animate(motionValue, to, {
+        duration,
+        onUpdate: (v) => setDisplay(v),
+        onComplete
+      });
+    }, delay);
+    return () => {
+      clearTimeout(timeout);
+      if (controls) {
+        controls.stop();
+      }
+    };
+  }, [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-FKCWRNWB.js → chunk-U3QKV7I4.js}

@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';
 
 var badgeVariants = cva(
-  "border-border focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring [&>svg]:pointer-events-none [&>svg]:size-3",
+  "border-border focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-error/20 dark:aria-invalid:ring-error/40 aria-invalid:border-error inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring [&>svg]:pointer-events-none [&>svg]:size-3",
   {
     variants: {
       variant: {

package/dist/chunk-U7XZJQ4O.js

@@ -0,0 +1,36 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import { Tooltip as Tooltip$1 } from 'radix-ui';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { "data-slot": "tooltip-provider", delayDuration, ...props });
+}
+function Tooltip(props) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(Tooltip$1.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger(props) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({ className, sideOffset = 0, children, ...props }) {
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsxs(
+    Tooltip$1.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(Tooltip$1.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+
+export { Tooltip, TooltipContent, TooltipTrigger };

package/dist/{chunk-X55H6LRX.cjs → chunk-ULEEQ723.cjs}

@@ -27,7 +27,7 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 var colorSwatchVariants = classVarianceAuthority.cva(
-  "border-border box-border rounded border shadow-sm [background-clip:padding-box] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  "border-border box-border rounded border [background-clip:padding-box] shadow-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
   {
     variants: {
       size: {

package/dist/{chunk-BAWVLSRF.cjs → chunk-VK5EX3OG.cjs}

@@ -15,7 +15,7 @@ function DialogClose(props) {
 }
 var dialogContentVariants = classVarianceAuthority.cva(
   [
-    "bg-background border-border fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-1rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded border p-6 shadow-lg duration-200",
+    "bg-background border-border fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-1rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded border p-6 shadow-lg duration-200",
     "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 "
   ],
   {

package/dist/{chunk-UW6GOD7J.js → chunk-VT5GDGZJ.js}

@@ -5,7 +5,7 @@ function Header({ children, ...props }) {
   return /* @__PURE__ */ jsx(
     "header",
     {
-      className: "bg-app-foreground/95 supports-[backdrop-filter]:bg-app-foreground/60 sticky top-0 z-50 w-full border-b border-gray-800 backdrop-blur",
+      className: "border-border/40 bg-background/95 supports-backdrop-filter:bg-background/60 sticky top-0 z-50 w-full border-b backdrop-blur",
       ...props,
       children: /* @__PURE__ */ jsx("div", { className: "container flex h-16 items-center", children })
     }

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;

package/dist/chunk-YQ6J6VOI.js

@@ -0,0 +1,48 @@
+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(() => {
+    if (!shouldStart) return;
+    setHasAnimated(true);
+    motionValue.set(from);
+    setDisplay(from);
+    let controls;
+    const timeout = setTimeout(() => {
+      controls = animate(motionValue, to, {
+        duration,
+        onUpdate: (v) => setDisplay(v),
+        onComplete
+      });
+    }, delay);
+    return () => {
+      clearTimeout(timeout);
+      if (controls) {
+        controls.stop();
+      }
+    };
+  }, [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 };