@hanzogui/demos 8.3.0 → 8.3.3

package/dist/cjs/AccordionDemo.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionDemo = AccordionDemo;
+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 AccordionDemo() {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Accordion, { overflow: "hidden", width: "$20", type: "multiple", children: [(0, jsx_runtime_1.jsxs)(gui_1.Accordion.Item, { value: "a1", mb: -1, children: [(0, jsx_runtime_1.jsx)(gui_1.Accordion.Trigger, { flexDirection: "row", justify: "space-between", borderWidth: 1, borderColor: "$borderColor", children: ({ open }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(gui_1.Paragraph, { children: "1. Take a cold shower" }), (0, jsx_runtime_1.jsx)(gui_1.Square, { transparent: true, transition: "quick", rotate: open ? '180deg' : '0deg', children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: "$1", color: "$color" }) })] })) }), (0, jsx_runtime_1.jsx)(gui_1.Accordion.HeightAnimator, { transition: "300ms", children: (0, jsx_runtime_1.jsx)(gui_1.Accordion.Content, { transition: "300ms", exitStyle: { opacity: 0 }, borderWidth: 1, borderTopWidth: 0, borderColor: "$borderColor", children: (0, jsx_runtime_1.jsx)(gui_1.Paragraph, { children: "Cold showers can help reduce inflammation, relieve pain, improve circulation, lower stress levels, and reduce muscle soreness and fatigue." }) }) })] }), (0, jsx_runtime_1.jsxs)(gui_1.Accordion.Item, { value: "a2", children: [(0, jsx_runtime_1.jsx)(gui_1.Accordion.Trigger, { flexDirection: "row", justify: "space-between", borderWidth: 1, borderColor: "$borderColor", children: ({ open }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(gui_1.Paragraph, { children: "2. Eat 4 eggs" }), (0, jsx_runtime_1.jsx)(gui_1.Square, { transparent: true, transition: "quick", rotate: open ? '180deg' : '0deg', children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: "$1", color: "$color" }) })] })) }), (0, jsx_runtime_1.jsx)(gui_1.Accordion.HeightAnimator, { transition: "300ms", children: (0, jsx_runtime_1.jsx)(gui_1.Accordion.Content, { transition: "300ms", exitStyle: { opacity: 0 }, borderWidth: 1, borderTopWidth: 0, borderColor: "$borderColor", children: (0, jsx_runtime_1.jsx)(gui_1.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/cjs/AccordionDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionDemo.js","sourceRoot":"","sources":["../../src/AccordionDemo.tsx"],"names":[],"mappings":";;;;AAAA,6DAAsD;AACtD,oCAAyD;AAEzD;IACE,OAAO,CACL,wBAAC,eAAS,IAAC,QAAQ,EAAC,QAAQ,EAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,UAAU,aAEtD,wBAAC,eAAS,CAAC,IAAI,IAAC,KAAK,EAAC,IAAI,EAAC,EAAE,EAAE,CAAC,CAAC,aAC/B,uBAAC,eAAS,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,6DACE,uBAAC,eAAS,wCAAkC,EAC5C,uBAAC,YAAM,IAAC,WAAW,QAAC,UAAU,EAAC,OAAO,EAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,YACrE,uBAAC,4BAAW,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,GAAG,GACjC,IACR,CACJ,GACiB,EACpB,uBAAC,eAAS,CAAC,cAAc,IAAC,UAAU,EAAC,OAAO,YAC1C,uBAAC,eAAS,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,uBAAC,eAAS,6JAGE,GACM,GACK,IACZ,EAEjB,wBAAC,eAAS,CAAC,IAAI,IAAC,KAAK,EAAC,IAAI,aACxB,uBAAC,eAAS,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,6DACE,uBAAC,eAAS,gCAA0B,EACpC,uBAAC,YAAM,IAAC,WAAW,QAAC,UAAU,EAAC,OAAO,EAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,YACrE,uBAAC,4BAAW,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,GAAG,GACjC,IACR,CACJ,GACiB,EACpB,uBAAC,eAAS,CAAC,cAAc,IAAC,UAAU,EAAC,OAAO,YAC1C,uBAAC,eAAS,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,uBAAC,eAAS,qJAGE,GACM,GACK,IACZ,IACP,CACb,CAAA;AACH,CAAC"}

package/dist/cjs/AddThemeDemo.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddThemeDemo = AddThemeDemo;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const theme_1 = require("@hanzogui/theme");
+const react_1 = tslib_1.__importDefault(require("react"));
+const gui_1 = require("@hanzo/gui");
+function AddThemeDemo() {
+    const [theme, setTheme] = react_1.default.useState();
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { items: "center", gap: "$4", children: [(0, jsx_runtime_1.jsxs)(gui_1.H3, { children: ["Theme: ", theme ?? 'none'] }), (0, jsx_runtime_1.jsx)(gui_1.Theme, { name: theme ?? 'red', children: (0, jsx_runtime_1.jsx)(gui_1.View, { rounded: "$8", width: 100, height: 100, bg: "$color" }) }), (0, jsx_runtime_1.jsx)(gui_1.Button, { disabled: theme === 'superblue', onPress: () => {
+                    (0, theme_1.addTheme)({
+                        name: 'superblue',
+                        insertCSS: true,
+                        theme: {
+                            background: '#000',
+                            color: 'blue',
+                        },
+                    });
+                    setTheme('superblue');
+                }, children: "Add superblue theme" })] }));
+}
+//# sourceMappingURL=AddThemeDemo.js.map

package/dist/cjs/AddThemeDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddThemeDemo.js","sourceRoot":"","sources":["../../src/AddThemeDemo.tsx"],"names":[],"mappings":";;;;;AAAA,2CAA0C;AAC1C,0DAAyB;AAEzB,oCAA4D;AAE5D;IACE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,eAAK,CAAC,QAAQ,EAAO,CAAA;IAE/C,OAAO,CACL,wBAAC,YAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC7B,wBAAC,QAAE,0BAAS,KAAK,IAAI,MAAM,IAAM,EAEjC,uBAAC,WAAK,IAAC,IAAI,EAAE,KAAK,IAAI,KAAK,YACzB,uBAAC,UAAI,IAAC,OAAO,EAAC,IAAI,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,EAAC,QAAQ,GAAG,GACpD,EAER,uBAAC,YAAM,IACL,QAAQ,EAAE,KAAK,KAAK,WAAW,EAC/B,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAA,gBAAQ,EAAC;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/cjs/AlertDialogDemo.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlertDialogDemo = AlertDialogDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+function AlertDialogDemo() {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.AlertDialog, { native: true, children: [(0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(gui_1.Button, { children: "Show Alert" }) }), (0, jsx_runtime_1.jsxs)(gui_1.AlertDialog.Portal, { children: [(0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Overlay, { transition: "quick", opacity: 0.5, backgroundColor: "$background", enterStyle: { opacity: 0 }, exitStyle: { opacity: 0 } }, "overlay"), (0, jsx_runtime_1.jsx)(gui_1.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: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$4", children: [(0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Title, { children: "Accept" }), (0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Description, { children: "By pressing yes, you accept our terms and conditions." }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$3", justify: "flex-end", children: [(0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Cancel, { asChild: true, children: (0, jsx_runtime_1.jsx)(gui_1.Button, { children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(gui_1.AlertDialog.Action, { asChild: true, children: (0, jsx_runtime_1.jsx)(gui_1.Button, { theme: "accent", children: "Accept" }) })] })] }) }, "content")] })] }));
+}
+//# sourceMappingURL=AlertDialogDemo.js.map

