@adea-ai/ui 0.22.1 → 0.23.0

package/dist/components/scene-settings.js

@@ -1,34 +1,253 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { createPortal } from 'react-dom';
-import { useEffect, useState } from 'react';
-import { Box, Camera, Focus, Grid3X3, UserRoundPen } from 'lucide-react';
-import { AccountDrawer } from './account-drawer';
-import { Button } from '#components/ui/button';
+import { Button } from "./ui/button.js";
+import { AccountDrawer } from "./account-drawer.js";
+import { Portal, createComponent, insert, template } from "solid-js/web";
+import { Box, Camera, Focus, Grid3X3, UserRoundPen } from "lucide-solid";
+import { Show, createEffect, createSignal } from "solid-js";
+//#region src/components/scene-settings.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div class=workspace-camera-control role=group aria-label="Camera view">`);
+var _tmpl$2 = /*#__PURE__*/ template(`<span class=workspace-character-designer-label>Character`);
+var _tmpl$3 = /*#__PURE__*/ template(`<span class=workspace-room-designer-label>Room designer`);
+var _tmpl$4 = /*#__PURE__*/ template(`<span class=workspace-scene-editor-label>Scene editor`);
+var _tmpl$5 = /*#__PURE__*/ template(`<div class="fixed right-4 top-16 z-40">`);
 function usePortalTarget(targetId) {
-    const [target, setTarget] = useState(null);
-    useEffect(() => {
-        setTarget(targetId ? document.getElementById(targetId) : null);
-    }, [targetId]);
-    return target;
+	const [target, setTarget] = createSignal(null);
+	createEffect(() => {
+		const id = targetId();
+		setTarget(id ? document.getElementById(id) : null);
+	});
+	return target;
 }
 function renderInTarget(content, target) {
-    return target ? createPortal(content, target) : content;
+	return target ? createComponent(Portal, {
+		mount: target,
+		children: content
+	}) : content;
 }
 /** Compact scene controls shared by the HQ shell and other scene hosts. */
