@remix-run/ui 0.3.0 → 0.5.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@remix-run/ui",
-  "version": "0.3.0",
-  "description": "UI tokens, mixins, and glyphs for Remix components",
+  "version": "0.5.0",
+  "description": "UI runtime, headless primitives, and styled components for Remix",
   "author": "Ryan Florence <rpflorence@gmail.com>",
   "license": "MIT",
   "repository": {
@@ -15,6 +15,8 @@
     "README.md",
     "dist",
     "src",
+    "!src/**/*.demo.ts",
+    "!src/**/*.demo.tsx",
     "!src/**/*.test.ts",
     "!src/**/*.test.tsx"
   ],
@@ -26,28 +28,48 @@
       "default": "./dist/index.js"
     },
     "./accordion": {
-      "types": "./dist/components/accordion/accordion.d.ts",
-      "default": "./dist/components/accordion/accordion.js"
+      "types": "./dist/accordion/index.d.ts",
+      "default": "./dist/accordion/index.js"
+    },
+    "./accordion/primitives": {
+      "types": "./dist/accordion/primitives.d.ts",
+      "default": "./dist/accordion/primitives.js"
+    },
+    "./anchor": {
+      "types": "./dist/anchor/index.d.ts",
+      "default": "./dist/anchor/index.js"
     },
     "./animation": {
       "types": "./dist/animation/index.d.ts",
       "default": "./dist/animation/index.js"
     },
-    "./anchor": {
-      "types": "./dist/components/anchor/anchor.d.ts",
-      "default": "./dist/components/anchor/anchor.js"
-    },
     "./breadcrumbs": {
-      "types": "./dist/components/breadcrumbs/breadcrumbs.d.ts",
-      "default": "./dist/components/breadcrumbs/breadcrumbs.js"
+      "types": "./dist/breadcrumbs/index.d.ts",
+      "default": "./dist/breadcrumbs/index.js"
     },
     "./button": {
-      "types": "./dist/components/button/button.d.ts",
-      "default": "./dist/components/button/button.js"
+      "types": "./dist/button/index.d.ts",
+      "default": "./dist/button/index.js"
+    },
+    "./checkbox": {
+      "types": "./dist/checkbox/index.d.ts",
+      "default": "./dist/checkbox/index.js"
     },
     "./combobox": {
-      "types": "./dist/components/combobox/combobox.d.ts",
-      "default": "./dist/components/combobox/combobox.js"
+      "types": "./dist/combobox/index.d.ts",
+      "default": "./dist/combobox/index.js"
+    },
+    "./combobox/primitives": {
+      "types": "./dist/combobox/primitives.d.ts",
+      "default": "./dist/combobox/primitives.js"
+    },
+    "./input": {
+      "types": "./dist/input/index.d.ts",
+      "default": "./dist/input/index.js"
+    },
+    "./dev/refresh": {
+      "types": "./dist/dev/refresh.d.ts",
+      "default": "./dist/dev/refresh.js"
     },
     "./jsx-dev-runtime": {
       "types": "./dist/jsx-runtime.d.ts",
@@ -57,55 +79,66 @@
       "types": "./dist/jsx-runtime.d.ts",
       "default": "./dist/jsx-runtime.js"
     },
-    "./glyph": {
-      "types": "./dist/components/glyph/glyph.d.ts",
-      "default": "./dist/components/glyph/glyph.js"
-    },
     "./listbox": {
-      "types": "./dist/components/listbox/listbox.d.ts",
-      "default": "./dist/components/listbox/listbox.js"
+      "types": "./dist/listbox/index.d.ts",
+      "default": "./dist/listbox/index.js"
     },
     "./menu": {
-      "types": "./dist/components/menu/menu.d.ts",
-      "default": "./dist/components/menu/menu.js"
+      "types": "./dist/menu/index.d.ts",
+      "default": "./dist/menu/index.js"
+    },
+    "./menu/primitives": {
+      "types": "./dist/menu/primitives.d.ts",
+      "default": "./dist/menu/primitives.js"
     },
     "./popover": {
-      "types": "./dist/components/popover/popover.d.ts",
-      "default": "./dist/components/popover/popover.js"
+      "types": "./dist/popover/index.d.ts",
+      "default": "./dist/popover/index.js"
+    },
+    "./radio": {
+      "types": "./dist/radio/index.d.ts",
+      "default": "./dist/radio/index.js"
     },
     "./select": {
-      "types": "./dist/components/select/select.d.ts",
-      "default": "./dist/components/select/select.js"
+      "types": "./dist/select/index.d.ts",
+      "default": "./dist/select/index.js"
     },
