@remix-run/ui 0.2.0 → 0.4.0

package/src/components/combobox/demos/overview.demo.tsx

@@ -1,199 +0,0 @@
-import { css, type Handle } from '@remix-run/ui'
-import { Combobox, ComboboxOption, onComboboxChange } from '@remix-run/ui/combobox'
-import { theme } from '@remix-run/ui/theme'
-
-/**
- * @name Combobox Overview
- * @description A searchable combobox with keyboard navigation. Try typing airport names or codes like ord, lax, or jfk.
- */
-export default function Example(handle: Handle) {
-  let value: string | null = null
-
-  return () => (
-    <div mix={stackCss}>
-      <div mix={fieldCss}>
-        <label for="airport-combobox" mix={labelCss}>
-          Airport
-        </label>
-
-        <Combobox
-          inputId="airport-combobox"
-          mix={[
-            comboboxCss,
-            onComboboxChange((event) => {
-              value = event.value
-              void handle.update()
-            }),
-          ]}
-          name="airport"
-          placeholder="Search airports or codes"
-        >
-          {airportOptions.map((airport) => (
-            <ComboboxOption
-              key={airport.value}
-              disabled={airport.disabled}
-              label={airport.label}
-              searchValue={airport.searchValue}
-              value={airport.value}
-            />
-          ))}
-        </Combobox>
-
-        <div mix={helpCss}>
-          Try typing `san`, `wash`, or airport codes like `ord`, `lax`, or `jfk`, then use ArrowDown
-          and Enter.
-        </div>
-      </div>
-
-      <p mix={valueCss}>{`value=${value ?? 'null'}`}</p>
-    </div>
-  )
-}
-
-type AirportOption = {
-  disabled?: boolean
-  label: string
-  searchValue: string[]
-  value: string
-}
-
-const airportOptions: AirportOption[] = [
-  {
-    label: 'Hartsfield-Jackson Atlanta International',
-    searchValue: ['atl', 'atlanta', 'hartsfield-jackson atlanta international'],
-    value: 'ATL',
-  },
-  {
-    label: 'Austin-Bergstrom International',
-    searchValue: ['aus', 'austin', 'austin-bergstrom international'],
-    value: 'AUS',
-  },
-  {
-    label: 'Boston Logan International',
-    searchValue: ['bos', 'boston', 'boston logan international'],
-    value: 'BOS',
-  },
-  {
-    label: 'Baltimore/Washington International',
-    searchValue: ['bwi', 'baltimore', 'washington', 'baltimore/washington international'],
-    value: 'BWI',
-  },
-  {
-    label: 'Ronald Reagan Washington National',
-    searchValue: ['dca', 'reagan', 'washington', 'ronald reagan washington national'],
-    value: 'DCA',
-  },
-  {
-    label: 'Denver International',
-    searchValue: ['den', 'denver', 'denver international'],
-    value: 'DEN',
-  },
-  {
-    label: 'Dallas/Fort Worth International',
-    searchValue: ['dfw', 'dallas', 'fort worth', 'dallas/fort worth international'],
-    value: 'DFW',
-  },
-  {
-    label: 'Newark Liberty International',
-    searchValue: ['ewr', 'newark', 'newark liberty international'],
-    value: 'EWR',
-  },
-  {
-    label: 'Daniel K. Inouye International',
-    searchValue: ['hnl', 'honolulu', 'daniel k. inouye international'],
-    value: 'HNL',
-  },
-  {
-    label: 'Washington Dulles International',
-    searchValue: ['iad', 'dulles', 'washington', 'washington dulles international'],
-    value: 'IAD',
-  },
-  {
-    label: 'John F. Kennedy International',
-    searchValue: ['jfk', 'kennedy', 'new york', 'john f. kennedy international'],
-    value: 'JFK',
-  },
-  {
-    label: 'Harry Reid International',
-    searchValue: ['las', 'las vegas', 'harry reid international'],
-    value: 'LAS',
-  },
-  {
-    label: 'Los Angeles International',
-    searchValue: ['lax', 'los angeles', 'los angeles international'],
-    value: 'LAX',
-  },
-  {
-    label: 'Orlando International',
-    searchValue: ['mco', 'orlando', 'orlando international'],
-    value: 'MCO',
-  },
-  {
-    label: 'Miami International',
-    searchValue: ['mia', 'miami', 'miami international'],
-    value: 'MIA',
-  },
-  {
-    label: "Chicago O'Hare International",
-    searchValue: ['ord', 'ohare', 'chicago', "chicago o'hare international"],
-    value: 'ORD',
-  },
-  {
-    label: 'Portland International',
-    searchValue: ['pdx', 'portland', 'portland international'],
-    value: 'PDX',
-  },
-  {
-    label: 'San Diego International',
-    searchValue: ['san', 'san diego', 'san diego international'],
-    value: 'SAN',
-  },
-  {
-    label: 'San Francisco International',
-    searchValue: ['sfo', 'san francisco', 'san francisco international'],
-    value: 'SFO',
-  },
-  {
-    disabled: true,
-    label: 'San Jose Mineta International',
-    searchValue: ['sjc', 'san jose', 'san jose mineta international'],
-    value: 'SJC',
-  },
-]
-
-const comboboxCss = css({
-  width: '16rem',
-})
-
-const stackCss = css({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: theme.space.sm,
-  width: '100%',
-})
-
-const fieldCss = css({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: theme.space.xs,
-})
-
-const labelCss = css({
-  margin: 0,
-  fontSize: theme.fontSize.xs,
-  fontWeight: theme.fontWeight.semibold,
-  color: theme.colors.text.primary,
-})
-
-const helpCss = css({
-  fontSize: theme.fontSize.xs,
-  lineHeight: theme.lineHeight.relaxed,
-  color: theme.colors.text.secondary,
-})
-
-const valueCss = css({
-  margin: 0,
-  fontFamily: theme.fontFamily.mono,
-  fontSize: theme.fontSize.xs,
-  color: theme.colors.text.secondary,
-})

