torch-glare 2.1.2 → 2.1.3

package/apps/lib/components/Avatar.tsx

@@ -38,7 +38,7 @@ const AvatarFallback = React.forwardRef<
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(
-      "flex h-full w-full items-center justify-center rounded-full bg-background-system-body-tertiary text-content-presentation-global-primary",
+      "flex h-full w-full items-center justify-center rounded-full bg-background-presentation-action-disabled text-content-presentation-global-primary",
       className
     )}
     {...props}

package/apps/lib/components/Card.tsx

@@ -1,64 +1,78 @@
-import { cn } from '../utils/cn';
-import React, { HTMLAttributes } from 'react'
+import { cn } from "../utils/cn";
+import React, { HTMLAttributes } from "react";
 import { Slot } from "@radix-ui/react-slot";
 
-
-interface Props extends Omit<HTMLAttributes<HTMLDivElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement>, 'htmlFor'> {
-    as?: React.ElementType;
-    asChild?: boolean;
-    htmlFor?: string;
-}
-export const Card = ({ className, htmlFor, asChild, as: Tag = "section", ...props }: Props) => {
-    const Component = asChild ? Slot : Tag;
-    return (
-        <Component htmlFor={htmlFor} {...props} className={cn(
-            "flex flex-col justify-start",
-            "gap-2 rounded-[12px] border",
-            "transition-all ease-in-out duration-200",
-            "p-[16px]",
-            "border-border-presentation-global-primary",
-            "bg-background-presentation-form-radiocard-base",
-            "hover:border-border-presentation-state-focus",
-            "focus:border-border-presentation-state-focus",
-            className
-        )} />
-    )
+interface Props extends Omit<
+  HTMLAttributes<
+    | HTMLDivElement
+    | HTMLHeadingElement
+    | HTMLParagraphElement
+    | HTMLLabelElement
+  >,
+  "htmlFor"
+> {
+  as?: React.ElementType;
+  asChild?: boolean;
+  htmlFor?: string;
 }
+export const Card = ({
+  className,
+  htmlFor,
+  asChild,
+  as: Tag = "section",
+  ...props
+}: Props) => {
+  const Component = asChild ? Slot : Tag;
+  return (
+    <Component
+      htmlFor={htmlFor}
+      {...props}
+      className={cn(
+        "flex flex-col justify-start",
+        "gap-2 rounded-[12px] border",
+        "transition-all ease-in-out duration-200",
+        "p-[16px]",
+        "border-border-presentation-global-primary",
+        "bg-background-presentation-form-radiocard-base",
+        "hover:border-border-presentation-state-focus",
+        "focus:border-border-presentation-state-focus",
+        className,
+      )}
+    />
+  );
+};
 
-
-
-interface GeneralProps extends HTMLAttributes<HTMLHeadingElement> { }
+interface GeneralProps extends HTMLAttributes<HTMLHeadingElement> {}
 
 export const CardHeader = ({ className, ...props }: GeneralProps) => {
-    return (
-        <div
-            {...props}
-            className={cn(
-                "text-content-presentation-global-primary m-0 typography-headers-medium-semibold",
-                className
-            )}
-        >
-        </div>
-    )
-}
+  return (
+    <div
+      {...props}
+      className={cn(
+        "text-content-presentation-global-primary m-0 typography-headers-medium-semibold",
+        className,
+      )}
+    ></div>
+  );
+};
 
 export const CardDescription = ({ className, ...props }: GeneralProps) => {
-    return (
-        <div
-            {...props}
-            className={cn(
-                "text-content-presentation-global-primary m-0 typography-body-medium-semibold",
-                className
-            )}
-        >
-        </div>
-    )
-}
+  return (
+    <div
+      {...props}
+      className={cn(
+        "text-content-presentation-global-primary m-0 typography-body-medium-semibold",
+        className,
+      )}
+    ></div>
+  );
+};
 
 export const CardContent = ({ className, ...props }: GeneralProps) => {
-    return (
-        <section {...props} className={cn("flex gap-1 flex-col items-start flex-1", className)}>
-        </section>
-    )
-}
-
+  return (
+    <section
+      {...props}
+      className={cn("flex gap-1 flex-col items-start flex-1", className)}
+    ></section>
+  );
+};

