@ctrl-ui/react 0.8.0

package/dist/ui/markdown-elements.d.ts

@@ -0,0 +1,52 @@
+import { MarkdownKnobStyle } from "../knob-contracts/markdown-knobs.js";
+import { CSSProperties, ComponentProps, JSX } from "react";
+//#region src/ui/markdown-elements.d.ts
+type MarkdownCodeProps = ComponentProps<"code"> & {
+  node?: unknown;
+} & {
+  style?: CSSProperties & MarkdownKnobStyle;
+};
+type MarkdownElementProps<Tag extends keyof JSX.IntrinsicElements> = ComponentProps<Tag> & {
+  node?: unknown;
+} & {
+  style?: CSSProperties & MarkdownKnobStyle;
+};
+declare function MarkdownInlineCode({ className, children, node: _node, ...props }: MarkdownCodeProps): JSX.Element;
+declare function MarkdownPre({ children, node: _node }: MarkdownElementProps<"pre">): JSX.Element;
+declare function MarkdownCode({ className, children, node: _node, ...props }: MarkdownCodeProps): JSX.Element;
+declare function MarkdownH1({ className, node: _node, ...props }: MarkdownElementProps<"h1">): JSX.Element;
+declare function MarkdownH2({ className, node: _node, ...props }: MarkdownElementProps<"h2">): JSX.Element;
+declare function MarkdownH3({ className, node: _node, ...props }: MarkdownElementProps<"h3">): JSX.Element;
+declare function MarkdownP({ className, node: _node, ...props }: MarkdownElementProps<"p">): JSX.Element;
+declare function MarkdownUl({ className, node: _node, ...props }: MarkdownElementProps<"ul">): JSX.Element;
+declare function MarkdownOl({ className, node: _node, ...props }: MarkdownElementProps<"ol">): JSX.Element;
+declare function MarkdownLi({ className, node: _node, ...props }: MarkdownElementProps<"li">): JSX.Element;
+declare function MarkdownA({ className, node: _node, ...props }: MarkdownElementProps<"a">): JSX.Element;
+declare function MarkdownBlockquote({ className, node: _node, ...props }: MarkdownElementProps<"blockquote">): JSX.Element;
+declare function MarkdownHr({ className, node: _node, ...props }: MarkdownElementProps<"hr">): JSX.Element;
+declare function MarkdownStrong({ className, node: _node, ...props }: MarkdownElementProps<"strong">): JSX.Element;
+declare function MarkdownEm({ className, node: _node, ...props }: MarkdownElementProps<"em">): JSX.Element;
+declare function MarkdownTable({ className, children, node: _node, ...props }: MarkdownElementProps<"table">): JSX.Element;
+declare function MarkdownTh({ className, node: _node, ...props }: MarkdownElementProps<"th">): JSX.Element;
+declare function MarkdownTd({ className, node: _node, ...props }: MarkdownElementProps<"td">): JSX.Element;
+declare const markdownComponents: {
+  code: typeof MarkdownCode;
+  inlineCode: typeof MarkdownInlineCode;
+  h1: typeof MarkdownH1;
+  h2: typeof MarkdownH2;
+  h3: typeof MarkdownH3;
+  p: typeof MarkdownP;
+  ul: typeof MarkdownUl;
+  ol: typeof MarkdownOl;
+  li: typeof MarkdownLi;
+  a: typeof MarkdownA;
+  blockquote: typeof MarkdownBlockquote;
+  hr: typeof MarkdownHr;
+  strong: typeof MarkdownStrong;
+  em: typeof MarkdownEm;
+  table: typeof MarkdownTable;
+  th: typeof MarkdownTh;
+  td: typeof MarkdownTd;
+};
+//#endregion
+export { MarkdownA, MarkdownBlockquote, MarkdownCode, MarkdownEm, MarkdownH1, MarkdownH2, MarkdownH3, MarkdownHr, MarkdownInlineCode, MarkdownLi, MarkdownOl, MarkdownP, MarkdownPre, MarkdownStrong, MarkdownTable, MarkdownTd, MarkdownTh, MarkdownUl, markdownComponents };

package/dist/ui/markdown-elements.js

