@hanzogui/demos 8.2.1 → 8.3.2

package/dist/cjs/SliderDemo.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SliderDemo = SliderDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+function SliderDemo() {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { height: 200, items: "center", gap: "$8", children: [(0, jsx_runtime_1.jsx)(SimpleSlider, { height: 200, orientation: "vertical" }), (0, jsx_runtime_1.jsx)(SimpleSlider, { width: 200 })] }));
+}
+function SimpleSlider({ children, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Slider, { defaultValue: [50], max: 100, step: 1, ...props, children: [(0, jsx_runtime_1.jsx)(gui_1.Slider.Track, { children: (0, jsx_runtime_1.jsx)(gui_1.Slider.TrackActive, {}) }), (0, jsx_runtime_1.jsx)(gui_1.Slider.Thumb, { theme: "accent", size: 30, borderRadius: 100 }), children] }));
+}
+//# sourceMappingURL=SliderDemo.js.map

package/dist/cjs/SliderDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SliderDemo.js","sourceRoot":"","sources":["../../src/SliderDemo.tsx"],"names":[],"mappings":";;;;AACA,oCAAkD;AAElD;IACE,OAAO,CACL,wBAAC,YAAM,IAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC1C,uBAAC,YAAY,IAAC,MAAM,EAAE,GAAG,EAAE,WAAW,EAAC,UAAU,GAAG,EACpD,uBAAC,YAAY,IAAC,KAAK,EAAE,GAAG,GAAI,IACrB,CACV,CAAA;AACH,CAAC;AAED,SAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAe;IACvD,OAAO,CACL,wBAAC,YAAM,IAAC,YAAY,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,KAAM,KAAK,aACtD,uBAAC,YAAM,CAAC,KAAK,cACX,uBAAC,YAAM,CAAC,WAAW,KAAG,GACT,EACf,uBAAC,YAAM,CAAC,KAAK,IAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,GAAI,EAC3D,QAAQ,IACF,CACV,CAAA;AACH,CAAC"}

package/dist/cjs/SpinnerDemo.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpinnerDemo = SpinnerDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+function SpinnerDemo() {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { p: "$3", gap: "$4", items: "center", children: [(0, jsx_runtime_1.jsx)(gui_1.Spinner, { size: "small", color: "$green10" }), (0, jsx_runtime_1.jsx)(gui_1.Spinner, { size: "large", color: "$yellow10" })] }));
+}
+//# sourceMappingURL=SpinnerDemo.js.map

package/dist/cjs/SpinnerDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerDemo.js","sourceRoot":"","sources":["../../src/SpinnerDemo.tsx"],"names":[],"mappings":";;;;AAAA,oCAA4C;AAE5C;IACE,OAAO,CACL,wBAAC,YAAM,IAAC,CAAC,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,aACpC,uBAAC,aAAO,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,UAAU,GAAG,EACzC,uBAAC,aAAO,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,GAAG,IACnC,CACV,CAAA;AACH,CAAC"}

package/dist/cjs/StacksDemo.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StacksDemo = StacksDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+function StacksDemo() {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { maxW: 250, p: "$2", self: "center", gap: "$2", children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, flexBasis: "auto", borderWidth: 2, borderColor: "$color", rounded: "$4", gap: "$2", p: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { bg: "$color", rounded: "$3", p: "$2" }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { bg: "$color", rounded: "$3", p: "$2" }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { bg: "$color", rounded: "$3", p: "$2" })] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { flex: 1, flexBasis: "auto", borderWidth: 2, borderColor: "$color", rounded: "$4", gap: "$2", p: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { bg: "$color", rounded: "$3", p: "$2" }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { bg: "$color", rounded: "$3", p: "$2" }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { bg: "$color", rounded: "$3", p: "$2" })] }), (0, jsx_runtime_1.jsxs)(gui_1.ZStack, { flex: 1, flexBasis: "auto", maxW: 50, maxH: 85, width: 100, children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { fullscreen: true, rounded: "$4", p: "$2", borderColor: "$color", borderWidth: 2 }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { borderColor: "$color", fullscreen: true, y: 10, x: 10, borderWidth: 2, rounded: "$4", p: "$2" }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { borderColor: "$color", fullscreen: true, y: 20, x: 20, borderWidth: 2, rounded: "$4", p: "$2" })] })] }));
+}
+//# sourceMappingURL=StacksDemo.js.map

package/dist/cjs/StacksDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StacksDemo.js","sourceRoot":"","sources":["../../src/StacksDemo.tsx"],"names":[],"mappings":";;;;AACA,oCAAmD;AAEnD;IACE,OAAO,CACL,wBAAC,YAAM,IAAC,IAAI,EAAE,GAAG,EAAE,CAAC,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC9C,wBAAC,YAAM,IACL,IAAI,EAAE,CAAC,EACP,SAAS,EAAC,MAAM,EAChB,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,QAAQ,EACpB,OAAO,EAAC,IAAI,EACZ,GAAG,EAAC,IAAI,EACR,CAAC,EAAC,IAAI,aAEN,uBAAC,YAAM,IAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EAC1C,uBAAC,YAAM,IAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EAC1C,uBAAC,YAAM,IAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,IACnC,EAET,wBAAC,YAAM,IACL,IAAI,EAAE,CAAC,EACP,SAAS,EAAC,MAAM,EAChB,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,QAAQ,EACpB,OAAO,EAAC,IAAI,EACZ,GAAG,EAAC,IAAI,EACR,CAAC,EAAC,IAAI,aAEN,uBAAC,YAAM,IAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EAC1C,uBAAC,YAAM,IAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EAC1C,uBAAC,YAAM,IAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,IACnC,EAET,wBAAC,YAAM,IAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,aAC9D,uBAAC,YAAM,IAAC,UAAU,QAAC,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,WAAW,EAAC,QAAQ,EAAC,WAAW,EAAE,CAAC,GAAI,EAC9E,uBAAC,YAAM,IACL,WAAW,EAAC,QAAQ,EACpB,UAAU,QACV,CAAC,EAAE,EAAE,EACL,CAAC,EAAE,EAAE,EACL,WAAW,EAAE,CAAC,EACd,OAAO,EAAC,IAAI,EACZ,CAAC,EAAC,IAAI,GACN,EACF,uBAAC,YAAM,IACL,WAAW,EAAC,QAAQ,EACpB,UAAU,QACV,CAAC,EAAE,EAAE,EACL,CAAC,EAAE,EAAE,EACL,WAAW,EAAE,CAAC,EACd,OAAO,EAAC,IAAI,EACZ,CAAC,EAAC,IAAI,GACN,IACK,IACF,CACV,CAAA;AACH,CAAC"}

package/dist/cjs/SwitchDemo.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwitchDemo = SwitchDemo;
+exports.SwitchWithLabel = SwitchWithLabel;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+function SwitchDemo() {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { width: 200, items: "center", gap: "$3", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$3", $xs: { flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(SwitchWithLabel, { size: "$2" }), (0, jsx_runtime_1.jsx)(SwitchWithLabel, { size: "$2", defaultChecked: true })] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$3", $xs: { flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(SwitchWithLabel, { size: "$3" }), (0, jsx_runtime_1.jsx)(SwitchWithLabel, { size: "$3", defaultChecked: true })] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$3", $xs: { flexDirection: 'column' }, children: [(0, jsx_runtime_1.jsx)(SwitchWithLabel, { size: "$4" }), (0, jsx_runtime_1.jsx)(SwitchWithLabel, { size: "$4", defaultChecked: true })] })] }) }));
+}
+function SwitchWithLabel(props) {
+    const id = `switch-${props.size.toString().slice(1)}-${props.defaultChecked ?? ''}}`;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { width: 200, items: "center", gap: "$4", children: [(0, jsx_runtime_1.jsx)(gui_1.Label, { pr: "$0", minW: 90, justify: "flex-end", size: props.size, htmlFor: id, children: "Accept" }), (0, jsx_runtime_1.jsx)(gui_1.Separator, { minH: 20, vertical: true }), (0, jsx_runtime_1.jsx)(gui_1.Switch, { id: id, transition: "300ms", size: props.size, defaultChecked: props.defaultChecked, 
+                // use activeStyle to choose youra active color
+                // default to $backgroundActive unless "unstyled" boolean prop is on
+                activeStyle: {
+                    backgroundColor: '$color6',
+                }, children: (0, jsx_runtime_1.jsx)(gui_1.Switch.Thumb, { transition: "quickest" }) })] }));
+}
+//# sourceMappingURL=SwitchDemo.js.map

