@remix-run/ui 0.3.0 → 0.4.0

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

@@ -1,77 +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.
- * @layout center
- */
-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>
-  )
-}

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

@@ -1,144 +0,0 @@
-import { css, on, type Handle } from '@remix-run/ui'
-import { Button } from '@remix-run/ui/button'
-import { Glyph } from '@remix-run/ui/glyph'
-import * as popover from '@remix-run/ui/popover'
-import { Option, Select } from '@remix-run/ui/select'
-import { theme } from '@remix-run/ui/theme'
-
-/**
- * @name Popover Overview
- * @description A popover panel anchored to a trigger button, containing form controls and a close action.
- * @layout center
- */
-export default function Example(handle: Handle) {
-  let open = false
-
-  function closePopover() {
-    open = false
-    void handle.update()
-  }
-
-  return () => (
-    <popover.Context>
-      <div mix={buttonRowCss}>
-        <Button
-          endIcon={<Glyph name="chevronDown" />}
-          mix={[
-            popover.anchor({ placement: 'bottom' }),
-            popover.focusOnHide(),
-            on('click', () => {
-              open = !open
-              void handle.update()
-            }),
-          ]}
-          tone="secondary"
-        >
-          View options
-        </Button>
-      </div>
-
-      <div
-        mix={[
-          popover.surfaceStyle,
-          popover.surface({
-            closeOnAnchorClick: false,
-            open,
-            onHide() {
-              closePopover()
-            },
-          }),
-        ]}
-      >
-        <div mix={[popover.contentStyle, panelCss]}>
-          <div mix={fieldCss}>
-            <label for={`${handle.id}-grouping`} mix={labelCss}>
-              Grouping
-            </label>
-            <Select
-              id={`${handle.id}-grouping`}
-              defaultLabel="No grouping"
-              defaultValue="none"
-              mix={[fieldSelectCss, popover.focusOnShow()]}
-            >
-              <Option label="No grouping" value="none" />
-              <Option label="Status" value="status" />
-              <Option label="Priority" value="priority" />
-            </Select>
-          </div>
-
-          <div mix={fieldCss}>
-            <label for={`${handle.id}-ordering`} mix={labelCss}>
-              Ordering
-            </label>
-            <Select
-              id={`${handle.id}-ordering`}
-              defaultLabel="Manual"
-              defaultValue="manual"
-              mix={fieldSelectCss}
-            >
-              <Option label="Manual" value="manual" />
-              <Option label="Newest first" value="newest" />
-              <Option label="Oldest first" value="oldest" />
-            </Select>
-          </div>
-
-          <div mix={fieldCss}>
-            <label for={`${handle.id}-closed-projects`} mix={labelCss}>
-              Show closed projects
-            </label>
-            <Select
-              id={`${handle.id}-closed-projects`}
-              defaultLabel="All"
-              defaultValue="all"
-              mix={fieldSelectCss}
-            >
-              <Option label="All" value="all" />
-              <Option label="Open only" value="open" />
-              <Option label="Closed only" value="closed" />
-            </Select>
-          </div>
-
-          <div mix={actionsCss}>
-            <Button mix={on('click', closePopover)} tone="ghost">
-              Done
-            </Button>
-          </div>
-        </div>
-      </div>
-    </popover.Context>
-  )
-}
-
-const buttonRowCss = css({
-  display: 'flex',
-  justifyContent: 'flex-start',
-})
-
-const panelCss = css({
-  display: 'grid',
-  gap: theme.space.md,
-  width: '22rem',
-  padding: theme.space.lg,
-})
-
-const fieldCss = css({
-  display: 'grid',
-  gap: theme.space.px,
-})
-
-const labelCss = css({
-  margin: 0,
-  fontSize: theme.fontSize.xs,
-  fontWeight: theme.fontWeight.semibold,
-  color: theme.colors.text.primary,
-})
-
-const fieldSelectCss = css({
-  width: '100%',
-})
-
-const actionsCss = css({
-  display: 'flex',
-  justifyContent: 'flex-end',
-  paddingTop: theme.space.xs,
-})

package/src/components/select/deconstructed.demo.tsx

