@flytedan/flytebot-design-system 0.37.0 → 0.39.0

package/dist/index.d.cts

@@ -19,8 +19,18 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     loading?: boolean;
     block?: boolean;
     as?: "button" | "a";
-}
-declare function Button({ children, variant, size, icon, trailingIcon, arrow, loading, disabled, block, as, className, ...rest }: ButtonProps): React.JSX.Element;
+    /** When `disabled` (or `loading`), stay in the tab order instead of going natively
+     *  `disabled`: renders `aria-disabled="true"` only while actually disabled/loading (never
+     *  the `disabled` attribute), keeps the `:focus-visible` ring, and swallows
+     *  click/Enter/Space — including never letting a click bubble to an ancestor's own
+     *  handler — without ever submitting a form. Use whenever a button's disabled state can
+     *  flip while it holds focus (e.g. a controlled panel re-seeding mid-edit) — a native
+     *  `disabled` drops focus to `<body>` the instant it applies, and nothing can intercept or
+     *  redirect that. Once enabled again, this behaves exactly like a plain button: no
+     *  `aria-disabled` attribute at all. */
+    focusableWhenDisabled?: boolean;
+}
+declare function Button({ children, variant, size, icon, trailingIcon, arrow, loading, disabled, focusableWhenDisabled, block, as, className, onClick, onKeyDown, ...rest }: ButtonProps): React.JSX.Element;
 
 /** A square action carrying only a Phosphor glyph. Always needs a label for a11y. */
 interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -2239,12 +2249,19 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
     error?: string;
     required?: boolean;
     rows?: number;
+    /** Read-only plus `aria-busy`, with the same visible look as `disabled` (the
+     *  `.fd-input-disabled` tokens) — for a value an in-flight request is about to replace
+     *  while the field stays reachable. Unlike `disabled`, `busy` never sets the native
+     *  `disabled` attribute: `readOnly` blocks editing without removing the control from the
+     *  tab order or dropping focus that was already on it, so a keyboard user's in-progress
+     *  action (e.g. Ctrl+Enter to resolve) still reaches it while busy. */
+    busy?: boolean;
     /** Applied to the outer .fd-field element — this is where width belongs. */
     style?: React.CSSProperties;
     /** Applied to the outer .fd-field element, like `style` — the same rule as Input. */
     className?: string;
 }
-declare function Textarea({ label, help, error, required, rows, disabled, id, className, style, ...rest }: TextareaProps): React.JSX.Element;
+declare function Textarea({ label, help, error, required, rows, disabled, busy, readOnly, id, className, style, ...rest }: TextareaProps): React.JSX.Element;
 
 /** Numeric field with thousands formatting while unfocused, +/- steppers (press once for
  *  one step, press and hold to repeat with acceleration), ArrowUp/ArrowDown (Shift for

package/dist/index.d.ts

@@ -19,8 +19,18 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     loading?: boolean;
     block?: boolean;
     as?: "button" | "a";
-}
-declare function Button({ children, variant, size, icon, trailingIcon, arrow, loading, disabled, block, as, className, ...rest }: ButtonProps): React.JSX.Element;
+    /** When `disabled` (or `loading`), stay in the tab order instead of going natively
+     *  `disabled`: renders `aria-disabled="true"` only while actually disabled/loading (never
+     *  the `disabled` attribute), keeps the `:focus-visible` ring, and swallows
+     *  click/Enter/Space — including never letting a click bubble to an ancestor's own
+     *  handler — without ever submitting a form. Use whenever a button's disabled state can
+     *  flip while it holds focus (e.g. a controlled panel re-seeding mid-edit) — a native
+     *  `disabled` drops focus to `<body>` the instant it applies, and nothing can intercept or
+     *  redirect that. Once enabled again, this behaves exactly like a plain button: no
+     *  `aria-disabled` attribute at all. */
+    focusableWhenDisabled?: boolean;
+}
+declare function Button({ children, variant, size, icon, trailingIcon, arrow, loading, disabled, focusableWhenDisabled, block, as, className, onClick, onKeyDown, ...rest }: ButtonProps): React.JSX.Element;
 
 /** A square action carrying only a Phosphor glyph. Always needs a label for a11y. */
 interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -2239,12 +2249,19 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
     error?: string;
     required?: boolean;
     rows?: number;
