@plasmicpkgs/react-aria 0.0.23 → 0.0.25

package/dist/registerButton.d.ts

@@ -1,10 +1,13 @@
 import React from "react";
 import type { ButtonProps } from "react-aria-components";
+import { UpdateInteractionVariant } from "./interaction-variant-utils";
 import { CodeComponentMetaOverrides, Registerable } from "./utils";
+declare const BUTTON_INTERACTION_VARIANTS: ("hovered" | "pressed" | "focused" | "focusVisible")[];
 interface BaseButtonProps extends ButtonProps {
+    children: React.ReactNode;
     resetsForm?: boolean;
     submitsForm?: boolean;
-    onFocusVisibleChange?: (isFocusVisible: boolean) => void;
+    updateInteractionVariant?: UpdateInteractionVariant<typeof BUTTON_INTERACTION_VARIANTS>;
 }
 export declare function BaseButton(props: BaseButtonProps): React.JSX.Element;
 export declare function registerButton(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseButton>): void;

package/dist/registerCheckbox.d.ts

@@ -1,9 +1,11 @@
 import React from "react";
 import type { CheckboxProps } from "react-aria-components";
+import { UpdateInteractionVariant } from "./interaction-variant-utils";
 import { CodeComponentMetaOverrides, Registerable } from "./utils";
+declare const CHECKBOX_INTERACTION_VARIANTS: ("hovered" | "pressed" | "focused" | "focusVisible")[];
 interface BaseCheckboxProps extends CheckboxProps {
-    onPressChange: (isPressed: boolean) => void;
-    onFocusVisibleChange: (isFocusVisible: boolean) => void;
+    children: React.ReactNode;
+    updateInteractionVariant?: UpdateInteractionVariant<typeof CHECKBOX_INTERACTION_VARIANTS>;
 }
 export declare function BaseCheckbox(props: BaseCheckboxProps): React.JSX.Element;
 export declare function registerCheckbox(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseCheckbox>): void;

package/dist/registerInput.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
 import type { InputProps } from "react-aria-components";
+import { UpdateInteractionVariant } from "./interaction-variant-utils";
 import { CodeComponentMetaOverrides, Registerable } from "./utils";
-export declare function BaseInput(props: InputProps): React.JSX.Element;
+declare const INPUT_INTERACTION_VARIANTS: ("hovered" | "focused")[];
+export interface BaseInputProps extends InputProps {
+    updateInteractionVariant?: UpdateInteractionVariant<typeof INPUT_INTERACTION_VARIANTS>;
+}
+export declare function BaseInput(props: BaseInputProps): React.JSX.Element;
 export declare function registerInput(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseInput>): void;
+export {};

package/dist/registerRadio.d.ts

@@ -1,10 +1,12 @@
 import React from "react";
 import type { RadioProps } from "react-aria-components";
+import { UpdateInteractionVariant } from "./interaction-variant-utils";
 import { CodeComponentMetaOverrides, Registerable } from "./utils";
