@edux-design/buttons 0.1.1 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @edux-design/buttons
 
+## 0.1.3
+
+### Patch Changes
+
+- Add shared control height tokens and update Button to use token-backed size classes.
+
+## 0.1.2
+
+### Patch Changes
+
+- Button Counter
+
 ## 0.1.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edux-design/buttons",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "private": false,
   "sideEffects": [
     "**/*.css"

package/src/demo/ButtonCounter.stories.jsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { ButtonCounter } from "./../index";
+
+export default {
+  title: "Components/Button",
+  component: ButtonCounter,
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["small", "medium", "large"],
+    },
+    isSecondary: { control: "boolean" },
+    isDanger: { control: "boolean" },
+    isBare: { control: "boolean" },
+    isStretched: { control: "boolean" },
+    disabled: { control: "boolean" },
+    isEditable: { control: "boolean" },
+    inputProps: { control: false },
+    defaultValue: { control: "number" },
+    min: { control: "number" },
+    max: { control: "number" },
+    step: { control: "number" },
+    value: { control: false },
+    onChange: { control: false },
+    decrementIcon: { control: false },
+    incrementIcon: { control: false },
+    decrementButtonProps: { control: false },
+    incrementButtonProps: { control: false },
+    children: { control: false },
+  },
+};
+
+const Template = (args) => <ButtonCounter {...args} />;
+
+export const PrimaryCounter = Template.bind({});
+PrimaryCounter.args = {
+  defaultValue: 1,
+  size: "medium",
+};
+
+export const EditableCounter = Template.bind({});
+EditableCounter.args = {
+  defaultValue: 1,
+  isEditable: true,
+};
+
+export const SecondaryCounter = Template.bind({});
+SecondaryCounter.args = {
+  defaultValue: 1,
+  isSecondary: true,
+};
+
+export const DangerCounter = Template.bind({});
+DangerCounter.args = {
+  defaultValue: 1,
+  isDanger: true,
+};
+
+export const BareCounter = Template.bind({});
+BareCounter.args = {
+  defaultValue: 1,
+  isBare: true,
+};
+
+export const DangerBareCounter = Template.bind({});
+DangerBareCounter.args = {
+  defaultValue: 1,
+  isBare: true,
+  isDanger: true,
+};
+
+export const DisabledCounter = Template.bind({});
+DisabledCounter.args = {
+  defaultValue: 1,
+  disabled: true,
+};
+
+export const SmallCounter = Template.bind({});
+SmallCounter.args = {
+  defaultValue: 1,
+  size: "small",
+};
+
+export const LargeCounter = Template.bind({});
+LargeCounter.args = {
+  defaultValue: 1,
+  size: "large",
+};
+
+export const StretchedCounter = Template.bind({});
+StretchedCounter.args = {
+  defaultValue: 1,
+  isStretched: true,
+};
+
+export const WithBoundsCounter = Template.bind({});
+WithBoundsCounter.args = {
+  defaultValue: 2,
+  min: 0,
+  max: 3,
+};

package/src/elements/Button.jsx

