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

package/src/domain/Filters/FilterPill.tsx

@@ -1,61 +1,74 @@
-import { forwardRef, type ButtonHTMLAttributes } from "react";
-import { cn } from "../../utils/cn";
-import { FiltersIcon } from "../../icons/generated";
-import { Badge } from "../../primitives/Badge";
-
-export type FilterPillProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  "children"
-> & {
-  /** When > 0, trigger uses active (blue) fill and shows a count badge. */
-  activeFilterCount?: number;
-};
-
-/**
- * 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,
-      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";
+import { forwardRef, type ButtonHTMLAttributes } from "react";
+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, 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).
+ */
+export const FilterPill = forwardRef<HTMLButtonElement, FilterPillProps>(
+  (
+    {
+      activeFilterCount = 0,
+      appearance = "filled",
+      className,
+      type = "button",
+      "aria-label": ariaLabel = "Filters",
+      ...props
+    },
+    ref,
+  ) => {
+    const active = activeFilterCount > 0;
+    const ghost = appearance === "ghost";
+
+    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",
+          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}
+      >
+        <FiltersIcon size="small" />
+        {active && (
+          <Badge
+            color="orange"
+            type="icon"
+            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>
+        )}
+      </button>
+    );
+  },
+);
+
+FilterPill.displayName = "FilterPill";

package/src/domain/Filters/FilterPills.tsx

