torch-glare 2.4.0 → 2.4.2

package/apps/lib/components/ButtonGroup.tsx

@@ -11,44 +11,34 @@ import { ToggleButton, toggleButtonStyles } from "./ToggleButton";
 // ButtonGroup Root
 // ============================================================================
 
-const buttonGroupStyles = cva(
-  [
-    "inline-flex",
-    "rounded-[4px]",
-    "overflow-hidden",
-  ],
-  {
-    variants: {
-      variant: {
-        PrimeStyle: [
-          "bg-background-presentation-action-secondary",
-          "border border-border-presentation-action-disabled",
-        ],
-        BorderStyle: [
-          "bg-background-presentation-action-borderstyle",
-          "border border-border-presentation-action-disabled",
-        ],
-        SystemStyle: [
-          "bg-black-alpha-20",
-          "border border-[#2C2D2E]",
-        ],
-      },
-      size: {
-        S: "h-[22px]",
-        M: "h-[28px]",
-        L: "h-[34px]",
-        XL: "h-[40px]",
-      },
-      fullWidth: {
-        true: "w-full",
-      },
+const buttonGroupStyles = cva(["inline-flex", "rounded-[4px]", "overflow-hidden"], {
+  variants: {
+    variant: {
+      PrimeStyle: [
+        "bg-background-presentation-action-secondary",
+        "border border-border-presentation-action-disabled",
+      ],
+      BorderStyle: [
+        "bg-background-presentation-action-borderstyle",
+        "border border-border-presentation-action-disabled",
+      ],
+      SystemStyle: ["bg-black-alpha-20", "border border-[#2C2D2E]"],
     },
-    defaultVariants: {
-      variant: "PrimeStyle",
-      size: "M",
+    size: {
+      S: "h-[22px]",
+      M: "h-[28px]",
+      L: "h-[34px]",
+      XL: "h-[40px]",
     },
-  }
-);
+    fullWidth: {
+      true: "w-full",
+    },
+  },
+  defaultVariants: {
+    variant: "PrimeStyle",
+    size: "M",
+  },
+});
 
 type ButtonGroupSingleProps = {
   type: "single";
@@ -77,11 +67,11 @@ const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
       ref={ref}
       data-theme={theme}
       className={cn(buttonGroupStyles({ variant, size, fullWidth }), className)}
-      {...(props as any)}
+      {...(props as React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>)}
     >
       {React.Children.map(children, (child) => {
         if (React.isValidElement(child)) {
-          return React.cloneElement(child as React.ReactElement<any>, {
+          return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {
             _groupVariant: variant,
             _groupSize: size,
           });
@@ -89,7 +79,7 @@ const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
         return child;
       })}
     </ToggleGroupPrimitive.Root>
-  )
+  ),
 );
 ButtonGroup.displayName = "ButtonGroup";
 
@@ -154,7 +144,7 @@ const buttonGroupItemStyles = cva(
       variant: "PrimeStyle",
       size: "M",
     },
-  }
+  },
 );
 
 type ButtonGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
@@ -177,7 +167,7 @@ const ButtonGroupItem = React.forwardRef<
         variant: variant ?? _groupVariant ?? "PrimeStyle",
         size: size ?? _groupSize ?? "M",
       }),
-      className
+      className,
     )}
     {...props}
   >

package/apps/lib/components/Calendar.tsx

@@ -1,13 +1,13 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { DayPicker } from "react-day-picker"
+import * as React from "react";
+import { DayPicker } from "react-day-picker";
 import "react-day-picker/style.css";
-import { cn } from "../utils/cn"
-import { Button } from "./Button"
+import { cn } from "../utils/cn";
+import { Button } from "./Button";
 import { SimpleSelectValue, SimpleSelectItem } from "./SimpleSelect";
 
