@omnibase/shadcn 0.4.2 → 0.5.0

package/dist/index.js

@@ -1,3 +1,5 @@
+"use client";
+
 // src/components/ui/card.tsx
 import "react";
 
@@ -77,12 +79,131 @@ function CardFooter({ className, ...props }) {
   );
 }
 
+// src/components/ui/messages.tsx
+import * as React3 from "react";
+
+// src/components/ui/alert.tsx
+import * as React2 from "react";
+import { cva } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+        warning: "border-yellow-500/50 text-yellow-700 bg-yellow-50 dark:border-yellow-500 dark:text-yellow-200 dark:bg-yellow-950/20 [&>svg]:text-yellow-600 dark:[&>svg]:text-yellow-200",
+        success: "border-green-500/50 text-green-700 bg-green-50 dark:border-green-500 dark:text-green-200 dark:bg-green-950/20 [&>svg]:text-green-600 dark:[&>svg]:text-green-200",
+        info: "border-blue-500/50 text-blue-700 bg-blue-50 dark:border-blue-500 dark:text-blue-200 dark:bg-blue-950/20 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-200"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var Alert = React2.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx2(
+  "div",
+  {
+    ref,
+    role: "alert",
+    className: cn(alertVariants({ variant }), className),
+    ...props
+  }
+));
+Alert.displayName = "Alert";
+var AlertTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  "h5",
+  {
+    ref,
+    className: cn("mb-1 font-medium leading-none tracking-tight", className),
+    ...props
+  }
+));
+AlertTitle.displayName = "AlertTitle";
+var AlertDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
+  "div",
+  {
+    ref,
+    className: cn("text-sm [&_p]:leading-relaxed", className),
+    ...props
+  }
+));
+AlertDescription.displayName = "AlertDescription";
+
+// src/components/ui/messages.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var getMessageVariant = (type) => {
+  switch (type) {
+    case "error":
+      return "destructive";
+    case "success":
+      return "success";
+    case "info":
+      return "info";
+    case "11184809":
+      return "warning";
+    default:
+      return "default";
+  }
+};
+var Messages = React3.forwardRef(
+  ({ flow, className, ...props }, ref) => {
+    if (!flow?.ui) return null;
+    const allMessages = [];
+    if (flow.ui.messages) {
+      allMessages.push(...flow.ui.messages);
+    }
+    if (flow.ui.nodes) {
+      flow.ui.nodes.forEach((node) => {
+        if (node.messages) {
+          allMessages.push(...node.messages);
+        }
+      });
+    }
+    if (allMessages.length === 0) return null;
+    return /* @__PURE__ */ jsx3(
+      "div",
+      {
+        ref,
+        className: cn("w-full max-w-md mx-auto space-y-2 mb-4", className),
+        ...props,
+        children: allMessages.map((message) => /* @__PURE__ */ jsx3(Alert, { variant: getMessageVariant(message.type), children: /* @__PURE__ */ jsx3(AlertDescription, { children: message.text }) }, message.id))
+      }
+    );
+  }
+);
+Messages.displayName = "Messages";
+
+// src/form/types.ts
+function isUiNodeInputAttributes(attributes) {
+  return attributes && typeof attributes === "object" && "name" in attributes && "type" in attributes;
+}
+
+// src/form/components/HiddenInput.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function HiddenInput({ node }) {
+  if (!isUiNodeInputAttributes(node.attributes)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx4(
+    "input",
+    {
+      name: node.attributes.name,
+      type: "hidden",
+      value: node.attributes.value || "",
+      readOnly: true
+    }
+  );
+}
+
 // src/components/ui/button.tsx
 import "react";
 import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var buttonVariants = cva(
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var buttonVariants = cva2(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
@@ -115,7 +236,7 @@ function Button({
   ...props
 }) {
   const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx5(
     Comp,
     {
       "data-slot": "button",
@@ -125,11 +246,78 @@ function Button({
   );
 }
 
+// src/form/components/SubmitButton.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function SubmitButton({
+  node,
+  variant = "default",
+  className = "w-full"
+}) {
+  if (!isUiNodeInputAttributes(node.attributes)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx6(
+    Button,
+    {
+      type: "submit",
+      name: node.attributes.name,
+      value: node.attributes.value || "",
+      variant,
+      className,
+      disabled: node.attributes.disabled,
+      children: node.meta.label?.text || node.attributes.value || "Submit"
+    }
+  );
+}
+
+// src/form/components/Divider.tsx
+import { jsx as jsx7, jsxs } from "react/jsx-runtime";
+function Divider({ withText = false }) {
+  if (withText) {
+    return /* @__PURE__ */ jsxs("div", { className: "relative my-6", children: [
+      /* @__PURE__ */ jsx7("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx7("span", { className: "w-full border-t border-border" }) }),
+      /* @__PURE__ */ jsx7("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsx7("span", { className: "bg-background px-3 text-muted-foreground font-medium", children: "Or continue with" }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx7("div", { className: "border-t border-border my-6" });
+}
+
+// src/form/components/OidcGroup.tsx
+import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+function OidcGroup({
+  nodes,
+  flowAction,
+  flowMethod,
+  csrfToken,
+  groupIndex,
+  groupName
+}) {
+  const submitButtons = nodes.filter(
+    (node) => isUiNodeInputAttributes(node.attributes) && node.attributes.type === "submit"
+  );
+  return /* @__PURE__ */ jsxs2("div", { children: [
+    groupIndex > 0 && /* @__PURE__ */ jsx8(Divider, { withText: true }),
+    /* @__PURE__ */ jsx8("div", { className: "space-y-3", children: submitButtons.map((node, btnIndex) => /* @__PURE__ */ jsxs2(
+      "form",
+      {
+        action: flowAction,
+        method: flowMethod,
+        className: "w-full",
+        children: [
+          csrfToken && /* @__PURE__ */ jsx8(HiddenInput, { node: csrfToken }),
+          /* @__PURE__ */ jsx8(SubmitButton, { node, variant: "outline" })
+        ]
+      },
+      `${groupName}-${btnIndex}`
+    )) })
+  ] });
+}
+
 // src/components/ui/input.tsx
 import "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function Input({ className, type, ...props }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx9(
     "input",
     {
       type,
@@ -148,12 +336,12 @@ function Input({ className, type, ...props }) {
 // src/components/ui/label.tsx
 import "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function Label({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx10(
     LabelPrimitive.Root,
     {
       "data-slot": "label",
@@ -166,109 +354,393 @@ function Label({
   );
 }
 
-// src/components/ui/messages.tsx
-import * as React6 from "react";
-
-// src/components/ui/alert.tsx
-import * as React5 from "react";
-import { cva as cva2 } from "class-variance-authority";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var alertVariants = cva2(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-        warning: "border-yellow-500/50 text-yellow-700 bg-yellow-50 dark:border-yellow-500 dark:text-yellow-200 dark:bg-yellow-950/20 [&>svg]:text-yellow-600 dark:[&>svg]:text-yellow-200",
-        success: "border-green-500/50 text-green-700 bg-green-50 dark:border-green-500 dark:text-green-200 dark:bg-green-950/20 [&>svg]:text-green-600 dark:[&>svg]:text-green-200",
-        info: "border-blue-500/50 text-blue-700 bg-blue-50 dark:border-blue-500 dark:text-blue-200 dark:bg-blue-950/20 [&>svg]:text-blue-600 dark:[&>svg]:text-blue-200"
+// src/form/components/FormInput.tsx
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+function FormInput({ node }) {
+  if (!isUiNodeInputAttributes(node.attributes)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs3(Label, { htmlFor: node.attributes.name, children: [
+      node.meta.label?.text,
+      node.attributes.required && /* @__PURE__ */ jsx11("span", { className: "text-destructive ml-1", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx11(
+      Input,
+      {
+        id: node.attributes.name,
+        name: node.attributes.name,
+        type: node.attributes.type,
+        defaultValue: node.attributes.value || "",
+        required: node.attributes.required,
+        disabled: node.attributes.disabled,
+        autoComplete: node.attributes.autocomplete,
+        placeholder: `Enter your ${node.meta.label?.text?.toLowerCase() || node.attributes.name}`
       }
-    },
-    defaultVariants: {
-      variant: "default"
+    )
+  ] });
+}
+
+// src/form/utils.ts
+var TYPE_ORDER = {
+  hidden: 0,
+  text: 1,
+  email: 1,
+  password: 1,
+  checkbox: 1,
+  submit: 2
+};
+function sortNodes(nodes) {
+  return [...nodes].sort((a, b) => {
+    const aIsInput = isUiNodeInputAttributes(a.attributes);
+    const bIsInput = isUiNodeInputAttributes(b.attributes);
+    if (!aIsInput && !bIsInput) return 0;
+    if (!aIsInput) return 1;
+    if (!bIsInput) return -1;
+    const aAttrs = a.attributes;
+    const bAttrs = b.attributes;
+    const aOrder = TYPE_ORDER[aAttrs.type] ?? 1;
+    const bOrder = TYPE_ORDER[bAttrs.type] ?? 1;
+    return aOrder - bOrder;
+  });
+}
+function findSubmitButton(nodes) {
+  return nodes.find(
+    (node) => isUiNodeInputAttributes(node.attributes) && node.attributes.type === "submit"
+  );
+}
+function findAnchorNode(nodes) {
+  return nodes.find((node) => node.type === "a");
+}
+function filterInputNodes(nodes) {
+  return nodes.filter(
+    (node) => isUiNodeInputAttributes(node.attributes) && node.attributes.type !== "submit" && node.attributes.type !== "hidden"
+  );
+}
+function findCsrfToken(nodes) {
+  return nodes.find(
+    (node) => isUiNodeInputAttributes(node.attributes) && node.attributes.name === "csrf_token"
+  );
+}
+function groupNodesByGroup(nodes) {
+  return nodes.reduce((groups, node) => {
+    const group = node.group || "default";
+    if (!groups[group]) {
+      groups[group] = [];
     }
-  }
-);
-var Alert = React5.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx5(
-  "div",
-  {
-    ref,
-    role: "alert",
-    className: cn(alertVariants({ variant }), className),
-    ...props
-  }
-));
-Alert.displayName = "Alert";
-var AlertTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
-  "h5",
-  {
-    ref,
-    className: cn("mb-1 font-medium leading-none tracking-tight", className),
-    ...props
-  }
-));
-AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
-  "div",
-  {
-    ref,
-    className: cn("text-sm [&_p]:leading-relaxed", className),
-    ...props
-  }
-));
-AlertDescription.displayName = "AlertDescription";
+    groups[group].push(node);
+    return groups;
+  }, {});
+}
 
-// src/components/ui/messages.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var getMessageVariant = (type) => {
-  switch (type) {
-    case "error":
-      return "destructive";
-    case "success":
-      return "success";
-    case "info":
-      return "info";
-    case "11184809":
-      return "warning";
-    default:
-      return "default";
+// src/form/login.tsx
+import { jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+function LoginForm({ flow, Header, register_url }) {
+  const nodesByGroup = groupNodesByGroup(flow.ui.nodes);
+  const csrfToken = findCsrfToken(flow.ui.nodes);
+  const oidcNodes = nodesByGroup.oidc || [];
+  const defaultNodes = nodesByGroup.default || [];
+  const passwordNodes = nodesByGroup.password || [];
+  const identifierNodes = filterInputNodes(sortNodes(defaultNodes));
+  const passwordInputNodes = filterInputNodes(sortNodes(passwordNodes));
+  const submitButton = findSubmitButton(sortNodes(passwordNodes));
+  const registerHref = register_url && flow.return_to ? `${register_url}?return_to=${encodeURIComponent(flow.return_to)}` : register_url;
+  return /* @__PURE__ */ jsxs4("div", { children: [
+    /* @__PURE__ */ jsx12(Messages, { flow }),
+    /* @__PURE__ */ jsxs4(Card, { className: "w-full max-w-md mx-auto", children: [
+      Header && /* @__PURE__ */ jsx12(CardHeader, { children: /* @__PURE__ */ jsx12(CardTitle, { className: "text-center pb-1", children: Header }) }),
+      /* @__PURE__ */ jsxs4(CardContent, { className: "space-y-6", children: [
+        oidcNodes.length > 0 && /* @__PURE__ */ jsx12(
+          OidcGroup,
+          {
+            nodes: sortNodes(oidcNodes),
+            flowAction: flow.ui.action,
+            flowMethod: flow.ui.method,
+            csrfToken,
+            groupIndex: 0,
+            groupName: "oidc"
+          }
+        ),
+        /* @__PURE__ */ jsxs4("div", { children: [
+          oidcNodes.length > 0 && /* @__PURE__ */ jsx12(Divider, { withText: true }),
+          /* @__PURE__ */ jsx12("form", { action: flow.ui.action, method: flow.ui.method, children: /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
+            csrfToken && /* @__PURE__ */ jsx12(HiddenInput, { node: csrfToken }),
+            identifierNodes.map((node, idx) => /* @__PURE__ */ jsx12(FormInput, { node }, idx)),
+            passwordInputNodes.map((node, idx) => /* @__PURE__ */ jsx12(FormInput, { node }, idx)),
+            submitButton && /* @__PURE__ */ jsx12(SubmitButton, { node: submitButton })
+          ] }) }),
+          register_url && /* @__PURE__ */ jsxs4("div", { className: "mt-4 text-center text-sm", children: [
+            "Don't have an account?",
+            " ",
+            /* @__PURE__ */ jsx12(
+              "a",
+              {
+                href: registerHref,
+                className: "text-primary underline-offset-4 hover:underline",
+                children: "Go to Register"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/form/registration.tsx
+import { jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+function RegistrationForm({
+  flow,
+  Header,
+  login_url
+}) {
+  const nodesByGroup = groupNodesByGroup(flow.ui.nodes);
+  const csrfToken = findCsrfToken(flow.ui.nodes);
+  const oidcNodes = nodesByGroup.oidc || [];
+  const defaultNodes = nodesByGroup.default || [];
+  const profileNodes = nodesByGroup.profile || [];
+  const passwordNodes = nodesByGroup.password || [];
+  const inputNodes = filterInputNodes(
+    sortNodes([...defaultNodes, ...passwordNodes])
+  );
+  const hiddenNodes = [...defaultNodes, ...passwordNodes].filter(
+    (node) => isUiNodeInputAttributes(node.attributes) && node.attributes.type === "hidden" && node.attributes.name !== "csrf_token"
+  );
+  const submitButton = findSubmitButton(sortNodes(passwordNodes)) || findSubmitButton(sortNodes(profileNodes));
+  const loginHref = login_url && flow.return_to ? `${login_url}?return_to=${encodeURIComponent(flow.return_to)}` : login_url;
+  return /* @__PURE__ */ jsxs5("div", { children: [
+    /* @__PURE__ */ jsx13(Messages, { flow }),
+    /* @__PURE__ */ jsxs5(Card, { className: "w-full max-w-md mx-auto", children: [
+      Header && /* @__PURE__ */ jsx13(CardHeader, { children: /* @__PURE__ */ jsx13(CardTitle, { className: "text-center pb-1", children: Header }) }),
+      /* @__PURE__ */ jsxs5(CardContent, { className: "space-y-6", children: [
+        oidcNodes.length > 0 && /* @__PURE__ */ jsx13(
+          OidcGroup,
+          {
+            nodes: sortNodes(oidcNodes),
+            flowAction: flow.ui.action,
+            flowMethod: flow.ui.method,
+            csrfToken,
+            groupIndex: 0,
+            groupName: "oidc"
+          }
+        ),
+        /* @__PURE__ */ jsxs5("div", { children: [
+          oidcNodes.length > 0 && /* @__PURE__ */ jsx13(Divider, { withText: true }),
+          /* @__PURE__ */ jsx13("form", { action: flow.ui.action, method: flow.ui.method, children: /* @__PURE__ */ jsxs5("div", { className: "space-y-4", children: [
+            csrfToken && /* @__PURE__ */ jsx13(HiddenInput, { node: csrfToken }),
+            hiddenNodes.map((node, idx) => /* @__PURE__ */ jsx13(HiddenInput, { node }, `hidden-${idx}`)),
+            inputNodes.map((node, idx) => /* @__PURE__ */ jsx13(FormInput, { node }, idx)),
+            submitButton && /* @__PURE__ */ jsx13(SubmitButton, { node: submitButton })
+          ] }) }),
+          login_url && /* @__PURE__ */ jsxs5("div", { className: "mt-4 text-center text-sm", children: [
+            "Already have an account?",
+            " ",
+            /* @__PURE__ */ jsx13(
+              "a",
+              {
+                href: loginHref,
+                className: "text-primary underline-offset-4 hover:underline",
+                children: "Go to Login"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/form/verification.tsx
+import * as React8 from "react";
+
+// src/form/components/PinInput.tsx
+import * as React7 from "react";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+function PinInput({
+  node,
+  length = 6,
+  initialValue = ""
+}) {
+  if (!isUiNodeInputAttributes(node.attributes)) {
+    return null;
   }
-};
-var Messages = React6.forwardRef(
-  ({ flow, className, ...props }, ref) => {
-    if (!flow?.ui) return null;
-    const allMessages = [];
-    if (flow.ui.messages) {
-      allMessages.push(...flow.ui.messages);
+  const [pins, setPins] = React7.useState(() => {
+    if (initialValue) {
+      const sanitized = initialValue.replace(/[^0-9]/g, "").slice(0, length);
+      const pinArray = Array(length).fill("");
+      for (let i = 0; i < sanitized.length; i++) {
+        pinArray[i] = sanitized[i];
+      }
+      return pinArray;
     }
-    if (flow.ui.nodes) {
-      flow.ui.nodes.forEach((node) => {
-        if (node.messages) {
-          allMessages.push(...node.messages);
-        }
-      });
+    return Array(length).fill("");
+  });
+  const inputRefs = React7.useRef([]);
+  const handleChange = (index, value) => {
+    const sanitizedValue = value.replace(/[^0-9]/g, "").slice(0, 1);
+    const newPins = [...pins];
+    newPins[index] = sanitizedValue;
+    setPins(newPins);
+    if (sanitizedValue && index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
     }
-    if (allMessages.length === 0) return null;
-    return /* @__PURE__ */ jsx6(
-      "div",
+  };
+  const handleKeyDown = (index, e) => {
+    if (e.key === "Backspace" && !pins[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+    if (e.key === "ArrowLeft" && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+    if (e.key === "ArrowRight" && index < length - 1) {
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pastedData = e.clipboardData.getData("text").replace(/[^0-9]/g, "");
+    const newPins = [...pins];
+    for (let i = 0; i < Math.min(pastedData.length, length); i++) {
+      newPins[i] = pastedData[i];
+    }
+    setPins(newPins);
+    const nextEmptyIndex = newPins.findIndex((pin) => !pin);
+    const focusIndex = nextEmptyIndex === -1 ? length - 1 : nextEmptyIndex;
+    inputRefs.current[focusIndex]?.focus();
+  };
+  const combinedValue = pins.join("");
+  return /* @__PURE__ */ jsxs6("div", { className: "space-y-2 mb-6", children: [
+    /* @__PURE__ */ jsx14("div", { className: "flex gap-2 justify-center", children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx14(
+      "input",
       {
-        ref,
-        className: cn("w-full max-w-md mx-auto space-y-2 mb-4", className),
-        ...props,
-        children: allMessages.map((message) => /* @__PURE__ */ jsx6(Alert, { variant: getMessageVariant(message.type), children: /* @__PURE__ */ jsx6(AlertDescription, { children: message.text }) }, message.id))
+        ref: (el) => inputRefs.current[index] = el,
+        type: "text",
+        inputMode: "numeric",
+        maxLength: 1,
+        value: pins[index],
+        onChange: (e) => handleChange(index, e.target.value),
+        onKeyDown: (e) => handleKeyDown(index, e),
+        onPaste: index === 0 ? handlePaste : void 0,
+        disabled: isUiNodeInputAttributes(node.attributes) ? node.attributes.disabled : false,
+        className: cn(
+          "w-10 h-12 text-center text-lg font-semibold rounded-md border-2",
+          "border-input bg-background shadow-sm transition-all duration-200 outline-none",
+          "hover:border-ring/60",
+          "focus:border-ring focus:ring-4 focus:ring-ring/20 focus:scale-105",
+          "aria-invalid:border-destructive aria-invalid:ring-destructive/20",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+          pins[index] && "border-primary bg-primary/5"
+        ),
+        "aria-label": `Digit ${index + 1}`
+      },
+      index
+    )) }),
+    /* @__PURE__ */ jsx14(
+      "input",
+      {
+        type: "hidden",
+        id: node.attributes.name,
+        name: node.attributes.name,
+        value: combinedValue,
+        required: node.attributes.required
       }
-    );
+    )
+  ] });
+}
+
+// src/form/components/AnchorButton.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function AnchorButton({
+  node,
+  variant = "default",
+  className = "w-full"
+}) {
+  if (node.type !== "a" || !("href" in node.attributes)) {
+    return null;
   }
-);
-Messages.displayName = "Messages";
+  const href = node.attributes.href;
+  const title = node.attributes.title;
+  const label = node.meta?.label;
+  const buttonText = (typeof title === "object" && title !== null && "text" in title ? title.text : typeof title === "string" ? title : null) || (label && typeof label === "object" && "text" in label ? label.text : null) || "Continue";
+  return /* @__PURE__ */ jsx15(Button, { variant, className, asChild: true, children: /* @__PURE__ */ jsx15("a", { href, children: buttonText }) });
+}
 
-// src/form/index.tsx
-import { jsx as jsx7, jsxs } from "react/jsx-runtime";
-function isUiNodeInputAttributes(attributes) {
+// src/form/verification.tsx
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+function VerificationForm({
+  flow,
+  Header,
+  autoRedirect = true
+}) {
+  const nodesByGroup = groupNodesByGroup(flow.ui.nodes);
+  const csrfToken = findCsrfToken(flow.ui.nodes);
+  const codeNodes = nodesByGroup.code || [];
+  const inputNodes = filterInputNodes(sortNodes(codeNodes));
+  const submitButton = findSubmitButton(sortNodes(codeNodes));
+  const anchorNode = findAnchorNode(sortNodes(codeNodes));
+  React8.useEffect(() => {
+    if (autoRedirect && anchorNode && anchorNode.type === "a" && "href" in anchorNode.attributes) {
+      const href = anchorNode.attributes.href;
+      if (href && typeof window !== "undefined") {
+        window.location.href = href;
+      }
+    }
+  }, [autoRedirect, anchorNode]);
+  return /* @__PURE__ */ jsxs7("div", { children: [
+    /* @__PURE__ */ jsx16(Messages, { flow }),
+    /* @__PURE__ */ jsxs7(Card, { className: "w-full max-w-md mx-auto", children: [
+      /* @__PURE__ */ jsx16(CardHeader, { children: /* @__PURE__ */ jsx16(CardTitle, { className: "text-center pb-1", children: Header || "Verification Code" }) }),
+      /* @__PURE__ */ jsx16(CardContent, { children: /* @__PURE__ */ jsx16("form", { action: flow.ui.action, method: flow.ui.method, children: /* @__PURE__ */ jsxs7("div", { className: "space-y-4", children: [
+        csrfToken && /* @__PURE__ */ jsx16(HiddenInput, { node: csrfToken }),
+        inputNodes.map((node, idx) => {
+          const isCodeInput = node.attributes.node_type === "input" && "name" in node.attributes && node.attributes.name === "code";
+          const initialValue = isCodeInput && "value" in node.attributes ? String(node.attributes.value || "") : "";
+          return isCodeInput ? /* @__PURE__ */ jsx16(
+            PinInput,
+            {
+              node,
+              length: 6,
+              initialValue
+            },
+            idx
+          ) : /* @__PURE__ */ jsx16(FormInput, { node }, idx);
+        }),
+        submitButton && /* @__PURE__ */ jsx16(SubmitButton, { node: submitButton }),
+        !submitButton && anchorNode && /* @__PURE__ */ jsx16(AnchorButton, { node: anchorNode })
+      ] }) }) })
+    ] })
+  ] });
+}
+
+// src/form/recovery.tsx
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+function RecoveryForm({ flow, Header }) {
+  const nodesByGroup = groupNodesByGroup(flow.ui.nodes);
+  const csrfToken = findCsrfToken(flow.ui.nodes);
+  const codeNodes = nodesByGroup.code || [];
+  const linkNodes = nodesByGroup.link || [];
+  const activeNodes = codeNodes.length > 0 ? codeNodes : linkNodes;
+  const inputNodes = filterInputNodes(sortNodes(activeNodes));
+  const submitButton = findSubmitButton(sortNodes(activeNodes));
+  return /* @__PURE__ */ jsxs8("div", { children: [
+    /* @__PURE__ */ jsx17(Messages, { flow }),
+    /* @__PURE__ */ jsxs8(Card, { className: "w-full max-w-md mx-auto", children: [
+      Header && /* @__PURE__ */ jsx17(CardHeader, { children: /* @__PURE__ */ jsx17(CardTitle, { className: "text-center pb-1", children: Header }) }),
+      /* @__PURE__ */ jsx17(CardContent, { children: /* @__PURE__ */ jsx17("form", { action: flow.ui.action, method: flow.ui.method, children: /* @__PURE__ */ jsxs8("div", { className: "space-y-4", children: [
+        csrfToken && /* @__PURE__ */ jsx17(HiddenInput, { node: csrfToken }),
+        inputNodes.map((node, idx) => /* @__PURE__ */ jsx17(FormInput, { node }, idx)),
+        submitButton && /* @__PURE__ */ jsx17(SubmitButton, { node: submitButton })
+      ] }) }) })
+    ] })
+  ] });
+}
+
+// src/form/settings.tsx
+import { jsx as jsx18, jsxs as jsxs9 } from "react/jsx-runtime";
+function isUiNodeInputAttributes2(attributes) {
   return attributes && typeof attributes === "object" && "name" in attributes && "type" in attributes;
 }
-function CustomFlowForm({ flow, Header }) {
+function SettingsForm({ flow }) {
   const nodesByGroup = flow.ui.nodes.reduce((groups, node) => {
     const group = node.group || "default";
     if (!groups[group]) {
@@ -277,150 +749,128 @@ function CustomFlowForm({ flow, Header }) {
     groups[group].push(node);
     return groups;
   }, {});
-  const oidcNodes = nodesByGroup.oidc || [];
-  const regularNodes = Object.entries(nodesByGroup).filter(([group]) => group !== "oidc").flatMap(([, nodes]) => nodes);
-  const csrfToken = regularNodes.find(
-    (node) => isUiNodeInputAttributes(node.attributes) && node.attributes.name === "csrf_token"
+  const csrfToken = flow.ui.nodes.find(
+    (node) => isUiNodeInputAttributes2(node.attributes) && node.attributes.name === "csrf_token"
   );
-  const hasSubmitButton = flow.ui.nodes.some(
-    (node) => isUiNodeInputAttributes(node.attributes) && node.attributes.type === "submit"
+  const settingsGroups = Object.entries(nodesByGroup).filter(
+    ([group]) => group !== "default" && group !== "oidc"
   );
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx7(Messages, { flow }),
-    /* @__PURE__ */ jsxs(Card, { className: "w-full max-w-md mx-auto", children: [
-      Header && /* @__PURE__ */ jsx7(CardHeader, { children: /* @__PURE__ */ jsx7(CardTitle, { className: "text-center pb-1", children: Header }) }),
-      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-6", children: [
-        oidcNodes.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-          oidcNodes.map((node, index) => {
-            if (isUiNodeInputAttributes(node.attributes) && node.attributes.type === "submit") {
-              return /* @__PURE__ */ jsxs(
-                "form",
+  const groupTitles = {
+    profile: "Profile",
+    password: "Password",
+    totp: "Authenticator App",
+    webauthn: "Security Keys",
+    lookup_secret: "Backup Recovery Codes",
+    passkey: "Passkeys"
+  };
+  return /* @__PURE__ */ jsxs9("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsx18(Messages, { flow }),
+    settingsGroups.map(([groupName, nodes]) => {
+      const submitButton = nodes.find(
+        (node) => isUiNodeInputAttributes2(node.attributes) && node.attributes.type === "submit"
+      );
+      const inputNodes = nodes.filter(
+        (node) => isUiNodeInputAttributes2(node.attributes) && node.attributes.type !== "submit" && node.attributes.type !== "hidden"
+      );
+      const imageNodes = nodes.filter((node) => node.type === "img");
+      const textNodes = nodes.filter((node) => node.type === "text");
+      return /* @__PURE__ */ jsxs9(Card, { className: "w-full max-w-2xl mx-auto", children: [
+        /* @__PURE__ */ jsx18(CardHeader, { children: /* @__PURE__ */ jsx18(CardTitle, { children: groupTitles[groupName] || groupName }) }),
+        /* @__PURE__ */ jsx18(CardContent, { children: /* @__PURE__ */ jsx18("form", { action: flow.ui.action, method: flow.ui.method, children: /* @__PURE__ */ jsxs9("div", { className: "space-y-4", children: [
+          csrfToken && isUiNodeInputAttributes2(csrfToken.attributes) && /* @__PURE__ */ jsx18(
+            "input",
+            {
+              name: csrfToken.attributes.name,
+              type: "hidden",
+              value: csrfToken.attributes.value || "",
+              readOnly: true
+            }
+          ),
+          imageNodes.map((node, index) => {
+            if (node.type === "img" && "src" in node.attributes) {
+              const imgAttrs = node.attributes;
+              return /* @__PURE__ */ jsx18(
+                "div",
                 {
-                  action: flow.ui.action,
-                  method: flow.ui.method,
-                  className: "w-full",
-                  children: [
-                    csrfToken && isUiNodeInputAttributes(csrfToken.attributes) && /* @__PURE__ */ jsx7(
-                      "input",
-                      {
-                        name: csrfToken.attributes.name,
-                        type: "hidden",
-                        value: csrfToken.attributes.value || "",
-                        readOnly: true
-                      }
-                    ),
-                    /* @__PURE__ */ jsx7(
-                      Button,
-                      {
-                        type: "submit",
-                        name: node.attributes.name,
-                        value: node.attributes.value || "",
-                        variant: "outline",
-                        className: "w-full",
-                        children: node.meta.label?.text || node.attributes.value || "Sign in"
-                      }
-                    )
-                  ]
+                  className: "flex justify-center",
+                  children: /* @__PURE__ */ jsx18(
+                    "img",
+                    {
+                      src: imgAttrs.src,
+                      alt: node.meta.label?.text || "QR Code",
+                      width: imgAttrs.width,
+                      height: imgAttrs.height,
+                      className: "border rounded-lg"
+                    }
+                  )
                 },
-                `oidc-${index}`
+                `img-${index}`
               );
             }
             return null;
           }),
-          regularNodes.some(
-            (node) => isUiNodeInputAttributes(node.attributes) && !["hidden", "submit"].includes(node.attributes.type)
-          ) && /* @__PURE__ */ jsxs("div", { className: "relative my-6", children: [
-            /* @__PURE__ */ jsx7("div", { className: "absolute inset-0 flex items-center", children: /* @__PURE__ */ jsx7("span", { className: "w-full border-t border-border" }) }),
-            /* @__PURE__ */ jsx7("div", { className: "relative flex justify-center text-xs uppercase", children: /* @__PURE__ */ jsx7("span", { className: "bg-background px-3 text-muted-foreground font-medium", children: "Or continue with email" }) })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("form", { action: flow.ui.action, method: flow.ui.method, children: [
-          regularNodes.map((node) => {
-            if (isUiNodeInputAttributes(node.attributes)) {
-              const isSubmitButton = node.attributes.type === "submit";
-              const isHiddenField = node.attributes.type === "hidden";
-              const isVisibleField = !isHiddenField && !isSubmitButton;
-              if (isHiddenField) {
-                return /* @__PURE__ */ jsx7(
-                  "input",
-                  {
-                    name: node.attributes.name,
-                    type: "hidden",
-                    value: node.attributes.value || "",
-                    readOnly: true
-                  },
-                  node.attributes.name
-                );
-              }
-              if (isSubmitButton) {
-                return /* @__PURE__ */ jsx7(
-                  Button,
+          textNodes.map((node, index) => {
+            if (node.type === "text" && "text" in node.attributes) {
+              const textContent = typeof node.attributes.text === "string" ? node.attributes.text : node.attributes.text?.text || "";
+              return /* @__PURE__ */ jsxs9("div", { className: "space-y-2", children: [
+                node.meta.label?.text && /* @__PURE__ */ jsx18(Label, { className: "text-sm text-muted-foreground", children: node.meta.label.text }),
+                /* @__PURE__ */ jsx18("div", { className: "p-3 bg-muted rounded-md font-mono text-sm break-all", children: textContent })
+              ] }, `text-${index}`);
+            }
+            return null;
+          }),
+          inputNodes.map((node) => {
+            if (isUiNodeInputAttributes2(node.attributes)) {
+              return /* @__PURE__ */ jsxs9("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ jsxs9(Label, { htmlFor: node.attributes.name, children: [
+                  node.meta.label?.text,
+                  node.attributes.required && /* @__PURE__ */ jsx18("span", { className: "text-destructive ml-1", children: "*" })
+                ] }),
+                /* @__PURE__ */ jsx18(
+                  Input,
                   {
-                    type: "submit",
+                    id: node.attributes.name,
                     name: node.attributes.name,
-                    value: node.attributes.value || "",
-                    className: "w-full mt-2",
-                    children: node.meta.label?.text || node.attributes.value || "Submit"
-                  },
-                  node.attributes.name
-                );
-              }
-              if (isVisibleField && [
-                "default",
-                "password",
-                "code",
-                "webauthn",
-                "passkey",
-                "totp",
-                "lookup_secret",
-                "profile"
-              ].includes(node.group)) {
-                return /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: "space-y-2 mb-4",
-                    children: [
-                      /* @__PURE__ */ jsxs(Label, { htmlFor: node.attributes.name, children: [
-                        node.meta.label?.text,
-                        node.attributes.required && /* @__PURE__ */ jsx7("span", { className: "text-destructive ml-1", children: "*" })
-                      ] }),
-                      /* @__PURE__ */ jsx7(
-                        Input,
-                        {
-                          id: node.attributes.name,
-                          name: node.attributes.name,
-                          type: node.attributes.type,
-                          defaultValue: node.attributes.value || "",
-                          required: node.attributes.required,
-                          placeholder: `Enter your ${node.meta.label?.text?.toLowerCase() || node.attributes.name}`
-                        }
-                      )
-                    ]
-                  },
-                  node.meta.label?.id || node.attributes.name
-                );
-              }
+                    type: node.attributes.type,
+                    defaultValue: node.attributes.value || "",
+                    required: node.attributes.required,
+                    disabled: node.attributes.disabled,
+                    autoComplete: node.attributes.autocomplete,
+                    placeholder: `Enter ${node.meta.label?.text?.toLowerCase() || node.attributes.name}`
+                  }
+                )
+              ] }, node.attributes.name);
             }
             return null;
           }),
-          !hasSubmitButton && !oidcNodes.length && /* @__PURE__ */ jsx7(Button, { type: "submit", className: "w-full", children: "Submit" })
-        ] })
-      ] })
-    ] })
+          submitButton && isUiNodeInputAttributes2(submitButton.attributes) && /* @__PURE__ */ jsx18(
+            Button,
+            {
+              type: "submit",
+              name: submitButton.attributes.name,
+              value: submitButton.attributes.value || "",
+              className: "w-full",
+              disabled: submitButton.attributes.disabled,
+              children: submitButton.meta.label?.text || submitButton.attributes.value || "Save"
+            }
+          )
+        ] }) }) })
+      ] }, groupName);
+    })
   ] });
 }
 
 // src/tenant-switcher/index.tsx
-import * as React8 from "react";
+import * as React10 from "react";
 
 // src/components/ui/select.tsx
-import * as React7 from "react";
+import * as React9 from "react";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { Check, ChevronDown, ChevronUp } from "lucide-react";
-import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs10 } from "react/jsx-runtime";
 var Select = SelectPrimitive.Root;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs2(
+var SelectTrigger = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs10(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -431,12 +881,12 @@ var SelectTrigger = React7.forwardRef(({ className, children, ...props }, ref) =
     ...props,
     children: [
       children,
-      /* @__PURE__ */ jsx8(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx8(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+      /* @__PURE__ */ jsx19(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx19(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
     ]
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var SelectScrollUpButton = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -445,11 +895,11 @@ var SelectScrollUpButton = React7.forwardRef(({ className, ...props }, ref) => /
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx8(ChevronUp, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx19(ChevronUp, { className: "h-4 w-4" })
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var SelectScrollDownButton = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -458,11 +908,11 @@ var SelectScrollDownButton = React7.forwardRef(({ className, ...props }, ref) =>
       className
     ),
     ...props,
-    children: /* @__PURE__ */ jsx8(ChevronDown, { className: "h-4 w-4" })
+    children: /* @__PURE__ */ jsx19(ChevronDown, { className: "h-4 w-4" })
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React7.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx8(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs2(
+var SelectContent = React9.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx19(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs10(
   SelectPrimitive.Content,
   {
     ref,
@@ -474,8 +924,8 @@ var SelectContent = React7.forwardRef(({ className, children, position = "popper
     position,
     ...props,
     children: [
-      /* @__PURE__ */ jsx8(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx19(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx19(
         SelectPrimitive.Viewport,
         {
           className: cn(
@@ -485,12 +935,12 @@ var SelectContent = React7.forwardRef(({ className, children, position = "popper
           children
         }
       ),
-      /* @__PURE__ */ jsx8(SelectScrollDownButton, {})
+      /* @__PURE__ */ jsx19(SelectScrollDownButton, {})
     ]
   }
 ) }));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var SelectLabel = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
   SelectPrimitive.Label,
   {
     ref,
@@ -499,7 +949,7 @@ var SelectLabel = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React7.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs2(
+var SelectItem = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs10(
   SelectPrimitive.Item,
   {
     ref,
@@ -509,13 +959,13 @@ var SelectItem = React7.forwardRef(({ className, children, ...props }, ref) => /
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx8("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx8(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx8(Check, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ jsx8(SelectPrimitive.ItemText, { children })
+      /* @__PURE__ */ jsx19("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx19(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx19(Check, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx19(SelectPrimitive.ItemText, { children })
     ]
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+var SelectSeparator = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx19(
   SelectPrimitive.Separator,
   {
     ref,
@@ -526,7 +976,7 @@ var SelectSeparator = React7.forwardRef(({ className, ...props }, ref) => /* @__
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 // src/tenant-switcher/index.tsx
-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 function SwitchActiveTenant({
   tenants,
   currentTenantId,
@@ -535,7 +985,7 @@ function SwitchActiveTenant({
   className,
   onTenantChange
 }) {
-  const [isLoading, setIsLoading] = React8.useState(false);
+  const [isLoading, setIsLoading] = React10.useState(false);
   const handleTenantChange = async (tenantId) => {
     if (tenantId === currentTenantId) return;
     setIsLoading(true);
@@ -553,24 +1003,24 @@ function SwitchActiveTenant({
     }
   };
   const currentTenant = tenants.find((tenant) => tenant.id === currentTenantId);
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs11(
     Select,
     {
       value: currentTenantId,
       onValueChange: handleTenantChange,
       disabled: isLoading,
       children: [
-        /* @__PURE__ */ jsx9(SelectTrigger, { className: cn("max-w-64", className), children: /* @__PURE__ */ jsx9(SelectValue, { placeholder, children: currentTenant ? currentTenant.name : placeholder }) }),
-        /* @__PURE__ */ jsx9(SelectContent, { children: tenants.map((tenant) => /* @__PURE__ */ jsx9(SelectItem, { value: tenant.id, children: tenant.name }, tenant.id)) })
+        /* @__PURE__ */ jsx20(SelectTrigger, { className: cn("max-w-64", className), children: /* @__PURE__ */ jsx20(SelectValue, { placeholder, children: currentTenant ? currentTenant.name : placeholder }) }),
+        /* @__PURE__ */ jsx20(SelectContent, { children: tenants.map((tenant) => /* @__PURE__ */ jsx20(SelectItem, { value: tenant.id, children: tenant.name }, tenant.id)) })
       ]
     }
   );
 }
 
 // src/pricing-table/index.tsx
-import * as React9 from "react";
+import * as React11 from "react";
 import { Check as Check2, Star, ChevronLeft, ChevronRight } from "lucide-react";
-import { Fragment, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 var getCurrencySymbol = (currency) => {
   const symbols = {
     USD: "$",
@@ -611,7 +1061,7 @@ function PricingCard({
 }) {
   const ui = product.ui || {};
   const isHighlighted = ui.highlighted;
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       className: cn(
@@ -619,11 +1069,11 @@ function PricingCard({
         isHighlighted ? "relative" : ""
       ),
       children: [
-        /* @__PURE__ */ jsx10("div", { className: "h-4 flex-shrink-0 relative", children: ui.badge && /* @__PURE__ */ jsx10("div", { className: "absolute top-0 left-1/2 transform -translate-x-1/2 z-10", children: /* @__PURE__ */ jsxs4("div", { className: "bg-primary text-primary-foreground px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1 whitespace-nowrap shadow-md", children: [
-          ui.badge === "Most Popular" && /* @__PURE__ */ jsx10(Star, { className: "w-3 h-3" }),
+        /* @__PURE__ */ jsx21("div", { className: "h-4 flex-shrink-0 relative", children: ui.badge && /* @__PURE__ */ jsx21("div", { className: "absolute top-0 left-1/2 transform -translate-x-1/2 z-10", children: /* @__PURE__ */ jsxs12("div", { className: "bg-primary text-primary-foreground px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1 whitespace-nowrap shadow-md", children: [
+          ui.badge === "Most Popular" && /* @__PURE__ */ jsx21(Star, { className: "w-3 h-3" }),
           ui.badge
         ] }) }) }),
-        /* @__PURE__ */ jsxs4(
+        /* @__PURE__ */ jsxs12(
           Card,
           {
             className: cn(
@@ -632,36 +1082,36 @@ function PricingCard({
               isSelected && "ring-2 ring-primary"
             ),
             children: [
-              /* @__PURE__ */ jsxs4(CardHeader, { className: "text-center", children: [
-                /* @__PURE__ */ jsx10(CardTitle, { className: "text-xl font-bold", children: ui.display_name || product.name }),
-                ui.tagline && /* @__PURE__ */ jsx10(CardDescription, { className: "text-base", children: ui.tagline })
+              /* @__PURE__ */ jsxs12(CardHeader, { className: "text-center", children: [
+                /* @__PURE__ */ jsx21(CardTitle, { className: "text-xl font-bold", children: ui.display_name || product.name }),
+                ui.tagline && /* @__PURE__ */ jsx21(CardDescription, { className: "text-base", children: ui.tagline })
               ] }),
-              /* @__PURE__ */ jsxs4(CardContent, { className: "flex-1 space-y-6", children: [
-                /* @__PURE__ */ jsxs4("div", { className: "text-center", children: [
-                  /* @__PURE__ */ jsx10("div", { className: "text-3xl font-bold", children: formatPrice(displayedPrice) }),
-                  /* @__PURE__ */ jsx10("div", { className: "text-sm text-muted-foreground", children: formatBillingPeriod(displayedPrice) })
+              /* @__PURE__ */ jsxs12(CardContent, { className: "flex-1 space-y-6", children: [
+                /* @__PURE__ */ jsxs12("div", { className: "text-center", children: [
+                  /* @__PURE__ */ jsx21("div", { className: "text-3xl font-bold", children: formatPrice(displayedPrice) }),
+                  /* @__PURE__ */ jsx21("div", { className: "text-sm text-muted-foreground", children: formatBillingPeriod(displayedPrice) })
                 ] }),
-                (ui.features && ui.features.length > 0 || displayedPrice.ui?.features?.length > 0 || displayedPrice.ui?.limits?.length > 0) && /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
-                  ui.features && ui.features.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsx10("h4", { className: "font-medium text-sm text-muted-foreground uppercase tracking-wide", children: "Features" }),
-                    /* @__PURE__ */ jsx10("ul", { className: "space-y-2", children: ui.features.map((feature, index) => /* @__PURE__ */ jsxs4("li", { className: "flex items-start gap-2", children: [
-                      /* @__PURE__ */ jsx10(Check2, { className: "w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" }),
-                      /* @__PURE__ */ jsx10("span", { className: "text-sm", children: feature })
+                (ui.features && ui.features.length > 0 || displayedPrice.ui?.features?.length > 0 || displayedPrice.ui?.limits?.length > 0) && /* @__PURE__ */ jsxs12("div", { className: "space-y-4", children: [
+                  ui.features && ui.features.length > 0 && /* @__PURE__ */ jsxs12("div", { className: "space-y-2", children: [
+                    /* @__PURE__ */ jsx21("h4", { className: "font-medium text-sm text-muted-foreground uppercase tracking-wide", children: "Features" }),
+                    /* @__PURE__ */ jsx21("ul", { className: "space-y-2", children: ui.features.map((feature, index) => /* @__PURE__ */ jsxs12("li", { className: "flex items-start gap-2", children: [
+                      /* @__PURE__ */ jsx21(Check2, { className: "w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" }),
+                      /* @__PURE__ */ jsx21("span", { className: "text-sm", children: feature })
                     ] }, index)) })
                   ] }),
-                  displayedPrice.ui?.features && displayedPrice.ui.features.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsx10("h4", { className: "font-medium text-sm text-muted-foreground uppercase tracking-wide", children: "This Plan" }),
-                    /* @__PURE__ */ jsx10("ul", { className: "space-y-2", children: displayedPrice.ui.features.map(
-                      (feature, index) => /* @__PURE__ */ jsxs4("li", { className: "flex items-start gap-2", children: [
-                        /* @__PURE__ */ jsx10(Check2, { className: "w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" }),
-                        /* @__PURE__ */ jsx10("span", { className: "text-sm", children: feature })
+                  displayedPrice.ui?.features && displayedPrice.ui.features.length > 0 && /* @__PURE__ */ jsxs12("div", { className: "space-y-2", children: [
+                    /* @__PURE__ */ jsx21("h4", { className: "font-medium text-sm text-muted-foreground uppercase tracking-wide", children: "This Plan" }),
+                    /* @__PURE__ */ jsx21("ul", { className: "space-y-2", children: displayedPrice.ui.features.map(
+                      (feature, index) => /* @__PURE__ */ jsxs12("li", { className: "flex items-start gap-2", children: [
+                        /* @__PURE__ */ jsx21(Check2, { className: "w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" }),
+                        /* @__PURE__ */ jsx21("span", { className: "text-sm", children: feature })
                       ] }, index)
                     ) })
                   ] }),
-                  displayedPrice.ui?.limits && displayedPrice.ui.limits.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
-                    /* @__PURE__ */ jsx10("h4", { className: "font-medium text-sm text-muted-foreground uppercase tracking-wide", children: "Usage Limits" }),
-                    /* @__PURE__ */ jsx10("ul", { className: "space-y-1", children: displayedPrice.ui.limits.map(
-                      (limit, index) => /* @__PURE__ */ jsx10(
+                  displayedPrice.ui?.limits && displayedPrice.ui.limits.length > 0 && /* @__PURE__ */ jsxs12("div", { className: "space-y-2", children: [
+                    /* @__PURE__ */ jsx21("h4", { className: "font-medium text-sm text-muted-foreground uppercase tracking-wide", children: "Usage Limits" }),
+                    /* @__PURE__ */ jsx21("ul", { className: "space-y-1", children: displayedPrice.ui.limits.map(
+                      (limit, index) => /* @__PURE__ */ jsx21(
                         "li",
                         {
                           className: "text-sm text-muted-foreground",
@@ -673,7 +1123,7 @@ function PricingCard({
                   ] })
                 ] })
               ] }),
-              /* @__PURE__ */ jsx10(CardFooter, { children: /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx21(CardFooter, { children: /* @__PURE__ */ jsx21(
                 Button,
                 {
                   className: "w-full",
@@ -700,24 +1150,24 @@ function PricingTable({
   showPricingToggle = false,
   defaultInterval = "month"
 }) {
-  const [selectedInterval, setSelectedInterval] = React9.useState(defaultInterval);
-  const [carouselIndex, setCarouselIndex] = React9.useState(0);
-  const sortedProducts = React9.useMemo(
+  const [selectedInterval, setSelectedInterval] = React11.useState(defaultInterval);
+  const [carouselIndex, setCarouselIndex] = React11.useState(0);
+  const sortedProducts = React11.useMemo(
     () => [...products].sort(
       (a, b) => (a.ui?.sort_order ?? 999) - (b.ui?.sort_order ?? 999)
     ),
     [products]
   );
-  const hasMultipleIntervals = React9.useMemo(
+  const hasMultipleIntervals = React11.useMemo(
     () => products.some(
       (p) => new Set(p.prices.map((price) => price.interval)).size > 1
     ),
     [products]
   );
-  const getDisplayedPrice = (product) => product.prices.find((p) => p.interval === selectedInterval) || product.prices[0];
+  const getDisplayedPrice = (product) => product.prices.find((price) => price.interval === selectedInterval) || product.prices[0];
   const renderCard = (product) => {
     const displayedPrice = getDisplayedPrice(product);
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx21(
       PricingCard,
       {
         product,
@@ -727,8 +1177,8 @@ function PricingTable({
       }
     );
   };
-  const desktopCarousel = /* @__PURE__ */ jsxs4("div", { className: "relative max-w-7xl mx-auto", children: [
-    /* @__PURE__ */ jsx10(
+  const desktopCarousel = /* @__PURE__ */ jsxs12("div", { className: "relative max-w-7xl mx-auto", children: [
+    /* @__PURE__ */ jsx21(
       Button,
       {
         variant: "ghost",
@@ -736,15 +1186,15 @@ function PricingTable({
         className: "absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-4 z-10 bg-white shadow-lg border hover:bg-gray-50 disabled:opacity-50",
         onClick: () => setCarouselIndex(Math.max(0, carouselIndex - 1)),
         disabled: carouselIndex === 0,
-        children: /* @__PURE__ */ jsx10(ChevronLeft, { className: "w-4 h-4" })
+        children: /* @__PURE__ */ jsx21(ChevronLeft, { className: "w-4 h-4" })
       }
     ),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx21(
       "div",
       {
         className: "overflow-hidden mx-auto",
         style: { width: `${3 * CARD_WIDTH + 2 * GAP}px` },
-        children: /* @__PURE__ */ jsx10(
+        children: /* @__PURE__ */ jsx21(
           "div",
           {
             className: "flex items-stretch transition-transform duration-300 ease-in-out",
@@ -752,7 +1202,7 @@ function PricingTable({
               transform: `translateX(-${carouselIndex * (CARD_WIDTH + GAP)}px)`,
               gap: `${GAP}px`
             },
-            children: sortedProducts.map((p) => /* @__PURE__ */ jsx10(
+            children: sortedProducts.map((p) => /* @__PURE__ */ jsx21(
               "div",
               {
                 style: { width: `${CARD_WIDTH}px` },
@@ -765,7 +1215,7 @@ function PricingTable({
         )
       }
     ),
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx21(
       Button,
       {
         variant: "ghost",
@@ -775,12 +1225,12 @@ function PricingTable({
           Math.min(sortedProducts.length - 3, carouselIndex + 1)
         ),
         disabled: carouselIndex >= sortedProducts.length - 3,
-        children: /* @__PURE__ */ jsx10(ChevronRight, { className: "w-4 h-4" })
+        children: /* @__PURE__ */ jsx21(ChevronRight, { className: "w-4 h-4" })
       }
     ),
-    /* @__PURE__ */ jsx10("div", { className: "flex justify-center mt-6 space-x-2", children: Array.from(
+    /* @__PURE__ */ jsx21("div", { className: "flex justify-center mt-6 space-x-2", children: Array.from(
       { length: Math.max(1, sortedProducts.length - 2) },
-      (_, i) => /* @__PURE__ */ jsx10(
+      (_, i) => /* @__PURE__ */ jsx21(
         "button",
         {
           onClick: () => setCarouselIndex(i),
@@ -794,12 +1244,12 @@ function PricingTable({
       )
     ) })
   ] });
-  const staticLayout = /* @__PURE__ */ jsx10(
+  const staticLayout = /* @__PURE__ */ jsx21(
     "div",
     {
       className: "flex flex-row items-stretch justify-center",
       style: { gap: `${GAP}px` },
-      children: sortedProducts.map((p) => /* @__PURE__ */ jsx10(
+      children: sortedProducts.map((p) => /* @__PURE__ */ jsx21(
         "div",
         {
           style: { width: `${CARD_WIDTH}px` },
@@ -810,9 +1260,9 @@ function PricingTable({
       ))
     }
   );
-  return /* @__PURE__ */ jsxs4("div", { className: cn("w-full", className), children: [
-    showPricingToggle && hasMultipleIntervals && /* @__PURE__ */ jsx10("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ jsxs4("div", { className: "flex bg-gray-100 p-1 rounded-lg", children: [
-      /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs12("div", { className: cn("w-full", className), children: [
+    showPricingToggle && hasMultipleIntervals && /* @__PURE__ */ jsx21("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ jsxs12("div", { className: "flex bg-gray-100 p-1 rounded-lg", children: [
+      /* @__PURE__ */ jsx21(
         Button,
         {
           variant: selectedInterval === "month" ? "default" : "ghost",
@@ -822,7 +1272,7 @@ function PricingTable({
           children: "Monthly"
         }
       ),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx21(
         Button,
         {
           variant: selectedInterval === "year" ? "default" : "ghost",
@@ -833,20 +1283,20 @@ function PricingTable({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxs4("div", { className: "lg:hidden relative", children: [
-      /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsxs12("div", { className: "lg:hidden relative", children: [
+      /* @__PURE__ */ jsx21(
         "div",
         {
           className: "overflow-hidden mx-auto",
           style: { width: `${CARD_WIDTH}px` },
-          children: /* @__PURE__ */ jsx10(
+          children: /* @__PURE__ */ jsx21(
             "div",
             {
               className: "flex transition-transform duration-300 ease-in-out items-stretch",
               style: {
                 transform: `translateX(-${carouselIndex * CARD_WIDTH}px)`
               },
-              children: sortedProducts.map((product) => /* @__PURE__ */ jsx10(
+              children: sortedProducts.map((product) => /* @__PURE__ */ jsx21(
                 "div",
                 {
                   className: "flex-shrink-0",
@@ -859,8 +1309,8 @@ function PricingTable({
           )
         }
       ),
-      sortedProducts.length > 1 && /* @__PURE__ */ jsxs4(Fragment, { children: [
-        /* @__PURE__ */ jsx10(
+      sortedProducts.length > 1 && /* @__PURE__ */ jsxs12(Fragment, { children: [
+        /* @__PURE__ */ jsx21(
           Button,
           {
             variant: "ghost",
@@ -868,10 +1318,10 @@ function PricingTable({
             className: "absolute left-0 top-1/2 -translate-y-1/2 -translate-x-2 z-10 bg-white shadow-lg border hover:bg-gray-50 disabled:opacity-50",
             onClick: () => setCarouselIndex((prev) => Math.max(0, prev - 1)),
             disabled: carouselIndex === 0,
-            children: /* @__PURE__ */ jsx10(ChevronLeft, { className: "w-5 h-5" })
+            children: /* @__PURE__ */ jsx21(ChevronLeft, { className: "w-5 h-5" })
           }
         ),
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx21(
           Button,
           {
             variant: "ghost",
@@ -881,10 +1331,10 @@ function PricingTable({
               (prev) => Math.min(sortedProducts.length - 1, prev + 1)
             ),
             disabled: carouselIndex >= sortedProducts.length - 1,
-            children: /* @__PURE__ */ jsx10(ChevronRight, { className: "w-5 h-5" })
+            children: /* @__PURE__ */ jsx21(ChevronRight, { className: "w-5 h-5" })
           }
         ),
-        /* @__PURE__ */ jsx10("div", { className: "flex justify-center mt-6 space-x-2", children: Array.from({ length: sortedProducts.length }, (_, i) => /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx21("div", { className: "flex justify-center mt-6 space-x-2", children: Array.from({ length: sortedProducts.length }, (_, i) => /* @__PURE__ */ jsx21(
           "button",
           {
             onClick: () => setCarouselIndex(i),
@@ -898,30 +1348,32 @@ function PricingTable({
         )) })
       ] })
     ] }),
-    /* @__PURE__ */ jsx10("div", { className: "hidden lg:block", children: sortedProducts.length <= 3 ? staticLayout : desktopCarousel })
+    /* @__PURE__ */ jsx21("div", { className: "hidden lg:block", children: sortedProducts.length <= 3 ? staticLayout : desktopCarousel })
   ] });
 }
 
 // src/tenant-creator/index.tsx
-import { useState as useState3, useEffect } from "react";
-import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useState as useState4, useEffect as useEffect2 } from "react";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 function TenantCreator({
   config = {},
   formActions = {},
   className
 }) {
-  const [mode, setMode] = useState3(
-    config.defaultMode || "create"
+  const [mode, setMode] = useState4(
+    !!config.joinForm?.token?.defaultValue === true ? "join" : config.defaultMode || "create"
   );
-  const [isLoading, setIsLoading] = useState3(false);
-  const [organizationName, setOrganizationName] = useState3(
+  const [isLoading, setIsLoading] = useState4(false);
+  const [organizationName, setOrganizationName] = useState4(
     config.createForm?.organizationName?.defaultValue || ""
   );
-  const [billingEmail, setBillingEmail] = useState3(
+  const [billingEmail, setBillingEmail] = useState4(
     config.createForm?.billingEmail?.defaultValue || ""
   );
-  const [token, setToken] = useState3("");
-  useEffect(() => {
+  const [token, setToken] = useState4(
+    config.joinForm?.token?.defaultValue || ""
+  );
+  useEffect2(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const inviteToken = urlParams.get("invite_token");
     if (inviteToken) {
@@ -951,14 +1403,14 @@ function TenantCreator({
       setIsLoading(false);
     }
   };
-  return /* @__PURE__ */ jsxs5(Card, { className: cn("w-full max-w-md mx-auto", className), children: [
-    /* @__PURE__ */ jsxs5(CardHeader, { children: [
-      /* @__PURE__ */ jsx11(CardTitle, { children: "Organization Setup" }),
-      /* @__PURE__ */ jsx11(CardDescription, { children: "Choose how you want to get started with your organization." })
+  return /* @__PURE__ */ jsxs13(Card, { className: cn("w-full max-w-md mx-auto", className), children: [
+    /* @__PURE__ */ jsxs13(CardHeader, { children: [
+      /* @__PURE__ */ jsx22(CardTitle, { children: "Organization Setup" }),
+      /* @__PURE__ */ jsx22(CardDescription, { children: "Choose how you want to get started with your organization." })
     ] }),
-    /* @__PURE__ */ jsxs5(CardContent, { className: "space-y-6", children: [
-      /* @__PURE__ */ jsxs5("div", { className: "grid grid-cols-2 rounded-lg bg-muted p-1", children: [
-        /* @__PURE__ */ jsxs5(
+    /* @__PURE__ */ jsxs13(CardContent, { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs13("div", { className: "grid grid-cols-2 rounded-lg bg-muted p-1", children: [
+        /* @__PURE__ */ jsxs13(
           "label",
           {
             className: cn(
@@ -967,7 +1419,7 @@ function TenantCreator({
               isLoading && "pointer-events-none opacity-50"
             ),
             children: [
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx22(
                 "input",
                 {
                   type: "radio",
@@ -983,7 +1435,7 @@ function TenantCreator({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs13(
           "label",
           {
             className: cn(
@@ -992,7 +1444,7 @@ function TenantCreator({
               isLoading && "pointer-events-none opacity-50"
             ),
             children: [
-              /* @__PURE__ */ jsx11(
+              /* @__PURE__ */ jsx22(
                 "input",
                 {
                   type: "radio",
@@ -1009,10 +1461,10 @@ function TenantCreator({
           }
         )
       ] }),
-      mode === "create" && /* @__PURE__ */ jsxs5("form", { onSubmit: handleCreateSubmit, className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs5("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx11(Label, { htmlFor: "organizationName", children: config.createForm?.organizationName?.label || "Organization Name" }),
-          /* @__PURE__ */ jsx11(
+      mode === "create" && /* @__PURE__ */ jsxs13("form", { onSubmit: handleCreateSubmit, className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs13("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx22(Label, { htmlFor: "organizationName", children: config.createForm?.organizationName?.label || "Organization Name" }),
+          /* @__PURE__ */ jsx22(
             Input,
             {
               id: "organizationName",
@@ -1026,9 +1478,9 @@ function TenantCreator({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs5("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx11(Label, { htmlFor: "billingEmail", children: config.createForm?.billingEmail?.label || "Billing Email" }),
-          /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsxs13("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx22(Label, { htmlFor: "billingEmail", children: config.createForm?.billingEmail?.label || "Billing Email" }),
+          /* @__PURE__ */ jsx22(
             Input,
             {
               id: "billingEmail",
@@ -1042,12 +1494,12 @@ function TenantCreator({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx11(Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? "Creating..." : "Create Organization" })
+        /* @__PURE__ */ jsx22(Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? "Creating..." : "Create Organization" })
       ] }),
-      mode === "join" && /* @__PURE__ */ jsxs5("form", { onSubmit: handleJoinSubmit, className: "space-y-4", children: [
-        /* @__PURE__ */ jsxs5("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx11(Label, { htmlFor: "token", children: config.joinForm?.token?.label || "Invitation Token" }),
-          /* @__PURE__ */ jsx11(
+      mode === "join" && /* @__PURE__ */ jsxs13("form", { onSubmit: handleJoinSubmit, className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs13("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx22(Label, { htmlFor: "token", children: config.joinForm?.token?.label || "Invitation Token" }),
+          /* @__PURE__ */ jsx22(
             Input,
             {
               id: "token",
@@ -1061,14 +1513,476 @@ function TenantCreator({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx11(Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? "Joining..." : "Join Organization" })
+        /* @__PURE__ */ jsx22(Button, { type: "submit", className: "w-full", disabled: isLoading, children: isLoading ? "Joining..." : "Join Organization" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/user-invite/index.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
+function UserInvite({ roles, onInvite }) {
+  const [email, setEmail] = useState5("");
+  const [selectedRole, setSelectedRole] = useState5("");
+  const [isSubmitting, setIsSubmitting] = useState5(false);
+  const [error, setError] = useState5(null);
+  const isValidEmail = (email2) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email2);
+  };
+  const isFormValid = () => {
+    return email.trim() !== "" && isValidEmail(email) && selectedRole !== "";
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setError(null);
+    if (!isFormValid()) {
+      setError("Please fill in all fields with valid data");
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      const inviteData = {
+        email: email.trim(),
+        role: selectedRole
+      };
+      await onInvite?.(inviteData);
+      setEmail("");
+      setSelectedRole("");
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to send invitation"
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+  const handleReset = () => {
+    setEmail("");
+    setSelectedRole("");
+    setError(null);
+  };
+  return /* @__PURE__ */ jsxs14(Card, { className: "w-full max-w-2xl", children: [
+    /* @__PURE__ */ jsxs14(CardHeader, { children: [
+      /* @__PURE__ */ jsx23(CardTitle, { children: "Invite User" }),
+      /* @__PURE__ */ jsx23(CardDescription, { children: "Send an invitation to a new user to join your organization" })
+    ] }),
+    /* @__PURE__ */ jsx23(CardContent, { children: /* @__PURE__ */ jsxs14("form", { onSubmit: handleSubmit, className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx23(Label, { htmlFor: "email", children: "Email Address" }),
+        /* @__PURE__ */ jsx23(
+          Input,
+          {
+            id: "email",
+            type: "email",
+            placeholder: "colleague@company.com",
+            value: email,
+            onChange: (e) => setEmail(e.target.value),
+            "aria-invalid": email !== "" && !isValidEmail(email)
+          }
+        ),
+        email !== "" && !isValidEmail(email) && /* @__PURE__ */ jsx23("p", { className: "text-xs text-destructive", children: "Please enter a valid email address" })
+      ] }),
+      /* @__PURE__ */ jsxs14("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx23(Label, { htmlFor: "role", children: "Role" }),
+        /* @__PURE__ */ jsxs14(Select, { value: selectedRole, onValueChange: setSelectedRole, children: [
+          /* @__PURE__ */ jsx23(SelectTrigger, { id: "role", children: /* @__PURE__ */ jsx23(SelectValue, { placeholder: "Select a role" }) }),
+          /* @__PURE__ */ jsx23(SelectContent, { children: roles.length > 0 ? roles.map((role) => /* @__PURE__ */ jsx23(SelectItem, { value: role, children: role }, role)) : /* @__PURE__ */ jsx23(SelectItem, { value: "no-roles", disabled: true, children: "No roles available" }) })
+        ] }),
+        /* @__PURE__ */ jsx23("p", { className: "text-xs text-muted-foreground", children: "The role determines what permissions the user will have" })
+      ] }),
+      error && /* @__PURE__ */ jsx23("div", { className: "p-3 rounded-md bg-destructive/10 border border-destructive/20", children: /* @__PURE__ */ jsx23("p", { className: "text-sm text-destructive", children: error }) }),
+      /* @__PURE__ */ jsxs14("div", { className: "flex justify-end space-x-3", children: [
+        /* @__PURE__ */ jsx23(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            onClick: handleReset,
+            disabled: isSubmitting,
+            children: "Reset"
+          }
+        ),
+        /* @__PURE__ */ jsx23(Button, { type: "submit", disabled: !isFormValid() || isSubmitting, children: isSubmitting ? "Sending..." : "Send Invitation" })
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/role-creator/index.tsx
+import { useState as useState6, useMemo as useMemo2 } from "react";
+
+// src/components/ui/checkbox.tsx
+import "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+function Checkbox({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx24(
+    CheckboxPrimitive.Root,
+    {
+      "data-slot": "checkbox",
+      className: cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx24(
+        CheckboxPrimitive.Indicator,
+        {
+          "data-slot": "checkbox-indicator",
+          className: "grid place-content-center text-current transition-none",
+          children: /* @__PURE__ */ jsx24(CheckIcon, { className: "size-3.5" })
+        }
+      )
+    }
+  );
+}
+
+// src/components/ui/separator.tsx
+import "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { jsx as jsx25 } from "react/jsx-runtime";
+function Separator2({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx25(
+    SeparatorPrimitive.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/role-creator/index.tsx
+import { Fragment as Fragment2, jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+function RoleCreator({
+  definitions,
+  roles,
+  namespaceMap = {},
+  onRoleCreate,
+  onRoleUpdate
+}) {
+  const [roleName, setRoleName] = useState6("");
+  const [selectedPermissions, setSelectedPermissions] = useState6(
+    /* @__PURE__ */ new Set()
+  );
+  const [showSuggestions, setShowSuggestions] = useState6(false);
+  const [isEditMode, setIsEditMode] = useState6(false);
+  const [editingRoleId, setEditingRoleId] = useState6(null);
+  const { tenantNamespace, fineGrainedNamespaces } = useMemo2(() => {
+    const tenant = definitions.find(
+      (def) => def.namespace.toLowerCase() === "tenant"
+    );
+    const fineGrained = definitions.filter(
+      (def) => def.namespace.toLowerCase() !== "tenant"
+    );
+    return {
+      tenantNamespace: tenant,
+      fineGrainedNamespaces: fineGrained
+    };
+  }, [definitions]);
+  const roleSuggestions = useMemo2(() => {
+    return roles.map((role) => role.role_name);
+  }, [roles]);
+  const handleRoleNameChange = (value) => {
+    setRoleName(value);
+    const existingRole = roles.find(
+      (role) => role.role_name.toLowerCase() === value.toLowerCase()
+    );
+    if (existingRole) {
+      setIsEditMode(true);
+      setEditingRoleId(existingRole.id);
+      const permissions = /* @__PURE__ */ new Set();
+      existingRole.permissions.forEach((perm) => {
+        permissions.add(perm);
+      });
+      setSelectedPermissions(permissions);
+    } else {
+      setIsEditMode(false);
+      setEditingRoleId(null);
+    }
+  };
+  const buildPermissionString = (namespace, relation, resourceId) => {
+    if (resourceId) {
+      return `${namespace.toLowerCase()}:${resourceId}#${relation}`;
+    }
+    return `${namespace.toLowerCase()}#${relation}`;
+  };
+  const togglePermission = (permissionString) => {
+    const newPermissions = new Set(selectedPermissions);
+    if (newPermissions.has(permissionString)) {
+      newPermissions.delete(permissionString);
+    } else {
+      newPermissions.add(permissionString);
+    }
+    setSelectedPermissions(newPermissions);
+  };
+  const handleSubmit = () => {
+    if (!roleName.trim()) return;
+    const permissionsArray = Array.from(selectedPermissions);
+    if (isEditMode && editingRoleId) {
+      onRoleUpdate?.({
+        role_id: editingRoleId,
+        role_name: roleName,
+        permissions: permissionsArray
+      });
+    } else {
+      onRoleCreate?.({
+        role_name: roleName,
+        permissions: permissionsArray
+      });
+    }
+  };
+  const handleReset = () => {
+    setRoleName("");
+    setSelectedPermissions(/* @__PURE__ */ new Set());
+    setIsEditMode(false);
+    setEditingRoleId(null);
+  };
+  return /* @__PURE__ */ jsxs15(Card, { className: "w-full max-w-4xl", children: [
+    /* @__PURE__ */ jsxs15(CardHeader, { children: [
+      /* @__PURE__ */ jsx26(CardTitle, { children: isEditMode ? `Edit Role: ${roleName}` : "Create New Role" }),
+      /* @__PURE__ */ jsx26(CardDescription, { children: isEditMode ? "Update permissions for this existing role" : "Define a new role with specific permissions" })
+    ] }),
+    /* @__PURE__ */ jsxs15(CardContent, { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs15("div", { className: "space-y-2 relative", children: [
+        /* @__PURE__ */ jsx26(Label, { htmlFor: "role-name", children: "Role Name" }),
+        /* @__PURE__ */ jsx26(
+          Input,
+          {
+            id: "role-name",
+            placeholder: "Enter role name (e.g., admin, developer, viewer)",
+            value: roleName,
+            onChange: (e) => handleRoleNameChange(e.target.value),
+            onFocus: () => setShowSuggestions(true),
+            onBlur: () => setTimeout(() => setShowSuggestions(false), 200)
+          }
+        ),
+        showSuggestions && roleSuggestions.length > 0 && /* @__PURE__ */ jsx26("div", { className: "absolute z-10 w-full mt-1 bg-background border rounded-md shadow-lg max-h-48 overflow-y-auto", children: roleSuggestions.filter(
+          (suggestion) => suggestion.toLowerCase().includes(roleName.toLowerCase())
+        ).map((suggestion) => /* @__PURE__ */ jsx26(
+          "button",
+          {
+            className: "w-full px-4 py-2 text-left hover:bg-accent hover:text-accent-foreground text-sm",
+            onMouseDown: () => {
+              handleRoleNameChange(suggestion);
+              setShowSuggestions(false);
+            },
+            children: suggestion
+          },
+          suggestion
+        )) }),
+        isEditMode && /* @__PURE__ */ jsx26("p", { className: "text-xs text-amber-600 dark:text-amber-400", children: "\u26A0 Editing existing role - changes will update all users with this role" })
+      ] }),
+      /* @__PURE__ */ jsx26(Separator2, {}),
+      tenantNamespace && /* @__PURE__ */ jsxs15("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs15("div", { children: [
+          /* @__PURE__ */ jsx26("h3", { className: "text-lg font-semibold", children: "Organization Permissions" }),
+          /* @__PURE__ */ jsx26("p", { className: "text-sm text-muted-foreground", children: "Tenant-wide permissions that apply across the entire organization" })
+        ] }),
+        /* @__PURE__ */ jsx26("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4 pl-4", children: tenantNamespace.relations.map((relation) => {
+          const permissionString = buildPermissionString(
+            tenantNamespace.namespace,
+            relation
+          );
+          const isChecked = selectedPermissions.has(permissionString);
+          return /* @__PURE__ */ jsxs15(
+            "div",
+            {
+              className: "flex items-center space-x-2",
+              children: [
+                /* @__PURE__ */ jsx26(
+                  Checkbox,
+                  {
+                    id: permissionString,
+                    checked: isChecked,
+                    onCheckedChange: () => togglePermission(permissionString)
+                  }
+                ),
+                /* @__PURE__ */ jsx26(
+                  Label,
+                  {
+                    htmlFor: permissionString,
+                    className: "text-sm font-normal cursor-pointer",
+                    children: relation.replace(/_/g, " ")
+                  }
+                )
+              ]
+            },
+            permissionString
+          );
+        }) })
+      ] }),
+      fineGrainedNamespaces.length > 0 && /* @__PURE__ */ jsxs15(Fragment2, { children: [
+        /* @__PURE__ */ jsx26(Separator2, {}),
+        /* @__PURE__ */ jsxs15("div", { className: "space-y-6", children: [
+          /* @__PURE__ */ jsxs15("div", { children: [
+            /* @__PURE__ */ jsx26("h3", { className: "text-lg font-semibold", children: "Fine-Grained Permissions" }),
+            /* @__PURE__ */ jsx26("p", { className: "text-sm text-muted-foreground", children: "Resource-specific permissions that require an object ID" })
+          ] }),
+          fineGrainedNamespaces.map((namespace) => {
+            const namespaceLower = namespace.namespace.toLowerCase();
+            const resourceMap = namespaceMap[namespaceLower] || [];
+            return /* @__PURE__ */ jsx26("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs15("div", { className: "pl-4", children: [
+              /* @__PURE__ */ jsx26("h4", { className: "text-md font-medium capitalize", children: namespace.namespace }),
+              resourceMap.length > 0 ? /* @__PURE__ */ jsx26("div", { className: "mt-4 space-y-6", children: resourceMap.map((resource) => /* @__PURE__ */ jsxs15(
+                "div",
+                {
+                  className: "border rounded-lg p-4 space-y-3 bg-muted/30",
+                  children: [
+                    /* @__PURE__ */ jsxs15("div", { className: "flex items-center justify-between", children: [
+                      /* @__PURE__ */ jsx26("span", { className: "font-medium text-sm", children: resource.label }),
+                      /* @__PURE__ */ jsx26("span", { className: "text-xs text-muted-foreground font-mono", children: resource.id })
+                    ] }),
+                    /* @__PURE__ */ jsx26("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: namespace.relations.map((relation) => {
+                      const permissionString = buildPermissionString(
+                        namespace.namespace,
+                        relation,
+                        resource.id
+                      );
+                      const isChecked = selectedPermissions.has(permissionString);
+                      return /* @__PURE__ */ jsxs15(
+                        "div",
+                        {
+                          className: "flex items-center space-x-2",
+                          children: [
+                            /* @__PURE__ */ jsx26(
+                              Checkbox,
+                              {
+                                id: permissionString,
+                                checked: isChecked,
+                                onCheckedChange: () => togglePermission(permissionString)
+                              }
+                            ),
+                            /* @__PURE__ */ jsx26(
+                              Label,
+                              {
+                                htmlFor: permissionString,
+                                className: "text-sm font-normal cursor-pointer",
+                                children: relation.replace(/_/g, " ")
+                              }
+                            )
+                          ]
+                        },
+                        permissionString
+                      );
+                    }) })
+                  ]
+                },
+                resource.id
+              )) }) : /* @__PURE__ */ jsxs15("div", { className: "mt-3 p-4 border-2 border-dashed rounded-lg text-center", children: [
+                /* @__PURE__ */ jsxs15("p", { className: "text-sm text-muted-foreground", children: [
+                  "No ",
+                  namespace.namespace.toLowerCase(),
+                  " resources available"
+                ] }),
+                /* @__PURE__ */ jsxs15("p", { className: "text-xs text-muted-foreground mt-1", children: [
+                  "Use wildcard permissions (e.g., ",
+                  namespaceLower,
+                  ":*#permission) for all resources"
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs15("div", { className: "mt-4 space-y-2", children: [
+                /* @__PURE__ */ jsxs15(Label, { className: "text-sm font-medium", children: [
+                  "Wildcard Permissions (All ",
+                  namespace.namespace,
+                  "s)"
+                ] }),
+                /* @__PURE__ */ jsx26("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-3", children: namespace.relations.map((relation) => {
+                  const permissionString = buildPermissionString(
+                    namespace.namespace,
+                    relation,
+                    "*"
+                  );
+                  const isChecked = selectedPermissions.has(permissionString);
+                  return /* @__PURE__ */ jsxs15(
+                    "div",
+                    {
+                      className: "flex items-center space-x-2",
+                      children: [
+                        /* @__PURE__ */ jsx26(
+                          Checkbox,
+                          {
+                            id: permissionString,
+                            checked: isChecked,
+                            onCheckedChange: () => togglePermission(permissionString)
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs15(
+                          Label,
+                          {
+                            htmlFor: permissionString,
+                            className: "text-sm font-normal cursor-pointer",
+                            children: [
+                              relation.replace(/_/g, " "),
+                              " (all)"
+                            ]
+                          }
+                        )
+                      ]
+                    },
+                    permissionString
+                  );
+                }) })
+              ] })
+            ] }) }, namespace.id);
+          })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx26(Separator2, {}),
+      /* @__PURE__ */ jsxs15("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs15(Label, { className: "text-sm font-medium", children: [
+          "Selected Permissions (",
+          selectedPermissions.size,
+          ")"
+        ] }),
+        selectedPermissions.size > 0 ? /* @__PURE__ */ jsx26("div", { className: "p-4 bg-muted rounded-md max-h-40 overflow-y-auto", children: /* @__PURE__ */ jsx26("ul", { className: "space-y-1 text-xs font-mono", children: Array.from(selectedPermissions).map((perm) => /* @__PURE__ */ jsx26("li", { className: "text-muted-foreground", children: perm }, perm)) }) }) : /* @__PURE__ */ jsx26("p", { className: "text-sm text-muted-foreground italic", children: "No permissions selected" })
+      ] }),
+      /* @__PURE__ */ jsxs15("div", { className: "flex justify-end space-x-3", children: [
+        /* @__PURE__ */ jsx26(Button, { variant: "outline", onClick: handleReset, children: "Reset" }),
+        /* @__PURE__ */ jsx26(
+          Button,
+          {
+            onClick: handleSubmit,
+            disabled: !roleName.trim() || selectedPermissions.size === 0,
+            children: isEditMode ? "Update Role" : "Create Role"
+          }
+        )
       ] })
     ] })
   ] });
 }
 export {
-  CustomFlowForm,
+  LoginForm,
   PricingTable,
+  RecoveryForm,
+  RegistrationForm,
+  RoleCreator,
+  SettingsForm,
   SwitchActiveTenant,
-  TenantCreator
+  TenantCreator,
+  UserInvite,
+  VerificationForm,
+  filterInputNodes,
+  findAnchorNode,
+  findCsrfToken,
+  findSubmitButton,
+  groupNodesByGroup,
+  isUiNodeInputAttributes,
+  sortNodes
 };