@indielayer/ui 1.18.1 → 2.1.0

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

@@ -6,6 +6,8 @@ import VariantsDemoCode from './variants.vue?raw'
 import VariantsDemo from './variants.vue'
 import IconsDemoCode from './icons.vue?raw'
 import IconsDemo from './icons.vue'
+import TooltipDemoCode from './tooltip.vue?raw'
+import TooltipDemo from './tooltip.vue'
 import ButtonGroupDemoCode from './button-group.vue?raw'
 import ButtonGroupDemo from './button-group.vue'
 import SizeDemoCode from './size.vue?raw'
@@ -14,36 +16,41 @@ import StatesDemoCode from './states.vue?raw'
 import StatesDemo from './states.vue'
 
 const title = 'Button'
-const description = 'Buttons allow users to perform actions and make choices with a single click. They are commonly used for submitting forms, opening dialogs or menus, and executing commands. Buttons can be customized with different styles, sizes, and icons to fit various use cases.'
+const description = 'Clickable controls for primary actions—submit, open dialogs, or run commands. Customize style, size, and icons; group related actions with x-button-group.'
 const components = [XButton, XButtonGroup]
 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: 'Icons',
-  description: '',
+  description: 'Leading, trailing, and icon-only buttons.',
   code: IconsDemoCode,
   component: IconsDemo,
+}, {
+  name: 'Tooltip',
+  description: 'Buttons with hover tooltips.',
+  code: TooltipDemoCode,
+  component: TooltipDemo,
 }, {
   name: 'Size',
-  description: '',
+  description: 'Size options from xs to lg.',
   code: SizeDemoCode,
   component: SizeDemo,
 }, {
   name: 'Button Group',
-  description: '',
+  description: 'Joined buttons sharing a common group layout.',
   code: ButtonGroupDemoCode,
   component: ButtonGroupDemo,
 }, {
   name: 'States',
-  description: '',
+  description: 'Disabled, loading, and other interactive states.',
   code: StatesDemoCode,
   component: StatesDemo,
 }]

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

@@ -0,0 +1,10 @@
+<template>
+  <div class="flex flex-wrap items-center gap-4">
+    <x-button icon="check" tooltip="Save your changes" />
+    <x-button ghost icon="smile" tooltip="More options" />
+    <x-button icon="heart" tooltip="Favorite" tooltip-position="bottom" />
+    <x-button tooltip="Delete this item" tooltip-position="right">
+      Delete
+    </x-button>
+  </div>
+</template>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="grid md:grid-cols-3 gap-4">
     <x-button color="#F46262" light>Custom color</x-button>
-    <x-button color="indigo" light glow>It's glowing</x-button>
+    <x-button color="primary" light glow>It's glowing</x-button>
     <x-button color="pink" outlined light glow>Glow</x-button>
   </div>
 </template>

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

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Card'
-const description = 'Cards are used to display content in an organized manner.'
+const description = 'A bordered content container for grouping related information, media, and actions. Use cards in grids and dashboards when each block should stand alone.'
 const components = [XCard]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Carousel'
-const description = 'A carousel is a rotating set of images.'
+const description = 'A sliding viewport for cycling through images or content panels. Use carousels for galleries and featured items when horizontal space is limited.'
 const components = [XCarousel]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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

@@ -10,26 +10,26 @@ import StatesDemoCode from './states.vue?raw'
 import StatesDemo from './states.vue'
 
 const title = 'Checkbox'
-const description = 'Checkboxes enable users to select one or multiple options from a list. They are ideal for toggling settings or making selections where more than one choice is allowed. Each checkbox can be checked or unchecked independently.'
+const description = 'Multi-select controls for choosing one or more options independently. Use checkboxes for settings and lists where more than one choice can be active.'
 const components = [XCheckbox]
 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, indeterminate, and other interactive states.',
   code: StatesDemoCode,
   component: StatesDemo,
 }]

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

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Container'
-const description = 'Containers provide a flexible layout element for grouping and organizing content. They help structure pages by controlling width, alignment, and spacing, ensuring consistent presentation across different sections.'
+const description = 'Layout wrapper that constrains content width and alignment for consistent page structure. Use containers to center and pad main content across breakpoints.'
 const components = [XContainer]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Datepicker'
