@hanzogui/demos 2.0.0

package/dist/esm/RadioGroupUnstyledDemo.native.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label, XStack, YStack, styled } from "@hanzo/gui";
+import { createRadioGroup } from "@hanzogui/radio-group";
+var 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) {
+  var 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.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Label","XStack","YStack","styled","createRadioGroup","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"],"sources":["../../src/RadioGroupUnstyledDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAOC,IAAA,EAAAC,IAAQ,IAAAC,KAAQ,2BAAc;AAE9C,SAASC,KAAA,EAAAC,MAAA,EAAAC,MAAA,EAAAC,MAAwB;AAmG3B,SACEC,gBADF;AAjGN,IAAAC,qBAAM,mBAAwB;EAAAC,mBAExB,GAAAH,MAAsB,CAAAD,MAAO;IACjCK,IAAA,EAAMF,qBAAA;IACNG,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,GAA2B3B,MAAA,CAAOD,MAAA,EAAQ;IAC9CK,IAAA,EAAMsB,0BAAA;IACNE,KAAA,EAAO;IACPC,MAAA,EAAQ;IACRvB,OAAA,EAAS;IACTC,EAAA,EAAI;EACN,CAAC;EAEKuB,gBAAA,GAAmB;EAEnBC,eAAA,GAAkB/B,MAAA,CAAOD,MAAA,EAAQ;IACrCK,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,GAAapC,gBAAA,CAAiB;IAClCqC,KAAA,EAAOP,eAAA;IACPQ,SAAA,EAAWZ,wBAAA;IACXa,IAAA,EAAMrC;EACR,CAAC;AAEM,SAASsC,uBAAA,EAAyB;EACvC,OACE,eAAA/C,IAAC,CAAA2C,UAAA;IAEG,oCAAC;IACDK,YAAA;IAAsDtC,IAE1D;IAEJuC,QAAA,iBAAA/C,KAAA,CAAAG,MAAA;MAEA6B,KAAS;MACPpB,KAAM,EAAK;MACXoC,GACE;MACED,QAAA,GAIA,eAACjD,IAAA,CAAAmD,uBAAoB;QACvBC,KAAA;QAEJC,KAAA","ignoreList":[]}

package/dist/esm/ReplaceThemeDemo.mjs

@@ -0,0 +1,44 @@
+import React from "react";
+import { addTheme, replaceTheme } from "@hanzogui/theme";
+import { Button, Square, Theme, XStack, YStack, useForceUpdate, useIsomorphicLayoutEffect } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ReplaceThemeDemo() {
+  const [theme, setTheme] = React.useState(),
+    update = useForceUpdate();
+  return useIsomorphicLayoutEffect(() => {
+    addTheme({
+      name: "mytheme",
+      insertCSS: !0,
+      theme: {
+        color: "red",
+        color2: "green"
+      }
+    }), setTheme("mytheme");
+  }, []), /* @__PURE__ */jsxs(YStack, {
+    items: "center",
+    gap: "$4",
+    children: [/* @__PURE__ */jsx(XStack, {
+      gap: "$5",
+      children: /* @__PURE__ */jsx(Theme, {
+        name: theme ?? null,
+        children: /* @__PURE__ */jsx(Square, {
+          rounded: "$8",
+          size: 100,
+          bg: "$color"
+        })
+      })
+    }), /* @__PURE__ */jsx(Button, {
+      onPress: () => {
+        replaceTheme({
+          name: "mytheme",
+          theme: {
+            color: "blue"
+          }
+        }), update();
+      },
+      children: "Replace theme to only have $color: blue"
+    })]
+  });
+}
+export { ReplaceThemeDemo };
+//# sourceMappingURL=ReplaceThemeDemo.mjs.map

package/dist/esm/ReplaceThemeDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","addTheme","replaceTheme","Button","Square","Theme","XStack","YStack","useForceUpdate","useIsomorphicLayoutEffect","jsx","jsxs","ReplaceThemeDemo","theme","setTheme","useState","update","name","insertCSS","color","color2","items","gap","children","rounded","size","bg","onPress"],"sources":["../../src/ReplaceThemeDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,OAAOA,KAAA,MAAW;AAClB,SAASC,QAAA,EAAUC,YAAA,QAAoB;AAEvC,SACEC,MAAA,EACAC,MAAA,EACAC,KAAA,EACAC,MAAA,EACAC,MAAA,EACAC,cAAA,EACAC,yBAAA,QACK;AAmBH,SAGMC,GAAA,EAHNC,IAAA;AAjBG,SAASC,iBAAA,EAAmB;EACjC,MAAM,CAACC,KAAA,EAAOC,QAAQ,IAAId,KAAA,CAAMe,QAAA,CAAc;IACxCC,MAAA,GAASR,cAAA,CAAe;EAE9B,OAAAC,yBAAA,CAA0B,MAAM;IAC9BR,QAAA,CAAS;MACPgB,IAAA,EAAM;MACNC,SAAA,EAAW;MACXL,KAAA,EAAO;QACLM,KAAA,EAAO;QACPC,MAAA,EAAQ;MACV;IACF,CAAC,GACDN,QAAA,CAAS,SAAS;EACpB,GAAG,EAAE,GAGH,eAAAH,IAAA,CAACJ,MAAA;IAAOc,KAAA,EAAM;IAASC,GAAA,EAAI;IACzBC,QAAA,kBAAAb,GAAA,CAACJ,MAAA;MAAOgB,GAAA,EAAI;MACVC,QAAA,iBAAAb,GAAA,CAACL,KAAA;QAAMY,IAAA,EAAMJ,KAAA,IAAS;QACpBU,QAAA,iBAAAb,GAAA,CAACN,MAAA;UAAOoB,OAAA,EAAQ;UAAKC,IAAA,EAAM;UAAKC,EAAA,EAAG;QAAA,CAAS;MAAA,CAC9C;IAAA,CACF,GAEA,eAAAhB,GAAA,CAACP,MAAA;MACCwB,OAAA,EAASA,CAAA,KAAM;QACbzB,YAAA,CAAa;UACXe,IAAA,EAAM;UACNJ,KAAA,EAAO;YACLM,KAAA,EAAO;UACT;QACF,CAAC,GACDH,MAAA,CAAO;MACT;MACDO,QAAA;IAAA,CAED;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/ReplaceThemeDemo.native.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { addTheme, replaceTheme } from "@hanzogui/theme";
+import { Button, Square, Theme, XStack, YStack, useForceUpdate, useIsomorphicLayoutEffect } from "@hanzo/gui";
+function ReplaceThemeDemo() {
+  var [theme, setTheme] = React.useState(),
+    update = useForceUpdate();
+  return useIsomorphicLayoutEffect(function () {
+    addTheme({
+      name: "mytheme",
+      insertCSS: !0,
+      theme: {
+        color: "red",
+        color2: "green"
+      }
+    }), setTheme("mytheme");
+  }, []), /* @__PURE__ */_jsxs(YStack, {
+    items: "center",
+    gap: "$4",
+    children: [/* @__PURE__ */_jsx(XStack, {
+      gap: "$5",
+      children: /* @__PURE__ */_jsx(Theme, {
+        name: theme ?? null,
+        children: /* @__PURE__ */_jsx(Square, {
+          rounded: "$8",
+          size: 100,
+          bg: "$color"
+        })
+      })
+    }), /* @__PURE__ */_jsx(Button, {
+      onPress: function () {
+        replaceTheme({
+          name: "mytheme",
+          theme: {
+            color: "blue"
+          }
+        }), update();
+      },
+      children: "Replace theme to only have $color: blue"
+    })]
+  });
+}
+export { ReplaceThemeDemo };
+//# sourceMappingURL=ReplaceThemeDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","React","addTheme","replaceTheme","Button","Square","Theme","XStack","YStack","useForceUpdate","useIsomorphicLayoutEffect","ReplaceThemeDemo","theme","setTheme","useState","update","name","insertCSS","color","color2","items","gap","children","rounded","size","bg","onPress"],"sources":["../../src/ReplaceThemeDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAAOA,GAAA,IAAAC,IAAW,EAAAC,IAAA,IAAAC,KAAA;AAClB,OAAAC,KAAS,aAAU;AAEnB,SAAAC,QAAA,EAAAC,YAAA;AAAA,SACEC,MAAA,EAAAC,MAAA,EAAAC,KAAA,EAAAC,MAAA,EAAAC,MAAA,EAAAC,cAAA,EAAAC,yBAAA;AAAA,SACAC,iBAAA;EACA,KAAAC,KAAA,EAAAC,QAAA,IAAAZ,KAAA,CAAAa,QAAA;IAAAC,MAAA,GAAAN,cAAA;EACA,OAAAC,yBAAA;IACAR,QAAA;MACAc,IAAA;MACAC,SAAA;MAAAL,KACK;QAmBHM,KAGM,EAHN;QAjBGC,MAAS;MACd;IAGA,IAAAN,QAAA;EACE,uBAASb,KAAA,CAAAQ,MAAA;IAAAY,KACP,UAAM;IAAAC,GACN;IAAWC,QACX,EAAO,gBACExB,IAAA,CAAAS,MAAA;MACPc,GAAA,MAAQ;MACVC,QAAA,iBAAAxB,IAAA,CAAAQ,KAAA;QAEFU,IAAA,EAAAJ,KAAS,QAAS;QAIlBU,QAAA,iBAACxB,IAAA,CAAOO,MAAA,EAAM;UACZkB,OAAA,MAAC;UAMDC,IAAA;UAACC,EAAA;QAAA;MACC;IACE,IAAa,eACL3B,IAAA,CAAAM,MAAA;MAAAsB,OACN,WAAAA,CAAA,EAAO;QAAAvB,YACE;UACTa,IAAA;UACDJ,KACD;YACFM,KAAA;UACD;QAAA,IAAAH,MAAA;MAED;MACFO,QAAA;IAEJ","ignoreList":[]}

package/dist/esm/ScrollViewDemo.mjs

@@ -0,0 +1,51 @@
+import { Circle, ScrollView, Square, XStack } from "@hanzo/gui";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ScrollViewDemo() {
+  return /* @__PURE__ */jsx(ScrollView, {
+    maxH: 250,
+    width: "75%",
+    bg: "$background",
+    p: "$4",
+    rounded: "$4",
+    children: /* @__PURE__ */jsxs(XStack, {
+      flexWrap: "wrap",
+      items: "center",
+      justify: "center",
+      children: [/* @__PURE__ */jsx(Square, {
+        m: "$4",
+        size: 120,
+        bg: "$color5"
+      }), /* @__PURE__ */jsx(Circle, {
+        m: "$4",
+        size: 120,
+        bg: "$color6"
+      }), /* @__PURE__ */jsx(Square, {
+        m: "$4",
+        size: 120,
+        bg: "$color7"
+      }), /* @__PURE__ */jsx(Circle, {
+        m: "$4",
+        size: 120,
+        bg: "$color8"
+      }), /* @__PURE__ */jsx(Square, {
+        m: "$4",
+        size: 120,
+        bg: "$color9"
+      }), /* @__PURE__ */jsx(Circle, {
+        m: "$4",
+        size: 120,
+        bg: "$color10"
+      }), /* @__PURE__ */jsx(Square, {
+        m: "$4",
+        size: 120,
+        bg: "$color11"
+      }), /* @__PURE__ */jsx(Circle, {
+        m: "$4",
+        size: 120,
+        bg: "$color12"
+      })]
+    })
+  });
+}
+export { ScrollViewDemo };
+//# sourceMappingURL=ScrollViewDemo.mjs.map

package/dist/esm/ScrollViewDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Circle","ScrollView","Square","XStack","jsx","jsxs","ScrollViewDemo","maxH","width","bg","p","rounded","children","flexWrap","items","justify","m","size"],"sources":["../../src/ScrollViewDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,MAAA,EAAQC,UAAA,EAAYC,MAAA,EAAQC,MAAA,QAAc;AAK7C,SACEC,GAAA,EADFC,IAAA;AAHC,SAASC,eAAA,EAAiB;EAC/B,OACE,eAAAF,GAAA,CAACH,UAAA;IAAWM,IAAA,EAAM;IAAKC,KAAA,EAAM;IAAMC,EAAA,EAAG;IAAcC,CAAA,EAAE;IAAKC,OAAA,EAAQ;IACjEC,QAAA,iBAAAP,IAAA,CAACF,MAAA;MAAOU,QAAA,EAAS;MAAOC,KAAA,EAAM;MAASC,OAAA,EAAQ;MAC7CH,QAAA,kBAAAR,GAAA,CAACF,MAAA;QAAOc,CAAA,EAAE;QAAKC,IAAA,EAAM;QAAKR,EAAA,EAAG;MAAA,CAAU,GACvC,eAAAL,GAAA,CAACJ,MAAA;QAAOgB,CAAA,EAAE;QAAKC,IAAA,EAAM;QAAKR,EAAA,EAAG;MAAA,CAAU,GACvC,eAAAL,GAAA,CAACF,MAAA;QAAOc,CAAA,EAAE;QAAKC,IAAA,EAAM;QAAKR,EAAA,EAAG;MAAA,CAAU,GACvC,eAAAL,GAAA,CAACJ,MAAA;QAAOgB,CAAA,EAAE;QAAKC,IAAA,EAAM;QAAKR,EAAA,EAAG;MAAA,CAAU,GACvC,eAAAL,GAAA,CAACF,MAAA;QAAOc,CAAA,EAAE;QAAKC,IAAA,EAAM;QAAKR,EAAA,EAAG;MAAA,CAAU,GACvC,eAAAL,GAAA,CAACJ,MAAA;QAAOgB,CAAA,EAAE;QAAKC,IAAA,EAAM;QAAKR,EAAA,EAAG;MAAA,CAAW,GACxC,eAAAL,GAAA,CAACF,MAAA;QAAOc,CAAA,EAAE;QAAKC,IAAA,EAAM;QAAKR,EAAA,EAAG;MAAA,CAAW,GACxC,eAAAL,GAAA,CAACJ,MAAA;QAAOgB,CAAA,EAAE;QAAKC,IAAA,EAAM;QAAKR,EAAA,EAAG;MAAA,CAAW;IAAA,CAC1C;EAAA,CACF;AAEJ","ignoreList":[]}

package/dist/esm/ScrollViewDemo.native.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Circle, ScrollView, Square, XStack } from "@hanzo/gui";
+function ScrollViewDemo() {
+  return /* @__PURE__ */_jsx(ScrollView, {
+    maxH: 250,
+    width: "75%",
+    bg: "$background",
+    p: "$4",
+    rounded: "$4",
+    children: /* @__PURE__ */_jsxs(XStack, {
+      flexWrap: "wrap",
+      items: "center",
+      justify: "center",
+      children: [/* @__PURE__ */_jsx(Square, {
+        m: "$4",
+        size: 120,
+        bg: "$color5"
+      }), /* @__PURE__ */_jsx(Circle, {
+        m: "$4",
+        size: 120,
+        bg: "$color6"
+      }), /* @__PURE__ */_jsx(Square, {
+        m: "$4",
+        size: 120,
+        bg: "$color7"
+      }), /* @__PURE__ */_jsx(Circle, {
+        m: "$4",
+        size: 120,
+        bg: "$color8"
+      }), /* @__PURE__ */_jsx(Square, {
+        m: "$4",
+        size: 120,
+        bg: "$color9"
+      }), /* @__PURE__ */_jsx(Circle, {
+        m: "$4",
+        size: 120,
+        bg: "$color10"
+      }), /* @__PURE__ */_jsx(Square, {
+        m: "$4",
+        size: 120,
+        bg: "$color11"
+      }), /* @__PURE__ */_jsx(Circle, {
+        m: "$4",
+        size: 120,
+        bg: "$color12"
+      })]
+    })
+  });
+}
+export { ScrollViewDemo };
+//# sourceMappingURL=ScrollViewDemo.native.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","jsxs","_jsxs","Circle","ScrollView","Square","XStack","ScrollViewDemo","maxH","width","bg","p","rounded","children","flexWrap","items","justify"],"sources":["../../src/ScrollViewDemo.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAQ,EAAAC,IAAA,IAAYC,KAAA,QAAQ,mBAAc;AAK7C,SACEC,MADF,EAAAC,UAAA,EAAAC,MAAA,EAAAC,MAAA;AAHC,SAASC,eAAA,EAAiB;EAC/B,OACE,eAAAP,IAAC,CAAAI,UAAA;IAEGI,IAAA;IACAC,KAAA;IACAC,EAAA;IACAC,CAAA;IACAC,OAAA;IACAC,QAAA,iBAACX,KAAO,CAAAI,MAAE,EAAK;MACfQ,QAAA;MACAC,KAAA;MACFC,OACF;MAEJH,QAAA,G","ignoreList":[]}

