{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "separator",
    "type": "registry:component",
    "title": "Separator",
    "description": "Divider between content. Horizontal by default, vertical inside a flex row, or labelled with centred text.",
    "registryDependencies": [
        "tokens"
    ],
    "meta": {
        "category": "Layout & overlay",
        "layout": "block"
    },
    "files": [
        {
            "path": "components/separator.html",
            "type": "registry:file",
            "target": "components/separator.html",
            "content": "<!-- Separator\n     Horizontal by default. Use data-orientation=\"vertical\" inside a flex row.\n     Use .dp-separator-labelled for a divider with centred text. -->\n\n<!-- Horizontal -->\n<p style=\"margin: 0; color: var(--dp-text-muted);\">Above the line</p>\n<hr class=\"dp-separator\" />\n<p style=\"margin: 0; color: var(--dp-text-muted);\">Below the line</p>\n\n<!-- Labelled -->\n<div class=\"dp-separator-labelled\">OR</div>\n\n<!-- Vertical, inside a row -->\n<div style=\"display: flex; align-items: center; height: 2rem; color: var(--dp-text-muted);\">\n  <span>Pages</span>\n  <span class=\"dp-separator\" data-orientation=\"vertical\" role=\"separator\"></span>\n  <span>Visits</span>\n  <span class=\"dp-separator\" data-orientation=\"vertical\" role=\"separator\"></span>\n  <span>Owner</span>\n</div>\n"
        },
        {
            "path": "components/separator.css",
            "type": "registry:file",
            "target": "components/separator.css",
            "content": "/* Separator\n   A divider between content. Horizontal by default; set\n   data-orientation=\"vertical\" for a vertical rule inside a flex row. Use\n   .dp-separator-labelled for a divider with centred text. Colour from\n   tokens.css. */\n\n.dp-separator {\n  border: 0;\n  height: 1px;\n  background: var(--dp-border);\n  margin: var(--dp-space-4) 0;\n}\n\n.dp-separator[data-orientation=\"vertical\"] {\n  width: 1px;\n  height: auto;\n  align-self: stretch;\n  margin: 0 var(--dp-space-4);\n}\n\n.dp-separator-labelled {\n  display: flex;\n  align-items: center;\n  gap: var(--dp-space-3);\n  color: var(--dp-text-subtle);\n  font-size: var(--dp-text-sm);\n  font-weight: var(--dp-weight-semibold);\n}\n\n.dp-separator-labelled::before,\n.dp-separator-labelled::after {\n  content: \"\";\n  flex: 1;\n  height: 1px;\n  background: var(--dp-border);\n}\n"
        }
    ]
}