@ctrl-ui/react 0.8.0

package/dist/ui/alert-dialog.js

@@ -0,0 +1,100 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinEffects, skinId } from "../skin.js";
+import { Button } from "./button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
+//#region src/ui/alert-dialog.tsx
+function AlertDialog(props) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Root, { ...props });
+}
+function AlertDialogTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
+		"data-control-ui": "alert-dialog",
+		"data-popup-kind": "alert-dialog",
+		"data-slot": "trigger",
+		className,
+		...props
+	});
+}
+function AlertDialogClose({ className, children, variant = "surface", size = "sm", tone = "neutral", iconOnly, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Close, {
+		...props,
+		render: (renderProps) => /* @__PURE__ */ jsx(Button, {
+			...renderProps,
+			"data-popup-part": "close",
+			variant,
+			size,
+			tone,
+			iconOnly,
+			className: cn(renderProps.className, className),
+			children
+		})
+	});
+}
+function AlertDialogContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(AlertDialog$1.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog$1.Backdrop, {
+		"data-control-ui": "alert-dialog",
+		"data-popup-kind": "alert-dialog",
+		"data-slot": "backdrop",
+		"data-control-family": "popup",
+		"data-popup-part": "backdrop",
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		className: "fixed inset-0 z-[70]"
+	}), /* @__PURE__ */ jsx(AlertDialog$1.Popup, {
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		"data-control-ui": "alert-dialog",
+		"data-popup-kind": "alert-dialog",
+		"data-slot": "content",
+		"data-control-family": "popup",
+		"data-popup-part": "surface",
+		"data-surface": "modal",
+		className: cn("fixed left-1/2 top-[12vh] z-[71] grid w-[calc(100%-2rem)] max-w-md -translate-x-1/2 p-0", className),
+		...props,
+		children
+	})] });
+}
+function AlertDialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "alert-dialog",
+		"data-control-family": "popup",
+		"data-popup-kind": "alert-dialog",
+		"data-slot": "header",
+		className: cn("grid", className),
+		...props
+	});
+}
+function AlertDialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "alert-dialog",
+		"data-control-family": "popup",
+		"data-popup-kind": "alert-dialog",
+		"data-slot": "footer",
+		className: cn("flex flex-col-reverse sm:flex-row sm:justify-end", className),
+		...props
+	});
+}
+function AlertDialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
+		"data-control-ui": "alert-dialog",
+		"data-control-family": "popup",
+		"data-popup-kind": "alert-dialog",
+		"data-slot": "title",
+		className,
+		...props
+	});
+}
+function AlertDialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Description, {
+		"data-control-ui": "alert-dialog",
+		"data-control-family": "popup",
+		"data-popup-kind": "alert-dialog",
+		"data-slot": "description",
+		className,
+		...props
+	});
+}
+//#endregion
+export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger };

package/dist/ui/alert.d.ts

@@ -0,0 +1,21 @@
+import { AlertKnobStyle } from "../knob-contracts/alert-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/alert.d.ts
+declare const alertVariants: readonly ["default", "destructive"];
+type AlertVariant = (typeof alertVariants)[number];
+type AlertProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & AlertKnobStyle;
+} & {
+  variant?: AlertVariant;
+};
+type AlertTitleProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & AlertKnobStyle;
+};
+type AlertDescriptionProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & AlertKnobStyle;
+};
+declare function Alert({ variant, className, ...props }: AlertProps): import("react").JSX.Element;
+declare function AlertTitle({ className, ...props }: AlertTitleProps): import("react").JSX.Element;
+declare function AlertDescription({ className, ...props }: AlertDescriptionProps): import("react").JSX.Element;
+//#endregion
+export { Alert, AlertDescription, AlertDescriptionProps, AlertProps, AlertTitle, AlertTitleProps, AlertVariant, alertVariants };

package/dist/ui/alert.js

