@hanzogui/demos 8.2.1 → 8.3.2

package/dist/cjs/ToastV1Demo.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastV1Demo = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const toast_1 = require("@hanzogui/toast");
+const react_1 = tslib_1.__importDefault(require("react"));
+const gui_1 = require("@hanzo/gui");
+/**
+ *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add:
+ *    - <ToastProvider> at the root
+ *    - <ToastViewport /> where you want to show the toasts
+ */
+const ToastV1Demo = () => {
+    const [native, setNative] = react_1.default.useState(false);
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$4", items: "center", children: [(0, jsx_runtime_1.jsx)(ToastControl, { native: native }), (0, jsx_runtime_1.jsx)(CurrentToast, {}), (0, jsx_runtime_1.jsx)(NativeOptions, { native: native, setNative: setNative })] }));
+};
+exports.ToastV1Demo = ToastV1Demo;
+const CurrentToast = () => {
+    const currentToast = (0, toast_1.useToastState)();
+    if (!currentToast || currentToast.isHandledNatively)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(toast_1.Toast, { duration: currentToast.duration, viewportName: currentToast.viewportName, enterStyle: { opacity: 0, scale: 0.95, y: -80 }, exitStyle: { opacity: 0, scale: 0.95, y: -80 }, opacity: 1, scale: 1, y: -50, transition: "quicker", bg: "$color2", boxShadow: "0px 2px 4px rgba(0,0,0,0.12), 0px 8px 24px rgba(0,0,0,0.08)", children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$5", items: "center", justify: "space-between", children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$0.5", flex: 1, children: [(0, jsx_runtime_1.jsx)(toast_1.Toast.Title, { children: currentToast.title }), !!currentToast.message && ((0, jsx_runtime_1.jsx)(toast_1.Toast.Description, { children: currentToast.message }))] }), (0, jsx_runtime_1.jsx)(toast_1.Toast.Action, { asChild: true, altText: "Dismiss toast", children: (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", children: "Dismiss" }) })] }) }, currentToast.id));
+};
+const ToastControl = ({ native }) => {
+    const toast = (0, toast_1.useToastController)();
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", justify: "center", children: [(0, jsx_runtime_1.jsx)(gui_1.Button, { onPress: () => {
+                    toast.show('Successfully saved!', {
+                        message: "Don't worry, we've got your data.",
+                        native,
+                        demo: true,
+                    });
+                }, children: "Show" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { onPress: () => {
+                    toast.hide();
+                }, children: "Hide" })] }));
+};
+const NativeOptions = ({ native, setNative, }) => {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.Label, { size: "$1", onPress: () => setNative(false), children: "Custom" }), (0, jsx_runtime_1.jsx)(gui_1.Switch, { theme: "surface2", id: "native-toggle", size: "$1", checked: !!native, onCheckedChange: (val) => setNative(val), children: (0, jsx_runtime_1.jsx)(gui_1.Switch.Thumb, { theme: "accent", transition: [
+                        'quickest',
+                        {
+                            transform: {
+                                overshootClamping: true,
+                            },
+                        },
+                    ] }) }), (0, jsx_runtime_1.jsx)(gui_1.Label, { size: "$1", onPress: () => setNative(true), children: "Native" })] }));
+};
+//# sourceMappingURL=ToastV1Demo.js.map

package/dist/cjs/ToastV1Demo.js.map

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

package/dist/cjs/ToggleGroupDemo.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleGroupDemo = ToggleGroupDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const gui_1 = require("@hanzo/gui");
+function ToggleGroupDemo() {
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { px: "$4", children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$10", children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { items: "center", gap: "$6", children: [(0, jsx_runtime_1.jsx)(ToggleGroupComponent, { type: "single", orientation: "horizontal" }), (0, jsx_runtime_1.jsx)(ToggleGroupComponent, { type: "multiple", orientation: "horizontal" })] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$6", y: -28, children: [(0, jsx_runtime_1.jsx)(ToggleGroupComponent, { type: "single", orientation: "vertical" }), (0, jsx_runtime_1.jsx)(ToggleGroupComponent, { type: "multiple", orientation: "vertical" })] })] }) }));
+}
+function ToggleGroupComponent(props) {
+    const id = `switch-${props.type}`;
+    const Group = props.orientation === 'horizontal' ? gui_1.XGroup : gui_1.YGroup;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { flexDirection: props.orientation === 'horizontal' ? 'row' : 'column', items: "center", justify: "center", gap: "$4", children: [(0, jsx_runtime_1.jsx)(gui_1.Label, { pr: "$0", justify: "flex-end", size: "$4", htmlFor: id, children: props.type === 'single' ? 'Single' : 'Multiple' }), (0, jsx_runtime_1.jsx)(gui_1.ToggleGroup, { orientation: props.orientation, id: id, type: props.type, disableDeactivation: props.type === 'single' ? true : undefined, children: (0, jsx_runtime_1.jsxs)(Group, { children: [(0, jsx_runtime_1.jsx)(Group.Item, { children: (0, jsx_runtime_1.jsx)(gui_1.ToggleGroup.Item, { value: "left", "aria-label": "Left aligned", borderRadius: "$4", activeStyle: { backgroundColor: '$color5' }, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.AlignLeft, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(Group.Item, { children: (0, jsx_runtime_1.jsx)(gui_1.ToggleGroup.Item, { value: "center", "aria-label": "Center aligned", borderRadius: "$4", activeStyle: { backgroundColor: '$color5' }, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.AlignCenter, { size: 16 }) }) }), (0, jsx_runtime_1.jsx)(Group.Item, { children: (0, jsx_runtime_1.jsx)(gui_1.ToggleGroup.Item, { value: "right", "aria-label": "Right aligned", borderRadius: "$4", activeStyle: { backgroundColor: '$color5' }, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.AlignRight, { size: 16 }) }) })] }) })] }));
+}
+//# sourceMappingURL=ToggleGroupDemo.js.map

