@rojaostudio/ds 1.0.0

package/dist/components/paywall-banner.js

@@ -0,0 +1,42 @@
+import "../chunk-ORMEWXMH.js";
+import { Lock, AlertTriangle } from "lucide-react";
+const STYLES = {
+  warn: {
+    container: "border-warning-border bg-warning-soft",
+    title: "text-warning-text",
+    desc: "text-warning-text/85",
+    cta: "bg-surface-default border border-warning-border hover:bg-warning-soft text-warning-text",
+    Icon: AlertTriangle,
+    iconColor: "text-warning-text"
+  },
+  blocked: {
+    container: "border-danger-border bg-danger-soft",
+    title: "text-danger-text",
+    desc: "text-danger-text/85",
+    cta: "bg-danger text-fg-inverse hover:bg-danger-text",
+    Icon: Lock,
+    iconColor: "text-danger-text"
+  }
+};
+function DefaultLink({ href, className, children }) {
+  return /* @__PURE__ */ React.createElement("a", { href, className }, children);
+}
+function PaywallBanner({
+  variant,
+  title,
+  description,
+  ctaLabel = "Ver planos",
+  ctaHref,
+  onCta,
+  linkAs: LinkAs = DefaultLink,
+  className = ""
+}) {
+  const s = STYLES[variant];
+  const Icon = s.Icon;
+  const ctaClass = ["text-caption font-semibold px-3 py-1.5 rounded-(--radius-card) shrink-0 transition-colors", s.cta].join(" ");
+  const cta = ctaHref ? /* @__PURE__ */ React.createElement(LinkAs, { href: ctaHref, className: ctaClass }, ctaLabel, " \u2192") : onCta ? /* @__PURE__ */ React.createElement("button", { type: "button", onClick: onCta, className: ctaClass }, ctaLabel, " \u2192") : null;
+  return /* @__PURE__ */ React.createElement("div", { className: ["rounded-(--radius-card) border px-4 py-3 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2", s.container, className].join(" ") }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-2.5 min-w-0" }, /* @__PURE__ */ React.createElement(Icon, { size: 18, className: ["shrink-0 mt-0.5", s.iconColor].join(" ") }), /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("p", { className: ["text-label font-semibold", s.title].join(" ") }, title), /* @__PURE__ */ React.createElement("div", { className: ["text-caption mt-0.5", s.desc].join(" ") }, description))), cta);
+}
+export {
+  PaywallBanner
+};

package/dist/components/paywall.d.ts

@@ -0,0 +1,44 @@
+import * as react from 'react';
+import { ComponentType, ReactNode } from 'react';
+import { EmptyStateIcon } from './empty-state.js';
+import 'lucide-react';
+
+type PaywallReason = 'feature' | 'limit' | 'trial_value';
+type LinkComponent = ComponentType<{
+    href: string;
+    className?: string;
+    onClick?: () => void;
+    children: ReactNode;
+}>;
+interface PaywallContentProps {
+    /** Ícone por categoria da feature (catalog/channels/commercial/operation/
+     *  intelligence/billing). Default: lock. */
+    icon?: EmptyStateIcon;
+    title: string;
+    description?: string;
+    /** 'feature' → "Disponível no {planLabel}"; 'limit' → "Limite atingido".
+     *  Sem cor de alerta — friendly, não erro. */
+    reason?: PaywallReason;
+    /** Rótulo do plano mínimo (ex.: "Essencial") — usado quando reason='feature'. */
+    planLabel?: string;
+    ctaLabel?: string;
+    ctaHref?: string;
+    onCta?: () => void;
+    /** Componente de link do app (next/link). Sem ele → âncora nativa <a>. */
+    linkAs?: LinkComponent;
+}
+/** Visual puro do paywall — compartilhado por PaywallState e PaywallModal. */
+declare function PaywallContent({ icon, title, description, reason, planLabel, ctaLabel, ctaHref, onCta, linkAs: Link, }: PaywallContentProps): react.JSX.Element;
+interface PaywallStateProps extends PaywallContentProps {
+    className?: string;
+}
+/** Estado-de-página: ocupa a altura disponível, mesmo visual do modal. */
+declare function PaywallState({ className, ...content }: PaywallStateProps): react.JSX.Element;
+interface PaywallModalProps extends PaywallContentProps {
+    open: boolean;
+    onClose: () => void;
+}
+/** Modal compacto: o controle de ação fica visível na tela; ao clicar, abre isto. */
+declare function PaywallModal({ open, onClose, ...content }: PaywallModalProps): react.JSX.Element;
+
+export { PaywallContent, type PaywallContentProps, PaywallModal, type PaywallModalProps, type PaywallReason, PaywallState, type PaywallStateProps };

package/dist/components/paywall.js

@@ -0,0 +1,55 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { Lock, Sparkles } from "lucide-react";
+import { ICON_MAP } from "./empty-state.js";
+import { Modal } from "./modal.js";
+const CTA_CLASS = "inline-flex items-center justify-center w-full rounded-(--radius-control) px-4 py-3 text-label font-semibold bg-brand-primary text-brand-on-primary hover:bg-brand-hover transition-colors";
+function planLineText(reason, planLabel) {
+  if (reason === "trial_value") return "Incluso no seu teste Pro";
+  if (reason === "limit") return "Limite atingido";
+  return planLabel ? `Dispon\xEDvel no ${planLabel}` : "Fa\xE7a upgrade";
+}
+function PaywallContent({
+  icon = "lock",
+  title,
+  description,
+  reason = "feature",
+  planLabel,
+  ctaLabel = "Ver planos",
+  ctaHref,
+  onCta,
+  linkAs: Link
+}) {
+  var _a;
+  const Icon = (_a = ICON_MAP[icon]) != null ? _a : Lock;
+  const isTrial = reason === "trial_value";
+  const cta = ctaHref && Link ? /* @__PURE__ */ React.createElement(Link, { href: ctaHref, className: CTA_CLASS, onClick: onCta }, ctaLabel) : ctaHref ? /* @__PURE__ */ React.createElement("a", { href: ctaHref, className: CTA_CLASS, onClick: onCta }, ctaLabel) : /* @__PURE__ */ React.createElement("button", { type: "button", className: CTA_CLASS, onClick: onCta }, ctaLabel);
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center text-center px-2" }, /* @__PURE__ */ React.createElement("div", { className: "relative mb-4 text-fg-secondary" }, /* @__PURE__ */ React.createElement(Icon, { size: 52, strokeWidth: 1.25 }), /* @__PURE__ */ React.createElement("span", { className: `absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full ${isTrial ? "bg-amber-500 text-white" : "bg-brand-primary text-brand-on-primary"}` }, isTrial ? /* @__PURE__ */ React.createElement(Sparkles, { size: 12, strokeWidth: 2.5 }) : /* @__PURE__ */ React.createElement(Lock, { size: 12, strokeWidth: 2.5 }))), /* @__PURE__ */ React.createElement("span", { className: `inline-flex items-center rounded-full px-2.5 py-1 text-caption font-medium ${isTrial ? "bg-amber-100 text-amber-900" : "bg-surface-raised text-fg-secondary"}` }, planLineText(reason, planLabel)), /* @__PURE__ */ React.createElement("p", { className: "text-body font-semibold text-fg-primary mt-3 mb-1.5" }, title), description && /* @__PURE__ */ React.createElement("p", { className: "text-label text-fg-muted max-w-sm leading-relaxed mb-5" }, description), /* @__PURE__ */ React.createElement("div", { className: "w-full max-w-xs" }, cta));
+}
+function PaywallState(_a) {
+  var _b = _a, { className = "" } = _b, content = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: ["flex flex-col items-center justify-center min-h-[320px] flex-1 py-10", className].filter(Boolean).join(" ")
+    },
+    /* @__PURE__ */ React.createElement(PaywallContent, __spreadValues({}, content))
+  );
+}
+function PaywallModal(_c) {
+  var _d = _c, { open, onClose } = _d, content = __objRest(_d, ["open", "onClose"]);
+  return /* @__PURE__ */ React.createElement(Modal, { open, onClose, size: "sm" }, /* @__PURE__ */ React.createElement("div", { className: "py-2" }, /* @__PURE__ */ React.createElement(PaywallContent, __spreadProps(__spreadValues({}, content), { onCta: () => {
+    var _a;
+    (_a = content.onCta) == null ? void 0 : _a.call(content);
+    onClose();
+  } }))));
+}
+export {
+  PaywallContent,
+  PaywallModal,
+  PaywallState
+};

