@indielayer/ui 0.0.0-dev-20240125104319

package/lib/themes/carbon/styles.css.js

@@ -0,0 +1,86 @@
+const o = `html {
+  color: #111827;
+  background-color: white;
+}
+
+html.dark {
+  color: #f3f4f6;
+  background-color: #111827;
+}
+
+*,
+::before,
+::after {
+  border-color: #e5e7eb;
+}
+
+.dark *,
+.dark ::before,
+.dark ::after {
+  border-color: #374151;
+}
+
+:root {
+  --font-family-sans: "IBM Plex Sans", "Helvetica Neue", arial, sans-serif;
+  --font-family-mono: "IBM Plex Mono", "Menlo", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", courier, monospace;
+  --border-color: 226, 232, 240;
+  --primary-color-50: 236, 253, 245;
+  --primary-color-100: 209, 250, 229;
+  --primary-color-200: 167, 243, 208;
+  --primary-color-300: 110, 231, 183;
+  --primary-color-400: 52, 211, 153;
+  --primary-color-500: 16, 185, 129;
+  --primary-color-600: 5, 150, 105;
+  --primary-color-700: 4, 120, 87;
+  --primary-color-800: 6, 95, 70;
+  --primary-color-900: 6, 78, 59;
+  --primary-color-950: 2, 44, 34;
+  --secondary-color-50: 248, 250, 252;
+  --secondary-color-100: 241, 245, 249;
+  --secondary-color-200: 226, 232, 240;
+  --secondary-color-300: 203, 213, 225;
+  --secondary-color-400: 148, 163, 184;
+  --secondary-color-500: 100, 116, 139;
+  --secondary-color-600: 71, 85, 105;
+  --secondary-color-700: 51, 65, 85;
+  --secondary-color-800: 30, 41, 59;
+  --secondary-color-900: 15, 23, 42;
+  --secondary-color-950: 2, 6, 23;
+  --success-color-50: 240, 253, 244;
+  --success-color-100: 220, 252, 231;
+  --success-color-200: 187, 247, 208;
+  --success-color-300: 134, 239, 172;
+  --success-color-400: 74, 222, 128;
+  --success-color-500: 34, 197, 94;
+  --success-color-600: 22, 163, 74;
+  --success-color-700: 21, 128, 61;
+  --success-color-800: 22, 101, 52;
+  --success-color-900: 20, 83, 45;
+  --success-color-950: 5, 46, 22;
+  --warning-color-50: 254, 252, 232;
+  --warning-color-100: 254, 249, 195;
+  --warning-color-200: 254, 240, 138;
+  --warning-color-300: 253, 224, 71;
+  --warning-color-400: 250, 204, 21;
+  --warning-color-500: 234, 179, 8;
+  --warning-color-600: 202, 138, 4;
+  --warning-color-700: 161, 98, 7;
+  --warning-color-800: 133, 77, 14;
+  --warning-color-900: 113, 63, 18;
+  --warning-color-950: 66, 32, 6;
+  --error-color-50: 254, 242, 242;
+  --error-color-100: 254, 226, 226;
+  --error-color-200: 254, 202, 202;
+  --error-color-300: 252, 165, 165;
+  --error-color-400: 248, 113, 113;
+  --error-color-500: 239, 68, 68;
+  --error-color-600: 220, 38, 38;
+  --error-color-700: 185, 28, 28;
+  --error-color-800: 153, 27, 27;
+  --error-color-900: 127, 29, 29;
+  --error-color-950: 69, 10, 10;
+}
+`;
+export {
+  o as default
+};

package/lib/themes/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BaseTheme } from './base';
+export { default as CarbonTheme } from './carbon';

package/lib/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "0.0.0-dev-20240125104319";
+export default _default;

package/lib/version.js

@@ -0,0 +1,4 @@
+const e = "0.0.0-dev-20240125104319";
+export {
+  e as default
+};

package/package.json

