@indielayer/ui 1.18.1 → 2.0.0

package/docs/pages/component/radio/radio-button-form-group.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const plan = ref('pro')
+</script>
+
+<template>
+  <x-form-group v-model="plan" label="Billing plan">
+    <x-radio-button
+      size="sm"
+      value="starter"
+      label="Starter"
+      color="primary"
+    />
+    <x-radio-button
+      size="sm"
+      value="pro"
+      label="Pro"
+      color="primary"
+    />
+    <x-radio-button
+      size="sm"
+      value="team"
+      label="Team"
+      color="primary"
+    />
+  </x-form-group>
+</template>

package/docs/pages/component/radio/radio-button.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const selected = ref('monthly')
+</script>
+
+<template>
+  <div class="inline-flex gap-2">
+    <x-radio-button
+      v-model="selected"
+      value="monthly"
+      label="Monthly"
+      color="primary"
+      light
+      outlined
+    />
+    <x-radio-button
+      v-model="selected"
+      value="yearly"
+      label="Yearly"
+      color="primary"
+      light
+      outlined
+    />
+  </div>
+</template>

package/docs/pages/component/skeleton/usage.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex">
-    <x-skeleton class="w-14 h-14 rounded-full flex-shrink-0 mr-2"/>
+    <x-skeleton class="w-14 h-14 rounded-full shrink-0 mr-2"/>
     <div class="w-full">
       <x-skeleton/>
       <x-skeleton class="mt-2"/>

package/docs/pages/component/stepper/index.vue

@@ -2,15 +2,22 @@
 import { XStepper } from '@indielayer/ui'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
+import WizardDemoCode from './wizard.vue?raw'
+import WizardDemo from './wizard.vue'
 
 const title = 'Stepper'
-const description = 'Stepper is a navigation component that guides users through the steps of a task.'
+const description = 'Multi-step wizard with declarative steps, named panel slots, programmatic next/prev navigation, validation hooks, and optional sidebar summaries.'
 const components = [XStepper]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Horizontal stepper with named step slots and Previous / Next controls.',
   code: UsageDemoCode,
   component: UsageDemo,
+}, {
+  name: 'Wizard',
+  description: 'Multi-step form with validation, sidebar summaries, and external footer actions.',
+  code: WizardDemoCode,
+  component: WizardDemo,
 }]
 const back = 'spinner'
 const next = 'table'

package/docs/pages/component/stepper/usage.vue

@@ -1,21 +1,65 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const step = ref(1)
+const stepperRef = ref()
+const active = ref('details')
 const steps = [
-  { label: 'Initial step', description: 'This is the description', status: 'complete' },
-  { label: 'One more step i know', status: 'incomplete' },
-  { label: 'Almost there', status: 'error' },
-  { label: 'Lets go' },
-  { label: 'Finish line', disabled: true },
+  { value: 'details', title: 'Details' },
+  { value: 'settings', title: 'Settings', optional: true },
+  { value: 'review', title: 'Review' },
 ]
 </script>
 
 <template>
-  <x-stepper v-model="step" :steps="steps">
-    <div v-if="step === 0">Initial step!</div>
-    <div v-if="step === 1">One more step!</div>
-    <div v-if="step === 2">Almost there!</div>
-    <div v-if="step === 3">Finish line!</div>
-  </x-stepper>
+  <div class="max-w-2xl">
+    <x-stepper
+      ref="stepperRef"
+      v-model="active"
+      :steps="steps"
+      orientation="horizontal"
+      label-placement="bottom"
+      class="min-h-[10rem]"
+    >
+      <template #details>
+        <p class="text-sm font-medium text-secondary-800 dark:text-secondary-200 mb-1">
+          Basic information
+        </p>
+        <p class="text-sm text-secondary-600 dark:text-secondary-400">
+          Enter your project details here.
+        </p>
+      </template>
+      <template #settings>
+        <p class="text-sm font-medium text-secondary-800 dark:text-secondary-200 mb-1">
+          Optional preferences
+        </p>
+        <p class="text-sm text-secondary-600 dark:text-secondary-400">
+          Configure optional settings, or skip ahead with Next.
+        </p>
+      </template>
+      <template #review>
+        <p class="text-sm font-medium text-secondary-800 dark:text-secondary-200 mb-1">
+          Confirm and finish
+        </p>
+        <p class="text-sm text-secondary-600 dark:text-secondary-400">
+          Review everything before submitting.
+        </p>
+      </template>
+    </x-stepper>
+
+    <div class="flex justify-end gap-2 mt-4">
+      <x-button
+        ghost
+        :disabled="stepperRef?.isFirst"
+        @click="stepperRef?.prev()"
+      >
+        Previous
+      </x-button>
+      <x-button
+        :disabled="stepperRef?.isLast"
+        @click="stepperRef?.next()"
+      >
+        Next
+      </x-button>
+    </div>
+  </div>
 </template>

