@a4ui/core 0.37.0 → 0.38.0

package/src/ui/Hero.tsx

@@ -0,0 +1,146 @@
+// Hero — the opening section of a landing page: headline, supporting text, up
+// to two calls-to-action, and an optional image, on a plain, aurora or photo
+// background.
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Button } from './Button'
+import { SectionHeading, type SectionLink } from './internal/sectionKit'
+
+/** Arrangement of a {@link Hero}: text centered, or text beside the image. */
+export type HeroLayout = 'center' | 'split'
+/** Backdrop of a {@link Hero}. `'image'` uses `image` as a full-bleed photo. */
+export type HeroBackground = 'none' | 'aurora' | 'image'
+
+export interface HeroProps {
+  /** Small label above the title, e.g. a category or announcement. */
+  eyebrow?: string
+  /** Main headline, rendered as the page `<h1>`. */
+  title: string
+  /** Supporting paragraph under the title. */
+  subtitle?: string
+  /** Main call-to-action (filled button). */
+  primary?: SectionLink
+  /** Secondary call-to-action (outline button). */
+  secondary?: SectionLink
+  /** Image URL. Shown beside the text in `split` layout, under it in `center`, or behind it with `background="image"`. */
+  image?: string
+  /** Alt text of `image`. Defaults to empty (decorative). */
+  imageAlt?: string
+  /** Defaults to `'center'`. */
+  layout?: HeroLayout
+  /** Defaults to `'aurora'`. */
+  background?: HeroBackground
+  /** Anchor id for in-page navigation. */
+  id?: string
+  class?: string
+}
+
+/**
+ * Opening section of a landing page: eyebrow, headline, subtitle and up to two
+ * call-to-action links, with an optional image. `layout="split"` puts the image
+ * beside the text on wide screens (stacked on phones); `background` picks a
+ * theme-tinted aurora glow, a full-bleed photo with a legibility scrim, or
+ * nothing.
+ *
+ * @example
+ * ```tsx
+ * <Hero
+ *   eyebrow="New"
+ *   title="Ship your site this week"
+ *   subtitle="Everything you need to launch, nothing you don't."
+ *   primary={{ label: 'Get started', href: '/signup' }}
+ *   secondary={{ label: 'See pricing', href: '#pricing' }}
+ * />
+ * ```
+ */
+export function Hero(props: HeroProps): JSX.Element {
+  const layout = () => props.layout ?? 'center'
+  const background = () => props.background ?? 'aurora'
+  const photoBackdrop = () => background() === 'image' && props.image !== undefined
+  const showInlineImage = () => props.image !== undefined && !photoBackdrop()
+
+  const actions = (
+    <Show when={props.primary || props.secondary}>
+      <div class={cn('flex flex-wrap gap-3', layout() === 'center' && 'justify-center')}>
+        <Show when={props.primary}>
+          {(link) => (
+            <Button href={link().href} ripple class="px-5 py-2.5 text-base">
+              {link().label}
+            </Button>
+          )}
+        </Show>
+        <Show when={props.secondary}>
+          {(link) => (
+            <Button href={link().href} variant="outline" class="px-5 py-2.5 text-base">
+              {link().label}
+            </Button>
+          )}
+        </Show>
+      </div>
+    </Show>
+  )
+
+  return (
+    <section
+      id={props.id}
+      class={cn('relative isolate overflow-hidden', photoBackdrop() && 'text-white', props.class)}
+    >
+      <Show when={background() === 'aurora'}>
+        <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10">
+          <div class="aurora-drift absolute -left-[10%] -top-[30%] h-[28rem] w-[28rem] rounded-full bg-primary/30 blur-3xl" />
+          <div class="aurora-drift absolute -right-[10%] top-[10%] h-[24rem] w-[24rem] rounded-full bg-accent/25 blur-3xl [animation-delay:-9s]" />
+        </div>
+      </Show>
+      <Show when={photoBackdrop()}>
+        <img
+          src={props.image}
+          alt={props.imageAlt ?? ''}
+          class="absolute inset-0 -z-20 h-full w-full object-cover"
+        />
+        <div
+          aria-hidden="true"
+          class="absolute inset-0 -z-10 bg-gradient-to-b from-black/70 via-black/55 to-black/75"
+        />
+      </Show>
+
+      <div
+        class={cn(
+          'mx-auto grid w-full max-w-6xl gap-10 px-5 py-20 sm:py-28',
+          layout() === 'split' && showInlineImage() && 'items-center md:grid-cols-2',
+        )}
+      >
+        <div
+          class={cn(
+            'flex flex-col gap-8',
+            layout() === 'center' ? 'items-center text-center' : 'items-start',
+          )}
+        >
+          <SectionHeading
+            level={1}
+            align={layout() === 'center' ? 'center' : 'left'}
+            eyebrow={props.eyebrow}
+            title={props.title}
+            subtitle={props.subtitle}
+            class={cn(
+              layout() === 'center' && 'max-w-3xl',
+              photoBackdrop() && '[&_h1]:text-white [&_p]:text-white/85',
+            )}
+          />
+          {actions}
+        </div>
+        <Show when={showInlineImage()}>
+          <img
+            src={props.image}
+            alt={props.imageAlt ?? ''}
+            class={cn(
+              'card w-full rounded-2xl object-cover shadow-xl',
+              layout() === 'center' ? 'mx-auto aspect-[16/9] max-w-4xl' : 'aspect-[4/3]',
+            )}
+          />
+        </Show>
+      </div>
+    </section>
+  )
+}

