npm - @sth87/shadcn-design-system - Versions diffs - 0.0.35 → 0.1.0 - Mend

@sth87/shadcn-design-system 0.0.35 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (421) hide show

package/dist/esm/components/WheelColumn.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"WheelColumn.js","sources":["../../../src/components/WheelColumn.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { memo, useCallback, useEffect, useRef, useState } from \"react\";\nimport { cn } from \"@dsui/ui/index\";\nimport type { CalendarColor } from \"./Calendar/Calendar\";\n\nconst pad = (num: number): string => String(num).padStart(2, \"0\");\n\n// Color variants for time picker items\nconst getColorClass = (color: CalendarColor = \"primary\"): string => {\n const colorMap = {\n primary: \"text-primary\",\n secondary: \"text-secondary\",\n accent: \"text-accent\",\n destructive: \"text-destructive\",\n muted: \"text-muted-foreground\",\n success: \"text-success\",\n error: \"text-error\",\n warning: \"text-warning\",\n foreground: \"text-foreground\",\n };\n return colorMap[color];\n};\n\ntype TimeColumnwheelProps = {\n items: number[];\n value: number \| undefined;\n onChange: (val: number) => void;\n timeLabel?: string;\n itemClassName?: string;\n isItemDisabled: (item: number) => boolean;\n disabled: boolean;\n color?: CalendarColor;\n};\n\nexport const TimeColumnwheel = memo(\n React.forwardRef<HTMLDivElement, TimeColumnwheelProps>(\n (\n {\n items,\n value: selectedValue,\n onChange: onChangeCol,\n timeLabel,\n itemClassName,\n isItemDisabled,\n disabled,\n color = \"primary\",\n },\n ref\n ) => {\n const debounceTimerRef = useRef<ReturnType<typeof setTimeout> \| null>(\n null\n );\n const containerRef = useRef<HTMLDivElement \| null>(null);\n const [scrollTop, setScrollTop] = useState(0);\n\n // Debounced scroll handler\n const handleScroll = useCallback(() => {\n if (!containerRef.current \|\| disabled) return;\n\n const container = containerRef.current;\n const currentScrollTop = container.scrollTop;\n setScrollTop(currentScrollTop);\n\n // Clear previous timer\n if (debounceTimerRef.current) {\n clearTimeout(debounceTimerRef.current);\n }\n\n // Set new timer\n debounceTimerRef.current = setTimeout(() => {\n const scrollTop = container.scrollTop;\n const itemHeight = 40; // h-10 = 40px\n const containerHeight = container.clientHeight;\n const dividerCenter = containerHeight / 2; // Divider lines ở giữa container\n\n // Calculate which item is at the divider center\n // Account for top spacer (h-30 = 120px)\n const adjustedScrollTop = scrollTop - 120;\n const dividerPosition = adjustedScrollTop + dividerCenter;\n\n // Find the item whose center is closest to divider center\n let closestItem = items[0];\n let minDistance = Infinity;\n\n items.forEach((item, index) => {\n const itemTop = index * itemHeight;\n const itemCenter = itemTop + itemHeight / 2;\n const distance = Math.abs(itemCenter - dividerPosition);\n\n if (distance < minDistance) {\n minDistance = distance;\n closestItem = item;\n }\n });\n\n // Only trigger change if different from current value and not disabled\n if (!isItemDisabled(closestItem)) {\n // Always update if item is different, or snap to correct position\n if (closestItem !== selectedValue) {\n onChangeCol(closestItem);\n } else {\n // Re-trigger to ensure input reflects the snapped value\n // This handles cases where user scrolled slightly but ended on same value\n const itemIndex = items.indexOf(closestItem);\n const targetScrollTop =\n 120 +\n itemIndex * itemHeight -\n containerHeight / 2 +\n itemHeight / 2;\n\n if (Math.abs(container.scrollTop - targetScrollTop) > 5) {\n container.scrollTo({\n top: targetScrollTop,\n behavior: \"smooth\",\n });\n }\n }\n }\n }, 100); // 100ms debounce for faster response\n }, [items, selectedValue, onChangeCol, isItemDisabled, disabled]);\n\n // Set up scroll listener\n useEffect(() => {\n const container = containerRef.current;\n if (container) {\n container.addEventListener(\"scroll\", handleScroll, { passive: true });\n return () => {\n container.removeEventListener(\"scroll\", handleScroll);\n if (debounceTimerRef.current) {\n clearTimeout(debounceTimerRef.current);\n }\n };\n }\n }, [handleScroll]);\n\n // Scroll to selected value when it changes or on mount\n useEffect(() => {\n if (containerRef.current && selectedValue !== undefined) {\n const itemIndex = items.indexOf(selectedValue);\n if (itemIndex !== -1) {\n const itemHeight = 40;\n const containerHeight = containerRef.current.clientHeight;\n const targetScrollTop =\n 120 +\n itemIndex * itemHeight -\n containerHeight / 2 +\n itemHeight / 2;\n\n containerRef.current.scrollTo({\n top: targetScrollTop,\n behavior: \"smooth\",\n });\n }\n }\n }, [selectedValue, items]);\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n if (debounceTimerRef.current) {\n clearTimeout(debounceTimerRef.current);\n }\n };\n }, []);\n\n const getItemStyle = (index: number, isSelected: boolean) => {\n const itemHeight = 40;\n const containerHeight = 256; // h-64 = 256px\n const centerY = containerHeight / 2;\n const itemCenterY = 120 + index * itemHeight + itemHeight / 2; // 120px spacer + item position\n const distanceFromCenter = Math.abs(\n itemCenterY - (scrollTop + centerY)\n );\n const maxDistance = containerHeight / 2;\n\n // Calculate opacity and scale based on distance\n const opacity = Math.max(\n 0.3,\n 1 - (distanceFromCenter / maxDistance) * 0.7\n );\n const fontSize = isSelected ? \"1.3rem\" : \"1rem\";\n\n return {\n opacity,\n fontSize,\n transition: \"opacity 0.2s ease, transform 0.2s ease\",\n };\n };\n\n return (\n <div className=\"flex flex-col items-center gap-2 w-full h-full max-h-72\">\n {timeLabel && (\n <div className=\"text-xs font-semibold text-muted-foreground uppercase p-2 border-b w-full text-center h-8\">\n {timeLabel}\n </div>\n )}\n <div\n className={cn(\n \"relative w-full\",\n timeLabel ? \"h-[calc(100%_-_2rem)]\" : \" h-full\"\n )}\n >\n {/* wheel style divider lines /}\n <div className=\"absolute top-1/2 left-0 right-0 h-10 -translate-y-1/2 border-t border-b border-border pointer-events-none z-10\" />\n\n <div\n ref={(el) => {\n containerRef.current = el;\n if (typeof ref === \"function\") {\n ref(el);\n } else if (ref) {\n ref.current = el;\n }\n }}\n className={cn(\n \"relative h-full w-full min-w-20 min-h-60 overflow-y-scroll scroll-smooth\",\n \"[&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent\",\n \"[&::-webkit-scrollbar-thumb]:bg-border [&::-webkit-scrollbar-thumb]:rounded\",\n \"flex flex-col snap-y snap-mandatory\",\n itemClassName\n )}\n style={{\n maskImage: `linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%)`,\n WebkitMaskImage: `linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%)`,\n }}\n >\n {/ Spacer Top /}\n <div className=\"h-[calc(50%-1.25rem)] flex-shrink-0\" />\n\n {items.map((item, index) => {\n const itemDisabled = isItemDisabled(item);\n const isSelected =\n selectedValue !== undefined && item === selectedValue;\n const itemStyle = getItemStyle(index, isSelected);\n\n return (\n <div\n key={item}\n onClick={\n disabled \|\| itemDisabled\n ? undefined\n : () => onChangeCol(item)\n }\n data-selected={isSelected \|\| undefined}\n className={cn(\n \"h-10 flex-shrink-0 flex items-center justify-center transition-all snap-center\",\n \"cursor-pointer text-lg font-medium select-none\",\n \"disabled:opacity-30 disabled:cursor-not-allowed disabled:line-through\",\n isSelected\n ? `${getColorClass(color)} font-bold`\n : \"text-muted-foreground\"\n )}\n style={itemStyle}\n >\n {pad(item)}\n </div>\n );\n })}\n\n {/ Spacer Bottom */}\n <div className=\"h-[calc(50%-1.25rem)] flex-shrink-0\" />\n </div>\n </div>\n </div>\n );\n }\n )\n);\n\nTimeColumnwheel.displayName = \"TimeColumnwheel\";\n"],"names":["pad","num","getColorClass","color","TimeColumnwheel","memo","React","items","selectedValue","onChangeCol","timeLabel","itemClassName","isItemDisabled","disabled","ref","debounceTimerRef","useRef","containerRef","scrollTop","setScrollTop","useState","handleScroll","useCallback","container","currentScrollTop","itemHeight","containerHeight","dividerCenter","dividerPosition","closestItem","minDistance","item","index","itemCenter","distance","targetScrollTop","useEffect","itemIndex","getItemStyle","isSelected","itemCenterY","distanceFromCenter","maxDistance","jsxs","jsx","cn","el","itemDisabled","itemStyle"],"mappings":"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"}
1	+ {"version":3,"file":"WheelColumn.js","sources":["../../../src/components/WheelColumn.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { memo, useCallback, useEffect, useRef, useState } from \"react\";\nimport { cn } from \"@dsui/ui/index\";\nimport type { CalendarColor } from \"./Calendar/Calendar\";\n\nconst pad = (num: number): string => String(num).padStart(2, \"0\");\n\n// Color variants for time picker items\nconst getColorClass = (color: CalendarColor = \"primary\"): string => {\n const colorMap = {\n primary: \"text-primary\",\n secondary: \"text-secondary\",\n accent: \"text-accent\",\n destructive: \"text-destructive\",\n muted: \"text-muted-foreground\",\n success: \"text-success\",\n error: \"text-error\",\n warning: \"text-warning\",\n foreground: \"text-foreground\",\n };\n return colorMap[color];\n};\n\ntype TimeColumnwheelProps = {\n items: number[];\n value: number \| undefined;\n onChange: (val: number) => void;\n timeLabel?: string;\n itemClassName?: string;\n isItemDisabled: (item: number) => boolean;\n disabled: boolean;\n color?: CalendarColor;\n};\n\nexport const TimeColumnwheel = memo(\n React.forwardRef<HTMLDivElement, TimeColumnwheelProps>(\n (\n {\n items,\n value: selectedValue,\n onChange: onChangeCol,\n timeLabel,\n itemClassName,\n isItemDisabled,\n disabled,\n color = \"primary\",\n },\n ref\n ) => {\n const debounceTimerRef = useRef<ReturnType<typeof setTimeout> \| null>(\n null\n );\n const containerRef = useRef<HTMLDivElement \| null>(null);\n const [scrollTop, setScrollTop] = useState(0);\n\n // Debounced scroll handler\n const handleScroll = useCallback(() => {\n if (!containerRef.current \|\| disabled) return;\n\n const container = containerRef.current;\n const currentScrollTop = container.scrollTop;\n setScrollTop(currentScrollTop);\n\n // Clear previous timer\n if (debounceTimerRef.current) {\n clearTimeout(debounceTimerRef.current);\n }\n\n // Set new timer\n debounceTimerRef.current = setTimeout(() => {\n const scrollTop = container.scrollTop;\n const itemHeight = 40; // h-10 = 40px\n const containerHeight = container.clientHeight;\n const dividerCenter = containerHeight / 2; // Divider lines ở giữa container\n\n // Calculate which item is at the divider center\n // Account for top spacer (h-30 = 120px)\n const adjustedScrollTop = scrollTop - 120;\n const dividerPosition = adjustedScrollTop + dividerCenter;\n\n // Find the item whose center is closest to divider center\n let closestItem = items[0];\n let minDistance = Infinity;\n\n items.forEach((item, index) => {\n const itemTop = index * itemHeight;\n const itemCenter = itemTop + itemHeight / 2;\n const distance = Math.abs(itemCenter - dividerPosition);\n\n if (distance < minDistance) {\n minDistance = distance;\n closestItem = item;\n }\n });\n\n // Only trigger change if different from current value and not disabled\n if (!isItemDisabled(closestItem)) {\n // Always update if item is different, or snap to correct position\n if (closestItem !== selectedValue) {\n onChangeCol(closestItem);\n } else {\n // Re-trigger to ensure input reflects the snapped value\n // This handles cases where user scrolled slightly but ended on same value\n const itemIndex = items.indexOf(closestItem);\n const targetScrollTop =\n 120 +\n itemIndex * itemHeight -\n containerHeight / 2 +\n itemHeight / 2;\n\n if (Math.abs(container.scrollTop - targetScrollTop) > 5) {\n container.scrollTo({\n top: targetScrollTop,\n behavior: \"smooth\",\n });\n }\n }\n }\n }, 100); // 100ms debounce for faster response\n }, [items, selectedValue, onChangeCol, isItemDisabled, disabled]);\n\n // Set up scroll listener\n useEffect(() => {\n const container = containerRef.current;\n if (container) {\n container.addEventListener(\"scroll\", handleScroll, { passive: true });\n return () => {\n container.removeEventListener(\"scroll\", handleScroll);\n if (debounceTimerRef.current) {\n clearTimeout(debounceTimerRef.current);\n }\n };\n }\n }, [handleScroll]);\n\n // Scroll to selected value when it changes or on mount\n useEffect(() => {\n if (containerRef.current && selectedValue !== undefined) {\n const itemIndex = items.indexOf(selectedValue);\n if (itemIndex !== -1) {\n const itemHeight = 40;\n const containerHeight = containerRef.current.clientHeight;\n const targetScrollTop =\n 120 +\n itemIndex * itemHeight -\n containerHeight / 2 +\n itemHeight / 2;\n\n containerRef.current.scrollTo({\n top: targetScrollTop,\n behavior: \"smooth\",\n });\n }\n }\n }, [selectedValue, items]);\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n if (debounceTimerRef.current) {\n clearTimeout(debounceTimerRef.current);\n }\n };\n }, []);\n\n const getItemStyle = (index: number, isSelected: boolean) => {\n const itemHeight = 40;\n const containerHeight = 256; // h-64 = 256px\n const centerY = containerHeight / 2;\n const itemCenterY = 120 + index * itemHeight + itemHeight / 2; // 120px spacer + item position\n const distanceFromCenter = Math.abs(\n itemCenterY - (scrollTop + centerY)\n );\n const maxDistance = containerHeight / 2;\n\n // Calculate opacity and scale based on distance\n const opacity = Math.max(\n 0.3,\n 1 - (distanceFromCenter / maxDistance) * 0.7\n );\n const fontSize = isSelected ? \"1.3rem\" : \"1rem\";\n\n return {\n opacity,\n fontSize,\n transition: \"opacity 0.2s ease, transform 0.2s ease\",\n };\n };\n\n return (\n <div className=\"ds:flex ds:flex-col ds:items-center ds:gap-2 ds:w-full ds:h-full ds:max-h-72\">\n {timeLabel && (\n <div className=\"ds:text-xs ds:font-semibold ds:text-muted-foreground ds:uppercase ds:p-2 ds:border-b ds:w-full ds:text-center ds:h-8\">\n {timeLabel}\n </div>\n )}\n <div\n className={cn(\n \"ds:relative ds:w-full\",\n timeLabel ? \"ds:h-[calc(100%_-_2rem)]\" : \" ds:h-full\"\n )}\n >\n {/* wheel style divider lines /}\n <div className=\"ds:absolute ds:top-1/2 ds:left-0 ds:right-0 ds:h-10 ds:-translate-y-1/2 ds:border-t ds:border-b ds:border-border ds:pointer-events-none ds:z-10\" />\n\n <div\n ref={(el) => {\n containerRef.current = el;\n if (typeof ref === \"function\") {\n ref(el);\n } else if (ref) {\n ref.current = el;\n }\n }}\n className={cn(\n \"ds:relative ds:h-full ds:w-full ds:min-w-20 ds:min-h-60 ds:overflow-y-scroll ds:scroll-smooth\",\n \"ds:[&::-webkit-scrollbar]:w-1 ds:[&::-webkit-scrollbar-track]:bg-transparent\",\n \"ds:[&::-webkit-scrollbar-thumb]:bg-border ds:[&::-webkit-scrollbar-thumb]:rounded\",\n \"ds:flex ds:flex-col ds:snap-y ds:snap-mandatory\",\n itemClassName\n )}\n style={{\n maskImage: `linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%)`,\n WebkitMaskImage: `linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%)`,\n }}\n >\n {/ Spacer Top /}\n <div className=\"ds:h-[calc(50%-1.25rem)] ds:flex-shrink-0\" />\n\n {items.map((item, index) => {\n const itemDisabled = isItemDisabled(item);\n const isSelected =\n selectedValue !== undefined && item === selectedValue;\n const itemStyle = getItemStyle(index, isSelected);\n\n return (\n <div\n key={item}\n onClick={\n disabled \|\| itemDisabled\n ? undefined\n : () => onChangeCol(item)\n }\n data-selected={isSelected \|\| undefined}\n className={cn(\n \"ds:h-10 ds:flex-shrink-0 ds:flex ds:items-center ds:justify-center ds:transition-all ds:snap-center\",\n \"ds:cursor-pointer ds:text-lg ds:font-medium ds:select-none\",\n \"ds:disabled:opacity-30 ds:disabled:cursor-not-allowed ds:disabled:line-through\",\n isSelected\n ? `${getColorClass(color)} ds:font-bold`\n : \"ds:text-muted-foreground\"\n )}\n style={itemStyle}\n >\n {pad(item)}\n </div>\n );\n })}\n\n {/ Spacer Bottom */}\n <div className=\"ds:h-[calc(50%-1.25rem)] ds:flex-shrink-0\" />\n </div>\n </div>\n </div>\n );\n }\n )\n);\n\nTimeColumnwheel.displayName = \"TimeColumnwheel\";\n"],"names":["pad","num","getColorClass","color","TimeColumnwheel","memo","React","items","selectedValue","onChangeCol","timeLabel","itemClassName","isItemDisabled","disabled","ref","debounceTimerRef","useRef","containerRef","scrollTop","setScrollTop","useState","handleScroll","useCallback","container","currentScrollTop","itemHeight","containerHeight","dividerCenter","dividerPosition","closestItem","minDistance","item","index","itemCenter","distance","targetScrollTop","useEffect","itemIndex","getItemStyle","isSelected","itemCenterY","distanceFromCenter","maxDistance","jsxs","jsx","cn","el","itemDisabled","itemStyle"],"mappings":"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"}

