{
  "name": "badge",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "badge.tsx",
      "content": "\"use client\";\r\n\r\nimport { createVariants, themeVars as theme } from \"@yugnex/core\";\r\nimport { forwardRef, type HTMLAttributes } from \"react\";\r\n\r\nconst badgeVariants = createVariants({\r\n  base: {\r\n    display: \"inline-flex\",\r\n    alignItems: \"center\",\r\n    gap: theme.space[1],\r\n    borderRadius: theme.radius.full,\r\n    fontFamily: theme.fontFamily.sans,\r\n    fontWeight: theme.fontWeight.medium,\r\n    lineHeight: 1,\r\n    border: \"1px solid transparent\",\r\n    whiteSpace: \"nowrap\",\r\n  },\r\n  variants: {\r\n    variant: {\r\n      solid: {},\r\n      soft: {},\r\n      outline: { backgroundColor: \"transparent\" },\r\n    },\r\n    tone: {\r\n      primary: {},\r\n      secondary: {},\r\n      success: {},\r\n      warning: {},\r\n      destructive: {},\r\n    },\r\n    size: {\r\n      sm: {\r\n        fontSize: theme.fontSize.xs,\r\n        paddingLeft: theme.space[2],\r\n        paddingRight: theme.space[2],\r\n        height: \"1.25rem\",\r\n      },\r\n      md: {\r\n        fontSize: theme.fontSize.sm,\r\n        paddingLeft: theme.space[2.5],\r\n        paddingRight: theme.space[2.5],\r\n        height: \"1.5rem\",\r\n      },\r\n    },\r\n  },\r\n  compoundVariants: [\r\n    { variant: \"solid\", tone: \"primary\", css: { backgroundColor: theme.color.primary, color: theme.color.primaryForeground } },\r\n    { variant: \"solid\", tone: \"secondary\", css: { backgroundColor: theme.color.secondary, color: theme.color.secondaryForeground } },\r\n    { variant: \"solid\", tone: \"success\", css: { backgroundColor: theme.color.success, color: theme.color.successForeground } },\r\n    { variant: \"solid\", tone: \"warning\", css: { backgroundColor: theme.color.warning, color: theme.color.warningForeground } },\r\n    { variant: \"solid\", tone: \"destructive\", css: { backgroundColor: theme.color.destructive, color: theme.color.destructiveForeground } },\r\n\r\n    { variant: \"soft\", tone: \"primary\", css: { backgroundColor: theme.color.accent, color: theme.color.accentForeground } },\r\n    { variant: \"soft\", tone: \"secondary\", css: { backgroundColor: theme.color.muted, color: theme.color.mutedForeground } },\r\n    { variant: \"soft\", tone: \"success\", css: { backgroundColor: theme.color.muted, color: theme.color.success } },\r\n    { variant: \"soft\", tone: \"warning\", css: { backgroundColor: theme.color.muted, color: theme.color.warning } },\r\n    { variant: \"soft\", tone: \"destructive\", css: { backgroundColor: theme.color.muted, color: theme.color.destructive } },\r\n\r\n    { variant: \"outline\", tone: \"primary\", css: { borderColor: theme.color.primary, color: theme.color.primary } },\r\n    { variant: \"outline\", tone: \"secondary\", css: { borderColor: theme.color.border, color: theme.color.foreground } },\r\n    { variant: \"outline\", tone: \"success\", css: { borderColor: theme.color.success, color: theme.color.success } },\r\n    { variant: \"outline\", tone: \"warning\", css: { borderColor: theme.color.warning, color: theme.color.warning } },\r\n    { variant: \"outline\", tone: \"destructive\", css: { borderColor: theme.color.destructive, color: theme.color.destructive } },\r\n  ],\r\n  defaultVariants: { variant: \"solid\", tone: \"primary\", size: \"md\" },\r\n});\r\n\r\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\r\n  variant?: \"solid\" | \"soft\" | \"outline\";\r\n  tone?: \"primary\" | \"secondary\" | \"success\" | \"warning\" | \"destructive\";\r\n  size?: \"sm\" | \"md\";\r\n}\r\n\r\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\r\n  { variant, tone, size, className, ...props },\r\n  ref,\r\n) {\r\n  return <span ref={ref} className={badgeVariants({ variant, tone, size, className })} {...props} />;\r\n});\r\n",
      "type": "registry:component"
    }
  ]
}