@indielayer/ui 1.18.1 → 2.0.0

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

@@ -15,6 +15,14 @@ const countries: SelectOption[] = [
   { label: 'Canada', value: 'ca' },
   { label: 'Mexico', value: 'mx' },
 ]
+const countryCode = ref('')
+const phoneNumber = ref('')
+const countryCodes: SelectOption[] = [
+  { label: '+1', value: '+1' },
+  { label: '+44', value: '+44' },
+  { label: '+351', value: '+351' },
+  { label: '+49', value: '+49' },
+]
 const agree = ref(false)
 const rules = {
   isEmail: (v: string) => /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid',
@@ -23,6 +31,13 @@ const rules = {
 
     return !!v  || 'Field is required'
   },
+  phoneComplete: (values: unknown) => {
+    if (!Array.isArray(values)) return 'Country code and phone number are required'
+
+    if (values.every((v) => !!v)) return true
+
+    return 'Country code and phone number are required'
+  },
 }
 const range = ref([])
 
@@ -79,6 +94,27 @@ function onSubmit(isValid: string) {
       label="Country"
     />
 
+    <x-input-group
+      label="Phone number"
+      helper="Select a country code and enter your local number"
+      :rules="[rules.phoneComplete]"
+      required
+    >
+      <x-select
+        v-model="countryCode"
+        :options="countryCodes"
+        name="countryCode"
+        placeholder="Code"
+        class="!w-28"
+      />
+      <x-input
+        v-model="phoneNumber"
+        type="number"
+        name="phoneNumber"
+        placeholder="5550000"
+      />
+    </x-input-group>
+
     <x-datepicker
       v-model="range"
       :rules="[rules.isRequired]"

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

@@ -13,7 +13,7 @@ const demos = [{
   component: UsageDemo,
 }]
 const back = 'form'
-const next = 'input'
+const next = 'inputGroup'
 </script>
 
 <template>

package/docs/pages/component/icon/formats.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="space-y-8 max-w-2xl">
+    <section class="space-y-3">
+      <p class="text-sm font-medium text-secondary-700 dark:text-secondary-300">
+        Registry key
+      </p>
+      <p class="text-sm text-secondary-600 dark:text-secondary-400">
+        Reference a name from your icons map.
+      </p>
+      <div class="flex items-center gap-3">
+        <x-icon icon="github" size="lg" />
+        <code class="text-xs">icon="github"</code>
+      </div>
+    </section>
+
+    <section class="space-y-3">
+      <p class="text-sm font-medium text-secondary-700 dark:text-secondary-300">
+        Full SVG string
+      </p>
+      <p class="text-sm text-secondary-600 dark:text-secondary-400">
+        Paste a complete <code class="text-xs">&lt;svg&gt;</code> element; attributes are applied automatically.
+      </p>
+      <div class="flex items-center gap-3">
+        <x-icon icon="fullsvg" size="lg" class="text-amber-500" />
+        <code class="text-xs">icon="fullsvg"</code>
+      </div>
+    </section>
+
+    <section class="space-y-3">
+      <p class="text-sm font-medium text-secondary-700 dark:text-secondary-300">
+        Raw path markup
+      </p>
+      <p class="text-sm text-secondary-600 dark:text-secondary-400">
+        Pass path/polyline markup directly when the icon is not in the registry.
+      </p>
+      <div class="flex items-center gap-3">
+        <x-icon icon="<polyline points=&quot;20 6 9 17 4 12&quot;></polyline>" size="lg" class="text-primary-500" />
+        <code class="text-xs truncate max-w-[14rem]">&lt;polyline …&gt;</code>
+      </div>
+    </section>
+
+    <section class="space-y-3">
+      <p class="text-sm font-medium text-secondary-700 dark:text-secondary-300">
+        Filled icons (object config)
+      </p>
+      <p class="text-sm text-secondary-600 dark:text-secondary-400">
+        Use <code class="text-xs">{ icon, filled, viewBox }</code> in the registry for multi-color or filled shapes.
+      </p>
+      <div class="flex flex-wrap items-center gap-6">
+        <div class="flex items-center gap-2">
+          <x-icon icon="vue" size="lg" />
+          <span class="text-xs text-secondary-500">vue</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <x-icon icon="nuxt" size="lg" />
+          <span class="text-xs text-secondary-500">nuxt</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <x-icon icon="play" size="lg" class="text-primary-600" />
+          <span class="text-xs text-secondary-500">play</span>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>

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

@@ -2,24 +2,31 @@
 import { XIcon } from '@indielayer/ui'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
+import FormatsDemoCode from './formats.vue?raw'
+import FormatsDemo from './formats.vue'
 import VariantsDemoCode from './variants.vue?raw'
 import VariantsDemo from './variants.vue'
 
 const title = 'Icon'
-const description = 'Icons visually represent actions, objects, or concepts, enhancing usability and recognition in interfaces. They can be used alone or alongside text for buttons, menus, and indicators.'
+const description = 'Icons visually represent actions and concepts. Register SVG paths in a global map, then reference them by name on XIcon.'
 const components = [XIcon]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Browse icons registered in the docs app (docs/icons.ts).',
   code: UsageDemoCode,
   component: UsageDemo,
+}, {
+  name: 'Formats',
+  description: 'Registry keys, full SVG strings, raw paths, and filled object configs.',
+  code: FormatsDemoCode,
+  component: FormatsDemo,
 }, {
   name: 'Variants',
-  description: '',
+  description: 'Color via class and size prop.',
   code: VariantsDemoCode,
   component: VariantsDemo,
 }]
