SaaS fixes (#6578)

Co-authored-by: Claude Opus 4.8 <[email protected]> Co-authored-by: James Brunton <[email protected]> Co-authored-by: Reece Browne <[email protected]> Co-authored-by: ConnorYoh <[email protected]> Co-authored-by: Reece <[email protected]> Co-authored-by: EthanHealy01 <[email protected]> Co-authored-by: Ludy <[email protected]>
2026-07-15 19:10:47 +02:00 · 2026-06-16 16:41:25 +01:00
parent 96accea984
commit ddf78d11ae
415 changed files with 29552 additions and 5855 deletions
@@ -0,0 +1,47 @@
+import { Fragment } from "react";
+import type { ReactNode } from "react";
+import { Chip } from "@shared/components/Chip";
+import type { ChipTone, ChipSize } from "@shared/components/Chip";
+import "@shared/components/ChipFlow.css";
+
+export interface ChipFlowProps {
+  /** Items rendered as chips, in order. */
+  items: ReactNode[];
+  /** `arrow` joins chips with a → connector (pipeline look); `none` just wraps. */
+  separator?: "arrow" | "none";
+  tone?: ChipTone;
+  size?: ChipSize;
+  className?: string;
+}
+
+/**
+ * A sequence of {@link Chip}s, optionally joined by arrows to read as a
+ * pipeline (A → B → C). Use `separator="arrow"` for flows, `none` for a plain
+ * wrapped chip list.
+ */
+export function ChipFlow({
+  items,
+  separator = "none",
+  tone = "neutral",
+  size = "sm",
+  className,
+}: ChipFlowProps) {
+  return (
+    <div
+      className={["sui-chipflow", className ?? ""].filter(Boolean).join(" ")}
+    >
+      {items.map((item, i) => (
+        <Fragment key={i}>
+          {i > 0 && separator === "arrow" && (
+            <span className="sui-chipflow__sep" aria-hidden>
+              →
+            </span>
+          )}
+          <Chip tone={tone} size={size}>
+            {item}
+          </Chip>
+        </Fragment>
+      ))}
+    </div>
+  );
+}