@catalystsoftware/ui 1.0.11 → 1.0.14

package/dist/components/catalyst-ui/motions/direction-aware-tabs.tsx

@@ -0,0 +1,568 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { cn } from '~/components/catalyst-ui';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+// Context to share tab state and direction
+type TabsContextValue = {
+  direction: number;
+  setDirection: (dir: number) => void;
+  tabOrder: string[];
+};
+
+const TabsContext = React.createContext<TabsContextValue>({
+  direction: 0,
+  setDirection: () => {},
+  tabOrder: [],
+});
+
+const SmoothTabs = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>
+>(({ className, children, defaultValue, value: controlledValue, onValueChange, ...props }, ref) => {
+  const [direction, setDirection] = React.useState(0);
+  const [tabOrder, setTabOrder] = React.useState<string[]>([]);
+  const [internalValue, setInternalValue] = React.useState(defaultValue || '');
+  const previousValueRef = React.useRef(defaultValue || '');
+
+  // Determine if component is controlled or uncontrolled
+  const isControlled = controlledValue !== undefined;
+  const currentValue = isControlled ? controlledValue : internalValue;
+
+  // Extract tab values from children to determine order
+  React.useEffect(() => {
+    const extractTabValues = (children: React.ReactNode): string[] => {
+      const values: string[] = [];
+      
+      React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child)) {
+          if (child.type === SmoothTabsList) {
+            // Extract from TabsList children
+            React.Children.forEach(child.props.children, (tabChild) => {
+              if (React.isValidElement(tabChild)) {
+                // Handle direct TabsTrigger
+                if (tabChild.type === SmoothTabsTrigger && tabChild.props.value) {
+                  values.push(tabChild.props.value as string);
+                }
+                // Handle wrapped elements (like divs containing TabsTrigger)
+                else if (tabChild.props.children) {
+                  const nestedValues = extractTabValues(tabChild.props.children);
+                  values.push(...nestedValues);
+                }
+              }
+            });
+          }
+          // Recursively check children
+          else if (child.props.children) {
+            const nestedValues = extractTabValues(child.props.children);
+            values.push(...nestedValues);
+          }
+        }
+      });
+      
+      return values;
+    };
+
+    const values = extractTabValues(children);
+    setTabOrder(values);
+  }, [children]);
+
+  // Calculate direction when value changes
+  React.useEffect(() => {
+    if (currentValue && previousValueRef.current && currentValue !== previousValueRef.current) {
+      const prevIndex = tabOrder.indexOf(previousValueRef.current);
+      const currIndex = tabOrder.indexOf(currentValue);
+      
+      if (prevIndex !== -1 && currIndex !== -1) {
+        setDirection(currIndex > prevIndex ? 1 : -1);
+      }
+    }
+    previousValueRef.current = currentValue;
+  }, [currentValue, tabOrder]);
+
+  const handleValueChange = (newValue: string) => {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onValueChange?.(newValue);
+  };
+
+  return (
+    <TabsContext.Provider value={{ direction, setDirection, tabOrder }}>
+      <TabsPrimitive.Root
+        ref={ref}
+        className={cn("flex h-full flex-col", className)}
+        value={currentValue}
+        onValueChange={handleValueChange}
+        {...props}
+      >
+        {children}
+      </TabsPrimitive.Root>
+    </TabsContext.Provider>
+  );
+});
+SmoothTabs.displayName = "SmoothTabs";
+
+const SmoothTabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
+    activeColor?: string;
+  }
+>(({ className, activeColor = "bg-blue-500", children, ...props }, ref) => {
+  const [selected, setSelected] = React.useState<string>("");
+  const [dimensions, setDimensions] = React.useState({ width: 0, left: 0 });
+  const buttonRefs = React.useRef<Map<string, HTMLButtonElement>>(new Map());
+  const containerRef = React.useRef<HTMLDivElement>(null);
+
+  React.useLayoutEffect(() => {
+    const updateDimensions = () => {
+      const selectedButton = buttonRefs.current.get(selected);
+      const container = containerRef.current;
+
+      if (selectedButton && container) {
+        const rect = selectedButton.getBoundingClientRect();
+        const containerRect = container.getBoundingClientRect();
+
+        setDimensions({
+          width: rect.width,
+          left: rect.left - containerRect.left,
+        });
+      }
+    };
+
+    requestAnimationFrame(() => {
+      updateDimensions();
+    });
+
+    window.addEventListener("resize", updateDimensions);
+    return () => window.removeEventListener("resize", updateDimensions);
+  }, [selected]);
+
+  return (
+    <TabsPrimitive.List
+      ref={containerRef}
+      className={cn(
+        "relative mt-auto flex items-center justify-between gap-1 py-1",
+        "mx-auto w-[400px] bg-background",
+        "rounded-xl border",
+        "transition-all duration-200",
+        className
+      )}
+      {...props}
+    >
+      <motion.div
+        animate={{
+          width: dimensions.width - 8,
+          x: dimensions.left + 4,
+          opacity: selected ? 1 : 0,
+        }}
+        className={cn("absolute z-[1] rounded-lg", activeColor)}
+        initial={false}
+        style={{ height: "calc(100% - 8px)", top: "4px" }}
+        transition={{
+          type: "spring",
+          stiffness: 400,
+          damping: 30,
+        }}
+      />
+      <div className="relative z-[2] grid w-full grid-cols-4 gap-1">
+        {React.Children.map(children, (child) => {
+          if (React.isValidElement(child)) {
+            return React.cloneElement(child as React.ReactElement<any>, {
+              buttonRefs,
+              setSelected,
+              selected,
+            });
+          }
+          return child;
+        })}
+      </div>
+    </TabsPrimitive.List>
+  );
+});
+SmoothTabsList.displayName = "SmoothTabsList";
+
+const SmoothTabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
+    buttonRefs?: React.MutableRefObject<Map<string, HTMLButtonElement>>;
+    setSelected?: (value: string) => void;
+    selected?: string;
+  }
+>(({ className, value, buttonRefs, setSelected, selected, ...props }, ref) => {
+  const isSelected = selected === value;
+
+  React.useEffect(() => {
+    if (isSelected && setSelected && value) {
+      setSelected(value as string);
+    }
+  }, [isSelected, setSelected, value]);
+
+  return (
+    <TabsPrimitive.Trigger
+      ref={(el) => {
+        if (typeof ref === 'function') {
+          ref(el);
+        } else if (ref) {
+          ref.current = el;
+        }
+        if (el && buttonRefs && value) {
+          buttonRefs.current.set(value as string, el);
+        } else if (!el && buttonRefs && value) {
+          buttonRefs.current.delete(value as string);
+        }
+      }}
+      value={value}
+      onClick={() => setSelected?.(value as string)}
+      className={cn(
+        "relative flex items-center justify-center gap-0.5 rounded-lg px-2 py-1.5",
+        "font-medium text-sm transition-all duration-300",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "truncate",
+        isSelected
+          ? "text-white"
+          : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+SmoothTabsTrigger.displayName = "SmoothTabsTrigger";
+
+const SmoothTabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, value, children, ...props }, ref) => {
+  const { direction } = React.useContext(TabsContext);
+
+  const slideVariants = {
+    enter: (direction: number) => ({
+      x: direction > 0 ? "100%" : "-100%",
+      opacity: 0,
+      filter: "blur(8px)",
+      scale: 0.95,
+      position: "absolute" as const,
+    }),
+    center: {
+      x: 0,
+      opacity: 1,
+      filter: "blur(0px)",
+      scale: 1,
+      position: "absolute" as const,
+    },
+    exit: (direction: number) => ({
+      x: direction < 0 ? "100%" : "-100%",
+      opacity: 0,
+      filter: "blur(8px)",
+      scale: 0.95,
+      position: "absolute" as const,
+    }),
+  };
+
+  const transition = {
+    duration: 0.4,
+    ease: [0.32, 0.72, 0, 1],
+  };
+
+  return (
+    <TabsPrimitive.Content
+      ref={ref}
+      value={value}
+      className={cn("relative mb-4 flex-1", className)}
+      {...props}
+    >
+      <div className="relative h-[200px] w-full rounded-lg border bg-card">
+        <div className="absolute inset-0 overflow-hidden rounded-lg">
+          <AnimatePresence custom={direction} initial={false} mode="popLayout">
+            <motion.div
+              animate="center"
+              className="absolute inset-0 h-full w-full bg-card will-change-transform"
+              custom={direction}
+              exit="exit"
+              initial="enter"
+              key={`card-${value}`}
+              style={{
+                backfaceVisibility: "hidden",
+                WebkitBackfaceVisibility: "hidden",
+              }}
+              transition={transition as any}
+              variants={slideVariants as any}
+            >
+              {children}
+            </motion.div>
+          </AnimatePresence>
+        </div>
+      </div>
+    </TabsPrimitive.Content>
+  );
+});
+SmoothTabsContent.displayName = "SmoothTabsContent";
+
+// Demo Component
+export function SmoothTabsDemo() {
+  return (
+    <div className="flex items-center justify-center min-h-screen p-8 bg-background">
+      <SmoothTabs defaultValue="tab1" className="w-full max-w-2xl">
+        <SmoothTabsList activeColor="bg-blue-500">
+          <SmoothTabsTrigger value="tab1">Tab 1</SmoothTabsTrigger>
+          <SmoothTabsTrigger value="tab2">Tab 2</SmoothTabsTrigger>
+          <SmoothTabsTrigger value="tab3">Tab 3</SmoothTabsTrigger>
+          <SmoothTabsTrigger value="tab4">Tab 4</SmoothTabsTrigger>
+        </SmoothTabsList>
+
+        <SmoothTabsContent value="tab1">
+          <div className="flex items-center justify-center h-full">
+            <div className="text-center">
+              <h3 className="text-2xl font-bold mb-2">Tab 1 Content</h3>
+              <p className="text-muted-foreground">
+                This is the first tab. Click other tabs to see the direction-aware animation!
+              </p>
+            </div>
+          </div>
+        </SmoothTabsContent>
+
+        <SmoothTabsContent value="tab2">
+          <div className="flex items-center justify-center h-full">
+            <div className="text-center">
+              <h3 className="text-2xl font-bold mb-2">Tab 2 Content</h3>
+              <p className="text-muted-foreground">
+                Notice how the animation direction changes based on which tab you clicked from!
+              </p>
+            </div>
+          </div>
+        </SmoothTabsContent>
+
+        <SmoothTabsContent value="tab3">
+          <div className="flex items-center justify-center h-full">
+            <div className="text-center">
+              <h3 className="text-2xl font-bold mb-2">Tab 3 Content</h3>
+              <p className="text-muted-foreground">
+                Going left slides from the left, going right slides from the right!
+              </p>
+            </div>
+          </div>
+        </SmoothTabsContent>
+
+        <SmoothTabsContent value="tab4">
+          <div className="flex items-center justify-center h-full">
+            <div className="text-center">
+              <h3 className="text-2xl font-bold mb-2">Tab 4 Content</h3>
+              <p className="text-muted-foreground">
+                The last tab! Try jumping between non-adjacent tabs to see the animation.
+              </p>
+            </div>
+          </div>
+        </SmoothTabsContent>
+      </SmoothTabs>
+    </div>
+  );
+}
+
+export { SmoothTabs, SmoothTabsList, SmoothTabsTrigger, SmoothTabsContent };
+
+/**
+type Tab = {
+  id: number
+  label: string
+  content: ReactNode
+}
+
+interface OgImageSectionProps {
+  tabs: Tab[]
+  className?: string
+  rounded?: string
+  onChange?: () => void
+}
+
+export function DirectionAwareTabs({
+  tabs,
+  className,
+  rounded,
+  onChange,
+}: OgImageSectionProps) {
+  const [activeTab, setActiveTab] = useState(0)
+  const [direction, setDirection] = useState(0)
+  const [isAnimating, setIsAnimating] = useState(false)
+  const [ref, bounds] = useMeasure()
+
+  const content = useMemo(() => {
+    const activeTabContent = tabs.find((tab) => tab.id === activeTab)?.content
+    return activeTabContent || null
+  }, [activeTab, tabs])
+
+  const handleTabClick = (newTabId: number) => {
+    if (newTabId !== activeTab && !isAnimating) {
+      const newDirection = newTabId > activeTab ? 1 : -1
+      setDirection(newDirection)
+      setActiveTab(newTabId)
+      onChange ? onChange() : null
+    }
+  }
+
+  const variants = {
+    initial: (direction: number) => ({
+      x: 300 * direction,
+      opacity: 0,
+      filter: "blur(4px)",
+    }),
+    active: {
+      x: 0,
+      opacity: 1,
+      filter: "blur(0px)",
+    },
+    exit: (direction: number) => ({
+      x: -300 * direction,
+      opacity: 0,
+      filter: "blur(4px)",
+    }),
+  }
+
+  return (
+    <div className=" flex flex-col items-center w-full">
+      <div
+        className={cn(
+          "flex space-x-1 border border-none rounded-full cursor-pointer bg-neutral-600 px-[3px] py-[3.2px] shadow-inner-shadow",
+          className,
+          rounded
+        )}
+      >
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => handleTabClick(tab.id)}
+            className={cn(
+              "relative rounded-full px-3.5 py-1.5 text-xs sm:text-sm font-medium text-neutral-200  transition focus-visible:outline-1 focus-visible:ring-1  focus-visible:outline-none flex gap-2 items-center ",
+              activeTab === tab.id
+                ? "text-white"
+                : "hover:text-neutral-300/60  text-neutral-200/80",
+              rounded
+            )}
+            style={{ WebkitTapHighlightColor: "transparent" }}
+          >
+            {activeTab === tab.id && (
+              <motion.span
+                layoutId="bubble"
+                className="absolute  inset-0 z-10 bg-neutral-700 mix-blend-difference shadow-inner-shadow border border-white/10"
+                style={rounded ? { borderRadius: 9 } : { borderRadius: 9999 }}
+                transition={{ type: "spring", bounce: 0.19, duration: 0.4 }}
+              />
+            )}
+
+            {tab.label}
+          </button>
+        ))}
+      </div>
+      <MotionConfig transition={{ duration: 0.4, type: "spring", bounce: 0.2 }}>
+        <motion.div
+          className="relative mx-auto w-full h-full overflow-hidden"
+          initial={false}
+          animate={{ height: bounds.height }}
+        >
+          <div className="p-1" ref={ref}>
+            <AnimatePresence
+              custom={direction}
+              mode="popLayout"
+              onExitComplete={() => setIsAnimating(false)}
+            >
+              <motion.div
+                key={activeTab}
+                variants={variants}
+                initial="initial"
+                animate="active"
+                exit="exit"
+                custom={direction}
+                onAnimationStart={() => setIsAnimating(true)}
+                onAnimationComplete={() => setIsAnimating(false)}
+              >
+                {content}
+              </motion.div>
+            </AnimatePresence>
+          </div>
+        </motion.div>
+      </MotionConfig>
+    </div>
+  )
+}
+
+export const DirectionAwareTabsDemo = ({}) => {
+  const tabs = [
+    {
+      id: 0,
+      label: "ocean",
+      content: (
+        <div className="border border-border/50 w-full flex flex-col items-center p-4 rounded-lg gap-3">
+          <BgAnimateButton animation="spin-fast" gradient="ocean">
+            Button
+          </BgAnimateButton>
+          <BgAnimateButton animation="spin" gradient="ocean">
+            Button
+          </BgAnimateButton>
+          <BgAnimateButton animation="spin-slow" gradient="ocean">
+            Button
+          </BgAnimateButton>
+        </div>
+      ),
+    },
+    {
+      id: 1,
+      label: "forest",
+      content: (
+        <div className="border border-border/50 w-full flex flex-col items-center p-4 rounded-lg gap-3">
+          <BgAnimateButton animation="spin-fast" gradient="forest">
+            Button
+          </BgAnimateButton>
+          <BgAnimateButton animation="spin" gradient="forest">
+            Button
+          </BgAnimateButton>
+          <BgAnimateButton animation="spin-slow" gradient="forest">
+            Button
+          </BgAnimateButton>
+        </div>
+      ),
+    },
+    {
+      id: 2,
+      label: "default",
+      content: (
+        <div className="border border-border/50 w-full flex flex-col items-center gap-3 p-4">
+          <BgAnimateButton animation="spin-fast" gradient="default">
+            Button
+          </BgAnimateButton>
+          <BgAnimateButton animation="spin" gradient="default">
+            Button
+          </BgAnimateButton>
+          <BgAnimateButton animation="spin-slow" gradient="default">
+            Button
+          </BgAnimateButton>
+        </div>
+      ),
+    },
+    {
+      id: 3,
+      label: "sunset",
+      content: (
+        <div className="border border-border/50 w-full flex flex-col items-center p-4 rounded-lg gap-3">
+          <BgAnimateButton animation="spin-fast" gradient="sunset">
+            Button
+          </BgAnimateButton>
+          <BgAnimateButton animation="spin" gradient="sunset">
+            Button
+          </BgAnimateButton>
+          <BgAnimateButton animation="spin-slow" gradient="sunset">
+            Button
+          </BgAnimateButton>
+        </div>
+      ),
+    },
+  ]
+
+  return (
+    <div className="">
+      <DirectionAwareTabs tabs={tabs} />
+    </div>
+  )
+}
+ */
+
+