package/dist/cjs/SwitchDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchDemo.js","sourceRoot":"","sources":["../../src/SwitchDemo.tsx"],"names":[],"mappings":";;;;;AACA,oCAA4E;AAE5E;IACE,OAAO,CACL,2DACE,wBAAC,YAAM,IAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aACzC,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,GAAG,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,aAC/C,uBAAC,eAAe,IAAC,IAAI,EAAC,IAAI,GAAG,EAC7B,uBAAC,eAAe,IAAC,IAAI,EAAC,IAAI,EAAC,cAAc,SAAG,IACrC,EACT,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,GAAG,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,aAC/C,uBAAC,eAAe,IAAC,IAAI,EAAC,IAAI,GAAG,EAC7B,uBAAC,eAAe,IAAC,IAAI,EAAC,IAAI,EAAC,cAAc,SAAG,IACrC,EACT,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,GAAG,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,aAC/C,uBAAC,eAAe,IAAC,IAAI,EAAC,IAAI,GAAG,EAC7B,uBAAC,eAAe,IAAC,IAAI,EAAC,IAAI,EAAC,cAAc,SAAG,IACrC,IACF,GACR,CACJ,CAAA;AACH,CAAC;AAED,yBAAgC,KAI/B;IACC,MAAM,EAAE,GAAG,UAAU,KAAK,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,cAAc,IAAI,EAAE,GAAG,CAAA;IACpF,OAAO,CACL,wBAAC,YAAM,IAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aACzC,uBAAC,WAAK,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAE,EAAE,EAAE,OAAO,EAAC,UAAU,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,uBAEjE,EACR,uBAAC,eAAS,IAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,SAAG,EAChC,uBAAC,YAAM,IACL,EAAE,EAAE,EAAE,EACN,UAAU,EAAC,OAAO,EAClB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,cAAc,EAAE,KAAK,CAAC,cAAc;gBACpC,+CAA+C;gBAC/C,oEAAoE;gBACpE,WAAW,EAAE;oBACX,eAAe,EAAE,SAAS;iBAC3B,YAED,uBAAC,YAAM,CAAC,KAAK,IAAC,UAAU,EAAC,UAAU,GAAG,GAC/B,IACF,CACV,CAAA;AACH,CAAC"}

package/dist/cjs/SwitchHeadlessDemo.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SwitchHeadlessDemo = SwitchHeadlessDemo;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const switch_headless_1 = require("@hanzogui/switch-headless");
+const react_native_1 = require("react-native");
+const gui_1 = require("@hanzo/gui");
+function SwitchHeadlessDemo() {
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 200, items: "center", gap: "$3", children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$3", items: "center", children: [(0, jsx_runtime_1.jsx)(gui_1.Label, { htmlFor: "headless", children: "Headless" }), (0, jsx_runtime_1.jsx)(HeadlessSwitch, { defaultChecked: true, id: "headless" })] }) }));
+}
+const HeadlessSwitch = react_1.default.forwardRef((props, ref) => {
+    const [checked, setChecked] = react_1.default.useState(props.defaultChecked || false);
+    const { switchProps, switchRef, bubbleInput } = (0, switch_headless_1.useSwitch)(props, [checked, setChecked], ref);
+    const [animation] = react_1.default.useState(() => new react_native_1.Animated.Value(0));
+    react_1.default.useEffect(() => {
+        react_native_1.Animated.timing(animation, {
+            toValue: checked ? 1 : 0,
+            duration: 100,
+            useNativeDriver: true,
+        }).start();
+    }, [checked, animation]);
+    const translateX = react_1.default.useMemo(() => animation.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 20],
+    }), [animation]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: {
+                    width: 40,
+                    height: 20,
+                    borderRadius: 100,
+                    backgroundColor: checked ? 'lightblue' : 'silver',
+                }, ref: switchRef, ...switchProps, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [
+                        {
+                            backgroundColor: 'black',
+                            borderRadius: 100,
+                            width: 20,
+                            height: 20,
+                        },
+                        {
+                            transform: [{ translateX }],
+                        },
+                    ] }) }), bubbleInput] }));
+});
+//# sourceMappingURL=SwitchHeadlessDemo.js.map

package/dist/cjs/SwitchHeadlessDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchHeadlessDemo.js","sourceRoot":"","sources":["../../src/SwitchHeadlessDemo.tsx"],"names":[],"mappings":";;;;;AAAA,0DAAyB;AAEzB,+DAAqD;AAGrD,+CAAkD;AAClD,oCAAkD;AAElD;IACE,OAAO,CACL,uBAAC,YAAM,IAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,YACzC,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,aAC7B,uBAAC,WAAK,IAAC,OAAO,EAAC,UAAU,yBAAiB,EAC1C,uBAAC,cAAc,IAAC,cAAc,QAAC,EAAE,EAAC,UAAU,GAAG,IACxC,GACF,CACV,CAAA;AACH,CAAC;AAED,MAAM,cAAc,GAAG,eAAK,CAAC,UAAU,CAA4B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAChF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,CAAA;IAC3E,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,IAAA,2BAAS,EACvD,KAAK,EACL,CAAC,OAAO,EAAE,UAAU,CAAC,EACrB,GAAG,CACJ,CAAA;IAED,MAAM,CAAC,SAAS,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,uBAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;IAE/D,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,uBAAQ,CAAC,MAAM,CAAC,SAAS,EAAE;YACzB,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACxB,QAAQ,EAAE,GAAG;YACb,eAAe,EAAE,IAAI;SACtB,CAAC,CAAC,KAAK,EAAE,CAAA;IACZ,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC,CAAA;IAExB,MAAM,UAAU,GAAG,eAAK,CAAC,OAAO,CAC9B,GAAG,EAAE,CACH,SAAS,CAAC,WAAW,CAAC;QACpB,UAAU,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;QAClB,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC;KACrB,CAAC,EACJ,CAAC,SAAS,CAAC,CACZ,CAAA;IAED,OAAO,CACL,6DACE,uBAAC,wBAAS,IACR,KAAK,EAAE;oBACL,KAAK,EAAE,EAAE;oBACT,MAAM,EAAE,EAAE;oBACV,YAAY,EAAE,GAAG;oBACjB,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ;iBAClD,EACD,GAAG,EAAE,SAAS,KACV,WAAW,YAEf,uBAAC,uBAAQ,CAAC,IAAI,IACZ,KAAK,EAAE;wBACL;4BACE,eAAe,EAAE,OAAO;4BACxB,YAAY,EAAE,GAAG;4BACjB,KAAK,EAAE,EAAE;4BACT,MAAM,EAAE,EAAE;yBACX;wBACD;4BACE,SAAS,EAAE,CAAC,EAAE,UAAU,EAAE,CAAC;yBAC5B;qBACF,GACD,GACQ,EACX,WAAW,IACX,CACJ,CAAA;AACH,CAAC,CAAC,CAAA"}

