@ctrl-ui/react 0.8.0

package/dist/ui/infinite-canvas.js

@@ -0,0 +1,278 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import { createContext, use, useEffect, useEffectEvent, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MinusIcon, PlusIcon } from "lucide-react";
+//#region src/ui/infinite-canvas.tsx
+const DEFAULT_TRANSFORM = {
+	x: 0,
+	y: 0,
+	scale: 1
+};
+const DEFAULT_MIN_SCALE = .35;
+const DEFAULT_MAX_SCALE = 2.5;
+const KEYBOARD_PAN_STEP = 32;
+const GRID_SIZE = 24;
+const KEYBOARD_PAN_DIRECTIONS = {
+	ArrowLeft: {
+		x: -1,
+		y: 0
+	},
+	ArrowRight: {
+		x: 1,
+		y: 0
+	},
+	ArrowUp: {
+		x: 0,
+		y: -1
+	},
+	ArrowDown: {
+		x: 0,
+		y: 1
+	}
+};
+const InfiniteCanvasContext = createContext(null);
+function clampScale(scale, minScale, maxScale) {
+	return Math.min(Math.max(scale, minScale), maxScale);
+}
+function zoomAroundPoint(transform, nextScale, point) {
+	const worldX = (point.x - transform.x) / transform.scale;
+	const worldY = (point.y - transform.y) / transform.scale;
+	return {
+		x: point.x - worldX * nextScale,
+		y: point.y - worldY * nextScale,
+		scale: nextScale
+	};
+}
+function panFromWheel(transform, event, viewportHeight) {
+	let deltaMultiplier = 1;
+	if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) deltaMultiplier = 16;
+	else if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) deltaMultiplier = viewportHeight;
+	const horizontalDelta = event.shiftKey && event.deltaX === 0 ? event.deltaY : event.deltaX;
+	const verticalDelta = event.shiftKey && event.deltaX === 0 ? 0 : event.deltaY;
+	return {
+		x: transform.x - horizontalDelta * deltaMultiplier,
+		y: transform.y - verticalDelta * deltaMultiplier,
+		scale: transform.scale
+	};
+}
+function useInfiniteCanvas() {
+	const context = use(InfiniteCanvasContext);
+	if (!context) throw new Error("useInfiniteCanvas must be used within InfiniteCanvas");
+	return context;
+}
+function InfiniteCanvas({ transform: controlledTransform, defaultTransform = DEFAULT_TRANSFORM, onTransformChange, minScale: minScaleProp = DEFAULT_MIN_SCALE, maxScale: maxScaleProp = DEFAULT_MAX_SCALE, className, children, style, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onWheel, onKeyDown, "aria-label": ariaLabel = "Infinite canvas", ...props }) {
+	const minScale = Math.max(.1, minScaleProp);
+	const maxScale = Math.max(minScale, maxScaleProp);
+	const [uncontrolledTransform, setUncontrolledTransform] = useState(defaultTransform);
+	const [panning, setPanning] = useState(false);
+	const panRef = useRef(null);
+	const rootRef = useRef(null);
+	const transform = controlledTransform ?? uncontrolledTransform;
+	const transformRef = useRef(transform);
+	useEffect(() => {
+		transformRef.current = transform;
+	}, [transform]);
+	function commitTransform(next, reason) {
+		const bounded = {
+			...next,
+			scale: clampScale(next.scale, minScale, maxScale)
+		};
+		transformRef.current = bounded;
+		if (controlledTransform === void 0) setUncontrolledTransform(bounded);
+		onTransformChange?.(bounded, { reason });
+	}
+	function zoomBy(factor, reason) {
+		const currentTransform = transformRef.current;
+		const nextScale = clampScale(currentTransform.scale * factor, minScale, maxScale);
+		const root = rootRef.current;
+		commitTransform(zoomAroundPoint(currentTransform, nextScale, root ? {
+			x: root.clientWidth / 2,
+			y: root.clientHeight / 2
+		} : {
+			x: 0,
+			y: 0
+		}), reason);
+	}
+	function reset(reason) {
+		commitTransform(defaultTransform, reason);
+	}
+	function beginPan(event) {
+		onPointerDown?.(event);
+		if (event.defaultPrevented || event.target !== event.currentTarget || !event.isPrimary || event.button !== 0) return;
+		event.preventDefault();
+		event.currentTarget.setPointerCapture(event.pointerId);
+		panRef.current = {
+			pointerId: event.pointerId,
+			startPointer: {
+				x: event.clientX,
+				y: event.clientY
+			},
+			startTransform: transformRef.current
+		};
+		setPanning(true);
+	}
+	function updatePan(event) {
+		onPointerMove?.(event);
+		if (event.defaultPrevented) return;
+		const pan = panRef.current;
+		if (!pan || pan.pointerId !== event.pointerId) return;
+		commitTransform({
+			x: pan.startTransform.x + event.clientX - pan.startPointer.x,
+			y: pan.startTransform.y + event.clientY - pan.startPointer.y,
+			scale: pan.startTransform.scale
+		}, "pointer");
+	}
+	function finishPan(event) {
+		const pan = panRef.current;
+		if (!pan || pan.pointerId !== event.pointerId) return;
+		if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+		panRef.current = null;
+		setPanning(false);
+	}
+	function endPan(event) {
+		onPointerUp?.(event);
+		if (!event.defaultPrevented) finishPan(event);
+	}
+	function cancelPan(event) {
+		onPointerCancel?.(event);
+		if (!event.defaultPrevented) finishPan(event);
+	}
+	const handleWheel = useEffectEvent((event) => {
+		onWheel?.(event);
+		if (event.defaultPrevented) return;
+		const root = rootRef.current;
+		if (!root) return;
+		event.preventDefault();
+		const currentTransform = transformRef.current;
+		if (event.ctrlKey || event.metaKey) {
+			const bounds = root.getBoundingClientRect();
+			const point = {
+				x: event.clientX - bounds.left,
+				y: event.clientY - bounds.top
+			};
+			commitTransform(zoomAroundPoint(currentTransform, clampScale(currentTransform.scale * Math.exp(-event.deltaY * .004), minScale, maxScale), point), "wheel");
+			return;
+		}
+		commitTransform(panFromWheel(currentTransform, event, root.clientHeight), "wheel");
+	});
+	useEffect(() => {
+		const root = rootRef.current;
+		if (!root) return;
+		const listener = (event) => handleWheel(event);
+		root.addEventListener("wheel", listener, { passive: false });
+		return () => root.removeEventListener("wheel", listener);
+	}, []);
+	function moveWithKeyboard(event) {
+		onKeyDown?.(event);
+		if (event.defaultPrevented) return;
+		const currentTransform = transformRef.current;
+		const direction = KEYBOARD_PAN_DIRECTIONS[event.key];
+		if (direction) {
+			const panStep = event.shiftKey ? 96 : KEYBOARD_PAN_STEP;
+			commitTransform({
+				...currentTransform,
+				x: currentTransform.x + direction.x * panStep,
+				y: currentTransform.y + direction.y * panStep
+			}, "keyboard");
+		} else if (event.key === "+" || event.key === "=") zoomBy(1.15, "keyboard");
+		else if (event.key === "-") zoomBy(1 / 1.15, "keyboard");
+		else if (event.key === "0") reset("keyboard");
+		else return;
+		event.preventDefault();
+	}
+	const context = {
+		transform,
+		minScale,
+		maxScale,
+		reset,
+		zoomBy
+	};
+	const canvasStyle = {
+		...style,
+		backgroundPosition: `${transform.x}px ${transform.y}px`,
+		backgroundSize: `${GRID_SIZE * transform.scale}px ${GRID_SIZE * transform.scale}px`
+	};
+	return /* @__PURE__ */ jsx(InfiniteCanvasContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("section", {
+			ref: rootRef,
+			...props,
+			"data-control-ui": "infinite-canvas",
+			"data-control-family": "infinite-canvas",
+			"data-slot": "root",
+			"data-panning": panning || void 0,
+			"aria-label": ariaLabel,
+			role: "application",
+			"aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown + - 0",
+			tabIndex: 0,
+			className: cn("relative isolate overflow-hidden overscroll-contain touch-none select-none data-panning:cursor-grabbing", className),
+			style: canvasStyle,
+			onPointerDown: beginPan,
+			onPointerMove: updatePan,
+			onPointerUp: endPan,
+			onPointerCancel: cancelPan,
+			onKeyDown: moveWithKeyboard,
+			children
+		})
+	});
+}
+function InfiniteCanvasContent({ className, style, ...props }) {
+	const { transform } = useInfiniteCanvas();
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		"data-control-ui": "infinite-canvas",
+		"data-control-family": "infinite-canvas",
+		"data-slot": "content",
+		"data-scale": transform.scale,
+		className: cn("pointer-events-none absolute top-0 left-0 h-0 w-0 transform-gpu will-change-transform [&>*]:pointer-events-auto", className),
+		style: {
+			...style,
+			transform: `translate3d(${transform.x}px, ${transform.y}px, 0) scale(${transform.scale})`
+		}
+	});
+}
+function InfiniteCanvasControls({ className, ...props }) {
+	const canvas = useInfiniteCanvas();
+	const percentage = Math.round(canvas.transform.scale * 100);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "infinite-canvas",
+		"data-control-family": "infinite-canvas",
+		"data-slot": "controls",
+		className: cn("absolute right-3 bottom-3 z-40 flex items-center", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "sm",
+				variant: "ghost",
+				iconOnly: true,
+				disabled: canvas.transform.scale <= canvas.minScale,
+				"aria-label": "Zoom out",
+				onClick: () => canvas.zoomBy(1 / 1.2, "control"),
+				children: /* @__PURE__ */ jsx(MinusIcon, {})
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				size: "sm",
+				variant: "ghost",
+				"aria-label": `Reset canvas zoom, currently ${percentage}%`,
+				onClick: () => canvas.reset("control"),
+				children: [percentage, "%"]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				type: "button",
+				size: "sm",
+				variant: "ghost",
+				iconOnly: true,
+				disabled: canvas.transform.scale >= canvas.maxScale,
+				"aria-label": "Zoom in",
+				onClick: () => canvas.zoomBy(1.2, "control"),
+				children: /* @__PURE__ */ jsx(PlusIcon, {})
+			})
+		]
+	});
+}
+//#endregion
+export { InfiniteCanvas, InfiniteCanvasContent, InfiniteCanvasControls, useInfiniteCanvas };

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

