@hanzogui/demos 8.3.0 → 8.3.3

package/dist/esm/DialogDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogDemo.js","sourceRoot":"","sources":["../../src/DialogDemo.tsx"],"names":[],"mappings":"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"}

package/dist/esm/FormsDemo.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Button, Form, Spinner, AnimatePresence, YStack, } from '@hanzo/gui';
+export function FormsDemo(props) {
+    const [status, setStatus] = React.useState('off');
+    React.useEffect(() => {
+        if (status === 'submitting') {
+            const timer = setTimeout(() => setStatus('off'), 2000);
+            return () => {
+                clearTimeout(timer);
+            };
+        }
+    }, [status]);
+    return (_jsx(Form, { items: "center", gap: "$2", onSubmit: () => setStatus('submitting'), borderWidth: 1, rounded: "$4", bg: "$color2", borderColor: "$borderColor", minW: 350, p: "$6", children: _jsx(Form.Trigger, { asChild: true, disabled: status !== 'off', children: _jsxs(YStack, { gap: "$4", children: [_jsx(Button, { children: "Submit" }), _jsx(YStack, { width: "100%", height: 40, justifyContent: "center", alignItems: "center", children: _jsx(AnimatePresence, { children: status === 'submitting' ? (_jsx(Spinner, { transition: "medium", enterStyle: { opacity: 0 }, alignSelf: "center", width: 8 }, "spinner")) : null }) })] }) }) }));
+}
+//# sourceMappingURL=FormsDemo.js.map

package/dist/esm/FormsDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormsDemo.js","sourceRoot":"","sources":["../../src/FormsDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EACL,MAAM,EACN,IAAI,EAEJ,OAAO,EACP,eAAe,EAKf,MAAM,GACP,MAAM,YAAY,CAAA;AAEnB,MAAM,UAAU,SAAS,CAAC,KAA2B;IACnD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAqC,KAAK,CAAC,CAAA;IAErF,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,MAAM,KAAK,YAAY,EAAE,CAAC;YAC5B,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAA;YACtD,OAAO,GAAG,EAAE;gBACV,YAAY,CAAC,KAAK,CAAC,CAAA;YACrB,CAAC,CAAA;QACH,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,OAAO,CACL,KAAC,IAAI,IACH,KAAK,EAAC,QAAQ,EACd,GAAG,EAAC,IAAI,EACR,QAAQ,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,YAAY,CAAC,EACvC,WAAW,EAAE,CAAC,EACd,OAAO,EAAC,IAAI,EACZ,EAAE,EAAC,SAAS,EACZ,WAAW,EAAC,cAAc,EAC1B,IAAI,EAAE,GAAG,EACT,CAAC,EAAC,IAAI,YAEN,KAAC,IAAI,CAAC,OAAO,IAAC,OAAO,QAAC,QAAQ,EAAE,MAAM,KAAK,KAAK,YAC9C,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,aACd,KAAC,MAAM,yBAAgB,EACvB,KAAC,MAAM,IAAC,KAAK,EAAC,MAAM,EAAC,MAAM,EAAE,EAAE,EAAE,cAAc,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,YAC1E,KAAC,eAAe,cACb,MAAM,KAAK,YAAY,CAAC,CAAC,CAAC,CACzB,KAAC,OAAO,IACN,UAAU,EAAC,QAAQ,EACnB,UAAU,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAC1B,SAAS,EAAC,QAAQ,EAElB,KAAK,EAAE,CAAC,IADJ,SAAS,CAEb,CACH,CAAC,CAAC,CAAC,IAAI,GACQ,GACX,IACF,GACI,GACV,CACR,CAAA;AACH,CAAC"}

package/dist/esm/GroupDemo.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Activity, Airplay } from '@hanzogui/lucide-icons-2';
+import { Button, Group, ListItem, Separator, XGroup, YGroup, YStack } from '@hanzo/gui';
+export function GroupDemo() {
+    return (_jsxs(YStack, { p: "$3", gap: "$2", items: "center", children: [_jsxs(Group, { orientation: "horizontal", children: [_jsx(Group.Item, { children: _jsx(Button, { children: "First" }) }), _jsx(Group.Item, { children: _jsx(Button, { children: "Second" }) }), _jsx(Group.Item, { children: _jsx(Button, { children: "Third" }) })] }), _jsxs(XGroup, { children: [_jsx(XGroup.Item, { children: _jsx(Button, { size: "$3", $gtSm: { size: '$5' }, icon: Activity, children: "First" }) }), _jsx(XGroup.Item, { children: _jsx(Button, { size: "$3", $gtSm: { size: '$5' }, icon: Airplay, children: "Second" }) })] }), _jsxs(YGroup, { children: [_jsx(YGroup.Item, { children: _jsx(ListItem, { borderRadius: "$6", theme: "surface1", title: "First" }) }), _jsx(Separator, {}), _jsx(YGroup.Item, { children: _jsx(ListItem, { borderRadius: "$6", theme: "surface1", title: "Second", subTitle: "Second subtitle" }) }), _jsx(Separator, {}), _jsx(YGroup.Item, { children: _jsx(ListItem, { borderRadius: "$6", theme: "surface1", children: "Third" }) })] })] }));
+}
+//# sourceMappingURL=GroupDemo.js.map

package/dist/esm/GroupDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupDemo.js","sourceRoot":"","sources":["../../src/GroupDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEvF,MAAM,UAAU,SAAS;IACvB,OAAO,CACL,MAAC,MAAM,IAAC,CAAC,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,aACpC,MAAC,KAAK,IAAC,WAAW,EAAC,YAAY,aAC7B,KAAC,KAAK,CAAC,IAAI,cACT,KAAC,MAAM,wBAAe,GACX,EACb,KAAC,KAAK,CAAC,IAAI,cACT,KAAC,MAAM,yBAAgB,GACZ,EACb,KAAC,KAAK,CAAC,IAAI,cACT,KAAC,MAAM,wBAAe,GACX,IACP,EAGR,MAAC,MAAM,eACL,KAAC,MAAM,CAAC,IAAI,cACV,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,sBAE9C,GACG,EACd,KAAC,MAAM,CAAC,IAAI,cACV,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,uBAE7C,GACG,IACP,EAGT,MAAC,MAAM,eACL,KAAC,MAAM,CAAC,IAAI,cACV,KAAC,QAAQ,IAAC,YAAY,EAAC,IAAI,EAAC,KAAK,EAAC,UAAU,EAAC,KAAK,EAAC,OAAO,GAAG,GACjD,EACd,KAAC,SAAS,KAAG,EACb,KAAC,MAAM,CAAC,IAAI,cACV,KAAC,QAAQ,IACP,YAAY,EAAC,IAAI,EACjB,KAAK,EAAC,UAAU,EAChB,KAAK,EAAC,QAAQ,EACd,QAAQ,EAAC,iBAAiB,GAC1B,GACU,EACd,KAAC,SAAS,KAAG,EACb,KAAC,MAAM,CAAC,IAAI,cACV,KAAC,QAAQ,IAAC,YAAY,EAAC,IAAI,EAAC,KAAK,EAAC,UAAU,sBAEjC,GACC,IACP,IACF,CACV,CAAA;AACH,CAAC"}