package/docs/pages/component/stepper/wizard.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { useNotifications } from '@indielayer/ui'
+import { computed, ref } from 'vue'
+
+const notifications = useNotifications()
+const formRef = ref<{ validate: () => boolean; } | null>(null)
+const stepperRef = ref()
+
+const active = ref('account')
+const saving = ref(false)
+
+const firstName = ref('')
+const lastName = ref('')
+const phone = ref('')
+
+const rules = {
+  isRequired: (v: string) => !!v || 'Required',
+  isEmail: (v: string) => /^\S+@\S+\.\S+$/.test(v) || 'Invalid email',
+}
+
+async function beforeContactNext() {
+  saving.value = true
+  await new Promise((r) => setTimeout(r, 600))
+  saving.value = false
+}
+
+const steps = computed(() => [
+  { value: 'account', title: 'Account', description: 'Required' },
+  { value: 'contact', title: 'Contact', description: 'Optional', optional: true, beforeNext: beforeContactNext },
+  { value: 'confirm', title: 'Confirm' },
+])
+
+const accountSummary = computed(() => {
+  if (!firstName.value && !lastName.value) return ''
+
+  return [firstName.value, lastName.value].filter(Boolean).join(' ')
+})
+
+function onSubmit(isValid: boolean) {
+  if (isValid) notifications?.success('Submitted')
+  else notifications?.error('Fix form errors')
+}
+
+async function onPrimaryClick() {
+  if (stepperRef.value?.isLast) {
+    if (formRef.value?.validate()) onSubmit(true)
+
+    return
+  }
+
+  await stepperRef.value?.next()
+}
+</script>
+
+<template>
+  <x-form ref="formRef" class="max-w-3xl" @submit="onSubmit">
+    <x-stepper
+      ref="stepperRef"
+      v-model="active"
+      :steps="steps"
+      :validate="() => formRef?.validate() ?? true"
+      :loading="saving"
+      linear
+      class="min-h-[16rem]"
+    >
+      <template #account="{ next }">
+        <div class="grid gap-4 max-w-lg">
+          <x-input v-model="firstName" label="First name" :rules="[rules.isRequired]" />
+          <x-input v-model="lastName" label="Last name" :rules="[rules.isRequired]" />
+        </div>
+        <div class="mt-6 flex justify-end">
+          <x-button @click="next">Continue</x-button>
+        </div>
+      </template>
+
+      <template #summary-account>
+        <span v-if="accountSummary">{{ accountSummary }}</span>
+      </template>
+
+      <template #contact="{ next, prev }">
+        <x-input v-model="phone" class="max-w-xs" label="Phone" helper="Optional" />
+        <div class="mt-6 flex justify-between">
+          <x-button ghost @click="prev">Back</x-button>
+          <x-button :loading="saving" @click="next">Continue</x-button>
+        </div>
+      </template>
+
+      <template #summary-contact>
+        <span v-if="phone">{{ phone }}</span>
+      </template>
+
+      <template #confirm="{ prev }">
+        <dl class="text-sm grid gap-2 max-w-md">
+          <div class="flex justify-between gap-4">
+            <dt class="text-secondary-500">Name</dt>
+            <dd>{{ accountSummary || '—' }}</dd>
+          </div>
+          <div class="flex justify-between gap-4">
+            <dt class="text-secondary-500">Phone</dt>
+            <dd>{{ phone || '—' }}</dd>
+          </div>
+        </dl>
+        <div class="mt-6 flex justify-between">
+          <x-button ghost @click="prev">Back</x-button>
+        </div>
+      </template>
+    </x-stepper>
+
+    <div class="flex justify-end gap-2 mt-4 pt-4 border-t border-secondary-200 dark:border-secondary-700">
+      <x-button
+        ghost
+        :disabled="stepperRef?.isFirst"
+        @click="stepperRef?.prev()"
+      >
+        Previous
+      </x-button>
+      <x-button
+        :loading="saving"
+        :type="stepperRef?.isLast ? 'submit' : 'button'"
+        @click="onPrimaryClick"
+      >
+        {{ stepperRef?.isLast ? 'Submit' : 'Next' }}
+      </x-button>
+    </div>
+  </x-form>
+</template>

