Skip to main content

priv/registry/badge.json

{
  "files": [
    {
      "content": "defmodule Shadix.Components.Badge do\n  @moduledoc \"\"\"\n  A badge styled with the shadcn variant system.\n\n  Renders a `<span>` carrying `data-slot=\"badge\"` plus `data-variant` for stable\n  styling/targeting. Caller-supplied `class` is appended last; Tailwind cascade\n  layers ensure it wins over the defaults.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n\n  @base \"inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3\"\n\n  @variants %{\n    \"default\" => \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n    \"secondary\" =>\n      \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n    \"destructive\" =>\n      \"border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90\",\n    \"outline\" =>\n      \"border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\"\n  }\n\n  attr(:variant, :string,\n    default: \"default\",\n    values: ~w(default secondary destructive outline)\n  )\n\n  attr(:class, :string, default: nil)\n  attr(:rest, :global, include: ~w(title role))\n  slot(:inner_block, required: true)\n\n  def badge(assigns) do\n    class =\n      cn([\n        @base,\n        Map.fetch!(@variants, assigns.variant),\n        assigns.class\n      ])\n\n    assigns = assign(assigns, :computed_class, class)\n\n    ~H\"\"\"\n    <span data-slot=\"badge\" data-variant={@variant} class={@computed_class} {@rest}>\n      {render_slot(@inner_block)}\n    </span>\n    \"\"\"\n  end\nend\n",
      "path": "badge.ex"
    }
  ],
  "hooks": [],
  "name": "badge",
  "npm_deps": [],
  "registry_deps": [
    "cn"
  ]
}