@stackframe/stack-ui 2.5.17 → 2.5.19

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @stackframe/stack-ui
 
+## 2.5.19
+
+### Patch Changes
+
+- Team frontend components
+- Updated dependencies
+  - @stackframe/stack-shared@2.5.19
+
+## 2.5.18
+
+### Patch Changes
+
+- Multi-factor authentication
+- Updated dependencies
+  - @stackframe/stack-shared@2.5.18
+
 ## 2.5.17
 
 ### Patch Changes

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

@@ -0,0 +1,27 @@
+import React from "react";
+export declare function TextCell(props: {
+    children: React.ReactNode;
+    size?: number;
+    icon?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function AvatarCell(props: {
+    src?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function DateCell(props: {
+    date: Date;
+    ignoreAfterYears?: number;
+}): import("react/jsx-runtime").JSX.Element;
+type ActionItem = '-' | {
+    item: React.ReactNode;
+    onClick: (e: React.MouseEvent) => void | Promise<void>;
+    danger?: boolean;
+};
+export declare function ActionCell(props: {
+    items?: ActionItem[];
+    invisible?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function BadgeCell(props: {
+    badges: string[];
+    size?: number;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DotsHorizontalIcon } from "@radix-ui/react-icons";
+import { useEffect, useRef, useState } from "react";
+import { SimpleTooltip, cn, Avatar, AvatarImage, Badge, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../..";
+export function TextCell(props) {
+    const textRef = useRef(null);
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    const overflowStyle = "text-ellipsis text-nowrap overflow-x-hidden";
+    useEffect(() => {
+        const checkOverflow = () => {
+            if (textRef.current) {
+                const isOverflowing = textRef.current.scrollWidth > textRef.current.clientWidth;
+                setIsOverflowing(isOverflowing);
+            }
+        };
+        checkOverflow();
+        window.addEventListener('resize', checkOverflow);
+        return () => {
+            window.removeEventListener('resize', checkOverflow);
+        };
+    }, []);
+    return (_jsx("div", { className: "relative", style: { minWidth: props.size }, children: _jsxs("div", { className: "flex items-center gap-2 absolute inset-0", children: [_jsx("div", { className: overflowStyle, ref: textRef, children: isOverflowing ? (_jsx(SimpleTooltip, { tooltip: props.children, children: _jsx("div", { className: overflowStyle, children: props.children }) })) : props.children }), props.icon && _jsx("div", { children: props.icon })] }) }));
+}
+export function AvatarCell(props) {
+    return (_jsx(Avatar, { className: "h-6 w-6", children: _jsx(AvatarImage, { src: props.src }) }));
+}
+export function DateCell(props) {
+    const ignore = !!props.ignoreAfterYears && new Date(new Date().setFullYear(new Date().getFullYear() + props.ignoreAfterYears)) < props.date;
+    const timeString = props.date.toLocaleTimeString([], { year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' });
+    return (_jsx(TextCell, { size: 140, children: ignore ? 'Never' : timeString }));
+}
+export function ActionCell(props) {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: cn("flex h-8 w-8 p-0 data-[state=open]:bg-muted", props.invisible && "invisible"), children: [_jsx(DotsHorizontalIcon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Open menu" })] }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-[160px]", children: props.items?.map((item, index) => item === '-' ? (_jsx(DropdownMenuSeparator, {}, index)) : (_jsx(DropdownMenuItem, { onClick: item.onClick, className: item.danger ? "text-destructive" : "", children: item.item }, index))) })] }));
+}
+export function BadgeCell(props) {
+    return (_jsx("div", { className: "flex items-center gap-1 flex-wrap", children: props.badges.map((badge, index) => (_jsx(Badge, { variant: "secondary", children: badge }, index))) }));
+}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Column } from "@tanstack/react-table";
+interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
+    column: Column<TData, TValue>;
+    columnTitle: React.ReactNode;
+}
+export declare function DataTableColumnHeader<TData, TValue>({ column, columnTitle, className, }: DataTableColumnHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../..";
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@stackframe/stack-ui";
+import { EyeOff, ArrowUp, ArrowDown } from "lucide-react";
+function Item(props) {
+    return (_jsx(DropdownMenuItem, { onClick: props.onClick, children: _jsxs("div", { className: "flex items-center", children: [_jsx(props.icon, { className: "mr-2 h-3.5 w-3.5 text-muted-foreground/70" }), props.children] }) }));
+}
+export function DataTableColumnHeader({ column, columnTitle, className, }) {
+    return (_jsx("div", { className: cn("flex items-center space-x-2", className), children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "ghost", size: "sm", className: "-ml-3 h-8 data-[state=open]:bg-accent", children: [_jsx("span", { children: columnTitle }), column.getIsSorted() === "desc" ? (_jsx(ArrowDown, { className: "ml-2 h-4 w-4" })) : column.getIsSorted() === "asc" ? (_jsx(ArrowUp, { className: "ml-2 h-4 w-4" })) : null] }) }), _jsxs(DropdownMenuContent, { align: "start", children: [column.getCanSort() && (_jsxs(_Fragment, { children: [_jsx(Item, { icon: ArrowUp, onClick: () => column.toggleSorting(false), children: "Asc" }), _jsx(Item, { icon: ArrowDown, onClick: () => column.toggleSorting(true), children: "Desc" })] })), _jsx(Item, { icon: EyeOff, onClick: () => column.toggleVisibility(false), children: "Hide" })] })] }) }));
+}

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

