@plasmicpkgs/react-aria 0.0.23 → 0.0.25

package/dist/react-aria.js

@@ -66,6 +66,41 @@ function getCommonInputProps(fieldName, fields) {
   return filteredProps;
 }
 
+const ARIA_COMPONENTS_INTERACTION_VARIANTS = {
+  hovered: {
+    cssSelector: "[data-hovered]",
+    displayName: "Hovered"
+  },
+  pressed: {
+    cssSelector: "[data-pressed]",
+    displayName: "Pressed"
+  },
+  focused: {
+    cssSelector: "[data-focused]",
+    displayName: "Focused"
+  },
+  focusVisible: {
+    cssSelector: "[data-focus-visible]",
+    displayName: "Focus Visible"
+  }
+};
+function realWithObservedValues(children, changes, updateInteractionVariant) {
+  React__default.default.useEffect(() => {
+    if (updateInteractionVariant) {
+      updateInteractionVariant(changes);
+    }
+  }, [changes, updateInteractionVariant]);
+  return children;
+}
+function pickAriaComponentVariants(keys) {
+  return {
+    interactionVariants: Object.fromEntries(
+      keys.map((key) => [key, ARIA_COMPONENTS_INTERACTION_VARIANTS[key]])
+    ),
+    withObservedValues: realWithObservedValues
+  };
+}
+
 var __defProp$m = Object.defineProperty;
 var __defProps$d = Object.defineProperties;
 var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
@@ -85,12 +120,6 @@ var __spreadValues$m = (a, b) => {
   return a;
 };
 var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