package/dist/cjs/SwitchUnstyledDemo.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Switch = void 0;
+exports.SwitchUnstyledDemo = SwitchUnstyledDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@hanzogui/core");
+const switch_1 = require("@hanzogui/switch");
+const gui_1 = require("@hanzo/gui");
+const Frame = (0, core_1.styled)(core_1.View, {
+    width: 40,
+    height: 20,
+    rounded: 20,
+    variants: {
+        checked: {
+            true: {
+                backgroundColor: 'lightblue',
+            },
+            false: {
+                backgroundColor: 'silver',
+            },
+        },
+    },
+    defaultVariants: {
+        checked: false,
+    },
+});
+const Thumb = (0, core_1.styled)(core_1.View, {
+    width: 20,
+    height: 20,
+    bg: 'black',
+    rounded: 20,
+    variants: {
+        checked: {
+            true: {
+                opacity: 0.8,
+            },
+            false: {
+                opacity: 0.5,
+            },
+        },
+    },
+});
+exports.Switch = (0, switch_1.createSwitch)({
+    Frame,
+    Thumb,
+});
+function SwitchUnstyledDemo() {
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 200, items: "center", gap: "$3", children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$3", items: "center", children: [(0, jsx_runtime_1.jsx)(gui_1.Label, { htmlFor: "unstyled-switch", children: "Unstyled" }), (0, jsx_runtime_1.jsx)(exports.Switch, { defaultChecked: true, id: "unstyled-switch", children: (0, jsx_runtime_1.jsx)(exports.Switch.Thumb, { transition: "quickest" }) })] }) }));
+}
+//# sourceMappingURL=SwitchUnstyledDemo.js.map

package/dist/cjs/SwitchUnstyledDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchUnstyledDemo.js","sourceRoot":"","sources":["../../src/SwitchUnstyledDemo.tsx"],"names":[],"mappings":";;;;;AAAA,yCAA6C;AAC7C,6CAA+C;AAC/C,oCAAkD;AAElD,MAAM,KAAK,GAAG,IAAA,aAAM,EAAC,WAAI,EAAE;IACzB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,OAAO,EAAE,EAAE;IACX,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE;gBACJ,eAAe,EAAE,WAAW;aAC7B;YACD,KAAK,EAAE;gBACL,eAAe,EAAE,QAAQ;aAC1B;SACF;KACO;IACV,eAAe,EAAE;QACf,OAAO,EAAE,KAAK;KACf;CACF,CAAC,CAAA;AAEF,MAAM,KAAK,GAAG,IAAA,aAAM,EAAC,WAAI,EAAE;IACzB,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,EAAE,EAAE,OAAO;IACX,OAAO,EAAE,EAAE;IAEX,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,IAAI,EAAE;gBACJ,OAAO,EAAE,GAAG;aACb;YACD,KAAK,EAAE;gBACL,OAAO,EAAE,GAAG;aACb;SACF;KACO;CACX,CAAC,CAAA;AAEW,QAAA,MAAM,GAAG,IAAA,qBAAY,EAAC;IACjC,KAAK;IACL,KAAK;CACN,CAAC,CAAA;AAEF;IACE,OAAO,CACL,uBAAC,YAAM,IAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,YACzC,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,aAC7B,uBAAC,WAAK,IAAC,OAAO,EAAC,iBAAiB,yBAAiB,EACjD,uBAAC,QAAA,MAAM,IAAC,cAAc,QAAC,EAAE,EAAC,iBAAiB,YACzC,uBAAC,QAAA,MAAM,CAAC,KAAK,IAAC,UAAU,EAAC,UAAU,GAAG,GAC/B,IACF,GACF,CACV,CAAA;AACH,CAAC"}

package/dist/cjs/TabsAdvancedDemo.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabsAdvancedDemo = void 0;
+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 demos = ['background', 'underline'];
+const demosTitle = {
+    background: 'Background Indicator',
+    underline: 'Underline Indicator',
+};
+const TabsAdvancedDemo = () => {
+    const [demoIndex, setDemoIndex] = react_1.default.useState(0);
+    const demo = demos[demoIndex];
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [demo === 'underline' ? (0, jsx_runtime_1.jsx)(TabsAdvancedUnderline, {}) : (0, jsx_runtime_1.jsx)(TabsAdvancedBackground, {}), (0, jsx_runtime_1.jsx)(gui_1.XStack, { items: "center", gap: "$4", position: "absolute", b: "$3", l: "$4", $xxs: { display: 'none' }, children: (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", onPress: () => setDemoIndex((x) => (x + 1) % demos.length), children: demosTitle[demo] }) })] }));
+};
+exports.TabsAdvancedDemo = TabsAdvancedDemo;
+const TabsAdvancedBackground = () => {
+    const [tabState, setTabState] = react_1.default.useState({
+        activeAt: null,
+        currentTab: 'tab1',
+        intentAt: null,
+        prevActiveAt: null,
+    });
+    const setCurrentTab = (currentTab) => setTabState({ ...tabState, currentTab });
+    const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt });
+    const setActiveIndicator = (activeAt) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt });
+    const { activeAt, intentAt, prevActiveAt, currentTab } = tabState;
+    // 1 = right, 0 = nowhere, -1 = left
+    const direction = (() => {
+        if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
+            return 0;
+        }
+        return activeAt.x > prevActiveAt.x ? -1 : 1;
+    })();
+    const handleOnInteraction = (type, layout) => {
+        if (type === 'select') {
+            setActiveIndicator(layout);
+        }
+        else {
+            setIntentIndicator(layout);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Tabs, { value: currentTab, onValueChange: setCurrentTab, orientation: "horizontal", size: "$4", p: "$2", height: 150, flexDirection: "column", activationMode: "manual", bg: "$background", rounded: "$4", children: [(0, jsx_runtime_1.jsx)(gui_1.AnimatePresence, { children: intentAt && ((0, jsx_runtime_1.jsx)(TabsRovingIndicator, { rounded: "$4", width: intentAt.width, height: intentAt.height, x: intentAt.x, y: intentAt.y })) }), (0, jsx_runtime_1.jsx)(gui_1.AnimatePresence, { children: activeAt && ((0, jsx_runtime_1.jsx)(TabsRovingIndicator, { rounded: "$4", theme: "accent", width: activeAt.width, height: activeAt.height, x: activeAt.x, y: activeAt.y })) }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { position: "relative", children: (0, jsx_runtime_1.jsxs)(gui_1.Tabs.List, { loop: false, "aria-label": "Manage your account", gap: "$2", backgroundColor: "transparent", children: [(0, jsx_runtime_1.jsx)(gui_1.Tabs.Tab, { unstyled: true, paddingHorizontal: "$3", value: "tab1", onInteraction: handleOnInteraction, children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { children: "Profile" }) }), (0, jsx_runtime_1.jsx)(gui_1.Tabs.Tab, { unstyled: true, paddingHorizontal: "$3", value: "tab2", onInteraction: handleOnInteraction, children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { children: "Connections" }) }), (0, jsx_runtime_1.jsx)(gui_1.Tabs.Tab, { unstyled: true, paddingHorizontal: "$3", value: "tab3", onInteraction: handleOnInteraction, children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { children: "Notifications" }) })] }) }), (0, jsx_runtime_1.jsx)(gui_1.AnimatePresence, { exitBeforeEnter: true, custom: { direction }, initial: false, children: (0, jsx_runtime_1.jsx)(AnimatedYStack, { children: (0, jsx_runtime_1.jsx)(gui_1.Tabs.Content, { value: currentTab, forceMount: true, flex: 1, justify: "center", children: (0, jsx_runtime_1.jsx)(gui_1.H5, { text: "center", children: currentTab }) }) }, currentTab) })] }));
+};
+const TabsAdvancedUnderline = () => {
+    const [tabState, setTabState] = react_1.default.useState({
+        activeAt: null,
+        currentTab: 'tab1',
+        intentAt: null,
+        prevActiveAt: null,
+    });
+    const setCurrentTab = (currentTab) => setTabState({ ...tabState, currentTab });
+    const setIntentIndicator = (intentAt) => setTabState({ ...tabState, intentAt });
+    const setActiveIndicator = (activeAt) => setTabState({ ...tabState, prevActiveAt: tabState.activeAt, activeAt });
+    const { activeAt, intentAt, prevActiveAt, currentTab } = tabState;
+    // 1 = right, 0 = nowhere, -1 = left
+    const direction = (() => {
+        if (!activeAt || !prevActiveAt || activeAt.x === prevActiveAt.x) {
+            return 0;
+        }
+        return activeAt.x > prevActiveAt.x ? -1 : 1;
+    })();
+    const handleOnInteraction = (type, layout) => {
+        if (type === 'select') {
+            setActiveIndicator(layout);
+        }
+        else {
+            setIntentIndicator(layout);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Tabs, { value: currentTab, onValueChange: setCurrentTab, orientation: "horizontal", size: "$4", height: 150, flexDirection: "column", activationMode: "manual", bg: "$background", rounded: "$4", children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { position: "relative", children: [(0, jsx_runtime_1.jsx)(gui_1.AnimatePresence, { children: intentAt && ((0, jsx_runtime_1.jsx)(TabsRovingIndicator, { width: intentAt.width, height: "$0.5", x: intentAt.x, b: 0 })) }), (0, jsx_runtime_1.jsx)(gui_1.AnimatePresence, { children: activeAt && ((0, jsx_runtime_1.jsx)(TabsRovingIndicator, { theme: "accent", active: true, width: activeAt.width, height: "$0.5", x: activeAt.x, b: 0 })) }), (0, jsx_runtime_1.jsxs)(gui_1.Tabs.List, { loop: false, "aria-label": "Manage your account", borderBottomLeftRadius: 0, borderBottomRightRadius: 0, paddingBottom: "$1.5", borderColor: "$color3", borderBottomWidth: "$0.5", backgroundColor: "transparent", children: [(0, jsx_runtime_1.jsx)(gui_1.Tabs.Tab, { unstyled: true, paddingHorizontal: "$3", value: "tab1", onInteraction: handleOnInteraction, children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { select: "none", cursor: "default", children: "Profile" }) }), (0, jsx_runtime_1.jsx)(gui_1.Tabs.Tab, { unstyled: true, paddingHorizontal: "$3", value: "tab2", onInteraction: handleOnInteraction, children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { select: "none", cursor: "default", children: "Connections" }) }), (0, jsx_runtime_1.jsx)(gui_1.Tabs.Tab, { unstyled: true, paddingHorizontal: "$3", value: "tab3", onInteraction: handleOnInteraction, children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { select: "none", cursor: "default", children: "Notifications" }) })] })] }), (0, jsx_runtime_1.jsx)(gui_1.AnimatePresence, { mode: "wait", custom: { direction }, initial: false, children: (0, jsx_runtime_1.jsx)(AnimatedYStack, { children: (0, jsx_runtime_1.jsx)(gui_1.Tabs.Content, { value: currentTab, forceMount: true, flex: 1, justify: "center", flexBasis: "auto", children: (0, jsx_runtime_1.jsx)(gui_1.H5, { text: "center", children: currentTab }) }) }, currentTab) })] }));
+};
+const TabsRovingIndicator = ({ active, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { position: "absolute", backgroundColor: "$color5", opacity: 0.7, transition: "100ms", enterStyle: {
+            opacity: 0,
+        }, exitStyle: {
+            opacity: 0,
+        }, ...(active && {
+            backgroundColor: '$color5',
+            opacity: 0.6,
+        }), ...props }));
+};
+const AnimatedYStack = (0, gui_1.styled)(gui_1.YStack, {
+    flex: 1,
+    x: 0,
+    opacity: 1,
+    transition: '100ms',
+    variants: {
+        // 1 = right, 0 = nowhere, -1 = left
+        direction: {
+            ':number': (direction) => ({
+                enterStyle: {
+                    x: direction > 0 ? -25 : 25,
+                    opacity: 0,
+                },
+                exitStyle: {
+                    zIndex: 0,
+                    x: direction < 0 ? -25 : 25,
+                    opacity: 0,
+                },
+            }),
+        },
+    },
+});
+//# sourceMappingURL=TabsAdvancedDemo.js.map

