@remix-run/ui 0.0.0 → 0.1.0

package/src/components/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,124 @@
+// @jsxRuntime classic
+// @jsx createElement
+import { css, createElement } from '@remix-run/ui'
+import type { Handle, Props, RemixNode } from '@remix-run/ui'
+
+import { Glyph } from '../glyph/glyph.tsx'
+import { theme } from '../../theme/theme.ts'
+
+export type BreadcrumbItem = {
+  current?: boolean
+  href?: string
+  label: RemixNode
+}
+
+export type BreadcrumbsProps = Omit<Props<'nav'>, 'children'> & {
+  items: BreadcrumbItem[]
+  separator?: RemixNode
+}
+
+const rootCss = css({
+  minWidth: 0,
+})
+
+const listCss = css({
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  gap: `${theme.space.xs} ${theme.space.sm}`,
+  minWidth: 0,
+  margin: 0,
+  padding: 0,
+  listStyle: 'none',
+})
+
+const itemCss = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  minWidth: 0,
+})
+
+const separatorCss = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexShrink: 0,
+  width: theme.fontSize.sm,
+  height: theme.fontSize.sm,
+  color: theme.colors.text.muted,
+})
+
+const linkCss = css({
+  color: theme.colors.text.secondary,
+  fontSize: theme.fontSize.sm,
+  lineHeight: theme.lineHeight.normal,
+  textDecoration: 'none',
+  whiteSpace: 'nowrap',
+  '&:hover': {
+    color: theme.colors.text.primary,
+  },
+})
+
+const currentCss = css({
+  color: theme.colors.text.primary,
+  fontSize: theme.fontSize.sm,
+  lineHeight: theme.lineHeight.normal,
+  fontWeight: theme.fontWeight.medium,
+  whiteSpace: 'nowrap',
+})
+
+const textCss = css({
+  color: theme.colors.text.secondary,
+  fontSize: theme.fontSize.sm,
+  lineHeight: theme.lineHeight.normal,
+  whiteSpace: 'nowrap',
+})
+
+export function Breadcrumbs(handle: Handle<BreadcrumbsProps>) {
+  return () => {
+    let { 'aria-label': ariaLabel, items, separator, mix, ...navProps } = handle.props
+    let currentIndex = items.findIndex((item) => item.current)
+    if (currentIndex === -1) {
+      currentIndex = Math.max(0, items.length - 1)
+    }
+
+    let separatorContent = separator ?? <Glyph name="chevronRight" />
+
+    return (
+      <nav aria-label={ariaLabel ?? 'Breadcrumb'} {...navProps} mix={[rootCss, mix]}>
+        <ol mix={listCss}>
+          {items.flatMap((item, index) => {
+            let isCurrent = index === currentIndex
+            let content = isCurrent ? (
+              <span aria-current="page" mix={currentCss}>
+                {item.label}
+              </span>
+            ) : item.href ? (
+              <a href={item.href} mix={linkCss}>
+                {item.label}
+              </a>
+            ) : (
+              <span mix={textCss}>{item.label}</span>
+            )
+
+            let nodes: RemixNode[] = [
+              <li key={`item-${index}`} mix={itemCss}>
+                {content}
+              </li>,
+            ]
+
+            if (index < items.length - 1) {
+              nodes.push(
+                <li key={`separator-${index}`} aria-hidden="true" mix={separatorCss}>
+                  {separatorContent}
+                </li>,
+              )
+            }
+
+            return nodes
+          })}
+        </ol>
+      </nav>
+    )
+  }
+}

package/src/components/button/README.md

