@hanzogui/demos 8.2.1 → 8.3.2

package/dist/cjs/ListItemDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemDemo.js","sourceRoot":"","sources":["../../src/ListItemDemo.tsx"],"names":[],"mappings":";;;;AAAA,6DAA+E;AAC/E,oCAAuE;AAEvE;IACE,OAAO,CACL,uBAAC,WAAK,IAAC,IAAI,EAAC,UAAU,YACpB,wBAAC,YAAM,IAAC,MAAM,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,EAAE,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,aAC3D,uBAAC,aAAa,KAAG,EACjB,uBAAC,aAAa,KAAG,IACV,GACH,CACT,CAAA;AACH,CAAC;AAED,SAAS,aAAa;IACpB,OAAO,CACL,wBAAC,YAAM,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,uBAAC,YAAM,CAAC,IAAI,cACV,uBAAC,cAAQ,IACP,GAAG,EAAC,IAAI,EACR,IAAI,EAAE,qBAAI,EACV,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAE,uBAAC,cAAQ,CAAC,QAAQ,2BAA6B,EACzD,SAAS,EAAE,6BAAY,GACvB,GACU,EACd,uBAAC,YAAM,CAAC,IAAI,cACV,uBAAC,cAAQ,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAE,qBAAI,qBAElB,GACC,EACd,uBAAC,YAAM,CAAC,IAAI,cACV,uBAAC,cAAQ,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAE,oBAAG,oBAEjB,GACC,EACd,uBAAC,YAAM,CAAC,IAAI,cACV,uBAAC,cAAQ,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAE,sBAAK,sBAEnB,GACC,IACP,CACV,CAAA;AACH,CAAC;AAED,SAAS,aAAa;IACpB,OAAO,CACL,wBAAC,YAAM,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,uBAAC,YAAM,CAAC,IAAI,cACV,uBAAC,cAAQ,IACP,GAAG,EAAC,IAAI,EACR,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAC,UAAU,EACnB,IAAI,EAAE,qBAAI,EACV,SAAS,EAAE,6BAAY,GACvB,GACU,EACd,uBAAC,eAAS,KAAG,EACb,uBAAC,YAAM,CAAC,IAAI,cACV,uBAAC,cAAQ,IACP,GAAG,EAAC,IAAI,EACR,KAAK,EAAC,MAAM,EACZ,QAAQ,EAAC,UAAU,EACnB,IAAI,EAAE,qBAAI,EACV,SAAS,EAAE,6BAAY,GACvB,GACU,IACP,CACV,CAAA;AACH,CAAC"}