package/dist/cjs/AlertDialogDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialogDemo.js","sourceRoot":"","sources":["../../src/AlertDialogDemo.tsx"],"names":[],"mappings":";;;;AAAA,oCAAgE;AAEhE;IACE,OAAO,CACL,wBAAC,iBAAW,IAAC,MAAM,mBACjB,uBAAC,iBAAW,CAAC,OAAO,IAAC,OAAO,kBAC1B,uBAAC,YAAM,6BAAoB,GACP,EAEtB,wBAAC,iBAAW,CAAC,MAAM,eACjB,uBAAC,iBAAW,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,uBAAC,iBAAW,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,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,aACd,uBAAC,iBAAW,CAAC,KAAK,yBAA2B,EAC7C,uBAAC,iBAAW,CAAC,WAAW,wEAEE,EAE1B,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,aACjC,uBAAC,iBAAW,CAAC,MAAM,IAAC,OAAO,kBACzB,uBAAC,YAAM,yBAAgB,GACJ,EACrB,uBAAC,iBAAW,CAAC,MAAM,IAAC,OAAO,kBACzB,uBAAC,YAAM,IAAC,KAAK,EAAC,QAAQ,uBAAgB,GACnB,IACd,IACF,IA9BL,SAAS,CA+BO,IACH,IACT,CACf,CAAA;AACH,CAAC"}

package/dist/cjs/AnimationsDelayDemo.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimationsDelayDemo = AnimationsDelayDemo;
+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 useOnIntersecting_tsx_1 = require("./useOnIntersecting.js");
+const colors = ['$color9', '$color10', '$color11', '$color12'];
+function AnimationsDelayDemo() {
+    const ref = react_1.default.useRef(null);
+    const hasIntersected = (0, useOnIntersecting_tsx_1.useIsIntersecting)(ref, { once: true });
+    const [show, setShow] = react_1.default.useState(true);
+    if (gui_1.isWeb && !hasIntersected) {
+        return (0, jsx_runtime_1.jsx)(gui_1.YStack, { ref: ref, height: 150 });
+    }
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$4", items: "center", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { gap: "$3", height: 100, items: "center", justify: "center", children: (0, jsx_runtime_1.jsx)(gui_1.AnimatePresence, { children: show &&
+                        colors.map((color, i) => ((0, jsx_runtime_1.jsx)(gui_1.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))) }) }), (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$3", onPress: () => setShow(!show), children: show ? 'Hide' : 'Show' })] }));
+}
+//# sourceMappingURL=AnimationsDelayDemo.js.map