package/dist/esm/SelectDemo.mjs

@@ -0,0 +1,201 @@
+import { Check, ChevronDown, ChevronUp } from "@hanzogui/lucide-icons-2";
+import React from "react";
+import { Adapt, Label, Select, Sheet, Theme, XStack, YStack, getFontSize } from "@hanzo/gui";
+import { LinearGradient } from "gui/linear-gradient";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SelectDemo() {
+  return /* @__PURE__ */jsx(Theme, {
+    name: "surface1",
+    children: /* @__PURE__ */jsxs(YStack, {
+      gap: "$4",
+      children: [/* @__PURE__ */jsxs(XStack, {
+        width: "100%",
+        items: "center",
+        gap: "$4",
+        children: [/* @__PURE__ */jsx(Label, {
+          htmlFor: "select-demo-1",
+          flex: 1,
+          minW: 80,
+          children: "Custom"
+        }), /* @__PURE__ */jsx(SelectDemoContents, {
+          id: "select-demo-1"
+        })]
+      }), /* @__PURE__ */jsxs(XStack, {
+        width: "100%",
+        items: "center",
+        gap: "$4",
+        children: [/* @__PURE__ */jsx(Label, {
+          htmlFor: "select-demo-2",
+          flex: 1,
+          minW: 80,
+          children: "Native"
+        }), /* @__PURE__ */jsx(SelectDemoContents, {
+          id: "select-demo-2",
+          native: !0
+        })]
+      })]
+    })
+  });
+}
+const getItemLabel = value => items.find(item => item.name.toLowerCase() === value)?.name;
+function SelectDemoContents(props) {
+  const [val, setVal] = React.useState("apple");
+  return /* @__PURE__ */jsxs(Select, {
+    value: val,
+    onValueChange: setVal,
+    disablePreventBodyScroll: !0,
+    ...props,
+    renderValue: getItemLabel,
+    children: [props?.trigger || /* @__PURE__ */jsx(Select.Trigger, {
+      maxWidth: 220,
+      iconAfter: ChevronDown,
+      borderRadius: "$4",
+      backgroundColor: "$background",
+      children: /* @__PURE__ */jsx(Select.Value, {
+        placeholder: "Something"
+      })
+    }), /* @__PURE__ */jsx(Adapt, {
+      when: "maxMd",
+      platform: "touch",
+      children: /* @__PURE__ */jsxs(Sheet, {
+        native: !!props.native,
+        modal: !0,
+        dismissOnSnapToBottom: !0,
+        transition: "medium",
+        children: [/* @__PURE__ */jsx(Sheet.Frame, {
+          children: /* @__PURE__ */jsx(Sheet.ScrollView, {
+            children: /* @__PURE__ */jsx(Adapt.Contents, {})
+          })
+        }), /* @__PURE__ */jsx(Sheet.Overlay, {
+          bg: "$shadowColor",
+          transition: "lazy",
+          enterStyle: {
+            opacity: 0
+          },
+          exitStyle: {
+            opacity: 0
+          }
+        })]
+      })
+    }), /* @__PURE__ */jsxs(Select.Content, {
+      children: [/* @__PURE__ */jsxs(Select.ScrollUpButton, {
+        items: "center",
+        justify: "center",
+        position: "relative",
+        width: "100%",
+        height: "$3",
+        children: [/* @__PURE__ */jsx(YStack, {
+          z: 10,
+          children: /* @__PURE__ */jsx(ChevronUp, {
+            size: 20
+          })
+        }), /* @__PURE__ */jsx(LinearGradient, {
+          start: [0, 0],
+          end: [0, 1],
+          fullscreen: !0,
+          colors: ["$background", "transparent"],
+          rounded: "$4"
+        })]
+      }), /* @__PURE__ */jsxs(Select.Viewport, {
+        minW: 200,
+        bg: "$background",
+        rounded: "$4",
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        children: [/* @__PURE__ */jsxs(Select.Group, {
+          children: [/* @__PURE__ */jsx(Select.Label, {
+            fontWeight: "700",
+            children: "Fruits"
+          }), React.useMemo(() => items.map((item, i) => /* @__PURE__ */jsxs(Select.Item, {
+            index: i,
+            value: item.name.toLowerCase(),
+            children: [/* @__PURE__ */jsx(Select.ItemText, {
+              children: item.name
+            }), /* @__PURE__ */jsx(Select.ItemIndicator, {
+              marginLeft: "auto",
+              children: /* @__PURE__ */jsx(Check, {
+                size: 16
+              })
+            })]
+          }, item.name)), [items])]
+        }), props.native && /* @__PURE__ */jsx(YStack, {
+          position: "absolute",
+          r: 0,
+          t: 16,
+          items: "center",
+          justify: "center",
+          width: "$4",
+          pointerEvents: "none",
+          children: /* @__PURE__ */jsx(ChevronDown, {
+            size: getFontSize(props.size ?? "$true")
+          })
+        })]
+      }), /* @__PURE__ */jsxs(Select.ScrollDownButton, {
+        items: "center",
+        justify: "center",
+        position: "relative",
+        width: "100%",
+        height: "$3",
+        children: [/* @__PURE__ */jsx(YStack, {
+          z: 10,
+          children: /* @__PURE__ */jsx(ChevronDown, {
+            size: 20
+          })
+        }), /* @__PURE__ */jsx(LinearGradient, {
+          start: [0, 0],
+          end: [0, 1],
+          fullscreen: !0,
+          colors: ["transparent", "$background"],
+          rounded: "$4"
+        })]
+      })]
+    })]
+  });
+}
+const items = [{
+  name: "Apple"
+}, {
+  name: "Pear"
+}, {
+  name: "Blackberry"
+}, {
+  name: "Peach"
+}, {
+  name: "Apricot"
+}, {
+  name: "Melon"
+}, {
+  name: "Honeydew"
+}, {
+  name: "Starfruit"
+}, {
+  name: "Blueberry"
+}, {
+  name: "Raspberry"
+}, {
+  name: "Strawberry"
+}, {
+  name: "Mango"
+}, {
+  name: "Pineapple"
+}, {
+  name: "Lime"
+}, {
+  name: "Lemon"
+}, {
+  name: "Coconut"
+}, {
+  name: "Guava"
+}, {
+  name: "Papaya"
+}, {
+  name: "Orange"
+}, {
+  name: "Grape"
+}, {
+  name: "Jackfruit"
+}, {
+  name: "Durian"
+}];
+export { SelectDemo, SelectDemoContents };
+//# sourceMappingURL=SelectDemo.mjs.map

package/dist/esm/SelectDemo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["Check","ChevronDown","ChevronUp","React","Adapt","Label","Select","Sheet","Theme","XStack","YStack","getFontSize","LinearGradient","jsx","jsxs","SelectDemo","name","children","gap","width","items","htmlFor","flex","minW","SelectDemoContents","id","native","getItemLabel","value","find","item","toLowerCase","props","val","setVal","useState","onValueChange","disablePreventBodyScroll","renderValue","trigger","Trigger","maxWidth","iconAfter","borderRadius","backgroundColor","Value","placeholder","when","platform","modal","dismissOnSnapToBottom","transition","Frame","ScrollView","Contents","Overlay","bg","enterStyle","opacity","exitStyle","Content","ScrollUpButton","justify","position","height","z","size","start","end","fullscreen","colors","rounded","Viewport","borderWidth","borderColor","Group","fontWeight","useMemo","map","i","Item","index","ItemText","ItemIndicator","marginLeft","r","t","pointerEvents","ScrollDownButton"],"sources":["../../src/SelectDemo.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}