pimelon-ui 0.1.70 → 0.1.72

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "pimelon-ui",
-  "version": "0.1.70",
+  "version": "0.1.72",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
     "test": "npx prettier --check ./src",
     "prettier": "npx prettier -w ./src",
-    "prepare": "husky install",
     "bump-and-release": "git pull --rebase origin main && yarn version --patch && git push && git push --tags",
     "dev": "vite",
     "build": "vite build",
@@ -49,6 +48,7 @@
     "@tiptap/vue-3": "^2.0.3",
     "@vueuse/core": "^10.4.1",
     "feather-icons": "^4.28.0",
+    "husky": "^9.1.6",
     "idb-keyval": "^6.2.0",
     "prettier": "^3.3.2",
     "radix-vue": "^1.5.3",
@@ -66,10 +66,8 @@
     "autoprefixer": "^10.4.13",
     "cross-fetch": "^3.1.5",
     "histoire": "^0.17.14",
-    "husky": "^9.1.6",
     "lint-staged": ">=10",
     "postcss": "^8.4.21",
-    "prettier": "3.3.2",
     "prettier-plugin-tailwindcss": "^0.1.13",
     "tailwindcss": "^3.2.7",
     "typescript": "^5.0.2",

package/src/components/Autocomplete.vue

@@ -5,7 +5,7 @@
     nullable
     v-slot="{ open: isComboboxOpen }"
   >
-    <Popover class="w-full" v-model:show="showOptions">
+    <Popover class="w-full" v-model:show="showOptions" ref="rootRef">
       <template #target="{ open: openPopover, togglePopover }">
         <slot name="target" v-bind="{ open: openPopover, togglePopover }">
           <div class="w-full">
