torch-glare 2.3.0 → 2.4.1

package/README.md

@@ -7,6 +7,14 @@ Welcome to the **TORCH Glare Components Library**! This library offers a compreh
 ## Documentation
 You can find the complete documentation at: [https://glare.torchcorp.com](https://glare.torchcorp.com)
 
+## MCP Server (AI assistants)
+TORCH Glare ships an [MCP](https://modelcontextprotocol.io) server (`torch-glare-mcp`) that gives
+AI assistants full access to component docs, API references, code examples, install commands, and
+the actual source the CLI copies. See [`mcp/README.md`](mcp/README.md).
+
+Wire it into your AI client with `npx torch-glare mcp`, or, when working in this repo, run
+`pnpm run mcp:build` once — the local server is registered in [`.mcp.json`](.mcp.json).
+
 ## Contributing
 We’re excited to welcome contributors! To get started:
 

package/apps/lib/components/ActionButton.tsx

@@ -17,20 +17,19 @@ const buttonVariants = cva("!rounded-[4px]", {
   },
 });
 
-
 interface Props
-  extends ButtonHTMLAttributes<HTMLButtonElement>,
-  VariantProps<typeof buttonVariants> {
+  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
   is_loading?: boolean;
   disabled?: boolean;
   asChild?: boolean;
   as?: React.ElementType;
-  theme?: Themes
-  variant?: ButtonVariant
+  theme?: Themes;
+  variant?: ButtonVariant;
 }
 export const ActionButton = function ({
   size,
   asChild,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} spread
   as: Tag = "button",
   className,
   variant,
@@ -45,17 +44,13 @@ export const ActionButton = function ({
       asChild={asChild}
       buttonType="icon"
       type={type}
-      size={
-        size == "XS" ? "S" :
-          size == "S" ? "M" :
-            size == "M" ? "L" : "S"
-      }
+      size={size == "XS" ? "S" : size == "S" ? "M" : size == "M" ? "L" : "S"}
       variant={variant}
       className={cn(
         buttonVariants({
           size,
-        })
-        , className
+        }),
+        className,
       )}
       {...props}
     >

package/apps/lib/components/ActionsGroup.tsx

@@ -5,34 +5,23 @@ import { Divider } from "./Divider";
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
   withDivider?: boolean; // to display the divider line if you pass it see on figma design file
-  theme?: Themes
+  theme?: Themes;
 }
 
-const ActionsGroup: React.FC<Props> = ({
-  withDivider,
-  className,
-  children,
-  theme,
-  ...props
-}) => {
+const ActionsGroup: React.FC<Props> = ({ withDivider, className, children, theme, ...props }) => {
   return (
     <section
       {...props}
       data-theme={theme}
       className={cn("flex items-center gap-2 w-full", className)}
     >
-      {withDivider && (
-        <Divider />
-      )}
+      {withDivider && <Divider />}
       {children}
-      {withDivider && (
-        <Divider />
-      )}
+      {withDivider && <Divider />}
     </section>
   );
 };
 
 //          <div className="flex border-t border-solid border-border-presentation-global-primary flex-1 px-2" />
 
-
 export default ActionsGroup;

package/apps/lib/components/AlertDialog.tsx

@@ -1,222 +1,204 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
-import { cn } from "../utils/cn"
-import { Button, buttonVariants } from "./Button"
-import { ButtonVariant } from "../utils/types"
-import { cva } from "class-variance-authority"
+import { cn } from "../utils/cn";
+import { Button, buttonVariants } from "./Button";
+import { ButtonVariant } from "../utils/types";
+import { cva } from "class-variance-authority";
 
 const StatusTextStyle = cva("", {
-    variants: {
-        variant: {
-            default: "[&_strong]:text-content-presentation-global-primary  [&_[data-description]]:text-content-presentation-global-primary",
-            info: "[&_strong]:text-content-presentation-state-information  [&_[data-description]]:text-content-presentation-state-information",
-            success: "[&_strong]:text-content-presentation-state-success [&_[data-description]]:text-content-presentation-state-success",
-            warning: "[&_strong]:text-content-presentation-state-warning  [&_[data-description]]:text-content-presentation-state-warning",
-            error: "[&_strong]:text-content-presentation-state-negative  [&_[data-description]]:text-content-presentation-state-negative",
-        }
-    },
-    defaultVariants: {
-        variant: "default",
+  variants: {
+    variant: {
+      default:
+        "[&_strong]:text-content-presentation-global-primary  [&_[data-description]]:text-content-presentation-global-primary",
+      info: "[&_strong]:text-content-presentation-state-information  [&_[data-description]]:text-content-presentation-state-information",
+      success:
+        "[&_strong]:text-content-presentation-state-success [&_[data-description]]:text-content-presentation-state-success",
+      warning:
+        "[&_strong]:text-content-presentation-state-warning  [&_[data-description]]:text-content-presentation-state-warning",
+      error:
+        "[&_strong]:text-content-presentation-state-negative  [&_[data-description]]:text-content-presentation-state-negative",
     },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
 });
 
+const AlertDialog = AlertDialogPrimitive.Root;
 
-const AlertDialog = AlertDialogPrimitive.Root
-
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
-const AlertDialogPortal = AlertDialogPrimitive.Portal
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 const AlertDialogOverlay = React.forwardRef<
-    React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-    <AlertDialogPrimitive.Overlay
-        className={cn(
-            "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-            className
-        )}
-        {...props}
-        ref={ref}
-    />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
 const AlertDialogContent = React.forwardRef<
-    React.ElementRef<typeof AlertDialogPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
-        variant?: "info" | "success" | "warning" | "error" | "default"
-    }
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> & {
+    variant?: "info" | "success" | "warning" | "error" | "default";
+  }
 >(({ className, variant = "default", ...props }, ref) => (
-    <AlertDialogPortal>
-        <AlertDialogOverlay />
-        <AlertDialogPrimitive.Content
-            ref={ref}
-            className={cn(
-                StatusTextStyle({ variant }),
-                "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[800px] translate-x-[-50%] translate-y-[-50%]",
-                "gap-2 rounded-[16px] border-2 border-border-presentation-global-primary",
-                "bg-background-presentation-body-overlay-primary p-[12px]",
-                "text-content-presentation-global-primary",
-                "shadow-lg duration-200",
-                "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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
-                "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
-                className
-            )}
-            {...props}
-        />
-    </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
-
-const AlertDialogHeader = ({
-    className,
-    ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-    <div
-        className={cn(
-            "flex justify-between space-x-2 text-left",
-            className
-        )}
-        {...props}
-    />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
-
-const AlertDialogFooter = ({
-    className,
-    ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-    <div
-        className={cn(
-            "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-            className
-        )}
-        {...props}
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        StatusTextStyle({ variant }),
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[800px] translate-x-[-50%] translate-y-[-50%]",
+        "gap-2 rounded-[16px] border-2 border-border-presentation-global-primary",
+        "bg-background-presentation-body-overlay-primary p-[12px]",
+        "text-content-presentation-global-primary",
+        "shadow-lg duration-200",
+        "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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+        "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        className,
+      )}
+      {...props}
     />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex justify-between space-x-2 text-left", className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
 
 const AlertDialogTitle = React.forwardRef<
-    React.ElementRef<typeof AlertDialogPrimitive.Title>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
-    <AlertDialogPrimitive.Title
-        ref={ref}
-        className={cn("typography-display-medium-semibold", className)}
-        {...props}
-    />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("typography-display-medium-semibold", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
 const AlertDialogLabel = React.forwardRef<
-    React.ElementRef<typeof AlertDialogPrimitive.Title>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> & {
-        title: string
-    }
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title> & {
+    title: string;
+  }
 >(({ className, title, ...props }, ref) => {
-    const words = title.split(' ');
-    const firstWord = words[0];
-    const restOfTitle = words.slice(1).join(' ');
-
-    return (
-        <AlertDialogPrimitive.Title
-            ref={ref}
-            className={cn("typography-display-medium-semibold", className)}
-            {...props}
-        >
-            <p className="first-letter:uppercase typography-display-medium-semibold" >
-                <strong className="typography-display-medium-semibold" >{firstWord}</strong>
-                {restOfTitle.length > 0 && ' ' + restOfTitle}
-            </p>
-        </AlertDialogPrimitive.Title>
-    )
-})
-AlertDialogLabel.displayName = "AlertDialogLabel"
+  const words = title.split(" ");
+  const firstWord = words[0];
+  const restOfTitle = words.slice(1).join(" ");
+
+  return (
+    <AlertDialogPrimitive.Title
+      ref={ref}
+      className={cn("typography-display-medium-semibold", className)}
+      {...props}
+    >
+      <p className="first-letter:uppercase typography-display-medium-semibold">
+        <strong className="typography-display-medium-semibold">{firstWord}</strong>
+        {restOfTitle.length > 0 && " " + restOfTitle}
+      </p>
+    </AlertDialogPrimitive.Title>
+  );
+});
+AlertDialogLabel.displayName = "AlertDialogLabel";
 
 const AlertDialogDescription = React.forwardRef<
-    React.ElementRef<typeof AlertDialogPrimitive.Description>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
-    <AlertDialogPrimitive.Description
-        data-description=""
-        ref={ref}
-        className={cn(
-            "typography-body-large-medium",
-            "bg-background-presentation-form-base",
-            "border border-border-presentation-global-primary",
-            "rounded-[8px] p-[24px_48px_48px_48px]",
-            className
-        )}
-        {...props}
-    />
-))
-AlertDialogDescription.displayName =
-    AlertDialogPrimitive.Description.displayName
+  <AlertDialogPrimitive.Description
+    data-description=""
+    ref={ref}
+    className={cn(
+      "typography-body-large-medium",
+      "bg-background-presentation-form-base",
+      "border border-border-presentation-global-primary",
+      "rounded-[8px] p-[24px_48px_48px_48px]",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
-    React.ElementRef<typeof AlertDialogPrimitive.Action>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {
-        size?: "M" | "S" | "L" | "XL"
-        variant?: ButtonVariant
-        buttonType?: "button" | "icon"
-    }
->(({ className,
-    size = "M",
-    variant = "BorderStyle",
-    buttonType = "button",
-    ...props }, ref) => (
-    <AlertDialogPrimitive.Action
-        ref={ref}
-        className={cn(buttonVariants({ variant: variant, size: size, buttonType: buttonType }), className)}
-        asChild
-    >
-        <Button size={size} variant={variant} buttonType={buttonType} {...props} />
-    </AlertDialogPrimitive.Action>
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action> & {
+    size?: "M" | "S" | "L" | "XL";
+    variant?: ButtonVariant;
+    buttonType?: "button" | "icon";
+  }
+>(({ className, size = "M", variant = "BorderStyle", buttonType = "button", ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: variant, size: size, buttonType: buttonType }),
+      className,
+    )}
+    asChild
+  >
+    <Button size={size} variant={variant} buttonType={buttonType} {...props} />
+  </AlertDialogPrimitive.Action>
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
 const AlertDialogCancel = React.forwardRef<
-    React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-    React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> & {
-        size?: "M" | "S" | "L" | "XL"
-        variant?: ButtonVariant
-        buttonType?: "button" | "icon"
-    }
->(({ className,
-    size = "M",
-    variant = "RedSecStyle",
-    buttonType = "icon",
-    ...props }, ref) => (
-    <AlertDialogPrimitive.Cancel
-        ref={ref}
-        className={cn(
-            buttonVariants({ variant: variant, size: size, buttonType: buttonType }),
-            "",
-            className
-        )}
-        {...props}
-    />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel> & {
+    size?: "M" | "S" | "L" | "XL";
+    variant?: ButtonVariant;
+    buttonType?: "button" | "icon";
+  }
+>(({ className, size = "M", variant = "RedSecStyle", buttonType = "icon", ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: variant, size: size, buttonType: buttonType }),
+      "",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
-    AlertDialog,
-    AlertDialogPortal,
-    AlertDialogOverlay,
-    AlertDialogTrigger,
-    AlertDialogContent,
-    AlertDialogHeader,
-    AlertDialogFooter,
-    AlertDialogTitle,
-    AlertDialogLabel,
-    AlertDialogDescription,
-    AlertDialogAction,
-    AlertDialogCancel,
-}
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogLabel,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/apps/lib/components/Avatar.tsx

@@ -1,8 +1,8 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as AvatarPrimitive from "@radix-ui/react-avatar"
-import { cn } from "../utils/cn"
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cn } from "../utils/cn";
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
@@ -10,14 +10,11 @@ const Avatar = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className
-    )}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
     {...props}
   />
-))
-Avatar.displayName = AvatarPrimitive.Root.displayName
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Image>,
@@ -28,8 +25,8 @@ const AvatarImage = React.forwardRef<
     className={cn("aspect-square h-full w-full object-cover", className)}
     {...props}
   />
-))
-AvatarImage.displayName = AvatarPrimitive.Image.displayName
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
@@ -39,11 +36,11 @@ const AvatarFallback = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-full w-full items-center justify-center rounded-full bg-background-presentation-action-disabled text-content-presentation-global-primary",
-      className
+      className,
     )}
     {...props}
   />
-))
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarImage, AvatarFallback };

package/apps/lib/components/Badge.tsx

@@ -122,6 +122,12 @@ export const badgeStyles = cva(
     "transition-all duration-200 ease-in-out",
     "whitespace-nowrap",
     "[&_i]:!leading-none",
+    // The subtle variants blend their label/icon with `mix-blend-luminosity`.
+    // `isolate` opens a new stacking context so that blend only composites
+    // against the badge's own background — not against arbitrary page layers
+    // behind it (semi-transparent rows, gradients, masks), which otherwise
+    // ghosts/double-strokes the text in "random" places.
+    "isolate",
   ],
   {
     variants: {
@@ -157,9 +163,7 @@ export const badgeStyles = cva(
 );
 
 interface BadgeProps
-  extends
-    Omit<HTMLAttributes<HTMLSpanElement>, "color">,
-    VariantProps<typeof badgeStyles> {
+  extends Omit<HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof badgeStyles> {
   label?: string;
   badgeIcon?: ReactNode;
   showIcon?: boolean;