atelier-ui-react 1.0.2

package/dist/index.cjs

@@ -0,0 +1,909 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  Card: () => Card2,
+  Checkbox: () => Checkbox,
+  Container: () => Container,
+  Divider: () => Divider,
+  Flex: () => Flex,
+  Grid: () => Grid,
+  Heading: () => Heading,
+  Icon: () => Icon,
+  Input: () => Input,
+  Link: () => Link,
+  Select: () => Select,
+  Stack: () => Stack,
+  Text: () => Text,
+  ThemeProvider: () => ThemeProvider,
+  cx: () => cx,
+  getSpaceValue: () => getSpaceValue,
+  useTheme: () => useTheme
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Text/Text.tsx
+var import_react = __toESM(require("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 = (0, import_react.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 import_react.default.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      ...rest
+    },
+    children
+  );
+});
+Text.displayName = "Text";
+
+// src/Heading/Heading.tsx
+var import_react2 = __toESM(require("react"));
+var defaultLevelSizeMap = {
+  1: "3xl",
+  2: "2xl",
+  3: "xl",
+  4: "lg",
+  5: "md",
+  6: "sm"
+};
+var Heading = (0, import_react2.forwardRef)(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 import_react2.default.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      ...rest
+    },
+    children
+  );
+});
+Heading.displayName = "Heading";
+
+// src/Icon/Icon.tsx
+var import_react3 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var sizeMap = {
+  xs: 14,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 32
+};
+var Icon = (0, import_react3.forwardRef)(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__ */ (0, import_jsx_runtime.jsx)("span", { className: classes, style: combinedStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Component,
+      {
+        ref,
+        width: pixelSize,
+        height: pixelSize,
+        "aria-hidden": "true",
+        ...rest
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: classes, style: combinedStyle, "aria-hidden": "true", children });
+});
+Icon.displayName = "Icon";
+
+// src/Divider/Divider.tsx
+var import_react4 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Divider = (0, import_react4.forwardRef)(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__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      ref,
+      role: "separator",
+      "aria-orientation": orientation,
+      className: classes,
+      style: combinedStyle,
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "ui-divider__line" }),
+        content && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ui-divider__content", children: content }),
+        content && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "ui-divider__line" })
+      ]
+    }
+  );
+});
+Divider.displayName = "Divider";
+
+// src/Button/Button.tsx
+var import_react5 = __toESM(require("react"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Button = (0, import_react5.forwardRef)(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 import_react5.default.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      ...buttonProps,
+      ...rest
+    },
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ui-btn__spinner", "aria-hidden": "true" }) : iconLeft && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ui-btn__icon-left", children: iconLeft }),
+      children && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ui-btn__label", children }),
+      !loading && iconRight && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "ui-btn__icon-right", children: iconRight })
+    ] })
+  );
+});
+Button.displayName = "Button";
+
+// src/Link/Link.tsx
+var import_react6 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Link = (0, import_react6.forwardRef)(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__ */ (0, import_jsx_runtime4.jsxs)(
+    "a",
+    {
+      ref,
+      className: classes,
+      target: resolvedTarget,
+      rel: resolvedRel,
+      ...rest,
+      children: [
+        iconLeft && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "ui-link__icon-left", children: iconLeft }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children }),
+        iconRight && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "ui-link__icon-right", children: iconRight }),
+        external && !iconRight && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "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__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "15 3 21 3 21 9" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+Link.displayName = "Link";
+
+// src/Input/Input.tsx
+var import_react7 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Input = (0, import_react7.forwardRef)(function Input2({
+  size = "md",
+  variant = "default",
+  label,
+  helperText,
+  error,
+  leftIcon,
+  rightIcon,
+  fullWidth = false,
+  disabled = false,
+  id: explicitId,
+  className,
+  ...rest
+}, ref) {
+  const generatedId = (0, import_react7.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__ */ (0, import_jsx_runtime5.jsxs)("div", { className: wrapperClasses, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "label",
+      {
+        htmlFor: id,
+        className: cx("ui-input-label", disabled && "ui-input-label--disabled"),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "ui-input-container", children: [
+      leftIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ui-input__icon ui-input__icon--left", children: leftIcon }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "input",
+        {
+          ref,
+          id,
+          disabled,
+          readOnly: isReadOnly,
+          "aria-invalid": hasError,
+          "aria-describedby": helperText || errorMessage ? helperId : void 0,
+          className: inputClasses,
+          ...rest
+        }
+      ),
+      rightIcon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ui-input__icon ui-input__icon--right", children: rightIcon })
+    ] }),
+    (errorMessage || helperText) && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "span",
+      {
+        id: helperId,
+        className: cx("ui-input-helper", hasError && "ui-input-helper--error"),
+        children: errorMessage || helperText
+      }
+    )
+  ] });
+});
+Input.displayName = "Input";
+
+// src/Checkbox/Checkbox.tsx
+var import_react8 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Checkbox = (0, import_react8.forwardRef)(function Checkbox2({
+  size = "md",
+  label,
+  description,
+  indeterminate = false,
+  checked,
+  defaultChecked,
+  disabled = false,
+  error,
+  className,
+  onChange,
+  readOnly,
+  ...rest
+}, forwardedRef) {
+  const innerRef = (0, import_react8.useRef)(null);
+  const inputRef = forwardedRef || innerRef;
+  (0, import_react8.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__ */ (0, import_jsx_runtime6.jsxs)("label", { className: wrapperClasses, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        type: "checkbox",
+        checked,
+        defaultChecked,
+        disabled,
+        readOnly: isReadOnly,
+        onChange,
+        className: "ui-checkbox-input",
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: boxClasses, "aria-hidden": "true", children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "ui-checkbox-icon", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className: "ui-checkbox-icon", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("polyline", { points: "20 6 9 17 4 12" }) }) }),
+    (label || description) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "ui-checkbox-content", children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ui-checkbox-label", children: label }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ui-checkbox-desc", children: description })
+    ] })
+  ] });
+});
+Checkbox.displayName = "Checkbox";
+
+// src/Select/Select.tsx
+var import_react9 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Select = (0, import_react9.forwardRef)(function Select2({
+  options,
+  placeholder,
+  size = "md",
+  label,
+  helperText,
+  error,
+  fullWidth = false,
+  disabled = false,
+  id: explicitId,
+  className,
+  children,
+  value,
+  defaultValue,
+  ...rest
+}, ref) {
+  const generatedId = (0, import_react9.useId)();
+  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__ */ (0, import_jsx_runtime7.jsxs)("div", { className: wrapperClasses, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "label",
+      {
+        htmlFor: id,
+        className: cx("ui-select-label", disabled && "ui-select-label--disabled"),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "ui-select-container", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+        "select",
+        {
+          ref,
+          id,
+          disabled,
+          value,
+          defaultValue,
+          "aria-invalid": hasError,
+          "aria-describedby": helperText || errorMessage ? helperId : void 0,
+          className: selectClasses,
+          ...rest,
+          children: [
+            placeholder && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: "", disabled: true, children: placeholder }),
+            options ? options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: opt.value, disabled: opt.disabled, children: opt.label }, opt.value)) : children
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "ui-select-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "6 9 12 15 18 9" })
+        }
+      ) })
+    ] }),
+    (errorMessage || helperText) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "span",
+      {
+        id: helperId,
+        className: cx("ui-select-helper", hasError && "ui-select-helper--error"),
+        children: errorMessage || helperText
+      }
+    )
+  ] });
+});
+Select.displayName = "Select";
+
+// src/Card/Card.tsx
+var import_react10 = __toESM(require("react"));
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var CardBase = (0, import_react10.forwardRef)(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 import_react10.default.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      ...rest
+    },
+    children
+  );
+});
+var CardHeader = (0, import_react10.forwardRef)(function CardHeader2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref, className: cx("ui-card__header", className), ...rest, children });
+});
+CardHeader.displayName = "Card.Header";
+var CardBody = (0, import_react10.forwardRef)(function CardBody2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref, className: cx("ui-card__body", className), ...rest, children });
+});
+CardBody.displayName = "Card.Body";
+var CardFooter = (0, import_react10.forwardRef)(function CardFooter2({ className, children, ...rest }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("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
+var import_react11 = __toESM(require("react"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Stack = (0, import_react11.forwardRef)(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 = import_react11.Children.toArray(children).filter(Boolean);
+    renderedChildren = validChildren.map((child, index) => {
+      const isLast = index === validChildren.length - 1;
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react11.default.Fragment, { children: [
+        child,
+        !isLast && (import_react11.default.isValidElement(divider) ? divider : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "ui-stack-divider", role: "separator" }))
+      ] }, index);
+    });
+  }
+  return import_react11.default.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      style: combinedStyle,
+      ...rest
+    },
+    renderedChildren
+  );
+});
+Stack.displayName = "Stack";
+
+// src/layout/Flex/Flex.tsx
+var import_react12 = __toESM(require("react"));
+var Flex = (0, import_react12.forwardRef)(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 import_react12.default.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      style: combinedStyle,
+      ...rest
+    },
+    children
+  );
+});
+Flex.displayName = "Flex";
+
+// src/layout/Grid/Grid.tsx
+var import_react13 = __toESM(require("react"));
+var Grid = (0, import_react13.forwardRef)(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 import_react13.default.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      style: combinedStyle,
+      ...rest
+    },
+    children
+  );
+});
+Grid.displayName = "Grid";
+
+// src/layout/Container/Container.tsx
+var import_react14 = __toESM(require("react"));
+var Container = (0, import_react14.forwardRef)(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 import_react14.default.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      style: combinedStyle,
+      ...rest
+    },
+    children
+  );
+});
+Container.displayName = "Container";
+
+// src/theme/ThemeProvider.tsx
+var import_react15 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ThemeContext = (0, import_react15.createContext)(void 0);
+function ThemeProvider({
+  children,
+  defaultTheme = "light",
+  storageKey = "atelier-ui-theme",
+  attribute = "data-theme",
+  enableSystem = true
+}) {
+  const [theme, setThemeState] = (0, import_react15.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] = (0, import_react15.useState)("light");
+  (0, import_react15.useEffect)(() => {
+    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 = (0, import_react15.useMemo)(
+    () => ({
+      theme,
+      resolvedTheme,
+      setTheme,
+      toggleTheme
+    }),
+    [theme, resolvedTheme]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = (0, import_react15.useContext)(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within an Atelier UI ThemeProvider");
+  }
+  return context;
+}