@multiplatform.one/forms 6.0.0

package/dist/cjs/fields/RadioGroup/RadioGroup.stories.native.js

@@ -0,0 +1,377 @@
+"use strict";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var RadioGroup_stories_exports = {};
+__export(RadioGroup_stories_exports, {
+  Basic: () => Basic,
+  Comparison: () => Comparison,
+  Disabled: () => Disabled,
+  Horizontal: () => Horizontal,
+  Interactive: () => Interactive,
+  Main: () => Main,
+  Pointy: () => Pointy,
+  Sizes: () => Sizes,
+  Standalone: () => Standalone,
+  WithChildren: () => WithChildren,
+  WithError: () => WithError,
+  default: () => RadioGroup_stories_default
+});
+module.exports = __toCommonJS(RadioGroup_stories_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_storybook = require("@multiplatform.one/storybook");
+var import_react_form = require("@tanstack/react-form");
+var import_react = require("react");
+var import_tamagui = require("tamagui");
+var import_Button = require("../../Button/index.native.js");
+var import_Form = require("../../Form/index.native.js");
+var import_index = require("./index.native.js");
+var meta = {
+  title: "Forms/RadioGroup",
+  component: import_index.RadioGroup,
+  parameters: {
+    docs: {
+      description: {
+        component: "A radio group component with form integration for single selection."
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control: "text",
+      description: "Label for the radio group"
+    },
+    helperText: {
+      control: "text",
+      description: "Helper text displayed below the radio group"
+    },
+    error: {
+      control: "text",
+      description: "Error message to display"
+    },
+    required: {
+      control: "boolean",
+      description: "Whether the radio group is required"
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the radio group is disabled"
+    },
+    size: {
+      control: "select",
+      options: ["$2", "$3", "$4"],
+      description: "Size of the radio group"
+    },
+    value: {
+      control: "text",
+      description: "The selected value"
+    },
+    orientation: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+      description: "Layout orientation of the radio group"
+    }
+  }
+};
+var RadioGroup_stories_default = meta;
+var sampleOptions = [{
+  value: "option1",
+  label: "Option 1"
+}, {
+  value: "option2",
+  label: "Option 2"
+}, {
+  value: "option3",
+  label: "Option 3"
+}];
+var Main = {
+  name: "Main",
+  render: function render() {
+    var FormExample = function FormExample2() {
+      var form = (0, import_react_form.useForm)({
+        defaultValues: {
+          role: "",
+          notifications: "enabled",
+          theme: ""
+        },
+        onSubmit: async function onSubmit(param) {
+          var {
+            value
+          } = param;
+          (0, import_storybook.action)("onSubmit")(value);
+        }
+      });
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Form.Form, {
+        form,
+        className: "max-w-md",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$4",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.RadioGroup, {
+            label: "User Role",
+            name: "role",
+            helperText: "Select your role in the system",
+            required: true,
+            options: [{
+              value: "admin",
+              label: "Admin"
+            }, {
+              value: "user",
+              label: "User"
+            }, {
+              value: "guest",
+              label: "Guest"
+            }]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.RadioGroup, {
+            label: "Email Notifications",
+            name: "notifications",
+            helperText: "Choose how you want to receive notifications",
+            options: [{
+              value: "enabled",
+              label: "Enabled"
+            }, {
+              value: "disabled",
+              label: "Disabled"
+            }]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.RadioGroup, {
+            label: "Theme Preference",
+            name: "theme",
+            helperText: "Select your preferred theme",
+            orientation: "horizontal",
+            options: [{
+              value: "light",
+              label: "Light"
+            }, {
+              value: "dark",
+              label: "Dark"
+            }, {
+              value: "auto",
+              label: "Auto"
+            }]
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            action: "submit",
+            children: "Save Preferences"
+          })]
+        })
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(FormExample, {});
+  }
+};
+var Standalone = {
+  args: {
+    label: "Favorite color",
+    helperText: "Pick one",
+    options: sampleOptions
+  },
+  render: function render2(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.RadioGroup, {
+      ...args
+    });
+  }
+};
+var Basic = {
+  args: {
+    label: "Choose an option",
+    helperText: "Select one option from the list",
+    name: "basic",
+    value: "option1",
+    options: sampleOptions,
+    onValueChange: (0, import_storybook.action)("onValueChange")
+  }
+};
+var Horizontal = {
+  args: {
+    label: "Horizontal Layout",
+    helperText: "Options arranged horizontally",
+    name: "horizontal",
+    orientation: "horizontal",
+    options: sampleOptions
+  }
+};
+var WithChildren = {
+  args: {
+    label: "Custom children",
+    helperText: "Using children instead of options prop",
+    name: "custom"
+  },
+  render: function render3(args) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.RadioGroup, {
+      ...args,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        gap: "$2",
+        children: sampleOptions.map(function (option) {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+            gap: "$2",
+            alignItems: "center",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.RadioGroup.Item, {
+              value: option.value,
+              id: option.value,
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.RadioGroup.Indicator, {})
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+              htmlFor: option.value,
+              children: option.label
+            })]
+          }, option.value);
+        })
+      })
+    });
+  }
+};
+var Pointy = {
+  render: function render4() {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$4",
+      maxWidth: 400,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.RadioGroup, {
+        label: "Pointy (hard angles)",
+        pointy: true,
+        options: sampleOptions,
+        defaultValue: "option1"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.RadioGroup, {
+        label: "Regular (default)",
+        pointy: false,
+        options: sampleOptions,
+        defaultValue: "option1"
+      })]
+    });
+  }
+};
+var Disabled = {
+  args: {
+    label: "Disabled Radio Group",
+    disabled: true,
+    options: sampleOptions,
+    value: "option1"
+  }
+};
+var WithError = {
+  args: {
+    label: "Radio Group with Error",
+    error: "This field is required",
+    required: true,
+    options: sampleOptions
+  }
+};
+var Sizes = {
+  render: function render5() {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      gap: "$4",
+      maxWidth: 400,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.RadioGroup, {
+        label: "Small",
+        size: "$2",
+        options: sampleOptions
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.RadioGroup, {
+        label: "Medium (default)",
+        size: "$3",
+        options: sampleOptions
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.RadioGroup, {
+        label: "Large",
+        size: "$4",
+        options: sampleOptions
+      })]
+    });
+  }
+};
+var Interactive = {
+  render: function render6() {
+    var InteractiveExample = function InteractiveExample2() {
+      var [value, setValue] = (0, import_react.useState)("");
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        gap: "$4",
+        maxWidth: 400,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.RadioGroup, {
+          label: "Select an option",
+          options: sampleOptions,
+          value,
+          onValueChange: setValue
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Text, {
+          children: ["Selected: ", value || "None"]
+        })]
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(InteractiveExample, {});
+  }
+};
+var Comparison = {
+  render: function render7() {
+    var ComparisonExample = function ComparisonExample2() {
+      var [customVal, setCustomVal] = (0, import_react.useState)("option1");
+      var [tamaguiVal, setTamaguiVal] = (0, import_react.useState)("option1");
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        gap: "$6",
+        alignItems: "flex-start",
+        padding: "$4",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$3",
+          width: 250,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Custom RadioGroup"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.RadioGroup, {
+            options: sampleOptions,
+            value: customVal,
+            onValueChange: function onValueChange(val) {
+              setCustomVal(val);
+              (0, import_storybook.action)("custom.onValueChange")(val);
+            }
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          gap: "$3",
+          width: 250,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Paragraph, {
+            size: "$2",
+            color: "$placeholderColor",
+            children: "Tamagui RadioGroup"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.RadioGroup, {
+            value: tamaguiVal,
+            onValueChange: function onValueChange(val) {
+              setTamaguiVal(val);
+              (0, import_storybook.action)("tamagui.onValueChange")(val);
+            },
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+              gap: "$2",
+              children: sampleOptions.map(function (option) {
+                return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+                  gap: "$2",
+                  alignItems: "center",
+                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.RadioGroup.Item, {
+                    value: option.value,
+                    id: `t-${option.value}`,
+                    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.RadioGroup.Indicator, {})
+                  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+                    htmlFor: `t-${option.value}`,
+                    children: option.label
+                  })]
+                }, option.value);
+              })
+            })
+          })]
+        })]
+      });
+    };
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(ComparisonExample, {});
+  }
+};
+//# sourceMappingURL=RadioGroup.stories.native.js.map

