{
  "name": "ds-input",
  "description": "Text input field component. Supports input, textarea, and div container wrapper. Icons require div wrapper. Includes date/time pickers, color picker, copy-to-clipboard, and resize variants.",
  "docUrl": "https://design.soracom.io/design-system/elements/input/",
  "category": "elements",
  "htmlElements": [
    "input",
    "textarea",
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "size": {
      "support": "subset",
      "values": [
        "--small",
        "--large"
      ]
    },
    "width": {
      "support": "subset",
      "values": [
        "--narrow",
        "--mid",
        "--wide",
        "--extra-wide",
        "--full-width",
        "--full"
      ]
    },
    "visual-state": {
      "support": "all"
    },
    "state": {
      "support": "subset",
      "values": [
        "--disabled"
      ]
    },
    "variant": {
      "support": "custom",
      "values": [
        "--text",
        "--date",
        "--time",
        "--datetime-split",
        "--color-picker",
        "--copy",
        "--addon"
      ]
    },
    "utility": {
      "support": "custom",
      "values": [
        "--resize-horizontal",
        "--resize-vertical",
        "--resize-none",
        "--no-resize",
        "--resize",
        "--narrow"
      ]
    },
    "icon": {
      "support": "all"
    }
  },
  "structure": {
    "containerWrapper": "div"
  },
  "examples": [
    {
      "name": "basic",
      "html": "<input class=\"ds-input\" type=\"text\" placeholder=\"Enter text\">"
    },
    {
      "name": "container",
      "html": "<div class=\"ds-input\"><input type=\"text\" placeholder=\"Enter text\"></div>"
    },
    {
      "name": "withLabel",
      "html": "<label class=\"ds-field\"><div class=\"ds-text --label\">Label</div><div class=\"ds-input\"><input type=\"text\" placeholder=\"Enter text\"></div></label>"
    },
    {
      "name": "required",
      "html": "<label class=\"ds-field\"><div class=\"ds-text --label\">Required Field</div><div class=\"ds-input\"><input type=\"text\" placeholder=\"Enter text\" required></div></label>"
    },
    {
      "name": "small",
      "html": "<input class=\"ds-input --small\" type=\"text\" placeholder=\"Small input\">"
    },
    {
      "name": "large",
      "html": "<input class=\"ds-input --large\" type=\"text\" placeholder=\"Large input\">"
    },
    {
      "name": "alert",
      "html": "<input class=\"ds-input --alert\" type=\"text\" placeholder=\"Alert input\">"
    },
    {
      "name": "warning",
      "html": "<input class=\"ds-input --warning\" type=\"text\" placeholder=\"Warning input\">"
    },
    {
      "name": "success",
      "html": "<input class=\"ds-input --success\" type=\"text\" placeholder=\"Success input\">"
    },
    {
      "name": "info",
      "html": "<input class=\"ds-input --info\" type=\"text\" placeholder=\"Info input\">"
    },
    {
      "name": "with-icon",
      "html": "<div class=\"ds-input --icon-search\"><input type=\"text\" placeholder=\"Search...\"></div>"
    },
    {
      "name": "icon-and-state",
      "html": "<div class=\"ds-input --icon-warning --alert\"><input type=\"text\" placeholder=\"Alert with icon\"></div>"
    },
    {
      "name": "textarea",
      "html": "<textarea class=\"ds-input\" placeholder=\"Enter text\"></textarea>"
    },
    {
      "name": "textarea-container",
      "html": "<div class=\"ds-input\"><textarea placeholder=\"Enter text\"></textarea></div>"
    },
    {
      "name": "date-picker",
      "html": "<div class=\"ds-input --date\"><input type=\"date\"></div>"
    },
    {
      "name": "time-picker",
      "html": "<div class=\"ds-input --time\"><input type=\"time\"></div>"
    },
    {
      "name": "datetime-split",
      "html": "<div class=\"ds-input --datetime-split\"><input type=\"date\"><input type=\"time\"></div>"
    },
    {
      "name": "readonly",
      "html": "<input class=\"ds-input\" type=\"text\" value=\"Read only value\" readonly>"
    },
    {
      "name": "disabled",
      "html": "<input class=\"ds-input\" type=\"text\" placeholder=\"Disabled\" disabled>"
    },
    {
      "name": "addon",
      "html": "<div class=\"ds-input\"><input type=\"text\" placeholder=\"Enter value\"><button class=\"ds-button --addon --primary\">Go</button></div>"
    },
    {
      "name": "file",
      "html": "<input class=\"ds-input\" type=\"file\">"
    },
    {
      "name": "text-style",
      "html": "<input class=\"ds-input --text\" type=\"text\" value=\"Looks like plain text\">"
    },
    {
      "name": "copy",
      "html": "<div class=\"ds-input --copy\"><input type=\"text\" value=\"Text to copy\" readonly><button class=\"ds-button --small --icon-clipboard\"></button></div>"
    }
  ]
}