package/dist/cjs/LucideIconsDemo.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LucideIconsDemo = LucideIconsDemo;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const LucideIcons = tslib_1.__importStar(require("@hanzogui/lucide-icons-2"));
+const react_native_1 = require("react-native");
+const gui_1 = require("@hanzo/gui");
+const lucideIcons = Object.keys(
+// vite tree shaking workaround
+typeof LucideIcons !== 'undefined' ? LucideIcons : {}).map((name) => ({
+    key: name.toLowerCase(),
+    name,
+    Icon: LucideIcons[name],
+}));
+function LucideIconsDemo() {
+    const [searchRaw, setSearch] = react_1.default.useState('');
+    const search = (0, gui_1.useDebounceValue)(searchRaw, 400);
+    const size = 100;
+    const iconsMemo = react_1.default.useMemo(() => lucideIcons
+        .filter((x) => x.key.includes(search.toLowerCase()))
+        .map(({ Icon, name }) => ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { height: size + 20, items: "center", justify: "center", children: [(0, jsx_runtime_1.jsx)(Icon, { size: size * 0.25 }), (0, jsx_runtime_1.jsx)(gui_1.Spacer, {}), (0, jsx_runtime_1.jsx)(gui_1.Paragraph, { height: "$6", wordWrap: "break-word", maxW: "100%", text: "center", px: "$2", size: "$1", opacity: 0.5, children: name })] }, name))), [search]);
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { minW: "100%", p: "$4", pb: "$0", gap: "$4", children: [(0, jsx_runtime_1.jsx)(gui_1.Input, { value: searchRaw, onChangeText: setSearch, placeholder: "Search..." }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { height: 420, children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { children: (0, jsx_runtime_1.jsx)(gui_1.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/cjs/LucideIconsDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LucideIconsDemo.js","sourceRoot":"","sources":["../../src/LucideIconsDemo.tsx"],"names":[],"mappings":";;;;;AAAA,0DAAyB;AACzB,MAAY,WAAW,6DAAgC;AAEvD,+CAAyC;AACzC,oCAAqF;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;IACE,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;IACjD,MAAM,MAAM,GAAG,IAAA,sBAAgB,EAAC,SAAS,EAAE,GAAG,CAAC,CAAA;IAE/C,MAAM,IAAI,GAAG,GAAG,CAAA;IAEhB,MAAM,SAAS,GAAG,eAAK,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,wBAAC,YAAM,IAAC,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,aACxD,uBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAI,EAC3B,uBAAC,YAAM,KAAG,EACV,uBAAC,eAAS,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,wBAAC,YAAM,IAAC,IAAI,EAAC,MAAM,EAAC,CAAC,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,aACzC,uBAAC,WAAK,IAAC,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,SAAgB,EAAE,WAAW,EAAC,WAAW,GAAG,EAEnF,uBAAC,YAAM,IAAC,MAAM,EAAE,GAAG,YACjB,uBAAC,yBAAU,cAQT,uBAAC,UAAI,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/cjs/MenuDemo.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuDemo = MenuDemo;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const menu_1 = require("@hanzogui/menu");
+const react_1 = tslib_1.__importDefault(require("react"));
+const gui_1 = require("@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.
+ */
+function MenuDemo() {
+    const [bookmarksChecked, setBookmarksChecked] = react_1.default.useState(true);
+    const [native, setNative] = react_1.default.useState(true);
+    const [subMenuOpen, setSubMenuOpen] = react_1.default.useState(false);
+    // Note: `item` is the Event on web, undefined on native
+    const onSelect = (item) => {
+        console.info(`selected`, item);
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(menu_1.Menu, { offset: 8, children: [(0, jsx_runtime_1.jsx)(menu_1.Menu.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$4", icon: lucide_icons_2_1.Backpack, children: "Open" }) }), (0, jsx_runtime_1.jsx)(menu_1.Menu.Portal, { zIndex: 100, children: (0, jsx_runtime_1.jsxs)(menu_1.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: [(0, jsx_runtime_1.jsx)(menu_1.Menu.Arrow, { size: "$4", borderWidth: 1, borderColor: "$borderColor" }), (0, jsx_runtime_1.jsxs)(menu_1.Menu.ScrollView, { padding: 5, children: [(0, jsx_runtime_1.jsx)(menu_1.Menu.Item, { onSelect: onSelect, children: (0, jsx_runtime_1.jsx)(menu_1.Menu.ItemTitle, { children: "About Notes" }) }, "about-notes"), (0, jsx_runtime_1.jsx)(menu_1.Menu.Separator, {}), (0, jsx_runtime_1.jsx)(menu_1.Menu.Item, { onSelect: onSelect, children: (0, jsx_runtime_1.jsx)(menu_1.Menu.ItemTitle, { children: "Settings" }) }, "settings"), (0, jsx_runtime_1.jsxs)(menu_1.Menu.Item, { onSelect: onSelect, justify: "space-between", 
+                                        // when title is nested inside a React element then you need to use `textValue`
+                                        textValue: "Calendar", children: [(0, jsx_runtime_1.jsx)(menu_1.Menu.ItemTitle, { children: "Calendar" }), (0, jsx_runtime_1.jsx)(menu_1.Menu.ItemIcon, { androidIconName: "ic_menu_today", ios: {
+                                                    name: 'calendar',
+                                                    hierarchicalColor: '#000',
+                                                    // pointSize: 20,
+                                                }, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Calendar, { color: "gray", size: 14 }) })] }, "accounts"), (0, jsx_runtime_1.jsx)(menu_1.Menu.Separator, {}), (0, jsx_runtime_1.jsx)(menu_1.Menu.Item, { onSelect: onSelect, disabled: true, children: (0, jsx_runtime_1.jsx)(menu_1.Menu.ItemTitle, { color: "gray", children: "Locked Notes" }) }, "close-notes"), (0, jsx_runtime_1.jsx)(menu_1.Menu.Item, { onSelect: onSelect, destructive: true, children: (0, jsx_runtime_1.jsx)(menu_1.Menu.ItemTitle, { color: "red", children: "Delete all" }) }, "delete-all"), (0, jsx_runtime_1.jsx)(menu_1.Menu.Separator, {}), (0, jsx_runtime_1.jsxs)(menu_1.Menu.Sub, { open: subMenuOpen, onOpenChange: setSubMenuOpen, children: [(0, jsx_runtime_1.jsxs)(menu_1.Menu.SubTrigger, { justify: "space-between", textValue: "Actions", children: [(0, jsx_runtime_1.jsx)(menu_1.Menu.ItemTitle, { children: "Actions" }), (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronRight, { size: 16, color: "$color10" })] }, "actions-trigger"), (0, jsx_runtime_1.jsx)(menu_1.Menu.Portal, { zIndex: 200, children: (0, jsx_runtime_1.jsxs)(menu_1.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: [(0, jsx_runtime_1.jsx)(menu_1.Menu.Label, { padding: 5, color: "$color9", size: "$3", select: "none", children: "Note settings" }), (0, jsx_runtime_1.jsxs)(menu_1.Menu.Item, { onSelect: onSelect, textValue: "Create note", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(menu_1.Menu.ItemTitle, { children: "Create note" }), (0, jsx_runtime_1.jsx)(menu_1.Menu.ItemIcon, { children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.FilePlus, { size: 14, color: "$color10" }) })] }, "create-note"), (0, jsx_runtime_1.jsxs)(menu_1.Menu.Item, { onSelect: onSelect, textValue: "Delete all notes", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(menu_1.Menu.ItemTitle, { children: "Delete all notes" }), (0, jsx_runtime_1.jsx)(menu_1.Menu.ItemIcon, { children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Trash2, { size: 14, color: "$color10" }) })] }, "delete-all-notes"), (0, jsx_runtime_1.jsxs)(menu_1.Menu.Item, { onSelect: onSelect, textValue: "Sync notes", justify: "space-between", children: [(0, jsx_runtime_1.jsx)(menu_1.Menu.ItemTitle, { children: "Sync notes" }), (0, jsx_runtime_1.jsx)(menu_1.Menu.ItemIcon, { children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.RefreshCw, { size: 14, color: "$color10" }) })] }, "sync-all")] }) })] }), (0, jsx_runtime_1.jsx)(menu_1.Menu.Separator, {}), (0, jsx_runtime_1.jsxs)(menu_1.Menu.CheckboxItem, { checked: bookmarksChecked, onCheckedChange: setBookmarksChecked, justify: "space-between", children: [(0, jsx_runtime_1.jsx)(menu_1.Menu.ItemTitle, { children: "Mark as read" }), (0, jsx_runtime_1.jsx)(menu_1.Menu.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 12, color: "$color10" }) })] }, "show-hidden"), (0, jsx_runtime_1.jsxs)(menu_1.Menu.CheckboxItem, { checked: native, onCheckedChange: setNative, justify: "space-between", children: [(0, jsx_runtime_1.jsx)(menu_1.Menu.ItemTitle, { children: "Enable Native" }), (0, jsx_runtime_1.jsx)(menu_1.Menu.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 12, color: "$color10" }) })] }, "show-other-notes")] })] }) })] }) }));
+}
+//# sourceMappingURL=MenuDemo.js.map

