@bearmenu/ui 0.7.0 → 0.8.1

package/src/components/avatar.stories.tsx

@@ -1,5 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
+import { Avatar, AvatarFallback, AvatarGroup, AvatarImage, type AvatarSize } from "./avatar";
+
+const sizes: AvatarSize[] = ["xs", "sm", "default", "lg", "xl"];
+
+const people = ["AB", "CD", "EF", "GH", "IJ", "KL", "MN"];
 
 const meta = {
   title: "Components/Avatar",
@@ -30,37 +34,66 @@ export const Fallback: Story = {
 export const Sizes: Story = {
   render: () => (
     <div className="flex items-center gap-4">
-      <Avatar className="h-8 w-8">
-        <AvatarFallback className="text-xs">S</AvatarFallback>
-      </Avatar>
-      <Avatar>
-        <AvatarFallback>MD</AvatarFallback>
-      </Avatar>
-      <Avatar className="h-14 w-14">
-        <AvatarFallback className="text-lg">LG</AvatarFallback>
-      </Avatar>
-      <Avatar className="h-20 w-20">
-        <AvatarFallback className="text-xl">XL</AvatarFallback>
-      </Avatar>
+      {sizes.map((size) => (
+        <Avatar key={size} size={size}>
+          <AvatarFallback>{size.slice(0, 2).toUpperCase()}</AvatarFallback>
+        </Avatar>
+      ))}
     </div>
   ),
 };
 
 export const Group: Story = {
   render: () => (
-    <div className="flex -space-x-3">
-      <Avatar className="border-2 border-background">
-        <AvatarFallback>A</AvatarFallback>
-      </Avatar>
-      <Avatar className="border-2 border-background">
-        <AvatarFallback>B</AvatarFallback>
-      </Avatar>
-      <Avatar className="border-2 border-background">
-        <AvatarFallback>C</AvatarFallback>
-      </Avatar>
-      <Avatar className="border-2 border-background">
-        <AvatarFallback className="text-xs">+3</AvatarFallback>
-      </Avatar>
+    <AvatarGroup max={4} spacing="tight">
+      {people.map((initials) => (
+        <Avatar key={initials}>
+          <AvatarFallback>{initials}</AvatarFallback>
+        </Avatar>
+      ))}
+    </AvatarGroup>
+  ),
+};
+
+/**
+ * `AvatarGroup` takes the same `size` union as `Avatar`. It sizes the "+N"
+ * overflow chip and is inherited by child avatars, so the row stays one
+ * consistent height without per-call-site class overrides.
+ */
+export const GroupSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      {sizes.map((size) => (
+        <div key={size} className="flex items-center gap-4">
+          <span className="w-16 text-xs text-muted-foreground">{size}</span>
+          <AvatarGroup max={3} spacing="tight" size={size}>
+            {people.map((initials) => (
+              <Avatar key={initials}>
+                <AvatarFallback>{initials}</AvatarFallback>
+              </Avatar>
+            ))}
+          </AvatarGroup>
+        </div>
+      ))}
     </div>
   ),
 };
+
+/**
+ * An individual `Avatar` can still opt out of the group size — useful for
+ * highlighting "you" inside a roster.
+ */
+export const GroupSizeOverride: Story = {
+  render: () => (
+    <AvatarGroup max={4} spacing="tight" size="sm">
+      <Avatar size="lg">
+        <AvatarFallback>ME</AvatarFallback>
+      </Avatar>
+      {people.map((initials) => (
+        <Avatar key={initials}>
+          <AvatarFallback>{initials}</AvatarFallback>
+        </Avatar>
+      ))}
+    </AvatarGroup>
+  ),
+};

package/src/components/avatar.test.tsx

