xiod-ui 1.0.0

package/dist/components/marker.js

@@ -0,0 +1,59 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/marker.tsx
+const markerVariants = cva("group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-muted-foreground transition-colors [a]:underline [a]:underline-offset-3 [a]:hover:text-foreground", {
+	variants: {
+		variant: {
+			default: "",
+			separator: "before:mr-1.5 before:h-px before:min-w-0 before:flex-1 before:bg-border after:ml-1.5 after:h-px after:min-w-0 after:flex-1 after:bg-border",
+			border: "border-b border-border pb-2"
+		},
+		size: {
+			default: "text-sm",
+			sm: "text-xs",
+			lg: "text-base font-semibold text-foreground"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function Marker({ className, variant = "default", size = "default", render, ...props }) {
+	const defaultProps = {
+		className: cn(markerVariants({
+			variant,
+			size,
+			className
+		})),
+		"data-slot": "marker",
+		"data-variant": variant,
+		"data-size": size
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function MarkerIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "marker-icon",
+		"aria-hidden": "true",
+		className: cn("shrink-0 flex items-center justify-center text-muted-foreground/80 group-data-[size=sm]/marker:size-3.5 group-data-[size=default]/marker:size-4 group-data-[size=lg]/marker:size-5 [&_svg:not([class*='size-'])]:size-full", className),
+		...props
+	});
+}
+function MarkerContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "marker-content",
+		className: cn("min-w-0 break-words group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center", className),
+		...props
+	});
+}
+//#endregion
+export { Marker, MarkerContent, MarkerIcon, markerVariants };

package/dist/components/menu.d.ts

