torch-glare 2.3.0 → 2.4.1

package/apps/lib/components/Form.tsx

@@ -1,191 +1,182 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
 import {
-    Controller,
-    FormProvider,
-    useFormContext,
-    type ControllerProps,
-    type FieldPath,
-    type FieldValues,
-} from "react-hook-form"
-
-import { cn } from "../utils/cn"
-import { Label } from "./Label"
-import { Themes } from "../utils/types"
-import { ReactNode } from "react"
-const Form = FormProvider
+  Controller,
+  FormProvider,
+  useFormContext,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form";
+
+import { cn } from "../utils/cn";
+import { Label } from "./Label";
+import { Themes } from "../utils/types";
+import { ReactNode } from "react";
+const Form = FormProvider;
 
 type FormFieldContextValue<
-    TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-    name: TName
-}
+  name: TName;
+};
 
-const FormFieldContext = React.createContext<FormFieldContextValue>(
-    {} as FormFieldContextValue
-)
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
 
 const FormField = <
-    TFieldValues extends FieldValues = FieldValues,
-    TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
-    ...props
+  ...props
 }: ControllerProps<TFieldValues, TName>) => {
-    return (
-        <FormFieldContext.Provider value={{ name: props.name }}>
-            <Controller {...props} />
-        </FormFieldContext.Provider>
-    )
-}
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
 
 const useFormField = () => {
-    const fieldContext = React.useContext(FormFieldContext)
-    const itemContext = React.useContext(FormItemContext)
-    const { getFieldState, formState } = useFormContext()
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
 
-    const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldState = getFieldState(fieldContext.name, formState);
 
-    if (!fieldContext) {
-        throw new Error("useFormField should be used within <FormField>")
-    }
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
 
-    const { id } = itemContext
+  const { id } = itemContext;
 
-    return {
-        id,
-        name: fieldContext.name,
-        formItemId: `${id}-form-item`,
-        formDescriptionId: `${id}-form-item-description`,
-        formMessageId: `${id}-form-item-message`,
-        ...fieldState,
-    }
-}
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
 
 type FormItemContextValue = {
-    id: string
-}
+  id: string;
+};
 
-const FormItemContext = React.createContext<FormItemContextValue>(
-    {} as FormItemContextValue
-)
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
 
-const FormItem = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-    const id = React.useId()
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
 
     return (
-        <FormItemContext.Provider value={{ id }}>
-            <div ref={ref} className={cn("space-y-2", className)} {...props} />
-        </FormItemContext.Provider>
-    )
-})
-FormItem.displayName = "FormItem"
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  },
+);
+FormItem.displayName = "FormItem";
 
 const FormLabel = React.forwardRef<
-    React.ElementRef<typeof LabelPrimitive.Root>,
-    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
-        label?: ReactNode; // main label
-        requiredLabel?: ReactNode; // normal text with required style
-        secondaryLabel?: ReactNode; // normal text with secondary style
-        as?: React.ElementType;
-        asChild?: boolean;
-        size?: "S" | "M" | "L";
-        variant?: "SystemStyle" | "PresentationStyle";
-        theme?: Themes
-        labelsClassName?: string;
-        labelDirections?: "vertical" | "horizontal";
-        childrenDirections?: "vertical" | "horizontal";
-    }
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
+    label?: ReactNode; // main label
+    requiredLabel?: ReactNode; // normal text with required style
+    secondaryLabel?: ReactNode; // normal text with secondary style
+    as?: React.ElementType;
+    asChild?: boolean;
+    size?: "S" | "M" | "L";
+    variant?: "SystemStyle" | "PresentationStyle";
+    theme?: Themes;
+    labelsClassName?: string;
+    labelDirections?: "vertical" | "horizontal";
+    childrenDirections?: "vertical" | "horizontal";
+  }
 >(({ className, ...props }, ref) => {
-    const { error, formItemId } = useFormField()
-
-    return (
-        <Label
-            ref={ref}
-            className={cn(error && "text-destructive", className)}
-            htmlFor={formItemId}
-            {...props}
-        />
-    )
-})
-FormLabel.displayName = "FormLabel"
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
 
 const FormControl = React.forwardRef<