package/dist/esm/HeadingsDemo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { H1, H2, H3, H4, H5, H6, YStack } from '@hanzo/gui';
+export function HeadingsDemo() {
+    return (_jsxs(YStack, { self: "center", children: [_jsx(H1, { children: "Heading 1" }), _jsx(H2, { children: "Heading 2" }), _jsx(H3, { children: "Heading 3" }), _jsx(H4, { children: "Heading 4" }), _jsx(H5, { children: "Heading 5" }), _jsx(H6, { children: "Heading 6" })] }));
+}
+//# sourceMappingURL=HeadingsDemo.js.map

package/dist/esm/HeadingsDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeadingsDemo.js","sourceRoot":"","sources":["../../src/HeadingsDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAE3D,MAAM,UAAU,YAAY;IAC1B,OAAO,CACL,MAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,aACnB,KAAC,EAAE,4BAAe,EAClB,KAAC,EAAE,4BAAe,EAClB,KAAC,EAAE,4BAAe,EAClB,KAAC,EAAE,4BAAe,EAClB,KAAC,EAAE,4BAAe,EAClB,KAAC,EAAE,4BAAe,IACX,CACV,CAAA;AACH,CAAC"}

package/dist/esm/ImageDemo.js

@@ -0,0 +1,6 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Image } from '@hanzogui/image';
+export function ImageDemo() {
+    return (_jsx(_Fragment, { children: _jsx(Image, { src: "https://picsum.photos/200/300", width: 200, height: 300, onLoad: () => { }, onLayout: (e) => { } }) }));
+}
+//# sourceMappingURL=ImageDemo.js.map

package/dist/esm/ImageDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageDemo.js","sourceRoot":"","sources":["../../src/ImageDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,MAAM,UAAU,SAAS;IACvB,OAAO,CACL,4BACE,KAAC,KAAK,IACJ,GAAG,EAAC,+BAA+B,EACnC,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,MAAM,EAAE,GAAG,EAAE,GAAE,CAAC,EAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,GAAE,CAAC,GACnB,GACD,CACJ,CAAA;AACH,CAAC"}

package/dist/esm/InputsDemo.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Input, TextArea, XStack, YStack } from '@hanzo/gui';
+export function InputsDemo() {
+    return (_jsxs(YStack, { width: 200, minH: 250, overflow: "hidden", gap: "$2", m: "$3", p: "$2", children: [_jsx(InputDemo, { size: "$2" }), _jsx(InputDemo, { size: "$3" }), _jsx(InputDemo, { size: "$4" }), _jsx(TextArea, { theme: "surface1", placeholder: "Enter your details..." })] }));
+}
+function InputDemo(props) {
+    return (_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Input, { theme: "surface1", flex: 1, size: props.size, placeholder: `Size ${props.size}...` }), _jsx(Button, { size: props.size, children: "Go" })] }));
+}
+//# sourceMappingURL=InputsDemo.js.map

package/dist/esm/InputsDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputsDemo.js","sourceRoot":"","sources":["../../src/InputsDemo.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEpE,MAAM,UAAU,UAAU;IACxB,OAAO,CACL,MAAC,MAAM,IAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,aACrE,KAAC,SAAS,IAAC,IAAI,EAAC,IAAI,GAAG,EACvB,KAAC,SAAS,IAAC,IAAI,EAAC,IAAI,GAAG,EACvB,KAAC,SAAS,IAAC,IAAI,EAAC,IAAI,GAAG,EACvB,KAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,EAAC,WAAW,EAAC,uBAAuB,GAAG,IAC1D,CACV,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,KAA2B;IAC5C,OAAO,CACL,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC7B,KAAC,KAAK,IACJ,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,WAAW,EAAE,QAAQ,KAAK,CAAC,IAAI,KAAK,GACpC,EACF,KAAC,MAAM,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,mBAAa,IAC9B,CACV,CAAA;AACH,CAAC"}

package/dist/esm/LabelDemo.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Input, Label, Switch, XStack, YStack } from '@hanzo/gui';
+export function LabelDemo() {
+    return (_jsxs(YStack, { $maxMd: { width: '100%' }, minW: 300, gap: "$4", children: [_jsxs(XStack, { items: "center", gap: "$4", children: [_jsx(Label, { width: 90, htmlFor: "name", children: "Name" }), _jsx(Input, { flex: 1, id: "name", defaultValue: "Nate Wienert" })] }), _jsxs(XStack, { items: "center", gap: "$4", children: [_jsx(Label, { width: 90, htmlFor: "notify", children: "Notifications" }), _jsx(Switch, { activeStyle: {
+                            backgroundColor: '$color8',
+                        }, id: "notify", children: _jsx(Switch.Thumb, { transition: "quickest" }) })] })] }));
+}
+//# sourceMappingURL=LabelDemo.js.map

package/dist/esm/LabelDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelDemo.js","sourceRoot":"","sources":["../../src/LabelDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEjE,MAAM,UAAU,SAAS;IACvB,OAAO,CACL,MAAC,MAAM,IAAC,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,GAAG,EAAC,IAAI,aACpD,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC7B,KAAC,KAAK,IAAC,KAAK,EAAE,EAAE,EAAE,OAAO,EAAC,MAAM,qBAExB,EACR,KAAC,KAAK,IAAC,IAAI,EAAE,CAAC,EAAE,EAAE,EAAC,MAAM,EAAC,YAAY,EAAC,cAAc,GAAG,IACjD,EAET,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC7B,KAAC,KAAK,IAAC,KAAK,EAAE,EAAE,EAAE,OAAO,EAAC,QAAQ,8BAE1B,EACR,KAAC,MAAM,IACL,WAAW,EAAE;4BACX,eAAe,EAAE,SAAS;yBAC3B,EACD,EAAE,EAAC,QAAQ,YAEX,KAAC,MAAM,CAAC,KAAK,IAAC,UAAU,EAAC,UAAU,GAAG,GAC/B,IACF,IACF,CACV,CAAA;AACH,CAAC"}