@@ -0,0 +1,44 @@
+# button
+
+`button` is the shared button styling contract for `@remix-run/ui`. Use `Button` for ordinary action buttons, or compose flat `button.*Style` exports directly when a higher-level control needs button structure without a wrapper.
+
+## Usage
+
+```tsx
+import { Button } from '@remix-run/ui/button'
+import * as button from '@remix-run/ui/button'
+import { Glyph } from '@remix-run/ui/glyph'
+
+function Actions() {
+  return (
+    <div>
+      <Button startIcon={<Glyph name="add" />} tone="primary">
+        Create project
+      </Button>
+
+      <a href="/projects" mix={[button.baseStyle, button.secondaryStyle]}>
+        <span mix={button.labelStyle}>View projects</span>
+        <Glyph mix={button.iconStyle} name="chevronRight" />
+      </a>
+    </div>
+  )
+}
+```
+
+## `button.*`
+
+- `Button`: thin button wrapper for the common `base + tone + label/icon slots` case. Pass `tone`, `startIcon`, and `endIcon` when the default authored structure is enough.
+- `button.baseStyle`: base host styling plus the default `type="button"` behavior for button elements.
+- `button.primaryStyle`, `button.secondaryStyle`, `button.ghostStyle`, and `button.dangerStyle`: visual button treatments.
+- `button.labelStyle`: inline label slot with the standard button spacing.
+- `button.iconStyle`: icon slot sizing and `aria-hidden` defaults for decorative icons.
+
+## Behavior Notes
+
+- `button.baseStyle` only adds `type="button"` when the host element is a `<button>` and no explicit `type` was provided.
+- `Button` renders `children` inside `button.labelStyle` and renders `startIcon` and `endIcon` inside `button.iconStyle`.
+- Use an explicit accessible name when you render an icon-only button.
+
+## When To Use Something Else
+
+Use `button.*Style` exports directly when a control needs button structure plus extra behavior or layout, like `select`, `menu`, or `tabs`. Those controls own their own interaction mixins and should not hide that behavior behind `Button`.

package/src/components/button/button.tsx

