@tamagui/demos 1.96.0 → 1.97.0

package/dist/esm/RadioGroupHeadlessDemo.js

@@ -0,0 +1,102 @@
+import {
+  useRadioGroup,
+  useRadioGroupItem,
+  useRadioGroupItemIndicator
+} from "@tamagui/radio-headless";
+import { RovingFocusGroup } from "@tamagui/roving-focus";
+import { createContext } from "react";
+import { StyleSheet, View, Pressable, Text } from "react-native-web";
+import { isWeb, useTheme } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+const RadioGroupContext = createContext({}), RadioGroupItemContext = createContext({
+  checked: !1,
+  disabled: !1
+});
+function RadioGroupHeadlessDemo() {
+  const { providerValue, frameAttrs, rovingFocusGroupAttrs } = useRadioGroup({
+    orientation: "vertical",
+    name: "form",
+    defaultValue: "3"
+  });
+  return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: providerValue, children: /* @__PURE__ */ jsx(RovingFocusGroup, { ...rovingFocusGroupAttrs, children: /* @__PURE__ */ jsxs(View, { style: styles.radioGroup, ...frameAttrs, children: [
+    /* @__PURE__ */ jsx(RadioGroupItem, { value: "2", id: "2", label: "First Value" }),
+    /* @__PURE__ */ jsx(RadioGroupItem, { value: "3", id: "3", label: "Second Value" }),
+    /* @__PURE__ */ jsx(RadioGroupItem, { value: "4", id: "4", label: "Third Value" })
+  ] }) }) });
+}
+function RadioGroupItem(props) {
+  const theme = useTheme(), { value, id, label } = props, {
+    providerValue,
+    native,
+    bubbleInput,
+    rovingFocusGroupAttrs,
+    frameAttrs,
+    isFormControl,
+    checked
+  } = useRadioGroupItem({
+    radioGroupContext: RadioGroupContext,
+    value,
+    id
+  });
+  return /* @__PURE__ */ jsx(RadioGroupItemContext.Provider, { value: providerValue, children: isWeb && native ? bubbleInput : /* @__PURE__ */ jsxs(View, { style: styles.radioGroupItemContainer, children: [
+    /* @__PURE__ */ jsx(RovingFocusGroup.Item, { ...rovingFocusGroupAttrs, children: /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        style: {
+          ...styles.radioGroupItem,
+          borderColor: theme.borderColor.get(),
+          ...checked ? { borderWidth: 4 } : { backgroundColor: theme.background.get() }
+        },
+        ...frameAttrs,
+        onFocus: frameAttrs.onFocus,
+        children: /* @__PURE__ */ jsx(RadioGroupItemIndicator, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Text, { style: { color: theme.color.get() }, children: label }),
+    isFormControl && bubbleInput
+  ] }) });
+}
+function RadioGroupItemIndicator() {
+  const theme = useTheme(), params = useRadioGroupItemIndicator({
+    radioGroupItemContext: RadioGroupItemContext,
+    disabled: !1
+  });
+  return params.checked ? /* @__PURE__ */ jsx(
+    View,
+    {
+      style: {
+        ...styles.radioGroupItemIndicator,
+        backgroundColor: theme.color.get()
+      },
+      ...params
+    }
+  ) : null;
+}
+const styles = 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
+  }
+});
+export {
+  RadioGroupHeadlessDemo
+};
+//# sourceMappingURL=RadioGroupHeadlessDemo.js.map

