@hanzogui/demos 2.0.0

package/dist/cjs/RadioGroupHeadlessDemo.cjs

@@ -0,0 +1,168 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var RadioGroupHeadlessDemo_exports = {};
+__export(RadioGroupHeadlessDemo_exports, {
+  RadioGroupHeadlessDemo: () => RadioGroupHeadlessDemo
+});
+module.exports = __toCommonJS(RadioGroupHeadlessDemo_exports);
+var import_radio_headless = require("@hanzogui/radio-headless"),
+  import_roving_focus = require("@hanzogui/roving-focus"),
+  import_react = __toESM(require("react"), 1),
+  import_react_native = require("react-native-web"),
+  import_gui = require("@hanzo/gui"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const RadioGroupContext = import_react.default.createContext({}),
+  RadioGroupItemContext = import_react.default.createContext({
+    checked: !1,
+    disabled: !1
+  });
+function RadioGroupHeadlessDemo() {
+  const {
+    providerValue,
+    frameAttrs,
+    rovingFocusGroupAttrs
+  } = (0, import_radio_headless.useRadioGroup)({
+    orientation: "vertical",
+    name: "form",
+    defaultValue: "3"
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupContext.Provider, {
+    value: providerValue,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {
+      ...rovingFocusGroupAttrs,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react_native.View, {
+        style: styles.radioGroup,
+        ...frameAttrs,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItem, {
+          value: "2",
+          id: "2",
+          label: "First Value"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItem, {
+          value: "3",
+          id: "3",
+          label: "Second Value"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItem, {
+          value: "4",
+          id: "4",
+          label: "Third Value"
+        })]
+      })
+    })
+  });
+}
+function RadioGroupItem(props) {
+  const theme = (0, import_gui.useTheme)(),
+    {
+      value,
+      id,
+      label
+    } = props,
+    {
+      providerValue,
+      native,
+      bubbleInput,
+      rovingFocusGroupAttrs,
+      frameAttrs,
+      isFormControl,
+      checked
+    } = (0, import_radio_headless.useRadioGroupItem)({
+      radioGroupContext: RadioGroupContext,
+      value,
+      id
+    });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemContext.Provider, {
+    value: providerValue,
+    children: import_gui.isWeb && native ? bubbleInput : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react_native.View, {
+      style: styles.radioGroupItemContainer,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
+        ...rovingFocusGroupAttrs,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
+          style: {
+            ...styles.radioGroupItem,
+            borderColor: theme.borderColor?.get(),
+            ...(checked ? {
+              borderWidth: 4
+            } : {
+              backgroundColor: theme.background?.get()
+            })
+          },
+          ...frameAttrs,
+          onFocus: frameAttrs.onFocus,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemIndicator, {})
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Text, {
+        style: {
+          color: theme.color?.get()
+        },
+        children: label
+      }), isFormControl && bubbleInput]
+    })
+  });
+}
+function RadioGroupItemIndicator() {
+  const theme = (0, import_gui.useTheme)(),
+    params = (0, import_radio_headless.useRadioGroupItemIndicator)({
+      radioGroupItemContext: RadioGroupItemContext,
+      disabled: !1
+    });
+  return params.checked ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.View, {
+    style: {
+      ...styles.radioGroupItemIndicator,
+      backgroundColor: theme.color?.get()
+    },
+    ...params
+  }) : null;
+}
+const styles = import_react_native.StyleSheet.create({
+  radioGroup: {
+    flexDirection: "column",
+    gap: 20,
+    alignItems: "flex-start"
+  },
+  radioGroupItem: {
+    borderWidth: 2,
+    width: 30,
+    height: 30,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  radioGroupItemIndicator: {
+    width: "35%",
+    height: "35%"
+  },
+  radioGroupItemContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 12
+  }
+});

package/dist/cjs/RadioGroupHeadlessDemo.native.js

