@indielayer/ui 1.18.0 → 2.0.0

package/docs/assets/css/hljs.css

@@ -1,4 +1,3 @@
-/* stylelint-disable */
 .hljs {
   display: block;
   overflow-x: auto;

package/docs/assets/css/tailwind.css

@@ -2,15 +2,18 @@
 @import url("https://1.www.s81c.com/common/carbon/plex/sans.css");
 @import url("https://1.www.s81c.com/common/carbon/plex/mono.css");
 
+@import "tailwindcss";
+@import "../../../exports/tailwind.css";
+
+@source "../../../index.html";
+@source "../../**/*.{vue,js,ts,jsx,tsx}";
+@source "../../../src/**/*.{vue,js,ts,jsx,tsx}";
+
 html,
 body {
   height: 100%;
 }
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 @layer base {
   .text-2xs {
     font-size: 0.625rem;
@@ -18,29 +21,51 @@ body {
   }
 
   .text-h1 {
-    @apply text-5xl font-black;
+    font-size: var(--text-5xl);
+    line-height: var(--text-5xl--line-height);
+    font-weight: 900;
   }
 
   .text-h2 {
-    @apply text-4xl font-black;
+    font-size: var(--text-4xl);
+    line-height: var(--text-4xl--line-height);
+    font-weight: 900;
   }
 
   .text-h3 {
-    @apply text-2xl font-black;
+    font-size: var(--text-2xl);
+    line-height: var(--text-2xl--line-height);
+    font-weight: 900;
   }
 
   .text-h4 {
-    @apply text-xl font-black;
+    font-size: var(--text-xl);
+    line-height: var(--text-xl--line-height);
+    font-weight: 900;
   }
 
   .text-overline {
-    @apply tracking-widest uppercase text-2xs;
+    letter-spacing: var(--tracking-widest);
+    text-transform: uppercase;
+    font-size: 0.625rem;
+    line-height: 1rem;
   }
 }
 
 @layer components {
   .docs-container {
-    @apply max-w-screen-2xl mx-auto w-full px-4 md:px-8 mt-8 md:mt-16;
+    max-width: var(--breakpoint-2xl);
+    margin-inline: auto;
+    width: 100%;
+    padding-inline: 1rem;
+    margin-top: 2rem;
+  }
+
+  @media (width >= 48rem) {
+    .docs-container {
+      padding-inline: 2rem;
+      margin-top: 4rem;
+    }
   }
 }
 

package/docs/components/common/CodePreview.vue

@@ -72,7 +72,7 @@ async function copy(text?: string) {
         <template #tooltip>{{ expandedSync ? 'Hide' : 'Show' }} code</template>
       </x-tooltip>
     </h2>
-    <p>{{ description }}</p>
+    <p v-if="description" class="capitalize text-secondary-500 dark:text-secondary-400 mb-4">{{ description }}</p>
     <slot></slot>
     <x-accordion-item ref="codeRef" :expanded="expanded" :show-icon="false">
       <template #content>

package/docs/components/common/CodeSnippet.vue

@@ -1,12 +1,6 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
-import { createHighlighter } from 'shiki'
-import indielayerTheme from './Indielayer-theme.json'
-
-const highlighter = createHighlighter({
-  langs: ['js', 'ts', 'vue-html', 'bash', 'vue'],
-  themes: [indielayerTheme as any],
-})
+import { ref, watch } from 'vue'
+import { docsHighlighter, INDIELAYER_THEME } from '../../utils/shikiHighlighter'
 
 const props = defineProps({
   code: String,
@@ -22,27 +16,45 @@ const props = defineProps({
 
 const highlighted = ref('')
 
-onMounted(async () => {
-  await (await highlighter).loadTheme(indielayerTheme as any)
-  highlighted.value = (await highlighter).codeToHtml(props.code || '', { lang: props.lang, theme: 'Indielayer' })
-})
+async function updateHighlight() {
+  const highlighter = await docsHighlighter
+
+  highlighted.value = highlighter.codeToHtml(props.code ?? '', {
+    lang: props.lang,
+    theme: INDIELAYER_THEME,
+  })
+}
+
+watch(
+  () => [props.code, props.lang] as const,
+  updateHighlight,
+  { immediate: true },
+)
 </script>
 
 <template>
   <div class="relative">
     <div v-html="highlighted"></div>
-    <copy-button v-if="showCopyButton" class="!absolute top-2 right-2" :text="code"/>
+    <copy-button v-if="showCopyButton" class="absolute! top-2 right-2" :text="code"/>
   </div>
 </template>
 
-<style lang="postcss">
+<style>
 .shiki {
-  @apply rounded-md overflow-x-auto p-4 text-sm;
+  border-radius: var(--radius-md);
+  font-size: var(--text-sm);
+  line-height: var(--text-sm--line-height);
+  overflow-x: auto;
+  padding: 1rem;
+}
 
-  code { font-family: "Fira Code", monospace; }
+.shiki code {
+  font-family: "Fira Code", monospace;
+}
 
-  @supports (font-variation-settings: normal) {
-    code { font-family: "Fira Code VF", monospace; }
+@supports (font-variation-settings: normal) {
+  .shiki code {
+    font-family: "Fira Code VF", monospace;
   }
 }
 </style>

package/docs/components/common/DocsHero.vue

@@ -90,7 +90,7 @@ function scrollToInstallation() {
             width="52"
             height="49"
             alt=""
-            class="shrink-0 drop-shadow-sm"
+            class="shrink-0 drop-shadow-xs"
           />
           <div>
             <div class="flex items-center gap-2 flex-wrap">
@@ -141,7 +141,7 @@ function scrollToInstallation() {
           <x-tag size="sm" outlined rounded>{{ componentCount }}+ components</x-tag>
           <x-tag size="sm" outlined rounded>Vue 3</x-tag>
           <x-tag size="sm" outlined rounded>Nuxt 3</x-tag>
-          <x-tag size="sm" outlined rounded>Tailwind CSS 3</x-tag>
+          <x-tag size="sm" outlined rounded>Tailwind CSS 4</x-tag>
         </div>
       </div>
 
@@ -166,7 +166,7 @@ function scrollToInstallation() {
   </section>
 </template>
 
-<style lang="postcss" scoped>
+<style scoped>
 .docs-hero {
   background: radial-gradient(50% 100% at 25% 100%, #f8fafc 0%, rgb(248 250 252 / 0%) 100%);
 }

package/docs/components/common/DocumentPage.vue

@@ -211,32 +211,34 @@ const nextTo = computed(() => (props.next ? `/component/${props.next}` : null))
   </div>
 </template>
 
-<style lang="postcss">
-.document-page {
-  h1,
-  h2,
-  h3 {
-    position: relative;
-  }
-
-  h2 {
-    @apply text-xl font-semibold mb-4 mt-8;
-  }
-
-  h1 .anchor,
-  h2 .anchor,
-  h3 .anchor {
-    position: absolute;
-    left: -24px;
-    width: 30px;
-    display: none;
-    color: #96a1b3 !important;
-  }
-
-  h1:hover .anchor,
-  h2:hover .anchor,
-  h3:hover .anchor {
-    display: block;
-  }
+<style>
+.document-page h1,
+.document-page h2,
+.document-page h3 {
+  position: relative;
+}
+
+.document-page h2 {
+  font-size: var(--text-xl);
+  font-weight: 600;
+  line-height: var(--text-xl--line-height);
+  margin-bottom: 1rem;
+  margin-top: 2rem;
+}
+
+.document-page h1 .anchor,
+.document-page h2 .anchor,
+.document-page h3 .anchor {
+  position: absolute;
+  left: -24px;
+  width: 30px;
+  display: none;
+  color: #96a1b3 !important;
+}
+
+.document-page h1:hover .anchor,
+.document-page h2:hover .anchor,
+.document-page h3:hover .anchor {
+  display: block;
 }
 </style>

package/docs/components/common/ExampleBlocks.vue

@@ -1,6 +1,31 @@
 <script setup lang="ts">
 import { onBeforeUnmount, ref } from 'vue'
 
+/** Generic silhouette placeholder (no external image). */
+const exampleAvatar =
+  'data:image/svg+xml,' + encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" role="img" aria-label="Placeholder avatar">'
+    + '<rect width="80" height="80" fill="#0f766e"/>'
+    + '<circle cx="40" cy="28" r="14" fill="#ccfbf1"/>'
+    + '<ellipse cx="40" cy="88" rx="32" ry="36" fill="#ccfbf1"/>'
+    + '</svg>',
+  )
+
+const TRACKS = [
+  { title: 'Neon Gridlock', artist: 'VOIDRUNNER' },
+  { title: 'Pulsewidth 303', artist: 'KryoTek Unit' },
+  { title: 'Sub-Basement FM', artist: 'Driftvector' },
+  { title: 'Chrome & Concrete', artist: 'Null Sector' },
+  { title: '4AM Warehouse', artist: 'Phase-Locked Loop' },
+  { title: 'Resonant Cage', artist: 'Hexaflux' },
+  { title: 'Dry Ice Protocol', artist: 'Tin Manifold' },
+  { title: 'BPM 128 (Locked)', artist: 'Cyanline' },
+  { title: 'Ghost in the Mixer', artist: 'Modul_8' },
+  { title: 'Afterhours Telemetry', artist: 'NØVA CACHE' },
+] as const
+
+const nowPlaying = ref(TRACKS[Math.floor(Math.random() * TRACKS.length)]!)
+
 const selected = ref('A')
 const options = [{
   value: 'A',
@@ -16,15 +41,123 @@ const password = ref('')
 const slider = ref(80)
 const isPlaying = ref(false)
 let interval: ReturnType<typeof setInterval> | null = null
+let audioContext: AudioContext | null = null
+let masterGain: GainNode | null = null
+let sequencerStep = 0
+
+const BPM = 128
+const STEPS_PER_BAR = 16
+const KICK_PATTERN = [1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0]
+const HAT_PATTERN = [0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0]
+const BASS_PATTERN = [0, 7, 0, 10, 0, 7, 0, 5, 0, 7, 0, 10, 0, 7, 0, 3]
+
+function ensureAudioEngine() {
+  if (audioContext) return
+  const Context = window.AudioContext || (window as Window & { webkitAudioContext?: typeof AudioContext; }).webkitAudioContext
+
+  if (!Context) return
+
+  audioContext = new Context()
+  masterGain = audioContext.createGain()
+  masterGain.gain.value = 0.2
+  masterGain.connect(audioContext.destination)
+}
+
+function triggerKick(time: number) {
+  if (!audioContext || !masterGain) return
+  const osc = audioContext.createOscillator()
+  const gain = audioContext.createGain()
+
+  osc.type = 'sine'
+  osc.frequency.setValueAtTime(140, time)
+  osc.frequency.exponentialRampToValueAtTime(48, time + 0.12)
+  gain.gain.setValueAtTime(0.001, time)
+  gain.gain.exponentialRampToValueAtTime(0.9, time + 0.01)
+  gain.gain.exponentialRampToValueAtTime(0.001, time + 0.12)
+  osc.connect(gain).connect(masterGain)
+  osc.start(time)
+  osc.stop(time + 0.13)
+}
+
+function triggerHat(time: number) {
+  if (!audioContext || !masterGain) return
+  const bufferSize = Math.floor(audioContext.sampleRate * 0.03)
+  const buffer = audioContext.createBuffer(1, bufferSize, audioContext.sampleRate)
+  const channel = buffer.getChannelData(0)
+
+  for (let i = 0; i < bufferSize; i += 1) {
+    channel[i] = (Math.random() * 2 - 1) * (1 - i / bufferSize)
+  }
 
-function togglePlayer() {
+  const source = audioContext.createBufferSource()
+  const bandPass = audioContext.createBiquadFilter()
+  const gain = audioContext.createGain()
+
+  source.buffer = buffer
+  bandPass.type = 'highpass'
+  bandPass.frequency.value = 7000
+  gain.gain.setValueAtTime(0.001, time)
+  gain.gain.exponentialRampToValueAtTime(0.2, time + 0.004)
+  gain.gain.exponentialRampToValueAtTime(0.001, time + 0.03)
+  source.connect(bandPass).connect(gain).connect(masterGain)
+  source.start(time)
+  source.stop(time + 0.035)
+}
+
+function triggerBass(time: number, semitone: number) {
+  if (!audioContext || !masterGain) return
+  const osc = audioContext.createOscillator()
+  const filter = audioContext.createBiquadFilter()
+  const gain = audioContext.createGain()
+  const baseHz = 55
+  const frequency = baseHz * 2 ** (semitone / 12)
+
+  osc.type = 'sawtooth'
+  osc.frequency.setValueAtTime(frequency, time)
+  filter.type = 'lowpass'
+  filter.frequency.setValueAtTime(220, time)
+  filter.Q.value = 5
+  gain.gain.setValueAtTime(0.001, time)
+  gain.gain.exponentialRampToValueAtTime(0.22, time + 0.01)
+  gain.gain.exponentialRampToValueAtTime(0.001, time + 0.18)
+  osc.connect(filter).connect(gain).connect(masterGain)
+  osc.start(time)
+  osc.stop(time + 0.2)
+}
+
+function tickSequencer() {
+  if (!audioContext) return
+  const step = sequencerStep % STEPS_PER_BAR
+  const now = audioContext.currentTime
+  const hitTime = now + 0.01
+
+  if (KICK_PATTERN[step]) triggerKick(hitTime)
+  if (HAT_PATTERN[step]) triggerHat(hitTime)
+  const bassNote = BASS_PATTERN[step]
+
+  if (bassNote > 0) triggerBass(hitTime, bassNote)
+
+  slider.value = (slider.value + 1) % 100
+  sequencerStep += 1
+}
+
+async function togglePlayer() {
   if (isPlaying.value) {
     if (interval) clearInterval(interval)
     interval = null
+    masterGain?.gain.cancelScheduledValues(0)
+    masterGain?.gain.setTargetAtTime(0.0001, audioContext?.currentTime ?? 0, 0.02)
   } else {
-    interval = setInterval(() => {
-      slider.value += 1
-    }, 1000)
+    ensureAudioEngine()
+    if (!audioContext || !masterGain) return
+    if (audioContext.state === 'suspended') {
+      await audioContext.resume()
+    }
+    masterGain.gain.cancelScheduledValues(audioContext.currentTime)
+    masterGain.gain.setTargetAtTime(0.2, audioContext.currentTime, 0.03)
+    const stepMs = ((60 / BPM) / 4) * 1000
+
+    interval = setInterval(tickSequencer, stepMs)
   }
 
   isPlaying.value = !isPlaying.value
@@ -32,6 +165,12 @@ function togglePlayer() {
 
 onBeforeUnmount(() => {
   if (interval) clearInterval(interval)
+  interval = null
+  if (audioContext) {
+    void audioContext.close()
+    audioContext = null
+    masterGain = null
+  }
 })
 </script>
 
@@ -57,7 +196,7 @@ onBeforeUnmount(() => {
       </div>
       <x-card class="p-4 flex items-center mt-4">
         <x-badge outlined position="bottom">
-          <x-avatar image="https://avatars.githubusercontent.com/u/3942799?v=4" rounded/>
+          <x-avatar :image="exampleAvatar" rounded/>
         </x-badge>
         <div class="ml-4">
           <div class="font-bold">John Smith</div>
@@ -78,10 +217,10 @@ onBeforeUnmount(() => {
       </div>
       <x-card flat class="border mt-4">
         <div class="p-2 flex items-center">
-          <x-avatar image="https://avatars.githubusercontent.com/u/3942799?v=4" size="lg"/>
+          <x-avatar :image="exampleAvatar" size="lg"/>
           <div class="ml-4">
-            <div class="font-bold">Holding back</div>
-            <div class="text-gray-400 text-sm">BANKS</div>
+            <div class="font-bold">{{ nowPlaying.title }}</div>
+            <div class="text-gray-400 text-sm">{{ nowPlaying.artist }}</div>
           </div>
         </div>
         <x-divider/>

package/docs/components/menu/DocsMenu.vue

@@ -18,6 +18,7 @@ const components = [
       { to: '/component/datepicker', label: 'Datepicker' },
       { to: '/component/form', label: 'Form' },
       { to: '/component/formGroup', label: 'Form Group' },
+      { to: '/component/inputGroup', label: 'Input Group' },
       { to: '/component/input', label: 'Input' },
       { to: '/component/radio', label: 'Radio' },
       { to: '/component/select', label: 'Select' },
@@ -40,9 +41,9 @@ const components = [
       { to: '/component/breadcrumbs', label: 'Breadcrumbs' },
       { to: '/component/card', label: 'Card' },
       { to: '/component/carousel', label: 'Carousel' },
-      { to: '/component/container', label: 'Container' },
       { to: '/component/divider', label: 'Divider' },
       { to: '/component/drawer', label: 'Drawer' },
+      { to: '/component/empty', label: 'Empty' },
       { to: '/component/icon', label: 'Icon' },
       { to: '/component/image', label: 'Image' },
       { to: '/component/loader', label: 'Loader' },
@@ -69,6 +70,7 @@ const components = [
     collapseIcon: 'chevron-down',
     expanded: true,
     items: [
+      { to: '/component/container', label: 'Container' },
       { to: '/component/infiniteLoader', label: 'Infinite Loader' },
       { to: '/component/scroll', label: 'Scroll' },
       { to: '/component/spacer', label: 'Spacer' },

package/docs/components/toolbar/PreToolbar.vue

@@ -7,7 +7,7 @@ import ToolbarColorToggle from './ToolbarColorToggle.vue'
     <div class="flex justify-items-center items-center py-2 text-slate-500 dark:text-slate-300 h-10 text-sm">
       <toolbar-color-toggle class="shrink-0" />
       <p class="text-secondary-300 font-semibold mx-2 truncate">
-        Indielayer UI - Vue.js 3 / Nuxt.js 3 UI Library with Tailwind CSS 3. ⚡️ &nbsp;Build and prototype fast web applications.
+        Indielayer UI - Vue.js 3 / Nuxt.js 3 UI Library with Tailwind CSS 4. ⚡️ &nbsp;Build and prototype fast web applications.
       </p>
       <x-spacer/>
       <a target="_blank" class="shrink-0" href="https://github.com/indielayer"><x-icon size="sm" icon="github"/></a>

package/docs/components/toolbar/Toolbar.vue

@@ -65,7 +65,7 @@ const isDev = import.meta.env.DEV
   </x-container>
 </template>
 
-<style lang="postcss">
+<style>
 .logo-white {
   display: none;
 }

package/docs/components/toolbar/ToolbarColorToggle.vue

@@ -41,7 +41,7 @@ function updateMode() {
 <template>
   <x-button
     ghost
-    size="sm"
+    size="xs"
     class="-ml-2"
     :icon-left="colorMode === 'light' ? 'sun' : 'moon'"
     @click="toggle"

package/docs/components/toolbar/ToolbarSearch.vue

@@ -241,11 +241,11 @@ if (document) {
 
     <template #actions>
       <footer class="w-full flex gap-2 items-center justify-center">
-        <span class="bg-context-7 px-1 inline-flex items-center rounded-sm">&#8626;</span>
+        <span class="bg-context-7 px-1 inline-flex items-center rounded-xs">&#8626;</span>
         <span class="text-xs">to select</span>
-        <span class="bg-context-7 px-1 inline-flex items-center rounded-sm">&#11139;</span>
+        <span class="bg-context-7 px-1 inline-flex items-center rounded-xs">&#11139;</span>
         <span class="text-xs">to navigate</span>
-        <span class="bg-context-7 px-1 inline-flex items-center rounded-sm">&#9243;</span>
+        <span class="bg-context-7 px-1 inline-flex items-center rounded-xs">&#9243;</span>
         <span class="text-xs">to close</span>
       </footer>
     </template>

package/docs/main.ts

@@ -24,6 +24,11 @@ app.use(UI, {
   prefix: 'X',
   icons,
   theme: BaseTheme,
+  defaults: {
+    // Empty: {
+    //   bordered: true,
+    // },
+  },
 })
 
 app.use(router)

package/docs/pages/colors.vue

@@ -27,6 +27,15 @@ function copyPalette(val: any) {
 
   notifications?.success('Copied to clipboard!')
 }
+
+const tailwindThemeSnippet = `/* src/assets/tailwind.css — after @import "@indielayer/ui/tailwind.css" */
+@theme {
+  --color-primary-500: var(--color-emerald-500);
+  --color-secondary-500: var(--color-slate-500);
+  --color-success-500: var(--color-green-500);
+  --color-warning-500: var(--color-yellow-500);
+  --color-error-500: var(--color-red-500);
+}`
 </script>
 
 <template>
@@ -90,25 +99,8 @@ app.use(UI, {
 
     <div>
       <code-snippet
-        lang="js"
-        :code="`// tailwind.config.js
-//...
-const colors = require('tailwindcss/colors')
-
-module.exports = {
-  //...
-  theme: {
-    extend: {
-      colors: {
-        primary: colors.emerald,
-        secondary: colors.slate,
-        success: colors.green,
-        warning: colors.yellow,
-        error: colors.red,
-      },
-    },
-  },
-}`"
+        lang="css"
+        :code="tailwindThemeSnippet"
       />
     </div>
 

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

@@ -13,7 +13,7 @@ const demos = [{
   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: '',
+  code: UsageDemoCode,
+  component: UsageDemo,
+}, {
+  name: 'Actions',
+  description: '',
+  code: ActionsDemoCode,
+  component: ActionsDemo,
+}, {
+  name: 'Bordered',
+  description: '',
+  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>