@@ -0,0 +1,211 @@
+import { cn } from "../lib/cn.js";
+import { Code, CodeActions, CodeContent, CodeCopy, CodeHeader, CodeTitle } from "./code.js";
+import { CodeDiff } from "./code-diff.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/markdown-elements.tsx
+function textValue(children) {
+	return Array.isArray(children) ? children.join("") : String(children ?? "");
+}
+function languageFromClassName(className) {
+	return /language-([\w-]+)/.exec(className ?? "")?.[1];
+}
+function MarkdownInlineCode({ className, children, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("code", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "inline-code",
+		className,
+		...props,
+		children
+	});
+}
+function MarkdownPre({ children, node: _node }) {
+	return /* @__PURE__ */ jsx(Fragment, { children });
+}
+function MarkdownCode({ className, children, node: _node, ...props }) {
+	const lang = languageFromClassName(className);
+	const rawValue = textValue(children);
+	if (!lang && !rawValue.includes("\n")) return /* @__PURE__ */ jsx(MarkdownInlineCode, {
+		className,
+		...props,
+		children
+	});
+	const value = rawValue.replace(/^\n/, "").replace(/\n$/, "");
+	if (lang === "diff" && value.includes("@@")) return /* @__PURE__ */ jsx(CodeDiff, {
+		patch: value,
+		lang: "diff",
+		diffStyle: "unified",
+		className: "my-4"
+	});
+	return /* @__PURE__ */ jsxs(Code, {
+		className: "my-4",
+		children: [/* @__PURE__ */ jsxs(CodeHeader, { children: [lang ? /* @__PURE__ */ jsx(CodeTitle, { children: lang }) : null, /* @__PURE__ */ jsx(CodeActions, { children: /* @__PURE__ */ jsx(CodeCopy, { value }) })] }), /* @__PURE__ */ jsx(CodeContent, {
+			code: value,
+			lang,
+			highlight: lang ? "auto" : "none"
+		})]
+	});
+}
+function MarkdownH1({ className, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("h1", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "h1",
+		className,
+		...props
+	});
+}
+function MarkdownH2({ className, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("h2", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "h2",
+		className,
+		...props
+	});
+}
+function MarkdownH3({ className, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("h3", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "h3",
+		className,
+		...props
+	});
+}
+function MarkdownP({ className, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "paragraph",
+		className,
+		...props
+	});
+}
+function MarkdownUl({ className, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "unordered-list",
+		className: cn("list-disc", className),
+		...props
+	});
+}
+function MarkdownOl({ className, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("ol", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "ordered-list",
+		className: cn("list-decimal", className),
+		...props
+	});
+}
+function MarkdownLi({ className, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "list-item",
+		className,
+		...props
+	});
+}
+function MarkdownA({ className, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("a", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "link",
+		className,
+		...props
+	});
+}
+function MarkdownBlockquote({ className, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("blockquote", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "blockquote",
+		className,
+		...props
+	});
+}
+function MarkdownHr({ className, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("hr", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "separator",
+		className,
+		...props
+	});
+}
+function MarkdownStrong({ className, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("strong", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "strong",
+		className,
+		...props
+	});
+}
+function MarkdownEm({ className, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("em", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "emphasis",
+		className,
+		...props
+	});
+}
+function MarkdownTable({ className, children, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "table-scroll",
+		className: "overflow-x-auto",
+		children: /* @__PURE__ */ jsx("table", {
+			"data-control-ui": "markdown",
+			"data-control-family": "markdown",
+			"data-slot": "table",
+			className: cn("w-full", className),
+			...props,
+			children
+		})
+	});
+}
+function MarkdownTh({ className, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("th", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "table-header",
+		className,
+		...props
+	});
+}
+function MarkdownTd({ className, node: _node, ...props }) {
+	return /* @__PURE__ */ jsx("td", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "table-cell",
+		className,
+		...props
+	});
+}
+const markdownComponents = {
+	code: MarkdownCode,
+	inlineCode: MarkdownInlineCode,
+	h1: MarkdownH1,
+	h2: MarkdownH2,
+	h3: MarkdownH3,
+	p: MarkdownP,
+	ul: MarkdownUl,
+	ol: MarkdownOl,
+	li: MarkdownLi,
+	a: MarkdownA,
+	blockquote: MarkdownBlockquote,
+	hr: MarkdownHr,
+	strong: MarkdownStrong,
+	em: MarkdownEm,
+	table: MarkdownTable,
+	th: MarkdownTh,
+	td: MarkdownTd
+};
+//#endregion
+export { MarkdownA, MarkdownBlockquote, MarkdownCode, MarkdownEm, MarkdownH1, MarkdownH2, MarkdownH3, MarkdownHr, MarkdownInlineCode, MarkdownLi, MarkdownOl, MarkdownP, MarkdownPre, MarkdownStrong, MarkdownTable, MarkdownTd, MarkdownTh, MarkdownUl, markdownComponents };

package/dist/ui/markdown.d.ts

