@remix-run/ui 0.3.0 → 0.4.0

package/src/tabs/index.tsx

@@ -0,0 +1,244 @@
+import {
+  css,
+  type CSSMixinDescriptor,
+  type Handle,
+  type Props,
+  type RemixNode,
+} from '@remix-run/ui'
+import * as tabs from '@remix-run/ui/tabs/primitives'
+
+export { TabsChangeEvent, onTabsChange } from '@remix-run/ui/tabs/primitives'
+
+export type TabsSize = 'md' | 'lg'
+
+export interface TabsProps extends Omit<Props<'div'>, 'children'> {
+  activeTab?: string
+  children?: RemixNode
+  defaultActiveTab?: string
+  disabled?: boolean
+  onActiveTabChange?: (activeTab: string) => void
+  size?: TabsSize
+}
+
+export interface TabListProps extends Omit<Props<'div'>, 'children'> {
+  children?: RemixNode
+}
+
+export interface TabProps extends Omit<Props<'button'>, 'children' | 'type'> {
+  children?: RemixNode
+  disabled?: boolean
+  name: string
+  type?: 'button' | 'submit' | 'reset'
+}
+
+export interface TabPanelProps extends Omit<Props<'div'>, 'children'> {
+  children?: RemixNode
+  name: string
+}
+
+const tabSliderBackground =
+  'linear-gradient(180deg, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.04) 100%), #FFFFFF'
+const tabSliderShadow =
+  '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 tabsRootCss: CSSMixinDescriptor = css({
+  '--rmx-tabs-height': '32px',
+  '--rmx-tabs-track-padding': '2px',
+  '--rmx-tabs-tab-padding-inline': '12px',
+  '--rmx-tabs-tab-shadow': '0 0 0 0 rgba(0, 0, 0, 0)',
+  '--rmx-tabs-tab-font-size': '12px',
+  '--rmx-tabs-tab-line-height': '17px',
+  '--rmx-tabs-gap': '12px',
+  boxSizing: 'border-box',
+  display: 'grid',
+  gap: 'var(--rmx-tabs-gap)',
+  minWidth: 0,
+})
+
+const tabsListCss: CSSMixinDescriptor = css({
+  boxSizing: 'border-box',
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: '2px',
+  width: 'max-content',
+  maxWidth: '100%',
+  minHeight: 'var(--rmx-tabs-height)',
+  padding: 'var(--rmx-tabs-track-padding)',
+  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)',
+  overflowX: 'auto',
+  scrollbarWidth: 'none',
+  '&::-webkit-scrollbar': {
+    display: 'none',
+  },
+  '&[aria-disabled="true"]': {
+    opacity: 0.55,
+  },
+})
+
+const tabsTabCss: CSSMixinDescriptor = css({
+  '--rmx-tabs-tab-focus-shadow':
+    '0 0 0 1px #3573F6, var(--rmx-tabs-tab-shadow), 0 0 0 4px rgba(53, 115, 246, 0.1), 0 6px 32px 4px rgba(53, 115, 246, 0.08), inset 0 0 8px 1px rgba(53, 115, 246, 0.05)',
+  appearance: 'none',
+  margin: 0,
+  boxSizing: 'border-box',
+  position: 'relative',
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'row',
+  gap: '4px',
+  width: 'max-content',
+  maxWidth: '100%',
+  minWidth: 0,
+  height: 'calc(var(--rmx-tabs-height) - (var(--rmx-tabs-track-padding) * 2))',
+  minHeight: 'calc(var(--rmx-tabs-height) - (var(--rmx-tabs-track-padding) * 2))',
+  paddingBlock: 0,
+  paddingInline: 'var(--rmx-tabs-tab-padding-inline)',
+  border: 0,
+  borderRadius: '999px',
+  background: 'transparent',
+  boxShadow: 'var(--rmx-tabs-tab-shadow)',
+  color: '#707070',
+  fontFamily: '"Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif',
+  fontStyle: 'normal',
+  fontWeight: 500,
+  fontSize: 'var(--rmx-tabs-tab-font-size)',
+  lineHeight: 'var(--rmx-tabs-tab-line-height)',
+  fontFeatureSettings: '"ss01" on, "cv01" on',
+  letterSpacing: 0,
+  textAlign: 'center',
+  textDecoration: 'none',
+  textShadow: 'none',
+  userSelect: 'none',
+  WebkitUserSelect: 'none',
+  verticalAlign: 'top',
+  whiteSpace: 'nowrap',
+  '&[data-state="inactive"]:hover:not(:disabled):not([aria-disabled="true"])': {
+    background: 'rgba(16, 16, 16, 0.05)',
+    color: '#101010',
+  },
+  '&[data-state="inactive"]:active:not(:disabled):not([aria-disabled="true"])': {
+    background: 'rgba(16, 16, 16, 0.08)',
+  },
+  '&[data-state="active"]': {
+    background: tabSliderBackground,
+    '--rmx-tabs-tab-shadow': tabSliderShadow,
+    color: '#101010',
+    textShadow: '0 1px 0 #FFFFFF',
+  },
+  '&[data-state="active"]:hover:not(:disabled):not([aria-disabled="true"])': {
+    background: tabSliderBackground,
+  },
+  '&[data-state="active"]:active:not(:disabled):not([aria-disabled="true"])': {
+    background: tabSliderBackground,
+  },
+  '&:disabled, &[aria-disabled="true"]': {
+    cursor: 'not-allowed',
+    opacity: 0.55,
+  },
+  '&:focus-visible': {
+    outline: 0,
+    boxShadow: 'var(--rmx-tabs-tab-focus-shadow)',
+  },
+})
+
+const tabsPanelCss: CSSMixinDescriptor = css({
+  minWidth: 0,
+  color: '#101010',
+  fontFamily: '"Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif',
+  fontSize: '13px',
+  lineHeight: '20px',
+  letterSpacing: 0,
+  '&[hidden]': {
+    display: 'none',
+  },
+})
+
+const sizeStyles = {
+  md: css({}),
+  lg: css({
+    '--rmx-tabs-height': '36px',
+    '--rmx-tabs-tab-padding-inline': '14px',
+    '--rmx-tabs-tab-font-size': '13px',
+    '--rmx-tabs-tab-line-height': '20px',
+    '--rmx-tabs-gap': '14px',
+  }),
+} as const satisfies Record<TabsSize, CSSMixinDescriptor>
+
+export const rootStyle = tabsRootCss
+export const listStyle = tabsListCss
+export const tabStyle = tabsTabCss
+export const panelStyle = tabsPanelCss
+
+export function Tabs(handle: Handle<TabsProps>): () => RemixNode {
+  return () => {
+    let {
+      activeTab,
+      children,
+      defaultActiveTab,
+      disabled,
+      mix,
+      onActiveTabChange,
+      size = 'md',
+      ...divProps
+    } = handle.props
+
+    return (
+      <tabs.Context
+        activeTab={activeTab}
+        defaultActiveTab={defaultActiveTab}
+        disabled={disabled}
+        onActiveTabChange={onActiveTabChange}
+      >
+        <div {...divProps} mix={[rootStyle, sizeStyles[size], tabs.root(), mix]}>
+          {children}
+        </div>
+      </tabs.Context>
+    )
+  }
+}
+
+export function TabList(handle: Handle<TabListProps>): () => RemixNode {
+  return () => {
+    let { children, mix, ...divProps } = handle.props
+
+    return (
+      <div {...divProps} mix={[listStyle, tabs.list(), mix]}>
+        {children}
+      </div>
+    )
+  }
+}
+
+export function Tab(handle: Handle<TabProps>): () => RemixNode {
+  return () => {
+    let { children, disabled, mix, name, type, ...buttonProps } = handle.props
+
+    return (
+      <button
+        {...buttonProps}
+        mix={[tabStyle, tabs.tab({ disabled, name }), mix]}
+        type={type ?? 'button'}
+      >
+        {children}
+      </button>
+    )
+  }
+}
+
+export function TabPanel(handle: Handle<TabPanelProps>): () => RemixNode {
+  return () => {
+    let { children, mix, name, ...divProps } = handle.props
+
+    return (
+      <div {...divProps} mix={[panelStyle, tabs.panel({ name }), mix]}>
+        {children}
+      </div>
+    )
+  }
+}

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`.