@remix-run/ui 0.0.0 → 0.1.1

package/dist/utils/wait-for-css-transition.js

@@ -0,0 +1,58 @@
+export function waitForCssTransition(node, signal, action) {
+    return new Promise((resolve) => {
+        let resolved = false;
+        let sawTransitionRun = false;
+        let firstFrameId = 0;
+        let secondFrameId = 0;
+        function cleanup() {
+            cancelAnimationFrame(firstFrameId);
+            cancelAnimationFrame(secondFrameId);
+            node.removeEventListener('transitionrun', handleTransitionRun);
+            node.removeEventListener('transitionend', finish);
+            node.removeEventListener('transitioncancel', finish);
+            signal.removeEventListener('abort', finish);
+        }
+        function handleTransitionRun(event) {
+            if (event.target !== node) {
+                return;
+            }
+            sawTransitionRun = true;
+        }
+        function finish(event) {
+            if (event instanceof TransitionEvent && event.target !== node) {
+                return;
+            }
+            if (resolved) {
+                return;
+            }
+            resolved = true;
+            cleanup();
+            resolve();
+        }
+        node.addEventListener('transitionrun', handleTransitionRun);
+        node.addEventListener('transitionend', finish);
+        node.addEventListener('transitioncancel', finish);
+        signal.addEventListener('abort', finish, { once: true });
+        if (action) {
+            try {
+                action();
+            }
+            catch (error) {
+                cleanup();
+                throw error;
+            }
+        }
+        if (signal.aborted) {
+            finish();
+            return;
+        }
+        firstFrameId = requestAnimationFrame(() => {
+            secondFrameId = requestAnimationFrame(() => {
+                if (!sawTransitionRun) {
+                    finish();
+                }
+            });
+        });
+    });
+}
+//# sourceMappingURL=wait-for-css-transition.js.map

package/dist/utils/wait-for-css-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wait-for-css-transition.js","sourceRoot":"","sources":["../../src/utils/wait-for-css-transition.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,oBAAoB,CAAC,IAAiB,EAAE,MAAmB,EAAE,MAAmB;IAC9F,OAAO,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,EAAE;QACnC,IAAI,QAAQ,GAAG,KAAK,CAAA;QACpB,IAAI,gBAAgB,GAAG,KAAK,CAAA;QAC5B,IAAI,YAAY,GAAG,CAAC,CAAA;QACpB,IAAI,aAAa,GAAG,CAAC,CAAA;QAErB,SAAS,OAAO;YACd,oBAAoB,CAAC,YAAY,CAAC,CAAA;YAClC,oBAAoB,CAAC,aAAa,CAAC,CAAA;YACnC,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE,mBAAmB,CAAC,CAAA;YAC9D,IAAI,CAAC,mBAAmB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;YACjD,IAAI,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAA;YACpD,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;QAC7C,CAAC;QAED,SAAS,mBAAmB,CAAC,KAAsB;YACjD,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;gBAC1B,OAAM;YACR,CAAC;YAED,gBAAgB,GAAG,IAAI,CAAA;QACzB,CAAC;QAED,SAAS,MAAM,CAAC,KAAa;YAC3B,IAAI,KAAK,YAAY,eAAe,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,EAAE,CAAC;gBAC9D,OAAM;YACR,CAAC;YAED,IAAI,QAAQ,EAAE,CAAC;gBACb,OAAM;YACR,CAAC;YAED,QAAQ,GAAG,IAAI,CAAA;YACf,OAAO,EAAE,CAAA;YACT,OAAO,EAAE,CAAA;QACX,CAAC;QAED,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,mBAAmB,CAAC,CAAA;QAC3D,IAAI,CAAC,gBAAgB,CAAC,eAAe,EAAE,MAAM,CAAC,CAAA;QAC9C,IAAI,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAA;QACjD,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAA;QAExD,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC;gBACH,MAAM,EAAE,CAAA;YACV,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,EAAE,CAAA;gBACT,MAAM,KAAK,CAAA;YACb,CAAC;QACH,CAAC;QAED,IAAI,MAAM,CAAC,OAAO,EAAE,CAAC;YACnB,MAAM,EAAE,CAAA;YACR,OAAM;QACR,CAAC;QAED,YAAY,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACxC,aAAa,GAAG,qBAAqB,CAAC,GAAG,EAAE;gBACzC,IAAI,CAAC,gBAAgB,EAAE,CAAC;oBACtB,MAAM,EAAE,CAAA;gBACV,CAAC;YACH,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC"}

package/dist/utils/wait.d.ts

@@ -0,0 +1 @@
+export declare function wait(ms: number): Promise<void>;

package/dist/utils/wait.js

@@ -0,0 +1,6 @@
+export function wait(ms) {
+    return new Promise((resolve) => {
+        setTimeout(resolve, ms);
+    });
+}
+//# sourceMappingURL=wait.js.map

