@dynshift/layr 1.0.0

package/dist/index.cjs

@@ -0,0 +1,838 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/components/container.tsx
+var BoxShape = /* @__PURE__ */ ((BoxShape2) => {
+  BoxShape2["rectangle"] = "rectangle";
+  BoxShape2["circle"] = "circle";
+  return BoxShape2;
+})(BoxShape || {});
+function edgeInsetsToCSS(insets) {
+  if (insets === void 0) return void 0;
+  if (typeof insets === "number") return `${insets}px`;
+  if ("all" in insets) {
+    return `${insets.all}px`;
+  }
+  if ("horizontal" in insets || "vertical" in insets) {
+    const horizontal = insets.horizontal ?? 0;
+    const vertical = insets.vertical ?? 0;
+    return `${vertical}px ${horizontal}px`;
+  }
+  if ("top" in insets || "right" in insets || "bottom" in insets || "left" in insets) {
+    const { top = 0, right = 0, bottom = 0, left = 0 } = insets;
+    return `${top}px ${right}px ${bottom}px ${left}px`;
+  }
+  return "0px";
+}
+function resolvePadding(props) {
+  const base = {};
+  if (typeof props.padding === "number") {
+    base.top = base.bottom = base.left = base.right = props.padding;
+  } else if (props.padding) {
+    if ("all" in props.padding) {
+      base.top = base.bottom = base.left = base.right = props.padding.all;
+    } else if ("horizontal" in props.padding || "vertical" in props.padding) {
+      if (props.padding.horizontal !== void 0) {
+        base.left = base.right = props.padding.horizontal;
+      }
+      if (props.padding.vertical !== void 0) {
+        base.top = base.bottom = props.padding.vertical;
+      }
+    } else {
+      Object.assign(base, props.padding);
+    }
+  }
+  if (props.paddingHorizontal !== void 0) {
+    base.left = base.right = props.paddingHorizontal;
+  }
+  if (props.paddingVertical !== void 0) {
+    base.top = base.bottom = props.paddingVertical;
+  }
+  if (props.paddingTop !== void 0) base.top = props.paddingTop;
+  if (props.paddingBottom !== void 0) base.bottom = props.paddingBottom;
+  if (props.paddingLeft !== void 0) base.left = props.paddingLeft;
+  if (props.paddingRight !== void 0) base.right = props.paddingRight;
+  return base;
+}
+function resolveMargin(props) {
+  const base = {};
+  if (typeof props.margin === "number") {
+    base.top = base.bottom = base.left = base.right = props.margin;
+  } else if (props.margin) {
+    if ("all" in props.margin) {
+      base.top = base.bottom = base.left = base.right = props.margin.all;
+    } else if ("horizontal" in props.margin || "vertical" in props.margin) {
+      if (props.margin.horizontal !== void 0) {
+        base.left = base.right = props.margin.horizontal;
+      }
+      if (props.margin.vertical !== void 0) {
+        base.top = base.bottom = props.margin.vertical;
+      }
+    } else {
+      Object.assign(base, props.margin);
+    }
+  }
+  if (props.marginHorizontal !== void 0) {
+    base.left = base.right = props.marginHorizontal;
+  }
+  if (props.marginVertical !== void 0) {
+    base.top = base.bottom = props.marginVertical;
+  }
+  if (props.marginTop !== void 0) base.top = props.marginTop;
+  if (props.marginBottom !== void 0) base.bottom = props.marginBottom;
+  if (props.marginLeft !== void 0) base.left = props.marginLeft;
+  if (props.marginRight !== void 0) base.right = props.marginRight;
+  return base;
+}
+function alignmentToFlexbox(alignment) {
+  if (!alignment) return {};
+  const map = {
+    topLeft: { justifyContent: "flex-start", alignItems: "flex-start" },
+    topCenter: { justifyContent: "center", alignItems: "flex-start" },
+    topRight: { justifyContent: "flex-end", alignItems: "flex-start" },
+    centerLeft: { justifyContent: "flex-start", alignItems: "center" },
+    center: { justifyContent: "center", alignItems: "center" },
+    centerRight: { justifyContent: "flex-end", alignItems: "center" },
+    bottomLeft: { justifyContent: "flex-start", alignItems: "flex-end" },
+    bottomCenter: { justifyContent: "center", alignItems: "flex-end" },
+    bottomRight: { justifyContent: "flex-end", alignItems: "flex-end" }
+  };
+  return {
+    display: "flex",
+    ...map[alignment]
+  };
+}
+function boxShadowToCSS(shadows) {
+  if (!shadows || shadows.length === 0) return void 0;
+  return shadows.map((shadow) => {
+    const dx = shadow.offset?.dx || 0;
+    const dy = shadow.offset?.dy || 0;
+    const blur = shadow.blurRadius || 0;
+    const spread = shadow.spreadRadius || 0;
+    const color = shadow.color || "rgba(0, 0, 0, 0.1)";
+    return `${dx}px ${dy}px ${blur}px ${spread}px ${color}`;
+  }).join(", ");
+}
+function gradientToCSS(gradient) {
+  if (!gradient || gradient.colors.length === 0) return void 0;
+  const { type = "linear", colors, stops, begin = "to right" } = gradient;
+  let colorStops;
+  if (stops && stops.length === colors.length) {
+    colorStops = colors.map((color, i) => `${color} ${stops[i] * 100}%`).join(", ");
+  } else {
+    colorStops = colors.join(", ");
+  }
+  if (type === "radial") {
+    return `radial-gradient(${gradient.center || "circle"}, ${colorStops})`;
+  }
+  return `linear-gradient(${begin}, ${colorStops})`;
+}
+function borderToCSS(border) {
+  if (!border) return {};
+  if (typeof border === "string") return { border };
+  const styles = {};
+  if (border.top) {
+    const { width, color, style = "solid" } = border.top;
+    styles.borderTop = `${width}px ${style} ${color}`;
+  }
+  if (border.bottom) {
+    const { width, color, style = "solid" } = border.bottom;
+    styles.borderBottom = `${width}px ${style} ${color}`;
+  }
+  if (border.left) {
+    const { width, color, style = "solid" } = border.left;
+    styles.borderLeft = `${width}px ${style} ${color}`;
+  }
+  if (border.right) {
+    const { width, color, style = "solid" } = border.right;
+    styles.borderRight = `${width}px ${style} ${color}`;
+  }
+  return styles;
+}
+function decorationToCSS(decoration, colorProp) {
+  const styles = {};
+  if (!decoration && !colorProp) return styles;
+  const dec = decoration || {};
+  const bgColor = colorProp || dec.color;
+  if (bgColor) styles.backgroundColor = bgColor;
+  const gradientCSS = gradientToCSS(dec.gradient);
+  if (gradientCSS) styles.backgroundImage = gradientCSS;
+  if (dec.image) {
+    const img = dec.image;
+    styles.backgroundImage = `url(${img.image})`;
+    styles.backgroundSize = img.fit || "cover";
+    styles.backgroundPosition = img.alignment || "center";
+    styles.backgroundRepeat = img.repeat || "no-repeat";
+    if (img.opacity !== void 0) {
+      styles.opacity = img.opacity;
+    }
+  }
+  if (dec.shape === "circle" /* circle */) {
+    styles.borderRadius = "50%";
+    styles.aspectRatio = "1 / 1";
+  } else if (dec.borderRadius !== void 0) {
+    styles.borderRadius = typeof dec.borderRadius === "number" ? `${dec.borderRadius}px` : dec.borderRadius;
+  }
+  Object.assign(styles, borderToCSS(dec.border));
+  const shadowCSS = boxShadowToCSS(dec.boxShadow);
+  if (shadowCSS) styles.boxShadow = shadowCSS;
+  if (dec.backgroundBlendMode) {
+    styles.backgroundBlendMode = dec.backgroundBlendMode;
+  }
+  if (dec.opacity !== void 0) {
+    styles.opacity = dec.opacity;
+  }
+  return styles;
+}
+function normalizeDimension(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+function alignmentToTransformOrigin(alignment) {
+  const map = {
+    topLeft: "top left",
+    topCenter: "top center",
+    topRight: "top right",
+    centerLeft: "center left",
+    center: "center",
+    centerRight: "center right",
+    bottomLeft: "bottom left",
+    bottomCenter: "bottom center",
+    bottomRight: "bottom right"
+  };
+  return map[alignment];
+}
+var Container = ({
+  children,
+  width,
+  height,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  paddingTop,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  margin,
+  marginHorizontal,
+  marginVertical,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  decoration,
+  foregroundDecoration,
+  color,
+  alignment,
+  constraints,
+  transform,
+  transformAlignment,
+  clipBehavior = "none",
+  onTap,
+  onClick,
+  cursor,
+  className = "",
+  style = {},
+  id,
+  role,
+  ariaLabel
+}) => {
+  const resolvedPadding = resolvePadding({
+    padding,
+    paddingHorizontal,
+    paddingVertical,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight
+  });
+  const resolvedMargin = resolveMargin({
+    margin,
+    marginHorizontal,
+    marginVertical,
+    marginTop,
+    marginBottom,
+    marginLeft,
+    marginRight
+  });
+  const containerStyles = {
+    // Margin (outermost)
+    margin: edgeInsetsToCSS(resolvedMargin),
+    // Dimensions
+    width: normalizeDimension(width),
+    height: normalizeDimension(height),
+    // Constraints
+    minWidth: normalizeDimension(constraints?.minWidth),
+    maxWidth: normalizeDimension(constraints?.maxWidth),
+    minHeight: normalizeDimension(constraints?.minHeight),
+    maxHeight: normalizeDimension(constraints?.maxHeight),
+    // Padding
+    padding: edgeInsetsToCSS(resolvedPadding),
+    // Decoration (background layer)
+    ...decorationToCSS(decoration, color),
+    // Alignment
+    ...alignmentToFlexbox(alignment),
+    // Transform
+    transform,
+    transformOrigin: transformAlignment ? alignmentToTransformOrigin(transformAlignment) : void 0,
+    // Clip behavior
+    overflow: clipBehavior === "none" ? "visible" : "hidden",
+    // Cursor
+    cursor: cursor || (onTap || onClick ? "pointer" : void 0),
+    // Box sizing
+    boxSizing: "border-box",
+    // Position for stacking
+    position: "relative",
+    // Custom styles (escape hatch)
+    ...style
+  };
+  const handleClick = onTap || onClick;
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        id,
+        className,
+        style: containerStyles,
+        onClick: handleClick,
+        role,
+        "aria-label": ariaLabel,
+        children: [
+          children,
+          foregroundDecoration && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                pointerEvents: "none",
+                ...decorationToCSS(foregroundDecoration)
+              }
+            }
+          )
+        ]
+      }
+    )
+  );
+};
+var EdgeInsetsAll = (value) => ({
+  all: value
+});
+var EdgeInsetsSymmetric = ({
+  horizontal = 0,
+  vertical = 0
+}) => ({
+  horizontal,
+  vertical
+});
+var EdgeInsetsOnly = ({
+  top,
+  bottom,
+  left,
+  right
+}) => ({
+  top,
+  bottom,
+  left,
+  right
+});
+var BorderAll = ({
+  width = 1,
+  color = "currentColor",
+  style = "solid"
+}) => ({
+  top: { width, color, style },
+  bottom: { width, color, style },
+  left: { width, color, style },
+  right: { width, color, style }
+});
+var BorderRadiusCircular = (radius) => radius;
+var Centre = ({
+  children,
+  widthFactor,
+  heightFactor,
+  className = "",
+  style = {},
+  id
+}) => {
+  const containerStyles = {
+    // Always use flexbox for centering
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    // Size behavior (Flutter spec):
+    // - If factor is null: expand to fill parent (width/height: 100%)
+    // - If factor is set: size will be determined by child (fit-content)
+    width: widthFactor === void 0 ? "100%" : "fit-content",
+    height: heightFactor === void 0 ? "100%" : "fit-content",
+    // Box sizing
+    boxSizing: "border-box",
+    // Custom styles (escape hatch)
+    ...style
+  };
+  if (widthFactor !== void 0 || heightFactor !== void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { id, className, style: containerStyles, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          transform: `scale(${widthFactor || 1}, ${heightFactor || 1})`,
+          transformOrigin: "center"
+        },
+        children
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { id, className, style: containerStyles, children });
+};
+var Center = Centre;
+var MainAxisAlignment = /* @__PURE__ */ ((MainAxisAlignment3) => {
+  MainAxisAlignment3["start"] = "flex-start";
+  MainAxisAlignment3["center"] = "center";
+  MainAxisAlignment3["end"] = "flex-end";
+  MainAxisAlignment3["spaceBetween"] = "space-between";
+  MainAxisAlignment3["spaceAround"] = "space-around";
+  MainAxisAlignment3["spaceEvenly"] = "space-evenly";
+  return MainAxisAlignment3;
+})(MainAxisAlignment || {});
+var CrossAxisAlignment = /* @__PURE__ */ ((CrossAxisAlignment3) => {
+  CrossAxisAlignment3["start"] = "flex-start";
+  CrossAxisAlignment3["center"] = "center";
+  CrossAxisAlignment3["end"] = "flex-end";
+  CrossAxisAlignment3["stretch"] = "stretch";
+  CrossAxisAlignment3["baseline"] = "baseline";
+  return CrossAxisAlignment3;
+})(CrossAxisAlignment || {});
+var MainAxisSize = /* @__PURE__ */ ((MainAxisSize3) => {
+  MainAxisSize3["max"] = "max";
+  MainAxisSize3["min"] = "min";
+  return MainAxisSize3;
+})(MainAxisSize || {});
+var VerticalDirection = /* @__PURE__ */ ((VerticalDirection2) => {
+  VerticalDirection2["down"] = "down";
+  VerticalDirection2["up"] = "up";
+  return VerticalDirection2;
+})(VerticalDirection || {});
+var Column = ({
+  children,
+  mainAxisAlignment = "flex-start" /* start */,
+  crossAxisAlignment = "center" /* center */,
+  mainAxisSize = "max" /* max */,
+  verticalDirection = "down" /* down */,
+  spacing = 0,
+  clipBehavior = "visible",
+  className = "",
+  style = {},
+  id,
+  onTap,
+  onClick
+}) => {
+  const columnStyles = {
+    // Flexbox for vertical layout
+    display: "flex",
+    flexDirection: verticalDirection === "down" /* down */ ? "column" : "column-reverse",
+    // Main axis alignment (vertical)
+    justifyContent: mainAxisAlignment,
+    // Cross axis alignment (horizontal)
+    alignItems: crossAxisAlignment,
+    // Main axis size behavior
+    height: mainAxisSize === "max" /* max */ ? "100%" : "auto",
+    minHeight: mainAxisSize === "min" /* min */ ? "auto" : void 0,
+    // Spacing between children (CSS gap for clean implementation)
+    gap: spacing > 0 ? `${spacing}px` : void 0,
+    // Clip behavior
+    overflow: clipBehavior,
+    // Box sizing
+    boxSizing: "border-box",
+    // Width behavior (Flutter spec: width = max width of children)
+    width: "100%",
+    // Default to full width, children can control their own width
+    // Custom styles (escape hatch)
+    ...style
+  };
+  const handleClick = onTap || onClick;
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id,
+        className,
+        style: columnStyles,
+        onClick: handleClick,
+        children
+      }
+    )
+  );
+};
+var MainAxisAlignment2 = /* @__PURE__ */ ((MainAxisAlignment3) => {
+  MainAxisAlignment3["start"] = "flex-start";
+  MainAxisAlignment3["center"] = "center";
+  MainAxisAlignment3["end"] = "flex-end";
+  MainAxisAlignment3["spaceBetween"] = "space-between";
+  MainAxisAlignment3["spaceAround"] = "space-around";
+  MainAxisAlignment3["spaceEvenly"] = "space-evenly";
+  return MainAxisAlignment3;
+})(MainAxisAlignment2 || {});
+var CrossAxisAlignment2 = /* @__PURE__ */ ((CrossAxisAlignment3) => {
+  CrossAxisAlignment3["start"] = "flex-start";
+  CrossAxisAlignment3["center"] = "center";
+  CrossAxisAlignment3["end"] = "flex-end";
+  CrossAxisAlignment3["stretch"] = "stretch";
+  CrossAxisAlignment3["baseline"] = "baseline";
+  return CrossAxisAlignment3;
+})(CrossAxisAlignment2 || {});
+var MainAxisSize2 = /* @__PURE__ */ ((MainAxisSize3) => {
+  MainAxisSize3["max"] = "max";
+  MainAxisSize3["min"] = "min";
+  return MainAxisSize3;
+})(MainAxisSize2 || {});
+var TextDirection = /* @__PURE__ */ ((TextDirection2) => {
+  TextDirection2["ltr"] = "ltr";
+  TextDirection2["rtl"] = "rtl";
+  return TextDirection2;
+})(TextDirection || {});
+var Row = ({
+  children,
+  mainAxisAlignment = "flex-start" /* start */,
+  crossAxisAlignment = "center" /* center */,
+  mainAxisSize = "max" /* max */,
+  textDirection = "ltr" /* ltr */,
+  spacing = 0,
+  clipBehavior = "visible",
+  className = "",
+  style = {},
+  id,
+  onTap,
+  onClick
+}) => {
+  const rowStyles = {
+    // Flexbox for horizontal layout
+    display: "flex",
+    flexDirection: textDirection === "ltr" /* ltr */ ? "row" : "row-reverse",
+    // Main axis alignment (horizontal)
+    justifyContent: mainAxisAlignment,
+    // Cross axis alignment (vertical)
+    alignItems: crossAxisAlignment,
+    // Main axis size behavior
+    width: mainAxisSize === "max" /* max */ ? "100%" : "auto",
+    minWidth: mainAxisSize === "min" /* min */ ? "auto" : void 0,
+    // Spacing between children (CSS gap for clean implementation)
+    gap: spacing > 0 ? `${spacing}px` : void 0,
+    // Clip behavior
+    overflow: clipBehavior,
+    // Box sizing
+    boxSizing: "border-box",
+    // Height behavior (Flutter spec: height = max height of children)
+    height: "auto",
+    // Default to auto, children control their own height
+    // Custom styles (escape hatch)
+    ...style
+  };
+  const handleClick = onTap || onClick;
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id,
+        className,
+        style: rowStyles,
+        onClick: handleClick,
+        dir: textDirection,
+        children
+      }
+    )
+  );
+};
+var StackFit = /* @__PURE__ */ ((StackFit2) => {
+  StackFit2["expand"] = "expand";
+  StackFit2["loose"] = "loose";
+  StackFit2["passthrough"] = "passthrough";
+  return StackFit2;
+})(StackFit || {});
+var Clip = /* @__PURE__ */ ((Clip2) => {
+  Clip2["hardEdge"] = "hidden";
+  Clip2["antiAlias"] = "hidden";
+  Clip2["antiAliasWithSaveLayer"] = "hidden";
+  Clip2["none"] = "visible";
+  return Clip2;
+})(Clip || {});
+function alignmentToPosition(alignment, textDirection) {
+  const isRTL = textDirection === "rtl" /* rtl */;
+  const alignmentMap = {
+    topLeft: {
+      top: 0,
+      left: isRTL ? void 0 : 0,
+      right: isRTL ? 0 : void 0
+    },
+    topCenter: {
+      top: 0,
+      left: "50%",
+      transform: "translateX(-50%)"
+    },
+    topRight: {
+      top: 0,
+      right: isRTL ? void 0 : 0,
+      left: isRTL ? 0 : void 0
+    },
+    centerLeft: {
+      top: "50%",
+      left: isRTL ? void 0 : 0,
+      right: isRTL ? 0 : void 0,
+      transform: "translateY(-50%)"
+    },
+    center: {
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)"
+    },
+    centerRight: {
+      top: "50%",
+      right: isRTL ? void 0 : 0,
+      left: isRTL ? 0 : void 0,
+      transform: "translateY(-50%)"
+    },
+    bottomLeft: {
+      bottom: 0,
+      left: isRTL ? void 0 : 0,
+      right: isRTL ? 0 : void 0
+    },
+    bottomCenter: {
+      bottom: 0,
+      left: "50%",
+      transform: "translateX(-50%)"
+    },
+    bottomRight: {
+      bottom: 0,
+      right: isRTL ? void 0 : 0,
+      left: isRTL ? 0 : void 0
+    }
+  };
+  return alignmentMap[alignment];
+}
+var Stack = ({
+  children,
+  alignment = "topLeft",
+  fit = "loose" /* loose */,
+  textDirection = "ltr" /* ltr */,
+  clipBehavior = "hidden" /* hardEdge */,
+  className = "",
+  style = {},
+  id,
+  onTap,
+  onClick
+}) => {
+  const stackStyles = {
+    // Position context for children
+    position: "relative",
+    // Sizing behavior based on fit
+    display: fit === "expand" /* expand */ ? "flex" : "block",
+    width: fit === "expand" /* expand */ ? "100%" : "auto",
+    height: fit === "expand" /* expand */ ? "100%" : "auto",
+    // Clip behavior
+    overflow: clipBehavior,
+    // Box sizing
+    boxSizing: "border-box",
+    // Text direction (for alignment resolution)
+    direction: textDirection,
+    // Custom styles
+    ...style
+  };
+  const handleClick = onTap || onClick;
+  const processedChildren = React__default.default.Children.map(children, (child, index) => {
+    if (!React__default.default.isValidElement(child)) return child;
+    const isPositioned = child.type?.displayName === "Positioned";
+    if (isPositioned) {
+      return child;
+    }
+    const childStyles = {
+      position: "absolute",
+      ...alignmentToPosition(alignment, textDirection),
+      // Sizing based on fit
+      ...fit === "expand" /* expand */ && {
+        width: "100%",
+        height: "100%"
+      },
+      // Z-index based on order (first = bottom)
+      zIndex: index
+    };
+    return (
+      // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: childStyles, children: child }, index)
+    );
+  });
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        id,
+        className,
+        style: stackStyles,
+        onClick: handleClick,
+        children: processedChildren
+      }
+    )
+  );
+};
+function normalizeDimension2(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+var Positioned = ({
+  children,
+  top,
+  bottom,
+  left,
+  right,
+  width,
+  height,
+  className = "",
+  style = {}
+}) => {
+  const positionedStyles = {
+    position: "absolute",
+    // Position from edges
+    top: normalizeDimension2(top),
+    bottom: normalizeDimension2(bottom),
+    left: normalizeDimension2(left),
+    right: normalizeDimension2(right),
+    // Explicit dimensions
+    width: normalizeDimension2(width),
+    height: normalizeDimension2(height),
+    // Box sizing
+    boxSizing: "border-box",
+    // Custom styles
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: positionedStyles, children });
+};
+Positioned.displayName = "Positioned";
+var PositionedFill = ({ children, width, height, className, style }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Positioned,
+    {
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
+      width,
+      height,
+      className,
+      style,
+      children
+    }
+  );
+};
+PositionedFill.displayName = "Positioned";
+function normalizeDimension3(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+var SizedBoxBase = ({
+  children,
+  width,
+  height,
+  className = "",
+  style = {},
+  id
+}) => {
+  const boxStyles = {
+    // Explicit dimensions
+    width: normalizeDimension3(width),
+    height: normalizeDimension3(height),
+    // Minimal styling (no decoration, just sizing)
+    boxSizing: "border-box",
+    flexShrink: 0,
+    // Prevent shrinking in flex layouts (Flutter behavior)
+    // Custom styles
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { id, className, style: boxStyles, children });
+};
+var SizedBoxExpand = (props) => /* @__PURE__ */ jsxRuntime.jsx(SizedBoxBase, { width: "100%", height: "100%", ...props });
+var SizedBoxShrink = (props) => /* @__PURE__ */ jsxRuntime.jsx(SizedBoxBase, { width: 0, height: 0, ...props });
+var SizedBoxSquare = ({ dimension, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(SizedBoxBase, { width: dimension, height: dimension, ...props });
+var SizedBox = SizedBoxBase;
+SizedBox.expand = SizedBoxExpand;
+SizedBox.shrink = SizedBoxShrink;
+SizedBox.square = SizedBoxSquare;
+function edgeInsetsToPadding(insets) {
+  if (typeof insets === "number") {
+    return `${insets}px`;
+  }
+  if ("all" in insets && insets.all !== void 0) {
+    return `${insets.all}px`;
+  }
+  const hasHorizontal = "horizontal" in insets;
+  const hasVertical = "vertical" in insets;
+  if (hasHorizontal || hasVertical) {
+    const v = insets.vertical ?? 0;
+    const h = insets.horizontal ?? 0;
+    return `${v}px ${h}px`;
+  }
+  if ("top" in insets || "right" in insets || "bottom" in insets || "left" in insets) {
+    const top = insets.top ?? 0;
+    const right = insets.right ?? 0;
+    const bottom = insets.bottom ?? 0;
+    const left = insets.left ?? 0;
+    return `${top}px ${right}px ${bottom}px ${left}px`;
+  }
+  return "0px";
+}
+var Padding = ({
+  children,
+  padding,
+  className = "",
+  style = {},
+  id
+}) => {
+  const paddingStyles = {
+    // Apply padding
+    padding: edgeInsetsToPadding(padding),
+    // Minimal styling (no decoration, just padding)
+    boxSizing: "border-box",
+    // Custom styles
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { id, className, style: paddingStyles, children });
+};
+
+exports.BorderAll = BorderAll;
+exports.BorderRadiusCircular = BorderRadiusCircular;
+exports.BoxShape = BoxShape;
+exports.Center = Center;
+exports.Centre = Centre;
+exports.Clip = Clip;
+exports.Column = Column;
+exports.ColumnCrossAxisAlignment = CrossAxisAlignment;
+exports.ColumnMainAxisAlignment = MainAxisAlignment;
+exports.ColumnMainAxisSize = MainAxisSize;
+exports.Container = Container;
+exports.CrossAxisAlignment = CrossAxisAlignment2;
+exports.EdgeInsetsAll = EdgeInsetsAll;
+exports.EdgeInsetsOnly = EdgeInsetsOnly;
+exports.EdgeInsetsSymmetric = EdgeInsetsSymmetric;
+exports.MainAxisAlignment = MainAxisAlignment2;
+exports.MainAxisSize = MainAxisSize2;
+exports.Padding = Padding;
+exports.Positioned = Positioned;
+exports.PositionedFill = PositionedFill;
+exports.Row = Row;
+exports.SizedBox = SizedBox;
+exports.Stack = Stack;
+exports.StackFit = StackFit;
+exports.TextDirection = TextDirection;
+exports.VerticalDirection = VerticalDirection;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map