package/dist/esm/RadioGroupHeadlessDemo.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/RadioGroupHeadlessDemo.tsx"],
+  "mappings": "AAIA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,YAAY,MAAM,WAAW,YAAY;AAClD,SAAS,OAAO,gBAAgB;AAiBxB,SACE,KADF;AAfR,MAAM,oBAAoB,cAAsC,CAAC,CAAC,GAC5D,wBAAwB,cAA0C;AAAA,EACtE,SAAS;AAAA,EACT,UAAU;AACZ,CAAC;AAEM,SAAS,yBAAyB;AACvC,QAAM,EAAE,eAAe,YAAY,sBAAsB,IAAI,cAAc;AAAA,IACzE,aAAa;AAAA,IACb,MAAM;AAAA,IACN,cAAc;AAAA,EAChB,CAAC;AACD,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,eACjC,8BAAC,oBAAkB,GAAG,uBACpB,+BAAC,QAAK,OAAO,OAAO,YAAa,GAAG,YAClC;AAAA,wBAAC,kBAAe,OAAM,KAAI,IAAG,KAAI,OAAM,eAAc;AAAA,IACrD,oBAAC,kBAAe,OAAM,KAAI,IAAG,KAAI,OAAM,gBAAe;AAAA,IACtD,oBAAC,kBAAe,OAAM,KAAI,IAAG,KAAI,OAAM,eAAc;AAAA,KACvD,GACF,GACF;AAEJ;AAEA,SAAS,eAAe,OAIrB;AACD,QAAM,QAAQ,SAAS,GACjB,EAAE,OAAO,IAAI,MAAM,IAAI,OACvB;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,kBAAkB;AAAA,IACpB,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,eACpC,mBAAS,SACR,cAEA,qBAAC,QAAK,OAAO,OAAO,yBAClB;AAAA,wBAAC,iBAAiB,MAAjB,EAAuB,GAAG,uBACzB;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,GAAG,OAAO;AAAA,UACL,aAAa,MAAM,YAAY,IAAI;AAAA,UACxC,GAAI,UACA,EAAE,aAAa,EAAE,IACjB,EAAE,iBAAiB,MAAM,WAAW,IAAI,EAAE;AAAA,QAChD;AAAA,QACC,GAAG;AAAA,QACJ,SAAS,WAAW;AAAA,QAEpB,8BAAC,2BAAwB;AAAA;AAAA,IAC3B,GACF;AAAA,IACA,oBAAC,QAAK,OAAO,EAAE,OAAO,MAAM,MAAM,IAAI,EAAE,GAAI,iBAAM;AAAA,IACjD,iBAAiB;AAAA,KACpB,GAEJ;AAEJ;AAEA,SAAS,0BAA0B;AACjC,QAAM,QAAQ,SAAS,GACjB,SAAS,2BAA2B;AAAA,IACxC,uBAAuB;AAAA,IACvB,UAAU;AAAA,EACZ,CAAC;AACD,SAAI,OAAO,UAEP;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,GAAG,OAAO;AAAA,QACV,iBAAiB,MAAM,MAAM,IAAI;AAAA,MACnC;AAAA,MACC,GAAG;AAAA;AAAA,EACN,IAGG;AACT;AAEA,MAAM,SAAS,WAAW,OAAO;AAAA,EAC/B,YAAY;AAAA,IACV,eAAe;AAAA,IACf,KAAK;AAAA,IACL,YAAY;AAAA,EACd;AAAA,EACA,gBAAgB;AAAA,IACd,aAAa;AAAA,IACb,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,YAAY;AAAA,EACd;AAAA,EACA,yBAAyB;AAAA,IACvB,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EACA,yBAAyB;AAAA,IACvB,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,KAAK;AAAA,EACP;AACF,CAAC;",
+  "names": []
+}

package/dist/esm/RadioGroupHeadlessDemo.mjs

