@indielayer/ui 0.0.0-dev-20240125104319

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 - Indielayer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,43 @@
+![IndielayerUI-Logo-Dark](.github/logo_dark.svg#gh-dark-mode-only)
+![IndielayerUI-Logo-Light](.github/logo.svg#gh-light-mode-only)
+
+
+<p>
+  <a href="https://github.com/indielayer/ui/actions/workflows/release_production.yml"><img src="https://github.com/indielayer/ui/actions/workflows/release_production.yml/badge.svg?branch=main&event=push" alt="ci"></a>
+  <a href="https://www.npmjs.com/package/@indielayer/ui"><img src="https://badgen.net/npm/dm/@indielayer/ui" alt="Downloads"></a>
+  <a href="https://www.npmjs.com/package/@indielayer/ui"><img src="https://badgen.net/npm/v/@indielayer/ui/latest" alt="Version"></a>
+  <a href="https://www.npmjs.com/package/@indielayer/ui"><img src="https://badgen.net/npm/license/@indielayer/ui" alt="License"></a>
+</p>
+
+Vue 3 & Nuxt 3 UI Components built with Tailwind 3. **Build and prototype fast web applications.** 🚀
+
+## 📖 Documentation
+Read the <a href="https://indielayer.com/ui/docs">Online Documentation</a>.
+
+## Quickstart
+```bash
+npm init @indielayer/ui
+```
+
+---
+
+### Development
+
+- Clone repository
+- Ensure you have the latest LTS version of Node.js installed
+- Install dependencies with `pnpm install`
+- Run `pnpm dev` to enter dev mode watch
+- Develop docs with `pnpm run docs`
+
+### Documentation
+
+The documentation is located inside [/packages/ui/docs](./packages/ui/docs)
+
+- Run `pnpm dev` for development
+- Run `pnpm build:docs` from project root to build the documentation
+
+## License
+
+[MIT](./LICENSE)
+
+Copyright (c) 2024, Indielayer

package/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/exports/nuxt.mjs

@@ -0,0 +1,33 @@
+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)),
+        extensions: ['vue', 'tsx'],
+        prefix: options?.prefix ? options?.prefix : 'X',
+      })
+    })
+  },
+})

package/exports/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.public?.indielayerOptions)
+
+  nuxtApp.vueApp.use(UI)
+})

package/exports/tailwind.preset.js

@@ -0,0 +1,41 @@
+function getColorVar(color, level) {
+  if (level) return `rgb(var(--${color}-color-${level}))`
+
+  return `rgb(var(--${color}-color))`
+}
+
+function getColorVarPallete(color) {
+  return {
+    50: getColorVar(color, 50),
+    100: getColorVar(color, 100),
+    200: getColorVar(color, 200),
+    300: getColorVar(color, 300),
+    400: getColorVar(color, 400),
+    500: getColorVar(color, 500),
+    600: getColorVar(color, 600),
+    700: getColorVar(color, 700),
+    800: getColorVar(color, 800),
+    900: getColorVar(color, 900),
+    950: getColorVar(color, 950),
+  }
+}
+
+module.exports = () => ({
+  theme: {
+    extend: {
+      colors: {
+        primary: getColorVarPallete('primary'),
+        secondary: getColorVarPallete('secondary'),
+        success: getColorVarPallete('success'),
+        warning: getColorVarPallete('warning'),
+        danger: getColorVarPallete('error'),
+        error: getColorVarPallete('error'),
+      },
+      borderColor: getColorVar('border'),
+      fontFamily: {
+        sans: 'var(--font-family-sans)',
+        mono: 'var(--font-family-mono)',
+      },
+    },
+  },
+})

package/lib/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,9 @@
+const s = (t, e) => {
+  const o = t.__vccOpts || t;
+  for (const [r, c] of e)
+    o[r] = c;
+  return o;
+};
+export {
+  s as default
+};

package/lib/common/colors.d.ts