package/dist/cjs/TabsAdvancedDemo.js.map

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

package/dist/cjs/TabsDemo.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabsDemo = TabsDemo;
+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 demos = ['horizontal', 'vertical'];
+const demosTitle = {
+    horizontal: 'Horizontal',
+    vertical: 'Vertical',
+};
+function TabsDemo() {
+    const [demoIndex, setDemoIndex] = react_1.default.useState(0);
+    const demo = demos[demoIndex];
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { px: "$4", ...(gui_1.isWeb && {
+            position: 'unset',
+        }), children: [demo === 'horizontal' ? (0, jsx_runtime_1.jsx)(HorizontalTabs, {}) : (0, jsx_runtime_1.jsx)(VerticalTabs, {}), (0, jsx_runtime_1.jsx)(gui_1.XStack, { items: "center", gap: "$4", position: "absolute", b: "$3", l: "$4", $maxXs: { display: 'none' }, children: (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", onPress: () => setDemoIndex((x) => (x + 1) % demos.length), children: demosTitle[demo] }) })] }));
+}
+const HorizontalTabs = () => {
+    const { width } = (0, gui_1.useWindowDimensions)();
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Tabs, { defaultValue: "tab1", orientation: "horizontal", flexDirection: "column", $maxMd: { width: width - 32 }, width: 400, height: 150, rounded: "$4", borderWidth: "$0.25", borderColor: "$borderColor", children: [(0, jsx_runtime_1.jsxs)(gui_1.Tabs.List, { "aria-label": "Manage your account", children: [(0, jsx_runtime_1.jsx)(gui_1.Tabs.Tab, { activeStyle: {
+                            backgroundColor: '$color3',
+                        }, flex: 1, value: "tab1", children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { fontFamily: "$body", text: "center", ellipsis: true, children: "Profile" }) }), (0, jsx_runtime_1.jsx)(gui_1.Tabs.Tab, { activeStyle: {
+                            backgroundColor: '$color3',
+                        }, flex: 1, value: "tab2", children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { fontFamily: "$body", text: "center", ellipsis: true, children: "Connections" }) }), (0, jsx_runtime_1.jsx)(gui_1.Tabs.Tab, { activeStyle: {
+                            backgroundColor: '$color3',
+                        }, flex: 1, value: "tab3", children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { fontFamily: "$body", text: "center", ellipsis: true, children: "Notifications" }) })] }), (0, jsx_runtime_1.jsx)(gui_1.Separator, {}), (0, jsx_runtime_1.jsx)(TabsContent, { value: "tab1", children: (0, jsx_runtime_1.jsx)(gui_1.H5, { children: "Profile" }) }), (0, jsx_runtime_1.jsx)(TabsContent, { value: "tab2", children: (0, jsx_runtime_1.jsx)(gui_1.H5, { children: "Connections" }) }), (0, jsx_runtime_1.jsx)(TabsContent, { value: "tab3", children: (0, jsx_runtime_1.jsx)(gui_1.H5, { children: "Notifications" }) })] }));
+};
+const VerticalTabs = () => {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Tabs, { defaultValue: "tab1", flexDirection: "row", orientation: "vertical", width: 400, rounded: "$4", borderWidth: "$0.25", overflow: "hidden", borderColor: "$borderColor", children: [(0, jsx_runtime_1.jsxs)(gui_1.Tabs.List, { "aria-label": "Manage your account", children: [(0, jsx_runtime_1.jsx)(gui_1.Tabs.Tab, { activeStyle: { backgroundColor: '$color3' }, value: "tab1", children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { children: "Profile" }) }), (0, jsx_runtime_1.jsx)(gui_1.Tabs.Tab, { activeStyle: { backgroundColor: '$color3' }, value: "tab2", children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { children: "Connections" }) }), (0, jsx_runtime_1.jsx)(gui_1.Tabs.Tab, { activeStyle: { backgroundColor: '$color3' }, value: "tab3", children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { children: "Notifications" }) })] }), (0, jsx_runtime_1.jsx)(gui_1.Separator, { vertical: true }), (0, jsx_runtime_1.jsx)(TabsContent, { value: "tab1", children: (0, jsx_runtime_1.jsx)(gui_1.H5, { text: "center", children: "Profile" }) }), (0, jsx_runtime_1.jsx)(TabsContent, { value: "tab2", children: (0, jsx_runtime_1.jsx)(gui_1.H5, { text: "center", children: "Connections" }) }), (0, jsx_runtime_1.jsx)(TabsContent, { value: "tab3", children: (0, jsx_runtime_1.jsx)(gui_1.H5, { text: "center", children: "Notifications" }) })] }));
+};
+const TabsContent = (props) => {
+    return ((0, jsx_runtime_1.jsx)(gui_1.Tabs.Content, { bg: "$background", p: "$2", items: "center", justify: "center", flex: 1, borderColor: "$background", rounded: "$2", borderTopLeftRadius: 0, borderTopRightRadius: 0, borderWidth: "$2", ...props, children: props.children }, "tab3"));
+};
+//# sourceMappingURL=TabsDemo.js.map

