@databricks/appkit-ui 0.1.5 → 0.2.0

package/dist/react/ui/tooltip.js

@@ -1,5 +1,6 @@
 "use client";
 
+import { useResolvedPortalContainer } from "../portal-container-context.js";
 import { cn } from "../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
@@ -25,13 +26,16 @@ function TooltipTrigger({ ...props }) {
 	});
 }
 function TooltipContent({ className, sideOffset = 0, children, ...props }) {
-	return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs(TooltipPrimitive.Content, {
-		"data-slot": "tooltip-content",
-		sideOffset,
-		className: cn("bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance", className),
-		...props,
-		children: [children, /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })]
-	}) });
+	return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, {
+		container: useResolvedPortalContainer(),
+		children: /* @__PURE__ */ jsxs(TooltipPrimitive.Content, {
+			"data-slot": "tooltip-content",
+			sideOffset,
+			className: cn("bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance", className),
+			...props,
+			children: [children, /* @__PURE__ */ jsx(TooltipPrimitive.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })]
+		})
+	});
 }
 
 //#endregion

package/dist/react/ui/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":[],"sources":["../../../src/react/ui/tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { cn } from \"../lib/utils\";\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"],"mappings":";;;;;;;AAOA,SAAS,gBAAgB,EACvB,gBAAgB,GAChB,GAAG,SACsD;AACzD,QACE,oBAAC,iBAAiB;EAChB,aAAU;EACK;EACf,GAAI;GACJ;;AAIN,SAAS,QAAQ,EACf,GAAG,SACkD;AACrD,QACE,oBAAC,6BACC,oBAAC,iBAAiB;EAAK,aAAU;EAAU,GAAI;GAAS,GACxC;;AAItB,SAAS,eAAe,EACtB,GAAG,SACqD;AACxD,QAAO,oBAAC,iBAAiB;EAAQ,aAAU;EAAkB,GAAI;GAAS;;AAG5E,SAAS,eAAe,EACtB,WACA,aAAa,GACb,UACA,GAAG,SACqD;AACxD,QACE,oBAAC,iBAAiB,oBAChB,qBAAC,iBAAiB;EAChB,aAAU;EACE;EACZ,WAAW,GACT,qaACA,UACD;EACD,GAAI;aAEH,UACD,oBAAC,iBAAiB,SAAM,WAAU,uGAAuG;GAChH,GACH"}
+{"version":3,"file":"tooltip.js","names":[],"sources":["../../../src/react/ui/tooltip.tsx"],"sourcesContent":["\"use client\";\n\nimport type * as React from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\n\nimport { cn } from \"../lib/utils\";\nimport { useResolvedPortalContainer } from \"../portal-container-context\";\n\nfunction TooltipProvider({\n  delayDuration = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n  return (\n    <TooltipPrimitive.Provider\n      data-slot=\"tooltip-provider\"\n      delayDuration={delayDuration}\n      {...props}\n    />\n  );\n}\n\nfunction Tooltip({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n  return (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  );\n}\n\nfunction TooltipTrigger({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n  className,\n  sideOffset = 0,\n  children,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n  return (\n    <TooltipPrimitive.Portal container={useResolvedPortalContainer()}>\n      <TooltipPrimitive.Content\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  );\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"],"mappings":";;;;;;;;AAQA,SAAS,gBAAgB,EACvB,gBAAgB,GAChB,GAAG,SACsD;AACzD,QACE,oBAAC,iBAAiB;EAChB,aAAU;EACK;EACf,GAAI;GACJ;;AAIN,SAAS,QAAQ,EACf,GAAG,SACkD;AACrD,QACE,oBAAC,6BACC,oBAAC,iBAAiB;EAAK,aAAU;EAAU,GAAI;GAAS,GACxC;;AAItB,SAAS,eAAe,EACtB,GAAG,SACqD;AACxD,QAAO,oBAAC,iBAAiB;EAAQ,aAAU;EAAkB,GAAI;GAAS;;AAG5E,SAAS,eAAe,EACtB,WACA,aAAa,GACb,UACA,GAAG,SACqD;AACxD,QACE,oBAAC,iBAAiB;EAAO,WAAW,4BAA4B;YAC9D,qBAAC,iBAAiB;GAChB,aAAU;GACE;GACZ,WAAW,GACT,qaACA,UACD;GACD,GAAI;cAEH,UACD,oBAAC,iBAAiB,SAAM,WAAU,uGAAuG;IAChH;GACH"}

package/llms.txt

@@ -668,6 +668,56 @@ export function SpendChart() {
 }
 ```
 
+**Chart props reference (important):**
+
+Charts are **self-contained ECharts components**. Configure via props, NOT children:
+
+```tsx
+// ✅ Correct: use props for customization
+<BarChart
+  queryKey="sales_by_region"
+  parameters={{}}
+  xKey="region"                    // X-axis field
+  yKey={["revenue", "expenses"]}   // Y-axis field(s) - string or string[]
+  colors={['#40d1f5', '#4462c9']}  // Custom colors
+  stacked                          // Stack bars (BarChart, AreaChart)
+  orientation="horizontal"         // "vertical" (default) | "horizontal"
+  showLegend                       // Show legend
+  height={400}                     // Height in pixels (default: 300)
+/>
+
+<LineChart
+  queryKey="trend_data"
+  parameters={{}}
+  xKey="date"
+  yKey="value"
+  smooth                           // Smooth curves (default: true)
+  showSymbol={false}               // Hide data point markers
+/>
+```
+
+**❌ CRITICAL: Charts do NOT accept Recharts children**
+
+```tsx
+// ❌ WRONG - AppKit charts are NOT Recharts wrappers
+import { BarChart } from "@databricks/appkit-ui/react";
+import { Bar, XAxis, YAxis, CartesianGrid } from "recharts";
+
+<BarChart queryKey="data" parameters={{}}>
+  <CartesianGrid />  // ❌ This will cause TypeScript errors
+  <XAxis dataKey="x" />  // ❌ Not supported
+  <Bar dataKey="y" />  // ❌ Not supported
+</BarChart>
+
+// ✅ CORRECT - use props instead
+<BarChart
+  queryKey="data"
+  parameters={{}}
+  xKey="x"
+  yKey="y"
+/>
+```
+
 ### SQL helpers (`sql.*`)
 
 Use these to build typed parameters (they return marker objects: `{ __sql_type, value }`):
@@ -1169,6 +1219,7 @@ env:
   - `useMemo` wraps parameters objects
   - Loading/error/empty states are explicit
   - Charts use `format="auto"` unless you have a reason to force `"json"`/`"arrow"`
+  - Charts use props (`xKey`, `yKey`, `colors`) NOT children (they're ECharts-based, not Recharts)
   - If using tooltips: root is wrapped with `<TooltipProvider>`
 
 - **Never**
@@ -1176,4 +1227,5 @@ env:
   - Don't pass untyped raw params for annotated queries
   - Don't ignore `createApp()`'s promise
   - Don't invent UI components not listed in this file
+  - Don't pass Recharts children (`<Bar>`, `<XAxis>`, etc.) to AppKit chart components
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@databricks/appkit-ui",
   "type": "module",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/databricks/appkit.git"