package/dist/cjs/ToggleGroupDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroupDemo.js","sourceRoot":"","sources":["../../src/ToggleGroupDemo.tsx"],"names":[],"mappings":";;;;AAAA,6DAA6E;AAC7E,oCAA+E;AAE/E;IACE,OAAO,CACL,uBAAC,YAAM,IAAC,EAAE,EAAC,IAAI,YACb,wBAAC,YAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,KAAK,aAC9B,wBAAC,YAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC7B,uBAAC,oBAAoB,IAAC,IAAI,EAAC,QAAQ,EAAC,WAAW,EAAC,YAAY,GAAG,EAC/D,uBAAC,oBAAoB,IAAC,IAAI,EAAC,UAAU,EAAC,WAAW,EAAC,YAAY,GAAG,IAC1D,EACT,wBAAC,YAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,CAAC,EAAE,CAAC,EAAE,aACpC,uBAAC,oBAAoB,IAAC,IAAI,EAAC,QAAQ,EAAC,WAAW,EAAC,UAAU,GAAG,EAC7D,uBAAC,oBAAoB,IAAC,IAAI,EAAC,UAAU,EAAC,WAAW,EAAC,UAAU,GAAG,IACxD,IACF,GACF,CACV,CAAA;AACH,CAAC;AAED,SAAS,oBAAoB,CAAC,KAG7B;IACC,MAAM,EAAE,GAAG,UAAU,KAAK,CAAC,IAAI,EAAE,CAAA;IACjC,MAAM,KAAK,GAAG,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,YAAM,CAAC,CAAC,CAAC,YAAM,CAAA;IAElE,OAAO,CACL,wBAAC,YAAM,IACL,aAAa,EAAE,KAAK,CAAC,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EACpE,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,GAAG,EAAC,IAAI,aAER,uBAAC,WAAK,IAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,EAAE,YACpD,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,GAC1C,EAER,uBAAC,iBAAW,IACV,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,KAAK,CAAC,IAAW,EACvB,mBAAmB,EAAE,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,YAE/D,wBAAC,KAAK,eACJ,uBAAC,KAAK,CAAC,IAAI,cACT,uBAAC,iBAAW,CAAC,IAAI,IACf,KAAK,EAAC,MAAM,gBACD,cAAc,EACzB,YAAY,EAAC,IAAI,EACjB,WAAW,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,YAE3C,uBAAC,0BAAS,IAAC,IAAI,EAAE,EAAE,GAAI,GACN,GACR,EAEb,uBAAC,KAAK,CAAC,IAAI,cACT,uBAAC,iBAAW,CAAC,IAAI,IACf,KAAK,EAAC,QAAQ,gBACH,gBAAgB,EAC3B,YAAY,EAAC,IAAI,EACjB,WAAW,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,YAE3C,uBAAC,4BAAW,IAAC,IAAI,EAAE,EAAE,GAAI,GACR,GACR,EAEb,uBAAC,KAAK,CAAC,IAAI,cACT,uBAAC,iBAAW,CAAC,IAAI,IACf,KAAK,EAAC,OAAO,gBACF,eAAe,EAC1B,YAAY,EAAC,IAAI,EACjB,WAAW,EAAE,EAAE,eAAe,EAAE,SAAS,EAAE,YAE3C,uBAAC,2BAAU,IAAC,IAAI,EAAE,EAAE,GAAI,GACP,GACR,IACP,GACI,IACP,CACV,CAAA;AACH,CAAC"}

package/dist/cjs/TokensDemo.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TokensDemo = TokensDemo;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@hanzogui/core");
+const react_1 = tslib_1.__importDefault(require("react"));
+const gui_1 = require("@hanzo/gui");
+const sections = [
+    {
+        name: `Size`,
+        key: `size`,
+    },
+    {
+        name: `Space`,
+        key: 'space',
+    },
+    {
+        name: `Space (-)`,
+        key: `spaceNegative`,
+    },
+    {
+        name: `Radius`,
+        key: `radius`,
+    },
+];
+function TokensDemo() {
+    const [section, setSection] = react_1.default.useState('size');
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$4", children: [(0, jsx_runtime_1.jsx)(gui_1.XGroup, { items: "center", self: "center", children: sections.map(({ name, key }) => {
+                    return ((0, jsx_runtime_1.jsx)(gui_1.XGroup.Item, { children: (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$3", theme: section === key ? 'accent' : null, onPress: () => setSection(key), children: name }) }, key));
+                }) }), (section === 'size' ||
+                section === 'spaceNegative' ||
+                section === 'space' ||
+                section === 'radius') && (0, jsx_runtime_1.jsx)(SizeSection, { section: section })] }));
+}
+function SizeSection({ section }) {
+    const allTokens = (0, core_1.getConfig)().tokens;
+    const tokens = allTokens[section.startsWith('space') ? 'space' : section];
+    const st = Object.keys(tokens).sort((a, b) => Number.parseFloat(a) > Number.parseFloat(b) ? 1 : -1);
+    const spaceTokens = st.filter((t) => Number.parseFloat(t) >= 0);
+    const spaceTokensNegative = st
+        .filter((t) => Number.parseFloat(t) < 0)
+        .sort((a, b) => (Number.parseFloat(a) > Number.parseFloat(b) ? -1 : 1));
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, gap: "$4", children: [(0, jsx_runtime_1.jsx)(gui_1.H2, { children: "Sizes" }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { width: "100%", gap: "$2", children: (section === 'spaceNegative' ? spaceTokensNegative : spaceTokens).map((token) => {
+                    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { width: "100%", items: "center", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { width: "25%", children: (0, jsx_runtime_1.jsxs)(gui_1.H3, { size: "$6", children: ["$", token] }) }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { width: "20%", children: (0, jsx_runtime_1.jsxs)(gui_1.H4, { size: "$5", children: [tokens[token]?.val, "px"] }) }), (0, jsx_runtime_1.jsx)(gui_1.Square, { size: tokens[token]?.val, backgroundColor: "$color5", ...(section === 'spaceNegative' && {
+                                    backgroundColor: '$red5',
+                                    size: -tokens[spaceTokensNegative.find((t) => Number.parseFloat(t) === -Number.parseFloat(token)) ?? token]?.val,
+                                }), ...(section === 'radius' && {
+                                    size: allTokens.size[token]?.val,
+                                    borderRadius: tokens[token]?.val,
+                                }) })] }, token));
+                }) })] }));
+}
+//# sourceMappingURL=TokensDemo.js.map

package/dist/cjs/TokensDemo.js.map

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