@@ -0,0 +1,178 @@
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf,
+  __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+    for (var name in all) __defProp(target, name, {
+      get: all[name],
+      enumerable: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__hasOwnProp.call(to, key) && key !== except && __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+    return to;
+  };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+    value: mod,
+    enumerable: !0
+  }) : target, mod)),
+  __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+    value: !0
+  }), mod);
+var RadioGroupHeadlessDemo_exports = {};
+__export(RadioGroupHeadlessDemo_exports, {
+  RadioGroupHeadlessDemo: () => RadioGroupHeadlessDemo
+});
+module.exports = __toCommonJS(RadioGroupHeadlessDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_radio_headless = require("@hanzogui/radio-headless"),
+  import_roving_focus = require("@hanzogui/roving-focus"),
+  import_react = __toESM(require("react"), 1),
+  import_react_native = require("react-native"),
+  import_gui = require("@hanzo/gui"),
+  RadioGroupContext = /* @__PURE__ */import_react.default.createContext({}),
+  RadioGroupItemContext = /* @__PURE__ */import_react.default.createContext({
+    checked: !1,
+    disabled: !1
+  });
+function RadioGroupHeadlessDemo() {
+  var {
+    providerValue,
+    frameAttrs,
+    rovingFocusGroupAttrs
+  } = (0, import_radio_headless.useRadioGroup)({
+    orientation: "vertical",
+    name: "form",
+    defaultValue: "3"
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupContext.Provider, {
+    value: providerValue,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup, {
+      ...rovingFocusGroupAttrs,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react_native.View, {
+        style: styles.radioGroup,
+        ...frameAttrs,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItem, {
+          value: "2",
+          id: "2",
+          label: "First Value"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItem, {
+          value: "3",
+          id: "3",
+          label: "Second Value"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItem, {
+          value: "4",
+          id: "4",
+          label: "Third Value"
+        })]
+      })
+    })
+  });
+}
+function RadioGroupItem(props) {
+  var _theme_borderColor,
+    _theme_background,
+    _theme_color,
+    theme = (0, import_gui.useTheme)(),
+    {
+      value,
+      id,
+      label
+    } = props,
+    {
+      providerValue,
+      native,
+      bubbleInput,
+      rovingFocusGroupAttrs,
+      frameAttrs,
+      isFormControl,
+      checked
+    } = (0, import_radio_headless.useRadioGroupItem)({
+      radioGroupContext: RadioGroupContext,
+      value,
+      id
+    });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemContext.Provider, {
+    value: providerValue,
+    children: import_gui.isWeb && native ? bubbleInput : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_react_native.View, {
+      style: styles.radioGroupItemContainer,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_roving_focus.RovingFocusGroup.Item, {
+        ...rovingFocusGroupAttrs,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Pressable, {
+          style: {
+            ...styles.radioGroupItem,
+            borderColor: (_theme_borderColor = theme.borderColor) === null || _theme_borderColor === void 0 ? void 0 : _theme_borderColor.get(),
+            ...(checked ? {
+              borderWidth: 4
+            } : {
+              backgroundColor: (_theme_background = theme.background) === null || _theme_background === void 0 ? void 0 : _theme_background.get()
+            })
+          },
+          ...frameAttrs,
+          onFocus: frameAttrs.onFocus,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemIndicator, {})
+        })
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.Text, {
+        style: {
+          color: (_theme_color = theme.color) === null || _theme_color === void 0 ? void 0 : _theme_color.get()
+        },
+        children: label
+      }), isFormControl && bubbleInput]
+    })
+  });
+}
+function RadioGroupItemIndicator() {
+  var theme = (0, import_gui.useTheme)(),
+    params = (0, import_radio_headless.useRadioGroupItemIndicator)({
+      radioGroupItemContext: RadioGroupItemContext,
+      disabled: !1
+    });
+  if (params.checked) {
+    var _theme_color;
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_native.View, {
+      style: {
+        ...styles.radioGroupItemIndicator,
+        backgroundColor: (_theme_color = theme.color) === null || _theme_color === void 0 ? void 0 : _theme_color.get()
+      },
+      ...params
+    });
+  }
+  return null;
+}
+var styles = import_react_native.StyleSheet.create({
+  radioGroup: {
+    flexDirection: "column",
+    gap: 20,
+    alignItems: "flex-start"
+  },
+  radioGroupItem: {
+    borderWidth: 2,
+    width: 30,
+    height: 30,
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  radioGroupItemIndicator: {
+    width: "35%",
+    height: "35%"
+  },
+  radioGroupItemContainer: {
+    justifyContent: "center",
+    alignItems: "center",
+    flexDirection: "row",
+    gap: 12
+  }
+});
+//# sourceMappingURL=RadioGroupHeadlessDemo.native.js.map

package/dist/cjs/RadioGroupHeadlessDemo.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","RadioGroupHeadlessDemo_exports","__export","RadioGroupHeadlessDemo","module","exports","import_jsx_runtime","require","import_radio_headless","import_roving_focus","import_react","__toESM","import_react_native","import_gui","RadioGroupContext","default","createContext","RadioGroupItemContext","checked","disabled","providerValue","frameAttrs","rovingFocusGroupAttrs","useRadioGroup","orientation","name","defaultValue","jsx","Provider","children","RovingFocusGroup","jsxs","View","style","styles","radioGroup","RadioGroupItem","id","label","props","_theme_borderColor","_theme_background","_theme_color","theme","useTheme","native","bubbleInput","isFormControl","useRadioGroupItem","radioGroupContext","isWeb","radioGroupItemContainer","Item","Pressable","radioGroupItem","borderColor","get","borderWidth","backgroundColor","background","onFocus","RadioGroupItemIndicator","Text","color","params","useRadioGroupItemIndicator","radioGroupItemContext","radioGroupItemIndicator"],"sources":["../../src/RadioGroupHeadlessDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/cjs/RadioGroupUnstyledDemo.cjs

@@ -0,0 +1,141 @@
+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: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__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: !0
+}), mod);
+var RadioGroupUnstyledDemo_exports = {};
+__export(RadioGroupUnstyledDemo_exports, {
+  RadioGroupUnstyledDemo: () => RadioGroupUnstyledDemo
+});
+module.exports = __toCommonJS(RadioGroupUnstyledDemo_exports);
+var import_gui = require("@hanzo/gui"),
+  import_radio_group = require("@hanzogui/radio-group"),
+  import_jsx_runtime = require("react/jsx-runtime");
+const RADIO_GROUP_ITEM_NAME = "RadioGroupItem",
+  RadioGroupItemFrame = (0, import_gui.styled)(import_gui.YStack, {
+    name: RADIO_GROUP_ITEM_NAME,
+    render: "button",
+    rounded: 1e3,
+    bg: "$background",
+    items: "center",
+    justify: "center",
+    borderWidth: 1,
+    borderColor: "$borderColor",
+    p: 0,
+    hoverStyle: {
+      borderColor: "$borderColorHover",
+      bg: "$backgroundHover"
+    },
+    focusStyle: {
+      borderColor: "$borderColorHover",
+      bg: "$backgroundHover"
+    },
+    focusVisibleStyle: {
+      outlineStyle: "solid",
+      outlineWidth: 2,
+      outlineColor: "$outlineColor"
+    },
+    pressStyle: {
+      borderColor: "$borderColorFocus",
+      bg: "$backgroundFocus"
+    },
+    variants: {
+      disabled: {
+        true: {
+          pointerEvents: "none",
+          userSelect: "none",
+          cursor: "not-allowed",
+          hoverStyle: {
+            borderColor: "$borderColor",
+            bg: "$background"
+          },
+          pressStyle: {
+            borderColor: "$borderColor",
+            bg: "$background"
+          },
+          focusVisibleStyle: {
+            outlineWidth: 0
+          }
+        }
+      }
+    }
+  }),
+  RADIO_GROUP_INDICATOR_NAME = "RadioGroupIndicator",
+  RadioGroupIndicatorFrame = (0, import_gui.styled)(import_gui.YStack, {
+    name: RADIO_GROUP_INDICATOR_NAME,
+    width: "53%",
+    height: "53%",
+    rounded: 1e3,
+    bg: "$color"
+  }),
+  RADIO_GROUP_NAME = "RadioGroup",
+  RadioGroupFrame = (0, import_gui.styled)(import_gui.YStack, {
+    name: RADIO_GROUP_NAME,
+    variants: {
+      orientation: {
+        horizontal: {
+          flexDirection: "row",
+          spaceDirection: "horizontal"
+        },
+        vertical: {
+          flexDirection: "column",
+          spaceDirection: "vertical"
+        }
+      }
+    }
+  }),
+  RadioGroup = (0, import_radio_group.createRadioGroup)({
+    Frame: RadioGroupFrame,
+    Indicator: RadioGroupIndicatorFrame,
+    Item: RadioGroupItemFrame
+  });
+function RadioGroupUnstyledDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroup, {
+    "aria-labelledby": "Select one item",
+    defaultValue: "3",
+    name: "form",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+      width: 200,
+      items: "center",
+      gap: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemWithLabel, {
+        value: "2",
+        label: "Option One"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemWithLabel, {
+        value: "3",
+        label: "Option Two"
+      })]
+    })
+  });
+}
+function RadioGroupItemWithLabel(props) {
+  const id = `radiogroup-${props.value}`;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+    width: 300,
+    items: "center",
+    gap: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroup.Item, {
+      value: props.value,
+      id,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroup.Indicator, {})
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
+      htmlFor: id,
+      children: props.label
+    })]
+  });
+}

