@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-password-input.js

@@ -0,0 +1,104 @@
+import {
+  Input
+} from "./chunk-TOZBR4GL.js";
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-password-input/dist/index.js
+import * as React from "react";
+
+// ../password-input/dist/index.js
+var DEFAULT_REVEAL_LABEL = "Show password";
+var DEFAULT_HIDE_LABEL = "Hide password";
+function createPasswordInput(props = {}) {
+  const {
+    revealed = false,
+    revealLabel = DEFAULT_REVEAL_LABEL,
+    hideLabel = DEFAULT_HIDE_LABEL
+  } = props;
+  return {
+    inputType: revealed ? "text" : "password",
+    toggleLabel: revealed ? hideLabel : revealLabel,
+    togglePressed: revealed
+  };
+}
+var passwordToggleVariants = cva({
+  base: "absolute right-2 top-1/2 flex size-7 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+});
+
+// ../react-password-input/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var EyeIcon = /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "size-4",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }),
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
+    ]
+  }
+);
+var EyeOffIcon = /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "size-4",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M9.88 9.88a3 3 0 1 0 4.24 4.24" }),
+      /* @__PURE__ */ jsx("path", { d: "M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" }),
+      /* @__PURE__ */ jsx("path", { d: "M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" }),
+      /* @__PURE__ */ jsx("line", { x1: "2", x2: "22", y1: "2", y2: "22" })
+    ]
+  }
+);
+var PasswordInput = React.forwardRef(
+  function PasswordInput2({ revealLabel = "Show password", hideLabel = "Hide password", className, ...props }, ref) {
+    const [revealed, setRevealed] = React.useState(false);
+    const { inputType, toggleLabel, togglePressed } = createPasswordInput({
+      revealed,
+      revealLabel,
+      hideLabel
+    });
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref,
+          type: inputType,
+          className: cn("pr-10", className),
+          ...props
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": toggleLabel,
+          "aria-pressed": togglePressed,
+          onClick: () => setRevealed((v) => !v),
+          className: passwordToggleVariants(),
+          children: revealed ? EyeOffIcon : EyeIcon
+        }
+      )
+    ] });
+  }
+);
+export {
+  PasswordInput
+};
+//# sourceMappingURL=react-password-input.js.map

