xiod-ui 1.0.0

package/dist/components/alert.d.ts

@@ -0,0 +1,12 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+//#region src/components/alert.d.ts
+export declare const alertVariants: (props?: ({
+  variant?: "default" | "error" | "info" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React$1.JSX.Element;
+declare function AlertTitle({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AlertDescription({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AlertAction({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+//#endregion
+export { Alert, AlertAction, AlertDescription, AlertTitle };

package/dist/components/alert.js

@@ -0,0 +1,45 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/alert.tsx
+const alertVariants = cva("relative grid w-full items-start gap-x-2 gap-y-0.5 rounded-xl border px-[calc(--spacing(3.5)-1px)] py-[calc(--spacing(3)-1px)] text-card-foreground text-sm has-[>svg]:has-data-[slot=alert-action]:grid-cols-[calc(var(--spacing)*4)_1fr_auto] has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-data-[slot=alert-action]:grid-cols-[1fr_auto] has-[>svg]:gap-x-2 [&>svg]:h-lh [&>svg]:w-4", {
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: "bg-transparent dark:bg-input/32 [&>svg]:text-muted-foreground",
+		error: "border-destructive/32 bg-destructive/4 [&>svg]:text-destructive",
+		info: "border-info/32 bg-info/4 [&>svg]:text-info",
+		success: "border-success/32 bg-success/4 [&>svg]:text-success",
+		warning: "border-warning/32 bg-warning/4 [&>svg]:text-warning"
+	} }
+});
+function Alert({ className, variant, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn(alertVariants({ variant }), className),
+		"data-slot": "alert",
+		role: "alert",
+		...props
+	});
+}
+function AlertTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("font-medium [svg~&]:col-start-2", className),
+		"data-slot": "alert-title",
+		...props
+	});
+}
+function AlertDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col gap-2.5 text-muted-foreground [svg~&]:col-start-2", className),
+		"data-slot": "alert-description",
+		...props
+	});
+}
+function AlertAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex gap-1 max-sm:col-start-2 max-sm:mt-2 sm:row-start-1 sm:row-end-3 sm:self-center sm:[[data-slot=alert-description]~&]:col-start-2 sm:[[data-slot=alert-title]~&]:col-start-2 sm:[svg~&]:col-start-2 sm:[svg~[data-slot=alert-description]~&]:col-start-3 sm:[svg~[data-slot=alert-title]~&]:col-start-3", className),
+		"data-slot": "alert-action",
+		...props
+	});
+}
+//#endregion
+export { Alert, AlertAction, AlertDescription, AlertTitle, alertVariants };

package/dist/components/aspect-ratio.d.ts

@@ -0,0 +1,9 @@
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/aspect-ratio.d.ts
+export interface AspectRatioProps extends useRender.ComponentProps<"div"> {
+  ratio?: number;
+}
+declare function AspectRatio({ className, ratio, render, style, ...props }: AspectRatioProps): React$1.ReactElement;
+//#endregion
+export { AspectRatio };

package/dist/components/aspect-ratio.js

@@ -0,0 +1,22 @@
+"use client";
+import { cn } from "cn";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/aspect-ratio.tsx
+function AspectRatio({ className, ratio = 1, render, style, ...props }) {
+	const rootProps = {
+		className: cn("relative w-full", className),
+		style: {
+			aspectRatio: `${ratio}`,
+			...style
+		},
+		"data-slot": "aspect-ratio"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(rootProps, props),
+		render
+	});
+}
+//#endregion
+export { AspectRatio };

package/dist/components/autocomplete.d.ts