-const description = 'The datepicker component is used to select a date or time.'
+const description = 'Date and time picker styled as a wrapper around @vuepic/vue-datepicker. Use it for forms that need calendar or datetime selection with Indielayer look and feel.'
 const components = [XDatepicker]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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

@@ -8,21 +8,21 @@ import VerticalDemoCode from './vertical.vue?raw'
 import VerticalDemo from './vertical.vue'
 
 const title = 'Divider'
-const description = 'Dividers are used to separate content.'
+const description = 'A horizontal or vertical rule that separates sections of content. Use dividers in lists, toolbars, and layouts to create clear visual breaks.'
 const components = [XDivider]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic horizontal divider between content.',
   code: UsageDemoCode,
   component: UsageDemo,
 }, {
   name: 'Label',
-  description: '',
+  description: 'Divider with a centered or inline label.',
   code: LabelDemoCode,
   component: LabelDemo,
 }, {
   name: 'Vertical',
-  description: '',
+  description: 'Vertical divider for side-by-side layouts.',
   code: VerticalDemoCode,
   component: VerticalDemo,
 }]

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

@@ -4,16 +4,16 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Drawer'
-const description = 'Drawers slide in from the edge of the screen to present navigation, options, or additional content without disrupting the main view. They are ideal for menus, filters, or contextual panels.'
+const description = 'Panels that slide in from the screen edge for navigation, filters, or extra content. Use drawers when side context should overlay without leaving the page.'
 const components = [XDrawer]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]
 const back = 'divider'
-const next = 'icon'
+const next = 'empty'
 </script>
 
 <template>

package/docs/pages/component/empty/actions.vue

@@ -0,0 +1,11 @@
+<template>
+  <x-empty
+    title="No results found"
+    description="Try adjusting your filters or search terms."
+  >
+    <template #actions>
+      <x-button color="primary">Clear filters</x-button>
+      <x-button ghost>Learn more</x-button>
+    </template>
+  </x-empty>
+</template>

package/docs/pages/component/empty/bordered.vue

@@ -0,0 +1,7 @@
+<template>
+  <x-empty
+    bordered
+    title="Nothing here"
+    description="This area is empty. Add content to get started."
+  />
+</template>

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { XEmpty } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+import ActionsDemoCode from './actions.vue?raw'
+import ActionsDemo from './actions.vue'
+import BorderedDemoCode from './bordered.vue?raw'
+import BorderedDemo from './bordered.vue'
+
+const title = 'Empty'
+const description = 'Empty states communicate when there is no content to show. Use them in tables, lists, and panels with a title, description, optional icon, and actions.'
+const components = [XEmpty]
+const demos = [{
+  name: 'Usage',
+  description: 'Title, description, and optional icon for empty content.',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Actions',
+  description: 'Empty state with call-to-action buttons.',
+  code: ActionsDemoCode,
+  component: ActionsDemo,
+}, {
+  name: 'Bordered',
+  description: 'Empty state inside a bordered container.',
+  code: BorderedDemoCode,
+  component: BorderedDemo,
+}]
+const back = 'drawer'
+const next = 'icon'
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/empty"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,6 @@
+<template>
+  <x-empty
+    title="No items yet"
+    description="Get started by creating your first item."
+  />
+</template>

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

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Form'
-const description = 'Forms provide a structured way to collect and validate user input, such as text, selections, and files. They support features like validation, grouping, and submission handling, making it easy to build interactive and accessible data entry interfaces.'
+const description = 'Structured form wrapper for collecting and validating user input. Use x-form to group fields, run validation, and handle submit in one place.'
 const components = [XForm]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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

@@ -4,16 +4,16 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'FormGroup'
-const description = 'Form groups organize related form elements together, providing structure and shared validation. They help group checkboxes, radio buttons, or inputs that belong to the same logical section.'
+const description = 'Groups related fields with a shared label and validation context. Use form groups for checkboxes, radios, or inputs that belong to one logical section.'
 const components = [XFormGroup]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   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>