@@ -0,0 +1,36 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/alert.tsx
+const alertVariants = ["default", "destructive"];
+function Alert({ variant = "default", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		"data-control-ui": "alert",
+		"data-control-family": "alert",
+		"data-slot": "root",
+		"data-surface": "panel",
+		"data-variant": variant,
+		className: cn("relative grid w-full grid-cols-[0_1fr] items-start has-[>svg]:grid-cols-[1rem_1fr] [&>svg]:size-4", className),
+		...props
+	});
+}
+function AlertTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "alert",
+		"data-control-family": "alert",
+		"data-slot": "title",
+		className: cn("col-start-2 line-clamp-1", className),
+		...props
+	});
+}
+function AlertDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "alert",
+		"data-control-family": "alert",
+		"data-slot": "description",
+		className: cn("col-start-2 grid justify-items-start", className),
+		...props
+	});
+}
+//#endregion
+export { Alert, AlertDescription, AlertTitle, alertVariants };

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

@@ -0,0 +1,8 @@
+import { ComponentProps } from "react";
+//#region src/ui/aspect-ratio.d.ts
+type AspectRatioProps = ComponentProps<"div"> & {
+  ratio?: number;
+};
+declare function AspectRatio({ ratio, className, style, ...props }: AspectRatioProps): import("react").JSX.Element;
+//#endregion
+export { AspectRatio, AspectRatioProps };

package/dist/ui/aspect-ratio.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/aspect-ratio.tsx
+const DEFAULT_ASPECT_RATIO = 16 / 9;
+function AspectRatio({ ratio = DEFAULT_ASPECT_RATIO, className, style, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "aspect-ratio",
+		"data-slot": "root",
+		style: {
+			aspectRatio: ratio,
+			...style
+		},
+		className,
+		...props
+	});
+}
+//#endregion
+export { AspectRatio };

package/dist/ui/autocomplete.d.ts

@@ -0,0 +1,70 @@
+import { OpenChangeEventDetails } from "../control-props.js";
+import { ControlSize } from "../control-variants.js";
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/ui/autocomplete.d.ts
+type AutocompleteProps<Value = string> = {
+  children?: ReactNode;
+  items?: readonly Value[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean, eventDetails: OpenChangeEventDetails) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  name?: string;
+  mode?: "list" | "both" | "inline" | "none";
+  autoHighlight?: boolean | "always";
+  limit?: number;
+  openOnInputClick?: boolean;
+  filter?: ((itemValue: Value, query: string, itemToString?: (itemValue: Value) => string) => boolean) | null;
+  itemToStringValue?: (itemValue: Value) => string;
+};
+type AutocompleteInputProps = Omit<Omit<ComponentProps<"input">, "size">, "style"> & {
+  style?: CSSProperties & FieldKnobStyle;
+} & {
+  size?: ControlSize;
+};
+type AutocompleteClearProps = ComponentProps<"button"> & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+type AutocompleteContentProps = Omit<ComponentProps<"div"> & {
+  sideOffset?: number;
+}, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type AutocompleteListProps<Value = unknown> = Omit<ComponentProps<"div">, "children"> & {
+  children?: ReactNode | ((item: Value, index: number) => ReactNode);
+} & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type AutocompleteItemProps<Value = unknown> = Omit<Omit<ComponentProps<"div">, "value"> & {
+  value?: Value;
+  disabled?: boolean;
+}, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+type AutocompleteEmptyProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+type AutocompleteGroupProps = ComponentProps<"div"> & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+type AutocompleteGroupLabelProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & PopupKnobStyle;
+};
+declare function Autocomplete<Value = string>({ children, autoHighlight, ...props }: AutocompleteProps<Value>): import("react").JSX.Element;
+declare function AutocompleteClear({ className, children, ...props }: AutocompleteClearProps): import("react").JSX.Element;
+declare function AutocompleteInput({ size, className, ...props }: AutocompleteInputProps): import("react").JSX.Element;
+declare function AutocompleteContent({ className, children, sideOffset, ...props }: AutocompleteContentProps): import("react").JSX.Element;
+declare function AutocompleteList<Value = unknown>({ className, children, ...props }: AutocompleteListProps<Value>): import("react").JSX.Element;
+declare function AutocompleteEmpty({ className, children, ...props }: AutocompleteEmptyProps): import("react").JSX.Element;
+declare function AutocompleteItem<Value = unknown>({ className, children, disabled, ...props }: AutocompleteItemProps<Value>): import("react").JSX.Element;
+declare function AutocompleteGroup({ className, children, ...props }: AutocompleteGroupProps): import("react").JSX.Element;
+declare function AutocompleteGroupLabel({ className, children, ...props }: AutocompleteGroupLabelProps): import("react").JSX.Element;
+//#endregion
+export { Autocomplete, AutocompleteClear, AutocompleteClearProps, AutocompleteContent, AutocompleteContentProps, AutocompleteEmpty, AutocompleteEmptyProps, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteGroupLabelProps, AutocompleteGroupProps, AutocompleteInput, AutocompleteInputProps, AutocompleteItem, AutocompleteItemProps, AutocompleteList, AutocompleteListProps, AutocompleteProps };