@@ -0,0 +1,35 @@
+import * as React$1 from "react";
+import { Autocomplete as Autocomplete$1 } from "@base-ui/react/autocomplete";
+//#region src/components/autocomplete.d.ts
+declare const Autocomplete: typeof Autocomplete$1.Root;
+declare function AutocompleteInput({ className, showTrigger, showClear, startAddon, size, triggerProps, clearProps, ...props }: Omit<Autocomplete$1.Input.Props, "size"> & {
+  showTrigger?: boolean;
+  showClear?: boolean;
+  startAddon?: React$1.ReactNode;
+  size?: "sm" | "default" | "lg" | number;
+  ref?: React$1.Ref<HTMLInputElement>;
+  triggerProps?: Autocomplete$1.Trigger.Props;
+  clearProps?: Autocomplete$1.Clear.Props;
+}): React$1.JSX.Element;
+declare function AutocompletePopup({ className, children, side, sideOffset, alignOffset, align, anchor, ...props }: Autocomplete$1.Popup.Props & {
+  align?: Autocomplete$1.Positioner.Props["align"];
+  sideOffset?: Autocomplete$1.Positioner.Props["sideOffset"];
+  alignOffset?: Autocomplete$1.Positioner.Props["alignOffset"];
+  side?: Autocomplete$1.Positioner.Props["side"];
+  anchor?: Autocomplete$1.Positioner.Props["anchor"];
+}): React$1.JSX.Element;
+declare function AutocompleteItem({ className, children, ...props }: Autocomplete$1.Item.Props): React$1.JSX.Element;
+declare function AutocompleteSeparator({ className, ...props }: Autocomplete$1.Separator.Props): React$1.JSX.Element;
+declare function AutocompleteGroup({ className, ...props }: Autocomplete$1.Group.Props): React$1.JSX.Element;
+declare function AutocompleteGroupLabel({ className, ...props }: Autocomplete$1.GroupLabel.Props): React$1.JSX.Element;
+declare function AutocompleteEmpty({ className, ...props }: Autocomplete$1.Empty.Props): React$1.JSX.Element;
+declare function AutocompleteRow({ className, ...props }: Autocomplete$1.Row.Props): React$1.JSX.Element;
+declare function AutocompleteValue({ ...props }: Autocomplete$1.Value.Props): React$1.JSX.Element;
+declare function AutocompleteList({ className, ...props }: Autocomplete$1.List.Props): React$1.JSX.Element;
+declare function AutocompleteClear({ className, ...props }: Autocomplete$1.Clear.Props): React$1.JSX.Element;
+declare function AutocompleteStatus({ className, ...props }: Autocomplete$1.Status.Props): React$1.JSX.Element;
+declare function AutocompleteCollection({ ...props }: Autocomplete$1.Collection.Props): React$1.JSX.Element;
+declare function AutocompleteTrigger({ className, children, ...props }: Autocomplete$1.Trigger.Props): React$1.JSX.Element;
+declare const useAutocompleteFilter: typeof import("@base-ui/react/internals/filter").getFilter;
+//#endregion
+export { Autocomplete, AutocompleteClear, AutocompleteCollection, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompletePopup, AutocompleteRow, AutocompleteSeparator, AutocompleteStatus, AutocompleteTrigger, AutocompleteValue, useAutocompleteFilter };

package/dist/components/autocomplete.js

