panelui-web 0.10.0 → 0.11.0

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

@@ -34,34 +34,41 @@
  * counts is the workbench's own, not the window's, so it works in a pane.
  */
 import { type ComponentProps, type ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type * as ReactTypes from 'react';
+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 workbenchVariants: import("tailwind-variants").TVReturnType<{
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            root?: import("tailwind-merge").ClassNameValue;
-            canvas?: import("tailwind-merge").ClassNameValue;
-            bar?: import("tailwind-merge").ClassNameValue;
-            resize?: import("tailwind-merge").ClassNameValue;
-            trigger?: import("tailwind-merge").ClassNameValue;
-            inspector?: import("tailwind-merge").ClassNameValue;
-            timeline?: import("tailwind-merge").ClassNameValue;
-            sidebar?: import("tailwind-merge").ClassNameValue;
-            artboard?: import("tailwind-merge").ClassNameValue;
-            sheetBody?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            canvas?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            bar?: import("tailwind-variants").ClassValue;
+            resize?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            inspector?: import("tailwind-variants").ClassValue;
+            timeline?: import("tailwind-variants").ClassValue;
+            sidebar?: import("tailwind-variants").ClassValue;
+            artboard?: import("tailwind-variants").ClassValue;
+            sheetBody?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
-        [x: string]: import("tailwind-merge").ClassNameValue | {
-            root?: import("tailwind-merge").ClassNameValue;
-            canvas?: import("tailwind-merge").ClassNameValue;
-            bar?: import("tailwind-merge").ClassNameValue;
-            resize?: import("tailwind-merge").ClassNameValue;
-            trigger?: import("tailwind-merge").ClassNameValue;
-            inspector?: import("tailwind-merge").ClassNameValue;
-            timeline?: import("tailwind-merge").ClassNameValue;
-            sidebar?: import("tailwind-merge").ClassNameValue;
-            artboard?: import("tailwind-merge").ClassNameValue;
-            sheetBody?: import("tailwind-merge").ClassNameValue;
+        [x: string]: import("tailwind-variants").ClassValue | {
+            canvas?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            bar?: import("tailwind-variants").ClassValue;
+            resize?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            inspector?: import("tailwind-variants").ClassValue;
+            timeline?: import("tailwind-variants").ClassValue;
+            sidebar?: import("tailwind-variants").ClassValue;
+            artboard?: import("tailwind-variants").ClassValue;
+            sheetBody?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -77,17 +84,17 @@ declare const workbenchVariants: import("tailwind-variants").TVReturnType<{
     sheetBody: string[];
 }, undefined, {
     [key: string]: {
-        [key: string]: import("tailwind-merge").ClassNameValue | {
-            root?: import("tailwind-merge").ClassNameValue;
-            canvas?: import("tailwind-merge").ClassNameValue;
-            bar?: import("tailwind-merge").ClassNameValue;
-            resize?: import("tailwind-merge").ClassNameValue;
-            trigger?: import("tailwind-merge").ClassNameValue;
-            inspector?: import("tailwind-merge").ClassNameValue;
-            timeline?: import("tailwind-merge").ClassNameValue;
-            sidebar?: import("tailwind-merge").ClassNameValue;
-            artboard?: import("tailwind-merge").ClassNameValue;
-            sheetBody?: import("tailwind-merge").ClassNameValue;
+        [key: string]: import("tailwind-variants").ClassValue | {
+            canvas?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+            bar?: import("tailwind-variants").ClassValue;
+            resize?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            inspector?: import("tailwind-variants").ClassValue;
+            timeline?: import("tailwind-variants").ClassValue;
+            sidebar?: import("tailwind-variants").ClassValue;
+            artboard?: import("tailwind-variants").ClassValue;
+            sheetBody?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -101,7 +108,7 @@ declare const workbenchVariants: import("tailwind-variants").TVReturnType<{
     resize: string[];
     trigger: string[];
     sheetBody: string[];
-}, import("tailwind-variants").TVReturnType<unknown, {
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
     root: string[];
     sidebar: string[];
     canvas: string[];
@@ -112,7 +119,7 @@ declare const workbenchVariants: import("tailwind-variants").TVReturnType<{
     resize: string[];
     trigger: string[];
     sheetBody: string[];
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 /**
  * The workbench's state, for controls of your own: a focus button in the
  * toolbar, a button that opens the inspector on a narrow screen.
@@ -143,28 +150,28 @@ export interface WorkbenchProps extends ComponentProps<'div'> {
     defaultTimelineHeight?: number;
 }
 /** The editor's frame. Give it a height, such as `h-[640px]` or `h-dvh`. */
-declare function WorkbenchRoot({ focus: focusProp, defaultFocus, onFocusChange, focusShortcut, compactBelow, inspectorWidth, sidebarWidth, defaultTimelineHeight, className, style, children, ...props }: WorkbenchProps): import("react").JSX.Element;
+declare function WorkbenchRoot({ focus: focusProp, defaultFocus, onFocusChange, focusShortcut, compactBelow, inspectorWidth, sidebarWidth, defaultTimelineHeight, className, style, children, ...props }: WorkbenchProps): ReactTypes.JSX.Element;
 declare namespace WorkbenchRoot {
     var displayName: string;
 }
 export interface WorkbenchBarProps extends ComponentProps<'div'> {
 }
 /** The strip floating at the top of the canvas, for a toolbar. */
-declare function WorkbenchBar({ className, ...props }: WorkbenchBarProps): import("react").JSX.Element;
+declare function WorkbenchBar({ className, render, ...props }: WorkbenchBarProps & RenderProp<'div'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace WorkbenchBar {
     var displayName: string;
 }
 export interface WorkbenchSidebarProps extends ComponentProps<'aside'> {
 }
 /** A column before the canvas, for layers, pages or assets. It is hidden on a narrow screen and in focus. */
-declare function WorkbenchSidebar({ className, ...props }: WorkbenchSidebarProps): import("react").JSX.Element;
+declare function WorkbenchSidebar({ className, render, ...props }: WorkbenchSidebarProps & RenderProp<'aside'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace WorkbenchSidebar {
     var displayName: string;
 }
 export interface WorkbenchCanvasProps extends ComponentProps<'div'> {
 }
 /** The stage in the middle: a field of dots with the work centred on it. */
-declare function WorkbenchCanvas({ className, ...props }: WorkbenchCanvasProps): import("react").JSX.Element;
+declare function WorkbenchCanvas({ className, render, ...props }: WorkbenchCanvasProps & RenderProp<'div'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace WorkbenchCanvas {
     var displayName: string;
 }
@@ -173,7 +180,7 @@ export interface WorkbenchArtboardProps extends ComponentProps<'div'> {
     aspect?: string;
 }
 /** The work itself: as large as its shape fits on the canvas, clear of the floating bar. */
-declare function WorkbenchArtboard({ aspect, className, style, ...props }: WorkbenchArtboardProps): import("react").JSX.Element;
+declare function WorkbenchArtboard({ aspect, className, style, render, ...props }: WorkbenchArtboardProps & RenderProp<'div'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace WorkbenchArtboard {
     var displayName: string;
 }
@@ -186,7 +193,7 @@ export interface WorkbenchInspectorProps extends ComponentProps<'div'> {
  * The column after the canvas, for an `Inspector`. On a narrow screen the
  * same children open in a sheet from the side instead.
  */
-declare function WorkbenchInspector({ title, className, children, ...props }: WorkbenchInspectorProps): import("react").JSX.Element;
+declare function WorkbenchInspector({ title, className, children, render, ...props }: WorkbenchInspectorProps & RenderProp<'div'>): ReactTypes.JSX.Element;
 declare namespace WorkbenchInspector {
     var displayName: string;
 }
@@ -197,7 +204,7 @@ export interface WorkbenchInspectorTriggerProps extends ComponentProps<'button'>
  * only there when the inspector is a sheet, so put it where it belongs on
  * either size: in the bar, beside the tools.
  */
-declare function WorkbenchInspectorTrigger({ className, children, onClick, ...props }: WorkbenchInspectorTriggerProps): import("react").JSX.Element | null;
+declare function WorkbenchInspectorTrigger({ className, children, onClick, render, ...props }: WorkbenchInspectorTriggerProps & RenderProp<'button'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>> | null;
 declare namespace WorkbenchInspectorTrigger {
     var displayName: string;
 }
@@ -208,7 +215,7 @@ export interface WorkbenchTimelineProps extends ComponentProps<'div'> {
     minHeight?: number;
 }
 /** The row under everything, for a `Timeline`. Its top edge drags to resize it. */
-declare function WorkbenchTimeline({ resizable, minHeight, className, children, ...props }: WorkbenchTimelineProps): import("react").JSX.Element;
+declare function WorkbenchTimeline({ resizable, minHeight, className, children, render, ...props }: WorkbenchTimelineProps & RenderProp<'div'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace WorkbenchTimeline {
     var displayName: string;
 }

package/dist/components/workbench/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";
 /**
  * Workbench — the frame of an editor: a canvas with the work on it, a
  * toolbar floating over it, an inspector beside it and a timeline under it.
@@ -38,6 +38,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { tv } from 'tailwind-variants';
 import { Sheet } from '../sheet/index.js';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const EASE = 'ease-[cubic-bezier(0.32,0.72,0,1)]';
 const workbenchVariants = tv({
     slots: {
@@ -153,7 +155,8 @@ function WorkbenchRoot({ focus: focusProp, defaultFocus = false, onFocusChange,
             if (event.key !== '\\' || event.metaKey || event.ctrlKey || event.altKey || event.defaultPrevented)
                 return;
             const target = event.target;
-            if (target instanceof Element && target.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"]')) {
+            if (target instanceof Element &&
+                target.closest('input, textarea, select, [contenteditable=""], [contenteditable="true"]')) {
                 return;
             }
             event.preventDefault();
@@ -196,46 +199,79 @@ function usePresence(register) {
     }, []);
 }
 /** The strip floating at the top of the canvas, for a toolbar. */
-function WorkbenchBar({ className, ...props }) {
+function WorkbenchBar({ className, render, ...props }) {
     useWorkbenchContext('Workbench.Bar');
     const slots = workbenchVariants();
-    return _jsx("div", { "data-slot": "workbench-bar", className: slots.bar({ className }), ...props });
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'workbench-bar', className: slots.bar({ className }) }, props),
+    });
 }
 WorkbenchBar.displayName = 'Workbench.Bar';
 /** A column before the canvas, for layers, pages or assets. It is hidden on a narrow screen and in focus. */
-function WorkbenchSidebar({ className, ...props }) {
+function WorkbenchSidebar({ className, render, ...props }) {
     const workbench = useWorkbenchContext('Workbench.Sidebar');
     usePresence(workbench.hasSidebar);
     const slots = workbenchVariants();
-    return (_jsx("aside", { "data-slot": "workbench-sidebar", inert: workbench.focus || workbench.compact || undefined, className: slots.sidebar({ className }), ...props }));
+    return useRender({
+        defaultTagName: 'aside',
+        render,
+        props: mergeProps({
+            'data-slot': 'workbench-sidebar',
+            inert: workbench.focus || workbench.compact || undefined,
+            className: slots.sidebar({ className }),
+        }, props),
+    });
 }
 WorkbenchSidebar.displayName = 'Workbench.Sidebar';
 /** The stage in the middle: a field of dots with the work centred on it. */
-function WorkbenchCanvas({ className, ...props }) {
+function WorkbenchCanvas({ className, render, ...props }) {
     useWorkbenchContext('Workbench.Canvas');
     const slots = workbenchVariants();
-    return _jsx("div", { "data-slot": "workbench-canvas", className: slots.canvas({ className }), ...props });
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'workbench-canvas', className: slots.canvas({ className }) }, props),
+    });
 }
 WorkbenchCanvas.displayName = 'Workbench.Canvas';
 /** The work itself: as large as its shape fits on the canvas, clear of the floating bar. */
-function WorkbenchArtboard({ aspect = '16 / 9', className, style, ...props }) {
+function WorkbenchArtboard({ aspect = '16 / 9', className, style, render, ...props }) {
     const slots = workbenchVariants();
     const [wide, tall] = aspect.split('/').map((part) => Number(part.trim()) || 1);
-    return (_jsx("div", { "data-slot": "workbench-artboard", className: slots.artboard({ className }), style: { ...style, '--wb-aspect': aspect, '--wb-ratio': (wide ?? 1) / (tall ?? 1) }, ...props }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            'data-slot': 'workbench-artboard',
+            className: slots.artboard({ className }),
+            style: { ...style, '--wb-aspect': aspect, '--wb-ratio': (wide ?? 1) / (tall ?? 1) },
+        }, props),
+    });
 }
 WorkbenchArtboard.displayName = 'Workbench.Artboard';
 /**
  * The column after the canvas, for an `Inspector`. On a narrow screen the
  * same children open in a sheet from the side instead.
  */
-function WorkbenchInspector({ title = 'Inspector', className, children, ...props }) {
+function WorkbenchInspector({ title = 'Inspector', className, children, render, ...props }) {
     const workbench = useWorkbenchContext('Workbench.Inspector');
     usePresence(workbench.hasInspector);
     const slots = workbenchVariants();
     if (workbench.compact) {
         return (_jsx(Sheet, { side: "right", open: workbench.inspectorOpen, onOpenChange: workbench.setInspectorOpen, children: _jsxs(Sheet.Content, { size: "full", children: [_jsx(Sheet.Header, { title: title }), _jsx("div", { "data-slot": "workbench-inspector", className: slots.sheetBody(), children: children })] }) }));
     }
-    return (_jsx("div", { "data-slot": "workbench-inspector", inert: workbench.focus || undefined, className: slots.inspector({ className }), ...props, children: children }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            'data-slot': 'workbench-inspector',
+            inert: workbench.focus || undefined,
+            className: slots.inspector({ className }),
+            children: _jsx(_Fragment, { children: children }),
+        }, props),
+    });
 }
 WorkbenchInspector.displayName = 'Workbench.Inspector';
 /**
@@ -243,20 +279,32 @@ WorkbenchInspector.displayName = 'Workbench.Inspector';
  * only there when the inspector is a sheet, so put it where it belongs on
  * either size: in the bar, beside the tools.
  */
-function WorkbenchInspectorTrigger({ className, children, onClick, ...props }) {
+function WorkbenchInspectorTrigger({ className, children, onClick, render, ...props }) {
     const workbench = useWorkbenchContext('Workbench.InspectorTrigger');
     const slots = workbenchVariants();
     if (!workbench.compact)
         return null;
-    return (_jsx("button", { type: "button", "data-slot": "workbench-inspector-trigger", "aria-label": "Open inspector", "aria-expanded": workbench.inspectorOpen, className: slots.trigger({ className }), onClick: (event) => {
-            onClick?.(event);
-            if (!event.defaultPrevented)
-                workbench.setInspectorOpen(true);
-        }, ...props, children: children ?? (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [_jsx("path", { d: "M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0" }), _jsx("circle", { cx: "16", cy: "6", r: "2" }), _jsx("circle", { cx: "10", cy: "12", r: "2" }), _jsx("circle", { cx: "18", cy: "18", r: "2" })] })) }));
+    return useRender({
+        defaultTagName: 'button',
+        render,
+        props: mergeProps({
+            type: 'button',
+            'data-slot': 'workbench-inspector-trigger',
+            'aria-label': 'Open inspector',
+            'aria-expanded': workbench.inspectorOpen,
+            className: slots.trigger({ className }),
+            onClick: (event) => {
+                onClick?.(event);
+                if (!event.defaultPrevented)
+                    workbench.setInspectorOpen(true);
+            },
+            children: (_jsx(_Fragment, { children: children ?? (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [_jsx("path", { d: "M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0" }), _jsx("circle", { cx: "16", cy: "6", r: "2" }), _jsx("circle", { cx: "10", cy: "12", r: "2" }), _jsx("circle", { cx: "18", cy: "18", r: "2" })] })) })),
+        }, props),
+    });
 }
 WorkbenchInspectorTrigger.displayName = 'Workbench.InspectorTrigger';
 /** The row under everything, for a `Timeline`. Its top edge drags to resize it. */
-function WorkbenchTimeline({ resizable = true, minHeight = 140, className, children, ...props }) {
+function WorkbenchTimeline({ resizable = true, minHeight = 140, className, children, render, ...props }) {
     const workbench = useWorkbenchContext('Workbench.Timeline');
     usePresence(workbench.hasTimeline);
     const slots = workbenchVariants();
@@ -291,7 +339,16 @@ function WorkbenchTimeline({ resizable = true, minHeight = 140, className, child
         event.preventDefault();
         workbench.setTimelineHeight(Math.min(Math.max(workbench.timelineHeight + by, minHeight), maxHeight()));
     };
-    return (_jsxs("div", { "data-slot": "workbench-timeline", inert: workbench.focus || undefined, className: slots.timeline({ className }), ...props, children: [resizable ? (_jsx("div", { role: "separator", tabIndex: 0, "aria-orientation": "horizontal", "aria-label": "Timeline height", "aria-valuenow": workbench.timelineHeight, "aria-valuemin": minHeight, "data-slot": "workbench-resize", "data-active": active ? '' : undefined, className: slots.resize(), onPointerDown: drag, onKeyDown: keys })) : null, children] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            'data-slot': 'workbench-timeline',
+            inert: workbench.focus || undefined,
+            className: slots.timeline({ className }),
+            children: (_jsxs(_Fragment, { children: [resizable ? (_jsx("div", { role: "separator", tabIndex: 0, "aria-orientation": "horizontal", "aria-label": "Timeline height", "aria-valuenow": workbench.timelineHeight, "aria-valuemin": minHeight, "data-slot": "workbench-resize", "data-active": active ? '' : undefined, className: slots.resize(), onPointerDown: drag, onKeyDown: keys })) : null, children] })),
+        }, props),
+    });
 }
 WorkbenchTimeline.displayName = 'Workbench.Timeline';
 export const Workbench = Object.assign(WorkbenchRoot, {

package/dist/components/xy-pad/index.d.ts

@@ -28,6 +28,12 @@
  * path matters as much as where it ends.
  */
 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'];
+};
 export type XYPadColor = 'primary' | 'info' | 'success' | 'warning' | 'destructive';
 export interface XYPadPoint {
     x: number;
@@ -93,7 +99,7 @@ declare const xyPadVariants: import("tailwind-variants").TVReturnType<{
     bracket: string[];
     value: string;
     axisName: string;
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     color: {
         primary: {
             root: string;
@@ -123,7 +129,7 @@ declare const xyPadVariants: import("tailwind-variants").TVReturnType<{
     bracket: string[];
     value: string;
     axisName: string;
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export interface XYPadProps extends Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange' | 'children'> {
     /** Where the point is, when the caller holds it. */
     value?: XYPadPoint;
@@ -170,7 +176,7 @@ declare namespace XYPadRoot {
 export interface XYPadValueProps extends ComponentProps<'div'> {
 }
 /** The two values written out, under the field. */
-declare function XYPadValue({ className, ...props }: XYPadValueProps): import("react").JSX.Element;
+declare function XYPadValue({ className, render, ...props }: XYPadValueProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace XYPadValue {
     var displayName: string;
 }

package/dist/components/xy-pad/index.js

@@ -31,6 +31,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 /** How many moves the trail remembers. */
 const TRAIL = 28;
 const xyPadVariants = tv({
@@ -264,12 +266,21 @@ function Dots({ columns, rows, size, at, className, }) {
     return (_jsx("svg", { "aria-hidden": true, className: className, children: dots }));
 }
 /** The two values written out, under the field. */
-function XYPadValue({ className, ...props }) {
+function XYPadValue({ className, render, ...props }) {
     const pad = useContext(PadContext);
     if (!pad)
         throw new Error('XYPad.Value must be used inside an <XYPad>.');
     const slots = xyPadVariants();
-    return (_jsxs("div", { "aria-hidden": true, "data-slot": "xy-pad-value", className: slots.value({ className }), ...props, children: [_jsxs("span", { children: [_jsx("span", { className: slots.axisName(), children: "X" }), pad.write('x', pad.value.x)] }), _jsxs("span", { children: [_jsx("span", { className: slots.axisName(), children: "Y" }), pad.write('y', pad.value.y)] })] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            'aria-hidden': true,
+            'data-slot': 'xy-pad-value',
+            className: slots.value({ className }),
+            children: (_jsxs(_Fragment, { children: [_jsxs("span", { children: [_jsx("span", { className: slots.axisName(), children: "X" }), pad.write('x', pad.value.x)] }), _jsxs("span", { children: [_jsx("span", { className: slots.axisName(), children: "Y" }), pad.write('y', pad.value.y)] })] })),
+        }, props),
+    });
 }
 XYPadValue.displayName = 'XYPad.Value';
 export const XYPad = Object.assign(XYPadRoot, {

package/dist/index.d.ts

@@ -39,3 +39,10 @@ export { ChoiceCards, ChoiceCardsItem, ChoiceCardsMedia, ChoiceCardsLabel, Choic
 export { Inspector, InspectorRail, InspectorTab, InspectorRailSeparator, InspectorPanel, InspectorPage, InspectorSection, InspectorSectionTitle, InspectorSectionAction, InspectorSectionContent, InspectorSeparator, inspectorVariants, type InspectorProps, type InspectorRailProps, type InspectorTabProps, type InspectorRailSeparatorProps, type InspectorPanelProps, type InspectorPageProps, type InspectorSectionProps, type InspectorSectionTitleProps, type InspectorSectionActionProps, type InspectorSectionContentProps, type InspectorSeparatorProps, } from './components/inspector/index.js';
 export { Timeline, TimelineHeader, TimelineTime, TimelineZoom, TimelineViewport, TimelineRuler, TimelineTrack, TimelineClip, TimelineClipLabel, TimelineWaveform, TimelinePlayhead, timelineVariants, useTimeline, formatTime, rulerStep, type TimelineProps, type TimelineColor, type TimelineClipVariant, type TimelineTrackSize, type TimelineHeaderProps, type TimelineTimeProps, type TimelineZoomProps, type TimelineViewportProps, type TimelineRulerProps, type TimelineTrackProps, type TimelineClipProps, type TimelineClipLabelProps, type TimelineWaveformProps, type TimelinePlayheadProps, } from './components/timeline/index.js';
 export { Workbench, WorkbenchBar, WorkbenchSidebar, WorkbenchCanvas, WorkbenchArtboard, WorkbenchInspector, WorkbenchInspectorTrigger, WorkbenchTimeline, workbenchVariants, useWorkbench, type WorkbenchProps, type WorkbenchBarProps, type WorkbenchSidebarProps, type WorkbenchCanvasProps, type WorkbenchArtboardProps, type WorkbenchInspectorProps, type WorkbenchInspectorTriggerProps, type WorkbenchTimelineProps, } from './components/workbench/index.js';
+export { Badge, type BadgeProps, type BadgeVariant, type BadgeSize } from './components/badge/index.js';
+export { Chip, ChipGroup, type ChipProps, type ChipToggleProps, type ChipRemovableProps, type ChipGroupProps, type ChipSize, type ChipColor, } from './components/chip/index.js';
+export { Checkbox, CheckboxGroup, type CheckboxProps, type CheckboxGroupProps, type CheckboxSize, type CheckboxColor, } from './components/checkbox/index.js';
+export { RadioGroup, RadioGroupItem, Radio, RadioCard, RadioGroupCard, RadioGroupCardBody, RadioGroupCardTitle, RadioGroupCardDescription, RadioGroupCardAside, type RadioCardProps, type RadioCardAppearance, type RadioGroupProps, type RadioProps, type RadioSize, type RadioColor, } from './components/radio-group/index.js';
+export { Field, FieldLabel, FieldDescription, FieldError, type FieldProps, type FieldLabelProps, type FieldDescriptionProps, type FieldErrorProps, } from './components/field/index.js';
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, type TableProps, type TableHeadProps, type TableCellProps, type TableDensity, type TableAlign, } from './components/table/index.js';
+export { Toast, ToastProvider, useToast, createToaster, type ToastProviderProps, type ToastPosition, type ToastType, type ToastEffect, type ToastData, } from './components/toast/index.js';

package/dist/index.js

@@ -39,3 +39,10 @@ export { ChoiceCards, ChoiceCardsItem, ChoiceCardsMedia, ChoiceCardsLabel, Choic
 export { Inspector, InspectorRail, InspectorTab, InspectorRailSeparator, InspectorPanel, InspectorPage, InspectorSection, InspectorSectionTitle, InspectorSectionAction, InspectorSectionContent, InspectorSeparator, inspectorVariants, } from './components/inspector/index.js';
 export { Timeline, TimelineHeader, TimelineTime, TimelineZoom, TimelineViewport, TimelineRuler, TimelineTrack, TimelineClip, TimelineClipLabel, TimelineWaveform, TimelinePlayhead, timelineVariants, useTimeline, formatTime, rulerStep, } from './components/timeline/index.js';
 export { Workbench, WorkbenchBar, WorkbenchSidebar, WorkbenchCanvas, WorkbenchArtboard, WorkbenchInspector, WorkbenchInspectorTrigger, WorkbenchTimeline, workbenchVariants, useWorkbench, } from './components/workbench/index.js';
+export { Badge } from './components/badge/index.js';
+export { Chip, ChipGroup, } from './components/chip/index.js';
+export { Checkbox, CheckboxGroup, } from './components/checkbox/index.js';
+export { RadioGroup, RadioGroupItem, Radio, RadioCard, RadioGroupCard, RadioGroupCardBody, RadioGroupCardTitle, RadioGroupCardDescription, RadioGroupCardAside, } from './components/radio-group/index.js';
+export { Field, FieldLabel, FieldDescription, FieldError, } from './components/field/index.js';
+export { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption, } from './components/table/index.js';
+export { Toast, ToastProvider, useToast, createToaster, } from './components/toast/index.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "panelui-web",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "PanelUI for the web: animated, data-rich React components styled with Tailwind CSS on shadcn tokens.",
   "type": "module",
   "sideEffects": false,