@codefast/ui 0.3.16-canary.2 → 0.4.0-canary.4

package/dist/components/input-number.mjs

@@ -1,20 +1,22 @@
-"use client";
-import { cn } from "../lib/utils.mjs";
-import { buttonVariants } from "./button.mjs";
+import { buttonVariants } from "../variants/button.mjs";
 import { Spinner } from "./spinner.mjs";
 import { DecrementButton as InputNumberDecrementButton, Field as InputNumberField, IncrementButton as InputNumberIncrementButton, InputNumber as InputNumber$1 } from "../primitives/input-number.mjs";
-import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { inputNumberVariants } from "../variants/input-number.mjs";
+import { ChevronDownIcon, ChevronUpIcon, MinusIcon, PlusIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/input-number.tsx
 /**
 * @since 0.3.16-canary.0
 */
-function InputNumber({ ariaDecrementLabel, ariaIncrementLabel, className, defaultValue, disabled, formatOptions, id, loaderPosition, loading, max, min, onChange, prefix, readOnly, spinner, step, suffix, value, ...props }) {
+function InputNumber({ ariaDecrementLabel, ariaIncrementLabel, className, defaultValue, disabled, formatOptions, id, loaderPosition, loading, max, min, onChange, prefix, readOnly, spinner, step, suffix, value, variant = "stepper", ...props }) {
+	const isSplit = variant === "split";
+	const { decrementButton, field, incrementButton, root, stepper, stepperButton } = inputNumberVariants({ variant });
 	return /* @__PURE__ */ jsxs(InputNumber$1, {
 		ariaDecrementLabel,
 		ariaIncrementLabel,
-		className: cn("group peer flex h-9 w-full grow items-center gap-3 px-3 pr-0", "rounded-lg border border-input", "text-base", "transition", "not-has-disabled:shadow-xs", "focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50", "hover:not-has-disabled:not-focus-within:border-ring/60", "focus-within:has-aria-invalid:ring-destructive/20", "hover:not-has-disabled:not-focus-within:has-aria-invalid:border-destructive/60", "md:text-sm", "dark:bg-input/30", "dark:focus-within:has-aria-invalid:ring-destructive/40", "has-disabled:opacity-50", "has-aria-invalid:border-destructive", "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "[&>svg]:text-muted-foreground", className),
+		className: root({ className }),
 		"data-slot": "input-number",
+		"data-variant": variant,
 		defaultValue,
 		disabled,
 		formatOptions,
@@ -30,34 +32,54 @@ function InputNumber({ ariaDecrementLabel, ariaIncrementLabel, className, defaul
 		suffix,
 		value,
 		onChange,
-		children: [/* @__PURE__ */ jsx(InputNumberField, {
-			autoCapitalize: "none",
-			autoComplete: "off",
-			autoCorrect: "off",
-			className: cn("h-9 w-full min-w-0 px-3 py-1", "rounded-md border border-input", "bg-transparent shadow-xs outline-none", "text-base", "transition-[color,box-shadow]", "selection:bg-primary selection:text-primary-foreground", "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", "placeholder:text-muted-foreground", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "md:text-sm", "dark:bg-input/30", "dark:aria-invalid:ring-destructive/40"),
-			spellCheck: "false",
-			...props
-		}), /* @__PURE__ */ jsxs("div", {
-			className: cn("order-last ml-auto grid h-full shrink-0", "divide-y divide-input border-l border-l-input", "transition", "group-hover:not-group-focus-within:not-has-disabled:border-l-border-ring/60 group-hover:not-group-focus-within:not-has-disabled:divide-border-ring/60", "group-focus-within:divide-ring group-focus-within:border-l-ring", "group-has-aria-invalid:divide-destructive group-has-aria-invalid:border-l-destructive", "group-hover:group-has-aria-invalid:not-group-focus-within:not-has-disabled:divide-destructive/60 group-hover:group-has-aria-invalid:not-group-focus-within:not-has-disabled:border-l-destructive/60", "*:[button]:focus-visible:bg-ring/50 *:[button]:focus-visible:ring-0", "group-has-aria-invalid:*:[button]:focus-visible:bg-destructive/20", "dark:group-has-aria-invalid:*:[button]:focus-visible:bg-destructive/40"),
-			"data-slot": "input-number-buttons",
-			children: [/* @__PURE__ */ jsx(InputNumberIncrementButton, {
-				"aria-label": "Increment",
+		children: [
+			isSplit ? /* @__PURE__ */ jsx(InputNumberDecrementButton, {
+				"aria-label": "Decrement",
 				className: buttonVariants({
-					className: "text-muted-foreground h-auto rounded-none rounded-tr-[calc(var(--radius-lg)-1px)]",
+					className: decrementButton(),
 					variant: "ghost"
 				}),
-				"data-slot": "input-number-increment-button",
-				children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
-			}), /* @__PURE__ */ jsx(InputNumberDecrementButton, {
-				"aria-label": "Decrement",
+				"data-slot": "input-number-decrement-button",
+				children: /* @__PURE__ */ jsx(MinusIcon, {})
+			}) : null,
+			/* @__PURE__ */ jsx(InputNumberField, {
+				autoCapitalize: "none",
+				autoComplete: "off",
+				autoCorrect: "off",
+				className: field(),
+				spellCheck: "false",
+				...props
+			}),
+			isSplit ? /* @__PURE__ */ jsx(InputNumberIncrementButton, {
+				"aria-label": "Increment",
 				className: buttonVariants({
-					className: "text-muted-foreground h-auto rounded-none rounded-br-[calc(var(--radius-lg)-1px)]",
+					className: incrementButton(),
 					variant: "ghost"
 				}),
-				"data-slot": "input-number-decrement-button",
-				children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
-			})]
-		})]
+				"data-slot": "input-number-increment-button",
+				children: /* @__PURE__ */ jsx(PlusIcon, {})
+			}) : /* @__PURE__ */ jsxs("div", {
+				className: stepper(),
+				"data-slot": "input-number-buttons",
+				children: [/* @__PURE__ */ jsx(InputNumberIncrementButton, {
+					"aria-label": "Increment",
+					className: buttonVariants({
+						className: stepperButton(),
+						variant: "ghost"
+					}),
+					"data-slot": "input-number-increment-button",
+					children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-3.5" })
+				}), /* @__PURE__ */ jsx(InputNumberDecrementButton, {
+					"aria-label": "Decrement",
+					className: buttonVariants({
+						className: stepperButton(),
+						variant: "ghost"
+					}),
+					"data-slot": "input-number-decrement-button",
+					children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-3.5" })
+				})]
+			})
+		]
 	});
 }
 //#endregion

package/dist/components/input-otp.mjs

@@ -1,4 +1,3 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
 import { MinusIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -11,9 +10,10 @@ import { OTPInput, OTPInputContext, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS, REGEX
 function InputOTP({ className, containerClassName, ...props }) {
 	return /* @__PURE__ */ jsx(OTPInput, {
 		"aria-label": "One-time password",
-		className: cn(className),
-		containerClassName: cn("flex items-center gap-2", "has-disabled:opacity-50", containerClassName),
+		className: cn("disabled:cursor-not-allowed", className),
+		containerClassName: cn("flex items-center gap-2 has-disabled:opacity-50", containerClassName),
 		"data-slot": "input-otp",
+		spellCheck: false,
 		...props
 	});
 }
@@ -22,7 +22,7 @@ function InputOTP({ className, containerClassName, ...props }) {
 */
 function InputOTPGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex items-center -space-x-px", className),
+		className: cn("flex items-center rounded-md has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40", className),
 		"data-slot": "input-otp-group",
 		role: "group",
 		...props
@@ -36,13 +36,13 @@ function InputOTPSlot({ className, index, ...props }) {
 	if (slot === void 0) throw new Error(`InputOTPSlot: no slot at index ${index}`);
 	const { char, hasFakeCaret, isActive } = slot;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("relative flex size-9 items-center justify-center", "border border-input outline-hidden", "text-sm", "transition-all", "not-has-disabled:shadow-xs", "first:rounded-l-lg", "last:rounded-r-lg", "aria-invalid:border-destructive", "dark:bg-input/30", "data-active:z-10 data-active:border-ring data-active:ring-3 data-active:ring-ring/50", "data-active:aria-invalid:border-destructive data-active:aria-invalid:ring-destructive/20", "dark:data-active:aria-invalid:ring-destructive/40", className),
+		className: cn("relative flex size-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40", className),
 		"data-active": isActive,
 		"data-slot": "input-otp-slot",
 		...props,
 		children: [char, hasFakeCaret ? /* @__PURE__ */ jsx("div", {
-			className: cn("absolute inset-0 flex items-center justify-center", "pointer-events-none"),
-			children: /* @__PURE__ */ jsx("div", { className: cn("h-4 w-px", "bg-foreground", "animate-caret-blink", "animation-duration-1000") })
+			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+			children: /* @__PURE__ */ jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground animation-duration-1000" })
 		}) : null]
 	});
 }
@@ -51,7 +51,9 @@ function InputOTPSlot({ className, index, ...props }) {
 */
 function InputOTPSeparator({ ...props }) {
 	return /* @__PURE__ */ jsx("div", {
+		className: "flex items-center [&_svg:not([class*='size-'])]:size-4",
 		"data-slot": "input-otp-separator",
+		role: "separator",
 		...props,
 		children: /* @__PURE__ */ jsx(MinusIcon, {})
 	});

package/dist/components/input-password.mjs

@@ -1,5 +1,3 @@
-"use client";
-import { cn } from "../lib/utils.mjs";
 import { InputGroup, InputGroupButton, InputGroupInput } from "./input-group.mjs";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -19,14 +17,13 @@ function InputPassword({ className, disabled, readOnly, ...props }) {
 		"data-slot": "input-password",
 		children: [/* @__PURE__ */ jsx(InputGroupInput, {
 			autoCapitalize: "none",
-			"data-slot": "input-password-item",
 			disabled,
 			readOnly,
 			type,
 			...props
 		}), /* @__PURE__ */ jsx(InputGroupButton, {
 			"aria-label": type === "password" ? "Show password" : "Hide password",
-			className: cn("rounded-full", "focus-visible:ring-0", "focus-visible:not-disabled:bg-input"),
+			className: "rounded-full",
 			"data-slot": "input-password-toggle",
 			disabled,
 			size: "icon-sm",

package/dist/components/input-search.mjs

@@ -1,9 +1,7 @@
-"use client";
-import { cn } from "../lib/utils.mjs";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.mjs";
 import { SearchIcon, XIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useControllableState } from "radix-ui/internal";
 //#region src/components/input-search.tsx
 /**
 * @since 0.3.16-canary.0
@@ -24,7 +22,6 @@ function InputSearch({ className, defaultValue, disabled, onChange, readOnly, va
 				children: /* @__PURE__ */ jsx(SearchIcon, {})
 			}),
 			/* @__PURE__ */ jsx(InputGroupInput, {
-				"data-slot": "input-search-item",
 				disabled,
 				readOnly,
 				type: "search",
@@ -36,10 +33,11 @@ function InputSearch({ className, defaultValue, disabled, onChange, readOnly, va
 			}),
 			value ? /* @__PURE__ */ jsx(InputGroupButton, {
 				"aria-label": "Clear search",
-				className: cn("rounded-full", "focus-visible:ring-0", "focus-visible:not-disabled:bg-input"),
+				className: "rounded-full",
 				"data-slot": "input-search-clear",
 				disabled: disabled ?? readOnly,
 				size: "icon-sm",
+				type: "button",
 				variant: "ghost",
 				onClick: () => {
 					setValue("");

package/dist/components/input.mjs

@@ -1,4 +1,3 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/input.tsx
@@ -7,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 */
 function Input({ className, type, ...props }) {
 	return /* @__PURE__ */ jsx("input", {
-		className: cn("h-9 w-full min-w-0 px-3 py-1", "rounded-lg border border-input", "bg-transparent shadow-xs outline-none", "text-base", "transition-[color,box-shadow]", "selection:bg-primary selection:text-primary-foreground", "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", "placeholder:text-muted-foreground", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "md:text-sm", "dark:bg-input/30", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "aria-invalid:border-destructive aria-invalid:ring-destructive/20", "dark:aria-invalid:ring-destructive/40", className),
+		className: cn("h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className),
 		"data-slot": "input",
 		type,
 		...props

package/dist/components/item.d.mts

@@ -1,33 +1,8 @@
-import { VariantProps } from "../lib/utils.mjs";
 import { Separator } from "./separator.mjs";
-import * as _$_codefast_tailwind_variants0 from "@codefast/tailwind-variants";
+import { ItemMediaVariants, ItemVariants } from "../variants/item.mjs";
 import { ComponentProps, JSX } from "react";
 
 //#region src/components/item.d.ts
-/**
- * @since 0.3.16-canary.0
- */
-declare const itemVariants: _$_codefast_tailwind_variants0.VariantResolver<{
-  size: {
-    default: string[];
-    sm: string[];
-  };
-  variant: {
-    default: string;
-    muted: string;
-    outline: string;
-  };
-}, Record<string, never>>;
-/**
- * @since 0.3.16-canary.0
- */
-declare const itemMediaVariants: _$_codefast_tailwind_variants0.VariantResolver<{
-  variant: {
-    default: string;
-    icon: string[];
-    image: string[];
-  };
-}, Record<string, never>>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -53,7 +28,7 @@ declare function ItemSeparator({
 /**
  * @since 0.3.16-canary.0
  */
-type ItemProps = ComponentProps<"div"> & VariantProps<typeof itemVariants> & {
+type ItemProps = ComponentProps<"div"> & ItemVariants & {
   asChild?: boolean;
 };
 /**
@@ -69,7 +44,7 @@ declare function Item({
 /**
  * @since 0.3.16-canary.0
  */
-type ItemMediaProps = ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>;
+type ItemMediaProps = ComponentProps<"div"> & ItemMediaVariants;
 /**
  * @since 0.3.16-canary.0
  */
@@ -145,4 +120,4 @@ declare function ItemFooter({
   ...props
 }: ItemFooterProps): JSX.Element;
 //#endregion
-export { Item, ItemActions, type ItemActionsProps, ItemContent, type ItemContentProps, ItemDescription, type ItemDescriptionProps, ItemFooter, type ItemFooterProps, ItemGroup, type ItemGroupProps, ItemHeader, type ItemHeaderProps, ItemMedia, type ItemMediaProps, type ItemProps, ItemSeparator, type ItemSeparatorProps, ItemTitle, type ItemTitleProps, itemMediaVariants, itemVariants };
+export { Item, ItemActions, type ItemActionsProps, ItemContent, type ItemContentProps, ItemDescription, type ItemDescriptionProps, ItemFooter, type ItemFooterProps, ItemGroup, type ItemGroupProps, ItemHeader, type ItemHeaderProps, ItemMedia, type ItemMediaProps, type ItemProps, ItemSeparator, type ItemSeparatorProps, ItemTitle, type ItemTitleProps };

package/dist/components/item.mjs

@@ -1,68 +1,15 @@
-import { cn, tv } from "../lib/utils.mjs";
-import { Separator } from "./separator.mjs";
-import { Slot } from "@radix-ui/react-slot";
+import { cn } from "../lib/utils.mjs";
+import { Separator as Separator$1 } from "./separator.mjs";
+import { itemMediaVariants, itemVariants } from "../variants/item.mjs";
+import { Slot } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/item.tsx
 /**
 * @since 0.3.16-canary.0
 */
-const itemVariants = tv({
-	base: [
-		"group/item flex flex-wrap items-center",
-		"rounded-lg border border-transparent outline-hidden",
-		"text-sm",
-		"transition-colors duration-100",
-		"focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-		"[a]:transition-colors",
-		"[a]:hover:bg-accent/50"
-	],
-	defaultVariants: {
-		size: "default",
-		variant: "default"
-	},
-	variants: {
-		size: {
-			default: ["gap-4", "p-4"],
-			sm: ["gap-2.5", "px-4 py-3"]
-		},
-		variant: {
-			default: "bg-transparent",
-			muted: "bg-muted/50",
-			outline: "border-border"
-		}
-	}
-});
-/**
-* @since 0.3.16-canary.0
-*/
-const itemMediaVariants = tv({
-	base: [
-		"flex shrink-0 items-center justify-center gap-2",
-		"group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start",
-		"[&_svg]:pointer-events-none"
-	],
-	defaultVariants: { variant: "default" },
-	variants: { variant: {
-		default: "bg-transparent",
-		icon: [
-			"size-8 shrink-0",
-			"rounded-md border",
-			"bg-muted",
-			"[&_svg:not([class*='size-'])]:size-4"
-		],
-		image: [
-			"size-10 shrink-0 overflow-hidden",
-			"rounded-md",
-			"[&_img]:size-full [&_img]:object-cover"
-		]
-	} }
-});
-/**
-* @since 0.3.16-canary.0
-*/
 function ItemGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("group/item-group flex flex-col", className),
+		className: cn("group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2", className),
 		"data-slot": "item-group",
 		role: "list",
 		...props
@@ -72,8 +19,8 @@ function ItemGroup({ className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function ItemSeparator({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Separator, {
-		className: cn("my-0", className),
+	return /* @__PURE__ */ jsx(Separator$1, {
+		className: cn("my-2", className),
 		"data-slot": "item-separator",
 		orientation: "horizontal",
 		...props
@@ -83,7 +30,7 @@ function ItemSeparator({ className, ...props }) {
 * @since 0.3.16-canary.0
 */
 function Item({ asChild = false, className, size = "default", variant = "default", ...props }) {
-	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+	return /* @__PURE__ */ jsx(asChild ? Slot.Root : "div", {
 		className: itemVariants({
 			className,
 			size,
@@ -114,7 +61,7 @@ function ItemMedia({ className, variant = "default", ...props }) {
 */
 function ItemContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex flex-1 flex-col gap-1", "[&+[data-slot=item-content]]:flex-none", className),
+		className: cn("flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none", className),
 		"data-slot": "item-content",
 		...props
 	});
@@ -124,7 +71,7 @@ function ItemContent({ className, ...props }) {
 */
 function ItemTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("flex w-fit items-center gap-2", "text-sm leading-snug font-medium", className),
+		className: cn("line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4", className),
 		"data-slot": "item-title",
 		...props
 	});
@@ -134,7 +81,7 @@ function ItemTitle({ className, ...props }) {
 */
 function ItemDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
-		className: cn("line-clamp-2 text-sm leading-normal font-normal text-balance text-muted-foreground", "[&>a]:underline [&>a]:underline-offset-4", "[&>a:hover]:text-primary", className),
+		className: cn("line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
 		"data-slot": "item-description",
 		...props
 	});
@@ -170,4 +117,4 @@ function ItemFooter({ className, ...props }) {
 	});
 }
 //#endregion
-export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle, itemMediaVariants, itemVariants };
+export { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle };

package/dist/components/kbd.mjs

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 */
 function Kbd({ className, ...props }) {
 	return /* @__PURE__ */ jsx("kbd", {
-		className: cn("inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 px-1", "rounded-md", "bg-muted font-sans text-xs font-medium text-muted-foreground", "pointer-events-none select-none", "in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background", "dark:in-data-[slot=tooltip-content]:bg-background/10", "[&_svg:not([class*='size-'])]:size-3", className),
+		className: cn("pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3", className),
 		"data-slot": "kbd",
 		...props
 	});

package/dist/components/label.d.mts

@@ -1,11 +1,11 @@
+import { Label as Label$1 } from "radix-ui";
 import { ComponentProps, JSX } from "react";
-import * as LabelPrimitive from "@radix-ui/react-label";
 
 //#region src/components/label.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-type LabelProps = ComponentProps<typeof LabelPrimitive.Root>;
+type LabelProps = ComponentProps<typeof Label$1.Root>;
 /**
  * @since 0.3.16-canary.0
  */

package/dist/components/label.mjs

@@ -1,14 +1,13 @@
-"use client";
 import { cn } from "../lib/utils.mjs";
+import { Label as Label$1 } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
-import * as LabelPrimitive from "@radix-ui/react-label";
 //#region src/components/label.tsx
 /**
 * @since 0.3.16-canary.0
 */
 function Label({ className, ...props }) {
-	return /* @__PURE__ */ jsx(LabelPrimitive.Root, {
-		className: cn("inline-block", "text-sm leading-none font-medium", "group-data-disabled:opacity-50", "peer-disabled:opacity-50", "peer-aria-invalid:text-destructive", "peer-data-disabled:opacity-50", "data-invalid:text-destructive", className),
+	return /* @__PURE__ */ jsx(Label$1.Root, {
+		className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-disabled:pointer-events-none group-data-disabled:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-aria-invalid:text-destructive peer-data-disabled:opacity-50 data-invalid:text-destructive", className),
 		"data-slot": "label",
 		...props
 	});

package/dist/components/menubar.d.mts

@@ -1,11 +1,11 @@
+import { Menubar as Menubar$1 } from "radix-ui";
 import { ComponentProps, JSX } from "react";
-import * as MenubarPrimitive from "@radix-ui/react-menubar";
 
 //#region src/components/menubar.d.ts
 /**
  * @since 0.3.16-canary.0
  */
-type MenubarProps = ComponentProps<typeof MenubarPrimitive.Root>;
+type MenubarProps = ComponentProps<typeof Menubar$1.Root>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -16,7 +16,7 @@ declare function Menubar({
 /**
  * @since 0.3.16-canary.0
  */
-type MenubarMenuProps = ComponentProps<typeof MenubarPrimitive.Menu>;
+type MenubarMenuProps = ComponentProps<typeof Menubar$1.Menu>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -26,7 +26,7 @@ declare function MenubarMenu({
 /**
  * @since 0.3.16-canary.0
  */
-type MenubarGroupProps = ComponentProps<typeof MenubarPrimitive.Group>;
+type MenubarGroupProps = ComponentProps<typeof Menubar$1.Group>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -36,7 +36,7 @@ declare function MenubarGroup({
 /**
  * @since 0.3.16-canary.0
  */
-type MenubarSubProps = ComponentProps<typeof MenubarPrimitive.Sub>;
+type MenubarSubProps = ComponentProps<typeof Menubar$1.Sub>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -46,7 +46,7 @@ declare function MenubarSub({
 /**
  * @since 0.3.16-canary.0
  */
-type MenubarRadioGroupProps = ComponentProps<typeof MenubarPrimitive.RadioGroup>;
+type MenubarRadioGroupProps = ComponentProps<typeof Menubar$1.RadioGroup>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -56,7 +56,7 @@ declare function MenubarRadioGroup({
 /**
  * @since 0.3.16-canary.0
  */
-type MenubarTriggerProps = ComponentProps<typeof MenubarPrimitive.Trigger>;
+type MenubarTriggerProps = ComponentProps<typeof Menubar$1.Trigger>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -67,7 +67,7 @@ declare function MenubarTrigger({
 /**
  * @since 0.3.16-canary.0
  */
-interface MenubarSubTriggerProps extends ComponentProps<typeof MenubarPrimitive.SubTrigger> {
+interface MenubarSubTriggerProps extends ComponentProps<typeof Menubar$1.SubTrigger> {
   inset?: boolean;
 }
 /**
@@ -82,7 +82,7 @@ declare function MenubarSubTrigger({
 /**
  * @since 0.3.16-canary.0
  */
-type MenubarSubContentProps = ComponentProps<typeof MenubarPrimitive.SubContent>;
+type MenubarSubContentProps = ComponentProps<typeof Menubar$1.SubContent>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -93,7 +93,7 @@ declare function MenubarSubContent({
 /**
  * @since 0.3.16-canary.0
  */
-type MenubarContentProps = ComponentProps<typeof MenubarPrimitive.Content>;
+type MenubarContentProps = ComponentProps<typeof Menubar$1.Content>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -107,7 +107,7 @@ declare function MenubarContent({
 /**
  * @since 0.3.16-canary.0
  */
-interface MenubarItemProps extends ComponentProps<typeof MenubarPrimitive.Item> {
+interface MenubarItemProps extends ComponentProps<typeof Menubar$1.Item> {
   inset?: boolean;
   variant?: "default" | "destructive";
 }
@@ -123,7 +123,9 @@ declare function MenubarItem({
 /**
  * @since 0.3.16-canary.0
  */
-type MenubarCheckboxItemProps = ComponentProps<typeof MenubarPrimitive.CheckboxItem>;
+interface MenubarCheckboxItemProps extends ComponentProps<typeof Menubar$1.CheckboxItem> {
+  inset?: boolean;
+}
 /**
  * @since 0.3.16-canary.0
  */
@@ -131,24 +133,28 @@ declare function MenubarCheckboxItem({
   checked,
   children,
   className,
+  inset,
   ...props
 }: MenubarCheckboxItemProps): JSX.Element;
 /**
  * @since 0.3.16-canary.0
  */
-type MenubarRadioItemProps = ComponentProps<typeof MenubarPrimitive.RadioItem>;
+interface MenubarRadioItemProps extends ComponentProps<typeof Menubar$1.RadioItem> {
+  inset?: boolean;
+}
 /**
  * @since 0.3.16-canary.0
  */
 declare function MenubarRadioItem({
   children,
   className,
+  inset,
   ...props
 }: MenubarRadioItemProps): JSX.Element;
 /**
  * @since 0.3.16-canary.0
  */
-interface MenubarLabelProps extends ComponentProps<typeof MenubarPrimitive.Label> {
+interface MenubarLabelProps extends ComponentProps<typeof Menubar$1.Label> {
   inset?: boolean;
 }
 /**
@@ -162,7 +168,7 @@ declare function MenubarLabel({
 /**
  * @since 0.3.16-canary.0
  */
-type MenubarSeparatorProps = ComponentProps<typeof MenubarPrimitive.Separator>;
+type MenubarSeparatorProps = ComponentProps<typeof Menubar$1.Separator>;
 /**
  * @since 0.3.16-canary.0
  */
@@ -184,7 +190,7 @@ declare function MenubarShortcut({
 /**
  * @since 0.3.16-canary.0
  */
-type MenubarArrowProps = ComponentProps<typeof MenubarPrimitive.Arrow>;
+type MenubarArrowProps = ComponentProps<typeof Menubar$1.Arrow>;
 /**
  * @since 0.3.16-canary.0
  */