@stackframe/stack-ui 2.5.13 → 2.5.16

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @stackframe/stack-ui
 
+## 2.5.16
+
+### Patch Changes
+
+- @stackframe/stack-shared@2.5.16
+
+## 2.5.15
+
+### Patch Changes
+
+- Webhooks
+- Updated dependencies
+  - @stackframe/stack-shared@2.5.15
+
+## 2.5.14
+
+### Patch Changes
+
+- @stackframe/stack-shared@2.5.14
+
 ## 2.5.13
 
 ### Patch Changes

package/dist/components/action-dialog.d.ts

@@ -0,0 +1,26 @@
+import { Button } from '..';
+import { LucideIcon } from "lucide-react";
+import React from "react";
+export type ActionDialogProps = {
+    trigger?: React.ReactNode;
+    open?: boolean;
+    onClose?: () => void;
+    onOpenChange?: (open: boolean) => void;
+    titleIcon?: LucideIcon;
+    title: boolean | React.ReactNode;
+    description?: React.ReactNode;
+    danger?: boolean;
+    okButton?: boolean | Readonly<{
+        label?: string;
+        onClick?: () => Promise<"prevent-close" | undefined | void>;
+        props?: Partial<React.ComponentProps<typeof Button>>;
+    }>;
+    cancelButton?: boolean | Readonly<{
+        label?: string;
+        onClick?: () => Promise<"prevent-close" | undefined | void>;
+        props?: Partial<React.ComponentProps<typeof Button>>;
+    }>;
+    confirmText?: string;
+    children?: React.ReactNode;
+};
+export declare function ActionDialog(props: ActionDialogProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/action-dialog.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Alert, Button, Checkbox, Dialog, DialogBody, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, Label } from '..';
+import { CircleAlert, Info } from "lucide-react";
+import React, { useId } from "react";
+export function ActionDialog(props) {
+    const okButton = props.okButton === true ? {} : props.okButton;
+    const cancelButton = props.cancelButton === true ? {} : props.cancelButton;
+    const anyButton = !!(okButton || cancelButton);
+    const title = props.title === true ? (props.cancelButton ? "Confirmation" : "Alert") : props.title;
+    const TitleIcon = props.titleIcon || (props.danger ? CircleAlert : Info);
+    const [openState, setOpenState] = React.useState(!!props.open);
+    const open = props.open ?? openState;
+    const [confirmed, setConfirmed] = React.useState(false);
+    const confirmId = useId();
+    const [invalidationCount, setInvalidationCount] = React.useState(0);
+    const onOpenChange = (open) => {
+        if (!open) {
+            props.onClose?.();
+            setConfirmed(false);
+        }
+        else {
+            setInvalidationCount(invalidationCount + 1);
+        }
+        setOpenState(open);
+        props.onOpenChange?.(open);
+    };
+    return (_jsxs(Dialog, { open: open, onOpenChange: onOpenChange, children: [props.trigger && _jsx(DialogTrigger, { asChild: true, children: props.trigger }), _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsxs(DialogTitle, { className: "flex items-center", children: [_jsx(TitleIcon, { className: "h-4 w-4 mr-2" }), title] }), _jsx(DialogDescription, { children: props.description })] }), _jsxs(DialogBody, { className: "pb-2", children: [_jsx("div", { children: props.children }), props.confirmText && _jsx(Alert, { children: _jsxs(Label, { className: "flex gap-4 items-center", children: [_jsx(Checkbox, { id: confirmId, checked: confirmed, onCheckedChange: (v) => setConfirmed(!!v) }), props.confirmText] }) })] }), anyButton && _jsxs(DialogFooter, { className: "gap-2", children: [cancelButton && (_jsx(Button, { variant: "secondary", color: "neutral", onClick: async () => {
+                                    if (await cancelButton.onClick?.() !== "prevent-close") {
+                                        onOpenChange(false);
+                                    }
+                                }, ...cancelButton.props, children: "Cancel" })), okButton && (_jsx(Button, { disabled: !!props.confirmText && !confirmed, variant: props.danger ? "destructive" : "default", onClick: async () => {
+                                    if (await okButton.onClick?.() !== "prevent-close") {
+                                        onOpenChange(false);
+                                    }
+                                }, ...okButton.props, children: okButton.label ?? "OK" }))] })] })] }, invalidationCount));
+}

