@remix-run/ui 0.3.0 → 0.4.0

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

@@ -1,200 +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.
- * @layout center
- */
-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/overview.demo.tsx

@@ -1,102 +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.
- * @layout center
- */
-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/demos/bubbling.demo.tsx

@@ -1,35 +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.
- * @layout center
- */
-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/context-trigger.demo.tsx

@@ -1,133 +0,0 @@
-import { css, type Handle } from '@remix-run/ui'
-import * as menu from '@remix-run/ui/menu'
-import { MenuItem, MenuList, onMenuSelect, Submenu } from '@remix-run/ui/menu'
-import { separatorStyle } from '@remix-run/ui/separator'
-import { theme } from '@remix-run/ui/theme'
-
-type FileAction = 'copyPath' | 'duplicate' | 'move' | 'rename' | 'reveal' | 'trash'
-
-const actionLabelByName: Record<FileAction, string> = {
-  copyPath: 'Copied path',
-  duplicate: 'Duplicated file',
-  move: 'Moved file',
-  rename: 'Renamed file',
-  reveal: 'Revealed in Finder',
-  trash: 'Moved to trash',
-}
-
-/**
- * @name Context Menu Trigger
- * @description A lower-level menu composition that opens from right-click coordinates while keeping standard menu selection and submenu behavior.
- * @layout center
- */
-export default function Example(handle: Handle) {
-  let latestAction = 'Right-click the card.'
-
-  return () => (
-    <menu.Context label="File actions">
-      <div mix={layoutCss}>
-        <div tabIndex={0} mix={[fileCardCss, menu.contextTrigger()]}>
-          <span mix={fileIconCss}>TS</span>
-          <span mix={fileTextCss}>
-            <strong mix={fileNameCss}>context-menu.tsx</strong>
-            <span mix={fileMetaCss}>Right-click or press Shift+F10</span>
-          </span>
-        </div>
-
-        <p aria-live="polite" mix={statusCss}>
-          {latestAction}
-        </p>
-      </div>
-
-      <MenuList
-        mix={onMenuSelect((event) => {
-          latestAction =
-            actionLabelByName[event.item.name as FileAction] ?? `Selected ${event.item.label}`
-          void handle.update()
-        })}
-      >
-        <MenuItem name="rename">Rename</MenuItem>
-        <MenuItem name="duplicate">Duplicate</MenuItem>
-        <MenuItem name="copyPath">Copy path</MenuItem>
-        <hr mix={separatorStyle} />
-        <Submenu label="Move to">
-          <MenuItem name="move" value="drafts">
-            Drafts
-          </MenuItem>
-          <MenuItem name="move" value="archive">
-            Archive
-          </MenuItem>
-        </Submenu>
-        <MenuItem name="reveal">Reveal in Finder</MenuItem>
-        <hr mix={separatorStyle} />
-        <MenuItem name="trash">Move to trash</MenuItem>
-      </MenuList>
-    </menu.Context>
-  )
-}
-
-const layoutCss = css({
-  display: 'grid',
-  justifyItems: 'start',
-  gap: theme.space.md,
-})
-
-const fileCardCss = css({
-  display: 'grid',
-  gridTemplateColumns: 'auto minmax(0, 1fr)',
-  alignItems: 'center',
-  gap: theme.space.md,
-  width: 'min(100%, 21rem)',
-  padding: theme.space.md,
-  border: `1px solid ${theme.colors.border.subtle}`,
-  borderRadius: theme.radius.lg,
-  backgroundColor: theme.surface.lvl1,
-  color: theme.colors.text.primary,
-  boxShadow: theme.shadow.xs,
-  cursor: 'context-menu',
-  userSelect: 'none',
-  '&:focus-visible': {
-    outline: `2px solid ${theme.colors.focus.ring}`,
-    outlineOffset: '2px',
-  },
-})
-
-const fileIconCss = css({
-  display: 'inline-grid',
-  placeItems: 'center',
-  width: theme.control.height.lg,
-  height: theme.control.height.lg,
-  borderRadius: theme.radius.md,
-  backgroundColor: theme.colors.action.primary.background,
-  color: theme.colors.action.primary.foreground,
-  fontSize: theme.fontSize.xs,
-  fontWeight: theme.fontWeight.bold,
-})
-
-const fileTextCss = css({
-  display: 'grid',
-  gap: theme.space.px,
-  minWidth: 0,
-})
-
-const fileNameCss = css({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  fontSize: theme.fontSize.sm,
-  lineHeight: theme.lineHeight.normal,
-})
-
-const fileMetaCss = css({
-  color: theme.colors.text.secondary,
-  fontSize: theme.fontSize.xs,
-  lineHeight: theme.lineHeight.normal,
-})
-
-const statusCss = css({
-  margin: 0,
-  minHeight: theme.lineHeight.normal,
-  color: theme.colors.text.secondary,
-  fontSize: theme.fontSize.sm,
-  lineHeight: theme.lineHeight.normal,
-})