@gram-ai/elements 1.34.0 → 1.36.0

package/src/plugins/generative-ui/ui/card.tsx

@@ -2,7 +2,10 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-function Card({ className, ...props }: React.ComponentProps<"div">) {
+function Card({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="card"
@@ -15,7 +18,10 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+function CardHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="card-header"
@@ -28,7 +34,10 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+function CardTitle({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="card-title"
@@ -38,7 +47,10 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+function CardDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="card-description"
@@ -48,7 +60,10 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+function CardAction({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="card-action"
@@ -61,7 +76,10 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+function CardContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="card-content"
@@ -71,7 +89,10 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+function CardFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="card-footer"

package/src/plugins/generative-ui/ui/checkbox-wrapper.tsx

@@ -18,7 +18,7 @@ export function CheckboxWrapper({
   label,
   valuePath,
   defaultChecked,
-}: CheckboxWrapperProps) {
+}: CheckboxWrapperProps): React.JSX.Element {
   const id = React.useId();
 
   return (

package/src/plugins/generative-ui/ui/checkbox.tsx

@@ -9,7 +9,7 @@ import { cn } from "@/lib/utils";
 function Checkbox({
   className,
   ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>): React.JSX.Element {
   return (
     <CheckboxPrimitive.Root
       data-slot="checkbox"

package/src/plugins/generative-ui/ui/data-table.tsx

@@ -25,7 +25,7 @@ export function DataTable({
   rows,
   className,
   ...props
-}: DataTableProps) {
+}: DataTableProps): React.JSX.Element {
   return (
     <div className={cn(className)} {...props}>
       <Table>

package/src/plugins/generative-ui/ui/dialog.tsx

@@ -9,32 +9,32 @@ import { Button } from "@/components/ui/button";
 
 function Dialog({
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+}: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />;
 }
 
 function DialogTrigger({
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element {
   return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
 }
 
 function DialogPortal({
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+}: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element {
   return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
 }
 
 function DialogClose({
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+}: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element {
   return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
 }
 
 function DialogOverlay({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element {
   return (
     <DialogPrimitive.Overlay
       data-slot="dialog-overlay"
@@ -54,7 +54,7 @@ function DialogContent({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
-}) {
+}): React.JSX.Element {
   return (
     <DialogPortal data-slot="dialog-portal">
       <DialogOverlay />
@@ -81,7 +81,10 @@ function DialogContent({
   );
 }
 
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+function DialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="dialog-header"
@@ -98,7 +101,7 @@ function DialogFooter({
   ...props
 }: React.ComponentProps<"div"> & {
   showCloseButton?: boolean;
-}) {
+}): React.JSX.Element {
   return (
     <div
       data-slot="dialog-footer"
@@ -121,7 +124,7 @@ function DialogFooter({
 function DialogTitle({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+}: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element {
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
@@ -134,7 +137,9 @@ function DialogTitle({
 function DialogDescription({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+}: React.ComponentProps<
+  typeof DialogPrimitive.Description
+>): React.JSX.Element {
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"

package/src/plugins/generative-ui/ui/dropdown-menu.tsx

@@ -8,13 +8,15 @@ import { cn } from "@/lib/utils";
 
 function DropdownMenu({
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): React.JSX.Element {
   return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
 function DropdownMenuPortal({
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+}: React.ComponentProps<
+  typeof DropdownMenuPrimitive.Portal
+>): React.JSX.Element {
   return (
     <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
   );
@@ -22,7 +24,9 @@ function DropdownMenuPortal({
 
 function DropdownMenuTrigger({
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+}: React.ComponentProps<
+  typeof DropdownMenuPrimitive.Trigger
+>): React.JSX.Element {
   return (
     <DropdownMenuPrimitive.Trigger
       data-slot="dropdown-menu-trigger"
@@ -35,7 +39,9 @@ function DropdownMenuContent({
   className,
   sideOffset = 4,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+}: React.ComponentProps<
+  typeof DropdownMenuPrimitive.Content
+>): React.JSX.Element {
   return (
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
@@ -53,7 +59,9 @@ function DropdownMenuContent({
 
 function DropdownMenuGroup({
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+}: React.ComponentProps<
+  typeof DropdownMenuPrimitive.Group
+>): React.JSX.Element {
   return (
     <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
   );
@@ -67,7 +75,7 @@ function DropdownMenuItem({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
   inset?: boolean;
   variant?: "default" | "destructive";
-}) {
+}): React.JSX.Element {
   return (
     <DropdownMenuPrimitive.Item
       data-slot="dropdown-menu-item"
@@ -87,7 +95,9 @@ function DropdownMenuCheckboxItem({
   children,
   checked,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+}: React.ComponentProps<
+  typeof DropdownMenuPrimitive.CheckboxItem
+>): React.JSX.Element {
   return (
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
@@ -110,7 +120,9 @@ function DropdownMenuCheckboxItem({
 
 function DropdownMenuRadioGroup({
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+}: React.ComponentProps<
+  typeof DropdownMenuPrimitive.RadioGroup
+>): React.JSX.Element {
   return (
     <DropdownMenuPrimitive.RadioGroup
       data-slot="dropdown-menu-radio-group"
@@ -123,7 +135,9 @@ function DropdownMenuRadioItem({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+}: React.ComponentProps<
+  typeof DropdownMenuPrimitive.RadioItem
+>): React.JSX.Element {
   return (
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
@@ -149,7 +163,7 @@ function DropdownMenuLabel({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
   inset?: boolean;
-}) {
+}): React.JSX.Element {
   return (
     <DropdownMenuPrimitive.Label
       data-slot="dropdown-menu-label"
@@ -166,7 +180,9 @@ function DropdownMenuLabel({
 function DropdownMenuSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+}: React.ComponentProps<
+  typeof DropdownMenuPrimitive.Separator
+>): React.JSX.Element {
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
@@ -179,7 +195,7 @@ function DropdownMenuSeparator({
 function DropdownMenuShortcut({
   className,
   ...props
-}: React.ComponentProps<"span">) {
+}: React.ComponentProps<"span">): React.JSX.Element {
   return (
     <span
       data-slot="dropdown-menu-shortcut"
@@ -194,7 +210,7 @@ function DropdownMenuShortcut({
 
 function DropdownMenuSub({
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): React.JSX.Element {
   return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }
 
@@ -205,7 +221,7 @@ function DropdownMenuSubTrigger({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
   inset?: boolean;
-}) {
+}): React.JSX.Element {
   return (
     <DropdownMenuPrimitive.SubTrigger
       data-slot="dropdown-menu-sub-trigger"
@@ -225,7 +241,9 @@ function DropdownMenuSubTrigger({
 function DropdownMenuSubContent({
   className,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+}: React.ComponentProps<
+  typeof DropdownMenuPrimitive.SubContent
+>): React.JSX.Element {
   return (
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"

package/src/plugins/generative-ui/ui/grid.tsx

@@ -17,7 +17,7 @@ export function Grid({
   gap = "md",
   className,
   ...props
-}: GridProps) {
+}: GridProps): React.JSX.Element {
   return (
     <div
       data-slot="grid"

package/src/plugins/generative-ui/ui/index.ts

@@ -1,43 +1,157 @@
 // Vercel shadcn primitives
-export * from "./accordion";
-export * from "./alert";
-export * from "./avatar";
-export * from "./badge";
-export * from "./button";
-export * from "./card";
-export * from "./checkbox";
-export * from "./dialog";
-export * from "./dropdown-menu";
-export * from "./input";
-export * from "./label";
-export * from "./pagination";
-export * from "./popover";
-export * from "./progress";
-export * from "./radio-group";
-export * from "./select";
-export * from "./separator";
-export * from "./skeleton";
-export * from "./switch";
-export * from "./table";
-export * from "./tabs";
-export * from "./textarea";
-export * from "./tooltip";
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "./accordion";
+export { Alert, AlertDescription, AlertTitle } from "./alert";
+export {
+  Avatar,
+  AvatarBadge,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarGroupCount,
+  AvatarImage,
+} from "./avatar";
+export { Badge, badgeVariants } from "./badge";
+export { Button, buttonVariants } from "./button";
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "./card";
+export { Checkbox } from "./checkbox";
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+} from "./dialog";
+export {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+export { Input } from "./input";
+export { Label } from "./label";
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "./pagination";
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+} from "./popover";
+export { Progress } from "./progress";
+export { RadioGroup, RadioGroupItem } from "./radio-group";
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "./select";
+export { Separator } from "./separator";
+export { Skeleton } from "./skeleton";
+export { Switch } from "./switch";
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./table";
+export {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  tabsListVariants,
+} from "./tabs";
+export { Textarea } from "./textarea";
+export {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "./tooltip";
 
 // json-render catalog wrappers
-export * from "./accordion-wrapper";
-export * from "./action-button";
-export * from "./alert-wrapper";
-export * from "./avatar-wrapper";
-export * from "./button-wrapper";
-export * from "./card-wrapper";
-export * from "./checkbox-wrapper";
-export * from "./data-table";
-export * from "./grid";
-export * from "./input-wrapper";
-export * from "./list";
-export * from "./metric";
-export * from "./select-wrapper";
-export * from "./skeleton-wrapper";
-export * from "./stack";
-export * from "./tabs-wrapper";
-export * from "./text";
+export { AccordionItemWrapper, AccordionWrapper } from "./accordion-wrapper";
+export type {
+  AccordionItemWrapperProps,
+  AccordionWrapperProps,
+} from "./accordion-wrapper";
+export { ActionButton } from "./action-button";
+export type { ActionButtonProps } from "./action-button";
+export { AlertWrapper } from "./alert-wrapper";
+export type { AlertWrapperProps } from "./alert-wrapper";
+export { AvatarWrapper } from "./avatar-wrapper";
+export type { AvatarWrapperProps } from "./avatar-wrapper";
+export { ButtonWrapper } from "./button-wrapper";
+export type { ButtonWrapperProps } from "./button-wrapper";
+export { CardWrapper } from "./card-wrapper";
+export type { CardWrapperProps } from "./card-wrapper";
+export { CheckboxWrapper } from "./checkbox-wrapper";
+export type { CheckboxWrapperProps } from "./checkbox-wrapper";
+export { DataTable } from "./data-table";
+export type { DataTableProps } from "./data-table";
+export { Grid } from "./grid";
+export type { GridProps } from "./grid";
+export { InputWrapper } from "./input-wrapper";
+export type { InputWrapperProps } from "./input-wrapper";
+export { List } from "./list";
+export type { ListProps } from "./list";
+export { Metric } from "./metric";
+export type { MetricProps } from "./metric";
+export { SelectWrapper } from "./select-wrapper";
+export type { SelectWrapperProps } from "./select-wrapper";
+export { SkeletonWrapper } from "./skeleton-wrapper";
+export type { SkeletonWrapperProps } from "./skeleton-wrapper";
+export { Stack } from "./stack";
+export type { StackProps } from "./stack";
+export { TabContentWrapper, TabsWrapper } from "./tabs-wrapper";
+export type { TabContentWrapperProps, TabsWrapperProps } from "./tabs-wrapper";
+export { Text } from "./text";
+export type { TextProps } from "./text";

package/src/plugins/generative-ui/ui/input-wrapper.tsx

@@ -20,7 +20,7 @@ export function InputWrapper({
   placeholder,
   type = "text",
   valuePath,
-}: InputWrapperProps) {
+}: InputWrapperProps): React.JSX.Element {
   const id = React.useId();
 
   return (

package/src/plugins/generative-ui/ui/input.tsx

@@ -2,7 +2,11 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+function Input({
+  className,
+  type,
+  ...props
+}: React.ComponentProps<"input">): React.JSX.Element {
   return (
     <input
       type={type}

package/src/plugins/generative-ui/ui/label.tsx

@@ -8,7 +8,7 @@ import { cn } from "@/lib/utils";
 function Label({
   className,
   ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+}: React.ComponentProps<typeof LabelPrimitive.Root>): React.JSX.Element {
   return (
     <LabelPrimitive.Root
       data-slot="label"

package/src/plugins/generative-ui/ui/list.tsx

@@ -7,7 +7,11 @@ export interface ListProps {
   className?: string;
 }
 
-export function List({ items, ordered = false, className }: ListProps) {
+export function List({
+  items,
+  ordered = false,
+  className,
+}: ListProps): React.JSX.Element {
   const listClasses = cn(
     "space-y-1 pl-4 text-foreground",
     ordered ? "list-decimal" : "list-disc",

package/src/plugins/generative-ui/ui/metric.tsx

@@ -26,6 +26,7 @@ function formatValue(
         maximumFractionDigits: 1,
       }).format(value);
     case "number":
+    case undefined:
     default:
       return new Intl.NumberFormat("en-US").format(value);
   }
@@ -37,7 +38,7 @@ export function Metric({
   format,
   className,
   ...props
-}: MetricProps) {
+}: MetricProps): React.JSX.Element {
   return (
     <div
       data-slot="metric"

package/src/plugins/generative-ui/ui/pagination.tsx

@@ -8,7 +8,10 @@ import {
 import { cn } from "@/lib/utils";
 import { buttonVariants, Button } from "./button";
 
-function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+function Pagination({
+  className,
+  ...props
+}: React.ComponentProps<"nav">): React.JSX.Element {
   return (
     <nav
       role="navigation"
@@ -23,7 +26,7 @@ function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
 function PaginationContent({
   className,
   ...props
-}: React.ComponentProps<"ul">) {
+}: React.ComponentProps<"ul">): React.JSX.Element {
   return (
     <ul
       data-slot="pagination-content"
@@ -33,7 +36,9 @@ function PaginationContent({
   );
 }
 
-function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+function PaginationItem({
+  ...props
+}: React.ComponentProps<"li">): React.JSX.Element {
   return <li data-slot="pagination-item" {...props} />;
 }
 
@@ -47,7 +52,7 @@ function PaginationLink({
   isActive,
   size = "icon",
   ...props
-}: PaginationLinkProps) {
+}: PaginationLinkProps): React.JSX.Element {
   return (
     <a
       aria-current={isActive ? "page" : undefined}
@@ -68,7 +73,7 @@ function PaginationLink({
 function PaginationPrevious({
   className,
   ...props
-}: React.ComponentProps<typeof PaginationLink>) {
+}: React.ComponentProps<typeof PaginationLink>): React.JSX.Element {
   return (
     <PaginationLink
       aria-label="Go to previous page"
@@ -85,7 +90,7 @@ function PaginationPrevious({
 function PaginationNext({
   className,
   ...props
-}: React.ComponentProps<typeof PaginationLink>) {
+}: React.ComponentProps<typeof PaginationLink>): React.JSX.Element {
   return (
     <PaginationLink
       aria-label="Go to next page"
@@ -102,7 +107,7 @@ function PaginationNext({
 function PaginationEllipsis({
   className,
   ...props
-}: React.ComponentProps<"span">) {
+}: React.ComponentProps<"span">): React.JSX.Element {
   return (
     <span
       aria-hidden