@remix-run/ui 0.1.2 → 0.3.0

package/src/components/accordion/accordion.tsx

@@ -230,7 +230,7 @@ function isMultipleProps(props: AccordionProps | null): props is AccordionMultip
   return props?.type === 'multiple'
 }
 
-function AccordionImpl(handle: Handle<AccordionProps, AccordionContext>) {
+function AccordionImpl(handle: Handle<AccordionProps, AccordionContext>): () => RemixNode {
   let rootNode: HTMLElement | null = null
   let registeredItems: RegisteredItem[] = []
   let uncontrolledSingleValue: string | null = null
@@ -418,13 +418,15 @@ function AccordionImpl(handle: Handle<AccordionProps, AccordionContext>) {
 export function onAccordionChange<target extends HTMLElement>(
   handler: AccordionChangeHandler<target>,
   captureBoolean?: boolean,
-) {
+): ReturnType<typeof on<target, typeof ACCORDION_CHANGE_EVENT>> {
   return on(ACCORDION_CHANGE_EVENT, handler, captureBoolean)
 }
 
 export const Accordion = AccordionImpl
 
-export function AccordionItem(handle: Handle<AccordionItemProps, AccordionItemContext>) {
+export function AccordionItem(
+  handle: Handle<AccordionItemProps, AccordionItemContext>,
+): () => RemixNode {
   let triggerNode: HTMLButtonElement | null = null
   let triggerId = `${handle.id}-trigger`
   let panelId = `${handle.id}-panel`
@@ -468,7 +470,7 @@ export function AccordionItem(handle: Handle<AccordionItemProps, AccordionItemCo
   }
 }
 
-export function AccordionTrigger(handle: Handle<AccordionTriggerProps>) {
+export function AccordionTrigger(handle: Handle<AccordionTriggerProps>): () => RemixNode {
   return () => {
     let accordion = handle.context.get(Accordion)
     let item = handle.context.get(AccordionItem)
@@ -539,7 +541,7 @@ export function AccordionTrigger(handle: Handle<AccordionTriggerProps>) {
   }
 }
 
-export function AccordionContent(handle: Handle<AccordionContentProps>) {
+export function AccordionContent(handle: Handle<AccordionContentProps>): () => RemixNode {
   return () => {
     let item = handle.context.get(AccordionItem)
     let { children, mix, ...panelProps } = handle.props

package/src/components/accordion/demos/card.demo.tsx

@@ -10,6 +10,7 @@ import { theme } from '@remix-run/ui/theme'
 /**
  * @name Accordion in a Card
  * @description The Accordion can sit inside a card when the surrounding surface needs stronger grouping.
+ * @layout center
  * @order 3
  */
 export default function Example() {

package/src/components/accordion/demos/multiple.demo.tsx

@@ -11,6 +11,7 @@ import { theme } from '@remix-run/ui/theme'
  * @order 2
  * @name Accordion Multiple Open
  * @description Multiple mode allows several sections to stay open simultaneously, useful for operational checklists and dashboards.
+ * @layout center
  */
 export default function Example() {
   return () => (

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

@@ -10,6 +10,7 @@ import { theme } from '@remix-run/ui/theme'
 /**
  * @name Accordion Overview
  * @description A single-open disclosure list that keeps settings, billing, or notification rules in one calm section.
+ * @layout center
  * @order 1
  */
 export default function Example() {

package/src/components/anchor/README.md

@@ -1,6 +1,6 @@
 # anchor
 
-`anchor` positions a floating element against an anchor element and keeps it constrained to the viewport. Use it for custom floating surfaces that need placement, flipping, offsets, and optional relative alignment.
+`anchor` positions a floating element against an anchor element or viewport coordinates and keeps it constrained to the viewport. Use it for custom floating surfaces that need placement, flipping, offsets, and optional relative alignment.
 
 ## Usage
 
@@ -49,11 +49,19 @@ popover.addEventListener('beforetoggle', (event) => {
 })
 ```
 
+Anchor to coordinates when the surface should open at a pointer location.
+
+```tsx
+let cleanup = anchor(popover, { x: event.clientX, y: event.clientY }, { placement: 'bottom-start' })
+```
+
 ## `anchor.*`
 
-- `anchor(floatingElement, anchorElement, options)`: positions `floatingElement` against `anchorElement`, starts animation-frame polling for geometry changes, and returns a cleanup function.
+- `anchor(floatingElement, anchorTarget, options)`: positions `floatingElement` against an element or coordinate target, starts animation-frame polling for geometry changes, and returns a cleanup function.
 - `AnchorOptions`: placement, inset, relative alignment, and offset options.
+- `AnchorPoint`: viewport coordinate target with `x`, `y`, and optional `width`/`height`.
 - `AnchorPlacement`: exported placement names for the main sides and top/bottom start/end alignment.
+- `AnchorTarget`: an `HTMLElement` or `AnchorPoint`.
 
 ## Placements
 
@@ -149,5 +157,5 @@ anchor(listbox, trigger, {
 - Oversized inset surfaces with `relativeTo` preserve alignment by scrolling the nearest scrollable descendant when possible.
 - `offset`, `offsetX`, and `offsetY` may be numbers or functions that receive the floating element.
 - `relativeTo` lets a surface align to an inner element, which is useful for selected options inside popovers.
-- `anchor` polls on animation frames for anchor or floating geometry changes and repositions when either changes.
+- `anchor` polls on animation frames for anchor target or floating geometry changes and repositions when either changes.
 - The returned cleanup function cancels animation-frame polling.

package/src/components/anchor/anchor.ts

@@ -24,6 +24,15 @@ export type AnchorPlacement =
 
 type AnchorOffsetValue = number | ((floating: HTMLElement) => number)
 
+export interface AnchorPoint {
+  height?: number
+  width?: number
+  x: number
+  y: number
+}
+
+export type AnchorTarget = HTMLElement | AnchorPoint
+
 export type AnchorOptions = {
   placement?: ExtendedAnchorPlacement
   inset?: boolean
@@ -125,6 +134,39 @@ function resolveOffsetValue(offset: AnchorOffsetValue | undefined, floating: HTM
   return offset ?? 0
 }
 
+function isAnchorPoint(value: unknown): value is AnchorPoint {
+  if (typeof value !== 'object' || value === null) {
+    return false
+  }
+
+  if (!('x' in value) || !('y' in value)) {
+    return false
+  }
+
+  let width = 'width' in value ? value.width : undefined
+  let height = 'height' in value ? value.height : undefined
+
+  return (
+    typeof value.x === 'number' &&
+    typeof value.y === 'number' &&
+    (width === undefined || typeof width === 'number') &&
+    (height === undefined || typeof height === 'number')
+  )
+}
+
+function readAnchorRect(anchorTarget: AnchorTarget) {
+  if (anchorTarget instanceof HTMLElement) {
+    return anchorTarget.getBoundingClientRect()
+  }
+
+  return new DOMRect(
+    anchorTarget.x,
+    anchorTarget.y,
+    anchorTarget.width ?? 0,
+    anchorTarget.height ?? 0,
+  )
+}
+
 function calculatePosition(
   placement: ExtendedAnchorPlacement,
   anchorRect: DOMRect,
@@ -468,7 +510,7 @@ function getFlippedPlacement(
   placementHeight: number,
   collisionWidth: number,
   collisionHeight: number,
-  anchor: HTMLElement,
+  anchorIsAbsolutePositioned: boolean,
   inset: boolean,
   offset: number,
   offsetX: number,
@@ -476,11 +518,9 @@ function getFlippedPlacement(
   relativeOffsetX?: number | null,
   relativeOffsetY?: number | null,
 ) {
-  let computedStyle = getComputedStyle(anchor)
-  let isAbsolutePositioned = computedStyle.position !== 'fixed'
   let hasScroll = window.scrollY > 0
 
-  if (placement.startsWith('top') && isAbsolutePositioned && hasScroll) {
+  if (placement.startsWith('top') && anchorIsAbsolutePositioned && hasScroll) {
     if (anchorRect.top - placementHeight < 0) {
       return placement
     }
@@ -641,9 +681,9 @@ function solveRelativeAlignmentAxis(options: {
 
 export function anchor(
   floating: HTMLElement,
-  anchorElement: HTMLElement,
+  anchorTarget: AnchorTarget,
   options: AnchorOptions = {},
-) {
+): () => void {
   let lastAnchorRect: DOMRect
   let lastFloatingDimensions: FloatingDimensions
 
@@ -651,8 +691,8 @@ export function anchor(
     throw new TypeError('anchor() expected a floating HTMLElement')
   }
 
-  if (!(anchorElement instanceof HTMLElement)) {
-    throw new TypeError('anchor() expected an anchor HTMLElement')
+  if (!(anchorTarget instanceof HTMLElement) && !isAnchorPoint(anchorTarget)) {
+    throw new TypeError('anchor() expected an anchor HTMLElement or coordinates')
   }
 
   let {
@@ -664,12 +704,13 @@ export function anchor(
     offsetY: rawOffsetY = 0,
   } = options
 
-  let isFixed =
-    floating.hasAttribute('popover') || getComputedStyle(anchorElement).position === 'fixed'
+  let anchorIsAbsolutePositioned =
+    anchorTarget instanceof HTMLElement && getComputedStyle(anchorTarget).position !== 'fixed'
+  let isFixed = floating.hasAttribute('popover') || !anchorIsAbsolutePositioned
   let animationFrameId = 0
 
   function updatePosition(
-    anchorRect = anchorElement.getBoundingClientRect(),
+    anchorRect = readAnchorRect(anchorTarget),
     naturalDimensions = getFloatingDimensions(floating, relativeTo, {
       ignoreInlineMaxSize: true,
     }),
@@ -695,7 +736,7 @@ export function anchor(
       placementHeight,
       naturalDimensions.width,
       naturalDimensions.height,
-      anchorElement,
+      anchorIsAbsolutePositioned,
       inset,
       offset,
       offsetX,
@@ -872,7 +913,7 @@ export function anchor(
   updatePosition()
 
   function pollForPositionChanges() {
-    let currentRect = anchorElement.getBoundingClientRect()
+    let currentRect = readAnchorRect(anchorTarget)
     let currentDimensions = getFloatingDimensions(floating, relativeTo)
     if (
       hasRectChanged(currentRect, lastAnchorRect) ||

package/src/components/breadcrumbs/{demos/basic.demo.tsx → basic.demo.tsx}

@@ -3,6 +3,7 @@ import { Breadcrumbs } from '@remix-run/ui/breadcrumbs'
 /**
  * @name Breadcrumbs Basic
  * @description A basic breadcrumb trail linking back through the page hierarchy.
+ * @layout center
  */
 export default function Example() {
   return () => (

package/src/components/breadcrumbs/breadcrumbs.tsx

@@ -72,7 +72,7 @@ const textCss = css({
   whiteSpace: 'nowrap',
 })
 
-export function Breadcrumbs(handle: Handle<BreadcrumbsProps>) {
+export function Breadcrumbs(handle: Handle<BreadcrumbsProps>): () => RemixNode {
   return () => {
     let { 'aria-label': ariaLabel, items, separator, mix, ...navProps } = handle.props
     let currentIndex = items.findIndex((item) => item.current)

package/src/components/breadcrumbs/{demos/separator.demo.tsx → separator.demo.tsx}

@@ -3,6 +3,7 @@ import { Breadcrumbs } from '@remix-run/ui/breadcrumbs'
 /**
  * @name Breadcrumbs with Separator
  * @description Pass a custom separator string to override the default chevron icon.
+ * @layout center
  */
 export default function Example() {
   return () => (

package/src/components/button/button.tsx

@@ -1,5 +1,13 @@
 import { attrs, createElement, createMixin, css } from '@remix-run/ui'
-import type { CSSMixinDescriptor, ElementProps, Handle, Props, RemixNode } from '@remix-run/ui'
+import type {
+  CSSMixinDescriptor,
+  ElementProps,
+  Handle,
+  MixinDescriptor,
+  MixinFactory,
+  Props,
+  RemixNode,
+} from '@remix-run/ui'
 
 import { theme } from '../../theme/theme.ts'
 
@@ -74,22 +82,26 @@ const buttonIconCss: CSSMixinDescriptor = css({
   },
 })
 
-const buttonIconAttrsCss = attrs({ 'aria-hidden': true })
+const buttonIconAttrsCss: MixinDescriptor<Element, [Partial<ElementProps>], ElementProps> = attrs({
+  'aria-hidden': true,
+})
 
-const buttonDefaultsMixin = createMixin<Element, [], ElementProps>(
-  (handle, hostType) => (props) => {
-    if (hostType !== 'button' || props.type !== undefined) {
-      return handle.element
-    }
+const buttonDefaultsMixin: MixinFactory<Element, [], ElementProps> = createMixin<
+  Element,
+  [],
+  ElementProps
+>((handle, hostType) => (props) => {
+  if (hostType !== 'button' || props.type !== undefined) {
+    return handle.element
+  }
 
-    return createElement(handle.element as unknown as string, {
-      ...props,
-      type: 'button',
-    })
-  },
-)
+  return createElement(handle.element as unknown as string, {
+    ...props,
+    type: 'button',
+  })
+})
 
-const buttonDefaultsCss = buttonDefaultsMixin()
+const buttonDefaultsCss: MixinDescriptor<Element, [], ElementProps> = buttonDefaultsMixin()
 
 /**
  * Base button styling with the default `type="button"` behavior for `<button>`
@@ -121,7 +133,7 @@ export const labelStyle = buttonLabelCss
  *
  * @category mixin
  */
-export const primaryStyle = createButtonCss(theme.colors.action.primary)
+export const primaryStyle: CSSMixinDescriptor = createButtonCss(theme.colors.action.primary)
 
 /**
  * Secondary visual treatment for buttons. Combine with {@link baseStyle} when
@@ -129,7 +141,7 @@ export const primaryStyle = createButtonCss(theme.colors.action.primary)
  *
  * @category mixin
  */
-export const secondaryStyle = createButtonCss(theme.colors.action.secondary)
+export const secondaryStyle: CSSMixinDescriptor = createButtonCss(theme.colors.action.secondary)
 
 /**
  * Ghost visual treatment for buttons — transparent background with a hover
@@ -146,7 +158,7 @@ export const ghostStyle = ghostButtonToneCss
  *
  * @category mixin
  */
-export const dangerStyle = createButtonCss(theme.colors.action.danger)
+export const dangerStyle: CSSMixinDescriptor = createButtonCss(theme.colors.action.danger)
 
 const toneStyleByTone = {
   primary: primaryStyle,
@@ -203,7 +215,7 @@ export type ButtonProps = Omit<Props<'button'>, 'children'> & {
  * </Button>
  * ```
  */
-export function Button(handle: Handle<ButtonProps>) {
+export function Button(handle: Handle<ButtonProps>): () => RemixNode {
   return () => {
     let { children, endIcon, mix, startIcon, tone = 'secondary', ...buttonProps } = handle.props
 

package/src/components/button/demos/aliases.demo.tsx

@@ -5,6 +5,7 @@ import { theme } from '@remix-run/ui/theme'
 /**
  * @name Button Component
  * @description The Button component wraps the low-level style primitives and accepts a tone prop for quick theming.
+ * @layout center
  * @order 2
  */
 export default function Example() {

package/src/components/button/demos/basic.demo.tsx

@@ -6,6 +6,7 @@ import { theme } from '@remix-run/ui/theme'
 /**
  * @name Basic Button
  * @description The default button contract supports both ordinary actions and link-shaped navigation.
+ * @layout center
  * @order 1
  */
 export default function Example() {

package/src/components/button/demos/states.demo.tsx

@@ -6,6 +6,7 @@ import { theme } from '@remix-run/ui/theme'
 /**
  * @name Button States
  * @description Buttons support normal, disabled, and busy (loading) states using aria attributes.
+ * @layout center
  * @order 3
  */
 export default function Example() {

package/src/components/combobox/README.md

@@ -8,7 +8,7 @@ Use it when the user should type draft text, filter a popup list, and still comm
 
 ```tsx
 import { css, type Handle } from 'remix/ui'
-import { Combobox, ComboboxOption, onComboboxChange } from 'remix/ui'
+import { Combobox, ComboboxOption, onComboboxChange } from 'remix/ui/combobox'
 
 let airports = [
   {

package/src/components/combobox/combobox.tsx

@@ -10,6 +10,7 @@ import {
   type ElementProps,
   type Handle,
   type MixinHandle,
+  type MixinFactory,
   type Props,
   type RemixNode,
 } from '@remix-run/ui'
@@ -213,7 +214,9 @@ function getOptionSearchValue(option: {
   return option.searchValue ?? option.textValue ?? option.label
 }
 
-function ComboboxProvider(handle: Handle<ComboboxContextProps, ComboboxContextValue>) {
+function ComboboxProvider(
+  handle: Handle<ComboboxContextProps, ComboboxContextValue>,
+): () => RemixNode {
   let inputRef: HTMLInputElement | undefined
   let listboxRef: listbox.ListboxRef | undefined
   let surfaceRef: HTMLElement | undefined
@@ -807,7 +810,11 @@ function getComboboxContext(handle: Handle | MixinHandle) {
   return handle.context.get(ComboboxProvider)
 }
 
-const inputMixin = createMixin<HTMLInputElement, [], ElementProps>((handle) => {
+const inputMixin: MixinFactory<HTMLInputElement, [], ElementProps> = createMixin<
+  HTMLInputElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = getComboboxContext(handle)
 
   return (props) => [
@@ -882,7 +889,11 @@ const inputMixin = createMixin<HTMLInputElement, [], ElementProps>((handle) => {
   ]
 })
 
-const popoverMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
+const popoverMixin: MixinFactory<HTMLElement, [], ElementProps> = createMixin<
+  HTMLElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = getComboboxContext(handle)
 
   return () => [
@@ -908,12 +919,20 @@ const popoverMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
   ]
 })
 
-const listMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
+const listMixin: MixinFactory<HTMLElement, [], ElementProps> = createMixin<
+  HTMLElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = getComboboxContext(handle)
   return () => [attrs({ id: context.listId }), listbox.list()]
 })
 
-const hiddenInputMixin = createMixin<HTMLInputElement, [], ElementProps>((handle) => {
+const hiddenInputMixin: MixinFactory<HTMLInputElement, [], ElementProps> = createMixin<
+  HTMLInputElement,
+  [],
+  ElementProps
+>((handle) => {
   let context = getComboboxContext(handle)
   return () =>
     attrs({
@@ -924,8 +943,8 @@ const hiddenInputMixin = createMixin<HTMLInputElement, [], ElementProps>((handle
     })
 })
 
-const optionMixin = createMixin<HTMLElement, [options: ComboboxOptionOptions], ElementProps>(
-  (handle) => {
+const optionMixin: MixinFactory<HTMLElement, [options: ComboboxOptionOptions], ElementProps> =
+  createMixin<HTMLElement, [options: ComboboxOptionOptions], ElementProps>((handle) => {
     let context = getComboboxContext(handle)
 
     return (options) => {
@@ -946,8 +965,7 @@ const optionMixin = createMixin<HTMLElement, [options: ComboboxOptionOptions], E
         }),
       ]
     }
-  },
-)
+  })
 
 export const Context = ComboboxProvider
 export const hiddenInput = hiddenInputMixin
@@ -968,11 +986,11 @@ const combobox = {
 export function onComboboxChange<target extends HTMLElement>(
   handler: ComboboxChangeHandler<target>,
   captureBoolean?: boolean,
-) {
+): ReturnType<typeof on<target, typeof COMBOBOX_CHANGE_EVENT>> {
   return on(COMBOBOX_CHANGE_EVENT, handler, captureBoolean)
 }
 
-export function Combobox(handle: Handle<ComboboxProps>) {
+export function Combobox(handle: Handle<ComboboxProps>): () => RemixNode {
   return () => {
     let { children, defaultValue, disabled, inputId, name, placeholder, ...divProps } = handle.props
 
@@ -995,7 +1013,7 @@ export function Combobox(handle: Handle<ComboboxProps>) {
   }
 }
 
-export function ComboboxOption(handle: Handle<ComboboxOptionProps>) {
+export function ComboboxOption(handle: Handle<ComboboxOptionProps>): () => RemixNode {
   return () => {
     let { children, disabled, label, mix, searchValue, value, ...divProps } = handle.props
 

package/src/components/combobox/{demos/overview.demo.tsx → overview.demo.tsx}

@@ -5,6 +5,7 @@ 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

package/src/components/glyph/glyph.tsx

@@ -31,7 +31,7 @@ export function createGlyphSheet(values: GlyphValues): GlyphSheetComponent {
     >,
   )
 
-  function GlyphSheet(handle: Handle<GlyphSheetProps>) {
+  function GlyphSheet(handle: Handle<GlyphSheetProps>): () => RemixElement {
     return () => {
       let { style, ...svgProps } = handle.props
       let hiddenStyle = {
@@ -70,7 +70,7 @@ export function createGlyphSheet(values: GlyphValues): GlyphSheetComponent {
   })
 }
 
-export function Glyph(handle: Handle<GlyphProps>) {
+export function Glyph(handle: Handle<GlyphProps>): () => RemixElement {
   return () => {
     let { fill, name, ...svgProps } = handle.props
     let glyphId = glyphContract[name].id