package/dist/react-password-input.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../password-input/src/password-input.ts", "../../password-input/src/password-input.styles.ts", "../../react-password-input/src/password-input.tsx"],
+  "sourcesContent": ["export interface PasswordInputProps {\n  /** Whether the password is currently revealed (shown as plain text). */\n  revealed?: boolean\n  /**\n   * Accessible label for the reveal (show password) action.\n   * @default 'Show password'\n   */\n  revealLabel?: string\n  /**\n   * Accessible label for the hide action.\n   * @default 'Hide password'\n   */\n  hideLabel?: string\n}\n\nexport interface PasswordInputAPI {\n  /** The `type` attribute for the underlying input given the revealed state. */\n  inputType: 'text' | 'password'\n  /** The accessible label for the toggle button given the revealed state. */\n  toggleLabel: string\n  /** The `aria-pressed` value for the toggle button. */\n  togglePressed: boolean\n}\n\nexport const DEFAULT_REVEAL_LABEL = 'Show password'\nexport const DEFAULT_HIDE_LABEL = 'Hide password'\n\n/**\n * State-free password-input helper. Given a `revealed` flag (owned by the\n * framework adapter), it returns the input `type`, the toggle button's\n * accessible label, and its `aria-pressed` value. It does not hold state.\n */\nexport function createPasswordInput(props: PasswordInputProps = {}): PasswordInputAPI {\n  const {\n    revealed = false,\n    revealLabel = DEFAULT_REVEAL_LABEL,\n    hideLabel = DEFAULT_HIDE_LABEL,\n  } = props\n\n  return {\n    inputType: revealed ? 'text' : 'password',\n    toggleLabel: revealed ? hideLabel : revealLabel,\n    togglePressed: revealed,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Positioning classes for the reveal/hide toggle button rendered inside a\n * password input's trailing padding. The wrapper must be `relative` and the\n * input must reserve trailing space (e.g. `pr-10`).\n */\nexport const passwordToggleVariants = cva({\n  base: 'absolute right-2 top-1/2 flex size-7 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n})\n", "import * as React from 'react'\nimport { Input, type InputProps } from '@refraction-ui/react-input'\nimport { createPasswordInput, passwordToggleVariants } from '@refraction-ui/password-input'\nimport { cn } from '@refraction-ui/shared'\n\nexport interface PasswordInputProps extends Omit<InputProps, 'type' | 'leadingIcon'> {\n  /**\n   * Accessible label for the reveal (show password) action.\n   * @default 'Show password'\n   */\n  revealLabel?: string\n  /**\n   * Accessible label for the hide action.\n   * @default 'Hide password'\n   */\n  hideLabel?: string\n}\n\nconst EyeIcon = (\n  <svg\n    aria-hidden=\"true\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className=\"size-4\"\n  >\n    <path d=\"M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z\" />\n    <circle cx=\"12\" cy=\"12\" r=\"3\" />\n  </svg>\n)\n\nconst EyeOffIcon = (\n  <svg\n    aria-hidden=\"true\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    className=\"size-4\"\n  >\n    <path d=\"M9.88 9.88a3 3 0 1 0 4.24 4.24\" />\n    <path d=\"M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68\" />\n    <path d=\"M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61\" />\n    <line x1=\"2\" x2=\"22\" y1=\"2\" y2=\"22\" />\n  </svg>\n)\n\n/**\n * PasswordInput — a password field with a built-in reveal/hide toggle.\n *\n * Wraps the styled {@link Input} from `@refraction-ui/react-input`, toggling\n * the underlying input `type` between `'password'` and `'text'`. Forwards all\n * Input props (`value`, `onChange`, `validationState`, `minLength`, …) through\n * to the underlying element, including the `ref`.\n */\nexport const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(\n  function PasswordInput({ revealLabel = 'Show password', hideLabel = 'Hide password', className, ...props }, ref) {\n    const [revealed, setRevealed] = React.useState(false)\n\n    // The core owns the type/label/pressed derivation; React owns the toggle state.\n    const { inputType, toggleLabel, togglePressed } = createPasswordInput({\n      revealed,\n      revealLabel,\n      hideLabel,\n    })\n\n    return (\n      <div className=\"relative\">\n        <Input\n          ref={ref}\n          type={inputType}\n          className={cn('pr-10', className)}\n          {...props}\n        />\n        <button\n          type=\"button\"\n          aria-label={toggleLabel}\n          aria-pressed={togglePressed}\n          onClick={() => setRevealed((v) => !v)}\n          className={passwordToggleVariants()}\n        >\n          {revealed ? EyeOffIcon : EyeIcon}\n        </button>\n      </div>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;;;;AAwBO,IAAM,uBAAuB;AAC7B,IAAM,qBAAqB;AAO3B,SAAS,oBAAoB,QAA4B,CAAA,GAAsB;AACpF,QAAM;IACJ,WAAW;IACX,cAAc;IACd,YAAY;EAAA,IACV;AAEJ,SAAO;IACL,WAAW,WAAW,SAAS;IAC/B,aAAa,WAAW,YAAY;IACpC,eAAe;EAAA;AAEnB;ACrCO,IAAM,yBAAyB,IAAI;EACxC,MAAM;AACR,CAAC;;;;ACSD,IAAM,UACJ;EAAC;EAAA;IACC,eAAY;IACZ,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;IACf,WAAU;IAEV,UAAA;MAAA,oBAAC,QAAA,EAAK,GAAE,+CAAA,CAA+C;MAAA,oBACtD,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,IAAA,CAAI;IAAA;EAAA;AAChC;AAGF,IAAM,aACJ;EAAC;EAAA;IACC,eAAY;IACZ,SAAQ;IACR,MAAK;IACL,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;IACf,WAAU;IAEV,UAAA;MAAA,oBAAC,QAAA,EAAK,GAAE,iCAAA,CAAiC;MACzC,oBAAC,QAAA,EAAK,GAAE,+EAAA,CAA+E;MACvF,oBAAC,QAAA,EAAK,GAAE,yEAAA,CAAyE;MACjF,oBAAC,QAAA,EAAK,IAAG,KAAI,IAAG,MAAK,IAAG,KAAI,IAAG,KAAA,CAAK;IAAA;EAAA;AACtC;AAWK,IAAM,gBAAsB;EACjC,SAASA,eAAc,EAAE,cAAc,iBAAiB,YAAY,iBAAiB,WAAW,GAAG,MAAA,GAAS,KAAK;AAC/G,UAAM,CAAC,UAAU,WAAW,IAAU,eAAS,KAAK;AAGpD,UAAM,EAAE,WAAW,aAAa,cAAA,IAAkB,oBAAoB;MACpE;MACA;MACA;IAAA,CACD;AAED,WACE,qBAAC,OAAA,EAAI,WAAU,YACb,UAAA;MAAA;QAAC;QAAA;UACC;UACA,MAAM;UACN,WAAW,GAAG,SAAS,SAAS;UAC/B,GAAG;QAAA;MAAA;MAEN;QAAC;QAAA;UACC,MAAK;UACL,cAAY;UACZ,gBAAc;UACd,SAAS,MAAM,YAAY,CAAC,MAAM,CAAC,CAAC;UACpC,WAAW,uBAAA;UAEV,UAAA,WAAW,aAAa;QAAA;MAAA;IAC3B,EAAA,CACF;EAEJ;AACF;",
+  "names": ["PasswordInput"]
+}