@@ -0,0 +1,10 @@
+import { ColumnDef, Table as TableType, VisibilityState } from "@tanstack/react-table";
+import React from "react";
+interface DataTableProps<TData, TValue> {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    toolbarRender?: (table: TableType<TData>) => React.ReactNode;
+    defaultVisibility?: VisibilityState;
+}
+export declare function DataTable<TData, TValue>({ columns, data, toolbarRender, defaultVisibility, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,39 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@stackframe/stack-ui";
+import { flexRender, getCoreRowModel, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
+import React from "react";
+import { DataTablePagination } from "./pagination";
+import { DataTableToolbar } from "./toolbar";
+export function DataTable({ columns, data, toolbarRender, defaultVisibility, }) {
+    const [rowSelection, setRowSelection] = React.useState({});
+    const [columnVisibility, setColumnVisibility] = React.useState(defaultVisibility || {});
+    const [columnFilters, setColumnFilters] = React.useState([]);
+    const [sorting, setSorting] = React.useState([]);
+    const table = useReactTable({
+        data,
+        columns,
+        state: {
+            sorting,
+            columnVisibility,
+            rowSelection,
+            columnFilters,
+        },
+        enableRowSelection: true,
+        onRowSelectionChange: setRowSelection,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        onColumnVisibilityChange: setColumnVisibility,
+        getCoreRowModel: getCoreRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFacetedRowModel: getFacetedRowModel(),
+        getFacetedUniqueValues: getFacetedUniqueValues(),
+    });
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx(DataTableToolbar, { table: table, toolbarRender: toolbarRender }), _jsx("div", { className: "rounded-md border", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => {
+                                    return (_jsx(TableHead, { colSpan: header.colSpan, children: header.isPlaceholder
+                                            ? null
+                                            : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
+                                }) }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.length ? (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: columns.length, className: "h-24 text-center", children: "No results." }) })) })] }) }), _jsx(DataTablePagination, { table: table })] }));
+}

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

