{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "toast",
  "title": "Toast",
  "description": "Notification éphémère via l'API Popover. Expose window.toaster().",
  "files": [
    {
      "path": "registry/valraiso/toast/toast.astro",
      "content": "---\nimport styles from \"./toast.module.css\";\n\n/**\n * Toast — notification éphémère via l'API Popover. Expose `window.toaster()`.\n *\n * Usage : placez <Toast /> une fois dans votre layout, puis appelez\n *   window.toaster(\"Enregistré\", \"success\")\n * type ∈ \"success\" | \"error\" | \"warning\" | \"information\".\n *\n * Personnalisation :\n *  - `class` : classe(s) ajoutée(s) au conteneur.\n *  - variables CSS : --ads-toast-* et les dégradés --ads-green/red/yellow-gradient.\n */\ninterface Props {\n  duration?: number;\n  class?: string;\n}\n\nconst { duration = 2000, class: className } = Astro.props;\n---\n\n<article\n  class:list={[styles.toast, className]}\n  popover=\"manual\"\n  data-toast\n  data-duration={duration}\n>\n  <div class={styles.inner}>\n    <span class={styles.message} data-toast-message></span>\n    <svg\n      class={styles.icon}\n      data-icon=\"success\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      height=\"24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M20.707 5.293a1 1 0 0 1 0 1.414l-11 11a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L9 15.586 19.293 5.293a1 1 0 0 1 1.414 0Z\"\n      ></path>\n    </svg>\n    <svg\n      class={styles.icon}\n      data-icon=\"warning\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      height=\"24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M10.53 2.28a3 3 0 0 1 4.04 1.06l8.47 14.15v.01a3 3 0 0 1-2.56 4.5H3.52a3 3 0 0 1-2.57-4.5l.01-.01L9.43 3.35l.86.51-.85-.52a3 3 0 0 1 1.09-1.06Zm.62 2.1L2.68 18.5A1 1 0 0 0 3.54 20h16.92a1 1 0 0 0 .86-1.5L12.86 4.39a1 1 0 0 0-1.71 0Z\"\n      ></path>\n      <path\n        d=\"M11 17a1 1 0 0 1 1-1h.01a1 1 0 1 1 0 2H12a1 1 0 0 1-1-1ZM12 8a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V9a1 1 0 0 1 1-1Z\"\n      ></path>\n    </svg>\n    <svg\n      class={styles.icon}\n      data-icon=\"information\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      height=\"24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18ZM1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12Z\"\n      ></path>\n      <path\n        d=\"M12 11a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0v-4a1 1 0 0 1 1-1ZM11 8a1 1 0 0 1 1-1h.01a1 1 0 1 1 0 2H12a1 1 0 0 1-1-1Z\"\n      ></path>\n    </svg>\n    <svg\n      class={styles.icon}\n      data-icon=\"error\"\n      viewBox=\"0 0 24 24\"\n      width=\"24\"\n      height=\"24\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M18.707 5.293a1 1 0 0 1 0 1.414l-12 12a1 1 0 0 1-1.414-1.414l12-12a1 1 0 0 1 1.414 0Z\"\n      ></path>\n      <path\n        d=\"M5.293 5.293a1 1 0 0 1 1.414 0l12 12a1 1 0 0 1-1.414 1.414l-12-12a1 1 0 0 1 0-1.414Z\"\n      ></path>\n    </svg>\n  </div>\n</article>\n\n<script>\n  type ToastType = \"success\" | \"error\" | \"warning\" | \"information\";\n\n  declare global {\n    interface Window {\n      toaster: (message: string, type: ToastType) => void;\n    }\n  }\n\n  const toast = document.querySelector<HTMLElement>(\"[data-toast]\");\n  const text = toast?.querySelector<HTMLElement>(\"[data-toast-message]\");\n  const duration = Number(toast?.dataset.duration) || 2000;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n\n  function toaster(message: string, type: ToastType) {\n    if (!toast || !text) return;\n    text.innerText = message;\n    toast.dataset.type = type;\n    toast.showPopover();\n    clearTimeout(timer);\n    timer = setTimeout(() => {\n      delete toast.dataset.type;\n      toast.hidePopover();\n    }, duration);\n  }\n\n  window.toaster = toaster;\n</script>\n",
      "type": "registry:file",
      "target": "src/components/valraiso/toast/toast.astro"
    },
    {
      "path": "registry/valraiso/toast/toast.module.css",
      "content": ".toast {\n  position: fixed;\n  top: var(--ads-toast-top, 5%);\n  left: 50%;\n  width: max-content;\n  max-width: 90%;\n  padding: var(--ads-toast-padding, 6px 12px);\n  box-sizing: border-box;\n  color: var(--ads-toast-color, var(--ads-white, #fff));\n  font-size: var(--ads-toast-font-size, 16px);\n  background: var(\n    --ads-toast-bg,\n    var(--ads-grey-gradient, linear-gradient(100deg, #ececec 0%, #f7f1f1 100%))\n  );\n  border-radius: var(--ads-toast-radius, var(--ads-radius-400, 20px));\n  box-shadow: var(\n    --ads-toast-shadow,\n    var(--ads-shadow-200, 0 5px 10px rgba(0, 0, 0, 0.12))\n  );\n  user-select: none;\n  overflow: hidden;\n  transform-origin: top left;\n  transform: translateX(-50%);\n  z-index: var(--ads-floating-z-index, 100);\n  margin: 0;\n  border: none;\n  animation: ds-toast-appearance 320ms\n    var(--ads-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));\n  transition:\n    opacity 320ms var(--ads-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9)),\n    transform 320ms\n      var(--ads-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));\n}\n\n.toast[data-type=\"success\"] {\n  color: var(--ads-white, #fff);\n  background: var(\n    --ads-green-gradient,\n    linear-gradient(100deg, #4bde97 0%, #24c678 100%)\n  );\n}\n\n.toast[data-type=\"error\"] {\n  color: var(--ads-white, #fff);\n  background: var(\n    --ads-red-gradient,\n    linear-gradient(100deg, #f26464 0%, #ee3535 100%)\n  );\n}\n\n.toast[data-type=\"warning\"] {\n  color: var(--ads-white, #fff);\n  background: var(\n    --ads-yellow-gradient,\n    linear-gradient(100deg, #ffb648 0%, #ffa114 100%)\n  );\n}\n\n.toast[data-type=\"information\"] {\n  color: var(--ads-black, #262626);\n}\n\n.inner {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.message {\n  color: currentColor;\n  font-family: var(--ads-sans-serif-font, inherit);\n  font-size: var(--ads-toast-message-font-size, 14px);\n  font-weight: var(--ads-toast-message-font-weight, 400);\n}\n\n.icon {\n  --opacity: 0.6;\n\n  display: none;\n  width: 24px;\n  height: 24px;\n  fill: currentColor;\n  opacity: var(--opacity);\n}\n\n/* N'affiche que l'icône correspondant au type courant. */\n.toast[data-type=\"success\"] .icon[data-icon=\"success\"],\n.toast[data-type=\"error\"] .icon[data-icon=\"error\"],\n.toast[data-type=\"warning\"] .icon[data-icon=\"warning\"],\n.toast[data-type=\"information\"] .icon[data-icon=\"information\"] {\n  display: inline;\n  animation: ds-toast-icon-appearance 1280ms\n    var(--ads-transition-easing, cubic-bezier(0.4, 0.1, 0.2, 0.9));\n}\n\n@keyframes ds-toast-appearance {\n  0% {\n    opacity: 0;\n    transform: scale(0.96) translateX(-50%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(-50%);\n  }\n}\n\n@keyframes ds-toast-icon-appearance {\n  0% {\n    opacity: 0;\n    transform: translateY(-10px);\n  }\n  100% {\n    opacity: var(--opacity);\n    transform: translateY(0);\n  }\n}\n",
      "type": "registry:file",
      "target": "src/components/valraiso/toast/toast.module.css"
    }
  ],
  "type": "registry:component"
}