package/dist/react-payment.js

@@ -0,0 +1,81 @@
+import {
+  cn
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-payment/dist/index.js
+import * as React from "react";
+
+// ../payment/dist/index.js
+function createPayment(props = {}) {
+  return {
+    props: {
+      ...props,
+      "data-slot": "payment"
+    }
+  };
+}
+
+// ../react-payment/dist/index.js
+import { jsx } from "react/jsx-runtime";
+var Payment = React.forwardRef(
+  function Payment2({ className, disabled, ...props }, ref) {
+    const api = createPayment({ disabled });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "w-full max-w-md mx-auto p-6 border border-border rounded-xl bg-card text-card-foreground shadow-sm",
+          disabled && "opacity-50 pointer-events-none",
+          className
+        ),
+        ...api.props,
+        ...props
+      }
+    );
+  }
+);
+React.forwardRef(
+  function PaymentHeader2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("mb-6 flex flex-col gap-1.5", className), ...props });
+  }
+);
+React.forwardRef(
+  function PaymentTitle2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("h3", { ref, className: cn("text-xl font-semibold leading-none tracking-tight", className), ...props });
+  }
+);
+React.forwardRef(
+  function PaymentDescription2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props });
+  }
+);
+React.forwardRef(
+  function PaymentContent2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col gap-4", className), ...props });
+  }
+);
+React.forwardRef(
+  function PaymentFooter2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("mt-6 flex flex-col gap-3", className), ...props });
+  }
+);
+React.forwardRef(
+  function PaymentButton2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        className: cn(
+          "inline-flex w-full items-center justify-center whitespace-nowrap rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+export {
+  Payment
+};
+//# sourceMappingURL=react-payment.js.map

package/dist/react-payment.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../payment/src/payment.ts", "../../react-payment/src/payment.tsx"],
+  "sourcesContent": ["export interface PaymentProps {\n  disabled?: boolean;\n}\n\nexport interface PaymentAPI {\n  props: PaymentProps;\n}\n\nexport function createPayment(props: PaymentProps = {}): PaymentAPI {\n  return {\n    props: {\n      ...props,\n      'data-slot': 'payment',\n    } as PaymentProps & Record<string, unknown>,\n  };\n}\n", "import * as React from 'react';\nimport { createPayment, type PaymentProps as CorePaymentProps } from '@refraction-ui/payment';\nimport { cn } from '@refraction-ui/shared';\n\nexport interface PaymentProps extends React.HTMLAttributes<HTMLDivElement>, CorePaymentProps {\n  disabled?: boolean;\n}\n\nexport const Payment = React.forwardRef<HTMLDivElement, PaymentProps>(\n  function Payment({ className, disabled, ...props }, ref) {\n    const api = createPayment({ disabled });\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"w-full max-w-md mx-auto p-6 border border-border rounded-xl bg-card text-card-foreground shadow-sm\",\n          disabled && \"opacity-50 pointer-events-none\",\n          className\n        )}\n        {...api.props}\n        {...props}\n      />\n    );\n  }\n);\n\nexport interface PaymentHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const PaymentHeader = React.forwardRef<HTMLDivElement, PaymentHeaderProps>(\n  function PaymentHeader({ className, ...props }, ref) {\n    return (\n      <div ref={ref} className={cn(\"mb-6 flex flex-col gap-1.5\", className)} {...props} />\n    )\n  }\n);\n\nexport interface PaymentTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport const PaymentTitle = React.forwardRef<HTMLHeadingElement, PaymentTitleProps>(\n  function PaymentTitle({ className, ...props }, ref) {\n    return (\n      <h3 ref={ref} className={cn(\"text-xl font-semibold leading-none tracking-tight\", className)} {...props} />\n    )\n  }\n);\n\nexport interface PaymentDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport const PaymentDescription = React.forwardRef<HTMLParagraphElement, PaymentDescriptionProps>(\n  function PaymentDescription({ className, ...props }, ref) {\n    return (\n      <p ref={ref} className={cn(\"text-sm text-muted-foreground\", className)} {...props} />\n    )\n  }\n);\n\nexport interface PaymentContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const PaymentContent = React.forwardRef<HTMLDivElement, PaymentContentProps>(\n  function PaymentContent({ className, ...props }, ref) {\n    return (\n      <div ref={ref} className={cn(\"flex flex-col gap-4\", className)} {...props} />\n    )\n  }\n);\n\nexport interface PaymentFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const PaymentFooter = React.forwardRef<HTMLDivElement, PaymentFooterProps>(\n  function PaymentFooter({ className, ...props }, ref) {\n    return (\n      <div ref={ref} className={cn(\"mt-6 flex flex-col gap-3\", className)} {...props} />\n    )\n  }\n);\n\nexport interface PaymentButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nexport const PaymentButton = React.forwardRef<HTMLButtonElement, PaymentButtonProps>(\n  function PaymentButton({ className, ...props }, ref) {\n    return (\n      <button\n        ref={ref}\n        className={cn(\n          \"inline-flex w-full items-center justify-center whitespace-nowrap rounded-md bg-primary px-4 py-2.5 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n          className\n        )}\n        {...props}\n      />\n    )\n  }\n);\n"],
+  "mappings": ";;;;;;;;AAQO,SAAS,cAAc,QAAsB,CAAA,GAAgB;AAClE,SAAO;IACL,OAAO;MACL,GAAG;MACH,aAAa;IAAA;EACf;AAEJ;;;;ACPO,IAAM,UAAgB;EAC3B,SAASA,SAAQ,EAAE,WAAW,UAAU,GAAG,MAAA,GAAS,KAAK;AACvD,UAAM,MAAM,cAAc,EAAE,SAAA,CAAU;AAEtC,WACE;MAAC;MAAA;QACC;QACA,WAAW;UACT;UACA,YAAY;UACZ;QAAA;QAED,GAAG,IAAI;QACP,GAAG;MAAA;IAAA;EAGV;AACF;AAImC;EACjC,SAASC,eAAc,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AACnD,WACE,oBAAC,OAAA,EAAI,KAAU,WAAW,GAAG,8BAA8B,SAAS,GAAI,GAAG,MAAA,CAAO;EAEtF;AACF;AAIkC;EAChC,SAASC,cAAa,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AAClD,WACE,oBAAC,MAAA,EAAG,KAAU,WAAW,GAAG,qDAAqD,SAAS,GAAI,GAAG,MAAA,CAAO;EAE5G;AACF;AAIwC;EACtC,SAASC,oBAAmB,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AACxD,WACE,oBAAC,KAAA,EAAE,KAAU,WAAW,GAAG,iCAAiC,SAAS,GAAI,GAAG,MAAA,CAAO;EAEvF;AACF;AAIoC;EAClC,SAASC,gBAAe,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AACpD,WACE,oBAAC,OAAA,EAAI,KAAU,WAAW,GAAG,uBAAuB,SAAS,GAAI,GAAG,MAAA,CAAO;EAE/E;AACF;AAImC;EACjC,SAASC,eAAc,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AACnD,WACE,oBAAC,OAAA,EAAI,KAAU,WAAW,GAAG,4BAA4B,SAAS,GAAI,GAAG,MAAA,CAAO;EAEpF;AACF;AAImC;EACjC,SAASC,eAAc,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AACnD,WACE;MAAC;MAAA;QACC;QACA,WAAW;UACT;UACA;QAAA;QAED,GAAG;MAAA;IAAA;EAGV;AACF;",
+  "names": ["Payment", "PaymentHeader", "PaymentTitle", "PaymentDescription", "PaymentContent", "PaymentFooter", "PaymentButton"]
+}