package/dist/ui/autocomplete.js

@@ -0,0 +1,150 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinEffects, skinId } from "../skin.js";
+import { ScrollArea } from "./scroll-area.js";
+import { popupItemStructureClasses } from "../surface-variants.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Autocomplete as Autocomplete$1 } from "@base-ui/react/autocomplete";
+//#region src/ui/autocomplete.tsx
+function Autocomplete({ children, autoHighlight = true, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Root, {
+		autoHighlight,
+		...props,
+		children
+	});
+}
+function AutocompleteClear({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Clear, {
+		"data-control-ui": "autocomplete",
+		"data-control-family": "field",
+		"data-field-kind": "autocomplete",
+		"data-slot": "clear",
+		"aria-label": "Clear search",
+		className: cn("inline-flex size-6 shrink-0 cursor-pointer items-center justify-center disabled:cursor-not-allowed", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 12 12",
+			className: "size-3",
+			"aria-hidden": "true",
+			fill: "none",
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M3 3 9 9M9 3 3 9",
+				stroke: "currentColor",
+				strokeWidth: "1.3",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		})
+	});
+}
+function AutocompleteInput({ size = "md", className, ...props }) {
+	return /* @__PURE__ */ jsxs(Autocomplete$1.InputGroup, {
+		"data-control-ui": "autocomplete",
+		"data-field-kind": "autocomplete",
+		"data-slot": "root",
+		className: "relative flex w-full items-center",
+		children: [/* @__PURE__ */ jsx(Autocomplete$1.Input, {
+			"data-control-ui": "autocomplete",
+			"data-field-kind": "autocomplete",
+			"data-slot": "input",
+			"data-control": "true",
+			"data-control-family": "field",
+			"data-size": size,
+			className: cn("w-full min-w-0 disabled:cursor-not-allowed", className),
+			...props
+		}), /* @__PURE__ */ jsx(AutocompleteClear, { className: "absolute right-1.5 top-1/2 -translate-y-1/2" })]
+	});
+}
+function AutocompleteContent({ className, children, sideOffset = 6, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Portal, { children: /* @__PURE__ */ jsx(Autocomplete$1.Positioner, {
+		"data-control-ui": "autocomplete",
+		"data-popup-kind": "autocomplete",
+		"data-control-family": "popup",
+		"data-slot": "positioner",
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		side: "bottom",
+		align: "start",
+		sideOffset,
+		className: "z-[80]",
+		children: /* @__PURE__ */ jsx(Autocomplete$1.Popup, {
+			"data-control-ui": "autocomplete",
+			"data-popup-kind": "autocomplete",
+			"data-control-family": "popup",
+			"data-slot": "content",
+			"data-surface": "floating",
+			"data-popup-part": "list-surface",
+			className: cn("w-[var(--anchor-width)] max-w-[var(--available-width)]", className),
+			...props,
+			children
+		})
+	}) });
+}
+function AutocompleteList({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		className: "w-full",
+		maxHeight: "min(18rem, var(--available-height))",
+		children: /* @__PURE__ */ jsx(Autocomplete$1.List, {
+			"data-control-ui": "autocomplete",
+			"data-popup-kind": "autocomplete",
+			"data-slot": "list",
+			"data-control-family": "popup",
+			"data-popup-part": "list-content",
+			className,
+			...props,
+			children
+		})
+	});
+}
+function AutocompleteEmpty({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Empty, {
+		"data-control-ui": "autocomplete",
+		"data-control-family": "popup",
+		"data-popup-kind": "autocomplete",
+		"data-slot": "empty",
+		className: cn("px-[calc(var(--padding-x)*0.5)] empty:h-0 empty:overflow-hidden empty:p-0", className),
+		...props,
+		children
+	});
+}
+function AutocompleteItem({ className, children, disabled, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Item, {
+		"data-control-ui": "autocomplete",
+		"data-popup-kind": "autocomplete",
+		"data-control-family": "popup",
+		"data-slot": "item",
+		"data-popup-part": "item",
+		disabled,
+		className: cn(popupItemStructureClasses, className),
+		...props,
+		children: /* @__PURE__ */ jsx("span", {
+			className: "flex min-w-0 flex-1 items-center truncate",
+			children
+		})
+	});
+}
+function AutocompleteGroup({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.Group, {
+		"data-control-ui": "autocomplete",
+		"data-control-family": "field",
+		"data-field-kind": "autocomplete",
+		"data-slot": "group",
+		className,
+		...props,
+		children
+	});
+}
+function AutocompleteGroupLabel({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Autocomplete$1.GroupLabel, {
+		"data-control-ui": "autocomplete",
+		"data-popup-kind": "autocomplete",
+		"data-slot": "group-label",
+		"data-control-family": "popup",
+		"data-popup-part": "label",
+		className: cn("px-[calc(var(--padding-x)*0.5)]", className),
+		...props,
+		children
+	});
+}
+//#endregion
+export { Autocomplete, AutocompleteClear, AutocompleteContent, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteItem, AutocompleteList };