@@ -0,0 +1,14 @@
+import { MarkdownKnobStyle } from "../knob-contracts/markdown-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/markdown.d.ts
+type MarkdownProps = Omit<ComponentProps<"div">, "children" | "style"> & {
+  content: string;
+  style?: CSSProperties & MarkdownKnobStyle;
+};
+declare function MarkdownRoot({ className, ...props }: Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & MarkdownKnobStyle;
+}): import("react").JSX.Element;
+declare function Markdown({ content, className, ...props }: MarkdownProps): import("react").JSX.Element;
+type MarkdownComponentProps = ComponentProps<typeof Markdown>;
+//#endregion
+export { Markdown, MarkdownComponentProps, MarkdownProps, MarkdownRoot };

package/dist/ui/markdown.js

@@ -0,0 +1,31 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { markdownComponents } from "./markdown-elements.js";
+import { jsx } from "react/jsx-runtime";
+import { Streamdown } from "streamdown";
+//#region src/ui/markdown.tsx
+function MarkdownRoot({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "markdown",
+		"data-control-family": "markdown",
+		"data-slot": "root",
+		className: cn("[&>*:first-child]:mt-0 [&>*:last-child]:mb-0", className),
+		...props
+	});
+}
+function Markdown({ content, className, ...props }) {
+	return /* @__PURE__ */ jsx(MarkdownRoot, {
+		className,
+		...props,
+		children: /* @__PURE__ */ jsx(Streamdown, {
+			mode: "streaming",
+			parseIncompleteMarkdown: true,
+			controls: false,
+			components: markdownComponents,
+			className: "space-y-4 whitespace-normal [&>*:first-child]:mt-0 [&>*:last-child]:mb-0",
+			children: content
+		})
+	});
+}
+//#endregion
+export { Markdown, MarkdownRoot };

package/dist/ui/menubar.d.ts

@@ -0,0 +1,74 @@
+import { OpenChangeEventDetails } from "../control-props.js";
+import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { CSSProperties, ComponentProps, MouseEvent, ReactNode } from "react";
+//#region src/ui/menubar.d.ts
+type MenubarProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+} & {
+  modal?: boolean;
+  loopFocus?: boolean;
+  disabled?: boolean;
+  orientation?: "horizontal" | "vertical";
+};
+type MenubarMenuProps = {
+  children?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
+};
+type MenubarTriggerProps = Omit<ComponentProps<"button">, "style"> & {
+  style?: CSSProperties & ButtonKnobStyle;
+};
+type MenubarContentProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type MenubarGroupProps = ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type MenubarItemProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+} & {
+  disabled?: boolean;
+  onClick?: (event: MouseEvent) => void;
+};
+type MenubarSeparatorProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type MenubarLabelProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+} & {
+  inset?: boolean;
+};
+type MenubarShortcutProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type MenubarSubProps = {
+  children?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
+};
+type MenubarSubTriggerProps = Omit<Omit<ComponentProps<"div">, "onClick">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+} & {
+  disabled?: boolean;
+  inset?: boolean;
+};
+type MenubarSubContentProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+declare function Menubar({ className, ...props }: MenubarProps): import("react").JSX.Element;
+declare function MenubarMenu(props: MenubarMenuProps): import("react").JSX.Element;
+declare function MenubarTrigger({ className, ...props }: MenubarTriggerProps): import("react").JSX.Element;
+declare function MenubarContent({ className, children, ...props }: MenubarContentProps): import("react").JSX.Element;
+declare function MenubarGroup({ className, ...props }: MenubarGroupProps): import("react").JSX.Element;
+declare function MenubarItem({ className, ...props }: MenubarItemProps): import("react").JSX.Element;
+declare function MenubarLabel({ className, inset, ...props }: MenubarLabelProps): import("react").JSX.Element;
+declare function MenubarSeparator({ className, ...props }: MenubarSeparatorProps): import("react").JSX.Element;
+declare function MenubarShortcut({ className, ...props }: MenubarShortcutProps): import("react").JSX.Element;
+declare function MenubarSub(props: MenubarSubProps): import("react").JSX.Element;
+declare function MenubarSubTrigger({ className, inset, children, ...props }: MenubarSubTriggerProps): import("react").JSX.Element;
+declare function MenubarSubContent({ className, children, ...props }: MenubarSubContentProps): import("react").JSX.Element;
+//#endregion
+export { Menubar, MenubarContent, MenubarContentProps, MenubarGroup, MenubarGroupProps, MenubarItem, MenubarItemProps, MenubarLabel, MenubarLabelProps, MenubarMenu, MenubarMenuProps, MenubarProps, MenubarSeparator, MenubarSeparatorProps, MenubarShortcut, MenubarShortcutProps, MenubarSub, MenubarSubContent, MenubarSubContentProps, MenubarSubProps, MenubarSubTrigger, MenubarSubTriggerProps, MenubarTrigger, MenubarTriggerProps };