package/dist/cjs/TabsDemo.js.map

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

package/dist/cjs/TabsHeadlessDemo.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomTabs = exports.ContentFrame = exports.TabFrame = exports.TabsFrame = void 0;
+exports.TabsHeadlessDemo = TabsHeadlessDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const gui_1 = require("@hanzo/gui");
+const tabs_1 = require("@hanzogui/tabs");
+const get_button_sized_1 = require("@hanzogui/get-button-sized");
+const demos = ['horizontal', 'vertical'];
+exports.TabsFrame = (0, gui_1.styled)(gui_1.SizableStack, {
+    name: 'TabsFrame',
+});
+exports.TabFrame = (0, gui_1.styled)(gui_1.ThemeableStack, {
+    name: 'TabsTrigger',
+    render: 'button',
+    cursor: 'pointer',
+    backgroundColor: 'transparent',
+    variants: {
+        size: {
+            '...size': get_button_sized_1.getButtonSized,
+        },
+        disabled: {
+            true: {
+                pointerEvents: 'none',
+            },
+        },
+        active: {
+            true: {
+                hoverStyle: {
+                    backgroundColor: '$background',
+                },
+                focusStyle: {
+                    backgroundColor: '$background',
+                },
+            },
+        },
+    },
+});
+const CONTENT_NAME = 'TabsContent';
+exports.ContentFrame = (0, gui_1.styled)(gui_1.ThemeableStack, {
+    name: CONTENT_NAME,
+    flex: 1,
+    p: '$6',
+    justify: 'center',
+    items: 'center',
+    bg: '$color4',
+    rounded: '$4',
+});
+exports.CustomTabs = (0, tabs_1.createTabs)({
+    TabsFrame: exports.TabsFrame,
+    TabFrame: exports.TabFrame,
+    ContentFrame: exports.ContentFrame,
+});
+function TabsHeadlessDemo() {
+    const [demo, setDemo] = (0, react_1.useState)(demos[0]);
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { px: "$4", ...(gui_1.isWeb && {
+            position: 'static',
+        }), children: [(0, jsx_runtime_1.jsx)(TabsView, { flexDirection: demo === 'horizontal' ? 'row' : 'column' }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { items: "center", gap: "$4", position: "absolute", b: "$3", l: "$4", $xxs: { display: 'none' }, children: (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "$2", onPress: () => setDemo(demo === 'horizontal' ? 'vertical' : 'horizontal'), children: (0, jsx_runtime_1.jsx)(gui_1.Button.Text, { textTransform: "capitalize", children: demo }) }) })] }));
+}
+const content = ['Home', 'Profile', 'Settings'];
+const TabsView = ({ flexDirection = 'row' }) => {
+    return ((0, jsx_runtime_1.jsxs)(exports.CustomTabs, { flexDirection: flexDirection === 'column' ? 'row' : 'column', defaultValue: content[0], children: [(0, jsx_runtime_1.jsx)(exports.CustomTabs.List, { flexDirection: flexDirection, children: content.map((name, index) => ((0, jsx_runtime_1.jsx)(exports.CustomTabs.Tab, { value: name, activeStyle: { backgroundColor: 'transparent' }, children: name }, index))) }), content.map((name, index) => ((0, jsx_runtime_1.jsx)(exports.CustomTabs.Content, { value: name, children: name }, index)))] }));
+};
+//# sourceMappingURL=TabsHeadlessDemo.js.map

package/dist/cjs/TabsHeadlessDemo.js.map

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

package/dist/cjs/TextDemo.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextDemo = TextDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+function TextDemo() {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$2", items: "center", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$3", children: "SizableText" }), (0, jsx_runtime_1.jsx)(gui_1.Paragraph, { size: "$2", fontWeight: "800", children: "Paragraph" }), (0, jsx_runtime_1.jsxs)(gui_1.Paragraph, { children: [(0, jsx_runtime_1.jsx)(gui_1.Strong, { children: "Strong" }), ", ", (0, jsx_runtime_1.jsx)(gui_1.Em, { children: "Em" }), ", ", (0, jsx_runtime_1.jsx)(gui_1.Span, { children: "Span" })] })] }));
+}
+//# sourceMappingURL=TextDemo.js.map

package/dist/cjs/TextDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextDemo.js","sourceRoot":"","sources":["../../src/TextDemo.tsx"],"names":[],"mappings":";;;;AAAA,oCAA6E;AAE7E;IACE,OAAO,CACL,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,aAC7B,uBAAC,iBAAW,IAAC,IAAI,EAAC,IAAI,4BAA0B,EAChD,uBAAC,eAAS,IAAC,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,0BAEzB,EACZ,wBAAC,eAAS,eACR,uBAAC,YAAM,yBAAgB,QAAE,uBAAC,QAAE,qBAAQ,QAAE,uBAAC,UAAI,uBAAY,IAC7C,IACL,CACV,CAAA;AACH,CAAC"}

