@edux-design/buttons 0.1.3 → 0.1.4

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@edux-design/buttons",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": false,
   "sideEffects": [
     "**/*.css"
   ],
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md"
+  ],
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
@@ -17,6 +22,7 @@
     "lint": "eslint . --max-warnings 0",
     "build": "tsup src/index.js --format esm,cjs --dts",
     "dev": "tsup src/index.js --watch --format esm,cjs --dts",
+    "prepack": "npm run build",
     "generate:component": "turbo gen react-component",
     "check-types": "tsc --noEmit"
   },

package/src/demo/Button.stories.jsx

@@ -1,103 +0,0 @@
-import React from "react";
-import { Button, IconButton } from "./../index";
-import { Close, External, Warning } from "@edux-design/icons";
-
-export default {
-  title: "Components/Button",
-  component: Button,
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: ["small", "medium", "large"],
-    },
-    isSecondary: { control: "boolean" },
-    isDanger: { control: "boolean" },
-    isBare: { control: "boolean" },
-    isStretched: { control: "boolean" },
-    disabled: { control: "boolean" },
-    startIcon: { control: false },
-    endIcon: { control: false },
-    children: { control: "text" },
-  },
-};
-
-// Base template
-const Template = (args) => <Button {...args} />;
-
-// Default story
-export const Primary = Template.bind({});
-Primary.args = {
-  children: "Primary Button",
-  size: "medium",
-};
-
-// Variants
-export const Secondary = Template.bind({});
-Secondary.args = {
-  children: "Secondary Button",
-  isSecondary: true,
-};
-
-export const Danger = Template.bind({});
-Danger.args = {
-  children: "Delete",
-  isDanger: true,
-};
-
-export const Bare = Template.bind({});
-Bare.args = {
-  children: "Bare Button",
-  isBare: true,
-};
-
-export const DangerBare = Template.bind({});
-DangerBare.args = {
-  children: "Log out",
-  isBare: true,
-  isDanger: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  children: "Disabled",
-  disabled: true,
-};
-
-// Sizes
-export const Small = Template.bind({});
-Small.args = {
-  children: "Small",
-  size: "small",
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  children: "Large",
-  size: "large",
-};
-
-// Stretched (full width)
-export const Stretched = Template.bind({});
-Stretched.args = {
-  children: "Full Width",
-  isStretched: true,
-};
-
-export const Default = () => (
-  <div className="flex gap-4 items-center">
-    <IconButton icon={<Close />} aria-label="Close" isBare />
-    <IconButton icon={<Close />} isSecondary aria-label="Close" />
-    <IconButton icon={<Close />} isDanger aria-label="Delete" />
-    <IconButton icon={<Close />} disabled aria-label="Disabled" />
-  </div>
-);
-
-export const WithIcons = () => (
-  <div className="flex gap-4 items-center">
-    <Button startIcon={<Warning />}>Start icon</Button>
-    <Button endIcon={<External />}>End icon</Button>
-    <Button isDanger isBare endIcon={<External />}>
-      Log out
-    </Button>
-  </div>
-);

package/src/demo/ButtonCounter.stories.jsx

@@ -1,101 +0,0 @@
-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/demo/ButtonGroup.stories.jsx