-interface BaseRadioProps extends RadioProps {
-    onSelectionChange: (isSelected: boolean) => void;
-    onPressChange: (isPressed: boolean) => void;
-    onFocusVisibleChange: (isFocusVisible: boolean) => void;
+declare const RADIO_INTERACTION_VARIANTS: ("hovered" | "pressed" | "focused" | "focusVisible")[];
+export interface BaseRadioProps extends RadioProps {
+    children: React.ReactNode;
+    isSelected: boolean;
+    updateInteractionVariant?: UpdateInteractionVariant<typeof RADIO_INTERACTION_VARIANTS>;
 }
 export declare function BaseRadio(props: BaseRadioProps): React.JSX.Element;
 export declare function registerRadio(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseRadio>): void;

package/dist/registerRadioGroup.d.ts

@@ -1,9 +1,5 @@
-import React, { ReactNode } from "react";
+/// <reference types="react" />
 import type { RadioGroupProps } from "react-aria-components";
 import { CodeComponentMetaOverrides, Registerable } from "./utils";
-interface BaseRadioGroupProps extends RadioGroupProps {
-    children?: ReactNode;
-}
-export declare function BaseRadioGroup(props: BaseRadioGroupProps): React.JSX.Element;
+export declare const BaseRadioGroup: (props: RadioGroupProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export declare function registerRadioGroup(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseRadioGroup>): void;
-export {};

package/dist/registerSwitch.d.ts

@@ -1,5 +1,12 @@
-/// <reference types="react" />
+import React from "react";
 import type { SwitchProps } from "react-aria-components";
+import { UpdateInteractionVariant } from "./interaction-variant-utils";
 import { CodeComponentMetaOverrides, Registerable } from "./utils";
-export declare const BaseSwitch: (props: SwitchProps & import("react").RefAttributes<HTMLLabelElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+declare const SWITCH_INTERACTION_VARIANTS: ("hovered" | "pressed" | "focused" | "focusVisible")[];
+interface BaseSwitchProps extends SwitchProps {
+    children: React.ReactNode;
+    updateInteractionVariant?: UpdateInteractionVariant<typeof SWITCH_INTERACTION_VARIANTS>;
+}
+export declare function BaseSwitch(props: BaseSwitchProps): React.JSX.Element;
 export declare function registerSwitch(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseSwitch>): void;
+export {};

package/dist/registerTextArea.d.ts

@@ -1,5 +1,11 @@
 import React from "react";
 import type { TextAreaProps } from "react-aria-components";
+import { UpdateInteractionVariant } from "./interaction-variant-utils";
 import { CodeComponentMetaOverrides, Registerable } from "./utils";
-export declare function BaseTextArea(props: TextAreaProps): React.JSX.Element;
+declare const TEXTAREA_INTERACTION_VARIANTS: ("hovered" | "focused")[];
+export interface BaseTextAreaProps extends TextAreaProps {
+    updateInteractionVariant?: UpdateInteractionVariant<typeof TEXTAREA_INTERACTION_VARIANTS>;
+}
+export declare function BaseTextArea(props: BaseTextAreaProps): React.JSX.Element;
 export declare function registerTextArea(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseTextArea>): void;
+export {};

package/dist/registerTextField.d.ts

@@ -2,12 +2,12 @@ import React, { ReactNode } from "react";
 import type { InputProps, TextFieldProps } from "react-aria-components";
 import { CodeComponentMetaOverrides, Registerable } from "./utils";
 interface BaseTextFieldProps extends TextFieldProps {
-    children?: ReactNode;
     label?: ReactNode;
     description?: ReactNode;
     enableAutoComplete?: boolean;
     multiline?: boolean;
     inputProps?: InputProps;
+    children: ReactNode;
 }
 export declare function BaseTextField(props: BaseTextFieldProps): React.JSX.Element;
 export declare function registerTextField(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseTextField>): void;

package/dist/utils.d.ts

@@ -1,7 +1,6 @@
 import type { CodeComponentMeta } from "@plasmicapp/host";
 import registerComponent from "@plasmicapp/host/registerComponent";
 import React from "react";
-export declare function ValueObserver({ value, onChange }: any): null;
 export type Registerable = {
     registerComponent: typeof registerComponent;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plasmicpkgs/react-aria",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "description": "Plasmic registration calls for react-aria based components",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -54,7 +54,7 @@
     "react-stately": "^3.31.0"
   },
   "devDependencies": {
-    "@plasmicapp/host": "1.0.196",
+    "@plasmicapp/host": "1.0.197",
     "@rollup/plugin-commonjs": "^11.0.0",
     "@rollup/plugin-json": "^4.0.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
@@ -74,5 +74,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0a72cc3da9c86429fbfffe9bb120633296800811"
+  "gitHead": "c459b57fafee3f91ab1e669194f019970c9b6647"
 }

package/skinny/contexts.d.ts

@@ -11,4 +11,4 @@ export declare const PlasmicItemContext: React.Context<(import("react-aria-compo
 }) | undefined>;
 export declare const PlasmicSectionContext: React.Context<import("./registerSection").BaseSectionProps | undefined>;
 export declare const PlasmicHeaderContext: React.Context<(React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>) | undefined>;
-export declare const PlasmicInputContext: React.Context<import("react-aria-components").InputProps | undefined>;
+export declare const PlasmicInputContext: React.Context<import("./registerInput").BaseInputProps | undefined>;

package/skinny/interaction-variant-utils-608d984b.esm.js

@@ -0,0 +1,39 @@
+import React from 'react';
+
+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.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
+  };
+}
+
+export { pickAriaComponentVariants as p };
+//# sourceMappingURL=interaction-variant-utils-608d984b.esm.js.map

package/skinny/interaction-variant-utils-608d984b.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interaction-variant-utils-608d984b.esm.js","sources":["../src/interaction-variant-utils.ts"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React from \"react\";\n\nconst ARIA_COMPONENTS_INTERACTION_VARIANTS = {\n  hovered: {\n    cssSelector: \"[data-hovered]\",\n    displayName: \"Hovered\",\n  },\n  pressed: {\n    cssSelector: \"[data-pressed]\",\n    displayName: \"Pressed\",\n  },\n  focused: {\n    cssSelector: \"[data-focused]\",\n    displayName: \"Focused\",\n  },\n  focusVisible: {\n    cssSelector: \"[data-focus-visible]\",\n    displayName: \"Focus Visible\",\n  },\n};\n\ntype AriaInteractionVariant = keyof typeof ARIA_COMPONENTS_INTERACTION_VARIANTS;\n\ntype CodeComponentInteractionVariantsMeta = NonNullable<\n  CodeComponentMeta<unknown>[\"interactionVariants\"]\n>;\n\ntype InteractionVariantMeta = CodeComponentInteractionVariantsMeta[string];\n\ntype ArrayElement<T> = T extends (infer U)[] ? U : never;\n\nexport type UpdateInteractionVariant<T extends AriaInteractionVariant[]> =\n  | ((changes: Partial<Record<ArrayElement<T>, boolean>>) => void)\n  | undefined;\n\ntype WithObservedValues<T extends AriaInteractionVariant[]> = (\n  children: React.ReactNode,\n  state: Record<ArrayElement<T>, boolean>,\n  updateInteractionVariant: UpdateInteractionVariant<T>\n) => React.ReactNode;\n\nfunction realWithObservedValues<T extends AriaInteractionVariant[]>(\n  children: React.ReactNode,\n  changes: Partial<Record<ArrayElement<T>, boolean>>,\n  updateInteractionVariant?: UpdateInteractionVariant<T>\n) {\n  React.useEffect(() => {\n    if (updateInteractionVariant) {\n      updateInteractionVariant(changes);\n    }\n  }, [changes, updateInteractionVariant]);\n  return children;\n}\n\nexport function pickAriaComponentVariants<T extends AriaInteractionVariant[]>(\n  keys: T\n): {\n  interactionVariants: Record<ArrayElement<T>, InteractionVariantMeta>;\n  withObservedValues: WithObservedValues<T>;\n} {\n  return {\n    interactionVariants: Object.fromEntries(\n      keys.map((key) => [key, ARIA_COMPONENTS_INTERACTION_VARIANTS[key]])\n    ) as Record<ArrayElement<T>, InteractionVariantMeta>,\n    withObservedValues: realWithObservedValues<T>,\n  };\n}\n"],"names":[],"mappings":";;AAGA,MAAM,oCAAuC,GAAA;AAAA,EAC3C,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,WAAa,EAAA,sBAAA;AAAA,IACb,WAAa,EAAA,eAAA;AAAA,GACf;AACF,CAAA,CAAA;AAsBA,SAAS,sBAAA,CACP,QACA,EAAA,OAAA,EACA,wBACA,EAAA;AACA,EAAA,KAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,wBAA0B,EAAA;AAC5B,MAAA,wBAAA,CAAyB,OAAO,CAAA,CAAA;AAAA,KAClC;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,wBAAwB,CAAC,CAAA,CAAA;AACtC,EAAO,OAAA,QAAA,CAAA;AACT,CAAA;AAEO,SAAS,0BACd,IAIA,EAAA;AACA,EAAO,OAAA;AAAA,IACL,qBAAqB,MAAO,CAAA,WAAA;AAAA,MAC1B,IAAA,CAAK,IAAI,CAAC,GAAA,KAAQ,CAAC,GAAK,EAAA,oCAAA,CAAqC,GAAG,CAAC,CAAC,CAAA;AAAA,KACpE;AAAA,IACA,kBAAoB,EAAA,sBAAA;AAAA,GACtB,CAAA;AACF;;;;"}

package/skinny/interaction-variant-utils-80bf1cfd.cjs.js

@@ -0,0 +1,45 @@
+'use strict';
+
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+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
+  };
+}
+
+exports.pickAriaComponentVariants = pickAriaComponentVariants;
+//# sourceMappingURL=interaction-variant-utils-80bf1cfd.cjs.js.map