package/dist/cjs/AnimationsDelayDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationsDelayDemo.js","sourceRoot":"","sources":["../../src/AnimationsDelayDemo.tsx"],"names":[],"mappings":";;;;;AAAA,0DAAyB;AACzB,oCAAmF;AAEnF,kEAA2D;AAE3D,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,CAAU,CAAA;AAEvE;IACE,MAAM,GAAG,GAAG,eAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAA;IAC3C,MAAM,cAAc,GAAG,IAAA,yCAAiB,EAAC,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAA;IAC7D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAE5C,IAAI,WAAK,IAAI,CAAC,cAAc,EAAE,CAAC;QAC7B,OAAO,uBAAC,YAAM,IAAC,GAAG,EAAE,GAAU,EAAE,MAAM,EAAE,GAAG,GAAI,CAAA;IACjD,CAAC;IAED,OAAO,CACL,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,aAC7B,uBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAC,QAAQ,EAAC,OAAO,EAAC,QAAQ,YAC3D,uBAAC,qBAAe,cACb,IAAI;wBACH,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CACvB,uBAAC,YAAM,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,uBAAC,YAAM,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/cjs/AnimationsDemo.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.positions = void 0;
+exports.AnimationsDemo = AnimationsDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const logo_1 = require("@hanzogui/logo");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const gui_1 = require("@hanzo/gui");
+function AnimationsDemo(props) {
+    const [positionI, setPositionI] = (0, gui_1.useControllableState)({
+        strategy: 'most-recent-wins',
+        prop: props.position,
+        defaultProp: 0,
+    });
+    const position = exports.positions[positionI];
+    const onPress = (0, gui_1.useEvent)(() => {
+        setPositionI((x) => {
+            return (x + 1) % exports.positions.length;
+        });
+    });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(gui_1.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: gui_1.isWeb && (0, jsx_runtime_1.jsx)(logo_1.LogoIcon, { downscale: 0.75 }) }), (0, jsx_runtime_1.jsx)(gui_1.Button, { position: "absolute", b: 20, l: 20, icon: lucide_icons_2_1.Play, theme: props.tint ?? 'surface2', size: "$5", circular: true, onPress: onPress })] }));
+}
+exports.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/cjs/AnimationsDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationsDemo.js","sourceRoot":"","sources":["../../src/AnimationsDemo.tsx"],"names":[],"mappings":";;;;;AAAA,yCAAyC;AACzC,6DAA+C;AAC/C,oCAAyF;AAEzF,wBAA+B,KAAK;IAClC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,0BAAoB,EAAC;QACrD,QAAQ,EAAE,kBAAkB;QAC5B,IAAI,EAAE,KAAK,CAAC,QAAQ;QACpB,WAAW,EAAE,CAAC;KACf,CAAC,CAAA;IACF,MAAM,QAAQ,GAAG,QAAA,SAAS,CAAC,SAAS,CAAC,CAAA;IACrC,MAAM,OAAO,GAAG,IAAA,cAAQ,EAAC,GAAG,EAAE;QAC5B,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE;YACjB,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,QAAA,SAAS,CAAC,MAAM,CAAA;QACnC,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;IAEF,OAAO,CACL,6DACE,uBAAC,YAAM,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,WAAK,IAAI,uBAAC,eAAQ,IAAC,SAAS,EAAE,IAAI,GAAI,GAChC,EAET,uBAAC,YAAM,IACL,QAAQ,EAAC,UAAU,EACnB,CAAC,EAAE,EAAE,EACL,CAAC,EAAE,EAAE,EACL,IAAI,EAAE,qBAAI,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;AAEY,QAAA,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/cjs/AnimationsEnterDemo.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimationsEnterDemo = AnimationsEnterDemo;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const logo_1 = require("@hanzogui/logo");
+const gui_1 = require("@hanzo/gui");
+const useOnIntersecting_tsx_1 = require("./useOnIntersecting.js");
+function AnimationsEnterDemo(props) {
+    const ref = react_1.default.useRef(null);
+    const [key, setKey] = react_1.default.useState(0);
+    const hasIntersected = (0, useOnIntersecting_tsx_1.useIsIntersecting)(ref, { once: true });
+    if (gui_1.isWeb && !hasIntersected) {
+        return (0, jsx_runtime_1.jsx)(gui_1.YStack, { ref: ref });
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(gui_1.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 ?? (0, jsx_runtime_1.jsx)(logo_1.LogoIcon, { downscale: 0.75 }) }, key), (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$3", mt: "$4", onPress: () => setKey(Math.random()), children: "Re-mount" })] }));
+}
+//# sourceMappingURL=AnimationsEnterDemo.js.map

package/dist/cjs/AnimationsEnterDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationsEnterDemo.js","sourceRoot":"","sources":["../../src/AnimationsEnterDemo.tsx"],"names":[],"mappings":";;;;;AAAA,0DAAyB;AACzB,yCAAyC;AAEzC,oCAA0D;AAE1D,kEAA2D;AAE3D,6BAAoC,KAAU;IAC5C,MAAM,GAAG,GAAG,eAAK,CAAC,MAAM,CAAc,IAAI,CAAC,CAAA;IAC3C,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;IACvC,MAAM,cAAc,GAAG,IAAA,yCAAiB,EAAC,GAAG,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAA;IAE7D,IAAI,WAAK,IAAI,CAAC,cAAc,EAAE,CAAC;QAC7B,OAAO,uBAAC,YAAM,IAAC,GAAG,EAAE,GAAU,GAAI,CAAA;IACpC,CAAC;IAED,OAAO,CACL,6DACE,uBAAC,YAAM,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,uBAAC,eAAQ,IAAC,SAAS,EAAE,IAAI,GAAI,IAf3C,GAAG,CAgBD,EAET,uBAAC,YAAM,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/cjs/AnimationsHoverDemo.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimationsHoverDemo = AnimationsHoverDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const logo_1 = require("@hanzogui/logo");
+const gui_1 = require("@hanzo/gui");
+function AnimationsHoverDemo() {
+    return ((0, jsx_runtime_1.jsx)(gui_1.Square, { borderColor: "$borderColor", transition: "bouncy", elevation: "$4", bg: "$color9", size: 104, rounded: "$9", hoverStyle: {
+            scale: 1.2,
+        }, pressStyle: {
+            scale: 0.9,
+        }, children: (0, jsx_runtime_1.jsx)(logo_1.LogoIcon, { downscale: 0.75 }) }));
+}
+//# sourceMappingURL=AnimationsHoverDemo.js.map

package/dist/cjs/AnimationsHoverDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationsHoverDemo.js","sourceRoot":"","sources":["../../src/AnimationsHoverDemo.tsx"],"names":[],"mappings":";;;;AAAA,yCAAyC;AACzC,oCAAmC;AAEnC;IACE,OAAO,CACL,uBAAC,YAAM,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,uBAAC,eAAQ,IAAC,SAAS,EAAE,IAAI,GAAI,GACtB,CACV,CAAA;AACH,CAAC"}

package/dist/cjs/AnimationsPresenceDemo.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.images = void 0;
+exports.AnimationsPresenceDemo = AnimationsPresenceDemo;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const animate_presence_1 = require("@hanzogui/animate-presence");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const gui_1 = require("@hanzo/gui");
+// @ts-ignore
+const photo1_jpg_1 = tslib_1.__importDefault(require("../../public/photo1.jpg"));
+// @ts-ignore
+const photo2_jpg_1 = tslib_1.__importDefault(require("../../public/photo2.jpg"));
+// @ts-ignore
+const photo3_jpg_1 = tslib_1.__importDefault(require("../../public/photo3.jpg"));
+exports.images = [photo1_jpg_1.default, photo2_jpg_1.default, photo3_jpg_1.default].map((x) => x.src || x);
+const GalleryItem = (0, gui_1.styled)(gui_1.YStack, {
+    z: 1,
+    x: 0,
+    opacity: 1,
+    fullscreen: true,
+    variants: {
+        // 1 = right, 0 = nowhere, -1 = left
+        going: {
+            ':number': (going) => ({
+                enterStyle: {
+                    x: going > 0 ? 1000 : -1000,
+                    opacity: 0,
+                },
+                exitStyle: {
+                    zIndex: 0,
+                    x: going < 0 ? 1000 : -1000,
+                    opacity: 0,
+                },
+            }),
+        },
+    },
+});
+const wrap = (min, max, v) => {
+    const rangeSize = max - min;
+    return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
+};
+function AnimationsPresenceDemo() {
+    const [[page, going], setPage] = react_1.default.useState([0, 0]);
+    const imageIndex = wrap(0, exports.images.length, page);
+    const paginate = (going) => {
+        setPage([page + going, going]);
+    };
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { overflow: "hidden", bg: "#000", position: "relative", height: 300, width: "100%", items: "center", children: [(0, jsx_runtime_1.jsx)(animate_presence_1.AnimatePresence, { initial: false, custom: { going }, children: (0, jsx_runtime_1.jsx)(GalleryItem, { transition: "slow", going: going, children: (0, jsx_runtime_1.jsx)(gui_1.Image, { src: exports.images[imageIndex], width: 820, height: 300, objectFit: "cover" }) }, page) }), (0, jsx_runtime_1.jsx)(gui_1.Button, { "aria-label": "Carousel left", icon: lucide_icons_2_1.ArrowLeft, size: "$5", position: "absolute", l: "$4", circular: true, onPress: () => paginate(-1), boxShadow: "0 0 10px rgba(0,0,0,0.5)", z: 100 }), (0, jsx_runtime_1.jsx)(gui_1.Button, { "aria-label": "Carousel right", icon: lucide_icons_2_1.ArrowRight, size: "$5", position: "absolute", r: "$4", circular: true, onPress: () => paginate(1), boxShadow: "0 0 10px rgba(0,0,0,0.5)", z: 100 })] }));
+}
+//# sourceMappingURL=AnimationsPresenceDemo.js.map