@@ -0,0 +1,7 @@
+import type { Tone, ColorLibrary } from '../composables/useColors';
+export declare const setOpacity: (color: string, opacity: number) => string;
+export declare const isValidColor: (color: string) => boolean;
+export declare const colorShade: (color: string, percentage: number) => string;
+export declare const shades: Tone[];
+export declare const indielayerColors: string[];
+export declare const tailwindColors: ColorLibrary;

package/lib/common/colors.js

@@ -0,0 +1,19 @@
+const t = (f) => /^#(?:[A-Fa-f0-9]{3}){1,2}$/.test(f), y = (f) => /^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(f), G = (f) => /^^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(f), n = (f) => {
+  var e;
+  return (e = f.match(/\((.*?)\)/)) == null ? void 0 : e[1].split(",");
+}, r = (f) => {
+  var e;
+  return (e = f.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i, (a, d, c, b) => "#" + d + d + c + c + b + b).substring(1).match(/.{2}/g)) == null ? void 0 : e.map((a) => parseInt(a, 16));
+}, p = (f, e) => {
+  const [a, d, c] = (t(f) ? r(f) : n(f)) ?? [0, 0, 0];
+  return "rgba(" + a + "," + d + "," + c + "," + e + ")";
+}, B = (f) => t(f) || y(f) || G(f), R = (f, e) => {
+  const a = e < 0, d = a ? 1 + e : 1 - e, c = a ? 0 : e * 255 ** 2, b = (m) => Math.round((d * Math.floor(Number(m)) ** 2 + c) ** 0.5), [o, i, l, s] = (t(f) ? r(f) : n(f)) ?? [0, 0, 0], u = b(o), g = b(i), h = b(l);
+  return "rgb" + (s ? "a(" : "(") + u + "," + g + "," + h + (s ? "," + s : ")");
+}, $ = 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" } });
+export {
+  R as colorShade,
+  B as isValidColor,
+  p as setOpacity,
+  $ as tailwindColors
+};

package/lib/common/icons.d.ts

@@ -0,0 +1,17 @@
+export declare const infoIcon = "<path d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />";
+export declare const successIcon = "<path d=\"M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z\" />";
+export declare const errorIcon = "<path d=\"M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" />";
+export declare 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 declare const closeIcon = "<path d=\"M6 18L18 6M6 6l12 12\" />";
+export declare 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 declare const arrowRightIcon = "<path d=\"M13 7l5 5m0 0l-5 5m5-5H6\" />";
+export declare 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 declare 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 declare 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 declare const prevIcon = "<path d=\"M15 19l-7-7 7-7\" />";
+export declare const nextIcon = "<path d=\"M9 5l7 7-7 7\" />";
+export declare const checkIcon = "<path d=\"M5 13l4 4L19 7\" />";
+export declare const chevronDownIcon = "<path d=\"M8 9l4-4 4 4m0 6l-4 4-4-4\" />";
+export declare const externalIcon = "<line x1=\"7\" y1=\"17\" x2=\"17\" y2=\"7\" /><polyline points=\"7 7 17 7 17 17\" />";
+export declare 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 declare 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/lib/common/icons.js

@@ -0,0 +1,19 @@
+const t = '<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />', c = '<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />', o = '<path d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />', n = '<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" />', a = '<path d="M6 18L18 6M6 6l12 12" />', M = '<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" />', e = '<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" />', s = '<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" />', h = '<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" />', l = '<path d="M15 19l-7-7 7-7" />', p = '<path d="M9 5l7 7-7 7" />', v = '<path d="M5 13l4 4L19 7" />', d = '<path d="M8 9l4-4 4 4m0 6l-4 4-4-4" />', m = '<line x1="7" y1="17" x2="17" y2="7" /><polyline points="7 7 17 7 17 17" />', r = '<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"/>', I = '<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>';
+export {
+  M as avatarIcon,
+  v as checkIcon,
+  d as chevronDownIcon,
+  a as closeIcon,
+  h as dotsIcon,
+  o as errorIcon,
+  m as externalIcon,
+  e as eyeIcon,
+  s as eyeVisibleIcon,
+  t as infoIcon,
+  p as nextIcon,
+  l as prevIcon,
+  I as stepperIncompleteIcon,
+  r as stepperPristineIcon,
+  c as successIcon,
+  n as warningIcon
+};