@@ -0,0 +1,15 @@
+import { Column } from "@tanstack/react-table";
+import React from "react";
+interface DataTableFacetedFilterProps<TData, TValue> {
+    column?: Column<TData, TValue>;
+    title?: string;
+    options: {
+        label: string;
+        value: string;
+        icon?: React.ComponentType<{
+            className?: string;
+        }>;
+    }[];
+}
+export declare function DataTableFacetedFilter<TData, TValue>({ column, title, options, }: DataTableFacetedFilterProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../..";
+import { CheckIcon } from "@radix-ui/react-icons";
+import { Badge, Button, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, Popover, PopoverContent, PopoverTrigger, Separator } from "@stackframe/stack-ui";
+import { ListFilter } from "lucide-react";
+export function DataTableFacetedFilter({ column, title, options, }) {
+    const facets = column?.getFacetedUniqueValues();
+    const selectedValues = new Set(column?.getFilterValue());
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-8 border", children: [_jsx(ListFilter, { className: "mr-2 h-4 w-4 text-gray-500" }), title, selectedValues.size > 0 && (_jsxs(_Fragment, { children: [_jsx(Separator, { orientation: "vertical", className: "mx-2 h-4" }), _jsx(Badge, { variant: "secondary", className: "rounded-sm px-1 font-normal lg:hidden", children: selectedValues.size }), _jsx("div", { className: "hidden space-x-1 lg:flex", children: selectedValues.size > 2 ? (_jsxs(Badge, { variant: "secondary", className: "rounded-sm px-1 font-normal", children: [selectedValues.size, " selected"] })) : (options
+                                        .filter((option) => selectedValues.has(option.value))
+                                        .map((option) => (_jsx(Badge, { variant: "secondary", className: "rounded-sm px-1 font-normal", children: option.label }, option.value)))) })] }))] }) }), _jsx(PopoverContent, { className: "w-[200px] p-0", align: "start", children: _jsxs(Command, { children: [_jsx(CommandInput, { placeholder: title }), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results found." }), _jsx(CommandGroup, { children: options.map((option) => {
+                                        const isSelected = selectedValues.has(option.value);
+                                        return (_jsxs(CommandItem, { onSelect: () => {
+                                                if (isSelected) {
+                                                    selectedValues.delete(option.value);
+                                                }
+                                                else {
+                                                    selectedValues.add(option.value);
+                                                }
+                                                const filterValues = Array.from(selectedValues);
+                                                column?.setFilterValue(filterValues.length ? filterValues : undefined);
+                                            }, children: [_jsx("div", { className: cn("mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary", isSelected
+                                                        ? "bg-primary text-primary-foreground"
+                                                        : "opacity-50 [&_svg]:invisible"), children: _jsx(CheckIcon, { className: cn("h-4 w-4") }) }), option.icon && (_jsx(option.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" })), _jsx("span", { children: option.label }), facets?.get(option.value) && (_jsx("span", { className: "ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs", children: facets.get(option.value) }))] }, option.value));
+                                    }) }), selectedValues.size > 0 && (_jsxs(_Fragment, { children: [_jsx(CommandSeparator, {}), _jsx(CommandGroup, { children: _jsx(CommandItem, { onSelect: () => column?.setFilterValue(undefined), className: "justify-center text-center", children: "Clear filters" }) })] }))] })] }) })] }));
+}

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

@@ -0,0 +1,9 @@
+export * from "./cells";
+export * from "./column-header";
+export * from "./data-table";
+export * from "./faceted-filter";
+export * from "./pagination";
+export * from "./toolbar-items";
+export * from "./toolbar";
+export * from "./utils";
+export * from "./view-options";

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

@@ -0,0 +1,9 @@
+export * from "./cells";
+export * from "./column-header";
+export * from "./data-table";
+export * from "./faceted-filter";
+export * from "./pagination";
+export * from "./toolbar-items";
+export * from "./toolbar";
+export * from "./utils";
+export * from "./view-options";

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

