@hanzogui/demos 2.0.0

package/dist/esm/ProgressDemo.native.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Button, Paragraph, Progress, XStack, YStack } from "@hanzo/gui";
+import { Play, RotateCcw } from "@hanzogui/lucide-icons-2";
+function ProgressDemo() {
+  var [key, setKey] = React.useState(0),
+    [progress, setProgress] = React.useState(60),
+    [slider, setSlider] = React.useState([60]);
+  return /* @__PURE__ */_jsxs(_Fragment, {
+    children: [/* @__PURE__ */_jsxs(YStack, {
+      height: 60,
+      items: "center",
+      gap: "$4",
+      children: [/* @__PURE__ */_jsxs(Paragraph, {
+        height: 30,
+        opacity: 0.5,
+        children: ["Progress: ", progress]
+      }), /* @__PURE__ */_jsx(Progress, {
+        theme: "surface2",
+        value: progress,
+        children: /* @__PURE__ */_jsx(Progress.Indicator, {
+          backgroundColor: "$color",
+          transition: ["quicker", {
+            transform: {
+              overshootClamping: !0
+            }
+          }]
+        })
+      }, key)]
+    }), /* @__PURE__ */_jsxs(XStack, {
+      items: "center",
+      gap: "$2",
+      position: "absolute",
+      b: "$3",
+      l: "$4",
+      $xxs: {
+        display: "none"
+      },
+      children: [
+      /* <Slider
+        size="$2"
+        theme="surface2"
+        width={130}
+        value={slider}
+        min={0}
+        max={100}
+        step={1}
+        onValueChange={([val]) => {
+          setProgress(val)
+          setSlider([val])
+        }}
+      >
+        <Slider.Track borderWidth={1} borderColor="$color5">
+          <Slider.TrackActive />
+        </Slider.Track>
+        <Slider.Thumb theme="accent" circular index={0} />
+      </Slider> */
+      /* @__PURE__ */
+      _jsx(Button, {
+        size: "$3",
+        icon: Play,
+        onPress: function () {
+          return setProgress(function (prev) {
+            return (prev + 20) % 100;
+          });
+        }
+      }), /* @__PURE__ */_jsx(Button, {
+        size: "$3",
+        icon: RotateCcw,
+        onPress: function () {
+          setKey(Math.random()), setProgress(0), setSlider([0]);
+        }
+      })]
+    })]
+  });
+}
+export { ProgressDemo };
+//# sourceMappingURL=ProgressDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","React","Button","Paragraph","Progress","XStack","YStack","Play","RotateCcw","ProgressDemo","key","setKey","useState","progress","setProgress","slider","setSlider","children","height","items","gap","opacity","theme","value","Indicator","backgroundColor","transition","transform","overshootClamping","position","b","l","$xxs","display"],"sources":["../../src/ProgressDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAAOA,GAAA,IAAAC,IAAW,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAClB,OAAAC,KAAS,MAAQ;AACjB,SAASC,MAAM,EAAAC,SAAA,EAAAC,QAAiB,EAAAC,MAAA,EAAAC,MAAA;AAQ5B,SAAAC,IAAA,EAAAC,SAEI,kCAFJ;AANG,SAASC,aAAA,EAAe;EAC7B,KAAAC,GAAO,EAAAC,MAAK,IAAMV,KAAI,CAAAW,QAAM,GAAS;IAAC,CAAAC,QAC/B,EAAAC,WAAU,IAAWb,KAAI,CAAAW,QAAM,GAAS;IAAE,CAAAG,MAC1C,EAAAC,SAAQ,IAASf,KAAI,CAAAW,QAAM,EAElC,GAEI;EACE,sBAAAd,KAAC,CAAAE,SAAU;IAA0BiB,QAAA,kBACxBnB,KAAA,CAAAQ,MAAA;MAAAY,MACb;MAEAC,KAAA;MACGC,GAAA,MAAS;MAATH,QAAA,GACC,eAAAnB,KAAgB,CAAAK,SAAA;QAChBe,MAAA,IAAY;QACVG,OAAA;QACAJ,QAAA,GACE,YAAW,EAAAJ,QACT;MACF,EACF,EACF,eAAAjB,IAAA,CAAAQ,QAAA;QAAAkB,KAAA;QAVWC,KAYf,EAAAV,QAAA;QACFI,QAAA,iBAAArB,IAAA,CAAAQ,QAAA,CAAAoB,SAAA;UAEAC,eAAA;UAACC,UAAA,cACO;YACFC,SAAA;cACKC,iBAAA;YACP;UACA;QAsBF;MAAA,GAAAlB,GAAA;IAAC,mBACMZ,KAAA,CAAAO,MAAA;MAAAc,KAAA,EACL,QAAM;MAAAC,GAAA,MACN;MAAsDS,QAAA;MAAAC,CAAA,EACxD;MAAAC,CAAA,EACA;MAAAC,IAAC;QAAAC,OAAA;MAAA;MACMhB,QACL;MAAM;AAEJ;AAEa;AACf;AAAA;AACF;AAAA;AAAA;AACF;AAGN","ignoreList":[]}