package/docs/pages/component/table/index.vue

@@ -10,7 +10,7 @@ import SelectableDemoCode from './selectable.vue?raw'
 import SelectableDemo from './selectable.vue'
 
 const title = 'Table'
-const description = 'Tables are used to display data in a tabular format.'
+const description = 'Tables display tabular data with single- or multi-column sorting, selection, expandable rows, and virtual lists.'
 const components = [XTable, XTableBody, XTableCell, XTableHead, XTableHeader, XTableRow]
 const demos = [{
   name: 'Usage',

package/docs/pages/component/table/states.vue

@@ -17,9 +17,11 @@ const items = ref([])
   <x-table :headers="headers" :items="items">
     <template #empty>
       <div class="p-4">
-        <div class="p-8 border-dashed border rounded-lg text-center">
-          Empty state slot
-        </div>
+        <x-empty
+          bordered
+          title="No data"
+          description="There are no rows to display."
+        />
       </div>
     </template>
   </x-table>

package/docs/pages/component/table/virtual.vue

@@ -62,7 +62,7 @@ const selected = ref<number[]>([])
           outlined
           color="error"
           size="xs"
-          @click="items = items.filter((i) => i.id !== item.id)"
+          @click.stop.prevent="items = items.filter((i) => i.id !== item.id)"
         />
       </template>
     </x-table>

package/docs/pages/component/tooltip/content.vue

@@ -0,0 +1,11 @@
+<template>
+  <x-tooltip position="bottom">
+    <x-button color="primary">Hover for details</x-button>
+    <template #tooltip>
+      <div class="font-semibold text-white mb-1">Export report</div>
+      <div class="text-secondary-300 text-xs leading-relaxed max-w-[14rem]">
+        Download a CSV snapshot of the current filters. Large exports may take a few seconds.
+      </div>
+    </template>
+  </x-tooltip>
+</template>

package/docs/pages/component/tooltip/index.vue

@@ -2,15 +2,43 @@
 import { XTooltip, XToggleTip } from '@indielayer/ui'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
+import ContentDemoCode from './content.vue?raw'
+import ContentDemo from './content.vue'
+import PlacementDemoCode from './placement.vue?raw'
+import PlacementDemo from './placement.vue'
+import ToggleTipDemoCode from './toggle-tip.vue?raw'
+import ToggleTipDemo from './toggle-tip.vue'
+import StatesDemoCode from './states.vue?raw'
+import StatesDemo from './states.vue'
 
 const title = 'Tooltip'
-const description = 'Tooltips are used to display a message when hovering over an element.'
+const description = 'Tooltips display contextual help on hover. Use XToggleTip for a compact info-icon pattern beside labels.'
 const components = [XTooltip, XToggleTip]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Short hint via the tooltip prop on icon buttons.',
   code: UsageDemoCode,
   component: UsageDemo,
+}, {
+  name: 'Content',
+  description: 'Title and body using the tooltip slot.',
+  code: ContentDemoCode,
+  component: ContentDemo,
+}, {
+  name: 'Placement',
+  description: 'top, bottom, left, and right positions.',
+  code: PlacementDemoCode,
+  component: PlacementDemo,
+}, {
+  name: 'Toggle tip',
+  description: 'Info icon with helper text for labels and form fields.',
+  code: ToggleTipDemoCode,
+  component: ToggleTipDemo,
+}, {
+  name: 'States',
+  description: 'Disabled tooltips do not open on hover.',
+  code: StatesDemoCode,
+  component: StatesDemo,
 }]
 const back = 'tag'
 const next = 'upload'