+    /** Read-only plus `aria-busy`, with the same visible look as `disabled` (the
+     *  `.fd-input-disabled` tokens) — for a value an in-flight request is about to replace
+     *  while the field stays reachable. Unlike `disabled`, `busy` never sets the native
+     *  `disabled` attribute: `readOnly` blocks editing without removing the control from the
+     *  tab order or dropping focus that was already on it, so a keyboard user's in-progress
+     *  action (e.g. Ctrl+Enter to resolve) still reaches it while busy. */
+    busy?: boolean;
     /** Applied to the outer .fd-field element — this is where width belongs. */
     style?: React.CSSProperties;
     /** Applied to the outer .fd-field element, like `style` — the same rule as Input. */
     className?: string;
 }
-declare function Textarea({ label, help, error, required, rows, disabled, id, className, style, ...rest }: TextareaProps): React.JSX.Element;
+declare function Textarea({ label, help, error, required, rows, disabled, busy, readOnly, id, className, style, ...rest }: TextareaProps): React.JSX.Element;
 
 /** Numeric field with thousands formatting while unfocused, +/- steppers (press once for
  *  one step, press and hold to repeat with acceleration), ArrowUp/ArrowDown (Shift for

package/dist/index.js

@@ -17,12 +17,16 @@ function Button({
   arrow = false,
   loading = false,
   disabled = false,
+  focusableWhenDisabled = false,
   block = false,
   as = "button",
   className = "",
+  onClick,
+  onKeyDown,
   ...rest
 }) {
   const Tag2 = as;
+  const inert = (disabled || loading) && focusableWhenDisabled;
   const cls = [
     "fd-btn",
     VARIANTS[variant] || VARIANTS.primary,
@@ -35,9 +39,14 @@ function Button({
     Tag2,
     {
       className: cls,
-      disabled: Tag2 === "button" ? disabled || loading : void 0,
+      disabled: Tag2 === "button" ? (disabled || loading) && !focusableWhenDisabled : void 0,
       "aria-disabled": disabled || loading ? "true" : void 0,
       "aria-busy": loading ? "true" : void 0,
+      onClick: inert ? (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      } : onClick,
+      onKeyDown,
       ...rest,
       children: [
         icon && !loading ? /* @__PURE__ */ jsx("i", { className: "ph ph-" + icon, "aria-hidden": "true" }) : null,
