@madecki/ui 1.4.0 → 2.0.0

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+## [2.0.0](https://github.com/madecki/ui/compare/v1.5.0...v2.0.0) (2026-04-08)
+
+### ⚠ BREAKING CHANGES
+
+* RadioButtons requires `label`. Group uses radiogroup; options use radio + aria-checked.
+
+Made-with: Cursor
+
+### Features
+
+* add visible form labels, Textarea, and automated changelog ([f00476c](https://github.com/madecki/ui/commit/f00476ca7c548f0e7c1397c22e426449bed2d3f1))
+
+### Bug Fixes
+
+* unblock release checks for Textarea story and workflows ([6aed8a7](https://github.com/madecki/ui/commit/6aed8a77fbb46ae9734024e0195cf323176abd31))
+
+# Changelog
+
+All release notes in this file are **generated automatically** by [semantic-release](https://semantic-release.gitbook.io/) when a version is published to npm. They are built **only** from [Conventional Commits](https://www.conventionalcommits.org/) on **`main`** (see **Releasing** in the repository README).
+
+**Reading this file:** The **latest** published release is always the **topmost** `## [x.y.z]` section. It should match `"version"` in `package.json` inside the package you installed.
+
+**Contributing:** Do not hand-edit versioned sections. Describe user-visible work in commits: use **`feat`**, **`fix`**, or **`perf`** so they appear in the notes. For **breaking** API or behavior changes, use a **`!`** after the type (e.g. **`feat!:`**) and/or a **`BREAKING CHANGE:`** paragraph in the commit **body**. [commitlint](https://commitlint.js.org/) validates messages on **`git commit`** (Husky) and on **every push to `main`** (CI).

package/README.md

@@ -574,30 +574,44 @@ src/components/ComponentName/
 
 ## Releasing
 
-Releases are fully automated using [semantic-release](https://semantic-release.gitbook.io/). When commits are pushed to `main`, the CI automatically:
+Releases are fully automated using [semantic-release](https://semantic-release.gitbook.io/). When commits are pushed to `main`, the **Release** workflow runs `typecheck`, `lint`, `build`, and **`npm test`**, then **`npx semantic-release`**, which in order:
 
-1. Analyzes commit messages to determine the version bump
-2. Updates `package.json` and `CHANGELOG.md`
-3. Creates a Git tag and GitHub Release
-4. Publishes to NPM with provenance
+1. Analyzes **conventional** commit messages since the last release to pick the **semver** bump
+2. Generates release notes **only** from those commits
+3. **Prepends** a new `## [version]` section to **`CHANGELOG.md`** and sets **`package.json`** `"version"`
+4. Publishes to npm (the `prepublishOnly` script builds again)
+5. Pushes the version commit, creates a Git tag, and opens a **GitHub Release**
+
+There is **no** separate manual changelog step: if it is not described in a merged commit on `main`, it will not appear in **`CHANGELOG.md`**.
 
 ### Commit Message Format
 
-This project uses [Conventional Commits](https://www.conventionalcommits.org/) enforced by [commitlint](https://commitlint.js.org/).
+This project uses [Conventional Commits](https://www.conventionalcommits.org/) enforced by [commitlint](https://commitlint.js.org/):
+
+- **Locally:** Husky runs **`commitlint`** on the **`commit-msg`** hook, so **`git commit` fails** if the message does not follow the rules (bypass only with **`git commit --no-verify`**).
+- **On `main`:** CI runs commitlint on **every push** for the commits in that push, so bad messages are caught even if someone skipped the hook.
 
 **Format:** `type(scope?): description`
 
-| Type | Description | Release |
-|------|-------------|---------|
-| `feat` | New feature | Minor |
-| `fix` | Bug fix | Patch |
-| `docs` | Documentation only | None |
+| Type | Description | Release / changelog |
+|------|-------------|---------------------|
+| `feat` | New feature | Minor; appears under **Features** |
+| `fix` | Bug fix | Patch; appears under **Bug Fixes** |
+| `perf` | Performance improvement | Patch; appears under **Performance Improvements** |
+| `docs` | Documentation only | None (not in changelog by default) |
 | `style` | Code style (formatting) | None |
 | `refactor` | Code change (no fix/feat) | None |
-| `perf` | Performance improvement | Patch |
 | `test` | Adding/updating tests | None |
 | `chore` | Maintenance tasks | None |
 
+**Breaking changes** (major bump): use **`feat!:`** / **`fix!:`** and/or a **`BREAKING CHANGE:`** paragraph in the commit **body** (after a blank line). Example body:
+
+```text
+feat!: require label on RadioButtons
+
+BREAKING CHANGE: RadioButtons now requires a `label` prop.
+```
+
 ### Examples
 
 ```bash

package/dist/index.cjs

@@ -101,7 +101,9 @@ var Button = ({
   label,
   disabled,
   className = "",
-  type = "button"
+  type = "button",
+  role,
+  ariaChecked
 }) => {
   if (typeof isActive === "boolean" && id === void 0) {
     throw Error("If button has isActive props, it must have id props too");
@@ -118,6 +120,8 @@ var Button = ({
     "button",
     {
       type,
+      role,
+      "aria-checked": ariaChecked,
       className: surfaceClassName,
       onClick: () => {
         if (isActive === true) {
@@ -254,27 +258,106 @@ var GradientButton = ({
     }
   );
 };
+var sizeStyles = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-md",
+  lg: "text-lg"
+};
+var weightStyles = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
+var colorStyles = {
+  default: "text-white dark:text-white",
+  muted: "text-lightgray dark:text-lightgray",
+  primary: "text-primary dark:text-white",
+  success: "text-success",
+  warning: "text-warning",
+  danger: "text-danger"
+};
+var Text = ({
+  children,
+  id,
+  size = "md",
+  weight = "normal",
+  color = "default",
+  as: Tag2 = "p",
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tag2,
+    {
+      id,
+      className: `${sizeStyles[size]} ${weightStyles[weight]} ${colorStyles[color]} ${className}`,
+      children
+    }
+  );
+};
+function FormFieldLabel({
+  label,
+  labelVisibility,
+  id
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Text,
+    {
+      as: "span",
+      id,
+      size: "sm",
+      weight: "medium",
+      color: "muted",
+      className: labelVisibility === "sr-only" ? "sr-only" : "mb-2 block",
+      children: label
+    }
+  );
+}
 var RadioButtons = ({
+  label,
+  labelVisibility = "visible",
   items,
   onChange,
   size = "md",
   className = ""
 }) => {
+  const labelId = react.useId();
   const [selectedButton, setSelectedButton] = react.useState();
   const onButtonClick = (id) => {
     setSelectedButton(id);
     onChange(id ?? "");
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex flex-wrap gap-2 ${className}`, children: items.map((item) => /* @__PURE__ */ react.createElement(
-    Button,
-    {
-      ...item,
-      size,
-      key: item.id,
-      isActive: selectedButton === item.id,
-      onClick: onButtonClick
-    }
-  )) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FormFieldLabel,
+      {
+        id: labelId,
+        label,
+        labelVisibility
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-labelledby": labelId,
+        className: "flex flex-wrap gap-2",
+        children: items.map((item) => /* @__PURE__ */ react.createElement(
+          Button,
+          {
+            ...item,
+            size,
+            key: item.id,
+            role: "radio",
+            ariaChecked: selectedButton === item.id,
+            isActive: selectedButton === item.id,
+            onClick: onButtonClick
+          }
+        ))
+      }
+    )
+  ] });
 };
 var Tag = ({
   variant,
@@ -302,11 +385,14 @@ var Tag = ({
 var Input = ({
   name,
   onChange,
+  value: valueProp,
   defaultValue,
   placeholder,
   label,
+  labelVisibility = "visible",
   variant = "primary",
   type = "text",
+  maxLength,
   required = false,
   pattern,
   title,
@@ -314,38 +400,54 @@ var Input = ({
   spellCheck,
   disabled = false,
   className = "",
-  icon
+  icon,
+  testId
 }) => {
-  const [value, setValue] = react.useState(defaultValue);
+  const labelId = react.useId();
+  const isControlled = valueProp !== void 0;
+  const [internalValue, setInternalValue] = react.useState(() => defaultValue ?? "");
   const [isFocused, setIsFocused] = react.useState(false);
+  const value = isControlled ? valueProp : internalValue;
   const inputClassNames = ["rounded-sm font-sans z-10 w-full"];
   const spacings = "py-4 px-5";
   const outline = "outline-hidden";
   inputClassNames.push(spacings, outline);
   const inputWrapperClassNames = ["flex rounded-smb p-px w-full"];
-  if (isFocused) inputWrapperClassNames.push("bg-gradient");
+  if (isFocused) {
+    inputWrapperClassNames.push("bg-gradient");
+  } else if (variant === "primary" || variant === "tertiary") {
+    inputWrapperClassNames.push("bg-lightgray");
+  }
   switch (variant) {
     case "primary":
       inputClassNames.push("text-primary bg-neutral");
-      inputWrapperClassNames.push("bg-lightgray");
       break;
     case "secondary":
       inputClassNames.push("text-neutral bg-neutral dark:bg-gray");
       break;
     case "tertiary":
       inputClassNames.push("text-neutral bg-neutral dark:bg-primary");
-      inputWrapperClassNames.push("bg-lightgray");
       break;
   }
   if (disabled) {
     inputClassNames.push("cursor-not-allowed opacity-50");
   }
   const onInputChange = (event) => {
-    setValue(event.target.value);
-    onChange?.(event.target.value);
+    const next = event.target.value;
+    if (!isControlled) {
+      setInternalValue(next);
+    }
+    onChange?.(next);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: name, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: label }),
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: name, className: "block", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FormFieldLabel,
+      {
+        id: labelId,
+        label,
+        labelVisibility
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: inputWrapperClassNames.join(" "), children: [
       icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center pl-4", children: icon }),
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -354,24 +456,114 @@ var Input = ({
           id: name,
           name,
           placeholder,
-          value: value || "",
+          value,
           className: inputClassNames.join(" "),
           autoComplete: "off",
           onChange: onInputChange,
           onFocus: () => setIsFocused(true),
           onBlur: () => setIsFocused(false),
           type,
+          maxLength,
           required,
           pattern,
           title,
-          "aria-label": ariaLabel || label || name,
+          "aria-label": ariaLabel,
           spellCheck,
-          disabled
+          disabled,
+          "data-testid": testId
         }
       )
     ] })
   ] }) });
 };
+var Textarea = ({
+  name,
+  onChange,
+  value: valueProp,
+  defaultValue,
+  placeholder,
+  label,
+  labelVisibility = "visible",
+  variant = "primary",
+  rows = 4,
+  maxLength,
+  required = false,
+  ariaLabel,
+  spellCheck,
+  disabled = false,
+  className = "",
+  testId
+}) => {
+  const labelId = react.useId();
+  const isControlled = valueProp !== void 0;
+  const [internalValue, setInternalValue] = react.useState(() => defaultValue ?? "");
+  const [isFocused, setIsFocused] = react.useState(false);
+  const value = isControlled ? valueProp : internalValue;
+  const fieldClassNames = [
+    "min-h-[6rem] resize-y rounded-sm font-sans z-10 w-full"
+  ];
+  const spacings = "py-4 px-5";
+  const outline = "outline-hidden";
+  fieldClassNames.push(spacings, outline);
+  const inputWrapperClassNames = ["rounded-smb p-px w-full"];
+  if (isFocused) {
+    inputWrapperClassNames.push("bg-gradient");
+  } else if (variant === "primary" || variant === "tertiary") {
+    inputWrapperClassNames.push("bg-lightgray");
+  }
+  switch (variant) {
+    case "primary":
+      fieldClassNames.push("text-primary bg-neutral");
+      break;
+    case "secondary":
+      fieldClassNames.push("text-neutral bg-neutral dark:bg-gray");
+      break;
+    case "tertiary":
+      fieldClassNames.push("text-neutral bg-neutral dark:bg-primary");
+      break;
+  }
+  if (disabled) {
+    fieldClassNames.push("cursor-not-allowed opacity-50");
+  }
+  const onFieldChange = (event) => {
+    const next = event.target.value;
+    if (!isControlled) {
+      setInternalValue(next);
+    }
+    onChange?.(next);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, children: /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: name, className: "block", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      FormFieldLabel,
+      {
+        id: labelId,
+        label,
+        labelVisibility
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: inputWrapperClassNames.join(" "), children: /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      {
+        id: name,
+        name,
+        rows,
+        placeholder,
+        value,
+        className: fieldClassNames.join(" "),
+        autoComplete: "off",
+        onChange: onFieldChange,
+        onFocus: () => setIsFocused(true),
+        onBlur: () => setIsFocused(false),
+        maxLength,
+        required,
+        "aria-label": ariaLabel,
+        spellCheck,
+        disabled,
+        "data-testid": testId
+      }
+    ) })
+  ] }) });
+};
 function optionTestSlug(value) {
   return value.replace(/[^a-zA-Z0-9_-]/g, "_");
 }
