@edux-design/buttons 0.1.2 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @edux-design/buttons
 
+## 0.1.4
+
+### Patch Changes
+
+- Fix package publishing so built dist files are included in the npm tarballs.
+
+## 0.1.3
+
+### Patch Changes
+
+- Add shared control height tokens and update Button to use token-backed size classes.
+
 ## 0.1.2
 
 ### Patch Changes

package/dist/index.js

@@ -73,7 +73,7 @@ var IconButton = (0, import_react.forwardRef)(
       large: "h-[56px] w-[56px] text-lg"
     };
     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",
+      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",
       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",
@@ -138,13 +138,13 @@ var Button = (0, import_react2.forwardRef)(
     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-[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",
+      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",
@@ -617,7 +617,7 @@ var ButtonCounter = (0, import_react7.forwardRef)(function ButtonCounter2({
   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-base hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-base",
+      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: {

package/dist/index.mjs

@@ -33,7 +33,7 @@ var IconButton = forwardRef(
       large: "h-[56px] w-[56px] text-lg"
     };
     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",
+      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",
       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",
@@ -98,13 +98,13 @@ var Button = forwardRef2(
     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-[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",
+      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",
@@ -592,7 +592,7 @@ var ButtonCounter = forwardRef4(function ButtonCounter2({
   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-base hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-base",
+      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: {

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@edux-design/buttons",
-  "version": "0.1.2",
+  "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/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;

package/dist/elements/Button.mjs

@@ -1,6 +0,0 @@
-import {
-  Button_default
-} from "../chunk-M47FNL4P.mjs";
-export {
-  Button_default as default
-};

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-[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",
-    };
-
-    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",
-      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>
-    );
-  }
-);