@teamsparta/stack-flex/dist/v1/Flex.js

stack flex

"use client";

"use strict";
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
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 __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/v1/Flex.tsx
var Flex_exports = {};
__export(Flex_exports, {
  Flex: () => Flex
});
module.exports = __toCommonJS(Flex_exports);
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
});
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Flex
});