@carlonicora/nextjs-jsonapi 1.134.0 → 1.135.1

package/src/shadcnui/ui/__tests__/cursor-controls.test.tsx

@@ -0,0 +1,109 @@
+// packages/nextjs-jsonapi/src/shadcnui/ui/__tests__/cursor-controls.test.tsx
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import { Button } from "../button";
+import { Checkbox } from "../checkbox";
+import { Label } from "../label";
+import { RadioGroup, RadioGroupItem } from "../radio-group";
+import { Slider } from "../slider";
+import { Switch } from "../switch";
+
+describe("cursor affordance — controls that do not render a <button>", () => {
+  it("Button carries cursor-pointer in its own class string, so it survives render={<div/>}", () => {
+    // 13 call sites use <Button render={<div/>} nativeButton={false} />, which
+    // renders a div. A `button {cursor:pointer}` CSS rule cannot reach those,
+    // so the affordance has to live in buttonVariants itself.
+    render(<Button>Save</Button>);
+    expect(screen.getByRole("button")).toHaveClass("cursor-pointer");
+  });
+
+  it("Checkbox renders a span (not a button) and carries cursor-pointer", () => {
+    render(<Checkbox />);
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox.tagName).toBe("SPAN");
+    expect(checkbox).toHaveClass("cursor-pointer");
+  });
+
+  it("Checkbox uses data-disabled: for its disabled variants, not disabled:", () => {
+    // :disabled cannot match a <span>, so `disabled:cursor-not-allowed` and
+    // `disabled:opacity-50` were dead classes — disabled checkboxes did not dim.
+    render(<Checkbox />);
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox).toHaveClass("data-disabled:cursor-not-allowed");
+    expect(checkbox).toHaveClass("data-disabled:opacity-50");
+    expect(checkbox.className).not.toMatch(/(^|\s)disabled:/);
+  });
+
+  it("Switch renders a span (not a button) and carries cursor-pointer", () => {
+    render(<Switch />);
+    const toggle = screen.getByRole("switch");
+    expect(toggle.tagName).toBe("SPAN");
+    expect(toggle).toHaveClass("cursor-pointer");
+    expect(toggle).toHaveClass("data-disabled:cursor-not-allowed");
+  });
+
+  it("RadioGroupItem renders a span (not a button) and carries cursor-pointer", () => {
+    render(
+      <RadioGroup>
+        <RadioGroupItem value="one" />
+      </RadioGroup>,
+    );
+    const radio = screen.getByRole("radio");
+    expect(radio.tagName).toBe("SPAN");
+    expect(radio).toHaveClass("cursor-pointer");
+    expect(radio).toHaveClass("data-disabled:cursor-not-allowed");
+    expect(radio.className).not.toMatch(/(^|\s)disabled:/);
+  });
+
+  it("Slider Control is click-to-set, so it carries cursor-pointer", () => {
+    const { container } = render(<Slider defaultValue={[50]} />);
+    const control = container.querySelector('[data-slot="slider-control"]');
+    expect(control).not.toBeNull();
+    expect(control).toHaveClass("cursor-pointer");
+  });
+
+  it("Slider Thumb carries grab cursors", () => {
+    const { container } = render(<Slider defaultValue={[50]} />);
+    const thumb = container.querySelector('[data-slot="slider-thumb"]');
+    expect(thumb).not.toBeNull();
+    expect(thumb).toHaveClass("cursor-grab");
+    expect(thumb).toHaveClass("active:cursor-grabbing");
+  });
+
+  it("Button uses data-disabled: for its disabled cursor/pointer-events variants", () => {
+    // A disabled <Button render={<div/>} nativeButton={false}> is a div, so
+    // `disabled:pointer-events-none` never matched it — the div stayed
+    // hoverable and pointer-cursored while visually disabled. `data-disabled:`
+    // is set by Base UI's state-attribute mapping regardless of render mode.
+    render(<Button disabled>Save</Button>);
+    const button = screen.getByRole("button");
+    expect(button).toHaveClass("data-disabled:cursor-not-allowed");
+    expect(button).toHaveClass("data-disabled:pointer-events-none");
+  });
+
+  it("disabled Checkbox renders with the data-disabled attribute present", () => {
+    // Proves the selector `data-disabled:` (not `disabled:`) is the one that
+    // can actually match — the Checkbox is a <span>, which never satisfies
+    // the `:disabled` CSS pseudo-class.
+    render(<Checkbox disabled />);
+    const checkbox = screen.getByRole("checkbox");
+    expect(checkbox.tagName).toBe("SPAN");
+    expect(checkbox).toHaveAttribute("data-disabled");
+  });
+
+  it("Slider Thumb carries data-disabled:cursor-not-allowed and no bare disabled: variant", () => {
+    const { container } = render(<Slider defaultValue={[50]} disabled />);
+    const thumb = container.querySelector('[data-slot="slider-thumb"]');
+    expect(thumb).not.toBeNull();
+    expect(thumb).toHaveClass("data-disabled:cursor-not-allowed");
+    expect(thumb?.className).not.toMatch(/(^|\s)disabled:/);
+  });
+
+  it("Label carries peer-data-disabled:cursor-not-allowed and no bare peer-disabled: variant", () => {
+    render(<Label>Accept terms</Label>);
+    const label = screen.getByText("Accept terms");
+    expect(label).toHaveClass("peer-data-disabled:cursor-not-allowed");
+    expect(label.className).not.toMatch(/(^|\s)peer-disabled:/);
+  });
+});