package/skinny/interaction-variant-utils-80bf1cfd.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interaction-variant-utils-80bf1cfd.cjs.js","sources":["../src/interaction-variant-utils.ts"],"sourcesContent":["import { CodeComponentMeta } from \"@plasmicapp/host\";\nimport React from \"react\";\n\nconst ARIA_COMPONENTS_INTERACTION_VARIANTS = {\n  hovered: {\n    cssSelector: \"[data-hovered]\",\n    displayName: \"Hovered\",\n  },\n  pressed: {\n    cssSelector: \"[data-pressed]\",\n    displayName: \"Pressed\",\n  },\n  focused: {\n    cssSelector: \"[data-focused]\",\n    displayName: \"Focused\",\n  },\n  focusVisible: {\n    cssSelector: \"[data-focus-visible]\",\n    displayName: \"Focus Visible\",\n  },\n};\n\ntype AriaInteractionVariant = keyof typeof ARIA_COMPONENTS_INTERACTION_VARIANTS;\n\ntype CodeComponentInteractionVariantsMeta = NonNullable<\n  CodeComponentMeta<unknown>[\"interactionVariants\"]\n>;\n\ntype InteractionVariantMeta = CodeComponentInteractionVariantsMeta[string];\n\ntype ArrayElement<T> = T extends (infer U)[] ? U : never;\n\nexport type UpdateInteractionVariant<T extends AriaInteractionVariant[]> =\n  | ((changes: Partial<Record<ArrayElement<T>, boolean>>) => void)\n  | undefined;\n\ntype WithObservedValues<T extends AriaInteractionVariant[]> = (\n  children: React.ReactNode,\n  state: Record<ArrayElement<T>, boolean>,\n  updateInteractionVariant: UpdateInteractionVariant<T>\n) => React.ReactNode;\n\nfunction realWithObservedValues<T extends AriaInteractionVariant[]>(\n  children: React.ReactNode,\n  changes: Partial<Record<ArrayElement<T>, boolean>>,\n  updateInteractionVariant?: UpdateInteractionVariant<T>\n) {\n  React.useEffect(() => {\n    if (updateInteractionVariant) {\n      updateInteractionVariant(changes);\n    }\n  }, [changes, updateInteractionVariant]);\n  return children;\n}\n\nexport function pickAriaComponentVariants<T extends AriaInteractionVariant[]>(\n  keys: T\n): {\n  interactionVariants: Record<ArrayElement<T>, InteractionVariantMeta>;\n  withObservedValues: WithObservedValues<T>;\n} {\n  return {\n    interactionVariants: Object.fromEntries(\n      keys.map((key) => [key, ARIA_COMPONENTS_INTERACTION_VARIANTS[key]])\n    ) as Record<ArrayElement<T>, InteractionVariantMeta>,\n    withObservedValues: realWithObservedValues<T>,\n  };\n}\n"],"names":["React"],"mappings":";;;;;;;;AAGA,MAAM,oCAAuC,GAAA;AAAA,EAC3C,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,OAAS,EAAA;AAAA,IACP,WAAa,EAAA,gBAAA;AAAA,IACb,WAAa,EAAA,SAAA;AAAA,GACf;AAAA,EACA,YAAc,EAAA;AAAA,IACZ,WAAa,EAAA,sBAAA;AAAA,IACb,WAAa,EAAA,eAAA;AAAA,GACf;AACF,CAAA,CAAA;AAsBA,SAAS,sBAAA,CACP,QACA,EAAA,OAAA,EACA,wBACA,EAAA;AACA,EAAAA,sBAAA,CAAM,UAAU,MAAM;AACpB,IAAA,IAAI,wBAA0B,EAAA;AAC5B,MAAA,wBAAA,CAAyB,OAAO,CAAA,CAAA;AAAA,KAClC;AAAA,GACC,EAAA,CAAC,OAAS,EAAA,wBAAwB,CAAC,CAAA,CAAA;AACtC,EAAO,OAAA,QAAA,CAAA;AACT,CAAA;AAEO,SAAS,0BACd,IAIA,EAAA;AACA,EAAO,OAAA;AAAA,IACL,qBAAqB,MAAO,CAAA,WAAA;AAAA,MAC1B,IAAA,CAAK,IAAI,CAAC,GAAA,KAAQ,CAAC,GAAK,EAAA,oCAAA,CAAqC,GAAG,CAAC,CAAC,CAAA;AAAA,KACpE;AAAA,IACA,kBAAoB,EAAA,sBAAA;AAAA,GACtB,CAAA;AACF;;;;"}

package/skinny/interaction-variant-utils.d.ts

@@ -0,0 +1,31 @@
+import { CodeComponentMeta } from "@plasmicapp/host";
+import React from "react";
+declare const ARIA_COMPONENTS_INTERACTION_VARIANTS: {
+    hovered: {
+        cssSelector: string;
+        displayName: string;
+    };
+    pressed: {
+        cssSelector: string;
+        displayName: string;
+    };
+    focused: {
+        cssSelector: string;
+        displayName: string;
+    };
+    focusVisible: {
+        cssSelector: string;
+        displayName: string;
+    };
+};
+type AriaInteractionVariant = keyof typeof ARIA_COMPONENTS_INTERACTION_VARIANTS;
+type CodeComponentInteractionVariantsMeta = NonNullable<CodeComponentMeta<unknown>["interactionVariants"]>;
+type InteractionVariantMeta = CodeComponentInteractionVariantsMeta[string];
+type ArrayElement<T> = T extends (infer U)[] ? U : never;
+export type UpdateInteractionVariant<T extends AriaInteractionVariant[]> = ((changes: Partial<Record<ArrayElement<T>, boolean>>) => void) | undefined;
+type WithObservedValues<T extends AriaInteractionVariant[]> = (children: React.ReactNode, state: Record<ArrayElement<T>, boolean>, updateInteractionVariant: UpdateInteractionVariant<T>) => React.ReactNode;
+export declare function pickAriaComponentVariants<T extends AriaInteractionVariant[]>(keys: T): {
+    interactionVariants: Record<ArrayElement<T>, InteractionVariantMeta>;
+    withObservedValues: WithObservedValues<T>;
+};
+export {};

package/skinny/registerButton.cjs.js

@@ -3,7 +3,8 @@
 var React = require('react');
 var reactAriaComponents = require('react-aria-components');
 var common = require('./common-e74a9214.cjs.js');
