@girardmedia/bootspring 1.2.0 → 2.0.3

package/skills/patterns/ui/accordions.md

@@ -1,395 +0,0 @@
-# Accordion Patterns
-
-Patterns for collapsible accordion components.
-
-## Radix Accordion
-
-```tsx
-// components/ui/Accordion.tsx
-'use client'
-
-import * as AccordionPrimitive from '@radix-ui/react-accordion'
-import { ChevronDown } from 'lucide-react'
-import { forwardRef } from 'react'
-import { cn } from '@/lib/utils'
-
-export const Accordion = AccordionPrimitive.Root
-
-export const AccordionItem = forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn('border-b', className)}
-    {...props}
-  />
-))
-AccordionItem.displayName = 'AccordionItem'
-
-export const AccordionTrigger = forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline',
-        '[&[data-state=open]>svg]:rotate-180',
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = 'AccordionTrigger'
-
-export const AccordionContent = forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className={cn(
-      'overflow-hidden text-sm transition-all',
-      'data-[state=closed]:animate-accordion-up',
-      'data-[state=open]:animate-accordion-down',
-      className
-    )}
-    {...props}
-  >
-    <div className="pb-4 pt-0">{children}</div>
-  </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = 'AccordionContent'
-```
-
-## Tailwind Animation Config
-
-```javascript
-// tailwind.config.js
-module.exports = {
-  theme: {
-    extend: {
-      keyframes: {
-        'accordion-down': {
-          from: { height: '0' },
-          to: { height: 'var(--radix-accordion-content-height)' }
-        },
-        'accordion-up': {
-          from: { height: 'var(--radix-accordion-content-height)' },
-          to: { height: '0' }
-        }
-      },
-      animation: {
-        'accordion-down': 'accordion-down 0.2s ease-out',
-        'accordion-up': 'accordion-up 0.2s ease-out'
-      }
-    }
-  }
-}
-```
-
-## FAQ Accordion
-
-```tsx
-// components/FAQ.tsx
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger
-} from '@/components/ui/Accordion'
-
-const faqs = [
-  {
-    question: 'How do I get started?',
-    answer: 'Sign up for a free account and follow our getting started guide.'
-  },
-  {
-    question: 'What payment methods do you accept?',
-    answer: 'We accept all major credit cards, PayPal, and bank transfers.'
-  },
-  {
-    question: 'Can I cancel my subscription?',
-    answer: 'Yes, you can cancel anytime. Your account will remain active until the end of your billing period.'
-  },
-  {
-    question: 'Do you offer refunds?',
-    answer: 'We offer a 30-day money-back guarantee for all paid plans.'
-  }
-]
-
-export function FAQ() {
-  return (
-    <section className="py-16">
-      <div className="container max-w-3xl">
-        <h2 className="mb-8 text-center text-3xl font-bold">
-          Frequently Asked Questions
-        </h2>
-
-        <Accordion type="single" collapsible className="w-full">
-          {faqs.map((faq, index) => (
-            <AccordionItem key={index} value={`item-${index}`}>
-              <AccordionTrigger>{faq.question}</AccordionTrigger>
-              <AccordionContent>{faq.answer}</AccordionContent>
-            </AccordionItem>
-          ))}
-        </Accordion>
-      </div>
-    </section>
-  )
-}
-```
-
-## Multiple Open Accordion
-
-```tsx
-// components/SettingsAccordion.tsx
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger
-} from '@/components/ui/Accordion'
-import { User, Bell, Shield, CreditCard } from 'lucide-react'
-
-export function SettingsAccordion() {
-  return (
-    <Accordion type="multiple" className="w-full" defaultValue={['profile']}>
-      <AccordionItem value="profile">
-        <AccordionTrigger>
-          <div className="flex items-center gap-2">
-            <User className="h-4 w-4" />
-            Profile Settings
-          </div>
-        </AccordionTrigger>
-        <AccordionContent>
-          <div className="space-y-4">
-            <div>
-              <label className="text-sm font-medium">Display Name</label>
-              <input
-                type="text"
-                className="mt-1 w-full rounded border px-3 py-2"
-              />
-            </div>
-            <div>
-              <label className="text-sm font-medium">Bio</label>
-              <textarea className="mt-1 w-full rounded border px-3 py-2" />
-            </div>
-          </div>
-        </AccordionContent>
-      </AccordionItem>
-
-      <AccordionItem value="notifications">
-        <AccordionTrigger>
-          <div className="flex items-center gap-2">
-            <Bell className="h-4 w-4" />
-            Notifications
-          </div>
-        </AccordionTrigger>
-        <AccordionContent>
-          <div className="space-y-3">
-            <label className="flex items-center gap-2">
-              <input type="checkbox" defaultChecked />
-              <span>Email notifications</span>
-            </label>
-            <label className="flex items-center gap-2">
-              <input type="checkbox" defaultChecked />
-              <span>Push notifications</span>
-            </label>
-            <label className="flex items-center gap-2">
-              <input type="checkbox" />
-              <span>SMS notifications</span>
-            </label>
-          </div>
-        </AccordionContent>
-      </AccordionItem>
-
-      <AccordionItem value="security">
-        <AccordionTrigger>
-          <div className="flex items-center gap-2">
-            <Shield className="h-4 w-4" />
-            Security
-          </div>
-        </AccordionTrigger>
-        <AccordionContent>
-          <div className="space-y-4">
-            <button className="rounded bg-blue-600 px-4 py-2 text-white">
-              Change Password
-            </button>
-            <button className="rounded border px-4 py-2">
-              Enable Two-Factor Auth
-            </button>
-          </div>
-        </AccordionContent>
-      </AccordionItem>
-
-      <AccordionItem value="billing">
-        <AccordionTrigger>
-          <div className="flex items-center gap-2">
-            <CreditCard className="h-4 w-4" />
-            Billing
-          </div>
-        </AccordionTrigger>
-        <AccordionContent>
-          <div className="space-y-4">
-            <div className="rounded bg-gray-50 p-4">
-              <p className="font-medium">Current Plan: Pro</p>
-              <p className="text-sm text-gray-600">$29/month</p>
-            </div>
-            <button className="text-sm text-blue-600 hover:underline">
-              View billing history
-            </button>
-          </div>
-        </AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  )
-}
-```
-
-## Controlled Accordion
-
-```tsx
-// components/ControlledAccordion.tsx
-'use client'
-
-import { useState } from 'react'
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger
-} from '@/components/ui/Accordion'
-
-export function ControlledAccordion() {
-  const [openItems, setOpenItems] = useState<string[]>(['item-1'])
-
-  const expandAll = () => {
-    setOpenItems(['item-1', 'item-2', 'item-3'])
-  }
-
-  const collapseAll = () => {
-    setOpenItems([])
-  }
-
-  return (
-    <div>
-      <div className="mb-4 flex gap-2">
-        <button
-          onClick={expandAll}
-          className="text-sm text-blue-600 hover:underline"
-        >
-          Expand All
-        </button>
-        <button
-          onClick={collapseAll}
-          className="text-sm text-blue-600 hover:underline"
-        >
-          Collapse All
-        </button>
-      </div>
-
-      <Accordion
-        type="multiple"
-        value={openItems}
-        onValueChange={setOpenItems}
-      >
-        <AccordionItem value="item-1">
-          <AccordionTrigger>Section 1</AccordionTrigger>
-          <AccordionContent>Content for section 1</AccordionContent>
-        </AccordionItem>
-        <AccordionItem value="item-2">
-          <AccordionTrigger>Section 2</AccordionTrigger>
-          <AccordionContent>Content for section 2</AccordionContent>
-        </AccordionItem>
-        <AccordionItem value="item-3">
-          <AccordionTrigger>Section 3</AccordionTrigger>
-          <AccordionContent>Content for section 3</AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    </div>
-  )
-}
-```
-
-## Nested Accordion
-
-```tsx
-// components/NestedAccordion.tsx
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger
-} from '@/components/ui/Accordion'
-
-interface Category {
-  name: string
-  subcategories: {
-    name: string
-    items: string[]
-  }[]
-}
-
-const categories: Category[] = [
-  {
-    name: 'Electronics',
-    subcategories: [
-      { name: 'Phones', items: ['iPhone', 'Samsung', 'Google Pixel'] },
-      { name: 'Laptops', items: ['MacBook', 'ThinkPad', 'XPS'] }
-    ]
-  },
-  {
-    name: 'Clothing',
-    subcategories: [
-      { name: 'Men', items: ['Shirts', 'Pants', 'Shoes'] },
-      { name: 'Women', items: ['Dresses', 'Tops', 'Accessories'] }
-    ]
-  }
-]
-
-export function NestedAccordion() {
-  return (
-    <Accordion type="single" collapsible>
-      {categories.map((category, i) => (
-        <AccordionItem key={i} value={`category-${i}`}>
-          <AccordionTrigger className="text-lg font-semibold">
-            {category.name}
-          </AccordionTrigger>
-          <AccordionContent>
-            <Accordion type="single" collapsible className="ml-4">
-              {category.subcategories.map((sub, j) => (
-                <AccordionItem key={j} value={`sub-${i}-${j}`}>
-                  <AccordionTrigger>{sub.name}</AccordionTrigger>
-                  <AccordionContent>
-                    <ul className="ml-4 list-disc space-y-1">
-                      {sub.items.map((item, k) => (
-                        <li key={k} className="text-gray-600">
-                          {item}
-                        </li>
-                      ))}
-                    </ul>
-                  </AccordionContent>
-                </AccordionItem>
-              ))}
-            </Accordion>
-          </AccordionContent>
-        </AccordionItem>
-      ))}
-    </Accordion>
-  )
-}
-```
-
-## When to Use
-
-- FAQ sections
-- Settings panels
-- Navigation menus
-- Collapsible content

