@syscore/ui-library 1.1.13 → 1.2.0

package/client/components/ui/tag.tsx

@@ -12,58 +12,11 @@ export interface TagProps
   onClick?: () => void;
 }
 
-const getStatusColors = (
+const getStatusClass = (
   status: TagStatus,
   variant: "light" | "dark" = "light"
 ) => {
-  const colors = {
-    light: {
-      todo: {
-        bg: "bg-gray-100",
-        text: "text-gray-600",
-      },
-      low: {
-        bg: "bg-cyan-100",
-        text: "text-cyan-600",
-      },
-      medium: {
-        bg: "bg-plum-100",
-        text: "text-plum-600",
-      },
-      high: {
-        bg: "bg-coral-100",
-        text: "text-coral-600",
-      },
-      done: {
-        bg: "bg-emerald-100",
-        text: "text-emerald-600",
-      },
-    },
-    dark: {
-      todo: {
-        bg: "bg-gray-600",
-        text: "text-gray-100",
-      },
-      low: {
-        bg: "bg-cyan-700",
-        text: "text-cyan-100",
-      },
-      medium: {
-        bg: "bg-plum-700",
-        text: "text-plum-100",
-      },
-      high: {
-        bg: "bg-coral-700",
-        text: "text-coral-100",
-      },
-      done: {
-        bg: "bg-emerald-700",
-        text: "text-emerald-100",
-      },
-    },
-  };
-
-  return colors[variant][status];
+  return `tag tag--${variant}-${status}`;
 };
 
 export const Tag = React.forwardRef<HTMLButtonElement, TagProps>(
@@ -81,19 +34,12 @@ export const Tag = React.forwardRef<HTMLButtonElement, TagProps>(
   ) => {
     // Status tag styling
     if (status) {
-      const statusColors = getStatusColors(status, variant);
+      const statusClass = getStatusClass(status, variant);
       return (
         <button
           ref={ref}
           onClick={onClick}
-          className={cn(
-            "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={cn(statusClass, className)}
           {...props}
         >
           <span className="overline-medium">{children}</span>
@@ -107,14 +53,8 @@ export const Tag = React.forwardRef<HTMLButtonElement, TagProps>(
         ref={ref}
         onClick={onClick}
         className={cn(
-          "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-cyan-700  text-white hover:border-cyan-700"
-            : "bg-blue-100 text-blue-700 hover:bg-cyan-700 hover:text-white",
+          "tag-general",
+          active ? "tag-general--active" : "tag-general--inactive",
           className
         )}
         {...props}

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-[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,
-        )}
+        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

@@ -5,14 +5,14 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 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",
+  "toggle-group-item",
   {
     variants: {
       variant: {
-        default: "bg-gray-100 text-gray-600 hover:bg-gray-200",
+        default: "toggle-group-item--default",
       },
       size: {
-        default: "h-8 px-4",
+        default: "toggle-group-item--size-default",
       },
     },
     defaultVariants: {
@@ -36,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("inline-flex", 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-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",
+                "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

package/client/components/ui/tooltip.tsx

@@ -15,8 +15,8 @@ const TooltipContext = React.createContext<{
   triggerRef: React.RefObject<HTMLButtonElement | null>;
 }>({
   trigger: "hover",
-  toggle: () => { },
-  close: () => { },
+  toggle: () => {},
+  close: () => {},
   triggerRef: { current: null },
 });
 
@@ -74,7 +74,7 @@ function Tooltip({
       }
       onOpenChange?.(newOpen);
     },
-    [isControlled, onOpenChange, trigger]
+    [isControlled, onOpenChange, trigger],
   );
 
   const close = React.useCallback(() => {
@@ -96,13 +96,13 @@ function Tooltip({
   const tooltipProps =
     trigger === "click"
       ? {
-        open: isOpen,
-        onOpenChange: handleOpenChange,
-      }
+          open: isOpen,
+          onOpenChange: handleOpenChange,
+        }
       : {
-        open: isControlled ? controlledOpen : undefined,
-        onOpenChange,
-      };
+          open: isControlled ? controlledOpen : undefined,
+          onOpenChange,
+        };
 
   return (
     <TooltipContext.Provider value={{ trigger, toggle, close, triggerRef }}>
@@ -130,7 +130,7 @@ function TooltipTrigger({
       }
       onClick?.(e);
     },
-    [trigger, toggle, onClick]
+    [trigger, toggle, onClick],
   );
 
   return (
@@ -189,14 +189,11 @@ function TooltipContent({
         sideOffset={sideOffset}
         alignOffset={alignOffset}
         side={side}
-        className={cn(
-          "group relative bg-gray-700 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-lg p-6 pt-8  shadow-sm mt-3",
-          className
-        )}
+        className={cn("tooltip-content", className)}
         {...props}
       >
         {/* Marker/Arrow */}
-        <div className="absolute  left-1/2 -translate-x-1/2 flex justify-center group-data-[side=top]:bottom-0 group-data-[side=top]:rotate-180 group-data-[side=bottom]:top-0 group-data-[side=left]:right-0 group-data-[side=right]:left-0 ">
+        <div className="tooltip-arrow" data-side={side}>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="10"