torch-glare 2.4.0 → 2.4.1

package/apps/lib/layouts/TreeSubLayout.tsx

@@ -1,4 +1,4 @@
-'use client';
+"use client";
 import { usePathname } from "next/navigation";
 import TabFormItem from "../components/TabFormItem";
 import { cn } from "../utils/cn";
@@ -32,7 +32,6 @@ export default function TreeSubLayout({
   ]);
   const { activeId } = useActiveTreeItem(allIds);
 
-
   return (
     <div
       className={cn(
@@ -58,8 +57,7 @@ export default function TreeSubLayout({
                   key={item.id}
                   href={`${item.id}`}
                   isActive={
-                    activeId === item.id ||
-                    item.subTree?.some((sub) => sub.id === activeId)
+                    activeId === item.id || item.subTree?.some((sub) => sub.id === activeId)
                   }
                   title={item?.title}
                   subTitles={item?.subTree?.map((sub) => ({
@@ -76,8 +74,6 @@ export default function TreeSubLayout({
   );
 }
 
-
-
 function TreeSection({
   href,
   isActive,
@@ -89,31 +85,21 @@ function TreeSection({
   title: string;
   subTitles?: { id: string; title: string; isActive?: boolean }[];
 }) {
-
   return (
-    <div
-      className={`flex flex-col items-start gap-[12px] w-full  transition-colors duration-200`}
-    >
-      <TabFormItem
-        componentType="tree"
-        active={isActive}
-        className={`w-full`}
-        asChild
-      >
-        <Link href={`#${href}`}>
-          {title}
-        </Link>
+    <div className={`flex flex-col items-start gap-[12px] w-full  transition-colors duration-200`}>
+      <TabFormItem componentType="tree" active={isActive} className={`w-full`} asChild>
+        <Link href={`#${href}`}>{title}</Link>
       </TabFormItem>
-      {subTitles && <div
-        className={`w-full h-[1px]
+      {subTitles && (
+        <div
+          className={`w-full h-[1px]
             bg-border-presentation-global-primary
         `}
-      ></div>}
-      {subTitles &&
+        ></div>
+      )}
+      {subTitles && (
         <div className="flex items-start flex-1 w-full pl-4">
-          <div
-            className={`w-[1px] h-full bg-border-presentation-global-primary`}
-          />
+          <div className={`w-[1px] h-full bg-border-presentation-global-primary`} />
           <div className="flex p-[4px_0px_4px_8px] flex-col items-start gap-1 w-full flex-1">
             {subTitles?.map((item) => (
               <TabFormItem
@@ -123,19 +109,16 @@ function TreeSection({
                 className="w-full"
                 asChild
               >
-                <Link href={`#${item.id}`}>
-                  {item.title}
-                </Link>
+                <Link href={`#${item.id}`}>{item.title}</Link>
               </TabFormItem>
             ))}
           </div>
         </div>
-      }
+      )}
     </div>
   );
 }
 
-
 export function HeaderPage({
   title,
   subTitle,
@@ -151,32 +134,35 @@ export function HeaderPage({
 }) {
   return (
     <div
-      className={cn("w-full h-fit transition-all duration-300 ease-in-out  lg:rounded-[8px_8px_0px_0px] lg:z-auto",
+      className={cn(
+        "w-full h-fit transition-all duration-300 ease-in-out  lg:rounded-[8px_8px_0px_0px] lg:z-auto",
         "bg-[linear-gradient(90deg,var(--blue-sparkle-600)_0px,rgba(44,45,46,1)_190px)] lg:bg-background-system-body-base",
         "pb-[2px] lg:pb-0",
-        className)}
+        className,
+      )}
     >
       <div className="w-full h-full flex flex-col justify-center items-start rounded-[6px_6px_0px_0px] transition-all duration-300 ease-in-out lg:bg-none lg:bg-background-system-body-base   lg:h-fit">
-        <div className="lg:hidden w-full bg-background-system-body-base px-[12px] h-[52px] flex justify-start items-center overflow-y-scroll border-b-[2px] border-[#2c2d2e]">
-        </div>
+        <div className="lg:hidden w-full bg-background-system-body-base px-[12px] h-[52px] flex justify-start items-center overflow-y-scroll border-b-[2px] border-[#2c2d2e]"></div>
         <div
           className={cn(
             `flex h-fit relative gap-2  items-center w-full lg:w-fit `,
             "bg-background-system-body-secondary lg:bg-transparent",
             "h-[52px] px-[16px]  lg:py-[16px] rtl:pr-4 ltr:pl-4 lg:h-[60px]",
-            className
+            className,
           )}
         >
           <h1 className="text-content-system-global-primary whitespace-nowrap leading-none typography-display-large-semibold z-20 text-left lg:typography-display-medium-regular lg:uppercase">
             {title}
           </h1>
-          <p className="hidden mb-[-6px] sm:block text-content-presentation-global-secondary typography-headers-medium-regular z-20 lg:uppercase">{subTitle}</p>
+          <p className="hidden mb-[-6px] sm:block text-content-presentation-global-secondary typography-headers-medium-regular z-20 lg:uppercase">
+            {subTitle}
+          </p>
           <div className="h-[24px] hidden w-[1px] bg-border-presentation-global-primary z-20 sm:block"></div>
         </div>
         <div
           className={cn(
             "w-full flex rtl:pl-4 items-center ltr:pr-4",
-            type === "space-between" && "justify-end"
+            type === "space-between" && "justify-end",
           )}
         >
           {children}

package/apps/lib/providers/ThemeProvider.tsx

@@ -1,11 +1,5 @@
-'use client';
-import {
-  createContext,
-  ReactNode,
-  useContext,
-  useEffect,
-  useState,
-} from "react";
+"use client";
+import { createContext, ReactNode, useContext, useEffect, useState } from "react";
 
 interface ThemeProps {
   theme: "light" | "dark" | "default";
@@ -30,14 +24,9 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
   const [theme, setTheme] = useState<"light" | "dark" | "default">(() => {
     if (typeof window !== "undefined" && document) {
       const mode =
-        (document.documentElement.getAttribute("data-theme") as
-          | "light"
-          | "dark"
-          | "default") || defaultTheme;
-      const storedTheme = localStorage.getItem("theme") as
-        | "light"
-        | "dark"
-        | "default";
+        (document.documentElement.getAttribute("data-theme") as "light" | "dark" | "default") ||
+        defaultTheme;
+      const storedTheme = localStorage.getItem("theme") as "light" | "dark" | "default";
       return storedTheme || mode || defaultTheme;
     }
     return defaultTheme;
@@ -45,9 +34,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
 
   const [themeMode, setThemeMode] = useState<"TORCH" | "CSS">(() => {
     if (typeof window !== "undefined") {
-      const storedThemeMode = localStorage.getItem("theme-mode") as
-        | "TORCH"
-        | "CSS";
+      const storedThemeMode = localStorage.getItem("theme-mode") as "TORCH" | "CSS";
       return storedThemeMode || defaultThemeMode;
     }
     return defaultThemeMode;
@@ -85,9 +72,7 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({
     themeMode,
   };
 
-  return (
-    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
-  );
+  return <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>;
 };
 
 export const useTheme = () => {
@@ -96,4 +81,4 @@ export const useTheme = () => {
     throw new Error("useTheme must be used within a ThemeProvider");
   }
   return context;
-};
+};