package/lib/common/utils.d.ts

@@ -0,0 +1,38 @@
+export declare const isObject: (val: unknown) => val is object;
+export declare const isArray: (val: unknown) => val is [];
+export declare const isFunction: (val: unknown) => val is Function;
+/**
+ * Deeply unref a value, recursing into objects and arrays.
+ *
+ * @param {Mixed} val - The value to deeply unref.
+ * @return {Mixed}
+ */
+export declare const deepUnref: (val: any) => any;
+/**
+ * Unref a value, recursing into it if it's an object.
+ *
+ * @param {Mixed} val - The value to unref.
+ * @return {Mixed}
+ */
+export declare const smartUnref: (val: any) => any;
+/**
+ * Unref an array, recursively.
+ *
+ * @param {Array} arr - The array to unref.
+ * @return {Array}
+ */
+export declare const unrefArray: any;
+/**
+ * Unref an object, recursively.
+ *
+ * @param {Object} obj - The object to unref.
+ * @return {Object}
+ */
+export declare const unrefObject: (obj: any) => any;
+/**
+ * Merge two objects, deeply.
+ * @param {Object} source - The source object.
+ * @param {Object} target - The target object.
+ * @return {Object}
+ */
+export declare const mergeRightDeep: (source?: any, target?: any) => any;

package/lib/common/utils.js

@@ -0,0 +1,25 @@
+import { isRef as o, unref as f } from "vue";
+const s = (n) => n !== null && typeof n == "object", p = (n) => Array.isArray(n), h = (n) => typeof n == "function", b = (n) => {
+  const e = o(n) ? f(n) : n;
+  return s(e) ? p(e) ? j(e) : m(e) : e;
+}, i = (n) => n !== null && !o(n) && typeof n == "object" ? b(n) : f(n), j = (n) => n.map(i), m = (n) => {
+  const e = {};
+  return Object.keys(n).forEach((t) => {
+    e[t] = i(n[t]);
+  }), e;
+}, d = (n = {}, e = {}) => {
+  const t = Object.keys(n), u = Object.keys(e), c = { ...n };
+  return u.forEach((r) => {
+    t.includes(r) && s(n[r]) && s(e[r]) ? c[r] = d(n[r], e[r]) : c[r] = e[r];
+  }), c;
+};
+export {
+  b as deepUnref,
+  p as isArray,
+  h as isFunction,
+  s as isObject,
+  d as mergeRightDeep,
+  i as smartUnref,
+  j as unrefArray,
+  m as unrefObject
+};

package/lib/components/accordion/Accordion.vue.d.ts

@@ -0,0 +1,60 @@
+import { type ExtractPublicPropTypes, type PropType } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+declare const accordionProps: {
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    expanded: BooleanConstructor;
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: StringConstructor;
+    iconAlign: PropType<"left" | "right">;
+};
+export type AccordionProps = ExtractPublicPropTypes<typeof accordionProps>;
+type InternalClasses = 'wrapper';
+export interface AccordionTheme extends ThemeComponent<AccordionProps, InternalClasses> {
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    expanded: BooleanConstructor;
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: StringConstructor;
+    iconAlign: PropType<"left" | "right">;
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    expanded: BooleanConstructor;
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: StringConstructor;
+    iconAlign: PropType<"left" | "right">;
+}>>, {
+    disabled: boolean;
+    tag: string;
+    expanded: boolean;
+    showIcon: boolean;
+}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/accordion/Accordion.vue.js