@@ -0,0 +1,42 @@
+import * as React$1 from "react";
+import { Menu as Menu$1 } from "@base-ui/react/menu";
+//#region src/components/menu.d.ts
+declare const MenuCreateHandle: typeof Menu$1.createHandle;
+declare const Menu: <Payload>(props: Menu$1.Root.Props<Payload>) => React$1.JSX.Element;
+declare const MenuPortal: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ContextMenuPortalProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare function MenuTrigger({ className, children, ...props }: Menu$1.Trigger.Props): React$1.JSX.Element;
+declare function MenuPopup({ children, className, sideOffset, align, alignOffset, side, anchor, hideArrow, ...props }: Menu$1.Popup.Props & {
+  align?: Menu$1.Positioner.Props["align"];
+  sideOffset?: Menu$1.Positioner.Props["sideOffset"];
+  alignOffset?: Menu$1.Positioner.Props["alignOffset"];
+  side?: Menu$1.Positioner.Props["side"];
+  anchor?: Menu$1.Positioner.Props["anchor"];
+  hideArrow?: boolean;
+}): React$1.JSX.Element;
+declare function MenuGroup(props: Menu$1.Group.Props): React$1.JSX.Element;
+declare function MenuItem({ className, inset, variant, ...props }: Menu$1.Item.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}): React$1.JSX.Element;
+declare function MenuCheckboxItem({ className, children, checked, variant, ...props }: Menu$1.CheckboxItem.Props & {
+  variant?: "default" | "switch";
+}): React$1.JSX.Element;
+declare function MenuRadioGroup(props: Menu$1.RadioGroup.Props): React$1.JSX.Element;
+declare function MenuRadioItem({ className, children, ...props }: Menu$1.RadioItem.Props): React$1.JSX.Element;
+declare function MenuGroupLabel({ className, inset, ...props }: Menu$1.GroupLabel.Props & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function MenuSeparator({ className, ...props }: Menu$1.Separator.Props): React$1.JSX.Element;
+declare function MenuShortcut({ className, ...props }: React$1.ComponentProps<"kbd">): React$1.JSX.Element;
+declare function MenuSub(props: Menu$1.SubmenuRoot.Props): React$1.JSX.Element;
+declare function MenuSubTrigger({ className, inset, children, ...props }: Menu$1.SubmenuTrigger.Props & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function MenuSubPopup({ className, sideOffset, alignOffset, align, ...props }: Menu$1.Popup.Props & {
+  align?: Menu$1.Positioner.Props["align"];
+  sideOffset?: Menu$1.Positioner.Props["sideOffset"];
+  alignOffset?: Menu$1.Positioner.Props["alignOffset"];
+}): React$1.JSX.Element;
+declare const MenuArrow: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").ContextMenuArrowProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, MenuArrow };

package/dist/components/menu.js

@@ -0,0 +1,186 @@
+"use client";
+import { cn } from "cn";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronRight } from "xiod-icons/icons/ChevronRight";
+import { Menu as Menu$1 } from "@base-ui/react/menu";
+//#region src/components/menu.tsx
+const MenuCreateHandle = Menu$1.createHandle;
+const Menu = Menu$1.Root;
+const MenuPortal = Menu$1.Portal;
+function MenuTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Menu$1.Trigger, {
+		className: cn(className),
+		"data-slot": "menu-trigger",
+		...props,
+		children
+	});
+}
+function MenuPopup({ children, className, sideOffset = 8, align = "center", alignOffset, side = "bottom", anchor, hideArrow = false, ...props }) {
+	return /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
+		align,
+		alignOffset,
+		anchor,
+		className: "z-50",
+		"data-slot": "menu-positioner",
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsxs(Menu$1.Popup, {
+			className: cn("relative flex not-[class*='w-']:min-w-32 origin-(--transform-origin) rounded-lg border bg-popover shadow-lg/5 outline-none before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] focus:outline-none transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-97 data-starting-style:scale-97 data-ending-style:opacity-0 data-starting-style:opacity-0 dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+			"data-slot": "menu-popup",
+			...props,
+			children: [!hideArrow && /* @__PURE__ */ jsx(Menu$1.Arrow, {
+				className: "z-10 flex data-[side=bottom]:-top-[9px] data-[side=bottom]:rotate-0 data-[side=left]:right-[-14px] data-[side=left]:rotate-90 data-[side=right]:left-[-14px] data-[side=right]:-rotate-90 data-[side=top]:-bottom-[9px] data-[side=top]:rotate-180",
+				children: /* @__PURE__ */ jsx(ArrowSvg, {})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "max-h-(--available-height) w-full overflow-y-auto p-1",
+				children
+			})]
+		})
+	}) });
+}
+function MenuGroup(props) {
+	return /* @__PURE__ */ jsx(Menu$1.Group, {
+		"data-slot": "menu-group",
+		...props
+	});
+}
+function MenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Menu$1.Item, {
+		className: cn("[&>svg]:-mx-0.5 relative flex min-h-8 cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 sm:min-h-7 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:shrink-0", className),
+		"data-inset": inset,
+		"data-slot": "menu-item",
+		"data-variant": variant,
+		...props
+	});
+}
+function MenuCheckboxItem({ className, children, checked, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Menu$1.CheckboxItem, {
+		checked,
+		className: cn("relative grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default items-center gap-2 rounded-sm py-1 ps-2 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", variant === "switch" ? "grid-cols-[1fr_auto] gap-4 pe-1.5" : "grid-cols-[.75rem_1fr] pe-4", className),
+		"data-slot": "menu-checkbox-item",
+		...props,
+		children: variant === "switch" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "col-start-1",
+			children
+		}), /* @__PURE__ */ jsx(Menu$1.CheckboxItemIndicator, {
+			className: "inset-shadow-[0_1px_--theme(--color-black/4%)] inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]",
+			keepMounted: true,
+			children: /* @__PURE__ */ jsx("span", { className: "pointer-events-none block aspect-square h-full in-[[data-slot=menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]" })
+		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Menu$1.CheckboxItemIndicator, {
+			className: "-ms-0.5 col-start-1",
+			children: /* @__PURE__ */ jsx("svg", {
+				fill: "none",
+				height: "24",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2",
+				viewBox: "0 0 24 24",
+				width: "24",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ jsx("path", { d: "M5.252 12.7 10.2 18.63 18.748 5.37" })
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "col-start-2",
+			children
+		})] })
+	});
+}
+function MenuRadioGroup(props) {
+	return /* @__PURE__ */ jsx(Menu$1.RadioGroup, {
+		"data-slot": "menu-radio-group",
+		...props
+	});
+}
+function MenuRadioItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu$1.RadioItem, {
+		className: cn("relative grid min-h-8 in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[.75rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		"data-slot": "menu-radio-item",
+		...props,
+		children: [/* @__PURE__ */ jsx(Menu$1.RadioItemIndicator, {
+			className: "-ms-0.5 col-start-1",
+			children: /* @__PURE__ */ jsx("svg", {
+				fill: "none",
+				height: "24",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2",
+				viewBox: "0 0 24 24",
+				width: "24",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ jsx("path", { d: "M5.252 12.7 10.2 18.63 18.748 5.37" })
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "col-start-2",
+			children
+		})]
+	});
+}
+function MenuGroupLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(Menu$1.GroupLabel, {
+		className: cn("px-2 py-1.5 font-medium text-muted-foreground text-xs data-inset:ps-9 sm:data-inset:ps-8", className),
+		"data-inset": inset,
+		"data-slot": "menu-label",
+		...props
+	});
+}
+function MenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu$1.Separator, {
+		className: cn("mx-2 my-1 h-px bg-border", className),
+		"data-slot": "menu-separator",
+		...props
+	});
+}
+function MenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		className: cn("ms-auto font-medium font-sans text-muted-foreground/72 text-xs tracking-widest", className),
+		"data-slot": "menu-shortcut",
+		...props
+	});
+}
+function MenuSub(props) {
+	return /* @__PURE__ */ jsx(Menu$1.SubmenuRoot, {
+		"data-slot": "menu-sub",
+		...props
+	});
+}
+function MenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu$1.SubmenuTrigger, {
+		className: cn("[&>svg:not(:last-child)]:-mx-0.5 flex min-h-8 items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-popup-open:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-popup-open:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", className),
+		"data-inset": inset,
+		"data-slot": "menu-sub-trigger",
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRight, { className: "-me-0.5 ms-auto opacity-80" })]
+	});
+}
+function MenuSubPopup({ className, sideOffset = 0, alignOffset, align = "start", ...props }) {
+	return /* @__PURE__ */ jsx(MenuPopup, {
+		align,
+		alignOffset: alignOffset ?? (align !== "center" ? -5 : void 0),
+		className: cn(className),
+		"data-slot": "menu-sub-content",
+		side: "inline-end",
+		sideOffset,
+		...props
+	});
+}
+function ArrowSvg(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "20",
+		height: "10",
+		viewBox: "0 0 20 10",
+		fill: "none",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+			className: "fill-popover"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
+			className: "fill-border"
+		})]
+	});
+}
+const MenuArrow = Menu$1.Arrow;
+//#endregion
+export { Menu as DropdownMenu, Menu, MenuCheckboxItem as DropdownMenuCheckboxItem, MenuCheckboxItem, MenuPopup as DropdownMenuContent, MenuPopup, MenuCreateHandle as DropdownMenuCreateHandle, MenuCreateHandle, MenuGroup as DropdownMenuGroup, MenuGroup, MenuItem as DropdownMenuItem, MenuItem, MenuGroupLabel as DropdownMenuLabel, MenuGroupLabel, MenuPortal as DropdownMenuPortal, MenuPortal, MenuRadioGroup as DropdownMenuRadioGroup, MenuRadioGroup, MenuRadioItem as DropdownMenuRadioItem, MenuRadioItem, MenuSeparator as DropdownMenuSeparator, MenuSeparator, MenuShortcut as DropdownMenuShortcut, MenuShortcut, MenuSub as DropdownMenuSub, MenuSub, MenuSubPopup as DropdownMenuSubContent, MenuSubPopup, MenuSubTrigger as DropdownMenuSubTrigger, MenuSubTrigger, MenuTrigger as DropdownMenuTrigger, MenuTrigger, MenuArrow };