package/dist/cjs/ThemeBuilderDemo.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeBuilderDemo = ThemeBuilderDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+function ThemeBuilderDemo() {
+    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: -50, rotate: "-10deg", children: [(0, jsx_runtime_1.jsx)(Col, { y: 35, bg: "$color9" }), (0, jsx_runtime_1.jsx)(Col, { size: "$8", y: 30, bg: "$color7" }), (0, jsx_runtime_1.jsx)(Col, { size: "$6", y: -50, bg: "$color5" }), (0, jsx_runtime_1.jsx)(Col, { size: "$4", bg: "$color3" }), (0, jsx_runtime_1.jsx)(Col, { size: "$2", bg: "$color1" }), (0, jsx_runtime_1.jsx)(Col, { size: "$4", y: 50, bg: "$color3" }), (0, jsx_runtime_1.jsx)(Col, { size: "$6", y: 80, bg: "$color5" }), (0, jsx_runtime_1.jsx)(Col, { size: "$8", bg: "$color7" }), (0, jsx_runtime_1.jsx)(Col, { bg: "$color9" }), (0, jsx_runtime_1.jsx)(Col, { size: "$8", bg: "$color7" }), (0, jsx_runtime_1.jsx)(Col, { size: "$6", y: 80, bg: "$color5" }), (0, jsx_runtime_1.jsx)(Col, { size: "$4", y: 50, bg: "$color3" }), (0, jsx_runtime_1.jsx)(Col, { size: "$2", bg: "$color1" }), (0, jsx_runtime_1.jsx)(Col, { size: "$4", bg: "$color3" }), (0, jsx_runtime_1.jsx)(Col, { size: "$6", y: -50, bg: "$color5" }), (0, jsx_runtime_1.jsx)(Col, { size: "$8", y: 30, bg: "$color7" }), (0, jsx_runtime_1.jsx)(Col, { y: 35, bg: "$color9" })] }) }));
+}
+function Col(props) {
+    const subTheme = props.subTheme ? `_${props.subTheme}` : '';
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { p: "$2.5", gap: "$3.5", children: [(0, jsx_runtime_1.jsx)(gui_1.Square, { rounded: "$6", size: "$10", theme: props.subTheme, bg: "$background", ...props }), (0, jsx_runtime_1.jsx)(gui_1.Square, { rounded: "$6", size: "$10", theme: ('orange' + subTheme), bg: "$background", ...props }), (0, jsx_runtime_1.jsx)(gui_1.Square, { rounded: "$6", size: "$10", theme: ('yellow' + subTheme), bg: "$background", ...props }), (0, jsx_runtime_1.jsx)(gui_1.Square, { rounded: "$6", size: "$10", theme: ('green' + subTheme), bg: "$background", ...props }), (0, jsx_runtime_1.jsx)(gui_1.Square, { rounded: "$6", size: "$10", theme: ('blue' + subTheme), bg: "$background", ...props }), (0, jsx_runtime_1.jsx)(gui_1.Square, { rounded: "$6", size: "$10", theme: ('purple' + subTheme), bg: "$background", ...props }), (0, jsx_runtime_1.jsx)(gui_1.Square, { rounded: "$6", size: "$10", theme: ('pink' + subTheme), bg: "$background", ...props }), (0, jsx_runtime_1.jsx)(gui_1.Square, { rounded: "$6", size: "$10", theme: ('red' + subTheme), bg: "$background", ...props }), (0, jsx_runtime_1.jsx)(gui_1.Square, { rounded: "$6", size: "$10", theme: props.subTheme, bg: "$background", ...props }), (0, jsx_runtime_1.jsx)(gui_1.Square, { rounded: "$6", size: "$10", theme: ('orange' + subTheme), bg: "$background", ...props }), (0, jsx_runtime_1.jsx)(gui_1.Square, { rounded: "$6", size: "$10", theme: ('yellow' + subTheme), bg: "$background", ...props }), (0, jsx_runtime_1.jsx)(gui_1.Square, { rounded: "$6", size: "$10", theme: ('green' + subTheme), bg: "$background", ...props })] }));
+}
+//# sourceMappingURL=ThemeBuilderDemo.js.map

package/dist/cjs/ThemeBuilderDemo.js.map

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

package/dist/cjs/ThemeInverseDemo.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeInverseDemo = ThemeInverseDemo;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+function ThemeInverseDemo() {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$4", flexWrap: "wrap", children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { elevation: "$4", bg: "$background", p: "$4", rounded: "$4", gap: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.H5, { children: "Base Theme" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { children: "Normal" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { theme: "accent", children: "Accent" })] }), (0, jsx_runtime_1.jsx)(gui_1.Theme, { name: "red", children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { elevation: "$4", bg: "$background", p: "$4", rounded: "$4", gap: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.H5, { children: "Red Theme" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { children: "Normal" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { theme: "accent", children: "Accent" })] }) }), (0, jsx_runtime_1.jsx)(gui_1.Theme, { name: "blue", children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { elevation: "$4", bg: "$background", p: "$4", rounded: "$4", gap: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.H5, { children: "Blue Theme" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { children: "Normal" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { theme: "accent", children: "Accent" })] }) }), (0, jsx_runtime_1.jsx)(gui_1.Theme, { name: "green", children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { elevation: "$4", bg: "$background", p: "$4", rounded: "$4", gap: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.H5, { children: "Green Theme" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { children: "Normal" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { theme: "accent", children: "Accent" })] }) })] }));
+}
+//# sourceMappingURL=ThemeInverseDemo.js.map

package/dist/cjs/ThemeInverseDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeInverseDemo.js","sourceRoot":"","sources":["../../src/ThemeInverseDemo.tsx"],"names":[],"mappings":";;;;AAAA,oCAA8D;AAE9D;IACE,OAAO,CACL,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,QAAQ,EAAC,MAAM,aAC9B,wBAAC,YAAM,IAAC,SAAS,EAAC,IAAI,EAAC,EAAE,EAAC,aAAa,EAAC,CAAC,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,aAClE,uBAAC,QAAE,6BAAgB,EACnB,uBAAC,YAAM,yBAAgB,EACvB,uBAAC,YAAM,IAAC,KAAK,EAAC,QAAQ,uBAAgB,IAC/B,EAET,uBAAC,WAAK,IAAC,IAAI,EAAC,KAAK,YACf,wBAAC,YAAM,IAAC,SAAS,EAAC,IAAI,EAAC,EAAE,EAAC,aAAa,EAAC,CAAC,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,aAClE,uBAAC,QAAE,4BAAe,EAClB,uBAAC,YAAM,yBAAgB,EACvB,uBAAC,YAAM,IAAC,KAAK,EAAC,QAAQ,uBAAgB,IAC/B,GACH,EAER,uBAAC,WAAK,IAAC,IAAI,EAAC,MAAM,YAChB,wBAAC,YAAM,IAAC,SAAS,EAAC,IAAI,EAAC,EAAE,EAAC,aAAa,EAAC,CAAC,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,aAClE,uBAAC,QAAE,6BAAgB,EACnB,uBAAC,YAAM,yBAAgB,EACvB,uBAAC,YAAM,IAAC,KAAK,EAAC,QAAQ,uBAAgB,IAC/B,GACH,EAER,uBAAC,WAAK,IAAC,IAAI,EAAC,OAAO,YACjB,wBAAC,YAAM,IAAC,SAAS,EAAC,IAAI,EAAC,EAAE,EAAC,aAAa,EAAC,CAAC,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,aAClE,uBAAC,QAAE,8BAAiB,EACpB,uBAAC,YAAM,yBAAgB,EACvB,uBAAC,YAAM,IAAC,KAAK,EAAC,QAAQ,uBAAgB,IAC/B,GACH,IACD,CACV,CAAA;AACH,CAAC"}

