@gram-ai/elements 1.27.4 → 1.27.6

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

@@ -1,15 +1,15 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'
-import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui'
+import * as React from "react";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/lib/utils";
 
 function DropdownMenu({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
 }
 
 function DropdownMenuPortal({
@@ -17,7 +17,7 @@ function DropdownMenuPortal({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
   return (
     <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
+  );
 }
 
 function DropdownMenuTrigger({
@@ -28,7 +28,7 @@ function DropdownMenuTrigger({
       data-slot="dropdown-menu-trigger"
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuContent({
@@ -42,13 +42,13 @@ function DropdownMenuContent({
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
         className={cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
-          className
+          "z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className,
         )}
         {...props}
       />
     </DropdownMenuPrimitive.Portal>
-  )
+  );
 }
 
 function DropdownMenuGroup({
@@ -56,17 +56,17 @@ function DropdownMenuGroup({
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
   return (
     <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
+  );
 }
 
 function DropdownMenuItem({
   className,
   inset,
-  variant = 'default',
+  variant = "default",
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
-  inset?: boolean
-  variant?: 'default' | 'destructive'
+  inset?: boolean;
+  variant?: "default" | "destructive";
 }) {
   return (
     <DropdownMenuPrimitive.Item
@@ -74,12 +74,12 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:!text-destructive",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuCheckboxItem({
@@ -92,8 +92,8 @@ function DropdownMenuCheckboxItem({
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
       )}
       checked={checked}
       {...props}
@@ -105,7 +105,7 @@ function DropdownMenuCheckboxItem({
       </span>
       {children}
     </DropdownMenuPrimitive.CheckboxItem>
-  )
+  );
 }
 
 function DropdownMenuRadioGroup({
@@ -116,7 +116,7 @@ function DropdownMenuRadioGroup({
       data-slot="dropdown-menu-radio-group"
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuRadioItem({
@@ -128,8 +128,8 @@ function DropdownMenuRadioItem({
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        "relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
       )}
       {...props}
     >
@@ -140,7 +140,7 @@ function DropdownMenuRadioItem({
       </span>
       {children}
     </DropdownMenuPrimitive.RadioItem>
-  )
+  );
 }
 
 function DropdownMenuLabel({
@@ -148,19 +148,19 @@ function DropdownMenuLabel({
   inset,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.Label
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        'px-2 py-1.5 text-sm font-medium data-[inset]:pl-8',
-        className
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuSeparator({
@@ -170,32 +170,32 @@ function DropdownMenuSeparator({
   return (
     <DropdownMenuPrimitive.Separator
       data-slot="dropdown-menu-separator"
-      className={cn('bg-border -mx-1 my-1 h-px', className)}
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuShortcut({
   className,
   ...props
-}: React.ComponentProps<'span'>) {
+}: React.ComponentProps<"span">) {
   return (
     <span
       data-slot="dropdown-menu-shortcut"
       className={cn(
-        'text-muted-foreground ml-auto text-xs tracking-widest',
-        className
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 function DropdownMenuSub({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
 }
 
 function DropdownMenuSubTrigger({
@@ -204,22 +204,22 @@ function DropdownMenuSubTrigger({
   children,
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
+  inset?: boolean;
 }) {
   return (
     <DropdownMenuPrimitive.SubTrigger
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
+        "flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[inset]:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
       )}
       {...props}
     >
       {children}
       <ChevronRightIcon className="ml-auto size-4" />
     </DropdownMenuPrimitive.SubTrigger>
-  )
+  );
 }
 
 function DropdownMenuSubContent({
@@ -230,12 +230,12 @@ function DropdownMenuSubContent({
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
       className={cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
-        className
+        "z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
 export {
@@ -254,4 +254,4 @@ export {
   DropdownMenuSub,
   DropdownMenuSubTrigger,
   DropdownMenuSubContent,
-}
+};

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

@@ -1,29 +1,29 @@
-import * as React from 'react'
-import { cn } from '@/lib/utils'
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
-export interface GridProps extends React.ComponentProps<'div'> {
-  columns?: number
-  gap?: 'sm' | 'md' | 'lg'
+export interface GridProps extends React.ComponentProps<"div"> {
+  columns?: number;
+  gap?: "sm" | "md" | "lg";
 }
 
 const gapClasses = {
-  sm: 'gap-2',
-  md: 'gap-4',
-  lg: 'gap-6',
-}
+  sm: "gap-2",
+  md: "gap-4",
+  lg: "gap-6",
+};
 
 export function Grid({
   columns = 2,
-  gap = 'md',
+  gap = "md",
   className,
   ...props
 }: GridProps) {
   return (
     <div
       data-slot="grid"
-      className={cn('grid', gapClasses[gap], className)}
+      className={cn("grid", gapClasses[gap], className)}
       style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}
       {...props}
     />
-  )
+  );
 }

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

@@ -1,43 +1,43 @@
 // 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 * 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";
 
 // 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 * 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";

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

@@ -1,15 +1,15 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import { Input } from './input'
-import { Label } from './label'
+import * as React from "react";
+import { Input } from "./input";
+import { Label } from "./label";
 
 export interface InputWrapperProps {
-  label?: string
-  placeholder?: string
-  type?: 'text' | 'email' | 'password' | 'number' | 'tel'
+  label?: string;
+  placeholder?: string;
+  type?: "text" | "email" | "password" | "number" | "tel";
   /** Path for form state management (future use) */
-  valuePath: string
+  valuePath: string;
 }
 
 /**
@@ -18,10 +18,10 @@ export interface InputWrapperProps {
 export function InputWrapper({
   label,
   placeholder,
-  type = 'text',
+  type = "text",
   valuePath,
 }: InputWrapperProps) {
-  const id = React.useId()
+  const id = React.useId();
 
   return (
     <div className="flex flex-col gap-1.5">
@@ -34,5 +34,5 @@ export function InputWrapper({
         data-value-path={valuePath}
       />
     </div>
-  )
+  );
 }

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

@@ -1,21 +1,21 @@
-import * as React from 'react'
+import * as React from "react";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/lib/utils";
 
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
   return (
     <input
       type={type}
       data-slot="input"
       className={cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-        'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-        'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
-        className
+        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30",
+        "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+        "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Input }
+export { Input };

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

@@ -1,9 +1,9 @@
-'use client'
+"use client";
 
-import * as React from 'react'
-import { Label as LabelPrimitive } from 'radix-ui'
+import * as React from "react";
+import { Label as LabelPrimitive } from "radix-ui";
 
-import { cn } from '@/lib/utils'
+import { cn } from "@/lib/utils";
 
 function Label({
   className,
@@ -13,12 +13,12 @@ function Label({
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
-        className
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className,
       )}
       {...props}
     />
-  )
+  );
 }
 
-export { Label }
+export { Label };

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

@@ -1,18 +1,18 @@
-import * as React from 'react'
-import { cn } from '@/lib/utils'
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
 export interface ListProps {
-  items: string[]
-  ordered?: boolean
-  className?: string
+  items: string[];
+  ordered?: boolean;
+  className?: string;
 }
 
 export function List({ items, ordered = false, className }: ListProps) {
   const listClasses = cn(
-    'text-foreground space-y-1 pl-4',
-    ordered ? 'list-decimal' : 'list-disc',
-    className
-  )
+    "space-y-1 pl-4 text-foreground",
+    ordered ? "list-decimal" : "list-disc",
+    className,
+  );
 
   if (ordered) {
     return (
@@ -21,7 +21,7 @@ export function List({ items, ordered = false, className }: ListProps) {
           <li key={index}>{item}</li>
         ))}
       </ol>
-    )
+    );
   }
 
   return (
@@ -30,5 +30,5 @@ export function List({ items, ordered = false, className }: ListProps) {
         <li key={index}>{item}</li>
       ))}
     </ul>
-  )
+  );
 }

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

@@ -1,33 +1,33 @@
-import * as React from 'react'
-import { cn } from '@/lib/utils'
+import * as React from "react";
+import { cn } from "@/lib/utils";
 
-export interface MetricProps extends React.ComponentProps<'div'> {
-  label: string
-  value: string | number
-  format?: 'number' | 'currency' | 'percent'
+export interface MetricProps extends React.ComponentProps<"div"> {
+  label: string;
+  value: string | number;
+  format?: "number" | "currency" | "percent";
 }
 
 function formatValue(
   value: string | number,
-  format?: 'number' | 'currency' | 'percent'
+  format?: "number" | "currency" | "percent",
 ): string {
-  if (typeof value === 'string') return value
+  if (typeof value === "string") return value;
 
   switch (format) {
-    case 'currency':
-      return new Intl.NumberFormat('en-US', {
-        style: 'currency',
-        currency: 'USD',
-      }).format(value)
-    case 'percent':
-      return new Intl.NumberFormat('en-US', {
-        style: 'percent',
+    case "currency":
+      return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+      }).format(value);
+    case "percent":
+      return new Intl.NumberFormat("en-US", {
+        style: "percent",
         minimumFractionDigits: 0,
         maximumFractionDigits: 1,
-      }).format(value)
-    case 'number':
+      }).format(value);
+    case "number":
     default:
-      return new Intl.NumberFormat('en-US').format(value)
+      return new Intl.NumberFormat("en-US").format(value);
   }
 }
 
@@ -41,13 +41,13 @@ export function Metric({
   return (
     <div
       data-slot="metric"
-      className={cn('flex flex-col', className)}
+      className={cn("flex flex-col", className)}
       {...props}
     >
-      <span className="text-muted-foreground text-sm">{label}</span>
-      <span className="text-foreground text-2xl font-semibold">
+      <span className="text-sm text-muted-foreground">{label}</span>
+      <span className="text-2xl font-semibold text-foreground">
         {formatValue(value, format)}
       </span>
     </div>
-  )
+  );
 }