@@ -0,0 +1,160 @@
+"use client";
+import { Input } from "./input.js";
+import { ScrollArea } from "./scroll-area.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Cancel } from "xiod-icons/icons/Cancel";
+import { Autocomplete as Autocomplete$1 } from "@base-ui/react/autocomplete";
+import { UnfoldMore } from "xiod-icons/icons/UnfoldMore";
+//#region src/components/autocomplete.tsx
+const Autocomplete = Autocomplete$1.Root;
+function AutocompleteInput({ className, showTrigger = false, showClear = false, startAddon, size, triggerProps, clearProps, ...props }) {
+	const sizeValue = size ?? "default";
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative not-has-[>*.w-full]:w-fit w-full text-foreground has-disabled:opacity-64",
+		children: [
+			startAddon && /* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "[&_svg]:-mx-0.5 pointer-events-none absolute inset-y-0 start-px z-10 flex items-center ps-[calc(--spacing(3)-1px)] opacity-80 has-[+[data-size=sm]]:ps-[calc(--spacing(2.5)-1px)] [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4",
+				"data-slot": "autocomplete-start-addon",
+				children: startAddon
+			}),
+			/* @__PURE__ */ jsx(Autocomplete$1.Input, {
+				className: cn(startAddon && "data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7.5)-1px)] *:data-[slot=autocomplete-input]:ps-[calc(--spacing(8.5)-1px)] sm:data-[size=sm]:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(7)-1px)] sm:*:data-[slot=autocomplete-input]:ps-[calc(--spacing(8)-1px)]", sizeValue === "sm" ? "has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-6.5" : "has-[+[data-slot=autocomplete-trigger],+[data-slot=autocomplete-clear]]:*:data-[slot=autocomplete-input]:pe-7", className),
+				"data-slot": "autocomplete-input",
+				render: /* @__PURE__ */ jsx(Input, {
+					nativeInput: true,
+					size: sizeValue
+				}),
+				...props
+			}),
+			showTrigger && /* @__PURE__ */ jsx(AutocompleteTrigger, {
+				"aria-label": "Open suggestions",
+				className: cn("-translate-y-1/2 absolute top-1/2 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", sizeValue === "sm" ? "inset-e-0" : "inset-e-0.5"),
+				...triggerProps,
+				children: /* @__PURE__ */ jsx(Autocomplete$1.Icon, {
+					"data-slot": "autocomplete-icon",
+					children: /* @__PURE__ */ jsx(UnfoldMore, {})
+				})
+			}),
+			showClear && /* @__PURE__ */ jsx(AutocompleteClear, {
+				"aria-label": "Clear value",
+				className: cn("-translate-y-1/2 absolute top-1/2 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-colors pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=autocomplete-clear]]:hidden sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", sizeValue === "sm" ? "inset-e-0" : "inset-e-0.5"),
+				...clearProps,
+				children: /* @__PURE__ */ jsx(Cancel, {})
+			})
+		]
+	});
+}
+function AutocompletePopup({ className, children, side = "bottom", sideOffset = 4, alignOffset, align = "start", anchor, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Portal, { children: /* @__PURE__ */ jsx(Autocomplete$1.Positioner, {
+		align,
+		alignOffset,
+		anchor,
+		className: "z-50 select-none",
+		"data-slot": "autocomplete-positioner",
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx("span", {
+			className: cn("relative flex max-h-full min-w-(--anchor-width) max-w-(--available-width) origin-(--transform-origin) rounded-lg border bg-popover not-dark:bg-clip-padding shadow-lg/5 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 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),
+			children: /* @__PURE__ */ jsx(Autocomplete$1.Popup, {
+				className: "flex max-h-[min(var(--available-height),23rem)] flex-1 flex-col text-foreground",
+				"data-slot": "autocomplete-popup",
+				...props,
+				children
+			})
+		})
+	}) });
+}
+function AutocompleteItem({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Item, {
+		className: cn("flex min-h-8 cursor-default select-none items-center rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:min-h-7 sm:text-sm", className),
+		"data-slot": "autocomplete-item",
+		...props,
+		children
+	});
+}
+function AutocompleteSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Separator, {
+		className: cn("mx-2 my-1 h-px bg-border last:hidden", className),
+		"data-slot": "autocomplete-separator",
+		...props
+	});
+}
+function AutocompleteGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Group, {
+		className: cn("[[role=group]+&]:mt-1.5", className),
+		"data-slot": "autocomplete-group",
+		...props
+	});
+}
+function AutocompleteGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.GroupLabel, {
+		className: cn("px-2 py-1.5 font-medium text-muted-foreground text-xs", className),
+		"data-slot": "autocomplete-group-label",
+		...props
+	});
+}
+function AutocompleteEmpty({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Empty, {
+		className: cn("not-empty:p-2 text-center text-base text-muted-foreground sm:text-sm", className),
+		"data-slot": "autocomplete-empty",
+		...props
+	});
+}
+function AutocompleteRow({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Row, {
+		className: cn(className),
+		"data-slot": "autocomplete-row",
+		...props
+	});
+}
+function AutocompleteValue({ ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Value, {
+		"data-slot": "autocomplete-value",
+		...props
+	});
+}
+function AutocompleteList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		scrollbarGutter: true,
+		scrollFade: true,
+		children: /* @__PURE__ */ jsx(Autocomplete$1.List, {
+			className: cn("not-empty:scroll-py-1 not-empty:p-1 in-data-has-overflow-y:pe-3", className),
+			"data-slot": "autocomplete-list",
+			...props
+		})
+	});
+}
+function AutocompleteClear({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Clear, {
+		className: cn("-translate-y-1/2 absolute inset-e-0.5 top-1/2 inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-80 outline-none transition-[color,background-color,box-shadow,opacity] pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 sm:size-7 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		"data-slot": "autocomplete-clear",
+		...props,
+		children: /* @__PURE__ */ jsx(Cancel, {})
+	});
+}
+function AutocompleteStatus({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Status, {
+		className: cn("px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0", className),
+		"data-slot": "autocomplete-status",
+		...props
+	});
+}
+function AutocompleteCollection({ ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Collection, {
+		"data-slot": "autocomplete-collection",
+		...props
+	});
+}
+function AutocompleteTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Trigger, {
+		className: cn(className),
+		"data-slot": "autocomplete-trigger",
+		...props,
+		children
+	});
+}
+const useAutocompleteFilter = Autocomplete$1.useFilter;
+//#endregion
+export { Autocomplete, AutocompleteClear, AutocompleteCollection, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompletePopup, AutocompleteRow, AutocompleteSeparator, AutocompleteStatus, AutocompleteTrigger, AutocompleteValue, useAutocompleteFilter };