package/dist/ui/avatar.d.ts

@@ -0,0 +1,24 @@
+import { AvatarKnobStyle } from "../knob-contracts/avatar-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/avatar.d.ts
+type AvatarProps = Omit<ComponentProps<"span">, "style"> & {
+  style?: CSSProperties & AvatarKnobStyle;
+};
+type AvatarGroupProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & AvatarKnobStyle;
+};
+type AvatarImageProps = ComponentProps<"img"> & {
+  onLoadingStatusChange?: (status: "idle" | "loading" | "loaded" | "error") => void;
+} & {
+  style?: CSSProperties & AvatarKnobStyle;
+};
+type AvatarFallbackProps = Omit<ComponentProps<"span">, "style"> & {
+  delay?: number;
+  style?: CSSProperties & AvatarKnobStyle;
+};
+declare function Avatar({ className, ...props }: AvatarProps): import("react").JSX.Element;
+declare function AvatarGroup({ className, ...props }: AvatarGroupProps): import("react").JSX.Element;
+declare function AvatarImage({ className, ...props }: AvatarImageProps): import("react").JSX.Element;
+declare function AvatarFallback({ className, ...props }: AvatarFallbackProps): import("react").JSX.Element;
+//#endregion
+export { Avatar, AvatarFallback, AvatarFallbackProps, AvatarGroup, AvatarGroupProps, AvatarImage, AvatarImageProps, AvatarProps };

package/dist/ui/avatar.js

