@remix-run/ui 0.3.0 → 0.4.0

package/src/toggle/index.tsx

@@ -0,0 +1,134 @@
+import { createMixin, css } from '@remix-run/ui'
+import type { CSSMixinDescriptor, ElementProps, MixinDescriptor } from '@remix-run/ui'
+import { renderMixinElement } from '../runtime/mixins/mixin.ts'
+import { controlFocusShadow } from '../shared/focus-styles.ts'
+
+export { ToggleChangeEvent, onToggleChange } from '@remix-run/ui/toggle/primitives'
+
+export type ToggleSize = 'md' | 'lg'
+
+export interface ToggleOptions {
+  size?: ToggleSize
+}
+
+type ToggleMixin = readonly [MixinDescriptor<Element, [], ElementProps>, CSSMixinDescriptor]
+
+const checkedSelector = '&:checked, &[aria-checked="true"], &[data-state="checked"]'
+const checkedThumbSelector =
+  '&:checked::before, &[aria-checked="true"]::before, &[data-state="checked"]::before'
+const uncheckedThumbBackground =
+  'linear-gradient(180deg, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.04) 100%), #FFFFFF'
+const uncheckedThumbShadow =
+  '0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.12), 0 2px 2px -1px rgba(0, 0, 0, 0.12), 0 4px 4px -2px rgba(0, 0, 0, 0.12), inset 0 0 2px 1px #FFFFFF'
+const checkedThumbBackground =
+  'linear-gradient(180deg, rgba(112, 199, 84, 0) 25%, rgba(112, 199, 84, 0.25) 100%), #FFFFFF'
+const checkedThumbShadow =
+  '0 1px 2px -0.5px rgba(66, 134, 44, 0.6), 0 2px 4px -1px rgba(66, 134, 44, 0.6), 0 4px 6px -2px rgba(66, 134, 44, 0.6), 0 0 0 0.5px rgba(0, 0, 0, 0.28), inset 0 0 2px 1px #FFFFFF'
+
+const toggleDefaultAttrs = createMixin<Element, [], ElementProps>((handle, hostType) => (props) => {
+  if (hostType !== 'input') {
+    return handle.element
+  }
+
+  let type = props.type ?? 'checkbox'
+  if (type !== 'checkbox') {
+    return renderMixinElement(handle.element, {
+      ...props,
+      type,
+    })
+  }
+
+  return renderMixinElement(handle.element, {
+    ...props,
+    role: props.role ?? 'switch',
+    type,
+  })
+})()
+
+const baseStyles = {
+  appearance: 'none',
+  WebkitAppearance: 'none',
+  margin: 0,
+  boxSizing: 'border-box',
+  position: 'relative',
+  display: 'inline-block',
+  width: 'var(--rmx-toggle-width)',
+  height: 'var(--rmx-toggle-height)',
+  minWidth: 'var(--rmx-toggle-width)',
+  minHeight: 'var(--rmx-toggle-height)',
+  padding: 0,
+  border: 0,
+  borderRadius: '9999px',
+  background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0) 100%), #EBEBEB',
+  boxShadow:
+    'inset 0 0 4px 1px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(0, 0, 0, 0.02), inset 0 2px 2px rgba(0, 0, 0, 0.02)',
+  verticalAlign: 'middle',
+  flex: 'none',
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    left: 'var(--rmx-toggle-thumb-inset)',
+    top: 'calc((var(--rmx-toggle-height) - var(--rmx-toggle-thumb-height)) / 2)',
+    width: 'var(--rmx-toggle-thumb-width)',
+    height: 'var(--rmx-toggle-thumb-height)',
+    borderRadius: '99px',
+    background: uncheckedThumbBackground,
+    boxShadow: uncheckedThumbShadow,
+    transform: 'translateX(0)',
+    transition: 'transform 160ms ease, background 160ms ease, box-shadow 160ms ease',
+    pointerEvents: 'none',
+  },
+  '&:disabled, &[aria-disabled="true"]': {
+    opacity: 0.55,
+  },
+  [checkedSelector]: {
+    background: 'linear-gradient(180deg, #70C754 0%, #70C754 100%)',
+    boxShadow:
+      '0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.4), 0 -4px 8px 2px #FFFFFF, 0 4px 8px 2px rgba(0, 0, 0, 0.05), 0 0 12px 1px rgba(112, 199, 84, 0.25), inset 0 0 4px 1px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 2px 2px rgba(0, 0, 0, 0.1)',
+  },
+  [checkedThumbSelector]: {
+    background: checkedThumbBackground,
+    boxShadow: checkedThumbShadow,
+    transform: 'translateX(var(--rmx-toggle-thumb-translate-x))',
+  },
+  '&:focus-visible': {
+    outline: 0,
+    boxShadow: controlFocusShadow,
+  },
+  '@media (prefers-reduced-motion: reduce)': {
+    '&::before': {
+      transition: 'none',
+    },
+  },
+}
+
+const thumbTranslate =
+  'calc(var(--rmx-toggle-width) - var(--rmx-toggle-thumb-width) - (var(--rmx-toggle-thumb-inset) * 2))'
+
+const sizeStyles = {
+  md: css({
+    '--rmx-toggle-width': '30px',
+    '--rmx-toggle-height': '18px',
+    '--rmx-toggle-thumb-width': '18px',
+    '--rmx-toggle-thumb-height': '14px',
+    '--rmx-toggle-thumb-inset': '2px',
+    '--rmx-toggle-thumb-translate-x': thumbTranslate,
+    ...baseStyles,
+  }),
+  lg: css({
+    '--rmx-toggle-width': '36px',
+    '--rmx-toggle-height': '22px',
+    '--rmx-toggle-thumb-width': '22px',
+    '--rmx-toggle-thumb-height': '18px',
+    '--rmx-toggle-thumb-inset': '2px',
+    '--rmx-toggle-thumb-translate-x': thumbTranslate,
+    ...baseStyles,
+  }),
+} as const satisfies Record<ToggleSize, CSSMixinDescriptor>
+
+export function toggle(options: ToggleOptions = {}): ToggleMixin {
+  let { size = 'md' } = options
+  return [toggleDefaultAttrs, sizeStyles[size]]
+}
+
+export default toggle

