@tangle-network/ui 11.22.0 → 11.22.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @tangle-network/ui
 
+## 11.22.1
+
+### Patch Changes
+
+- eb11ddd: Switch: draw the off state as an outlined track with a filled thumb in `muted-foreground`, which clears 3:1 against the card and the canvas. The old filled `bg-input` track and `bg-background` thumb looked like one flat shape in both themes, so an unchecked switch could not be seen.
+
 ## 11.22.0
 
 ### Minor Changes

package/dist/primitives/switch.js

@@ -6,10 +6,10 @@ import { jsx } from "react/jsx-runtime";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 //#region src/primitives/switch.tsx
 const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SwitchPrimitives.Root, {
-	className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-[background-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", focusRing, className),
+	className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-[background-color,border-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-transparent data-[state=checked]:bg-primary data-[state=unchecked]:border-muted-foreground data-[state=unchecked]:bg-transparent", focusRing, className),
 	...props,
 	ref,
-	children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, { className: cn("pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0") })
+	children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, { className: cn("pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-[translate,background-color] data-[state=checked]:translate-x-4 data-[state=checked]:bg-background data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-muted-foreground") })
 }));
 Switch.displayName = SwitchPrimitives.Root.displayName;
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.22.0",
+  "version": "11.22.1",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -149,7 +149,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.15.2",
+    "@tangle-network/brand": "^1.15.4",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/primitives/switch.test.tsx

@@ -0,0 +1,35 @@
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it } from "vitest";
+import { Switch } from "./switch";
+
+afterEach(cleanup);
+
+/** The classes that apply in a state: unprefixed ones, plus that state's variant. */
+function stateClasses(el: Element, state: "checked" | "unchecked"): string[] {
+  return (el.getAttribute("class") ?? "")
+    .split(/\s+/)
+    .filter((c) => !c.startsWith("data-[") || c.startsWith(`data-[state=${state}]:`))
+    .map((c) => c.replace(`data-[state=${state}]:`, ""));
+}
+
+describe("Switch", () => {
+  it("draws its off state in muted-foreground, so an unchecked switch is visible on a card or the canvas", () => {
+    render(<Switch aria-label="Reminders" />);
+    const track = screen.getByRole("switch", { name: "Reminders" });
+    const thumb = track.firstElementChild as Element;
+    expect(track).toHaveAttribute("data-state", "unchecked");
+    expect(stateClasses(track, "unchecked")).toContain("border-muted-foreground");
+    expect(stateClasses(track, "unchecked")).not.toContain("bg-input");
+    expect(stateClasses(thumb, "unchecked")).toContain("bg-muted-foreground");
+    expect(stateClasses(thumb, "unchecked")).not.toContain("bg-background");
+  });
+
+  it("fills the track with primary once it is on", () => {
+    render(<Switch aria-label="Reminders" />);
+    const track = screen.getByRole("switch", { name: "Reminders" });
+    fireEvent.click(track);
+    expect(track).toHaveAttribute("data-state", "checked");
+    expect(stateClasses(track, "checked")).toContain("bg-primary");
+    expect(stateClasses(track.firstElementChild as Element, "checked")).toContain("bg-background");
+  });
+});

package/src/primitives/switch.tsx

@@ -11,7 +11,12 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-[background-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      // Off is an outlined track with a filled thumb, both in muted-foreground,
+      // which clears 3:1 against the card and the canvas in both themes (a
+      // switch's boundary is non-text content). The old bg-input track under a
+      // bg-background thumb read as one flat shape, so an off switch was not
+      // visible at all. --border-strong was tried and measured 2.2:1 on a white card.
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-[background-color,border-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-transparent data-[state=checked]:bg-primary data-[state=unchecked]:border-muted-foreground data-[state=unchecked]:bg-transparent",
       focusRing,
       className,
     )}
@@ -20,7 +25,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+        "pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-[translate,background-color] data-[state=checked]:translate-x-4 data-[state=checked]:bg-background data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-muted-foreground",
       )}
     />
   </SwitchPrimitives.Root>