-export function SceneSettings({ cameraViewMode, onCameraViewModeChange, allowCameraViewModeChange = true, characterDesignerEnabled, onCharacterDesignerChange, characterDesignerTargetId, onOpenRoomDesigner, accountTargetId, accountLabel, accountAuthenticated, accountBusy, accountMusicControl, onAccountSignIn, onAccountSignOut, showAccountDrawer = true, cameraTargetId, roomDesignerTargetId, sceneEditorTargetId, sceneEditorEnabled, onSceneEditorChange, }) {
-    const cameraTarget = usePortalTarget(cameraTargetId);
-    const characterDesignerTarget = usePortalTarget(characterDesignerTargetId);
-    const roomDesignerTarget = usePortalTarget(roomDesignerTargetId);
-    const sceneEditorTarget = usePortalTarget(sceneEditorTargetId);
-    const cameraControl = (_jsxs("div", { className: "workspace-camera-control", role: "group", "aria-label": "Camera view", children: [_jsxs(Button, { type: "button", size: "sm", variant: cameraViewMode === 'perspective' ? 'default' : 'outline', className: "workspace-camera-button", "aria-label": "Perspective camera", title: "Perspective camera", "aria-pressed": cameraViewMode === 'perspective', onClick: () => onCameraViewModeChange('perspective'), children: [_jsx(Camera, { "aria-hidden": "true" }), "Perspective"] }), _jsxs(Button, { type: "button", size: "sm", variant: cameraViewMode === 'orthographic' ? 'default' : 'outline', className: "workspace-camera-button", "aria-label": "Top-down camera", title: "Top-down camera", "aria-pressed": cameraViewMode === 'orthographic', onClick: () => onCameraViewModeChange('orthographic'), children: [_jsx(Focus, { "aria-hidden": "true" }), "Top-down"] })] }));
-    const characterDesignerControl = (_jsxs(Button, { type: "button", variant: characterDesignerEnabled ? 'default' : 'outline', size: "sm", "aria-haspopup": "dialog", "aria-label": characterDesignerEnabled ? 'Close character designer' : 'Open character designer', title: characterDesignerEnabled ? 'Close character designer' : 'Open character designer', "aria-pressed": characterDesignerEnabled, onClick: () => onCharacterDesignerChange?.(!characterDesignerEnabled), children: [_jsx(UserRoundPen, { className: "size-4", "aria-hidden": "true" }), _jsx("span", { className: "workspace-character-designer-label", children: "Character" })] }));
-    const roomDesignerControl = (_jsxs(Button, { type: "button", variant: "outline", size: "sm", "aria-haspopup": "dialog", "aria-label": "Open room designer", title: "Open room designer", onClick: onOpenRoomDesigner, children: [_jsx(Grid3X3, { className: "size-4", "aria-hidden": "true" }), _jsx("span", { className: "workspace-room-designer-label", children: "Room designer" })] }));
-    const sceneEditorControl = (_jsxs(Button, { type: "button", variant: sceneEditorEnabled ? 'default' : 'outline', size: "sm", "aria-haspopup": "dialog", "aria-label": sceneEditorEnabled ? 'Close scene editor' : 'Open scene editor', title: sceneEditorEnabled ? 'Close scene editor' : 'Open scene editor', "aria-pressed": sceneEditorEnabled, onClick: () => onSceneEditorChange?.(!sceneEditorEnabled), children: [_jsx(Box, { className: "size-4", "aria-hidden": "true" }), _jsx("span", { className: "workspace-scene-editor-label", children: "Scene editor" })] }));
-    return (_jsxs(_Fragment, { children: [showAccountDrawer ? (_jsx(AccountDrawer, { accountLabel: accountLabel, authenticated: accountAuthenticated, busy: accountBusy, musicControl: accountMusicControl, triggerTargetId: accountTargetId, onSignIn: onAccountSignIn, onSignOut: onAccountSignOut })) : null, allowCameraViewModeChange ? renderInTarget(cameraControl, cameraTarget) : null, characterDesignerEnabled != null &&
-                !characterDesignerEnabled &&
-                onCharacterDesignerChange ? (characterDesignerTarget ? (createPortal(characterDesignerControl, characterDesignerTarget)) : (_jsx("div", { className: "fixed right-4 top-16 z-40", children: characterDesignerControl }))) : null, onOpenRoomDesigner && cameraViewMode === 'orthographic' ? (roomDesignerTarget ? (createPortal(roomDesignerControl, roomDesignerTarget)) : (_jsx("div", { className: "fixed right-4 top-16 z-40", children: roomDesignerControl }))) : null, sceneEditorEnabled != null &&
-                !sceneEditorEnabled &&
-                onSceneEditorChange &&
-                cameraViewMode === 'perspective' ? (sceneEditorTarget ? (createPortal(sceneEditorControl, sceneEditorTarget)) : (_jsx("div", { className: "fixed right-4 top-16 z-40", children: sceneEditorControl }))) : null] }));
+function SceneSettings(props) {
+	const cameraTarget = usePortalTarget(() => props.cameraTargetId);
+	const characterDesignerTarget = usePortalTarget(() => props.characterDesignerTargetId);
+	const roomDesignerTarget = usePortalTarget(() => props.roomDesignerTargetId);
+	const sceneEditorTarget = usePortalTarget(() => props.sceneEditorTargetId);
+	const cameraControl = (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, createComponent(Button, {
+			type: "button",
+			size: "sm",
+			get variant() {
+				return props.cameraViewMode === "perspective" ? "default" : "outline";
+			},
+			"class": "workspace-camera-button",
+			"aria-label": "Perspective camera",
+			title: "Perspective camera",
+			get ["aria-pressed"]() {
+				return props.cameraViewMode === "perspective";
+			},
+			onClick: () => props.onCameraViewModeChange("perspective"),
+			get children() {
+				return [createComponent(Camera, { "aria-hidden": "true" }), "Perspective"];
+			}
+		}), null);
+		insert(_el$, createComponent(Button, {
+			type: "button",
+			size: "sm",
+			get variant() {
+				return props.cameraViewMode === "orthographic" ? "default" : "outline";
+			},
+			"class": "workspace-camera-button",
+			"aria-label": "Top-down camera",
+			title: "Top-down camera",
+			get ["aria-pressed"]() {
+				return props.cameraViewMode === "orthographic";
+			},
+			onClick: () => props.onCameraViewModeChange("orthographic"),
+			get children() {
+				return [createComponent(Focus, { "aria-hidden": "true" }), "Top-down"];
+			}
+		}), null);
+		return _el$;
+	})();
+	const characterDesignerControl = createComponent(Button, {
+		type: "button",
+		get variant() {
+			return props.characterDesignerEnabled ? "default" : "outline";
+		},
+		size: "sm",
+		"aria-haspopup": "dialog",
+		get ["aria-label"]() {
+			return props.characterDesignerEnabled ? "Close character designer" : "Open character designer";
+		},
+		get title() {
+			return props.characterDesignerEnabled ? "Close character designer" : "Open character designer";
+		},
+		get ["aria-pressed"]() {
+			return props.characterDesignerEnabled;
+		},
+		onClick: () => props.onCharacterDesignerChange?.(!props.characterDesignerEnabled),
+		get children() {
+			return [createComponent(UserRoundPen, {
+				"class": "size-4",
+				"aria-hidden": "true"
+			}), _tmpl$2()];
+		}
+	});
+	const roomDesignerControl = createComponent(Button, {
+		type: "button",
+		variant: "outline",
+		size: "sm",
+		"aria-haspopup": "dialog",
+		"aria-label": "Open room designer",
+		title: "Open room designer",
+		onClick: () => props.onOpenRoomDesigner?.(),
+		get children() {
+			return [createComponent(Grid3X3, {
+				"class": "size-4",
+				"aria-hidden": "true"
+			}), _tmpl$3()];
+		}
+	});
+	const sceneEditorControl = createComponent(Button, {
+		type: "button",
+		get variant() {
+			return props.sceneEditorEnabled ? "default" : "outline";
+		},
+		size: "sm",
+		"aria-haspopup": "dialog",
+		get ["aria-label"]() {
+			return props.sceneEditorEnabled ? "Close scene editor" : "Open scene editor";
+		},
+		get title() {
+			return props.sceneEditorEnabled ? "Close scene editor" : "Open scene editor";
+		},
+		get ["aria-pressed"]() {
+			return props.sceneEditorEnabled;
+		},
+		onClick: () => props.onSceneEditorChange?.(!props.sceneEditorEnabled),
+		get children() {
+			return [createComponent(Box, {
+				"class": "size-4",
+				"aria-hidden": "true"
+			}), _tmpl$4()];
+		}
+	});
+	const showCharacterDesignerControl = () => props.characterDesignerEnabled != null && !props.characterDesignerEnabled && Boolean(props.onCharacterDesignerChange);
+	const showRoomDesignerControl = () => Boolean(props.onOpenRoomDesigner) && props.cameraViewMode === "orthographic";
+	const showSceneEditorControl = () => props.sceneEditorEnabled != null && !props.sceneEditorEnabled && Boolean(props.onSceneEditorChange) && props.cameraViewMode === "perspective";
+	return [
+		createComponent(Show, {
+			get when() {
+				return props.showAccountDrawer ?? true;
+			},
+			get children() {
+				return createComponent(AccountDrawer, {
+					get accountLabel() {
+						return props.accountLabel;
+					},
+					get authenticated() {
+						return props.accountAuthenticated;
+					},
+					get busy() {
+						return props.accountBusy;
+					},
+					get musicControl() {
+						return props.accountMusicControl;
+					},
+					get triggerTargetId() {
+						return props.accountTargetId;
+					},
+					get onSignIn() {
+						return props.onAccountSignIn;
+					},
+					get onSignOut() {
+						return props.onAccountSignOut;
+					}
+				});
+			}
+		}),
+		createComponent(Show, {
+			get when() {
+				return props.allowCameraViewModeChange ?? true;
+			},
+			get children() {
+				return renderInTarget(cameraControl, cameraTarget());
+			}
+		}),
+		createComponent(Show, {
+			get when() {
+				return showCharacterDesignerControl();
+			},
+			get children() {
+				return createComponent(Show, {
+					get when() {
+						return characterDesignerTarget();
+					},
+					get fallback() {
+						return (() => {
+							var _el$5 = _tmpl$5();
+							insert(_el$5, characterDesignerControl);
+							return _el$5;
+						})();
+					},
+					children: (target) => createComponent(Portal, {
+						get mount() {
+							return target();
+						},
+						children: characterDesignerControl
+					})
+				});
+			}
+		}),
+		createComponent(Show, {
+			get when() {
+				return showRoomDesignerControl();
+			},
+			get children() {
+				return createComponent(Show, {
+					get when() {
+						return roomDesignerTarget();
+					},
+					get fallback() {
+						return (() => {
+							var _el$6 = _tmpl$5();
+							insert(_el$6, roomDesignerControl);
+							return _el$6;
+						})();
+					},
+					children: (target) => createComponent(Portal, {
+						get mount() {
+							return target();
+						},
+						children: roomDesignerControl
+					})
+				});
+			}
+		}),
+		createComponent(Show, {
+			get when() {
+				return showSceneEditorControl();
+			},
+			get children() {
+				return createComponent(Show, {
+					get when() {
+						return sceneEditorTarget();
+					},
+					get fallback() {
+						return (() => {
+							var _el$7 = _tmpl$5();
+							insert(_el$7, sceneEditorControl);
+							return _el$7;
+						})();
+					},
+					children: (target) => createComponent(Portal, {
+						get mount() {
+							return target();
+						},
+						children: sceneEditorControl
+					})
+				});
+			}
+		})
+	];
 }