package/dist/esm/RadioGroupDemo.mjs

@@ -0,0 +1,50 @@
+import { Label, RadioGroup, Theme, XStack, YStack } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RadioGroupDemo() {
+  return /* @__PURE__ */jsx(Theme, {
+    name: "surface2",
+    children: /* @__PURE__ */jsx(RadioGroup, {
+      "aria-labelledby": "Select one item",
+      defaultValue: "3",
+      name: "form",
+      children: /* @__PURE__ */jsxs(YStack, {
+        width: 300,
+        items: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */jsx(RadioGroupItemWithLabel, {
+          size: "$3",
+          value: "2",
+          label: "Second value"
+        }), /* @__PURE__ */jsx(RadioGroupItemWithLabel, {
+          size: "$4",
+          value: "3",
+          label: "Third value"
+        }), /* @__PURE__ */jsx(RadioGroupItemWithLabel, {
+          size: "$5",
+          value: "4",
+          label: "Fourth value"
+        })]
+      })
+    })
+  });
+}
+function RadioGroupItemWithLabel(props) {
+  const id = `radiogroup-${props.value}`;
+  return /* @__PURE__ */jsxs(XStack, {
+    width: 300,
+    items: "center",
+    gap: "$4",
+    children: [/* @__PURE__ */jsx(RadioGroup.Item, {
+      value: props.value,
+      id,
+      size: props.size,
+      children: /* @__PURE__ */jsx(RadioGroup.Indicator, {})
+    }), /* @__PURE__ */jsx(Label, {
+      size: props.size,
+      htmlFor: id,
+      children: props.label
+    })]
+  });
+}
+export { RadioGroupDemo, RadioGroupItemWithLabel };
+//# sourceMappingURL=RadioGroupDemo.mjs.map

