torch-glare 2.5.5 → 2.6.0

package/apps/lib/components/ButtonGroup.tsx

@@ -1,190 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { cva, type VariantProps } from "class-variance-authority";
-import { cn } from "../utils/cn";
-import { Themes } from "../utils/types";
-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",
-    },
-  },
-  defaultVariants: {
-    variant: "PrimeStyle",
-    size: "M",
-  },
-});
-
-type ButtonGroupSingleProps = {
-  type: "single";
-  value?: string;
-  defaultValue?: string;
-  onValueChange?: (value: string) => void;
-};
-
-type ButtonGroupMultipleProps = {
-  type: "multiple";
-  value?: string[];
-  defaultValue?: string[];
-  onValueChange?: (value: string[]) => void;
-};
-
-type ButtonGroupProps = (ButtonGroupSingleProps | ButtonGroupMultipleProps) &
-  Omit<React.ComponentPropsWithoutRef<"div">, "type" | "value" | "defaultValue"> &
-  VariantProps<typeof buttonGroupStyles> & {
-    theme?: Themes;
-    children?: React.ReactNode;
-  };
-
-const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
-  ({ className, variant, size, fullWidth, theme, children, ...props }, ref) => (
-    <ToggleGroupPrimitive.Root
-      ref={ref}
-      data-theme={theme}
-      className={cn(buttonGroupStyles({ variant, size, fullWidth }), className)}
-      {...(props as React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>)}
-    >
-      {React.Children.map(children, (child) => {
-        if (React.isValidElement(child)) {
-          return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {
-            _groupVariant: variant,
-            _groupSize: size,
-          });
-        }
-        return child;
-      })}
-    </ToggleGroupPrimitive.Root>
-  ),
-);
-ButtonGroup.displayName = "ButtonGroup";
-
-// ============================================================================
-// ButtonGroup Item
-// ============================================================================
-
-const buttonGroupItemStyles = cva(
-  [
-    "inline-flex items-center justify-center",
-    "whitespace-nowrap",
-    "transition-all duration-200 ease-in-out",
-    "outline-none",
-    "border-r last:border-r-0",
-    "flex-1",
-    "focus-visible:z-10",
-    "focus-visible:ring-2 focus-visible:ring-inset",
-    "focus-visible:ring-border-presentation-state-focus",
-    "disabled:cursor-not-allowed",
-    "disabled:pointer-events-none",
-    "disabled:text-content-presentation-state-disabled",
-  ],
-  {
-    variants: {
-      variant: {
-        PrimeStyle: [
-          "bg-transparent",
-          "text-content-presentation-action-light-primary",
-          "border-border-presentation-action-disabled",
-          "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-global-primary-inverse",
-          "data-[state=on]:bg-background-presentation-action-hover",
-          "data-[state=on]:text-content-presentation-global-primary-inverse",
-        ],
-        BorderStyle: [
-          "bg-transparent",
-          "text-content-presentation-action-light-primary",
-          "border-border-presentation-action-disabled",
-          "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-global-primary-inverse",
-          "data-[state=on]:bg-background-presentation-action-hover",
-          "data-[state=on]:text-content-presentation-global-primary-inverse",
-        ],
-        SystemStyle: [
-          "bg-transparent",
-          "text-white",
-          "border-[#2C2D2E]",
-          "hover:bg-white/10",
-          "data-[state=on]:bg-white/20",
-          "data-[state=on]:text-white",
-          "disabled:text-white/50",
-        ],
-      },
-      size: {
-        S: "px-[8px] typography-body-small-medium [&_i]:text-[12px]",
-        M: "px-[12px] typography-body-large-medium [&_i]:text-[18px]",
-        L: "px-[16px] typography-body-large-medium [&_i]:text-[20px]",
-        XL: "px-[20px] typography-headers-medium-medium [&_i]:text-[22px]",
-      },
-    },
-    defaultVariants: {
-      variant: "PrimeStyle",
-      size: "M",
-    },
-  },
-);
-
-type ButtonGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-  VariantProps<typeof buttonGroupItemStyles> & {
-    theme?: Themes;
-    children?: React.ReactNode;
-    _groupVariant?: "PrimeStyle" | "BorderStyle" | "SystemStyle" | null;
-    _groupSize?: "S" | "M" | "L" | "XL" | null;
-  };
-
-const ButtonGroupItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  ButtonGroupItemProps
->(({ className, variant, size, theme, children, _groupVariant, _groupSize, ...props }, ref) => (
-  <ToggleGroupPrimitive.Item
-    ref={ref}
-    data-theme={theme}
-    className={cn(
-      buttonGroupItemStyles({
-        variant: variant ?? _groupVariant ?? "PrimeStyle",
-        size: size ?? _groupSize ?? "M",
-      }),
-      className,
-    )}
-    {...props}
-  >
-    {children}
-  </ToggleGroupPrimitive.Item>
-));
-ButtonGroupItem.displayName = "ButtonGroupItem";
-
-// ============================================================================
-// Exports
-// ============================================================================
-
-export {
-  ToggleButton,
-  ButtonGroup,
-  ButtonGroupItem,
-  toggleButtonStyles,
-  buttonGroupStyles,
-  buttonGroupItemStyles,
-};