package/dist/react-popover.js

@@ -0,0 +1,176 @@
+import {
+  Keys,
+  cn,
+  createKeyboardHandler,
+  cva,
+  devWarn,
+  generateId
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-popover/dist/index.js
+import * as React from "react";
+import { createPortal } from "react-dom";
+
+// ../popover/dist/index.js
+function createPopover(props = {}) {
+  const {
+    open: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+    placement = "bottom"
+  } = props;
+  const contentId = generateId("rfr-popover");
+  let isOpen = controlledOpen ?? defaultOpen;
+  const state = { open: isOpen };
+  function setOpen(value) {
+    isOpen = value;
+    state.open = value;
+    onOpenChange?.(value);
+  }
+  const triggerProps = {
+    "aria-expanded": isOpen,
+    "aria-controls": contentId,
+    "aria-haspopup": "dialog"
+  };
+  const contentProps = {
+    role: "dialog",
+    id: contentId
+  };
+  const keyboardHandlers = {
+    [Keys.Escape]: () => {
+      setOpen(false);
+    }
+  };
+  const handleKeyDown = createKeyboardHandler(keyboardHandlers);
+  return {
+    state,
+    triggerProps,
+    contentProps,
+    placement,
+    open: () => setOpen(true),
+    close: () => setOpen(false),
+    toggle: () => setOpen(!isOpen),
+    keyboardHandlers,
+    handleKeyDown
+  };
+}
+var popoverContentVariants = cva({
+  base: "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+  variants: {
+    side: {
+      top: "animate-slide-down-fade",
+      right: "animate-slide-left-fade",
+      bottom: "animate-slide-up-fade",
+      left: "animate-slide-right-fade"
+    }
+  },
+  defaultVariants: {
+    side: "bottom"
+  }
+});
+
+// ../react-popover/dist/index.js
+import { jsx } from "react/jsx-runtime";
+var PopoverContext = React.createContext(null);
+function usePopoverContext() {
+  const ctx = React.useContext(PopoverContext);
+  if (!ctx) {
+    devWarn(
+      "react-popover/context-outside-provider",
+      "Popover compound components (PopoverTrigger/PopoverContent/etc.) must be rendered inside a <Popover>. The missing PopoverContext makes this throw."
+    );
+    throw new Error("Popover compound components must be used within <Popover>");
+  }
+  return ctx;
+}
+function Popover({ open: controlledOpen, defaultOpen = false, onOpenChange, placement, children }) {
+  const [internalOpen, setInternalOpen] = React.useState(controlledOpen ?? defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const isOpen = isControlled ? controlledOpen : internalOpen;
+  const handleOpenChange = React.useCallback(
+    (value) => {
+      if (!isControlled) {
+        setInternalOpen(value);
+      }
+      onOpenChange?.(value);
+    },
+    [isControlled, onOpenChange]
+  );
+  const api = React.useMemo(
+    () => createPopover({ open: isOpen, onOpenChange: handleOpenChange, placement }),
+    [isOpen, handleOpenChange, placement]
+  );
+  const ctx = React.useMemo(
+    () => ({ api, open: isOpen, setOpen: handleOpenChange }),
+    [api, isOpen, handleOpenChange]
+  );
+  return React.createElement(PopoverContext.Provider, { value: ctx }, children);
+}
+var PopoverTrigger = React.forwardRef(
+  function PopoverTrigger2({ onClick, children, ...props }, ref) {
+    const { api, setOpen, open } = usePopoverContext();
+    const handleClick = (e) => {
+      setOpen(!open);
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-expanded": api.triggerProps["aria-expanded"],
+        "aria-controls": api.triggerProps["aria-controls"],
+        "aria-haspopup": api.triggerProps["aria-haspopup"],
+        onClick: handleClick,
+        ...props,
+        children
+      }
+    );
+  }
+);
+var PopoverContent = React.forwardRef(
+  function PopoverContent2({ side, className, children, onKeyDown, ...props }, ref) {
+    const { api, open, setOpen } = usePopoverContext();
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+      }
+      onKeyDown?.(e);
+    };
+    if (!open) return null;
+    const content = /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: api.contentProps.role,
+        id: api.contentProps.id,
+        className: cn(popoverContentVariants({ side: side ?? api.placement }), className),
+        onKeyDown: handleKeyDown,
+        ...props,
+        children
+      }
+    );
+    if (typeof document !== "undefined") {
+      return createPortal(content, document.body);
+    }
+    return content;
+  }
+);
+var PopoverClose = React.forwardRef(
+  function PopoverClose2({ onClick, children, ...props }, ref) {
+    const { setOpen } = usePopoverContext();
+    const handleClick = (e) => {
+      setOpen(false);
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ jsx("button", { ref, type: "button", onClick: handleClick, ...props, children });
+  }
+);
+export {
+  Popover,
+  PopoverClose,
+  PopoverContent,
+  PopoverTrigger,
+  popoverContentVariants
+};
+//# sourceMappingURL=react-popover.js.map

package/dist/react-popover.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../popover/src/popover.ts", "../../popover/src/popover.styles.ts", "../../react-popover/src/popover.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps, Side, KeyboardHandlerMap } from '@refraction-ui/shared'\nimport { generateId, Keys, createKeyboardHandler } from '@refraction-ui/shared'\n\nexport interface PopoverProps {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  placement?: Side\n}\n\nexport interface PopoverAPI {\n  /** Current open state */\n  state: { open: boolean }\n  /** Props to spread on the trigger element */\n  triggerProps: Partial<AccessibilityProps> & {\n    'aria-expanded': boolean\n    'aria-controls': string\n    'aria-haspopup': 'dialog'\n  }\n  /** Props to spread on the content element */\n  contentProps: {\n    role: 'dialog'\n    id: string\n  }\n  /** Resolved placement */\n  placement: Side\n  /** Open the popover */\n  open: () => void\n  /** Close the popover */\n  close: () => void\n  /** Toggle the popover */\n  toggle: () => void\n  /** Keyboard handler map (Escape to close) */\n  keyboardHandlers: KeyboardHandlerMap\n  /** Pre-built keyboard event handler */\n  handleKeyDown: (event: KeyboardEvent) => void\n}\n\nexport function createPopover(props: PopoverProps = {}): PopoverAPI {\n  const {\n    open: controlledOpen,\n    defaultOpen = false,\n    onOpenChange,\n    placement = 'bottom',\n  } = props\n\n  const contentId = generateId('rfr-popover')\n\n  let isOpen = controlledOpen ?? defaultOpen\n\n  const state = { open: isOpen }\n\n  function setOpen(value: boolean) {\n    isOpen = value\n    state.open = value\n    onOpenChange?.(value)\n  }\n\n  const triggerProps = {\n    'aria-expanded': isOpen,\n    'aria-controls': contentId,\n    'aria-haspopup': 'dialog' as const,\n  }\n\n  const contentProps = {\n    role: 'dialog' as const,\n    id: contentId,\n  }\n\n  const keyboardHandlers: KeyboardHandlerMap = {\n    [Keys.Escape]: () => {\n      setOpen(false)\n    },\n  }\n\n  const handleKeyDown = createKeyboardHandler(keyboardHandlers)\n\n  return {\n    state,\n    triggerProps,\n    contentProps,\n    placement,\n    open: () => setOpen(true),\n    close: () => setOpen(false),\n    toggle: () => setOpen(!isOpen),\n    keyboardHandlers,\n    handleKeyDown,\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const popoverContentVariants = cva({\n  base: 'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none',\n  variants: {\n    side: {\n      top: 'animate-slide-down-fade',\n      right: 'animate-slide-left-fade',\n      bottom: 'animate-slide-up-fade',\n      left: 'animate-slide-right-fade',\n    },\n  },\n  defaultVariants: {\n    side: 'bottom',\n  },\n})\n", "import * as React from 'react'\nimport { createPortal } from 'react-dom'\nimport {\n  createPopover,\n  popoverContentVariants,\n  type PopoverAPI,\n} from '@refraction-ui/popover'\nimport type { Side } from '@refraction-ui/shared'\nimport { cn, devWarn } from '@refraction-ui/shared'\n\n/* ------------------------------------------------------------------ */\n/*  Context                                                            */\n/* ------------------------------------------------------------------ */\n\ninterface PopoverContextValue {\n  api: PopoverAPI\n  open: boolean\n  setOpen: (value: boolean) => void\n}\n\nconst PopoverContext = React.createContext<PopoverContextValue | null>(null)\n\nfunction usePopoverContext(): PopoverContextValue {\n  const ctx = React.useContext(PopoverContext)\n  if (!ctx) {\n    devWarn(\n      'react-popover/context-outside-provider',\n      'Popover compound components (PopoverTrigger/PopoverContent/etc.) must be rendered inside a <Popover>. The missing PopoverContext makes this throw.',\n    )\n    throw new Error('Popover compound components must be used within <Popover>')\n  }\n  return ctx\n}\n\n/* ------------------------------------------------------------------ */\n/*  Popover (root provider)                                            */\n/* ------------------------------------------------------------------ */\n\nexport interface PopoverProps {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  placement?: Side\n  children: React.ReactNode\n}\n\nexport function Popover({ open: controlledOpen, defaultOpen = false, onOpenChange, placement, children }: PopoverProps) {\n  const [internalOpen, setInternalOpen] = React.useState(controlledOpen ?? defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const isOpen = isControlled ? controlledOpen : internalOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(value)\n      }\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  const api = React.useMemo(\n    () => createPopover({ open: isOpen, onOpenChange: handleOpenChange, placement }),\n    [isOpen, handleOpenChange, placement],\n  )\n\n  const ctx = React.useMemo<PopoverContextValue>(\n    () => ({ api, open: isOpen, setOpen: handleOpenChange }),\n    [api, isOpen, handleOpenChange],\n  )\n\n  return React.createElement(PopoverContext.Provider, { value: ctx }, children)\n}\n\n/* ------------------------------------------------------------------ */\n/*  PopoverTrigger                                                     */\n/* ------------------------------------------------------------------ */\n\nexport interface PopoverTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nexport const PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverTriggerProps>(\n  function PopoverTrigger({ onClick, children, ...props }, ref) {\n    const { api, setOpen, open } = usePopoverContext()\n\n    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      setOpen(!open)\n      onClick?.(e)\n    }\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        aria-expanded={api.triggerProps['aria-expanded']}\n        aria-controls={api.triggerProps['aria-controls']}\n        aria-haspopup={api.triggerProps['aria-haspopup']}\n        onClick={handleClick}\n        {...props}\n      >\n        {children}\n      </button>\n    )\n  },\n)\n\n/* ------------------------------------------------------------------ */\n/*  PopoverContent                                                     */\n/* ------------------------------------------------------------------ */\n\nexport interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  side?: Side\n}\n\nexport const PopoverContent = React.forwardRef<HTMLDivElement, PopoverContentProps>(\n  function PopoverContent({ side, className, children, onKeyDown, ...props }, ref) {\n    const { api, open, setOpen } = usePopoverContext()\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        setOpen(false)\n      }\n      onKeyDown?.(e)\n    }\n\n    if (!open) return null\n\n    const content = (\n      <div\n        ref={ref}\n        role={api.contentProps.role}\n        id={api.contentProps.id}\n        className={cn(popoverContentVariants({ side: side ?? api.placement }), className)}\n        onKeyDown={handleKeyDown}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n\n    if (typeof document !== 'undefined') {\n      return createPortal(content, document.body)\n    }\n\n    return content\n  },\n)\n\n/* ------------------------------------------------------------------ */\n/*  PopoverClose                                                       */\n/* ------------------------------------------------------------------ */\n\nexport interface PopoverCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nexport const PopoverClose = React.forwardRef<HTMLButtonElement, PopoverCloseProps>(\n  function PopoverClose({ onClick, children, ...props }, ref) {\n    const { setOpen } = usePopoverContext()\n\n    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      setOpen(false)\n      onClick?.(e)\n    }\n\n    return (\n      <button ref={ref} type=\"button\" onClick={handleClick} {...props}>\n        {children}\n      </button>\n    )\n  },\n)\n"],
+  "mappings": "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",
+  "names": ["PopoverTrigger", "PopoverContent", "PopoverClose"]
+}