{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-with-icon",
  "title": "Input with icon",
  "description": "Champ texte avec icône à gauche.",
  "registryDependencies": [
    "@valraiso/icon"
  ],
  "files": [
    {
      "path": "registry/valraiso/input-with-icon/input-with-icon.astro",
      "content": "---\nimport Icon from \"../icon/icon.astro\";\nimport styles from \"./input-with-icon.module.css\";\n\n/**\n * InputWithIcon — champ de saisie avec une icône à gauche.\n *\n * Personnalisation :\n *  - `icon` : code de l'icône affichée (défaut \"search\").\n *  - `class` : classe(s) ajoutée(s) à l'élément <input>.\n *  - autres props : transmises telles quelles à l'<input> natif (type, placeholder, name…).\n *  - variables CSS : --ads-input-* (voir input-with-icon.module.css).\n */\ninterface Props {\n  icon?: string;\n  class?: string;\n  [key: string]: unknown;\n}\n\nconst { icon, class: className, ...props } = Astro.props;\n---\n\n<div class={styles.wrapper}>\n  <Icon code={icon ?? \"search\"} class={styles.icon} width={20} height={20} />\n  <input class:list={[styles.input, className]} {...props} />\n</div>\n",
      "type": "registry:file",
      "target": "src/components/valraiso/input-with-icon/input-with-icon.astro"
    },
    {
      "path": "registry/valraiso/input-with-icon/input-with-icon.module.css",
      "content": ".wrapper {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  width: 100%;\n}\n\n.icon {\n  position: absolute;\n  left: var(--ads-input-icon-offset, 12px);\n  top: 50%;\n  transform: translateY(-50%);\n  flex: 0 0 auto;\n  color: var(--ads-input-icon-color, var(--ads-grey-500, #8a8a8a));\n  pointer-events: none;\n}\n\n.input {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--ads-input-padding, 10px 14px);\n  padding-left: var(--ads-input-padding-left, 40px);\n  font-family: var(--ads-sans-serif-font, inherit);\n  font-size: var(--ads-input-font-size, 14px);\n  color: var(--ads-input-color, var(--ads-black, #262626));\n  background: var(--ads-input-bg, var(--ads-white, #fff));\n  border: var(--ads-input-border-width, 1px) solid\n    var(--ads-input-border-color, var(--ads-grey-300, #d8d8d8));\n  border-radius: var(--ads-input-radius, var(--ads-radius-300, 12px));\n  outline: none;\n  transition:\n    border-color 160ms var(--ads-transition-easing, ease),\n    box-shadow 160ms var(--ads-transition-easing, ease);\n}\n\n.input::placeholder {\n  color: var(--ads-input-placeholder-color, var(--ads-grey-500, #8a8a8a));\n}\n\n.input:focus {\n  border-color: var(\n    --ads-input-focus-border-color,\n    var(--ads-primary, #24c678)\n  );\n  box-shadow: var(--ads-input-focus-shadow, 0 0 0 3px rgba(36, 198, 120, 0.18));\n}\n\n.input:disabled {\n  opacity: var(--ads-input-disabled-opacity, 0.6);\n  cursor: not-allowed;\n}\n",
      "type": "registry:file",
      "target": "src/components/valraiso/input-with-icon/input-with-icon.module.css"
    }
  ],
  "type": "registry:component"
}