Skip to main content

priv/registry/separator.json

{
  "files": [
    {
      "content": "defmodule Shadix.Components.Separator do\n  @moduledoc \"\"\"\n  A visual separator (divider) between content.\n\n  Translated from the shadcn/ui `separator` component. By default it is\n  decorative — it renders a `<div>` with `role=\"none\"` and is hidden from the\n  accessibility tree. Pass `decorative={false}` to expose it to screen readers\n  as a semantic separator (`role=\"separator\"` with `aria-orientation`), matching\n  shadcn/Radix's `decorative` prop and base-ui's separator.\n\n  The `orientation` is reflected as `data-orientation` to drive the\n  `data-[orientation=...]` Tailwind selectors.\n  \"\"\"\n  use Phoenix.Component\n\n  import Shadix.Cn\n\n  @base \"shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px\"\n\n  attr(:orientation, :string, default: \"horizontal\", values: ~w(horizontal vertical))\n  attr(:decorative, :boolean, default: true)\n  attr(:class, :string, default: nil)\n  attr(:rest, :global)\n\n  def separator(assigns) do\n    class = cn([@base, assigns.class])\n\n    assigns =\n      assigns\n      |> assign(:computed_class, class)\n      |> assign(:role, if(assigns.decorative, do: \"none\", else: \"separator\"))\n      |> assign(:aria_orientation, if(assigns.decorative, do: nil, else: assigns.orientation))\n\n    ~H\"\"\"\n    <div\n      data-slot=\"separator\"\n      role={@role}\n      aria-orientation={@aria_orientation}\n      data-orientation={@orientation}\n      class={@computed_class}\n      {@rest}\n    >\n    </div>\n    \"\"\"\n  end\nend\n",
      "path": "separator.ex"
    }
  ],
  "hooks": [],
  "name": "separator",
  "npm_deps": [],
  "registry_deps": [
    "cn"
  ]
}