package/dist/components/avatar.d.ts

@@ -0,0 +1,17 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+//#region src/components/avatar.d.ts
+declare const avatarVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | "xs" | "xl" | "2xl" | null | undefined;
+  shape?: "circle" | "square" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AvatarProps extends React$1.ComponentProps<typeof Avatar$1.Root>, VariantProps<typeof avatarVariants> {}
+declare function Avatar({ className, size, shape, ...props }: AvatarProps): React$1.JSX.Element;
+declare function AvatarImage({ className, ...props }: React$1.ComponentProps<typeof Avatar$1.Image>): React$1.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React$1.ComponentProps<typeof Avatar$1.Fallback>): React$1.JSX.Element;
+export interface AvatarGroupProps extends useRender.ComponentProps<"div"> {}
+declare function AvatarGroup({ className, render, ...props }: AvatarGroupProps): React$1.ReactElement;
+//#endregion
+export { Avatar, AvatarFallback, AvatarGroup, AvatarImage, avatarVariants };

package/dist/components/avatar.js

@@ -0,0 +1,65 @@
+"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";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+//#region src/components/avatar.tsx
+const avatarVariants = cva("inline-flex shrink-0 select-none items-center justify-center overflow-hidden bg-background align-middle font-medium text-xs", {
+	variants: {
+		size: {
+			xs: "size-6 text-[10px]",
+			sm: "size-8 text-xs",
+			md: "size-10 text-sm",
+			lg: "size-12 text-base",
+			xl: "size-16 text-lg",
+			"2xl": "size-20 text-xl"
+		},
+		shape: {
+			circle: "rounded-full",
+			square: "rounded-md"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		shape: "circle"
+	}
+});
+function Avatar({ className, size, shape, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Root, {
+		className: cn(avatarVariants({
+			size,
+			shape
+		}), className),
+		"data-slot": "avatar",
+		...props
+	});
+}
+function AvatarImage({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Image, {
+		className: cn("size-full object-cover", className),
+		"data-slot": "avatar-image",
+		...props
+	});
+}
+function AvatarFallback({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
+		className: cn("flex size-full items-center justify-center bg-muted text-muted-foreground", className),
+		"data-slot": "avatar-fallback",
+		...props
+	});
+}
+function AvatarGroup({ className, render, ...props }) {
+	const rootProps = {
+		className: cn("flex items-center -space-x-2 *:ring-2 *:ring-background", className),
+		"data-slot": "avatar-group"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(rootProps, props),
+		render
+	});
+}
+//#endregion
+export { Avatar, AvatarFallback, AvatarGroup, AvatarImage, avatarVariants };

package/dist/components/badge.d.ts