package/dist/esm/LinearGradientDemo.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XStack } from '@hanzo/gui';
+import { LinearGradient } from '@hanzogui/linear-gradient';
+export function LinearGradientDemo() {
+    return (_jsxs(XStack, { gap: "$4", children: [_jsx(LinearGradient, { width: "$6", height: "$6", rounded: "$4", colors: ['$red10', '$yellow10'], start: [0, 1], end: [0, 0] }), _jsx(LinearGradient, { width: "$6", height: "$6", rounded: "$4", colors: ['$background', '$color'], start: [1, 1], end: [0, 0] })] }));
+}
+//# sourceMappingURL=LinearGradientDemo.js.map

package/dist/esm/LinearGradientDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinearGradientDemo.js","sourceRoot":"","sources":["../../src/LinearGradientDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE1D,MAAM,UAAU,kBAAkB;IAChC,OAAO,CACL,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,aAEd,KAAC,cAAc,IACb,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,IAAI,EACZ,MAAM,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,EAC/B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EACb,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,GACX,EAGF,KAAC,cAAc,IACb,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,IAAI,EACZ,MAAM,EAAE,CAAC,aAAa,EAAE,QAAQ,CAAC,EACjC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EACb,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,GACX,IACK,CACV,CAAA;AACH,CAAC"}

