@remix-run/ui 0.2.0 → 0.4.0

package/src/tabs/primitives.ts

@@ -0,0 +1,365 @@
+import {
+  attrs,
+  createMixin,
+  on,
+  ref,
+  type Dispatched,
+  type ElementProps,
+  type Handle,
+  type MixinHandle,
+  type MixinFactory,
+  type RemixNode,
+} from '@remix-run/ui'
+
+const TABS_CHANGE_EVENT = 'rmx:tabs-change' as const
+
+type TabsChangeHandler<target extends HTMLElement> = (
+  event: Dispatched<TabsChangeEvent, target>,
+  signal: AbortSignal,
+) => void | Promise<void>
+
+export type TabsActivationDirection = 'first' | 'last' | 'next' | 'previous'
+
+export interface TabsRegisteredTab {
+  disabled: boolean
+  getTabNode(): HTMLButtonElement | null
+  name: string
+}
+
+export interface TabsContextValue {
+  readonly activeTab: string | null
+  readonly disabled: boolean
+  activateTab(name: string): void
+  activateTabInDirection(name: string, direction: TabsActivationDirection): void
+  getPanelId(name: string): string
+  getTabId(name: string): string
+  isActiveTab(name: string): boolean
+  registerRoot(node: HTMLElement): void
+  registerTab(tab: TabsRegisteredTab): void
+  unregisterRoot(node: HTMLElement): void
+}
+
+export interface TabsContextProps {
+  activeTab?: string
+  children?: RemixNode
+  defaultActiveTab?: string
+  disabled?: boolean
+  onActiveTabChange?: (activeTab: string) => void
+}
+
+export interface TabsRootOptions {}
+
+export interface TabListOptions {}
+
+export interface TabOptions {
+  disabled?: boolean
+  name: string
+}
+
+export interface TabPanelOptions {
+  name: string
+}
+
+export class TabsChangeEvent extends Event {
+  readonly activeTab: string
+  readonly previousActiveTab: string | null
+
+  constructor(activeTab: string, previousActiveTab: string | null) {
+    super(TABS_CHANGE_EVENT, {
+      bubbles: true,
+    })
+    this.activeTab = activeTab
+    this.previousActiveTab = previousActiveTab
+  }
+}
+
+declare global {
+  interface HTMLElementEventMap {
+    [TABS_CHANGE_EVENT]: TabsChangeEvent
+  }
+}
+
+function encodeIdPart(value: string): string {
+  return encodeURIComponent(value).replace(/%/g, '-')
+}
+
+function getTabState(active: boolean): 'active' | 'inactive' {
+  return active ? 'active' : 'inactive'
+}
+
+function getTabsContext(handle: Handle<unknown, unknown> | MixinHandle) {
+  return handle.context.get(TabsProvider)
+}
+
+function TabsProvider(handle: Handle<TabsContextProps, TabsContextValue>): () => RemixNode {
+  let rootNode: HTMLElement | null = null
+  let renderedTabs: TabsRegisteredTab[] = []
+  let uncontrolledActiveTab: string | null = null
+  let hasInitialized = false
+
+  function getActiveTab() {
+    if (handle.props.activeTab !== undefined) {
+      return handle.props.activeTab
+    }
+
+    if (!hasInitialized) {
+      uncontrolledActiveTab = handle.props.defaultActiveTab ?? null
+      hasInitialized = true
+    }
+
+    return uncontrolledActiveTab
+  }
+
+  function getRegisteredTab(name: string) {
+    return renderedTabs.find((tab) => tab.name === name)
+  }
+
+  function dispatchChange(activeTab: string, previousActiveTab: string | null) {
+    rootNode?.dispatchEvent(new TabsChangeEvent(activeTab, previousActiveTab))
+  }
+
+  function activateTab(name: string) {
+    if (handle.props.disabled) {
+      return
+    }
+
+    let tab = getRegisteredTab(name)
+    if (tab?.disabled) {
+      return
+    }
+
+    let previousActiveTab = getActiveTab()
+    if (previousActiveTab === name) {
+      return
+    }
+
+    if (handle.props.activeTab === undefined) {
+      uncontrolledActiveTab = name
+      void handle.update()
+    }
+
+    handle.props.onActiveTabChange?.(name)
+    dispatchChange(name, previousActiveTab)
+  }
+
+  function getFocusableTabs() {
+    return renderedTabs.filter((tab) => !tab.disabled && tab.getTabNode() !== null)
+  }
+
+  function activateTabInDirection(name: string, direction: TabsActivationDirection) {
+    let tabs = getFocusableTabs()
+    if (tabs.length === 0) {
+      return
+    }
+
+    let currentIndex = tabs.findIndex((tab) => tab.name === name)
+    let targetIndex = 0
+
+    switch (direction) {
+      case 'first':
+        targetIndex = 0
+        break
+      case 'last':
+        targetIndex = tabs.length - 1
+        break
+      case 'previous':
+        targetIndex = currentIndex <= 0 ? tabs.length - 1 : currentIndex - 1
+        break
+      case 'next':
+        targetIndex = currentIndex === -1 || currentIndex === tabs.length - 1 ? 0 : currentIndex + 1
+        break
+    }
+
+    let targetTab = tabs[targetIndex]
+    targetTab?.getTabNode()?.focus()
+    if (targetTab) {
+      activateTab(targetTab.name)
+    }
+  }
+
+  function getTabId(name: string) {
+    return `${handle.id}-${encodeIdPart(name)}-tab`
+  }
+
+  function getPanelId(name: string) {
+    return `${handle.id}-${encodeIdPart(name)}-panel`
+  }
+
+  function registerTab(tab: TabsRegisteredTab) {
+    renderedTabs.push(tab)
+
+    if (handle.props.activeTab === undefined && getActiveTab() === null && !tab.disabled) {
+      uncontrolledActiveTab = tab.name
+    }
+  }
+
+  handle.context.set({
+    get activeTab() {
+      return getActiveTab()
+    },
+    get disabled() {
+      return handle.props.disabled ?? false
+    },
+    activateTab,
+    activateTabInDirection,
+    getPanelId,
+    getTabId,
+    isActiveTab(name) {
+      return getActiveTab() === name
+    },
+    registerRoot(node) {
+      rootNode = node
+    },
+    registerTab,
+    unregisterRoot(node) {
+      if (rootNode === node) {
+        rootNode = null
+      }
+    },
+  })
+
+  return () => {
+    renderedTabs = []
+    return handle.props.children
+  }
+}
+
+const rootMixin: MixinFactory<HTMLElement, [options?: TabsRootOptions], ElementProps> = createMixin<
+  HTMLElement,
+  [options?: TabsRootOptions],
+  ElementProps
+>((handle) => {
+  let context = getTabsContext(handle)
+
+  handle.queueTask((node, signal) => {
+    context.registerRoot(node)
+    signal.addEventListener('abort', () => {
+      context.unregisterRoot(node)
+    })
+  })
+
+  return () =>
+    attrs({
+      'data-disabled': context.disabled ? '' : undefined,
+    })
+})
+
+const listMixin: MixinFactory<HTMLElement, [options?: TabListOptions], ElementProps> = createMixin<
+  HTMLElement,
+  [options?: TabListOptions],
+  ElementProps
+>((handle) => {
+  let context = getTabsContext(handle)
+
+  return () =>
+    attrs({
+      'aria-disabled': context.disabled ? true : undefined,
+      role: 'tablist',
+    })
+})
+
+const tabMixin: MixinFactory<HTMLButtonElement, [options: TabOptions], ElementProps> = createMixin<
+  HTMLButtonElement,
+  [options: TabOptions],
+  ElementProps
+>((handle, hostType) => {
+  let context = getTabsContext(handle)
+  let tabNode: HTMLButtonElement | null = null
+
+  return (options, props) => {
+    let disabled = context.disabled || options.disabled === true || props.disabled === true
+
+    context.registerTab({
+      disabled,
+      getTabNode: () => tabNode,
+      name: options.name,
+    })
+
+    let active = context.isActiveTab(options.name)
+
+    return [
+      attrs({
+        'aria-controls': context.getPanelId(options.name),
+        'aria-selected': active ? 'true' : 'false',
+        'data-state': getTabState(active),
+        disabled: disabled ? true : undefined,
+        id: context.getTabId(options.name),
+        role: 'tab',
+        tabIndex: active && !disabled ? 0 : -1,
+        type: hostType === 'button' ? 'button' : undefined,
+      }),
+      ref((node: HTMLButtonElement, signal) => {
+        tabNode = node
+        signal.addEventListener('abort', () => {
+          if (tabNode === node) {
+            tabNode = null
+          }
+        })
+      }),
+      on('click', () => {
+        context.activateTab(options.name)
+      }),
+      on('keydown', (event) => {
+        switch (event.key) {
+          case 'ArrowDown':
+          case 'ArrowRight':
+            event.preventDefault()
+            context.activateTabInDirection(options.name, 'next')
+            break
+          case 'ArrowUp':
+          case 'ArrowLeft':
+            event.preventDefault()
+            context.activateTabInDirection(options.name, 'previous')
+            break
+          case 'Home':
+            event.preventDefault()
+            context.activateTabInDirection(options.name, 'first')
+            break
+          case 'End':
+            event.preventDefault()
+            context.activateTabInDirection(options.name, 'last')
+            break
+          case 'Enter':
+          case ' ':
+            event.preventDefault()
+            context.activateTab(options.name)
+            break
+        }
+      }),
+    ]
+  }
+})
+
+const panelMixin: MixinFactory<HTMLElement, [options: TabPanelOptions], ElementProps> = createMixin<
+  HTMLElement,
+  [options: TabPanelOptions],
+  ElementProps
+>((handle) => {
+  let context = getTabsContext(handle)
+
+  return (options) => {
+    let active = context.isActiveTab(options.name)
+
+    return attrs({
+      'aria-labelledby': context.getTabId(options.name),
+      'data-state': getTabState(active),
+      hidden: active ? undefined : true,
+      id: context.getPanelId(options.name),
+      inert: active ? undefined : true,
+      role: 'tabpanel',
+    })
+  }
+})
+
+export const Context = TabsProvider
+export const list = listMixin
+export const panel = panelMixin
+export const root = rootMixin
+export const tab = tabMixin
+
+export function onTabsChange<target extends HTMLElement>(
+  handler: TabsChangeHandler<target>,
+  captureBoolean?: boolean,
+): ReturnType<typeof on<target, typeof TABS_CHANGE_EVENT>> {
+  return on(TABS_CHANGE_EVENT, handler, captureBoolean)
+}