package/dist/components/phone-frame.d.ts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+
+interface PhoneFrameProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare function PhoneFrame({ children, className }: PhoneFrameProps): react.JSX.Element;
+
+export { PhoneFrame, type PhoneFrameProps };

package/dist/components/phone-frame.js

@@ -0,0 +1,18 @@
+import "../chunk-ORMEWXMH.js";
+function PhoneFrame({ children, className = "" }) {
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: [
+        // rojao-detect-disable over-rounding
+        "relative rounded-[2.5rem] border-[6px] border-(--text-primary)",
+        "bg-white overflow-hidden shadow-2xl",
+        className
+      ].filter(Boolean).join(" ")
+    },
+    /* @__PURE__ */ React.createElement("div", { className: "h-full overflow-y-auto overflow-x-hidden scrollbar-none" }, children)
+  );
+}
+export {
+  PhoneFrame
+};

package/dist/components/phone-input.d.ts

@@ -0,0 +1,24 @@
+import * as react from 'react';
+import { InputHTMLAttributes } from 'react';
+
+interface PhoneInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue' | 'size'> {
+    label?: string;
+    helper?: string;
+    error?: string;
+    required?: boolean;
+    optional?: boolean;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+}
+/**
+ * PhoneInput — telefone internacional com seletor de país BUSCÁVEL.
+ *
+ * Seletor de país = Combobox do DS (busca por nome/código + bandeira), em vez do
+ * dropdown nativo do react-international-phone (que não tem busca e estourava a tela).
+ * A mecânica de máscara/parse/E.164 vem do hook `usePhoneInput` da lib.
+ * Submete E.164 via input hidden (prop `name`); onChange entrega E.164.
+ */
+declare function PhoneInput({ label, helper, error, required, optional, value, defaultValue, placeholder, name, onChange, id, }: PhoneInputProps): react.JSX.Element;
+
+export { PhoneInput, type PhoneInputProps };

