@adea-ai/ui 0.61.0 → 0.62.0

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

@@ -0,0 +1 @@
+export { Input } from './input'

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

@@ -0,0 +1,41 @@
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '../../../lib/utils'
+
+/**
+ * Input.
+ *
+ * Deliberately a plain `<input>` rather than a Kobalte TextField part. The
+ * styling contract is what a consumer needs from an input; validation,
+ * description and error wiring come from `Field`, which composes this. Keeping
+ * them separate is what lets an input sit inside a custom control without
+ * inheriting a form's ARIA graph.
+ *
+ * Height comes from `h-control-md`; an input cannot be given a new height
+ * without a new token, which is what keeps it aligned with Button and Select.
+ */
+export function Input(props: ComponentProps<'input'>) {
+  const [local, rest] = splitProps(props, ['class', 'type'])
+
+  return (
+    <input
+      data-slot="input"
+      type={local.type ?? 'text'}
+      class={cn(
+        'h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm',
+        'transition-[color,box-shadow,border-color] ease-out outline-none',
+        'placeholder:text-muted-foreground',
+        'selection:bg-primary selection:text-primary-foreground',
+        'file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
+        /* A pointer click on a text field is a typing affordance, so the ring
+           appears where the user agent already matches :focus-visible. */
+        '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',
+        'read-only:bg-surface-hover',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}

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

@@ -0,0 +1,8 @@
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  type InputGroupAddonProps,
+} from './input-group'

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

@@ -0,0 +1,111 @@
+import type { ComponentProps, JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '../../../lib/utils'
+
+/**
+ * InputGroup.
+ *
+ * A field with attached chrome: a leading icon, a unit, a trailing button, a
+ * clear affordance. The point of the component is that the adornments and the
+ * input share *one* border and *one* focus ring, so the group reads as a single
+ * control. Two separate elements side by side always drift — the ring appears
+ * on the wrong box, or the border doubles where they meet.
+ *
+ * The focus ring therefore lives on the group and follows `focus-within`. A
+ * group containing several focusable things still reads as focused once, which
+ * is the correct affordance: the user is somewhere inside it.
+ */
+export function InputGroup(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <div
+      data-slot="input-group"
+      class={cn(
+        'border-input flex h-control-md w-full min-w-0 items-center gap-1.5 rounded-md border bg-transparent px-control-sm',
+        'transition-[color,box-shadow,border-color] ease-out',
+        'focus-within:border-ring focus-within:ring-3 focus-within:ring-primary-subtle',
+        'has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-3 has-[[aria-invalid=true]]:ring-destructive-subtle',
+        'has-[input:disabled]:pointer-events-none has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function InputGroupInput(props: ComponentProps<'input'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <input
+      data-slot="input-group-input"
+      class={cn(
+        'h-full min-w-0 flex-1 bg-transparent text-sm outline-none',
+        'placeholder:text-muted-foreground',
+        'disabled:cursor-not-allowed',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export type InputGroupAddonProps = ComponentProps<'span'> & {
+  /** Which edge the adornment sits on; also sets the pointer-events rule. */
+  align?: 'start' | 'end'
+}
+
+/**
+ * A non-interactive adornment. `pointer-events-none` by default, because an
+ * adornment that swallows a click makes the whole control feel dead just to
+ * the left of the caret — the most annoying possible bug. Pass `align="end"`
+ * and a real element when the adornment must be clickable.
+ */
+export function InputGroupAddon(props: InputGroupAddonProps) {
+  const [local, rest] = splitProps(props, ['class', 'align', 'children'])
+
+  return (
+    <span
+      data-slot="input-group-addon"
+      class={cn(
+        'text-muted-foreground flex shrink-0 items-center gap-1.5 text-sm select-none',
+        '[&_svg]:pointer-events-none [&_svg]:size-4',
+        { 'order-first': local.align !== 'end', 'order-last': local.align === 'end' },
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </span>
+  )
+}
+
+/** A clickable trailing button, sized to the group's height. */
+export function InputGroupButton(props: ComponentProps<'button'>) {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+
+  return (
+    <button
+      type="button"
+      data-slot="input-group-button"
+      class={cn(
+        'text-muted-foreground -me-1 flex size-6 shrink-0 items-center justify-center rounded-sm',
+        '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',
+        'disabled:pointer-events-none disabled:opacity-50',
+        '[&_svg]:size-3.5',
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+    </button>
+  )
+}
+
+/** Text that reads as a value but is not an input, e.g. a unit or a suffix. */
+export function InputGroupText(props: ComponentProps<'span'> & { children?: JSX.Element }) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <span class={cn('text-muted-foreground text-sm', local.class)} {...rest} />
+}

package/dist/r/src/components/ui/input-otp/index.ts

@@ -0,0 +1 @@
+export { InputOtp, InputOtpCaret, type InputOtpProps } from './input-otp'

package/dist/r/src/components/ui/input-otp/input-otp.tsx

@@ -0,0 +1,108 @@
+import OtpField from '@corvu/otp-field'
+import type { ComponentProps } from 'solid-js'
+import { For, Show, splitProps } from 'solid-js'
+import { cn } from '../../../lib/utils'
+
+/**
+ * InputOtp.
+ *
+ * A one-time code, entered into separate boxes. The boxes are the *paint*: the
+ * value lives in a single real input, so paste works, autofill works, and a
+ * password manager sees one field rather than six.
+ *
+ * That split is the whole reason to use a component rather than six inputs. Six
+ * inputs cannot be pasted into, cannot be autofilled, and announce as six unrelated
+ * fields — every one of which is a defect a user hits on the first try.
+ *
+ * corvu supplies the value handling, the caret movement, the paste split and the
+ * keyboard behaviour.
+ */
+/**
+ * `maxLength` is omitted rather than exposed: corvu requires it, and a caller who
+ * has to set both it and `length` will eventually set them to different numbers.
+ * `length` is the one input and it drives the other.
+ */
+export type InputOtpProps = Omit<ComponentProps<typeof OtpField>, 'maxLength'> & {
+  /** How many characters. */
+  length?: number
+  /** Group the boxes into runs, e.g. `[3, 3]` for a six-character code. */
+  groups?: readonly number[]
+}
+
+export function InputOtp(props: InputOtpProps) {
+  const [local, rest] = splitProps(props, ['class', 'length', 'groups', 'children'])
+
+  const length = () => local.length ?? 6
+  const groups = () => local.groups ?? [length()]
+
+  return (
+    <OtpField
+      maxLength={length()}
+      class={cn('flex items-center gap-2', local.class)}
+      {...rest}
+      children={(field) => (
+        <>
+          <OtpField.Input
+            aria-label={props['aria-label'] ?? 'One-time code'}
+            class="absolute inset-0 opacity-0"
+          />
+          <For each={groups()}>
+            {(size, groupIndex) => (
+              <>
+                <Show when={groupIndex() > 0}>
+                  <span aria-hidden="true" class="text-muted-foreground px-1">
+                    –
+                  </span>
+                </Show>
+                <span class="flex items-center gap-1.5">
+                  <For each={Array.from({ length: size })}>
+                    {(_, index) => {
+                      // The slot's index across the whole field, so the boxes after a
+                      // group boundary continue counting rather than restarting.
+                      const offset = groups()
+                        .slice(0, groupIndex())
+                        .reduce((total, run) => total + run, 0)
+                      const slot = offset + index()
+                      return (
+                        <span
+                          class={cn(
+                            'border-input bg-transparent flex size-10 items-center justify-center rounded-md border text-sm font-medium',
+                            'transition-[color,box-shadow,border-color] ease-out',
+                            'data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-primary-subtle',
+                            'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50'
+                          )}
+                          data-active={field.activeSlots.includes(slot)}
+                          data-disabled={props.disabled}
+                        >
+                          {field.value[slot] ?? ''}
+                        </span>
+                      )
+                    }}
+                  </For>
+                </span>
+              </>
+            )}
+          </For>
+        </>
+      )}
+    />
+  )
+}
+
+/**
+ * A caret drawn inside the active box.
+ *
+ * Exported for a caller building its own slot: the box above renders the character
+ * directly, and a blinking caret is the alternative when the field should look
+ * empty until something is typed.
+ */
+export function InputOtpCaret(props: ComponentProps<'span'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <span
+      aria-hidden="true"
+      class={cn('animate-caret bg-foreground inline-block h-4 w-px', local.class)}
+      {...rest}
+    />
+  )
+}

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

@@ -0,0 +1,10 @@
+export {
+  Item,
+  ItemDescription,
+  ItemEmpty,
+  ItemGroup,
+  ItemGroupEntry,
+  ItemTitle,
+  itemVariants,
+  type ItemProps,
+} from './item'

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

@@ -0,0 +1,146 @@
+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'
+
+/**
+ * Item.
+ *
+ * The general row: a leading slot, a body, and a trailing slot. It is the shape
+ * almost every list in an application takes — a file, a member, a setting, a
+ * search result — and it exists as a component because a row is where inconsistency
+ * is most visible: twenty of them make any drift in height, padding or alignment
+ * obvious at a glance.
+ *
+ * The difference from `ListRow` is what it is *for*. `ListRow` is one row in a list
+ * of like things, sized by the row ladder and meant to be scanned down a column.
+ * `Item` is a self-contained block — it has a border, its own surface, an optional
+ * title and description — and is meant to stand alone or sit in a grid. A list uses
+ * `ListRow`; a search result or a settings card uses `Item`.
+ *
+ * `variant="outline"` and `"muted"` exist because the two questions a caller
+ * actually has are "does this need an edge" and "is it on the canvas or inset".
+ */
+export const itemVariants = cva('flex w-full items-center gap-3 rounded-lg text-sm', {
+  variants: {
+    variant: {
+      default: 'bg-transparent',
+      /** On the canvas, with an edge — the search-result shape. */
+      outline: 'border border-border bg-card',
+      /** Inset: a code well, a disabled row, a quoted message. */
+      muted: 'bg-muted',
+    },
+    size: {
+      sm: 'min-h-row-sm px-3 py-1.5',
+      md: 'min-h-row-md px-3 py-2',
+      lg: 'min-h-row-lg px-4 py-2.5',
+    },
+  },
+  defaultVariants: { variant: 'default', size: 'md' },
+})
+
+type ItemVariantProps = VariantProps<typeof itemVariants>
+
+export type ItemProps = ComponentProps<'div'> &
+  ItemVariantProps & {
+    /** A media slot: an icon, an avatar, a thumbnail. */
+    media?: JSX.Element
+    /** A trailing slot: a badge, a timestamp, a menu trigger. */
+    trailing?: JSX.Element
+  }
+
+export function Item(props: ItemProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'variant',
+    'size',
+    'media',
+    'trailing',
+    'children',
+  ])
+
+  return (
+    <div
+      data-slot="item"
+      class={cn(itemVariants({ variant: local.variant, size: local.size }), local.class)}
+      {...rest}
+    >
+      <Show when={local.media}>
+        <span
+          data-slot="item-media"
+          class="flex size-8 shrink-0 items-center justify-center [&_svg]:size-4"
+        >
+          {local.media}
+        </span>
+      </Show>
+      <div data-slot="item-body" class="flex min-w-0 flex-1 flex-col gap-0.5">
+        {local.children}
+      </div>
+      <Show when={local.trailing}>
+        <span data-slot="item-trailing" class="flex shrink-0 items-center gap-2">
+          {local.trailing}
+        </span>
+      </Show>
+    </div>
+  )
+}
+
+export function ItemTitle(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <div data-slot="item-title" class={cn('truncate font-medium', local.class)} {...rest} />
+}
+
+export function ItemDescription(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="item-description"
+      class={cn('text-muted-foreground line-clamp-2 text-xs text-pretty', local.class)}
+      {...rest}
+    />
+  )
+}
+
+/**
+ * A group of items with an optional heading. It is a real `role="list"` with
+ * `role="listitem"` children, so a screen reader reports the count — which is how a
+ * user knows how many results there are without counting them.
+ */
+export function ItemGroup(
+  props: ComponentProps<'div'> & {
+    label?: string
+    /** The list's accessible name. */ listLabel?: string
+  }
+) {
+  const [local, rest] = splitProps(props, ['class', 'label', 'listLabel', 'children'])
+
+  return (
+    <div data-slot="item-group" class={cn('flex flex-col gap-2', local.class)} {...rest}>
+      <Show when={local.label}>
+        <div class="text-muted-foreground text-2xs font-medium tracking-wide uppercase">
+          {local.label}
+        </div>
+      </Show>
+      <div role="list" aria-label={local.listLabel ?? local.label} class="flex flex-col gap-2">
+        {local.children}
+      </div>
+    </div>
+  )
+}
+
+/** An item inside an `ItemGroup`, which is what makes it a list item. */
+export function ItemGroupEntry(props: ItemProps) {
+  return <Item role="listitem" {...props} />
+}
+
+/** A centred message for a group with nothing in it. */
+export function ItemEmpty(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <div
+      data-slot="item-empty"
+      class={cn('text-muted-foreground py-6 text-center text-sm', local.class)}
+      {...rest}
+    />
+  )
+}

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

@@ -0,0 +1 @@
+export { Kbd, KbdGroup } from './kbd'

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

@@ -0,0 +1,42 @@
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '../../../lib/utils'
+
+/**
+ * Kbd.
+ *
+ * A keyboard key, in the order the user presses them. The element is a real
+ * `<kbd>` so the semantics survive copy-paste, and the mono face is what makes
+ * a shortcut visually distinct from the sentence around it.
+ *
+ * `KbdGroup` exists because a shortcut is a sequence: typing `⌘` then `K`
+ * needs a gap between them that is a layout concern, not punctuation.
+ */
+export function Kbd(props: ComponentProps<'kbd'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <kbd
+      data-slot="kbd"
+      class={cn(
+        'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-sm border border-border px-1 font-mono text-2xs font-medium select-none',
+        /* Inside a hover/selected row the key needs to recede with the row. */
+        'in-data-[slot=br-tooltip-content]:bg-background/20 in-data-[slot=br-tooltip-content]:text-scrim-foreground in-data-[slot=br-tooltip-content]:border-transparent',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}
+
+export function KbdGroup(props: ComponentProps<'span'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <span
+      data-slot="kbd-group"
+      class={cn('inline-flex items-center gap-1', local.class)}
+      {...rest}
+    />
+  )
+}

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

@@ -0,0 +1 @@
+export { Label } from './label'

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

@@ -0,0 +1,36 @@
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '../../../lib/utils'
+
+/**
+ * Label.
+ *
+ * A plain `<label>` rather than a Kobalte control. Kobalte has no standalone
+ * label primitive — its labels are parts of `TextField`, `Checkbox` and
+ * friends, and those parts carry the association wiring for *their* control.
+ * A free-standing label has to be the real element so the browser's native
+ * `for` → control association, click-to-focus, and `aria-labelledby` all keep
+ * working.
+ *
+ * Use the compound controls' own labels (`Switch.Label`, `Checkbox.Label`) when
+ * the label belongs to one of them; use this one for an `Input` or `Textarea`,
+ * which are plain elements with no wrapper.
+ */
+export function Label(props: ComponentProps<'label'>) {
+  const [local, rest] = splitProps(props, ['class'])
+
+  return (
+    <label
+      data-slot="label"
+      class={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none',
+        /* A label inside a disabled group is part of a dead control and must
+           not offer a pointer that does nothing. */
+        'group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50',
+        'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        local.class
+      )}
+      {...rest}
+    />
+  )
+}

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

@@ -0,0 +1,16 @@
+export {
+  Menubar,
+  MenubarCheckboxItem,
+  MenubarContent,
+  MenubarGroup,
+  MenubarItem,
+  MenubarLabel,
+  MenubarMenu,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarSeparator,
+  MenubarSub,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarTrigger,
+} from './menubar'