@mdxui/auth 1.1.0

package/dist/components/index.d.ts

@@ -0,0 +1,211 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { useAuth } from '@workos-inc/authkit-react';
+
+interface SignInButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+    /** Button content (defaults to "Sign In") */
+    children?: ReactNode;
+    /** Custom onClick handler (in addition to signIn) */
+    onSignIn?: () => void;
+}
+/**
+ * Sign In Button
+ *
+ * A simple button that triggers the WorkOS AuthKit sign-in flow.
+ *
+ * @example
+ * ```tsx
+ * import { SignInButton } from '@mdxui/auth'
+ *
+ * function Header() {
+ *   return (
+ *     <nav>
+ *       <SignInButton />
+ *     </nav>
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom styling
+ * <SignInButton className="bg-blue-500 text-white px-4 py-2 rounded">
+ *   Get Started
+ * </SignInButton>
+ * ```
+ */
+declare function SignInButton({ children, onSignIn, className, disabled, ...props }: SignInButtonProps): react_jsx_runtime.JSX.Element;
+
+interface SignOutButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
+    /** Button content (defaults to "Sign Out") */
+    children?: ReactNode;
+    /** Custom onClick handler (in addition to signOut) */
+    onSignOut?: () => void;
+}
+/**
+ * Sign Out Button
+ *
+ * A simple button that triggers the WorkOS AuthKit sign-out flow.
+ *
+ * @example
+ * ```tsx
+ * import { SignOutButton } from '@mdxui/auth'
+ *
+ * function Header() {
+ *   const { user } = useAuth()
+ *
+ *   if (!user) return null
+ *
+ *   return (
+ *     <nav>
+ *       <span>{user.email}</span>
+ *       <SignOutButton />
+ *     </nav>
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom styling
+ * <SignOutButton className="text-red-500 underline">
+ *   Log out
+ * </SignOutButton>
+ * ```
+ */
+declare function SignOutButton({ children, onSignOut, className, disabled, ...props }: SignOutButtonProps): react_jsx_runtime.JSX.Element;
+
+interface UserMenuProps {
+    /** Custom render function for the trigger button */
+    renderTrigger?: (props: {
+        user: NonNullable<ReturnType<typeof useAuth>['user']>;
+        displayName: string;
+        initials: string;
+    }) => ReactNode;
+    /** Custom render function for the menu content */
+    renderMenu?: (props: {
+        user: NonNullable<ReturnType<typeof useAuth>['user']>;
+        displayName: string;
+        initials: string;
+        signOut: () => void;
+    }) => ReactNode;
+    /** Additional CSS class */
+    className?: string;
+}
+/**
+ * User Menu Component
+ *
+ * A customizable user menu that displays user info and provides sign-out functionality.
+ * This is a headless component - you provide the render functions to control the UI.
+ *
+ * For a pre-built menu with @mdxui/primitives, use the UserMenu from @mdxui/do or @mdxui/cockpit.
+ *
+ * @example
+ * ```tsx
+ * import { UserMenu } from '@mdxui/auth'
+ *
+ * function Header() {
+ *   return (
+ *     <UserMenu
+ *       renderTrigger={({ user, initials }) => (
+ *         <button className="flex items-center gap-2">
+ *           <div className="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center">
+ *             {user.profilePictureUrl ? (
+ *               <img src={user.profilePictureUrl} alt="" className="rounded-full" />
+ *             ) : (
+ *               initials
+ *             )}
+ *           </div>
+ *           <span>{user.firstName}</span>
+ *         </button>
+ *       )}
+ *       renderMenu={({ user, signOut }) => (
+ *         <div className="dropdown-menu">
+ *           <div className="p-2">
+ *             <p>{user.email}</p>
+ *           </div>
+ *           <button onClick={signOut}>Sign Out</button>
+ *         </div>
+ *       )}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Simple usage with just a sign-out button
+ * <UserMenu
+ *   renderTrigger={({ displayName }) => <span>{displayName}</span>}
+ *   renderMenu={({ signOut }) => <button onClick={signOut}>Sign Out</button>}
+ * />
+ * ```
+ */
+declare function UserMenu({ renderTrigger, renderMenu, className }: UserMenuProps): react_jsx_runtime.JSX.Element | null;
+
+interface TeamSwitcherProps {
+    /**
+     * Render function for the wrapper when in an organization.
+     * The OrganizationSwitcher widget will be rendered inside this wrapper.
+     */
+    renderWrapper?: (children: ReactNode) => ReactNode;
+    /**
+     * Render function for when there is no organization.
+     * If not provided, returns null.
+     */
+    renderNoOrganization?: () => ReactNode;
+    /** CSS class name for the organization switcher wrapper */
+    className?: string;
+}
+/**
+ * TeamSwitcher component that uses WorkOS authentication.
+ *
+ * Shows the WorkOS OrganizationSwitcher widget when authenticated with an organization,
+ * or a custom "no organization" component when not.
+ *
+ * This is a headless component - you provide render functions for the UI.
+ * For a pre-built sidebar menu version, use your design system's sidebar components.
+ *
+ * @example
+ * ```tsx
+ * import { TeamSwitcher } from '@mdxui/auth'
+ * import { SidebarMenu, SidebarMenuItem } from '@mdxui/primitives/sidebar'
+ * import { Building2 } from 'lucide-react'
+ *
+ * function MyTeamSwitcher() {
+ *   return (
+ *     <TeamSwitcher
+ *       renderWrapper={(children) => (
+ *         <SidebarMenu>
+ *           <SidebarMenuItem>
+ *             <div className="organization-switcher-wrapper">
+ *               {children}
+ *             </div>
+ *           </SidebarMenuItem>
+ *         </SidebarMenu>
+ *       )}
+ *       renderNoOrganization={() => (
+ *         <SidebarMenu>
+ *           <SidebarMenuItem>
+ *             <div className="flex items-center gap-2">
+ *               <Building2 className="size-4" />
+ *               <span>No Organization</span>
+ *             </div>
+ *           </SidebarMenuItem>
+ *         </SidebarMenu>
+ *       )}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Simple usage without custom rendering
+ * <TeamSwitcher className="my-org-switcher" />
+ * ```
+ */
+declare function TeamSwitcher({ renderWrapper, renderNoOrganization, className, }: TeamSwitcherProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+
+export { SignInButton, SignOutButton, TeamSwitcher, UserMenu };

package/dist/components/index.js

@@ -0,0 +1,144 @@
+// src/components/sign-in-button.tsx
+import { useAuth } from "@workos-inc/authkit-react";
+import { jsx } from "react/jsx-runtime";
+function SignInButton({
+  children = "Sign In",
+  onSignIn,
+  className,
+  disabled,
+  ...props
+}) {
+  const { signIn, isLoading } = useAuth();
+  const handleClick = () => {
+    onSignIn?.();
+    signIn();
+  };
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled: disabled || isLoading,
+      className: className ?? "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-md)] text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 disabled:opacity-50 disabled:pointer-events-none",
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/sign-out-button.tsx
+import { useAuth as useAuth2 } from "@workos-inc/authkit-react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function SignOutButton({
+  children = "Sign Out",
+  onSignOut,
+  className,
+  disabled,
+  ...props
+}) {
+  const { signOut, isLoading } = useAuth2();
+  const handleClick = () => {
+    onSignOut?.();
+    signOut();
+  };
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      disabled: disabled || isLoading,
+      className: className ?? "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-md)] text-sm font-medium transition-colors bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-4 disabled:opacity-50 disabled:pointer-events-none",
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/user-menu.tsx
+import { useAuth as useAuth3 } from "@workos-inc/authkit-react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+function getInitials(name) {
+  if (!name) return "?";
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) return parts[0].charAt(0).toUpperCase();
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+function UserMenu({ renderTrigger, renderMenu, className }) {
+  const { user, signOut, isLoading } = useAuth3();
+  if (isLoading) {
+    return /* @__PURE__ */ jsx3("div", { className, children: /* @__PURE__ */ jsx3("div", { className: "flex items-center gap-2 p-2", children: /* @__PURE__ */ jsx3("div", { className: "h-8 w-8 animate-pulse rounded-full bg-muted" }) }) });
+  }
+  if (!user) {
+    return null;
+  }
+  const displayName = user.firstName ? `${user.firstName}${user.lastName ? ` ${user.lastName}` : ""}` : user.email;
+  const initials = getInitials(
+    user.firstName ? `${user.firstName} ${user.lastName ?? ""}` : user.email
+  );
+  const triggerProps = { user, displayName, initials };
+  const menuProps = { user, displayName, initials, signOut };
+  if (!renderTrigger && !renderMenu) {
+    return /* @__PURE__ */ jsx3("div", { className, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 p-2", children: [
+      /* @__PURE__ */ jsx3("div", { className: "h-8 w-8 rounded-full bg-muted flex items-center justify-center text-sm font-medium", children: user.profilePictureUrl ? /* @__PURE__ */ jsx3(
+        "img",
+        {
+          src: user.profilePictureUrl,
+          alt: displayName,
+          className: "h-full w-full rounded-full object-cover"
+        }
+      ) : initials }),
+      /* @__PURE__ */ jsxs("div", { className: "text-sm", children: [
+        /* @__PURE__ */ jsx3("p", { className: "font-medium", children: displayName }),
+        /* @__PURE__ */ jsx3("p", { className: "text-muted-foreground text-xs", children: user.email })
+      ] }),
+      /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          onClick: () => signOut(),
+          className: "ml-auto text-sm text-muted-foreground hover:text-foreground",
+          children: "Sign out"
+        }
+      )
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    renderTrigger?.(triggerProps),
+    renderMenu?.(menuProps)
+  ] });
+}
+
+// src/components/team-switcher.tsx
+import { useAuth as useAuth4 } from "@workos-inc/authkit-react";
+import { OrganizationSwitcher } from "@workos-inc/widgets";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function TeamSwitcher({
+  renderWrapper,
+  renderNoOrganization,
+  className
+}) {
+  const { getAccessToken, switchToOrganization, organizationId } = useAuth4();
+  if (!organizationId) {
+    return renderNoOrganization?.() ?? null;
+  }
+  const handleSwitchOrganization = ({
+    organizationId: organizationId2
+  }) => {
+    return switchToOrganization({ organizationId: organizationId2 });
+  };
+  const widget = /* @__PURE__ */ jsx4("div", { className: `organization-switcher-wrapper ${className ?? ""}`, children: /* @__PURE__ */ jsx4(
+    OrganizationSwitcher,
+    {
+      authToken: getAccessToken,
+      switchToOrganization: handleSwitchOrganization
+    }
+  ) });
+  return renderWrapper ? renderWrapper(widget) : widget;
+}
+export {
+  SignInButton,
+  SignOutButton,
+  TeamSwitcher,
+  UserMenu
+};
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/sign-in-button.tsx","../../src/components/sign-out-button.tsx","../../src/components/user-menu.tsx","../../src/components/team-switcher.tsx"],"sourcesContent":["'use client'\n\nimport { useAuth } from '@workos-inc/authkit-react'\nimport type { ReactNode, ButtonHTMLAttributes } from 'react'\n\nexport interface SignInButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {\n  /** Button content (defaults to \"Sign In\") */\n  children?: ReactNode\n  /** Custom onClick handler (in addition to signIn) */\n  onSignIn?: () => void\n}\n\n/**\n * Sign In Button\n *\n * A simple button that triggers the WorkOS AuthKit sign-in flow.\n *\n * @example\n * ```tsx\n * import { SignInButton } from '@mdxui/auth'\n *\n * function Header() {\n *   return (\n *     <nav>\n *       <SignInButton />\n *     </nav>\n *   )\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With custom styling\n * <SignInButton className=\"bg-blue-500 text-white px-4 py-2 rounded\">\n *   Get Started\n * </SignInButton>\n * ```\n */\nexport function SignInButton({\n  children = 'Sign In',\n  onSignIn,\n  className,\n  disabled,\n  ...props\n}: SignInButtonProps) {\n  const { signIn, isLoading } = useAuth()\n\n  const handleClick = () => {\n    onSignIn?.()\n    signIn()\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={disabled || isLoading}\n      className={\n        className ??\n        'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-md)] text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 disabled:opacity-50 disabled:pointer-events-none'\n      }\n      {...props}\n    >\n      {children}\n    </button>\n  )\n}\n","'use client'\n\nimport { useAuth } from '@workos-inc/authkit-react'\nimport type { ReactNode, ButtonHTMLAttributes } from 'react'\n\nexport interface SignOutButtonProps\n  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {\n  /** Button content (defaults to \"Sign Out\") */\n  children?: ReactNode\n  /** Custom onClick handler (in addition to signOut) */\n  onSignOut?: () => void\n}\n\n/**\n * Sign Out Button\n *\n * A simple button that triggers the WorkOS AuthKit sign-out flow.\n *\n * @example\n * ```tsx\n * import { SignOutButton } from '@mdxui/auth'\n *\n * function Header() {\n *   const { user } = useAuth()\n *\n *   if (!user) return null\n *\n *   return (\n *     <nav>\n *       <span>{user.email}</span>\n *       <SignOutButton />\n *     </nav>\n *   )\n * }\n * ```\n *\n * @example\n * ```tsx\n * // With custom styling\n * <SignOutButton className=\"text-red-500 underline\">\n *   Log out\n * </SignOutButton>\n * ```\n */\nexport function SignOutButton({\n  children = 'Sign Out',\n  onSignOut,\n  className,\n  disabled,\n  ...props\n}: SignOutButtonProps) {\n  const { signOut, isLoading } = useAuth()\n\n  const handleClick = () => {\n    onSignOut?.()\n    signOut()\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={handleClick}\n      disabled={disabled || isLoading}\n      className={\n        className ??\n        'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius-md)] text-sm font-medium transition-colors bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-4 disabled:opacity-50 disabled:pointer-events-none'\n      }\n      {...props}\n    >\n      {children}\n    </button>\n  )\n}\n","'use client'\n\nimport { useAuth } from '@workos-inc/authkit-react'\nimport type { ReactNode } from 'react'\n\nexport interface UserMenuProps {\n  /** Custom render function for the trigger button */\n  renderTrigger?: (props: {\n    user: NonNullable<ReturnType<typeof useAuth>['user']>\n    displayName: string\n    initials: string\n  }) => ReactNode\n  /** Custom render function for the menu content */\n  renderMenu?: (props: {\n    user: NonNullable<ReturnType<typeof useAuth>['user']>\n    displayName: string\n    initials: string\n    signOut: () => void\n  }) => ReactNode\n  /** Additional CSS class */\n  className?: string\n}\n\n/**\n * Get initials from a name (first letter of first and last name)\n */\nfunction getInitials(name: string | undefined): string {\n  if (!name) return '?'\n  const parts = name.trim().split(/\\s+/)\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase()\n  return (\n    parts[0].charAt(0) + parts[parts.length - 1].charAt(0)\n  ).toUpperCase()\n}\n\n/**\n * User Menu Component\n *\n * A customizable user menu that displays user info and provides sign-out functionality.\n * This is a headless component - you provide the render functions to control the UI.\n *\n * For a pre-built menu with @mdxui/primitives, use the UserMenu from @mdxui/do or @mdxui/cockpit.\n *\n * @example\n * ```tsx\n * import { UserMenu } from '@mdxui/auth'\n *\n * function Header() {\n *   return (\n *     <UserMenu\n *       renderTrigger={({ user, initials }) => (\n *         <button className=\"flex items-center gap-2\">\n *           <div className=\"w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center\">\n *             {user.profilePictureUrl ? (\n *               <img src={user.profilePictureUrl} alt=\"\" className=\"rounded-full\" />\n *             ) : (\n *               initials\n *             )}\n *           </div>\n *           <span>{user.firstName}</span>\n *         </button>\n *       )}\n *       renderMenu={({ user, signOut }) => (\n *         <div className=\"dropdown-menu\">\n *           <div className=\"p-2\">\n *             <p>{user.email}</p>\n *           </div>\n *           <button onClick={signOut}>Sign Out</button>\n *         </div>\n *       )}\n *     />\n *   )\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Simple usage with just a sign-out button\n * <UserMenu\n *   renderTrigger={({ displayName }) => <span>{displayName}</span>}\n *   renderMenu={({ signOut }) => <button onClick={signOut}>Sign Out</button>}\n * />\n * ```\n */\nexport function UserMenu({ renderTrigger, renderMenu, className }: UserMenuProps) {\n  const { user, signOut, isLoading } = useAuth()\n\n  if (isLoading) {\n    return (\n      <div className={className}>\n        <div className=\"flex items-center gap-2 p-2\">\n          <div className=\"h-8 w-8 animate-pulse rounded-full bg-muted\" />\n        </div>\n      </div>\n    )\n  }\n\n  if (!user) {\n    return null\n  }\n\n  const displayName = user.firstName\n    ? `${user.firstName}${user.lastName ? ` ${user.lastName}` : ''}`\n    : user.email\n\n  const initials = getInitials(\n    user.firstName ? `${user.firstName} ${user.lastName ?? ''}` : user.email\n  )\n\n  const triggerProps = { user, displayName, initials }\n  const menuProps = { user, displayName, initials, signOut }\n\n  // If no render functions provided, render a basic menu\n  if (!renderTrigger && !renderMenu) {\n    return (\n      <div className={className}>\n        <div className=\"flex items-center gap-2 p-2\">\n          <div className=\"h-8 w-8 rounded-full bg-muted flex items-center justify-center text-sm font-medium\">\n            {user.profilePictureUrl ? (\n              <img\n                src={user.profilePictureUrl}\n                alt={displayName}\n                className=\"h-full w-full rounded-full object-cover\"\n              />\n            ) : (\n              initials\n            )}\n          </div>\n          <div className=\"text-sm\">\n            <p className=\"font-medium\">{displayName}</p>\n            <p className=\"text-muted-foreground text-xs\">{user.email}</p>\n          </div>\n          <button\n            type=\"button\"\n            onClick={() => signOut()}\n            className=\"ml-auto text-sm text-muted-foreground hover:text-foreground\"\n          >\n            Sign out\n          </button>\n        </div>\n      </div>\n    )\n  }\n\n  return (\n    <div className={className}>\n      {renderTrigger?.(triggerProps)}\n      {renderMenu?.(menuProps)}\n    </div>\n  )\n}\n","'use client'\n\nimport { useAuth } from '@workos-inc/authkit-react'\nimport { OrganizationSwitcher } from '@workos-inc/widgets'\nimport type { ReactNode } from 'react'\n\nexport interface TeamSwitcherProps {\n  /**\n   * Render function for the wrapper when in an organization.\n   * The OrganizationSwitcher widget will be rendered inside this wrapper.\n   */\n  renderWrapper?: (children: ReactNode) => ReactNode\n  /**\n   * Render function for when there is no organization.\n   * If not provided, returns null.\n   */\n  renderNoOrganization?: () => ReactNode\n  /** CSS class name for the organization switcher wrapper */\n  className?: string\n}\n\n/**\n * TeamSwitcher component that uses WorkOS authentication.\n *\n * Shows the WorkOS OrganizationSwitcher widget when authenticated with an organization,\n * or a custom \"no organization\" component when not.\n *\n * This is a headless component - you provide render functions for the UI.\n * For a pre-built sidebar menu version, use your design system's sidebar components.\n *\n * @example\n * ```tsx\n * import { TeamSwitcher } from '@mdxui/auth'\n * import { SidebarMenu, SidebarMenuItem } from '@mdxui/primitives/sidebar'\n * import { Building2 } from 'lucide-react'\n *\n * function MyTeamSwitcher() {\n *   return (\n *     <TeamSwitcher\n *       renderWrapper={(children) => (\n *         <SidebarMenu>\n *           <SidebarMenuItem>\n *             <div className=\"organization-switcher-wrapper\">\n *               {children}\n *             </div>\n *           </SidebarMenuItem>\n *         </SidebarMenu>\n *       )}\n *       renderNoOrganization={() => (\n *         <SidebarMenu>\n *           <SidebarMenuItem>\n *             <div className=\"flex items-center gap-2\">\n *               <Building2 className=\"size-4\" />\n *               <span>No Organization</span>\n *             </div>\n *           </SidebarMenuItem>\n *         </SidebarMenu>\n *       )}\n *     />\n *   )\n * }\n * ```\n *\n * @example\n * ```tsx\n * // Simple usage without custom rendering\n * <TeamSwitcher className=\"my-org-switcher\" />\n * ```\n */\nexport function TeamSwitcher({\n  renderWrapper,\n  renderNoOrganization,\n  className,\n}: TeamSwitcherProps) {\n  const { getAccessToken, switchToOrganization, organizationId } = useAuth()\n\n  // No organization - show custom component or null\n  if (!organizationId) {\n    return renderNoOrganization?.() ?? null\n  }\n\n  // Adapt switchToOrganization to the widget's expected signature\n  const handleSwitchOrganization = ({\n    organizationId,\n  }: {\n    organizationId: string\n  }) => {\n    return switchToOrganization({ organizationId })\n  }\n\n  // Render the OrganizationSwitcher widget with required wrapper class for styling\n  const widget = (\n    <div className={`organization-switcher-wrapper ${className ?? ''}`}>\n      <OrganizationSwitcher\n        authToken={getAccessToken}\n        switchToOrganization={handleSwitchOrganization}\n      />\n    </div>\n  )\n\n  // Wrap in custom wrapper if provided\n  return renderWrapper ? renderWrapper(widget) : widget\n}\n"],"mappings":"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","names":["useAuth","jsx","useAuth","jsx","useAuth","jsx","organizationId"]}

package/dist/hooks/index.d.ts

@@ -0,0 +1,42 @@
+export { useAuth } from '@workos-inc/authkit-react';
+import { U as UseWidgetTokenOptions, b as UseWidgetTokenResult } from '../auth-Ba2f778e.js';
+import 'react';
+
+/**
+ * Hook to fetch authorization tokens for WorkOS widgets
+ *
+ * Use this hook when you need to fetch widget tokens from a backend endpoint,
+ * typically for server-side auth scenarios. For client-side AuthKit usage,
+ * you can use `getAccessToken` from `useAuth()` directly with widgets.
+ *
+ * @param options - Options for token fetching
+ * @param options.widget - The widget type (user-profile, user-security, api-keys, etc.)
+ * @param options.organizationId - Optional organization context
+ * @param options.endpoint - Custom endpoint (default: /api/workos/widget-token)
+ * @returns Token state and refetch function
+ *
+ * @example
+ * ```tsx
+ * // Server-side token fetching (via backend endpoint)
+ * const { token, loading, error } = useWidgetToken({
+ *   widget: 'user-profile',
+ * })
+ *
+ * if (loading) return <Spinner />
+ * if (error) return <Error message={error} />
+ * return <UserProfile authToken={token!} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Client-side AuthKit (recommended - no backend needed)
+ * import { useAuth } from '@mdxui/auth'
+ * import { UserProfile } from '@mdxui/auth/widgets'
+ *
+ * const { getAccessToken } = useAuth()
+ * return <UserProfile authToken={getAccessToken} />
+ * ```
+ */
+declare function useWidgetToken({ widget, organizationId, endpoint, }: UseWidgetTokenOptions): UseWidgetTokenResult;
+
+export { useWidgetToken };

package/dist/hooks/index.js

@@ -0,0 +1,43 @@
+// src/hooks/use-auth.ts
+import { useAuth } from "@workos-inc/authkit-react";
+
+// src/hooks/use-widget-token.ts
+import { useCallback, useEffect, useState } from "react";
+function useWidgetToken({
+  widget,
+  organizationId,
+  endpoint = "/api/workos/widget-token"
+}) {
+  const [token, setToken] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const fetchToken = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const params = new URLSearchParams({ widget });
+      if (organizationId) {
+        params.set("organizationId", organizationId);
+      }
+      const response = await fetch(`${endpoint}?${params}`);
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.error || "Failed to fetch token");
+      }
+      setToken(data.token);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Token fetch failed");
+    } finally {
+      setLoading(false);
+    }
+  }, [widget, organizationId, endpoint]);
+  useEffect(() => {
+    fetchToken();
+  }, [fetchToken]);
+  return { token, loading, error, refetch: fetchToken };
+}
+export {
+  useAuth,
+  useWidgetToken
+};
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hooks/use-auth.ts","../../src/hooks/use-widget-token.ts"],"sourcesContent":["'use client'\n\n/**\n * Re-export useAuth from WorkOS AuthKit\n *\n * This hook provides access to the authentication state and methods:\n * - user: The authenticated user object\n * - isLoading: Whether auth state is being loaded\n * - signIn: Function to initiate sign in\n * - signOut: Function to sign out\n * - getAccessToken: Function to get the current access token\n * - organizationId: Current organization ID (if in org context)\n * - permissions: User's permissions array\n *\n * @example\n * ```tsx\n * import { useAuth } from '@mdxui/auth'\n *\n * function MyComponent() {\n *   const { user, isLoading, signIn, signOut, getAccessToken } = useAuth()\n *\n *   if (isLoading) return <div>Loading...</div>\n *   if (!user) return <button onClick={() => signIn()}>Sign In</button>\n *\n *   return (\n *     <div>\n *       <p>Hello, {user.firstName}!</p>\n *       <button onClick={() => signOut()}>Sign Out</button>\n *     </div>\n *   )\n * }\n * ```\n */\nexport { useAuth } from '@workos-inc/authkit-react'\n","'use client'\n\nimport { useCallback, useEffect, useState } from 'react'\nimport type { UseWidgetTokenOptions, UseWidgetTokenResult } from '../types/auth'\n\n/**\n * Hook to fetch authorization tokens for WorkOS widgets\n *\n * Use this hook when you need to fetch widget tokens from a backend endpoint,\n * typically for server-side auth scenarios. For client-side AuthKit usage,\n * you can use `getAccessToken` from `useAuth()` directly with widgets.\n *\n * @param options - Options for token fetching\n * @param options.widget - The widget type (user-profile, user-security, api-keys, etc.)\n * @param options.organizationId - Optional organization context\n * @param options.endpoint - Custom endpoint (default: /api/workos/widget-token)\n * @returns Token state and refetch function\n *\n * @example\n * ```tsx\n * // Server-side token fetching (via backend endpoint)\n * const { token, loading, error } = useWidgetToken({\n *   widget: 'user-profile',\n * })\n *\n * if (loading) return <Spinner />\n * if (error) return <Error message={error} />\n * return <UserProfile authToken={token!} />\n * ```\n *\n * @example\n * ```tsx\n * // Client-side AuthKit (recommended - no backend needed)\n * import { useAuth } from '@mdxui/auth'\n * import { UserProfile } from '@mdxui/auth/widgets'\n *\n * const { getAccessToken } = useAuth()\n * return <UserProfile authToken={getAccessToken} />\n * ```\n */\nexport function useWidgetToken({\n  widget,\n  organizationId,\n  endpoint = '/api/workos/widget-token',\n}: UseWidgetTokenOptions): UseWidgetTokenResult {\n  const [token, setToken] = useState<string | null>(null)\n  const [loading, setLoading] = useState(true)\n  const [error, setError] = useState<string | null>(null)\n\n  const fetchToken = useCallback(async () => {\n    try {\n      setLoading(true)\n      setError(null)\n\n      const params = new URLSearchParams({ widget })\n      if (organizationId) {\n        params.set('organizationId', organizationId)\n      }\n\n      const response = await fetch(`${endpoint}?${params}`)\n      const data = await response.json()\n\n      if (!response.ok) {\n        throw new Error(data.error || 'Failed to fetch token')\n      }\n\n      setToken(data.token)\n    } catch (err) {\n      setError(err instanceof Error ? err.message : 'Token fetch failed')\n    } finally {\n      setLoading(false)\n    }\n  }, [widget, organizationId, endpoint])\n\n  useEffect(() => {\n    fetchToken()\n  }, [fetchToken])\n\n  return { token, loading, error, refetch: fetchToken }\n}\n"],"mappings":";AAiCA,SAAS,eAAe;;;AC/BxB,SAAS,aAAa,WAAW,gBAAgB;AAsC1C,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,WAAW;AACb,GAAgD;AAC9C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AACtD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,IAAI;AAEtD,QAAM,aAAa,YAAY,YAAY;AACzC,QAAI;AACF,iBAAW,IAAI;AACf,eAAS,IAAI;AAEb,YAAM,SAAS,IAAI,gBAAgB,EAAE,OAAO,CAAC;AAC7C,UAAI,gBAAgB;AAClB,eAAO,IAAI,kBAAkB,cAAc;AAAA,MAC7C;AAEA,YAAM,WAAW,MAAM,MAAM,GAAG,QAAQ,IAAI,MAAM,EAAE;AACpD,YAAM,OAAO,MAAM,SAAS,KAAK;AAEjC,UAAI,CAAC,SAAS,IAAI;AAChB,cAAM,IAAI,MAAM,KAAK,SAAS,uBAAuB;AAAA,MACvD;AAEA,eAAS,KAAK,KAAK;AAAA,IACrB,SAAS,KAAK;AACZ,eAAS,eAAe,QAAQ,IAAI,UAAU,oBAAoB;AAAA,IACpE,UAAE;AACA,iBAAW,KAAK;AAAA,IAClB;AAAA,EACF,GAAG,CAAC,QAAQ,gBAAgB,QAAQ,CAAC;AAErC,YAAU,MAAM;AACd,eAAW;AAAA,EACb,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO,EAAE,OAAO,SAAS,OAAO,SAAS,WAAW;AACtD;","names":[]}

