torch-glare 2.2.1 → 2.4.0

package/apps/lib/components/Badge.tsx

@@ -122,6 +122,12 @@ export const badgeStyles = cva(
     "transition-all duration-200 ease-in-out",
     "whitespace-nowrap",
     "[&_i]:!leading-none",
+    // The subtle variants blend their label/icon with `mix-blend-luminosity`.
+    // `isolate` opens a new stacking context so that blend only composites
+    // against the badge's own background — not against arbitrary page layers
+    // behind it (semi-transparent rows, gradients, masks), which otherwise
+    // ghosts/double-strokes the text in "random" places.
+    "isolate",
   ],
   {
     variants: {

package/apps/lib/components/ContextMenu.tsx

@@ -122,7 +122,7 @@ ContextMenuRadioGroup.displayName = ContextMenuPrimitive.RadioGroup.displayName;
 const ContextMenuContent = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content> &
-  ContextMenuContentProps & { autoGroup?: boolean }
+  ContextMenuContentProps & { autoGroup?: boolean; maxHeight?: number }
 >(
   (
     {
@@ -131,6 +131,8 @@ const ContextMenuContent = React.forwardRef<
       variant = "PresentationStyle",
       autoGroup = true,
       collisionPadding = 8,
+      maxHeight = 320,
+      style,
       children,
       ...props
     },
@@ -141,13 +143,13 @@ const ContextMenuContent = React.forwardRef<
         data-theme={theme}
         ref={ref}
         collisionPadding={collisionPadding}
-        className={cn(
-          menuContentStyles({ variant }),
-          // Cap to the space Radix has after collision handling so a tall menu
-          // scrolls instead of overflowing off-screen.
-          "max-h-[var(--radix-context-menu-content-available-height)]",
-          className
-        )}
+        // Cap at maxHeight, but never exceed the space Radix has after collision
+        // handling. The menu scrolls (overflow on the surface) past this height.
+        style={{
+          maxHeight: `min(${maxHeight}px, var(--radix-context-menu-content-available-height))`,
+          ...style,
+        }}
+        className={cn(menuContentStyles({ variant }), className)}
         {...props}
       >
         {autoGroup ? autoGroupChildren(children) : children}
@@ -388,6 +390,7 @@ const MenuItemStyles = cva(
     "border",
     "border-transparent",
     "flex",
+    "shrink-0", // keep full row height so the menu scrolls instead of squishing
     "items-center",
     "justify-start",
     "text-overflow",
@@ -483,13 +486,13 @@ const menuContentStyles = cva(
     "rounded-[14px]",
     "min-w-[240px]",
     "outline-none",
-    "overflow-scroll",
+    "overflow-y-auto",
+    "overflow-x-hidden",
     // Only animate the OPEN (enter) state. An exit animation on [data-state=closed]
     // holds the old DOM node during close, which breaks close/reposition on a
     // second right-click (Radix issue #2572).
     "data-[state=open]:animate-in",
     "data-[state=open]:fade-in-0",
-    "overflow-x-hidden",
     "scrollbar-hide",
     "backdrop-blur-[21px]",
     "flex gap-1 flex-col",
@@ -509,7 +512,7 @@ const menuContentStyles = cva(
   }
 );
 
-const menuGroupStyles = cva(["flex", "flex-col"], {
+const menuGroupStyles = cva(["flex", "flex-col", "shrink-0"], {
   variants: {
     variant: {
       // Visually contains its items in a bordered card.

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

@@ -30,9 +30,16 @@ export function DataViewRadio({
       <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",
+          // Hardcoded literals so the indicator always renders dark inside the
+          // DataView regardless of the host app's data-theme (matches the
+          // always-dark panel chrome convention). Unselected ring = the spec
+          // CheckBox-Primary border (#626467) + BorderStyle fill
+          // (rgba(255,255,255,0.05)); same tokens the shared Checkbox uses.
+          "border border-[#626467] bg-white/5 transition-colors",
           "group-data-[state=checked]:border-transparent",
-          "group-data-[state=checked]:bg-border-presentation-state-focus",
+          // #0075FF = the previous selected-fill value (border-presentation-state-focus),
+          // now literal so the blue is theme-independent and visually unchanged.
+          "group-data-[state=checked]:bg-[#0075FF]",
         )}
       >
         <RadioGroupPrimitive.Indicator className="flex items-center justify-center">

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

@@ -18,6 +18,7 @@ import type {
 } from "./types";
 
 import { RadioGroup } from "../Radio";
+import { Button } from "../Button";
 import { FilterPanel } from "./FilterPanel";
 import { RadioRow, DataViewsSwitch } from "./PanelControls";
 import { cn } from "../../utils/cn";
@@ -234,7 +235,7 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
           type="button"
           onClick={onClose}
           aria-label="Close panel"
-          className="flex h-7 w-7 items-center justify-center rounded-[8px] bg-white/[0.15] text-white transition-colors hover:bg-white/25"
+          className="flex h-7 w-7 items-center justify-center rounded-[8px] bg-white/[0.15] text-white transition-colors hover:bg-background-presentation-state-negative-primary hover:text-white"
         >
           <X className="h-[18px] w-[18px]" />
         </button>
@@ -262,14 +263,16 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
                   </div>
                 ))}
               </RadioGroup>
-              <button
+              <Button
                 type="button"
+                variant="BorderStyle"
+                size="M"
                 onClick={onSaveNewView}
-                className="flex w-full items-center justify-center gap-1.5 rounded-[4px] bg-white/[0.15] px-1.5 py-0.5 text-[12px] font-[510] text-white transition-colors hover:bg-white/25"
+                className="w-full"
               >
-                <Plus className="h-3 w-3" />
+                <Plus className="h-4 w-4" />
                 Save a New View
-              </button>
+              </Button>
             </div>
 
             <div className="h-px w-full bg-[#2C2D2E]" />
@@ -277,9 +280,6 @@ export function DataViewsConfigPanel(props: DataViewsConfigPanelProps) {
             {/* Table Columns */}
             <div className="space-y-3">
               <SectionHeader title="Table Columns" />
-              <p className="text-[12px] leading-[1.475] text-content-presentation-global-tertiary">
-                Show or hide columns in table view
-              </p>
               {orderedColumns.length === 0 ? (
                 <p className="text-xs text-content-presentation-global-tertiary">
                   No fields detected.

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

@@ -4,6 +4,7 @@ import { Search, Settings } from "lucide-react";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import type { ViewType } from "./types";
 import { Button } from "../Button";
+import { TabSwitch } from "../TabSwitch";
 import { cn } from "../../utils/cn";
 
 export type DataViewsHeaderView = {
@@ -66,38 +67,18 @@ export function DataViewsHeader({
 
       {/* Segmented view switcher */}
       <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;
-            // Separator sits between two inactive tabs only; the active white
-            // pill never has a flanking divider (matches Figma).
-            const showDivider = idx > 0 && !active && !prevActive;
-            return (
-              <div key={view.id} className="flex items-center">
-                {showDivider && (
-                  <div className="mx-[3px] h-3 w-px bg-[#434446]" />
-                )}
-                <button
-                  type="button"
-                  aria-pressed={active}
-                  onClick={() => onViewChange(view.id)}
-                  className={cn(
-                    "flex h-6 items-center gap-[6px] rounded-[8px] px-3 text-[14px] font-[510] leading-none transition-all duration-200 ease-in-out",
-                    active
-                      ? "bg-white text-black shadow-[0_0_10px_2px_rgba(0,0,0,0.25)]"
-                      : "bg-transparent text-white hover:bg-white/5",
-                  )}
-                >
-                  <span className="flex h-[14px] w-[14px] items-center justify-center [&_svg]:h-[14px] [&_svg]:w-[14px]">
-                    {view.icon}
-                  </span>
-                  {view.label}
-                </button>
-              </div>
-            );
-          })}
-        </div>
+        <TabSwitch
+          // The header bar is always dark, so the switcher resolves dark-theme
+          // tokens regardless of the host app's theme.
+          theme="dark"
+          value={currentView}
+          onValueChange={onViewChange}
+          options={views.map((view) => ({
+            value: view.id,
+            label: view.label,
+            icon: view.icon,
+          }))}
+        />
       </div>
 
       {/* Action bar */}

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

@@ -30,9 +30,11 @@ import {
   resolvePresets,
 } from "../../utils/dataViews/rangeUtils"
 import { RangeSliderWithInputs } from "./filters/RangeSliderWithInputs"
-import { DateRangePopover } from "./filters/DateRangePopover"
+import { DatePickerRangeFilter } from "./filters/DatePickerRangeFilter"
 import { PresetChips } from "./filters/PresetChips"
 import { resolveBadgeVariant } from "./badgeAdapter"
+import { SearchableSelect } from "../SearchableSelect"
+import type { SearchableSelectOption } from "../SearchableSelect"
 
 type FilterPanelProps = {
   data: DynamicRecord[]
@@ -346,21 +348,36 @@ function FilterBody({
   }
 
   if (entry.kind === "date-range" && entry.field) {
-    const presets = resolvePresets(entry.field)
     const dateValue: DateRangeFilter | undefined = isDateRange(value) ? value : undefined
-    return (
-      <DateRangePopover
-        value={dateValue}
-        onChange={onSetFilter}
-        presets={presets.length > 0 ? presets : undefined}
-      />
-    )
+    // Glare DatePicker in range mode — pick a from→to span. (No quick-preset
+    // chips: the calendar range selection is the single intended interaction.)
+    return <DatePickerRangeFilter value={dateValue} onChange={onSetFilter} />
   }
 
   const opts = getCategoricalOptions(data, entry.path, entry.field, entry.legacy)
   const selected = Array.isArray(value) ? value : []
   const isSingle = entry.field?.filterMode === "single"
 
+  // Searchable single-select dropdown — for fields with many options. Stores
+  // the chosen value as a 1-element array (empty when cleared) to stay
+  // consistent with the categorical FilterValue shape.
+  if (entry.field?.filterVariant === "searchable-select") {
+    const selectOptions: SearchableSelectOption[] = opts.map((opt) => ({
+      value: opt,
+      label: opt,
+    }))
+    const current = selected[0] ?? null
+    return (
+      <SearchableSelect
+        options={selectOptions}
+        value={current}
+        onValueChange={(v) => onSetFilter(v ? [v] : [])}
+        placeholder={`Select ${entry.label}…`}
+        icon={<i className="ri-search-line" />}
+      />
+    )
+  }
+
   if (isSingle) {
     const current = selected[0] ?? ""
     const onSingleChange = (next: string) => onSetFilter(next ? [next] : [])

package/apps/lib/components/DataViews/filters/DatePickerRangeFilter.tsx

@@ -0,0 +1,80 @@
+"use client"
+
+import { type ChangeEventHandler } from "react"
+import { DatePicker } from "../../DatePicker"
+import { InputField } from "../../InputField"
+import { ActionButton } from "../../ActionButton"
+import type { DateRangeFilter } from "../types"
+import { toIsoDate } from "../../../utils/dataViews/rangeUtils"
+
+type Props = {
+  value: DateRangeFilter | undefined
+  onChange: (next: DateRangeFilter) => void
+}
+
+/** Parse an ISO `yyyy-MM-dd` string to a local Date (noon-safe, no TZ drift). */
+function parseIso(iso?: string): Date | undefined {
+  return iso ? new Date(iso + "T00:00:00") : undefined
+}
+
+/** One labeled single-date Glare DatePicker bound to one end of the range. */
+function DateBound({
+  caption,
+  iso,
+  placeholder,
+  onPick,
+}: {
+  caption: string
+  iso?: string
+  placeholder: string
+  onPick: (next?: string) => void
+}) {
+  return (
+    <label className="flex items-center gap-2">
+      <span className="w-9 shrink-0 typography-body-small-regular text-content-presentation-global-secondary">
+        {caption}
+      </span>
+      <div className="flex-1 min-w-0">
+        <DatePicker
+          mode="single"
+          size="S"
+          value={parseIso(iso) ?? (undefined as never)}
+          dateFormat="yyyy-MM-dd"
+          // Single mode reports `{ target: { value: Date } }` (it casts internally).
+          onChange={((e: { target: { value: Date | undefined } }) => {
+            const d = e?.target?.value
+            onPick(d instanceof Date ? toIsoDate(d) : undefined)
+          }) as unknown as ChangeEventHandler<HTMLInputElement>}
+        >
+          <InputField
+            readOnly
+            value={iso ?? ""}
+            placeholder={placeholder}
+            childrenSide={
+              <ActionButton type="button" size="S" aria-label={`Pick ${caption} date`}>
+                <i className="ri-calendar-event-line" />
+              </ActionButton>
+            }
+          />
+        </DatePicker>
+      </div>
+    </label>
+  )
+}
+
+/**
+ * Date-range filter as two separate Glare DatePickers — a "From" and a "To"
+ * single-date picker. Each writes only its own bound, preserving the other, so
+ * the result is still a `DateRangeFilter` ({ from, to }).
+ */
+export function DatePickerRangeFilter({ value, onChange }: Props) {
+  const setBound = (key: "from" | "to") => (next?: string) =>
+    onChange({ kind: "date", from: value?.from, to: value?.to, [key]: next })
+
+  return (
+    <div className="space-y-2">
+      <DateBound caption="From" iso={value?.from} placeholder="Start date" onPick={setBound("from")} />
+      <DateBound caption="To" iso={value?.to} placeholder="End date" onPick={setBound("to")} />
+    </div>
+  )
+}

package/apps/lib/components/DataViews/types.ts

@@ -160,6 +160,14 @@ export type FieldConfig = {
    * - "single": radios, single-select. FilterValue is a 1-element array.
    */
   filterMode?: "single" | "multi"
+  /**
+   * Categorical filter control style.
+   * - "checkbox" (default): inline list of checkboxes (multi) or radios (single).
+   * - "searchable-select": a single-select SearchableSelect dropdown — useful
+   *   when a field has many options. Implies single-select; the FilterValue is
+   *   a 1-element array (or empty when cleared).
+   */
+  filterVariant?: "checkbox" | "searchable-select"
   presets?: FieldPreset[]
   rangeMin?: number
   rangeMax?: number

package/apps/lib/components/DatePicker.tsx

@@ -63,7 +63,12 @@ export const DatePicker = forwardRef(
                     ? value
                     : [value]
                 : mode == "range"
-                    ? { from: value, to: value }
+                    // Accept a DateRange ({ from, to }) directly, or wrap a single
+                    // Date into a one-day range.
+                    ? value && typeof value === "object" && !(value instanceof Date) &&
+                      ("from" in value || "to" in value)
+                        ? (value as DateRange)
+                        : { from: value, to: value }
                     : value;
         const [date, setDate] = useState<Date[] | Date | DateRange | undefined>(initialDate);
         const [pickerValue, setPickerValue] = useState<TimePickerValue>({

package/apps/lib/components/DropdownMenu.tsx

@@ -50,7 +50,7 @@ DropdownMenuRadioGroup.displayName =
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> &
-  DropdownMenuProps & { autoGroup?: boolean }
+  DropdownMenuProps & { autoGroup?: boolean; maxHeight?: number }
 >(
   (
     {
@@ -60,6 +60,8 @@ const DropdownMenuContent = React.forwardRef<
       variant = "PresentationStyle",
       autoGroup = true,
       collisionPadding = 8,
+      maxHeight = 320,
+      style,
       children,
       ...props
     },
@@ -71,13 +73,13 @@ const DropdownMenuContent = React.forwardRef<
         ref={ref}
         sideOffset={sideOffset}
         collisionPadding={collisionPadding}
-        className={cn(
-          menuContentStyles({ variant }),
-          // Cap to the space Radix has after collision handling so a tall menu
-          // scrolls instead of overflowing off-screen.
-          "max-h-[var(--radix-dropdown-menu-content-available-height)]",
-          className
-        )}
+        // Cap at maxHeight, but never exceed the space Radix has after collision
+        // handling. The menu scrolls (overflow on the surface) past this height.
+        style={{
+          maxHeight: `min(${maxHeight}px, var(--radix-dropdown-menu-content-available-height))`,
+          ...style,
+        }}
+        className={cn(menuContentStyles({ variant }), className)}
         {...props}
       >
         {autoGroup ? autoGroupChildren(children) : children}
@@ -398,6 +400,7 @@ export const MenuItemStyles = cva(
     "border",
     "border-transparent",
     "flex",
+    "shrink-0", // keep full row height so the menu scrolls instead of squishing
     "items-center",
     "justify-start",
     "text-overflow",
@@ -493,13 +496,13 @@ export const menuContentStyles = cva(
     "rounded-[14px]",
     "min-w-[240px]",
     "outline-none",
-    "overflow-scroll",
+    "overflow-y-auto",
+    "overflow-x-hidden",
     // Only animate the OPEN (enter) state. An exit animation on [data-state=closed]
     // holds the old DOM node during close, which breaks the context menu's
     // close/reposition on a second right-click (Radix issue #2572).
     "data-[state=open]:animate-in",
     "data-[state=open]:fade-in-0",
-    "overflow-x-hidden",
     "scrollbar-hide",
     "backdrop-blur-[21px]",
     "flex gap-1 flex-col",
@@ -519,7 +522,7 @@ export const menuContentStyles = cva(
   }
 );
 
-export const menuGroupStyles = cva(["flex", "flex-col"], {
+export const menuGroupStyles = cva(["flex", "flex-col", "shrink-0"], {
   variants: {
     variant: {
       // Visually contains its items in a bordered card.

package/apps/lib/components/HeaderBar.tsx

@@ -0,0 +1,127 @@
+import React, { forwardRef } from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../utils/cn";
+import { Themes } from "../utils/types";
+
+/**
+ * HeaderBar
+ *
+ * A variant-driven header chip showing two text pieces inside a single
+ * rounded container:
+ *  - `label` -> the colored emphasis pill (BADGE piece)
+ *  - `title` -> the plain text (PLAIN piece)
+ *
+ * The `variant` controls BOTH the colors AND the DOM order:
+ *  - "new"  / "edit"  -> [badge(label)] [plain(title)]   (badge on the LEFT)
+ *  - "detail"         -> [plain(title)] [badge(label)]    (badge on the RIGHT)
+ *
+ * Example usage:
+ *  - new:    <HeaderBar variant="new"    label="New"   title="sales iNVOICE" />
+ *  - edit:   <HeaderBar variant="edit"   label="edit"  title="sales iNVOICE" />
+ *  - detail: <HeaderBar variant="detail" label="de-344" title="sales iNVOICE" />
+ *            (renders plain "sales iNVOICE" on the LEFT, colored "de-344" on the RIGHT)
+ */
+
+// Inner row: order is reversed for "detail" so the badge ends up on the right.
+const rowStyles = cva(["flex", "items-center"], {
+  variants: {
+    variant: {
+      new: "flex-row",
+      edit: "flex-row",
+      detail: "flex-row-reverse",
+    },
+  },
+  defaultVariants: {
+    variant: "new",
+  },
+});
+
+// Colored pill holding `label`.
+const badgeStyles = cva(
+  [
+    "flex",
+    "h-8",
+    "items-center",
+    "justify-center",
+    "gap-2.5",
+    "rounded-lg",
+    "px-1",
+  ],
+  {
+    variants: {
+      variant: {
+        new: "bg-blue-sparkle-alpha-50",
+        edit: "bg-orange-alpha-50",
+        detail: "bg-white-alpha-30",
+      },
+    },
+    defaultVariants: {
+      variant: "new",
+    },
+  },
+);
+
+// Text inside the colored pill.
+const badgeTextStyles = cva(
+  [
+    "font-sans",
+    "text-[28px]",
+    "font-[510]",
+    "leading-normal",
+    "uppercase",
+    "[font-feature-settings:'cv05'_on]",
+  ],
+  {
+    variants: {
+      variant: {
+        new: "text-blue-sparkle-200",
+        edit: "text-orange-200",
+        detail: "text-white-00",
+      },
+    },
+    defaultVariants: {
+      variant: "new",
+    },
+  },
+);
+
+interface HeaderBarProps
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof rowStyles> {
+  theme?: Themes;
+  /** The colored emphasis pill text. */
+  label: string;
+  /** The plain text. */
+  title: string;
+}
+
+const HeaderBar = forwardRef<HTMLDivElement, HeaderBarProps>(
+  ({ variant = "new", label, title, theme, className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        data-theme={theme}
+        className={cn(
+          "inline-flex flex-col items-start rounded-[14px] border border-black-600 bg-black-1000 p-1.5 shadow-[0_0_32px_2px_rgba(0,0,0,0.05),0_0_32px_2px_rgba(0,0,0,0.05)]",
+          className,
+        )}
+        {...props}
+      >
+        <div className={cn(rowStyles({ variant }))}>
+          <div className={cn(badgeStyles({ variant }))}>
+            <p className={cn(badgeTextStyles({ variant }))}>{label}</p>
+          </div>
+          <div className="flex h-8 items-center justify-center px-1.5">
+            <p className="font-sans text-[28px] font-[510] leading-normal uppercase text-white-00 [font-feature-settings:'cv05'_on]">
+              {title}
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+HeaderBar.displayName = "HeaderBar";
+
+export default HeaderBar;
+export { HeaderBar };