package/dist/cjs/AnimationsPresenceDemo.js.map

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

package/dist/cjs/AnimationsTimingDemo.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnimationsTimingDemo = AnimationsTimingDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const logo_1 = require("@hanzogui/logo");
+const gui_1 = require("@hanzo/gui");
+function AnimationsTimingDemo() {
+    return ((0, jsx_runtime_1.jsx)(gui_1.Square, { bg: "$color9", transition: "100ms", elevation: "$4", size: 110, rounded: "$9", hoverStyle: {
+            scale: 1.2,
+        }, pressStyle: {
+            scale: 0.9,
+        }, children: (0, jsx_runtime_1.jsx)(logo_1.LogoIcon, { downscale: 0.75 }) }));
+}
+//# sourceMappingURL=AnimationsTimingDemo.js.map

package/dist/cjs/AnimationsTimingDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationsTimingDemo.js","sourceRoot":"","sources":["../../src/AnimationsTimingDemo.tsx"],"names":[],"mappings":";;;;AAAA,yCAAyC;AACzC,oCAAmC;AAEnC;IACE,OAAO,CACL,uBAAC,YAAM,IACL,EAAE,EAAC,SAAS,EACZ,UAAU,EAAC,OAAO,EAClB,SAAS,EAAC,IAAI,EACd,IAAI,EAAE,GAAG,EACT,OAAO,EAAC,IAAI,EACZ,UAAU,EAAE;YACV,KAAK,EAAE,GAAG;SACX,EACD,UAAU,EAAE;YACV,KAAK,EAAE,GAAG;SACX,YAED,uBAAC,eAAQ,IAAC,SAAS,EAAE,IAAI,GAAI,GACtB,CACV,CAAA;AACH,CAAC"}