package/dist/components/browser-frame/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export type Props = {
+    url?: string;
+    padding?: string;
+    children: React.ReactNode;
+};
+export declare const BrowserFrame: ({ url, padding, children }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/components/browser-frame/index.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const BrowserFrame = ({ url, padding, children }) => (_jsxs("div", { className: "rounded-xl overflow-hidden shadow-2xl", children: [_jsxs("div", { className: "bg-gray-200 dark:bg-gray-800 h-10 flex items-center py-2 px-4 box-border", children: [_jsx("div", { className: "w-3 h-3 bg-red-500 rounded-full mr-1.5 flex-shrink-0" }), _jsx("div", { className: "w-3 h-3 bg-yellow-500 rounded-full mr-1.5 flex-shrink-0" }), _jsx("div", { className: "w-3 h-3 bg-green-500 rounded-full mr-2 flex-shrink-0" }), url && (_jsx("div", { className: "text-left bg-white dark:bg-gray-700 h-6 rounded-full leading-6 text-sm text-gray-700 dark:text-gray-300 flex-grow ml-2 mr-4 px-4 whitespace-nowrap overflow-hidden overflow-ellipsis", "aria-hidden": true, children: url })), _jsxs("div", { className: "w-4 h-4 ml-auto flex flex-col justify-evenly items-stretch flex-shrink-0", children: [_jsx("span", { className: "h-0.5 bg-gray-400 dark:bg-gray-500" }), _jsx("span", { className: "h-0.5 bg-gray-400 dark:bg-gray-500" }), _jsx("span", { className: "h-0.5 bg-gray-400 dark:bg-gray-500" })] })] }), _jsx("div", { className: `flex flex-col p-4 bg-white dark:bg-black rounded-b-md ${padding ? padding : ""}`, children: children })] }));

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

@@ -0,0 +1,5 @@
+import React from "react";
+declare const CopyButton: React.ForwardRefExoticComponent<Omit<import("./ui/button").ButtonProps & React.RefAttributes<HTMLButtonElement> & {
+    content: string;
+}, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { CopyButton };

package/dist/components/copy-button.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Copy } from "lucide-react";
+import React from "react";
+import { Button, cn, useToast } from "..";
+const CopyButton = React.forwardRef((props, ref) => {
+    const { toast } = useToast();
+    return (_jsx(Button, { variant: "secondary", ...props, className: cn("h-6 w-6 p-1", props.className), ref: ref, onClick: async (...args) => {
+            await props.onClick?.(...args);
+            try {
+                await navigator.clipboard.writeText(props.content);
+                toast({ description: 'Copied to clipboard!' });
+            }
+            catch (e) {
+                toast({ description: 'Failed to copy to clipboard', variant: 'destructive' });
+            }
+        }, children: _jsx(Copy, {}) }));
+});
+CopyButton.displayName = "CopyButton";
+export { CopyButton };

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare function CopyField(props: {
+    value: string;
+    label?: React.ReactNode;
+    helper?: React.ReactNode;
+    height?: number;
+    monospace?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/copy-field.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label, Textarea, Typography } from "..";
+import { CopyButton } from "./copy-button";
+export function CopyField(props) {
+    return (_jsxs("div", { children: [props.label && (_jsx(Label, { children: props.label })), _jsxs("div", { className: "relative pr-2", children: [_jsx(Textarea, { readOnly: true, value: props.value, style: {
+                            height: props.height,
+                            fontFamily: props.monospace ? "ui-monospace, monospace" : "inherit",
+                            whiteSpace: props.monospace ? "pre" : "normal",
+                        } }), _jsx(CopyButton, { content: props.value, className: "absolute right-4 top-2" })] }), props.helper && (_jsx(Typography, { variant: 'secondary', type: 'label', children: props.helper }))] }));
+}

package/dist/components/simple-tooltip.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function SimpleTooltip(props: {
+    tooltip: React.ReactNode;
+    children?: React.ReactNode;
+    type?: 'info' | 'warning';
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/simple-tooltip.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "..";
+import { CircleAlert, Info } from "lucide-react";
+export function SimpleTooltip(props) {
+    const icon = props.type === 'warning' ?
+        _jsx(CircleAlert, { className: "w-4 h-4 text-zinc-500" }) :
+        props.type === 'info' ?
+            _jsx(Info, { className: "w-4 h-4 text-zinc-500" }) :
+            null;
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "flex items-center gap-1", children: [props.children, " ", icon] }) }), _jsx(TooltipContent, { children: _jsx("div", { className: "max-w-60 text-center text-wrap", children: props.tooltip }) })] }) }));
+}

