@remix-run/ui 0.3.0 → 0.4.0

package/src/theme/presets/rmx-01/glyphs.tsx

@@ -1,308 +0,0 @@
-import { createElement } from '@remix-run/ui'
-import type { RemixNode } from '@remix-run/ui'
-
-import type { GlyphValues } from '../../glyph-contract.ts'
-
-const defaultViewBox = '0 0 16 16'
-
-function symbol(...content: RemixNode[]) {
-  return createElement('symbol', { viewBox: defaultViewBox }, ...content)
-}
-
-export const glyphValues: GlyphValues = {
-  add: symbol(
-    createElement('path', {
-      d: 'M8 3.25v9.5M3.25 8h9.5',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      strokeWidth: '1.5',
-    }),
-  ),
-  alert: symbol(
-    createElement('path', {
-      d: 'M8 2.5 13.75 12.5H2.25Z',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinejoin: 'round',
-      strokeWidth: '1.5',
-    }),
-    createElement('path', {
-      d: 'M8 5.75v3.5',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeWidth: '1.5',
-    }),
-    createElement('circle', {
-      cx: '8',
-      cy: '11.25',
-      fill: 'currentColor',
-      r: '0.75',
-    }),
-  ),
-  check: symbol(
-    createElement('path', {
-      d: 'm3.5 8.25 2.75 2.75L12.5 4.75',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      strokeWidth: '1.5',
-    }),
-  ),
-  chevronDown: symbol(
-    createElement('path', {
-      d: 'm3.75 6.25 4.25 4 4.25-4',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      strokeWidth: '1.5',
-    }),
-  ),
-  chevronVertical: symbol(
-    createElement('path', {
-      d: 'm3.75 6.5 4.25-4 4.25 4',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      strokeWidth: '1.5',
-    }),
-    createElement('path', {
-      d: 'm3.75 9.5 4.25 4 4.25-4',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      strokeWidth: '1.5',
-    }),
-  ),
-  chevronUp: symbol(
-    createElement('path', {
-      d: 'm3.75 9.75 4.25-4 4.25 4',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      strokeWidth: '1.5',
-    }),
-  ),
-  chevronRight: symbol(
-    createElement('path', {
-      d: 'm6 4 4 4-4 4',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      strokeWidth: '1.5',
-    }),
-  ),
-  close: symbol(
-    createElement('path', {
-      d: 'm4.5 4.5 7 7m0-7-7 7',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeWidth: '1.5',
-    }),
-  ),
-  copy: symbol(
-    createElement('rect', {
-      x: '5.25',
-      y: '3.25',
-      width: '7.5',
-      height: '7.5',
-      rx: '1.5',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeWidth: '1.5',
-    }),
-    createElement('path', {
-      d: 'M10.75 12.75h-5.5a2 2 0 0 1-2-2v-5.5',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      strokeWidth: '1.5',
-    }),
-  ),
-  edit: symbol(
-    createElement('path', {
-      d: 'm10.75 3.75 1.5 1.5',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      strokeWidth: '1.5',
-    }),
-    createElement('path', {
-      d: 'm4 12 2.5-.5 5.75-5.75a1.06 1.06 0 0 0 0-1.5l-.5-.5a1.06 1.06 0 0 0-1.5 0L4.5 9.5 4 12Z',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinejoin: 'round',
-      strokeWidth: '1.5',
-    }),
-  ),
-  expand: symbol(
-    createElement('path', {
-      d: 'M9.25 3.5h3.25v3.25',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      strokeWidth: '1.5',
-    }),
-    createElement('path', {
-      d: 'm12.5 3.5-5.5 5.5',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      strokeWidth: '1.5',
-    }),
-    createElement('path', {
-      d: 'M6.75 12.5H3.5V9.25',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      strokeWidth: '1.5',
-    }),
-    createElement('path', {
-      d: 'm3.5 12.5 5.5-5.5',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      strokeWidth: '1.5',
-    }),
-  ),
-  info: symbol(
-    createElement('circle', {
-      cx: '8',
-      cy: '8',
-      fill: 'none',
-      r: '5.75',
-      stroke: 'currentColor',
-      strokeWidth: '1.5',
-    }),
-    createElement('path', {
-      d: 'M8 7.25v3',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeWidth: '1.5',
-    }),
-    createElement('circle', {
-      cx: '8',
-      cy: '5',
-      fill: 'currentColor',
-      r: '0.75',
-    }),
-  ),
-  menu: symbol(
-    createElement('path', {
-      d: 'M3 4.75h10M3 8h10M3 11.25h10',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeWidth: '1.5',
-    }),
-  ),
-  open: symbol(
-    createElement('path', {
-      d: 'M6.25 4H4.5A1.5 1.5 0 0 0 3 5.5v6A1.5 1.5 0 0 0 4.5 13h6A1.5 1.5 0 0 0 12 11.5V9.75',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      strokeWidth: '1.5',
-    }),
-    createElement('path', {
-      d: 'M8 3h5v5',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      strokeWidth: '1.5',
-    }),
-    createElement('path', {
-      d: 'm13 3-6.25 6.25',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      strokeWidth: '1.5',
-    }),
-  ),
-  search: symbol(
-    createElement('circle', {
-      cx: '7',
-      cy: '7',
-      fill: 'none',
-      r: '4.25',
-      stroke: 'currentColor',
-      strokeWidth: '1.5',
-    }),
-    createElement('path', {
-      d: 'm10.25 10.25 3 3',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeWidth: '1.5',
-    }),
-  ),
-  spinner: symbol(
-    createElement('circle', {
-      cx: '8',
-      cy: '8',
-      fill: 'none',
-      opacity: '0.24',
-      r: '5.25',
-      stroke: 'currentColor',
-      strokeWidth: '1.5',
-    }),
-    createElement('path', {
-      d: 'M8 2.75a5.25 5.25 0 0 1 5.25 5.25',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeWidth: '1.5',
-    }),
-  ),
-  trash: symbol(
-    createElement('path', {
-      d: 'M3.75 4.75h8.5',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeWidth: '1.5',
-    }),
-    createElement('path', {
-      d: 'M6.25 4.75V4a1 1 0 0 1 1-1h1.5a1 1 0 0 1 1 1v.75',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      strokeWidth: '1.5',
-    }),
-    createElement('path', {
-      d: 'm5 6.25.45 5.1A1.5 1.5 0 0 0 6.94 12.75h2.12a1.5 1.5 0 0 0 1.49-1.4L11 6.25',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeLinejoin: 'round',
-      strokeWidth: '1.5',
-    }),
-    createElement('path', {
-      d: 'M7 7.25v3.5M9 7.25v3.5',
-      fill: 'none',
-      stroke: 'currentColor',
-      strokeLinecap: 'round',
-      strokeWidth: '1.5',
-    }),
-  ),
-}