-function ValueObserver({ value, onChange }) {
-  React.useEffect(() => {
-    onChange(value);
-  }, [value, onChange]);
-  return null;
-}
 function registerComponentHelper(loader, component, meta, overrides) {
   if (overrides) {
     meta = __spreadProps$d(__spreadValues$m(__spreadValues$m({}, meta), overrides), {
@@ -123,9 +152,7 @@ function makeChildComponentName(fullParentName, fullChildName) {
 }
 function extractPlasmicDataProps(props) {
   return Object.fromEntries(
-    Object.entries(props).filter(
-      ([key, val]) => key.startsWith("data-plasmic-")
-    )
+    Object.entries(props).filter(([key]) => key.startsWith("data-plasmic-"))
   );
 }
 function withoutNils(array) {
@@ -151,7 +178,7 @@ var __spreadValues$l = (a, b) => {
   return a;
 };
 var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
-var __objRest$c = (source, exclude) => {
+var __objRest$e = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$l.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -163,16 +190,38 @@ var __objRest$c = (source, exclude) => {
     }
   return target;
 };
+const BUTTON_INTERACTION_VARIANTS = [
+  "hovered",
+  "pressed",
+  "focused",
+  "focusVisible"
+];
+const { interactionVariants: interactionVariants$5, withObservedValues: withObservedValues$3 } = pickAriaComponentVariants(
+  BUTTON_INTERACTION_VARIANTS
+);
 function BaseButton(props) {
-  const _a = props, { submitsForm, onFocusVisibleChange, resetsForm, children } = _a, rest = __objRest$c(_a, ["submitsForm", "onFocusVisibleChange", "resetsForm", "children"]);
+  const _a = props, {
+    submitsForm,
+    resetsForm,
+    children,
+    updateInteractionVariant
+  } = _a, rest = __objRest$e(_a, [
+    "submitsForm",
+    "resetsForm",
+    "children",
+    "updateInteractionVariant"
+  ]);
   const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
-  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Button, __spreadValues$l({ type }, rest), ({ isFocusVisible }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
-    ValueObserver,
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Button, __spreadValues$l({ type }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible }) => withObservedValues$3(
+    children,
     {
-      value: isFocusVisible,
-      onChange: onFocusVisibleChange
-    }
-  ), children));
+      hovered: isHovered,
+      pressed: isPressed,
+      focused: isFocused,
+      focusVisible: isFocusVisible
+    },
+    updateInteractionVariant
+  ));
 }
 function registerButton(loader, overrides) {
   registerComponentHelper(
@@ -183,6 +232,7 @@ function registerButton(loader, overrides) {
       displayName: "Aria Button",
       importPath: "@plasmicpkgs/react-aria/skinny/registerButton",
       importName: "BaseButton",
+      interactionVariants: interactionVariants$5,
       props: __spreadProps$c(__spreadValues$l({}, getCommonInputProps("button", [
         "isDisabled",
         "aria-label",
@@ -203,50 +253,8 @@ function registerButton(loader, overrides) {
           hidden: (ps) => Boolean(ps.submitsForm),
           description: "Whether clicking this button should reset the enclosing form.",
           advanced: true
-        },
-        onPress: {
-          type: "eventHandler",
-          argTypes: [{ name: "event", type: "object" }]
-        },
-        onHoverChange: {
-          type: "eventHandler",
-          argTypes: [{ name: "isHovered", type: "boolean" }]
-        },
-        onPressChange: {
-          type: "eventHandler",
-          argTypes: [{ name: "isPressed", type: "boolean" }]
-        },
-        onFocusChange: {
-          type: "eventHandler",
-          argTypes: [{ name: "isFocused", type: "boolean" }]
-        },
-        onFocusVisibleChange: {
-          type: "eventHandler",
-          argTypes: [{ name: "isFocusVisible", type: "boolean" }]
         }
       }),
-      states: {
-        isHovered: {
-          type: "readonly",
-          onChangeProp: "onHoverChange",
-          variableType: "boolean"
-        },
-        isPressed: {
-          type: "readonly",
-          onChangeProp: "onPressChange",
-          variableType: "boolean"
-        },
-        isFocused: {
-          type: "readonly",
-          onChangeProp: "onFocusChange",
-          variableType: "boolean"
-        },
-        isFocusVisible: {
-          type: "readonly",
-          onChangeProp: "onFocusVisibleChange",
-          variableType: "boolean"
-        }
-      },
       trapsFocus: true
     },
     overrides
@@ -272,7 +280,7 @@ var __spreadValues$k = (a, b) => {
   return a;
 };
 var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
-var __objRest$b = (source, exclude) => {
+var __objRest$d = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -284,15 +292,27 @@ var __objRest$b = (source, exclude) => {
     }
   return target;
 };
+const CHECKBOX_INTERACTION_VARIANTS = [
+  "hovered",
+  "pressed",
+  "focused",
+  "focusVisible"
+];
+const { interactionVariants: interactionVariants$4, withObservedValues: withObservedValues$2 } = pickAriaComponentVariants(
+  CHECKBOX_INTERACTION_VARIANTS
+);
 function BaseCheckbox(props) {
-  const _a = props, { children, onPressChange, onFocusVisibleChange } = _a, rest = __objRest$b(_a, ["children", "onPressChange", "onFocusVisibleChange"]);
-  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Checkbox, __spreadValues$k({}, rest), ({ isFocusVisible, isPressed }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
-    ValueObserver,
+  const _a = props, { children, updateInteractionVariant } = _a, rest = __objRest$d(_a, ["children", "updateInteractionVariant"]);
+  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Checkbox, __spreadValues$k({}, rest), ({ isHovered, isPressed, isFocused, isFocusVisible }) => withObservedValues$2(
+    children,
     {
-      value: isFocusVisible,
-      onChange: onFocusVisibleChange
-    }
-  ), /* @__PURE__ */ React__default.default.createElement(ValueObserver, { value: isPressed, onChange: onPressChange }), children)));
+      hovered: isHovered,
+      pressed: isPressed,
+      focused: isFocused,
+      focusVisible: isFocusVisible
+    },
+    updateInteractionVariant
+  )));
 }
 function registerCheckbox(loader, overrides) {
   registerComponentHelper(
@@ -303,6 +323,7 @@ function registerCheckbox(loader, overrides) {
       displayName: "Aria Checkbox",
       importPath: "@plasmicpkgs/react-aria/skinny/registerCheckbox",
       importName: "BaseCheckbox",
+      interactionVariants: interactionVariants$4,
       props: __spreadProps$b(__spreadValues$k({}, getCommonInputProps("checkbox", [
         "name",
         "isDisabled",
@@ -344,22 +365,6 @@ function registerCheckbox(loader, overrides) {
         onChange: {
           type: "eventHandler",
           argTypes: [{ name: "isSelected", type: "boolean" }]
-        },
-        onHoverChange: {
-          type: "eventHandler",
-          argTypes: [{ name: "isHovered", type: "boolean" }]
-        },
-        onFocusChange: {
-          type: "eventHandler",
-          argTypes: [{ name: "isFocused", type: "boolean" }]
-        },
-        onPressChange: {
-          type: "eventHandler",
-          argTypes: [{ name: "isPressed", type: "boolean" }]
-        },
-        onFocusVisibleChange: {
-          type: "eventHandler",
-          argTypes: [{ name: "isFocusVisible", type: "boolean" }]
         }
       }),
       states: {
@@ -368,26 +373,6 @@ function registerCheckbox(loader, overrides) {
           valueProp: "isSelected",
           onChangeProp: "onChange",
           variableType: "boolean"
-        },
-        isHovered: {
-          type: "readonly",
-          onChangeProp: "onHoverChange",
-          variableType: "boolean"
-        },
-        isPressed: {
-          type: "readonly",
-          onChangeProp: "onPressChange",
-          variableType: "boolean"
-        },
-        isFocused: {
-          type: "readonly",
-          onChangeProp: "onFocusChange",
-          variableType: "boolean"
-        },
-        isFocusVisible: {
-          type: "readonly",
-          onChangeProp: "onFocusVisibleChange",
-          variableType: "boolean"
         }
       },
       trapsFocus: true
@@ -412,7 +397,7 @@ var __spreadValues$j = (a, b) => {
     }
   return a;
 };
-var __objRest$a = (source, exclude) => {
+var __objRest$c = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -425,7 +410,7 @@ var __objRest$a = (source, exclude) => {
   return target;
 };
 function BaseText(_a) {
-  var _b = _a, { children } = _b, rest = __objRest$a(_b, ["children"]);
+  var _b = _a, { children } = _b, rest = __objRest$c(_b, ["children"]);
   return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Text, __spreadValues$j({}, rest), children);
 }
 function registerText(loader, overrides) {
@@ -495,7 +480,7 @@ var __spreadValues$h = (a, b) => {
     }
   return a;
 };
-var __objRest$9 = (source, exclude) => {
+var __objRest$b = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$h.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -519,7 +504,7 @@ function BaseFieldError(_a) {
     tooShort,
     typeMismatch,
     valueMissing
-  } = _b, rest = __objRest$9(_b, [
+  } = _b, rest = __objRest$b(_b, [
     "badInput",
     "customError",
     "patternMismatch",
@@ -1184,7 +1169,7 @@ var __spreadValues$e = (a, b) => {
     }
   return a;
 };
-var __objRest$8 = (source, exclude) => {
+var __objRest$a = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1197,7 +1182,7 @@ var __objRest$8 = (source, exclude) => {
   return target;
 };
 function BaseForm(props) {
-  const _a = props, { onSubmit, children } = _a, rest = __objRest$8(_a, ["onSubmit", "children"]);
+  const _a = props, { onSubmit, children } = _a, rest = __objRest$a(_a, ["onSubmit", "children"]);
   return /* @__PURE__ */ React__default.default.createElement(
     reactAriaComponents.Form,
     __spreadValues$e({
@@ -1266,8 +1251,44 @@ var __spreadValues$d = (a, b) => {
     }
   return a;
 };
+var __objRest$9 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$d.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const INPUT_INTERACTION_VARIANTS = ["focused", "hovered"];
+const { interactionVariants: interactionVariants$3 } = pickAriaComponentVariants(
+  INPUT_INTERACTION_VARIANTS
+);
 function BaseInput(props) {
-  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Input, __spreadValues$d({}, props));
+  const _a = props, { updateInteractionVariant } = _a, rest = __objRest$9(_a, ["updateInteractionVariant"]);
+  return /* @__PURE__ */ React__default.default.createElement(
+    reactAriaComponents.Input,
+    __spreadValues$d({
+      onHoverChange: (isHovered) => {
+        updateInteractionVariant == null ? void 0 : updateInteractionVariant({
+          hovered: isHovered
+        });
+      },
+      onFocus: () => {
+        updateInteractionVariant == null ? void 0 : updateInteractionVariant({
+          focused: true
+        });
+      },
+      onBlur: () => {
+        updateInteractionVariant == null ? void 0 : updateInteractionVariant({
+          focused: false
+        });
+      }
+    }, rest)
+  );
 }
 function registerInput(loader, overrides) {
   registerComponentHelper(
@@ -1278,6 +1299,7 @@ function registerInput(loader, overrides) {
       displayName: "Aria Input",
       importPath: "@plasmicpkgs/react-aria/skinny/registerInput",
       importName: "BaseInput",
+      interactionVariants: interactionVariants$3,
       props: {
         placeholder: {
           type: "string"
@@ -1364,7 +1386,7 @@ var __spreadValues$b = (a, b) => {
   return a;
 };
 var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-var __objRest$7 = (source, exclude) => {
+var __objRest$8 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1420,7 +1442,7 @@ function BaseListBox(props) {
     renderItem,
     renderSection,
     getItemType
-  } = _a, rest = __objRest$7(_a, [
+  } = _a, rest = __objRest$8(_a, [
     "makeItemProps",
     "makeSectionProps",
     "renderItem",
@@ -1506,7 +1528,7 @@ var __spreadValues$a = (a, b) => {
   return a;
 };
 var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-var __objRest$6 = (source, exclude) => {
+var __objRest$7 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1526,7 +1548,7 @@ const BaseModal = React.forwardRef(
       modalOverlayClass,
       onOpenChange,
       className
-    } = _a, rest = __objRest$6(_a, [
+    } = _a, rest = __objRest$7(_a, [
       "children",
       "heading",
       "modalOverlayClass",
@@ -1636,7 +1658,7 @@ var __spreadValues$9 = (a, b) => {
   return a;
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-var __objRest$5 = (source, exclude) => {
+var __objRest$6 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1649,7 +1671,7 @@ var __objRest$5 = (source, exclude) => {
   return target;
 };
 function BasePopover(props) {
-  const _a = props, { resetClassName } = _a, restProps = __objRest$5(_a, ["resetClassName"]);
+  const _a = props, { resetClassName } = _a, restProps = __objRest$6(_a, ["resetClassName"]);
   const isStandalone = !React__default.default.useContext(reactAriaComponents.PopoverContext);
   const contextProps = React__default.default.useContext(PlasmicPopoverContext);
   const canvas = host.usePlasmicCanvasContext();
@@ -1760,7 +1782,7 @@ var __spreadValues$8 = (a, b) => {
   return a;
 };
 var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-var __objRest$4 = (source, exclude) => {
+var __objRest$5 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$8.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -1772,27 +1794,27 @@ var __objRest$4 = (source, exclude) => {
     }
   return target;
 };
+const RADIO_INTERACTION_VARIANTS = [
+  "hovered",
+  "pressed",
+  "focused",
+  "focusVisible"
+];
+const { interactionVariants: interactionVariants$2, withObservedValues: withObservedValues$1 } = pickAriaComponentVariants(
+  RADIO_INTERACTION_VARIANTS
+);
 function BaseRadio(props) {
-  const _a = props, {
+  const _a = props, { children, updateInteractionVariant } = _a, rest = __objRest$5(_a, ["children", "updateInteractionVariant"]);
+  const radio = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Radio, __spreadValues$8({}, rest), ({ isHovered, isPressed, isFocused, isFocusVisible }) => withObservedValues$1(
     children,
-    onPressChange,
-    onFocusVisibleChange,
-    onHoverChange,
-    onSelectionChange
-  } = _a, rest = __objRest$4(_a, [
-    "children",
-    "onPressChange",
-    "onFocusVisibleChange",
-    "onHoverChange",
-    "onSelectionChange"
-  ]);
-  const radio = /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Radio, __spreadValues$8({}, rest), ({ isFocusVisible, isPressed, isHovered, isSelected }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
-    ValueObserver,
     {
-      value: isFocusVisible,
-      onChange: onFocusVisibleChange
-    }
-  ), /* @__PURE__ */ React__default.default.createElement(ValueObserver, { value: isSelected, onChange: onSelectionChange }), /* @__PURE__ */ React__default.default.createElement(ValueObserver, { value: isPressed, onChange: onPressChange }), /* @__PURE__ */ React__default.default.createElement(ValueObserver, { value: isHovered, onChange: onHoverChange }), children));
+      hovered: isHovered,
+      pressed: isPressed,
+      focused: isFocused,
+      focusVisible: isFocusVisible
+    },
+    updateInteractionVariant
+  ));
   return /* @__PURE__ */ React__default.default.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.RadioGroup, null, radio) }, radio);
 }
 function registerRadio(loader, overrides) {
@@ -1804,6 +1826,7 @@ function registerRadio(loader, overrides) {
       displayName: "Aria Radio",
       importPath: "@plasmicpkgs/react-aria/skinny/registerRadio",
       importName: "BaseRadio",
+      interactionVariants: interactionVariants$2,
       props: __spreadProps$4(__spreadValues$8({}, getCommonInputProps("radio", [
         "isDisabled",
         "autoFocus",
@@ -1814,48 +1837,12 @@ function registerRadio(loader, overrides) {
           type: "string",
           description: "The value of the input element, used when submitting an HTML form."
         },
-        onHoverChange: {
-          type: "eventHandler",
-          argTypes: [{ name: "isHovered", type: "boolean" }]
-        },
-        onFocusChange: {
-          type: "eventHandler",
-          argTypes: [{ name: "isFocused", type: "boolean" }]
-        },
-        onPressChange: {
-          type: "eventHandler",
-          argTypes: [{ name: "isPressed", type: "boolean" }]
-        },
-        onFocusVisibleChange: {
-          type: "eventHandler",
-          argTypes: [{ name: "isFocusVisible", type: "boolean" }]
-        },
         onSelectionChange: {
           type: "eventHandler",
           argTypes: [{ name: "isSelected", type: "boolean" }]
         }
       }),
       states: {
-        isHovered: {
-          type: "readonly",
-          onChangeProp: "onHoverChange",
-          variableType: "boolean"
-        },
-        isPressed: {
-          type: "readonly",
-          onChangeProp: "onPressChange",
-          variableType: "boolean"
-        },
-        isFocused: {
-          type: "readonly",
-          onChangeProp: "onFocusChange",
-          variableType: "boolean"
-        },
-        isFocusVisible: {
-          type: "readonly",
-          onChangeProp: "onFocusVisibleChange",
-          variableType: "boolean"
-        },
         isSelected: {
           type: "readonly",
           onChangeProp: "onSelectionChange",
@@ -1887,22 +1874,7 @@ var __spreadValues$7 = (a, b) => {
   return a;
 };
 var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-var __objRest$3 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$7.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$7.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-function BaseRadioGroup(props) {
-  const _a = props, { children } = _a, rest = __objRest$3(_a, ["children"]);
-  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.RadioGroup, __spreadValues$7({}, rest), children));
-}
+const BaseRadioGroup = reactAriaComponents.RadioGroup;
 const componentName$1 = makeComponentName("radioGroup");
 function registerRadioGroup(loader, overrides) {
   registerComponentHelper(
@@ -1942,10 +1914,6 @@ function registerRadioGroup(loader, overrides) {
         onChange: {
           type: "eventHandler",
           argTypes: [{ name: "value", type: "string" }]
-        },
-        onFocusChange: {
-          type: "eventHandler",
-          argTypes: [{ name: "isFocused", type: "boolean" }]
         }
       }),
       states: {
@@ -1954,11 +1922,6 @@ function registerRadioGroup(loader, overrides) {
           valueProp: "value",
           onChangeProp: "onChange",
           variableType: "array"
-        },
-        isFocused: {
-          type: "readonly",
-          onChangeProp: "onFocusChange",
-          variableType: "boolean"
         }
       },
       trapsFocus: true
@@ -2028,7 +1991,7 @@ var __spreadValues$5 = (a, b) => {
     }
   return a;
 };
-var __objRest$2 = (source, exclude) => {
+var __objRest$4 = (source, exclude) => {
   var target = {};
   for (var prop in source)
     if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
@@ -2043,7 +2006,7 @@ var __objRest$2 = (source, exclude) => {
 function BaseSection(props) {
   const contextProps = React__default.default.useContext(PlasmicSectionContext);
   const mergedProps = utils.mergeProps(contextProps, props);
-  const _a = mergedProps, { section, renderHeader, key, makeItemProps, renderItem } = _a, rest = __objRest$2(_a, ["section", "renderHeader", "key", "makeItemProps", "renderItem"]);
+  const _a = mergedProps, { section, renderHeader, key, makeItemProps, renderItem } = _a, rest = __objRest$4(_a, ["section", "renderHeader", "key", "makeItemProps", "renderItem"]);
   return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Section, __spreadValues$5({ id: key != null ? key : void 0 }, rest), /* @__PURE__ */ React__default.default.createElement(PlasmicHeaderContext.Provider, { value: { children: section == null ? void 0 : section.label } }, renderHeader == null ? void 0 : renderHeader(section)), /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Collection, { items: section == null ? void 0 : section.items }, (item) => {
     const itemProps = makeItemProps == null ? void 0 : makeItemProps(item);
     return /* @__PURE__ */ React__default.default.createElement(PlasmicItemContext.Provider, { key: itemProps == null ? void 0 : itemProps.key, value: itemProps }, renderItem == null ? void 0 : renderItem(item));
@@ -2284,7 +2247,40 @@ var __spreadValues$3 = (a, b) => {
   return a;
 };
 var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-const BaseSwitch = reactAriaComponents.Switch;
+var __objRest$3 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const SWITCH_INTERACTION_VARIANTS = [
+  "hovered",
+  "pressed",
+  "focused",
+  "focusVisible"
+];
+const { interactionVariants: interactionVariants$1, withObservedValues } = pickAriaComponentVariants(
+  SWITCH_INTERACTION_VARIANTS
+);
+function BaseSwitch(props) {
+  const _a = props, { children, updateInteractionVariant } = _a, rest = __objRest$3(_a, ["children", "updateInteractionVariant"]);
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Switch, __spreadValues$3({}, rest), ({ isHovered, isPressed, isFocused, isFocusVisible }) => withObservedValues(
+    children,
+    {
+      hovered: isHovered,
+      pressed: isPressed,
+      focused: isFocused,
+      focusVisible: isFocusVisible
+    },
+    updateInteractionVariant
+  ));
+}
 function registerSwitch(loader, overrides) {
   registerComponentHelper(
     loader,
@@ -2294,6 +2290,7 @@ function registerSwitch(loader, overrides) {
       displayName: "Aria Switch",
       importPath: "@plasmicpkgs/react-aria/skinny/registerSwitch",
       importName: "BaseSwitch",
+      interactionVariants: interactionVariants$1,
       props: __spreadProps$2(__spreadValues$3({}, getCommonInputProps("switch", [
         "name",
         "isDisabled",
@@ -2312,10 +2309,6 @@ function registerSwitch(loader, overrides) {
         onChange: {
           type: "eventHandler",
           argTypes: [{ name: "isSelected", type: "boolean" }]
-        },
-        onHoverChange: {
-          type: "eventHandler",
-          argTypes: [{ name: "isHovered", type: "boolean" }]
         }
       }),
       states: {
@@ -2324,11 +2317,6 @@ function registerSwitch(loader, overrides) {
           valueProp: "value",
           onChangeProp: "onChange",
           variableType: "boolean"
-        },
-        isHovered: {
-          type: "readonly",
-          onChangeProp: "onHoverChange",
-          variableType: "boolean"
         }
       },
       trapsFocus: true
@@ -2353,8 +2341,45 @@ var __spreadValues$2 = (a, b) => {
     }
   return a;
 };
+var __objRest$2 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const TEXTAREA_INTERACTION_VARIANTS = ["focused", "hovered"];
+const { interactionVariants } = pickAriaComponentVariants(
+  TEXTAREA_INTERACTION_VARIANTS
+);
 function BaseTextArea(props) {
-  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.TextArea, __spreadValues$2({}, props));
+  const _a = props, { disabled, updateInteractionVariant } = _a, rest = __objRest$2(_a, ["disabled", "updateInteractionVariant"]);
+  return /* @__PURE__ */ React__default.default.createElement(
+    reactAriaComponents.TextArea,
+    __spreadValues$2({
+      onFocus: () => {
+        updateInteractionVariant == null ? void 0 : updateInteractionVariant({
+          focused: true
+        });
+      },
+      onBlur: () => {
+        updateInteractionVariant == null ? void 0 : updateInteractionVariant({
+          focused: false
+        });
+      },
+      onHoverChange: (isHovered) => {
+        updateInteractionVariant == null ? void 0 : updateInteractionVariant({
+          hovered: isHovered
+        });
+      },
+      disabled
+    }, rest)
+  );
 }
 function registerTextArea(loader, overrides) {
   registerComponentHelper(
@@ -2365,9 +2390,30 @@ function registerTextArea(loader, overrides) {
       displayName: "Aria TextArea",
       importPath: "@plasmicpkgs/react-aria/skinny/registerTextArea",
       importName: "BaseTextArea",
+      interactionVariants,
       props: {
         placeholder: {
           type: "string"
+        },
+        onKeyDown: {
+          type: "eventHandler",
+          argTypes: [{ name: "keyboardEvent", type: "object" }]
+        },
+        onKeyUp: {
+          type: "eventHandler",
+          argTypes: [{ name: "keyboardEvent", type: "object" }]
+        },
+        onCopy: {
+          type: "eventHandler",
+          argTypes: [{ name: "clipbordEvent", type: "object" }]
+        },
+        onCut: {
+          type: "eventHandler",
+          argTypes: [{ name: "clipbordEvent", type: "object" }]
+        },
+        onPaste: {
+          type: "eventHandler",
+          argTypes: [{ name: "clipbordEvent", type: "object" }]
         }
       },
       trapsFocus: true
@@ -2580,9 +2626,61 @@ function registerTextField(loader, overrides) {
           type: "eventHandler",
           argTypes: [{ name: "value", type: "string" }]
         },
+        onFocus: {
+          type: "eventHandler",
+          argTypes: [{ name: "focusEvent", type: "object" }]
+        },
+        onBlur: {
+          type: "eventHandler",
+          argTypes: [{ name: "focusEvent", type: "object" }]
+        },
         onFocusChange: {
           type: "eventHandler",
           argTypes: [{ name: "isFocused", type: "boolean" }]
+        },
+        onKeyDown: {
+          type: "eventHandler",
+          argTypes: [{ name: "keyboardEvent", type: "object" }]
+        },
+        onKeyUp: {
+          type: "eventHandler",
+          argTypes: [{ name: "keyboardEvent", type: "object" }]
+        },
+        onCopy: {
+          type: "eventHandler",
+          argTypes: [{ name: "clipbordEvent", type: "object" }]
+        },
+        onCut: {
+          type: "eventHandler",
+          argTypes: [{ name: "clipbordEvent", type: "object" }]
+        },
+        onPaste: {
+          type: "eventHandler",
+          argTypes: [{ name: "clipbordEvent", type: "object" }]
+        },
+        onCompositionStart: {
+          type: "eventHandler",
+          argTypes: [{ name: "compositionEvent", type: "object" }]
+        },
+        onCompositionEnd: {
+          type: "eventHandler",
+          argTypes: [{ name: "compositionEvent", type: "object" }]
+        },
+        onCompositionUpdate: {
+          type: "eventHandler",
+          argTypes: [{ name: "compositionEvent", type: "object" }]
+        },
+        onSelect: {
+          type: "eventHandler",
+          argTypes: [{ name: "selectionEvent", type: "object" }]
+        },
+        onBeforeInput: {
+          type: "eventHandler",
+          argTypes: [{ name: "inputEvent", type: "object" }]
+        },
+        onInput: {
+          type: "eventHandler",
+          argTypes: [{ name: "inputEvent", type: "object" }]
         }
       }),
       // NOTE: React-Aria does not support render props for <Input> and <Textarea>, so focusVisible and inputHovered states are not implemented
@@ -2592,11 +2690,6 @@ function registerTextField(loader, overrides) {
           valueProp: "value",
           onChangeProp: "onChange",
           variableType: "text"
-        },
-        isFocused: {
-          type: "readonly",
-          onChangeProp: "onFocusChange",
-          variableType: "boolean"
         }
       },
       trapsFocus: true