@indielayer/ui 1.18.1 → 2.1.0

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

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+const validSrc = 'https://picsum.photos/id/64/360/240'
+const brokenSrc = 'https://invalid.example/image.jpg'
+</script>
+
+<template>
+  <div class="grid gap-8 sm:grid-cols-2 max-w-2xl">
+    <section class="space-y-2">
+      <p class="text-sm font-medium text-secondary-700 dark:text-secondary-300">
+        Loading
+      </p>
+      <p class="text-sm text-secondary-600 dark:text-secondary-400">
+        A neutral background on the wrapper shows while the URL loads. The component swaps in
+        <code class="text-xs">src</code> after <code class="text-xs">onload</code>.
+      </p>
+      <div class="rounded-lg overflow-hidden bg-secondary-200 dark:bg-secondary-800 w-[360px] max-w-full h-60">
+        <x-image
+          :src="validSrc"
+          alt="Portrait loaded from remote URL"
+          class="block w-full h-full object-cover"
+          width="360"
+          height="240"
+        />
+      </div>
+    </section>
+
+    <section class="space-y-2">
+      <p class="text-sm font-medium text-secondary-700 dark:text-secondary-300">
+        Failed load
+      </p>
+      <p class="text-sm text-secondary-600 dark:text-secondary-400">
+        When the request fails, the image keeps a minimal fallback and the wrapper background remains visible.
+      </p>
+      <div class="rounded-lg overflow-hidden bg-secondary-200 dark:bg-secondary-800 w-[360px] max-w-full h-60 flex items-center justify-center">
+        <x-image
+          :src="brokenSrc"
+          alt="Image failed to load"
+          class="block w-full h-full object-cover"
+          width="360"
+          height="240"
+        />
+      </div>
+    </section>
+  </div>
+</template>

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

@@ -1,8 +1,11 @@
 <template>
-  <x-image
-    src="https://images.unsplash.com/photo-1543352634-99a5d50ae78e?auto=format&fit=crop&q=80&w=2671&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-    width="256"
-    height="256"
-    alt=""
-  />
+  <div class="inline-block rounded-lg overflow-hidden bg-secondary-200 dark:bg-secondary-800">
+    <x-image
+      src="https://picsum.photos/id/237/400/300"
+      alt="Golden retriever sitting on a path"
+      class="block w-full max-w-sm h-auto object-cover"
+      width="400"
+      height="300"
+    />
+  </div>
 </template>

package/docs/pages/component/infiniteLoader/composable.vue

@@ -143,22 +143,24 @@ onMounted(() => {
 </script>
 
 <template>
-  <p class="info">
+  <p class="mb-2 text-sm text-gray-600 dark:text-gray-400">
     Loaded {{ loadedCount }} of {{ infiniteRowCount }} items
-    <span v-if="isLoading" class="loading"> (Loading...)</span>
+    <span v-if="isLoading" class="text-gray-500 dark:text-gray-300"> (Loading...)</span>
   </p>
   <x-virtual-list
     :row-count="infiniteRowCount"
     :row-height="50"
-    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"
     :on-rows-rendered="onRowsRendered"
   >
     <template #row="{ index, style }">
       <div
         :style="style"
         :class="[
-          'h-12 flex items-center justify-center border-b border-gray-200',
-          { 'loading-indicator': index === infiniteItems.length && hasMoreData }
+          'flex h-12 items-center justify-center border-b border-gray-200 text-gray-800 dark:border-gray-700 dark:text-gray-200',
+          index === infiniteItems.length && hasMoreData
+            ? 'bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-400'
+            : '',
         ]"
       >
         {{ getItem(index) }}

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

@@ -6,16 +6,16 @@ import ComposableDemoCode from './composable.vue?raw'
 import ComposableDemo from './composable.vue'
 
 const title = 'InfiniteLoader'
-const description = 'InfiniteLoader is a component that allows you to load data on demand as users scroll through a list.'
+const description = 'Loads more list items as the user scrolls near the end of a container. Use InfiniteLoader for feeds and catalogs that grow on demand.'
 const components = [XInfiniteLoader]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Scroll to load more items as you reach the end.',
   code: UsageDemoCode,
   component: UsageDemo,
 }, {
   name: 'Composable',
-  description: '',
+  description: 'Using the infinite-loader composable API.',
   code: ComposableDemoCode,
   component: ComposableDemo,
 }]

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

