@remix-run/ui 0.2.0 → 0.4.0

package/src/components/tabs/tabs.tsx

@@ -1,504 +0,0 @@
-import {
-  attrs,
-  css,
-  createElement,
-  createMixin,
-  on,
-  type CSSMixinDescriptor,
-  type Dispatched,
-  type ElementProps,
-  type Handle,
-  type MixinHandle,
-  type Props,
-  type RemixNode,
-} from '@remix-run/ui'
-import * as button from '../button/button.tsx'
-import { theme } from '../../theme/theme.ts'
-
-const TABS_CHANGE_EVENT = 'rmx:tabs-change' as const
-
-type TabsChangeHandler<target extends HTMLElement> = (
-  event: Dispatched<TabsChangeEvent, target>,
-  signal: AbortSignal,
-) => void | Promise<void>
-
-const tabsListCss: CSSMixinDescriptor = css({
-  display: 'inline-flex',
-  alignItems: 'center',
-  gap: theme.space.xs,
-  minWidth: 0,
-  padding: theme.space.xs,
-  border: `1px solid ${theme.colors.border.subtle}`,
-  borderRadius: theme.radius.xl,
-  backgroundColor: theme.surface.lvl2,
-})
-
-const tabsTriggerCss: CSSMixinDescriptor = css({
-  justifyContent: 'flex-start',
-  minHeight: theme.control.height.md,
-  paddingInline: theme.space.md,
-  border: '1px solid transparent',
-  borderRadius: theme.radius.md,
-  backgroundColor: 'transparent',
-  color: theme.colors.text.secondary,
-  fontSize: theme.fontSize.md,
-  '&:hover:not(:disabled):not([aria-disabled="true"])': {
-    color: theme.colors.text.primary,
-  },
-  '&:focus-visible': {
-    outline: `2px solid ${theme.colors.focus.ring}`,
-    outlineOffset: '2px',
-    color: theme.colors.text.primary,
-  },
-  '&[aria-selected="true"], &[aria-selected="true"]:hover, &[aria-selected="true"]:focus-visible': {
-    backgroundColor: theme.surface.lvl0,
-    borderColor: theme.colors.border.subtle,
-    boxShadow: theme.shadow.xs,
-    color: theme.colors.text.primary,
-  },
-  '&:disabled, &[aria-disabled="true"]': {
-    opacity: 0.55,
-  },
-})
-
-export const listStyle = tabsListCss
-export const triggerStyle = tabsTriggerCss
-
-const panelVisibilityUtility = css({
-  '&[hidden]': {
-    display: 'none',
-  },
-})
-
-declare global {
-  interface HTMLElementEventMap {
-    [TABS_CHANGE_EVENT]: TabsChangeEvent
-  }
-}
-
-export class TabsChangeEvent extends Event {
-  readonly previousValue: string | null
-  readonly value: string
-
-  constructor(value: string, previousValue: string | null) {
-    super(TABS_CHANGE_EVENT, { bubbles: true })
-    this.value = value
-    this.previousValue = previousValue
-  }
-}
-
-export type TabsOrientation = 'horizontal' | 'vertical'
-
-type TabsDirection = 'first' | 'last' | 'next' | 'previous'
-
-type RegisteredTab = {
-  disabled: boolean
-  getNode(): HTMLElement | null
-  value: string
-}
-
-export interface TabsRef {
-  readonly selectedValue: string | null
-  focus: (value?: string) => void
-  focusFirst: () => void
-  focusLast: () => void
-  select: (value: string) => void
-}
-
-interface TabsContextValue {
-  readonly focusableValue: string | null
-  readonly orientation: TabsOrientation
-  readonly value: string | null
-  getPanelId: (value: string) => string
-  getTriggerId: (value: string) => string
-  move: (fromValue: string, direction: TabsDirection) => void
-  registerTab: (tab: RegisteredTab) => void
-  select: (value: string) => void
-}
-
-export interface TabsContextProps {
-  children?: RemixNode
-  defaultValue?: string
-  onValueChange?: (value: string) => void
-  orientation?: TabsOrientation
-  ref?: (ref: TabsRef) => void
-  value?: string
-}
-
-export interface TabsProps extends TabsContextProps {}
-
-export interface TabsTriggerOptions {
-  disabled?: boolean
-  value: string
-}
-
-export interface TabsPanelOptions {
-  value: string
-}
-
-export type TabsListProps = Props<'div'>
-
-export type TabProps = Omit<Props<'button'>, 'type'> & {
-  children?: RemixNode
-  disabled?: boolean
-  type?: 'button' | 'submit' | 'reset'
-  value: string
-}
-
-export type TabsPanelProps = Props<'div'> & {
-  children?: RemixNode
-  value: string
-}
-
-function getTabsContext(handle: Handle | MixinHandle) {
-  return handle.context.get(TabsProvider)
-}
-
-function toIdFragment(value: string) {
-  let fragment = value.replace(/[^a-zA-Z0-9_-]+/g, '-').replace(/^-+|-+$/g, '')
-  return fragment || 'tab'
-}
-
-function TabsProvider(handle: Handle<TabsContextProps, TabsContextValue>) {
-  let registeredTabs: RegisteredTab[] = []
-  let hasInitialized = false
-  let uncontrolledValue: string | null = null
-
-  function getValue() {
-    return handle.props.value !== undefined ? handle.props.value : uncontrolledValue
-  }
-
-  function getOrientation() {
-    return handle.props.orientation ?? 'horizontal'
-  }
-
-  function isActiveTab(tab: RegisteredTab | undefined): tab is RegisteredTab {
-    return !!tab && !tab.disabled && !!tab.getNode()?.isConnected
-  }
-
-  function getTab(value: string | null | undefined) {
-    if (value == null) {
-      return undefined
-    }
-
-    return registeredTabs.find((tab) => tab.value === value)
-  }
-
-  function getEnabledTabs() {
-    return registeredTabs.filter(isActiveTab)
-  }
-
-  function getFocusableValue() {
-    let currentValue = getValue()
-    let currentTab = getTab(currentValue)
-
-    if (isActiveTab(currentTab)) {
-      return currentValue
-    }
-
-    return getEnabledTabs()[0]?.value ?? null
-  }
-
-  function getTargetTab(fromValue: string, direction: TabsDirection) {
-    let enabledTabs = getEnabledTabs()
-    if (enabledTabs.length === 0) {
-      return undefined
-    }
-
-    let currentIndex = enabledTabs.findIndex((tab) => tab.value === fromValue)
-    let targetIndex = 0
-
-    switch (direction) {
-      case 'first':
-        targetIndex = 0
-        break
-      case 'last':
-        targetIndex = enabledTabs.length - 1
-        break
-      case 'next':
-        targetIndex =
-          currentIndex === -1 || currentIndex === enabledTabs.length - 1 ? 0 : currentIndex + 1
-        break
-      case 'previous':
-        targetIndex = currentIndex <= 0 ? enabledTabs.length - 1 : currentIndex - 1
-        break
-    }
-
-    return enabledTabs[targetIndex]
-  }
-
-  function dispatchChange(value: string, previousValue: string | null) {
-    getTab(value)?.getNode()?.dispatchEvent(new TabsChangeEvent(value, previousValue))
-  }
-
-  function select(value: string) {
-    let nextTab = getTab(value)
-    if (!isActiveTab(nextTab)) {
-      return
-    }
-
-    let previousValue = getValue()
-    if (previousValue === value) {
-      return
-    }
-
-    if (handle.props.value === undefined) {
-      uncontrolledValue = value
-      void handle.update()
-    }
-
-    handle.props.onValueChange?.(value)
-    dispatchChange(value, previousValue ?? null)
-  }
-
-  let tabsRef: TabsRef = {
-    get selectedValue() {
-      return getValue()
-    },
-    focus(value = getFocusableValue() ?? undefined) {
-      getTab(value)?.getNode()?.focus()
-    },
-    focusFirst() {
-      getTargetTab(getFocusableValue() ?? '', 'first')
-        ?.getNode()
-        ?.focus()
-    },
-    focusLast() {
-      getTargetTab(getFocusableValue() ?? '', 'last')
-        ?.getNode()
-        ?.focus()
-    },
-    select,
-  }
-
-  handle.context.set({
-    get focusableValue() {
-      return getFocusableValue()
-    },
-    get orientation() {
-      return getOrientation()
-    },
-    get value() {
-      return getValue()
-    },
-    getPanelId(value) {
-      return `${handle.id}-panel-${toIdFragment(value)}`
-    },
-    getTriggerId(value) {
-      return `${handle.id}-trigger-${toIdFragment(value)}`
-    },
-    move(fromValue, direction) {
-      let target = getTargetTab(fromValue, direction)
-      if (!target) {
-        return
-      }
-
-      target.getNode()?.focus()
-      select(target.value)
-    },
-    registerTab(tab) {
-      registeredTabs.push(tab)
-    },
-    select,
-  })
-
-  return () => {
-    registeredTabs = []
-
-    if (!hasInitialized) {
-      uncontrolledValue = handle.props.defaultValue ?? null
-      hasInitialized = true
-    }
-
-    handle.queueTask(() => {
-      handle.props.ref?.(tabsRef)
-
-      if (handle.props.value !== undefined) {
-        return
-      }
-
-      let nextValue = getFocusableValue()
-      if (nextValue === uncontrolledValue) {
-        return
-      }
-
-      uncontrolledValue = nextValue
-      void handle.update()
-    })
-
-    return handle.props.children
-  }
-}
-
-const listMixin = createMixin<HTMLElement, [], ElementProps>((handle) => {
-  let context = getTabsContext(handle)
-
-  return () =>
-    attrs({
-      role: 'tablist',
-      'aria-orientation': context.orientation === 'vertical' ? 'vertical' : undefined,
-      'data-orientation': context.orientation,
-    })
-})
-
-const triggerMixin = createMixin<HTMLElement, [options: TabsTriggerOptions], ElementProps>(
-  (handle) => {
-    let triggerRef: HTMLElement | null = null
-    let context = getTabsContext(handle)
-
-    handle.queueTask((node) => {
-      triggerRef = node
-    })
-
-    return (options, props) => {
-      let disabled = options.disabled === true || props.disabled === true
-      context.registerTab({
-        disabled,
-        getNode() {
-          return triggerRef
-        },
-        value: options.value,
-      })
-
-      return [
-        attrs({
-          id: context.getTriggerId(options.value),
-          role: 'tab',
-          tabIndex: !disabled && context.focusableValue === options.value ? 0 : -1,
-          'aria-controls': context.getPanelId(options.value),
-          'aria-disabled': disabled ? 'true' : undefined,
-          'aria-selected': context.value === options.value ? 'true' : 'false',
-          'data-orientation': context.orientation,
-          'data-selected': context.value === options.value ? 'true' : 'false',
-        }),
-        !disabled && [
-          on('click', () => {
-            context.select(options.value)
-          }),
-          on('keydown', (event) => {
-            switch (event.key) {
-              case 'ArrowRight':
-                if (context.orientation !== 'horizontal') {
-                  return
-                }
-                event.preventDefault()
-                context.move(options.value, 'next')
-                break
-              case 'ArrowLeft':
-                if (context.orientation !== 'horizontal') {
-                  return
-                }
-                event.preventDefault()
-                context.move(options.value, 'previous')
-                break
-              case 'ArrowDown':
-                if (context.orientation !== 'vertical') {
-                  return
-                }
-                event.preventDefault()
-                context.move(options.value, 'next')
-                break
-              case 'ArrowUp':
-                if (context.orientation !== 'vertical') {
-                  return
-                }
-                event.preventDefault()
-                context.move(options.value, 'previous')
-                break
-              case 'Home':
-                event.preventDefault()
-                context.move(options.value, 'first')
-                break
-              case 'End':
-                event.preventDefault()
-                context.move(options.value, 'last')
-                break
-            }
-          }),
-        ],
-      ]
-    }
-  },
-)
-
-const panelMixin = createMixin<HTMLElement, [options: TabsPanelOptions], ElementProps>((handle) => {
-  let context = getTabsContext(handle)
-
-  return (options) => {
-    let isSelected = context.value === options.value
-
-    return [
-      attrs({
-        id: context.getPanelId(options.value),
-        role: 'tabpanel',
-        hidden: isSelected ? undefined : true,
-        'aria-labelledby': context.getTriggerId(options.value),
-        'data-orientation': context.orientation,
-        'data-selected': isSelected ? 'true' : 'false',
-      }),
-      panelVisibilityUtility,
-    ]
-  }
-})
-
-export const Context = TabsProvider
-export const list = listMixin
-export const panel = panelMixin
-export const trigger = triggerMixin
-
-const tabs = { Context, list, panel, trigger } as const
-
-export function onTabsChange<target extends HTMLElement>(
-  handler: TabsChangeHandler<target>,
-  captureBoolean?: boolean,
-) {
-  return on(TABS_CHANGE_EVENT, handler, captureBoolean)
-}
-
-export function Tabs(handle: Handle<TabsProps>) {
-  return () => {
-    let { children, ...contextProps } = handle.props
-    return <tabs.Context {...contextProps}>{children}</tabs.Context>
-  }
-}
-
-export function TabsList(handle: Handle<TabsListProps>) {
-  return () => {
-    let { children, mix, ...divProps } = handle.props
-
-    return (
-      <div {...divProps} mix={[listStyle, tabs.list(), mix]}>
-        {children}
-      </div>
-    )
-  }
-}
-
-export function Tab(handle: Handle<TabProps>) {
-  return () => {
-    let { children, disabled, mix, type, value, ...buttonProps } = handle.props
-
-    return (
-      <button
-        {...buttonProps}
-        disabled={disabled ? true : undefined}
-        mix={[button.baseStyle, triggerStyle, tabs.trigger({ disabled, value }), mix]}
-        type={type ?? 'button'}
-      >
-        {children}
-      </button>
-    )
-  }
-}
-
-export function TabsPanel(handle: Handle<TabsPanelProps>) {
-  return () => {
-    let { children, mix, value, ...divProps } = handle.props
-
-    return (
-      <div {...divProps} mix={[tabs.panel({ value }), mix]}>
-        {children}
-      </div>
-    )
-  }
-}

