@edux-design/buttons 0.0.4 → 0.0.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @edux-design/buttons
 
+## 0.0.6
+
+### Patch Changes
+
+- Fixed tests and Radio controlled state
+
+## 0.0.5
+
+### Patch Changes
+
+- Added cursor style
+
 ## 0.0.4
 
 ### Patch Changes

package/dist/index.d.mts

@@ -134,7 +134,8 @@ declare function MenuButton({ children, size }: {
  * @typedef {Object} ButtonGroupOption
  * @property {React.ReactNode} [label] - Main label for the option.
  * @property {React.ReactNode} [startAdornment] - Optional leading element (icon, badge, etc.).
- * @property {React.ReactNode} [endIcon] - Optional trailing element.
+ * @property {React.ReactNode} [endIcon] - Optional trailing element (legacy alias).
+ * @property {React.ReactNode} [endAdornment] - Optional trailing element.
  * @property {string|number} [value] - Unique value used for selection.
  * @property {boolean} [disabled] - Whether the option is disabled.
  */

package/dist/index.d.ts

@@ -134,7 +134,8 @@ declare function MenuButton({ children, size }: {
  * @typedef {Object} ButtonGroupOption
  * @property {React.ReactNode} [label] - Main label for the option.
  * @property {React.ReactNode} [startAdornment] - Optional leading element (icon, badge, etc.).
- * @property {React.ReactNode} [endIcon] - Optional trailing element.
+ * @property {React.ReactNode} [endIcon] - Optional trailing element (legacy alias).
+ * @property {React.ReactNode} [endAdornment] - Optional trailing element.
  * @property {string|number} [value] - Unique value used for selection.
  * @property {boolean} [disabled] - Whether the option is disabled.
  */

package/dist/index.js

@@ -65,7 +65,7 @@ var IconButton = (0, import_react.forwardRef)(
         );
       }
     }
-    const defaults = "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out rounded-full";
+    const defaults = "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out rounded-full cursor-pointer";
     const sizes = {
       small: "h-[36px] w-[36px] text-sm",
       medium: "h-[44px] w-[44px] text-base",
@@ -124,7 +124,7 @@ var Button = (0, import_react2.forwardRef)(
         );
       }
     }
-    const defaults = "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out";
+    const defaults = "flex justify-center items-center 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",
@@ -1953,9 +1953,11 @@ var import_jsx_runtime52 = __toESM2(require_jsx_runtime());
 var import_jsx_runtime53 = __toESM2(require_jsx_runtime());
 var import_jsx_runtime54 = __toESM2(require_jsx_runtime());
 var import_jsx_runtime55 = __toESM2(require_jsx_runtime());
+var import_jsx_runtime56 = __toESM2(require_jsx_runtime());
+var import_jsx_runtime57 = __toESM2(require_jsx_runtime());
 
 // src/elements/MenuButton.jsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function MenuButton({ children, size }) {
   const SPLIT_BUTTON_STYLES = (0, import_utils3.cx)(
     "w-[36px] border-l-[1px] border-l-black flex flex-row justify-center items-center",
@@ -1964,16 +1966,16 @@ function MenuButton({ children, size }) {
       "h-[40px] py-2": size === "medium" || size === void 0
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(MenuButtonContext.Provider, { value: true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: SPLIT_BUTTON_STYLES, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Chevron_default, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(MenuButtonContext.Provider, { value: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: SPLIT_BUTTON_STYLES, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Chevron_default, {})
   ] });
 }
 
 // src/elements/ButtonGroup.jsx
 var import_react5 = __toESM(require("react"));
 var import_utils4 = require("@edux-design/utils");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var SIZE_STYLES = {
   small: {
     button: "text-xs px-12 py-6 rounded-md "
@@ -2159,15 +2161,15 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
     sizeStyles.button,
     isStretched ? "flex-1" : "w-auto"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     "div",
     {
       ...rest,
       ref: setContainerRef,
       role: "radiogroup",
       className: rootClasses,
-      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: trackClasses, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: trackClasses, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
           "span",
           {
             "aria-hidden": "true",
@@ -2227,8 +2229,9 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
             !isActive && "hover:bg-bg-minimal-5 active:bg-bg-inactive"
           );
           const hasStartAdornment = option.startAdornment !== void 0 && option.startAdornment !== null;
-          const hasendIcon = option.endIcon !== void 0 && option.endIcon !== null;
-          return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+          const endAdornment = option.endAdornment ?? option.endIcon;
+          const hasEndAdornment = endAdornment !== void 0 && endAdornment !== null;
+          return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
             "button",
             {
               ref: registerButtonRef(option.value),
@@ -2241,7 +2244,7 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
               onKeyDown: handleKeyDown,
               "data-state": isActive ? "active" : "inactive",
               children: [
-                hasStartAdornment && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                hasStartAdornment && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                   "span",
                   {
                     "aria-hidden": "true",
@@ -2249,13 +2252,13 @@ var ButtonGroup = (0, import_react5.forwardRef)(function ButtonGroup2({
                     children: option.startAdornment
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "flex items-center gap-1 leading-none text-current", children: option.label ?? `Option ${index + 1}` }),
-                hasendIcon && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "flex items-center gap-1 leading-none text-current", children: option.label ?? `Option ${index + 1}` }),
+                hasEndAdornment && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                   "span",
                   {
                     "aria-hidden": "true",
                     className: "flex items-center text-current",
-                    children: option.endIcon
+                    children: endAdornment
                   }
                 )
               ]

package/dist/index.mjs

@@ -26,7 +26,7 @@ var IconButton = forwardRef(
         );
       }
     }
-    const defaults = "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out rounded-full";
+    const defaults = "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out rounded-full cursor-pointer";
     const sizes = {
       small: "h-[36px] w-[36px] text-sm",
       medium: "h-[44px] w-[44px] text-base",
@@ -85,7 +85,7 @@ var Button = forwardRef2(
         );
       }
     }
-    const defaults = "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out";
+    const defaults = "flex justify-center items-center 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",
@@ -1914,6 +1914,8 @@ var import_jsx_runtime52 = __toESM(require_jsx_runtime());
 var import_jsx_runtime53 = __toESM(require_jsx_runtime());
 var import_jsx_runtime54 = __toESM(require_jsx_runtime());
 var import_jsx_runtime55 = __toESM(require_jsx_runtime());
+var import_jsx_runtime56 = __toESM(require_jsx_runtime());
+var import_jsx_runtime57 = __toESM(require_jsx_runtime());
 
 // src/elements/MenuButton.jsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
@@ -2196,7 +2198,8 @@ var ButtonGroup = forwardRef3(function ButtonGroup2({
             !isActive && "hover:bg-bg-minimal-5 active:bg-bg-inactive"
           );
           const hasStartAdornment = option.startAdornment !== void 0 && option.startAdornment !== null;
-          const hasendIcon = option.endIcon !== void 0 && option.endIcon !== null;
+          const endAdornment = option.endAdornment ?? option.endIcon;
+          const hasEndAdornment = endAdornment !== void 0 && endAdornment !== null;
           return /* @__PURE__ */ jsxs2(
             "button",
             {
@@ -2219,12 +2222,12 @@ var ButtonGroup = forwardRef3(function ButtonGroup2({
                   }
                 ),
                 /* @__PURE__ */ jsx4("span", { className: "flex items-center gap-1 leading-none text-current", children: option.label ?? `Option ${index + 1}` }),
-                hasendIcon && /* @__PURE__ */ jsx4(
+                hasEndAdornment && /* @__PURE__ */ jsx4(
                   "span",
                   {
                     "aria-hidden": "true",
                     className: "flex items-center text-current",
-                    children: option.endIcon
+                    children: endAdornment
                   }
                 )
               ]

package/package.json

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

package/src/elements/Button.jsx

@@ -67,7 +67,7 @@ export const Button = forwardRef(
     }
 
     const defaults =
-      "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out";
+      "flex justify-center items-center 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)";

package/src/elements/ButtonGroup.jsx

@@ -28,7 +28,8 @@ const useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
  * @typedef {Object} ButtonGroupOption
  * @property {React.ReactNode} [label] - Main label for the option.
  * @property {React.ReactNode} [startAdornment] - Optional leading element (icon, badge, etc.).
- * @property {React.ReactNode} [endIcon] - Optional trailing element.
+ * @property {React.ReactNode} [endIcon] - Optional trailing element (legacy alias).
+ * @property {React.ReactNode} [endAdornment] - Optional trailing element.
  * @property {string|number} [value] - Unique value used for selection.
  * @property {boolean} [disabled] - Whether the option is disabled.
  */
@@ -340,8 +341,9 @@ export const ButtonGroup = forwardRef(function ButtonGroup(
           const hasStartAdornment =
             option.startAdornment !== undefined &&
             option.startAdornment !== null;
-          const hasendIcon =
-            option.endIcon !== undefined && option.endIcon !== null;
+          const endAdornment = option.endAdornment ?? option.endIcon;
+          const hasEndAdornment =
+            endAdornment !== undefined && endAdornment !== null;
 
           return (
             <button
@@ -370,12 +372,12 @@ export const ButtonGroup = forwardRef(function ButtonGroup(
                 {option.label ?? `Option ${index + 1}`}
               </span>
 
-              {hasendIcon && (
+              {hasEndAdornment && (
                 <span
                   aria-hidden="true"
                   className="flex items-center text-current"
                 >
-                  {option.endIcon}
+                  {endAdornment}
                 </span>
               )}
             </button>

package/src/elements/IconButton.jsx

@@ -65,7 +65,7 @@ export const IconButton = forwardRef(
     }
 
     const defaults =
-      "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out rounded-full";
+      "flex justify-center items-center focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out rounded-full cursor-pointer";
 
     const sizes = {
       small: "h-[36px] w-[36px] text-sm",