@remix-run/ui 0.3.0 → 0.4.0

package/src/{components/popover/popover.ts → popover/index.ts}

@@ -1,22 +1,15 @@
 import {
   attrs,
   createMixin,
-  css,
   on,
-  type CSSMixinDescriptor,
   type ElementProps,
   type Handle,
   type MixinFactory,
   type RemixNode,
 } from '@remix-run/ui'
-import {
-  anchor as positionAnchor,
-  type AnchorOptions,
-  type AnchorTarget,
-} from '../anchor/anchor.ts'
-import { onOutsideClick } from '../../interactions/outside-click/outside-click-mixin.ts'
-import { theme } from '../../theme/theme.ts'
-import { lockScroll } from '../../utils/scroll-lock.ts'
+import { anchor as positionAnchor, type AnchorOptions, type AnchorTarget } from '../anchor/index.ts'
+import { onOutsideClick } from './outside-click.ts'
+import { lockScroll } from './scroll-lock.ts'
 
 export interface PopoverContext {
   hideFocusTarget: HTMLElement | null
@@ -34,53 +27,6 @@ interface AnchorRef {
   options: AnchorOptions
 }
 
-const popupViewportClampMaxHeight = '50dvh'
-
-const popoverSurfaceTransitionCss: CSSMixinDescriptor = css({
-  opacity: 0,
-  '&:popover-open': {
-    opacity: 1,
-  },
-  '&:not(:popover-open)': {
-    pointerEvents: 'none',
-    transition: 'opacity 180ms ease-in, overlay 180ms ease-in, display 180ms ease-in',
-    transitionBehavior: 'allow-discrete',
-  },
-})
-
-const popoverContentCss: CSSMixinDescriptor = css({
-  flex: '1 1 auto',
-  minHeight: 0,
-  padding: theme.space.xs,
-  overflow: 'auto',
-  overscrollBehavior: 'contain',
-})
-
-const popoverSurfaceCss: CSSMixinDescriptor = css({
-  position: 'fixed',
-  inset: 'auto',
-  margin: 0,
-  padding: theme.space.none,
-  display: 'flex',
-  flexDirection: 'column',
-  minHeight: 0,
-  minWidth: '12rem',
-  maxWidth: `min(24rem, calc(100vw - (${theme.space.lg} * 2)))`,
-  maxHeight: popupViewportClampMaxHeight,
-  border: `1px solid ${theme.colors.border.subtle}`,
-  borderRadius: theme.radius.lg,
-  backgroundColor: theme.surface.lvl0,
-  color: theme.colors.text.primary,
-  overflow: 'hidden',
-  boxShadow: `${theme.shadow.xs}, ${theme.shadow.md}`,
-  '&::backdrop': {
-    background: 'transparent',
-  },
-})
-
-export const contentStyle = popoverContentCss
-export const surfaceStyle = [popoverSurfaceCss, popoverSurfaceTransitionCss] as const
-
 function PopoverProvider(handle: Handle<PopoverProps, PopoverContext>): () => RemixNode {
   handle.context.set({
     hideFocusTarget: null,

package/src/{utils → popover}/scroll-lock.ts

@@ -1,5 +1,3 @@
-import { createMixin, on, type ElementProps, type MixinFactory } from '@remix-run/ui'
-
 type ScrollLockState = {
   count: number
   documentOverflow: string
@@ -73,29 +71,3 @@ export function lockScroll(targetDocument: Document | undefined = globalThis.doc
     view.scrollTo(currentState.scrollX, currentState.scrollY)
   }
 }
-
-export const lockScrollOnToggle: MixinFactory<HTMLElement, [], ElementProps> = createMixin<
-  HTMLElement,
-  [],
-  ElementProps
->((handle) => {
-  let unlockScroll = () => {}
-
-  handle.signal.addEventListener('abort', () => {
-    unlockScroll()
-    unlockScroll = () => {}
-  })
-
-  return () => [
-    on('beforetoggle', (event) => {
-      unlockScroll()
-      unlockScroll = () => {}
-
-      if (event.newState !== 'open') {
-        return
-      }
-
-      unlockScroll = lockScroll((event.currentTarget as HTMLElement).ownerDocument)
-    }),
-  ]
-})

package/src/radio/README.md

@@ -0,0 +1,53 @@
+# radio
+
+`radio` is a style mixin for native radio inputs. It only owns radio visuals and the default `type="radio"` behavior for native `<input>` hosts.
+
+## Primitive Usage
+
+```tsx
+import radio from 'remix/ui/radio'
+
+function ShippingSpeed() {
+  return () => (
+    <fieldset>
+      <label>
+        <input defaultChecked mix={radio()} name="shipping-speed" value="standard" />
+        Standard
+      </label>
+      <label>
+        <input mix={radio({ size: 'lg' })} name="shipping-speed" value="express" />
+        Express
+      </label>
+    </fieldset>
+  )
+}
+```
+
+Compose app-owned styles around the primitive when a radio option needs local layout:
+
+```tsx
+import radio from 'remix/ui/radio'
+import { optionStyle } from './shipping.styles'
+
+function ShippingOption() {
+  return () => (
+    <label mix={optionStyle}>
+      <input mix={radio()} name="shipping-speed" value="overnight" />
+      Overnight
+    </label>
+  )
+}
+```
+
+## `remix/ui/radio`
+
+- `radio(options)`: style mixin for native radio inputs or radio-like hosts.
+- `RadioOptions`: accepts `size`.
+- `RadioSize`: `'md'` or `'lg'`. Defaults to `'md'`.
+
+## Behavior Notes
+
+- `radio()` returns a mixin descriptor, so it composes with other mixins in the host element's `mix` prop.
+- Native `<input>` hosts receive `type="radio"` unless an explicit `type` is provided.
+- Radio state is native browser behavior. The mixin also styles `aria-checked="true"` and `data-state="checked"` for custom hosts.
+- Disabled hosts use the shared disabled treatment through `disabled` or `aria-disabled="true"`.

package/src/radio/index.ts

@@ -0,0 +1,100 @@
+import { createMixin, css } from '@remix-run/ui'
+import type { CSSMixinDescriptor, ElementProps, MixinDescriptor } from '@remix-run/ui'
+import { renderMixinElement } from '../runtime/mixins/mixin.ts'
+import { controlFocusShadow } from '../shared/focus-styles.ts'
+
+export type RadioSize = 'md' | 'lg'
+
+export interface RadioOptions {
+  size?: RadioSize
+}
+
+type RadioMixin = readonly [
+  MixinDescriptor<Element, [], ElementProps>,
+  CSSMixinDescriptor,
+  CSSMixinDescriptor,
+]
+
+const checkedSelector = '&:checked, &[aria-checked="true"], &[data-state="checked"]'
+const checkedMarkSelector =
+  '&:checked::before, &[aria-checked="true"]::before, &[data-state="checked"]::before'
+
+const radioDefaultAttrs = createMixin<Element, [], ElementProps>((handle, hostType) => (props) => {
+  if (hostType !== 'input' || props.type !== undefined) {
+    return handle.element
+  }
+
+  return renderMixinElement(handle.element, {
+    ...props,
+    type: 'radio',
+  })
+})()
+
+const baseStyle: CSSMixinDescriptor = css({
+  appearance: 'none',
+  WebkitAppearance: 'none',
+  margin: 0,
+  boxSizing: 'border-box',
+  position: 'relative',
+  display: 'inline-grid',
+  placeItems: 'center',
+  width: 'var(--rmx-radio-size)',
+  height: 'var(--rmx-radio-size)',
+  minWidth: 'var(--rmx-radio-size)',
+  minHeight: 'var(--rmx-radio-size)',
+  padding: 0,
+  border: '1px solid rgba(0, 0, 0, 0.12)',
+  borderRadius: '9999px',
+  background: '#FFFFFF',
+  boxShadow: 'inset 0 1px 1px rgba(0, 0, 0, 0.06), inset 0 2px 2px rgba(0, 0, 0, 0.06)',
+  verticalAlign: 'middle',
+  flex: 'none',
+  '&::before': {
+    content: '""',
+    width: 'var(--rmx-radio-mark-size)',
+    height: 'var(--rmx-radio-mark-size)',
+    borderRadius: '99px',
+    background:
+      'linear-gradient(180deg, rgba(53, 115, 246, 0) 25%, rgba(53, 115, 246, 0.15) 100%), #FFFFFF',
+    boxShadow:
+      '0 1px 1px -0.5px #0944BE, 0 2px 2px -1px #0944BE, 0 4px 4px -2px #0944BE, 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 0 2px 1px #FFFFFF',
+    opacity: 0,
+    pointerEvents: 'none',
+  },
+  '&:disabled, &[aria-disabled="true"]': {
+    opacity: 0.55,
+  },
+  [checkedSelector]: {
+    border: 0,
+    borderRadius: '99px',
+    background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 75.48%), #3573F6',
+    backgroundBlendMode: 'overlay, normal',
+    boxShadow:
+      '0 1px 0 rgba(255, 255, 255, 0.6), 0 0 16px rgba(53, 115, 246, 0.25), inset 0 0 3px 1px rgba(0, 0, 0, 0.1)',
+  },
+  [checkedMarkSelector]: {
+    opacity: 1,
+  },
+  '&:focus-visible': {
+    outline: 0,
+    boxShadow: controlFocusShadow,
+  },
+})
+
+const sizeStyles = {
+  md: css({
+    '--rmx-radio-size': '16px',
+    '--rmx-radio-mark-size': '8px',
+  }),
+  lg: css({
+    '--rmx-radio-size': '20px',
+    '--rmx-radio-mark-size': '10px',
+  }),
+} as const satisfies Record<RadioSize, CSSMixinDescriptor>
+
+export function radio(options: RadioOptions = {}): RadioMixin {
+  let { size = 'md' } = options
+  return [radioDefaultAttrs, baseStyle, sizeStyles[size]]
+}
+
+export default radio

package/src/runtime/demos/readme.demo.tsx

@@ -196,12 +196,14 @@ function SlugForm(handle: Handle) {
 function KeyboardTracker(handle: Handle) {
   let keys: string[] = []
 
-  addEventListeners(document, handle.signal, {
-    keydown: (event) => {
-      keys.push(event.key)
-      if (keys.length > 10) keys.shift()
-      handle.update()
-    },
+  handle.queueTask(() => {
+    addEventListeners(document, handle.signal, {
+      keydown: (event) => {
+        keys.push(event.key)
+        if (keys.length > 10) keys.shift()
+        handle.update()
+      },
+    })
   })
 
   return () => <div>Keys: {keys.join(', ') || '(press some keys)'}</div>
@@ -457,14 +459,14 @@ function FormWithScroll(handle: Handle) {
 // handle.signal - Clock
 // ============================================================================
 function Clock(handle: Handle) {
-  let interval = setInterval(() => {
-    // clear the interval when the component is disconnected
-    if (handle.signal.aborted) {
-      clearInterval(interval)
-      return
-    }
-    handle.update()
-  }, 1000)
+  handle.queueTask(() => {
+    let interval = setInterval(() => {
+      handle.update()
+    }, 1000)
+
+    handle.signal.addEventListener('abort', () => clearInterval(interval), { once: true })
+  })
+
   return () => <span>{new Date().toLocaleTimeString()}</span>
 }
 

package/src/runtime/reconcile.ts

@@ -340,6 +340,10 @@ function enqueueMixinBindingUpdate(
       let prevProps = getHostProps(node)
       let nextProps = resolveNodeMixProps(node, this.frame, this.scheduler, state)
       patchHostProps(prevProps, nextProps, this.node)
+      if (node._controlledState || shouldTrackControlledReflection(nextProps)) {
+        ensureControlledReflection(node, this.scheduler)
+        syncControlledReflection(node, nextProps)
+      }
 
       dispatchMixinCommit(state)
       done(state ? getMixinRuntimeSignal(state) : AbortSignal.abort())
@@ -700,10 +704,12 @@ function insert(
     cursor = null
   }
 
-  cursor =
-    node.type === Frame
-      ? skipCommentsExceptFrameStart(cursor ?? null)
-      : skipComments(cursor ?? null)
+  // Preserve frame-start markers for non-Frame nodes too, so a following <Frame>
+  // (e.g. the first child of a bare Fragment at a clientEntry boundary) can still
+  // claim its rmx:f marker during hydration instead of being re-inserted fresh.
+  // A rmx:f marker always belongs to a <Frame>, so no non-Frame node should
+  // consume one.
+  cursor = skipCommentsExceptFrameStart(cursor ?? null)
 
   // Also check after skipComments in case we skipped past the anchor
   if (cursor && anchor && cursor === anchor) {
@@ -1097,7 +1103,7 @@ function resolveClientFrame(node: VNode, runtime: FrameRuntime): void {
   let resolveController = new AbortController()
   node._frameResolveController = resolveController
 
-  Promise.resolve(runtime.resolveFrame(frameSrc, resolveController.signal))
+  Promise.resolve(runtime.resolveFrame(frameSrc, resolveController.signal, getFrameName(node)))
     .then(async (content) => {
       if (node._frameResolveToken !== token || resolveController.signal.aborted) return
       node._frameFallbackRoot?.dispose()

package/src/runtime/vdom.ts

@@ -172,6 +172,9 @@ export function createRangeRoot(
 export function createRoot(container: HTMLElement, options: VirtualRootOptions = {}): VirtualRoot {
   let vroot: VNode | null = null
   let styles = options.styleManager ?? defaultStyleManager
+  if (container.innerHTML.trim() !== '') {
+    styles.replaceServerStyles(container)
+  }
   let hydrationCursor = container.innerHTML.trim() !== '' ? container.firstChild : undefined
 
   let eventTarget = new TypedEventTarget<VirtualRootEventMap>()

package/src/{components/select → select}/README.md

@@ -2,10 +2,11 @@
 
 `Select` is a button-triggered popup value picker backed by `listbox` and `popover`. Use it when the user should choose one stable string value from a finite set.
 
-## Usage
+## Component Usage
 
 ```tsx
-import { Option, Select, onSelectChange } from 'remix/ui/select'
+import { Option, Select } from 'remix/ui/select'
+import { onSelectChange } from 'remix/ui/select/primitives'
 
 export function FrameworkSelect() {
   return (
@@ -44,34 +45,34 @@ Use `textValue` when closed-trigger typeahead should match a different string fr
 </Select>
 ```
 
+## Primitive Usage
+
 Use the lower-level primitives when the trigger or popup structure needs to be owned by another component. Keep the same provider, trigger, popover, list, option, and hidden-input relationship.
 
 ```tsx
 import type { Handle } from 'remix/ui'
-import * as button from 'remix/ui/button'
-import * as listbox from 'remix/ui/listbox'
 import * as popover from 'remix/ui/popover'
-import * as select from 'remix/ui/select'
+import { triggerStyle } from 'remix/ui/select'
+import * as select from 'remix/ui/select/primitives'
+import { listStyle, optionStyle, surfaceStyle } from './select.styles'
 
 function SelectValue(handle: Handle) {
   let context = handle.context.get(select.Context)
 
-  return () => <span mix={button.labelStyle}>{context.displayedLabel}</span>
+  return () => <span>{context.displayedLabel}</span>
 }
 
 function IssueTypeSelect() {
   return () => (
-    <select.Context defaultLabel="Select a type" name="issueType">
-      <button type="button" mix={[button.baseStyle, select.triggerStyle, select.trigger()]}>
+    <select.Context defaultLabel="Select a type" labelSwapDelayMs={100} name="issueType">
+      <button type="button" mix={[triggerStyle, select.trigger()]}>
         <SelectValue />
       </button>
       <popover.Context>
-        <div mix={[popover.surfaceStyle, select.popover()]}>
-          <div mix={[popover.contentStyle, listbox.listStyle, select.list()]}>
-            <div mix={[listbox.optionStyle, select.option({ label: 'Bug', value: 'bug' })]}>
-              Bug
-            </div>
-            <div mix={[listbox.optionStyle, select.option({ label: 'Feature', value: 'feature' })]}>
+        <div mix={[surfaceStyle, select.popover()]}>
+          <div mix={[listStyle, select.list()]}>
+            <div mix={[optionStyle, select.option({ label: 'Bug', value: 'bug' })]}>Bug</div>
+            <div mix={[optionStyle, select.option({ label: 'Feature', value: 'feature' })]}>
               Feature
             </div>
           </div>
@@ -83,15 +84,24 @@ function IssueTypeSelect() {
 }
 ```
 
-## `select.*`
+## `remix/ui/select`
 
 - `Select`: composed trigger, popover, listbox, option list, and optional hidden input for form participation. Accepts `defaultLabel`, `defaultValue`, `disabled`, `name`, and button props.
-- `Option`: option wrapper that renders the standard check glyph and label slot. Accepts `label`, `value`, optional `disabled`, and optional `textValue`.
+- `Option`: option component that renders the standard check indicator and label slot. Accepts `label`, `value`, optional `disabled`, and optional `textValue`.
+- `triggerStyle`: standard select trigger style for custom trigger composition.
+- `SelectProps` and `SelectOptionProps`: public TypeScript props for the composed APIs.
+
+## `remix/ui/select/primitives`
+
+- `Context`: lower-level provider for custom composition. Accepts `defaultLabel`, `defaultValue`, `disabled`, `name`, and primitive-only `labelSwapDelayMs`; the label-swap delay defaults to `75` milliseconds.
+- `trigger()`: wires the trigger button, open behavior, closed-trigger typeahead, and trigger ARIA attributes.
+- `popover()`: wires the popover surface and keeps its min-width synced to the trigger before open.
+- `list()`: wires the listbox root used inside the popover.
+- `option(...)`: registers one selectable option. Accepts `label`, `value`, optional `disabled`, and optional `textValue`.
+- `hiddenInput()`: mirrors the selected value into a hidden input for form participation.
 - `onSelectChange(...)`: event mixin for the bubbling `SelectChangeEvent`.
-- `Context`, `trigger()`, `popover()`, `list()`, `option(...)`, and `hiddenInput()`: lower-level composition primitives.
-- `triggerStyle`: standard select trigger style.
 - `SelectChangeEvent`: event with `value`, `label`, and `optionId`.
-- `SelectProps`, `SelectContextProps`, and `SelectOptionProps`: public TypeScript props for the composed and lower-level APIs.
+- `SelectContextProps`, `SelectProps`, and `SelectOptionProps`: primitive prop types for custom composition.
 
 ## Behavior Notes
 

package/src/select/index.tsx

@@ -0,0 +1,159 @@
+import { createElement, css } from '@remix-run/ui'
+import type { CSSMixinDescriptor, Handle, Props, RemixNode } from '@remix-run/ui'
+
+import * as popover from '@remix-run/ui/popover'
+import * as select from '@remix-run/ui/select/primitives'
+import type { SearchValue } from '../shared/typeahead.ts'
+import { CheckIcon, ChevronVerticalIcon } from '../shared/icons.tsx'
+import {
+  listboxIndicatorStyle,
+  listboxLabelStyle,
+  listboxListStyle,
+  listboxOptionStyle,
+  popoverSurfaceStyle,
+} from '../shared/listbox-popover-styles.ts'
+
+export interface SelectProps extends Omit<Props<'button'>, 'children' | 'name'> {
+  children?: RemixNode
+  defaultLabel: string
+  defaultValue?: string | null
+  disabled?: boolean
+  name?: string
+}
+
+export type SelectOptionProps = Props<'div'> & {
+  children?: RemixNode
+  disabled?: boolean
+  label: string
+  textValue?: SearchValue
+  value: string
+}
+
+const selectTriggerShadow =
+  '0 2px 3px -1px rgba(0, 0, 0, 0.04), 0 3px 4px -1.5px rgba(0, 0, 0, 0.04), 0 4px 5px -2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.12)'
+
+const selectTriggerFocusShadow =
+  '0 2px 3px -1px rgba(0, 0, 0, 0.04), 0 3px 4px -1.5px rgba(0, 0, 0, 0.04), 0 4px 5px -2px rgba(0, 0, 0, 0.04), 0 0 0 1px #3573F6, 0 0 0 4px rgba(53, 115, 246, 0.1), 0 6px 32px 4px rgba(53, 115, 246, 0.08), inset 0 0 8px 1px rgba(53, 115, 246, 0.05)'
+
+const selectTriggerCss: CSSMixinDescriptor = css({
+  appearance: 'none',
+  margin: 0,
+  boxSizing: 'border-box',
+  width: '100%',
+  minWidth: 0,
+  height: '32px',
+  paddingBlock: '6px',
+  paddingInlineStart: '12px',
+  paddingInlineEnd: '8px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'flex-start',
+  gap: '6px',
+  border: 0,
+  borderRadius: '8px',
+  background: '#FFFFFF',
+  boxShadow: selectTriggerShadow,
+  color: '#101010',
+  fontFamily: '"Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif',
+  fontStyle: 'normal',
+  fontWeight: 400,
+  fontSize: '13px',
+  lineHeight: '20px',
+  fontFeatureSettings: '"ss01" on, "cv01" on',
+  letterSpacing: 0,
+  textAlign: 'left',
+  textShadow: '0 1px 0 #FFFFFF',
+  whiteSpace: 'nowrap',
+  '&:hover, &:focus-visible, &[aria-expanded="true"], &[aria-expanded="true"]:hover, &[aria-expanded="true"]:focus-visible':
+    {
+      background: '#FFFFFF',
+      color: '#101010',
+    },
+  '&:active': {
+    background: '#FFFFFF',
+  },
+  '&:focus-visible': {
+    outline: 0,
+    boxShadow: selectTriggerFocusShadow,
+  },
+  '&[aria-expanded="true"]': {
+    boxShadow: selectTriggerFocusShadow,
+  },
+  '&:disabled': {
+    opacity: 0.55,
+  },
+})
+
+const triggerLabelCss: CSSMixinDescriptor = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  flex: '1 1 auto',
+  minWidth: 0,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+})
+
+const triggerIconCss: CSSMixinDescriptor = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '16px',
+  height: '16px',
+  color: '#707070',
+  flex: 'none',
+  '& > svg': {
+    display: 'block',
+    width: '100%',
+    height: '100%',
+  },
+})
+
+export const triggerStyle = selectTriggerCss
+
+function SelectLabel(handle: Handle): () => RemixNode {
+  let context = handle.context.get(select.Context)
+
+  return () => <span mix={triggerLabelCss}>{context.displayedLabel}</span>
+}
+
+export function Select(handle: Handle<SelectProps>): () => RemixNode {
+  return () => {
+    let { children, defaultLabel, defaultValue, disabled, name, mix, ...buttonProps } = handle.props
+
+    return (
+      <select.Context
+        defaultLabel={defaultLabel}
+        defaultValue={defaultValue}
+        disabled={disabled}
+        name={name}
+      >
+        <button type="button" {...buttonProps} mix={[triggerStyle, select.trigger(), mix]}>
+          <SelectLabel />
+          <ChevronVerticalIcon mix={triggerIconCss} />
+        </button>
+        <popover.Context>
+          <div mix={[popoverSurfaceStyle, select.popover()]}>
+            <div mix={[listboxListStyle, select.list()]}>{children}</div>
+          </div>
+        </popover.Context>
+        {name && <input mix={select.hiddenInput()} />}
+      </select.Context>
+    )
+  }
+}
+
+export function Option(handle: Handle<SelectOptionProps>): () => RemixNode {
+  return () => {
+    let { label, value, disabled, textValue, children, mix, ...divProps } = handle.props
+
+    return (
+      <div
+        {...divProps}
+        mix={[listboxOptionStyle, select.option({ value, label, disabled, textValue }), mix]}
+      >
+        <CheckIcon mix={listboxIndicatorStyle} />
+        <span mix={listboxLabelStyle}>{children ?? label}</span>
+      </div>
+    )
+  }
+}