package/src/components/glyph/README.md

@@ -1,72 +0,0 @@
-# glyph
-
-`Glyph` renders references into a shared SVG sprite sheet. Render a glyph sheet once, then render individual `Glyph` instances by name.
-
-## Usage
-
-```tsx
-import { Glyph } from 'remix/ui/glyph'
-import { RMX_01_GLYPHS } from 'remix/ui/theme'
-
-function Layout() {
-  return (
-    <html>
-      <body>
-        <RMX_01_GLYPHS />
-        <button aria-label="Delete">
-          <Glyph name="trash" />
-        </button>
-      </body>
-    </html>
-  )
-}
-```
-
-Most glyphs are decorative because the surrounding control supplies the accessible name. `Glyph` sets `aria-hidden` by default in that case.
-
-```tsx
-<button aria-label="Search">
-  <Glyph name="search" />
-</button>
-```
-
-Give the glyph its own label only when the SVG itself is the accessible element.
-
-```tsx
-<Glyph aria-label="Search" name="search" viewBox="0 0 20 20" width="24" />
-```
-
-Use `createGlyphSheet` when a theme or app provides its own complete glyph set. The generated sheet exposes the stable symbol ids and the original values for reuse.
-
-```tsx
-import { createGlyphSheet, type GlyphValues } from 'remix/ui/glyph'
-
-declare const glyphValues: GlyphValues
-
-export const AppGlyphs = createGlyphSheet(glyphValues)
-
-AppGlyphs.ids.trash
-AppGlyphs.values.trash
-```
-
-## `glyph.*`
-
-- `Glyph`: renders an `<svg>` with a `<use>` element that points at the package-owned symbol id for `name`.
-- `createGlyphSheet(values)`: creates a hidden SVG sprite sheet component from a complete glyph value set.
-- `GlyphName`: typed union of supported glyph names.
-- `GlyphProps`: props accepted by `Glyph`.
-- `GlyphSheetProps`: props accepted by generated glyph sheet components.
-- `GlyphSymbol`: SVG symbol value accepted by glyph value maps.
-- `GlyphValues`: object shape expected by `createGlyphSheet`.
-- `GlyphSheetComponent`: generated sprite sheet component with `ids` and `values` attached.
-
-The built-in glyph names are `add`, `alert`, `check`, `chevronDown`, `chevronVertical`, `chevronUp`, `chevronRight`, `close`, `copy`, `edit`, `expand`, `info`, `menu`, `open`, `search`, `spinner`, and `trash`.
-
-## Behavior Notes
-
-- Render the glyph sheet once before rendering glyph instances that reference it.
-- `createGlyphSheet` renders a hidden zero-size SVG and clones each provided `<symbol>` with the stable package id.
-- `Glyph` is `aria-hidden` by default when no accessible label or labelled-by relationship is provided.
-- Labeled glyphs keep their accessible label and do not force `aria-hidden`.
-- Host SVG props such as `viewBox`, `width`, `mix`, and `aria-label` are preserved.
-- `createGlyphSheet` throws if a provided glyph value is not a `<symbol>` element.

