{
  "plugins": [
    "react",
    "import"
  ],
  "rules": {
    "react/forbid-elements": [
      "warn",
      {
        "forbid": []
      }
    ],
    "no-restricted-imports": [
      "warn",
      {
        "patterns": [
          {
            "group": [
              "components/buttons/**",
              "components/display/**",
              "components/forms/**",
              "ui_kits/marketing/**"
            ],
            "message": "Import design-system components from 'index.js', not component internals."
          }
        ]
      }
    ],
    "no-restricted-syntax": [
      "warn",
      {
        "selector": "Literal[value=/#[0-9a-fA-F]{3,8}\\b/]",
        "message": "Raw hex color — use a design-system color token via var()."
      },
      {
        "selector": "Literal[value=/\\b\\d+px\\b/]",
        "message": "Raw px value — use a design-system spacing token via var()."
      },
      {
        "selector": "Literal[value=/font-family\\s*:\\s*(?!['\\\"]?(?:IBM Plex Mono|IBM Plex Sans|IBM Plex Serif))/i]",
        "message": "Font not provided by the design system. Available: IBM Plex Mono, IBM Plex Sans, IBM Plex Serif."
      },
      {
        "selector": "JSXOpeningElement[name.name='Badge'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|tone|key|ref|className|style|children)$/]",
        "message": "<Badge> doesn't accept that prop. Declared props: children, tone."
      },
      {
        "selector": "JSXOpeningElement[name.name='Badge'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:neutral|brand|gold|green)$/]",
        "message": "<Badge> tone must be one of 'neutral' | 'brand' | 'gold' | 'green'."
      },
      {
        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|variant|size|arrow|icon|href|type|disabled|style|key|ref|className|style|children)$/]",
        "message": "<Button> doesn't accept that prop. Declared props: children, variant, size, arrow, icon, href, type, disabled, style."
      },
      {
        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:primary|ghost|onDark|ghostDark)$/]",
        "message": "<Button> variant must be one of 'primary' | 'ghost' | 'onDark' | 'ghostDark'."
      },
      {
        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md|lg)$/]",
        "message": "<Button> size must be one of 'sm' | 'md' | 'lg'."
      },
      {
        "selector": "JSXOpeningElement[name.name='Button'] > JSXAttribute[name.name='type'] > Literal[value!=/^(?:button|submit|reset)$/]",
        "message": "<Button> type must be one of 'button' | 'submit' | 'reset'."
      },
      {
        "selector": "JSXOpeningElement[name.name='Card'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|hover|padding|radius|key|ref|className|style|children)$/]",
        "message": "<Card> doesn't accept that prop. Declared props: children, hover, padding, radius."
      },
      {
        "selector": "JSXOpeningElement[name.name='Eyebrow'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|variant|tone|key|ref|className|style|children)$/]",
        "message": "<Eyebrow> doesn't accept that prop. Declared props: children, variant, tone."
      },
      {
        "selector": "JSXOpeningElement[name.name='Eyebrow'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:rule|capsule|plain)$/]",
        "message": "<Eyebrow> variant must be one of 'rule' | 'capsule' | 'plain'."
      },
      {
        "selector": "JSXOpeningElement[name.name='Eyebrow'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:light|dark)$/]",
        "message": "<Eyebrow> tone must be one of 'light' | 'dark'."
      },
      {
        "selector": "JSXOpeningElement[name.name='Field'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|htmlFor|hint|error|tone|children|style|key|ref|className|style|children)$/]",
        "message": "<Field> doesn't accept that prop. Declared props: label, htmlFor, hint, error, tone, children, style."
      },
      {
        "selector": "JSXOpeningElement[name.name='Field'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:light|dark)$/]",
        "message": "<Field> tone must be one of 'light' | 'dark'."
      },
      {
        "selector": "JSXOpeningElement[name.name='IconButton'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|label|variant|size|href|disabled|style|key|ref|className|style|children)$/]",
        "message": "<IconButton> doesn't accept that prop. Declared props: children, label, variant, size, href, disabled, style."
      },
      {
        "selector": "JSXOpeningElement[name.name='IconButton'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:ghost|solid|soft)$/]",
        "message": "<IconButton> variant must be one of 'ghost' | 'solid' | 'soft'."
      },
      {
        "selector": "JSXOpeningElement[name.name='IconButton'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:sm|md|lg)$/]",
        "message": "<IconButton> size must be one of 'sm' | 'md' | 'lg'."
      },
      {
        "selector": "JSXOpeningElement[name.name='Input'] > JSXAttribute > JSXIdentifier[name!=/^(?:tone|invalid|key|ref|className|style|children)$/]",
        "message": "<Input> doesn't accept that prop. Declared props: tone, invalid."
      },
      {
        "selector": "JSXOpeningElement[name.name='Input'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:light|dark)$/]",
        "message": "<Input> tone must be one of 'light' | 'dark'."
      },
      {
        "selector": "JSXOpeningElement[name.name='LiveDot'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|color|size|key|ref|className|style|children)$/]",
        "message": "<LiveDot> doesn't accept that prop. Declared props: label, color, size."
      },
      {
        "selector": "JSXOpeningElement[name.name='MetricTag'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|value|lit|key|ref|className|style|children)$/]",
        "message": "<MetricTag> doesn't accept that prop. Declared props: label, value, lit."
      },
      {
        "selector": "JSXOpeningElement[name.name='SelectOption'] > JSXAttribute > JSXIdentifier[name!=/^(?:value|label|key|ref|className|style|children)$/]",
        "message": "<SelectOption> doesn't accept that prop. Declared props: value, label."
      },
      {
        "selector": "JSXOpeningElement[name.name='StepNumber'] > JSXAttribute > JSXIdentifier[name!=/^(?:n|pad|size|key|ref|className|style|children)$/]",
        "message": "<StepNumber> doesn't accept that prop. Declared props: n, pad, size."
      },
      {
        "selector": "JSXOpeningElement[name.name='Textarea'] > JSXAttribute > JSXIdentifier[name!=/^(?:tone|rows|key|ref|className|style|children)$/]",
        "message": "<Textarea> doesn't accept that prop. Declared props: tone, rows."
      },
      {
        "selector": "JSXOpeningElement[name.name='Textarea'] > JSXAttribute[name.name='tone'] > Literal[value!=/^(?:light|dark)$/]",
        "message": "<Textarea> tone must be one of 'light' | 'dark'."
      }
    ]
  },
  "overrides": [
    {
      "files": [
        "**/index.js"
      ],
      "rules": {
        "no-restricted-imports": "off"
      }
    }
  ]
}