package/dist/components/phone-input.js

@@ -0,0 +1,92 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { useId, useMemo, useState } from "react";
+import { usePhoneInput, defaultCountries, parseCountry, FlagImage } from "react-international-phone";
+import { Combobox } from "./combobox.js";
+function normalizeToE164(raw) {
+  if (!raw) return "";
+  const digits = raw.replace(/\D/g, "");
+  if (raw.startsWith("+")) return raw;
+  if (digits.length >= 12) return `+${digits}`;
+  return `+55${digits}`;
+}
+function PhoneInput({
+  label,
+  helper,
+  error,
+  required,
+  optional,
+  value,
+  defaultValue = "",
+  placeholder,
+  name,
+  onChange,
+  id
+}) {
+  const generatedId = useId();
+  const inputId = id != null ? id : generatedId;
+  const controlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(() => normalizeToE164(defaultValue));
+  const displayValue = controlled ? value : internalValue;
+  const { inputValue, country, setCountry, handlePhoneValueChange, inputRef } = usePhoneInput({
+    defaultCountry: "br",
+    value: displayValue,
+    countries: defaultCountries,
+    // DDI nunca é editável pelo campo: o input mostra só o número nacional e o
+    // código do país vira prefixo estático — troca de país SÓ pelo seletor.
+    // data.phone JÁ vem em E.164 completo (a flag afeta apenas o display);
+    // recompor aqui duplicaria o DDI e criaria feedback loop.
+    disableDialCodeAndPrefix: true,
+    onChange: (data) => {
+      const v = data.phone === `+${data.country.dialCode}` ? "" : data.phone;
+      if (!controlled) setInternalValue(v);
+      onChange == null ? void 0 : onChange(v);
+    }
+  });
+  const countryOptions = useMemo(
+    () => defaultCountries.map((c) => {
+      const p = parseCountry(c);
+      return {
+        value: p.iso2,
+        label: p.name,
+        description: `+${p.dialCode}`,
+        icon: /* @__PURE__ */ React.createElement(FlagImage, { iso2: p.iso2, size: "18px" })
+      };
+    }),
+    []
+  );
+  const errorBorder = error ? "border-danger focus-within:border-danger focus-within:ring-2 focus-within:ring-danger/20" : "border-stroke-control focus-within:border-stroke-focus focus-within:ring-2 focus-within:ring-stroke-focus/20";
+  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1.5 w-full" }, label && /* @__PURE__ */ React.createElement("label", { htmlFor: inputId, className: "inline-flex items-center gap-1 text-label font-medium text-fg-primary" }, /* @__PURE__ */ React.createElement("span", null, label), required && /* @__PURE__ */ React.createElement("span", { className: "text-danger", "aria-label": "obrigat\xF3rio" }, "*"), optional && !required && /* @__PURE__ */ React.createElement("span", { className: "text-fg-muted font-normal" }, "(opcional)")), /* @__PURE__ */ React.createElement("div", { className: "flex items-stretch gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "shrink-0" }, /* @__PURE__ */ React.createElement(
+    Combobox,
+    {
+      width: "hug",
+      options: countryOptions,
+      value: country.iso2,
+      onChange: (iso2) => {
+        if (iso2) setCountry(iso2);
+      },
+      placeholder: "Pa\xEDs",
+      "aria-label": "Pa\xEDs",
+      dropdownMinWidth: 272,
+      triggerContent: (sel) => {
+        var _a;
+        return /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center [&_svg]:size-4 [&_img]:rounded-(--radius-sm)" }, (_a = sel == null ? void 0 : sel.icon) != null ? _a : /* @__PURE__ */ React.createElement("span", { className: "text-fg-placeholder" }, "Pa\xEDs"));
+      }
+    }
+  )), /* @__PURE__ */ React.createElement("div", { className: ["flex-1 min-w-0 flex items-center rounded-(--radius-control) border bg-surface-default h-10 transition-colors", errorBorder].join(" ") }, /* @__PURE__ */ React.createElement("span", { className: "pl-3 pr-1.5 text-label text-fg-muted select-none shrink-0", "aria-hidden": true }, "+", country.dialCode), /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      id: inputId,
+      ref: inputRef,
+      type: "tel",
+      value: inputValue,
+      onChange: handlePhoneValueChange,
+      placeholder,
+      "aria-invalid": error ? true : void 0,
+      className: "flex-1 min-w-0 bg-transparent pr-3 h-full text-label text-fg-primary placeholder:text-fg-placeholder outline-none"
+    }
+  ))), name && /* @__PURE__ */ React.createElement("input", { type: "hidden", name, value: displayValue }), (error || helper) && /* @__PURE__ */ React.createElement("p", { className: ["text-caption", error ? "text-danger-text" : "text-fg-muted"].join(" ") }, error != null ? error : helper));
+}
+export {
+  PhoneInput
+};

