@adea-ai/ui 0.60.4 → 0.61.0

package/src/components/theme-provider.tsx

@@ -1,214 +0,0 @@
-import {
-  createContext,
-  createEffect,
-  createSignal,
-  onCleanup,
-  useContext,
-  type Accessor,
-  type JSX,
-  type ParentProps,
-} from 'solid-js'
-
-import {
-  appearanceThemeScript,
-  applyAppearanceToDocument,
-  DARK_QUERY,
-  defaultAppearancePreferences,
-  type AppearanceMode,
-  type AppearancePreferencesV2,
-  type ResolvedAppearance,
-  readAppearancePreferences,
-  REDUCED_TRANSPARENCY_QUERY,
-  resolveAppearanceState,
-  writeAppearancePreferences,
-} from './appearance'
-
-export type Theme = AppearanceMode
-export type ResolvedTheme = ResolvedAppearance
-
-export type { AppearanceMode, AppearancePreferencesV2, ResolvedAppearance } from './appearance'
-
-type ThemeContextValue = {
-  /** The persisted v2 appearance preferences. */
-  preferences: Accessor<AppearancePreferencesV2>
-  /** Mode after combining the user choice with the OS report. */
-  resolvedMode: Accessor<ResolvedAppearance>
-  /** The active theme variant id (`documentElement.dataset.theme`). */
-  variantId: Accessor<string>
-  /** Surface after reduced-transparency and capability resolution. */
-  effectiveSurface: Accessor<'opaque' | 'frosted' | 'translucent'>
-  /** True while the OS or the user forces opaque surfaces. */
-  reduceTransparencyActive: Accessor<boolean>
-  /** Persist a field update immediately (Zeron's `SavePolicy::Immediate`). */
-  update: (patch: Partial<AppearancePreferencesV2>) => void
-  /** Apply a draft against the visible app without persisting it. */
-  preview: (preferences: AppearancePreferencesV2 | undefined) => void
-
-  /** Legacy single-mode seam (settings toggle and existing consumers). */
-  theme: Accessor<Theme>
-  resolvedTheme: Accessor<ResolvedTheme>
-  setTheme: (theme: Theme) => void
-}
-
-const ThemeContext = createContext<ThemeContextValue>()
-
-function systemPrefersDark(): boolean {
-  return typeof window !== 'undefined' && window.matchMedia(DARK_QUERY).matches
-}
-
-function systemReducesTransparency(): boolean {
-  return typeof window !== 'undefined' && window.matchMedia(REDUCED_TRANSPARENCY_QUERY).matches
-}
-
-type ThemeProviderProps = ParentProps<{
-  defaultTheme?: Theme
-  disableTransitionOnChange?: boolean
-  /**
-   * Whether the host window can render OS translucency. The web lane keeps
-   * the default `false` and renders tokenized frosted surfaces instead of
-   * pretending to OS vibrancy.
-   */
-  nativeTranslucency?: boolean
-}>
-
-/**
- * The shared Solid appearance provider. It owns the versioned appearance
- * preference (mode, independent light/dark themes, accent, surface) on top of
- * the contract the previous provider exposed to the token layer: a `dark`
- * class on the document element plus a `color-scheme` style, persisted in
- * `localStorage` and defaulting to the system preference. The legacy single
- * `theme` key migrates on read and is never deleted.
- */
-export function ThemeProvider(props: ThemeProviderProps) {
-  const storage = typeof window === 'undefined' ? undefined : window.localStorage
-  const stored = readAppearancePreferences(storage)
-  // A legacy or default record keeps the historical `defaultTheme` escape
-  // hatch meaningful for embedders.
-  const initial =
-    stored === defaultAppearancePreferences && props.defaultTheme
-      ? { ...stored, mode: props.defaultTheme }
-      : stored
-  const [preferences, setPreferences] = createSignal<AppearancePreferencesV2>(initial)
-  const [prefersDark, setPrefersDark] = createSignal(systemPrefersDark())
-  const [osReducedTransparency, setOsReducedTransparency] = createSignal(
-    systemReducesTransparency()
-  )
-  const nativeTranslucency = () => props.nativeTranslucency ?? false
-
-  if (typeof window !== 'undefined') {
-    const darkMedia = window.matchMedia(DARK_QUERY)
-    const onDarkChange = (event: MediaQueryListEvent) => setPrefersDark(event.matches)
-    darkMedia.addEventListener('change', onDarkChange)
-    onCleanup(() => darkMedia.removeEventListener('change', onDarkChange))
-
-    const transparencyMedia = window.matchMedia(REDUCED_TRANSPARENCY_QUERY)
-    const onTransparencyChange = (event: MediaQueryListEvent) =>
-      setOsReducedTransparency(event.matches)
-    transparencyMedia.addEventListener('change', onTransparencyChange)
-    onCleanup(() => transparencyMedia.removeEventListener('change', onTransparencyChange))
-  }
-
-  const resolvedState = () =>
-    resolveAppearanceState(preferences(), {
-      systemAppearance: prefersDark() ? 'dark' : 'light',
-      osReducedTransparency: osReducedTransparency(),
-      nativeTranslucency: nativeTranslucency(),
-    })
-
-  const persist = (next: AppearancePreferencesV2) => {
-    setPreferences(next)
-    writeAppearancePreferences(storage, next)
-  }
-
-  createEffect(() => {
-    applyResolved(resolvedState(), props.disableTransitionOnChange ?? true)
-  })
-
-  const update = (patch: Partial<AppearancePreferencesV2>) => {
-    persist({ ...preferences(), ...patch })
-  }
-
-  const preview = (draft: AppearancePreferencesV2 | undefined) => {
-    if (!draft) {
-      applyResolved(resolvedState(), props.disableTransitionOnChange ?? true)
-      return
-    }
-    applyResolved(
-      resolveAppearanceState(draft, {
-        systemAppearance: prefersDark() ? 'dark' : 'light',
-        osReducedTransparency: osReducedTransparency(),
-        nativeTranslucency: nativeTranslucency(),
-      }),
-      props.disableTransitionOnChange ?? true
-    )
-  }
-
-  // Legacy seam: the single `theme` value is the v2 mode.
-  const theme = (): Theme => preferences().mode
-  const resolvedTheme = (): ResolvedTheme => resolvedState().resolvedMode
-  const setTheme = (next: Theme) => update({ mode: next })
-
-  return (
-    <ThemeContext.Provider
-      value={{
-        preferences,
-        resolvedMode: resolvedTheme,
-        variantId: () => resolvedState().variant.id,
-        effectiveSurface: () => resolvedState().effectiveSurface,
-        reduceTransparencyActive: () => resolvedState().reduceTransparencyActive,
-        update,
-        preview,
-        theme,
-        resolvedTheme,
-        setTheme,
-      }}
-    >
-      {props.children}
-    </ThemeContext.Provider>
-  )
-}
-
-/**
- * Applies the resolved theme to the document and suppresses transitions for the
- * frame that carries the change, so a theme switch cannot animate page-wide.
- */
-function applyResolved(
-  state: ReturnType<typeof resolveAppearanceState>,
-  disableTransitionOnChange: boolean
-): void {
-  if (typeof document === 'undefined') return
-
-  let restoreTransitions: (() => void) | undefined
-
-  if (disableTransitionOnChange) {
-    const style = document.createElement('style')
-    style.appendChild(document.createTextNode('*{transition:none !important}'))
-    document.head.appendChild(style)
-    void style.offsetHeight
-    restoreTransitions = () => style.remove()
-  }
-
-  applyAppearanceToDocument(document, state)
-
-  if (restoreTransitions) {
-    requestAnimationFrame(() => requestAnimationFrame(() => restoreTransitions?.()))
-  }
-}
-
-export function useTheme(): ThemeContextValue {
-  const context = useContext(ThemeContext)
-  if (!context) {
-    throw new Error('useTheme must be used within a ThemeProvider.')
-  }
-  return context
-}
-
-/**
- * Pre-paint appearance restore for server-rendered documents. Rendered in the
- * document head, it resolves the stored (or legacy) preference against the OS
- * and applies the palette before first paint so hydration never shows the
- * wrong theme.
- */
-export function ThemeScript(): JSX.Element {
-  return <script innerHTML={appearanceThemeScript()} />
-}