package/dist/cjs/AvatarDemo.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarDemo = AvatarDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+function AvatarDemo() {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$6", children: [(0, jsx_runtime_1.jsxs)(gui_1.Avatar, { circular: true, size: "$10", children: [(0, jsx_runtime_1.jsx)(gui_1.Avatar.Image, { "aria-label": "Cam", src: "https://images.unsplash.com/photo-1548142813-c348350df52b?&w=150&h=150&dpr=2&q=80" }), (0, jsx_runtime_1.jsx)(gui_1.Avatar.Fallback, { bg: "$blue10" })] }), (0, jsx_runtime_1.jsxs)(gui_1.Avatar, { circular: true, size: "$8", children: [(0, jsx_runtime_1.jsx)(gui_1.Avatar.Image, { "aria-label": "Nate Wienert", src: "https://images.unsplash.com/photo-1531384441138-2736e62e0919?&w=100&h=100&dpr=2&q=80" }), (0, jsx_runtime_1.jsx)(gui_1.Avatar.Fallback, { delayMs: 600, bg: "$blue10" })] })] }));
+}
+//# sourceMappingURL=AvatarDemo.js.map

package/dist/cjs/AvatarDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarDemo.js","sourceRoot":"","sources":["../../src/AvatarDemo.tsx"],"names":[],"mappings":";;;;AAAA,oCAA2C;AAE3C;IACE,OAAO,CACL,wBAAC,YAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC7B,wBAAC,YAAM,IAAC,QAAQ,QAAC,IAAI,EAAC,KAAK,aACzB,uBAAC,YAAM,CAAC,KAAK,kBACA,KAAK,EAChB,GAAG,EAAC,mFAAmF,GACvF,EACF,uBAAC,YAAM,CAAC,QAAQ,IAAC,EAAE,EAAC,SAAS,GAAG,IACzB,EAET,wBAAC,YAAM,IAAC,QAAQ,QAAC,IAAI,EAAC,IAAI,aACxB,uBAAC,YAAM,CAAC,KAAK,kBACA,cAAc,EACzB,GAAG,EAAC,sFAAsF,GAC1F,EACF,uBAAC,YAAM,CAAC,QAAQ,IAAC,OAAO,EAAE,GAAG,EAAE,EAAE,EAAC,SAAS,GAAG,IACvC,IACF,CACV,CAAA;AACH,CAAC"}

package/dist/cjs/BoxShadowTokenDemo.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BoxShadowTokenDemo = BoxShadowTokenDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+// styled() with boxShadow containing embedded $token
+// if web imports are picked up on native, this resolves to var(--shadowColor)
+// which crashes with: [ReanimatedError: Invalid color "var(--shadowColor)"]
+const StyledShadowBox = (0, gui_1.styled)(gui_1.View, {
+    width: 100,
+    height: 100,
+    backgroundColor: '$color5',
+    borderRadius: '$4',
+    boxShadow: '0px 2px 8px $shadowColor',
+});
+function BoxShadowTokenDemo() {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$4", items: "center", p: "$4", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { testID: "box-shadow-token-title", children: "BoxShadow Token Test" }), (0, jsx_runtime_1.jsx)(StyledShadowBox, { testID: "box-shadow-styled" }), (0, jsx_runtime_1.jsx)(gui_1.View, { width: 100, height: 100, backgroundColor: "$color5", borderRadius: "$4", boxShadow: "0px 2px 8px $shadowColor", testID: "box-shadow-prop" }), (0, jsx_runtime_1.jsx)(gui_1.Text, { testID: "box-shadow-token-ok", children: "OK" })] }));
+}
+//# sourceMappingURL=BoxShadowTokenDemo.js.map