package/dist/cjs/TooltipDemo.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipDemo = TooltipDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const gui_1 = require("@hanzo/gui");
+function TooltipDemo() {
+    return ((0, jsx_runtime_1.jsx)(gui_1.Theme, { name: "surface2", children: (0, jsx_runtime_1.jsx)(gui_1.TooltipGroup, { delay: { open: 300, close: 100 }, children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$2", self: "center", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(Demo, { groupId: "0", placement: "top-end", Icon: lucide_icons_2_1.Circle }), (0, jsx_runtime_1.jsx)(Demo, { groupId: "1", placement: "top", Icon: lucide_icons_2_1.ChevronUp }), (0, jsx_runtime_1.jsx)(Demo, { groupId: "2", placement: "top-start", Icon: lucide_icons_2_1.Circle })] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(Demo, { groupId: "3", placement: "left", Icon: lucide_icons_2_1.ChevronLeft }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { flex: 1 }), (0, jsx_runtime_1.jsx)(Demo, { groupId: "4", placement: "right", Icon: lucide_icons_2_1.ChevronRight })] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(Demo, { groupId: "5", placement: "bottom-end", Icon: lucide_icons_2_1.Circle }), (0, jsx_runtime_1.jsx)(Demo, { groupId: "6", placement: "bottom", Icon: lucide_icons_2_1.ChevronDown }), (0, jsx_runtime_1.jsx)(Demo, { groupId: "7", placement: "bottom-start", Icon: lucide_icons_2_1.Circle })] })] }) }) }));
+}
+function Demo({ Icon, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Tooltip, { ...props, children: [(0, jsx_runtime_1.jsx)(gui_1.Tooltip.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(gui_1.Button, { icon: Icon, circular: true }) }), (0, jsx_runtime_1.jsxs)(gui_1.Tooltip.Content, { enterStyle: { x: 0, y: -5, opacity: 0, scale: 0.9 }, exitStyle: { x: 0, y: -5, opacity: 0, scale: 0.9 }, scale: 1, x: 0, y: 0, opacity: 1, py: "$2", px: "$3", transition: [
+                    'quick',
+                    {
+                        opacity: {
+                            overshootClamping: true,
+                        },
+                    },
+                ], children: [(0, jsx_runtime_1.jsx)(gui_1.Tooltip.Arrow, {}), (0, jsx_runtime_1.jsx)(gui_1.Paragraph, { size: "$2", lineHeight: "$1", children: "Hello world" })] })] }));
+}
+//# sourceMappingURL=TooltipDemo.js.map

package/dist/cjs/TooltipDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipDemo.js","sourceRoot":"","sources":["../../src/TooltipDemo.tsx"],"names":[],"mappings":";;;;AAAA,6DAMiC;AAEjC,oCAQmB;AAEnB;IACE,OAAO,CACL,uBAAC,WAAK,IAAC,IAAI,EAAC,UAAU,YACpB,uBAAC,kBAAY,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,YAC5C,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,aAC5B,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,aACd,uBAAC,IAAI,IAAC,OAAO,EAAC,GAAG,EAAC,SAAS,EAAC,SAAS,EAAC,IAAI,EAAE,uBAAM,GAAI,EACtD,uBAAC,IAAI,IAAC,OAAO,EAAC,GAAG,EAAC,SAAS,EAAC,KAAK,EAAC,IAAI,EAAE,0BAAS,GAAI,EACrD,uBAAC,IAAI,IAAC,OAAO,EAAC,GAAG,EAAC,SAAS,EAAC,WAAW,EAAC,IAAI,EAAE,uBAAM,GAAI,IACjD,EACT,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,aACd,uBAAC,IAAI,IAAC,OAAO,EAAC,GAAG,EAAC,SAAS,EAAC,MAAM,EAAC,IAAI,EAAE,4BAAW,GAAI,EACxD,uBAAC,YAAM,IAAC,IAAI,EAAE,CAAC,GAAI,EACnB,uBAAC,IAAI,IAAC,OAAO,EAAC,GAAG,EAAC,SAAS,EAAC,OAAO,EAAC,IAAI,EAAE,6BAAY,GAAI,IACnD,EACT,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,aACd,uBAAC,IAAI,IAAC,OAAO,EAAC,GAAG,EAAC,SAAS,EAAC,YAAY,EAAC,IAAI,EAAE,uBAAM,GAAI,EACzD,uBAAC,IAAI,IAAC,OAAO,EAAC,GAAG,EAAC,SAAS,EAAC,QAAQ,EAAC,IAAI,EAAE,4BAAW,GAAI,EAC1D,uBAAC,IAAI,IAAC,OAAO,EAAC,GAAG,EAAC,SAAS,EAAC,cAAc,EAAC,IAAI,EAAE,uBAAM,GAAI,IACpD,IACF,GACI,GACT,CACT,CAAA;AACH,CAAC;AAED,SAAS,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,KAAK,EAAiC;IAC7D,OAAO,CACL,wBAAC,aAAO,OAAK,KAAK,aAChB,uBAAC,aAAO,CAAC,OAAO,IAAC,OAAO,kBACtB,uBAAC,YAAM,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,SAAG,GACf,EAClB,wBAAC,aAAO,CAAC,OAAO,IACd,UAAU,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EACnD,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAClD,KAAK,EAAE,CAAC,EACR,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,OAAO,EAAE,CAAC,EACV,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,UAAU,EAAE;oBACV,OAAO;oBACP;wBACE,OAAO,EAAE;4BACP,iBAAiB,EAAE,IAAI;yBACxB;qBACF;iBACF,aAED,uBAAC,aAAO,CAAC,KAAK,KAAG,EACjB,uBAAC,eAAS,IAAC,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,IAAI,4BAExB,IACI,IACV,CACX,CAAA;AACH,CAAC"}

package/dist/cjs/UpdateThemeDemo.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UpdateThemeDemo = UpdateThemeDemo;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const v3_1 = require("@hanzogui/config/v3");
+const theme_1 = require("@hanzogui/theme");
+const gui_1 = require("@hanzo/gui");
+const colors = v3_1.config.tokens.color;
+const colorKeys = Object.keys(colors);
+function UpdateThemeDemo() {
+    const [theme, setTheme] = react_1.default.useState();
+    (0, gui_1.useIsomorphicLayoutEffect)(() => {
+        (0, theme_1.addTheme)({
+            name: 'custom',
+            insertCSS: true,
+            theme: {
+                color: 'red',
+            },
+        });
+        setTheme('custom');
+    }, []);
+    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: () => {
+                    const randomColor = (0, gui_1.getVariableValue)(colors[colorKeys[Math.floor(Math.random() * colorKeys.length)]]);
+                    (0, theme_1.updateTheme)({
+                        name: 'custom',
+                        theme: {
+                            color: randomColor,
+                        },
+                    });
+                }, children: "Set to random color" })] }));
+}
+//# sourceMappingURL=UpdateThemeDemo.js.map

package/dist/cjs/UpdateThemeDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UpdateThemeDemo.js","sourceRoot":"","sources":["../../src/UpdateThemeDemo.tsx"],"names":[],"mappings":";;;;;AAAA,0DAAyB;AACzB,4CAA4C;AAC5C,2CAAuD;AAEvD,oCAQmB;AAEnB,MAAM,MAAM,GAAG,WAAM,CAAC,MAAM,CAAC,KAAK,CAAA;AAClC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;AAErC;IACE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,eAAK,CAAC,QAAQ,EAAO,CAAA;IAE/C,IAAA,+BAAyB,EAAC,GAAG,EAAE;QAC7B,IAAA,gBAAQ,EAAC;YACP,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,IAAI;YACf,KAAK,EAAE;gBACL,KAAK,EAAE,KAAK;aACb;SACF,CAAC,CAAA;QACF,QAAQ,CAAC,QAAQ,CAAC,CAAA;IACpB,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,OAAO,CACL,wBAAC,YAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC7B,uBAAC,YAAM,IAAC,GAAG,EAAE,IAAI,YACf,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,MAAM,WAAW,GAAG,IAAA,sBAAgB,EAClC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAChE,CAAA;oBACD,IAAA,mBAAW,EAAC;wBACV,IAAI,EAAE,QAAQ;wBACd,KAAK,EAAE;4BACL,KAAK,EAAE,WAAW;yBACnB;qBACF,CAAC,CAAA;gBACJ,CAAC,oCAGM,IACF,CACV,CAAA;AACH,CAAC"}

