{"_id":"solid-transition-size","_rev":"4-450f661d2ecc5b15ad19e420da73ea65","name":"solid-transition-size","description":"SolidJS utility which makes it possible to transition the width and height of elements that don't have a fixed size applied.","dist-tags":{"latest":"0.1.4"},"versions":{"0.1.0":{"name":"solid-transition-size","version":"0.1.0","keywords":["solid","solidjs","transition","size","width","height"],"author":{"url":"https://github.com/GiyoMoon","name":"Jasmin Noetzli","email":"code@jasi.dev"},"license":"MIT","_id":"solid-transition-size@0.1.0","maintainers":[{"name":"giyomoon","email":"npm@jasi.dev"}],"homepage":"https://corvu.dev/docs/utilities/transition-size","bugs":{"url":"https://github.com/corvudev/corvu/issues","email":"code@jasi.dev"},"dist":{"shasum":"361a8cd4882024a6d9f49959770cb2f1997fa2b8","tarball":"https://registry.npmjs.org/solid-transition-size/-/solid-transition-size-0.1.0.tgz","fileCount":5,"integrity":"sha512-3hiEZNY5+R6nXnCtHzdtMp72iCUynYjQNXCPRqezbxYUnRoG1MwM/Knzf6wKLfvOXxbtG6+KNFrnwn2b5ClDJg==","signatures":[{"sig":"MEQCIBEe93SfgnbShOJ0wU8ptZGrjgaQJXt4btYIkDwNhnmMAiBVFg2k+fEqQqvmsHqUFo29QimkZTln7Ra5wpkT9c1avg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9270},"main":"./dist/index.js","type":"module","_from":"file:solid-transition-size-0.1.0.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"private":false,"scripts":{"lint":"eslint --max-warnings=0 .","build":"tsup","clean":"rm -rf .turbo dist node_modules","typedoc":"typedoc --json api.json --entryPoints ./src/index.ts"},"_npmUser":{"name":"giyomoon","email":"npm@jasi.dev"},"_resolved":"/private/var/folders/3_/_zx4ddt90bsdlh71hmrty4n40000gn/T/6c41e25a34386db6232634dc945c027c/solid-transition-size-0.1.0.tgz","_integrity":"sha512-3hiEZNY5+R6nXnCtHzdtMp72iCUynYjQNXCPRqezbxYUnRoG1MwM/Knzf6wKLfvOXxbtG6+KNFrnwn2b5ClDJg==","repository":{"url":"git+https://github.com/corvudev/corvu.git","type":"git"},"_npmVersion":"10.2.4","description":"SolidJS utility which makes it possible to transition the width and height of elements that don't have a fixed size applied.","directories":{},"sideEffects":false,"_nodeVersion":"20.11.1","dependencies":{"@corvu/utils":"~0.1"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.2","eslint":"^8.57.0","typedoc":"0.25.4","prettier":"^3.2.5","solid-js":"^1.8.15","typescript":"^5.3.3","eslint-plugin-solid":"^0.13.1","esbuild-plugin-solid":"^0.5.0","eslint-config-prettier":"^9.1.0","@typescript-eslint/eslint-plugin":"^7.1.0"},"peerDependencies":{"solid-js":"^1.8"},"_npmOperationalInternal":{"tmp":"tmp/solid-transition-size_0.1.0_1709230837433_0.1417045136298456","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"solid-transition-size","version":"0.1.1","keywords":["solid","solidjs","transition","size","width","height"],"author":{"url":"https://github.com/GiyoMoon","name":"Jasmin Noetzli","email":"code@jasi.dev"},"license":"MIT","_id":"solid-transition-size@0.1.1","maintainers":[{"name":"giyomoon","email":"npm@jasi.dev"}],"homepage":"https://corvu.dev/docs/utilities/transition-size","bugs":{"url":"https://github.com/corvudev/corvu/issues","email":"code@jasi.dev"},"dist":{"shasum":"9ebd9ee20d567233fa3a40c4c51cb5fb262c5f33","tarball":"https://registry.npmjs.org/solid-transition-size/-/solid-transition-size-0.1.1.tgz","fileCount":5,"integrity":"sha512-jvb2zFwL3JgZs11zd3aNi0wurNS8M1u9LfvHCk8jdRmYZSRrpB2l10mDy9TeMKOW7Kx49ZComARlD9tTcWULXg==","signatures":[{"sig":"MEQCIFCHbWLvHyXYSKf15PfxfrOgDrbC1rszFe9FV3PciS5OAiABVgn87j3XtpiC+STBzLrlsfb3ncXHaqG1J8Qs06eGbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9034},"main":"./dist/index.js","type":"module","_from":"file:solid-transition-size-0.1.1.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"private":false,"scripts":{"lint":"eslint --max-warnings=0 .","build":"tsup","clean":"rm -rf .turbo dist node_modules","typedoc":"typedoc --json api.json --entryPoints ./src/index.ts"},"_npmUser":{"name":"giyomoon","email":"npm@jasi.dev"},"_resolved":"/tmp/d6ecd57f6766fd43aeae5c2e801ea48b/solid-transition-size-0.1.1.tgz","_integrity":"sha512-jvb2zFwL3JgZs11zd3aNi0wurNS8M1u9LfvHCk8jdRmYZSRrpB2l10mDy9TeMKOW7Kx49ZComARlD9tTcWULXg==","repository":{"url":"git+https://github.com/corvudev/corvu.git","type":"git"},"_npmVersion":"10.2.4","description":"SolidJS utility which makes it possible to transition the width and height of elements that don't have a fixed size applied.","directories":{},"sideEffects":false,"_nodeVersion":"20.11.1","dependencies":{"@corvu/utils":"~0.1"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.2","eslint":"^8.57.0","typedoc":"0.25.4","prettier":"^3.2.5","solid-js":"^1.8.15","typescript":"^5.3.3","eslint-plugin-solid":"^0.13.1","esbuild-plugin-solid":"^0.5.0","eslint-config-prettier":"^9.1.0","@typescript-eslint/eslint-plugin":"^7.1.0"},"peerDependencies":{"solid-js":"^1.8"},"_npmOperationalInternal":{"tmp":"tmp/solid-transition-size_0.1.1_1710715668288_0.6319810265033361","host":"s3://npm-registry-packages"}},"0.1.2":{"name":"solid-transition-size","version":"0.1.2","keywords":["solid","solidjs","transition","size","width","height"],"author":{"url":"https://github.com/GiyoMoon","name":"Jasmin Noetzli","email":"code@jasi.dev"},"license":"MIT","_id":"solid-transition-size@0.1.2","maintainers":[{"name":"giyomoon","email":"npm@jasi.dev"}],"homepage":"https://corvu.dev/docs/utilities/transition-size","bugs":{"url":"https://github.com/corvudev/corvu/issues","email":"code@jasi.dev"},"dist":{"shasum":"f869c8c2d61bd688bb113db6fa1d492303370322","tarball":"https://registry.npmjs.org/solid-transition-size/-/solid-transition-size-0.1.2.tgz","fileCount":5,"integrity":"sha512-2gJ5txe/KGsnW4HUnXEiUdRjKQPlUuVCVT/58Nlqz8j/U48LxqeSaKu5TozXCs3qlRz0gTAIg71JGdNQZT1RZg==","signatures":[{"sig":"MEUCIEffCDopPp/sZ63t2PmMTNo51R8oFPbVntH1Xcn2GIiyAiEAthfJDstWccaqevBuOezoTbFXDVPYwuN8e6CqqI2mQSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9271},"main":"./dist/index.js","type":"module","_from":"file:solid-transition-size-0.1.2.tgz","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"private":false,"scripts":{"lint":"eslint --max-warnings=0 .","build":"tsup","clean":"rm -rf .turbo dist node_modules typedoc.json","typedoc":"rm -f typedoc.json && typedoc --json typedoc.json --entryPoints ./src/index.ts"},"_npmUser":{"name":"giyomoon","email":"npm@jasi.dev"},"_resolved":"/tmp/23fe57b23f124cc420d9378f528f8b2c/solid-transition-size-0.1.2.tgz","_integrity":"sha512-2gJ5txe/KGsnW4HUnXEiUdRjKQPlUuVCVT/58Nlqz8j/U48LxqeSaKu5TozXCs3qlRz0gTAIg71JGdNQZT1RZg==","repository":{"url":"git+https://github.com/corvudev/corvu.git","type":"git"},"_npmVersion":"10.5.0","description":"SolidJS utility which makes it possible to transition the width and height of elements that don't have a fixed size applied.","directories":{},"sideEffects":false,"_nodeVersion":"20.12.2","dependencies":{"@corvu/utils":"~0.2.0"},"typesVersions":{"*":{"*":["./dist/index.d.ts"]}},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.2","eslint":"^8.57.0","typedoc":"0.25.13","prettier":"^3.2.5","solid-js":"^1.8.17","typescript":"^5.4.5","eslint-plugin-solid":"^0.14.0","esbuild-plugin-solid":"^0.6.0","eslint-config-prettier":"^9.1.0","@typescript-eslint/eslint-plugin":"^7.8.0"},"peerDependencies":{"solid-js":"^1.8"},"_npmOperationalInternal":{"tmp":"tmp/solid-transition-size_0.1.2_1715616273383_0.5944980917173595","host":"s3://npm-registry-packages"}},"0.1.3":{"name":"solid-transition-size","version":"0.1.3","keywords":["solid","solidjs","transition","size","width","height"],"author":{"url":"https://github.com/GiyoMoon","name":"Jasmin Noetzli","email":"code@jasi.dev"},"license":"MIT","_id":"solid-transition-size@0.1.3","maintainers":[{"name":"giyomoon","email":"npm@jasi.dev"}],"homepage":"https://corvu.dev/docs/utilities/transition-size","bugs":{"url":"https://github.com/corvudev/corvu/issues","email":"code@jasi.dev"},"dist":{"shasum":"325603f656b3b429538f8cb73dadbe935f9e71a4","tarball":"https://registry.npmjs.org/solid-transition-size/-/solid-transition-size-0.1.3.tgz","fileCount":6,"integrity":"sha512-IEKnt+4hLd2OdOkHD1VggGAbADCORZtRev38+2dIqXL6lff7mnLj1BN+kW7UzxKYPl1IM72D/yXkHTF7CqZz/Q==","signatures":[{"sig":"MEUCIQD7b1XTaSLUdFuc/juBzWIfsza4wTHMCYKMq+VBdArnlgIgDtSZ96SbPRPuKtrmxkAJZj/aSCORPYoKhB+/vi9v+3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12610},"main":"./dist/index.js","type":"module","_from":"file:solid-transition-size-0.1.3.tgz","types":"./dist/index.d.ts","exports":{".":{"solid":"./dist/index.jsx","types":"./dist/index.d.ts","default":"./dist/index.js"}},"private":false,"scripts":{"lint":"eslint --max-warnings=0 .","build":"tsup","clean":"rm -rf .turbo dist node_modules typedoc.json","typedoc":"rm -f typedoc.json && typedoc --json typedoc.json --entryPoints ./src/index.ts"},"_npmUser":{"name":"giyomoon","email":"npm@jasi.dev"},"_resolved":"/tmp/ff14351fa1bdd76570dcc537a4fdb60b/solid-transition-size-0.1.3.tgz","_integrity":"sha512-IEKnt+4hLd2OdOkHD1VggGAbADCORZtRev38+2dIqXL6lff7mnLj1BN+kW7UzxKYPl1IM72D/yXkHTF7CqZz/Q==","repository":{"url":"git+https://github.com/corvudev/corvu.git","type":"git"},"_npmVersion":"10.7.0","description":"SolidJS utility which makes it possible to transition the width and height of elements that don't have a fixed size applied.","directories":{},"sideEffects":false,"_nodeVersion":"20.14.0","dependencies":{"@corvu/utils":"~0.3.1"},"typesVersions":{"*":{"*":["./dist/index.d.ts"]}},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.1.0","eslint":"^8.57.0","typedoc":"0.25.13","prettier":"^3.3.2","solid-js":"^1.8.17","typescript":"^5.4.5","eslint-plugin-solid":"^0.14.0","esbuild-plugin-solid":"^0.6.0","eslint-config-prettier":"^9.1.0","@typescript-eslint/eslint-plugin":"^7.13.1"},"peerDependencies":{"solid-js":"^1.8"},"_npmOperationalInternal":{"tmp":"tmp/solid-transition-size_0.1.3_1718810442230_0.6665484855869979","host":"s3://npm-registry-packages"}},"0.1.4":{"name":"solid-transition-size","version":"0.1.4","private":false,"description":"SolidJS utility which makes it possible to transition the width and height of elements that don't have a fixed size applied.","keywords":["solid","solidjs","transition","size","width","height"],"homepage":"https://corvu.dev/docs/utilities/transition-size","bugs":{"url":"https://github.com/corvudev/corvu/issues","email":"code@jasi.dev"},"repository":{"type":"git","url":"git+https://github.com/corvudev/corvu.git"},"license":"MIT","author":{"name":"Jasmin Noetzli","email":"code@jasi.dev","url":"https://github.com/GiyoMoon"},"sideEffects":false,"type":"module","exports":{".":{"types":"./dist/index.d.ts","solid":"./dist/index.jsx","default":"./dist/index.js"}},"main":"./dist/index.js","types":"./dist/index.d.ts","typesVersions":{"*":{"*":["./dist/index.d.ts"]}},"dependencies":{"@corvu/utils":"~0.3.2"},"devDependencies":{"@typescript-eslint/eslint-plugin":"^7.15.0","esbuild-plugin-solid":"^0.6.0","eslint":"^8.57.0","eslint-config-prettier":"^9.1.0","eslint-plugin-solid":"^0.14.1","prettier":"^3.3.2","solid-js":"^1.8.18","tsup":"^8.1.0","typedoc":"^0.26.3","typescript":"^5.5.3"},"peerDependencies":{"solid-js":"^1.8"},"scripts":{"build":"tsup","clean":"rm -rf .turbo dist node_modules api.json","lint":"eslint --max-warnings=0 .","typedoc":"typedoc --json api.json --entryPoints ./src/index.ts"},"_id":"solid-transition-size@0.1.4","_integrity":"sha512-ocHVnbfy23CgfaH4cEUR/AFg0Y3CEL8Oh3n9Qv8OHFJgPh+zkmERKZQfi/xH5XvxDCizg8VjPrVUhiHB1Gza8g==","_resolved":"/tmp/483b64bb05bcc16df9c781c4f7748082/solid-transition-size-0.1.4.tgz","_from":"file:solid-transition-size-0.1.4.tgz","_nodeVersion":"20.15.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-ocHVnbfy23CgfaH4cEUR/AFg0Y3CEL8Oh3n9Qv8OHFJgPh+zkmERKZQfi/xH5XvxDCizg8VjPrVUhiHB1Gza8g==","shasum":"60de5b6ad44affd9c09f91999646bda810f20308","tarball":"https://registry.npmjs.org/solid-transition-size/-/solid-transition-size-0.1.4.tgz","fileCount":6,"unpackedSize":12200,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDUvoiq/oTFrSJRx5eL/RDeGKotrq0tL7s8jrKp2RJu6AiAoLtN1H3BU0FSJu5u0dqFz2umqx1O+BQxYETzx7DbpRg=="}]},"_npmUser":{"name":"giyomoon","email":"npm@jasi.dev"},"directories":{},"maintainers":[{"name":"giyomoon","email":"npm@jasi.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/solid-transition-size_0.1.4_1720131575643_0.47151611458164333"},"_hasShrinkwrap":false}},"time":{"created":"2024-02-29T18:20:37.305Z","modified":"2024-07-04T22:19:36.005Z","0.1.0":"2024-02-29T18:20:37.591Z","0.1.1":"2024-03-17T22:47:48.451Z","0.1.2":"2024-05-13T16:04:33.538Z","0.1.3":"2024-06-19T15:20:42.396Z","0.1.4":"2024-07-04T22:19:35.857Z"},"maintainers":[{"name":"giyomoon","email":"npm@jasi.dev"}],"author":{"name":"Jasmin Noetzli","email":"code@jasi.dev","url":"https://github.com/GiyoMoon"},"repository":{"type":"git","url":"git+https://github.com/corvudev/corvu.git"},"keywords":["solid","solidjs","transition","size","width","height"],"license":"MIT","homepage":"https://corvu.dev/docs/utilities/transition-size","bugs":{"url":"https://github.com/corvudev/corvu/issues","email":"code@jasi.dev"},"readme":"<div align=\"center\">\n  <a href=\"https://corvu.dev/docs/utilities/transition-size\">\n    <img src=\"https://corvu.dev/readme/solid-transition-size.png\" width=1000 alt=\"Solid Transition Size\" />\n  </a>\n</div>\n<br />\n\nSolidJS utility which makes it possible to transition the width and height of elements that don't have a fixed size applied.\n\n## Features\n\n- Works with any CSS transition configuration\n- Specify which dimension to observe (width, height, or both)\n- Uses a ResizeObserver to detect changes in the size of the element\n\n## Usage\n\nThe 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.\n\n```tsx\nimport createTransitionSize from 'solid-transition-size';\n```\n\nFor a very simple example we can take the `<details>` element and transition the height when it is toggled:\n```tsx\nconst Details = () => {\n  const [ref, setRef] = createSignal<HTMLElement | null>(null)\n  const { transitionSize } = createTransitionSize({\n    element: ref,\n    dimension: 'height',\n  })\n\n  const height = () => {\n    if (!transitionSize()) return undefined\n    return transitionSize() + 'px'\n  }\n\n  return (\n    <details\n      ref={setRef}\n      class=\"transition-[height]\"\n      style={{\n        height: height(),\n      }}\n    >\n      <summary>Show detail</summary>\n      Detail\n    </details>\n  )\n}\n```\n\n## Further Reading\nThis 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).\n","readmeFilename":"README.md"}