package/src/toggle/primitives.ts

@@ -0,0 +1,192 @@
+import { createElement, createMixin, on, ref } from '@remix-run/ui'
+import type { Dispatched, ElementProps, MixinFactory } from '@remix-run/ui'
+
+export interface ToggleControlOptions {
+  checked?: boolean
+  defaultChecked?: boolean
+  disabled?: boolean
+  form?: string
+  inputRef?: (input: HTMLInputElement, signal: AbortSignal) => void
+  name?: string
+  onCheckedChange?: (checked: boolean) => void
+  readOnly?: boolean
+  required?: boolean
+  tabIndex?: number
+  value?: string
+}
+
+type ToggleChangeHandler<target extends HTMLElement> = (
+  event: Dispatched<ToggleChangeEvent, target>,
+  signal: AbortSignal,
+) => void | Promise<void>
+
+const TOGGLE_CHANGE_EVENT = 'rmx:toggle-change' as const
+
+declare global {
+  interface HTMLElementEventMap {
+    [TOGGLE_CHANGE_EVENT]: ToggleChangeEvent
+  }
+}
+
+export class ToggleChangeEvent extends Event {
+  readonly checked: boolean
+
+  constructor(checked: boolean) {
+    super(TOGGLE_CHANGE_EVENT, { bubbles: true })
+    this.checked = checked
+  }
+}
+
+function getBooleanState(value: unknown): boolean | undefined {
+  return value === true || value === false ? value : undefined
+}
+
+function propIsTrue(value: unknown): boolean {
+  return value === true || value === 'true' || value === ''
+}
+
+function isDisabled(options: { disabled?: boolean }, props: ElementProps): boolean {
+  return (
+    options.disabled === true || propIsTrue(props.disabled) || propIsTrue(props['aria-disabled'])
+  )
+}
+
+function isReadOnly(options: { readOnly?: boolean }, props: ElementProps): boolean {
+  return (
+    options.readOnly === true || propIsTrue(props.readOnly) || propIsTrue(props['aria-readonly'])
+  )
+}
+
+const controlMixin: MixinFactory<HTMLElement, [options?: ToggleControlOptions], ElementProps> =
+  createMixin<HTMLElement, [options?: ToggleControlOptions], ElementProps>((handle, hostType) => {
+    let uncontrolledChecked = false
+    let hasInitialized = false
+
+    function getChecked(options: ToggleControlOptions, props: ElementProps) {
+      let optionChecked = getBooleanState(options.checked)
+      if (optionChecked !== undefined) {
+        return optionChecked
+      }
+
+      let propChecked = getBooleanState(props.checked)
+      if (propChecked !== undefined) {
+        return propChecked
+      }
+
+      if (!hasInitialized) {
+        uncontrolledChecked =
+          getBooleanState(options.defaultChecked) ?? getBooleanState(props.defaultChecked) ?? false
+        hasInitialized = true
+      }
+
+      return uncontrolledChecked
+    }
+
+    function setChecked(
+      node: HTMLElement,
+      options: ToggleControlOptions,
+      props: ElementProps,
+      nextChecked: boolean,
+    ) {
+      if (isDisabled(options, props) || isReadOnly(options, props)) {
+        if (node instanceof HTMLInputElement) {
+          node.checked = getChecked(options, props)
+        }
+        return
+      }
+
+      if (options.checked === undefined && props.checked === undefined) {
+        uncontrolledChecked = nextChecked
+        void handle.update()
+      }
+
+      options.onCheckedChange?.(nextChecked)
+      node.dispatchEvent(new ToggleChangeEvent(nextChecked))
+    }
+
+    return (options = {}, props) => {
+      let checked = getChecked(options, props)
+      let disabled = isDisabled(options, props)
+      let readOnly = isReadOnly(options, props)
+      let required = options.required ?? props.required
+
+      let nextProps: ElementProps = {
+        ...props,
+        'aria-checked': hostType === 'input' ? undefined : checked,
+        'aria-disabled': hostType === 'input' ? undefined : disabled || undefined,
+        'aria-readonly': hostType === 'input' ? undefined : readOnly || undefined,
+        'aria-required': hostType === 'input' ? undefined : required || undefined,
+        checked: hostType === 'input' ? checked : props.checked,
+        defaultChecked: hostType === 'input' ? undefined : props.defaultChecked,
+        disabled: hostType === 'input' ? disabled || undefined : props.disabled,
+        form: hostType === 'input' ? (options.form ?? props.form) : props.form,
+        name: hostType === 'input' ? (options.name ?? props.name) : props.name,
+        readOnly: hostType === 'input' ? readOnly || undefined : props.readOnly,
+        required: hostType === 'input' ? required : props.required,
+        role: 'switch',
+        tabIndex:
+          hostType === 'input'
+            ? (options.tabIndex ?? props.tabIndex)
+            : disabled
+              ? undefined
+              : (options.tabIndex ?? props.tabIndex ?? 0),
+        type:
+          hostType === 'input'
+            ? props.type === undefined
+              ? 'checkbox'
+              : props.type
+            : hostType === 'button' && props.type === undefined
+              ? 'button'
+              : props.type,
+        value: hostType === 'input' ? (options.value ?? props.value) : props.value,
+        'data-state': checked ? 'checked' : 'unchecked',
+      }
+
+      return createElement(handle.element, {
+        ...nextProps,
+        mix: [
+          ref((node: HTMLElement, signal) => {
+            if (node instanceof HTMLInputElement) {
+              options.inputRef?.(node, signal)
+            }
+          }),
+          on<HTMLElement, 'click'>('click', (event) => {
+            if (hostType !== 'input') {
+              event.preventDefault()
+            }
+
+            if (disabled || readOnly) {
+              if (event.currentTarget instanceof HTMLInputElement) {
+                event.currentTarget.checked = checked
+              }
+              return
+            }
+
+            let nextChecked =
+              event.currentTarget instanceof HTMLInputElement
+                ? event.currentTarget.checked
+                : !checked
+
+            setChecked(event.currentTarget, options, props, nextChecked)
+          }),
+          on<HTMLElement, 'keydown'>('keydown', (event) => {
+            if (hostType === 'input' || event.key !== ' ') {
+              return
+            }
+
+            event.preventDefault()
+            setChecked(event.currentTarget, options, props, !checked)
+          }),
+        ],
+      })
+    }
+  })
+
+export const control = controlMixin
+
+export function onToggleChange<target extends HTMLElement>(
+  handler: ToggleChangeHandler<target>,
+  captureBoolean?: boolean,
+): ReturnType<typeof on<target, typeof TOGGLE_CHANGE_EVENT>> {
+  return on(TOGGLE_CHANGE_EVENT, handler, captureBoolean)
+}

