{
  "name": "separator",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "separator.tsx",
      "content": "\"use client\";\r\n\r\nimport { css, themeVars as theme } from \"@yugnex/core\";\r\nimport type { HTMLAttributes, ReactNode } from \"react\";\r\n\r\nconst horizontalClass = css({\r\n  border: \"none\",\r\n  height: \"1px\",\r\n  width: \"100%\",\r\n  margin: 0,\r\n  backgroundColor: theme.color.border,\r\n  flexShrink: 0,\r\n});\r\n\r\nconst verticalClass = css({\r\n  border: \"none\",\r\n  width: \"1px\",\r\n  alignSelf: \"stretch\",\r\n  minHeight: \"1em\",\r\n  margin: 0,\r\n  backgroundColor: theme.color.border,\r\n  flexShrink: 0,\r\n});\r\n\r\nconst labelledClass = css({\r\n  display: \"flex\",\r\n  alignItems: \"center\",\r\n  gap: theme.space[3],\r\n  width: \"100%\",\r\n  color: theme.color.mutedForeground,\r\n  fontFamily: theme.fontFamily.sans,\r\n  fontSize: theme.fontSize.xs,\r\n  \"&::before, &::after\": {\r\n    content: '\"\"',\r\n    flex: 1,\r\n    height: \"1px\",\r\n    backgroundColor: theme.color.border,\r\n  },\r\n});\r\n\r\nexport interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {\r\n  orientation?: \"horizontal\" | \"vertical\";\r\n  /** Optional centered label; renders rules on both sides of it. */\r\n  children?: ReactNode;\r\n  /** Purely visual separators are hidden from assistive tech (the default). */\r\n  decorative?: boolean;\r\n}\r\n\r\n/** A dividing rule. Pass children to render a centered label between two rules. */\r\nexport function Separator({\r\n  orientation = \"horizontal\",\r\n  decorative = true,\r\n  children,\r\n  className,\r\n  ...props\r\n}: SeparatorProps) {\r\n  const a11y = decorative\r\n    ? ({ role: \"none\" } as const)\r\n    : ({ role: \"separator\", \"aria-orientation\": orientation } as const);\r\n\r\n  if (children) {\r\n    return (\r\n      <div className={className ? `${labelledClass} ${className}` : labelledClass} {...a11y} {...props}>\r\n        {children}\r\n      </div>\r\n    );\r\n  }\r\n\r\n  const base = orientation === \"vertical\" ? verticalClass : horizontalClass;\r\n  return <div className={className ? `${base} ${className}` : base} {...a11y} {...props} />;\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}