package/dist/cjs/WebNativeImageDemo.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WebNativeImageDemo = WebNativeImageDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const image_1 = require("@hanzogui/image");
+function WebNativeImageDemo() {
+    return (0, jsx_runtime_1.jsx)(image_1.Image, { src: "https://picsum.photos/200/300", width: 200, height: 300 });
+}
+//# sourceMappingURL=WebNativeImageDemo.js.map

package/dist/cjs/WebNativeImageDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebNativeImageDemo.js","sourceRoot":"","sources":["../../src/WebNativeImageDemo.tsx"],"names":[],"mappings":";;;;AAAA,2CAAuC;AAEvC;IACE,OAAO,uBAAC,aAAK,IAAC,GAAG,EAAC,+BAA+B,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,GAAI,CAAA;AAC/E,CAAC"}

package/dist/cjs/hanzogui.config.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const dev_config_1 = require("@hanzogui/dev-config");
+const gui_1 = require("@hanzo/gui");
+const tamaConf = (0, gui_1.createGui)(dev_config_1.config);
+exports.default = tamaConf;
+//# sourceMappingURL=hanzogui.config.js.map

package/dist/cjs/hanzogui.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hanzogui.config.js","sourceRoot":"","sources":["../../src/hanzogui.config.ts"],"names":[],"mappings":";;AAAA,qDAA6C;AAC7C,oCAAsC;AAEtC,MAAM,QAAQ,GAAG,IAAA,eAAS,EAAC,mBAAM,CAAC,CAAA;kBAYnB,QAAQ"}