package/dist/components/menubar.d.ts

@@ -0,0 +1,40 @@
+import * as React$1 from "react";
+import { Menu } from "@base-ui/react/menu";
+import { Menubar as Menubar$1 } from "@base-ui/react/menubar";
+//#region src/components/menubar.d.ts
+declare function Menubar({ className, ...props }: Menubar$1.Props): React$1.JSX.Element;
+declare function MenubarMenu(props: Menu.Root.Props): React$1.JSX.Element;
+declare function MenubarGroup(props: Menu.Group.Props): React$1.JSX.Element;
+declare function MenubarPortal(props: Menu.Portal.Props): React$1.JSX.Element;
+declare function MenubarSub(props: Menu.SubmenuRoot.Props): React$1.JSX.Element;
+declare function MenubarRadioGroup(props: Menu.RadioGroup.Props): React$1.JSX.Element;
+declare function MenubarTrigger({ className, ...props }: Menu.Trigger.Props): React$1.JSX.Element;
+declare function MenubarPopup({ align, sideOffset, hideArrow, ...props }: Menu.Popup.Props & {
+  align?: Menu.Positioner.Props["align"];
+  sideOffset?: Menu.Positioner.Props["sideOffset"];
+  alignOffset?: Menu.Positioner.Props["alignOffset"];
+  side?: Menu.Positioner.Props["side"];
+  anchor?: Menu.Positioner.Props["anchor"];
+  /**
+   * Whether to hide the arrow indicator.
+   * @default false
+   */
+  hideArrow?: boolean;
+}): React$1.JSX.Element;
+declare function MenubarItem(props: Menu.Item.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}): React$1.JSX.Element;
+declare function MenubarCheckboxItem(props: Menu.CheckboxItem.Props): React$1.JSX.Element;
+declare function MenubarRadioItem(props: Menu.RadioItem.Props): React$1.JSX.Element;
+declare function MenubarLabel(props: Menu.GroupLabel.Props & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function MenubarSeparator(props: Menu.Separator.Props): React$1.JSX.Element;
+declare function MenubarShortcut(props: React$1.HTMLAttributes<HTMLSpanElement>): React$1.JSX.Element;
+declare function MenubarSubTrigger(props: Menu.SubmenuTrigger.Props & {
+  inset?: boolean;
+}): React$1.JSX.Element;
+declare function MenubarSubPopup(props: Menu.Popup.Props): React$1.JSX.Element;
+//#endregion
+export { Menubar, MenubarCheckboxItem, MenubarPopup as MenubarContent, MenubarPopup, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubPopup as MenubarSubContent, MenubarSubPopup, MenubarSubTrigger, MenubarTrigger };

package/dist/components/menubar.js

@@ -0,0 +1,107 @@
+"use client";
+import { DropdownMenu as Menu$1, DropdownMenuCheckboxItem as MenuCheckboxItem, DropdownMenuContent as MenuPopup, DropdownMenuGroup as MenuGroup, DropdownMenuItem as MenuItem, DropdownMenuLabel as MenuGroupLabel, DropdownMenuPortal as MenuPortal, DropdownMenuRadioGroup as MenuRadioGroup, DropdownMenuRadioItem as MenuRadioItem, DropdownMenuSeparator as MenuSeparator, DropdownMenuShortcut as MenuShortcut, DropdownMenuSub as MenuSub, DropdownMenuSubContent as MenuSubPopup, DropdownMenuSubTrigger as MenuSubTrigger } from "./menu.js";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+import { Menubar as Menubar$1 } from "@base-ui/react/menubar";
+//#region src/components/menubar.tsx
+function Menubar({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menubar$1, {
+		className: cn("relative flex flex-wrap min-h-10 sm:min-h-9 items-center gap-1 rounded-lg border bg-card not-dark:bg-clip-padding p-[calc(--spacing(1)-1px)] text-card-foreground shadow-xs/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", className),
+		"data-slot": "menubar",
+		...props
+	});
+}
+function MenubarMenu(props) {
+	return /* @__PURE__ */ jsx(Menu$1, {
+		"data-slot": "menubar-menu",
+		...props
+	});
+}
+function MenubarGroup(props) {
+	return /* @__PURE__ */ jsx(MenuGroup, {
+		"data-slot": "menubar-group",
+		...props
+	});
+}
+function MenubarPortal(props) {
+	return /* @__PURE__ */ jsx(MenuPortal, { ...props });
+}
+function MenubarSub(props) {
+	return /* @__PURE__ */ jsx(MenuSub, {
+		"data-slot": "menubar-sub",
+		...props
+	});
+}
+function MenubarRadioGroup(props) {
+	return /* @__PURE__ */ jsx(MenuRadioGroup, {
+		"data-slot": "menubar-radio-group",
+		...props
+	});
+}
+function MenubarTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		className: cn("relative flex cursor-default select-none items-center rounded-sm px-3 py-1.5 sm:py-1 text-base sm:text-sm font-medium outline-none focus-visible:bg-accent focus-visible:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11", className),
+		"data-slot": "menubar-trigger",
+		...props
+	});
+}
+function MenubarPopup({ align = "start", sideOffset = 10, hideArrow = false, ...props }) {
+	return /* @__PURE__ */ jsx(MenuPopup, {
+		align,
+		"data-slot": "menubar-popup",
+		sideOffset,
+		hideArrow,
+		...props
+	});
+}
+function MenubarItem(props) {
+	return /* @__PURE__ */ jsx(MenuItem, {
+		"data-slot": "menubar-item",
+		...props
+	});
+}
+function MenubarCheckboxItem(props) {
+	return /* @__PURE__ */ jsx(MenuCheckboxItem, {
+		"data-slot": "menubar-checkbox-item",
+		...props
+	});
+}
+function MenubarRadioItem(props) {
+	return /* @__PURE__ */ jsx(MenuRadioItem, {
+		"data-slot": "menubar-radio-item",
+		...props
+	});
+}
+function MenubarLabel(props) {
+	return /* @__PURE__ */ jsx(MenuGroupLabel, {
+		"data-slot": "menubar-label",
+		...props
+	});
+}
+function MenubarSeparator(props) {
+	return /* @__PURE__ */ jsx(MenuSeparator, {
+		"data-slot": "menubar-separator",
+		...props
+	});
+}
+function MenubarShortcut(props) {
+	return /* @__PURE__ */ jsx(MenuShortcut, {
+		"data-slot": "menubar-shortcut",
+		...props
+	});
+}
+function MenubarSubTrigger(props) {
+	return /* @__PURE__ */ jsx(MenuSubTrigger, {
+		"data-slot": "menubar-sub-trigger",
+		...props
+	});
+}
+function MenubarSubPopup(props) {
+	return /* @__PURE__ */ jsx(MenuSubPopup, {
+		"data-slot": "menubar-sub-popup",
+		...props
+	});
+}
+//#endregion
+export { Menubar, MenubarCheckboxItem, MenubarPopup as MenubarContent, MenubarPopup, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubPopup as MenubarSubContent, MenubarSubPopup, MenubarSubTrigger, MenubarTrigger };