package/src/toggle/README.md

@@ -0,0 +1,56 @@
+# toggle
+
+`toggle` is a style mixin for checkbox inputs rendered as switches. Use native input props for normal form behavior, and compose it with `remix/ui/toggle/primitives` when you need the headless toggle state helpers or custom hosts.
+
+## Usage
+
+```tsx
+import toggle from 'remix/ui/toggle'
+
+function NotificationSetting() {
+  return () => (
+    <label>
+      <input mix={toggle({ size: 'lg' })} defaultChecked />
+      Email notifications
+    </label>
+  )
+}
+```
+
+## Primitive Usage
+
+Use the lower-level primitive when app code needs normalized checked state, toggle change events, or a non-input host:
+
+```tsx
+import toggle from 'remix/ui/toggle'
+import * as togglePrimitive from 'remix/ui/toggle/primitives'
+
+function CustomToggle() {
+  return () => (
+    <button
+      aria-label="Notifications"
+      mix={[...toggle(), togglePrimitive.control({ defaultChecked: true })]}
+    />
+  )
+}
+```
+
+## `remix/ui/toggle`
+
+- `toggle(options)`: styles a native checkbox input as a switch and supplies `type="checkbox"` plus `role="switch"` when the host is an `<input>` without an explicit non-checkbox `type`. Supports `size: 'md' | 'lg'` and defaults to `'md'`.
+- `onToggleChange(handler)`: re-exported primitive event mixin.
+- `ToggleChangeEvent`: re-exported primitive event class.
+- `ToggleSize` and `ToggleOptions`: public TypeScript types for the style mixin.
+
+## `remix/ui/toggle/primitives`
+
+- `control(options)`: wires a boolean switch control with checked state, ARIA, keyboard, and native input behavior.
+- `onToggleChange(handler)`: event mixin for bubbling toggle changes.
+- `ToggleChangeEvent`: event class dispatched when a toggle changes.
+- `ToggleControlOptions`: primitive options for controlled and uncontrolled state.
+
+## Behavior Notes
+
+- Checked styles apply through `:checked`, `[aria-checked="true"]`, or `[data-state="checked"]`.
+- Native checkbox switches use the native `checked` attribute for state. Custom hosts use `role="switch"` and `aria-checked="true"` or `aria-checked="false"`.
+- Every switch needs an accessible name, usually from visible label text, `aria-label`, or `aria-labelledby`.

