@multiplatform.one/forms 6.1.0 → 6.3.0

package/README.md

@@ -216,6 +216,25 @@ Checkbox input with label.
 
 Dropdown selection field.
 
+### Combobox
+
+Searchable picker (single or multi select). Options filter client-side by default,
+or search asynchronously via the async-options contract:
+
+- `onSearch(query)` — called debounced (200ms) while the dropdown is open; may
+  return a cleanup function to cancel in-flight work. When set, client-side
+  filtering is disabled — `options` are treated as the server's result set.
+- `loading` — spinner in the list area. Priority is options > loading > empty
+  message, so a stale "no matches" never shows mid-request and the spinner
+  never covers real results.
+- `searchError` — honest failure message rendered inside the dropdown (takes
+  priority over options/loading/empty).
+- `valueLabel` — display label for a selected value that is not (yet) in
+  `options` (async: show a saved value's title before any options load).
+- `clearable` — clear (×) affordance in the trigger; fires `onChange("")`
+  (the canonical change path).
+- `ComboboxOption.description` — optional muted second line per option.
+
 ### Button
 
 Form submission button; use `type="submit"` for form submission.
@@ -226,13 +245,13 @@ Form submission button; use `type="submit"` for form submission.
 
 Access the form instance from child components.
 
-### useUrlState
-
-Sync any state with URL parameters (re-exported from router).
+### useFormField / useResolvedValidators
 
-### useSearchParams
+Field-authoring hooks: initialize a field against the form context and resolve
+its validator timing (see `agent-os/standards/frontend/field-architecture.md`).
 
-Read and write URL search parameters (re-exported from router).
+> URL state hooks (`useUrlState`, `useSearchParams`) live in
+> `@multiplatform.one/router`; `<Form syncWithUrl>` uses them internally.
 
 ## License
 

package/dist/cjs/AdaptivePopup/index.cjs

@@ -25,10 +25,13 @@ __export(AdaptivePopup_exports, {
   AdaptivePopup: () => AdaptivePopup
 });
 module.exports = __toCommonJS(AdaptivePopup_exports);
+var import_react = require("react");
 var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
 var import_lucide_icons_2 = require("@tamagui/lucide-icons-2");
 var import_Button = require("../Button/index.cjs");
+var import_focusManagement = require("../shared/focusManagement.cjs");
+var import_useSheetEscapeDismiss = require("../shared/useSheetEscapeDismiss.cjs");
 var import_zIndex = require("../shared/zIndex.cjs");
 var import_FloatingPanel = require("../FloatingPanel/index.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -64,6 +67,10 @@ function AdaptivePopup({
   const media = (0, import_tamagui.useMedia)();
   const viewportGtSm = (0, import_FloatingPanel.useViewportGtSm)();
   const isDesktop = typeof window !== "undefined" ? viewportGtSm : media.gtSm === true;
+  (0, import_useSheetEscapeDismiss.useSheetEscapeDismiss)(open && !isDesktop, () => onOpenChange(false));
+  const sheetFrameRef = (0, import_react.useRef)(null);
+  (0, import_focusManagement.useReturnFocusOnClose)(open && isDesktop);
+  (0, import_focusManagement.useSheetModalFocus)(open && !isDesktop, sheetFrameRef);
   const maxWidth = sizeToWidth[size];
   const maxHeight = sizeToHeight[size];
   const headerContent = (title || showCloseButton) && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
@@ -113,8 +120,10 @@ function AdaptivePopup({
         snapPointsMode: size === "fullscreen" ? "percent" : "fit",
         snapPoints: size === "fullscreen" ? [92] : void 0,
         zIndex: import_zIndex.zIndex.sheet,
+        transition: knobProps.transition,
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Overlay, {
           backgroundColor: "$shadow6",
+          transition: knobProps.transition,
           enterStyle: {
             opacity: 0
           },
@@ -122,6 +131,10 @@ function AdaptivePopup({
             opacity: 0
           }
         }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Handle, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Sheet.Frame, {
+          ...{
+            ref: sheetFrameRef,
+            tabIndex: -1
+          },
           ...knobProps.panelPadding,
           ...knobProps.gap,
           children: [headerContent, descriptionContent, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
@@ -148,6 +161,7 @@ function AdaptivePopup({
       zIndex: import_zIndex.zIndex.dropdown,
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Overlay, {
         backgroundColor: "$shadow6",
+        transition: knobProps.transition,
         enterStyle: {
           opacity: 0
         },
@@ -155,8 +169,11 @@ function AdaptivePopup({
           opacity: 0
         }
       }, "overlay"), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog.Content, {
-        bordered: true,
-        elevate: true,
+        unstyled: true,
+        position: "relative",
+        pointerEvents: "auto",
+        ...knobProps.elevatedSurface,
+        transition: knobProps.transition,
         enterStyle: {
           opacity: 0,
           scale: 0.96,
@@ -170,10 +187,8 @@ function AdaptivePopup({
         maxWidth,
         maxHeight,
         width: "90vw",
-        backgroundColor: "$background",
         ...knobProps.panelPadding,
         ...knobProps.gap,
-        ...knobProps.borderRadius,
         children: [headerContent && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Unspaced, {
           children: headerContent
         }), descriptionContent, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {

package/dist/cjs/AdaptivePopup/index.native.js

@@ -28,10 +28,13 @@ __export(AdaptivePopup_exports, {
 });
 module.exports = __toCommonJS(AdaptivePopup_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
 var import_theme = require("@multiplatform.one/theme");
 var import_tamagui = require("tamagui");
 var import_lucide_icons_2 = require("@tamagui/lucide-icons-2");
 var import_Button = require("../Button/index.native.js");
+var import_focusManagement = require("../shared/focusManagement.native.js");
+var import_useSheetEscapeDismiss = require("../shared/useSheetEscapeDismiss.native.js");
 var import_zIndex = require("../shared/zIndex.native.js");
 var import_FloatingPanel = require("../FloatingPanel/index.native.js");
 var sizeToWidth = {
@@ -67,6 +70,12 @@ function AdaptivePopup(param) {
   var media = (0, import_tamagui.useMedia)();
   var viewportGtSm = (0, import_FloatingPanel.useViewportGtSm)();
   var isDesktop = typeof window !== "undefined" ? viewportGtSm : media.gtSm === true;
+  (0, import_useSheetEscapeDismiss.useSheetEscapeDismiss)(open && !isDesktop, function () {
+    return onOpenChange(false);
+  });
+  var sheetFrameRef = (0, import_react.useRef)(null);
+  (0, import_focusManagement.useReturnFocusOnClose)(open && isDesktop);
+  (0, import_focusManagement.useSheetModalFocus)(open && !isDesktop, sheetFrameRef);
   var maxWidth = sizeToWidth[size];
   var maxHeight = sizeToHeight[size];
   var headerContent = (title || showCloseButton) && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
@@ -118,8 +127,10 @@ function AdaptivePopup(param) {
         snapPointsMode: size === "fullscreen" ? "percent" : "fit",
         snapPoints: size === "fullscreen" ? [92] : void 0,
         zIndex: import_zIndex.zIndex.sheet,
+        transition: knobProps.transition,
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Overlay, {
           backgroundColor: "$shadow6",
+          transition: knobProps.transition,
           enterStyle: {
             opacity: 0
           },
@@ -127,6 +138,13 @@ function AdaptivePopup(param) {
             opacity: 0
           }
         }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Sheet.Handle, {}), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Sheet.Frame, {
+          // Sheet.Frame forwards its ref at runtime; the styled prop type
+          // just omits `ref`, hence the cast. tabIndex -1 makes the frame a
+          // programmatic focus target without joining the tab order.
+          ...{
+            ref: sheetFrameRef,
+            tabIndex: -1
+          },
           ...knobProps.panelPadding,
           ...knobProps.gap,
           children: [headerContent, descriptionContent, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
@@ -153,6 +171,7 @@ function AdaptivePopup(param) {
       zIndex: import_zIndex.zIndex.dropdown,
       children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Overlay, {
         backgroundColor: "$shadow6",
+        transition: knobProps.transition,
         enterStyle: {
           opacity: 0
         },
@@ -160,8 +179,15 @@ function AdaptivePopup(param) {
           opacity: 0
         }
       }, "overlay"), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog.Content, {
-        bordered: true,
-        elevate: true,
+        // Dialog.Content's styled base bakes in `elevate: true` (plus its
+        // own bg/border/radius/padding); `unstyled` drops that so the
+        // elevatedSurface knob recipe (SF-OVERLAY/E-OVERLAY) is the only
+        // surface source and elevation `none` actually flattens.
+        unstyled: true,
+        position: "relative",
+        pointerEvents: "auto",
+        ...knobProps.elevatedSurface,
+        transition: knobProps.transition,
         enterStyle: {
           opacity: 0,
           scale: 0.96,
@@ -175,10 +201,8 @@ function AdaptivePopup(param) {
         maxWidth,
         maxHeight,
         width: "90vw",
-        backgroundColor: "$background",
         ...knobProps.panelPadding,
         ...knobProps.gap,
-        ...knobProps.borderRadius,
         children: [headerContent && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Unspaced, {
           children: headerContent
         }), descriptionContent, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {

package/dist/cjs/AdaptivePopup/index.native.js.map

@@ -1 +1 @@
-{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","AdaptivePopup_exports","__export","AdaptivePopup","module","exports","import_jsx_runtime","require","import_theme","import_tamagui","import_lucide_icons_2","import_Button","import_zIndex","import_FloatingPanel","sizeToWidth","sm","md","lg","xl","fullscreen","sizeToHeight","param","open","onOpenChange","trigger","title","description","children","size","showCloseButton","footer","disabled","knobProps","useResolvedKnobs","media","useMedia","viewportGtSm","useViewportGtSm","isDesktop","window","gtSm","maxWidth","maxHeight","headerContent","jsxs","XStack","justifyContent","alignItems","jsx","YStack","flex","Dialog","Title","heading","fontSize","Close","asChild","Button","circular","chromeless","X","descriptionContent","Description","body","color","sizeToken","footerContent","paddingTop","Fragment","View","onPress","cursor","opacity","Sheet","modal","dismissOnSnapToBottom","snapPointsMode","snapPoints","zIndex","sheet","Overlay","backgroundColor","enterStyle","exitStyle","Handle","Frame","panelPadding","gap","Trigger"],"sources":["../../../src/AdaptivePopup/index.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,qBAAA;AAAAC,QAAA,CAAAD,qBAAA;EAAAE,aAAA,EAAAA,CAAA,KAAAA;AAAA;AACAC,MAAA,CAAAC,OAAA,GAAAT,YAAiC,CAAAK,qBAAA;AACjC,IAAAK,kBAAwE,GAAAC,OAAA;AACxE,IAAAC,YAAA,GAAAD,OAAA,2BAAkB;AAClB,IAAAE,cAAA,GAAuBF,OAAA;AACvB,IAAAG,qBAAuB,GAAAH,OAAA;AACvB,IAAAI,aAAA,GAAAJ,OAAgC;AAqE5B,IAAAK,aAAA,GAAAL,OAAA;AArCJ,IAAAM,oBAAsF,GAAAN,OAAA;AAAA,IACpFO,WAAI;EACJC,EAAA,EAAI;EACJC,EAAA,EAAI;EACJC,EAAA,EAAI;EACJC,EAAA;EACFC,UAAA;AAEA;AAAuF,IACrFC,YAAI;EACJL,EAAA,EAAI;EACJC,EAAA,EAAI;EACJC,EAAA,EAAI;EACJC,EAAA;EACFC,UAAA;AAEO;AAAuB,SAC5BhB,cAAAkB,KAAA;EACA;IAAAC,IAAA;IAAAC,YAAA;IAAAC,OAAA;IAAAC,KAAA;IAAAC,WAAA;IAAAC,QAAA;IAAAC,IAAA;IAAAC,eAAA;IAAAC,MAAA;IAAAC;EAAA,IAAAV,KAAA;EACA;IAAAW;EAAA,QAAAxB,YAAA,CAAAyB,gBAAA;EACA,IAAAC,KAAA,OAAAzB,cAAA,CAAA0B,QAAA;EACA,IAAAC,YAAA,OAAAvB,oBAAA,CAAAwB,eAAA;EACA,IAAAC,SAAA,UAAAC,MAAA,mBAAAH,YAAA,GAAAF,KAAA,CAAAM,IAAA;EACA,IAAAC,QAAO,GAAA3B,WAAA,CAAAc,IAAA;EACP,IAAAc,SAAA,GAAAtB,YAAkB,CAAAQ,IAAA;EAClB,IAAAe,aAAA,IAAAlB,KAAA,IAAAI,eAAA,wBAAAvB,kBAAA,CAAAsC,IAAA,EAAAnC,cAAA,CAAAoC,MAAA;IACAC,cAAA;IACqBC,UAAA;IACrBpB,QAAQ,GACRF,KAAM,mBAAQ,IAAAnB,kBAAS,CAAA0C,GAAA,EAAAvC,cAAA,CAAAwC,MAAA;MACjBC,IAAA;MACAvB,QAAA,iBAAmB,IAAWrB,kBAAc,CAAA0C,GAAA,EAAAvC,cAAqB,CAAA0C,MAAS,CAAAC,KAAA;QAE1E,GAAApB,SAAW,CAAAqB,OAAA;QACXC,QAAA,EAAY;QAEZ3B,QAAA,EAAAF;MAED;IAOA,IAOHI,eAAA,uBAAAvB,kBAAA,CAAA0C,GAAA,EAAAvC,cAAA,CAAA0C,MAAA,CAAAI,KAAA;MAGIC,OAAA;MAMA7B,QAAA,iBAA0B,IAAArB,kBAAA,CAAA0C,GAAA,EAAArC,aAAA,CAAA8C,MAAC;QAG5B7B,IAAA,MAAW;QACd8B,QACE;QACGC,UACC;QAAChC,QAAA,qBAAArB,kBAAA,CAAA0C,GAAA,EAAAtC,qBAAA,CAAAkD,CAAA;UAAAhC,IAAA;QACC;MAA6C;IACV;EAGlC;EAAA,IACHiC,kBAAA,GAAAnC,WAAA,uBAAApB,kBAAA,CAAA0C,GAAA,EAAAvC,cAAA,CAAA0C,MAAA,CAAAW,WAAA;IAAA,GAEF9B,SAAA,CAAA+B,IAAA;IAAAC,KAAC;IAAAV,QAAA,EAAAtB,SAAA,CAAAiC,SAAA;IAAAtC,QACC,EAAAD;EAAK;EACL,IAAAwC,aACA,GAAApC,MAAA,uBAAAxB,kBAAA,CAAA0C,GAAA,EAAAvC,cAAA,CAAAwC,MAAA;IAAAkB,UACA;IAAqBxC,QACrB,EAAAG;EAAoD;EACT,KAAAQ,SAC3C,EAAQ;IAAO,OAEf,mBAAAhC,kBAAA,CAAAsC,IAAA,EAAAtC,kBAAA,CAAA8D,QAAA;MAAAzC,QAAA,GAAAH,OAAC,mBAAM,IAAAlB,kBAAA,CAAA0C,GAAA,EAAAvC,cAAA,CAAA4D,IAAA;QAAAC,OAAN,WAAAA,QAAA;UAAA,OACC,CAAAvC,QAAA,IAAAR,YAAgB;QAAA;QACSgD,MACzB,EAAAxC,QAAA,GAAa,aAAW;QAAAyC,OAAA,EAAAzC,QAAA;QAAAJ,QAC1B,EAAAH;MAAA,IACc,eACd,IAAAlB,kBAAA,CAAAsC,IAAA,EAAAnC,cAAC,CAAAgE,KAAA;QACEC,KAAA;QAAApD,IACA;QAAAC,YACD;QAA+DoD,qBAC9D;QAAAC,cACH,EAAAhD,IAAA;QAAAiD,UAAA,EAAAjD,IAAA,wBACF;QACFkD,MAAA,EAAAlE,aAAA,CAAAkE,MAAA,CAAAC,KAAA;QAEJpD,QAAA,GAIE,mBAAArB,kBAAA,CAAA0C,GAAC,EAAAvC,cAAA,CAAAgE,KAAA,CAAAO,OAAO,EAAK;UACVC,eACC;UAOFC,UAAA;YACEV,OAAA;UAAC;UAAAW,SAAA;YAECX,OAAA;UACA;QACA,IAAwB,mBAAAlE,kBAAA,CAAA0C,GAAA,EAAAvC,cAAA,CAAAgE,KAAA,CAAAW,MAAA,OAHpB,mBAAA9E,kBAAA,CAAAsC,IAAA,EAAAnC,cAAA,CAAAgE,KAAA,CAAAY,KAAA;UAIN,GAAArD,SAAA,CAAAsD,YAAA;UACA,GAAAtD,SAAA,CAAAuD,GAAA;UAAC5D,QAAA,GAAAgB,aAAA,EAECkB,kBAAQ,EACR,eAAO,IAAAvD,kBAAA,CAAA0C,GAAA,EAAAvC,cAAA,CAAAwC,MAAA;YACPC,IAAY,EAAEtB,IAAA,KAAS,YAAU,IAAM,GAAG,KAAI;YAC9CD;UACA,IACAuC,aAAA;QAEA;MACc,EACb;IACa;EAEb;EAA0C,sBAC1C,IAAA5D,kBAAA,CAAAsC,IAAA,EAAAnC,cAAA,CAAA0C,MAAA;IAAAuB,KAAA,MACD;IAA+DpD,IAAA;IAC9DC,YAAA;IAAAI,QAAA,GAAAH,OAhBG,uBAAAlB,kBAAA,CAAA0C,GAAA,EAAAvC,cAAA,CAAA0C,MAAA,CAAAqC,OAAA;MAiBNhC,OAAA;MACFzB,QAAA;MACFJ,QAAA,qBAAArB,kBAAA,CAAA0C,GAAA,EAAAvC,cAAA,CAAA4D,IAAA;QAEJE,MAAA,EAAAxC,QAAA","ignoreList":[]}
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","AdaptivePopup_exports","__export","AdaptivePopup","module","exports","import_jsx_runtime","require","import_react","import_theme","import_tamagui","import_lucide_icons_2","import_Button","import_focusManagement","import_useSheetEscapeDismiss","import_zIndex","import_FloatingPanel","sizeToWidth","sm","md","lg","xl","fullscreen","sizeToHeight","param","open","onOpenChange","trigger","title","description","children","size","showCloseButton","footer","disabled","knobProps","useResolvedKnobs","media","useMedia","viewportGtSm","useViewportGtSm","isDesktop","window","gtSm","useSheetEscapeDismiss","sheetFrameRef","useRef","useReturnFocusOnClose","useSheetModalFocus","maxWidth","maxHeight","headerContent","jsxs","XStack","justifyContent","alignItems","jsx","YStack","flex","Dialog","Title","heading","fontSize","Close","asChild","Button","circular","chromeless","X","descriptionContent","Description","body","color","sizeToken","footerContent","paddingTop","Fragment","View","onPress","cursor","opacity","Sheet","modal","dismissOnSnapToBottom","snapPointsMode","snapPoints","zIndex","sheet","transition","Overlay","backgroundColor","enterStyle","exitStyle","Handle","Frame","ref","tabIndex","panelPadding","gap","Trigger"],"sources":["../../../src/AdaptivePopup/index.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/Button/index.cjs

@@ -29,12 +29,32 @@ var import_react = require("react");
 var import_theme = require("@multiplatform.one/theme");
 var import_utils = require("../shared/utils.cjs");
 var import_tamagui = require("tamagui");
+var import_Spinner = require("../Spinner/index.cjs");
 var import_react_store = require("@tanstack/react-store");
 var import_get_token = require("@tamagui/get-token");
 var import_stacks = require("@tamagui/stacks");
+var import_actionLabel = require("../actionLabel.cjs");
 var import_colorRamps = require("../shared/colorRamps.cjs");
+var import_devWarn = require("../shared/devWarn.cjs");
 var import_groupContext = require("../shared/groupContext.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
+function sizeTokenPx(size) {
+  if (typeof size === "number") return size;
+  if (size == null) return import_theme.MIN_PRESS_TARGET;
+  const map = {
+    $1: 20,
+    "$1.5": 24,
+    $2: 28,
+    "$2.5": 32,
+    $3: 36,
+    "$3.5": 40,
+    $4: 44,
+    $true: 44,
+    $5: 52,
+    $6: 64
+  };
+  return map[String(size)] ?? import_theme.MIN_PRESS_TARGET;
+}
 function normalizeButtonIcon(icon) {
   if (icon == null || icon === false) return null;
   if ((0, import_react.isValidElement)(icon)) return icon;
@@ -57,12 +77,14 @@ const getButtonSized = (val, {
   if (typeof val === "number") {
     return {
       paddingHorizontal: val * 0.25,
-      height: val
+      height: Math.max(val, import_theme.MIN_PRESS_TARGET),
+      minHeight: import_theme.MIN_PRESS_TARGET
     };
   }
   return {
     paddingHorizontal: (0, import_get_token.getSpace)(val),
-    height: val
+    height: val,
+    minHeight: import_theme.MIN_PRESS_TARGET
   };
 };
 const textAccentLow = {
@@ -82,16 +104,16 @@ const ButtonFrame = (0, import_tamagui.styled)(import_tamagui.View, {
   alignItems: "center",
   flexWrap: "nowrap",
   flexDirection: "row",
-  backgroundColor: import_colorRamps.formButtonColors.background.base,
-  borderWidth: 1,
-  borderColor: import_colorRamps.formButtonColors.border.base,
+  backgroundColor: "$background",
+  borderColor: "$borderColor",
   hoverStyle: {
-    backgroundColor: import_colorRamps.formButtonColors.background.hover
+    backgroundColor: "$backgroundHover"
   },
   variants: {
     outlined: {
       true: {
         backgroundColor: "transparent",
+        borderWidth: 1,
         hoverStyle: {
           backgroundColor: "transparent"
         },
@@ -129,10 +151,15 @@ function Button({
   disabled,
   theme,
   onPress,
+  onKeyDown,
   tabIndex,
   icon,
   iconAfter,
   compact,
+  verb,
+  noun,
+  actionRole,
+  disabledReason,
   ...props
 }) {
   const {
@@ -141,6 +168,18 @@ function Button({
     form: formProp
   });
   const resolvedForm = action ? formFromHook : void 0;
+  (0, import_devWarn.warnBareDisabled)({
+    component: "Button",
+    id: typeof props.id === "string" ? props.id : void 0,
+    disabled: Boolean(disabled),
+    disabledReason,
+    // loading / form-invalid are derived — not a bare unexplained disable.
+    skip: Boolean(loading)
+  });
+  (0, import_devWarn.warnPositiveTabIndex)({
+    component: "Button",
+    value: typeof tabIndex === "number" ? tabIndex : void 0
+  });
   const {
     isValid
   } = (0, import_react_store.useStore)(resolvedForm?.store ?? dummyStore, s => ({
@@ -150,12 +189,15 @@ function Button({
   const {
     knobProps,
     control,
-    text
+    text,
+    disabledState
   } = (0, import_theme.useResolvedKnobs)({
     intent,
     component: "Button",
     compact
   });
+  const parentScopeTheme = (0, import_tamagui.useTheme)();
+  const pageOutlineColor = parentScopeTheme.outlineColor?.val;
   const grouped = (0, import_groupContext.useControlGrouped)();
   if (skeleton) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
@@ -169,16 +211,25 @@ function Button({
   }
   const isDisabled = disabled || loading || action === "submit" && resolvedForm && !isValid;
   const handlePress = e => {
+    if (isDisabled) return;
     if (action === "submit" && resolvedForm) resolvedForm.handleSubmit();
     if (action === "reset" && resolvedForm) resolvedForm.reset();
     onPress?.(e);
   };
+  const handleKeyDown = e => {
+    onKeyDown?.(e);
+    if (e.defaultPrevented || e.repeat) return;
+    if (e.key !== "Enter" && e.key !== " ") return;
+    e.preventDefault();
+    if (isDisabled) return;
+    e.currentTarget?.click?.();
+  };
   const activeThemeName = theme ?? intent;
   outlined = outlined ?? knobProps.outlined;
   const isLow = knobProps.textAccent === "low";
   const isMedium = knobProps.textAccent === "medium";
   const baseBorderWidth = knobProps.borderRadius.borderWidth;
-  const resolvedBorderWidth = baseBorderWidth > 0 ? Math.max(baseBorderWidth, 1) : outlined ? 1 : 0;
+  const resolvedBorderWidth = outlined ? Math.max(baseBorderWidth, 1) : baseBorderWidth;
   const [hovering, setHovering] = (0, import_react.useState)(false);
   const [pressing, setPressing] = (0, import_react.useState)(false);
   const handlePressIn = (0, import_react.useCallback)(() => {
@@ -192,9 +243,15 @@ function Button({
   }, []);
   const handlePressOut = (0, import_react.useCallback)(() => setPressing(false), []);
   const textColor = isLow ? pressing ? textAccentLow.press : hovering ? textAccentLow.hover : textAccentLow.default : isMedium ? import_colorRamps.formCommonColors.text : void 0;
-  const textContent = loading ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Spinner, {
+  const resolvedRole = actionRole ?? (accent ? "primary" : void 0);
+  const labelFromParts = children == null && verb != null ? (0, import_actionLabel.formatActionLabel)({
+    verb,
+    noun
+  }) : null;
+  const resolvedChildren = children ?? labelFromParts;
+  const textContent = loading ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Spinner.Spinner, {
     size: "small"
-  }) : typeof children === "string" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+  }) : typeof resolvedChildren === "string" ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
     userSelect: "none",
     flexGrow: 0,
     flexShrink: 1,
@@ -205,9 +262,10 @@ function Button({
     ...(textColor ? {
       color: textColor
     } : void 0),
+    ...(isDisabled ? disabledState.textKnobProps : void 0),
     transition: knobProps.transition,
-    children
-  }) : children;
+    children: resolvedChildren
+  }) : resolvedChildren;
   const hasIcon = icon || iconAfter;
   const iconElement = icon ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
     flexShrink: 0,
@@ -217,9 +275,29 @@ function Button({
     flexShrink: 0,
     children: normalizeButtonIcon(iconAfter)
   }) : null;
+  const explainedDisable = Boolean(disabledReason?.trim()) && Boolean(isDisabled);
+  const generatedId = (0, import_react.useId)();
+  const reasonId = explainedDisable ? `${props.id ?? generatedId}-disabled-reason` : void 0;
+  const isCircular = Boolean(props.circular);
+  const resolvedSize = props.size ?? knobProps.sizeToken;
+  const visualPx = sizeTokenPx(resolvedSize);
+  const circularPressFloor = isCircular && visualPx < import_theme.MIN_PRESS_TARGET ? {
+    width: import_theme.MIN_PRESS_TARGET,
+    height: import_theme.MIN_PRESS_TARGET,
+    minWidth: import_theme.MIN_PRESS_TARGET,
+    minHeight: import_theme.MIN_PRESS_TARGET,
+    maxWidth: import_theme.MIN_PRESS_TARGET,
+    maxHeight: import_theme.MIN_PRESS_TARGET,
+    hitSlop: (0, import_theme.pressTargetHitSlop)(visualPx)
+  } : isCircular ? {
+    minWidth: import_theme.MIN_PRESS_TARGET,
+    minHeight: import_theme.MIN_PRESS_TARGET
+  } : {
+    minHeight: import_theme.MIN_PRESS_TARGET
+  };
   const buttonElement = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(ButtonFrame, {
-    disabled: isDisabled || false,
-    opacity: isDisabled ? 0.5 : 1,
+    disabled: explainedDisable ? false : isDisabled || false,
+    opacity: 1,
     transition: knobProps.transition,
     ...knobProps.borderRadius,
     borderWidth: resolvedBorderWidth,
@@ -229,6 +307,14 @@ function Button({
     ...(outlined ? {
       variant: "outlined"
     } : void 0),
+    ...(outlined && intent && import_theme.solidButtonIntents.has(intent) ? {
+      color: "$color11"
+    } : void 0),
+    ...(isDisabled ? {
+      ...disabledState.surfaceKnobProps,
+      ...disabledState.textKnobProps,
+      ...disabledState.assemblyKnobProps
+    } : void 0),
     ...(isLow ? {
       onHoverIn: () => setHovering(true),
       onHoverOut: () => setHovering(false),
@@ -236,44 +322,90 @@ function Button({
       onPressOut: handlePressOut
     } : void 0),
     hoverStyle: {
-      backgroundColor: outlined ? "transparent" : import_colorRamps.formButtonColors.background.hover,
+      backgroundColor: outlined ? "transparent" : "$backgroundHover",
       ...(outlined ? {
-        borderColor: import_colorRamps.formButtonColors.border.hover
+        borderColor: "$borderColorHover"
       } : void 0),
       ...control.hoverKnobProps,
       ...text.hoverKnobProps
     },
     pressStyle: {
-      backgroundColor: outlined ? "transparent" : import_colorRamps.formButtonColors.background.active,
+      backgroundColor: outlined ? "transparent" : "$backgroundPress",
       ...(outlined ? {
-        borderColor: import_colorRamps.formButtonColors.border.active
+        borderColor: "$borderColorPress"
       } : void 0),
       ...control.pressKnobProps,
       ...text.pressKnobProps
     },
     focusStyle: {},
-    focusVisibleStyle: {},
+    focusVisibleStyle: {
+      ...control.focusVisibleKnobProps,
+      ...(pageOutlineColor ? {
+        outlineColor: pageOutlineColor
+      } : void 0)
+    },
     onPress: handlePress,
+    ...(import_tamagui.isWeb ? {
+      onKeyDown: handleKeyDown
+    } : void 0),
     ...(tabIndex != null ? {
       tabIndex
     } : void 0),
     ...props,
+    ...circularPressFloor,
+    ...(explainedDisable ? {
+      // No `title`: hover-only reveals are banned on disabled controls
+      // (DG-OVL-05) — the reason renders as visible adjacent text.
+      "aria-disabled": true,
+      ...(import_tamagui.isWeb ? {
+        "aria-describedby": reasonId
+      } : {
+        accessibilityHint: disabledReason
+      }),
+      cursor: "not-allowed",
+      // Hover/press keep the LC-40 washed chrome — an aria-disabled
+      // control must not light up like a pressable one.
+      hoverStyle: {
+        backgroundColor: outlined ? "transparent" : "$background",
+        ...disabledState.surfaceKnobProps
+      },
+      pressStyle: {
+        backgroundColor: outlined ? "transparent" : "$background",
+        ...disabledState.surfaceKnobProps
+      },
+      "data-mp-disabled-explained": "true"
+    } : void 0),
     ...(grouped ? {
       borderWidth: 0,
       borderRadius: 0,
       elevation: void 0,
       height: "100%"
     } : void 0),
-    gap: hasIcon && (children || textContent) ? "$2" : void 0,
+    gap: hasIcon && (resolvedChildren || textContent) ? "$2" : void 0,
+    ...(resolvedRole ? {
+      "data-mp-action-role": resolvedRole
+    } : void 0),
     children: [iconElement, textContent, iconAfterElement]
   });
+  const explainedElement = explainedDisable ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    gap: "$1",
+    flexShrink: 1,
+    "data-mp-disabled-reason-wrapper": "true",
+    children: [buttonElement, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.SizableText, {
+      id: reasonId,
+      size: "$1",
+      color: import_colorRamps.formCommonColors.muted,
+      "data-mp-disabled-reason": "true",
+      children: disabledReason
+    })]
+  }) : buttonElement;
   if (activeThemeName) {
     return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Theme, {
       name: activeThemeName,
-      children: buttonElement
+      children: explainedElement
     });
   }
-  return buttonElement;
+  return explainedElement;
 }
 Button.Icon = import_tamagui.Button.Icon;
 Button.Text = import_tamagui.SizableText;