UNPKG

@mobily/stacks

Version:

⚡ A set of useful components to help you build and maintain React Native (Web too) layouts with ease.

1,751 lines (1,719 loc) 76.2 kB
"use strict"; var __create = Object.create; var __defProp = Object.defineProperty; var __getOwnPropDesc = Object.getOwnPropertyDescriptor; var __getOwnPropNames = Object.getOwnPropertyNames; var __getProtoOf = Object.getPrototypeOf; var __hasOwnProp = Object.prototype.hasOwnProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; var __copyProps = (to, from, except, desc) => { if (from && typeof from === "object" || typeof from === "function") { for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); } return to; }; var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod )); var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); var moduleReactNative = require("react-native"); var moduleReact = require("react"); var moduleWonka = require("wonka"); // src/index.js var src_exports = {}; __export(src_exports, { Bleed: () => make13, Box: () => make3, Column: () => make5, Columns: () => make6, FillView: () => make11, Grid: () => make15, Hidden: () => make12, Inline: () => make9, Inset: () => make14, Row: () => make7, Rows: () => make8, Stack: () => make4, StacksProvider: () => make16, Tiles: () => make10, markAsColumn: () => markAsColumn2, markAsRow: () => markAsRow2, unset: () => unset2, useCurrentBreakpoint: () => useCurrentBreakpoint, useDebugStyle: () => useDebugStyle, useDeepMemoize: () => useDeepMemoize, useResponsiveProp: () => useResponsiveProp, useSpacing: () => useSpacing, useSpacingHelpers: () => useSpacingHelpers, useStacks: () => useStacks, useWindowDimensions: () => useWindowDimensions }); module.exports = __toCommonJS(src_exports); // node_modules/.pnpm/rescript@10.0.1/node_modules/rescript/lib/es6/caml_array.js function sub(x, offset, len) { var result = new Array(len); var j = 0; var i = offset; while (j < len) { result[j] = x[i]; j = j + 1 | 0; i = i + 1 | 0; } ; return result; } // node_modules/.pnpm/rescript@10.0.1/node_modules/rescript/lib/es6/curry.js function app(_f, _args) { while (true) { var args = _args; var f = _f; var init_arity = f.length; var arity = init_arity === 0 ? 1 : init_arity; var len = args.length; var d = arity - len | 0; if (d === 0) { return f.apply(null, args); } if (d >= 0) { return function(f2, args2) { return function(x) { return app(f2, args2.concat([x])); }; }(f, args); } _args = sub(args, arity, -d | 0); _f = f.apply(null, sub(args, 0, arity)); continue; } ; } function _1(o, a0) { var arity = o.length; if (arity === 1) { return o(a0); } else { switch (arity) { case 1: return o(a0); case 2: return function(param) { return o(a0, param); }; case 3: return function(param, param$1) { return o(a0, param, param$1); }; case 4: return function(param, param$1, param$2) { return o(a0, param, param$1, param$2); }; case 5: return function(param, param$1, param$2, param$3) { return o(a0, param, param$1, param$2, param$3); }; case 6: return function(param, param$1, param$2, param$3, param$4) { return o(a0, param, param$1, param$2, param$3, param$4); }; case 7: return function(param, param$1, param$2, param$3, param$4, param$5) { return o(a0, param, param$1, param$2, param$3, param$4, param$5); }; default: return app(o, [a0]); } } } // src/Stacks_component_Box.bs.js var React4 = __toESM(moduleReact); // node_modules/.pnpm/rescript@10.0.1/node_modules/rescript/lib/es6/caml_option.js function some(x) { if (x === void 0) { return { BS_PRIVATE_NESTED_SOME_NONE: 0 }; } else if (x !== null && x.BS_PRIVATE_NESTED_SOME_NONE !== void 0) { return { BS_PRIVATE_NESTED_SOME_NONE: x.BS_PRIVATE_NESTED_SOME_NONE + 1 | 0 }; } else { return x; } } function valFromOption(x) { if (!(x !== null && x.BS_PRIVATE_NESTED_SOME_NONE !== void 0)) { return x; } var depth = x.BS_PRIVATE_NESTED_SOME_NONE; if (depth === 0) { return; } else { return { BS_PRIVATE_NESTED_SOME_NONE: depth - 1 | 0 }; } } // node_modules/.pnpm/rescript@10.0.1/node_modules/rescript/lib/es6/belt_Option.js function mapWithDefaultU(opt, $$default, f) { if (opt !== void 0) { return f(valFromOption(opt)); } else { return $$default; } } function mapU(opt, f) { if (opt !== void 0) { return some(f(valFromOption(opt))); } } function flatMapU(opt, f) { if (opt !== void 0) { return f(valFromOption(opt)); } } function getWithDefault(opt, $$default) { if (opt !== void 0) { return valFromOption(opt); } else { return $$default; } } function isSome(param) { return param !== void 0; } // src/Stacks_hooks.bs.js var React3 = __toESM(moduleReact); var Wonka2 = __toESM(moduleWonka); // node_modules/.pnpm/rescript@10.0.1/node_modules/rescript/lib/es6/caml.js function int_max(x, y) { if (x > y) { return x; } else { return y; } } // node_modules/.pnpm/rescript@10.0.1/node_modules/rescript/lib/es6/caml_obj.js var for_in = function(o, foo) { for (var x in o) { foo(x); } }; function equal(a, b) { if (a === b) { return true; } var a_type = typeof a; if (a_type === "string" || a_type === "number" || a_type === "boolean" || a_type === "undefined" || a === null) { return false; } var b_type = typeof b; if (a_type === "function" || b_type === "function") { throw { RE_EXN_ID: "Invalid_argument", _1: "equal: functional value", Error: new Error() }; } if (b_type === "number" || b_type === "undefined" || b === null) { return false; } var tag_a = a.TAG | 0; var tag_b = b.TAG | 0; if (tag_a === 248) { return a[1] === b[1]; } if (tag_a === 251) { throw { RE_EXN_ID: "Invalid_argument", _1: "equal: abstract value", Error: new Error() }; } if (tag_a !== tag_b) { return false; } var len_a = a.length | 0; var len_b = b.length | 0; if (len_a === len_b) { if (Array.isArray(a)) { var _i = 0; while (true) { var i = _i; if (i === len_a) { return true; } if (!equal(a[i], b[i])) { return false; } _i = i + 1 | 0; continue; } ; } else if (a instanceof Date && b instanceof Date) { return !(a > b || a < b); } else { var result = { contents: true }; var do_key_a = function(key) { if (!Object.prototype.hasOwnProperty.call(b, key)) { result.contents = false; return; } }; var do_key_b = function(key) { if (!Object.prototype.hasOwnProperty.call(a, key) || !equal(b[key], a[key])) { result.contents = false; return; } }; for_in(a, do_key_a); if (result.contents) { for_in(b, do_key_b); } return result.contents; } } else { return false; } } function notequal(a, b) { return !equal(a, b); } // src/Stacks_utils.bs.js var Wonka = __toESM(moduleWonka); // node_modules/.pnpm/rescript@10.0.1/node_modules/rescript/lib/es6/js_int.js var max = 2147483647; var min = -2147483648; // node_modules/.pnpm/rescript@10.0.1/node_modules/rescript/lib/es6/js_math.js function floor_int(f) { if (f > max) { return max; } else if (f < min) { return min; } else { return Math.floor(f); } } function random_int(min2, max2) { return floor_int(Math.random() * (max2 - min2 | 0)) + min2 | 0; } // node_modules/.pnpm/rescript@10.0.1/node_modules/rescript/lib/es6/belt_Array.js function get(arr, i) { if (i >= 0 && i < arr.length) { return some(arr[i]); } } function makeByU(l, f) { if (l <= 0) { return []; } var res = new Array(l); for (var i = 0; i < l; ++i) { res[i] = f(i); } return res; } function slice(a, offset, len) { if (len <= 0) { return []; } var lena = a.length; var ofs = offset < 0 ? int_max(lena + offset | 0, 0) : offset; var hasLen = lena - ofs | 0; var copyLength = hasLen < len ? hasLen : len; if (copyLength <= 0) { return []; } var result = new Array(copyLength); for (var i = 0; i < copyLength; ++i) { result[i] = a[ofs + i | 0]; } return result; } function getByU(a, p) { var l = a.length; var i = 0; var r; while (r === void 0 && i < l) { var v = a[i]; if (p(v)) { r = some(v); } i = i + 1 | 0; } ; return r; } function getIndexByU(a, p) { var l = a.length; var i = 0; var r; while (r === void 0 && i < l) { var v = a[i]; if (p(v)) { r = i; } i = i + 1 | 0; } ; return r; } function mapWithIndexU(a, f) { var l = a.length; var r = new Array(l); for (var i = 0; i < l; ++i) { r[i] = f(i, a[i]); } return r; } function reduceWithIndexU(a, x, f) { var r = x; for (var i = 0, i_finish = a.length; i < i_finish; ++i) { r = f(r, a[i], i); } return r; } // src/Stacks_utils.bs.js var ReactNative = __toESM(moduleReactNative); // src/Stacks_utils.js var React = __toESM(moduleReact); var normalizeResponsiveProp = (value) => { if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") { return [value]; } if (value && value.length) { return value; } console.warn(`Invalid responsive prop value: ${JSON.stringify(value)}`); return []; }; var negateSpace = (value) => { if (typeof value === "number") { return [value * -1]; } if (value && value.length) { const l = value.length; const xs = new Array(l); for (var i = 0; i < l; ++i) { xs[i] = value[i] * -1; } return xs; } return void 0; }; var unset = Object.freeze(true); var unsetFillViewValue = (value) => { if (value === unset) { return void 0; } return value === void 0 ? 0 : value; }; var isColumnComponent = (node) => { return typeof node === "object" && "type" in node && node.type.__isColumn__; }; var isRowComponent = (node) => { return typeof node === "object" && "type" in node && node.type.__isRow__; }; var markAsColumn = (node) => { node.__isColumn__ = true; }; var markAsRow = (node) => { node.__isRow__ = true; }; // src/Stacks_utils.bs.js function negateSpace2(prim) { return negateSpace(prim); } var unset2 = unset; function unsetFillViewValue2(prim) { return unsetFillViewValue(prim); } function isColumnComponent2(prim) { return isColumnComponent(prim); } function isRowComponent2(prim) { return isRowComponent(prim); } function markAsColumn2(prim) { markAsColumn(prim); } function markAsRow2(prim) { markAsRow(prim); } function makeBreakpoints(breakpoints) { var breakpoints$1 = breakpoints.slice(); return breakpoints$1.sort(function(a, b) { return b[1] - a[1] | 0; }); } var defaultBreakpoints = makeBreakpoints([ [ "mobile", 480 ], [ "tablet", 768 ], [ "desktop", 992 ] ]); function randomColor(param) { var arr = makeByU(3, function(param2) { return random_int(0, 255); }); var colors = arr.map(function(prim) { return String(prim); }).join(", "); return "rgba(" + colors + ", 0.2)"; } function splitEvery(xs, size) { if (size < 1 || xs.length <= size) { return [xs]; } var offset = 0; var arr = []; while (offset < xs.length) { var len = offset + size | 0; arr.push(slice(xs, offset, size)); offset = len; } ; return arr; } function memo(fn) { var lastResult = { contents: void 0 }; return function(param) { var result = lastResult.contents; if (result !== void 0) { return valFromOption(result); } var result$1 = fn(void 0); lastResult.contents = some(result$1); return result$1; }; } function intersperse(xs, delimiter) { return reduceWithIndexU(xs, [], function(acc, value, index) { if ((xs.length - 1 | 0) === index) { acc.push(value); } else { acc.push(value, delimiter); } return acc; }); } var makeDimensionsSource = memo(function(param) { return Wonka.share(Wonka.make(function(observer) { var listener = ReactNative.Dimensions.addEventListener("change", observer.next); return function() { listener.remove(); }; })); }); function resolveCurrentBreakpoint(currentWidth, breakpoints) { var defaultBreakpoint = defaultBreakpoints[0]; return getWithDefault(getByU(breakpoints, function(breakpoint) { return currentWidth > breakpoint[1]; }), defaultBreakpoint)[0]; } function resolveResponsiveProp(currentWidth, breakpoints, responsiveProp) { return mapU(responsiveProp, function(responsiveProp2) { var normalizedValues = normalizeResponsiveProp(responsiveProp2); var defaultValue = normalizedValues[normalizedValues.length - 1 | 0]; if (normalizedValues.length === 1) { return defaultValue; } else { return getWithDefault(flatMapU(getIndexByU(breakpoints, function(breakpoint) { return currentWidth > breakpoint[1]; }), function(index) { return get(normalizedValues, (breakpoints.length - 1 | 0) - index | 0); }), defaultValue); } }); } function compareBreakpoints(mapFn, currentBreakpoint, breakpoints, boundBreakpoint) { return getWithDefault(flatMapU(flatMapU(boundBreakpoint, function(boundBreakpoint2) { return mapU(getIndexByU(breakpoints, function(breakpoint) { return currentBreakpoint === breakpoint[0]; }), function(currentBreakpointIndex) { return [ boundBreakpoint2, currentBreakpointIndex ]; }); }), function(tuple) { var currentBreakpointIndex = tuple[1]; var boundBreakpoint2 = tuple[0]; return mapU(getIndexByU(breakpoints, function(breakpoint) { return boundBreakpoint2 === breakpoint[0]; }), function(breakpointIndex) { return mapFn(currentBreakpointIndex, breakpointIndex); }); }), false); } function isBreakpointBelow(param, param$1, param$2) { return compareBreakpoints(function(currentBreakpointIndex, breakpointIndex) { return currentBreakpointIndex > breakpointIndex; }, param, param$1, param$2); } function isBreakpointAbove(param, param$1, param$2) { return compareBreakpoints(function(currentBreakpointIndex, breakpointIndex) { return currentBreakpointIndex < breakpointIndex; }, param, param$1, param$2); } function resolveCollapsibleProps(collapseBelow, reverse, currentBreakpoint, breakpoints) { var isCollapsed = isBreakpointBelow(currentBreakpoint, breakpoints, collapseBelow); var reverse$1 = getWithDefault(reverse, false); var direction = reverse$1 ? isCollapsed ? "column-reverse" : "row-reverse" : isCollapsed ? "column" : "row"; return { direction, isCollapsed }; } // src/Stacks_hooks.bs.js var ReactNative3 = __toESM(moduleReactNative); // src/Stacks_context.bs.js var React2 = __toESM(moduleReact); var ReactNative2 = __toESM(moduleReactNative); var context = React2.createContext({ debug: false, spacing: 4, breakpoints: defaultBreakpoints, dimensions: ReactNative2.Dimensions.get("window") }); var make2 = context.Provider; function makeProps(value, children, param) { return { value, children }; } var Provider = { make: make2, makeProps }; var context$1 = React2.createContext({ isCollapsed: false, space: void 0, alignY: void 0, height: void 0, width: void 0 }); function useColumns(param) { return React2.useContext(context$1); } var make$1 = context$1.Provider; function makeProps$1(value, children, param) { return { value, children }; } var Provider$1 = { make: make$1, makeProps: makeProps$1 }; var ColumnsContext = { context: context$1, useColumns, Provider: Provider$1 }; var context$2 = React2.createContext({ space: void 0, defaultHeight: void 0 }); function useRows(param) { return React2.useContext(context$2); } var make$2 = context$2.Provider; function makeProps$2(value, children, param) { return { value, children }; } var Provider$2 = { make: make$2, makeProps: makeProps$2 }; var RowsContext = { context: context$2, useRows, Provider: Provider$2 }; // src/Stacks_hooks.bs.js function useWindowDimensions(param) { var match = React3.useState(function() { return ReactNative3.Dimensions.get("window"); }); var setDimensions = match[1]; React3.useEffect(function() { var subscription = _1(Wonka2.subscribe(function(layout) { setDimensions(function(param2) { return layout.window; }); }), _1(Wonka2.debounce(function(param2) { if (ReactNative3.Platform.OS === "web") { return 60; } else { return 0; } }), makeDimensionsSource(void 0))); return subscription.unsubscribe; }, []); return match[0]; } function useStacks(param) { return React3.useContext(context); } function useSpacing(__x) { return mapWithDefaultU(__x, 0, function(value) { var match = React3.useContext(context); return match.spacing * value; }); } function useSpacingHelpers(param) { var match = React3.useContext(context); var spacing = match.spacing; var multiply = function(__x) { return mapU(__x, function(value) { return spacing * value; }); }; var divide = function(__x) { return mapU(__x, function(value) { return value / spacing; }); }; return { multiply, divide }; } function useCurrentBreakpoint(param) { var match = React3.useContext(context); return resolveCurrentBreakpoint(match.dimensions.width, match.breakpoints); } function useDebugStyle(param) { var match = React3.useContext(context); var style = React3.useRef(void 0); style.current = match.debug ? { backgroundColor: randomColor(void 0) } : void 0; return style.current; } function useResponsiveProp(param) { var match = React3.useContext(context); var breakpoints = match.breakpoints; var partial_arg = match.dimensions.width; return function(param2) { return resolveResponsiveProp(partial_arg, breakpoints, param2); }; } function useDeepMemoize(deps) { var ref = React3.useRef([]); if (notequal(deps, ref.current)) { ref.current = deps; } return ref.current; } // src/Stacks_component_Box.bs.js var ReactNative5 = __toESM(moduleReactNative); // src/Stacks_styles.bs.js var ReactNative4 = __toESM(moduleReactNative); // node_modules/.pnpm/rescript-react-native@0.68.1_lvg6d4uu442o4ggjdrq4asnyum/node_modules/rescript-react-native/src/apis/Style.bs.js function pct(num) { return num.toString() + "%"; } // src/Stacks_styles.bs.js var styles = ReactNative4.StyleSheet.create({ fullWidth: { width: pct(100) }, fullHeight: { height: pct(100) }, flexContent: { flex: 0, flexBasis: "auto" }, flexFluid: { flexBasis: pct(0), flexGrow: 1, flexShrink: 0 }, flexBasis12: { flexBasis: pct(50) }, flexBasis13: { flexBasis: pct(33.3333) }, flexBasis14: { flexBasis: pct(25) }, flexBasis23: { flexBasis: pct(66.6667) }, flexBasis34: { flexBasis: pct(75) }, flexBasis15: { flexBasis: pct(20) }, flexBasis25: { flexBasis: pct(40) }, flexBasis35: { flexBasis: pct(60) }, flexBasis45: { flexBasis: pct(80) }, alignStart: { alignItems: "flex-start" }, alignCenter: { alignItems: "center" }, alignEnd: { alignItems: "flex-end" }, alignStretch: { alignItems: "stretch" }, justifyStart: { justifyContent: "flex-start" }, justifyCenter: { justifyContent: "center" }, justifyEnd: { justifyContent: "flex-end" }, justifySpaceAround: { justifyContent: "space-around" }, justifySpaceBetween: { justifyContent: "space-between" }, justifySpaceEvenly: { justifyContent: "space-evenly" }, alignSelfStart: { alignSelf: "flex-start" }, alignSelfAuto: { alignSelf: "auto" }, alignSelfCenter: { alignSelf: "center" }, alignSelfEnd: { alignSelf: "flex-end" }, alignSelfStretch: { alignSelf: "stretch" }, directionRow: { flexDirection: "row" }, directionRowReverse: { flexDirection: "row-reverse" }, directionColumn: { flexDirection: "column" }, directionColumnReverse: { flexDirection: "column-reverse" }, wrap: { flexWrap: "wrap" }, nowrap: { flexWrap: "nowrap" }, grow: { flexGrow: 1 }, shrink: { flexShrink: 1 } }); function margin(__x) { return mapU(__x, function(value) { return { margin: value }; }); } function marginX(__x) { return mapU(__x, function(value) { return { marginHorizontal: value }; }); } function marginY(__x) { return mapU(__x, function(value) { return { marginVertical: value }; }); } function marginTop(__x) { return mapU(__x, function(value) { return { marginTop: value }; }); } function marginRight(__x) { return mapU(__x, function(value) { return { marginRight: value }; }); } function marginLeft(__x) { return mapU(__x, function(value) { return { marginLeft: value }; }); } function marginBottom(__x) { return mapU(__x, function(value) { return { marginBottom: value }; }); } function marginStart(__x) { return mapU(__x, function(value) { return { marginStart: value }; }); } function marginEnd(__x) { return mapU(__x, function(value) { return { marginEnd: value }; }); } function padding(__x) { return mapU(__x, function(value) { return { padding: value }; }); } function paddingX(__x) { return mapU(__x, function(value) { return { paddingHorizontal: value }; }); } function paddingY(__x) { return mapU(__x, function(value) { return { paddingVertical: value }; }); } function paddingTop(__x) { return mapU(__x, function(value) { return { paddingTop: value }; }); } function paddingRight(__x) { return mapU(__x, function(value) { return { paddingRight: value }; }); } function paddingLeft(__x) { return mapU(__x, function(value) { return { paddingLeft: value }; }); } function paddingBottom(__x) { return mapU(__x, function(value) { return { paddingBottom: value }; }); } function paddingStart(__x) { return mapU(__x, function(value) { return { paddingStart: value }; }); } function paddingEnd(__x) { return mapU(__x, function(value) { return { paddingEnd: value }; }); } function top(value) { return { top: value }; } function right(value) { return { right: value }; } function bottom(value) { return { bottom: value }; } function left(value) { return { left: value }; } function resolveAlignItems(__x) { return mapU(__x, function(value) { if (value === "top" || value === "left") { return styles.alignStart; } else if (value === "right" || value === "bottom") { return styles.alignEnd; } else if (value === "center") { return styles.alignCenter; } else { return styles.alignStretch; } }); } function resolveAlignSelf(__x) { return mapU(__x, function(value) { if (value === "top" || value === "left") { return styles.alignSelfStart; } else if (value === "right" || value === "bottom") { return styles.alignSelfEnd; } else if (value === "stretch") { return styles.alignSelfStretch; } else if (value === "center") { return styles.alignSelfCenter; } else { return styles.alignSelfAuto; } }); } function resolveJustifyContent(__x) { return mapU(__x, function(value) { if (value === "right" || value === "bottom") { return styles.justifyEnd; } else if (value === "between") { return styles.justifySpaceBetween; } else if (value === "center") { return styles.justifyCenter; } else if (value === "evenly") { return styles.justifySpaceEvenly; } else if (value === "around") { return styles.justifySpaceAround; } else { return styles.justifyStart; } }); } function resolveFlexBasis(__x) { return mapU(__x, function(value) { if (value === "1/3") { return styles.flexBasis13; } else if (value === "1/4") { return styles.flexBasis14; } else if (value === "1/5") { return styles.flexBasis15; } else if (value === "2/3") { return styles.flexBasis23; } else if (value === "2/5") { return styles.flexBasis25; } else if (value === "3/4") { return styles.flexBasis34; } else if (value === "3/5") { return styles.flexBasis35; } else if (value === "4/5") { return styles.flexBasis45; } else if (value === "fluid") { return styles.flexFluid; } else if (value === "content") { return styles.flexContent; } else { return styles.flexBasis12; } }); } function resolveDirection(__x) { return mapU(__x, function(value) { if (value === "row") { return styles.directionRow; } else if (value === "column-reverse") { return styles.directionColumnReverse; } else if (value === "row-reverse") { return styles.directionRowReverse; } else { return styles.directionColumn; } }); } function resolveWrap(__x) { return mapU(__x, function(value) { if (value === "nowrap") { return styles.nowrap; } else { return styles.wrap; } }); } // src/Stacks_component_Box.bs.js function Stacks_component_Box(Props) { var padding2 = Props.padding; var paddingX2 = Props.paddingX; var paddingY2 = Props.paddingY; var paddingTop2 = Props.paddingTop; var paddingBottom2 = Props.paddingBottom; var paddingLeft2 = Props.paddingLeft; var paddingRight2 = Props.paddingRight; var paddingEnd2 = Props.paddingEnd; var paddingStart2 = Props.paddingStart; var margin2 = Props.margin; var marginX2 = Props.marginX; var marginY2 = Props.marginY; var marginTop2 = Props.marginTop; var marginBottom2 = Props.marginBottom; var marginLeft2 = Props.marginLeft; var marginRight2 = Props.marginRight; var marginEnd2 = Props.marginEnd; var marginStart2 = Props.marginStart; var alignX = Props.alignX; var alignY = Props.alignY; var alignSelf = Props.alignSelf; var direction = Props.direction; var wrap = Props.wrap; var flex = Props.flex; var style = Props.style; var viewRef = Props.viewRef; var children = Props.children; var match = useStacks(void 0); var dimensions = match.dimensions; var breakpoints = match.breakpoints; var currentBreakpoint = useCurrentBreakpoint(void 0); var match$1 = useSpacingHelpers(void 0); var multiply = match$1.multiply; var debugStyle = useDebugStyle(void 0); var deps = useDeepMemoize([ padding2, paddingX2, paddingY2, paddingTop2, paddingBottom2, paddingLeft2, paddingRight2, paddingEnd2, paddingStart2, margin2, marginX2, marginY2, marginTop2, marginBottom2, marginLeft2, marginRight2, marginEnd2, marginStart2, alignX, alignY, alignSelf, direction, wrap, flex, breakpoints, currentBreakpoint, debugStyle, style ]); var style$1 = React4.useMemo(function() { var resolveResponsiveProp2 = function(values) { var partial_arg = dimensions.width; return resolveResponsiveProp(partial_arg, breakpoints, values); }; var padding$1 = padding(multiply(resolveResponsiveProp2(padding2))); var paddingX$1 = paddingX(multiply(resolveResponsiveProp2(paddingX2))); var paddingY$1 = paddingY(multiply(resolveResponsiveProp2(paddingY2))); var paddingTop$1 = paddingTop(multiply(resolveResponsiveProp2(paddingTop2))); var paddingBottom$1 = paddingBottom(multiply(resolveResponsiveProp2(paddingBottom2))); var paddingLeft$1 = paddingLeft(multiply(resolveResponsiveProp2(paddingLeft2))); var paddingRight$1 = paddingRight(multiply(resolveResponsiveProp2(paddingRight2))); var paddingEnd$1 = paddingEnd(multiply(resolveResponsiveProp2(paddingEnd2))); var paddingStart$1 = paddingStart(multiply(resolveResponsiveProp2(paddingStart2))); var margin$1 = margin(multiply(resolveResponsiveProp2(margin2))); var marginX$1 = marginX(multiply(resolveResponsiveProp2(marginX2))); var marginY$1 = marginY(multiply(resolveResponsiveProp2(marginY2))); var marginTop$1 = marginTop(multiply(resolveResponsiveProp2(marginTop2))); var marginBottom$1 = marginBottom(multiply(resolveResponsiveProp2(marginBottom2))); var marginLeft$1 = marginLeft(multiply(resolveResponsiveProp2(marginLeft2))); var marginRight$1 = marginRight(multiply(resolveResponsiveProp2(marginRight2))); var marginEnd$1 = marginEnd(multiply(resolveResponsiveProp2(marginEnd2))); var marginStart$1 = marginStart(multiply(resolveResponsiveProp2(marginStart2))); var alignX$1 = resolveResponsiveProp2(alignX); var alignY$1 = resolveResponsiveProp2(alignY); var alignSelf$1 = resolveResponsiveProp2(alignSelf); var direction$1 = resolveResponsiveProp2(direction); var wrap$1 = resolveResponsiveProp2(wrap); var flex$1 = resolveResponsiveProp2(flex); var direction$2 = getWithDefault(direction$1, "column"); var match2 = direction$2 === "column-reverse" || direction$2 === "column" ? [ resolveAlignItems(alignX$1), resolveJustifyContent(alignY$1) ] : [ resolveJustifyContent(alignX$1), resolveAlignItems(alignY$1) ]; return [ padding$1, paddingX$1, paddingY$1, paddingTop$1, paddingBottom$1, paddingLeft$1, paddingRight$1, paddingEnd$1, paddingStart$1, margin$1, marginX$1, marginY$1, marginTop$1, marginBottom$1, marginLeft$1, marginRight$1, marginEnd$1, marginStart$1, match2[0], match2[1], resolveDirection(direction$1), resolveWrap(wrap$1), resolveFlexBasis(flex$1), resolveAlignSelf(alignSelf$1), debugStyle, style ]; }, deps); var tmp = { ref: viewRef, style: style$1, children: getWithDefault(children, null), accessibilityActions: Props.accessibilityActions, accessibilityElementsHidden: Props.accessibilityElementsHidden, accessibilityHint: Props.accessibilityHint, accessibilityIgnoresInvertColors: Props.accessibilityIgnoresInvertColors, accessibilityLabel: Props.accessibilityLabel, accessibilityLiveRegion: Props.accessibilityLiveRegion, accessibilityRole: Props.accessibilityRole, accessibilityState: Props.accessibilityState, accessibilityValue: Props.accessibilityValue, accessibilityViewIsModal: Props.accessibilityViewIsModal, accessible: Props.accessible, collapsable: Props.collapsable, hitSlop: Props.hitSlop, importantForAccessibility: Props.importantForAccessibility, nativeID: Props.nativeID, needsOffscreenAlphaCompositing: Props.needsOffscreenAlphaCompositing, onAccessibilityEscape: Props.onAccessibilityEscape, onAccessibilityTap: Props.onAccessibilityTap, onLayout: Props.onLayout, onMagicTap: Props.onMagicTap, onMoveShouldSetResponder: Props.onMoveShouldSetResponder, onMoveShouldSetResponderCapture: Props.onMoveShouldSetResponderCapture, onResponderEnd: Props.onResponderEnd, onResponderGrant: Props.onResponderGrant, onResponderMove: Props.onResponderMove, onResponderReject: Props.onResponderReject, onResponderRelease: Props.onResponderRelease, onResponderStart: Props.onResponderStart, onResponderTerminate: Props.onResponderTerminate, onResponderTerminationRequest: Props.onResponderTerminationRequest, onStartShouldSetResponder: Props.onStartShouldSetResponder, onStartShouldSetResponderCapture: Props.onStartShouldSetResponderCapture, pointerEvents: Props.pointerEvents, removeClippedSubviews: Props.removeClippedSubviews, renderToHardwareTextureAndroid: Props.renderToHardwareTextureAndroid, shouldRasterizeIOS: Props.shouldRasterizeIOS, testID: Props.testID, onMouseDown: Props.onMouseDown, onMouseEnter: Props.onMouseEnter, onMouseLeave: Props.onMouseLeave, onMouseMove: Props.onMouseMove, onMouseOver: Props.onMouseOver, onMouseOut: Props.onMouseOut, onMouseUp: Props.onMouseUp }; return React4.createElement(Props.as || ReactNative5.View, tmp); } var make3 = Stacks_component_Box; // src/Stacks_component_Stack.bs.js var React5 = __toESM(moduleReact); function Stacks_component_Stack(Props) { var space = Props.space; var align = Props.align; var horizontal = Props.horizontal; var divider = Props.divider; var margin2 = Props.margin; var marginTop2 = Props.marginTop; var marginLeft2 = Props.marginLeft; var style = Props.style; var children = Props.children; var resolveResponsiveProp2 = useResponsiveProp(void 0); var horizontal$1 = resolveResponsiveProp2(horizontal); var direction = mapWithDefaultU(horizontal$1, "column", function(value) { if (value) { return "row"; } else { return "column"; } }); var isVertical = direction === "column"; var width = isVertical ? some(styles.fullWidth) : void 0; var alignY = isVertical ? void 0 : align; var alignX = isVertical ? align : void 0; var style$1 = [ width, style ]; var xs = React5.Children.toArray(children); var children$1 = mapWithDefaultU(divider, xs, function(divider2) { return intersperse(xs, divider2); }); var tmp = { direction: [direction], style: style$1, children: React5.Children.map(children$1, function(child, index) { var marginTop3 = isVertical && index !== 0 ? space : void 0; var marginLeft3 = isVertical || index === 0 ? void 0 : space; var tmp2 = { flex: ["content"], children: child, marginTop: marginTop3, marginLeft: marginLeft3, alignX, alignY }; return React5.createElement(make3, tmp2); }), padding: Props.padding, paddingX: Props.paddingX, paddingY: Props.paddingY, paddingTop: Props.paddingTop, paddingBottom: Props.paddingBottom, paddingLeft: Props.paddingLeft, paddingRight: Props.paddingRight, paddingEnd: Props.paddingEnd, paddingStart: Props.paddingStart, margin: Props.margin, marginX: Props.marginX, marginY: Props.marginY, marginTop: Props.marginTop, marginBottom: Props.marginBottom, marginLeft: Props.marginLeft, marginRight: Props.marginRight, marginEnd: Props.marginEnd, marginStart: Props.marginStart, accessibilityActions: Props.accessibilityActions, accessibilityElementsHidden: Props.accessibilityElementsHidden, accessibilityHint: Props.accessibilityHint, accessibilityIgnoresInvertColors: Props.accessibilityIgnoresInvertColors, accessibilityLabel: Props.accessibilityLabel, accessibilityLiveRegion: Props.accessibilityLiveRegion, accessibilityRole: Props.accessibilityRole, accessibilityState: Props.accessibilityState, accessibilityValue: Props.accessibilityValue, accessibilityViewIsModal: Props.accessibilityViewIsModal, accessible: Props.accessible, collapsable: Props.collapsable, hitSlop: Props.hitSlop, importantForAccessibility: Props.importantForAccessibility, nativeID: Props.nativeID, needsOffscreenAlphaCompositing: Props.needsOffscreenAlphaCompositing, onAccessibilityEscape: Props.onAccessibilityEscape, onAccessibilityTap: Props.onAccessibilityTap, onLayout: Props.onLayout, onMagicTap: Props.onMagicTap, onMoveShouldSetResponder: Props.onMoveShouldSetResponder, onMoveShouldSetResponderCapture: Props.onMoveShouldSetResponderCapture, onResponderEnd: Props.onResponderEnd, onResponderGrant: Props.onResponderGrant, onResponderMove: Props.onResponderMove, onResponderReject: Props.onResponderReject, onResponderRelease: Props.onResponderRelease, onResponderStart: Props.onResponderStart, onResponderTerminate: Props.onResponderTerminate, onResponderTerminationRequest: Props.onResponderTerminationRequest, onStartShouldSetResponder: Props.onStartShouldSetResponder, onStartShouldSetResponderCapture: Props.onStartShouldSetResponderCapture, pointerEvents: Props.pointerEvents, removeClippedSubviews: Props.removeClippedSubviews, renderToHardwareTextureAndroid: Props.renderToHardwareTextureAndroid, shouldRasterizeIOS: Props.shouldRasterizeIOS, testID: Props.testID, viewRef: Props.viewRef, onMouseDown: Props.onMouseDown, onMouseEnter: Props.onMouseEnter, onMouseLeave: Props.onMouseLeave, onMouseMove: Props.onMouseMove, onMouseOver: Props.onMouseOver, onMouseOut: Props.onMouseOut, onMouseUp: Props.onMouseUp }; return React5.createElement(make3, tmp); } var make4 = Stacks_component_Stack; // src/Stacks_component_Columns.bs.js var React7 = __toESM(moduleReact); // src/Stacks_component_Column.bs.js var React6 = __toESM(moduleReact); function Stacks_component_Column(Props) { var width = Props.width; var style = Props.style; var children = Props.children; var match = ColumnsContext.useColumns(void 0); var space = match.space; var isCollapsed = match.isCollapsed; var boxPaddingLeft = isCollapsed ? void 0 : space; var marginTop2 = isCollapsed ? space : void 0; var flex = isCollapsed ? void 0 : isSome(width) ? width : match.width; var height = isCollapsed ? ["content"] : match.height; var tmp = { children, padding: Props.padding, paddingX: Props.paddingX, paddingY: Props.paddingY, paddingTop: Props.paddingTop, paddingBottom: Props.paddingBottom, paddingLeft: Props.paddingLeft, paddingRight: Props.paddingRight, paddingEnd: Props.paddingEnd, paddingStart: Props.paddingStart, flex: height, accessibilityActions: Props.accessibilityActions, accessibilityElementsHidden: Props.accessibilityElementsHidden, accessibilityHint: Props.accessibilityHint, accessibilityIgnoresInvertColors: Props.accessibilityIgnoresInvertColors, accessibilityLabel: Props.accessibilityLabel, accessibilityLiveRegion: Props.accessibilityLiveRegion, accessibilityRole: Props.accessibilityRole, accessibilityState: Props.accessibilityState, accessibilityValue: Props.accessibilityValue, accessibilityViewIsModal: Props.accessibilityViewIsModal, accessible: Props.accessible, collapsable: Props.collapsable, hitSlop: Props.hitSlop, importantForAccessibility: Props.importantForAccessibility, nativeID: Props.nativeID, needsOffscreenAlphaCompositing: Props.needsOffscreenAlphaCompositing, onAccessibilityEscape: Props.onAccessibilityEscape, onAccessibilityTap: Props.onAccessibilityTap, onLayout: Props.onLayout, onMagicTap: Props.onMagicTap, onMoveShouldSetResponder: Props.onMoveShouldSetResponder, onMoveShouldSetResponderCapture: Props.onMoveShouldSetResponderCapture, onResponderEnd: Props.onResponderEnd, onResponderGrant: Props.onResponderGrant, onResponderMove: Props.onResponderMove, onResponderReject: Props.onResponderReject, onResponderRelease: Props.onResponderRelease, onResponderStart: Props.onResponderStart, onResponderTerminate: Props.onResponderTerminate, onResponderTerminationRequest: Props.onResponderTerminationRequest, onStartShouldSetResponder: Props.onStartShouldSetResponder, onStartShouldSetResponderCapture: Props.onStartShouldSetResponderCapture, pointerEvents: Props.pointerEvents, removeClippedSubviews: Props.removeClippedSubviews, renderToHardwareTextureAndroid: Props.renderToHardwareTextureAndroid, shouldRasterizeIOS: Props.shouldRasterizeIOS, style: Props.style, testID: Props.testID, viewRef: Props.viewRef, onMouseDown: Props.onMouseDown, onMouseEnter: Props.onMouseEnter, onMouseLeave: Props.onMouseLeave, onMouseMove: Props.onMouseMove, onMouseOver: Props.onMouseOver, onMouseOut: Props.onMouseOut, onMouseUp: Props.onMouseUp }; if (match.alignY !== void 0) { tmp.alignY = valFromOption(match.alignY); } var tmp$1 = { style: [isCollapsed ? some(styles.fullWidth) : void 0], children: React6.createElement(make3, tmp), paddingLeft: boxPaddingLeft, marginTop: marginTop2, flex }; return React6.createElement(make3, tmp$1); } markAsColumn2(Stacks_component_Column); var make5 = Stacks_component_Column; // src/Stacks_component_Columns.bs.js function Stacks_component_Columns(Props) { var space = Props.space; var heightOpt = Props.height; var reverse = Props.reverse; var alignX = Props.alignX; var alignY = Props.alignY; var collapseBelow = Props.collapseBelow; var defaultWidthOpt = Props.defaultWidth; var style = Props.style; var children = Props.children; var height = heightOpt !== void 0 ? heightOpt : ["content"]; var defaultWidth = defaultWidthOpt !== void 0 ? defaultWidthOpt : ["fluid"]; var match = useStacks(void 0); var currentBreakpoint = useCurrentBreakpoint(void 0); var match$1 = resolveCollapsibleProps(collapseBelow, reverse, currentBreakpoint, match.breakpoints); var isCollapsed = match$1.isCollapsed; var alignX$1 = isCollapsed ? void 0 : alignX; var boxMarginTop = isCollapsed ? negateSpace2(space) : void 0; var boxMarginLeft = isCollapsed ? void 0 : negateSpace2(space); var style$1 = [ some(styles.fullWidth), style ]; var config = React7.useMemo(function() { return { isCollapsed, space, alignY, height, width: defaultWidth }; }, [ isCollapsed, space, alignY, height, defaultWidth ]); var tmp = { direction: [match$1.direction], flex: height, children: React7.Children.map(children, function(child) { if (React7.isValidElement(child)) { if (isColumnComponent2(child)) { return child; } else { return React7.createElement(make5, { children: child }); } } else { return null; } }), marginTop: boxMarginTop, marginLeft: boxMarginLeft, alignX: alignX$1, alignY: Props.alignY }; var tmp$1 = { flex: height, style: style$1, children: React7.createElement(make3, tmp), padding: Props.padding, paddingX: Props.paddingX, paddingY: Props.paddingY, paddingTop: Props.paddingTop, paddingBottom: Props.paddingBottom, paddingLeft: Props.paddingLeft, paddingRight: Props.paddingRight, paddingEnd: Props.paddingEnd, paddingStart: Props.paddingStart, margin: Props.margin, marginX: Props.marginX, marginY: Props.marginY, marginTop: Props.marginTop, marginBottom: Props.marginBottom, marginLeft: Props.marginLeft, marginRight: Props.marginRight, marginEnd: Props.marginEnd, marginStart: Props.marginStart, alignY: Props.alignY, accessibilityActions: Props.accessibilityActions, accessibilityElementsHidden: Props.accessibilityElementsHidden, accessibilityHint: Props.accessibilityHint, accessibilityIgnoresInvertColors: Props.accessibilityIgnoresInvertColors, accessibilityLabel: Props.accessibilityLabel, accessibilityLiveRegion: Props.accessibilityLiveRegion, accessibilityRole: Props.accessibilityRole, accessibilityState: Props.accessibilityState, accessibilityValue: Props.accessibilityValue, accessibilityViewIsModal: Props.accessibilityViewIsModal, accessible: Props.accessible, collapsable: Props.collapsable, hitSlop: Props.hitSlop, importantForAccessibility: Props.importantForAccessibility, nativeID: Props.nativeID, needsOffscreenAlphaCompositing: Props.needsOffscreenAlphaCompositing, onAccessibilityEscape: Props.onAccessibilityEscape, onAccessibilityTap: Props.onAccessibilityTap, onLayout: Props.onLayout, onMagicTap: Props.onMagicTap, onMoveShouldSetResponder: Props.onMoveShouldSetResponder, onMoveShouldSetResponderCapture: Props.onMoveShouldSetResponderCapture, onResponderEnd: Props.onResponderEnd, onResponderGrant: Props.onResponderGrant, onResponderMove: Props.onResponderMove, onResponderReject: Props.onResponderReject, onResponderRelease: Props.onResponderRelease, onResponderStart: Props.onResponderStart, onResponderTerminate: Props.onResponderTerminate, onResponderTerminationRequest: Props.onResponderTerminationRequest, onStartShouldSetResponder: Props.onStartShouldSetResponder, onStartShouldSetResponderCapture: Props.onStartShouldSetResponderCapture, pointerEvents: Props.pointerEvents, removeClippedSubviews: Props.removeClippedSubviews, renderToHardwareTextureAndroid: Props.renderToHardwareTextureAndroid, shouldRasterizeIOS: Props.shouldRasterizeIOS, testID: Props.testID, viewRef: Props.viewRef, onMouseDown: Props.onMouseDown, onMouseEnter: Props.onMouseEnter, onMouseLeave: Props.onMouseLeave, onMouseMove: Props.onMouseMove, onMouseOver: Props.onMouseOver, onMouseOut: Props.onMouseOut, onMouseUp: Props.onMouseUp }; return React7.createElement(ColumnsContext.Provider.make, ColumnsContext.Provider.makeProps(config, React7.createElement(make3, tmp$1), void 0)); } var make6 = Stacks_component_Columns; // src/Stacks_component_Rows.bs.js var React9 = __toESM(moduleReact); // src/Stacks_component_Row.bs.js var React8 = __toESM(moduleReact); function Stacks_component_Row(Props) { var widthOpt = Props.width; var height = Props.height; var children = Props.children; var width = widthOpt !== void 0 ? widthOpt : ["fluid"]; var match = RowsContext.useRows(void 0); var height$1 = isSome(height) ? height : match.defaultHeight; var tmp = { flex: width, children, padding: Props.padding, paddingX: Props.paddingX, paddingY: Props.paddingY, paddingTop: Props.paddingTop, paddingBottom: Props.paddingBottom, paddingLeft: Props.paddingLeft, paddingRight: Props.paddingRight, paddingEnd: Props.paddingEnd, paddingStart: Props.paddingStart, accessibilityActions: Props.accessibilityActions, accessibilityElementsHidden: Props.accessibilityElementsHidden, accessibilityHint: Props.accessibilityHint, accessibilityIgnoresInvertColors: Props.accessibilityIgnoresInvertColors, accessibilityLabel: Props.accessibilityLabel, accessibilityLiveRegion: Props.accessibilityLiveRegion, accessibilityRole: Props.accessibilityRole, accessibilityState: Props.accessibilityState, accessibilityValue: Props.accessibilityValue, accessibilityViewIsModal: Props.accessibilityViewIsModal, accessible: Props.accessible, collapsable: Props.collapsable, hitSlop: Props.hitSlop, importantForAccessibility: Props.importantForAccessibility, nativeID: Props.nativeID, needsOffscreenAlphaCompositing: Props.needsOffscreenAlphaCompositing, onAccessibilityEscape: Props.onAccessibilityEscape, onAccessibilityTap: Props.onAccessibilityTap, onLayout: Props.onLayout, onMagicTap: Props.onMagicTap, onMoveShouldSetResponder: Props.onMoveShouldSetResponder, onMoveShouldSetResponderCapture: Props.onMoveShouldSetResponderCapture, onResponderEnd: Props.onResponderEnd, onResponderGrant: Props.onResponderGrant, onResponderMove: Props.onResponderMove, onResponderReject: Props.onResponderReject, onResponderRelease: Props.onResponderRelease, onResponderStart: Props.onResponderStart, onResponderTerminate: Props.onResponderTerminate, onResponderTerminationRequest: Props.onResponderTerminationRequest, onStartShouldSetResponder: Props.onStartShouldSetResponder, onStartShouldSetResponderCapture: Props.onStartShouldSetResponderCapture, pointerEvents: Props.pointerEvents, removeClippedSubviews: Props.removeClippedSubviews, renderToHardwareTextureAndroid: Props.renderToHardwareTextureAndroid, shouldRasterizeIOS: Props.shouldRasterizeIOS, style: Props.style, testID: Props.testID, viewRef: Props.viewRef, onMouseDown: Props.onMouseDown, onMouseEnter: Props.onMouseEnter, onMouseLeave: Props.onMouseLeave, onMouseMove: Props.onMouseMove, onMouseOver: Props.onMouseOver, onMouseOut: Props.onMouseOut, onMouseUp: Props.onMouseUp }; var tmp$1 = { direction: ["row"], children: React8.createElement(make3, tmp), flex: height$1 }; if (match.space !== void 0) { tmp$1.paddingTop = valFromOption(match.space); } return React8.createElement(make3, tmp$1); } markAsRow2(Stacks_component_Row); var make7 = Stacks_component_Row; // src/Stacks_component_Rows.bs.js function Stacks_component_Rows(Props) { var space = Props.space; var reverse = Props.reverse; var defaultHeightOpt = Props.defaultHeight; var children = Props.children; var defaultHeight = defaultHeightOpt !== void 0 ? defaultHeightOpt : ["fluid"]; var direction = mapWithDefaultU(reverse, "column", function(reverse2) { if (reverse2) { return "column-reverse"; } else { return "column"; } }); var negativeSpace = negateSpace2(space); var config = React9.useMemo(function() { return { space, defaultHeight }; }, [ space, defaultHeight ]