@dynshift/layr 1.0.0

package/dist/index.js

@@ -0,0 +1,807 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React from '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__ */ jsxs(
+      "div",
+      {
+        id,
+        className,
+        style: containerStyles,
+        onClick: handleClick,
+        role,
+        "aria-label": ariaLabel,
+        children: [
+          children,
+          foregroundDecoration && /* @__PURE__ */ 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__ */ jsx("div", { id, className, style: containerStyles, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          transform: `scale(${widthFactor || 1}, ${heightFactor || 1})`,
+          transformOrigin: "center"
+        },
+        children
+      }
+    ) });
+  }
+  return /* @__PURE__ */ 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__ */ 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__ */ 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.Children.map(children, (child, index) => {
+    if (!React.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__ */ jsx("div", { style: childStyles, children: child }, index)
+    );
+  });
+  return (
+    // biome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
+    /* @__PURE__ */ 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__ */ jsx("div", { className, style: positionedStyles, children });
+};
+Positioned.displayName = "Positioned";
+var PositionedFill = ({ children, width, height, className, style }) => {
+  return /* @__PURE__ */ 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__ */ jsx("div", { id, className, style: boxStyles, children });
+};
+var SizedBoxExpand = (props) => /* @__PURE__ */ jsx(SizedBoxBase, { width: "100%", height: "100%", ...props });
+var SizedBoxShrink = (props) => /* @__PURE__ */ jsx(SizedBoxBase, { width: 0, height: 0, ...props });
+var SizedBoxSquare = ({ dimension, ...props }) => /* @__PURE__ */ 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__ */ jsx("div", { id, className, style: paddingStyles, children });
+};
+
+export { BorderAll, BorderRadiusCircular, BoxShape, Center, Centre, Clip, Column, CrossAxisAlignment as ColumnCrossAxisAlignment, MainAxisAlignment as ColumnMainAxisAlignment, MainAxisSize as ColumnMainAxisSize, Container, CrossAxisAlignment2 as CrossAxisAlignment, EdgeInsetsAll, EdgeInsetsOnly, EdgeInsetsSymmetric, MainAxisAlignment2 as MainAxisAlignment, MainAxisSize2 as MainAxisSize, Padding, Positioned, PositionedFill, Row, SizedBox, Stack, StackFit, TextDirection, VerticalDirection };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map