@stackframe/stack 2.2.5 → 2.3.1

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

@@ -4,4 +4,3 @@ export default function CardFrame({ children, fullPage }: {
     children: React.ReactNode;
     fullPage?: boolean;
 }): string | number | boolean | Iterable<React.ReactNode> | Promise<React.AwaitedReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
-//# sourceMappingURL=card-frame.d.ts.map

package/dist/components/credential-sign-in.d.ts

@@ -1,2 +1 @@
 export default function CredentialSignIn(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=credential-sign-in.d.ts.map

package/dist/components/credential-sign-up.d.ts

@@ -1,2 +1 @@
 export default function CredentialSignUp(): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=credential-sign-up.d.ts.map

package/dist/components/forgot-password.d.ts

@@ -1,4 +1,3 @@
 export default function ForgotPassword({ onSent }: {
     onSent?: () => void;
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=forgot-password.d.ts.map

package/dist/components/form-warning.d.ts

@@ -1,4 +1,3 @@
 export default function FormWarningText({ text }: {
     text?: string;
 }): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=form-warning.d.ts.map

package/dist/components/magic-link-sign-in.d.ts

@@ -0,0 +1 @@
+export default function MagicLinkSignIn(): import("react/jsx-runtime").JSX.Element;

package/dist/components/magic-link-sign-in.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import FormWarningText from "./form-warning";
+import { validateEmail } from "../utils/email";
+import { useStackApp } from "..";
+import { Button, Input, Label } from "../components-core";
+export default function MagicLinkSignIn() {
+    const [email, setEmail] = useState('');
+    const [sent, setSent] = useState(false);
+    const [error, setError] = useState('');
+    const app = useStackApp();
+    const onSubmit = async () => {
+        if (!email) {
+            setError('Please enter your email');
+            return;
+        }
+        if (!validateEmail(email)) {
+            setError('Please enter a valid email');
+            return;
+        }
+        const error = await app.sendMagicLinkEmail(email);
+        if (error) {
+            setError(error.message);
+            return;
+        }
+        setSent(true);
+    };
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', alignItems: 'stretch' }, children: [_jsx(Label, { htmlFor: "email", children: "Email" }), _jsx(Input, { id: "email", type: "email", name: "email", value: email, onChange: (e) => {
+                    setEmail(e.target.value);
+                    setError('');
+                } }), _jsx(FormWarningText, { text: error }), _jsx(Button, { disabled: sent, style: { marginTop: '1.5rem' }, onClick: onSubmit, children: sent ? 'Email sent' : 'Send magic link' })] }));
+}

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

