@lateralus-ai/shipping-ui 2.0.0-dev.3 → 2.0.0-dev.30

package/src/domain/Filters/FilteredPill.tsx

@@ -1,39 +1,59 @@
-import { cn } from "../../utils/cn";
-import { ClearIcon } from "../../icons";
-
-export type FilteredPillState = "idle" | "hover";
-
-export type FilteredPillProps = {
-  label?: string;
-  count?: number;
-  state?: FilteredPillState;
-  className?: string;
-};
-
-const stateStyles: Record<FilteredPillState, string> = {
-  idle: "bg-background-secondary text-display-on-light-tertiary",
-  hover: "bg-grey-200 text-display-on-light-primary",
-};
-
-export const FilteredPill = ({
-  label = "Filtered",
-  count = 12,
-  state = "idle",
-  className,
-}: 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>
-);
+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,76 +1,72 @@
-import { cn } from "../../utils/cn";
-import { FiltersIcon } from "../../icons/generated";
-import { SearchIcon } from "../../icons/generated";
-
-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">
-        <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>
-        <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" && (
-      <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>
-    )}
-  </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

@@ -0,0 +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]}...)`;
+}

package/src/domain/Filters/index.ts

@@ -1,3 +1,37 @@
-export { FiltersBar, type FiltersBarFilters, type FiltersBarProps, type FiltersBarTabs } from "./FiltersBar";
-export { FilteredPill, type FilteredPillProps, type FilteredPillState } from "./FilteredPill";
-export { FilterPill, type FilterPillIndicator, type FilterPillProps } from "./FilterPill";
+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/icons/arrow-paths.ts

@@ -1,8 +1,8 @@
-export const ARROW_PATHS = {
-  left: {
-    large: { d: "M10.2217 6.21973C10.5146 5.9271 10.9894 5.92692 11.2822 6.21973C11.5749 6.51254 11.5748 6.98742 11.2822 7.28027L7.56055 11.002H18.2549C18.6688 11.0023 19.0049 11.3379 19.0049 11.752C19.0049 12.166 18.6688 12.5016 18.2549 12.502H7.56055L11.2822 16.2236C11.5748 16.5165 11.5748 16.9914 11.2822 17.2842C10.9894 17.5769 10.5146 17.5768 10.2217 17.2842L5.21973 12.2822C5.16331 12.2258 5.12062 12.1611 5.08594 12.0938C5.07633 12.0751 5.06469 12.0576 5.05664 12.0381C5.04919 12.02 5.04504 12.0009 5.03906 11.9824C5.01544 11.9095 5 11.8327 5 11.752C5 11.6709 5.01525 11.5937 5.03906 11.5205C5.04453 11.5037 5.04801 11.4862 5.05469 11.4697L5.05859 11.46C5.06783 11.4381 5.08061 11.4182 5.0918 11.3975C5.12559 11.3348 5.16683 11.2746 5.21973 11.2217L10.2217 6.21973Z" },
-  },
-  right: {
-    large: { d: "M13.7808 17.282C13.4878 17.5746 13.013 17.5748 12.7202 17.282C12.4276 16.9892 12.4276 16.5143 12.7202 16.2214L16.4419 12.4998L5.74756 12.4998C5.33361 12.4995 4.99756 12.1638 4.99756 11.7498C4.99756 11.3357 5.3336 11.0001 5.74756 10.9998L16.4419 10.9998L12.7202 7.27808C12.4277 6.98524 12.4276 6.51036 12.7202 6.21753C13.013 5.92476 13.4879 5.9249 13.7808 6.21753L18.7827 11.2195C18.8391 11.2759 18.8818 11.3406 18.9165 11.408C18.9261 11.4266 18.9378 11.4441 18.9458 11.4636C18.9533 11.4817 18.9574 11.5008 18.9634 11.5193C18.987 11.5922 19.0024 11.669 19.0024 11.7498C19.0024 11.8309 18.9872 11.908 18.9634 11.9812C18.9579 11.998 18.9544 12.0155 18.9478 12.032L18.9438 12.0417C18.9346 12.0636 18.9218 12.0835 18.9106 12.1042C18.8769 12.1669 18.8356 12.2271 18.7827 12.28L13.7808 17.282Z" },
-  },
-} as const;
+export const ARROW_PATHS = {
+  left: {
+    large: { d: "M10.2217 6.21973C10.5146 5.9271 10.9894 5.92692 11.2822 6.21973C11.5749 6.51254 11.5748 6.98742 11.2822 7.28027L7.56055 11.002H18.2549C18.6688 11.0023 19.0049 11.3379 19.0049 11.752C19.0049 12.166 18.6688 12.5016 18.2549 12.502H7.56055L11.2822 16.2236C11.5748 16.5165 11.5748 16.9914 11.2822 17.2842C10.9894 17.5769 10.5146 17.5768 10.2217 17.2842L5.21973 12.2822C5.16331 12.2258 5.12062 12.1611 5.08594 12.0938C5.07633 12.0751 5.06469 12.0576 5.05664 12.0381C5.04919 12.02 5.04504 12.0009 5.03906 11.9824C5.01544 11.9095 5 11.8327 5 11.752C5 11.6709 5.01525 11.5937 5.03906 11.5205C5.04453 11.5037 5.04801 11.4862 5.05469 11.4697L5.05859 11.46C5.06783 11.4381 5.08061 11.4182 5.0918 11.3975C5.12559 11.3348 5.16683 11.2746 5.21973 11.2217L10.2217 6.21973Z" },
+  },
+  right: {
+    large: { d: "M13.7808 17.282C13.4878 17.5746 13.013 17.5748 12.7202 17.282C12.4276 16.9892 12.4276 16.5143 12.7202 16.2214L16.4419 12.4998L5.74756 12.4998C5.33361 12.4995 4.99756 12.1638 4.99756 11.7498C4.99756 11.3357 5.3336 11.0001 5.74756 10.9998L16.4419 10.9998L12.7202 7.27808C12.4277 6.98524 12.4276 6.51036 12.7202 6.21753C13.013 5.92476 13.4879 5.9249 13.7808 6.21753L18.7827 11.2195C18.8391 11.2759 18.8818 11.3406 18.9165 11.408C18.9261 11.4266 18.9378 11.4441 18.9458 11.4636C18.9533 11.4817 18.9574 11.5008 18.9634 11.5193C18.987 11.5922 19.0024 11.669 19.0024 11.7498C19.0024 11.8309 18.9872 11.908 18.9634 11.9812C18.9579 11.998 18.9544 12.0155 18.9478 12.032L18.9438 12.0417C18.9346 12.0636 18.9218 12.0835 18.9106 12.1042C18.8769 12.1669 18.8356 12.2271 18.7827 12.28L13.7808 17.282Z" },
+  },
+} as const;

package/src/icons/chevron-paths.ts

@@ -1,17 +1,17 @@
-export const CHEVRON_PATHS = {
-  right: {
-    small: { d: "M10.9288 7.74314C11.0393 7.92719 11.0213 8.16626 10.8741 8.332L6.87414 12.832C6.69075 13.0383 6.37446 13.0572 6.16809 12.874C5.96185 12.6906 5.94294 12.3743 6.12609 12.1679L9.83117 7.99997L6.12609 3.832C5.94294 3.62563 5.96185 3.30933 6.16809 3.12595C6.37446 2.94274 6.69075 2.96168 6.87414 3.16794L10.8741 7.66794L10.9288 7.74314Z" },
-  },
-  left: {
-    small: { d: "M6.07117 8.25686C5.96073 8.07281 5.97872 7.83374 6.12586 7.668L10.1259 3.168C10.3093 2.96174 10.6255 2.94279 10.8319 3.12601C11.0381 3.30938 11.0571 3.62568 10.8739 3.83206L7.16883 8.00003L10.8739 12.168C11.0571 12.3744 11.0381 12.6907 10.8319 12.8741C10.6255 13.0573 10.3093 13.0383 10.1259 12.8321L6.12586 8.33206L6.07117 8.25686Z" },
-  },
-  down: {
-    small: { d: "M12.168 6.12597C12.3744 5.94274 12.6906 5.96165 12.874 6.16797C13.0572 6.37436 13.0383 6.69063 12.832 6.87402L8.33203 10.874C8.14266 11.0421 7.85733 11.0421 7.66797 10.874L3.16797 6.87402C2.96165 6.69063 2.94274 6.37436 3.12597 6.16797C3.30936 5.96165 3.62563 5.94274 3.83203 6.12597L8 9.83007L12.168 6.12597Z" },
-  },
-  up: {
-    small: { d: "M7.74314 6.07117C7.92719 5.96073 8.16626 5.97872 8.332 6.12586L12.832 10.1259C13.0383 10.3093 13.0572 10.6255 12.874 10.8319C12.6906 11.0381 12.3743 11.0571 12.1679 10.8739L7.99997 7.16883L3.832 10.8739C3.62563 11.0571 3.30933 11.0381 3.12595 10.8319C2.94274 10.6255 2.96168 10.3093 3.16794 10.1259L7.66794 6.12586L7.74314 6.07117Z" },
-  },
-  upDown: {
-    small: { d: "M12.1679 11.1259C12.3743 10.9426 12.6906 10.9615 12.874 11.1679C13.0572 11.3742 13.0383 11.6905 12.832 11.8739L8.332 15.8739C8.14266 16.0419 7.85728 16.0419 7.66794 15.8739L3.16794 11.8739C2.96165 11.6905 2.94278 11.3742 3.12595 11.1679C3.30933 10.9615 3.6256 10.9426 3.832 11.1259L7.99997 14.83L12.1679 11.1259ZM7.74313 0.0711718C7.92719 -0.0392683 8.16625 -0.021282 8.332 0.125859L12.832 4.12586C13.0383 4.30925 13.0572 4.62554 12.874 4.83191C12.6906 5.03814 12.3743 5.05706 12.1679 4.87391L7.99997 1.16883L3.832 4.87391C3.62563 5.05706 3.30932 5.03814 3.12595 4.83191C2.94274 4.62554 2.96168 4.30925 3.16794 4.12586L7.66794 0.125859L7.74313 0.0711718Z" },
-  },
-} as const;
+export const CHEVRON_PATHS = {
+  right: {
+    small: { d: "M10.9288 7.74314C11.0393 7.92719 11.0213 8.16626 10.8741 8.332L6.87414 12.832C6.69075 13.0383 6.37446 13.0572 6.16809 12.874C5.96185 12.6906 5.94294 12.3743 6.12609 12.1679L9.83117 7.99997L6.12609 3.832C5.94294 3.62563 5.96185 3.30933 6.16809 3.12595C6.37446 2.94274 6.69075 2.96168 6.87414 3.16794L10.8741 7.66794L10.9288 7.74314Z" },
+  },
+  left: {
+    small: { d: "M6.07117 8.25686C5.96073 8.07281 5.97872 7.83374 6.12586 7.668L10.1259 3.168C10.3093 2.96174 10.6255 2.94279 10.8319 3.12601C11.0381 3.30938 11.0571 3.62568 10.8739 3.83206L7.16883 8.00003L10.8739 12.168C11.0571 12.3744 11.0381 12.6907 10.8319 12.8741C10.6255 13.0573 10.3093 13.0383 10.1259 12.8321L6.12586 8.33206L6.07117 8.25686Z" },
+  },
+  down: {
+    small: { d: "M12.168 6.12597C12.3744 5.94274 12.6906 5.96165 12.874 6.16797C13.0572 6.37436 13.0383 6.69063 12.832 6.87402L8.33203 10.874C8.14266 11.0421 7.85733 11.0421 7.66797 10.874L3.16797 6.87402C2.96165 6.69063 2.94274 6.37436 3.12597 6.16797C3.30936 5.96165 3.62563 5.94274 3.83203 6.12597L8 9.83007L12.168 6.12597Z" },
+  },
+  up: {
+    small: { d: "M7.74314 6.07117C7.92719 5.96073 8.16626 5.97872 8.332 6.12586L12.832 10.1259C13.0383 10.3093 13.0572 10.6255 12.874 10.8319C12.6906 11.0381 12.3743 11.0571 12.1679 10.8739L7.99997 7.16883L3.832 10.8739C3.62563 11.0571 3.30933 11.0381 3.12595 10.8319C2.94274 10.6255 2.96168 10.3093 3.16794 10.1259L7.66794 6.12586L7.74314 6.07117Z" },
+  },
+  upDown: {
+    small: { d: "M12.1679 11.1259C12.3743 10.9426 12.6906 10.9615 12.874 11.1679C13.0572 11.3742 13.0383 11.6905 12.832 11.8739L8.332 15.8739C8.14266 16.0419 7.85728 16.0419 7.66794 15.8739L3.16794 11.8739C2.96165 11.6905 2.94278 11.3742 3.12595 11.1679C3.30933 10.9615 3.6256 10.9426 3.832 11.1259L7.99997 14.83L12.1679 11.1259ZM7.74313 0.0711718C7.92719 -0.0392683 8.16625 -0.021282 8.332 0.125859L12.832 4.12586C13.0383 4.30925 13.0572 4.62554 12.874 4.83191C12.6906 5.03814 12.3743 5.05706 12.1679 4.87391L7.99997 1.16883L3.832 4.87391C3.62563 5.05706 3.30932 5.03814 3.12595 4.83191C2.94274 4.62554 2.96168 4.30925 3.16794 4.12586L7.66794 0.125859L7.74313 0.0711718Z" },
+  },
+} as const;