@estiva-app/ui 0.1.0

package/src/EmptyState.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react'
+import { IconMessage2 } from '@tabler/icons-react'
+import { cn } from './cn'
+
+/**
+ * Peek's EmptyState (2026-08-28), verbatim: a 16px icon over a centred line
+ * of secondary text. The message is the caller's — a shared component has no
+ * words of its own for what is missing.
+ */
+export interface EmptyStateProps {
+  /** 16px, stroke 1.5. A speech bubble when absent. */
+  icon?: ReactNode
+  message: string
+  className?: string
+}
+
+export function EmptyState({ icon, message, className }: EmptyStateProps) {
+  return (
+    <div className={cn('flex flex-col gap-2 items-center', className)}>
+      <span className="text-text-secondary">{icon ?? <IconMessage2 size={16} stroke={1.5} />}</span>
+      <p className="text-body-2 text-text-secondary text-center">{message}</p>
+    </div>
+  )
+}

package/src/Field.stories.tsx

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Field } from './Field'
+import { TextInput } from './TextInput'
+import { Textarea } from './Textarea'
+
+const meta = {
+  title: 'Inputs/Field',
+  component: Field,
+  parameters: { layout: 'padded' },
+  args: { label: 'Title', required: false },
+  argTypes: { children: { control: false } },
+  decorators: [(Story) => <div className="w-[360px]"><Story /></div>],
+} satisfies Meta<typeof Field>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = { args: { children: <TextInput placeholder="What is this about?" /> } }
+export const Required: Story = { args: { label: 'Title', required: true, children: <TextInput placeholder="What is this about?" /> } }
+export const WithTextarea: Story = {
+  args: { label: 'Resolution message (optional)', children: <Textarea placeholder="Summarise the outcome…" className="h-[109px]" /> },
+}

package/src/Field.tsx

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react'
+
+/**
+ * Peek's Field (2026-08-28), verbatim: a label over a control, 8px apart,
+ * with a red asterisk when required. The label is the `input-label` type
+ * token as a plain class, never merged.
+ */
+export interface FieldProps {
+  label: string
+  required?: boolean
+  children: ReactNode
+}
+
+export function Field({ label, required = false, children }: FieldProps) {
+  return (
+    <div className="flex flex-col gap-2">
+      <label className={`text-input-label text-text-primary${required ? ' flex items-center' : ''}`}>
+        {label}
+        {required && <span className="text-error-default ml-0.5">*</span>}
+      </label>
+      {children}
+    </div>
+  )
+}

package/src/IconButton.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { IconSettings } from '@tabler/icons-react'
+import { IconButton } from './IconButton'
+
+const meta = {
+  title: 'Primitives/IconButton',
+  component: IconButton,
+  args: { variant: 'muted', disabled: false, children: <IconSettings className="size-4" stroke={1.5} /> },
+  argTypes: {
+    variant: { control: 'inline-radio', options: ['muted', 'outlined', 'primary'] },
+    tooltipPlacement: { control: 'inline-radio', options: ['top', 'bottom'] },
+    children: { control: false },
+  },
+} satisfies Meta<typeof IconButton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Muted: Story = {}
+export const Outlined: Story = { args: { variant: 'outlined' } }
+export const Primary: Story = { args: { variant: 'primary' } }
+export const Disabled: Story = { args: { variant: 'primary', disabled: true } }
+/** Hover to see the portalled tooltip (top or bottom placement). */
+export const WithTooltip: Story = { args: { tooltip: 'Settings', tooltipPlacement: 'top' } }
+
+/** Every variant × enabled/disabled. */
+export const AllVariants: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex flex-col gap-3">
+      {(['muted', 'outlined', 'primary'] as const).map((variant) => (
+        <div key={variant} className="flex items-center gap-2">
+          <IconButton variant={variant}>
+            <IconSettings className="size-4" stroke={1.5} />
+          </IconButton>
+          <IconButton variant={variant} disabled>
+            <IconSettings className="size-4" stroke={1.5} />
+          </IconButton>
+          <span className="text-[12px] leading-[120%] text-text-muted">{variant}</span>
+        </div>
+      ))}
+    </div>
+  ),
+}