@@ -1,96 +0,0 @@
-import { css, type Handle } from '@remix-run/ui'
-import * as button from '@remix-run/ui/button'
-import { Glyph } from '@remix-run/ui/glyph'
-import * as listbox from '@remix-run/ui/listbox'
-import * as popover from '@remix-run/ui/popover'
-import * as select from '@remix-run/ui/select'
-import { theme } from '@remix-run/ui/theme'
-
-/**
- * @name Select Deconstructed
- * @description Build a fully custom select by composing the select, popover, and listbox primitives directly.
- * @layout center
- */
-export default function Example(handle: Handle) {
-  let label = 'Local'
-  let value = 'local'
-  let triggerId = `${handle.id}-trigger`
-
-  return () => (
-    <div
-      mix={[
-        stackCss,
-        select.onSelectChange((event) => {
-          label = event.label ?? 'Select an environment'
-          value = event.value ?? 'null'
-          void handle.update()
-        }),
-      ]}
-    >
-      <p mix={labelCss}>Environment</p>
-
-      <select.Context defaultLabel="Local" defaultValue="local" name="environment">
-        <button
-          id={triggerId}
-          type="button"
-          mix={[button.baseStyle, select.triggerStyle, select.trigger(), selectCss]}
-        >
-          <span mix={button.labelStyle}>{label}</span>
-          <Glyph mix={button.iconStyle} name="chevronVertical" />
-        </button>
-
-        <popover.Context>
-          <div mix={[popover.surfaceStyle, select.popover()]}>
-            <div
-              aria-labelledby={triggerId}
-              mix={[popover.contentStyle, listbox.listStyle, select.list()]}
-            >
-              {environmentOptions.map((option) => (
-                <div key={option.value} mix={[listbox.optionStyle, select.option(option)]}>
-                  <Glyph mix={listbox.glyphStyle} name="check" />
-                  <span mix={listbox.labelStyle}>{option.label}</span>
-                </div>
-              ))}
-            </div>
-          </div>
-        </popover.Context>
-
-        <input mix={select.hiddenInput()} />
-      </select.Context>
-
-      <p mix={valueCss}>{`value=${value}`}</p>
-    </div>
-  )
-}
-
-const environmentOptions = [
-  { label: 'Local', value: 'local' },
-  { label: 'Staging', value: 'staging' },
-  { label: 'Production', value: 'production' },
-  { disabled: true, label: 'Archived', value: 'archived' },
-] as const
-
-const selectCss = css({
-  width: '16rem',
-})
-
-const stackCss = css({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: theme.space.sm,
-  width: '100%',
-})
-
-const labelCss = css({
-  margin: 0,
-  fontSize: theme.fontSize.xs,
-  fontWeight: theme.fontWeight.semibold,
-  color: theme.colors.text.primary,
-})
-
-const valueCss = css({
-  margin: 0,
-  fontFamily: theme.fontFamily.mono,
-  fontSize: theme.fontSize.xs,
-  color: theme.colors.text.secondary,
-})

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

@@ -1,52 +0,0 @@
-import { css } from '@remix-run/ui'
-import { Option, Select } from '@remix-run/ui/select'
-import { theme } from '@remix-run/ui/theme'
-
-/**
- * @name Select Overview
- * @description A styled select control with a searchable dropdown and accessible label.
- * @layout center
- */
-export default function Example() {
-  return () => (
-    <div mix={stackCss}>
-      <label for="fruit-select" mix={labelCss}>
-        Choose a fruit
-      </label>
-      <Select
-        id="fruit-select"
-        defaultLabel="Banana"
-        defaultValue="banana"
-        name="fruit"
-        mix={selectCss}
-      >
-        <Option label="Apple" value="apple" />
-        <Option label="Apricot" value="apricot" />
-        <Option label="Banana" value="banana" />
-        <Option label="Blackberry" value="blackberry" />
-        <Option label="Blackcurrant" value="blackcurrant" />
-        <Option label="Blueberry" value="blueberry" />
-        <Option label="Boysenberry" value="boysenberry" />
-        <Option label="Cantaloupe" value="cantaloupe" />
-      </Select>
-    </div>
-  )
-}
-
-const selectCss = css({
-  width: '16rem',
-})
-
-const stackCss = css({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: theme.space.sm,
-  width: '100%',
-})
-
-const labelCss = css({
-  margin: 0,
-  fontSize: theme.fontSize.xs,
-  fontWeight: theme.fontWeight.semibold,
-  color: theme.colors.text.primary,
-})

package/src/components/separator/separator.ts

