@lateralus-ai/shipping-ui 2.0.0-dev.21 → 2.0.0-dev.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lateralus-ai/shipping-ui",
-  "version": "2.0.0-dev.21",
+  "version": "2.0.0-dev.23",
   "description": "Shared UI theme and components for Lateralus shipping applications",
   "main": "dist/index.cjs",
   "module": "dist/index.esm.js",

package/src/domain/Filters/FilterDropdown.tsx

@@ -7,7 +7,7 @@ import {
 import * as Popover from "@radix-ui/react-popover";
 import { cn } from "../../utils/cn";
 import { ChevronIcon } from "../../icons/ChevronIcon";
-import { FilterPill } from "./FilterPill";
+import { FilterPill, type FilterPillAppearance } from "./FilterPill";
 
 /** One selectable row at a leaf list. */
 export type FilterOption = {
@@ -45,7 +45,7 @@ export type FilterNestedItem = {
   content: FilterSubmenuContent;
 };
 
-/** Left column row that opens a (possibly nested) submenu on the right. */
+/** Left-column row that opens a (possibly nested) submenu panel. */
 export type FilterCategorySubmenuRow = {
   kind?: "submenu";
   id: string;
@@ -192,14 +192,18 @@ export type FilterDropdownProps = {
   zIndexClass?: string;
   /** Replace the default FilterPill trigger. */
   trigger?: ReactNode;
+  /** Passed to the default FilterPill when `trigger` is omitted. */
+  triggerAppearance?: FilterPillAppearance;
+  /**
+   * Which side the options panel attaches to the category column.
+   * Carets stay on the right of category rows either way.
+   */
+  submenuSide?: "left" | "right";
   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 =
@@ -221,6 +225,8 @@ export function FilterDropdown({
   getOptionLabelStyle,
   zIndexClass = "z-50",
   trigger,
+  triggerAppearance = "filled",
+  submenuSide = "right",
   open: openControlled,
   onOpenChange,
   className,
@@ -240,10 +246,185 @@ export function FilterDropdown({
     ? resolveSubmenuView(activeSubmenuRow.content, navPath)
     : null;
 
-  const showRightPanel = Boolean(activeSubmenuRow && view);
+  const showSubmenuPanel = Boolean(activeSubmenuRow && view);
+  const submenuOpensLeft = submenuSide === "left";
 
   const resetNav = () => setNavPath([]);
 
+  const submenuPanelClass = cn(
+    "bg-background-primary max-h-[min(28rem,calc(100dvh-8rem))] min-w-[200px] max-w-[min(28rem,calc(100vw-2rem))] flex flex-col overflow-hidden border border-divider-primary shadow-raise1",
+    submenuOpensLeft
+      ? "rounded-l-lg rounded-r-none border-r-0"
+      : "rounded-r-lg rounded-l-none border-l-0",
+  );
+
+  const categoryPanelClass = cn(
+    "min-w-[180px] border border-divider-primary bg-background-primary shadow-raise1",
+    showSubmenuPanel
+      ? submenuOpensLeft
+        ? "rounded-r-lg rounded-l-none"
+        : "rounded-l-lg rounded-r-none"
+      : "rounded-lg",
+  );
+
+  const categoryPanel = (
+    <div className={categoryPanelClass}>
+      <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>
+  );
+
+  const submenuPanel =
+    showSubmenuPanel && 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>
+    ) : null;
+
   return (
     <Popover.Root
       open={open}
@@ -257,7 +438,11 @@ export function FilterDropdown({
     >
       <Popover.Trigger asChild>
         {trigger ?? (
-          <FilterPill activeFilterCount={activeFilterCount} className={className} />
+          <FilterPill
+            activeFilterCount={activeFilterCount}
+            appearance={triggerAppearance}
+            className={className}
+          />
         )}
       </Popover.Trigger>
       <Popover.Portal>
@@ -270,165 +455,16 @@ export function FilterDropdown({
           )}
         >
           <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>
+            {submenuOpensLeft ? (
+              <>
+                {submenuPanel}
+                {categoryPanel}
+              </>
+            ) : (
+              <>
+                {categoryPanel}
+                {submenuPanel}
+              </>
             )}
           </div>
         </Popover.Content>

package/src/domain/Filters/FilterPill.tsx

@@ -3,22 +3,29 @@ import { cn } from "../../utils/cn";
 import { FiltersIcon } from "../../icons/generated";
 import { Badge } from "../../primitives/Badge";
 
+export type FilterPillAppearance = "filled" | "ghost";
+
 export type FilterPillProps = Omit<
   ButtonHTMLAttributes<HTMLButtonElement>,
   "children"
 > & {
-  /** When > 0, trigger uses active (blue) fill and shows a count badge. */
+  /** When > 0, shows the orange count badge. */
   activeFilterCount?: number;
+  /**
+   * `filled` — grey idle / blue when active (Figma default).
+   * `ghost` — white idle and active; only hover changes surface color.
+   */
+  appearance?: FilterPillAppearance;
 };
 
 /**
  * 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,
+      appearance = "filled",
       className,
       type = "button",
       "aria-label": ariaLabel = "Filters",
@@ -27,6 +34,7 @@ export const FilterPill = forwardRef<HTMLButtonElement, FilterPillProps>(
     ref,
   ) => {
     const active = activeFilterCount > 0;
+    const ghost = appearance === "ghost";
 
     return (
       <button
@@ -36,9 +44,11 @@ export const FilterPill = forwardRef<HTMLButtonElement, FilterPillProps>(
         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",
+          ghost
+            ? "bg-white text-display-on-light-secondary hover:bg-grey-50 hover:text-display-on-light-primary"
+            : 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}
@@ -48,7 +58,10 @@ export const FilterPill = forwardRef<HTMLButtonElement, FilterPillProps>(
           <Badge
             color="orange"
             type="icon"
-            className="absolute -right-1 -top-2 border-2 border-background-primary text-display-on-light-primary"
+            className={cn(
+              "absolute -right-1 -top-2 border-2 text-display-on-light-primary",
+              ghost ? "border-white" : "border-background-primary",
+            )}
           >
             {activeFilterCount > 99 ? "99+" : activeFilterCount}
           </Badge>

package/src/domain/Filters/FilterPills.tsx

@@ -16,26 +16,19 @@ export type FilterPillsProps = {
 
 /**
  * Partner row for FilterDropdown — active filter pills.
- * Lives outside the dropdown DOM so callers can place it anywhere
- * (same row, new row, sticky footer, etc.).
- *
- * Multi-select chip *content* (when to show, label format) is owned by the
- * consumer; use `formatActiveFilterChipLabel` for audit-prep-style labels.
+ * 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) => {
-  if (chips.length === 0) return null;
-
-  return (
-    <div className={cn("flex 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>
-  );
-};
+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,12 +1,13 @@
 import { cn } from "../../utils/cn";
 import { ClearIcon } from "../../icons";
+import { Tooltip } from "../../primitives/Tooltip";
 
 export type FilteredPillProps = {
   label: string;
   onRemove: () => void;
   removeAriaLabel?: string;
   className?: string;
-  /** Optional tone overrides (e.g. criticality-colored chips). */
+  /** Optional tone overrides. Prefer default beige unless a product needs a custom tone. */
   classNames?: {
     root?: string;
     label?: string;
@@ -16,8 +17,8 @@ export type FilteredPillProps = {
 
 /**
  * Active filter value pill — Figma Filtered (6154:149787).
- * Clear control on the left, label on the right. Partner to FilterDropdown;
- * render via FilterPills outside the dropdown DOM.
+ * Clear control on the left, label on the right. Max 300px with ellipsis;
+ * full label in a tooltip on hover.
  */
 export const FilteredPill = ({
   label,
@@ -26,31 +27,33 @@ export const FilteredPill = ({
   className,
   classNames,
 }: FilteredPillProps) => (
-  <div
-    className={cn(
-      "inline-flex 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`}
+  <Tooltip content={label} hint side="top">
+    <div
       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,
+        "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,
       )}
     >
-      <ClearIcon size="xs" />
-    </button>
-    <span
-      className={cn(
-        "text-caption-2-em text-display-on-light-primary whitespace-nowrap",
-        classNames?.label,
-      )}
-    >
-      {label}
-    </span>
-  </div>
+      <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/index.ts

@@ -10,6 +10,7 @@ export {
 } from "./FilteredPill";
 export {
   FilterPill,
+  type FilterPillAppearance,
   type FilterPillProps,
 } from "./FilterPill";
 export {

package/src/stories/canvases/FiltersCanvas.tsx

@@ -109,6 +109,8 @@ export const FiltersCanvas = () => {
           <FigmaGrid gap={16}>
             <FilterPill />
             <FilterPill activeFilterCount={2} />
+            <FilterPill appearance="ghost" />
+            <FilterPill appearance="ghost" activeFilterCount={2} />
           </FigmaGrid>
         </FigmaSection>
 
@@ -125,6 +127,8 @@ export const FiltersCanvas = () => {
             <div className="flex shrink-0 items-center gap-4">
               <FilterDropdown
                 align="end"
+                submenuSide="left"
+                triggerAppearance="ghost"
                 categoryRows={categoryRows}
                 selectedValuesBySelectionKey={selectedValuesBySelectionKey}
                 activeFilterCount={activeFilterCount}