package/src/IconButton.tsx

@@ -0,0 +1,60 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
+import { cn } from './cn'
+import { WithTooltip } from './Tooltip'
+
+/**
+ * Peek's IconButton (2026-08-28), verbatim: a square 4px-padded button
+ * around a 16px icon, 8px radius, three variants, an optional tooltip that
+ * portals above or below. Plus `type="button"` by default (Ship's addition),
+ * so it never submits a form by accident.
+ */
+export type IconButtonVariant = 'muted' | 'outlined' | 'primary'
+
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: IconButtonVariant
+  tooltip?: string
+  tooltipPlacement?: 'top' | 'bottom'
+  /** The icon: 16px, stroke 1.5. */
+  children: ReactNode
+}
+
+export function IconButton({
+  variant = 'muted',
+  className,
+  children,
+  disabled,
+  tooltip,
+  tooltipPlacement,
+  type = 'button',
+  ...props
+}: IconButtonProps) {
+  const button = (
+    <button
+      type={type}
+      className={cn(
+        'flex items-center justify-center p-1 rounded-lg transition-colors shrink-0 cursor-pointer',
+        !disabled && variant === 'primary' && 'bg-accent-primary hover:bg-accent-hover text-text-inverse',
+        !disabled && variant === 'muted' && 'text-text-secondary hover:bg-bg-hover hover:text-text-primary',
+        !disabled && variant === 'outlined' && 'border border-border-default hover:bg-bg-hover text-text-secondary',
+        disabled && variant === 'primary' && 'bg-bg-disabled text-text-disabled',
+        disabled && variant === 'muted' && 'text-text-disabled',
+        disabled && variant === 'outlined' && 'border border-border-default text-text-disabled',
+        disabled && 'pointer-events-none cursor-not-allowed',
+        className,
+      )}
+      disabled={disabled}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+
+  if (tooltip) {
+    return (
+      <WithTooltip label={tooltip} placement={tooltipPlacement}>
+        {button}
+      </WithTooltip>
+    )
+  }
+  return button
+}

package/src/Select.stories.tsx

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState, type ComponentProps } from 'react'
+import { Avatar } from './Avatar'
+import { Field } from './Field'
+import { Select } from './Select'
+import { TextInput } from './TextInput'
+
+/**
+ * A select drawn by the app rather than by the operating system.
+ *
+ * The trigger is `TextInput`'s field, so a select and a text field sitting in
+ * the same form are the same control with different contents.
+ *
+ * Open one and try the keyboard: arrows move, Home and End jump, Enter and Space
+ * pick, Escape closes and puts focus back on the trigger. That is what a native
+ * `<select>` gives away for free, and what has to be written by hand the moment
+ * you stop using one.
+ */
+const meta = {
+  title: 'Inputs/Select',
+  component: Select,
+  parameters: { layout: 'padded' },
+  decorators: [(Story) => <div className="w-[360px]"><Story /></div>],
+  args: {
+    value: 'in_progress',
+    onChange: () => {},
+    options: [
+      { value: 'todo', label: 'Todo' },
+      { value: 'in_progress', label: 'In Progress' },
+      { value: 'done', label: 'Done' },
+      { value: 'cancelled', label: 'Cancelled' },
+    ],
+    ariaLabel: 'Status',
+  },
+  argTypes: { size: { control: 'inline-radio', options: ['default', 'small'] } },
+} satisfies Meta<typeof Select>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** Controlled, so the tick and the trigger follow what you pick. */
+function Demo(props: Omit<ComponentProps<typeof Select>, 'value' | 'onChange'> & { initial?: string }) {
+  const { initial = '', ...rest } = props
+  const [value, setValue] = useState(initial)
+  return <Select {...rest} value={value} onChange={setValue} />
+}
+
+/** Field height, matching `TextInput` — the size for a form. */
+export const Default: Story = { render: (args) => <Demo {...args} initial="in_progress" /> }
+
+/** Nothing chosen yet: the placeholder is muted, so an empty select does not read as one already holding a value. */
+export const Empty: Story = { render: (args) => <Demo {...args} initial="" placeholder="Choose a status…" /> }
+
+/** The dense size, matching `Button`'s small — for property rows, where a full-height field would dominate the label beside it. */
+export const Small: Story = { render: (args) => <Demo {...args} size="small" initial="todo" /> }
+
+/** An option may carry a `leading` node — a face beside a person's name — shown in the trigger and in the list. Ship's addition. */
+export const WithLeading: Story = {
+  render: (args) => (
+    <Demo
+      {...args}
+      ariaLabel="Assignee"
+      initial="ana"
+      size="small"
+      options={[
+        { value: '', label: 'Unassigned' },
+        ...['Ana Duarte', 'Ravi Mehta', 'Mara Sato'].map((name) => ({ value: name.split(' ')[0].toLowerCase(), label: name, leading: <Avatar name={name} size={16} /> })),
+      ]}
+    />
+  ),
+}
+
+/** In a `Field`, which is how a select appears in a form. */
+export const InAField: Story = {
+  render: (args) => (
+    <div className="flex flex-col gap-4">
+      <Field label="Status">
+        <Demo {...args} initial="todo" />
+      </Field>
+      <Field label="Title" required>
+        <TextInput placeholder="What is this about?" />
+      </Field>
+    </div>
+  ),
+}
+
+/** Unavailable — the same disabled treatment as every other control. Say why, with a tooltip around it. */
+export const Disabled: Story = { render: (args) => <Demo {...args} initial="done" disabled /> }
+
+/** Longer labels than the trigger is wide: the trigger truncates rather than growing; the menu takes the trigger's width as a minimum and grows past it. */
+export const LongLabels: Story = {
+  render: (args) => (
+    <Demo
+      {...args}
+      initial="a"
+      options={[
+        { value: 'a', label: 'Everything that has ever happened in this workspace' },
+        { value: 'b', label: 'Only the things an administrator did' },
+      ]}
+    />
+  ),
+}
+
+/** Enough options to scroll — the menu caps its height rather than running off. */
+export const ManyOptions: Story = {
+  render: (args) => <Demo {...args} initial="p3" options={Array.from({ length: 20 }, (_, i) => ({ value: `p${i}`, label: `Project ${i + 1}` }))} />,
+}

