npm - torch-glare - Versions diffs - 1.3.0 → 1.4.0 - Mend

torch-glare 1.3.0 → 1.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/apps/lib/components/Button.tsx +115 -64
package/apps/lib/components/SectionCard.tsx +71 -0
package/apps/lib/components/Stepper.tsx +374 -0
package/apps/lib/components/Timeline.tsx +283 -0
package/apps/lib/utils/types.ts +8 -4
package/package.json +1 -1

package/apps/lib/components/Button.tsx CHANGED Viewed

@@ -5,15 +5,16 @@ import { cn } from "../utils/cn";
 import { ButtonVariant, Themes } from "../utils/types";
 interface Props
-  extends ButtonHTMLAttributes<HTMLButtonElement>,
-  VariantProps<typeof buttonVariants> {
+  extends
+    ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
   is_loading?: boolean;
   disabled?: boolean;
   asChild?: boolean;
   variant?: ButtonVariant;
   as?: React.ElementType;
-  theme?: Themes
-  containerClassName?: string
+  theme?: Themes;
+  containerClassName?: string;
 }
 export const Button = forwardRef<HTMLButtonElement, Props>(
   (
@@ -32,7 +33,7 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
       containerClassName,
       ...props
     },
-    ref
+    ref,
   ) => {
     const Component = asChild ? Slot : Tag;
@@ -51,34 +52,45 @@ export const Button = forwardRef<HTMLButtonElement, Props>(
             buttonType,
             disabled,
           }),
-          className
+          className,
         )}
       >
         {asChild ? (
           React.cloneElement(
             children as React.ReactElement,
             {},
-            <div className={cn("px-[3px] flex items-center justify-center gap-[3px] has-[>i]:p-0", containerClassName)}>
+            <div
+              className={cn(
+                "flex items-center justify-center [&>:is(i,svg):first-child]:mr-[3px] [&>:is(i,svg):last-child]:ml-[3px] [&>:is(i,svg):only-child]:m-0 [&:has(>:is(i,svg):last-child):not(:has(>:is(i,svg):first-child))]:pl-[6px] [&:has(>:is(i,svg):first-child):not(:has(>:is(i,svg):last-child))]:pr-[6px]",
+                containerClassName,
+              )}
+            >
               {(children as React.ReactElement<any>).props.children}
               {is_loading && <LoadingIcon size={size} />}
-            </div>
+            </div>,
           )
         ) : (
-          <div className={cn("px-[3px] flex items-center justify-center gap-[3px] has-[>i]:p-0", containerClassName)}>
+          <div
+            className={cn(
+              "flex items-center justify-center [&>:is(i,svg):first-child]:mr-[3px] [&>:is(i,svg):last-child]:ml-[3px] [&>:is(i,svg):only-child]:m-0 [&:has(>:is(i,svg):last-child):not(:has(>:is(i,svg):first-child))]:pl-[6px] [&:has(>:is(i,svg):first-child):not(:has(>:is(i,svg):last-child))]:pr-[6px]",
+              containerClassName,
+            )}
+          >
             {children}
             {is_loading && <LoadingIcon size={size} />}
           </div>
         )}
       </Component>
     );
-  }
+  },
 );