@@ -0,0 +1,110 @@
+{
+  "name": "@indielayer/ui",
+  "version": "0.0.0-dev-20240125104319",
+  "description": "Indielayer UI Components with Tailwind CSS build for Vue 3",
+  "author": {
+    "name": "João Teixeira",
+    "url": "https://indielayer.com/"
+  },
+  "keywords": [
+    "vue",
+    "vue 3",
+    "tailwindcss",
+    "components",
+    "ui framework",
+    "component framework",
+    "ui library",
+    "component library",
+    "indielayer"
+  ],
+  "files": [
+    "lib",
+    "src",
+    "*.d.ts",
+    "exports",
+    "README.md"
+  ],
+  "type": "module",
+  "main": "lib/index.umd.js",
+  "module": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib/index.umd.js",
+      "types": "./lib/index.d.ts"
+    },
+    "./nuxt": "./exports/nuxt.mjs",
+    "./nuxt.plugin": "./exports/nuxt.plugin.js",
+    "./nuxt.plugin.js": "./exports/nuxt.plugin.js",
+    "./tailwind.preset": "./exports/tailwind.preset.js",
+    "./tailwind.preset.js": "./exports/tailwind.preset.js"
+  },
+  "sideEffects": false,
+  "peerDependencies": {
+    "tailwindcss": "^3.0.0",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@indielayer/stylelint-config": "^1.0.0",
+    "@rushstack/eslint-patch": "^1.3.2",
+    "@tsconfig/node18": "^2.0.1",
+    "@types/jsdom": "^21.1.1",
+    "@types/node": "^18.16.18",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@vue/test-utils": "^2.4.0",
+    "@vue/tsconfig": "^0.4.0",
+    "@vueuse/core": "^10.2.0",
+    "autoprefixer": "^10.4.0",
+    "c8": "^7.12.0",
+    "clean-css": "^5.3.0",
+    "eslint": "^8.43.0",
+    "floating-vue": "^5.2.0",
+    "jsdom": "^22.1.0",
+    "postcss": "^8.4.4",
+    "rollup-plugin-visualizer": "^5.9.2",
+    "shiki": "^0.14.3",
+    "stylelint": "^14.16.1",
+    "tailwindcss": "^3.3.2",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.11",
+    "vitest": "^0.32.2",
+    "vue": "^3.3.9",
+    "vue-router": "^4.2.2",
+    "vue-tsc": "^1.8.2"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "bugs": {
+    "url": "https://github.com/indielayer/ui/issues"
+  },
+  "homepage": "https://github.com/indielayer/ui#readme",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/indielayer/ui.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "vite dev --mode docs",
+    "build": "pnpm generate && vite build",
+    "build:docs": "pnpm build --mode docs",
+    "build:prod": "pnpm build && pnpm gen-types",
+    "build:watch": "pnpm generate && vite build --watch",
+    "build:only": "vite build",
+    "build:stats": "VITE_VISUALIZER=Y npm run build",
+    "generate": "pnpm gen-version",
+    "gen-types": "vue-tsc --declaration --emitDeclarationOnly -p tsconfig.vitest.json --composite false",
+    "gen-version": "node .scripts/gen-version.cjs",
+    "test": "pnpm test:unit",
+    "test:unit": "vitest --environment jsdom",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "stylelint": "stylelint \"**/*.{css,vue,postcss,scss,sass}\" --ignore-path .gitignore"
+  }
+}

package/src/common/colors.ts