package/dist/components/message.d.ts

@@ -0,0 +1,33 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message.d.ts
+export interface MessageGroupProps extends React$1.HTMLAttributes<HTMLDivElement> {}
+export declare function MessageGroup({ className, ...props }: MessageGroupProps): React$1.JSX.Element;
+export interface MessageProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  align?: "start" | "end";
+}
+export declare function Message({ className, align, ...props }: MessageProps): React$1.JSX.Element;
+export interface MessageAvatarProps extends React$1.HTMLAttributes<HTMLDivElement> {}
+export declare function MessageAvatar({ className, ...props }: MessageAvatarProps): React$1.JSX.Element;
+export interface MessageContentProps extends React$1.HTMLAttributes<HTMLDivElement> {}
+export declare function MessageContent({ className, ...props }: MessageContentProps): React$1.JSX.Element;
+export interface MessageHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {}
+export declare function MessageHeader({ className, ...props }: MessageHeaderProps): React$1.JSX.Element;
+export interface MessageFooterProps extends React$1.HTMLAttributes<HTMLDivElement> {}
+export declare function MessageFooter({ className, ...props }: MessageFooterProps): React$1.JSX.Element;
+export declare const bubbleVariants: (props?: ({
+  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "muted" | "tinted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BubbleProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof bubbleVariants> {
+  align?: "start" | "end";
+}
+export declare function Bubble({ variant, align, className, ...props }: BubbleProps): React$1.JSX.Element;
+export declare function BubbleContent({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+export declare const bubbleReactionsVariants: (props?: ({
+  side?: "top" | "bottom" | null | undefined;
+  align?: "start" | "end" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BubbleReactionsProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof bubbleReactionsVariants> {}
+export declare function BubbleReactions({ side, align, className, ...props }: BubbleReactionsProps): React$1.JSX.Element;
+//#endregion

package/dist/components/message.js

@@ -0,0 +1,112 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/message.tsx
+function MessageGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-group",
+		className: cn("flex min-w-0 flex-col gap-2", className),
+		...props
+	});
+}
+function Message({ className, align = "start", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message",
+		"data-align": align,
+		className: cn("group/message relative flex w-full min-w-0 gap-3 text-sm data-[align=end]:flex-row-reverse", className),
+		...props
+	});
+}
+function MessageAvatar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-avatar",
+		className: cn("flex w-8 h-8 shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted select-none group-has-data-[slot=message-footer]/message:-translate-y-6 transition-transform duration-200", className),
+		...props
+	});
+}
+function MessageContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-content",
+		className: cn("flex w-full min-w-0 flex-col gap-1.5 break-words group-data-[align=end]/message:*:data-[slot=bubble]:self-end group-data-[align=end]/message:*:data-[slot=message-header]:self-end group-data-[align=end]/message:*:data-[slot=message-footer]:self-end", className),
+		...props
+	});
+}
+function MessageHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-header",
+		className: cn("flex max-w-full min-w-0 items-center px-3.5 text-xs font-medium text-muted-foreground", className),
+		...props
+	});
+}
+function MessageFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "message-footer",
+		className: cn("flex max-w-full min-w-0 items-center px-3.5 text-xs font-medium text-muted-foreground group-data-[align=end]/message:justify-end", className),
+		...props
+	});
+}
+const bubbleVariants = cva("group/bubble relative flex w-fit max-w-[80%] min-w-0 flex-col gap-1 transition-[color,background-color,border-color,opacity,box-shadow] duration-200", {
+	variants: { variant: {
+		default: "*:data-[slot=bubble-content]:bg-primary *:data-[slot=bubble-content]:text-primary-foreground [&_[data-slot=bubble-content]:is(button,a):hover]:bg-primary/90",
+		secondary: "*:data-[slot=bubble-content]:bg-secondary *:data-[slot=bubble-content]:text-secondary-foreground [&_[data-slot=bubble-content]:is(button,a):hover]:bg-secondary/80",
+		muted: "*:data-[slot=bubble-content]:bg-muted *:data-[slot=bubble-content]:text-foreground [&_[data-slot=bubble-content]:is(button,a):hover]:bg-muted/80",
+		tinted: "*:data-[slot=bubble-content]:bg-primary/8 *:data-[slot=bubble-content]:text-primary [&_[data-slot=bubble-content]:is(button,a):hover]:bg-primary/16",
+		outline: "*:data-[slot=bubble-content]:border-border *:data-[slot=bubble-content]:bg-background *:data-[slot=bubble-content]:text-foreground [&_[data-slot=bubble-content]:is(button,a):hover]:bg-muted",
+		ghost: "*:data-[slot=bubble-content]:border-none *:data-[slot=bubble-content]:bg-transparent *:data-[slot=bubble-content]:p-0 *:data-[slot=bubble-content]:text-foreground [&_[data-slot=bubble-content]:is(button,a):hover]:bg-muted/30",
+		destructive: "*:data-[slot=bubble-content]:bg-destructive/10 *:data-[slot=bubble-content]:text-destructive [&_[data-slot=bubble-content]:is(button,a):hover]:bg-destructive/20"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Bubble({ variant = "default", align = "start", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bubble",
+		"data-variant": variant,
+		"data-align": align,
+		className: cn(bubbleVariants({ variant }), "has-[[data-slot=bubble-reactions][data-side=bottom]]:mb-2.5", "has-[[data-slot=bubble-reactions][data-side=top]]:mt-2.5", className),
+		...props
+	});
+}
+function BubbleContent({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("w-fit max-w-full min-w-0 overflow-hidden rounded-3xl border border-transparent px-[calc(--spacing(4)-1px)] py-[calc(--spacing(2.5)-1px)] text-sm leading-relaxed break-words", "group-data-[align=end]/bubble:self-end group-data-[align=end]/bubble:rounded-tr-md", "group-data-[align=start]/bubble:self-start group-data-[align=start]/bubble:rounded-tl-md", "[button]:text-left [button,a]:transition-colors [button,a]:outline-none [button,a]:focus-visible:border-ring [button,a]:focus-visible:ring-2 [button,a]:focus-visible:ring-ring/30", className),
+		"data-slot": "bubble-content"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+const bubbleReactionsVariants = cva("absolute z-10 flex w-fit shrink-0 items-center justify-center gap-1 rounded-full bg-muted border border-border px-[calc(--spacing(1.5)-1px)] py-[calc(--spacing(0.5)-1px)] text-xs select-none shadow-sm/5 transition-[transform,opacity,color,background-color,border-color,box-shadow]", {
+	variants: {
+		side: {
+			top: "top-0 -translate-y-1/2",
+			bottom: "bottom-0 translate-y-1/2"
+		},
+		align: {
+			start: "left-4",
+			end: "right-4"
+		}
+	},
+	defaultVariants: {
+		side: "bottom",
+		align: "end"
+	}
+});
+function BubbleReactions({ side = "bottom", align = "end", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "bubble-reactions",
+		"data-align": align,
+		"data-side": side,
+		className: cn(bubbleReactionsVariants({
+			side,
+			align
+		}), className),
+		...props
+	});
+}
+//#endregion
+export { Bubble, BubbleContent, BubbleReactions, Message, MessageAvatar, MessageContent, MessageFooter, MessageGroup, MessageHeader, bubbleReactionsVariants, bubbleVariants };

package/dist/components/meter.d.ts

@@ -0,0 +1,10 @@
+import * as React$1 from "react";
+import { Meter as Meter$1 } from "@base-ui/react/meter";
+//#region src/components/meter.d.ts
+declare function Meter({ className, children, ...props }: Meter$1.Root.Props): React$1.JSX.Element;
+declare function MeterLabel({ className, ...props }: Meter$1.Label.Props): React$1.JSX.Element;
+declare function MeterTrack({ className, ...props }: Meter$1.Track.Props): React$1.JSX.Element;
+declare function MeterIndicator({ className, ...props }: Meter$1.Indicator.Props): React$1.JSX.Element;
+declare function MeterValue({ className, ...props }: Meter$1.Value.Props): React$1.JSX.Element;
+//#endregion
+export { Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue };

package/dist/components/meter.js

@@ -0,0 +1,42 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Meter as Meter$1 } from "@base-ui/react/meter";
+//#region src/components/meter.tsx
+function Meter({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Meter$1.Root, {
+		className: cn("flex w-full flex-col gap-2", className),
+		...props,
+		children: children ? children : /* @__PURE__ */ jsx(MeterTrack, { children: /* @__PURE__ */ jsx(MeterIndicator, {}) })
+	});
+}
+function MeterLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Meter$1.Label, {
+		className: cn("font-medium text-foreground text-sm", className),
+		"data-slot": "meter-label",
+		...props
+	});
+}
+function MeterTrack({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Meter$1.Track, {
+		className: cn("block h-2 w-full overflow-hidden bg-input inset-shadow-[0_1px_2px_var(--input)]", className),
+		"data-slot": "meter-track",
+		...props
+	});
+}
+function MeterIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Meter$1.Indicator, {
+		className: cn("bg-primary inset-shadow-[0_1px_--alpha(var(--primary-foreground)/16%)] transition-[width,transform] duration-500", className),
+		"data-slot": "meter-indicator",
+		...props
+	});
+}
+function MeterValue({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Meter$1.Value, {
+		className: cn("text-foreground text-sm tabular-nums", className),
+		"data-slot": "meter-value",
+		...props
+	});
+}
+//#endregion
+export { Meter, MeterIndicator, MeterLabel, MeterTrack, MeterValue };