package/apps/lib/components/Calendar.tsx

@@ -1,115 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { DayPicker } from "react-day-picker";
-import "react-day-picker/style.css";
-import { cn } from "../utils/cn";
-import { ActionButton } from "./ActionButton";
-import { SimpleSelectValue, SimpleSelectItem } from "./SimpleSelect";
-
-export type CalendarProps = React.ComponentProps<typeof DayPicker>;
-
-const Calendar = ({
-  className,
-  classNames,
-  captionLayout = "dropdown",
-  components,
-  showOutsideDays = true,
-  ...props
-}: CalendarProps) => {
-  return (
-    <DayPicker
-      data-theme="dark"
-      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]">
-              {/* Popover navigation rather than an in-field button, so it keeps its own 26px box
-                  and only adopts the shared action colours and radius. */}
-              <ActionButton onClick={e.onPreviousClick} size="S" className="w-[26px] h-[26px]">
-                <i className="ri-arrow-left-s-line"></i>
-              </ActionButton>
-              <ActionButton onClick={e.onNextClick} size="S" className="w-[26px] h-[26px]">
-                <i className="ri-arrow-right-s-line"></i>
-              </ActionButton>
-            </div>
-          );
-        },
-        MonthsDropdown: (e) => {
-          return (
-            <SimpleSelectValue
-              inputClassName="w-[23px]"
-              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 unknown as React.ChangeEvent<HTMLSelectElement>)
-                  }
-                >
-                  {`${month.label} - ${i + 1}`}
-                </SimpleSelectItem>
-              ))}
-            </SimpleSelectValue>
-          );
-        },
-        YearsDropdown: (e) => {
-          return (
-            <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 unknown as React.ChangeEvent<HTMLSelectElement>)
-                  }
-                >
-                  {year.label}
-                </SimpleSelectItem>
-              ))}
-            </SimpleSelectValue>
-          );
-        },
-        ...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",
-        ),
-        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`,
-        outside: `[&_button]:!bg-transparent [&_button]:!text-content-system-global-disabled`,
-        range_start: `rounded-l-[8px] !bg-background-system-action-secondary-hover`,
-        range_end: `rounded-r-[8px] !bg-background-system-action-secondary-hover`,
-        range_middle: `!bg-background-system-action-secondary-hover [&_button]:!border-none [&_button]:!bg-transparent`,
-        weekdays: `!text-content-presentation-global-primary !text-[12px]`,
-        week_number: `!text-content-presentation-global-highlight-darkback !text-[12px] !px-1`,
-        month_caption: `flex items-center justify-center`,
-        caption_label: `!text-content-presentation-global-primary !text-[14px] !pt-[2px]`,
-        months: `flex items-end justify-center gap-4 flex-wrap`,
-        ...classNames,
-      }}
-      {...props}
-    />
-  );
-};
-Calendar.displayName = "Calendar";
-
-export { Calendar };

package/apps/lib/components/Card.tsx

@@ -1,95 +0,0 @@
-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";
-
-export const cardStyles = cva(
-  [
-    "flex flex-col justify-start",
-    // `radius/xl` is 12px — the same value this literal had, now taken from the shared scale.
-    "gap-2 rounded-radius-xl 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(cardStyles({ variant }), className)} />
-  );
-};
-
-interface GeneralProps extends HTMLAttributes<HTMLHeadingElement> {}
-
-export const CardHeader = ({ className, ...props }: GeneralProps) => {
-  return (
-    <div
-      {...props}
-      className={cn(
-        "text-content-presentation-global-primary m-0 typography-headers-medium-semibold",
-        className,
-      )}
-    ></div>
-  );
-};
-
-export const CardDescription = ({ className, ...props }: GeneralProps) => {
-  return (
-    <div
-      {...props}
-      className={cn(
-        "text-content-presentation-global-primary m-0 typography-body-medium-semibold",
-        className,
-      )}
-    ></div>
-  );
-};
-
-export const CardContent = ({ className, ...props }: GeneralProps) => {
-  return (
-    <section
-      {...props}
-      className={cn("flex gap-1 flex-col items-start flex-1", className)}
-    ></section>
-  );
-};

package/apps/lib/components/Checkbox.tsx

@@ -1,42 +0,0 @@
-"use client";
-import { cn } from "../utils/cn";
-import { cva } from "class-variance-authority";
-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]",
-    "flex items-center justify-center transition-colors",
-    "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",
-    "data-[state=checked]:bg-blue-sparkle-600 data-[state=checked]:border-blue-sparkle-600",
-    "hover:border-border-presentation-action-hover",
-  ],
-  {
-    variants: {
-      size: {
-        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)}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator>
-      <i className="ri-check-line text-white" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;