package/src/Select.tsx

@@ -0,0 +1,195 @@
+import { IconCheck, IconChevronDown } from '@tabler/icons-react'
+import { useCallback, useEffect, useId, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+import { cn } from './cn'
+
+/**
+ * Peek's Select (2026-08-28), verbatim, plus what Ship added: an option may
+ * carry a `leading` node — an avatar beside a person's name — shown in the
+ * trigger and in the list.
+ *
+ * A button that opens a portalled listbox under itself: arrows move, Home
+ * and End jump, Enter and Space pick, Escape closes and returns focus to the
+ * trigger, Tab closes, a click outside closes, a scroll or resize closes
+ * (the list is fixed to where the trigger was). Two sizes; `disabled`
+ * explains nothing by itself — wrap it in a tooltip that does.
+ */
+export interface SelectOption {
+  value: string
+  label: string
+  /** Drawn before the label, 16px — an Avatar, an icon. */
+  leading?: ReactNode
+}
+
+export interface SelectProps {
+  value: string
+  onChange: (value: string) => void
+  options: SelectOption[]
+  size?: 'default' | 'small'
+  ariaLabel?: string
+  placeholder?: string
+  disabled?: boolean
+  className?: string
+}
+
+export function Select({ value, onChange, options, size = 'default', ariaLabel, placeholder = 'Select…', disabled, className }: SelectProps) {
+  const id = useId()
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const [rect, setRect] = useState<DOMRect | null>(null)
+  const open = rect !== null
+
+  const selectedIndex = useMemo(() => Math.max(0, options.findIndex((o) => o.value === value)), [options, value])
+  const [activeIndex, setActiveIndex] = useState(selectedIndex)
+
+  const close = useCallback((refocus: boolean) => {
+    setRect(null)
+    if (refocus) triggerRef.current?.focus()
+  }, [])
+
+  const openMenu = useCallback(() => {
+    setActiveIndex(selectedIndex)
+    setRect(triggerRef.current?.getBoundingClientRect() ?? null)
+  }, [selectedIndex])
+
+  // Outside click and Escape — the two exits every menu has. `mousedown`
+  // rather than `click`, so a press that starts outside dismisses at once.
+  useEffect(() => {
+    if (!open) return
+    const onDown = (e: MouseEvent) => {
+      if (menuRef.current?.contains(e.target as Node)) return
+      if (triggerRef.current?.contains(e.target as Node)) return
+      setRect(null)
+    }
+    const onMove = () => setRect(null)
+    document.addEventListener('mousedown', onDown)
+    window.addEventListener('resize', onMove)
+    window.addEventListener('scroll', onMove, true)
+    return () => {
+      document.removeEventListener('mousedown', onDown)
+      window.removeEventListener('resize', onMove)
+      window.removeEventListener('scroll', onMove, true)
+    }
+  }, [open])
+
+  const pick = (index: number) => {
+    const option = options[index]
+    if (!option) return
+    onChange(option.value)
+    close(true)
+  }
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (!open) {
+      if (['ArrowDown', 'ArrowUp', 'Enter', ' '].includes(e.key)) {
+        e.preventDefault()
+        openMenu()
+      }
+      return
+    }
+    switch (e.key) {
+      case 'Escape':
+        e.preventDefault()
+        close(true)
+        break
+      case 'ArrowDown':
+        e.preventDefault()
+        setActiveIndex((i) => Math.min(options.length - 1, i + 1))
+        break
+      case 'ArrowUp':
+        e.preventDefault()
+        setActiveIndex((i) => Math.max(0, i - 1))
+        break
+      case 'Home':
+        e.preventDefault()
+        setActiveIndex(0)
+        break
+      case 'End':
+        e.preventDefault()
+        setActiveIndex(options.length - 1)
+        break
+      case 'Enter':
+      case ' ':
+        e.preventDefault()
+        pick(activeIndex)
+        break
+      case 'Tab':
+        close(false)
+        break
+    }
+  }
+
+  const selected = options.find((o) => o.value === value)
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        disabled={disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label={ariaLabel}
+        onClick={() => (open ? close(false) : openMenu())}
+        onKeyDown={onKeyDown}
+        className={cn(
+          'flex w-full items-center justify-between gap-2 rounded-lg border bg-bg-inset text-left',
+          'border-border-default text-text-primary outline-none transition-colors',
+          'hover:border-border-strong disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled',
+          'focus-visible:border-border-focus aria-expanded:border-border-focus',
+          'signal:transition-shadow signal:focus-visible:shadow-focus-ring',
+          size === 'default' && 'px-3 py-2 text-[14px] leading-[1.4] font-normal',
+          size === 'small' && 'h-6 px-2 text-[12px] leading-[1.4] font-normal',
+          className,
+        )}
+      >
+        <span className={cn('flex min-w-0 items-center gap-2', !selected && 'text-text-muted')}>
+          {selected?.leading && <span className="flex shrink-0 items-center">{selected.leading}</span>}
+          <span className="truncate">{selected?.label ?? placeholder}</span>
+        </span>
+        <IconChevronDown size={size === 'small' ? 14 : 16} stroke={1.5} className="shrink-0 text-text-secondary" />
+      </button>
+
+      {open &&
+        rect &&
+        createPortal(
+          <div
+            ref={menuRef}
+            role="listbox"
+            aria-activedescendant={`${id}-${activeIndex}`}
+            tabIndex={-1}
+            style={{ top: rect.bottom + 4, left: rect.left, minWidth: rect.width }}
+            className="fixed z-50 max-h-72 overflow-y-auto rounded-lg border border-border-default bg-bg-elevated p-1 shadow-lg"
+          >
+            {options.map((option, index) => (
+              <div
+                key={option.value}
+                id={`${id}-${index}`}
+                role="option"
+                aria-selected={option.value === value}
+                onMouseEnter={() => setActiveIndex(index)}
+                onMouseDown={(e) => {
+                  // The document-level dismiss also listens on mousedown.
+                  e.preventDefault()
+                  pick(index)
+                }}
+                className={cn(
+                  'flex h-9 cursor-pointer items-center justify-between gap-2 rounded-lg px-3 transition-colors',
+                  'text-[14px] font-normal leading-[1.4] text-text-primary',
+                  index === activeIndex && 'bg-bg-hover',
+                  option.value === value && 'font-medium',
+                )}
+              >
+                <span className="flex min-w-0 items-center gap-2">
+                  {option.leading && <span className="flex shrink-0 items-center">{option.leading}</span>}
+                  <span className="truncate">{option.label}</span>
+                </span>
+                {option.value === value && <IconCheck size={16} stroke={1.5} className="shrink-0 text-text-secondary" />}
+              </div>
+            ))}
+          </div>,
+          document.body,
+        )}
+    </>
+  )
+}

