torch-glare 2.3.0 → 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/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 };

package/apps/lib/components/SearchableSelect.tsx

@@ -251,53 +251,53 @@ export function SearchableSelect({
         <div
           ref={scrollRef}
           onScroll={handleScroll}
-          className="overflow-y-auto overflow-x-hidden scrollbar-hide"
+          className="overflow-y-auto overflow-x-hidden rounded-[10px] scrollbar-hide"
           style={{ maxHeight: maxVisibleItems * ROW_HEIGHT }}
         >
-        {filteredOptions.length > 0 && (
-          // Boxed group container — matches the DropdownMenu's auto-grouped look.
-          <div className="flex flex-col gap-[1px] rounded-[10px] overflow-hidden">
-            {filteredOptions.map((option) => {
-              const isSelected = option.value === value;
-              return (
-                // Same structure as DropdownMenuItem: MenuItemStyles on the
-                // element + a single inner <div> the styles target via [&>div].
-                <button
-                  type="button"
-                  key={option.value}
-                  onClick={() => handleSelect(option)}
-                  data-highlighted={isSelected ? "" : undefined}
-                  className={cn(
-                    MenuItemStyles({ variant: "Default", size: "M" }),
-                    "shrink-0" // keep full row height; the list scrolls instead of squishing
-                  )}
-                >
-                  <div>
-                    {option.icon}
-                    <span className="flex-1 text-start">{option.label}</span>
-                    {isSelected && (
-                      <i className="ri-check-line text-[16px] shrink-0" />
+          {filteredOptions.length > 0 && (
+            // Boxed group container — matches the DropdownMenu's auto-grouped look.
+            <div className="flex flex-col gap-[1px] rounded-[10px] overflow-hidden">
+              {filteredOptions.map((option) => {
+                const isSelected = option.value === value;
+                return (
+                  // Same structure as DropdownMenuItem: MenuItemStyles on the
+                  // element + a single inner <div> the styles target via [&>div].
+                  <button
+                    type="button"
+                    key={option.value}
+                    onClick={() => handleSelect(option)}
+                    data-highlighted={isSelected ? "" : undefined}
+                    className={cn(
+                      MenuItemStyles({ variant: "Default", size: "M" }),
+                      "shrink-0" // keep full row height; the list scrolls instead of squishing
                     )}
-                  </div>
-                </button>
-              );
-            })}
-          </div>
-        )}
+                  >
+                    <div>
+                      {option.icon}
+                      <span className="flex-1 text-start">{option.label}</span>
+                      {isSelected && (
+                        <i className="ri-check-line text-[16px] shrink-0" />
+                      )}
+                    </div>
+                  </button>
+                );
+              })}
+            </div>
+          )}
 
-        {/* Empty state — only when nothing is loading. */}
-        {filteredOptions.length === 0 && !loading && (
-          <div className="px-3 py-2 typography-body-small-regular text-white-alpha-75">
-            No results found
-          </div>
-        )}
+          {/* Empty state — only when nothing is loading. */}
+          {filteredOptions.length === 0 && !loading && (
+            <div className="px-3 py-2 typography-body-small-regular text-white-alpha-75">
+              No results found
+            </div>
+          )}
 
-        {/* Loading row (initial load or fetching the next page). */}
-        {loading && (
-          <div className="flex items-center justify-center py-2">
-            <LoadingIcon size="M" />
-          </div>
-        )}
+          {/* Loading row (initial load or fetching the next page). */}
+          {loading && (
+            <div className="flex items-center justify-center py-2">
+              <LoadingIcon size="M" />
+            </div>
+          )}
 
         </div>
       </PopoverContent>