@flytedan/flytebot-design-system 0.37.0 → 0.38.0

package/dist/index.cjs

@@ -248,6 +248,9 @@ var VARIANTS = {
   danger: "fd-btn-danger",
   link: "fd-btn-link"
 };
+function isActivationKey(key) {
+  return key === "Enter" || key === " ";
+}
 function Button({
   children,
   variant = "primary",
@@ -257,12 +260,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,
@@ -275,9 +282,16 @@ function Button({
     Tag2,
     {
       className: cls,
-      disabled: Tag2 === "button" ? disabled || loading : void 0,
-      "aria-disabled": disabled || loading ? "true" : void 0,
+      disabled: Tag2 === "button" ? (disabled || loading) && !focusableWhenDisabled : void 0,
+      "aria-disabled": focusableWhenDisabled ? String(disabled || loading) : disabled || loading ? "true" : void 0,
       "aria-busy": loading ? "true" : void 0,
+      onClick: inert ? (e) => {
+        e.preventDefault();
+      } : onClick,
+      onKeyDown: inert ? (e) => {
+        if (isActivationKey(e.key)) e.preventDefault();
+        onKeyDown?.(e);
+      } : onKeyDown,
       ...rest,
       children: [
         icon && !loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("i", { className: "ph ph-" + icon, "aria-hidden": "true" }) : null,
@@ -3436,12 +3450,23 @@ function DatePicker({ label, help, error, required = false, disabled = false, ra
 
 // src/components/forms/Textarea.tsx
 var import_jsx_runtime44 = require("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__ */ (0, import_jsx_runtime44.jsxs)("div", { className: ["fd-field", className].filter(Boolean).join(" "), style, children: [
     label ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(FieldLabel, { htmlFor: fieldId, required, children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: box, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("textarea", { id: fieldId, rows, disabled, "aria-invalid": error ? "true" : void 0, ...rest }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: box, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      "textarea",
+      {
+        id: fieldId,
+        rows,
+        disabled,
+        readOnly: busy || readOnly,
+        "aria-busy": busy || void 0,
+        "aria-invalid": error ? "true" : void 0,
+        ...rest
+      }
+    ) }),
     error ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "fd-field-error", children: [
       /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("i", { className: "ph ph-warning-circle", "aria-hidden": "true" }),
       error
@@ -3816,8 +3841,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)) {
@@ -3879,19 +3903,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;
@@ -4028,16 +4042,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__ */ (0, import_jsx_runtime45.jsx)(
     Popover,
     {
@@ -4048,7 +4052,7 @@ function RangePanel({
       offset: 6,
       width: PANEL_WIDTH.range,
       label: field.label,
-      footer: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { size: "sm", variant: "secondary", "aria-disabled": doneDisabled, onClick: doneClick, onKeyDown: doneKeyDown, children: "Done" }),
+      footer: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { size: "sm", variant: "secondary", disabled: doneDisabled, focusableWhenDisabled: true, onClick: onClose, children: "Done" }),
       children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "fd-stack fd-gap-sm", children: [
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { ref: minWrapRef, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           NumberInput,
@@ -4163,16 +4167,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__ */ (0, import_jsx_runtime45.jsx)(
     Popover,
     {
@@ -4183,7 +4183,7 @@ function DatePanel({
       offset: 6,
       width: PANEL_WIDTH.date,
       label: field.label,
-      footer: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { size: "sm", variant: "secondary", "aria-disabled": doneDisabled, onClick: confirm, onKeyDown: doneKeyDown, children: "Done" }),
+      footer: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { size: "sm", variant: "secondary", disabled: doneDisabled, focusableWhenDisabled: true, onClick: confirm, children: "Done" }),
       children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "fd-stack fd-gap-sm", children: [
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           SegmentedControl,