package/src/shadcnui/ui/__tests__/cursor-menu-items.test.tsx

@@ -0,0 +1,89 @@
+// packages/nextjs-jsonapi/src/shadcnui/ui/__tests__/cursor-menu-items.test.tsx
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import { Command, CommandItem, CommandList } from "../command";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../dropdown-menu";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "../select";
+
+describe("cursor affordance — menu and listbox items", () => {
+  it("DropdownMenuItem is a pointer, not cursor-default", () => {
+    render(
+      <DropdownMenu defaultOpen>
+        <DropdownMenuTrigger>Open</DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem>Edit</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>,
+    );
+    const item = screen.getByRole("menuitem");
+    expect(item).toHaveClass("cursor-pointer");
+    expect(item).not.toHaveClass("cursor-default");
+  });
+
+  it("SelectItem is a pointer, not cursor-default", () => {
+    render(
+      <Select defaultOpen>
+        <SelectTrigger>Pick</SelectTrigger>
+        <SelectContent>
+          <SelectItem value="a">Alpha</SelectItem>
+        </SelectContent>
+      </Select>,
+    );
+    const option = screen.getByRole("option");
+    expect(option).toHaveClass("cursor-pointer");
+    expect(option).not.toHaveClass("cursor-default");
+  });
+
+  it("CommandItem is a pointer, not cursor-default", () => {
+    render(
+      <Command>
+        <CommandList>
+          <CommandItem value="alpha">Alpha</CommandItem>
+        </CommandList>
+      </Command>,
+    );
+    const item = screen.getByRole("option");
+    expect(item).toHaveClass("cursor-pointer");
+    expect(item).not.toHaveClass("cursor-default");
+  });
+
+  it("no shadcnui primitive still ships a bare cursor-default class", async () => {
+    // Guards the sites a render test cannot cheaply reach (context-menu's
+    // right-click trigger, select's scroll arrows, submenu triggers,
+    // checkbox/radio items) and stops the class returning via a shadcn resync.
+    //
+    // Reads the ui/ directory instead of a hardcoded file list so new
+    // primitives are covered automatically. Only flags a BARE `cursor-default`
+    // token — a variant-prefixed one like `data-disabled:cursor-default` (or a
+    // future `disabled:cursor-default`) is a legitimate, intentional class
+    // (see slider.tsx's Control) and must NOT be flagged.
+    const fs = await import("node:fs/promises");
+    const path = await import("node:path");
+    const dir = path.resolve(__dirname, "..");
+    const entries = await fs.readdir(dir, { withFileTypes: true });
+    const files = entries.filter((entry) => entry.isFile() && entry.name.endsWith(".tsx")).map((entry) => entry.name);
+
+    expect(files.length).toBeGreaterThan(0);
+
+    // Matches a bare `cursor-default` token: the character immediately before
+    // it must NOT be `:` or `-` (which would mean it's part of a variant
+    // prefix like `data-disabled:cursor-default`). Start-of-string,
+    // whitespace, and quote characters preceding it all count as bare.
+    const bareCursorDefault = /(?<![:-])cursor-default/;
+
+    for (const file of files) {
+      const source = await fs.readFile(path.join(dir, file), "utf8");
+      expect(source, `${file} must not contain a bare cursor-default class`).not.toMatch(bareCursorDefault);
+    }
+  });
+
+  it("bare-cursor-default regex catches an unprefixed token and ignores a variant-prefixed one", () => {
+    const bareCursorDefault = /(?<![:-])cursor-default/;
+
+    expect("flex cursor-default items-center").toMatch(bareCursorDefault);
+    expect('"cursor-default"').toMatch(bareCursorDefault);
+    expect("data-disabled:cursor-default").not.toMatch(bareCursorDefault);
+    expect("disabled:cursor-default").not.toMatch(bareCursorDefault);
+  });
+});