package/dist/esm/ListItemDemo.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight, Cloud, Moon, Star, Sun } from '@hanzogui/lucide-icons-2';
+import { ListItem, Separator, Theme, XStack, YGroup } from '@hanzo/gui';
+export function ListItemDemo() {
+    return (_jsx(Theme, { name: "surface1", children: _jsxs(XStack, { $maxMd: { flexDirection: 'column' }, px: "$4", gap: "$4", children: [_jsx(ListItemDemo1, {}), _jsx(ListItemDemo2, {})] }) }));
+}
+function ListItemDemo1() {
+    return (_jsxs(YGroup, { self: "center", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", overflow: "hidden", width: 240, size: "$4", children: [_jsx(YGroup.Item, { children: _jsx(ListItem, { gap: "$3", icon: Star, title: "Star", subTitle: _jsx(ListItem.Subtitle, { children: "Twinkles" }), iconAfter: ChevronRight }) }), _jsx(YGroup.Item, { children: _jsx(ListItem, { gap: "$3", icon: Moon, children: "Moon" }) }), _jsx(YGroup.Item, { children: _jsx(ListItem, { gap: "$3", icon: Sun, children: "Sun" }) }), _jsx(YGroup.Item, { children: _jsx(ListItem, { gap: "$3", icon: Cloud, children: "Cloud" }) })] }));
+}
+function ListItemDemo2() {
+    return (_jsxs(YGroup, { self: "center", borderWidth: 1, borderColor: "$borderColor", rounded: "$4", overflow: "hidden", width: 240, size: "$5", children: [_jsx(YGroup.Item, { children: _jsx(ListItem, { gap: "$3", title: "Star", subTitle: "Subtitle", icon: Star, iconAfter: ChevronRight }) }), _jsx(Separator, {}), _jsx(YGroup.Item, { children: _jsx(ListItem, { gap: "$3", title: "Moon", subTitle: "Subtitle", icon: Moon, iconAfter: ChevronRight }) })] }));
+}
+//# sourceMappingURL=ListItemDemo.js.map

package/dist/esm/ListItemDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemDemo.js","sourceRoot":"","sources":["../../src/ListItemDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAA;AAC/E,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEvE,MAAM,UAAU,YAAY;IAC1B,OAAO,CACL,KAAC,KAAK,IAAC,IAAI,EAAC,UAAU,YACpB,MAAC,MAAM,IAAC,MAAM,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,aAC3D,KAAC,aAAa,KAAG,EACjB,KAAC,aAAa,KAAG,IACV,GACH,CACT,CAAA;AACH,CAAC;AAED,SAAS,aAAa;IACpB,OAAO,CACL,MAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,OAAO,EAAC,IAAI,EACZ,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAE,GAAG,EACV,IAAI,EAAC,IAAI,aAET,KAAC,MAAM,CAAC,IAAI,cACV,KAAC,QAAQ,IACP,GAAG,EAAC,IAAI,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAE,KAAC,QAAQ,CAAC,QAAQ,2BAA6B,EACzD,SAAS,EAAE,YAAY,GACvB,GACU,EACd,KAAC,MAAM,CAAC,IAAI,cACV,KAAC,QAAQ,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAE,IAAI,qBAElB,GACC,EACd,KAAC,MAAM,CAAC,IAAI,cACV,KAAC,QAAQ,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAE,GAAG,oBAEjB,GACC,EACd,KAAC,MAAM,CAAC,IAAI,cACV,KAAC,QAAQ,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAE,KAAK,sBAEnB,GACC,IACP,CACV,CAAA;AACH,CAAC;AAED,SAAS,aAAa;IACpB,OAAO,CACL,MAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,OAAO,EAAC,IAAI,EACZ,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAE,GAAG,EACV,IAAI,EAAC,IAAI,aAET,KAAC,MAAM,CAAC,IAAI,cACV,KAAC,QAAQ,IACP,GAAG,EAAC,IAAI,EACR,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAC,UAAU,EACnB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,YAAY,GACvB,GACU,EACd,KAAC,SAAS,KAAG,EACb,KAAC,MAAM,CAAC,IAAI,cACV,KAAC,QAAQ,IACP,GAAG,EAAC,IAAI,EACR,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAC,UAAU,EACnB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,YAAY,GACvB,GACU,IACP,CACV,CAAA;AACH,CAAC"}

package/dist/esm/LucideIconsDemo.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import * as LucideIcons from '@hanzogui/lucide-icons-2';
+import { ScrollView } from 'react-native';
+import { Input, Paragraph, Spacer, View, YStack, useDebounceValue } from '@hanzo/gui';
+const lucideIcons = Object.keys(
+// vite tree shaking workaround
+typeof LucideIcons !== 'undefined' ? LucideIcons : {}).map((name) => ({
+    key: name.toLowerCase(),
+    name,
+    Icon: LucideIcons[name],
+}));
+export function LucideIconsDemo() {
+    const [searchRaw, setSearch] = React.useState('');
+    const search = useDebounceValue(searchRaw, 400);
+    const size = 100;
+    const iconsMemo = React.useMemo(() => lucideIcons
+        .filter((x) => x.key.includes(search.toLowerCase()))
+        .map(({ Icon, name }) => (_jsxs(YStack, { height: size + 20, items: "center", justify: "center", children: [_jsx(Icon, { size: size * 0.25 }), _jsx(Spacer, {}), _jsx(Paragraph, { height: "$6", wordWrap: "break-word", maxW: "100%", text: "center", px: "$2", size: "$1", opacity: 0.5, children: name })] }, name))), [search]);
+    return (_jsxs(YStack, { minW: "100%", p: "$4", pb: "$0", gap: "$4", children: [_jsx(Input, { value: searchRaw, onChangeText: setSearch, placeholder: "Search..." }), _jsx(YStack, { height: 420, children: _jsx(ScrollView, { children: _jsx(View, { display: "grid", gridTemplateColumns: `repeat(auto-fit, minmax(min(${size}px, 100%), 1fr))`, flexDirection: "row", flexWrap: "wrap", justify: "center", items: "center", children: iconsMemo }) }) })] }));
+}
+//# sourceMappingURL=LucideIconsDemo.js.map

package/dist/esm/LucideIconsDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LucideIconsDemo.js","sourceRoot":"","sources":["../../src/LucideIconsDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,WAAW,MAAM,0BAA0B,CAAA;AAEvD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAErF,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI;AAC7B,+BAA+B;AAC/B,OAAO,WAAW,KAAK,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CACtD,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;IACf,GAAG,EAAE,IAAI,CAAC,WAAW,EAAE;IACvB,IAAI;IACJ,IAAI,EAAE,WAAW,CAAC,IAAI,CAAC;CACxB,CAAC,CAAC,CAAA;AAEH,MAAM,UAAU,eAAe;IAC7B,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;IACjD,MAAM,MAAM,GAAG,gBAAgB,CAAC,SAAS,EAAE,GAAG,CAAC,CAAA;IAE/C,MAAM,IAAI,GAAG,GAAG,CAAA;IAEhB,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAC7B,GAAG,EAAE,CACH,WAAW;SACR,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CAAC;SACnD,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CACvB,MAAC,MAAM,IAAC,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,aACxD,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAI,EAC3B,KAAC,MAAM,KAAG,EACV,KAAC,SAAS,IACR,MAAM,EAAC,IAAI,EACX,QAAQ,EAAC,YAAY,EACrB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,IAAI,EACP,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,YAEX,IAAI,GACK,KAbkD,IAAI,CAc3D,CACV,CAAC,EACN,CAAC,MAAM,CAAC,CACT,CAAA;IAED,OAAO,CACL,MAAC,MAAM,IAAC,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,aACzC,KAAC,KAAK,IAAC,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,SAAgB,EAAE,WAAW,EAAC,WAAW,GAAG,EAEnF,KAAC,MAAM,IAAC,MAAM,EAAE,GAAG,YACjB,KAAC,UAAU,cAQT,KAAC,IAAI,IACH,OAAO,EAAC,MAAM,EACd,mBAAmB,EAAE,+BAA+B,IAAI,kBAAkB,EAC1E,aAAa,EAAC,KAAK,EACnB,QAAQ,EAAC,MAAM,EACf,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAC,QAAQ,YAEb,SAAS,GACL,GACI,GACN,IACF,CACV,CAAA;AACH,CAAC"}

package/dist/esm/MenuDemo.js

@@ -0,0 +1,30 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Backpack, Calendar, Check, ChevronRight, FilePlus, RefreshCw, Trash2, } from '@hanzogui/lucide-icons-2';
+import { Menu } from '@hanzogui/menu';
+import React from 'react';
+import { Button } from '@hanzo/gui';
+/**
+ * Menu Demo using Gui Menu component.
+ * Automatically uses native menus on iOS/Android, web menus on web.
+ * No configuration needed - it just works!
+ */
+/**
+ * Note: you'll want to use createMenu() to customize further.
+ */
+export function MenuDemo() {
+    const [bookmarksChecked, setBookmarksChecked] = React.useState(true);
+    const [native, setNative] = React.useState(true);
+    const [subMenuOpen, setSubMenuOpen] = React.useState(false);
+    // Note: `item` is the Event on web, undefined on native
+    const onSelect = (item) => {
+        console.info(`selected`, item);
+    };
+    return (_jsx(_Fragment, { children: _jsxs(Menu, { offset: 8, children: [_jsx(Menu.Trigger, { asChild: true, children: _jsx(Button, { size: "$4", icon: Backpack, children: "Open" }) }), _jsx(Menu.Portal, { zIndex: 100, children: _jsxs(Menu.Content, { transition: "100ms", borderRadius: "$4", enterStyle: { scale: 0.9, opacity: 0, y: -5 }, exitStyle: { scale: 0.95, opacity: 0, y: -3 }, boxShadow: "0 4px 5px $shadowColor", children: [_jsx(Menu.Arrow, { size: "$4", borderWidth: 1, borderColor: "$borderColor" }), _jsxs(Menu.ScrollView, { padding: 5, children: [_jsx(Menu.Item, { onSelect: onSelect, children: _jsx(Menu.ItemTitle, { children: "About Notes" }) }, "about-notes"), _jsx(Menu.Separator, {}), _jsx(Menu.Item, { onSelect: onSelect, children: _jsx(Menu.ItemTitle, { children: "Settings" }) }, "settings"), _jsxs(Menu.Item, { onSelect: onSelect, justify: "space-between", 
+                                        // when title is nested inside a React element then you need to use `textValue`
+                                        textValue: "Calendar", children: [_jsx(Menu.ItemTitle, { children: "Calendar" }), _jsx(Menu.ItemIcon, { androidIconName: "ic_menu_today", ios: {
+                                                    name: 'calendar',
+                                                    hierarchicalColor: '#000',
+                                                    // pointSize: 20,
+                                                }, children: _jsx(Calendar, { color: "gray", size: 14 }) })] }, "accounts"), _jsx(Menu.Separator, {}), _jsx(Menu.Item, { onSelect: onSelect, disabled: true, children: _jsx(Menu.ItemTitle, { color: "gray", children: "Locked Notes" }) }, "close-notes"), _jsx(Menu.Item, { onSelect: onSelect, destructive: true, children: _jsx(Menu.ItemTitle, { color: "red", children: "Delete all" }) }, "delete-all"), _jsx(Menu.Separator, {}), _jsxs(Menu.Sub, { open: subMenuOpen, onOpenChange: setSubMenuOpen, children: [_jsxs(Menu.SubTrigger, { justify: "space-between", textValue: "Actions", children: [_jsx(Menu.ItemTitle, { children: "Actions" }), _jsx(ChevronRight, { size: 16, color: "$color10" })] }, "actions-trigger"), _jsx(Menu.Portal, { zIndex: 200, children: _jsxs(Menu.SubContent, { transition: "100ms", borderRadius: "$4", enterStyle: { scale: 0.9, opacity: 0, y: -5 }, exitStyle: { scale: 0.95, opacity: 0, y: -3 }, boxShadow: "0 4px 5px $shadowColor", padding: 5, children: [_jsx(Menu.Label, { padding: 5, color: "$color9", size: "$3", select: "none", children: "Note settings" }), _jsxs(Menu.Item, { onSelect: onSelect, textValue: "Create note", justify: "space-between", children: [_jsx(Menu.ItemTitle, { children: "Create note" }), _jsx(Menu.ItemIcon, { children: _jsx(FilePlus, { size: 14, color: "$color10" }) })] }, "create-note"), _jsxs(Menu.Item, { onSelect: onSelect, textValue: "Delete all notes", justify: "space-between", children: [_jsx(Menu.ItemTitle, { children: "Delete all notes" }), _jsx(Menu.ItemIcon, { children: _jsx(Trash2, { size: 14, color: "$color10" }) })] }, "delete-all-notes"), _jsxs(Menu.Item, { onSelect: onSelect, textValue: "Sync notes", justify: "space-between", children: [_jsx(Menu.ItemTitle, { children: "Sync notes" }), _jsx(Menu.ItemIcon, { children: _jsx(RefreshCw, { size: 14, color: "$color10" }) })] }, "sync-all")] }) })] }), _jsx(Menu.Separator, {}), _jsxs(Menu.CheckboxItem, { checked: bookmarksChecked, onCheckedChange: setBookmarksChecked, justify: "space-between", children: [_jsx(Menu.ItemTitle, { children: "Mark as read" }), _jsx(Menu.ItemIndicator, { children: _jsx(Check, { size: 12, color: "$color10" }) })] }, "show-hidden"), _jsxs(Menu.CheckboxItem, { checked: native, onCheckedChange: setNative, justify: "space-between", children: [_jsx(Menu.ItemTitle, { children: "Enable Native" }), _jsx(Menu.ItemIndicator, { children: _jsx(Check, { size: 12, color: "$color10" }) })] }, "show-other-notes")] })] }) })] }) }));
+}
+//# sourceMappingURL=MenuDemo.js.map

package/dist/esm/MenuDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuDemo.js","sourceRoot":"","sources":["../../src/MenuDemo.tsx"],"names":[],"mappings":"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"}

package/dist/esm/NewInputsDemo.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, XStack, YStack } from '@hanzo/gui';
+import { Input, TextArea } from '@hanzogui/input';
+export function NewInputsDemo() {
+    return (_jsxs(YStack, { width: 200, minH: 250, overflow: "hidden", gap: "$2", m: "$3", p: "$2", children: [_jsx(InputDemo, { size: "$2" }), _jsx(InputDemo, { size: "$3" }), _jsx(InputDemo, { size: "$4" }), _jsx(TextArea, { theme: "surface1", placeholder: "Enter your details..." })] }));
+}
+function InputDemo(props) {
+    return (_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Input, { theme: "surface1", flex: 1, size: props.size, placeholder: `Size ${props.size}...` }), _jsx(Button, { size: props.size, children: "Go" })] }));
+}
+//# sourceMappingURL=NewInputsDemo.js.map