package/dist/cjs/BoxShadowTokenDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BoxShadowTokenDemo.js","sourceRoot":"","sources":["../../src/BoxShadowTokenDemo.tsx"],"names":[],"mappings":";;;;AAAA,oCAAuD;AAEvD,qDAAqD;AACrD,8EAA8E;AAC9E,4EAA4E;AAC5E,MAAM,eAAe,GAAG,IAAA,YAAM,EAAC,UAAI,EAAE;IACnC,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;IACX,eAAe,EAAE,SAAS;IAC1B,YAAY,EAAE,IAAI;IAClB,SAAS,EAAE,0BAA0B;CACtC,CAAC,CAAA;AAEF;IACE,OAAO,CACL,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,IAAI,aACpC,uBAAC,UAAI,IAAC,MAAM,EAAC,wBAAwB,qCAA4B,EAGjE,uBAAC,eAAe,IAAC,MAAM,EAAC,mBAAmB,GAAG,EAG9C,uBAAC,UAAI,IACH,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,GAAG,EACX,eAAe,EAAC,SAAS,EACzB,YAAY,EAAC,IAAI,EACjB,SAAS,EAAC,0BAA0B,EACpC,MAAM,EAAC,iBAAiB,GACxB,EAEF,uBAAC,UAAI,IAAC,MAAM,EAAC,qBAAqB,mBAAU,IACrC,CACV,CAAA;AACH,CAAC"}

package/dist/cjs/BrandTokensDemo.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BrandTokensDemo = BrandTokensDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+// Proof surface for the token layer: true-black neutral ramp, one accent per
+// white-label brand (read straight from each brand's generated theme — the
+// $color9 accent slot), Zen type. Open with ?demo=BrandTokens.
+// Brand accent SoT: pkgs/core/themes/src/brands.ts.
+const BRANDS = ['hanzo', 'lux', 'zoo', 'pars'];
+const SURFACES = [
+    ['background', '$background', '#000 canvas'],
+    ['color2', '$color2', '#0a0a0a surface'],
+    ['color3', '$color3', '#111 raised'],
+    ['color4', '$color4', '#171717 elevated'],
+];
+function BrandTokensDemo() {
+    return ((0, jsx_runtime_1.jsx)(gui_1.Theme, { name: "dark", children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { backgroundColor: "$background", padding: "$6", gap: "$5", minHeight: 640, children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.H2, { fontFamily: "$heading", color: "$color12", children: "Hanzo GUI \u2014 design tokens" }), (0, jsx_runtime_1.jsx)(gui_1.Paragraph, { color: "$color11", fontFamily: "$body", children: "True-black canvas \u00B7 one accent per brand \u00B7 Zen type system" })] }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { color: "$color11", fontFamily: "$mono", fontSize: "$2", children: "neutral surface ramp" }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { gap: "$3", flexWrap: "wrap", children: SURFACES.map(([name, tok, label]) => ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { backgroundColor: tok, width: 160, height: 96, borderRadius: 12, borderWidth: 1, borderColor: "$borderColor", padding: "$3", justifyContent: "flex-end", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { color: "$color12", fontFamily: "$mono", fontSize: "$3", children: name }), (0, jsx_runtime_1.jsx)(gui_1.Text, { color: "$color10", fontSize: "$2", children: label })] }, name))) })] }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { color: "$color11", fontFamily: "$mono", fontSize: "$2", children: "per-brand accent (applied sparingly over the shared canvas)" }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { gap: "$4", flexWrap: "wrap", children: BRANDS.map((b) => ((0, jsx_runtime_1.jsx)(gui_1.Theme, { name: b, children: (0, jsx_runtime_1.jsxs)(gui_1.Card, { backgroundColor: "$color2", borderWidth: 1, borderColor: "$borderColor", borderRadius: 12, padding: "$4", width: 210, gap: "$3", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { alignItems: "center", gap: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 14, height: 14, borderRadius: 999, backgroundColor: "$color9" }), (0, jsx_runtime_1.jsx)(gui_1.Text, { color: "$color12", fontFamily: "$heading", fontSize: "$5", children: b })] }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { height: 44, borderRadius: 8, backgroundColor: "$color9", alignItems: "center", justifyContent: "center", children: (0, jsx_runtime_1.jsx)(gui_1.Text, { color: "$color1", fontSize: "$3", fontWeight: "700", children: "Primary CTA" }) }), (0, jsx_runtime_1.jsx)(gui_1.Button, { children: "Themed button" })] }) }, b))) })] })] }) }));
+}
+//# sourceMappingURL=BrandTokensDemo.js.map

package/dist/cjs/BrandTokensDemo.js.map

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

