@gram-ai/elements 1.33.2 → 1.35.0

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

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

@@ -7,13 +7,13 @@ import { cn } from "@/lib/utils";
 
 function Popover({
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+}: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element {
   return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
 function PopoverTrigger({
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.JSX.Element {
   return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
@@ -22,7 +22,7 @@ function PopoverContent({
   align = "center",
   sideOffset = 4,
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+}: React.ComponentProps<typeof PopoverPrimitive.Content>): React.JSX.Element {
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Content
@@ -41,11 +41,14 @@ function PopoverContent({
 
 function PopoverAnchor({
   ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element {
   return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 
-function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+function PopoverHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="popover-header"
@@ -55,7 +58,10 @@ function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+function PopoverTitle({
+  className,
+  ...props
+}: React.ComponentProps<"h2">): React.JSX.Element {
   return (
     <div
       data-slot="popover-title"
@@ -68,7 +74,7 @@ function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
 function PopoverDescription({
   className,
   ...props
-}: React.ComponentProps<"p">) {
+}: React.ComponentProps<"p">): React.JSX.Element {
   return (
     <p
       data-slot="popover-description"

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

@@ -21,7 +21,7 @@ function Progress({
   label,
   max = 100,
   ...props
-}: ProgressProps) {
+}: ProgressProps): React.JSX.Element {
   const percentage =
     value != null && max > 0
       ? Math.min(100, Math.max(0, (value / max) * 100))

package/src/plugins/generative-ui/ui/radio-group.tsx

@@ -9,7 +9,7 @@ import { cn } from "@/lib/utils";
 function RadioGroup({
   className,
   ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>): React.JSX.Element {
   return (
     <RadioGroupPrimitive.Root
       data-slot="radio-group"
@@ -22,7 +22,7 @@ function RadioGroup({
 function RadioGroupItem({
   className,
   ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>): React.JSX.Element {
   return (
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"

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

@@ -23,7 +23,7 @@ export function SelectWrapper({
   placeholder,
   valuePath,
   options,
-}: SelectWrapperProps) {
+}: SelectWrapperProps): React.JSX.Element {
   return (
     <Select name={valuePath}>
       <SelectTrigger data-value-path={valuePath}>

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

@@ -8,19 +8,19 @@ import { cn } from "@/lib/utils";
 
 function Select({
   ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+}: React.ComponentProps<typeof SelectPrimitive.Root>): React.JSX.Element {
   return <SelectPrimitive.Root data-slot="select" {...props} />;
 }
 
 function SelectGroup({
   ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+}: React.ComponentProps<typeof SelectPrimitive.Group>): React.JSX.Element {
   return <SelectPrimitive.Group data-slot="select-group" {...props} />;
 }
 
 function SelectValue({
   ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+}: React.ComponentProps<typeof SelectPrimitive.Value>): React.JSX.Element {
   return <SelectPrimitive.Value data-slot="select-value" {...props} />;
 }
 
@@ -31,7 +31,7 @@ function SelectTrigger({
   ...props
 }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
   size?: "sm" | "default";
-}) {
+}): React.JSX.Element {
   return (
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
@@ -56,7 +56,7 @@ function SelectContent({
   position = "item-aligned",
   align = "center",
   ...props
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+}: React.ComponentProps<typeof SelectPrimitive.Content>): React.JSX.Element {
   return (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Content
@@ -90,7 +90,7 @@ function SelectContent({
 function SelectLabel({
   className,
   ...props
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+}: React.ComponentProps<typeof SelectPrimitive.Label>): React.JSX.Element {
   return (
     <SelectPrimitive.Label
       data-slot="select-label"
@@ -104,7 +104,7 @@ function SelectItem({
   className,
   children,
   ...props
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+}: React.ComponentProps<typeof SelectPrimitive.Item>): React.JSX.Element {
   return (
     <SelectPrimitive.Item
       data-slot="select-item"
@@ -130,7 +130,7 @@ function SelectItem({
 function SelectSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+}: React.ComponentProps<typeof SelectPrimitive.Separator>): React.JSX.Element {
   return (
     <SelectPrimitive.Separator
       data-slot="select-separator"
@@ -143,7 +143,9 @@ function SelectSeparator({
 function SelectScrollUpButton({
   className,
   ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+}: React.ComponentProps<
+  typeof SelectPrimitive.ScrollUpButton
+>): React.JSX.Element {
   return (
     <SelectPrimitive.ScrollUpButton
       data-slot="select-scroll-up-button"
@@ -161,7 +163,9 @@ function SelectScrollUpButton({
 function SelectScrollDownButton({
   className,
   ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+}: React.ComponentProps<
+  typeof SelectPrimitive.ScrollDownButton
+>): React.JSX.Element {
   return (
     <SelectPrimitive.ScrollDownButton
       data-slot="select-scroll-down-button"