@glyphui/ui 0.3.0 → 0.5.0

package/src/components/slider/slider.tsx

@@ -1,7 +1,7 @@
 import { Slider as SliderPrimitive } from 'radix-ui'
-import type { ReactNode } from 'react'
+import { type ReactNode, useContext } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
-import { useFieldControl } from '../field/field-context'
+import { FieldContext, useFieldControl } from '../field/field-context'
 import { sliderStyles } from './slider.styles'
 
 export type SliderValue = number | readonly [number, number]
@@ -31,7 +31,9 @@ export interface SliderProps<V extends SliderValue> {
   name?: string
   id?: string
   className?: string
+  /** Accessible name. Inside a `Field`, the field's label is used when this is not set. */
   'aria-label'?: string
+  'aria-labelledby'?: string
   'aria-describedby'?: string
   'aria-invalid'?: boolean
   /** Accessible names for range thumbs. Default: "Minimum", "Maximum". */
@@ -61,9 +63,13 @@ export function Slider<V extends SliderValue = number>(inProps: SliderProps<V>)
     className,
     thumbLabels = ['Minimum', 'Maximum'],
     'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
     'aria-describedby': ariaDescribedBy,
     'aria-invalid': ariaInvalid,
   } = props
+  const field = useContext(FieldContext)
+  // Thumbs are not labelable elements, so a Field's <label for> can't name them.
+  const labelledBy = ariaLabelledBy ?? (ariaLabel ? undefined : field?.labelId)
   const isRange = Array.isArray(value ?? defaultValue)
   const fromArray = (next: number[]) => (isRange ? [next[0], next[1]] : next[0]) as V
   const current = toArray(value) ?? toArray(defaultValue) ?? [min]
@@ -97,6 +103,7 @@ export function Slider<V extends SliderValue = number>(inProps: SliderProps<V>)
             key={index}
             id={index === 0 ? id : undefined}
             aria-label={isRange ? thumbLabels[index] : ariaLabel}
+            aria-labelledby={isRange ? undefined : labelledBy}
             aria-describedby={ariaDescribedBy}
             aria-invalid={ariaInvalid}
             className={s.thumb({ class: slots.thumb })}

package/src/components/spinner/spinner.styles.ts

