@sth87/shadcn-design-system 0.0.36 → 0.1.1

package/dist/esm/components/Tooltip/Tooltip.js

@@ -1,5 +1,5 @@
-import { jsx as t, Fragment as _, jsxs as c } from "react/jsx-runtime";
-import * as d from "react";
+import { jsx as t, Fragment as _, jsxs as m } from "react/jsx-runtime";
+import * as c from "react";
 import { useMemo as g, useCallback as j } from "react";
 import { TooltipProvider as S, Tooltip as W, TooltipTrigger as X, TooltipContent as A } from "../../packages/ui/src/components/tooltip.js";
 import "@radix-ui/react-slot";
@@ -35,19 +35,19 @@ import "../../packages/ui/src/components/tabs.js";
 import "../../packages/ui/src/components/toggle.js";
 import { useMotionValue as E, useSpring as u, useTransform as f, motion as v } from "motion/react";
 import { animationClass as F } from "../../utils/animations.js";
-const xt = d.memo(function({
+const xt = c.memo(function({
   content: n,
   children: o,
   sideOffset: b = 4,
   delayDuration: h = 0,
-  className: i,
+  className: s,
   childClassName: x,
   position: y = "top",
   noArrow: w = !1,
-  animation: s,
+  animation: i,
   ...a
 }) {
-  const l = { stiffness: 100, damping: 5 }, k = g(() => F(s, i), [s, i]), p = g(() => {
+  const l = { stiffness: 100, damping: 5 }, k = g(() => F(i, s), [i, s]), d = g(() => {
     switch (a.color) {
       case "primary":
         return "bg-primary text-primary-foreground [&>span>svg]:bg-primary [&>span>svg]:fill-primary";
@@ -77,23 +77,23 @@ const xt = d.memo(function({
     f(r, [-100, 100], [-50, 50]),
     l
   ), M = j(
-    (m) => {
-      const N = m.target.offsetWidth / 2;
-      r.set(m.nativeEvent.offsetX - N);
+    (p) => {
+      const N = p.target.offsetWidth / 2;
+      r.set(p.nativeEvent.offsetX - N);
     },
     [r]
-  ), z = d.memo(() => o ? /* @__PURE__ */ t(
+  ), z = c.memo(() => o ? /* @__PURE__ */ t(
     "span",
     {
       onMouseMove: M,
-      className: e("inline-block", x),
+      className: e("ds:inline-block", x),
       children: o
     }
   ) : /* @__PURE__ */ t(_, {}));
-  return s === "spec" ? /* @__PURE__ */ c(
+  return i === "spec" ? /* @__PURE__ */ m(
     v.div,
     {
-      className: e("relative -me-2.5 inline-block", i),
+      className: e("ds:relative ds:-me-2.5 ds:inline-block", s),
       whileHover: "hover",
       initial: "initial",
       children: [
@@ -119,16 +119,16 @@ const xt = d.memo(function({
               whiteSpace: "nowrap"
             },
             className: e(
-              "absolute -top-2 left-1/2 z-50 flex -translate-x-1/2 -translate-y-full flex-col items-center justify-center rounded-md px-4 py-2 text-xs shadow-xl",
-              p
+              "ds:absolute ds:-top-2 ds:left-1/2 ds:z-50 ds:flex ds:-translate-x-1/2 ds:-translate-y-full ds:flex-col ds:items-center ds:justify-center ds:rounded-md ds:px-4 ds:py-2 ds:text-xs ds:shadow-xl",
+              d
             ),
-            children: /* @__PURE__ */ t("div", { className: "relative z-1", children: n })
+            children: /* @__PURE__ */ t("div", { className: "ds:relative ds:z-1", children: n })
           }
         ),
         /* @__PURE__ */ t(z, {})
       ]
     }
-  ) : /* @__PURE__ */ t(S, { delayDuration: h, children: /* @__PURE__ */ c(W, { children: [
+  ) : /* @__PURE__ */ t(S, { delayDuration: h, children: /* @__PURE__ */ m(W, { children: [
     /* @__PURE__ */ t(X, { asChild: !0, children: o }),
     /* @__PURE__ */ t(
       A,
@@ -136,8 +136,8 @@ const xt = d.memo(function({
         ...a,
         side: y,
         sideOffset: b,
-        className: e(k?.className, p, {
-          "[&>span>svg]:invisible": w
+        className: e(k?.className, d, {
+          "ds:[&>span>svg]:invisible": w
         }),
         children: n
       }

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Tooltip as DsTooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  type TooltipContentProps,\n} from \"@dsui/ui/components/tooltip\";\nimport { cn } from \"@dsui/ui/index\";\nimport { motion, useMotionValue, useSpring, useTransform } from \"motion/react\";\nimport type { BasicAnimation, BasicColor } from \"@/types/variables\";\nimport { useMemo, useCallback } from \"react\";\nimport { animationClass } from \"@/utils/animations\";\n\ntype Color = BasicColor | \"dark\" | \"light\" | \"inverted\";\n\nexport type TooltipProps = TooltipContentProps & {\n  content: React.ReactNode;\n  children: React.ReactNode;\n  sideOffset?: number;\n  delayDuration?: number;\n  position?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  className?: string;\n  childClassName?: string;\n  noArrow?: boolean;\n  animation?: BasicAnimation;\n  color?: Color;\n};\n\nexport const Tooltip = React.memo(function Tooltip({\n  content,\n  children,\n  sideOffset = 4,\n  delayDuration = 0,\n  className,\n  childClassName,\n  position = \"top\",\n  noArrow = false,\n  animation,\n  ...props\n}: TooltipProps) {\n  const springConfig = { stiffness: 100, damping: 5 };\n\n  const tooltipAnimation = useMemo<{ className?: string } | null>(() => {\n    return animationClass(animation, className);\n  }, [animation, className]);\n\n  const tooltipColor = useMemo<string>(() => {\n    switch (props.color) {\n      case \"primary\":\n        return \"bg-primary text-primary-foreground [&>span>svg]:bg-primary [&>span>svg]:fill-primary\";\n      case \"secondary\":\n        return \"bg-secondary text-secondary-foreground [&>span>svg]:bg-secondary [&>span>svg]:fill-secondary\";\n      case \"dark\":\n        return \"\";\n      case \"light\":\n        return \"bg-neutral-200 text-neutral-950 [&_svg]:bg-neutral-200 [&_svg]:fill-neutral-200\";\n      case \"inverted\":\n        return \"dark:bg-white dark:text-black dark:[&_svg]:bg-white dark:[&_svg]:fill-white\";\n      case \"success\":\n        return \"bg-success text-success-foreground [&>span>svg]:bg-success [&>span>svg]:fill-success\";\n      case \"warning\":\n        return \"bg-warning text-warning-foreground [&>span>svg]:bg-warning [&>span>svg]:fill-warning\";\n      case \"error\":\n        return \"bg-error text-error-foreground [&>span>svg]:bg-error [&>span>svg]:fill-error\";\n      case \"glass\":\n        return \"bg-white/15 text-foreground backdrop-blur-sm shadow-lg [&>span>svg]:bg-white/15 [&>span>svg]:fill-white/15\";\n      default:\n        return \"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\";\n    }\n  }, [props?.color]);\n\n  // on mouse move\n  const x = useMotionValue(0);\n  // rotate the tooltip\n  const rotate = useSpring(\n    useTransform(x, [-100, 100], [-45, 45]),\n    springConfig\n  );\n  // translate the tooltip\n  const translateX = useSpring(\n    useTransform(x, [-100, 100], [-50, 50]),\n    springConfig\n  );\n\n  const handleMouseMove = useCallback(\n    (event: React.MouseEvent) => {\n      const halfWidth = (event.target as HTMLElement).offsetWidth / 2;\n      x.set(event.nativeEvent.offsetX - halfWidth);\n    },\n    [x]\n  );\n\n  const ChildComp = React.memo(() => {\n    if (!children) return <></>;\n\n    return (\n      <span\n        onMouseMove={handleMouseMove}\n        className={cn(\"inline-block\", childClassName)}\n      >\n        {children}\n      </span>\n    );\n  });\n\n  if (animation === \"spec\") {\n    return (\n      <motion.div\n        className={cn(\"relative -me-2.5 inline-block\", className)}\n        whileHover=\"hover\"\n        initial=\"initial\"\n      >\n        <motion.div\n          variants={{\n            initial: { opacity: 0, y: 20, scale: 0 },\n            hover: {\n              opacity: 1,\n              y: -5,\n              scale: 1,\n              transition: {\n                type: \"tween\",\n                duration: 0.2,\n                ease: \"easeOut\",\n              },\n            },\n          }}\n          style={{\n            translateX: translateX,\n            rotate: rotate,\n            whiteSpace: \"nowrap\",\n          }}\n          className={cn(\n            \"absolute -top-2 left-1/2 z-50 flex -translate-x-1/2 -translate-y-full flex-col items-center justify-center rounded-md px-4 py-2 text-xs shadow-xl\",\n            tooltipColor\n          )}\n        >\n          <div className=\"relative z-1\">{content}</div>\n        </motion.div>\n\n        <ChildComp />\n      </motion.div>\n    );\n  }\n\n  return (\n    <TooltipProvider delayDuration={delayDuration}>\n      <DsTooltip>\n        <TooltipTrigger asChild>{children}</TooltipTrigger>\n        <TooltipContent\n          {...props}\n          side={position}\n          sideOffset={sideOffset}\n          className={cn(tooltipAnimation?.className, tooltipColor, {\n            \"[&>span>svg]:invisible\": noArrow,\n          })}\n        >\n          {content}\n        </TooltipContent>\n      </DsTooltip>\n    </TooltipProvider>\n  );\n});\n"],"names":["Tooltip","React","content","children","sideOffset","delayDuration","className","childClassName","position","noArrow","animation","props","springConfig","tooltipAnimation","useMemo","animationClass","tooltipColor","x","useMotionValue","rotate","useSpring","useTransform","translateX","handleMouseMove","useCallback","event","halfWidth","ChildComp","jsx","cn","Fragment","jsxs","motion","TooltipProvider","DsTooltip","TooltipTrigger","TooltipContent"],"mappings":"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"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {\n  Tooltip as DsTooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  type TooltipContentProps,\n} from \"@dsui/ui/components/tooltip\";\nimport { cn } from \"@dsui/ui/index\";\nimport { motion, useMotionValue, useSpring, useTransform } from \"motion/react\";\nimport type { BasicAnimation, BasicColor } from \"@/types/variables\";\nimport { useMemo, useCallback } from \"react\";\nimport { animationClass } from \"@/utils/animations\";\n\ntype Color = BasicColor | \"dark\" | \"light\" | \"inverted\";\n\nexport type TooltipProps = TooltipContentProps & {\n  content: React.ReactNode;\n  children: React.ReactNode;\n  sideOffset?: number;\n  delayDuration?: number;\n  position?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  className?: string;\n  childClassName?: string;\n  noArrow?: boolean;\n  animation?: BasicAnimation;\n  color?: Color;\n};\n\nexport const Tooltip = React.memo(function Tooltip({\n  content,\n  children,\n  sideOffset = 4,\n  delayDuration = 0,\n  className,\n  childClassName,\n  position = \"top\",\n  noArrow = false,\n  animation,\n  ...props\n}: TooltipProps) {\n  const springConfig = { stiffness: 100, damping: 5 };\n\n  const tooltipAnimation = useMemo<{ className?: string } | null>(() => {\n    return animationClass(animation, className);\n  }, [animation, className]);\n\n  const tooltipColor = useMemo<string>(() => {\n    switch (props.color) {\n      case \"primary\":\n        return \"bg-primary text-primary-foreground [&>span>svg]:bg-primary [&>span>svg]:fill-primary\";\n      case \"secondary\":\n        return \"bg-secondary text-secondary-foreground [&>span>svg]:bg-secondary [&>span>svg]:fill-secondary\";\n      case \"dark\":\n        return \"\";\n      case \"light\":\n        return \"bg-neutral-200 text-neutral-950 [&_svg]:bg-neutral-200 [&_svg]:fill-neutral-200\";\n      case \"inverted\":\n        return \"dark:bg-white dark:text-black dark:[&_svg]:bg-white dark:[&_svg]:fill-white\";\n      case \"success\":\n        return \"bg-success text-success-foreground [&>span>svg]:bg-success [&>span>svg]:fill-success\";\n      case \"warning\":\n        return \"bg-warning text-warning-foreground [&>span>svg]:bg-warning [&>span>svg]:fill-warning\";\n      case \"error\":\n        return \"bg-error text-error-foreground [&>span>svg]:bg-error [&>span>svg]:fill-error\";\n      case \"glass\":\n        return \"bg-white/15 text-foreground backdrop-blur-sm shadow-lg [&>span>svg]:bg-white/15 [&>span>svg]:fill-white/15\";\n      default:\n        return \"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\";\n    }\n  }, [props?.color]);\n\n  // on mouse move\n  const x = useMotionValue(0);\n  // rotate the tooltip\n  const rotate = useSpring(\n    useTransform(x, [-100, 100], [-45, 45]),\n    springConfig\n  );\n  // translate the tooltip\n  const translateX = useSpring(\n    useTransform(x, [-100, 100], [-50, 50]),\n    springConfig\n  );\n\n  const handleMouseMove = useCallback(\n    (event: React.MouseEvent) => {\n      const halfWidth = (event.target as HTMLElement).offsetWidth / 2;\n      x.set(event.nativeEvent.offsetX - halfWidth);\n    },\n    [x]\n  );\n\n  const ChildComp = React.memo(() => {\n    if (!children) return <></>;\n\n    return (\n      <span\n        onMouseMove={handleMouseMove}\n        className={cn(\"ds:inline-block\", childClassName)}\n      >\n        {children}\n      </span>\n    );\n  });\n\n  if (animation === \"spec\") {\n    return (\n      <motion.div\n        className={cn(\"ds:relative ds:-me-2.5 ds:inline-block\", className)}\n        whileHover=\"hover\"\n        initial=\"initial\"\n      >\n        <motion.div\n          variants={{\n            initial: { opacity: 0, y: 20, scale: 0 },\n            hover: {\n              opacity: 1,\n              y: -5,\n              scale: 1,\n              transition: {\n                type: \"tween\",\n                duration: 0.2,\n                ease: \"easeOut\",\n              },\n            },\n          }}\n          style={{\n            translateX: translateX,\n            rotate: rotate,\n            whiteSpace: \"nowrap\",\n          }}\n          className={cn(\n            \"ds:absolute ds:-top-2 ds:left-1/2 ds:z-50 ds:flex ds:-translate-x-1/2 ds:-translate-y-full ds:flex-col ds:items-center ds:justify-center ds:rounded-md ds:px-4 ds:py-2 ds:text-xs ds:shadow-xl\",\n            tooltipColor\n          )}\n        >\n          <div className=\"ds:relative ds:z-1\">{content}</div>\n        </motion.div>\n\n        <ChildComp />\n      </motion.div>\n    );\n  }\n\n  return (\n    <TooltipProvider delayDuration={delayDuration}>\n      <DsTooltip>\n        <TooltipTrigger asChild>{children}</TooltipTrigger>\n        <TooltipContent\n          {...props}\n          side={position}\n          sideOffset={sideOffset}\n          className={cn(tooltipAnimation?.className, tooltipColor, {\n            \"ds:[&>span>svg]:invisible\": noArrow,\n          })}\n        >\n          {content}\n        </TooltipContent>\n      </DsTooltip>\n    </TooltipProvider>\n  );\n});\n"],"names":["Tooltip","React","content","children","sideOffset","delayDuration","className","childClassName","position","noArrow","animation","props","springConfig","tooltipAnimation","useMemo","animationClass","tooltipColor","x","useMotionValue","rotate","useSpring","useTransform","translateX","handleMouseMove","useCallback","event","halfWidth","ChildComp","jsx","cn","Fragment","jsxs","motion","TooltipProvider","DsTooltip","TooltipTrigger","TooltipContent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BO,MAAMA,KAAUC,EAAM,KAAK,SAAiB;AAAA,EACjD,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,eAAAC,IAAgB;AAAA,EAChB,WAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,GAAGC;AACL,GAAiB;AACf,QAAMC,IAAe,EAAE,WAAW,KAAK,SAAS,EAAA,GAE1CC,IAAmBC,EAAuC,MACvDC,EAAeL,GAAWJ,CAAS,GACzC,CAACI,GAAWJ,CAAS,CAAC,GAEnBU,IAAeF,EAAgB,MAAM;AACzC,YAAQH,EAAM,OAAA;AAAA,MACZ,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT,KAAK;AACH,eAAO;AAAA,MACT;AACE,eAAO;AAAA,IAAA;AAAA,EAEb,GAAG,CAACA,GAAO,KAAK,CAAC,GAGXM,IAAIC,EAAe,CAAC,GAEpBC,IAASC;AAAA,IACbC,EAAaJ,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,KAAK,EAAE,CAAC;AAAA,IACtCL;AAAA,EAAA,GAGIU,IAAaF;AAAA,IACjBC,EAAaJ,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,KAAK,EAAE,CAAC;AAAA,IACtCL;AAAA,EAAA,GAGIW,IAAkBC;AAAA,IACtB,CAACC,MAA4B;AAC3B,YAAMC,IAAaD,EAAM,OAAuB,cAAc;AAC9D,MAAAR,EAAE,IAAIQ,EAAM,YAAY,UAAUC,CAAS;AAAA,IAC7C;AAAA,IACA,CAACT,CAAC;AAAA,EAAA,GAGEU,IAAY1B,EAAM,KAAK,MACtBE,IAGH,gBAAAyB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAaL;AAAA,MACb,WAAWM,EAAG,mBAAmBtB,CAAc;AAAA,MAE9C,UAAAJ;AAAA,IAAA;AAAA,EAAA,IAPiB,gBAAAyB,EAAAE,GAAA,CAAA,CAAE,CAUzB;AAED,SAAIpB,MAAc,SAEd,gBAAAqB;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACC,WAAWH,EAAG,0CAA0CvB,CAAS;AAAA,MACjE,YAAW;AAAA,MACX,SAAQ;AAAA,MAER,UAAA;AAAA,QAAA,gBAAAsB;AAAA,UAACI,EAAO;AAAA,UAAP;AAAA,YACC,UAAU;AAAA,cACR,SAAS,EAAE,SAAS,GAAG,GAAG,IAAI,OAAO,EAAA;AAAA,cACrC,OAAO;AAAA,gBACL,SAAS;AAAA,gBACT,GAAG;AAAA,gBACH,OAAO;AAAA,gBACP,YAAY;AAAA,kBACV,MAAM;AAAA,kBACN,UAAU;AAAA,kBACV,MAAM;AAAA,gBAAA;AAAA,cACR;AAAA,YACF;AAAA,YAEF,OAAO;AAAA,cACL,YAAAV;AAAA,cACA,QAAAH;AAAA,cACA,YAAY;AAAA,YAAA;AAAA,YAEd,WAAWU;AAAA,cACT;AAAA,cACAb;AAAA,YAAA;AAAA,YAGF,UAAA,gBAAAY,EAAC,OAAA,EAAI,WAAU,sBAAsB,UAAA1B,EAAA,CAAQ;AAAA,UAAA;AAAA,QAAA;AAAA,0BAG9CyB,GAAA,CAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAMf,gBAAAC,EAACK,GAAA,EAAgB,eAAA5B,GACf,UAAA,gBAAA0B,EAACG,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAN,EAACO,GAAA,EAAe,SAAO,IAAE,UAAAhC,EAAA,CAAS;AAAA,IAClC,gBAAAyB;AAAA,MAACQ;AAAA,MAAA;AAAA,QACE,GAAGzB;AAAA,QACJ,MAAMH;AAAA,QACN,YAAAJ;AAAA,QACA,WAAWyB,EAAGhB,GAAkB,WAAWG,GAAc;AAAA,UACvD,6BAA6BP;AAAA,QAAA,CAC9B;AAAA,QAEA,UAAAP;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,EAAA,CACF,EAAA,CACF;AAEJ,CAAC;"}

package/dist/esm/components/Tour/Tour.js

@@ -649,7 +649,7 @@ function mo(t) {
       onFocusCapture: Gt,
       onBlurCapture: Xt,
       className: L(
-        "fixed z-50 flex w-80 flex-col gap-4 rounded-lg border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+        "ds:fixed ds:z-50 ds:flex ds:w-80 ds:flex-col ds:gap-4 ds:rounded-lg ds:border ds:bg-popover ds:p-4 ds:text-popover-foreground ds:shadow-md ds:outline-none",
         h
       ),
       style: {
@@ -680,7 +680,7 @@ function ho(t) {
       "data-state": Ot(a),
       ...u,
       className: L(
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-40 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in",
+        "ds:data-[state=closed]:fade-out-0 ds:data-[state=open]:fade-in-0 ds:fixed ds:inset-0 ds:z-40 ds:bg-black/80 ds:data-[state=closed]:animate-out ds:data-[state=open]:animate-in",
         o
       ),
       style: {
@@ -699,7 +699,7 @@ function vo(t) {
       "data-state": Ot(a),
       ...u,
       className: L(
-        "pointer-events-none fixed z-40 border-ring ring-[3px] ring-ring/50",
+        "ds:pointer-events-none ds:fixed ds:z-40 ds:border-ring ds:ring-[3px] ds:ring-ring/50",
         o
       ),
       style: {
@@ -765,7 +765,7 @@ function Eo(t) {
           width: e,
           height: o,
           ...a,
-          className: L("block fill-popover stroke-border", c),
+          className: L("ds:block ds:fill-popover ds:stroke-border", c),
           children: u ? r : /* @__PURE__ */ C("polygon", { points: "0,0 30,0 15,10" })
         }
       )
@@ -781,7 +781,7 @@ function Co(t) {
       dir: r.dir,
       ...c,
       className: L(
-        "flex flex-col gap-1.5 text-center sm:text-left",
+        "ds:flex ds:flex-col ds:gap-1.5 ds:text-center ds:sm:text-left",
         o
       )
     }
@@ -796,7 +796,7 @@ function wo(t) {
       dir: r.dir,
       ...c,
       className: L(
-        "font-semibold text-lg leading-none tracking-tight",
+        "ds:font-semibold ds:text-lg ds:leading-none ds:tracking-tight",
         o
       )
     }
@@ -810,7 +810,7 @@ function Po(t) {
       "data-slot": "tour-description",
       dir: r.dir,
       ...c,
-      className: L("text-muted-foreground text-sm", o)
+      className: L("ds:text-muted-foreground ds:text-sm", o)
     }
   );
 }
@@ -832,12 +832,12 @@ function So(t) {
       type: "button",
       "aria-label": "Close tour",
       className: L(
-        "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "ds:absolute ds:top-4 ds:right-4 ds:rounded-xs ds:opacity-70 ds:ring-offset-background ds:transition-opacity ds:hover:opacity-100 ds:focus:outline-hidden ds:focus:ring-2 ds:focus:ring-ring ds:focus:ring-offset-2 ds:disabled:pointer-events-none ds:[&_svg:not([class*='size-'])]:size-4 ds:[&_svg]:pointer-events-none ds:[&_svg]:shrink-0",
         o
       ),
       onClick: a,
       ...r,
-      children: /* @__PURE__ */ C(Jt, { className: "size-4" })
+      children: /* @__PURE__ */ C(Jt, { className: "ds:size-4" })
     }
   );
 }
@@ -920,7 +920,7 @@ function yo(t) {
     {
       "data-slot": "tour-step-counter",
       ...u,
-      className: L("text-muted-foreground text-sm", c),
+      className: L("ds:text-muted-foreground ds:text-sm", c),
       children: r ?? e(a + 1, n.length)
     }
   );
@@ -938,7 +938,7 @@ function Ro(t) {
       ...r,
       ref: p,
       className: L(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        "ds:flex ds:flex-col-reverse ds:gap-2 ds:sm:flex-row ds:sm:justify-end",
         o
       )
     }