@szum-tech/design-system 3.8.1 → 3.10.0

package/dist/chunk-EUH466AL.cjs

@@ -0,0 +1,179 @@
+'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);
+
+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__namespace.useRef(null);
+  const isInView = react.useInView(ref, { once, margin: inViewMargin });
+  const [hasAnimated, setHasAnimated] = React__namespace.useState(false);
+  const [displayText, setDisplayText] = React__namespace.useState("");
+  const [currentIndex, setCurrentIndex] = React__namespace.useState(0);
+  const [isTyping, setIsTyping] = React__namespace.useState(false);
+  const [currentTextIndex, setCurrentTextIndex] = React__namespace.useState(0);
+  const shouldStart = !startOnView || isInView && (!once || !hasAnimated);
+  const textArray = texts && texts.length > 0 ? texts : [text];
+  const currentText = textArray[currentTextIndex] ?? "";
+  React__namespace.useEffect(() => {
+    if (!shouldStart) return;
+    const timeout = setTimeout(() => {
+      setIsTyping(true);
+      setHasAnimated(true);
+    }, delay);
+    return () => clearTimeout(timeout);
+  }, [delay, shouldStart]);
+  React__namespace.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 = react.motion.span;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    MotionComponent,
+    {
+      ref,
+      variants: selectedVariants,
+      initial: "hidden",
+      whileInView: startOnView ? "show" : void 0,
+      animate: startOnView ? void 0 : "show",
+      exit: "exit",
+      className: chunkH2BWO3SI_cjs.cn("whitespace-pre-wrap", className),
+      viewport: { once },
+      "data-slot": "typing-text",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center" }, children: [
+        displayText,
+        showCursor && /* @__PURE__ */ jsxRuntime.jsx(
+          react.motion.span,
+          {
+            variants: cursorVariants,
+            animate: "blinking",
+            className: chunkH2BWO3SI_cjs.cn("text-foreground ms-1 inline-block w-px font-normal select-none", cursorClassName),
+            children: cursor
+          }
+        )
+      ] })
+    }
+  );
+}
+
+exports.TypingText = TypingText;

package/dist/chunk-F7N6WQV6.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
+var radixUi = require('radix-ui');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+
+function Accordion({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Accordion.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__ */ jsxRuntime.jsx("div", { className: chunkH2BWO3SI_cjs.cn("pt-0 pb-4", className), children })
+    }
+  );
+}
+function AccordionTrigger({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    radixUi.Accordion.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: chunkH2BWO3SI_cjs.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__ */ jsxRuntime.jsx(lucideReact.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__ */ jsxRuntime.jsx(
+    radixUi.Accordion.Item,
+    {
+      "data-slot": "accordion-item",
+      className: chunkH2BWO3SI_cjs.cn("border-b last:border-b-0", className),
+      ...props
+    }
+  );
+}
+
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionItem = AccordionItem;
+exports.AccordionTrigger = AccordionTrigger;

package/dist/chunk-GYXQUTWZ.cjs

@@ -0,0 +1,59 @@
+'use strict';
+
+var chunkH2BWO3SI_cjs = require('./chunk-H2BWO3SI.cjs');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+var statusVariants = classVarianceAuthority.cva(
+  "inline-flex w-fit shrink-0 items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-full border px-2.5 py-1 font-medium text-xs transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-muted text-muted-foreground **:data-[slot=status-indicator]:bg-muted-foreground",
+        success: "border-success/20 bg-success/10 text-success **:data-[slot=status-indicator]:bg-success",
+        error: "border-error/20 bg-error/10 text-error **:data-[slot=status-indicator]:bg-error",
+        warning: "border-warning/20 bg-warning/10 text-warning **:data-[slot=status-indicator]:bg-warning",
+        primary: "border-primary/20 bg-primary/10 text-primary **:data-[slot=status-indicator]:bg-primary "
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Status({ className, variant = "default", asChild, ...rootProps }) {
+  const RootPrimitive = asChild ? reactSlot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RootPrimitive,
+    {
+      "data-slot": "status",
+      "data-variant": variant,
+      ...rootProps,
+      className: chunkH2BWO3SI_cjs.cn(statusVariants({ variant }), className)
+    }
+  );
+}
+function StatusIndicator(props) {
+  const { className, ...indicatorProps } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "status-indicator",
+      ...indicatorProps,
+      className: chunkH2BWO3SI_cjs.cn(
+        "relative flex size-2 shrink-0 rounded-full",
+        "before:absolute before:inset-0 before:animate-ping before:rounded-full before:bg-inherit",
+        "after:absolute after:inset-0.5 after:rounded-full after:bg-inherit",
+        className
+      )
+    }
+  );
+}
+function StatusLabel({ className, ...labelProps }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "status-label", ...labelProps, className: chunkH2BWO3SI_cjs.cn("leading-none", className) });
+}
+
+exports.Status = Status;
+exports.StatusIndicator = StatusIndicator;
+exports.StatusLabel = StatusLabel;

package/dist/chunk-IWF52DDE.js

@@ -0,0 +1,55 @@
+import { cn } from './chunk-ZD2QRAOX.js';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var statusVariants = cva(
+  "inline-flex w-fit shrink-0 items-center gap-1.5 overflow-hidden whitespace-nowrap rounded-full border px-2.5 py-1 font-medium text-xs transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-muted text-muted-foreground **:data-[slot=status-indicator]:bg-muted-foreground",
+        success: "border-success/20 bg-success/10 text-success **:data-[slot=status-indicator]:bg-success",
+        error: "border-error/20 bg-error/10 text-error **:data-[slot=status-indicator]:bg-error",
+        warning: "border-warning/20 bg-warning/10 text-warning **:data-[slot=status-indicator]:bg-warning",
+        primary: "border-primary/20 bg-primary/10 text-primary **:data-[slot=status-indicator]:bg-primary "
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Status({ className, variant = "default", asChild, ...rootProps }) {
+  const RootPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    RootPrimitive,
+    {
+      "data-slot": "status",
+      "data-variant": variant,
+      ...rootProps,
+      className: cn(statusVariants({ variant }), className)
+    }
+  );
+}
+function StatusIndicator(props) {
+  const { className, ...indicatorProps } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "status-indicator",
+      ...indicatorProps,
+      className: cn(
+        "relative flex size-2 shrink-0 rounded-full",
+        "before:absolute before:inset-0 before:animate-ping before:rounded-full before:bg-inherit",
+        "after:absolute after:inset-0.5 after:rounded-full after:bg-inherit",
+        className
+      )
+    }
+  );
+}
+function StatusLabel({ className, ...labelProps }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "status-label", ...labelProps, className: cn("leading-none", className) });
+}
+
+export { Status, StatusIndicator, StatusLabel };