package/dist/cjs/index.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AccordionDemo.js"), exports);
+tslib_1.__exportStar(require("./AddThemeDemo.js"), exports);
+tslib_1.__exportStar(require("./AlertDialogDemo.js"), exports);
+tslib_1.__exportStar(require("./AnimationsDelayDemo.js"), exports);
+tslib_1.__exportStar(require("./AnimationsDemo.js"), exports);
+tslib_1.__exportStar(require("./AnimationsEnterDemo.js"), exports);
+tslib_1.__exportStar(require("./AnimationsHoverDemo.js"), exports);
+tslib_1.__exportStar(require("./AnimationsPresenceDemo.js"), exports);
+tslib_1.__exportStar(require("./AnimationsTimingDemo.js"), exports);
+tslib_1.__exportStar(require("./AvatarDemo.js"), exports);
+tslib_1.__exportStar(require("./BoxShadowTokenDemo.js"), exports);
+tslib_1.__exportStar(require("./BuildAButtonDemo.js"), exports);
+tslib_1.__exportStar(require("./ButtonDemo.js"), exports);
+tslib_1.__exportStar(require("./ThemeBuilderDemo.js"), exports);
+tslib_1.__exportStar(require("./CardDemo.js"), exports);
+tslib_1.__exportStar(require("./CheckboxDemo.js"), exports);
+tslib_1.__exportStar(require("./CheckboxHeadlessDemo.js"), exports);
+tslib_1.__exportStar(require("./CheckboxUnstyledDemo.js"), exports);
+tslib_1.__exportStar(require("./ColorsDemo.js"), exports);
+tslib_1.__exportStar(require("./ContextMenuDemo.js"), exports);
+tslib_1.__exportStar(require("./MenuDemo.js"), exports);
+tslib_1.__exportStar(require("./DialogDemo.js"), exports);
+tslib_1.__exportStar(require("./FormsDemo.js"), exports);
+tslib_1.__exportStar(require("./GroupDemo.js"), exports);
+tslib_1.__exportStar(require("./HeadingsDemo.js"), exports);
+tslib_1.__exportStar(require("./ImageDemo.js"), exports);
+tslib_1.__exportStar(require("./WebNativeImageDemo.js"), exports);
+tslib_1.__exportStar(require("./InputsDemo.js"), exports);
+tslib_1.__exportStar(require("./NewInputsDemo.js"), exports);
+tslib_1.__exportStar(require("./LabelDemo.js"), exports);
+tslib_1.__exportStar(require("./LinearGradientDemo.js"), exports);
+tslib_1.__exportStar(require("./ListItemDemo.js"), exports);
+tslib_1.__exportStar(require("./LucideIconsDemo.js"), exports);
+tslib_1.__exportStar(require("./PopoverDemo.js"), exports);
+tslib_1.__exportStar(require("./ProgressDemo.js"), exports);
+tslib_1.__exportStar(require("./RadioGroupDemo.js"), exports);
+tslib_1.__exportStar(require("./RadioGroupHeadlessDemo.js"), exports);
+tslib_1.__exportStar(require("./RadioGroupUnstyledDemo.js"), exports);
+tslib_1.__exportStar(require("./ReplaceThemeDemo.js"), exports);
+tslib_1.__exportStar(require("./ScrollViewDemo.js"), exports);
+tslib_1.__exportStar(require("./SelectDemo.js"), exports);
+tslib_1.__exportStar(require("./SeparatorDemo.js"), exports);
+tslib_1.__exportStar(require("./ShapesDemo.js"), exports);
+tslib_1.__exportStar(require("./SheetDemo.js"), exports);
+tslib_1.__exportStar(require("./SliderDemo.js"), exports);
+tslib_1.__exportStar(require("./SpinnerDemo.js"), exports);
+tslib_1.__exportStar(require("./StacksDemo.js"), exports);
+tslib_1.__exportStar(require("./SwitchDemo.js"), exports);
+tslib_1.__exportStar(require("./SwitchHeadlessDemo.js"), exports);
+tslib_1.__exportStar(require("./SwitchUnstyledDemo.js"), exports);
+tslib_1.__exportStar(require("./TabsAdvancedDemo.js"), exports);
+tslib_1.__exportStar(require("./TabsDemo.js"), exports);
+tslib_1.__exportStar(require("./TextDemo.js"), exports);
+tslib_1.__exportStar(require("./ThemeInverseDemo.js"), exports);
+tslib_1.__exportStar(require("./ToastDemo.js"), exports);
+tslib_1.__exportStar(require("./ToastDuplicateDemo.js"), exports);
+tslib_1.__exportStar(require("./ToastV1Demo.js"), exports);
+tslib_1.__exportStar(require("./ToggleGroupDemo.js"), exports);
+tslib_1.__exportStar(require("./TokensDemo.js"), exports);
+tslib_1.__exportStar(require("./TooltipDemo.js"), exports);
+tslib_1.__exportStar(require("./UpdateThemeDemo.js"), exports);
+tslib_1.__exportStar(require("./useOnIntersecting.js"), exports);
+tslib_1.__exportStar(require("./TabsHeadlessDemo.js"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";;;AAGA,6DAAmC;AACnC,4DAAkC;AAClC,+DAAqC;AACrC,mEAAyC;AACzC,8DAAoC;AACpC,mEAAyC;AACzC,mEAAyC;AACzC,sEAA4C;AAC5C,oEAA0C;AAC1C,0DAAgC;AAChC,kEAAwC;AACxC,gEAAsC;AACtC,0DAAgC;AAChC,gEAAsC;AACtC,wDAA8B;AAC9B,4DAAkC;AAClC,oEAA0C;AAC1C,oEAA0C;AAC1C,0DAAgC;AAChC,+DAAqC;AACrC,wDAA8B;AAC9B,0DAAgC;AAChC,yDAA+B;AAC/B,yDAA+B;AAC/B,4DAAkC;AAClC,yDAA+B;AAC/B,kEAAwC;AACxC,0DAAgC;AAChC,6DAAmC;AACnC,yDAA+B;AAC/B,kEAAwC;AACxC,4DAAkC;AAClC,+DAAqC;AACrC,2DAAiC;AACjC,4DAAkC;AAClC,8DAAoC;AACpC,sEAA4C;AAC5C,sEAA4C;AAC5C,gEAAsC;AACtC,8DAAoC;AACpC,0DAAgC;AAChC,6DAAmC;AACnC,0DAAgC;AAChC,yDAA+B;AAC/B,0DAAgC;AAChC,2DAAiC;AACjC,0DAAgC;AAChC,0DAAgC;AAChC,kEAAwC;AACxC,kEAAwC;AACxC,gEAAsC;AACtC,wDAA8B;AAC9B,wDAA8B;AAC9B,gEAAsC;AACtC,yDAA+B;AAC/B,kEAAwC;AACxC,2DAAiC;AACjC,+DAAqC;AACrC,0DAAgC;AAChC,2DAAiC;AACjC,+DAAqC;AACrC,iEAAuC;AACvC,gEAAsC"}

package/dist/cjs/package.json

@@ -0,0 +1 @@
+{ "type": "commonjs" }

package/dist/cjs/useOnIntersecting.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsIntersecting = useIsIntersecting;
+exports.useOnIntersecting = useOnIntersecting;
+const react_1 = require("react");
+const gui_1 = require("@hanzo/gui");
+function useIsIntersecting(refs, { once, ...opts } = {}) {
+    const [values, setValues] = (0, react_1.useState)([]);
+    useOnIntersecting(refs, (entries) => {
+        if (!gui_1.isWeb)
+            return;
+        const intersecting = entries.some((x) => x?.isIntersecting);
+        if (once && !intersecting)
+            return;
+        setValues((prev) => {
+            const next = entries.map((e) => e?.isIntersecting ?? false);
+            if (prev.length === next.length && prev.every((e, i) => e === next[i])) {
+                return prev;
+            }
+            return next;
+        });
+    }, opts);
+    return (Array.isArray(refs) ? values : values[0]);
+}
+function useOnIntersecting(refsIn, incomingCbRaw, { threshold = 0, root, rootMargin } = {}, mountArgs = []) {
+    const onIntersectEvent = (0, gui_1.useEvent)(incomingCbRaw);
+    (0, react_1.useEffect)(() => {
+        if (!gui_1.isWeb)
+            return;
+        const refs = (Array.isArray(refsIn) ? refsIn : [refsIn]);
+        if (!refs.length)
+            return;
+        let dispose = null;
+        let currentEntries = [];
+        const options = {
+            threshold,
+            root,
+            rootMargin,
+        };
+        const io = new IntersectionObserver((entries) => {
+            currentEntries = refs.map((ref, index) => {
+                return (entries.find((x) => x.target === ref.current) ?? currentEntries[index] ?? null);
+            });
+            dispose?.();
+            dispose = onIntersectEvent(currentEntries) || null;
+        }, options);
+        for (const ref of refs) {
+            if (ref.current) {
+                io.observe(ref.current);
+            }
+        }
+        return () => {
+            dispose?.();
+            io.disconnect();
+        };
+    }, [
+        onIntersectEvent,
+        refsIn,
+        root,
+        rootMargin,
+        threshold,
+        ...mountArgs,
+    ]);
+}
+//# sourceMappingURL=useOnIntersecting.js.map

package/dist/cjs/useOnIntersecting.js.map

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

package/dist/esm/AccordionDemo.js

@@ -0,0 +1,7 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown } from '@hanzogui/lucide-icons-2';
+import { Accordion, Paragraph, Square } from '@hanzo/gui';
+export function AccordionDemo() {
+    return (_jsxs(Accordion, { overflow: "hidden", width: "$20", type: "multiple", children: [_jsxs(Accordion.Item, { value: "a1", mb: -1, children: [_jsx(Accordion.Trigger, { flexDirection: "row", justify: "space-between", borderWidth: 1, borderColor: "$borderColor", children: ({ open }) => (_jsxs(_Fragment, { children: [_jsx(Paragraph, { children: "1. Take a cold shower" }), _jsx(Square, { transparent: true, transition: "quick", rotate: open ? '180deg' : '0deg', children: _jsx(ChevronDown, { size: "$1", color: "$color" }) })] })) }), _jsx(Accordion.HeightAnimator, { transition: "300ms", children: _jsx(Accordion.Content, { transition: "300ms", exitStyle: { opacity: 0 }, borderWidth: 1, borderTopWidth: 0, borderColor: "$borderColor", children: _jsx(Paragraph, { children: "Cold showers can help reduce inflammation, relieve pain, improve circulation, lower stress levels, and reduce muscle soreness and fatigue." }) }) })] }), _jsxs(Accordion.Item, { value: "a2", children: [_jsx(Accordion.Trigger, { flexDirection: "row", justify: "space-between", borderWidth: 1, borderColor: "$borderColor", children: ({ open }) => (_jsxs(_Fragment, { children: [_jsx(Paragraph, { children: "2. Eat 4 eggs" }), _jsx(Square, { transparent: true, transition: "quick", rotate: open ? '180deg' : '0deg', children: _jsx(ChevronDown, { size: "$1", color: "$color" }) })] })) }), _jsx(Accordion.HeightAnimator, { transition: "300ms", children: _jsx(Accordion.Content, { transition: "300ms", exitStyle: { opacity: 0 }, borderWidth: 1, borderTopWidth: 0, borderColor: "$borderColor", children: _jsx(Paragraph, { children: "Eggs have been a dietary staple since time immemorial and there's good reason for their continued presence in our menus and meals." }) }) })] })] }));
+}
+//# sourceMappingURL=AccordionDemo.js.map

