@syscore/ui-library 1.1.12 → 1.1.13

package/client/components/icons/UtilityText.tsx

@@ -11,23 +11,23 @@ export function UtilityText({ className }: { className?: string }) {
       <path
         d="M8.75 12.75H0.75"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
         stroke-linejoin="round"
       />
       <path
         d="M10.75 0.75H0.75"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
       <path
         d="M14.75 6.75H0.75"
         stroke="currentColor"
-        stroke-width="1.5"
-        stroke-linecap="round"
-        stroke-linejoin="round"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
       />
     </svg>
   );

package/client/components/ui/breadcrumb.tsx

@@ -20,7 +20,7 @@ const BreadcrumbList = React.forwardRef<
     ref={ref}
     className={cn(
       "flex flex-wrap items-center gap-1.5 wrap-break-word text-sm text-muted-foreground sm:gap-2.5",
-      className,
+      className
     )}
     {...props}
   />
@@ -66,7 +66,10 @@ const BreadcrumbPage = React.forwardRef<
     role="link"
     aria-disabled="true"
     aria-current="page"
-    className={cn("font-normal text-foreground", className)}
+    className={cn(
+      "body-small font-medium text-gray-600 text-center whitespace-nowrap",
+      className
+    )}
     {...props}
   />
 ));
@@ -80,10 +83,29 @@ const BreadcrumbSeparator = ({
   <li
     role="presentation"
     aria-hidden="true"
-    className={cn("[&>svg]:size-3.5", className)}
+    className={cn(
+      "size-4 flex items-center justify-center shrink-0",
+      className
+    )}
     {...props}
   >
-    {children ?? <ChevronRight />}
+    {children ?? (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="5"
+        height="8"
+        viewBox="0 0 5 8"
+        fill="none"
+      >
+        <path
+          d="M0.75 6.75L3.75 3.75L0.75 0.75"
+          stroke="#CBCDD2"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    )}
   </li>
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";

package/client/components/ui/button.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
+import { motion } from "motion/react";
 
 const buttonVariants = cva(
   "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",
@@ -10,6 +11,8 @@ const buttonVariants = cva(
     variants: {
       variant: {
         // CTA variants
+        clear: "bg-none border-none",
+        default: "bg-white border border-gray-gray-100",
         "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",
@@ -33,7 +36,7 @@ const buttonVariants = cva(
         xlarge: "h-16 px-10",
         large: "h-12 px-8",
         utility: "h-8 px-4",
-        icon: "size-[32px]",
+        icon: "size-8",
       },
     },
     compoundVariants: [
@@ -51,37 +54,44 @@ const buttonVariants = cva(
       },
       {
         size: "icon",
-        className: "p-0 bg-white border border-gray-100 ",
+        className:
+          "p-0 bg-white border border-gray-100 hover:border-gray-200 hover:scale-[1.02] transition-all duration-200",
       },
     ],
     defaultVariants: {
-      variant: "primary-dark",
+      variant: "default",
       size: "large",
     },
-  },
+  }
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+  extends Omit<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    "onDrag" | "onDragStart" | "onDragEnd" | "onAnimationStart"
+  >,
+  VariantProps<typeof buttonVariants> {
   asChild?: boolean;
 }
 
+const sizeTextClasses: Record<string, string> = {
+  xlarge: "body-large",
+  large: "body-base",
+  utility: "body-small",
+  icon: "",
+};
+
 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"
-            : "";
+    const textClass = sizeTextClasses[size || "large"];
 
     return (
       <button
-        className={cn(buttonVariants({ variant, size }), className)}
+        className={cn(
+          buttonVariants({ variant, size }),
+          "cursor-pointer",
+          className
+        )}
         style={style}
         ref={ref}
         {...props}
@@ -89,11 +99,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {size === "icon" ? (
           children
         ) : (
-          <span className={cn("relative z-10", bodyClass)}>{children}</span>
+          <span className={cn("relative z-10 font-semibold ", textClass)}>
+            {children}
+          </span>
         )}
       </button>
     );
-  },
+  }
 );
 
 Button.displayName = "Button";

package/client/components/ui/card.tsx

@@ -9,8 +9,8 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border border-gray-100 bg-cyan-50  shadow-xs p-6 space-y-6",
-      className,
+      "rounded-lg border border-gray-100 bg-cyan-50 p-6 space-y-6",
+      className
     )}
     {...props}
   />

package/client/components/ui/code-badge.tsx

