@syscore/ui-library 1.1.11 → 1.1.13

package/client/components/ui/select.tsx

@@ -1,8 +1,8 @@
 import * as React from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
-import { Check, ChevronDown, ChevronUp } from "lucide-react";
 
 import { cn } from "@/lib/utils";
+import { UtilityChevronDown } from "../icons/UtilityChevronDown";
 
 const Select = SelectPrimitive.Root;
 
@@ -17,15 +17,19 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "group flex h-12 w-full rounded-[6px] border border-gray-200 bg-white p-4  text-gray-800 ring-offset-background placeholder:font-normal placeholder:text-gray-500 focus:outline-none focus:ring-0 data-[state=open]:border-cyan-300 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className,
     )}
     {...props}
   >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
+    <div className="flex items-center justify-between w-full">
+      <span className=" text-gray-800 font-mazzard body-base font-medium">
+        {children}
+      </span>
+      <SelectPrimitive.Icon asChild>
+        <UtilityChevronDown className=" text-gray-600 group-data-[state=open]:rotate-180 transition-transform duration-200" />
+      </SelectPrimitive.Icon>
+    </div>
   </SelectPrimitive.Trigger>
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
@@ -42,7 +46,7 @@ const SelectScrollUpButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronUp className="h-4 w-4" />
+    <UtilityChevronDown />
   </SelectPrimitive.ScrollUpButton>
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -59,7 +63,7 @@ const SelectScrollDownButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronDown className="h-4 w-4" />
+    <UtilityChevronDown />
   </SelectPrimitive.ScrollDownButton>
 ));
 SelectScrollDownButton.displayName =
@@ -73,9 +77,8 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        "relative z-50 max-h-96 min-w-32 overflow-hidden border-cyan-300 bg-gray-700 text-gray-200 shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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 data-[side=bottom]:-mt-1 data-[side=bottom]:rounded-t-none data-[side=bottom]:rounded-b-[6px] data-[side=top]:border-b-0 data-[side=top]:rounded-t-[6px] data-[side=top]:rounded-b-none data-[side=top]:-mb-1 data-[side=top]:border-t data-[side=bottom]:border-b",
+
         className,
       )}
       position={position}
@@ -84,7 +87,7 @@ const SelectContent = React.forwardRef<
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
-          "p-1",
+          "",
           position === "popper" &&
             "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)",
         )}
@@ -103,7 +106,10 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    className={cn(
+      "py-1.5 pl-8 pr-2 text-sm font-semibold font-mazzard",
+      className,
+    )}
     {...props}
   />
 ));
@@ -116,17 +122,11 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      "relative flex h-12 w-full cursor-default select-none items-center border-x border-cyan-300 px-4 outline-none  focus:bg-[rgba(0,0,0,0.2)] data-disabled:pointer-events-none data-disabled:opacity-50",
       className,
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
 ));

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="flex shrink-0 justify-center items-center relative z-0 py-2 gap-x-10"
       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=" overline-large relative rounded-md flex items-center h-8 z-20 bg-transparent cursor-pointer select-none transition-colors"
             onPointerEnter={() => setHoveredTabIndex(i)}
             onFocus={() => setHoveredTabIndex(i)}
             onClick={() => setSelectedTab([i, i > selectedTabIndex ? 1 : -1])}
@@ -257,7 +106,7 @@ const Tabs = ({
         );
       })}
 
-      <AnimatePresence>
+      {/* <AnimatePresence>
         {hoveredRect && navRect && (
           <motion.div
             key="hover"
@@ -279,10 +128,10 @@ const Tabs = ({
               ...getHoverAnimationProps(hoveredRect, navRect),
               opacity: 0,
             }}
-            transition={transition}
+            transition={transition as Transition}
           />
         )}
-      </AnimatePresence>
+      </AnimatePresence> */}
 
       <AnimatePresence>
         {selectedRect && navRect && (
@@ -295,14 +144,16 @@ const Tabs = ({
             }`}
             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="absolute bottom-0 left-0 w-full h-[2px] bg-gray-200" />
     </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,
     };

package/client/components/ui/{Tag.tsx → tag.tsx}

@@ -14,7 +14,7 @@ export interface TagProps
 
 const getStatusColors = (
   status: TagStatus,
-  variant: "light" | "dark" = "light",
+  variant: "light" | "dark" = "light"
 ) => {
   const colors = {
     light: {
@@ -77,7 +77,7 @@ export const Tag = React.forwardRef<HTMLButtonElement, TagProps>(
       onClick,
       ...props
     },
-    ref,
+    ref
   ) => {
     // Status tag styling
     if (status) {
@@ -87,12 +87,12 @@ export const Tag = React.forwardRef<HTMLButtonElement, TagProps>(
           ref={ref}
           onClick={onClick}
           className={cn(
-            "inline-flex items-center p-[8px] rounded-[6px] w-fit",
+            "inline-flex items-center p-[8px] rounded-sm w-fit",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
             "disabled:opacity-50 disabled:cursor-not-allowed",
             statusColors.bg,
             statusColors.text,
-            className,
+            className
           )}
           {...props}
         >
@@ -107,21 +107,22 @@ export const Tag = React.forwardRef<HTMLButtonElement, TagProps>(
         ref={ref}
         onClick={onClick}
         className={cn(
-          "inline-flex items-center h-[32px] px-[12px] py-0 rounded-[6px] w-fit",
+          "inline-flex items-center h-[32px] px-[12px] py-0 rounded-sm w-fit cursor-pointer",
 
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
           "disabled:opacity-50 disabled:cursor-not-allowed",
+          "transition-all duration-200",
           active
-            ? "bg-white border border-cyan-300 text-gray-800 hover:border-cyan-400"
-            : "bg-blue-100 text-blue-700 hover:bg-blue-200",
-          className,
+            ? "bg-cyan-700  text-white hover:border-cyan-700"
+            : "bg-blue-100 text-blue-700 hover:bg-cyan-700 hover:text-white",
+          className
         )}
         {...props}
       >
-        <span className="body-small font-medium">{children}</span>
+        <span className="body-small font-semibold">{children}</span>
       </button>
     );
-  },
+  }
 );
 
 Tag.displayName = "Tag";

package/client/components/ui/textarea.tsx

@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     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",
+          "flex min-h-[80px] w-full rounded-[6px] border border-gray-200 bg-white p-4 body-base font-medium text-gray-800 placeholder:font-normal placeholder:text-gray-500 focus:border-cyan-300 focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:border-blue-200 disabled:bg-transparent ring-0",
           className,
         )}
         ref={ref}

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(
+  "inline-flex items-center justify-center rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-gray-100 text-gray-600 hover:bg-gray-200",
+      },
+      size: {
+        default: "h-8 px-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
 
 const ToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants>

package/client/components/ui/toggle.tsx

@@ -50,7 +50,7 @@ const SegmentedControlInner = React.forwardRef<
       });
 
     return (
-      <div ref={ref} className={cn(className)} {...props}>
+      <div ref={ref} className={cn("inline-flex", className)} {...props}>
         {options.map((option) => {
           const isReactElement = React.isValidElement(option.label);
 
@@ -58,7 +58,7 @@ const SegmentedControlInner = React.forwardRef<
             <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",
+                "inline-flex items-center justify-center h-8 px-4 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring cursor-pointer",
                 selectedValue === option.value
                   ? "bg-cyan-700 text-white font-semibold"
                   : "text-gray-600 hover:bg-gray-50 font-medium",