@syscore/ui-library 1.7.8 → 1.8.0

package/client/components/ui/label.tsx

@@ -13,10 +13,10 @@ const Label = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <LabelPrimitive.Root
     ref={ref}
-    className={cn(labelVariants(), className)}
+    className={cn(labelVariants(), "overline-medium", className)}
     {...props}
   >
-    <span className="overline-medium">{children}</span>
+    {children}
   </LabelPrimitive.Root>
 ));
 Label.displayName = LabelPrimitive.Root.displayName;

package/client/components/ui/tag.tsx

@@ -14,7 +14,7 @@ export interface TagProps
 
 const getStatusClass = (
   status: TagStatus,
-  variant: "light" | "dark" = "light"
+  variant: "light" | "dark" = "light",
 ) => {
   return `status-tag tag--${variant}-${status}`;
 };
@@ -30,7 +30,7 @@ export const Tag = React.forwardRef<HTMLButtonElement, TagProps>(
       onClick,
       ...props
     },
-    ref
+    ref,
   ) => {
     // Status tag styling
     if (status) {
@@ -39,10 +39,10 @@ export const Tag = React.forwardRef<HTMLButtonElement, TagProps>(
         <button
           ref={ref}
           onClick={onClick}
-          className={cn(statusClass, className)}
+          className={cn("overline-medium", statusClass, className)}
           {...props}
         >
-          <span className="overline-medium">{children}</span>
+          {children}
         </button>
       );
     }
@@ -53,16 +53,16 @@ export const Tag = React.forwardRef<HTMLButtonElement, TagProps>(
         ref={ref}
         onClick={onClick}
         className={cn(
-          "tag-general",
+          "tag-general body-small",
           active ? "tag-general--active" : "tag-general--inactive",
-          className
+          className,
         )}
         {...props}
       >
-        <span className="body-small font-semibold">{children}</span>
+        {children}
       </button>
     );
-  }
+  },
 );
 
 Tag.displayName = "Tag";

package/client/components/ui/toggle.tsx

@@ -3,26 +3,23 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 import { useSegmentedControl } from "../../hooks/use-segmented-control";
 
-const toggleVariants = cva(
-  "toggle",
-  {
-    variants: {
-      variant: {
-        default: "toggle--default",
-        outline: "toggle--outline",
-      },
-      size: {
-        default: "toggle--size-default",
-        sm: "toggle--size-sm",
-        lg: "toggle--size-lg",
-      },
+const toggleVariants = cva("toggle", {
+  variants: {
+    variant: {
+      default: "toggle--default",
+      outline: "toggle--outline",
     },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
+    size: {
+      default: "toggle--size-default",
+      sm: "toggle--size-sm",
+      lg: "toggle--size-lg",
     },
   },
-);
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+});
 
 // Segmented Control Component
 export interface SegmentedControlProps<T extends string = string>
@@ -51,14 +48,13 @@ const SegmentedControlInner = React.forwardRef<
     return (
       <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(
-                "segmented-control-button",
+                "segmented-control-button body-small",
                 isActive
                   ? "segmented-control-button--active"
                   : "segmented-control-button--inactive",
@@ -67,11 +63,7 @@ const SegmentedControlInner = React.forwardRef<
               type="button"
               data-active={isActive}
             >
-              {isReactElement ? (
-                option.label
-              ) : (
-                <span className="body-small font-medium">{option.label}</span>
-              )}
+              {option.label}
             </button>
           );
         })}

package/client/global.css

@@ -1763,6 +1763,7 @@ body {
 .tag-general--active {
   background-color: var(--color-cyan-800, #0f748a);
   color: var(--color-white, #fff);
+  font-weight: 600;
 }
 
 .tag-general--active:hover {
@@ -1772,11 +1773,11 @@ body {
 .tag-general--inactive {
   background-color: var(--color-blue-100, #eff5fb);
   color: var(--color-blue-700, #286495);
+  font-weight: 500;
 }
 
 .tag-general--inactive:hover {
-  background-color: var(--color-cyan-800, #0f748a);
-  color: var(--color-white, #fff);
+  background-color: var(--color-blue-200, #cbe0f1);
 }
 
 /* Toggle/Segmented Control Styles */
@@ -6625,7 +6626,6 @@ body {
 .body-large {
   font-size: 18px;
   font-style: normal;
-  font-weight: 400;
   line-height: 25.2px;
 }
 
@@ -6644,7 +6644,6 @@ body {
 .body-base {
   font-size: 16px;
   font-style: normal;
-  font-weight: 400;
   line-height: 22.4px;
 }
 
@@ -6663,7 +6662,6 @@ body {
 .body-small {
   font-size: 14px;
   font-style: normal;
-  font-weight: 400;
   line-height: 19.6px;
 }
 

package/client/lib/utils.ts

@@ -4,3 +4,9 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
+
+/** Capitalize the first letter of a string */
+export function capitalize(str: string): string {
+  if (!str) return str;
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+}