@neynar/ui 0.2.1 → 0.3.0

package/src/components/ui/typography.tsx

@@ -11,18 +11,19 @@ import { cn } from "@/lib/utils";
  * Uses Tailwind CSS 4 with custom CSS properties for theming.
  * Provides consistent text styling across the entire application.
  *
- * @variant microcopy - Very small text for fine print, timestamps, and metadata (text-microcopy, leading-tight)
- * @variant detail - Smaller text for details, captions, and descriptions (text-xs, leading-normal)
- * @variant body - Standard body text for readable content (text-sm, leading-snug)
+ * @variant microcopy - Very small text for fine print, timestamps, and metadata (text-xs)
+ * @variant detail - Smaller text for details, captions, and descriptions (text-sm)
+ * @variant body - Standard body text for readable content (text-base, leading-snug)
  * @variant blogBody - Body text for blog posts and long form content (text-lg, leading-loose)
  * @variant paragraphLead - Paragraph lead text for blog posts and long form content (text-lg)
  * @variant eyebrow - Eyebrow text for blog posts and long form content (text-xl)
- * @variant subHeadline - Secondary headings for subsections (text-base, font-medium, leading-relaxed)
- * @variant headline - Primary headings for page/section titles (text-lg, font-semibold, leading-tight)
- * @variant sectionTitle - Section titles (text-2xl, leading-relaxed)
- * @variant pageTitle - Page titles (text-3xl, leading-relaxed)
- * @variant displayTitle - Display titles (text-4xl, leading-snug)
- * @variant heroTitle - Hero titles (text-5xl, leading-snug)
+ * @variant subHeadline - Secondary headings for subsections (text-2xl)
+ * @variant headline - Primary headings for page/section titles (text-3xl)
+ * @variant sectionTitle - Section titles (text-4xl, leading-relaxed)
+ * @variant pageTitle - Page titles (text-5xl, leading-relaxed)
+ * @variant displayTitle - Display titles (text-6xl, leading-snug)
+ * @variant heroTitle - Hero titles (text-7xl, leading-snug)
+ * @variant code - Monospace font for inline code, terminal commands, and technical references (text-base, font-mono)
  *
  * @see {@link https://cva.style/docs} CVA documentation for variant patterns
  * @see {@link https://ui.shadcn.com/docs/components/typography} Typography component inspiration
@@ -50,6 +51,7 @@ const typographyVariants = cva("", {
      *
      * @variant default - Default text color that adapts to light/dark theme (text-foreground)
      * @variant muted - Subdued text color for secondary information and descriptions (text-muted-foreground)
+     * @variant faint - Very subtle text color for minimal visual prominence (text-neynar-faint-foreground)
      * @variant accent - Accent color for emphasis, highlights, and interactive elements (text-accent-foreground)
      * @variant destructive - Red color for error messages, warnings, and destructive actions (text-destructive)
      * @variant success - Green color for success messages, confirmations, and positive states (text-success)
@@ -58,6 +60,7 @@ const typographyVariants = cva("", {
     color: {
       default: "text-foreground",
       muted: "text-muted-foreground",
+      faint: "text-neynar-faint-foreground",
       accent: "text-accent-foreground",
       destructive: "text-destructive",
       success: "text-success",
@@ -129,6 +132,7 @@ type TypographyVariant =
 type TypographyColor =
   | "default"
   | "muted"
+  | "faint"
   | "accent"
   | "destructive"
   | "success"
@@ -347,13 +351,7 @@ function Typography({
 // eslint-disable-next-line unused-imports/no-unused-vars
 type H1DocsProps = {
   /** Color variant for semantic meaning and visual hierarchy @default "default" */
-  color?:
-    | "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning";
+  color?: TypographyColor;
   /** Text alignment within the container @default "left" */
   align?: "left" | "center" | "right" | "justify";
   /** Text transformation for stylistic effects */
@@ -419,13 +417,7 @@ function H1({ variant = "displayTitle", weight = "bold", ...props }: H1Props) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type H2DocsProps = {
   /** Color variant for semantic meaning and visual hierarchy @default "default" */
-  color?:
-    | "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning";
+  color?: TypographyColor;
   /** Text alignment within the container @default "left" */
   align?: "left" | "center" | "right" | "justify";
   /** Text transformation for stylistic effects */
@@ -491,13 +483,7 @@ function H2({ variant = "sectionTitle", weight = "bold", ...props }: H2Props) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type H3DocsProps = {
   /** Color variant for semantic meaning and visual hierarchy @default "default" */
-  color?:
-    | "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning";
+  color?: TypographyColor;
   /** Text alignment within the container @default "left" */
   align?: "left" | "center" | "right" | "justify";
   /** Text transformation for stylistic effects */
@@ -557,13 +543,7 @@ function H3({ variant = "headline", weight = "bold", ...props }: H3Props) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type H4DocsProps = {
   /** Color variant for semantic meaning and visual hierarchy @default "default" */
-  color?:
-    | "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning";
+  color?: TypographyColor;
   /** Text alignment within the container @default "left" */
   align?: "left" | "center" | "right" | "justify";
   /** Text transformation for stylistic effects */
@@ -620,13 +600,7 @@ function H4({ variant = "subHeadline", weight = "bold", ...props }: H4Props) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type H5DocsProps = {
   /** Color variant for semantic meaning and visual hierarchy @default "default" */
-  color?:
-    | "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning";
+  color?: TypographyColor;
   /** Text alignment within the container @default "left" */
   align?: "left" | "center" | "right" | "justify";
   /** Text transformation for stylistic effects */
@@ -678,13 +652,7 @@ function H5({ variant = "eyebrow", weight = "bold", ...props }: H5Props) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type H6DocsProps = {
   /** Color variant for semantic meaning and visual hierarchy @default "default" */
-  color?:
-    | "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning";
+  color?: TypographyColor;
   /** Text alignment within the container @default "left" */
   align?: "left" | "center" | "right" | "justify";
   /** Text transformation for stylistic effects */
@@ -736,13 +704,7 @@ function H6({ variant = "body", weight = "bold", ...props }: H6Props) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type PDocsProps = {
   /** Color variant for semantic meaning and visual hierarchy @default "default" */
-  color?:
-    | "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning";
+  color?: TypographyColor;
   /** Text alignment within the container @default "left" */
   align?: "left" | "center" | "right" | "justify";
   /** Text transformation for stylistic effects */
@@ -809,25 +771,9 @@ function P(props: PProps) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type SpanDocsProps = {
   /** Typography variant that determines text size, weight, and line height @default "body" */
-  variant?:
-    | "heading"
-    | "subheading"
-    | "body"
-    | "bodyEmphasized"
-    | "details"
-    | "field"
-    | "code"
-    | "microcopy"
-    | "tableCell"
-    | "tableHeader";
+  variant?: TypographyVariant;
   /** Color variant for semantic meaning and visual hierarchy @default "default" */
-  color?:
-    | "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning";
+  color?: TypographyColor;
   /** Text alignment within the container @default "left" */
   align?: "left" | "center" | "right" | "justify";
   /** Text transformation for stylistic effects */
@@ -893,13 +839,7 @@ function Span(props: SpanProps) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type CodeDocsProps = {
   /** Color variant for semantic meaning and visual hierarchy @default "default" */
-  color?:
-    | "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning";
+  color?: TypographyColor;
   /** Text alignment within the container @default "left" */
   align?: "left" | "center" | "right" | "justify";
   /** Text transformation for stylistic effects */
@@ -967,13 +907,7 @@ function Code(props: CodeProps) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type SmallDocsProps = {
   /** Color variant for semantic meaning and visual hierarchy @default "default" */
-  color?:
-    | "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning";
+  color?: TypographyColor;
   /** Text alignment within the container @default "left" */
   align?: "left" | "center" | "right" | "justify";
   /** Text transformation for stylistic effects */
@@ -1039,13 +973,7 @@ function Small({ variant = "detail", ...props }: SmallProps) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type StrongDocsProps = {
   /** Color variant for semantic meaning and visual hierarchy @default "default" */
-  color?:
-    | "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning";
+  color?: TypographyColor;
   /** Text alignment within the container @default "left" */
   align?: "left" | "center" | "right" | "justify";
   /** Text transformation for stylistic effects */
@@ -1111,13 +1039,7 @@ function Strong(props: StrongProps) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type LeadDocsProps = {
   /** Color variant for semantic meaning and visual hierarchy @default "muted" */
-  color?:
-    | "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning";
+  color?: TypographyColor;
   /** Text alignment within the container @default "left" */
   align?: "left" | "center" | "right" | "justify";
   /** Text transformation for stylistic effects */
@@ -1189,25 +1111,9 @@ function Lead({
 // eslint-disable-next-line unused-imports/no-unused-vars
 type ADocsProps = {
   /** Typography variant that determines text size, weight, and line height @default "body" */
-  variant?:
-    | "heading"
-    | "subheading"
-    | "body"
-    | "bodyEmphasized"
-    | "details"
-    | "field"
-    | "code"
-    | "microcopy"
-    | "tableCell"
-    | "tableHeader";
+  variant?: TypographyVariant;
   /** Color variant for semantic meaning and visual hierarchy @default "default" */
-  color?:
-    | "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning";
+  color?: TypographyColor;
   /** Text alignment within the container @default "left" */
   align?: "left" | "center" | "right" | "justify";
   /** Text transformation for stylistic effects */
@@ -1302,13 +1208,7 @@ function A({ href, asChild = false, className, ...props }: AProps) {
 // eslint-disable-next-line unused-imports/no-unused-vars
 type BlockquoteDocsProps = {
   /** Color variant for semantic meaning and visual hierarchy @default "default" */
-  color?:
-    | "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning";
+  color?: TypographyColor;
   /** Text alignment within the container @default "left" */
   align?: "left" | "center" | "right" | "justify";
   /** Text transformation for stylistic effects */

package/src/index.ts

@@ -1,9 +1,12 @@
 // Form & Input Components
 export * from "./components/ui/button";
+export * from "./components/ui/button-group";
 export * from "./components/ui/text-field";
+export * from "./components/ui/field";
 export * from "./components/ui/select";
 export * from "./components/ui/combobox";
 export * from "./components/ui/input";
+export * from "./components/ui/input-group";
 export * from "./components/ui/textarea";
 export * from "./components/ui/checkbox";
 export * from "./components/ui/switch";
@@ -44,6 +47,7 @@ export * from "./components/ui/drawer";
 
 // Typography
 export * from "./components/ui/typography";
+export * from "./components/ui/kbd";
 
 // Data Display
 export * from "./components/ui/table";
@@ -53,6 +57,9 @@ export * from "./components/ui/alert";
 export * from "./components/ui/progress";
 export * from "./components/ui/skeleton";
 export * from "./components/ui/empty-state";
+export * from "./components/ui/empty";
+export * from "./components/ui/item";
+export * from "./components/ui/spinner";
 export * from "./components/ui/sonner";
 
 // Interactive Controls

package/src/styles/globals.css

@@ -6,24 +6,28 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --radius: 0.625rem;
+  --radius: 0.5rem;
 
   /* Neynar Colors */
   --neynar-surface-base-background: oklch(from #eeeeee l c h);
+  --neynar-faint-foreground: rgb(0, 0, 0, 0.45);
 
   /* Map Figma colors to shadcn semantic tokens */
   --background: oklch(from #ffffff l c h); /* Surface/Body */
   --foreground: oklch(from #000000 l c h); /* Text/Content/Headers */
-  --card: oklch(from #ffffff l c h); /* Surface/Body */
+  --card: rgb(0, 0, 0, 0.05);
+  /*--card: oklch(from #ffffff l c h); /* Surface/Body */
   --card-foreground: oklch(from #000000 l c h); /* Text/Content/Headers */
   --popover: oklch(from #ffffff l c h); /* Surface/Body */
   --popover-foreground: oklch(from #000000 l c h); /* Text/Content/Headers */
   --primary: oklch(from #7f62c6 l c h); /* Farcaster Purple */
   --primary-foreground: oklch(from #ffffff l c h); /* Text/UI/White (fixed) */
-  --secondary: oklch(from #eeeeee l c h); /* Surface/Base */
+  /* --secondary: oklch(from #eeeeee l c h); /* Surface/Base */
+  --secondary: rgb(0, 0, 0, 0.1);
   --secondary-foreground: oklch(from #000000 l c h); /* Text/Content/Headers */
   --muted: oklch(from #eeeeee l c h); /* Surface/Base */
-  --muted-foreground: oklch(from #777777 l c h); /* Text/UI/Default */
+  /* --muted-foreground: oklch(from #777777 l c h); /* Text/UI/Default */
+  --muted-foreground: rgb(0, 0, 0, 0.6);
   --accent: oklch(from #f0ebfa l c h); /* Elevation/Info/Neutral */
   --accent-foreground: oklch(from #7360a1 l c h); /* Text/UI/Muted Info */
   --destructive: oklch(from #ad1b20 l c h); /* Tables/Method/DEL (text) */
@@ -36,14 +40,16 @@
   --warning-foreground: oklch(from #ffffff l c h); /* White text on warning */
   --info: oklch(from #1976d2 l c h); /* Info/Blue */
   --info-foreground: oklch(from #ffffff l c h); /* White text on info */
-  --border: oklch(from #dddddd l c h); /* Borders/Muted */
-  --input: oklch(from #ffffff l c h); /* Surface/Field */
+  /* --border: oklch(from #dddddd l c h); /* Borders/Muted */
+  --border: rgb(0, 0, 0, 0.1);
+  /* --input: oklch(from #ffffff l c h); /* Surface/Field */
+  --input: rgb(0, 0, 0, 0.1);
   --ring: oklch(from #7f62c6 l c h); /* Farcaster Purple */
-  --chart-1: oklch(from #829ae0 l c h); /* Charts/Blue 1 */
-  --chart-2: oklch(from #1a75ff l c h); /* Charts/Blue 2 */
-  --chart-3: oklch(from #c6acde l c h); /* Charts/Purple 1 */
-  --chart-4: oklch(from #9c27b0 l c h); /* Charts/Purple 2 */
-  --chart-5: oklch(from #7dc6da l c h); /* Charts/Violet */
+  --chart-1: #829ae0; /* Charts/Blue 1 */
+  --chart-2: #1a75ff; /* Charts/Blue 2 */
+  --chart-3: #c6acde; /* Charts/Purple 1 */
+  --chart-4: #9c27b0; /* Charts/Purple 2 */
+  --chart-5: #7dc6da; /* Charts/Violet */
   --sidebar: oklch(from #ffffff l c h); /* Surface/Body */
   --sidebar-foreground: oklch(from #000000 l c h); /* Text/Content/Headers */
   --sidebar-primary: oklch(from #7f62c6 l c h); /* Farcaster Purple */
@@ -61,24 +67,31 @@
 .dark {
   /* Neynar Colors */
   --neynar-surface-base-background: oklch(from #161517 l c h);
+  --neynar-faint-foreground: rgb(255, 255, 255, 0.45);
 
   /* Dark mode using actual Figma-defined dark mode colors */
   --background: oklch(from #222222 l c h); /* Surface/Body Dark */
-  --foreground: oklch(from #dddddd l c h); /* Text/UI/Active Dark */
-  --card: oklch(from #2d2d2d l c h); /* Surface/Feature Neutral Dark */
+  --foreground: oklch(
+    from rgb(255, 255, 255, 0.86) l c h
+  ); /* Text/UI/Active Dark */
+  --card: rgb(255, 255, 255, 0.05);
+  /* --card: oklch(from #2d2d2d l c h); /* Surface/Feature Neutral Dark */
   --card-foreground: oklch(from #dddddd l c h); /* Text/UI/Active Dark */
   --popover: oklch(from #222222 l c h); /* Surface/Body Dark */
   --popover-foreground: oklch(from #ffffff l c h); /* Text/UI/Active Dark */
   --primary: oklch(from #7f62c6 l c h); /* Farcaster Purple */
   --primary-foreground: oklch(from #ffffff l c h); /* Text/UI/White (fixed) */
-  --secondary: oklch(from #161517 l c h); /* Surface/Base Dark */
+  /* --secondary: oklch(from #161517 l c h); /* Surface/Base Dark */
+  --secondary: rgb(0, 0, 0, 0.25);
   --secondary-foreground: oklch(
     from #ffffff l c h
   ); /* Text/UI/Black > White Dark */
   --muted: oklch(from #333333 l c h); /* Surface/Feature/Neutral Dark */
-  --muted-foreground: oklch(from #bbbbbb l c h); /* Text/UI/Default Dark */
+  /* --muted-foreground: oklch(from #bbbbbb l c h); /* Text/UI/Default Dark */
+  --muted-foreground: rgb(255, 255, 255, 0.6);
+
   --accent: oklch(from #25212b l c h); /* Elevation/Info/Neutral Dark */
-  --accent-foreground: oklch(from #7360a1 l c h); /* Text/UI/Muted Info */
+  --accent-foreground: oklch(from #7f62c6 l c h); /* Text/UI/Muted Info */
   --destructive: oklch(from #ad1b20 l c h); /* Tables/Method/DEL (text) */
   --destructive-foreground: oklch(
     from #ffffff l c h
@@ -89,14 +102,16 @@
   --warning-foreground: oklch(from #000000 l c h); /* Black text on warning */
   --info: oklch(from #1976d2 l c h); /* Info/Blue Dark */
   --info-foreground: oklch(from #ffffff l c h); /* White text on info */
-  --border: oklch(from #444444 l c h); /* Borders/Muted Dark */
-  --input: oklch(from #222222 l c h); /* Surface/Field Dark */
+  /* --border: oklch(from #444444 l c h); /* Borders/Muted Dark */
+  --border: rgb(255, 255, 255, 0.1);
+  /* --input: oklch(from #222222 l c h); /* Surface/Field Dark */
+  --input: rgb(255, 255, 255, 0.1);
   --ring: oklch(from #7f62c6 l c h); /* Farcaster Purple */
-  --chart-1: oklch(from #829ae0 l c h); /* Charts/Blue 1 */
-  --chart-2: oklch(from #1a75ff l c h); /* Charts/Blue 2 */
-  --chart-3: oklch(from #c6acde l c h); /* Charts/Purple 1 */
-  --chart-4: oklch(from #9c27b0 l c h); /* Charts/Purple 2 */
-  --chart-5: oklch(from #7dc6da l c h); /* Charts/Violet */
+  --chart-1: #829ae0; /* Charts/Blue 1 */
+  --chart-2: #1a75ff; /* Charts/Blue 2 */
+  --chart-3: #c6acde; /* Charts/Purple 1 */
+  --chart-4: #9c27b0; /* Charts/Purple 2 */
+  --chart-5: #7dc6da; /* Charts/Violet */
   --sidebar: oklch(from #222222 l c h); /* Surface/Body Dark */
   --sidebar-foreground: oklch(from #ffffff l c h); /* Text/UI/White (fixed) */
   --sidebar-primary: oklch(from #7f62c6 l c h); /* Farcaster Purple */
@@ -113,6 +128,7 @@
 
 @theme inline {
   --color-neynar-surface-base-background: var(--neynar-surface-base-background);
+  --color-neynar-faint-foreground: var(--neynar-faint-foreground);
 
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -182,6 +198,6 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-neynar-surface-base-background text-foreground;
+    @apply bg-background text-foreground;
   }
 }

package/llm-docs/a.llm.md

@@ -1,145 +0,0 @@
-# A
-
-**Type**: component
-
-A - Anchor component for interactive text links Semantic anchor element for links with built-in hover states and accessibility features. Uses "body" variant with underline and smooth color transitions.
-
-## JSX Usage
-
-```jsx
-import { A } from '@neynar/ui';
-
-<A
-  variant={value}
-  color={value}
-  align={value}
-  transform={value}
-  weight={value}
-  htmlFor="value"
-  asChild={true}
-  italic={true}
-  underline={true}
-  strikethrough={true}
-  truncate={true}
-  srOnly={true}
-  href="value"
-  className="value"
->
-  {/* Your content here */}
-</A>
-```
-
-## Component Props
-
-### variant
-- **Type**: `| "heading"
-    | "subheading"
-    | "body"
-    | "bodyEmphasized"
-    | "details"
-    | "field"
-    | "code"
-    | "microcopy"
-    | "tableCell"
-    | "tableHeader"`
-- **Required**: No
-- **Description**: No description available
-
-### color
-- **Type**: `| "default"
-    | "muted"
-    | "accent"
-    | "destructive"
-    | "success"
-    | "warning"`
-- **Required**: No
-- **Description**: No description available
-
-### align
-- **Type**: `"left" | "center" | "right" | "justify"`
-- **Required**: No
-- **Description**: No description available
-
-### transform
-- **Type**: `"uppercase" | "lowercase" | "capitalize"`
-- **Required**: No
-- **Description**: No description available
-
-### weight
-- **Type**: `"normal" | "medium" | "semibold" | "bold"`
-- **Required**: No
-- **Description**: No description available
-
-### htmlFor
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### asChild
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### italic
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### underline
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### strikethrough
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### truncate
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### srOnly
-- **Type**: `boolean`
-- **Required**: No
-- **Description**: No description available
-
-### href
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-```tsx
-// External link
-<A href="https://neynar.com" target="_blank" rel="noopener noreferrer">
-  Visit Neynar Website
-</A>
-// Internal navigation
-<A href="/dashboard" color="accent">
-  Go to Dashboard
-</A>
-// Composition with Next.js Link
-<A asChild>
-  <Link href="/about">
-    Learn More About Us
-  </Link>
-</A>
-// In paragraph text
-<P>
-  For more information, <A href="/docs">check our documentation</A> or
-  contact support.
-</P>
-```

package/llm-docs/accordion-content.llm.md

@@ -1,67 +0,0 @@
-# AccordionContent
-
-**Type**: component
-
-AccordionContent - Collapsible content area of an accordion item The expandable content section that is revealed or hidden when the associated AccordionTrigger is activated. Features smooth height-based animations using Tailwind CSS keyframes and supports any React content including complex layouts.
-
-## JSX Usage
-
-```jsx
-import { AccordionContent } from '@neynar/ui';
-
-<AccordionContent
-  className="value"
-  forceMount={value}
->
-  {/* Your content here */}
-</AccordionContent>
-```
-
-## Component Props
-
-### className
-- **Type**: `string`
-- **Required**: No
-- **Description**: No description available
-
-### children
-- **Type**: `React.ReactNode`
-- **Required**: No
-- **Description**: No description available
-
-### forceMount
-- **Type**: `true`
-- **Required**: No
-- **Description**: No description available
-
-## Examples
-
-### Example 1
-```tsx
-// Simple text content
-<AccordionContent>
-  <p>This content is revealed when the accordion is expanded.</p>
-  <p>It can contain any React components or HTML elements.</p>
-</AccordionContent>
-```
-### Example 2
-```tsx
-// Rich content with components
-<AccordionContent>
-  <div className="space-y-4">
-    <Alert>
-      <InfoIcon className="h-4 w-4" />
-      <AlertTitle>Important Note</AlertTitle>
-      <AlertDescription>This is highlighted information.</AlertDescription>
-    </Alert>
-    <Button variant="outline">Take Action</Button>
-  </div>
-</AccordionContent>
-```
-### Example 3
-```tsx
-// Content with custom padding
-<AccordionContent className="pt-6 pb-6">
-  Content with extra vertical padding for better spacing.
-</AccordionContent>
-```