package/dist/cjs/MenuDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuDemo.js","sourceRoot":"","sources":["../../src/MenuDemo.tsx"],"names":[],"mappings":";;;;;AAAA,6DAQiC;AACjC,yCAAqC;AACrC,0DAAyB;AACzB,oCAAmC;AAEnC;;;;GAIG;AAEH;;GAEG;AAEH;IACE,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IACpE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAChD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE3D,wDAAwD;IACxD,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;IAChC,CAAC,CAAA;IAED,OAAO,CACL,2DACE,wBAAC,WAAI,IAAC,MAAM,EAAE,CAAC,aACb,uBAAC,WAAI,CAAC,OAAO,IAAC,OAAO,kBACnB,uBAAC,YAAM,IAAC,IAAI,EAAC,IAAI,EAAC,IAAI,EAAE,yBAAQ,qBAEvB,GACI,EAEf,uBAAC,WAAI,CAAC,MAAM,IAAC,MAAM,EAAE,GAAG,YACtB,wBAAC,WAAI,CAAC,OAAO,IACX,UAAU,EAAC,OAAO,EAClB,YAAY,EAAC,IAAI,EACjB,UAAU,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EAC7C,SAAS,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EAC7C,SAAS,EAAC,wBAAwB,aAElC,uBAAC,WAAI,CAAC,KAAK,IAAC,IAAI,EAAC,IAAI,EAAC,WAAW,EAAE,CAAC,EAAE,WAAW,EAAC,cAAc,GAAG,EAEnE,wBAAC,WAAI,CAAC,UAAU,IAAC,OAAO,EAAE,CAAC,aACzB,uBAAC,WAAI,CAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,YAC3B,uBAAC,WAAI,CAAC,SAAS,8BAA6B,IADX,aAAa,CAEpC,EAEZ,uBAAC,WAAI,CAAC,SAAS,KAAG,EAElB,uBAAC,WAAI,CAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,YAC3B,uBAAC,WAAI,CAAC,SAAS,2BAA0B,IADR,UAAU,CAEjC,EACZ,wBAAC,WAAI,CAAC,IAAI,IACR,QAAQ,EAAE,QAAQ,EAElB,OAAO,EAAC,eAAe;wCACvB,+EAA+E;wCAC/E,SAAS,EAAC,UAAU,aAEpB,uBAAC,WAAI,CAAC,SAAS,2BAA0B,EACzC,uBAAC,WAAI,CAAC,QAAQ,IACZ,eAAe,EAAC,eAAe,EAC/B,GAAG,EAAE;oDACH,IAAI,EAAE,UAAU;oDAChB,iBAAiB,EAAE,MAAM;oDACzB,iBAAiB;iDAClB,YAED,uBAAC,yBAAQ,IAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,GAAI,GACrB,KAfZ,UAAU,CAgBJ,EAEZ,uBAAC,WAAI,CAAC,SAAS,KAAG,EAElB,uBAAC,WAAI,CAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,EAAoB,QAAQ,kBACvD,uBAAC,WAAI,CAAC,SAAS,IAAC,KAAK,EAAC,MAAM,6BAA8B,IADzB,aAAa,CAEpC,EACZ,uBAAC,WAAI,CAAC,IAAI,IAAC,QAAQ,EAAE,QAAQ,EAAE,WAAW,kBACxC,uBAAC,WAAI,CAAC,SAAS,IAAC,KAAK,EAAC,KAAK,2BAA4B,IADV,YAAY,CAE/C,EAEZ,uBAAC,WAAI,CAAC,SAAS,KAAG,EAElB,wBAAC,WAAI,CAAC,GAAG,IAAC,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,cAAc,aACvD,wBAAC,WAAI,CAAC,UAAU,IACd,OAAO,EAAC,eAAe,EAEvB,SAAS,EAAC,SAAS,aAEnB,uBAAC,WAAI,CAAC,SAAS,0BAAyB,EACxC,uBAAC,6BAAY,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,UAAU,GAAG,KAJvC,iBAAiB,CAKL,EAElB,uBAAC,WAAI,CAAC,MAAM,IAAC,MAAM,EAAE,GAAG,YACtB,wBAAC,WAAI,CAAC,UAAU,IACd,UAAU,EAAC,OAAO,EAClB,YAAY,EAAC,IAAI,EACjB,UAAU,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EAC7C,SAAS,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,EAC7C,SAAS,EAAC,wBAAwB,EAClC,OAAO,EAAE,CAAC,aAEV,uBAAC,WAAI,CAAC,KAAK,IAAC,OAAO,EAAE,CAAC,EAAE,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,8BAElD,EACb,wBAAC,WAAI,CAAC,IAAI,IACR,QAAQ,EAAE,QAAQ,EAElB,SAAS,EAAC,aAAa,EACvB,OAAO,EAAC,eAAe,aAEvB,uBAAC,WAAI,CAAC,SAAS,8BAA6B,EAC5C,uBAAC,WAAI,CAAC,QAAQ,cACZ,uBAAC,yBAAQ,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,UAAU,GAAG,GACzB,KAPZ,aAAa,CAQP,EACZ,wBAAC,WAAI,CAAC,IAAI,IACR,QAAQ,EAAE,QAAQ,EAElB,SAAS,EAAC,kBAAkB,EAC5B,OAAO,EAAC,eAAe,aAEvB,uBAAC,WAAI,CAAC,SAAS,mCAAkC,EACjD,uBAAC,WAAI,CAAC,QAAQ,cACZ,uBAAC,uBAAM,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,UAAU,GAAG,GACvB,KAPZ,kBAAkB,CAQZ,EACZ,wBAAC,WAAI,CAAC,IAAI,IACR,QAAQ,EAAE,QAAQ,EAElB,SAAS,EAAC,YAAY,EACtB,OAAO,EAAC,eAAe,aAEvB,uBAAC,WAAI,CAAC,SAAS,6BAA4B,EAC3C,uBAAC,WAAI,CAAC,QAAQ,cACZ,uBAAC,0BAAS,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,UAAU,GAAG,GAC1B,KAPZ,UAAU,CAQJ,IACI,GACN,IACL,EAEX,uBAAC,WAAI,CAAC,SAAS,KAAG,EAElB,wBAAC,WAAI,CAAC,YAAY,IAEhB,OAAO,EAAE,gBAAgB,EACzB,eAAe,EAAE,mBAAmB,EACpC,OAAO,EAAC,eAAe,aAEvB,uBAAC,WAAI,CAAC,SAAS,+BAA8B,EAC7C,uBAAC,WAAI,CAAC,aAAa,cACjB,uBAAC,sBAAK,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,UAAU,GAAG,GACjB,KARjB,aAAa,CASC,EACpB,wBAAC,WAAI,CAAC,YAAY,IAEhB,OAAO,EAAE,MAAM,EACf,eAAe,EAAE,SAAS,EAC1B,OAAO,EAAC,eAAe,aAEvB,uBAAC,WAAI,CAAC,SAAS,gCAA+B,EAC9C,uBAAC,WAAI,CAAC,aAAa,cACjB,uBAAC,sBAAK,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,UAAU,GAAG,GACjB,KARjB,kBAAkB,CASJ,IACJ,IACL,GACH,IACT,GACN,CACJ,CAAA;AACH,CAAC"}