package/src/shadcnui/ui/button.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:ring-[2px] aria-invalid:ring-[2px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  "focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:ring-[2px] aria-invalid:ring-[2px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 data-disabled:cursor-not-allowed data-disabled:pointer-events-none [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none cursor-pointer",
   {
     variants: {
       variant: {

package/src/shadcnui/ui/checkbox.tsx

@@ -10,7 +10,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[2px] aria-invalid:ring-[2px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[2px] aria-invalid:ring-[2px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-50",
         className,
       )}
       {...props}

package/src/shadcnui/ui/combobox.tsx

@@ -124,7 +124,7 @@ function ComboboxItem({ className, children, ...props }: ComboboxPrimitive.Item.
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 relative flex w-full cursor-pointer items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}

package/src/shadcnui/ui/command.tsx

@@ -116,7 +116,7 @@ function CommandItem({ className, children, ...props }: React.ComponentProps<typ
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "data-[selected=true]:bg-muted data-[selected=true]:text-foreground data-[selected=true]:*:[svg]:text-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none [&_svg:not([class*='size-'])]:size-3.5 [[data-slot=dialog-content]_&]:rounded-md group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "data-[selected=true]:bg-muted data-[selected=true]:text-foreground data-[selected=true]:*:[svg]:text-foreground relative flex min-h-7 cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none [&_svg:not([class*='size-'])]:size-3.5 [[data-slot=dialog-content]_&]:rounded-md group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}

package/src/shadcnui/ui/context-menu.tsx

@@ -93,7 +93,7 @@ function ContextMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/context-menu-item relative flex cursor-pointer items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
@@ -118,7 +118,7 @@ function ContextMenuSubTrigger({
       data-slot="context-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-pointer items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
@@ -138,7 +138,7 @@ function ContextMenuCheckboxItem({ className, children, checked, ...props }: Con
     <ContextMenuPrimitive.CheckboxItem
       data-slot="context-menu-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-pointer items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       checked={checked}
@@ -163,7 +163,7 @@ function ContextMenuRadioItem({ className, children, ...props }: ContextMenuPrim
     <ContextMenuPrimitive.RadioItem
       data-slot="context-menu-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-pointer items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}

package/src/shadcnui/ui/dropdown-menu.tsx

@@ -84,7 +84,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex cursor-pointer items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
@@ -109,7 +109,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-pointer items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
@@ -149,7 +149,7 @@ function DropdownMenuCheckboxItem({ className, children, checked, ...props }: Me
     <MenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-pointer items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       checked={checked}
@@ -177,7 +177,7 @@ function DropdownMenuRadioItem({ className, children, ...props }: MenuPrimitive.
     <MenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-pointer items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}

package/src/shadcnui/ui/label.tsx

@@ -9,7 +9,7 @@ function Label({ className, ...props }: React.ComponentProps<"label">) {
     <label
       data-slot="label"
       className={cn(
-        "gap-2 text-xs/relaxed leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
+        "gap-2 text-xs/relaxed leading-none font-medium group-data-[disabled=true]:opacity-50 peer-data-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-data-disabled:cursor-not-allowed",
         className,
       )}
       {...props}

package/src/shadcnui/ui/radio-group.tsx

@@ -15,7 +15,7 @@ function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
     <RadioPrimitive.Root
       data-slot="radio-group-item"
       className={cn(
-        "border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full transition-none focus-visible:ring-[2px] aria-invalid:ring-[2px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full transition-none focus-visible:ring-[2px] aria-invalid:ring-[2px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-50",
         className,
       )}
       {...props}

package/src/shadcnui/ui/select.tsx

@@ -97,7 +97,7 @@ function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Prop
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-pointer items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className,
       )}
       {...props}
@@ -129,7 +129,7 @@ function SelectScrollUpButton({ className, ...props }: React.ComponentProps<type
     <SelectPrimitive.ScrollUpArrow
       data-slot="select-scroll-up-button"
       className={cn(
-        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5 top-0 w-full",
+        "bg-popover z-10 flex cursor-pointer items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5 top-0 w-full",
         className,
       )}
       {...props}
@@ -144,7 +144,7 @@ function SelectScrollDownButton({ className, ...props }: React.ComponentProps<ty
     <SelectPrimitive.ScrollDownArrow
       data-slot="select-scroll-down-button"
       className={cn(
-        "bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5 bottom-0 w-full",
+        "bg-popover z-10 flex cursor-pointer items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5 bottom-0 w-full",
         className,
       )}
       {...props}

package/src/shadcnui/ui/slider.tsx

@@ -23,8 +23,9 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }
       {...props}
     >
       <SliderPrimitive.Control
+        data-slot="slider-control"
         className={cn(
-          "data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col",
+          "data-vertical:min-h-40 relative flex w-full touch-none items-center select-none cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col",
           className,
         )}
       >
@@ -41,7 +42,7 @@ function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }
           <SliderPrimitive.Thumb
             data-slot="slider-thumb"
             key={index}
-            className="border-primary ring-ring/30 size-4 rounded-md border bg-white shadow-sm transition-colors hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50"
+            className="border-primary ring-ring/30 size-4 rounded-md border bg-white shadow-sm transition-colors hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden block shrink-0 select-none cursor-grab active:cursor-grabbing data-disabled:cursor-not-allowed data-disabled:pointer-events-none data-disabled:opacity-50"
           />
         ))}
       </SliderPrimitive.Control>

package/src/shadcnui/ui/switch.tsx

@@ -17,7 +17,7 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=default]:h-[16.6px] data-[size=default]:w-[28px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=default]:h-[16.6px] data-[size=default]:w-[28px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 cursor-pointer data-disabled:cursor-not-allowed data-disabled:opacity-50",
         className,
       )}
       {...props}