package/dist/esm/RadioGroupDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Label","RadioGroup","Theme","XStack","YStack","jsx","jsxs","RadioGroupDemo","name","children","defaultValue","width","items","gap","RadioGroupItemWithLabel","size","value","label","props","id","Item","Indicator","htmlFor"],"sources":["../../src/RadioGroupDemo.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,KAAA,EAAOC,UAAA,EAAYC,KAAA,EAAOC,MAAA,EAAQC,MAAA,QAAc;AAMjD,SACEC,GAAA,EADFC,IAAA;AAJD,SAASC,eAAA,EAAiB;EAC/B,OACE,eAAAF,GAAA,CAACH,KAAA;IAAMM,IAAA,EAAK;IACVC,QAAA,iBAAAJ,GAAA,CAACJ,UAAA;MAAW,mBAAgB;MAAkBS,YAAA,EAAa;MAAIF,IAAA,EAAK;MAClEC,QAAA,iBAAAH,IAAA,CAACF,MAAA;QAAOO,KAAA,EAAO;QAAKC,KAAA,EAAM;QAASC,GAAA,EAAI;QACrCJ,QAAA,kBAAAJ,GAAA,CAACS,uBAAA;UAAwBC,IAAA,EAAK;UAAKC,KAAA,EAAM;UAAIC,KAAA,EAAM;QAAA,CAAe,GAClE,eAAAZ,GAAA,CAACS,uBAAA;UAAwBC,IAAA,EAAK;UAAKC,KAAA,EAAM;UAAIC,KAAA,EAAM;QAAA,CAAc,GACjE,eAAAZ,GAAA,CAACS,uBAAA;UAAwBC,IAAA,EAAK;UAAKC,KAAA,EAAM;UAAIC,KAAA,EAAM;QAAA,CAAe;MAAA,CACpE;IAAA,CACF;EAAA,CACF;AAEJ;AAEO,SAASH,wBAAwBI,KAAA,EAIrC;EACD,MAAMC,EAAA,GAAK,cAAcD,KAAA,CAAMF,KAAK;EACpC,OACE,eAAAV,IAAA,CAACH,MAAA;IAAOQ,KAAA,EAAO;IAAKC,KAAA,EAAM;IAASC,GAAA,EAAI;IACrCJ,QAAA,kBAAAJ,GAAA,CAACJ,UAAA,CAAWmB,IAAA,EAAX;MAAgBJ,KAAA,EAAOE,KAAA,CAAMF,KAAA;MAAOG,EAAA;MAAQJ,IAAA,EAAMG,KAAA,CAAMH,IAAA;MACvDN,QAAA,iBAAAJ,GAAA,CAACJ,UAAA,CAAWoB,SAAA,EAAX,EAAqB;IAAA,CACxB,GAEA,eAAAhB,GAAA,CAACL,KAAA;MAAMe,IAAA,EAAMG,KAAA,CAAMH,IAAA;MAAMO,OAAA,EAASH,EAAA;MAC/BV,QAAA,EAAAS,KAAA,CAAMD;IAAA,CACT;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/RadioGroupDemo.native.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label, RadioGroup, Theme, XStack, YStack } from "@hanzo/gui";
+function RadioGroupDemo() {
+  return /* @__PURE__ */_jsx(Theme, {
+    name: "surface2",
+    children: /* @__PURE__ */_jsx(RadioGroup, {
+      "aria-labelledby": "Select one item",
+      defaultValue: "3",
+      name: "form",
+      children: /* @__PURE__ */_jsxs(YStack, {
+        width: 300,
+        items: "center",
+        gap: "$2",
+        children: [/* @__PURE__ */_jsx(RadioGroupItemWithLabel, {
+          size: "$3",
+          value: "2",
+          label: "Second value"
+        }), /* @__PURE__ */_jsx(RadioGroupItemWithLabel, {
+          size: "$4",
+          value: "3",
+          label: "Third value"
+        }), /* @__PURE__ */_jsx(RadioGroupItemWithLabel, {
+          size: "$5",
+          value: "4",
+          label: "Fourth value"
+        })]
+      })
+    })
+  });
+}
+function RadioGroupItemWithLabel(props) {
+  var id = `radiogroup-${props.value}`;
+  return /* @__PURE__ */_jsxs(XStack, {
+    width: 300,
+    items: "center",
+    gap: "$4",
+    children: [/* @__PURE__ */_jsx(RadioGroup.Item, {
+      value: props.value,
+      id,
+      size: props.size,
+      children: /* @__PURE__ */_jsx(RadioGroup.Indicator, {})
+    }), /* @__PURE__ */_jsx(Label, {
+      size: props.size,
+      htmlFor: id,
+      children: props.label
+    })]
+  });
+}
+export { RadioGroupDemo, RadioGroupItemWithLabel };
+//# sourceMappingURL=RadioGroupDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Label","RadioGroup","Theme","XStack","YStack","RadioGroupDemo","name","children","defaultValue","width","items","gap","RadioGroupItemWithLabel","size"],"sources":["../../src/RadioGroupDemo.tsx"],"sourcesContent":[null],"mappings":"AACA,SAASA,GAAA,IAAOC,IAAA,EAAAC,IAAA,IAAYC,KAAO,QAAQ,mBAAc;AAMjD,SACEC,KADF,EAAAC,UAAA,EAAAC,KAAA,EAAAC,MAAA,EAAAC,MAAA;AAJD,SAASC,eAAA,EAAiB;EAC/B,OACE,eAAAR,IAAC,CAAAK,KAAA;IAGKI,IAAA;IACAC,QAAA,iBAACV,IAAA,CAAAI,UAAA;MACD,mBAAC;MACHO,YAEJ;MAEJF,IAAA;MAEOC,QAAS,iBAAAR,KAAwB,CAAAK,MAIrC;QACKK,KAAK;QACXC,KACE;QACEC,GAAA;QAIAJ,QAAA,GAGF,eAAAV,IAAA,CAAAe,uBAAA;UAEJC,IAAA","ignoreList":[]}