@@ -179,14 +179,29 @@ import FeatherIcon from './FeatherIcon.vue'
 
 export default {
   name: 'Autocomplete',
-  props: [
-    'modelValue',
-    'options',
-    'placeholder',
-    'bodyClasses',
-    'multiple',
-    'hideSearch',
-  ],
+  props: {
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    modelValue: {
+      type: [String, Object, Array],
+    },
+    placeholder: {
+      type: String,
+    },
+    bodyClasses: {
+      type: [String, Array, Object],
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    hideSearch: {
+      type: Boolean,
+      default: false,
+    },
+  },
   emits: ['update:modelValue', 'update:query', 'change'],
   components: {
     Popover,
@@ -198,7 +213,7 @@ export default {
     ComboboxOption,
     ComboboxButton,
   },
-  expose: ['togglePopover'],
+  expose: ['togglePopover', 'rootRef'],
   data() {
     return {
       query: '',
@@ -262,6 +277,9 @@ export default {
     },
   },
   methods: {
+    rootRef() {
+      return this.$refs['rootRef']
+    },
     togglePopover(val) {
       this.showOptions = val ?? !this.showOptions
     },

package/src/components/Badge.vue

@@ -41,35 +41,37 @@ const props = withDefaults(defineProps<BadgeProps>(), {
 
 const classes = computed(() => {
   let solidClasses = {
-    gray: 'text-white bg-gray-900',
-    blue: 'text-white bg-blue-500',
-    green: 'text-white bg-green-600',
-    orange: 'text-white bg-amber-600',
-    red: 'text-white bg-red-600',
+    gray: 'text-text-icons-white bg-surface-gray-7',
+    blue: 'text-text-icons-blue-1 bg-surface-blue-2',
+    green: 'text-text-icons-green-1 bg-surface-green-3',
+    orange: 'text-text-icons-amber-1 bg-surface-amber-2',
+    red: 'text-text-icons-red-1 bg-surface-red-4',
   }[props.theme]
 
   let subtleClasses = {
-    gray: 'text-gray-700 bg-gray-100',
-    blue: 'text-blue-600 bg-blue-100',
-    green: 'text-green-800 bg-green-200',
-    orange: 'text-amber-700 bg-amber-100',
-    red: 'text-red-600 bg-red-100',
+    gray: 'text-text-icons-gray-6 bg-surface-gray-2',
+    blue: 'text-text-icons-blue-2 bg-surface-blue-1',
+    green: 'text-text-icons-green-3 bg-surface-green-2',
+    orange: 'text-text-icons-amber-3 bg-surface-amber-1',
+    red: 'text-text-icons-red-4 bg-surface-red-1',
   }[props.theme]
 
   let outlineClasses = {
-    gray: 'text-gray-700 bg-white border border-gray-300',
-    blue: 'text-blue-600 bg-white border border-blue-300',
-    green: 'text-green-800 bg-white border border-green-300',
-    orange: 'text-amber-700 bg-white border border-amber-300',
-    red: 'text-red-600 bg-white border border-red-300',
+    gray: 'text-text-icons-gray-6 bg-transparent border border-outline-gray-1',
+    blue: 'text-text-icons-blue-2 bg-transparent border border-outline-blue-1',
+    green:
+      'text-text-icons-green-3 bg-transparent border border-outline-green-2',
+    orange:
+      'text-text-icons-amber-3 bg-transparent border border-outline-amber-2',
+    red: 'text-text-icons-red-4 bg-transparent border border-outline-red-2',
   }[props.theme]
 
   let ghostClasses = {
-    gray: 'text-gray-700 bg-transparent',
-    blue: 'text-blue-600 bg-transparent',
-    green: 'text-green-800 bg-transparent',
-    orange: 'text-amber-700 bg-transparent',
-    red: 'text-red-600 bg-transparent',
+    gray: 'text-text-icons-gray-6 bg-transparent',
+    blue: 'text-text-icons-blue-2 bg-transparent',
+    green: 'text-text-icons-green-3 bg-transparent',
+    orange: 'text-text-icons-amber-3 bg-transparent',
+    red: 'text-text-icons-red-4 bg-transparent',
   }[props.theme]
 
   let variantClasses = {

package/src/components/Calendar/Calendar.vue

@@ -133,6 +133,7 @@ const defaultConfig = {
   redundantCellHeight: 50,
   hourHeight: 50,
   enableShortcuts: true,
+  showIcon: true,
 }
 
 const overrideConfig = { ...defaultConfig, ...props.config }

package/src/components/Calendar/CalendarEvent.vue

@@ -26,12 +26,14 @@
         ]
       "
     >
-      <component
-        v-if="eventIcons[props.event.type]"
-        :is="eventIcons[props.event.type]"
-        class="h-4 w-4 text-black"
-      />
-      <FeatherIcon v-else name="circle" class="h-4 text-black" />
+      <div v-if="config.showIcon">
+        <component
+          v-if="eventIcons[props.event.type]"
+          :is="eventIcons[props.event.type]"
+          class="h-4 w-4 text-black"
+        />
+        <FeatherIcon v-else name="circle" class="h-4 text-black" />
+      </div>
 
       <div class="flex w-fit flex-col overflow-hidden whitespace-nowrap">
         <p class="text-ellipsis text-sm font-medium text-gray-800">
@@ -72,12 +74,14 @@
         ]
       "
     >
-      <component
-        v-if="eventIcons[props.event.type]"
-        :is="eventIcons[props.event.type]"
-        class="h-4 w-4 text-black"
-      />
-      <FeatherIcon v-else name="circle" class="h-4 text-black" />
+      <div v-if="config.showIcon">
+        <component
+          v-if="eventIcons[props.event.type]"
+          :is="eventIcons[props.event.type]"
+          class="h-4 w-4 text-black"
+        />
+        <FeatherIcon v-else name="circle" class="h-4 text-black" />
+      </div>
 
       <div class="flex w-fit flex-col overflow-hidden whitespace-nowrap">
         <p class="text-ellipsis text-sm font-medium text-gray-800">

package/src/components/Calendar.story.md

@@ -65,6 +65,7 @@ The object for this kind of event looks like:
     	redundantCellHeight: 50,
     	hourHeight: 50,
     	enableShortcuts: true,
+      showIcon: true,
 
     }
 
@@ -122,6 +123,10 @@ e.g.
   - Delete: When an event is focused you can press the delete button to delete
     the event.
 
+- `showIcon`: Boolean value which determines whether the icon will be displayed
+  or not in the Event. By default the value is true i.e. icon will be displayed,
+  can be disabled by setting it to false.
+
 - Many functional props are also there which will be discussed in the below
   sections.
 

package/src/components/Calendar.story.vue

@@ -73,7 +73,7 @@ const config = {
   eventIcons: {},
   allowCustomClickEvents: true,
   redundantCellHeight: 100,
-  enableShortcuts: true,
+  enableShortcuts: false,
 }
 
 const events = ref([
@@ -82,17 +82,17 @@ const events = ref([
     participant: 'Ryan Mathew',
     id: 'EDU-CSH-2024-00091',
     venue: 'CNF-ROOM-2024-00001',
-    fromDate: '2024-07-08 16:30:00', //can be a date object
-    toDate: '2024-07-08 17:30:00',
-    color: 'green',
+    fromDate: '2024-10-08 16:30:00', //can be a date object
+    toDate: '2024-10-08 17:30:00',
+    color: 'violet',
   },
   {
     title: 'English by Ryan Mathew',
     participant: 'Ryan Mathew',
     id: 'EDU-CSH-2024-00092',
     venue: 'CNF-ROOM-2024-00002',
-    fromDate: '2024-07-08 13:30:00',
-    toDate: '2024-07-08 17:30:00',
+    fromDate: '2024-10-08 13:30:00',
+    toDate: '2024-10-08 17:30:00',
     color: 'green',
   },
   {
@@ -100,26 +100,26 @@ const events = ref([
     participant: 'Sheldon',
     id: 'EDU-CSH-2024-00093',
     venue: 'CNF-ROOM-2024-00001',
-    fromDate: '2024-07-09 10:30:00',
-    toDate: '2024-07-09 11:30:00',
-    color: 'green',
+    fromDate: '2024-10-09 10:30:00',
+    toDate: '2024-10-09 11:30:00',
+    color: 'blue',
   },
   {
     title: 'English by Ryan Mathew',
     participant: 'Ryan Mathew',
     id: 'EDU-CSH-2024-00094',
     venue: 'CNF-ROOM-2024-00001',
-    fromDate: '2024-07-17 16:30:00',
-    toDate: '2024-07-17 17:30:00',
-    color: 'green',
+    fromDate: '2024-10-17 16:30:00',
+    toDate: '2024-10-17 17:30:00',
+    color: 'red',
   },
   {
     title: 'Google Meet with John ',
     participant: 'John',
     id: '#htrht41',
     venue: 'Google Meet',
-    fromDate: '2024-07-21 00:00:00',
-    toDate: '2024-07-21 23:59:59',
+    fromDate: '2024-10-21 00:00:00',
+    toDate: '2024-10-21 23:59:59',
     color: 'amber',
     isFullDay: true,
   },
@@ -128,8 +128,8 @@ const events = ref([
     participant: 'Sheldon',
     id: '#htrht42',
     venue: 'Google Meet',
-    fromDate: '2024-07-21 00:00:00',
-    toDate: '2024-07-21 23:59:59',
+    fromDate: '2024-10-21 00:00:00',
+    toDate: '2024-10-21 23:59:59',
     color: 'amber',
     isFullDay: true,
   },

package/src/components/Card.vue

@@ -29,7 +29,17 @@
 import LoadingText from './LoadingText.vue'
 export default {
   name: 'Card',
-  props: ['title', 'subtitle', 'loading'],
+  props: {
+    title: {
+      type: String,
+    },
+    subtitle: {
+      type: String,
+    },
+    loading: {
+      type: Boolean,
+    },
+  },
   components: {
     LoadingText,
   },

package/src/components/CircularProgressBar.vue

@@ -11,12 +11,13 @@
       <p v-if="!showPercentage">{{ step }}</p>
       <p v-else>{{ progress.toFixed(0) }}%</p>
     </div>
-    <div v-else class="check-icon" />
+    <FeatherIcon v-else name="check" class="check-icon" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import FeatherIcon from './FeatherIcon.vue'
 
 interface Props {
   step: number
@@ -45,6 +46,7 @@ interface SizeProps {
   ringSize: string
   ringBarWidth: string
   innerTextFontSize: string
+  checkIconSize: string
 }
 
 // predefined sizes for the circular progress bar
@@ -53,26 +55,31 @@ const sizeMap: Record<Size, SizeProps> = {
     ringSize: '30px',
     ringBarWidth: '6px',
     innerTextFontSize: props.showPercentage ? '8px' : '12px',
+    checkIconSize: '16px',
   },
   sm: {
     ringSize: '42px',
     ringBarWidth: '10px',
     innerTextFontSize: props.showPercentage ? '12px' : '16px',
+    checkIconSize: '20px',
   },
   md: {
     ringSize: '60px',
     ringBarWidth: '14px',
     innerTextFontSize: props.showPercentage ? '16px' : '20px',
+    checkIconSize: '24px',
   },
   lg: {
     ringSize: '84px',
     ringBarWidth: '18px',
     innerTextFontSize: props.showPercentage ? '20px' : '24px',
+    checkIconSize: '40px',
   },
   xl: {
     ringSize: '108px',
     ringBarWidth: '22px',
     innerTextFontSize: props.showPercentage ? '24px' : '28px',
+    checkIconSize: '48px',
   },
 }
 
@@ -123,6 +130,7 @@ const isCompleted = computed(() => props.step === props.totalSteps)
   --size: v-bind(size.ringSize);
   --bar-width: v-bind(size.ringBarWidth);
   --font-size: v-bind(size.innerTextFontSize);
+  --check-icon-size: v-bind(size.checkIconSize);
   --color-progress: v-bind(theme.primary);
   --color-remaining-circle: v-bind(theme.secondary);
   --color-complete: v-bind($props.themeComplete);
@@ -180,11 +188,8 @@ const isCompleted = computed(() => props.step === props.totalSteps)
 }
 
 .check-icon {
-  width: 15px;
-  height: 15px;
-  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODUiIGhlaWdodD0iODUiIHZpZXdCb3g9IjUgMzAgNzUgMTIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0zNS40MjM3IDUzLjczMjdMNjcuOTc4NyAyMS4xNzc3TDcyLjk4OTUgMjYuMTg0MkwzNS40MTk1IDYzLjc1TDEyLjg4NiA0MS4yMTIyTDE3Ljg5MjUgMzYuMjAxNUwzNS40MjM3IDUzLjczMjdaIiBmaWxsPSIjMWYxYTM4Ii8+Cjwvc3ZnPgo=');
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
+  z-index: 3;
+  width: var(--check-icon-size);
+  height: var(--check-icon-size);
 }
 </style>

package/src/components/ConfirmDialog.vue

@@ -12,12 +12,26 @@
 </template>
 <script>
 import Dialog from './Dialog.vue'
+import Button from './Button.vue'
+
 export default {
   name: 'ConfirmDialog',
-  props: ['title', 'message', 'fields', 'onConfirm'],
+  props: {
+    title: {
+      type: String,
+    },
+    message: {
+      type: String,
+    },
+    onConfirm: {
+      type: Function,
+      default: null,
+    },
+  },
   expose: ['show', 'hide'],
   components: {
     Dialog,
+    Button,
   },
   data() {
     return {

package/src/components/DatePicker.vue

@@ -118,14 +118,27 @@ import FeatherIcon from './FeatherIcon.vue'
 import TextInput from './TextInput.vue'
 export default {
   name: 'DatePicker',
-  props: [
-    'value',
-    'modelValue',
-    'placeholder',
-    'formatter',
-    'readonly',
-    'inputClass',
-  ],
+  props: {
+    value: {
+      type: String,
+    },
+    modelValue: {
+      type: String,
+    },
+    placeholder: {
+      type: String,
+    },
+    formatter: {
+      type: Function,
+      default: null,
+    },
+    readonly: {
+      type: Boolean,
+    },
+    inputClass: {
+      type: [String, Array, Object],
+    },
+  },
   emits: ['update:modelValue', 'change'],
   components: {
     Popover,

package/src/components/DateRangePicker.vue

@@ -107,14 +107,27 @@ import FeatherIcon from './FeatherIcon.vue'
 import TextInput from './TextInput.vue'
 export default {
   name: 'DateRangePicker',
-  props: [
-    'value',
-    'modelValue',
-    'placeholder',
-    'formatter',
-    'readonly',
-    'inputClass',
-  ],
+  props: {
+    value: {
+      type: String,
+    },
+    modelValue: {
+      type: String,
+    },
+    placeholder: {
+      type: String,
+    },
+    formatter: {
+      type: Function,
+      default: null,
+    },
+    readonly: {
+      type: Boolean,
+    },
+    inputClass: {
+      type: [String, Array, Object],
+    },
+  },
   emits: ['update:modelValue', 'change'],
   components: {
     Popover,

package/src/components/DateTimePicker.vue

@@ -157,14 +157,27 @@ import FeatherIcon from './FeatherIcon.vue'
 import TextInput from './TextInput.vue'
 export default {
   name: 'DateTimePicker',
-  props: [
-    'value',
-    'modelValue',
-    'placeholder',
-    'formatter',
-    'readonly',
-    'inputClass',
-  ],
+  props: {
+    value: {
+      type: String,
+    },
+    modelValue: {
+      type: String,
+    },
+    placeholder: {
+      type: String,
+    },
+    formatter: {
+      type: Function,
+      default: null,
+    },
+    readonly: {
+      type: Boolean,
+    },
+    inputClass: {
+      type: [String, Array, Object],
+    },
+  },
   emits: ['update:modelValue', 'change'],
   components: {
     Popover,

package/src/components/Dropdown.vue

@@ -26,7 +26,7 @@
           <div v-for="group in groups" :key="group.key" class="p-1.5">
             <div
               v-if="group.group && !group.hideLabel"
-              class="flex h-7 items-center px-2 text-sm font-medium text-gray-500"
+              class="flex h-7 items-center px-2 text-sm font-medium text-text-icons-gray-6"
             >
               {{ group.group }}
             </div>
@@ -43,7 +43,7 @@
               <button
                 v-else
                 :class="[
-                  active ? 'bg-gray-100' : 'text-gray-800',
+                  active ? 'bg-gray-100' : 'text-text-icons-gray-6',
                   'group flex h-7 w-full items-center rounded px-2 text-base',
                 ]"
                 @click="item.onClick"
@@ -51,11 +51,11 @@
                 <FeatherIcon
                   v-if="item.icon && typeof item.icon === 'string'"
                   :name="item.icon"
-                  class="mr-2 h-4 w-4 flex-shrink-0 text-gray-700"
+                  class="mr-2 h-4 w-4 flex-shrink-0 text-text-icons-gray-6"
                   aria-hidden="true"
                 />
                 <component
-                  class="mr-2 h-4 w-4 flex-shrink-0 text-gray-700"
+                  class="mr-2 h-4 w-4 flex-shrink-0 text-text-icons-gray-6"
                   v-else-if="item.icon"
                   :is="item.icon"
                 />
@@ -71,90 +71,98 @@
   </Menu>
 </template>
 
-<script>
+<script setup lang="ts">
 import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
 import Popover from './Popover.vue'
 import Button from './Button.vue'
 import FeatherIcon from './FeatherIcon.vue'
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
 
-export default {
-  name: 'Dropdown',
-  props: {
-    button: {
-      type: Object,
-      default: null,
-    },
-    options: {
-      type: Array,
-      default: () => [],
-    },
-    placement: {
-      type: String,
-      default: 'left',
-    },
-  },
-  components: {
-    Menu,
-    MenuButton,
-    MenuItems,
-    MenuItem,
-    Button,
-    FeatherIcon,
-    Popover,
-  },
-  methods: {
-    normalizeDropdownItem(option) {
-      let onClick = option.onClick || null
-      if (!onClick && option.route && this.$router) {
-        onClick = () => this.$router.push(option.route)
-      }
+const router = useRouter()
 
-      return {
-        label: option.label,
-        icon: option.icon,
-        group: option.group,
-        component: option.component,
-        onClick,
-      }
-    },
-    filterOptions(options) {
-      return (options || [])
-        .filter(Boolean)
-        .filter((option) => (option.condition ? option.condition() : true))
-        .map((option) => this.normalizeDropdownItem(option))
-    },
-  },
-  computed: {
-    groups() {
-      let groups = this.options[0]?.group
-        ? this.options
-        : [{ group: '', items: this.options }]
+type DropdownOption = {
+  label: string
+  icon?: string
+  group?: string
+  component?: any
+  onClick?: () => void
+  route?: string
+  condition?: () => boolean
+}
+
+type DropdownOptions = string | DropdownOption
+
+type ButtonProps = {
+  label: string
+  icon?: string
+}
+
+interface DropdownProps {
+  button?: ButtonProps
+  options?: DropdownOptions[]
+  placement?: string
+}
+
+const props = withDefaults(defineProps<DropdownProps>(), {
+  options: () => [],
+  placement: 'left',
+})
 
-      return groups.map((group, i) => {
-        return {
-          key: i,
-          group: group.group,
-          hideLabel: group.hideLabel || false,
-          items: this.filterOptions(group.items),
-        }
-      })
-    },
-    dropdownTransition() {
-      return {
-        enterActiveClass: 'transition duration-100 ease-out',
-        enterFromClass: 'transform scale-95 opacity-0',
-        enterToClass: 'transform scale-100 opacity-100',
-        leaveActiveClass: 'transition duration-75 ease-in',
-        leaveFromClass: 'transform scale-100 opacity-100',
-        leaveToClass: 'transform scale-95 opacity-0',
-      }
-    },
-    popoverPlacement() {
-      if (this.placement === 'left') return 'bottom-start'
-      if (this.placement === 'right') return 'bottom-end'
-      if (this.placement === 'center') return 'bottom-center'
-      return 'bottom'
-    },
-  },
+const normalizeDropdownItem = (option: DropdownOption) => {
+  let onClick = option.onClick || null
+  if (!onClick && option.route && router) {
+    onClick = () => router.push(option.route!)
+  }
+
+  return {
+    label: option.label,
+    icon: option.icon,
+    group: option.group,
+    component: option.component,
+    onClick,
+  }
+}
+
+const filterOptions = (options: DropdownOptions) => {
+  return (options || [])
+    .filter(Boolean)
+    .filter((option: DropdownOption) =>
+      option.condition ? option.condition() : true,
+    )
+    .map((option: DropdownOption) => normalizeDropdownItem(option))
 }
+
+const groups = computed(() => {
+  let groups = props.options[0]?.group
+    ? props.options
+    : [{ group: '', items: props.options }]
+
+  return groups.map((group, i) => {
+    return {
+      key: i,
+      group: group.group,
+      hideLabel: group.hideLabel || false,
+      items: filterOptions(group.items),
+    }
+  })
+})
+
+const dropdownTransition = computed(() => {
+  return {
+    enterActiveClass: 'transition duration-100 ease-out',
+    enterFromClass: 'transform scale-95 opacity-0',
+    enterToClass: 'transform scale-100 opacity-100',
+    leaveActiveClass: 'transition duration-75 ease-in',
+    leaveFromClass: 'transform scale-100 opacity-100',
+    leaveToClass: 'transform scale-95 opacity-0',
+  }
+})
+
+const popoverPlacement = computed(() => {
+  if (props.placement === 'left') return 'bottom-start'
+  if (props.placement === 'right') return 'bottom-end'
+  if (props.placement === 'center') return 'bottom-center'
+  return 'bottom'
+})
 </script>

package/src/components/FileUploader.vue

@@ -28,7 +28,18 @@ import FileUploadHandler from '../utils/fileUploadHandler'
 
 export default {
   name: 'FileUploader',
-  props: ['fileTypes', 'uploadArgs', 'validateFile'],
+  props: {
+    fileTypes: {
+      type: [String, Array],
+    },
+    uploadArgs: {
+      type: Object,
+    },
+    validateFile: {
+      type: Function,
+      default: null,
+    },
+  },
   data() {
     return {
       uploader: null,

package/src/components/FormControl.vue

@@ -2,6 +2,7 @@
   <div v-if="type != 'checkbox'" :class="['space-y-1.5', attrs.class]">
     <label class="block" :class="labelClasses" v-if="label" :for="id">
       {{ label }}
+      <span class="text-red-500" v-if="required">*</span>
     </label>
     <Select
       v-if="type === 'select'"
@@ -61,6 +62,7 @@ interface FormControlProps {
   description?: string
   type?: TextInputTypes | 'textarea' | 'select' | 'checkbox' | 'autocomplete'
   size?: 'sm' | 'md'
+  required?: boolean
 }
 
 const id = useId()

package/src/components/Rating/Rating.story.vue

@@ -0,0 +1,18 @@
+<template>
+  <Story :layout="{ type: 'grid', width: 300 }">
+    <Variant title="default">
+      <div class="p-2">
+        <Rating v-bind="state" />
+      </div>
+    </Variant>
+  </Story>
+</template>
+<script setup lang="ts">
+import { reactive } from 'vue'
+import Rating from './Rating.vue'
+
+const state = reactive({
+  size: 'md',
+  label: 'Rating',
+})
+</script>

package/src/components/Rating/Rating.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="space-y-1">
+    <label class="block text-xs text-text-icons-gray-5" v-if="label">
+      {{ label }}
+    </label>
+    <div class="flex text-center">
+      <div
+        v-for="index in rating_from"
+        :key="index"
+        @mouseover="() => !readonly && (hoveredRating = index)"
+        @mouseleave="() => !readonly && (hoveredRating = 0)"
+      >
+        <FeatherIcon
+          name="star"
+          class="fill-gray-400 text-text-icons-gray-1 stroke-1 mr-1"
+          :class="iconClasses(index)"
+          @click="markRating(index)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import FeatherIcon from '../FeatherIcon.vue'
+
+interface RatingProps {
+  modelValue?: number
+  rating_from?: number
+  label?: string
+  readonly?: boolean
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+}
+
+const props = withDefaults(defineProps<RatingProps>(), {
+  modelValue: 0,
+  rating_from: 5,
+  size: 'md',
+  readonly: false,
+})
+
+const emit = defineEmits(['update:modelValue'])
+const rating = ref(props.modelValue)
+const hoveredRating = ref(0)
+
+const iconClasses = (index: number) => {
+  let classes = [
+    {
+      sm: 'size-4',
+      md: 'size-5',
+      lg: 'size-6',
+      xl: 'size-7',
+    }[props.size],
+  ]
+
+  if (index <= hoveredRating.value && index > rating.value) {
+    classes.push('fill-yellow-200')
+  } else if (index <= rating.value) {
+    classes.push('fill-yellow-500')
+  }
+
+  if (!props.readonly) {
+    classes.push('cursor-pointer')
+  }
+  return classes.join(' ')
+}
+
+const emitChange = (value: number) => {
+  emit('update:modelValue', value)
+}
+
+const markRating = (index: number) => {
+  if (props.readonly) return
+  emitChange(index)
+  rating.value = index
+}
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    rating.value = newVal
+  },
+)
+</script>

package/src/components/TabButtons.vue

@@ -50,6 +50,7 @@ export default {
   },
   emits: ['update:modelValue'],
   components: {
+    FeatherIcon,
     RadioGroup,
     RadioGroupOption,
     RadioGroupLabel,

package/src/components/TextEditor/InsertLink.vue

@@ -14,7 +14,11 @@
       />
     </template>
     <template #actions>
-      <Button variant="solid" @click="setLink(setLinkDialog.url)">
+      <Button
+        variant="solid"
+        @click="setLink(setLinkDialog.url)"
+        class="w-full"
+      >
         Save
       </Button>
     </template>

package/src/components/Toast.vue

@@ -15,9 +15,7 @@
           >
             {{ title }}
           </p>
-          <p v-if="text" class="text-base text-gray-600">
-            {{ text }}
-          </p>
+          <p v-if="text" class="text-base text-gray-600" v-html="text"></p>
         </slot>
       </div>
       <div class="ml-auto pl-2">

package/src/espressoColors.css

@@ -0,0 +1,152 @@
+@layer base {
+  :root {
+    --outline-amber-1: rgb(254 237 169);
+    --outline-amber-2: rgb(251 204 85);
+    --outline-blue-1: rgb(167 215 253);
+    --outline-blue-2: rgb(2 137 247);
+    --outline-gray-1: rgb(237 237 237);
+    --outline-gray-2: rgb(226 226 226);
+    --outline-gray-3: rgb(199 199 199);
+    --outline-gray-4: rgb(153 153 153);
+    --outline-gray-5: rgb(56 56 56);
+    --outline-gray-modals: rgb(237 237 237);
+    --outline-green-1: rgb(185 238 204);
+    --outline-green-2: rgb(155 228 182);
+    --outline-orange-1: rgb(244 176 127);
+    --outline-red-1: rgb(255 216 216);
+    --outline-red-2: rgb(253 194 194);
+    --outline-red-3: rgb(247 149 150);
+    --outline-red-4: rgb(224 54 54);
+    --outline-white: rgb(255 255 255);
+    --surface-amber-1: rgb(255 247 211);
+    --surface-amber-2: rgb(219 119 6);
+    --surface-blue-1: rgb(230 244 255);
+    --surface-blue-2: rgb(2 137 247);
+    --surface-cards: rgb(255 255 255);
+    --surface-cyan-1: rgb(221 247 255);
+    --surface-gray-1: rgb(248 248 248);
+    --surface-gray-2: rgb(243 243 243);
+    --surface-gray-3: rgb(237 237 237);
+    --surface-gray-4: rgb(226 226 226);
+    --surface-gray-5: rgb(82 82 82);
+    --surface-gray-6: rgb(56 56 56);
+    --surface-gray-7: rgb(23 23 23);
+    --surface-green-1: rgb(242 253 244);
+    --surface-green-2: rgb(228 250 235);
+    --surface-green-3: rgb(48 166 109);
+    --surface-menu-bar: rgb(248 248 248);
+    --surface-modal: rgb(255 255 255);
+    --surface-orange-1: rgb(255 239 228);
+    --surface-pink-1: rgb(253 232 245);
+    --surface-red-1: rgb(255 231 231);
+    --surface-red-2: rgb(255 216 216);
+    --surface-red-3: rgb(253 194 194);
+    --surface-red-4: rgb(204 41 41);
+    --surface-red-5: rgb(181 42 42);
+    --surface-red-6: rgb(148 31 31);
+    --surface-selected: rgb(255 255 255);
+    --surface-violet-1: rgb(240 235 255);
+    --surface-white: rgb(255 255 255);
+    --text-icons-amber-1: rgb(255 247 211);
+    --text-icons-amber-2: rgb(231 153 19);
+    --text-icons-amber-3: rgb(219 119 6);
+    --text-icons-blue-1: rgb(230 244 255);
+    --text-icons-blue-2: rgb(0 123 224);
+    --text-icons-blue-3: rgb(0 92 163);
+    --text-icons-cyan-1: rgb(59 189 229);
+    --text-icons-gray-1: rgb(237 237 237);
+    --text-icons-gray-2: rgb(226 226 226);
+    --text-icons-gray-3: rgb(199 199 199);
+    --text-icons-gray-4: rgb(153 153 153);
+    --text-icons-gray-5: rgb(124 124 124);
+    --text-icons-gray-6: rgb(82 82 82);
+    --text-icons-gray-7: rgb(82 82 82);
+    --text-icons-gray-8: rgb(56 56 56);
+    --text-icons-gray-9: rgb(23 23 23);
+    --text-icons-green-1: rgb(242 253 244);
+    --text-icons-green-2: rgb(48 166 109);
+    --text-icons-green-3: rgb(22 121 76);
+    --text-icons-pink-1: rgb(227 74 166);
+    --text-icons-red-1: rgb(255 247 247);
+    --text-icons-red-2: rgb(247 149 150);
+    --text-icons-red-3: rgb(224 54 54);
+    --text-icons-red-4: rgb(204 41 41);
+    --text-icons-violet-1: rgb(104 70 227);
+    --text-icons-white: rgb(255 255 255);
+  }
+  [data-theme='dark'] {
+    --outline-amber-1: rgb(130 65 8);
+    --outline-amber-2: rgb(130 65 8);
+    --outline-blue-1: rgb(21 89 153);
+    --outline-blue-2: rgb(21 89 153);
+    --outline-gray-1: rgb(35 35 35);
+    --outline-gray-2: rgb(52 52 52);
+    --outline-gray-3: rgb(66 66 66);
+    --outline-gray-4: rgb(128 128 128);
+    --outline-gray-5: rgb(237 237 237);
+    --outline-gray-modals: rgb(52 52 52);
+    --outline-green-1: rgb(11 97 57);
+    --outline-green-2: rgb(10 63 39);
+    --outline-orange-1: rgb(130 57 6);
+    --outline-red-1: rgb(98 27 24);
+    --outline-red-2: rgb(76 24 24);
+    --outline-red-3: rgb(98 27 24);
+    --outline-red-4: rgb(156 32 32);
+    --outline-white: rgb(28 28 28);
+    --surface-amber-1: rgb(55 30 6);
+    --surface-amber-2: rgb(197 116 17);
+    --surface-blue-1: rgb(14 32 55);
+    --surface-blue-2: rgb(21 128 216);
+    --surface-cards: rgb(28 28 28);
+    --surface-cyan-1: rgb(11 37 45);
+    --surface-gray-1: rgb(35 35 35);
+    --surface-gray-2: rgb(255 255 255 / 0.1);
+    --surface-gray-3: rgb(255 255 255 / 0.18);
+    --surface-gray-4: rgb(66 66 66);
+    --surface-gray-5: rgb(212 212 212);
+    --surface-gray-6: rgb(175 175 175);
+    --surface-gray-7: rgb(212 212 212);
+    --surface-green-1: rgb(11 46 28);
+    --surface-green-2: rgb(10 63 39);
+    --surface-green-3: rgb(31 157 96);
+    --surface-menu-bar: rgb(15 15 15);
+    --surface-modal: rgb(35 35 35);
+    --surface-orange-1: rgb(64 31 7 / 0.8);
+    --surface-pink-1: rgb(71 20 50 / 0.8);
+    --surface-red-1: rgb(54 21 21 / 0.8);
+    --surface-red-2: rgb(76 24 24 / 0.9);
+    --surface-red-3: rgb(98 27 24);
+    --surface-red-4: rgb(228 56 56);
+    --surface-red-5: rgb(156 32 32);
+    --surface-red-6: rgb(98 27 24);
+    --surface-selected: rgb(255 255 255 / 0.1);
+    --surface-violet-1: rgb(34 28 66);
+    --surface-white: rgb(15 15 15);
+    --text-icons-amber-1: rgb(255 255 255);
+    --text-icons-amber-2: rgb(231 153 19);
+    --text-icons-amber-3: rgb(231 153 19);
+    --text-icons-blue-1: rgb(255 255 255);
+    --text-icons-blue-2: rgb(90 174 242);
+    --text-icons-blue-3: rgb(140 193 236);
+    --text-icons-cyan-1: rgb(60 184 220);
+    --text-icons-gray-1: rgb(35 35 35);
+    --text-icons-gray-2: rgb(66 66 66);
+    --text-icons-gray-3: rgb(113 113 113);
+    --text-icons-gray-4: rgb(113 113 113);
+    --text-icons-gray-5: rgb(128 128 128);
+    --text-icons-gray-6: rgb(153 153 153);
+    --text-icons-gray-7: rgb(175 175 175);
+    --text-icons-gray-8: rgb(212 212 212);
+    --text-icons-gray-9: rgb(248 248 248);
+    --text-icons-green-1: rgb(255 255 255);
+    --text-icons-green-2: rgb(53 174 116);
+    --text-icons-green-3: rgb(120 215 169);
+    --text-icons-pink-1: rgb(227 89 171);
+    --text-icons-red-1: rgb(255 255 255);
+    --text-icons-red-2: rgb(98 27 24);
+    --text-icons-red-3: rgb(235 77 82);
+    --text-icons-red-4: rgb(252 116 116);
+    --text-icons-violet-1: rgb(157 124 234);
+    --text-icons-white: rgb(15 15 15);
+  }
+}

package/src/index.js

@@ -26,6 +26,7 @@ export { default as LoadingIndicator } from './components/LoadingIndicator.vue'
 export { default as LoadingText } from './components/LoadingText.vue'
 export { default as Progress } from './components/Progress.vue'
 export { default as Popover } from './components/Popover.vue'
+export { default as Rating } from './components/Rating/Rating.vue'
 export { default as Resource } from './components/Resource.vue'
 export { default as Select } from './components/Select.vue'
 export { default as Spinner } from './components/Spinner.vue'

package/src/style.css

@@ -1,4 +1,5 @@
 @import './fonts/Inter/inter.css';
+@import './espressoColors.css';
 
 @tailwind base;
 @tailwind components;

package/src/utils/confirmDialog.js

@@ -1,17 +1,11 @@
 import ConfirmDialog from '../components/ConfirmDialog.vue'
 import { h, ref } from 'vue'
 
-export function confirmDialog({
-  title = 'Untitled',
-  message = '',
-  fields = [],
-  onConfirm,
-}) {
+export function confirmDialog({ title = 'Untitled', message = '', onConfirm }) {
   renderDialog(
     h(ConfirmDialog, {
       title,
       message,
-      fields,
       onConfirm,
     }),
   )

package/src/utils/espressoVariables.js

@@ -0,0 +1,83 @@
+const espressoColors = {
+  outline: {
+    'amber-1': 'var(--outline-amber-1)',
+    'amber-2': 'var(--outline-amber-2)',
+    'blue-1': 'var(--outline-blue-1)',
+    'blue-2': 'var(--outline-blue-2)',
+    'gray-1': 'var(--outline-gray-1)',
+    'gray-2': 'var(--outline-gray-2)',
+    'gray-3': 'var(--outline-gray-3)',
+    'gray-4': 'var(--outline-gray-4)',
+    'gray-5': 'var(--outline-gray-5)',
+    'gray-modals': 'var(--outline-gray-modals)',
+    'green-1': 'var(--outline-green-1)',
+    'green-2': 'var(--outline-green-2)',
+    'orange-1': 'var(--outline-orange-1)',
+    'red-1': 'var(--outline-red-1)',
+    'red-2': 'var(--outline-red-2)',
+    'red-3': 'var(--outline-red-3)',
+    'red-4': 'var(--outline-red-4)',
+    white: 'var(--outline-white)',
+  },
+  surface: {
+    'amber-1': 'var(--surface-amber-1)',
+    'amber-2': 'var(--surface-amber-2)',
+    'blue-1': 'var(--surface-blue-1)',
+    'blue-2': 'var(--surface-blue-2)',
+    cards: 'var(--surface-cards)',
+    'cyan-1': 'var(--surface-cyan-1)',
+    'gray-1': 'var(--surface-gray-1)',
+    'gray-2': 'var(--surface-gray-2)',
+    'gray-3': 'var(--surface-gray-3)',
+    'gray-4': 'var(--surface-gray-4)',
+    'gray-5': 'var(--surface-gray-5)',
+    'gray-6': 'var(--surface-gray-6)',
+    'gray-7': 'var(--surface-gray-7)',
+    'green-1': 'var(--surface-green-1)',
+    'green-2': 'var(--surface-green-2)',
+    'green-3': 'var(--surface-green-3)',
+    'menu-bar': 'var(--surface-menu-bar)',
+    modal: 'var(--surface-modal)',
+    'orange-1': 'var(--surface-orange-1)',
+    'pink-1': 'var(--surface-pink-1)',
+    'red-1': 'var(--surface-red-1)',
+    'red-2': 'var(--surface-red-2)',
+    'red-3': 'var(--surface-red-3)',
+    'red-4': 'var(--surface-red-4)',
+    'red-5': 'var(--surface-red-5)',
+    'red-6': 'var(--surface-red-6)',
+    selected: 'var(--surface-selected)',
+    'violet-1': 'var(--surface-violet-1)',
+    white: 'var(--surface-white)',
+  },
+  'text-icons': {
+    'amber-1': 'var(--text-icons-amber-1)',
+    'amber-2': 'var(--text-icons-amber-2)',
+    'amber-3': 'var(--text-icons-amber-3)',
+    'blue-1': 'var(--text-icons-blue-1)',
+    'blue-2': 'var(--text-icons-blue-2)',
+    'blue-3': 'var(--text-icons-blue-3)',
+    'cyan-1': 'var(--text-icons-cyan-1)',
+    'gray-1': 'var(--text-icons-gray-1)',
+    'gray-2': 'var(--text-icons-gray-2)',
+    'gray-3': 'var(--text-icons-gray-3)',
+    'gray-4': 'var(--text-icons-gray-4)',
+    'gray-5': 'var(--text-icons-gray-5)',
+    'gray-6': 'var(--text-icons-gray-6)',
+    'gray-7': 'var(--text-icons-gray-7)',
+    'gray-8': 'var(--text-icons-gray-8)',
+    'gray-9': 'var(--text-icons-gray-9)',
+    'green-1': 'var(--text-icons-green-1)',
+    'green-2': 'var(--text-icons-green-2)',
+    'green-3': 'var(--text-icons-green-3)',
+    'pink-1': 'var(--text-icons-pink-1)',
+    'red-1': 'var(--text-icons-red-1)',
+    'red-2': 'var(--text-icons-red-2)',
+    'red-3': 'var(--text-icons-red-3)',
+    'red-4': 'var(--text-icons-red-4)',
+    'violet-1': 'var(--text-icons-violet-1)',
+    white: 'var(--text-icons-white)',
+  },
+}
+
+module.exports = espressoColors

package/src/utils/tailwind.config.js

@@ -1,6 +1,8 @@
 const plugin = require('tailwindcss/plugin')
+const espressoVariables = require('./espressoVariables.js')
 
 module.exports = {
+  darkMode: ['selector', '[data-theme="dark"]'],
   theme: {
     extend: {
       spacing: {
@@ -251,6 +253,7 @@ module.exports = {
         800: 'rgba(0, 0, 0, 0.81)',
         900: 'rgba(0, 0, 0, 0.90)',
       },
+      ...espressoVariables,
     }),
     borderRadius: {
       none: '0px', // 0