feat: complete basic design

app/javascript/v3/components/Form/Avatar.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    class="rounded-xl h-[72px] w-[72px] flex leading-[100%] font-medium items-center justify-center text-center cursor-default bg-ash-200 text-ash-900"
+    :style="style"
+    aria-hidden="true"
+  >
+    <slot>{{ userInitial }}</slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Avatar',
+  props: {
+    username: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: Number,
+      default: 40,
+    },
+  },
+  computed: {
+    style() {
+      return {
+        fontSize: `${Math.floor(this.size / 2.5)}px`,
+      };
+    },
+    userInitial() {
+      const parts = this.username.split(/[ -]/);
+      let initials = parts.reduce((acc, curr) => acc + curr.charAt(0), '');
+
+      if (initials.length > 2 && initials.search(/[A-Z]/) !== -1) {
+        initials = initials.replace(/[a-z]+/g, '');
+      }
+      initials = initials.substring(0, 2).toUpperCase();
+
+      return initials;
+    },
+  },
+};
+</script>

app/javascript/v3/components/Form/Button.vue

@@ -3,10 +3,15 @@
     class="inline-flex items-center gap-1 text-sm font-medium reset-base rounded-xl w-fit"
     :type="type"
     :class="buttonClasses"
-    :disabled="isDisabled || isLoading"
+    :disabled="isDisabled"
     @click="handleClick"
   >
-    <fluent-icon :size="iconSize" :icon="icon" class="flex-shrink-0" />
+    <fluent-icon
+      v-if="icon"
+      :size="iconSize"
+      :icon="icon"
+      class="flex-shrink-0"
+    />
     <span
       v-if="$slots.default"
       class="text-sm font-medium truncate"
@@ -14,7 +19,12 @@
     >
       <slot />
     </span>
-    <fluent-icon :size="iconSize" icon="chevron-right" class="flex-shrink-0" />
+    <fluent-icon
+      v-if="rightIcon"
+      :size="iconSize"
+      icon="chevron-right"
+      class="flex-shrink-0"
+    />
   </button>
 </template>
 <script>
@@ -60,41 +70,21 @@ export default {
       type: Boolean,
       default: false,
     },
+    rightIcon: {
+      type: Boolean,
+      default: false,
+    },
   },
   computed: {
-    // variantClasses() {
-    //   if (this.variant.includes('link')) {
-    //     return `clear ${this.variant}`;
-    //   }
-    //   return this.variant;
-    // },
-    // hasOnlyIcon() {
-    //   const hasEmojiOrIcon = this.emoji || this.icon;
-    //   return !this.$slots.default && hasEmojiOrIcon;
-    // },
-    // hasOnlyIconClasses() {
-    //   return this.hasOnlyIcon ? 'button--only-icon' : '';
-    // },
-
     buttonClasses() {
-      return [
-        this.colorClass,
-        this.sizeClass,
-        // this.variantClasses,
-        // this.hasOnlyIconClasses,
-        // this.size,
-        // this.colorClass,
-        // this.classNames,
-        // this.isDisabled ? 'disabled' : '',
-        // this.isExpanded ? 'expanded' : '',
-      ];
+      return [this.colorClass, this.sizeClass];
     },
     colorClass() {
       if (this.colorScheme === 'primary') {
         return 'bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-700 focus:ring focus:ring-offset-1 focus:ring-primary-400';
       }
       if (this.colorScheme === 'secondary') {
-        return 'bg-ash-100 text-white hover:bg-ash-200 active:bg-ash-200 focus:ring focus:ring-offset-1 focus:ring-ash-400';
+        return 'bg-ash-100 text-ash-900 hover:bg-ash-200 active:bg-ash-200 focus:ring focus:ring-offset-1 focus:ring-ash-400';
       }
       if (this.colorScheme === 'danger') {
         return 'bg-ruby-600 text-white hover:bg-ruby-700 active:bg-ruby-700 focus:ring focus:ring-offset-1 focus:ring-ruby-400';

app/javascript/v3/components/Form/Select.vue

@@ -11,11 +11,11 @@
       :selected="value"
       :name="name"
       :class="{
-        'text-slate-400': !value,
-        'text-slate-900 dark:text-slate-100': value,
+        'text-ash-400': !value,
+        'text-ash-900': value,
         'pl-9': icon,
       }"
-      class="block w-full px-3 py-2 pr-6 mb-0 border-0 rounded-md shadow-sm outline-none appearance-none select-caret ring-1 ring-inset placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 dark:bg-slate-700 dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200"
+      class="block w-full px-3 py-2 pr-6 mb-0 border-0 shadow-sm outline-none appearance-none rounded-xl select-caret ring-1 ring-inset placeholder:text-ash-900 focus:ring-2 focus:ring-inset focus:ring-primary-500 sm:text-sm sm:leading-6"
       @input="onInput"
     >
       <option value="" disabled selected class="hidden">