package/src/ui/InputGroup.tsx

@@ -0,0 +1,219 @@
+// InputGroup — one bordered, focus-ringed shell around a borderless input or
+// textarea plus addons (icons, text, buttons, hints) on any side. The group
+// owns the border and the focus ring (focus-within via the shared `a4-field`
+// class), so the inner controls draw none of their own.
+import type { JSX, ParentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Button } from './Button'
+
+export interface InputGroupProps extends ParentProps, JSX.HTMLAttributes<HTMLDivElement> {
+  class?: string
+}
+
+/**
+ * Wrapper that owns a single border and focus ring for an input and its addons.
+ * Addons are placed by their `align` prop, whatever their order in the DOM.
+ *
+ * @example
+ * ```tsx
+ * <InputGroup>
+ *   <InputGroupAddon><Search class="h-4 w-4" /></InputGroupAddon>
+ *   <InputGroupInput value={q()} onInput={setQ} placeholder="Search" />
+ * </InputGroup>
+ * ```
+ */
+export function InputGroup(props: InputGroupProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+  return (
+    <div
+      role="group"
+      data-slot="input-group"
+      class={cn(
+        'a4-field group/input-group relative flex w-full min-w-0 flex-wrap items-center rounded-md border border-input bg-background text-sm text-foreground',
+        'has-[[data-slot=input-group-control][aria-invalid=true]]:border-destructive',
+        'has-[[data-slot=input-group-control]:disabled]:opacity-50',
+        local.class,
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  )
+}
+
+export type InputGroupAddonAlign = 'inline-start' | 'inline-end' | 'block-start' | 'block-end'
+
+export interface InputGroupAddonProps extends ParentProps, JSX.HTMLAttributes<HTMLDivElement> {
+  /** Where the addon sits. Defaults to `inline-start`. */
+  align?: InputGroupAddonAlign
+  class?: string
+}
+
+// Inline addons share the control's row (control is flex-1); block addons take
+// a full row above/below it via `basis-full` + flex-wrap on the group.
+const ADDON_ALIGN: Record<InputGroupAddonAlign, string> = {
+  'inline-start': 'order-1 pl-3',
+  'inline-end': 'order-3 pr-3',
+  'block-start': 'order-0 basis-full px-3 pt-2',
+  'block-end': 'order-4 basis-full px-3 pb-2',
+}
+
+/**
+ * Adornment around the control. Clicking anywhere on it (except on a button)
+ * focuses the group's input or textarea.
+ *
+ * @example
+ * ```tsx
+ * <InputGroupAddon align="inline-end"><Kbd>/</Kbd></InputGroupAddon>
+ * ```
+ */
+export function InputGroupAddon(props: InputGroupAddonProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['class', 'align', 'children', 'onClick'])
+  const align = (): InputGroupAddonAlign => local.align ?? 'inline-start'
+  return (
+    <div
+      role="presentation"
+      data-slot="input-group-addon"
+      data-align={align()}
+      class={cn(
+        'flex cursor-text select-none items-center gap-2 py-1.5 text-sm text-muted-foreground [&>svg]:h-4 [&>svg]:w-4',
+        ADDON_ALIGN[align()],
+        local.class,
+      )}
+      onClick={(e) => {
+        if (typeof local.onClick === 'function') local.onClick(e)
+        if ((e.target as HTMLElement).closest('button')) return
+        e.currentTarget.parentElement?.querySelector<HTMLElement>('[data-slot=input-group-control]')?.focus()
+      }}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  )
+}
+
+/**
+ * Plain text inside an addon (a prefix like `https://` or a unit).
+ *
+ * @example
+ * ```tsx
+ * <InputGroupAddon><InputGroupText>https://</InputGroupText></InputGroupAddon>
+ * ```
+ */
+export function InputGroupText(props: ParentProps<{ class?: string }>): JSX.Element {
+  return (
+    <span
+      class={cn('flex items-center gap-2 text-sm text-muted-foreground [&>svg]:h-4 [&>svg]:w-4', props.class)}
+    >
+      {props.children}
+    </span>
+  )
+}
+
+/** Compact sizes for {@link InputGroupButton}. */
+export type InputGroupButtonSize = 'xs' | 'sm' | 'icon-xs' | 'icon-sm'
+
+const BUTTON_SIZE: Record<InputGroupButtonSize, string> = {
+  xs: 'h-6 gap-1 rounded px-2 py-0 text-xs',
+  sm: 'h-7 gap-1.5 px-2.5 py-0 text-sm',
+  'icon-xs': 'h-6 w-6 rounded p-0',
+  'icon-sm': 'h-7 w-7 p-0',
+}
+
+export interface InputGroupButtonProps
+  extends ParentProps, Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+  /** Compact size. Defaults to `xs`. */
+  size?: InputGroupButtonSize
+  /** Button variant; ghost by default so it blends into the group. */
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost'
+  type?: 'button' | 'submit' | 'reset'
+  class?: string
+}
+
+/**
+ * Compact {@link Button} for use inside an addon. Ghost by default.
+ *
+ * @example
+ * ```tsx
+ * <InputGroupButton size="icon-xs" aria-label="Show password"><Eye /></InputGroupButton>
+ * ```
+ */
+export function InputGroupButton(props: InputGroupButtonProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['class', 'size', 'variant', 'children'])
+  return (
+    <Button
+      variant={local.variant ?? 'ghost'}
+      class={cn('shadow-none [&>svg]:h-3.5 [&>svg]:w-3.5', BUTTON_SIZE[local.size ?? 'xs'], local.class)}
+      {...rest}
+    >
+      {local.children}
+    </Button>
+  )
+}
+
+const CONTROL_BASE =
+  'order-2 min-w-0 flex-1 border-0 bg-transparent px-3 py-2 text-sm text-foreground shadow-none outline-none ring-0 placeholder:text-muted-foreground disabled:cursor-not-allowed'
+
+export interface InputGroupInputProps extends Omit<
+  JSX.InputHTMLAttributes<HTMLInputElement>,
+  'value' | 'onInput'
+> {
+  value: string
+  /** Called with the raw string value on every input event. */
+  onInput: (value: string) => void
+  class?: string
+}
+
+/**
+ * Borderless `<input>` for an {@link InputGroup} (same value/onInput API as `Input`).
+ *
+ * @example
+ * ```tsx
+ * <InputGroupInput value={url()} onInput={setUrl} placeholder="example.com" />
+ * ```
+ */
+export function InputGroupInput(props: InputGroupInputProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['value', 'onInput', 'class'])
+  return (
+    <input
+      data-slot="input-group-control"
+      class={cn(CONTROL_BASE, local.class)}
+      value={local.value}
+      onInput={(e) => local.onInput(e.currentTarget.value)}
+      {...rest}
+    />
+  )
+}
+
+export interface InputGroupTextareaProps extends Omit<
+  JSX.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  'value' | 'onInput'
+> {
+  value: string
+  /** Called with the new string value on every input event. */
+  onInput: (value: string) => void
+  class?: string
+}
+
+/**
+ * Borderless `<textarea>` for an {@link InputGroup}.
+ *
+ * @example
+ * ```tsx
+ * <InputGroupTextarea value={msg()} onInput={setMsg} rows={3} />
+ * ```
+ */
+export function InputGroupTextarea(props: InputGroupTextareaProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['value', 'onInput', 'class'])
+  return (
+    <textarea
+      data-slot="input-group-control"
+      class={cn(CONTROL_BASE, 'min-h-[72px] resize-none', local.class)}
+      value={local.value}
+      onInput={(e) => local.onInput(e.currentTarget.value)}
+      {...rest}
+    />
+  )
+}