package/dist/animation/demos/animation.demo.d.ts

@@ -1,5 +0,0 @@
-/**
- * @name Animation Gallery
- * @description A collection of motion and animation experiments adapted from the standalone demos.
- */
-export default function AnimationGallery(): () => import("@remix-run/ui").RemixElement;

package/dist/animation/demos/animation.demo.js

@@ -1,92 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@remix-run/ui/jsx-runtime";
-import { css, on } from '@remix-run/ui';
-import { DefaultAnimate } from "./default-animate.js";
-import { EnterAnimation } from "./enter.js";
-import { ExitAnimation } from "./exit.js";
-import { Press } from "./press.js";
-import { HTMLContent } from "./html-content.js";
-import { Keyframes } from "./keyframes.js";
-import { InterruptibleKeyframes } from "./interruptible-keyframes.js";
-import { RollingSquare } from "./rolling-square.js";
-import { Rotate } from "./rotate.js";
-import { TransitionOptions } from "./transition-options.js";
-import { Cube } from "./cube.js";
-import { SharedLayout } from "./shared-layout.js";
-import { AspectRatio } from "./aspect-ratio.js";
-import { BouncySwitch } from "./bouncy-switch.js";
-import { ColorInterpolation } from "./color-interpolation.js";
-import { FlipToggle } from "./flip-toggle.js";
-import { Reordering } from "./reordering.js";
-import { MultiStateBadge } from "./multi-state-badge.js";
-import { HoldToConfirm } from "./hold-to-confirm.js";
-import { MaterialRipple } from "./material-ripple.js";
-function Tile(handle) {
-    let remountKey = 0;
-    return () => {
-        let { title, children, notes } = handle.props;
-        return (_jsxs("div", { mix: [
-                css({
-                    backgroundColor: 'white',
-                    padding: '40px',
-                    borderRadius: 12,
-                    boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.1)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    flexDirection: 'column',
-                    gap: 12,
-                    position: 'relative',
-                }),
-            ], children: [_jsx("button", { mix: [
-                        css({
-                            position: 'absolute',
-                            bottom: 8,
-                            right: 8,
-                            width: 18,
-                            height: 18,
-                            padding: 0,
-                            border: 'none',
-                            background: 'transparent',
-                            cursor: 'pointer',
-                            opacity: 0.4,
-                            '&:hover': {
-                                opacity: 1,
-                            },
-                        }),
-                        on('click', () => {
-                            remountKey++;
-                            handle.update();
-                        }),
-                    ], title: "Replay animation", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [_jsx("path", { d: "M1 4v6h6M23 20v-6h-6" }), _jsx("path", { d: "M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" })] }) }), _jsx("h3", { mix: [css({ margin: 0 })], children: title }), _jsx("div", { mix: [
-                        css({
-                            flex: 1,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            minHeight: 280,
-                        }),
-                    ], children: children }, remountKey), notes && (_jsx("p", { mix: [
-                        css({
-                            margin: 0,
-                            fontSize: 12,
-                            color: '#666',
-                            textAlign: 'center',
-                            maxWidth: '200px',
-                        }),
-                    ], children: notes }))] }));
-    };
-}
-/**
- * @name Animation Gallery
- * @description A collection of motion and animation experiments adapted from the standalone demos.
- */
-export default function AnimationGallery() {
-    return () => (_jsxs(_Fragment, { children: [_jsx("h1", { mix: [css({ marginBottom: 0, '& + p': { marginTop: 0 } })], children: "Animations" }), _jsxs("p", { children: ["Most animations are adapted from ", _jsx("a", { href: "https://www.motion.dev", children: "Motion" }), ". Thank you for your work ", _jsx("a", { href: "https://motion.dev/@matt", children: "Matt Perry" }), "!"] }), _jsxs("div", { mix: [
-                    css({
-                        display: 'grid',
-                        gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
-                        gap: 24,
-                        marginTop: 40,
-                    }),
-                ], children: [_jsx(Tile, { title: "Default Animate", notes: "animateEntrance + animateLayout defaults", children: _jsx(DefaultAnimate, {}) }), _jsx(Tile, { title: "Rolling Square", notes: "CSS transition with spring() timing function", children: _jsx(RollingSquare, {}) }), _jsx(Tile, { title: "Enter Animation", notes: "animateEntrance() with spring physics", children: _jsx(EnterAnimation, {}) }), _jsx(Tile, { title: "Exit Animation", notes: "animateEntrance() + animateExit()", children: _jsx(ExitAnimation, {}) }), _jsx(Tile, { title: "Press Interaction", notes: "CSS transition + pointer/keyboard events", children: _jsx(Press, {}) }), _jsx(Tile, { title: "HTML Content", notes: "rAF loop with spring iterator for text", children: _jsx(HTMLContent, {}) }), _jsx(Tile, { title: "Keyframes", notes: "CSS @keyframes with infinite loop", children: _jsx(Keyframes, {}) }), _jsx(Tile, { title: "Interruptible Keyframes", notes: "Web Animations API with commitStyles()", children: _jsx(InterruptibleKeyframes, {}) }), _jsx(Tile, { title: "Rotate", notes: "CSS @keyframes (one-shot)", children: _jsx(Rotate, {}) }), _jsx(Tile, { title: "Transition Options", notes: "animateEntrance() with cubic-bezier + delay", children: _jsx(TransitionOptions, {}) }), _jsx(Tile, { title: "3D Cube", notes: "rAF loop with direct style manipulation", children: _jsx(Cube, {}) }), _jsx(Tile, { title: "Shared Layout", notes: "CSS Grid overlap for simultaneous enter/exit", children: _jsx(SharedLayout, {}) }), _jsx(Tile, { title: "Aspect Ratio", children: _jsx(AspectRatio, {}) }), _jsx(Tile, { title: "Bouncy Switch", notes: "Spring up, bounce down with CSS linear()", children: _jsx(BouncySwitch, {}) }), _jsx(Tile, { title: "FLIP Toggle", notes: "animateLayout() with interruptible WAAPI", children: _jsx(FlipToggle, {}) }), _jsx(Tile, { title: "Reordering", notes: "animateLayout() with auto-shuffling list", children: _jsx(Reordering, {}) }), _jsx(Tile, { title: "Color Interpolation", notes: "sRGB vs OKLCH color space", children: _jsx(ColorInterpolation, {}) }), _jsx(Tile, { title: "Multi-State Badge", notes: "Animated icon/label swap with WAAPI shake", children: _jsx(MultiStateBadge, {}) }), _jsx(Tile, { title: "Hold to Confirm", notes: "Custom interaction with progress tracking", children: _jsx(HoldToConfirm, {}) }), _jsx(Tile, { title: "Material Ripple", notes: "Pointer-tracked ripples with enter/exit animations", children: _jsx(MaterialRipple, {}) })] })] }));
-}
-//# sourceMappingURL=animation.demo.js.map

