@remix-run/ui 0.3.0 → 0.5.0

package/README.md

@@ -1,15 +1,14 @@
 # ui
 
-Runtime UI primitives for Remix apps, including the component runtime, server rendering, frame hydration, reusable mixins, first-party components, and theme tokens.
+Runtime UI primitives for Remix apps, including the component runtime, server rendering, frame hydration, reusable mixins, and headless first-party behavior primitives.
 
 ## Features
 
-- Component runtime APIs for rendering, hydration, frame navigation, and JSX
+- Component runtime APIs for rendering, hydration, link and form frame navigation, and JSX
 - Server rendering APIs for streaming Remix UI trees and frames
 - `mix` composition with event, ref, CSS, and animation helpers
-- First-party components such as buttons, menus, listboxes, popovers, and selects
-- Fixed typed `theme` contract whose leaves resolve to `var(--rmx-...)`
-- `createTheme()` and `createGlyphSheet()` utilities for shared app styling and glyphs
+- Headless behavior primitives for controls such as menus, listboxes, popovers, selects, and comboboxes
+- Lower-level utilities for keyboard events, typeahead search, refs, attributes, and CSS transition timing
 
 ## Installation
 
@@ -19,188 +18,148 @@ npm i remix
 
 ## Usage
 
-Define your app theme once:
+Compose behavior primitives with your own markup and styles:
 
 ```tsx
-import { createTheme } from 'remix/ui'
-
-let Theme = createTheme({
-  space: {
-    none: '0px',
-    px: '1px',
-    xs: '2px',
-    sm: '4px',
-    md: '8px',
-    lg: '12px',
-    xl: '16px',
-    xxl: '24px',
-  },
-  radius: {
-    none: '0px',
-    sm: '4px',
-    md: '8px',
-    lg: '12px',
-    xl: '16px',
-    full: '9999px',
-  },
-  fontSize: {
-    xxxs: '10px',
-    xxs: '11px',
-    xs: '12px',
-    sm: '14px',
-    md: '16px',
-    lg: '18px',
-    xl: '20px',
-    xxl: '28px',
-  },
-  lineHeight: {
-    tight: '1.2',
-    normal: '1.5',
-    relaxed: '1.7',
-  },
-  fontWeight: {
-    normal: '400',
-    medium: '500',
-    semibold: '600',
-    bold: '700',
-  },
-  shadow: {
-    xs: '0 1px 2px rgb(0 0 0 / 0.05)',
-    sm: '0 1px 3px rgb(0 0 0 / 0.10)',
-    md: '0 4px 10px rgb(0 0 0 / 0.12)',
-    lg: '0 10px 30px rgb(0 0 0 / 0.16)',
-    xl: '0 20px 50px rgb(0 0 0 / 0.20)',
-  },
-  zIndex: {
-    dropdown: '1000',
-    popover: '1100',
-    sticky: '1200',
-    overlay: '1300',
-    modal: '1400',
-    toast: '1500',
-    tooltip: '1600',
-  },
-  surface: {
-    lvl0: '#ffffff',
-    lvl1: '#f8fafc',
-    lvl2: '#f1f5f9',
-    lvl3: '#e5edf7',
-    lvl4: '#dbe6f4',
-  },
-  colors: {
-    text: {
-      primary: '#111827',
-      secondary: '#374151',
-      muted: '#6b7280',
-      link: '#2563eb',
-    },
-    border: {
-      subtle: '#e5e7eb',
-      default: '#d1d5db',
-      strong: '#9ca3af',
-    },
-    focus: {
-      ring: '#3b82f6',
-    },
-    overlay: {
-      scrim: 'rgb(0 0 0 / 0.45)',
-    },
-    action: {
-      primary: {
-        background: '#2563eb',
-        backgroundHover: '#1d4ed8',
-        backgroundActive: '#1e40af',
-        foreground: '#ffffff',
-        border: '#2563eb',
-      },
-      secondary: {
-        background: '#ffffff',
-        backgroundHover: '#f8fafc',
-        backgroundActive: '#f1f5f9',
-        foreground: '#111827',
-        border: '#d1d5db',
-      },
-      danger: {
-        background: '#dc2626',
-        backgroundHover: '#b91c1c',
-        backgroundActive: '#991b1b',
-        foreground: '#ffffff',
-        border: '#dc2626',
-      },
-    },
-  },
+import { css } from 'remix/ui'
+import * as popover from 'remix/ui/popover'
+
+let triggerCss = css({
+  border: '1px solid #d1d5db',
+  borderRadius: '6px',
+  padding: '6px 10px',
 })
-```
 
