@teamsparta/stack-flex/dist/chunk-U6X5KISS.mjs

stack flex

"use client";

import {
  containerCss,
  flexAlignItemsCss,
  flexBackgroundCss,
  flexBorderCss,
  flexBorderRadiusCss,
  flexDirectionCss,
  flexFlexCss,
  flexFullHeightCss,
  flexFullWidthCss,
  flexGapCss,
  flexHeightCss,
  flexJustifyContentCss,
  flexMaxHeightCss,
  flexMaxWidthCss,
  flexPaddingCss,
  flexPositionCss,
  flexWidthCss,
  flexWrapCss
} from "./chunk-VTKTIPWM.mjs";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-FUJQIYOF.mjs";

// src/v2/FlexV2.tsx
import { Primitive } from "@radix-ui/react-primitive";
import {
  mapResponsive,
  useBreakpointContext
} from "@teamsparta/stack-core";
import { forwardRef, useMemo } from "react";
import { jsx } from "@emotion/react/jsx-runtime";
var FlexV2Impl = 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 = useBreakpointContext("FlexV2");
    const responsiveValues = useMemo(() => {
      const directions = direction ? mapResponsive(breakpoints, direction, (breakpoint, value) => ({
        breakpoint,
        value
      })) : void 0;
      const aligns = align ? mapResponsive(breakpoints, align, (breakpoint, value) => ({
        breakpoint,
        value
      })) : void 0;
      const justifies = justify ? mapResponsive(breakpoints, justify, (breakpoint, value) => ({
        breakpoint,
        value
      })) : void 0;
      const gaps = gap ? mapResponsive(breakpoints, gap, (breakpoint, value) => ({
        breakpoint,
        value
      })) : void 0;
      const wraps = wrap ? mapResponsive(breakpoints, wrap, (breakpoint, value) => ({
        breakpoint,
        value
      })) : void 0;
      const fullWidths = fullWidth ? mapResponsive(breakpoints, fullWidth, (breakpoint, value) => ({
        breakpoint,
        value
      })) : void 0;
      const fullHeights = fullHeight ? mapResponsive(breakpoints, fullHeight, (breakpoint, value) => ({
        breakpoint,
        value
      })) : void 0;
      const paddings = padding ? mapResponsive(breakpoints, padding, (breakpoint, value) => ({
        breakpoint,
        value
      })) : void 0;
      const widths = width ? mapResponsive(breakpoints, width, (breakpoint, value) => ({
        breakpoint,
        value
      })) : void 0;
      const heights = height ? mapResponsive(breakpoints, height, (breakpoint, value) => ({
        breakpoint,
        value
      })) : void 0;
      const maxWidths = maxWidth ? mapResponsive(breakpoints, maxWidth, (breakpoint, value) => ({
        breakpoint,
        value
      })) : void 0;
      const maxHeights = maxHeight ? mapResponsive(breakpoints, maxHeight, (breakpoint, value) => ({
        breakpoint,
        value
      })) : void 0;
      const borderRadiuses = borderRadius ? mapResponsive(breakpoints, borderRadius, (breakpoint, value) => ({
        breakpoint,
        value
      })) : void 0;
      const backgrounds = background ? mapResponsive(breakpoints, background, (breakpoint, value) => ({
        breakpoint,
        value
      })) : void 0;
      const positions = position ? mapResponsive(breakpoints, position, (breakpoint, value) => ({
        breakpoint,
        value
      })) : void 0;
      const flexes = flex ? mapResponsive(breakpoints, flex, (breakpoint, value) => ({
        breakpoint,
        value
      })) : void 0;
      const borders = border ? 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 ? Primitive.div : as;
    return /* @__PURE__ */ 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 = forwardRef(function FlexV2ColumnBase(_a, ref) {
  var _b = _a, { direction = "column" } = _b, props = __objRest(_b, ["direction"]);
  return /* @__PURE__ */ jsx(FlexV2Impl, __spreadValues({ ref, direction }, props));
});
var FlexV2Row = forwardRef(
  function FlexV2RowBase(_a, ref) {
    var _b = _a, { direction = "row" } = _b, props = __objRest(_b, ["direction"]);
    return /* @__PURE__ */ jsx(FlexV2Impl, __spreadValues({ ref, direction }, props));
  }
);
var FlexV2 = Object.assign(FlexV2Impl, {
  Column: FlexV2Column,
  Row: FlexV2Row
});

export {
  FlexV2
};