@remix-run/ui 0.0.0 → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Shopify Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,196 @@
-# Placeholder Package
+# ui
 
-This package is a placeholder published at `0.0.0` to reserve the npm name and configure CI publish permissions.
+Runtime UI primitives for Remix apps, including the component runtime, server rendering, frame hydration, reusable mixins, first-party components, and theme tokens.
+
+## Features
+
+- Component runtime APIs for rendering, hydration, frame navigation, and JSX
+- Server rendering APIs for streaming Remix UI trees and frames
+- `mix` composition with event, ref, CSS, and animation helpers
+- First-party components such as buttons, menus, listboxes, popovers, and selects
+- Fixed typed `theme` contract whose leaves resolve to `var(--rmx-...)`
+- `createTheme()` and `createGlyphSheet()` utilities for shared app styling and glyphs
+
+## Installation
+
+```sh
+npm i remix
+```
+
+## Usage
+
+Define your app theme once:
+
+```tsx
+import { createTheme } 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',
+  },
+  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',
+  },
+  fontWeight: {
+    normal: '400',
+    medium: '500',
+    semibold: '600',
+    bold: '700',
+  },
+  shadow: {
+    xs: '0 1px 2px rgb(0 0 0 / 0.05)',
+    sm: '0 1px 3px rgb(0 0 0 / 0.10)',
+    md: '0 4px 10px rgb(0 0 0 / 0.12)',
+    lg: '0 10px 30px rgb(0 0 0 / 0.16)',
+    xl: '0 20px 50px rgb(0 0 0 / 0.20)',
+  },
+  zIndex: {
+    dropdown: '1000',
+    popover: '1100',
+    sticky: '1200',
+    overlay: '1300',
+    modal: '1400',
+    toast: '1500',
+    tooltip: '1600',
+  },
+  surface: {
+    lvl0: '#ffffff',
+    lvl1: '#f8fafc',
+    lvl2: '#f1f5f9',
+    lvl3: '#e5edf7',
+    lvl4: '#dbe6f4',
+  },
+  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: '#ffffff',
+        border: '#2563eb',
+      },
+      secondary: {
+        background: '#ffffff',
+        backgroundHover: '#f8fafc',
+        backgroundActive: '#f1f5f9',
+        foreground: '#111827',
+        border: '#d1d5db',
+      },
+      danger: {
+        background: '#dc2626',
+        backgroundHover: '#b91c1c',
+        backgroundActive: '#991b1b',
+        foreground: '#ffffff',
+        border: '#dc2626',
+      },
+    },
+  },
+})
+```
+
+Render the theme once near the top of your document:
+
+```tsx
+function Layout(props: { children: RemixNode }) {
+  return (
+    <html>
+      <head>
+        <Theme />
+      </head>
+      <body>{props.children}</body>
+    </html>
+  )
+}
+```
+
+Consume the shared token contract from app code and first-party components:
+
+```tsx
+import { css } from 'remix/ui'
+import { theme } from 'remix/ui'
+
+let card = css({
+  backgroundColor: theme.surface.lvl0,
+  color: theme.colors.text.primary,
+  border: `1px solid ${theme.colors.border.subtle}`,
+  borderRadius: theme.radius.md,
+  paddingInline: theme.space.md,
+  paddingBlock: theme.space.sm,
+})
+
+<div mix={card} />
+```
+
+Render shared glyphs separately from the theme styles:
+
+```tsx
+import type { RemixNode } from 'remix/ui'
+import { Button } from '@remix-run/ui/button'
+import { Glyph } from '@remix-run/ui/glyph'
+import { RMX_01, RMX_01_GLYPHS } from '@remix-run/ui/theme'
+
+function Layout(props: { children: RemixNode }) {
+  return (
+    <html>
+      <head>
+        <RMX_01 />
+      </head>
+      <body>
+        <RMX_01_GLYPHS />
+        <Button startIcon={<Glyph name="add" />} tone="primary">
+          New project
+        </Button>
+        {props.children}
+      </body>
+    </html>
+  )
+}
+```
+
+## License
+
+See [LICENSE](https://github.com/remix-run/remix/blob/main/LICENSE)

package/dist/animation/animate-layout-mixin.d.ts

@@ -0,0 +1,12 @@
+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;
+/**
+ * Animates layout changes for an element using FLIP-style transforms.
+ *
+ * @param config Layout animation configuration.
+ * @returns A mixin descriptor for the target element.
+ */
+export declare function animateLayout<target extends EventTarget = Element>(config?: LayoutConfig): MixinDescriptor<target, [LayoutConfig?], ElementProps>;
+export {};

package/dist/animation/animate-layout-mixin.js

@@ -0,0 +1,214 @@
+import { createMixin } from "../runtime/mixins/mixin.js";
+const DEFAULT_DURATION = 200;
+const DEFAULT_EASING = 'ease-out';
+const SCALE_PRECISION = 0.0001;
+const TRANSLATE_PRECISION = 0.01;
+function createAxisDelta() {
+    return { translate: 0, scale: 1, origin: 0.5, originPoint: 0 };
+}
+function createDelta() {
+    return { x: createAxisDelta(), y: createAxisDelta() };
+}
+function mix(from, to, progress) {
+    return from + (to - from) * progress;
+}
+function isNear(value, target, threshold) {
+    return Math.abs(value - target) <= threshold;
+}
+function calcLength(axis) {
+    return axis.max - axis.min;
+}
+function calcAxisDelta(delta, source, target, origin = 0.5) {
+    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, source, target, layoutConfig) {
+    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, delta, progress) {
+    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, progress) {
+    mixAxisDelta(output.x, delta.x, progress);
+    mixAxisDelta(output.y, delta.y, progress);
+}
+function copyAxisDeltaInto(target, source) {
+    target.translate = source.translate;
+    target.scale = source.scale;
+    target.origin = source.origin;
+    target.originPoint = source.originPoint;
+}
+function copyDeltaInto(target, source) {
+    copyAxisDeltaInto(target.x, source.x);
+    copyAxisDeltaInto(target.y, source.y);
+}
+function buildProjectionTransform(delta, layoutConfig) {
+    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) {
+    return `${delta.x.origin * 100}% ${delta.y.origin * 100}%`;
+}
+function rectToBox(rect) {
+    return {
+        x: { min: rect.left, max: rect.right },
+        y: { min: rect.top, max: rect.bottom },
+    };
+}
+function measureNaturalBox(node) {
+    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) {
+    if (!config)
+        return null;
+    if (config === true)
+        return {};
+    return config;
+}
+function isVisualDeltaZero(delta, layoutConfig) {
+    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((handle) => {
+    let snapshot = null;
+    let currentConfig = true;
+    let currentDelta = null;
+    let animationProgress = 0;
+    let animation = null;
+    let scheduleProgressTracking = (duration, active) => {
+        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) => {
+        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);
+    });
+    handle.addEventListener('commit', (event) => {
+        let layoutConfig = resolveLayoutConfig(currentConfig);
+        let htmlNode = event.node;
+        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(config = true) {
+    return animateLayoutMixin(config);
+}
+//# sourceMappingURL=animate-layout-mixin.js.map

package/dist/animation/animate-layout-mixin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate-layout-mixin.js","sourceRoot":"","sources":["../../src/animation/animate-layout-mixin.ts"],"names":[],"mappings":"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"}

package/dist/animation/animate-mixins.d.ts

@@ -0,0 +1,29 @@
+import type { ElementProps } from '../runtime/jsx.ts';
+import type { MixinDescriptor } from '../runtime/mixins/mixin.ts';
+type AnimateTiming = {
+    duration: number;
+    easing?: string;
+    delay?: number;
+    composite?: CompositeOperation;
+    initial?: boolean;
+};
+type AnimateStyleProps = {
+    [property: string]: unknown;
+};
+export type AnimateMixinConfig = AnimateTiming & AnimateStyleProps;
+type AnimationConfig = true | false | null | undefined | AnimateMixinConfig;
+/**
+ * Animates an element when it is inserted into the DOM.
+ *
+ * @param config Entrance animation configuration.
+ * @returns A mixin descriptor for the target element.
+ */
+export declare function animateEntrance<target extends EventTarget = Element>(config?: AnimationConfig): MixinDescriptor<target, [AnimationConfig], ElementProps>;
+/**
+ * Animates an element when it is removed from the DOM.
+ *
+ * @param config Exit animation configuration.
+ * @returns A mixin descriptor for the target element.
+ */
+export declare function animateExit<target extends EventTarget = Element>(config?: AnimationConfig): MixinDescriptor<target, [AnimationConfig], ElementProps>;
+export {};