@@ -1,6 +1,6 @@
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const spinnerStyles = tv({
+export const spinnerStyles = /* @__PURE__ */ tv({
   slots: {
     base: 'inline-block shrink-0 animate-spin',
     track: 'opacity-20',

package/src/components/stack/stack.tsx

@@ -2,7 +2,7 @@ import { Slot } from 'radix-ui'
 import type { ComponentProps } from 'react'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const stackStyles = tv({
+export const stackStyles = /* @__PURE__ */ tv({
   base: 'flex',
   variants: {
     direction: { column: 'flex-col', row: 'flex-row' },

package/src/components/stat-card/stat-card.styles.ts

@@ -1,7 +1,7 @@
 import type { StylesEntry } from '../../utils/registry'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const statCardStyles = tv({
+export const statCardStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'gap-2',
     header: 'flex items-center justify-between gap-2',

package/src/components/stepper/stepper.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { focusRing, themedBorder, transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const stepperStyles = tv({
+export const stepperStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'flex w-full list-none p-0',
     step: 'relative flex min-w-0',
@@ -41,7 +41,7 @@ export const stepperStyles = tv({
         title: 'text-foreground',
       },
       current: {
-        indicator: 'border-primary bg-surface text-primary ring-4 ring-primary/15',
+        indicator: 'border-primary bg-surface text-primary-text ring-4 ring-primary/15',
         connector: 'bg-border',
         title: 'text-foreground',
       },
@@ -53,7 +53,7 @@ export const stepperStyles = tv({
       error: {
         indicator: 'border-danger bg-danger text-danger-foreground',
         connector: 'bg-border',
-        title: 'text-danger',
+        title: 'text-danger-text',
       },
     },
     clickable: {

package/src/components/switch/switch.tsx

@@ -5,7 +5,7 @@ import { focusRing, themedBorder, transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 import { useFieldControl } from '../field/field-context'
 
-export const switchStyles = tv({
+export const switchStyles = /* @__PURE__ */ tv({
   slots: {
     root: [
       'peer inline-flex shrink-0 cursor-pointer items-center rounded-pill border-transparent bg-input p-px',
@@ -15,7 +15,7 @@ export const switchStyles = tv({
       'data-[state=checked]:bg-primary disabled:cursor-not-allowed disabled:opacity-50',
     ],
     thumb:
-      'pointer-events-none block rounded-pill bg-white shadow-sm transition-transform duration-(--glyph-duration-base) ease-emphasized data-[state=unchecked]:translate-x-0',
+      'pointer-events-none block rounded-pill bg-white shadow-sm transition-[translate] duration-(--glyph-duration-spring) ease-spring data-[state=unchecked]:translate-x-0',
   },
   variants: {
     size: {

package/src/components/table/table.tsx

@@ -2,7 +2,7 @@ import type { ComponentProps } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
 import { tv } from '../../utils/tv'
 
-export const tableStyles = tv({
+export const tableStyles = /* @__PURE__ */ tv({
   slots: {
     wrapper: 'relative w-full overflow-x-auto',
     table: 'w-full caption-bottom border-collapse text-small tabular-nums',

package/src/components/tabs/tabs.tsx

@@ -1,13 +1,16 @@
 import { Tabs as TabsPrimitive } from 'radix-ui'
-import { type ComponentProps, createContext, useContext } from 'react'
+import { type ComponentProps, createContext, useContext, useId } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
+import { useControllableState } from '../../hooks/use-controllable-state'
+import { ActiveIndicator } from '../../motion/active-indicator'
 import { focusRing, themedBorder, transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const tabsStyles = tv({
+export const tabsStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'flex flex-col gap-4',
-    list: 'flex items-center',
+    // Isolated so the sliding indicator stays under every tab's label while it moves.
+    list: 'isolate flex items-center',
     trigger: [
       'relative inline-flex cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap text-small font-medium text-muted-foreground',
       transition,
@@ -15,19 +18,21 @@ export const tabsStyles = tv({
       'hover:text-foreground data-[state=active]:text-foreground disabled:pointer-events-none disabled:opacity-50',
       '[&>svg]:size-4',
     ],
+    /** Slides to the active tab. Underline bar or pill background, by variant. */
+    indicator: 'pointer-events-none absolute',
     content: 'outline-none',
   },
   variants: {
     variant: {
       underline: {
         list: 'gap-5 border-b border-border',
-        trigger:
-          'h-9 after:absolute after:inset-x-0 after:-bottom-px after:h-0.5 after:rounded-pill after:bg-transparent data-[state=active]:after:bg-foreground',
+        trigger: 'h-9',
+        indicator: 'inset-x-0 -bottom-px h-0.5 rounded-pill bg-foreground',
       },
       pill: {
         list: ['inline-flex w-fit gap-0.5 rounded-md border-border bg-muted p-0.5', themedBorder],
-        trigger:
-          'h-7 rounded-[calc(var(--radius-md)-2px)] px-3 data-[state=active]:bg-raised data-[state=active]:shadow-xs',
+        trigger: 'h-7 rounded-[calc(var(--radius-md)-2px)] px-3',
+        indicator: 'inset-0 -z-10 rounded-[calc(var(--radius-md)-2px)] bg-raised shadow-xs',
       },
     },
   },
@@ -35,17 +40,31 @@ export const tabsStyles = tv({
 })
 
 type TabsVariants = VariantProps<typeof tabsStyles>
-const TabsContext = createContext<TabsVariants>({})
+interface TabsContextValue extends TabsVariants {
+  value?: string
+  indicatorId?: string
+}
+const TabsContext = createContext<TabsContextValue>({})
 
 export interface TabsProps extends ComponentProps<typeof TabsPrimitive.Root>, TabsVariants {}
 
 export function Tabs(inProps: TabsProps) {
-  const [{ variant, className, ...rest }, slots] = useComponentConfig('Tabs', inProps)
+  const [props, slots] = useComponentConfig('Tabs', inProps)
+  const { variant, className, value: valueProp, defaultValue, onValueChange, ...rest } = props
+  // Tracked here so the active trigger can host the sliding indicator.
+  const [value, setValue] = useControllableState({
+    value: valueProp,
+    defaultValue: defaultValue ?? '',
+    onChange: onValueChange,
+  })
+  const indicatorId = `${useId()}-tabs-indicator`
   return (
-    <TabsContext.Provider value={{ variant }}>
+    <TabsContext.Provider value={{ variant, value, indicatorId }}>
       <TabsPrimitive.Root
         data-slot="tabs"
         className={tabsStyles({ variant }).root({ class: [slots.root, className] })}
+        value={value}
+        onValueChange={setValue}
         {...rest}
       />
     </TabsContext.Provider>
@@ -53,9 +72,9 @@ export function Tabs(inProps: TabsProps) {
 }
 
 function useTabsParts() {
-  const { variant } = useContext(TabsContext)
+  const context = useContext(TabsContext)
   const [, slots] = useComponentConfig('Tabs', {})
-  return { s: tabsStyles({ variant }), slots }
+  return { s: tabsStyles({ variant: context.variant }), slots, context }
 }
 
 export function TabsList({ className, ...props }: ComponentProps<typeof TabsPrimitive.List>) {
@@ -69,14 +88,26 @@ export function TabsList({ className, ...props }: ComponentProps<typeof TabsPrim
   )
 }
 
-export function TabsTrigger({ className, ...props }: ComponentProps<typeof TabsPrimitive.Trigger>) {
-  const { s, slots } = useTabsParts()
+export function TabsTrigger({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof TabsPrimitive.Trigger>) {
+  const { s, slots, context } = useTabsParts()
   return (
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={s.trigger({ class: [slots.trigger, className] })}
       {...props}
-    />
+    >
+      {children}
+      {context.indicatorId && context.value === props.value && (
+        <ActiveIndicator
+          layoutId={context.indicatorId}
+          className={s.indicator({ class: slots.indicator })}
+        />
+      )}
+    </TabsPrimitive.Trigger>
   )
 }
 

package/src/components/tag-input/tag-input.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { tv, type VariantProps } from '../../utils/tv'
 import { fieldControl } from '../input/input.styles'
 
-export const tagInputStyles = tv({
+export const tagInputStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'grid gap-1.5',
     frame: [
@@ -18,7 +18,7 @@ export const tagInputStyles = tv({
       'inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-pill text-muted-foreground hover:bg-border-strong/40 hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring [&>svg]:size-3',
     input:
       'h-7 min-w-24 flex-1 bg-transparent px-1 text-foreground outline-none placeholder:text-faint-foreground disabled:cursor-not-allowed',
-    message: 'text-small font-medium text-danger',
+    message: 'text-small font-medium text-danger-text',
   },
   variants: {
     size: {

package/src/components/tag-input/tag-input.tsx

@@ -1,6 +1,7 @@
 import { type ClipboardEvent, type KeyboardEvent, useId, useRef, useState } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
 import { useControllableState } from '../../hooks/use-controllable-state'
+import { PresenceItem, PresenceList } from '../../motion/presence-list'
 import { useFieldControl } from '../field/field-context'
 import { type TagInputVariants, tagInputStyles } from './tag-input.styles'
 
@@ -147,24 +148,32 @@ export function TagInput(inProps: TagInputProps) {
         className={s.frame({ class: slots.frame })}
         onClick={() => inputRef.current?.focus()}
       >
-        {tags.map((tag, index) => (
-          <span key={`${tag}-${index}`} data-slot="tag" className={s.tag({ class: slots.tag })}>
-            <span className={s.tagLabel({ class: slots.tagLabel })}>{tag}</span>
-            {!disabled && (
-              <button
-                type="button"
-                aria-label={`Remove ${tag}`}
-                className={s.remove({ class: slots.remove })}
-                onClick={(event) => {
-                  event.stopPropagation()
-                  remove(index)
-                }}
-              >
-                <XIcon />
-              </button>
-            )}
-          </span>
-        ))}
+        <PresenceList>
+          {tags.map((tag, index) => (
+            <PresenceItem
+              as="span"
+              // Keyed by value and occurrence, so removing one tag doesn't re-key the rest.
+              key={`${tag}-${tags.slice(0, index).filter((t) => t === tag).length}`}
+              data-slot="tag"
+              className={s.tag({ class: slots.tag })}
+            >
+              <span className={s.tagLabel({ class: slots.tagLabel })}>{tag}</span>
+              {!disabled && (
+                <button
+                  type="button"
+                  aria-label={`Remove ${tag}`}
+                  className={s.remove({ class: slots.remove })}
+                  onClick={(event) => {
+                    event.stopPropagation()
+                    remove(index)
+                  }}
+                >
+                  <XIcon />
+                </button>
+              )}
+            </PresenceItem>
+          ))}
+        </PresenceList>
         <input
           ref={inputRef}
           id={id}

package/src/components/text/text.styles.ts

@@ -1,6 +1,6 @@
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const textStyles = tv({
+export const textStyles = /* @__PURE__ */ tv({
   slots: { base: '' },
   variants: {
     size: {
@@ -13,10 +13,10 @@ export const textStyles = tv({
       default: { base: 'text-foreground' },
       muted: { base: 'text-muted-foreground' },
       faint: { base: 'text-faint-foreground' },
-      primary: { base: 'text-primary' },
-      success: { base: 'text-success' },
-      warning: { base: 'text-warning' },
-      danger: { base: 'text-danger' },
+      primary: { base: 'text-primary-text' },
+      success: { base: 'text-success-text' },
+      warning: { base: 'text-warning-text' },
+      danger: { base: 'text-danger-text' },
     },
     weight: {
       regular: { base: 'font-normal' },

package/src/components/textarea/textarea.tsx

@@ -4,7 +4,7 @@ import { tv } from '../../utils/tv'
 import { useFieldControl } from '../field/field-context'
 import { fieldControl } from '../input/input.styles'
 
-export const textareaStyles = tv({
+export const textareaStyles = /* @__PURE__ */ tv({
   slots: {
     base: [
       ...fieldControl,

package/src/components/timeline/timeline.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { themedBorder } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const timelineStyles = tv({
+export const timelineStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'grid',
     item: 'group/item relative grid grid-cols-[auto_1fr] gap-x-3',

package/src/components/toast/toast.tsx

@@ -5,7 +5,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { focusRing, themedBorder, transition } from '../../utils/styles'
 import { tv } from '../../utils/tv'
 
-export const toastStyles = tv({
+export const toastStyles = /* @__PURE__ */ tv({
   slots: {
     toast: [
       'group flex w-(--width) items-start gap-3 rounded-lg border-border bg-raised p-4 text-small text-foreground shadow-lg',

package/src/components/toggle/toggle.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { focusRing, themedBorder, transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const toggleStyles = tv({
+export const toggleStyles = /* @__PURE__ */ tv({
   slots: {
     base: [
       'inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-muted-foreground',

package/src/components/tooltip/tooltip.tsx

@@ -1,12 +1,15 @@
 import { Tooltip as TooltipPrimitive } from 'radix-ui'
 import type { ComponentProps, ReactNode } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
+import { popoverMotion } from '../../utils/styles'
 import { tv } from '../../utils/tv'
 
-export const tooltipStyles = tv({
+export const tooltipStyles = /* @__PURE__ */ tv({
   slots: {
-    content:
-      'z-50 max-w-xs animate-pop-in rounded-sm bg-secondary px-2 py-1 text-caption text-secondary-foreground shadow-md',
+    content: [
+      'z-50 max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-sm bg-secondary px-2 py-1 text-caption text-secondary-foreground shadow-md',
+      popoverMotion,
+    ],
   },
 })
 

package/src/components/tree-view/tree-view.styles.ts

@@ -2,7 +2,7 @@ import type { StylesEntry } from '../../utils/registry'
 import { transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
 
-export const treeViewStyles = tv({
+export const treeViewStyles = /* @__PURE__ */ tv({
   slots: {
     root: 'grid gap-px text-small',
     // Focus and selection are drawn on the item's own row only, never on nested rows.

package/src/index.ts

@@ -6,8 +6,10 @@ export {
   type ColorToken,
   type ComponentOverrides,
   defineTheme,
+  type MotionLevel,
   type RadiusToken,
   type ShadowToken,
+  type SpringConfig,
   type TextToken,
   type Theme,
   type ThemeInput,
@@ -87,6 +89,7 @@ export * from './components/tooltip'
 export * from './components/tree-view'
 export * from './components/visually-hidden'
 export * from './hooks'
+export * from './motion'
 // Patterns
 export * from './patterns/app-shell'
 export * from './patterns/async'

package/src/integrations/react-router.tsx

@@ -0,0 +1,39 @@
+import { Link, useLocation } from 'react-router'
+import type { GlyphRouter, IsActiveOptions, LinkComponentProps } from '../provider/glyph-context'
+
+const isOutsideApp = (href: string) =>
+  href.startsWith('#') || href.startsWith('//') || /^[a-z][a-z\d+.-]*:/i.test(href)
+
+/**
+ * React Router's `Link`, taking Glyph's `href` prop. Hash links, external URLs and `mailto:`
+ * stay plain anchors, so in-page anchors scroll and external links leave the app.
+ */
+export function RouterLink({ href, ...props }: LinkComponentProps) {
+  if (isOutsideApp(href)) return <a href={href} {...props} />
+  return <Link to={href} {...props} />
+}
+
+const trimSlash = (path: string) => (path.length > 1 ? path.replace(/\/+$/, '') : path)
+
+/** Whether an in-app `href` matches a pathname, with React Router's `NavLink` semantics. */
+export function matchPath(href: string, pathname: string, { end = false }: IsActiveOptions = {}) {
+  // Hash links, external URLs and protocol links never mark an item active.
+  if (!href || isOutsideApp(href)) return false
+  const target = trimSlash(new URL(href, 'http://glyph.local').pathname)
+  const current = trimSlash(pathname)
+  if (end || target === '/') return current === target
+  return current === target || current.startsWith(`${target}/`)
+}
+
+/** Marks a link active when the current location matches it, like React Router's `NavLink`. */
+export function useRouterIsActive(href: string, options?: IsActiveOptions): boolean {
+  const { pathname } = useLocation()
+  return matchPath(href, pathname, options)
+}
+
+/**
+ * Connects Glyph's navigation to React Router (v7 or later):
+ * `<GlyphProvider router={reactRouter}>`. Links render client-side, and Sidebar, Navbar
+ * and NavigationMenu items mark the current page automatically. Must render inside a router.
+ */
+export const reactRouter: GlyphRouter = { Link: RouterLink, useIsActive: useRouterIsActive }

package/src/integrations/vite.test-d.ts

@@ -0,0 +1,6 @@
+// Type-level contract: the plugin plugs into Vite without casts. Checked by `tsc`.
+import type { Plugin } from 'vite'
+import { glyphColorMode } from './vite'
+
+const plugin: Plugin = glyphColorMode({ defaultMode: 'dark' })
+void plugin

package/src/integrations/vite.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest'
+import { getColorModeScript } from '../provider/color-mode-script'
+import { glyphColorMode } from './vite'
+
+describe('glyphColorMode', () => {
+  it('prepends the color-mode script to the head before other transforms', () => {
+    const plugin = glyphColorMode()
+    expect(plugin.name).toBe('glyph:color-mode')
+    expect(plugin.transformIndexHtml.order).toBe('pre')
+    expect(plugin.transformIndexHtml.handler()).toEqual([
+      { tag: 'script', children: getColorModeScript(), injectTo: 'head-prepend' },
+    ])
+  })
+
+  it('uses the same options as GlyphProvider', () => {
+    const [tag] = glyphColorMode({
+      defaultMode: 'dark',
+      storageKey: 'acme-mode',
+    }).transformIndexHtml.handler()
+    expect(tag?.children).toContain('"acme-mode"')
+    expect(tag?.children).toContain('d="dark"')
+  })
+
+  it('skips localStorage when persistence is off', () => {
+    const [tag] = glyphColorMode({ storageKey: null }).transformIndexHtml.handler()
+    expect(tag?.children).not.toContain('localStorage')
+  })
+})

package/src/integrations/vite.ts

@@ -0,0 +1,33 @@
+import { type ColorModeOptions, getColorModeScript } from '../provider/color-mode-script'
+
+/** The subset of Vite's `Plugin` this plugin uses, so `vite` stays an optional peer. */
+export interface GlyphVitePlugin {
+  name: string
+  transformIndexHtml: {
+    order: 'pre'
+    handler: () => { tag: 'script'; children: string; injectTo: 'head-prepend' }[]
+  }
+}
+
+/**
+ * Injects Glyph's color-mode script into `index.html` so dark-mode visitors never see a
+ * light flash. Pass the same `defaultMode` and `storageKey` as `GlyphProvider`.
+ *
+ * ```ts
+ * // vite.config.ts
+ * import { glyphColorMode } from '@glyphui/ui/vite'
+ * export default defineConfig({ plugins: [react(), tailwindcss(), glyphColorMode()] })
+ * ```
+ */
+export function glyphColorMode(options: ColorModeOptions = {}): GlyphVitePlugin {
+  const script = getColorModeScript(options)
+  return {
+    name: 'glyph:color-mode',
+    transformIndexHtml: {
+      order: 'pre',
+      handler: () => [{ tag: 'script', children: script, injectTo: 'head-prepend' }],
+    },
+  }
+}
+
+export type { ColorModeOptions }

package/src/internal/dev.ts

@@ -0,0 +1,12 @@
+// Bundlers replace process.env.NODE_ENV; the typeof guard keeps unbundled browsers safe.
+declare const process: { env: { NODE_ENV?: string } } | undefined
+
+const warned = new Set<string>()
+
+/** Logs a console warning once per key, in development only. */
+export function warnOnce(key: string, message: string): void {
+  if (typeof process === 'undefined' || process.env.NODE_ENV === 'production') return
+  if (warned.has(key)) return
+  warned.add(key)
+  console.warn(`[glyph] ${message}`)
+}

package/src/motion/active-indicator.tsx

@@ -0,0 +1,26 @@
+import { m } from 'motion/react'
+import { useMotionSettings } from './use-motion-settings'
+
+interface ActiveIndicatorProps {
+  /** Shared by every indicator in one group, so the active one slides between items. */
+  layoutId: string
+  className?: string | undefined
+}
+
+/**
+ * The highlight behind (or under) the active item of Tabs, SegmentedControl, Sidebar and
+ * similar. Rendered only inside the active item; `motion` animates it from the previous one.
+ */
+export function ActiveIndicator({ layoutId, className }: ActiveIndicatorProps) {
+  const { animate } = useMotionSettings()
+  if (!animate) return <span aria-hidden="true" data-slot="indicator" className={className} />
+  return (
+    <m.span
+      aria-hidden="true"
+      data-slot="indicator"
+      layoutId={layoutId}
+      initial={false}
+      className={className}
+    />
+  )
+}