package/dist/esm/AccordionDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionDemo.js","sourceRoot":"","sources":["../../src/AccordionDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACtD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEzD,MAAM,UAAU,aAAa;IAC3B,OAAO,CACL,MAAC,SAAS,IAAC,QAAQ,EAAC,QAAQ,EAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,UAAU,aAEtD,MAAC,SAAS,CAAC,IAAI,IAAC,KAAK,EAAC,IAAI,EAAC,EAAE,EAAE,CAAC,CAAC,aAC/B,KAAC,SAAS,CAAC,OAAO,IAChB,aAAa,EAAC,KAAK,EACnB,OAAO,EAAC,eAAe,EACvB,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,YAEzB,CAAC,EAAE,IAAI,EAAqB,EAAE,EAAE,CAAC,CAChC,8BACE,KAAC,SAAS,wCAAkC,EAC5C,KAAC,MAAM,IAAC,WAAW,QAAC,UAAU,EAAC,OAAO,EAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,YACrE,KAAC,WAAW,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,GAAG,GACjC,IACR,CACJ,GACiB,EACpB,KAAC,SAAS,CAAC,cAAc,IAAC,UAAU,EAAC,OAAO,YAC1C,KAAC,SAAS,CAAC,OAAO,IAChB,UAAU,EAAC,OAAO,EAClB,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACzB,WAAW,EAAE,CAAC,EACd,cAAc,EAAE,CAAC,EACjB,WAAW,EAAC,cAAc,YAE1B,KAAC,SAAS,6JAGE,GACM,GACK,IACZ,EAEjB,MAAC,SAAS,CAAC,IAAI,IAAC,KAAK,EAAC,IAAI,aACxB,KAAC,SAAS,CAAC,OAAO,IAChB,aAAa,EAAC,KAAK,EACnB,OAAO,EAAC,eAAe,EACvB,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,YAEzB,CAAC,EAAE,IAAI,EAAqB,EAAE,EAAE,CAAC,CAChC,8BACE,KAAC,SAAS,gCAA0B,EACpC,KAAC,MAAM,IAAC,WAAW,QAAC,UAAU,EAAC,OAAO,EAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,YACrE,KAAC,WAAW,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,GAAG,GACjC,IACR,CACJ,GACiB,EACpB,KAAC,SAAS,CAAC,cAAc,IAAC,UAAU,EAAC,OAAO,YAC1C,KAAC,SAAS,CAAC,OAAO,IAChB,UAAU,EAAC,OAAO,EAClB,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EACzB,WAAW,EAAE,CAAC,EACd,cAAc,EAAE,CAAC,EACjB,WAAW,EAAC,cAAc,YAE1B,KAAC,SAAS,qJAGE,GACM,GACK,IACZ,IACP,CACb,CAAA;AACH,CAAC"}

package/dist/esm/AddThemeDemo.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { addTheme } from '@hanzogui/theme';
+import React from 'react';
+import { Button, H3, Theme, View, YStack } from '@hanzo/gui';
+export function AddThemeDemo() {
+    const [theme, setTheme] = React.useState();
+    return (_jsxs(YStack, { items: "center", gap: "$4", children: [_jsxs(H3, { children: ["Theme: ", theme ?? 'none'] }), _jsx(Theme, { name: theme ?? 'red', children: _jsx(View, { rounded: "$8", width: 100, height: 100, bg: "$color" }) }), _jsx(Button, { disabled: theme === 'superblue', onPress: () => {
+                    addTheme({
+                        name: 'superblue',
+                        insertCSS: true,
+                        theme: {
+                            background: '#000',
+                            color: 'blue',
+                        },
+                    });
+                    setTheme('superblue');
+                }, children: "Add superblue theme" })] }));
+}
+//# sourceMappingURL=AddThemeDemo.js.map

package/dist/esm/AddThemeDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddThemeDemo.js","sourceRoot":"","sources":["../../src/AddThemeDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC1C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAE5D,MAAM,UAAU,YAAY;IAC1B,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,EAAO,CAAA;IAE/C,OAAO,CACL,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC7B,MAAC,EAAE,0BAAS,KAAK,IAAI,MAAM,IAAM,EAEjC,KAAC,KAAK,IAAC,IAAI,EAAE,KAAK,IAAI,KAAK,YACzB,KAAC,IAAI,IAAC,OAAO,EAAC,IAAI,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAC,QAAQ,GAAG,GACpD,EAER,KAAC,MAAM,IACL,QAAQ,EAAE,KAAK,KAAK,WAAW,EAC/B,OAAO,EAAE,GAAG,EAAE;oBACZ,QAAQ,CAAC;wBACP,IAAI,EAAE,WAAW;wBACjB,SAAS,EAAE,IAAI;wBACf,KAAK,EAAE;4BACL,UAAU,EAAE,MAAM;4BAClB,KAAK,EAAE,MAAM;yBACd;qBACF,CAAC,CAAA;oBACF,QAAQ,CAAC,WAAW,CAAC,CAAA;gBACvB,CAAC,oCAGM,IACF,CACV,CAAA;AACH,CAAC"}

package/dist/esm/AlertDialogDemo.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog, Button, XStack, YStack } from '@hanzo/gui';
+export function AlertDialogDemo() {
+    return (_jsxs(AlertDialog, { native: true, children: [_jsx(AlertDialog.Trigger, { asChild: true, children: _jsx(Button, { children: "Show Alert" }) }), _jsxs(AlertDialog.Portal, { children: [_jsx(AlertDialog.Overlay, { transition: "quick", opacity: 0.5, backgroundColor: "$background", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } }, "overlay"), _jsx(AlertDialog.Content, { elevate: true, transition: [
+                            'quick',
+                            {
+                                opacity: {
+                                    overshootClamping: true,
+                                },
+                            },
+                        ], enterStyle: { x: 0, y: -20, opacity: 0, scale: 0.9 }, exitStyle: { x: 0, y: 10, opacity: 0, scale: 0.95 }, x: 0, scale: 1, opacity: 1, y: 0, children: _jsxs(YStack, { gap: "$4", children: [_jsx(AlertDialog.Title, { children: "Accept" }), _jsx(AlertDialog.Description, { children: "By pressing yes, you accept our terms and conditions." }), _jsxs(XStack, { gap: "$3", justify: "flex-end", children: [_jsx(AlertDialog.Cancel, { asChild: true, children: _jsx(Button, { children: "Cancel" }) }), _jsx(AlertDialog.Action, { asChild: true, children: _jsx(Button, { theme: "accent", children: "Accept" }) })] })] }) }, "content")] })] }));
+}
+//# sourceMappingURL=AlertDialogDemo.js.map