package/src/ui/Item.tsx

@@ -0,0 +1,185 @@
+// Composable row primitive: media + title/description + actions, with optional
+// header/footer. Plain HTML + Tailwind. `List` stays the data-driven shortcut;
+// `Item` is the building block when a row needs custom structure (attachments,
+// settings rows, sidebar entries, notification rows).
+import { splitProps, type JSX, type ParentProps } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
+
+import { cn } from '../lib/cn'
+
+export type ItemVariant = 'default' | 'outline' | 'muted'
+export type ItemSize = 'default' | 'sm' | 'xs'
+
+interface ItemProps extends ParentProps {
+  /** @default 'default' (transparent) */
+  variant?: ItemVariant
+  /** Padding + gap density. @default 'default' */
+  size?: ItemSize
+  /**
+   * Render the row as a link. The whole row becomes the hit target and gets a
+   * hover/focus state.
+   */
+  href?: string
+  /** Render the row as a `<button>` with this click handler (when no `href`). */
+  onClick?: JSX.EventHandlerUnion<HTMLElement, MouseEvent>
+  /** Element to render when neither `href` nor `onClick` is set. @default 'div' */
+  as?: 'div' | 'li' | 'article' | 'section'
+  class?: string
+}
+
+export type { ItemProps }
+
+const VARIANT: Record<ItemVariant, string> = {
+  default: 'border border-transparent',
+  outline: 'border border-border',
+  muted: 'border border-transparent bg-muted/50',
+}
+
+const SIZE: Record<ItemSize, string> = {
+  default: 'gap-4 p-4',
+  sm: 'gap-3 px-3 py-2.5',
+  xs: 'gap-2 px-2 py-1.5 text-sm',
+}
+
+/**
+ * A row of content: optional `ItemMedia`, an `ItemContent` column with
+ * `ItemTitle`/`ItemDescription`, and trailing `ItemActions`. `ItemHeader` and
+ * `ItemFooter` span the full width above/below. Group rows with `ItemGroup`.
+ *
+ * @example
+ * ```tsx
+ * <Item variant="outline">
+ *   <ItemMedia variant="icon"><Bell /></ItemMedia>
+ *   <ItemContent>
+ *     <ItemTitle>Weekly digest</ItemTitle>
+ *     <ItemDescription>Every Monday at 9:00</ItemDescription>
+ *   </ItemContent>
+ *   <ItemActions><Switch checked /></ItemActions>
+ * </Item>
+ * ```
+ */
+export function Item(props: ItemProps): JSX.Element {
+  const [local] = splitProps(props, ['variant', 'size', 'href', 'onClick', 'as', 'class', 'children'])
+  const interactive = (): boolean => local.href !== undefined || local.onClick !== undefined
+  const tag = (): string => (local.href !== undefined ? 'a' : local.onClick ? 'button' : (local.as ?? 'div'))
+  return (
+    <Dynamic
+      component={tag()}
+      href={local.href}
+      type={tag() === 'button' ? 'button' : undefined}
+      onClick={local.onClick}
+      data-slot="item"
+      data-variant={local.variant ?? 'default'}
+      data-size={local.size ?? 'default'}
+      class={cn(
+        'group/item flex w-full flex-wrap items-center rounded-lg text-left text-foreground outline-none transition-colors',
+        VARIANT[local.variant ?? 'default'],
+        SIZE[local.size ?? 'default'],
+        interactive() && 'cursor-pointer hover:bg-muted/60 focus-visible:ring-2 focus-visible:ring-ring',
+        local.class,
+      )}
+    >
+      {local.children}
+    </Dynamic>
+  )
+}
+
+interface SlotProps extends ParentProps {
+  class?: string
+}
+
+/** Vertical stack of `Item`s. */
+export function ItemGroup(props: SlotProps): JSX.Element {
+  return (
+    <div data-slot="item-group" class={cn('flex flex-col', props.class)}>
+      {props.children}
+    </div>
+  )
+}
+
+/** Thin divider between `Item`s inside an `ItemGroup`. */
+export function ItemSeparator(props: { class?: string }): JSX.Element {
+  return <div role="separator" data-slot="item-separator" class={cn('mx-4 h-px bg-border', props.class)} />
+}
+
+export type ItemMediaVariant = 'default' | 'icon' | 'image'
+
+const MEDIA: Record<ItemMediaVariant, string> = {
+  default: '',
+  icon: 'grid h-9 w-9 place-items-center rounded-md border border-border bg-muted text-muted-foreground [&>svg]:h-4 [&>svg]:w-4',
+  image: 'h-10 w-10 overflow-hidden rounded-md [&>img]:h-full [&>img]:w-full [&>img]:object-cover',
+}
+
+/** Leading visual: an icon tile, an image thumbnail, or anything (`default`). */
+export function ItemMedia(props: SlotProps & { variant?: ItemMediaVariant }): JSX.Element {
+  return (
+    <div
+      data-slot="item-media"
+      class={cn('flex shrink-0 items-center justify-center', MEDIA[props.variant ?? 'default'], props.class)}
+    >
+      {props.children}
+    </div>
+  )
+}
+
+/** The flexible text column (title + description). */
+export function ItemContent(props: SlotProps): JSX.Element {
+  return (
+    <div data-slot="item-content" class={cn('flex min-w-0 flex-1 flex-col gap-0.5', props.class)}>
+      {props.children}
+    </div>
+  )
+}
+
+export function ItemTitle(props: SlotProps): JSX.Element {
+  return (
+    <div
+      data-slot="item-title"
+      class={cn('flex items-center gap-2 text-sm font-medium leading-snug', props.class)}
+    >
+      {props.children}
+    </div>
+  )
+}
+
+/** Muted secondary text, clamped to two lines. */
+export function ItemDescription(props: SlotProps): JSX.Element {
+  return (
+    <p data-slot="item-description" class={cn('line-clamp-2 text-sm text-muted-foreground', props.class)}>
+      {props.children}
+    </p>
+  )
+}
+
+/** Trailing controls (buttons, a switch, a badge). */
+export function ItemActions(props: SlotProps): JSX.Element {
+  return (
+    <div data-slot="item-actions" class={cn('flex shrink-0 items-center gap-2', props.class)}>
+      {props.children}
+    </div>
+  )
+}
+
+/** Full-width row above the media/content line. */
+export function ItemHeader(props: SlotProps): JSX.Element {
+  return (
+    <div
+      data-slot="item-header"
+      class={cn('flex basis-full items-center justify-between gap-2', props.class)}
+    >
+      {props.children}
+    </div>
+  )
+}
+
+/** Full-width row below the media/content line. */
+export function ItemFooter(props: SlotProps): JSX.Element {
+  return (
+    <div
+      data-slot="item-footer"
+      class={cn('flex basis-full items-center justify-between gap-2', props.class)}
+    >
+      {props.children}
+    </div>
+  )
+}