package/dist/esm/lib/TextAnimation/BlurText.js CHANGED Viewed

@@ -1,16 +1,16 @@
 import { jsx as T, jsxs as A } from "react/jsx-runtime";
 import { motion as E } from "motion/react";
 import { useState as K, useRef as V, useEffect as D, useMemo as y } from "react";
-const F = (s, a) => {
+const F = (r, a) => {
   const p = /* @__PURE__ */ new Set([
-    ...Object.keys(s),
+    ...Object.keys(r),
     ...a.flatMap((t) => Object.keys(t))
   ]), n = {};
   return p.forEach((t) => {
-    n[t] = [s[t], ...a.map((l) => l[t])];
+    n[t] = [r[t], ...a.map((l) => l[t])];
   }), n;
 }, _ = ({
-  text: s = "",
+  text: r = "",
   delay: a = 200,
   className: p = "",
   animateBy: n = "words",
@@ -18,21 +18,21 @@ const F = (s, a) => {
   threshold: l = 0.1,
   rootMargin: f = "0px",
   animationFrom: b,
-  animationTo: w,
-  easing: h = (o) => o,
-  onAnimationComplete: x,
-  stepDuration: d = 0.35
+  animationTo: d,
+  easing: w = (o) => o,
+  onAnimationComplete: h,
+  stepDuration: x = 0.35
 }) => {
-  const o = n === "words" ? s.split(" ") : s.split(""), [v, g] = K(!1), i = V(null);
+  const o = n === "words" ? r.split(" ") : r.split(""), [v, g] = K(!1), i = V(null);
   D(() => {
     if (!i.current) return;
-    const r = new IntersectionObserver(
+    const s = new IntersectionObserver(
       ([e]) => {
-        e.isIntersecting && (g(!0), r.unobserve(i.current));
+        e.isIntersecting && (g(!0), s.unobserve(i.current));
       },
       { threshold: l, rootMargin: f }
     );
-    return r.observe(i.current), () => r.disconnect();
+    return s.observe(i.current), () => s.disconnect();
   }, [l, f]);
   const j = y(
     () => t === "top" ? { filter: "blur(10px)", opacity: 0, y: -50 } : { filter: "blur(10px)", opacity: 0, y: 50 },
@@ -47,16 +47,16 @@ const F = (s, a) => {
       { filter: "blur(0px)", opacity: 1, y: 0 }
     ],
     [t]
-  ), u = b ?? j, m = w ?? S, c = m.length + 1, k = d * (c - 1), C = Array.from(
+  ), u = b ?? j, m = d ?? S, c = m.length + 1, k = x * (c - 1), C = Array.from(
     { length: c },
-    (r, e) => c === 1 ? 0 : e / (c - 1)
+    (s, e) => c === 1 ? 0 : e / (c - 1)
   );
-  return /* @__PURE__ */ T("p", { ref: i, className: `blur-text ${p} flex flex-wrap`, children: o.map((r, e) => {
+  return /* @__PURE__ */ T("p", { ref: i, className: `ds:blur-text ${p} ds:flex ds:flex-wrap`, children: o.map((s, e) => {
     const I = F(u, m), O = {
       duration: k,
       times: C,
       delay: e * a / 1e3,
-      ease: h
+      ease: w
     };
     return /* @__PURE__ */ A(
       E.span,
@@ -64,13 +64,13 @@ const F = (s, a) => {
         initial: u,
         animate: v ? I : u,
         transition: O,
-        onAnimationComplete: e === o.length - 1 ? x : void 0,
+        onAnimationComplete: e === o.length - 1 ? h : void 0,
         style: {
           display: "inline-block",
           willChange: "transform, filter, opacity"
         },
         children: [
-          r === " " ? " " : r,
+          s === " " ? " " : s,
           n === "words" && e < o.length - 1 && " "
         ]
       },

package/dist/esm/lib/TextAnimation/BlurText.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BlurText.js","sources":["../../../../src/lib/TextAnimation/BlurText.tsx"],"sourcesContent":["\"use client\";\nimport { motion, type Transition, type Easing } from \"motion/react\";\nimport { useEffect, useRef, useState, useMemo } from \"react\";\ntype BlurTextProps = {\n text?: string;\n delay?: number;\n className?: string;\n animateBy?: \"words\" \| \"letters\";\n direction?: \"top\" \| \"bottom\";\n threshold?: number;\n rootMargin?: string;\n animationFrom?: Record<string, string \| number>;\n animationTo?: Array<Record<string, string \| number>>;\n easing?: Easing \| Easing[];\n onAnimationComplete?: () => void;\n stepDuration?: number;\n};\nconst buildKeyframes = (\n from: Record<string, string \| number>,\n steps: Array<Record<string, string \| number>>\n): Record<string, Array<string \| number>> => {\n const keys = new Set<string>([\n ...Object.keys(from),\n ...steps.flatMap((s) => Object.keys(s)),\n ]);\n const keyframes: Record<string, Array<string \| number>> = {};\n keys.forEach((k) => {\n keyframes[k] = [from[k], ...steps.map((s) => s[k])];\n });\n return keyframes;\n};\nconst BlurText: React.FC<BlurTextProps> = ({\n text = \"\",\n delay = 200,\n className = \"\",\n animateBy = \"words\",\n direction = \"top\",\n threshold = 0.1,\n rootMargin = \"0px\",\n animationFrom,\n animationTo,\n easing = (t: number) => t,\n onAnimationComplete,\n stepDuration = 0.35,\n}) => {\n const elements = animateBy === \"words\" ? text.split(\" \") : text.split(\"\");\n const [inView, setInView] = useState(false);\n const ref = useRef<HTMLParagraphElement>(null);\n useEffect(() => {\n if (!ref.current) return;\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (entry.isIntersecting) {\n setInView(true);\n observer.unobserve(ref.current as Element);\n }\n },\n { threshold, rootMargin }\n );\n observer.observe(ref.current);\n return () => observer.disconnect();\n }, [threshold, rootMargin]);\n const defaultFrom = useMemo(\n () =>\n direction === \"top\"\n ? { filter: \"blur(10px)\", opacity: 0, y: -50 }\n : { filter: \"blur(10px)\", opacity: 0, y: 50 },\n [direction]\n );\n const defaultTo = useMemo(\n () => [\n {\n filter: \"blur(5px)\",\n opacity: 0.5,\n y: direction === \"top\" ? 5 : -5,\n },\n { filter: \"blur(0px)\", opacity: 1, y: 0 },\n ],\n [direction]\n );\n const fromSnapshot = animationFrom ?? defaultFrom;\n const toSnapshots = animationTo ?? defaultTo;\n const stepCount = toSnapshots.length + 1;\n const totalDuration = stepDuration * (stepCount - 1);\n const times = Array.from({ length: stepCount }, (_, i) =>\n stepCount === 1 ? 0 : i / (stepCount - 1)\n );\n return (\n <p ref={ref} className={`blur-text ${className} flex flex-wrap`}>\n {elements.map((segment, index) => {\n const animateKeyframes = buildKeyframes(fromSnapshot, toSnapshots);\n const spanTransition: Transition = {\n duration: totalDuration,\n times,\n delay: (index * delay) / 1000,\n ease: easing,\n };\n return (\n <motion.span\n key={index}\n initial={fromSnapshot}\n animate={inView ? animateKeyframes : fromSnapshot}\n transition={spanTransition}\n onAnimationComplete={\n index === elements.length - 1 ? onAnimationComplete : undefined\n }\n style={{\n display: \"inline-block\",\n willChange: \"transform, filter, opacity\",\n }}\n >\n {segment === \" \" ? \"\\u00A0\" : segment}\n {animateBy === \"words\" && index < elements.length - 1 && \"\\u00A0\"}\n </motion.span>\n );\n })}\n </p>\n );\n};\nexport default BlurText;\n"],"names":["buildKeyframes","from","steps","keys","s","keyframes","k","BlurText","text","delay","className","animateBy","direction","threshold","rootMargin","animationFrom","animationTo","easing","t","onAnimationComplete","stepDuration","elements","inView","setInView","useState","ref","useRef","useEffect","observer","entry","defaultFrom","useMemo","defaultTo","fromSnapshot","toSnapshots","stepCount","totalDuration","times","_","i","jsx","segment","index","animateKeyframes","spanTransition","jsxs","motion"],"mappings":";;;AAiBA,MAAMA,IAAiB,CACrBC,GACAC,MAC2C;AAC3C,QAAMC,wBAAW,IAAY;AAAA,IAC3B,GAAG,OAAO,KAAKF,CAAI;AAAA,IACnB,GAAGC,EAAM,QAAQ,CAACE,MAAM,OAAO,KAAKA,CAAC,CAAC;AAAA,EAAA,CACvC,GACKC,IAAoD,CAAA;AAC1D,SAAAF,EAAK,QAAQ,CAACG,MAAM;AAClB,IAAAD,EAAUC,CAAC,IAAI,CAACL,EAAKK,CAAC,GAAG,GAAGJ,EAAM,IAAI,CAACE,MAAMA,EAAEE,CAAC,CAAC,CAAC;AAAA,EACpD,CAAC,GACMD;AACT,GACME,IAAoC,CAAC;AAAA,EACzC,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,WAAAC,IAAY;AAAA,EACZ,YAAAC,IAAa;AAAA,EACb,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC,IAAS,CAACC,MAAcA;AAAA,EACxB,qBAAAC;AAAA,EACA,cAAAC,IAAe;AACjB,MAAM;AACJ,QAAMC,IAAWV,MAAc,UAAUH,EAAK,MAAM,GAAG,IAAIA,EAAK,MAAM,EAAE,GAClE,CAACc,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAMC,EAA6B,IAAI;AAC7C,EAAAC,EAAU,MAAM;AACd,QAAI,CAACF,EAAI,QAAS;AAClB,UAAMG,IAAW,IAAI;AAAA,MACnB,CAAC,CAACC,CAAK,MAAM;AACX,QAAIA,EAAM,mBACRN,EAAU,EAAI,GACdK,EAAS,UAAUH,EAAI,OAAkB;AAAA,MAE7C;AAAA,MACA,EAAE,WAAAZ,GAAW,YAAAC,EAAA;AAAA,IAAW;AAE1B,WAAAc,EAAS,QAAQH,EAAI,OAAO,GACrB,MAAMG,EAAS,WAAA;AAAA,EACxB,GAAG,CAACf,GAAWC,CAAU,CAAC;AAC1B,QAAMgB,IAAcC;AAAA,IAClB,MACEnB,MAAc,QACV,EAAE,QAAQ,cAAc,SAAS,GAAG,GAAG,IAAA,IACvC,EAAE,QAAQ,cAAc,SAAS,GAAG,GAAG,GAAA;AAAA,IAC7C,CAACA,CAAS;AAAA,EAAA,GAENoB,IAAYD;AAAA,IAChB,MAAM;AAAA,MACJ;AAAA,QACE,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,GAAGnB,MAAc,QAAQ,IAAI;AAAA,MAAA;AAAA,MAE/B,EAAE,QAAQ,aAAa,SAAS,GAAG,GAAG,EAAA;AAAA,IAAE;AAAA,IAE1C,CAACA,CAAS;AAAA,EAAA,GAENqB,IAAelB,KAAiBe,GAChCI,IAAclB,KAAegB,GAC7BG,IAAYD,EAAY,SAAS,GACjCE,IAAgBhB,KAAgBe,IAAY,IAC5CE,IAAQ,MAAM;AAAA,IAAK,EAAE,QAAQF,EAAA;AAAA,IAAa,CAACG,GAAGC,MAClDJ,MAAc,IAAI,IAAII,KAAKJ,IAAY;AAAA,EAAA;AAEzC,SACE,gBAAAK,EAAC,KAAA,EAAE,KAAAf,GAAU,WAAW,~~aAAaf~~,CAAS,~~mBAC3C~~,UAAAW,EAAS,IAAI,CAACoB,GAASC,MAAU;AAChC,UAAMC,IAAmB3C,EAAeiC,GAAcC,CAAW,GAC3DU,IAA6B;AAAA,MACjC,UAAUR;AAAA,MACV,OAAAC;AAAA,MACA,OAAQK,IAAQjC,IAAS;AAAA,MACzB,MAAMQ;AAAA,IAAA;AAER,WACE,gBAAA4B;AAAA,MAACC,EAAO;AAAA,MAAP;AAAA,QAEC,SAASb;AAAA,QACT,SAASX,IAASqB,IAAmBV;AAAA,QACrC,YAAYW;AAAA,QACZ,qBACEF,MAAUrB,EAAS,SAAS,IAAIF,IAAsB;AAAA,QAExD,OAAO;AAAA,UACL,SAAS;AAAA,UACT,YAAY;AAAA,QAAA;AAAA,QAGb,UAAA;AAAA,UAAAsB,MAAY,MAAM,MAAWA;AAAA,UAC7B9B,MAAc,WAAW+B,IAAQrB,EAAS,SAAS,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAbpDqB;AAAA,IAAA;AAAA,EAgBX,CAAC,EAAA,CACH;AAEJ;"}
1	+ {"version":3,"file":"BlurText.js","sources":["../../../../src/lib/TextAnimation/BlurText.tsx"],"sourcesContent":["\"use client\";\nimport { motion, type Transition, type Easing } from \"motion/react\";\nimport { useEffect, useRef, useState, useMemo } from \"react\";\ntype BlurTextProps = {\n text?: string;\n delay?: number;\n className?: string;\n animateBy?: \"words\" \| \"letters\";\n direction?: \"top\" \| \"bottom\";\n threshold?: number;\n rootMargin?: string;\n animationFrom?: Record<string, string \| number>;\n animationTo?: Array<Record<string, string \| number>>;\n easing?: Easing \| Easing[];\n onAnimationComplete?: () => void;\n stepDuration?: number;\n};\nconst buildKeyframes = (\n from: Record<string, string \| number>,\n steps: Array<Record<string, string \| number>>\n): Record<string, Array<string \| number>> => {\n const keys = new Set<string>([\n ...Object.keys(from),\n ...steps.flatMap((s) => Object.keys(s)),\n ]);\n const keyframes: Record<string, Array<string \| number>> = {};\n keys.forEach((k) => {\n keyframes[k] = [from[k], ...steps.map((s) => s[k])];\n });\n return keyframes;\n};\nconst BlurText: React.FC<BlurTextProps> = ({\n text = \"\",\n delay = 200,\n className = \"\",\n animateBy = \"words\",\n direction = \"top\",\n threshold = 0.1,\n rootMargin = \"0px\",\n animationFrom,\n animationTo,\n easing = (t: number) => t,\n onAnimationComplete,\n stepDuration = 0.35,\n}) => {\n const elements = animateBy === \"words\" ? text.split(\" \") : text.split(\"\");\n const [inView, setInView] = useState(false);\n const ref = useRef<HTMLParagraphElement>(null);\n useEffect(() => {\n if (!ref.current) return;\n const observer = new IntersectionObserver(\n ([entry]) => {\n if (entry.isIntersecting) {\n setInView(true);\n observer.unobserve(ref.current as Element);\n }\n },\n { threshold, rootMargin }\n );\n observer.observe(ref.current);\n return () => observer.disconnect();\n }, [threshold, rootMargin]);\n const defaultFrom = useMemo(\n () =>\n direction === \"top\"\n ? { filter: \"blur(10px)\", opacity: 0, y: -50 }\n : { filter: \"blur(10px)\", opacity: 0, y: 50 },\n [direction]\n );\n const defaultTo = useMemo(\n () => [\n {\n filter: \"blur(5px)\",\n opacity: 0.5,\n y: direction === \"top\" ? 5 : -5,\n },\n { filter: \"blur(0px)\", opacity: 1, y: 0 },\n ],\n [direction]\n );\n const fromSnapshot = animationFrom ?? defaultFrom;\n const toSnapshots = animationTo ?? defaultTo;\n const stepCount = toSnapshots.length + 1;\n const totalDuration = stepDuration * (stepCount - 1);\n const times = Array.from({ length: stepCount }, (_, i) =>\n stepCount === 1 ? 0 : i / (stepCount - 1)\n );\n return (\n <p ref={ref} className={`ds:blur-text ${className} ds:flex ds:flex-wrap`}>\n {elements.map((segment, index) => {\n const animateKeyframes = buildKeyframes(fromSnapshot, toSnapshots);\n const spanTransition: Transition = {\n duration: totalDuration,\n times,\n delay: (index * delay) / 1000,\n ease: easing,\n };\n return (\n <motion.span\n key={index}\n initial={fromSnapshot}\n animate={inView ? animateKeyframes : fromSnapshot}\n transition={spanTransition}\n onAnimationComplete={\n index === elements.length - 1 ? onAnimationComplete : undefined\n }\n style={{\n display: \"inline-block\",\n willChange: \"transform, filter, opacity\",\n }}\n >\n {segment === \" \" ? \"\\u00A0\" : segment}\n {animateBy === \"words\" && index < elements.length - 1 && \"\\u00A0\"}\n </motion.span>\n );\n })}\n </p>\n );\n};\nexport default BlurText;\n"],"names":["buildKeyframes","from","steps","keys","s","keyframes","k","BlurText","text","delay","className","animateBy","direction","threshold","rootMargin","animationFrom","animationTo","easing","t","onAnimationComplete","stepDuration","elements","inView","setInView","useState","ref","useRef","useEffect","observer","entry","defaultFrom","useMemo","defaultTo","fromSnapshot","toSnapshots","stepCount","totalDuration","times","_","i","jsx","segment","index","animateKeyframes","spanTransition","jsxs","motion"],"mappings":"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"}

package/dist/esm/lib/TextAnimation/CircularText.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { jsx as d } from "react/jsx-runtime";
+import { jsx as p } from "react/jsx-runtime";
 import { useEffect as h } from "react";
 import { useAnimation as y, useMotionValue as k, motion as w } from "motion/react";
 const M = (a, e, r = !0) => ({
@@ -66,22 +66,22 @@ const M = (a, e, r = !0) => ({
       transition: n(e, t)
     });
   };
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ p(
     w.div,
     {
-      className: `m-0 mx-auto rounded-full w-[200px] h-[200px] relative font-black text-foreground text-center cursor-pointer origin-center ${g}`,
+      className: `ds:m-0 ds:mx-auto ds:rounded-full ds:w-[200px] ds:h-[200px] ds:relative ds:font-black ds:text-foreground ds:text-center ds:cursor-pointer ds:origin-center ${g}`,
       style: { rotate: i },
       initial: { rotate: 0 },
       animate: o,
       onMouseEnter: m,
       onMouseLeave: u,
       children: l.map((t, s) => {
-        const c = 360 / l.length * s, f = Math.PI / l.length, x = f * s, b = f * s, p = `rotateZ(${c}deg) translate3d(${x}px, ${b}px, 0)`;
-        return /* @__PURE__ */ d(
+        const c = 360 / l.length * s, d = Math.PI / l.length, x = d * s, b = d * s, f = `rotateZ(${c}deg) translate3d(${x}px, ${b}px, 0)`;
+        return /* @__PURE__ */ p(
           "span",
           {
-            className: "absolute inline-block inset-0 text-2xl transition-all duration-500 ease-[cubic-bezier(0,0,0,1)]",
-            style: { transform: p, WebkitTransform: p },
+            className: "ds:absolute ds:inline-block ds:inset-0 ds:text-2xl ds:transition-all ds:duration-500 ds:ease-[cubic-bezier(0,0,0,1)]",
+            style: { transform: f, WebkitTransform: f },
             children: t
           },
           s

package/dist/esm/lib/TextAnimation/CircularText.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CircularText.js","sources":["../../../../src/lib/TextAnimation/CircularText.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect } from \"react\";\nimport {\n motion,\n useAnimation,\n useMotionValue,\n MotionValue,\n type Transition,\n} from \"motion/react\";\n\ninterface CircularTextProps {\n text: string;\n spinDuration?: number;\n onHover?: \"slowDown\" \| \"speedUp\" \| \"pause\" \| \"goBonkers\";\n className?: string;\n}\n\nconst getRotationTransition = (\n duration: number,\n from: number,\n loop: boolean = true\n) => ({\n from,\n to: from + 360,\n ease: \"linear\" as const,\n duration,\n type: \"tween\" as const,\n repeat: loop ? Infinity : 0,\n});\n\nconst getTransition = (duration: number, from: number) => ({\n rotate: getRotationTransition(duration, from),\n scale: {\n type: \"spring\" as const,\n damping: 20,\n stiffness: 300,\n },\n});\n\nconst CircularText: React.FC<CircularTextProps> = ({\n text,\n spinDuration = 20,\n onHover = \"speedUp\",\n className = \"\",\n}) => {\n const letters = Array.from(text);\n const controls = useAnimation();\n const rotation: MotionValue<number> = useMotionValue(0);\n useEffect(() => {\n const start = rotation.get();\n controls.start({\n rotate: start + 360,\n scale: 1,\n transition: getTransition(spinDuration, start),\n });\n }, [spinDuration, text, onHover, controls, rotation]);\n const handleHoverStart = () => {\n const start = rotation.get();\n if (!onHover) return;\n let transitionConfig: ReturnType<typeof getTransition> \| Transition;\n let scaleVal = 1;\n switch (onHover) {\n case \"slowDown\":\n transitionConfig = getTransition(spinDuration * 2, start);\n break;\n case \"speedUp\":\n transitionConfig = getTransition(spinDuration / 4, start);\n break;\n case \"pause\":\n transitionConfig = {\n rotate: { type: \"spring\", damping: 20, stiffness: 300 },\n scale: { type: \"spring\", damping: 20, stiffness: 300 },\n };\n break;\n case \"goBonkers\":\n transitionConfig = getTransition(spinDuration / 20, start);\n scaleVal = 0.8;\n break;\n default:\n transitionConfig = getTransition(spinDuration, start);\n }\n controls.start({\n rotate: start + 360,\n scale: scaleVal,\n transition: transitionConfig,\n });\n };\n const handleHoverEnd = () => {\n const start = rotation.get();\n controls.start({\n rotate: start + 360,\n scale: 1,\n transition: getTransition(spinDuration, start),\n });\n };\n return (\n <motion.div\n className={`m-0 mx-auto rounded-full w-[200px] h-[200px] relative font-black text-foreground text-center cursor-pointer origin-center ${className}`}\n style={{ rotate: rotation }}\n initial={{ rotate: 0 }}\n animate={controls}\n onMouseEnter={handleHoverStart}\n onMouseLeave={handleHoverEnd}\n >\n {letters.map((letter, i) => {\n const rotationDeg = (360 / letters.length) * i;\n const factor = Math.PI / letters.length;\n const x = factor * i;\n const y = factor * i;\n const transform = `rotateZ(${rotationDeg}deg) translate3d(${x}px, ${y}px, 0)`;\n return (\n <span\n key={i}\n className=\"absolute inline-block inset-0 text-2xl transition-all duration-500 ease-[cubic-bezier(0,0,0,1)]\"\n style={{ transform, WebkitTransform: transform }}\n >\n {letter}\n </span>\n );\n })}\n </motion.div>\n );\n};\n\nexport default CircularText;\n"],"names":["getRotationTransition","duration","from","loop","getTransition","CircularText","text","spinDuration","onHover","className","letters","controls","useAnimation","rotation","useMotionValue","useEffect","start","handleHoverStart","transitionConfig","scaleVal","handleHoverEnd","jsx","motion","letter","i","rotationDeg","factor","y","transform"],"mappings":";;;AAiBA,MAAMA,IAAwB,CAC5BC,GACAC,GACAC,IAAgB,QACZ;AAAA,EACJ,MAAAD;AAAA,EACA,IAAIA,IAAO;AAAA,EACX,MAAM;AAAA,EACN,UAAAD;AAAA,EACA,MAAM;AAAA,EACN,QAAQE,IAAO,QAAW;AAC5B,IAEMC,IAAgB,CAACH,GAAkBC,OAAkB;AAAA,EACzD,QAAQF,EAAsBC,GAAUC,CAAI;AAAA,EAC5C,OAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IACT,WAAW;AAAA,EAAA;AAEf,IAEMG,IAA4C,CAAC;AAAA,EACjD,MAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AACd,MAAM;AACJ,QAAMC,IAAU,MAAM,KAAKJ,CAAI,GACzBK,IAAWC,EAAA,GACXC,IAAgCC,EAAe,CAAC;AACtD,EAAAC,EAAU,MAAM;AACd,UAAMC,IAAQH,EAAS,IAAA;AACvB,IAAAF,EAAS,MAAM;AAAA,MACb,QAAQK,IAAQ;AAAA,MAChB,OAAO;AAAA,MACP,YAAYZ,EAAcG,GAAcS,CAAK;AAAA,IAAA,CAC9C;AAAA,EACH,GAAG,CAACT,GAAcD,GAAME,GAASG,GAAUE,CAAQ,CAAC;AACpD,QAAMI,IAAmB,MAAM;AAC7B,UAAMD,IAAQH,EAAS,IAAA;AACvB,QAAI,CAACL,EAAS;AACd,QAAIU,GACAC,IAAW;AACf,YAAQX,GAAA;AAAA,MACN,KAAK;AACH,QAAAU,IAAmBd,EAAcG,IAAe,GAAGS,CAAK;AACxD;AAAA,MACF,KAAK;AACH,QAAAE,IAAmBd,EAAcG,IAAe,GAAGS,CAAK;AACxD;AAAA,MACF,KAAK;AACH,QAAAE,IAAmB;AAAA,UACjB,QAAQ,EAAE,MAAM,UAAU,SAAS,IAAI,WAAW,IAAA;AAAA,UAClD,OAAO,EAAE,MAAM,UAAU,SAAS,IAAI,WAAW,IAAA;AAAA,QAAI;AAEvD;AAAA,MACF,KAAK;AACH,QAAAA,IAAmBd,EAAcG,IAAe,IAAIS,CAAK,GACzDG,IAAW;AACX;AAAA,MACF;AACE,QAAAD,IAAmBd,EAAcG,GAAcS,CAAK;AAAA,IAAA;AAExD,IAAAL,EAAS,MAAM;AAAA,MACb,QAAQK,IAAQ;AAAA,MAChB,OAAOG;AAAA,MACP,YAAYD;AAAA,IAAA,CACb;AAAA,EACH,GACME,IAAiB,MAAM;AAC3B,UAAMJ,IAAQH,EAAS,IAAA;AACvB,IAAAF,EAAS,MAAM;AAAA,MACb,QAAQK,IAAQ;AAAA,MAChB,OAAO;AAAA,MACP,YAAYZ,EAAcG,GAAcS,CAAK;AAAA,IAAA,CAC9C;AAAA,EACH;AACA,SACE,gBAAAK;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACC,WAAW,~~6HAA6Hb~~,CAAS;AAAA,~~MACjJ~~,OAAO,EAAE,QAAQI,EAAA;AAAA,MACjB,SAAS,EAAE,QAAQ,EAAA;AAAA,MACnB,SAASF;AAAA,MACT,cAAcM;AAAA,MACd,cAAcG;AAAA,MAEb,UAAAV,EAAQ,IAAI,CAACa,GAAQC,MAAM;AAC1B,cAAMC,IAAe,MAAMf,EAAQ,SAAUc,GACvCE,IAAS,KAAK,KAAKhB,EAAQ,QAC3B,IAAIgB,IAASF,GACbG,IAAID,IAASF,GACbI,IAAY,WAAWH,CAAW,oBAAoB,CAAC,OAAOE,CAAC;AACrE,eACE,gBAAAN;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC,WAAU;AAAA,YACV,OAAO,EAAE,WAAAO,GAAW,iBAAiBA,EAAA;AAAA,YAEpC,UAAAL;AAAA,UAAA;AAAA,UAJIC;AAAA,QAAA;AAAA,MAOX,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;"}
1	+ {"version":3,"file":"CircularText.js","sources":["../../../../src/lib/TextAnimation/CircularText.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect } from \"react\";\nimport {\n motion,\n useAnimation,\n useMotionValue,\n MotionValue,\n type Transition,\n} from \"motion/react\";\n\ninterface CircularTextProps {\n text: string;\n spinDuration?: number;\n onHover?: \"slowDown\" \| \"speedUp\" \| \"pause\" \| \"goBonkers\";\n className?: string;\n}\n\nconst getRotationTransition = (\n duration: number,\n from: number,\n loop: boolean = true\n) => ({\n from,\n to: from + 360,\n ease: \"linear\" as const,\n duration,\n type: \"tween\" as const,\n repeat: loop ? Infinity : 0,\n});\n\nconst getTransition = (duration: number, from: number) => ({\n rotate: getRotationTransition(duration, from),\n scale: {\n type: \"spring\" as const,\n damping: 20,\n stiffness: 300,\n },\n});\n\nconst CircularText: React.FC<CircularTextProps> = ({\n text,\n spinDuration = 20,\n onHover = \"speedUp\",\n className = \"\",\n}) => {\n const letters = Array.from(text);\n const controls = useAnimation();\n const rotation: MotionValue<number> = useMotionValue(0);\n useEffect(() => {\n const start = rotation.get();\n controls.start({\n rotate: start + 360,\n scale: 1,\n transition: getTransition(spinDuration, start),\n });\n }, [spinDuration, text, onHover, controls, rotation]);\n const handleHoverStart = () => {\n const start = rotation.get();\n if (!onHover) return;\n let transitionConfig: ReturnType<typeof getTransition> \| Transition;\n let scaleVal = 1;\n switch (onHover) {\n case \"slowDown\":\n transitionConfig = getTransition(spinDuration * 2, start);\n break;\n case \"speedUp\":\n transitionConfig = getTransition(spinDuration / 4, start);\n break;\n case \"pause\":\n transitionConfig = {\n rotate: { type: \"spring\", damping: 20, stiffness: 300 },\n scale: { type: \"spring\", damping: 20, stiffness: 300 },\n };\n break;\n case \"goBonkers\":\n transitionConfig = getTransition(spinDuration / 20, start);\n scaleVal = 0.8;\n break;\n default:\n transitionConfig = getTransition(spinDuration, start);\n }\n controls.start({\n rotate: start + 360,\n scale: scaleVal,\n transition: transitionConfig,\n });\n };\n const handleHoverEnd = () => {\n const start = rotation.get();\n controls.start({\n rotate: start + 360,\n scale: 1,\n transition: getTransition(spinDuration, start),\n });\n };\n return (\n <motion.div\n className={`ds:m-0 ds:mx-auto ds:rounded-full ds:w-[200px] ds:h-[200px] ds:relative ds:font-black ds:text-foreground ds:text-center ds:cursor-pointer ds:origin-center ${className}`}\n style={{ rotate: rotation }}\n initial={{ rotate: 0 }}\n animate={controls}\n onMouseEnter={handleHoverStart}\n onMouseLeave={handleHoverEnd}\n >\n {letters.map((letter, i) => {\n const rotationDeg = (360 / letters.length) * i;\n const factor = Math.PI / letters.length;\n const x = factor * i;\n const y = factor * i;\n const transform = `rotateZ(${rotationDeg}deg) translate3d(${x}px, ${y}px, 0)`;\n return (\n <span\n key={i}\n className=\"ds:absolute ds:inline-block ds:inset-0 ds:text-2xl ds:transition-all ds:duration-500 ds:ease-[cubic-bezier(0,0,0,1)]\"\n style={{ transform, WebkitTransform: transform }}\n >\n {letter}\n </span>\n );\n })}\n </motion.div>\n );\n};\n\nexport default CircularText;\n"],"names":["getRotationTransition","duration","from","loop","getTransition","CircularText","text","spinDuration","onHover","className","letters","controls","useAnimation","rotation","useMotionValue","useEffect","start","handleHoverStart","transitionConfig","scaleVal","handleHoverEnd","jsx","motion","letter","i","rotationDeg","factor","y","transform"],"mappings":"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"}

package/dist/esm/lib/TextAnimation/FlipWords.js CHANGED Viewed

@@ -34,31 +34,31 @@ import "@radix-ui/react-slider";
 import "../../packages/ui/src/components/tabs.js";
 import "../../packages/ui/src/components/toggle.js";
 function ei({
-  ref: y,
+  ref: d,
   words: r,
   duration: n = 3e3,
-  letterDelay: h = 0.05,
-  wordDelay: l = 0.3,
-  className: b,
-  ...x
+  letterDelay: y = 0.05,
+  wordDelay: s = 0.3,
+  className: h,
+  ...b
 }) {
-  const m = t.useRef(null);
+  const l = t.useRef(null);
   t.useImperativeHandle(
-    y,
-    () => m.current
+    d,
+    () => l.current
   );
-  const [o, g] = t.useState(r[0]), [s, c] = t.useState(!1), f = t.useCallback(() => {
+  const [o, x] = t.useState(r[0]), [m, c] = t.useState(!1), f = t.useCallback(() => {
     const i = r[r.indexOf(o) + 1] || r[0];
-    g(i), c(!0);
+    x(i), c(!0);
   }, [o, r]);
   return t.useEffect(() => {
-    if (!s) {
+    if (!m) {
       const i = setTimeout(() => {
         f();
       }, n);
       return () => clearTimeout(i);
     }
-  }, [s, n, f]), /* @__PURE__ */ e("span", { ref: m, "data-slot": "flip-words", ...x, children: /* @__PURE__ */ e(
+  }, [m, n, f]), /* @__PURE__ */ e("span", { ref: l, "data-slot": "flip-words", ...b, children: /* @__PURE__ */ e(
     A,
     {
       onExitComplete: () => {
@@ -89,8 +89,8 @@ function ei({
             position: "absolute"
           },
           className: N(
-            "inline-block relative text-left px-2 will-change-transform will-change-opacity will-change-filter",
-            b
+            "ds:inline-block ds:relative ds:text-left ds:px-2 ds:will-change-transform ds:will-change-opacity ds:will-change-filter",
+            h
           ),
           children: o.split(" ").map((i, a) => /* @__PURE__ */ k(
             p.span,
@@ -98,26 +98,26 @@ function ei({
               initial: { opacity: 0, y: 10, filter: "blur(8px)" },
               animate: { opacity: 1, y: 0, filter: "blur(0px)" },
               transition: {
-                delay: a * l,
+                delay: a * s,
                 duration: 0.3
               },
-              className: "inline-block whitespace-nowrap",
+              className: "ds:inline-block ds:whitespace-nowrap",
               children: [
-                i.split("").map((d, u) => /* @__PURE__ */ e(
+                i.split("").map((g, u) => /* @__PURE__ */ e(
                   p.span,
                   {
                     initial: { opacity: 0, y: 10, filter: "blur(8px)" },
                     animate: { opacity: 1, y: 0, filter: "blur(0px)" },
                     transition: {
-                      delay: a * l + u * h,
+                      delay: a * s + u * y,
                       duration: 0.2
                     },
-                    className: "inline-block will-change-transform will-change-opacity will-change-filter",
-                    children: d
+                    className: "ds:inline-block ds:will-change-transform ds:will-change-opacity ds:will-change-filter",
+                    children: g
                   },
                   `${i}-${u}`
                 )),
-                /* @__PURE__ */ e("span", { className: "inline-block", children: " " })
+                /* @__PURE__ */ e("span", { className: "ds:inline-block", children: " " })
               ]
             },
             `${i}-${a}`

package/dist/esm/lib/TextAnimation/FlipWords.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlipWords.js","sources":["../../../../src/lib/TextAnimation/FlipWords.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { cn } from \"@dsui/ui/index\";\n\ntype FlipWordsProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n words: string[];\n duration?: number;\n letterDelay?: number;\n wordDelay?: number;\n};\n\nfunction FlipWords({\n ref,\n words,\n duration = 3000,\n letterDelay = 0.05,\n wordDelay = 0.3,\n className,\n ...props\n}: FlipWordsProps) {\n const localRef = React.useRef<HTMLSpanElement>(null);\n React.useImperativeHandle(\n ref as any,\n () => localRef.current as HTMLSpanElement\n );\n const [currentWord, setCurrentWord] = React.useState(words[0]);\n const [isAnimating, setIsAnimating] = React.useState<boolean>(false);\n\n const startAnimation = React.useCallback(() => {\n const word = words[words.indexOf(currentWord) + 1] \|\| words[0];\n setCurrentWord(word);\n setIsAnimating(true);\n }, [currentWord, words]);\n\n React.useEffect(() => {\n if (!isAnimating) {\n const timeoutId = setTimeout(() => {\n startAnimation();\n }, duration);\n return () => clearTimeout(timeoutId);\n }\n }, [isAnimating, duration, startAnimation]);\n\n return (\n <span ref={localRef} data-slot=\"flip-words\" {...(props as any)}>\n <AnimatePresence\n onExitComplete={() => {\n setIsAnimating(false);\n }}\n >\n <motion.span\n initial={{\n opacity: 0,\n y: 10,\n }}\n animate={{\n opacity: 1,\n y: 0,\n }}\n transition={{\n type: \"spring\",\n stiffness: 100,\n damping: 10,\n }}\n exit={{\n opacity: 0,\n y: -40,\n x: 40,\n filter: \"blur(8px)\",\n scale: 2,\n position: \"absolute\",\n }}\n className={cn(\n \"inline-block relative text-left px-2 will-change-transform will-change-opacity will-change-filter\",\n className\n )}\n key={currentWord}\n >\n {currentWord.split(\" \").map((word, wordIndex) => (\n <motion.span\n key={`${word}-${wordIndex}`}\n initial={{ opacity: 0, y: 10, filter: \"blur(8px)\" }}\n animate={{ opacity: 1, y: 0, filter: \"blur(0px)\" }}\n transition={{\n delay: wordIndex * wordDelay,\n duration: 0.3,\n }}\n className=\"inline-block whitespace-nowrap\"\n >\n {word.split(\"\").map((letter, letterIndex) => (\n <motion.span\n key={`${word}-${letterIndex}`}\n initial={{ opacity: 0, y: 10, filter: \"blur(8px)\" }}\n animate={{ opacity: 1, y: 0, filter: \"blur(0px)\" }}\n transition={{\n delay: wordIndex * wordDelay + letterIndex * letterDelay,\n duration: 0.2,\n }}\n className=\"inline-block will-change-transform will-change-opacity will-change-filter\"\n >\n {letter}\n </motion.span>\n ))}\n <span className=\"inline-block\"> </span>\n </motion.span>\n ))}\n </motion.span>\n </AnimatePresence>\n </span>\n );\n}\n\nexport { FlipWords, type FlipWordsProps };\n"],"names":["FlipWords","ref","words","duration","letterDelay","wordDelay","className","props","localRef","React","currentWord","setCurrentWord","isAnimating","setIsAnimating","startAnimation","word","timeoutId","jsx","AnimatePresence","motion","cn","wordIndex","jsxs","letter","letterIndex"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,SAASA,GAAU;AAAA,EACjB,KAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,aAAAC,IAAc;AAAA,EACd,WAAAC,IAAY;AAAA,EACZ,WAAAC;AAAA,EACA,GAAGC;AACL,GAAmB;AACjB,QAAMC,IAAWC,EAAM,OAAwB,IAAI;AACnD,EAAAA,EAAM;AAAA,IACJR;AAAA,IACA,MAAMO,EAAS;AAAA,EAAA;AAEjB,QAAM,CAACE,GAAaC,CAAc,IAAIF,EAAM,SAASP,EAAM,CAAC,CAAC,GACvD,CAACU,GAAaC,CAAc,IAAIJ,EAAM,SAAkB,EAAK,GAE7DK,IAAiBL,EAAM,YAAY,MAAM;AAC7C,UAAMM,IAAOb,EAAMA,EAAM,QAAQQ,CAAW,IAAI,CAAC,KAAKR,EAAM,CAAC;AAC7D,IAAAS,EAAeI,CAAI,GACnBF,EAAe,EAAI;AAAA,EACrB,GAAG,CAACH,GAAaR,CAAK,CAAC;AAEvB,SAAAO,EAAM,UAAU,MAAM;AACpB,QAAI,CAACG,GAAa;AAChB,YAAMI,IAAY,WAAW,MAAM;AACjC,QAAAF,EAAA;AAAA,MACF,GAAGX,CAAQ;AACX,aAAO,MAAM,aAAaa,CAAS;AAAA,IACrC;AAAA,EACF,GAAG,CAACJ,GAAaT,GAAUW,CAAc,CAAC,qBAGvC,QAAA,EAAK,KAAKN,GAAU,aAAU,cAAc,GAAID,GAC/C,UAAA,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAgB,MAAM;AACpB,QAAAL,EAAe,EAAK;AAAA,MACtB;AAAA,MAEA,UAAA,gBAAAI;AAAA,QAACE,EAAO;AAAA,QAAP;AAAA,UACC,SAAS;AAAA,YACP,SAAS;AAAA,YACT,GAAG;AAAA,UAAA;AAAA,UAEL,SAAS;AAAA,YACP,SAAS;AAAA,YACT,GAAG;AAAA,UAAA;AAAA,UAEL,YAAY;AAAA,YACV,MAAM;AAAA,YACN,WAAW;AAAA,YACX,SAAS;AAAA,UAAA;AAAA,UAEX,MAAM;AAAA,YACJ,SAAS;AAAA,YACT,GAAG;AAAA,YACH,GAAG;AAAA,YACH,QAAQ;AAAA,YACR,OAAO;AAAA,YACP,UAAU;AAAA,UAAA;AAAA,UAEZ,WAAWC;AAAA,YACT;AAAA,YACAd;AAAA,UAAA;AAAA,UAID,YAAY,MAAM,GAAG,EAAE,IAAI,CAACS,GAAMM,MACjC,gBAAAC;AAAA,YAACH,EAAO;AAAA,YAAP;AAAA,cAEC,SAAS,EAAE,SAAS,GAAG,GAAG,IAAI,QAAQ,YAAA;AAAA,cACtC,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG,QAAQ,YAAA;AAAA,cACrC,YAAY;AAAA,gBACV,OAAOE,IAAYhB;AAAA,gBACnB,UAAU;AAAA,cAAA;AAAA,cAEZ,WAAU;AAAA,cAET,UAAA;AAAA,gBAAAU,EAAK,MAAM,EAAE,EAAE,IAAI,CAACQ,GAAQC,MAC3B,gBAAAP;AAAA,kBAACE,EAAO;AAAA,kBAAP;AAAA,oBAEC,SAAS,EAAE,SAAS,GAAG,GAAG,IAAI,QAAQ,YAAA;AAAA,oBACtC,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG,QAAQ,YAAA;AAAA,oBACrC,YAAY;AAAA,sBACV,OAAOE,IAAYhB,IAAYmB,IAAcpB;AAAA,sBAC7C,UAAU;AAAA,oBAAA;AAAA,oBAEZ,WAAU;AAAA,oBAET,UAAAmB;AAAA,kBAAA;AAAA,kBATI,GAAGR,CAAI,IAAIS,CAAW;AAAA,gBAAA,CAW9B;AAAA,gBACD,gBAAAP,EAAC,QAAA,EAAK,WAAU,~~gBAAe~~,UAAA,IAAA,CAAM;AAAA,cAAA;AAAA,YAAA;AAAA,~~YAvBhC~~,GAAGF,CAAI,IAAIM,CAAS;AAAA,UAAA,CAyB5B;AAAA,QAAA;AAAA,QA7BIX;AAAA,MAAA;AAAA,IA8BP;AAAA,EAAA,GAEJ;AAEJ;"}
1	+ {"version":3,"file":"FlipWords.js","sources":["../../../../src/lib/TextAnimation/FlipWords.tsx"],"sourcesContent":["\"use client\";\nimport * as React from \"react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport { cn } from \"@dsui/ui/index\";\n\ntype FlipWordsProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n words: string[];\n duration?: number;\n letterDelay?: number;\n wordDelay?: number;\n};\n\nfunction FlipWords({\n ref,\n words,\n duration = 3000,\n letterDelay = 0.05,\n wordDelay = 0.3,\n className,\n ...props\n}: FlipWordsProps) {\n const localRef = React.useRef<HTMLSpanElement>(null);\n React.useImperativeHandle(\n ref as any,\n () => localRef.current as HTMLSpanElement\n );\n const [currentWord, setCurrentWord] = React.useState(words[0]);\n const [isAnimating, setIsAnimating] = React.useState<boolean>(false);\n\n const startAnimation = React.useCallback(() => {\n const word = words[words.indexOf(currentWord) + 1] \|\| words[0];\n setCurrentWord(word);\n setIsAnimating(true);\n }, [currentWord, words]);\n\n React.useEffect(() => {\n if (!isAnimating) {\n const timeoutId = setTimeout(() => {\n startAnimation();\n }, duration);\n return () => clearTimeout(timeoutId);\n }\n }, [isAnimating, duration, startAnimation]);\n\n return (\n <span ref={localRef} data-slot=\"flip-words\" {...(props as any)}>\n <AnimatePresence\n onExitComplete={() => {\n setIsAnimating(false);\n }}\n >\n <motion.span\n initial={{\n opacity: 0,\n y: 10,\n }}\n animate={{\n opacity: 1,\n y: 0,\n }}\n transition={{\n type: \"spring\",\n stiffness: 100,\n damping: 10,\n }}\n exit={{\n opacity: 0,\n y: -40,\n x: 40,\n filter: \"blur(8px)\",\n scale: 2,\n position: \"absolute\",\n }}\n className={cn(\n \"ds:inline-block ds:relative ds:text-left ds:px-2 ds:will-change-transform ds:will-change-opacity ds:will-change-filter\",\n className\n )}\n key={currentWord}\n >\n {currentWord.split(\" \").map((word, wordIndex) => (\n <motion.span\n key={`${word}-${wordIndex}`}\n initial={{ opacity: 0, y: 10, filter: \"blur(8px)\" }}\n animate={{ opacity: 1, y: 0, filter: \"blur(0px)\" }}\n transition={{\n delay: wordIndex * wordDelay,\n duration: 0.3,\n }}\n className=\"ds:inline-block ds:whitespace-nowrap\"\n >\n {word.split(\"\").map((letter, letterIndex) => (\n <motion.span\n key={`${word}-${letterIndex}`}\n initial={{ opacity: 0, y: 10, filter: \"blur(8px)\" }}\n animate={{ opacity: 1, y: 0, filter: \"blur(0px)\" }}\n transition={{\n delay: wordIndex * wordDelay + letterIndex * letterDelay,\n duration: 0.2,\n }}\n className=\"ds:inline-block ds:will-change-transform ds:will-change-opacity ds:will-change-filter\"\n >\n {letter}\n </motion.span>\n ))}\n <span className=\"ds:inline-block\"> </span>\n </motion.span>\n ))}\n </motion.span>\n </AnimatePresence>\n </span>\n );\n}\n\nexport { FlipWords, type FlipWordsProps };\n"],"names":["FlipWords","ref","words","duration","letterDelay","wordDelay","className","props","localRef","React","currentWord","setCurrentWord","isAnimating","setIsAnimating","startAnimation","word","timeoutId","jsx","AnimatePresence","motion","cn","wordIndex","jsxs","letter","letterIndex"],"mappings":"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"}

package/dist/esm/lib/TextAnimation/GradientText.js CHANGED Viewed

@@ -7,7 +7,7 @@ import "../../packages/ui/src/components/button-group.js";
 import "../../packages/ui/src/components/input.js";
 import "../../packages/ui/src/components/textarea.js";
 import "@radix-ui/react-label";
-import { cn as l } from "../../packages/ui/src/lib/utils.js";
+import { cn as d } from "../../packages/ui/src/lib/utils.js";
 import "../../packages/ui/src/components/select.js";
 import "../../packages/ui/src/components/combobox.js";
 import "@radix-ui/react-tooltip";
@@ -52,13 +52,13 @@ function R({
     "span",
     {
       "data-slot": "gradient-text",
-      className: l("relative inline-block", p),
+      className: d("ds:relative ds:inline-block", p),
       ...n,
       children: [
         /* @__PURE__ */ o(
           m.span,
           {
-            className: "m-0 text-transparent",
+            className: "ds:m-0 ds:text-transparent",
             style: i,
             animate: { backgroundPosition: ["0% 0%", "200% 0%"] },
             transition: r,
@@ -68,7 +68,7 @@ function R({
         a && /* @__PURE__ */ o(
           m.span,
           {
-            className: "m-0 absolute top-0 left-0 text-transparent blur-sm mix-blend-plus-lighter",
+            className: "ds:m-0 ds:absolute ds:top-0 ds:left-0 ds:text-transparent ds:blur-sm ds:mix-blend-plus-lighter",
             style: i,
             animate: { backgroundPosition: ["0% 0%", "200% 0%"] },
             transition: r,

package/dist/esm/lib/TextAnimation/GradientText.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GradientText.js","sources":["../../../../src/lib/TextAnimation/GradientText.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { motion, type Transition } from \"motion/react\";\nimport { cn } from \"@dsui/ui/index\";\n\ntype GradientTextProps = React.ComponentProps<\"span\"> & {\n text: string;\n gradient?: string;\n neon?: boolean;\n transition?: Transition;\n};\n\nfunction GradientText({\n text,\n className,\n gradient = \"linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)\",\n neon = false,\n transition = { duration: 3, repeat: Infinity, ease: \"linear\" },\n ...props\n}: GradientTextProps) {\n const baseStyle: React.CSSProperties = {\n backgroundImage: gradient,\n backgroundClip: \"text\",\n WebkitBackgroundClip: \"text\",\n backgroundSize: \"200% 100%\",\n color: \"transparent\",\n };\n\n return (\n <span\n data-slot=\"gradient-text\"\n className={cn(\"relative inline-block\", className)}\n {...(props as any)}\n >\n <motion.span\n className=\"m-0 text-transparent\"\n style={baseStyle as any}\n animate={{ backgroundPosition: [\"0% 0%\", \"200% 0%\"] }}\n transition={transition}\n >\n {text}\n </motion.span>\n\n {neon && (\n <motion.span\n className=\"m-0 absolute top-0 left-0 text-transparent blur-sm mix-blend-plus-lighter\"\n style={baseStyle as any}\n animate={{ backgroundPosition: [\"0% 0%\", \"200% 0%\"] }}\n transition={transition}\n >\n {text}\n </motion.span>\n )}\n </span>\n );\n}\n\nexport { GradientText, type GradientTextProps };\n"],"names":["GradientText","text","className","gradient","neon","transition","props","baseStyle","jsxs","cn","jsx","motion"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,SAASA,EAAa;AAAA,EACpB,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,YAAAC,IAAa,EAAE,UAAU,GAAG,QAAQ,OAAU,MAAM,SAAA;AAAA,EACpD,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAiC;AAAA,IACrC,iBAAiBJ;AAAA,IACjB,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,gBAAgB;AAAA,IAChB,OAAO;AAAA,EAAA;AAGT,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,~~yBAAyBP,~~CAAS;AAAA,~~MAC/C~~,GAAII;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAACC,EAAO;AAAA,UAAP;AAAA,YACC,WAAU;AAAA,YACV,OAAOJ;AAAA,YACP,SAAS,EAAE,oBAAoB,CAAC,SAAS,SAAS,EAAA;AAAA,YAClD,YAAAF;AAAA,YAEC,UAAAJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGFG,KACC,gBAAAM;AAAA,UAACC,EAAO;AAAA,UAAP;AAAA,YACC,WAAU;AAAA,YACV,OAAOJ;AAAA,YACP,SAAS,EAAE,oBAAoB,CAAC,SAAS,SAAS,EAAA;AAAA,YAClD,YAAAF;AAAA,YAEC,UAAAJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}
1	+ {"version":3,"file":"GradientText.js","sources":["../../../../src/lib/TextAnimation/GradientText.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { motion, type Transition } from \"motion/react\";\nimport { cn } from \"@dsui/ui/index\";\n\ntype GradientTextProps = React.ComponentProps<\"span\"> & {\n text: string;\n gradient?: string;\n neon?: boolean;\n transition?: Transition;\n};\n\nfunction GradientText({\n text,\n className,\n gradient = \"linear-gradient(90deg, #3b82f6 0%, #a855f7 20%, #ec4899 50%, #a855f7 80%, #3b82f6 100%)\",\n neon = false,\n transition = { duration: 3, repeat: Infinity, ease: \"linear\" },\n ...props\n}: GradientTextProps) {\n const baseStyle: React.CSSProperties = {\n backgroundImage: gradient,\n backgroundClip: \"text\",\n WebkitBackgroundClip: \"text\",\n backgroundSize: \"200% 100%\",\n color: \"transparent\",\n };\n\n return (\n <span\n data-slot=\"gradient-text\"\n className={cn(\"ds:relative ds:inline-block\", className)}\n {...(props as any)}\n >\n <motion.span\n className=\"ds:m-0 ds:text-transparent\"\n style={baseStyle as any}\n animate={{ backgroundPosition: [\"0% 0%\", \"200% 0%\"] }}\n transition={transition}\n >\n {text}\n </motion.span>\n\n {neon && (\n <motion.span\n className=\"ds:m-0 ds:absolute ds:top-0 ds:left-0 ds:text-transparent ds:blur-sm ds:mix-blend-plus-lighter\"\n style={baseStyle as any}\n animate={{ backgroundPosition: [\"0% 0%\", \"200% 0%\"] }}\n transition={transition}\n >\n {text}\n </motion.span>\n )}\n </span>\n );\n}\n\nexport { GradientText, type GradientTextProps };\n"],"names":["GradientText","text","className","gradient","neon","transition","props","baseStyle","jsxs","cn","jsx","motion"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,SAASA,EAAa;AAAA,EACpB,MAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,YAAAC,IAAa,EAAE,UAAU,GAAG,QAAQ,OAAU,MAAM,SAAA;AAAA,EACpD,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAiC;AAAA,IACrC,iBAAiBJ;AAAA,IACjB,gBAAgB;AAAA,IAChB,sBAAsB;AAAA,IACtB,gBAAgB;AAAA,IAChB,OAAO;AAAA,EAAA;AAGT,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,+BAA+BP,CAAS;AAAA,MACrD,GAAII;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAACC,EAAO;AAAA,UAAP;AAAA,YACC,WAAU;AAAA,YACV,OAAOJ;AAAA,YACP,SAAS,EAAE,oBAAoB,CAAC,SAAS,SAAS,EAAA;AAAA,YAClD,YAAAF;AAAA,YAEC,UAAAJ;AAAA,UAAA;AAAA,QAAA;AAAA,QAGFG,KACC,gBAAAM;AAAA,UAACC,EAAO;AAAA,UAAP;AAAA,YACC,WAAU;AAAA,YACV,OAAOJ;AAAA,YACP,SAAS,EAAE,oBAAoB,CAAC,SAAS,SAAS,EAAA;AAAA,YAClD,YAAAF;AAAA,YAEC,UAAAJ;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/esm/lib/TextAnimation/RollingText.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { jsxs as m, jsx as i } from "react/jsx-runtime";
-import * as s from "react";
-import { useInView as y, motion as d } from "motion/react";
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import * as l from "react";
+import { useInView as y, motion as m } from "motion/react";
 const p = {
   initial: { rotateX: 0 },
   animate: { rotateX: 90 }
@@ -14,54 +14,54 @@ function k({
   inView: f = !1,
   inViewMargin: N = "0px",
   inViewOnce: b = !0,
-  text: n,
+  text: s,
   ...h
 }) {
-  const r = s.useRef(null);
-  s.useImperativeHandle(e, () => r.current);
-  const I = y(r, {
+  const d = l.useRef(null);
+  l.useImperativeHandle(e, () => d.current);
+  const I = y(d, {
     once: b,
     margin: N
-  }), c = !f || I, v = s.useMemo(() => n.split(""), [n]);
-  return /* @__PURE__ */ m("span", { "data-slot": "rolling-text", ...h, ref: e, children: [
-    v.map((t, l) => /* @__PURE__ */ m(
+  }), r = !f || I, v = l.useMemo(() => s.split(""), [s]);
+  return /* @__PURE__ */ c("span", { "data-slot": "rolling-text", ...h, ref: e, children: [
+    v.map((n, t) => /* @__PURE__ */ c(
       "span",
       {
-        className: "relative inline-block perspective-[9999999px] transform-3d w-auto",
+        className: "ds:relative ds:inline-block ds:perspective-[9999999px] ds:transform-3d ds:w-auto",
         "aria-hidden": "true",
         children: [
           /* @__PURE__ */ i(
-            d.span,
+            m.span,
             {
-              className: "absolute inline-block backface-hidden origin-[50%_25%]",
+              className: "ds:absolute ds:inline-block ds:backface-hidden ds:origin-[50%_25%]",
               initial: p.initial,
-              animate: c ? p.animate : void 0,
+              animate: r ? p.animate : void 0,
               transition: {
                 ...a,
-                delay: l * (a?.delay ?? 0)
+                delay: t * (a?.delay ?? 0)
               },
-              children: o(t)
+              children: o(n)
             }
           ),
           /* @__PURE__ */ i(
-            d.span,
+            m.span,
             {
-              className: "absolute inline-block backface-hidden origin-[50%_100%]",
+              className: "ds:absolute ds:inline-block ds:backface-hidden ds:origin-[50%_100%]",
               initial: u.initial,
-              animate: c ? u.animate : void 0,
+              animate: r ? u.animate : void 0,
               transition: {
                 ...a,
-                delay: l * (a?.delay ?? 0) + 0.3
+                delay: t * (a?.delay ?? 0) + 0.3
               },
-              children: o(t)
+              children: o(n)
             }
           ),
-          /* @__PURE__ */ i("span", { className: "invisible", children: o(t) })
+          /* @__PURE__ */ i("span", { className: "ds:invisible", children: o(n) })
         ]
       },
-      l
+      t
     )),
-    /* @__PURE__ */ i("span", { className: "sr-only", children: n })
+    /* @__PURE__ */ i("span", { className: "ds:sr-only", children: s })
   ] });
 }
 export {

package/dist/esm/lib/TextAnimation/RollingText.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RollingText.js","sources":["../../../../src/lib/TextAnimation/RollingText.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n motion,\n useInView,\n type UseInViewOptions,\n type Transition,\n} from \"motion/react\";\n\nconst ENTRY_ANIMATION = {\n initial: { rotateX: 0 },\n animate: { rotateX: 90 },\n};\n\nconst EXIT_ANIMATION = {\n initial: { rotateX: 90 },\n animate: { rotateX: 0 },\n};\n\nconst formatCharacter = (char: string) => (char === \" \" ? \"\\u00A0\" : char);\n\ntype RollingTextProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n transition?: Transition;\n inView?: boolean;\n inViewMargin?: UseInViewOptions[\"margin\"];\n inViewOnce?: boolean;\n text: string;\n};\n\nfunction RollingText({\n ref,\n transition = { duration: 0.5, delay: 0.1, ease: \"easeOut\" },\n inView = false,\n inViewMargin = \"0px\",\n inViewOnce = true,\n text,\n ...props\n}: RollingTextProps) {\n const localRef = React.useRef<HTMLSpanElement>(null);\n React.useImperativeHandle(ref as any, () => localRef.current!);\n\n const inViewResult = useInView(localRef, {\n once: inViewOnce,\n margin: inViewMargin,\n });\n const isInView = !inView \|\| inViewResult;\n\n const characters = React.useMemo(() => text.split(\"\"), [text]);\n\n return (\n <span data-slot=\"rolling-text\" {...(props as any)} ref={ref}>\n {characters.map((char, idx) => (\n <span\n key={idx}\n className=\"relative inline-block perspective-[9999999px] transform-3d w-auto\"\n aria-hidden=\"true\"\n >\n <motion.span\n className=\"absolute inline-block backface-hidden origin-[50%_25%]\"\n initial={ENTRY_ANIMATION.initial}\n animate={isInView ? ENTRY_ANIMATION.animate : undefined}\n transition={{\n ...transition,\n delay: idx * (transition?.delay ?? 0),\n }}\n >\n {formatCharacter(char)}\n </motion.span>\n <motion.span\n className=\"absolute inline-block backface-hidden origin-[50%_100%]\"\n initial={EXIT_ANIMATION.initial}\n animate={isInView ? EXIT_ANIMATION.animate : undefined}\n transition={{\n ...transition,\n delay: idx * (transition?.delay ?? 0) + 0.3,\n }}\n >\n {formatCharacter(char)}\n </motion.span>\n <span className=\"invisible\">{formatCharacter(char)}</span>\n </span>\n ))}\n\n <span className=\"sr-only\">{text}</span>\n </span>\n );\n}\n\nexport { RollingText, type RollingTextProps };\n"],"names":["ENTRY_ANIMATION","EXIT_ANIMATION","formatCharacter","char","RollingText","ref","transition","inView","inViewMargin","inViewOnce","text","props","localRef","React","inViewResult","useInView","isInView","characters","idx","jsxs","jsx","motion"],"mappings":";;;AAUA,MAAMA,IAAkB;AAAA,EACtB,SAAS,EAAE,SAAS,EAAA;AAAA,EACpB,SAAS,EAAE,SAAS,GAAA;AACtB,GAEMC,IAAiB;AAAA,EACrB,SAAS,EAAE,SAAS,GAAA;AAAA,EACpB,SAAS,EAAE,SAAS,EAAA;AACtB,GAEMC,IAAkB,CAACC,MAAkBA,MAAS,MAAM,MAAWA;AAUrE,SAASC,EAAY;AAAA,EACnB,KAAAC;AAAA,EACA,YAAAC,IAAa,EAAE,UAAU,KAAK,OAAO,KAAK,MAAM,UAAA;AAAA,EAChD,QAAAC,IAAS;AAAA,EACT,cAAAC,IAAe;AAAA,EACf,YAAAC,IAAa;AAAA,EACb,MAAAC;AAAA,EACA,GAAGC;AACL,GAAqB;AACnB,QAAMC,IAAWC,EAAM,OAAwB,IAAI;AACnD,EAAAA,EAAM,oBAAoBR,GAAY,MAAMO,EAAS,OAAQ;AAE7D,QAAME,IAAeC,EAAUH,GAAU;AAAA,IACvC,MAAMH;AAAA,IACN,QAAQD;AAAA,EAAA,CACT,GACKQ,IAAW,CAACT,KAAUO,GAEtBG,IAAaJ,EAAM,QAAQ,MAAMH,EAAK,MAAM,EAAE,GAAG,CAACA,CAAI,CAAC;AAE7D,2BACG,QAAA,EAAK,aAAU,gBAAgB,GAAIC,GAAe,KAAAN,GAChD,UAAA;AAAA,IAAAY,EAAW,IAAI,CAACd,GAAMe,MACrB,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QACV,eAAY;AAAA,QAEZ,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAACC,EAAO;AAAA,YAAP;AAAA,cACC,WAAU;AAAA,cACV,SAASrB,EAAgB;AAAA,cACzB,SAASgB,IAAWhB,EAAgB,UAAU;AAAA,cAC9C,YAAY;AAAA,gBACV,GAAGM;AAAA,gBACH,OAAOY,KAAOZ,GAAY,SAAS;AAAA,cAAA;AAAA,cAGpC,YAAgBH,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAEvB,gBAAAiB;AAAA,YAACC,EAAO;AAAA,YAAP;AAAA,cACC,WAAU;AAAA,cACV,SAASpB,EAAe;AAAA,cACxB,SAASe,IAAWf,EAAe,UAAU;AAAA,cAC7C,YAAY;AAAA,gBACV,GAAGK;AAAA,gBACH,OAAOY,KAAOZ,GAAY,SAAS,KAAK;AAAA,cAAA;AAAA,cAGzC,YAAgBH,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,4BAEtB,QAAA,EAAK,WAAU,~~aAAa~~,UAAAD,EAAgBC,CAAI,EAAA,CAAE;AAAA,QAAA;AAAA,MAAA;AAAA,~~MA1B9Ce~~;AAAA,IAAA,CA4BR;AAAA,IAED,gBAAAE,EAAC,QAAA,EAAK,WAAU,~~WAAW~~,UAAAV,EAAA,CAAK;AAAA,EAAA,~~GAClC~~;AAEJ;"}
1	+ {"version":3,"file":"RollingText.js","sources":["../../../../src/lib/TextAnimation/RollingText.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n motion,\n useInView,\n type UseInViewOptions,\n type Transition,\n} from \"motion/react\";\n\nconst ENTRY_ANIMATION = {\n initial: { rotateX: 0 },\n animate: { rotateX: 90 },\n};\n\nconst EXIT_ANIMATION = {\n initial: { rotateX: 90 },\n animate: { rotateX: 0 },\n};\n\nconst formatCharacter = (char: string) => (char === \" \" ? \"\\u00A0\" : char);\n\ntype RollingTextProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n transition?: Transition;\n inView?: boolean;\n inViewMargin?: UseInViewOptions[\"margin\"];\n inViewOnce?: boolean;\n text: string;\n};\n\nfunction RollingText({\n ref,\n transition = { duration: 0.5, delay: 0.1, ease: \"easeOut\" },\n inView = false,\n inViewMargin = \"0px\",\n inViewOnce = true,\n text,\n ...props\n}: RollingTextProps) {\n const localRef = React.useRef<HTMLSpanElement>(null);\n React.useImperativeHandle(ref as any, () => localRef.current!);\n\n const inViewResult = useInView(localRef, {\n once: inViewOnce,\n margin: inViewMargin,\n });\n const isInView = !inView \|\| inViewResult;\n\n const characters = React.useMemo(() => text.split(\"\"), [text]);\n\n return (\n <span data-slot=\"rolling-text\" {...(props as any)} ref={ref}>\n {characters.map((char, idx) => (\n <span\n key={idx}\n className=\"ds:relative ds:inline-block ds:perspective-[9999999px] ds:transform-3d ds:w-auto\"\n aria-hidden=\"true\"\n >\n <motion.span\n className=\"ds:absolute ds:inline-block ds:backface-hidden ds:origin-[50%_25%]\"\n initial={ENTRY_ANIMATION.initial}\n animate={isInView ? ENTRY_ANIMATION.animate : undefined}\n transition={{\n ...transition,\n delay: idx * (transition?.delay ?? 0),\n }}\n >\n {formatCharacter(char)}\n </motion.span>\n <motion.span\n className=\"ds:absolute ds:inline-block ds:backface-hidden ds:origin-[50%_100%]\"\n initial={EXIT_ANIMATION.initial}\n animate={isInView ? EXIT_ANIMATION.animate : undefined}\n transition={{\n ...transition,\n delay: idx * (transition?.delay ?? 0) + 0.3,\n }}\n >\n {formatCharacter(char)}\n </motion.span>\n <span className=\"ds:invisible\">{formatCharacter(char)}</span>\n </span>\n ))}\n\n <span className=\"ds:sr-only\">{text}</span>\n </span>\n );\n}\n\nexport { RollingText, type RollingTextProps };\n"],"names":["ENTRY_ANIMATION","EXIT_ANIMATION","formatCharacter","char","RollingText","ref","transition","inView","inViewMargin","inViewOnce","text","props","localRef","React","inViewResult","useInView","isInView","characters","idx","jsxs","jsx","motion"],"mappings":";;;AAUA,MAAMA,IAAkB;AAAA,EACtB,SAAS,EAAE,SAAS,EAAA;AAAA,EACpB,SAAS,EAAE,SAAS,GAAA;AACtB,GAEMC,IAAiB;AAAA,EACrB,SAAS,EAAE,SAAS,GAAA;AAAA,EACpB,SAAS,EAAE,SAAS,EAAA;AACtB,GAEMC,IAAkB,CAACC,MAAkBA,MAAS,MAAM,MAAWA;AAUrE,SAASC,EAAY;AAAA,EACnB,KAAAC;AAAA,EACA,YAAAC,IAAa,EAAE,UAAU,KAAK,OAAO,KAAK,MAAM,UAAA;AAAA,EAChD,QAAAC,IAAS;AAAA,EACT,cAAAC,IAAe;AAAA,EACf,YAAAC,IAAa;AAAA,EACb,MAAAC;AAAA,EACA,GAAGC;AACL,GAAqB;AACnB,QAAMC,IAAWC,EAAM,OAAwB,IAAI;AACnD,EAAAA,EAAM,oBAAoBR,GAAY,MAAMO,EAAS,OAAQ;AAE7D,QAAME,IAAeC,EAAUH,GAAU;AAAA,IACvC,MAAMH;AAAA,IACN,QAAQD;AAAA,EAAA,CACT,GACKQ,IAAW,CAACT,KAAUO,GAEtBG,IAAaJ,EAAM,QAAQ,MAAMH,EAAK,MAAM,EAAE,GAAG,CAACA,CAAI,CAAC;AAE7D,2BACG,QAAA,EAAK,aAAU,gBAAgB,GAAIC,GAAe,KAAAN,GAChD,UAAA;AAAA,IAAAY,EAAW,IAAI,CAACd,GAAMe,MACrB,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QACV,eAAY;AAAA,QAEZ,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAACC,EAAO;AAAA,YAAP;AAAA,cACC,WAAU;AAAA,cACV,SAASrB,EAAgB;AAAA,cACzB,SAASgB,IAAWhB,EAAgB,UAAU;AAAA,cAC9C,YAAY;AAAA,gBACV,GAAGM;AAAA,gBACH,OAAOY,KAAOZ,GAAY,SAAS;AAAA,cAAA;AAAA,cAGpC,YAAgBH,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,UAEvB,gBAAAiB;AAAA,YAACC,EAAO;AAAA,YAAP;AAAA,cACC,WAAU;AAAA,cACV,SAASpB,EAAe;AAAA,cACxB,SAASe,IAAWf,EAAe,UAAU;AAAA,cAC7C,YAAY;AAAA,gBACV,GAAGK;AAAA,gBACH,OAAOY,KAAOZ,GAAY,SAAS,KAAK;AAAA,cAAA;AAAA,cAGzC,YAAgBH,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,4BAEtB,QAAA,EAAK,WAAU,gBAAgB,UAAAD,EAAgBC,CAAI,EAAA,CAAE;AAAA,QAAA;AAAA,MAAA;AAAA,MA1BjDe;AAAA,IAAA,CA4BR;AAAA,IAED,gBAAAE,EAAC,QAAA,EAAK,WAAU,cAAc,UAAAV,EAAA,CAAK;AAAA,EAAA,GACrC;AAEJ;"}

package/dist/esm/lib/TextAnimation/RotatingText.js CHANGED Viewed

@@ -41,16 +41,16 @@ function Y({
   containerClassName: n,
   ...a
 }) {
-  const [c, s] = p.useState(0);
+  const [s, c] = p.useState(0);
   p.useEffect(() => {
     if (!Array.isArray(r)) return;
-    const l = setInterval(() => {
-      s((d) => (d + 1) % r.length);
+    const d = setInterval(() => {
+      c((l) => (l + 1) % r.length);
     }, o);
-    return () => clearInterval(l);
+    return () => clearInterval(d);
   }, [r, o]);
-  const m = Array.isArray(r) ? r[c] : r;
-  return /* @__PURE__ */ i("div", { className: u("overflow-hidden py-1", n), children: /* @__PURE__ */ i(f, { mode: "wait", children: /* @__PURE__ */ i(
+  const m = Array.isArray(r) ? r[s] : r;
+  return /* @__PURE__ */ i("div", { className: u("ds:overflow-hidden ds:py-1", n), children: /* @__PURE__ */ i(f, { mode: "wait", children: /* @__PURE__ */ i(
     y.div,
     {
       transition: e,

package/dist/esm/lib/TextAnimation/RotatingText.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RotatingText.js","sources":["../../../../src/lib/TextAnimation/RotatingText.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n AnimatePresence,\n motion,\n type HTMLMotionProps,\n type Transition,\n} from \"motion/react\";\nimport { cn } from \"@dsui/ui/index\";\n\ntype RotatingTextProps = {\n text: string \| string[];\n duration?: number;\n transition?: Transition;\n y?: number;\n containerClassName?: string;\n} & HTMLMotionProps<\"div\">;\n\nfunction RotatingText({\n text,\n y = -50,\n duration = 2000,\n transition = { duration: 0.3, ease: \"easeOut\" },\n containerClassName,\n ...props\n}: RotatingTextProps) {\n const [index, setIndex] = React.useState(0);\n\n React.useEffect(() => {\n if (!Array.isArray(text)) return;\n const interval = setInterval(() => {\n setIndex((prevIndex) => (prevIndex + 1) % text.length);\n }, duration);\n return () => clearInterval(interval);\n }, [text, duration]);\n\n const currentText = Array.isArray(text) ? text[index] : text;\n\n return (\n <div className={cn(\"overflow-hidden py-1\", containerClassName)}>\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={currentText}\n transition={transition}\n initial={{ opacity: 0, y: -y }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y }}\n {...(props as any)}\n >\n {currentText}\n </motion.div>\n </AnimatePresence>\n </div>\n );\n}\n\nexport { RotatingText, type RotatingTextProps };\n"],"names":["RotatingText","text","y","duration","transition","containerClassName","props","index","setIndex","React","interval","prevIndex","currentText","jsx","cn","AnimatePresence","motion"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,SAASA,EAAa;AAAA,EACpB,MAAAC;AAAA,EACA,GAAAC,IAAI;AAAA,EACJ,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa,EAAE,UAAU,KAAK,MAAM,UAAA;AAAA,EACpC,oBAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAM,SAAS,CAAC;AAE1C,EAAAA,EAAM,UAAU,MAAM;AACpB,QAAI,CAAC,MAAM,QAAQR,CAAI,EAAG;AAC1B,UAAMS,IAAW,YAAY,MAAM;AACjC,MAAAF,EAAS,CAACG,OAAeA,IAAY,KAAKV,EAAK,MAAM;AAAA,IACvD,GAAGE,CAAQ;AACX,WAAO,MAAM,cAAcO,CAAQ;AAAA,EACrC,GAAG,CAACT,GAAME,CAAQ,CAAC;AAEnB,QAAMS,IAAc,MAAM,QAAQX,CAAI,IAAIA,EAAKM,CAAK,IAAIN;AAExD,SACE,gBAAAY,EAAC,OAAA,EAAI,WAAWC,EAAG,~~wBAAwBT~~,CAAkB,~~GAC3D~~,UAAA,gBAAAQ,EAACE,GAAA,EAAgB,MAAK,QACpB,UAAA,gBAAAF;AAAA,IAACG,EAAO;AAAA,IAAP;AAAA,MAEC,YAAAZ;AAAA,MACA,SAAS,EAAE,SAAS,GAAG,GAAG,CAACF,EAAA;AAAA,MAC3B,SAAS,EAAE,SAAS,GAAG,GAAG,EAAA;AAAA,MAC1B,MAAM,EAAE,SAAS,GAAG,GAAAA,EAAA;AAAA,MACnB,GAAII;AAAA,MAEJ,UAAAM;AAAA,IAAA;AAAA,IAPIA;AAAA,EAAA,GAST,EAAA,CACF;AAEJ;"}
1	+ {"version":3,"file":"RotatingText.js","sources":["../../../../src/lib/TextAnimation/RotatingText.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n AnimatePresence,\n motion,\n type HTMLMotionProps,\n type Transition,\n} from \"motion/react\";\nimport { cn } from \"@dsui/ui/index\";\n\ntype RotatingTextProps = {\n text: string \| string[];\n duration?: number;\n transition?: Transition;\n y?: number;\n containerClassName?: string;\n} & HTMLMotionProps<\"div\">;\n\nfunction RotatingText({\n text,\n y = -50,\n duration = 2000,\n transition = { duration: 0.3, ease: \"easeOut\" },\n containerClassName,\n ...props\n}: RotatingTextProps) {\n const [index, setIndex] = React.useState(0);\n\n React.useEffect(() => {\n if (!Array.isArray(text)) return;\n const interval = setInterval(() => {\n setIndex((prevIndex) => (prevIndex + 1) % text.length);\n }, duration);\n return () => clearInterval(interval);\n }, [text, duration]);\n\n const currentText = Array.isArray(text) ? text[index] : text;\n\n return (\n <div className={cn(\"ds:overflow-hidden ds:py-1\", containerClassName)}>\n <AnimatePresence mode=\"wait\">\n <motion.div\n key={currentText}\n transition={transition}\n initial={{ opacity: 0, y: -y }}\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y }}\n {...(props as any)}\n >\n {currentText}\n </motion.div>\n </AnimatePresence>\n </div>\n );\n}\n\nexport { RotatingText, type RotatingTextProps };\n"],"names":["RotatingText","text","y","duration","transition","containerClassName","props","index","setIndex","React","interval","prevIndex","currentText","jsx","cn","AnimatePresence","motion"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmBA,SAASA,EAAa;AAAA,EACpB,MAAAC;AAAA,EACA,GAAAC,IAAI;AAAA,EACJ,UAAAC,IAAW;AAAA,EACX,YAAAC,IAAa,EAAE,UAAU,KAAK,MAAM,UAAA;AAAA,EACpC,oBAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAM,SAAS,CAAC;AAE1C,EAAAA,EAAM,UAAU,MAAM;AACpB,QAAI,CAAC,MAAM,QAAQR,CAAI,EAAG;AAC1B,UAAMS,IAAW,YAAY,MAAM;AACjC,MAAAF,EAAS,CAACG,OAAeA,IAAY,KAAKV,EAAK,MAAM;AAAA,IACvD,GAAGE,CAAQ;AACX,WAAO,MAAM,cAAcO,CAAQ;AAAA,EACrC,GAAG,CAACT,GAAME,CAAQ,CAAC;AAEnB,QAAMS,IAAc,MAAM,QAAQX,CAAI,IAAIA,EAAKM,CAAK,IAAIN;AAExD,SACE,gBAAAY,EAAC,OAAA,EAAI,WAAWC,EAAG,8BAA8BT,CAAkB,GACjE,UAAA,gBAAAQ,EAACE,GAAA,EAAgB,MAAK,QACpB,UAAA,gBAAAF;AAAA,IAACG,EAAO;AAAA,IAAP;AAAA,MAEC,YAAAZ;AAAA,MACA,SAAS,EAAE,SAAS,GAAG,GAAG,CAACF,EAAA;AAAA,MAC3B,SAAS,EAAE,SAAS,GAAG,GAAG,EAAA;AAAA,MAC1B,MAAM,EAAE,SAAS,GAAG,GAAAA,EAAA;AAAA,MACnB,GAAII;AAAA,MAEJ,UAAAM;AAAA,IAAA;AAAA,IAPIA;AAAA,EAAA,GAST,EAAA,CACF;AAEJ;"}