package/dist/ui/menubar.js

@@ -0,0 +1,162 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinEffects, skinId } from "../skin.js";
+import { popupItemStructureClasses } from "../surface-variants.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+import { Menubar as Menubar$1 } from "@base-ui/react/menubar";
+//#region src/ui/menubar.tsx
+const popupClasses = "min-w-[11rem]";
+const itemClasses = cn("group/mbi relative", popupItemStructureClasses);
+function Menubar({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar$1, {
+		"data-control-ui": "menubar",
+		"data-popup-kind": "menubar",
+		"data-slot": "root",
+		"data-control-family": "popup",
+		"data-popup-part": "bar",
+		className: cn("inline-flex items-center", className),
+		...props
+	});
+}
+function MenubarMenu(props) {
+	return /* @__PURE__ */ jsx(Menu.Root, { ...props });
+}
+function MenubarTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-control-ui": "menubar",
+		"data-control-family": "button",
+		"data-slot": "trigger",
+		"data-control": "true",
+		"data-cursor": "default",
+		"data-size": "sm",
+		"data-variant": "ghost",
+		"data-tone": "neutral",
+		"data-shape": "default",
+		className: cn("inline-flex select-none items-center", className),
+		...props
+	});
+}
+function MenubarContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		side: "bottom",
+		align: "start",
+		sideOffset: 6,
+		className: "z-[80]",
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			"data-control-ui": "menubar",
+			"data-popup-kind": "menubar",
+			"data-slot": "content",
+			"data-surface": "floating",
+			"data-control-family": "popup",
+			"data-popup-part": "list-surface",
+			className: cn(popupClasses, className),
+			...props,
+			children
+		})
+	}) });
+}
+function MenubarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Group, {
+		"data-control-ui": "menubar",
+		"data-control-family": "popup",
+		"data-popup-kind": "menubar",
+		"data-slot": "group",
+		className,
+		...props
+	});
+}
+function MenubarItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		"data-control-ui": "menubar",
+		"data-popup-kind": "menubar",
+		"data-slot": "item",
+		"data-control-family": "popup",
+		"data-popup-part": "item",
+		className: cn(itemClasses, className),
+		...props
+	});
+}
+function MenubarLabel({ className, inset = false, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		"data-control-ui": "menubar",
+		"data-popup-kind": "menubar",
+		"data-slot": "label",
+		"data-control-family": "popup",
+		"data-popup-part": "label",
+		"data-inset": inset || void 0,
+		className: cn(className),
+		...props
+	});
+}
+function MenubarSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		"data-control-ui": "menubar",
+		"data-popup-kind": "menubar",
+		"data-slot": "separator",
+		"data-control-family": "popup",
+		"data-popup-part": "separator",
+		className: cn(className),
+		...props
+	});
+}
+function MenubarShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "menubar",
+		"data-popup-kind": "menubar",
+		"data-slot": "shortcut",
+		"data-control-family": "popup",
+		"data-popup-part": "shortcut",
+		className: cn(className),
+		...props
+	});
+}
+function MenubarSub(props) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, { ...props });
+}
+function MenubarSubTrigger({ className, inset = false, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		"data-control-ui": "menubar",
+		"data-popup-kind": "menubar",
+		"data-slot": "sub-trigger",
+		"data-control-family": "popup",
+		"data-popup-part": "item",
+		"data-inset": inset || void 0,
+		className: cn(itemClasses, className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "menubar",
+			"data-popup-kind": "menubar",
+			"data-control-family": "popup",
+			"data-slot": "sub-trigger-indicator",
+			"aria-hidden": "true",
+			children: "›"
+		})]
+	});
+}
+function MenubarSubContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		side: "right",
+		align: "start",
+		sideOffset: -4,
+		alignOffset: -5,
+		className: "z-[80]",
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			"data-control-ui": "menubar",
+			"data-popup-kind": "menubar",
+			"data-slot": "sub-content",
+			"data-surface": "floating",
+			"data-control-family": "popup",
+			"data-popup-part": "list-surface",
+			className: cn(popupClasses, className),
+			...props,
+			children
+		})
+	}) });
+}
+//#endregion
+export { Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger };

package/dist/ui/meter.d.ts