package/dist/animation/demos/animation.demo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"animation.demo.js","sourceRoot":"","sources":["../../../src/animation/demos/animation.demo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,EAAE,EAA+B,MAAM,eAAe,CAAA;AACpE,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAuB,CAAA;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,YAAa,CAAA;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAY,CAAA;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAa,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAoB,CAAA;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAiB,CAAA;AAC3C,OAAO,EAAE,sBAAsB,EAAE,MAAM,8BAA+B,CAAA;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAsB,CAAA;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAc,CAAA;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAA0B,CAAA;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAY,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAqB,CAAA;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAoB,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAqB,CAAA;AAClD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA2B,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAmB,CAAA;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAkB,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAyB,CAAA;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAuB,CAAA;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAuB,CAAA;AAEtD,SAAS,IAAI,CAAC,MAAsE;IAClF,IAAI,UAAU,GAAG,CAAC,CAAA;IAElB,OAAO,GAAG,EAAE;QACV,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,CAAA;QAE7C,OAAO,CACL,eACE,GAAG,EAAE;gBACH,GAAG,CAAC;oBACF,eAAe,EAAE,OAAO;oBACxB,OAAO,EAAE,MAAM;oBACf,YAAY,EAAE,EAAE;oBAChB,SAAS,EAAE,+BAA+B;oBAC1C,OAAO,EAAE,MAAM;oBACf,UAAU,EAAE,QAAQ;oBACpB,aAAa,EAAE,QAAQ;oBACvB,GAAG,EAAE,EAAE;oBACP,QAAQ,EAAE,UAAU;iBACrB,CAAC;aACH,aAED,iBACE,GAAG,EAAE;wBACH,GAAG,CAAC;4BACF,QAAQ,EAAE,UAAU;4BACpB,MAAM,EAAE,CAAC;4BACT,KAAK,EAAE,CAAC;4BACR,KAAK,EAAE,EAAE;4BACT,MAAM,EAAE,EAAE;4BACV,OAAO,EAAE,CAAC;4BACV,MAAM,EAAE,MAAM;4BACd,UAAU,EAAE,aAAa;4BACzB,MAAM,EAAE,SAAS;4BACjB,OAAO,EAAE,GAAG;4BACZ,SAAS,EAAE;gCACT,OAAO,EAAE,CAAC;6BACX;yBACF,CAAC;wBACF,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE;4BACf,UAAU,EAAE,CAAA;4BACZ,MAAM,CAAC,MAAM,EAAE,CAAA;wBACjB,CAAC,CAAC;qBACH,EACD,KAAK,EAAC,kBAAkB,YAExB,eAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,WAAW,EAAC,GAAG,aACxE,eAAM,CAAC,EAAC,sBAAsB,GAAG,EACjC,eAAM,CAAC,EAAC,qEAAqE,GAAG,IAC5E,GACC,EACT,aAAI,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,YAAG,KAAK,GAAM,EAC3C,cAEE,GAAG,EAAE;wBACH,GAAG,CAAC;4BACF,IAAI,EAAE,CAAC;4BACP,OAAO,EAAE,MAAM;4BACf,UAAU,EAAE,QAAQ;4BACpB,cAAc,EAAE,QAAQ;4BACxB,SAAS,EAAE,GAAG;yBACf,CAAC;qBACH,YAEA,QAAQ,IAXJ,UAAU,CAYX,EACL,KAAK,IAAI,CACR,YACE,GAAG,EAAE;wBACH,GAAG,CAAC;4BACF,MAAM,EAAE,CAAC;4BACT,QAAQ,EAAE,EAAE;4BACZ,KAAK,EAAE,MAAM;4BACb,SAAS,EAAE,QAAQ;4BACnB,QAAQ,EAAE,OAAO;yBAClB,CAAC;qBACH,YAEA,KAAK,GACJ,CACL,IACG,CACP,CAAA;IACH,CAAC,CAAA;AACH,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACtC,OAAO,GAAG,EAAE,CAAC,CACX,8BACE,aAAI,GAAG,EAAE,CAAC,GAAG,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,2BAAiB,EAC/E,6DACmC,YAAG,IAAI,EAAC,wBAAwB,uBAAW,gCAClE,YAAG,IAAI,EAAC,0BAA0B,2BAAe,SACzD,EACJ,eACE,GAAG,EAAE;oBACH,GAAG,CAAC;wBACF,OAAO,EAAE,MAAM;wBACf,mBAAmB,EAAE,uCAAuC;wBAC5D,GAAG,EAAE,EAAE;wBACP,SAAS,EAAE,EAAE;qBACd,CAAC;iBACH,aAED,KAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAC,0CAA0C,YAC5E,KAAC,cAAc,KAAG,GACb,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAC,8CAA8C,YAC/E,KAAC,aAAa,KAAG,GACZ,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAC,uCAAuC,YACzE,KAAC,cAAc,KAAG,GACb,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,gBAAgB,EAAC,KAAK,EAAC,mCAAmC,YACpE,KAAC,aAAa,KAAG,GACZ,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAC,0CAA0C,YAC9E,KAAC,KAAK,KAAG,GACJ,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,cAAc,EAAC,KAAK,EAAC,wCAAwC,YACvE,KAAC,WAAW,KAAG,GACV,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,WAAW,EAAC,KAAK,EAAC,mCAAmC,YAC/D,KAAC,SAAS,KAAG,GACR,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,yBAAyB,EAAC,KAAK,EAAC,wCAAwC,YAClF,KAAC,sBAAsB,KAAG,GACrB,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,QAAQ,EAAC,KAAK,EAAC,2BAA2B,YACpD,KAAC,MAAM,KAAG,GACL,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,oBAAoB,EAAC,KAAK,EAAC,6CAA6C,YAClF,KAAC,iBAAiB,KAAG,GAChB,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,SAAS,EAAC,KAAK,EAAC,yCAAyC,YACnE,KAAC,IAAI,KAAG,GACH,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,eAAe,EAAC,KAAK,EAAC,8CAA8C,YAC9E,KAAC,YAAY,KAAG,GACX,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,cAAc,YACxB,KAAC,WAAW,KAAG,GACV,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,eAAe,EAAC,KAAK,EAAC,0CAA0C,YAC1E,KAAC,YAAY,KAAG,GACX,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,aAAa,EAAC,KAAK,EAAC,0CAA0C,YACxE,KAAC,UAAU,KAAG,GACT,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,YAAY,EAAC,KAAK,EAAC,0CAA0C,YACvE,KAAC,UAAU,KAAG,GACT,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,qBAAqB,EAAC,KAAK,EAAC,2BAA2B,YACjE,KAAC,kBAAkB,KAAG,GACjB,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,mBAAmB,EAAC,KAAK,EAAC,2CAA2C,YAC/E,KAAC,eAAe,KAAG,GACd,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAC,2CAA2C,YAC7E,KAAC,aAAa,KAAG,GACZ,EACP,KAAC,IAAI,IAAC,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAC,oDAAoD,YACtF,KAAC,cAAc,KAAG,GACb,IACH,IACL,CACJ,CAAA;AACH,CAAC"}

package/dist/animation/demos/spring.demo.d.ts

@@ -1,6 +0,0 @@
-import { type Handle } from '@remix-run/ui';
-/**
- * @name Spring Drag Release
- * @description A full-screen spring physics playground with click targets and drag-release velocity.
- */
-export default function SpringDemo(handle: Handle): () => import("@remix-run/ui").RemixElement;