@@ -0,0 +1,15 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/badge.d.ts
+declare const badgeVariants: (props?: ({
+  size?: "sm" | "lg" | "default" | null | undefined;
+  variant?: "default" | "destructive" | "error" | "info" | "outline" | "secondary" | "success" | "warning" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface BadgeProps extends useRender.ComponentProps<"span"> {
+  variant?: VariantProps<typeof badgeVariants>["variant"];
+  size?: VariantProps<typeof badgeVariants>["size"];
+}
+declare function Badge({ className, variant, size, render, ...props }: BadgeProps): React$1.ReactElement;
+//#endregion
+export { Badge, badgeVariants };

package/dist/components/badge.js

@@ -0,0 +1,46 @@
+"use client";
+import { cn } from "cn";
+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/badge.tsx
+const badgeVariants = cva("relative inline-flex shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-sm border border-transparent font-medium outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-3.5 sm:[&_svg:not([class*='size-'])]:size-3 [&_svg]:pointer-events-none [&_svg]:shrink-0 [button&,a&]:cursor-pointer [button&,a&]:pointer-coarse:after:absolute [button&,a&]:pointer-coarse:after:size-full [button&,a&]:pointer-coarse:after:min-h-11 [button&,a&]:pointer-coarse:after:min-w-11", {
+	defaultVariants: {
+		size: "default",
+		variant: "default"
+	},
+	variants: {
+		size: {
+			default: "h-5.5 min-w-5.5 px-[calc(--spacing(1)-1px)] text-sm sm:h-4.5 sm:min-w-4.5 sm:text-xs",
+			lg: "h-6.5 min-w-6.5 px-[calc(--spacing(1.5)-1px)] text-base sm:h-5.5 sm:min-w-5.5 sm:text-sm",
+			sm: "h-5 min-w-5 rounded-[.25rem] px-[calc(--spacing(1)-1px)] text-xs sm:h-4 sm:min-w-4 sm:text-[.625rem]"
+		},
+		variant: {
+			default: "bg-primary text-primary-foreground shadow-xs inset-shadow-[0_1px_--alpha(var(--primary-foreground)/16%)] [button&,a&]:hover:bg-primary/90",
+			destructive: "bg-destructive text-white shadow-xs inset-shadow-[0_1px_--alpha(var(--primary-foreground)/16%)] [button&,a&]:hover:bg-destructive/90",
+			error: "bg-destructive/8 text-destructive-foreground dark:bg-destructive/16",
+			info: "bg-info/8 text-info-foreground dark:bg-info/16",
+			outline: "border-input bg-background text-foreground dark:bg-input/32 shadow-xs/5 before:absolute before:inset-0 before:pointer-events-none before:rounded-[inherit] before:shadow-[0_1px_var(--border)] [button&,a&]:hover:bg-accent/50 dark:[button&,a&]:hover:bg-input/48",
+			secondary: "bg-secondary text-secondary-foreground shadow-xs inset-shadow-[0_1px_--alpha(var(--primary-foreground)/16%)] [button&,a&]:hover:bg-secondary/90",
+			success: "bg-success/8 text-success-foreground dark:bg-success/16",
+			warning: "bg-warning/8 text-warning-foreground dark:bg-warning/16"
+		}
+	}
+});
+function Badge({ className, variant, size, render, ...props }) {
+	const defaultProps = {
+		className: cn(badgeVariants({
+			className,
+			size,
+			variant
+		})),
+		"data-slot": "badge"
+	};
+	return useRender({
+		defaultTagName: "span",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+//#endregion
+export { Badge, badgeVariants };

package/dist/components/breadcrumb.d.ts

@@ -0,0 +1,12 @@
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/breadcrumb.d.ts
+declare function Breadcrumb({ ...props }: React$1.ComponentProps<"nav">): React$1.JSX.Element;
+declare function BreadcrumbList({ className, ...props }: React$1.ComponentProps<"ol">): React$1.JSX.Element;
+declare function BreadcrumbItem({ className, ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
+declare function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<"a">): React$1.ReactElement;
+declare function BreadcrumbPage({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function BreadcrumbSeparator({ children, className, ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
+declare function BreadcrumbEllipsis({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/components/breadcrumb.js

@@ -0,0 +1,75 @@
+"use client";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { ChevronRight } from "xiod-icons/icons/ChevronRight";
+import { MoreHorizontal } from "xiod-icons/icons/MoreHorizontal";
+//#region src/components/breadcrumb.tsx
+function Breadcrumb({ ...props }) {
+	return /* @__PURE__ */ jsx("nav", {
+		"aria-label": "breadcrumb",
+		"data-slot": "breadcrumb",
+		...props
+	});
+}
+function BreadcrumbList({ className, ...props }) {
+	return /* @__PURE__ */ jsx("ol", {
+		className: cn("wrap-break-word flex flex-wrap items-center gap-1.5 text-muted-foreground text-sm sm:gap-2.5", className),
+		"data-slot": "breadcrumb-list",
+		...props
+	});
+}
+function BreadcrumbItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		className: cn("inline-flex items-center gap-1.5", className),
+		"data-slot": "breadcrumb-item",
+		...props
+	});
+}
+function BreadcrumbLink({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("transition-colors hover:text-foreground", className),
+		"data-slot": "breadcrumb-link"
+	};
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function BreadcrumbPage({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-current": "page",
+		"aria-disabled": "true",
+		className: cn("font-normal text-foreground", className),
+		"data-slot": "breadcrumb-page",
+		role: "link",
+		...props
+	});
+}
+function BreadcrumbSeparator({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("li", {
+		"aria-hidden": "true",
+		className: cn("opacity-80 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		"data-slot": "breadcrumb-separator",
+		role: "presentation",
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(ChevronRight, {})
+	});
+}
+function BreadcrumbEllipsis({ className, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": "true",
+		className: cn("flex size-9 items-center justify-center [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		"data-slot": "breadcrumb-ellipsis",
+		role: "presentation",
+		...props,
+		children: [/* @__PURE__ */ jsx(MoreHorizontal, { className: "size-4" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "More"
+		})]
+	});
+}
+//#endregion
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator };

package/dist/components/button-group.d.ts

@@ -0,0 +1,14 @@
+import { Separator } from "./separator.js";
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/button-group.d.ts
+declare const buttonGroupVariants: (props?: ({
+  orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonGroupProps extends React$1.ComponentProps<"div">, VariantProps<typeof buttonGroupVariants> {}
+declare function ButtonGroup({ className, orientation, ...props }: ButtonGroupProps): React$1.JSX.Element;
+declare function ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React$1.ComponentProps<typeof Separator>): React$1.JSX.Element;
+//#endregion
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/dist/components/button-group.js

@@ -0,0 +1,45 @@
+"use client";
+import { Separator } from "./separator.js";
+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/button-group.tsx
+const buttonGroupVariants = cva("inline-flex w-fit items-stretch isolate *:relative *:focus-visible:z-10 *:hover:z-10 *:active:z-10", {
+	defaultVariants: { orientation: "horizontal" },
+	variants: { orientation: {
+		horizontal: "flex-row [&>*:not(:first-child)]:-ms-px [&>*:first-child:not(:last-child)]:rounded-e-none [&>*:first-child:not(:last-child)]:before:rounded-e-none [&>*:last-child:not(:first-child)]:rounded-s-none [&>*:last-child:not(:first-child)]:before:rounded-s-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child):not(:last-child)]:before:rounded-none",
+		vertical: "flex-col [&>*:not(:first-child)]:-mt-px [&>*:first-child:not(:last-child)]:rounded-b-none [&>*:first-child:not(:last-child)]:before:rounded-b-none [&>*:last-child:not(:first-child)]:rounded-t-none [&>*:last-child:not(:first-child)]:before:rounded-t-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child):not(:last-child)]:before:rounded-none"
+	} }
+});
+function ButtonGroup({ className, orientation, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "button-group",
+		"data-orientation": orientation,
+		className: cn(buttonGroupVariants({ orientation }), className),
+		...props
+	});
+}
+function ButtonGroupText({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("flex items-center gap-2 rounded-lg border border-input bg-muted/50 px-[calc(--spacing(3)-1px)] text-base font-medium text-muted-foreground sm:text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0", className),
+		"data-slot": "button-group-text"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "button-group-separator",
+		orientation,
+		className: cn("relative self-stretch bg-border", orientation === "vertical" ? "mx-px my-1.5 w-px h-auto" : "my-px mx-1.5 h-px w-auto", className),
+		...props
+	});
+}
+//#endregion
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };

package/dist/components/button-split.d.ts

@@ -0,0 +1,19 @@
+import { Button, buttonVariants } from "./button.js";
+import { GroupSeparator } from "./group.js";
+import { Popover, PopoverContent as PopoverPopup, PopoverTrigger } from "./popover.js";
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+//#region src/components/button-split.d.ts
+export interface ButtonSplitProps extends Omit<React$1.ComponentPropsWithoutRef<typeof Popover>, "children"> {
+  children: React$1.ReactNode;
+  variant?: VariantProps<typeof buttonVariants>["variant"];
+  size?: VariantProps<typeof buttonVariants>["size"];
+  className?: string;
+}
+declare function ButtonSplit({ variant, size, className, children, ...props }: ButtonSplitProps): React$1.JSX.Element;
+declare function ButtonSplitAction({ className, render, ...props }: React$1.ComponentProps<typeof Button>): React$1.JSX.Element;
+declare function ButtonSplitSeparator({ className, ...props }: React$1.ComponentProps<typeof GroupSeparator>): React$1.JSX.Element;
+declare function ButtonSplitTrigger({ className, render, children, ...props }: React$1.ComponentProps<typeof PopoverTrigger>): React$1.JSX.Element;
+declare function ButtonSplitContent({ className, sideOffset, hideArrow, children, ...props }: React$1.ComponentProps<typeof PopoverPopup>): React$1.JSX.Element;
+//#endregion
+export { ButtonSplit, ButtonSplitAction, ButtonSplitContent, ButtonSplitSeparator, ButtonSplitTrigger };