torch-glare 2.4.0 → 2.4.2

package/apps/lib/components/Divider.tsx

@@ -1,31 +1,28 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import { cn } from "../utils/cn"
+import * as React from "react";
+import { cn } from "../utils/cn";
 
 interface DividerProps extends React.HTMLAttributes<HTMLDivElement> {
-    orientation?: "horizontal" | "vertical"
-    decorative?: boolean
+  orientation?: "horizontal" | "vertical";
+  decorative?: boolean;
 }
 
 const Divider = React.forwardRef<HTMLDivElement, DividerProps>(
-    (
-        { className, orientation = "horizontal", decorative = true, ...props },
-        ref
-    ) => (
-        <div
-            ref={ref}
-            role={decorative ? "none" : "separator"}
-            aria-orientation={decorative ? undefined : orientation}
-            className={cn(
-                "bg-border-presentation-global-primary",
-                orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-                className
-            )}
-            {...props}
-        />
-    )
-)
-Divider.displayName = "Divider"
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+    <div
+      ref={ref}
+      role={decorative ? "none" : "separator"}
+      aria-orientation={decorative ? undefined : orientation}
+      className={cn(
+        "bg-border-presentation-global-primary",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Divider.displayName = "Divider";
 
-export { Divider }
+export { Divider };

package/apps/lib/components/Drawer.tsx

@@ -5,21 +5,19 @@ import { Drawer as DrawerPrimitive } from "vaul";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "../utils/cn";
+import { Button } from "./Button";
 
 const Drawer = ({
   shouldScaleBackground = true,
   ...props
 }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root
-    shouldScaleBackground={shouldScaleBackground}
-    {...props}
-  />
+  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
 );
 Drawer.displayName = "Drawer";
 
-const DrawerNested = (
-  props: React.ComponentProps<typeof DrawerPrimitive.NestedRoot>,
-) => <DrawerPrimitive.NestedRoot {...props} />;
+const DrawerNested = (props: React.ComponentProps<typeof DrawerPrimitive.NestedRoot>) => (
+  <DrawerPrimitive.NestedRoot {...props} />
+);
 DrawerNested.displayName = "DrawerNested";
 
 const DrawerTrigger = DrawerPrimitive.Trigger;
@@ -32,11 +30,7 @@ const DrawerOverlay = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Overlay
-    ref={ref}
-    className={cn("fixed inset-0 z-50 ", className)}
-    {...props}
-  />
+  <DrawerPrimitive.Overlay ref={ref} className={cn("fixed inset-0 z-50 ", className)} {...props} />
 ));
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
@@ -54,9 +48,58 @@ interface DrawerContentProps extends React.ComponentPropsWithoutRef<
    */
   framed?: boolean;
   wrapperClassName?: string;
+  /**
+   * @deprecated Use `className` — it now targets the tray directly. Kept as an
+   * alias (merged last, so it still wins) for the pre-`DrawerPanel` API.
+   */
   trayClassName?: string;
 }
 