@@ -0,0 +1,36 @@
+import type { Tone, ColorLibrary } from '../composables/useColors'
+
+const isHex = (hex: string) => /^#(?:[A-Fa-f0-9]{3}){1,2}$/.test(hex)
+const isRGB = (rgb: string) => /^rgb[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*(?:,(?![)])|(?=[)]))){3}[)]$/.test(rgb)
+const isRGBA = (rgba: string) => /^^rgba[(](?:\s*0*(?:\d\d?(?:\.\d+)?(?:\s*%)?|\.\d+\s*%|100(?:\.0*)?\s*%|(?:1\d\d|2[0-4]\d|25[0-5])(?:\.\d+)?)\s*,){3}\s*0*(?:\.\d+|1(?:\.0*)?)\s*[)]$/.test(rgba)
+const parseRGB = (rgb: string) => rgb.match(/\((.*?)\)/)?.[1].split(',')
+const hexToRGB = (hex: string) => hex.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (m, r, g, b) => '#' + r + r + g + g + b + b)
+  .substring(1).match(/.{2}/g)
+  ?.map((x) => parseInt(x, 16))
+
+export const setOpacity = (color: string, opacity: number) => {
+  const [r, g, b] = (isHex(color) ? hexToRGB(color) : parseRGB(color)) ?? [0, 0, 0]
+
+  return 'rgba' + '(' + r + ',' + g + ',' + b + ',' + opacity + ')'
+}
+
+export const isValidColor = (color: string) => isHex(color) || isRGB(color) || isRGBA(color)
+
+export const colorShade = (color: string, percentage: number) => {
+  const lighten = percentage < 0
+  const base = lighten ? 1 + percentage : 1 - percentage
+  const shade = lighten ? 0 : percentage * 255 ** 2
+  const calcPrimary = (p: string | number) => Math.round((base * Math.floor(Number(p)) ** 2 + shade) ** 0.5)
+
+  const [r, g, b, a] = (isHex(color) ? hexToRGB(color) : parseRGB(color)) ?? [0, 0, 0]
+  const red = calcPrimary(r)
+  const green = calcPrimary(g)
+  const blue = calcPrimary(b)
+
+  return 'rgb' + (a ? 'a(' : '(') + red + ',' + green + ',' + blue + (a ? ',' + a : ')')
+}
+
+export const shades: Tone[] = ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900']
+export const indielayerColors = ['primary', 'secondary', 'success', 'warning', 'error']
+
+export const tailwindColors: ColorLibrary = Object.freeze({ 'slate': { '50': '#f8fafc', '100': '#f1f5f9', '200': '#e2e8f0', '300': '#cbd5e1', '400': '#94a3b8', '500': '#64748b', '600': '#475569', '700': '#334155', '800': '#1e293b', '900': '#0f172a', '950': '#020617' }, 'gray': { '50': '#f9fafb', '100': '#f3f4f6', '200': '#e5e7eb', '300': '#d1d5db', '400': '#9ca3af', '500': '#6b7280', '600': '#4b5563', '700': '#374151', '800': '#1f2937', '900': '#111827', '950': '#030712' }, 'zinc': { '50': '#fafafa', '100': '#f4f4f5', '200': '#e4e4e7', '300': '#d4d4d8', '400': '#a1a1aa', '500': '#71717a', '600': '#52525b', '700': '#3f3f46', '800': '#27272a', '900': '#18181b', '950': '#09090b' }, 'neutral': { '50': '#fafafa', '100': '#f5f5f5', '200': '#e5e5e5', '300': '#d4d4d4', '400': '#a3a3a3', '500': '#737373', '600': '#525252', '700': '#404040', '800': '#262626', '900': '#171717', '950': '#0a0a0a' }, 'stone': { '50': '#fafaf9', '100': '#f5f5f4', '200': '#e7e5e4', '300': '#d6d3d1', '400': '#a8a29e', '500': '#78716c', '600': '#57534e', '700': '#44403c', '800': '#292524', '900': '#1c1917', '950': '#0c0a09' }, 'red': { '50': '#fef2f2', '100': '#fee2e2', '200': '#fecaca', '300': '#fca5a5', '400': '#f87171', '500': '#ef4444', '600': '#dc2626', '700': '#b91c1c', '800': '#991b1b', '900': '#7f1d1d', '950': '#450a0a' }, 'orange': { '50': '#fff7ed', '100': '#ffedd5', '200': '#fed7aa', '300': '#fdba74', '400': '#fb923c', '500': '#f97316', '600': '#ea580c', '700': '#c2410c', '800': '#9a3412', '900': '#7c2d12', '950': '#431407' }, 'amber': { '50': '#fffbeb', '100': '#fef3c7', '200': '#fde68a', '300': '#fcd34d', '400': '#fbbf24', '500': '#f59e0b', '600': '#d97706', '700': '#b45309', '800': '#92400e', '900': '#78350f', '950': '#451a03' }, 'yellow': { '50': '#fefce8', '100': '#fef9c3', '200': '#fef08a', '300': '#fde047', '400': '#facc15', '500': '#eab308', '600': '#ca8a04', '700': '#a16207', '800': '#854d0e', '900': '#713f12', '950': '#422006' }, 'lime': { '50': '#f7fee7', '100': '#ecfccb', '200': '#d9f99d', '300': '#bef264', '400': '#a3e635', '500': '#84cc16', '600': '#65a30d', '700': '#4d7c0f', '800': '#3f6212', '900': '#365314', '950': '#1a2e05' }, 'green': { '50': '#f0fdf4', '100': '#dcfce7', '200': '#bbf7d0', '300': '#86efac', '400': '#4ade80', '500': '#22c55e', '600': '#16a34a', '700': '#15803d', '800': '#166534', '900': '#14532d', '950': '#052e16' }, 'emerald': { '50': '#ecfdf5', '100': '#d1fae5', '200': '#a7f3d0', '300': '#6ee7b7', '400': '#34d399', '500': '#10b981', '600': '#059669', '700': '#047857', '800': '#065f46', '900': '#064e3b', '950': '#022c22' }, 'teal': { '50': '#f0fdfa', '100': '#ccfbf1', '200': '#99f6e4', '300': '#5eead4', '400': '#2dd4bf', '500': '#14b8a6', '600': '#0d9488', '700': '#0f766e', '800': '#115e59', '900': '#134e4a', '950': '#042f2e' }, 'cyan': { '50': '#ecfeff', '100': '#cffafe', '200': '#a5f3fc', '300': '#67e8f9', '400': '#22d3ee', '500': '#06b6d4', '600': '#0891b2', '700': '#0e7490', '800': '#155e75', '900': '#164e63', '950': '#083344' }, 'sky': { '50': '#f0f9ff', '100': '#e0f2fe', '200': '#bae6fd', '300': '#7dd3fc', '400': '#38bdf8', '500': '#0ea5e9', '600': '#0284c7', '700': '#0369a1', '800': '#075985', '900': '#0c4a6e', '950': '#082f49' }, 'blue': { '50': '#eff6ff', '100': '#dbeafe', '200': '#bfdbfe', '300': '#93c5fd', '400': '#60a5fa', '500': '#3b82f6', '600': '#2563eb', '700': '#1d4ed8', '800': '#1e40af', '900': '#1e3a8a', '950': '#172554' }, 'indigo': { '50': '#eef2ff', '100': '#e0e7ff', '200': '#c7d2fe', '300': '#a5b4fc', '400': '#818cf8', '500': '#6366f1', '600': '#4f46e5', '700': '#4338ca', '800': '#3730a3', '900': '#312e81', '950': '#1e1b4b' }, 'violet': { '50': '#f5f3ff', '100': '#ede9fe', '200': '#ddd6fe', '300': '#c4b5fd', '400': '#a78bfa', '500': '#8b5cf6', '600': '#7c3aed', '700': '#6d28d9', '800': '#5b21b6', '900': '#4c1d95', '950': '#2e1065' }, 'purple': { '50': '#faf5ff', '100': '#f3e8ff', '200': '#e9d5ff', '300': '#d8b4fe', '400': '#c084fc', '500': '#a855f7', '600': '#9333ea', '700': '#7e22ce', '800': '#6b21a8', '900': '#581c87', '950': '#3b0764' }, 'fuchsia': { '50': '#fdf4ff', '100': '#fae8ff', '200': '#f5d0fe', '300': '#f0abfc', '400': '#e879f9', '500': '#d946ef', '600': '#c026d3', '700': '#a21caf', '800': '#86198f', '900': '#701a75', '950': '#4a044e' }, 'pink': { '50': '#fdf2f8', '100': '#fce7f3', '200': '#fbcfe8', '300': '#f9a8d4', '400': '#f472b6', '500': '#ec4899', '600': '#db2777', '700': '#be185d', '800': '#9d174d', '900': '#831843', '950': '#500724' }, 'rose': { '50': '#fff1f2', '100': '#ffe4e6', '200': '#fecdd3', '300': '#fda4af', '400': '#fb7185', '500': '#f43f5e', '600': '#e11d48', '700': '#be123c', '800': '#9f1239', '900': '#881337', '950': '#4c0519' }, 'lightBlue': { '50': '#f0f9ff', '100': '#e0f2fe', '200': '#bae6fd', '300': '#7dd3fc', '400': '#38bdf8', '500': '#0ea5e9', '600': '#0284c7', '700': '#0369a1', '800': '#075985', '900': '#0c4a6e', '950': '#082f49' }, 'warmGray': { '50': '#fafaf9', '100': '#f5f5f4', '200': '#e7e5e4', '300': '#d6d3d1', '400': '#a8a29e', '500': '#78716c', '600': '#57534e', '700': '#44403c', '800': '#292524', '900': '#1c1917', '950': '#0c0a09' }, 'trueGray': { '50': '#fafafa', '100': '#f5f5f5', '200': '#e5e5e5', '300': '#d4d4d4', '400': '#a3a3a3', '500': '#737373', '600': '#525252', '700': '#404040', '800': '#262626', '900': '#171717', '950': '#0a0a0a' }, 'coolGray': { '50': '#f9fafb', '100': '#f3f4f6', '200': '#e5e7eb', '300': '#d1d5db', '400': '#9ca3af', '500': '#6b7280', '600': '#4b5563', '700': '#374151', '800': '#1f2937', '900': '#111827', '950': '#030712' }, 'blueGray': { '50': '#f8fafc', '100': '#f1f5f9', '200': '#e2e8f0', '300': '#cbd5e1', '400': '#94a3b8', '500': '#64748b', '600': '#475569', '700': '#334155', '800': '#1e293b', '900': '#0f172a', '950': '#020617' } })

