@remix-run/ui 0.3.0 → 0.4.0

package/src/runtime/demos/keyed-list.demo.tsx

@@ -1,94 +0,0 @@
-import { on, type Handle } from '@remix-run/ui'
-
-type ListItem = {
-  id: string
-  label: string
-}
-
-/**
- * @name Keyed List
- * @description Exercises keyed DOM reconciliation with shuffling, reversing, and per-item controls.
- */
-export default function App(handle: Handle) {
-  let items: ListItem[] = [
-    { id: 'a', label: 'Item A' },
-    { id: 'b', label: 'Item B' },
-    { id: 'c', label: 'Item C' },
-    { id: 'd', label: 'Item D' },
-  ]
-
-  let shuffleInterval: ReturnType<typeof setInterval> | null = null
-
-  let moveUp = (index: number) => {
-    if (index === 0) return
-    let newItems = [...items]
-    ;[newItems[index - 1], newItems[index]] = [newItems[index], newItems[index - 1]]
-    items = newItems
-    handle.update()
-  }
-
-  let moveDown = (index: number) => {
-    if (index === items.length - 1) return
-    let newItems = [...items]
-    ;[newItems[index], newItems[index + 1]] = [newItems[index + 1], newItems[index]]
-    items = newItems
-    handle.update()
-  }
-
-  let reverse = () => {
-    items = [...items].reverse()
-    handle.update()
-  }
-
-  let shuffle = () => {
-    let newItems = [...items]
-    for (let i = newItems.length - 1; i > 0; i--) {
-      let j = Math.floor(Math.random() * (i + 1))
-      ;[newItems[i], newItems[j]] = [newItems[j], newItems[i]]
-    }
-    items = newItems
-    handle.update()
-  }
-
-  let toggleAutoShuffle = () => {
-    if (shuffleInterval !== null) {
-      clearInterval(shuffleInterval)
-      shuffleInterval = null
-    } else {
-      shuffleInterval = setInterval(() => {
-        shuffle()
-      }, 1000)
-    }
-    handle.update()
-  }
-
-  return () => (
-    <div>
-      <div className="controls">
-        <button mix={[on('click', reverse)]}>Reverse List</button>
-        <button mix={[on('click', shuffle)]}>Shuffle List</button>
-        <button mix={[on('click', toggleAutoShuffle)]}>
-          {shuffleInterval !== null ? 'Stop Auto-Shuffle' : 'Start Auto-Shuffle'}
-        </button>
-      </div>
-
-      {items.map((item, index) => (
-        <div key={item.id} className="list-item">
-          <input type="text" placeholder={item.label} defaultValue={item.label} />
-          <button
-            // disabled={index === 0}
-            mix={[on('click', () => moveUp(index))]}
-          >
-            ↑
-          </button>
-          <button
-            // disabled={index === items.length - 1}
-            mix={[on('click', () => moveDown(index))]}
-          >
-            ↓
-          </button>
-        </div>
-      ))}
-    </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.

package/src/theme/contract.ts

@@ -1,215 +0,0 @@
-import type { css, Handle, MixinDescriptor, RemixElement } from '@remix-run/ui'
-
-export interface ThemeVariableTree {
-  [key: string]: string | ThemeVariableTree
-}
-
-type ThemeVariableGroup<key extends string> = Readonly<Record<key, string>>
-type ThemeActionVariableGroup = ThemeVariableGroup<
-  'background' | 'backgroundHover' | 'backgroundActive' | 'foreground' | 'border'
->
-
-type ThemeVariableNames = {
-  readonly space: ThemeVariableGroup<'none' | 'px' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'>
-  readonly radius: ThemeVariableGroup<'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'>
-  readonly fontFamily: ThemeVariableGroup<'sans' | 'mono'>
-  readonly fontSize: ThemeVariableGroup<'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'>
-  readonly lineHeight: ThemeVariableGroup<'tight' | 'normal' | 'relaxed'>
-  readonly letterSpacing: ThemeVariableGroup<'tight' | 'normal' | 'meta' | 'wide'>
-  readonly fontWeight: ThemeVariableGroup<'normal' | 'medium' | 'semibold' | 'bold'>
-  readonly control: {
-    readonly height: ThemeVariableGroup<'sm' | 'md' | 'lg'>
-  }
-  readonly surface: ThemeVariableGroup<'lvl0' | 'lvl1' | 'lvl2' | 'lvl3' | 'lvl4'>
-  readonly shadow: ThemeVariableGroup<'xs' | 'sm' | 'md' | 'lg' | 'xl'>
-  readonly colors: {
-    readonly text: ThemeVariableGroup<'primary' | 'secondary' | 'muted' | 'link'>
-    readonly border: ThemeVariableGroup<'subtle' | 'default' | 'strong'>
-    readonly focus: ThemeVariableGroup<'ring'>
-    readonly overlay: ThemeVariableGroup<'scrim'>
-    readonly action: {
-      readonly primary: ThemeActionVariableGroup
-      readonly secondary: ThemeActionVariableGroup
-      readonly danger: ThemeActionVariableGroup
-    }
-  }
-}
-
-const themeVariableNamesSource: ThemeVariableNames = {
-  space: {
-    none: '--rmx-space-none',
-    px: '--rmx-space-px',
-    xs: '--rmx-space-xs',
-    sm: '--rmx-space-sm',
-    md: '--rmx-space-md',
-    lg: '--rmx-space-lg',
-    xl: '--rmx-space-xl',
-    xxl: '--rmx-space-xxl',
-  },
-  radius: {
-    none: '--rmx-radius-none',
-    sm: '--rmx-radius-sm',
-    md: '--rmx-radius-md',
-    lg: '--rmx-radius-lg',
-    xl: '--rmx-radius-xl',
-    full: '--rmx-radius-full',
-  },
-  fontFamily: {
-    sans: '--rmx-font-family-sans',
-    mono: '--rmx-font-family-mono',
-  },
-  fontSize: {
-    xxxs: '--rmx-font-size-xxxs',
-    xxs: '--rmx-font-size-xxs',
-    xs: '--rmx-font-size-xs',
-    sm: '--rmx-font-size-sm',
-    md: '--rmx-font-size-md',
-    lg: '--rmx-font-size-lg',
-    xl: '--rmx-font-size-xl',
-    xxl: '--rmx-font-size-xxl',
-  },
-  lineHeight: {
-    tight: '--rmx-line-height-tight',
-    normal: '--rmx-line-height-normal',
-    relaxed: '--rmx-line-height-relaxed',
-  },
-  letterSpacing: {
-    tight: '--rmx-letter-spacing-tight',
-    normal: '--rmx-letter-spacing-normal',
-    meta: '--rmx-letter-spacing-meta',
-    wide: '--rmx-letter-spacing-wide',
-  },
-  fontWeight: {
-    normal: '--rmx-font-weight-normal',
-    medium: '--rmx-font-weight-medium',
-    semibold: '--rmx-font-weight-semibold',
-    bold: '--rmx-font-weight-bold',
-  },
-  control: {
-    height: {
-      sm: '--rmx-control-height-sm',
-      md: '--rmx-control-height-md',
-      lg: '--rmx-control-height-lg',
-    },
-  },
-  surface: {
-    lvl0: '--rmx-surface-lvl0',
-    lvl1: '--rmx-surface-lvl1',
-    lvl2: '--rmx-surface-lvl2',
-    lvl3: '--rmx-surface-lvl3',
-    lvl4: '--rmx-surface-lvl4',
-  },
-  shadow: {
-    xs: '--rmx-shadow-xs',
-    sm: '--rmx-shadow-sm',
-    md: '--rmx-shadow-md',
-    lg: '--rmx-shadow-lg',
-    xl: '--rmx-shadow-xl',
-  },
-  colors: {
-    text: {
-      primary: '--rmx-color-text-primary',
-      secondary: '--rmx-color-text-secondary',
-      muted: '--rmx-color-text-muted',
-      link: '--rmx-color-text-link',
-    },
-    border: {
-      subtle: '--rmx-color-border-subtle',
-      default: '--rmx-color-border-default',
-      strong: '--rmx-color-border-strong',
-    },
-    focus: {
-      ring: '--rmx-color-focus-ring',
-    },
-    overlay: {
-      scrim: '--rmx-color-overlay-scrim',
-    },
-    action: {
-      primary: {
-        background: '--rmx-color-action-primary-background',
-        backgroundHover: '--rmx-color-action-primary-background-hover',
-        backgroundActive: '--rmx-color-action-primary-background-active',
-        foreground: '--rmx-color-action-primary-foreground',
-        border: '--rmx-color-action-primary-border',
-      },
-      secondary: {
-        background: '--rmx-color-action-secondary-background',
-        backgroundHover: '--rmx-color-action-secondary-background-hover',
-        backgroundActive: '--rmx-color-action-secondary-background-active',
-        foreground: '--rmx-color-action-secondary-foreground',
-        border: '--rmx-color-action-secondary-border',
-      },
-      danger: {
-        background: '--rmx-color-action-danger-background',
-        backgroundHover: '--rmx-color-action-danger-background-hover',
-        backgroundActive: '--rmx-color-action-danger-background-active',
-        foreground: '--rmx-color-action-danger-foreground',
-        border: '--rmx-color-action-danger-border',
-      },
-    },
-  },
-} satisfies ThemeVariableTree
-
-export const themeVariableNames: ThemeVariableNames = themeVariableNamesSource
-
-type MapLeaves<source, leaf> = source extends string
-  ? leaf
-  : {
-      [key in keyof source]: MapLeaves<source[key], leaf>
-    }
-
-export type ThemeValue = string | number
-export type ThemeContract = MapLeaves<ThemeVariableNames, string>
-export type ThemeValues = MapLeaves<typeof themeVariableNames, ThemeValue>
-export type ThemeVars = Readonly<Record<string, string>>
-export type CreateThemeOptions = {
-  selector?: string
-  reset?: boolean
-}
-export type ThemeStyleProps = {
-  nonce?: string
-}
-
-type ThemeRenderer = (handle: Handle<ThemeStyleProps>) => () => RemixElement
-
-export type ThemeComponent = ThemeRenderer & {
-  Style: ThemeRenderer
-  cssText: string
-  selector: string
-  values: ThemeValues
-  vars: ThemeVars
-}
-
-export const theme: ThemeContract = createThemeContract(themeVariableNames)
-
-export type ThemeUtility = ReturnType<typeof css>
-
-type ThemeMixLeaf = MixinDescriptor<any, any, any>
-type PreviousThemeMixDepth = [0, 0, 1, 2, 3, 4]
-type NestedThemeMix<value, depth extends number = 4> = depth extends 0
-  ? value | ReadonlyArray<value>
-  : value | ReadonlyArray<NestedThemeMix<value, PreviousThemeMixDepth[depth]>>
-
-export type ThemeMix = NestedThemeMix<ThemeMixLeaf>
-
-function createThemeContract<tree extends ThemeVariableTree>(tree: tree): MapLeaves<tree, string> {
-  return mapTreeLeaves(tree, (variableName) => `var(${variableName})`) as MapLeaves<tree, string>
-}
-
-function mapTreeLeaves(
-  tree: ThemeVariableTree,
-  mapLeaf: (value: string) => string,
-): ThemeVariableTree {
-  let output: ThemeVariableTree = {}
-
-  for (let [key, value] of Object.entries(tree)) {
-    if (typeof value === 'string') {
-      output[key] = mapLeaf(value)
-      continue
-    }
-
-    output[key] = mapTreeLeaves(value, mapLeaf)
-  }
-
-  return output
-}

package/src/theme/glyph-contract.ts

@@ -1,59 +0,0 @@
-import type { RemixElement } from '@remix-run/ui'
-
-export const glyphNames = [
-  'add',
-  'alert',
-  'check',
-  'chevronDown',
-  'chevronVertical',
-  'chevronUp',
-  'chevronRight',
-  'close',
-  'copy',
-  'edit',
-  'expand',
-  'info',
-  'menu',
-  'open',
-  'search',
-  'spinner',
-  'trash',
-] as const
-
-export type GlyphName = (typeof glyphNames)[number]
-
-export type GlyphSymbol = RemixElement
-
-export type GlyphValues = {
-  readonly [key in GlyphName]: GlyphSymbol
-}
-
-export type GlyphContract = Readonly<Record<GlyphName, { id: string }>>
-
-const DEFAULT_GLYPH_ID_PREFIX = 'rmx-glyph'
-
-export const glyphContract: GlyphContract = Object.freeze(
-  createGlyphContract(DEFAULT_GLYPH_ID_PREFIX),
-)
-
-function createGlyphIds(idPrefix: string): Record<GlyphName, string> {
-  return Object.fromEntries(glyphNames.map((name) => [name, `${idPrefix}-${name}`])) as Record<
-    GlyphName,
-    string
-  >
-}
-
-function createGlyphContract(idPrefix: string): GlyphContract {
-  let ids = createGlyphIds(idPrefix)
-
-  return Object.freeze(
-    Object.fromEntries(
-      glyphNames.map((name) => [
-        name,
-        {
-          id: ids[name],
-        },
-      ]),
-    ) as GlyphContract,
-  )
-}