package/dist/esm/NewInputsDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewInputsDemo.js","sourceRoot":"","sources":["../../src/NewInputsDemo.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAS,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAC1D,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAEjD,MAAM,UAAU,aAAa;IAC3B,OAAO,CACL,MAAC,MAAM,IAAC,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,aACrE,KAAC,SAAS,IAAC,IAAI,EAAC,IAAI,GAAG,EACvB,KAAC,SAAS,IAAC,IAAI,EAAC,IAAI,GAAG,EACvB,KAAC,SAAS,IAAC,IAAI,EAAC,IAAI,GAAG,EACvB,KAAC,QAAQ,IAAC,KAAK,EAAC,UAAU,EAAC,WAAW,EAAC,uBAAuB,GAAG,IAC1D,CACV,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,KAA2B;IAC5C,OAAO,CACL,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC7B,KAAC,KAAK,IACJ,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,WAAW,EAAE,QAAQ,KAAK,CAAC,IAAI,KAAK,GACpC,EACF,KAAC,MAAM,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,mBAAa,IAC9B,CACV,CAAA;AACH,CAAC"}

package/dist/esm/PopoverDemo.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, } from '@hanzogui/lucide-icons-2';
+import { useState } from 'react';
+import { Adapt, Button, Input, isWeb, Label, Popover, Sheet, XStack, YStack, } from '@hanzo/gui';
+export function PopoverDemo() {
+    const [shouldAdapt, setShouldAdapt] = useState(true);
+    return (_jsxs(YStack, { gap: "$4", children: [_jsxs(XStack, { gap: "$2", flex: 1, justify: "center", items: "center", children: [_jsx(Demo, { shouldAdapt: shouldAdapt, placement: "left", Icon: ChevronLeft, Name: "left-popover" }), _jsx(Demo, { shouldAdapt: shouldAdapt, placement: "bottom", Icon: ChevronDown, Name: "bottom-popover" }), _jsx(Demo, { shouldAdapt: shouldAdapt, placement: "top", Icon: ChevronUp, Name: "top-popover" }), _jsx(Demo, { shouldAdapt: shouldAdapt, placement: "right", Icon: ChevronRight, Name: "right-popover" })] }), !isWeb && (_jsxs(Button, { onPress: () => setShouldAdapt(!shouldAdapt), children: ["Adapt to Sheet: ", `${shouldAdapt}`] }))] }));
+}
+export function Demo({ Icon, Name, shouldAdapt, ...props }) {
+    return (_jsxs(Popover, { size: "$5", allowFlip: true, stayInFrame: true, offset: 15, resize: true, ...props, children: [_jsx(Popover.Trigger, { asChild: true, children: _jsx(Button, { icon: Icon }) }), shouldAdapt && (_jsx(Adapt, { when: "maxMd", platform: "touch", children: _jsxs(Sheet, { transition: "medium", modal: true, dismissOnSnapToBottom: true, children: [_jsx(Sheet.Frame, { p: "$4", children: _jsx(Adapt.Contents, {}) }), _jsx(Sheet.Overlay, { bg: "$shadowColor", transition: "lazy", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } })] }) })), _jsxs(Popover.Content, { borderWidth: 1, borderColor: "$borderColor", width: 300, height: 200, enterStyle: { y: -10, opacity: 0 }, exitStyle: { y: -10, opacity: 0 }, boxShadow: "0px 4px 8px rgba(0,0,0,0.1), 0px 12px 32px rgba(0,0,0,0.08)", transition: [
+                    'quick',
+                    {
+                        opacity: {
+                            overshootClamping: true,
+                        },
+                    },
+                ], children: [_jsx(Popover.Arrow, { borderWidth: 1, borderColor: "$borderColor" }), _jsxs(XStack, { gap: "$3", mb: "$3", children: [_jsx(Label, { size: "$3", htmlFor: Name, children: "Name" }), _jsx(Input, { flex: 1, size: "$3", id: Name })] }), _jsx(Popover.Close, { asChild: true, children: _jsx(Button, { size: "$3", onPress: () => {
+                                /* Custom code goes here, does not interfere with popover closure */
+                            }, children: "Submit" }) })] })] }));
+}
+//# sourceMappingURL=PopoverDemo.js.map