package/dist/cjs/RadioGroupUnstyledDemo.native.js

@@ -0,0 +1,144 @@
+"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: !0
+    });
+  },
+  __copyProps = (to, from, except, desc) => {
+    if (from && typeof from == "object" || typeof from == "function") for (let key of __getOwnPropNames(from)) !__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: !0
+}), mod);
+var RadioGroupUnstyledDemo_exports = {};
+__export(RadioGroupUnstyledDemo_exports, {
+  RadioGroupUnstyledDemo: () => RadioGroupUnstyledDemo
+});
+module.exports = __toCommonJS(RadioGroupUnstyledDemo_exports);
+var import_jsx_runtime = require("react/jsx-runtime"),
+  import_gui = require("@hanzo/gui"),
+  import_radio_group = require("@hanzogui/radio-group"),
+  RADIO_GROUP_ITEM_NAME = "RadioGroupItem",
+  RadioGroupItemFrame = (0, import_gui.styled)(import_gui.YStack, {
+    name: RADIO_GROUP_ITEM_NAME,
+    render: "button",
+    rounded: 1e3,
+    bg: "$background",
+    items: "center",
+    justify: "center",
+    borderWidth: 1,
+    borderColor: "$borderColor",
+    p: 0,
+    hoverStyle: {
+      borderColor: "$borderColorHover",
+      bg: "$backgroundHover"
+    },
+    focusStyle: {
+      borderColor: "$borderColorHover",
+      bg: "$backgroundHover"
+    },
+    focusVisibleStyle: {
+      outlineStyle: "solid",
+      outlineWidth: 2,
+      outlineColor: "$outlineColor"
+    },
+    pressStyle: {
+      borderColor: "$borderColorFocus",
+      bg: "$backgroundFocus"
+    },
+    variants: {
+      disabled: {
+        true: {
+          pointerEvents: "none",
+          userSelect: "none",
+          cursor: "not-allowed",
+          hoverStyle: {
+            borderColor: "$borderColor",
+            bg: "$background"
+          },
+          pressStyle: {
+            borderColor: "$borderColor",
+            bg: "$background"
+          },
+          focusVisibleStyle: {
+            outlineWidth: 0
+          }
+        }
+      }
+    }
+  }),
+  RADIO_GROUP_INDICATOR_NAME = "RadioGroupIndicator",
+  RadioGroupIndicatorFrame = (0, import_gui.styled)(import_gui.YStack, {
+    name: RADIO_GROUP_INDICATOR_NAME,
+    width: "53%",
+    height: "53%",
+    rounded: 1e3,
+    bg: "$color"
+  }),
+  RADIO_GROUP_NAME = "RadioGroup",
+  RadioGroupFrame = (0, import_gui.styled)(import_gui.YStack, {
+    name: RADIO_GROUP_NAME,
+    variants: {
+      orientation: {
+        horizontal: {
+          flexDirection: "row",
+          spaceDirection: "horizontal"
+        },
+        vertical: {
+          flexDirection: "column",
+          spaceDirection: "vertical"
+        }
+      }
+    }
+  }),
+  RadioGroup = (0, import_radio_group.createRadioGroup)({
+    Frame: RadioGroupFrame,
+    Indicator: RadioGroupIndicatorFrame,
+    Item: RadioGroupItemFrame
+  });
+function RadioGroupUnstyledDemo() {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroup, {
+    "aria-labelledby": "Select one item",
+    defaultValue: "3",
+    name: "form",
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.YStack, {
+      width: 200,
+      items: "center",
+      gap: "$2",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemWithLabel, {
+        value: "2",
+        label: "Option One"
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroupItemWithLabel, {
+        value: "3",
+        label: "Option Two"
+      })]
+    })
+  });
+}
+function RadioGroupItemWithLabel(props) {
+  var id = `radiogroup-${props.value}`;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_gui.XStack, {
+    width: 300,
+    items: "center",
+    gap: "$4",
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroup.Item, {
+      value: props.value,
+      id,
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(RadioGroup.Indicator, {})
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_gui.Label, {
+      htmlFor: id,
+      children: props.label
+    })]
+  });
+}
+//# sourceMappingURL=RadioGroupUnstyledDemo.native.js.map