package/dist/components/pix-icon.d.ts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+import { SVGProps } from 'react';
+
+declare function PixIcon({ size, ...props }: {
+    size?: number;
+} & SVGProps<SVGSVGElement>): react.JSX.Element;
+
+export { PixIcon };

package/dist/components/pix-icon.js

@@ -0,0 +1,24 @@
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+function PixIcon(_a) {
+  var _b = _a, { size = 16 } = _b, props = __objRest(_b, ["size"]);
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    __spreadValues({
+      width: size,
+      height: size,
+      viewBox: "0 0 512 512",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true"
+    }, props),
+    /* @__PURE__ */ React.createElement("path", { d: "M242.4 292.5c5.4-5.4 14.7-5.4 20.1 0l77 77c14.2 14.2 33.1 22 53.1 22h15.1l-97.1 97.1c-30.3 30.3-79.5 30.3-109.8 0L103.3 391.2h9.3c20 0 38.9-7.8 53.1-22l76.7-76.7z" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M262.5 218.9c-5.4 5.4-14.7 5.4-20.1 0l-76.7-76.7c-14.2-14.2-33.1-22-53.1-22h-9.3l97.4-97.4c30.3-30.3 79.5-30.3 109.8 0l97.1 97.1h-15.1c-20 0-38.9 7.8-53.1 22l-77 77z" }),
+    /* @__PURE__ */ React.createElement("path", { d: "M112.6 142.7c13.8 0 27.4 5.6 37.2 15.4l76.7 76.7c7.3 7.3 17 10.9 26.6 10.9s19.3-3.6 26.6-10.9l77-77c9.8-9.8 23.4-15.4 37.2-15.4h37.2l58.4 58.4c30.3 30.3 30.3 79.5 0 109.8l-58.4 58.4h-37.2c-13.8 0-27.4-5.6-37.2-15.4l-77-77c-14.2-14.2-39-14.2-53.2 0l-76.7 76.7c-9.8 9.8-23.4 15.4-37.2 15.4H75.4L17 310.7c-30.3-30.3-30.3-79.5 0-109.8l58.4-58.4h37.2z" })
+  );
+}
+export {
+  PixIcon
+};

package/dist/components/popover.d.ts

@@ -0,0 +1,44 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * Popover — overlay flutuante ancorado num trigger. Base genérica de Menu,
+ * HoverCard, custom dropdowns. Não tem opinião sobre conteúdo.
+ *
+ * Uso:
+ *   <Popover
+ *     trigger={<Button>Abrir</Button>}
+ *     placement="bottom-start"
+ *   >
+ *     <div className="p-3 bg-surface-default rounded-md shadow-lg">
+ *       Conteúdo aqui
+ *     </div>
+ *   </Popover>
+ *
+ * Recursos: clique fora fecha, ESC fecha, focus trap opcional, posicionamento
+ * com flip automático quando não cabe (top → bottom, etc).
+ */
+type PopoverPlacement = 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end';
+interface PopoverProps {
+    trigger: ReactNode;
+    children: ReactNode | ((api: {
+        close: () => void;
+    }) => ReactNode);
+    /** Posição preferida. flip automático quando não cabe na viewport. */
+    placement?: PopoverPlacement;
+    /** Distância em px entre trigger e popover. default = 4. */
+    offset?: number;
+    /** Controla externamente. Se omitido, gerencia interno. */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Fecha ao clicar fora. default = true. */
+    closeOnOutsideClick?: boolean;
+    /** Fecha ao apertar ESC. default = true. */
+    closeOnEsc?: boolean;
+    className?: string;
+    /** Classe CSS do wrapper do trigger. default = "inline-block". */
+    triggerClassName?: string;
+}
+declare function Popover({ trigger, children, placement, offset, open: openProp, onOpenChange, closeOnOutsideClick, closeOnEsc, className, triggerClassName, }: PopoverProps): react.JSX.Element;
+
+export { Popover, type PopoverPlacement, type PopoverProps };

package/dist/components/popover.js

@@ -0,0 +1,140 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { useEffect, useRef, useState, useId } from "react";
+import { createPortal } from "react-dom";
+function calcPosition(triggerRect, popRect, placement, offset) {
+  const { innerWidth: vw, innerHeight: vh } = window;
+  let [side, cross = "center"] = placement.split("-");
+  let top = 0, left = 0;
+  const place = (s, c) => {
+    if (s === "bottom") top = triggerRect.bottom + offset;
+    else if (s === "top") top = triggerRect.top - popRect.height - offset;
+    else if (s === "left") {
+      left = triggerRect.left - popRect.width - offset;
+    } else if (s === "right") {
+      left = triggerRect.right + offset;
+    }
+    if (s === "top" || s === "bottom") {
+      if (c === "start") left = triggerRect.left;
+      else if (c === "end") left = triggerRect.right - popRect.width;
+      else left = triggerRect.left + (triggerRect.width - popRect.width) / 2;
+    } else {
+      if (c === "start") top = triggerRect.top;
+      else if (c === "end") top = triggerRect.bottom - popRect.height;
+      else top = triggerRect.top + (triggerRect.height - popRect.height) / 2;
+    }
+  };
+  place(side, cross);
+  if (side === "bottom" && top + popRect.height > vh) {
+    side = "top";
+    place(side, cross);
+  } else if (side === "top" && top < 0) {
+    side = "bottom";
+    place(side, cross);
+  }
+  if (side === "right" && left + popRect.width > vw) {
+    side = "left";
+    place(side, cross);
+  } else if (side === "left" && left < 0) {
+    side = "right";
+    place(side, cross);
+  }
+  left = Math.max(8, Math.min(left, vw - popRect.width - 8));
+  top = Math.max(8, Math.min(top, vh - popRect.height - 8));
+  return { top, left, placement: `${side}${cross !== "center" ? `-${cross}` : ""}` };
+}
+function Popover({
+  trigger,
+  children,
+  placement = "bottom-start",
+  offset = 4,
+  open: openProp,
+  onOpenChange,
+  closeOnOutsideClick = true,
+  closeOnEsc = true,
+  className = "",
+  triggerClassName
+}) {
+  var _a, _b;
+  const [internalOpen, setInternalOpen] = useState(false);
+  const [position, setPosition] = useState(null);
+  const [mounted, setMounted] = useState(false);
+  const triggerRef = useRef(null);
+  const popRef = useRef(null);
+  const id = useId();
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : internalOpen;
+  const setOpen = (next) => {
+    if (!isControlled) setInternalOpen(next);
+    onOpenChange == null ? void 0 : onOpenChange(next);
+  };
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!open || !triggerRef.current || !popRef.current) return;
+    const update = () => {
+      if (!triggerRef.current || !popRef.current) return;
+      const trig = triggerRef.current.getBoundingClientRect();
+      const pop = popRef.current.getBoundingClientRect();
+      setPosition(calcPosition(trig, pop, placement, offset));
+    };
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [open, placement, offset]);
+  useEffect(() => {
+    if (!open) return;
+    const handleClick = (e) => {
+      var _a2, _b2;
+      if (!closeOnOutsideClick) return;
+      const t = e.target;
+      if (((_a2 = popRef.current) == null ? void 0 : _a2.contains(t)) || ((_b2 = triggerRef.current) == null ? void 0 : _b2.contains(t))) return;
+      setOpen(false);
+    };
+    const handleKey = (e) => {
+      if (closeOnEsc && e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [open, closeOnOutsideClick, closeOnEsc]);
+  const close = () => setOpen(false);
+  const toggle = () => setOpen(!open);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref: triggerRef,
+      onClick: toggle,
+      role: "none",
+      className: triggerClassName != null ? triggerClassName : "inline-block"
+    },
+    trigger
+  ), mounted && open && createPortal(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: popRef,
+        id,
+        className: ["fixed z-[1000]", className].join(" "),
+        style: {
+          top: (_a = position == null ? void 0 : position.top) != null ? _a : -9999,
+          left: (_b = position == null ? void 0 : position.left) != null ? _b : -9999,
+          visibility: position ? "visible" : "hidden"
+        }
+      },
+      typeof children === "function" ? children({ close }) : children
+    ),
+    document.body
+  ));
+}
+export {
+  Popover
+};