package/skills/patterns/ui/cards.md

@@ -1,299 +0,0 @@
-# Card Patterns
-
-Patterns for building card components.
-
-## Basic Card
-
-```tsx
-// components/ui/Card.tsx
-interface CardProps {
-  children: React.ReactNode
-  className?: string
-}
-
-export function Card({ children, className = '' }: CardProps) {
-  return (
-    <div className={`rounded-lg border bg-white p-6 shadow-sm ${className}`}>
-      {children}
-    </div>
-  )
-}
-
-export function CardHeader({ children }: { children: React.ReactNode }) {
-  return <div className="mb-4">{children}</div>
-}
-
-export function CardTitle({ children }: { children: React.ReactNode }) {
-  return <h3 className="text-lg font-semibold">{children}</h3>
-}
-
-export function CardDescription({ children }: { children: React.ReactNode }) {
-  return <p className="text-sm text-gray-500">{children}</p>
-}
-
-export function CardContent({ children }: { children: React.ReactNode }) {
-  return <div>{children}</div>
-}
-
-export function CardFooter({ children }: { children: React.ReactNode }) {
-  return <div className="mt-4 flex items-center gap-2">{children}</div>
-}
-
-// Usage
-<Card>
-  <CardHeader>
-    <CardTitle>Card Title</CardTitle>
-    <CardDescription>Card description here</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p>Card content</p>
-  </CardContent>
-  <CardFooter>
-    <button>Action</button>
-  </CardFooter>
-</Card>
-```
-
-## Interactive Card
-
-```tsx
-// components/ui/InteractiveCard.tsx
-import Link from 'next/link'
-
-interface Props {
-  href: string
-  title: string
-  description: string
-  icon?: React.ReactNode
-}
-
-export function InteractiveCard({ href, title, description, icon }: Props) {
-  return (
-    <Link
-      href={href}
-      className="group block rounded-lg border p-6 transition-all hover:border-gray-300 hover:shadow-md"
-    >
-      {icon && (
-        <div className="mb-4 inline-block rounded-lg bg-gray-100 p-3 group-hover:bg-gray-200">
-          {icon}
-        </div>
-      )}
-      <h3 className="font-semibold group-hover:text-blue-600">{title}</h3>
-      <p className="mt-2 text-sm text-gray-500">{description}</p>
-    </Link>
-  )
-}
-```
-
-## Stats Card
-
-```tsx
-// components/cards/StatsCard.tsx
-import { ArrowUp, ArrowDown } from 'lucide-react'
-
-interface Props {
-  title: string
-  value: string | number
-  change?: number
-  changeLabel?: string
-  icon?: React.ReactNode
-}
-
-export function StatsCard({ title, value, change, changeLabel, icon }: Props) {
-  const isPositive = change && change > 0
-
-  return (
-    <div className="rounded-lg border bg-white p-6">
-      <div className="flex items-center justify-between">
-        <p className="text-sm font-medium text-gray-500">{title}</p>
-        {icon && <div className="text-gray-400">{icon}</div>}
-      </div>
-
-      <p className="mt-2 text-3xl font-bold">{value}</p>
-
-      {change !== undefined && (
-        <div className="mt-2 flex items-center gap-1">
-          <span className={`flex items-center text-sm ${
-            isPositive ? 'text-green-600' : 'text-red-600'
-          }`}>
-            {isPositive ? <ArrowUp className="h-4 w-4" /> : <ArrowDown className="h-4 w-4" />}
-            {Math.abs(change)}%
-          </span>
-          {changeLabel && (
-            <span className="text-sm text-gray-500">{changeLabel}</span>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}
-
-// Usage
-<div className="grid gap-4 md:grid-cols-4">
-  <StatsCard title="Revenue" value="$45,231" change={12.5} changeLabel="from last month" />
-  <StatsCard title="Users" value="2,345" change={-3.2} changeLabel="from last month" />
-  <StatsCard title="Orders" value="1,234" change={8.1} changeLabel="from last month" />
-  <StatsCard title="Conversion" value="3.2%" change={1.2} changeLabel="from last month" />
-</div>
-```
-
-## Feature Card
-
-```tsx
-// components/cards/FeatureCard.tsx
-interface Props {
-  icon: React.ReactNode
-  title: string
-  description: string
-  features: string[]
-}
-
-export function FeatureCard({ icon, title, description, features }: Props) {
-  return (
-    <div className="rounded-xl border bg-white p-8">
-      <div className="mb-4 inline-block rounded-lg bg-blue-100 p-3 text-blue-600">
-        {icon}
-      </div>
-
-      <h3 className="mb-2 text-xl font-semibold">{title}</h3>
-      <p className="mb-4 text-gray-600">{description}</p>
-
-      <ul className="space-y-2">
-        {features.map((feature, i) => (
-          <li key={i} className="flex items-center gap-2 text-sm">
-            <svg className="h-4 w-4 text-green-500" fill="currentColor" viewBox="0 0 20 20">
-              <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-            </svg>
-            {feature}
-          </li>
-        ))}
-      </ul>
-    </div>
-  )
-}
-```
-
-## Pricing Card
-
-```tsx
-// components/cards/PricingCard.tsx
-interface Props {
-  name: string
-  price: number
-  period?: string
-  description: string
-  features: string[]
-  highlighted?: boolean
-  ctaText?: string
-  onSelect: () => void
-}
-
-export function PricingCard({
-  name,
-  price,
-  period = '/month',
-  description,
-  features,
-  highlighted = false,
-  ctaText = 'Get Started',
-  onSelect
-}: Props) {
-  return (
-    <div className={`relative rounded-2xl p-8 ${
-      highlighted
-        ? 'border-2 border-blue-600 bg-white shadow-xl'
-        : 'border bg-white'
-    }`}>
-      {highlighted && (
-        <div className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-blue-600 px-3 py-1 text-xs font-medium text-white">
-          Most Popular
-        </div>
-      )}
-
-      <h3 className="text-lg font-semibold">{name}</h3>
-      <p className="mt-2 text-sm text-gray-500">{description}</p>
-
-      <div className="my-6">
-        <span className="text-4xl font-bold">${price}</span>
-        <span className="text-gray-500">{period}</span>
-      </div>
-
-      <ul className="mb-8 space-y-3">
-        {features.map((feature, i) => (
-          <li key={i} className="flex items-center gap-2 text-sm">
-            <svg className="h-5 w-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-            </svg>
-            {feature}
-          </li>
-        ))}
-      </ul>
-
-      <button
-        onClick={onSelect}
-        className={`w-full rounded-lg py-3 font-medium ${
-          highlighted
-            ? 'bg-blue-600 text-white hover:bg-blue-700'
-            : 'bg-gray-100 text-gray-900 hover:bg-gray-200'
-        }`}
-      >
-        {ctaText}
-      </button>
-    </div>
-  )
-}
-```
-
-## User Card
-
-```tsx
-// components/cards/UserCard.tsx
-import Image from 'next/image'
-
-interface Props {
-  user: {
-    name: string
-    email: string
-    avatar?: string
-    role: string
-  }
-  actions?: React.ReactNode
-}
-
-export function UserCard({ user, actions }: Props) {
-  return (
-    <div className="flex items-center justify-between rounded-lg border p-4">
-      <div className="flex items-center gap-4">
-        <div className="relative h-12 w-12 overflow-hidden rounded-full bg-gray-200">
-          {user.avatar ? (
-            <Image src={user.avatar} alt={user.name} fill className="object-cover" />
-          ) : (
-            <div className="flex h-full w-full items-center justify-center text-lg font-medium text-gray-600">
-              {user.name.charAt(0)}
-            </div>
-          )}
-        </div>
-
-        <div>
-          <p className="font-medium">{user.name}</p>
-          <p className="text-sm text-gray-500">{user.email}</p>
-        </div>
-      </div>
-
-      <div className="flex items-center gap-4">
-        <span className="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium">
-          {user.role}
-        </span>
-        {actions}
-      </div>
-    </div>
-  )
-}
-```
-
-## When to Use
-
-- Content display
-- Feature highlights
-- Pricing tables
-- User lists