@corvu-next/transition-size 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-2025 Jasmin Noetzli
+
+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

@@ -0,0 +1,54 @@
+<div align="center">
+  <a href="https://corvu.dev/docs/utilities/transition-size">
+    <img src="https://corvu.dev/readme/solid-transition-size.png" width=1000 alt="Solid Transition Size" />
+  </a>
+</div>
+<br />
+
+SolidJS utility which makes it possible to transition the width and height of elements that don't have a fixed size applied.
+
+## Features
+
+- Works with any CSS transition configuration
+- Specify which dimension to observe (width, height, or both)
+- Uses a ResizeObserver to detect changes in the size of the element
+
+## Usage
+
+The utility returns two signals: `transitioning` and `transitionSize`. `transitioning` can be used to know when the transition is happening, and `transitionSize` returns the fixed size of the element while transitioning. You **have** to use it to style the element you want to transition.
+
+```tsx
+import createTransitionSize from 'solid-transition-size';
+```
+
+For a very simple example we can take the `<details>` element and transition the height when it is toggled:
+```tsx
+const Details = () => {
+  const [ref, setRef] = createSignal<HTMLElement | null>(null)
+  const { transitionSize } = createTransitionSize({
+    element: ref,
+    dimension: 'height',
+  })
+
+  const height = () => {
+    if (!transitionSize()) return undefined
+    return transitionSize() + 'px'
+  }
+
+  return (
+    <details
+      ref={setRef}
+      class="transition-[height]"
+      style={{
+        height: height(),
+      }}
+    >
+      <summary>Show detail</summary>
+      Detail
+    </details>
+  )
+}
+```
+
+## Further Reading
+This utility is from the maintainers of [corvu](https://corvu.dev), a collection of unstyled, accessible and customizable UI primitives for SolidJS. It is also documented in the corvu docs under [Transition Size](https://corvu.dev/docs/utilities/transition-size).

package/dist/index.d.ts

@@ -0,0 +1,35 @@
+import { MaybeAccessor } from '@corvu-next/utils/reactivity';
+export { MaybeAccessor } from '@corvu-next/utils/reactivity';
+import { Accessor } from 'solid-js';
+
+/**
+ * Utility that uses a `ResizeObserver` to provide the size of an element before and after resize. Used to transition the width/height of elements that don't have a fixed size applied.
+ *
+ * @param props.element - The element to transition.
+ * @param props.enabled - Whether the utility is enabled. *Default = `true`*
+ * @param props.dimension - The dimension to transition. *Default = `'both'`*
+ * @returns ```typescript
+ * {
+ *   transitioning: () => boolean
+ *   transitionSize: () => number | [number, number] | null
+ * }
+ * ```
+ */
+declare function createTransitionSize(props: {
+    element: MaybeAccessor<HTMLElement | null>;
+    enabled?: MaybeAccessor<boolean>;
+    dimension?: MaybeAccessor<'both'>;
+}): {
+    transitioning: Accessor<boolean>;
+    transitionSize: Accessor<[number, number] | null>;
+};
+declare function createTransitionSize(props: {
+    element: MaybeAccessor<HTMLElement | null>;
+    enabled?: MaybeAccessor<boolean>;
+    dimension: MaybeAccessor<'width' | 'height'>;
+}): {
+    transitioning: Accessor<boolean>;
+    transitionSize: Accessor<number | null>;
+};
+
+export { createTransitionSize as default };

package/dist/index.js

@@ -0,0 +1,94 @@
+import { access } from '@corvu-next/utils/reactivity';
+import { createSignal, createEffect } from 'solid-js';
+import { afterPaint } from '@corvu-next/utils/dom';
+
+// src/transitionSize.ts
+function createTransitionSize(props) {
+  const [transitioning, setTransitioning] = createSignal(false);
+  const [transitionSize, setTransitionSize] = createSignal(null);
+  let startSize = null;
+  createEffect(() => {
+    const element = access(props.element);
+    const enabled = access(props.enabled ?? true);
+    if (!element || !enabled) return;
+    const observer = new ResizeObserver(resizeObserverCallback);
+    observer.observe(element);
+    element.addEventListener("transitionend", reset);
+    return () => {
+      observer.disconnect();
+      element.removeEventListener("transitionend", reset);
+      reset();
+    };
+  });
+  const resizeObserverCallback = ([entry]) => {
+    if (transitioning()) return;
+    const target = entry.target;
+    const currentSize = [
+      target.offsetWidth,
+      target.offsetHeight
+    ];
+    const dimension = access(props.dimension ?? "both");
+    if (dimension === "both") {
+      if (!startSize) {
+        startSize = currentSize;
+      } else if (startSize[0] !== currentSize[0] && startSize[1] !== currentSize[1]) {
+        setTransitionSize(startSize);
+        setTransitioning(true);
+        afterPaint(() => {
+          setTransitionSize(currentSize);
+          const transitionDuration = parseFloat(
+            getComputedStyle(entry.target).transitionDuration
+          );
+          if (transitionDuration === 0) {
+            reset();
+          }
+        });
+      }
+    } else {
+      if (!startSize) {
+        startSize = currentSize;
+      } else if (getSizeOfDimension(dimension, startSize) !== getSizeOfDimension(dimension, currentSize)) {
+        setTransitionSize(getSizeOfDimension(dimension, startSize));
+        setTransitioning(true);
+        afterPaint(() => {
+          setTransitionSize(getSizeOfDimension(dimension, currentSize));
+          const transitionDuration = parseFloat(
+            getComputedStyle(entry.target).transitionDuration
+          );
+          if (transitionDuration === 0) {
+            reset();
+          }
+        });
+      }
+    }
+  };
+  const reset = () => {
+    if (!transitioning()) return;
+    const element = access(props.element);
+    if (element) {
+      startSize = [element.offsetWidth, element.offsetHeight];
+    } else {
+      startSize = null;
+    }
+    setTransitioning(false);
+    setTransitionSize(null);
+  };
+  return {
+    transitioning,
+    transitionSize
+  };
+}
+var getSizeOfDimension = (dimension, size) => {
+  switch (dimension) {
+    case "width":
+      return size[0];
+    case "height":
+      return size[1];
+  }
+};
+var transitionSize_default = createTransitionSize;
+
+// src/index.ts
+var index_default = transitionSize_default;
+
+export { index_default as default };

package/dist/index.jsx

@@ -0,0 +1,94 @@
+// src/transitionSize.ts
+import { access } from "@corvu-next/utils/reactivity";
+import { createEffect, createSignal } from "solid-js";
+import { afterPaint } from "@corvu-next/utils/dom";
+function createTransitionSize(props) {
+  const [transitioning, setTransitioning] = createSignal(false);
+  const [transitionSize, setTransitionSize] = createSignal(null);
+  let startSize = null;
+  createEffect(() => {
+    const element = access(props.element);
+    const enabled = access(props.enabled ?? true);
+    if (!element || !enabled) return;
+    const observer = new ResizeObserver(resizeObserverCallback);
+    observer.observe(element);
+    element.addEventListener("transitionend", reset);
+    return () => {
+      observer.disconnect();
+      element.removeEventListener("transitionend", reset);
+      reset();
+    };
+  });
+  const resizeObserverCallback = ([entry]) => {
+    if (transitioning()) return;
+    const target = entry.target;
+    const currentSize = [
+      target.offsetWidth,
+      target.offsetHeight
+    ];
+    const dimension = access(props.dimension ?? "both");
+    if (dimension === "both") {
+      if (!startSize) {
+        startSize = currentSize;
+      } else if (startSize[0] !== currentSize[0] && startSize[1] !== currentSize[1]) {
+        setTransitionSize(startSize);
+        setTransitioning(true);
+        afterPaint(() => {
+          setTransitionSize(currentSize);
+          const transitionDuration = parseFloat(
+            getComputedStyle(entry.target).transitionDuration
+          );
+          if (transitionDuration === 0) {
+            reset();
+          }
+        });
+      }
+    } else {
+      if (!startSize) {
+        startSize = currentSize;
+      } else if (getSizeOfDimension(dimension, startSize) !== getSizeOfDimension(dimension, currentSize)) {
+        setTransitionSize(getSizeOfDimension(dimension, startSize));
+        setTransitioning(true);
+        afterPaint(() => {
+          setTransitionSize(getSizeOfDimension(dimension, currentSize));
+          const transitionDuration = parseFloat(
+            getComputedStyle(entry.target).transitionDuration
+          );
+          if (transitionDuration === 0) {
+            reset();
+          }
+        });
+      }
+    }
+  };
+  const reset = () => {
+    if (!transitioning()) return;
+    const element = access(props.element);
+    if (element) {
+      startSize = [element.offsetWidth, element.offsetHeight];
+    } else {
+      startSize = null;
+    }
+    setTransitioning(false);
+    setTransitionSize(null);
+  };
+  return {
+    transitioning,
+    transitionSize
+  };
+}
+var getSizeOfDimension = (dimension, size) => {
+  switch (dimension) {
+    case "width":
+      return size[0];
+    case "height":
+      return size[1];
+  }
+};
+var transitionSize_default = createTransitionSize;
+
+// src/index.ts
+var index_default = transitionSize_default;
+export {
+  index_default as default
+};

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@corvu-next/transition-size",
+  "version": "0.1.0",
+  "description": "SolidJS 2 utility for animating element size transitions.",
+  "license": "MIT",
+  "author": {
+    "name": "Jasmin Noetzli (upstream), @corvu-next contributors (fork)"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "solid": "./dist/index.jsx",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/index.d.ts"
+      ]
+    }
+  },
+  "dependencies": {
+    "@corvu-next/utils": "~0.1.0"
+  },
+  "peerDependencies": {
+    "solid-js": "2.0.0-beta.15"
+  },
+  "devDependencies": {
+    "@solidjs/web": "2.0.0-beta.15",
+    "esbuild-plugin-solid": "^0.6.0",
+    "solid-js": "2.0.0-beta.15",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2"
+  },
+  "scripts": {
+    "build": "tsup",
+    "clean": "rm -rf .turbo dist node_modules",
+    "lint": "tsc --noEmit"
+  }
+}