package/dist/cjs/ToastDemo.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastDemo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const gui_1 = require("@hanzo/gui");
+const v2_1 = require("@hanzogui/toast/v2");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
+const gui_2 = require("@hanzo/gui");
+const ToastDemo = () => {
+    const [position, setPosition] = (0, react_1.useState)('bottom-right');
+    const [gap, setGap] = (0, react_1.useState)(14);
+    const [visibleToasts, setVisibleToasts] = (0, react_1.useState)(4);
+    const [duration, setDuration] = (0, react_1.useState)(4000);
+    const count = (0, react_1.useRef)(0);
+    const showToast = (newPosition) => {
+        setPosition(newPosition);
+        count.current++;
+        (0, v2_1.toast)(`Toast #${count.current}`, {
+            description: 'Swipe to dismiss or wait for auto-close.',
+        });
+    };
+    return ((0, jsx_runtime_1.jsxs)(v2_1.Toast, { position: position, gap: Math.round(gap), visibleToasts: visibleToasts, duration: duration, children: [(0, jsx_runtime_1.jsx)(v2_1.Toast.Viewport, { offset: 16, children: (0, jsx_runtime_1.jsx)(v2_1.Toast.List, { renderItem: ({ toast: t, index }) => ((0, jsx_runtime_1.jsx)(v2_1.Toast.Item, { toast: t, index: index, testID: "toast-item", children: (0, jsx_runtime_1.jsx)(ToastContent, { toast: t }) }, t.id)) }) }), (0, jsx_runtime_1.jsxs)(gui_2.YStack, { gap: "$3", self: "center", width: 280, children: [(0, jsx_runtime_1.jsxs)(gui_2.YStack, { gap: "$2", self: "center", children: [(0, jsx_runtime_1.jsxs)(gui_2.XStack, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(PositionButton, { position: "top-left", current: position, onPress: showToast, Icon: lucide_icons_2_1.ArrowUpLeft }), (0, jsx_runtime_1.jsx)(PositionButton, { position: "top-center", current: position, onPress: showToast, Icon: lucide_icons_2_1.ArrowUp }), (0, jsx_runtime_1.jsx)(PositionButton, { position: "top-right", current: position, onPress: showToast, Icon: lucide_icons_2_1.ArrowUpRight, testID: "toast-top-right-button" })] }), (0, jsx_runtime_1.jsxs)(gui_2.XStack, { gap: "$2", children: [(0, jsx_runtime_1.jsx)(PositionButton, { position: "bottom-left", current: position, onPress: showToast, Icon: lucide_icons_2_1.ArrowDownLeft }), (0, jsx_runtime_1.jsx)(PositionButton, { position: "bottom-center", current: position, onPress: showToast, Icon: lucide_icons_2_1.ArrowDown }), (0, jsx_runtime_1.jsx)(PositionButton, { position: "bottom-right", current: position, onPress: showToast, Icon: lucide_icons_2_1.ArrowDownRight, testID: "toast-show-button" })] })] }), (0, jsx_runtime_1.jsxs)(gui_2.YStack, { gap: "$1", paddingTop: "$1", children: [(0, jsx_runtime_1.jsx)(DemoSlider, { label: "Gap", value: gap, min: 0, max: 30, step: 0.1, onChange: setGap }), (0, jsx_runtime_1.jsx)(DemoSlider, { label: "Visible", value: visibleToasts, min: 1, max: 8, step: 1, onChange: setVisibleToasts }), (0, jsx_runtime_1.jsx)(DemoSlider, { label: "Duration", value: duration, min: 1000, max: 10000, step: 100, onChange: setDuration, format: (v) => `${(v / 1000).toFixed(1)}s` })] })] })] }));
+};
+exports.ToastDemo = ToastDemo;
+function ToastContent({ toast: t }) {
+    const { handleClose } = (0, v2_1.useToastItem)();
+    const title = typeof t.title === 'function' ? t.title() : t.title;
+    const description = typeof t.description === 'function' ? t.description() : t.description;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(gui_2.XStack, { gap: "$3", alignItems: "flex-start", children: [(0, jsx_runtime_1.jsx)(v2_1.Toast.Icon, {}), (0, jsx_runtime_1.jsxs)(gui_2.YStack, { flex: 1, gap: "$0.5", children: [title && ((0, jsx_runtime_1.jsx)(v2_1.Toast.Title, { fontWeight: "600", size: "$3", children: title })), description && ((0, jsx_runtime_1.jsx)(v2_1.Toast.Description, { color: "$color9", size: "$2", children: description }))] })] }), gui_1.isWeb && ((0, jsx_runtime_1.jsx)(v2_1.Toast.Close, { testID: "toast-close-button", position: "absolute", top: -6, left: -6, zIndex: 1 }))] }));
+}
+function DemoSlider({ label, value, min, max, step, onChange, format, }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_2.XStack, { gap: "$2", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(gui_2.Label, { size: "$2", width: 55, children: label }), (0, jsx_runtime_1.jsxs)(gui_2.Slider, { flex: 1, value: [value], min: min, max: max, step: step, onValueChange: ([v]) => onChange(v), children: [(0, jsx_runtime_1.jsx)(gui_2.Slider.Track, { children: (0, jsx_runtime_1.jsx)(gui_2.Slider.TrackActive, {}) }), (0, jsx_runtime_1.jsx)(gui_2.Slider.Thumb, { theme: "accent", size: 16, borderRadius: 100, index: 0 })] }), (0, jsx_runtime_1.jsx)(gui_2.SizableText, { userSelect: "none", size: "$2", width: 35, textAlign: "right", children: format ? format(value) : Math.round(value) })] }));
+}
+const PositionButton = ({ position, current, onPress, Icon, testID, }) => {
+    const isActive = position === current;
+    return ((0, jsx_runtime_1.jsx)(gui_2.Button, { icon: Icon, circular: true, theme: isActive ? 'accent' : undefined, onPress: () => onPress(position), testID: testID }));
+};
+//# sourceMappingURL=ToastDemo.js.map

