{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-with-icon",
  "title": "Select with icon",
  "description": "Menu déroulant natif avec icône à gauche et chevron à droite.",
  "registryDependencies": [
    "@valraiso/icon"
  ],
  "files": [
    {
      "path": "registry/valraiso/select-with-icon/select-with-icon.astro",
      "content": "---\nimport Icon from \"../icon/icon.astro\";\nimport styles from \"./select-with-icon.module.css\";\n\n/**\n * SelectWithIcon — liste déroulante avec une icône à gauche.\n *\n * Personnalisation :\n *  - `icon` : code de l'icône affichée (défaut \"list\").\n *  - `class` : classe(s) ajoutée(s) à l'élément <select>.\n *  - autres props : transmises telles quelles au <select> natif (name, value, disabled…).\n *  - variables CSS : --ads-select-* (voir select-with-icon.module.css).\n *\n * Les <option> sont fournies via le slot.\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 ?? \"list\"} class={styles.icon} width={20} height={20} />\n  <select class:list={[styles.select, className]} {...props}>\n    <slot />\n  </select>\n  <Icon code=\"chevron-down\" class={styles.chevron} width={18} height={18} />\n</div>\n",
      "type": "registry:file",
      "target": "src/components/valraiso/select-with-icon/select-with-icon.astro"
    },
    {
      "path": "registry/valraiso/select-with-icon/select-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-select-icon-offset, 12px);\n  top: 50%;\n  transform: translateY(-50%);\n  flex: 0 0 auto;\n  color: var(--ads-select-icon-color, var(--ads-grey-500, #8a8a8a));\n  pointer-events: none;\n}\n\n.chevron {\n  position: absolute;\n  right: var(--ads-select-chevron-offset, 12px);\n  top: 50%;\n  transform: translateY(-50%);\n  flex: 0 0 auto;\n  color: var(--ads-select-chevron-color, var(--ads-grey-500, #8a8a8a));\n  pointer-events: none;\n}\n\n.select {\n  width: 100%;\n  box-sizing: border-box;\n  padding: var(--ads-select-padding, 10px 14px);\n  padding-left: var(--ads-select-padding-left, 40px);\n  padding-right: var(--ads-select-padding-right, 36px);\n  font-family: var(--ads-sans-serif-font, inherit);\n  font-size: var(--ads-select-font-size, 14px);\n  color: var(--ads-select-color, var(--ads-black, #262626));\n  background: var(--ads-select-bg, var(--ads-white, #fff));\n  border: var(--ads-select-border-width, 1px) solid\n    var(--ads-select-border-color, var(--ads-grey-300, #d8d8d8));\n  border-radius: var(--ads-select-radius, var(--ads-radius-300, 12px));\n  outline: none;\n  cursor: pointer;\n  appearance: none;\n  -webkit-appearance: none;\n  transition:\n    border-color 160ms var(--ads-transition-easing, ease),\n    box-shadow 160ms var(--ads-transition-easing, ease);\n}\n\n.select:focus {\n  border-color: var(\n    --ads-select-focus-border-color,\n    var(--ads-primary, #24c678)\n  );\n  box-shadow: var(\n    --ads-select-focus-shadow,\n    0 0 0 3px rgba(36, 198, 120, 0.18)\n  );\n}\n\n.select:disabled {\n  opacity: var(--ads-select-disabled-opacity, 0.6);\n  cursor: not-allowed;\n}\n",
      "type": "registry:file",
      "target": "src/components/valraiso/select-with-icon/select-with-icon.module.css"
    }
  ],
  "type": "registry:component"
}