direcitonality input

package.json

@@ -21,6 +21,8 @@
     "test": "npm run test:only ."
   },
   "devDependencies": {
+    "@fontsource/inter": "^4.3.0",
+    "@tailwindcss/forms": "^0.3.2",
     "@vitejs/plugin-vue": "^1.2.2",
     "autoprefixer": "^10.2.5",
     "postcss": "^8.2.13",

src/interface/App.vue

@@ -1,11 +1,15 @@
 <template>
   <main class="h-screen w-screen flex flex-col items-center gap-12 p-24 bg-blue-gray-900">
-    <section class="w-full max-w-xl flex flex-col gap-3">
+    <section class="w-full max-w-xl flex flex-col gap-4">
       <h2 class="uppercase font-bold text-blue-gray-400 opacity-60 tracking-[.2em] text-sm">Selector</h2>
-      <pre class="mt-4 rounded-5 shadow-5 p-4 bg-violet-900 text-violet-300 overflow-x-scroll"><code>{{ selector }}</code></pre>
+      <pre class="rounded-md shadow-lg p-4 brand-gradient-to-r text-primary-300 overflow-x-scroll"><code>{{ selector || '*' }}</code></pre>
     </section>
-    <section class="w-full max-w-xl flex flex-col gap-3">
-      <h1 class="mt-8 uppercase font-bold text-blue-gray-400 opacity-60 tracking-[.2em] text-sm">Selector Builder</h1>
+    <section class="w-full max-w-xl flex flex-col gap-4">
+      <h1 class="uppercase font-bold text-blue-gray-400 opacity-60 tracking-[.2em] text-sm">Selector Builder</h1>
+
+      <section class="bg-blue-gray-800 p-6 rounded-md shadow-lg text-lg text-blue-gray-300">
+        <InputDirectionality label="Text directionality" />
+      </section>
     </section>
 
     <!-- <FormConditions
@@ -24,12 +28,14 @@ import type { Ref } from 'vue'
 import { nanoid } from 'nanoid'
 import { createReorder } from '@baleada/logic'
 // import FormConditions from './FormConditions.vue'
+import InputDirectionality from './InputDirectionality.vue'
 import { toSelector } from './toSelector'
 import type { Condition } from './toSelector'
 
 export default defineComponent({
   components: {
     // FormConditions,
+    InputDirectionality,
   },
   setup () {
     const conditions = ref<Condition[]>([]),

src/interface/InputDirectionality.vue

@@ -0,0 +1,59 @@
+<template>
+  <RadioGroup
+    class="flex flex-col gap-3"
+    v-model="selected"
+  >
+    <RadioGroupLabel class="input-label text-blue-gray-400">{{ label }}</RadioGroupLabel>
+    <div class="flex gap-4">
+      <RadioGroupOption
+        v-for="option in options"
+        :key="option.value"
+        :value="option"
+        v-slot="{ checked }"
+        class="flex"
+      >
+        <div
+          class="btn btn--lg mr-auto transition duration-150"
+          :class="checked ? 'bg-primary-800 text-primary-100' : 'bg-blue-gray-700 text-blue-gray-200 hover:bg-blue-gray-600 hover:text-blue-gray-100'"
+        >
+          <span >{{ option.name }}</span>
+        </div>
+      </RadioGroupOption>
+    </div>
+  </RadioGroup>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent } from 'vue'
+import {
+  RadioGroup,
+  RadioGroupLabel,
+  RadioGroupOption,
+} from '@headlessui/vue'
+import { CheckIcon } from '@heroicons/vue/solid'
+
+export default defineComponent({
+  components: {
+    RadioGroup,
+    RadioGroupLabel,
+    RadioGroupOption
+  },
+  props: {
+    label: {
+      type: String,
+    }
+  },
+  setup() {
+    const options = [
+            { name: 'left to right', value: 'ltr' },
+            { name: 'right to left', value: 'ltr' }
+          ],
+          selected = ref(options[0])
+
+    return {
+      selected,
+      options,
+    }
+  },
+})
+</script>

src/InputPipe.vue → src/interface/InputPipe.vue

@@ -29,7 +29,7 @@
           >
             <li
               :class="[
-                active ? 'text-violet-900 bg-violet-100' : 'text-blue-gray-900',
+                active ? 'text-primary-900 bg-primary-100' : 'text-blue-gray-900',
                 'cursor-default select-none relative py-2 pl-10 pr-4',
               ]"
             >
@@ -42,7 +42,7 @@
               >
               <span
                 v-if="selected"
-                class="absolute inset-y-0 left-0 flex items-center pl-3 text-violet-600"
+                class="absolute inset-y-0 left-0 flex items-center pl-3 text-primary-600"
               >
                 <CheckIcon class="w-5 h-5" aria-hidden="true" />
               </span>
@@ -55,7 +55,7 @@
 </template>
 
 <script lang="ts">
-import { ref } from 'vue'
+import { defineComponent, ref } from 'vue'
 import {
   Listbox,
   ListboxLabel,
@@ -66,7 +66,7 @@ import {
 import { CheckIcon, SelectorIcon } from '@heroicons/vue/solid'
 import { pipeMetadata } from './pipeMetadata'
 
-export default {
+export default defineComponent({
   components: {
     Listbox,
     ListboxLabel,
@@ -85,5 +85,5 @@ export default {
       selectedPipe,
     }
   },
-}
+})
 </script>

src/interface/entry.ts

@@ -1,5 +1,9 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import './index.css'
+import '@fontsource/inter/400.css'
+import '@fontsource/inter/500.css'
+import '@fontsource/inter/600.css'
+import '@fontsource/inter/700.css'
 
 createApp(App).mount('#app')

tailwind.config.js

@@ -1,4 +1,6 @@
 const colors = require('tailwindcss/colors')
+const plugin = require('tailwindcss/plugin')
+const defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
   mode: 'jit',
@@ -9,11 +11,41 @@ module.exports = {
       colors: {
         ...colors,
         'blue-gray': colors.blueGray,
+        primary: colors.violet
+      },
+      fontFamily: {
+        sans: ['Inter', ...defaultTheme.fontFamily.sans],
       },
     }
   },
   variants: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/forms'),
+    plugin(({ addComponents }) => addComponents({
+      // Buttons
+      '.btn': {
+        ...apply('flex items-center gap-2 px-2 py-1 rounded text-sm disabled:opacity-40'),
+        '.icon': apply('h-[1em] w-[1em]'),
+      },
+      '.btn--lg': apply('px-3 py-2 text-base'),
+      '.btn--xl': apply('px-4 py-3 text-lg'),
+      '.btn--raised': apply('shadow hover:shadow-lg focus:shadow-lg transition'),
+      '.btn--grows': apply('scale-100 hover:scale-110 focus:scale-110 transform origin-center transition'),
+
+      '.input-label': apply('text-sm font-semibold'),
+
+      '.brand-gradient': apply('from-primary-900 to-primary-800'),
+      '.brand-gradient-to-r': apply('brand-gradient bg-gradient-to-r'),
+      '.brand-gradient-to-l': apply('brand-gradient bg-gradient-to-l'),
+      '.brand-gradient-text': apply('text-transparent bg-clip-text brand-gradient-to-r'),
+    }))
+  ],
+}
+
+function apply (classes) {
+  return {
+    [`@apply ${classes}`]: {}
+  }
 }