package/src/components/theme-swatch.tsx

@@ -1,49 +0,0 @@
-import { For } from 'solid-js'
-
-import type { ThemeVariant } from './appearance'
-
-/*
- * Preview swatches for the appearance pickers: small role-colored dots so a
- * palette can be previewed without applying it. Colors arrive as runtime
- * token data from the theme manifest, so painting them must inline them —
- * this component is the one sanctioned bridge between token data and the DOM
- * (token data may never become a component color literal).
- */
-
-/** The three-dot preview for a theme variant (background, primary, card). */
-export function ThemeSwatch(props: { class?: string; variant: ThemeVariant }) {
-  const swatches = () => [
-    { role: 'Background', color: props.variant.colors.background },
-    { role: 'Primary', color: props.variant.colors.primary },
-    { role: 'Card', color: props.variant.colors.card },
-  ]
-  return (
-    // Decorative next to the variant name; the dots duplicate information the
-    // adjacent text already gives assistive technology.
-    <span class={props.class} aria-hidden="true">
-      <For each={swatches()}>
-        {(swatch) => (
-          <span
-            class="theme-swatch__dot"
-            title={swatch.role}
-            // oxlint-disable-next-line no-inline-styles -- dynamic token data, see file docstring
-            style={{ 'background-color': swatch.color }}
-          />
-        )}
-      </For>
-    </span>
-  )
-}
-
-/** Single-color swatch (accent presets and custom accents). */
-export function ColorSwatch(props: { class?: string; color: string; label: string }) {
-  return (
-    <span class={props.class} role="img" aria-label={props.label}>
-      <span
-        class="theme-swatch__dot"
-        // oxlint-disable-next-line no-inline-styles -- dynamic token data, see file docstring
-        style={{ 'background-color': props.color }}
-      />
-    </span>
-  )
-}

