feat: radio

src/WCheckBox/WCheckBox.scss

@@ -14,8 +14,7 @@
     color: theme('colors.indigo.600');
     transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
     &:focus {
-      outline: 2px solid transparent;
-      outline-offset: 2px;
+      outline: none;
       box-shadow: 0 0 0 2px theme('colors.white'), 0 0 0 4px theme('colors.indigo.500');
     }
     &:disabled {

src/WIcon/WIcon.scss

@@ -0,0 +1,28 @@
+.w-icon {
+  display: inline-flex;
+  align-items: center;
+  color: inherit;
+  font-style: normal;
+  height: 1em;
+  width: 1em;
+  text-align: center;
+  text-transform: none;
+  vertical-align: -0.125em;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  > svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  &-spin svg {
+    animation: w-icon-spin 1s infinite linear;
+  }
+}
+
+@keyframes w-icon-spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/WIcon/WIcon.vue

@@ -14,39 +14,7 @@ const iconSize = computed(() => {
 })
 </script>
 <template>
-  <span role="img" class="e-icon" :class="{ 'e-icon-spin': props.spin }" :style="iconSize">
+  <span role="img" class="w-icon" :class="{ 'w-icon-spin': props.spin }" :style="iconSize">
     <slot />
   </span>
 </template>
-<style lang="scss">
-@keyframes e-icon-spin {
-  100% {
-    transform: rotate(360deg);
-  }
-}
-.e-svg-spin {
-  animation: e-icon-spin 1s infinite linear;
-}
-.e-icon {
-  display: inline-flex;
-  align-items: center;
-  color: inherit;
-  font-style: normal;
-  height: 1em;
-  width: 1em;
-  text-align: center;
-  text-transform: none;
-  vertical-align: -0.125em;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  > svg {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-  &-spin svg {
-    animation: e-icon-spin 1s infinite linear;
-  }
-}
-</style>

src/WInput/WInput.scss

@@ -27,7 +27,7 @@
     padding-left: 0.5rem;
     padding-right: 0.75rem;
   }
-  &_input {
+  &_wraper {
     // @apply w-full flex flex-1 items-center border border-gray-300 border-solid bg-white px-3 transition-all group-[.is-disabled]:cursor-not-allowed first:rounded-l-md last:rounded-r-md group-[.is-disabled]:bg-gray-50 group-[.is-disabled]:text-gray-500;
     width: 100%;
     display: flex;
@@ -46,7 +46,7 @@
       border-bottom-right-radius: 0.375rem;
     }
   }
-  &_control {
+  &_input {
     flex: 1;
     border: none;
     background-color: transparent;
@@ -68,14 +68,14 @@
   }
 
   &.is-focused {
-    .w-input_input {
+    .w-input_wraper {
       z-index: 10;
       border-color: theme('colors.indigo.500');
       box-shadow: 0 0 0 1px theme('colors.indigo.500');
     }
   }
   &.is-disabled {
-    .w-input_input {
+    .w-input_wraper {
       cursor: not-allowed;
       background-color: theme('colors.gray.50');
       opacity: 0.5;

src/WInput/WInput.vue

@@ -16,10 +16,10 @@ const focused = ref(false)
     <span class="w-input_before" v-if="$slots.before">
       <slot name="before" />
     </span>
-    <span class="w-input_input">
+    <span class="w-input_wraper">
       <span class="w-input_prefix" v-if="prefix">{{ prefix }}</span>
       <input
-        class="w-input_control"
+        class="w-input_input"
         style="box-shadow: none"
         type="text"
         @focus="focused = true"

src/WRadio/WRadio.scss

@@ -0,0 +1,29 @@
+.w-radio {
+  display: inline-flex;
+  align-items: center;
+  &.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+  &_input {
+    height: 1rem;
+    width: 1rem;
+    border: 1px solid theme('colors.gray.300');
+    color: theme('colors.indigo.600');
+    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    &:focus {
+      outline: none;
+      box-shadow: 0 0 0 2px theme('colors.white'), 0 0 0 4px theme('colors.indigo.500');
+    }
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+  &_label {
+    margin-left: 0.5rem;
+    line-height: 1.25rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: theme('colors.gray.700');
+  }
+}

src/WRadio/WRadio.vue

@@ -47,17 +47,9 @@ const onBlur = (e: Event) => {
 }
 </script>
 <template>
-  <label class="e-radio inline-flex items-center" :class="[disabled && 'cursor-not-allowed opacity-50']">
-    <div class="flex items-center">
-      <input
-        :name="name"
-        type="radio"
-        :disabled="disabled"
-        :checked="innerChecked"
-        class="h-4 w-4 border-gray-300 text-indigo-600 transition-all disabled:opacity-50 focus:ring-indigo-500"
-      />
-    </div>
-    <span class="ml-2 text-sm font-medium text-gray-700">
+  <label class="w-radio" :class="[disabled && 'is-disabled']">
+    <input :name="name" type="radio" :disabled="disabled" :checked="innerChecked" class="w-radio_input" />
+    <span class="w-radio_label">
       <slot />
     </span>
   </label>

src/styles/index.scss

@@ -2,11 +2,10 @@
 
 @import '../WButton/WButton.scss';
 @import '../WCheckBox/WCheckBox.scss';
+@import '../WRadio/WRadio.scss';
 @import '../WSwitch/WSwitch.scss';
 @import '../WInput/WInput.scss';
-
-:root {
-}
+@import '../WIcon/WIcon.scss';
 
 :where(.dark) {
   *,