@hanzogui/demos 8.2.1 → 8.3.2

package/dist/esm/SelectDemo.js.map

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

package/dist/esm/SeparatorDemo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Paragraph, Separator, XStack, YStack } from '@hanzo/gui';
+export function SeparatorDemo() {
+    return (_jsxs(YStack, { width: "100%", maxW: 300, mx: 16, children: [_jsx(Paragraph, { fontWeight: "800", children: "Gui" }), _jsx(Paragraph, { children: "A cross-platform component library." }), _jsx(Separator, { my: 15 }), _jsxs(XStack, { height: 20, items: "center", children: [_jsx(Paragraph, { children: "Blog" }), _jsx(Separator, { self: "stretch", vertical: true, mx: 16 }), _jsx(Paragraph, { children: "Docs" }), _jsx(Separator, { self: "stretch", vertical: true, mx: 16 }), _jsx(Paragraph, { children: "Source" })] })] }));
+}
+//# sourceMappingURL=SeparatorDemo.js.map

package/dist/esm/SeparatorDemo.js.map

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

package/dist/esm/ShapesDemo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Circle, Square, XStack } from '@hanzo/gui';
+export function ShapesDemo() {
+    return (_jsxs(XStack, { p: "$2", gap: "$4", children: [_jsx(Square, { size: 100, bg: "$color", elevation: "$4" }), _jsx(Circle, { size: 100, bg: "$color", elevation: "$4" })] }));
+}
+//# sourceMappingURL=ShapesDemo.js.map

package/dist/esm/ShapesDemo.js.map

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

package/dist/esm/SheetDemo.js

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

package/dist/esm/SheetDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SheetDemo.js","sourceRoot":"","sources":["../../src/SheetDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AACvC,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AACnC,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEzE,MAAM,OAAO,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,OAAO,CAAU,CAAA;AAEhE,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE;IAC5B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;IACjD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IACvD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GACvC,KAAK,CAAC,QAAQ,CAA2B,SAAS,CAAC,CAAA;IACrD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAE7D,MAAM,SAAS,GAAG,cAAc,KAAK,SAAS,CAAA;IAC9C,MAAM,UAAU,GAAG,cAAc,KAAK,UAAU,CAAA;IAChD,MAAM,KAAK,GAAG,cAAc,KAAK,KAAK,CAAA;IACtC,MAAM,OAAO,GAAG,cAAc,KAAK,OAAO,CAAA;IAC1C,MAAM,UAAU,GAAG,SAAS;QAC1B,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;QACd,CAAC,CAAC,UAAU;YACV,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC;YACZ,CAAC,CAAC,KAAK;gBACL,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,YAAY;oBACZ,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,CAAC;oBACd,CAAC,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,CAAA;IAE3B,OAAO,CACL,8BACE,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,aACd,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,EAAC,MAAM,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,aACnE,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,qBAAe,EACnD,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,YACvC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,GAChC,EACT,KAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE,CACZ,iBAAiB,CACf,CAAC,IAAI,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,CAChE,YAGF,SACC,EAAE,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,CACzE,cAAc,CAElB,EAAE,GACK,IACF,EACR,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,YAC9C,gBAAgB,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,GACtC,CACV,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IAAC,EAAE,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,YAChC,KAAC,SAAS,cACP,gBAAgB,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE,GACtD,GACL,CACV,IACM,EAET,MAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,OAAO,EACrB,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,qBAAqB,QACrB,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,WAAW,EAC7B,MAAM,EAAE,MAAO,EACf,UAAU,EAAC,QAAQ,aAEnB,KAAC,KAAK,CAAC,OAAO,IACZ,UAAU,EAAC,MAAM,EACjB,EAAE,EAAC,UAAU,EACb,UAAU,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAC1B,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,GACzB,EAEF,KAAC,KAAK,CAAC,MAAM,KAAG,EAChB,KAAC,KAAK,CAAC,KAAK,IAAC,CAAC,EAAC,IAAI,EAAC,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,YAC1D,KAAC,aAAa,IAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,GAAM,GACjE,IACR,IACP,CACJ,CAAA;AACH,CAAC,CAAA;AAED,uFAAuF;AACvF,MAAM,aAAa,GAAG,IAAI,CACxB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,OAAO,EAAO,EAAE,EAAE;IAC9D,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,QAAC,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,GAAI,EAC/E,KAAC,KAAK,IAAC,KAAK,EAAE,GAAG,GAAI,EACpB,KAAK,IAAI,SAAS,IAAI,CACrB,8BACE,KAAC,UAAU,IAAC,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,YAAY,GAAI,EAC3D,KAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,QAAQ,QACR,IAAI,EAAE,SAAS,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,GACjC,IACD,CACJ,IACA,CACJ,CAAA;AACH,CAAC,CACF,CAAA;AAED,SAAS,UAAU,CAAC,KAAiB;IACnC,OAAO,CACL,MAAC,KAAK,IAAC,UAAU,EAAC,QAAQ,EAAC,KAAK,QAAC,UAAU,EAAE,CAAC,EAAE,CAAC,EAAE,qBAAqB,WAAK,KAAK,aAChF,KAAC,KAAK,CAAC,OAAO,IACZ,UAAU,EAAC,QAAQ,EACnB,EAAE,EAAC,UAAU,EACb,UAAU,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,EAC1B,SAAS,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,GACzB,EAEF,KAAC,KAAK,CAAC,MAAM,KAAG,EAChB,KAAC,KAAK,CAAC,KAAK,IAAC,IAAI,EAAE,CAAC,EAAE,OAAO,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,YAC5D,KAAC,KAAK,CAAC,UAAU,cACf,MAAC,MAAM,IAAC,CAAC,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,aACrB,KAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,QAAQ,QACR,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,WAAW,EACjB,OAAO,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,KAAK,CAAC,GAC1C,EAEF,KAAC,EAAE,8BAAiB,EACnB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CACnC,KAAC,SAAS,IAAS,IAAI,EAAC,IAAI,4XAAZ,CAAC,CAOL,CACb,CAAC,IACK,GACQ,GACP,IACR,CACT,CAAA;AACH,CAAC"}