package/apps/lib/components/DataViews/DataViewRadio.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { type ReactNode } from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { cn } from "../../utils/cn";
+
+export interface DataViewRadioProps {
+  value: string;
+  label?: string;
+  children?: ReactNode;
+  className?: string;
+}
+
+export function DataViewRadio({
+  value,
+  label,
+  children,
+  className,
+}: DataViewRadioProps) {
+  return (
+    <RadioGroupPrimitive.Item
+      value={value}
+      className={cn(
+        "group flex w-full items-center gap-1.5 py-1 ps-2 h-[32px]",
+        "cursor-pointer rounded-[8px] text-left outline-none transition-colors",
+        "hover:bg-background-presentation-action-contstyle-hover focus-visible:bg-background-presentation-action-contstyle-hover",
+        className,
+      )}
+    >
+      <span
+        className={cn(
+          "flex h-[14px] w-[14px] shrink-0 items-center justify-center rounded-full",
+          "border border-border-presentation-action-primary bg-background-presentation-form-field-primary transition-colors",
+          "group-data-[state=checked]:border-transparent",
+          "group-data-[state=checked]:bg-border-presentation-state-focus",
+        )}
+      >
+        <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+          <span className="h-[6px] w-[6px] rounded-full bg-white" />
+        </RadioGroupPrimitive.Indicator>
+      </span>
+      <span className="flex-1 typography-body-medium-regular text-content-presentation-global-primary">
+        {children ?? label}
+      </span>
+    </RadioGroupPrimitive.Item>
+  );
+}

package/apps/lib/components/DataViews/DataViewsConfigPanel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useMemo, useState } from "react";
+import { Fragment, useMemo, useState } from "react";
 import {
   X,
   Settings as SettingsIcon,
@@ -163,25 +163,21 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
   };
 
   const [dragPath, setDragPath] = useState<string | null>(null);
-  const [dragOverPath, setDragOverPath] = useState<string | null>(null);
-  // Whether the drop will land before (true) or after (false) dragOverPath.
-  const [dropBefore, setDropBefore] = useState(true);
+  // Insertion slot in the ordered list: 0 means before the first row, N means
+  // after the last row (count). Single source of truth — there is exactly one
+  // indicator at a time, so no double-line ambiguity between adjacent rows.
+  const [dropSlot, setDropSlot] = useState<number | null>(null);
 
