@adea-ai/ui 0.88.0 → 0.89.1

package/src/components/composites/settings/settings-navigation.tsx

@@ -0,0 +1,135 @@
+import type { JSX } from 'solid-js'
+import { createEffect, createUniqueId, onCleanup, splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+import { sidebarNavItemClass, sidebarNavItemStateClass } from '../../layout/sidebar-nav/sidebar-nav'
+import { TabsList, TabsTrigger, type TabsListProps } from '../../ui/tabs'
+
+/** One host-owned destination in a settings tab list. Values must be unique. */
+export type SettingsNavigationItem = {
+  value: string
+  label: string
+  icon?: JSX.Element
+  disabled?: boolean
+}
+
+/** A visible, accessibly named group of settings destinations. */
+export type SettingsNavigationGroup = {
+  label: string
+  items: readonly SettingsNavigationItem[]
+}
+
+export type SettingsNavigationProps = Omit<
+  TabsListProps,
+  'appearance' | 'children' | 'orientation'
+> & {
+  /** Groups are presentation only; the host owns the tab values and panels. */
+  groups: readonly SettingsNavigationGroup[]
+  /** The same controlled value supplied to the enclosing `Tabs`. */
+  value: string
+  /** Called when the already-selected destination is activated again. */
+  onReselect?: (value: string) => void
+  /** Reveal the selected row on value changes and window resizes. Defaults to nearest scroll. */
+  revealSelected?: boolean | ((trigger: HTMLButtonElement | undefined) => void)
+  /** Every tab list needs a label independent of its visible group headings. */
+  'aria-label': string
+}
+
+/**
+ * SettingsNavigation.
+ *
+ * A grouped vertical tab list for sibling settings panels. It composes the
+ * shared Tabs behaviour with the shared sidebar row recipe; the host supplies
+ * the controlled value, panel content, icons and any persistence or routing.
+ * Use ordinary tabs for a short, ungrouped row of view choices.
+ *
+ * Kobalte owns roving focus, arrow keys, selection and tab/panel ARIA. This
+ * component adds no URL, storage or host-specific state. Set
+ * `revealSelected={false}` when the surrounding layout does not use an internal
+ * scrolling viewport.
+ */
+export function SettingsNavigation(props: SettingsNavigationProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'aria-label',
+    'groups',
+    'value',
+    'onReselect',
+    'revealSelected',
+  ])
+  const triggers = new Map<string, HTMLButtonElement>()
+  const groupIdPrefix = `settings-navigation-${createUniqueId()}`
+
+  createEffect(() => {
+    const value = local.value
+    const reveal = local.revealSelected
+    if (reveal === false) return
+
+    const revealCurrent = () => {
+      const trigger = triggers.get(value)
+      if (typeof reveal === 'function') reveal(trigger)
+      else trigger?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+    }
+
+    revealCurrent()
+    window.addEventListener('resize', revealCurrent)
+    onCleanup(() => window.removeEventListener('resize', revealCurrent))
+  })
+
+  return (
+    <TabsList
+      data-slot="settings-navigation"
+      aria-label={local['aria-label']}
+      orientation="vertical"
+      class={cn(
+        'flex max-h-full min-h-0 min-w-0 shrink-0 flex-col items-stretch justify-start gap-2 overflow-x-hidden overflow-y-auto px-2 py-2',
+        local.class
+      )}
+      {...rest}
+    >
+      {local.groups.map((group, groupIndex) => {
+        const groupId = `${groupIdPrefix}-group-${groupIndex}`
+        return (
+          <div
+            role="none"
+            data-slot="settings-navigation-group"
+            class="flex min-w-0 flex-col gap-0.5"
+          >
+            <span id={groupId} class="sr-only">
+              {group.label}
+            </span>
+            <span
+              aria-hidden="true"
+              class="px-2 py-1.5 text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase"
+            >
+              {group.label}
+            </span>
+            {group.items.map((item) => (
+              <TabsTrigger
+                data-slot="settings-navigation-trigger"
+                orientation="vertical"
+                aria-describedby={groupId}
+                value={item.value}
+                disabled={item.disabled}
+                ref={(element: HTMLButtonElement | undefined) => {
+                  if (element) triggers.set(item.value, element)
+                  else triggers.delete(item.value)
+                }}
+                onClick={() => {
+                  if (local.value === item.value) local.onReselect?.(item.value)
+                }}
+                class={cn(
+                  sidebarNavItemClass,
+                  sidebarNavItemStateClass.idle,
+                  'h-row-lg w-full justify-start border-0 px-3 py-2 text-left data-[selected]:bg-primary-subtle data-[selected]:text-foreground'
+                )}
+              >
+                {item.icon}
+                <span class="min-w-0 truncate">{item.label}</span>
+              </TabsTrigger>
+            ))}
+          </div>
+        )
+      })}
+    </TabsList>
+  )
+}

package/src/components/layout/top-bar/top-bar.tsx

