@hanzogui/stacks 8.3.0 → 8.3.2

package/dist/cjs/NestingContext.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonNestingContext = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+exports.ButtonNestingContext = react_1.default.createContext(false);
+//# sourceMappingURL=NestingContext.js.map

package/dist/cjs/NestingContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NestingContext.js","sourceRoot":"","sources":["../../src/NestingContext.tsx"],"names":[],"mappings":";;;;AAAA,0DAAyB;AAEZ,QAAA,oBAAoB,GAAG,eAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA"}

package/dist/cjs/SizableStack.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SizableStack = void 0;
+const core_1 = require("@hanzogui/core");
+const get_button_sized_1 = require("@hanzogui/get-button-sized");
+const ThemeableStack_tsx_1 = require("./ThemeableStack.js");
+const variants_tsx_1 = require("./variants.js");
+exports.SizableStack = (0, core_1.styled)(ThemeableStack_tsx_1.ThemeableStack, {
+    name: 'SizableStack',
+    variants: {
+        unstyled: {
+            true: {
+                elevate: false,
+                bordered: false,
+            },
+        },
+        circular: variants_tsx_1.circular,
+        elevate: variants_tsx_1.elevate,
+        bordered: {
+            true: variants_tsx_1.bordered,
+        },
+        size: {
+            '...size': (val, extras) => {
+                return (0, get_button_sized_1.getButtonSized)(val, extras);
+            },
+        },
+    },
+});
+//# sourceMappingURL=SizableStack.js.map

package/dist/cjs/SizableStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SizableStack.js","sourceRoot":"","sources":["../../src/SizableStack.tsx"],"names":[],"mappings":";;;AAAA,yCAAuC;AACvC,iEAA2D;AAE3D,4DAAqD;AACrD,gDAA4D;AAE/C,QAAA,YAAY,GAAG,IAAA,aAAM,EAAC,mCAAc,EAAE;IACjD,IAAI,EAAE,cAAc;IAEpB,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,IAAI,EAAE;gBACJ,OAAO,EAAE,KAAK;gBACd,QAAQ,EAAE,KAAK;aAChB;SACF;QAED,QAAQ,EAAR,uBAAQ;QACR,OAAO,EAAP,sBAAO;QAEP,QAAQ,EAAE;YACR,IAAI,EAAE,uBAAQ;SACf;QAED,IAAI,EAAE;YACJ,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;gBACzB,OAAO,IAAA,iCAAc,EAAC,GAAG,EAAE,MAAM,CAAC,CAAA;YACpC,CAAC;SACF;KACO;CACX,CAAC,CAAA"}

package/dist/cjs/Stacks.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZStack = exports.XStack = exports.YStack = exports.fullscreenStyle = void 0;
+const core_1 = require("@hanzogui/core");
+const getElevation_tsx_1 = require("./getElevation.js");
+exports.fullscreenStyle = {
+    position: 'absolute',
+    inset: 0,
+};
+const variants = {
+    fullscreen: {
+        true: exports.fullscreenStyle,
+    },
+    elevation: {
+        '...size': getElevation_tsx_1.getElevation,
+        ':number': getElevation_tsx_1.getElevation,
+    },
+};
+/**
+ * @summary A view that arranges its children in a vertical line.
+ * @see — Docs https://hanzogui.dev/ui/stacks#xstack-ystack-zstack
+ */
+exports.YStack = (0, core_1.styled)(core_1.View, {
+    flexDirection: 'column',
+    variants,
+});
+exports.YStack['displayName'] = 'YStack';
+/**
+ * @summary A view that arranges its children in a horizontal line.
+ * @see — Docs https://hanzogui.dev/ui/stacks#xstack-ystack-zstack
+ */
+exports.XStack = (0, core_1.styled)(core_1.View, {
+    flexDirection: 'row',
+    variants,
+});
+exports.XStack['displayName'] = 'XStack';
+/**
+ * @summary A view that stacks its children on top of each other.
+ * @see — Docs https://hanzogui.dev/ui/stacks#xstack-ystack-zstack
+ */
+exports.ZStack = (0, core_1.styled)(exports.YStack, {
+    position: 'relative',
+}, {
+    neverFlatten: true,
+    isZStack: true,
+});
+exports.ZStack['displayName'] = 'ZStack';
+//# sourceMappingURL=Stacks.js.map