@@ -0,0 +1,133 @@
+import { useRadioGroup, useRadioGroupItem, useRadioGroupItemIndicator } from "@tamagui/radio-headless";
+import { RovingFocusGroup } from "@tamagui/roving-focus";
+import { createContext } from "react";
+import { StyleSheet, View, Pressable, Text } from "react-native-web";
+import { isWeb, useTheme } from "tamagui";
+import { jsx, jsxs } from "react/jsx-runtime";
+const RadioGroupContext = createContext({}),
+  RadioGroupItemContext = createContext({
+    checked: !1,
+    disabled: !1
+  });
+function RadioGroupHeadlessDemo() {
+  const {
+    providerValue,
+    frameAttrs,
+    rovingFocusGroupAttrs
+  } = useRadioGroup({
+    orientation: "vertical",
+    name: "form",
+    defaultValue: "3"
+  });
+  return /* @__PURE__ */jsx(RadioGroupContext.Provider, {
+    value: providerValue,
+    children: /* @__PURE__ */jsx(RovingFocusGroup, {
+      ...rovingFocusGroupAttrs,
+      children: /* @__PURE__ */jsxs(View, {
+        style: styles.radioGroup,
+        ...frameAttrs,
+        children: [/* @__PURE__ */jsx(RadioGroupItem, {
+          value: "2",
+          id: "2",
+          label: "First Value"
+        }), /* @__PURE__ */jsx(RadioGroupItem, {
+          value: "3",
+          id: "3",
+          label: "Second Value"
+        }), /* @__PURE__ */jsx(RadioGroupItem, {
+          value: "4",
+          id: "4",
+          label: "Third Value"
+        })]
+      })
+    })
+  });
+}
+function RadioGroupItem(props) {
+  const theme = useTheme(),
+    {
+      value,
+      id,
+      label
+    } = props,
+    {
+      providerValue,
+      native,
+      bubbleInput,
+      rovingFocusGroupAttrs,
+      frameAttrs,
+      isFormControl,
+      checked
+    } = useRadioGroupItem({
+      radioGroupContext: RadioGroupContext,
+      value,
+      id
+    });
+  return /* @__PURE__ */jsx(RadioGroupItemContext.Provider, {
+    value: providerValue,
+    children: isWeb && native ? bubbleInput : /* @__PURE__ */jsxs(View, {
+      style: styles.radioGroupItemContainer,
+      children: [/* @__PURE__ */jsx(RovingFocusGroup.Item, {
+        ...rovingFocusGroupAttrs,
+        children: /* @__PURE__ */jsx(Pressable, {
+          style: {
+            ...styles.radioGroupItem,
+            borderColor: theme.borderColor.get(),
+            ...(checked ? {
+              borderWidth: 4
+            } : {
+              backgroundColor: theme.background.get()
+            })
+          },
+          ...frameAttrs,
+          onFocus: frameAttrs.onFocus,
+          children: /* @__PURE__ */jsx(RadioGroupItemIndicator, {})
+        })
+      }), /* @__PURE__ */jsx(Text, {
+        style: {
+          color: theme.color.get()
+        },
+        children: label
+      }), isFormControl && bubbleInput]
+    })
+  });
+}
+function RadioGroupItemIndicator() {
+  const theme = useTheme(),
+    params = useRadioGroupItemIndicator({
+      radioGroupItemContext: RadioGroupItemContext,
+      disabled: !1
+    });
+  return params.checked ? /* @__PURE__ */jsx(View, {
+    style: {
+      ...styles.radioGroupItemIndicator,
+      backgroundColor: theme.color.get()
+    },
+    ...params
+  }) : null;
+}
+const styles = 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
+  }
+});
+export { RadioGroupHeadlessDemo };