package/dist/cjs/NewInputsDemo.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NewInputsDemo = NewInputsDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+const input_1 = require("@hanzogui/input");
+function NewInputsDemo() {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { width: 200, minH: 250, overflow: "hidden", gap: "$2", m: "$3", p: "$2", children: [(0, jsx_runtime_1.jsx)(InputDemo, { size: "$2" }), (0, jsx_runtime_1.jsx)(InputDemo, { size: "$3" }), (0, jsx_runtime_1.jsx)(InputDemo, { size: "$4" }), (0, jsx_runtime_1.jsx)(input_1.TextArea, { theme: "surface1", placeholder: "Enter your details..." })] }));
+}
+function InputDemo(props) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", children: [(0, jsx_runtime_1.jsx)(input_1.Input, { theme: "surface1", flex: 1, size: props.size, placeholder: `Size ${props.size}...` }), (0, jsx_runtime_1.jsx)(gui_1.Button, { size: props.size, children: "Go" })] }));
+}
+//# sourceMappingURL=NewInputsDemo.js.map

package/dist/cjs/NewInputsDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewInputsDemo.js","sourceRoot":"","sources":["../../src/NewInputsDemo.tsx"],"names":[],"mappings":";;;;AACA,oCAA0D;AAC1D,2CAAiD;AAEjD;IACE,OAAO,CACL,wBAAC,YAAM,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,uBAAC,SAAS,IAAC,IAAI,EAAC,IAAI,GAAG,EACvB,uBAAC,SAAS,IAAC,IAAI,EAAC,IAAI,GAAG,EACvB,uBAAC,SAAS,IAAC,IAAI,EAAC,IAAI,GAAG,EACvB,uBAAC,gBAAQ,IAAC,KAAK,EAAC,UAAU,EAAC,WAAW,EAAC,uBAAuB,GAAG,IAC1D,CACV,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,KAA2B;IAC5C,OAAO,CACL,wBAAC,YAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC7B,uBAAC,aAAK,IACJ,KAAK,EAAC,UAAU,EAChB,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,WAAW,EAAE,QAAQ,KAAK,CAAC,IAAI,KAAK,GACpC,EACF,uBAAC,YAAM,IAAC,IAAI,EAAE,KAAK,CAAC,IAAI,mBAAa,IAC9B,CACV,CAAA;AACH,CAAC"}

package/dist/cjs/PopoverDemo.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopoverDemo = PopoverDemo;
+exports.Demo = Demo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
+const gui_1 = require("@hanzo/gui");
+function PopoverDemo() {
+    const [shouldAdapt, setShouldAdapt] = (0, react_1.useState)(true);
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$4", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", flex: 1, justify: "center", items: "center", children: [(0, jsx_runtime_1.jsx)(Demo, { shouldAdapt: shouldAdapt, placement: "left", Icon: lucide_icons_2_1.ChevronLeft, Name: "left-popover" }), (0, jsx_runtime_1.jsx)(Demo, { shouldAdapt: shouldAdapt, placement: "bottom", Icon: lucide_icons_2_1.ChevronDown, Name: "bottom-popover" }), (0, jsx_runtime_1.jsx)(Demo, { shouldAdapt: shouldAdapt, placement: "top", Icon: lucide_icons_2_1.ChevronUp, Name: "top-popover" }), (0, jsx_runtime_1.jsx)(Demo, { shouldAdapt: shouldAdapt, placement: "right", Icon: lucide_icons_2_1.ChevronRight, Name: "right-popover" })] }), !gui_1.isWeb && ((0, jsx_runtime_1.jsxs)(gui_1.Button, { onPress: () => setShouldAdapt(!shouldAdapt), children: ["Adapt to Sheet: ", `${shouldAdapt}`] }))] }));
+}
+function Demo({ Icon, Name, shouldAdapt, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Popover, { size: "$5", allowFlip: true, stayInFrame: true, offset: 15, resize: true, ...props, children: [(0, jsx_runtime_1.jsx)(gui_1.Popover.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(gui_1.Button, { icon: Icon }) }), shouldAdapt && ((0, jsx_runtime_1.jsx)(gui_1.Adapt, { when: "maxMd", platform: "touch", children: (0, jsx_runtime_1.jsxs)(gui_1.Sheet, { transition: "medium", modal: true, dismissOnSnapToBottom: true, children: [(0, jsx_runtime_1.jsx)(gui_1.Sheet.Frame, { p: "$4", children: (0, jsx_runtime_1.jsx)(gui_1.Adapt.Contents, {}) }), (0, jsx_runtime_1.jsx)(gui_1.Sheet.Overlay, { bg: "$shadowColor", transition: "lazy", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } })] }) })), (0, jsx_runtime_1.jsxs)(gui_1.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: [(0, jsx_runtime_1.jsx)(gui_1.Popover.Arrow, { borderWidth: 1, borderColor: "$borderColor" }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$3", mb: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.Label, { size: "$3", htmlFor: Name, children: "Name" }), (0, jsx_runtime_1.jsx)(gui_1.Input, { flex: 1, size: "$3", id: Name })] }), (0, jsx_runtime_1.jsx)(gui_1.Popover.Close, { asChild: true, children: (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$3", onPress: () => {
+                                /* Custom code goes here, does not interfere with popover closure */
+                            }, children: "Submit" }) })] })] }));
+}
+//# sourceMappingURL=PopoverDemo.js.map