package/dist/cjs/RadioGroupUnstyledDemo.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__toCommonJS","mod","__copyProps","__defProp","value","RadioGroupUnstyledDemo_exports","__export","RadioGroupUnstyledDemo","module","exports","import_jsx_runtime","require","import_gui","import_radio_group","RADIO_GROUP_ITEM_NAME","RadioGroupItemFrame","styled","YStack","name","render","rounded","bg","items","justify","borderWidth","borderColor","p","hoverStyle","focusStyle","focusVisibleStyle","outlineStyle","outlineWidth","outlineColor","pressStyle","variants","disabled","true","pointerEvents","userSelect","cursor","RADIO_GROUP_INDICATOR_NAME","RadioGroupIndicatorFrame","width","height","RADIO_GROUP_NAME","RadioGroupFrame","orientation","horizontal","flexDirection","spaceDirection","vertical","RadioGroup","createRadioGroup","Frame","Indicator","Item","jsx","defaultValue","children","jsxs","gap","RadioGroupItemWithLabel","label"],"sources":["../../src/RadioGroupUnstyledDemo.tsx"],"sourcesContent":[null],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,IAAAA,YAAA,GAAAC,GAAA,IAAAC,WAAA,CAAAC,SAAA;EAAAC,KAAA;AAAA,IAAAH,GAAA;AAAA,IAAAI,8BAAA;AAAAC,QAAA,CAAAD,8BAAA;EAAAE,sBAAA,EAAAA,CAAA,KAAAA;AAAA;AAAAC,MAAA,CAAAC,OAAA,GAA8CT,YAAA,CAAAK,8BAE9C,CAAiC;AAEjC,IAAAK,kBAAM,GAAAC,OAAwB,oBAExB;EAAAC,UAAA,GAAAD,OAAsB;EAAAE,kBAAO,GAAQF,OAAA;EAAAG,qBAAA;EAAAC,mBAAA,OAAAH,UAAA,CAAAI,MAAA,EAAAJ,UAAA,CAAAK,MAAA;IACzCC,IAAA,EAAMJ,qBAAA;IACNK,MAAA,EAAQ;IAERC,OAAA,EAAS;IACTC,EAAA,EAAI;IACJC,KAAA,EAAO;IACPC,OAAA,EAAS;IACTC,WAAA,EAAa;IACbC,WAAA,EAAa;IACbC,CAAA,EAAG;IAEHC,UAAA,EAAY;MACVF,WAAA,EAAa;MACbJ,EAAA,EAAI;IACN;IAEAO,UAAA,EAAY;MACVH,WAAA,EAAa;MACbJ,EAAA,EAAI;IACN;IAEAQ,iBAAA,EAAmB;MACjBC,YAAA,EAAc;MACdC,YAAA,EAAc;MACdC,YAAA,EAAc;IAChB;IAEAC,UAAA,EAAY;MACVR,WAAA,EAAa;MACbJ,EAAA,EAAI;IACN;IAEAa,QAAA,EAAU;MACRC,QAAA,EAAU;QACRC,IAAA,EAAM;UACJC,aAAA,EAAe;UACfC,UAAA,EAAY;UACZC,MAAA,EAAQ;UAERZ,UAAA,EAAY;YACVF,WAAA,EAAa;YACbJ,EAAA,EAAI;UACN;UAEAY,UAAA,EAAY;YACVR,WAAA,EAAa;YACbJ,EAAA,EAAI;UACN;UAEAQ,iBAAA,EAAmB;YACjBE,YAAA,EAAc;UAChB;QACF;MACF;IACF;EACF,CAAU;EAEJS,0BAAA,GAA6B;EAE7BC,wBAAA,OAA2B7B,UAAA,CAAAI,MAAA,EAAOJ,UAAA,CAAAK,MAAA,EAAQ;IAC9CC,IAAA,EAAMsB,0BAAA;IACNE,KAAA,EAAO;IACPC,MAAA,EAAQ;IACRvB,OAAA,EAAS;IACTC,EAAA,EAAI;EACN,CAAC;EAEKuB,gBAAA,GAAmB;EAEnBC,eAAA,OAAkBjC,UAAA,CAAAI,MAAA,EAAOJ,UAAA,CAAAK,MAAA,EAAQ;IACrCC,IAAA,EAAM0B,gBAAA;IACNV,QAAA,EAAU;MACRY,WAAA,EAAa;QACXC,UAAA,EAAY;UACVC,aAAA,EAAe;UACfC,cAAA,EAAgB;QAClB;QACAC,QAAA,EAAU;UACRF,aAAA,EAAe;UACfC,cAAA,EAAgB;QAClB;MACF;IACF;EACF,CAAC;EAEKE,UAAA,OAAatC,kBAAA,CAAAuC,gBAAA,EAAiB;IAClCC,KAAA,EAAOR,eAAA;IACPS,SAAA,EAAWb,wBAAA;IACXc,IAAA,EAAMxC;EACR,CAAC;AAEM,SAASR,uBAAA,EAAyB;EACvC,OACE,mBAAAG,kBAAA,CAAA8C,GAAA,EAACL,UAAA;IAEG;IACAM,YAAA;IAAsDvC,IAE1D;IAEJwC,QAAA,qBAAAhD,kBAAA,CAAAiD,IAAA,EAAA/C,UAAA,CAAAK,MAAA;MAEAyB,KAAS;MACPpB,KAAM,EAAK;MACXsC,GACE;MACEF,QAAA,GAIA,mBAAAhD,kBAAA,CAAA8C,GAAC,EAAAK,uBAAM,EAAS;QAClBzD,KAAA;QAEJ0D,KAAA","ignoreList":[]}