@indielayer/ui 1.16.0 → 1.17.0

package/docs/components/menu/DocsMenu.vue

@@ -69,8 +69,11 @@ const components = [
     collapseIcon: 'chevron-down',
     expanded: true,
     items: [
+      { to: '/component/infiniteLoader', label: 'Infinite Loader' },
       { to: '/component/scroll', label: 'Scroll' },
       { to: '/component/spacer', label: 'Spacer' },
+      { to: '/component/virtualGrid', label: 'Virtual Grid' },
+      { to: '/component/virtualList', label: 'Virtual List' },
     ],
   },
 ]

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

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useInfiniteLoader } from '@indielayer/ui'
+
+// Infinite loader example
+const infiniteItems = ref<string[]>([])
+const hasMoreData = ref(true)
+const isLoading = ref(false)
+const highestLoadedIndex = ref(-1)
+const apiCursor = ref<string | null>(null) // Cursor from last API call
+
+// Track the actual loaded count
+const loadedCount = computed(() => {
+  return infiniteItems.value.filter((item) => item !== undefined).length
+})
+
+const isRowLoaded = (index: number) => {
+  // If loading, pretend ALL rows are loaded to prevent useInfiniteLoader
+  // from marking new rows as pending while a request is in progress
+  if (isLoading.value) {
+    return true
+  }
+
+  // The last row is the loading indicator when we have more data
+  const isLoadingRow = hasMoreData.value && index === infiniteItems.value.length
+
+  if (isLoadingRow) {
+    return false // Not loaded yet, trigger loading
+  }
+
+  return infiniteItems.value[index] !== undefined
+}
+
+// Helper to get item or loading indicator
+const getItem = (index: number) => {
+  // If this is the loading indicator row
+  if (hasMoreData.value && index === infiniteItems.value.length) {
+    return isLoading.value ? '⏳ Loading more...' : '↓ Scroll for more'
+  }
+
+  return infiniteItems.value[index]
+}
+
+const loadMoreRows = async (startIndex: number, stopIndex: number) => {
+  // Block all new requests if one is already in progress
+  if (isLoading.value) {
+    console.log(`[loadMoreRows] Already loading, rejecting request for ${startIndex}-${stopIndex}`)
+
+    return
+  }
+
+  isLoading.value = true
+  const currentLength = infiniteItems.value.length
+
+  console.log(`[loadMoreRows] Loading batch of 50 items, cursor: ${apiCursor.value}, current items: ${currentLength}`)
+
+  try {
+    // Simulate API call with cursor
+    // In real implementation: const response = await fetch(`/api/items?cursor=${apiCursor.value}&limit=50`);
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+
+    // In a real implementation, you'd use the cursor and response data:
+    // const response = await fetch(`/api/items?cursor=${apiCursor.value}&limit=50`);
+    // const { items, nextCursor, hasMore } = await response.json();
+    // apiCursor.value = nextCursor;
+    // hasMoreData.value = hasMore;
+    //
+    // Then append the items from the API:
+    // const newItems = [...infiniteItems.value, ...items];
+    // infiniteItems.value = newItems;
+
+    // Simulate API response: generate 50 items
+    const batchSize = 50
+    const itemsToAdd = []
+
+    for (let i = 0; i < batchSize; i++) {
+      const itemIndex = currentLength + i
+
+      itemsToAdd.push(`Item ${itemIndex + 1}`)
+      if (itemIndex > highestLoadedIndex.value) {
+        highestLoadedIndex.value = itemIndex
+      }
+    }
+
+    // Simulate updating cursor based on response
+    apiCursor.value = `cursor_after_${currentLength + batchSize - 1}`
+
+    // Append all new items at once
+    infiniteItems.value = [...infiniteItems.value, ...itemsToAdd]
+
+    console.log(`[loadMoreRows] Loaded ${batchSize} items, total: ${infiniteItems.value.length}, cursor: ${apiCursor.value}`)
+
+    // Check if we've reached the limit (simulate end of data)
+    if (infiniteItems.value.length >= 500) {
+      hasMoreData.value = false
+      console.log('[loadMoreRows] Reached limit, no more data to load')
+    }
+  } catch (error) {
+    console.error('[loadMoreRows] Error loading items:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const infiniteRowCount = computed(() => {
+  const itemsLength = infiniteItems.value.length
+
+  if (!hasMoreData.value) {
+    // No more data, show only loaded items
+    return itemsLength
+  }
+
+  // Show loaded items + 1 loading indicator row
+  return itemsLength + 1
+})
+
+const { onRowsRendered } = useInfiniteLoader(
+  computed(() => {
+    const rc = infiniteRowCount.value
+
+    console.log(`[useInfiniteLoader] Props updated - rowCount: ${rc}, loaded: ${loadedCount.value}`)
+
+    return {
+      isRowLoaded,
+      loadMoreRows,
+      rowCount: rc,
+      minimumBatchSize: 50, // Load 50 items per batch
+      threshold: 10, // Start loading when within 10 rows of needing data
+    }
+  }),
+)
+
+// Load first batch of items on mount or when switching to infinite tab
+const loadInitialItems = async () => {
+  if (infiniteItems.value.length === 0) {
+    await loadMoreRows(0, 49) // Indices are ignored, always loads 50 items
+  }
+}
+
+onMounted(() => {
+  loadInitialItems()
+})
+</script>
+
+<template>
+  <p class="info">
+    Loaded {{ loadedCount }} of {{ infiniteRowCount }} items
+    <span v-if="isLoading" class="loading"> (Loading...)</span>
+  </p>
+  <x-virtual-list
+    :row-count="infiniteRowCount"
+    :row-height="50"
+    class="h-96 border border-gray-200 rounded-md bg-white"
+    :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 }
+        ]"
+      >
+        {{ getItem(index) }}
+      </div>
+    </template>
+  </x-virtual-list>
+</template>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { XInfiniteLoader } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+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 components = [XInfiniteLoader]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Composable',
+  description: '',
+  code: ComposableDemoCode,
+  component: ComposableDemo,
+}]
+const back = ''
+const next = ''
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/infiniteLoader"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+
+// Infinite loader example
+const infiniteItems = ref<string[]>([])
+const hasMoreData = ref(true)
+const isLoading = ref(false)
+const highestLoadedIndex = ref(-1)
+const apiCursor = ref<string | null>(null) // Cursor from last API call
+
+// Track the actual loaded count
+const loadedCount = computed(() => {
+  return infiniteItems.value.filter((item) => item !== undefined).length
+})
+
+const isRowLoaded = (index: number) => {
+  // If loading, pretend ALL rows are loaded to prevent useInfiniteLoader
+  // from marking new rows as pending while a request is in progress
+  if (isLoading.value) {
+    return true
+  }
+
+  // The last row is the loading indicator when we have more data
+  const isLoadingRow = hasMoreData.value && index === infiniteItems.value.length
+
+  if (isLoadingRow) {
+    return false // Not loaded yet, trigger loading
+  }
+
+  return infiniteItems.value[index] !== undefined
+}
+
+// Helper to get item or loading indicator
+const getItem = (index: number) => {
+  // If this is the loading indicator row
+  if (hasMoreData.value && index === infiniteItems.value.length) {
+    return isLoading.value ? '⏳ Loading more...' : '↓ Scroll for more'
+  }
+
+  return infiniteItems.value[index]
+}
+
+const loadMoreRows = async (startIndex: number, stopIndex: number) => {
+  // Block all new requests if one is already in progress
+  if (isLoading.value) {
+    console.log(`[loadMoreRows] Already loading, rejecting request for ${startIndex}-${stopIndex}`)
+
+    return
+  }
+
+  isLoading.value = true
+  const currentLength = infiniteItems.value.length
+
+  console.log(`[loadMoreRows] Loading batch of 50 items, cursor: ${apiCursor.value}, current items: ${currentLength}`)
+
+  try {
+    // Simulate API call with cursor
+    // In real implementation: const response = await fetch(`/api/items?cursor=${apiCursor.value}&limit=50`);
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+
+    // In a real implementation, you'd use the cursor and response data:
+    // const response = await fetch(`/api/items?cursor=${apiCursor.value}&limit=50`);
+    // const { items, nextCursor, hasMore } = await response.json();
+    // apiCursor.value = nextCursor;
+    // hasMoreData.value = hasMore;
+    //
+    // Then append the items from the API:
+    // const newItems = [...infiniteItems.value, ...items];
+    // infiniteItems.value = newItems;
+
+    // Simulate API response: generate 50 items
+    const batchSize = 50
+    const itemsToAdd = []
+
+    for (let i = 0; i < batchSize; i++) {
+      const itemIndex = currentLength + i
+
+      itemsToAdd.push(`Item ${itemIndex + 1}`)
+      if (itemIndex > highestLoadedIndex.value) {
+        highestLoadedIndex.value = itemIndex
+      }
+    }
+
+    // Simulate updating cursor based on response
+    apiCursor.value = `cursor_after_${currentLength + batchSize - 1}`
+
+    // Append all new items at once
+    infiniteItems.value = [...infiniteItems.value, ...itemsToAdd]
+
+    console.log(`[loadMoreRows] Loaded ${batchSize} items, total: ${infiniteItems.value.length}, cursor: ${apiCursor.value}`)
+
+    // Check if we've reached the limit (simulate end of data)
+    if (infiniteItems.value.length >= 500) {
+      hasMoreData.value = false
+      console.log('[loadMoreRows] Reached limit, no more data to load')
+    }
+  } catch (error) {
+    console.error('[loadMoreRows] Error loading items:', error)
+  } finally {
+    isLoading.value = false
+  }
+}
+
+const infiniteRowCount = computed(() => {
+  const itemsLength = infiniteItems.value.length
+
+  if (!hasMoreData.value) {
+    // No more data, show only loaded items
+    return itemsLength
+  }
+
+  // Show loaded items + 1 loading indicator row
+  return itemsLength + 1
+})
+
+// Load first batch of items on mount or when switching to infinite tab
+const loadInitialItems = async () => {
+  if (infiniteItems.value.length === 0) {
+    await loadMoreRows(0, 49) // Indices are ignored, always loads 50 items
+  }
+}
+
+onMounted(() => {
+  loadInitialItems()
+})
+</script>
+
+<template>
+  <p class="info">
+    Loaded {{ loadedCount }} of {{ infiniteRowCount }} items
+    <span v-if="isLoading" class="loading"> (Loading...)</span>
+  </p>
+  <x-infinite-loader
+    :is-row-loaded="isRowLoaded"
+    :load-more-rows="loadMoreRows"
+    :row-count="infiniteRowCount"
+    :minimum-batch-size="50"
+    :threshold="10"
+  >
+    <template #default="{ onRowsRendered }">
+      <x-virtual-list
+        :row-count="infiniteRowCount"
+        :row-height="50"
+        class="h-96 border border-gray-200 rounded-md bg-white"
+        :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 }
+            ]"
+          >
+            {{ getItem(index) }}
+          </div>
+        </template>
+      </x-virtual-list>
+    </template>
+  </x-infinite-loader>
+</template>

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

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { XVirtualGrid } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+
+const title = 'VirtualGrid'
+const description = 'VirtualGrid is a component that allows you to render a grid of items in a virtualized way. It is a high-performance component that is used to render large grids of items.'
+const components = [XVirtualGrid]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}]
+const back = 'virtualList'
+const next = ''
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/virtualGrid"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const gridRowCount = 1000
+const gridColumnCount = 1000
+</script>
+
+<template>
+  <x-virtual-grid
+    :row-count="gridRowCount"
+    :column-count="gridColumnCount"
+    :row-height="48"
+    :column-width="100"
+    class="h-96 border border-gray-200 rounded-md bg-white w-full"
+  >
+    <template #cell="{ rowIndex, columnIndex, style }">
+      <div :style="style" class="h-12 flex items-center justify-center border border-gray-200">
+        R{{ rowIndex }}, C{{ columnIndex }}
+      </div>
+    </template>
+  </x-virtual-grid>
+</template>