@@ -456,6 +648,7 @@ function Select(props) {
   const {
     name,
     label,
+    labelVisibility = "visible",
     options,
     placeholder = "Select\u2026",
     variant = "primary",
@@ -463,6 +656,7 @@ function Select(props) {
     className = "",
     testId: testIdProp
   } = props;
+  const labelId = react.useId();
   const isMulti = props.multi === true;
   const singleValueProp = !isMulti ? props.value : void 0;
   const multiValueProp = isMulti ? props.value : void 0;
@@ -658,8 +852,15 @@ function Select(props) {
   const activeDescendant = open && filteredOptions[highlightIndex] ? `${name}-option-${optionTestSlug(filteredOptions[highlightIndex].value)}` : void 0;
   const listboxClass = "absolute left-0 right-0 top-full z-50 mt-1 max-h-60 overflow-auto rounded-sm border border-lightgray bg-neutral py-1 shadow-lg dark:border-gray dark:bg-gray dark:text-white";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: `relative ${className}`.trim(), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: name, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor: name, className: "block", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        FormFieldLabel,
+        {
+          id: labelId,
+          label,
+          labelVisibility
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: inputWrapperClassNames.join(" "), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: innerFieldClassNames.join(" "), children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "input",
@@ -673,7 +874,6 @@ function Select(props) {
             disabled,
             placeholder,
             value: inputValue,
-            "aria-label": label,
             "aria-expanded": open,
             "aria-haspopup": "listbox",
             "aria-controls": listboxId,
@@ -698,7 +898,7 @@ function Select(props) {
         id: listboxId,
         role: "listbox",
         "aria-multiselectable": isMulti,
-        "aria-label": label,
+        "aria-labelledby": labelId,
         "data-testid": `${baseTestId}-listbox`,
         tabIndex: -1,
         className: listboxClass,
@@ -850,7 +1050,7 @@ var ContentBox = ({
     }
   );
 };
-var sizeStyles = {
+var sizeStyles2 = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
   lg: "max-w-screen-lg",
@@ -867,7 +1067,7 @@ var Container = ({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: `w-full px-5 ${sizeStyles[size]} ${centeredClass} ${className}`,
+      className: `w-full px-5 ${sizeStyles2[size]} ${centeredClass} ${className}`,
       children
     }
   );
@@ -962,7 +1162,7 @@ var GridItem = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${colSpanStyles[colSpan]} ${className}`, children });
 };
-var sizeStyles2 = {
+var sizeStyles3 = {
   xs: "text-xs",
   sm: "text-sm",
   md: "text-md",
@@ -972,13 +1172,13 @@ var sizeStyles2 = {
   "3xl": "text-3xl",
   "4xl": "text-4xl"
 };
-var weightStyles = {
+var weightStyles2 = {
   normal: "font-normal",
   medium: "font-medium",
   semibold: "font-semibold",
   bold: "font-bold"
 };
-var colorStyles = {
+var colorStyles2 = {
   default: "text-white dark:text-white",
   muted: "text-lightgray dark:text-lightgray",
   primary: "text-primary dark:text-white",
@@ -1007,47 +1207,11 @@ var Heading = ({
   return react.createElement(
     tag,
     {
-      className: `${sizeStyles2[resolvedSize]} ${weightStyles[weight]} ${colorStyles[color]} ${className}`
+      className: `${sizeStyles3[resolvedSize]} ${weightStyles2[weight]} ${colorStyles2[color]} ${className}`
     },
     children
   );
 };
-var sizeStyles3 = {
-  xs: "text-xs",
-  sm: "text-sm",
-  md: "text-md",
-  lg: "text-lg"
-};
-var weightStyles2 = {
-  normal: "font-normal",
-  medium: "font-medium",
-  semibold: "font-semibold",
-  bold: "font-bold"
-};
-var colorStyles2 = {
-  default: "text-white dark:text-white",
-  muted: "text-lightgray dark:text-lightgray",
-  primary: "text-primary dark:text-white",
-  success: "text-success",
-  warning: "text-warning",
-  danger: "text-danger"
-};
-var Text = ({
-  children,
-  size = "md",
-  weight = "normal",
-  color = "default",
-  as: Tag2 = "p",
-  className = ""
-}) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Tag2,
-    {
-      className: `${sizeStyles3[size]} ${weightStyles2[weight]} ${colorStyles2[color]} ${className}`,
-      children
-    }
-  );
-};
 var Heart = ({
   variant = "outline",
   className = "",
@@ -1443,6 +1607,7 @@ exports.Stack = Stack;
 exports.Tabs = Tabs;
 exports.Tag = Tag;
 exports.Text = Text;
+exports.Textarea = Textarea;
 exports.TwitterIcon = TwitterIcon;
 exports.Warning = Warning;
 //# sourceMappingURL=index.cjs.map