@@ -126,9 +126,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <p class="info">
+  <p class="mb-2 text-sm text-gray-600 dark:text-gray-400">
     Loaded {{ loadedCount }} of {{ infiniteRowCount }} items
-    <span v-if="isLoading" class="loading"> (Loading...)</span>
+    <span v-if="isLoading" class="text-gray-500 dark:text-gray-300"> (Loading...)</span>
   </p>
   <x-infinite-loader
     :is-row-loaded="isRowLoaded"
@@ -141,15 +141,17 @@ onMounted(() => {
       <x-virtual-list
         :row-count="infiniteRowCount"
         :row-height="50"
-        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"
         :on-rows-rendered="onRowsRendered"
       >
         <template #row="{ index, style }">
           <div
             :style="style"
             :class="[
-              'h-12 flex items-center justify-center border-b border-gray-200',
-              { 'loading-indicator': index === infiniteItems.length && hasMoreData }
+              'flex h-12 items-center justify-center border-b border-gray-200 text-gray-800 dark:border-gray-700 dark:text-gray-200',
+              index === infiniteItems.length && hasMoreData
+                ? 'bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-400'
+                : '',
             ]"
           >
             {{ getItem(index) }}

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

@@ -10,30 +10,30 @@ import SizeDemoCode from './size.vue?raw'
 import SizeDemo from './size.vue'
 
 const title = 'Input'
-const description = 'This is a text input component that allows users to enter and edit text.'
+const description = 'Single-line text field for entering and editing short values. Use x-input in forms for names, emails, search, and other one-line data.'
 const components = [XInput]
 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: '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,
 }]
-const back = 'form'
+const back = 'inputGroup'
 const next = 'radio'
 </script>
 

package/docs/pages/component/input/variants.vue

@@ -14,5 +14,16 @@ const other = ref('I have an icon')
     />
     <x-input v-model="other" label="Input with icon" icon-left="smile"/>
     <x-input v-model="other" label="Icon on the right" icon-right="smile" />
+    <x-input
+      v-model="other"
+      icon="smile"
+      label="Icon and suffix slot"
+      class="md:col-span-3"
+      clearable
+    >
+      <template #suffix>
+        <span class="text-secondary-400 text-xs">min</span>
+      </template>
+    </x-input>
   </div>
 </template>

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { XInputGroup } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+import MixedDemoCode from './mixed.vue?raw'
+import MixedDemo from './mixed.vue'
+import ValidationDemoCode from './validation.vue?raw'
+import ValidationDemo from './validation.vue'
+
+const title = 'Input Group'
+const description = 'Input groups combine multiple inline fields (Input, Textarea, Select, Datepicker, Button) into one control with a shared label and footer.'
+const components = [XInputGroup]
+const demos = [{
+  name: 'Usage',
+  description: 'Basic example with common props.',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Mixed',
+  description: 'Mixing inputs, selects, and buttons in one group.',
+  code: MixedDemoCode,
+  component: MixedDemo,
+}, {
+  name: 'Validation',
+  description: 'Shared validation and footer messaging.',
+  code: ValidationDemoCode,
+  component: ValidationDemo,
+}]
+const back = 'formGroup'
+const next = 'input'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/inputGroup"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

package/docs/pages/component/inputGroup/mixed.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const unit = ref('km')
+const distance = ref('')
+
+const unitOptions = [
+  { value: 'km', label: 'km' },
+  { value: 'mi', label: 'mi' },
+]
+</script>
+
+<template>
+  <x-input-group label="Distance">
+    <x-select v-model="unit" :options="unitOptions" class="!w-28" />
+    <x-input v-model="distance" placeholder="0" type="number" />
+  </x-input-group>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const country = ref('+1')
+const phone = ref('')
+</script>
+
+<template>
+  <div class="grid gap-6">
+    <x-input-group label="Phone number" helper="Country code and local number">
+      <x-input v-model="country" placeholder="+1" class="!w-24" />
+      <x-input v-model="phone" placeholder="555-0000" />
+    </x-input-group>
+
+    <x-input-group label="Search" helper="Helper text here">
+      <x-input v-model="phone" placeholder="Search…" />
+      <x-button color="primary">Go</x-button>
+    </x-input-group>
+  </div>
+</template>