package/src/ui/Label.tsx

@@ -0,0 +1,50 @@
+import { Show, splitProps, type JSX, type ParentProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+interface LabelProps extends ParentProps, Omit<JSX.LabelHTMLAttributes<HTMLLabelElement>, 'for'> {
+  /** Id of the control this label names. */
+  for?: string
+  /** Appends an `*` marker (hidden from assistive tech; set `required` on the control too). */
+  required?: boolean
+  /** Dims the label. It also dims when it follows a disabled `.peer` control. */
+  disabled?: boolean
+  class?: string
+}
+
+export type { LabelProps }
+
+/**
+ * Styled `<label>`. Clicking it focuses/activates the control matching `for`.
+ * Dims when `disabled`, inside a `.group` with `data-disabled`, or after a
+ * disabled `.peer` control.
+ *
+ * @example
+ * ```tsx
+ * <Label for="email" required>Email</Label>
+ * <Input id="email" value={email()} onInput={setEmail} required />
+ * ```
+ */
+export function Label(props: LabelProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['required', 'disabled', 'class', 'children'])
+  return (
+    <label
+      data-disabled={local.disabled ? '' : undefined}
+      class={cn(
+        'inline-flex select-none items-center gap-1 text-sm font-medium leading-none text-foreground',
+        'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
+        'group-data-[disabled]:cursor-not-allowed group-data-[disabled]:opacity-50',
+        'peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        local.class,
+      )}
+      {...rest}
+    >
+      {local.children}
+      <Show when={local.required}>
+        <span aria-hidden="true" class="text-destructive">
+          *
+        </span>
+      </Show>
+    </label>
+  )
+}