package/dist/esm/RadioGroupHeadlessDemo.native.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRadioGroup, useRadioGroupItem, useRadioGroupItemIndicator } from "@tamagui/radio-headless";
+import { RovingFocusGroup } from "@tamagui/roving-focus";
+import { createContext } from "react";
+import { StyleSheet, View, Pressable, Text } from "react-native";
+import { isWeb, useTheme } from "tamagui";
+function _define_property(obj, key, value) {
+  return key in obj ? Object.defineProperty(obj, key, {
+    value,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : obj[key] = value, obj;
+}
+function _object_spread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {}, ownKeys2 = Object.keys(source);
+    typeof Object.getOwnPropertySymbols == "function" && (ownKeys2 = ownKeys2.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+    }))), ownKeys2.forEach(function(key) {
+      _define_property(target, key, source[key]);
+    });
+  }
+  return target;
+}
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
+function _object_spread_props(target, source) {
+  return source = source ?? {}, Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function(key) {
+    Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+  }), target;
+}
+var RadioGroupContext = /* @__PURE__ */ createContext({}), RadioGroupItemContext = /* @__PURE__ */ createContext({
+  checked: !1,
+  disabled: !1
+});
+function RadioGroupHeadlessDemo() {
+  var _useRadioGroup = useRadioGroup({
+    orientation: "vertical",
+    name: "form",
+    defaultValue: "3"
+  }), providerValue = _useRadioGroup.providerValue, frameAttrs = _useRadioGroup.frameAttrs, rovingFocusGroupAttrs = _useRadioGroup.rovingFocusGroupAttrs;
+  return /* @__PURE__ */ _jsx(RadioGroupContext.Provider, {
+    value: providerValue,
+    children: /* @__PURE__ */ _jsx(RovingFocusGroup, _object_spread_props(_object_spread({}, rovingFocusGroupAttrs), {
+      children: /* @__PURE__ */ _jsxs(View, _object_spread_props(_object_spread({
+        style: styles.radioGroup
+      }, frameAttrs), {
+        children: [
+          /* @__PURE__ */ _jsx(RadioGroupItem, {
+            value: "2",
+            id: "2",
+            label: "First Value"
+          }),
+          /* @__PURE__ */ _jsx(RadioGroupItem, {
+            value: "3",
+            id: "3",
+            label: "Second Value"
+          }),
+          /* @__PURE__ */ _jsx(RadioGroupItem, {
+            value: "4",
+            id: "4",
+            label: "Third Value"
+          })
+        ]
+      }))
+    }))
+  });
+}
+function RadioGroupItem(props) {
+  var theme = useTheme(), value = props.value, id = props.id, label = props.label, _useRadioGroupItem = useRadioGroupItem({
+    radioGroupContext: RadioGroupContext,
+    value,
+    id
+  }), providerValue = _useRadioGroupItem.providerValue, native = _useRadioGroupItem.native, bubbleInput = _useRadioGroupItem.bubbleInput, rovingFocusGroupAttrs = _useRadioGroupItem.rovingFocusGroupAttrs, frameAttrs = _useRadioGroupItem.frameAttrs, isFormControl = _useRadioGroupItem.isFormControl, checked = _useRadioGroupItem.checked;
+  return /* @__PURE__ */ _jsx(RadioGroupItemContext.Provider, {
+    value: providerValue,
+    children: isWeb && native ? bubbleInput : /* @__PURE__ */ _jsxs(View, {
+      style: styles.radioGroupItemContainer,
+      children: [
+        /* @__PURE__ */ _jsx(RovingFocusGroup.Item, _object_spread_props(_object_spread({}, rovingFocusGroupAttrs), {
+          children: /* @__PURE__ */ _jsx(Pressable, _object_spread_props(_object_spread({
+            style: _object_spread({}, styles.radioGroupItem, {
+              borderColor: theme.borderColor.get()
+            }, checked ? {
+              borderWidth: 4
+            } : {
+              backgroundColor: theme.background.get()
+            })
+          }, frameAttrs), {
+            onFocus: frameAttrs.onFocus,
+            children: /* @__PURE__ */ _jsx(RadioGroupItemIndicator, {})
+          }))
+        })),
+        /* @__PURE__ */ _jsx(Text, {
+          style: {
+            color: theme.color.get()
+          },
+          children: label
+        }),
+        isFormControl && bubbleInput
+      ]
+    })
+  });
+}
+function RadioGroupItemIndicator() {
+  var theme = useTheme(), params = useRadioGroupItemIndicator({
+    radioGroupItemContext: RadioGroupItemContext,
+    disabled: !1
+  });
+  return params.checked ? /* @__PURE__ */ _jsx(View, _object_spread({
+    style: _object_spread_props(_object_spread({}, styles.radioGroupItemIndicator), {
+      backgroundColor: theme.color.get()
+    })
+  }, params)) : null;
+}
+var styles = 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
+  }
+});
+export {
+  RadioGroupHeadlessDemo
+};
+//# sourceMappingURL=RadioGroupHeadlessDemo.js.map

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

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/Users/n8/tamagui/packages/demos/src/RadioGroupHeadlessDemo.tsx"],
+  "mappings": "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",
+  "names": ["useRadioGroup", "useRadioGroupItem", "useRadioGroupItemIndicator", "RovingFocusGroup", "createContext", "StyleSheet", "View", "Pressable", "Text", "isWeb", "useTheme", "RadioGroupContext", "RadioGroupItemContext", "checked", "disabled", "RadioGroupHeadlessDemo", "orientation", "name", "defaultValue", "providerValue", "frameAttrs", "rovingFocusGroupAttrs", "Provider", "value", "style", "styles", "radioGroup", "RadioGroupItem", "id", "label", "props", "theme", "radioGroupContext", "native", "bubbleInput", "isFormControl", "radioGroupItemContainer", "Item", "radioGroupItem", "borderColor", "get", "borderWidth", "backgroundColor", "background", "onFocus", "RadioGroupItemIndicator", "color", "params", "radioGroupItemContext", "radioGroupItemIndicator", "create", "flexDirection", "gap", "alignItems", "width", "height", "justifyContent"]
+}