@@ -0,0 +1,21 @@
+import { RenderProp } from "../control-props.js";
+import { ControlSize } from "../control-variants.js";
+import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/input-group.d.ts
+type InputGroupProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & FieldKnobStyle;
+} & {
+  render?: RenderProp<ComponentProps<"div">>;
+  size?: ControlSize;
+};
+type InputGroupAddonProps = ComponentProps<"span"> & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+declare function InputGroup({ size, className, render, children, ...props }: InputGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function InputGroupAddon({ className, ...props }: InputGroupAddonProps): import("react").JSX.Element;
+declare function InputGroupInput({ className, ...props }: ComponentProps<"input"> & {
+  style?: CSSProperties & FieldKnobStyle;
+}): import("react").JSX.Element;
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupAddonProps, InputGroupInput, InputGroupProps };

package/dist/ui/input-group.js

@@ -0,0 +1,44 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/input-group.tsx
+function InputGroup({ size = "md", className, render, children, ...props }) {
+	const classes = cn("flex min-w-0 w-full items-center overflow-hidden", className);
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "input-group",
+			"data-slot": "root",
+			"data-control-family": "field",
+			"data-control": "true",
+			"data-size": size,
+			className: classes,
+			children
+		}
+	});
+}
+function InputGroupAddon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "input-group",
+		"data-control-family": "field",
+		"data-field-kind": "input-group",
+		"data-slot": "addon",
+		className: cn("inline-flex shrink-0 items-center", className),
+		...props
+	});
+}
+function InputGroupInput({ className, ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		"data-control-ui": "input-group",
+		"data-control-family": "field",
+		"data-field-kind": "input-group",
+		"data-slot": "input",
+		className: cn("h-full min-w-0 flex-1", className),
+		...props
+	});
+}
+//#endregion
+export { InputGroup, InputGroupAddon, InputGroupInput };

