siesa-ui-kit 1.0.2 → 1.0.4

package/src/components/Radio/Radio.tsx

@@ -101,7 +101,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(
       ? `
         !bg-primary-custom-600
         !border-primary-inverse-border
-        shadow-[0px_2px_0px_0px_inset_rgba(255,255,255,0.15)]
+        shadow-inner
         dark:!bg-dark-bg-inverse
         dark:!border-dark-bg-inverse
       `

package/src/components/Select/Select.stories.tsx

@@ -186,6 +186,25 @@ export const EstadosBasicos: Story = {
           </p>
         </div>
 
+        {/* Hover y Focus */}
+        <div>
+          <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
+            Estados Interactivos
+          </h3>
+          <Select
+            options={fruitOptions}
+            value={value1}
+            onChange={setValue1}
+            placeholder="Pasa el mouse o haz click para ver estados"
+            label="Fruta"
+          />
+          <p className="text-xs text-gray-500 dark:text-gray-300 mt-2">
+            • Hover: Border más claro (#f9f9f9)
+            <br />• Focus: Border azul de 2px (#329cff)
+            <br />• Click: Abre menú con opciones
+          </p>
+        </div>
+
         {/* Disabled */}
         <div>
           <h3 className="text-sm font-bold mb-4 text-gray-700 dark:text-white">
@@ -222,6 +241,19 @@ export const EstadosBasicos: Story = {
             Estado de error con mensaje de validación
           </p>
         </div>
+
+        {/* Caja de consejos */}
+        <div className="mt-6 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+          <p className="text-xs text-gray-600 dark:text-gray-300">
+            <strong>💡 Guía de Estados:</strong>
+            <br />• <strong>Default</strong>: Border estándar con placeholder gris
+            <br />• <strong>Hover</strong>: Border más claro para indicar interactividad
+            <br />• <strong>Focus</strong>: Border azul grueso (2px) para accesibilidad
+            <br />• <strong>Selected</strong>: Muestra el label de la opción seleccionada
+            <br />• <strong>Disabled</strong>: Opacidad 50% sin interactividad
+            <br />• <strong>Error</strong>: Border rojo con mensaje de error
+          </p>
+        </div>
       </div>
     );
   },