-    React.ElementRef<typeof Slot>,
-    React.ComponentPropsWithoutRef<typeof Slot>
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-    const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
-
-    return (
-        <Slot
-            ref={ref}
-            id={formItemId}
-            aria-describedby={
-                !error
-                    ? `${formDescriptionId}`
-                    : `${formDescriptionId} ${formMessageId}`
-            }
-            aria-invalid={!!error}
-            {...props}
-        />
-    )
-})
-FormControl.displayName = "FormControl"
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
 
 const FormDescription = React.forwardRef<
-    HTMLParagraphElement,
-    React.HTMLAttributes<HTMLParagraphElement>
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-    const { formDescriptionId } = useFormField()
-
-    return (
-        <p
-            ref={ref}
-            id={formDescriptionId}
-            className={cn("text-[0.8rem] text-muted-foreground", className)}
-            {...props}
-        />
-    )
-})
-FormDescription.displayName = "FormDescription"
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
 
 const FormMessage = React.forwardRef<
-    HTMLParagraphElement,
-    React.HTMLAttributes<HTMLParagraphElement>
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-    const { error, formMessageId } = useFormField()
-    const body = error ? String(error?.message ?? "") : children
-
-    if (!body) {
-        return null
-    }
-
-    return (
-        <p
-            ref={ref}
-            id={formMessageId}
-            className={cn("text-[0.8rem] font-medium text-destructive", className)}
-            {...props}
-        >
-            {body}
-        </p>
-    )
-})
-FormMessage.displayName = "FormMessage"
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
 
 export {
-    useFormField,
-    Form,
-    FormItem,
-    FormLabel,
-    FormControl,
-    FormDescription,
-    FormMessage,
-    FormField,
-}
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};

package/apps/lib/components/FormStepper.tsx

@@ -1,12 +1,6 @@
 "use client";
 
-import React, {
-  forwardRef,
-  HTMLAttributes,
-  ReactNode,
-  createContext,
-  useContext,
-} from "react";
+import React, { forwardRef, HTMLAttributes, ReactNode, createContext, useContext } from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../utils/cn";
 import { Themes } from "../utils/types";
@@ -80,18 +74,14 @@ const formStepStyles = cva(
   },
 );
 