package/dist/esm/RadioGroupUnstyledDemo.js

@@ -0,0 +1,93 @@
+import { Label, ThemeableStack, XStack, YStack, styled } from "tamagui";
+import { createRadioGroup } from "@tamagui/radio-group";
+import { jsx, jsxs } from "react/jsx-runtime";
+const RADIO_GROUP_ITEM_NAME = "RadioGroupItem", RadioGroupItemFrame = styled(ThemeableStack, {
+  name: RADIO_GROUP_ITEM_NAME,
+  tag: "button",
+  borderRadius: 1e3,
+  backgroundColor: "$background",
+  alignItems: "center",
+  justifyContent: "center",
+  borderWidth: 1,
+  borderColor: "$borderColor",
+  padding: 0,
+  hoverStyle: {
+    borderColor: "$borderColorHover",
+    backgroundColor: "$backgroundHover"
+  },
+  focusStyle: {
+    borderColor: "$borderColorHover",
+    backgroundColor: "$backgroundHover"
+  },
+  focusVisibleStyle: {
+    outlineStyle: "solid",
+    outlineWidth: 2,
+    outlineColor: "$outlineColor"
+  },
+  pressStyle: {
+    borderColor: "$borderColorFocus",
+    backgroundColor: "$backgroundFocus"
+  },
+  variants: {
+    disabled: {
+      true: {
+        pointerEvents: "none",
+        userSelect: "none",
+        cursor: "not-allowed",
+        hoverStyle: {
+          borderColor: "$borderColor",
+          backgroundColor: "$background"
+        },
+        pressStyle: {
+          borderColor: "$borderColor",
+          backgroundColor: "$background"
+        },
+        focusVisibleStyle: {
+          outlineWidth: 0
+        }
+      }
+    }
+  }
+}), RADIO_GROUP_INDICATOR_NAME = "RadioGroupIndicator", RadioGroupIndicatorFrame = styled(ThemeableStack, {
+  name: RADIO_GROUP_INDICATOR_NAME,
+  width: "53%",
+  height: "53%",
+  borderRadius: 1e3,
+  backgroundColor: "$color",
+  pressTheme: !0
+}), RADIO_GROUP_NAME = "RadioGroup", RadioGroupFrame = styled(ThemeableStack, {
+  name: RADIO_GROUP_NAME,
+  variants: {
+    orientation: {
+      horizontal: {
+        flexDirection: "row",
+        spaceDirection: "horizontal"
+      },
+      vertical: {
+        flexDirection: "column",
+        spaceDirection: "vertical"
+      }
+    }
+  }
+}), RadioGroup = createRadioGroup({
+  Frame: RadioGroupFrame,
+  Indicator: RadioGroupIndicatorFrame,
+  Item: RadioGroupItemFrame
+});
+function RadioGroupUnstyledDemo() {
+  return /* @__PURE__ */ jsx(RadioGroup, { "aria-labelledby": "Select one item", defaultValue: "3", name: "form", children: /* @__PURE__ */ jsxs(YStack, { width: 200, alignItems: "center", space: "$2", children: [
+    /* @__PURE__ */ jsx(RadioGroupItemWithLabel, { value: "2", label: "Option One" }),
+    /* @__PURE__ */ jsx(RadioGroupItemWithLabel, { value: "3", label: "Option Two" })
+  ] }) });
+}
+function RadioGroupItemWithLabel(props) {
+  const id = `radiogroup-${props.value}`;
+  return /* @__PURE__ */ jsxs(XStack, { width: 300, alignItems: "center", gap: "$4", children: [
+    /* @__PURE__ */ jsx(RadioGroup.Item, { value: props.value, id, children: /* @__PURE__ */ jsx(RadioGroup.Indicator, {}) }),
+    /* @__PURE__ */ jsx(Label, { htmlFor: id, children: props.label })
+  ] });
+}
+export {
+  RadioGroupUnstyledDemo
+};
+//# sourceMappingURL=RadioGroupUnstyledDemo.js.map

