@teamsparta/stack-flex
Version:
stack flex
838 lines (827 loc) • 24.6 kB
JavaScript
"use client";
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __objRest = (source, exclude) => {
var target = {};
for (var prop in source)
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
target[prop] = source[prop];
if (source != null && __getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(source)) {
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
target[prop] = source[prop];
}
return target;
};
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(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/index.ts
var src_exports = {};
__export(src_exports, {
Flex: () => Flex,
FlexV2: () => FlexV2
});
module.exports = __toCommonJS(src_exports);
// src/v1/Flex.tsx
var import_stack_core = require("@teamsparta/stack-core");
var import_react = require("react");
// src/v1/Flex.style.ts
var import_styled = __toESM(require("@emotion/styled"));
var justifyContentMap = {
start: "flex-start",
end: "flex-end",
center: "center",
between: "space-between",
around: "space-around",
evenly: "space-evenly",
normal: "normal"
};
var alignItemsMap = {
start: "flex-start",
end: "flex-end",
center: "center",
baseline: "baseline",
stretch: "stretch",
normal: "normal"
};
var FlexBase = import_styled.default.div`
display: flex;
${({ $direction: direction }) => {
if (!direction)
return;
return direction.map(({ breakpoint, value }) => {
if (breakpoint === 0)
return `flex-direction: ${value};`;
return `
@media screen and (min-width: ${breakpoint}px) {
flex-direction: ${value};
}
`;
});
}};
${({ $wrap: wrap }) => {
if (!wrap)
return;
return wrap.map(({ breakpoint, value }) => {
if (breakpoint === 0)
return `flex-wrap: ${value};`;
return `
@media screen and (min-width: ${breakpoint}px) {
flex-wrap: ${value};
}
`;
});
}};
${({ $justify: justify }) => {
if (!justify)
return;
return justify.map(({ breakpoint, value }) => {
if (breakpoint === 0)
return `justify-content: ${justifyContentMap[value]};`;
return `
@media screen and (min-width: ${breakpoint}px) {
justify-content: ${justifyContentMap[value]};
}
`;
});
}};
${({ $align: align }) => {
if (!align)
return;
return align.map(({ breakpoint, value }) => {
if (breakpoint === 0)
return `align-items: ${alignItemsMap[value]};`;
return `
@media screen and (min-width: ${breakpoint}px) {
align-items: ${alignItemsMap[value]};
}
`;
});
}};
${({ $gap: gap }) => {
if (!gap)
return;
return gap.map(({ breakpoint, value }) => {
if (breakpoint === 0)
return `gap: ${typeof value === "number" ? `${value}px` : value};`;
return `
@media screen and (min-width: ${breakpoint}px) {
gap: ${typeof value === "number" ? `${value}px` : value};
}
`;
});
}};
${({ $fullHeight: fullHeight }) => {
if (!fullHeight)
return;
return fullHeight.map(({ breakpoint, value }) => {
if (breakpoint === 0)
return `height: ${value ? "100%" : "auto"};`;
return `
@media screen and (min-width: ${breakpoint}px) {
height: ${value ? "100%" : "auto"};
}
`;
});
}};
${({ $fullWidth: fullWidth }) => {
if (!fullWidth)
return;
return fullWidth.map(({ breakpoint, value }) => {
if (breakpoint === 0)
return `width: ${value ? "100%" : "auto"};`;
return `
@media screen and (min-width: ${breakpoint}px) {
width: ${value ? "100%" : "auto"};
}
`;
});
}};
${({ $padding: padding }) => {
if (!padding)
return;
return padding.map(({ breakpoint, value }) => {
if (breakpoint === 0)
return `padding: ${typeof value === "number" ? `${value}px` : value};`;
return `
@media screen and (min-width: ${breakpoint}px) {
padding: ${typeof value === "number" ? `${value}px` : value};
}
`;
});
}};
${({ $width: width }) => {
if (!width)
return;
return width.map(({ breakpoint, value }) => {
if (breakpoint === 0)
return `width: ${typeof value === "number" ? `${value}px` : value};`;
return `
@media screen and (min-width: ${breakpoint}px) {
width: ${typeof value === "number" ? `${value}px` : value};
}
`;
});
}};
${({ $height: height }) => {
if (!height)
return;
return height.map(({ breakpoint, value }) => {
if (breakpoint === 0)
return `height: ${typeof value === "number" ? `${value}px` : value};`;
return `
@media screen and (min-width: ${breakpoint}px) {
height: ${typeof value === "number" ? `${value}px` : value};
}
`;
});
}};
${({ $maxWidth: maxWidth }) => {
if (!maxWidth)
return;
return maxWidth.map(({ breakpoint, value }) => {
if (breakpoint === 0)
return `max-width: ${typeof value === "number" ? `${value}px` : value};`;
return `
@media screen and (min-width: ${breakpoint}px) {
max-width: ${typeof value === "number" ? `${value}px` : value};
}
`;
});
}};
${({ $maxHeight: maxHeight }) => {
if (!maxHeight)
return;
return maxHeight.map(({ breakpoint, value }) => {
if (breakpoint === 0)
return `max-height: ${typeof value === "number" ? `${value}px` : value};`;
return `
@media screen and (min-width: ${breakpoint}px) {
max-height: ${typeof value === "number" ? `${value}px` : value};
}
`;
});
}};
${({ $borderRadius: borderRadius }) => {
if (!borderRadius)
return;
return borderRadius.map(({ breakpoint, value }) => {
if (breakpoint === 0)
return `border-radius: ${typeof value === "number" ? `${value}px` : value};`;
return `
@media screen and (min-width: ${breakpoint}px) {
border-radius: ${typeof value === "number" ? `${value}px` : value};
}
`;
});
}};
${({ $background: background }) => {
if (!background)
return;
return background.map(({ breakpoint, value }) => {
if (breakpoint === 0)
return `background: ${value};`;
return `
@media screen and (min-width: ${breakpoint}px) {
background: ${value};
}
`;
});
}};
${({ $position: position }) => {
if (!position)
return;
return position.map(({ breakpoint, value }) => {
if (breakpoint === 0)
return `position: ${value};`;
return `
@media screen and (min-width: ${breakpoint}px) {
position: ${value};
}
`;
});
}};
${({ $flex: flex }) => {
if (!flex)
return;
return flex.map(({ breakpoint, value }) => {
if (breakpoint === 0)
return `flex: ${value};`;
return `
@media screen and (min-width: ${breakpoint}px) {
flex: ${value};
}
`;
});
}};
${({ $border: border }) => {
if (!border)
return;
return border.map(({ breakpoint, value }) => {
if (breakpoint === 0)
return `border: ${value};`;
return `
@media screen and (min-width: ${breakpoint}px) {
border: ${value};
}
`;
});
}};
`;
// src/v1/Flex.tsx
var import_jsx_runtime = require("@emotion/react/jsx-runtime");
var FlexImpl = (0, import_react.forwardRef)(function FlexBase2(_a, ref) {
var _b = _a, {
as,
direction,
align = "start",
justify = "start",
wrap,
gap,
fullHeight,
fullWidth,
padding,
width,
height,
maxWidth,
maxHeight,
borderRadius,
background,
position,
flex,
border
} = _b, restProps = __objRest(_b, [
"as",
"direction",
"align",
"justify",
"wrap",
"gap",
"fullHeight",
"fullWidth",
"padding",
"width",
"height",
"maxWidth",
"maxHeight",
"borderRadius",
"background",
"position",
"flex",
"border"
]);
const breakpoints = (0, import_stack_core.useBreakpointContext)("Flex");
const directions = direction ? (0, import_stack_core.mapResponsive)(breakpoints, direction, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const aligns = align ? (0, import_stack_core.mapResponsive)(breakpoints, align, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const justifies = justify ? (0, import_stack_core.mapResponsive)(breakpoints, justify, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const gaps = gap ? (0, import_stack_core.mapResponsive)(breakpoints, gap, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const wraps = wrap ? (0, import_stack_core.mapResponsive)(breakpoints, wrap, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const fullWidths = fullWidth ? (0, import_stack_core.mapResponsive)(breakpoints, fullWidth, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const fullHeights = fullHeight ? (0, import_stack_core.mapResponsive)(breakpoints, fullHeight, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const paddings = padding ? (0, import_stack_core.mapResponsive)(breakpoints, padding, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const widths = width ? (0, import_stack_core.mapResponsive)(breakpoints, width, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const heights = height ? (0, import_stack_core.mapResponsive)(breakpoints, height, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const maxWidths = maxWidth ? (0, import_stack_core.mapResponsive)(breakpoints, maxWidth, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const maxHeights = maxHeight ? (0, import_stack_core.mapResponsive)(breakpoints, maxHeight, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const borderRadiuses = borderRadius ? (0, import_stack_core.mapResponsive)(breakpoints, borderRadius, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const backgrounds = background ? (0, import_stack_core.mapResponsive)(breakpoints, background, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const positions = position ? (0, import_stack_core.mapResponsive)(breakpoints, position, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const flexes = flex ? (0, import_stack_core.mapResponsive)(breakpoints, flex, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const borders = border ? (0, import_stack_core.mapResponsive)(breakpoints, border, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
FlexBase,
__spreadValues({
ref,
as,
$direction: directions,
$align: aligns,
$justify: justifies,
$gap: gaps,
$wrap: wraps,
$fullHeight: fullHeights,
$fullWidth: fullWidths,
$padding: paddings,
$width: widths,
$height: heights,
$maxWidth: maxWidths,
$maxHeight: maxHeights,
$borderRadius: borderRadiuses,
$background: backgrounds,
$position: positions,
$flex: flexes,
$border: borders
}, restProps)
);
});
var Column = (0, import_react.forwardRef)(function ColumnBase(_a, ref) {
var _b = _a, {
direction = "column",
align = "start",
justify = "start",
gap = 0,
wrap = "nowrap"
} = _b, restProps = __objRest(_b, [
"direction",
"align",
"justify",
"gap",
"wrap"
]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
FlexImpl,
__spreadValues({
ref,
direction,
align,
justify,
gap,
wrap
}, restProps)
);
});
var Row = (0, import_react.forwardRef)(function RowBase(_a, ref) {
var _b = _a, {
direction = "row",
align = "start",
justify = "start",
gap = 0,
wrap = "nowrap"
} = _b, restProps = __objRest(_b, [
"direction",
"align",
"justify",
"gap",
"wrap"
]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
FlexImpl,
__spreadValues({
ref,
direction,
align,
justify,
gap,
wrap
}, restProps)
);
});
var Flex = Object.assign(FlexImpl, {
Column,
Row
});
// src/v2/FlexV2.tsx
var import_react_primitive = require("@radix-ui/react-primitive");
var import_stack_core2 = require("@teamsparta/stack-core");
var import_react4 = require("react");
// src/v2/FlexV2.style.ts
var import_react3 = require("@emotion/react");
// src/v2/utils.ts
var import_react2 = require("@emotion/react");
var import_stack_utils = require("@teamsparta/stack-utils");
var createResponsiveCssFunction = (cssProperty, transformer) => {
return (values) => {
if (!values || values.length === 0)
return [];
return values.map(({ breakpoint, value }) => {
if (value === void 0)
return (0, import_react2.css)();
const transformedValue = transformer ? transformer(value) : value;
if (transformedValue === void 0)
return (0, import_react2.css)();
return (0, import_react2.css)({
[`@media screen and (min-width: ${breakpoint}px)`]: {
[cssProperty]: transformedValue
}
});
});
};
};
var booleanToCssValue = (value, trueValue, falseValue) => value ? trueValue : falseValue;
var pixelValueTransformer = (value) => typeof value === "string" || typeof value === "number" ? (0, import_stack_utils.coerceCssPixelValue)(value) : void 0;
var stringValueTransformer = (value) => value;
var booleanToPixelTransformer = (trueValue, falseValue) => (value) => typeof value === "boolean" ? booleanToCssValue(value, trueValue, falseValue) : void 0;
// src/v2/FlexV2.style.ts
var justifyContentMap2 = {
start: "flex-start",
end: "flex-end",
center: "center",
between: "space-between",
around: "space-around",
evenly: "space-evenly",
normal: "normal"
};
var alignItemsMap2 = {
start: "flex-start",
end: "flex-end",
center: "center",
baseline: "baseline",
stretch: "stretch",
normal: "normal"
};
var containerCss = (0, import_react3.css)({
display: "flex"
});
var flexDirectionCss = createResponsiveCssFunction(
"flexDirection",
stringValueTransformer
);
var flexWrapCss = createResponsiveCssFunction(
"flexWrap",
stringValueTransformer
);
var flexJustifyContentCss = createResponsiveCssFunction(
"justifyContent",
(value) => value ? justifyContentMap2[value] : void 0
);
var flexAlignItemsCss = createResponsiveCssFunction(
"alignItems",
(value) => value ? alignItemsMap2[value] : void 0
);
var flexGapCss = createResponsiveCssFunction(
"gap",
pixelValueTransformer
);
var flexFullWidthCss = createResponsiveCssFunction(
"width",
booleanToPixelTransformer("100%", "auto")
);
var flexFullHeightCss = createResponsiveCssFunction(
"height",
booleanToPixelTransformer("100%", "auto")
);
var flexPaddingCss = createResponsiveCssFunction(
"padding",
pixelValueTransformer
);
var flexWidthCss = createResponsiveCssFunction(
"width",
pixelValueTransformer
);
var flexHeightCss = createResponsiveCssFunction(
"height",
pixelValueTransformer
);
var flexMaxWidthCss = createResponsiveCssFunction(
"maxWidth",
pixelValueTransformer
);
var flexMaxHeightCss = createResponsiveCssFunction(
"maxHeight",
pixelValueTransformer
);
var flexBorderRadiusCss = createResponsiveCssFunction(
"borderRadius",
pixelValueTransformer
);
var flexBackgroundCss = createResponsiveCssFunction(
"background",
stringValueTransformer
);
var flexPositionCss = createResponsiveCssFunction(
"position",
stringValueTransformer
);
var flexFlexCss = createResponsiveCssFunction(
"flex",
(value) => typeof value === "string" || typeof value === "number" ? String(value) : void 0
);
var flexBorderCss = createResponsiveCssFunction(
"border",
stringValueTransformer
);
// src/v2/FlexV2.tsx
var import_jsx_runtime2 = require("@emotion/react/jsx-runtime");
var FlexV2Impl = (0, import_react4.forwardRef)(
function FlexV2Base(_a, ref) {
var _b = _a, {
as,
asChild,
direction,
align = "normal",
justify = "normal",
wrap,
gap,
fullHeight,
fullWidth,
padding,
width,
height,
maxWidth,
maxHeight,
borderRadius,
background,
position,
flex,
border
} = _b, restProps = __objRest(_b, [
"as",
"asChild",
"direction",
"align",
"justify",
"wrap",
"gap",
"fullHeight",
"fullWidth",
"padding",
"width",
"height",
"maxWidth",
"maxHeight",
"borderRadius",
"background",
"position",
"flex",
"border"
]);
const breakpoints = (0, import_stack_core2.useBreakpointContext)("FlexV2");
const responsiveValues = (0, import_react4.useMemo)(() => {
const directions = direction ? (0, import_stack_core2.mapResponsive)(breakpoints, direction, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const aligns = align ? (0, import_stack_core2.mapResponsive)(breakpoints, align, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const justifies = justify ? (0, import_stack_core2.mapResponsive)(breakpoints, justify, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const gaps = gap ? (0, import_stack_core2.mapResponsive)(breakpoints, gap, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const wraps = wrap ? (0, import_stack_core2.mapResponsive)(breakpoints, wrap, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const fullWidths = fullWidth ? (0, import_stack_core2.mapResponsive)(breakpoints, fullWidth, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const fullHeights = fullHeight ? (0, import_stack_core2.mapResponsive)(breakpoints, fullHeight, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const paddings = padding ? (0, import_stack_core2.mapResponsive)(breakpoints, padding, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const widths = width ? (0, import_stack_core2.mapResponsive)(breakpoints, width, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const heights = height ? (0, import_stack_core2.mapResponsive)(breakpoints, height, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const maxWidths = maxWidth ? (0, import_stack_core2.mapResponsive)(breakpoints, maxWidth, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const maxHeights = maxHeight ? (0, import_stack_core2.mapResponsive)(breakpoints, maxHeight, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const borderRadiuses = borderRadius ? (0, import_stack_core2.mapResponsive)(breakpoints, borderRadius, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const backgrounds = background ? (0, import_stack_core2.mapResponsive)(breakpoints, background, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const positions = position ? (0, import_stack_core2.mapResponsive)(breakpoints, position, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const flexes = flex ? (0, import_stack_core2.mapResponsive)(breakpoints, flex, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
const borders = border ? (0, import_stack_core2.mapResponsive)(breakpoints, border, (breakpoint, value) => ({
breakpoint,
value
})) : void 0;
return {
directions,
aligns,
justifies,
gaps,
wraps,
fullWidths,
fullHeights,
paddings,
widths,
heights,
maxWidths,
maxHeights,
borderRadiuses,
backgrounds,
positions,
flexes,
borders
};
}, [
breakpoints,
direction,
align,
justify,
gap,
wrap,
fullWidth,
fullHeight,
padding,
width,
height,
maxWidth,
maxHeight,
borderRadius,
background,
position,
flex,
border
]);
const renderPrimitive = asChild || !as;
const Component = renderPrimitive ? import_react_primitive.Primitive.div : as;
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Component,
__spreadValues(__spreadProps(__spreadValues({
ref
}, renderPrimitive && asChild ? { asChild: true } : {}), {
css: [
containerCss,
flexDirectionCss(responsiveValues.directions),
flexAlignItemsCss(responsiveValues.aligns),
flexJustifyContentCss(responsiveValues.justifies),
flexGapCss(responsiveValues.gaps),
flexWrapCss(responsiveValues.wraps),
flexFullWidthCss(responsiveValues.fullWidths),
flexFullHeightCss(responsiveValues.fullHeights),
flexPaddingCss(responsiveValues.paddings),
flexWidthCss(responsiveValues.widths),
flexHeightCss(responsiveValues.heights),
flexMaxWidthCss(responsiveValues.maxWidths),
flexMaxHeightCss(responsiveValues.maxHeights),
flexBorderRadiusCss(responsiveValues.borderRadiuses),
flexBackgroundCss(responsiveValues.backgrounds),
flexPositionCss(responsiveValues.positions),
flexFlexCss(responsiveValues.flexes),
flexBorderCss(responsiveValues.borders)
]
}), restProps)
);
}
);
var FlexV2Column = (0, import_react4.forwardRef)(function FlexV2ColumnBase(_a, ref) {
var _b = _a, { direction = "column" } = _b, props = __objRest(_b, ["direction"]);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FlexV2Impl, __spreadValues({ ref, direction }, props));
});
var FlexV2Row = (0, import_react4.forwardRef)(
function FlexV2RowBase(_a, ref) {
var _b = _a, { direction = "row" } = _b, props = __objRest(_b, ["direction"]);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FlexV2Impl, __spreadValues({ ref, direction }, props));
}
);
var FlexV2 = Object.assign(FlexV2Impl, {
Column: FlexV2Column,
Row: FlexV2Row
});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Flex,
FlexV2
});