package/docs/pages/component/tooltip/placement.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const placements = ['top', 'bottom', 'left', 'right'] as const
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center justify-center gap-6 py-6 px-4 max-w-md rounded-lg bg-secondary-50 dark:bg-secondary-900/50">
+    <x-tooltip
+      v-for="placement in placements"
+      :key="placement"
+      :position="placement"
+      :tooltip="`Tooltip on ${placement}`"
+    >
+      <x-button outlined class="capitalize min-w-[5rem]">
+        {{ placement }}
+      </x-button>
+    </x-tooltip>
+  </div>
+</template>

package/docs/pages/component/tooltip/states.vue

@@ -0,0 +1,5 @@
+<template>
+  <x-tooltip tooltip="You cannot perform this action" disabled>
+    <x-button disabled>Unavailable</x-button>
+  </x-tooltip>
+</template>

package/docs/pages/component/tooltip/toggle-tip.vue

@@ -0,0 +1,6 @@
+<template>
+  <div class="flex items-center gap-2">
+    <span class="text-sm text-secondary-800 dark:text-secondary-200">API rate limit</span>
+    <x-toggle-tip content="Requests are capped at 1,000 per hour. Upgrade your plan to raise the limit." />
+  </div>
+</template>

package/docs/pages/component/tooltip/usage.vue

@@ -1,12 +1,11 @@
 <template>
-  <x-tooltip>
-    <x-button>Hover me to see the tooltip</x-button>
-    <template #tooltip>
-      <div class="font-bold">Tooltip title</div>
-      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus corrupti maiores aut minima iusto nulla inventore ea illo commodi et.</div>
-    </template>
-  </x-tooltip>
+  <div class="flex flex-wrap items-center gap-4">
+    <x-tooltip tooltip="Save your changes">
+      <x-button icon="check" aria-label="Save" />
+    </x-tooltip>
 
-  <!-- tooltip with the info icon -->
-  <x-toggle-tip content="Lets go"/>
+    <x-tooltip tooltip="More options">
+      <x-button ghost icon="smile" aria-label="More options" />
+    </x-tooltip>
+  </div>
 </template>

package/docs/pages/component/virtualGrid/usage.vue

@@ -9,10 +9,13 @@ const gridColumnCount = 1000
     :column-count="gridColumnCount"
     :row-height="48"
     :column-width="100"
-    class="h-96 border border-gray-200 rounded-md bg-white w-full"
+    class="h-96 w-full rounded-md border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-950"
   >
     <template #cell="{ rowIndex, columnIndex, style }">
-      <div :style="style" class="h-12 flex items-center justify-center border border-gray-200">
+      <div
+        :style="style"
+        class="flex h-12 items-center justify-center border border-gray-200 text-gray-800 dark:border-gray-700 dark:text-gray-200"
+      >
         R{{ rowIndex }}, C{{ columnIndex }}
       </div>
     </template>

package/docs/pages/component/virtualList/dynamicHeight.vue

