@syscore/ui-library 1.1.12 → 1.2.0

package/client/components/ui/tabs.tsx

@@ -1,13 +1,16 @@
 "use client";
 
 import React from "react";
-
-import { AnimatePresence, motion } from "motion/react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { AnimatePresence, motion, Transition } from "motion/react";
 
-import { useTabs, type Tab } from "../../hooks/UseTabs";
+import { useTabs, type Tab as BaseTab } from "@/hooks/use-tabs";
 import { cn } from "@/lib/utils";
 
+export type Tab = BaseTab & {
+  content?: React.ReactNode;
+};
+
 interface AnimatedTabsProps {
   tabs: Tab[];
 }
@@ -18,177 +21,23 @@ const transition = {
   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 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
+      key={tab.value}
       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]"
+      transition={transition as Transition}
     >
-      {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>
-      )}
+      {tab.content}
     </motion.div>
   );
 };
@@ -224,7 +73,7 @@ const Tabs = ({
   return (
     <nav
       ref={navRef}
-      className="flex flex-shrink-0 justify-center items-center relative z-0 py-2"
+      className="tabs-nav"
       onPointerLeave={() => setHoveredTabIndex(null)}
     >
       {tabs.map((item, i) => {
@@ -233,7 +82,7 @@ const Tabs = ({
         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"
+            className="tabs-nav-button"
             onPointerEnter={() => setHoveredTabIndex(i)}
             onFocus={() => setHoveredTabIndex(i)}
             onClick={() => setSelectedTab([i, i > selectedTabIndex ? 1 : -1])}
@@ -242,13 +91,13 @@ const Tabs = ({
               ref={(el) => {
                 buttonRefs[i] = el as HTMLButtonElement;
               }}
-              className={cn("block", {
-                "text-gray-500": !isActive,
-                "text-gray-800 dark:text-white font-semibold": isActive,
+              className={cn("tabs-nav-button-text", {
+                "tabs-nav-button-text--inactive": !isActive,
+                "tabs-nav-button-text--active": isActive,
               })}
             >
               <small
-                className={item.value === "danger-zone" ? "text-red-500" : ""}
+                className={item.value === "danger-zone" ? "tabs-nav-button-text--danger" : ""}
               >
                 {item.label}
               </small>
@@ -257,7 +106,7 @@ const Tabs = ({
         );
       })}
 
-      <AnimatePresence>
+      {/* <AnimatePresence>
         {hoveredRect && navRect && (
           <motion.div
             key="hover"
@@ -279,30 +128,32 @@ const Tabs = ({
               ...getHoverAnimationProps(hoveredRect, navRect),
               opacity: 0,
             }}
-            transition={transition}
+            transition={transition as Transition}
           />
         )}
-      </AnimatePresence>
+      </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"
-            }`}
+            className={cn("tabs-nav-indicator", {
+              "tabs-nav-indicator--danger": selectedTabIndex ===
+                tabs.findIndex(({ value }) => value === "danger-zone"),
+              "tabs-nav-indicator--default": selectedTabIndex !==
+                tabs.findIndex(({ value }) => value === "danger-zone"),
+            })}
             initial={false}
             animate={{
-              width: selectedRect.width + 18,
-              x: `calc(${selectedRect.left - navRect.left - 9}px)`,
+              width: selectedRect.width,
+              x: selectedRect.left - navRect.left,
               opacity: 1,
             }}
-            transition={transition}
+            transition={transition as Transition}
           />
         )}
       </AnimatePresence>
+
+      <div className="tabs-nav-underline" />
     </nav>
   );
 };
@@ -313,10 +164,8 @@ export function AnimatedTabs({ tabs }: AnimatedTabsProps) {
       tabs.find((tab) => tab.value === "home")?.value || tabs[0].value;
 
     return {
-      tabs: tabs.map(({ label, value, subRoutes }) => ({
-        label,
-        value,
-        subRoutes,
+      tabs: tabs.map((tab) => ({
+        ...tab,
       })),
       initialTabId,
     };
@@ -325,8 +174,8 @@ export function AnimatedTabs({ tabs }: AnimatedTabsProps) {
   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">
+    <div className="tabs-container">
+      <div className="tabs-container-inner">
         <Tabs {...framer.tabProps} />
       </div>
       <AnimatePresence mode="wait">
@@ -343,7 +192,7 @@ const TabsRoot = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.Root
     ref={ref}
-    className={cn("w-full", className)}
+    className={cn("tabs", className)}
     {...props}
   />
 ));
@@ -355,10 +204,7 @@ const TabsList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.List
     ref={ref}
-    className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className,
-    )}
+    className={cn("tabs-list", className)}
     {...props}
   />
 ));
@@ -370,10 +216,7 @@ const TabsTrigger = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <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-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,
-    )}
+    className={cn("tabs-trigger", className)}
     {...props}
   />
 ));
@@ -385,10 +228,7 @@ const TabsContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <TabsPrimitive.Content
     ref={ref}
-    className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className,
-    )}
+    className={cn("tabs-content", className)}
     {...props}
   />
 ));

package/client/components/ui/tag.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export type TagStatus = "todo" | "low" | "medium" | "high" | "done";
+
+export interface TagProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  active?: boolean;
+  status?: TagStatus;
+  variant?: "light" | "dark";
+  onClick?: () => void;
+}
+
+const getStatusClass = (
+  status: TagStatus,
+  variant: "light" | "dark" = "light"
+) => {
+  return `tag tag--${variant}-${status}`;
+};
+
+export const Tag = React.forwardRef<HTMLButtonElement, TagProps>(
+  (
+    {
+      children,
+      active = false,
+      status,
+      variant = "light",
+      className,
+      onClick,
+      ...props
+    },
+    ref
+  ) => {
+    // Status tag styling
+    if (status) {
+      const statusClass = getStatusClass(status, variant);
+      return (
+        <button
+          ref={ref}
+          onClick={onClick}
+          className={cn(statusClass, className)}
+          {...props}
+        >
+          <span className="overline-medium">{children}</span>
+        </button>
+      );
+    }
+
+    // Dual-state general purpose tag styling
+    return (
+      <button
+        ref={ref}
+        onClick={onClick}
+        className={cn(
+          "tag-general",
+          active ? "tag-general--active" : "tag-general--inactive",
+          className
+        )}
+        {...props}
+      >
+        <span className="body-small font-semibold">{children}</span>
+      </button>
+    );
+  }
+);
+
+Tag.displayName = "Tag";

package/client/components/ui/textarea.tsx

@@ -9,10 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
     return (
       <textarea
-        className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-          className,
-        )}
+        className={cn("textarea body-base", className)}
         ref={ref}
         {...props}
       />

package/client/components/ui/toast.tsx

@@ -13,23 +13,19 @@ const ToastViewport = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Viewport
     ref={ref}
-    className={cn(
-      "fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className,
-    )}
+    className={cn("toast-viewport", className)}
     {...props}
   />
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full",
+  "toast",
   {
     variants: {
       variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
+        default: "toast--default",
+        destructive: "toast--destructive",
       },
     },
     defaultVariants: {
@@ -59,10 +55,7 @@ const ToastAction = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Action
     ref={ref}
-    className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground focus:group-[.destructive]:ring-destructive",
-      className,
-    )}
+    className={cn("toast-action", className)}
     {...props}
   />
 ));
@@ -74,14 +67,11 @@ const ToastClose = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Close
     ref={ref}
-    className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 hover:group-[.destructive]:text-red-50 focus:group-[.destructive]:ring-red-400 focus:group-[.destructive]:ring-offset-red-600",
-      className,
-    )}
+    className={cn("toast-close", className)}
     toast-close=""
     {...props}
   >
-    <X className="h-4 w-4" />
+    <X className="icon-4" />
   </ToastPrimitives.Close>
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
@@ -92,7 +82,7 @@ const ToastTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Title
     ref={ref}
-    className={cn("text-sm font-semibold", className)}
+    className={cn("toast-title", className)}
     {...props}
   />
 ));
@@ -104,7 +94,7 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
-    className={cn("text-sm opacity-90", className)}
+    className={cn("toast-description", className)}
     {...props}
   />
 ));

package/client/components/ui/toaster.tsx

@@ -16,7 +16,7 @@ export function Toaster() {
       {toasts.map(function ({ id, title, description, action, ...props }) {
         return (
           <Toast key={id} {...props}>
-            <div className="grid gap-1">
+            <div className="toast-content">
               {title && <ToastTitle>{title}</ToastTitle>}
               {description && (
                 <ToastDescription>{description}</ToastDescription>

package/client/components/ui/toggle-group.tsx

@@ -1,9 +1,26 @@
 import * as React from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { type VariantProps } from "class-variance-authority";
+import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
-import { toggleVariants } from "@/components/ui/toggle";
+
+const toggleVariants = cva(
+  "toggle-group-item",
+  {
+    variants: {
+      variant: {
+        default: "toggle-group-item--default",
+      },
+      size: {
+        default: "toggle-group-item--size-default",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants>
@@ -19,7 +36,7 @@ const ToggleGroup = React.forwardRef<
 >(({ className, variant, size, children, ...props }, ref) => (
   <ToggleGroupPrimitive.Root
     ref={ref}
-    className={cn("flex items-center justify-center gap-1", className)}
+    className={cn("toggle-group", className)}
     {...props}
   >
     <ToggleGroupContext.Provider value={{ variant, size }}>

package/client/components/ui/toggle.tsx

@@ -4,18 +4,17 @@ 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-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",
+  "toggle",
   {
     variants: {
       variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+        default: "toggle--default",
+        outline: "toggle--outline",
       },
       size: {
-        default: "h-10 px-3",
-        sm: "h-9 px-2.5",
-        lg: "h-11 px-5",
+        default: "toggle--size-default",
+        sm: "toggle--size-sm",
+        lg: "toggle--size-lg",
       },
     },
     defaultVariants: {
@@ -50,22 +49,23 @@ const SegmentedControlInner = React.forwardRef<
       });
 
     return (
-      <div ref={ref} className={cn(className)} {...props}>
+      <div ref={ref} className={cn("segmented-control", className)} {...props}>
         {options.map((option) => {
           const isReactElement = React.isValidElement(option.label);
+          const isActive = selectedValue === option.value;
 
           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",
+                "segmented-control-button",
+                isActive
+                  ? "segmented-control-button--active"
+                  : "segmented-control-button--inactive",
               )}
               onClick={() => handleValueChange(option.value)}
               type="button"
-              data-active={selectedValue === option.value}
+              data-active={isActive}
             >
               {isReactElement ? (
                 option.label