+//#endregion
+export { SceneSettings };

package/dist/components/theme-provider.d.ts

@@ -1,5 +1,27 @@
-import type { ReactNode } from 'react';
-/** Shared theme provider used by each Next app in the workspace. */
-export declare function ThemeProvider({ children }: {
-    children: ReactNode;
-}): import("react").JSX.Element;
+import { type Accessor, type JSX, type ParentProps } from 'solid-js';
+export type Theme = 'light' | 'dark' | 'system';
+export type ResolvedTheme = 'light' | 'dark';
+type ThemeContextValue = {
+    theme: Accessor<Theme>;
+    resolvedTheme: Accessor<ResolvedTheme>;
+    setTheme: (theme: Theme) => void;
+};
+type ThemeProviderProps = ParentProps<{
+    defaultTheme?: Theme;
+    disableTransitionOnChange?: boolean;
+}>;
+/**
+ * The shared Solid theme provider. It owns the same contract the previous
+ * provider exposed to the token layer: a `dark` class on the document element
+ * plus a `color-scheme` style, persisted in `localStorage` and defaulting to
+ * the system preference.
+ */
+export declare function ThemeProvider(props: ThemeProviderProps): JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+/**
+ * Pre-paint theme restore for server-rendered documents. Rendered in the
+ * document head, it applies the stored or system theme before first paint so
+ * hydration never shows the wrong palette.
+ */
+export declare function ThemeScript(): JSX.Element;
+export {};

