@remix-run/ui 0.2.0 → 0.4.0

package/dist/animation/demos/shared-layout.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@remix-run/ui/jsx-runtime";
+import { css, on } from '@remix-run/ui';
+import { animateEntrance, animateExit } from '@remix-run/ui/animation';
+const ease = 'cubic-bezier(0.26, 0.02, 0.23, 0.94)';
+function OverlapExample(handle) {
+    let shouldAnimate = false;
+    handle.queueTask(() => {
+        shouldAnimate = true;
+    });
+    return () => {
+        let { state } = handle.props;
+        let animationMix = [
+            animateExit({
+                opacity: 0,
+                transform: 'scale(0.8)',
+                duration: 300,
+                easing: ease,
+            }),
+        ];
+        if (shouldAnimate) {
+            animationMix.unshift(animateEntrance({
+                opacity: 0,
+                transform: 'scale(0.6)',
+                duration: 300,
+                easing: ease,
+            }));
+        }
+        return (_jsx("div", { 
+            // grid layout so children render in the same position
+            mix: [css({ display: 'grid', width: 80, height: 80, '& > *': { gridArea: '1 / 1' } })], children: state ? (_jsx("div", { mix: animationMix, children: _jsx(Circle, { filled: true, children: _jsx(FilledIcon, {}) }) }, "filled")) : (_jsx("div", { mix: animationMix, children: _jsx(Circle, { children: _jsx(OutlineIcon, {}) }) }, "outline")) }));
+    };
+}
+function WaitExample(handle) {
+    let shouldAnimate = false;
+    handle.queueTask(() => {
+        shouldAnimate = true;
+    });
+    return () => {
+        let { state } = handle.props;
+        let animationMix = [
+            animateExit({
+                opacity: 0,
+                transform: 'scale(0.8)',
+                duration: 300,
+                easing: ease,
+            }),
+        ];
+        if (shouldAnimate) {
+            animationMix.unshift(animateEntrance({
+                opacity: 0,
+                transform: 'scale(0.6)',
+                duration: 300,
+                easing: ease,
+                delay: 300,
+            }));
+        }
+        return (_jsx("div", { 
+            // grid layout so children render in the same position
+            mix: [css({ display: 'grid', width: 80, height: 80, '& > *': { gridArea: '1 / 1' } })], children: state ? (_jsx("div", { mix: animationMix, children: _jsx(Circle, { filled: true, children: _jsx(FilledIcon, {}) }) }, "filled")) : (_jsx("div", { mix: animationMix, children: _jsx(Circle, { children: _jsx(OutlineIcon, {}) }) }, "outline")) }));
+    };
+}
+export function SharedLayout(handle) {
+    let state = true;
+    return () => (_jsxs("div", { mix: [
+            css({
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: 16,
+            }),
+        ], children: [_jsxs("div", { mix: [css({ display: 'flex', gap: 16 })], children: [_jsx(OverlapExample, { state: state }), _jsx(WaitExample, { state: state })] }), _jsx("button", { mix: [
+                    css({
+                        backgroundColor: '#0f1115',
+                        color: '#f5f5f5',
+                        border: 'none',
+                        borderRadius: 8,
+                        padding: '12px 32px',
+                        fontSize: 14,
+                        fontWeight: 500,
+                        cursor: 'pointer',
+                        transition: 'transform 100ms ease-in-out',
+                        '&:active': {
+                            transform: 'scale(0.95)',
+                        },
+                    }),
+                    on('click', () => {
+                        state = !state;
+                        handle.update();
+                    }),
+                ], children: "Switch" })] }));
+}
+function Circle(handle) {
+    return () => (_jsx("div", { mix: [
+            css({
+                width: 80,
+                height: 80,
+                borderRadius: '50%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                boxSizing: 'border-box',
+                backgroundColor: handle.props.filled ? '#0f1115' : 'transparent',
+                color: handle.props.filled ? '#f5f5f5' : '#0f1115',
+                border: handle.props.filled ? '2px solid #0f1115' : '2px solid #0f1115',
+            }),
+        ], children: handle.props.children }));
+}
+function FilledIcon() {
+    return () => (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M21 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h6" }), _jsx("path", { d: "m21 3-9 9" }), _jsx("path", { d: "M15 3h6v6" })] }));
+}
+function OutlineIcon() {
+    return () => (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }), _jsx("path", { d: "M9 12h6" })] }));
+}
+//# sourceMappingURL=shared-layout.js.map

package/dist/animation/demos/shared-layout.js.map

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

package/dist/animation/demos/transition-options.d.ts

@@ -0,0 +1 @@
+export declare function TransitionOptions(): () => import("@remix-run/ui").RemixElement;

package/dist/animation/demos/transition-options.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "@remix-run/ui/jsx-runtime";
+import { css } from '@remix-run/ui';
+import { animateEntrance } from '@remix-run/ui/animation';
+export function TransitionOptions() {
+    return () => (_jsx("div", { mix: [
+            css({
+                width: 100,
+                height: 100,
+                borderRadius: '50%',
+                backgroundColor: '#9911ff',
+            }),
+            animateEntrance({
+                opacity: 0,
+                transform: 'scale(0.5)',
+                duration: 800,
+                delay: 500,
+                easing: 'cubic-bezier(0, 0.71, 0.2, 1.01)',
+            }),
+        ] }));
+}
+//# sourceMappingURL=transition-options.js.map

package/dist/animation/demos/transition-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transition-options.js","sourceRoot":"","sources":["../../../src/animation/demos/transition-options.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AACnC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAEzD,MAAM,UAAU,iBAAiB;IAC/B,OAAO,GAAG,EAAE,CAAC,CACX,cACE,GAAG,EAAE;YACH,GAAG,CAAC;gBACF,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,GAAG;gBACX,YAAY,EAAE,KAAK;gBACnB,eAAe,EAAE,SAAS;aAC3B,CAAC;YACF,eAAe,CAAC;gBACd,OAAO,EAAE,CAAC;gBACV,SAAS,EAAE,YAAY;gBACvB,QAAQ,EAAE,GAAG;gBACb,KAAK,EAAE,GAAG;gBACV,MAAM,EAAE,kCAAkC;aAC3C,CAAC;SACH,GACD,CACH,CAAA;AACH,CAAC"}