package/dist/ui/input-otp.d.ts

@@ -0,0 +1,38 @@
+import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/ui/input-otp.d.ts
+type InputOTPProps = {
+  length?: number;
+  separator?: boolean;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  disabled?: boolean;
+  readOnly?: boolean;
+  required?: boolean;
+  name?: string;
+  mask?: boolean;
+  id?: string;
+  className?: string;
+  children?: ReactNode;
+  "aria-label"?: string;
+  "aria-describedby"?: string;
+} & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+type InputOTPSlotProps = {
+  index: number;
+  length?: number;
+  disabled?: boolean;
+  placeholder?: string;
+  className?: string;
+  style?: CSSProperties & FieldKnobStyle;
+};
+type InputOTPSeparatorProps = ComponentProps<"div"> & {
+  style?: CSSProperties & FieldKnobStyle;
+};
+declare function InputOTPSlot({ index, length, className, ...props }: InputOTPSlotProps): import("react").JSX.Element;
+declare function InputOTPSeparator({ className, ...props }: InputOTPSeparatorProps): import("react").JSX.Element;
+declare function InputOTP({ length, separator, className, children, ...props }: InputOTPProps): import("react").JSX.Element;
+//#endregion
+export { InputOTP, InputOTPProps, InputOTPSeparator, InputOTPSeparatorProps, InputOTPSlot, InputOTPSlotProps };

package/dist/ui/input-otp.js