package/src/components/glyph/glyph.tsx

@@ -1,110 +0,0 @@
-import { createElement } from '@remix-run/ui'
-import type { Handle, Props, RemixElement } from '@remix-run/ui'
-
-import {
-  glyphContract,
-  glyphNames,
-  type GlyphName,
-  type GlyphValues,
-} from '../../theme/glyph-contract.ts'
-
-export type { GlyphName, GlyphSymbol, GlyphValues } from '../../theme/glyph-contract.ts'
-
-export type GlyphSheetProps = Omit<Props<'svg'>, 'children'>
-
-type GlyphSheetRenderer = (handle: Handle<GlyphSheetProps>) => () => RemixElement
-
-export type GlyphSheetComponent = GlyphSheetRenderer & {
-  ids: Readonly<Record<GlyphName, string>>
-  values: GlyphValues
-}
-
-export type GlyphProps = Omit<Props<'svg'>, 'children'> & {
-  name: GlyphName
-}
-
-export function createGlyphSheet(values: GlyphValues): GlyphSheetComponent {
-  let ids = Object.freeze(
-    Object.fromEntries(glyphNames.map((name) => [name, glyphContract[name].id])) as Record<
-      GlyphName,
-      string
-    >,
-  )
-
-  function GlyphSheet(handle: Handle<GlyphSheetProps>): () => RemixElement {
-    return () => {
-      let { style, ...svgProps } = handle.props
-      let hiddenStyle = {
-        position: 'absolute',
-        width: '0',
-        height: '0',
-        overflow: 'hidden',
-        pointerEvents: 'none',
-      }
-      let nextStyle =
-        typeof style === 'object' && style !== null ? { ...hiddenStyle, ...style } : hiddenStyle
-
-      return createElement(
-        'svg',
-        {
-          ...svgProps,
-          'aria-hidden': handle.props['aria-hidden'] ?? true,
-          focusable: handle.props.focusable ?? 'false',
-          height: handle.props.height ?? '0',
-          style: nextStyle,
-          width: handle.props.width ?? '0',
-          xmlns: 'http://www.w3.org/2000/svg',
-        },
-        glyphNames.map((name) => {
-          let glyph = values[name]
-
-          return cloneGlyphSymbol(name, glyph, ids[name])
-        }),
-      )
-    }
-  }
-
-  return Object.assign(GlyphSheet, {
-    ids,
-    values,
-  })
-}
-
-export function Glyph(handle: Handle<GlyphProps>): () => RemixElement {
-  return () => {
-    let { fill, name, ...svgProps } = handle.props
-    let glyphId = glyphContract[name].id
-    let hiddenByDefault =
-      handle.props['aria-hidden'] === undefined &&
-      handle.props['aria-label'] === undefined &&
-      handle.props['aria-labelledby'] === undefined
-
-    return createElement(
-      'svg',
-      {
-        ...svgProps,
-        'aria-hidden': hiddenByDefault ? true : handle.props['aria-hidden'],
-        fill: fill ?? 'none',
-        xmlns: 'http://www.w3.org/2000/svg',
-      },
-      createElement('use', {
-        xlinkHref: `#${glyphId}`,
-      }),
-    )
-  }
-}
-
-function cloneGlyphSymbol(name: GlyphName, glyph: RemixElement, id: string): RemixElement {
-  if (glyph.type !== 'symbol') {
-    throw new TypeError(`Expected glyph "${name}" to be a <symbol> element`)
-  }
-
-  return {
-    ...glyph,
-    key: name,
-    props: {
-      ...glyph.props,
-      id,
-    },
-  }
-}