package/src/Skeleton.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { SkeletonBar, SkeletonList, SkeletonRow } from './Skeleton'
+
+const meta = {
+  title: 'Feedback/Skeleton',
+  component: SkeletonList,
+} satisfies Meta<typeof SkeletonList>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** A list placeholder — reveals after a 150ms delay so fast loads never flash it. */
+export const List: Story = { decorators: [(Story) => <div className="w-[266px]"><Story /></div>] }
+
+/** A single row-shaped placeholder. */
+export const Row: Story = {
+  render: () => (
+    <div className="w-[266px]">
+      <SkeletonRow barWidth={140} />
+    </div>
+  ),
+}
+
+/** The raw building block — size it per use. */
+export const Bar: Story = {
+  render: () => (
+    <div className="flex w-[266px] flex-col gap-2">
+      <SkeletonBar className="h-3.5 w-40" />
+      <SkeletonBar className="h-3 w-24" />
+      <SkeletonBar className="h-6 w-6" />
+    </div>
+  ),
+}

package/src/Skeleton.tsx

@@ -0,0 +1,38 @@
+import type { CSSProperties } from 'react'
+import { cn } from './cn'
+
+/**
+ * Peek's Skeleton (2026-08-28), the generic parts only: the bar, a row
+ * shaped like a list row, and a list of them. Peek's placeholders shaped
+ * like a conversation card or a huddle card know what those are and stay
+ * in Peek, built from the bar.
+ *
+ * A list reveals after 150ms (`animate-skeleton-in`, in the preset) so a
+ * fast load never flashes a skeleton — Peek's rule.
+ */
+export function SkeletonBar({ className, style }: { className?: string; style?: CSSProperties }) {
+  return <div className={cn('bg-bg-inset rounded-sm animate-pulse', className)} style={style} />
+}
+
+const ROW_BAR_WIDTHS = [150, 100, 170, 120, 90, 140, 110, 160]
+
+/** A 32px row: a 16px square and a bar, like a row with a face and a name. */
+export function SkeletonRow({ barWidth = 130 }: { barWidth?: number }) {
+  return (
+    <div className="flex items-center gap-2 px-2 h-[32px] rounded-lg">
+      <SkeletonBar className="w-4 h-4 shrink-0" />
+      <SkeletonBar className="h-3.5" style={{ width: barWidth }} />
+    </div>
+  )
+}
+
+/** Rows of varied widths, so the placeholder does not read as a pattern. */
+export function SkeletonList({ rows = 8, className }: { rows?: number; className?: string }) {
+  return (
+    <div className={cn('flex flex-col gap-0.5 animate-skeleton-in', className)} aria-hidden>
+      {Array.from({ length: rows }, (_, i) => (
+        <SkeletonRow key={i} barWidth={ROW_BAR_WIDTHS[i % ROW_BAR_WIDTHS.length]} />
+      ))}
+    </div>
+  )
+}

