@flytedan/flytebot-design-system 0.12.4 → 0.12.5

package/dist/index.d.cts

@@ -500,8 +500,13 @@ declare function AvatarStack({ people, size, max, className }: AvatarStackProps)
 
 /**
  * A pill of state. Badges never carry actions — if it is clickable it is a Tag.
+ *
+ * Extends HTMLAttributes so a consumer can pass `title`, `aria-*`, `style` or any other
+ * plain span attribute straight through, the same rest-prop passthrough every other kit
+ * component follows — a caller that needs one of those never has reason to hand-roll the
+ * markup instead of using the component.
  */
-interface BadgeProps {
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     children?: React.ReactNode;
     /** live = the site's blue gradient "Active". approved = its mint pill. count = the blue number chip. */
     tone?: "neutral" | "info" | "success" | "warning" | "danger" | "live" | "approved" | "count";

package/dist/index.d.ts

@@ -500,8 +500,13 @@ declare function AvatarStack({ people, size, max, className }: AvatarStackProps)
 
 /**
  * A pill of state. Badges never carry actions — if it is clickable it is a Tag.
+ *
+ * Extends HTMLAttributes so a consumer can pass `title`, `aria-*`, `style` or any other
+ * plain span attribute straight through, the same rest-prop passthrough every other kit
+ * component follows — a caller that needs one of those never has reason to hand-roll the
+ * markup instead of using the component.
  */
-interface BadgeProps {
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     children?: React.ReactNode;
     /** live = the site's blue gradient "Active". approved = its mint pill. count = the blue number chip. */
     tone?: "neutral" | "info" | "success" | "warning" | "danger" | "live" | "approved" | "count";

package/dist/index.js

@@ -1429,9 +1429,11 @@ function DataTable({
 // src/components/data/FilterBar.tsx
 import * as React8 from "react";
 import { jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
+var FILTER_BAR_BASE = 120;
 var isSet = (v) => !(v == null || v === "" || v === false);
 function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align = "left", className = "", ...rest }) {
   const [panel, setPanel] = React8.useState(null);
+  const zIndex = useOverlayLayer(FILTER_BAR_BASE);
   const rootRef = React8.useRef(null);
   const textInputRef = React8.useRef(null);
   const optionsRef = React8.useRef(null);
@@ -1522,11 +1524,11 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
             field.label,
             chosen ? ": " + chosen.label : ""
           ] }),
-          /* @__PURE__ */ jsx28(
+          /* @__PURE__ */ jsx28(LayerProvider, { zIndex, children: /* @__PURE__ */ jsx28(
             "span",
             {
               className: "fd-view-enter",
-              style: { position: "absolute", top: "calc(100% + 6px)", left: 0, zIndex: 120, minWidth: 200, maxWidth: "calc(100vw - 32px)", display: "block", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10, boxShadow: "0 16px 44px rgba(11,13,17,.18)", padding: 8 },
+              style: { position: "absolute", top: "calc(100% + 6px)", left: 0, zIndex, minWidth: 200, maxWidth: "calc(100vw - 32px)", display: "block", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10, boxShadow: "0 16px 44px rgba(11,13,17,.18)", padding: 8 },
               children: /* @__PURE__ */ jsx28("span", { className: "fd-stack", role: "listbox", "aria-label": field.label, ref: optionsRef, style: { gap: 2 }, children: field.options.map((o) => {
                 const on = o.value === value;
                 return /* @__PURE__ */ jsx28(
@@ -1547,7 +1549,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
                 );
               }) })
             }
-          )
+          ) })
         ] }, field.key);
       }
       if (isSet(value)) {
@@ -1574,11 +1576,11 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
           children: "Filter"
         }
       ),