@@ -0,0 +1,45 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { OTPField } from "@base-ui/react/otp-field";
+//#region src/ui/input-otp.tsx
+function InputOTPSlot({ index, length, className, ...props }) {
+	return /* @__PURE__ */ jsx(OTPField.Input, {
+		"data-control-ui": "input-otp",
+		"data-field-kind": "input-otp",
+		"data-slot": "slot",
+		"data-control-family": "field",
+		"data-control": "true",
+		"aria-label": length ? `Character ${index + 1} of ${length}` : `Character ${index + 1}`,
+		className: cn("relative flex size-[var(--control-h-md)] items-center justify-center", className),
+		...props
+	});
+}
+function InputOTPSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(OTPField.Separator, {
+		"data-control-ui": "input-otp",
+		"data-control-family": "field",
+		"data-field-kind": "input-otp",
+		"data-slot": "separator",
+		className: cn("shrink-0", className),
+		...props
+	});
+}
+function InputOTP({ length = 6, separator = false, className, children, ...props }) {
+	return /* @__PURE__ */ jsx(OTPField.Root, {
+		"data-control-ui": "input-otp",
+		"data-control-family": "field",
+		"data-field-kind": "input-otp",
+		"data-slot": "root",
+		length,
+		className: cn("flex items-center", className),
+		...props,
+		children: children ?? Array.from({ length }, (_, index) => `input-otp-slot-${index}`).map((slotKey, index) => /* @__PURE__ */ jsxs(Fragment, { children: [separator && index === Math.ceil(length / 2) ? /* @__PURE__ */ jsx(InputOTPSeparator, {}) : null, /* @__PURE__ */ jsx(InputOTPSlot, {
+			index,
+			length
+		})] }, slotKey))
+	});
+}
+//#endregion
+export { InputOTP, InputOTPSeparator, InputOTPSlot };

package/dist/ui/input.d.ts

@@ -0,0 +1,12 @@
+import { ControlSize } from "../control-variants.js";
+import { FieldKnobStyle } from "../knob-contracts/field-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/input.d.ts
+type InputProps = Omit<Omit<ComponentProps<"input">, "size">, "style"> & {
+  style?: CSSProperties & FieldKnobStyle;
+} & {
+  size?: ControlSize;
+};
+declare function Input({ size, className, ...props }: InputProps): import("react").JSX.Element;
+//#endregion
+export { Input, InputProps };

package/dist/ui/input.js

@@ -0,0 +1,18 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+import { Input as Input$1 } from "@base-ui/react/input";
+//#region src/ui/input.tsx
+function Input({ size = "md", className, ...props }) {
+	return /* @__PURE__ */ jsx(Input$1, {
+		"data-control-ui": "input",
+		"data-slot": "root",
+		"data-control-family": "field",
+		"data-control": "true",
+		"data-size": size,
+		className: cn("w-full min-w-0", className),
+		...props
+	});
+}
+//#endregion
+export { Input };

package/dist/ui/item.d.ts

