@flytedan/flytebot-design-system 0.4.0 → 0.6.0

package/dist/index.d.cts

@@ -352,9 +352,14 @@ declare function Tabs({ tabs, value, onChange, className, ...rest }: TabsProps):
 
 /** 60px app header: breadcrumb left, actions right, and a 2px route loader along its top edge. */
 interface TopbarProps {
+    /** A non-last crumb with `onClick` calls it (via `preventDefault`) instead of following
+     *  `href` — for a crumb that needs to run a side effect (e.g. clearing some selection)
+     *  before/instead of navigating. `href` still works on its own for a plain link crumb;
+     *  the two aren't mutually exclusive, but `onClick` wins when both are present. */
     crumbs?: Array<{
         label: string;
         href?: string;
+        onClick?: () => void;
     }>;
     actions?: React.ReactNode;
     /** Shows the indeterminate route loader on the top edge. */
@@ -447,11 +452,13 @@ interface TagProps {
     children?: React.ReactNode;
     icon?: string;
     selected?: boolean;
+    /** Colors the chip once selected — e.g. a favoured ("success") or excluded ("danger") toggle. No effect while unselected. */
+    tone?: "neutral" | "info" | "success" | "warning" | "danger";
     onRemove?: () => void;
     onClick?: () => void;
     className?: string;
 }
-declare function Tag({ children, icon, selected, onRemove, onClick, className, ...rest }: TagProps): React.JSX.Element;
+declare function Tag({ children, icon, selected, tone, onRemove, onClick, className, ...rest }: TagProps): React.JSX.Element;
 
 /** Confirmation of something that already happened. Bottom-right, 5s, undo where reversible. */
 interface ToastProps {

package/dist/index.d.ts

@@ -352,9 +352,14 @@ declare function Tabs({ tabs, value, onChange, className, ...rest }: TabsProps):
 
 /** 60px app header: breadcrumb left, actions right, and a 2px route loader along its top edge. */
 interface TopbarProps {
+    /** A non-last crumb with `onClick` calls it (via `preventDefault`) instead of following
+     *  `href` — for a crumb that needs to run a side effect (e.g. clearing some selection)
+     *  before/instead of navigating. `href` still works on its own for a plain link crumb;
+     *  the two aren't mutually exclusive, but `onClick` wins when both are present. */
     crumbs?: Array<{
         label: string;
         href?: string;
+        onClick?: () => void;
     }>;
     actions?: React.ReactNode;
     /** Shows the indeterminate route loader on the top edge. */
@@ -447,11 +452,13 @@ interface TagProps {
     children?: React.ReactNode;
     icon?: string;
     selected?: boolean;
+    /** Colors the chip once selected — e.g. a favoured ("success") or excluded ("danger") toggle. No effect while unselected. */
+    tone?: "neutral" | "info" | "success" | "warning" | "danger";
     onRemove?: () => void;
     onClick?: () => void;
     className?: string;
 }
-declare function Tag({ children, icon, selected, onRemove, onClick, className, ...rest }: TagProps): React.JSX.Element;
+declare function Tag({ children, icon, selected, tone, onRemove, onClick, className, ...rest }: TagProps): React.JSX.Element;
 
 /** Confirmation of something that already happened. Bottom-right, 5s, undo where reversible. */
 interface ToastProps {

package/dist/index.js

@@ -806,7 +806,17 @@ function Topbar({ crumbs = [], actions, loading = false, onMenu, className = "",
     onMenu ? /* @__PURE__ */ jsx16("button", { type: "button", className: "fd-btn-icon", "aria-label": "Menu", onClick: onMenu, children: /* @__PURE__ */ jsx16("i", { className: "ph ph-list" }) }) : null,
     /* @__PURE__ */ jsx16("nav", { className: "fd-crumb", "aria-label": "Breadcrumb", children: crumbs.map((c, i) => /* @__PURE__ */ jsxs12(React5.Fragment, { children: [
       i > 0 ? /* @__PURE__ */ jsx16("i", { className: "ph ph-caret-right", style: { fontSize: 11, opacity: 0.6 }, "aria-hidden": "true" }) : null,
-      i === crumbs.length - 1 ? /* @__PURE__ */ jsx16("span", { className: "fd-crumb-current", children: c.label }) : /* @__PURE__ */ jsx16("a", { href: c.href || "#", children: c.label })
+      i === crumbs.length - 1 ? /* @__PURE__ */ jsx16("span", { className: "fd-crumb-current", children: c.label }) : /* @__PURE__ */ jsx16(
+        "a",
+        {
+          href: c.href || "#",
+          onClick: c.onClick ? (e) => {
+            e.preventDefault();
+            c.onClick();
+          } : void 0,
+          children: c.label
+        }
+      )
     ] }, i)) }),
     /* @__PURE__ */ jsx16("span", { style: { flex: 1 } }),
     actions,
@@ -918,12 +928,13 @@ function hasModifier(e) {
 
 // src/components/feedback/Tag.tsx
 import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
-function Tag({ children, icon, selected = false, onRemove, onClick, className = "", ...rest }) {
+var TONES2 = { info: "fd-tag-info", success: "fd-tag-success", warning: "fd-tag-warning", danger: "fd-tag-danger" };
+function Tag({ children, icon, selected = false, tone = "neutral", onRemove, onClick, className = "", ...rest }) {
   return /* @__PURE__ */ jsxs17(
     "button",
     {
       type: "button",
-      className: ["fd-tag", className].filter(Boolean).join(" "),
+      className: ["fd-tag", selected ? TONES2[tone] : null, className].filter(Boolean).join(" "),
       "aria-pressed": selected,
       onClick,
       ...rest,