@adea-ai/ui 0.87.0 → 0.89.1

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}
+    />
+  )
 }