@adea-ai/ui 0.60.3 → 0.61.0

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

@@ -0,0 +1,132 @@
+import { Dialog as KobalteDialog } from '@kobalte/core/dialog'
+import { X } from 'lucide-solid'
+import type { ComponentProps, JSX } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { cva, type VariantProps } from '#lib/variants'
+import { cn } from '#lib/utils'
+import { DialogOverlay } from '../dialog/dialog'
+
+/**
+ * Sheet.
+ *
+ * A dialog anchored to an edge of the window rather than centred. Use it when
+ * the content is a *panel beside* the work — a details inspector, a filter rail,
+ * a settings flyout — so the user keeps the context it belongs to in view.
+ * A centred dialog interrupts; a sheet is inspected.
+ *
+ * `side` decides which edge; the panel is a full-height column for `start` and
+ * `end`, and a full-width row for `top` and `bottom`. The slide-in direction
+ * follows from the side, so a caller never pairs them by hand.
+ */
+const sheetVariants = cva(
+  'bg-popover text-popover-foreground fixed z-(--z-dialog) flex flex-col gap-4 border-border shadow-lg',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 h-auto max-h-[85vh] rounded-b-xl border-b data-expanded:slide-in-from-top data-closed:slide-out-to-top',
+        bottom:
+          'inset-x-0 bottom-0 h-auto max-h-[85vh] rounded-t-xl border-t data-expanded:slide-in-from-bottom data-closed:slide-out-to-bottom',
+        start:
+          'inset-y-0 start-0 h-full w-80 max-w-[85vw] rounded-e-xl border-e data-expanded:slide-in-from-left data-closed:slide-out-to-left',
+        end: 'inset-y-0 end-0 h-full w-80 max-w-[85vw] rounded-s-xl border-s data-expanded:slide-in-from-right data-closed:slide-out-to-right',
+      },
+    },
+    defaultVariants: { side: 'end' },
+  }
+)
+
+export type SheetContentProps = ComponentProps<typeof KobalteDialog.Content> &
+  VariantProps<typeof sheetVariants> & {
+    closeButton?: JSX.Element | false
+  }
+
+export function SheetContent(props: SheetContentProps) {
+  const [local, rest] = splitProps(props, ['class', 'side', 'children', 'closeButton'])
+
+  return (
+    <KobalteDialog.Portal>
+      <DialogOverlay />
+      <KobalteDialog.Content
+        class={cn(
+          sheetVariants({ side: local.side }),
+          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:duration-200',
+          'data-closed:animate-out data-closed:fade-out-0 data-closed:duration-150',
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+        <Show when={local.closeButton !== false}>
+          <KobalteDialog.CloseButton
+            aria-label="Close"
+            class="absolute top-3.5 end-3.5 rounded-md p-1 text-muted-foreground transition-colors ease-out outline-none hover:bg-surface-hover hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle"
+          >
+            {local.closeButton ?? <X class="size-4" />}
+          </KobalteDialog.CloseButton>
+        </Show>
+      </KobalteDialog.Content>
+    </KobalteDialog.Portal>
+  )
+}
+
+export function Sheet(props: ComponentProps<typeof KobalteDialog>) {
+  return <KobalteDialog {...props} />
+}
+
+export function SheetTrigger(props: ComponentProps<typeof KobalteDialog.Trigger>) {
+  return <KobalteDialog.Trigger {...props} />
+}
+
+export function SheetCloseButton(props: ComponentProps<typeof KobalteDialog.CloseButton>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <KobalteDialog.CloseButton class={cn(local.class)} {...rest} />
+}
+
+export function SheetHeader(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="sheet-header"
+      class={cn('flex flex-col gap-1.5 border-b border-border p-4 pe-12 text-start', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function SheetBody(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="sheet-body"
+      class={cn('flex-1 overflow-y-auto px-4 pb-4', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function SheetFooter(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="sheet-footer"
+      class={cn('flex items-center justify-end gap-2 border-t border-border p-4', local.class)}
+      {...rest}
+    />
+  )
+}
+
+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} />
+  )
+}
+
+export function SheetDescription(props: ComponentProps<typeof KobalteDialog.Description>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteDialog.Description class={cn('text-muted-foreground text-sm', local.class)} {...rest} />
+  )
+}
+
+export { sheetVariants }

package/src/components/ui/skeleton/index.ts

@@ -0,0 +1 @@
+export { Skeleton } from './skeleton'

package/src/components/ui/skeleton/skeleton.tsx

@@ -0,0 +1,28 @@
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * Skeleton.
+ *
+ * A placeholder that stands in for content whose shape is already known. It
+ * carries `aria-hidden` and no text, because the loading state is announced by
+ * the region that owns it — a skeleton that says "loading" would announce it
+ * once per bar.
+ *
+ * The shimmer is a background animation rather than a moving gradient element
+ * so it costs one paint and no layout, and it stops under `prefers-reduced-motion`
+ * (base.css).
+ */
+export function Skeleton(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <div
+      data-slot="skeleton"
+      aria-hidden="true"
+      class={cn('bg-muted animate-shimmer rounded-md', local.class)}
+      {...rest}
+    />
+  )
+}

package/src/components/ui/slider/index.ts

@@ -0,0 +1 @@
+export { Slider, type SliderProps } from './slider'

package/src/components/ui/slider/slider.tsx

@@ -0,0 +1,81 @@
+import { Slider as KobalteSlider } from '@kobalte/core/slider'
+import type { ComponentProps } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * Slider.
+ *
+ * For a value on a continuum where position matters more than precision — a
+ * zoom, a volume, a threshold. When the number matters, pass `valueLabel` so
+ * the value is both adjustable *and* readable; a bare slider is a control
+ * nobody can set exactly.
+ *
+ * Kobalte handles pointer capture, keyboard stepping and the ARIA value
+ * wiring; this paints the track, fill and thumb.
+ */
+export type SliderProps = ComponentProps<typeof KobalteSlider> & {
+  trackClass?: string
+  rangeClass?: string
+  thumbClass?: string
+  /** Show the current value beside the thumb while dragging. */
+  valueLabel?: boolean
+}
+
+export function Slider(props: SliderProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'trackClass',
+    'rangeClass',
+    'thumbClass',
+    'valueLabel',
+    'children',
+    'aria-label',
+    'aria-labelledby',
+  ])
+
+  return (
+    <KobalteSlider
+      class={cn(
+        'relative flex touch-none flex-col justify-center select-none',
+        'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-5 data-[orientation=horizontal]:w-full',
+        'data-[disabled]:opacity-50',
+        local.class
+      )}
+      {...rest}
+    >
+      <KobalteSlider.Track
+        class={cn(
+          'bg-input relative grow overflow-hidden rounded-full',
+          'data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full',
+          'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',
+          local.trackClass
+        )}
+      >
+        <KobalteSlider.Fill
+          class={cn(
+            'bg-primary absolute rounded-full',
+            'data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',
+            local.rangeClass
+          )}
+        />
+      </KobalteSlider.Track>
+      {local.children}
+      <KobalteSlider.Thumb
+        aria-label={local['aria-label']}
+        aria-labelledby={local['aria-labelledby']}
+        class={cn(
+          'border-primary bg-background block size-4 shrink-0 rounded-full border-2 shadow-xs',
+          'transition-[color,box-shadow] ease-out outline-none',
+          'hover:ring-4 hover:ring-primary-subtle',
+          'focus-visible:ring-4 focus-visible:ring-primary-subtle',
+          local.thumbClass
+        )}
+      >
+        <Show when={local.valueLabel}>
+          <KobalteSlider.ValueLabel class="bg-popover text-popover-foreground absolute -top-6 left-1/2 -translate-x-1/2 rounded-sm border border-border px-1 text-2xs tabular-nums" />
+        </Show>
+      </KobalteSlider.Thumb>
+    </KobalteSlider>
+  )
+}