package/dist/esm/SliderDemo.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slider, XStack } from '@hanzo/gui';
+export function SliderDemo() {
+    return (_jsxs(XStack, { height: 200, items: "center", gap: "$8", children: [_jsx(SimpleSlider, { height: 200, orientation: "vertical" }), _jsx(SimpleSlider, { width: 200 })] }));
+}
+function SimpleSlider({ children, ...props }) {
+    return (_jsxs(Slider, { defaultValue: [50], max: 100, step: 1, ...props, children: [_jsx(Slider.Track, { children: _jsx(Slider.TrackActive, {}) }), _jsx(Slider.Thumb, { theme: "accent", size: 30, borderRadius: 100 }), children] }));
+}
+//# sourceMappingURL=SliderDemo.js.map

package/dist/esm/SliderDemo.js.map

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

package/dist/esm/SpinnerDemo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Spinner, YStack } from '@hanzo/gui';
+export function SpinnerDemo() {
+    return (_jsxs(YStack, { p: "$3", gap: "$4", items: "center", children: [_jsx(Spinner, { size: "small", color: "$green10" }), _jsx(Spinner, { size: "large", color: "$yellow10" })] }));
+}
+//# sourceMappingURL=SpinnerDemo.js.map

package/dist/esm/SpinnerDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerDemo.js","sourceRoot":"","sources":["../../src/SpinnerDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAE5C,MAAM,UAAU,WAAW;IACzB,OAAO,CACL,MAAC,MAAM,IAAC,CAAC,EAAC,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,aACpC,KAAC,OAAO,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,UAAU,GAAG,EACzC,KAAC,OAAO,IAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAC,WAAW,GAAG,IACnC,CACV,CAAA;AACH,CAAC"}

package/dist/esm/StacksDemo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XStack, YStack, ZStack } from '@hanzo/gui';
+export function StacksDemo() {
+    return (_jsxs(XStack, { maxW: 250, p: "$2", self: "center", gap: "$2", children: [_jsxs(YStack, { flex: 1, flexBasis: "auto", borderWidth: 2, borderColor: "$color", rounded: "$4", gap: "$2", p: "$2", children: [_jsx(YStack, { bg: "$color", rounded: "$3", p: "$2" }), _jsx(YStack, { bg: "$color", rounded: "$3", p: "$2" }), _jsx(YStack, { bg: "$color", rounded: "$3", p: "$2" })] }), _jsxs(XStack, { flex: 1, flexBasis: "auto", borderWidth: 2, borderColor: "$color", rounded: "$4", gap: "$2", p: "$2", children: [_jsx(YStack, { bg: "$color", rounded: "$3", p: "$2" }), _jsx(YStack, { bg: "$color", rounded: "$3", p: "$2" }), _jsx(YStack, { bg: "$color", rounded: "$3", p: "$2" })] }), _jsxs(ZStack, { flex: 1, flexBasis: "auto", maxW: 50, maxH: 85, width: 100, children: [_jsx(YStack, { fullscreen: true, rounded: "$4", p: "$2", borderColor: "$color", borderWidth: 2 }), _jsx(YStack, { borderColor: "$color", fullscreen: true, y: 10, x: 10, borderWidth: 2, rounded: "$4", p: "$2" }), _jsx(YStack, { borderColor: "$color", fullscreen: true, y: 20, x: 20, borderWidth: 2, rounded: "$4", p: "$2" })] })] }));
+}
+//# sourceMappingURL=StacksDemo.js.map

