@indielayer/ui 1.0.0-alpha.0 → 1.0.0-alpha.2

package/lib/install.d.ts

@@ -1,6 +1,4 @@
-import type { App } from 'vue';
-export interface IndielayerUIOptions {
-    prefix?: string;
-}
-declare const install: (app: App, options?: IndielayerUIOptions) => void;
-export default install;
+declare const _default: {
+    install: (app: import("vue").App<any>, installOptions?: import("./create").IndielayerUIOptions) => void;
+};
+export default _default;

package/lib/nuxt.js

@@ -1,5 +1,5 @@
-import { defineNuxtModule } from '@nuxt/kit'
-import UI from '@indielayer/ui'
+import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
+import { fileURLToPath } from 'node:url'
 
 export default defineNuxtModule({
   meta: {
@@ -12,22 +12,21 @@ export default defineNuxtModule({
   defaults: {
     prefix: 'X',
   },
-  async setup(moduleOptions, nuxt) {
+  async setup(options, nuxt) {
+    // Create resolver to resolve relative paths
+    const { resolve } = createResolver(import.meta.url)
+
+    nuxt.options.runtimeConfig.public.indielayerOptions = options
+
     // plugin install
-    nuxt.vueApp.use(UI, { prefix: 'X' })
+    addPlugin(resolve('./nuxt.plugin.js'))
 
     // nuxt install
-    // nuxt.hook('components:dirs', (dirs) => {
-    //   dirs.push({
-    //     path: join(__dirname, 'components'),
-    //     prefix: options?.prefix ? options?.prefix : 'X',
-    //   })
-
-    //   // temp import XTab - would be XTabsTab
-    //   dirs.push({
-    //     path: join(__dirname, 'components/tabs'),
-    //     prefix: options?.prefix ? options?.prefix : 'X',
-    //   })
-    // })
+    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

@@ -1 +1 @@
-._alert_1sdha_2[data-v-3f626502]{color:var(--x-alert-text);background-color:var(--x-alert-bg);border-color:var(--x-alert-border)}._alert--glow_1sdha_1[data-v-3f626502]{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-3f626502]{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-1c1f558a]{color:var(--x-avatar-text);background-color:var(--x-avatar-bg);border-color:var(--x-avatar-border)}.dark ._avatar_v7jzc_2[data-v-1c1f558a]{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-177c6a64]{color:var(--x-button-text);background-color:var(--x-button-bg);border-color:var(--x-button-border)}._button--glow_1sbr9_1[data-v-177c6a64]{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-177c6a64]: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-177c6a64]: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-177c6a64]{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-177c6a64]: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-177c6a64]: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-38d58f5e]{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-75e75c8a]:before,._scrollWrap_1k3q9_2[data-v-75e75c8a]:after{content:"";pointer-events:none;position:absolute;z-index:1;transition:box-shadow .2s}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-75e75c8a]:before,._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-75e75c8a]:after{top:0;bottom:0;width:20px}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-75e75c8a]:before,._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-75e75c8a]:after{right:0;left:0;height:20px}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-75e75c8a]:before{left:0}._scrollWrap_1k3q9_2._horizontal_1k3q9_11[data-v-75e75c8a]:after{right:0}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-75e75c8a]:before{top:0}._scrollWrap_1k3q9_2._vertical_1k3q9_17[data-v-75e75c8a]:after{bottom:0}._scrollWrap_1k3q9_2._shadow-left_1k3q9_36[data-v-75e75c8a]:before{box-shadow:inset 12px 0 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-right_1k3q9_40[data-v-75e75c8a]:after{box-shadow:inset -12px 0 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-top_1k3q9_44[data-v-75e75c8a]:before{box-shadow:inset 0 12px 10px -10px #00000012}._scrollWrap_1k3q9_2._shadow-bottom_1k3q9_48[data-v-75e75c8a]:after{box-shadow:inset 0 -12px 10px -10px #00000012}._hideScroll_1k3q9_53[data-v-75e75c8a]{-ms-overflow-style:auto;scrollbar-width:none}._hideScroll_1k3q9_53[data-v-75e75c8a]::-webkit-scrollbar{display:none}._link--shadow_1tilo_1[data-v-f0eed94e]{box-shadow:inset 0 -.315em 0 0 var(--x-shadow)}._link--shadow_1tilo_1[data-v-f0eed94e]:hover{box-shadow:inset 0 -1.125em 0 0 var(--x-shadow)}.dark ._link--shadow_1tilo_1[data-v-f0eed94e]{box-shadow:inset 0 -.315em 0 0 var(--x-dark-shadow)}.dark ._link--shadow_1tilo_1[data-v-f0eed94e]:hover{box-shadow:inset 0 -1.125em 0 0 var(--x-dark-shadow)}._menu-item_1v1kj_2[data-v-777ef46c]{color:var(--x-text);background-color:var(--x-bg)}._menu-item_1v1kj_2[data-v-777ef46c]:before{content:"";position:absolute;left:-1px;height:100%;width:1px;background-color:transparent}._menu-item_1v1kj_2[data-v-777ef46c]: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-777ef46c]{color:var(--x-dark-text);background:var(--x-dark-bg)}.dark ._menu-item_1v1kj_2[data-v-777ef46c]: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-777ef46c]:hover:before,.x-menu-inner ._menu-item--active_1v1kj_1[data-v-777ef46c]: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-cebce3c2]{box-shadow:0 0 #000,0 0 #000,0 10px 15px -3px var(--x-glow),0 4px 6px -4px var(--x-glow)}
+._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/version.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indielayer/ui",
-  "version": "1.0.0-alpha.0",
+  "version": "1.0.0-alpha.2",
   "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
   "author": {
     "name": "João Teixeira",
@@ -19,6 +19,7 @@
   ],
   "files": [
     "lib",
+    "src",
     "*.d.ts",
     "README.md"
   ],
@@ -31,23 +32,14 @@
       "require": "./lib/index.cjs.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": "yarn build-only && chokidar \"./src/**\" -c \"yarn build-only\"",
-    "dev2": "vite build --watch",
-    "build": "yarn generate && vite build",
-    "build-prod": "yarn build && yarn gen-types",
-    "typecheck": "vue-tsc --noEmit",
-    "build-only": "vite build",
-    "generate": "yarn gen-version",
-    "gen-types": "vue-tsc --declaration --emitDeclarationOnly",
-    "gen-version": "node .scripts/gen-version.js",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "peerDependencies": {
     "tailwindcss": "^3.0.0",
     "vue": "^3.0.0"
@@ -68,6 +60,7 @@
     "postcss": "^8.4.4",
     "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"
@@ -89,5 +82,16 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9465cc7fde63976bc1fdb5bf8ce35c01ca1b9333"
-}
+  "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

@@ -0,0 +1,137 @@
+<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'
+
+import XIcon from '../../components/icon/Icon.vue'
+
+export default defineComponent({
+  name: 'XAvatar',
+
+  components: {
+    XIcon,
+  },
+
+  validators: {
+    ...useCommon.validators(),
+  },
+
+  props: {
+    ...useCommon.props(),
+    ...useColors.props('primary'),
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    name: String,
+    alt: String,
+    image: String,
+    outlined: Boolean,
+    rounded: Boolean,
+  },
+
+  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 ''
+    })
+
+    watch(() => props.image, (src) => {
+      if (!src) return
+      const img = new Image()
+
+      img.onload = () => { source.value = props.image }
+      img.onerror = () => { }
+      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>

package/src/components/badge/Badge.vue

@@ -0,0 +1,107 @@
+<script lang="ts">
+import { computed, defineComponent, type PropType } from 'vue'
+import { useCSS } from '../../composables/css'
+import { useCommon } from '../../composables/common'
+import { useColors } from '../../composables/colors'
+
+export default defineComponent({
+  name: 'XBadge',
+
+  props: {
+    ...useCommon.props(),
+    ...useColors.props('primary'),
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    position: {
+      type: String as PropType<'top' | 'bottom'>,
+      default: 'top',
+    },
+    align: {
+      type: String as PropType<'left' | 'right'>,
+      default: 'right',
+    },
+    animated: Boolean,
+    outlined: Boolean,
+    icon: String,
+    show: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  setup(props, { slots }) {
+    const css = useCSS('badge')
+    const colors = useColors()
+    const styles = computed(() => {
+      const color = colors.getPalette(props.color)
+
+      return css.get('bg', color[500])
+    })
+
+    const positionClasses = computed(() => {
+      const classes = []
+
+      if (props.position === 'top') classes.push('top-0')
+      if (props.position === 'bottom') classes.push('bottom-0')
+      if (props.align === 'left') classes.push('left-0')
+      if (props.align === 'right') classes.push('right-0')
+      if (slots.content) classes.push('-m-[7.5%]')
+      else if (props.outlined) {
+        classes.push('-m-[5%]')
+      } else {
+        classes.push('-m-[3.5%]')
+      }
+
+      return classes
+    })
+
+    return {
+      styles,
+      positionClasses,
+    }
+  },
+})
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="inline-block"
+    :style="styles"
+  >
+    <div class="relative inline-block">
+      <slot></slot>
+      <div
+        v-if="show"
+        class="absolute rounded-full z-10 bg-[color:var(--x-badge-bg)]"
+        :class="[
+          positionClasses,
+          {
+            'border-2 border-gray-50 dark:border-gray-900': outlined,
+          }
+        ]"
+      >
+        <div
+          v-if="animated"
+          class="animate-ping opacity-75 absolute top-0 left-0 rounded-full h-full w-full z-10 bg-[color:var(--x-badge-bg)]"
+        ></div>
+        <div
+          class="text-xs text-white overflow-hidden"
+          :class="[
+            $slots.content ? 'flex items-center justify-center min-w-[1.25rem] h-5 px-0.5' : {
+              'p-1': size === 'xs',
+              'p-[0.312rem]': size === 'sm',
+              'p-1.5': !size || !['xs', 'sm', 'lg', 'xl'].includes(size),
+              'p-2': size === 'lg',
+              'p-2.5': size === 'xl',
+            }
+          ]"
+        >
+          <slot name="content"></slot>
+        </div>
+      </div>
+    </div>
+  </component>
+</template>

package/src/components/breadcrumbs/Breadcrumbs.vue

@@ -0,0 +1,60 @@
+<script lang="ts">
+import { computed, defineComponent, type PropType } from 'vue'
+
+export type BreadcrumbItem = {
+  label: string,
+  to?: string | object,
+  href?: string,
+  color?: string,
+  icon?: string,
+  shadow?: boolean,
+  underline?: boolean
+}
+
+export default defineComponent({
+  name: 'XBreadcrumbs',
+
+  props: {
+    items: Array as PropType<Array<BreadcrumbItem>>,
+    icon: String,
+    color: String,
+    shadow: Boolean,
+    underline: Boolean,
+  },
+
+  setup(props) {
+    const arrowIcon = '<path d="M13 7l5 5m0 0l-5 5m5-5H6" />'
+    const lastItem = computed(() => props.items && props.items.length > 0 ? props.items[props.items.length - 1] : undefined)
+
+    return {
+      arrowIcon,
+      lastItem,
+    }
+  },
+})
+</script>
+
+<template>
+  <nav v-if="items && items.length > 0" aria-label="Breadcrumb">
+    <ul class="flex items-center flex-wrap">
+      <li v-for="(item, index) in items?.slice(0,-1)" :key="index" class="flex items-center">
+        <x-link
+          :to="item.to"
+          :href="item.href"
+          :color="item.color || color"
+          :shadow="item.shadow || shadow"
+          :underline="item.underline|| underline"
+          class="flex items-center"
+        >
+          <x-icon v-if="item.icon" :icon="item.icon" class="mr-1.5"/>
+          {{ item.label }}
+        </x-link>
+        <x-icon :icon="icon || arrowIcon" class="text-gray-400 mx-1.5 shrink-0" size="sm" />
+      </li>
+      <li v-if="lastItem" class="font-semibold">
+        <x-icon v-if="lastItem.icon" :icon="lastItem.icon" class="mr-1"/>
+        {{ lastItem.label }}
+      </li>
+    </ul>
+  </nav>
+</template>