package/dist/esm/AlertDialogDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialogDemo.js","sourceRoot":"","sources":["../../src/AlertDialogDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEhE,MAAM,UAAU,eAAe;IAC7B,OAAO,CACL,MAAC,WAAW,IAAC,MAAM,mBACjB,KAAC,WAAW,CAAC,OAAO,IAAC,OAAO,kBAC1B,KAAC,MAAM,6BAAoB,GACP,EAEtB,MAAC,WAAW,CAAC,MAAM,eACjB,KAAC,WAAW,CAAC,OAAO,IAElB,UAAU,EAAC,OAAO,EAClB,OAAO,EAAE,GAAG,EACZ,eAAe,EAAC,aAAa,EAC7B,UAAU,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAC1B,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,IALrB,SAAS,CAMb,EACF,KAAC,WAAW,CAAC,OAAO,IAClB,OAAO,QAEP,UAAU,EAAE;4BACV,OAAO;4BACP;gCACE,OAAO,EAAE;oCACP,iBAAiB,EAAE,IAAI;iCACxB;6BACF;yBACF,EACD,UAAU,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EACpD,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EACnD,CAAC,EAAE,CAAC,EACJ,KAAK,EAAE,CAAC,EACR,OAAO,EAAE,CAAC,EACV,CAAC,EAAE,CAAC,YAEJ,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,aACd,KAAC,WAAW,CAAC,KAAK,yBAA2B,EAC7C,KAAC,WAAW,CAAC,WAAW,wEAEE,EAE1B,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,aACjC,KAAC,WAAW,CAAC,MAAM,IAAC,OAAO,kBACzB,KAAC,MAAM,yBAAgB,GACJ,EACrB,KAAC,WAAW,CAAC,MAAM,IAAC,OAAO,kBACzB,KAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,uBAAgB,GACnB,IACd,IACF,IA9BL,SAAS,CA+BO,IACH,IACT,CACf,CAAA;AACH,CAAC"}

package/dist/esm/AnimationsDelayDemo.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { AnimatePresence, Button, Square, XStack, YStack, isWeb } from '@hanzo/gui';
+import { useIsIntersecting } from './useOnIntersecting.js';
+const colors = ['$color9', '$color10', '$color11', '$color12'];
+export function AnimationsDelayDemo() {
+    const ref = React.useRef(null);
+    const hasIntersected = useIsIntersecting(ref, { once: true });
+    const [show, setShow] = React.useState(true);
+    if (isWeb && !hasIntersected) {
+        return _jsx(YStack, { ref: ref, height: 150 });
+    }
+    return (_jsxs(YStack, { gap: "$4", items: "center", children: [_jsx(XStack, { gap: "$3", height: 100, items: "center", justify: "center", children: _jsx(AnimatePresence, { children: show &&
+                        colors.map((color, i) => (_jsx(Square, { transition: ['200ms', { delay: i * 100 }], enterStyle: {
+                                opacity: 0,
+                                scale: 0.5,
+                                y: 20,
+                            }, exitStyle: {
+                                opacity: 0,
+                                scale: 0,
+                                y: 20,
+                            }, size: 60, bg: color, rounded: "$4" }, color))) }) }), _jsx(Button, { size: "$3", onPress: () => setShow(!show), children: show ? 'Hide' : 'Show' })] }));
+}
+//# sourceMappingURL=AnimationsDelayDemo.js.map

package/dist/esm/AnimationsDelayDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationsDelayDemo.js","sourceRoot":"","sources":["../../src/AnimationsDelayDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAEnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAyB,CAAA;AAE3D,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,CAAU,CAAA;AAEvE,MAAM,UAAU,mBAAmB;IACjC,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAA;IAC3C,MAAM,cAAc,GAAG,iBAAiB,CAAC,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAA;IAC7D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAE5C,IAAI,KAAK,IAAI,CAAC,cAAc,EAAE,CAAC;QAC7B,OAAO,KAAC,MAAM,IAAC,GAAG,EAAE,GAAU,EAAE,MAAM,EAAE,GAAG,GAAI,CAAA;IACjD,CAAC;IAED,OAAO,CACL,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,aAC7B,KAAC,MAAM,IAAC,GAAG,EAAC,IAAI,EAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,YAC3D,KAAC,eAAe,cACb,IAAI;wBACH,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CACvB,KAAC,MAAM,IAEL,UAAU,EAAE,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,CAAC,GAAG,GAAG,EAAE,CAAC,EACzC,UAAU,EAAE;gCACV,OAAO,EAAE,CAAC;gCACV,KAAK,EAAE,GAAG;gCACV,CAAC,EAAE,EAAE;6BACN,EACD,SAAS,EAAE;gCACT,OAAO,EAAE,CAAC;gCACV,KAAK,EAAE,CAAC;gCACR,CAAC,EAAE,EAAE;6BACN,EACD,IAAI,EAAE,EAAE,EACR,EAAE,EAAE,KAAK,EACT,OAAO,EAAC,IAAI,IAdP,KAAK,CAeV,CACH,CAAC,GACY,GACX,EAET,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,YAC5C,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,GAChB,IACF,CACV,CAAA;AACH,CAAC"}

package/dist/esm/AnimationsDemo.js

@@ -0,0 +1,55 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { LogoIcon } from '@hanzogui/logo';
+import { Play } from '@hanzogui/lucide-icons-2';
+import { Button, isWeb, Square, useControllableState, useEvent } from '@hanzo/gui';
+export function AnimationsDemo(props) {
+    const [positionI, setPositionI] = useControllableState({
+        strategy: 'most-recent-wins',
+        prop: props.position,
+        defaultProp: 0,
+    });
+    const position = positions[positionI];
+    const onPress = useEvent(() => {
+        setPositionI((x) => {
+            return (x + 1) % positions.length;
+        });
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(Square, { transition: props.animation ?? 'bouncy', animateOnly: ['transform'], onPress: onPress, size: 104, borderColor: "$borderColor", borderWidth: 1, rounded: "$9", bg: "$color9", hoverStyle: {
+                    scale: 1.01,
+                }, pressStyle: {
+                    scale: 0.9,
+                }, ...position, children: isWeb && _jsx(LogoIcon, { downscale: 0.75 }) }), _jsx(Button, { position: "absolute", b: 20, l: 20, icon: Play, theme: props.tint ?? 'surface2', size: "$5", circular: true, onPress: onPress })] }));
+}
+export const positions = [
+    {
+        x: 0,
+        y: 0,
+        scale: 1,
+        rotate: '0deg',
+    },
+    {
+        x: -50,
+        y: -50,
+        scale: 0.5,
+        rotate: '-45deg',
+        hoverStyle: {
+            scale: 0.6,
+        },
+        pressStyle: {
+            scale: 0.4,
+        },
+    },
+    {
+        x: 50,
+        y: 50,
+        scale: 1,
+        rotate: '180deg',
+        hoverStyle: {
+            scale: 1.1,
+        },
+        pressStyle: {
+            scale: 0.9,
+        },
+    },
+];
+//# sourceMappingURL=AnimationsDemo.js.map