@@ -0,0 +1,46 @@
+import { RenderProp } from "../control-props.js";
+import { ItemKnobStyle } from "../knob-contracts/item-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/item.d.ts
+declare const itemVariants: readonly ["default", "outline", "muted"];
+type ItemVariant = (typeof itemVariants)[number];
+type ItemProps = Omit<ComponentProps<"div"> & {
+  variant?: ItemVariant;
+  render?: RenderProp<ComponentProps<"div">>;
+}, "style"> & {
+  style?: CSSProperties & ItemKnobStyle;
+};
+type ItemDescriptionProps = Omit<ComponentProps<"p">, "style"> & {
+  style?: CSSProperties & ItemKnobStyle;
+};
+type ItemFooterProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ItemKnobStyle;
+};
+type ItemMediaProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ItemKnobStyle;
+};
+type ItemTitleProps = Omit<ComponentProps<"div">, "style"> & {
+  style?: CSSProperties & ItemKnobStyle;
+};
+type ItemGroupProps = ComponentProps<"div"> & {
+  style?: CSSProperties & ItemKnobStyle;
+};
+type ItemSeparatorProps = ComponentProps<"div">;
+declare function ItemGroup({ className, ...props }: ItemGroupProps): import("react").JSX.Element;
+declare function ItemSeparator({ className, ...props }: ItemSeparatorProps): import("react").JSX.Element;
+declare function Item({ variant, render, className, children, ...props }: ItemProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function ItemMedia({ className, ...props }: ItemMediaProps): import("react").JSX.Element;
+declare function ItemContent({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & ItemKnobStyle;
+}): import("react").JSX.Element;
+declare function ItemTitle({ className, ...props }: ItemTitleProps): import("react").JSX.Element;
+declare function ItemDescription({ className, ...props }: ItemDescriptionProps): import("react").JSX.Element;
+declare function ItemActions({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & ItemKnobStyle;
+}): import("react").JSX.Element;
+declare function ItemHeader({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & ItemKnobStyle;
+}): import("react").JSX.Element;
+declare function ItemFooter({ className, ...props }: ItemFooterProps): import("react").JSX.Element;
+//#endregion
+export { Item, ItemActions, ItemContent, ItemDescription, ItemDescriptionProps, ItemFooter, ItemFooterProps, ItemGroup, ItemGroupProps, ItemHeader, ItemMedia, ItemMediaProps, ItemProps, ItemSeparator, ItemSeparatorProps, ItemTitle, ItemTitleProps, ItemVariant, itemVariants };

package/dist/ui/item.js

@@ -0,0 +1,110 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Separator } from "./separator.js";
+import { useRender } from "@base-ui/react/use-render";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/item.tsx
+const itemVariants = [
+	"default",
+	"outline",
+	"muted"
+];
+function ItemGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "list",
+		"data-control-ui": "item",
+		"data-control-family": "item",
+		"data-slot": "group",
+		className: cn("group/item-group flex flex-col", className),
+		...props
+	});
+}
+function ItemSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-control-ui": "item",
+		"data-slot": "separator",
+		orientation: "horizontal",
+		className: cn("my-0", className),
+		...props
+	});
+}
+function Item({ variant = "default", render, className, children, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "item",
+			"data-control-family": "item",
+			"data-slot": "root",
+			"data-variant": variant,
+			className: cn("flex items-center [&[href]]:cursor-pointer", className),
+			children
+		}
+	});
+}
+function ItemMedia({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "item",
+		"data-control-family": "item",
+		"data-slot": "media",
+		className: cn("flex shrink-0 items-center justify-center self-start [&>svg]:size-5 [&>svg]:shrink-0", className),
+		...props
+	});
+}
+function ItemContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "item",
+		"data-control-family": "item",
+		"data-slot": "content",
+		className: cn("flex min-w-0 flex-1 flex-col", className),
+		...props
+	});
+}
+function ItemTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "item",
+		"data-control-family": "item",
+		"data-slot": "title",
+		className: cn("flex w-fit items-center", className),
+		...props
+	});
+}
+function ItemDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		"data-control-ui": "item",
+		"data-control-family": "item",
+		"data-slot": "description",
+		className: cn("line-clamp-2", className),
+		...props
+	});
+}
+function ItemActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "item",
+		"data-control-family": "item",
+		"data-slot": "actions",
+		className: cn("flex shrink-0 items-center", className),
+		...props
+	});
+}
+function ItemHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "item",
+		"data-control-family": "item",
+		"data-slot": "header",
+		className: cn("flex basis-full items-center justify-between", className),
+		...props
+	});
+}
+function ItemFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "item",
+		"data-control-family": "item",
+		"data-slot": "footer",
+		className: cn("flex basis-full items-center justify-between", className),
+		...props
+	});
+}
+//#endregion
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, itemVariants };

package/dist/ui/kbd.d.ts

@@ -0,0 +1,12 @@
+import { KbdKnobStyle } from "../knob-contracts/kbd-knobs.js";
+import { CSSProperties, ComponentProps } from "react";
+//#region src/ui/kbd.d.ts
+type KbdProps = Omit<ComponentProps<"kbd">, "style"> & {
+  style?: CSSProperties & KbdKnobStyle;
+};
+declare function Kbd({ className, ...props }: KbdProps): import("react").JSX.Element;
+declare function KbdGroup({ className, ...props }: ComponentProps<"span"> & {
+  style?: CSSProperties & KbdKnobStyle;
+}): import("react").JSX.Element;
+//#endregion
+export { Kbd, KbdGroup, KbdProps };

package/dist/ui/kbd.js

@@ -0,0 +1,23 @@
+import { cn } from "../lib/cn.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/kbd.tsx
+function Kbd({ className, ...props }) {
+	return /* @__PURE__ */ jsx("kbd", {
+		"data-control-ui": "kbd",
+		"data-control-family": "kbd",
+		"data-slot": "root",
+		className: cn("inline-flex select-none items-center justify-center", className),
+		...props
+	});
+}
+function KbdGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-control-ui": "kbd",
+		"data-control-family": "kbd",
+		"data-slot": "group",
+		className: cn("inline-flex items-center", className),
+		...props
+	});
+}
+//#endregion
+export { Kbd, KbdGroup };