package/src/components/theme-toggle.tsx

@@ -1,48 +0,0 @@
-import { Monitor, Moon, Sun } from 'lucide-solid'
-import { For } from 'solid-js'
-
-import { Button } from '#components/ui/button'
-import { cn } from '#lib/utils'
-import { useTheme, type Theme } from './theme-provider'
-
-const THEMES: ReadonlyArray<{ value: Theme; label: string; icon: typeof Sun }> = [
-  { value: 'system', label: 'System theme', icon: Monitor },
-  { value: 'light', label: 'Light theme', icon: Sun },
-  { value: 'dark', label: 'Dark theme', icon: Moon },
-]
-
-/**
- * Compact sun/moon theme selector. Wired to the shared theme provider so the
- * choice persists across the app (localStorage) and applies to every scene.
- */
-export function ThemeToggle(props: { class?: string }) {
-  const { theme, setTheme } = useTheme()
-
-  return (
-    <div
-      class={cn(
-        'inline-flex items-center gap-2 rounded-full border border-input bg-background p-2',
-        props.class
-      )}
-      role="radiogroup"
-      aria-label="Theme"
-    >
-      <For each={THEMES}>
-        {(option) => (
-          <Button
-            type="button"
-            role="radio"
-            aria-checked={theme() === option.value}
-            aria-label={option.label}
-            variant={theme() === option.value ? 'default' : 'ghost'}
-            size="icon-sm"
-            onClick={() => setTheme(option.value)}
-            class="rounded-full"
-          >
-            <option.icon class="size-4" aria-hidden="true" />
-          </Button>
-        )}
-      </For>
-    </div>
-  )
-}

package/src/components/ui/badge.tsx

@@ -1,40 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-import { splitProps, type ComponentProps } from 'solid-js'
-
-import { cn } from '#lib/utils'
-
-const badgeVariants = cva(
-  'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!',
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
-        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
-        destructive:
-          'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
-        outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
-        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-)
-
-type BadgeProps = ComponentProps<'span'> & VariantProps<typeof badgeVariants>
-
-function Badge(props: BadgeProps) {
-  const [local, rest] = splitProps(props, ['class', 'variant'])
-  return (
-    <span
-      data-slot="badge"
-      data-variant={local.variant ?? 'default'}
-      class={cn(badgeVariants({ variant: local.variant }), local.class)}
-      {...rest}
-    />
-  )
-}
-
-export { Badge, badgeVariants, type BadgeProps }

package/src/components/ui/button.tsx

