"use client";
import { jsx } from "../../packages/jsx/src/jsx-runtime.js";
import { Slot } from "@radix-ui/react-slot";
import { forwardRef } from "react";
import { mapResponsiveStyleBooleanValue, mapResponsiveStyleValue } from "../../theme/utils.js";
const FlexBase = forwardRef(
  ({ as, inline, direction, wrap, justify, align, gap, gapX, gapY, children, ...props }, ref) => {
    const Element = as === "child" ? Slot : as ?? (inline === true ? "span" : "div");
    const display = mapResponsiveStyleBooleanValue(inline, false, (value) => value ? "inline-flex" : "flex");
    const flexDirection = mapResponsiveStyleValue(direction, "row");
    const flexWrap = mapResponsiveStyleBooleanValue(wrap, false, (value) => value ? "wrap" : "nowrap");
    const justifyContent = mapResponsiveStyleValue(
      justify,
      "start",
      (value) => ["start", "end"].includes(value) ? `flex-${value}` : value
    );
    const alignItems = mapResponsiveStyleValue(
      align,
      "stretch",
      (value) => ["start", "end"].includes(value) ? `flex-${value}` : value
    );
    const styles = {
      display,
      flexDirection,
      flexWrap,
      justifyContent,
      alignItems,
      columnGap: gapX ?? gap,
      rowGap: gapY ?? gap
    };
    return /* @__PURE__ */ jsx(Element, { ref, sx: styles, ...props, children });
  }
);
FlexBase.displayName = "Flex";
const FlexRow = forwardRef(
  ({ reverse, ...props }, ref) => {
    const direction = mapResponsiveStyleBooleanValue(reverse, false, (value) => value ? "row-reverse" : "row");
    return /* @__PURE__ */ jsx(FlexBase, { ref, ...props, direction });
  }
);
FlexRow.displayName = "Flex.Row";
const FlexColumn = forwardRef(
  ({ reverse, ...props }, ref) => {
    const direction = mapResponsiveStyleBooleanValue(reverse, false, (value) => value ? "column-reverse" : "column");
    return /* @__PURE__ */ jsx(FlexBase, { ref, ...props, direction });
  }
);
FlexColumn.displayName = "Flex.Column";
const FlexCenter = forwardRef((props, ref) => /* @__PURE__ */ jsx(FlexBase, { ref, ...props, direction: "column", justify: "center", align: "center" }));
FlexCenter.displayName = "Flex.Center";
const Flex = Object.assign(FlexBase, {
  /** Shorthand for `<Flex direction="row" />`. */
  Row: FlexRow,
  /** Shorthand for `<Flex direction="column" />`. */
  Column: FlexColumn,
  /** Shorthand for `<Flex direction="column" justify="center" align="center" />`. */
  Center: FlexCenter
});
export {
  Flex
};