package/src/TextInput.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { TextInput } from './TextInput'
+
+const meta = {
+  title: 'Inputs/TextInput',
+  component: TextInput,
+  parameters: { layout: 'padded' },
+  args: { placeholder: 'What is this about?' },
+  // Inputs stretch to fill their container (as inside a Field).
+  decorators: [(Story) => <div className="flex w-[360px] flex-col"><Story /></div>],
+} satisfies Meta<typeof TextInput>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Empty: Story = {}
+export const Filled: Story = { args: { defaultValue: 'Q3 launch planning' } }
+export const Disabled: Story = { args: { defaultValue: 'Read only', disabled: true } }

package/src/TextInput.tsx

@@ -0,0 +1,29 @@
+import { forwardRef, type InputHTMLAttributes } from 'react'
+import { cn } from './cn'
+
+/**
+ * Peek's TextInput (2026-08-28): the inset field with a 8px radius, 14px
+ * text, the focus border in every theme (Katerina, 2026-08-28: Ship's inputs
+ * focus like Signal's) — and Signal's glow on top.
+ * Plus a disabled look (Ship's addition): the disabled surface and text,
+ * no pointer.
+ */
+export type TextInputProps = InputHTMLAttributes<HTMLInputElement>
+
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput({ className, type = 'text', ...props }, ref) {
+  return (
+    <input
+      ref={ref}
+      type={type}
+      className={cn(
+        'bg-bg-inset border border-border-default focus:border-border-focus rounded-lg px-3 py-2',
+        'text-[14px] leading-[1.4] font-normal text-text-primary placeholder:text-text-muted',
+        'outline-none transition-colors',
+        'disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled',
+        'signal:transition-shadow signal:focus:shadow-focus-ring',
+        className,
+      )}
+      {...props}
+    />
+  )
+})

