@stacksjs/components 0.2.63 → 0.2.66

package/dist/Tabs-bzvvn4ke.stx

@@ -1,126 +0,0 @@
-<script server>
-export const tabs = $props.tabs || []
-export const defaultTab = $props.defaultTab || 0
-export const orientation = $props.orientation || 'horizontal'
-export const variant = $props.variant || 'line'
-export const className = $props.className || ''
-
-const orientationClasses = {
-  horizontal: 'flex-col',
-  vertical: 'flex-row',
-}
-
-const tabListOrientationClasses = {
-  horizontal: 'flex-row border-b',
-  vertical: 'flex-col border-r',
-}
-
-const variantClasses = {
-  line: 'border-gray-200 dark:border-gray-700',
-  pills: 'gap-2 border-0 bg-gray-100 dark:bg-gray-800 p-1 rounded-lg',
-  enclosed: 'border-gray-200 dark:border-gray-700',
-}
-
-export const containerClasses = `flex ${orientationClasses[orientation]} ${className}`.trim()
-export const tabListClasses = `flex ${tabListOrientationClasses[orientation]} ${variantClasses[variant]}`.trim()
-export const tabPanelClasses = `p-4 focus:outline-none`.trim()
-</script>
-
-<script client>
-const emit = defineEmits()
-const tabs = {{ tabs }}
-const variant = {{ variant }}
-const orientation = {{ orientation }}
-const activeTab = state({{ defaultTab }})
-
-function selectTab(index) {
-  activeTab.set(index)
-  emit('change', { index, tab: tabs[index] })
-}
-
-function isActive(index) {
-  return activeTab() === index
-}
-
-function getTabClasses(index) {
-  const isActiveTab = isActive(index)
-  const base = 'px-4 py-2 font-medium text-sm transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900'
-  if (variant === 'line') {
-    const border = orientation === 'horizontal' ? 'border-b-2' : 'border-r-2'
-    return `${base} ${border} ${isActiveTab ? 'border-blue-500 text-blue-600 dark:text-blue-400' : 'border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 hover:border-gray-300 dark:hover:border-gray-600'}`
-  }
-  if (variant === 'pills') {
-    return `${base} rounded-md ${isActiveTab ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 shadow-sm' : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200'}`
-  }
-  if (variant === 'enclosed') {
-    const borders = orientation === 'horizontal' ? 'border-t border-l border-r rounded-t-md' : 'border-t border-l border-b rounded-l-md'
-    return `${base} ${borders} ${isActiveTab ? 'bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 -mb-px' : 'bg-gray-50 dark:bg-gray-900 border-transparent hover:border-gray-200 dark:hover:border-gray-700'}`
-  }
-  return base
-}
-
-function onTabKey(event, index) {
-  const tabCount = tabs.length
-  let next = index
-  if (orientation === 'horizontal') {
-    if (event.key === 'ArrowRight') { event.preventDefault(); next = (index + 1) % tabCount }
-    else if (event.key === 'ArrowLeft') { event.preventDefault(); next = (index - 1 + tabCount) % tabCount }
-  }
-  else {
-    if (event.key === 'ArrowDown') { event.preventDefault(); next = (index + 1) % tabCount }
-    else if (event.key === 'ArrowUp') { event.preventDefault(); next = (index - 1 + tabCount) % tabCount }
-  }
-  if (event.key === 'Home') { event.preventDefault(); next = 0 }
-  else if (event.key === 'End') { event.preventDefault(); next = tabCount - 1 }
-  if (next !== index) {
-    selectTab(next)
-    document.getElementById(`tab-${next}`)?.focus()
-  }
-}
-
-defineExpose({ activeTab, selectTab })
-</script>
-
-<div class="{{ containerClasses }}">
-  <div
-    class="{{ tabListClasses }}"
-    role="tablist"
-    aria-orientation="{{ orientation }}"
-  >
-    @foreach(tab in tabs)
-      <button
-        type="button"
-        :class="getTabClasses({{ $loop.index }})"
-        role="tab"
-        :aria-selected="isActive({{ $loop.index }}) ? 'true' : 'false'"
-        aria-controls="tab-panel-{{ $loop.index }}"
-        id="tab-{{ $loop.index }}"
-        :tabindex="isActive({{ $loop.index }}) ? '0' : '-1'"
-        @click="selectTab({{ $loop.index }})"
-        @keydown="onTabKey($event, {{ $loop.index }})"
-      >
-        @if(tab.icon)
-          <span class="inline-flex items-center gap-2">
-            <span x-html="{!! JSON.stringify(tab.icon) !!}"></span>
-            <span>{{ tab.label }}</span>
-          </span>
-        @else
-          {{ tab.label }}
-        @endif
-      </button>
-    @endforeach
-  </div>
-
-  @foreach(tab in tabs)
-    <div
-      :show="isActive({{ $loop.index }})"
-      id="tab-panel-{{ $loop.index }}"
-      class="{{ tabPanelClasses }}"
-      role="tabpanel"
-      aria-labelledby="tab-{{ $loop.index }}"
-      tabindex="0"
-    >
-      {!! tab.content !!}
-    </div>
-  @endforeach
-</div>