package/dist/components/pricing-card.d.ts

@@ -0,0 +1,42 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * PricingCard — cartão de plano para páginas de preço (marketing + billing).
+ *
+ * Props-based para casar com o shape de um catálogo (`/api/public/plans`):
+ * nome, preço já formatado, lista de features e um slot de CTA (o consumidor
+ * injeta o próprio link/botão — o DS não conhece roteamento nem analytics).
+ *
+ * `recommended` inverte a superfície (destaque) e mostra o selo de recomendação.
+ * `badge` é um acento independente (ex.: "14 dias grátis") em outline.
+ *
+ *   <PricingCard
+ *     name="Essencial" price="R$49,90" period="/mês"
+ *     description="Para quem vende todo dia."
+ *     features={['Produtos ilimitados', 'Controle de estoque']}
+ *     recommended
+ *     cta={<a href="/register">Começar</a>}
+ *   />
+ */
+interface PricingCardProps {
+    name: string;
+    /** Preço já formatado pelo consumidor (ex.: "R$49,90", "R$0", "Grátis"). */
+    price: string;
+    /** Sufixo do preço (ex.: "/mês"). Omitido em planos sem recorrência. */
+    period?: string;
+    description?: string;
+    features: string[];
+    /** Plano em destaque: superfície invertida + selo de recomendação. */
+    recommended?: boolean;
+    /** Texto do selo de recomendação. default = "Recomendado". */
+    recommendedLabel?: string;
+    /** Selo de acento independente do destaque (ex.: trial). Renderiza em outline. */
+    badge?: string;
+    /** Slot do CTA — o consumidor injeta <a>/<Link>/<button> já estilizado ou nu. */
+    cta: ReactNode;
+    className?: string;
+}
+declare function PricingCard({ name, price, period, description, features, recommended, recommendedLabel, badge, cta, className, }: PricingCardProps): react.JSX.Element;
+
+export { PricingCard, type PricingCardProps };