@@ -0,0 +1,129 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup } from "./avatar";
+
+// Returned as an array, not a fragment: AvatarGroup counts its direct children,
+// and a fragment would collapse the whole set into one child.
+const members = (count: number) =>
+  Array.from({ length: count }, (_, i) => (
+    <Avatar key={i}>
+      <AvatarFallback>{String.fromCharCode(65 + i)}</AvatarFallback>
+    </Avatar>
+  ));
+
+const overflowChip = () => document.querySelector('[data-slot="avatar-group-overflow"]');
+const avatars = () => Array.from(document.querySelectorAll('[data-slot="avatar"]'));
+
+describe("Avatar", () => {
+  it("applies the default size scale when no size is given", () => {
+    render(
+      <Avatar>
+        <AvatarFallback>JD</AvatarFallback>
+      </Avatar>
+    );
+    expect(avatars()[0]).toHaveClass("size-10", "text-sm");
+  });
+
+  it("applies an explicit size variant", () => {
+    render(
+      <Avatar size="xs">
+        <AvatarFallback>JD</AvatarFallback>
+      </Avatar>
+    );
+    expect(avatars()[0]).toHaveClass("size-6", "text-[10px]");
+  });
+
+  it("scales AvatarBadge off the avatar size via context", () => {
+    render(
+      <Avatar size="xl">
+        <AvatarFallback>JD</AvatarFallback>
+        <AvatarBadge />
+      </Avatar>
+    );
+    expect(document.querySelector('[data-slot="avatar-badge"]')).toHaveClass("size-4");
+  });
+});
+
+describe("AvatarGroup", () => {
+  it("renders no overflow chip when the item count fits within max", () => {
+    render(
+      <AvatarGroup max={3}>
+        {members(3)}
+      </AvatarGroup>
+    );
+    expect(overflowChip()).toBeNull();
+  });
+
+  it("renders a +N overflow chip for the hidden remainder", () => {
+    render(
+      <AvatarGroup max={2}>
+        {members(5)}
+      </AvatarGroup>
+    );
+    expect(screen.getByText("+3")).toBeInTheDocument();
+    expect(avatars()).toHaveLength(2);
+  });
+
+  it("keeps the pre-existing chip appearance when no size is passed", () => {
+    render(
+      <AvatarGroup max={1}>
+        {members(3)}
+      </AvatarGroup>
+    );
+    expect(overflowChip()).toHaveClass("size-10", "text-xs");
+  });
+
+  it.each([
+    ["xs", "size-6", "text-[9px]"],
+    ["sm", "size-8", "text-[10px]"],
+    ["default", "size-10", "text-xs"],
+    ["lg", "size-12", "text-sm"],
+    ["xl", "size-16", "text-base"],
+  ] as const)("sizes the overflow chip to match a %s group", (size, sizeClass, textClass) => {
+    render(
+      <AvatarGroup max={1} size={size}>
+        {members(4)}
+      </AvatarGroup>
+    );
+    expect(overflowChip()).toHaveClass(sizeClass, textClass);
+  });
+
+  it("passes the group size down to child avatars", () => {
+    render(
+      <AvatarGroup max={2} size="sm">
+        {members(4)}
+      </AvatarGroup>
+    );
+    for (const avatar of avatars()) {
+      expect(avatar).toHaveClass("size-8");
+    }
+  });
+
+  it("lets an individual avatar override the group size", () => {
+    render(
+      <AvatarGroup size="sm">
+        <Avatar>
+          <AvatarFallback>A</AvatarFallback>
+        </Avatar>
+        <Avatar size="lg">
+          <AvatarFallback>B</AvatarFallback>
+        </Avatar>
+      </AvatarGroup>
+    );
+    const [inherited, overridden] = avatars();
+    expect(inherited).toHaveClass("size-8");
+    expect(overridden).toHaveClass("size-12");
+  });
+
+  it("scales avatar and chip together so the group reads as one row", () => {
+    render(
+      <AvatarGroup max={2} size="xs">
+        {members(9)}
+      </AvatarGroup>
+    );
+    for (const avatar of avatars()) {
+      expect(avatar).toHaveClass("size-6");
+    }
+    expect(overflowChip()).toHaveClass("size-6");
+  });
+});

package/src/components/avatar.tsx

@@ -23,22 +23,32 @@ const avatarVariants = cva(
   }
 );
 
-const AvatarContext = React.createContext<VariantProps<typeof avatarVariants>["size"]>("default");
+type AvatarSize = NonNullable<VariantProps<typeof avatarVariants>["size"]>;
+
+const AvatarContext = React.createContext<AvatarSize>("default");
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> &
     VariantProps<typeof avatarVariants>