package/dist/index-Bl4BwORF.d.ts

@@ -0,0 +1,159 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { I as IdentityProviderProps, A as AuthGateProps, W as WidgetsProviderProps } from './auth-Ba2f778e.js';
+
+/**
+ * Identity provider that wraps your app with WorkOS AuthKit authentication.
+ *
+ * This provider sets up authentication context for your application and
+ * automatically includes the WidgetsProvider for WorkOS widgets.
+ *
+ * @example
+ * ```tsx
+ * import { IdentityProvider } from '@mdxui/auth'
+ *
+ * function App() {
+ *   return (
+ *     <IdentityProvider
+ *       clientId="client_xxx"
+ *       devMode={process.env.NODE_ENV === 'development'}
+ *     >
+ *       <YourApp />
+ *     </IdentityProvider>
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom redirect URI
+ * <IdentityProvider
+ *   clientId="client_xxx"
+ *   redirectUri="https://app.example.com/dashboard"
+ *   onRedirectCallback={() => {
+ *     // Custom callback after auth redirect
+ *   }}
+ * >
+ *   <YourApp />
+ * </IdentityProvider>
+ * ```
+ */
+declare function IdentityProvider({ clientId, apiHostname, devMode, redirectUri, onRedirectCallback, children, }: IdentityProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Minimal identity provider without WidgetsProvider
+ *
+ * Use this if you want to set up widgets separately or don't need them.
+ *
+ * @example
+ * ```tsx
+ * import { IdentityProviderMinimal, WidgetsProvider } from '@mdxui/auth'
+ *
+ * function App() {
+ *   return (
+ *     <IdentityProviderMinimal clientId="client_xxx">
+ *       <WidgetsProvider appearance="dark">
+ *         <YourApp />
+ *       </WidgetsProvider>
+ *     </IdentityProviderMinimal>
+ *   )
+ * }
+ * ```
+ */
+declare function IdentityProviderMinimal({ clientId, apiHostname, devMode, redirectUri, onRedirectCallback, children, }: IdentityProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * AuthGate handles authentication state and shows appropriate UI:
+ * - Loading state while checking auth
+ * - Landing page or redirect when not authenticated
+ * - Children (protected content) when authenticated
+ *
+ * @example
+ * ```tsx
+ * import { AuthGate } from '@mdxui/auth'
+ *
+ * function App() {
+ *   return (
+ *     <AuthGate>
+ *       <ProtectedDashboard />
+ *     </AuthGate>
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With custom components
+ * <AuthGate
+ *   loadingComponent={<CustomSpinner />}
+ *   landingComponent={<CustomLandingPage />}
+ * >
+ *   <Dashboard />
+ * </AuthGate>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Allow unauthenticated access
+ * <AuthGate required={false}>
+ *   <PublicContent />
+ * </AuthGate>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Redirect to external URL when not authenticated
+ * <AuthGate
+ *   onUnauthenticated="redirect"
+ *   redirectUrl="https://marketing.example.com"
+ * >
+ *   <Dashboard />
+ * </AuthGate>
+ * ```
+ */
+declare function AuthGate({ children, required, loadingComponent, landingComponent, onUnauthenticated, redirectUrl, }: AuthGateProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Hook to detect dark mode from document class or system preference
+ *
+ * @returns Object with isDark state and mounted flag
+ *
+ * @example
+ * ```tsx
+ * const { isDark, mounted } = useThemeDetection()
+ * const appearance = mounted ? (isDark ? 'dark' : 'light') : 'inherit'
+ * ```
+ */
+declare function useThemeDetection(): {
+    isDark: boolean;
+    mounted: boolean;
+};
+/**
+ * Provider for WorkOS widgets with automatic theme detection
+ *
+ * Wraps children with WorkOsWidgets context and automatically detects
+ * light/dark mode from document classes or system preference.
+ *
+ * @example
+ * ```tsx
+ * import { WidgetsProvider } from '@mdxui/auth'
+ * import { UserProfile } from '@mdxui/auth/widgets'
+ *
+ * function App() {
+ *   return (
+ *     <WidgetsProvider>
+ *       <UserProfile authToken={getAccessToken} />
+ *     </WidgetsProvider>
+ *   )
+ * }
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With explicit theme
+ * <WidgetsProvider appearance="dark" radius="large">
+ *   <UserProfile authToken={token} />
+ * </WidgetsProvider>
+ * ```
+ */
+declare function WidgetsProvider({ children, appearance, radius, scaling, }: WidgetsProviderProps): react_jsx_runtime.JSX.Element;
+
+export { AuthGate as A, IdentityProvider as I, WidgetsProvider as W, IdentityProviderMinimal as a, useThemeDetection as u };

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export { A as AuthGate, I as IdentityProvider, a as IdentityProviderMinimal, W as WidgetsProvider, u as useThemeDetection } from './index-Bl4BwORF.js';
+export { ApiKeys, OrganizationSwitcher, Pipes, UserProfile, UserSecurity, UserSessions, UsersManagement } from './widgets/index.js';
+export { SignInButton, SignOutButton, TeamSwitcher, UserMenu } from './components/index.js';
+export { useAuth } from '@workos-inc/authkit-react';
+export { useWidgetToken } from './hooks/index.js';
+export { A as AuthGateProps, a as AuthToken, B as BaseWidgetProps, I as IdentityProviderProps, O as OrganizationWidgetProps, U as UseWidgetTokenOptions, b as UseWidgetTokenResult, W as WidgetsProviderProps } from './auth-Ba2f778e.js';
+export { a as AuthOrganization, e as AuthOrganizationSchema, b as AuthSession, d as AuthSessionSchema, A as AuthUser, c as AuthUserSchema, I as Impersonator, f as ImpersonatorSchema } from './auth-organization-CN1WpGnL.js';
+export { AppearanceSchema, AuthGatePropsSchema, AuthTokenSchema, BaseWidgetPropsSchema, IdentityProviderPropsSchema, OrganizationWidgetPropsSchema, RadiusSchema, ScalingSchema, UnauthenticatedActionSchema, UseWidgetTokenOptionsSchema, UseWidgetTokenResultSchema, WidgetsProviderPropsSchema } from './schemas/index.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'zod/v4/core';
+import 'zod';