package/src/theme/presets/rmx-01/index.ts

@@ -1,123 +0,0 @@
-import { createGlyphSheet } from '../../../components/glyph/glyph.tsx'
-import { createTheme } from '../../runtime.ts'
-import type { GlyphSheetComponent } from '../../../components/glyph/glyph.tsx'
-import type { ThemeComponent } from '../../contract.ts'
-
-import { glyphValues } from './glyphs.tsx'
-
-export const RMX_01: ThemeComponent = createTheme({
-  space: {
-    none: '0px',
-    px: '1px',
-    xs: '4px',
-    sm: '8px',
-    md: '12px',
-    lg: '16px',
-    xl: '24px',
-    xxl: '32px',
-  },
-  radius: {
-    none: '0px',
-    sm: '4px',
-    md: '8px',
-    lg: '12px',
-    xl: '16px',
-    full: '9999px',
-  },
-  fontSize: {
-    xxxs: '10px',
-    xxs: '11px',
-    xs: '12px',
-    sm: '13px',
-    md: '14px',
-    lg: '16px',
-    xl: '20px',
-    xxl: '28px',
-  },
-  fontFamily: {
-    sans: '"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-  },
-  lineHeight: {
-    tight: '1.25',
-    normal: '1.45',
-    relaxed: '1.65',
-  },
-  letterSpacing: {
-    tight: '-0.03em',
-    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: '#ffffff',
-    lvl1: '#f8f8f8',
-    lvl2: '#f5f5f5',
-    lvl3: '#f3f3f3',
-    lvl4: '#efefef',
-  },
-  shadow: {
-    xs: '0 1px 1px rgb(0 0 0 / 0.05)',
-    sm: '0 1px 2px rgb(0 0 0 / 0.07)',
-    md: '0 6px 18px rgb(0 0 0 / 0.08)',
-    lg: '0 16px 34px rgb(0 0 0 / 0.10)',
-    xl: '0 24px 52px rgb(0 0 0 / 0.14)',
-  },
-  colors: {
-    text: {
-      primary: '#151515',
-      secondary: '#4f4f4f',
-      muted: '#6d6d6d',
-      link: '#1A72FF',
-    },
-    border: {
-      subtle: '#e7e7e7',
-      default: '#d1d1d1',
-      strong: '#b0b0b0',
-    },
-    focus: {
-      ring: '#1A72FF',
-    },
-    overlay: {
-      scrim: 'rgb(0 0 0 / 0.28)',
-    },
-    action: {
-      primary: {
-        background: '#1A72FF',
-        backgroundHover: '#1463e0',
-        backgroundActive: '#0f55c9',
-        foreground: 'rgb(255 255 255 / 0.92)',
-        border: '#1A72FF',
-      },
-      secondary: {
-        background: '#ffffff',
-        backgroundHover: '#fbfbfb',
-        backgroundActive: '#f3f3f3',
-        foreground: '#202020',
-        border: '#d1d1d1',
-      },
-      danger: {
-        background: '#FF3000',
-        backgroundHover: '#e12b00',
-        backgroundActive: '#c52600',
-        foreground: 'rgb(255 255 255 / 0.92)',
-        border: '#FF3000',
-      },
-    },
-  },
-})
-
-export const RMX_01_GLYPHS: GlyphSheetComponent = createGlyphSheet(glyphValues)

package/src/theme/runtime.ts

@@ -1,119 +0,0 @@
-import { createElement, type Handle } from '@remix-run/ui'
-
-import { REMIX_UI_RESET_LAYER, REMIX_UI_STYLE_LAYER } from '../style/layers.ts'
-import {
-  theme,
-  themeVariableNames,
-  type CreateThemeOptions,
-  type ThemeComponent,
-  type ThemeStyleProps,
-  type ThemeValues,
-  type ThemeVariableTree,
-  type ThemeVars,
-} from './contract.ts'
-
-export function createTheme(values: ThemeValues, options: CreateThemeOptions = {}): ThemeComponent {
-  let selector = options.selector ?? ':root'
-  let reset = options.reset ?? true
-  let vars = Object.freeze(collectThemeVars(themeVariableNames, values))
-  let cssText = serializeThemeCss(selector, vars, { reset })
-
-  function Theme(handle: Handle<ThemeStyleProps>) {
-    return () =>
-      createElement('style', {
-        nonce: handle.props.nonce,
-        'data-rmx-theme': '',
-        'data-rmx-theme-selector': selector,
-        innerHTML: escapeStyleText(cssText),
-      })
-  }
-
-  return Object.assign(Theme, {
-    Style: Theme,
-    cssText,
-    selector,
-    values,
-    vars,
-  })
-}
-
-function collectThemeVars(
-  tree: ThemeVariableTree,
-  values: ThemeValues,
-  path: string[] = [],
-): Record<string, string> {
-  let vars: Record<string, string> = {}
-
-  for (let [key, value] of Object.entries(tree)) {
-    let nextPath = [...path, key]
-    let themeValue = (values as Record<string, unknown>)[key]
-
-    if (typeof value === 'string') {
-      if (typeof themeValue !== 'string' && typeof themeValue !== 'number') {
-        throw new TypeError(
-          `Expected theme value at "${nextPath.join('.')}" to be a string or number`,
-        )
-      }
-
-      vars[value] = String(themeValue)
-      continue
-    }
-
-    if (!isPlainObject(themeValue)) {
-      throw new TypeError(`Expected theme group at "${nextPath.join('.')}" to be an object`)
-    }
-
-    Object.assign(vars, collectThemeVars(value, themeValue as ThemeValues, nextPath))
-  }
-
-  return vars
-}
-
-function serializeThemeCss(selector: string, vars: ThemeVars, options: { reset: boolean }): string {
-  let lines = Object.entries(vars)
-    .map(([name, value]) => `  ${name}: ${value};`)
-    .join('\n')
-
-  let blocks = [`${selector} {\n${lines}\n}`]
-
-  if (options.reset) {
-    let resetCss = serializeThemeResetCss(selector)
-    blocks.push(`@layer ${REMIX_UI_RESET_LAYER}, ${REMIX_UI_STYLE_LAYER};`)
-    blocks.push(`@layer ${REMIX_UI_RESET_LAYER} { ${resetCss} }`)
-  }
-
-  return blocks.join('\n\n')
-}
-
-function serializeThemeResetCss(selector: string): string {
-  let fontFamily = theme.fontFamily.sans
-  let fontSize = theme.fontSize.md
-  let lineHeight = theme.lineHeight.normal
-  let textColor = theme.colors.text.primary
-  let backgroundColor = theme.surface.lvl0
-
-  if (selector === ':root') {
-    return [
-      `*, *::before, *::after {\n  box-sizing: border-box;\n}`,
-      `html, body {\n  margin: 0;\n}`,
-      `body {\n  font-family: ${fontFamily};\n  font-size: ${fontSize};\n  line-height: ${lineHeight};\n  color: ${textColor};\n  background-color: ${backgroundColor};\n}`,
-      `:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote) {\n  margin: 0;\n}`,
-      `:where(img, svg) {\n  display: block;\n}`,
-    ].join('\n\n')
-  }
-
-  return [
-    `${selector}, ${selector} *, ${selector} *::before, ${selector} *::after {\n  box-sizing: border-box;\n}`,
-    `${selector} {\n  font-family: ${fontFamily};\n  font-size: ${fontSize};\n  line-height: ${lineHeight};\n  color: ${textColor};\n  background-color: ${backgroundColor};\n}`,
-    `${selector} :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, figure, blockquote) {\n  margin: 0;\n}`,
-    `${selector} :where(img, svg) {\n  display: block;\n}`,
-  ].join('\n\n')
-}
-
-function escapeStyleText(cssText: string): string {
-  return cssText.replace(/<\/style/gi, '<\\/style')
-}
-
-function isPlainObject(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null && !Array.isArray(value)
-}

package/src/theme/theme.ts

@@ -1,15 +0,0 @@
-export { theme } from './contract.ts'
-export type {
-  CreateThemeOptions,
-  ThemeComponent,
-  ThemeMix,
-  ThemeStyleProps,
-  ThemeUtility,
-  ThemeValue,
-  ThemeValues,
-  ThemeVars,
-} from './contract.ts'
-export { glyphContract, glyphNames } from './glyph-contract.ts'
-export type { GlyphContract, GlyphName, GlyphSymbol, GlyphValues } from './glyph-contract.ts'
-export { createTheme } from './runtime.ts'
-export { RMX_01, RMX_01_GLYPHS } from './presets/rmx-01/index.ts'

package/src/utils/scroll-lock/README.md

@@ -1,33 +0,0 @@
-# scroll-lock
-
-`scroll-lock` locks document scrolling while a floating or modal surface is open. Use `lockScroll` directly for imperative flows or `lockScrollOnToggle` for popover-style elements that emit `beforetoggle`.
-
-## Usage
-
-```tsx
-import { lockScroll, lockScrollOnToggle } from 'remix/ui/scroll-lock'
-
-function DialogSurface() {
-  return <div popover="auto" mix={lockScrollOnToggle()} />
-}
-
-function openModal() {
-  let unlock = lockScroll()
-
-  // Later, when the modal closes:
-  unlock()
-}
-```
-
-## API
-
-- `lockScroll(document?)`: locks the target document and returns an idempotent unlock function.
-- `lockScrollOnToggle()`: mixin that locks on `beforetoggle` open, unlocks on close, and releases the lock when the host unmounts.
-
-## Behavior Notes
-
-- The lock stores and restores the document element's inline `overflow` and `scrollbarGutter`.
-- Scroll position is restored when the last active lock is released.
-- Multiple locks are reference-counted, so the document stays locked until every unlock function has run.
-- When a scrollbar is present and computed `scrollbar-gutter` is `auto`, the document reserves a stable gutter while locked.
-- `lockScrollOnToggle` uses the host element's owner document.