atelier-ui-react 1.0.2

package/dist/index.mjs

@@ -0,0 +1,876 @@
+// src/Text/Text.tsx
+import React, { forwardRef } from "react";
+
+// src/utils/index.ts
+function cx(...classes) {
+  const result = [];
+  for (const item of classes) {
+    if (!item) continue;
+    if (typeof item === "string" || typeof item === "number") {
+      result.push(String(item));
+    } else if (Array.isArray(item)) {
+      const inner = cx(...item);
+      if (inner) result.push(inner);
+    } else if (typeof item === "object") {
+      for (const [key, value] of Object.entries(item)) {
+        if (value) result.push(key);
+      }
+    }
+  }
+  return result.join(" ");
+}
+function getSpaceValue(val) {
+  if (val === void 0) return void 0;
+  if (typeof val === "number") return `${val}px`;
+  const tokenList = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"];
+  if (tokenList.includes(val)) {
+    return `var(--ui-space-${val})`;
+  }
+  return val;
+}
+
+// src/Text/Text.tsx
+var Text = forwardRef(function Text2({
+  as: Component = "p",
+  size = "md",
+  weight = "normal",
+  color = "default",
+  muted = false,
+  align,
+  truncate = false,
+  mono = false,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const resolvedColor = muted ? "muted" : color;
+  const classes = cx(
+    "ui-text",
+    `ui-text--size-${size}`,
+    `ui-text--weight-${weight}`,
+    `ui-text--color-${resolvedColor}`,
+    align && `ui-text--align-${align}`,
+    truncate && "ui-text--truncate",
+    mono && "ui-text--mono",
+    className
+  );
+  return React.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      ...rest
+    },
+    children
+  );
+});
+Text.displayName = "Text";
+
+// src/Heading/Heading.tsx
+import React2, { forwardRef as forwardRef2 } from "react";
+var defaultLevelSizeMap = {
+  1: "3xl",
+  2: "2xl",
+  3: "xl",
+  4: "lg",
+  5: "md",
+  6: "sm"
+};
+var Heading = forwardRef2(function Heading2({
+  level = 2,
+  as,
+  size,
+  weight = "semibold",
+  align,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const Component = as || `h${level}`;
+  const resolvedSize = size || defaultLevelSizeMap[level] || "xl";
+  const classes = cx(
+    "ui-heading",
+    `ui-heading--size-${resolvedSize}`,
+    `ui-heading--weight-${weight}`,
+    align && `ui-heading--align-${align}`,
+    className
+  );
+  return React2.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      ...rest
+    },
+    children
+  );
+});
+Heading.displayName = "Heading";
+
+// src/Icon/Icon.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx } from "react/jsx-runtime";
+var sizeMap = {
+  xs: 14,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32
+};
+var Icon = forwardRef3(function Icon2({
+  icon: Component,
+  size = "md",
+  color = "inherit",
+  spin = false,
+  className,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const pixelSize = typeof size === "number" ? size : sizeMap[size] || 20;
+  let resolvedColor = color;
+  const tokenColors = {
+    default: "var(--ui-color-foreground)",
+    muted: "var(--ui-color-foreground-muted)",
+    subtle: "var(--ui-color-foreground-subtle)",
+    primary: "var(--ui-color-primary)",
+    success: "var(--ui-color-success)",
+    warning: "var(--ui-color-warning)",
+    danger: "var(--ui-color-danger)",
+    inherit: "currentColor"
+  };
+  if (tokenColors[color]) {
+    resolvedColor = tokenColors[color];
+  }
+  const classes = cx(
+    "ui-icon",
+    spin && "ui-icon--spin",
+    className
+  );
+  const combinedStyle = {
+    width: `${pixelSize}px`,
+    height: `${pixelSize}px`,
+    color: resolvedColor,
+    ...style
+  };
+  if (Component) {
+    return /* @__PURE__ */ jsx("span", { className: classes, style: combinedStyle, children: /* @__PURE__ */ jsx(
+      Component,
+      {
+        ref,
+        width: pixelSize,
+        height: pixelSize,
+        "aria-hidden": "true",
+        ...rest
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("span", { className: classes, style: combinedStyle, "aria-hidden": "true", children });
+});
+Icon.displayName = "Icon";
+
+// src/Divider/Divider.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var Divider = forwardRef4(function Divider2({
+  orientation = "horizontal",
+  spacing = "md",
+  label,
+  align = "center",
+  className,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const content = label || children;
+  const spacingVal = getSpaceValue(spacing);
+  const classes = cx(
+    "ui-divider",
+    `ui-divider--${orientation}`,
+    content && `ui-divider--align-${align}`,
+    className
+  );
+  const combinedStyle = {
+    marginTop: orientation === "horizontal" ? spacingVal : void 0,
+    marginBottom: orientation === "horizontal" ? spacingVal : void 0,
+    marginLeft: orientation === "vertical" ? spacingVal : void 0,
+    marginRight: orientation === "vertical" ? spacingVal : void 0,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "separator",
+      "aria-orientation": orientation,
+      className: classes,
+      style: combinedStyle,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx2("div", { className: "ui-divider__line" }),
+        content && /* @__PURE__ */ jsx2("span", { className: "ui-divider__content", children: content }),
+        content && /* @__PURE__ */ jsx2("div", { className: "ui-divider__line" })
+      ]
+    }
+  );
+});
+Divider.displayName = "Divider";
+
+// src/Button/Button.tsx
+import React5, { forwardRef as forwardRef5 } from "react";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var Button = forwardRef5(function Button2({
+  variant = "primary",
+  size = "md",
+  loading = false,
+  disabled = false,
+  iconLeft,
+  iconRight,
+  fullWidth = false,
+  as: Component = "button",
+  type = "button",
+  className,
+  children,
+  ...rest
+}, ref) {
+  const isActuallyDisabled = disabled || loading;
+  const classes = cx(
+    "ui-btn",
+    `ui-btn--variant-${variant}`,
+    `ui-btn--size-${size}`,
+    fullWidth && "ui-btn--full-width",
+    isActuallyDisabled && "ui-btn--disabled",
+    loading && "ui-btn--loading",
+    className
+  );
+  const buttonProps = Component === "button" ? { type, disabled: isActuallyDisabled } : { "aria-disabled": isActuallyDisabled };
+  return React5.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      ...buttonProps,
+      ...rest
+    },
+    /* @__PURE__ */ jsxs2(Fragment, { children: [
+      loading ? /* @__PURE__ */ jsx3("span", { className: "ui-btn__spinner", "aria-hidden": "true" }) : iconLeft && /* @__PURE__ */ jsx3("span", { className: "ui-btn__icon-left", children: iconLeft }),
+      children && /* @__PURE__ */ jsx3("span", { className: "ui-btn__label", children }),
+      !loading && iconRight && /* @__PURE__ */ jsx3("span", { className: "ui-btn__icon-right", children: iconRight })
+    ] })
+  );
+});
+Button.displayName = "Button";
+
+// src/Link/Link.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var Link = forwardRef6(function Link2({
+  variant = "default",
+  size = "md",
+  external = false,
+  iconLeft,
+  iconRight,
+  className,
+  target,
+  rel,
+  children,
+  ...rest
+}, ref) {
+  const classes = cx(
+    "ui-link",
+    `ui-link--variant-${variant}`,
+    `ui-link--size-${size}`,
+    className
+  );
+  const resolvedTarget = external ? "_blank" : target;
+  const resolvedRel = external ? rel ? `${rel} noopener noreferrer` : "noopener noreferrer" : rel;
+  return /* @__PURE__ */ jsxs3(
+    "a",
+    {
+      ref,
+      className: classes,
+      target: resolvedTarget,
+      rel: resolvedRel,
+      ...rest,
+      children: [
+        iconLeft && /* @__PURE__ */ jsx4("span", { className: "ui-link__icon-left", children: iconLeft }),
+        /* @__PURE__ */ jsx4("span", { children }),
+        iconRight && /* @__PURE__ */ jsx4("span", { className: "ui-link__icon-right", children: iconRight }),
+        external && !iconRight && /* @__PURE__ */ jsxs3(
+          "svg",
+          {
+            width: "12",
+            height: "12",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "ui-link__external-icon",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx4("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+              /* @__PURE__ */ jsx4("polyline", { points: "15 3 21 3 21 9" }),
+              /* @__PURE__ */ jsx4("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+Link.displayName = "Link";
+
+// src/Input/Input.tsx
+import { forwardRef as forwardRef7, useId } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var Input = forwardRef7(function Input2({
+  size = "md",
+  variant = "default",
+  label,
+  helperText,
+  error,
+  leftIcon,
+  rightIcon,
+  fullWidth = false,
+  disabled = false,
+  id: explicitId,
+  className,
+  ...rest
+}, ref) {
+  const generatedId = useId();
+  const id = explicitId || generatedId;
+  const helperId = `${id}-helper`;
+  const hasError = Boolean(error);
+  const errorMessage = typeof error === "string" ? error : void 0;
+  const isReadOnly = rest.readOnly !== void 0 ? rest.readOnly : rest.value !== void 0 && !rest.onChange ? true : void 0;
+  const wrapperClasses = cx(
+    "ui-input-wrapper",
+    fullWidth && "ui-input-wrapper--full-width"
+  );
+  const inputClasses = cx(
+    "ui-input",
+    `ui-input--size-${size}`,
+    `ui-input--variant-${variant}`,
+    leftIcon && "ui-input--has-left-icon",
+    rightIcon && "ui-input--has-right-icon",
+    hasError && "ui-input--error",
+    className
+  );
+  return /* @__PURE__ */ jsxs4("div", { className: wrapperClasses, children: [
+    label && /* @__PURE__ */ jsx5(
+      "label",
+      {
+        htmlFor: id,
+        className: cx("ui-input-label", disabled && "ui-input-label--disabled"),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs4("div", { className: "ui-input-container", children: [
+      leftIcon && /* @__PURE__ */ jsx5("span", { className: "ui-input__icon ui-input__icon--left", children: leftIcon }),
+      /* @__PURE__ */ jsx5(
+        "input",
+        {
+          ref,
+          id,
+          disabled,
+          readOnly: isReadOnly,
+          "aria-invalid": hasError,
+          "aria-describedby": helperText || errorMessage ? helperId : void 0,
+          className: inputClasses,
+          ...rest
+        }
+      ),
+      rightIcon && /* @__PURE__ */ jsx5("span", { className: "ui-input__icon ui-input__icon--right", children: rightIcon })
+    ] }),
+    (errorMessage || helperText) && /* @__PURE__ */ jsx5(
+      "span",
+      {
+        id: helperId,
+        className: cx("ui-input-helper", hasError && "ui-input-helper--error"),
+        children: errorMessage || helperText
+      }
+    )
+  ] });
+});
+Input.displayName = "Input";
+
+// src/Checkbox/Checkbox.tsx
+import { forwardRef as forwardRef8, useEffect, useRef } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var Checkbox = forwardRef8(function Checkbox2({
+  size = "md",
+  label,
+  description,
+  indeterminate = false,
+  checked,
+  defaultChecked,
+  disabled = false,
+  error,
+  className,
+  onChange,
+  readOnly,
+  ...rest
+}, forwardedRef) {
+  const innerRef = useRef(null);
+  const inputRef = forwardedRef || innerRef;
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = Boolean(indeterminate);
+    }
+  }, [indeterminate, inputRef]);
+  const isChecked = checked !== void 0 ? checked : void 0;
+  const isReadOnly = readOnly !== void 0 ? readOnly : checked !== void 0 && !onChange ? true : void 0;
+  const wrapperClasses = cx(
+    "ui-checkbox-wrapper",
+    disabled && "ui-checkbox-wrapper--disabled",
+    className
+  );
+  const boxClasses = cx(
+    "ui-checkbox-box",
+    `ui-checkbox-box--${size}`,
+    (isChecked || defaultChecked) && "ui-checkbox-box--checked",
+    indeterminate && "ui-checkbox-box--indeterminate",
+    error && "ui-checkbox-box--error"
+  );
+  return /* @__PURE__ */ jsxs5("label", { className: wrapperClasses, children: [
+    /* @__PURE__ */ jsx6(
+      "input",
+      {
+        ref: inputRef,
+        type: "checkbox",
+        checked,
+        defaultChecked,
+        disabled,
+        readOnly: isReadOnly,
+        onChange,
+        className: "ui-checkbox-input",
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx6("span", { className: boxClasses, "aria-hidden": "true", children: indeterminate ? /* @__PURE__ */ jsx6("svg", { className: "ui-checkbox-icon", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) }) : /* @__PURE__ */ jsx6("svg", { className: "ui-checkbox-icon", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx6("polyline", { points: "20 6 9 17 4 12" }) }) }),
+    (label || description) && /* @__PURE__ */ jsxs5("span", { className: "ui-checkbox-content", children: [
+      label && /* @__PURE__ */ jsx6("span", { className: "ui-checkbox-label", children: label }),
+      description && /* @__PURE__ */ jsx6("span", { className: "ui-checkbox-desc", children: description })
+    ] })
+  ] });
+});
+Checkbox.displayName = "Checkbox";
+
+// src/Select/Select.tsx
+import { forwardRef as forwardRef9, useId as useId2 } from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var Select = forwardRef9(function Select2({
+  options,
+  placeholder,
+  size = "md",
+  label,
+  helperText,
+  error,
+  fullWidth = false,
+  disabled = false,
+  id: explicitId,
+  className,
+  children,
+  value,
+  defaultValue,
+  ...rest
+}, ref) {
+  const generatedId = useId2();
+  const id = explicitId || generatedId;
+  const helperId = `${id}-helper`;
+  const hasError = Boolean(error);
+  const errorMessage = typeof error === "string" ? error : void 0;
+  const wrapperClasses = cx(
+    "ui-select-wrapper",
+    fullWidth && "ui-select-wrapper--full-width"
+  );
+  const selectClasses = cx(
+    "ui-select",
+    `ui-select--size-${size}`,
+    hasError && "ui-select--error",
+    className
+  );
+  return /* @__PURE__ */ jsxs6("div", { className: wrapperClasses, children: [
+    label && /* @__PURE__ */ jsx7(
+      "label",
+      {
+        htmlFor: id,
+        className: cx("ui-select-label", disabled && "ui-select-label--disabled"),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs6("div", { className: "ui-select-container", children: [
+      /* @__PURE__ */ jsxs6(
+        "select",
+        {
+          ref,
+          id,
+          disabled,
+          value,
+          defaultValue,
+          "aria-invalid": hasError,
+          "aria-describedby": helperText || errorMessage ? helperId : void 0,
+          className: selectClasses,
+          ...rest,
+          children: [
+            placeholder && /* @__PURE__ */ jsx7("option", { value: "", disabled: true, children: placeholder }),
+            options ? options.map((opt) => /* @__PURE__ */ jsx7("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value)) : children
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx7("span", { className: "ui-select-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx7(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx7("polyline", { points: "6 9 12 15 18 9" })
+        }
+      ) })
+    ] }),
+    (errorMessage || helperText) && /* @__PURE__ */ jsx7(
+      "span",
+      {
+        id: helperId,
+        className: cx("ui-select-helper", hasError && "ui-select-helper--error"),
+        children: errorMessage || helperText
+      }
+    )
+  ] });
+});
+Select.displayName = "Select";
+
+// src/Card/Card.tsx
+import React10, { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var CardBase = forwardRef10(function Card({
+  as: Component = "div",
+  variant = "outlined",
+  padding = "lg",
+  interactive = false,
+  className,
+  children,
+  ...rest
+}, ref) {
+  const classes = cx(
+    "ui-card",
+    `ui-card--variant-${variant}`,
+    `ui-card--padding-${padding}`,
+    interactive && "ui-card--interactive",
+    className
+  );
+  return React10.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      ...rest
+    },
+    children
+  );
+});
+var CardHeader = forwardRef10(function CardHeader2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx8("div", { ref, className: cx("ui-card__header", className), ...rest, children });
+});
+CardHeader.displayName = "Card.Header";
+var CardBody = forwardRef10(function CardBody2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx8("div", { ref, className: cx("ui-card__body", className), ...rest, children });
+});
+CardBody.displayName = "Card.Body";
+var CardFooter = forwardRef10(function CardFooter2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ jsx8("div", { ref, className: cx("ui-card__footer", className), ...rest, children });
+});
+CardFooter.displayName = "Card.Footer";
+var Card2 = Object.assign(CardBase, {
+  Header: CardHeader,
+  Body: CardBody,
+  Footer: CardFooter
+});
+Card2.displayName = "Card";
+
+// src/layout/Stack/Stack.tsx
+import React11, { forwardRef as forwardRef11, Children } from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var Stack = forwardRef11(function Stack2({
+  as: Component = "div",
+  direction = "vertical",
+  gap = "md",
+  align,
+  justify,
+  wrap = false,
+  divider,
+  className,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const resolvedGap = gap === "none" ? "0px" : getSpaceValue(gap);
+  const classes = cx(
+    "ui-stack",
+    `ui-stack--${direction}`,
+    align && `ui-stack--align-${align}`,
+    justify && `ui-stack--justify-${justify}`,
+    wrap && "ui-stack--wrap",
+    className
+  );
+  const combinedStyle = {
+    gap: resolvedGap,
+    ...style
+  };
+  let renderedChildren = children;
+  if (divider) {
+    const validChildren = Children.toArray(children).filter(Boolean);
+    renderedChildren = validChildren.map((child, index) => {
+      const isLast = index === validChildren.length - 1;
+      return /* @__PURE__ */ jsxs7(React11.Fragment, { children: [
+        child,
+        !isLast && (React11.isValidElement(divider) ? divider : /* @__PURE__ */ jsx9("div", { className: "ui-stack-divider", role: "separator" }))
+      ] }, index);
+    });
+  }
+  return React11.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      style: combinedStyle,
+      ...rest
+    },
+    renderedChildren
+  );
+});
+Stack.displayName = "Stack";
+
+// src/layout/Flex/Flex.tsx
+import React12, { forwardRef as forwardRef12 } from "react";
+var Flex = forwardRef12(function Flex2({
+  as: Component = "div",
+  direction = "row",
+  align,
+  justify,
+  gap,
+  wrap,
+  inline = false,
+  className,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const resolvedGap = getSpaceValue(gap);
+  const wrapClass = typeof wrap === "boolean" ? wrap ? "ui-flex--wrap" : "ui-flex--wrap-nowrap" : wrap ? `ui-flex--wrap-${wrap}` : void 0;
+  const classes = cx(
+    "ui-flex",
+    inline && "ui-flex--inline",
+    direction && `ui-flex--direction-${direction}`,
+    align && `ui-flex--align-${align}`,
+    justify && `ui-flex--justify-${justify}`,
+    wrapClass,
+    className
+  );
+  const combinedStyle = {
+    gap: resolvedGap,
+    ...style
+  };
+  return React12.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      style: combinedStyle,
+      ...rest
+    },
+    children
+  );
+});
+Flex.displayName = "Flex";
+
+// src/layout/Grid/Grid.tsx
+import React13, { forwardRef as forwardRef13 } from "react";
+var Grid = forwardRef13(function Grid2({
+  as: Component = "div",
+  columns,
+  minChildWidth,
+  gap = "md",
+  rowGap,
+  columnGap,
+  align,
+  justify,
+  className,
+  style,
+  children,
+  ...rest
+}, ref) {
+  let gridTemplateColumns;
+  if (minChildWidth) {
+    const minWidth = typeof minChildWidth === "number" ? `${minChildWidth}px` : minChildWidth;
+    gridTemplateColumns = `repeat(auto-fit, minmax(${minWidth}, 1fr))`;
+  } else if (typeof columns === "number") {
+    gridTemplateColumns = `repeat(${columns}, minmax(0, 1fr))`;
+  } else if (typeof columns === "string") {
+    gridTemplateColumns = columns;
+  }
+  const classes = cx(
+    "ui-grid",
+    align && `ui-grid--align-${align}`,
+    justify && `ui-grid--justify-${justify}`,
+    className
+  );
+  const combinedStyle = {
+    gridTemplateColumns,
+    gap: getSpaceValue(gap),
+    rowGap: getSpaceValue(rowGap),
+    columnGap: getSpaceValue(columnGap),
+    ...style
+  };
+  return React13.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      style: combinedStyle,
+      ...rest
+    },
+    children
+  );
+});
+Grid.displayName = "Grid";
+
+// src/layout/Container/Container.tsx
+import React14, { forwardRef as forwardRef14 } from "react";
+var Container = forwardRef14(function Container2({
+  as: Component = "div",
+  size = "lg",
+  centered = true,
+  padding = "md",
+  className,
+  style,
+  children,
+  ...rest
+}, ref) {
+  const classes = cx(
+    "ui-container",
+    `ui-container--size-${size}`,
+    centered && "ui-container--centered",
+    className
+  );
+  let paddingValue;
+  if (typeof padding === "boolean") {
+    paddingValue = padding ? "var(--ui-space-md)" : "0";
+  } else if (padding) {
+    paddingValue = getSpaceValue(padding);
+  }
+  const combinedStyle = {
+    paddingLeft: paddingValue,
+    paddingRight: paddingValue,
+    ...style
+  };
+  return React14.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      style: combinedStyle,
+      ...rest
+    },
+    children
+  );
+});
+Container.displayName = "Container";
+
+// src/theme/ThemeProvider.tsx
+import { createContext, useContext, useEffect as useEffect2, useState, useMemo } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var ThemeContext = createContext(void 0);
+function ThemeProvider({
+  children,
+  defaultTheme = "light",
+  storageKey = "atelier-ui-theme",
+  attribute = "data-theme",
+  enableSystem = true
+}) {
+  const [theme, setThemeState] = useState(() => {
+    if (typeof window === "undefined") return defaultTheme;
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored === "light" || stored === "dark" || stored === "system") {
+        return stored;
+      }
+    } catch {
+    }
+    return defaultTheme;
+  });
+  const [resolvedTheme, setResolvedTheme] = useState("light");
+  useEffect2(() => {
+    const root = document.documentElement;
+    const getSystemTheme = () => {
+      return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    };
+    const active = theme === "system" && enableSystem ? getSystemTheme() : theme === "dark" ? "dark" : "light";
+    setResolvedTheme(active);
+    root.setAttribute(attribute, active);
+    if (theme === "system" && enableSystem) {
+      const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      const listener = (e) => {
+        const nextTheme = e.matches ? "dark" : "light";
+        setResolvedTheme(nextTheme);
+        root.setAttribute(attribute, nextTheme);
+      };
+      mediaQuery.addEventListener("change", listener);
+      return () => mediaQuery.removeEventListener("change", listener);
+    }
+  }, [theme, attribute, enableSystem]);
+  const setTheme = (newTheme) => {
+    try {
+      localStorage.setItem(storageKey, newTheme);
+    } catch {
+    }
+    setThemeState(newTheme);
+  };
+  const toggleTheme = () => {
+    setTheme(resolvedTheme === "light" ? "dark" : "light");
+  };
+  const value = useMemo(
+    () => ({
+      theme,
+      resolvedTheme,
+      setTheme,
+      toggleTheme
+    }),
+    [theme, resolvedTheme]
+  );
+  return /* @__PURE__ */ jsx10(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within an Atelier UI ThemeProvider");
+  }
+  return context;
+}
+export {
+  Button,
+  Card2 as Card,
+  Checkbox,
+  Container,
+  Divider,
+  Flex,
+  Grid,
+  Heading,
+  Icon,
+  Input,
+  Link,
+  Select,
+  Stack,
+  Text,
+  ThemeProvider,
+  cx,
+  getSpaceValue,
+  useTheme
+};