@syscore/ui-library 1.1.9 → 1.1.10

package/client/components/ui/button.tsx

@@ -1,95 +1,62 @@
+"use client";
+
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../../lib/utils";
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap font-semibold transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-60 active:scale-[.98]",
+  "group inline-flex items-center justify-center rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
   {
     variants: {
       variant: {
-        // CTA Button Variants
-        "primary-gradient": [
-          "text-white shadow-xs",
-          "bg-linear-to-r from-cyan-gradient-from via-cyan-gradient-via to-cyan-gradient-to",
-          "hover:shadow-lg hover:scale-[1.02]",
-          "relative",
-          "before:absolute before:inset-0 before:rounded-[inherit] before:bg-linear-to-r before:from-cyan-800 before:to-cyan-800 before:opacity-60 before:mix-blend-overlay",
-        ],
-        "primary-dark": [
-          "text-white shadow-xs",
-          "bg-linear-to-r from-cyan-800 to-cyan-dark",
-          "hover:shadow-lg hover:brightness-110",
-        ],
-        "secondary-light": [
-          "text-cyan-800 bg-white shadow-xs",
-          "border border-gray-200",
-          "hover:bg-gray-50/80",
-        ],
-        "tertiary-light": [
-          "text-blue-600 bg-blue-50 shadow-xs",
-          "border border-blue-200",
-          "hover:bg-blue-50/80",
-        ],
-        // Utility Button Variants
-        "utility-primary": ["text-white bg-blue-600", "hover:bg-blue-600/90"],
-        "utility-secondary": [
-          "text-blue-600 bg-white",
-          "border border-blue-200",
-          "hover:bg-gray-50",
-        ],
-        "utility-tertiary": [
-          "text-gray-600 bg-white",
-          "border border-gray-200",
-          "hover:bg-gray-50",
-        ],
-        "tooltip-primary": ["text-white bg-cyan-300", "hover:bg-cyan-300/90"],
-        "tooltip-secondary": ["text-white bg-gray-500", "hover:bg-gray-500/90"],
-        // Icon Button Variants
-        "icon-reset": [
-          "text-gray-500 bg-white",
-          "border border-gray-100",
-          "hover:bg-gray-50",
-          "p-0",
-        ],
-        "icon-close": [
-          "text-gray-500 bg-white",
-          "border border-gray-100",
-          "hover:bg-gray-50",
-          "p-0",
-        ],
-        "icon-close-semi": [
-          "text-white bg-black/8",
-          "hover:bg-black/12",
-          "p-0",
-        ],
-        "icon-utility": [
-          "text-gray-500 bg-white",
-          "border border-gray-100",
-          "hover:bg-gray-50",
-          "p-0",
-        ],
-        "icon-account": [
-          "bg-white border border-gray-100",
-          "hover:bg-gray-50",
-          "p-0",
-        ],
-        "icon-account-semi": ["bg-black/8 hover:bg-black/12", "p-0"],
+        // CTA variants
+        "primary-gradient": "text-white hover:opacity-90 btn-primary-gradient",
+        "primary-dark":
+          "bg-cyan-800 text-white hover:bg-cyan-900 focus-visible:ring-cyan-800",
+        "secondary-light":
+          "bg-white border border-gray-200 text-cyan-800 hover:bg-gray-50 focus-visible:ring-gray-200",
+        "tertiary-light":
+          "bg-blue-50 border border-blue-200 text-blue-600 hover:bg-blue-100 focus-visible:ring-blue-200",
+        // Utility variants
+        "general-primary":
+          "bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-600",
+        "general-secondary":
+          "bg-white border border-blue-200 text-blue-600 hover:bg-blue-50 focus-visible:ring-blue-200",
+        "general-tertiary":
+          "bg-white border border-gray-200 text-gray-600 hover:bg-gray-50 focus-visible:ring-gray-200",
+        "tooltip-primary":
+          "bg-cyan-300 text-white hover:bg-cyan-400 focus-visible:ring-cyan-300",
+        "tooltip-secondary":
+          "bg-gray-500 text-white hover:bg-gray-600 focus-visible:ring-gray-500",
       },
       size: {
-        xs: "h-8 px-4 text-sm rounded-full", // utility buttons
-        sm: "h-8 px-3 text-xs rounded-md",
-        md: "h-10 px-4 text-sm rounded-md",
-        lg: "h-12 px-8 text-base rounded-full", // large CTA
-        xl: "h-16 px-10 text-lg rounded-full", // xlarge CTA
-        icon: "h-8 w-8 rounded-full", // 32px icon buttons
-      },
-      fullWidth: {
-        true: "w-full",
+        xlarge: "h-16 px-10",
+        large: "h-12 px-8",
+        utility: "h-8 px-4",
+        icon: "size-[32px]",
       },
     },
+    compoundVariants: [
+      {
+        size: "xlarge",
+        className: "font-semibold",
+      },
+      {
+        size: "large",
+        className: "font-semibold",
+      },
+      {
+        size: "utility",
+        className: "font-semibold",
+      },
+      {
+        size: "icon",
+        className: "p-0 bg-white border border-gray-100 ",
+      },
+    ],
     defaultVariants: {
-      variant: "primary-gradient",
-      size: "md",
+      variant: "primary-dark",
+      size: "large",
     },
   },
 );
