@gv-tech/design-system 2.4.0 → 2.5.1

package/src/pages/ColorTokensDocs.tsx

@@ -1,218 +0,0 @@
-import { CodeBlock } from '@/components/docs/CodeBlock';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { tokens } from '@/theme/tokens';
-
-export function ColorTokensDocs() {
-  return (
-    <div className="space-y-12">
-      <div className="space-y-4">
-        <h1 className="text-3xl md:text-4xl font-extrabold tracking-tight">Color Tokens</h1>
-        <p className="text-lg md:text-xl text-muted-foreground max-w-2xl">
-          The Garcia Ventures design system is built on a robust token architecture that ensures consistency,
-          accessibility, and easy maintenance across all digital products.
-        </p>
-      </div>
-
-      <section className="space-y-6">
-        <h2 className="text-3xl font-bold tracking-tight">Design Philosophy</h2>
-        <div className="grid gap-6 md:grid-cols-3">
-          <Card className="bg-primary/5 border-primary/20">
-            <CardHeader>
-              <CardTitle className="text-lg">Intellect</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-muted-foreground">
-                Represented by Royal Blue, signaling depth, trust, and professional expertise.
-              </p>
-            </CardContent>
-          </Card>
-          <Card className="bg-secondary/5 border-secondary/20">
-            <CardHeader>
-              <CardTitle className="text-lg">Stability</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-muted-foreground">
-                Rooted in Brand Green, reflecting growth, balance, and environmental consciousness.
-              </p>
-            </CardContent>
-          </Card>
-          <Card className="bg-accent/5 border-accent/20">
-            <CardHeader>
-              <CardTitle className="text-lg">Transparency</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <p className="text-sm text-muted-foreground">
-                Expressed through Floral White, prioritizing clarity and a clean user experience.
-              </p>
-            </CardContent>
-          </Card>
-        </div>
-      </section>
-
-      <section className="space-y-6">
-        <h2 className="text-3xl font-bold tracking-tight">Adoption Guide</h2>
-        <p className="text-muted-foreground">
-          There are three primary ways to consume these tokens depending on your project's technology stack.
-        </p>
-
-        <div className="space-y-8">
-          <div className="space-y-4">
-            <h3 className="text-xl font-semibold">1. Tailwind CSS (Recommended)</h3>
-            <p className="text-sm text-muted-foreground">
-              Most projects should use standard Tailwind utility classes. These are automatically mapped to our tokens
-              via CSS variables.
-            </p>
-            <CodeBlock
-              language="tsx"
-              code={`// Use standard semantic classes
-<button className="bg-primary text-primary-foreground hover:bg-primary/90">
-  Primary Action
-</button>
-
-<div className="border-border bg-card text-card-foreground">
-  Card Content
-</div>`}
-            />
-          </div>
-
-          <div className="space-y-4">
-            <h3 className="text-xl font-semibold">2. TypeScript / React</h3>
-            <p className="text-sm text-muted-foreground">
-              For logic-heavy styling or CSS-in-JS solutions, import the \`tokens\` object directly.
-            </p>
-            <CodeBlock
-              language="tsx"
-              code={`import { tokens } from '@gv-tech/design-system';
-
-const MyComponent = () => {
-  return (
-    <div style={{ color: tokens.palette.brand.blue }}>
-      Using Royal Blue directly
-    </div>
-  );
-};`}
-            />
-          </div>
-
-          <div className="space-y-4">
-            <h3 className="text-xl font-semibold">3. Vanilla CSS</h3>
-            <p className="text-sm text-muted-foreground">
-              Directly access the CSS variables in your style tags or external stylesheets.
-            </p>
-            <CodeBlock
-              language="css"
-              code={`.custom-element {
-  background-color: hsl(var(--primary));
-  color: hsl(var(--primary-foreground));
-  border: 1px solid hsl(var(--border));
-}`}
-            />
-          </div>
-        </div>
-      </section>
-
-      <section className="space-y-6">
-        <div className="flex items-center justify-between">
-          <h2 className="text-3xl font-bold tracking-tight">Core Palette</h2>
-        </div>
-        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
-          <Card>
-            <CardContent className="pt-6 space-y-4">
-              <div
-                className="h-24 w-full rounded-lg border shadow-inner"
-                style={{ backgroundColor: tokens.palette.brand.blue }}
-              />
-              <div className="flex justify-between items-start">
-                <div>
-                  <h4 className="font-bold">Royal Blue</h4>
-                  <p className="text-xs text-muted-foreground">Intellect & Trust</p>
-                </div>
-                <code className="text-xs bg-muted px-1.5 py-0.5 rounded">{tokens.palette.brand.blue}</code>
-              </div>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardContent className="pt-6 space-y-4">
-              <div
-                className="h-24 w-full rounded-lg border shadow-inner"
-                style={{ backgroundColor: tokens.palette.brand.green }}
-              />
-              <div className="flex justify-between items-start">
-                <div>
-                  <h4 className="font-bold">Stability Green</h4>
-                  <p className="text-xs text-muted-foreground">Growth & Balance</p>
-                </div>
-                <code className="text-xs bg-muted px-1.5 py-0.5 rounded">{tokens.palette.brand.green}</code>
-              </div>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardContent className="pt-6 space-y-4">
-              <div
-                className="h-24 w-full rounded-lg border shadow-inner"
-                style={{ backgroundColor: tokens.palette.brand.floralWhite }}
-              />
-              <div className="flex justify-between items-start">
-                <div>
-                  <h4 className="font-bold">Floral White</h4>
-                  <p className="text-xs text-muted-foreground">Transparency & Clarity</p>
-                </div>
-                <code className="text-xs bg-muted px-1.5 py-0.5 rounded">{tokens.palette.brand.floralWhite}</code>
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </section>
-
-      <section className="space-y-6">
-        <h2 className="text-3xl font-bold tracking-tight">Semantic Tokens Reference</h2>
-        <div className="rounded-xl border shadow-sm overflow-x-auto">
-          <Table className="min-w-[600px] md:min-w-full">
-            <TableHeader>
-              <TableRow className="bg-muted/50 hover:bg-muted/50">
-                <TableHead className="w-[200px]">Token</TableHead>
-                <TableHead>Variable Name</TableHead>
-                <TableHead>Light Mode</TableHead>
-                <TableHead>Dark Mode</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {(Object.keys(tokens.theme.light) as Array<keyof typeof tokens.theme.light>).map((key) => {
-                if (key === 'radius') return null;
-                return (
-                  <TableRow key={key} className="group">
-                    <TableCell className="font-medium group-hover:text-primary transition-colors">
-                      {key.charAt(0).toUpperCase() + key.slice(1).replace(/([A-Z])/g, ' $1')}
-                    </TableCell>
-                    <TableCell className="font-mono text-xs text-muted-foreground">
-                      --{key.replace(/[A-Z]/g, (m) => '-' + m.toLowerCase())}
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex items-center gap-3">
-                        <div
-                          className="h-6 w-6 rounded-md border shadow-sm"
-                          style={{ backgroundColor: tokens.theme.light[key] as string }}
-                        />
-                        <span className="text-xs font-mono">{tokens.theme.light[key]}</span>
-                      </div>
-                    </TableCell>
-                    <TableCell>
-                      <div className="flex items-center gap-3">
-                        <div
-                          className="h-6 w-6 rounded-md border shadow-sm"
-                          style={{ backgroundColor: tokens.theme.dark[key] as string }}
-                        />
-                        <span className="text-xs font-mono">{tokens.theme.dark[key]}</span>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                );
-              })}
-            </TableBody>
-          </Table>
-        </div>
-      </section>
-    </div>
-  );
-}

package/src/pages/GettingStarted.tsx

@@ -1,304 +0,0 @@
-import { CodeBlock } from '@/components/docs/CodeBlock';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
-
-export function GettingStartedPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-2">
-        <h1 className="text-3xl md:text-4xl font-bold tracking-tight text-center md:text-left">
-          GV Tech Design System
-        </h1>
-        <p className="text-lg md:text-xl text-muted-foreground text-center md:text-left">
-          A comprehensive React component library built with shadcn/ui and Tailwind CSS.
-        </p>
-      </div>
-
-      <div className="grid gap-4 md:grid-cols-3">
-        <Card>
-          <CardHeader className="p-4 pb-2">
-            <div className="h-10 w-10 rounded-md bg-primary/10 flex items-center justify-center mb-2">
-              <span className="text-2xl">🎨</span>
-            </div>
-            <CardTitle className="text-lg">Consistent Design</CardTitle>
-          </CardHeader>
-          <CardContent className="p-4 pt-0">
-            <p className="text-sm text-muted-foreground">
-              Built on a unified design language with customizable themes.
-            </p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="p-4 pb-2">
-            <div className="h-10 w-10 rounded-md bg-primary/10 flex items-center justify-center mb-2">
-              <span className="text-2xl">⚡</span>
-            </div>
-            <CardTitle className="text-lg">Fully Typed</CardTitle>
-          </CardHeader>
-          <CardContent className="p-4 pt-0">
-            <p className="text-sm text-muted-foreground">
-              Complete TypeScript support with comprehensive type definitions.
-            </p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="p-4 pb-2">
-            <div className="h-10 w-10 rounded-md bg-primary/10 flex items-center justify-center mb-2">
-              <span className="text-2xl">♿</span>
-            </div>
-            <CardTitle className="text-lg">Accessible</CardTitle>
-          </CardHeader>
-          <CardContent className="p-4 pt-0">
-            <p className="text-sm text-muted-foreground">WAI-ARIA compliant components with keyboard navigation.</p>
-          </CardContent>
-        </Card>
-      </div>
-
-      <section className="space-y-4">
-        <h2 className="text-2xl font-semibold tracking-tight">Quick Example</h2>
-        <CodeBlock
-          code={`import { Button, Card, CardContent, CardHeader, CardTitle } from '@gv-tech/design-system';
-
-function MyComponent() {
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Welcome</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <Button>Get Started</Button>
-      </CardContent>
-    </Card>
-  );
-}`}
-        />
-      </section>
-
-      <section className="space-y-4">
-        <h2 className="text-2xl font-semibold tracking-tight">Features</h2>
-        <ul className="space-y-2 text-muted-foreground">
-          <li className="flex items-center gap-2">
-            <span className="text-green-500">✓</span> 46+ ready-to-use components
-          </li>
-          <li className="flex items-center gap-2">
-            <span className="text-green-500">✓</span> Dark and light mode support
-          </li>
-          <li className="flex items-center gap-2">
-            <span className="text-green-500">✓</span> Fully customizable with CSS variables
-          </li>
-          <li className="flex items-center gap-2">
-            <span className="text-green-500">✓</span> Tree-shakeable for optimal bundle size
-          </li>
-          <li className="flex items-center gap-2">
-            <span className="text-green-500">✓</span> React 18/19 compatible
-          </li>
-        </ul>
-      </section>
-    </div>
-  );
-}
-
-export function InstallationPage() {
-  return (
-    <div className="space-y-8">
-      <div className="space-y-2">
-        <h1 className="text-2xl md:text-3xl font-bold tracking-tight">Installation</h1>
-        <p className="text-base md:text-lg text-muted-foreground">
-          Get started with the GV Tech Design System in your React project.
-        </p>
-      </div>
-
-      <section className="space-y-4">
-        <h2 className="text-2xl font-semibold tracking-tight">Install the package</h2>
-        <p className="text-muted-foreground">Install the design system package using your preferred package manager:</p>
-        <Tabs defaultValue="npm" className="w-full">
-          <TabsList>
-            <TabsTrigger value="npm">npm</TabsTrigger>
-            <TabsTrigger value="yarn">yarn</TabsTrigger>
-            <TabsTrigger value="pnpm">pnpm</TabsTrigger>
-          </TabsList>
-          <TabsContent value="npm" className="mt-4">
-            <CodeBlock code="npm install @gv-tech/design-system" language="bash" />
-          </TabsContent>
-          <TabsContent value="yarn" className="mt-4">
-            <CodeBlock code="yarn add @gv-tech/design-system" language="bash" />
-          </TabsContent>
-          <TabsContent value="pnpm" className="mt-4">
-            <CodeBlock code="pnpm add @gv-tech/design-system" language="bash" />
-          </TabsContent>
-        </Tabs>
-      </section>
-
-      <section className="space-y-4">
-        <h2 className="text-2xl font-semibold tracking-tight">Peer Dependencies</h2>
-        <p className="text-muted-foreground">Make sure you have the required peer dependencies installed:</p>
-        <CodeBlock
-          code={`{
-  "react": "^18 || ^19",
-  "react-dom": "^18 || ^19",
-  "next-themes": "^0.4.0"
-}`}
-          language="json"
-        />
-        <p className="text-sm text-muted-foreground">
-          <code className="text-sm bg-muted px-1.5 py-0.5 rounded">next-themes</code> is required for the design
-          system's <code className="text-sm bg-muted px-1.5 py-0.5 rounded">ThemeProvider</code>,{' '}
-          <code className="text-sm bg-muted px-1.5 py-0.5 rounded">ThemeToggle</code>, and{' '}
-          <code className="text-sm bg-muted px-1.5 py-0.5 rounded">useTheme</code> to work. Install it alongside the
-          design system:
-        </p>
-        <Tabs defaultValue="npm" className="w-full">
-          <TabsList>
-            <TabsTrigger value="npm">npm</TabsTrigger>
-            <TabsTrigger value="yarn">yarn</TabsTrigger>
-            <TabsTrigger value="pnpm">pnpm</TabsTrigger>
-          </TabsList>
-          <TabsContent value="npm" className="mt-4">
-            <CodeBlock code="npm install next-themes" language="bash" />
-          </TabsContent>
-          <TabsContent value="yarn" className="mt-4">
-            <CodeBlock code="yarn add next-themes" language="bash" />
-          </TabsContent>
-          <TabsContent value="pnpm" className="mt-4">
-            <CodeBlock code="pnpm add next-themes" language="bash" />
-          </TabsContent>
-        </Tabs>
-      </section>
-
-      <section className="space-y-4">
-        <h2 className="text-2xl font-semibold tracking-tight">Configure Tailwind CSS</h2>
-        <p className="text-muted-foreground">
-          The design system uses Tailwind CSS for styling. Add the following to your{' '}
-          <code className="text-sm bg-muted px-1.5 py-0.5 rounded">tailwind.config.js</code>:
-        </p>
-        <CodeBlock
-          code={`/** @type {import('tailwindcss').Config} */
-module.exports = {
-  darkMode: 'class',
-  content: [
-    './src/**/*.{js,ts,jsx,tsx}',
-    './node_modules/@gv-tech/design-system/dist/**/*.js',
-  ],
-  theme: {
-    extend: {
-      colors: {
-        border: 'hsl(var(--border))',
-        input: 'hsl(var(--input))',
-        ring: 'hsl(var(--ring))',
-        background: 'hsl(var(--background))',
-        foreground: 'hsl(var(--foreground))',
-        primary: {
-          DEFAULT: 'hsl(var(--primary))',
-          foreground: 'hsl(var(--primary-foreground))',
-        },
-        secondary: {
-          DEFAULT: 'hsl(var(--secondary))',
-          foreground: 'hsl(var(--secondary-foreground))',
-        },
-        destructive: {
-          DEFAULT: 'hsl(var(--destructive))',
-          foreground: 'hsl(var(--destructive-foreground))',
-        },
-        muted: {
-          DEFAULT: 'hsl(var(--muted))',
-          foreground: 'hsl(var(--muted-foreground))',
-        },
-        accent: {
-          DEFAULT: 'hsl(var(--accent))',
-          foreground: 'hsl(var(--accent-foreground))',
-        },
-        card: {
-          DEFAULT: 'hsl(var(--card))',
-          foreground: 'hsl(var(--card-foreground))',
-        },
-      },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
-    },
-  },
-}`}
-        />
-      </section>
-
-      <section className="space-y-4">
-        <h2 className="text-2xl font-semibold tracking-tight">Add CSS Variables</h2>
-        <p className="text-muted-foreground">Add the following CSS variables to your global stylesheet:</p>
-        <CodeBlock
-          code={`@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-  }
-}`}
-          language="css"
-        />
-      </section>
-
-      <section className="space-y-4">
-        <h2 className="text-2xl font-semibold tracking-tight">Start Using Components</h2>
-        <p className="text-muted-foreground">
-          Wrap your app with <code className="text-sm bg-muted px-1.5 py-0.5 rounded">ThemeProvider</code> and start
-          importing components:
-        </p>
-        <CodeBlock
-          code={`import { ThemeProvider, ThemeToggle, Button } from '@gv-tech/design-system';
-import '@gv-tech/design-system/style.css';
-
-export default function App() {
-  return (
-    <ThemeProvider>
-      <div>
-        <ThemeToggle variant="ternary" />
-        <Button variant="default">Click me</Button>
-      </div>
-    </ThemeProvider>
-  );
-}`}
-        />
-      </section>
-    </div>
-  );
-}

package/src/pages/components/AccordionDocs.tsx

@@ -1,164 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
-
-export function AccordionDocs() {
-  return (
-    <ComponentSection
-      title="Accordion"
-      description="A vertically stacked set of interactive headings that each reveal a section of content."
-    >
-      <ComponentShowcase
-        title="Default"
-        description="A basic accordion component."
-        code={`<Accordion type="single" collapsible className="w-full">
-  <AccordionItem value="item-1">
-    <AccordionTrigger>Is it accessible?</AccordionTrigger>
-    <AccordionContent>
-      Yes. It adheres to the WAI-ARIA design pattern.
-    </AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="item-2">
-    <AccordionTrigger>Is it styled?</AccordionTrigger>
-    <AccordionContent>
-      Yes. It comes with default styles.
-    </AccordionContent>
-  </AccordionItem>
-  <AccordionItem value="item-3">
-    <AccordionTrigger>Is it animated?</AccordionTrigger>
-    <AccordionContent>
-      Yes. It's animated by default.
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>`}
-      >
-        <Accordion type="single" collapsible className="w-full max-w-md">
-          <AccordionItem value="item-1">
-            <AccordionTrigger>Is it accessible?</AccordionTrigger>
-            <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
-          </AccordionItem>
-          <AccordionItem value="item-2">
-            <AccordionTrigger>Is it styled?</AccordionTrigger>
-            <AccordionContent>
-              Yes. It comes with default styles that matches the other components&apos; aesthetic.
-            </AccordionContent>
-          </AccordionItem>
-          <AccordionItem value="item-3">
-            <AccordionTrigger>Is it animated?</AccordionTrigger>
-            <AccordionContent>
-              Yes. It&apos;s animated by default, but you can disable it if you prefer.
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-
-        <h4 className="text-lg font-medium mt-6">Accordion (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'type',
-              type: '"single" | "multiple"',
-              description: 'Determines whether one or multiple items can be opened at the same time.',
-              required: true,
-            },
-            {
-              name: 'collapsible',
-              type: 'boolean',
-              defaultValue: 'false check',
-              description: 'When type is "single", allows closing content when clicking trigger for an open item.',
-            },
-            {
-              name: 'value',
-              type: 'string | string[]',
-              description: 'The controlled value of the item(s) to expand.',
-            },
-            {
-              name: 'defaultValue',
-              type: 'string | string[]',
-              description: 'The default value of the item(s) to expand.',
-            },
-            {
-              name: 'onValueChange',
-              type: '(value: string | string[]) => void',
-              description: 'Event handler called when the expanded state of an item changes.',
-            },
-            {
-              name: 'disabled',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'When true, prevents the user from interacting with the accordion.',
-            },
-            {
-              name: 'dir',
-              type: '"ltr" | "rtl"',
-              defaultValue: '"ltr"',
-              description: 'The reading direction of the accordion.',
-            },
-            {
-              name: 'orientation',
-              type: '"vertical" | "horizontal"',
-              defaultValue: '"vertical"',
-              description: 'The orientation of the accordion.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">AccordionItem</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'value',
-              type: 'string',
-              description: 'A unique value for the item.',
-              required: true,
-            },
-            {
-              name: 'disabled',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'When true, prevents the user from interacting with the item.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">AccordionTrigger</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'children',
-              type: 'ReactNode',
-              description: 'The content of the trigger.',
-            },
-            {
-              name: 'asChild',
-              type: 'boolean',
-              defaultValue: 'false',
-              description:
-                'Change the default rendered element for the one passed as a child, merging their props and behavior.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">AccordionContent</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'children',
-              type: 'ReactNode',
-              description: 'The content of the item.',
-            },
-            {
-              name: 'forceMount',
-              type: 'boolean',
-              description:
-                'Used to force mounting when more control is needed. Useful when controlling animation with React libraries.',
-            },
-          ]}
-        />
-      </div>
-    </ComponentSection>
-  );
-}