{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "separator",
  "title": "Separator",
  "description": "A hairline that divides content, across or down.",
  "dependencies": [
    "@base-ui/react",
    "@stylexjs/stylex"
  ],
  "registryDependencies": [
    "https://constella.aayush.cv/r/base.json"
  ],
  "files": [
    {
      "path": "src/components/primitives/separator.tsx",
      "content": "\"use client\";\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\";\nimport * as stylex from \"@stylexjs/stylex\";\n\nimport type { Sx } from \"@/lib/constella/styles\";\nimport { colors, strokes } from \"@/lib/constella/tokens.stylex\";\n\ntype SeparatorProps = Omit<SeparatorPrimitive.Props, \"className\" | \"style\"> & {\n  sx?: Sx;\n};\n\nconst styles = stylex.create({\n  separator: {\n    backgroundColor: colors.borderSubtle,\n    flexShrink: 0,\n  },\n  horizontal: {\n    height: strokes.border,\n    width: \"100%\",\n  },\n  vertical: {\n    alignSelf: \"stretch\",\n    width: strokes.border,\n  },\n});\n\nfunction Separator({\n  orientation = \"horizontal\",\n  sx,\n  ...props\n}: SeparatorProps) {\n  return (\n    <SeparatorPrimitive\n      data-slot=\"separator\"\n      orientation={orientation}\n      {...props}\n      {...stylex.props(styles.separator, styles[orientation], sx)}\n    />\n  );\n}\n\nexport { Separator };\nexport type { SeparatorProps };\n",
      "type": "registry:component"
    }
  ],
  "docs": "Usage: https://constella.aayush.cv/docs/components/separator/index.md",
  "type": "registry:ui"
}