package/dist/esm/AnimationsDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationsDemo.js","sourceRoot":"","sources":["../../src/AnimationsDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AAC/C,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,oBAAoB,EAAS,QAAQ,EAAE,MAAM,YAAY,CAAA;AAEzF,MAAM,UAAU,cAAc,CAAC,KAAK;IAClC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,oBAAoB,CAAC;QACrD,QAAQ,EAAE,kBAAkB;QAC5B,IAAI,EAAE,KAAK,CAAC,QAAQ;QACpB,WAAW,EAAE,CAAC;KACf,CAAC,CAAA;IACF,MAAM,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAC,CAAA;IACrC,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC5B,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE;YACjB,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,SAAS,CAAC,MAAM,CAAA;QACnC,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,8BACE,KAAC,MAAM,IACL,UAAU,EAAE,KAAK,CAAC,SAAS,IAAI,QAAQ,EACvC,WAAW,EAAE,CAAC,WAAW,CAAC,EAC1B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,GAAG,EACT,WAAW,EAAC,cAAc,EAC1B,WAAW,EAAE,CAAC,EACd,OAAO,EAAC,IAAI,EACZ,EAAE,EAAC,SAAS,EACZ,UAAU,EAAE;oBACV,KAAK,EAAE,IAAI;iBACZ,EACD,UAAU,EAAE;oBACV,KAAK,EAAE,GAAG;iBACX,KACG,QAAQ,YAEX,KAAK,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAE,IAAI,GAAI,GAChC,EAET,KAAC,MAAM,IACL,QAAQ,EAAC,UAAU,EACnB,CAAC,EAAE,EAAE,EACL,CAAC,EAAE,EAAE,EACL,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,CAAC,IAAI,IAAI,UAAU,EAC/B,IAAI,EAAC,IAAI,EACT,QAAQ,QACR,OAAO,EAAE,OAAO,GAChB,IACD,CACJ,CAAA;AACH,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB;QACE,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;QACJ,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,MAAM;KACf;IACD;QACE,CAAC,EAAE,CAAC,EAAE;QACN,CAAC,EAAE,CAAC,EAAE;QACN,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,QAAQ;QAChB,UAAU,EAAE;YACV,KAAK,EAAE,GAAG;SACX;QACD,UAAU,EAAE;YACV,KAAK,EAAE,GAAG;SACX;KACF;IACD;QACE,CAAC,EAAE,EAAE;QACL,CAAC,EAAE,EAAE;QACL,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,QAAQ;QAChB,UAAU,EAAE;YACV,KAAK,EAAE,GAAG;SACX;QACD,UAAU,EAAE;YACV,KAAK,EAAE,GAAG;SACX;KACF;CACF,CAAA"}

package/dist/esm/AnimationsEnterDemo.js

@@ -0,0 +1,19 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { LogoIcon } from '@hanzogui/logo';
+import { Button, Square, YStack, isWeb } from '@hanzo/gui';
+import { useIsIntersecting } from './useOnIntersecting.js';
+export function AnimationsEnterDemo(props) {
+    const ref = React.useRef(null);
+    const [key, setKey] = React.useState(0);
+    const hasIntersected = useIsIntersecting(ref, { once: true });
+    if (isWeb && !hasIntersected) {
+        return _jsx(YStack, { ref: ref });
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Square, { enterStyle: {
+                    scale: 1.5,
+                    y: -10,
+                    opacity: 0,
+                }, transition: "bouncy", elevation: "$4", size: 110, opacity: 1, scale: 1, y: 0, bg: "$color9", rounded: "$9", children: props.children ?? _jsx(LogoIcon, { downscale: 0.75 }) }, key), _jsx(Button, { size: "$3", mt: "$4", onPress: () => setKey(Math.random()), children: "Re-mount" })] }));
+}
+//# sourceMappingURL=AnimationsEnterDemo.js.map

package/dist/esm/AnimationsEnterDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationsEnterDemo.js","sourceRoot":"","sources":["../../src/AnimationsEnterDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAEzC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAE1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,wBAAyB,CAAA;AAE3D,MAAM,UAAU,mBAAmB,CAAC,KAAU;IAC5C,MAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAA;IAC3C,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;IACvC,MAAM,cAAc,GAAG,iBAAiB,CAAC,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAA;IAE7D,IAAI,KAAK,IAAI,CAAC,cAAc,EAAE,CAAC;QAC7B,OAAO,KAAC,MAAM,IAAC,GAAG,EAAE,GAAU,GAAI,CAAA;IACpC,CAAC;IAED,OAAO,CACL,8BACE,KAAC,MAAM,IAEL,UAAU,EAAE;oBACV,KAAK,EAAE,GAAG;oBACV,CAAC,EAAE,CAAC,EAAE;oBACN,OAAO,EAAE,CAAC;iBACX,EACD,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAC,IAAI,EACd,IAAI,EAAE,GAAG,EACT,OAAO,EAAE,CAAC,EACV,KAAK,EAAE,CAAC,EACR,CAAC,EAAE,CAAC,EACJ,EAAE,EAAC,SAAS,EACZ,OAAO,EAAC,IAAI,YAEX,KAAK,CAAC,QAAQ,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAE,IAAI,GAAI,IAf3C,GAAG,CAgBD,EAET,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC,yBAErD,IACR,CACJ,CAAA;AACH,CAAC"}

package/dist/esm/AnimationsHoverDemo.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LogoIcon } from '@hanzogui/logo';
+import { Square } from '@hanzo/gui';
+export function AnimationsHoverDemo() {
+    return (_jsx(Square, { borderColor: "$borderColor", transition: "bouncy", elevation: "$4", bg: "$color9", size: 104, rounded: "$9", hoverStyle: {
+            scale: 1.2,
+        }, pressStyle: {
+            scale: 0.9,
+        }, children: _jsx(LogoIcon, { downscale: 0.75 }) }));
+}
+//# sourceMappingURL=AnimationsHoverDemo.js.map

package/dist/esm/AnimationsHoverDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationsHoverDemo.js","sourceRoot":"","sources":["../../src/AnimationsHoverDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEnC,MAAM,UAAU,mBAAmB;IACjC,OAAO,CACL,KAAC,MAAM,IACL,WAAW,EAAC,cAAc,EAC1B,UAAU,EAAC,QAAQ,EACnB,SAAS,EAAC,IAAI,EACd,EAAE,EAAC,SAAS,EACZ,IAAI,EAAE,GAAG,EACT,OAAO,EAAC,IAAI,EACZ,UAAU,EAAE;YACV,KAAK,EAAE,GAAG;SACX,EACD,UAAU,EAAE;YACV,KAAK,EAAE,GAAG;SACX,YAED,KAAC,QAAQ,IAAC,SAAS,EAAE,IAAI,GAAI,GACtB,CACV,CAAA;AACH,CAAC"}