package/src/common/icons.ts

@@ -0,0 +1,17 @@
+export const infoIcon = '<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />'
+export const successIcon = '<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />'
+export const errorIcon = '<path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />'
+export const warningIcon = '<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" />'
+export const closeIcon = '<path d="M6 18L18 6M6 6l12 12" />'
+export 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" />'
+export const arrowRightIcon = '<path d="M13 7l5 5m0 0l-5 5m5-5H6" />'
+export const eyeIcon = '<path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />'
+export const eyeVisibleIcon = '<path d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />'
+export const dotsIcon = '<path d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />'
+export const prevIcon = '<path d="M15 19l-7-7 7-7" />'
+export const nextIcon = '<path d="M9 5l7 7-7 7" />'
+export const checkIcon = '<path d="M5 13l4 4L19 7" />'
+export const chevronDownIcon = '<path d="M8 9l4-4 4 4m0 6l-4 4-4-4" />'
+export const externalIcon = '<line x1="7" y1="17" x2="17" y2="7" /><polyline points="7 7 17 7 17 17" />'
+export const stepperPristineIcon = '<path d="M7.5 4.21v.01M4.21 7.5v.01M3 12v.01m1.21 4.49v.01m3.29 3.28v.01M12 21v.01m4.5-1.22v.01m3.29-3.3v.01M21 12v.01M19.79 7.5v.01m-3.29-3.3v.01M12 3v.01"/>'
+export const stepperIncompleteIcon = '<svg focusable="false" preserveAspectRatio="xMidYMid meet" fill="currentColor" viewBox="0 0 32 32" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><path d="M23.7642 6.8593l1.2851-1.5315A13.976 13.976 0 0020.8672 2.887l-.6836 1.8776A11.9729 11.9729 0 0123.7642 6.8593zM27.81 14l1.9677-.4128A13.8888 13.8888 0 0028.14 9.0457L26.4087 10A12.52 12.52 0 0127.81 14zM20.1836 27.2354l.6836 1.8776a13.976 13.976 0 004.1821-2.4408l-1.2851-1.5315A11.9729 11.9729 0 0120.1836 27.2354zM26.4087 22L28.14 23a14.14 14.14 0 001.6382-4.5872L27.81 18.0659A12.1519 12.1519 0 0126.4087 22zM16 30V2a14 14 0 000 28z"></path></svg>'