@@ -0,0 +1,44 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+//#region src/ui/avatar.tsx
+function Avatar({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Root, {
+		"data-control-ui": "avatar",
+		"data-control-family": "avatar",
+		"data-slot": "root",
+		className: cn("relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden align-middle", className),
+		...props
+	});
+}
+function AvatarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-control-ui": "avatar",
+		"data-control-family": "avatar",
+		"data-slot": "group",
+		className: cn("isolate inline-flex items-center -space-x-2", className),
+		...props
+	});
+}
+function AvatarImage({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Image, {
+		"data-control-ui": "avatar",
+		"data-control-family": "avatar",
+		"data-slot": "image",
+		className: cn("size-full object-cover", className),
+		...props
+	});
+}
+function AvatarFallback({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
+		"data-control-ui": "avatar",
+		"data-control-family": "avatar",
+		"data-slot": "fallback",
+		className: cn("flex size-full items-center justify-center", className),
+		...props
+	});
+}
+//#endregion
+export { Avatar, AvatarFallback, AvatarGroup, AvatarImage };

package/dist/ui/badge.d.ts

@@ -0,0 +1,20 @@
+import { RenderProp } from "../control-props.js";
+import { BadgeKnobStyle } from "../knob-contracts/badge-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/badge.d.ts
+declare const badgeVariants: readonly ["default", "outline"];
+type BadgeVariant = (typeof badgeVariants)[number];
+declare const badgeSizes: readonly ["sm", "md"];
+type BadgeSize = (typeof badgeSizes)[number];
+declare const BADGE_COLORS: readonly ["neutral", "red", "orange", "yellow", "green", "blue", "purple", "pink"];
+type BadgeColor = (typeof BADGE_COLORS)[number];
+type BadgeProps = Omit<ComponentProps<"span">, "style"> & {
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  color?: BadgeColor;
+  render?: RenderProp<ComponentProps<"span">>;
+  style?: CSSProperties & BadgeKnobStyle;
+};
+declare function Badge({ variant, size, color, render, className, children, ...props }: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { BADGE_COLORS, Badge, BadgeColor, BadgeProps, BadgeSize, BadgeVariant, badgeSizes, badgeVariants };

package/dist/ui/badge.js

@@ -0,0 +1,36 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/ui/badge.tsx
+const badgeVariants = ["default", "outline"];
+const badgeSizes = ["sm", "md"];
+const BADGE_COLORS = [
+	"neutral",
+	"red",
+	"orange",
+	"yellow",
+	"green",
+	"blue",
+	"purple",
+	"pink"
+];
+function Badge({ variant = "default", size = "md", color, render, className, children, ...props }) {
+	const resolvedColor = color ?? "neutral";
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "badge",
+			"data-control-family": "badge",
+			"data-slot": "root",
+			"data-variant": variant,
+			"data-size": size,
+			"data-color": resolvedColor,
+			className: cn("inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap border font-medium [&>svg]:pointer-events-none [&>svg]:size-3", size === "sm" ? "text-micro" : "text-caption", className),
+			children
+		}
+	});
+}
+//#endregion
+export { BADGE_COLORS, Badge, badgeSizes, badgeVariants };

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

@@ -0,0 +1,24 @@
+import { ControlSize } from "../control-variants.js";
+import { ButtonGroupKnobStyle } from "../knob-contracts/button-group-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/button-group.d.ts
+type ButtonGroupTextProps = Omit<ComponentProps<"div"> & {
+  size?: ControlSize;
+}, "style"> & {
+  style?: CSSProperties & ButtonGroupKnobStyle;
+};
+type ButtonGroupProps = ComponentProps<"div"> & {
+  orientation?: "horizontal" | "vertical";
+} & {
+  style?: CSSProperties & ButtonGroupKnobStyle;
+};
+type ButtonGroupSeparatorProps = Omit<ComponentProps<"div"> & {
+  orientation?: "horizontal" | "vertical";
+}, "style"> & {
+  style?: CSSProperties & ButtonGroupKnobStyle;
+};
+declare function ButtonGroup({ orientation, className, ...props }: ButtonGroupProps): import("react").JSX.Element;
+declare function ButtonGroupText({ size, className, ...props }: ButtonGroupTextProps): import("react").JSX.Element;
+declare function ButtonGroupSeparator({ orientation, className, ...props }: ButtonGroupSeparatorProps): import("react").JSX.Element;
+//#endregion
+export { ButtonGroup, ButtonGroupProps, ButtonGroupSeparator, ButtonGroupSeparatorProps, ButtonGroupText, ButtonGroupTextProps };

