@lateralus-ai/shipping-ui 2.0.0-dev.20 → 2.0.0-dev.22

package/src/domain/Filters/FilterDropdown.tsx

@@ -0,0 +1,438 @@
+import {
+  useState,
+  type ComponentType,
+  type CSSProperties,
+  type ReactNode,
+} from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { cn } from "../../utils/cn";
+import { ChevronIcon } from "../../icons/ChevronIcon";
+import { FilterPill } from "./FilterPill";
+
+/** One selectable row at a leaf list. */
+export type FilterOption = {
+  value: string;
+  label: string;
+  icon?: ComponentType<{ className?: string }>;
+};
+
+export type FilterSelectionMode = "multi" | "single";
+
+/**
+ * Recursive submenu: options leaf, nested folders, or custom panel (e.g. date range).
+ */
+export type FilterSubmenuContent =
+  | {
+      type: "options";
+      /** Key into `selectedValuesBySelectionKey` / `onSelectOption` */
+      selectionKey: string;
+      /** `multi` (default) toggles; `single` is exclusive — still one check slot reserved. */
+      selectionMode?: FilterSelectionMode;
+      options: FilterOption[];
+    }
+  | {
+      type: "nested";
+      items: FilterNestedItem[];
+    }
+  | {
+      type: "custom";
+      render: () => ReactNode;
+    };
+
+export type FilterNestedItem = {
+  id: string;
+  label: string;
+  content: FilterSubmenuContent;
+};
+
+/** Left column row that opens a (possibly nested) submenu on the right. */
+export type FilterCategorySubmenuRow = {
+  kind?: "submenu";
+  id: string;
+  label: string;
+  content: FilterSubmenuContent;
+};
+
+/** Left column row: inline check toggle (no right panel). */
+export type FilterCategoryToggleRow = {
+  kind: "toggle";
+  id: string;
+  label: string;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+};
+
+export type FilterCategoryRow =
+  | FilterCategorySubmenuRow
+  | FilterCategoryToggleRow;
+
+function isToggleRow(row: FilterCategoryRow): row is FilterCategoryToggleRow {
+  return row.kind === "toggle";
+}
+
+function isSubmenuRow(row: FilterCategoryRow): row is FilterCategorySubmenuRow {
+  return !isToggleRow(row);
+}
+
+type ResolvedSubmenuView =
+  | { kind: "folders"; items: FilterNestedItem[]; trail: string[] }
+  | {
+      kind: "options";
+      selectionKey: string;
+      selectionMode: FilterSelectionMode;
+      options: FilterOption[];
+      trail: string[];
+    }
+  | { kind: "custom"; render: () => ReactNode; trail: string[] };
+
+/** Walk `path` (folder ids) from `content` to the current view. */
+export function resolveSubmenuView(
+  content: FilterSubmenuContent,
+  path: string[],
+): ResolvedSubmenuView {
+  if (content.type === "options") {
+    return {
+      kind: "options",
+      selectionKey: content.selectionKey,
+      selectionMode: content.selectionMode ?? "multi",
+      options: content.options,
+      trail: [],
+    };
+  }
+  if (content.type === "custom") {
+    return { kind: "custom", render: content.render, trail: [] };
+  }
+  if (path.length === 0) {
+    return { kind: "folders", items: content.items, trail: [] };
+  }
+  const [head, ...tail] = path;
+  const child = content.items.find((i) => i.id === head);
+  if (!child) {
+    return { kind: "folders", items: content.items, trail: [] };
+  }
+  if (child.content.type === "options") {
+    return {
+      kind: "options",
+      selectionKey: child.content.selectionKey,
+      selectionMode: child.content.selectionMode ?? "multi",
+      options: child.content.options,
+      trail: [child.label],
+    };
+  }
+  if (child.content.type === "custom") {
+    return {
+      kind: "custom",
+      render: child.content.render,
+      trail: [child.label],
+    };
+  }
+  if (tail.length === 0) {
+    return {
+      kind: "folders",
+      items: child.content.items,
+      trail: [child.label],
+    };
+  }
+  const inner = resolveSubmenuView(child.content, tail);
+  return {
+    ...inner,
+    trail: [child.label, ...inner.trail],
+  };
+}
+
+function CheckMark({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      fill="none"
+      aria-hidden
+      className={cn("size-4 shrink-0", className)}
+    >
+      <path
+        d="M3.5 8.5L6.5 11.5L12.5 4.5"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/** Always reserves check width so the panel does not jump when selection moves. */
+function CheckSlot({ selected }: { selected: boolean }) {
+  return (
+    <CheckMark
+      className={cn(
+        "text-blue-600",
+        selected ? "visible" : "invisible",
+      )}
+    />
+  );
+}
+
+export type FilterDropdownProps = {
+  align?: "start" | "center" | "end";
+  sideOffset?: number;
+  /** Left column: submenu roots and/or toggles. */
+  categoryRows: FilterCategoryRow[];
+  selectedValuesBySelectionKey: Record<string, string[] | undefined>;
+  /**
+   * Fired when an option is activated. For `multi`, consumers typically toggle;
+   * for `single`, replace the selection with `[optionValue]`.
+   */
+  onSelectOption: (selectionKey: string, optionValue: string) => void;
+  onResetAll: () => void;
+  resetAllLabel?: string;
+  activeFilterCount: number;
+  getOptionLabelStyle?: (
+    selectionKey: string,
+    optionValue: string,
+  ) => CSSProperties | undefined;
+  zIndexClass?: string;
+  /** Replace the default FilterPill trigger. */
+  trigger?: ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+};
+
+const submenuPanelClass =
+  "bg-background-primary rounded-lg shadow-raise1 border border-divider-primary border-l-0 rounded-l-none min-w-[200px] max-w-[min(28rem,calc(100vw-2rem))] max-h-[min(28rem,calc(100dvh-8rem))] flex flex-col overflow-hidden";
+
+const scrollClass = "py-2 overflow-y-auto overscroll-y-contain flex-1 min-h-0";
+
+const rowClass =
+  "w-full flex items-center justify-between gap-4 px-4 py-2 text-left transition-colors hover:bg-grey-50";
+
+/**
+ * Filters trigger + two-column popover (audit-prep pattern).
+ * Supports multi/single option leaves, nested folders, custom panels, and toggles.
+ */
+export function FilterDropdown({
+  align = "start",
+  sideOffset = 4,
+  categoryRows,
+  selectedValuesBySelectionKey,
+  onSelectOption,
+  onResetAll,
+  resetAllLabel = "Reset all",
+  activeFilterCount,
+  getOptionLabelStyle,
+  zIndexClass = "z-50",
+  trigger,
+  open: openControlled,
+  onOpenChange,
+  className,
+}: FilterDropdownProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const open = openControlled ?? uncontrolledOpen;
+  const setOpen = onOpenChange ?? setUncontrolledOpen;
+
+  const [activeSubmenuId, setActiveSubmenuId] = useState<string | null>(null);
+  const [navPath, setNavPath] = useState<string[]>([]);
+
+  const activeSubmenuRow = categoryRows.find(
+    (r) => isSubmenuRow(r) && r.id === activeSubmenuId,
+  ) as FilterCategorySubmenuRow | undefined;
+
+  const view = activeSubmenuRow
+    ? resolveSubmenuView(activeSubmenuRow.content, navPath)
+    : null;
+
+  const showRightPanel = Boolean(activeSubmenuRow && view);
+
+  const resetNav = () => setNavPath([]);
+
+  return (
+    <Popover.Root
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (!next) {
+          setActiveSubmenuId(null);
+          setNavPath([]);
+        }
+      }}
+    >
+      <Popover.Trigger asChild>
+        {trigger ?? (
+          <FilterPill activeFilterCount={activeFilterCount} className={className} />
+        )}
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          align={align}
+          sideOffset={sideOffset}
+          className={cn(
+            zIndexClass,
+            "w-auto border-0 bg-transparent p-0 shadow-none outline-none",
+          )}
+        >
+          <div className="flex items-start gap-0">
+            <div className="min-w-[180px] rounded-lg border border-divider-primary bg-background-primary shadow-raise1">
+              <div className="py-2">
+                {categoryRows.map((row) =>
+                  isToggleRow(row) ? (
+                    <button
+                      key={row.id}
+                      type="button"
+                      onClick={() => row.onCheckedChange(!row.checked)}
+                      className={cn(rowClass, row.checked && "bg-grey-50")}
+                    >
+                      <span className="text-body text-display-on-light-primary">
+                        {row.label}
+                      </span>
+                      <CheckSlot selected={row.checked} />
+                    </button>
+                  ) : (
+                    <button
+                      key={row.id}
+                      type="button"
+                      onClick={() => {
+                        if (activeSubmenuId === row.id) {
+                          setActiveSubmenuId(null);
+                          resetNav();
+                        } else {
+                          setActiveSubmenuId(row.id);
+                          resetNav();
+                        }
+                      }}
+                      className={cn(
+                        rowClass,
+                        activeSubmenuId === row.id && "bg-grey-50",
+                      )}
+                    >
+                      <span className="text-body text-display-on-light-primary">
+                        {row.label}
+                      </span>
+                      <ChevronIcon
+                        direction="right"
+                        size="small"
+                        className={cn(
+                          "text-grey-400 transition-transform",
+                          activeSubmenuId === row.id && "rotate-90",
+                        )}
+                      />
+                    </button>
+                  ),
+                )}
+
+                <div className="mt-2 border-t border-divider-primary pt-2">
+                  <button
+                    type="button"
+                    onClick={onResetAll}
+                    className={cn(rowClass)}
+                  >
+                    <span className="text-body text-display-on-light-primary">
+                      {resetAllLabel}
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {showRightPanel && view && (
+              <div className={cn(submenuPanelClass, "flex flex-col")}>
+                {navPath.length > 0 && (
+                  <div className="flex-shrink-0 border-b border-grey-100 px-2 py-1.5">
+                    <button
+                      type="button"
+                      onClick={() => setNavPath((p) => p.slice(0, -1))}
+                      className="flex w-full items-center gap-1 rounded-md px-2 py-1 text-left text-caption-2-em text-display-on-light-secondary hover:bg-grey-50"
+                    >
+                      <ChevronIcon
+                        direction="left"
+                        size="small"
+                        className="shrink-0"
+                      />
+                      Back
+                    </button>
+                  </div>
+                )}
+                {view.trail.length > 0 && (
+                  <div className="flex-shrink-0 truncate px-4 pb-1 pt-2 text-footnote text-grey-500">
+                    {view.trail.join(" › ")}
+                  </div>
+                )}
+                <div className={scrollClass}>
+                  {view.kind === "folders" ? (
+                    view.items.length === 0 ? (
+                      <p className="px-4 py-2 text-body text-grey-500">
+                        No options
+                      </p>
+                    ) : (
+                      view.items.map((item) => (
+                        <button
+                          key={item.id}
+                          type="button"
+                          onClick={() => setNavPath((p) => [...p, item.id])}
+                          className={rowClass}
+                        >
+                          <span className="text-body text-display-on-light-primary">
+                            {item.label}
+                          </span>
+                          <ChevronIcon
+                            direction="right"
+                            size="small"
+                            className="shrink-0 text-grey-400"
+                          />
+                        </button>
+                      ))
+                    )
+                  ) : view.kind === "custom" ? (
+                    <div className="p-4">{view.render()}</div>
+                  ) : view.options.length === 0 ? (
+                    <p className="px-4 py-2 text-body text-grey-500">
+                      No options
+                    </p>
+                  ) : (
+                    view.options.map((option) => {
+                      const selected =
+                        selectedValuesBySelectionKey[
+                          view.selectionKey
+                        ]?.includes(option.value) ?? false;
+                      const Icon = option.icon;
+                      const labelStyle = getOptionLabelStyle?.(
+                        view.selectionKey,
+                        option.value,
+                      );
+                      return (
+                        <button
+                          key={option.value}
+                          type="button"
+                          onClick={() =>
+                            onSelectOption(view.selectionKey, option.value)
+                          }
+                          className={cn(rowClass, selected && "bg-grey-100")}
+                        >
+                          <div className="flex min-w-0 items-center gap-2">
+                            {Icon && (
+                              <Icon className="h-4 w-4 shrink-0" />
+                            )}
+                            <span
+                              className={cn(
+                                "text-body",
+                                labelStyle
+                                  ? undefined
+                                  : "text-display-on-light-primary",
+                              )}
+                              style={labelStyle}
+                            >
+                              {option.label}
+                            </span>
+                          </div>
+                          <CheckSlot selected={selected} />
+                        </button>
+                      );
+                    })
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+}

package/src/domain/Filters/FilterPill.tsx

@@ -1,25 +1,61 @@
+import { forwardRef, type ButtonHTMLAttributes } from "react";
 import { cn } from "../../utils/cn";
 import { FiltersIcon } from "../../icons/generated";
+import { Badge } from "../../primitives/Badge";
 
-export type FilterPillIndicator = "on" | "off";
-
-export type FilterPillProps = {
-  indicator?: FilterPillIndicator;
-  className?: string;
+export type FilterPillProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "children"
+> & {
+  /** When > 0, trigger uses active (blue) fill and shows a count badge. */
+  activeFilterCount?: number;
 };
 
-export const FilterPill = ({ indicator = "off", className }: FilterPillProps) => (
-  <button
-    type="button"
-    aria-label="Filters"
-    className={cn(
-      "relative flex size-9 items-center justify-center rounded-full bg-background-secondary text-display-on-light-secondary transition-colors hover:text-display-on-light-primary",
+/**
+ * Filter trigger — Figma Filter Pill (6154:149608 / 6154:149599).
+ * Idle: grey-100. Active: accent blue-100 + orange count badge.
+ */
+export const FilterPill = forwardRef<HTMLButtonElement, FilterPillProps>(
+  (
+    {
+      activeFilterCount = 0,
       className,
-    )}
-  >
-    <FiltersIcon size="small" />
-    {indicator === "on" && (
-      <span className="absolute right-1 top-1 size-2 rounded-full bg-blue-600" aria-hidden />
-    )}
-  </button>
+      type = "button",
+      "aria-label": ariaLabel = "Filters",
+      ...props
+    },
+    ref,
+  ) => {
+    const active = activeFilterCount > 0;
+
+    return (
+      <button
+        ref={ref}
+        type={type}
+        aria-label={ariaLabel}
+        aria-pressed={active}
+        className={cn(
+          "relative flex size-9 shrink-0 items-center justify-center rounded-full transition-colors",
+          active
+            ? "bg-accent-bg-light text-display-on-light-secondary hover:text-display-on-light-primary"
+            : "bg-background-secondary text-display-on-light-secondary hover:text-display-on-light-primary",
+          className,
+        )}
+        {...props}
+      >
+        <FiltersIcon size="small" />
+        {active && (
+          <Badge
+            color="orange"
+            type="icon"
+            className="absolute -right-1 -top-2 border-2 border-background-primary text-display-on-light-primary"
+          >
+            {activeFilterCount > 99 ? "99+" : activeFilterCount}
+          </Badge>
+        )}
+      </button>
+    );
+  },
 );
+
+FilterPill.displayName = "FilterPill";

package/src/domain/Filters/FilterPills.tsx

@@ -0,0 +1,34 @@
+import { cn } from "../../utils/cn";
+import { FilteredPill, type FilteredPillProps } from "./FilteredPill";
+
+export type FilterPillsItem = {
+  key: string;
+  label: string;
+  onRemove: () => void;
+  removeAriaLabel?: string;
+  classNames?: FilteredPillProps["classNames"];
+};
+
+export type FilterPillsProps = {
+  chips: FilterPillsItem[];
+  className?: string;
+};
+
+/**
+ * Partner row for FilterDropdown — active filter pills.
+ * Always renders the row wrapper (even when empty) so sibling filter
+ * triggers can stay pinned with `ml-auto` / flex layouts.
+ */
+export const FilterPills = ({ chips, className }: FilterPillsProps) => (
+  <div className={cn("flex min-w-0 flex-wrap items-start gap-2", className)}>
+    {chips.map((chip) => (
+      <FilteredPill
+        key={chip.key}
+        label={chip.label}
+        onRemove={chip.onRemove}
+        removeAriaLabel={chip.removeAriaLabel}
+        classNames={chip.classNames}
+      />
+    ))}
+  </div>
+);

package/src/domain/Filters/FilteredPill.tsx

@@ -1,39 +1,59 @@
 import { cn } from "../../utils/cn";
 import { ClearIcon } from "../../icons";
-
-export type FilteredPillState = "idle" | "hover";
+import { Tooltip } from "../../primitives/Tooltip";
 
 export type FilteredPillProps = {
-  label?: string;
-  count?: number;
-  state?: FilteredPillState;
+  label: string;
+  onRemove: () => void;
+  removeAriaLabel?: string;
   className?: string;
+  /** Optional tone overrides. Prefer default beige unless a product needs a custom tone. */
+  classNames?: {
+    root?: string;
+    label?: string;
+    remove?: string;
+  };
 };
 
-const stateStyles: Record<FilteredPillState, string> = {
-  idle: "bg-background-secondary text-display-on-light-tertiary",
-  hover: "bg-grey-200 text-display-on-light-primary",
-};
-
+/**
+ * Active filter value pill — Figma Filtered (6154:149787).
+ * Clear control on the left, label on the right. Max 300px with ellipsis;
+ * full label in a tooltip on hover.
+ */
 export const FilteredPill = ({
-  label = "Filtered",
-  count = 12,
-  state = "idle",
+  label,
+  onRemove,
+  removeAriaLabel,
   className,
+  classNames,
 }: FilteredPillProps) => (
-  <button
-    type="button"
-    className={cn(
-      "inline-flex min-h-9 items-center gap-2 rounded-full px-3 py-1 transition-colors",
-      stateStyles[state],
-      state === "idle" && "hover:bg-grey-200 hover:text-display-on-light-primary",
-      className,
-    )}
-  >
-    <span className="text-caption-2-em">{label}</span>
-    <span className="flex size-6 items-center justify-center rounded-full bg-background-primary text-footnote-em">
-      {count}
-    </span>
-    <ClearIcon size="xs" />
-  </button>
+  <Tooltip content={label} hint side="top">
+    <div
+      className={cn(
+        "inline-flex max-w-[300px] min-h-9 items-center justify-center gap-2.5 rounded-full bg-background-secondary px-3 py-1",
+        classNames?.root,
+        className,
+      )}
+    >
+      <button
+        type="button"
+        onClick={onRemove}
+        aria-label={removeAriaLabel ?? `Remove ${label} filter`}
+        className={cn(
+          "inline-flex size-4 shrink-0 items-center justify-center rounded-control text-display-on-light-secondary transition-colors hover:text-display-on-light-primary",
+          classNames?.remove,
+        )}
+      >
+        <ClearIcon size="xs" />
+      </button>
+      <span
+        className={cn(
+          "min-w-0 truncate text-caption-2-em text-display-on-light-primary",
+          classNames?.label,
+        )}
+      >
+        {label}
+      </span>
+    </div>
+  </Tooltip>
 );

package/src/domain/Filters/FiltersBar.tsx

@@ -1,6 +1,7 @@
 import { cn } from "../../utils/cn";
-import { FiltersIcon } from "../../icons/generated";
 import { SearchIcon } from "../../icons/generated";
+import { FilterPill } from "./FilterPill";
+import { FilterPills } from "./FilterPills";
 
 export type FiltersBarTabs = "on" | "off";
 export type FiltersBarFilters = "on" | "off";
@@ -47,30 +48,25 @@ export const FiltersBar = ({
         </div>
       )}
       <div className="flex shrink-0 items-center gap-4">
-        <button
-          type="button"
-          aria-label="Open filters"
-          className="flex size-9 items-center justify-center rounded-full bg-background-secondary text-display-on-light-secondary hover:text-display-on-light-primary"
-        >
-          <FiltersIcon size="small" />
-        </button>
+        <FilterPill
+          activeFilterCount={filters === "on" ? filterChips.length : 0}
+        />
         <div className="flex w-[250px] items-center gap-2 rounded-md border border-divider-primary px-3 py-2">
-          <span className="flex-1 text-body text-display-on-light-secondary">{searchPlaceholder}</span>
+          <span className="flex-1 text-body text-display-on-light-secondary">
+            {searchPlaceholder}
+          </span>
           <SearchIcon size="small" className="text-display-on-light-tertiary" />
         </div>
       </div>
     </div>
     {filters === "on" && (
-      <div className="flex flex-wrap gap-2">
-        {filterChips.map((chip) => (
-          <span
-            key={chip}
-            className="rounded-full bg-background-secondary px-3 py-1.5 text-caption-2-em text-display-on-light-tertiary"
-          >
-            {chip}
-          </span>
-        ))}
-      </div>
+      <FilterPills
+        chips={filterChips.map((chip) => ({
+          key: chip,
+          label: chip,
+          onRemove: () => undefined,
+        }))}
+      />
     )}
   </div>
 );