{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "delta-bar",
  "type": "registry:ui",
  "title": "Delta Bar",
  "description": "A delta bar component",
  "dependencies": [
    "solid-js"
  ],
  "files": [
    {
      "path": "src/registry/ui/delta-bar.tsx",
      "content": "import { mergeProps, Show, splitProps, type Component, type ComponentProps } from \"solid-js\"\n\nimport { cn } from \"~/lib/utils\"\n\ntype DeltaBarProps = ComponentProps<\"div\"> & {\n  value: number\n  isIncreasePositive?: boolean\n}\n\nconst DeltaBar: Component<DeltaBarProps> = (rawProps) => {\n  const props = mergeProps(\n    {\n      isIncreasePositive: true\n    },\n    rawProps\n  )\n  const [local, others] = splitProps(props, [\"value\", \"isIncreasePositive\", \"class\"])\n\n  const barColor = () => \n    (local.value > 0 && local.isIncreasePositive) || (local.value < 0 && !local.isIncreasePositive)\n      ? \"bg-success-foreground\"\n      : \"bg-error-foreground\"\n\n  return (\n    <div\n      class={cn(\"relative flex h-2 w-full items-center rounded-full bg-secondary\", local.class)}\n      {...others}\n    >\n      <div class=\"flex h-full w-1/2 justify-end\">\n        <Show when={local.value < 0}>\n          <div\n            class={cn(\"rounded-l-full\", barColor())}\n            style={{ width: `${Math.abs(local.value)}%` }}\n          />\n        </Show>\n      </div>\n      <div class={cn(\"z-10 h-4 w-1 rounded-full ring-2 ring-background\", barColor())} />\n      <div class=\"flex h-full w-1/2 justify-start\">\n        <Show when={local.value > 0}>\n          <div\n            class={cn(\"rounded-r-full\", barColor())}\n            style={{ width: `${Math.abs(local.value)}%` }}\n          />\n        </Show>\n      </div>\n    </div>\n  )\n}\n\nexport { DeltaBar }\nexport type { DeltaBarProps }\n\n",
      "type": "registry:ui"
    }
  ]
}