@remix-run/ui 0.2.0 → 0.4.0

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.