torch-glare 2.5.5 → 2.6.0

package/apps/lib/layouts/CNLayout.tsx

@@ -1,372 +0,0 @@
-import React, { HTMLAttributes, ReactNode, ButtonHTMLAttributes } from "react";
-import { cn } from "../utils/cn";
-import { Themes } from "../utils/types";
-import { cva, VariantProps } from "class-variance-authority";
-import { Slot } from "@radix-ui/react-slot";
-import Counter from "../components/CountBadge";
-import { Tooltip } from "../components/Tooltip";
-
-interface LayoutProps extends HTMLAttributes<HTMLDivElement> {}
-function Layout({ ...props }: LayoutProps) {
-  return (
-    <div
-      {...props}
-      className="flex h-[100dvh] flex-1 lg:gap-[10px] bg-background-system-body-base lg:p-[16px]"
-    >
-      {props.children}
-    </div>
-  );
-}
-
-interface ContentProps extends HTMLAttributes<HTMLDivElement> {}
-function Body({ ...props }: ContentProps) {
-  return (
-    <main {...props} className={cn("flex flex-grow flex-1 overflow-y-auto", props.className)}>
-      <div className="flex lg:rounded-[12px] bg-background-system-body-tertiary shadow-[0px_0px_18px_0px_rgba(0,0,0,0.75)] flex-1 flex-grow lg:p-1">
-        <div className="relative lg:rounded-lg flex-1 flex-grow overflow-scroll  scrollbar-hide lg:p-[2px] lg:bg-[linear-gradient(143deg,var(--blue-sparkle-600)_0px,rgba(44,45,46,1)_55px)]">
-          <div
-            className="absolute top-[2px] w-[170px] rounded-t-[6px] z-10 lg:h-[60px] 
-            left-[2px] ltr:lg:bg-[linear-gradient(132deg,#0D0F4E_0%,#000_50%)]
-            rtl:right-[2px] rtl:left-[unset] rtl:lg:bg-[linear-gradient(-132deg,#0D0F4E_0%,#000_50%)]"
-          ></div>
-          {props.children}
-        </div>
-      </div>
-    </main>
-  );
-}
-
-interface SideBarProps extends HTMLAttributes<HTMLDivElement> {
-  iconButtons?: ReactNode;
-  headerChild?: ReactNode;
-  navigationChildren?: ReactNode;
-  footerChildren?: ReactNode;
-  children?: ReactNode;
-}
-function SideBar({
-  children,
-  footerChildren,
-  headerChild,
-  navigationChildren,
-  iconButtons,
-  ...props
-}: SideBarProps) {
-  return (
-    <aside
-      {...props}
-      className={cn(
-        "hidden w-[265px] p-1 flex-shrink-0 items-start rounded-xl bg-background-system-body-tertiary shadow-[0px_0px_18px_0px_rgba(0,0,0,0.75)] h-full lg:flex",
-        props.className,
-      )}
-    >
-      <div
-        className={cn(
-          "grid grid-rows-[56px_1fr] w-full rounded-lg border border-border-system-global-primary h-full gap-[1px]",
-          {
-            flex: children,
-          },
-        )}
-      >
-        {children ? (
-          children
-        ) : (
-          <>
-            <div className="bg-background-system-body-base w-full h-full rounded-t-lg flex justify-center items-center">
-              {headerChild}
-            </div>
-
-            <div className="grid grid-cols-[46px_1fr] gap-[1px] w-full h-full rounded-b-lg overflow-hidden">
-              {/* Icon Buttons Section */}
-              <div className="scrollbar-hide overflow-scroll flex flex-col justify-start items-center gap-[3px] w-[46px] h-full bg-background-system-body-base rounded-bl-lg rtl:rounded-br-lg rtl:rounded-bl-none">
-                {iconButtons}
-              </div>
-
-              {/* Navigation Section */}
-              <div className="scrollbar-hide h-full gap-[1px]  overflow-scroll grid grid-rows-[1fr_auto] grid-cols-1 rounded-br-lg rtl:rounded-bl-lg rtl:rounded-br-none">
-                <div className="flex flex-col h-full  overflow-scroll scrollbar-hide">
-                  <div className="flex flex-col gap-[1px] overflow-scroll scrollbar-hide">
-                    {Array.isArray(navigationChildren)
-                      ? navigationChildren.map((child, index) => (
-                          <SideBarChildContainer key={index}>{child}</SideBarChildContainer>
-                        ))
-                      : navigationChildren}
-                  </div>
-                  <SideBarChildContainer className="flex-1" />
-                </div>
-
-                <SideBarChildContainer className="p-1 pt-[8px]">
-                  {footerChildren}
-                </SideBarChildContainer>
-              </div>
-            </div>
-          </>
-        )}
-      </div>
-    </aside>
-  );
-}
-
-interface ChildProps extends HTMLAttributes<HTMLDivElement> {
-  theme?: Themes;
-}
-
-const SideBarChildContainer = ({ theme, ...props }: ChildProps) => {
-  return (
-    <div
-      {...props}
-      data-theme={theme}
-      className={cn("w-full py-2 bg-background-system-body-base pr-2", props.className)}
-    >
-      {props.children}
-    </div>
-  );
-};
-
-const SideBarItemStyles = cva(
-  [
-    "h-[40px] w-full px-[8px] flex gap-[6px] typography-body-small-medium justify-start items-center",
-    "text-content-system-global-primary border-l-[2px] rtl:border-r-[2px] border-transparent outline-none",
-    "hover:bg-white-alpha-075 hover:border-black-300 hover:text-content-system-action-primary-hover hover:px-[14px]",
-    "rounded-r-[4px] text-start whitespace-nowrap transition-all duration-150 ease-in-out cursor-pointer",
-  ],
-  {
-    variants: {
-      disabled: {
-        true: "text-content-system-global-disabled bg-transparent hover:bg-transparent fucus:bg-transparent active:bg-transparent",
-      },
-      active: {
-        true: "hover:px-[8px] !px-[8px]",
-      },
-      iconOnly: {
-        true: "w-[40px] justify-center overflow-hidden",
-      },
-      variant: {
-        default: [
-          "fucus:bg-background-system-action-primary-hover fucus:border-border-system-action-primary-hover",
-        ],
-        secondary: [
-          "focus:bg-wavy-navy-1000 focus:border-border-system-action-field-hover-selected",
-        ],
-      },
-    },
-    compoundVariants: [
-      {
-        active: true,
-        variant: "default",
-        className: [
-          "bg-background-system-action-primary-hover border-border-system-action-primary-hover !px-[8px] hover:px-[8px]",
-        ],
-      },
-      {
-        active: true,
-        variant: "secondary",
-        className: [
-          "bg-wavy-navy-1000 border-border-system-action-field-hover-selected !px-[8px] hover:px-[8px]",
-        ],
-      },
-      {
-        disabled: true,
-        variant: "secondary",
-        className: [
-          "bg-transparent hover:bg-transparent focus:bg-transparent active:bg-transparent hover:p-[8px] hover:text-content-system-global-disabled",
-        ],
-      },
-      {
-        disabled: true,
-        variant: "default",
-        className: [
-          "bg-transparent hover:bg-transparent focus:bg-transparent active:bg-transparent hover:p-[8px] hover:text-content-system-global-disabled",
-        ],
-      },
-    ],
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-interface Props
-  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof SideBarItemStyles> {
-  asChild?: boolean;
-  as?: React.ElementType;
-  theme?: Themes;
-  variant?: "default" | "secondary";
-  iconOnly?: boolean;
-  active?: boolean;
-  disabled?: boolean;
-}
-const SideBarItem = ({
-  active,
-  disabled,
-  iconOnly,
-  asChild,
-  as: Tag = "span",
-  theme,
-  className,
-  variant,
-  ...props
-}: Props) => {
-  const Component = asChild ? Slot : Tag;
-
-  return (
-    <Component
-      {...props}
-      data-theme={theme}
-      disabled={disabled}
-      className={cn(SideBarItemStyles({ variant, iconOnly, active, disabled }), className)}
-    ></Component>
-  );
-};
-
-const SideBarIconButtonStyles = cva(
-  [
-    "h-[36px] w-[36px] flex  text-content-system-global-primary text-[20px] justify-center items-center rounded-[8px] border border-transparent outline-none",
-    "fucus:bg-border-system-action-primary-Hover active:bg-border-system-action-primary-Hover",
-    "transition-all duration-200 ease-in-out flex-shrink-0 m-[5px] relative cursor-pointer",
-  ],
-  {
-    variants: {
-      active: {
-        true: "",
-      },
-      variant: {
-        default: [
-          "hover:bg-background-system-action-secondary-hover hover:border-border-system-action-primary-hover",
-        ],
-        secondary: [
-          "hover:bg-wavy-navy-1000 hover:border-border-system-action-field-hover-selected",
-        ],
-      },
-    },
-    compoundVariants: [
-      {
-        active: true,
-        variant: "default",
-        className: [
-          "bg-background-system-action-secondary-hover border-border-system-action-primary-hover",
-        ],
-      },
-      {
-        active: true,
-        variant: "secondary",
-        className: [
-          "bg-background-system-action-secondary-hover border-border-system-action-primary-hover",
-        ],
-      },
-    ],
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-interface SideBarIconButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof SideBarItemStyles> {
-  asChild?: boolean;
-  as?: React.ElementType;
-  theme?: Themes;
-  variant?: "default" | "secondary";
-  active?: boolean;
-  count?: number;
-  message?: ReactNode;
-  disabled?: boolean;
-}
-
-const SideBarIconButton = ({
-  count,
-  active,
-  asChild,
-  message,
-  as: Tag = "button",
-  theme,
-  variant,
-  className,
-  ...props
-}: SideBarIconButtonProps) => {
-  const Component = asChild ? Slot : Tag;
-
-  return message ? (
-    <Tooltip variant={"highlight"} text={message} toolTipSide="left" className="z-[1000]">
-      <Component
-        {...props}
-        data-theme={theme}
-        className={cn(SideBarIconButtonStyles({ variant, active }), className)}
-      >
-        {props.children}
-        {count && <Counter className=" absolute top-[2px] right-[2px]" label={count} />}
-      </Component>
-    </Tooltip>
-  ) : (
-    <Component
-      {...props}
-      data-theme={theme}
-      className={cn(SideBarIconButtonStyles({ variant, active }))}
-    >
-      {props.children}
-      {count && <Counter className=" absolute top-[2px] right-[2px]" label={count} />}
-    </Component>
-  );
-};
-
-interface SideBarFooterItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  theme?: Themes;
-  as?: React.ElementType;
-  asChild?: boolean;
-  variant?: "primary" | "secondary";
-}
-
-const glareFeedbackItemStyle = cva(
-  [
-    "h-[40px] w-full flex justify-center items-center rounded-[4px] px-2",
-    "text-content-system-global-primary typography-body-small-medium",
-    "border border-transparent outline-none bg-background-system-body-base",
-    "focus:bg-background-system-action-primary-selected",
-    "transition-all duration-200 ease-in-out",
-  ],
-  {
-    variants: {
-      variant: {
-        primary: [
-          "hover:bg-background-system-action-primary-hover hover:border-border-system-action-primary-hover",
-          "active:bg-background-system-action-primary-hover active:border-border-system-action-primary-hover ",
-        ],
-        secondary: [
-          "hover:bg-wavy-navy-1000  hover:border-border-system-action-field-hover-selected",
-          "active:bg-wavy-navy-1000 active:border-border-system-action-field-hover-selected",
-        ],
-      },
-    },
-    defaultVariants: {
-      variant: "primary",
-    },
-  },
-);
-
-const SideBarFooterItem: React.FC<SideBarFooterItemProps> = ({
-  asChild,
-  as: Tag = "button",
-  theme,
-  variant,
-  className,
-  ...props
-}) => {
-  const Component = asChild ? Slot : Tag;
-
-  return (
-    <Component
-      data-theme={theme}
-      {...props}
-      className={cn(glareFeedbackItemStyle({ variant }), className)}
-    ></Component>
-  );
-};
-
-export {
-  SideBar,
-  SideBarFooterItem,
-  SideBarItem,
-  SideBarChildContainer,
-  SideBarIconButton,
-  Body,
-  Layout,
-};

package/apps/lib/layouts/DataViewCard.tsx

@@ -1,62 +0,0 @@
-"use client";
-
-import { Fragment, type HTMLAttributes, type ReactNode } from "react";
-import { cn } from "../utils/cn";
-import { Card, CardContent, CardHeader } from "../components/Card";
-import type { Themes } from "../utils/types";
-
-export type DataViewCardCell = {
-  key: string;
-  label: ReactNode;
-  value: ReactNode;
-};
-
-export type DataViewCardRow = DataViewCardCell[];
-
-export interface DataViewCardProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
-  title?: ReactNode;
-  rows?: DataViewCardRow[];
-  theme?: Themes;
-}
-
-export function DataViewCard({ title, rows = [], className, theme, ...props }: DataViewCardProps) {
-  return (
-    <Card data-theme={theme} {...props} className={cn("p-[8px] rounded-[10px] gap-0", className)}>
-      {title != null && (
-        <CardHeader className=" border-b border-border-presentation-global-primary">
-          <div className="min-w-0 typography-headers-large-semibold text-content-presentation-global-primary">
-            {title}
-          </div>
-        </CardHeader>
-      )}
-      {rows.length > 0 && (
-        <CardContent className="grid grid-cols-2 gap-0 pt-0 w-full">
-          {rows.map((cells, rowIdx) => (
-            <Fragment key={rowIdx}>
-              {cells.map((cell, cellIdx) => (
-                <div
-                  key={cell.key}
-                  className={cn(
-                    "relative flex flex-col gap-[2px] min-w-0 p-[6px]",
-                    rowIdx > 0 && "border-t border-border-presentation-global-primary",
-                    cells.length === 2 &&
-                      cellIdx === 0 &&
-                      "after:absolute after:end-0 after:top-[7%] after:h-[80%] after:w-px after:bg-border-presentation-global-primary",
-                    cells.length === 1 && "col-span-2",
-                  )}
-                >
-                  <span className="typography-body-small-medium text-content-presentation-global-tertiary">
-                    {cell.label}
-                  </span>
-                  <div className="typography-body-medium-semibold text-content-presentation-global-primary truncate">
-                    {cell.value}
-                  </div>
-                </div>
-              ))}
-            </Fragment>
-          ))}
-        </CardContent>
-      )}
-    </Card>
-  );
-}

package/apps/lib/layouts/FieldSection.tsx

@@ -1,91 +0,0 @@
-import { cn } from "../utils/cn";
-import { ReactNode } from "react";
-import { Label } from "../components/Label";
-import { Themes } from "../utils/types";
-
-interface Props {
-  label?: ReactNode;
-  secondaryLabel?: ReactNode;
-  requiredLabel?: ReactNode;
-  size?: "S" | "M" | "L";
-  childrenUnderLabel?: ReactNode;
-  theme?: Themes;
-  className?: string;
-  children?: ReactNode;
-  direction?: "horizontal" | "vertical" | "flexible";
-}
-
-export function FieldSection({
-  children,
-  label,
-  secondaryLabel,
-  direction = "flexible",
-  requiredLabel,
-  size,
-  theme,
-  className,
-  childrenUnderLabel,
-  ...props
-}: Props) {
-  // Which copy of `childrenUnderLabel` is visible, driven purely by the `@md` container
-  // breakpoint (this section's own width reaching 650px) — deliberately not by `direction`.
-  // Pinning it per-direction breaks the common case: `FormRenderer` forces `direction="vertical"`
-  // inside a drawer and FormBuilder puts the field's validation error in this slot, so a vertical
-  // form would strand every error under the label at any width.
-  const underLabelSlot = direction === "vertical" ? "hidden" : "hidden @md:block";
-  const underChildrenSlot = direction === "vertical" ? "block" : "block @md:hidden";
-
-  return (
-    <section
-      {...props}
-      data-theme={theme}
-      className={cn("w-full max-w-[1200px] min-w-[0px] @container", className)}
-    >
-      <div
-        className={cn(
-          "grid py-[16px] px-[12px] w-full min-w-[0px]",
-          direction === "vertical" && "grid-rows-[auto_1fr] gap-[12px]",
-          direction === "horizontal" && "grid-cols-[350px_1fr] gap-[24px]",
-          direction === "flexible" &&
-          "grid-rows-[auto_1fr] gap-[12px] @md:grid-cols-[350px_1fr] @md:grid-rows-[1fr] @md:gap-[24px]",
-        )}
-      >
-        {/* Fixed width section for labels */}
-        <div className="flex flex-col gap-[12px]">
-          {label && (
-            <Label
-              size={size}
-              label={label}
-              requiredLabel={requiredLabel}
-              labelDirections={"horizontal"}
-            />
-          )}
-
-          {secondaryLabel && <Label size={size} secondaryLabel={secondaryLabel} />}
-
-          {/* Stacked (below `@md`): the label column IS the full width, so under the label is the
-              natural spot. Hidden once `@md` splits the row into two columns — the copy in the
-              children column takes over there. Exactly one of the two is ever displayed. */}
-          {childrenUnderLabel && (
-            <div data-slot="under-label" className={cn(underLabelSlot)}>
-              {childrenUnderLabel}
-            </div>
-          )}
-        </div>
-
-        {/* Flexible section that takes up the remaining space */}
-        <div className="grid grid-cols-1 place-items-end gap-[12px]">
-          {children}
-
-          {/* Two-column (`@md` and up): the hint belongs under the control it describes, not
-              stranded at the bottom of the 350px label column. */}
-          {childrenUnderLabel && (
-            <div data-slot="under-children" className={cn("w-full", underChildrenSlot)}>
-              {childrenUnderLabel}
-            </div>
-          )}
-        </div>
-      </div>
-    </section>
-  );
-}

package/apps/lib/layouts/TreeSubLayout.tsx

@@ -1,173 +0,0 @@
-"use client";
-import { usePathname } from "next/navigation";
-import TabFormItem from "../components/TabFormItem";
-import { cn } from "../utils/cn";
-import Link from "next/link";
-import { useActiveTreeItem } from "../hooks/useActiveTreeItem";
-
-interface TreeItem {
-  id: string;
-  title: string;
-  subTree?: TreeItem[];
-}
-export type PathConfig = {
-  [key: string]: {
-    pageHeader: string;
-    subTitle?: string;
-    TabsTree: TreeItem[];
-  };
-};
-
-export default function TreeSubLayout({
-  children,
-  treeData,
-}: {
-  children: React.ReactNode;
-  treeData: PathConfig;
-}) {
-  const pathname = usePathname();
-  const allIds = treeData[pathname].TabsTree?.flatMap((item) => [
-    item.id,
-    ...(item.subTree?.map((sub) => sub.id) || []),
-  ]);
-  const { activeId } = useActiveTreeItem(allIds);
-
-  return (
-    <div
-      className={cn(
-        "flex  h-full overflow-hidden transition-all ease-in-out delay-150 lg:bg-none lg:rounded-2 ",
-      )}
-    >
-      <div className="grid grid-rows-[auto_1fr] h-full flex-1 lg:gap-[2px] rounded-2 flex-shrink-0 min-w-[300px]">
-        <HeaderPage
-          title={treeData[pathname]?.pageHeader}
-          subTitle={treeData[pathname]?.subTitle}
-        />
-        <div className="grid grid-cols-[1fr] overflow-hidden lg:rounded-b-[6px] xl:grid-cols-[1fr_300px]">
-          <div className="scrollbar-hide overflow-scroll scroll-smooth bg-background-system-body-base h-full">
-            <div className="overflow-scroll scrollbar-hide scroll-smooth bg-[#B2D0FF0D] h-full w-full p-[12px]">
-              {children}
-            </div>
-          </div>
-
-          <div className="border-l border-border-presentation-global-primary bg-background-system-body-base scrollbar-hide hidden xl:block">
-            <div className="flex flex-col items-start gap-3 h-full py-8 px-6 overflow-y-auto scrollbar-hide">
-              {treeData[pathname].TabsTree.map((item) => (
-                <TreeSection
-                  key={item.id}
-                  href={`${item.id}`}
-                  isActive={
-                    activeId === item.id || item.subTree?.some((sub) => sub.id === activeId)
-                  }
-                  title={item?.title}
-                  subTitles={item?.subTree?.map((sub) => ({
-                    ...sub,
-                    isActive: activeId === sub.id,
-                  }))}
-                />
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function TreeSection({
-  href,
-  isActive,
-  title,
-  subTitles,
-}: {
-  href: string;
-  isActive?: boolean;
-  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>
-      </TabFormItem>
-      {subTitles && (
-        <div
-          className={`w-full h-[1px]
-            bg-border-presentation-global-primary
-        `}
-        ></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="flex p-[4px_0px_4px_8px] flex-col items-start gap-1 w-full flex-1">
-            {subTitles?.map((item) => (
-              <TabFormItem
-                componentType="tree"
-                key={item.id}
-                active={item.isActive}
-                className="w-full"
-                asChild
-              >
-                <Link href={`#${item.id}`}>{item.title}</Link>
-              </TabFormItem>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-export function HeaderPage({
-  title,
-  subTitle,
-  children,
-  type = "start",
-  className,
-}: {
-  title: string;
-  subTitle?: string;
-  children?: React.ReactNode;
-  type?: "space-between" | "start";
-  className?: string;
-}) {
-  return (
-    <div
-      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,
-      )}
-    >
-      <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={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,
-          )}
-        >
-          <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>
-          <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",
-          )}
-        >
-          {children}
-        </div>
-      </div>
-    </div>
-  );
-}