package/docs/pages/component/virtualList/dynamicHeight.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { XVirtualList, useDynamicRowHeight } from '@indielayer/ui'
+
+const loremTexts = [
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+  'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+  'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+  'Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.',
+  'Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.',
+  'Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.',
+  'Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.',
+  'Ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.',
+  'Lorem ipsum dolor sit amet.',
+  'Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.',
+]
+
+const items = Array.from({ length: 1000 }, (_, i) => ({
+  id: i,
+  text: loremTexts[i % loremTexts.length],
+}))
+
+const collapsedRows = ref<Set<number>>(new Set())
+
+const toggleRow = (index: number) => {
+  const newSet = new Set(collapsedRows.value)
+
+  if (newSet.has(index)) {
+    newSet.delete(index)
+  } else {
+    newSet.add(index)
+  }
+  collapsedRows.value = newSet
+}
+
+const isRowCollapsed = (index: number) => {
+  return collapsedRows.value.has(index)
+}
+
+const getText = (index: number) => {
+  return items[index].text
+}
+
+const rowHeight = useDynamicRowHeight({
+  defaultRowHeight: 50,
+})
+</script>
+
+<template>
+  <x-virtual-list
+    :row-count="items.length"
+    :row-height="rowHeight"
+    style="height: 500px; border: 1px solid #ccc;"
+  >
+    <template #row="{ index, style }">
+      <div
+        :style="style"
+        :class="[
+          'flex items-start py-3 px-4 border-b border-gray-200 cursor-pointer transition-colors gap-2',
+          index % 2 === 0 ? 'bg-white' : 'bg-gray-50',
+          'hover:bg-gray-200',
+          isRowCollapsed(index) ? 'whitespace-nowrap overflow-hidden text-ellipsis' : ''
+        ]"
+        @click="toggleRow(index)"
+      >
+        <span class="flex-shrink-0 w-6 h-6 inline-flex items-center justify-center text-sm">
+          {{ isRowCollapsed(index) ? '➕' : '➖' }}
+        </span>
+        <span class="flex-1 leading-normal">
+          <strong class="text-gray-700 mr-2">{{ index }}:</strong>{{ getText(index) }}
+        </span>
+      </div>
+    </template>
+  </x-virtual-list>
+</template>

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { XVirtualList } from '@indielayer/ui'
+import UsageDemoCode from './usage.vue?raw'
+import UsageDemo from './usage.vue'
+import DynamicHeightDemoCode from './dynamicHeight.vue?raw'
+import DynamicHeightDemo from './dynamicHeight.vue'
+
+const title = 'VirtualList'
+const description = 'VirtualList is a component that allows you to render a list of items in a virtualized way. It is a high-performance component that is used to render large lists of items.'
+const components = [XVirtualList]
+const demos = [{
+  name: 'Usage',
+  description: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Dynamic Height',
+  description: '',
+  code: DynamicHeightDemoCode,
+  component: DynamicHeightDemo,
+}]
+const back = ''
+const next = ''
+</script>
+
+<template>
+  <document-page
+    github="https://github.com/indielayer/ui/blob/main/packages/ui/docs/pages/component/virtualList"
+    :title="title"
+    :description="description"
+    :components="components"
+    :demos="demos"
+    :back="back"
+    :next="next"
+  />
+</template>

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

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+const listItems = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`)
+</script>
+
+<template>
+  <x-virtual-list
+    :row-count="listItems.length"
+    :row-height="48"
+    class="h-96 border border-gray-200 rounded-md bg-white"
+  >
+    <template #row="{ index, style }">
+      <div :style="style" class="h-12 flex items-center justify-center border-b border-gray-200">
+        {{ listItems[index] }}
+      </div>
+    </template>
+  </x-virtual-list>
+</template>

package/docs/search/components.json

@@ -1 +1 @@
-[{"name":"Accordion","description":"Accordion is a component that allows you to collapse and expand content.","url":"/component/accordion"},{"name":"Alert","description":"Alerts are used to communicate a state that affects a system, feature or page.","url":"/component/alert"},{"name":"Avatar","description":"Avatars are used to represent a user.","url":"/component/avatar"},{"name":"Badge","description":"Badges are used to display a small amount of information.","url":"/component/badge"},{"name":"Breadcrumbs","description":"Breadcrumbs are used to indicate the current page\\","url":"/component/breadcrumbs"},{"name":"Button","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.","url":"/component/button"},{"name":"Card","description":"Cards are used to display content in an organized manner.","url":"/component/card"},{"name":"Carousel","description":"A carousel is a rotating set of images.","url":"/component/carousel"},{"name":"Checkbox","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.","url":"/component/checkbox"},{"name":"Container","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.","url":"/component/container"},{"name":"Datepicker","description":"The datepicker component is used to select a date or time.","url":"/component/datepicker"},{"name":"Divider","description":"Dividers are used to separate content.","url":"/component/divider"},{"name":"Drawer","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.","url":"/component/drawer"},{"name":"Form","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.","url":"/component/form"},{"name":"FormGroup","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.","url":"/component/formGroup"},{"name":"Icon","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.","url":"/component/icon"},{"name":"Image","description":"Image is used to load an image file with a skeleton as placeholder and on load display the image.","url":"/component/image"},{"name":"Input","description":"This is a text input component that allows users to enter and edit text.","url":"/component/input"},{"name":"Link","description":"Links are used to navigate to a different page.","url":"/component/link"},{"name":"Loader","description":"Loader component is used to show a loading state.","url":"/component/loader"},{"name":"Menu","description":"Menus are used to display a list of options.","url":"/component/menu"},{"name":"Modal","description":"Modals are used to display content on top of the current page.","url":"/component/modal"},{"name":"Notifications","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.","url":"/component/notifications"},{"name":"Pagination","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.","url":"/component/pagination"},{"name":"Popover","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.","url":"/component/popover"},{"name":"Progress","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.","url":"/component/progress"},{"name":"QR Code","description":"The QR Code component is used to generate a QR code.","url":"/component/qrCode"},{"name":"Radio","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.","url":"/component/radio"},{"name":"Scroll","description":"The Scroll component enhances scrolling experiences by adding visual cues, such as inner shadows, to indicate additional content. It is useful for horizontally or vertically scrolling lists and containers.","url":"/component/scroll"},{"name":"Select","description":"Selects allow the user to select one or more options from a set.","url":"/component/select"},{"name":"Skeleton","description":"Skeletons provide placeholder elements that mimic the layout of content while data is loading. They improve perceived performance by giving users a visual cue that content is being fetched.","url":"/component/skeleton"},{"name":"Slider","description":"Sliders allow users to select a numeric value or range by dragging a handle along a track. They are ideal for adjusting settings such as volume, brightness, or price filters.","url":"/component/slider"},{"name":"Spacer","description":"Spacers create adjustable gaps between elements within flex layouts, helping to control spacing and alignment without using margin or padding directly.","url":"/component/spacer"},{"name":"Spinner","description":"Spinners visually indicate that a background process or operation is ongoing, such as loading data or submitting a form. They help manage user expectations by signaling that the system is working.","url":"/component/spinner"},{"name":"Stepper","description":"Stepper is a navigation component that guides users through the steps of a task.","url":"/component/stepper"},{"name":"Table","description":"Tables are used to display data in a tabular format.","url":"/component/table"},{"name":"Tabs","description":"Tabs are used to navigate through a set of views.","url":"/component/tabs"},{"name":"Tag","description":"Tags are compact elements used to display brief information, such as categories, statuses, or labels. They help organize content and provide quick context or filtering options within lists and interfaces.","url":"/component/tag"},{"name":"Textarea","description":"Textareas provide a multi-line input field for users to enter longer text, such as comments, descriptions, or messages. They support resizing and can be customized for different use cases.","url":"/component/textarea"},{"name":"Toggle","description":"Toggles provide a simple switch interface for enabling or disabling a setting, or switching between two mutually exclusive states. They are ideal for binary options such as on/off, active/inactive, or show/hide.","url":"/component/toggle"},{"name":"Tooltip","description":"Tooltips are used to display a message when hovering over an element.","url":"/component/tooltip"},{"name":"Upload","description":"Upload is a component that allows you to upload files.","url":"/component/upload"}]
+[{"name":"Accordion","description":"Accordion is a component that allows you to collapse and expand content.","url":"/component/accordion"},{"name":"Alert","description":"Alerts are used to communicate a state that affects a system, feature or page.","url":"/component/alert"},{"name":"Avatar","description":"Avatars are used to represent a user.","url":"/component/avatar"},{"name":"Badge","description":"Badges are used to display a small amount of information.","url":"/component/badge"},{"name":"Breadcrumbs","description":"Breadcrumbs are used to indicate the current page\\","url":"/component/breadcrumbs"},{"name":"Button","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.","url":"/component/button"},{"name":"Card","description":"Cards are used to display content in an organized manner.","url":"/component/card"},{"name":"Carousel","description":"A carousel is a rotating set of images.","url":"/component/carousel"},{"name":"Checkbox","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.","url":"/component/checkbox"},{"name":"Container","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.","url":"/component/container"},{"name":"Datepicker","description":"The datepicker component is used to select a date or time.","url":"/component/datepicker"},{"name":"Divider","description":"Dividers are used to separate content.","url":"/component/divider"},{"name":"Drawer","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.","url":"/component/drawer"},{"name":"Form","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.","url":"/component/form"},{"name":"FormGroup","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.","url":"/component/formGroup"},{"name":"Icon","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.","url":"/component/icon"},{"name":"Image","description":"Image is used to load an image file with a skeleton as placeholder and on load display the image.","url":"/component/image"},{"name":"InfiniteLoader","description":"InfiniteLoader is a component that allows you to load data on demand as users scroll through a list.","url":"/component/infiniteLoader"},{"name":"Input","description":"This is a text input component that allows users to enter and edit text.","url":"/component/input"},{"name":"Link","description":"Links are used to navigate to a different page.","url":"/component/link"},{"name":"Loader","description":"Loader component is used to show a loading state.","url":"/component/loader"},{"name":"Menu","description":"Menus are used to display a list of options.","url":"/component/menu"},{"name":"Modal","description":"Modals are used to display content on top of the current page.","url":"/component/modal"},{"name":"Notifications","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.","url":"/component/notifications"},{"name":"Pagination","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.","url":"/component/pagination"},{"name":"Popover","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.","url":"/component/popover"},{"name":"Progress","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.","url":"/component/progress"},{"name":"QR Code","description":"The QR Code component is used to generate a QR code.","url":"/component/qrCode"},{"name":"Radio","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.","url":"/component/radio"},{"name":"Scroll","description":"The Scroll component enhances scrolling experiences by adding visual cues, such as inner shadows, to indicate additional content. It is useful for horizontally or vertically scrolling lists and containers.","url":"/component/scroll"},{"name":"Select","description":"Selects allow the user to select one or more options from a set.","url":"/component/select"},{"name":"Skeleton","description":"Skeletons provide placeholder elements that mimic the layout of content while data is loading. They improve perceived performance by giving users a visual cue that content is being fetched.","url":"/component/skeleton"},{"name":"Slider","description":"Sliders allow users to select a numeric value or range by dragging a handle along a track. They are ideal for adjusting settings such as volume, brightness, or price filters.","url":"/component/slider"},{"name":"Spacer","description":"Spacers create adjustable gaps between elements within flex layouts, helping to control spacing and alignment without using margin or padding directly.","url":"/component/spacer"},{"name":"Spinner","description":"Spinners visually indicate that a background process or operation is ongoing, such as loading data or submitting a form. They help manage user expectations by signaling that the system is working.","url":"/component/spinner"},{"name":"Stepper","description":"Stepper is a navigation component that guides users through the steps of a task.","url":"/component/stepper"},{"name":"Table","description":"Tables are used to display data in a tabular format.","url":"/component/table"},{"name":"Tabs","description":"Tabs are used to navigate through a set of views.","url":"/component/tabs"},{"name":"Tag","description":"Tags are compact elements used to display brief information, such as categories, statuses, or labels. They help organize content and provide quick context or filtering options within lists and interfaces.","url":"/component/tag"},{"name":"Textarea","description":"Textareas provide a multi-line input field for users to enter longer text, such as comments, descriptions, or messages. They support resizing and can be customized for different use cases.","url":"/component/textarea"},{"name":"Toggle","description":"Toggles provide a simple switch interface for enabling or disabling a setting, or switching between two mutually exclusive states. They are ideal for binary options such as on/off, active/inactive, or show/hide.","url":"/component/toggle"},{"name":"Tooltip","description":"Tooltips are used to display a message when hovering over an element.","url":"/component/tooltip"},{"name":"Upload","description":"Upload is a component that allows you to upload files.","url":"/component/upload"},{"name":"VirtualGrid","description":"VirtualGrid is a component that allows you to render a grid of items in a virtualized way. It is a high-performance component that is used to render large grids of items.","url":"/component/virtualGrid"},{"name":"VirtualList","description":"VirtualList is a component that allows you to render a list of items in a virtualized way. It is a high-performance component that is used to render large lists of items.","url":"/component/virtualList"}]