@@ -1,19 +0,0 @@
-import { css, type CSSMixinDescriptor } from '@remix-run/ui'
-
-import { theme } from '../../theme/theme.ts'
-
-const itemInset = `var(--rmx-ui-item-inset, ${theme.space.sm})`
-const itemIndicatorHalfInset =
-  'calc((var(--rmx-ui-item-indicator-width, 0px) + var(--rmx-ui-item-indicator-gap, 0px)) / 2)'
-
-const separatorCss: CSSMixinDescriptor = css({
-  flexShrink: 0,
-  margin: 0,
-  marginBlock: theme.space.xs,
-  marginInlineStart: `calc(${itemInset} + ${itemIndicatorHalfInset})`,
-  marginInlineEnd: itemInset,
-  border: 0,
-  borderTop: `1px solid ${theme.colors.border.subtle}`,
-})
-
-export const separatorStyle = separatorCss

package/src/components/tabs/README.md

@@ -1,105 +0,0 @@
-# Tabs
-
-`tabs` is a primitive for building accessible tabs with automatic activation and simple default styling.
-
-Use it when you need a tablist, tab triggers, and tab panels. `tabs.listStyle` and `tabs.triggerStyle` style the tab row and triggers, but panel presentation stays app-owned.
-
-## Usage
-
-```tsx
-import { css, type Handle } from 'remix/ui'
-import { Tab, Tabs, TabsList, TabsPanel } from 'remix/ui/tabs'
-
-let panel = css({
-  padding: '16px',
-  border: '1px solid #d6d6d6',
-  borderRadius: '16px',
-})
-
-export function ProjectTabs(_handle: Handle) {
-  return () => (
-    <Tabs defaultValue="overview">
-      <TabsList aria-label="Project sections">
-        <Tab value="overview">Overview</Tab>
-        <Tab value="analytics">Analytics</Tab>
-        <Tab value="reports">Reports</Tab>
-        <Tab value="settings">Settings</Tab>
-      </TabsList>
-
-      <TabsPanel mix={panel} value="overview">
-        View your key metrics and recent project activity.
-      </TabsPanel>
-      <TabsPanel mix={panel} value="analytics">
-        Track trends and compare performance over time.
-      </TabsPanel>
-      <TabsPanel mix={panel} value="reports">
-        Export and review your latest reports.
-      </TabsPanel>
-      <TabsPanel mix={panel} value="settings">
-        Manage project preferences and defaults.
-      </TabsPanel>
-    </Tabs>
-  )
-}
-```
-
-## `tabs.*`
-
-### `tabs.Context`
-
-Provides the shared coordinator for one tabs instance.
-
-- Owns the selected tab value for uncontrolled usage.
-- Accepts controlled `value` plus `onValueChange` when the app owns selection state.
-- Accepts `orientation="vertical"` when the tablist should use `ArrowUp` and `ArrowDown`.
-
-### `tabs.list()`
-
-Turns the host into the tablist.
-
-- Wires `role="tablist"`.
-- Adds `aria-orientation="vertical"` when needed.
-
-### `tabs.trigger({ value, disabled })`
-
-Registers one tab trigger.
-
-- Wires `role="tab"`, `aria-selected`, `aria-controls`, and roving `tabIndex`.
-- Selects on press.
-- Supports `ArrowLeft` and `ArrowRight` for horizontal lists.
-- Supports `ArrowUp` and `ArrowDown` for vertical lists.
-- Supports `Home` and `End`.
-
-### `tabs.panel({ value })`
-
-Turns the host into the panel for one tab value.
-
-- Wires `role="tabpanel"` and `aria-labelledby`.
-- Hides inactive panels with `hidden`.
-
-### `onTabsChange(...)`
-
-The listener mixin for bubbled tab selection changes.
-
-- `event.value` is the newly selected tab value.
-- `event.previousValue` is the previously selected value, or `null`.
-
-## Convenience Components
-
-- `Tabs` is a thin wrapper around `tabs.Context`.
-- `TabsList` applies `tabs.list()` with `tabs.listStyle`.
-- `Tab` applies `tabs.trigger(...)` with `button.baseStyle` and `tabs.triggerStyle`.
-- `TabsPanel` applies `tabs.panel(...)` without adding panel styling.
-
-## Behavior Notes
-
-- When you do not provide `defaultValue` or controlled `value`, the first enabled tab becomes selected automatically.
-- Arrow-key navigation wraps and skips disabled tabs.
-- Selection follows focus during arrow-key navigation.
-- The default panel contract is behavioral only. Apps own spacing, borders, backgrounds, and layout for tab panels.
-
-## When To Use Something Else
-
-- Use `accordion` when sections should expand and collapse independently instead of switching a single active panel.
-- Use `select` or `listbox` when the control chooses a form value instead of changing visible page sections.
-- Use `menu` for action lists and command surfaces.