@@ -1,58 +0,0 @@
-import { cva, type VariantProps } from 'class-variance-authority'
-import { splitProps, type ComponentProps } from 'solid-js'
-
-import { cn } from '#lib/utils'
-
-const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-  {
-    variants: {
-      variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/80',
-        outline:
-          'border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50',
-        secondary:
-          'bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
-        ghost:
-          'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
-        destructive:
-          'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
-        success:
-          'bg-success/10 text-success hover:bg-success/20 focus-visible:border-success/40 focus-visible:ring-success/20 dark:bg-success/20 dark:hover:bg-success/30 dark:focus-visible:ring-success/40',
-        link: 'text-primary underline-offset-4 hover:underline',
-      },
-      size: {
-        default:
-          'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-        icon: 'size-8',
-        'icon-xs':
-          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-        'icon-sm':
-          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
-        'icon-lg': 'size-9',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
-)
-
-type ButtonProps = ComponentProps<'button'> & VariantProps<typeof buttonVariants>
-
-function Button(props: ButtonProps) {
-  const [local, rest] = splitProps(props, ['class', 'variant', 'size'])
-  return (
-    <button
-      data-slot="button"
-      class={cn(buttonVariants({ variant: local.variant, size: local.size }), local.class)}
-      {...rest}
-    />
-  )
-}
-
-export { Button, buttonVariants, type ButtonProps }

package/src/components/ui/card.tsx

@@ -1,21 +0,0 @@
-import { splitProps, type ComponentProps } from 'solid-js'
-
-import { cn } from '#lib/utils'
-
-function Card(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
-  return (
-    <div
-      data-slot="card"
-      class={cn('rounded-xl border bg-card text-card-foreground shadow-sm', local.class)}
-      {...rest}
-    />
-  )
-}
-
-function CardContent(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
-  return <div data-slot="card-content" class={cn('p-4', local.class)} {...rest} />
-}
-
-export { Card, CardContent }

package/src/components/ui/dialog.tsx

@@ -1,132 +0,0 @@
-import { Dialog as DialogPrimitive } from '@kobalte/core/dialog'
-import { X } from 'lucide-solid'
-import { splitProps, type ComponentProps } from 'solid-js'
-
-import { cn } from '#lib/utils'
-
-function Dialog(props: ComponentProps<typeof DialogPrimitive>) {
-  // Background inertness is owned by `ModalDialog` (see
-  // packages/workspace-ui), which marks the rest of the document `inert` while
-  // a dialog is open. Kobalte's own modal layer hides the document with
-  // `aria-hidden` and can leave that attribute behind when a dialog closes as
-  // a side effect of an async action, which would hide the whole workspace
-  // from assistive technology.
-  return <DialogPrimitive data-slot="dialog" modal={false} {...props} />
-}
-
-function DialogTrigger(props: ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
-}
-
-function DialogPortal(props: ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
-}
-
-function DialogClose(props: ComponentProps<typeof DialogPrimitive.CloseButton>) {
-  return <DialogPrimitive.CloseButton data-slot="dialog-close" {...props} />
-}
-
-function DialogOverlay(props: ComponentProps<typeof DialogPrimitive.Overlay>) {
-  const [local, rest] = splitProps(props, ['class'])
-  return (
-    <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
-      class={cn('fixed inset-0 z-(--z-dialog) bg-scrim/55 backdrop-blur-[2px]', local.class)}
-      {...rest}
-    />
-  )
-}
-
-function DialogContent(
-  props: ComponentProps<typeof DialogPrimitive.Content> & { showCloseButton?: boolean }
-) {
-  const [local, rest] = splitProps(props, ['class', 'children', 'showCloseButton'])
-  return (
-    <DialogPortal>
-      <DialogOverlay />
-      {/* Flex centering keeps the dialog on whole pixels; a translate-based
-          center can land on a half pixel and shift every edge. */}
-      <div class="fixed inset-0 z-(--z-dialog) flex items-center justify-center p-4">
-        <DialogPrimitive.Content
-          data-slot="dialog-content"
-          class={cn(
-            'relative grid max-h-[min(44rem,calc(100dvh-2rem))] w-full max-w-2xl gap-0 overflow-hidden rounded-2xl border bg-card text-card-foreground shadow-2xl outline-none',
-            local.class
-          )}
-          {...rest}
-        >
-          {local.children}
-          {(local.showCloseButton ?? true) ? (
-            <DialogPrimitive.CloseButton
-              data-slot="dialog-close"
-              class="absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50"
-              aria-label="Close dialog"
-            >
-              <X class="size-4" aria-hidden="true" />
-            </DialogPrimitive.CloseButton>
-          ) : null}
-        </DialogPrimitive.Content>
-      </div>
-    </DialogPortal>
-  )
-}
-
-function DialogHeader(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
-  return (
-    <div
-      data-slot="dialog-header"
-      class={cn('flex flex-col gap-1.5 border-b px-6 py-5 pr-14', local.class)}
-      {...rest}
-    />
-  )
-}
-
-function DialogFooter(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
-  return (
-    <div
-      data-slot="dialog-footer"
-      class={cn(
-        'flex flex-col-reverse gap-2 border-t px-6 py-4 sm:flex-row sm:justify-end',
-        local.class
-      )}
-      {...rest}
-    />
-  )
-}
-
-function DialogTitle(props: ComponentProps<typeof DialogPrimitive.Title>) {
-  const [local, rest] = splitProps(props, ['class'])
-  return (
-    <DialogPrimitive.Title
-      data-slot="dialog-title"
-      class={cn('text-base font-semibold tracking-tight', local.class)}
-      {...rest}
-    />
-  )
-}
-
-function DialogDescription(props: ComponentProps<typeof DialogPrimitive.Description>) {
-  const [local, rest] = splitProps(props, ['class'])
-  return (
-    <DialogPrimitive.Description
-      data-slot="dialog-description"
-      class={cn('text-sm leading-5 text-muted-foreground', local.class)}
-      {...rest}
-    />
-  )
-}
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-}