package/src/components/listbox/demos/overview.demo.tsx

@@ -1,101 +0,0 @@
-import { css, on, type Handle } from '@remix-run/ui'
-import { Glyph } from '@remix-run/ui/glyph'
-import * as listbox from '@remix-run/ui/listbox'
-import type { ListboxValue } from '@remix-run/ui/listbox'
-import { theme } from '@remix-run/ui/theme'
-
-/**
- * @name Listbox Overview
- * @description A keyboard-navigable listbox with selection, highlighting, and an optional flash-selection animation.
- */
-export default function Example(handle: Handle) {
-  let value: ListboxValue = options[0]!.value
-  let activeValue: ListboxValue = options[0]!.value
-  let flashSelection = false
-
-  return () => {
-    return (
-      <div mix={stackCss}>
-        <listbox.Context
-          value={value}
-          activeValue={activeValue}
-          flashSelection={flashSelection}
-          onSelect={(nextValue) => {
-            value = nextValue
-            handle.update()
-          }}
-          onHighlight={(nextActiveValue) => {
-            activeValue = nextActiveValue
-            handle.update()
-          }}
-        >
-          <div tabIndex={0} mix={[listbox.listStyle, listbox.list(), containerCss]}>
-            {options.map((option) => (
-              <div key={option.value} mix={[listbox.optionStyle, listbox.option(option)]}>
-                <Glyph mix={listbox.glyphStyle} name="check" />
-                <span mix={listbox.labelStyle}>{option.label}</span>
-              </div>
-            ))}
-          </div>
-        </listbox.Context>
-        <div mix={controlsCss}>
-          <label mix={checkboxLabelCss}>
-            <input
-              type="checkbox"
-              defaultChecked={flashSelection}
-              mix={on('change', (event) => {
-                flashSelection = event.currentTarget.checked
-                handle.update()
-              })}
-            />{' '}
-            Flash selection
-          </label>
-          <p mix={valueCss}>{`value=${value ?? 'null'}`}</p>
-        </div>
-      </div>
-    )
-  }
-}
-
-const options = [
-  { label: 'Apple', value: 'apple' },
-  { label: 'Banana', value: 'banana' },
-  { label: 'Cherry', value: 'cherry' },
-  { label: 'Date', value: 'date' },
-  { label: 'Elderberry', value: 'elderberry' },
-  { label: 'Fig', value: 'fig' },
-  { label: 'Grape', value: 'grape' },
-] as const
-
-const containerCss = css({
-  borderColor: theme.colors.border.subtle,
-  padding: theme.space.xs,
-  borderRadius: theme.radius.lg,
-  borderStyle: 'solid',
-})
-
-const stackCss = css({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: theme.space.md,
-  width: '100%',
-})
-
-const controlsCss = css({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: theme.space.xs,
-})
-
-const checkboxLabelCss = css({
-  fontSize: theme.fontSize.sm,
-  lineHeight: theme.lineHeight.normal,
-  color: theme.colors.text.secondary,
-})
-
-const valueCss = css({
-  margin: 0,
-  fontFamily: theme.fontFamily.mono,
-  fontSize: theme.fontSize.xs,
-  color: theme.colors.text.secondary,
-})

package/src/components/menu/README.md

