@girardmedia/bootspring 1.2.0 → 2.0.3

package/skills/patterns/ui/inputs.md

@@ -1,319 +0,0 @@
-# Input Component Patterns
-
-Patterns for form input components.
-
-## Text Input
-
-```tsx
-// components/ui/Input.tsx
-import { forwardRef } from 'react'
-
-interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
-  label?: string
-  error?: string
-  hint?: string
-}
-
-export const Input = forwardRef<HTMLInputElement, Props>(
-  ({ label, error, hint, className = '', ...props }, ref) => {
-    return (
-      <div className="space-y-1">
-        {label && (
-          <label className="block text-sm font-medium text-gray-700">
-            {label}
-            {props.required && <span className="text-red-500">*</span>}
-          </label>
-        )}
-
-        <input
-          ref={ref}
-          className={`w-full rounded-lg border px-3 py-2 outline-none transition-colors
-            ${error
-              ? 'border-red-500 focus:border-red-500 focus:ring-1 focus:ring-red-500'
-              : 'border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500'
-            }
-            disabled:cursor-not-allowed disabled:bg-gray-100
-            ${className}`}
-          {...props}
-        />
-
-        {hint && !error && (
-          <p className="text-sm text-gray-500">{hint}</p>
-        )}
-
-        {error && (
-          <p className="text-sm text-red-500">{error}</p>
-        )}
-      </div>
-    )
-  }
-)
-
-Input.displayName = 'Input'
-```
-
-## Select
-
-```tsx
-// components/ui/Select.tsx
-import { forwardRef } from 'react'
-import { ChevronDown } from 'lucide-react'
-
-interface Option {
-  value: string
-  label: string
-}
-
-interface Props extends React.SelectHTMLAttributes<HTMLSelectElement> {
-  label?: string
-  error?: string
-  options: Option[]
-  placeholder?: string
-}
-
-export const Select = forwardRef<HTMLSelectElement, Props>(
-  ({ label, error, options, placeholder, className = '', ...props }, ref) => {
-    return (
-      <div className="space-y-1">
-        {label && (
-          <label className="block text-sm font-medium text-gray-700">
-            {label}
-          </label>
-        )}
-
-        <div className="relative">
-          <select
-            ref={ref}
-            className={`w-full appearance-none rounded-lg border bg-white px-3 py-2 pr-10 outline-none
-              ${error
-                ? 'border-red-500 focus:border-red-500'
-                : 'border-gray-300 focus:border-blue-500'
-              }
-              disabled:cursor-not-allowed disabled:bg-gray-100
-              ${className}`}
-            {...props}
-          >
-            {placeholder && (
-              <option value="" disabled>
-                {placeholder}
-              </option>
-            )}
-            {options.map(option => (
-              <option key={option.value} value={option.value}>
-                {option.label}
-              </option>
-            ))}
-          </select>
-
-          <ChevronDown className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
-        </div>
-
-        {error && <p className="text-sm text-red-500">{error}</p>}
-      </div>
-    )
-  }
-)
-
-Select.displayName = 'Select'
-```
-
-## Checkbox
-
-```tsx
-// components/ui/Checkbox.tsx
-import { forwardRef } from 'react'
-import { Check } from 'lucide-react'
-
-interface Props extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
-  label: string
-  description?: string
-}
-
-export const Checkbox = forwardRef<HTMLInputElement, Props>(
-  ({ label, description, className = '', ...props }, ref) => {
-    return (
-      <label className="flex cursor-pointer items-start gap-3">
-        <div className="relative mt-0.5">
-          <input
-            ref={ref}
-            type="checkbox"
-            className="peer sr-only"
-            {...props}
-          />
-          <div className="h-5 w-5 rounded border border-gray-300 bg-white transition-colors peer-checked:border-blue-600 peer-checked:bg-blue-600 peer-focus:ring-2 peer-focus:ring-blue-500 peer-focus:ring-offset-2 peer-disabled:cursor-not-allowed peer-disabled:opacity-50">
-            <Check className="h-full w-full p-0.5 text-white opacity-0 peer-checked:opacity-100" />
-          </div>
-        </div>
-
-        <div>
-          <span className="text-sm font-medium text-gray-900">{label}</span>
-          {description && (
-            <p className="text-sm text-gray-500">{description}</p>
-          )}
-        </div>
-      </label>
-    )
-  }
-)
-
-Checkbox.displayName = 'Checkbox'
-```
-
-## Radio Group
-
-```tsx
-// components/ui/RadioGroup.tsx
-interface Option {
-  value: string
-  label: string
-  description?: string
-}
-
-interface Props {
-  name: string
-  options: Option[]
-  value?: string
-  onChange?: (value: string) => void
-  label?: string
-}
-
-export function RadioGroup({ name, options, value, onChange, label }: Props) {
-  return (
-    <fieldset className="space-y-3">
-      {label && (
-        <legend className="text-sm font-medium text-gray-700">{label}</legend>
-      )}
-
-      {options.map(option => (
-        <label key={option.value} className="flex cursor-pointer items-start gap-3">
-          <div className="relative mt-0.5">
-            <input
-              type="radio"
-              name={name}
-              value={option.value}
-              checked={value === option.value}
-              onChange={() => onChange?.(option.value)}
-              className="peer sr-only"
-            />
-            <div className="h-5 w-5 rounded-full border-2 border-gray-300 bg-white transition-colors peer-checked:border-blue-600 peer-focus:ring-2 peer-focus:ring-blue-500 peer-focus:ring-offset-2">
-              <div className="absolute left-1/2 top-1/2 h-2.5 w-2.5 -translate-x-1/2 -translate-y-1/2 rounded-full bg-blue-600 opacity-0 peer-checked:opacity-100" />
-            </div>
-          </div>
-
-          <div>
-            <span className="text-sm font-medium text-gray-900">{option.label}</span>
-            {option.description && (
-              <p className="text-sm text-gray-500">{option.description}</p>
-            )}
-          </div>
-        </label>
-      ))}
-    </fieldset>
-  )
-}
-```
-
-## Switch / Toggle
-
-```tsx
-// components/ui/Switch.tsx
-import * as SwitchPrimitive from '@radix-ui/react-switch'
-
-interface Props {
-  checked?: boolean
-  onCheckedChange?: (checked: boolean) => void
-  label?: string
-  description?: string
-  disabled?: boolean
-}
-
-export function Switch({ checked, onCheckedChange, label, description, disabled }: Props) {
-  return (
-    <div className="flex items-center justify-between">
-      {(label || description) && (
-        <div>
-          {label && <p className="text-sm font-medium">{label}</p>}
-          {description && <p className="text-sm text-gray-500">{description}</p>}
-        </div>
-      )}
-
-      <SwitchPrimitive.Root
-        checked={checked}
-        onCheckedChange={onCheckedChange}
-        disabled={disabled}
-        className="relative h-6 w-11 cursor-pointer rounded-full bg-gray-200 transition-colors data-[state=checked]:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50"
-      >
-        <SwitchPrimitive.Thumb className="block h-5 w-5 translate-x-0.5 rounded-full bg-white shadow-sm transition-transform data-[state=checked]:translate-x-[22px]" />
-      </SwitchPrimitive.Root>
-    </div>
-  )
-}
-```
-
-## Search Input
-
-```tsx
-// components/ui/SearchInput.tsx
-'use client'
-
-import { useState, useCallback } from 'react'
-import { Search, X } from 'lucide-react'
-import { useDebouncedCallback } from 'use-debounce'
-
-interface Props {
-  placeholder?: string
-  onSearch: (query: string) => void
-  debounceMs?: number
-}
-
-export function SearchInput({
-  placeholder = 'Search...',
-  onSearch,
-  debounceMs = 300
-}: Props) {
-  const [value, setValue] = useState('')
-
-  const debouncedSearch = useDebouncedCallback(onSearch, debounceMs)
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value
-    setValue(newValue)
-    debouncedSearch(newValue)
-  }
-
-  const handleClear = () => {
-    setValue('')
-    onSearch('')
-  }
-
-  return (
-    <div className="relative">
-      <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
-
-      <input
-        type="text"
-        value={value}
-        onChange={handleChange}
-        placeholder={placeholder}
-        className="w-full rounded-lg border border-gray-300 py-2 pl-10 pr-10 outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
-      />
-
-      {value && (
-        <button
-          onClick={handleClear}
-          className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
-        >
-          <X className="h-4 w-4" />
-        </button>
-      )}
-    </div>
-  )
-}
-```
-
-## When to Use
-
-- Form data collection
-- User preferences
-- Search interfaces
-- Settings pages

