@rubenpazch/radio-button 2.0.0 → 3.0.0

package/dist/RadioButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../src/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,CAAC;AAEb,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAkDD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA+E3C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../src/RadioButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC3C,MAAM,MAAM,YAAY,GACpB,SAAS,GACT,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,CAAC;AAEb,MAAM,WAAW,gBAAgB;IAC/B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAqDD,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAgG3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/index.cjs.js

@@ -426,46 +426,78 @@ function requireJsxRuntime () {
 
 var jsxRuntimeExports = requireJsxRuntime();
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = "/* Container */\n.RadioButton-module_container__djpgH {\n  display: flex;\n}\n\n/* Radio wrapper */\n.RadioButton-module_radioWrapper__B--bk {\n  display: flex;\n  align-items: flex-start;\n}\n\n/* Radio input base styles */\n.RadioButton-module_radio__0qwuN {\n  cursor: pointer;\n  transition: all 150ms ease;\n  border-width: 1px;\n  border-style: solid;\n}\n\n.RadioButton-module_radio__0qwuN:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);\n  border-color: currentColor;\n}\n\n.RadioButton-module_radioDisabled__-Go-G {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.RadioButton-module_radioDisabled__-Go-G:focus {\n  box-shadow: none;\n}\n\n/* Radio sizes */\n.RadioButton-module_radioSm__OFgkW {\n  width: 0.75rem;\n  height: 0.75rem;\n}\n\n.RadioButton-module_radioMd__ODMND {\n  width: 1rem;\n  height: 1rem;\n}\n\n.RadioButton-module_radioLg__JNQ1i {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n/* Container heights for alignment */\n.RadioButton-module_containerSm__lRtj6 {\n  height: 1rem;\n}\n\n.RadioButton-module_containerMd__0M3ye {\n  height: 1.25rem;\n}\n\n.RadioButton-module_containerLg__6cNDS {\n  height: 1.5rem;\n}\n\n/* Radio border colors */\n.RadioButton-module_radioBorderDefault__XKQUN {\n  border-color: #d1d5db;\n}\n\n.RadioButton-module_radioBorderRequired__P4-sB {\n  border-color: #ef4444;\n}\n\n/* Radio variants - checked state colors */\n.RadioButton-module_radioDefault__3eGat {\n  color: #2563eb;\n}\n\n.RadioButton-module_radioPrimary__SdKsD {\n  color: #4f46e5;\n}\n\n.RadioButton-module_radioSuccess__Kktb6 {\n  color: #16a34a;\n}\n\n.RadioButton-module_radioWarning__nGt0i {\n  color: #ca8a04;\n}\n\n.RadioButton-module_radioDanger__VVih- {\n  color: #dc2626;\n}\n\n/* Radio focus ring colors */\n.RadioButton-module_radioFocusDefault__2vgX4:focus {\n  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);\n}\n\n.RadioButton-module_radioFocusPrimary__xowqj:focus {\n  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);\n}\n\n.RadioButton-module_radioFocusSuccess__Kjf-i:focus {\n  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);\n}\n\n.RadioButton-module_radioFocusWarning__70geb:focus {\n  box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.2);\n}\n\n.RadioButton-module_radioFocusDanger__iEn6l:focus {\n  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);\n}\n\n/* Content wrapper */\n.RadioButton-module_contentWrapper__ZO1lz {\n  margin-left: 0.75rem;\n  flex: 1;\n}\n\n/* Label styles */\n.RadioButton-module_label__51-xH {\n  display: block;\n  font-weight: 500;\n  cursor: pointer;\n}\n\n.RadioButton-module_labelSm__3EYBQ {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n\n.RadioButton-module_labelMd__zaX9f {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n\n.RadioButton-module_labelLg__GVVcz {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n\n.RadioButton-module_labelDefault__JR0tu {\n  color: #374151;\n}\n\n.RadioButton-module_labelDisabled__ZxGi4 {\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n\n.RadioButton-module_labelRequired__zi0lY {\n  color: #dc2626;\n  cursor: pointer;\n}\n\n/* Description styles */\n.RadioButton-module_description__wQLxD {\n  margin-top: 0.125rem;\n  color: #6b7280;\n}\n\n.RadioButton-module_descriptionSm__HvSLH {\n  font-size: 0.625rem;\n  line-height: 0.875rem;\n}\n\n.RadioButton-module_descriptionMd__DPo-2 {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n\n.RadioButton-module_descriptionLg__ARNPn {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n\n/* Error message styles */\n.RadioButton-module_error__WmXjN {\n  margin-top: 0.125rem;\n  color: #dc2626;\n}\n\n.RadioButton-module_errorSm__um4SY {\n  font-size: 0.625rem;\n  line-height: 0.875rem;\n}\n\n.RadioButton-module_errorMd__DgI7N {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n\n.RadioButton-module_errorLg__u-854 {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n";
+var styles = {"container":"RadioButton-module_container__djpgH","radioWrapper":"RadioButton-module_radioWrapper__B--bk","radio":"RadioButton-module_radio__0qwuN","radioDisabled":"RadioButton-module_radioDisabled__-Go-G","radioSm":"RadioButton-module_radioSm__OFgkW","radioMd":"RadioButton-module_radioMd__ODMND","radioLg":"RadioButton-module_radioLg__JNQ1i","containerSm":"RadioButton-module_containerSm__lRtj6","containerMd":"RadioButton-module_containerMd__0M3ye","containerLg":"RadioButton-module_containerLg__6cNDS","radioBorderDefault":"RadioButton-module_radioBorderDefault__XKQUN","radioBorderRequired":"RadioButton-module_radioBorderRequired__P4-sB","radioDefault":"RadioButton-module_radioDefault__3eGat","radioPrimary":"RadioButton-module_radioPrimary__SdKsD","radioSuccess":"RadioButton-module_radioSuccess__Kktb6","radioWarning":"RadioButton-module_radioWarning__nGt0i","radioDanger":"RadioButton-module_radioDanger__VVih-","radioFocusDefault":"RadioButton-module_radioFocusDefault__2vgX4","radioFocusPrimary":"RadioButton-module_radioFocusPrimary__xowqj","radioFocusSuccess":"RadioButton-module_radioFocusSuccess__Kjf-i","radioFocusWarning":"RadioButton-module_radioFocusWarning__70geb","radioFocusDanger":"RadioButton-module_radioFocusDanger__iEn6l","contentWrapper":"RadioButton-module_contentWrapper__ZO1lz","label":"RadioButton-module_label__51-xH","labelSm":"RadioButton-module_labelSm__3EYBQ","labelMd":"RadioButton-module_labelMd__zaX9f","labelLg":"RadioButton-module_labelLg__GVVcz","labelDefault":"RadioButton-module_labelDefault__JR0tu","labelDisabled":"RadioButton-module_labelDisabled__ZxGi4","labelRequired":"RadioButton-module_labelRequired__zi0lY","description":"RadioButton-module_description__wQLxD","descriptionSm":"RadioButton-module_descriptionSm__HvSLH","descriptionMd":"RadioButton-module_descriptionMd__DPo-2","descriptionLg":"RadioButton-module_descriptionLg__ARNPn","error":"RadioButton-module_error__WmXjN","errorSm":"RadioButton-module_errorSm__um4SY","errorMd":"RadioButton-module_errorMd__DgI7N","errorLg":"RadioButton-module_errorLg__u-854"};
+styleInject(css_248z);
+
+const classNames = (...classes) => classes.filter(Boolean).join(" ");
 const sizeClasses = {
     sm: {
-        radio: "w-3 h-3",
-        label: "text-xs",
-        description: "text-[10px]",
-        container: "h-4",
+        radio: styles.radioSm,
+        label: styles.labelSm,
+        description: styles.descriptionSm,
+        container: styles.containerSm,
     },
     md: {
-        radio: "w-4 h-4",
-        label: "text-sm",
-        description: "text-xs",
-        container: "h-5",
+        radio: styles.radioMd,
+        label: styles.labelMd,
+        description: styles.descriptionMd,
+        container: styles.containerMd,
     },
     lg: {
-        radio: "w-5 h-5",
-        label: "text-base",
-        description: "text-sm",
-        container: "h-6",
+        radio: styles.radioLg,
+        label: styles.labelLg,
+        description: styles.descriptionLg,
+        container: styles.containerLg,
     },
 };
 const variantClasses = {
     default: {
-        checked: "text-blue-600",
-        focus: "focus:ring-blue-500",
+        checked: styles.radioDefault,
+        focus: styles.radioFocusDefault,
     },
     primary: {
-        checked: "text-indigo-600",
-        focus: "focus:ring-indigo-500",
+        checked: styles.radioPrimary,
+        focus: styles.radioFocusPrimary,
     },
     success: {
-        checked: "text-green-600",
-        focus: "focus:ring-green-500",
+        checked: styles.radioSuccess,
+        focus: styles.radioFocusSuccess,
     },
     warning: {
-        checked: "text-yellow-600",
-        focus: "focus:ring-yellow-500",
+        checked: styles.radioWarning,
+        focus: styles.radioFocusWarning,
     },
     danger: {
-        checked: "text-red-600",
-        focus: "focus:ring-red-500",
+        checked: styles.radioDanger,
+        focus: styles.radioFocusDanger,
     },
 };
 const RadioButton = ({ id, name, label, value, checked = false, onChange, disabled = false, description, error, className = "", required = false, size = "md", variant = "default", }) => {
@@ -477,23 +509,21 @@ const RadioButton = ({ id, name, label, value, checked = false, onChange, disabl
             onChange(event.target.value);
         }
     };
-    return (jsxRuntimeExports.jsxs("div", { className: `flex ${className}`, children: [jsxRuntimeExports.jsx("div", { className: `flex items-start ${sizes.container}`, children: jsxRuntimeExports.jsx("input", { id: radioId, name: name, type: "radio", value: value, checked: checked, onChange: handleChange, disabled: disabled, required: required, className: `
-            ${sizes.radio}
-            ${required && !checked ? "border-red-500" : "border-gray-300"}
-            ${variants.checked}
-            ${variants.focus}
-            focus:ring-2
-            focus:ring-offset-0
-            disabled:opacity-50
-            disabled:cursor-not-allowed
-            cursor-pointer
-            transition-colors
-          `, "aria-describedby": description ? `${radioId}-description` : undefined, "aria-invalid": !!error }) }), jsxRuntimeExports.jsxs("div", { className: "ml-3 flex-1", children: [jsxRuntimeExports.jsx("label", { htmlFor: radioId, className: `
-            ${sizes.label}
-            font-medium
-            ${disabled ? "text-gray-400 cursor-not-allowed" : required && !checked ? "text-red-600 cursor-pointer" : "text-gray-700 cursor-pointer"}
-            block
-          `, children: label }), description && (jsxRuntimeExports.jsx("p", { id: `${radioId}-description`, className: `${sizes.description} text-gray-500 mt-0.5`, children: description })), error && (jsxRuntimeExports.jsx("p", { className: `${sizes.description} text-red-600 mt-0.5`, children: error }))] })] }));
+    const radioClasses = classNames(styles.radio, sizes.radio, sizes.container, variants.checked, variants.focus, required && !checked
+        ? styles.radioBorderRequired
+        : styles.radioBorderDefault, disabled && styles.radioDisabled);
+    const labelClasses = classNames(styles.label, sizes.label, disabled
+        ? styles.labelDisabled
+        : required && !checked
+            ? styles.labelRequired
+            : styles.labelDefault);
+    const descriptionClasses = classNames(styles.description, sizes.description);
+    const errorClasses = classNames(styles.error, size === "sm"
+        ? styles.errorSm
+        : size === "lg"
+            ? styles.errorLg
+            : styles.errorMd);
+    return (jsxRuntimeExports.jsxs("div", { className: classNames(styles.container, className), "data-testid": "radio-button-container", "data-size": size, "data-variant": variant, "data-checked": checked, "data-disabled": disabled, "data-error": !!error, children: [jsxRuntimeExports.jsx("div", { className: classNames(styles.radioWrapper, sizes.container), children: jsxRuntimeExports.jsx("input", { id: radioId, name: name, type: "radio", value: value, checked: checked, onChange: handleChange, disabled: disabled, required: required, className: radioClasses, "aria-describedby": description ? `${radioId}-description` : undefined, "aria-invalid": !!error }) }), jsxRuntimeExports.jsxs("div", { className: styles.contentWrapper, children: [jsxRuntimeExports.jsx("label", { htmlFor: radioId, className: labelClasses, children: label }), description && (jsxRuntimeExports.jsx("p", { id: `${radioId}-description`, className: descriptionClasses, children: description })), error && jsxRuntimeExports.jsx("p", { className: errorClasses, children: error })] })] }));
 };
 
 const RadioGroup = ({ name, options, value, onChange, orientation = "vertical", size = "md", variant = "default", disabled = false, required = false, error, className = "", showSelectedLabel = false, selectedLabelText = "Selected:", groupLabel, bordered = false, borderLabel, }) => {

package/dist/index.esm.js

@@ -422,46 +422,78 @@ function requireJsxRuntime () {
 
 var jsxRuntimeExports = requireJsxRuntime();
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = "/* Container */\n.RadioButton-module_container__djpgH {\n  display: flex;\n}\n\n/* Radio wrapper */\n.RadioButton-module_radioWrapper__B--bk {\n  display: flex;\n  align-items: flex-start;\n}\n\n/* Radio input base styles */\n.RadioButton-module_radio__0qwuN {\n  cursor: pointer;\n  transition: all 150ms ease;\n  border-width: 1px;\n  border-style: solid;\n}\n\n.RadioButton-module_radio__0qwuN:focus {\n  outline: none;\n  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);\n  border-color: currentColor;\n}\n\n.RadioButton-module_radioDisabled__-Go-G {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.RadioButton-module_radioDisabled__-Go-G:focus {\n  box-shadow: none;\n}\n\n/* Radio sizes */\n.RadioButton-module_radioSm__OFgkW {\n  width: 0.75rem;\n  height: 0.75rem;\n}\n\n.RadioButton-module_radioMd__ODMND {\n  width: 1rem;\n  height: 1rem;\n}\n\n.RadioButton-module_radioLg__JNQ1i {\n  width: 1.25rem;\n  height: 1.25rem;\n}\n\n/* Container heights for alignment */\n.RadioButton-module_containerSm__lRtj6 {\n  height: 1rem;\n}\n\n.RadioButton-module_containerMd__0M3ye {\n  height: 1.25rem;\n}\n\n.RadioButton-module_containerLg__6cNDS {\n  height: 1.5rem;\n}\n\n/* Radio border colors */\n.RadioButton-module_radioBorderDefault__XKQUN {\n  border-color: #d1d5db;\n}\n\n.RadioButton-module_radioBorderRequired__P4-sB {\n  border-color: #ef4444;\n}\n\n/* Radio variants - checked state colors */\n.RadioButton-module_radioDefault__3eGat {\n  color: #2563eb;\n}\n\n.RadioButton-module_radioPrimary__SdKsD {\n  color: #4f46e5;\n}\n\n.RadioButton-module_radioSuccess__Kktb6 {\n  color: #16a34a;\n}\n\n.RadioButton-module_radioWarning__nGt0i {\n  color: #ca8a04;\n}\n\n.RadioButton-module_radioDanger__VVih- {\n  color: #dc2626;\n}\n\n/* Radio focus ring colors */\n.RadioButton-module_radioFocusDefault__2vgX4:focus {\n  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);\n}\n\n.RadioButton-module_radioFocusPrimary__xowqj:focus {\n  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);\n}\n\n.RadioButton-module_radioFocusSuccess__Kjf-i:focus {\n  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.2);\n}\n\n.RadioButton-module_radioFocusWarning__70geb:focus {\n  box-shadow: 0 0 0 2px rgba(202, 138, 4, 0.2);\n}\n\n.RadioButton-module_radioFocusDanger__iEn6l:focus {\n  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2);\n}\n\n/* Content wrapper */\n.RadioButton-module_contentWrapper__ZO1lz {\n  margin-left: 0.75rem;\n  flex: 1;\n}\n\n/* Label styles */\n.RadioButton-module_label__51-xH {\n  display: block;\n  font-weight: 500;\n  cursor: pointer;\n}\n\n.RadioButton-module_labelSm__3EYBQ {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n\n.RadioButton-module_labelMd__zaX9f {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n\n.RadioButton-module_labelLg__GVVcz {\n  font-size: 1rem;\n  line-height: 1.5rem;\n}\n\n.RadioButton-module_labelDefault__JR0tu {\n  color: #374151;\n}\n\n.RadioButton-module_labelDisabled__ZxGi4 {\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n\n.RadioButton-module_labelRequired__zi0lY {\n  color: #dc2626;\n  cursor: pointer;\n}\n\n/* Description styles */\n.RadioButton-module_description__wQLxD {\n  margin-top: 0.125rem;\n  color: #6b7280;\n}\n\n.RadioButton-module_descriptionSm__HvSLH {\n  font-size: 0.625rem;\n  line-height: 0.875rem;\n}\n\n.RadioButton-module_descriptionMd__DPo-2 {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n\n.RadioButton-module_descriptionLg__ARNPn {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n\n/* Error message styles */\n.RadioButton-module_error__WmXjN {\n  margin-top: 0.125rem;\n  color: #dc2626;\n}\n\n.RadioButton-module_errorSm__um4SY {\n  font-size: 0.625rem;\n  line-height: 0.875rem;\n}\n\n.RadioButton-module_errorMd__DgI7N {\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n\n.RadioButton-module_errorLg__u-854 {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n}\n";
+var styles = {"container":"RadioButton-module_container__djpgH","radioWrapper":"RadioButton-module_radioWrapper__B--bk","radio":"RadioButton-module_radio__0qwuN","radioDisabled":"RadioButton-module_radioDisabled__-Go-G","radioSm":"RadioButton-module_radioSm__OFgkW","radioMd":"RadioButton-module_radioMd__ODMND","radioLg":"RadioButton-module_radioLg__JNQ1i","containerSm":"RadioButton-module_containerSm__lRtj6","containerMd":"RadioButton-module_containerMd__0M3ye","containerLg":"RadioButton-module_containerLg__6cNDS","radioBorderDefault":"RadioButton-module_radioBorderDefault__XKQUN","radioBorderRequired":"RadioButton-module_radioBorderRequired__P4-sB","radioDefault":"RadioButton-module_radioDefault__3eGat","radioPrimary":"RadioButton-module_radioPrimary__SdKsD","radioSuccess":"RadioButton-module_radioSuccess__Kktb6","radioWarning":"RadioButton-module_radioWarning__nGt0i","radioDanger":"RadioButton-module_radioDanger__VVih-","radioFocusDefault":"RadioButton-module_radioFocusDefault__2vgX4","radioFocusPrimary":"RadioButton-module_radioFocusPrimary__xowqj","radioFocusSuccess":"RadioButton-module_radioFocusSuccess__Kjf-i","radioFocusWarning":"RadioButton-module_radioFocusWarning__70geb","radioFocusDanger":"RadioButton-module_radioFocusDanger__iEn6l","contentWrapper":"RadioButton-module_contentWrapper__ZO1lz","label":"RadioButton-module_label__51-xH","labelSm":"RadioButton-module_labelSm__3EYBQ","labelMd":"RadioButton-module_labelMd__zaX9f","labelLg":"RadioButton-module_labelLg__GVVcz","labelDefault":"RadioButton-module_labelDefault__JR0tu","labelDisabled":"RadioButton-module_labelDisabled__ZxGi4","labelRequired":"RadioButton-module_labelRequired__zi0lY","description":"RadioButton-module_description__wQLxD","descriptionSm":"RadioButton-module_descriptionSm__HvSLH","descriptionMd":"RadioButton-module_descriptionMd__DPo-2","descriptionLg":"RadioButton-module_descriptionLg__ARNPn","error":"RadioButton-module_error__WmXjN","errorSm":"RadioButton-module_errorSm__um4SY","errorMd":"RadioButton-module_errorMd__DgI7N","errorLg":"RadioButton-module_errorLg__u-854"};
+styleInject(css_248z);
+
+const classNames = (...classes) => classes.filter(Boolean).join(" ");
 const sizeClasses = {
     sm: {
-        radio: "w-3 h-3",
-        label: "text-xs",
-        description: "text-[10px]",
-        container: "h-4",
+        radio: styles.radioSm,
+        label: styles.labelSm,
+        description: styles.descriptionSm,
+        container: styles.containerSm,
     },
     md: {
-        radio: "w-4 h-4",
-        label: "text-sm",
-        description: "text-xs",
-        container: "h-5",
+        radio: styles.radioMd,
+        label: styles.labelMd,
+        description: styles.descriptionMd,
+        container: styles.containerMd,
     },
     lg: {
-        radio: "w-5 h-5",
-        label: "text-base",
-        description: "text-sm",
-        container: "h-6",
+        radio: styles.radioLg,
+        label: styles.labelLg,
+        description: styles.descriptionLg,
+        container: styles.containerLg,
     },
 };
 const variantClasses = {
     default: {
-        checked: "text-blue-600",
-        focus: "focus:ring-blue-500",
+        checked: styles.radioDefault,
+        focus: styles.radioFocusDefault,
     },
     primary: {
-        checked: "text-indigo-600",
-        focus: "focus:ring-indigo-500",
+        checked: styles.radioPrimary,
+        focus: styles.radioFocusPrimary,
     },
     success: {
-        checked: "text-green-600",
-        focus: "focus:ring-green-500",
+        checked: styles.radioSuccess,
+        focus: styles.radioFocusSuccess,
     },
     warning: {
-        checked: "text-yellow-600",
-        focus: "focus:ring-yellow-500",
+        checked: styles.radioWarning,
+        focus: styles.radioFocusWarning,
     },
     danger: {
-        checked: "text-red-600",
-        focus: "focus:ring-red-500",
+        checked: styles.radioDanger,
+        focus: styles.radioFocusDanger,
     },
 };
 const RadioButton = ({ id, name, label, value, checked = false, onChange, disabled = false, description, error, className = "", required = false, size = "md", variant = "default", }) => {
@@ -473,23 +505,21 @@ const RadioButton = ({ id, name, label, value, checked = false, onChange, disabl
             onChange(event.target.value);
         }
     };
-    return (jsxRuntimeExports.jsxs("div", { className: `flex ${className}`, children: [jsxRuntimeExports.jsx("div", { className: `flex items-start ${sizes.container}`, children: jsxRuntimeExports.jsx("input", { id: radioId, name: name, type: "radio", value: value, checked: checked, onChange: handleChange, disabled: disabled, required: required, className: `
-            ${sizes.radio}
-            ${required && !checked ? "border-red-500" : "border-gray-300"}
-            ${variants.checked}
-            ${variants.focus}
-            focus:ring-2
-            focus:ring-offset-0
-            disabled:opacity-50
-            disabled:cursor-not-allowed
-            cursor-pointer
-            transition-colors
-          `, "aria-describedby": description ? `${radioId}-description` : undefined, "aria-invalid": !!error }) }), jsxRuntimeExports.jsxs("div", { className: "ml-3 flex-1", children: [jsxRuntimeExports.jsx("label", { htmlFor: radioId, className: `
-            ${sizes.label}
-            font-medium
-            ${disabled ? "text-gray-400 cursor-not-allowed" : required && !checked ? "text-red-600 cursor-pointer" : "text-gray-700 cursor-pointer"}
-            block
-          `, children: label }), description && (jsxRuntimeExports.jsx("p", { id: `${radioId}-description`, className: `${sizes.description} text-gray-500 mt-0.5`, children: description })), error && (jsxRuntimeExports.jsx("p", { className: `${sizes.description} text-red-600 mt-0.5`, children: error }))] })] }));
+    const radioClasses = classNames(styles.radio, sizes.radio, sizes.container, variants.checked, variants.focus, required && !checked
+        ? styles.radioBorderRequired
+        : styles.radioBorderDefault, disabled && styles.radioDisabled);
+    const labelClasses = classNames(styles.label, sizes.label, disabled
+        ? styles.labelDisabled
+        : required && !checked
+            ? styles.labelRequired
+            : styles.labelDefault);
+    const descriptionClasses = classNames(styles.description, sizes.description);
+    const errorClasses = classNames(styles.error, size === "sm"
+        ? styles.errorSm
+        : size === "lg"
+            ? styles.errorLg
+            : styles.errorMd);
+    return (jsxRuntimeExports.jsxs("div", { className: classNames(styles.container, className), "data-testid": "radio-button-container", "data-size": size, "data-variant": variant, "data-checked": checked, "data-disabled": disabled, "data-error": !!error, children: [jsxRuntimeExports.jsx("div", { className: classNames(styles.radioWrapper, sizes.container), children: jsxRuntimeExports.jsx("input", { id: radioId, name: name, type: "radio", value: value, checked: checked, onChange: handleChange, disabled: disabled, required: required, className: radioClasses, "aria-describedby": description ? `${radioId}-description` : undefined, "aria-invalid": !!error }) }), jsxRuntimeExports.jsxs("div", { className: styles.contentWrapper, children: [jsxRuntimeExports.jsx("label", { htmlFor: radioId, className: labelClasses, children: label }), description && (jsxRuntimeExports.jsx("p", { id: `${radioId}-description`, className: descriptionClasses, children: description })), error && jsxRuntimeExports.jsx("p", { className: errorClasses, children: error })] })] }));
 };
 
 const RadioGroup = ({ name, options, value, onChange, orientation = "vertical", size = "md", variant = "default", disabled = false, required = false, error, className = "", showSelectedLabel = false, selectedLabelText = "Selected:", groupLabel, bordered = false, borderLabel, }) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rubenpazch/radio-button",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "Accessible radio button and radio group components with variants and validation",
   "private": false,
   "main": "dist/index.cjs.js",
@@ -16,7 +16,9 @@
   "files": [
     "dist"
   ],
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "exports": {
     ".": {
       "import": "./dist/index.esm.js",