@@ -1,67 +0,0 @@
-import React, { useState } from "react";
-import { ButtonGroup, ButtonGroupItem } from "./../index";
-import { Warning } from "@edux-design/icons";
-
-export default {
-  title: "Components/ButtonGroup",
-  component: ButtonGroup,
-  parameters: {
-    layout: "centered",
-  },
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: ["small", "medium", "large"],
-    },
-    isStretched: { control: "boolean" },
-  },
-};
-
-const Template = (args) => {
-  const [value, setValue] = useState(args.value ?? args.defaultValue ?? "one");
-  return (
-    <ButtonGroup
-      {...args}
-      value={value}
-      onChange={(nextValue) => {
-        setValue(nextValue);
-        args.onChange?.(nextValue);
-      }}
-    >
-      <ButtonGroupItem value="one">Label (11)</ButtonGroupItem>
-      <ButtonGroupItem value="two">Label (11)</ButtonGroupItem>
-      <ButtonGroupItem
-        value="alert"
-        endIcon={<Warning className="h-4 w-4 text-warning-600" />}
-      >
-        Label
-      </ButtonGroupItem>
-    </ButtonGroup>
-  );
-};
-
-export const Playground = Template.bind({});
-Playground.args = { defaultValue: "one" };
-
-export const WithIconCounts = () => {
-  const [value, setValue] = useState("inbox");
-
-  return (
-    <div className="w-[360px]">
-      <ButtonGroup
-        isStretched
-        value={value}
-        onChange={(next) => setValue(next)}
-      >
-        <ButtonGroupItem value="inbox">Inbox (11)</ButtonGroupItem>
-        <ButtonGroupItem value="drafts">Drafts (11)</ButtonGroupItem>
-        <ButtonGroupItem
-          value="alerts"
-          endAdornment={<Warning className="h-3.5 w-3.5 text-warning-600" />}
-        >
-          Alerts
-        </ButtonGroupItem>
-      </ButtonGroup>
-    </div>
-  );
-};

package/src/elements/Button.jsx

@@ -1,127 +0,0 @@
-import React, { forwardRef } from "react";
-import { cx } from "@edux-design/utils";
-
-/**
- * Props for the Button component.
- *
- * Extends all native HTML `<button>` attributes, while adding
- * design-system variants and state controls.
- *
- * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
- *   children?: React.ReactNode,
- *   startIcon?: React.ReactNode,
- *   endIcon?: React.ReactNode,
- *   size?: "small"|"medium"|"large",
- *   isSecondary?: boolean,
- *   isDanger?: boolean,
- *   isBare?: boolean,
- *   isStretched?: boolean,
- *   disabled?: boolean,
- *   className?: string
- * }} ButtonProps
- */
-
-/**
- * Button component.
- *
- * Provides design-system styled button with support for
- * multiple visual variants, sizing, and states.
- *
- * @component
- * @type {React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>}
- *
- * @example
- * ```jsx
- * <Button size="small">Save</Button>
- * <Button isSecondary>Cancel</Button>
- * <Button isDanger disabled>Delete</Button>
- * ```
- */
-export const Button = forwardRef(
-  (
-    {
-      children,
-      startIcon,
-      endIcon,
-      size = "medium",
-      isSecondary,
-      isDanger,
-      isBare,
-      isStretched,
-      disabled,
-      className,
-      ...props
-    },
-    ref
-  ) => {
-    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";
-    }
-
-    // handle conflicting props - the last bool wins
-    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(
-          "[Button]: Multiple variant props passed. Using the highest priority only."
-        );
-      }
-    }
-
-    const defaults =
-      "flex justify-center items-center gap-8 focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out cursor-pointer";
-
-    const fonts =
-      "text-bold tracking-normal hover:underline hover:underline-offset-(--underline-offset-btn) active:underline active:underline-offset-(--underline-offset-btn)";
-
-    const sizes = {
-      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-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",
-      dangerBare:
-        "bg-bg-base text-fg-danger-emphasis hover:bg-bg-danger-subtle active:bg-bg-danger-subtle",
-      danger:
-        "bg-bg-danger-base border-2 border-border-danger-emphasis text-white hover:bg-bg-danger-base-5 active:bg-bg-danger-base-10",
-      disabled:
-        "border-2 border-border-subtle bg-bg-inactive text-fg-inactive hover:no-underline",
-    };
-
-    const STYLES = cx(defaults, sizes[size], width, fonts, variants[variant]);
-
-    return (
-      <button
-        role="button"
-        type="button"
-        aria-disabled={disabled}
-        disabled={disabled}
-        className={STYLES}
-        ref={ref}
-        {...props}
-      >
-        {startIcon}
-        {children ? <span>{children}</span> : null}
-        {endIcon}
-      </button>
-    );
-  }
-);

