{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "bar-chart",
  "title": "bar-chart",
  "description": "bar-chart",
  "dependencies": [
    "recharts"
  ],
  "registryDependencies": [
    "https://intentui.com/r/chart"
  ],
  "files": [
    {
      "path": "src/components/ui/bar-chart.tsx",
      "content": "'use client'\n\nimport { type ComponentProps, startTransition, useMemo } from 'react'\nimport { Bar, BarChart as BarChartPrimitive } from 'recharts'\nimport {\n  type BaseChartProps,\n  CartesianGrid,\n  Chart,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  constructCategoryColors,\n  DEFAULT_COLORS,\n  getColorValue,\n  valueToPercent,\n  XAxis,\n  YAxis,\n} from './chart'\n\nexport interface BarChartProps extends BaseChartProps {\n  barCategoryGap?: number\n  barRadius?: number\n  barGap?: number\n  barSize?: number\n  barProps?: Partial<React.ComponentProps<typeof Bar>>\n\n  chartProps?: Omit<ComponentProps<typeof BarChartPrimitive>, 'data' | 'stackOffset'>\n}\n\nexport function BarChart({\n  data = [],\n  dataKey,\n  colors = DEFAULT_COLORS,\n  type = 'default',\n  config,\n  children,\n  layout = 'horizontal',\n\n  // Components\n  tooltip = true,\n  tooltipProps,\n\n  legend = true,\n  legendProps,\n\n  intervalType = 'equidistantPreserveStart',\n\n  barCategoryGap = 5,\n  barGap,\n  barSize,\n  barRadius,\n  barProps,\n\n  valueFormatter = (value: number) => value.toString(),\n\n  // XAxis\n  displayEdgeLabelsOnly = false,\n  xAxisProps,\n  hideXAxis = false,\n\n  // YAxis\n  yAxisProps,\n  hideYAxis = false,\n\n  hideGridLines = false,\n  chartProps,\n\n  ...props\n}: BarChartProps) {\n  const configKeys = useMemo(() => Object.keys(config), [config])\n  const categoryColors = useMemo(\n    () => constructCategoryColors(configKeys, colors),\n    [configKeys, colors]\n  )\n\n  const configEntries = useMemo(() => Object.entries(config), [config])\n\n  const stacked = type === 'stacked' || type === 'percent'\n  const defaultBarRadius = stacked ? undefined : 4\n\n  return (\n    <Chart config={config} data={data} dataKey={dataKey} layout={layout} {...props}>\n      {({ onLegendSelect, selectedLegend }) => (\n        <BarChartPrimitive\n          onClick={() => {\n            onLegendSelect(null)\n          }}\n          data={data}\n          margin={{\n            bottom: 0,\n            left: 5,\n            right: 0,\n            top: 5,\n          }}\n          layout={layout === 'radial' ? 'horizontal' : layout}\n          barGap={barGap}\n          barSize={barSize}\n          barCategoryGap={barCategoryGap}\n          stackOffset={type === 'percent' ? 'expand' : stacked ? 'sign' : undefined}\n          {...chartProps}\n        >\n          {!hideGridLines && <CartesianGrid strokeDasharray=\"4 4\" />}\n          <XAxis\n            hide={hideXAxis}\n            className=\"**:[text]:fill-muted-fg\"\n            displayEdgeLabelsOnly={displayEdgeLabelsOnly}\n            intervalType={intervalType}\n            {...xAxisProps}\n          />\n          <YAxis\n            hide={hideYAxis}\n            className=\"**:[text]:fill-muted-fg\"\n            tickFormatter={type === 'percent' ? valueToPercent : valueFormatter}\n            {...yAxisProps}\n          />\n\n          {legend && (\n            <ChartLegend\n              content={typeof legend === 'boolean' ? <ChartLegendContent /> : legend}\n              {...legendProps}\n            />\n          )}\n\n          {tooltip && (\n            <ChartTooltip\n              content={\n                typeof tooltip === 'boolean' ? <ChartTooltipContent accessibilityLayer /> : tooltip\n              }\n              {...tooltipProps}\n            />\n          )}\n\n          {!children\n            ? configEntries.map(([category, values]) => {\n                const color = getColorValue(values.color || categoryColors.get(category))\n                const strokeOpacity = selectedLegend && selectedLegend !== category ? 0.2 : 0\n                const fillOpacity = selectedLegend && selectedLegend !== category ? 0.1 : 1\n\n                return (\n                  <Bar\n                    key={category}\n                    name={category}\n                    dataKey={category}\n                    stroke={color}\n                    strokeWidth={1}\n                    stackId={stacked ? 'stack' : undefined}\n                    onClick={(_item, _number, event) => {\n                      event.stopPropagation()\n\n                      startTransition(() => {\n                        onLegendSelect(category)\n                      })\n                    }}\n                    radius={barRadius ?? defaultBarRadius}\n                    strokeOpacity={strokeOpacity}\n                    fillOpacity={fillOpacity}\n                    fill={color}\n                    {...barProps}\n                  />\n                )\n              })\n            : children}\n        </BarChartPrimitive>\n      )}\n    </Chart>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}