@gram-ai/elements 1.34.0 → 1.35.0

package/src/components/ui/avatar.tsx

@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils";
 function Avatar({
   className,
   ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+}: React.ComponentProps<typeof AvatarPrimitive.Root>): React.JSX.Element {
   return (
     <AvatarPrimitive.Root
       data-slot="avatar"
@@ -22,7 +22,7 @@ function Avatar({
 function AvatarImage({
   className,
   ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+}: React.ComponentProps<typeof AvatarPrimitive.Image>): React.JSX.Element {
   return (
     <AvatarPrimitive.Image
       data-slot="avatar-image"
@@ -35,7 +35,7 @@ function AvatarImage({
 function AvatarFallback({
   className,
   ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>): React.JSX.Element {
   return (
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"

package/src/components/ui/calendar.tsx

@@ -130,7 +130,7 @@ function Calendar({
   minDate,
   maxDate,
   className,
-}: CalendarProps) {
+}: CalendarProps): React.JSX.Element {
   const [viewDate, setViewDate] = React.useState(() => {
     if (selected.start) return new Date(selected.start);
     return new Date();

package/src/components/ui/collapsible.tsx

@@ -2,13 +2,15 @@ import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 
 function Collapsible({
   ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>): React.JSX.Element {
   return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
 }
 
 function CollapsibleTrigger({
   ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+}: React.ComponentProps<
+  typeof CollapsiblePrimitive.CollapsibleTrigger
+>): React.JSX.Element {
   return (
     <CollapsiblePrimitive.CollapsibleTrigger
       data-slot="collapsible-trigger"
@@ -19,7 +21,9 @@ function CollapsibleTrigger({
 
 function CollapsibleContent({
   ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+}: React.ComponentProps<
+  typeof CollapsiblePrimitive.CollapsibleContent
+>): React.JSX.Element {
   return (
     <CollapsiblePrimitive.CollapsibleContent
       data-slot="collapsible-content"

package/src/components/ui/dialog.tsx

@@ -7,20 +7,20 @@ import { usePortalContainer } from "@/hooks/usePortalContainer";
 
 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({
   container,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+}: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element {
   const portalContainer = usePortalContainer();
   return (
     <DialogPrimitive.Portal
@@ -33,14 +33,14 @@ function DialogPortal({
 
 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"
@@ -60,7 +60,7 @@ function DialogContent({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Content> & {
   showCloseButton?: boolean;
-}) {
+}): React.JSX.Element {
   return (
     <DialogPortal data-slot="dialog-portal">
       <DialogOverlay />
@@ -87,7 +87,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"
@@ -97,7 +100,10 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
-function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+function DialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="dialog-footer"
@@ -113,7 +119,7 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
 function DialogTitle({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+}: React.ComponentProps<typeof DialogPrimitive.Title>): React.JSX.Element {
   return (
     <DialogPrimitive.Title
       data-slot="dialog-title"
@@ -126,7 +132,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/components/ui/generative-ui.tsx

@@ -4,7 +4,7 @@ import { useDensity } from "@/hooks/useDensity";
 import { cn } from "@/lib/utils";
 import { isJsonRenderTree, type JsonRenderNode } from "@/lib/generative-ui";
 import { AlertCircleIcon } from "lucide-react";
-import { FC, useMemo } from "react";
+import { ElementType, FC, useMemo } from "react";
 
 // Import all components from the generative-ui plugin ui directory
 import {
@@ -42,9 +42,10 @@ interface GenerativeUIProps {
 /**
  * Built-in components for rendering json-render trees.
  * These provide a default set of UI primitives for tool results.
+ * Each entry has its own prop shape; the registry erases those generics via
+ * `ElementType` so heterogeneous components can coexist under one map.
  */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const components: Record<string, FC<any>> = {
+const components: Record<string, ElementType> = {
   // Layout
   Card: CardWrapper,
   Grid,
@@ -98,7 +99,11 @@ function renderNode(node: JsonRenderNode, key?: number): React.ReactNode {
     ? node.children.map((child, i) => renderNode(child, i))
     : undefined;
 
-  return <Component key={key} {...(node.props ?? {})} children={children} />;
+  return (
+    <Component key={key} {...(node.props ?? {})}>
+      {children}
+    </Component>
+  );
 }
 
 /**

package/src/components/ui/popover.tsx

@@ -6,13 +6,13 @@ import { usePortalContainer } from "@/hooks/usePortalContainer";
 
 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} />;
 }
 
@@ -24,7 +24,7 @@ function PopoverContent({
   ...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content> & {
   container?: HTMLElement | null;
-}) {
+}): React.JSX.Element {
   const portalContainer = usePortalContainer();
   return (
     <PopoverPrimitive.Portal container={container ?? portalContainer}>
@@ -44,7 +44,7 @@ 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} />;
 }
 

package/src/components/ui/skeleton.tsx

@@ -1,6 +1,9 @@
 import { cn } from "@/lib/utils";
 
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+function Skeleton({
+  className,
+  ...props
+}: React.ComponentProps<"div">): React.JSX.Element {
   return (
     <div
       data-slot="skeleton"

package/src/components/ui/time-range-picker.stories.tsx

@@ -36,171 +36,214 @@ const meta: Meta<typeof TimeRangePicker> = {
 export default meta;
 type Story = StoryObj<typeof TimeRangePicker>;
 
+function DefaultStory() {
+  const [preset, setPreset] = useState<DateRangePreset | null>("7d");
+  const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+
+  return (
+    <TimeRangePicker
+      preset={customRange ? null : preset}
+      customRange={customRange}
+      onPresetChange={(p) => {
+        setPreset(p);
+        setCustomRange(null);
+      }}
+      onCustomRangeChange={(from, to, label) => {
+        setCustomRange({ from, to });
+        setPreset(null);
+        console.log("Custom range:", { from, to, label });
+      }}
+      onClearCustomRange={() => {
+        setCustomRange(null);
+        setPreset("7d");
+      }}
+    />
+  );
+}
+
 /**
  * Default time range picker with preset badges and calendar.
  * Supports natural language input with AI parsing.
  */
 export const Default: Story = {
-  render: () => {
-    const [preset, setPreset] = useState<DateRangePreset | null>("7d");
-    const [customRange, setCustomRange] = useState<TimeRange | null>(null);
-
-    return (
-      <TimeRangePicker
-        preset={customRange ? null : preset}
-        customRange={customRange}
-        onPresetChange={(p) => {
-          setPreset(p);
-          setCustomRange(null);
-        }}
-        onCustomRangeChange={(from, to, label) => {
-          setCustomRange({ from, to });
-          setPreset(null);
-          console.log("Custom range:", { from, to, label });
-        }}
-        onClearCustomRange={() => {
-          setCustomRange(null);
-          setPreset("7d");
-        }}
-      />
-    );
-  },
+  render: () => <DefaultStory />,
 };
 
+function WithTimezoneStory() {
+  const [preset, setPreset] = useState<DateRangePreset | null>("30d");
+  const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+
+  return (
+    <TimeRangePicker
+      preset={customRange ? null : preset}
+      customRange={customRange}
+      onPresetChange={(p) => {
+        setPreset(p);
+        setCustomRange(null);
+      }}
+      onCustomRangeChange={(from, to) => {
+        setCustomRange({ from, to });
+        setPreset(null);
+      }}
+      onClearCustomRange={() => {
+        setCustomRange(null);
+        setPreset("30d");
+      }}
+      timezone="UTC-08:00"
+    />
+  );
+}
+
 /**
  * Time range picker with timezone indicator.
  */
 export const WithTimezone: Story = {
-  render: () => {
-    const [preset, setPreset] = useState<DateRangePreset | null>("30d");
-    const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+  render: () => <WithTimezoneStory />,
+};
+
+function WithLiveModeStory() {
+  const [preset, setPreset] = useState<DateRangePreset | null>("15m");
+  const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+  const [isLive, setIsLive] = useState(true);
+
+  return (
+    <TimeRangePicker
+      preset={customRange ? null : preset}
+      customRange={customRange}
+      onPresetChange={(p) => {
+        setPreset(p);
+        setCustomRange(null);
+      }}
+      onCustomRangeChange={(from, to) => {
+        setCustomRange({ from, to });
+        setPreset(null);
+      }}
+      onClearCustomRange={() => {
+        setCustomRange(null);
+        setPreset("15m");
+      }}
+      showLive
+      isLive={isLive}
+      onLiveChange={setIsLive}
+    />
+  );
+}
 
-    return (
+/**
+ * With LIVE mode toggle enabled.
+ */
+export const WithLiveMode: Story = {
+  render: () => <WithLiveModeStory />,
+};
+
+/**
+ * Disabled state.
+ */
+export const Disabled: Story = {
+  args: {
+    preset: "7d",
+    disabled: true,
+  },
+};
+
+function DatadogStyleStory() {
+  const [preset, setPreset] = useState<DateRangePreset | null>("7d");
+  const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+  const [customLabel, setCustomLabel] = useState<string | null>(null);
+  const [isLive, setIsLive] = useState(false);
+
+  return (
+    <div className="space-y-4">
       <TimeRangePicker
         preset={customRange ? null : preset}
         customRange={customRange}
+        customRangeLabel={customLabel}
         onPresetChange={(p) => {
           setPreset(p);
           setCustomRange(null);
+          setCustomLabel(null);
         }}
-        onCustomRangeChange={(from, to) => {
+        onCustomRangeChange={(from, to, label) => {
           setCustomRange({ from, to });
           setPreset(null);
+          setCustomLabel(label || null);
         }}
         onClearCustomRange={() => {
           setCustomRange(null);
-          setPreset("30d");
+          setPreset("7d");
+          setCustomLabel(null);
         }}
+        showLive
+        isLive={isLive}
+        onLiveChange={setIsLive}
         timezone="UTC-08:00"
       />
-    );
-  },
-};
+      <div className="rounded-md bg-muted p-3 text-xs text-muted-foreground">
+        <strong>Current state:</strong>
+        <pre className="mt-1 overflow-auto">
+          {JSON.stringify(
+            {
+              preset,
+              customRange: customRange
+                ? {
+                    from: customRange.from.toISOString(),
+                    to: customRange.to.toISOString(),
+                  }
+                : null,
+              customLabel,
+              isLive,
+            },
+            null,
+            2,
+          )}
+        </pre>
+      </div>
+    </div>
+  );
+}
 
 /**
- * With LIVE mode toggle enabled.
+ * Full Datadog-style configuration with all features.
+ * Type natural language like "3 days ago", "last Wednesday", "past 2 weeks".
  */
-export const WithLiveMode: Story = {
-  render: () => {
-    const [preset, setPreset] = useState<DateRangePreset | null>("15m");
-    const [customRange, setCustomRange] = useState<TimeRange | null>(null);
-    const [isLive, setIsLive] = useState(true);
+export const DatadogStyle: Story = {
+  render: () => <DatadogStyleStory />,
+};
 
-    return (
+function NaturalLanguageParsingStory() {
+  const [preset, setPreset] = useState<DateRangePreset | null>("30d");
+  const [customRange, setCustomRange] = useState<TimeRange | null>(null);
+  const [customLabel, setCustomLabel] = useState<string | null>(null);
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">
+        Try typing: "yesterday", "3 days ago", "last Wednesday", "January"
+      </p>
       <TimeRangePicker
         preset={customRange ? null : preset}
         customRange={customRange}
+        customRangeLabel={customLabel}
         onPresetChange={(p) => {
           setPreset(p);
           setCustomRange(null);
+          setCustomLabel(null);
         }}
-        onCustomRangeChange={(from, to) => {
+        onCustomRangeChange={(from, to, label) => {
           setCustomRange({ from, to });
           setPreset(null);
+          setCustomLabel(label || null);
+          console.log("AI parsed:", { from, to, label });
         }}
         onClearCustomRange={() => {
           setCustomRange(null);
-          setPreset("15m");
+          setPreset("30d");
+          setCustomLabel(null);
         }}
-        showLive
-        isLive={isLive}
-        onLiveChange={setIsLive}
       />
-    );
-  },
-};
-
-/**
- * Disabled state.
- */
-export const Disabled: Story = {
-  args: {
-    preset: "7d",
-    disabled: true,
-  },
-};
-
-/**
- * Full Datadog-style configuration with all features.
- * Type natural language like "3 days ago", "last Wednesday", "past 2 weeks".
- */
-export const DatadogStyle: Story = {
-  render: () => {
-    const [preset, setPreset] = useState<DateRangePreset | null>("7d");
-    const [customRange, setCustomRange] = useState<TimeRange | null>(null);
-    const [customLabel, setCustomLabel] = useState<string | null>(null);
-    const [isLive, setIsLive] = useState(false);
-
-    return (
-      <div className="space-y-4">
-        <TimeRangePicker
-          preset={customRange ? null : preset}
-          customRange={customRange}
-          customRangeLabel={customLabel}
-          onPresetChange={(p) => {
-            setPreset(p);
-            setCustomRange(null);
-            setCustomLabel(null);
-          }}
-          onCustomRangeChange={(from, to, label) => {
-            setCustomRange({ from, to });
-            setPreset(null);
-            setCustomLabel(label || null);
-          }}
-          onClearCustomRange={() => {
-            setCustomRange(null);
-            setPreset("7d");
-            setCustomLabel(null);
-          }}
-          showLive
-          isLive={isLive}
-          onLiveChange={setIsLive}
-          timezone="UTC-08:00"
-        />
-        <div className="rounded-md bg-muted p-3 text-xs text-muted-foreground">
-          <strong>Current state:</strong>
-          <pre className="mt-1 overflow-auto">
-            {JSON.stringify(
-              {
-                preset,
-                customRange: customRange
-                  ? {
-                      from: customRange.from.toISOString(),
-                      to: customRange.to.toISOString(),
-                    }
-                  : null,
-                customLabel,
-                isLive,
-              },
-              null,
-              2,
-            )}
-          </pre>
-        </div>
-      </div>
-    );
-  },
-};
+    </div>
+  );
+}
 
 /**
  * Natural language parsing demo.
@@ -212,38 +255,5 @@ export const DatadogStyle: Story = {
  * - "January 2024"
  */
 export const NaturalLanguageParsing: Story = {
-  render: () => {
-    const [preset, setPreset] = useState<DateRangePreset | null>("30d");
-    const [customRange, setCustomRange] = useState<TimeRange | null>(null);
-    const [customLabel, setCustomLabel] = useState<string | null>(null);
-
-    return (
-      <div className="space-y-4">
-        <p className="text-sm text-muted-foreground">
-          Try typing: "yesterday", "3 days ago", "last Wednesday", "January"
-        </p>
-        <TimeRangePicker
-          preset={customRange ? null : preset}
-          customRange={customRange}
-          customRangeLabel={customLabel}
-          onPresetChange={(p) => {
-            setPreset(p);
-            setCustomRange(null);
-            setCustomLabel(null);
-          }}
-          onCustomRangeChange={(from, to, label) => {
-            setCustomRange({ from, to });
-            setPreset(null);
-            setCustomLabel(label || null);
-            console.log("AI parsed:", { from, to, label });
-          }}
-          onClearCustomRange={() => {
-            setCustomRange(null);
-            setPreset("30d");
-            setCustomLabel(null);
-          }}
-        />
-      </div>
-    );
-  },
+  render: () => <NaturalLanguageParsingStory />,
 };

package/src/components/ui/time-range-picker.tsx

@@ -155,7 +155,7 @@ const BADGE_WIDTH = "min-w-10";
 
 export function getPresetRange(preset: DateRangePreset): TimeRange {
   const p = PRESETS.find((p) => p.value === preset);
-  return p ? p.getRange() : PRESETS[5].getRange(); // Default to 3d
+  return p ? p.getRange() : PRESETS[5]!.getRange(); // Default to 3d
 }
 
 function getPresetByValue(value: DateRangePreset): TimeRangePreset | undefined {
@@ -188,11 +188,15 @@ function parseAsLocalDate(isoString: string): Date {
   // Try to extract just the date part and create a local date
   const dateMatch = isoString.match(/^(\d{4})-(\d{2})-(\d{2})/);
   if (dateMatch) {
-    const [, year, month, day] = dateMatch;
+    const year = dateMatch[1]!;
+    const month = dateMatch[2]!;
+    const day = dateMatch[3]!;
     // Check if there's a time component
     const timeMatch = isoString.match(/T(\d{2}):(\d{2}):?(\d{2})?/);
     if (timeMatch) {
-      const [, hours, minutes, seconds = "0"] = timeMatch;
+      const hours = timeMatch[1]!;
+      const minutes = timeMatch[2]!;
+      const seconds = timeMatch[3] ?? "0";
       return new Date(
         parseInt(year),
         parseInt(month) - 1,
@@ -372,7 +376,7 @@ function TimeRangePicker({
   projectSlug,
   authHeaders,
   className,
-}: TimeRangePickerProps) {
+}: TimeRangePickerProps): React.JSX.Element {
   const [isOpen, setIsOpen] = React.useState(false);
   const [showCalendar, setShowCalendar] = React.useState(false);
   const [inputValue, setInputValue] = React.useState("");
@@ -585,7 +589,9 @@ function TimeRangePicker({
             onClick={handleInputClick}
             onFocus={handleInputFocus}
             onBlur={handleInputBlur}
-            onKeyDown={handleInputKeyDown}
+            onKeyDown={(e) => {
+              void handleInputKeyDown(e);
+            }}
             placeholder="e.g., 3 days ago, last week..."
             disabled={disabled}
             className={cn(