package/dist/esm/StacksDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StacksDemo.js","sourceRoot":"","sources":["../../src/StacksDemo.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEnD,MAAM,UAAU,UAAU;IACxB,OAAO,CACL,MAAC,MAAM,IAAC,IAAI,EAAE,GAAG,EAAE,CAAC,EAAC,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC9C,MAAC,MAAM,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,KAAC,MAAM,IAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EAC1C,KAAC,MAAM,IAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EAC1C,KAAC,MAAM,IAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,IACnC,EAET,MAAC,MAAM,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,KAAC,MAAM,IAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EAC1C,KAAC,MAAM,IAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EAC1C,KAAC,MAAM,IAAC,EAAE,EAAC,QAAQ,EAAC,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,IACnC,EAET,MAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,aAC9D,KAAC,MAAM,IAAC,UAAU,QAAC,OAAO,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,EAAC,WAAW,EAAC,QAAQ,EAAC,WAAW,EAAE,CAAC,GAAI,EAC9E,KAAC,MAAM,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,KAAC,MAAM,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/esm/SwitchDemo.js

@@ -0,0 +1,15 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label, Separator, Switch, XStack, YStack } from '@hanzo/gui';
+export function SwitchDemo() {
+    return (_jsx(_Fragment, { children: _jsxs(YStack, { width: 200, items: "center", gap: "$3", children: [_jsxs(XStack, { gap: "$3", $xs: { flexDirection: 'column' }, children: [_jsx(SwitchWithLabel, { size: "$2" }), _jsx(SwitchWithLabel, { size: "$2", defaultChecked: true })] }), _jsxs(XStack, { gap: "$3", $xs: { flexDirection: 'column' }, children: [_jsx(SwitchWithLabel, { size: "$3" }), _jsx(SwitchWithLabel, { size: "$3", defaultChecked: true })] }), _jsxs(XStack, { gap: "$3", $xs: { flexDirection: 'column' }, children: [_jsx(SwitchWithLabel, { size: "$4" }), _jsx(SwitchWithLabel, { size: "$4", defaultChecked: true })] })] }) }));
+}
+export function SwitchWithLabel(props) {
+    const id = `switch-${props.size.toString().slice(1)}-${props.defaultChecked ?? ''}}`;
+    return (_jsxs(XStack, { width: 200, items: "center", gap: "$4", children: [_jsx(Label, { pr: "$0", minW: 90, justify: "flex-end", size: props.size, htmlFor: id, children: "Accept" }), _jsx(Separator, { minH: 20, vertical: true }), _jsx(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: _jsx(Switch.Thumb, { transition: "quickest" }) })] }));
+}
+//# sourceMappingURL=SwitchDemo.js.map

package/dist/esm/SwitchDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchDemo.js","sourceRoot":"","sources":["../../src/SwitchDemo.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAS,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAE5E,MAAM,UAAU,UAAU;IACxB,OAAO,CACL,4BACE,MAAC,MAAM,IAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aACzC,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,EAAC,GAAG,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,aAC/C,KAAC,eAAe,IAAC,IAAI,EAAC,IAAI,GAAG,EAC7B,KAAC,eAAe,IAAC,IAAI,EAAC,IAAI,EAAC,cAAc,SAAG,IACrC,EACT,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,EAAC,GAAG,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,aAC/C,KAAC,eAAe,IAAC,IAAI,EAAC,IAAI,GAAG,EAC7B,KAAC,eAAe,IAAC,IAAI,EAAC,IAAI,EAAC,cAAc,SAAG,IACrC,EACT,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,EAAC,GAAG,EAAE,EAAE,aAAa,EAAE,QAAQ,EAAE,aAC/C,KAAC,eAAe,IAAC,IAAI,EAAC,IAAI,GAAG,EAC7B,KAAC,eAAe,IAAC,IAAI,EAAC,IAAI,EAAC,cAAc,SAAG,IACrC,IACF,GACR,CACJ,CAAA;AACH,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,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,MAAC,MAAM,IAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aACzC,KAAC,KAAK,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAE,EAAE,EAAE,OAAO,EAAC,UAAU,EAAC,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,OAAO,EAAE,EAAE,uBAEjE,EACR,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,QAAQ,SAAG,EAChC,KAAC,MAAM,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,KAAC,MAAM,CAAC,KAAK,IAAC,UAAU,EAAC,UAAU,GAAG,GAC/B,IACF,CACV,CAAA;AACH,CAAC"}

package/dist/esm/SwitchHeadlessDemo.js

