torch-glare 2.4.0 → 2.4.1

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

@@ -3,25 +3,14 @@ import React, { HTMLAttributes } from "react";
 import { Slot } from "@radix-ui/react-slot";
 
 interface Props extends Omit<
-  HTMLAttributes<
-    | HTMLDivElement
-    | HTMLHeadingElement
-    | HTMLParagraphElement
-    | HTMLLabelElement
-  >,
+  HTMLAttributes<HTMLDivElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement>,
   "htmlFor"
 > {
   as?: React.ElementType;
   asChild?: boolean;
   htmlFor?: string;
 }
-export const Card = ({
-  className,
-  htmlFor,
-  asChild,
-  as: Tag = "section",
-  ...props
-}: Props) => {
+export const Card = ({ className, htmlFor, asChild, as: Tag = "section", ...props }: Props) => {
   const Component = asChild ? Slot : Tag;
   return (
     <Component

package/apps/lib/components/ChartBlockTool.ts

@@ -133,16 +133,12 @@ export default class ChartBlockTool {
       }
 
       // Click on the block → expand editing panel
-      this.wrapper.addEventListener("click", (e) => {
+      this.wrapper.addEventListener("click", () => {
         if (
           this.editorPanel &&
-          this.editorPanel.classList.contains(
-            "cdx-chart-block__editor-panel--hidden",
-          )
+          this.editorPanel.classList.contains("cdx-chart-block__editor-panel--hidden")
         ) {
-          this.editorPanel.classList.remove(
-            "cdx-chart-block__editor-panel--hidden",
-          );
+          this.editorPanel.classList.remove("cdx-chart-block__editor-panel--hidden");
           // Re-create chart since canvas may have been resized
           this.createChart();
         }
@@ -150,14 +146,8 @@ export default class ChartBlockTool {
 
       // Click outside → collapse
       this.boundOnClickOutside = (e: MouseEvent) => {
-        if (
-          this.wrapper &&
-          this.editorPanel &&
-          !this.wrapper.contains(e.target as Node)
-        ) {
-          this.editorPanel.classList.add(
-            "cdx-chart-block__editor-panel--hidden",
-          );
+        if (this.wrapper && this.editorPanel && !this.wrapper.contains(e.target as Node)) {
+          this.editorPanel.classList.add("cdx-chart-block__editor-panel--hidden");
           // Re-create chart to fit new size
           this.createChart();
         }
@@ -407,8 +397,7 @@ export default class ChartBlockTool {
         dataInput.className = "cdx-chart-block__data-input";
         dataInput.value = String(dataset.data[colIdx] ?? 0);
         dataInput.addEventListener("input", () => {
-          this.data.datasets[rowIdx].data[colIdx] =
-            parseFloat(dataInput.value) || 0;
+          this.data.datasets[rowIdx].data[colIdx] = parseFloat(dataInput.value) || 0;
           this.scheduleChartUpdate();
         });
         td.appendChild(dataInput);
@@ -425,14 +414,8 @@ export default class ChartBlockTool {
       colorPicker.value = this.rgbaToHex(dataset.backgroundColor);
       colorPicker.title = "Dataset color";
       colorPicker.addEventListener("input", () => {
-        this.data.datasets[rowIdx].backgroundColor = this.hexToRgba(
-          colorPicker.value,
-          0.5,
-        );
-        this.data.datasets[rowIdx].borderColor = this.hexToRgba(
-          colorPicker.value,
-          1,
-        );
+        this.data.datasets[rowIdx].backgroundColor = this.hexToRgba(colorPicker.value, 0.5);
+        this.data.datasets[rowIdx].borderColor = this.hexToRgba(colorPicker.value, 1);
         this.scheduleChartUpdate();
       });
       controlsCell.appendChild(colorPicker);
@@ -470,9 +453,7 @@ export default class ChartBlockTool {
     const gridColor = dark ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)";
     const legendColor = dark ? "#ccc" : "#666";
 
-    const isPieType = ["pie", "doughnut", "polarArea"].includes(
-      this.data.chartType,
-    );
+    const isPieType = ["pie", "doughnut", "polarArea"].includes(this.data.chartType);
 
     // For pie/doughnut/polar, use per-segment colors from all datasets flattened
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -482,12 +463,8 @@ export default class ChartBlockTool {
           label: ds.label,
           data: [...ds.data],
           borderWidth: 2,
-          backgroundColor: ds.data.map(
-            (_, i) => COLOR_PALETTE[i % COLOR_PALETTE.length].bg,
-          ),
-          borderColor: ds.data.map(
-            (_, i) => COLOR_PALETTE[i % COLOR_PALETTE.length].border,
-          ),
+          backgroundColor: ds.data.map((_, i) => COLOR_PALETTE[i % COLOR_PALETTE.length].bg),
+          borderColor: ds.data.map((_, i) => COLOR_PALETTE[i % COLOR_PALETTE.length].border),
         };
       }
       return {
@@ -557,9 +534,7 @@ export default class ChartBlockTool {
       this.updateTimeout = null;
       if (!this.chart) return;
 
-      const isPieType = ["pie", "doughnut", "polarArea"].includes(
-        this.data.chartType,
-      );
+      const isPieType = ["pie", "doughnut", "polarArea"].includes(this.data.chartType);
 
       this.chart.data.labels = [...this.data.labels];
       this.chart.data.datasets = this.data.datasets.map((ds) => {
@@ -571,12 +546,8 @@ export default class ChartBlockTool {
         };
 
         if (isPieType) {
-          base.backgroundColor = ds.data.map(
-            (_, i) => COLOR_PALETTE[i % COLOR_PALETTE.length].bg,
-          );
-          base.borderColor = ds.data.map(
-            (_, i) => COLOR_PALETTE[i % COLOR_PALETTE.length].border,
-          );
+          base.backgroundColor = ds.data.map((_, i) => COLOR_PALETTE[i % COLOR_PALETTE.length].bg);
+          base.borderColor = ds.data.map((_, i) => COLOR_PALETTE[i % COLOR_PALETTE.length].border);
         } else {
           base.backgroundColor = ds.backgroundColor;
           base.borderColor = ds.borderColor;
@@ -637,9 +608,7 @@ export default class ChartBlockTool {
 
   private updateTypeSelector(): void {
     if (!this.wrapper) return;
-    const buttons = this.wrapper.querySelectorAll<HTMLButtonElement>(
-      ".cdx-chart-block__type-btn",
-    );
+    const buttons = this.wrapper.querySelectorAll<HTMLButtonElement>(".cdx-chart-block__type-btn");
     buttons.forEach((btn) => {
       btn.classList.toggle(
         "cdx-chart-block__type-btn--active",
@@ -651,17 +620,13 @@ export default class ChartBlockTool {
   private normalizeData(data: Partial<ChartBlockData>): ChartBlockData {
     const chartType =
       data.chartType &&
-      ["bar", "line", "pie", "doughnut", "radar", "polarArea"].includes(
-        data.chartType,
-      )
+      ["bar", "line", "pie", "doughnut", "radar", "polarArea"].includes(data.chartType)
         ? data.chartType
         : DEFAULT_DATA.chartType;
 
     const title = data.title ?? DEFAULT_DATA.title;
     const labels =
-      Array.isArray(data.labels) && data.labels.length > 0
-        ? data.labels
-        : [...DEFAULT_DATA.labels];
+      Array.isArray(data.labels) && data.labels.length > 0 ? data.labels : [...DEFAULT_DATA.labels];
 
     const datasets =
       Array.isArray(data.datasets) && data.datasets.length > 0

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;