package/skills/patterns/ui/layouts.md

@@ -1,282 +0,0 @@
-# Layout Patterns
-
-Patterns for building responsive layouts.
-
-## App Shell Layout
-
-```tsx
-// components/layout/AppShell.tsx
-import { Header } from './Header'
-import { Sidebar } from './Sidebar'
-
-export function AppShell({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex min-h-screen flex-col">
-      <Header />
-      <div className="flex flex-1">
-        <Sidebar />
-        <main className="flex-1 p-6">{children}</main>
-      </div>
-    </div>
-  )
-}
-
-// app/dashboard/layout.tsx
-export default function DashboardLayout({
-  children
-}: {
-  children: React.ReactNode
-}) {
-  return <AppShell>{children}</AppShell>
-}
-```
-
-## Collapsible Sidebar
-
-```tsx
-// components/layout/CollapsibleSidebar.tsx
-'use client'
-
-import { useState } from 'react'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
-
-export function CollapsibleSidebar({ children }: { children: React.ReactNode }) {
-  const [collapsed, setCollapsed] = useState(false)
-
-  return (
-    <aside
-      className={`relative border-r bg-gray-50 transition-all duration-300 ${
-        collapsed ? 'w-16' : 'w-64'
-      }`}
-    >
-      <button
-        onClick={() => setCollapsed(!collapsed)}
-        className="absolute -right-3 top-6 z-10 rounded-full border bg-white p-1 shadow-sm"
-      >
-        {collapsed ? (
-          <ChevronRight className="h-4 w-4" />
-        ) : (
-          <ChevronLeft className="h-4 w-4" />
-        )}
-      </button>
-
-      <div className={collapsed ? 'overflow-hidden' : ''}>
-        {children}
-      </div>
-    </aside>
-  )
-}
-```
-
-## Split Layout
-
-```tsx
-// components/layout/SplitLayout.tsx
-interface Props {
-  left: React.ReactNode
-  right: React.ReactNode
-  leftWidth?: string
-}
-
-export function SplitLayout({
-  left,
-  right,
-  leftWidth = 'w-1/3'
-}: Props) {
-  return (
-    <div className="flex min-h-screen">
-      <div className={`${leftWidth} border-r bg-gray-50 p-6`}>
-        {left}
-      </div>
-      <div className="flex-1 p-6">{right}</div>
-    </div>
-  )
-}
-
-// Usage - Email app layout
-<SplitLayout
-  left={<EmailList emails={emails} />}
-  right={<EmailDetail email={selectedEmail} />}
-/>
-```
-
-## Container
-
-```tsx
-// components/ui/Container.tsx
-interface Props {
-  children: React.ReactNode
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
-  className?: string
-}
-
-const sizeClasses = {
-  sm: 'max-w-2xl',
-  md: 'max-w-4xl',
-  lg: 'max-w-6xl',
-  xl: 'max-w-7xl',
-  full: 'max-w-full'
-}
-
-export function Container({ children, size = 'xl', className = '' }: Props) {
-  return (
-    <div className={`mx-auto px-4 ${sizeClasses[size]} ${className}`}>
-      {children}
-    </div>
-  )
-}
-```
-
-## Grid Layouts
-
-```tsx
-// components/layout/Grid.tsx
-interface Props {
-  children: React.ReactNode
-  cols?: 1 | 2 | 3 | 4 | 6
-  gap?: 'sm' | 'md' | 'lg'
-  className?: string
-}
-
-export function Grid({ children, cols = 3, gap = 'md', className = '' }: Props) {
-  const colClasses = {
-    1: 'grid-cols-1',
-    2: 'grid-cols-1 md:grid-cols-2',
-    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
-    4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
-    6: 'grid-cols-2 md:grid-cols-3 lg:grid-cols-6'
-  }
-
-  const gapClasses = {
-    sm: 'gap-2',
-    md: 'gap-4',
-    lg: 'gap-6'
-  }
-
-  return (
-    <div className={`grid ${colClasses[cols]} ${gapClasses[gap]} ${className}`}>
-      {children}
-    </div>
-  )
-}
-
-// Usage
-<Grid cols={3} gap="lg">
-  <Card>...</Card>
-  <Card>...</Card>
-  <Card>...</Card>
-</Grid>
-```
-
-## Stack Layout
-
-```tsx
-// components/ui/Stack.tsx
-interface Props {
-  children: React.ReactNode
-  direction?: 'vertical' | 'horizontal'
-  gap?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  align?: 'start' | 'center' | 'end' | 'stretch'
-  justify?: 'start' | 'center' | 'end' | 'between' | 'around'
-  className?: string
-}
-
-export function Stack({
-  children,
-  direction = 'vertical',
-  gap = 'md',
-  align = 'stretch',
-  justify = 'start',
-  className = ''
-}: Props) {
-  const gapClasses = { xs: 'gap-1', sm: 'gap-2', md: 'gap-4', lg: 'gap-6', xl: 'gap-8' }
-  const alignClasses = { start: 'items-start', center: 'items-center', end: 'items-end', stretch: 'items-stretch' }
-  const justifyClasses = { start: 'justify-start', center: 'justify-center', end: 'justify-end', between: 'justify-between', around: 'justify-around' }
-
-  return (
-    <div
-      className={`flex ${
-        direction === 'vertical' ? 'flex-col' : 'flex-row'
-      } ${gapClasses[gap]} ${alignClasses[align]} ${justifyClasses[justify]} ${className}`}
-    >
-      {children}
-    </div>
-  )
-}
-
-// Usage
-<Stack direction="horizontal" gap="lg" align="center" justify="between">
-  <Logo />
-  <Nav />
-  <UserMenu />
-</Stack>
-```
-
-## Responsive Layout
-
-```tsx
-// components/layout/ResponsiveLayout.tsx
-interface Props {
-  sidebar: React.ReactNode
-  main: React.ReactNode
-}
-
-export function ResponsiveLayout({ sidebar, main }: Props) {
-  return (
-    <div className="lg:flex">
-      {/* Mobile: Full width, hidden on desktop */}
-      <div className="lg:hidden">
-        <MobileHeader />
-      </div>
-
-      {/* Desktop: Fixed sidebar */}
-      <aside className="hidden lg:block lg:w-64 lg:shrink-0">
-        <div className="sticky top-0 h-screen overflow-y-auto border-r p-4">
-          {sidebar}
-        </div>
-      </aside>
-
-      {/* Main content */}
-      <main className="flex-1 p-4 lg:p-8">
-        {main}
-      </main>
-    </div>
-  )
-}
-```
-
-## Centered Layout
-
-```tsx
-// components/layout/CenteredLayout.tsx
-export function CenteredLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-50 p-4">
-      <div className="w-full max-w-md">{children}</div>
-    </div>
-  )
-}
-
-// Usage - Login page
-export default function LoginPage() {
-  return (
-    <CenteredLayout>
-      <Card>
-        <CardHeader>
-          <CardTitle>Sign In</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <LoginForm />
-        </CardContent>
-      </Card>
-    </CenteredLayout>
-  )
-}
-```
-
-## When to Use
-
-- App structure
-- Dashboard layouts
-- Responsive design
-- Content organization