@@ -0,0 +1,41 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { useSwitch } from '@hanzogui/switch-headless';
+import { Animated, Pressable } from 'react-native';
+import { Label, XStack, YStack } from '@hanzo/gui';
+export function SwitchHeadlessDemo() {
+    return (_jsx(YStack, { width: 200, items: "center", gap: "$3", children: _jsxs(XStack, { gap: "$3", items: "center", children: [_jsx(Label, { htmlFor: "headless", children: "Headless" }), _jsx(HeadlessSwitch, { defaultChecked: true, id: "headless" })] }) }));
+}
+const HeadlessSwitch = React.forwardRef((props, ref) => {
+    const [checked, setChecked] = React.useState(props.defaultChecked || false);
+    const { switchProps, switchRef, bubbleInput } = useSwitch(props, [checked, setChecked], ref);
+    const [animation] = React.useState(() => new Animated.Value(0));
+    React.useEffect(() => {
+        Animated.timing(animation, {
+            toValue: checked ? 1 : 0,
+            duration: 100,
+            useNativeDriver: true,
+        }).start();
+    }, [checked, animation]);
+    const translateX = React.useMemo(() => animation.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 20],
+    }), [animation]);
+    return (_jsxs(_Fragment, { children: [_jsx(Pressable, { style: {
+                    width: 40,
+                    height: 20,
+                    borderRadius: 100,
+                    backgroundColor: checked ? 'lightblue' : 'silver',
+                }, ref: switchRef, ...switchProps, children: _jsx(Animated.View, { style: [
+                        {
+                            backgroundColor: 'black',
+                            borderRadius: 100,
+                            width: 20,
+                            height: 20,
+                        },
+                        {
+                            transform: [{ translateX }],
+                        },
+                    ] }) }), bubbleInput] }));
+});
+//# sourceMappingURL=SwitchHeadlessDemo.js.map

package/dist/esm/SwitchHeadlessDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchHeadlessDemo.js","sourceRoot":"","sources":["../../src/SwitchHeadlessDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAGrD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAElD,MAAM,UAAU,kBAAkB;IAChC,OAAO,CACL,KAAC,MAAM,IAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,YACzC,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,aAC7B,KAAC,KAAK,IAAC,OAAO,EAAC,UAAU,yBAAiB,EAC1C,KAAC,cAAc,IAAC,cAAc,QAAC,EAAE,EAAC,UAAU,GAAG,IACxC,GACF,CACV,CAAA;AACH,CAAC;AAED,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAA4B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IAChF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,CAAA;IAC3E,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,SAAS,CACvD,KAAK,EACL,CAAC,OAAO,EAAE,UAAU,CAAC,EACrB,GAAG,CACJ,CAAA;IAED,MAAM,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;IAE/D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,QAAQ,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,KAAK,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,8BACE,KAAC,SAAS,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,KAAC,QAAQ,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/esm/SwitchUnstyledDemo.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { View, styled } from '@hanzogui/core';
+import { createSwitch } from '@hanzogui/switch';
+import { Label, XStack, YStack } from '@hanzo/gui';
+const Frame = styled(View, {
+    width: 40,
+    height: 20,
+    rounded: 20,
+    variants: {
+        checked: {
+            true: {
+                backgroundColor: 'lightblue',
+            },
+            false: {
+                backgroundColor: 'silver',
+            },
+        },
+    },
+    defaultVariants: {
+        checked: false,
+    },
+});
+const Thumb = styled(View, {
+    width: 20,
+    height: 20,
+    bg: 'black',
+    rounded: 20,
+    variants: {
+        checked: {
+            true: {
+                opacity: 0.8,
+            },
+            false: {
+                opacity: 0.5,
+            },
+        },
+    },
+});
+export const Switch = createSwitch({
+    Frame,
+    Thumb,
+});
+export function SwitchUnstyledDemo() {
+    return (_jsx(YStack, { width: 200, items: "center", gap: "$3", children: _jsxs(XStack, { gap: "$3", items: "center", children: [_jsx(Label, { htmlFor: "unstyled-switch", children: "Unstyled" }), _jsx(Switch, { defaultChecked: true, id: "unstyled-switch", children: _jsx(Switch.Thumb, { transition: "quickest" }) })] }) }));
+}
+//# sourceMappingURL=SwitchUnstyledDemo.js.map

package/dist/esm/SwitchUnstyledDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchUnstyledDemo.js","sourceRoot":"","sources":["../../src/SwitchUnstyledDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAElD,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,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,MAAM,CAAC,IAAI,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;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,YAAY,CAAC;IACjC,KAAK;IACL,KAAK;CACN,CAAC,CAAA;AAEF,MAAM,UAAU,kBAAkB;IAChC,OAAO,CACL,KAAC,MAAM,IAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,YACzC,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,aAC7B,KAAC,KAAK,IAAC,OAAO,EAAC,iBAAiB,yBAAiB,EACjD,KAAC,MAAM,IAAC,cAAc,QAAC,EAAE,EAAC,iBAAiB,YACzC,KAAC,MAAM,CAAC,KAAK,IAAC,UAAU,EAAC,UAAU,GAAG,GAC/B,IACF,GACF,CACV,CAAA;AACH,CAAC"}

package/dist/esm/TabsAdvancedDemo.js