@@ -0,0 +1,6 @@
+import { Table } from "@tanstack/react-table";
+interface DataTablePaginationProps<TData> {
+    table: Table<TData>;
+}
+export declare function DataTablePagination<TData>({ table, }: DataTablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, } from "@radix-ui/react-icons";
+import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@stackframe/stack-ui";
+export function DataTablePagination({ table, }) {
+    return (_jsxs("div", { className: "flex items-center justify-between px-2 flex-col sm:flex-row gap-y-4 sm:gap-y-0", children: [_jsx("div", { className: "flex-1 text-sm text-muted-foreground", children: table.getFilteredSelectedRowModel().rows.length === 0 ?
+                    `${table.getFilteredRowModel().rows.length} row(s) found` :
+                    `${table.getFilteredSelectedRowModel().rows.length} of ${table.getFilteredRowModel().rows.length} row(s) selected` }), _jsxs("div", { className: "flex items-center gap-x-6 lg:gap-x-8 flex-col sm:flex-row gap-y-4 sm:gap-y-0", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("p", { className: "text-sm font-medium", children: "Rows per page" }), _jsxs(Select, { value: `${table.getState().pagination.pageSize}`, onValueChange: (value) => {
+                                    table.setPageSize(Number(value));
+                                }, children: [_jsx(SelectTrigger, { className: "h-8 w-[70px]", children: _jsx(SelectValue, { placeholder: table.getState().pagination.pageSize }) }), _jsx(SelectContent, { side: "top", children: [10, 20, 30, 40, 50].map((pageSize) => (_jsx(SelectItem, { value: `${pageSize}`, children: pageSize }, pageSize))) })] })] }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex items-center justify-center text-sm font-medium", children: ["Page ", table.getState().pagination.pageIndex + 1, " of", " ", table.getPageCount()] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsxs(Button, { variant: "outline", className: "hidden h-8 w-8 p-0 lg:flex", onClick: () => table.setPageIndex(0), disabled: !table.getCanPreviousPage(), children: [_jsx("span", { className: "sr-only", children: "Go to first page" }), _jsx(DoubleArrowLeftIcon, { className: "h-4 w-4" })] }), _jsxs(Button, { variant: "outline", className: "h-8 w-8 p-0", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: [_jsx("span", { className: "sr-only", children: "Go to previous page" }), _jsx(ChevronLeftIcon, { className: "h-4 w-4" })] }), _jsxs(Button, { variant: "outline", className: "h-8 w-8 p-0", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: [_jsx("span", { className: "sr-only", children: "Go to next page" }), _jsx(ChevronRightIcon, { className: "h-4 w-4" })] }), _jsxs(Button, { variant: "outline", className: "hidden h-8 w-8 p-0 lg:flex", onClick: () => table.setPageIndex(table.getPageCount() - 1), disabled: !table.getCanNextPage(), children: [_jsx("span", { className: "sr-only", children: "Go to last page" }), _jsx(DoubleArrowRightIcon, { className: "h-4 w-4" })] })] })] })] })] }));
+}

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

@@ -0,0 +1,6 @@
+import { Table } from "@tanstack/react-table";
+export declare function SearchToolbarItem<TData>(props: {
+    table: Table<TData>;
+    keyName: string;
+    placeholder: string;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from "../..";
+export function SearchToolbarItem(props) {
+    return (_jsx(Input, { placeholder: props.placeholder, value: `${props.table.getColumn(props.keyName)?.getFilterValue() ?? ""}`, onChange: (event) => props.table.getColumn(props.keyName)?.setFilterValue(event.target.value), className: "h-8 w-[150px] lg:w-[250px]" }));
+}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Table } from "@tanstack/react-table";
+interface DataTableToolbarProps<TData> {
+    table: Table<TData>;
+    toolbarRender?: (table: Table<TData>) => React.ReactNode;
+}
+export declare function DataTableToolbar<TData>({ table, toolbarRender }: DataTableToolbarProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Cross2Icon } from "@radix-ui/react-icons";
+import { Button } from "@stackframe/stack-ui";
+import { DataTableViewOptions } from "./view-options";
+import { DownloadIcon } from "lucide-react";
+import { mkConfig, generateCsv, download } from 'export-to-csv';
+export function DataTableToolbar({ table, toolbarRender }) {
+    const isFiltered = table.getState().columnFilters.length > 0;
+    const isSorted = table.getState().sorting.length > 0;
+    return (_jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [toolbarRender?.(table), (isFiltered || isSorted) && (_jsxs(Button, { variant: "ghost", onClick: () => {
+                            table.resetColumnFilters();
+                            table.resetSorting();
+                        }, className: "h-8 px-2 lg:px-3", children: ["Reset", _jsx(Cross2Icon, { className: "ml-2 h-4 w-4" })] }))] }), _jsx("div", { className: "flex-1" }), _jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsx(DataTableViewOptions, { table: table }), _jsxs(Button, { variant: "outline", size: "sm", className: "ml-auto hidden h-8 lg:flex", onClick: () => {
+                            const csvConfig = mkConfig({
+                                fieldSeparator: ',',
+                                filename: 'data',
+                                decimalSeparator: '.',
+                                useKeysAsHeaders: true,
+                            });
+                            const renderCellValue = (cell) => {
+                                const rendered = cell.renderValue();
+                                if (rendered === null) {
+                                    return undefined;
+                                }
+                                if (['string', 'number', 'boolean', 'undefined'].includes(typeof rendered)) {
+                                    return rendered;
+                                }
+                                if (rendered instanceof Date) {
+                                    return rendered.toISOString();
+                                }
+                                if (typeof rendered === 'object') {
+                                    return JSON.stringify(rendered);
+                                }
+                            };
+                            const rowModel = table.getCoreRowModel();
+                            const rows = rowModel.rows.map(row => Object.fromEntries(row.getAllCells().map(c => [c.column.id, renderCellValue(c)]).filter(([_, v]) => v !== undefined)));
+                            if (rows.length === 0) {
+                                alert("No data to export");
+                                return;
+                            }
+                            const csv = generateCsv(csvConfig)(rows);
+                            download(csvConfig)(csv);
+                        }, children: [_jsx(DownloadIcon, { className: "mr-2 h-4 w-4" }), "Export CSV"] })] })] }));
+}

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