package/src/theme/README.md

@@ -1,103 +0,0 @@
-# theme
-
-`theme` provides Remix UI design tokens, theme creation, glyph contracts, and the built-in `RMX_01` preset. Use it to install CSS custom properties once and consume typed token references in component styles.
-
-## Usage
-
-```tsx
-import { createTheme, theme } from 'remix/ui/theme'
-import { css } 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' },
-  fontFamily: { sans: 'Inter, sans-serif', mono: 'monospace' },
-  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' },
-  letterSpacing: { tight: '-0.02em', normal: '0', meta: '0.06em', wide: '0.08em' },
-  fontWeight: { normal: '400', medium: '500', semibold: '600', bold: '700' },
-  control: { height: { sm: '28px', md: '32px', lg: '36px' } },
-  surface: { lvl0: '#fff', lvl1: '#f8fafc', lvl2: '#f5f5f5', lvl3: '#f1f5f9', lvl4: '#e9eef6' },
-  shadow: { xs: 'none', sm: 'none', md: 'none', lg: 'none', xl: 'none' },
-  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: '#fff',
-        border: '#2563eb',
-      },
-      secondary: {
-        background: '#fff',
-        backgroundHover: '#f8fafc',
-        backgroundActive: '#f1f5f9',
-        foreground: '#111827',
-        border: '#d1d5db',
-      },
-      danger: {
-        background: '#dc2626',
-        backgroundHover: '#b91c1c',
-        backgroundActive: '#991b1b',
-        foreground: '#fff',
-        border: '#dc2626',
-      },
-    },
-  },
-})
-
-let card = css({
-  backgroundColor: theme.surface.lvl0,
-  color: theme.colors.text.primary,
-})
-
-function Layout() {
-  return (
-    <body>
-      <Theme />
-      <article mix={card}>Project status</article>
-    </body>
-  )
-}
-```
-
-## `theme.*`
-
-- `theme`: typed CSS variable reference contract, such as `theme.space.md` and `theme.colors.text.primary`.
-- `createTheme(values, options?)`: creates a style component with `cssText`, `selector`, `values`, `vars`, and `Style`.
-- `RMX_01`: built-in theme component.
-- `RMX_01_GLYPHS`: built-in glyph sheet component.
-- `glyphContract` and `glyphNames`: stable glyph ids and supported glyph names.
-- `ThemeValues`, `ThemeVars`, `ThemeComponent`, `ThemeStyleProps`, `CreateThemeOptions`, and `ThemeMix`: public TypeScript types for custom themes.
-- `GlyphName`, `GlyphSymbol`, and `GlyphValues`: public TypeScript types for glyph contracts.
-
-## Behavior Notes
-
-- `theme` values are CSS variable references, not raw token values.
-- `createTheme` serializes token values into CSS custom properties and renders a `<style data-rmx-theme>` tag.
-- The default selector is `:root`; pass `selector` for scoped themes.
-- The base reset is included by default, emitted in `rmx-reset`, and can be disabled with `reset: false`.
-- The built-in components consume this token contract through their style mixins.
-- Render `<RMX_01 />` and `<RMX_01_GLYPHS />` once when using the built-in theme and glyph preset.