@indielayer/ui 1.3.0 → 1.5.0

package/docs/pages/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <h2 class="text-4xl font-semibold">Getting Started</h2>
+  <h1 class="text-lg my-2 text-gray-500 dark:text-gray-400">Tailwind CSS UI components for Vue.js 3 / Nuxt.js 3. Build and prototype fast web applications.</h1>
+  <x-divider class="mt-4 mb-8"/>
+
+  <h3 class="text-2xl mb-4">Quickstart a new Vue 3 or Nuxt 3 project</h3>
+  <p class="my-4">
+    This following command will install and execute <x-link
+      external
+      href="https://github.com/indielayer/ui/tree/main/packages/create-ui"
+      target="_blank"
+      shadow
+      color="primary"
+    >@indielayer/create-ui</x-link>, the official Indielayer UI project scaffolding tool. You will be presented with prompts for a number of optional features such as TypeScript.
+  </p>
+  <code-snippet :code="`npm init @indielayer/ui`" lang="bash"/>
+  <pre class="bg-slate-600 text-slate-50 text-xs mt-4 px-4 py-2 rounded-md">? Project type: › - Use arrow-keys. Return to submit.
+❯   Vue 3
+    Nuxt 3</pre>
+
+  <h3 class="text-2xl mt-16 mb-4 text-gray-500">Manual guide</h3>
+  <h3 class="text-2xl mb-4">1. Install via package manager</h3>
+  <multi-snippet
+    :snippets="[{
+      label: 'npm',
+      lang: 'bash',
+      code: 'npm install @indielayer/ui'
+    }, {
+      label: 'yarn',
+      lang: 'bash',
+      code: 'yarn add @indielayer/ui'
+    }, {
+      label: 'pnpm',
+      lang: 'bash',
+      code: 'pnpm add @indielayer/ui'
+    }]"
+  />
+
+  <h3 class="text-2xl mt-8 mb-4">2. Setup TailwindCSS</h3>
+  <p>If you do not have Tailwind CSS 3 installed in your project, please see the <x-link href="https://tailwindcss.com/docs/guides/vite" external shadow color="primary">Tailwind 3 Vite install guide here</x-link> before proceeding.</p>
+  <p class="my-4">
+    Add Indielayer Tailwind CSS preset <b>tailwind.preset.js</b> to your Tailwind CSS configuration file tailwind.config.js and <b>purge css configurations.</b>
+  </p>
+  <code-snippet
+    lang="js"
+    :code="`// tailwind.config.js
+const colors = require('tailwindcss/colors')
+const indielayer = require('@indielayer/ui/tailwind.preset')
+
+module.exports = {
+  darkMode: 'class',
+  // load indielayer ui presets
+  presets: [indielayer()],
+  // allow PurgeCSS to analyze components
+  content: [
+    './index.html',
+    './**/*.vue',
+    './src/**/*.{vue,js,ts,jsx,tsx}',
+    'node_modules/@indielayer/ui/{lib,src}/**/*',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: colors.emerald,
+        secondary: colors.slate,
+        success: colors.green,
+        warning: colors.yellow,
+        error: colors.red,
+      },
+    },
+  },
+  plugins: [],
+}`"
+  />
+  <h3 class="text-2xl mt-8 mb-4">3. Load the UI in your project</h3>
+  <h4 class="text-xl mt-8 mb-4">Load on a Vue 3 project</h4>
+  <code-snippet
+    lang="js"
+    :code="`import { createApp } from 'vue'
+import UI from '@indielayer/ui'
+
+const app = createApp(App)
+
+app.use(UI, {
+  prefix: 'X',
+})`"
+  />
+  <h4 class="text-xl mt-8 mb-4">Load on a Nuxt 3 project</h4>
+  <multi-snippet
+    class="my-4"
+    :snippets="[{
+      label: 'npm',
+      lang: 'bash',
+      code: 'npm install @indielayer/ui @vueuse/core floating-vue -D'
+    }, {
+      label: 'yarn',
+      lang: 'bash',
+      code: 'yarn add @indielayer/ui @vueuse/core floating-vue -D'
+    }, {
+      label: 'pnpm',
+      lang: 'bash',
+      code: 'pnpm add @indielayer/ui @vueuse/core floating-vue -D'
+    }]"
+  />
+  <code-snippet
+    lang="js"
+    :code="`import { colors } from '@indielayer/ui'
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: [
+    ['@indielayer/ui/nuxt', {
+      theme: {
+        colors: {
+          primary: colors.emerald,
+          secondary: colors.slate,
+          success: colors.green,
+          warning: colors.yellow,
+          error: colors.red,
+        },
+      },
+    }],
+  ],
+  css: ['~/assets/tailwind.css'],
+  /**
+   * @tailwind base;
+   * @tailwind components;
+   * @tailwind utilities;
+   */
+  postcss: {
+    plugins: {
+      'tailwindcss/nesting': {},
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  },
+})`"
+  />
+  <h3 class="text-2xl mt-8 mb-4">4. (optional) Load only the components you want</h3>
+  <code-snippet
+    lang="js"
+    :code="`import { createApp } from 'vue'
+import { createUI, XButton, XAlert } from '@indielayer/ui'
+
+const app = createApp(App)
+
+const UI = createUI({
+  components: [XButton, XAlert],
+})
+
+app.use(UI)`"
+  />
+</template>

package/docs/pages/play.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>playground</div>
+</template>

package/docs/pages/typography.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+const textClasses = {
+  'text-xs': {
+    size: '0.75rem',
+    line: '1rem',
+  },
+  'text-sm': {
+    size: '0.875rem',
+    line: '1.25rem',
+  },
+  'text-base': {
+    size: '1rem',
+    line: '1.5rem',
+  },
+  'text-lg': {
+    size: '1.125rem',
+    line: '1.75rem',
+  },
+  'text-xl': {
+    size: '1.25rem',
+    line: '1.75rem',
+  },
+  'text-2xl': {
+    size: '1.5rem',
+    line: '2rem',
+  },
+  'text-3xl': {
+    size: '1.875rem',
+    line: '2.25rem',
+  },
+  'text-4xl': {
+    size: '2.25rem',
+    line: '2.5rem',
+  },
+  'text-5xl': {
+    size: '3rem',
+    line: 'auto',
+  },
+  'text-6xl': {
+    size: '3.75rem',
+    line: 'auto',
+  },
+  'text-7xl': {
+    size: '4.5rem',
+    line: 'auto',
+  },
+  'text-8xl': {
+    size: '6rem',
+    line: 'auto',
+  },
+  'text-9xl': {
+    size: '8rem',
+    line: 'auto',
+  },
+}
+
+</script>
+
+<template>
+  <h1 class="text-4xl font-semibold">Typography</h1>
+  <h2 class="text-lg my-2 text-gray-500 dark:text-gray-400">Big letters, small letters, fonts and stuff</h2>
+
+  <x-divider class="mt-4 mb-8"/>
+
+  <div>
+    <div>Main font</div>
+    <div class="text-gray-500 dark:text-gray-400">Inter</div>
+    <div class="text-6xl mt-4">AaBbCc</div>
+  </div>
+
+  <div class="mt-10">
+    <table class="text-left w-full">
+      <tr>
+        <th class="py-2">Class</th>
+        <th>Size</th>
+        <th>Line Height</th>
+        <th>Preview</th>
+      </tr>
+      <tr v-for="(c, key) in textClasses" :key="key" class="border-t">
+        <td class="py-2">{{ key }}</td>
+        <td class="text-secondary-500 font-light">{{ c.size }}</td>
+        <td class="text-secondary-500 font-light">{{ c.line }}</td>
+        <td :class="key" class="max-w-lg truncate">Preview text</td>
+      </tr>
+    </table>
+  </div>
+
+  <div class="text-secondary-500 mt-4">
+    See more about Tailwind typography classes here -> <x-link href="https://tailwindcss.com/docs/font-size" target="_blank" underline>Tailwind Documentation</x-link>
+  </div>
+</template>

package/docs/router/index.ts

@@ -0,0 +1,77 @@
+import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
+
+// layouts
+import DefaultLayout from '../layouts/default.vue'
+import SimpleLayout from '../layouts/simple.vue'
+
+// help
+import HomePage from '../pages/index.vue'
+import IconsPage from '../pages/icons.vue'
+import PlayPage from '../pages/play.vue'
+import TypographyPage from '../pages/typography.vue'
+import ColorsPage from '../pages/colors.vue'
+
+const pages: Record<string, any> = import.meta.glob('../pages/component/*/index.vue', { eager: true })
+
+const componentPages: RouteRecordRaw[] = []
+
+Object.keys(pages).forEach((path) => {
+  const match = path.match(/\/pages\/component\/(.*)\/index\.vue$/)
+
+  if (match) {
+    const name = match[1].toLowerCase()
+
+    componentPages.push({
+      path: name,
+      component: pages[path].default,
+    })
+  }
+})
+
+const routes: RouteRecordRaw[] = [{
+  path: '/',
+  component: DefaultLayout,
+  children: [{
+    path: '',
+    redirect: { name: 'getting-started' },
+  }, {
+    path: 'getting-started',
+    name: 'getting-started',
+    component: HomePage,
+  }, {
+    path: 'icons',
+    name: 'icons',
+    component: IconsPage,
+  }, {
+    path: 'typography',
+    name: 'typography',
+    component: TypographyPage,
+  }, {
+    path: 'colors',
+    name: 'colors',
+    component: ColorsPage,
+  }, {
+    path: 'component',
+    component: SimpleLayout,
+    children: componentPages,
+  }],
+}, {
+  path: '/play',
+  component: PlayPage,
+}, {
+  path: '/:pathMatch(.*)*', name: 'NotFound', redirect: { name: 'getting-started' },
+}]
+
+const router = createRouter({
+  history: createWebHistory('/'),
+  routes,
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    } else {
+      return { top: 0 }
+    }
+  },
+})
+
+export default router

package/lib/common/icons.d.ts

@@ -11,5 +11,8 @@ export declare const dotsIcon = "<path d=\"M5 12h.01M12 12h.01M19 12h.01M6 12a1
 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 selectIcon = "<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>";
+export declare const chevronDownIcon = "<path d=\"M19 9l-7 7-7-7\" />";

package/lib/common/icons.js

@@ -1,17 +1,20 @@
-const c = '<path d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />', n = '<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" />', t = '<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" />', h = '<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" />', M = '<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" />', p = '<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" />', e = '<path d="M15 19l-7-7 7-7" />', l = '<path d="M9 5l7 7-7 7" />', d = '<path d="M5 13l4 4L19 7" />', I = '<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" />';
+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>', i = '<path d="M19 9l-7 7-7-7" />';
 export {
-  h as avatarIcon,
-  d as checkIcon,
-  I as chevronDownIcon,
+  M as avatarIcon,
+  v as checkIcon,
+  i as chevronDownIcon,
   a as closeIcon,
-  p as dotsIcon,
+  h as dotsIcon,
   o as errorIcon,
   m as externalIcon,
-  M as eyeIcon,
+  e as eyeIcon,
   s as eyeVisibleIcon,
-  c as infoIcon,
-  l as nextIcon,
-  e as prevIcon,
-  n as successIcon,
-  t as warningIcon
+  t as infoIcon,
+  p as nextIcon,
+  l as prevIcon,
+  d as selectIcon,
+  I as stepperIncompleteIcon,
+  r as stepperPristineIcon,
+  c as successIcon,
+  n as warningIcon
 };

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

@@ -0,0 +1,63 @@
+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>;
+export type AccordionInjection = AccordionProps & {
+    isInsideAccordion: boolean;
+};
+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 a, provide as i, openBlock as l, createElementBlock as d, normalizeStyle as p, unref as e, normalizeClass as m, renderSlot as u } from "vue";
+import { useTheme as f } 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__ */ a({
+  ...g,
+  props: y,
+  setup(n) {
+    const o = n;
+    i(_, { ...o, isInsideAccordion: !0 });
+    const { styles: t, classes: r, className: s } = f("Accordion", {}, o);
+    return (c, A) => (l(), d("div", {
+      style: p(e(t)),
+      class: m([
+        e(s),
+        e(r).wrapper
+      ])
+    }, [
+      u(c.$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/{collapse/Collapse.vue.d.ts → accordion/AccordionItem.vue.d.ts}

@@ -1,22 +1,31 @@
-import { type ExtractPublicPropTypes } from 'vue';
+import { type ExtractPublicPropTypes, type PropType } from 'vue';
 import { type ThemeComponent } from '../../composables/useTheme';
-declare const collapseProps: {
+declare const accordionItemAlign: readonly ["left", "right"];
+declare const accordionItemProps: {
     tag: {
         type: StringConstructor;
         default: string;
     };
     disabled: BooleanConstructor;
     expanded: BooleanConstructor;
-    showIcon: BooleanConstructor;
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     icon: StringConstructor;
-    color: {
-        readonly type: StringConstructor;
-        readonly default: string | undefined;
+    iconAlign: {
+        type: PropType<"left" | "right">;
+        default: string;
     };
 };
-export type CollapseProps = ExtractPublicPropTypes<typeof collapseProps>;
+export type AccordionItemAlign = typeof accordionItemAlign[number];
+export type AccordionItemProps = ExtractPublicPropTypes<typeof accordionItemProps>;
 type InternalClasses = 'wrapper' | 'icon' | 'content';
-export interface CollapseTheme extends ThemeComponent<CollapseProps, InternalClasses> {
+type InternalData = {
+    collapsed: boolean;
+    isInsideAccordion: boolean;
+};
+export interface AccordionItemTheme extends ThemeComponent<AccordionItemProps, InternalClasses, InternalData> {
 }
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     tag: {
@@ -25,11 +34,14 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     disabled: BooleanConstructor;
     expanded: BooleanConstructor;
-    showIcon: BooleanConstructor;
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     icon: StringConstructor;
-    color: {
-        readonly type: StringConstructor;
-        readonly default: string | undefined;
+    iconAlign: {
+        type: PropType<"left" | "right">;
+        default: string;
     };
 }, {
     toggle: () => void;
@@ -42,20 +54,23 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     disabled: BooleanConstructor;
     expanded: BooleanConstructor;
-    showIcon: BooleanConstructor;
+    showIcon: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     icon: StringConstructor;
-    color: {
-        readonly type: StringConstructor;
-        readonly default: string | undefined;
+    iconAlign: {
+        type: PropType<"left" | "right">;
+        default: string;
     };
 }>> & {
     onExpand?: ((...args: any[]) => any) | undefined;
 }, {
-    color: string;
-    tag: string;
     disabled: boolean;
+    tag: string;
     expanded: boolean;
     showIcon: boolean;
+    iconAlign: "left" | "right";
 }, {}>, {
     default?(_: {
         collapsed: boolean;