->(({ className, size = "default", ...props }, ref) => (
-  <AvatarContext.Provider value={size}>
-    <AvatarPrimitive.Root
-      ref={ref}
-      data-slot="avatar"
-      className={cn(avatarVariants({ size }), className)}
-      {...props}
-    />
-  </AvatarContext.Provider>
-));
+>(({ className, size, ...props }, ref) => {
+  // An explicit `size` always wins; otherwise inherit from the nearest
+  // AvatarGroup (context defaults to "default", so a standalone Avatar with no
+  // size behaves exactly as before).
+  const inheritedSize = React.useContext(AvatarContext);
+  const resolvedSize = size ?? inheritedSize;
+
+  return (
+    <AvatarContext.Provider value={resolvedSize}>
+      <AvatarPrimitive.Root
+        ref={ref}
+        data-slot="avatar"
+        className={cn(avatarVariants({ size: resolvedSize }), className)}
+        {...props}
+      />
+    </AvatarContext.Provider>
+  );
+});
 Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
@@ -62,7 +72,7 @@ const AvatarFallback = React.forwardRef<
     ref={ref}
     data-slot="avatar-fallback"
     className={cn(
-      "flex size-full items-center justify-center rounded-full bg-muted font-medium text-muted-foreground",
+      "flex size-full items-center justify-center rounded-full bg-muted font-semibold text-muted-foreground",
       className
     )}
     {...props}
