panelui-web 0.10.1 → 0.11.0

package/dist/components/input/index.js

@@ -1,6 +1,35 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Input — a single line to type into.
+ *
+ * ```tsx
+ * <Input placeholder="you@example.com" type="email" />
+ *
+ * <Input.Group>
+ *   <Input.Addon><SearchIcon /></Input.Addon>
+ *   <Input placeholder="Search" />
+ *   <Input.Addon align="end"><kbd>⌘K</kbd></Input.Addon>
+ * </Input.Group>
+ * ```
+ *
+ * ## The group owns the box
+ *
+ * On its own, the input draws its border, background and focus ring. Inside
+ * `Input.Group`, it drops all three and the group draws them around the input
+ * and its addons together, so an icon or a unit reads as part of the field and
+ * the ring goes round the whole of it. Pressing an addon that is not a button
+ * moves focus into the input.
+ *
+ * ## Inside a Field
+ *
+ * Put in a `Field`, the input takes the field's label, description and error
+ * without ids passed by hand, and turns invalid when the field does.
+ */
+import { Input as BaseInput } from '@base-ui/react/input';
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const inputVariants = tv({
     slots: {
         input: [
@@ -54,17 +83,26 @@ const inputVariants = tv({
     defaultVariants: { size: 'md', align: 'start' },
 });
 /** A single-line field. Every attribute of `<input>` passes through. */
-function InputRoot({ size, className, type = 'text', ...props }) {
-    return (_jsx("input", { type: type, "data-slot": "input", className: inputVariants({ size }).input({ className }), ...props }));
+function InputRoot({ size, className, type = 'text', ref, ...props }) {
+    return (_jsx(BaseInput, { type: type, "data-slot": "input", ref: ref, className: inputVariants({ size }).input({ className }), ...props }));
 }
 InputRoot.displayName = 'Input';
 /** Draws one box round an input and its addons. */
-function InputGroup({ size, className, ...props }) {
-    return (_jsx("div", { role: "group", "data-slot": "input-group", "data-size": size ?? 'md', className: inputVariants({ size }).group({ className }), ...props }));
+function InputGroup({ size, className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            role: 'group',
+            'data-slot': 'input-group',
+            'data-size': size ?? 'md',
+            className: inputVariants({ size }).group({ className }),
+        }, props),
+    });
 }
 InputGroup.displayName = 'Input.Group';
 /** An icon, unit, shortcut or button beside the input, inside its box. */
-function InputAddon({ align, className, onMouseDown, ...props }) {
+function InputAddon({ align, className, onMouseDown, render, ...props }) {
     // A press on the addon's own surface is a press on the field. A button or
     // link inside it is left to do what it does.
     const focusField = (event) => {
@@ -79,7 +117,16 @@ function InputAddon({ align, className, onMouseDown, ...props }) {
         event.preventDefault();
         input.focus();
     };
-    return (_jsx("div", { "data-slot": "input-addon", "data-align": align ?? 'start', className: inputVariants({ align }).addon({ className }), onMouseDown: focusField, ...props }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            'data-slot': 'input-addon',
+            'data-align': align ?? 'start',
+            className: inputVariants({ align }).addon({ className }),
+            onMouseDown: focusField,
+        }, props),
+    });
 }
 InputAddon.displayName = 'Input.Addon';
 export const Input = Object.assign(InputRoot, {

package/dist/components/inspector/index.d.ts

@@ -1,49 +1,55 @@
 import { Tabs } from '@base-ui/react/tabs';
 import { type ComponentProps, type ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { ElementType as RenderElementType } from 'react';
+/** Draws a part as another element, or composes it with a component: `render={<a href="/" />}`. */
+type RenderProp<Tag extends RenderElementType> = {
+    render?: useRender.ComponentProps<Tag>['render'];
+};
 declare const inspectorVariants: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            root?: import("tailwind-merge").ClassNameValue;
-            section?: import("tailwind-merge").ClassNameValue;
-            marker?: import("tailwind-merge").ClassNameValue;
-            content?: import("tailwind-merge").ClassNameValue;
-            scrollbar?: import("tailwind-merge").ClassNameValue;
-            separator?: import("tailwind-merge").ClassNameValue;
-            tab?: import("tailwind-merge").ClassNameValue;
-            tooltip?: import("tailwind-merge").ClassNameValue;
-            page?: import("tailwind-merge").ClassNameValue;
-            viewport?: import("tailwind-merge").ClassNameValue;
-            panel?: import("tailwind-merge").ClassNameValue;
-            thumb?: import("tailwind-merge").ClassNameValue;
-            chevron?: import("tailwind-merge").ClassNameValue;
-            sectionTitle?: import("tailwind-merge").ClassNameValue;
-            railSeparator?: import("tailwind-merge").ClassNameValue;
-            sectionAction?: import("tailwind-merge").ClassNameValue;
-            rail?: import("tailwind-merge").ClassNameValue;
-            sectionContent?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            section?: import("tailwind-variants").ClassValue;
+            marker?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            scrollbar?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+            tab?: import("tailwind-variants").ClassValue;
+            tooltip?: import("tailwind-variants").ClassValue;
+            page?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
+            panel?: import("tailwind-variants").ClassValue;
+            thumb?: import("tailwind-variants").ClassValue;
+            chevron?: import("tailwind-variants").ClassValue;
+            sectionTitle?: import("tailwind-variants").ClassValue;
+            railSeparator?: import("tailwind-variants").ClassValue;
+            sectionAction?: import("tailwind-variants").ClassValue;
+            rail?: import("tailwind-variants").ClassValue;
+            sectionContent?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            root?: import("tailwind-merge").ClassNameValue;
-            section?: import("tailwind-merge").ClassNameValue;
-            marker?: import("tailwind-merge").ClassNameValue;
-            content?: import("tailwind-merge").ClassNameValue;
-            scrollbar?: import("tailwind-merge").ClassNameValue;
-            separator?: import("tailwind-merge").ClassNameValue;
-            tab?: import("tailwind-merge").ClassNameValue;
-            tooltip?: import("tailwind-merge").ClassNameValue;
-            page?: import("tailwind-merge").ClassNameValue;
-            viewport?: import("tailwind-merge").ClassNameValue;
-            panel?: import("tailwind-merge").ClassNameValue;
-            thumb?: import("tailwind-merge").ClassNameValue;
-            chevron?: import("tailwind-merge").ClassNameValue;
-            sectionTitle?: import("tailwind-merge").ClassNameValue;
-            railSeparator?: import("tailwind-merge").ClassNameValue;
-            sectionAction?: import("tailwind-merge").ClassNameValue;
-            rail?: import("tailwind-merge").ClassNameValue;
-            sectionContent?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            section?: import("tailwind-variants").ClassValue;
+            marker?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            scrollbar?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+            tab?: import("tailwind-variants").ClassValue;
+            tooltip?: import("tailwind-variants").ClassValue;
+            page?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
+            panel?: import("tailwind-variants").ClassValue;
+            thumb?: import("tailwind-variants").ClassValue;
+            chevron?: import("tailwind-variants").ClassValue;
+            sectionTitle?: import("tailwind-variants").ClassValue;
+            railSeparator?: import("tailwind-variants").ClassValue;
+            sectionAction?: import("tailwind-variants").ClassValue;
+            rail?: import("tailwind-variants").ClassValue;
+            sectionContent?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -67,25 +73,25 @@ declare const inspectorVariants: import("tailwind-variants").TVReturnType<{
     separator: string;
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            root?: import("tailwind-merge").ClassNameValue;
-            section?: import("tailwind-merge").ClassNameValue;
-            marker?: import("tailwind-merge").ClassNameValue;
-            content?: import("tailwind-merge").ClassNameValue;
-            scrollbar?: import("tailwind-merge").ClassNameValue;
-            separator?: import("tailwind-merge").ClassNameValue;
-            tab?: import("tailwind-merge").ClassNameValue;
-            tooltip?: import("tailwind-merge").ClassNameValue;
-            page?: import("tailwind-merge").ClassNameValue;
-            viewport?: import("tailwind-merge").ClassNameValue;
-            panel?: import("tailwind-merge").ClassNameValue;
-            thumb?: import("tailwind-merge").ClassNameValue;
-            chevron?: import("tailwind-merge").ClassNameValue;
-            sectionTitle?: import("tailwind-merge").ClassNameValue;
-            railSeparator?: import("tailwind-merge").ClassNameValue;
-            sectionAction?: import("tailwind-merge").ClassNameValue;
-            rail?: import("tailwind-merge").ClassNameValue;
-            sectionContent?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            section?: import("tailwind-variants").ClassValue;
+            marker?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            content?: import("tailwind-variants").ClassValue;
+            scrollbar?: import("tailwind-variants").ClassValue;
+            separator?: import("tailwind-variants").ClassValue;
+            tab?: import("tailwind-variants").ClassValue;
+            tooltip?: import("tailwind-variants").ClassValue;
+            page?: import("tailwind-variants").ClassValue;
+            viewport?: import("tailwind-variants").ClassValue;
+            panel?: import("tailwind-variants").ClassValue;
+            thumb?: import("tailwind-variants").ClassValue;
+            chevron?: import("tailwind-variants").ClassValue;
+            sectionTitle?: import("tailwind-variants").ClassValue;
+            railSeparator?: import("tailwind-variants").ClassValue;
+            sectionAction?: import("tailwind-variants").ClassValue;
+            rail?: import("tailwind-variants").ClassValue;
+            sectionContent?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -107,7 +113,7 @@ declare const inspectorVariants: import("tailwind-variants").TVReturnType<{
     sectionAction: string;
     sectionContent: string[];
     separator: string;
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
     root: string;
     rail: string[];
     marker: string[];
@@ -126,7 +132,7 @@ declare const inspectorVariants: import("tailwind-variants").TVReturnType<{
     sectionAction: string;
     sectionContent: string[];
     separator: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export interface InspectorProps extends Omit<Tabs.Root.Props, 'className' | 'orientation'> {
     className?: string;
 }
@@ -161,7 +167,7 @@ declare namespace InspectorTab {
 export interface InspectorRailSeparatorProps extends ComponentProps<'span'> {
 }
 /** A short line between groups of pages on the rail. */
-declare function InspectorRailSeparator({ className, ...props }: InspectorRailSeparatorProps): import("react").JSX.Element;
+declare function InspectorRailSeparator({ className, render, ...props }: InspectorRailSeparatorProps & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace InspectorRailSeparator {
     var displayName: string;
 }
@@ -172,7 +178,7 @@ export interface InspectorPanelProps extends ComponentProps<'div'> {
  * page longer than that scrolls inside it. Without pages, its children are
  * one page of sections.
  */
-declare function InspectorPanel({ className, children, ...props }: InspectorPanelProps): import("react").JSX.Element;
+declare function InspectorPanel({ className, children, render, ...props }: InspectorPanelProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace InspectorPanel {
     var displayName: string;
 }
@@ -209,7 +215,7 @@ declare namespace InspectorSectionTitle {
 export interface InspectorSectionActionProps extends ComponentProps<'div'> {
 }
 /** What sits at the end of the title's line: the switch for the whole section, or a Reset. */
-declare function InspectorSectionAction({ className, ...props }: InspectorSectionActionProps): import("react").JSX.Element;
+declare function InspectorSectionAction({ className, render, ...props }: InspectorSectionActionProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace InspectorSectionAction {
     var displayName: string;
 }
@@ -223,7 +229,7 @@ declare namespace InspectorSectionContent {
 export interface InspectorSeparatorProps extends ComponentProps<'div'> {
 }
 /** A hairline between sections that belong to different things. */
-declare function InspectorSeparator({ className, ...props }: InspectorSeparatorProps): import("react").JSX.Element;
+declare function InspectorSeparator({ className, render, ...props }: InspectorSeparatorProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace InspectorSeparator {
     var displayName: string;
 }

package/dist/components/inspector/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Inspector — the settings panel beside an editor's canvas: a rail of
  * icons, each opening a page of titled sections.
@@ -43,6 +43,8 @@ import { Tabs } from '@base-ui/react/tabs';
 import { Tooltip } from '@base-ui/react/tooltip';
 import { createContext, useContext } from 'react';
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const EASE = 'ease-[cubic-bezier(0.3,1.2,0.4,1)]';
 const inspectorVariants = tv({
     slots: {
@@ -133,9 +135,13 @@ function InspectorTab({ label, className, children, ...props }) {
 }
 InspectorTab.displayName = 'Inspector.Tab';
 /** A short line between groups of pages on the rail. */
-function InspectorRailSeparator({ className, ...props }) {
+function InspectorRailSeparator({ className, render, ...props }) {
     const slots = inspectorVariants();
-    return _jsx("span", { "aria-hidden": true, "data-slot": "inspector-rail-separator", className: slots.railSeparator({ className }), ...props });
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ 'aria-hidden': true, 'data-slot': 'inspector-rail-separator', className: slots.railSeparator({ className }) }, props),
+    });
 }
 InspectorRailSeparator.displayName = 'Inspector.RailSeparator';
 /**
@@ -143,9 +149,17 @@ InspectorRailSeparator.displayName = 'Inspector.RailSeparator';
  * page longer than that scrolls inside it. Without pages, its children are
  * one page of sections.
  */
-function InspectorPanel({ className, children, ...props }) {
+function InspectorPanel({ className, children, render, ...props }) {
     const slots = inspectorVariants();
-    return (_jsx("div", { "data-slot": "inspector-panel", className: slots.panel({ className }), ...props, children: hasPages(children) ? children : _jsx(Scroll, { children: children }) }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            'data-slot': 'inspector-panel',
+            className: slots.panel({ className }),
+            children: _jsx(_Fragment, { children: hasPages(children) ? children : _jsx(Scroll, { children: children }) }),
+        }, props),
+    });
 }
 InspectorPanel.displayName = 'Inspector.Panel';
 /** Whether the panel's children are pages, rather than sections written straight into it. */
@@ -193,10 +207,14 @@ function InspectorSectionTitle({ className, children, ...props }) {
 }
 InspectorSectionTitle.displayName = 'Inspector.SectionTitle';
 /** What sits at the end of the title's line: the switch for the whole section, or a Reset. */
-function InspectorSectionAction({ className, ...props }) {
+function InspectorSectionAction({ className, render, ...props }) {
     useSection('Inspector.SectionAction');
     const slots = inspectorVariants();
-    return _jsx("div", { "data-slot": "inspector-section-action", className: slots.sectionAction({ className }), ...props });
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'inspector-section-action', className: slots.sectionAction({ className }) }, props),
+    });
 }
 InspectorSectionAction.displayName = 'Inspector.SectionAction';
 /** The controls under the title, stacked with an even gap. */
@@ -210,9 +228,13 @@ function InspectorSectionContent({ className, children, ...props }) {
 }
 InspectorSectionContent.displayName = 'Inspector.SectionContent';
 /** A hairline between sections that belong to different things. */
-function InspectorSeparator({ className, ...props }) {
+function InspectorSeparator({ className, render, ...props }) {
     const slots = inspectorVariants();
-    return _jsx("div", { role: "separator", "data-slot": "inspector-separator", className: slots.separator({ className }), ...props });
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ role: 'separator', 'data-slot': 'inspector-separator', className: slots.separator({ className }) }, props),
+    });
 }
 InspectorSeparator.displayName = 'Inspector.Separator';
 export const Inspector = Object.assign(InspectorRoot, {

package/dist/components/kpi/index.d.ts

@@ -42,6 +42,12 @@
  * adds nothing to the JavaScript a page sends.
  */
 import type { ComponentProps, ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { ElementType as RenderElementType } from 'react';
+/** Draws a part as another element, or composes it with a component: `render={<a href="/" />}`. */
+type RenderProp<Tag extends RenderElementType> = {
+    render?: useRender.ComponentProps<Tag>['render'];
+};
 /** Which of the theme's roles a chart or a bar is drawn in. */
 export type KpiColor = 'primary' | 'info' | 'success' | 'warning' | 'destructive';
 /** Which direction of movement is the good news for this metric. */
@@ -52,14 +58,14 @@ export interface KpiProps extends ComponentProps<'div'> {
     /** Draws the metric as a card of its own. Leave it off inside a frame or a group. */
     surface?: boolean;
 }
-declare function KpiRoot({ surface, className, ...props }: KpiProps): import("react").JSX.Element;
+declare function KpiRoot({ surface, className, render, ...props }: KpiProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace KpiRoot {
     var displayName: string;
 }
 export interface KpiHeaderProps extends ComponentProps<'div'> {
 }
 /** The row over the number: an icon, the title, and anything at the end. */
-declare function KpiHeader({ className, ...props }: KpiHeaderProps): import("react").JSX.Element;
+declare function KpiHeader({ className, render, ...props }: KpiHeaderProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace KpiHeader {
     var displayName: string;
 }
@@ -68,21 +74,21 @@ export interface KpiIconProps extends ComponentProps<'span'> {
     tone?: KpiTone;
 }
 /** A small tile for an icon, at the start of the header. */
-declare function KpiIcon({ tone, className, ...props }: KpiIconProps): import("react").JSX.Element;
+declare function KpiIcon({ tone, className, render, ...props }: KpiIconProps & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace KpiIcon {
     var displayName: string;
 }
 export interface KpiTitleProps extends ComponentProps<'div'> {
 }
 /** What the number measures. */
-declare function KpiTitle({ className, ...props }: KpiTitleProps): import("react").JSX.Element;
+declare function KpiTitle({ className, render, ...props }: KpiTitleProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace KpiTitle {
     var displayName: string;
 }
 export interface KpiActionsProps extends ComponentProps<'div'> {
 }
 /** Whatever belongs at the end of the header: a period, a badge, a button. */
-declare function KpiActions({ className, ...props }: KpiActionsProps): import("react").JSX.Element;
+declare function KpiActions({ className, render, ...props }: KpiActionsProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace KpiActions {
     var displayName: string;
 }
@@ -91,21 +97,21 @@ export interface KpiContentProps extends ComponentProps<'div'> {
     layout?: 'below' | 'inline';
 }
 /** The row the number is in, with a trend or a chart at its other end. */
-declare function KpiContent({ layout, className, ...props }: KpiContentProps): import("react").JSX.Element;
+declare function KpiContent({ layout, className, render, ...props }: KpiContentProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace KpiContent {
     var displayName: string;
 }
 export interface KpiStatProps extends ComponentProps<'div'> {
 }
 /** Title, value and trend stacked as one block, for a row with a chart beside it. */
-declare function KpiStat({ className, ...props }: KpiStatProps): import("react").JSX.Element;
+declare function KpiStat({ className, render, ...props }: KpiStatProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace KpiStat {
     var displayName: string;
 }
 export interface KpiValueProps extends ComponentProps<'div'> {
 }
 /** The number. */
-declare function KpiValue({ className, ...props }: KpiValueProps): import("react").JSX.Element;
+declare function KpiValue({ className, render, ...props }: KpiValueProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace KpiValue {
     var displayName: string;
 }
@@ -127,7 +133,7 @@ export interface KpiTrendProps extends Omit<ComponentProps<'span'>, 'children'>
  * The change. Colour comes from what the movement means, not from its sign: a
  * fall in churn is good news and is drawn as good news.
  */
-declare function KpiTrend({ value, format, goodDirection, variant, caption, threshold, className, ...props }: KpiTrendProps): import("react").JSX.Element;
+declare function KpiTrend({ value, format, goodDirection, variant, caption, threshold, className, render, ...props }: KpiTrendProps & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace KpiTrend {
     var displayName: string;
 }
@@ -149,7 +155,7 @@ export interface KpiChartProps extends Omit<ComponentProps<'svg'>, 'children' |
     strokeWidth?: number;
 }
 /** The sparkline: the shape of the number over time, with no axis and no values. */
-declare function KpiChart({ data, color, filled, height, inline, strokeWidth, className, style, ...props }: KpiChartProps): import("react").JSX.Element;
+declare function KpiChart({ data, color, filled, height, inline, strokeWidth, className, style, render, ...props }: KpiChartProps & RenderProp<'svg'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace KpiChart {
     var displayName: string;
 }
@@ -166,21 +172,21 @@ export interface KpiProgressProps extends Omit<ComponentProps<'div'>, 'children'
     color?: KpiColor;
 }
 /** Progress towards a target, under the number. */
-declare function KpiProgress({ value, maxValue, label, showValueLabel, color, className, ...props }: KpiProgressProps): import("react").JSX.Element;
+declare function KpiProgress({ value, maxValue, label, showValueLabel, color, className, render, ...props }: KpiProgressProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace KpiProgress {
     var displayName: string;
 }
 export interface KpiFooterProps extends ComponentProps<'div'> {
 }
 /** A quiet line under everything: when it was measured, how long is left. */
-declare function KpiFooter({ className, ...props }: KpiFooterProps): import("react").JSX.Element;
+declare function KpiFooter({ className, render, ...props }: KpiFooterProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace KpiFooter {
     var displayName: string;
 }
 export interface KpiSeparatorProps extends ComponentProps<'div'> {
 }
 /** A rule between two parts of one card. */
-declare function KpiSeparator({ className, ...props }: KpiSeparatorProps): import("react").JSX.Element;
+declare function KpiSeparator({ className, render, ...props }: KpiSeparatorProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace KpiSeparator {
     var displayName: string;
 }
@@ -191,7 +197,7 @@ export interface KpiGroupProps extends ComponentProps<'div'> {
     surface?: boolean;
 }
 /** Several metrics as one panel, with a rule between each and the next. */
-declare function KpiGroup({ orientation, surface, className, ...props }: KpiGroupProps): import("react").JSX.Element;
+declare function KpiGroup({ orientation, surface, className, render, ...props }: KpiGroupProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace KpiGroup {
     var displayName: string;
 }