@@ -3196,12 +3205,23 @@ function DatePicker({ label, help, error, required = false, disabled = false, ra
 
 // src/components/forms/Textarea.tsx
 import { jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
-function Textarea({ label, help, error, required = false, rows = 4, disabled = false, id, className = "", style, ...rest }) {
+function Textarea({ label, help, error, required = false, rows = 4, disabled = false, busy = false, readOnly, id, className = "", style, ...rest }) {
   const fieldId = useFieldId(id);
-  const box = ["fd-input", "fd-input-textarea", error ? "fd-input-error" : "", disabled ? "fd-input-disabled" : ""].filter(Boolean).join(" ");
+  const box = ["fd-input", "fd-input-textarea", error ? "fd-input-error" : "", disabled || busy ? "fd-input-disabled" : ""].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs38("div", { className: ["fd-field", className].filter(Boolean).join(" "), style, children: [
     label ? /* @__PURE__ */ jsx44(FieldLabel, { htmlFor: fieldId, required, children: label }) : null,
-    /* @__PURE__ */ jsx44("div", { className: box, children: /* @__PURE__ */ jsx44("textarea", { id: fieldId, rows, disabled, "aria-invalid": error ? "true" : void 0, ...rest }) }),
+    /* @__PURE__ */ jsx44("div", { className: box, children: /* @__PURE__ */ jsx44(
+      "textarea",
+      {
+        id: fieldId,
+        rows,
+        disabled,
+        readOnly: busy || readOnly,
+        "aria-busy": busy || void 0,
+        "aria-invalid": error ? "true" : void 0,
+        ...rest
+      }
+    ) }),
     error ? /* @__PURE__ */ jsxs38("span", { className: "fd-field-error", children: [
       /* @__PURE__ */ jsx44("i", { className: "ph ph-warning-circle", "aria-hidden": "true" }),
       error
@@ -3576,8 +3596,7 @@ function MultiSelectPanel({
         rows: 4,
         placeholder: field.pastePlaceholder || field.placeholder || "Paste names, one per line or comma-separated",
         value: pasteText,
-        readOnly: pasteLoading,
-        "aria-busy": pasteLoading || void 0,
+        busy: pasteLoading,
         onChange: (e) => setPasteText(e.target.value),
         onKeyDown: (e) => {
           if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
@@ -3639,19 +3658,9 @@ function MultiSelectPanel({
     {
       size: "sm",
       variant: "secondary",
-      "aria-disabled": resolveDisabled,
-      onClick: (e) => {
-        if (resolveDisabled) {
-          e.preventDefault();
-          return;
-        }
-        doResolve();
-      },
-      onKeyDown: (e) => {
-        if (resolveDisabled && (e.key === "Enter" || e.key === " ")) {
-          e.preventDefault();
-        }
-      },
+      disabled: resolveDisabled,
+      focusableWhenDisabled: true,
+      onClick: doResolve,
       children: pasteLoading ? "Resolving\u2026" : "Resolve"
     }
   ) : void 0;
@@ -3788,16 +3797,6 @@ function RangePanel({
     setDraft(next);
     publish();
   };
-  const doneClick = (e) => {
-    if (doneDisabled) {
-      e.preventDefault();
-      return;
-    }
-    onClose();
-  };
-  const doneKeyDown = (e) => {
-    if (doneDisabled && (e.key === "Enter" || e.key === " ")) e.preventDefault();
-  };
   return /* @__PURE__ */ jsx45(
     Popover,
     {
@@ -3808,7 +3807,7 @@ function RangePanel({
       offset: 6,
       width: PANEL_WIDTH.range,
       label: field.label,
-      footer: /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "secondary", "aria-disabled": doneDisabled, onClick: doneClick, onKeyDown: doneKeyDown, children: "Done" }),
+      footer: /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "secondary", disabled: doneDisabled, focusableWhenDisabled: true, onClick: onClose, children: "Done" }),
       children: /* @__PURE__ */ jsxs39("span", { className: "fd-stack fd-gap-sm", children: [
         /* @__PURE__ */ jsx45("span", { ref: minWrapRef, children: /* @__PURE__ */ jsx45(
           NumberInput,
@@ -3923,16 +3922,12 @@ function DatePanel({
   };
   const doneDisabled = kind === "withinDays" && !validity.allValid();
   const confirm = () => {
-    if (doneDisabled) return;
     if (kind === "withinDays") {
       const shown = shownWithinDays();
       if (shown) onCommit(shown);
     }
     onClose();
   };
-  const doneKeyDown = (e) => {
-    if (doneDisabled && (e.key === "Enter" || e.key === " ")) e.preventDefault();
-  };
   return /* @__PURE__ */ jsx45(
     Popover,
     {
@@ -3943,7 +3938,7 @@ function DatePanel({
       offset: 6,
       width: PANEL_WIDTH.date,
       label: field.label,
-      footer: /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "secondary", "aria-disabled": doneDisabled, onClick: confirm, onKeyDown: doneKeyDown, children: "Done" }),
+      footer: /* @__PURE__ */ jsx45(Button, { size: "sm", variant: "secondary", disabled: doneDisabled, focusableWhenDisabled: true, onClick: confirm, children: "Done" }),
       children: /* @__PURE__ */ jsxs39("span", { className: "fd-stack fd-gap-sm", children: [
         /* @__PURE__ */ jsx45(
           SegmentedControl,