@@ -0,0 +1,34 @@
+import { RangeKnobStyle } from "../knob-contracts/range-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/ui/meter.d.ts
+type MeterProps = Omit<ComponentProps<"div"> & {
+  value: number;
+  min?: number;
+  max?: number;
+  format?: Intl.NumberFormatOptions;
+  getAriaValueText?: (formattedValue: string, value: number) => string;
+  locale?: Intl.LocalesArgument;
+}, "style"> & {
+  style?: CSSProperties & RangeKnobStyle;
+};
+type MeterTrackProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & RangeKnobStyle;
+};
+type MeterIndicatorProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & RangeKnobStyle;
+};
+type MeterLabelProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & RangeKnobStyle;
+};
+type MeterValueProps = Omit<Omit<ComponentProps<"span">, "children"> & {
+  children?: ((formattedValue: string, value: number) => ReactNode) | null;
+}, "style"> & {
+  style?: CSSProperties & RangeKnobStyle;
+};
+declare function Meter({ className, ...props }: MeterProps): import("react").JSX.Element;
+declare function MeterLabel({ className, ...props }: MeterLabelProps): import("react").JSX.Element;
+declare function MeterValue({ className, ...props }: MeterValueProps): import("react").JSX.Element;
+declare function MeterTrack({ className, ...props }: MeterTrackProps): import("react").JSX.Element;
+declare function MeterIndicator({ className, ...props }: MeterIndicatorProps): import("react").JSX.Element;
+//#endregion
+export { Meter, MeterIndicator, MeterIndicatorProps, MeterLabel, MeterLabelProps, MeterProps, MeterTrack, MeterTrackProps, MeterValue, MeterValueProps };

package/dist/ui/meter.js

@@ -0,0 +1,57 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Meter as Meter$1 } from "@base-ui/react/meter";
+//#region src/ui/meter.tsx
+function Meter({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Meter$1.Root, {
+		"data-control-ui": "meter",
+		"data-range-kind": "meter",
+		"data-slot": "root",
+		"data-control-family": "range",
+		className: cn("flex w-full flex-col", className),
+		...props
+	});
+}
+function MeterLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Meter$1.Label, {
+		"data-control-ui": "meter",
+		"data-control-family": "range",
+		"data-range-kind": "meter",
+		"data-slot": "label",
+		className,
+		...props
+	});
+}
+function MeterValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Meter$1.Value, {
+		"data-control-ui": "meter",
+		"data-control-family": "range",
+		"data-range-kind": "meter",
+		"data-slot": "value",
+		className,
+		...props
+	});
+}
+function MeterTrack({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Meter$1.Track, {
+		"data-control-ui": "meter",
+		"data-control-family": "range",
+		"data-range-kind": "meter",
+		"data-slot": "track",
+		className: cn("relative w-full overflow-hidden", className),
+		...props
+	});
+}
+function MeterIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Meter$1.Indicator, {
+		"data-control-ui": "meter",
+		"data-control-family": "range",
+		"data-range-kind": "meter",
+		"data-slot": "indicator",
+		className,
+		...props
+	});
+}
+//#endregion
+export { Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue };

package/dist/ui/morphing-panel.d.ts

@@ -0,0 +1,24 @@
+import { CollapsibleContentProps, CollapsibleProps, CollapsibleTriggerProps } from "./collapsible.js";
+import { MorphingPanelKnobStyle } from "../knob-contracts/morphing-panel-knobs.js";
+import { CSSProperties } from "react";
+//#region src/ui/morphing-panel.d.ts
+type MorphingPanelDimensions = {
+  width: string;
+  height: string;
+};
+type MorphingPanelProps = Omit<CollapsibleProps, "style"> & {
+  collapsedSize: MorphingPanelDimensions;
+  expandedSize: MorphingPanelDimensions;
+  style?: CSSProperties & MorphingPanelKnobStyle;
+};
+type MorphingPanelTriggerProps = Omit<CollapsibleTriggerProps, "style"> & {
+  style?: CSSProperties & MorphingPanelKnobStyle;
+};
+type MorphingPanelContentProps = Omit<CollapsibleContentProps, "style"> & {
+  style?: CSSProperties & MorphingPanelKnobStyle;
+};
+declare function MorphingPanel({ collapsedSize, expandedSize, className, style, ...props }: MorphingPanelProps): import("react").JSX.Element;
+declare function MorphingPanelTrigger({ render, className, children, ...props }: MorphingPanelTriggerProps): import("react").JSX.Element;
+declare function MorphingPanelContent({ className, ...props }: MorphingPanelContentProps): import("react").JSX.Element;
+//#endregion
+export { MorphingPanel, MorphingPanelContent, MorphingPanelContentProps, MorphingPanelDimensions, MorphingPanelProps, MorphingPanelTrigger, MorphingPanelTriggerProps };