-Button.displayName = "Button"
+Button.displayName = "Button";
-export function LoadingIcon({ size, className }: {
+export function LoadingIcon({
+  size,
+  className,
+}: {
   size?: "S" | "M" | "L" | "XL" | null;
   className?: string;
 }) {
@@ -88,7 +100,7 @@ export function LoadingIcon({ size, className }: {
         S: "w-[12px] h-[12px]",
         M: "w-[18px] h-[18px]",
         L: "w-[20px] h-[20px]",
-        XL: "w-[20px] h-[20px]"
+        XL: "w-[20px] h-[20px]",
       },
     },
     defaultVariants: {
@@ -115,91 +127,130 @@ export function LoadingIcon({ size, className }: {
   );
 }
 export const buttonVariants = cva(
   "flex items-center whitespace-nowrap justify-center  transition-[background,color] duration-200 ease-in-out border border-transparent outline-none leading-none [&-i]:!leading-none",
   {
     variants: {
       variant: {
-        // fucus styles for medium screens and above
+        // Sec variants: base = button-secondary, hover picks up fill color
         PrimeStyle: [
-          "bg-background-presentation-action-secondary",
+          "bg-background-presentation-button-secondary",
           "text-content-presentation-action-light-primary",
-          "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-action-hover",
-          "focus:lg:focus:md:border lg:focus:md:border-border-presentation-state-focus", // Focus style only for medium screens and above
-          "active:bg-background-presentation-action-hover active:text-content-presentation-action-hover",
+          "hover:bg-background-presentation-button-hover",
+          "hover:text-content-presentation-global-hover",
+          "focus:lg:focus:md:border lg:focus:md:border-border-presentation-state-focus",
+          "active:bg-background-presentation-button-hover active:text-content-presentation-global-hover",
         ],
-        BlueSecStyle: [
-          "bg-background-presentation-action-secondary",
+        BluSecStyle: [
+          "bg-background-presentation-button-secondary",
           "text-content-presentation-action-light-primary",
-          "hover:bg-background-presentation-state-information-primary",
-          "hover:text-content-presentation-action-hover",
+          "hover:bg-background-presentation-button-fill-blue-primary",
+          "hover:text-content-presentation-global-hover",
           "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "active:bg-background-presentation-state-information-primary active:text-content-presentation-action-hover",
+          "active:bg-background-presentation-button-fill-blue-primary active:text-content-presentation-global-hover",
         ],
         YelSecStyle: [
-          "bg-background-presentation-action-secondary",
+          "bg-background-presentation-button-secondary",
           "text-content-presentation-action-light-primary",
-          "hover:bg-background-presentation-state-warning-primary",
+          "hover:bg-background-presentation-button-fill-yellow-primary",
           "hover:text-content-presentation-action-light-primary",
           "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "active:bg-background-presentation-state-warning-primary active:text-content-presentation-action-light-primary",
+          "active:bg-background-presentation-button-fill-yellow-primary active:text-content-presentation-action-light-primary",
         ],
         RedSecStyle: [
-          "bg-background-presentation-action-secondary",
+          "bg-background-presentation-button-secondary",
           "text-content-presentation-action-light-primary",
-          "hover:bg-background-presentation-state-negative-primary",
-          "hover:text-content-presentation-action-hover",
+          "hover:bg-background-presentation-button-fill-red-primary",
+          "hover:text-content-presentation-global-hover",
           "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "active:bg-background-presentation-state-negative-primary active:text-content-presentation-action-hover",
+          "active:bg-background-presentation-button-fill-red-primary active:text-content-presentation-global-hover",
         ],
         BorderStyle: [
           "text-content-presentation-action-light-primary",
           "border border-border-presentation-action-disabled",
-          "bg-background-presentation-action-borderstyle",
-          "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-action-hover",
+          "bg-background-presentation-button-borderstyle",
+          "hover:bg-background-presentation-button-hover",
+          "hover:text-content-presentation-global-hover",
           "focus:lg:border focus:lg:border-border-presentation-state-focus",
           "focus:lg:text-content-presentation-action-light-primary",
-          "focus:hover:lg:text-content-presentation-action-hover",
-          "active:bg-background-presentation-action-hover active:text-content-presentation-action-hover",
+          "focus:hover:lg:text-content-presentation-global-hover",
+          "active:bg-background-presentation-button-hover active:text-content-presentation-global-hover",
         ],
+        // Cont variants: transparent base, hover shows button-contstyle-hover
         PrimeContStyle: [
           "text-content-presentation-action-light-primary",
           "border-transparent bg-transparent",
-          "hover:bg-background-presentation-action-contstyle-hover",
+          "hover:bg-background-presentation-button-contstyle-hover",
           "hover:text-content-presentation-action-light-primary",
           "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "focus:lg:bg-background-presentation-action-borderstyle",
-          "active:bg-background-presentation-action-contstyle-hover active:text-content-presentation-action-light-primary",
+          "focus:lg:bg-background-presentation-button-borderstyle",
+          "active:bg-background-presentation-button-contstyle-hover active:text-content-presentation-action-light-primary",
         ],
-        BlueContStyle: [
+        BluContStyle: [
           "text-content-presentation-action-light-primary",
           "border-transparent bg-transparent",
-          "hover:bg-background-presentation-action-contstyle-hover",
-          "hover:text-content-presentation-action-information-hover",
+          "hover:bg-background-presentation-button-contstyle-hover",
+          "hover:text-content-presentation-global-information-hover",
           "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "focus:lg:bg-background-presentation-action-borderstyle",
-          "active:bg-background-presentation-action-contstyle-hover active:text-content-presentation-action-information-hover",
+          "focus:lg:bg-background-presentation-button-borderstyle",
+          "active:bg-background-presentation-button-contstyle-hover active:text-content-presentation-global-information-hover",
         ],
         RedContStyle: [
           "text-content-presentation-action-light-primary",
           "border-transparent bg-transparent",
-          "hover:bg-background-presentation-action-contstyle-hover",
-          "hover:text-content-presentation-action-negative-hover",
+          "hover:bg-background-presentation-button-contstyle-hover",
+          "hover:text-content-presentation-global-negative-hover",
+          "focus:lg:border focus:lg:border-border-presentation-state-focus",
+          "focus:lg:bg-background-presentation-button-borderstyle",
+          "active:bg-background-presentation-button-contstyle-hover active:text-content-presentation-global-negative-hover",
+        ],
+        // Col variants: filled solid color base, hover deepens to -secondary
+        PrimeColStyle: [
+          "bg-background-presentation-button-primary",
+          "text-content-presentation-global-primary-inverse",
+          "hover:bg-background-presentation-button-hover",
+          "hover:text-content-presentation-global-primary-inverse",
+          "focus:lg:border focus:lg:border-border-presentation-state-focus",
+          "active:bg-background-presentation-button-hover active:text-content-presentation-global-primary-inverse",
+        ],
+        BluColStyle: [
+          "bg-background-presentation-button-fill-blue-primary",
+          "text-content-presentation-action-dark-primary",
+          "hover:bg-background-presentation-button-fill-blue-secondary",
+          "hover:text-content-presentation-action-dark-primary",
+          "focus:lg:border focus:lg:border-border-presentation-state-focus",
+          "active:bg-background-presentation-button-fill-blue-secondary active:text-content-presentation-action-dark-primary",
+        ],
+        RedColStyle: [
+          "bg-background-presentation-button-fill-red-primary",
+          "text-content-presentation-action-dark-primary",
+          "hover:bg-background-presentation-button-fill-red-secondary",
+          "hover:text-content-presentation-action-dark-primary",
+          "focus:lg:border focus:lg:border-border-presentation-state-focus",
+          "active:bg-background-presentation-button-fill-red-secondary active:text-content-presentation-action-dark-primary",
+        ],
+        GreenColStyle: [
+          "bg-background-presentation-button-fill-green-primary",
+          "text-content-presentation-action-dark-primary",
+          "hover:bg-background-presentation-button-fill-green-secondary",
+          "hover:text-content-presentation-action-dark-primary",
+          "focus:lg:border focus:lg:border-border-presentation-state-focus",
+          "active:bg-background-presentation-button-fill-green-secondary active:text-content-presentation-action-dark-primary",
+        ],
+        YelColStyle: [
+          "bg-background-presentation-button-fill-yellow-primary",
+          "text-content-presentation-global-primary",
+          "hover:bg-background-presentation-button-fill-yellow-secondary",
+          "hover:text-content-presentation-global-primary",
           "focus:lg:border focus:lg:border-border-presentation-state-focus",
-          "focus:lg:bg-background-presentation-action-borderstyle",
-          "active:bg-background-presentation-action-contstyle-hover active:text-content-presentation-action-negative-hover",
+          "active:bg-background-presentation-button-fill-yellow-secondary active:text-content-presentation-global-primary",
         ],
       },
       size: {
-        S: "h-[22px] px-[6px] typography-body-small-medium rounded-[4px] [&_i]:text-[12px]",
-        M: "h-[28px] px-[14px] typography-body-large-medium rounded-[4px] [&_i]:text-[18px]",
-        L: "h-[34px] px-[22px] typography-body-large-medium rounded-[6px] [&_i]:text-[20px]",
-        XL: "h-[40px] px-[30px] typography-headers-medium-medium rounded-[6px] [&_i]:text-[22px]",
+        S: "h-[22px] py-[2px] px-[6px] typography-body-small-medium rounded-[4px] [&_i]:text-[12px]",
+        M: "h-[28px] py-[2px] px-[14px] typography-body-large-medium rounded-[6px] [&_i]:text-[18px]",
+        L: "h-[34px] py-[5px] px-[22px] typography-body-large-medium rounded-[8px] [&_i]:text-[20px]",
+        XL: "h-[40px] py-[8px] px-[30px] typography-headers-medium-medium rounded-[8px] [&_i]:text-[22px]",
       },
       is_loading: {
         true: "[&_i]:hidden",
@@ -222,12 +273,12 @@ export const buttonVariants = cva(
         is_loading: true,
         className: [
           "cursor-wait",
-          "bg-background-presentation-action-hover",
-          "text-content-presentation-action-hover",
-          "hover:bg-background-presentation-action-hover",
-          "hover:text-content-presentation-action-hover",
+          "bg-background-presentation-button-hover",
+          "text-content-presentation-global-hover",
+          "hover:bg-background-presentation-button-hover",
+          "hover:text-content-presentation-global-hover",
           "focus:lg:border focus:lg:border-transparent",
-          "active:bg-background-presentation-action-hover active:text-content-presentation-action-hover",
+          "active:bg-background-presentation-button-hover active:text-content-presentation-global-hover",
         ],
       },
       {
@@ -235,7 +286,7 @@ export const buttonVariants = cva(
         className: [
           "cursor-not-allowed",
           "pointer-events-none",
-          "bg-background-presentation-action-disabled",
+          "bg-background-presentation-button-disabled",
           "text-content-presentation-state-disabled",
           "border-transparent",
         ],
@@ -261,5 +312,5 @@ export const buttonVariants = cva(
         className: "w-[40px] h-[40px] p-0 leading-[0]",
       },
     ],
-  }
+  },
 );

package/apps/lib/components/SectionCard.tsx ADDED Viewed

@@ -0,0 +1,71 @@
+import { forwardRef, HTMLAttributes, ReactNode } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../utils/cn";
+const titleBadge = cva(
+  "flex pt-2 pb-2 pl-[16px] pr-[22px] justify-center items-center gap-[6px] rounded-[10px] self-start typography-headers-medium-medium text-[#F4F4F4]",
+  {
+    variants: {
+      color: {
+        Blue: "bg-blue-sparkle-900",
+        Yellow: "bg-yellow-950",
+        Green: "bg-green-cyan-900",
+        Red: "bg-medium-red-900",
+        Orange: "bg-red-orange-900",
+        Purple: "bg-violet-900",
+        Pink: "bg-medium-violet-red-900",
+        Gray: "bg-background-presentation-button-primary",
+      },
+    },
+    defaultVariants: { color: "Blue" },
+  },
+);
+export type SectionColor = NonNullable<VariantProps<typeof titleBadge>["color"]>;
+export interface SectionCardProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  color?: SectionColor;
+  title?: ReactNode;
+  containerClassName?: string;
+  headerClassName?: string;
+  bodyClassName?: string;
+}
+export const SectionCard = forwardRef<HTMLDivElement, SectionCardProps>(
+  (
+    {
+      children,
+      color,
+      title,
+      className,
+      containerClassName,
+      headerClassName,
+      bodyClassName,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex w-[1100px] pt-[6px] pb-[24px] px-0 flex-col rounded-[16px] bg-background-presentation-form-base shadow-[0_0_32px_2px_rgba(0,0,0,0.05)]",
+          className,
+          containerClassName,
+        )}
+        {...props}
+      >
+        {title && (
+          <div className={cn("flex px-[6px] flex-col gap-[10px]", headerClassName)}>
+            <div className={cn(titleBadge({ color }))}>{title}</div>
+          </div>
+        )}
+        <div className={cn("flex px-[42px] flex-col gap-[2px]", bodyClassName)}>
+          {children}
+        </div>
+      </div>
+    );
+  },
+);
+SectionCard.displayName = "SectionCard";

package/apps/lib/components/Stepper.tsx ADDED Viewed

@@ -0,0 +1,374 @@
+"use client";
+import React, {
+  forwardRef,
+  HTMLAttributes,
+  ReactNode,
+  createContext,
+  useContext,
+} from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../utils/cn";
+import { Themes } from "../utils/types";
+// ─── Context ─────────────────────────────────────────────────────────────────
+interface StepperContextValue {
+  activeStep: number;
+  orientation: "horizontal" | "vertical";
+  size: "S" | "M" | "L";
+}
+const StepperContext = createContext<StepperContextValue>({
+  activeStep: 0,
+  orientation: "horizontal",
+  size: "M",
+});
+const useStepperContext = () => useContext(StepperContext);
+// ─── Stepper Root ────────────────────────────────────────────────────────────
+const stepperStyles = cva(["flex gap-0"], {
+  variants: {
+    orientation: {
+      horizontal: "flex-row items-start",
+      vertical: "flex-col",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+  },
+});
+interface StepperProps
+  extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof stepperStyles> {
+  theme?: Themes;
+  activeStep?: number;
+  size?: "S" | "M" | "L";
+}
+const Stepper = forwardRef<HTMLDivElement, StepperProps>(
+  (
+    {
+      className,
+      orientation = "horizontal",
+      theme,
+      activeStep = 0,
+      size = "M",
+      ...props
+    },
+    ref,
+  ) => (
+    <StepperContext.Provider
+      value={{
+        activeStep,
+        orientation: orientation ?? "horizontal",
+        size: size ?? "M",
+      }}
+    >
+      <div
+        ref={ref}
+        data-theme={theme}
+        data-orientation={orientation}
+        className={cn(stepperStyles({ orientation }), className)}
+        {...props}
+      />
+    </StepperContext.Provider>
+  ),
+);
+Stepper.displayName = "Stepper";
+// ─── Step ────────────────────────────────────────────────────────────────────
+interface StepProps extends HTMLAttributes<HTMLDivElement> {
+  index?: number;
+  isCompleted?: boolean;
+  isActive?: boolean;
+  isError?: boolean;
+}
+const Step = forwardRef<HTMLDivElement, StepProps>(
+  (
+    {
+      className,
+      index = 0,
+      isCompleted,
+      isActive,
+      isError,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const { activeStep, orientation } = useStepperContext();
+    const computedActive = isActive ?? index === activeStep;
+    const computedCompleted = isCompleted ?? index < activeStep;
+    const computedError = isError ?? false;
+    return (
+      <div
+        ref={ref}
+        data-active={computedActive || undefined}
+        data-completed={computedCompleted || undefined}
+        data-error={computedError || undefined}
+        data-orientation={orientation}
+        className={cn(
+          "flex group/step",
+          orientation === "horizontal"
+            ? "shrink-0 flex-col items-center gap-2"
+            : "flex-row gap-3",
+          className,
+        )}
+        {...props}
+      >
+        {React.Children.map(children, (child) => {
+          if (!React.isValidElement(child)) return child;
+          return React.cloneElement(child as React.ReactElement<any>, {
+            _active: computedActive,
+            _completed: computedCompleted,
+            _error: computedError,
+            _index: index,
+          });
+        })}
+      </div>
+    );
+  },
+);
+Step.displayName = "Step";
+// ─── Step Indicator ──────────────────────────────────────────────────────────
+const stepIndicatorStyles = cva(
+  [
+    "flex items-center justify-center shrink-0 rounded-full",
+    "border",
+    "transition-all duration-200 ease-in-out",
+    "typography-body-small-medium",
+    "[&_i]:leading-none [&_i]:flex [&_i]:items-center [&_i]:justify-center",
+  ],
+  {
+    variants: {
+      state: {
+        pending: [
+          "bg-background-presentation-action-disabled",
+          "border-border-presentation-action-disabled",
+          "text-content-presentation-state-disabled",
+        ],
+        active: [
+          "bg-background-presentation-state-information-primary",
+          "border-border-presentation-state-focus",
+          "text-content-presentation-state-information",
+        ],
+        completed: [
+          "bg-background-presentation-state-success-primary",
+          "border-border-presentation-state-success",
+          "text-content-presentation-state-success",
+        ],
+        error: [
+          "bg-background-presentation-state-negative-primary",
+          "border-border-presentation-state-negative",
+          "text-content-presentation-state-negative",
+        ],
+      },
+      size: {
+        S: "w-[22px] h-[22px] text-[10px] [&_i]:text-[12px]",
+        M: "w-[28px] h-[28px] text-[12px] [&_i]:text-[14px]",
+        L: "w-[34px] h-[34px] text-[14px] [&_i]:text-[16px]",
+      },
+    },
+    defaultVariants: {
+      state: "pending",
+      size: "M",
+    },
+  },
+);
+interface StepIndicatorProps extends HTMLAttributes<HTMLDivElement> {
+  icon?: ReactNode;
+  completedIcon?: ReactNode;
+  errorIcon?: ReactNode;
+  _active?: boolean;
+  _completed?: boolean;
+  _error?: boolean;
+  _index?: number;
+}
+const StepIndicator = forwardRef<HTMLDivElement, StepIndicatorProps>(
+  (
+    {
+      className,
+      icon,
+      completedIcon,
+      errorIcon,
+      _active,
+      _completed,
+      _error,
+      _index = 0,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const { size } = useStepperContext();
+    const state = _error
+      ? "error"
+      : _completed
+        ? "completed"
+        : _active
+          ? "active"
+          : "pending";
+    const renderContent = () => {
+      if (_error && errorIcon) return errorIcon;
+      if (_error) return <i className="ri-close-line" />;
+      if (_completed && completedIcon) return completedIcon;
+      if (_completed) return <i className="ri-check-line" />;
+      if (icon) return icon;
+      if (children) return children;
+      return _index + 1;
+    };
+    return (
+      <div
+        ref={ref}
+        className={cn(stepIndicatorStyles({ state, size }), className)}
+        {...props}
+      >
+        {renderContent()}
+      </div>
+    );
+  },
+);
+StepIndicator.displayName = "StepIndicator";
+// ─── Step Connector (the line between steps) ────────────────────────────────
+const connectorStyles = cva(["transition-all duration-200 ease-in-out"], {
+  variants: {
+    orientation: {
+      horizontal: "h-[2px] flex-1 mx-2 mt-[13px]",
+      vertical: "w-[2px] flex-1 min-h-[24px] my-2",
+    },
+    state: {
+      pending: "bg-border-presentation-action-disabled",
+      completed: "bg-border-presentation-state-focus",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    state: "pending",
+  },
+  compoundVariants: [
+    {
+      orientation: "horizontal",
+      className: "self-start",
+    },
+  ],
+});
+interface StepConnectorProps extends HTMLAttributes<HTMLDivElement> {
+  _completed?: boolean;
+  _active?: boolean;
+  _error?: boolean;
+  _index?: number;
+}
+const StepConnector = forwardRef<HTMLDivElement, StepConnectorProps>(
+  (
+    { className, _completed, _active: _a, _error: _e, _index: _i, ...props },
+    ref,
+  ) => {
+    const { orientation } = useStepperContext();
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          connectorStyles({
+            orientation,
+            state: _completed ? "completed" : "pending",
+          }),
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+StepConnector.displayName = "StepConnector";
+// ─── Step Label ──────────────────────────────────────────────────────────────
+interface StepLabelProps extends HTMLAttributes<HTMLDivElement> {
+  _active?: boolean;
+  _completed?: boolean;
+  _error?: boolean;
+  _index?: number;
+}
+const StepLabel = forwardRef<HTMLDivElement, StepLabelProps>(
+  ({ className, _active, _completed, _error, _index: _i, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "typography-body-small-medium transition-colors duration-200 ease-in-out",
+        _active
+          ? "text-content-presentation-state-information"
+          : _error
+            ? "text-content-presentation-state-negative"
+            : _completed
+              ? "text-content-presentation-global-primary"
+              : "text-content-presentation-state-disabled",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+StepLabel.displayName = "StepLabel";
+// ─── Step Description ────────────────────────────────────────────────────────
+interface StepDescriptionProps extends HTMLAttributes<HTMLDivElement> {
+  _active?: boolean;
+  _completed?: boolean;
+  _error?: boolean;
+  _index?: number;
+}
+const StepDescription = forwardRef<HTMLDivElement, StepDescriptionProps>(
+  (
+    { className, _active, _completed: _c, _error: _e, _index: _i, ...props },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      className={cn(
+        "typography-body-small-regular",
+        _active
+          ? "text-content-presentation-global-secondary"
+          : "text-content-presentation-state-disabled",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+StepDescription.displayName = "StepDescription";
+// ─── Exports ─────────────────────────────────────────────────────────────────
+export {
+  Stepper,
+  Step,
+  StepIndicator,
+  StepConnector,
+  StepLabel,
+  StepDescription,
+  stepperStyles,
+  stepIndicatorStyles,
+  connectorStyles,
+};

package/apps/lib/components/Timeline.tsx ADDED Viewed

@@ -0,0 +1,283 @@
+import React, { forwardRef, HTMLAttributes, ReactNode } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../utils/cn";
+import { Themes } from "../utils/types";
+// ─── Timeline Root ───────────────────────────────────────────────────────────
+const timelineStyles = cva(["flex gap-0"], {
+  variants: {
+    orientation: {
+      vertical: "flex-col",
+      horizontal: "flex-row items-start",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+});
+interface TimelineProps
+  extends HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof timelineStyles> {
+  theme?: Themes;
+}
+const Timeline = forwardRef<HTMLDivElement, TimelineProps>(
+  ({ className, orientation, theme, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-theme={theme}
+      data-orientation={orientation ?? "vertical"}
+      className={cn(timelineStyles({ orientation }), className)}
+      {...props}
+    />
+  )
+);
+Timeline.displayName = "Timeline";
+// ─── Timeline Item ───────────────────────────────────────────────────────────
+const timelineItemStyles = cva(["flex group/item"], {
+  variants: {
+    orientation: {
+      vertical: "flex-row gap-3",
+      horizontal: "flex-col items-center gap-3",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+});
+interface TimelineItemProps extends HTMLAttributes<HTMLDivElement> {
+  orientation?: "vertical" | "horizontal";
+}
+const TimelineItem = forwardRef<HTMLDivElement, TimelineItemProps>(
+  ({ className, orientation = "vertical", ...props }, ref) => (
+    <div
+      ref={ref}
+      data-orientation={orientation}
+      className={cn(timelineItemStyles({ orientation }), className)}
+      {...props}
+    />
+  )
+);
+TimelineItem.displayName = "TimelineItem";
+// ─── Timeline Indicator ──────────────────────────────────────────────────────
+const indicatorStyles = cva(
+  [
+    "flex items-center justify-center shrink-0 rounded-full",
+    "border",
+    "transition-all duration-200 ease-in-out",
+    "[&_i]:leading-none [&_i]:flex [&_i]:items-center [&_i]:justify-center",
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-background-presentation-action-secondary",
+          "border-border-presentation-action-primary",
+          "text-content-presentation-action-light-primary",
+        ],
+        active: [
+          "bg-background-presentation-state-information-primary",
+          "border-border-presentation-state-focus",
+          "text-content-presentation-state-information",
+        ],
+        completed: [
+          "bg-background-presentation-state-success-primary",
+          "border-border-presentation-state-success",
+          "text-content-presentation-state-success",
+        ],
+        error: [
+          "bg-background-presentation-state-negative-primary",
+          "border-border-presentation-state-negative",
+          "text-content-presentation-state-negative",
+        ],
+        warning: [
+          "bg-background-presentation-state-warning-primary",
+          "border-border-presentation-state-warning",
+          "text-content-presentation-state-warning",
+        ],
+      },
+      size: {
+        S: "w-[22px] h-[22px] [&_i]:text-[12px]",
+        M: "w-[28px] h-[28px] [&_i]:text-[14px]",
+        L: "w-[34px] h-[34px] [&_i]:text-[16px]",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "M",
+    },
+  }
+);
+interface TimelineIndicatorProps
+  extends HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof indicatorStyles> {
+  icon?: ReactNode;
+}
+const TimelineIndicator = forwardRef<HTMLDivElement, TimelineIndicatorProps>(
+  ({ className, variant, size, icon, children, ...props }, ref) => {
+    const renderContent = () => {
+      if (icon) return icon;
+      if (children) return children;
+      if (variant === "completed") return <i className="ri-check-line" />;
+      if (variant === "error") return <i className="ri-close-line" />;
+      if (variant === "warning") return <i className="ri-alert-line" />;
+      return <span className="block w-[6px] h-[6px] rounded-full bg-current" />;
+    };
+    return (
+      <div
+        ref={ref}
+        className={cn(indicatorStyles({ variant, size }), className)}
+        {...props}
+      >
+        {renderContent()}
+      </div>
+    );
+  }
+);
+TimelineIndicator.displayName = "TimelineIndicator";
+// ─── Timeline Separator (the connecting line) ────────────────────────────────
+const separatorStyles = cva(
+  [
+    "bg-border-presentation-global-primary",
+    "transition-all duration-200 ease-in-out",
+  ],
+  {
+    variants: {
+      orientation: {
+        vertical: "w-[1px] flex-1 min-h-[24px] mx-auto",
+        horizontal: "h-[1px] flex-1 min-w-[24px] my-auto",
+      },
+      active: {
+        true: "bg-border-presentation-state-focus",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+      active: false,
+    },
+  }
+);
+interface TimelineSeparatorProps
+  extends HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof separatorStyles> {}
+const TimelineSeparator = forwardRef<HTMLDivElement, TimelineSeparatorProps>(
+  ({ className, orientation = "vertical", active, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(separatorStyles({ orientation, active }), className)}
+      {...props}
+    />
+  )
+);
+TimelineSeparator.displayName = "TimelineSeparator";
+// ─── Timeline Connector (indicator + line container) ─────────────────────────
+interface TimelineConnectorProps extends HTMLAttributes<HTMLDivElement> {
+  orientation?: "vertical" | "horizontal";
+}
+const TimelineConnector = forwardRef<HTMLDivElement, TimelineConnectorProps>(
+  ({ className, orientation = "vertical", children, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "flex items-center",
+        orientation === "vertical"
+          ? "flex-col"
+          : "flex-row",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+);
+TimelineConnector.displayName = "TimelineConnector";
+// ─── Timeline Content ────────────────────────────────────────────────────────
+interface TimelineContentProps extends HTMLAttributes<HTMLDivElement> {}
+const TimelineContent = forwardRef<HTMLDivElement, TimelineContentProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "flex flex-col gap-1 pb-6 pt-[2px]",
+        "group-last/item:pb-0",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TimelineContent.displayName = "TimelineContent";
+// ─── Timeline Heading ────────────────────────────────────────────────────────
+interface TimelineHeadingProps extends HTMLAttributes<HTMLDivElement> {}
+const TimelineHeading = forwardRef<HTMLDivElement, TimelineHeadingProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "typography-body-medium-medium text-content-presentation-global-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TimelineHeading.displayName = "TimelineHeading";
+// ─── Timeline Description ────────────────────────────────────────────────────
+interface TimelineDescriptionProps extends HTMLAttributes<HTMLDivElement> {}
+const TimelineDescription = forwardRef<HTMLDivElement, TimelineDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(
+        "typography-body-small-regular text-content-presentation-global-secondary",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TimelineDescription.displayName = "TimelineDescription";
+// ─── Exports ─────────────────────────────────────────────────────────────────
+export {
+  Timeline,
+  TimelineItem,
+  TimelineIndicator,
+  TimelineSeparator,
+  TimelineConnector,
+  TimelineContent,
+  TimelineHeading,
+  TimelineDescription,
+  timelineStyles,
+  indicatorStyles,
+  separatorStyles,
+};

package/apps/lib/utils/types.ts CHANGED Viewed

@@ -2,11 +2,15 @@ export type Themes = "dark" | "light" | "default";
 export type ButtonVariant =
     | "PrimeStyle"
-    | "BlueSecStyle"
+    | "BluSecStyle"
     | "YelSecStyle"
     | "RedSecStyle"
     | "BorderStyle"
     | "PrimeContStyle"
-    | "BlueContStyle"
-    | "RedContStyle";
+    | "BluContStyle"
+    | "RedContStyle"
+    | "PrimeColStyle"
+    | "BluColStyle"
+    | "RedColStyle"
+    | "GreenColStyle"
+    | "YelColStyle";

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "torch-glare",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "type": "module",
   "license": "MIT",
   "files": [