package/dist/ui/button-group.js

@@ -0,0 +1,45 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/ui/button-group.tsx
+const buttonGroupVariant = cva("inline-flex w-fit items-stretch [&>*]:relative [&>*:focus-within:not([data-active=true])]:z-[1] [&>*[data-active=true]]:z-[2] [&>*[data-active=true]:focus-within]:z-[3]", {
+	variants: { orientation: {
+		horizontal: "flex-row [&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none",
+		vertical: "flex-col [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none"
+	} },
+	defaultVariants: { orientation: "horizontal" }
+});
+function ButtonGroup({ orientation = "horizontal", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-control-ui": "button-group",
+		"data-control-family": "button-group",
+		"data-slot": "root",
+		"data-orientation": orientation,
+		className: cn(buttonGroupVariant({ orientation }), className),
+		...props
+	});
+}
+function ButtonGroupText({ size = "sm", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "button-group",
+		"data-control-family": "button-group",
+		"data-slot": "text",
+		"data-size": size,
+		className: cn("inline-flex items-center whitespace-nowrap [&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0", className),
+		...props
+	});
+}
+function ButtonGroupSeparator({ orientation = "vertical", className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		"data-control-ui": "button-group",
+		"data-control-family": "button-group",
+		"data-slot": "separator",
+		"data-orientation": orientation,
+		className: cn("shrink-0 self-stretch", orientation === "vertical" ? "w-px" : "h-px w-full", className),
+		...props
+	});
+}
+//#endregion
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };

package/dist/ui/button.d.ts

@@ -0,0 +1,36 @@
+import { RenderProp } from "../control-props.js";
+import { ControlSize, ControlTone, ControlVariant } from "../control-variants.js";
+import { ButtonKnobStyle } from "../knob-contracts/button-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/button.d.ts
+type ButtonVariant = ControlVariant;
+type ButtonSize = ControlSize;
+type ButtonTone = ControlTone;
+declare const buttonShapes: readonly ["default", "circle"];
+type ButtonShape = (typeof buttonShapes)[number];
+type ButtonAppearanceProps = {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  tone?: ButtonTone;
+  active?: boolean;
+  iconOnly?: boolean;
+  shape?: ButtonShape;
+  style?: CSSProperties & ButtonKnobStyle;
+};
+type ButtonProps = ComponentProps<"button"> & ButtonAppearanceProps & {
+  render?: RenderProp<ComponentProps<"button">, {
+    disabled: boolean;
+  }>;
+  nativeButton?: boolean;
+};
+type ButtonLinkProps = ComponentProps<"a"> & ButtonAppearanceProps & {
+  render?: RenderProp<ComponentProps<"a">>;
+};
+type ButtonLabelProps = ComponentProps<"label"> & ButtonAppearanceProps;
+declare const buttonStructureClasses = "relative isolate inline-flex shrink-0 items-center justify-center overflow-visible whitespace-nowrap";
+declare const buttonContentClasses = "relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]";
+declare function Button({ variant, size, tone, active, iconOnly, shape, type, disabled, render, nativeButton, className, children, ...props }: ButtonProps): import("react").JSX.Element;
+declare function ButtonLink({ variant, size, tone, active, iconOnly, shape, render, className, children, ...props }: ButtonLinkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function ButtonLabel({ variant, size, tone, active, iconOnly, shape, className, children, ...props }: ButtonLabelProps): import("react").JSX.Element;
+//#endregion
+export { Button, ButtonAppearanceProps, ButtonLabel, ButtonLabelProps, ButtonLink, ButtonLinkProps, ButtonProps, ButtonShape, ButtonSize, ButtonTone, ButtonVariant, buttonContentClasses, buttonShapes, buttonStructureClasses };