package/dist/cjs/PopoverDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverDemo.js","sourceRoot":"","sources":["../../src/PopoverDemo.tsx"],"names":[],"mappings":";;;;;AAAA,6DAKiC;AACjC,iCAAgC;AAEhC,oCAWmB;AAEnB;IACE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAA;IAEpD,OAAO,CACL,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,aACd,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,aACvD,uBAAC,IAAI,IACH,WAAW,EAAE,WAAW,EACxB,SAAS,EAAC,MAAM,EAChB,IAAI,EAAE,4BAAW,EACjB,IAAI,EAAC,cAAc,GACnB,EACF,uBAAC,IAAI,IACH,WAAW,EAAE,WAAW,EACxB,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAE,4BAAW,EACjB,IAAI,EAAC,gBAAgB,GACrB,EACF,uBAAC,IAAI,IACH,WAAW,EAAE,WAAW,EACxB,SAAS,EAAC,KAAK,EACf,IAAI,EAAE,0BAAS,EACf,IAAI,EAAC,aAAa,GAClB,EACF,uBAAC,IAAI,IACH,WAAW,EAAE,WAAW,EACxB,SAAS,EAAC,OAAO,EACjB,IAAI,EAAE,6BAAY,EAClB,IAAI,EAAC,eAAe,GACpB,IACK,EAER,CAAC,WAAK,IAAI,CACT,wBAAC,YAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,iCAChC,GAAG,WAAW,EAAE,IAC1B,CACV,IACM,CACV,CAAA;AACH,CAAC;AAED,cAAqB,EACnB,IAAI,EACJ,IAAI,EACJ,WAAW,EACX,GAAG,KAAK,EAC4D;IACpE,OAAO,CACL,wBAAC,aAAO,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,QAAC,WAAW,QAAC,MAAM,EAAE,EAAE,EAAE,MAAM,WAAK,KAAK,aACnE,uBAAC,aAAO,CAAC,OAAO,IAAC,OAAO,kBACtB,uBAAC,YAAM,IAAC,IAAI,EAAE,IAAI,GAAI,GACN,EAEjB,WAAW,IAAI,CACd,uBAAC,WAAK,IAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAC,OAAO,YAClC,wBAAC,WAAK,IAAC,UAAU,EAAC,QAAQ,EAAC,KAAK,QAAC,qBAAqB,mBACpD,uBAAC,WAAK,CAAC,KAAK,IAAC,CAAC,EAAC,IAAI,YACjB,uBAAC,WAAK,CAAC,QAAQ,KAAG,GACN,EACd,uBAAC,WAAK,CAAC,OAAO,IACZ,EAAE,EAAC,cAAc,EACjB,UAAU,EAAC,MAAM,EACjB,UAAU,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAC1B,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,GACzB,IACI,GACF,CACT,EAED,wBAAC,aAAO,CAAC,OAAO,IACd,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,UAAU,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAClC,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACjC,SAAS,EAAC,6DAA6D,EACvE,UAAU,EAAE;oBACV,OAAO;oBACP;wBACE,OAAO,EAAE;4BACP,iBAAiB,EAAE,IAAI;yBACxB;qBACF;iBACF,aAED,uBAAC,aAAO,CAAC,KAAK,IAAC,WAAW,EAAE,CAAC,EAAE,WAAW,EAAC,cAAc,GAAG,EAE5D,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,aACtB,uBAAC,WAAK,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,IAAI,qBAEtB,EACR,uBAAC,WAAK,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,EAAE,EAAE,IAAI,GAAI,IAC/B,EAET,uBAAC,aAAO,CAAC,KAAK,IAAC,OAAO,kBACpB,uBAAC,YAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE;gCACZ,oEAAoE;4BACtE,CAAC,uBAGM,GACK,IACA,IACV,CACX,CAAA;AACH,CAAC"}

package/dist/cjs/ProgressDemo.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressDemo = ProgressDemo;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+function ProgressDemo() {
+    const [key, setKey] = react_1.default.useState(0);
+    const [progress, setProgress] = react_1.default.useState(60);
+    const [slider, setSlider] = react_1.default.useState([60]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { height: 60, items: "center", gap: "$4", children: [(0, jsx_runtime_1.jsxs)(gui_1.Paragraph, { height: 30, opacity: 0.5, children: ["Progress: ", progress] }), (0, jsx_runtime_1.jsx)(gui_1.Progress, { theme: "surface2", value: progress, children: (0, jsx_runtime_1.jsx)(gui_1.Progress.Indicator, { backgroundColor: "$color", transition: [
+                                'quicker',
+                                {
+                                    transform: {
+                                        overshootClamping: true,
+                                    },
+                                },
+                            ] }) }, key)] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", position: "absolute", b: "$3", l: "$4", $xxs: { display: 'none' }, children: [(0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$3", icon: lucide_icons_2_1.Play, onPress: () => setProgress((prev) => (prev + 20) % 100) }), (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$3", icon: lucide_icons_2_1.RotateCcw, onPress: () => {
+                            setKey(Math.random());
+                            setProgress(0);
+                            setSlider([0]);
+                        } })] })] }));
+}
+//# sourceMappingURL=ProgressDemo.js.map

package/dist/cjs/ProgressDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressDemo.js","sourceRoot":"","sources":["../../src/ProgressDemo.tsx"],"names":[],"mappings":";;;;;AAAA,0DAAyB;AACzB,oCAAuF;AACvF,6DAA0D;AAE1D;IACE,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;IACvC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;IAClD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAW,CAAC,EAAE,CAAC,CAAC,CAAA;IAE1D,OAAO,CACL,6DACE,wBAAC,YAAM,IAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aACzC,wBAAC,eAAS,IAAC,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,2BACtB,QAAQ,IACT,EAEZ,uBAAC,cAAQ,IAAW,KAAK,EAAC,UAAU,EAAC,KAAK,EAAE,QAAQ,YAClD,uBAAC,cAAQ,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,wBAAC,YAAM,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,uBAAC,YAAM,IACL,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,qBAAI,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC,GAAG,GAAG,CAAC,GACvD,EACF,uBAAC,YAAM,IACL,IAAI,EAAC,IAAI,EACT,IAAI,EAAE,0BAAS,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/cjs/RadioGroupDemo.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroupDemo = RadioGroupDemo;
+exports.RadioGroupItemWithLabel = RadioGroupItemWithLabel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+function RadioGroupDemo() {
+    return ((0, jsx_runtime_1.jsx)(gui_1.Theme, { name: "surface2", children: (0, jsx_runtime_1.jsx)(gui_1.RadioGroup, { "aria-labelledby": "Select one item", defaultValue: "3", name: "form", children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { width: 300, items: "center", gap: "$2", children: [(0, jsx_runtime_1.jsx)(RadioGroupItemWithLabel, { size: "$3", value: "2", label: "Second value" }), (0, jsx_runtime_1.jsx)(RadioGroupItemWithLabel, { size: "$4", value: "3", label: "Third value" }), (0, jsx_runtime_1.jsx)(RadioGroupItemWithLabel, { size: "$5", value: "4", label: "Fourth value" })] }) }) }));
+}
+function RadioGroupItemWithLabel(props) {
+    const id = `radiogroup-${props.value}`;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { width: 300, items: "center", gap: "$4", children: [(0, jsx_runtime_1.jsx)(gui_1.RadioGroup.Item, { value: props.value, id: id, size: props.size, children: (0, jsx_runtime_1.jsx)(gui_1.RadioGroup.Indicator, {}) }), (0, jsx_runtime_1.jsx)(gui_1.Label, { size: props.size, htmlFor: id, children: props.label })] }));
+}
+//# sourceMappingURL=RadioGroupDemo.js.map