package/src/Textarea.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { Textarea } from './Textarea'
+
+const meta = {
+  title: 'Inputs/Textarea',
+  component: Textarea,
+  parameters: { layout: 'padded' },
+  args: { placeholder: 'Summarise the outcome or decision…', className: 'h-[109px]' },
+  decorators: [(Story) => <div className="flex w-[360px] flex-col"><Story /></div>],
+} satisfies Meta<typeof Textarea>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Empty: Story = {}
+export const Filled: Story = { args: { defaultValue: 'Shipped the fix in build #482; verified with QA on staging.' } }
+export const Disabled: Story = { args: { defaultValue: 'Read only', disabled: true } }

package/src/Textarea.tsx

@@ -0,0 +1,25 @@
+import { forwardRef, type TextareaHTMLAttributes } from 'react'
+import { cn } from './cn'
+
+/**
+ * Peek's Textarea (2026-08-28), verbatim: TextInput's look on a textarea
+ * that does not resize. Plus a disabled look (Ship's addition).
+ */
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement>
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea({ className, ...props }, ref) {
+  return (
+    <textarea
+      ref={ref}
+      className={cn(
+        'bg-bg-inset border border-border-default focus:border-border-focus rounded-lg px-3 py-2',
+        'text-[14px] leading-[1.4] font-normal text-text-primary placeholder:text-text-muted',
+        'resize-none outline-none transition-colors',
+        'disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled',
+        'signal:transition-shadow signal:focus:shadow-focus-ring',
+        className,
+      )}
+      {...props}
+    />
+  )
+})