package/dist/cjs/Stacks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stacks.js","sourceRoot":"","sources":["../../src/Stacks.tsx"],"names":[],"mappings":";;;AACA,yCAA6C;AAE7C,wDAAiD;AAiBpC,QAAA,eAAe,GAAG;IAC7B,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,CAAC;CACA,CAAA;AAEV,MAAM,QAAQ,GAAG;IACf,UAAU,EAAE;QACV,IAAI,EAAE,QAAA,eAAe;KACtB;IAED,SAAS,EAAE;QACT,SAAS,EAAE,+BAAY;QACvB,SAAS,EAAE,+BAAY;KACxB;CACO,CAAA;AAEV;;;GAGG;AACU,QAAA,MAAM,GAAG,IAAA,aAAM,EAAC,WAAI,EAAE;IACjC,aAAa,EAAE,QAAQ;IACvB,QAAQ;CACT,CAAC,CAAA;AAEF,QAAA,MAAM,CAAC,aAAa,CAAC,GAAG,QAAQ,CAAA;AAEhC;;;GAGG;AACU,QAAA,MAAM,GAAG,IAAA,aAAM,EAAC,WAAI,EAAE;IACjC,aAAa,EAAE,KAAK;IACpB,QAAQ;CACT,CAAC,CAAA;AAEF,QAAA,MAAM,CAAC,aAAa,CAAC,GAAG,QAAQ,CAAA;AAEhC;;;GAGG;AACU,QAAA,MAAM,GAAG,IAAA,aAAM,EAC1B,QAAA,MAAM,EACN;IACE,QAAQ,EAAE,UAAU;CACrB,EACD;IACE,YAAY,EAAE,IAAI;IAClB,QAAQ,EAAE,IAAI;CACf,CACF,CAAA;AAED,QAAA,MAAM,CAAC,aAAa,CAAC,GAAG,QAAQ,CAAA"}

package/dist/cjs/ThemeableStack.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeableStack = exports.themeableVariants = void 0;
+const core_1 = require("@hanzogui/core");
+const Stacks_tsx_1 = require("./Stacks.js");
+const variants_tsx_1 = require("./variants.js");
+const chromelessStyle = {
+    backgroundColor: 'transparent',
+    borderColor: 'transparent',
+    shadowColor: 'transparent',
+    hoverStyle: {
+        borderColor: 'transparent',
+    },
+};
+exports.themeableVariants = {
+    circular: variants_tsx_1.circular,
+    elevate: variants_tsx_1.elevate,
+    bordered: {
+        true: variants_tsx_1.bordered,
+    },
+    transparent: {
+        true: {
+            backgroundColor: 'transparent',
+        },
+    },
+    chromeless: {
+        true: chromelessStyle,
+        all: {
+            ...chromelessStyle,
+            hoverStyle: chromelessStyle,
+            pressStyle: chromelessStyle,
+            focusStyle: chromelessStyle,
+        },
+    },
+};
+exports.ThemeableStack = (0, core_1.styled)(Stacks_tsx_1.YStack, {
+    variants: exports.themeableVariants,
+});
+//# sourceMappingURL=ThemeableStack.js.map

package/dist/cjs/ThemeableStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeableStack.js","sourceRoot":"","sources":["../../src/ThemeableStack.tsx"],"names":[],"mappings":";;;AACA,yCAAuC;AAEvC,4CAAqC;AAErC,gDAA4D;AAE5D,MAAM,eAAe,GAAG;IACtB,eAAe,EAAE,aAAa;IAC9B,WAAW,EAAE,aAAa;IAC1B,WAAW,EAAE,aAAa;IAE1B,UAAU,EAAE;QACV,WAAW,EAAE,aAAa;KAC3B;CACF,CAAA;AAEY,QAAA,iBAAiB,GAAG;IAC/B,QAAQ,EAAR,uBAAQ;IACR,OAAO,EAAP,sBAAO;IAEP,QAAQ,EAAE;QACR,IAAI,EAAE,uBAAQ;KACf;IAED,WAAW,EAAE;QACX,IAAI,EAAE;YACJ,eAAe,EAAE,aAAa;SAC/B;KACF;IAED,UAAU,EAAE;QACV,IAAI,EAAE,eAAe;QACrB,GAAG,EAAE;YACH,GAAG,eAAe;YAClB,UAAU,EAAE,eAAe;YAC3B,UAAU,EAAE,eAAe;YAC3B,UAAU,EAAE,eAAe;SAC5B;KACF;CACO,CAAA;AAEG,QAAA,cAAc,GAAG,IAAA,aAAM,EAAC,mBAAM,EAAE;IAC3C,QAAQ,EAAE,QAAA,iBAAiB;CAC5B,CAAC,CAAA"}