package/docs/pages/component/inputGroup/validation.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const start = ref('')
+const end = ref('')
+
+const rules = {
+  required: (values: unknown) => {
+    if (!Array.isArray(values)) return 'Both dates are required'
+
+    if (values.length >= 2 && values.every((v) => !!v)) return true
+
+    return 'Both dates are required'
+  },
+}
+</script>
+
+<template>
+  <x-form @submit="() => {}">
+    <div class="flex">
+      <x-input-group
+        label="Date range"
+        helper="Select date and time"
+        :rules="[rules.required]"
+      >
+        <x-datepicker
+          v-model="start"
+          teleport="body"
+          placeholder="Date"
+          :enable-time-picker="false"
+        />
+        <x-input v-model="end" type="time" placeholder="Time" />
+      </x-input-group>
+    </div>
+
+    <x-button type="submit" color="primary">Submit</x-button>
+  </x-form>
+</template>

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

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Link'
-const description = 'Links are used to navigate to a different page.'
+const description = 'Styled anchor for navigating to another page or external URL. Use x-link when you need consistent link styling, external indicators, and accessibility.'
 const components = [XLink]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Loader'
-const description = 'Loader component is used to show a loading state.'
+const description = 'Full-area loading overlay that blocks interaction while content or an action completes. Use Loader when the whole region should wait before continuing.'
 const components = [XLoader]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Menu'
-const description = 'Menus are used to display a list of options.'
+const description = 'Dropdown list of actionable items triggered from a button or other control. Use x-menu with x-menu-item for contextual actions and navigation.'
 const components = [XMenu, XMenuItem]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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

@@ -6,16 +6,16 @@ import ComposedDemoCode from './composed.vue?raw'
 import ComposedDemo from './composed.vue'
 
 const title = 'Modal'
-const description = 'Modals are used to display content on top of the current page.'
+const description = 'Dialog overlay that focuses attention on a task or message above the current page. Use modals for confirmations, forms, and details that need temporary focus.'
 const components = [XModal]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }, {
   name: 'Composed',
-  description: '',
+  description: 'Modal with header, body, and footer slots.',
   code: ComposedDemoCode,
   component: ComposedDemo,
 }]

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

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Notifications'
-const description = 'Notifications provide timely feedback or alerts to users, such as success messages, warnings, or errors. They help keep users informed about important events or actions.'
+const description = 'Toast-style feedback for success, warning, or error after an action. Use notifications for transient messages that should not block the page.'
 const components = [XNotifications]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Pagination'
-const description = 'Pagination divides large sets of content into manageable pages, allowing users to navigate through items efficiently. It is commonly used in tables, lists, and search results to improve usability and performance.'
+const description = 'Controls for moving through large result sets page by page. Use pagination with tables, lists, and search results to keep each view manageable.'
 const components = [XPagination]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Popover'
-const description = 'Popovers display additional information or interactive content in a floating overlay, anchored to a trigger element. They are useful for tooltips, menus, or contextual actions without navigating away from the current view.'
+const description = 'Floating panel anchored to a trigger for extra content or actions. Use popovers for menus and contextual UI without leaving the current view.'
 const components = [XPopover, XPopoverContainer]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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

@@ -17,5 +17,19 @@
         </x-popover-container>
       </template>
     </x-popover>
+
+    <x-button-group>
+      <x-button icon="plus" tooltip="Add New">Add New</x-button>
+      <x-popover>
+        <x-button icon="chevron-down" tooltip="More Options"/>
+        <template #content>
+          <x-popover-container class="p-2">
+            <x-button>Option 1</x-button>
+            <x-button>Option 2</x-button>
+            <x-button>Option 3</x-button>
+          </x-popover-container>
+        </template>
+      </x-popover>
+    </x-button-group>
   </div>
 </template>

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