@@ -0,0 +1,188 @@
+// @jsxRuntime classic
+// @jsx createElement
+import { attrs, createElement, createMixin, css } from '@remix-run/ui'
+import type { CSSMixinDescriptor, ElementProps, Handle, Props, RemixNode } from '@remix-run/ui'
+
+import { theme } from '../../theme/theme.ts'
+
+const ghostButtonToneCss: CSSMixinDescriptor = css({
+  backgroundColor: 'transparent',
+  backgroundImage: 'none',
+  color: theme.colors.text.secondary,
+  border: '0.5px solid transparent',
+  boxShadow: 'none',
+  '&:hover': {
+    backgroundColor: theme.surface.lvl3,
+    color: theme.colors.text.primary,
+  },
+  '&:active': {
+    backgroundColor: `color-mix(in oklab, ${theme.surface.lvl3} 94%, black)`,
+    color: `color-mix(in oklab, ${theme.colors.text.primary} 94%, black)`,
+  },
+  '&:focus-visible': {
+    outline: `2px solid ${theme.colors.focus.ring}`,
+    outlineOffset: '2px',
+    backgroundColor: theme.surface.lvl3,
+    color: theme.colors.text.primary,
+  },
+  '&:disabled': {
+    opacity: 0.6,
+  },
+})
+
+const buttonBaseStyleCss: CSSMixinDescriptor = css({
+  '--rmx-button-label-padding-inline': theme.space.xs,
+  all: 'unset',
+  boxSizing: 'border-box',
+  cursor: 'revert',
+  position: 'relative',
+  isolation: 'isolate',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
+  borderRadius: theme.radius.full,
+  fontFamily: theme.fontFamily.sans,
+  minHeight: theme.control.height.sm,
+  paddingInline: theme.space.md,
+  fontSize: theme.fontSize.xs,
+  lineHeight: '1',
+  fontWeight: theme.fontWeight.medium,
+  whiteSpace: 'nowrap',
+  textDecoration: 'none',
+  userSelect: 'none',
+  WebkitUserSelect: 'none',
+  verticalAlign: 'top',
+})
+
+const buttonLabelCss: CSSMixinDescriptor = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  minWidth: 0,
+  paddingInline: 'var(--rmx-button-label-padding-inline)',
+})
+
+const buttonIconCss: CSSMixinDescriptor = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '1em',
+  height: '1em',
+  flexShrink: 0,
+  '& > svg': {
+    display: 'block',
+    width: '100%',
+    height: '100%',
+  },
+})
+
+const buttonIconAttrsCss = attrs({ 'aria-hidden': true })
+
+const buttonDefaultsMixin = createMixin<Element, [], ElementProps>(
+  (handle, hostType) => (props) => {
+    if (hostType !== 'button' || props.type !== undefined) {
+      return handle.element
+    }
+
+    return createElement(handle.element as unknown as string, {
+      ...props,
+      type: 'button',
+    })
+  },
+)
+
+const buttonDefaultsCss = buttonDefaultsMixin()
+
+export const baseStyle = [buttonDefaultsCss, buttonBaseStyleCss] as const
+export const iconStyle = [buttonIconAttrsCss, buttonIconCss] as const
+export const labelStyle = buttonLabelCss
+export const primaryStyle = createButtonCss(theme.colors.action.primary)
+export const secondaryStyle = createButtonCss(theme.colors.action.secondary)
+export const ghostStyle = ghostButtonToneCss
+export const dangerStyle = createButtonCss(theme.colors.action.danger)
+
+const toneStyleByTone = {
+  primary: primaryStyle,
+  secondary: secondaryStyle,
+  ghost: ghostStyle,
+  danger: dangerStyle,
+} as const
+
+export type ButtonTone = keyof typeof toneStyleByTone
+
+export type ButtonProps = Omit<Props<'button'>, 'children'> & {
+  readonly children?: RemixNode
+  readonly endIcon?: RemixNode
+  readonly startIcon?: RemixNode
+  readonly tone?: ButtonTone
+}
+
+export function Button(handle: Handle<ButtonProps>) {
+  return () => {
+    let { children, endIcon, mix, startIcon, tone = 'secondary', ...buttonProps } = handle.props
+
+    return (
+      <button {...buttonProps} mix={[baseStyle, toneStyleByTone[tone], mix]}>
+        {startIcon ? <span mix={iconStyle}>{startIcon}</span> : null}
+        {children !== undefined ? <span mix={labelStyle}>{children}</span> : null}
+        {endIcon ? <span mix={iconStyle}>{endIcon}</span> : null}
+      </button>
+    )
+  }
+}
+
+function createButtonCss(buttonTheme: {
+  background: string
+  backgroundHover: string
+  backgroundActive: string
+  foreground: string
+  border: string
+}): CSSMixinDescriptor {
+  let borderColor = createButtonBorderColor(buttonTheme.border)
+  let hoverBorderColor = createButtonBorderColor(buttonTheme.backgroundHover)
+  let activeBorderColor = createButtonBorderColor(buttonTheme.backgroundActive)
+
+  return css({
+    backgroundColor: buttonTheme.background,
+    backgroundImage: createButtonBackgroundImage(buttonTheme.background),
+    color: buttonTheme.foreground,
+    border: `0.5px solid ${borderColor}`,
+    boxShadow: `${createButtonHighlight(buttonTheme.background)}, ${theme.shadow.xs}, ${theme.shadow.sm}`,
+    '&:hover': {
+      backgroundColor: buttonTheme.backgroundHover,
+      backgroundImage: createButtonBackgroundImage(buttonTheme.backgroundHover),
+      borderColor: hoverBorderColor,
+    },
+    '&:active': {
+      backgroundColor: buttonTheme.backgroundActive,
+      backgroundImage: createButtonBackgroundImage(buttonTheme.backgroundActive),
+      borderColor: activeBorderColor,
+      boxShadow: `${createButtonHighlight(buttonTheme.backgroundActive, 0.12)}, ${theme.shadow.xs}`,
+    },
+    '&:focus-visible': {
+      outline: `2px solid ${theme.colors.focus.ring}`,
+      outlineOffset: '2px',
+    },
+    '&:disabled': {
+      opacity: 0.6,
+      cursor: 'not-allowed',
+    },
+  })
+}
+
+function createButtonBackgroundImage(background: string) {
+  return `linear-gradient(to bottom, ${createButtonHighlightColor(background, 0.18)} 0%, ${background} 100%)`
+}
+
+function createButtonBorderColor(color: string) {
+  return `color-mix(in oklab, ${color} 74%, black)`
+}
+
+function createButtonHighlight(background: string, amount = 0.16) {
+  return `inset 0 1px 0 ${createButtonHighlightColor(background, amount)}`
+}
+
+function createButtonHighlightColor(background: string, amount: number) {
+  let alpha = Math.round(amount * 100)
+  return `color-mix(in oklab, white ${alpha}%, ${background})`
+}

package/src/components/combobox/README.md