package/dist/cjs/RadioGroupDemo.js.map

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

package/dist/cjs/RadioGroupHeadlessDemo.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroupHeadlessDemo = RadioGroupHeadlessDemo;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const radio_headless_1 = require("@hanzogui/radio-headless");
+const roving_focus_1 = require("@hanzogui/roving-focus");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_native_1 = require("react-native");
+const gui_1 = require("@hanzo/gui");
+const RadioGroupContext = react_1.default.createContext({});
+const RadioGroupItemContext = react_1.default.createContext({
+    checked: false,
+    disabled: false,
+});
+function RadioGroupHeadlessDemo() {
+    const { providerValue, frameAttrs, rovingFocusGroupAttrs } = (0, radio_headless_1.useRadioGroup)({
+        orientation: 'vertical',
+        name: 'form',
+        defaultValue: '3',
+    });
+    return ((0, jsx_runtime_1.jsx)(RadioGroupContext.Provider, { value: providerValue, children: (0, jsx_runtime_1.jsx)(roving_focus_1.RovingFocusGroup, { ...rovingFocusGroupAttrs, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.radioGroup, ...frameAttrs, children: [(0, jsx_runtime_1.jsx)(RadioGroupItem, { value: "2", id: "2", label: "First Value" }), (0, jsx_runtime_1.jsx)(RadioGroupItem, { value: "3", id: "3", label: "Second Value" }), (0, jsx_runtime_1.jsx)(RadioGroupItem, { value: "4", id: "4", label: "Third Value" })] }) }) }));
+}
+function RadioGroupItem(props) {
+    const theme = (0, gui_1.useTheme)();
+    const { value, id, label } = props;
+    const { providerValue, native, bubbleInput, rovingFocusGroupAttrs, frameAttrs, isFormControl, checked, } = (0, radio_headless_1.useRadioGroupItem)({
+        radioGroupContext: RadioGroupContext,
+        value,
+        id,
+    });
+    return ((0, jsx_runtime_1.jsx)(RadioGroupItemContext.Provider, { value: providerValue, children: gui_1.isWeb && native ? (bubbleInput) : ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.radioGroupItemContainer, children: [(0, jsx_runtime_1.jsx)(roving_focus_1.RovingFocusGroup.Item, { ...rovingFocusGroupAttrs, children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: {
+                            ...styles.radioGroupItem,
+                            borderColor: theme.borderColor?.get(),
+                            ...(checked
+                                ? { borderWidth: 4 }
+                                : { backgroundColor: theme.background?.get() }),
+                        }, ...frameAttrs, onFocus: frameAttrs.onFocus, children: (0, jsx_runtime_1.jsx)(RadioGroupItemIndicator, {}) }) }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: { color: theme.color?.get() }, children: label }), isFormControl && bubbleInput] })) }));
+}
+function RadioGroupItemIndicator() {
+    const theme = (0, gui_1.useTheme)();
+    const params = (0, radio_headless_1.useRadioGroupItemIndicator)({
+        radioGroupItemContext: RadioGroupItemContext,
+        disabled: false,
+    });
+    if (params.checked) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
+                ...styles.radioGroupItemIndicator,
+                backgroundColor: theme.color?.get(),
+            }, ...params }));
+    }
+    return null;
+}
+const styles = react_native_1.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/cjs/RadioGroupHeadlessDemo.js.map

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

package/dist/cjs/RadioGroupUnstyledDemo.js

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroupUnstyledDemo = RadioGroupUnstyledDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+const radio_group_1 = require("@hanzogui/radio-group");
+const RADIO_GROUP_ITEM_NAME = 'RadioGroupItem';
+const RadioGroupItemFrame = (0, gui_1.styled)(gui_1.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 = (0, gui_1.styled)(gui_1.YStack, {
+    name: RADIO_GROUP_INDICATOR_NAME,
+    width: '53%',
+    height: '53%',
+    rounded: 1000,
+    bg: '$color',
+});
+const RADIO_GROUP_NAME = 'RadioGroup';
+const RadioGroupFrame = (0, gui_1.styled)(gui_1.YStack, {
+    name: RADIO_GROUP_NAME,
+    variants: {
+        orientation: {
+            horizontal: {
+                flexDirection: 'row',
+                spaceDirection: 'horizontal',
+            },
+            vertical: {
+                flexDirection: 'column',
+                spaceDirection: 'vertical',
+            },
+        },
+    },
+});
+const RadioGroup = (0, radio_group_1.createRadioGroup)({
+    Frame: RadioGroupFrame,
+    Indicator: RadioGroupIndicatorFrame,
+    Item: RadioGroupItemFrame,
+});
+function RadioGroupUnstyledDemo() {
+    return ((0, jsx_runtime_1.jsx)(RadioGroup, { "aria-labelledby": "Select one item", defaultValue: "3", name: "form", children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { width: 200, items: "center", gap: "$2", children: [(0, jsx_runtime_1.jsx)(RadioGroupItemWithLabel, { value: "2", label: "Option One" }), (0, jsx_runtime_1.jsx)(RadioGroupItemWithLabel, { value: "3", label: "Option Two" })] }) }));
+}
+function RadioGroupItemWithLabel(props) {
+    const id = `radiogroup-${props.value}`;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { width: 300, items: "center", gap: "$4", children: [(0, jsx_runtime_1.jsx)(RadioGroup.Item, { value: props.value, id: id, children: (0, jsx_runtime_1.jsx)(RadioGroup.Indicator, {}) }), (0, jsx_runtime_1.jsx)(gui_1.Label, { htmlFor: id, children: props.label })] }));
+}
+//# sourceMappingURL=RadioGroupUnstyledDemo.js.map

package/dist/cjs/RadioGroupUnstyledDemo.js.map

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