package/dist/esm/RadioGroupUnstyledDemo.js.map

@@ -0,0 +1,6 @@
+{
+  "version": 3,
+  "sources": ["../../src/RadioGroupUnstyledDemo.tsx"],
+  "mappings": "AACA,SAAS,OAAO,gBAAgB,QAAQ,QAAQ,cAAc;AAE9D,SAAS,wBAAwB;AAoG3B,SACE,KADF;AAlGN,MAAM,wBAAwB,kBAExB,sBAAsB,OAAO,gBAAgB;AAAA,EACjD,MAAM;AAAA,EACN,KAAK;AAAA,EAEL,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,aAAa;AAAA,EACb,aAAa;AAAA,EACb,SAAS;AAAA,EAET,YAAY;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA,EACnB;AAAA,EAEA,YAAY;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA,EACnB;AAAA,EAEA,mBAAmB;AAAA,IACjB,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAc;AAAA,EAChB;AAAA,EAEA,YAAY;AAAA,IACV,aAAa;AAAA,IACb,iBAAiB;AAAA,EACnB;AAAA,EAEA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,eAAe;AAAA,QACf,YAAY;AAAA,QACZ,QAAQ;AAAA,QAER,YAAY;AAAA,UACV,aAAa;AAAA,UACb,iBAAiB;AAAA,QACnB;AAAA,QAEA,YAAY;AAAA,UACV,aAAa;AAAA,UACb,iBAAiB;AAAA,QACnB;AAAA,QAEA,mBAAmB;AAAA,UACjB,cAAc;AAAA,QAChB;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAU,GAEJ,6BAA6B,uBAE7B,2BAA2B,OAAO,gBAAgB;AAAA,EACtD,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,YAAY;AACd,CAAC,GAEK,mBAAmB,cAEnB,kBAAkB,OAAO,gBAAgB;AAAA,EAC7C,MAAM;AAAA,EACN,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY;AAAA,QACV,eAAe;AAAA,QACf,gBAAgB;AAAA,MAClB;AAAA,MACA,UAAU;AAAA,QACR,eAAe;AAAA,QACf,gBAAgB;AAAA,MAClB;AAAA,IACF;AAAA,EACF;AACF,CAAC,GAEK,aAAa,iBAAiB;AAAA,EAClC,OAAO;AAAA,EACP,WAAW;AAAA,EACX,MAAM;AACR,CAAC;AAEM,SAAS,yBAAyB;AACvC,SACE,oBAAC,cAAW,mBAAgB,mBAAkB,cAAa,KAAI,MAAK,QAClE,+BAAC,UAAO,OAAO,KAAK,YAAW,UAAS,OAAM,MAC5C;AAAA,wBAAC,2BAAwB,OAAM,KAAI,OAAM,cAAa;AAAA,IACtD,oBAAC,2BAAwB,OAAM,KAAI,OAAM,cAAa;AAAA,KACxD,GACF;AAEJ;AAEA,SAAS,wBAAwB,OAG9B;AACD,QAAM,KAAK,cAAc,MAAM,KAAK;AACpC,SACE,qBAAC,UAAO,OAAO,KAAK,YAAW,UAAS,KAAI,MAC1C;AAAA,wBAAC,WAAW,MAAX,EAAgB,OAAO,MAAM,OAAO,IACnC,8BAAC,WAAW,WAAX,EAAqB,GACxB;AAAA,IAEA,oBAAC,SAAM,SAAS,IAAK,gBAAM,OAAM;AAAA,KACnC;AAEJ;",
+  "names": []
+}

