@indielayer/ui 1.18.1 → 2.1.0

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

@@ -6,16 +6,16 @@ import HorizontalDemoCode from './horizontal.vue?raw'
 import HorizontalDemo from './horizontal.vue'
 
 const title = 'Scroll'
-const description = 'The Scroll component enhances scrolling experiences by adding visual cues, such as inner shadows, to indicate additional content. It is useful for horizontally or vertically scrolling lists and containers.'
+const description = 'Scroll container with optional edge shadows that hint at more content. Use Scroll for overflow lists and panels that scroll vertically or horizontally.'
 const components = [XScroll]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Vertical scroll with edge shadow cues.',
   code: UsageDemoCode,
   component: UsageDemo,
 }, {
   name: 'Horizontal',
-  description: '',
+  description: 'Horizontal scroll with edge shadow cues.',
   code: HorizontalDemoCode,
   component: HorizontalDemo,
 }]

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

@@ -10,26 +10,26 @@ import StatesDemoCode from './states.vue?raw'
 import StatesDemo from './states.vue'
 
 const title = 'Select'
-const description = 'Selects allow the user to select one or more options from a set.'
+const description = 'Dropdown for choosing one or more options from a predefined list. Use Select for enums, filters, and form fields where free text is not needed.'
 const components = [XSelect]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }, {
   name: 'Multiple',
-  description: '',
+  description: 'Selecting more than one option at once.',
   code: MultipleDemoCode,
   component: MultipleDemo,
 }, {
   name: 'Size',
-  description: '',
+  description: 'Size options from xs to lg.',
   code: SizeDemoCode,
   component: SizeDemo,
 }, {
   name: 'States',
-  description: '',
+  description: 'Disabled, loading, and other interactive states.',
   code: StatesDemoCode,
   component: StatesDemo,
 }]

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

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Skeleton'
-const description = 'Skeletons provide placeholder elements that mimic the layout of content while data is loading. They improve perceived performance by giving users a visual cue that content is being fetched.'
+const description = 'Placeholder shapes that mirror content layout while data loads. Use skeletons to reduce layout shift and improve perceived loading performance.'
 const components = [XSkeleton]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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/slider/index.vue

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Slider'
-const description = 'Sliders allow users to select a numeric value or range by dragging a handle along a track. They are ideal for adjusting settings such as volume, brightness, or price filters.'
+const description = 'Track with a draggable handle for picking a numeric value or range. Use sliders for volume, brightness, price filters, and similar continuous settings.'
 const components = [XSlider]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Spacer'
-const description = 'Spacers create adjustable gaps between elements within flex layouts, helping to control spacing and alignment without using margin or padding directly.'
+const description = 'Flex-friendly gap that expands or shrinks between siblings without extra margin or padding. Use spacers to push items apart in toolbars and rows.'
 const components = [XSpacer]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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

@@ -6,16 +6,16 @@ import VariantsDemoCode from './variants.vue?raw'
 import VariantsDemo from './variants.vue'
 
 const title = 'Spinner'
-const description = 'Spinners visually indicate that a background process or operation is ongoing, such as loading data or submitting a form. They help manage user expectations by signaling that the system is working.'
+const description = 'Animated indicator that a background process is still running. Use spinners for indeterminate loading when completion percentage is unknown.'
 const components = [XSpinner]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }, {
   name: 'Variants',
-  description: '',
+  description: 'Color and style variants.',
   code: VariantsDemoCode,
   component: VariantsDemo,
 }]

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,26 +10,26 @@ 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',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }, {
   name: 'Selectable',
-  description: '',
+  description: 'Row selection with checkboxes.',
   code: SelectableDemoCode,
   component: SelectableDemo,
 }, {
   name: 'Virtual List',
-  description: '',
+  description: 'Virtualized rows for large datasets.',
   code: VirtualDemoCode,
   component: VirtualDemo,
 }, {
   name: 'States',
-  description: '',
+  description: 'Loading, empty, and other table states.',
   code: StatesDemoCode,
   component: StatesDemo,
 }]

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/tabs/index.vue

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Tabs'
-const description = 'Tabs are used to navigate through a set of views.'
+const description = 'Tabbed navigation that switches between related views in the same region. Use x-tab-group with x-tab when content shares context but not space.'
 const components = [XTabGroup, XTab]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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

@@ -3,6 +3,8 @@ import { ref } from 'vue'
 
 const tab = ref('a')
 const linkTab = ref(null)
+const metric = ref('unique')
+const view = ref('grid')
 </script>
 
 <template>
@@ -131,6 +133,30 @@ const linkTab = ref(null)
     </x-tab>
   </x-tab-group>
 
+  <p>Compact</p>
+  <div class="flex gap-4 items-start">
+    <x-tab-group
+      v-model="metric"
+      color="indigo"
+      class="pb-10"
+      variant="compact"
+    >
+      <x-tab value="unique" label="Unique" />
+      <x-tab value="total" label="Total" />
+    </x-tab-group>
+
+    <x-tab-group
+      v-model="view"
+      color="indigo"
+      class="pb-10"
+      size="md"
+      variant="compact"
+    >
+      <x-tab value="grid" icon="sun" tooltip="Grid view" />
+      <x-tab value="list" icon="moon" tooltip="List view" />
+    </x-tab-group>
+  </div>
+
   <p>Automatic link as value</p>
   <x-tab-group v-model="linkTab" class="pb-10" exact>
     <x-tab to="/component/tabs" label="Tabs link">

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

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Tag'
-const description = 'Tags are compact elements used to display brief information, such as categories, statuses, or labels. They help organize content and provide quick context or filtering options within lists and interfaces.'
+const description = 'Compact labels for categories, statuses, or filters. Use tags in lists and chip groups when a short keyword should stand out.'
 const components = [XTag]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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

@@ -8,21 +8,21 @@ import StatesDemoCode from './states.vue?raw'
 import StatesDemo from './states.vue'
 
 const title = 'Textarea'
-const description = 'Textareas provide a multi-line input field for users to enter longer text, such as comments, descriptions, or messages. They support resizing and can be customized for different use cases.'
+const description = 'Multi-line text field for longer content such as comments and descriptions. Use Textarea when a single-line input is not enough.'
 const components = [XTextarea]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }, {
   name: 'Variants',
-  description: '',
+  description: 'Color and style variants.',
   code: VariantsDemoCode,
   component: VariantsDemo,
 }, {
   name: 'States',
-  description: '',
+  description: 'Disabled, loading, and other interactive states.',
   code: StatesDemoCode,
   component: StatesDemo,
 }]

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

@@ -8,21 +8,21 @@ import StatesDemoCode from './states.vue?raw'
 import StatesDemo from './states.vue'
 
 const title = 'Toggle'
-const description = 'Toggles provide a simple switch interface for enabling or disabling a setting, or switching between two mutually exclusive states. They are ideal for binary options such as on/off, active/inactive, or show/hide.'
+const description = 'Binary switch for on/off settings and mutually exclusive states. Use toggles when the choice should feel instant and reversible.'
 const components = [XToggle]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }, {
   name: 'Variants',
-  description: '',
+  description: 'Color and style variants.',
   code: VariantsDemoCode,
   component: VariantsDemo,
 }, {
   name: 'States',
-  description: '',
+  description: 'Disabled, loading, and other interactive states.',
   code: StatesDemoCode,
   component: StatesDemo,
 }]

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>