-Render the theme once near the top of your document:
+let surfaceCss = css({
+  background: 'white',
+  border: '1px solid #d1d5db',
+  borderRadius: '6px',
+  padding: '8px',
+})
 
-```tsx
-import type { Handle, RemixNode } from 'remix/ui'
+function ViewOptions() {
+  let open = false
 
-function Layout(handle: Handle<{ children: RemixNode }>) {
   return () => (
-    <html>
-      <head>
-        <Theme />
-      </head>
-      <body>{handle.props.children}</body>
-    </html>
+    <popover.Context>
+      <button
+        mix={[triggerCss, popover.anchor({ placement: 'bottom-end' }), popover.focusOnHide()]}
+        onClick={() => {
+          open = true
+        }}
+        type="button"
+      >
+        View options
+      </button>
+      <div
+        mix={[
+          surfaceCss,
+          popover.surface({
+            open,
+            onHide() {
+              open = false
+            },
+          }),
+        ]}
+      >
+        Panel content
+      </div>
+    </popover.Context>
   )
 }
 ```
 
-Consume the shared token contract from app code and first-party components:
+Button styling is available as a composable mixin:
 
 ```tsx
-import { css } from 'remix/ui'
-import { theme } from 'remix/ui'
-
-let card = css({
-  backgroundColor: theme.surface.lvl0,
-  color: theme.colors.text.primary,
-  border: `1px solid ${theme.colors.border.subtle}`,
-  borderRadius: theme.radius.md,
-  paddingInline: theme.space.md,
-  paddingBlock: theme.space.sm,
+import button from 'remix/ui/button'
+
+function Actions() {
+  return () => <button mix={button({ tone: 'primary' })}>Create project</button>
+}
+```
+
+## Frame Navigation
+
+Configure `resolveFrame` once to progressively enhance same-origin links and forms. The resolver owns the fetch request and receives native submission metadata for non-GET forms:
+
+```tsx
+import type { ResolveFrameOptions } from 'remix/ui'
+import { run } from 'remix/ui'
+
+let app = run({
+  async loadModule(moduleUrl, exportName) {
+    let mod = await import(moduleUrl)
+    return mod[exportName]
+  },
+  async resolveFrame(src, options) {
+    return fetch(src, {
+      headers: { Accept: 'text/html', 'X-Remix-Frame': 'true' },
+      method: options?.method,
+      body: getRequestBody(options),
+      signal: options?.signal,
+    })
+  },
 })
 
-<div mix={card} />
+function getRequestBody(options?: ResolveFrameOptions): BodyInit | undefined {
+  let formData = options?.formData
+  if (!formData) return
+  if (options.encType !== 'application/x-www-form-urlencoded') return formData
+
+  let body = new URLSearchParams()
+  for (let [name, value] of formData) {
+    body.append(name, typeof value === 'string' ? value : value.name)
+  }
+  return body
+}
+
+await app.ready()
 ```
 