package/src/elements/Button.test.jsx

@@ -1,120 +0,0 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import { Button } from "./Button";
-
-describe("Button", () => {
-  it("renders children", () => {
-    render(<Button>Click me</Button>);
-    expect(screen.getByRole("button")).toHaveTextContent("Click me");
-  });
-
-  it("applies medium size by default", () => {
-    render(<Button>Default size</Button>);
-    const btn = screen.getByRole("button");
-    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-control-sm/);
-  });
-
-  it("applies large size when size='large'", () => {
-    render(<Button size="large">Large</Button>);
-    expect(screen.getByRole("button").className).toMatch(/h-control-lg/);
-  });
-
-  it("uses stretched width when isStretched=true", () => {
-    render(<Button isStretched>Stretch</Button>);
-    expect(screen.getByRole("button").className).toMatch(/w-full/);
-  });
-
-  it("applies primary variant by default", () => {
-    render(<Button>Primary</Button>);
-    expect(screen.getByRole("button").className).toMatch(/bg-bg-primary-base/);
-  });
-
-  it("applies secondary variant when isSecondary=true", () => {
-    render(<Button isSecondary>Secondary</Button>);
-    expect(screen.getByRole("button").className).toMatch(/bg-bg-base/);
-  });
-
-  it("applies bare variant when isBare=true", () => {
-    render(<Button isBare>Bare</Button>);
-    expect(screen.getByRole("button").className).toMatch(/bg-bg-base/);
-    expect(screen.getByRole("button").className).toMatch(
-      /text-fg-primary-emphasis/
-    );
-  });
-
-  it("applies danger variant when isDanger=true", () => {
-    render(<Button isDanger>Danger</Button>);
-    expect(screen.getByRole("button").className).toMatch(/bg-bg-danger-base/);
-  });
-
-  it("applies danger bare variant when isDanger and isBare", () => {
-    render(
-      <Button isDanger isBare>
-        Danger Bare
-      </Button>
-    );
-    const btn = screen.getByRole("button");
-    expect(btn.className).toMatch(/text-fg-danger-emphasis/);
-    expect(btn.className).toMatch(/bg-bg-base/);
-    expect(btn.className).not.toMatch(/bg-bg-danger-base/);
-  });
-
-  it("applies disabled variant when disabled=true", () => {
-    render(<Button disabled>Disabled</Button>);
-    const btn = screen.getByRole("button");
-    expect(btn).toBeDisabled();
-    expect(btn).toHaveAttribute("aria-disabled", "true");
-    expect(btn.className).toMatch(/bg-bg-inactive/);
-  });
-
-  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(
-      <Button isSecondary isDanger>
-        Conflict
-      </Button>
-    );
-
-    expect(warnSpy).toHaveBeenCalledWith(
-      "[Button]: Multiple variant props passed. Using the highest priority only."
-    );
-
-    warnSpy.mockRestore();
-  });
-
-  it("renders start and end icons when provided", () => {
-    render(
-      <Button
-        startIcon={<span data-testid="start-icon">S</span>}
-        endIcon={<span data-testid="end-icon">E</span>}
-      >
-        With icons
-      </Button>
-    );
-
-    expect(screen.getByTestId("start-icon")).toBeInTheDocument();
-    expect(screen.getByTestId("end-icon")).toBeInTheDocument();
-  });
-
-  it("does not warn for the danger bare combination", () => {
-    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-    process.env.NODE_ENV = "development";
-
-    render(
-      <Button isDanger isBare>
-        Allowed
-      </Button>
-    );
-
-    expect(warnSpy).not.toHaveBeenCalled();
-
-    warnSpy.mockRestore();
-  });
-});