package/dist/cjs/fields/RadioGroup/RadioGroup.stories.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","RadioGroup_stories_exports","__export","Basic","Comparison","Disabled","Horizontal","Interactive","Main","Pointy","Sizes","Standalone","WithChildren","WithError","default","RadioGroup_stories_default","module","exports","import_jsx_runtime","require","import_storybook","import_react_form","import_react","import_tamagui","import_Button","import_Form","import_index","meta","title","component","RadioGroup","parameters","docs","description","argTypes","label","control","helperText","error","required","disabled","size","options","orientation","sampleOptions","name","render","FormExample","FormExample2","form","useForm","defaultValues","role","notifications","theme","onSubmit","param","action","jsx","Form","className","children","jsxs","YStack","gap","Button","args","render2","onValueChange","render3","map","option","XStack","alignItems","Item","id","Indicator","Label","htmlFor","render4","maxWidth","pointy","defaultValue","render5"],"sources":["../../../../src/fields/RadioGroup/RadioGroup.stories.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/fields/RadioGroup/index.cjs

@@ -0,0 +1,301 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var RadioGroup_exports = {};
+__export(RadioGroup_exports, {
+  RadioGroup: () => RadioGroup
+});
+module.exports = __toCommonJS(RadioGroup_exports);
+var import_tamagui = require("tamagui");
+var import_Skeleton = require("../../Skeleton/index.cjs");
+var import_fieldLayout = require("../../fieldLayout.cjs");
+var import_colorRamps = require("../../shared/colorRamps.cjs");
+var import_utils = require("../../shared/utils.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const RadioItemFrame = (0, import_tamagui.styled)(import_tamagui.RadioGroup.Item, {
+  borderRadius: 1e3,
+  backgroundColor: import_colorRamps.formControlColors.background,
+  borderColor: import_colorRamps.formControlColors.border,
+  hoverStyle: {
+    backgroundColor: import_colorRamps.formControlColors.background,
+    borderColor: import_colorRamps.formControlColors.border
+  },
+  pressStyle: {
+    backgroundColor: import_colorRamps.formControlColors.background,
+    borderColor: import_colorRamps.formControlColors.border
+  },
+  focusStyle: {
+    backgroundColor: import_colorRamps.formControlColors.background,
+    borderColor: import_colorRamps.formControlColors.border
+  },
+  focusVisibleStyle: {
+    backgroundColor: import_colorRamps.formControlColors.background,
+    borderColor: import_colorRamps.formControlColors.border
+  },
+  variants: {
+    outlined: {
+      true: {
+        backgroundColor: "transparent",
+        hoverStyle: {
+          backgroundColor: "transparent",
+          borderColor: import_colorRamps.formControlColors.border
+        },
+        pressStyle: {
+          backgroundColor: "transparent",
+          borderColor: import_colorRamps.formControlColors.border
+        },
+        focusStyle: {
+          backgroundColor: "transparent",
+          borderColor: import_colorRamps.formControlColors.border
+        }
+      }
+    }
+  }
+});
+const RadioIndicatorFrame = (0, import_tamagui.styled)(import_tamagui.RadioGroup.Indicator, {
+  borderRadius: 1e3
+});
+function RadioItemWithElevation({
+  elevationWrapperProps,
+  itemRadius = 1e3,
+  ...props
+}) {
+  if (elevationWrapperProps.elevation) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.View, {
+      ...elevationWrapperProps,
+      borderRadius: itemRadius,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioItemFrame, {
+        ...props
+      })
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioItemFrame, {
+    ...props
+  });
+}
+function RadioGroup({
+  name,
+  form: formProp,
+  validators,
+  label,
+  labelProps,
+  helperText,
+  error,
+  required,
+  disabled,
+  readOnly,
+  size,
+  id: idProp,
+  value,
+  defaultValue,
+  onValueChange,
+  onBlur,
+  options,
+  orientation = "vertical",
+  radioGroupProps,
+  children,
+  pointy,
+  skeleton,
+  compact
+}) {
+  const {
+    resolvedForm,
+    knobProps,
+    control,
+    text,
+    elevation,
+    id
+  } = (0, import_utils.useFormField)({
+    form: formProp,
+    id: idProp,
+    compact
+  });
+  const resolvedValidators = (0, import_utils.useResolvedValidators)(required, validators, label, name);
+  const elevationWrapperProps = (0, import_utils.getElevationWrapperProps)(knobProps, elevation);
+  const resolvedPointy = pointy ?? knobProps.pointy;
+  const itemRadius = resolvedPointy ? 0 : 1e3;
+  const indicatorRadius = resolvedPointy ? 0 : 1e3;
+  if (skeleton) {
+    const optionCount = options?.length ?? 3;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      id,
+      label,
+      size,
+      knobProps,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+        gap: "$2",
+        children: Array.from({
+          length: optionCount
+        }, (_, i) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          gap: "$2",
+          alignItems: "center",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+            variant: "circular",
+            width: 20,
+            height: 20
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+            variant: "text",
+            width: "50%",
+            height: 14
+          })]
+        }, i))
+      })
+    });
+  }
+  const renderItems = () => {
+    if (children) return children;
+    if (!options) return null;
+    const Container = orientation === "horizontal" ? import_tamagui.XStack : import_tamagui.YStack;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(Container, {
+      gap: "$2",
+      children: options.map(option => {
+        const itemId = `${id}-${option.value}`;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          gap: "$2",
+          alignItems: "center",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioItemWithElevation, {
+            elevationWrapperProps,
+            itemRadius,
+            value: option.value,
+            id: itemId,
+            size: knobProps.sizeToken,
+            borderWidth: knobProps.borderRadius.borderWidth,
+            borderRadius: itemRadius,
+            outlined: knobProps.outlined,
+            transition: knobProps.transition,
+            disabled,
+            pointerEvents: readOnly ? "none" : void 0,
+            ...((0, import_utils.stripRadiusFromStateProps)(control.hoverKnobProps) && {
+              hoverStyle: {
+                backgroundColor: import_colorRamps.formControlColors.background,
+                borderColor: import_colorRamps.formControlColors.border,
+                ...(0, import_utils.stripRadiusFromStateProps)(control.hoverKnobProps)
+              }
+            }),
+            ...((0, import_utils.stripRadiusFromStateProps)(control.pressKnobProps) && {
+              pressStyle: {
+                backgroundColor: import_colorRamps.formControlColors.background,
+                borderColor: import_colorRamps.formControlColors.border,
+                ...(0, import_utils.stripRadiusFromStateProps)(control.pressKnobProps)
+              }
+            }),
+            ...((0, import_utils.stripRadiusFromStateProps)(control.focusKnobProps) && {
+              focusStyle: {
+                backgroundColor: import_colorRamps.formControlColors.background,
+                borderColor: import_colorRamps.formControlColors.border,
+                ...(0, import_utils.stripRadiusFromStateProps)(control.focusKnobProps)
+              }
+            }),
+            ...((0, import_utils.stripRadiusFromStateProps)(control.focusVisibleKnobProps) && {
+              focusVisibleStyle: {
+                backgroundColor: import_colorRamps.formControlColors.background,
+                borderColor: import_colorRamps.formControlColors.border,
+                ...(0, import_utils.stripRadiusFromStateProps)(control.focusVisibleKnobProps)
+              }
+            }),
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioIndicatorFrame, {
+              borderRadius: indicatorRadius,
+              backgroundColor: knobProps.textAccentColor,
+              ...(knobProps.transition ? {
+                animation: knobProps.transition
+              } : void 0)
+            })
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Label, {
+            htmlFor: itemId,
+            size: size || knobProps.sizeToken,
+            ...knobProps.body,
+            color: knobProps.textAccentColor,
+            hoverStyle: {
+              color: knobProps.textAccentColor,
+              ...text.hoverKnobProps
+            },
+            pressStyle: {
+              color: knobProps.textAccentColor,
+              ...text.pressKnobProps
+            },
+            focusStyle: {
+              color: knobProps.textAccentColor,
+              ...text.focusKnobProps
+            },
+            focusVisibleStyle: {
+              color: knobProps.textAccentColor,
+              ...text.focusVisibleKnobProps
+            },
+            children: option.label
+          })]
+        }, option.value);
+      })
+    });
+  };
+  const renderRadioGroup = (radioValue, handleChange, handleBlur, hasError) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.RadioGroup, {
+    ...radioGroupProps,
+    id,
+    defaultValue: radioValue,
+    onValueChange: val => {
+      if (disabled || readOnly) return;
+      handleChange?.(val);
+      onValueChange?.(val);
+    },
+    ...(handleBlur ? {
+      onBlur: handleBlur
+    } : void 0),
+    "aria-required": required || void 0,
+    "aria-invalid": hasError || void 0,
+    "aria-readonly": readOnly || void 0,
+    children: renderItems()
+  });
+  if (!resolvedForm || !name) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+      id,
+      label,
+      labelProps,
+      error,
+      required,
+      helperText,
+      size,
+      knobProps,
+      children: renderRadioGroup(value ?? defaultValue, void 0, onBlur, !!error)
+    });
+  }
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.Field, {
+    form: resolvedForm,
+    name,
+    defaultValue,
+    validators: resolvedValidators,
+    children: field => {
+      const resolvedError = (0, import_utils.getFieldError)(field, error);
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_fieldLayout.FieldLayout, {
+        id,
+        label,
+        labelProps,
+        error: resolvedError,
+        required,
+        helperText,
+        size,
+        knobProps,
+        children: renderRadioGroup(value !== void 0 ? value : field.state.value, val => field.handleChange(val), (0, import_utils.mergeFieldHandler)(field, "handleBlur", onBlur), !!resolvedError)
+      });
+    }
+  });
+}
+RadioGroup.Item = import_tamagui.RadioGroup.Item;
+RadioGroup.Indicator = import_tamagui.RadioGroup.Indicator;