@dododog/ui 0.1.1 → 0.2.1

package/dist/chunk-FNDR3WOZ.mjs

@@ -0,0 +1,220 @@
+import { cn } from './chunk-IMKLN273.mjs';
+import React, { useState, useEffect, useCallback } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var promoBannerVariants = cva(
+  "w-full px-4 py-2.5 text-sm",
+  {
+    variants: {
+      variant: {
+        promo: "bg-secondary text-white",
+        alert: "bg-amber-400 text-amber-950",
+        maintenance: "bg-red-600 text-white",
+        info: "bg-blue-600 text-white"
+      }
+    },
+    defaultVariants: {
+      variant: "info"
+    }
+  }
+);
+function useCountdown(targetDate) {
+  const computeTimeLeft = useCallback(() => {
+    const diff = new Date(targetDate).getTime() - Date.now();
+    if (diff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0, isExpired: true };
+    return {
+      days: Math.floor(diff / 864e5),
+      hours: Math.floor(diff % 864e5 / 36e5),
+      minutes: Math.floor(diff % 36e5 / 6e4),
+      seconds: Math.floor(diff % 6e4 / 1e3),
+      isExpired: false
+    };
+  }, [targetDate]);
+  const [timeLeft, setTimeLeft] = useState(computeTimeLeft);
+  useEffect(() => {
+    const id = setInterval(() => setTimeLeft(computeTimeLeft()), 1e3);
+    return () => clearInterval(id);
+  }, [computeTimeLeft]);
+  return timeLeft;
+}
+function useEmailForm(onSubmit) {
+  const [value, setValue] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+  const [error, setError] = useState(null);
+  const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    if (!EMAIL_RE.test(value)) {
+      setError("Email invalide");
+      return;
+    }
+    setIsLoading(true);
+    try {
+      await onSubmit(value);
+      setIsSuccess(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Erreur");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return { value, setValue, isLoading, isSuccess, error, handleSubmit };
+}
+function useDismiss(storageKey) {
+  const [isDismissed, setIsDismissed] = useState(false);
+  useEffect(() => {
+    if (!storageKey) return;
+    try {
+      if (localStorage.getItem(storageKey) === "1") setIsDismissed(true);
+    } catch {
+    }
+  }, [storageKey]);
+  const dismiss = useCallback(() => {
+    setIsDismissed(true);
+    if (!storageKey) return;
+    try {
+      localStorage.setItem(storageKey, "1");
+    } catch {
+    }
+  }, [storageKey]);
+  return { isDismissed, dismiss };
+}
+var variantIcons = {
+  promo: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "size-5 shrink-0", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M5 2a2 2 0 0 0-2 2v1a1 1 0 0 0 0 2v1a1 1 0 0 0 0 2v1a1 1 0 0 0 0 2v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 0-2v-1a1 1 0 0 0 0-2V7a1 1 0 0 0 0-2V4a2 2 0 0 0-2-2H5Z", clipRule: "evenodd" }) }),
+  alert: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "size-5 shrink-0", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 6a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 6Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z", clipRule: "evenodd" }) }),
+  maintenance: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "size-5 shrink-0", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M8.157 2.176a1.5 1.5 0 0 1 1.858-.062l.106.09 1.769 1.768a15.07 15.07 0 0 1 4.138 4.138l1.768 1.769a1.5 1.5 0 0 1 .028 1.964l-.09.106-1.768 1.769a15.07 15.07 0 0 1-4.138 4.138l-1.769 1.768a1.5 1.5 0 0 1-1.964.028l-.106-.09-1.769-1.768a15.07 15.07 0 0 1-4.138-4.138l-1.768-1.769a1.5 1.5 0 0 1-.028-1.964l.09-.106 1.768-1.769a15.07 15.07 0 0 1 4.138-4.138l1.769-1.768ZM10 9a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z", clipRule: "evenodd" }) }),
+  info: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "size-5 shrink-0", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z", clipRule: "evenodd" }) })
+};
+function CountdownBlock({
+  targetDate,
+  label,
+  expiredLabel
+}) {
+  const { days, hours, minutes, seconds, isExpired } = useCountdown(targetDate);
+  if (isExpired) {
+    return /* @__PURE__ */ jsx("span", { className: "font-medium", children: expiredLabel ?? "Expir\xE9" });
+  }
+  const pad = (n) => String(n).padStart(2, "0");
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+    label && /* @__PURE__ */ jsx("span", { children: label }),
+    /* @__PURE__ */ jsxs("span", { className: "font-mono tabular-nums font-semibold", children: [
+      days > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        days,
+        "j\xA0"
+      ] }),
+      pad(hours),
+      ":",
+      pad(minutes),
+      ":",
+      pad(seconds)
+    ] })
+  ] });
+}
+function EmailFormBlock({
+  onSubmit,
+  placeholder,
+  submitLabel,
+  successMessage
+}) {
+  const { value, setValue, isLoading, isSuccess, error, handleSubmit } = useEmailForm(onSubmit);
+  if (isSuccess) {
+    return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 font-medium", children: [
+      /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "size-4", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z", clipRule: "evenodd" }) }),
+      successMessage ?? "Inscrit !"
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "email",
+        value,
+        onChange: (e) => setValue(e.target.value),
+        placeholder: placeholder ?? "votre@email.com",
+        "aria-label": "Email",
+        className: cn(
+          "rounded px-2.5 py-1 text-sm text-gray-900 placeholder:text-gray-400 outline-none",
+          error && "ring-2 ring-red-300"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        className: "rounded bg-white/20 px-3 py-1 text-sm font-medium hover:bg-white/30 transition-colors disabled:opacity-50",
+        children: isLoading ? "\u2026" : submitLabel ?? "OK"
+      }
+    ),
+    error && /* @__PURE__ */ jsx("span", { className: "text-xs opacity-80", children: error })
+  ] });
+}
+var PromoBanner = React.forwardRef(
+  ({
+    variant = "info",
+    promo,
+    alert,
+    countdown,
+    email,
+    storageKey,
+    className,
+    renderLink,
+    ...props
+  }, ref) => {
+    const { isDismissed, dismiss } = useDismiss(storageKey);
+    if (isDismissed) return null;
+    const LinkComponent = renderLink ?? DefaultLink;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "banner",
+        className: cn(promoBannerVariants({ variant }), className),
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-7xl flex items-center justify-between gap-3 flex-wrap md:flex-nowrap", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 flex-wrap md:flex-nowrap flex-1", children: [
+            variantIcons[variant ?? "info"],
+            alert && /* @__PURE__ */ jsx("span", { className: "font-medium", children: alert.message }),
+            promo && /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { children: promo.message }),
+              promo.cta && /* @__PURE__ */ jsx(
+                LinkComponent,
+                {
+                  href: promo.cta.href,
+                  className: "underline underline-offset-2 font-semibold hover:opacity-80 transition-opacity",
+                  children: promo.cta.label
+                }
+              )
+            ] }),
+            countdown && /* @__PURE__ */ jsx(CountdownBlock, { ...countdown }),
+            email && /* @__PURE__ */ jsx(EmailFormBlock, { ...email })
+          ] }),
+          storageKey && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: dismiss,
+              "aria-label": "Fermer",
+              className: "shrink-0 rounded p-0.5 hover:bg-white/20 transition-colors",
+              children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "size-4", children: /* @__PURE__ */ jsx("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" }) })
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+PromoBanner.displayName = "PromoBanner";
+function DefaultLink({
+  href,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx("a", { href, className, children });
+}
+
+export { PromoBanner, promoBannerVariants };

package/dist/chunk-PRDIS2VR.js

@@ -0,0 +1,227 @@
+'use strict';
+
+var chunkADIDI7AJ_js = require('./chunk-ADIDI7AJ.js');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+var promoBannerVariants = classVarianceAuthority.cva(
+  "w-full px-4 py-2.5 text-sm",
+  {
+    variants: {
+      variant: {
+        promo: "bg-secondary text-white",
+        alert: "bg-amber-400 text-amber-950",
+        maintenance: "bg-red-600 text-white",
+        info: "bg-blue-600 text-white"
+      }
+    },
+    defaultVariants: {
+      variant: "info"
+    }
+  }
+);
+function useCountdown(targetDate) {
+  const computeTimeLeft = React.useCallback(() => {
+    const diff = new Date(targetDate).getTime() - Date.now();
+    if (diff <= 0) return { days: 0, hours: 0, minutes: 0, seconds: 0, isExpired: true };
+    return {
+      days: Math.floor(diff / 864e5),
+      hours: Math.floor(diff % 864e5 / 36e5),
+      minutes: Math.floor(diff % 36e5 / 6e4),
+      seconds: Math.floor(diff % 6e4 / 1e3),
+      isExpired: false
+    };
+  }, [targetDate]);
+  const [timeLeft, setTimeLeft] = React.useState(computeTimeLeft);
+  React.useEffect(() => {
+    const id = setInterval(() => setTimeLeft(computeTimeLeft()), 1e3);
+    return () => clearInterval(id);
+  }, [computeTimeLeft]);
+  return timeLeft;
+}
+function useEmailForm(onSubmit) {
+  const [value, setValue] = React.useState("");
+  const [isLoading, setIsLoading] = React.useState(false);
+  const [isSuccess, setIsSuccess] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    if (!EMAIL_RE.test(value)) {
+      setError("Email invalide");
+      return;
+    }
+    setIsLoading(true);
+    try {
+      await onSubmit(value);
+      setIsSuccess(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Erreur");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return { value, setValue, isLoading, isSuccess, error, handleSubmit };
+}
+function useDismiss(storageKey) {
+  const [isDismissed, setIsDismissed] = React.useState(false);
+  React.useEffect(() => {
+    if (!storageKey) return;
+    try {
+      if (localStorage.getItem(storageKey) === "1") setIsDismissed(true);
+    } catch {
+    }
+  }, [storageKey]);
+  const dismiss = React.useCallback(() => {
+    setIsDismissed(true);
+    if (!storageKey) return;
+    try {
+      localStorage.setItem(storageKey, "1");
+    } catch {
+    }
+  }, [storageKey]);
+  return { isDismissed, dismiss };
+}
+var variantIcons = {
+  promo: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "size-5 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M5 2a2 2 0 0 0-2 2v1a1 1 0 0 0 0 2v1a1 1 0 0 0 0 2v1a1 1 0 0 0 0 2v1a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-1a1 1 0 0 0 0-2v-1a1 1 0 0 0 0-2V7a1 1 0 0 0 0-2V4a2 2 0 0 0-2-2H5Z", clipRule: "evenodd" }) }),
+  alert: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "size-5 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495ZM10 6a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 10 6Zm0 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z", clipRule: "evenodd" }) }),
+  maintenance: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "size-5 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M8.157 2.176a1.5 1.5 0 0 1 1.858-.062l.106.09 1.769 1.768a15.07 15.07 0 0 1 4.138 4.138l1.768 1.769a1.5 1.5 0 0 1 .028 1.964l-.09.106-1.768 1.769a15.07 15.07 0 0 1-4.138 4.138l-1.769 1.768a1.5 1.5 0 0 1-1.964.028l-.106-.09-1.769-1.768a15.07 15.07 0 0 1-4.138-4.138l-1.768-1.769a1.5 1.5 0 0 1-.028-1.964l.09-.106 1.768-1.769a15.07 15.07 0 0 1 4.138-4.138l1.769-1.768ZM10 9a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z", clipRule: "evenodd" }) }),
+  info: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "size-5 shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z", clipRule: "evenodd" }) })
+};
+function CountdownBlock({
+  targetDate,
+  label,
+  expiredLabel
+}) {
+  const { days, hours, minutes, seconds, isExpired } = useCountdown(targetDate);
+  if (isExpired) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: expiredLabel ?? "Expir\xE9" });
+  }
+  const pad = (n) => String(n).padStart(2, "0");
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono tabular-nums font-semibold", children: [
+      days > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        days,
+        "j\xA0"
+      ] }),
+      pad(hours),
+      ":",
+      pad(minutes),
+      ":",
+      pad(seconds)
+    ] })
+  ] });
+}
+function EmailFormBlock({
+  onSubmit,
+  placeholder,
+  submitLabel,
+  successMessage
+}) {
+  const { value, setValue, isLoading, isSuccess, error, handleSubmit } = useEmailForm(onSubmit);
+  if (isSuccess) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-1.5 font-medium", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "size-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z", clipRule: "evenodd" }) }),
+      successMessage ?? "Inscrit !"
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "email",
+        value,
+        onChange: (e) => setValue(e.target.value),
+        placeholder: placeholder ?? "votre@email.com",
+        "aria-label": "Email",
+        className: chunkADIDI7AJ_js.cn(
+          "rounded px-2.5 py-1 text-sm text-gray-900 placeholder:text-gray-400 outline-none",
+          error && "ring-2 ring-red-300"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "submit",
+        disabled: isLoading,
+        className: "rounded bg-white/20 px-3 py-1 text-sm font-medium hover:bg-white/30 transition-colors disabled:opacity-50",
+        children: isLoading ? "\u2026" : submitLabel ?? "OK"
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs opacity-80", children: error })
+  ] });
+}
+var PromoBanner = React__default.default.forwardRef(
+  ({
+    variant = "info",
+    promo,
+    alert,
+    countdown,
+    email,
+    storageKey,
+    className,
+    renderLink,
+    ...props
+  }, ref) => {
+    const { isDismissed, dismiss } = useDismiss(storageKey);
+    if (isDismissed) return null;
+    const LinkComponent = renderLink ?? DefaultLink;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "banner",
+        className: chunkADIDI7AJ_js.cn(promoBannerVariants({ variant }), className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-7xl flex items-center justify-between gap-3 flex-wrap md:flex-nowrap", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 flex-wrap md:flex-nowrap flex-1", children: [
+            variantIcons[variant ?? "info"],
+            alert && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: alert.message }),
+            promo && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: promo.message }),
+              promo.cta && /* @__PURE__ */ jsxRuntime.jsx(
+                LinkComponent,
+                {
+                  href: promo.cta.href,
+                  className: "underline underline-offset-2 font-semibold hover:opacity-80 transition-opacity",
+                  children: promo.cta.label
+                }
+              )
+            ] }),
+            countdown && /* @__PURE__ */ jsxRuntime.jsx(CountdownBlock, { ...countdown }),
+            email && /* @__PURE__ */ jsxRuntime.jsx(EmailFormBlock, { ...email })
+          ] }),
+          storageKey && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: dismiss,
+              "aria-label": "Fermer",
+              className: "shrink-0 rounded p-0.5 hover:bg-white/20 transition-colors",
+              children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", className: "size-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" }) })
+            }
+          )
+        ] })
+      }
+    );
+  }
+);
+PromoBanner.displayName = "PromoBanner";
+function DefaultLink({
+  href,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className, children });
+}
+
+exports.PromoBanner = PromoBanner;
+exports.promoBannerVariants = promoBannerVariants;

