@syscore/ui-library 1.1.9 → 1.1.10

package/client/components/ui/tabs.tsx

@@ -1,9 +1,353 @@
-import * as React from "react";
+"use client";
+
+import React from "react";
+
+import { AnimatePresence, motion } from "motion/react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 
+import { useTabs, type Tab } from "../../hooks/UseTabs";
 import { cn } from "@/lib/utils";
 
-const Tabs = TabsPrimitive.Root;
+interface AnimatedTabsProps {
+  tabs: Tab[];
+}
+
+const transition = {
+  type: "tween" as const,
+  ease: "easeOut" as const,
+  duration: 0.15,
+};
+
+const getHoverAnimationProps = (hoveredRect: DOMRect, navRect: DOMRect) => ({
+  x: hoveredRect.left - navRect.left - 10,
+  y: hoveredRect.top - navRect.top - 4,
+  width: hoveredRect.width + 20,
+  height: hoveredRect.height + 10,
+});
+
+const TabContent = ({ tab }: { tab: Tab }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -10 }}
+      transition={transition}
+      className="p-6 bg-zinc-50 dark:bg-zinc-900 rounded-lg mt-4 h-[55vh]"
+    >
+      {tab.value === "home" && (
+        <div className="space-y-6">
+          <div className="border-b pb-6 dark:border-zinc-800">
+            <h2 className="text-3xl font-bold mb-4">Welcome to Our Platform</h2>
+            <p className="text-zinc-600 dark:text-zinc-400 mb-4">
+              Discover a new way to manage your projects and collaborate with
+              your team.
+            </p>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              <div className="p-4 bg-white dark:bg-zinc-800 rounded-lg">
+                <h3 className="font-semibold mb-2">Quick Start</h3>
+                <p className="text-sm text-zinc-600 dark:text-zinc-400">
+                  Get started with our platform in minutes
+                </p>
+              </div>
+              <div className="p-4 bg-white dark:bg-zinc-800 rounded-lg">
+                <h3 className="font-semibold mb-2">Latest Updates</h3>
+                <p className="text-sm text-zinc-600 dark:text-zinc-400">
+                  See what&apos;s new in our latest release
+                </p>
+              </div>
+              <div className="p-4 bg-white dark:bg-zinc-800 rounded-lg">
+                <h3 className="font-semibold mb-2">Resources</h3>
+                <p className="text-sm text-zinc-600 dark:text-zinc-400">
+                  Access guides and documentation
+                </p>
+              </div>
+            </div>
+          </div>
+          <div>
+            <h3 className="text-xl font-semibold mb-4">Recent Activity</h3>
+            <div className="space-y-3">
+              <div className="flex items-center gap-3 p-3 bg-white dark:bg-zinc-800 rounded-lg">
+                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                <p className="text-sm">
+                  Project &quot;Marketing Campaign&quot; was updated 2 hours ago
+                </p>
+              </div>
+              <div className="flex items-center gap-3 p-3 bg-white dark:bg-zinc-800 rounded-lg">
+                <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
+                <p className="text-sm">
+                  New team member John Doe joined the platform
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      {tab.value === "about" && (
+        <div className="space-y-8">
+          <div>
+            <h2 className="text-3xl font-bold mb-4">About Us</h2>
+            <p className="text-zinc-600 dark:text-zinc-400 mb-6">
+              We&apos;re a team of passionate individuals working together to
+              create amazing solutions for our clients.
+            </p>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div>
+                <h3 className="text-xl font-semibold mb-3">Our Mission</h3>
+                <p className="text-zinc-600 dark:text-zinc-400">
+                  To empower businesses with innovative tools and solutions that
+                  drive growth and success in the digital age.
+                </p>
+              </div>
+              <div>
+                <h3 className="text-xl font-semibold mb-3">Our Vision</h3>
+                <p className="text-zinc-600 dark:text-zinc-400">
+                  To become the leading platform for business transformation and
+                  digital innovation worldwide.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      {tab.value === "contact" && (
+        <div className="max-w-2xl mx-auto">
+          <h2 className="text-3xl font-bold mb-6">Get in Touch</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
+            <div>
+              <h3 className="text-xl font-semibold mb-4">
+                Contact Information
+              </h3>
+              <div className="space-y-4">
+                <div>
+                  <p className="font-medium">Address</p>
+                  <p className="text-zinc-600 dark:text-zinc-400">
+                    123 Business Street
+                  </p>
+                  <p className="text-zinc-600 dark:text-zinc-400">
+                    San Francisco, CA 94105
+                  </p>
+                </div>
+                <div>
+                  <p className="font-medium">Email</p>
+                  <p className="text-zinc-600 dark:text-zinc-400">
+                    contact@example.com
+                  </p>
+                </div>
+                <div>
+                  <p className="font-medium">Phone</p>
+                  <p className="text-zinc-600 dark:text-zinc-400">
+                    +1 (555) 123-4567
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="space-y-4">
+              <div>
+                <label className="block text-sm font-medium mb-1">Name</label>
+                <input
+                  type="text"
+                  className="w-full p-2 rounded-md border dark:bg-zinc-800 dark:border-zinc-700"
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium mb-1">Email</label>
+                <input
+                  type="email"
+                  className="w-full p-2 rounded-md border dark:bg-zinc-800 dark:border-zinc-700"
+                />
+              </div>
+              <button className="w-full bg-black text-white dark:bg-white dark:text-black py-2 rounded-md font-medium">
+                Send Message
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+      {tab.value === "danger-zone" && (
+        <div className="max-w-2xl mx-auto">
+          <h2 className="text-2xl font-bold mb-6 text-red-500">Caution!</h2>
+          <div className="space-y-6">
+            <div className="border border-red-200 dark:border-red-900 rounded-lg p-6 bg-red-50 dark:bg-red-900/20">
+              <h3 className="text-lg font-semibold text-red-600 dark:text-red-400 mb-2">
+                Delete Account
+              </h3>
+              <p className="text-red-600/80 dark:text-red-400/80 mb-4">
+                This action cannot be undone. This will permanently delete your
+                account and remove your data from our servers.
+              </p>
+              <div className="flex items-center gap-4">
+                <input
+                  type="text"
+                  placeholder="Type 'delete' to confirm"
+                  className="flex-1 p-2 rounded-md border border-red-200 dark:border-red-800 dark:bg-red-900/30"
+                />
+                <button className="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600 transition-colors">
+                  Delete Account
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </motion.div>
+  );
+};
+
+const Tabs = ({
+  tabs,
+  selectedTabIndex,
+  setSelectedTab,
+}: {
+  tabs: Tab[];
+  selectedTabIndex: number;
+  setSelectedTab: (input: [number, number]) => void;
+}) => {
+  const [buttonRefs, setButtonRefs] = React.useState<
+    Array<HTMLButtonElement | null>
+  >([]);
+
+  React.useEffect(() => {
+    setButtonRefs((prev) => prev.slice(0, tabs.length));
+  }, [tabs.length]);
+
+  const navRef = React.useRef<HTMLDivElement>(null);
+  const navRect = navRef.current?.getBoundingClientRect();
+
+  const selectedRect = buttonRefs[selectedTabIndex]?.getBoundingClientRect();
+
+  const [hoveredTabIndex, setHoveredTabIndex] = React.useState<number | null>(
+    null,
+  );
+  const hoveredRect =
+    buttonRefs[hoveredTabIndex ?? -1]?.getBoundingClientRect();
+
+  return (
+    <nav
+      ref={navRef}
+      className="flex flex-shrink-0 justify-center items-center relative z-0 py-2"
+      onPointerLeave={() => setHoveredTabIndex(null)}
+    >
+      {tabs.map((item, i) => {
+        const isActive = selectedTabIndex === i;
+
+        return (
+          <button
+            key={item.value}
+            className="text-sm relative rounded-md flex items-center h-8 px-4 z-20 bg-transparent cursor-pointer select-none transition-colors"
+            onPointerEnter={() => setHoveredTabIndex(i)}
+            onFocus={() => setHoveredTabIndex(i)}
+            onClick={() => setSelectedTab([i, i > selectedTabIndex ? 1 : -1])}
+          >
+            <motion.span
+              ref={(el) => {
+                buttonRefs[i] = el as HTMLButtonElement;
+              }}
+              className={cn("block", {
+                "text-gray-500": !isActive,
+                "text-gray-800 dark:text-white font-semibold": isActive,
+              })}
+            >
+              <small
+                className={item.value === "danger-zone" ? "text-red-500" : ""}
+              >
+                {item.label}
+              </small>
+            </motion.span>
+          </button>
+        );
+      })}
+
+      <AnimatePresence>
+        {hoveredRect && navRect && (
+          <motion.div
+            key="hover"
+            className={`absolute z-10 top-0 left-0 rounded-md ${
+              hoveredTabIndex ===
+              tabs.findIndex(({ value }) => value === "danger-zone")
+                ? "bg-red-500/50"
+                : "bg-gray-100/50"
+            }`}
+            initial={{
+              ...getHoverAnimationProps(hoveredRect, navRect),
+              opacity: 0,
+            }}
+            animate={{
+              ...getHoverAnimationProps(hoveredRect, navRect),
+              opacity: 1,
+            }}
+            exit={{
+              ...getHoverAnimationProps(hoveredRect, navRect),
+              opacity: 0,
+            }}
+            transition={transition}
+          />
+        )}
+      </AnimatePresence>
+
+      <AnimatePresence>
+        {selectedRect && navRect && (
+          <motion.div
+            className={`absolute z-10 bottom-0 left-0 h-[2px] ${
+              selectedTabIndex ===
+              tabs.findIndex(({ value }) => value === "danger-zone")
+                ? "bg-red-500"
+                : "bg-cyan-700"
+            }`}
+            initial={false}
+            animate={{
+              width: selectedRect.width + 18,
+              x: `calc(${selectedRect.left - navRect.left - 9}px)`,
+              opacity: 1,
+            }}
+            transition={transition}
+          />
+        )}
+      </AnimatePresence>
+    </nav>
+  );
+};
+
+export function AnimatedTabs({ tabs }: AnimatedTabsProps) {
+  const [hookProps] = React.useState(() => {
+    const initialTabId =
+      tabs.find((tab) => tab.value === "home")?.value || tabs[0].value;
+
+    return {
+      tabs: tabs.map(({ label, value, subRoutes }) => ({
+        label,
+        value,
+        subRoutes,
+      })),
+      initialTabId,
+    };
+  });
+
+  const framer = useTabs(hookProps);
+
+  return (
+    <div className="w-full">
+      <div className="relative flex w-full shrink-0 items-center justify-between overflow-x-auto overflow-y-hidden">
+        <Tabs {...framer.tabProps} />
+      </div>
+      <AnimatePresence mode="wait">
+        <TabContent tab={framer.selectedTab} />
+      </AnimatePresence>
+    </div>
+  );
+}
+
+// Standard Radix UI Tabs Components
+const TabsRoot = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Root
+    ref={ref}
+    className={cn("w-full", className)}
+    {...props}
+  />
+));
+TabsRoot.displayName = TabsPrimitive.Root.displayName;
 
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
@@ -27,7 +371,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-xs",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
       className,
     )}
     {...props}
@@ -42,7 +386,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className,
     )}
     {...props}