-      panel?.kind === "add" ? /* @__PURE__ */ jsx28(
+      panel?.kind === "add" ? /* @__PURE__ */ jsx28(LayerProvider, { zIndex, children: /* @__PURE__ */ jsx28(
         "span",
         {
           className: "fd-view-enter",
-          style: { position: "absolute", top: "calc(100% + 6px)", [align]: 0, zIndex: 120, width: 220, maxWidth: "calc(100vw - 32px)", display: "block", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10, boxShadow: "0 16px 44px rgba(11,13,17,.18)", padding: 8 },
+          style: { position: "absolute", top: "calc(100% + 6px)", [align]: 0, zIndex, width: 220, maxWidth: "calc(100vw - 32px)", display: "block", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10, boxShadow: "0 16px 44px rgba(11,13,17,.18)", padding: 8 },
           children: /* @__PURE__ */ jsxs23("span", { className: "fd-stack", role: "menu", "aria-label": "Add filter", style: { gap: 2 }, children: [
             /* @__PURE__ */ jsx28("span", { className: "fd-overline fd-muted", style: { padding: "4px 8px 6px" }, children: "Add filter" }),
             addableFields.map((f) => /* @__PURE__ */ jsx28(
@@ -1595,7 +1597,7 @@ function FilterBar({ fields = [], filters, onFilterChange, onFilterRemove, align
             ))
           ] })
         }
-      ) : null
+      ) }) : null
     ] }) : null
   ] });
 }
@@ -2621,8 +2623,10 @@ function ScoreMeter({
 // src/components/data/SortMenu.tsx
 import * as React14 from "react";
 import { jsx as jsx36, jsxs as jsxs32 } from "react/jsx-runtime";
+var SORT_MENU_BASE = 120;
 function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", className = "", ...rest }) {
   const [open, setOpen] = React14.useState(false);
+  const zIndex = useOverlayLayer(SORT_MENU_BASE);
   const ref = React14.useRef(null);
   React14.useEffect(() => {
     if (!open) return;
@@ -2671,7 +2675,7 @@ function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", cla
       cur ? cur.label : "Unsorted",
       /* @__PURE__ */ jsx36("i", { className: "ph ph-" + (dir === "asc" ? "arrow-up" : "arrow-down"), style: { fontSize: 12, marginLeft: 6, opacity: 0.75 } })
     ] }),
-    open ? /* @__PURE__ */ jsx36("span", { className: "fd-view-enter", style: { position: "absolute", top: "calc(100% + 6px)", [align]: 0, zIndex: 120, width: 280, maxWidth: "calc(100vw - 32px)", display: "block", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10, boxShadow: "0 16px 44px rgba(11,13,17,.18)", padding: 8 }, children: /* @__PURE__ */ jsxs32("span", { className: "fd-stack", style: { gap: 2 }, children: [
+    open ? /* @__PURE__ */ jsx36(LayerProvider, { zIndex, children: /* @__PURE__ */ jsx36("span", { className: "fd-view-enter", style: { position: "absolute", top: "calc(100% + 6px)", [align]: 0, zIndex, width: 280, maxWidth: "calc(100vw - 32px)", display: "block", background: "var(--surface)", border: "1px solid var(--border)", borderRadius: 10, boxShadow: "0 16px 44px rgba(11,13,17,.18)", padding: 8 }, children: /* @__PURE__ */ jsxs32("span", { className: "fd-stack", style: { gap: 2 }, children: [
       /* @__PURE__ */ jsx36("span", { className: "fd-overline fd-muted", style: { padding: "4px 8px 6px" }, children: "Sort by" }),
       fields.map((f) => {
         const active = cur && cur.key === f.key;
@@ -2681,7 +2685,7 @@ function SortMenu({ fields = [], sort, onSort, align = "right", size = "md", cla
           arrow(f, "desc")
         ] }, f.key);
       })
-    ] }) }) : null
+    ] }) }) }) : null
   ] });
 }
 
