{
"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"
]
}