Merge reworked implementations

Author: mj12albert

docs/src/app/(private)/experiments/collapsible/_icons.tsx

@@ -0,0 +1,21 @@
+'use client';
+import * as React from 'react';
+
+export default function Nothing() {
+  return <div>This is just a dummy file to hold icons</div>;
+}
+
+export function ExpandMoreIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="currentColor" />
+    </svg>
+  );
+}

docs/src/app/(private)/experiments/collapsible/animation.module.css

@@ -22,7 +22,6 @@
   overflow: hidden;
   box-sizing: border-box;
   width: 100%;
-  animation-fill-mode: forwards !important;
 
   &[data-open] {
     animation: slide-down var(--duration) ease-out;

docs/src/app/(private)/experiments/collapsible/animation.tsx

@@ -8,8 +8,8 @@ import classes from './animation.module.css';
 
 import { useAnimationsFinished } from '../../../../../../packages/react/src/utils/useAnimationsFinished';
 import { useEventCallback } from '../../../../../../packages/react/src/utils/useEventCallback';
-// import { useForkRef } from '../../../../../../packages/react/src/utils/useForkRef';
 import { useOnMount } from '../../../../../../packages/react/src/utils/useOnMount';
+import { ExpandMoreIcon } from './_icons';
 
 function Collapsible(props: {
   defaultOpen?: boolean;
@@ -152,18 +152,3 @@ export default function App() {
     </div>
   );
 }
-
-function ExpandMoreIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-    >
-      <path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" fill="currentColor" />
-    </svg>
-  );
-}