@tangle-network/ui 11.22.2 → 11.22.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/primitives/switch.js +2 -2
  3. package/package.json +2 -2
  4. package/src/primitives/switch.test.tsx +7 -3
  5. package/src/primitives/switch.tsx +8 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @tangle-network/ui
2
2
 
3
+ ## 11.22.3
4
+
5
+ ### Patch Changes
6
+
7
+ - 191de4b: Switch: draw the on state as an `--accent-text` track carrying a `bg-card` thumb. The `bg-primary` track measured 2.4:1 against the dark card and canvas, and its `bg-background` thumb 2.5:1 against the track, so a checked switch did not clear the 3:1 non-text floor in dark themes. Accent text clears 3:1 against the card and the canvas in every theme, which `@tangle-network/brand` now asserts per theme.
8
+
3
9
  ## 11.22.2
4
10
 
5
11
  ### Patch Changes
package/dist/primitives/switch.js CHANGED
@@ -6,10 +6,10 @@ import { jsx } from "react/jsx-runtime";
6
6
  import * as SwitchPrimitives from "@radix-ui/react-switch";
7
7
  //#region src/primitives/switch.tsx
8
8
  const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SwitchPrimitives.Root, {
9
- 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),
9
+ 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-[var(--accent-text)] data-[state=unchecked]:border-muted-foreground data-[state=unchecked]:bg-transparent", focusRing, className),
10
10
  ...props,
11
11
  ref,
12
- 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") })
12
+ 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-card data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-muted-foreground") })
13
13
  }));
14
14
  Switch.displayName = SwitchPrimitives.Root.displayName;
15
15
  //#endregion
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tangle-network/ui",
3
- "version": "11.22.2",
3
+ "version": "11.22.3",
4
4
  "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
5
5
  "type": "module",
6
6
  "license": "MIT",
@@ -149,7 +149,7 @@
149
149
  "peerDependencies": {
150
150
  "@hocuspocus/provider": ">=2.15.0 <5.0.0",
151
151
  "@nanostores/react": ">=0.8.4 <3.0.0",
152
- "@tangle-network/brand": "^1.15.4",
152
+ "@tangle-network/brand": "^1.15.6",
153
153
  "@tiptap/core": ">=3.20.4 <4.0.0",
154
154
  "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
155
155
  "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",
package/src/primitives/switch.test.tsx CHANGED
@@ -24,12 +24,16 @@ describe("Switch", () => {
24
24
  expect(stateClasses(thumb, "unchecked")).not.toContain("bg-background");
25
25
  });
26
26
 
27
- it("fills the track with primary once it is on", () => {
27
+ it("draws its on state as an accent-text track with a card thumb, so a checked switch clears 3:1 in every theme", () => {
28
28
  render(<Switch aria-label="Reminders" />);
29
29
  const track = screen.getByRole("switch", { name: "Reminders" });
30
30
  fireEvent.click(track);
31
31
  expect(track).toHaveAttribute("data-state", "checked");
32
- expect(stateClasses(track, "checked")).toContain("bg-primary");
33
- expect(stateClasses(track.firstElementChild as Element, "checked")).toContain("bg-background");
32
+ const thumb = track.firstElementChild as Element;
33
+ expect(stateClasses(track, "checked")).toContain("bg-[var(--accent-text)]");
34
+ expect(stateClasses(track, "checked")).toContain("border-transparent");
35
+ expect(stateClasses(track, "checked")).not.toContain("bg-primary");
36
+ expect(stateClasses(thumb, "checked")).toContain("bg-card");
37
+ expect(stateClasses(thumb, "checked")).not.toContain("bg-background");
34
38
  });
35
39
  });
package/src/primitives/switch.tsx CHANGED
@@ -16,7 +16,13 @@ const Switch = React.forwardRef<
16
16
  // switch's boundary is non-text content). The old bg-input track under a
17
17
  // bg-background thumb read as one flat shape, so an off switch was not
18
18
  // visible at all. --border-strong was tried and measured 2.2:1 on a white card.
19
- "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",
19
+ // On is an --accent-text track carrying a card-coloured thumb. Accent text
20
+ // is held to text contrast on the card and the canvas, so the track's edge
21
+ // and the thumb on it (the same pair, inverted) both clear 3:1 in every
22
+ // theme. The bg-primary fill is tuned to carry white text and measured
23
+ // 2.4:1 on the dark card, with a bg-background thumb at 2.5:1 on it.
24
+ // brand's switch-contrast.test.ts asserts these pairs for every theme.
25
+ "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-[var(--accent-text)] data-[state=unchecked]:border-muted-foreground data-[state=unchecked]:bg-transparent",
20
26
  focusRing,
21
27
  className,
22
28
  )}
@@ -25,7 +31,7 @@ const Switch = React.forwardRef<
25
31
  >
26
32
  <SwitchPrimitives.Thumb
27
33
  className={cn(
28
- "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",
34
+ "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-card data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-muted-foreground",
29
35
  )}
30
36
  />
31
37
  </SwitchPrimitives.Root>