@indielayer/ui 0.2.4 → 1.0.0-alpha.3

package/lib/install.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    install: (app: import("vue").App<any>, installOptions?: import("./create").IndielayerUIOptions) => void;
+};
+export default _default;

package/lib/nuxt.js

@@ -0,0 +1,32 @@
+import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
+import { fileURLToPath } from 'node:url'
+
+export default defineNuxtModule({
+  meta: {
+    name: '@indielayer/ui',
+    configKey: 'indielayer',
+    compatibility: {
+      nuxt: '^3.0.0',
+    },
+  },
+  defaults: {
+    prefix: 'X',
+  },
+  async setup(options, nuxt) {
+    // Create resolver to resolve relative paths
+    const { resolve } = createResolver(import.meta.url)
+
+    nuxt.options.runtimeConfig.public.indielayerOptions = options
+
+    // plugin install
+    addPlugin(resolve('./nuxt.plugin.js'))
+
+    // nuxt install
+    nuxt.hook('components:dirs', (dirs) => {
+      dirs.push({
+        path: fileURLToPath(new URL('../src/components', import.meta.url)),
+        prefix: options?.prefix ? options?.prefix : 'X',
+      })
+    })
+  },
+})

package/lib/nuxt.plugin.js

@@ -0,0 +1,8 @@
+import { defineNuxtPlugin } from '#app'
+import create from '../src/create'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const UI = create(nuxtApp.$config.indielayerOptions)
+
+  nuxtApp.vueApp.use(UI)
+})

package/lib/style.css