-Render shared glyphs separately from the theme styles:
+Forms remain ordinary HTML forms before the runtime starts. Add `rmx-target` to reload a named frame, or `rmx-document` to require a full-document submission:
 
 ```tsx
-import type { Handle, RemixNode } from 'remix/ui'
-import { Button } from 'remix/ui/button'
-import { Glyph } from 'remix/ui/glyph'
-import { RMX_01, RMX_01_GLYPHS } from 'remix/ui/theme'
+import { Frame } from 'remix/ui'
 
-function Layout(handle: Handle<{ children: RemixNode }>) {
+function AccountPage() {
   return () => (
-    <html>
-      <head>
-        <RMX_01 />
-      </head>
-      <body>
-        <RMX_01_GLYPHS />
-        <Button startIcon={<Glyph name="add" />} tone="primary">
-          New project
-        </Button>
-        {handle.props.children}
-      </body>
-    </html>
+    <>
+      <Frame name="account" src="/account/edit" />
+      <form action="/account/edit" method="post" rmx-target="account">
+        <label for="display-name">Display name</label>
+        <input id="display-name" name="displayName" required />
+        <button type="submit">Save</button>
+      </form>
+    </>
   )
 }
 ```
 
+Native constraint validation and submitter overrides still apply. GET form values arrive in `src`; non-GET forms provide `formData`, `method`, and `encType` to the resolver. See [Frames](https://github.com/remix-run/remix/blob/main/packages/ui/docs/frames.md#form-navigation) for targeting, history behavior, request encoding, opt-outs, and server response guidance.
+
+Use `rmx-history="push|replace"` on an enhanced anchor or form to control how the navigation updates history. This can override the automatic replacement used for non-GET form submissions to the current URL.
+
+## Preserving Client-Owned DOM
+
+Use `rmx-preserve-dom` on the smallest element whose live DOM should belong to client code after initial render, such as a custom element or third-party widget:
+
+```tsx
+<pagefind-ui data-key="search" rmx-preserve-dom>
+  <button type="button">Search</button>
+</pagefind-ui>
+```
+
+Remix UI still renders the element's children during SSR and still hydrates any initial client entries inside it. On later frame reloads, matched `rmx-preserve-dom` elements keep their current attributes and children instead of accepting incoming DOM updates. See [Preserving client-owned DOM](https://github.com/remix-run/remix/blob/main/packages/ui/docs/frames.md#preserving-client-owned-dom) for guidance and caveats.
+
 ## Cascade Layers
 
-Remix UI emits its built-in theme reset in `rmx-reset` and generated `css(...)` rules under `rmx`. Unlayered CSS outranks layered component CSS, so use explicit layer order when mixing Remix UI with global styles.
+Remix UI emits generated `css(...)` rules under the `rmx` cascade layer. Unlayered CSS outranks layered CSS, so use explicit layer order when mixing Remix UI with global styles.
 
-Put layers that should lose to Remix UI before `rmx-reset` and `rmx`:
+Put layers that should lose to Remix UI before `rmx`:
 
 ```css
-@layer base, rmx-reset, rmx;
+@layer base, rmx;
 
 @layer base {
   button,

package/dist/accordion/index.d.ts

@@ -0,0 +1,46 @@
+import { type CSSMixinDescriptor, type Handle, type Props, type RemixNode } from '@remix-run/ui';
+import * as accordion from '@remix-run/ui/accordion/primitives';
+type AccordionBaseProps = Omit<Props<'div'>, 'children'> & {
+    children?: RemixNode;
+    disabled?: boolean;
+    headingLevel?: accordion.AccordionHeadingLevel;
+};
+export type AccordionSingleProps = AccordionBaseProps & {
+    type?: 'single';
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string | null) => void;
+    collapsible?: boolean;
+};
+export type AccordionMultipleProps = AccordionBaseProps & {
+    type: 'multiple';
+    value?: string[];
+    defaultValue?: string[];
+    onValueChange?: (value: string[]) => void;
+};
+export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+export type AccordionItemProps = Omit<Props<'div'>, 'children'> & {
+    children?: RemixNode;
+    disabled?: boolean;
+    value: string;
+};
+export type AccordionTriggerProps = Omit<Props<'button'>, 'children' | 'type'> & {
+    children?: RemixNode;
+    indicator?: RemixNode | null;
+    type?: 'button' | 'submit' | 'reset';
+};
+export type AccordionContentProps = Omit<Props<'div'>, 'children'> & {
+    children?: RemixNode;
+};
+export declare const rootStyle: CSSMixinDescriptor;
+export declare const itemStyle: CSSMixinDescriptor;
+export declare const headingStyle: CSSMixinDescriptor;
+export declare const triggerStyle: CSSMixinDescriptor;
+export declare const indicatorStyle: CSSMixinDescriptor;
+export declare const panelStyle: CSSMixinDescriptor;
+export declare const bodyStyle: CSSMixinDescriptor;
+export declare function Accordion(handle: Handle<AccordionProps>): () => RemixNode;
+export declare function AccordionItem(handle: Handle<AccordionItemProps>): () => RemixNode;
+export declare function AccordionTrigger(handle: Handle<AccordionTriggerProps>): () => RemixNode;
+export declare function AccordionContent(handle: Handle<AccordionContentProps>): () => RemixNode;
+export {};

package/dist/accordion/index.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
+import { css, createElement, } from '@remix-run/ui';
+import { spring } from '@remix-run/ui/animation';
+import * as accordion from '@remix-run/ui/accordion/primitives';
+import { ChevronRightIcon } from '../shared/icons.js';
+import { componentStyleValues as styles } from '../shared/style-values.js';
+const accordionPanelClipCss = css({
+    minHeight: 0,
+    overflow: 'hidden',
+});
+const accordionTransition = spring();
+const accordionRootCss = css({
+    display: 'flex',
+    flexDirection: 'column',
+    minWidth: 0,
+});
+const accordionItemCss = css({
+    minWidth: 0,
+});
+const accordionHeadingCss = css({
+    margin: 0,
+    minWidth: 0,
+});
+const accordionTriggerCss = css({
+    all: 'unset',
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    display: 'grid',
+    gridTemplateColumns: 'minmax(0, 1fr) auto',
+    alignItems: 'center',
+    gap: styles.space.md,
+    width: '100%',
+    minHeight: '28px',
+    padding: `${styles.space.xs} 0`,
+    color: styles.colors.text.primary,
+    fontFamily: styles.fontFamily.sans,
+    fontSize: styles.fontSize.sm,
+    lineHeight: styles.lineHeight.normal,
+    fontWeight: styles.fontWeight.medium,
+    textAlign: 'left',
+    '&:hover:not(:disabled)': {
+        backgroundColor: styles.surface.lvl1,
+    },
+    '&:hover:not(:disabled) > span:first-child': {
+        textDecorationLine: 'underline',
+    },
+    '&:focus-visible': {
+        outline: `2px solid ${styles.colors.focus.ring}`,
+        outlineOffset: '2px',
+    },
+    '&:disabled': {
+        cursor: 'default',
+        opacity: 0.55,
+    },
+    '& > span:first-child': {
+        minWidth: 0,
+    },
+});
+const accordionIndicatorCss = css({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: styles.fontSize.sm,
+    height: styles.fontSize.sm,
+    color: styles.colors.text.muted,
+    transition: `transform ${accordionTransition}`,
+    '& > svg': {
+        display: 'block',
+        width: '100%',
+        height: '100%',
+    },
+    '&[data-state="open"]': {
+        transform: 'rotate(90deg)',
+    },
+});
+const accordionPanelCss = css({
+    display: 'grid',
+    gridTemplateRows: '0fr',
+    transition: `grid-template-rows ${accordionTransition}`,
+    '&[data-state="open"]': {
+        gridTemplateRows: '1fr',
+    },
+    '&[data-state="closed"]': {
+        pointerEvents: 'none',
+    },
+    '@media (prefers-reduced-motion: reduce)': {
+        transition: 'none',
+    },
+});
+const accordionBodyCss = css({
+    display: 'flow-root',
+    minHeight: 0,
+    paddingBottom: styles.space.md,
+    color: styles.colors.text.secondary,
+    fontSize: styles.fontSize.sm,
+    lineHeight: styles.lineHeight.relaxed,
+    '& > :first-child': {
+        marginTop: 0,
+    },
+    '& > :last-child': {
+        marginBottom: 0,
+    },
+});
+export const rootStyle = accordionRootCss;
+export const itemStyle = accordionItemCss;
+export const headingStyle = accordionHeadingCss;
+export const triggerStyle = accordionTriggerCss;
+export const indicatorStyle = accordionIndicatorCss;
+export const panelStyle = accordionPanelCss;
+export const bodyStyle = accordionBodyCss;
+export function Accordion(handle) {
+    return () => {
+        if (handle.props.type === 'multiple') {
+            let { children, defaultValue, disabled, headingLevel, mix, onValueChange, type, value, ...divProps } = handle.props;
+            return (_jsx(accordion.Context, { defaultValue: defaultValue, disabled: disabled, headingLevel: headingLevel, onValueChange: onValueChange, type: type, value: value, children: _jsx("div", { ...divProps, mix: [rootStyle, accordion.root(), mix], children: children }) }));
+        }
+        let { children, collapsible, defaultValue, disabled, headingLevel, mix, onValueChange, type, value, ...divProps } = handle.props;
+        return (_jsx(accordion.Context, { collapsible: collapsible, defaultValue: defaultValue, disabled: disabled, headingLevel: headingLevel, onValueChange: onValueChange, type: type, value: value, children: _jsx("div", { ...divProps, mix: [rootStyle, accordion.root(), mix], children: children }) }));
+    };
+}
+export function AccordionItem(handle) {
+    return () => {
+        let { children, disabled, mix, value, ...divProps } = handle.props;
+        return (_jsx(accordion.ItemContext, { disabled: disabled, value: value, children: _jsx("div", { ...divProps, mix: [itemStyle, accordion.item(), mix], children: children }) }));
+    };
+}
+export function AccordionTrigger(handle) {
+    return () => {
+        let item = handle.context.get(accordion.ItemContext);
+        let headingTag = `h${item.headingLevel}`;
+        let { children, disabled, indicator, mix, type, ...buttonProps } = handle.props;
+        let button = (_jsxs("button", { ...buttonProps, mix: [triggerStyle, accordion.trigger({ disabled }), mix], type: type ?? 'button', children: [_jsx("span", { children: children }), indicator === null ? null : (_jsx("span", { "data-rmx-accordion-indicator": "", "data-state": item.open ? 'open' : 'closed', mix: indicatorStyle, children: indicator ?? _jsx(ChevronRightIcon, {}) }))] }));
+        return createElement(headingTag, { mix: headingStyle }, button);
+    };
+}
+export function AccordionContent(handle) {
+    return () => {
+        let { children, mix, ...panelProps } = handle.props;
+        return (_jsx("div", { ...panelProps, mix: [panelStyle, accordion.content(), mix], children: _jsx("div", { mix: accordionPanelClipCss, children: _jsx("div", { mix: bodyStyle, children: children }) }) }));
+    };
+}
+//# sourceMappingURL=index.js.map

package/dist/accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/accordion/index.tsx"],"names":[],"mappings":"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"}

package/dist/accordion/primitives.d.ts

@@ -0,0 +1,104 @@
+import { on, type Dispatched, type ElementProps, type Handle, type Props, type RemixNode } from '@remix-run/ui';
+declare const ACCORDION_CHANGE_EVENT: 'rmx:accordion-change';
+type AccordionChangeHandler<target extends HTMLElement> = (event: Dispatched<AccordionChangeEvent, target>, signal: AbortSignal) => void | Promise<void>;
+declare global {
+    interface HTMLElementEventMap {
+        [ACCORDION_CHANGE_EVENT]: AccordionChangeEvent;
+    }
+}
+export declare class AccordionChangeEvent extends Event {
+    readonly accordionType: AccordionType;
+    readonly itemValue: string;
+    readonly value: AccordionValue;
+    constructor(value: AccordionValue, init: {
+        accordionType: AccordionType;
+        itemValue: string;
+    });
+}
+export type AccordionType = 'single' | 'multiple';
+export type AccordionValue = string | null | string[];
+export type AccordionSingleValue = string | null;
+export type AccordionMultipleValue = string[];
+export type AccordionHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type FocusDirection = 'first' | 'last' | 'next' | 'previous';
+type RegisteredItem = {
+    disabled: boolean;
+    getTriggerNode(): HTMLButtonElement | null;
+    value: string;
+};
+interface AccordionContextValue {
+    readonly collapsible: boolean;
+    readonly disabled: boolean;
+    readonly headingLevel: AccordionHeadingLevel;
+    readonly type: AccordionType;
+    focusItem(value: string, direction: FocusDirection): void;
+    getPanelId(value: string): string;
+    getTriggerId(value: string): string | undefined;
+    isOpen(value: string): boolean;
+    registerItem(item: RegisteredItem): void;
+    registerRoot(node: HTMLElement): void;
+    toggleItem(value: string): void;
+    unregisterRoot(node: HTMLElement): void;
+}
+interface AccordionItemContextValue {
+    readonly disabled: boolean;
+    readonly headingLevel: AccordionHeadingLevel;
+    readonly lockedOpen: boolean;
+    readonly open: boolean;
+    readonly panelId: string;
+    readonly triggerId: string;
+    readonly value: string;
+    setTriggerNode(node: HTMLButtonElement | null): void;
+}
+export interface AccordionBaseContextProps {
+    children?: RemixNode;
+    disabled?: boolean;
+    headingLevel?: AccordionHeadingLevel;
+}
+export interface AccordionSingleContextProps extends AccordionBaseContextProps {
+    type?: 'single';
+    value?: AccordionSingleValue;
+    defaultValue?: AccordionSingleValue;
+    onValueChange?: (value: AccordionSingleValue) => void;
+    collapsible?: boolean;
+}
+export interface AccordionMultipleContextProps extends AccordionBaseContextProps {
+    type: 'multiple';
+    value?: AccordionMultipleValue;
+    defaultValue?: AccordionMultipleValue;
+    onValueChange?: (value: AccordionMultipleValue) => void;
+}
+export type AccordionContextProps = AccordionSingleContextProps | AccordionMultipleContextProps;
+export interface AccordionRootOptions {
+}
+export interface AccordionItemOptions {
+    disabled?: boolean;
+    value: string;
+}
+export interface AccordionTriggerOptions {
+    disabled?: boolean;
+}
+export interface AccordionContentOptions {
+}
+export type AccordionProps = Props<'div'> & AccordionContextProps;
+export type AccordionItemProps = Omit<Props<'div'>, 'children'> & AccordionItemOptions & {
+    children?: RemixNode;
+};
+export type AccordionTriggerProps = Omit<Props<'button'>, 'children' | 'type'> & AccordionTriggerOptions & {
+    children?: RemixNode;
+    type?: 'button' | 'submit' | 'reset';
+};
+export type AccordionContentProps = Omit<Props<'div'>, 'children'> & {
+    children?: RemixNode;
+};
+declare function AccordionProvider(handle: Handle<AccordionContextProps, AccordionContextValue>): () => RemixNode;
+export declare const Context: typeof AccordionProvider;
+export declare const ItemContext: (handle: Handle<AccordionItemOptions & {
+    children?: RemixNode;
+}, AccordionItemContextValue>) => () => RemixNode;
+export declare const content: import("@remix-run/ui").MixinFactory<HTMLElement, [options?: AccordionContentOptions | undefined], ElementProps>;
+export declare const item: import("@remix-run/ui").MixinFactory<HTMLElement, [options?: AccordionItemOptions | undefined], ElementProps>;
+export declare const root: import("@remix-run/ui").MixinFactory<HTMLElement, [options?: AccordionRootOptions | undefined], ElementProps>;
+export declare const trigger: import("@remix-run/ui").MixinFactory<HTMLButtonElement, [options?: AccordionTriggerOptions | undefined], ElementProps>;
+export declare function onAccordionChange<target extends HTMLElement>(handler: AccordionChangeHandler<target>, captureBoolean?: boolean): ReturnType<typeof on<target, typeof ACCORDION_CHANGE_EVENT>>;
+export {};