package/dist/components/pricing-card.js

@@ -0,0 +1,29 @@
+import "../chunk-ORMEWXMH.js";
+import { Check } from "lucide-react";
+const CHECK_TONE = {
+  recommended: "text-brand-on-accent",
+  default: "text-brand-accent"
+};
+function PricingCard({
+  name,
+  price,
+  period,
+  description,
+  features,
+  recommended = false,
+  recommendedLabel = "Recomendado",
+  badge,
+  cta,
+  className = ""
+}) {
+  const surface = recommended ? "bg-surface-invert text-fg-inverse border border-transparent" : "bg-surface-default text-fg-primary border border-stroke-default";
+  const nameTone = recommended ? "text-fg-inverse/70" : "text-fg-muted";
+  const descTone = recommended ? "text-fg-inverse/70" : "text-fg-muted";
+  const periodTone = recommended ? "text-fg-inverse/60" : "text-fg-muted";
+  const featTone = recommended ? "text-fg-inverse/85" : "text-fg-secondary";
+  const check = recommended ? CHECK_TONE.recommended : CHECK_TONE.default;
+  return /* @__PURE__ */ React.createElement("div", { className: `relative flex flex-col rounded-(--radius-card) p-6 ${surface} ${className}` }, recommended && /* @__PURE__ */ React.createElement("span", { className: "absolute -top-3 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-(--radius-badge) bg-brand-accent px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-brand-on-accent" }, recommendedLabel), badge && /* @__PURE__ */ React.createElement("span", { className: "absolute -top-3 right-4 whitespace-nowrap rounded-(--radius-badge) border border-brand-accent bg-surface-default px-3 py-1 text-[10px] font-bold uppercase tracking-widest text-brand-accent" }, badge), /* @__PURE__ */ React.createElement("p", { className: `text-caption font-semibold uppercase tracking-widest ${nameTone}` }, name), /* @__PURE__ */ React.createElement("div", { className: "mt-3 mb-1 flex items-baseline gap-1" }, /* @__PURE__ */ React.createElement("span", { className: "text-4xl font-bold leading-none tracking-tight tabular-nums" }, price), period && /* @__PURE__ */ React.createElement("span", { className: `text-caption ${periodTone}` }, period)), description && /* @__PURE__ */ React.createElement("p", { className: `mb-5 min-h-10 text-caption ${descTone}` }, description), /* @__PURE__ */ React.createElement("div", { className: "mt-1" }, cta), /* @__PURE__ */ React.createElement("ul", { className: "mt-5 space-y-2" }, features.map((f) => /* @__PURE__ */ React.createElement("li", { key: f, className: `flex items-start gap-2 text-caption ${featTone}` }, /* @__PURE__ */ React.createElement(Check, { size: 14, className: `mt-0.5 shrink-0 ${check}`, "aria-hidden": "true" }), /* @__PURE__ */ React.createElement("span", null, f)))));
+}
+export {
+  PricingCard
+};