package/dist/components/PromoBanner/index.d.mts

@@ -0,0 +1,39 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import React__default from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const promoBannerVariants: (props?: ({
+    variant?: "alert" | "info" | "promo" | "maintenance" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface PromoBannerProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof promoBannerVariants> {
+    promo?: {
+        message: string;
+        cta?: {
+            label: string;
+            href: string;
+        };
+    };
+    alert?: {
+        message: string;
+    };
+    countdown?: {
+        targetDate: string;
+        label?: string;
+        expiredLabel?: string;
+    };
+    email?: {
+        placeholder?: string;
+        submitLabel?: string;
+        onSubmit: (email: string) => Promise<void>;
+        successMessage?: string;
+    };
+    storageKey?: string;
+    renderLink?: (props: {
+        href: string;
+        className?: string;
+        children: React__default.ReactNode;
+    }) => React__default.ReactNode;
+}
+declare const PromoBanner: React__default.ForwardRefExoticComponent<PromoBannerProps & React__default.RefAttributes<HTMLDivElement>>;
+
+export { PromoBanner, type PromoBannerProps, promoBannerVariants };

package/dist/components/PromoBanner/index.d.ts

@@ -0,0 +1,39 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import React__default from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const promoBannerVariants: (props?: ({
+    variant?: "alert" | "info" | "promo" | "maintenance" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface PromoBannerProps extends Omit<React__default.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof promoBannerVariants> {
+    promo?: {
+        message: string;
+        cta?: {
+            label: string;
+            href: string;
+        };
+    };
+    alert?: {
+        message: string;
+    };
+    countdown?: {
+        targetDate: string;
+        label?: string;
+        expiredLabel?: string;
+    };
+    email?: {
+        placeholder?: string;
+        submitLabel?: string;
+        onSubmit: (email: string) => Promise<void>;
+        successMessage?: string;
+    };
+    storageKey?: string;
+    renderLink?: (props: {
+        href: string;
+        className?: string;
+        children: React__default.ReactNode;
+    }) => React__default.ReactNode;
+}
+declare const PromoBanner: React__default.ForwardRefExoticComponent<PromoBannerProps & React__default.RefAttributes<HTMLDivElement>>;
+
+export { PromoBanner, type PromoBannerProps, promoBannerVariants };

package/dist/components/PromoBanner/index.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var chunkPRDIS2VR_js = require('../../chunk-PRDIS2VR.js');
+require('../../chunk-ADIDI7AJ.js');
+
+
+
+Object.defineProperty(exports, "PromoBanner", {
+  enumerable: true,
+  get: function () { return chunkPRDIS2VR_js.PromoBanner; }
+});
+Object.defineProperty(exports, "promoBannerVariants", {
+  enumerable: true,
+  get: function () { return chunkPRDIS2VR_js.promoBannerVariants; }
+});

package/dist/components/PromoBanner/index.mjs

@@ -0,0 +1,2 @@
+export { PromoBanner, promoBannerVariants } from '../../chunk-FNDR3WOZ.mjs';
+import '../../chunk-IMKLN273.mjs';

package/dist/index.d.mts

@@ -42,6 +42,7 @@ export { Toast, ToastProps, toastVariants } from './components/Toast/index.mjs';
 export { Pagination, PaginationProps } from './components/Pagination/index.mjs';
 export { Tag, TagProps, tagVariants } from './components/Tag/index.mjs';
 export { DropdownMenu, DropdownMenuItem, DropdownMenuProps } from './components/DropdownMenu/index.mjs';
+export { PromoBanner, PromoBannerProps, promoBannerVariants } from './components/PromoBanner/index.mjs';
 export { ProgressBar, ProgressBarProps, progressBarVariants, progressFillVariants } from './components/ProgressBar/index.mjs';
 export { Carousel, CarouselProps } from './components/Carousel/index.mjs';
 export { StatusBadge, StatusBadgeProps, statusBadgeVariants } from './components/StatusBadge/index.mjs';

package/dist/index.d.ts

@@ -42,6 +42,7 @@ export { Toast, ToastProps, toastVariants } from './components/Toast/index.js';
 export { Pagination, PaginationProps } from './components/Pagination/index.js';
 export { Tag, TagProps, tagVariants } from './components/Tag/index.js';
 export { DropdownMenu, DropdownMenuItem, DropdownMenuProps } from './components/DropdownMenu/index.js';
+export { PromoBanner, PromoBannerProps, promoBannerVariants } from './components/PromoBanner/index.js';
 export { ProgressBar, ProgressBarProps, progressBarVariants, progressFillVariants } from './components/ProgressBar/index.js';
 export { Carousel, CarouselProps } from './components/Carousel/index.js';
 export { StatusBadge, StatusBadgeProps, statusBadgeVariants } from './components/StatusBadge/index.js';

package/dist/index.js

@@ -1,5 +1,7 @@
 'use strict';
 
+var chunkN3JU7JS7_js = require('./chunk-N3JU7JS7.js');
+var chunk3VU6TPAT_js = require('./chunk-3VU6TPAT.js');
 var chunkI4S3R6C6_js = require('./chunk-I4S3R6C6.js');
 var chunk762LQMWP_js = require('./chunk-762LQMWP.js');
 var chunk7IJOHVNJ_js = require('./chunk-7IJOHVNJ.js');
@@ -7,7 +9,7 @@ var chunkL7OYR6U3_js = require('./chunk-L7OYR6U3.js');
 var chunkVTELEOT7_js = require('./chunk-VTELEOT7.js');
 var chunkDTIYZ3TQ_js = require('./chunk-DTIYZ3TQ.js');
 var chunkE6ZNND75_js = require('./chunk-E6ZNND75.js');
-var chunkN3JU7JS7_js = require('./chunk-N3JU7JS7.js');
+var chunkHS3MAW3G_js = require('./chunk-HS3MAW3G.js');
 var chunkQWDKSY6Y_js = require('./chunk-QWDKSY6Y.js');
 var chunk3R7PT3JG_js = require('./chunk-3R7PT3JG.js');
 var chunkDS4LM7OS_js = require('./chunk-DS4LM7OS.js');
@@ -15,15 +17,14 @@ var chunkNCU5PY34_js = require('./chunk-NCU5PY34.js');
 var chunkXHRDPJTF_js = require('./chunk-XHRDPJTF.js');
 var chunkTT7L3ZU7_js = require('./chunk-TT7L3ZU7.js');
 var chunkDFXXGKMI_js = require('./chunk-DFXXGKMI.js');
-var chunk3VU6TPAT_js = require('./chunk-3VU6TPAT.js');
 var chunkKZSGVMUG_js = require('./chunk-KZSGVMUG.js');
 var chunkNBDPT3XQ_js = require('./chunk-NBDPT3XQ.js');
 var chunkSCGN5H6D_js = require('./chunk-SCGN5H6D.js');
 var chunk6ASRTUXO_js = require('./chunk-6ASRTUXO.js');
 var chunkPG4I4NWO_js = require('./chunk-PG4I4NWO.js');
+var chunkPRDIS2VR_js = require('./chunk-PRDIS2VR.js');
 var chunkGXKON34B_js = require('./chunk-GXKON34B.js');
 var chunkTZHT7NZU_js = require('./chunk-TZHT7NZU.js');
-var chunkHS3MAW3G_js = require('./chunk-HS3MAW3G.js');
 var chunkYN4HPIRC_js = require('./chunk-YN4HPIRC.js');
 var chunkMKOKWME3_js = require('./chunk-MKOKWME3.js');
 var chunkDLOHAW74_js = require('./chunk-DLOHAW74.js');
@@ -44,16 +45,16 @@ var chunkIJIUUBFT_js = require('./chunk-IJIUUBFT.js');
 var chunk3BPC4LNH_js = require('./chunk-3BPC4LNH.js');
 var chunkNWLJ7VQF_js = require('./chunk-NWLJ7VQF.js');
 var chunkYSJAEDMG_js = require('./chunk-YSJAEDMG.js');
-var chunkXXC2YD3D_js = require('./chunk-XXC2YD3D.js');
 var chunkVWFY24XF_js = require('./chunk-VWFY24XF.js');
-var chunkT5FLQQP6_js = require('./chunk-T5FLQQP6.js');
+var chunkXXC2YD3D_js = require('./chunk-XXC2YD3D.js');
 var chunkTDGU5Y2P_js = require('./chunk-TDGU5Y2P.js');
+var chunkT5FLQQP6_js = require('./chunk-T5FLQQP6.js');
 var chunkZ5S7LHMY_js = require('./chunk-Z5S7LHMY.js');
-var chunk6EG6EAHW_js = require('./chunk-6EG6EAHW.js');
 var chunkPND5YKFN_js = require('./chunk-PND5YKFN.js');
+var chunk6EG6EAHW_js = require('./chunk-6EG6EAHW.js');
 var chunkH3JNRTAI_js = require('./chunk-H3JNRTAI.js');
-var chunkYZTVHCLK_js = require('./chunk-YZTVHCLK.js');
 var chunkZAUYE2EI_js = require('./chunk-ZAUYE2EI.js');
+var chunkYZTVHCLK_js = require('./chunk-YZTVHCLK.js');
 var chunkMY6BYO5F_js = require('./chunk-MY6BYO5F.js');
 var chunkP7GAKOCX_js = require('./chunk-P7GAKOCX.js');
 var chunkMCF3EQTV_js = require('./chunk-MCF3EQTV.js');
@@ -64,6 +65,14 @@ var chunkADIDI7AJ_js = require('./chunk-ADIDI7AJ.js');
 
 
 
+Object.defineProperty(exports, "VerticalMarquee", {
+  enumerable: true,
+  get: function () { return chunkN3JU7JS7_js.VerticalMarquee; }
+});
+Object.defineProperty(exports, "Stepper", {
+  enumerable: true,
+  get: function () { return chunk3VU6TPAT_js.Stepper; }
+});
 Object.defineProperty(exports, "Switch", {
   enumerable: true,
   get: function () { return chunkI4S3R6C6_js.Switch; }
@@ -112,9 +121,9 @@ Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function () { return chunkE6ZNND75_js.Tooltip; }
 });
-Object.defineProperty(exports, "VerticalMarquee", {
+Object.defineProperty(exports, "SearchBar", {
   enumerable: true,
-  get: function () { return chunkN3JU7JS7_js.VerticalMarquee; }
+  get: function () { return chunkHS3MAW3G_js.SearchBar; }
 });
 Object.defineProperty(exports, "SegmentedControl", {
   enumerable: true,
@@ -168,10 +177,6 @@ Object.defineProperty(exports, "statusBadgeVariants", {
   enumerable: true,
   get: function () { return chunkDFXXGKMI_js.statusBadgeVariants; }
 });
-Object.defineProperty(exports, "Stepper", {
-  enumerable: true,
-  get: function () { return chunk3VU6TPAT_js.Stepper; }
-});
 Object.defineProperty(exports, "MobileMenu", {
   enumerable: true,
   get: function () { return chunkKZSGVMUG_js.MobileMenu; }
@@ -200,6 +205,14 @@ Object.defineProperty(exports, "progressFillVariants", {
   enumerable: true,
   get: function () { return chunkPG4I4NWO_js.progressFillVariants; }
 });
+Object.defineProperty(exports, "PromoBanner", {
+  enumerable: true,
+  get: function () { return chunkPRDIS2VR_js.PromoBanner; }
+});
+Object.defineProperty(exports, "promoBannerVariants", {
+  enumerable: true,
+  get: function () { return chunkPRDIS2VR_js.promoBannerVariants; }
+});
 Object.defineProperty(exports, "RadioGroup", {
   enumerable: true,
   get: function () { return chunkGXKON34B_js.RadioGroup; }
@@ -208,10 +221,6 @@ Object.defineProperty(exports, "Rating", {
   enumerable: true,
   get: function () { return chunkTZHT7NZU_js.Rating; }
 });
-Object.defineProperty(exports, "SearchBar", {
-  enumerable: true,
-  get: function () { return chunkHS3MAW3G_js.SearchBar; }
-});
 Object.defineProperty(exports, "IconBadge", {
   enumerable: true,
   get: function () { return chunkYN4HPIRC_js.IconBadge; }
@@ -304,22 +313,22 @@ Object.defineProperty(exports, "DetailList", {
   enumerable: true,
   get: function () { return chunkYSJAEDMG_js.DetailList; }
 });
-Object.defineProperty(exports, "Divider", {
-  enumerable: true,
-  get: function () { return chunkXXC2YD3D_js.Divider; }
-});
 Object.defineProperty(exports, "Drawer", {
   enumerable: true,
   get: function () { return chunkVWFY24XF_js.Drawer; }
 });
-Object.defineProperty(exports, "DropdownMenu", {
+Object.defineProperty(exports, "Divider", {
   enumerable: true,
-  get: function () { return chunkT5FLQQP6_js.DropdownMenu; }
+  get: function () { return chunkXXC2YD3D_js.Divider; }
 });
 Object.defineProperty(exports, "DualRangeSlider", {
   enumerable: true,
   get: function () { return chunkTDGU5Y2P_js.DualRangeSlider; }
 });
+Object.defineProperty(exports, "DropdownMenu", {
+  enumerable: true,
+  get: function () { return chunkT5FLQQP6_js.DropdownMenu; }
+});
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
   get: function () { return chunkZ5S7LHMY_js.Badge; }
@@ -328,6 +337,10 @@ Object.defineProperty(exports, "badgeVariants", {
   enumerable: true,
   get: function () { return chunkZ5S7LHMY_js.badgeVariants; }
 });
+Object.defineProperty(exports, "BottomNavBar", {
+  enumerable: true,
+  get: function () { return chunkPND5YKFN_js.BottomNavBar; }
+});
 Object.defineProperty(exports, "Banner", {
   enumerable: true,
   get: function () { return chunk6EG6EAHW_js.Banner; }
@@ -336,10 +349,6 @@ Object.defineProperty(exports, "bannerVariants", {
   enumerable: true,
   get: function () { return chunk6EG6EAHW_js.bannerVariants; }
 });
-Object.defineProperty(exports, "BottomNavBar", {
-  enumerable: true,
-  get: function () { return chunkPND5YKFN_js.BottomNavBar; }
-});
 Object.defineProperty(exports, "Breadcrumb", {
   enumerable: true,
   get: function () { return chunkH3JNRTAI_js.Breadcrumb; }
@@ -348,14 +357,6 @@ Object.defineProperty(exports, "breadcrumbVariants", {
   enumerable: true,
   get: function () { return chunkH3JNRTAI_js.breadcrumbVariants; }
 });
-Object.defineProperty(exports, "Button", {
-  enumerable: true,
-  get: function () { return chunkYZTVHCLK_js.Button; }
-});
-Object.defineProperty(exports, "buttonVariants", {
-  enumerable: true,
-  get: function () { return chunkYZTVHCLK_js.buttonVariants; }
-});
 Object.defineProperty(exports, "Card", {
   enumerable: true,
   get: function () { return chunkZAUYE2EI_js.Card; }
@@ -384,6 +385,14 @@ Object.defineProperty(exports, "cardVariants", {
   enumerable: true,
   get: function () { return chunkZAUYE2EI_js.cardVariants; }
 });
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function () { return chunkYZTVHCLK_js.Button; }
+});
+Object.defineProperty(exports, "buttonVariants", {
+  enumerable: true,
+  get: function () { return chunkYZTVHCLK_js.buttonVariants; }
+});
 Object.defineProperty(exports, "CardList", {
   enumerable: true,
   get: function () { return chunkMY6BYO5F_js.CardList; }

package/dist/index.mjs

@@ -1,3 +1,5 @@
+export { VerticalMarquee } from './chunk-JP5ZR2HI.mjs';
+export { Stepper } from './chunk-2ASKBL63.mjs';
 export { Switch, switchThumbVariants, switchTrackVariants } from './chunk-DMCMWOBJ.mjs';
 export { Tabs } from './chunk-VOZPGXQD.mjs';
 export { Tag, tagVariants } from './chunk-WOG6V7OW.mjs';
@@ -5,7 +7,7 @@ export { Textarea, textareaVariants } from './chunk-ZZ4EWC53.mjs';
 export { Toast, toastVariants } from './chunk-YVTUUNAX.mjs';
 export { Toggle } from './chunk-2AB5ZHY5.mjs';
 export { Tooltip } from './chunk-2MJTZ6RR.mjs';
-export { VerticalMarquee } from './chunk-JP5ZR2HI.mjs';
+export { SearchBar } from './chunk-KQK7LFWM.mjs';
 export { SegmentedControl } from './chunk-36Y7UU32.mjs';
 export { Select, selectVariants } from './chunk-333YD5QI.mjs';
 export { Sidebar } from './chunk-MPL35D5G.mjs';
@@ -13,15 +15,14 @@ export { Skeleton, SkeletonCircle, SkeletonImage, SkeletonText } from './chunk-P
 export { Spinner, spinnerVariants } from './chunk-NCSFXSOZ.mjs';
 export { StatCard } from './chunk-O2W7NR33.mjs';
 export { StatusBadge, statusBadgeVariants } from './chunk-FZ7UNXSC.mjs';
-export { Stepper } from './chunk-2ASKBL63.mjs';
 export { MobileMenu } from './chunk-R4DC7XPP.mjs';
 export { Modal } from './chunk-74B2EGKT.mjs';
 export { Pagination } from './chunk-XQVODPHL.mjs';
 export { PriceDisplay } from './chunk-DGEXT7PN.mjs';
 export { ProgressBar, progressBarVariants, progressFillVariants } from './chunk-UGYMWWKT.mjs';
+export { PromoBanner, promoBannerVariants } from './chunk-FNDR3WOZ.mjs';
 export { RadioGroup } from './chunk-F2BUMJYW.mjs';
 export { Rating } from './chunk-SGDC4IVX.mjs';
-export { SearchBar } from './chunk-KQK7LFWM.mjs';
 export { IconBadge, iconBadgeVariants } from './chunk-I4WCNTNP.mjs';
 export { ImageGallery } from './chunk-QU6ZRLKO.mjs';
 export { ImageWithFallback } from './chunk-BUXVK2HE.mjs';
@@ -42,16 +43,16 @@ export { Checkbox } from './chunk-EEIPCJQ2.mjs';
 export { Counter } from './chunk-TNGW36OC.mjs';
 export { DatePickerInput, DateRangePicker } from './chunk-RQGC6RPI.mjs';
 export { DetailList } from './chunk-76DZXGKJ.mjs';
-export { Divider } from './chunk-E4B6LXK7.mjs';
 export { Drawer } from './chunk-ZLF7IL3Y.mjs';
-export { DropdownMenu } from './chunk-Q7BKR6O7.mjs';
+export { Divider } from './chunk-E4B6LXK7.mjs';
 export { DualRangeSlider } from './chunk-ERL3WXNY.mjs';
+export { DropdownMenu } from './chunk-Q7BKR6O7.mjs';
 export { Badge, badgeVariants } from './chunk-XZU2SISM.mjs';
-export { Banner, bannerVariants } from './chunk-LFIZX2S6.mjs';
 export { BottomNavBar } from './chunk-UQRQZLMQ.mjs';
+export { Banner, bannerVariants } from './chunk-LFIZX2S6.mjs';
 export { Breadcrumb, breadcrumbVariants } from './chunk-UKCH6RYL.mjs';
-export { Button, buttonVariants } from './chunk-4U5MNA3B.mjs';
 export { Card, CardContent, CardDescription, CardImage, CardTitle, cardImageVariants, cardVariants } from './chunk-V5J2XLPD.mjs';
+export { Button, buttonVariants } from './chunk-4U5MNA3B.mjs';
 export { CardList } from './chunk-RJWHPHHX.mjs';
 export { Carousel } from './chunk-OOPP4ES2.mjs';
 export { Accordion } from './chunk-NZ7GF6RF.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dododog/ui",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "React UI component library for DodoDog — pet-friendly travel platform",
   "sideEffects": false,
   "license": "MIT",
@@ -223,6 +223,11 @@
       "import": "./dist/components/PriceDisplay/index.mjs",
       "require": "./dist/components/PriceDisplay/index.js"
     },
+    "./promo-banner": {
+      "types": "./dist/components/PromoBanner/index.d.ts",
+      "import": "./dist/components/PromoBanner/index.mjs",
+      "require": "./dist/components/PromoBanner/index.js"
+    },
     "./progress-bar": {
       "types": "./dist/components/ProgressBar/index.d.ts",
       "import": "./dist/components/ProgressBar/index.mjs",