package/dist/esm/PopoverDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverDemo.js","sourceRoot":"","sources":["../../src/PopoverDemo.tsx"],"names":[],"mappings":"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"}

package/dist/esm/ProgressDemo.js

@@ -0,0 +1,22 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } 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';
+export function ProgressDemo() {
+    const [key, setKey] = React.useState(0);
+    const [progress, setProgress] = React.useState(60);
+    const [slider, setSlider] = React.useState([60]);
+    return (_jsxs(_Fragment, { children: [_jsxs(YStack, { height: 60, items: "center", gap: "$4", children: [_jsxs(Paragraph, { height: 30, opacity: 0.5, children: ["Progress: ", progress] }), _jsx(Progress, { theme: "surface2", value: progress, children: _jsx(Progress.Indicator, { backgroundColor: "$color", transition: [
+                                'quicker',
+                                {
+                                    transform: {
+                                        overshootClamping: true,
+                                    },
+                                },
+                            ] }) }, key)] }), _jsxs(XStack, { items: "center", gap: "$2", position: "absolute", b: "$3", l: "$4", $xxs: { display: 'none' }, children: [_jsx(Button, { size: "$3", icon: Play, onPress: () => setProgress((prev) => (prev + 20) % 100) }), _jsx(Button, { size: "$3", icon: RotateCcw, onPress: () => {
+                            setKey(Math.random());
+                            setProgress(0);
+                            setSlider([0]);
+                        } })] })] }));
+}
+//# sourceMappingURL=ProgressDemo.js.map

package/dist/esm/ProgressDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressDemo.js","sourceRoot":"","sources":["../../src/ProgressDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAiB,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACvF,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAE1D,MAAM,UAAU,YAAY;IAC1B,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;IACvC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;IAClD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAW,CAAC,EAAE,CAAC,CAAC,CAAA;IAE1D,OAAO,CACL,8BACE,MAAC,MAAM,IAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aACzC,MAAC,SAAS,IAAC,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,2BACtB,QAAQ,IACT,EAEZ,KAAC,QAAQ,IAAW,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,QAAQ,YAClD,KAAC,QAAQ,CAAC,SAAS,IACjB,eAAe,EAAC,QAAQ,EACxB,UAAU,EAAE;gCACV,SAAS;gCACT;oCACE,SAAS,EAAE;wCACT,iBAAiB,EAAE,IAAI;qCACxB;iCACF;6BACF,GACD,IAXW,GAAG,CAYP,IACJ,EAET,MAAC,MAAM,IACL,KAAK,EAAC,QAAQ,EACd,GAAG,EAAC,IAAI,EACR,QAAQ,EAAC,UAAU,EACnB,CAAC,EAAC,IAAI,EACN,CAAC,EAAC,IAAI,EACN,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAqBzB,KAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC,GAAG,GAAG,CAAC,GACvD,EACF,KAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,GAAG,EAAE;4BACZ,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;4BACrB,WAAW,CAAC,CAAC,CAAC,CAAA;4BACd,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;wBAChB,CAAC,GACD,IACK,IACR,CACJ,CAAA;AACH,CAAC"}

package/dist/esm/RadioGroupDemo.js

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

package/dist/esm/RadioGroupDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupDemo.js","sourceRoot":"","sources":["../../src/RadioGroupDemo.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAErE,MAAM,UAAU,cAAc;IAC5B,OAAO,CACL,KAAC,KAAK,IAAC,IAAI,EAAC,UAAU,YACpB,KAAC,UAAU,uBAAiB,iBAAiB,EAAC,YAAY,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,YACxE,MAAC,MAAM,IAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aACzC,KAAC,uBAAuB,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAC,cAAc,GAAG,EACpE,KAAC,uBAAuB,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAC,aAAa,GAAG,EACnE,KAAC,uBAAuB,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,GAAG,EAAC,KAAK,EAAC,cAAc,GAAG,IAC7D,GACE,GACP,CACT,CAAA;AACH,CAAC;AAED,MAAM,UAAU,uBAAuB,CAAC,KAIvC;IACC,MAAM,EAAE,GAAG,cAAc,KAAK,CAAC,KAAK,EAAE,CAAA;IACtC,OAAO,CACL,MAAC,MAAM,IAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aACzC,KAAC,UAAU,CAAC,IAAI,IAAC,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,IAAI,YAC3D,KAAC,UAAU,CAAC,SAAS,KAAG,GACR,EAElB,KAAC,KAAK,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,YACjC,KAAK,CAAC,KAAK,GACN,IACD,CACV,CAAA;AACH,CAAC"}

package/dist/esm/RadioGroupHeadlessDemo.js