package/dist/cjs/getElevation.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSizedElevation = exports.getElevation = void 0;
+const core_1 = require("@hanzogui/core");
+const getElevation = (size, extras) => {
+    if (!size)
+        return;
+    const { tokens } = extras;
+    const token = tokens.size[size];
+    const sizeNum = ((0, core_1.isVariable)(token) ? +token.val : size);
+    return (0, exports.getSizedElevation)(sizeNum, extras);
+};
+exports.getElevation = getElevation;
+const getSizedElevation = (val, { theme, tokens }) => {
+    let num = 0;
+    if (val === true) {
+        const val = (0, core_1.getVariableValue)(tokens.size['true']);
+        if (typeof val === 'number') {
+            num = val;
+        }
+        else {
+            num = 10;
+        }
+    }
+    else {
+        num = +val;
+    }
+    if (num === 0) {
+        return;
+    }
+    const [height, shadowRadius] = [Math.round(num / 4 + 1), Math.round(num / 2 + 2)];
+    const shadow = {
+        shadowColor: theme.shadowColor,
+        shadowRadius,
+        shadowOffset: { height, width: 0 },
+        ...(core_1.isAndroid
+            ? {
+                elevationAndroid: 2 * height,
+            }
+            : {}),
+    };
+    return shadow;
+};
+exports.getSizedElevation = getSizedElevation;
+//# sourceMappingURL=getElevation.js.map

package/dist/cjs/getElevation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getElevation.js","sourceRoot":"","sources":["../../src/getElevation.tsx"],"names":[],"mappings":";;;AAMA,yCAAwE;AAEjE,MAAM,YAAY,GAAyC,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE;IACjF,IAAI,CAAC,IAAI;QAAE,OAAM;IACjB,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,CAAA;IACzB,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC/B,MAAM,OAAO,GAAG,CAAC,IAAA,iBAAU,EAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAW,CAAA;IACjE,OAAO,IAAA,QAAA,iBAAiB,EAAC,OAAO,EAAE,MAAM,CAAC,CAAA;AAC3C,CAAC,CAAA;AANY,QAAA,YAAY,GAAZ,YAAY,CAMxB;AAEM,MAAM,iBAAiB,GAAG,CAC/B,GAAkC,EAClC,EAAE,KAAK,EAAE,MAAM,EAA4B,EAC3C,EAAE;IACF,IAAI,GAAG,GAAG,CAAC,CAAA;IACX,IAAI,GAAG,KAAK,IAAI,EAAE,CAAC;QACjB,MAAM,GAAG,GAAG,IAAA,uBAAgB,EAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;QACjD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC5B,GAAG,GAAG,GAAG,CAAA;QACX,CAAC;aAAM,CAAC;YACN,GAAG,GAAG,EAAE,CAAA;QACV,CAAC;IACH,CAAC;SAAM,CAAC;QACN,GAAG,GAAG,CAAC,GAAG,CAAA;IACZ,CAAC;IACD,IAAI,GAAG,KAAK,CAAC,EAAE,CAAC;QACd,OAAM;IACR,CAAC;IACD,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;IACjF,MAAM,MAAM,GAAG;QACb,WAAW,EAAE,KAAK,CAAC,WAAW;QAC9B,YAAY;QACZ,YAAY,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE;QAClC,GAAG,CAAC,gBAAS;YACX,CAAC,CAAC;gBACE,gBAAgB,EAAE,CAAC,GAAG,MAAM;aAC7B;YACH,CAAC,CAAC,EAAE,CAAC;KACR,CAAA;IACD,OAAO,MAAM,CAAA;AACf,CAAC,CAAA;AA9BY,QAAA,iBAAiB,GAAjB,iBAAiB,CA8B7B"}