@@ -4,4 +4,3 @@ export default function MessageCard({ children, title, fullPage }: {
     title: string;
     fullPage?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=message-card.d.ts.map

package/dist/components/oauth-button.d.ts

@@ -2,4 +2,3 @@ export default function OAuthButton({ provider, type, }: {
     provider: string;
     type: 'signin' | 'signup';
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=oauth-button.d.ts.map

package/dist/components/oauth-group.d.ts

@@ -1,4 +1,3 @@
 export default function OAuthGroup({ type, }: {
     type: 'signin' | 'signup';
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=oauth-group.d.ts.map

package/dist/components/password-field.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
 declare const PasswordField: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & import("react").RefAttributes<HTMLInputElement>>;
 export default PasswordField;
-//# sourceMappingURL=password-field.d.ts.map

package/dist/components/password-reset-inner.d.ts

@@ -2,4 +2,3 @@ export default function PasswordResetInner({ code, fullPage }: {
     code: string;
     fullPage?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=password-reset-inner.d.ts.map

package/dist/components/redirect-message-card.d.ts

@@ -2,4 +2,3 @@ export default function RedirectMessageCard({ type, fullPage, }: {
     type: 'signedIn' | 'signedOut' | 'emailSent' | 'passwordReset' | 'emailVerified';
     fullPage?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=redirect-message-card.d.ts.map

package/dist/components/separator-with-text.d.ts

@@ -1,4 +1,3 @@
 export default function SeparatorWithText({ text }: {
     text: string;
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=separator-with-text.d.ts.map

package/dist/components/user-avatar.d.ts

@@ -1,4 +1,3 @@
 export default function UserAvatar(props: {
     size?: number;
 }): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=user-avatar.d.ts.map

package/dist/components/user-button.d.ts

@@ -2,4 +2,3 @@ export default function UserButton({ showUserInfo, showColorMode, }: {
     showUserInfo?: boolean;
     showColorMode?: boolean;
 }): import("react/jsx-runtime").JSX.Element | null;
-//# sourceMappingURL=user-button.d.ts.map

package/dist/components-core/avatar.d.ts

@@ -4,4 +4,3 @@ declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.Avata
 declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
 declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export { Avatar, AvatarImage, AvatarFallback };
-//# sourceMappingURL=avatar.d.ts.map

package/dist/components-core/button.d.ts

@@ -8,4 +8,3 @@ export type ButtonProps = {
 } & Omit<React.HTMLProps<HTMLButtonElement>, 'size' | 'type' | 'onClick'>;
 declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export { Button, };
-//# sourceMappingURL=button.d.ts.map

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

@@ -4,4 +4,3 @@ declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<H
 declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export { Card, CardHeader, CardFooter, CardContent, };
-//# sourceMappingURL=card.d.ts.map

package/dist/components-core/collapsible.d.ts

@@ -4,4 +4,3 @@ declare const Collapsible: import("react").ForwardRefExoticComponent<Collapsible
 declare const CollapsibleTrigger: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 declare const CollapsibleContent: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };
-//# sourceMappingURL=collapsible.d.ts.map

package/dist/components-core/container.d.ts

@@ -4,4 +4,3 @@ type ContainerProps = {
 } & Omit<React.HTMLProps<HTMLDivElement>, 'size'>;
 export declare function Container({ size, ...props }: ContainerProps): import("react/jsx-runtime").JSX.Element;
 export {};
-//# sourceMappingURL=container.d.ts.map

package/dist/components-core/dropdown.d.ts

@@ -11,4 +11,3 @@ declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<DropdownMe
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, };
-//# sourceMappingURL=dropdown.d.ts.map

package/dist/components-core/index.d.ts

@@ -1,26 +1,25 @@
+/// <reference types="node" />
 import React from 'react';
-import type { Link as StaticLink } from './link';
-import type { Popover as StaticPopover } from './popover';
-import type { DropdownMenu as StaticDropdownMenu } from './dropdown';
-import type { Collapsible as StaticCollapsible } from './collapsible';
 export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<import("./button").ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.InputHTMLAttributes<HTMLInputElement> & Pick<React.HTMLProps<HTMLInputElement>, "ref">, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export declare const Container: React.ForwardRefExoticComponent<Omit<{
     size?: number | "xs" | "sm" | "md" | "lg" | "xl" | undefined;
 } & Omit<React.HTMLProps<HTMLDivElement>, "size">, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const Separator: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-separator").SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLHRElement>>;
-export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<React.InputHTMLAttributes<HTMLInputElement> & Pick<React.HTMLProps<HTMLInputElement>, "ref">, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Separator: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-separator").SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const Label: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-label").LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
-export declare function Link(props: React.ComponentProps<typeof StaticLink>): import("react/jsx-runtime").JSX.Element;
+export declare const Link: React.ForwardRefExoticComponent<Omit<{
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+    href: string | import("url").Url;
+} & Omit<React.HTMLProps<HTMLLinkElement>, "size" | "href">, "ref"> & React.RefAttributes<HTMLLinkElement>>;
 export declare const Text: React.ForwardRefExoticComponent<Omit<Omit<{
     variant?: "primary" | "secondary" | "warning" | "success" | undefined;
     as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
 } & Omit<React.HTMLProps<HTMLParagraphElement>, "size">, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-export declare const Card: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare function Popover(props: React.ComponentProps<typeof StaticPopover>): import("react/jsx-runtime").JSX.Element;
+export declare const Popover: React.ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverProps & React.RefAttributes<never>>;
 export declare const PopoverTrigger: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-popover").PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export declare const PopoverContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare function DropdownMenu(props: React.ComponentProps<typeof StaticDropdownMenu>): import("react/jsx-runtime").JSX.Element;
+export declare const DropdownMenu: React.ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuProps & React.RefAttributes<never>>;
 export declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dropdown-menu").DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dropdown-menu").DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dropdown-menu").DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
@@ -30,13 +29,17 @@ export declare const DropdownMenuLabel: React.ForwardRefExoticComponent<Omit<Omi
     inset?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const DropdownMenuSeparator: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dropdown-menu").DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const Avatar: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-avatar").AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-avatar").AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Avatar: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-avatar").AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-avatar").AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
 export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-avatar").AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
-export declare function Collapsible(props: React.ComponentProps<typeof StaticCollapsible>): import("react/jsx-runtime").JSX.Element;
+export declare const Collapsible: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-collapsible").CollapsibleProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const CollapsibleTrigger: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-collapsible").CollapsibleTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export declare const CollapsibleContent: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-collapsible").CollapsibleContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Card: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const CardHeader: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const CardContent: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const CardFooter: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=index.d.ts.map
+export declare const Tabs: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsList: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsContent: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/components-core/index.js

@@ -10,103 +10,39 @@ export const Button = forwardRef((props, ref) => {
     }, [props.onClick]);
     return _jsx(Button, { ...props, onClick: props.onClick && onClick, loading: props.loading || onClickLoading, disabled: props.disabled || onClickLoading, ref: ref });
 });
-export const Container = forwardRef((props, ref) => {
-    const { Container } = useComponents();
-    return _jsx(Container, { ...props, ref: ref });
-});
-export const Separator = forwardRef((props, ref) => {
-    const { Separator } = useComponents();
-    return _jsx(Separator, { ...props, ref: ref });
-});
-export const Input = forwardRef((props, ref) => {
-    const { Input } = useComponents();
-    return _jsx(Input, { ...props, ref: ref });
-});
-export const Label = forwardRef((props, ref) => {
-    const { Label } = useComponents();
-    return _jsx(Label, { ...props, ref: ref });
-});
-export function Link(props) {
-    const { Link } = useComponents();
-    return _jsx(Link, { ...props });
-}
-export const Text = forwardRef((props, ref) => {
-    const { Text } = useComponents();
-    return _jsx(Text, { ...props, ref: ref });
-});
-export const Card = forwardRef((props, ref) => {
-    const { Card } = useComponents();
-    return _jsx(Card, { ...props, ref: ref });
-});
-export function Popover(props) {
-    const { Popover } = useComponents();
-    return _jsx(Popover, { ...props });
-}
-export const PopoverTrigger = forwardRef((props, ref) => {
-    const { PopoverTrigger } = useComponents();
-    return _jsx(PopoverTrigger, { ...props, ref: ref });
-});
-export const PopoverContent = forwardRef((props, ref) => {
-    const { PopoverContent } = useComponents();
-    return _jsx(PopoverContent, { ...props, ref: ref });
-});
-export function DropdownMenu(props) {
-    const { DropdownMenu } = useComponents();
-    return _jsx(DropdownMenu, { ...props });
-}
-export const DropdownMenuTrigger = forwardRef((props, ref) => {
-    const { DropdownMenuTrigger } = useComponents();
-    return _jsx(DropdownMenuTrigger, { ...props, ref: ref });
-});
-export const DropdownMenuContent = forwardRef((props, ref) => {
-    const { DropdownMenuContent } = useComponents();
-    return _jsx(DropdownMenuContent, { ...props, ref: ref });
-});
-export const DropdownMenuItem = forwardRef((props, ref) => {
-    const { DropdownMenuItem } = useComponents();
-    return _jsx(DropdownMenuItem, { ...props, ref: ref });
-});
-export const DropdownMenuLabel = forwardRef((props, ref) => {
-    const { DropdownMenuLabel } = useComponents();
-    return _jsx(DropdownMenuLabel, { ...props, ref: ref });
-});
-export const DropdownMenuSeparator = forwardRef((props, ref) => {
-    const { DropdownMenuSeparator } = useComponents();
-    return _jsx(DropdownMenuSeparator, { ...props, ref: ref });
-});
-export const Avatar = forwardRef((props, ref) => {
-    const { Avatar } = useComponents();
-    return _jsx(Avatar, { ...props, ref: ref });
-});
-export const AvatarFallback = forwardRef((props, ref) => {
-    const { AvatarFallback } = useComponents();
-    return _jsx(AvatarFallback, { ...props, ref: ref });
-});
-export const AvatarImage = forwardRef((props, ref) => {
-    const { AvatarImage } = useComponents();
-    return _jsx(AvatarImage, { ...props, ref: ref });
-});
-export function Collapsible(props) {
-    const { Collapsible } = useComponents();
-    return _jsx(Collapsible, { ...props });
+function createDynamicComponent(component) {
+    return forwardRef((props, ref) => {
+        const Component = useComponents()[component];
+        return _jsx(Component, { ...props, ref: ref });
+    });
 }
-export const CollapsibleTrigger = forwardRef((props, ref) => {
-    const { CollapsibleTrigger } = useComponents();
-    return _jsx(CollapsibleTrigger, { ...props, ref: ref });
-});
-export const CollapsibleContent = forwardRef((props, ref) => {
-    const { CollapsibleContent } = useComponents();
-    return _jsx(CollapsibleContent, { ...props, ref: ref });
-});
-export const CardHeader = forwardRef((props, ref) => {
-    const { CardHeader } = useComponents();
-    return _jsx(CardHeader, { ...props, ref: ref });
-});
-export const CardContent = forwardRef((props, ref) => {
-    const { CardContent } = useComponents();
-    return _jsx(CardContent, { ...props, ref: ref });
-});
-export const CardFooter = forwardRef((props, ref) => {
-    const { CardFooter } = useComponents();
-    return _jsx(CardFooter, { ...props, ref: ref });
-});
+;
+export const Input = createDynamicComponent('Input');
+export const Container = createDynamicComponent('Container');
+export const Separator = createDynamicComponent('Separator');
+export const Label = createDynamicComponent('Label');
+export const Link = createDynamicComponent('Link');
+export const Text = createDynamicComponent('Text');
+export const Popover = createDynamicComponent('Popover');
+export const PopoverTrigger = createDynamicComponent('PopoverTrigger');
+export const PopoverContent = createDynamicComponent('PopoverContent');
+export const DropdownMenu = createDynamicComponent('DropdownMenu');
+export const DropdownMenuTrigger = createDynamicComponent('DropdownMenuTrigger');
+export const DropdownMenuContent = createDynamicComponent('DropdownMenuContent');
+export const DropdownMenuItem = createDynamicComponent('DropdownMenuItem');
+export const DropdownMenuLabel = createDynamicComponent('DropdownMenuLabel');
+export const DropdownMenuSeparator = createDynamicComponent('DropdownMenuSeparator');
+export const Avatar = createDynamicComponent('Avatar');
+export const AvatarFallback = createDynamicComponent('AvatarFallback');
+export const AvatarImage = createDynamicComponent('AvatarImage');
+export const Collapsible = createDynamicComponent('Collapsible');
+export const CollapsibleTrigger = createDynamicComponent('CollapsibleTrigger');
+export const CollapsibleContent = createDynamicComponent('CollapsibleContent');
+export const Card = createDynamicComponent('Card');
+export const CardHeader = createDynamicComponent('CardHeader');
+export const CardContent = createDynamicComponent('CardContent');
+export const CardFooter = createDynamicComponent('CardFooter');
+export const Tabs = createDynamicComponent('Tabs');
+export const TabsList = createDynamicComponent('TabsList');
+export const TabsContent = createDynamicComponent('TabsContent');
+export const TabsTrigger = createDynamicComponent('TabsTrigger');

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

@@ -2,4 +2,3 @@ import React from "react";
 type InputProps = React.InputHTMLAttributes<HTMLInputElement> & Pick<React.HTMLProps<HTMLInputElement>, 'ref'>;
 declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export { Input };
-//# sourceMappingURL=input.d.ts.map

package/dist/components-core/label.d.ts

@@ -2,4 +2,3 @@ import React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 declare const Label: React.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
 export { Label };
-//# sourceMappingURL=label.d.ts.map

package/dist/components-core/label.js

@@ -8,7 +8,7 @@ import { useDesign } from "../providers/design-provider";
 const Primitive = styled(LabelPrimitive.Root) `
   font-size: ${FONT_SIZES.sm};
   line-height: 1;
-  color: ${props => props.color};
+  color: ${props => props.$color};
   font-weight: 500;
   font-family: ${FONT_FAMILY};
   display: block;
@@ -16,7 +16,7 @@ const Primitive = styled(LabelPrimitive.Root) `
 `;
 const Label = React.forwardRef((props, ref) => {
     const { colorMode } = useDesign();
-    return _jsx(Primitive, { color: colorMode === 'dark' ? SECONDARY_FONT_COLORS.dark : SECONDARY_FONT_COLORS.light, ref: ref, ...props });
+    return _jsx(Primitive, { "$color": colorMode === 'dark' ? SECONDARY_FONT_COLORS.dark : SECONDARY_FONT_COLORS.light, ref: ref, ...props });
 });
 Label.displayName = LabelPrimitive.Root.displayName;
 export { Label };

package/dist/components-core/link.d.ts

@@ -7,4 +7,3 @@ type LinkProps = {
 } & Omit<React.HTMLProps<HTMLLinkElement>, 'size' | 'href'>;
 export declare function Link({ size, href, style, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
 export {};
-//# sourceMappingURL=link.d.ts.map

package/dist/components-core/loading-indicator.d.ts

@@ -4,4 +4,3 @@ declare const LoadingIndicator: import("styled-components").IStyledComponent<"we
     size?: number | undefined;
 }>>;
 export default LoadingIndicator;
-//# sourceMappingURL=loading-indicator.d.ts.map

package/dist/components-core/popover.d.ts

@@ -4,4 +4,3 @@ declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
 declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Popover, PopoverTrigger, PopoverContent };
-//# sourceMappingURL=popover.d.ts.map

package/dist/components-core/separator.d.ts

@@ -2,4 +2,3 @@ import React from 'react';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 declare const Separator: React.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Separator };
-//# sourceMappingURL=separator.d.ts.map

package/dist/components-core/tabs.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/components-core/tabs.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import styled from 'styled-components';
+import { useDesign } from '..';
+const Tabs = TabsPrimitive.Root;
+const StyledTabsList = styled(TabsPrimitive.List) `
+  display: flex;
+  height: 2.5rem
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  background-color: ${props => props.$bgColor};
+  padding: 0.25rem;
+`;
+const TabsList = React.forwardRef((props, ref) => {
+    const { colorMode } = useDesign();
+    return _jsx(StyledTabsList, { "$bgColor": colorMode === 'dark' ? 'rgb(39, 39, 42)' : 'rgb(244, 244, 245)', ...props, ref: ref });
+});
+const StayledTabsTrigger = styled(TabsPrimitive.Trigger) `
+  display: flex;
+  flex-grow: 1;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  transition: all;
+  outline: none;
+
+  &:disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
+  &[data-state='active'] {
+    background-color: ${props => props.$bgColor};
+  }
+`;
+const TabsTrigger = React.forwardRef((props, ref) => {
+    const { colors } = useDesign();
+    return _jsx(StayledTabsTrigger, { "$bgColor": colors.backgroundColor, ...props, ref: ref });
+});
+const StyledTabsContent = styled(TabsPrimitive.Content) `
+  margin-top: 1.5rem;
+`;
+const TabsContent = React.forwardRef((props, ref) => {
+    return _jsx(StyledTabsContent, { ...props, ref: ref });
+});
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/dist/components-core/text.d.ts

@@ -6,4 +6,3 @@ type TextProps = {
 } & Omit<React.HTMLProps<HTMLParagraphElement>, 'size'>;
 declare const Text: React.ForwardRefExoticComponent<Omit<TextProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 export { Text };
-//# sourceMappingURL=text.d.ts.map

package/dist/components-core-joy/button.d.ts

@@ -1,3 +1,2 @@
 import React from "react";
 export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("../components-core/button").ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-//# sourceMappingURL=button.d.ts.map

package/dist/components-core-joy/input.d.ts

@@ -1,3 +1,2 @@
 import React from 'react';
 export declare const Input: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.InputHTMLAttributes<HTMLInputElement> & Pick<React.HTMLProps<HTMLInputElement>, "ref">, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
-//# sourceMappingURL=input.d.ts.map

package/dist/components-core-joy/separator.d.ts

@@ -1,3 +1,2 @@
 import React from "react";
-export declare const Separator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@radix-ui/react-separator").SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLHRElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=separator.d.ts.map
+export declare const Separator: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@radix-ui/react-separator").SeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components-core-joy/tabs.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Tabs: React.ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsList: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@radix-ui/react-tabs").TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const TabsContent: React.ForwardRefExoticComponent<Omit<Omit<Omit<import("@radix-ui/react-tabs").TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/components-core-joy/tabs.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { Tabs as JoyTabs, TabList as JoyTabsList, Tab as JoyTabsTrigger, TabPanel as JoyTabssContent } from '@mui/joy';
+export const Tabs = React.forwardRef((props, ref) => {
+    const { color, onChange, ref: _, ...validProps } = props; // TODO: add onChange
+    return _jsx(JoyTabs, { ref: ref, sx: { bgcolor: "transparent" }, ...validProps });
+});
+export const TabsList = React.forwardRef((props, ref) => {
+    const { color, ref: _, ...validProps } = props;
+    return _jsx(JoyTabsList, { ref: ref, ...validProps });
+});
+export const TabsTrigger = React.forwardRef((props, ref) => {
+    const { style, color, onChange, ref: _, ...validProps } = props; // TODO: add onChange
+    return _jsx(JoyTabsTrigger, { ref: ref, ...validProps, style: { flexGrow: 1, ...style } });
+});
+export const TabsContent = React.forwardRef((props, ref) => {
+    const { color, ref: _, ...validProps } = props;
+    return _jsx(JoyTabssContent, { ref: ref, ...validProps });
+});

package/dist/components-core-joy/text.d.ts

@@ -4,4 +4,3 @@ export declare const Text: React.ForwardRefExoticComponent<Omit<Omit<Omit<{
     as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | undefined;
     size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
 } & Omit<React.HTMLProps<HTMLParagraphElement>, "size">, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
-//# sourceMappingURL=text.d.ts.map

package/dist/components-page/account-settings.d.ts

@@ -1,4 +1,3 @@
 export default function AccountSettings({ fullPage }: {
     fullPage?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=account-settings.d.ts.map

package/dist/components-page/account-settings.js

@@ -42,7 +42,7 @@ function PasswordSection() {
     const [oldPasswordError, setOldPasswordError] = useState('');
     const [newPassword, setNewPassword] = useState('');
     const [newPasswordError, setNewPasswordError] = useState('');
-    if (user?.authMethod !== 'credential') {
+    if (!user?.hasPassword) {
         return null;
     }
     return (_jsxs(SettingSection, { title: 'Password', desc: 'Change your password here.', buttonDisabled: !oldPassword || !newPassword, buttonText: 'Save', onButtonClick: async () => {

package/dist/components-page/auth-page.d.ts

@@ -0,0 +1,4 @@
+export default function AuthPage({ fullPage, type }: {
+    fullPage?: boolean;
+    type: 'sign-in' | 'sign-up';
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components-page/auth-page.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CredentialSignIn from '../components/credential-sign-in';
+import SeparatorWithText from '../components/separator-with-text';
+import OAuthGroup from '../components/oauth-group';
+import CardFrame from '../components/card-frame';
+import { useUser, useStackApp, CredentialSignUp } from '..';
+import RedirectMessageCard from '../components/redirect-message-card';
+import { Link, Tabs, TabsContent, TabsList, TabsTrigger, Text } from "../components-core";
+import MagicLinkSignIn from '../components/magic-link-sign-in';
+export default function AuthPage({ fullPage = false, type }) {
+    const stackApp = useStackApp();
+    const user = useUser();
+    const project = stackApp.useProject();
+    if (user) {
+        return _jsx(RedirectMessageCard, { type: 'signedIn', fullPage: fullPage });
+    }
+    const enableSeparator = (project.credentialEnabled || project.magicLinkEnabled) && project.oauthProviders.filter(p => p.enabled).length > 0;
+    return (_jsxs(CardFrame, { fullPage: fullPage, children: [_jsxs("div", { style: { textAlign: 'center', marginBottom: '1.5rem' }, children: [_jsx(Text, { size: "xl", as: 'h2', children: type === 'sign-in' ? 'Sign in to your account' : 'Create a new account' }), type === 'sign-in' ? (_jsxs(Text, { children: ["Don't have an account? ", _jsx(Link, { href: stackApp.urls.signUp, children: "Sign up" })] })) : (_jsxs(Text, { children: ["Already have an account? ", _jsx(Link, { href: stackApp.urls.signIn, children: "Sign in" })] }))] }), _jsx(OAuthGroup, { type: 'signin' }), enableSeparator && _jsx(SeparatorWithText, { text: 'Or continue with' }), project.credentialEnabled && project.magicLinkEnabled ? (_jsxs(Tabs, { defaultValue: 'magic-link', children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: 'magic-link', children: "Magic Link" }), _jsx(TabsTrigger, { value: 'password', children: "Password" })] }), _jsx(TabsContent, { value: 'magic-link', children: _jsx(MagicLinkSignIn, {}) }), _jsx(TabsContent, { value: 'password', children: type === 'sign-up' ? _jsx(CredentialSignUp, {}) : _jsx(CredentialSignIn, {}) })] })) : project.credentialEnabled ? (type === 'sign-up' ? _jsx(CredentialSignUp, {}) : _jsx(CredentialSignIn, {})) : project.magicLinkEnabled ? (_jsx(MagicLinkSignIn, {})) : null] }));
+}

package/dist/components-page/email-verification.d.ts

@@ -2,4 +2,3 @@ export default function EmailVerification({ searchParams: { code, }, fullPage, }
     searchParams?: Record<string, string>;
     fullPage?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=email-verification.d.ts.map

package/dist/components-page/forgot-password.d.ts

@@ -1,4 +1,3 @@
 export default function ForgotPassword({ fullPage }: {
     fullPage?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=forgot-password.d.ts.map