@@ -6,16 +6,16 @@ import VariantsDemoCode from './variants.vue?raw'
 import VariantsDemo from './variants.vue'
 
 const title = 'Progress'
-const description = 'Progress indicators visually communicate the completion status of a task or process, such as file uploads or data loading. They help users understand how much work remains.'
+const description = 'Bar that shows how far a task or process has completed. Use progress for uploads, multi-step jobs, and determinate loading states.'
 const components = [XProgress]
 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/qrCode/index.vue

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'QR Code'
-const description = 'The QR Code component is used to generate a QR code.'
+const description = 'Renders a QR code from a string or URL for scanning with mobile devices. Use it for share links, payments, and quick machine-readable payloads.'
 const components = [XQrCode]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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

@@ -1,35 +1,49 @@
 <script setup lang="ts">
-import { XRadio } from '@indielayer/ui'
+import { XRadio, XRadioButton } from '@indielayer/ui'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
-import VariantsDemoCode from './variants.vue?raw'
-import VariantsDemo from './variants.vue'
+import PaymentMethodDemoCode from './payment-method.vue?raw'
+import PaymentMethodDemo from './payment-method.vue'
+import RadioButtonDemoCode from './radio-button.vue?raw'
+import RadioButtonDemo from './radio-button.vue'
+import RadioButtonFormGroupDemoCode from './radio-button-form-group.vue?raw'
+import RadioButtonFormGroupDemo from './radio-button-form-group.vue'
 import StatesDemoCode from './states.vue?raw'
 import StatesDemo from './states.vue'
 import SizeDemoCode from './size.vue?raw'
 import SizeDemo from './size.vue'
 
 const title = 'Radio'
-const description = 'Radios allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.'
-const components = [XRadio]
+const description = 'Radios allow the user to select one option from a set. Use classic radios for standard options, or x-radio-button for a button-shaped variant. Place several x-radio-button options inside x-form-group for a joined segmented control.'
+const components = [XRadio, XRadioButton]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }, {
-  name: 'Variants',
-  description: '',
-  code: VariantsDemoCode,
-  component: VariantsDemo,
+  name: 'Payment method',
+  description: 'Bordered cards with default slot content for extra details.',
+  code: PaymentMethodDemoCode,
+  component: PaymentMethodDemo,
+}, {
+  name: 'Radio button',
+  description: 'Button-shaped options with a shared model value.',
+  code: RadioButtonDemoCode,
+  component: RadioButtonDemo,
+}, {
+  name: 'Radio button group',
+  description: 'Inside x-form-group, options render as a single joined control.',
+  code: RadioButtonFormGroupDemoCode,
+  component: RadioButtonFormGroupDemo,
 }, {
   name: 'States',
-  description: '',
+  description: 'Disabled, loading, and other interactive states.',
   code: StatesDemoCode,
   component: StatesDemo,
 }, {
   name: 'Size',
-  description: '',
+  description: 'Size options from xs to lg.',
   code: SizeDemoCode,
   component: SizeDemo,
 }]

package/docs/pages/component/radio/payment-method.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const selected = ref('a')
+</script>
+
+<template>
+  <div class="max-w-md space-y-1">
+    <x-radio
+      v-model="selected"
+      value="a"
+      label="Credit card"
+      class="border p-3 rounded w-full"
+      :class="{ 'bg-emerald-50 dark:bg-gray-800 border-emerald-400 dark:border-emerald-800': selected === 'a' }"
+    >
+      <div class="text-gray-400 font-light text-sm">VISA · · · · 2592</div>
+    </x-radio>
+    <x-radio
+      v-model="selected"
+      value="b"
+      label="Bank account"
+      class="border p-3 rounded w-full"
+      :class="{ 'bg-emerald-50 dark:bg-gray-800 border-emerald-400 dark:border-emerald-800': selected === 'b' }"
+    >
+      <div class="text-gray-400 font-light text-sm">Santander · · · · 1580</div>
+    </x-radio>
+  </div>
+</template>

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>