@@ -1,96 +0,0 @@
-# menu
-
-`Menu` renders a button-triggered menu with keyboard navigation, checked items, selection events, and nested submenus. Use it for action menus and command groups.
-
-## Usage
-
-```tsx
-import type { Handle } from 'remix/ui'
-import { Menu, MenuItem, Submenu, onMenuSelect } from 'remix/ui/menu'
-import { separatorStyle } from 'remix/ui/separator'
-
-export function ViewMenu(handle: Handle) {
-  let wordWrap = false
-  let density = 'comfortable'
-
-  return () => (
-    <Menu
-      label="View"
-      mix={onMenuSelect((event) => {
-        if (event.item.name === 'wordWrap') {
-          wordWrap = event.item.checked ?? false
-        } else if (event.item.name === 'density' && event.item.value) {
-          density = event.item.value
-        }
-
-        void handle.update()
-      })}
-    >
-      <MenuItem checked={wordWrap} name="wordWrap" type="checkbox">
-        Word wrap
-      </MenuItem>
-      <MenuItem disabled name="minimap">
-        Minimap
-      </MenuItem>
-      <hr mix={separatorStyle} />
-      <MenuItem checked={density === 'compact'} name="density" type="radio" value="compact">
-        Compact
-      </MenuItem>
-      <MenuItem checked={density === 'comfortable'} name="density" type="radio" value="comfortable">
-        Comfortable
-      </MenuItem>
-      <Submenu label="Zoom">
-        <MenuItem name="zoomIn" value="zoom-in">
-          Zoom in
-        </MenuItem>
-        <MenuItem name="zoomOut" value="zoom-out">
-          Zoom out
-        </MenuItem>
-      </Submenu>
-    </Menu>
-  )
-}
-```
-
-Use `label` or `searchValue` when the rendered item content is not the text that should be used for event labels or typeahead.
-
-```tsx
-<MenuItem label="Open command palette" name="commandPalette" searchValue="palette">
-  Command palette
-</MenuItem>
-```
-
-Use `menuLabel` when the menu surface needs a different accessible label from the visible trigger.
-
-```tsx
-<Menu label="..." menuLabel="Project actions">
-  <MenuItem name="rename">Rename project</MenuItem>
-</Menu>
-```
-
-## `menu.*`
-
-- `Menu`: composed trigger, popover, and list component for the common menu case.
-- `MenuItem`: menu item wrapper. Supports regular, checkbox, and radio item roles through `type`, `checked`, `name`, `value`, `label`, `disabled`, and `searchValue`.
-- `Submenu`: nested menu wrapper with its own trigger and child menu surface.
-- `MenuList`: lower-level list wrapper for custom composition.
-- `onMenuSelect(...)`: event mixin for the bubbling `MenuSelectEvent`.
-- `MenuSelectEvent`: bubbling event class whose `item` describes the selected item.
-- `MenuSelectItem`: selected item shape with `checked`, `id`, `label`, `name`, `type`, and `value`.
-- `menu.Context`, `menu.trigger()`, `menu.popover()`, `menu.list()`, `menu.item(...)`, and `menu.submenuTrigger(...)`: lower-level composition primitives.
-- `buttonStyle`, `popoverStyle`, `listStyle`, `itemStyle`, `itemSlotStyle`, `itemLabelStyle`, `itemGlyphStyle`, and `triggerGlyphStyle`: flat style mixins used by the wrappers.
-- `MenuProps`, `MenuItemProps`, `MenuListProps`, `MenuProviderProps`, `MenuTriggerOptions`, `MenuItemOptions`, and `SubmenuProps`: public TypeScript props and option types.
-
-## Behavior Notes
-
-- Click opens the root menu and focuses the list; clicking the trigger again closes it and restores focus.
-- `ArrowDown` opens from the trigger at the first enabled item. `ArrowUp` opens at the last enabled item. Enter and Space open the menu with focus on the list.
-- Keyboard navigation skips disabled items and does not wrap past the first or last enabled item.
-- `Home` and `End` move to the first and last enabled item. Enter and Space activate the highlighted item.
-- Printable keys use typeahead. Typeahead matches `searchValue` when provided and otherwise uses the item label.
-- Submenus open with `ArrowRight`, close with `ArrowLeft`, and are anchored to the submenu trigger with `right-start` placement.
-- Pointer movement highlights enabled items. Submenus open after a short focus/pointer delay and use hover aim so they stay open while moving toward the child surface.
-- Selecting a regular item flashes that item. Selecting a checkbox or radio item flashes the committed checked state.
-- Selection dispatches one bubbled `MenuSelectEvent`, closes the full menu tree, and restores focus to the root trigger.
-- The composed `Menu` re-dispatches selection from its trigger so handlers on the `Menu` button and shared ancestors see the event once.
-- `menuLabel`, `Submenu.menuLabel`, and `Submenu.listProps` let composed menus label and customize menu surfaces separately from trigger content.