@@ -97,60 +64,33 @@ const buttonVariants = cva(
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  leftIcon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
-  iconOnly?: React.ReactNode;
+  asChild?: boolean;
 }
 
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant,
-      size,
-      fullWidth,
-      leftIcon,
-      rightIcon,
-      iconOnly,
-      children,
-      style,
-      ...props
-    },
-    ref,
-  ) => {
-    // Use DM Sans for button text to approximate Mazzard Soft M
-    const buttonStyle = {
-      fontFamily:
-        "'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
-      ...style,
-    };
-
-    if (iconOnly) {
-      return (
-        <button
-          ref={ref}
-          className={cn(
-            buttonVariants({ variant, size: size || "icon", fullWidth }),
-            className,
-          )}
-          style={buttonStyle}
-          {...props}
-        >
-          {iconOnly}
-        </button>
-      );
-    }
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, children, style, ...props }, ref) => {
+    // Determine body class based on size for text labels
+    const bodyClass =
+      size === "xlarge"
+        ? "body-large"
+        : size === "large"
+          ? "body-base"
+          : size === "utility"
+            ? "body-small"
+            : "";
 
     return (
       <button
+        className={cn(buttonVariants({ variant, size }), className)}
+        style={style}
         ref={ref}
-        className={cn(buttonVariants({ variant, size, fullWidth }), className)}
-        style={buttonStyle}
         {...props}
       >
-        {leftIcon}
-        <span>{children}</span>
-        {rightIcon}
+        {size === "icon" ? (
+          children
+        ) : (
+          <span className={cn("relative z-10", bodyClass)}>{children}</span>
+        )}
       </button>
     );
   },
@@ -158,4 +98,4 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
 Button.displayName = "Button";
 
-export { buttonVariants };
+export { Button, buttonVariants };

package/client/components/ui/calendar.tsx

@@ -24,7 +24,7 @@ function Calendar({
         caption_label: "text-sm font-medium",
         nav: "space-x-1 flex items-center",
         nav_button: cn(
-          buttonVariants({ variant: "outline" }),
+          buttonVariants({ variant: "general-secondary" }),
           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
         ),
         nav_button_previous: "absolute left-1",
@@ -36,7 +36,7 @@ function Calendar({
         row: "flex w-full mt-2",
         cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
         day: cn(
-          buttonVariants({ variant: "ghost" }),
+          buttonVariants({ variant: "general-tertiary" }),
           "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
         ),
         day_range_end: "day-range-end",

package/client/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-xs",
+      "rounded-lg border border-gray-100 bg-cyan-50  shadow-xs p-6 space-y-6",
       className,
     )}
     {...props}
@@ -21,11 +21,7 @@ const CardHeader = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
+  <div ref={ref} className={cn("flex flex-col gap-6", className)} {...props} />
 ));
 CardHeader.displayName = "CardHeader";
 