package/dist/utils/wait.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wait.js","sourceRoot":"","sources":["../../src/utils/wait.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,IAAI,CAAC,EAAU;IAC7B,OAAO,IAAI,OAAO,CAAO,CAAC,OAAO,EAAE,EAAE;QACnC,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAA;IACzB,CAAC,CAAC,CAAA;AACJ,CAAC"}

package/package.json

@@ -1,14 +1,133 @@
 {
   "name": "@remix-run/ui",
-  "version": "0.0.0",
-  "description": "Placeholder package for Remix CI/OIDC setup",
+  "version": "0.1.1",
+  "description": "UI tokens, mixins, and glyphs for Remix components",
+  "author": "Ryan Florence <rpflorence@gmail.com>",
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/remix-run/remix.git",
     "directory": "packages/ui"
   },
-  "publishConfig": {
-    "access": "public"
+  "homepage": "https://github.com/remix-run/remix/tree/main/packages/ui#readme",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "dist",
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./accordion": {
+      "types": "./dist/components/accordion/accordion.d.ts",
+      "default": "./dist/components/accordion/accordion.js"
+    },
+    "./animation": {
+      "types": "./dist/animation/index.d.ts",
+      "default": "./dist/animation/index.js"
+    },
+    "./anchor": {
+      "types": "./dist/components/anchor/anchor.d.ts",
+      "default": "./dist/components/anchor/anchor.js"
+    },
+    "./breadcrumbs": {
+      "types": "./dist/components/breadcrumbs/breadcrumbs.d.ts",
+      "default": "./dist/components/breadcrumbs/breadcrumbs.js"
+    },
+    "./button": {
+      "types": "./dist/components/button/button.d.ts",
+      "default": "./dist/components/button/button.js"
+    },
+    "./combobox": {
+      "types": "./dist/components/combobox/combobox.d.ts",
+      "default": "./dist/components/combobox/combobox.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "default": "./dist/jsx-runtime.js"
+    },
+    "./jsx-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "default": "./dist/jsx-runtime.js"
+    },
+    "./glyph": {
+      "types": "./dist/components/glyph/glyph.d.ts",
+      "default": "./dist/components/glyph/glyph.js"
+    },
+    "./listbox": {
+      "types": "./dist/components/listbox/listbox.d.ts",
+      "default": "./dist/components/listbox/listbox.js"
+    },
+    "./menu": {
+      "types": "./dist/components/menu/menu.d.ts",
+      "default": "./dist/components/menu/menu.js"
+    },
+    "./popover": {
+      "types": "./dist/components/popover/popover.d.ts",
+      "default": "./dist/components/popover/popover.js"
+    },
+    "./select": {
+      "types": "./dist/components/select/select.d.ts",
+      "default": "./dist/components/select/select.js"
+    },
+    "./separator": {
+      "types": "./dist/components/separator/separator.d.ts",
+      "default": "./dist/components/separator/separator.js"
+    },
+    "./server": {
+      "types": "./dist/server/stream.d.ts",
+      "default": "./dist/server/stream.js"
+    },
+    "./test": {
+      "types": "./dist/test.d.ts",
+      "default": "./dist/test.js"
+    },
+    "./theme": {
+      "types": "./dist/theme/theme.d.ts",
+      "default": "./dist/theme/theme.js"
+    },
+    "./scroll-lock": {
+      "types": "./dist/utils/scroll-lock.d.ts",
+      "default": "./dist/utils/scroll-lock.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "devDependencies": {
+    "@types/node": "^24.6.0",
+    "@typescript/native-preview": "7.0.0-dev.20251125.1",
+    "playwright": "^1.59.0",
+    "typescript": "^5.9.3",
+    "@remix-run/test": "0.3.0",
+    "@remix-run/assert": "0.2.0"
+  },
+  "dependencies": {
+    "@types/dom-navigation": "^1.0.7"
+  },
+  "keywords": [
+    "remix",
+    "ui",
+    "theming",
+    "design-tokens",
+    "css-variables",
+    "mixins",
+    "glyphs",
+    "component-styling"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "clean": "git clean -fdX",
+    "lint": "pnpm -w exec oxlint packages/ui -A all --quiet",
+    "lint:fix": "pnpm -w exec oxlint packages/ui -A all --fix --quiet",
+    "test": "remix-test",
+    "test:coverage": "remix-test --coverage",
+    "test:watch": "remix-test --watch",
+    "typecheck": "tsc --noEmit"
   }
-}
+}

package/src/animation/animate-layout-mixin.ts