package/src/components/menu/demos/bubbling.demo.tsx

@@ -1,34 +0,0 @@
-import { on } from '@remix-run/ui'
-import { Menu, MenuItem, onMenuSelect } from '@remix-run/ui/menu'
-
-/**
- * @name Menu Event Bubbling
- * @description Item-level handlers fire before the root handler, letting individual items intercept events while others bubble up.
- */
-export default function Example() {
-  return () => (
-    <Menu
-      label="Project"
-      menuLabel="Project actions"
-      mix={onMenuSelect((event) => {
-        console.log('Menu root handler:', event.item)
-      })}
-    >
-      <MenuItem name="open" value="open-project">
-        Open project
-      </MenuItem>
-      <MenuItem
-        name="rename"
-        value="rename-project"
-        mix={onMenuSelect((event) => {
-          console.log('Menu item handler:', event.item)
-        })}
-      >
-        Rename project
-      </MenuItem>
-      <MenuItem name="duplicate" value="duplicate-project">
-        Duplicate project
-      </MenuItem>
-    </Menu>
-  )
-}

package/src/components/menu/demos/overview.demo.tsx

@@ -1,76 +0,0 @@
-import { type Handle } from '@remix-run/ui'
-import { Menu, MenuItem, onMenuSelect, Submenu } from '@remix-run/ui/menu'
-import { separatorStyle } from '@remix-run/ui/separator'
-
-/**
- * @name Menu Overview
- * @description A hierarchical menu with checkboxes, radio groups, submenus, and separators.
- */
-export default function Example(handle: Handle) {
-  type Density = 'comfortable' | 'compact'
-  let wordWrap = true
-  let minimap = false
-  let showGutter = true
-  let density: Density = 'comfortable'
-
-  return () => (
-    <Menu
-      label="View"
-      menuLabel="View options"
-      mix={onMenuSelect((event) => {
-        switch (event.item.name) {
-          case 'wordWrap':
-            wordWrap = !wordWrap
-            break
-          case 'minimap':
-            minimap = !minimap
-            break
-          case 'showGutter':
-            showGutter = !showGutter
-            break
-          case 'density':
-            density = event.item.value as Density
-            break
-        }
-        handle.update()
-      })}
-    >
-      <MenuItem name="wordWrap" type="checkbox" checked={wordWrap}>
-        Word wrap
-      </MenuItem>
-      <MenuItem name="minimap" type="checkbox" checked={minimap}>
-        Minimap
-      </MenuItem>
-      <MenuItem name="showGutter" type="checkbox" checked={showGutter}>
-        Show gutter
-      </MenuItem>
-
-      <hr mix={separatorStyle} />
-      <Submenu label="Zoom">
-        <MenuItem name="zoomIn" value="zoom-in">
-          Zoom In
-        </MenuItem>
-        <MenuItem name="zoomOut" value="zoom-out">
-          Zoom Out
-        </MenuItem>
-        <MenuItem name="resetZoom" value="reset-zoom">
-          Reset Zoom
-        </MenuItem>
-      </Submenu>
-
-      <Submenu label="Density">
-        <MenuItem
-          name="density"
-          type="radio"
-          value="comfortable"
-          checked={density === 'comfortable'}
-        >
-          Comfortable
-        </MenuItem>
-        <MenuItem name="density" type="radio" value="compact" checked={density === 'compact'}>
-          Compact
-        </MenuItem>
-      </Submenu>
-    </Menu>
-  )
-}