-interface FormStepProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, "type"> {
+interface FormStepProps extends Omit<HTMLAttributes<HTMLDivElement>, "type"> {
   index?: number;
   type?: FormStepperType;
   selected?: boolean;
 }
 
 const FormStep = forwardRef<HTMLDivElement, FormStepProps>(
-  (
-    { className, index = 0, type = "default", selected, children, ...props },
-    ref,
-  ) => {
+  ({ className, index = 0, type = "default", selected, children, ...props }, ref) => {
     const { activeStep } = useFormStepperContext();
     const isSelected = selected ?? index === activeStep;
 
@@ -105,7 +95,7 @@ const FormStep = forwardRef<HTMLDivElement, FormStepProps>(
       >
         {React.Children.map(children, (child) => {
           if (!React.isValidElement(child)) return child;
-          return React.cloneElement(child as React.ReactElement<any>, {
+          return React.cloneElement(child as React.ReactElement<Record<string, unknown>>, {
             _selected: isSelected,
             _type: type,
             _index: index,
@@ -196,33 +186,15 @@ interface FormStepIndicatorProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const FormStepIndicator = forwardRef<HTMLDivElement, FormStepIndicatorProps>(
-  (
-    {
-      className,
-      badgeIcon,
-      _selected,
-      _type = "default",
-      _index = 0,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
+  ({ className, badgeIcon, _selected, _type = "default", _index = 0, children, ...props }, ref) => {
     const showBadge = _type === "success" || _type === "negative";
     const defaultBadgeIcon =
-      _type === "success" ? (
-        <i className="ri-check-line" />
-      ) : (
-        <i className="ri-information-fill" />
-      );
+      _type === "success" ? <i className="ri-check-line" /> : <i className="ri-information-fill" />;
 
     return (
       <div
         ref={ref}
-        className={cn(
-          formStepIndicatorStyles({ type: _type, selected: !!_selected }),
-          className,
-        )}
+        className={cn(formStepIndicatorStyles({ type: _type, selected: !!_selected }), className)}
         {...props}
       >
         {children ?? _index + 1}
@@ -276,13 +248,11 @@ interface FormStepLabelProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const FormStepLabel = forwardRef<HTMLDivElement, FormStepLabelProps>(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} spread
   ({ className, _selected, _type: _t, _index: _i, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn(
-        formStepLabelStyles({ selected: !!_selected }),
-        className,
-      )}
+      className={cn(formStepLabelStyles({ selected: !!_selected }), className)}
       {...props}
     />
   ),

package/apps/lib/components/HeaderBar.tsx

@@ -0,0 +1,119 @@
+import React, { forwardRef } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../utils/cn";
+import { Themes } from "../utils/types";
+
+/**
+ * HeaderBar
+ *
+ * A variant-driven header chip showing two text pieces inside a single
+ * rounded container:
+ *  - `label` -> the colored emphasis pill (BADGE piece)
+ *  - `title` -> the plain text (PLAIN piece)
+ *
+ * The `variant` controls BOTH the colors AND the DOM order:
+ *  - "new"  / "edit"  -> [badge(label)] [plain(title)]   (badge on the LEFT)
+ *  - "detail"         -> [plain(title)] [badge(label)]    (badge on the RIGHT)
+ *
+ * Example usage:
+ *  - new:    <HeaderBar variant="new"    label="New"   title="sales iNVOICE" />
+ *  - edit:   <HeaderBar variant="edit"   label="edit"  title="sales iNVOICE" />
+ *  - detail: <HeaderBar variant="detail" label="de-344" title="sales iNVOICE" />
+ *            (renders plain "sales iNVOICE" on the LEFT, colored "de-344" on the RIGHT)
+ */
+
+// Inner row: order is reversed for "detail" so the badge ends up on the right.
+const rowStyles = cva(["flex", "items-center"], {
+  variants: {
+    variant: {
+      new: "flex-row",
+      edit: "flex-row",
+      detail: "flex-row-reverse",
+    },
+  },
+  defaultVariants: {
+    variant: "new",
+  },
+});
+
+// Colored pill holding `label`.
+const badgeStyles = cva(
+  ["flex", "h-8", "items-center", "justify-center", "gap-2.5", "rounded-lg", "px-1"],
+  {
+    variants: {
+      variant: {
+        new: "bg-blue-sparkle-alpha-50",
+        edit: "bg-orange-alpha-50",
+        detail: "bg-white-alpha-30",
+      },
+    },
+    defaultVariants: {
+      variant: "new",
+    },
+  },
+);
+
+// Text inside the colored pill.
+const badgeTextStyles = cva(
+  [
+    "font-sans",
+    "text-[28px]",
+    "font-[510]",
+    "leading-normal",
+    "uppercase",
+    "[font-feature-settings:'cv05'_on]",
+  ],
+  {
+    variants: {
+      variant: {
+        new: "text-blue-sparkle-200",
+        edit: "text-orange-200",
+        detail: "text-white-00",
+      },
+    },
+    defaultVariants: {
+      variant: "new",
+    },
+  },
+);
+
+interface HeaderBarProps
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof rowStyles> {
+  theme?: Themes;
+  /** The colored emphasis pill text. */
+  label: string;
+  /** The plain text. */
+  title: string;
+}
+
+const HeaderBar = forwardRef<HTMLDivElement, HeaderBarProps>(
+  ({ variant = "new", label, title, theme, className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-theme={theme}
+        className={cn(
+          "inline-flex flex-col items-start rounded-[14px] border border-black-600 bg-black-1000 p-1.5 shadow-[0_0_32px_2px_rgba(0,0,0,0.05),0_0_32px_2px_rgba(0,0,0,0.05)]",
+          className,
+        )}
+        {...props}
+      >
+        <div className={cn(rowStyles({ variant }))}>
+          <div className={cn(badgeStyles({ variant }))}>
+            <p className={cn(badgeTextStyles({ variant }))}>{label}</p>
+          </div>
+          <div className="flex h-8 items-center justify-center px-1.5">
+            <p className="font-sans text-[28px] font-[510] leading-normal uppercase text-white-00 [font-feature-settings:'cv05'_on]">
+              {title}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+HeaderBar.displayName = "HeaderBar";
+
+export default HeaderBar;
+export { HeaderBar };