@remix-run/ui 0.0.0 → 0.1.0

package/src/animation/tween.ts

@@ -0,0 +1,134 @@
+/**
+ * Attempt to find the t value for a given x on a cubic bezier curve.
+ * Uses Newton-Raphson iteration for fast convergence.
+ * @param x1 First control point x coordinate
+ * @param x2 Second control point x coordinate
+ * @param targetX The x value to solve for
+ * @returns The t parameter value
+ */
+function solveCubicBezierX(x1: number, x2: number, targetX: number): number {
+  // Initial guess
+  let t = targetX
+
+  // Newton-Raphson iteration (usually converges in 4-8 iterations)
+  for (let i = 0; i < 8; i++) {
+    let currentX = cubicBezier(t, x1, x2)
+    let slope = cubicBezierDerivative(t, x1, x2)
+
+    if (Math.abs(slope) < 1e-6) break
+
+    let error = currentX - targetX
+    if (Math.abs(error) < 1e-6) break
+
+    t -= error / slope
+  }
+
+  return Math.max(0, Math.min(1, t))
+}
+
+/**
+ * Compute the value of a cubic bezier at parameter t.
+ * For CSS-style beziers, start is (0,0) and end is (1,1),
+ * so we only need the two middle control point coordinates.
+ * @param t The parameter value (0 to 1)
+ * @param p1 First control point coordinate
+ * @param p2 Second control point coordinate
+ * @returns The bezier value at t
+ */
+function cubicBezier(t: number, p1: number, p2: number): number {
+  // B(t) = 3(1-t)²t·p1 + 3(1-t)t²·p2 + t³
+  let oneMinusT = 1 - t
+  return 3 * oneMinusT * oneMinusT * t * p1 + 3 * oneMinusT * t * t * p2 + t * t * t
+}
+
+/**
+ * Derivative of the cubic bezier function.
+ * @param t The parameter value (0 to 1)
+ * @param p1 First control point coordinate
+ * @param p2 Second control point coordinate
+ * @returns The derivative of the bezier at t
+ */
+function cubicBezierDerivative(t: number, p1: number, p2: number): number {
+  // B'(t) = 3(1-t)²·p1 + 6(1-t)t·(p2-p1) + 3t²·(1-p2)
+  let oneMinusT = 1 - t
+  return 3 * oneMinusT * oneMinusT * p1 + 6 * oneMinusT * t * (p2 - p1) + 3 * t * t * (1 - p2)
+}
+
+/**
+ * Cubic-bezier control points used by {@link tween}.
+ */
+export interface BezierCurve {
+  /** First control point x coordinate. */
+  x1: number
+  /** First control point y coordinate. */
+  y1: number
+  /** Second control point x coordinate. */
+  x2: number
+  /** Second control point y coordinate. */
+  y2: number
+}
+
+// Common easing presets
+/**
+ * Common cubic-bezier presets for {@link tween}.
+ */
+export const easings = {
+  linear: { x1: 0, y1: 0, x2: 1, y2: 1 },
+  ease: { x1: 0.25, y1: 0.1, x2: 0.25, y2: 1 },
+  easeIn: { x1: 0.42, y1: 0, x2: 1, y2: 1 },
+  easeOut: { x1: 0, y1: 0, x2: 0.58, y2: 1 },
+  easeInOut: { x1: 0.42, y1: 0, x2: 0.58, y2: 1 },
+} as const
+
+/**
+ * Options for generating tweened values over time.
+ */
+export interface TweenOptions {
+  /** Starting value for the tween. */
+  from: number
+  /** Ending value for the tween. */
+  to: number
+  /** Total tween duration in milliseconds. */
+  duration: number
+  /** Cubic-bezier curve used to shape the interpolation. */
+  curve: BezierCurve
+}
+
+/**
+ * Generator that tweens a value over time using a cubic bezier curve.
+ * Yields the current value on each frame. Use the iterator's `done` property
+ * to check if the animation is complete.
+ * @param options The tween configuration
+ * @yields The current tweened value
+ * @returns The final value
+ */
+export function* tween(options: TweenOptions): Generator<number, number, number> {
+  let { from, to, duration, curve } = options
+  let { x1, y1, x2, y2 } = curve
+
+  let startTime: number | null = null
+  let value = from
+
+  while (true) {
+    // Yield current value and receive the next timestamp
+    let timestamp: number = yield value
+
+    if (startTime === null) {
+      startTime = timestamp
+    }
+
+    let elapsed = timestamp - startTime
+    let linearProgress = Math.min(elapsed / duration, 1)
+
+    // Map linear progress through the bezier curve
+    // x-axis = time, y-axis = value
+    let t = solveCubicBezierX(x1, x2, linearProgress)
+    let easedProgress = cubicBezier(t, y1, y2)
+
+    value = from + (to - from) * easedProgress
+
+    if (linearProgress >= 1) {
+      return to
+    }
+  }
+}

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,565 @@
+// @jsxRuntime classic
+// @jsx createElement
+import {
+  css,
+  createElement,
+  on,
+  ref,
+  type CSSMixinDescriptor,
+  type Handle,
+  type Props,
+  type RemixNode,
+} from '@remix-run/ui'
+
+import { spring } from '@remix-run/ui/animation'
+import { Glyph } from '../glyph/glyph.tsx'
+import { theme } from '../../theme/theme.ts'
+
+const ACCORDION_CHANGE_EVENT = 'rmx:accordion-change' as const
+
+type AccordionChangeHandler = (
+  event: AccordionChangeEvent,
+  signal: AbortSignal,
+) => void | Promise<void>
+
+declare global {
+  interface HTMLElementEventMap {
+    [ACCORDION_CHANGE_EVENT]: AccordionChangeEvent
+  }
+}
+
+export class AccordionChangeEvent extends Event {
+  accordionType: AccordionType
+  itemValue: string
+  value: string | null | string[]
+
+  constructor(
+    value: string | null | string[],
+    init: {
+      accordionType: AccordionType
+      itemValue: string
+    },
+  ) {
+    super(ACCORDION_CHANGE_EVENT, {
+      bubbles: true,
+    })
+    this.accordionType = init.accordionType
+    this.itemValue = init.itemValue
+    this.value = value
+  }
+}
+
+type AccordionType = 'single' | 'multiple'
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6
+
+type AccordionBaseProps = Omit<Props<'div'>, 'children'> & {
+  children?: RemixNode
+  disabled?: boolean
+  headingLevel?: HeadingLevel
+}
+
+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
+}
+
+type RegisteredItem = {
+  disabled: boolean
+  getTriggerNode(): HTMLButtonElement | null
+  value: string
+}
+
+type AccordionContext = {
+  collapsible: boolean
+  disabled: boolean
+  focusItem(value: string, direction: FocusDirection): void
+  getPanelId(value: string): string | undefined
+  getTriggerId(value: string): string | undefined
+  headingLevel: HeadingLevel
+  isOpen(value: string): boolean
+  registerItem(item: RegisteredItem): void
+  toggleItem(value: string): void
+  type: AccordionType
+}
+
+type AccordionItemContext = {
+  disabled: boolean
+  headingLevel: HeadingLevel
+  lockedOpen: boolean
+  open: boolean
+  panelId: string
+  setTriggerNode(node: HTMLButtonElement | null): void
+  triggerId: string
+  value: string
+}
+
+type FocusDirection = 'first' | 'last' | 'next' | 'previous'
+
+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 accordionTriggerCss: CSSMixinDescriptor = css({
+  all: 'unset',
+  boxSizing: 'border-box',
+  cursor: 'revert',
+  display: 'grid',
+  gridTemplateColumns: 'minmax(0, 1fr) auto',
+  alignItems: 'center',
+  gap: theme.space.md,
+  width: '100%',
+  minHeight: theme.control.height.lg,
+  padding: `${theme.space.md} 0`,
+  color: theme.colors.text.primary,
+  fontFamily: theme.fontFamily.sans,
+  fontSize: theme.fontSize.sm,
+  lineHeight: theme.lineHeight.normal,
+  fontWeight: theme.fontWeight.medium,
+  textAlign: 'left',
+  '&:hover:not(:disabled)': {
+    backgroundColor: theme.surface.lvl1,
+  },
+  '&:focus-visible': {
+    outline: `2px solid ${theme.colors.focus.ring}`,
+    outlineOffset: '2px',
+  },
+  '&:disabled': {
+    opacity: 0.55,
+  },
+  '& > span:first-child': {
+    minWidth: 0,
+  },
+})
+
+const accordionIndicatorCss: CSSMixinDescriptor = css({
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: theme.fontSize.sm,
+  height: theme.fontSize.sm,
+  color: theme.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: theme.space.md,
+  color: theme.colors.text.secondary,
+  fontSize: theme.fontSize.sm,
+  lineHeight: theme.lineHeight.relaxed,
+  '& > :first-child': {
+    marginTop: 0,
+  },
+  '& > :last-child': {
+    marginBottom: 0,
+  },
+})
+
+export const rootStyle = accordionRootCss
+export const itemStyle = accordionItemCss
+export const triggerStyle = accordionTriggerCss
+export const indicatorStyle = accordionIndicatorCss
+export const panelStyle = accordionPanelCss
+export const bodyStyle = accordionBodyCss
+
+function isMultipleProps(props: AccordionProps | null): props is AccordionMultipleProps {
+  return props?.type === 'multiple'
+}
+
+function AccordionImpl(handle: Handle<AccordionProps, AccordionContext>) {
+  let rootNode: HTMLElement | null = null
+  let registeredItems: RegisteredItem[] = []
+  let uncontrolledSingleValue: string | null = null
+  let uncontrolledMultipleValue: string[] = []
+  let hasInitializedSingle = false
+  let hasInitializedMultiple = false
+
+  let getType = () => (isMultipleProps(handle.props) ? 'multiple' : 'single')
+
+  let getSingleValue = () => {
+    if (isMultipleProps(handle.props)) {
+      return null
+    }
+
+    if (handle.props.value !== undefined) {
+      return handle.props.value
+    }
+
+    if (!hasInitializedSingle) {
+      uncontrolledSingleValue = handle.props.defaultValue ?? null
+      hasInitializedSingle = true
+    }
+
+    return uncontrolledSingleValue
+  }
+
+  let getMultipleValue = () => {
+    if (!isMultipleProps(handle.props)) {
+      return []
+    }
+
+    if (handle.props.value !== undefined) {
+      return handle.props.value
+    }
+
+    if (!hasInitializedMultiple) {
+      uncontrolledMultipleValue = [...(handle.props.defaultValue ?? [])]
+      hasInitializedMultiple = true
+    }
+
+    return uncontrolledMultipleValue
+  }
+
+  let isOpen = (value: string) => {
+    if (getType() === 'multiple') {
+      return getMultipleValue().includes(value)
+    }
+
+    return getSingleValue() === value
+  }
+
+  let dispatchChange = (itemValue: string, value: string | null | string[]) => {
+    rootNode?.dispatchEvent(
+      new AccordionChangeEvent(value, {
+        accordionType: getType(),
+        itemValue,
+      }),
+    )
+  }
+
+  let toggleItem = (itemValue: string) => {
+    if (handle.props.disabled) {
+      return
+    }
+
+    if (isMultipleProps(handle.props)) {
+      let currentValue = getMultipleValue()
+      let nextValue = currentValue.includes(itemValue)
+        ? currentValue.filter((value) => value !== itemValue)
+        : [...currentValue, itemValue]
+
+      if (handle.props.value === undefined) {
+        uncontrolledMultipleValue = nextValue
+        void handle.update()
+      }
+
+      handle.props.onValueChange?.(nextValue)
+      dispatchChange(itemValue, nextValue)
+      return
+    }
+
+    let isCurrentItemOpen = getSingleValue() === itemValue
+    if (isCurrentItemOpen && !(handle.props.collapsible ?? true)) {
+      return
+    }
+
+    let nextValue = isCurrentItemOpen ? null : itemValue
+
+    if (handle.props.value === undefined) {
+      uncontrolledSingleValue = nextValue
+      void handle.update()
+    }
+
+    handle.props.onValueChange?.(nextValue)
+    dispatchChange(itemValue, nextValue)
+  }
+
+  let focusItem = (itemValue: string, direction: FocusDirection) => {
+    let items = registeredItems.filter((item) => !item.disabled && item.getTriggerNode() !== null)
+    if (items.length === 0) {
+      return
+    }
+
+    let currentIndex = items.findIndex((item) => item.value === itemValue)
+    let targetIndex = 0
+
+    switch (direction) {
+      case 'first':
+        targetIndex = 0
+        break
+      case 'last':
+        targetIndex = items.length - 1
+        break
+      case 'previous':
+        targetIndex = currentIndex <= 0 ? items.length - 1 : currentIndex - 1
+        break
+      case 'next':
+        targetIndex =
+          currentIndex === -1 || currentIndex === items.length - 1 ? 0 : currentIndex + 1
+        break
+    }
+
+    items[targetIndex]?.getTriggerNode()?.focus()
+  }
+
+  let registerItem = (item: RegisteredItem) => {
+    registeredItems.push(item)
+  }
+
+  let getTriggerId = (value: string) =>
+    registeredItems.find((item) => item.value === value)?.getTriggerNode()?.id
+
+  let getPanelId = (value: string) => `${handle.id}-${value}-panel`
+
+  return () => {
+    let collapsible = 'collapsible' in handle.props ? handle.props.collapsible : undefined
+    let {
+      children,
+      defaultValue,
+      disabled,
+      headingLevel,
+      mix,
+      onValueChange,
+      type,
+      value,
+      ...divProps
+    } = handle.props
+    void defaultValue
+    void onValueChange
+    void value
+    registeredItems = []
+
+    handle.context.set({
+      collapsible: type === 'multiple' ? true : (collapsible ?? true),
+      disabled: disabled ?? false,
+      focusItem,
+      getPanelId,
+      getTriggerId,
+      headingLevel: headingLevel ?? 3,
+      isOpen,
+      registerItem,
+      toggleItem,
+      type: type ?? 'single',
+    })
+
+    return (
+      <div
+        {...divProps}
+        data-disabled={disabled ? '' : undefined}
+        data-type={type ?? 'single'}
+        mix={[
+          rootStyle,
+          ref((node) => {
+            rootNode = node as HTMLElement
+          }),
+          ...(mix ?? []),
+        ]}
+      >
+        {children}
+      </div>
+    )
+  }
+}
+
+export function onAccordionChange(handler: AccordionChangeHandler, captureBoolean?: boolean) {
+  return on<HTMLElement, typeof ACCORDION_CHANGE_EVENT>(
+    ACCORDION_CHANGE_EVENT,
+    handler,
+    captureBoolean,
+  )
+}
+
+export const Accordion = AccordionImpl
+
+export function AccordionItem(handle: Handle<AccordionItemProps, AccordionItemContext>) {
+  let triggerNode: HTMLButtonElement | null = null
+  let triggerId = `${handle.id}-trigger`
+  let panelId = `${handle.id}-panel`
+
+  return () => {
+    let { children, disabled: itemDisabled, mix, value, ...divProps } = handle.props
+    let accordion = handle.context.get(Accordion)
+    let disabled = accordion.disabled || itemDisabled === true
+    let open = accordion.isOpen(value)
+    let lockedOpen = accordion.type === 'single' && !accordion.collapsible && open
+
+    accordion.registerItem({
+      disabled,
+      getTriggerNode: () => triggerNode,
+      value,
+    })
+
+    handle.context.set({
+      disabled,
+      headingLevel: accordion.headingLevel,
+      lockedOpen,
+      open,
+      panelId,
+      setTriggerNode(node) {
+        triggerNode = node
+      },
+      triggerId,
+      value,
+    })
+
+    return (
+      <div
+        {...divProps}
+        data-disabled={disabled ? '' : undefined}
+        data-state={open ? 'open' : 'closed'}
+        mix={[itemStyle, ...(mix ?? [])]}
+      >
+        {children}
+      </div>
+    )
+  }
+}
+
+export function AccordionTrigger(handle: Handle<AccordionTriggerProps>) {
+  return () => {
+    let accordion = handle.context.get(Accordion)
+    let item = handle.context.get(AccordionItem)
+    let headingTag = `h${item.headingLevel}` as keyof JSX.IntrinsicElements
+    let { children, indicator, mix, type, ...buttonProps } = handle.props
+    let disabled = item.disabled || handle.props.disabled === true
+    let toggleItem = () => {
+      if (disabled || item.lockedOpen) {
+        return
+      }
+
+      accordion.toggleItem(item.value)
+    }
+
+    let button = (
+      <button
+        {...buttonProps}
+        aria-controls={item.panelId}
+        aria-disabled={item.lockedOpen ? true : undefined}
+        aria-expanded={item.open}
+        data-state={item.open ? 'open' : 'closed'}
+        disabled={disabled ? true : undefined}
+        id={item.triggerId}
+        mix={[
+          triggerStyle,
+          ref((node) => {
+            item.setTriggerNode(node as HTMLButtonElement)
+          }),
+          on('click', toggleItem),
+          on('keydown', (event) => {
+            switch (event.key) {
+              case 'ArrowDown':
+                event.preventDefault()
+                accordion.focusItem(item.value, 'next')
+                break
+              case 'ArrowUp':
+                event.preventDefault()
+                accordion.focusItem(item.value, 'previous')
+                break
+              case 'Home':
+                event.preventDefault()
+                accordion.focusItem(item.value, 'first')
+                break
+              case 'End':
+                event.preventDefault()
+                accordion.focusItem(item.value, 'last')
+                break
+            }
+          }),
+          mix,
+        ]}
+        type={type ?? 'button'}
+      >
+        <span>{children}</span>
+        {indicator === null ? null : (
+          <span
+            data-rmx-accordion-indicator=""
+            data-state={item.open ? 'open' : 'closed'}
+            mix={indicatorStyle}
+          >
+            {indicator ?? <Glyph name="chevronRight" />}
+          </span>
+        )}
+      </button>
+    )
+
+    return createElement(headingTag, {}, button)
+  }
+}
+
+export function AccordionContent(handle: Handle<AccordionContentProps>) {
+  return () => {
+    let item = handle.context.get(AccordionItem)
+    let { children, mix, ...panelProps } = handle.props
+
+    return (
+      <div
+        {...panelProps}
+        aria-hidden={item.open ? undefined : true}
+        aria-labelledby={item.triggerId}
+        data-state={item.open ? 'open' : 'closed'}
+        id={item.panelId}
+        inert={item.open ? undefined : true}
+        mix={[panelStyle, mix ?? []]}
+      >
+        <div mix={accordionPanelClipCss}>
+          <div mix={bodyStyle}>{children}</div>
+        </div>
+      </div>
+    )
+  }
+}