package/src/components/ui/spinner/index.ts

@@ -0,0 +1 @@
+export { Spinner, type SpinnerProps } from './spinner'

package/src/components/ui/spinner/spinner.tsx

@@ -0,0 +1,58 @@
+import { LoaderCircle } from 'lucide-solid'
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cva, type VariantProps } from '#lib/variants'
+import { cn } from '#lib/utils'
+
+/**
+ * Spinner.
+ *
+ * A determinate-length activity indicator with no progress to report. When
+ * there *is* progress, use Progress instead — a spinner next to a known
+ * percentage is a lie about what the app knows.
+ *
+ * The glyph spins continuously, so it is the one thing in the system that
+ * keeps moving under `prefers-reduced-motion`; base.css only shortens
+ * `animation-duration` for the *entrance* animations and leaves this loop
+ * alone. A frozen spinner reads as a hang, which is worse than motion.
+ */
+const spinnerVariants = cva('animate-spin shrink-0', {
+  variants: {
+    size: {
+      xs: 'size-3',
+      sm: 'size-3.5',
+      md: 'size-4',
+      lg: 'size-5',
+      xl: 'size-6',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+type SpinnerVariants = VariantProps<typeof spinnerVariants>
+
+export type SpinnerProps = Omit<ComponentProps<'svg'>, 'size'> &
+  SpinnerVariants & {
+    /** An accessible name. Defaults to "Loading"; pass `false` to hide it. */
+    label?: string | false
+  }
+
+export function Spinner(props: SpinnerProps) {
+  const [local, rest] = splitProps(props, ['class', 'size', 'label'])
+
+  return (
+    <>
+      <LoaderCircle
+        data-slot="spinner"
+        role="status"
+        aria-label={local.label === false ? undefined : (local.label ?? 'Loading')}
+        aria-hidden={local.label === false ? 'true' : undefined}
+        class={cn(spinnerVariants({ size: local.size }), local.class)}
+        {...rest}
+      />
+      {local.label === false ? null : (
+        <span class="visually-hidden">{local.label ?? 'Loading'}</span>
+      )}
+    </>
+  )
+}

package/src/components/ui/status-chip/index.ts

@@ -0,0 +1,8 @@
+export {
+  StatusChip,
+  StatusList,
+  statusDotVariants,
+  type StatusChipProps,
+  type StatusEntry,
+  type StatusTone,
+} from './status-chip'

package/src/components/ui/status-chip/status-chip.tsx

@@ -0,0 +1,142 @@
+import { Show, splitProps, type ComponentProps, type JSX } from 'solid-js'
+import { cva } from '#lib/variants'
+import { cn } from '#lib/utils'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../tooltip'
+
+/**
+ * StatusChip.
+ *
+ * A state, said in one word, with the reason available on hover. It exists
+ * because a status readout has three parts that are always the same three parts —
+ * a tone, a label, and the detail that justifies the label — and rendering them
+ * ad hoc produces the two failures this component is here to prevent: a colour
+ * with no text (unreadable to anyone who cannot see it) and a bare word with no
+ * explanation ("Needs configuration" — of what?).
+ *
+ * The tones are deliberately not a rainbow. Six cover what a status can actually
+ * mean:
+ *
+ * - `neutral` — fine, and there is nothing to say about it.
+ * - `success` — a check passed, a capability is ready, a job finished.
+ * - `warning` — degraded, or needs a decision from the user.
+ * - `danger` — blocked, failed, unrecoverable without intervention.
+ * - `info` — in flight or scheduled; work is happening, nothing is wrong.
+ * - `unknown` — the honest absence of information.
+ *
+ * `unknown` is not the same as `neutral`, and collapsing them is the mistake
+ * worth avoiding: "this is idle" and "we have not been told yet" are different
+ * facts, and a product that shows the second as the first is lying quietly. The
+ * ring is hollow so it also reads as different in greyscale.
+ *
+ * The dot is `aria-hidden` and the label carries the meaning, so a tone is never
+ * the only signal.
+ */
+export const statusDotVariants = cva('size-2 shrink-0 rounded-full', {
+  variants: {
+    tone: {
+      neutral: 'bg-muted-foreground',
+      success: 'bg-success',
+      warning: 'bg-warning',
+      danger: 'bg-destructive',
+      info: 'bg-info',
+      unknown: 'border border-muted-foreground bg-transparent',
+    },
+  },
+  defaultVariants: { tone: 'neutral' },
+})
+
+const labelTone: Record<StatusTone, string> = {
+  neutral: 'text-foreground',
+  success: 'text-success',
+  warning: 'text-warning',
+  danger: 'text-destructive',
+  info: 'text-info',
+  unknown: 'text-muted-foreground',
+}
+
+export type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' | 'unknown'
+
+export type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {
+  tone?: StatusTone
+  label: string
+  /** Why the status is what it is. Shown in a tooltip; omit for a self-evident label. */
+  detail?: string
+  /** A trailing slot: a timestamp, a retry affordance, a count. */
+  trailing?: JSX.Element
+}
+
+export function StatusChip(props: StatusChipProps) {
+  const [local, rest] = splitProps(props, ['tone', 'label', 'detail', 'trailing', 'class'])
+
+  const chip = (
+    <span
+      class={cn(
+        'inline-flex w-fit items-center gap-1.5 text-xs font-medium whitespace-nowrap',
+        labelTone[local.tone ?? 'neutral'],
+        local.class
+      )}
+      {...rest}
+    >
+      <span class={statusDotVariants({ tone: local.tone })} aria-hidden="true" />
+      {local.label}
+      {local.trailing}
+    </span>
+  )
+
+  return (
+    <Show when={local.detail} fallback={chip}>
+      {(detail) => (
+        <Tooltip>
+          <TooltipTrigger as="span" class="inline-flex">
+            {chip}
+          </TooltipTrigger>
+          <TooltipContent>{detail()}</TooltipContent>
+        </Tooltip>
+      )}
+    </Show>
+  )
+}
+
+export type StatusEntry = Readonly<{
+  /** A stable key for the row. */
+  id: string
+  /** What is being reported — "Configuration", "Runtime", "Sync". */
+  name: string
+  tone: StatusTone
+  label: string
+  detail?: string
+}>
+
+/**
+ * StatusList.
+ *
+ * The several-facts-about-one-thing shape: an agent with a configuration state, a
+ * runtime state and an activity state; a service with a build, a deploy and a
+ * health check. It is a definition list rather than a table because there is no
+ * column to sort or compare — the rows are facets of a single subject, and a
+ * screen reader should hear them as such.
+ *
+ * Fixed width on the name column is what makes a column of these scannable; the
+ * rows line up without a table's semantics.
+ */
+export function StatusList(props: {
+  entries: readonly StatusEntry[]
+  class?: string
+  /** Hide the name column and show only the chips — for a compact badge strip. */
+  compact?: boolean
+}) {
+  return (
+    <dl class={cn('grid gap-2 text-sm', props.class)}>
+      {props.entries.map((entry) => (
+        <div class="flex items-baseline justify-between gap-4">
+          <Show when={!props.compact}>
+            <dt class="text-muted-foreground">{entry.name}</dt>
+          </Show>
+          <dd class={cn(!props.compact && 'shrink-0')}>
+            <StatusChip tone={entry.tone} label={entry.label} detail={entry.detail} />
+          </dd>
+        </div>
+      ))}
+    </dl>
+  )
+}

package/src/components/ui/switch/index.ts

@@ -0,0 +1 @@
+export { Switch, SwitchDescription, SwitchLabel, type SwitchProps } from './switch'

package/src/components/ui/switch/switch.tsx

@@ -0,0 +1,100 @@
+import { Switch as KobalteSwitch } from '@kobalte/core/switch'
+import type { ComponentProps, JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * Switch.
+ *
+ * For a setting that takes effect the moment it is flipped. The distinction
+ * from Checkbox is behaviour, not looks: a switch applies immediately and
+ * belongs in a settings row, while a checkbox is a value the user is still
+ * composing and is applied when a form is submitted. A switch inside an unsaved
+ * form is the mistake this split exists to prevent.
+ *
+ * `Switch.Input` renders a real hidden checkbox, so the control is
+ * form-native, keyboard-operable, and its `aria-checked` follows the state the
+ * user sees.
+ */
+export type SwitchProps = Omit<ComponentProps<typeof KobalteSwitch>, 'children'> & {
+  controlClass?: string
+  thumbClass?: string
+  labelClass?: string
+  descriptionClass?: string
+  /**
+   * Replaces the control and label. Omit it to get the default control beside
+   * `label` and `description`; supply it to compose the parts yourself.
+   */
+  children?: JSX.Element
+}
+
+export function Switch(props: SwitchProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'controlClass',
+    'thumbClass',
+    'labelClass',
+    'descriptionClass',
+    'children',
+    'aria-label',
+    'aria-labelledby',
+  ])
+
+  return (
+    <KobalteSwitch class={cn('group/switch flex items-center gap-2.5', local.class)} {...rest}>
+      {/* The name belongs on the input; see Checkbox for why. */}
+      <KobalteSwitch.Input
+        aria-label={local['aria-label']}
+        aria-labelledby={local['aria-labelledby']}
+      />
+      <KobalteSwitch.Control
+        class={cn(
+          'bg-input inline-flex h-5 w-9 shrink-0 items-center rounded-full border border-transparent',
+          'transition-colors ease-out outline-none',
+          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+          'data-[checked]:bg-primary',
+          'data-[invalid]:border-destructive',
+          'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+          local.controlClass
+        )}
+      >
+        <KobalteSwitch.Thumb
+          class={cn(
+            'bg-background pointer-events-none block size-4 rounded-full shadow-xs',
+            'transition-transform ease-out',
+            'data-[checked]:translate-x-4',
+            local.thumbClass
+          )}
+        />
+      </KobalteSwitch.Control>
+      {local.children ?? (
+        <div class="grid gap-0.5">
+          <KobalteSwitch.Label class={cn('text-sm leading-none font-medium', local.labelClass)} />
+          <KobalteSwitch.Description
+            class={cn('text-muted-foreground text-sm', local.descriptionClass)}
+          />
+        </div>
+      )}
+    </KobalteSwitch>
+  )
+}
+
+/**
+ * The switch's own label. Valid only inside a `<Switch>`: it is Kobalte's label
+ * for that root's control, and outside one there is nothing to associate with.
+ * A label drawn *beside* a switch — a settings row with the control trailing —
+ * is plain text, and the switch takes an `aria-label` instead.
+ */
+export function SwitchLabel(props: ComponentProps<typeof KobalteSwitch.Label>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteSwitch.Label class={cn('text-sm leading-none font-medium', local.class)} {...rest} />
+  )
+}
+
+export function SwitchDescription(props: ComponentProps<typeof KobalteSwitch.Description>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteSwitch.Description class={cn('text-muted-foreground text-sm', local.class)} {...rest} />
+  )
+}

package/src/components/ui/table/index.ts

@@ -0,0 +1,11 @@
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableNumericCell,
+  TableRow,
+} from './table'