@@ -7542,6 +7546,7 @@ function RoadmapTimeline({ onOpenFlag, title = "Roadmap", lede }) {
 import * as React35 from "react";
 import { createPortal as createPortal5 } from "react-dom";
 import { Fragment as Fragment16, jsx as jsx61, jsxs as jsxs56 } from "react/jsx-runtime";
+var SOON_HOVERCARD_BASE = 220;
 var BYPASS_STORE = "fd.soon.bypass.v1";
 function readBypassed() {
   try {
@@ -7736,6 +7741,7 @@ function ComingSoon({
 function InlineSoon({ label, detail, backend, eta, effort, onRoadmap, allowed, onBypass, blur, tip, className, rest, children }) {
   const [open, setOpen] = React35.useState(false);
   const [anchor, pos] = useHoverCard(open);
+  const zIndex = useOverlayLayer(SOON_HOVERCARD_BASE);
   const close = React35.useRef(null);
   const show = () => {
     if (close.current) {
@@ -7782,12 +7788,12 @@ function InlineSoon({ label, detail, backend, eta, effort, onRoadmap, allowed, o
           }
         ),
         open && pos ? createPortal5(
-          /* @__PURE__ */ jsx61(
+          /* @__PURE__ */ jsx61(LayerProvider, { zIndex, children: /* @__PURE__ */ jsx61(
             "div",
             {
               className: "fd-soon-note fd-soon-hovercard",
               role: "tooltip",
-              style: { position: "fixed", left: pos.left, top: pos.top, bottom: pos.bottom, width: pos.width },
+              style: { position: "fixed", left: pos.left, top: pos.top, bottom: pos.bottom, width: pos.width, zIndex },
               onMouseEnter: show,
               onMouseLeave: hide,
               children: /* @__PURE__ */ jsx61(
@@ -7804,7 +7810,7 @@ function InlineSoon({ label, detail, backend, eta, effort, onRoadmap, allowed, o
                 }
               )
             }
-          ),
+          ) }),
           document.body
         ) : null
       ]
@@ -7923,9 +7929,11 @@ function PermissionHint({ perm, children }) {
 // src/components/platform/ModeSwitch.tsx
 import * as React36 from "react";
 import { Fragment as Fragment17, jsx as jsx63, jsxs as jsxs58 } from "react/jsx-runtime";
+var MODE_SWITCH_BASE = 140;
 function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog, onOpenSpec, summary }) {
   const mode2 = useRuntimeMode();
   const [open, setOpen] = React36.useState(false);
+  const zIndex = useOverlayLayer(MODE_SWITCH_BASE);
   const ref = React36.useRef(null);
   React36.useEffect(() => {
     if (!open) return;
@@ -7965,7 +7973,7 @@ function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog
         ]
       }
     ),
-    open ? /* @__PURE__ */ jsxs58("span", { className: "fd-view-enter fd-mode-pop", children: [
+    open ? /* @__PURE__ */ jsx63(LayerProvider, { zIndex, children: /* @__PURE__ */ jsxs58("span", { className: "fd-view-enter fd-mode-pop", style: { zIndex }, children: [
       /* @__PURE__ */ jsxs58("span", { className: "fd-row", style: { gap: 10, padding: "12px 14px", borderBottom: "1px solid var(--border)" }, children: [
         /* @__PURE__ */ jsxs58("span", { className: "fd-badge " + (test ? "fd-badge-warning" : "fd-badge-neutral"), children: [
           /* @__PURE__ */ jsx63("i", { className: "ph " + (test ? "ph-flask" : "ph-lightning"), "aria-hidden": "true" }),
@@ -8023,7 +8031,7 @@ function ModeSwitch({ canToggle = false, requestCount = 0, onClearLog, renderLog
         ] })
       ] }),
       test && renderLog ? /* @__PURE__ */ jsx63("span", { style: { display: "block", maxHeight: 340, overflowY: "auto", borderTop: "1px solid var(--border)" }, children: renderLog() }) : null
-    ] }) : null
+    ] }) }) : null
   ] });
 }
 function TestModeBar({ onExit }) {