@@ -0,0 +1 @@
+._alert_1sdha_2[data-v-35ce54d8]{color:var(--x-alert-text);background-color:var(--x-alert-bg);border-color:var(--x-alert-border)}._alert--glow_1sdha_1[data-v-35ce54d8]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-alert-glow),0 4px 6px -4px var(--x-alert-glow)}.dark ._alert_1sdha_2[data-v-35ce54d8]{color:var(--x-dark-alert-text, var(--x-alert-text));background-color:var(--x-dark-alert-bg, var(--x-alert-bg));border-color:var(--x-dark-alert-border, var(--x-alert-border))}._avatar_v7jzc_2[data-v-243016db]{color:var(--x-avatar-text);background-color:var(--x-avatar-bg);border-color:var(--x-avatar-border)}.dark ._avatar_v7jzc_2[data-v-243016db]{color:var(--x-dark-avatar-text, var(--x-avatar-text));background-color:var(--x-dark-avatar-bg, var(--x-avatar-bg));border-color:var(--x-dark-avatar-border, var(--x-avatar-border))}._button_1sbr9_2[data-v-d8eeb328]{color:var(--x-button-text);background-color:var(--x-button-bg);border-color:var(--x-button-border)}._button--glow_1sbr9_1[data-v-d8eeb328]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-button-glow),0 4px 6px -4px var(--x-button-glow)}._button_1sbr9_2[data-v-d8eeb328]:hover{color:var(--x-button-text-hover, var(--x-button-text));background-color:var(--x-button-bg-hover, var(--x-button-bg));border-color:var(--x-button-border-hover, var(--x-button-border))}._button_1sbr9_2[data-v-d8eeb328]:active{color:var(--x-button-text-active, var(--x-button-text));background-color:var(--x-button-bg-active, var(--x-button-bg));border-color:var(--x-button-border-active, var(--x-button-border))}.dark ._button_1sbr9_2[data-v-d8eeb328]{color:var(--x-dark-button-text, var(--x-button-text));background-color:var(--x-dark-button-bg, var(--x-button-bg));border-color:var(--x-dark-button-border, var(--x-button-border))}.dark ._button_1sbr9_2[data-v-d8eeb328]:hover{color:var(--x-dark-button-text-hover, var(--x-dark-button-text, var(--x-button-text)));background-color:var(--x-dark-button-bg-hover, var(--x-dark-button-bg, var(--x-button-bg)));border-color:var(--x-dark-button-border-hover, var(--x-dark-button-border, var(--x-button-border)))}.dark ._button_1sbr9_2[data-v-d8eeb328]:active{color:var(--x-dark-button-text-active, var(--x-dark-button-text));background-color:var(--x-dark-button-bg-active, var(--x-dark-button-bg, var(--x-button-bg)));border-color:var(--x-dark-button-border-active, var(--x-dark-button-border, var(--x-button-border)))}._button-group_s7fyl_2:not(._button-group--rounded_s7fyl_1)>:first-child{border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-left-width:1px}._button-group_s7fyl_2:not(._button-group--rounded_s7fyl_1)>:last-child{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}._button-group--rounded_s7fyl_1>:first-of-type{border-top-left-radius:9999px;border-bottom-left-radius:9999px;border-left-width:1px}._button-group--rounded_s7fyl_1>:last-child{border-top-right-radius:9999px;border-bottom-right-radius:9999px}._checkbox--glow_1dz66_1[data-v-54fce636]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow)}._scrollWrap_1k3q9_2[data-v-ff88aa62]:before,._scrollWrap_1k3q9_2[data-v-ff88aa62]:after{content:"";pointer-events:none;position:absolute;z-index:1;transition:box-shadow .2s}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-ff88aa62]:before,._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-ff88aa62]:after{top:0;bottom:0;width:20px}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-ff88aa62]:before,._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-ff88aa62]:after{right:0;left:0;height:20px}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-ff88aa62]:before{left:0}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-ff88aa62]:after{right:0}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-ff88aa62]:before{top:0}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-ff88aa62]:after{bottom:0}._scrollWrap_1k3q9_2._shadow-left_1k3q9_36[data-v-ff88aa62]:before{box-shadow:inset 12px 0 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-right_1k3q9_40[data-v-ff88aa62]:after{box-shadow:inset -12px 0 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-top_1k3q9_44[data-v-ff88aa62]:before{box-shadow:inset 0 12px 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-bottom_1k3q9_48[data-v-ff88aa62]:after{box-shadow:inset 0 -12px 10px -10px #00000012}._hideScroll_1k3q9_53[data-v-ff88aa62]{-ms-overflow-style:auto;scrollbar-width:none}._hideScroll_1k3q9_53[data-v-ff88aa62]::-webkit-scrollbar{display:none}._link--shadow_1tilo_1[data-v-b6c57c10]{box-shadow:inset 0 -.315em 0 0 var(--x-shadow)}._link--shadow_1tilo_1[data-v-b6c57c10]:hover{box-shadow:inset 0 -1.125em 0 0 var(--x-shadow)}.dark ._link--shadow_1tilo_1[data-v-b6c57c10]{box-shadow:inset 0 -.315em 0 0 var(--x-dark-shadow)}.dark ._link--shadow_1tilo_1[data-v-b6c57c10]:hover{box-shadow:inset 0 -1.125em 0 0 var(--x-dark-shadow)}._menu-item_1v1kj_2[data-v-2c7185df]{color:var(--x-text);background-color:var(--x-bg)}._menu-item_1v1kj_2[data-v-2c7185df]:before{content:"";position:absolute;left:-1px;height:100%;width:1px;background-color:transparent}._menu-item_1v1kj_2[data-v-2c7185df]:hover{color:var(--x-text-hover, var(--x-text));background-color:var(--x-bg-hover, var(--x-bg))}.dark ._menu-item_1v1kj_2[data-v-2c7185df]{color:var(--x-dark-text);background:var(--x-dark-bg)}.dark ._menu-item_1v1kj_2[data-v-2c7185df]:hover{color:var(--x-dark-text-hover, var(--x-dark-text));background-color:var(--x-dark-bg-hover, var(--x-dark-bg))}.x-menu-inner ._menu-item_1v1kj_2[data-v-2c7185df]:hover:before,.x-menu-inner ._menu-item--active_1v1kj_1[data-v-2c7185df]:before{background-color:var(--x-border-hover)}._popover_2vipi_2 ._popoverContent_2vipi_3{visibility:hidden;transition-duration:.1s;transition-timing-function:cubic-bezier(.4,0,1,1)}._popover_2vipi_2 ._popoverTop_2vipi_8{--tw-translate-y: .5rem}._popover_2vipi_2 ._popoverRight_2vipi_11{--tw-translate-x: -.5rem}._popover_2vipi_2 ._popoverBottom_2vipi_14{--tw-translate-y: -.25rem}._popover_2vipi_2 ._popoverLeft_2vipi_17{--tw-translate-x: .5rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverContent_2vipi_3,._popover_2vipi_2._is-open_2vipi_22 ._popoverContent_2vipi_3{visibility:visible;transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1)}._popover_2vipi_2._hover_2vipi_21:hover ._popoverTop_2vipi_8,._popover_2vipi_2._is-open_2vipi_22 ._popoverTop_2vipi_8{--tw-translate-y: .25rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverRight_2vipi_11,._popover_2vipi_2._is-open_2vipi_22 ._popoverRight_2vipi_11{--tw-translate-x: 0px}._popover_2vipi_2._hover_2vipi_21:hover ._popoverBottom_2vipi_14,._popover_2vipi_2._is-open_2vipi_22 ._popoverBottom_2vipi_14{--tw-translate-y: .25rem}._popover_2vipi_2._hover_2vipi_21:hover ._popoverLeft_2vipi_17,._popover_2vipi_2._is-open_2vipi_22 ._popoverLeft_2vipi_17{--tw-translate-x: 0px}._radio--glow_14rlz_1[data-v-857bd200]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow)}

package/lib/tailwind.preset.js

@@ -1,26 +1,55 @@
-'use strict';
+const colors = require('tailwindcss/colors')
 
-const { borderRadius } = require('tailwindcss/defaultTheme');
-const colors = require('tailwindcss/colors');
-
-module.exports = {
+module.exports = (useDark = true) => ({
   theme: {
     extend: {
       colors: {
-        primary: colors.blue,
+        primary: colors.emerald,
         secondary: colors.slate,
         success: colors.green,
         warning: colors.yellow,
         error: colors.red,
       },
-      borderRadius: {
-        button: borderRadius.md,
-        form: borderRadius.md,
-      },
-      backgroundImage: {
-        'dark-image': 'linear-gradient(rgba(0, 0, 0, 0.15) 0 0)',
-        'darker-image': 'linear-gradient(rgba(0, 0, 0, 0.30) 0 0)',
+      borderColor: colors.gray[100],
+      fontFamily: {
+        sans: [
+          'Inter',
+          '-apple-system',
+          'BlinkMacSystemFont',
+          'ui-sans-serif',
+          'system-ui',
+          '"Segoe UI"',
+          'Roboto',
+          '"Helvetica Neue"',
+          'Arial',
+          '"Noto Sans"',
+          'sans-serif',
+          '"Apple Color Emoji"',
+          '"Segoe UI Emoji"',
+          '"Segoe UI Symbol"',
+          '"Noto Color Emoji"',
+        ],
       },
     },
   },
-};
+  plugins: useDark ? [
+    ({ addBase, config }) => {
+      addBase({
+        html: {
+          color: config('theme.colors.gray.900'),
+          backgroundColor: 'white',
+        },
+        'html.dark': {
+          color: config('theme.colors.gray.100'),
+          backgroundColor: config('theme.colors.gray.900'),
+        },
+        '*, ::before, ::after': {
+          borderColor: colors.gray[200],
+        },
+        '.dark *, .dark ::before, .dark ::after': {
+          borderColor: colors.slate[700],
+        },
+      })
+    },
+  ] : [],
+})

package/lib/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "1.0.0-alpha.3";
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "0.2.4",
+  "version": "1.0.0-alpha.3",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -8,6 +8,7 @@
   },
   "keywords": [
     "vue",
+    "vue 3",
     "tailwindcss",
     "components",
     "ui framework",
@@ -18,43 +19,53 @@
   ],
   "files": [
     "lib",
-    "src"
+    "src",
+    "*.d.ts",
+    "README.md"
   ],
-  "main": "lib/cjs",
-  "module": "lib/esm",
-  "browser": "lib/umd",
+  "main": "lib/index.cjs.js",
+  "module": "lib/index.es.js",
+  "typings": "lib/index.d.ts",
   "exports": {
     ".": {
-      "import": "./lib/esm/index.js",
-      "require": "./lib/cjs/index.js"
+      "import": "./lib/index.es.js",
+      "require": "./lib/index.cjs.js"
     },
-    "./nuxt": "./src/nuxt.js",
+    "./nuxt": "./lib/nuxt.js",
+    "./style": "./lib/style.css",
+    "./styles": "./lib/style.css",
+    "./nuxt.plugin": "./lib/nuxt.plugin.js",
+    "./nuxt.plugin.js": "./lib/nuxt.plugin.js",
     "./tailwind.preset": "./lib/tailwind.preset.js",
     "./tailwind.preset.js": "./lib/tailwind.preset.js"
   },
   "sideEffects": false,
-  "scripts": {
-    "dev": "npm run serve",
-    "build": "NODE_ENV=production rollup --config ./rollup.config.js",
-    "serve": "rollup --config ./rollup.config.js --watch",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "dependencies": {
-    "vue": "^3.0.5"
+  "peerDependencies": {
+    "tailwindcss": "^3.0.0",
+    "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
+    "@cypress/vite-dev-server": "^2.2.2",
+    "@cypress/vue": "^3.1.1",
+    "@rushstack/eslint-patch": "^1.1.3",
+    "@types/node": "^17.0.30",
+    "@vitejs/plugin-vue": "^2.3.1",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
+    "@vue/tsconfig": "^0.1.3",
+    "@vueuse/core": "^8.4.2",
     "autoprefixer": "^10.4.0",
+    "chokidar-cli": "^3.0.0",
+    "clean-css": "^5.3.0",
+    "cypress": "^9.6.0",
+    "eslint": "^8.16.0",
+    "eslint-plugin-cypress": "^2.12.1",
     "postcss": "^8.4.4",
-    "rollup": "^2.48.0",
-    "rollup-plugin-cleaner": "^1.0.0",
-    "rollup-plugin-commonjs": "^10.1.0",
-    "rollup-plugin-postcss": "^4.0.1",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-vue": "^6.0.0",
-    "tailwindcss": "^3.0.0"
+    "start-server-and-test": "^1.14.0",
+    "tailwindcss": "^3.0.0",
+    "typescript": "^4.7.2",
+    "vite": "^2.9.5",
+    "vue": "^3.2.33",
+    "vue-tsc": "^0.34.15"
   },
   "browserslist": [
     "> 1%",
@@ -73,5 +84,16 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "bc828716102b0e6063aa0db9cd74c84e46fbe9a7"
-}
+  "scripts": {
+    "dev": "pnpm build-only && chokidar \"./src/**\" -c \"pnpm build-only\"",
+    "dev2": "vite build --watch",
+    "build": "pnpm generate && vite build",
+    "build-prod": "pnpm build && pnpm gen-types",
+    "typecheck": "vue-tsc --noEmit",
+    "build-only": "vite build",
+    "generate": "pnpm gen-version",
+    "gen-types": "vue-tsc --declaration --emitDeclarationOnly",
+    "gen-version": "node .scripts/gen-version.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/src/components/alert/Alert.vue

@@ -0,0 +1,164 @@
+<script lang="ts">
+import { computed, defineComponent, type PropType } from 'vue'
+import { useColors } from '../../composables/colors'
+import { useCSS } from '../../composables/css'
+
+export default defineComponent({
+  name: 'XAlert',
+
+  props: {
+    ...useColors.props(),
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    type: String as PropType<'info' | 'success' | 'error' | 'warning' | undefined>,
+    glow: Boolean,
+    light: Boolean,
+    outlined: Boolean,
+    removable: Boolean,
+  },
+
+  emits: ['remove'],
+
+  setup(props) {
+    const css = useCSS('alert')
+    const colors = useColors()
+    const gray = colors.getPalette('gray')
+    const styles = computed(() => {
+      const color = colors.getPalette(props.color)
+      const vars: (object | string)[] = []
+
+      if (props.glow) vars.push(css.get('glow', colors.getColorOpacity(color[500], 0.5)))
+
+      if (props.color) {
+        if (props.light) {
+          vars.push(css.variables({
+            bg: color[50],
+            text: color[600],
+            icon: color[600],
+            border: props.outlined ? color[600] : color[50],
+            dark: {
+              bg: color[200],
+              text: color[800],
+              icon: color[600],
+              border: props.outlined ? color[500] : color[200],
+            },
+          }))
+        } else {
+          vars.push(css.variables({
+            bg: props.outlined ? 'transparent' : color[600],
+            text: props.outlined ? color[600] : color[50],
+            icon: props.outlined ? color[600] : color[50],
+            border: color[600],
+            dark: {
+              border: color[400],
+              text: props.outlined ? color[400] : color[50],
+            },
+          }))
+        }
+
+        return vars
+      }
+
+      vars.push(css.variables({
+        bg: 'transparent',
+        text: color[500],
+        border: color[300],
+        dark: {
+          bg: 'transparent',
+          text: color[300],
+          border: color[500],
+        },
+      }))
+
+      return vars
+    })
+
+    return {
+      styles,
+    }
+  },
+})
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="flex rounded-md px-4 py-2 border items-center"
+    :class="[
+      $style['alert'],
+      glow ? $style['alert--glow'] : '',
+    ]"
+    :style="styles"
+  >
+    <div v-if="$slots.icon" class="flex-none pr-2">
+      <slot name="icon"></slot>
+    </div>
+    <svg
+      v-else-if="type"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+      stroke-linejoin="round"
+      stroke-linecap="round"
+      fill="none"
+      role="presentation"
+      class="flex-none stroke-2 w-5 h-5 mr-2 text-[color:var(--x-alert-icon)] dark:text-[color:var(--x-dark-alert-icon)]"
+    >
+      <template v-if="type === 'info'">
+        <path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </template>
+
+      <template v-if="type === 'success'">
+        <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </template>
+
+      <template v-if="type === 'error'">
+        <path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </template>
+      <template v-if="type === 'warning'">
+        <path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+      </template>
+    </svg>
+
+    <slot></slot>
+
+    <template v-if="removable">
+      <div class="flex-grow"></div>
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        fill="none"
+        role="presentation"
+        class="stroke-2 w-5 h-5 ml-1 cursor-pointer shrink-0"
+        @click="(e) => $emit('remove', e)"
+      >
+        <path d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    </template>
+  </component>
+</template>
+
+<style lang="postcss" module scoped>
+.alert {
+  color: var(--x-alert-text);
+  background-color: var(--x-alert-bg);
+  border-color: var(--x-alert-border);
+
+  &--glow {
+    box-shadow: 0 0 #000, 0 0 #000, 0 10px 15px -3px var(--x-alert-glow), 0 4px 6px -4px var(--x-alert-glow);
+  }
+
+  :global(.dark) & {
+    color: var(--x-dark-alert-text, var(--x-alert-text));
+    background-color: var(--x-dark-alert-bg, var(--x-alert-bg));
+    border-color: var(--x-dark-alert-border, var(--x-alert-border));
+  }
+}
+</style>

package/src/components/avatar/Avatar.vue

@@ -1,120 +1,137 @@
-<template>
-  <component
-    :is="tag"
-    class="inline-flex items-center justify-center overflow-hidden"
-    :class="[
-      // color
-      { [`bg-${color}-500 text-${color}-50`]: !source && !outlined },
-      {
-        // border
-        'border border-gray-400 dark:border-gray-500': !source && outlined,
-
-        // size
-        'h-6 w-6 text-xs': size === 'xs',
-        'h-7 w-7 text-sm': size === 'sm',
-        'h-10 w-10': !['xs', 'sm', 'lg', 'xl'].includes(size),
-        'h-12 w-12 text-lg': size === 'lg',
-        'h-20 w-20 text-2xl': size === 'xl',
-        'h-36 w-36 text-2xl': size === '2xl',
-      },
-      squared ? 'rounded-md' : 'rounded-full'
-    ]"
-  >
-    <span
-      v-if="!source && name"
-      class="leading-none"
-    >{{ initials }}</span>
+<script lang="ts">
+import { computed, defineComponent, ref, watch } from 'vue'
+import { useCommon } from '../../composables/common'
+import { useColors } from '../../composables/colors'
+import { useCSS } from '../../composables/css'
 
-    <img
-      v-if="source"
-      :alt="alt"
-      :src="src"
-      class="h-full w-full"
-    />
-  </component>
-</template>
+import XIcon from '../../components/icon/Icon.vue'
 
-<script>
-const validator = {
-  variant: [
-    'rounded',
-    'squared',
-  ],
-}
-
-export default {
+export default defineComponent({
   name: 'XAvatar',
 
-  validator,
-
-  props: {
-    alt: {
-      type: String,
-      default: null,
-    },
-
-    color: {
-      type: String,
-      default: 'primary',
-    },
-
-    name: {
-      type: String,
-      default: null,
-    },
-
-    size: {
-      type: String,
-      default: null,
-    },
-
-    outlined: {
-      type: Boolean,
-      default: false,
-    },
+  components: {
+    XIcon,
+  },
 
-    src: {
-      type: String,
-      default: null,
-    },
+  validators: {
+    ...useCommon.validators(),
+  },
 
+  props: {
+    ...useCommon.props(),
+    ...useColors.props('primary'),
     tag: {
       type: String,
-      default: 'span',
+      default: 'div',
     },
-
-    squared: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  data() {
-    return {
-      source: null,
-    }
+    name: String,
+    alt: String,
+    image: String,
+    outlined: Boolean,
+    rounded: Boolean,
   },
 
-  computed: {
-    initials() {
-      if (this.name) {
-        const initials = this.name.match(/\b\w/g) || []
+  setup(props) {
+    const avatarIcon = '<path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />'
+    const source = ref<string>()
+    const initials = computed(() => {
+      if (props.name) {
+        const initials = props.name.match(/\b\w/g) || []
 
         return ((initials.shift() || '') + (initials.pop() || '')).toUpperCase()
       }
 
       return ''
-    },
-  },
+    })
 
-  mounted() {
-    if (this.src) {
+    watch(() => props.image, (src) => {
+      if (!src) return
       const img = new Image()
 
-      img.onload = () => { this.source = this.src }
+      img.onload = () => { source.value = props.image }
       img.onerror = () => { }
-      img.src = this.src
+      img.src = src
+    }, {
+      immediate: true,
+    })
+
+    const sizeClasses = computed(() => {
+      if (props.size === 'xs') return 'h-6 w-6 text-xs'
+      else if (props.size === 'sm') return 'h-9 w-9 text-sm'
+      else if (props.size === 'lg') return 'h-12 w-12 text-lg'
+      else if (props.size === 'xl') return 'h-[3.75rem] w-[3.75rem] text-xl'
+
+      return 'h-10 w-10'
+    })
+
+    const css = useCSS('avatar')
+    const colors = useColors()
+    const styles = computed(() => {
+      const color = colors.getPalette(props.color)
+
+      if (source.value) return css.variables({
+        bg: 'transparent',
+        border: props.outlined ? color[500] : 'transparent',
+      })
+
+      return css.variables({
+        bg: color[100],
+        text: color[500],
+        border: props.outlined ? color[500] : 'transparent',
+        dark: {
+          bg: color[200],
+        },
+      })
+    })
+
+    return {
+      avatarIcon,
+      source,
+      initials,
+      sizeClasses,
+      styles,
     }
   },
-}
+})
 </script>
+
+<template>
+  <component
+    :is="tag"
+    class="relative inline-flex items-center justify-center overflow-hidden align-middle border box-content"
+    :style="styles"
+    :class="[
+      $style.avatar,
+      sizeClasses,
+      rounded ? 'rounded-full' : 'rounded-md'
+    ]"
+  >
+    <span
+      v-if="!source && name"
+      class="leading-none"
+    >{{ initials }}</span>
+    <slot v-else>
+      <x-icon :size="size" :icon="avatarIcon"/>
+    </slot>
+    <img
+      v-if="source"
+      :alt="alt"
+      :src="image"
+      class="h-full w-full"
+    />
+  </component>
+</template>
+
+<style lang="postcss" module scoped>
+.avatar {
+  color: var(--x-avatar-text);
+  background-color: var(--x-avatar-bg);
+  border-color: var(--x-avatar-border);
+
+  :global(.dark) & {
+    color: var(--x-dark-avatar-text, var(--x-avatar-text));
+    background-color: var(--x-dark-avatar-bg, var(--x-avatar-bg));
+    border-color: var(--x-dark-avatar-border, var(--x-avatar-border));
+  }
+}
+</style>