tabler/shared/ui/NavSegmented.astro

---
// Port of ui/nav-segmented.html
import Icon from './Icon.astro'
import { includeArgCount } from '@shared/lib/include-args'

interface Props {
  items?: string[]
  icons?: string[]
  disabled?: number[]
  hover?: string
  default?: number
  vertical?: boolean
  size?: string
  fullWidth?: boolean
  name?: string
  class?: string
}

const { items, icons, disabled, hover = '', default: defaultIndex = 1, vertical, size, fullWidth, name, class: className } = Astro.props

// nav-segmented.html emits ` nav-{{ include.size }}` which — via the LiquidJS
// `.size` meta-property bug — resolves to the include argument COUNT when no
// explicit `size` is passed (nav-1, nav-2, …). Unlike icon-N/btn-N these
// `nav-N` junk classes are NOT stripped by the DOM diff, so they must be
// reproduced verbatim. An explicit size stays (nav-sm/nav-lg).
const includeArgKeys = ['items', 'icons', 'disabled', 'hover', 'default', 'vertical', 'size', 'fullWidth', 'class', 'name'] as const
const argCount = includeArgCount(Astro.props as Record<string, unknown>, includeArgKeys)
const sizeToken = size ? `nav-${size}` : `nav-${argCount}`

const itemsArr = items ?? []
const iconsArr = icons ?? []
const count = Math.max(itemsArr.length, iconsArr.length)

const navClasses = ['nav', 'nav-segmented', vertical && 'nav-segmented-vertical', sizeToken, fullWidth && 'w-100', className]

const rows = Array.from({ length: count }, (_, i) => {
  const forloopIndex = i + 1
  const index = String(forloopIndex)
  const isDisabled = disabled?.includes(forloopIndex) ?? false
  const isDefault = forloopIndex === defaultIndex
  const linkClasses = ['nav-link', isDisabled && 'disabled', isDefault && !name && 'active', hover === index && 'hover']
  return { forloopIndex, index, isDisabled, isDefault, linkClasses, icon: iconsArr[i], item: itemsArr[i] }
})
---

<nav class:list={navClasses} role="tablist" aria-orientation={vertical ? 'vertical' : undefined}>
  {
    rows.map((row) => {
      const Element = name ? 'label' : 'button'
      return (
        <Fragment>
          {name && <input type="radio" class="nav-link-input" name={name} id={`segmented-${name}-${row.index}`} checked={row.isDefault} />}
          <Element for={name ? `segmented-${name}-${row.index}` : undefined} class:list={row.linkClasses} role="tab" data-bs-toggle={name ? undefined : 'tab'} aria-selected={row.isDefault ? 'true' : 'false'} aria-disabled={row.isDisabled ? 'true' : undefined} aria-current={row.isDefault ? 'page' : undefined}>
            {row.icon && <Icon name={row.icon} class="nav-link-icon" />}
            {row.item && row.item}
          </Element>
        </Fragment>
      )
    })
  }
</nav>