package/dist/esm/RadioGroupHeadlessDemo.mjs

@@ -0,0 +1,134 @@
+import { useRadioGroup, useRadioGroupItem, useRadioGroupItemIndicator } from "@hanzogui/radio-headless";
+import { RovingFocusGroup } from "@hanzogui/roving-focus";
+import React from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native-web";
+import { isWeb, useTheme } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+const RadioGroupContext = React.createContext({}),
+  RadioGroupItemContext = React.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.mjs.map

package/dist/esm/RadioGroupHeadlessDemo.mjs.map

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

package/dist/esm/RadioGroupHeadlessDemo.native.js

@@ -0,0 +1,141 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRadioGroup, useRadioGroupItem, useRadioGroupItemIndicator } from "@hanzogui/radio-headless";
+import { RovingFocusGroup } from "@hanzogui/roving-focus";
+import React from "react";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { isWeb, useTheme } from "@hanzo/gui";
+var RadioGroupContext = /* @__PURE__ */React.createContext({}),
+  RadioGroupItemContext = /* @__PURE__ */React.createContext({
+    checked: !1,
+    disabled: !1
+  });
+function RadioGroupHeadlessDemo() {
+  var {
+    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) {
+  var _theme_borderColor,
+    _theme_background,
+    _theme_color,
+    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 = 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__ */_jsx(RadioGroupItemIndicator, {})
+        })
+      }), /* @__PURE__ */_jsx(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 = useTheme(),
+    params = useRadioGroupItemIndicator({
+      radioGroupItemContext: RadioGroupItemContext,
+      disabled: !1
+    });
+  if (params.checked) {
+    var _theme_color;
+    return /* @__PURE__ */_jsx(View, {
+      style: {
+        ...styles.radioGroupItemIndicator,
+        backgroundColor: (_theme_color = theme.color) === null || _theme_color === void 0 ? void 0 : _theme_color.get()
+      },
+      ...params
+    });
+  }
+  return 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.native.js.map

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

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

package/dist/esm/RadioGroupUnstyledDemo.mjs

@@ -0,0 +1,118 @@
+import { Label, XStack, YStack, styled } from "@hanzo/gui";
+import { createRadioGroup } from "@hanzogui/radio-group";
+import { jsx, jsxs } from "react/jsx-runtime";
+const RADIO_GROUP_ITEM_NAME = "RadioGroupItem",
+  RadioGroupItemFrame = styled(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 = styled(YStack, {
+    name: RADIO_GROUP_INDICATOR_NAME,
+    width: "53%",
+    height: "53%",
+    rounded: 1e3,
+    bg: "$color"
+  }),
+  RADIO_GROUP_NAME = "RadioGroup",
+  RadioGroupFrame = styled(YStack, {
+    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,
+      items: "center",
+      gap: "$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,
+    items: "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.mjs.map

package/dist/esm/RadioGroupUnstyledDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Label","XStack","YStack","styled","createRadioGroup","jsx","jsxs","RADIO_GROUP_ITEM_NAME","RadioGroupItemFrame","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","Frame","Indicator","Item","RadioGroupUnstyledDemo","defaultValue","children","gap","RadioGroupItemWithLabel","value","label","props","id","htmlFor"],"sources":["../../src/RadioGroupUnstyledDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}