package/dist/cjs/ReplaceThemeDemo.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReplaceThemeDemo = ReplaceThemeDemo;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const theme_1 = require("@hanzogui/theme");
+const gui_1 = require("@hanzo/gui");
+function ReplaceThemeDemo() {
+    const [theme, setTheme] = react_1.default.useState();
+    const update = (0, gui_1.useForceUpdate)();
+    (0, gui_1.useIsomorphicLayoutEffect)(() => {
+        (0, theme_1.addTheme)({
+            name: 'mytheme',
+            insertCSS: true,
+            theme: {
+                color: 'red',
+                color2: 'green',
+            },
+        });
+        setTheme('mytheme');
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { items: "center", gap: "$4", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { gap: "$5", children: (0, jsx_runtime_1.jsx)(gui_1.Theme, { name: theme ?? null, children: (0, jsx_runtime_1.jsx)(gui_1.Square, { rounded: "$8", size: 100, bg: "$color" }) }) }), (0, jsx_runtime_1.jsx)(gui_1.Button, { onPress: () => {
+                    (0, theme_1.replaceTheme)({
+                        name: 'mytheme',
+                        theme: {
+                            color: 'blue',
+                        },
+                    });
+                    update();
+                }, children: "Replace theme to only have $color: blue" })] }));
+}
+//# sourceMappingURL=ReplaceThemeDemo.js.map

package/dist/cjs/ReplaceThemeDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReplaceThemeDemo.js","sourceRoot":"","sources":["../../src/ReplaceThemeDemo.tsx"],"names":[],"mappings":";;;;;AAAA,0DAAyB;AACzB,2CAAwD;AAExD,oCAQmB;AAEnB;IACE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,eAAK,CAAC,QAAQ,EAAO,CAAA;IAC/C,MAAM,MAAM,GAAG,IAAA,oBAAc,GAAE,CAAA;IAE/B,IAAA,+BAAyB,EAAC,GAAG,EAAE;QAC7B,IAAA,gBAAQ,EAAC;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,wBAAC,YAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC7B,uBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,YACd,uBAAC,WAAK,IAAC,IAAI,EAAE,KAAK,IAAI,IAAI,YACxB,uBAAC,YAAM,IAAC,OAAO,EAAC,IAAI,EAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAC,QAAQ,GAAG,GACxC,GACD,EAET,uBAAC,YAAM,IACL,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAA,oBAAY,EAAC;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/cjs/ScrollViewDemo.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollViewDemo = ScrollViewDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+function ScrollViewDemo() {
+    return ((0, jsx_runtime_1.jsx)(gui_1.ScrollView, { maxH: 250, width: "75%", bg: "$background", p: "$4", rounded: "$4", children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { flexWrap: "wrap", items: "center", justify: "center", children: [(0, jsx_runtime_1.jsx)(gui_1.Square, { m: "$4", size: 120, bg: "$color5" }), (0, jsx_runtime_1.jsx)(gui_1.Circle, { m: "$4", size: 120, bg: "$color6" }), (0, jsx_runtime_1.jsx)(gui_1.Square, { m: "$4", size: 120, bg: "$color7" }), (0, jsx_runtime_1.jsx)(gui_1.Circle, { m: "$4", size: 120, bg: "$color8" }), (0, jsx_runtime_1.jsx)(gui_1.Square, { m: "$4", size: 120, bg: "$color9" }), (0, jsx_runtime_1.jsx)(gui_1.Circle, { m: "$4", size: 120, bg: "$color10" }), (0, jsx_runtime_1.jsx)(gui_1.Square, { m: "$4", size: 120, bg: "$color11" }), (0, jsx_runtime_1.jsx)(gui_1.Circle, { m: "$4", size: 120, bg: "$color12" })] }) }));
+}
+//# sourceMappingURL=ScrollViewDemo.js.map

package/dist/cjs/ScrollViewDemo.js.map

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

package/dist/cjs/SelectDemo.js

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

package/dist/cjs/SelectDemo.js.map

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

package/dist/cjs/SeparatorDemo.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SeparatorDemo = SeparatorDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+function SeparatorDemo() {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { width: "100%", maxW: 300, mx: 16, children: [(0, jsx_runtime_1.jsx)(gui_1.Paragraph, { fontWeight: "800", children: "Gui" }), (0, jsx_runtime_1.jsx)(gui_1.Paragraph, { children: "A cross-platform component library." }), (0, jsx_runtime_1.jsx)(gui_1.Separator, { my: 15 }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { height: 20, items: "center", children: [(0, jsx_runtime_1.jsx)(gui_1.Paragraph, { children: "Blog" }), (0, jsx_runtime_1.jsx)(gui_1.Separator, { self: "stretch", vertical: true, mx: 16 }), (0, jsx_runtime_1.jsx)(gui_1.Paragraph, { children: "Docs" }), (0, jsx_runtime_1.jsx)(gui_1.Separator, { self: "stretch", vertical: true, mx: 16 }), (0, jsx_runtime_1.jsx)(gui_1.Paragraph, { children: "Source" })] })] }));
+}
+//# sourceMappingURL=SeparatorDemo.js.map

package/dist/cjs/SeparatorDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeparatorDemo.js","sourceRoot":"","sources":["../../src/SeparatorDemo.tsx"],"names":[],"mappings":";;;;AAAA,oCAAiE;AAEjE;IACE,OAAO,CACL,wBAAC,YAAM,IAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,aACpC,uBAAC,eAAS,IAAC,UAAU,EAAC,KAAK,oBAAgB,EAC3C,uBAAC,eAAS,sDAAgD,EAC1D,uBAAC,eAAS,IAAC,EAAE,EAAE,EAAE,GAAI,EACrB,wBAAC,YAAM,IAAC,MAAM,EAAE,EAAE,EAAE,KAAK,EAAC,QAAQ,aAChC,uBAAC,eAAS,uBAAiB,EAC3B,uBAAC,eAAS,IAAC,IAAI,EAAC,SAAS,EAAC,QAAQ,QAAC,EAAE,EAAE,EAAE,GAAI,EAC7C,uBAAC,eAAS,uBAAiB,EAC3B,uBAAC,eAAS,IAAC,IAAI,EAAC,SAAS,EAAC,QAAQ,QAAC,EAAE,EAAE,EAAE,GAAI,EAC7C,uBAAC,eAAS,yBAAmB,IACtB,IACF,CACV,CAAA;AACH,CAAC"}

package/dist/cjs/ShapesDemo.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShapesDemo = ShapesDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+function ShapesDemo() {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { p: "$2", gap: "$4", children: [(0, jsx_runtime_1.jsx)(gui_1.Square, { size: 100, bg: "$color", elevation: "$4" }), (0, jsx_runtime_1.jsx)(gui_1.Circle, { size: 100, bg: "$color", elevation: "$4" })] }));
+}
+//# sourceMappingURL=ShapesDemo.js.map