@@ -0,0 +1,74 @@
+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';
+const RadioGroupContext = React.createContext({});
+const RadioGroupItemContext = React.createContext({
+    checked: false,
+    disabled: false,
+});
+export function RadioGroupHeadlessDemo() {
+    const { providerValue, frameAttrs, rovingFocusGroupAttrs } = useRadioGroup({
+        orientation: 'vertical',
+        name: 'form',
+        defaultValue: '3',
+    });
+    return (_jsx(RadioGroupContext.Provider, { value: providerValue, children: _jsx(RovingFocusGroup, { ...rovingFocusGroupAttrs, children: _jsxs(View, { style: styles.radioGroup, ...frameAttrs, children: [_jsx(RadioGroupItem, { value: "2", id: "2", label: "First Value" }), _jsx(RadioGroupItem, { value: "3", id: "3", label: "Second Value" }), _jsx(RadioGroupItem, { value: "4", id: "4", label: "Third Value" })] }) }) }));
+}
+function RadioGroupItem(props) {
+    const theme = useTheme();
+    const { value, id, label } = props;
+    const { providerValue, native, bubbleInput, rovingFocusGroupAttrs, frameAttrs, isFormControl, checked, } = useRadioGroupItem({
+        radioGroupContext: RadioGroupContext,
+        value,
+        id,
+    });
+    return (_jsx(RadioGroupItemContext.Provider, { value: providerValue, children: isWeb && native ? (bubbleInput) : (_jsxs(View, { style: styles.radioGroupItemContainer, children: [_jsx(RovingFocusGroup.Item, { ...rovingFocusGroupAttrs, children: _jsx(Pressable, { style: {
+                            ...styles.radioGroupItem,
+                            borderColor: theme.borderColor?.get(),
+                            ...(checked
+                                ? { borderWidth: 4 }
+                                : { backgroundColor: theme.background?.get() }),
+                        }, ...frameAttrs, onFocus: frameAttrs.onFocus, children: _jsx(RadioGroupItemIndicator, {}) }) }), _jsx(Text, { style: { color: theme.color?.get() }, children: label }), isFormControl && bubbleInput] })) }));
+}
+function RadioGroupItemIndicator() {
+    const theme = useTheme();
+    const params = useRadioGroupItemIndicator({
+        radioGroupItemContext: RadioGroupItemContext,
+        disabled: false,
+    });
+    if (params.checked) {
+        return (_jsx(View, { style: {
+                ...styles.radioGroupItemIndicator,
+                backgroundColor: theme.color?.get(),
+            }, ...params }));
+    }
+    return 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,
+    },
+});
+//# sourceMappingURL=RadioGroupHeadlessDemo.js.map

package/dist/esm/RadioGroupHeadlessDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupHeadlessDemo.js","sourceRoot":"","sources":["../../src/RadioGroupHeadlessDemo.tsx"],"names":[],"mappings":"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"}

package/dist/esm/RadioGroupUnstyledDemo.js

@@ -0,0 +1,89 @@
+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';
+const RADIO_GROUP_ITEM_NAME = 'RadioGroupItem';
+const RadioGroupItemFrame = styled(YStack, {
+    name: RADIO_GROUP_ITEM_NAME,
+    render: 'button',
+    rounded: 1000,
+    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,
+                },
+            },
+        },
+    },
+});
+const RADIO_GROUP_INDICATOR_NAME = 'RadioGroupIndicator';
+const RadioGroupIndicatorFrame = styled(YStack, {
+    name: RADIO_GROUP_INDICATOR_NAME,
+    width: '53%',
+    height: '53%',
+    rounded: 1000,
+    bg: '$color',
+});
+const RADIO_GROUP_NAME = 'RadioGroup';
+const RadioGroupFrame = styled(YStack, {
+    name: RADIO_GROUP_NAME,
+    variants: {
+        orientation: {
+            horizontal: {
+                flexDirection: 'row',
+                spaceDirection: 'horizontal',
+            },
+            vertical: {
+                flexDirection: 'column',
+                spaceDirection: 'vertical',
+            },
+        },
+    },
+});
+const RadioGroup = createRadioGroup({
+    Frame: RadioGroupFrame,
+    Indicator: RadioGroupIndicatorFrame,
+    Item: RadioGroupItemFrame,
+});
+export function RadioGroupUnstyledDemo() {
+    return (_jsx(RadioGroup, { "aria-labelledby": "Select one item", defaultValue: "3", name: "form", children: _jsxs(YStack, { width: 200, items: "center", gap: "$2", children: [_jsx(RadioGroupItemWithLabel, { value: "2", label: "Option One" }), _jsx(RadioGroupItemWithLabel, { value: "3", label: "Option Two" })] }) }));
+}
+function RadioGroupItemWithLabel(props) {
+    const id = `radiogroup-${props.value}`;
+    return (_jsxs(XStack, { width: 300, items: "center", gap: "$4", children: [_jsx(RadioGroup.Item, { value: props.value, id: id, children: _jsx(RadioGroup.Indicator, {}) }), _jsx(Label, { htmlFor: id, children: props.label })] }));
+}
+//# sourceMappingURL=RadioGroupUnstyledDemo.js.map

package/dist/esm/RadioGroupUnstyledDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupUnstyledDemo.js","sourceRoot":"","sources":["../../src/RadioGroupUnstyledDemo.tsx"],"names":[],"mappings":"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"}

package/dist/esm/ReplaceThemeDemo.js

@@ -0,0 +1,29 @@
+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';
+export function ReplaceThemeDemo() {
+    const [theme, setTheme] = React.useState();
+    const update = useForceUpdate();
+    useIsomorphicLayoutEffect(() => {
+        addTheme({
+            name: 'mytheme',
+            insertCSS: true,
+            theme: {
+                color: 'red',
+                color2: 'green',
+            },
+        });
+        setTheme('mytheme');
+    }, []);
+    return (_jsxs(YStack, { items: "center", gap: "$4", children: [_jsx(XStack, { gap: "$5", children: _jsx(Theme, { name: theme ?? null, children: _jsx(Square, { rounded: "$8", size: 100, bg: "$color" }) }) }), _jsx(Button, { onPress: () => {
+                    replaceTheme({
+                        name: 'mytheme',
+                        theme: {
+                            color: 'blue',
+                        },
+                    });
+                    update();
+                }, children: "Replace theme to only have $color: blue" })] }));
+}
+//# sourceMappingURL=ReplaceThemeDemo.js.map

