{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "monospace-bar-chart",
  "description": "Monospace bar chart component",
  "dependencies": [
    "recharts",
    "motion"
  ],
  "registryDependencies": [
    "@evilcharts/recharts-chart"
  ],
  "files": [
    {
      "path": "src/registry/blocks/recharts/b-monospace-bar-chart.tsx",
      "content": "\"use client\";\n\nimport { type ChartConfig, ChartContainer } from \"@/registry/ui/recharts-chart\";\nimport { Bar, BarChart, Rectangle, XAxis } from \"recharts\";\nimport { motion, AnimatePresence } from \"motion/react\";\n\nconst chartData = [\n  { month: \"January\", desktop: 342 },\n  { month: \"February\", desktop: 876 },\n  { month: \"March\", desktop: 512 },\n  { month: \"April\", desktop: 629 },\n  { month: \"May\", desktop: 458 },\n  { month: \"June\", desktop: 781 },\n  { month: \"July\", desktop: 394 },\n  { month: \"August\", desktop: 925 },\n  { month: \"September\", desktop: 647 },\n  { month: \"October\", desktop: 532 },\n  { month: \"November\", desktop: 803 },\n  { month: \"December\", desktop: 271 },\n  { month: \"January\", desktop: 342 },\n  { month: \"February\", desktop: 876 },\n  { month: \"March\", desktop: 512 },\n  { month: \"April\", desktop: 629 },\n  { month: \"May\", desktop: 458 },\n  { month: \"June\", desktop: 781 },\n  { month: \"July\", desktop: 394 },\n  { month: \"August\", desktop: 925 },\n  { month: \"September\", desktop: 647 },\n  { month: \"October\", desktop: 532 },\n  { month: \"November\", desktop: 803 },\n  { month: \"December\", desktop: 271 },\n];\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    colors: {\n      light: [\"#18181b\"],\n      dark: [\"#fafafa\"],\n    },\n  },\n} satisfies ChartConfig;\n\nexport function EvilMonospaceBarChart() {\n  return (\n    <div className=\"flex h-full flex-col p-4\">\n      <div className=\"flex flex-row justify-between\">\n        <div className=\"flex flex-row\">\n          <div className=\"flex flex-col gap-2\">\n            <span className=\"text-muted-foreground font-mono text-xs\">{\"[$] Total Sales\"}</span>\n            <span className=\"text-primary font-mono text-3xl\">\n              <span className=\"text-muted-foreground text-xl font-normal\">$</span>\n              <span className=\"tracking-tighter\">14,340</span>\n            </span>\n          </div>\n          <hr className=\"mx-4 h-full border-l border-dashed\" />\n          <div className=\"flex flex-col gap-2\">\n            <span className=\"text-muted-foreground font-mono text-xs\">{\"[⬆] Top Month\"}</span>\n            <span className=\"text-primary font-mono text-3xl\">\n              <span className=\"tracking-tighter\">June</span>\n            </span>\n          </div>\n        </div>\n        <div className=\"flex flex-col justify-end gap-1\">\n          <span className=\"text-muted-foreground font-mono text-[10px]\">\n            {\"// X-AXIS: \"}\n            <span className=\"text-primary\">MONTHS</span>\n          </span>\n          <span className=\"text-muted-foreground font-mono text-[10px]\">\n            {\"// Y-AXIS: \"}\n            <span className=\"text-primary\">SALES</span>\n          </span>\n        </div>\n      </div>\n      <hr className=\"my-4 border-t border-dashed\" />\n      <ChartContainer config={chartConfig}>\n        <BarChart accessibilityLayer data={chartData}>\n          <XAxis\n            dataKey=\"month\"\n            tickLine={false}\n            tickMargin={10}\n            axisLine={false}\n            tickFormatter={(value) => value.slice(0, 3)}\n          />\n          {Object.keys(chartConfig).map((key) => (\n            <Bar\n              key={key}\n              dataKey={key}\n              fill={`var(--color-${key}-0)`}\n              shape={BarShape}\n              activeBar={BarShape}\n            />\n          ))}\n        </BarChart>\n      </ChartContainer>\n    </div>\n  );\n}\n\ninterface BarProps {\n  index?: number;\n  value?: number | [number, number];\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  fill?: string;\n  isActive?: boolean;\n}\n\n// Scale factor: collapsed = thin line, expanded = full width\nconst COLLAPSED_SCALE = 0.1; // [!code highlight]\n\nconst BarShape = (props: BarProps) => {\n  const { fill, x, y, width, height, index, value, isActive } = props;\n\n  const xPos = Number(x || 0);\n  const yPos = Number(y || 0);\n  const realWidth = Number(width || 0);\n  const realHeight = Number(height || 0);\n\n  // Center position for the bar\n  const centerX = xPos + realWidth / 2;\n  const centerY = yPos + realHeight / 2;\n\n  return (\n    <>\n      <Rectangle {...props} fill=\"transparent\" />\n\n      <AnimatePresence>\n        <motion.rect\n          key={`bar-${index}`}\n          x={xPos}\n          y={yPos}\n          width={realWidth}\n          height={realHeight}\n          fill={fill}\n          initial={{ scaleX: isActive ? COLLAPSED_SCALE : 1 }}\n          animate={{ scaleX: isActive ? 1 : COLLAPSED_SCALE }}\n          exit={{ scaleX: COLLAPSED_SCALE }}\n          transition={{ type: \"spring\", stiffness: 200, damping: 25 }}\n          style={{\n            transformOrigin: `${centerX}px ${centerY}px`,\n            transformBox: \"fill-box\",\n          }}\n        />\n      </AnimatePresence>\n      {isActive && (\n        <AnimatePresence>\n          <motion.text\n            className=\"font-mono\"\n            key={`text-${index}`}\n            initial={{ opacity: 0, y: -10, filter: \"blur(3px)\" }}\n            animate={{ opacity: 1, y: 0, filter: \"blur(0px)\" }}\n            exit={{ opacity: 0, y: -10, filter: \"blur(3px)\" }}\n            transition={{ duration: 0.2 }}\n            x={centerX}\n            y={yPos - 5}\n            textAnchor=\"middle\"\n            fill={fill}\n            style={{ pointerEvents: \"none\" }}\n          >\n            {value}\n          </motion.text>\n        </AnimatePresence>\n      )}\n    </>\n  );\n};\n",
      "type": "registry:block",
      "target": "components/evilcharts/blocks/monospace-bar-chart.tsx"
    }
  ],
  "type": "registry:block"
}