package/dist/components/theme-provider.js

@@ -1,8 +1,97 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ThemeProvider as NextThemesProvider } from 'next-themes';
-const CompatibleNextThemesProvider = NextThemesProvider;
-/** Shared theme provider used by each Next app in the workspace. */
-export function ThemeProvider({ children }) {
-    return (_jsx(CompatibleNextThemesProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, disableTransitionOnChange: true, children: children }));
+import { createComponent, template } from "solid-js/web";
+import { createContext, createEffect, createSignal, onCleanup, useContext } from "solid-js";
+//#region src/components/theme-provider.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<script>`);
+var STORAGE_KEY = "theme";
+var DARK_QUERY = "(prefers-color-scheme: dark)";
+var ThemeContext = createContext();
+function readStoredTheme() {
+	if (typeof window === "undefined") return "system";
+	try {
+		const stored = window.localStorage.getItem(STORAGE_KEY);
+		return stored === "light" || stored === "dark" || stored === "system" ? stored : "system";
+	} catch {
+		return "system";
+	}
 }
+function systemPrefersDark() {
+	return typeof window !== "undefined" && window.matchMedia(DARK_QUERY).matches;
+}
+/**
+* Applies the resolved theme to the document and suppresses transitions for the
+* frame that carries the change, so a theme switch cannot animate page-wide.
+*/
+function applyTheme(theme, disableTransitionOnChange) {
+	if (typeof document === "undefined") return;
+	const root = document.documentElement;
+	let restoreTransitions;
+	if (disableTransitionOnChange) {
+		const style = document.createElement("style");
+		style.appendChild(document.createTextNode("*{transition:none !important}"));
+		document.head.appendChild(style);
+		style.offsetHeight;
+		restoreTransitions = () => style.remove();
+	}
+	root.classList.toggle("dark", theme === "dark");
+	root.style.colorScheme = theme;
+	if (restoreTransitions) requestAnimationFrame(() => requestAnimationFrame(() => restoreTransitions?.()));
+}
+/**
+* The shared Solid theme provider. It owns the same contract the previous
+* provider exposed to the token layer: a `dark` class on the document element
+* plus a `color-scheme` style, persisted in `localStorage` and defaulting to
+* the system preference.
+*/
+function ThemeProvider(props) {
+	const [theme, setThemeSignal] = createSignal(props.defaultTheme ?? readStoredTheme());
+	const [prefersDark, setPrefersDark] = createSignal(systemPrefersDark());
+	const resolvedTheme = () => {
+		const current = theme();
+		if (current === "system") return prefersDark() ? "dark" : "light";
+		return current;
+	};
+	if (typeof window !== "undefined") {
+		const media = window.matchMedia(DARK_QUERY);
+		const onChange = (event) => setPrefersDark(event.matches);
+		media.addEventListener("change", onChange);
+		onCleanup(() => media.removeEventListener("change", onChange));
+	}
+	createEffect(() => {
+		applyTheme(resolvedTheme(), props.disableTransitionOnChange ?? true);
+	});
+	const setTheme = (next) => {
+		setThemeSignal(next);
+		try {
+			window.localStorage.setItem(STORAGE_KEY, next);
+		} catch {}
+	};
+	return createComponent(ThemeContext.Provider, {
+		value: {
+			theme,
+			resolvedTheme,
+			setTheme
+		},
+		get children() {
+			return props.children;
+		}
+	});
+}
+function useTheme() {
+	const context = useContext(ThemeContext);
+	if (!context) throw new Error("useTheme must be used within a ThemeProvider.");
+	return context;
+}
+/**
+* Pre-paint theme restore for server-rendered documents. Rendered in the
+* document head, it applies the stored or system theme before first paint so
+* hydration never shows the wrong palette.
+*/
+function ThemeScript() {
+	return (() => {
+		var _el$ = _tmpl$();
+		_el$.innerHTML = "(function(){try{var t=localStorage.getItem('theme')||'system';var d=t==='dark'||(t==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);var r=document.documentElement;r.classList.toggle('dark',d);r.style.colorScheme=d?'dark':'light'}catch(e){}})();";
+		return _el$;
+	})();
+}
+//#endregion
+export { ThemeProvider, ThemeScript, useTheme };