@@ -0,0 +1,2 @@
+export declare function standardFilterFn(row: any, id: string, value: any): any;
+export declare function arrayFilterFn(row: any, id: string, value: any): any;

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

@@ -0,0 +1,6 @@
+export function standardFilterFn(row, id, value) {
+    return value.includes(row.getValue(id));
+}
+export function arrayFilterFn(row, id, value) {
+    return value.some((v) => row.getValue(id).includes(v));
+}

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

@@ -0,0 +1,6 @@
+import { Table } from "@tanstack/react-table";
+interface DataTableViewOptionsProps<TData> {
+    table: Table<TData>;
+}
+export declare function DataTableViewOptions<TData>({ table, }: DataTableViewOptionsProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MixerHorizontalIcon } from "@radix-ui/react-icons";
+import { Button, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "@stackframe/stack-ui";
+export function DataTableViewOptions({ table, }) {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "ml-auto hidden h-8 lg:flex", children: [_jsx(MixerHorizontalIcon, { className: "mr-2 h-4 w-4" }), "View"] }) }), _jsxs(DropdownMenuContent, { align: "end", children: [_jsx(DropdownMenuLabel, { children: "Toggle columns" }), _jsx(DropdownMenuSeparator, {}), table
+                        .getAllColumns()
+                        .filter((column) => typeof column.accessorFn !== "undefined" && column.getCanHide())
+                        .map((column) => {
+                        return (_jsx(DropdownMenuCheckboxItem, { className: "capitalize", checked: column.getIsVisible(), onCheckedChange: (value) => column.toggleVisibility(!!value), children: column.id }, column.id));
+                    })] })] }));
+}

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

@@ -0,0 +1,4 @@
+export declare function EditableText(props: {
+    value: string;
+    onSave?: (value: string) => void | Promise<void>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/editable-text.js

@@ -0,0 +1,16 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Edit } from "lucide-react";
+import { useState } from "react";
+import { Button, Input, Typography } from "..";
+export function EditableText(props) {
+    const [editing, setEditing] = useState(false);
+    const [editingValue, setEditingValue] = useState(props.value);
+    return (_jsx("div", { className: 'flex items-center gap-2', children: editing ? (_jsxs(_Fragment, { children: [_jsx(Input, { value: editingValue, onChange: (e) => setEditingValue(e.target.value) }), _jsx(Button, { onClick: async () => {
+                        await props.onSave?.(editingValue);
+                        setEditing(false);
+                    }, children: "Save" }), _jsx(Button, { variant: 'outline', onClick: () => {
+                        setEditingValue(props.value);
+                        setEditing(false);
+                    }, children: "Cancel" })] })) : (_jsxs(_Fragment, { children: [_jsx(Typography, { children: props.value }), _jsx(Button, { onClick: () => setEditing(true), size: 'icon', variant: 'ghost', children: _jsx(Edit, { className: "w-4 h-4" }) })] })) }));
+}

package/dist/components/simple-tooltip.js

@@ -7,5 +7,5 @@ export function SimpleTooltip(props) {
         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 }) })] }) }));