@@ -0,0 +1,145 @@
+# Combobox
+
+`Combobox` is the input-first popup value picker for `remix/ui`.
+
+Use it when the user should type draft text, filter a popup list, and still commit one stable form value. If you just need a button-triggered picker, use `Select` instead.
+
+## Usage
+
+```tsx
+import { css, type Handle } from 'remix/ui'
+import { Combobox, ComboboxOption, onComboboxChange } from 'remix/ui'
+
+let airports = [
+  {
+    label: 'Los Angeles International',
+    searchValue: ['lax', 'los angeles', 'los angeles international'],
+    value: 'LAX',
+  },
+  {
+    label: 'John F. Kennedy International',
+    searchValue: ['jfk', 'new york', 'john f. kennedy international'],
+    value: 'JFK',
+  },
+] as const
+
+export default function AirportField(handle: Handle) {
+  let value: string | null = null
+
+  return () => (
+    <div mix={root}>
+      <Combobox
+        inputId="airport"
+        mix={onComboboxChange((event) => {
+          value = event.value
+          void handle.update()
+        })}
+        name="airport"
+        placeholder="Search airports or codes"
+      >
+        {airports.map((airport) => (
+          <ComboboxOption
+            key={airport.value}
+            label={airport.label}
+            searchValue={airport.searchValue}
+            value={airport.value}
+          />
+        ))}
+      </Combobox>
+
+      <p>{`value=${value ?? 'null'}`}</p>
+    </div>
+  )
+}
+
+let root = css({
+  display: 'grid',
+  gap: '8px',
+})
+```
+
+## Public API
+
+### `Combobox`
+
+The convenience component.
+
+- Renders the text input, popover surface, listbox root, and hidden form input.
+- Dispatches a bubbled custom event that `onComboboxChange(...)` listens for when the committed value changes.
+- Accepts `defaultValue`, `disabled`, `inputId`, `name`, and `placeholder`.
+
+### `ComboboxOption`
+
+The default option row for `Combobox`.
+
+- Uses the shared listbox option visuals.
+- Accepts `label`, `value`, optional `searchValue`, and optional `disabled`.
+- `searchValue` can be a string or string array for aliases like airport codes, abbreviations, or alternate labels.
+
+### `onComboboxChange(...)`
+
+The listener mixin for bubbled committed-value changes.
+
+The event object includes:
+
+- `event.value`: the committed value or `null`
+- `event.label`: the committed option label or `null`
+- `event.optionId`: the generated option id or `null`
+
+### `combobox.Context`
+
+The lower-level coordinator for custom combobox composition.
+
+It wraps the shared `popover` and `listbox` contexts and owns the draft text, committed value, popup state, and selection timing.
+
+### `combobox.input()`
+
+Turns the host input into the combobox input.
+
+- Keeps focus on the input during list navigation and pointer selection.
+- Wires `role="combobox"`, `aria-expanded`, `aria-controls`, and `aria-activedescendant`.
+- Opens from typing, click, and arrow-key navigation.
+
+### `combobox.popover()`
+
+Turns the host into the combobox popover surface.
+
+- Uses the shared popover primitive.
+- Keeps anchor clicks inside the session so the input stays interactive while open.
+- Applies the combobox open/close reason contract used by `combobox.popoverStyle`.
+
+### `combobox.list()`
+
+Turns the host into the popup listbox root and applies the generated list id.
+
+### `combobox.option(options)`
+
+Registers one option with the combobox and listbox layers.
+
+- Accepts `label`, `value`, optional `searchValue`, and optional `disabled`.
+- Hides non-matching options from the current draft filter.
+- Prevents pointer selection from blurring the input before the click commits.
+
+### `combobox.hiddenInput()`
+
+Mirrors the committed value into a hidden input for forms.
+
+Apply it to an `<input type="hidden" />` inside the same `combobox.Context`.
+
+## Behavior Notes
+
+- Typing opens the popup in hint mode when there are matches.
+- If typing leaves no matches, the popup closes immediately without the navigation fade-out.
+- Selecting from the list flashes the option, then closes the popup and finally commits the visible input label.
+- Typing clears the committed value immediately; the hidden form value becomes empty until the user commits again.
+- Blur commits an exact `label` or `searchValue` match. A non-matching blur clears the draft text and committed value.
+- `Escape` keeps exact-match draft text but clears non-matching draft text and selection.
+- Disabled options can stay visible in filtered results, but they are skipped by keyboard navigation and selection.
+
+## When To Use Something Else
+
+Use `Select` when you want the ordinary button-triggered single-select control.
+
+Use `listbox` when you need listbox semantics without an editable text input.
+
+Use `popover` directly for custom floating panels that are not value-picking controls.