package/src/toggle/index.tsx

@@ -0,0 +1,134 @@
+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 { ToggleChangeEvent, onToggleChange } from '@remix-run/ui/toggle/primitives'
+
+export type ToggleSize = 'md' | 'lg'
+
+export interface ToggleOptions {
+  size?: ToggleSize
+}
+
+type ToggleMixin = readonly [MixinDescriptor<Element, [], ElementProps>, CSSMixinDescriptor]
+
+const checkedSelector = '&:checked, &[aria-checked="true"], &[data-state="checked"]'
+const checkedThumbSelector =
+  '&:checked::before, &[aria-checked="true"]::before, &[data-state="checked"]::before'
+const uncheckedThumbBackground =
+  'linear-gradient(180deg, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.04) 100%), #FFFFFF'
+const uncheckedThumbShadow =
+  '0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.12), 0 2px 2px -1px rgba(0, 0, 0, 0.12), 0 4px 4px -2px rgba(0, 0, 0, 0.12), inset 0 0 2px 1px #FFFFFF'
+const checkedThumbBackground =
+  'linear-gradient(180deg, rgba(112, 199, 84, 0) 25%, rgba(112, 199, 84, 0.25) 100%), #FFFFFF'
+const checkedThumbShadow =
+  '0 1px 2px -0.5px rgba(66, 134, 44, 0.6), 0 2px 4px -1px rgba(66, 134, 44, 0.6), 0 4px 6px -2px rgba(66, 134, 44, 0.6), 0 0 0 0.5px rgba(0, 0, 0, 0.28), inset 0 0 2px 1px #FFFFFF'
+
+const toggleDefaultAttrs = createMixin<Element, [], ElementProps>((handle, hostType) => (props) => {
+  if (hostType !== 'input') {
+    return handle.element
+  }
+
+  let type = props.type ?? 'checkbox'
+  if (type !== 'checkbox') {
+    return renderMixinElement(handle.element, {
+      ...props,
+      type,
+    })
+  }
+
+  return renderMixinElement(handle.element, {
+    ...props,
+    role: props.role ?? 'switch',
+    type,
+  })
+})()
+
+const baseStyles = {
+  appearance: 'none',
+  WebkitAppearance: 'none',
+  margin: 0,
+  boxSizing: 'border-box',
+  position: 'relative',
+  display: 'inline-block',
+  width: 'var(--rmx-toggle-width)',
+  height: 'var(--rmx-toggle-height)',
+  minWidth: 'var(--rmx-toggle-width)',
+  minHeight: 'var(--rmx-toggle-height)',
+  padding: 0,
+  border: 0,
+  borderRadius: '9999px',
+  background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0) 100%), #EBEBEB',
+  boxShadow:
+    'inset 0 0 4px 1px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(0, 0, 0, 0.02), inset 0 2px 2px rgba(0, 0, 0, 0.02)',
+  verticalAlign: 'middle',
+  flex: 'none',
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    left: 'var(--rmx-toggle-thumb-inset)',
+    top: 'calc((var(--rmx-toggle-height) - var(--rmx-toggle-thumb-height)) / 2)',
+    width: 'var(--rmx-toggle-thumb-width)',
+    height: 'var(--rmx-toggle-thumb-height)',
+    borderRadius: '99px',
+    background: uncheckedThumbBackground,
+    boxShadow: uncheckedThumbShadow,
+    transform: 'translateX(0)',
+    transition: 'transform 160ms ease, background 160ms ease, box-shadow 160ms ease',
+    pointerEvents: 'none',
+  },
+  '&:disabled, &[aria-disabled="true"]': {
+    opacity: 0.55,
+  },
+  [checkedSelector]: {
+    background: 'linear-gradient(180deg, #70C754 0%, #70C754 100%)',
+    boxShadow:
+      '0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.4), 0 -4px 8px 2px #FFFFFF, 0 4px 8px 2px rgba(0, 0, 0, 0.05), 0 0 12px 1px rgba(112, 199, 84, 0.25), inset 0 0 4px 1px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 2px 2px rgba(0, 0, 0, 0.1)',
+  },
+  [checkedThumbSelector]: {
+    background: checkedThumbBackground,
+    boxShadow: checkedThumbShadow,
+    transform: 'translateX(var(--rmx-toggle-thumb-translate-x))',
+  },
+  '&:focus-visible': {
+    outline: 0,
+    boxShadow: controlFocusShadow,
+  },
+  '@media (prefers-reduced-motion: reduce)': {
+    '&::before': {
+      transition: 'none',
+    },
+  },
+}
+
+const thumbTranslate =
+  'calc(var(--rmx-toggle-width) - var(--rmx-toggle-thumb-width) - (var(--rmx-toggle-thumb-inset) * 2))'
+
+const sizeStyles = {
+  md: css({
+    '--rmx-toggle-width': '30px',
+    '--rmx-toggle-height': '18px',
+    '--rmx-toggle-thumb-width': '18px',
+    '--rmx-toggle-thumb-height': '14px',
+    '--rmx-toggle-thumb-inset': '2px',
+    '--rmx-toggle-thumb-translate-x': thumbTranslate,
+    ...baseStyles,
+  }),
+  lg: css({
+    '--rmx-toggle-width': '36px',
+    '--rmx-toggle-height': '22px',
+    '--rmx-toggle-thumb-width': '22px',
+    '--rmx-toggle-thumb-height': '18px',
+    '--rmx-toggle-thumb-inset': '2px',
+    '--rmx-toggle-thumb-translate-x': thumbTranslate,
+    ...baseStyles,
+  }),
+} as const satisfies Record<ToggleSize, CSSMixinDescriptor>
+
+export function toggle(options: ToggleOptions = {}): ToggleMixin {
+  let { size = 'md' } = options
+  return [toggleDefaultAttrs, sizeStyles[size]]
+}
+
+export default toggle