-var utils = require('./utils-1190a0a9.cjs.js');
+var interactionVariantUtils = require('./interaction-variant-utils-80bf1cfd.cjs.js');
+var utils = require('./utils-18b2465b.cjs.js');
 require('@plasmicapp/host/registerComponent');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -41,16 +42,38 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+const BUTTON_INTERACTION_VARIANTS = [
+  "hovered",
+  "pressed",
+  "focused",
+  "focusVisible"
+];
+const { interactionVariants, withObservedValues } = interactionVariantUtils.pickAriaComponentVariants(
+  BUTTON_INTERACTION_VARIANTS
+);
 function BaseButton(props) {
-  const _a = props, { submitsForm, onFocusVisibleChange, resetsForm, children } = _a, rest = __objRest(_a, ["submitsForm", "onFocusVisibleChange", "resetsForm", "children"]);
+  const _a = props, {
+    submitsForm,
+    resetsForm,
+    children,
+    updateInteractionVariant
+  } = _a, rest = __objRest(_a, [
+    "submitsForm",
+    "resetsForm",
+    "children",
+    "updateInteractionVariant"
+  ]);
   const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
-  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Button, __spreadValues({ type }, rest), ({ isFocusVisible }) => /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
-    utils.ValueObserver,
+  return /* @__PURE__ */ React__default.default.createElement(reactAriaComponents.Button, __spreadValues({ type }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible }) => withObservedValues(
+    children,
     {
-      value: isFocusVisible,
-      onChange: onFocusVisibleChange
-    }
-  ), children));
+      hovered: isHovered,
+      pressed: isPressed,
+      focused: isFocused,
+      focusVisible: isFocusVisible
+    },
+    updateInteractionVariant
+  ));
 }
 function registerButton(loader, overrides) {
   utils.registerComponentHelper(
@@ -61,6 +84,7 @@ function registerButton(loader, overrides) {
       displayName: "Aria Button",
       importPath: "@plasmicpkgs/react-aria/skinny/registerButton",
       importName: "BaseButton",
+      interactionVariants,
       props: __spreadProps(__spreadValues({}, common.getCommonInputProps("button", [
         "isDisabled",
         "aria-label",
@@ -81,50 +105,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

package/skinny/registerButton.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerButton.cjs.js","sources":["../src/registerButton.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ButtonProps } from \"react-aria-components\";\nimport { Button } from \"react-aria-components\";\nimport { getCommonInputProps } from \"./common\";\nimport {\n  CodeComponentMetaOverrides,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n  ValueObserver,\n} from \"./utils\";\n\ninterface BaseButtonProps extends ButtonProps {\n  resetsForm?: boolean;\n  submitsForm?: boolean;\n  onFocusVisibleChange?: (isFocusVisible: boolean) => void;\n}\n\nexport function BaseButton(props: BaseButtonProps) {\n  const { submitsForm, onFocusVisibleChange, resetsForm, children, ...rest } =\n    props;\n  const type = submitsForm ? \"submit\" : resetsForm ? \"reset\" : \"button\";\n  return (\n    <Button type={type} {...rest}>\n      {({ isFocusVisible }) => (\n        <>\n          <ValueObserver\n            value={isFocusVisible}\n            onChange={onFocusVisibleChange}\n          />\n          {children}\n        </>\n      )}\n    </Button>\n  );\n}\n\nexport function registerButton(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseButton>\n) {\n  registerComponentHelper(\n    loader,\n    BaseButton,\n    {\n      name: makeComponentName(\"button\"),\n      displayName: \"Aria Button\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerButton\",\n      importName: \"BaseButton\",\n      props: {\n        ...getCommonInputProps<BaseButtonProps>(\"button\", [\n          \"isDisabled\",\n          \"aria-label\",\n          \"children\",\n        ]),\n        submitsForm: {\n          type: \"boolean\",\n          displayName: \"Submits form?\",\n          defaultValueHint: false,\n          hidden: (ps: BaseButtonProps) => Boolean(ps.resetsForm),\n          description:\n            \"Whether clicking this button should submit the enclosing form.\",\n          advanced: true,\n        },\n        resetsForm: {\n          type: \"boolean\",\n          displayName: \"Resets form?\",\n          defaultValueHint: false,\n          hidden: (ps: BaseButtonProps) => Boolean(ps.submitsForm),\n          description:\n            \"Whether clicking this button should reset the enclosing form.\",\n          advanced: true,\n        },\n        onPress: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"event\", type: \"object\" }],\n        },\n        onHoverChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isHovered\", type: \"boolean\" }],\n        },\n        onPressChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isPressed\", type: \"boolean\" }],\n        },\n        onFocusChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isFocused\", type: \"boolean\" }],\n        },\n        onFocusVisibleChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isFocusVisible\", type: \"boolean\" }],\n        },\n      },\n      states: {\n        isHovered: {\n          type: \"readonly\",\n          onChangeProp: \"onHoverChange\",\n          variableType: \"boolean\",\n        },\n        isPressed: {\n          type: \"readonly\",\n          onChangeProp: \"onPressChange\",\n          variableType: \"boolean\",\n        },\n        isFocused: {\n          type: \"readonly\",\n          onChangeProp: \"onFocusChange\",\n          variableType: \"boolean\",\n        },\n        isFocusVisible: {\n          type: \"readonly\",\n          onChangeProp: \"onFocusVisibleChange\",\n          variableType: \"boolean\",\n        },\n      },\n      trapsFocus: true,\n    },\n    overrides\n  );\n}\n"],"names":["React","Button","ValueObserver","registerComponentHelper","makeComponentName","getCommonInputProps"],"mappings":"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"}
+{"version":3,"file":"registerButton.cjs.js","sources":["../src/registerButton.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ButtonProps } from \"react-aria-components\";\nimport { Button } from \"react-aria-components\";\nimport { getCommonInputProps } from \"./common\";\nimport {\n  UpdateInteractionVariant,\n  pickAriaComponentVariants,\n} from \"./interaction-variant-utils\";\nimport {\n  CodeComponentMetaOverrides,\n  Registerable,\n  makeComponentName,\n  registerComponentHelper,\n} from \"./utils\";\n\nconst BUTTON_INTERACTION_VARIANTS = [\n  \"hovered\" as const,\n  \"pressed\" as const,\n  \"focused\" as const,\n  \"focusVisible\" as const,\n];\n\nconst { interactionVariants, withObservedValues } = pickAriaComponentVariants(\n  BUTTON_INTERACTION_VARIANTS\n);\n\ninterface BaseButtonProps extends ButtonProps {\n  children: React.ReactNode;\n  resetsForm?: boolean;\n  submitsForm?: boolean;\n  // Optional callback to update the interaction variant state\n  // as it's only provided if the component is the root of a Studio component\n  updateInteractionVariant?: UpdateInteractionVariant<\n    typeof BUTTON_INTERACTION_VARIANTS\n  >;\n}\n\nexport function BaseButton(props: BaseButtonProps) {\n  const {\n    submitsForm,\n    resetsForm,\n    children,\n    updateInteractionVariant,\n    ...rest\n  } = props;\n\n  const type = submitsForm ? \"submit\" : resetsForm ? \"reset\" : \"button\";\n\n  return (\n    <Button type={type} {...rest}>\n      {({ isHovered, isPressed, isFocused, isFocusVisible }) =>\n        withObservedValues(\n          children,\n          {\n            hovered: isHovered,\n            pressed: isPressed,\n            focused: isFocused,\n            focusVisible: isFocusVisible,\n          },\n          updateInteractionVariant\n        )\n      }\n    </Button>\n  );\n}\n\nexport function registerButton(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseButton>\n) {\n  registerComponentHelper(\n    loader,\n    BaseButton,\n    {\n      name: makeComponentName(\"button\"),\n      displayName: \"Aria Button\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerButton\",\n      importName: \"BaseButton\",\n      interactionVariants,\n      props: {\n        ...getCommonInputProps<BaseButtonProps>(\"button\", [\n          \"isDisabled\",\n          \"aria-label\",\n          \"children\",\n        ]),\n        submitsForm: {\n          type: \"boolean\",\n          displayName: \"Submits form?\",\n          defaultValueHint: false,\n          hidden: (ps: BaseButtonProps) => Boolean(ps.resetsForm),\n          description:\n            \"Whether clicking this button should submit the enclosing form.\",\n          advanced: true,\n        },\n        resetsForm: {\n          type: \"boolean\",\n          displayName: \"Resets form?\",\n          defaultValueHint: false,\n          hidden: (ps: BaseButtonProps) => Boolean(ps.submitsForm),\n          description:\n            \"Whether clicking this button should reset the enclosing form.\",\n          advanced: true,\n        },\n      },\n      trapsFocus: true,\n    },\n    overrides\n  );\n}\n"],"names":["pickAriaComponentVariants","React","Button","registerComponentHelper","makeComponentName","getCommonInputProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,2BAA8B,GAAA;AAAA,EAClC,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AACF,CAAA,CAAA;AAEA,MAAM,EAAE,mBAAqB,EAAA,kBAAA,EAAuB,GAAAA,iDAAA;AAAA,EAClD,2BAAA;AACF,CAAA,CAAA;AAaO,SAAS,WAAW,KAAwB,EAAA;AACjD,EAAA,MAMI,EALF,GAAA,KAAA,EAAA;AAAA,IAAA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,wBAAA;AAAA,GA1CJ,GA4CM,EADC,EAAA,IAAA,GAAA,SAAA,CACD,EADC,EAAA;AAAA,IAJH,aAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,0BAAA;AAAA,GAAA,CAAA,CAAA;AAIF,EAAA,MAAM,IAAO,GAAA,WAAA,GAAc,QAAW,GAAA,UAAA,GAAa,OAAU,GAAA,QAAA,CAAA;AAE7D,EACE,uBAAAC,sBAAA,CAAA,aAAA,CAACC,0BAAO,EAAA,cAAA,CAAA,EAAA,IAAA,EAAA,EAAgB,IACrB,CAAA,EAAA,CAAC,EAAE,SAAW,EAAA,SAAA,EAAW,SAAW,EAAA,cAAA,EACnC,KAAA,kBAAA;AAAA,IACE,QAAA;AAAA,IACA;AAAA,MACE,OAAS,EAAA,SAAA;AAAA,MACT,OAAS,EAAA,SAAA;AAAA,MACT,OAAS,EAAA,SAAA;AAAA,MACT,YAAc,EAAA,cAAA;AAAA,KAChB;AAAA,IACA,wBAAA;AAAA,GAGN,CAAA,CAAA;AAEJ,CAAA;AAEgB,SAAA,cAAA,CACd,QACA,SACA,EAAA;AACA,EAAAC,6BAAA;AAAA,IACE,MAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,MACE,IAAA,EAAMC,wBAAkB,QAAQ,CAAA;AAAA,MAChC,WAAa,EAAA,aAAA;AAAA,MACb,UAAY,EAAA,+CAAA;AAAA,MACZ,UAAY,EAAA,YAAA;AAAA,MACZ,mBAAA;AAAA,MACA,KAAA,EAAO,aACF,CAAA,cAAA,CAAA,EAAA,EAAAC,0BAAA,CAAqC,QAAU,EAAA;AAAA,QAChD,YAAA;AAAA,QACA,YAAA;AAAA,QACA,UAAA;AAAA,OACD,CALI,CAAA,EAAA;AAAA,QAML,WAAa,EAAA;AAAA,UACX,IAAM,EAAA,SAAA;AAAA,UACN,WAAa,EAAA,eAAA;AAAA,UACb,gBAAkB,EAAA,KAAA;AAAA,UAClB,MAAQ,EAAA,CAAC,EAAwB,KAAA,OAAA,CAAQ,GAAG,UAAU,CAAA;AAAA,UACtD,WACE,EAAA,gEAAA;AAAA,UACF,QAAU,EAAA,IAAA;AAAA,SACZ;AAAA,QACA,UAAY,EAAA;AAAA,UACV,IAAM,EAAA,SAAA;AAAA,UACN,WAAa,EAAA,cAAA;AAAA,UACb,gBAAkB,EAAA,KAAA;AAAA,UAClB,MAAQ,EAAA,CAAC,EAAwB,KAAA,OAAA,CAAQ,GAAG,WAAW,CAAA;AAAA,UACvD,WACE,EAAA,+DAAA;AAAA,UACF,QAAU,EAAA,IAAA;AAAA,SACZ;AAAA,OACF,CAAA;AAAA,MACA,UAAY,EAAA,IAAA;AAAA,KACd;AAAA,IACA,SAAA;AAAA,GACF,CAAA;AACF;;;;;"}

package/skinny/registerButton.d.ts

@@ -1,10 +1,13 @@
 import React from "react";
 import type { ButtonProps } from "react-aria-components";
+import { UpdateInteractionVariant } from "./interaction-variant-utils";
 import { CodeComponentMetaOverrides, Registerable } from "./utils";
+declare const BUTTON_INTERACTION_VARIANTS: ("hovered" | "pressed" | "focused" | "focusVisible")[];
 interface BaseButtonProps extends ButtonProps {
+    children: React.ReactNode;
     resetsForm?: boolean;
     submitsForm?: boolean;
-    onFocusVisibleChange?: (isFocusVisible: boolean) => void;
+    updateInteractionVariant?: UpdateInteractionVariant<typeof BUTTON_INTERACTION_VARIANTS>;
 }
 export declare function BaseButton(props: BaseButtonProps): React.JSX.Element;
 export declare function registerButton(loader?: Registerable, overrides?: CodeComponentMetaOverrides<typeof BaseButton>): void;

package/skinny/registerButton.esm.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Button } from 'react-aria-components';
 import { g as getCommonInputProps } from './common-52c26d37.esm.js';
-import { V as ValueObserver, r as registerComponentHelper, m as makeComponentName } from './utils-28f98072.esm.js';
+import { p as pickAriaComponentVariants } from './interaction-variant-utils-608d984b.esm.js';
+import { r as registerComponentHelper, m as makeComponentName } from './utils-cf2632c9.esm.js';
 import '@plasmicapp/host/registerComponent';
 
 var __defProp = Object.defineProperty;
@@ -35,16 +36,38 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+const BUTTON_INTERACTION_VARIANTS = [
+  "hovered",
+  "pressed",
+  "focused",
+  "focusVisible"
+];
+const { interactionVariants, withObservedValues } = pickAriaComponentVariants(
+  BUTTON_INTERACTION_VARIANTS
+);
 function BaseButton(props) {
-  const _a = props, { submitsForm, onFocusVisibleChange, resetsForm, children } = _a, rest = __objRest(_a, ["submitsForm", "onFocusVisibleChange", "resetsForm", "children"]);
+  const _a = props, {
+    submitsForm,
+    resetsForm,
+    children,
+    updateInteractionVariant
+  } = _a, rest = __objRest(_a, [
+    "submitsForm",
+    "resetsForm",
+    "children",
+    "updateInteractionVariant"
+  ]);
   const type = submitsForm ? "submit" : resetsForm ? "reset" : "button";
-  return /* @__PURE__ */ React.createElement(Button, __spreadValues({ type }, rest), ({ isFocusVisible }) => /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    ValueObserver,
+  return /* @__PURE__ */ React.createElement(Button, __spreadValues({ type }, rest), ({ isHovered, isPressed, isFocused, isFocusVisible }) => withObservedValues(
+    children,
     {
-      value: isFocusVisible,
-      onChange: onFocusVisibleChange
-    }
-  ), children));
+      hovered: isHovered,
+      pressed: isPressed,
+      focused: isFocused,
+      focusVisible: isFocusVisible
+    },
+    updateInteractionVariant
+  ));
 }
 function registerButton(loader, overrides) {
   registerComponentHelper(
@@ -55,6 +78,7 @@ function registerButton(loader, overrides) {
       displayName: "Aria Button",
       importPath: "@plasmicpkgs/react-aria/skinny/registerButton",
       importName: "BaseButton",
+      interactionVariants,
       props: __spreadProps(__spreadValues({}, getCommonInputProps("button", [
         "isDisabled",
         "aria-label",
@@ -75,50 +99,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

package/skinny/registerButton.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"registerButton.esm.js","sources":["../src/registerButton.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ButtonProps } from \"react-aria-components\";\nimport { Button } from \"react-aria-components\";\nimport { getCommonInputProps } from \"./common\";\nimport {\n  CodeComponentMetaOverrides,\n  makeComponentName,\n  Registerable,\n  registerComponentHelper,\n  ValueObserver,\n} from \"./utils\";\n\ninterface BaseButtonProps extends ButtonProps {\n  resetsForm?: boolean;\n  submitsForm?: boolean;\n  onFocusVisibleChange?: (isFocusVisible: boolean) => void;\n}\n\nexport function BaseButton(props: BaseButtonProps) {\n  const { submitsForm, onFocusVisibleChange, resetsForm, children, ...rest } =\n    props;\n  const type = submitsForm ? \"submit\" : resetsForm ? \"reset\" : \"button\";\n  return (\n    <Button type={type} {...rest}>\n      {({ isFocusVisible }) => (\n        <>\n          <ValueObserver\n            value={isFocusVisible}\n            onChange={onFocusVisibleChange}\n          />\n          {children}\n        </>\n      )}\n    </Button>\n  );\n}\n\nexport function registerButton(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseButton>\n) {\n  registerComponentHelper(\n    loader,\n    BaseButton,\n    {\n      name: makeComponentName(\"button\"),\n      displayName: \"Aria Button\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerButton\",\n      importName: \"BaseButton\",\n      props: {\n        ...getCommonInputProps<BaseButtonProps>(\"button\", [\n          \"isDisabled\",\n          \"aria-label\",\n          \"children\",\n        ]),\n        submitsForm: {\n          type: \"boolean\",\n          displayName: \"Submits form?\",\n          defaultValueHint: false,\n          hidden: (ps: BaseButtonProps) => Boolean(ps.resetsForm),\n          description:\n            \"Whether clicking this button should submit the enclosing form.\",\n          advanced: true,\n        },\n        resetsForm: {\n          type: \"boolean\",\n          displayName: \"Resets form?\",\n          defaultValueHint: false,\n          hidden: (ps: BaseButtonProps) => Boolean(ps.submitsForm),\n          description:\n            \"Whether clicking this button should reset the enclosing form.\",\n          advanced: true,\n        },\n        onPress: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"event\", type: \"object\" }],\n        },\n        onHoverChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isHovered\", type: \"boolean\" }],\n        },\n        onPressChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isPressed\", type: \"boolean\" }],\n        },\n        onFocusChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isFocused\", type: \"boolean\" }],\n        },\n        onFocusVisibleChange: {\n          type: \"eventHandler\",\n          argTypes: [{ name: \"isFocusVisible\", type: \"boolean\" }],\n        },\n      },\n      states: {\n        isHovered: {\n          type: \"readonly\",\n          onChangeProp: \"onHoverChange\",\n          variableType: \"boolean\",\n        },\n        isPressed: {\n          type: \"readonly\",\n          onChangeProp: \"onPressChange\",\n          variableType: \"boolean\",\n        },\n        isFocused: {\n          type: \"readonly\",\n          onChangeProp: \"onFocusChange\",\n          variableType: \"boolean\",\n        },\n        isFocusVisible: {\n          type: \"readonly\",\n          onChangeProp: \"onFocusVisibleChange\",\n          variableType: \"boolean\",\n        },\n      },\n      trapsFocus: true,\n    },\n    overrides\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBO,SAAS,WAAW,KAAwB,EAAA;AACjD,EAAA,MACE,EADM,GAAA,KAAA,EAAA,EAAA,WAAA,EAAa,oBAAsB,EAAA,UAAA,EAAY,QAnBzD,EAAA,GAoBI,EADkE,EAAA,IAAA,GAAA,SAAA,CAClE,EADkE,EAAA,CAA5D,aAAa,EAAA,sBAAA,EAAsB,YAAY,EAAA,UAAA,CAAA,CAAA,CAAA;AAEvD,EAAA,MAAM,IAAO,GAAA,WAAA,GAAc,QAAW,GAAA,UAAA,GAAa,OAAU,GAAA,QAAA,CAAA;AAC7D,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,yBAAO,IAAgB,EAAA,EAAA,IAAA,CAAA,EACrB,CAAC,EAAE,cAAA,uBAEA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,cAAA;AAAA,MACP,QAAU,EAAA,oBAAA;AAAA,KAAA;AAAA,GACZ,EACC,QACH,CAEJ,CAAA,CAAA;AAEJ,CAAA;AAEgB,SAAA,cAAA,CACd,QACA,SACA,EAAA;AACA,EAAA,uBAAA;AAAA,IACE,MAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,MACE,IAAA,EAAM,kBAAkB,QAAQ,CAAA;AAAA,MAChC,WAAa,EAAA,aAAA;AAAA,MACb,UAAY,EAAA,+CAAA;AAAA,MACZ,UAAY,EAAA,YAAA;AAAA,MACZ,KAAA,EAAO,aACF,CAAA,cAAA,CAAA,EAAA,EAAA,mBAAA,CAAqC,QAAU,EAAA;AAAA,QAChD,YAAA;AAAA,QACA,YAAA;AAAA,QACA,UAAA;AAAA,OACD,CALI,CAAA,EAAA;AAAA,QAML,WAAa,EAAA;AAAA,UACX,IAAM,EAAA,SAAA;AAAA,UACN,WAAa,EAAA,eAAA;AAAA,UACb,gBAAkB,EAAA,KAAA;AAAA,UAClB,MAAQ,EAAA,CAAC,EAAwB,KAAA,OAAA,CAAQ,GAAG,UAAU,CAAA;AAAA,UACtD,WACE,EAAA,gEAAA;AAAA,UACF,QAAU,EAAA,IAAA;AAAA,SACZ;AAAA,QACA,UAAY,EAAA;AAAA,UACV,IAAM,EAAA,SAAA;AAAA,UACN,WAAa,EAAA,cAAA;AAAA,UACb,gBAAkB,EAAA,KAAA;AAAA,UAClB,MAAQ,EAAA,CAAC,EAAwB,KAAA,OAAA,CAAQ,GAAG,WAAW,CAAA;AAAA,UACvD,WACE,EAAA,+DAAA;AAAA,UACF,QAAU,EAAA,IAAA;AAAA,SACZ;AAAA,QACA,OAAS,EAAA;AAAA,UACP,IAAM,EAAA,cAAA;AAAA,UACN,UAAU,CAAC,EAAE,MAAM,OAAS,EAAA,IAAA,EAAM,UAAU,CAAA;AAAA,SAC9C;AAAA,QACA,aAAe,EAAA;AAAA,UACb,IAAM,EAAA,cAAA;AAAA,UACN,UAAU,CAAC,EAAE,MAAM,WAAa,EAAA,IAAA,EAAM,WAAW,CAAA;AAAA,SACnD;AAAA,QACA,aAAe,EAAA;AAAA,UACb,IAAM,EAAA,cAAA;AAAA,UACN,UAAU,CAAC,EAAE,MAAM,WAAa,EAAA,IAAA,EAAM,WAAW,CAAA;AAAA,SACnD;AAAA,QACA,aAAe,EAAA;AAAA,UACb,IAAM,EAAA,cAAA;AAAA,UACN,UAAU,CAAC,EAAE,MAAM,WAAa,EAAA,IAAA,EAAM,WAAW,CAAA;AAAA,SACnD;AAAA,QACA,oBAAsB,EAAA;AAAA,UACpB,IAAM,EAAA,cAAA;AAAA,UACN,UAAU,CAAC,EAAE,MAAM,gBAAkB,EAAA,IAAA,EAAM,WAAW,CAAA;AAAA,SACxD;AAAA,OACF,CAAA;AAAA,MACA,MAAQ,EAAA;AAAA,QACN,SAAW,EAAA;AAAA,UACT,IAAM,EAAA,UAAA;AAAA,UACN,YAAc,EAAA,eAAA;AAAA,UACd,YAAc,EAAA,SAAA;AAAA,SAChB;AAAA,QACA,SAAW,EAAA;AAAA,UACT,IAAM,EAAA,UAAA;AAAA,UACN,YAAc,EAAA,eAAA;AAAA,UACd,YAAc,EAAA,SAAA;AAAA,SAChB;AAAA,QACA,SAAW,EAAA;AAAA,UACT,IAAM,EAAA,UAAA;AAAA,UACN,YAAc,EAAA,eAAA;AAAA,UACd,YAAc,EAAA,SAAA;AAAA,SAChB;AAAA,QACA,cAAgB,EAAA;AAAA,UACd,IAAM,EAAA,UAAA;AAAA,UACN,YAAc,EAAA,sBAAA;AAAA,UACd,YAAc,EAAA,SAAA;AAAA,SAChB;AAAA,OACF;AAAA,MACA,UAAY,EAAA,IAAA;AAAA,KACd;AAAA,IACA,SAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"registerButton.esm.js","sources":["../src/registerButton.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ButtonProps } from \"react-aria-components\";\nimport { Button } from \"react-aria-components\";\nimport { getCommonInputProps } from \"./common\";\nimport {\n  UpdateInteractionVariant,\n  pickAriaComponentVariants,\n} from \"./interaction-variant-utils\";\nimport {\n  CodeComponentMetaOverrides,\n  Registerable,\n  makeComponentName,\n  registerComponentHelper,\n} from \"./utils\";\n\nconst BUTTON_INTERACTION_VARIANTS = [\n  \"hovered\" as const,\n  \"pressed\" as const,\n  \"focused\" as const,\n  \"focusVisible\" as const,\n];\n\nconst { interactionVariants, withObservedValues } = pickAriaComponentVariants(\n  BUTTON_INTERACTION_VARIANTS\n);\n\ninterface BaseButtonProps extends ButtonProps {\n  children: React.ReactNode;\n  resetsForm?: boolean;\n  submitsForm?: boolean;\n  // Optional callback to update the interaction variant state\n  // as it's only provided if the component is the root of a Studio component\n  updateInteractionVariant?: UpdateInteractionVariant<\n    typeof BUTTON_INTERACTION_VARIANTS\n  >;\n}\n\nexport function BaseButton(props: BaseButtonProps) {\n  const {\n    submitsForm,\n    resetsForm,\n    children,\n    updateInteractionVariant,\n    ...rest\n  } = props;\n\n  const type = submitsForm ? \"submit\" : resetsForm ? \"reset\" : \"button\";\n\n  return (\n    <Button type={type} {...rest}>\n      {({ isHovered, isPressed, isFocused, isFocusVisible }) =>\n        withObservedValues(\n          children,\n          {\n            hovered: isHovered,\n            pressed: isPressed,\n            focused: isFocused,\n            focusVisible: isFocusVisible,\n          },\n          updateInteractionVariant\n        )\n      }\n    </Button>\n  );\n}\n\nexport function registerButton(\n  loader?: Registerable,\n  overrides?: CodeComponentMetaOverrides<typeof BaseButton>\n) {\n  registerComponentHelper(\n    loader,\n    BaseButton,\n    {\n      name: makeComponentName(\"button\"),\n      displayName: \"Aria Button\",\n      importPath: \"@plasmicpkgs/react-aria/skinny/registerButton\",\n      importName: \"BaseButton\",\n      interactionVariants,\n      props: {\n        ...getCommonInputProps<BaseButtonProps>(\"button\", [\n          \"isDisabled\",\n          \"aria-label\",\n          \"children\",\n        ]),\n        submitsForm: {\n          type: \"boolean\",\n          displayName: \"Submits form?\",\n          defaultValueHint: false,\n          hidden: (ps: BaseButtonProps) => Boolean(ps.resetsForm),\n          description:\n            \"Whether clicking this button should submit the enclosing form.\",\n          advanced: true,\n        },\n        resetsForm: {\n          type: \"boolean\",\n          displayName: \"Resets form?\",\n          defaultValueHint: false,\n          hidden: (ps: BaseButtonProps) => Boolean(ps.submitsForm),\n          description:\n            \"Whether clicking this button should reset the enclosing form.\",\n          advanced: true,\n        },\n      },\n      trapsFocus: true,\n    },\n    overrides\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeA,MAAM,2BAA8B,GAAA;AAAA,EAClC,SAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AACF,CAAA,CAAA;AAEA,MAAM,EAAE,mBAAqB,EAAA,kBAAA,EAAuB,GAAA,yBAAA;AAAA,EAClD,2BAAA;AACF,CAAA,CAAA;AAaO,SAAS,WAAW,KAAwB,EAAA;AACjD,EAAA,MAMI,EALF,GAAA,KAAA,EAAA;AAAA,IAAA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,wBAAA;AAAA,GA1CJ,GA4CM,EADC,EAAA,IAAA,GAAA,SAAA,CACD,EADC,EAAA;AAAA,IAJH,aAAA;AAAA,IACA,YAAA;AAAA,IACA,UAAA;AAAA,IACA,0BAAA;AAAA,GAAA,CAAA,CAAA;AAIF,EAAA,MAAM,IAAO,GAAA,WAAA,GAAc,QAAW,GAAA,UAAA,GAAa,OAAU,GAAA,QAAA,CAAA;AAE7D,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,MAAO,EAAA,cAAA,CAAA,EAAA,IAAA,EAAA,EAAgB,IACrB,CAAA,EAAA,CAAC,EAAE,SAAW,EAAA,SAAA,EAAW,SAAW,EAAA,cAAA,EACnC,KAAA,kBAAA;AAAA,IACE,QAAA;AAAA,IACA;AAAA,MACE,OAAS,EAAA,SAAA;AAAA,MACT,OAAS,EAAA,SAAA;AAAA,MACT,OAAS,EAAA,SAAA;AAAA,MACT,YAAc,EAAA,cAAA;AAAA,KAChB;AAAA,IACA,wBAAA;AAAA,GAGN,CAAA,CAAA;AAEJ,CAAA;AAEgB,SAAA,cAAA,CACd,QACA,SACA,EAAA;AACA,EAAA,uBAAA;AAAA,IACE,MAAA;AAAA,IACA,UAAA;AAAA,IACA;AAAA,MACE,IAAA,EAAM,kBAAkB,QAAQ,CAAA;AAAA,MAChC,WAAa,EAAA,aAAA;AAAA,MACb,UAAY,EAAA,+CAAA;AAAA,MACZ,UAAY,EAAA,YAAA;AAAA,MACZ,mBAAA;AAAA,MACA,KAAA,EAAO,aACF,CAAA,cAAA,CAAA,EAAA,EAAA,mBAAA,CAAqC,QAAU,EAAA;AAAA,QAChD,YAAA;AAAA,QACA,YAAA;AAAA,QACA,UAAA;AAAA,OACD,CALI,CAAA,EAAA;AAAA,QAML,WAAa,EAAA;AAAA,UACX,IAAM,EAAA,SAAA;AAAA,UACN,WAAa,EAAA,eAAA;AAAA,UACb,gBAAkB,EAAA,KAAA;AAAA,UAClB,MAAQ,EAAA,CAAC,EAAwB,KAAA,OAAA,CAAQ,GAAG,UAAU,CAAA;AAAA,UACtD,WACE,EAAA,gEAAA;AAAA,UACF,QAAU,EAAA,IAAA;AAAA,SACZ;AAAA,QACA,UAAY,EAAA;AAAA,UACV,IAAM,EAAA,SAAA;AAAA,UACN,WAAa,EAAA,cAAA;AAAA,UACb,gBAAkB,EAAA,KAAA;AAAA,UAClB,MAAQ,EAAA,CAAC,EAAwB,KAAA,OAAA,CAAQ,GAAG,WAAW,CAAA;AAAA,UACvD,WACE,EAAA,+DAAA;AAAA,UACF,QAAU,EAAA,IAAA;AAAA,SACZ;AAAA,OACF,CAAA;AAAA,MACA,UAAY,EAAA,IAAA;AAAA,KACd;AAAA,IACA,SAAA;AAAA,GACF,CAAA;AACF;;;;"}