package/dist/components/theme-toggle.d.ts

@@ -1,7 +1,7 @@
 /**
- * Compact sun/moon theme selector. Wired to the next-themes provider so the
+ * Compact sun/moon theme selector. Wired to the shared theme provider so the
  * choice persists across the app (localStorage) and applies to every scene.
  */
-export declare function ThemeToggle({ className }: {
-    className?: string;
-}): import("react").JSX.Element;
+export declare function ThemeToggle(props: {
+    class?: string;
+}): import("solid-js").JSX.Element;

package/dist/components/theme-toggle.js

@@ -1,20 +1,64 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useSyncExternalStore } from 'react';
-import { Monitor, Moon, Sun } from 'lucide-react';
-import { useTheme } from 'next-themes';
-import { Button } from '#components/ui/button';
-import { cn } from '#lib/utils';
+import { cn } from "../lib/utils.js";
+import { Button } from "./ui/button.js";
+import { useTheme } from "./theme-provider.js";
+import { className, createComponent, effect, insert, template } from "solid-js/web";
+import { Monitor, Moon, Sun } from "lucide-solid";
+import { For } from "solid-js";
+//#region src/components/theme-toggle.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<div role=radiogroup aria-label=Theme>`);
+var THEMES = [
+	{
+		value: "system",
+		label: "System theme",
+		icon: Monitor
+	},
+	{
+		value: "light",
+		label: "Light theme",
+		icon: Sun
+	},
+	{
+		value: "dark",
+		label: "Dark theme",
+		icon: Moon
+	}
+];
 /**
- * Compact sun/moon theme selector. Wired to the next-themes provider so the
- * choice persists across the app (localStorage) and applies to every scene.
- */
-export function ThemeToggle({ className }) {
-    const { theme, setTheme } = useTheme();
-    const mounted = useSyncExternalStore(() => () => undefined, () => true, () => false);
-    // next-themes resolves the saved/system theme after mount. Use the stable
-    // light presentation for both SSR and the first client render so the
-    // aria/class attributes cannot mismatch during hydration.
-    const selectedTheme = mounted ? theme : 'system';
-    return (_jsxs("div", { className: cn('inline-flex items-center gap-2 rounded-full border border-input bg-background p-2', className), role: "radiogroup", "aria-label": "Theme", children: [_jsx(Button, { type: "button", role: "radio", "aria-checked": selectedTheme === 'system', "aria-label": "System theme", variant: selectedTheme === 'system' ? 'default' : 'ghost', size: "icon-sm", onClick: () => setTheme('system'), className: "rounded-full", children: _jsx(Monitor, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { type: "button", role: "radio", "aria-checked": selectedTheme === 'light', "aria-label": "Light theme", variant: selectedTheme === 'light' ? 'default' : 'ghost', size: "icon-sm", onClick: () => setTheme('light'), className: "rounded-full", children: _jsx(Sun, { className: "size-4", "aria-hidden": "true" }) }), _jsx(Button, { type: "button", role: "radio", "aria-checked": selectedTheme === 'dark', "aria-label": "Dark theme", variant: selectedTheme === 'dark' ? 'default' : 'ghost', size: "icon-sm", onClick: () => setTheme('dark'), className: "rounded-full", children: _jsx(Moon, { className: "size-4", "aria-hidden": "true" }) })] }));
+* Compact sun/moon theme selector. Wired to the shared theme provider so the
+* choice persists across the app (localStorage) and applies to every scene.
+*/
+function ThemeToggle(props) {
+	const { theme, setTheme } = useTheme();
+	return (() => {
+		var _el$ = _tmpl$();
+		insert(_el$, createComponent(For, {
+			each: THEMES,
+			children: (option) => createComponent(Button, {
+				type: "button",
+				role: "radio",
+				get ["aria-checked"]() {
+					return theme() === option.value;
+				},
+				get ["aria-label"]() {
+					return option.label;
+				},
+				get variant() {
+					return theme() === option.value ? "default" : "ghost";
+				},
+				size: "icon-sm",
+				onClick: () => setTheme(option.value),
+				"class": "rounded-full",
+				get children() {
+					return createComponent(option.icon, {
+						"class": "size-4",
+						"aria-hidden": "true"
+					});
+				}
+			})
+		}));
+		effect(() => className(_el$, cn("inline-flex items-center gap-2 rounded-full border border-input bg-background p-2", props.class)));
+		return _el$;
+	})();
 }
+//#endregion
+export { ThemeToggle };

package/dist/components/ui/badge.d.ts

@@ -1,7 +1,8 @@
-import { useRender } from '@base-ui/react/use-render';
 import { type VariantProps } from 'class-variance-authority';
+import { type ComponentProps } from 'solid-js';
 declare const badgeVariants: (props?: ({
     variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-export { Badge, badgeVariants };
+type BadgeProps = ComponentProps<'span'> & VariantProps<typeof badgeVariants>;
+declare function Badge(props: BadgeProps): import("solid-js").JSX.Element;
+export { Badge, badgeVariants, type BadgeProps };

package/dist/components/ui/badge.js

@@ -1,33 +1,34 @@
-import { mergeProps } from '@base-ui/react/merge-props';
-import { useRender } from '@base-ui/react/use-render';
-import { cva } from 'class-variance-authority';
-import { cn } from '#lib/utils';
-const badgeVariants = cva('group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!', {
-    variants: {
-        variant: {
-            default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
-            secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
-            destructive: 'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
-            outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
-            ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
-            link: 'text-primary underline-offset-4 hover:underline',
-        },
-    },
-    defaultVariants: {
-        variant: 'default',
-    },
+import { cn } from "../../lib/utils.js";
+import { mergeProps, spread, template } from "solid-js/web";
+import { splitProps } from "solid-js";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/badge.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span data-slot=badge>`);
+var badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
+	variants: { variant: {
+		default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+		secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+		destructive: "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+		outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+		ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+		link: "text-primary underline-offset-4 hover:underline"
+	} },
+	defaultVariants: { variant: "default" }
 });
-function Badge({ className, variant = 'default', render, ...props }) {
-    return useRender({
-        defaultTagName: 'span',
-        props: mergeProps({
-            className: cn(badgeVariants({ variant }), className),
-        }, props),
-        render,
-        state: {
-            slot: 'badge',
-            variant,
-        },
-    });
+function Badge(props) {
+	const [local, rest] = splitProps(props, ["class", "variant"]);
+	return (() => {
+		var _el$ = _tmpl$();
+		spread(_el$, mergeProps({
+			get ["data-variant"]() {
+				return local.variant ?? "default";
+			},
+			get ["class"]() {
+				return cn(badgeVariants({ variant: local.variant }), local.class);
+			}
+		}, rest), false, false);
+		return _el$;
+	})();
 }
+//#endregion
 export { Badge, badgeVariants };

package/dist/components/ui/button.d.ts

@@ -1,8 +1,9 @@
-import { Button as ButtonPrimitive } from '@base-ui/react/button';
 import { type VariantProps } from 'class-variance-authority';
+import { type ComponentProps } from 'solid-js';
 declare const buttonVariants: (props?: ({
     variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "success" | "link" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Button({ className, variant, size, ...props }: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>): import("react").JSX.Element;
-export { Button, buttonVariants };
+type ButtonProps = ComponentProps<'button'> & VariantProps<typeof buttonVariants>;
+declare function Button(props: ButtonProps): import("solid-js").JSX.Element;
+export { Button, buttonVariants, type ButtonProps };