package/dist/esm/RadioGroupUnstyledDemo.mjs

@@ -0,0 +1,118 @@
+import { Label, ThemeableStack, XStack, YStack, styled } from "tamagui";
+import { createRadioGroup } from "@tamagui/radio-group";
+import { jsx, jsxs } from "react/jsx-runtime";
+const RADIO_GROUP_ITEM_NAME = "RadioGroupItem",
+  RadioGroupItemFrame = styled(ThemeableStack, {
+    name: RADIO_GROUP_ITEM_NAME,
+    tag: "button",
+    borderRadius: 1e3,
+    backgroundColor: "$background",
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+    borderColor: "$borderColor",
+    padding: 0,
+    hoverStyle: {
+      borderColor: "$borderColorHover",
+      backgroundColor: "$backgroundHover"
+    },
+    focusStyle: {
+      borderColor: "$borderColorHover",
+      backgroundColor: "$backgroundHover"
+    },
+    focusVisibleStyle: {
+      outlineStyle: "solid",
+      outlineWidth: 2,
+      outlineColor: "$outlineColor"
+    },
+    pressStyle: {
+      borderColor: "$borderColorFocus",
+      backgroundColor: "$backgroundFocus"
+    },
+    variants: {
+      disabled: {
+        true: {
+          pointerEvents: "none",
+          userSelect: "none",
+          cursor: "not-allowed",
+          hoverStyle: {
+            borderColor: "$borderColor",
+            backgroundColor: "$background"
+          },
+          pressStyle: {
+            borderColor: "$borderColor",
+            backgroundColor: "$background"
+          },
+          focusVisibleStyle: {
+            outlineWidth: 0
+          }
+        }
+      }
+    }
+  }),
+  RADIO_GROUP_INDICATOR_NAME = "RadioGroupIndicator",
+  RadioGroupIndicatorFrame = styled(ThemeableStack, {
+    name: RADIO_GROUP_INDICATOR_NAME,
+    width: "53%",
+    height: "53%",
+    borderRadius: 1e3,
+    backgroundColor: "$color",
+    pressTheme: !0
+  }),
+  RADIO_GROUP_NAME = "RadioGroup",
+  RadioGroupFrame = styled(ThemeableStack, {
+    name: RADIO_GROUP_NAME,
+    variants: {
+      orientation: {
+        horizontal: {
+          flexDirection: "row",
+          spaceDirection: "horizontal"
+        },
+        vertical: {
+          flexDirection: "column",
+          spaceDirection: "vertical"
+        }
+      }
+    }
+  }),
+  RadioGroup = createRadioGroup({
+    Frame: RadioGroupFrame,
+    Indicator: RadioGroupIndicatorFrame,
+    Item: RadioGroupItemFrame
+  });
+function RadioGroupUnstyledDemo() {
+  return /* @__PURE__ */jsx(RadioGroup, {
+    "aria-labelledby": "Select one item",
+    defaultValue: "3",
+    name: "form",
+    children: /* @__PURE__ */jsxs(YStack, {
+      width: 200,
+      alignItems: "center",
+      space: "$2",
+      children: [/* @__PURE__ */jsx(RadioGroupItemWithLabel, {
+        value: "2",
+        label: "Option One"
+      }), /* @__PURE__ */jsx(RadioGroupItemWithLabel, {
+        value: "3",
+        label: "Option Two"
+      })]
+    })
+  });
+}
+function RadioGroupItemWithLabel(props) {
+  const id = `radiogroup-${props.value}`;
+  return /* @__PURE__ */jsxs(XStack, {
+    width: 300,
+    alignItems: "center",
+    gap: "$4",
+    children: [/* @__PURE__ */jsx(RadioGroup.Item, {
+      value: props.value,
+      id,
+      children: /* @__PURE__ */jsx(RadioGroup.Indicator, {})
+    }), /* @__PURE__ */jsx(Label, {
+      htmlFor: id,
+      children: props.label
+    })]
+  });
+}
+export { RadioGroupUnstyledDemo };