@@ -0,0 +1,266 @@
+import { createMixin } from '../runtime/mixins/mixin.ts'
+import type { ElementProps } from '../runtime/jsx.ts'
+import type { MixinDescriptor } from '../runtime/mixins/mixin.ts'
+import type { LayoutAnimationConfig } from '../runtime/dom.ts'
+
+type LayoutConfig = true | false | null | undefined | LayoutAnimationConfig
+
+type Axis = { min: number; max: number }
+type Box = { x: Axis; y: Axis }
+type AxisDelta = { translate: number; scale: number; origin: number; originPoint: number }
+type Delta = { x: AxisDelta; y: AxisDelta }
+
+const DEFAULT_DURATION = 200
+const DEFAULT_EASING = 'ease-out'
+const SCALE_PRECISION = 0.0001
+const TRANSLATE_PRECISION = 0.01
+
+function createAxisDelta(): AxisDelta {
+  return { translate: 0, scale: 1, origin: 0.5, originPoint: 0 }
+}
+
+function createDelta(): Delta {
+  return { x: createAxisDelta(), y: createAxisDelta() }
+}
+
+function mix(from: number, to: number, progress: number): number {
+  return from + (to - from) * progress
+}
+
+function isNear(value: number, target: number, threshold: number): boolean {
+  return Math.abs(value - target) <= threshold
+}
+
+function calcLength(axis: Axis): number {
+  return axis.max - axis.min
+}
+
+function calcAxisDelta(delta: AxisDelta, source: Axis, target: Axis, origin: number = 0.5): void {
+  delta.origin = origin
+  delta.originPoint = mix(source.min, source.max, origin)
+
+  let sourceLength = calcLength(source)
+  let targetLength = calcLength(target)
+  delta.scale = sourceLength !== 0 ? targetLength / sourceLength : 1
+
+  let targetOriginPoint = mix(target.min, target.max, origin)
+  delta.translate = targetOriginPoint - delta.originPoint
+
+  if (isNear(delta.scale, 1, SCALE_PRECISION) || Number.isNaN(delta.scale)) {
+    delta.scale = 1
+  }
+  if (isNear(delta.translate, 0, TRANSLATE_PRECISION) || Number.isNaN(delta.translate)) {
+    delta.translate = 0
+  }
+}
+
+function calcBoxDelta(delta: Delta, source: Box, target: Box, layoutConfig: LayoutAnimationConfig) {
+  let origin = layoutConfig.size === false ? 0 : 0.5
+  calcAxisDelta(delta.x, source.x, target.x, origin)
+  calcAxisDelta(delta.y, source.y, target.y, origin)
+}
+
+function mixAxisDelta(output: AxisDelta, delta: AxisDelta, progress: number): void {
+  output.translate = mix(delta.translate, 0, progress)
+  output.scale = mix(delta.scale, 1, progress)
+  output.origin = delta.origin
+  output.originPoint = delta.originPoint
+}
+
+function mixDelta(output: Delta, delta: Delta, progress: number): void {
+  mixAxisDelta(output.x, delta.x, progress)
+  mixAxisDelta(output.y, delta.y, progress)
+}
+
+function copyAxisDeltaInto(target: AxisDelta, source: AxisDelta): void {
+  target.translate = source.translate
+  target.scale = source.scale
+  target.origin = source.origin
+  target.originPoint = source.originPoint
+}
+
+function copyDeltaInto(target: Delta, source: Delta): void {
+  copyAxisDeltaInto(target.x, source.x)
+  copyAxisDeltaInto(target.y, source.y)
+}
+
+function buildProjectionTransform(delta: Delta, layoutConfig: LayoutAnimationConfig): string {
+  let transform = ''
+  if (delta.x.translate || delta.y.translate) {
+    transform = `translate3d(${delta.x.translate}px, ${delta.y.translate}px, 0)`
+  }
+  if (layoutConfig.size !== false && (delta.x.scale !== 1 || delta.y.scale !== 1)) {
+    transform += transform ? ' ' : ''
+    transform += `scale(${delta.x.scale}, ${delta.y.scale})`
+  }
+  return transform || 'none'
+}
+
+function buildTransformOrigin(delta: Delta): string {
+  return `${delta.x.origin * 100}% ${delta.y.origin * 100}%`
+}
+
+function rectToBox(rect: DOMRect): Box {
+  return {
+    x: { min: rect.left, max: rect.right },
+    y: { min: rect.top, max: rect.bottom },
+  }
+}
+
+function measureNaturalBox(node: HTMLElement): Box {
+  let prevTransform = node.style.transform
+  let prevOrigin = node.style.transformOrigin
+  node.style.transform = 'none'
+  node.style.transformOrigin = ''
+  let rect = node.getBoundingClientRect()
+  node.style.transform = prevTransform
+  node.style.transformOrigin = prevOrigin
+  return rectToBox(rect)
+}
+
+function resolveLayoutConfig(config: LayoutConfig): LayoutAnimationConfig | null {
+  if (!config) return null
+  if (config === true) return {}
+  return config
+}
+
+function isVisualDeltaZero(delta: Delta, layoutConfig: LayoutAnimationConfig): boolean {
+  return (
+    isNear(delta.x.translate, 0, TRANSLATE_PRECISION) &&
+    isNear(delta.y.translate, 0, TRANSLATE_PRECISION) &&
+    (layoutConfig.size === false ||
+      (isNear(delta.x.scale, 1, SCALE_PRECISION) && isNear(delta.y.scale, 1, SCALE_PRECISION)))
+  )
+}
+
+const animateLayoutMixin = createMixin<Element, [config?: LayoutConfig], ElementProps>((handle) => {
+  let snapshot: Box | null = null
+  let currentConfig: LayoutConfig = true
+  let currentDelta: Delta | null = null
+  let animationProgress = 0
+  let animation: Animation | null = null
+
+  let scheduleProgressTracking = (duration: number, active: Animation) => {
+    let start = performance.now()
+    let tick = () => {
+      if (animation !== active) return
+      animationProgress = Math.min(1, (performance.now() - start) / duration)
+      if (animationProgress < 1) {
+        requestAnimationFrame(tick)
+      }
+    }
+    requestAnimationFrame(tick)
+  }
+
+  let clearProjectionStyles = (node: HTMLElement) => {
+    node.style.transform = ''
+    node.style.transformOrigin = ''
+  }
+
+  let resetAnimation = () => {
+    animation = null
+    currentDelta = null
+    animationProgress = 0
+  }
+
+  handle.addEventListener('beforeUpdate', (event) => {
+    let layoutConfig = resolveLayoutConfig(currentConfig)
+    if (!layoutConfig) return
+    snapshot = measureNaturalBox(event.node as HTMLElement)
+  })
+
+  handle.addEventListener('commit', (event) => {
+    let layoutConfig = resolveLayoutConfig(currentConfig)
+    let htmlNode = event.node as HTMLElement
+    let latest = measureNaturalBox(htmlNode)
+
+    if (!layoutConfig) {
+      animation?.cancel()
+      clearProjectionStyles(htmlNode)
+      resetAnimation()
+      snapshot = latest
+      return
+    }
+
+    if (!snapshot) {
+      snapshot = latest
+      return
+    }
+
+    let targetDelta = createDelta()
+    calcBoxDelta(targetDelta, latest, snapshot, layoutConfig)
+
+    if (isVisualDeltaZero(targetDelta, layoutConfig)) {
+      snapshot = latest
+      return
+    }
+
+    if (animation && animation.playState === 'running') {
+      animation.cancel()
+      if (currentDelta && animationProgress > 0 && animationProgress < 1) {
+        let visual = createDelta()
+        mixDelta(visual, currentDelta, animationProgress)
+        targetDelta.x.translate += visual.x.translate
+        targetDelta.y.translate += visual.y.translate
+        targetDelta.x.scale *= visual.x.scale
+        targetDelta.y.scale *= visual.y.scale
+      }
+    }
+
+    if (!currentDelta) currentDelta = createDelta()
+    copyDeltaInto(currentDelta, targetDelta)
+    animationProgress = 0
+
+    let invert = buildProjectionTransform(targetDelta, layoutConfig)
+    let origin = buildTransformOrigin(targetDelta)
+    htmlNode.style.transform = invert
+    htmlNode.style.transformOrigin = origin
+
+    let duration = layoutConfig.duration ?? DEFAULT_DURATION
+    let easing = layoutConfig.easing ?? DEFAULT_EASING
+    let active = htmlNode.animate(
+      [
+        { transform: invert, transformOrigin: origin },
+        { transform: 'none', transformOrigin: origin },
+      ],
+      { duration, easing, fill: 'forwards' },
+    )
+    animation = active
+    scheduleProgressTracking(duration, active)
+    active.finished
+      .then(() => {
+        if (animation !== active) return
+        clearProjectionStyles(htmlNode)
+        resetAnimation()
+        snapshot = rectToBox(htmlNode.getBoundingClientRect())
+      })
+      .catch(() => {})
+  })
+
+  handle.addEventListener('remove', () => {
+    animation?.cancel()
+    resetAnimation()
+    snapshot = null
+  })
+
+  return (config = true) => {
+    currentConfig = config
+    return handle.element
+  }
+})
+
+/**
+ * Animates layout changes for an element using FLIP-style transforms.
+ *
+ * @param config Layout animation configuration.
+ * @returns A mixin descriptor for the target element.
+ */
+export function animateLayout<target extends EventTarget = Element>(
+  config: LayoutConfig = true,
+): MixinDescriptor<target, [LayoutConfig?], ElementProps> {
+  return animateLayoutMixin(config) as unknown as MixinDescriptor<
+    target,
+    [LayoutConfig?],
+    ElementProps
+  >
+}