@xaui/hybrid 0.0.2

package/README.md

@@ -0,0 +1,16 @@
+# @xaui/hybrid
+
+The documentation for `@xaui/hybrid` is not ready yet (“no doc yet”). In the meantime, explore the source under `packages/hybrid/src` to inspect the React/ReactDOM components, the `useXUITheme` hooks, and the `framer-motion`/`tailwindcss` integrations.
+
+## Installation
+
+```bash
+pnpm add @xaui/hybrid
+```
+
+## Peer dependencies
+
+- `react` ^18 || ^19
+- `react-dom` ^18 || ^19
+- `framer-motion` ^11
+- `tailwindcss` ^4

package/dist/button/index.cjs

@@ -0,0 +1,692 @@
+"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/components/button/index.ts
+var button_exports = {};
+__export(button_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(button_exports);
+
+// src/components/button/button.tsx
+var import_react5 = require("react");
+var import_framer_motion3 = require("framer-motion");
+
+// src/components/indicator/circular-activity-indicator.tsx
+var import_react3 = require("react");
+var import_framer_motion = require("framer-motion");
+
+// src/core/theme-context.tsx
+var import_react2 = __toESM(require("react"), 1);
+
+// src/core/theme-hooks.ts
+var import_react = require("react");
+function useXUITheme() {
+  const theme = (0, import_react.useContext)(XUIThemeContext);
+  if (!theme) {
+    throw new Error("useXUITheme must be used within XUIProvider");
+  }
+  return theme;
+}
+
+// src/core/theme-context.tsx
+var import_theme = require("@xaui/core/theme");
+var import_jsx_runtime = require("react/jsx-runtime");
+var XUIThemeContext = (0, import_react2.createContext)(null);
+
+// src/components/indicator/indicator.style.ts
+var import_tailwind_variants = require("tailwind-variants");
+var indicatorStyles = (0, import_tailwind_variants.tv)({
+  slots: {
+    base: "relative flex items-center justify-center overflow-hidden",
+    track: "overflow-hidden",
+    indicator: ""
+  },
+  variants: {
+    variant: {
+      linear: {
+        base: "w-full block",
+        track: "relative w-full h-full overflow-hidden",
+        indicator: "absolute top-0 bottom-0 left-0 transition-all"
+      },
+      circular: {
+        base: "inline-flex shrink-0",
+        track: "fill-none w-auto h-auto",
+        indicator: "fill-none w-auto h-auto"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "linear"
+  }
+});
+
+// src/components/indicator/circular-activity-indicator.tsx
+var import_core2 = require("@xaui/core");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DURATION = 1.5;
+var EASING = [0.4, 0, 0.7, 1];
+var bezierEasing = (t) => {
+  const [x1, y1, x2, y2] = EASING;
+  const cx = 3 * x1;
+  const bx = 3 * (x2 - x1) - cx;
+  const ax = 1 - cx - bx;
+  const cy = 3 * y1;
+  const by = 3 * (y2 - y1) - cy;
+  const ay = 1 - cy - by;
+  const sampleCurveX = (u2) => ((ax * u2 + bx) * u2 + cx) * u2;
+  const sampleCurveY = (u2) => ((ay * u2 + by) * u2 + cy) * u2;
+  let u = t;
+  for (let i = 0; i < 8; i++) {
+    const x = sampleCurveX(u) - t;
+    if (Math.abs(x) < 1e-3) break;
+    const slope = 3 * ax * u * u + 2 * bx * u + cx;
+    if (Math.abs(slope) < 1e-6) break;
+    u -= x / slope;
+  }
+  return sampleCurveY(u);
+};
+var generateKeyframes = (index, frames) => {
+  const rotationValue = index ? 360 - 15 : -(180 - 15);
+  const direction = index ? -1 : 1;
+  return Array.from({ length: frames }, (_, frameIndex) => {
+    let progress = 2 * frameIndex / (frames - 1);
+    if (progress > 1) progress = 2 - progress;
+    return direction * (180 - 30) * bezierEasing(progress) + rotationValue;
+  });
+};
+var CircularActivityIndicator = ({
+  size = 40,
+  themeColor = "primary",
+  color,
+  backgroundColor,
+  disableAnimation = false,
+  showTrack = true,
+  className
+}) => {
+  const { base } = indicatorStyles({ variant: "circular" });
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core2.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const resolvedColor = color ?? colorScheme.main;
+  const resolvedBackground = showTrack ? backgroundColor ?? colorScheme.background : "transparent";
+  const strokeWidth = size * 0.1;
+  const frames = Math.round(60 * DURATION);
+  const times = (0, import_react3.useMemo)(
+    () => Array.from({ length: frames }, (_, i) => i / (frames - 1)),
+    [frames]
+  );
+  const outerStart = 0 + 30 + 15;
+  const outerEnd = 2 * 360 + 30 + 15;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "div",
+    {
+      className: base({ className }),
+      style: { width: size, height: size, position: "relative" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            style: {
+              width: size,
+              height: size,
+              borderRadius: size / 2,
+              borderWidth: strokeWidth,
+              borderStyle: "solid",
+              borderColor: resolvedBackground,
+              boxSizing: "border-box"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            style: {
+              width: size,
+              height: size,
+              position: "absolute",
+              top: 0,
+              left: 0
+            },
+            children: [0, 1].map((index) => {
+              const keyframes = generateKeyframes(index, frames);
+              return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    width: size,
+                    height: size
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    import_framer_motion.motion.div,
+                    {
+                      style: {
+                        width: size,
+                        height: size,
+                        transformOrigin: "50% 50%"
+                      },
+                      initial: { rotate: outerStart },
+                      animate: disableAnimation ? { rotate: outerStart } : { rotate: outerEnd },
+                      transition: disableAnimation ? { duration: 0 } : {
+                        type: "tween",
+                        duration: DURATION,
+                        ease: "linear",
+                        repeat: Infinity,
+                        repeatType: "loop",
+                        repeatDelay: 0
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "div",
+                        {
+                          style: {
+                            width: size,
+                            height: size / 2,
+                            overflow: "hidden",
+                            position: "absolute",
+                            ...index ? { top: size / 2 } : {}
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                            import_framer_motion.motion.div,
+                            {
+                              style: {
+                                width: size,
+                                height: size,
+                                transformOrigin: "50% 50%"
+                              },
+                              initial: {
+                                y: index ? -size / 2 : 0,
+                                rotate: keyframes[0]
+                              },
+                              animate: disableAnimation ? { y: index ? -size / 2 : 0, rotate: keyframes[0] } : { y: index ? -size / 2 : 0, rotate: keyframes },
+                              transition: disableAnimation ? { duration: 0 } : {
+                                type: "tween",
+                                duration: DURATION,
+                                ease: "linear",
+                                repeat: Infinity,
+                                repeatType: "loop",
+                                repeatDelay: 0,
+                                times
+                              },
+                              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                "div",
+                                {
+                                  style: {
+                                    width: size,
+                                    height: size / 2,
+                                    overflow: "hidden"
+                                  },
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                                    "div",
+                                    {
+                                      style: {
+                                        width: size,
+                                        height: size,
+                                        borderColor: resolvedColor,
+                                        borderWidth: strokeWidth,
+                                        borderStyle: "solid",
+                                        borderRadius: size / 2,
+                                        boxSizing: "border-box"
+                                      }
+                                    }
+                                  )
+                                }
+                              )
+                            }
+                          )
+                        }
+                      )
+                    }
+                  )
+                },
+                index
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/indicator/linear-activity-indicator.tsx
+var import_framer_motion2 = require("framer-motion");
+var import_core4 = require("@xaui/core");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DURATION_SECONDS = 2;
+var PRIMARY_TRANSLATE_OFFSET = 1.45167;
+var SECONDARY_TRANSLATE_OFFSET = 0.548889;
+var toPercent = (value, offset) => `${(value - offset) * 100}%`;
+var buildTimes = (durations) => {
+  const total = durations.reduce((sum, duration) => sum + duration, 0);
+  let acc = 0;
+  const intermediateTimes = durations.slice(0, -1).map((duration) => {
+    acc += duration;
+    return acc / total;
+  });
+  return [0, ...intermediateTimes, 1];
+};
+var primaryTranslateKeyframes = [0, 0, 0.836714, 2.00611].map(
+  (value) => toPercent(value, PRIMARY_TRANSLATE_OFFSET)
+);
+var primaryTranslateTimes = buildTimes([400, 783, 817]);
+var primaryTranslateEase = [
+  "linear",
+  [0.5, 0, 0.701732, 0.495819],
+  [0.302435, 0.381352, 0.55, 0.956352]
+];
+var primaryScaleKeyframes = [0.08, 0.08, 0.661479, 0.08];
+var primaryScaleTimes = buildTimes([733, 650, 617]);
+var primaryScaleEase = [
+  "linear",
+  [0.334731, 0.12482, 0.785844, 1],
+  [0.06, 0.11, 0.6, 1]
+];
+var secondaryTranslateKeyframes = [0, 0.376519, 0.843862, 1.60278].map(
+  (value) => toPercent(value, SECONDARY_TRANSLATE_OFFSET)
+);
+var secondaryTranslateTimes = buildTimes([500, 467, 1033]);
+var secondaryTranslateEase = [
+  [0.15, 0, 0.515058, 0.409685],
+  [0.31033, 0.284058, 0.8, 0.733712],
+  [0.4, 0.627035, 0.6, 0.902026]
+];
+var secondaryScaleKeyframes = [0.08, 0.457104, 0.72796, 0.08];
+var secondaryScaleTimes = buildTimes([383, 500, 1117]);
+var secondaryScaleEase = [
+  [0.205028, 0.057051, 0.57661, 0.453971],
+  [0.152313, 0.196432, 0.648374, 1.00432],
+  [0.257759, -3163e-6, 0.211762, 1.38179]
+];
+var LinearActivityIndicator = ({
+  size = 4,
+  themeColor = "primary",
+  color,
+  backgroundColor,
+  disableAnimation = false,
+  borderRadius = 0,
+  showTrack = true,
+  className
+}) => {
+  const { base, track } = indicatorStyles({ variant: "linear" });
+  const theme = useXUITheme();
+  const safeThemeColor = (0, import_core4.getSafeThemeColor)(themeColor);
+  const colorScheme = theme.colors[safeThemeColor];
+  const mainColor = color ?? colorScheme.main;
+  const trackColor = showTrack ? backgroundColor ?? colorScheme.background : "transparent";
+  const radius = Math.max(0, borderRadius);
+  const primaryAnimate = disableAnimation ? { x: primaryTranslateKeyframes[0], scaleX: primaryScaleKeyframes[0] } : { x: primaryTranslateKeyframes, scaleX: primaryScaleKeyframes };
+  const secondaryAnimate = disableAnimation ? { x: secondaryTranslateKeyframes[0], scaleX: secondaryScaleKeyframes[0] } : { x: secondaryTranslateKeyframes, scaleX: secondaryScaleKeyframes };
+  const primaryTransition = disableAnimation ? { x: { duration: 0 }, scaleX: { duration: 0 } } : {
+    x: {
+      duration: DURATION_SECONDS,
+      ease: primaryTranslateEase,
+      times: primaryTranslateTimes,
+      repeat: Infinity,
+      repeatType: "loop"
+    },
+    scaleX: {
+      duration: DURATION_SECONDS,
+      ease: primaryScaleEase,
+      times: primaryScaleTimes,
+      repeat: Infinity,
+      repeatType: "loop"
+    }
+  };
+  const secondaryTransition = disableAnimation ? { x: { duration: 0 }, scaleX: { duration: 0 } } : {
+    x: {
+      duration: DURATION_SECONDS,
+      ease: secondaryTranslateEase,
+      times: secondaryTranslateTimes,
+      repeat: Infinity,
+      repeatType: "loop"
+    },
+    scaleX: {
+      duration: DURATION_SECONDS,
+      ease: secondaryScaleEase,
+      times: secondaryScaleTimes,
+      repeat: Infinity,
+      repeatType: "loop"
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: base({ className }), style: { height: size }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      className: track(),
+      style: {
+        position: "relative",
+        height: size,
+        backgroundColor: trackColor,
+        borderRadius: radius,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_framer_motion2.motion.div,
+          {
+            initial: { x: primaryTranslateKeyframes[0], scaleX: primaryScaleKeyframes[0] },
+            animate: primaryAnimate,
+            transition: primaryTransition,
+            style: {
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: size,
+              backgroundColor: mainColor,
+              borderRadius: radius,
+              transformOrigin: "50% 50%"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_framer_motion2.motion.div,
+          {
+            initial: {
+              x: secondaryTranslateKeyframes[0],
+              scaleX: secondaryScaleKeyframes[0]
+            },
+            animate: secondaryAnimate,
+            transition: secondaryTransition,
+            style: {
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: size,
+              backgroundColor: mainColor,
+              borderRadius: radius,
+              transformOrigin: "50% 50%"
+            }
+          }
+        )
+      ]
+    }
+  ) });
+};
+
+// src/components/indicator/indicator.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ActivityIndicator = (props) => {
+  const { variant = "circular", ...rest } = props;
+  if (variant === "circular") {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { role: "progressbar", "aria-label": "Loading", className: "inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(CircularActivityIndicator, { ...rest }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { role: "progressbar", "aria-label": "Loading", className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LinearActivityIndicator, { ...rest }) });
+};
+
+// src/components/button/button.style.ts
+var import_tailwind_variants2 = require("tailwind-variants");
+var buttonStyles = (0, import_tailwind_variants2.tv)({
+  slots: {
+    base: [
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "gap-2",
+      "overflow-hidden",
+      "font-medium",
+      "text-center",
+      "outline-none",
+      "cursor-pointer",
+      "select-none",
+      "transition-all",
+      "subpixel-antialiased",
+      "tap-highlight-transparent",
+      "transform-gpu"
+    ]
+  },
+  variants: {
+    fullWidth: {
+      true: {
+        base: "w-full"
+      },
+      false: {
+        base: "inline-flex"
+      }
+    },
+    isDisabled: {
+      true: {
+        base: "opacity-50 cursor-not-allowed"
+      }
+    }
+  },
+  defaultVariants: {
+    fullWidth: false
+  }
+});
+
+// src/components/button/button.hook.ts
+var import_react4 = require("react");
+var useButtonStyles = (themeColor, variant, size, radius) => {
+  const theme = useXUITheme();
+  const colorScheme = theme.colors[themeColor];
+  const sizeStyles = (0, import_react4.useMemo)(() => {
+    const sizes = {
+      xs: {
+        paddingLeft: `${theme.spacing.sm}px`,
+        paddingRight: `${theme.spacing.sm}px`,
+        paddingTop: `${theme.spacing.xs}px`,
+        paddingBottom: `${theme.spacing.xs}px`,
+        minHeight: "28px",
+        fontSize: `${theme.fontSizes.xs}px`,
+        lineHeight: "1"
+      },
+      sm: {
+        paddingLeft: `${theme.spacing.md}px`,
+        paddingRight: `${theme.spacing.md}px`,
+        paddingTop: `${theme.spacing.xs}px`,
+        paddingBottom: `${theme.spacing.xs}px`,
+        minHeight: "32px",
+        fontSize: `${theme.fontSizes.sm}px`,
+        lineHeight: "1"
+      },
+      md: {
+        paddingLeft: `${theme.spacing.md}px`,
+        paddingRight: `${theme.spacing.md}px`,
+        paddingTop: `${theme.spacing.sm}px`,
+        paddingBottom: `${theme.spacing.sm}px`,
+        minHeight: "40px",
+        fontSize: `${theme.fontSizes.md}px`,
+        lineHeight: "1"
+      },
+      lg: {
+        paddingLeft: `${theme.spacing.lg}px`,
+        paddingRight: `${theme.spacing.lg}px`,
+        paddingTop: `${theme.spacing.md}px`,
+        paddingBottom: `${theme.spacing.md}px`,
+        minHeight: "48px",
+        fontSize: `${theme.fontSizes.lg}px`,
+        lineHeight: "1"
+      }
+    };
+    return sizes[size];
+  }, [size, theme]);
+  const radiusStyles = (0, import_react4.useMemo)(() => {
+    const radii = {
+      none: theme.borderRadius.none,
+      sm: theme.borderRadius.sm,
+      md: theme.borderRadius.md,
+      lg: theme.borderRadius.lg,
+      full: theme.borderRadius.full
+    };
+    return { borderRadius: `${radii[radius]}px` };
+  }, [radius, theme]);
+  const variantStyles = (0, import_react4.useMemo)(() => {
+    const styles = {
+      solid: {
+        backgroundColor: colorScheme.main,
+        borderWidth: "0",
+        color: colorScheme.foreground
+      },
+      outlined: {
+        backgroundColor: "transparent",
+        borderWidth: `${theme.borderWidth.md}px`,
+        borderStyle: "solid",
+        borderColor: colorScheme.main,
+        color: colorScheme.main
+      },
+      flat: {
+        backgroundColor: colorScheme.background,
+        borderWidth: "0",
+        color: colorScheme.main
+      },
+      light: {
+        backgroundColor: "transparent",
+        borderWidth: "0",
+        color: colorScheme.main
+      },
+      elevated: {
+        backgroundColor: colorScheme.main,
+        borderWidth: "0",
+        color: colorScheme.foreground,
+        boxShadow: typeof theme.shadows.md === "string" ? theme.shadows.md : "0 2px 4px rgba(0,0,0,0.1)"
+      },
+      faded: {
+        backgroundColor: `${colorScheme.background}90`,
+        borderWidth: `${theme.borderWidth.md}px`,
+        borderStyle: "solid",
+        borderColor: colorScheme.main,
+        color: colorScheme.main
+      }
+    };
+    return styles[variant];
+  }, [variant, colorScheme, theme]);
+  const textColor = (0, import_react4.useMemo)(() => {
+    if (variant === "solid" || variant === "elevated") {
+      return colorScheme.foreground;
+    }
+    return colorScheme.main;
+  }, [variant, colorScheme]);
+  const spinnerSize = (0, import_react4.useMemo)(() => {
+    const sizes = {
+      xs: 14,
+      sm: 16,
+      md: 18,
+      lg: 20
+    };
+    return sizes[size];
+  }, [size]);
+  return {
+    sizeStyles,
+    radiusStyles,
+    variantStyles,
+    textColor,
+    spinnerSize
+  };
+};
+
+// src/components/button/button.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Button = ({
+  children,
+  themeColor = "default",
+  variant = "solid",
+  size = "md",
+  radius = "md",
+  startContent,
+  endContent,
+  spinnerPlacement = "start",
+  fullWidth = false,
+  isDisabled = false,
+  isLoading = false,
+  className,
+  style: userStyle,
+  onMouseLeave,
+  onMouseDown,
+  onMouseUp,
+  ...restProps
+}) => {
+  const [isPressed, setIsPressed] = (0, import_react5.useState)(false);
+  const { base } = buttonStyles({ fullWidth, isDisabled });
+  const { sizeStyles, radiusStyles, variantStyles, textColor, spinnerSize } = useButtonStyles(themeColor, variant, size, radius);
+  const handleMouseDown = (event) => {
+    if (!isDisabled && !isLoading) {
+      setIsPressed(true);
+    }
+    onMouseDown?.(event);
+  };
+  const handleMouseUp = (event) => {
+    if (!isDisabled && !isLoading) {
+      setIsPressed(false);
+    }
+    onMouseUp?.(event);
+  };
+  const handleMouseLeave = (event) => {
+    if (!isDisabled && !isLoading) {
+      setIsPressed(false);
+    }
+    onMouseLeave?.(event);
+  };
+  const spinnerElement = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    ActivityIndicator,
+    {
+      variant: "circular",
+      showTrack: false,
+      themeColor: variant === "solid" || variant === "elevated" ? void 0 : themeColor,
+      color: variant === "solid" || variant === "elevated" ? textColor : void 0,
+      size: spinnerSize
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_framer_motion3.motion.button,
+    {
+      type: "button",
+      className: base({ className }),
+      disabled: isDisabled || isLoading,
+      onMouseLeave: handleMouseLeave,
+      onMouseDown: handleMouseDown,
+      onMouseUp: handleMouseUp,
+      ...restProps,
+      style: {
+        ...sizeStyles,
+        ...radiusStyles,
+        ...variantStyles,
+        ...userStyle
+      },
+      animate: {
+        scale: isPressed ? 0.95 : 1,
+        opacity: isPressed ? 0.8 : 1
+      },
+      transition: {
+        duration: 0.1,
+        ease: "easeInOut"
+      },
+      children: [
+        startContent,
+        isLoading && spinnerPlacement === "start" && spinnerElement,
+        children,
+        isLoading && spinnerPlacement === "end" && spinnerElement,
+        endContent
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});