package/dist/cjs/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Stacks.js"), exports);
+tslib_1.__exportStar(require("./ThemeableStack.js"), exports);
+tslib_1.__exportStar(require("./SizableStack.js"), exports);
+tslib_1.__exportStar(require("./NestingContext.js"), exports);
+tslib_1.__exportStar(require("./getElevation.js"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;AAAA,sDAA4B;AAC5B,8DAAoC;AACpC,4DAAkC;AAClC,8DAAoC;AACpC,4DAAkC"}

package/dist/cjs/package.json

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

package/dist/cjs/variants.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.circular = exports.bordered = exports.elevate = void 0;
+const getElevation_tsx_1 = require("./getElevation.js");
+exports.elevate = {
+    true: (_, extras) => {
+        return (0, getElevation_tsx_1.getElevation)(extras.props['size'], extras);
+    },
+};
+const bordered = (val, { props }) => {
+    return {
+        // TODO size it with size in '...size'
+        borderWidth: typeof val === 'number' ? val : 1,
+        borderColor: '$borderColor',
+    };
+};
+exports.bordered = bordered;
+const circularStyle = {
+    borderRadius: 100000,
+    padding: 0,
+};
+exports.circular = {
+    true: (_, { props, tokens }) => {
+        if (!('size' in props)) {
+            return circularStyle;
+        }
+        const size = typeof props.size === 'number' ? props.size : tokens.size[props.size];
+        return {
+            ...circularStyle,
+            width: size,
+            height: size,
+            maxWidth: size,
+            maxHeight: size,
+            minWidth: size,
+            minHeight: size,
+        };
+    },
+};
+//# sourceMappingURL=variants.js.map

package/dist/cjs/variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.js","sourceRoot":"","sources":["../../src/variants.tsx"],"names":[],"mappings":";;;AAAA,wDAAiD;AAEpC,QAAA,OAAO,GAAG;IACrB,IAAI,EAAE,CAAC,CAAU,EAAE,MAAW,EAAE,EAAE;QAChC,OAAO,IAAA,+BAAY,EAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,MAAM,CAAQ,CAAA;IAC1D,CAAC;CACF,CAAA;AAEM,MAAM,QAAQ,GAAG,CAAC,GAAqB,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,OAAO;QACL,sCAAsC;QACtC,WAAW,EAAE,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QAC9C,WAAW,EAAE,cAAc;KAC5B,CAAA;AACH,CAAC,CAAA;AANY,QAAA,QAAQ,GAAR,QAAQ,CAMpB;AAED,MAAM,aAAa,GAAG;IACpB,YAAY,EAAE,MAAO;IACrB,OAAO,EAAE,CAAC;CACX,CAAA;AAEY,QAAA,QAAQ,GAAG;IACtB,IAAI,EAAE,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;QAC7B,IAAI,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,EAAE,CAAC;YACvB,OAAO,aAAa,CAAA;QACtB,CAAC;QACD,MAAM,IAAI,GAAG,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAClF,OAAO;YACL,GAAG,aAAa;YAChB,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,IAAI;YACd,SAAS,EAAE,IAAI;YACf,QAAQ,EAAE,IAAI;YACd,SAAS,EAAE,IAAI;SAChB,CAAA;IACH,CAAC;CACF,CAAA"}

package/dist/esm/NestingContext.js

@@ -0,0 +1,3 @@
+import React from 'react';
+export const ButtonNestingContext = React.createContext(false);
+//# sourceMappingURL=NestingContext.js.map

package/dist/esm/NestingContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NestingContext.js","sourceRoot":"","sources":["../../src/NestingContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA"}

package/dist/esm/SizableStack.js

@@ -0,0 +1,26 @@
+import { styled } from '@hanzogui/core';
+import { getButtonSized } from '@hanzogui/get-button-sized';
+import { ThemeableStack } from './ThemeableStack.js';
+import { bordered, circular, elevate } from './variants.js';
+export const SizableStack = styled(ThemeableStack, {
+    name: 'SizableStack',
+    variants: {
+        unstyled: {
+            true: {
+                elevate: false,
+                bordered: false,
+            },
+        },
+        circular,
+        elevate,
+        bordered: {
+            true: bordered,
+        },
+        size: {
+            '...size': (val, extras) => {
+                return getButtonSized(val, extras);
+            },
+        },
+    },
+});
+//# sourceMappingURL=SizableStack.js.map

package/dist/esm/SizableStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SizableStack.js","sourceRoot":"","sources":["../../src/SizableStack.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAE3D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAsB,CAAA;AACrD,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,eAAgB,CAAA;AAE5D,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,cAAc,EAAE;IACjD,IAAI,EAAE,cAAc;IAEpB,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,IAAI,EAAE;gBACJ,OAAO,EAAE,KAAK;gBACd,QAAQ,EAAE,KAAK;aAChB;SACF;QAED,QAAQ;QACR,OAAO;QAEP,QAAQ,EAAE;YACR,IAAI,EAAE,QAAQ;SACf;QAED,IAAI,EAAE;YACJ,SAAS,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE;gBACzB,OAAO,cAAc,CAAC,GAAG,EAAE,MAAM,CAAC,CAAA;YACpC,CAAC;SACF;KACO;CACX,CAAC,CAAA"}

package/dist/esm/Stacks.js

@@ -0,0 +1,45 @@
+import { View, styled } from '@hanzogui/core';
+import { getElevation } from './getElevation.js';
+export const fullscreenStyle = {
+    position: 'absolute',
+    inset: 0,
+};
+const variants = {
+    fullscreen: {
+        true: fullscreenStyle,
+    },
+    elevation: {
+        '...size': getElevation,
+        ':number': getElevation,
+    },
+};
+/**
+ * @summary A view that arranges its children in a vertical line.
+ * @see — Docs https://hanzogui.dev/ui/stacks#xstack-ystack-zstack
+ */
+export const YStack = styled(View, {
+    flexDirection: 'column',
+    variants,
+});
+YStack['displayName'] = 'YStack';
+/**
+ * @summary A view that arranges its children in a horizontal line.
+ * @see — Docs https://hanzogui.dev/ui/stacks#xstack-ystack-zstack
+ */
+export const XStack = styled(View, {
+    flexDirection: 'row',
+    variants,
+});
+XStack['displayName'] = 'XStack';
+/**
+ * @summary A view that stacks its children on top of each other.
+ * @see — Docs https://hanzogui.dev/ui/stacks#xstack-ystack-zstack
+ */
+export const ZStack = styled(YStack, {
+    position: 'relative',
+}, {
+    neverFlatten: true,
+    isZStack: true,
+});
+ZStack['displayName'] = 'ZStack';
+//# sourceMappingURL=Stacks.js.map

package/dist/esm/Stacks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stacks.js","sourceRoot":"","sources":["../../src/Stacks.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAE7C,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAoB,CAAA;AAiBjD,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,CAAC;CACA,CAAA;AAEV,MAAM,QAAQ,GAAG;IACf,UAAU,EAAE;QACV,IAAI,EAAE,eAAe;KACtB;IAED,SAAS,EAAE;QACT,SAAS,EAAE,YAAY;QACvB,SAAS,EAAE,YAAY;KACxB;CACO,CAAA;AAEV;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,EAAE;IACjC,aAAa,EAAE,QAAQ;IACvB,QAAQ;CACT,CAAC,CAAA;AAEF,MAAM,CAAC,aAAa,CAAC,GAAG,QAAQ,CAAA;AAEhC;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAAC,IAAI,EAAE;IACjC,aAAa,EAAE,KAAK;IACpB,QAAQ;CACT,CAAC,CAAA;AAEF,MAAM,CAAC,aAAa,CAAC,GAAG,QAAQ,CAAA;AAEhC;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,MAAM,CAC1B,MAAM,EACN;IACE,QAAQ,EAAE,UAAU;CACrB,EACD;IACE,YAAY,EAAE,IAAI;IAClB,QAAQ,EAAE,IAAI;CACf,CACF,CAAA;AAED,MAAM,CAAC,aAAa,CAAC,GAAG,QAAQ,CAAA"}

package/dist/esm/ThemeableStack.js

@@ -0,0 +1,36 @@
+import { styled } from '@hanzogui/core';
+import { YStack } from './Stacks.js';
+import { bordered, circular, elevate } from './variants.js';
+const chromelessStyle = {
+    backgroundColor: 'transparent',
+    borderColor: 'transparent',
+    shadowColor: 'transparent',
+    hoverStyle: {
+        borderColor: 'transparent',
+    },
+};
+export const themeableVariants = {
+    circular,
+    elevate,
+    bordered: {
+        true: bordered,
+    },
+    transparent: {
+        true: {
+            backgroundColor: 'transparent',
+        },
+    },
+    chromeless: {
+        true: chromelessStyle,
+        all: {
+            ...chromelessStyle,
+            hoverStyle: chromelessStyle,
+            pressStyle: chromelessStyle,
+            focusStyle: chromelessStyle,
+        },
+    },
+};
+export const ThemeableStack = styled(YStack, {
+    variants: themeableVariants,
+});
+//# sourceMappingURL=ThemeableStack.js.map

package/dist/esm/ThemeableStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeableStack.js","sourceRoot":"","sources":["../../src/ThemeableStack.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAA;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAc,CAAA;AAErC,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,eAAgB,CAAA;AAE5D,MAAM,eAAe,GAAG;IACtB,eAAe,EAAE,aAAa;IAC9B,WAAW,EAAE,aAAa;IAC1B,WAAW,EAAE,aAAa;IAE1B,UAAU,EAAE;QACV,WAAW,EAAE,aAAa;KAC3B;CACF,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,QAAQ;IACR,OAAO;IAEP,QAAQ,EAAE;QACR,IAAI,EAAE,QAAQ;KACf;IAED,WAAW,EAAE;QACX,IAAI,EAAE;YACJ,eAAe,EAAE,aAAa;SAC/B;KACF;IAED,UAAU,EAAE;QACV,IAAI,EAAE,eAAe;QACrB,GAAG,EAAE;YACH,GAAG,eAAe;YAClB,UAAU,EAAE,eAAe;YAC3B,UAAU,EAAE,eAAe;YAC3B,UAAU,EAAE,eAAe;SAC5B;KACF;CACO,CAAA;AAEV,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE;IAC3C,QAAQ,EAAE,iBAAiB;CAC5B,CAAC,CAAA"}

package/dist/esm/getElevation.js

@@ -0,0 +1,40 @@
+import { getVariableValue, isAndroid, isVariable } from '@hanzogui/core';
+export const getElevation = (size, extras) => {
+    if (!size)
+        return;
+    const { tokens } = extras;
+    const token = tokens.size[size];
+    const sizeNum = (isVariable(token) ? +token.val : size);
+    return getSizedElevation(sizeNum, extras);
+};
+export const getSizedElevation = (val, { theme, tokens }) => {
+    let num = 0;
+    if (val === true) {
+        const val = getVariableValue(tokens.size['true']);
+        if (typeof val === 'number') {
+            num = val;
+        }
+        else {
+            num = 10;
+        }
+    }
+    else {
+        num = +val;
+    }
+    if (num === 0) {
+        return;
+    }
+    const [height, shadowRadius] = [Math.round(num / 4 + 1), Math.round(num / 2 + 2)];
+    const shadow = {
+        shadowColor: theme.shadowColor,
+        shadowRadius,
+        shadowOffset: { height, width: 0 },
+        ...(isAndroid
+            ? {
+                elevationAndroid: 2 * height,
+            }
+            : {}),
+    };
+    return shadow;
+};
+//# sourceMappingURL=getElevation.js.map

package/dist/esm/getElevation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getElevation.js","sourceRoot":"","sources":["../../src/getElevation.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAExE,MAAM,CAAC,MAAM,YAAY,GAAyC,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE;IACjF,IAAI,CAAC,IAAI;QAAE,OAAM;IACjB,MAAM,EAAE,MAAM,EAAE,GAAG,MAAM,CAAA;IACzB,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;IAC/B,MAAM,OAAO,GAAG,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAW,CAAA;IACjE,OAAO,iBAAiB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;AAC3C,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,GAAkC,EAClC,EAAE,KAAK,EAAE,MAAM,EAA4B,EAC3C,EAAE;IACF,IAAI,GAAG,GAAG,CAAC,CAAA;IACX,IAAI,GAAG,KAAK,IAAI,EAAE,CAAC;QACjB,MAAM,GAAG,GAAG,gBAAgB,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;QACjD,IAAI,OAAO,GAAG,KAAK,QAAQ,EAAE,CAAC;YAC5B,GAAG,GAAG,GAAG,CAAA;QACX,CAAC;aAAM,CAAC;YACN,GAAG,GAAG,EAAE,CAAA;QACV,CAAC;IACH,CAAC;SAAM,CAAC;QACN,GAAG,GAAG,CAAC,GAAG,CAAA;IACZ,CAAC;IACD,IAAI,GAAG,KAAK,CAAC,EAAE,CAAC;QACd,OAAM;IACR,CAAC;IACD,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;IACjF,MAAM,MAAM,GAAG;QACb,WAAW,EAAE,KAAK,CAAC,WAAW;QAC9B,YAAY;QACZ,YAAY,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,EAAE;QAClC,GAAG,CAAC,SAAS;YACX,CAAC,CAAC;gBACE,gBAAgB,EAAE,CAAC,GAAG,MAAM;aAC7B;YACH,CAAC,CAAC,EAAE,CAAC;KACR,CAAA;IACD,OAAO,MAAM,CAAA;AACf,CAAC,CAAA"}

package/dist/esm/index.js

@@ -1,6 +1,6 @@
-export * from "./Stacks.mjs";
-export * from "./ThemeableStack.mjs";
-export * from "./SizableStack.mjs";
-export * from "./NestingContext.mjs";
-export * from "./getElevation.mjs";
-//# sourceMappingURL=index.js.map
+export * from './Stacks.js';
+export * from './ThemeableStack.js';
+export * from './SizableStack.js';
+export * from './NestingContext.js';
+export * from './getElevation.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["../../src/index.ts"],"sourcesContent":[null],"mappings":"AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc","ignoreList":[]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAc,CAAA;AAC5B,cAAc,qBAAsB,CAAA;AACpC,cAAc,mBAAoB,CAAA;AAClC,cAAc,qBAAsB,CAAA;AACpC,cAAc,mBAAoB,CAAA"}

package/dist/esm/variants.js

@@ -0,0 +1,35 @@
+import { getElevation } from './getElevation.js';
+export const elevate = {
+    true: (_, extras) => {
+        return getElevation(extras.props['size'], extras);
+    },
+};
+export const bordered = (val, { props }) => {
+    return {
+        // TODO size it with size in '...size'
+        borderWidth: typeof val === 'number' ? val : 1,
+        borderColor: '$borderColor',
+    };
+};
+const circularStyle = {
+    borderRadius: 100000,
+    padding: 0,
+};
+export const circular = {
+    true: (_, { props, tokens }) => {
+        if (!('size' in props)) {
+            return circularStyle;
+        }
+        const size = typeof props.size === 'number' ? props.size : tokens.size[props.size];
+        return {
+            ...circularStyle,
+            width: size,
+            height: size,
+            maxWidth: size,
+            maxHeight: size,
+            minWidth: size,
+            minHeight: size,
+        };
+    },
+};
+//# sourceMappingURL=variants.js.map

package/dist/esm/variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.js","sourceRoot":"","sources":["../../src/variants.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAoB,CAAA;AAEjD,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,IAAI,EAAE,CAAC,CAAU,EAAE,MAAW,EAAE,EAAE;QAChC,OAAO,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,MAAM,CAAQ,CAAA;IAC1D,CAAC;CACF,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,GAAqB,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;IAC3D,OAAO;QACL,sCAAsC;QACtC,WAAW,EAAE,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QAC9C,WAAW,EAAE,cAAc;KAC5B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,aAAa,GAAG;IACpB,YAAY,EAAE,MAAO;IACrB,OAAO,EAAE,CAAC;CACX,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,EAAE;QAC7B,IAAI,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,EAAE,CAAC;YACvB,OAAO,aAAa,CAAA;QACtB,CAAC;QACD,MAAM,IAAI,GAAG,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAA;QAClF,OAAO;YACL,GAAG,aAAa;YAChB,KAAK,EAAE,IAAI;YACX,MAAM,EAAE,IAAI;YACZ,QAAQ,EAAE,IAAI;YACd,SAAS,EAAE,IAAI;YACf,QAAQ,EAAE,IAAI;YACd,SAAS,EAAE,IAAI;SAChB,CAAA;IACH,CAAC;CACF,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzogui/stacks",
-  "version": "8.3.0",
+  "version": "8.3.2",
   "gitHead": "a49cc7ea6b93ba384e77a4880ae48ac4a5635c14",
   "source": "src/index.ts",
   "files": [
@@ -10,41 +10,41 @@
   ],
   "type": "module",
   "sideEffects": false,
-  "main": "dist/cjs",
-  "module": "dist/esm",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
   "types": "./types/index.d.ts",
   "exports": {
     "./package.json": "./package.json",
     ".": {
       "types": "./types/index.d.ts",
-      "react-native": "./dist/esm/index.native.js",
-      "browser": "./dist/esm/index.mjs",
-      "module": "./dist/esm/index.mjs",
-      "import": "./dist/esm/index.mjs",
-      "require": "./dist/cjs/index.cjs",
-      "default": "./dist/esm/index.mjs"
+      "react-native": "./dist/esm/index.js",
+      "browser": "./dist/esm/index.js",
+      "module": "./dist/esm/index.js",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/esm/index.js"
     }
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "hanzogui-build",
+    "build": "hanzogui-build --skip-native",
     "watch": "hanzogui-build --watch",
     "clean": "hanzogui-build clean",
     "clean:build": "hanzogui-build clean:build"
   },
   "dependencies": {
-    "@hanzogui/core": "8.3.0",
-    "@hanzogui/get-button-sized": "8.3.0",
-    "@hanzogui/web": "8.3.0"
+    "@hanzogui/core": "8.3.2",
+    "@hanzogui/get-button-sized": "8.3.2",
+    "@hanzogui/web": "8.3.2"
   },
   "devDependencies": {
-    "@hanzogui/build": "8.3.0",
-    "react": ">=19"
+    "@hanzogui/build": "8.3.2",
+    "react": "19.2.8"
   },
   "peerDependencies": {
-    "react": ">=19"
+    "react": ">=19.2.8"
   },
   "module:jsx": "dist/jsx",
   "repository": {

package/src/SizableStack.tsx

@@ -1,8 +1,8 @@
 import { styled } from '@hanzogui/core'
 import { getButtonSized } from '@hanzogui/get-button-sized'
 import type { GetProps } from '@hanzogui/web'
-import { ThemeableStack } from './ThemeableStack'
-import { bordered, circular, elevate } from './variants'
+import { ThemeableStack } from './ThemeableStack.tsx'
+import { bordered, circular, elevate } from './variants.tsx'
 
 export const SizableStack = styled(ThemeableStack, {
   name: 'SizableStack',

package/src/Stacks.tsx

@@ -1,7 +1,7 @@
 import type { GetProps, SizeTokens } from '@hanzogui/core'
 import { View, styled } from '@hanzogui/core'
 
-import { getElevation } from './getElevation'
+import { getElevation } from './getElevation.tsx'
 
 export interface StackVariants {
   /**

package/src/ThemeableStack.tsx

@@ -1,9 +1,9 @@
 import type { GetProps } from '@hanzogui/core'
 import { styled } from '@hanzogui/core'
 
-import { YStack } from './Stacks'
+import { YStack } from './Stacks.tsx'
 
-import { bordered, circular, elevate } from './variants'
+import { bordered, circular, elevate } from './variants.tsx'
 
 const chromelessStyle = {
   backgroundColor: 'transparent',

package/src/index.ts

@@ -1,5 +1,5 @@
-export * from './Stacks'
-export * from './ThemeableStack'
-export * from './SizableStack'
-export * from './NestingContext'
-export * from './getElevation'
+export * from './Stacks.tsx'
+export * from './ThemeableStack.tsx'
+export * from './SizableStack.tsx'
+export * from './NestingContext.tsx'
+export * from './getElevation.tsx'

package/src/variants.tsx

@@ -1,4 +1,4 @@
-import { getElevation } from './getElevation'
+import { getElevation } from './getElevation.tsx'
 
 export const elevate = {
   true: (_: boolean, extras: any) => {

package/types/SizableStack.d.ts

@@ -1,14 +1,14 @@
 import type { GetProps } from '@hanzogui/web';
 export declare const SizableStack: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
-    size?: import("@hanzogui/web").SizeTokens | undefined;
-    unstyled?: boolean | undefined;
-    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
-    transparent?: boolean | undefined;
-    fullscreen?: boolean | undefined;
+    bordered?: boolean | undefined;
+    chromeless?: "all" | boolean | undefined;
     circular?: boolean | undefined;
     elevate?: boolean | undefined;
-    bordered?: boolean | undefined;
-    chromeless?: boolean | "all" | undefined;
+    elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
+    fullscreen?: boolean | undefined;
+    size?: import("@hanzogui/web").SizeTokens | undefined;
+    transparent?: boolean | undefined;
+    unstyled?: boolean | undefined;
 }, import("@hanzogui/web").StaticConfigPublic>;
 export type SizableStackProps = GetProps<typeof SizableStack>;
 //# sourceMappingURL=SizableStack.d.ts.map