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

torch-glare 1.2.9 → 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 (11) 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/TableDnDWrapper.ts +495 -0
package/apps/lib/components/TextEditor.tsx +53 -1
package/apps/lib/components/Timeline.tsx +283 -0
package/apps/lib/utils/types.ts +8 -4
package/dist/src/shared/getDependenciesAndInstallNestedComponents.d.ts.map +1 -1
package/dist/src/shared/getDependenciesAndInstallNestedComponents.js +18 -2
package/dist/src/shared/getDependenciesAndInstallNestedComponents.js.map +1 -1
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";