+interface DrawerPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Panel border + inset shadow that pairs with the tray's frame. Default `true`. */
+  framed?: boolean;
+  /** Show the drag handle (bottom sheets). Default `false`. */
+  showHandle?: boolean;
+}
+
+/**
+ * The light `#F0F0F0` content surface inside a `DrawerContent`.
+ *
+ * It is an ordinary child, not something the tray paints — so a drawer can hold a panel
+ * and something else beside it (e.g. a `FormSummary`), each bringing its own background.
+ * Give the tray a `gap-*` to space them.
+ *
+ * ```tsx
+ * <DrawerContent className="gap-[6px]">
+ *   <DrawerPanel>…form…</DrawerPanel>
+ *   <FormSummary … />
+ * </DrawerContent>
+ * ```
+ */
+const DrawerPanel = React.forwardRef<HTMLDivElement, DrawerPanelProps>(
+  ({ className, framed = true, showHandle = false, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      // The content surface is always light (#F0F0F0) regardless of the page
+      // theme, so pin a light theme here. This makes theme-aware content tokens
+      // (DrawerTitle/Description and any consumer content) resolve to their
+      // dark-on-light values instead of following a dark page theme (which
+      // would render white-on-light = invisible).
+      data-theme="light"
+      className={cn(
+        "flex flex-1 gap-2 rounded-t-[16px] p-1 bg-[#F0F0F0] min-h-0",
+        framed && "border border-[#D4D4D4] shadow-[inset_0_-4px_16px_rgba(0,0,0,0.1)]",
+        className,
+      )}
+      {...props}
+    >
+      {showHandle && <div className="mx-auto h-2 w-[100px] rounded-full bg-[#D4D4D4]" />}
+      {children}
+    </div>
+  ),
+);
+DrawerPanel.displayName = "DrawerPanel";
+
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
   DrawerContentProps
@@ -65,7 +108,6 @@ const DrawerContent = React.forwardRef<
     {
       className,
       children,
-      showHandle = true,
       notch,
       notchSide = "left",
       framed: framedProp,
@@ -77,77 +119,57 @@ const DrawerContent = React.forwardRef<
   ) => {
     const framed = framedProp ?? true;
     return (
-    <DrawerPortal>
-      <DrawerOverlay />
-      <DrawerPrimitive.Content
-        ref={ref}
-        className={cn(
-          "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col items-stretch m-1",
-          wrapperClassName,
-        )}
-        {...props}
-      >
-        {notch && (
-          <div className={notchSide === "right" ? "self-end" : "self-start"}>
-            {React.isValidElement(notch)
-              ? React.cloneElement(
-                  notch as React.ReactElement<{ side?: "left" | "right" }>,
-                  { side: notchSide },
-                )
-              : notch}
-          </div>
-        )}
-        <div
+      <DrawerPortal>
+        <DrawerOverlay />
+        <DrawerPrimitive.Content
+          ref={ref}
           className={cn(
-            "flex flex-1 flex-col min-h-0",
-            framed
-              ? "p-1.5 bg-black-400 shadow-[0_0_4px_rgba(0,0,0,0.2),0_0_30px_rgba(0,0,0,0.4)]"
-              : "p-0",
-            framed && notch
-              ? notchSide === "right"
-                ? "rounded-tr-none rounded-tl-[22px] rounded-b-[22px]"
-                : "rounded-tl-none rounded-tr-[22px] rounded-b-[22px]"
-              : framed
-                ? "rounded-t-[22px]"
-                : "",
-            trayClassName,
+            "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col items-stretch m-1",
+            wrapperClassName,
           )}
+          {...props}
         >
+          {notch && (
+            <div className={notchSide === "right" ? "self-end" : "self-start"}>
+              {React.isValidElement(notch)
+                ? React.cloneElement(notch as React.ReactElement<{ side?: "left" | "right" }>, {
+                    side: notchSide,
+                  })
+                : notch}
+            </div>
+          )}
+          {/* The tray. It frames and positions, but paints nothing over its children —
+              each child brings its own background (see `DrawerPanel`). Supply a `gap-*`
+              via `className` when the tray holds more than one. */}
           <div
-            // The content surface is always light (#F0F0F0) regardless of the
-            // page theme, so pin a light theme here. This makes theme-aware
-            // content tokens (DrawerTitle/Description and any consumer content)
-            // resolve to their dark-on-light values instead of following a dark
-            // page theme (which would render white-on-light = invisible).
-            data-theme="light"
             className={cn(
-              "flex flex-1 flex-col gap-2 rounded-t-[16px] p-1.5 bg-[#F0F0F0] min-h-0",
-              framed && "border border-[#D4D4D4] shadow-[inset_0_-4px_16px_rgba(0,0,0,0.1)]",
+              "flex flex-1 min-h-0",
+              framed
+                ? "p-1.5 bg-black-400 shadow-[0_0_4px_rgba(0,0,0,0.2),0_0_30px_rgba(0,0,0,0.4)]"
+                : "p-0",
+              framed && notch
+                ? notchSide === "right"
+                  ? "rounded-tr-none rounded-tl-[22px] rounded-b-[22px]"
+                  : "rounded-tl-none rounded-tr-[22px] rounded-b-[22px]"
+                : framed
+                  ? "rounded-t-[22px]"
+                  : "",
               className,
+              trayClassName,
             )}
           >
-            {showHandle && !notch && (
-              <div className="mx-auto h-2 w-[100px] rounded-full bg-[#D4D4D4]" />
-            )}
             {children}
           </div>
-        </div>
-      </DrawerPrimitive.Content>
-    </DrawerPortal>
+        </DrawerPrimitive.Content>
+      </DrawerPortal>
     );
   },
 );
 DrawerContent.displayName = "DrawerContent";
 
-const DrawerHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-row justify-between items-stretch gap-2 px-1 pt-1",
-      className,
-    )}
+    className={cn("flex flex-row justify-between items-stretch gap-2 px-1 pt-1", className)}
     {...props}
   />
 );
@@ -159,25 +181,15 @@ const drawerHeaderPane = cva(
   "flex items-center gap-2 rounded-[14px] border p-2 bg-[#131415] border-[#2C2D2E] shadow-[0_0_32px_2px_rgba(0,0,0,0.05)] [&_[data-slot=drawer-title]]:text-white [&_[data-slot=drawer-description]]:text-[#9FA0A1]",
 );
 
-const DrawerHeaderTitle = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DrawerHeaderTitle = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   // Dark surface — pin a dark theme so any buttons/content inside resolve their
   // theme tokens for dark (the surrounding content surface is data-theme=light).
   <div data-theme="dark" className={cn(drawerHeaderPane(), className)} {...props} />
 );
 DrawerHeaderTitle.displayName = "DrawerHeaderTitle";
 
-const DrawerHeaderActions = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    data-theme="dark"
-    className={cn(drawerHeaderPane(), "justify-end", className)}
-    {...props}
-  />
+const DrawerHeaderActions = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div data-theme="dark" className={cn(drawerHeaderPane(), "justify-end", className)} {...props} />
 );
 DrawerHeaderActions.displayName = "DrawerHeaderActions";
 
@@ -199,29 +211,17 @@ const drawerBadge = cva(
 );
 
 interface DrawerBadgeProps
