@adea-ai/ui 0.100.2 → 0.101.1

package/dist/r/src/components/ui/chart/chart.tsx

@@ -15,7 +15,7 @@ import {
   RadialLinearScale,
   Tooltip as ChartTooltip,
 } from 'chart.js'
-import type { ChartOptions, ChartType } from 'chart.js'
+import type { ChartOptions, ChartType, Plugin } from 'chart.js'
 import { cn } from '../../../lib/utils'
 import {
   chartOptions,
@@ -62,7 +62,9 @@ import {
  * A canvas cannot read a custom property, so the options and datasets carry
  * `var(--token)` strings and each chart resolves them against its own element
  * when it renders, and again whenever the root's attributes change — the
- * `.dark` class, `data-accent`, an inline override. See `createThemeResolver`.
+ * `.dark` class, `data-accent`, `data-font`, an inline override. The type is
+ * resolved the same way: `--font-sans` for the family and a type-scale rung for
+ * the size, so a chart follows the font axis too. See `createThemeResolver`.
  */
 
 /**
@@ -119,6 +121,23 @@ function toCanvasColor(value: string): string {
   return `rgba(${r}, ${g}, ${b}, ${Math.round(((a ?? 255) / 255) * 1000) / 1000})`
 }
 
+const length = /^(-?\d*\.?\d+)(px|rem)$/
+
+/**
+ * A token's computed value as a canvas option: a colour as an sRGB colour, a
+ * `px`/`rem` length (a type-scale rung) as the number of pixels Chart.js wants,
+ * and anything else — a font stack — as written.
+ */
+function toCanvasValue(raw: string): string | number {
+  const match = length.exec(raw)
+  if (match) {
+    const value = Number(match[1])
+    if (match[2] === 'px') return value
+    return value * (Number.parseFloat(getComputedStyle(document.documentElement).fontSize) || 16)
+  }
+  return toCanvasColor(raw)
+}
+
 /**
  * Resolves `var(--token)` strings against a chart's element, and re-resolves
  * them when the theme changes.
@@ -127,16 +146,25 @@ function toCanvasColor(value: string): string {
  * inline tokens takes those. The observer watches every attribute on `<html>`,
  * because that is where both applications switch appearance, accent and theme
  * (`.dark`, `data-accent`, `data-theme`, inline variables); a theme axis added
- * later is covered without touching this. It is released with the chart.
+ * later is covered without touching this. It also re-resolves when a web font
+ * finishes loading: a canvas draws text once, so a chart rendered before the
+ * face selected by `data-font` arrived would otherwise keep the fallback face
+ * until something else redrew it. Both are released with the chart.
  */
 function createThemeResolver() {
   let element: HTMLElement | undefined
   const [revision, invalidate] = createSignal(undefined, { equals: false })
+  const onFontsLoaded = () => invalidate()
 
   onMount(() => {
     const observer = new MutationObserver(() => invalidate())
     observer.observe(document.documentElement, { attributes: true })
-    onCleanup(() => observer.disconnect())
+    const fonts = typeof document.fonts === 'undefined' ? undefined : document.fonts
+    fonts?.addEventListener('loadingdone', onFontsLoaded)
+    onCleanup(() => {
+      observer.disconnect()
+      fonts?.removeEventListener('loadingdone', onFontsLoaded)
+    })
   })
 
   return {
@@ -147,11 +175,11 @@ function createThemeResolver() {
       revision()
       if (!element || typeof getComputedStyle === 'undefined') return value
       const style = getComputedStyle(element)
-      const resolved = new Map<string, string | undefined>()
+      const resolved = new Map<string, string | number | undefined>()
       return resolveCssVariables(value, (name) => {
         if (!resolved.has(name)) {
           const raw = style.getPropertyValue(name).trim()
-          resolved.set(name, raw ? toCanvasColor(raw) : undefined)
+          resolved.set(name, raw ? toCanvasValue(raw) : undefined)
         }
         return resolved.get(name)
       })
@@ -343,13 +371,36 @@ export function RadarChart(props: SeriesChartProps) {
 }
 
 /**
- * A polar area chart: radial bars, for a composition.
+ * Puts the themed radial scale back on a chart `solid-chartjs` has just created.
  *
- * Its scale is left to Chart.js's polar-area defaults (`'none'` rather than
- * `'radial'`): `solid-chartjs` deletes `options.scales.r` for every chart type
- * but radar when it first creates the chart, so radial styling here would apply
- * only after the first theme change — a chart that restyles itself on a toggle.
+ * `solid-chartjs` deletes `options.scales.r` for every chart type but radar when
+ * it first creates a chart. Today that delete lands on a throwaway copy — Solid
+ * compiles `options={…}` to a getter, so its next read rebuilds the object with
+ * `r` intact — but that is an accident of how the prop is passed: a memoised or
+ * static options object would lose the scale, and the polar area would fall back
+ * to Chart.js's defaults (grey ticks on a translucent white box, which is a white
+ * box on a dark card). Restoring it from this component's own options makes the
+ * themed scale independent of both. Later option updates (every theme change)
+ * pass `r` through untouched; only creation drops it.
+ *
+ * `afterInit` runs inside Chart.js's constructor, after the options are read and
+ * before the first update builds the scales and draws, so the themed scale is in
+ * place for the first frame — no default-styled frame, and no extra update. The
+ * plugin is per instance, passed through the chart's `plugins` prop, so nothing
+ * is registered globally.
  */
+function restoreRadialScale(options: () => ChartOptions): Plugin {
+  return {
+    id: 'adea-radial-scale',
+    afterInit(chart) {
+      const scale = options().scales?.['r']
+      if (!scale) return
+      chart.options.scales = { ...chart.options.scales, r: scale }
+    },
+  }
+}
+
+/** A polar area chart: radial bars, for a composition. */
 export function PolarAreaChart(props: {
   labels: readonly string[]
   data: readonly number[]
@@ -357,9 +408,11 @@ export function PolarAreaChart(props: {
   class?: string
 }) {
   const theme = createThemeResolver()
+  const options = () => theme.resolve(chartOptions(props.options, 'radial'))
   return (
     <div ref={theme.ref} class={cn('h-64', props.class)}>
       <PolarArea
+        plugins={[restoreRadialScale(options)]}
         data={theme.resolve({
           labels: [...props.labels],
           datasets: [
@@ -371,7 +424,7 @@ export function PolarAreaChart(props: {
             },
           ],
         })}
-        options={theme.resolve(chartOptions(props.options, 'none'))}
+        options={options()}
       />
     </div>
   )

package/dist/r/src/components/ui/dialog/dialog.tsx

@@ -9,6 +9,7 @@ import type { Accessor, ComponentProps, JSX } from 'solid-js'
 import { createRenderEffect, onCleanup, Show, splitProps } from 'solid-js'
 import { overlayMotion, overlayPositioner, overlayScrim, overlaySurface } from '../../../lib/overlay'
 import { cn } from '../../../lib/utils'
+import { headingVariants } from '../typography'
 
 type FocusCycle = {
   content: HTMLElement
@@ -327,7 +328,7 @@ export function DialogTitle(props: ComponentProps<typeof KobalteDialog.Title>) {
   const [local, rest] = splitProps(props, ['class'])
   return (
     <KobalteDialog.Title
-      class={cn('text-base leading-none font-semibold tracking-tight', local.class)}
+      class={cn(headingVariants({ size: 'card', leading: 'none' }), local.class)}
       {...rest}
     />
   )

package/dist/r/src/components/ui/drawer/drawer.tsx

@@ -2,6 +2,7 @@ import DrawerPrimitive from '@corvu/drawer'
 import type { ComponentProps } from 'solid-js'
 import { splitProps } from 'solid-js'
 import { cn } from '../../../lib/utils'
+import { headingVariants } from '../typography'
 
 /**
  * Drawer.
@@ -96,7 +97,7 @@ export function DrawerTitle(props: ComponentProps<typeof DrawerPrimitive.Label>)
   const [local, rest] = splitProps(props, ['class'])
   return (
     <DrawerPrimitive.Label
-      class={cn('text-base leading-none font-semibold tracking-tight', local.class)}
+      class={cn(headingVariants({ size: 'card', leading: 'none' }), local.class)}
       {...rest}
     />
   )

package/dist/r/src/components/ui/field/field.tsx

@@ -4,6 +4,7 @@ import { createUniqueId, Show, splitProps } from 'solid-js'
 import { Label } from '../label/label'
 import { createFormFieldContext, FormFieldContext } from '../../../lib/form-field'
 import { cn } from '../../../lib/utils'
+import { headingVariants } from '../typography'
 
 /**
  * Field.
@@ -199,9 +200,7 @@ export function FieldLegend(props: ComponentProps<'legend'> & { variant?: 'legen
     <legend
       class={cn(
         'mb-1',
-        local.variant === 'label'
-          ? 'text-sm font-medium'
-          : 'text-base font-semibold tracking-tight',
+        local.variant === 'label' ? 'text-sm font-medium' : headingVariants({ size: 'card' }),
         local.class
       )}
       {...rest}

package/dist/r/src/components/ui/navigation-menu/navigation-menu.tsx

@@ -2,7 +2,14 @@ import { splitProps, type ComponentProps, type JSX } from 'solid-js'
 import * as KobalteNavigationMenu from '@kobalte/core/navigation-menu'
 import { ChevronDown } from 'lucide-solid'
 import { cn } from '../../../lib/utils'
-import { menuContentPadding, menuItem, overlayMotion, overlaySurface } from '../../../lib/overlay'
+import {
+  menuContentPadding,
+  menuItem,
+  menuLabel,
+  menuSeparator,
+  overlayMotion,
+  overlaySurface,
+} from '../../../lib/overlay'
 
 /**
  * NavigationMenu.
@@ -123,7 +130,11 @@ export function NavigationMenuContent(props: ComponentProps<typeof KobalteNaviga
         class={cn(
           // Absolute so the viewport sizes to the active panel's measured box and
           // animates between panels, rather than stacking them.
-          'absolute top-0 left-0 grid w-max gap-1 p-2 outline-none',
+          'absolute top-0 left-0 grid w-max gap-1 outline-none',
+          // The viewport is the surface and carries no padding of its own (its
+          // measured size is the panel's), so the panel supplies the inset every
+          // menu surface shares — the one the separator's bleed is cut for.
+          menuContentPadding,
           // The motion is the panel's, not the viewport's. Kobalte keeps an
           // outgoing panel mounted until the viewport's own animation ends; a
           // viewport that carries an entrance animation never fires that again
@@ -193,7 +204,11 @@ export function NavigationMenuItem(props: NavigationMenuItemProps) {
     <KobalteNavigationMenu.Item
       class={cn(
         menuItem,
-        'grid grid-cols-[auto_1fr] items-center gap-x-2 gap-y-0.5',
+        // The description sits under the label, in the label's column. Without
+        // an icon there is no leading column, and a two-column grid would set
+        // the description beside the label instead of beneath it.
+        local.icon ? 'grid grid-cols-[auto_1fr]' : 'grid grid-cols-1',
+        'items-center gap-x-2 gap-y-0.5',
         local.description && 'grid-rows-[auto_auto] py-2',
         local.class
       )}
@@ -202,7 +217,13 @@ export function NavigationMenuItem(props: NavigationMenuItemProps) {
       {local.icon}
       <span class="font-medium">{local.children}</span>
       {local.description && (
-        <span class="col-start-2 text-xs text-muted-foreground">{local.description}</span>
+        <span
+          class={cn('text-xs text-muted-foreground', {
+            'col-start-2': !!local.icon,
+          })}
+        >
+          {local.description}
+        </span>
       )}
     </KobalteNavigationMenu.Item>
   )
@@ -212,12 +233,7 @@ export function NavigationMenuSeparator(
   props: ComponentProps<typeof KobalteNavigationMenu.Separator>
 ) {
   const [local, rest] = splitProps(props, ['class'])
-  return (
-    <KobalteNavigationMenu.Separator
-      class={cn('-mx-1 my-1 h-px bg-border', local.class)}
-      {...rest}
-    />
-  )
+  return <KobalteNavigationMenu.Separator class={cn(menuSeparator, local.class)} {...rest} />
 }
 
 /** A non-interactive caption above a group of items. */
@@ -225,16 +241,7 @@ export function NavigationMenuGroupLabel(
   props: ComponentProps<typeof KobalteNavigationMenu.GroupLabel>
 ) {
   const [local, rest] = splitProps(props, ['class'])
-  return (
-    <KobalteNavigationMenu.GroupLabel
-      class={cn(
-        menuContentPadding,
-        'text-2xs font-semibold text-muted-foreground uppercase',
-        local.class
-      )}
-      {...rest}
-    />
-  )
+  return <KobalteNavigationMenu.GroupLabel class={cn(menuLabel, local.class)} {...rest} />
 }
 
 export function NavigationMenuGroup(props: ComponentProps<typeof KobalteNavigationMenu.Group>) {

package/dist/r/src/components/ui/sheet/sheet.tsx

@@ -10,6 +10,7 @@ import { Show, splitProps } from 'solid-js'
 import { cva, type VariantProps } from '../../../lib/variants'
 import { cn } from '../../../lib/utils'
 import { createDialogFocusRestoration, DialogOverlay } from '../dialog/dialog'
+import { headingVariants } from '../typography'
 
 /**
  * Sheet.
@@ -152,7 +153,10 @@ export function SheetFooter(props: ComponentProps<'div'>) {
 export function SheetTitle(props: ComponentProps<typeof KobalteDialog.Title>) {
   const [local, rest] = splitProps(props, ['class'])
   return (
-    <KobalteDialog.Title class={cn('text-sm leading-none font-semibold', local.class)} {...rest} />
+    <KobalteDialog.Title
+      class={cn(headingVariants({ size: 'subsection', leading: 'none' }), local.class)}
+      {...rest}
+    />
   )
 }
 

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

@@ -13,6 +13,7 @@ import { cn } from '../../../lib/utils'
 
 type TabsIdContextValue = {
   id: Accessor<string>
+  orientation: Accessor<'horizontal' | 'vertical'>
   triggerIds: Accessor<ReadonlyMap<string, string>>
   registerTriggerId: (value: string, id: string) => void
   unregisterTriggerId: (value: string, id: string) => void
@@ -43,6 +44,7 @@ export function Tabs(props: ComponentProps<typeof KobalteTabs>) {
   const [triggerIds, setTriggerIds] = createSignal<ReadonlyMap<string, string>>(new Map())
   const tabs: TabsIdContextValue = {
     id,
+    orientation: () => rest.orientation ?? 'horizontal',
     triggerIds,
     registerTriggerId: (value, triggerId) => {
       setTriggerIds((current) => new Map(current).set(value, triggerId))
@@ -103,6 +105,19 @@ export type TabsTriggerProps = ComponentProps<typeof KobalteTabs.Trigger> & {
   appearance?: 'underline' | 'segmented'
 }
 
+/**
+ * The underline appearance marks the selected trigger on the edge it shares
+ * with the list's axis. A horizontal row reads left to right along a baseline,
+ * so the mark is a bottom bar sitting on the list's rule. A vertical list stacks
+ * its triggers, and a bottom bar there underlines one row of a column — it reads
+ * as a divider, not a selection — so the mark moves to the inline-start edge,
+ * the leading bar a side navigation uses, and the label aligns to that edge.
+ *
+ * The orientation is read from the root rather than from a `data-orientation`
+ * selector so the vertical classes are unprefixed: a composite that replaces the
+ * mark (SettingsNavigation's filled row passes `border-0`) then overrides it
+ * through the ordinary class merge instead of fighting a variant-scoped border.
+ */
 export function TabsTrigger(props: TabsTriggerProps) {
   const [local, rest] = splitProps(props, ['class', 'appearance', 'id'])
   const tabs = useTabsId()
@@ -128,7 +143,9 @@ export function TabsTrigger(props: TabsTriggerProps) {
         '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',
         local.appearance === 'segmented'
           ? 'h-control-sm rounded-md px-control-sm data-[selected]:bg-card data-[selected]:shadow-xs'
-          : 'h-control-md -mb-px rounded-none border-b-2 border-transparent px-2 pb-2 data-[selected]:border-primary',
+          : tabs.orientation() === 'vertical'
+            ? 'h-control-md justify-start rounded-none border-s-2 border-transparent ps-3 pe-2 data-[selected]:border-primary'
+            : 'h-control-md -mb-px rounded-none border-b-2 border-transparent px-2 pb-2 data-[selected]:border-primary',
         local.class
       )}
       {...rest}

package/dist/r/src/components/ui/toast/toast.tsx

@@ -180,6 +180,10 @@ export type ToasterProps = ComponentProps<typeof KobalteToast.Region> & {
 }
 
 /**
+ * `class` lands on the region too: the props describe the region, and the
+ * region is the element a caller lays out (an inset clear of a status bar, a
+ * narrower stack). The list inside it is an implementation detail.
+ *
  * The corner is set on the region, not the list. The region is the `fixed`
  * element: an inset on the list inside it positions nothing, and the region falls
  * back to wherever it happens to sit in the document flow.
@@ -217,16 +221,13 @@ export function Toaster(props: ToasterProps) {
        */
       class={cn(
         'pointer-events-none fixed z-(--z-toast) flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-sm',
-        toasterPosition[local.position ?? 'bottom-right']
+        toasterPosition[local.position ?? 'bottom-right'],
+        local.class
       )}
       {...rest}
     >
       <KobalteToast.List
-        class={cn(
-          'flex flex-col gap-2',
-          toasterAlignment[local.position ?? 'bottom-right'],
-          local.class
-        )}
+        class={cn('flex flex-col gap-2', toasterAlignment[local.position ?? 'bottom-right'])}
       />
     </KobalteToast.Region>
   )

package/dist/r/src/components/ui/typography/index.ts

@@ -0,0 +1,9 @@
+export {
+  Heading,
+  headingElement,
+  headingVariants,
+  Text,
+  textElement,
+  textVariants,
+} from './typography'
+export type { HeadingProps, TextProps } from './typography'

package/dist/r/src/components/ui/typography/typography.tsx

@@ -0,0 +1,205 @@
+import { Polymorphic, type PolymorphicProps } from '@kobalte/core/polymorphic'
+import { type ComponentProps, splitProps, type ValidComponent } from 'solid-js'
+import { cva, type VariantProps } from '../../../lib/variants'
+import { cn } from '../../../lib/utils'
+
+/**
+ * Typography.
+ *
+ * The type ladder in `theme.css` has eight rungs, each with its own leading. These
+ * two components are where a rung is paired with its weight and tracking, so a call
+ * site names a *role* — a page title, a section heading, a caption — and never
+ * re-decides `text-xl font-semibold tracking-tight` for itself. Twenty call sites
+ * that each choose a size and a weight drift; twenty that name a role cannot.
+ *
+ * **Size is visual; the element is the document outline.** They are separate
+ * decisions and the API keeps them separate. Each size has a conventional default
+ * element (`display`, `title` and `page` render an `h1`, `section` an `h2`, `card`
+ * an `h3`, `subsection` an `h4`) so the common case needs no prop, but the default
+ * is a convenience, not a coupling: a card-sized title that is the first heading
+ * in a settings section is an `h2`, so it says `as="h2"`. Never pick a `size` to get
+ * a heading level, and never pick an element to get a size.
+ *
+ * Headings are 600, and weights stop at 600 — on a dark surface a bold word blooms.
+ * Leading comes from the rung; `leading="none"` is for a title whose surrounding
+ * stack already sets the rhythm (a card or dialog header), and is the only other
+ * option.
+ */
+export const headingVariants = cva('font-semibold', {
+  variants: {
+    size: {
+      /** 30px. An app-level headline — a first-run or empty-app screen. Once per app. */
+      display: 'text-3xl tracking-tight',
+      /** 24px. A landing title or a headline figure larger than a stat's. */
+      title: 'text-2xl tracking-tight',
+      /** 20px. The title of a page (`PageHeaderTitle`). */
+      page: 'text-xl tracking-tight',
+      /** 18px. A section heading inside a page (`PageSection`). */
+      section: 'text-lg tracking-tight',
+      /** 16px. A card, dialog, drawer or settings-section title. */
+      card: 'text-base tracking-tight',
+      /** 14px. A heading inside a compact surface: a sheet, a chart, a column. */
+      subsection: 'text-sm',
+    },
+    leading: {
+      /** The rung's own line-height from `theme.css`. */
+      rung: '',
+      /** Line-height 1, for a title whose container's gap sets the rhythm. */
+      none: 'leading-none',
+    },
+    /** Tabular figures, so a row of numbers can be compared without digits shifting. */
+    numeric: {
+      true: 'tabular-nums',
+    },
+    tone: {
+      /** Inherit the surrounding colour — right on every surface by construction. */
+      inherit: '',
+      foreground: 'text-foreground',
+      muted: 'text-muted-foreground',
+    },
+  },
+  defaultVariants: {
+    size: 'section',
+    leading: 'rung',
+    tone: 'inherit',
+  },
+})
+
+/**
+ * The conventional element for each heading size. Exported so a test (and a
+ * reader) can see the whole mapping in one place; pass `as` to depart from it.
+ */
+export const headingElement = {
+  display: 'h1',
+  title: 'h1',
+  page: 'h1',
+  section: 'h2',
+  card: 'h3',
+  subsection: 'h4',
+} as const
+
+type HeadingVariantProps = VariantProps<typeof headingVariants>
+type HeadingSize = keyof typeof headingElement
+
+export type HeadingProps<T extends ValidComponent = 'h2'> = PolymorphicProps<
+  T,
+  HeadingVariantProps & {
+    class?: string
+  }
+>
+
+export function Heading<T extends ValidComponent = 'h2'>(props: HeadingProps<T>) {
+  const [local, rest] = splitProps(props as HeadingProps & { as?: ValidComponent }, [
+    'as',
+    'size',
+    'leading',
+    'numeric',
+    'tone',
+    'class',
+  ])
+
+  return (
+    <Polymorphic
+      as={local.as ?? headingElement[(local.size ?? 'section') as HeadingSize]}
+      data-slot="heading"
+      class={cn(
+        headingVariants({
+          size: local.size,
+          leading: local.leading,
+          numeric: local.numeric,
+          tone: local.tone,
+        }),
+        local.class
+      )}
+      {...(rest as ComponentProps<'h2'>)}
+    />
+  )
+}
+
+/**
+ * Text.
+ *
+ * Everything that is not a heading. `text-sm` is the interface default, not 16px,
+ * and it carries three weights by role: 400 for body copy, 500 for a label or
+ * control text, 600 for emphasis. Below it, `caption` (12px) is metadata and
+ * `micro` (11px, 500) is the floor — keyboard keys and the status bar. `code` is
+ * the mono face at 12px, for anything a user compares character by character.
+ *
+ * `tone` is a separate axis from `variant` because "secondary" is a colour
+ * decision, not a size: a muted caption and a muted body line are both common.
+ * The default inherits, so text on a filled surface picks up that surface's
+ * foreground without the caller restating it.
+ *
+ * Defaults: `body` renders a `p`, `code` a `code`, every other variant a `span`.
+ */
+export const textVariants = cva('', {
+  variants: {
+    variant: {
+      /** 14px / 400. Body copy and descriptions. */
+      body: 'text-sm',
+      /** 14px / 500. Labels, control text, list-row titles. */
+      label: 'text-sm font-medium',
+      /** 14px / 600. Emphasis inside body copy. */
+      strong: 'text-sm font-semibold',
+      /** 12px / 400. Metadata, secondary rows, units. */
+      caption: 'text-xs',
+      /** 11px / 500. The floor: keyboard keys, the status bar. */
+      micro: 'text-2xs font-medium',
+      /** 12px mono. Ids, paths, hashes, inline code. */
+      code: 'font-mono text-xs',
+    },
+    tone: {
+      inherit: '',
+      foreground: 'text-foreground',
+      muted: 'text-muted-foreground',
+    },
+    numeric: {
+      true: 'tabular-nums',
+    },
+  },
+  defaultVariants: {
+    variant: 'body',
+    tone: 'inherit',
+  },
+})
+
+export const textElement = {
+  body: 'p',
+  label: 'span',
+  strong: 'span',
+  caption: 'span',
+  micro: 'span',
+  code: 'code',
+} as const
+
+type TextVariantProps = VariantProps<typeof textVariants>
+type TextVariant = keyof typeof textElement
+
+export type TextProps<T extends ValidComponent = 'p'> = PolymorphicProps<
+  T,
+  TextVariantProps & {
+    class?: string
+  }
+>
+
+export function Text<T extends ValidComponent = 'p'>(props: TextProps<T>) {
+  const [local, rest] = splitProps(props as TextProps & { as?: ValidComponent }, [
+    'as',
+    'variant',
+    'tone',
+    'numeric',
+    'class',
+  ])
+
+  return (
+    <Polymorphic
+      as={local.as ?? textElement[(local.variant ?? 'body') as TextVariant]}
+      data-slot="text"
+      class={cn(
+        textVariants({ variant: local.variant, tone: local.tone, numeric: local.numeric }),
+        local.class
+      )}
+      {...(rest as ComponentProps<'p'>)}
+    />
+  )
+}

package/dist/r/stat.json

@@ -7,6 +7,7 @@
     "lucide-solid@^1.48.0"
   ],
   "registryDependencies": [
+    "@adea-ai/ui/typography",
     "lib"
   ],
   "files": [

package/dist/r/theming.json

@@ -11,6 +11,7 @@
     "@adea-ai/ui/radio-group",
     "@adea-ai/ui/toggle-group",
     "@adea-ai/ui/tooltip",
+    "@adea-ai/ui/typography",
     "lib"
   ],
   "files": [

package/dist/r/typography.json

@@ -0,0 +1,24 @@
+{
+  "name": "typography",
+  "type": "registry:ui",
+  "title": "Typography",
+  "description": "",
+  "dependencies": [
+    "@kobalte/core@^0.13.14"
+  ],
+  "registryDependencies": [
+    "lib"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/typography/index.ts",
+      "type": "registry:ui",
+      "target": "components/ui/typography/index.ts"
+    },
+    {
+      "path": "src/components/ui/typography/typography.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/typography/typography.tsx"
+    }
+  ]
+}

package/dist/r/update-dialog.json

@@ -12,6 +12,7 @@
     "@adea-ai/ui/button",
     "@adea-ai/ui/dialog",
     "@adea-ai/ui/progress",
+    "@adea-ai/ui/typography",
     "lib"
   ],
   "files": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.100.2",
+  "version": "0.101.1",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",