@@ -0,0 +1,25 @@
+import { cn } from "@/lib/utils";
+
+interface CodeBadgeProps {
+  code: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export const CodeBadge = ({ code, className, style }: CodeBadgeProps) => {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center h-8 w-12 rounded-sm shrink-0 border-[1.5px] px-px",
+        className
+      )}
+      style={{
+        ...style,
+      }}
+    >
+      <span className="number-small font-semibold" style={{ color: "inherit" }}>
+        {code}
+      </span>
+    </div>
+  );
+};

package/client/components/ui/dialog.tsx

@@ -37,7 +37,7 @@ function DialogOverlay({
       data-slot="dialog-overlay"
       className={cn(
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
-        className,
+        className
       )}
       {...props}
     />
@@ -58,8 +58,8 @@ function DialogContent({
       <DialogPrimitive.Content
         data-slot="dialog-content"
         className={cn(
-          "DialogContent overflow-hidden rounded-[40px] gap-4  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 fixed top-[30%] left-[50%] z-50 grid max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] border-12 border-[rgba(255,255,255,0.20)]  duration-200 sm:max-w-lg",
-          className,
+          "DialogContent overflow-hidden rounded-[40px] gap-4  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 fixed top-1/2 left-1/2 z-50 grid  -translate-x-1/2 -translate-y-1/2 border-12 border-[rgba(255,255,255,0.20)]  duration-200 ",
+          className
         )}
         {...props}
       >
@@ -94,7 +94,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="dialog-footer"
       className={cn(
         "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
-        className,
+        className
       )}
       {...props}
     />

package/client/components/ui/input.tsx

@@ -1,19 +1,63 @@
+import { cn } from "@/lib/utils";
 import * as React from "react";
 
-import { cn } from "@/lib/utils";
+export interface InputProps extends React.ComponentProps<"input"> {
+  startIcon?: React.ReactNode;
+  endIcon?: React.ReactNode;
+}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, startIcon, endIcon, ...props }, ref) => {
+    const isReadOnly = props.readOnly;
+    const isDisabled = props.disabled;
 
-const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
-  ({ className, type, ...props }, ref) => {
     return (
-      <input
-        type={type}
+      <div
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground 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 md:text-sm",
+          // Base wrapper styles (visual input)
+          "flex h-12 w-full items-center rounded-[6px] border border-gray-200 bg-white px-4 transition-shadow",
+          // Typography inheritance
+          "body-base font-medium font-mazzard text-gray-800",
+          // Focus states (focus-within matches input focus)
+          "focus-within:border-cyan-300",
+          // Disabled states
+          isDisabled && "opacity-50 cursor-not-allowed",
+          // Read-only states
+          isReadOnly &&
+            "bg-gray-50 border-blue-200 text-gray-600 focus-within:border-blue-200 cursor-default",
           className,
         )}
-        ref={ref}
-        {...props}
-      />
+      >
+        {startIcon ? (
+          <div className="mr-3 flex items-center text-muted-foreground">
+            {startIcon}
+          </div>
+        ) : null}
+
+        <input
+          type={type}
+          className={cn(
+            // Reset styles to be transparent inside wrapper
+            "flex-1 w-full bg-transparent outline-none placeholder:text-gray-500",
+            // File input specific overrides
+            type === "file" &&
+              "p-0 italic text-muted-foreground/70 file:me-3 file:h-full file:border-0 file:border-r file:border-solid file:border-gray-200 file:bg-transparent file:px-3 file:text-base file:font-medium file:not-italic file:text-gray-800",
+            // Search input specific overrides
+            type === "search" &&
+              "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none",
+          )}
+          ref={ref}
+          disabled={isDisabled}
+          readOnly={isReadOnly}
+          {...props}
+        />
+
+        {endIcon ? (
+          <div className="ml-3 flex items-center text-muted-foreground">
+            {endIcon}
+          </div>
+        ) : null}
+      </div>
     );
   },
 );

package/client/components/ui/label.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const labelVariants = cva(
-  "overline-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  "peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-gray-600 px-2",
 );
 
 const Label = React.forwardRef<
@@ -18,7 +18,7 @@ const Label = React.forwardRef<
     className={cn(labelVariants(), className)}
     {...props}
   >
-    {children}
+    <span className="overline-medium">{children}</span>
   </LabelPrimitive.Root>
 ));
 Label.displayName = LabelPrimitive.Root.displayName;