-  extends
-    Omit<React.HTMLAttributes<HTMLSpanElement>, "color">,
-    VariantProps<typeof drawerBadge> {}
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">, VariantProps<typeof drawerBadge> {}
 
 const DrawerBadge = React.forwardRef<HTMLSpanElement, DrawerBadgeProps>(
   ({ className, color, ...props }, ref) => (
-    <span
-      ref={ref}
-      className={cn(drawerBadge({ color }), className)}
-      {...props}
-    />
+    <span ref={ref} className={cn(drawerBadge({ color }), className)} {...props} />
   ),
 );
 DrawerBadge.displayName = "DrawerBadge";
 
-const DrawerFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-    {...props}
-  />
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
 );
 DrawerFooter.displayName = "DrawerFooter";
 
@@ -229,23 +229,12 @@ interface DrawerNotchProps extends React.HTMLAttributes<HTMLDivElement> {
   side?: "left" | "right";
 }
 
-const DrawerNotch = ({
-  className,
-  children,
-  side = "left",
-  ...props
-}: DrawerNotchProps) => {
+const DrawerNotch = ({ className, children, side = "left", ...props }: DrawerNotchProps) => {
   // Wedge bridges the notch's bottom-edge corner into the tray's top edge.
   // For a left-attached notch (the default), the wedge sits at the notch's
   // bottom-right; for a right-attached notch, mirror it to the bottom-left.
   const wedge = (
-    <svg
-      aria-hidden
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      className="block shrink-0 self-end"
-    >
+    <svg aria-hidden width="12" height="12" viewBox="0 0 12 12" className="block shrink-0 self-end">
       <path
         d={
           side === "right"
@@ -280,18 +269,23 @@ const DrawerNotchClose = React.forwardRef<
   HTMLButtonElement,
   React.ButtonHTMLAttributes<HTMLButtonElement>
 >(({ className, children, ...props }, ref) => (
-  <button
+  <Button
     ref={ref}
     type="button"
     aria-label="Close"
+    buttonType="icon"
+    size="S"
+    variant="PrimeContStyle"
     className={cn(
-      "inline-flex h-[22px] w-[22px] items-center justify-center rounded-[13px] bg-white/15 text-content-presentation-global-primary transition-colors hover:bg-white/25",
+      // Glare Button (icon, S = 22×22) with the notch's own circular radius + translucent look
+      // (S is otherwise rounded-[4px]).
+      "!rounded-[13px] bg-white/15 text-white hover:bg-white/25 hover:text-white",
       className,
     )}
     {...props}
   >
-    {children ?? <i className="ri-close-fill text-[14px]" />}
-  </button>
+    {children ?? <i className="ri-close-fill !text-[14px]" />}
+  </Button>
 ));
 DrawerNotchClose.displayName = "DrawerNotchClose";
 
@@ -314,30 +308,22 @@ interface DrawerNotchPillProps
     Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "color">,
     VariantProps<typeof drawerNotchPill> {}
 
-const DrawerNotchPill = React.forwardRef<
-  HTMLButtonElement,
-  DrawerNotchPillProps
->(({ className, color, children, ...props }, ref) => (
-  <button
-    ref={ref}
-    type="button"
-    className={cn(drawerNotchPill({ color }), className)}
-    {...props}
-  >
-    {children}
-  </button>
-));
+const DrawerNotchPill = React.forwardRef<HTMLButtonElement, DrawerNotchPillProps>(
+  ({ className, color, children, ...props }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      className={cn(drawerNotchPill({ color }), className)}
+      {...props}
+    >
+      {children}
+    </button>
+  ),
+);
 DrawerNotchPill.displayName = "DrawerNotchPill";
 
-const DrawerNotchDivider = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    aria-hidden
-    className={cn("h-[18px] w-px bg-white/20", className)}
-    {...props}
-  />
+const DrawerNotchDivider = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div aria-hidden className={cn("h-[18px] w-px bg-white/20", className)} {...props} />
 );
 DrawerNotchDivider.displayName = "DrawerNotchDivider";
 
@@ -346,12 +332,7 @@ interface DrawerNotchAppProps extends React.HTMLAttributes<HTMLDivElement> {
   name: React.ReactNode;
 }
 
-const DrawerNotchApp = ({
-  className,
-  icon,
-  name,
-  ...props
-}: DrawerNotchAppProps) => (
+const DrawerNotchApp = ({ className, icon, name, ...props }: DrawerNotchAppProps) => (
   <div className={cn("flex items-center gap-2.5 px-1", className)} {...props}>
     {icon && (
       <div className="flex h-[22px] w-[22px] items-center justify-center overflow-hidden rounded-[5.6px] bg-black shadow-[0_0_4.66px_rgba(0,0,0,0.3),0_0.75px_0.75px_rgba(0,0,0,0.2)]">
@@ -406,6 +387,7 @@ export {
   DrawerTrigger,
   DrawerClose,
   DrawerContent,
+  DrawerPanel,
   DrawerHeader,
   DrawerHeaderTitle,
   DrawerHeaderActions,