package/dist/components/ui/badge.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "secondary" | "outline" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }

package/dist/components/ui/button.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface OriginalButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
@@ -12,4 +12,4 @@ interface ButtonProps extends OriginalButtonProps {
     loading?: boolean;
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export { Button, buttonVariants };
+export { Button, buttonVariants, ButtonProps };

package/dist/components/ui/command.d.ts

@@ -6,7 +6,7 @@ declare const Command: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement> | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     label?: string | undefined;
     shouldFilter?: boolean | undefined;
     filter?: ((value: string, search: string, keywords?: string[] | undefined) => number) | undefined;
@@ -24,7 +24,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     ref?: React.Ref<HTMLInputElement> | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
     value?: string | undefined;
     onValueChange?: ((search: string) => void) | undefined;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -34,7 +34,7 @@ declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement> | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     label?: string | undefined;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
@@ -43,14 +43,14 @@ declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement> | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement> | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string | undefined;
     forceMount?: boolean | undefined;
@@ -59,7 +59,7 @@ declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<R
     ref?: React.Ref<HTMLDivElement> | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     alwaysRender?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
@@ -68,7 +68,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement> | undefined;
 } & {
     asChild?: boolean | undefined;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
     disabled?: boolean | undefined;
     onSelect?: ((value: string) => void) | undefined;
     value?: string | undefined;

package/dist/components/ui/dropdown-menu.d.ts

@@ -1,6 +1,6 @@
-import React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+import React from "react";
+declare const DropdownMenu: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuProps & React.RefAttributes<never>>;
 declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
@@ -11,8 +11,9 @@ declare const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<Omit<Dropd
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuSubContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuContent: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+declare const DropdownMenuItem: React.ForwardRefExoticComponent<Omit<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref">, "onClick"> & {
     inset?: boolean | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void | Promise<void>) | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuRadioItem: React.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -24,4 +25,4 @@ declare const DropdownMenuShortcut: {
     ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/components/ui/dropdown-menu.js

@@ -1,10 +1,28 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { CheckIcon, ChevronRightIcon, DotFilledIcon, } from "@radix-ui/react-icons";
+import { CheckIcon, ChevronRightIcon, DotFilledIcon } from "@radix-ui/react-icons";
+import React from "react";
+import { useAsyncCallback } from "@stackframe/stack-shared/dist/hooks/use-async-callback";
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
+import { runAsynchronouslyWithAlert } from "@stackframe/stack-shared/dist/utils/promises";
 import { cn } from "../../lib/utils";
-const DropdownMenu = DropdownMenuPrimitive.Root;
+import { Spinner } from "./spinner";
+const DropdownMenuContext = React.createContext(undefined);
+const DropdownMenu = React.forwardRef(({ ...props }, ref) => {
+    const [open, setOpen] = React.useState(!!props.open);
+    return (_jsx(DropdownMenuContext.Provider, { value: {
+            open,
+            setOpen: (o) => {
+                props.onOpenChange?.(o);
+                setOpen(o);
+            }
+        }, children: _jsx(DropdownMenuPrimitive.Root, { ...props, open: props.open ?? open, onOpenChange: o => {
+                props.onOpenChange?.(o);
+                setOpen(o);
+            } }) }));
+});
+DropdownMenu.displayName = DropdownMenuPrimitive.Root.displayName;
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
@@ -18,7 +36,17 @@ DropdownMenuSubContent.displayName =
     DropdownMenuPrimitive.SubContent.displayName;
 const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Portal, { children: _jsx(DropdownMenuPrimitive.Content, { ref: ref, sideOffset: sideOffset, className: cn("z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md", "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }) })));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (_jsx(DropdownMenuPrimitive.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className), ...props })));
+const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => {
+    const { setOpen } = React.useContext(DropdownMenuContext) ?? throwErr("No DropdownMenuContext found");
+    const [handleClick, isLoading] = useAsyncCallback(async (e) => {
+        await props.onClick?.(e);
+        setOpen(false);
+    }, [props.onClick]);
+    return _jsxs(DropdownMenuPrimitive.Item, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", inset && "pl-8", className), ...props, disabled: isLoading || props.disabled, onClick: props.onClick ? (e) => {
+            e.preventDefault();
+            runAsynchronouslyWithAlert(handleClick(e));
+        } : undefined, children: [_jsx("div", { style: { visibility: isLoading ? "visible" : "hidden", position: "absolute", inset: 0, display: "flex", justifyContent: "center", alignItems: "center" }, children: _jsx(Spinner, {}) }), _jsx("div", { style: { visibility: isLoading ? "hidden" : "visible" }, children: props.children })] });
+});
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (_jsxs(DropdownMenuPrimitive.CheckboxItem, { ref: ref, className: cn("relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), checked: checked, ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(DropdownMenuPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "h-4 w-4" }) }) }), children] })));
 DropdownMenuCheckboxItem.displayName =
@@ -33,4 +61,4 @@ const DropdownMenuShortcut = ({ className, ...props }) => {
     return (_jsx("span", { className: cn("ml-auto text-xs tracking-widest opacity-60", className), ...props }));
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
-export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, };
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/components/ui/form.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
+import React from "react";
 import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
 declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
@@ -20,4 +20,4 @@ declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelPrimitive.Lab
 declare const FormControl: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-slot").SlotProps & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
 declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
 declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
-export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/components/ui/form.js

@@ -1,10 +1,11 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
 import { Slot } from "@radix-ui/react-slot";
+import React from "react";
 import { Controller, FormProvider, useFormContext, } from "react-hook-form";
+import { StackAssertionError } from "@stackframe/stack-shared/dist/utils/errors";
 import { cn } from "../../lib/utils";
 import { SpanLabel } from "./label";
-import { StackAssertionError } from "@stackframe/stack-shared/dist/utils/errors";
 const Form = FormProvider;
 const FormFieldContext = React.createContext(null);
 const FormField = ({ ...props }) => {
@@ -61,4 +62,4 @@ const FormMessage = React.forwardRef(({ className, children, ...props }, ref) =>
     return (_jsx("p", { ref: ref, id: formMessageId, className: cn("text-[0.8rem] font-medium text-destructive", className), ...props, children: body }));
 });
 FormMessage.displayName = "FormMessage";
-export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField, };
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/components/ui/input-otp.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-declare const InputOTP: React.ForwardRefExoticComponent<(Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "containerClassName" | "noScriptCSSFallback"> & {
+declare const InputOTP: React.ForwardRefExoticComponent<(Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "containerClassName" | "noScriptCSSFallback"> & {
     value?: string | undefined;
     onChange?: ((newValue: string) => unknown) | undefined;
     maxLength: number;
@@ -11,7 +11,7 @@ declare const InputOTP: React.ForwardRefExoticComponent<(Omit<Omit<React.InputHT
 } & {
     render: (props: import("input-otp").RenderProps) => React.ReactNode;
     children?: undefined;
-} & React.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "containerClassName" | "noScriptCSSFallback"> & {
+} & React.RefAttributes<HTMLInputElement>, "ref"> | Omit<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "maxLength" | "textAlign" | "onComplete" | "pushPasswordManagerStrategy" | "containerClassName" | "noScriptCSSFallback"> & {
     value?: string | undefined;
     onChange?: ((newValue: string) => unknown) | undefined;
     maxLength: number;

package/dist/components/ui/navigation-menu.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { ChevronDownIcon } from "@radix-ui/react-icons";

package/dist/components/ui/typography.d.ts

@@ -1,8 +1,8 @@
 import { type VariantProps } from "class-variance-authority";
 import React from "react";
 declare const typographyVariants: (props?: ({
-    type?: "h2" | "h3" | "label" | "p" | "h1" | "h4" | "footnote" | null | undefined;
-    variant?: "destructive" | "success" | "secondary" | "primary" | null | undefined;
+    type?: "h1" | "h2" | "h3" | "h4" | "label" | "p" | "footnote" | null | undefined;
+    variant?: "destructive" | "secondary" | "success" | "primary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface TypographyProps extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof typographyVariants> {
 }

package/dist/index.d.ts

@@ -1,7 +1,12 @@
+export * from "./components/action-dialog";
+export * from "./components/browser-frame";
+export * from "./components/copy-button";
+export * from "./components/copy-field";
+export * from "./components/simple-tooltip";
 export * from "./components/ui/accordion";
 export * from "./components/ui/alert";
-export * from "./components/ui/avatar";
 export * from "./components/ui/aspect-ratio";
+export * from "./components/ui/avatar";
 export * from "./components/ui/badge";
 export * from "./components/ui/breadcrumb";
 export * from "./components/ui/button";
@@ -10,19 +15,22 @@ export * from "./components/ui/card";
 export * from "./components/ui/checkbox";
 export * from "./components/ui/collapsible";
 export * from "./components/ui/command";
+export * from "./components/ui/container";
 export * from "./components/ui/context-menu";
+export * from "./components/ui/dialog";
 export * from "./components/ui/dropdown-menu";
 export * from "./components/ui/form";
 export * from "./components/ui/hover-card";
 export * from "./components/ui/inline-code";
-export * from "./components/ui/input-otp";
 export * from "./components/ui/input";
+export * from "./components/ui/input-otp";
 export * from "./components/ui/label";
+export * from "./components/ui/link";
 export * from "./components/ui/menubar";
 export * from "./components/ui/navigation-menu";
+export * from "./components/ui/password-input";
 export * from "./components/ui/popover";
 export * from "./components/ui/progress";
-export * from "./components/ui/progress";
 export * from "./components/ui/radio-group";
 export * from "./components/ui/scroll-area";
 export * from "./components/ui/select";
@@ -41,7 +49,4 @@ export * from "./components/ui/toggle-group";
 export * from "./components/ui/tooltip";
 export * from "./components/ui/typography";
 export * from "./components/ui/use-toast";
-export * from "./components/ui/container";
-export * from "./components/ui/password-input";
-export * from "./components/ui/link";
 export { cn } from "./lib/utils";

package/dist/index.js

@@ -1,7 +1,12 @@
+export * from "./components/action-dialog";
+export * from "./components/browser-frame";
+export * from "./components/copy-button";
+export * from "./components/copy-field";
+export * from "./components/simple-tooltip";
 export * from "./components/ui/accordion";
 export * from "./components/ui/alert";
-export * from "./components/ui/avatar";
 export * from "./components/ui/aspect-ratio";
+export * from "./components/ui/avatar";
 export * from "./components/ui/badge";
 export * from "./components/ui/breadcrumb";
 export * from "./components/ui/button";
@@ -10,19 +15,22 @@ export * from "./components/ui/card";
 export * from "./components/ui/checkbox";
 export * from "./components/ui/collapsible";
 export * from "./components/ui/command";
+export * from "./components/ui/container";
 export * from "./components/ui/context-menu";
+export * from "./components/ui/dialog";
 export * from "./components/ui/dropdown-menu";
 export * from "./components/ui/form";
 export * from "./components/ui/hover-card";
 export * from "./components/ui/inline-code";
-export * from "./components/ui/input-otp";
 export * from "./components/ui/input";
+export * from "./components/ui/input-otp";
 export * from "./components/ui/label";
+export * from "./components/ui/link";
 export * from "./components/ui/menubar";
 export * from "./components/ui/navigation-menu";
+export * from "./components/ui/password-input";
 export * from "./components/ui/popover";
 export * from "./components/ui/progress";
-export * from "./components/ui/progress";
 export * from "./components/ui/radio-group";
 export * from "./components/ui/scroll-area";
 export * from "./components/ui/select";
@@ -41,7 +49,4 @@ export * from "./components/ui/toggle-group";
 export * from "./components/ui/tooltip";
 export * from "./components/ui/typography";
 export * from "./components/ui/use-toast";
-export * from "./components/ui/container";
-export * from "./components/ui/password-input";
-export * from "./components/ui/link";
 export { cn } from "./lib/utils";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackframe/stack-ui",
-  "version": "2.5.13",
+  "version": "2.5.16",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -66,7 +66,7 @@
     "react-hook-form": "^7.51.4",
     "react-resizable-panels": "^2.0.19",
     "tailwind-merge": "^2.3.0",
-    "@stackframe/stack-shared": "2.5.13"
+    "@stackframe/stack-shared": "2.5.16"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",