@@ -85,16 +85,16 @@ export const Button = forwardRef(
       "text-bold tracking-normal hover:underline hover:underline-offset-(--underline-offset-btn) active:underline active:underline-offset-(--underline-offset-btn)";
 
     const sizes = {
-      small: "h-[36px] py-8 px-16 rounded-lg text-sm",
-      medium: "h-[44px] py-8 px-16 rounded-lg text-base",
-      large: "h-[56px] py-8 px-16 rounded-lg text-lg",
+      small: "h-control-sm py-8 px-16 rounded-lg text-sm",
+      medium: "h-control-md py-8 px-16 rounded-lg text-base",
+      large: "h-control-lg py-8 px-16 rounded-lg text-lg",
     };
 
     const width = isStretched ? "w-full" : "w-fit-content";
 
     const variants = {
       primary:
-        "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus  hover:text-fg-base hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-base",
+        "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
       secondary:
         "border-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis hover:shadow-md hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
       bare: "bg-bg-base text-fg-primary-emphasis hover:bg-bg-minimal active:bg-bg-minimal-5",

package/src/elements/Button.test.jsx

@@ -11,17 +11,17 @@ describe("Button", () => {
   it("applies medium size by default", () => {
     render(<Button>Default size</Button>);
     const btn = screen.getByRole("button");
-    expect(btn.className).toMatch(/h-\[44px\]/); // medium height
+    expect(btn.className).toMatch(/h-control-md/);
   });
 
   it("applies small size when size='small'", () => {
     render(<Button size="small">Small</Button>);
-    expect(screen.getByRole("button").className).toMatch(/h-\[36px\]/);
+    expect(screen.getByRole("button").className).toMatch(/h-control-sm/);
   });
 
   it("applies large size when size='large'", () => {
     render(<Button size="large">Large</Button>);
-    expect(screen.getByRole("button").className).toMatch(/h-\[56px\]/);
+    expect(screen.getByRole("button").className).toMatch(/h-control-lg/);
   });
 
   it("uses stretched width when isStretched=true", () => {

package/src/elements/ButtonCounter.jsx

@@ -0,0 +1,341 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { cx } from "@edux-design/utils";
+
+/**
+ * ButtonCounter (stepper) component.
+ *
+ * Renders decrement/increment buttons with a central value display.
+ * Supports the same size + variant flags as the main Button.
+ *
+ * @typedef {React.HTMLAttributes<HTMLDivElement> & {
+ *   value?: number,
+ *   defaultValue?: number,
+ *   onChange?: (value: number) => void,
+ *   min?: number,
+ *   max?: number,
+ *   step?: number,
+ *   children?: React.ReactNode,
+ *   size?: "small"|"medium"|"large",
+ *   isSecondary?: boolean,
+ *   isDanger?: boolean,
+ *   isBare?: boolean,
+ *   isStretched?: boolean,
+ *   disabled?: boolean,
+ *   isEditable?: boolean,
+ *   inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"|"defaultValue"|"onChange"|"type">,
+ *   decrementIcon?: React.ReactNode,
+ *   incrementIcon?: React.ReactNode,
+ *   startIcon?: React.ReactNode,
+ *   endIcon?: React.ReactNode,
+ *   decrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>,
+ *   incrementButtonProps?: React.ButtonHTMLAttributes<HTMLButtonElement>,
+ *   className?: string,
+ * }} ButtonCounterProps
+ */
+
+/**
+ * @type {React.ForwardRefExoticComponent<ButtonCounterProps & React.RefAttributes<HTMLDivElement>>}
+ */
+export const ButtonCounter = forwardRef(function ButtonCounter(
+  {
+    value,
+    defaultValue = 1,
+    onChange,
+    min = Number.NEGATIVE_INFINITY,
+    max = Number.POSITIVE_INFINITY,
+    step = 1,
+    children,
+    size = "medium",
+    isSecondary,
+    isDanger,
+    isBare,
+    isStretched,
+    disabled,
+    isEditable = false,
+    inputProps,
+    decrementIcon,
+    incrementIcon,
+    startIcon,
+    endIcon,
+    decrementButtonProps,
+    incrementButtonProps,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const isControlled = value !== undefined;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const currentValue = isControlled ? value : internalValue;
+
+  const clampedValue = useMemo(() => {
+    const safe = Number.isFinite(currentValue) ? currentValue : defaultValue;
+    return Math.min(max, Math.max(min, safe));
+  }, [currentValue, defaultValue, max, min]);
+
+  const commitValue = useCallback(
+    (next) => {
+      const clamped = Math.min(max, Math.max(min, next));
+      if (!isControlled) setInternalValue(clamped);
+      onChange?.(clamped);
+    },
+    [isControlled, max, min, onChange],
+  );
+
+  const decrementDisabled =
+    !!disabled || !Number.isFinite(clampedValue) || clampedValue - step < min;
+  const incrementDisabled =
+    !!disabled || !Number.isFinite(clampedValue) || clampedValue + step > max;
+
+  let variant = "primary";
+  if (disabled) {
+    variant = "disabled";
+  } else if (isDanger && isBare) {
+    variant = "dangerBare";
+  } else if (isDanger) {
+    variant = "danger";
+  } else if (isSecondary) {
+    variant = "secondary";
+  } else if (isBare) {
+    variant = "bare";
+  }
+
+  if (process.env.NODE_ENV !== "production") {
+    const count = [isSecondary, isDanger, isBare].filter(Boolean).length;
+    const hasAllowedCombo = isDanger && isBare && count === 2;
+    if (count > 1 && !hasAllowedCombo) {
+      console.warn(
+        "[ButtonCounter]: Multiple variant props passed. Using the highest priority only.",
+      );
+    }
+
+    if (step <= 0) {
+      console.warn("[ButtonCounter]: step should be > 0.");
+    }
+  }
+
+  const CONTROL_SIZES = {
+    small: {
+      button: "h-[36px] w-[36px] text-sm",
+      display: "h-[36px] min-w-[48px] px-12 text-sm",
+    },
+    medium: {
+      button: "h-[44px] w-[44px] text-base",
+      display: "h-[44px] min-w-[56px] px-12 text-base",
+    },
+    large: {
+      button: "h-[56px] w-[56px] text-lg",
+      display: "h-[56px] min-w-[72px] px-16 text-lg",
+    },
+  };
+
+  const defaultsButton =
+    "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out cursor-pointer";
+
+  const defaultsDisplay =
+    "flex items-center justify-center text-bold tracking-normal";
+
+  const width = isStretched ? "w-full" : "w-fit-content";
+
+  const variants = {
+    primary: {
+      button:
+        "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
+      display:
+        "border-y-2 border-x-2 border-border-primary-emphasis bg-bg-primary-base text-white",
+    },
+    secondary: {
+      button:
+        "border-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis hover:shadow-md hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
+      display:
+        "border-y-2 border-x-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis",
+    },
+    bare: {
+      button:
+        "bg-bg-base text-fg-primary-emphasis hover:bg-bg-minimal active:bg-bg-minimal-5",
+      display: "bg-bg-base text-fg-primary-emphasis",
+    },
+    dangerBare: {
+      button:
+        "bg-bg-base text-fg-danger-emphasis hover:bg-bg-danger-subtle active:bg-bg-danger-subtle",
+      display: "bg-bg-base text-fg-danger-emphasis",
+    },
+    danger: {
+      button:
+        "bg-bg-danger-base border-2 border-border-danger-emphasis text-white hover:bg-bg-danger-base-5 active:bg-bg-danger-base-10",
+      display:
+        "border-y-2 border-x-2 border-border-danger-emphasis bg-bg-danger-base text-white",
+    },
+    disabled: {
+      button:
+        "border-2 border-border-subtle bg-bg-inactive text-fg-inactive hover:no-underline cursor-not-allowed",
+      display:
+        "border-y-2 border-x-2 border-border-subtle bg-bg-inactive text-fg-inactive",
+    },
+  };
+
+  const sizeStyles = CONTROL_SIZES[size] ?? CONTROL_SIZES.medium;
+  const variantStyles = variants[variant] ?? variants.primary;
+
+  const leftButtonStyles = cx(
+    defaultsButton,
+    sizeStyles.button,
+    "rounded-l-lg",
+    "relative z-10",
+    variantStyles.button,
+    variant !== "bare" && variant !== "dangerBare" ? "border-r-0" : null,
+  );
+
+  const rightButtonStyles = cx(
+    defaultsButton,
+    sizeStyles.button,
+    "rounded-r-lg",
+    variantStyles.button,
+    variant !== "bare" && variant !== "dangerBare" ? "border-l-0" : null,
+  );
+
+  const displayStyles = cx(
+    defaultsDisplay,
+    sizeStyles.display,
+    "relative z-0",
+    variantStyles.display,
+    isStretched ? "flex-1" : null,
+  );
+
+  const effectiveDecrementIcon = decrementIcon ?? startIcon ?? "-";
+  const effectiveIncrementIcon = incrementIcon ?? endIcon ?? "+";
+
+  const [draftValue, setDraftValue] = useState(String(clampedValue));
+  const [isEditing, setIsEditing] = useState(false);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    if (isEditing) return;
+    setDraftValue(String(clampedValue));
+  }, [clampedValue, isEditing]);
+
+  const commitDraft = useCallback(() => {
+    const trimmed = String(draftValue).trim();
+    if (trimmed === "") {
+      setDraftValue(String(clampedValue));
+      return;
+    }
+
+    const next = Number(trimmed);
+    if (!Number.isFinite(next)) {
+      setDraftValue(String(clampedValue));
+      return;
+    }
+
+    commitValue(next);
+  }, [clampedValue, commitValue, draftValue]);
+
+  return (
+    <div
+      ref={ref}
+      className={cx("inline-flex items-stretch", width, className)}
+      {...rest}
+    >
+      <button
+        {...decrementButtonProps}
+        type="button"
+        aria-label={decrementButtonProps?.["aria-label"] ?? "Decrease"}
+        aria-disabled={decrementDisabled}
+        disabled={decrementDisabled}
+        className={cx(
+          leftButtonStyles,
+          decrementDisabled && variant !== "disabled"
+            ? variants.disabled.button
+            : null,
+          decrementButtonProps?.className,
+        )}
+        onClick={(event) => {
+          decrementButtonProps?.onClick?.(event);
+          if (event.defaultPrevented) return;
+          commitValue(clampedValue - step);
+        }}
+      >
+        {effectiveDecrementIcon}
+      </button>
+
+      {isEditable && children == null ? (
+        <input
+          {...inputProps}
+          ref={inputRef}
+          type="number"
+          inputMode="numeric"
+          disabled={!!disabled}
+          aria-label={inputProps?.["aria-label"] ?? "Value"}
+          className={cx(
+            displayStyles,
+            "w-[44px] text-center outline-none bg-transparent text-fg-base",
+            "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:m-0 [&::-webkit-inner-spin-button]:m-0",
+            "focus:shadow-focus focus-visible:shadow-focus focus:z-15 focus-within:z-15",
+            inputProps?.className,
+          )}
+          value={draftValue}
+          onChange={(event) => {
+            inputProps?.onChange?.(event);
+            if (event.defaultPrevented) return;
+            setDraftValue(event.target.value);
+          }}
+          onFocus={(event) => {
+            inputProps?.onFocus?.(event);
+            if (event.defaultPrevented) return;
+            setIsEditing(true);
+          }}
+          onBlur={(event) => {
+            inputProps?.onBlur?.(event);
+            if (event.defaultPrevented) return;
+            setIsEditing(false);
+            commitDraft();
+          }}
+          onKeyDown={(event) => {
+            inputProps?.onKeyDown?.(event);
+            if (event.defaultPrevented) return;
+            if (event.key === "Enter") {
+              event.currentTarget.blur();
+            }
+            if (event.key === "Escape") {
+              setDraftValue(String(clampedValue));
+              event.currentTarget.blur();
+            }
+          }}
+        />
+      ) : (
+        <div className={cx(displayStyles, "select-none")}>
+          {children ?? clampedValue}
+        </div>
+      )}
+
+      <button
+        {...incrementButtonProps}
+        type="button"
+        aria-label={incrementButtonProps?.["aria-label"] ?? "Increase"}
+        aria-disabled={incrementDisabled}
+        disabled={incrementDisabled}
+        className={cx(
+          rightButtonStyles,
+          incrementDisabled && variant !== "disabled"
+            ? variants.disabled.button
+            : null,
+          incrementButtonProps?.className,
+        )}
+        onClick={(event) => {
+          incrementButtonProps?.onClick?.(event);
+          if (event.defaultPrevented) return;
+          commitValue(clampedValue + step);
+        }}
+      >
+        {effectiveIncrementIcon}
+      </button>
+    </div>
+  );
+});

package/src/elements/ButtonCounter.test.jsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { ButtonCounter } from "./ButtonCounter";
+
+describe("ButtonCounter", () => {
+  it("renders defaultValue", () => {
+    render(<ButtonCounter defaultValue={5} />);
+    expect(screen.getByText("5")).toBeInTheDocument();
+  });
+
+  it("increments and decrements", () => {
+    render(<ButtonCounter defaultValue={1} />);
+
+    fireEvent.click(screen.getByRole("button", { name: "Increase" }));
+    expect(screen.getByText("2")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("button", { name: "Decrease" }));
+    expect(screen.getByText("1")).toBeInTheDocument();
+  });
+
+  it("renders an editable input when isEditable=true", () => {
+    const onChange = vi.fn();
+    render(<ButtonCounter defaultValue={3} isEditable onChange={onChange} />);
+
+    const input = screen.getByRole("spinbutton", { name: "Value" });
+    expect(input).toHaveValue(3);
+
+    fireEvent.change(input, { target: { value: "7" } });
+    fireEvent.blur(input);
+
+    expect(onChange).toHaveBeenCalledWith(7);
+    expect(screen.getByRole("spinbutton", { name: "Value" })).toHaveValue(7);
+  });
+
+  it("applies medium size by default", () => {
+    render(<ButtonCounter defaultValue={1} />);
+    const buttons = screen.getAllByRole("button");
+    expect(buttons[0].className).toMatch(/h-\[44px\]/);
+    expect(buttons[1].className).toMatch(/h-\[44px\]/);
+  });
+
+  it("applies small and large sizes", () => {
+    const { rerender } = render(<ButtonCounter size="small" defaultValue={1} />);
+    expect(screen.getAllByRole("button")[0].className).toMatch(/h-\[36px\]/);
+
+    rerender(<ButtonCounter size="large" defaultValue={1} />);
+    expect(screen.getAllByRole("button")[0].className).toMatch(/h-\[56px\]/);
+  });
+
+  it("applies variants", () => {
+    const { rerender } = render(<ButtonCounter defaultValue={1} />);
+    expect(screen.getAllByRole("button")[0].className).toMatch(/bg-bg-primary-base/);
+
+    rerender(<ButtonCounter isSecondary defaultValue={1} />);
+    expect(screen.getAllByRole("button")[0].className).toMatch(/bg-bg-base/);
+
+    rerender(<ButtonCounter isDanger defaultValue={1} />);
+    expect(screen.getAllByRole("button")[0].className).toMatch(/bg-bg-danger-base/);
+
+    rerender(<ButtonCounter isDanger isBare defaultValue={1} />);
+    expect(screen.getAllByRole("button")[0].className).toMatch(/text-fg-danger-emphasis/);
+  });
+
+  it("applies disabled state", () => {
+    render(<ButtonCounter disabled defaultValue={1} />);
+    const buttons = screen.getAllByRole("button");
+    expect(buttons[0]).toBeDisabled();
+    expect(buttons[1]).toBeDisabled();
+    expect(buttons[0].className).toMatch(/bg-bg-inactive/);
+  });
+
+  it("uses stretched width when isStretched=true", () => {
+    const { container } = render(<ButtonCounter isStretched defaultValue={1} />);
+    expect(container.firstChild.className).toMatch(/w-full/);
+  });
+
+  it("logs a warning in dev mode if multiple variants are passed", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    process.env.NODE_ENV = "development";
+
+    render(<ButtonCounter isSecondary isDanger defaultValue={1} />);
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      "[ButtonCounter]: Multiple variant props passed. Using the highest priority only."
+    );
+
+    warnSpy.mockRestore();
+  });
+
+  it("does not warn for the danger bare combination", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    process.env.NODE_ENV = "development";
+
+    render(<ButtonCounter isDanger isBare defaultValue={1} />);
+
+    expect(warnSpy).not.toHaveBeenCalled();
+
+    warnSpy.mockRestore();
+  });
+});

package/src/elements/IconButton.jsx

@@ -75,7 +75,7 @@ export const IconButton = forwardRef(
 
     const variants = {
       primary:
-        "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus hover:text-fg-base hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-base",
+        "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
       secondary:
         "border-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis hover:shadow-md hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
       bare: "bg-bg-base text-fg-primary-emphasis hover:bg-bg-minimal active:bg-bg-minimal-5",

package/src/index.js

@@ -3,3 +3,4 @@ export { Button } from "./elements/Button";
 export { MenuButton } from "./elements/MenuButton";
 export { ButtonGroup } from "./elements/ButtonGroup";
 export { ButtonGroupItem } from "./elements/ButtonGroupItem";
+export { ButtonCounter } from "./elements/ButtonCounter";

package/dist/chevron-EVM4GL6D.svg

@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
-    xmlns="http://www.w3.org/2000/svg">
-    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.5858 12L9.29289 7.70711C8.90237 7.31658 8.90237 6.68342 9.29289 6.29289C9.68342 5.90237 10.3166 5.90237 10.7071 6.29289L15.7071 11.2929C16.0976 11.6834 16.0976 12.3166 15.7071 12.7071L10.7071 17.7071C10.3166 18.0976 9.68342 18.0976 9.29289 17.7071C8.90237 17.3166 8.90237 16.6834 9.29289 16.2929L13.5858 12Z" fill="currentColor"/>
-</svg>

package/dist/chunk-M47FNL4P.mjs

@@ -1,10 +0,0 @@
-// src/elements/Button.jsx
-import React from "react";
-function Button() {
-  return /* @__PURE__ */ React.createElement("div", { className: "border-2 border-primary-700" }, "Button");
-}
-var Button_default = Button;
-
-export {
-  Button_default
-};

package/dist/elements/Button.js

@@ -1,39 +0,0 @@
-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/elements/Button.jsx
-var Button_exports = {};
-__export(Button_exports, {
-  default: () => Button_default
-});
-module.exports = __toCommonJS(Button_exports);
-var import_react = __toESM(require("react"));
-function Button() {
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: "border-2 border-primary-700" }, "Button");
-}
-var Button_default = Button;