@remix-run/ui 0.2.0 → 0.4.0

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

@@ -1,18 +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 } 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
@@ -26,57 +23,10 @@ export interface PopoverProps {
 }
 
 interface AnchorRef {
-  node: HTMLElement
+  target: AnchorTarget
   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,
@@ -108,11 +58,15 @@ const anchorMixin: MixinFactory<HTMLElement, [options: AnchorOptions], ElementPr
   let context = handle.context.get(PopoverProvider)
   return (options) => {
     handle.queueTask((node) => {
-      context.anchor = { node, options }
+      context.anchor = { target: node, options }
     })
   }
 })
 
+function anchorContains(anchor: AnchorRef | null, target: Node) {
+  return anchor?.target instanceof HTMLElement && anchor.target.contains(target)
+}
+
 const surfaceMixin: MixinFactory<HTMLElement, [options: PopoverSurfaceOptions], ElementProps> =
   createMixin<HTMLElement, [options: PopoverSurfaceOptions]>((handle) => {
     let openProp = false
@@ -147,11 +101,12 @@ const surfaceMixin: MixinFactory<HTMLElement, [options: PopoverSurfaceOptions],
 
         on('beforetoggle', (event) => {
           if (event.newState === 'open') {
-            cleanupAnchor = positionAnchor(
-              event.currentTarget,
-              context.anchor!.node,
-              context.anchor!.options,
-            )
+            let anchor = context.anchor
+            if (!anchor) {
+              throw new Error('popover.surface() requires a registered anchor before opening')
+            }
+
+            cleanupAnchor = positionAnchor(event.currentTarget, anchor.target, anchor.options)
             unlockScroll = lockScroll()
           } else if (event.newState === 'closed') {
             cleanupAnchor()
@@ -180,7 +135,7 @@ const surfaceMixin: MixinFactory<HTMLElement, [options: PopoverSurfaceOptions],
             options.onHide({ reason: 'outside-click', target })
           },
           (target) =>
-            options.closeOnAnchorClick === false && !!context.anchor?.node.contains(target),
+            options.closeOnAnchorClick === false && anchorContains(context.anchor, target),
           options.stopOutsideClickPropagation ?? true,
         ),
       ]

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/client-entries.ts

@@ -47,7 +47,7 @@ export type EntryMetadata = {
  */
 export type EntryComponent<props extends SerializableProps = {}, context = NoContext> = ((
   handle: Handle<props, context>,
-) => RenderFn<props>) &
+) => RenderFn) &
   EntryMetadata
 
 /**
@@ -86,10 +86,6 @@ export function clientEntry<props extends SerializableProps = {}, context = NoCo
   entryId: string,
   component: (handle: Handle<props, context>) => RenderFn,
 ): EntryComponent<props, context>
-export function clientEntry<props extends SerializableProps = {}, context = NoContext>(
-  entryId: string,
-  component: (handle: Handle<Record<string, never>, context>) => RenderFn<props>,
-): EntryComponent<props, context>
 
 // Implementation
 export function clientEntry(entryId: string, component: any): any {

package/src/runtime/component.ts

@@ -179,9 +179,9 @@ export type ComponentFn<Props = Record<string, never>, ContextValue = NoContext>
 ) => RenderFn
 
 /**
- * Render function returned by a component factory.
+ * Zero-argument render function returned by a component factory.
  */
-export type RenderFn<Props = ElementProps> = (props: Props) => RemixNode
+export type RenderFn = () => RemixNode
 
 export type { RemixNode } from './jsx.ts'
 
@@ -287,7 +287,7 @@ class ComponentRuntime<C = NoContext> implements ComponentHandle<C> {
       this.#renderFn = renderFn
     }
 
-    return [renderFn(this.#props), this.#dequeueTasks()]
+    return [renderFn(), this.#dequeueTasks()]
   }
 
   remove = (): Array<() => void> => {