@@ -0,0 +1,40 @@
+import { defineComponent as c, provide as l, openBlock as i, createElementBlock as d, normalizeStyle as p, unref as e, normalizeClass as m, renderSlot as f } from "vue";
+import { useTheme as u } from "../../composables/useTheme.js";
+import { injectAccordionKey as _ } from "../../composables/keys.js";
+const y = {
+  tag: {
+    type: String,
+    default: "div"
+  },
+  disabled: Boolean,
+  expanded: Boolean,
+  showIcon: {
+    type: Boolean,
+    default: !0
+  },
+  icon: String,
+  iconAlign: String
+}, g = {
+  name: "XAccordion",
+  validators: {}
+}, h = /* @__PURE__ */ c({
+  ...g,
+  props: y,
+  setup(n) {
+    const o = n;
+    l(_, o);
+    const { styles: t, classes: r, className: s } = u("Accordion", {}, o);
+    return (a, B) => (i(), d("div", {
+      style: p(e(t)),
+      class: m([
+        e(s),
+        e(r).wrapper
+      ])
+    }, [
+      f(a.$slots, "default")
+    ], 6));
+  }
+});
+export {
+  h as default
+};

package/lib/components/accordion/Accordion.vue2.js

@@ -0,0 +1,4 @@
+import f from "./Accordion.vue.js";
+export {
+  f as default
+};

package/lib/components/accordion/AccordionItem.vue.d.ts