@@ -0,0 +1,102 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { AnimatePresence, Button, H5, SizableText, Tabs, XStack, YStack, styled, } from '@hanzo/gui';
+const demos = ['background', 'underline'];
+const demosTitle = {
+    background: 'Background Indicator',
+    underline: 'Underline Indicator',
+};
+export const TabsAdvancedDemo = () => {
+    const [demoIndex, setDemoIndex] = React.useState(0);
+    const demo = demos[demoIndex];
+    return (_jsxs(_Fragment, { children: [demo === 'underline' ? _jsx(TabsAdvancedUnderline, {}) : _jsx(TabsAdvancedBackground, {}), _jsx(XStack, { items: "center", gap: "$4", position: "absolute", b: "$3", l: "$4", $xxs: { display: 'none' }, children: _jsx(Button, { size: "$2", onPress: () => setDemoIndex((x) => (x + 1) % demos.length), children: demosTitle[demo] }) })] }));
+};
+const TabsAdvancedBackground = () => {
+    const [tabState, setTabState] = React.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 (_jsxs(Tabs, { value: currentTab, onValueChange: setCurrentTab, orientation: "horizontal", size: "$4", p: "$2", height: 150, flexDirection: "column", activationMode: "manual", bg: "$background", rounded: "$4", children: [_jsx(AnimatePresence, { children: intentAt && (_jsx(TabsRovingIndicator, { rounded: "$4", width: intentAt.width, height: intentAt.height, x: intentAt.x, y: intentAt.y })) }), _jsx(AnimatePresence, { children: activeAt && (_jsx(TabsRovingIndicator, { rounded: "$4", theme: "accent", width: activeAt.width, height: activeAt.height, x: activeAt.x, y: activeAt.y })) }), _jsx(YStack, { position: "relative", children: _jsxs(Tabs.List, { loop: false, "aria-label": "Manage your account", gap: "$2", backgroundColor: "transparent", children: [_jsx(Tabs.Tab, { unstyled: true, paddingHorizontal: "$3", value: "tab1", onInteraction: handleOnInteraction, children: _jsx(SizableText, { children: "Profile" }) }), _jsx(Tabs.Tab, { unstyled: true, paddingHorizontal: "$3", value: "tab2", onInteraction: handleOnInteraction, children: _jsx(SizableText, { children: "Connections" }) }), _jsx(Tabs.Tab, { unstyled: true, paddingHorizontal: "$3", value: "tab3", onInteraction: handleOnInteraction, children: _jsx(SizableText, { children: "Notifications" }) })] }) }), _jsx(AnimatePresence, { exitBeforeEnter: true, custom: { direction }, initial: false, children: _jsx(AnimatedYStack, { children: _jsx(Tabs.Content, { value: currentTab, forceMount: true, flex: 1, justify: "center", children: _jsx(H5, { text: "center", children: currentTab }) }) }, currentTab) })] }));
+};
+const TabsAdvancedUnderline = () => {
+    const [tabState, setTabState] = React.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 (_jsxs(Tabs, { value: currentTab, onValueChange: setCurrentTab, orientation: "horizontal", size: "$4", height: 150, flexDirection: "column", activationMode: "manual", bg: "$background", rounded: "$4", children: [_jsxs(YStack, { position: "relative", children: [_jsx(AnimatePresence, { children: intentAt && (_jsx(TabsRovingIndicator, { width: intentAt.width, height: "$0.5", x: intentAt.x, b: 0 })) }), _jsx(AnimatePresence, { children: activeAt && (_jsx(TabsRovingIndicator, { theme: "accent", active: true, width: activeAt.width, height: "$0.5", x: activeAt.x, b: 0 })) }), _jsxs(Tabs.List, { loop: false, "aria-label": "Manage your account", borderBottomLeftRadius: 0, borderBottomRightRadius: 0, paddingBottom: "$1.5", borderColor: "$color3", borderBottomWidth: "$0.5", backgroundColor: "transparent", children: [_jsx(Tabs.Tab, { unstyled: true, paddingHorizontal: "$3", value: "tab1", onInteraction: handleOnInteraction, children: _jsx(SizableText, { select: "none", cursor: "default", children: "Profile" }) }), _jsx(Tabs.Tab, { unstyled: true, paddingHorizontal: "$3", value: "tab2", onInteraction: handleOnInteraction, children: _jsx(SizableText, { select: "none", cursor: "default", children: "Connections" }) }), _jsx(Tabs.Tab, { unstyled: true, paddingHorizontal: "$3", value: "tab3", onInteraction: handleOnInteraction, children: _jsx(SizableText, { select: "none", cursor: "default", children: "Notifications" }) })] })] }), _jsx(AnimatePresence, { mode: "wait", custom: { direction }, initial: false, children: _jsx(AnimatedYStack, { children: _jsx(Tabs.Content, { value: currentTab, forceMount: true, flex: 1, justify: "center", flexBasis: "auto", children: _jsx(H5, { text: "center", children: currentTab }) }) }, currentTab) })] }));
+};
+const TabsRovingIndicator = ({ active, ...props }) => {
+    return (_jsx(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 = styled(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/esm/TabsAdvancedDemo.js.map

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

package/dist/esm/TabsDemo.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Button, H5, Separator, SizableText, Tabs, XStack, YStack, isWeb, useWindowDimensions, } from '@hanzo/gui';
+const demos = ['horizontal', 'vertical'];
+const demosTitle = {
+    horizontal: 'Horizontal',
+    vertical: 'Vertical',
+};
+export function TabsDemo() {
+    const [demoIndex, setDemoIndex] = React.useState(0);
+    const demo = demos[demoIndex];
+    return (_jsxs(YStack, { px: "$4", ...(isWeb && {
+            position: 'unset',
+        }), children: [demo === 'horizontal' ? _jsx(HorizontalTabs, {}) : _jsx(VerticalTabs, {}), _jsx(XStack, { items: "center", gap: "$4", position: "absolute", b: "$3", l: "$4", $maxXs: { display: 'none' }, children: _jsx(Button, { size: "$2", onPress: () => setDemoIndex((x) => (x + 1) % demos.length), children: demosTitle[demo] }) })] }));
+}
+const HorizontalTabs = () => {
+    const { width } = useWindowDimensions();
+    return (_jsxs(Tabs, { defaultValue: "tab1", orientation: "horizontal", flexDirection: "column", $maxMd: { width: width - 32 }, width: 400, height: 150, rounded: "$4", borderWidth: "$0.25", borderColor: "$borderColor", children: [_jsxs(Tabs.List, { "aria-label": "Manage your account", children: [_jsx(Tabs.Tab, { activeStyle: {
+                            backgroundColor: '$color3',
+                        }, flex: 1, value: "tab1", children: _jsx(SizableText, { fontFamily: "$body", text: "center", ellipsis: true, children: "Profile" }) }), _jsx(Tabs.Tab, { activeStyle: {
+                            backgroundColor: '$color3',
+                        }, flex: 1, value: "tab2", children: _jsx(SizableText, { fontFamily: "$body", text: "center", ellipsis: true, children: "Connections" }) }), _jsx(Tabs.Tab, { activeStyle: {
+                            backgroundColor: '$color3',
+                        }, flex: 1, value: "tab3", children: _jsx(SizableText, { fontFamily: "$body", text: "center", ellipsis: true, children: "Notifications" }) })] }), _jsx(Separator, {}), _jsx(TabsContent, { value: "tab1", children: _jsx(H5, { children: "Profile" }) }), _jsx(TabsContent, { value: "tab2", children: _jsx(H5, { children: "Connections" }) }), _jsx(TabsContent, { value: "tab3", children: _jsx(H5, { children: "Notifications" }) })] }));
+};
+const VerticalTabs = () => {
+    return (_jsxs(Tabs, { defaultValue: "tab1", flexDirection: "row", orientation: "vertical", width: 400, rounded: "$4", borderWidth: "$0.25", overflow: "hidden", borderColor: "$borderColor", children: [_jsxs(Tabs.List, { "aria-label": "Manage your account", children: [_jsx(Tabs.Tab, { activeStyle: { backgroundColor: '$color3' }, value: "tab1", children: _jsx(SizableText, { children: "Profile" }) }), _jsx(Tabs.Tab, { activeStyle: { backgroundColor: '$color3' }, value: "tab2", children: _jsx(SizableText, { children: "Connections" }) }), _jsx(Tabs.Tab, { activeStyle: { backgroundColor: '$color3' }, value: "tab3", children: _jsx(SizableText, { children: "Notifications" }) })] }), _jsx(Separator, { vertical: true }), _jsx(TabsContent, { value: "tab1", children: _jsx(H5, { text: "center", children: "Profile" }) }), _jsx(TabsContent, { value: "tab2", children: _jsx(H5, { text: "center", children: "Connections" }) }), _jsx(TabsContent, { value: "tab3", children: _jsx(H5, { text: "center", children: "Notifications" }) })] }));
+};
+const TabsContent = (props) => {
+    return (_jsx(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/esm/TabsDemo.js.map

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

package/dist/esm/TabsHeadlessDemo.js

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

package/dist/esm/TabsHeadlessDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsHeadlessDemo.js","sourceRoot":"","sources":["../../src/TabsHeadlessDemo.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EACL,MAAM,EACN,YAAY,EACZ,cAAc,EACd,MAAM,EACN,MAAM,EACN,KAAK,EACL,MAAM,GACP,MAAM,YAAY,CAAA;AACnB,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAE3D,MAAM,KAAK,GAAG,CAAC,YAAY,EAAE,UAAU,CAAU,CAAA;AAEjD,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,YAAY,EAAE;IAC5C,IAAI,EAAE,WAAW;CAClB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,MAAM,CAAC,cAAc,EAAE;IAC7C,IAAI,EAAE,aAAa;IACnB,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,SAAS;IACjB,eAAe,EAAE,aAAa;IAC9B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,SAAS,EAAE,cAAc;SAC1B;QAED,QAAQ,EAAE;YACR,IAAI,EAAE;gBACJ,aAAa,EAAE,MAAM;aACtB;SACF;QAED,MAAM,EAAE;YACN,IAAI,EAAE;gBACJ,UAAU,EAAE;oBACV,eAAe,EAAE,aAAa;iBAC/B;gBAED,UAAU,EAAE;oBACV,eAAe,EAAE,aAAa;iBAC/B;aACF;SACF;KACO;CACX,CAAC,CAAA;AAEF,MAAM,YAAY,GAAG,aAAa,CAAA;AAElC,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,cAAc,EAAE;IACjD,IAAI,EAAE,YAAY;IAClB,IAAI,EAAE,CAAC;IACP,CAAC,EAAE,IAAI;IACP,OAAO,EAAE,QAAQ;IACjB,KAAK,EAAE,QAAQ;IACf,EAAE,EAAE,SAAS;IACb,OAAO,EAAE,IAAI;CACd,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,UAAU,CAAC;IACnC,SAAS;IACT,QAAQ;IACR,YAAY;CACb,CAAC,CAAA;AAEF,MAAM,UAAU,gBAAgB;IAC9B,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAyB,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;IAElE,OAAO,CAEL,MAAC,MAAM,IACL,EAAE,EAAC,IAAI,KACH,CAAC,KAAK,IAAI;YACZ,QAAQ,EAAE,QAAQ;SACnB,CAAC,aAEF,KAAC,QAAQ,IAAC,aAAa,EAAE,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,GAAI,EAErE,KAAC,MAAM,IACL,KAAK,EAAC,QAAQ,EACd,GAAG,EAAC,IAAI,EACR,QAAQ,EAAC,UAAU,EACnB,CAAC,EAAC,IAAI,EACN,CAAC,EAAC,IAAI,EACN,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,YAEzB,KAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,KAAK,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,YAEzE,KAAC,MAAM,CAAC,IAAI,IAAC,aAAa,EAAC,YAAY,YAAE,IAAI,GAAe,GACrD,GACF,IACF,CACV,CAAA;AACH,CAAC;AAED,MAAM,OAAO,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,CAAA;AAE/C,MAAM,QAAQ,GAAG,CAAC,EAAE,aAAa,GAAG,KAAK,EAAuC,EAAE,EAAE;IAClF,OAAO,CACL,MAAC,UAAU,IACT,aAAa,EAAE,aAAa,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAC5D,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC,aAExB,KAAC,UAAU,CAAC,IAAI,IAAC,aAAa,EAAE,aAAa,YAC1C,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,KAAC,UAAU,CAAC,GAAG,IAEb,KAAK,EAAE,IAAI,EACX,WAAW,EAAE,EAAE,eAAe,EAAE,aAAa,EAAE,YAE9C,IAAI,IAJA,KAAK,CAKK,CAClB,CAAC,GACc,EACjB,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5B,KAAC,UAAU,CAAC,OAAO,IAAa,KAAK,EAAE,IAAI,YACxC,IAAI,IADkB,KAAK,CAET,CACtB,CAAC,IACS,CACd,CAAA;AACH,CAAC,CAAA"}

package/dist/esm/TextDemo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Em, Paragraph, SizableText, Span, Strong, YStack } from '@hanzo/gui';
+export function TextDemo() {
+    return (_jsxs(YStack, { gap: "$2", items: "center", children: [_jsx(SizableText, { size: "$3", children: "SizableText" }), _jsx(Paragraph, { size: "$2", fontWeight: "800", children: "Paragraph" }), _jsxs(Paragraph, { children: [_jsx(Strong, { children: "Strong" }), ", ", _jsx(Em, { children: "Em" }), ", ", _jsx(Span, { children: "Span" })] })] }));
+}
+//# sourceMappingURL=TextDemo.js.map

package/dist/esm/TextDemo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextDemo.js","sourceRoot":"","sources":["../../src/TextDemo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAE7E,MAAM,UAAU,QAAQ;IACtB,OAAO,CACL,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,aAC7B,KAAC,WAAW,IAAC,IAAI,EAAC,IAAI,4BAA0B,EAChD,KAAC,SAAS,IAAC,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,0BAEzB,EACZ,MAAC,SAAS,eACR,KAAC,MAAM,yBAAgB,QAAE,KAAC,EAAE,qBAAQ,QAAE,KAAC,IAAI,uBAAY,IAC7C,IACL,CACV,CAAA;AACH,CAAC"}

package/dist/esm/ThemeBuilderDemo.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Square, XStack, YStack } from '@hanzo/gui';
+export function ThemeBuilderDemo() {
+    return (_jsx(YStack, { fullscreen: true, overflow: "hidden", children: _jsxs(XStack, { maxH: 200, y: -100, x: -50, rotate: "-10deg", children: [_jsx(Col, { y: 35, bg: "$color9" }), _jsx(Col, { size: "$8", y: 30, bg: "$color7" }), _jsx(Col, { size: "$6", y: -50, bg: "$color5" }), _jsx(Col, { size: "$4", bg: "$color3" }), _jsx(Col, { size: "$2", bg: "$color1" }), _jsx(Col, { size: "$4", y: 50, bg: "$color3" }), _jsx(Col, { size: "$6", y: 80, bg: "$color5" }), _jsx(Col, { size: "$8", bg: "$color7" }), _jsx(Col, { bg: "$color9" }), _jsx(Col, { size: "$8", bg: "$color7" }), _jsx(Col, { size: "$6", y: 80, bg: "$color5" }), _jsx(Col, { size: "$4", y: 50, bg: "$color3" }), _jsx(Col, { size: "$2", bg: "$color1" }), _jsx(Col, { size: "$4", bg: "$color3" }), _jsx(Col, { size: "$6", y: -50, bg: "$color5" }), _jsx(Col, { size: "$8", y: 30, bg: "$color7" }), _jsx(Col, { y: 35, bg: "$color9" })] }) }));
+}
+function Col(props) {
+    const subTheme = props.subTheme ? `_${props.subTheme}` : '';
+    return (_jsxs(YStack, { p: "$2.5", gap: "$3.5", children: [_jsx(Square, { rounded: "$6", size: "$10", theme: props.subTheme, bg: "$background", ...props }), _jsx(Square, { rounded: "$6", size: "$10", theme: ('orange' + subTheme), bg: "$background", ...props }), _jsx(Square, { rounded: "$6", size: "$10", theme: ('yellow' + subTheme), bg: "$background", ...props }), _jsx(Square, { rounded: "$6", size: "$10", theme: ('green' + subTheme), bg: "$background", ...props }), _jsx(Square, { rounded: "$6", size: "$10", theme: ('blue' + subTheme), bg: "$background", ...props }), _jsx(Square, { rounded: "$6", size: "$10", theme: ('purple' + subTheme), bg: "$background", ...props }), _jsx(Square, { rounded: "$6", size: "$10", theme: ('pink' + subTheme), bg: "$background", ...props }), _jsx(Square, { rounded: "$6", size: "$10", theme: ('red' + subTheme), bg: "$background", ...props }), _jsx(Square, { rounded: "$6", size: "$10", theme: props.subTheme, bg: "$background", ...props }), _jsx(Square, { rounded: "$6", size: "$10", theme: ('orange' + subTheme), bg: "$background", ...props }), _jsx(Square, { rounded: "$6", size: "$10", theme: ('yellow' + subTheme), bg: "$background", ...props }), _jsx(Square, { rounded: "$6", size: "$10", theme: ('green' + subTheme), bg: "$background", ...props })] }));
+}
+//# sourceMappingURL=ThemeBuilderDemo.js.map

package/dist/esm/ThemeBuilderDemo.js.map

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

package/dist/esm/ThemeInverseDemo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, H5, Theme, XStack, YStack } from '@hanzo/gui';
+export function ThemeInverseDemo() {
+    return (_jsxs(XStack, { gap: "$4", flexWrap: "wrap", children: [_jsxs(YStack, { elevation: "$4", bg: "$background", p: "$4", rounded: "$4", gap: "$3", children: [_jsx(H5, { children: "Base Theme" }), _jsx(Button, { children: "Normal" }), _jsx(Button, { theme: "accent", children: "Accent" })] }), _jsx(Theme, { name: "red", children: _jsxs(YStack, { elevation: "$4", bg: "$background", p: "$4", rounded: "$4", gap: "$3", children: [_jsx(H5, { children: "Red Theme" }), _jsx(Button, { children: "Normal" }), _jsx(Button, { theme: "accent", children: "Accent" })] }) }), _jsx(Theme, { name: "blue", children: _jsxs(YStack, { elevation: "$4", bg: "$background", p: "$4", rounded: "$4", gap: "$3", children: [_jsx(H5, { children: "Blue Theme" }), _jsx(Button, { children: "Normal" }), _jsx(Button, { theme: "accent", children: "Accent" })] }) }), _jsx(Theme, { name: "green", children: _jsxs(YStack, { elevation: "$4", bg: "$background", p: "$4", rounded: "$4", gap: "$3", children: [_jsx(H5, { children: "Green Theme" }), _jsx(Button, { children: "Normal" }), _jsx(Button, { theme: "accent", children: "Accent" })] }) })] }));
+}
+//# sourceMappingURL=ThemeInverseDemo.js.map

package/dist/esm/ThemeInverseDemo.js.map

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

package/dist/esm/ToastDemo.js

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