@@ -35,10 +31,7 @@ const CardTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h3
     ref={ref}
-    className={cn(
-      "text-2xl font-semibold leading-none tracking-tight",
-      className,
-    )}
+    className={cn("heading-xxsmall text-gray-800", className)}
     {...props}
   />
 ));
@@ -50,7 +43,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("body-base text-gray-800", className)}
     {...props}
   />
 ));
@@ -60,7 +53,11 @@ const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  <div
+    ref={ref}
+    className={cn("body-base text-gray-800", className)}
+    {...props}
+  />
 ));
 CardContent.displayName = "CardContent";
 
@@ -70,7 +67,7 @@ const CardFooter = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
+    className={cn("flex items-center body-base text-gray-800", className)}
     {...props}
   />
 ));

package/client/components/ui/carousel.tsx

@@ -195,59 +195,69 @@ CarouselItem.displayName = "CarouselItem";
 const CarouselPrevious = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+>(
+  (
+    { className, variant = "general-secondary", size = "icon", ...props },
+    ref,
+  ) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute  h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className,
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  );
-});
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute  h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-left-12 top-1/2 -translate-y-1/2"
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}
+      >
+        <ArrowLeft className="h-4 w-4" />
+        <span className="sr-only">Previous slide</span>
+      </Button>
+    );
+  },
+);
 CarouselPrevious.displayName = "CarouselPrevious";
 
 const CarouselNext = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
+>(
+  (
+    { className, variant = "general-secondary", size = "icon", ...props },
+    ref,
+  ) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
 
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className,
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  );
-});
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-right-12 top-1/2 -translate-y-1/2"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}
+      >
+        <ArrowRight className="h-4 w-4" />
+        <span className="sr-only">Next slide</span>
+      </Button>
+    );
+  },
+);
 CarouselNext.displayName = "CarouselNext";
 
 export {

package/client/components/ui/command.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import { type DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
@@ -12,22 +14,17 @@ const Command = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive
     ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className,
-    )}
+    className={cn("flex h-full w-full flex-col overflow-hidden", className)}
     {...props}
   />
 ));
 Command.displayName = CommandPrimitive.displayName;
 
-interface CommandDialogProps extends DialogProps {}
-
-const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+const CommandDialog = ({ children, ...props }: DialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="**:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 **:[[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 **:[[cmdk-input]]:h-12 **:[[cmdk-item]]:px-2 **:[[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -35,16 +32,27 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   );
 };
 
+interface CommandInputProps
+  extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input> {
+  icon?: React.ComponentType<{ className?: string }>;
+}
+
 const CommandInput = React.forwardRef<
   React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+  CommandInputProps
+>(({ className, icon: Icon = Search, ...props }, ref) => (
+  <div
+    className={cn(
+      "group relative flex h-14 w-full  sm:min-w-[344px] items-center gap-4 rounded-lg border border-gray-200 bg-white p-4  focus:ring-0 focus:outline-none",
+      className,
+    )}
+    cmdk-input-wrapper=""
+  >
+    <Icon className=" h-4 w-4 shrink-0 group-focus-within:-translate-x-4 group-focus-within:opacity-0 ease-in-out duration-200" />
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "text-base w-full ring-0 outline-none group-focus-within:-translate-x-8 ease-in-out duration-200",
         className,
       )}
       {...props}
@@ -60,7 +68,10 @@ const CommandList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    className={cn(
+      "max-h-[300px] overflow-y-auto overflow-x-hidden bg-gray-700  rounded-b-lg",
+      className,
+    )}
     {...props}
   />
 ));
@@ -87,7 +98,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground",
+      "group overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground ",
       className,
     )}
     {...props}
@@ -115,7 +126,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      "relative flex w-full items-center gap-2 cursor-default select-none p-4 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-gray-700 hover:bg-[rgba(0,0,0,0.2)] text-gray-200",
       className,
     )}
     {...props}