@refraction-ui/react 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -128,7 +128,6 @@ __export(index_exports, {
   Command: () => Command,
   CommandEmpty: () => CommandEmpty,
   CommandGroup: () => CommandGroup,
-  CommandInput: () => CommandInput,
   CommandItem: () => CommandItem,
   CommandList: () => CommandList,
   CommandSeparator: () => CommandSeparator,
@@ -179,6 +178,7 @@ __export(index_exports, {
   PRESENCE_STATUS_COLORS: () => STATUS_COLORS,
   PRESENCE_STATUS_LABELS: () => STATUS_LABELS,
   Pagination: () => Pagination,
+  Payment: () => Payment,
   Popover: () => Popover,
   PopoverClose: () => PopoverClose,
   PopoverContent: () => PopoverContent,
@@ -1160,106 +1160,16 @@ function getAssignableRoles(user) {
   if (hasRole(user, "reviewer")) return ["student"];
   return [];
 }
-function createMockAdapter(initialUser) {
-  let currentUser = initialUser ?? null;
-  const listeners = /* @__PURE__ */ new Set();
-  function notify() {
-    for (const fn of listeners) {
-      fn(currentUser);
-    }
-  }
-  return {
-    async signIn(email, _password) {
-      currentUser = {
-        uid: "mock-" + email,
-        email,
-        displayName: email.split("@")[0],
-        photoURL: null,
-        roles: ["student"]
-      };
-      notify();
-      return currentUser;
-    },
-    async signInWithOAuth(_provider) {
-      currentUser = {
-        uid: "mock-oauth",
-        email: "oauth@example.com",
-        displayName: "OAuth User",
-        photoURL: null,
-        roles: ["student"]
-      };
-      notify();
-      return currentUser;
-    },
-    async signUp(email, _password, displayName) {
-      currentUser = {
-        uid: "mock-" + email,
-        email,
-        displayName,
-        photoURL: null,
-        roles: ["student"]
-      };
-      notify();
-      return currentUser;
-    },
-    async signOut() {
-      currentUser = null;
-      notify();
-    },
-    async resetPassword(_email) {
-    },
-    async getToken() {
-      return currentUser ? "mock-token-" + currentUser.uid : null;
-    },
-    onAuthStateChange(callback) {
-      listeners.add(callback);
-      callback(currentUser);
-      return () => {
-        listeners.delete(callback);
-      };
-    }
-  };
-}
-function resolveAdapter(provider) {
-  const resolved = provider ?? detectProvider();
-  switch (resolved) {
-    case "firebase":
-      if (typeof console !== "undefined") {
-        console.warn("[refraction-ui/auth] Firebase adapter not yet implemented. Using mock adapter.");
-      }
-      return createMockAdapter();
-    case "supabase":
-      if (typeof console !== "undefined") {
-        console.warn("[refraction-ui/auth] Supabase adapter not yet implemented. Using mock adapter.");
-      }
-      return createMockAdapter();
-    case "mock":
-      return createMockAdapter();
-    case "none":
-    default:
-      return createMockAdapter();
-  }
-}
-function detectProvider() {
-  const env = typeof process !== "undefined" ? process.env : {};
-  const explicit = env["REFRACTION_AUTH_PROVIDER"];
-  if (explicit) return explicit;
-  if (env["FIREBASE_API_KEY"] || env["NEXT_PUBLIC_FIREBASE_API_KEY"]) {
-    return "firebase";
-  }
-  if (env["SUPABASE_URL"] || env["NEXT_PUBLIC_SUPABASE_URL"]) {
-    return "supabase";
-  }
-  return "none";
-}
 
 // ../react-auth/dist/index.js
 var AuthContext = React41__namespace.createContext(null);
 function AuthProvider({ children, ...config }) {
   const authRef = React41__namespace.useRef(null);
   if (!authRef.current) {
-    const adapter = resolveAdapter(config.provider);
-    authRef.current = createAuth(adapter, config);
+    if (!config.adapter) {
+      throw new Error("[refraction-ui/react-auth] You must provide an `adapter` to AuthProvider.");
+    }
+    authRef.current = createAuth(config.adapter, config);
   }
   const [state, setState] = React41__namespace.useState(() => authRef.current.getState());
   React41__namespace.useEffect(() => {
@@ -12348,6 +12258,259 @@ var CardGrid = React41__namespace.forwardRef(
 );
 CardGrid.displayName = "CardGrid";
 
+// ../payment/dist/index.js
+function createPayment(props = {}) {
+  return {
+    props: {
+      ...props,
+      "data-slot": "payment"
+    }
+  };
+}
+var Payment = React41__namespace.forwardRef(
+  ({ className, disabled, ...props }, ref) => {
+    const api = createPayment({ disabled });
+    return /* @__PURE__ */ jsxRuntime.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
+      }
+    );
+  }
+);
+Payment.displayName = "Payment";
+var PaymentHeader = React41__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-6 flex flex-col gap-1.5", className), ...props })
+);
+PaymentHeader.displayName = "PaymentHeader";
+var PaymentTitle = React41__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("h3", { ref, className: cn("text-xl font-semibold leading-none tracking-tight", className), ...props })
+);
+PaymentTitle.displayName = "PaymentTitle";
+var PaymentDescription = React41__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("p", { ref, className: cn("text-sm text-muted-foreground", className), ...props })
+);
+PaymentDescription.displayName = "PaymentDescription";
+var PaymentContent = React41__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex flex-col gap-4", className), ...props })
+);
+PaymentContent.displayName = "PaymentContent";
+var PaymentFooter = React41__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mt-6 flex flex-col gap-3", className), ...props })
+);
+PaymentFooter.displayName = "PaymentFooter";
+var PaymentButton = React41__namespace.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.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
+    }
+  )
+);
+PaymentButton.displayName = "PaymentButton";
+
+// ../command-input/dist/index.js
+var CommandInput2 = class {
+  state = {
+    nodes: [],
+    rawText: "",
+    cursorPosition: 0,
+    activeTrigger: null,
+    activeCommandText: null
+  };
+  options;
+  constructor(options) {
+    this.options = { ...options };
+  }
+  handleInput(text, cursorPosition) {
+    this.state.rawText = text;
+    this.state.cursorPosition = cursorPosition;
+    this.parseInput();
+    this.notifyStateChange();
+  }
+  handleKeyDown(key, event) {
+    if (this.state.activeTrigger) {
+      if (key === "Escape") {
+        if (event) event.preventDefault();
+        this.state.activeTrigger = null;
+        this.state.activeCommandText = null;
+        if (this.options.onCommandCancel) {
+          this.options.onCommandCancel();
+        }
+        this.notifyStateChange();
+      } else if (key === "Enter") {
+        if (event) event.preventDefault();
+        const trigger = this.state.activeTrigger;
+        const text = this.state.activeCommandText || "";
+        this.state.activeTrigger = null;
+        this.state.activeCommandText = null;
+        if (this.options.onCommandCommit) {
+          this.options.onCommandCommit(trigger, text);
+        }
+        this.notifyStateChange();
+      }
+    }
+  }
+  get value() {
+    return this.state.nodes;
+  }
+  getState() {
+    return { ...this.state };
+  }
+  parseInput() {
+    const { rawText, cursorPosition } = this.state;
+    this.state.activeTrigger = null;
+    this.state.activeCommandText = null;
+    for (let i = cursorPosition - 1; i >= 0; i--) {
+      const char = rawText[i];
+      const matchedTrigger = this.options.triggers.find((t) => t.char === char);
+      if (matchedTrigger) {
+        const isStartOfWord = i === 0 || /\\s/.test(rawText[i - 1]);
+        if (isStartOfWord) {
+          const commandText = rawText.slice(i + 1, cursorPosition);
+          if (!/\\s/.test(commandText)) {
+            let isValid = true;
+            if (matchedTrigger.pattern) {
+              isValid = matchedTrigger.pattern.test(commandText);
+            }
+            if (isValid) {
+              this.state.activeTrigger = matchedTrigger;
+              this.state.activeCommandText = commandText;
+              if (this.options.onCommandTriggered) {
+                this.options.onCommandTriggered(matchedTrigger, commandText);
+              }
+            }
+          }
+        }
+        break;
+      }
+      if (/\\s/.test(char)) {
+        break;
+      }
+    }
+    const nodes = [];
+    if (this.options.triggers.length === 0) {
+      nodes.push({ type: "text", text: rawText });
+      this.state.nodes = nodes;
+      return;
+    }
+    const triggerChars = this.options.triggers.map((t) => t.char.replace(/[.*+?^\${}()|[\\]\\\\]/g, "\\\\$&"));
+    const patternStr = `(^|\\\\s)(${triggerChars.join("|")})([^\\\\s]*)`;
+    const regex = new RegExp(patternStr, "g");
+    let currentIndex = 0;
+    let match;
+    while ((match = regex.exec(rawText)) !== null) {
+      const precedingWhitespace = match[1];
+      const triggerChar = match[2];
+      const commandText = match[3];
+      const matchStart = match.index;
+      const triggerStart = matchStart + precedingWhitespace.length;
+      const triggerConfig = this.options.triggers.find((t) => t.char === triggerChar);
+      let isValid = true;
+      if (triggerConfig?.pattern && commandText.length > 0) {
+        isValid = triggerConfig.pattern.test(commandText);
+      }
+      if (isValid) {
+        if (triggerStart > currentIndex) {
+          nodes.push({ type: "text", text: rawText.slice(currentIndex, triggerStart) });
+        }
+        nodes.push({ type: "command", trigger: triggerChar, text: commandText });
+        currentIndex = regex.lastIndex;
+      }
+    }
+    if (currentIndex < rawText.length) {
+      nodes.push({ type: "text", text: rawText.slice(currentIndex) });
+    }
+    this.state.nodes = nodes;
+  }
+  notifyStateChange() {
+    if (this.options.onStateChange) {
+      this.options.onStateChange({ ...this.state });
+    }
+  }
+};
+var CommandInput3 = React41.forwardRef(
+  ({
+    value = "",
+    onChange,
+    triggers = [],
+    renderPopover,
+    className,
+    ...props
+  }, ref) => {
+    const localRef = React41.useRef(null);
+    const containerRef = ref || localRef;
+    const [popoverState, setPopoverState] = React41.useState({
+      isOpen: false,
+      trigger: "",
+      search: "",
+      position: { top: 0, left: 0 }
+    });
+    const coreRef = React41.useRef(null);
+    React41.useEffect(() => {
+      if (containerRef.current && !coreRef.current) {
+        coreRef.current = new CommandInput2({
+          triggers,
+          onCommandTriggered: (trigger, search) => {
+            setPopoverState({
+              isOpen: true,
+              trigger: trigger.char,
+              search,
+              position: { top: 0, left: 0 }
+            });
+          },
+          onCommandCancel: () => {
+            setPopoverState((prev) => ({ ...prev, isOpen: false }));
+          },
+          onStateChange: (state) => {
+            onChange?.(state.rawText);
+          }
+        });
+      }
+    }, [triggers, onChange]);
+    React41.useEffect(() => {
+      if (containerRef.current && containerRef.current.innerHTML !== value && coreRef.current) {
+        containerRef.current.innerHTML = value;
+      }
+    }, [value]);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative w-full", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: containerRef,
+          contentEditable: true,
+          suppressContentEditableWarning: true,
+          className: "w-full min-h-[40px] p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500",
+          onInput: (e) => {
+            coreRef.current?.handleInput(e.currentTarget.textContent || "", 0);
+          },
+          onKeyDown: (e) => {
+            coreRef.current?.handleKeyDown(e.key, e);
+          },
+          ...props
+        }
+      ),
+      renderPopover && renderPopover({
+        ...popoverState,
+        close: () => setPopoverState((prev) => ({ ...prev, isOpen: false }))
+      })
+    ] });
+  }
+);
+CommandInput3.displayName = "CommandInput";
+
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
 exports.AccordionItem = AccordionItem;
@@ -12389,7 +12552,6 @@ exports.CollapsibleTrigger = CollapsibleTrigger;
 exports.Command = Command;
 exports.CommandEmpty = CommandEmpty;
 exports.CommandGroup = CommandGroup;
-exports.CommandInput = CommandInput;
 exports.CommandItem = CommandItem;
 exports.CommandList = CommandList;
 exports.CommandSeparator = CommandSeparator;
@@ -12440,6 +12602,7 @@ exports.OtpInput = OtpInput;
 exports.PRESENCE_STATUS_COLORS = STATUS_COLORS;
 exports.PRESENCE_STATUS_LABELS = STATUS_LABELS;
 exports.Pagination = Pagination;
+exports.Payment = Payment;
 exports.Popover = Popover;
 exports.PopoverClose = PopoverClose;
 exports.PopoverContent = PopoverContent;