package/dist/cjs/ShapesDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShapesDemo.js","sourceRoot":"","sources":["../../src/ShapesDemo.tsx"],"names":[],"mappings":";;;;AAAA,oCAAmD;AAEnD;IACE,OAAO,CACL,wBAAC,YAAM,IAAC,CAAC,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,aACrB,uBAAC,YAAM,IAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAC,QAAQ,EAAC,SAAS,EAAC,IAAI,GAAG,EAChD,uBAAC,YAAM,IAAC,IAAI,EAAE,GAAG,EAAE,EAAE,EAAC,QAAQ,EAAC,SAAS,EAAC,IAAI,GAAG,IACzC,CACV,CAAA;AACH,CAAC"}

package/dist/cjs/SheetDemo.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SheetDemo = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const sheet_1 = require("@hanzogui/sheet");
+const react_1 = tslib_1.__importStar(require("react"));
+const gui_1 = require("@hanzo/gui");
+const spModes = ['percent', 'constant', 'fit', 'mixed'];
+const SheetDemo = () => {
+    const [position, setPosition] = react_1.default.useState(0);
+    const [open, setOpen] = react_1.default.useState(false);
+    const [modal, setModal] = react_1.default.useState(true);
+    const [innerOpen, setInnerOpen] = react_1.default.useState(false);
+    const [snapPointsMode, setSnapPointsMode] = react_1.default.useState('percent');
+    const [mixedFitDemo, setMixedFitDemo] = react_1.default.useState(false);
+    const isPercent = snapPointsMode === 'percent';
+    const isConstant = snapPointsMode === 'constant';
+    const isFit = snapPointsMode === 'fit';
+    const isMixed = snapPointsMode === 'mixed';
+    const snapPoints = isPercent
+        ? [85, 50, 25]
+        : isConstant
+            ? [256, 190]
+            : isFit
+                ? undefined
+                : mixedFitDemo
+                    ? ['fit', 110]
+                    : ['80%', 256, 190];
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$4", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$4", $maxMd: { flexDirection: 'column', items: 'center' }, children: [(0, jsx_runtime_1.jsx)(gui_1.Button, { onPress: () => setOpen(true), children: "Open" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { onPress: () => setModal((x) => !x), children: modal ? 'Type: Modal' : 'Type: Inline' }), (0, jsx_runtime_1.jsx)(gui_1.Button, { onPress: () => setSnapPointsMode((prev) => spModes[(spModes.indexOf(prev) + 1) % spModes.length]), children: `Mode: ${{ percent: 'Percentage', constant: 'Constant', fit: 'Fit', mixed: 'Mixed' }[snapPointsMode]}` })] }), isMixed ? ((0, jsx_runtime_1.jsx)(gui_1.Button, { onPress: () => setMixedFitDemo((x) => !x), children: `Snap Points: ${JSON.stringify(snapPoints)}` })) : ((0, jsx_runtime_1.jsx)(gui_1.XStack, { py: "$2.5", justify: "center", children: (0, jsx_runtime_1.jsx)(gui_1.Paragraph, { children: `Snap Points: ${isFit ? '(none)' : JSON.stringify(snapPoints)}` }) }))] }), (0, jsx_runtime_1.jsxs)(sheet_1.Sheet, { modal: modal, open: open, onOpenChange: setOpen, snapPoints: snapPoints, snapPointsMode: snapPointsMode, dismissOnSnapToBottom: true, position: position, onPositionChange: setPosition, zIndex: 100000, transition: "medium", children: [(0, jsx_runtime_1.jsx)(sheet_1.Sheet.Overlay, { transition: "lazy", bg: "$shadow6", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } }), (0, jsx_runtime_1.jsx)(sheet_1.Sheet.Handle, {}), (0, jsx_runtime_1.jsx)(sheet_1.Sheet.Frame, { p: "$4", justify: "center", items: "center", gap: "$5", children: (0, jsx_runtime_1.jsx)(SheetContents, { modal, isPercent, innerOpen, setInnerOpen, setOpen }) })] })] }));
+};
+exports.SheetDemo = SheetDemo;
+// in general good to memoize the contents to avoid expensive renders during animations
+const SheetContents = (0, react_1.memo)(({ modal, isPercent, innerOpen, setInnerOpen, setOpen }) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$6", circular: true, icon: lucide_icons_2_1.ChevronDown, onPress: () => setOpen(false) }), (0, jsx_runtime_1.jsx)(gui_1.Input, { width: 200 }), modal && isPercent && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(InnerSheet, { open: innerOpen, onOpenChange: setInnerOpen }), (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$6", circular: true, icon: lucide_icons_2_1.ChevronUp, onPress: () => setInnerOpen(true) })] }))] }));
+});
+function InnerSheet(props) {
+    return ((0, jsx_runtime_1.jsxs)(sheet_1.Sheet, { transition: "medium", modal: true, snapPoints: [90], dismissOnSnapToBottom: true, ...props, children: [(0, jsx_runtime_1.jsx)(sheet_1.Sheet.Overlay, { transition: "medium", bg: "$shadow2", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } }), (0, jsx_runtime_1.jsx)(sheet_1.Sheet.Handle, {}), (0, jsx_runtime_1.jsx)(sheet_1.Sheet.Frame, { flex: 1, justify: "center", items: "center", gap: "$5", children: (0, jsx_runtime_1.jsx)(sheet_1.Sheet.ScrollView, { children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { p: "$5", gap: "$8", children: [(0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$6", circular: true, self: "center", icon: lucide_icons_2_1.ChevronDown, onPress: () => props.onOpenChange?.(false) }), (0, jsx_runtime_1.jsx)(gui_1.H2, { children: "Hello world" }), [1, 2, 3, 4, 5, 6, 7, 8].map((i) => ((0, jsx_runtime_1.jsx)(gui_1.Paragraph, { size: "$8", children: "Eu officia sunt ipsum nisi dolore labore est laborum laborum in esse ad pariatur. Dolor excepteur esse deserunt voluptate labore ea. Exercitation ipsum deserunt occaecat cupidatat consequat est adipisicing velit cupidatat ullamco veniam aliquip reprehenderit officia. Officia labore culpa ullamco velit. In sit occaecat velit ipsum fugiat esse aliqua dolor sint." }, i)))] }) }) })] }));
+}
+//# sourceMappingURL=SheetDemo.js.map

package/dist/cjs/SheetDemo.js.map

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