-export type CalendarProps = React.ComponentProps<typeof DayPicker>
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
 const Calendar = ({
   className,
@@ -20,66 +20,88 @@ const Calendar = ({
   return (
     <DayPicker
       data-theme="dark"
-      className={cn("w-fit p-[6px] rounded-[12px] bg-background-system-body-base relative", className)}
+      className={cn(
+        "w-fit p-[6px] rounded-[12px] bg-background-system-body-base relative",
+        className,
+      )}
       showOutsideDays={showOutsideDays}
       captionLayout={captionLayout}
       components={{
         Nav: (e) => {
           return (
             <div className="w-full flex items-center justify-between absolute top-0 left-0 p-[6px]">
-              <Button onClick={e.onPreviousClick} buttonType="icon" variant="PrimeStyle" size="M" className="w-[26px] h-[26px]">
+              <Button
+                onClick={e.onPreviousClick}
+                buttonType="icon"
+                variant="PrimeStyle"
+                size="M"
+                className="w-[26px] h-[26px]"
+              >
                 <i className="ri-arrow-left-s-line"></i>
               </Button>
-              <Button onClick={e.onNextClick} buttonType="icon" variant="PrimeStyle" size="M" className="w-[26px] h-[26px]">
+              <Button
+                onClick={e.onNextClick}
+                buttonType="icon"
+                variant="PrimeStyle"
+                size="M"
+                className="w-[26px] h-[26px]"
+              >
                 <i className="ri-arrow-right-s-line"></i>
               </Button>
             </div>
-          )
+          );
         },
         MonthsDropdown: (e) => {
           return (
             <SimpleSelectValue
               inputClassName="w-[23px]"
-              value={e.options?.find(month => month.value === e.value)?.label.slice(0, 3) || ''}
+              value={e.options?.find((month) => month.value === e.value)?.label.slice(0, 3) || ""}
             >
               {e.options?.map((month, i) => (
                 <SimpleSelectItem
                   key={month.value}
                   selected={e.value === month.value}
-                  onClick={() => e.onChange?.({
-                    target: {
-                      value: month.value
-                    }
-                  } as any)}
+                  onClick={() =>
+                    e.onChange?.({
+                      target: {
+                        value: month.value,
+                      },
+                    } as unknown as React.ChangeEvent<HTMLSelectElement>)
+                  }
                 >
                   {`${month.label} - ${i + 1}`}
                 </SimpleSelectItem>
               ))}
             </SimpleSelectValue>
-          )
+          );
         },
         YearsDropdown: (e) => {
           return (
-            <SimpleSelectValue
-              inputClassName="w-[30px]"
-              value={e.value}
-            >
+            <SimpleSelectValue inputClassName="w-[30px]" value={e.value}>
               {e.options?.map((year) => (
-                <SimpleSelectItem key={year.value} selected={e.value === year.value} onClick={() => e.onChange?.({ target: { value: year.value } } as any)}>
+                <SimpleSelectItem
+                  key={year.value}
+                  selected={e.value === year.value}
+                  onClick={() =>
+                    e.onChange?.({
+                      target: { value: year.value },
+                    } as unknown as React.ChangeEvent<HTMLSelectElement>)
+                  }
+                >
                   {year.label}
                 </SimpleSelectItem>
               ))}
             </SimpleSelectValue>
-          )
+          );
         },
-        ...components
+        ...components,
       }}
       classNames={{
         day: cn(
           "!w-[30px] !h-[30px] [&_button]:!w-[28px] [&_button]:!h-[28px] [&_button]:!rounded-[6px] [&_button]:!text-content-system-global-primary [&_button]:!bg-background-system-body-secondary [&_button]:!m-[2px] [&_button]:!text-[10px] [&_button]:!border-[1px]  [&_button]:!outline-none",
           "[&_button]:hover:!border-border-system-action-secondary-hover [&_button]:hover:!bg-background-system-action-secondary-hover",
           "[&_button]:focus-within:!border-border-system-action-secondary-hover [&_button]:focus-within:!bg-background-system-action-primary-hover",
-          "[&_button]:transition-all [&_button]:duration-200"
+          "[&_button]:transition-all [&_button]:duration-200",
         ),
         today: `[&_button]:!bg-background-system-action-primary-hover`, // Add a border to today's date
         selected: `[&_button]:!bg-background-system-action-primary-hover [&_button]:!border-border-system-action-secondary-hover [&_button]:!text-content-presentation-global-primary`,
@@ -96,8 +118,8 @@ const Calendar = ({
       }}
       {...props}
     />
-  )
-}
-Calendar.displayName = "Calendar"
+  );
+};
+Calendar.displayName = "Calendar";
 