-const back = 'drawer'
+const back = 'empty'
 const next = 'image'
 </script>
 

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

@@ -1,6 +1,54 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import docsIcons from '../../../icons'
+
+const query = ref('')
+
+const iconNames = computed(() =>
+  Object.keys(docsIcons).sort().filter((name) =>
+    name.toLowerCase().includes(query.value.trim().toLowerCase()),
+  ),
+)
+</script>
+
 <template>
-  <x-icon icon="fullsvg"/>
-  <x-icon icon="smile"/>
-  <x-icon icon="github"/>
-  <x-icon icon="<polyline points=&quot;20 6 9 17 4 12&quot;></polyline>"/>
+  <div class="space-y-6 max-w-3xl">
+    <p class="text-sm text-secondary-600 dark:text-secondary-400">
+      Icons below are loaded from
+      <code class="text-xs bg-secondary-100 dark:bg-secondary-800 px-1 py-0.5 rounded">packages/ui/docs/icons.ts</code>
+      and passed to <code class="text-xs bg-secondary-100 dark:bg-secondary-800 px-1 py-0.5 rounded">app.use(UI, { icons })</code>
+      in the docs app. See the
+      <x-link to="/icons" color="primary">Icons guide</x-link>
+      to build your own set.
+    </p>
+
+    <x-input
+      v-model="query"
+      label="Filter icons"
+      placeholder="Search by name…"
+      clearable
+      class="max-w-xs"
+    />
+
+    <div
+      v-if="iconNames.length"
+      class="grid grid-cols-3 sm:grid-cols-5 md:grid-cols-6 lg:grid-cols-8 gap-2"
+    >
+      <div
+        v-for="name in iconNames"
+        :key="name"
+        class="flex flex-col items-center gap-1.5 p-3 rounded-md border border-secondary-200 dark:border-secondary-700 bg-secondary-50/50 dark:bg-secondary-900/30"
+        :title="name"
+      >
+        <x-icon :icon="name" size="lg" class="text-secondary-800 dark:text-secondary-200" />
+        <span class="text-[10px] leading-tight text-secondary-500 dark:text-secondary-400 truncate w-full text-center">
+          {{ name }}
+        </span>
+      </div>
+    </div>
+
+    <p v-else class="text-sm text-secondary-500">
+      No icons match “{{ query }}”.
+    </p>
+  </div>
 </template>

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

@@ -2,15 +2,29 @@
 import { XImage } from '@indielayer/ui'
 import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
+import SizingDemoCode from './sizing.vue?raw'
+import SizingDemo from './sizing.vue'
+import StatesDemoCode from './states.vue?raw'
+import StatesDemo from './states.vue'
 
 const title = 'Image'
-const description = 'Image is used to load an image file with a skeleton as placeholder and on load display the image.'
+const description = 'Loads a remote image after preloading. Use a background on the wrapper for a visible placeholder until load completes.'
 const components = [XImage]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic image with alt text, dimensions, and object-cover.',
   code: UsageDemoCode,
   component: UsageDemo,
+}, {
+  name: 'Sizing',
+  description: 'Common width and height combinations.',
+  code: SizingDemoCode,
+  component: SizingDemo,
+}, {
+  name: 'States',
+  description: 'Loading placeholder and failed URL behavior.',
+  code: StatesDemoCode,
+  component: StatesDemo,
 }]
 const back = 'icon'
 const next = 'link'

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

@@ -0,0 +1,42 @@
+<template>
+  <div class="flex flex-wrap items-end gap-6">
+    <div class="text-center space-y-2">
+      <div class="rounded-md overflow-hidden bg-secondary-200 dark:bg-secondary-800">
+        <x-image
+          src="https://picsum.photos/id/106/120/120"
+          alt="Thumbnail"
+          class="block object-cover"
+          width="120"
+          height="120"
+        />
+      </div>
+      <span class="text-xs text-secondary-500">120 × 120</span>
+    </div>
+
+    <div class="text-center space-y-2">
+      <div class="rounded-md overflow-hidden bg-secondary-200 dark:bg-secondary-800">
+        <x-image
+          src="https://picsum.photos/id/106/200/150"
+          alt="Card image"
+          class="block object-cover"
+          width="200"
+          height="150"
+        />
+      </div>
+      <span class="text-xs text-secondary-500">200 × 150</span>
+    </div>
+
+    <div class="text-center space-y-2">
+      <div class="rounded-md overflow-hidden bg-secondary-200 dark:bg-secondary-800">
+        <x-image
+          src="https://picsum.photos/id/106/320/180"
+          alt="Wide banner"
+          class="block object-cover w-80 max-w-full"
+          width="320"
+          height="180"
+        />
+      </div>
+      <span class="text-xs text-secondary-500">320 × 180</span>
+    </div>
+  </div>
+</template>

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/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

@@ -33,7 +33,7 @@ const demos = [{
   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: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Mixed',
+  description: '',
+  code: MixedDemoCode,
+  component: MixedDemo,
+}, {
+  name: 'Validation',
+  description: '',
+  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,33 @@
+<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" 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/radio/index.vue

@@ -1,27 +1,41 @@
 <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: '',
   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: '',

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>