package/dist/components/qr-display.d.ts

@@ -0,0 +1,19 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface QRDisplayProps {
+    /** Imagem do QR — dataURL (PNG) ou URL. Gerada por quem chama (o DS não gera QR). */
+    src: string;
+    /** Texto alternativo — inclua o contexto/valor pra leitor de tela (a11y). */
+    alt?: string;
+    /** Lado do QR em px. Renderize 1:1 com o tamanho gerado pra não borrar. */
+    size?: number;
+    /** Conteúdo abaixo do QR (ex.: instrução curta). */
+    caption?: ReactNode;
+    /** Slot entre o QR e a caption (ex.: <CopyField/>). */
+    children?: ReactNode;
+    className?: string;
+}
+declare function QRDisplay({ src, alt, size, caption, children, className, }: QRDisplayProps): react.JSX.Element;
+
+export { QRDisplay, type QRDisplayProps };

package/dist/components/qr-display.js

@@ -0,0 +1,24 @@
+import "../chunk-ORMEWXMH.js";
+function QRDisplay({
+  src,
+  alt = "QR Code",
+  size = 240,
+  caption,
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ React.createElement("div", { className: ["flex flex-col items-center gap-4", className].join(" ") }, /* @__PURE__ */ React.createElement("div", { className: "rounded-(--radius-card) bg-white p-4 shadow-sm" }, /* @__PURE__ */ React.createElement(
+    "img",
+    {
+      src,
+      alt,
+      width: size,
+      height: size,
+      style: { width: size, height: size },
+      className: "block"
+    }
+  )), children, caption && /* @__PURE__ */ React.createElement("div", { className: "max-w-xs text-center text-sm text-fg-secondary leading-snug" }, caption));
+}
+export {
+  QRDisplay
+};