package/dist/cjs/BuildAButtonDemo.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BuildAButtonDemo = BuildAButtonDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const gui_1 = require("@hanzo/gui");
+const outlined = {
+    bg: 'transparent',
+    borderWidth: 2,
+    borderColor: '$background',
+    rounded: '$10',
+    hoverStyle: {
+        bg: 'transparent',
+        borderColor: '$backgroundPress',
+    },
+};
+function BuildAButtonDemo() {
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { fullscreen: true, overflow: "hidden", children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { maxH: 200, y: -100, x: -40, rotate: "-10deg", children: [(0, jsx_runtime_1.jsx)(ButtonCol, { y: 35, size: "$2", ...outlined, subTheme: "surface1", borderWidth: 1 }), (0, jsx_runtime_1.jsx)(ButtonCol, { y: 30 }), (0, jsx_runtime_1.jsx)(ButtonCol, { y: -50, ...outlined }), (0, jsx_runtime_1.jsx)(ButtonCol, { ...outlined, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Hand, {}) }), (0, jsx_runtime_1.jsx)(ButtonCol, { size: "$6", subTheme: "surface2" }), (0, jsx_runtime_1.jsx)(ButtonCol, { size: "$6", subTheme: "surface2", ...outlined }), (0, jsx_runtime_1.jsx)(ButtonCol, { size: "$8", subTheme: "surface2", iconAfter: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Drumstick, {}), ...outlined }), (0, jsx_runtime_1.jsx)(ButtonCol, { size: "$10", subTheme: "surface1" }), (0, jsx_runtime_1.jsx)(ButtonCol, { size: "$8", subTheme: "surface2", ...outlined, rounded: 0 })] }) }));
+}
+function ButtonCol(props) {
+    const { subTheme, ...buttonProps } = props;
+    const subThemeSuffix = subTheme ? `_${subTheme}` : '';
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { p: "$2", gap: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.Button, { theme: props.subTheme, ...props, children: "Hello" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { theme: ('orange' + subThemeSuffix), ...buttonProps, children: "Hello" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { theme: ('yellow' + subThemeSuffix), ...buttonProps, children: "Hello" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { theme: ('green' + subThemeSuffix), ...buttonProps, children: "Hello" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { theme: ('blue' + subThemeSuffix), ...buttonProps, children: "Hello" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { theme: ('purple' + subThemeSuffix), ...buttonProps, children: "Hello" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { theme: ('pink' + subThemeSuffix), ...buttonProps, children: "Hello" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { theme: ('red' + subThemeSuffix), ...buttonProps, children: "Hello" })] }));
+}
+//# sourceMappingURL=BuildAButtonDemo.js.map

package/dist/cjs/BuildAButtonDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BuildAButtonDemo.js","sourceRoot":"","sources":["../../src/BuildAButtonDemo.tsx"],"names":[],"mappings":";;;;AAAA,6DAA0D;AAE1D,oCAAmD;AAEnD,MAAM,QAAQ,GAAG;IACf,EAAE,EAAE,aAAa;IACjB,WAAW,EAAE,CAAC;IACd,WAAW,EAAE,aAAa;IAC1B,OAAO,EAAE,KAAK;IAEd,UAAU,EAAE;QACV,EAAE,EAAE,aAAa;QACjB,WAAW,EAAE,kBAAkB;KAChC;CACF,CAAA;AAED;IACE,OAAO,CACL,uBAAC,YAAM,IAAC,UAAU,QAAC,QAAQ,EAAC,QAAQ,YAClC,wBAAC,YAAM,IAAC,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAC,QAAQ,aACjD,uBAAC,SAAS,IAAC,CAAC,EAAE,EAAE,EAAE,IAAI,EAAC,IAAI,KAAK,QAAQ,EAAE,QAAQ,EAAC,UAAU,EAAC,WAAW,EAAE,CAAC,GAAI,EAChF,uBAAC,SAAS,IAAC,CAAC,EAAE,EAAE,GAAI,EACpB,uBAAC,SAAS,IAAC,CAAC,EAAE,CAAC,EAAE,KAAM,QAAQ,GAAI,EACnC,uBAAC,SAAS,OAAK,QAAQ,EAAE,IAAI,EAAE,uBAAC,qBAAI,KAAG,GAAI,EAC3C,uBAAC,SAAS,IAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,UAAU,GAAG,EAC3C,uBAAC,SAAS,IAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,UAAU,KAAK,QAAQ,GAAI,EACzD,uBAAC,SAAS,IACR,IAAI,EAAC,IAAI,EACT,QAAQ,EAAC,UAAU,EACnB,SAAS,EAAE,uBAAC,0BAAS,KAAG,KACpB,QAAQ,GACZ,EACF,uBAAC,SAAS,IAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,EAAC,UAAU,GAAG,EAC5C,uBAAC,SAAS,IAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,UAAU,KAAK,QAAQ,EAAE,OAAO,EAAE,CAAC,GAAI,IAC9D,GACF,CACV,CAAA;AACH,CAAC;AAED,SAAS,SAAS,CAAC,KAAU;IAC3B,MAAM,EAAE,QAAQ,EAAE,GAAG,WAAW,EAAE,GAAG,KAAK,CAAA;IAC1C,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,IAAI,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IAErD,OAAO,CACL,wBAAC,YAAM,IAAC,CAAC,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,aACrB,uBAAC,YAAM,IAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,KAAM,KAAK,sBAE/B,EACT,uBAAC,YAAM,IAAC,KAAK,EAAE,CAAC,QAAQ,GAAG,cAAc,CAAc,KAAM,WAAW,sBAE/D,EACT,uBAAC,YAAM,IAAC,KAAK,EAAE,CAAC,QAAQ,GAAG,cAAc,CAAc,KAAM,WAAW,sBAE/D,EACT,uBAAC,YAAM,IAAC,KAAK,EAAE,CAAC,OAAO,GAAG,cAAc,CAAc,KAAM,WAAW,sBAE9D,EACT,uBAAC,YAAM,IAAC,KAAK,EAAE,CAAC,MAAM,GAAG,cAAc,CAAc,KAAM,WAAW,sBAE7D,EACT,uBAAC,YAAM,IAAC,KAAK,EAAE,CAAC,QAAQ,GAAG,cAAc,CAAc,KAAM,WAAW,sBAE/D,EACT,uBAAC,YAAM,IAAC,KAAK,EAAE,CAAC,MAAM,GAAG,cAAc,CAAc,KAAM,WAAW,sBAE7D,EACT,uBAAC,YAAM,IAAC,KAAK,EAAE,CAAC,KAAK,GAAG,cAAc,CAAc,KAAM,WAAW,sBAE5D,IACF,CACV,CAAA;AACH,CAAC"}

package/dist/cjs/ButtonDemo.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonDemo = ButtonDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@hanzogui/button");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const gui_1 = require("@hanzo/gui");
+function ButtonDemo() {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { p: "$3", gap: "$3", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { children: "Plain" }), (0, jsx_runtime_1.jsx)(button_1.Button, { self: "center", icon: lucide_icons_2_1.Airplay, size: "$6", children: "Large" }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", justify: "center", children: [(0, jsx_runtime_1.jsx)(button_1.Button, { size: "$3", theme: "accent", children: "Active" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "$3", variant: "outlined", children: "Outlined" })] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$2", justify: "center", children: [(0, jsx_runtime_1.jsx)(gui_1.Theme, { name: "accent", children: (0, jsx_runtime_1.jsxs)(button_1.Button, { size: "$3", children: [(0, jsx_runtime_1.jsx)(button_1.Button.Icon, { children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Activity, {}) }), (0, jsx_runtime_1.jsx)(button_1.Button.Text, { children: "Inverse" })] }) }), (0, jsx_runtime_1.jsx)(button_1.Button, { iconAfter: lucide_icons_2_1.Activity, size: "$3", children: "iconAfter" })] }), (0, jsx_runtime_1.jsxs)(gui_1.XGroup, { children: [(0, jsx_runtime_1.jsx)(gui_1.XGroup.Item, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { width: "50%", size: "$2", disabled: true, opacity: 0.5, children: "disabled" }) }), (0, jsx_runtime_1.jsx)(gui_1.XGroup.Item, { children: (0, jsx_runtime_1.jsx)(button_1.Button, { width: "50%", size: "$2", children: "plain" }) })] })] }));
+}
+//# sourceMappingURL=ButtonDemo.js.map

