@adea-ai/ui 0.61.0 → 0.62.0

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

@@ -0,0 +1,125 @@
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '../../../lib/utils'
+
+/**
+ * Table.
+ *
+ * Semantic markup, not a grid of divs. A `<table>` with a caption, a header
+ * scope and cells is navigable by a screen reader in ways a flex layout cannot
+ * be reproduced into, and it is what makes "row 3 of 12, Name column" work.
+ *
+ * Two decisions worth keeping:
+ *
+ *   - The header is sticky by default. A scrollable table whose header leaves
+ *     the viewport makes every row below it anonymous.
+ *   - Numbers are right-aligned and tabular. `text-end` plus `tabular-nums` is
+ *     what lets a column of figures be compared by eye; a proportional font
+ *     with ragged digits is unreadable at a glance.
+ *
+ * `TableNumericCell` exists so callers do not have to remember the second
+ * half of that rule.
+ */
+export function Table(props: ComponentProps<'table'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <div data-slot="table-container" class="relative w-full overflow-x-auto">
+      <table data-slot="table" class={cn('w-full caption-bottom text-sm', local.class)} {...rest} />
+    </div>
+  )
+}
+
+export function TableHeader(props: ComponentProps<'thead'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <thead
+      data-slot="table-header"
+      class={cn(
+        '[&_tr]:border-b [&_tr]:border-border sticky top-0 z-(--z-docked) bg-background',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function TableBody(props: ComponentProps<'tbody'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <tbody data-slot="table-body" class={cn('[&_tr:last-child]:border-0', local.class)} {...rest} />
+  )
+}
+
+export function TableFooter(props: ComponentProps<'tfoot'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <tfoot
+      data-slot="table-footer"
+      class={cn(
+        'bg-surface-hover border-t border-border font-medium [&>tr]:last:border-b-0',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function TableRow(props: ComponentProps<'tr'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <tr
+      data-slot="table-row"
+      class={cn(
+        'border-b border-border transition-colors ease-out',
+        'hover:bg-surface-hover data-[state=selected]:bg-primary-subtle',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function TableHead(props: ComponentProps<'th'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <th
+      data-slot="table-head"
+      scope={props.scope ?? 'col'}
+      class={cn(
+        'text-muted-foreground h-9 px-3 text-start align-middle text-xs font-medium whitespace-nowrap',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function TableCell(props: ComponentProps<'td'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <td data-slot="table-cell" class={cn('px-3 py-2 align-middle', local.class)} {...rest} />
+}
+
+export function TableNumericCell(props: ComponentProps<'td'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <td
+      data-slot="table-cell"
+      class={cn('px-3 py-2 text-end align-middle tabular-nums', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export function TableCaption(props: ComponentProps<'caption'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <caption
+      data-slot="table-caption"
+      class={cn('text-muted-foreground mt-3 text-sm', local.class)}
+      {...rest}
+    />
+  )
+}

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

@@ -0,0 +1,8 @@
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  type TabsListProps,
+  type TabsTriggerProps,
+} from './tabs'

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

@@ -0,0 +1,77 @@
+import { Tabs as KobalteTabs } from '@kobalte/core/tabs'
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '../../../lib/utils'
+
+/**
+ * Tabs.
+ *
+ * For switching between sibling views of the *same* subject — a file's code,
+ * diff and history. Not for moving between pages: a tab is expected to keep
+ * its panel and its scroll position, which a route does not.
+ *
+ * `appearance="segmented"` gives the joined bar KiroCrew uses inside a pane
+ * where a full-width underline would collide with the panel's own header rule.
+ */
+export function Tabs(props: ComponentProps<typeof KobalteTabs>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <KobalteTabs
+      class={cn('flex flex-col gap-2 data-[orientation=vertical]:flex-row', local.class)}
+      {...rest}
+    />
+  )
+}
+
+export type TabsListProps = ComponentProps<typeof KobalteTabs.List> & {
+  appearance?: 'underline' | 'segmented'
+}
+
+export function TabsList(props: TabsListProps) {
+  const [local, rest] = splitProps(props, ['class', 'appearance'])
+
+  return (
+    <KobalteTabs.List
+      class={cn(
+        'inline-flex w-fit shrink-0 items-center justify-center',
+        local.appearance === 'segmented'
+          ? 'gap-0.5 rounded-lg bg-surface-hover p-0.5'
+          : 'gap-1 rounded-none border-b border-border',
+        'data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export type TabsTriggerProps = ComponentProps<typeof KobalteTabs.Trigger> & {
+  appearance?: 'underline' | 'segmented'
+}
+
+export function TabsTrigger(props: TabsTriggerProps) {
+  const [local, rest] = splitProps(props, ['class', 'appearance'])
+
+  return (
+    <KobalteTabs.Trigger
+      class={cn(
+        'inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium',
+        'transition-colors ease-out outline-none select-none',
+        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+        'disabled:pointer-events-none disabled:opacity-50',
+        'text-muted-foreground hover:text-foreground data-[selected]:text-foreground',
+        '[&_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',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function TabsContent(props: ComponentProps<typeof KobalteTabs.Content>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <KobalteTabs.Content class={cn('flex-1 outline-none', local.class)} {...rest} />
+}

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

@@ -0,0 +1 @@
+export { Textarea } from './textarea'

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

@@ -0,0 +1,36 @@
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '../../../lib/utils'
+
+/**
+ * Textarea.
+ *
+ * Shares the Input's border, focus and invalid treatment exactly — the two are
+ * the same control at different aspect ratios, and a form that mixes them must
+ * not show a seam between them.
+ *
+ * `field-sizing: content` lets the element grow with its content where the
+ * engine supports it, which is the behaviour a chat composer wants; `rows`
+ * remains the fallback so an unsupported engine still gets a usable height.
+ */
+export function Textarea(props: ComponentProps<'textarea'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <textarea
+      data-slot="textarea"
+      class={cn(
+        'flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-control-md py-2 text-sm',
+        'transition-[color,box-shadow,border-color] ease-out outline-none',
+        'placeholder:text-muted-foreground',
+        'selection:bg-primary selection:text-primary-foreground',
+        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',
+        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+        'resize-y',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}

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

@@ -0,0 +1 @@
+export { Toaster, toast, toaster, type ToastOptions, type ToasterProps } from './toast'

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

@@ -0,0 +1,220 @@
+import { Toast as KobalteToast, type ToastComponentProps, toaster } from '@kobalte/core/toast'
+import { X } from 'lucide-solid'
+import type { ComponentProps, JSX } from 'solid-js'
+import { Show, splitProps } from 'solid-js'
+import { cn } from '../../../lib/utils'
+
+/**
+ * Toast.
+ *
+ * A short, self-dismissing message about something that already happened.
+ *
+ * The rules that make toasts helpful rather than hostile are built into this
+ * API rather than left to callers:
+ *
+ *   - A toast never carries the only route to an action. Anything important
+ *     enough to need doing belongs in the interface, not in a message that
+ *     disappears. `action` exists, but it is a convenience, not a flow.
+ *   - Errors from user-initiated work get `priority="high"` so a screen reader
+ *     interrupts to announce them; background progress uses the default low
+ *     priority so it is not read over whatever the user is doing.
+ *   - A toast with a way to undo is preferred to a confirmation dialog for a
+ *     reversible action. Undo after the fact costs the user nothing; a modal
+ *     before it costs everyone a click.
+ *
+ * `Toaster` is mounted once, near the root of the app.
+ */
+
+type ToastTone = 'default' | 'success' | 'warning' | 'destructive' | 'info'
+
+/**
+ * The tone dot's colour. A custom property rather than five colour utilities
+ * because the value is applied inline (the tone is data, not markup) and a
+ * Tailwind colour class cannot be built from a runtime value without becoming
+ * invisible to the linter.
+ */
+const toastTones: Record<ToastTone, string> = {
+  default: 'var(--foreground)',
+  success: 'var(--success)',
+  warning: 'var(--warning)',
+  destructive: 'var(--destructive)',
+  info: 'var(--info)',
+}
+
+export type ToastOptions = {
+  title: string
+  description?: string
+  tone?: ToastTone
+  /** A control rendered inside the toast, usually an Undo. */
+  action?: JSX.Element
+  /** Keep the toast until it is dismissed. Use for a failure the user must see. */
+  persistent?: boolean
+  /** Milliseconds before auto-dismiss. Overrides the region's setting. */
+  duration?: number
+  /** Which Toaster region to render into. */
+  region?: string
+}
+
+function ToastCard(props: ToastComponentProps & ToastOptions) {
+  const tone = () => props.tone ?? 'default'
+
+  return (
+    <KobalteToast
+      toastId={props.toastId}
+      /**
+       * A user-initiated outcome is announced; a background one waits its turn.
+       * A failure the user caused is worth interrupting for; a sync finishing
+       * quietly is not.
+       */
+      priority={tone() === 'destructive' ? 'high' : 'low'}
+      duration={props.duration}
+      persistent={props.persistent}
+      class={cn(
+        'pointer-events-auto flex w-full items-start gap-3 rounded-xl border border-border bg-popover p-3 shadow-lg',
+        'data-[opened]:animate-in data-[opened]:slide-in-from-right-full data-[opened]:fade-in-0',
+        'data-[closed]:animate-out data-[closed]:slide-out-to-right-full data-[closed]:fade-out-0',
+        'data-[swipe=move]:translate-x-(--kb-toast-swipe-move-x) data-[swipe=move]:transition-none',
+        'data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-transform',
+        'data-[swipe=end]:animate-out data-[swipe=end]:slide-out-to-right-full'
+      )}
+      style={{ '--toast-tone': toastTones[tone()] }}
+    >
+      <span
+        aria-hidden="true"
+        class="mt-1.5 size-1.5 shrink-0 rounded-full"
+        style={{ 'background-color': 'var(--toast-tone)' }}
+      />
+      <div class="flex min-w-0 flex-1 flex-col gap-0.5">
+        <KobalteToast.Title class="text-sm font-medium">{props.title}</KobalteToast.Title>
+        <Show when={props.description}>
+          <KobalteToast.Description class="text-sm text-muted-foreground">
+            {props.description}
+          </KobalteToast.Description>
+        </Show>
+        <Show when={props.action}>
+          <div class="mt-1.5 flex items-center gap-2">{props.action}</div>
+        </Show>
+      </div>
+      <KobalteToast.CloseButton
+        aria-label="Dismiss notification"
+        class="text-muted-foreground shrink-0 rounded-sm p-0.5 transition-colors ease-out outline-none hover:text-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle"
+      >
+        <X class="size-3.5" />
+      </KobalteToast.CloseButton>
+    </KobalteToast>
+  )
+}
+
+/**
+ * The toast API. `show` is the general form; the tone helpers are shorthand for
+ * the four cases that come up constantly.
+ */
+export const toast = {
+  show(options: ToastOptions): number {
+    return toaster.show((props) => <ToastCard {...props} {...options} />, {
+      region: options.region,
+    })
+  },
+  success(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {
+    return toast.show({ ...options, title, tone: 'success' })
+  },
+  error(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {
+    return toast.show({ ...options, title, tone: 'destructive', persistent: true })
+  },
+  warning(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {
+    return toast.show({ ...options, title, tone: 'warning' })
+  },
+  info(title: string, options?: Omit<ToastOptions, 'title' | 'tone'>): number {
+    return toast.show({ ...options, title, tone: 'info' })
+  },
+  /**
+   * A toast that resolves with a promise: pending, then success or failure.
+   * The right shape for an operation with a visible duration, because the user
+   * gets one message instead of three.
+   */
+  promise<T>(
+    promise: Promise<T> | (() => Promise<T>),
+    messages: {
+      pending: string
+      success: string | ((data: T) => string)
+      error: string | ((error: unknown) => string)
+    }
+  ): Promise<T> {
+    const resolved = typeof promise === 'function' ? promise() : promise
+    toaster.promise(resolved, (props) => {
+      const tone: ToastTone =
+        props.state === 'fulfilled'
+          ? 'success'
+          : props.state === 'rejected'
+            ? 'destructive'
+            : 'default'
+      const title =
+        props.state === 'pending'
+          ? messages.pending
+          : props.state === 'fulfilled'
+            ? typeof messages.success === 'function'
+              ? messages.success(props.data as T)
+              : messages.success
+            : typeof messages.error === 'function'
+              ? messages.error(props.error)
+              : messages.error
+      return (
+        <ToastCard
+          toastId={props.toastId}
+          title={title}
+          tone={tone}
+          persistent={props.state === 'rejected'}
+        />
+      )
+    })
+    return resolved
+  },
+  dismiss: toaster.dismiss,
+  clear: toaster.clear,
+}
+
+export type ToasterProps = ComponentProps<typeof KobalteToast.Region> & {
+  /** Where the stack sits. Defaults to the bottom-right, clear of the shell. */
+  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+  region?: string
+}
+
+const toasterPosition = {
+  'top-left': 'top-0 left-0 items-start',
+  'top-right': 'top-0 right-0 items-end',
+  'bottom-left': 'bottom-0 left-0 items-start',
+  'bottom-right': 'bottom-0 right-0 items-end',
+}
+
+/** Mount once, near the root. Renders the stack and owns its timing defaults. */
+export function Toaster(props: ToasterProps) {
+  const [local, rest] = splitProps(props, ['position', 'region', 'class'])
+
+  return (
+    <KobalteToast.Region
+      regionId={local.region}
+      duration={5000}
+      limit={3}
+      swipeDirection="right"
+      pauseOnInteraction
+      pauseOnPageIdle
+      /**
+       * The toast region is a top layer: opening a dialog must not hide an
+       * in-flight notification, and clicking a toast must not dismiss the
+       * dialog behind it.
+       */
+      class="pointer-events-none fixed z-(--z-toast) flex max-h-screen w-full flex-col gap-2 p-4 sm:max-w-sm"
+      {...rest}
+    >
+      <KobalteToast.List
+        class={cn(
+          'flex flex-col gap-2',
+          toasterPosition[local.position ?? 'bottom-right'],
+          local.class
+        )}
+      />
+    </KobalteToast.Region>
+  )
+}
+
+export { toaster }

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

@@ -0,0 +1 @@
+export { Toggle, toggleVariants, type ToggleProps } from './toggle'

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

@@ -0,0 +1,60 @@
+import { ToggleButton } from '@kobalte/core/toggle-button'
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cva, controlInteractive, controlSize, type VariantProps } from '../../../lib/variants'
+import { cn } from '../../../lib/utils'
+
+/**
+ * Toggle.
+ *
+ * A button that stays pressed. The difference from Button is state, not looks:
+ * a Toggle reports `aria-pressed` and holds its pressed appearance until
+ * released, which is what makes it right for a formatting control and wrong
+ * for a command.
+ *
+ * Kobalte supplies the pressed state and the keyboard behaviour; the styling
+ * adds the one thing a headless primitive cannot know — that a pressed toggle
+ * in a toolbar should read as *filled*, not merely outlined.
+ */
+export const toggleVariants = cva(
+  `${controlInteractive} inline-flex items-center justify-center rounded-md font-medium whitespace-nowrap select-none hover:bg-surface-hover hover:text-foreground data-[pressed]:bg-surface-active data-[pressed]:text-foreground disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`,
+  {
+    variants: {
+      variant: {
+        default: 'bg-transparent',
+        /** Sits inside a field or toolbar that already has a fill. */
+        outline: 'border border-border bg-transparent',
+        /** Filled even when unpressed, for a segmented control's idle item. */
+        subtle: 'bg-surface-hover',
+      },
+      size: {
+        '2xs': `${controlSize['2xs']} [&_svg]:size-3`,
+        xs: `${controlSize.xs} [&_svg]:size-3.5`,
+        sm: `${controlSize.sm} [&_svg]:size-3.5`,
+        md: `${controlSize.md} [&_svg]:size-4`,
+        lg: `${controlSize.lg} [&_svg]:size-4`,
+        xl: `${controlSize.xl} [&_svg]:size-5`,
+        'icon-2xs': 'size-control-2xs p-0 [&_svg]:size-3',
+        'icon-xs': 'size-control-xs p-0 [&_svg]:size-3.5',
+        'icon-sm': 'size-control-sm p-0 [&_svg]:size-3.5',
+        'icon-md': 'size-control-md p-0 [&_svg]:size-4',
+        'icon-lg': 'size-control-lg p-0 [&_svg]:size-4',
+        'icon-xl': 'size-control-xl p-0 [&_svg]:size-5',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'md' },
+  }
+)
+
+export type ToggleProps = ComponentProps<typeof ToggleButton> & VariantProps<typeof toggleVariants>
+
+export function Toggle(props: ToggleProps) {
+  const [local, rest] = splitProps(props, ['variant', 'size', 'class'])
+
+  return (
+    <ToggleButton
+      class={cn(toggleVariants({ variant: local.variant, size: local.size }), local.class)}
+      {...rest}
+    />
+  )
+}

package/dist/r/src/components/ui/toggle-group/index.ts

@@ -0,0 +1,6 @@
+export {
+  ToggleGroup,
+  ToggleGroupItem,
+  type ToggleGroupItemProps,
+  type ToggleGroupProps,
+} from './toggle-group'

package/dist/r/src/components/ui/toggle-group/toggle-group.tsx

@@ -0,0 +1,66 @@
+import { ToggleGroup as KobalteToggleGroup } from '@kobalte/core/toggle-group'
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import type { VariantProps } from '../../../lib/variants'
+import { cn } from '../../../lib/utils'
+import { toggleVariants } from '../toggle/toggle'
+
+/**
+ * ToggleGroup.
+ *
+ * A set of related toggles that behave as one control: at most one pressed
+ * (`multiple={false}`, the default) or any number (`multiple={true}`). The
+ * group owns the selection and the roving focus, which is what makes arrow keys
+ * move between items and a screen reader announce the position within the set.
+ * A row of independent Toggles looks identical and does neither.
+ *
+ * `attached` joins the items into one rounded run for a segmented control. The
+ * joining lives on the *group*, via child selectors, so an item never has to
+ * know whether it sits at an end — which is also where the border collapse
+ * (`-ms-px`) belongs.
+ */
+/**
+ * `multiple` is optional here although Kobalte requires it: the primitive models
+ * single and multiple selection as two shapes, which forces every caller to state
+ * the obvious. Defaulting to single selection keeps the common case a one-word
+ * component, and a caller that wants many passes `multiple`.
+ */
+export type ToggleGroupProps = Omit<ComponentProps<typeof KobalteToggleGroup>, 'multiple'> & {
+  multiple?: boolean
+  variant?: VariantProps<typeof toggleVariants>['variant']
+  size?: VariantProps<typeof toggleVariants>['size']
+  /** Join the items into one rounded run instead of a spaced row. */
+  attached?: boolean
+}
+
+export function ToggleGroup(props: ToggleGroupProps) {
+  const [local, rest] = splitProps(props, ['class', 'attached', 'multiple'])
+
+  return (
+    <KobalteToggleGroup
+      multiple={local.multiple ?? false}
+      class={cn(
+        'flex w-fit flex-row items-center',
+        local.attached
+          ? '[&>*:first-child]:rounded-e-none [&>*:last-child]:rounded-s-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ms-px'
+          : 'gap-1',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export type ToggleGroupItemProps = ComponentProps<typeof KobalteToggleGroup.Item> &
+  VariantProps<typeof toggleVariants>
+
+export function ToggleGroupItem(props: ToggleGroupItemProps) {
+  const [local, rest] = splitProps(props, ['class', 'variant', 'size'])
+
+  return (
+    <KobalteToggleGroup.Item
+      class={cn(toggleVariants({ variant: local.variant, size: local.size }), local.class)}
+      {...rest}
+    />
+  )
+}

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

@@ -0,0 +1,9 @@
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  type TooltipContentProps,
+  type TooltipProviderProps,
+  type TooltipRootProps,
+} from './tooltip'