{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "date-picker",
  "title": "Date Picker",
  "description": "Sélecteur de date localisé (Intl) en popover, positionné via CSS Anchor Positioning.",
  "registryDependencies": [
    "@valraiso/icon"
  ],
  "files": [
    {
      "path": "registry/valraiso/date-picker/date-picker.astro",
      "content": "---\nimport Icon from \"../icon/icon.astro\";\nimport styles from \"./date-picker.module.css\";\n\n/**\n * DatePicker — champ date avec calendrier en popover (CSS Anchor Positioning).\n * Localisé via Intl, navigation par mois, bornes min/max, polyfill anchor au\n * besoin. Le champ expose la valeur ISO sur `input.dataset.value` et émet\n * `input`/`change`.\n *\n * Props :\n *  - `lang` : locale Intl (défaut \"fr\").\n *  - `placeholder` : texte du champ.\n *  - `min` / `max` : bornes ISO (AAAA-MM-JJ).\n *  - `class` : classe(s) ajoutée(s) au conteneur racine.\n *  - tout autre attribut est transmis à l'`<input>`.\n *\n * Personnalisation (variables CSS) : --ads-date-picker-bg,\n *  --ads-date-picker-color, --ads-date-picker-radius, --ads-date-picker-shadow,\n *  --ads-date-picker-accent, --ads-date-picker-accent-color,\n *  --ads-date-picker-muted, --ads-date-picker-hover-bg,\n *  --ads-date-picker-today-border.\n */\ninterface Props {\n  lang?: string;\n  placeholder?: string;\n  min?: string;\n  max?: string;\n  class?: string;\n  [key: string]: unknown;\n}\n\nconst {\n  class: className,\n  lang = \"fr\",\n  type: _type,\n  placeholder,\n  min,\n  max,\n  ...props\n} = Astro.props;\n\nconst minDate = min || \"\";\nconst maxDate = max || \"\";\nconst placeholderText = placeholder || \"\";\nconst uniqueId = crypto.randomUUID();\n---\n\n<div\n  class:list={[styles.datePicker, className]}\n  data-date-picker\n  data-lang={lang}\n  data-min={minDate}\n  data-max={maxDate}\n>\n  <button\n    type=\"button\"\n    class={styles.trigger}\n    popovertarget={`calendar-${uniqueId}`}\n    style={{ anchorName: `--date-picker-${uniqueId}` }}\n    data-date-trigger\n  >\n    <Icon code=\"calendar\" class={styles.inputIcon} />\n    <input\n      type=\"text\"\n      class={styles.input}\n      placeholder={placeholderText}\n      readonly\n      tabindex={-1}\n      data-date-input\n      {...props}\n    />\n  </button>\n\n  <div\n    class={styles.dropdown}\n    id={`calendar-${uniqueId}`}\n    popover=\"auto\"\n    style={{ positionAnchor: `--date-picker-${uniqueId}` }}\n    data-date-dropdown\n  >\n    <div class={styles.header}>\n      <button type=\"button\" class={styles.nav} data-date-prev>\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <path d=\"m15 18-6-6 6-6\"></path>\n        </svg>\n      </button>\n      <span class={styles.monthYear} data-date-month-year aria-live=\"polite\"\n      ></span>\n      <button type=\"button\" class={styles.nav} data-date-next>\n        <svg\n          width=\"16\"\n          height=\"16\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2.5\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n        >\n          <path d=\"m9 18 6-6-6-6\"></path>\n        </svg>\n      </button>\n    </div>\n\n    <div class={styles.weekdays} data-date-weekdays></div>\n    <div class={styles.grid} data-date-grid></div>\n  </div>\n</div>\n\n<script>\n  function initDatePickers() {\n    document\n      .querySelectorAll<HTMLElement>(\"[data-date-picker]\")\n      .forEach((picker) => {\n        if (picker.dataset.initialized) return;\n        picker.dataset.initialized = \"true\";\n\n        const input =\n          picker.querySelector<HTMLInputElement>(\"[data-date-input]\")!;\n        const dropdown = picker.querySelector<HTMLElement>(\n          \"[data-date-dropdown]\",\n        )!;\n        const grid = picker.querySelector<HTMLElement>(\"[data-date-grid]\")!;\n        const monthYearLabel = picker.querySelector<HTMLElement>(\n          \"[data-date-month-year]\",\n        )!;\n        const weekdaysRow = picker.querySelector<HTMLElement>(\n          \"[data-date-weekdays]\",\n        )!;\n        const prevBtn = picker.querySelector<HTMLElement>(\"[data-date-prev]\")!;\n        const nextBtn = picker.querySelector<HTMLElement>(\"[data-date-next]\")!;\n\n        const lang = picker.dataset.lang || \"fr\";\n        const minAttr = picker.dataset.min;\n        const maxAttr = picker.dataset.max;\n        const minDate = minAttr ? new Date(minAttr + \"T00:00:00\") : null;\n        const maxDate = maxAttr ? new Date(maxAttr + \"T00:00:00\") : null;\n\n        let viewDate = new Date();\n        let selectedDate: Date | null = null;\n\n        // --- Locale helpers using Intl ---\n\n        function getMonthName(date: Date): string {\n          const name = date.toLocaleDateString(lang, { month: \"long\" });\n          return name.charAt(0).toUpperCase() + name.slice(1);\n        }\n\n        function getWeekdayNames(): string[] {\n          const names: string[] = [];\n          const base = new Date(2024, 0, 1); // Known Monday\n          for (let i = 0; i < 7; i++) {\n            const d = new Date(base);\n            d.setDate(base.getDate() + i);\n            const name = d.toLocaleDateString(lang, { weekday: \"short\" });\n            names.push(name.charAt(0).toUpperCase() + name.slice(1));\n          }\n          return names;\n        }\n\n        function formatDisplay(d: Date): string {\n          return d.toLocaleDateString(lang, {\n            day: \"2-digit\",\n            month: \"2-digit\",\n            year: \"numeric\",\n          });\n        }\n\n        // --- Aria labels ---\n\n        prevBtn.setAttribute(\n          \"aria-label\",\n          lang === \"fr\" ? \"Mois précédent\" : \"Previous month\",\n        );\n        nextBtn.setAttribute(\n          \"aria-label\",\n          lang === \"fr\" ? \"Mois suivant\" : \"Next month\",\n        );\n\n        // --- Render weekday headers ---\n\n        weekdaysRow.innerHTML = getWeekdayNames()\n          .map((name) => `<span>${name}</span>`)\n          .join(\"\");\n\n        // --- Utility ---\n\n        function toISO(d: Date): string {\n          const y = d.getFullYear();\n          const m = String(d.getMonth() + 1).padStart(2, \"0\");\n          const day = String(d.getDate()).padStart(2, \"0\");\n          return `${y}-${m}-${day}`;\n        }\n\n        function isDisabledDate(d: Date): boolean {\n          if (minDate && d < minDate) return true;\n          if (maxDate && d > maxDate) return true;\n          return false;\n        }\n\n        function isSameDay(a: Date, b: Date): boolean {\n          return (\n            a.getFullYear() === b.getFullYear() &&\n            a.getMonth() === b.getMonth() &&\n            a.getDate() === b.getDate()\n          );\n        }\n\n        // --- Render calendar grid ---\n\n        function render() {\n          monthYearLabel.textContent = `${getMonthName(viewDate)} ${viewDate.getFullYear()}`;\n\n          const year = viewDate.getFullYear();\n          const month = viewDate.getMonth();\n          const lastDay = new Date(year, month + 1, 0);\n\n          let startDow = new Date(year, month, 1).getDay() - 1;\n          if (startDow < 0) startDow = 6;\n\n          const today = new Date();\n          const cells: string[] = [];\n\n          // Previous month trailing days\n          const prevMonthLast = new Date(year, month, 0);\n          for (let i = startDow - 1; i >= 0; i--) {\n            const day = prevMonthLast.getDate() - i;\n            const d = new Date(year, month - 1, day);\n            cells.push(buildDayCell(d, day));\n          }\n\n          // Current month days\n          for (let day = 1; day <= lastDay.getDate(); day++) {\n            const d = new Date(year, month, day);\n            const isToday = isSameDay(d, today);\n            const isSelected =\n              selectedDate !== null && isSameDay(d, selectedDate);\n            const disabled = isDisabledDate(d);\n            const attrs = [\n              isToday ? `data-today=\"\"` : \"\",\n              isSelected ? `data-selected=\"\"` : \"\",\n              disabled ? \"disabled\" : \"\",\n            ]\n              .filter(Boolean)\n              .join(\" \");\n            cells.push(\n              `<button type=\"button\" data-day ${attrs} data-date=\"${toISO(d)}\">${day}</button>`,\n            );\n          }\n\n          // Next month leading days\n          const totalCells = Math.ceil(cells.length / 7) * 7;\n          const remaining = totalCells - cells.length;\n          for (let day = 1; day <= remaining; day++) {\n            const d = new Date(year, month + 1, day);\n            cells.push(buildDayCell(d, day));\n          }\n\n          grid.innerHTML = cells.join(\"\");\n        }\n\n        function buildDayCell(d: Date, day: number): string {\n          const disabled = isDisabledDate(d);\n          return `<button type=\"button\" data-day data-outside ${disabled ? \"disabled\" : \"\"} data-date=\"${toISO(d)}\">${day}</button>`;\n        }\n\n        // --- Selection ---\n\n        function selectDate(d: Date) {\n          selectedDate = d;\n          input.value = formatDisplay(d);\n          input.dataset.value = toISO(d);\n\n          input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n          input.dispatchEvent(new Event(\"change\", { bubbles: true }));\n\n          dropdown.hidePopover();\n        }\n\n        // --- Popover events ---\n\n        dropdown.addEventListener(\"beforetoggle\", (e: Event) => {\n          const toggleEvent = e as ToggleEvent;\n          if (toggleEvent.newState === \"open\") {\n            if (selectedDate) {\n              viewDate = new Date(selectedDate);\n            }\n            render();\n          }\n        });\n\n        // --- Nav buttons ---\n\n        prevBtn.addEventListener(\"click\", (e: MouseEvent) => {\n          e.stopPropagation();\n          viewDate.setMonth(viewDate.getMonth() - 1);\n          render();\n        });\n\n        nextBtn.addEventListener(\"click\", (e: MouseEvent) => {\n          e.stopPropagation();\n          viewDate.setMonth(viewDate.getMonth() + 1);\n          render();\n        });\n\n        // --- Day selection (event delegation) ---\n\n        grid.addEventListener(\"click\", (e: MouseEvent) => {\n          const target = e.target as HTMLElement;\n          if (!target.matches(\"[data-date]\") || target.hasAttribute(\"disabled\"))\n            return;\n          const dateStr = target.dataset.date;\n          if (!dateStr) return;\n          selectDate(new Date(dateStr + \"T00:00:00\"));\n        });\n      });\n  }\n\n  initDatePickers();\n  document.addEventListener(\"astro:page-load\", initDatePickers);\n</script>\n\n<script is:inline type=\"module\">\n  if (!(\"anchorName\" in document.documentElement.style)) {\n    const polyfill = \"https://unpkg.com/@oddbird/css-anchor-positioning\";\n    import(/* @vite-ignore */ polyfill);\n  }\n</script>\n",
      "type": "registry:file",
      "target": "src/components/valraiso/date-picker/date-picker.astro"
    },
    {
      "path": "registry/valraiso/date-picker/date-picker.module.css",
      "content": ".datePicker {\n  display: inline-block;\n  font-family: var(--ads-sans-serif-font, inherit);\n}\n\n/* --- Champ déclencheur --- */\n.trigger {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  padding: var(--ads-date-picker-padding, 8px 12px);\n  background: var(--ads-date-picker-field-bg, var(--ads-white, #fff));\n  color: var(--ads-date-picker-color, var(--ads-black, #262626));\n  border: 1px solid var(--ads-date-picker-border, var(--ads-grey-300, #c9c9c9));\n  border-radius: var(--ads-date-picker-radius, var(--ads-radius-200, 8px));\n  cursor: pointer;\n}\n\n.inputIcon {\n  flex: 0 0 auto;\n  color: currentColor;\n  opacity: 0.7;\n}\n\n.input {\n  border: none;\n  background: none;\n  outline: none;\n  color: inherit;\n  font: inherit;\n  cursor: pointer;\n  min-width: 7em;\n}\n\n.input::placeholder {\n  color: var(--ads-date-picker-muted, var(--ads-grey-300, #c9c9c9));\n}\n\n/* --- Popover calendrier --- */\n.dropdown {\n  margin: 0;\n  inset: auto;\n  top: anchor(bottom);\n  justify-self: anchor-center;\n  margin-top: var(--ads-date-picker-gap, 6px);\n  padding: var(--ads-date-picker-dropdown-padding, 12px);\n  width: max-content;\n  background: var(--ads-date-picker-bg, var(--ads-white, #fff));\n  color: var(--ads-date-picker-color, var(--ads-black, #262626));\n  border: none;\n  border-radius: var(--ads-date-picker-radius, var(--ads-radius-300, 12px));\n  box-shadow: var(\n    --ads-date-picker-shadow,\n    var(--ads-shadow-200, 0 5px 10px rgba(0, 0, 0, 0.12))\n  );\n  z-index: var(--ads-date-picker-z-index, var(--ads-floating-z-index, 100));\n}\n\n/* --- En-tête (mois/année + navigation) --- */\n.header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n\n.monthYear {\n  flex: 1 1 auto;\n  text-align: center;\n  font-weight: 600;\n  font-size: 15px;\n}\n\n.nav {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 4px;\n  border: none;\n  background: none;\n  color: currentColor;\n  cursor: pointer;\n  border-radius: var(--ads-date-picker-radius, var(--ads-radius-100, 4px));\n  transition: background 160ms var(--ads-transition-easing, ease);\n}\n\n.nav:hover {\n  background: var(--ads-date-picker-hover-bg, var(--ads-grey-100, #f7f1f1));\n}\n\n/* --- Grilles (jours de la semaine + dates) --- */\n.weekdays,\n.grid {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 2px;\n}\n\n.weekdays {\n  margin-bottom: 4px;\n}\n\n.weekdays :global(span) {\n  text-align: center;\n  font-size: 12px;\n  color: var(--ads-date-picker-muted, var(--ads-grey-300, #c9c9c9));\n}\n\n/* Boutons-jours générés dynamiquement par le script. */\n.grid :global([data-day]) {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  aspect-ratio: 1;\n  width: 36px;\n  border: 1px solid transparent;\n  background: none;\n  color: inherit;\n  font: inherit;\n  font-size: 14px;\n  cursor: pointer;\n  border-radius: 50%;\n  transition: background 140ms var(--ads-transition-easing, ease);\n}\n\n.grid :global([data-day]:hover:not([disabled])) {\n  background: var(--ads-date-picker-hover-bg, var(--ads-grey-100, #f7f1f1));\n}\n\n/* Jours d'un mois adjacent */\n.grid :global([data-day][data-outside]) {\n  color: var(--ads-date-picker-muted, var(--ads-grey-300, #c9c9c9));\n}\n\n/* Aujourd'hui */\n.grid :global([data-day][data-today]) {\n  border-color: var(\n    --ads-date-picker-today-border,\n    var(--ads-grey-300, #c9c9c9)\n  );\n}\n\n/* Jour sélectionné */\n.grid :global([data-day][data-selected]) {\n  background: var(--ads-date-picker-accent, var(--ads-black, #262626));\n  color: var(--ads-date-picker-accent-color, var(--ads-white, #fff));\n  border-color: transparent;\n}\n\n.grid :global([data-day][disabled]) {\n  color: var(--ads-date-picker-muted, var(--ads-grey-300, #c9c9c9));\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n",
      "type": "registry:file",
      "target": "src/components/valraiso/date-picker/date-picker.module.css"
    }
  ],
  "type": "registry:component"
}