-  const reorderColumn = (
-    sourcePath: string,
-    targetPath: string,
-    before: boolean,
-  ) => {
-    if (sourcePath === targetPath) return;
+  const reorderColumnToSlot = (sourcePath: string, slot: number) => {
     const ids = orderedColumns.map((c) => c.id);
     const from = ids.indexOf(sourcePath);
-    let to = ids.indexOf(targetPath);
-    if (from === -1 || to === -1) return;
+    if (from === -1) return;
+    // Dropping into the same logical position (before or after itself) is a no-op.
+    if (slot === from || slot === from + 1) return;
     const reordered = [...ids];
     reordered.splice(from, 1);
-    // Recompute the target index after removal, then offset for before/after.
-    to = reordered.indexOf(targetPath);
-    const insertAt = before ? to : to + 1;
+    // After removal, indices shift left by 1 for any slot beyond `from`.
+    const insertAt = slot > from ? slot - 1 : slot;
     reordered.splice(insertAt, 0, sourcePath);
     const orderByPath = new Map(reordered.map((id, i) => [id, i]));
     const next = config.tableColumns.map((c) => {
@@ -290,14 +286,17 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
                 </p>
               ) : (
                 <div data-theme="dark" className="flex flex-col gap-2">
-                  {orderedColumns.map((col) => {
+                  {orderedColumns.map((col, index) => {
                     const field = fieldByPath.get(col.id);
                     const isDragging = dragPath === col.id;
-                    const isTarget =
-                      dragOverPath === col.id && dragPath !== col.id;
+                    // Slot for the cursor on this row: top half = insert at
+                    // `index` (before this row); bottom half = `index + 1`
+                    // (after this row, which is the SAME slot as "before next
+                    // row" — the single source of truth avoids the old
+                    // double-line problem in the gap between rows).
                     return (
                       <div key={col.id}>
-                        {isTarget && dropBefore && <DropLine />}
+                        {dropSlot === index && dragPath && <DropLine />}
                         <div
                           draggable
                           onDragStart={(e) => {
@@ -312,29 +311,25 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
                               e.currentTarget.getBoundingClientRect();
                             const before =
                               e.clientY < rect.top + rect.height / 2;
-                            if (dragOverPath !== col.id)
-                              setDragOverPath(col.id);
-                            if (dropBefore !== before) setDropBefore(before);
-                          }}
-                          onDragLeave={() => {
-                            if (dragOverPath === col.id) setDragOverPath(null);
+                            const slot = before ? index : index + 1;
+                            if (dropSlot !== slot) setDropSlot(slot);
                           }}
                           onDrop={(e) => {
                             e.preventDefault();
-                            if (dragPath)
-                              reorderColumn(dragPath, col.id, dropBefore);
+                            if (dragPath && dropSlot != null)
+                              reorderColumnToSlot(dragPath, dropSlot);
                             setDragPath(null);
-                            setDragOverPath(null);
+                            setDropSlot(null);
                           }}
                           onDragEnd={() => {
                             setDragPath(null);
-                            setDragOverPath(null);
+                            setDropSlot(null);
                           }}
                           className={cn(
                             // SB-Column-Item: standalone #1C1D1F pill, #252729
                             // border. Figma container spec: 8px radius, 8.8px
                             // padding, 8px gap between grip / label / switch.
-                            "flex items-center gap-2 rounded-r-[99px] rounded-l-[60px] border border-[#252729] bg-[#1C1D1F] p-[8.8px] transition-colors cursor-grab active:cursor-grabbing",
+                            "flex items-center gap-2 rounded-e-[99px] rounded-s-[60px] border border-[#252729] bg-[#1C1D1F] p-[8.8px] transition-colors cursor-grab active:cursor-grabbing",
                             isDragging ? "opacity-50" : "hover:bg-[#252729]",
                           )}
                         >
@@ -353,10 +348,14 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
                             />
                           </span>
                         </div>
-                        {isTarget && !dropBefore && <DropLine />}
                       </div>
                     );
                   })}
+                  {/* Drop-at-end indicator: only ever rendered when the slot
+                      points past the last row, so still exactly one line. */}
+                  {dropSlot === orderedColumns.length && dragPath && (
+                    <DropLine />
+                  )}
                 </div>
               )}
             </div>
@@ -373,10 +372,21 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
               ) : (
                 // Single-choice radio list (Figma 1612:30016): selecting a
                 // column sets config.sortBy; direction keeps config.sortOrder.
+                // Rows + dividers are flat siblings so the `peer` pattern
+                // can hide the dividers immediately before AND after a
+                // hovered row.
                 <RadioGroup
                   value={config.sortBy || undefined}
                   onValueChange={(v) => onConfigChange({ sortBy: v })}
-                  className="flex flex-col gap-1 space-y-0 rounded-[12px] bg-[#1C1D1F] p-1"
+                  className={cn(
+                    "flex flex-col space-y-0 rounded-[12px] bg-[#1C1D1F] p-1",
+                    // Wrapper containing the hovered row: hide its OWN
+                    // divider (sits above the row).
+                    "[&>div:has(>[role=radio]:hover)>.dv-divider]:opacity-0",
+                    // Wrapper that directly follows the one with the hovered
+                    // row: hide its divider (sits below the hovered row).
+                    "[&>div:has(>[role=radio]:hover)+div>.dv-divider]:opacity-0",
+                  )}
                 >
                   {sortableColumns.map((col, i) => {
                     const field = fieldByPath.get(col.id);
@@ -384,7 +394,9 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
                       <div key={col.id}>
                         {/* Edge-to-edge divider (Figma: no horizontal
                             inset). */}
-                        {i > 0 && <div className="h-px bg-[#2C2D2E]" />}
+                        {i > 0 && (
+                          <div className="dv-divider h-px bg-[#2C2D2E]" />
+                        )}
                         <RadioRow
                           value={col.id}
                           label={col.label || field?.label || col.id}
@@ -397,18 +409,17 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
             </div>
           </div>
         ) : (
-          <div className="[&>div]:w-full [&>div]:border-r-0 [&>div]:bg-transparent">
-            <FilterPanel
-              data={data}
-              fields={fields}
-              filters={filterState}
-              onFilterChange={(path: string, value: FilterValue) =>
-                onFilterChange({ ...filterState, [path]: value })
-              }
-              onClearAll={() => onFilterChange({})}
-              filterConfig={filterConfig}
-            />
-          </div>
+          <FilterPanel
+            variant="panel"
+            data={data}
+            fields={fields}
+            filters={filterState}
+            onFilterChange={(path: string, value: FilterValue) =>
+              onFilterChange({ ...filterState, [path]: value })
+            }
+            onClearAll={() => onFilterChange({})}
+            filterConfig={filterConfig}
+          />
         )}
       </div>
     </div>

package/apps/lib/components/DataViews/DataViewsHeader.tsx

@@ -1,29 +1,32 @@
-"use client"
+"use client";
 
-import { Settings } from "lucide-react"
-import type { ReactNode } from "react"
-import type { ViewType } from "./types"
-import { Button } from "../Button"
-import { cn } from "../../utils/cn"
+import { Search, Settings } from "lucide-react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import type { ViewType } from "./types";
+import { Button } from "../Button";
+import { cn } from "../../utils/cn";
 
 export type DataViewsHeaderView = {
-  id: ViewType
-  label: string
-  icon: ReactNode
-}
+  id: ViewType;
+  label: string;
+  icon: ReactNode;
+};
 
 type DataViewsHeaderProps = {
-  title: string
-  views: DataViewsHeaderView[]
-  currentView: ViewType
-  onViewChange: (view: ViewType) => void
-  showSettings: boolean
-  settingsOpen: boolean
-  onToggleSettings: () => void
-  onAddNew?: () => void
-  addNewLabel?: string
-  className?: string
-}
+  title: string;
+  views: DataViewsHeaderView[];
+  currentView: ViewType;
+  onViewChange: (view: ViewType) => void;
+  showSettings: boolean;
+  settingsOpen: boolean;
+  onToggleSettings: () => void;
+  onAddNew?: () => void;
+  addNewLabel?: string;
+  searchValue?: string;
+  onSearchChange?: (value: string) => void;
+  searchPlaceholder?: string;
+  className?: string;
+};
 
 export function DataViewsHeader({
   title,
@@ -35,6 +38,9 @@ export function DataViewsHeader({
   onToggleSettings,
   onAddNew,
   addNewLabel = "Add New",
+  searchValue,
+  onSearchChange,
+  searchPlaceholder = "Search...",
   className,
 }: DataViewsHeaderProps) {
   return (
@@ -56,17 +62,17 @@ export function DataViewsHeader({
       </div>
 
       {/* Divider */}
-      <div className="h-7 w-px shrink-0 bg-[#434446]" />
+      <div className="h-5 w-px shrink-0 bg-[#434446]" />
 
       {/* Segmented view switcher */}
-      <div className="flex flex-1 items-center">
+      <div className="flex flex-1 items-center gap-2">
         <div className="flex items-center gap-[2px] rounded-[10px] bg-[#252729] p-[2px] shadow-[inset_0_0_4px_0_rgba(0,0,0,0.08)]">
           {views.map((view, idx) => {
-            const active = view.id === currentView
-            const prevActive = idx > 0 && views[idx - 1].id === currentView
+            const active = view.id === currentView;
+            const prevActive = idx > 0 && views[idx - 1].id === currentView;
             // Separator sits between two inactive tabs only; the active white
             // pill never has a flanking divider (matches Figma).
-            const showDivider = idx > 0 && !active && !prevActive
+            const showDivider = idx > 0 && !active && !prevActive;
             return (
               <div key={view.id} className="flex items-center">
                 {showDivider && (
@@ -89,13 +95,20 @@ export function DataViewsHeader({
                   {view.label}
                 </button>
               </div>
-            )
+            );
           })}
         </div>
       </div>
 
       {/* Action bar */}
       <div className="flex shrink-0 items-center gap-2">
+        {onSearchChange && (
+          <HeaderSearch
+            value={searchValue ?? ""}
+            onChange={onSearchChange}
+            placeholder={searchPlaceholder}
+          />
+        )}
         {onAddNew && (
           <Button
             variant="PrimeStyle"
@@ -122,5 +135,94 @@ export function DataViewsHeader({
         )}
       </div>
     </div>
-  )
+  );
+}
+
+function HeaderSearch({
+  value,
+  onChange,
+  placeholder,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const wrapRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (open) inputRef.current?.focus();
+  }, [open]);
+
+  // Auto-collapse on outside click only when the input is empty — keeps the
+  // expanded state if the user has typed a query but clicks away.
+  useEffect(() => {
+    if (!open) return;
+    function onPointerDown(e: MouseEvent) {
+      if (!wrapRef.current) return;
+      if (wrapRef.current.contains(e.target as Node)) return;
+      if (!value) setOpen(false);
+    }
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, [open, value]);
+
+  function clearAndCollapse() {
+    onChange("");
+    setOpen(false);
+  }
+
+  if (!open) {
+    return (
+      <Button
+        variant="BluContStyle"
+        size="M"
+        buttonType="icon"
+        aria-label="Open search"
+        onClick={() => setOpen(true)}
+        className="shrink-0 rounded-[6px] border border-border-presentation-global-primary"
+      >
+        <Search className="h-[18px] w-[18px]" />
+      </Button>
+    );
+  }
+
+  return (
+    <div
+      ref={wrapRef}
+      className="relative flex h-[28px] w-[260px] shrink-0 items-center justify-center rounded-[6px] border border-border-presentation-state-focus bg-background-presentation-form-field-primary px-1 shadow-[0_1px_6px_0_rgba(0,0,0,0.30)] transition-all duration-150 ease-in-out"
+    >
+      <input
+        ref={inputRef}
+        type="text"
+        value={value}
+        placeholder={placeholder}
+        onChange={(e) => onChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Escape") clearAndCollapse();
+        }}
+        className="flex-1 bg-transparent text-[14px] leading-none text-white caret-[#1E7AFE] placeholder:text-content-presentation-global-tertiary focus:outline-none"
+      />
+      <button
+        type="button"
+        aria-label="Clear search"
+        onClick={clearAndCollapse}
+        className="flex shrink-0 items-center justify-center self-stretch px-1"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+        >
+          <path
+            d="M7.99992 14.6666C4.31802 14.6666 1.33325 11.6818 1.33325 7.99992C1.33325 4.31802 4.31802 1.33325 7.99992 1.33325C11.6818 1.33325 14.6666 4.31802 14.6666 7.99992C14.6666 11.6818 11.6818 14.6666 7.99992 14.6666ZM7.99992 7.05712L6.1143 5.17149L5.17149 6.1143L7.05712 7.99992L5.17149 9.88552L6.1143 10.8283L7.99992 8.94272L9.88552 10.8283L10.8283 9.88552L8.94272 7.99992L10.8283 6.1143L9.88552 5.17149L7.99992 7.05712Z"
+            fill="white"
+          />
+        </svg>
+      </button>
+    </div>
+  );
 }