mib

components/docs/generated/previews.ts

@@ -2,7 +2,7 @@
 // This file is autogenerated by scripts/create-pr-content.ts.
 // Do not edit this file directly.
 
-import React from 'react'
+import React from 'react';
 
 export const previews: Record<string, any> = {
   "date-and-time/date-field-demo": {

components/ui/accordion.tsx

@@ -3,7 +3,6 @@
 import * as React from "react"
 
 import type { MotionProps } from "framer-motion"
-import { AnimatePresence, motion } from "framer-motion"
 import { IconChevronDown } from "justd-icons"
 import type { ButtonProps } from "react-aria-components"
 import { Button } from "react-aria-components"
@@ -44,7 +43,7 @@ const Accordion = ({
 }
 
 const accordionItemStyles = tv({
-  base: "zwx3ai flex group pb-3 relative w-full flex-col border-b"
+  base: "zwx3ai flex group pb-3 transition-all relative w-full flex-col border-b"
 })
 
 interface AccordionItemContextProps {
@@ -94,24 +93,28 @@ interface AccordionContentProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const AccordionContent = ({ className, children }: AccordionContentProps) => {
   const { isOpen } = useAccordionItem()
+  const [height, setHeight] = React.useState<string | number>(0)
+  const contentRef = React.useRef<HTMLDivElement | null>(null)
+
+  React.useEffect(() => {
+    if (isOpen && contentRef.current) {
+      setHeight(contentRef.current.scrollHeight)
+    } else {
+      setHeight(0)
+    }
+  }, [isOpen])
   return (
-    <AnimatePresence initial={false}>
-      {isOpen && (
-        <motion.section
-          className={cn("overflow-hidden pr-6 dk32xd", className)}
-          initial="collapsed"
-          animate="open"
-          exit="collapsed"
-          variants={{
-            open: { opacity: 1, height: "initial" },
-            collapsed: { opacity: 0, height: 0 }
-          }}
-          transition={{ duration: 0.4, ease: [0.04, 0.62, 0.23, 0.98] }}
-        >
-          <div className="pb-0 pt-1">{children}</div>
-        </motion.section>
+    <section
+      className={cn(
+        "overflow-hidden transition-[height] duration-300 ease-in-out pr-6 dk32xd",
+        className
       )}
-    </AnimatePresence>
+      style={{ height: isOpen ? `${height}px` : "0px" }}
+    >
+      <div ref={contentRef} className="pb-0 pt-1">
+        {children}
+      </div>
+    </section>
   )
 }
 

components/ui/field.tsx

@@ -1,16 +1,24 @@
-'use client';
-
-import * as React from 'react';
-
-
-
-import { FieldError as FieldErrorPrimitive, type FieldErrorProps, Group, type GroupProps, Input as InputPrimitive, type InputProps, Label as LabelPrimitive, type LabelProps, Text, type TextFieldProps as TextFieldPrimitiveProps, type TextProps, type ValidationResult } from 'react-aria-components';
-import { tv } from 'tailwind-variants';
-
-
-
-import { cr, ctr } from './primitive';
-
+"use client"
+
+import * as React from "react"
+
+import {
+  FieldError as FieldErrorPrimitive,
+  type FieldErrorProps,
+  Group,
+  type GroupProps,
+  Input as InputPrimitive,
+  type InputProps,
+  Label as LabelPrimitive,
+  type LabelProps,
+  Text,
+  type TextFieldProps as TextFieldPrimitiveProps,
+  type TextProps,
+  type ValidationResult
+} from "react-aria-components"
+import { tv } from "tailwind-variants"
+
+import { cr, ctr } from "./primitive"
 
 // primitive styles
 

resources/content/docs/components/collections/accordion.mdx

@@ -4,7 +4,7 @@ description: Accordion is a vertical stack of headers that expand or collapse to
 order: 6
 published: true
 status: updated
-references: ["https://react-spectrum.adobe.com/react-aria/Button.html#props", "https://www.framer.com/motion/animate-presence/"]
+references: ["https://react-spectrum.adobe.com/react-aria/Button.html#props"]
 ---
 
 ## Basic
@@ -15,7 +15,7 @@ An accordion functions as a vertical stack of headers that expand to reveal or c
 <InstallCommand isAdd items={['accordion']}/>
 
 ## Manual Installation
-<InstallCommand isInstall isManual items={['react-aria-components', 'framer-motion', 'justd-icons']}/>
+<InstallCommand isInstall isManual items={['react-aria-components', 'justd-icons']}/>
 
 <SourceCode toShow={['accordion']}/>
 

resources/content/docs/components/statuses/meter.mdx

@@ -3,7 +3,7 @@ title: "Meter"
 description: Visualize values in a meter, like checking your car’s fuel gauge, great for displaying measurements at a glance..
 order: 2
 published: true
-references: ["https://react-spectrum.adobe.com/react-aria/Meter.html#props", "https://www.framer.com/motion/animation/"]
+references: ["https://react-spectrum.adobe.com/react-aria/Meter.html#props"]
 ---
 
 
@@ -20,7 +20,7 @@ A meter displays a value within a specified range, showing how much of the total
 <Composed components={['field']}/>
 
 ## Manual Installation
-<InstallCommand isInstall isManual items={['react-aria-components', 'framer-motion', 'justd-icons']}/>
+<InstallCommand isInstall isManual items={['react-aria-components', 'justd-icons']}/>
 <SourceCode toShow={['meter']}/>
 
 ## Decimal Format

resources/content/docs/components/statuses/progress-bar.mdx

@@ -3,7 +3,7 @@ title: "Progress Bar"
 description: Watch it fill up as tasks complete, like a loading bar on a game console, offering visual progress updates.
 order: 1
 published: true
-references: ["https://react-spectrum.adobe.com/react-aria/ProgressBar.html#props", "https://www.framer.com/motion/animation/"]
+references: ["https://react-spectrum.adobe.com/react-aria/ProgressBar.html#props"]
 ---
 
 ## Basic
@@ -18,7 +18,7 @@ Progress bars show how much an operation is done, either exactly or roughly, ove
 <Composed components={['field']}/>
 
 ## Manual Installation
-<InstallCommand isInstall isManual items={['react-aria-components', 'framer-motion']}/>
+<InstallCommand isInstall isManual items={['react-aria-components']}/>
 <SourceCode toShow={['progress-bar']}/>
 
 ## Indeterminate Progress Bar