{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "technical-specs-sheet",
  "title": "Technical Specs Sheet",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/technical-specs-sheet/TechnicalSpecsSheet.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { FileDown, ShieldCheck, CheckCircle2, Search, Info } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport interface SpecItem {\n  id: string\n  category: 'acoustic' | 'electrical' | 'physical' | 'connectivity' | 'compliance'\n  parameter: string\n  metricValue: string\n  imperialValue: string\n  tolerance?: string\n  testCondition?: string\n  highlight?: boolean\n}\n\nexport interface TechnicalSpecsProps {\n  productTitle?: string\n  modelNumber?: string\n  revision?: string\n  specs?: SpecItem[]\n  className?: string\n}\n\nconst defaultSpecs: SpecItem[] = [\n  // Acoustic\n  {\n    id: 's1',\n    category: 'acoustic',\n    parameter: 'Transducer Type',\n    metricValue: '50mm Planar-Magnetic with Neodymium N52 Array',\n    imperialValue: '1.97 in Planar-Magnetic with Neodymium N52 Array',\n    highlight: true,\n  },\n  {\n    id: 's2',\n    category: 'acoustic',\n    parameter: 'Frequency Response',\n    metricValue: '5 Hz – 52,000 Hz',\n    imperialValue: '5 Hz – 52,000 Hz',\n    tolerance: '± 0.5 dB (20 Hz - 20 kHz)',\n    highlight: true,\n  },\n  {\n    id: 's3',\n    category: 'acoustic',\n    parameter: 'Total Harmonic Distortion (THD)',\n    metricValue: '< 0.04% @ 1 kHz, 100 dB SPL',\n    imperialValue: '< 0.04% @ 1 kHz, 100 dB SPL',\n    testCondition: 'IEC 60268-7 Standard',\n  },\n  {\n    id: 's4',\n    category: 'acoustic',\n    parameter: 'Sound Pressure Level (SPL)',\n    metricValue: '106 dB / 1 mW @ 1 kHz',\n    imperialValue: '106 dB / 1 mW @ 1 kHz',\n    testCondition: 'Free-field calibrated',\n  },\n  {\n    id: 's5',\n    category: 'acoustic',\n    parameter: 'Acoustic Enclosure',\n    metricValue: 'Open-Back CNC Milled Aircraft-Grade Aluminum Grille',\n    imperialValue: 'Open-Back CNC Milled Aircraft-Grade Aluminum Grille',\n  },\n\n  // Electrical\n  {\n    id: 's6',\n    category: 'electrical',\n    parameter: 'Nominal Impedance',\n    metricValue: '32 Ω pure resistive load',\n    imperialValue: '32 Ω pure resistive load',\n    tolerance: '± 5% @ 1 kHz',\n    highlight: true,\n  },\n  {\n    id: 's7',\n    category: 'electrical',\n    parameter: 'Maximum Input Power Handling',\n    metricValue: '3,000 mW (3.0 W Continuous)',\n    imperialValue: '3,000 mW (3.0 W Continuous)',\n    testCondition: 'Thermal peak 5,000 mW (100ms)',\n  },\n  {\n    id: 's8',\n    category: 'electrical',\n    parameter: 'Recommended Amplifier Output',\n    metricValue: '250 mW – 2,000 mW @ 32 Ω',\n    imperialValue: '250 mW – 2,000 mW @ 32 Ω',\n  },\n\n  // Physical\n  {\n    id: 's9',\n    category: 'physical',\n    parameter: 'Weight (excluding cable)',\n    metricValue: '385 grams',\n    imperialValue: '13.58 oz (0.85 lbs)',\n    tolerance: '± 5g',\n    highlight: true,\n  },\n  {\n    id: 's10',\n    category: 'physical',\n    parameter: 'Ear Cushion Dimensions (Inner ID)',\n    metricValue: '68 mm (H) × 52 mm (W) × 26 mm (D)',\n    imperialValue: '2.68 in (H) × 2.05 in (W) × 1.02 in (D)',\n  },\n  {\n    id: 's11',\n    category: 'physical',\n    parameter: 'Headband Clamping Force',\n    metricValue: '4.2 Newtons',\n    imperialValue: '0.94 lbf (Pound-force)',\n    tolerance: '± 0.3 N',\n  },\n  {\n    id: 's12',\n    category: 'physical',\n    parameter: 'Earpad Material Composition',\n    metricValue: 'Perforated Lambskin + Cooling Gel Memory Foam Core',\n    imperialValue: 'Perforated Lambskin + Cooling Gel Memory Foam Core',\n  },\n\n  // Connectivity\n  {\n    id: 's13',\n    category: 'connectivity',\n    parameter: 'Headphone Terminals',\n    metricValue: 'Dual 3.5mm Gold-Plated TRRS Balanced Sockets',\n    imperialValue: 'Dual 1/8 in Gold-Plated TRRS Balanced Sockets',\n  },\n  {\n    id: 's14',\n    category: 'connectivity',\n    parameter: 'Included Studio Cable',\n    metricValue: '2.5 meter 8-Core Monocrystalline Silver-Plated Copper (OCC)',\n    imperialValue: '8.20 feet 8-Core Monocrystalline Silver-Plated Copper (OCC)',\n    highlight: true,\n  },\n  {\n    id: 's15',\n    category: 'connectivity',\n    parameter: 'Source Termination',\n    metricValue: '4.4mm Pentaconn Balanced + 6.35mm Gold-Plated Adapter',\n    imperialValue: '4.4mm Pentaconn Balanced + 1/4 in Gold-Plated Adapter',\n  },\n\n  // Compliance\n  {\n    id: 's16',\n    category: 'compliance',\n    parameter: 'Certifications & Directives',\n    metricValue: 'Hi-Res Audio Certified, CE Mark, FCC Class B, RoHS 3, WEEE',\n    imperialValue: 'Hi-Res Audio Certified, CE Mark, FCC Class B, RoHS 3, WEEE',\n    highlight: true,\n  },\n  {\n    id: 's17',\n    category: 'compliance',\n    parameter: 'Operating Temperature & Humidity',\n    metricValue: '-10°C to +45°C (10% to 90% RH non-condensing)',\n    imperialValue: '14°F to 113°F (10% to 90% RH non-condensing)',\n  },\n]\n\nconst categories = [\n  { id: 'all', label: 'All Specifications' },\n  { id: 'acoustic', label: 'Acoustic Architecture' },\n  { id: 'electrical', label: 'Electrical & Power' },\n  { id: 'physical', label: 'Dimensions & Weight' },\n  { id: 'connectivity', label: 'Cables & Interconnects' },\n  { id: 'compliance', label: 'Standards & Compliance' },\n]\n\nexport function TechnicalSpecsSheet({\n  productTitle = 'Apex Pro Reference Planar-Magnetic Studio Monitor Headphones',\n  modelNumber = 'APX-950-PRO',\n  revision = 'Rev 2.4 (2026)',\n  specs = defaultSpecs,\n  className,\n}: TechnicalSpecsProps) {\n  const [isMetric, setIsMetric] = React.useState(true)\n  const [activeCategory, setActiveCategory] = React.useState<string>('all')\n  const [searchQuery, setSearchQuery] = React.useState('')\n\n  const filteredSpecs = React.useMemo(() => {\n    return specs.filter((item) => {\n      const matchesCat = activeCategory === 'all' || item.category === activeCategory\n      const matchesSearch =\n        searchQuery.trim() === '' ||\n        item.parameter.toLowerCase().includes(searchQuery.toLowerCase()) ||\n        item.metricValue.toLowerCase().includes(searchQuery.toLowerCase()) ||\n        item.imperialValue.toLowerCase().includes(searchQuery.toLowerCase())\n      return matchesCat && matchesSearch\n    })\n  }, [specs, activeCategory, searchQuery])\n\n  function downloadPdf() {\n    alert(`Downloading official engineering data sheet for ${modelNumber} (${revision})...`)\n  }\n\n  return (\n    <Card data-slot=\"technical-specs-sheet\" className={`border-border w-full shadow-xs ${className ?? ''}`}>\n      <CardHeader className=\"border-border bg-muted/20 border-b pb-4\">\n        <div className=\"flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between\">\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <span className=\"text-muted-foreground font-mono text-xs font-semibold tracking-wider uppercase\">\n                {modelNumber} · {revision}\n              </span>\n              <Badge variant=\"outline\" className=\"text-success font-mono text-xs\">\n                Laboratory Certified\n              </Badge>\n            </div>\n            <CardTitle className=\"text-foreground text-lg font-semibold tracking-tight sm:text-xl\">\n              Engineering & Technical Specifications Sheet\n            </CardTitle>\n            <CardDescription className=\"text-xs\">\n              Comprehensive acoustic measurements, electrical parameters, material tolerances, and compliance standards.\n            </CardDescription>\n          </div>\n\n          <div className=\"flex flex-wrap items-center gap-2.5\">\n            {/* Metric / Imperial Toggle */}\n            <div className=\"border-border bg-background flex items-center rounded-lg border p-0.5 text-xs shadow-2xs\">\n              <button\n                type=\"button\"\n                className={`rounded-md px-2.5 py-1 font-medium transition-colors ${\n                  isMetric\n                    ? 'bg-primary text-primary-foreground font-semibold shadow-2xs'\n                    : 'text-muted-foreground hover:text-foreground'\n                }`}\n                onClick={() => setIsMetric(true)}\n              >\n                Metric (SI)\n              </button>\n              <button\n                type=\"button\"\n                className={`rounded-md px-2.5 py-1 font-medium transition-colors ${\n                  !isMetric\n                    ? 'bg-primary text-primary-foreground font-semibold shadow-2xs'\n                    : 'text-muted-foreground hover:text-foreground'\n                }`}\n                onClick={() => setIsMetric(false)}\n              >\n                Imperial (US)\n              </button>\n            </div>\n\n            <Button variant=\"outline\" size=\"sm\" className=\"gap-1.5 text-xs shadow-2xs\" onClick={downloadPdf}>\n              <FileDown className=\"size-3.5\" />\n              <span>Download Spec PDF</span>\n            </Button>\n          </div>\n        </div>\n\n        {/* Controls: Category Filter Tabs & Search Bar */}\n        <div className=\"mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"flex flex-wrap items-center gap-1.5\">\n            {categories.map((cat) => (\n              <button\n                key={cat.id}\n                type=\"button\"\n                className={`rounded-md px-2.5 py-1 text-xs font-medium transition-colors ${\n                  activeCategory === cat.id\n                    ? 'bg-foreground text-background shadow-2xs'\n                    : 'bg-muted/60 text-muted-foreground hover:bg-muted hover:text-foreground border border-transparent'\n                }`}\n                onClick={() => setActiveCategory(cat.id)}\n              >\n                {cat.label}\n              </button>\n            ))}\n          </div>\n\n          <div className=\"relative w-full sm:w-64\">\n            <Search className=\"text-muted-foreground absolute top-1/2 left-2.5 size-3.5 -translate-y-1/2\" />\n            <Input\n              value={searchQuery}\n              onChange={(e) => setSearchQuery(e.target.value)}\n              placeholder=\"Search parameters...\"\n              className=\"h-8 pl-8 text-xs\"\n            />\n          </div>\n        </div>\n      </CardHeader>\n\n      <CardContent className=\"p-0\">\n        <Table>\n          <TableHeader>\n            <TableRow className=\"bg-muted/40\">\n              <TableHead className=\"w-[280px]\">Parameter / Measurement</TableHead>\n              <TableHead>Specification ({isMetric ? 'Metric' : 'Imperial'})</TableHead>\n              <TableHead className=\"w-[180px]\">Tolerance / Range</TableHead>\n              <TableHead className=\"w-[220px]\">Test Standard / Method</TableHead>\n            </TableRow>\n          </TableHeader>\n          <TableBody>\n            {filteredSpecs.map((spec) => (\n              <TableRow key={spec.id} className={spec.highlight ? 'bg-primary/5' : ''}>\n                <TableCell>\n                  <div className=\"flex items-center gap-2\">\n                    <span className=\"text-foreground text-xs font-medium\">{spec.parameter}</span>\n                    {spec.highlight && (\n                      <Badge variant=\"secondary\" className=\"h-4.5 px-1.5 font-mono text-xs font-semibold uppercase\">\n                        Key Spec\n                      </Badge>\n                    )}\n                  </div>\n                </TableCell>\n\n                <TableCell>\n                  <span className=\"text-foreground font-mono text-xs font-semibold\">\n                    {isMetric ? spec.metricValue : spec.imperialValue}\n                  </span>\n                </TableCell>\n\n                <TableCell>\n                  <span className=\"text-muted-foreground font-mono text-xs\">{spec.tolerance || '—'}</span>\n                </TableCell>\n\n                <TableCell>\n                  <span className=\"text-muted-foreground text-xs\">{spec.testCondition || 'Factory Standard Q/C'}</span>\n                </TableCell>\n              </TableRow>\n            ))}\n\n            {filteredSpecs.length === 0 && (\n              <TableRow>\n                <TableCell colSpan={4} className=\"text-muted-foreground h-28 text-center text-xs\">\n                  No matching specifications found for &quot;{searchQuery}&quot;.\n                </TableCell>\n              </TableRow>\n            )}\n          </TableBody>\n        </Table>\n\n        {/* Bottom Compliance Certification Footer Badges */}\n        <div className=\"border-border bg-muted/20 flex flex-wrap items-center justify-between gap-3 border-t p-4 text-xs\">\n          <div className=\"text-muted-foreground flex flex-wrap items-center gap-4\">\n            <div className=\"flex items-center gap-1.5\">\n              <ShieldCheck className=\"text-primary size-4\" />\n              <span className=\"text-foreground font-medium\">Calibrated Precision</span>\n            </div>\n            <div className=\"flex items-center gap-1.5\">\n              <CheckCircle2 className=\"text-success size-4\" />\n              <span>3-Year Studio Warranty Included</span>\n            </div>\n            <div className=\"flex items-center gap-1.5\">\n              <Info className=\"text-info size-4\" />\n              <span>Serial matched drivers (± 0.3 dB stereo tracking)</span>\n            </div>\n          </div>\n\n          <span className=\"text-muted-foreground font-mono text-xs\">Document ID: SPEC-APX-{modelNumber}-2026</span>\n        </div>\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/technical-specs-sheet/TechnicalSpecsSheet.tsx"
    },
    {
      "path": "packages/registry-react/blocks/technical-specs-sheet/index.ts",
      "content": "export { TechnicalSpecsSheet } from './TechnicalSpecsSheet'\nexport type { SpecItem, TechnicalSpecsProps } from './TechnicalSpecsSheet'\n",
      "type": "registry:block",
      "target": "~/components/blocks/technical-specs-sheet/index.ts"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/input.json",
    "https://uipkge.dev/r/react/table.json"
  ],
  "description": "Comprehensive engineering technical specifications sheet with Metric/Imperial SI toggles, parameter category filters, search, and downloadable PDF trigger.",
  "categories": [
    "ecommerce",
    "data-display"
  ]
}