+    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 whitespace-pre-wrap", children: props.tooltip }) })] }) }));
 }

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

@@ -5,5 +5,6 @@ declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<H
 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>>;
-export { Card, ClickableCard, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+export { Card, ClickableCard, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, CardSubtitle };

package/dist/components/ui/card.js

@@ -5,14 +5,15 @@ const Card = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { r
 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 })));
 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", className), ...props })));
+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 })));
 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 })));
 CardTitle.displayName = "CardTitle";
 const CardDescription = React.forwardRef(({ 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 pt-0", className), ...props })));
+const CardContent = React.forwardRef(({ 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 })));
 CardFooter.displayName = "CardFooter";
-export { Card, ClickableCard, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+export { Card, ClickableCard, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, CardSubtitle };

package/dist/components/ui/container.js

@@ -1,19 +1,8 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useId } from 'react';
-import { cn } from '../..';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { filterUndefined } from '@stackframe/stack-shared/dist/utils/objects';
+import React from 'react';
 const Container = React.forwardRef(({ size, ...props }, ref) => {
-    const styleId = useId().replaceAll(':', '-');
-    const styleSheet = `
-  .stack-inner-container-${styleId} {
-    max-width: 100%;
-  }
-  @media (min-width: ${size}px) {
-    .stack-inner-container-${styleId} {
-      width: ${size}px;
-    }
-  }
-  `;
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: styleSheet }), _jsx("div", { className: "flex justify-center w-full", children: _jsx("div", { ...props, ref: ref, className: cn(props.className, `stack-inner-container-${styleId}`), children: props.children }) })] }));
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "flex justify-center w-full", children: _jsx("div", { ...props, ref: ref, style: { width: '100%', maxWidth: size, ...props.style ? filterUndefined(props.style) : {} }, children: props.children }) }) }));
 });
 export { Container };

package/dist/index.d.ts

@@ -2,6 +2,8 @@ export * from "./components/action-dialog";
 export * from "./components/browser-frame";
 export * from "./components/copy-button";
 export * from "./components/copy-field";
+export * from "./components/data-table";
+export * from "./components/editable-text";
 export * from "./components/simple-tooltip";
 export * from "./components/ui/accordion";
 export * from "./components/ui/alert";

package/dist/index.js

@@ -2,6 +2,8 @@ export * from "./components/action-dialog";
 export * from "./components/browser-frame";
 export * from "./components/copy-button";
 export * from "./components/copy-field";
+export * from "./components/data-table";
+export * from "./components/editable-text";
 export * from "./components/simple-tooltip";
 export * from "./components/ui/accordion";
 export * from "./components/ui/alert";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackframe/stack-ui",
-  "version": "2.5.17",
+  "version": "2.5.19",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -57,6 +57,8 @@
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
     "class-variance-authority": "^0.7.0",
+    "@tanstack/react-table": "^8.17.0",
+    "export-to-csv": "^1.3.0",
     "clsx": "^2.0.0",
     "cmdk": "^1.0.0",
     "input-otp": "^1.2.4",
@@ -66,7 +68,7 @@
     "react-hook-form": "^7.51.4",
     "react-resizable-panels": "^2.0.19",
     "tailwind-merge": "^2.3.0",
-    "@stackframe/stack-shared": "2.5.17"
+    "@stackframe/stack-shared": "2.5.19"
   },
   "devDependencies": {
     "@types/react": "^18.2.66",