@@ -85,14 +95,14 @@ const AvatarBadge = React.forwardRef<
     tone?: "success" | "warning" | "destructive" | "muted";
   }
 >(({ className, placement = "bottom-right", tone = "success", ...props }, ref) => {
-  const size = React.useContext(AvatarContext) ?? "default";
+  const size = React.useContext(AvatarContext);
   return (
     <span
       ref={ref}
       data-slot="avatar-badge"
       className={cn(
         "absolute block rounded-full ring-background",
-        badgeOffset[size as keyof typeof badgeOffset],
+        badgeOffset[size],
         placement === "top-right" ? "right-0 top-0" : "bottom-0 right-0",
         tone === "success" && "bg-success",
         tone === "warning" && "bg-warning",
@@ -106,37 +116,83 @@ const AvatarBadge = React.forwardRef<
 });
 AvatarBadge.displayName = "AvatarBadge";
 
+// The "+N" chip tracks the group's avatar size. Its label sits one step below
+// the matching Avatar text rung — a two-glyph "+12" needs more room inside the
+// same circle than a one-glyph initial. `default` reproduces the pre-0.8
+// hardcoded appearance (size-10 text-xs) exactly.
+const avatarGroupOverflowVariants = cva(
+  "relative inline-flex shrink-0 items-center justify-center rounded-full bg-muted font-semibold text-muted-foreground ring-2 ring-background",
+  {
+    variants: {
+      size: {
+        xs: "size-6 text-[9px]",
+        sm: "size-8 text-[10px]",
+        default: "size-10 text-xs",
+        lg: "size-12 text-sm",
+        xl: "size-16 text-base",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+);
+
 const AvatarGroup = React.forwardRef<
   HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & { max?: number; spacing?: "tight" | "default" | "loose" }
->(({ className, children, max, spacing = "default", ...props }, ref) => {
+  React.HTMLAttributes<HTMLDivElement> & {
+    max?: number;
+    spacing?: "tight" | "default" | "loose";
+    /**
+     * Size for the whole group: sets the "+N" overflow chip and is inherited by
+     * child `Avatar`s that don't set their own `size`. Defaults to "default".
+     */
+    size?: AvatarSize;
+  }
+>(({ className, children, max, spacing = "default", size, ...props }, ref) => {
+  const inheritedSize = React.useContext(AvatarContext);
+  const resolvedSize = size ?? inheritedSize;
   const items = React.Children.toArray(children);
   const visible = max ? items.slice(0, max) : items;
   const overflow = max ? items.length - max : 0;
 
   return (
-    <div
-      ref={ref}
-      data-slot="avatar-group"
-      className={cn(
-        "flex items-center",
-        spacing === "tight" && "-space-x-3",
-        spacing === "default" && "-space-x-2",
-        spacing === "loose" && "-space-x-1",
-        "[&>*]:ring-2 [&>*]:ring-background",
-        className
-      )}
-      {...props}
-    >
-      {visible}
-      {overflow > 0 && (
-        <span className="relative inline-flex size-10 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground ring-2 ring-background">
-          +{overflow}
-        </span>
-      )}
-    </div>
+    <AvatarContext.Provider value={resolvedSize}>
+      <div
+        ref={ref}
+        data-slot="avatar-group"
+        className={cn(
+          "flex items-center",
+          spacing === "tight" && "-space-x-3",
+          spacing === "default" && "-space-x-2",
+          spacing === "loose" && "-space-x-1",
+          "[&>*]:ring-2 [&>*]:ring-background",
+          className
+        )}
+        {...props}
+      >
+        {visible}
+        {overflow > 0 && (
+          <span
+            data-slot="avatar-group-overflow"
+            className={avatarGroupOverflowVariants({ size: resolvedSize })}
+          >
+            +{overflow}
+          </span>
+        )}
+      </div>
+    </AvatarContext.Provider>
   );
 });
 AvatarGroup.displayName = "AvatarGroup";
 
-export { Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup, avatarVariants };
+export {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  avatarVariants,
+  avatarGroupOverflowVariants,
+};
+export type { AvatarSize };

package/src/components/badge.tsx

@@ -37,10 +37,22 @@ const badgeVariants = cva(
 );
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+  /**
+   * Element to render. Defaults to `div`.
+   *
+   * Use `"span"` when the badge sits inside a `<button>` or a `<p>` — their
+   * content model is phrasing content, so a `div` in there is invalid HTML.
+   * That is the common case for a badge sitting inline with a title on a
+   * clickable row.
+   */
+  as?: "div" | "span";
+}
 
-function Badge({ className, variant, live, ...props }: BadgeProps) {
-  return <div data-slot="badge" className={cn(badgeVariants({ variant, live }), className)} {...props} />;
+function Badge({ className, variant, live, as: Tag = "div", ...props }: BadgeProps) {
+  return (
+    <Tag data-slot="badge" className={cn(badgeVariants({ variant, live }), className)} {...props} />
+  );
 }
 
 export { Badge, badgeVariants };

package/src/components/breadcrumb.tsx

@@ -59,7 +59,7 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
       role="link"
       aria-disabled="true"
       aria-current="page"
-      className={cn("font-medium text-foreground", className)}
+      className={cn("font-semibold text-foreground", className)}
       {...props}
     />
   );

package/src/components/button.tsx

@@ -6,7 +6,7 @@ import { cn } from "../lib/utils";
 import { useHaptic } from "../hooks/use-haptic";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer [@media(pointer:coarse)]:active:scale-95",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer [@media(pointer:coarse)]:active:scale-95",
   {
     variants: {
       variant: {
@@ -21,6 +21,21 @@ const buttonVariants = cva(
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
         glass: "glass glass-hover text-foreground",
+        /**
+         * Chrome sitting ON a photo — share, close, favourite over a hero or
+         * card image. `glass` is the wrong tool there: it resolves
+         * `text-foreground`, which is near-black in light mode and disappears
+         * into a dark photo.
+         *
+         * Deliberately NOT theme-aware, and so deliberately different from
+         * `Badge`'s `overlay` (`bg-foreground/70 text-background`, which
+         * inverts). A photo is equally a photo in both themes — this chrome has
+         * to contrast with the image beneath it, not with the app canvas, so it
+         * stays dark-on-light-glyph either way. Reconcile Badge to this, not the
+         * reverse, if the two are ever unified.
+         */
+        overlay:
+          "bg-black/40 text-white backdrop-blur-sm hover:bg-black/60 focus-visible:ring-white/70",
         brown:
           "bg-brown text-brown-foreground shadow-sm hover:bg-brown/85 hover:shadow",
         antagonist:

package/src/components/calendar.tsx

@@ -58,7 +58,7 @@ function Calendar({
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium",
+          "flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-semibold",
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
@@ -67,7 +67,7 @@ function Calendar({
         ),
         dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
         caption_label: cn(
-          "font-medium select-none",
+          "font-semibold select-none",
           captionLayout === "label"
             ? "text-sm"
             : "flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground",

package/src/components/circular-progress.tsx

@@ -89,7 +89,7 @@ const CircularProgress = React.forwardRef<HTMLDivElement, CircularProgressProps>
           />
         </svg>
         {showLabel && !indeterminate && (
-          <span className="absolute text-xs font-medium tabular-nums text-foreground">
+          <span className="absolute text-xs font-semibold tabular-nums text-foreground">
             {Math.round(percent)}%
           </span>
         )}

package/src/components/command.tsx

@@ -41,7 +41,7 @@ const CommandDialog = ({
           <DialogTitle>{title}</DialogTitle>
           <DialogDescription>{description}</DialogDescription>
         </DialogHeader>
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -110,7 +110,7 @@ const CommandGroup = React.forwardRef<
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-muted-foreground",
       className
     )}
     {...props}

package/src/components/currency-input.tsx

@@ -139,7 +139,7 @@ const CurrencyInput = React.forwardRef<HTMLInputElement, CurrencyInputProps>(
         <div className="relative">
           <span
             aria-hidden
-            className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm font-medium text-muted-foreground"
+            className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm font-semibold text-muted-foreground"
           >
             {currency}
           </span>

package/src/components/description-list.tsx

@@ -40,7 +40,7 @@ const DescriptionTerm = React.forwardRef<HTMLElement, React.HTMLAttributes<HTMLE
     <dt
       ref={ref as React.Ref<HTMLElement>}
       data-slot="description-term"
-      className={cn("text-xs font-medium uppercase tracking-wide text-muted-foreground", className)}
+      className={cn("text-xs font-semibold uppercase tracking-wide text-muted-foreground", className)}
       {...props}
     />
   )

package/src/components/dropdown-menu.tsx

@@ -161,7 +161,7 @@ function DropdownMenuLabel({
     <DropdownMenuPrimitive.Label
       data-slot="dropdown-menu-label"
       data-inset={inset}
-      className={cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className)}
+      className={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:pl-8", className)}
       {...props}
     />
   );

package/src/components/field.tsx

@@ -136,7 +136,7 @@ const FieldLegend = React.forwardRef<HTMLLegendElement, React.HTMLAttributes<HTM
     <legend
       ref={ref}
       data-slot="field-legend"
-      className={cn("px-1 text-sm font-medium text-foreground", className)}
+      className={cn("px-1 text-sm font-semibold text-foreground", className)}
       {...props}
     />
   )

package/src/components/input-group.tsx

@@ -92,7 +92,7 @@ const InputGroupButton = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAtt
       type={type}
       data-slot="input-group-button"
       className={cn(
-        "inline-flex h-7 min-w-7 cursor-pointer items-center justify-center gap-1 rounded-md px-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&:has(svg:only-child)]:w-7 [&:has(svg:only-child)]:px-0 [&_svg]:size-4",
+        "inline-flex h-7 min-w-7 cursor-pointer items-center justify-center gap-1 rounded-md px-2 text-xs font-semibold text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&:has(svg:only-child)]:w-7 [&:has(svg:only-child)]:px-0 [&_svg]:size-4",
         className
       )}
       {...props}

package/src/components/input.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
 const inputVariants = cva(
-  "flex w-full border border-border bg-input/50 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:bg-input disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
+  "flex w-full border border-border bg-input/50 text-base transition-colors file:border-0 file:bg-transparent file:text-sm file:font-semibold file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:bg-input disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
   {
     variants: {
       size: {

package/src/components/item.tsx

@@ -81,7 +81,7 @@ const ItemTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivE
     <div
       ref={ref}
       data-slot="item-title"
-      className={cn("truncate text-sm font-medium text-foreground", className)}
+      className={cn("truncate text-sm font-semibold text-foreground", className)}
       {...props}
     />
   )

package/src/components/kbd.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
 const kbdVariants = cva(
-  "inline-flex select-none items-center justify-center gap-1 rounded-md border border-border bg-muted font-mono font-medium text-muted-foreground shadow-[0_1px_0_0_var(--border)]",
+  "inline-flex select-none items-center justify-center gap-1 rounded-md border border-border bg-muted font-mono font-semibold text-muted-foreground shadow-[0_1px_0_0_var(--border)]",
   {
     variants: {
       size: {

package/src/components/label.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 transition-all duration-200"
+  "text-sm font-semibold leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 transition-all duration-200"
 );
 
 const Label = React.forwardRef<