@@ -50,4 +394,5 @@ const TabsContent = React.forwardRef<
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+// Export standard Radix UI tabs components
+export { TabsRoot as Tabs, TabsList, TabsTrigger, TabsContent };

package/client/components/ui/toggle.tsx

@@ -1,11 +1,10 @@
 import * as React from "react";
-import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@/lib/utils";
+import { cn } from "../../lib/utils";
+import { useSegmentedControl } from "../../hooks/use-segmented-control";
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
   {
     variants: {
       variant: {
@@ -26,18 +25,71 @@ const toggleVariants = cva(
   },
 );
 
-const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
->(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root
-    ref={ref}
-    className={cn(toggleVariants({ variant, size, className }))}
-    {...props}
-  />
-));
-
-Toggle.displayName = TogglePrimitive.Root.displayName;
-
-export { Toggle, toggleVariants };
+// Segmented Control Component
+export interface SegmentedControlProps<T extends string = string>
+  extends React.HTMLAttributes<HTMLDivElement> {
+  options: Array<{ label: React.ReactNode; value: T }>;
+  value?: T;
+  defaultValue?: T;
+  onValueChange?: (value: T) => void;
+}
+
+const SegmentedControlInner = React.forwardRef<
+  HTMLDivElement,
+  SegmentedControlProps
+>(
+  (
+    { className, options, value, defaultValue, onValueChange, ...props },
+    ref,
+  ) => {
+    const { value: selectedValue, onValueChange: handleValueChange } =
+      useSegmentedControl({
+        value,
+        defaultValue: defaultValue ?? options[0]?.value,
+        onValueChange,
+      });
+
+    return (
+      <div ref={ref} className={cn(className)} {...props}>
+        {options.map((option) => {
+          const isReactElement = React.isValidElement(option.label);
+
+          return (
+            <button
+              key={option.value}
+              className={cn(
+                "inline-flex items-center justify-center h-8 px-6  rounded-full transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+                selectedValue === option.value
+                  ? "bg-cyan-700 text-white font-semibold"
+                  : "text-gray-600 hover:bg-gray-50 font-medium",
+              )}
+              onClick={() => handleValueChange(option.value)}
+              type="button"
+              data-active={selectedValue === option.value}
+            >
+              {isReactElement ? (
+                option.label
+              ) : (
+                <span className="body-small font-medium">{option.label}</span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+    );
+  },
+);
+
+SegmentedControlInner.displayName = "SegmentedControl";
+
+export const SegmentedControl = SegmentedControlInner as <
+  T extends string = string,
+>(
+  props: SegmentedControlProps<T> & { ref?: React.Ref<HTMLDivElement> },
+) => React.ReactElement;
+
+// Main Toggle export for backward compatibility
+export const Toggle = SegmentedControl;
+
+export { toggleVariants };
+export type { VariantProps };

package/client/components/ui/tooltip.tsx

@@ -1,28 +1,79 @@
+"use client";
+
 import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 import { cn } from "@/lib/utils";
 
-const TooltipProvider = TooltipPrimitive.Provider;
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
 
-const Tooltip = TooltipPrimitive.Root;
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  );
+}
 
-const TooltipTrigger = TooltipPrimitive.Trigger;
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
 
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(
-      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className,
-    )}
-    {...props}
-  />
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  side = "bottom",
+  children,
+  alignOffset = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
+        side={side}
+        className={cn(
+          "group relative bg-gray-700 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-lg px-6 pt-8 pb-6  text-balance shadow-sm",
+          className,
+        )}
+        {...props}
+      >
+        {/* Marker/Arrow */}
+        <div className="absolute  left-1/2 -translate-x-1/2 flex justify-center group-data-[side=top]:bottom-0 group-data-[side=top]:rotate-180 group-data-[side=bottom]:top-0 group-data-[side=left]:right-0 group-data-[side=right]:left-0">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="10"
+            height="5"
+            viewBox="0 0 10 5"
+            fill="none"
+          >
+            <path
+              d="M10 -1.74846e-06L-7.36867e-07 0C-3.29906e-07 2.76142 2.23858 5 5 5C7.76142 5 10 2.76142 10 -1.74846e-06Z"
+              fill="#39C9EA"
+            />
+          </svg>
+        </div>
+        {children}
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };