@stackframe/stack-ui 2.6.19 → 2.6.20

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @stackframe/stack-ui
 
+## 2.6.20
+
+### Patch Changes
+
+- Next.js 15 fixes
+- Updated dependencies
+  - @stackframe/stack-shared@2.6.20
+
 ## 2.6.19
 
 ### Patch Changes

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

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

package/dist/components/copy-button.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Copy } from "lucide-react";
-import React from "react";
+import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
 import { Button, cn, useToast } from "..";
-const CopyButton = React.forwardRef((props, ref) => {
+const CopyButton = forwardRefIfNeeded((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);

package/dist/components/data-table/data-table.d.ts

@@ -1,4 +1,4 @@
-import { ColumnDef, ColumnFiltersState, OnChangeFn, PaginationState, SortingState, Table as TableType, VisibilityState } from "@tanstack/react-table";
+import { ColumnDef, ColumnFiltersState, SortingState, Table as TableType, VisibilityState } from "@tanstack/react-table";
 import React from "react";
 export declare function TableView<TData, TValue>(props: {
     table: TableType<TData>;
@@ -10,22 +10,20 @@ type DataTableProps<TData, TValue> = {
     data: TData[];
     toolbarRender?: (table: TableType<TData>) => React.ReactNode;
     defaultVisibility?: VisibilityState;
-    defaultFilters?: ColumnFiltersState;
+    defaultColumnFilters?: ColumnFiltersState;
     defaultSorting?: SortingState;
 };
-export declare function DataTable<TData, TValue>({ columns, data, toolbarRender, defaultVisibility, defaultFilters, defaultSorting, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
-type DataTableServerProps<TData, TValue> = DataTableProps<TData, TValue> & {
-    sorting?: SortingState;
-    setSorting?: OnChangeFn<SortingState>;
-    pagination?: PaginationState;
-    setPagination?: OnChangeFn<PaginationState>;
-    rowCount?: number;
-    columnFilters?: ColumnFiltersState;
-    setColumnFilters?: OnChangeFn<ColumnFiltersState>;
-    manualPagination?: boolean;
-    manualFiltering?: boolean;
-    globalFilter?: any;
-    setGlobalFilter?: OnChangeFn<any>;
+export declare function DataTable<TData, TValue>({ columns, data, toolbarRender, defaultVisibility, defaultColumnFilters, defaultSorting, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+type DataTableManualPaginationProps<TData, TValue> = DataTableProps<TData, TValue> & {
+    onUpdate: (options: {
+        cursor: string;
+        limit: number;
+        sorting: SortingState;
+        columnFilters: ColumnFiltersState;
+        globalFilters: any;
+    }) => Promise<{
+        nextCursor: string | null;
+    }>;
 };
-export declare function DataTableManual<TData, TValue>({ columns, data, toolbarRender, defaultVisibility, sorting, setSorting, pagination, setPagination, rowCount, columnFilters, setColumnFilters, globalFilter, setGlobalFilter, manualPagination, manualFiltering, }: DataTableServerProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableManualPagination<TData, TValue>({ columns, data, toolbarRender, defaultVisibility, defaultColumnFilters, defaultSorting, onUpdate, }: DataTableManualPaginationProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/data-table/data-table.js

@@ -12,17 +12,49 @@ export function TableView(props) {
                                             : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
                                 }) }, headerGroup.id))) }), _jsx(TableBody, { children: props.table.getRowModel().rows.length ? (props.table.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: props.columns.length, className: "h-24 text-center", children: "No results." }) })) })] }) }), _jsx(DataTablePagination, { table: props.table })] }));
 }
-export function DataTable({ columns, data, toolbarRender, defaultVisibility, defaultFilters, defaultSorting, }) {
+export function DataTable({ columns, data, toolbarRender, defaultVisibility, defaultColumnFilters, defaultSorting, }) {
     const [sorting, setSorting] = React.useState(defaultSorting || []);
-    const [columnFilters, setColumnFilters] = React.useState(defaultFilters || []);
+    const [columnFilters, setColumnFilters] = React.useState(defaultColumnFilters || []);
     const [pagination, setPagination] = React.useState({
         pageIndex: 0,
         pageSize: 10,
     });
     const [globalFilter, setGlobalFilter] = React.useState();
-    return _jsx(DataTableManual, { columns: columns, data: data, toolbarRender: toolbarRender, defaultVisibility: defaultVisibility, sorting: sorting, setSorting: setSorting, columnFilters: columnFilters, setColumnFilters: setColumnFilters, manualPagination: false, manualFiltering: false, pagination: pagination, setPagination: setPagination, globalFilter: globalFilter, setGlobalFilter: setGlobalFilter });
+    return _jsx(DataTableBase, { columns: columns, data: data, toolbarRender: toolbarRender, defaultVisibility: defaultVisibility, sorting: sorting, setSorting: setSorting, columnFilters: columnFilters, setColumnFilters: setColumnFilters, manualPagination: false, manualFiltering: false, pagination: pagination, setPagination: setPagination, globalFilter: globalFilter, setGlobalFilter: setGlobalFilter });
 }
-export function DataTableManual({ columns, data, toolbarRender, defaultVisibility, sorting, setSorting, pagination, setPagination, rowCount, columnFilters, setColumnFilters, globalFilter, setGlobalFilter, manualPagination = true, manualFiltering = true, }) {
+export function DataTableManualPagination({ columns, data, toolbarRender, defaultVisibility, defaultColumnFilters, defaultSorting, onUpdate, }) {
+    const [sorting, setSorting] = React.useState(defaultSorting || []);
+    const [pagination, setPagination] = React.useState({ pageIndex: 0, pageSize: 10 });
+    const [cursors, setCursors] = React.useState({});
+    const [columnFilters, setColumnFilters] = React.useState(defaultColumnFilters || []);
+    const [globalFilter, setGlobalFilter] = React.useState();
+    const [refreshCounter, setRefreshCounter] = React.useState(0);
+    React.useEffect(() => {
+        onUpdate({
+            cursor: cursors[pagination.pageIndex],
+            limit: pagination.pageSize,
+            sorting,
+            columnFilters,
+            globalFilters: globalFilter,
+        }).then(({ nextCursor }) => {
+            setCursors(c => nextCursor ? { ...c, [pagination.pageIndex + 1]: nextCursor } : c);
+        }).catch(console.error);
+    }, [pagination, sorting, columnFilters, refreshCounter]);
+    // Reset to first page when filters change
+    React.useEffect(() => {
+        setPagination(pagination => ({ ...pagination, pageIndex: 0 }));
+        setCursors({});
+    }, [columnFilters, sorting, pagination.pageSize]);
+    // Refresh the users when the global filter changes. Delay to prevent unnecessary re-renders.
+    React.useEffect(() => {
+        const timer = setTimeout(() => {
+            setRefreshCounter(x => x + 1);
+        }, 500);
+        return () => clearTimeout(timer);
+    }, [globalFilter]);
+    return _jsx(DataTableBase, { columns: columns, data: data, toolbarRender: toolbarRender, sorting: sorting, setSorting: setSorting, pagination: pagination, setPagination: setPagination, columnFilters: columnFilters, setColumnFilters: setColumnFilters, rowCount: pagination.pageSize * Object.keys(cursors).length + (cursors[pagination.pageIndex + 1] ? 1 : 0), globalFilter: globalFilter, setGlobalFilter: setGlobalFilter, defaultColumnFilters: defaultColumnFilters, defaultSorting: defaultSorting, defaultVisibility: defaultVisibility });
+}
+function DataTableBase({ columns, data, toolbarRender, defaultVisibility, sorting, setSorting, pagination, setPagination, rowCount, columnFilters, setColumnFilters, globalFilter, setGlobalFilter, manualPagination = true, manualFiltering = true, }) {
     const [rowSelection, setRowSelection] = React.useState({});
     const [columnVisibility, setColumnVisibility] = React.useState(defaultVisibility || {});
     const table = useReactTable({

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

@@ -1,7 +1,13 @@
 import React from "react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 declare const Accordion: React.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionTrigger: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const AccordionContent: React.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React.FC<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}>;
+declare const AccordionTrigger: React.FC<Omit<AccordionPrimitive.AccordionTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: React.Ref<HTMLButtonElement> | undefined;
+}>;
+declare const AccordionContent: React.FC<Omit<AccordionPrimitive.AccordionContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}>;
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/dist/components/ui/accordion.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import { cn } from "../../lib/utils";
 const Accordion = AccordionPrimitive.Root;
-const AccordionItem = React.forwardRef(({ className, ...props }, ref) => (_jsx(AccordionPrimitive.Item, { ref: ref, className: cn("border-b", className), ...props })));
+const AccordionItem = forwardRefIfNeeded(({ className, ...props }, ref) => (_jsx(AccordionPrimitive.Item, { ref: ref, className: cn("border-b", className), ...props })));
 AccordionItem.displayName = "AccordionItem";
-const AccordionTrigger = React.forwardRef(({ className, children, disabled, ...props }, ref) => (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { ref: ref, className: cn("flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180", className), ...props, children: [children, !disabled && _jsx(ChevronDownIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" })] }) })));
+const AccordionTrigger = forwardRefIfNeeded(({ className, children, disabled, ...props }, ref) => (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { ref: ref, className: cn("flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180", className), ...props, children: [children, !disabled && _jsx(ChevronDownIcon, { className: "h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" })] }) })));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
-const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Content, { ref: ref, className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", ...props, children: _jsx("div", { className: cn("pb-4 pt-0", className), children: children }) })));
+const AccordionContent = forwardRefIfNeeded(({ className, children, ...props }, ref) => (_jsx(AccordionPrimitive.Content, { ref: ref, className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", ...props, children: _jsx("div", { className: cn("pb-4 pt-0", className), children: children }) })));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -1,8 +1,14 @@
 import React from "react";
 import { type VariantProps } from "class-variance-authority";
-declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+declare const Alert: React.FC<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
     variant?: "default" | "destructive" | "success" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
-declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
-declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}>;
+declare const AlertTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement> & {
+    ref?: React.Ref<HTMLParagraphElement> | undefined;
+}>;
+declare const AlertDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement> & {
+    ref?: React.Ref<HTMLParagraphElement> | undefined;
+}>;
 export { Alert, AlertTitle, AlertDescription };

package/dist/components/ui/alert.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
+import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7", {
@@ -14,10 +14,10 @@ const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm [
         variant: "default",
     },
 });
-const Alert = React.forwardRef(({ className, variant, ...props }, ref) => (_jsx("div", { ref: ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props })));
+const Alert = forwardRefIfNeeded(({ className, variant, ...props }, ref) => (_jsx("div", { ref: ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props })));
 Alert.displayName = "Alert";
-const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("h5", { ref: ref, className: cn("mb-1 font-medium leading-none tracking-tight", className), ...props })));
+const AlertTitle = forwardRefIfNeeded(({ className, ...props }, ref) => (_jsx("h5", { ref: ref, className: cn("mb-1 font-medium leading-none tracking-tight", className), ...props })));
 AlertTitle.displayName = "AlertTitle";
-const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("text-sm [&_p]:leading-relaxed", className), ...props })));
+const AlertDescription = forwardRefIfNeeded(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("text-sm [&_p]:leading-relaxed", className), ...props })));
 AlertDescription.displayName = "AlertDescription";
 export { Alert, AlertTitle, AlertDescription };

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

@@ -1,6 +1,12 @@
 import React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-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>>;
+declare const Avatar: React.FC<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & {
+    ref?: React.Ref<HTMLSpanElement> | undefined;
+}>;
+declare const AvatarImage: React.FC<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & {
+    ref?: React.Ref<HTMLImageElement> | undefined;
+}>;
+declare const AvatarFallback: React.FC<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & {
+    ref?: React.Ref<HTMLSpanElement> | undefined;
+}>;
 export { Avatar, AvatarImage, AvatarFallback };

package/dist/components/ui/avatar.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
+import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cn } from "../../lib/utils";
-const Avatar = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Root, { ref: ref, className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className), ...props })));
+const Avatar = forwardRefIfNeeded(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Root, { ref: ref, className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className), ...props })));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-const AvatarImage = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Image, { ref: ref, className: cn("aspect-square h-full w-full", className), ...props })));
+const AvatarImage = forwardRefIfNeeded(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Image, { ref: ref, className: cn("aspect-square h-full w-full", className), ...props })));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Fallback, { ref: ref, className: cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className), ...props })));
+const AvatarFallback = forwardRefIfNeeded(({ className, ...props }, ref) => (_jsx(AvatarPrimitive.Fallback, { ref: ref, className: cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className), ...props })));
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 export { Avatar, AvatarImage, AvatarFallback };

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

@@ -5,5 +5,7 @@ declare const badgeVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
 }
-declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLDivElement>>;
+declare const Badge: React.FC<BadgeProps & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}>;
 export { Badge, badgeVariants };

package/dist/components/ui/badge.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
+import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
@@ -15,7 +15,7 @@ const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-
         variant: "default",
     },
 });
-const Badge = React.forwardRef(({ className, variant, ...props }, ref) => {
+const Badge = forwardRefIfNeeded(({ className, variant, ...props }, ref) => {
     return (_jsx("div", { ref: ref, className: cn(badgeVariants({ variant }), className), ...props }));
 });
 Badge.displayName = "Badge";

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

@@ -1,13 +1,23 @@
 import React from "react";
-declare const Breadcrumb: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+declare const Breadcrumb: React.FC<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
     separator?: React.ReactNode;
-} & React.RefAttributes<HTMLElement>>;
-declare const BreadcrumbList: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & React.RefAttributes<HTMLOListElement>>;
-declare const BreadcrumbItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React.RefAttributes<HTMLLIElement>>;
-declare const BreadcrumbLink: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+} & {
+    ref?: React.Ref<HTMLElement> | undefined;
+}>;
+declare const BreadcrumbList: React.FC<Omit<React.DetailedHTMLProps<React.OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & {
+    ref?: React.Ref<HTMLOListElement> | undefined;
+}>;
+declare const BreadcrumbItem: React.FC<Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    ref?: React.Ref<HTMLLIElement> | undefined;
+}>;
+declare const BreadcrumbLink: React.FC<Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
     asChild?: boolean | undefined;
-} & React.RefAttributes<HTMLAnchorElement>>;
-declare const BreadcrumbPage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+} & {
+    ref?: React.Ref<HTMLAnchorElement> | undefined;
+}>;
+declare const BreadcrumbPage: React.FC<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: React.Ref<HTMLSpanElement> | undefined;
+}>;
 declare const BreadcrumbSeparator: {
     ({ children, className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/components/ui/breadcrumb.js

@@ -1,20 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
 import { ChevronRightIcon, DotsHorizontalIcon } from "@radix-ui/react-icons";
 import { Slot } from "@radix-ui/react-slot";
 import { cn } from "../../lib/utils";
-const Breadcrumb = React.forwardRef(({ ...props }, ref) => _jsx("nav", { ref: ref, "aria-label": "breadcrumb", ...props }));
+const Breadcrumb = forwardRefIfNeeded(({ ...props }, ref) => _jsx("nav", { ref: ref, "aria-label": "breadcrumb", ...props }));
 Breadcrumb.displayName = "Breadcrumb";
-const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => (_jsx("ol", { ref: ref, className: cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className), ...props })));
+const BreadcrumbList = forwardRefIfNeeded(({ className, ...props }, ref) => (_jsx("ol", { ref: ref, className: cn("flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", className), ...props })));
 BreadcrumbList.displayName = "BreadcrumbList";
-const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => (_jsx("li", { ref: ref, className: cn("inline-flex items-center gap-1.5", className), ...props })));
+const BreadcrumbItem = forwardRefIfNeeded(({ className, ...props }, ref) => (_jsx("li", { ref: ref, className: cn("inline-flex items-center gap-1.5", className), ...props })));
 BreadcrumbItem.displayName = "BreadcrumbItem";
-const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref) => {
+const BreadcrumbLink = forwardRefIfNeeded(({ asChild, className, ...props }, ref) => {
     const Comp = asChild ? Slot : "a";
     return (_jsx(Comp, { ref: ref, className: cn("hover:text-foreground", className), ...props }));
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
-const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => (_jsx("span", { ref: ref, role: "link", "aria-disabled": "true", "aria-current": "page", className: cn("font-normal text-foreground", className), ...props })));
+const BreadcrumbPage = forwardRefIfNeeded(({ className, ...props }, ref) => (_jsx("span", { ref: ref, role: "link", "aria-disabled": "true", "aria-current": "page", className: cn("font-normal text-foreground", className), ...props })));
 BreadcrumbPage.displayName = "BreadcrumbPage";
 const BreadcrumbSeparator = ({ children, className, ...props }) => (_jsx("li", { role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:size-3.5", className), ...props, children: children ?? _jsx(ChevronRightIcon, {}) }));
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";

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

@@ -11,5 +11,7 @@ interface ButtonProps extends OriginalButtonProps {
     onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void | Promise<void>;
     loading?: boolean;
 }
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+declare const Button: React.FC<ButtonProps & {
+    ref?: React.Ref<HTMLButtonElement> | undefined;
+}>;
 export { Button, buttonVariants, ButtonProps };

package/dist/components/ui/button.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from "react";
+import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
@@ -28,12 +28,12 @@ const buttonVariants = cva("inline-flex items-center justify-center whitespace-n
         size: "default",
     },
 });
-const OriginalButton = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+const OriginalButton = forwardRefIfNeeded(({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return (_jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props }));
 });
 OriginalButton.displayName = "Button";
-const Button = React.forwardRef(({ onClick, loading: loadingProp, children, ...props }, ref) => {
+const Button = forwardRefIfNeeded(({ onClick, loading: loadingProp, children, ...props }, ref) => {
     const [handleClick, isLoading] = useAsyncCallback(async (e) => {
         await onClick?.(e);
     }, [onClick]);

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

@@ -1,10 +1,26 @@
 import React from "react";
-declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const ClickableCard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
-declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
-declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const CardSubtitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
-declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Card: React.FC<React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}>;
+declare const ClickableCard: React.FC<React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}>;
+declare const CardHeader: React.FC<React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}>;
+declare const CardTitle: React.FC<React.HTMLAttributes<HTMLHeadingElement> & {
+    ref?: React.Ref<HTMLParagraphElement> | undefined;
+}>;
+declare const CardDescription: React.FC<React.HTMLAttributes<HTMLParagraphElement> & {
+    ref?: React.Ref<HTMLParagraphElement> | undefined;
+}>;
+declare const CardContent: React.FC<React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}>;
+declare const CardSubtitle: React.FC<React.HTMLAttributes<HTMLParagraphElement> & {
+    ref?: React.Ref<HTMLParagraphElement> | undefined;
+}>;
+declare const CardFooter: React.FC<React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement> | undefined;
+}>;
 export { Card, ClickableCard, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, CardSubtitle };

package/dist/components/ui/card.js

@@ -1,19 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
+import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
 import { cn } from "../../lib/utils";
-const Card = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("rounded-xl border bg-card text-card-foreground shadow-sm", className), ...props })));
+const Card = forwardRefIfNeeded(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("rounded-xl border bg-card text-card-foreground shadow-sm", className), ...props })));
 Card.displayName = "Card";
-const ClickableCard = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("rounded-xl border bg-card text-card-foreground shadow-sm cursor-pointer hover:border-[color:var(--primary)] ease-in-out", className), ...props })));
+const ClickableCard = forwardRefIfNeeded(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("rounded-xl border bg-card text-card-foreground shadow-sm cursor-pointer hover:border-[color:var(--primary)] ease-in-out", className), ...props })));
 ClickableCard.displayName = "ClickableCard";
-const CardHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-col space-y-1.5 p-6 pb-0", className), ...props })));
+const CardHeader = forwardRefIfNeeded(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-col space-y-1.5 p-6 pb-0", className), ...props })));
 CardHeader.displayName = "CardHeader";
-const CardTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("h3", { ref: ref, className: cn("font-semibold leading-none tracking-tight capitalize", className), ...props })));
+const CardTitle = forwardRefIfNeeded(({ className, ...props }, ref) => (_jsx("h3", { ref: ref, className: cn("font-semibold leading-none tracking-tight capitalize", className), ...props })));
 CardTitle.displayName = "CardTitle";
-const CardDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("p", { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
+const CardDescription = forwardRefIfNeeded(({ className, ...props }, ref) => (_jsx("p", { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
 CardDescription.displayName = "CardDescription";
-const CardContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("p-6", className), ...props })));
+const CardContent = forwardRefIfNeeded(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("p-6", className), ...props })));
 CardContent.displayName = "CardContent";
-const CardSubtitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("h4", { ref: ref, className: cn("text-sm text-muted-foreground font-bold", className), ...props })));
-const CardFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex items-center p-6 pt-0", className), ...props })));
+const CardSubtitle = forwardRefIfNeeded(({ className, ...props }, ref) => (_jsx("h4", { ref: ref, className: cn("text-sm text-muted-foreground font-bold", className), ...props })));
+const CardFooter = forwardRefIfNeeded(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex items-center p-6 pt-0", className), ...props })));
 CardFooter.displayName = "CardFooter";
 export { Card, ClickableCard, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, CardSubtitle };

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

@@ -1,4 +1,6 @@
 import React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const Checkbox: React.FC<Omit<CheckboxPrimitive.CheckboxProps & React.RefAttributes<HTMLButtonElement>, "ref"> & {
+    ref?: React.Ref<HTMLButtonElement> | undefined;
+}>;
 export { Checkbox };

package/dist/components/ui/checkbox.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
+import { forwardRefIfNeeded } from "@stackframe/stack-shared/dist/utils/react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "@radix-ui/react-icons";
 import { cn } from "../../lib/utils";
-const Checkbox = React.forwardRef(({ className, ...props }, ref) => (_jsx(CheckboxPrimitive.Root, { ref: ref, className: cn("peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: _jsx(CheckIcon, { className: "h-4 w-4" }) }) })));
+const Checkbox = forwardRefIfNeeded(({ className, ...props }, ref) => (_jsx(CheckboxPrimitive.Root, { ref: ref, className: cn("peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: _jsx(CheckIcon, { className: "h-4 w-4" }) }) })));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 export { Checkbox };

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

@@ -1,80 +1,16 @@
 import React from "react";
 import { type DialogProps } from "@radix-ui/react-dialog";
-declare const Command: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement> | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    label?: string | undefined;
-    shouldFilter?: boolean | undefined;
-    filter?: ((value: string, search: string, keywords?: string[] | undefined) => number) | undefined;
-    defaultValue?: string | undefined;
-    value?: string | undefined;
-    onValueChange?: ((value: string) => void) | undefined;
-    loop?: boolean | undefined;
-    disablePointerSelection?: boolean | undefined;
-    vimBindings?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+import { Command as CommandPrimitive } from "cmdk";
+declare const Command: React.FC<React.ComponentPropsWithoutRef<typeof CommandPrimitive>>;
 interface CommandDialogProps extends DialogProps {
 }
 declare const CommandDialog: ({ children, ...props }: CommandDialogProps) => import("react/jsx-runtime").JSX.Element;
-declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
-    ref?: React.Ref<HTMLInputElement> | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
-    value?: string | undefined;
-    onValueChange?: ((search: string) => void) | undefined;
-} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
-declare const CommandList: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement> | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    label?: string | undefined;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
-    children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement> | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "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;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
-    heading?: React.ReactNode;
-    value?: string | undefined;
-    forceMount?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    ref?: React.Ref<HTMLDivElement> | undefined;
-} & {
-    asChild?: boolean | undefined;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
-    alwaysRender?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandItem: 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;
-}, "asChild" | "key" | keyof React.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
-    disabled?: boolean | undefined;
-    onSelect?: ((value: string) => void) | undefined;
-    value?: string | undefined;
-    keywords?: string[] | undefined;
-    forceMount?: boolean | undefined;
-} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandInput: React.FC<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>>;
+declare const CommandList: React.FC<React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>>;
+declare const CommandEmpty: React.FC<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>>;
+declare const CommandGroup: React.FC<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>>;
+declare const CommandSeparator: React.FC<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>>;
+declare const CommandItem: React.FC<React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>>;
 declare const CommandShortcut: {
     ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
     displayName: string;