package/src/common/utils.ts

@@ -0,0 +1,93 @@
+import { unref, isRef } from 'vue'
+
+export const isObject = (val: unknown): val is object => val !== null && typeof val === 'object'
+export const isArray = (val: unknown): val is [] => Array.isArray(val)
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const isFunction = (val: unknown): val is Function => typeof val === 'function'
+
+/**
+ * Deeply unref a value, recursing into objects and arrays.
+ *
+ * @param {Mixed} val - The value to deeply unref.
+ * @return {Mixed}
+ */
+export const deepUnref = (val: any) => {
+  const checkedVal = isRef(val) ? unref(val) : val
+
+  if (!isObject(checkedVal)) {
+    return checkedVal
+  }
+
+  if (isArray(checkedVal)) {
+    return unrefArray(checkedVal)
+  }
+
+  return unrefObject(checkedVal)
+}
+
+/**
+ * Unref a value, recursing into it if it's an object.
+ *
+ * @param {Mixed} val - The value to unref.
+ * @return {Mixed}
+ */
+export const smartUnref = (val: any) => {
+  // Non-ref object?  Go deeper!
+  if (val !== null && !isRef(val) && typeof val === 'object') {
+    return deepUnref(val)
+  }
+
+  return unref(val)
+}
+
+/**
+ * Unref an array, recursively.
+ *
+ * @param {Array} arr - The array to unref.
+ * @return {Array}
+ */
+export const unrefArray: any = (arr: []) => arr.map(smartUnref)
+
+/**
+ * Unref an object, recursively.
+ *
+ * @param {Object} obj - The object to unref.
+ * @return {Object}
+ */
+export const unrefObject = (obj: any) => {
+  const unreffed: any = {}
+
+  // Object? un-ref it!
+  Object.keys(obj).forEach((key) => {
+    unreffed[key] = smartUnref(obj[key])
+  })
+
+  return unreffed
+}
+
+/**
+ * Merge two objects, deeply.
+ * @param {Object} source - The source object.
+ * @param {Object} target - The target object.
+ * @return {Object}
+ */
+export const mergeRightDeep = (source: any = {}, target: any = {}) => {
+  const sourceKeys = Object.keys(source)
+  const targetKeys = Object.keys(target)
+
+  const merged = { ...source }
+
+  targetKeys.forEach((key) => {
+    if (sourceKeys.includes(key)) {
+      if (isObject(source[key]) && isObject(target[key])) {
+        merged[key] = mergeRightDeep(source[key], target[key])
+      } else {
+        merged[key] = target[key]
+      }
+    } else {
+      merged[key] = target[key]
+    }
+  })
+
+  return merged
+}