@@ -1,34 +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>
-);
+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,59 +1,59 @@
-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. Prefer default beige unless a product needs a custom tone. */
-  classNames?: {
-    root?: string;
-    label?: string;
-    remove?: string;
-  };
-};
-
-/**
- * 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,
-  onRemove,
-  removeAriaLabel,
-  className,
-  classNames,
-}: FilteredPillProps) => (
-  <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>
-);
+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. Prefer default beige unless a product needs a custom tone. */
+  classNames?: {
+    root?: string;
+    label?: string;
+    remove?: string;
+  };
+};
+
+/**
+ * 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,
+  onRemove,
+  removeAriaLabel,
+  className,
+  classNames,
+}: FilteredPillProps) => (
+  <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,72 +1,72 @@
-import { cn } from "../../utils/cn";
-import { SearchIcon } from "../../icons/generated";
-import { FilterPill } from "./FilterPill";
-import { FilterPills } from "./FilterPills";
-
-export type FiltersBarTabs = "on" | "off";
-export type FiltersBarFilters = "on" | "off";
-
-export type FiltersBarProps = {
-  tabs?: FiltersBarTabs;
-  filters?: FiltersBarFilters;
-  tabLabels?: string[];
-  activeTab?: string;
-  searchPlaceholder?: string;
-  filterChips?: string[];
-  className?: string;
-};
-
-const defaultTabs = ["All", "Reports", "Chats", "Issues", "Forms", "Workflows"];
-
-export const FiltersBar = ({
-  tabs = "on",
-  filters = "off",
-  tabLabels = defaultTabs,
-  activeTab = "All",
-  searchPlaceholder = "Search",
-  filterChips = ["Status", "Date", "Chief"],
-  className,
-}: FiltersBarProps) => (
-  <div className={cn("flex w-full flex-col gap-3", className)}>
-    <div className="flex items-center justify-between gap-4">
-      {tabs === "on" && (
-        <div className="flex flex-wrap gap-2">
-          {tabLabels.map((tab) => (
-            <button
-              key={tab}
-              type="button"
-              className={cn(
-                "rounded-full px-3 py-1.5 text-caption-2-em transition-colors",
-                tab === activeTab
-                  ? "bg-background-selected text-display-on-dark-primary"
-                  : "bg-background-secondary text-display-on-light-tertiary hover:text-display-on-light-primary",
-              )}
-            >
-              {tab}
-            </button>
-          ))}
-        </div>
-      )}
-      <div className="flex shrink-0 items-center gap-4">
-        <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>
-          <SearchIcon size="small" className="text-display-on-light-tertiary" />
-        </div>
-      </div>
-    </div>
-    {filters === "on" && (
-      <FilterPills
-        chips={filterChips.map((chip) => ({
-          key: chip,
-          label: chip,
-          onRemove: () => undefined,
-        }))}
-      />
-    )}
-  </div>
-);
+import { cn } from "../../utils/cn";
+import { SearchIcon } from "../../icons/generated";
+import { FilterPill } from "./FilterPill";
+import { FilterPills } from "./FilterPills";
+
+export type FiltersBarTabs = "on" | "off";
+export type FiltersBarFilters = "on" | "off";
+
+export type FiltersBarProps = {
+  tabs?: FiltersBarTabs;
+  filters?: FiltersBarFilters;
+  tabLabels?: string[];
+  activeTab?: string;
+  searchPlaceholder?: string;
+  filterChips?: string[];
+  className?: string;
+};
+
+const defaultTabs = ["All", "Reports", "Chats", "Issues", "Forms", "Workflows"];
+
+export const FiltersBar = ({
+  tabs = "on",
+  filters = "off",
+  tabLabels = defaultTabs,
+  activeTab = "All",
+  searchPlaceholder = "Search",
+  filterChips = ["Status", "Date", "Chief"],
+  className,
+}: FiltersBarProps) => (
+  <div className={cn("flex w-full flex-col gap-3", className)}>
+    <div className="flex items-center justify-between gap-4">
+      {tabs === "on" && (
+        <div className="flex flex-wrap gap-2">
+          {tabLabels.map((tab) => (
+            <button
+              key={tab}
+              type="button"
+              className={cn(
+                "rounded-full px-3 py-1.5 text-caption-2-em transition-colors",
+                tab === activeTab
+                  ? "bg-background-selected text-display-on-dark-primary"
+                  : "bg-background-secondary text-display-on-light-tertiary hover:text-display-on-light-primary",
+              )}
+            >
+              {tab}
+            </button>
+          ))}
+        </div>
+      )}
+      <div className="flex shrink-0 items-center gap-4">
+        <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>
+          <SearchIcon size="small" className="text-display-on-light-tertiary" />
+        </div>
+      </div>
+    </div>
+    {filters === "on" && (
+      <FilterPills
+        chips={filterChips.map((chip) => ({
+          key: chip,
+          label: chip,
+          onRemove: () => undefined,
+        }))}
+      />
+    )}
+  </div>
+);

package/src/domain/Filters/formatActiveFilterChipLabel.ts

@@ -1,23 +1,23 @@
-/**
- * Format the user-visible label for an active-filter chip (audit-prep rules).
- *
- * - 0 selected → "" (caller should not render)
- * - 1 selected → `<filterName> (<value>)`
- * - 2 selected → `<filterName> (<v1>, <v2>)`
- * - 3+ selected → `<filterName> (<v1>, <v2>...)` (literal `...`)
- *
- * `selectedLabels` are already human-readable, in selection order.
- */
-export function formatActiveFilterChipLabel(
-  filterName: string,
-  selectedLabels: string[],
-): string {
-  if (selectedLabels.length === 0) return "";
-  if (selectedLabels.length === 1) {
-    return `${filterName} (${selectedLabels[0]})`;
-  }
-  if (selectedLabels.length === 2) {
-    return `${filterName} (${selectedLabels[0]}, ${selectedLabels[1]})`;
-  }
-  return `${filterName} (${selectedLabels[0]}, ${selectedLabels[1]}...)`;
-}
+/**
+ * Format the user-visible label for an active-filter chip (audit-prep rules).
+ *
+ * - 0 selected → "" (caller should not render)
+ * - 1 selected → `<filterName> (<value>)`
+ * - 2 selected → `<filterName> (<v1>, <v2>)`
+ * - 3+ selected → `<filterName> (<v1>, <v2>...)` (literal `...`)
+ *
+ * `selectedLabels` are already human-readable, in selection order.
+ */
+export function formatActiveFilterChipLabel(
+  filterName: string,
+  selectedLabels: string[],
+): string {
+  if (selectedLabels.length === 0) return "";
+  if (selectedLabels.length === 1) {
+    return `${filterName} (${selectedLabels[0]})`;
+  }
+  if (selectedLabels.length === 2) {
+    return `${filterName} (${selectedLabels[0]}, ${selectedLabels[1]})`;
+  }
+  return `${filterName} (${selectedLabels[0]}, ${selectedLabels[1]}...)`;
+}