-    "./separator": {
-      "types": "./dist/components/separator/separator.d.ts",
-      "default": "./dist/components/separator/separator.js"
+    "./select/primitives": {
+      "types": "./dist/select/primitives.d.ts",
+      "default": "./dist/select/primitives.js"
     },
     "./server": {
       "types": "./dist/server/stream.d.ts",
       "default": "./dist/server/stream.js"
     },
+    "./tabs": {
+      "types": "./dist/tabs/index.d.ts",
+      "default": "./dist/tabs/index.js"
+    },
+    "./tabs/primitives": {
+      "types": "./dist/tabs/primitives.d.ts",
+      "default": "./dist/tabs/primitives.js"
+    },
     "./test": {
       "types": "./dist/test.d.ts",
       "default": "./dist/test.js"
     },
-    "./theme": {
-      "types": "./dist/theme/theme.d.ts",
-      "default": "./dist/theme/theme.js"
+    "./toggle": {
+      "types": "./dist/toggle/index.d.ts",
+      "default": "./dist/toggle/index.js"
     },
-    "./scroll-lock": {
-      "types": "./dist/utils/scroll-lock.d.ts",
-      "default": "./dist/utils/scroll-lock.js"
+    "./toggle/primitives": {
+      "types": "./dist/toggle/primitives.d.ts",
+      "default": "./dist/toggle/primitives.js"
     },
     "./package.json": "./package.json"
   },
   "devDependencies": {
     "@types/node": "^24.6.0",
-    "@typescript/native-preview": "7.0.0-dev.20251125.1",
     "playwright": "^1.60.0",
-    "typescript": "^5.9.3",
-    "@remix-run/assert": "0.2.1",
-    "@remix-run/test": "0.4.2"
+    "typescript": "^7.0.2",
+    "@remix-run/assert": "0.3.0",
+    "@remix-run/test": "0.6.0"
   },
   "dependencies": {
     "@types/dom-navigation": "^1.0.7"
@@ -113,21 +146,20 @@
   "keywords": [
     "remix",
     "ui",
-    "theming",
-    "design-tokens",
-    "css-variables",
+    "headless",
+    "components",
     "mixins",
-    "glyphs",
-    "component-styling"
+    "runtime",
+    "primitives"
   ],
   "scripts": {
     "build": "tsc -p tsconfig.build.json",
     "clean": "git clean -fdX",
-    "lint": "pnpm -w exec oxlint packages/ui -A all --quiet",
-    "lint:fix": "pnpm -w exec oxlint packages/ui -A all --fix --quiet",
-    "test": "remix-test",
-    "test:coverage": "remix-test --coverage",
-    "test:watch": "remix-test --watch",
+    "lint": "pnpm -w exec oxlint packages/ui --max-warnings=0",
+    "lint:fix": "pnpm -w exec oxlint packages/ui --fix --max-warnings=0",
+    "test": "remix test",
+    "test:coverage": "remix test --coverage",
+    "test:watch": "remix test --watch",
     "typecheck": "tsc --noEmit"
   }
 }

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

@@ -2,7 +2,7 @@
 
 `Accordion` renders a disclosure set with one or more expandable items. Use it for grouped settings, FAQ sections, and dense panels where each item owns a trigger and content region.
 
-## Usage
+## Component Usage
 
 ```tsx
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from 'remix/ui/accordion'
@@ -82,16 +82,11 @@ export function ControlledAccordion(handle: Handle) {
 }
 ```
 
-Listen for bubbling `AccordionChangeEvent` events with `onAccordionChange`.
+Listen for bubbling `AccordionChangeEvent` events with `onAccordionChange` from `remix/ui/accordion/primitives`.
 
 ```tsx
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  onAccordionChange,
-} from 'remix/ui/accordion'
+import { onAccordionChange } from 'remix/ui/accordion/primitives'
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from 'remix/ui/accordion'
 
 export function TrackedAccordion() {
   return (
@@ -124,7 +119,7 @@ Set `collapsible={false}` in single mode when the open item must stay open. The
 </Accordion>
 ```
 
-Use `headingLevel` to choose the heading wrapper rendered around each trigger. The default level is `3`.
+Use `headingLevel` to choose the heading element rendered around each trigger. The default level is `3`.
 
 ```tsx
 <Accordion defaultValue="shipping" headingLevel={2}>
@@ -142,16 +137,57 @@ Pass `indicator={null}` to remove the default chevron, or pass a custom node to
 <AccordionTrigger indicator={<span aria-hidden>+</span>}>Custom indicator</AccordionTrigger>
 ```
 
-## `accordion.*`
+## Primitive Usage
+
+Use the lower-level primitives when app code owns the accordion markup and styles:
+
+```tsx
+import * as accordion from 'remix/ui/accordion/primitives'
+import { contentStyle, headingStyle, itemStyle, rootStyle, triggerStyle } from './accordion.styles'
+
+export function PrimitiveAccordion() {
+  return (
+    <accordion.Context defaultValue="shipping">
+      <div mix={[rootStyle, accordion.root()]}>
+        <accordion.ItemContext value="shipping">
+          <div mix={[itemStyle, accordion.item()]}>
+            <h3 mix={headingStyle}>
+              <button mix={[triggerStyle, accordion.trigger()]} type="button">
+                Shipping
+              </button>
+            </h3>
+            <div mix={[contentStyle, accordion.content()]}>
+              Delivery windows and carrier defaults.
+            </div>
+          </div>
+        </accordion.ItemContext>
+      </div>
+    </accordion.Context>
+  )
+}
+```
+
+## `remix/ui/accordion`
 
 - `Accordion`: root component. Defaults to single-item mode and supports controlled `value`, uncontrolled `defaultValue`, `onValueChange`, `disabled`, `headingLevel`, `collapsible`, and `type="multiple"`.
 - `AccordionItem`: registers one accordion item by `value`. Pass `disabled` to prevent that item from opening or receiving keyboard focus.
 - `AccordionTrigger`: heading-wrapped button for an item. It wires `aria-expanded`, `aria-controls`, keyboard navigation, and the default chevron indicator.
 - `AccordionContent`: panel for an item. It wires the panel id, `aria-labelledby`, `aria-hidden`, inert state, and open/closed state attributes.
+- `rootStyle`, `itemStyle`, `headingStyle`, `triggerStyle`, `indicatorStyle`, `panelStyle`, and `bodyStyle`: flat style mixins used by the component markup.
+- `AccordionProps`, `AccordionSingleProps`, `AccordionMultipleProps`, `AccordionItemProps`, `AccordionTriggerProps`, and `AccordionContentProps`: public TypeScript props for the composed APIs.
+
+## `remix/ui/accordion/primitives`
+
+- `Context`: lower-level provider for custom accordion composition.
+- `ItemContext`: lower-level provider for one item value.
+- `root()`: wires the root element and bubbling change events.
+- `item()`: wires one item wrapper.
+- `trigger()`: wires the item trigger, keyboard navigation, and trigger ARIA attributes.
+- `content()`: wires the item panel id, hidden state, inert state, and open/closed state attributes.
 - `onAccordionChange(...)`: event mixin for the bubbling `AccordionChangeEvent`.
-- `AccordionChangeEvent`: bubbling event class with `value`, `itemValue`, and `accordionType`.
-- `AccordionProps`, `AccordionSingleProps`, `AccordionMultipleProps`, `AccordionItemProps`, `AccordionTriggerProps`, and `AccordionContentProps`: public TypeScript props.
-- `rootStyle`, `itemStyle`, `triggerStyle`, `indicatorStyle`, `panelStyle`, and `bodyStyle`: flat style mixins used by the component wrappers.
+- `AccordionChangeEvent`: bubbling event with `value`, `itemValue`, and `accordionType`.
+- `AccordionType`, `AccordionValue`, `AccordionSingleValue`, `AccordionMultipleValue`, and `AccordionHeadingLevel`: public TypeScript state and configuration types.
+- `AccordionBaseContextProps`, `AccordionSingleContextProps`, `AccordionMultipleContextProps`, `AccordionContextProps`, `AccordionRootOptions`, `AccordionItemOptions`, `AccordionTriggerOptions`, and `AccordionContentOptions`: primitive prop and option types for custom composition.
 
 ## Behavior Notes
 

package/src/accordion/index.tsx

@@ -0,0 +1,285 @@
+import {
+  css,
+  createElement,
+  type CSSMixinDescriptor,
+  type Handle,
+  type Props,
+  type RemixNode,
+} 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.tsx'
+import { componentStyleValues as styles } from '../shared/style-values.ts'
+
+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
+}
+
+const accordionPanelClipCss = css({
+  minHeight: 0,
+  overflow: 'hidden',
+})
+
+const accordionTransition = spring()
+
+const accordionRootCss: CSSMixinDescriptor = css({
+  display: 'flex',
+  flexDirection: 'column',
+  minWidth: 0,
+})
+
+const accordionItemCss: CSSMixinDescriptor = css({
+  minWidth: 0,
+})
+
+const accordionHeadingCss: CSSMixinDescriptor = css({
+  margin: 0,
+  minWidth: 0,
+})
+
+const accordionTriggerCss: CSSMixinDescriptor = 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: CSSMixinDescriptor = 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: CSSMixinDescriptor = 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: CSSMixinDescriptor = 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: Handle<AccordionProps>): () => RemixNode {
+  return () => {
+    if (handle.props.type === 'multiple') {
+      let {
+        children,
+        defaultValue,
+        disabled,
+        headingLevel,
+        mix,
+        onValueChange,
+        type,
+        value,
+        ...divProps
+      } = handle.props
+
+      return (
+        <accordion.Context
+          defaultValue={defaultValue}
+          disabled={disabled}
+          headingLevel={headingLevel}
+          onValueChange={onValueChange}
+          type={type}
+          value={value}
+        >
+          <div {...divProps} mix={[rootStyle, accordion.root(), mix]}>
+            {children}
+          </div>
+        </accordion.Context>
+      )
+    }
+
+    let {
+      children,
+      collapsible,
+      defaultValue,
+      disabled,
+      headingLevel,
+      mix,
+      onValueChange,
+      type,
+      value,
+      ...divProps
+    } = handle.props
+
+    return (
+      <accordion.Context
+        collapsible={collapsible}
+        defaultValue={defaultValue}
+        disabled={disabled}
+        headingLevel={headingLevel}
+        onValueChange={onValueChange}
+        type={type}
+        value={value}
+      >
+        <div {...divProps} mix={[rootStyle, accordion.root(), mix]}>
+          {children}
+        </div>
+      </accordion.Context>
+    )
+  }
+}
+
+export function AccordionItem(handle: Handle<AccordionItemProps>): () => RemixNode {
+  return () => {
+    let { children, disabled, mix, value, ...divProps } = handle.props
+
+    return (
+      <accordion.ItemContext disabled={disabled} value={value}>
+        <div {...divProps} mix={[itemStyle, accordion.item(), mix]}>
+          {children}
+        </div>
+      </accordion.ItemContext>
+    )
+  }
+}
+
+export function AccordionTrigger(handle: Handle<AccordionTriggerProps>): () => RemixNode {
+  return () => {
+    let item = handle.context.get(accordion.ItemContext)
+    let headingTag = `h${item.headingLevel}` as keyof JSX.IntrinsicElements
+    let { children, disabled, indicator, mix, type, ...buttonProps } = handle.props
+
+    let button = (
+      <button
+        {...buttonProps}
+        mix={[triggerStyle, accordion.trigger({ disabled }), mix]}
+        type={type ?? 'button'}
+      >
+        <span>{children}</span>
+        {indicator === null ? null : (
+          <span
+            data-rmx-accordion-indicator=""
+            data-state={item.open ? 'open' : 'closed'}
+            mix={indicatorStyle}
+          >
+            {indicator ?? <ChevronRightIcon />}
+          </span>
+        )}
+      </button>
+    )
+
+    return createElement(headingTag, { mix: headingStyle }, button)
+  }
+}
+
+export function AccordionContent(handle: Handle<AccordionContentProps>): () => RemixNode {
+  return () => {
+    let { children, mix, ...panelProps } = handle.props
+
+    return (
+      <div {...panelProps} mix={[panelStyle, accordion.content(), mix]}>
+        <div mix={accordionPanelClipCss}>
+          <div mix={bodyStyle}>{children}</div>
+        </div>
+      </div>
+    )
+  }
+}