package/dist/cjs/ButtonDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonDemo.js","sourceRoot":"","sources":["../../src/ButtonDemo.tsx"],"names":[],"mappings":";;;;AAAA,6CAAyC;AACzC,6DAA4D;AAC5D,oCAA0D;AAE1D;IACE,OAAO,CACL,wBAAC,YAAM,IAAC,CAAC,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,aACrB,uBAAC,eAAM,wBAAe,EACtB,uBAAC,eAAM,IAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAE,wBAAO,EAAE,IAAI,EAAC,IAAI,sBAErC,EACT,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,aAC/B,uBAAC,eAAM,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,uBAEvB,EACT,uBAAC,eAAM,IAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAC,UAAU,yBAE3B,IACF,EACT,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,aAC/B,uBAAC,WAAK,IAAC,IAAI,EAAC,QAAQ,YAClB,wBAAC,eAAM,IAAC,IAAI,EAAC,IAAI,aACf,uBAAC,eAAM,CAAC,IAAI,cACV,uBAAC,yBAAQ,KAAG,GACA,EACd,uBAAC,eAAM,CAAC,IAAI,0BAAsB,IAC3B,GACH,EACR,uBAAC,eAAM,IAAC,SAAS,EAAE,yBAAQ,EAAE,IAAI,EAAC,IAAI,0BAE7B,IACF,EAET,wBAAC,YAAM,eACL,uBAAC,YAAM,CAAC,IAAI,cACV,uBAAC,eAAM,IAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,QAAC,OAAO,EAAE,GAAG,yBAE1C,GACG,EAEd,uBAAC,YAAM,CAAC,IAAI,cACV,uBAAC,eAAM,IAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,IAAI,sBAEpB,GACG,IACP,IACF,CACV,CAAA;AACH,CAAC"}