-export { Calendar }
+export { Calendar };

package/apps/lib/components/Card.tsx

@@ -1,44 +1,60 @@
 import { cn } from "../utils/cn";
 import React, { HTMLAttributes } from "react";
 import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-interface Props extends Omit<
-  HTMLAttributes<
-    | HTMLDivElement
-    | HTMLHeadingElement
-    | HTMLParagraphElement
-    | HTMLLabelElement
-  >,
-  "htmlFor"
-> {
+export const cardStyles = cva(
+  [
+    "flex flex-col justify-start",
+    "gap-2 rounded-[12px] border",
+    "transition-all ease-in-out duration-200",
+    "p-[16px]",
+    "border-border-presentation-global-primary",
+    "bg-background-presentation-form-radiocard-base",
+    "focus:border-border-presentation-state-focus",
+  ],
+  {
+    variants: {
+      variant: {
+        /** Static container — no hover affordance. */
+        default: [],
+        /** Interactive card (a link/label/button surface) — highlights on hover. */
+        clickable: ["cursor-pointer", "hover:border-border-presentation-state-focus"],
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+interface Props
+  extends
+    Omit<
+      HTMLAttributes<HTMLDivElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement>,
+      "htmlFor"
+    >,
+    VariantProps<typeof cardStyles> {
   as?: React.ElementType;
   asChild?: boolean;
   htmlFor?: string;
 }
+
+/**
+ * A surface container. Defaults to a **static** card; pass `variant="clickable"` when the whole
+ * card is an interactive target so it gets the hover highlight + pointer cursor.
+ */
 export const Card = ({
   className,
   htmlFor,
   asChild,
+  variant,
   as: Tag = "section",
   ...props
 }: Props) => {
   const Component = asChild ? Slot : Tag;
   return (
-    <Component
-      htmlFor={htmlFor}
-      {...props}
-      className={cn(
-        "flex flex-col justify-start",
-        "gap-2 rounded-[12px] border",
-        "transition-all ease-in-out duration-200",
-        "p-[16px]",
-        "border-border-presentation-global-primary",
-        "bg-background-presentation-form-radiocard-base",
-        "hover:border-border-presentation-state-focus",
-        "focus:border-border-presentation-state-focus",
-        className,
-      )}
-    />
+    <Component htmlFor={htmlFor} {...props} className={cn(cardStyles({ variant }), className)} />
   );
 };
 

package/apps/lib/components/Checkbox.tsx

@@ -1,10 +1,9 @@
-'use client';
+"use client";
 import { cn } from "../utils/cn";
 import { cva } from "class-variance-authority";
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import React from "react";
 
-
 const glareCheckBoxStyles = cva(
   [
     "peer shrink-0 shadow focus-visible:outline-none rounded-[3px]",
@@ -12,7 +11,7 @@ const glareCheckBoxStyles = cva(
     "border border-border-presentation-action-checkbox-primary",
     "bg-background-presentation-action-borderstyle",
     "focus:bg-blue-sparkle-alpha-15 focus:border-border-presentation-state-focus",
-    'disabled:bg-background-presentation-action-disabled disabled:border-border-presentation-action-disabled disabled:cursor-not-allowed',
+    "disabled:bg-background-presentation-action-disabled disabled:border-border-presentation-action-disabled disabled:cursor-not-allowed",
     "data-[state=checked]:bg-blue-sparkle-600 data-[state=checked]:border-blue-sparkle-600",
     "hover:border-border-presentation-action-hover",
   ],
@@ -22,28 +21,22 @@ const glareCheckBoxStyles = cva(
         S: ["w-[14px] h-[14px]"],
         M: ["w-[16px] h-[16px]"],
       },
-    }
-  }
+    },
+  },
 );
 
-
 export const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & { size?: "S" | "M" }
 >(({ className, size = "M", ...props }, ref) => (
   <CheckboxPrimitive.Root
     ref={ref}
-    className={cn(
-      glareCheckBoxStyles({ size }),
-      className
-    )}
+    className={cn(glareCheckBoxStyles({ size }), className)}
     {...props}
   >
-    <CheckboxPrimitive.Indicator
-    >
+    <CheckboxPrimitive.Indicator>
       <i className="ri-check-line text-white" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
-
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;