{
  "name": "ColorSwatch",
  "category": "form",
  "description": "A color swatch component",
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ColorPickerScreen.tsx",
  "images": [
    "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorPalette/ColorPalette.gif?raw=true"
  ],
  "props": [
    {
      "name": "value",
      "type": "string",
      "description": "The identifier value of the ColorSwatch in a ColorSwatch palette",
      "note": "Must be different than other ColorSwatches in the same group"
    },
    {
      "name": "color",
      "type": "string",
      "description": "The color of the ColorSwatch"
    },
    {
      "name": "selected",
      "type": "boolean",
      "description": "Is the initial state is selected"
    },
    {
      "name": "animated",
      "type": "boolean",
      "description": "Is first render should be animated"
    },
    {
      "name": "onPress",
      "type": "(value: string, colorInfo: ColorInfo) => void",
      "description": "Callback from press event"
    },
    {
      "name": "index",
      "type": "number",
      "description": "The index of the Swatch if in array"
    },
    {
      "name": "style",
      "type": "ViewStyle",
      "description": "Component's style"
    },
    {
      "name": "unavailable",
      "type": "boolean",
      "description": "Is the initial state is unavailable"
    },
    {
      "name": "size",
      "type": "number",
      "description": "Color Swatch size"
    }
  ],
  "snippet": [
    "<ColorSwatch color={Colors.red30$1} selected={true$2} onPress={() => console.log('pressed')$3}/>"
  ],
  "docs": {
    "hero": {
      "title": "ColorSwatch",
      "description": "A swatch is a sample of a color. Swatches behavior is somewhat similar to this of a RadioButton, so only a single swatch can be selected at a given moment. ",
      "type": "hero",
      "layout": "horizontal",
      "content": [
        {
          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorSwatch/ColorSwatch_cover.png"
        }
      ]
    },
    "tabs": [
      {
        "title": "Overview",
        "sections": [
          {
            "type": "table",
            "columns": [
              "Style",
              "Default state",
              "Selected",
              "Unavailable"
            ],
            "items": [
              {
                "title": "Light color",
                "content": [
                  {
                    "background": "#E8ECF0",
                    "props": {
                      "color": "#FFFFFF"
                    }
                  },
                  {
                    "background": "#E8ECF0",
                    "props": {
                      "color": "#FFFFFF",
                      "selected": true
                    }
                  },
                  {
                    "background": "#E8ECF0",
                    "props": {
                      "color": "#FFFFFF",
                      "unavailable": true
                    }
                  }
                ]
              },
              {
                "title": "Dark color",
                "content": [
                  {
                    "background": "#E8ECF0",
                    "props": {
                      "color": "#000000"
                    }
                  },
                  {
                    "background": "#E8ECF0",
                    "props": {
                      "color": "#000000",
                      "selected": true
                    }
                  },
                  {
                    "background": "#E8ECF0",
                    "props": {
                      "color": "#000000",
                      "unavailable": true
                    }
                  }
                ]
              },
              {
                "title": "Transparent",
                "content": [
                  {
                    "background": "#E8ECF0",
                    "props": {
                      "transparent": true
                    }
                  },
                  {
                    "background": "#E8ECF0",
                    "props": {
                      "transparent": true,
                      "selected": true
                    }
                  },
                  {
                    "background": "#E8ECF0",
                    "props": {
                      "transparent": true,
                      "unavailable": true
                    }
                  }
                ]
              }
            ],
            "title": "Swatch Styles and States"
          },
          {
            "type": "section",
            "layout": "horizontal",
            "title": "Spec",
            "description": "markdown:Border width 1px.\n\n‘Unavailable’ swatch can be either tappable or “disabled”. ",
            "content": [
              {
                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/ColorSwatch/ColorSwatch_spec.png"
              }
            ]
          }
        ]
      }
    ]
  }
}