package/dist/animation/spring.d.ts

@@ -43,4 +43,26 @@ export interface SpringFunction {
         bounce: number;
     }>;
 }
+/**
+ * Create a spring-physics animation iterator for CSS transitions and WAAPI.
+ *
+ * The returned iterator can be:
+ * - Iterated to get position values (0→1)
+ * - Spread into WAAPI options: `element.animate(keyframes, { ...spring() })`
+ * - Stringified for CSS: `` `transform ${spring()}` ``
+ *
+ * @example
+ * // Named preset
+ * let s = spring('bouncy')
+ * element.style.transition = `transform ${s}`
+ *
+ * @example
+ * // Custom parameters
+ * let s = spring({ duration: 500, bounce: 0.2 })
+ * element.animate(keyframes, { ...s })
+ *
+ * @example
+ * // Transition helper for multiple properties
+ * element.style.transition = spring.transition(['transform', 'opacity'], 'snappy')
+ */
 export declare const spring: SpringFunction;

package/dist/animation/spring.js

@@ -53,6 +53,28 @@ function transition(property, presetOrOptions, overrides) {
     let properties = Array.isArray(property) ? property : [property];
     return properties.map((p) => `${p} ${s}`).join(', ');
 }
+/**
+ * Create a spring-physics animation iterator for CSS transitions and WAAPI.
+ *
+ * The returned iterator can be:
+ * - Iterated to get position values (0→1)
+ * - Spread into WAAPI options: `element.animate(keyframes, { ...spring() })`
+ * - Stringified for CSS: `` `transform ${spring()}` ``
+ *
+ * @example
+ * // Named preset
+ * let s = spring('bouncy')
+ * element.style.transition = `transform ${s}`
+ *
+ * @example
+ * // Custom parameters
+ * let s = spring({ duration: 500, bounce: 0.2 })
+ * element.animate(keyframes, { ...s })
+ *
+ * @example
+ * // Transition helper for multiple properties
+ * element.style.transition = spring.transition(['transform', 'opacity'], 'snappy')
+ */
 export const spring = Object.assign(createSpring, {
     transition,
     presets,

package/dist/animation/spring.js.map

@@ -1 +1 @@
-{"version":3,"file":"spring.js","sourceRoot":"","sources":["../../src/animation/spring.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAuCH,MAAM,OAAO,GAA+D;IAC1E,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE;IACvC,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;IACpC,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;CACvC,CAAA;AAED,0DAA0D;AAC1D,MAAM,SAAS,GAAG,IAAI,CAAA;AACtB,MAAM,SAAS,GAAG,KAAK,CAAA;AACvB,MAAM,eAAe,GAAG,MAAM,CAAA;AAC9B,MAAM,OAAO,GAAG,IAAI,GAAG,EAAE,CAAA,CAAC,qBAAqB;AAqC/C,SAAS,YAAY,CACnB,eAA8C,EAC9C,SAAyC;IAEzC,IAAI,OAAO,GAAG,cAAc,CAAC,eAAe,EAAE,SAAS,CAAC,CAAA;IACxD,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,aAAa,CAAC,OAAO,CAAC,CAAA;IAE/D,IAAI,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAA;IAEvC,QAAQ,CAAC,CAAC,SAAS;QACjB,IAAI,CAAC,GAAG,CAAC,CAAA;QACT,OAAO,CAAC,GAAG,YAAY,EAAE,CAAC;YACxB,MAAM,QAAQ,CAAC,CAAC,CAAC,CAAA;YACjB,CAAC,IAAI,OAAO,CAAA;QACd,CAAC;QACD,MAAM,CAAC,CAAA;IACT,CAAC;IAED,IAAI,IAAI,GAAG,SAAS,EAAE,CAAA;IAEtB,mEAAmE;IACnE,MAAM,CAAC,gBAAgB,CAAC,IAAI,EAAE;QAC5B,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE;QAC/C,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE;QAC3C,QAAQ,EAAE;YACR,KAAK;gBACH,OAAO,GAAG,QAAQ,MAAM,MAAM,EAAE,CAAA;YAClC,CAAC;SACF;KACF,CAAC,CAAA;IAEF,OAAO,IAAiC,CAAA;AAC1C,CAAC;AAED,SAAS,UAAU,CACjB,QAA2B,EAC3B,eAA8C,EAC9C,SAAyC;IAEzC,IAAI,CAAC,GACH,OAAO,eAAe,KAAK,QAAQ;QACjC,CAAC,CAAC,YAAY,CAAC,eAAe,EAAE,SAAS,CAAC;QAC1C,CAAC,CAAC,YAAY,CAAC,eAAe,CAAC,CAAA;IAEnC,IAAI,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;IAChE,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACtD,CAAC;AAED,MAAM,CAAC,MAAM,MAAM,GAAmB,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE;IAChE,UAAU;IACV,OAAO;CACR,CAAC,CAAA;AAEF,SAAS,cAAc,CACrB,eAA8C,EAC9C,SAAyC;IAEzC,IAAI,OAAO,eAAe,KAAK,QAAQ,EAAE,CAAC;QACxC,IAAI,MAAM,GAAG,OAAO,CAAC,eAAe,CAAC,CAAA;QACrC,OAAO;YACL,QAAQ,EAAE,SAAS,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ;YAChD,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,QAAQ,EAAE,SAAS,EAAE,QAAQ;SAC9B,CAAA;IACH,CAAC;IACD,IAAI,eAAe,EAAE,CAAC;QACpB,OAAO,eAAe,CAAA;IACxB,CAAC;IACD,6BAA6B;IAC7B,OAAO,OAAO,CAAC,MAAM,CAAA;AACvB,CAAC;AAQD,0BAA0B;AAC1B,SAAS,aAAa,CAAC,OAAsB;IAC3C,IAAI,EAAE,QAAQ,EAAE,UAAU,GAAG,GAAG,EAAE,MAAM,GAAG,CAAC,EAAE,QAAQ,GAAG,CAAC,EAAE,GAAG,OAAO,CAAA;IAEtE,uDAAuD;IACvD,IAAI,WAAW,GAAG,UAAU,GAAG,IAAI,CAAA;IAEnC,uDAAuD;IACvD,IAAI,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,WAAW,CAAA;IAExC,8BAA8B;IAC9B,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAA;IAE7C,qBAAqB;IACrB,yEAAyE;IACzE,uEAAuE;IACvE,IAAI,IAAI,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,CAAA;IAEtD,mDAAmD;IACnD,IAAI,QAAQ,GAAG,MAAM,GAAG,IAAI,CAAA;IAC5B,IAAI,UAAU,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAA,CAAC,yCAAyC;IAE3E,4CAA4C;IAC5C,IAAI,QAA+B,CAAA;IAEnC,IAAI,IAAI,GAAG,CAAC,EAAE,CAAC;QACb,kDAAkD;QAClD,IAAI,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC,CAAA;QAClD,QAAQ,GAAG,CAAC,CAAS,EAAE,EAAE;YACvB,IAAI,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,QAAQ,GAAG,CAAC,CAAC,CAAA;YAC7C,OAAO,CACL,CAAC;gBACD,QAAQ;oBACN,CAAC,CAAC,CAAC,UAAU,GAAG,IAAI,GAAG,QAAQ,CAAC,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAC5F,CAAA;QACH,CAAC,CAAA;IACH,CAAC;SAAM,IAAI,IAAI,GAAG,CAAC,EAAE,CAAC;QACpB,wDAAwD;QACxD,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC,CAAA;QACzC,IAAI,EAAE,GAAG,QAAQ,GAAG,CAAC,CAAC,IAAI,GAAG,QAAQ,CAAC,CAAA,CAAC,eAAe;QACtD,IAAI,EAAE,GAAG,QAAQ,GAAG,CAAC,CAAC,IAAI,GAAG,QAAQ,CAAC,CAAA,CAAC,eAAe;QACtD,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,UAAU,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,CAAA;QACrC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QACb,QAAQ,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAA;IAC3E,CAAC;SAAM,CAAC;QACN,2DAA2D;QAC3D,QAAQ,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAA;IAC3F,CAAC;IAED,4DAA4D;IAC5D,IAAI,gBAAgB,GAAG,GAAG,CAAA;IAC1B,SAAS,UAAU,CAAC,CAAS;QAC3B,IAAI,CAAC,GAAG,gBAAgB,EAAE,CAAC;YACzB,OAAO,CAAC,CAAC,QAAQ,CAAC,gBAAgB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,GAAG,IAAI,CAAA;QAC/E,CAAC;QACD,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,GAAG,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACnF,CAAC;IAED,qBAAqB;IACrB,IAAI,YAAY,GAAG,eAAe,CAAA;IAClC,IAAI,IAAI,GAAG,EAAE,CAAA;IAEb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,eAAe,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC;QAC/C,IAAI,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;QACrB,IAAI,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA;QACjC,IAAI,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAA;QAEpC,IAAI,GAAG,IAAI,SAAS,IAAI,YAAY,IAAI,SAAS,EAAE,CAAC;YAClD,YAAY,GAAG,CAAC,CAAA;YAChB,MAAK;QACP,CAAC;IACH,CAAC;IAED,sBAAsB;IACtB,IAAI,MAAM,GAAG,cAAc,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;IAEnD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,CAAA;AAC3C,CAAC;AAED,sDAAsD;AACtD,SAAS,cAAc,CAAC,QAA+B,EAAE,YAAoB;IAC3E,IAAI,MAAM,GAAG,cAAc,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;IAEnD,OAAO,UAAU,MAAM;SACpB,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACZ,IAAI,MAAM,GAAG,CAAC,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,CAAA;QACpC,IAAI,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,KAAK,CAAA;QAC5D,IAAI,CAAC,KAAK,CAAC,IAAI,MAAM,EAAE,CAAC;YACtB,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAA;QAC7C,CAAC;QACD,IAAI,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,GAAG,IAAI,CAAC,GAAG,EAAE,CAAA;QAC1D,OAAO,GAAG,KAAK,IAAI,OAAO,GAAG,CAAA;IAC/B,CAAC,CAAC;SACD,IAAI,CAAC,IAAI,CAAC,GAAG,CAAA;AAClB,CAAC;AAED,8EAA8E;AAC9E,SAAS,cAAc,CACrB,OAA8B,EAC9B,QAAgB,EAChB,YAAoB,KAAK,EACzB,aAAqB,CAAC;IAEtB,IAAI,MAAM,GAAwC,EAAE,CAAA;IAEpD,SAAS,QAAQ,CAAC,CAAS,EAAE,KAAa;QACxC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;YAC3D,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;QAC3B,CAAC;IACH,CAAC;IAED,SAAS,SAAS,CAAC,EAAU,EAAE,EAAU,EAAE,EAAU,EAAE,EAAU,EAAE,QAAgB,CAAC;QAClF,IAAI,KAAK,GAAG,EAAE,EAAE,CAAC;YACf,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;YAChB,OAAM;QACR,CAAC;QAED,IAAI,IAAI,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAA;QACxB,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;QACxB,IAAI,OAAO,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAA;QAC3B,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,OAAO,CAAC,CAAA;QAEpC,IAAI,KAAK,GAAG,SAAS,IAAI,EAAE,GAAG,EAAE,GAAG,UAAU,EAAE,CAAC;YAC9C,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC,CAAA;YACxC,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,GAAG,CAAC,CAAC,CAAA;QAC1C,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;QAClB,CAAC;IACH,CAAC;IAED,SAAS,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAA;IACrD,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAA;IAErC,OAAO,MAAM,CAAA;AACf,CAAC"}
+{"version":3,"file":"spring.js","sourceRoot":"","sources":["../../src/animation/spring.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAuCH,MAAM,OAAO,GAA+D;IAC1E,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE;IACvC,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,EAAE;IACpC,MAAM,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE;CACvC,CAAA;AAED,0DAA0D;AAC1D,MAAM,SAAS,GAAG,IAAI,CAAA;AACtB,MAAM,SAAS,GAAG,KAAK,CAAA;AACvB,MAAM,eAAe,GAAG,MAAM,CAAA;AAC9B,MAAM,OAAO,GAAG,IAAI,GAAG,EAAE,CAAA,CAAC,qBAAqB;AAqC/C,SAAS,YAAY,CACnB,eAA8C,EAC9C,SAAyC;IAEzC,IAAI,OAAO,GAAG,cAAc,CAAC,eAAe,EAAE,SAAS,CAAC,CAAA;IACxD,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,aAAa,CAAC,OAAO,CAAC,CAAA;IAE/D,IAAI,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAA;IAEvC,QAAQ,CAAC,CAAC,SAAS;QACjB,IAAI,CAAC,GAAG,CAAC,CAAA;QACT,OAAO,CAAC,GAAG,YAAY,EAAE,CAAC;YACxB,MAAM,QAAQ,CAAC,CAAC,CAAC,CAAA;YACjB,CAAC,IAAI,OAAO,CAAA;QACd,CAAC;QACD,MAAM,CAAC,CAAA;IACT,CAAC;IAED,IAAI,IAAI,GAAG,SAAS,EAAE,CAAA;IAEtB,mEAAmE;IACnE,MAAM,CAAC,gBAAgB,CAAC,IAAI,EAAE;QAC5B,QAAQ,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE;QAC/C,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE;QAC3C,QAAQ,EAAE;YACR,KAAK;gBACH,OAAO,GAAG,QAAQ,MAAM,MAAM,EAAE,CAAA;YAClC,CAAC;SACF;KACF,CAAC,CAAA;IAEF,OAAO,IAAiC,CAAA;AAC1C,CAAC;AAED,SAAS,UAAU,CACjB,QAA2B,EAC3B,eAA8C,EAC9C,SAAyC;IAEzC,IAAI,CAAC,GACH,OAAO,eAAe,KAAK,QAAQ;QACjC,CAAC,CAAC,YAAY,CAAC,eAAe,EAAE,SAAS,CAAC;QAC1C,CAAC,CAAC,YAAY,CAAC,eAAe,CAAC,CAAA;IAEnC,IAAI,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAA;IAChE,OAAO,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA;AACtD,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAmB,MAAM,CAAC,MAAM,CAAC,YAAY,EAAE;IAChE,UAAU;IACV,OAAO;CACR,CAAC,CAAA;AAEF,SAAS,cAAc,CACrB,eAA8C,EAC9C,SAAyC;IAEzC,IAAI,OAAO,eAAe,KAAK,QAAQ,EAAE,CAAC;QACxC,IAAI,MAAM,GAAG,OAAO,CAAC,eAAe,CAAC,CAAA;QACrC,OAAO;YACL,QAAQ,EAAE,SAAS,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ;YAChD,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,QAAQ,EAAE,SAAS,EAAE,QAAQ;SAC9B,CAAA;IACH,CAAC;IACD,IAAI,eAAe,EAAE,CAAC;QACpB,OAAO,eAAe,CAAA;IACxB,CAAC;IACD,6BAA6B;IAC7B,OAAO,OAAO,CAAC,MAAM,CAAA;AACvB,CAAC;AAQD,0BAA0B;AAC1B,SAAS,aAAa,CAAC,OAAsB;IAC3C,IAAI,EAAE,QAAQ,EAAE,UAAU,GAAG,GAAG,EAAE,MAAM,GAAG,CAAC,EAAE,QAAQ,GAAG,CAAC,EAAE,GAAG,OAAO,CAAA;IAEtE,uDAAuD;IACvD,IAAI,WAAW,GAAG,UAAU,GAAG,IAAI,CAAA;IAEnC,uDAAuD;IACvD,IAAI,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,GAAG,WAAW,CAAA;IAExC,8BAA8B;IAC9B,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAA;IAE7C,qBAAqB;IACrB,yEAAyE;IACzE,uEAAuE;IACvE,IAAI,IAAI,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM,CAAC,CAAA;IAEtD,mDAAmD;IACnD,IAAI,QAAQ,GAAG,MAAM,GAAG,IAAI,CAAA;IAC5B,IAAI,UAAU,GAAG,CAAC,QAAQ,GAAG,IAAI,CAAA,CAAC,yCAAyC;IAE3E,4CAA4C;IAC5C,IAAI,QAA+B,CAAA;IAEnC,IAAI,IAAI,GAAG,CAAC,EAAE,CAAC;QACb,kDAAkD;QAClD,IAAI,MAAM,GAAG,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI,GAAG,IAAI,CAAC,CAAA;QAClD,QAAQ,GAAG,CAAC,CAAS,EAAE,EAAE;YACvB,IAAI,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,GAAG,QAAQ,GAAG,CAAC,CAAC,CAAA;YAC7C,OAAO,CACL,CAAC;gBACD,QAAQ;oBACN,CAAC,CAAC,CAAC,UAAU,GAAG,IAAI,GAAG,QAAQ,CAAC,GAAG,MAAM,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAC5F,CAAA;QACH,CAAC,CAAA;IACH,CAAC;SAAM,IAAI,IAAI,GAAG,CAAC,EAAE,CAAC;QACpB,wDAAwD;QACxD,IAAI,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,GAAG,CAAC,CAAC,CAAA;QACzC,IAAI,EAAE,GAAG,QAAQ,GAAG,CAAC,CAAC,IAAI,GAAG,QAAQ,CAAC,CAAA,CAAC,eAAe;QACtD,IAAI,EAAE,GAAG,QAAQ,GAAG,CAAC,CAAC,IAAI,GAAG,QAAQ,CAAC,CAAA,CAAC,eAAe;QACtD,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,UAAU,CAAC,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,CAAA;QACrC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QACb,QAAQ,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC,CAAA;IAC3E,CAAC;SAAM,CAAC;QACN,2DAA2D;QAC3D,QAAQ,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,UAAU,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAA;IAC3F,CAAC;IAED,4DAA4D;IAC5D,IAAI,gBAAgB,GAAG,GAAG,CAAA;IAC1B,SAAS,UAAU,CAAC,CAAS;QAC3B,IAAI,CAAC,GAAG,gBAAgB,EAAE,CAAC;YACzB,OAAO,CAAC,CAAC,QAAQ,CAAC,gBAAgB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,gBAAgB,CAAC,GAAG,IAAI,CAAA;QAC/E,CAAC;QACD,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,QAAQ,CAAC,CAAC,GAAG,gBAAgB,CAAC,CAAC,GAAG,gBAAgB,CAAC,GAAG,IAAI,CAAA;IACnF,CAAC;IAED,qBAAqB;IACrB,IAAI,YAAY,GAAG,eAAe,CAAA;IAClC,IAAI,IAAI,GAAG,EAAE,CAAA;IAEb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,eAAe,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC;QAC/C,IAAI,GAAG,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;QACrB,IAAI,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAA;QACjC,IAAI,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAA;QAEpC,IAAI,GAAG,IAAI,SAAS,IAAI,YAAY,IAAI,SAAS,EAAE,CAAC;YAClD,YAAY,GAAG,CAAC,CAAA;YAChB,MAAK;QACP,CAAC;IACH,CAAC;IAED,sBAAsB;IACtB,IAAI,MAAM,GAAG,cAAc,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;IAEnD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,CAAA;AAC3C,CAAC;AAED,sDAAsD;AACtD,SAAS,cAAc,CAAC,QAA+B,EAAE,YAAoB;IAC3E,IAAI,MAAM,GAAG,cAAc,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;IAEnD,OAAO,UAAU,MAAM;SACpB,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACZ,IAAI,MAAM,GAAG,CAAC,KAAK,MAAM,CAAC,MAAM,GAAG,CAAC,CAAA;QACpC,IAAI,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,GAAG,KAAK,CAAA;QAC5D,IAAI,CAAC,KAAK,CAAC,IAAI,MAAM,EAAE,CAAC;YACtB,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAA;QAC7C,CAAC;QACD,IAAI,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,GAAG,IAAI,CAAC,GAAG,EAAE,CAAA;QAC1D,OAAO,GAAG,KAAK,IAAI,OAAO,GAAG,CAAA;IAC/B,CAAC,CAAC;SACD,IAAI,CAAC,IAAI,CAAC,GAAG,CAAA;AAClB,CAAC;AAED,8EAA8E;AAC9E,SAAS,cAAc,CACrB,OAA8B,EAC9B,QAAgB,EAChB,YAAoB,KAAK,EACzB,aAAqB,CAAC;IAEtB,IAAI,MAAM,GAAwC,EAAE,CAAA;IAEpD,SAAS,QAAQ,CAAC,CAAS,EAAE,KAAa;QACxC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,IAAI,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;YAC3D,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAA;QAC3B,CAAC;IACH,CAAC;IAED,SAAS,SAAS,CAAC,EAAU,EAAE,EAAU,EAAE,EAAU,EAAE,EAAU,EAAE,QAAgB,CAAC;QAClF,IAAI,KAAK,GAAG,EAAE,EAAE,CAAC;YACf,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;YAChB,OAAM;QACR,CAAC;QAED,IAAI,IAAI,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAA;QACxB,IAAI,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;QACxB,IAAI,OAAO,GAAG,CAAC,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,CAAA;QAC3B,IAAI,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,OAAO,CAAC,CAAA;QAEpC,IAAI,KAAK,GAAG,SAAS,IAAI,EAAE,GAAG,EAAE,GAAG,UAAU,EAAE,CAAC;YAC9C,SAAS,CAAC,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC,CAAA;YACxC,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,GAAG,CAAC,CAAC,CAAA;QAC1C,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;QAClB,CAAC;IACH,CAAC;IAED,SAAS,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAA;IACrD,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAA;IAErC,OAAO,MAAM,CAAA;AACf,CAAC"}

package/dist/{components/breadcrumbs/breadcrumbs.js → breadcrumbs/index.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "@remix-run/ui/jsx-runtime";
 import { css, createElement } from '@remix-run/ui';
-import { Glyph } from "../glyph/glyph.js";
-import { theme } from "../../theme/theme.js";
+import { ChevronRightIcon } from "../shared/icons.js";
+import { componentStyleValues as styles } from "../shared/style-values.js";
 const rootCss = css({
     minWidth: 0,
 });
@@ -9,7 +9,7 @@ const listCss = css({
     display: 'flex',
     flexWrap: 'wrap',
     alignItems: 'center',
-    gap: `${theme.space.xs} ${theme.space.sm}`,
+    gap: `${styles.space.xs} ${styles.space.sm}`,
     minWidth: 0,
     margin: 0,
     padding: 0,
@@ -25,31 +25,31 @@ const separatorCss = css({
     alignItems: 'center',
     justifyContent: 'center',
     flexShrink: 0,
-    width: theme.fontSize.sm,
-    height: theme.fontSize.sm,
-    color: theme.colors.text.muted,
+    width: styles.fontSize.sm,
+    height: styles.fontSize.sm,
+    color: styles.colors.text.muted,
 });
 const linkCss = css({
-    color: theme.colors.text.secondary,
-    fontSize: theme.fontSize.sm,
-    lineHeight: theme.lineHeight.normal,
+    color: styles.colors.text.secondary,
+    fontSize: styles.fontSize.sm,
+    lineHeight: styles.lineHeight.normal,
     textDecoration: 'none',
     whiteSpace: 'nowrap',
     '&:hover': {
-        color: theme.colors.text.primary,
+        color: styles.colors.text.primary,
     },
 });
 const currentCss = css({
-    color: theme.colors.text.primary,
-    fontSize: theme.fontSize.sm,
-    lineHeight: theme.lineHeight.normal,
-    fontWeight: theme.fontWeight.medium,
+    color: styles.colors.text.primary,
+    fontSize: styles.fontSize.sm,
+    lineHeight: styles.lineHeight.normal,
+    fontWeight: styles.fontWeight.medium,
     whiteSpace: 'nowrap',
 });
 const textCss = css({
-    color: theme.colors.text.secondary,
-    fontSize: theme.fontSize.sm,
-    lineHeight: theme.lineHeight.normal,
+    color: styles.colors.text.secondary,
+    fontSize: styles.fontSize.sm,
+    lineHeight: styles.lineHeight.normal,
     whiteSpace: 'nowrap',
 });
 export function Breadcrumbs(handle) {
@@ -59,7 +59,7 @@ export function Breadcrumbs(handle) {
         if (currentIndex === -1) {
             currentIndex = Math.max(0, items.length - 1);
         }
-        let separatorContent = separator ?? _jsx(Glyph, { name: "chevronRight" });
+        let separatorContent = separator ?? _jsx(ChevronRightIcon, {});
         return (_jsx("nav", { "aria-label": ariaLabel ?? 'Breadcrumb', ...navProps, mix: [rootCss, mix], children: _jsx("ol", { mix: listCss, children: items.flatMap((item, index) => {
                     let isCurrent = index === currentIndex;
                     let content = isCurrent ? (_jsx("span", { "aria-current": "page", mix: currentCss, children: item.label })) : item.href ? (_jsx("a", { href: item.href, mix: linkCss, children: item.label })) : (_jsx("span", { mix: textCss, children: item.label }));
@@ -73,4 +73,4 @@ export function Breadcrumbs(handle) {
                 }) }) }));
     };
 }
-//# sourceMappingURL=breadcrumbs.js.map
+//# sourceMappingURL=index.js.map

package/dist/breadcrumbs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/breadcrumbs/index.tsx"],"names":[],"mappings":"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"}

package/dist/button/index.d.ts

@@ -0,0 +1,15 @@
+import type { CSSMixinDescriptor, ElementProps, MixinDescriptor } from '@remix-run/ui';
+export type ButtonSize = 'md' | 'lg';
+export type ButtonTone = 'neutral' | 'primary' | 'ghost';
+export interface ButtonOptions {
+    size?: ButtonSize;
+    tone?: ButtonTone;
+}
+type ButtonMixin = readonly [
+    MixinDescriptor<Element, [], ElementProps>,
+    CSSMixinDescriptor,
+    CSSMixinDescriptor,
+    CSSMixinDescriptor
+];
+export declare function button(options?: ButtonOptions): ButtonMixin;
+export default button;

package/dist/button/index.js

@@ -0,0 +1,128 @@
+import { createMixin, css } from '@remix-run/ui';
+import { renderMixinElement } from "../runtime/mixins/mixin.js";
+const buttonDefaultAttrs = createMixin((handle, hostType) => (props) => {
+    if (hostType !== 'button' || props.type !== undefined) {
+        return handle.element;
+    }
+    return renderMixinElement(handle.element, {
+        ...props,
+        type: 'button',
+    });
+})();
+const baseStyle = css({
+    '--rmx-button-shadow': '0 0 0 0 rgba(0, 0, 0, 0)',
+    '--rmx-button-focus-shadow': '0 0 0 1px #3573F6, var(--rmx-button-shadow), 0 0 0 4px rgba(53, 115, 246, 0.1), 0 6px 32px 4px rgba(53, 115, 246, 0.08), inset 0 0 8px 1px rgba(53, 115, 246, 0.05)',
+    appearance: 'none',
+    margin: 0,
+    boxSizing: 'border-box',
+    cursor: 'revert',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'row',
+    gap: '4px',
+    paddingBlock: 0,
+    width: 'max-content',
+    maxWidth: '100%',
+    borderRadius: '999px',
+    fontFamily: '"Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif',
+    fontStyle: 'normal',
+    fontWeight: 500,
+    fontFeatureSettings: '"cv01" on, "ss01" on',
+    letterSpacing: 0,
+    whiteSpace: 'nowrap',
+    textDecoration: 'none',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+    verticalAlign: 'top',
+    boxShadow: 'var(--rmx-button-shadow)',
+    '&:focus-visible': {
+        outline: 0,
+        boxShadow: 'var(--rmx-button-focus-shadow)',
+    },
+    '&:disabled, &[aria-disabled="true"]': {
+        cursor: 'not-allowed',
+        opacity: 0.55,
+    },
+});
+const mediumStyle = css({
+    height: '26px',
+    minHeight: '26px',
+    paddingInline: '12px',
+    fontSize: '12px',
+    lineHeight: '17px',
+    '--rmx-button-neutral-shadow-alpha': '0.03',
+});
+const largeStyle = css({
+    height: '30px',
+    minHeight: '30px',
+    paddingInline: '12px',
+    fontSize: '13px',
+    lineHeight: '20px',
+    '--rmx-button-neutral-shadow-alpha': '0.04',
+});
+const neutralStyle = css({
+    background: '#FCFCFC',
+    border: '1px solid rgba(0, 0, 0, 0.08)',
+    '--rmx-button-shadow': '0 -2px 0 -2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.75), 0 1px 0 #FFFFFF, 0 2px 4px -1px rgb(0 0 0 / var(--rmx-button-neutral-shadow-alpha)), inset 0 2px 0 #FFFFFF, inset 0 -1px 0 rgba(0, 0, 0, 0.05)',
+    color: '#101010',
+    textShadow: '0 1px 0 #FFFFFF',
+    '&:hover:not(:disabled):not([aria-disabled="true"])': {
+        background: '#FFFFFF',
+        borderColor: 'rgba(0, 0, 0, 0.1)',
+        '--rmx-button-shadow': '0 -2px 0 -2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.8), 0 1px 0 #FFFFFF, 0 3px 6px -2px rgb(0 0 0 / calc(var(--rmx-button-neutral-shadow-alpha) + 0.03)), inset 0 2px 0 #FFFFFF, inset 0 -1px 0 rgba(0, 0, 0, 0.05)',
+    },
+    '&:active:not(:disabled):not([aria-disabled="true"]), &[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"])': {
+        background: '#F7F7F7',
+        borderColor: 'rgba(0, 0, 0, 0.12)',
+        '--rmx-button-shadow': '0 0 0 1px rgba(255, 255, 255, 0.65), inset 0 1px 2px rgba(0, 0, 0, 0.08), inset 0 -1px 0 rgba(255, 255, 255, 0.8)',
+        textShadow: 'none',
+    },
+});
+const primaryStyle = css({
+    background: 'radial-gradient(50% 50% at 50% 0%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(49.59% 37.11% at 50.41% 101.56%, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 66.46%), #101010',
+    border: 0,
+    '--rmx-button-shadow': '0 16px 16px -8px rgba(0, 0, 0, 0.1), 0 8px 8px -4px rgba(0, 0, 0, 0.1), 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 2px 2px -1px rgba(0, 0, 0, 0.1), inset 0 0 4px 2px #101010, inset 0 0 4px 2px rgba(255, 255, 255, 0.1), inset 0 0 12px -6px rgba(255, 255, 255, 0.75)',
+    color: '#FFFFFF',
+    textShadow: '0 1px 1px #000000',
+    '&:hover:not(:disabled):not([aria-disabled="true"])': {
+        background: 'radial-gradient(50% 50% at 50% 0%, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(49.59% 37.11% at 50.41% 101.56%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 66.46%), #171717',
+        '--rmx-button-shadow': '0 18px 18px -10px rgba(0, 0, 0, 0.14), 0 8px 8px -4px rgba(0, 0, 0, 0.12), 0 4px 4px -2px rgba(0, 0, 0, 0.1), 0 2px 2px -1px rgba(0, 0, 0, 0.1), inset 0 0 4px 2px #101010, inset 0 0 4px 2px rgba(255, 255, 255, 0.13), inset 0 0 12px -6px rgba(255, 255, 255, 0.85)',
+    },
+    '&:active:not(:disabled):not([aria-disabled="true"]), &[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"])': {
+        background: 'radial-gradient(50% 50% at 50% 0%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(49.59% 37.11% at 50.41% 101.56%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 66.46%), #080808',
+        '--rmx-button-shadow': '0 2px 2px -1px rgba(0, 0, 0, 0.14), inset 0 0 4px 2px #050505, inset 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 0 10px -6px rgba(255, 255, 255, 0.55)',
+        textShadow: '0 1px 1px #000000',
+    },
+    '&:active:not(:disabled):not([aria-disabled="true"])': {
+        transform: 'translateY(1px)',
+    },
+});
+const ghostStyle = css({
+    background: 'transparent',
+    border: '1px solid transparent',
+    '--rmx-button-shadow': '0 0 0 0 rgba(0, 0, 0, 0)',
+    color: '#101010',
+    textShadow: 'none',
+    '&:hover:not(:disabled):not([aria-disabled="true"])': {
+        background: 'rgba(16, 16, 16, 0.05)',
+    },
+    '&:active:not(:disabled):not([aria-disabled="true"]), &[aria-pressed="true"]:not(:disabled):not([aria-disabled="true"])': {
+        background: 'rgba(16, 16, 16, 0.08)',
+    },
+});
+const sizeStyles = {
+    md: mediumStyle,
+    lg: largeStyle,
+};
+const toneStyles = {
+    neutral: neutralStyle,
+    primary: primaryStyle,
+    ghost: ghostStyle,
+};
+export function button(options = {}) {
+    let { size = 'md', tone = 'neutral' } = options;
+    return [buttonDefaultAttrs, baseStyle, sizeStyles[size], toneStyles[tone]];
+}
+export default button;
+//# sourceMappingURL=index.js.map

package/dist/button/index.js.map

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

package/dist/checkbox/index.d.ts

@@ -0,0 +1,14 @@
+import type { CSSMixinDescriptor, ElementProps, MixinDescriptor } from '@remix-run/ui';
+export type CheckboxSize = 'md' | 'lg';
+export type CheckboxState = 'checked' | 'mixed' | 'unchecked';
+export interface CheckboxOptions {
+    size?: CheckboxSize;
+    state?: CheckboxState;
+}
+type CheckboxMixin = readonly [
+    MixinDescriptor<Element, [state?: CheckboxState], ElementProps>,
+    CSSMixinDescriptor,
+    CSSMixinDescriptor
+];
+export declare function checkbox(options?: CheckboxOptions): CheckboxMixin;
+export default checkbox;

package/dist/checkbox/index.js

@@ -0,0 +1,125 @@
+import { createMixin, css } from '@remix-run/ui';
+import { renderMixinElement } from "../runtime/mixins/mixin.js";
+import { controlFocusShadow } from "../shared/focus-styles.js";
+const checkedSelector = '&:checked, &[aria-checked="true"], &[data-state="checked"]';
+const mixedSelector = '&:indeterminate, &[indeterminate], &[aria-checked="mixed"], &[data-state="mixed"]';
+const checkedMarkSelector = '&:checked::before, &[aria-checked="true"]::before, &[data-state="checked"]::before';
+const mixedMarkSelector = '&:indeterminate::before, &[indeterminate]::before, &[aria-checked="mixed"]::before, &[data-state="mixed"]::before';
+const enabledSelector = ':not(:disabled):not([aria-disabled="true"])';
+const checkedActiveSelector = '&:checked:active:not(:disabled):not([aria-disabled="true"]), &[aria-checked="true"]:active:not(:disabled):not([aria-disabled="true"]), &[data-state="checked"]:active:not(:disabled):not([aria-disabled="true"])';
+const mixedActiveSelector = '&:indeterminate:active:not(:disabled):not([aria-disabled="true"]), &[indeterminate]:active:not(:disabled):not([aria-disabled="true"]), &[aria-checked="mixed"]:active:not(:disabled):not([aria-disabled="true"]), &[data-state="mixed"]:active:not(:disabled):not([aria-disabled="true"])';
+const checkIconUrl = "url(\"data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_2_2264)'%3E%3Cpath d='M2.75 5.76562L5.10156 8.25L9.23438 1.75' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.75 5.76562L5.10156 8.25L9.23438 1.75' stroke='url(%23paint0_linear_2_2264)' stroke-opacity='0.1' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_2_2264' x='0' y='0' width='11.9845' height='12' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/%3E%3CfeBlend mode='overlay' in2='BackgroundImageFix' result='effect1_dropShadow_2_2264'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_2_2264' result='shape'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_2_2264' x1='5.99219' y1='1.75' x2='5.99219' y2='8.25' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0.25' stop-color='%233573F6' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%233573F6'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E\")";
+const checkboxAriaChecked = {
+    checked: 'true',
+    mixed: 'mixed',
+    unchecked: 'false',
+};
+const checkboxDefaultAttrs = createMixin((handle, hostType) => (state, props) => {
+    let stateProps = state === undefined
+        ? props
+        : {
+            ...props,
+            'aria-checked': props['aria-checked'] ?? checkboxAriaChecked[state],
+            'data-state': props['data-state'] ?? state,
+        };
+    if (hostType !== 'input' || stateProps.type !== undefined) {
+        return state === undefined ? handle.element : renderMixinElement(handle.element, stateProps);
+    }
+    return renderMixinElement(handle.element, {
+        ...stateProps,
+        type: 'checkbox',
+    });
+});
+const baseStyle = css({
+    appearance: 'none',
+    WebkitAppearance: 'none',
+    margin: 0,
+    boxSizing: 'border-box',
+    position: 'relative',
+    display: 'inline-grid',
+    placeItems: 'center',
+    width: 'var(--rmx-checkbox-size)',
+    height: 'var(--rmx-checkbox-size)',
+    minWidth: 'var(--rmx-checkbox-size)',
+    minHeight: 'var(--rmx-checkbox-size)',
+    padding: 0,
+    border: 0,
+    borderRadius: 'var(--rmx-checkbox-radius)',
+    background: '#FFFFFF',
+    boxShadow: '0 2px 2px -1px rgba(0, 0, 0, 0.05), 0 3px 4px -1.5px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 5px 16px -2.5px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.12)',
+    color: '#FFFFFF',
+    verticalAlign: 'middle',
+    flex: 'none',
+    '&::before': {
+        content: '""',
+        position: 'absolute',
+        opacity: 0,
+        pointerEvents: 'none',
+    },
+    '&:disabled, &[aria-disabled="true"]': {
+        opacity: 0.55,
+    },
+    [`${checkedSelector}, ${mixedSelector}`]: {
+        background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 24.52%, rgba(0, 0, 0, 0.1) 100%), #3573F6',
+        backgroundBlendMode: 'overlay, normal',
+        borderRadius: 'var(--rmx-checkbox-active-radius)',
+        boxShadow: '0 1px 1px -0.5px rgba(9, 68, 190, 0.12), 0 2px 2px -1px rgba(9, 68, 190, 0.12), 0 4px 4px -2px rgba(9, 68, 190, 0.12), 0 8px 8px -4px rgba(9, 68, 190, 0.12), 0 2px 8px rgba(53, 115, 246, 0.4), inset 0 0 3px 1px rgba(0, 0, 0, 0.1)',
+    },
+    [checkedMarkSelector]: {
+        opacity: 1,
+        left: '50%',
+        top: '50%',
+        width: 'var(--rmx-checkbox-check-size)',
+        height: 'var(--rmx-checkbox-check-size)',
+        background: `${checkIconUrl} center / contain no-repeat`,
+        transform: 'translate(-50%, calc(-50% + var(--rmx-checkbox-check-y)))',
+    },
+    [mixedMarkSelector]: {
+        opacity: 1,
+        left: '50%',
+        top: '50%',
+        width: 'var(--rmx-checkbox-mixed-width)',
+        height: 'var(--rmx-checkbox-mixed-height)',
+        border: 0,
+        borderRadius: '999px',
+        background: 'currentColor',
+        filter: 'drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4))',
+        transform: 'translate(-50%, -50%)',
+    },
+    [`&:active${enabledSelector}`]: {
+        boxShadow: '0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.14), inset 0 1px 2px rgba(0, 0, 0, 0.08)',
+    },
+    [`${checkedActiveSelector}, ${mixedActiveSelector}`]: {
+        boxShadow: '0 1px 1px -0.5px rgba(9, 68, 190, 0.1), 0 2px 2px -1px rgba(9, 68, 190, 0.1), 0 4px 4px -2px rgba(9, 68, 190, 0.1), 0 6px 8px -4px rgba(9, 68, 190, 0.1), 0 2px 6px rgba(53, 115, 246, 0.32), inset 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 0 3px 1px rgba(0, 0, 0, 0.12)',
+    },
+    '&:focus-visible': {
+        outline: 0,
+        boxShadow: controlFocusShadow,
+    },
+});
+const sizeStyles = {
+    md: css({
+        '--rmx-checkbox-size': '16px',
+        '--rmx-checkbox-radius': '4px',
+        '--rmx-checkbox-active-radius': '5px',
+        '--rmx-checkbox-check-size': '12px',
+        '--rmx-checkbox-check-y': '1px',
+        '--rmx-checkbox-mixed-width': '7px',
+        '--rmx-checkbox-mixed-height': '2px',
+    }),
+    lg: css({
+        '--rmx-checkbox-size': '20px',
+        '--rmx-checkbox-radius': '5px',
+        '--rmx-checkbox-active-radius': '6px',
+        '--rmx-checkbox-check-size': '15px',
+        '--rmx-checkbox-check-y': '1.25px',
+        '--rmx-checkbox-mixed-width': '9px',
+        '--rmx-checkbox-mixed-height': '2.25px',
+    }),
+};
+export function checkbox(options = {}) {
+    let { size = 'md', state } = options;
+    return [checkboxDefaultAttrs(state), baseStyle, sizeStyles[size]];
+}
+export default checkbox;
+//# sourceMappingURL=index.js.map

package/dist/checkbox/index.js.map

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