package/dist/cjs/ToastDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastDemo.js","sourceRoot":"","sources":["../../src/ToastDemo.tsx"],"names":[],"mappings":";;;;AAAA,oCAAkC;AAClC,2CAM2B;AAC3B,6DAOiC;AACjC,iCAAwC;AACxC,oCAA+E;AAExE,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAgB,cAAc,CAAC,CAAA;IACvE,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAA;IAClC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,IAAA,gBAAQ,EAAC,CAAC,CAAC,CAAA;IACrD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAA;IAC9C,MAAM,KAAK,GAAG,IAAA,cAAM,EAAC,CAAC,CAAC,CAAA;IAEvB,MAAM,SAAS,GAAG,CAAC,WAA0B,EAAE,EAAE;QAC/C,WAAW,CAAC,WAAW,CAAC,CAAA;QACxB,KAAK,CAAC,OAAO,EAAE,CAAA;QACf,IAAA,UAAK,EAAC,UAAU,KAAK,CAAC,OAAO,EAAE,EAAE;YAC/B,WAAW,EAAE,0CAA0C;SACxD,CAAC,CAAA;IACJ,CAAC,CAAA;IAED,OAAO,CACL,wBAAC,UAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,EACpB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,aAElB,uBAAC,UAAK,CAAC,QAAQ,IAAC,MAAM,EAAE,EAAE,YACxB,uBAAC,UAAK,CAAC,IAAI,IACT,UAAU,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CACnC,uBAAC,UAAK,CAAC,IAAI,IAAY,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAC,YAAY,YAChE,uBAAC,YAAY,IAAC,KAAK,EAAE,CAAC,GAAI,IADX,CAAC,CAAC,EAAE,CAER,CACd,GACD,GACa,EAEjB,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAE,GAAG,aAEvC,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,aAC5B,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,aACd,uBAAC,cAAc,IACb,QAAQ,EAAC,UAAU,EACnB,OAAO,EAAE,QAAQ,EACjB,OAAO,EAAE,SAAS,EAClB,IAAI,EAAE,4BAAW,GACjB,EACF,uBAAC,cAAc,IACb,QAAQ,EAAC,YAAY,EACrB,OAAO,EAAE,QAAQ,EACjB,OAAO,EAAE,SAAS,EAClB,IAAI,EAAE,wBAAO,GACb,EACF,uBAAC,cAAc,IACb,QAAQ,EAAC,WAAW,EACpB,OAAO,EAAE,QAAQ,EACjB,OAAO,EAAE,SAAS,EAClB,IAAI,EAAE,6BAAY,EAClB,MAAM,EAAC,wBAAwB,GAC/B,IACK,EACT,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,aACd,uBAAC,cAAc,IACb,QAAQ,EAAC,aAAa,EACtB,OAAO,EAAE,QAAQ,EACjB,OAAO,EAAE,SAAS,EAClB,IAAI,EAAE,8BAAa,GACnB,EACF,uBAAC,cAAc,IACb,QAAQ,EAAC,eAAe,EACxB,OAAO,EAAE,QAAQ,EACjB,OAAO,EAAE,SAAS,EAClB,IAAI,EAAE,0BAAS,GACf,EACF,uBAAC,cAAc,IACb,QAAQ,EAAC,cAAc,EACvB,OAAO,EAAE,QAAQ,EACjB,OAAO,EAAE,SAAS,EAClB,IAAI,EAAE,+BAAc,EACpB,MAAM,EAAC,mBAAmB,GAC1B,IACK,IACF,EAGT,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,UAAU,EAAC,IAAI,aAC9B,uBAAC,UAAU,IACT,KAAK,EAAC,KAAK,EACX,KAAK,EAAE,GAAG,EACV,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,EAAE,EACP,IAAI,EAAE,GAAG,EACT,QAAQ,EAAE,MAAM,GAChB,EACF,uBAAC,UAAU,IACT,KAAK,EAAC,SAAS,EACf,KAAK,EAAE,aAAa,EACpB,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,CAAC,EACN,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,gBAAgB,GAC1B,EACF,uBAAC,UAAU,IACT,KAAK,EAAC,UAAU,EAChB,KAAK,EAAE,QAAQ,EACf,GAAG,EAAE,IAAI,EACT,GAAG,EAAE,KAAK,EACV,IAAI,EAAE,GAAG,EACT,QAAQ,EAAE,WAAW,EACrB,MAAM,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,GAC1C,IACK,IACF,IACH,CACT,CAAA;AACH,CAAC,CAAA;AA9GY,QAAA,SAAS,GAAT,SAAS,CA8GrB;AAED,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC,EAAqB;IACnD,MAAM,EAAE,WAAW,EAAE,GAAG,IAAA,iBAAY,GAAE,CAAA;IAEtC,MAAM,KAAK,GAAG,OAAO,CAAC,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;IACjE,MAAM,WAAW,GACf,OAAO,CAAC,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAA;IAEvE,OAAO,CACL,6DACE,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,UAAU,EAAC,YAAY,aACtC,uBAAC,UAAK,CAAC,IAAI,KAAG,EACd,wBAAC,YAAM,IAAC,IAAI,EAAE,CAAC,EAAE,GAAG,EAAC,MAAM,aACxB,KAAK,IAAI,CACR,uBAAC,UAAK,CAAC,KAAK,IAAC,UAAU,EAAC,KAAK,EAAC,IAAI,EAAC,IAAI,YACpC,KAAK,GACM,CACf,EACA,WAAW,IAAI,CACd,uBAAC,UAAK,CAAC,WAAW,IAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,IAAI,YACzC,WAAW,GACM,CACrB,IACM,IACF,EAER,WAAK,IAAI,CACR,uBAAC,UAAK,CAAC,KAAK,IACV,MAAM,EAAC,oBAAoB,EAC3B,QAAQ,EAAC,UAAU,EACnB,GAAG,EAAE,CAAC,CAAC,EACP,IAAI,EAAE,CAAC,CAAC,EACR,MAAM,EAAE,CAAC,GACT,CACH,IACA,CACJ,CAAA;AACH,CAAC;AAED,SAAS,UAAU,CAAC,EAClB,KAAK,EACL,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,MAAM,GASP;IACC,OAAO,CACL,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,UAAU,EAAC,QAAQ,aAClC,uBAAC,WAAK,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,YACvB,KAAK,GACA,EACR,wBAAC,YAAM,IACL,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,CAAC,KAAK,CAAC,EACd,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,aAEnC,uBAAC,YAAM,CAAC,KAAK,cACX,uBAAC,YAAM,CAAC,WAAW,KAAG,GACT,EACf,uBAAC,YAAM,CAAC,KAAK,IAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,GAAI,IAC/D,EACT,uBAAC,iBAAW,IAAC,UAAU,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,EAAE,EAAE,SAAS,EAAC,OAAO,YAClE,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAC/B,IACP,CACV,CAAA;AACH,CAAC;AAED,MAAM,cAAc,GAAG,CAAC,EACtB,QAAQ,EACR,OAAO,EACP,OAAO,EACP,IAAI,EACJ,MAAM,GAOP,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,QAAQ,KAAK,OAAO,CAAA;IAErC,OAAO,CACL,uBAAC,YAAM,IACL,IAAI,EAAE,IAAI,EACV,QAAQ,QACR,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACtC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,EAChC,MAAM,EAAE,MAAM,GACd,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/cjs/ToastDuplicateDemo.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToastDuplicateDemo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const v2_1 = require("@hanzogui/toast/v2");
+const gui_1 = require("@hanzo/gui");
+/**
+ *  IMPORTANT NOTE: if you're copy-pasting this demo into your code, make sure to add the Toast wrapper as well.
+ */
+const ToastDuplicateDemo = () => {
+    return ((0, jsx_runtime_1.jsxs)(v2_1.Toast, { children: [(0, jsx_runtime_1.jsx)(v2_1.Toast.Viewport, { children: (0, jsx_runtime_1.jsx)(ToastList, {}) }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { items: "center", children: (0, jsx_runtime_1.jsx)(gui_1.Button, { onPress: () => {
+                        (0, v2_1.toast)('Successfully saved!', {
+                            description: "Don't worry... We've got your data.",
+                        });
+                    }, children: "Show toast" }) })] }));
+};
+exports.ToastDuplicateDemo = ToastDuplicateDemo;
+const ToastList = () => {
+    const { toasts } = (0, v2_1.useToasts)();
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: toasts.map((t, index) => ((0, jsx_runtime_1.jsx)(v2_1.Toast.Item, { toast: t, index: index, children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { gap: "$4", items: "center", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.CheckCircle2, {}) }), (0, jsx_runtime_1.jsxs)(gui_1.YStack, { children: [(0, jsx_runtime_1.jsx)(v2_1.Toast.Title, { children: typeof t.title === 'function' ? t.title() : t.title }), t.description && ((0, jsx_runtime_1.jsx)(v2_1.Toast.Description, { children: typeof t.description === 'function' ? t.description() : t.description }))] })] }) }, t.id))) }));
+};
+//# sourceMappingURL=ToastDuplicateDemo.js.map

package/dist/cjs/ToastDuplicateDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastDuplicateDemo.js","sourceRoot":"","sources":["../../src/ToastDuplicateDemo.tsx"],"names":[],"mappings":";;;;AAAA,6DAAuD;AACvD,2CAA4D;AAC5D,oCAAmD;AAEnD;;GAEG;AACI,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACrC,OAAO,CACL,wBAAC,UAAK,eACJ,uBAAC,UAAK,CAAC,QAAQ,cACb,uBAAC,SAAS,KAAG,GACE,EAEjB,uBAAC,YAAM,IAAC,KAAK,EAAC,QAAQ,YACpB,uBAAC,YAAM,IACL,OAAO,EAAE,GAAG,EAAE;wBACZ,IAAA,UAAK,EAAC,qBAAqB,EAAE;4BAC3B,WAAW,EAAE,qCAAqC;yBACnD,CAAC,CAAA;oBACJ,CAAC,2BAGM,GACF,IACH,CACT,CAAA;AACH,CAAC,CAAA;AApBY,QAAA,kBAAkB,GAAlB,kBAAkB,CAoB9B;AAED,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,IAAA,cAAS,GAAE,CAAA;IAE9B,OAAO,CACL,2DACG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACxB,uBAAC,UAAK,CAAC,IAAI,IAAY,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,KAAK,YAC3C,wBAAC,YAAM,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,aAC7B,uBAAC,YAAM,cACL,uBAAC,6BAAY,KAAG,GACT,EAET,wBAAC,YAAM,eACL,uBAAC,UAAK,CAAC,KAAK,cACT,OAAO,CAAC,CAAC,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GACxC,EACb,CAAC,CAAC,WAAW,IAAI,CAChB,uBAAC,UAAK,CAAC,WAAW,cACf,OAAO,CAAC,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,GACpD,CACrB,IACM,IACF,IAhBM,CAAC,CAAC,EAAE,CAiBR,CACd,CAAC,GACD,CACJ,CAAA;AACH,CAAC,CAAA"}