package/dist/esm/ReplaceThemeDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReplaceThemeDemo.js","sourceRoot":"","sources":["../../src/ReplaceThemeDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAA;AAExD,OAAO,EACL,MAAM,EACN,MAAM,EACN,KAAK,EACL,MAAM,EACN,MAAM,EACN,cAAc,EACd,yBAAyB,GAC1B,MAAM,YAAY,CAAA;AAEnB,MAAM,UAAU,gBAAgB;IAC9B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAO,CAAA;IAC/C,MAAM,MAAM,GAAG,cAAc,EAAE,CAAA;IAE/B,yBAAyB,CAAC,GAAG,EAAE;QAC7B,QAAQ,CAAC;YACP,IAAI,EAAE,SAAS;YACf,SAAS,EAAE,IAAI;YACf,KAAK,EAAE;gBACL,KAAK,EAAE,KAAK;gBACZ,MAAM,EAAE,OAAO;aAChB;SACF,CAAC,CAAA;QACF,QAAQ,CAAC,SAAS,CAAC,CAAA;IACrB,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC7B,KAAC,MAAM,IAAC,GAAG,EAAC,IAAI,YACd,KAAC,KAAK,IAAC,IAAI,EAAE,KAAK,IAAI,IAAI,YACxB,KAAC,MAAM,IAAC,OAAO,EAAC,IAAI,EAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAC,QAAQ,GAAG,GACxC,GACD,EAET,KAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE;oBACZ,YAAY,CAAC;wBACX,IAAI,EAAE,SAAS;wBACf,KAAK,EAAE;4BACL,KAAK,EAAE,MAAM;yBACd;qBACF,CAAC,CAAA;oBACF,MAAM,EAAE,CAAA;gBACV,CAAC,wDAGM,IACF,CACV,CAAA;AACH,CAAC"}

package/dist/esm/ScrollViewDemo.js

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

package/dist/esm/ScrollViewDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollViewDemo.js","sourceRoot":"","sources":["../../src/ScrollViewDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAE/D,MAAM,UAAU,cAAc;IAC5B,OAAO,CACL,KAAC,UAAU,IAAC,IAAI,EAAE,GAAG,EAAE,KAAK,EAAC,KAAK,EAAC,EAAE,EAAC,aAAa,EAAC,CAAC,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,YACrE,MAAC,MAAM,IAAC,QAAQ,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,aACrD,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAC,SAAS,GAAG,EACzC,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAC,SAAS,GAAG,EACzC,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAC,SAAS,GAAG,EACzC,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAC,SAAS,GAAG,EACzC,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAC,SAAS,GAAG,EACzC,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAC,UAAU,GAAG,EAC1C,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAC,UAAU,GAAG,EAC1C,KAAC,MAAM,IAAC,CAAC,EAAC,IAAI,EAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAC,UAAU,GAAG,IACnC,GACE,CACd,CAAA;AACH,CAAC"}

package/dist/esm/SelectDemo.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 '@hanzo/gui/linear-gradient';
+export function SelectDemo() {
+    return (_jsx(Theme, { name: "surface1", children: _jsxs(YStack, { gap: "$4", children: [_jsxs(XStack, { width: "100%", items: "center", gap: "$4", children: [_jsx(Label, { htmlFor: "select-demo-1", flex: 1, minW: 80, children: "Custom" }), _jsx(SelectDemoContents, { id: "select-demo-1" })] }), _jsxs(XStack, { width: "100%", items: "center", gap: "$4", children: [_jsx(Label, { htmlFor: "select-demo-2", flex: 1, minW: 80, children: "Native" }), _jsx(SelectDemoContents, { id: "select-demo-2", native: true })] })] }) }));
+}
+// Helper to get item label from value - used by renderValue for SSR
+const getItemLabel = (value) => items.find((item) => item.name.toLowerCase() === value)?.name;
+export function SelectDemoContents(props) {
+    const [val, setVal] = React.useState('apple');
+    return (_jsxs(Select, { value: val, onValueChange: setVal, disablePreventBodyScroll: true, ...props, 
+        // renderValue enables SSR support by providing the label synchronously
+        renderValue: getItemLabel, children: [props?.trigger || (_jsx(Select.Trigger, { maxWidth: 220, iconAfter: ChevronDown, borderRadius: "$4", backgroundColor: "$background", children: _jsx(Select.Value, { placeholder: "Something" }) })), _jsx(Adapt, { when: "maxMd", platform: "touch", children: _jsxs(Sheet, { native: !!props.native, modal: true, dismissOnSnapToBottom: true, transition: "medium", children: [_jsx(Sheet.Frame, { children: _jsx(Sheet.ScrollView, { children: _jsx(Adapt.Contents, {}) }) }), _jsx(Sheet.Overlay, { bg: "$shadowColor", transition: "lazy", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } })] }) }), _jsxs(Select.Content, { children: [_jsxs(Select.ScrollUpButton, { items: "center", justify: "center", position: "relative", width: "100%", height: "$3", children: [_jsx(YStack, { z: 10, children: _jsx(ChevronUp, { size: 20 }) }), _jsx(LinearGradient, { start: [0, 0], end: [0, 1], fullscreen: true, colors: ['$background', 'transparent'], rounded: "$4" })] }), _jsxs(Select.Viewport, { minW: 200, bg: "$background", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", children: [_jsxs(Select.Group, { children: [_jsx(Select.Label, { fontWeight: "700", children: "Fruits" }), React.useMemo(() => items.map((item, i) => {
+                                        return (_jsxs(Select.Item, { index: i, value: item.name.toLowerCase(), children: [_jsx(Select.ItemText, { children: item.name }), _jsx(Select.ItemIndicator, { marginLeft: "auto", children: _jsx(Check, { size: 16 }) })] }, item.name));
+                                    }), [items])] }), props.native && (_jsx(YStack, { position: "absolute", r: 0, t: 16, items: "center", justify: "center", width: '$4', pointerEvents: "none", children: _jsx(ChevronDown, { size: getFontSize(props.size ?? '$true') }) }))] }), _jsxs(Select.ScrollDownButton, { items: "center", justify: "center", position: "relative", width: "100%", height: "$3", children: [_jsx(YStack, { z: 10, children: _jsx(ChevronDown, { size: 20 }) }), _jsx(LinearGradient, { start: [0, 0], end: [0, 1], fullscreen: true, 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' },
+];
+//# sourceMappingURL=SelectDemo.js.map