@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
422 lines (420 loc) • 19.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
exports.__esModule = true;
exports.verticalTokens = exports.horizontalTokens = exports.gapTokens = exports.default = exports.SPACING = void 0;
var _clsx = _interopRequireDefault(require("clsx"));
var _consts = require("../../utils/mediaQuery/consts");
let SPACING = /*#__PURE__*/function (SPACING) {
SPACING["none"] = "none";
SPACING["XXXSmall"] = "XXXSmall";
SPACING["XXSmall"] = "XXSmall";
SPACING["XSmall"] = "XSmall";
SPACING["small"] = "small";
SPACING["medium"] = "medium";
SPACING["large"] = "large";
SPACING["XLarge"] = "XLarge";
SPACING["XXLarge"] = "XXLarge";
SPACING["XXXLarge"] = "XXXLarge";
SPACING["reverse"] = "reverse";
return SPACING;
}({});
exports.SPACING = SPACING;
const horizontalTokens = {
[]: "space-x-none",
[]: "space-x-xxxs",
[]: "space-x-xxs",
[]: "space-x-xs",
[]: "space-x-sm",
[]: "space-x-md",
[]: "space-x-lg",
[]: "space-x-xl",
[]: "space-x-xxl",
[]: "space-x-xxxl",
[]: "space-x-reverse",
[]: {
[]: "mm:space-x-none",
[]: "mm:space-x-xxxs",
[]: "mm:space-x-xxs",
[]: "mm:space-x-xs",
[]: "mm:space-x-sm",
[]: "mm:space-x-md",
[]: "mm:space-x-lg",
[]: "mm:space-x-xl",
[]: "mm:space-x-xxl",
[]: "mm:space-x-xxxl",
[]: "mm:space-x-reverse"
},
[]: {
[]: "lm:space-x-none",
[]: "lm:space-x-xxxs",
[]: "lm:space-x-xxs",
[]: "lm:space-x-xs",
[]: "lm:space-x-sm",
[]: "lm:space-x-md",
[]: "lm:space-x-lg",
[]: "lm:space-x-xl",
[]: "lm:space-x-xxl",
[]: "lm:space-x-xxxl",
[]: "lm:space-x-reverse"
},
[]: {
[]: "tb:space-x-none",
[]: "tb:space-x-xxxs",
[]: "tb:space-x-xxs",
[]: "tb:space-x-xs",
[]: "tb:space-x-sm",
[]: "tb:space-x-md",
[]: "tb:space-x-lg",
[]: "tb:space-x-xl",
[]: "tb:space-x-xxl",
[]: "tb:space-x-xxxl",
[]: "tb:space-x-reverse"
},
[]: {
[]: "de:space-x-none",
[]: "de:space-x-xxxs",
[]: "de:space-x-xxs",
[]: "de:space-x-xs",
[]: "de:space-x-sm",
[]: "de:space-x-md",
[]: "de:space-x-lg",
[]: "de:space-x-xl",
[]: "de:space-x-xxl",
[]: "de:space-x-xxxl",
[]: "de:space-x-reverse"
},
[]: {
[]: "ld:space-x-none",
[]: "ld:space-x-xxxs",
[]: "ld:space-x-xxs",
[]: "ld:space-x-xs",
[]: "ld:space-x-sm",
[]: "ld:space-x-md",
[]: "ld:space-x-lg",
[]: "ld:space-x-xl",
[]: "ld:space-x-xxl",
[]: "ld:space-x-xxxl",
[]: "ld:space-x-reverse"
}
};
exports.horizontalTokens = horizontalTokens;
const verticalTokens = {
[]: "space-y-none",
[]: "space-y-xxxs",
[]: "space-y-xxs",
[]: "space-y-xs",
[]: "space-y-sm",
[]: "space-y-md",
[]: "space-y-lg",
[]: "space-y-xl",
[]: "space-y-xxl",
[]: "space-y-xxxl",
[]: "space-y-reverse",
[]: {
[]: "mm:space-y-none",
[]: "mm:space-y-xxxs",
[]: "mm:space-y-xxs",
[]: "mm:space-y-xs",
[]: "mm:space-y-sm",
[]: "mm:space-y-md",
[]: "mm:space-y-lg",
[]: "mm:space-y-xl",
[]: "mm:space-y-xxl",
[]: "mm:space-y-xxxl",
[]: "mm:space-y-reverse"
},
largeMobile: {
[]: "lm:space-y-none",
[]: "lm:space-y-xxxs",
[]: "lm:space-y-xxs",
[]: "lm:space-y-xs",
[]: "lm:space-y-sm",
[]: "lm:space-y-md",
[]: "lm:space-y-lg",
[]: "lm:space-y-xl",
[]: "lm:space-y-xxl",
[]: "lm:space-y-xxxl",
[]: "lm:space-y-reverse"
},
tablet: {
[]: "tb:space-y-none",
[]: "tb:space-y-xxxs",
[]: "tb:space-y-xxs",
[]: "tb:space-y-xs",
[]: "tb:space-y-sm",
[]: "tb:space-y-md",
[]: "tb:space-y-lg",
[]: "tb:space-y-xl",
[]: "tb:space-y-xxl",
[]: "tb:space-y-xxxl",
[]: "tb:space-y-reverse"
},
[]: {
[]: "de:space-y-none",
[]: "de:space-y-xxxs",
[]: "de:space-y-xxs",
[]: "de:space-y-xs",
[]: "de:space-y-sm",
[]: "de:space-y-md",
[]: "de:space-y-lg",
[]: "de:space-y-xl",
[]: "de:space-y-xxl",
[]: "de:space-y-xxxl",
[]: "de:space-y-reverse"
},
[]: {
[]: "ld:space-y-none",
[]: "ld:space-y-xxxs",
[]: "ld:space-y-xxs",
[]: "ld:space-y-xs",
[]: "ld:space-y-sm",
[]: "ld:space-y-md",
[]: "ld:space-y-lg",
[]: "ld:space-y-xl",
[]: "ld:space-y-xxl",
[]: "ld:space-y-xxxl",
[]: "ld:space-y-reverse"
}
};
exports.verticalTokens = verticalTokens;
const gapTokens = {
[]: "gap-none",
[]: "gap-xxxs",
[]: "gap-xxs",
[]: "gap-xs",
[]: "gap-sm",
[]: "gap-md",
[]: "gap-lg",
[]: "gap-xl",
[]: "gap-xxl",
[]: "gap-xxxl",
[]: {
[]: "mm:gap-none",
[]: "mm:gap-xxxs",
[]: "mm:gap-xxs",
[]: "mm:gap-xs",
[]: "mm:gap-sm",
[]: "mm:gap-md",
[]: "mm:gap-lg",
[]: "mm:gap-xl",
[]: "mm:gap-xxl",
[]: "mm:gap-xxxl"
},
largeMobile: {
[]: "lm:gap-none",
[]: "lm:gap-xxxs",
[]: "lm:gap-xxs",
[]: "lm:gap-xs",
[]: "lm:gap-sm",
[]: "lm:gap-md",
[]: "lm:gap-lg",
[]: "lm:gap-xl",
[]: "lm:gap-xxl",
[]: "lm:gap-xxxl"
},
tablet: {
[]: "tb:gap-none",
[]: "tb:gap-xxxs",
[]: "tb:gap-xxs",
[]: "tb:gap-xs",
[]: "tb:gap-sm",
[]: "tb:gap-md",
[]: "tb:gap-lg",
[]: "tb:gap-xl",
[]: "tb:gap-xxl",
[]: "tb:gap-xxxl"
},
[]: {
[]: "de:gap-none",
[]: "de:gap-xxxs",
[]: "de:gap-xxs",
[]: "de:gap-xs",
[]: "de:gap-sm",
[]: "de:gap-md",
[]: "de:gap-lg",
[]: "de:gap-xl",
[]: "de:gap-xxl",
[]: "de:gap-xxxl"
},
[]: {
[]: "ld:gap-none",
[]: "ld:gap-xxxs",
[]: "ld:gap-xxs",
[]: "ld:gap-xs",
[]: "ld:gap-sm",
[]: "ld:gap-md",
[]: "ld:gap-lg",
[]: "ld:gap-xl",
[]: "ld:gap-xxl",
[]: "ld:gap-xxxl"
}
};
exports.gapTokens = gapTokens;
const safariVerticalTokens = {
[]: "safari:[&>*:not(:last-child)]:space-y-none",
[]: "safari:[&>*:not(:last-child)]:space-y-xxxs",
[]: "safari:[&>*:not(:last-child)]:space-y-xxs",
[]: "safari:[&>*:not(:last-child)]:space-y-xs",
[]: "safari:[&>*:not(:last-child)]:space-y-sm",
[]: "safari:[&>*:not(:last-child)]:space-y-md",
[]: "safari:[&>*:not(:last-child)]:space-y-lg",
[]: "safari:[&>*:not(:last-child)]:space-y-xl",
[]: "safari:[&>*:not(:last-child)]:space-y-xxl",
[]: "safari:[&>*:not(:last-child)]:space-y-xxxl",
[]: "safari:[&>*:not(:last-child)]:space-y-reverse",
[]: {
[]: "mm:safari:[&>*:not(:last-child)]:space-y-none",
[]: "mm:safari:[&>*:not(:last-child)]:space-y-xxxs",
[]: "mm:safari:[&>*:not(:last-child)]:space-y-xxs",
[]: "mm:safari:[&>*:not(:last-child)]:space-y-xs",
[]: "mm:safari:[&>*:not(:last-child)]:space-y-sm",
[]: "mm:safari:[&>*:not(:last-child)]:space-y-md",
[]: "mm:safari:[&>*:not(:last-child)]:space-y-lg",
[]: "mm:safari:[&>*:not(:last-child)]:space-y-xl",
[]: "mm:safari:[&>*:not(:last-child)]:space-y-xxl",
[]: "mm:safari:[&>*:not(:last-child)]:space-y-xxxl",
[]: "mm:safari:[&>*:not(:last-child)]:space-y-reverse"
},
[]: {
[]: "lm:safari:[&>*:not(:last-child)]:space-y-none",
[]: "lm:safari:[&>*:not(:last-child)]:space-y-xxxs",
[]: "lm:safari:[&>*:not(:last-child)]:space-y-xxs",
[]: "lm:safari:[&>*:not(:last-child)]:space-y-xs",
[]: "lm:safari:[&>*:not(:last-child)]:space-y-sm",
[]: "lm:safari:[&>*:not(:last-child)]:space-y-md",
[]: "lm:safari:[&>*:not(:last-child)]:space-y-lg",
[]: "lm:safari:[&>*:not(:last-child)]:space-y-xl",
[]: "lm:safari:[&>*:not(:last-child)]:space-y-xxl",
[]: "lm:safari:[&>*:not(:last-child)]:space-y-xxxl",
[]: "lm:safari:[&>*:not(:last-child)]:space-y-reverse"
},
[]: {
[]: "tb:safari:[&>*:not(:last-child)]:space-y-none",
[]: "tb:safari:[&>*:not(:last-child)]:space-y-xxxs",
[]: "tb:safari:[&>*:not(:last-child)]:space-y-xxs",
[]: "tb:safari:[&>*:not(:last-child)]:space-y-xs",
[]: "tb:safari:[&>*:not(:last-child)]:space-y-sm",
[]: "tb:safari:[&>*:not(:last-child)]:space-y-md",
[]: "tb:safari:[&>*:not(:last-child)]:space-y-lg",
[]: "tb:safari:[&>*:not(:last-child)]:space-y-xl",
[]: "tb:safari:[&>*:not(:last-child)]:space-y-xxl",
[]: "tb:safari:[&>*:not(:last-child)]:space-y-xxxl",
[]: "tb:safari:[&>*:not(:last-child)]:space-y-reverse"
},
[]: {
[]: "de:safari:[&>*:not(:last-child)]:space-y-none",
[]: "de:safari:[&>*:not(:last-child)]:space-y-xxxs",
[]: "de:safari:[&>*:not(:last-child)]:space-y-xxs",
[]: "de:safari:[&>*:not(:last-child)]:space-y-xs",
[]: "de:safari:[&>*:not(:last-child)]:space-y-sm",
[]: "de:safari:[&>*:not(:last-child)]:space-y-md",
[]: "de:safari:[&>*:not(:last-child)]:space-y-lg",
[]: "de:safari:[&>*:not(:last-child)]:space-y-xl",
[]: "de:safari:[&>*:not(:last-child)]:space-y-xxl",
[]: "de:safari:[&>*:not(:last-child)]:space-y-xxxl",
[]: "de:safari:[&>*:not(:last-child)]:space-y-reverse"
},
[]: {
[]: "ld:safari:[&>*:not(:last-child)]:space-y-none",
[]: "ld:safari:[&>*:not(:last-child)]:space-y-xxxs",
[]: "ld:safari:[&>*:not(:last-child)]:space-y-xxs",
[]: "ld:safari:[&>*:not(:last-child)]:space-y-xs",
[]: "ld:safari:[&>*:not(:last-child)]:space-y-sm",
[]: "ld:safari:[&>*:not(:last-child)]:space-y-md",
[]: "ld:safari:[&>*:not(:last-child)]:space-y-lg",
[]: "ld:safari:[&>*:not(:last-child)]:space-y-xl",
[]: "ld:safari:[&>*:not(:last-child)]:space-y-xxl",
[]: "ld:safari:[&>*:not(:last-child)]:space-y-xxxl",
[]: "ld:safari:[&>*:not(:last-child)]:space-y-reverse"
}
};
const safariHorizontalTokens = {
[]: "safari:[&>*:not(:last-child)]:space-x-none",
[]: "safari:[&>*:not(:last-child)]:space-x-xxxs",
[]: "safari:[&>*:not(:last-child)]:space-x-xxs",
[]: "safari:[&>*:not(:last-child)]:space-x-xs",
[]: "safari:[&>*:not(:last-child)]:space-x-sm",
[]: "safari:[&>*:not(:last-child)]:space-x-md",
[]: "safari:[&>*:not(:last-child)]:space-x-lg",
[]: "safari:[&>*:not(:last-child)]:space-x-xl",
[]: "safari:[&>*:not(:last-child)]:space-x-xxl",
[]: "safari:[&>*:not(:last-child)]:space-x-xxxl",
[]: "safari:[&>*:not(:last-child)]:space-x-reverse",
[]: {
[]: "mm:safari:[&>*:not(:last-child)]:space-x-none",
[]: "mm:safari:[&>*:not(:last-child)]:space-x-xxxs",
[]: "mm:safari:[&>*:not(:last-child)]:space-x-xxs",
[]: "mm:safari:[&>*:not(:last-child)]:space-x-xs",
[]: "mm:safari:[&>*:not(:last-child)]:space-x-sm",
[]: "mm:safari:[&>*:not(:last-child)]:space-x-md",
[]: "mm:safari:[&>*:not(:last-child)]:space-x-lg",
[]: "mm:safari:[&>*:not(:last-child)]:space-x-xl",
[]: "mm:safari:[&>*:not(:last-child)]:space-x-xxl",
[]: "mm:safari:[&>*:not(:last-child)]:space-x-xxxl",
[]: "mm:safari:[&>*:not(:last-child)]:space-x-reverse"
},
[]: {
[]: "lm:safari:[&>*:not(:last-child)]:space-x-none",
[]: "lm:safari:[&>*:not(:last-child)]:space-x-xxxs",
[]: "lm:safari:[&>*:not(:last-child)]:space-x-xxs",
[]: "lm:safari:[&>*:not(:last-child)]:space-x-xs",
[]: "lm:safari:[&>*:not(:last-child)]:space-x-sm",
[]: "lm:safari:[&>*:not(:last-child)]:space-x-md",
[]: "lm:safari:[&>*:not(:last-child)]:space-x-lg",
[]: "lm:safari:[&>*:not(:last-child)]:space-x-xl",
[]: "lm:safari:[&>*:not(:last-child)]:space-x-xxl",
[]: "lm:safari:[&>*:not(:last-child)]:space-x-xxxl",
[]: "lm:safari:[&>*:not(:last-child)]:space-x-reverse"
},
[]: {
[]: "tb:safari:[&>*:not(:last-child)]:space-x-none",
[]: "tb:safari:[&>*:not(:last-child)]:space-x-xxxs",
[]: "tb:safari:[&>*:not(:last-child)]:space-x-xxs",
[]: "tb:safari:[&>*:not(:last-child)]:space-x-xs",
[]: "tb:safari:[&>*:not(:last-child)]:space-x-sm",
[]: "tb:safari:[&>*:not(:last-child)]:space-x-md",
[]: "tb:safari:[&>*:not(:last-child)]:space-x-lg",
[]: "tb:safari:[&>*:not(:last-child)]:space-x-xl",
[]: "tb:safari:[&>*:not(:last-child)]:space-x-xxl",
[]: "tb:safari:[&>*:not(:last-child)]:space-x-xxxl",
[]: "tb:safari:[&>*:not(:last-child)]:space-x-reverse"
},
[]: {
[]: "de:safari:[&>*:not(:last-child)]:space-x-none",
[]: "de:safari:[&>*:not(:last-child)]:space-x-xxxs",
[]: "de:safari:[&>*:not(:last-child)]:space-x-xxs",
[]: "de:safari:[&>*:not(:last-child)]:space-x-xs",
[]: "de:safari:[&>*:not(:last-child)]:space-x-sm",
[]: "de:safari:[&>*:not(:last-child)]:space-x-md",
[]: "de:safari:[&>*:not(:last-child)]:space-x-lg",
[]: "de:safari:[&>*:not(:last-child)]:space-x-xl",
[]: "de:safari:[&>*:not(:last-child)]:space-x-xxl",
[]: "de:safari:[&>*:not(:last-child)]:space-x-xxxl",
[]: "de:safari:[&>*:not(:last-child)]:space-x-reverse"
},
[]: {
[]: "ld:safari:[&>*:not(:last-child)]:space-x-none",
[]: "ld:safari:[&>*:not(:last-child)]:space-x-xxxs",
[]: "ld:safari:[&>*:not(:last-child)]:space-x-xxs",
[]: "ld:safari:[&>*:not(:last-child)]:space-x-xs",
[]: "ld:safari:[&>*:not(:last-child)]:space-x-sm",
[]: "ld:safari:[&>*:not(:last-child)]:space-x-md",
[]: "ld:safari:[&>*:not(:last-child)]:space-x-lg",
[]: "ld:safari:[&>*:not(:last-child)]:space-x-xl",
[]: "ld:safari:[&>*:not(:last-child)]:space-x-xxl",
[]: "ld:safari:[&>*:not(:last-child)]:space-x-xxxl",
[]: "ld:safari:[&>*:not(:last-child)]:space-x-reverse"
}
};
const getSpacingClasses = (spacing, viewport, direction = "row", legacy = false) => {
if (legacy) {
const horizontalRoot = viewport ? horizontalTokens[viewport] : horizontalTokens;
const verticalRoot = viewport ? verticalTokens[viewport] : verticalTokens;
const tokens = (0, _clsx.default)((direction === "row" || direction === "row-reverse") && [horizontalRoot[spacing], verticalRoot.none, "rtl:space-x-reverse"], direction === "row-reverse" && horizontalRoot.reverse, (direction === "column" || direction === "column-reverse") && [verticalRoot[spacing], horizontalRoot.none], direction === "column-reverse" && verticalRoot.reverse);
return tokens;
}
// TODO: refactor after iOS Safari 14.1 support drop
return viewport ? (0, _clsx.default)(gapTokens[viewport][spacing], safariHorizontalTokens[viewport][spacing], direction === "column" && safariVerticalTokens[viewport][spacing]) : (0, _clsx.default)(gapTokens[spacing], safariHorizontalTokens[spacing], direction === "column" && safariVerticalTokens[spacing]);
};
var _default = getSpacingClasses;
exports.default = _default;