@indielayer/ui 2.0.0 → 2.1.0

package/docs/main.ts

@@ -1,8 +1,7 @@
-import { createApp } from 'vue'
-import { createHead } from '@unhead/vue/client'
+import { ViteSSG } from 'vite-ssg'
 import UI, { BaseTheme } from '@indielayer/ui'
 import App from './App.vue'
-import router from './router'
+import { routes, scrollBehavior } from './router'
 import icons from './icons'
 
 // global components
@@ -12,32 +11,32 @@ import MultiSnippet from './components/common/MultiSnippet.vue'
 import CodePreview from './components/common/CodePreview.vue'
 import DocumentPage from './components/common/DocumentPage.vue'
 import DocsHero from './components/common/DocsHero.vue'
+import DocsCopyPage from './components/common/DocsCopyPage.vue'
 
 // css
 import './assets/css/tailwind.css'
 
-const app = createApp(App)
-const head = createHead()
-
-app.use(head)
-app.use(UI, {
-  prefix: 'X',
-  icons,
-  theme: BaseTheme,
-  defaults: {
-    // Empty: {
-    //   bordered: true,
-    // },
+export const createApp = ViteSSG(
+  App,
+  {
+    routes,
+    scrollBehavior,
+    base: import.meta.env.BASE_URL,
   },
-})
-
-app.use(router)
+  ({ app }) => {
+    app.use(UI, {
+      prefix: 'X',
+      icons,
+      theme: BaseTheme,
+      defaults: {},
+    })
 
-app.component('CopyButton', CopyButton)
-app.component('CodeSnippet', CodeSnippet)
-app.component('MultiSnippet', MultiSnippet)
-app.component('CodePreview', CodePreview)
-app.component('DocumentPage', DocumentPage)
-app.component('DocsHero', DocsHero)
-
-app.mount('#app')
+    app.component('CopyButton', CopyButton)
+    app.component('CodeSnippet', CodeSnippet)
+    app.component('MultiSnippet', MultiSnippet)
+    app.component('CodePreview', CodePreview)
+    app.component('DocumentPage', DocumentPage)
+    app.component('DocsHero', DocsHero)
+    app.component('DocsCopyPage', DocsCopyPage)
+  },
+)

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

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Accordion'
-const description = 'Accordion is a component that allows you to collapse and expand content.'
+const description = 'Collapsible panels for showing and hiding related content. Use x-accordion with x-accordion-item when space is limited and users need progressive disclosure.'
 const components = [XAccordion, XAccordionItem]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Alert'
-const description = 'Alerts are used to communicate a state that affects a system, feature or page.'
+const description = 'Inline notices for system, feature, or page status—success, warning, error, or info. Use alerts when the message should stay visible until addressed.'
 const components = [XAlert]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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

@@ -8,21 +8,21 @@ import SizeDemoCode from './size.vue?raw'
 import SizeDemo from './size.vue'
 
 const title = 'Avatar'
-const description = 'Avatars are used to represent a user.'
+const description = 'Displays a user\'s photo, initials, or icon in a compact frame. Use avatars in lists, headers, and comments to identify people at a glance.'
 const components = [XAvatar]
 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,
 }]

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

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Badge'
-const description = 'Badges are used to display a small amount of information.'
+const description = 'Small status indicators that overlay or sit beside another element—counts, labels, or presence dots. Use badges to draw attention without interrupting the layout.'
 const components = [XBadge]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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

@@ -4,11 +4,11 @@ import UsageDemoCode from './usage.vue?raw'
 import UsageDemo from './usage.vue'
 
 const title = 'Breadcrumbs'
-const description = 'Breadcrumbs are used to indicate the current page\'s location within a navigational hierarchy.'
+const description = 'Shows the current page\'s place in a navigational hierarchy. Use breadcrumbs for deep page trees so users can jump back to parent sections.'
 const components = [XBreadcrumbs]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }]

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

@@ -10,9 +10,9 @@
       <x-button>right</x-button>
     </x-button-group>
     <x-button-group color="primary" light outlined>
-      <x-button icon="edit"/>
-      <x-button icon="code"/>
-      <x-button icon="smile"/>
+      <x-button icon="edit" tooltip="Edit" />
+      <x-button icon="code" tooltip="Code" />
+      <x-button icon="smile" tooltip="Smile" />
     </x-button-group>
     <x-button-group color="indigo" outlined disabled>
       <x-button>left</x-button>

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/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,11 +4,11 @@ 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,
 }]

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

@@ -12,17 +12,17 @@ const description = 'Empty states communicate when there is no content to show.
 const components = [XEmpty]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Title, description, and optional icon for empty content.',
   code: UsageDemoCode,
   component: UsageDemo,
 }, {
   name: 'Actions',
-  description: '',
+  description: 'Empty state with call-to-action buttons.',
   code: ActionsDemoCode,
   component: ActionsDemo,
 }, {
   name: 'Bordered',
-  description: '',
+  description: 'Empty state inside a bordered container.',
   code: BorderedDemoCode,
   component: BorderedDemo,
 }]

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

@@ -4,11 +4,11 @@ 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,
 }]

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

@@ -10,26 +10,26 @@ 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,
 }]

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

@@ -12,17 +12,17 @@ const description = 'Input groups combine multiple inline fields (Input, Textare
 const components = [XInputGroup]
 const demos = [{
   name: 'Usage',
-  description: '',
+  description: 'Basic example with common props.',
   code: UsageDemoCode,
   component: UsageDemo,
 }, {
   name: 'Mixed',
-  description: '',
+  description: 'Mixing inputs, selects, and buttons in one group.',
   code: MixedDemoCode,
   component: MixedDemo,
 }, {
   name: 'Validation',
-  description: '',
+  description: 'Shared validation and footer messaging.',
   code: ValidationDemoCode,
   component: ValidationDemo,
 }]

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

@@ -23,7 +23,12 @@ const rules = {
         helper="Select date and time"
         :rules="[rules.required]"
       >
-        <x-datepicker v-model="start" placeholder="Date" :enable-time-picker="false" />
+        <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>

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,
 }]