@@ -0,0 +1,88 @@
+import { type ExtractPublicPropTypes, type PropType } from 'vue';
+import { type ThemeComponent } from '../../composables/useTheme';
+declare const accordionItemAlign: readonly ["left", "right"];
+declare const accordionItemProps: {
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    expanded: BooleanConstructor;
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: StringConstructor;
+    iconAlign: {
+        type: PropType<"left" | "right">;
+        default: string;
+    };
+};
+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> {
+}
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    expanded: BooleanConstructor;
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: StringConstructor;
+    iconAlign: {
+        type: PropType<"left" | "right">;
+        default: string;
+    };
+}, {
+    toggle: () => void;
+    open: (anim?: boolean) => void;
+    close: (anim?: boolean) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "expand"[], "expand", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: BooleanConstructor;
+    expanded: BooleanConstructor;
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: StringConstructor;
+    iconAlign: {
+        type: PropType<"left" | "right">;
+        default: string;
+    };
+}>> & {
+    onExpand?: ((...args: any[]) => any) | undefined;
+}, {
+    disabled: boolean;
+    tag: string;
+    expanded: boolean;
+    showIcon: boolean;
+    iconAlign: "left" | "right";
+}, {}>, {
+    default?(_: {
+        collapsed: boolean;
+    }): any;
+    summary?(_: {}): any;
+    content?(_: {
+        expand: ((...args: any[]) => any) & ((anim?: boolean) => void);
+        collapsed: boolean;
+    }): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/accordion/AccordionItem.vue.js

@@ -0,0 +1,138 @@
+import { defineComponent as V, inject as j, computed as z, reactive as D, ref as f, watch as H, openBlock as s, createBlock as m, resolveDynamicComponent as K, normalizeStyle as M, unref as a, normalizeClass as l, withCtx as v, createElementVNode as r, renderSlot as d, createElementBlock as h, createCommentVNode as g, createVNode as X, Transition as q, withDirectives as F, vShow as G } from "vue";
+import { useTheme as J } from "../../composables/useTheme.js";
+import O from "../icon/Icon.vue.js";
+import { injectAccordionKey as Q } from "../../composables/keys.js";
+const R = { class: "flex-1 overflow-hidden" }, U = {
+  key: 1,
+  viewBox: "0 0 24 24",
+  stroke: "currentColor",
+  fill: "none",
+  role: "presentation",
+  class: "stroke-2 w-4 h-4"
+}, W = /* @__PURE__ */ r("path", { d: "M19 9l-7 7-7-7" }, null, -1), Y = [
+  W
+], Z = ["left", "right"], ee = {
+  tag: {
+    type: String,
+    default: "div"
+  },
+  disabled: Boolean,
+  expanded: Boolean,
+  showIcon: {
+    type: Boolean,
+    default: !0
+  },
+  icon: String,
+  iconAlign: {
+    type: String,
+    default: "right"
+  }
+}, te = {
+  name: "XAccordionItem",
+  validators: {
+    iconAlign: Z
+  }
+}, se = /* @__PURE__ */ V({
+  ...te,
+  props: ee,
+  emits: ["expand"],
+  setup(y, { expose: A, emit: x }) {
+    const n = y, _ = x, k = j(Q, {}), w = z(() => k.iconAlign || n.iconAlign), B = D({
+      iconAlign: w
+    }), t = f(!n.expanded), o = f(!0);
+    H(() => n.expanded, () => {
+      t.value = !n.expanded;
+    });
+    function E(e) {
+      o.value && (e.style.height = "0px");
+    }
+    function C(e, i) {
+      o.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
+        e.style.height = `${e.scrollHeight}px`;
+      }, 1)) : i();
+    }
+    function I(e) {
+      o.value ? e.style.removeProperty("height") : o.value = !0;
+    }
+    function $(e) {
+      o.value && (e.style.height = `${e.scrollHeight}px`);
+    }
+    function b(e, i) {
+      o.value ? (e.addEventListener("transitionend", i), setTimeout(() => {
+        e.style.height = "0px";
+      }, 1)) : i();
+    }
+    function S(e) {
+      o.value ? e.style.removeProperty("height") : o.value = !0;
+    }
+    function u(e = !0) {
+      o.value = e, t.value = !1;
+    }
+    function L(e = !0) {
+      o.value = e, t.value = !0;
+    }
+    function p() {
+      n.disabled || (t.value = !t.value);
+    }
+    function P(e = !0) {
+      u(e), _("expand");
+    }
+    const { styles: N, classes: c, className: T } = J("AccordionItem", {}, {
+      ...n,
+      ...B
+    }, { collapsed: t });
+    return A({ toggle: p, open: u, close: L }), (e, i) => (s(), m(K(e.tag), {
+      style: M(a(N)),
+      class: l(a(T)),
+      "aria-disabled": e.disabled,
+      "aria-expanded": t.value ? "false" : "true"
+    }, {
+      default: v(() => [
+        r("button", {
+          class: l(a(c).wrapper),
+          onClick: p
+        }, [
+          r("div", R, [
+            d(e.$slots, "default", { collapsed: t.value })
+          ]),
+          e.showIcon ? (s(), h("div", {
+            key: 0,
+            class: l(a(c).icon)
+          }, [
+            e.icon ? (s(), m(O, {
+              key: 0,
+              icon: e.icon
+            }, null, 8, ["icon"])) : (s(), h("svg", U, Y))
+          ], 2)) : g("", !0)
+        ], 2),
+        e.$slots.summary ? d(e.$slots, "summary", { key: 0 }) : g("", !0),
+        X(q, {
+          onBeforeEnter: E,
+          onEnter: C,
+          onAfterEnter: I,
+          onBeforeLeave: $,
+          onLeave: b,
+          onAfterLeave: S
+        }, {
+          default: v(() => [
+            F(r("div", {
+              class: l(a(c).content)
+            }, [
+              d(e.$slots, "content", {
+                expand: P,
+                collapsed: t.value
+              })
+            ], 2), [
+              [G, !t.value]
+            ])
+          ]),
+          _: 3
+        })
+      ]),
+      _: 3
+    }, 8, ["style", "class", "aria-disabled", "aria-expanded"]));
+  }
+});
+export {
+  se as default
+};

package/lib/components/accordion/AccordionItem.vue2.js

@@ -0,0 +1,4 @@
+import f from "./AccordionItem.vue.js";
+export {
+  f as default
+};

package/lib/components/accordion/__tests__/Accordion.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/components/accordion/index.d.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';