package/src/components/accordion/Accordion.vue

@@ -0,0 +1,51 @@
+<script lang="ts">
+const accordionProps = {
+  tag: {
+    type: String,
+    default: 'div',
+  },
+  disabled: Boolean,
+  expanded: Boolean,
+  showIcon: {
+    type: Boolean,
+    default: true,
+  },
+  icon: String,
+  iconAlign: String as PropType<AccordionItemAlign>,
+}
+
+export type AccordionProps = ExtractPublicPropTypes<typeof accordionProps>
+
+type InternalClasses = 'wrapper'
+export interface AccordionTheme extends ThemeComponent<AccordionProps, InternalClasses> {}
+
+export default {
+  name: 'XAccordion',
+  validators: {},
+}
+</script>
+
+<script setup lang="ts">
+import { type ExtractPublicPropTypes, type PropType, provide } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import type { AccordionItemAlign } from './AccordionItem.vue'
+import { injectAccordionKey } from '../../composables/keys'
+
+const props = defineProps(accordionProps)
+
+provide(injectAccordionKey, props)
+
+const { styles, classes, className } = useTheme('Accordion', {}, props)
+</script>
+
+<template>
+  <div
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper,
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>

package/src/components/accordion/AccordionItem.vue

@@ -0,0 +1,183 @@
+<script lang="ts">
+const accordionItemAlign = ['left', 'right'] as const
+const accordionItemProps = {
+  tag: {
+    type: String,
+    default: 'div',
+  },
+  disabled: Boolean,
+  expanded: Boolean,
+  showIcon: {
+    type: Boolean,
+    default: true,
+  },
+  icon: String,
+  iconAlign: {
+    type: String as PropType<AccordionItemAlign>,
+    default: 'right',
+  },
+}
+
+export type AccordionItemAlign = typeof accordionItemAlign[number]
+export type AccordionItemProps = ExtractPublicPropTypes<typeof accordionItemProps>
+
+type InternalClasses = 'wrapper' | 'icon' | 'content'
+type InternalData = {
+  collapsed: boolean;
+}
+export interface AccordionItemTheme extends ThemeComponent<AccordionItemProps, InternalClasses, InternalData> {}
+
+export default {
+  name: 'XAccordionItem',
+  validators: {
+    iconAlign: accordionItemAlign,
+  },
+}
+</script>
+
+<script setup lang="ts">
+import { ref, watch, type ExtractPublicPropTypes, type PropType, inject, computed, reactive } from 'vue'
+import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+
+import XIcon from '../../components/icon/Icon.vue'
+import { injectAccordionKey } from '../../composables/keys'
+
+const props = defineProps(accordionItemProps)
+
+const emit = defineEmits(['expand'])
+
+const accordionProps = inject(injectAccordionKey, {})
+
+const computedIconAlign = computed(() => accordionProps.iconAlign || props.iconAlign)
+const computedProps = reactive({
+  iconAlign: computedIconAlign,
+})
+
+const collapsed = ref(!props.expanded)
+const animated = ref(true)
+
+watch(() => props.expanded, () => {
+  collapsed.value = !props.expanded
+})
+
+function onBeforeEnter(el: Element) {
+  if (animated.value) (el as HTMLElement).style.height = '0px'
+}
+
+function onEnter(el: Element, done: () => void) {
+  if (!animated.value) done()
+  else {
+    el.addEventListener('transitionend', done)
+    setTimeout(() => {
+      (el as HTMLElement).style.height = `${el.scrollHeight}px`
+    }, 1)
+  }
+}
+
+function onAfterEnter(el: Element) {
+  if (!animated.value) {
+    animated.value = true
+  } else {
+    (el as HTMLElement).style.removeProperty('height')
+  }
+}
+
+function onBeforeLeave(el: Element) {
+  if (!animated.value) return
+  (el as HTMLElement).style.height = `${el.scrollHeight}px`
+}
+
+function onLeave(el: Element, done: () => void) {
+  if (!animated.value) done()
+  else {
+    el.addEventListener('transitionend', done)
+    setTimeout(() => {
+      (el as HTMLElement).style.height = '0px'
+    }, 1)
+  }
+}
+
+function onAfterLeave(el: Element) {
+  if (!animated.value) {
+    animated.value = true
+  } else {
+    (el as HTMLElement).style.removeProperty('height')
+  }
+}
+
+function open(anim = true) {
+  animated.value = anim
+  collapsed.value = false
+}
+
+function close(anim = true) {
+  animated.value = anim
+  collapsed.value = true
+}
+
+function toggle() {
+  if (!props.disabled) collapsed.value = !collapsed.value
+}
+
+function onExpand(anim = true) {
+  open(anim)
+  emit('expand')
+}
+
+const { styles, classes, className } = useTheme('AccordionItem', {}, {
+  ...props,
+  ...computedProps,
+}, { collapsed })
+
+defineExpose({ toggle, open, close })
+</script>
+
+<template>
+  <component
+    :is="tag"
+    :style="styles"
+    :class="className"
+    :aria-disabled="disabled"
+    :aria-expanded="collapsed ? 'false' : 'true'"
+  >
+    <button
+      :class="classes.wrapper"
+      @click="toggle"
+    >
+      <div class="flex-1 overflow-hidden">
+        <slot :collapsed="collapsed"></slot>
+      </div>
+
+      <div v-if="showIcon" :class="classes.icon">
+        <x-icon v-if="icon" :icon="icon" />
+        <svg
+          v-else
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+          fill="none"
+          role="presentation"
+          class="stroke-2 w-4 h-4"
+        >
+          <path d="M19 9l-7 7-7-7" />
+        </svg>
+      </div>
+    </button>
+
+    <template v-if="$slots.summary">
+      <slot name="summary"></slot>
+    </template>
+
+    <transition
+      @before-enter="onBeforeEnter"
+      @enter="onEnter"
+      @after-enter="onAfterEnter"
+      @before-leave="onBeforeLeave"
+      @leave="onLeave"
+      @after-leave="onAfterLeave"
+    >
+      <div v-show="!collapsed" :class="classes.content">
+        <slot name="content" :expand="onExpand" :collapsed="collapsed"></slot>
+      </div>
+    </transition>
+  </component>
+</template>

package/src/components/accordion/__tests__/Accordion.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Accordion from '../Accordion.vue'
+
+describe('Accordion', () => {
+  it('renders properly', () => {
+    const wrapper = mount(Accordion)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as XAccordion } from './Accordion.vue'
+export type { AccordionProps, AccordionTheme } from './Accordion.vue'
+export { default as XAccordionItem } from './AccordionItem.vue'
+export type { AccordionItemProps, AccordionItemTheme } from './AccordionItem.vue'

package/src/components/accordion/theme/Accordion.base.theme.ts

@@ -0,0 +1,9 @@
+import type { AccordionTheme } from '../Accordion.vue'
+
+const theme: AccordionTheme = {
+  classes: {
+    wrapper: 'grid grid-cols-1 divide-y',
+  },
+}
+
+export default theme

package/src/components/accordion/theme/Accordion.carbon.theme.ts

@@ -0,0 +1,9 @@
+import type { AccordionTheme } from '../Accordion.vue'
+
+const theme: AccordionTheme = {
+  classes: {
+    wrapper: 'grid grid-cols-1 divide-y border-b border-t',
+  },
+}
+
+export default theme