package/src/domain/Filters/index.ts

@@ -1,35 +1,37 @@
-export {
-  FiltersBar,
-  type FiltersBarFilters,
-  type FiltersBarProps,
-  type FiltersBarTabs,
-} from "./FiltersBar";
-export {
-  FilteredPill,
-  type FilteredPillProps,
-} from "./FilteredPill";
-export {
-  FilterPill,
-  type FilterPillProps,
-} from "./FilterPill";
-export {
-  FilterPills,
-  type FilterPillsItem,
-  type FilterPillsProps,
-} from "./FilterPills";
-export {
-  FilterDropdown,
-  resolveSubmenuView,
-  type FilterCategoryRow,
-  type FilterCategorySubmenuRow,
-  type FilterCategoryToggleRow,
-  type FilterDropdownProps,
-  type FilterNestedItem,
-  type FilterOption,
-  type FilterSelectionMode,
-  type FilterSubmenuContent,
-} from "./FilterDropdown";
-export { formatActiveFilterChipLabel } from "./formatActiveFilterChipLabel";
-
-/** @deprecated Use `activeFilterCount` on FilterPill instead. */
-export type FilterPillIndicator = "on" | "off";
+export {
+  FiltersBar,
+  type FiltersBarFilters,
+  type FiltersBarProps,
+  type FiltersBarTabs,
+} from "./FiltersBar";
+export {
+  FilteredPill,
+  type FilteredPillProps,
+} from "./FilteredPill";
+export {
+  FilterPill,
+  type FilterPillAppearance,
+  type FilterPillProps,
+} from "./FilterPill";
+export {
+  FilterPills,
+  type FilterPillsItem,
+  type FilterPillsProps,
+} from "./FilterPills";
+export {
+  FilterDropdown,
+  resolveSubmenuView,
+  type FilterCategoryInlineOptionsRow,
+  type FilterCategoryRow,
+  type FilterCategorySubmenuRow,
+  type FilterCategoryToggleRow,
+  type FilterDropdownProps,
+  type FilterNestedItem,
+  type FilterOption,
+  type FilterSelectionMode,
+  type FilterSubmenuContent,
+} from "./FilterDropdown";
+export { formatActiveFilterChipLabel } from "./formatActiveFilterChipLabel";
+
+/** @deprecated Use `activeFilterCount` on FilterPill instead. */
+export type FilterPillIndicator = "on" | "off";

package/src/primitives/Switch.tsx

@@ -1,12 +1,19 @@
 import { type ButtonHTMLAttributes } from "react";
 import { cn } from "../utils/cn";
 
-export type SwitchProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
+export type SwitchProps = Omit<
+  ButtonHTMLAttributes<HTMLButtonElement>,
+  "onChange"
+> & {
   checked: boolean;
   onChange: (checked: boolean) => void;
   disabled?: boolean;
 };
 
+/**
+ * On/off control — Figma Switch (3068:65681).
+ * Off: grey track, thumb left. On: grey-900 track, thumb right. Raise-2 on thumb.
+ */
 export const Switch = ({
   checked,
   onChange,
@@ -19,18 +26,21 @@ export const Switch = ({
     role="switch"
     aria-checked={checked}
     disabled={disabled}
-    onClick={() => onChange(!checked)}
+    onClick={(event) => {
+      event.stopPropagation();
+      onChange(!checked);
+    }}
     className={cn(
-      "relative inline-flex h-6 w-10 shrink-0 items-center rounded-full transition-colors disabled:cursor-not-allowed",
-      checked ? "bg-blue-600" : "bg-grey-200",
-      disabled && "opacity-50",
+      "relative inline-flex h-4 w-9 shrink-0 items-center rounded-full transition-colors",
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      checked ? "bg-grey-900" : "bg-grey-200",
       className,
     )}
     {...props}
   >
     <span
       className={cn(
-        "inline-block size-5 rounded-full bg-white shadow-raise1 transition-transform",
+        "inline-block size-3.5 rounded-full bg-white shadow-raise2 transition-transform",
         checked ? "translate-x-[18px]" : "translate-x-0.5",
       )}
     />