@@ -50,24 +50,24 @@ const rowHeight = useDynamicRowHeight({
   <x-virtual-list
     :row-count="items.length"
     :row-height="rowHeight"
-    style="height: 500px; border: 1px solid #ccc;"
+    class="h-[500px] rounded-md border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-950"
   >
     <template #row="{ index, style }">
       <div
         :style="style"
         :class="[
-          'flex items-start py-3 px-4 border-b border-gray-200 cursor-pointer transition-colors gap-2',
-          index % 2 === 0 ? 'bg-white' : 'bg-gray-50',
-          'hover:bg-gray-200',
-          isRowCollapsed(index) ? 'whitespace-nowrap overflow-hidden text-ellipsis' : ''
+          'flex cursor-pointer items-start gap-2 border-b border-gray-200 px-4 py-3 transition-colors dark:border-gray-700',
+          index % 2 === 0 ? 'bg-white dark:bg-gray-950' : 'bg-gray-50 dark:bg-gray-900',
+          'hover:bg-gray-100 dark:hover:bg-gray-800',
+          isRowCollapsed(index) ? 'overflow-hidden text-ellipsis whitespace-nowrap' : '',
         ]"
         @click="toggleRow(index)"
       >
-        <span class="flex-shrink-0 w-6 h-6 inline-flex items-center justify-center text-sm">
+        <span class="inline-flex h-6 w-6 shrink-0 items-center justify-center text-sm">
           {{ isRowCollapsed(index) ? '➕' : '➖' }}
         </span>
-        <span class="flex-1 leading-normal">
-          <strong class="text-gray-700 mr-2">{{ index }}:</strong>{{ getText(index) }}
+        <span class="flex-1 leading-normal text-gray-800 dark:text-gray-200">
+          <strong class="mr-2 text-gray-700 dark:text-gray-300">{{ index }}:</strong>{{ getText(index) }}
         </span>
       </div>
     </template>

package/docs/pages/component/virtualList/usage.vue

@@ -6,10 +6,13 @@ const listItems = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`)
   <x-virtual-list
     :row-count="listItems.length"
     :row-height="48"
-    class="h-96 border border-gray-200 rounded-md bg-white"
+    class="h-96 rounded-md border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-950"
   >
     <template #row="{ index, style }">
-      <div :style="style" class="h-12 flex items-center justify-center border-b border-gray-200">
+      <div
+        :style="style"
+        class="flex h-12 items-center justify-center border-b border-gray-200 text-gray-800 dark:border-gray-700 dark:text-gray-200"
+      >
         {{ listItems[index] }}
       </div>
     </template>

package/docs/pages/index.vue

@@ -8,6 +8,20 @@ useDocMeta({
   description: 'Tailwind CSS UI components for Vue.js 3 and Nuxt.js 3. Build and prototype fast web applications.',
   path: '/getting-started',
 })
+
+const tailwindSetupSnippet = `/* src/assets/tailwind.css */
+@import "tailwindcss";
+@import "@indielayer/ui/tailwind.css";
+
+@source "../../index.html";
+@source "../**/*.{vue,js,ts}";
+@source "../../node_modules/@indielayer/ui/{lib,src}/**/*";
+
+/* Optional: map semantic colors to Tailwind palettes */
+@theme {
+  --color-primary-500: var(--color-emerald-500);
+  --color-secondary-500: var(--color-slate-500);
+}`
 </script>
 
 <template>
@@ -54,40 +68,18 @@ useDocMeta({
         }]"
       />
 
-      <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>
+      <h3 class="text-2xl mt-8 mb-4">2. Setup Tailwind CSS v4</h3>
+      <p>Indielayer UI requires <b>Tailwind CSS v4</b> (Safari 16.4+, Chrome 111+, Firefox 128+). See the <x-link href="https://tailwindcss.com/docs/installation/using-vite" external shadow color="primary">Tailwind v4 install guide</x-link> and install <code class="text-sm">tailwindcss</code> plus <code class="text-sm">@tailwindcss/postcss</code> (Vite and Nuxt).</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>
+        Import Indielayer theme tokens from <b>@indielayer/ui/tailwind.css</b> in your app stylesheet and register source paths for class scanning:
       </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',
-  presets: [indielayer()],
-  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: [],
-}`"
+        lang="css"
+        :code="tailwindSetupSnippet"
       />
+      <p class="my-4 text-sm text-gray-600 dark:text-gray-400">
+        Add <code>@tailwindcss/postcss</code> to your PostCSS config (Vite <code>css.postcss.plugins</code> or Nuxt <code>postcss.plugins</code>). See the <x-link href="https://tailwindcss.com/docs/upgrade-guide" external shadow color="primary">upgrade guide</x-link> when migrating from v3.
+      </p>
       <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
@@ -99,8 +91,15 @@ const app = createApp(App)
 
 app.use(UI, {
   theme: BaseTheme,
+  defaults: {
+    Alert: { outlined: true },
+  },
 })`"
       />
+      <p class="my-4 text-sm text-gray-600 dark:text-gray-400">
+        Use <code>defaults</code> to set app-wide prop defaults per component (e.g. all alerts outlined). Instance props still override when passed explicitly.
+        Variant and layout booleans on themed components use <code>optionalBooleanProp()</code> so omitted attributes stay unset; plain <code>Boolean</code> props default to <code>false</code> in Vue and will not receive app defaults.
+      </p>
       <h4 class="text-xl mt-8 mb-4">Load on a Nuxt 3 project</h4>
       <multi-snippet
         class="my-4"
@@ -127,9 +126,7 @@ app.use(UI, {
   css: ['~/assets/tailwind.css'],
   postcss: {
     plugins: {
-      'tailwindcss/nesting': {},
-      tailwindcss: {},
-      autoprefixer: {},
+      '@tailwindcss/postcss': {},
     },
   },
 })`"