@@ -41,7 +41,7 @@ export function TopBar(props: TopBarProps) {
     <header
       data-slot="top-bar"
       class={cn(
-        'h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)] items-center gap-3 border-b border-border px-3',
+        'h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 border-b border-border bg-card text-card-foreground px-3 md:grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)]',
         local.glass && 'glass-panel',
         local.draggable && 'window-drag',
         local.macosInset && 'window-inset-macos',
@@ -61,7 +61,7 @@ export function TopBarSection(props: ComponentProps<'div'> & { align?: 'start' |
     <div
       data-slot="top-bar-section"
       class={cn(
-        'flex min-w-0 items-center gap-2 overflow-hidden',
+        'window-no-drag flex min-w-0 items-center gap-2 overflow-x-auto overflow-y-hidden',
         local.align === 'end' && 'justify-end',
         local.align !== 'end' && 'justify-start',
         local.class
@@ -71,12 +71,16 @@ export function TopBarSection(props: ComponentProps<'div'> & { align?: 'start' |
   )
 }
 
-export function TopBarTitle(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
+export function TopBarTitle(props: ComponentProps<'div'> & { align?: 'start' | 'center' }) {
+  const [local, rest] = splitProps(props, ['class', 'align'])
   return (
     <div
       data-slot="top-bar-title"
-      class={cn('truncate text-sm font-medium', local.class)}
+      class={cn(
+        'truncate text-sm font-medium',
+        local.align === 'center' && 'text-center',
+        local.class
+      )}
       {...rest}
     />
   )

package/src/components/ui/tabs/tabs.tsx

@@ -1,8 +1,31 @@
 import { Tabs as KobalteTabs } from '@kobalte/core/tabs'
-import type { ComponentProps } from 'solid-js'
-import { splitProps } from 'solid-js'
+import type { Accessor, ComponentProps } from 'solid-js'
+import {
+  createContext,
+  createRenderEffect,
+  createSignal,
+  createUniqueId,
+  onCleanup,
+  splitProps,
+  useContext,
+} from 'solid-js'
 import { cn } from '#lib/utils'
 
+type TabsIdContextValue = {
+  id: Accessor<string>
+  triggerIds: Accessor<ReadonlyMap<string, string>>
+  registerTriggerId: (value: string, id: string) => void
+  unregisterTriggerId: (value: string, id: string) => void
+}
+
+const TabsIdContext = createContext<TabsIdContextValue>()
+
+function useTabsId() {
+  const tabs = useContext(TabsIdContext)
+  if (!tabs) throw new Error('[adea-ui]: Tabs parts must be used within Tabs.')
+  return tabs
+}
+
 /**
  * Tabs.
  *
@@ -14,12 +37,37 @@ import { cn } from '#lib/utils'
  * where a full-width underline would collide with the panel's own header rule.
  */
 export function Tabs(props: ComponentProps<typeof KobalteTabs>) {
-  const [local, rest] = splitProps(props, ['class'])
+  const [local, rest] = splitProps(props, ['class', 'id'])
+  const generatedId = `tabs-${createUniqueId()}`
+  const id = () => local.id ?? generatedId
+  const [triggerIds, setTriggerIds] = createSignal<ReadonlyMap<string, string>>(new Map())
+  const tabs: TabsIdContextValue = {
+    id,
+    triggerIds,
+    registerTriggerId: (value, triggerId) => {
+      setTriggerIds((current) => new Map(current).set(value, triggerId))
+    },
+    unregisterTriggerId: (value, triggerId) => {
+      setTriggerIds((current) => {
+        if (current.get(value) !== triggerId) return current
+        const next = new Map(current)
+        next.delete(value)
+        return next
+      })
+    },
+  }
+
   return (
-    <KobalteTabs
-      class={cn('flex flex-col gap-2 data-[orientation=vertical]:flex-row', local.class)}
-      {...rest}
-    />
+    <TabsIdContext.Provider value={tabs}>
+      <KobalteTabs
+        id={id()}
+        class={cn(
+          'flex min-h-0 min-w-0 flex-col gap-2 data-[orientation=vertical]:flex-row',
+          local.class
+        )}
+        {...rest}
+      />
+    </TabsIdContext.Provider>
   )
 }
 
@@ -50,10 +98,21 @@ export type TabsTriggerProps = ComponentProps<typeof KobalteTabs.Trigger> & {
 }
 
 export function TabsTrigger(props: TabsTriggerProps) {
-  const [local, rest] = splitProps(props, ['class', 'appearance'])
+  const [local, rest] = splitProps(props, ['class', 'appearance', 'id'])
+  const tabs = useTabsId()
+  const triggerId = () => local.id ?? `${tabs.id()}-trigger-${rest.value}`
+
+  // Register before panels render, including SSR where createEffect is skipped.
+  createRenderEffect(() => {
+    const value = rest.value
+    const id = triggerId()
+    tabs.registerTriggerId(value, id)
+    onCleanup(() => tabs.unregisterTriggerId(value, id))
+  })
 
   return (
     <KobalteTabs.Trigger
+      id={triggerId()}
       class={cn(
         'inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium',
         'transition-colors ease-out outline-none select-none',
@@ -72,6 +131,17 @@ export function TabsTrigger(props: TabsTriggerProps) {
 }
 
 export function TabsContent(props: ComponentProps<typeof KobalteTabs.Content>) {
-  const [local, rest] = splitProps(props, ['class'])
-  return <KobalteTabs.Content class={cn('flex-1 outline-none', local.class)} {...rest} />
+  const [local, rest] = splitProps(props, ['class', 'aria-labelledby'])
+  const tabs = useTabsId()
+  return (
+    <KobalteTabs.Content
+      aria-labelledby={
+        local['aria-labelledby'] ??
+        tabs.triggerIds().get(rest.value) ??
+        `${tabs.id()}-trigger-${rest.value}`
+      }
+      class={cn('min-h-0 min-w-0 flex-1 outline-none', local.class)}
+      {...rest}
+    />
+  )
 }