@proyecto-viviana/ui 0.2.3 → 0.3.1

package/dist/index.ssr.js

@@ -442,10 +442,11 @@ function RadioGroup(props) {
     const disabledClass = renderProps.isDisabled ? "opacity-50" : "";
     return [base, orientationClass, disabledClass, customClass].filter(Boolean).join(" ");
   };
+  const radioGroupProps = headlessProps;
   return _$createComponent7(RadioSizeContext.Provider, {
     value: size,
     get children() {
-      return _$createComponent7(HeadlessRadioGroup, _$mergeProps4(headlessProps, {
+      return _$createComponent7(HeadlessRadioGroup, _$mergeProps4(radioGroupProps, {
         "class": getClassName,
         "data-size": size,
         get children() {
@@ -477,31 +478,33 @@ function RadioGroup(props) {
   });
 }
 function Radio(props) {
-  const [local, headlessProps] = splitProps4(props, ["class"]);
-  const sizeFromContext = useContext(RadioSizeContext);
-  const sizeStyle = sizeStyles5[sizeFromContext];
+  const size = useContext(RadioSizeContext) ?? "md";
+  const [local, headlessProps] = splitProps4(props, ["class", "children"]);
   const customClass = local.class ?? "";
+  const styles = sizeStyles5[size];
   const getClassName = (renderProps) => {
-    const base = "inline-flex items-center gap-2";
-    const cursorClass = renderProps.isDisabled ? "cursor-not-allowed" : "cursor-pointer";
-    const disabledClass = renderProps.isDisabled ? "opacity-50" : "";
-    return [base, cursorClass, disabledClass, customClass].filter(Boolean).join(" ");
+    const base = "group flex items-center gap-3 cursor-pointer";
+    const disabledClass = renderProps.isDisabled ? "cursor-not-allowed opacity-50" : "";
+    return [base, disabledClass, customClass].filter(Boolean).join(" ");
+  };
+  const getCircleClassName = (renderProps) => {
+    const base = `rounded-full border-2 flex items-center justify-center transition-all ${styles.circle}`;
+    const selectedClass = renderProps.isSelected ? "border-accent-500 bg-accent-500" : "border-primary-400 bg-transparent group-hover:border-accent-400";
+    const disabledClass = renderProps.isDisabled ? "border-primary-600" : "";
+    const focusClass = renderProps.isFocusVisible ? "ring-2 ring-accent-500 ring-offset-2 ring-offset-bg" : "";
+    return [base, selectedClass, disabledClass, focusClass].filter(Boolean).join(" ");
+  };
+  const getDotClassName = (renderProps) => {
+    const base = `rounded-full bg-white transition-transform ${styles.dot}`;
+    const selectedClass = renderProps.isSelected ? "scale-100" : "scale-0";
+    return [base, selectedClass].filter(Boolean).join(" ");
+  };
+  const getLabelClassName = () => {
+    return `text-primary-200 select-none ${styles.label}`;
   };
-  const circleClass = `relative flex items-center justify-center rounded-full border-2 transition-all duration-200 ${sizeStyle.circle} border-primary-600 bg-transparent hover:border-accent-300`;
-  const dotClass = `rounded-full bg-accent transition-all duration-200 ${sizeStyle.dot}`;
-  const labelClass = `text-primary-200 ${sizeStyle.label}`;
   return _$createComponent7(HeadlessRadio, _$mergeProps4(headlessProps, {
     "class": getClassName,
-    get children() {
-      return [_$ssr7(_tmpl$44, _$ssrAttribute4("class", _$escape7(circleClass, true), false), _$ssrAttribute4("class", _$escape7(dotClass, true), false)), _$createComponent7(Show5, {
-        get when() {
-          return props.children;
-        },
-        get children() {
-          return _$ssr7(_tmpl$54, _$ssrAttribute4("class", _$escape7(labelClass, true), false), _$escape7(props.children));
-        }
-      })];
-    }
+    children: (renderProps) => [_$ssr7(_tmpl$44, _$ssrAttribute4("class", _$escape7(getCircleClassName(renderProps), true), false), _$ssrAttribute4("class", _$escape7(getDotClassName(renderProps), true), false)), _$ssr7(_tmpl$54, _$ssrAttribute4("class", _$escape7(getLabelClassName(), true), false), _$escape7(local.children))]
   }));
 }