[Sparkle] Breadcrumbs component

sparkle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.213",
+  "version": "0.2.214",
   "scripts": {
     "build": "rm -rf dist && rollup -c",
     "build:with-tw-base": "rollup -c --environment INCLUDE_TW_BASE:true",

sparkle/src/_index.ts

@@ -148,6 +148,9 @@ export { Markdown };
 import { DataTable } from "./components/DataTable";
 export { DataTable };
 
+import { Breadcrumbs } from "@sparkle/components/Breadcrumbs";
+export { Breadcrumbs };
+
 import {
   LogoHorizontalColor as LogoHorizontalColorLogo,
   LogoHorizontalColorLayer1 as LogoHorizontalColorLogoLayer1,

sparkle/src/components/Breadcrumbs.tsx

@@ -0,0 +1,56 @@
+import type { ComponentType } from "react";
+import React from "react";
+
+import { SparkleContextLinkType } from "@sparkle/context";
+import { ChevronRightIcon, Icon, SparkleContext } from "@sparkle/index";
+
+type BreadcrumbProps = {
+  items: {
+    label: string;
+    icon?: ComponentType<{ className?: string }>;
+    href?: string;
+  }[];
+};
+
+export function Breadcrumbs({ items }: BreadcrumbProps) {
+  const { components } = React.useContext(SparkleContext);
+
+  const Link: SparkleContextLinkType = components.link;
+
+  return (
+    <div className="gap-2 s-flex s-flex-row s-items-center">
+      {items.map((item, index) => (
+        <div key={index} className="s-flex s-flex-row s-items-center s-gap-1">
+          <Icon visual={item.icon} className="s-text-brand" />
+          <div>
+            {item.href ? (
+              <Link
+                href={item.href}
+                className={
+                  index === items.length - 1
+                    ? "s-text-element-900"
+                    : "s-text-element-700"
+                }
+              >
+                {item.label}
+              </Link>
+            ) : (
+              <span
+                className={
+                  index === items.length - 1
+                    ? "s-text-element-900"
+                    : "s-text-element-700"
+                }
+              >
+                {item.label}
+              </span>
+            )}
+          </div>
+          {index === items.length - 1 ? null : (
+            <ChevronRightIcon className="s-text-element-500" />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}

sparkle/src/stories/Breadcrumbs.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { Breadcrumbs, CompanyIcon, HomeIcon } from "../index_with_tw_base";
+
+const meta = {
+  title: "Components/Breadcrumbs",
+  component: Breadcrumbs,
+} satisfies Meta<typeof Breadcrumbs>;
+
+export default meta;
+
+export const BreadcrumbsExample = () => {
+  const items1 = [
+    { label: "Home", href: "#", icon: HomeIcon },
+    { label: "Vaults", href: ".." },
+    { label: "My Vault" },
+  ];
+  const items2 = [
+    { label: "Home", href: "#", icon: HomeIcon },
+    { label: "Vaults", href: "#", icon: CompanyIcon },
+    { label: "My Vault", href: "#" },
+    { label: "Data Sources" },
+  ];
+  return (
+    <div className="s-flex s-flex-col s-gap-4">
+      <Breadcrumbs items={items1} />
+      <Breadcrumbs items={items2} />
+    </div>
+  );
+};